/* Blind custody · tablet and phone (iOS Safari, Android Chrome) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
.zb-short{display:none}
.zt-scrim{position:fixed;inset:0;z-index:24;background:rgba(3,8,18,.55);opacity:0;transition:opacity .25s ease-out}
.zt-scrim.on{opacity:1}
.zt-foot{display:none}
.fseq-who{display:none}

/* safe areas: notch, rounded corners, home indicator */
.zb{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.zr{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:calc(80px + env(safe-area-inset-bottom))}

/* hover only where a pointer can hover */
@media(hover:none){.zt a:hover{background:none;color:var(--grey)}.zt a.on:hover{background:rgba(91,79,207,.22);color:var(--ink)}.zt a:active{background:rgba(159,176,196,.12)}}

/* ---------- tablet and below: contents becomes a drawer ---------- */
@media(max-width:999px){
 .zv{grid-template-columns:minmax(0,1fr)}
 .zb-crumb{display:none}
 .zb-tree{display:inline-flex!important}
 .zt{position:fixed;top:0;left:0;bottom:0;z-index:25;width:min(340px,88vw);height:100vh;height:100dvh;padding:calc(var(--bar) + 12px) 10px calc(20px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));transform:translateX(-102%);transition:transform .3s ease-out;box-shadow:20px 0 60px rgba(0,0,0,.5);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden}
 .zt.open{transform:none;visibility:visible}
 .zt:not(.open){transition:transform .3s ease-out,visibility 0s linear .3s}
 .zb{z-index:30}
 .zt a{min-height:44px;padding:10px 10px}
 .zt-foot{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
 .zt-foot a,.zt-foot button{display:flex;align-items:center;min-height:44px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--grey);font:400 14.5px var(--sans);text-align:left}
 .zt-foot a:active,.zt-foot button:active{background:rgba(159,176,196,.1)}
 html.zlock,html.zlock body{overflow:hidden}
 .zb-r .zb-btn{display:none}
 .zr-tabs{max-width:none}
}
@media(min-width:1000px){.zt-scrim{display:none!important}}

/* ---------- tablet portrait (iPad mini to iPad Pro 11, Android tablets) ---------- */
@media(min-width:700px) and (max-width:999px){
 .zp{padding:56px clamp(40px,7vw,72px) 52px}
 .zr{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
}

/* ---------- phone ---------- */
@media(max-width:699px){
 :root{--bar:52px}
 html{scroll-padding-top:110px}
 .zb{gap:10px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .zb-logo span{display:none}
 .zb-logo{min-width:44px;min-height:44px;justify-content:center}
 .zb-tree{height:40px;padding:0 14px;color:var(--ink);border-color:rgba(159,176,196,.3)}
 .zb-view button{height:34px;padding:0 12px;font-size:13.5px}
 .zb-full{display:none}.zb-short{display:inline}
 .zr{padding:0 0 calc(56px + env(safe-area-inset-bottom))}
 .zr-tabs{padding:8px max(12px,env(safe-area-inset-left)) 8px;gap:8px}
 .zr-tab{height:30px;font-size:12px;max-width:100%;overflow:hidden}
 .zr-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .zr-meta{display:block;font-size:11.5px;white-space:nowrap}
 .zp{border-radius:0;box-shadow:none;padding:28px max(20px,env(safe-area-inset-left)) 40px;font-size:17px;line-height:1.62}
 .zp p{text-align:left;hyphens:manual}
 .zp-run{margin-bottom:28px;font-size:10.5px;letter-spacing:.08em}
 .zp h1{font-size:29px;line-height:1.15}
 .zp .zh{font-size:25px}
 .zf-head{font-size:14px}
 .zf-by{font-size:13.5px}
 .zf-kw{font-size:14.5px}
 .zf-abs p{font-size:16px;text-align:left}
 .zf-proofs{grid-template-columns:1fr}
 .zp-lead{font-size:18.5px;margin:22px 0}
 .zs-rule{margin:44px 0 36px}
 .zs{scroll-margin-top:100px}
 .zp-badge{display:inline-flex;margin:8px 0 0}
 .zp .zh .zp-badge,.zp h1 .zp-badge{display:flex;width:max-content}
 .zp code,.zp .m{white-space:normal;word-break:break-word}
 .zf-eq{white-space:normal;text-align:left;font-size:13px;word-break:break-word;padding:16px}
 .zcards{grid-template-columns:1fr}
 .znote,.zstat{font-size:15.5px}
 .zstat{flex-direction:column;gap:4px}
 .zquote{font-size:19px}
 .zprop{padding:16px}
 /* listings: full-bleed, scroll sideways, narrower gutter */
 .zcode{margin-left:calc(-1 * max(20px,env(safe-area-inset-left)));margin-right:calc(-1 * max(20px,env(safe-area-inset-right)))}
 .zcode .zcap-t{padding:0 max(20px,env(safe-area-inset-left))}
 .zcode pre{border-radius:0;font-size:12px;-webkit-overflow-scrolling:touch}
 .zcode pre span.l::before{width:2.4em;padding-right:.9em}
 .zrefs li{grid-template-columns:1fr;gap:2px}
 .zpair-y,.zpair-s{padding:16px}
 .zpair-s pre{font-size:11.5px}
 .zfig-f{padding:18px 14px;margin-left:0;margin-right:0}
}

/* tables turn into labelled rows when the table's own box is narrow */
.zfig{container-type:inline-size}
@container (max-width:560px){
 .ztbl table,.ztbl thead,.ztbl tbody,.ztbl tr,.ztbl td{display:block;width:auto}
 .ztbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .ztbl tr{padding:10px 0;border-top:1px solid var(--p-line)}
 .ztbl tr:first-child{border-top:0}
 .ztbl td{padding:2px 0;border:0}
 .ztbl td::before{content:attr(data-h);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--p-sec);margin-top:4px}
 .ztbl td:first-child{font-weight:600}
 .ztbl td:first-child::before{margin-top:0}
 .ztbl.dn td:first-child::before,.ztbl.dn td:last-child::before{content:attr(data-h);display:block;color:var(--p-sec);font-weight:400}
 .ztbl.dn td:first-child{color:var(--ok)}
 .ztbl.dn td:last-child{color:var(--bad)}
 .ztbl.not td:first-child{white-space:normal}
}

/* sequence diagrams read as a numbered list of messages when narrow */
.zfig-f{container-type:inline-size}
@container (max-width:520px){
 .fseq{min-width:0;display:flex;flex-direction:column;gap:6px;counter-reset:sq}
 .fseq-h{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
 .fseq-h span{font-size:12px;padding:5px 9px}
 .fseq-r{display:block;min-height:0;background:none;counter-increment:sq}
 .fseq-m,.fseq-self{display:grid;grid-template-columns:26px minmax(0,1fr);gap:2px 8px;margin:0!important;padding:9px 10px;border:1px solid var(--p-line);border-radius:6px;background:#fff;text-align:left;max-width:none}
 .fseq-m::before,.fseq-self::before{content:counter(sq,decimal-leading-zero);grid-row:span 2;font-family:var(--mono);font-size:11px;color:var(--acc);padding-top:1px}
 .fseq-who{display:block;font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--p-sec)}
 .fseq-m span,.fseq-self span{padding:0;text-align:left;background:none;font-size:12.5px;color:var(--p-ink)}
 .fseq-m i{display:none}
 .fseq-m.dash{border-style:dashed}
 .fseq-self{background:var(--acc-l);border-color:rgba(91,79,207,.3)}
}

/* phone in landscape: give the reading area back */
@media(max-height:500px) and (orientation:landscape){
 .zr-tabs{display:none}
 .zs{scroll-margin-top:64px}
 .zt a{min-height:40px;padding:8px 10px}
}

@media(prefers-reduced-motion:reduce){.zt,.zt-scrim{transition:none}}

/* threats: stacked with both columns' meaning, from tablet down */
@media(max-width:999px){
 .zthr-h{display:none}
 .zthr summary{grid-template-columns:minmax(0,1fr) 24px;gap:2px 10px;padding:12px 0;min-height:44px}
 .zthr summary b{grid-column:1}
 .zthr summary span{display:block!important;grid-column:1;grid-row:2;font-size:14px}
 .zthr summary span::before{content:"Attacker gets: ";font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--p-sec)}
 .zthr summary::after{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:18px}
}
/* no sideways drift on narrow phones */
.zp{overflow-x:clip}
@media(max-width:699px){.zp-run span{white-space:normal}.zp-run{flex-direction:column;gap:2px}.zp-run .rec{display:none}}