/* THE LIST — the phone design (760px and narrower). GENERATED by tools/v13/phone-css.js from
 * Cowork's phone.css (cowork-handoff/phone/source) plus tools/v13/phone-extra.css. Do not edit
 * by hand: change the source and run the tool.
 *
 * EVERY rule sits inside one @media (max-width:760px) block, and the file is linked with the
 * same media query. A page takes this look when it carries the block <div id="vph" class="vph">,
 * written by tools/v13/build.js. Here that block is shown and the rest of the page body is
 * hidden. Classes are prefixed p- and scoped under .vph.
 */
@media (max-width:760px){
body.vphp #vph{display:block}
body.vphp .tl-main > :not(#vph){display:none!important}
body.vphp{background:#04060a}
/* a clean slate inside the block: no rule from the older page may leak in */
.vph :is(section,div,span,p,a,h1,h2,h3,button,input,textarea,label,details,summary,strong,b,small,em,i,nav,iframe,canvas,ul,li,img){all:revert;box-sizing:border-box}
.vph [hidden]{display:none!important}
.vph{--ink:#04060a;--panel:#080c10;--line:#1a2428;--bone:#eafff5;--soft:#b9cdc4;--mute:#8fa39b;--nice:#00ff99;--naughty:#e62e48;--gold:#ffb547;
--display:'Instrument Serif',Georgia,'Times New Roman',serif;--body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;background:var(--ink);color:var(--bone);font:400 16.5px/1.55 var(--body);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.vph section{scroll-margin-top:58px}
.vph a{color:var(--bone)}
.vph :focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.vph h1,.vph h2,.vph h3{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance}
.vph h1{font-size:40px;line-height:1.02}
.vph h2{font-size:32px;line-height:1.06}
.vph h1 em,.vph h2 em{font-style:italic}
.vph p{margin:0;color:var(--soft);text-wrap:pretty}
.vph .p-eyebrow{margin:0;font:400 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.vph .p-note{font:400 11px/1.6 var(--mono);letter-spacing:.1em;color:var(--mute)}
.vph .p-mono{font-family:var(--mono)}
.vph .p-stack{display:flex;flex-direction:column;gap:16px}
.vph section{padding:52px 18px;border-top:1px solid var(--line)}
.vph .p-btn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 16px;font:500 13px/1.2 var(--mono);letter-spacing:.14em;text-decoration:none;text-align:center;cursor:pointer;border:1px solid var(--bone);border-radius:0;color:var(--bone);background:transparent}
.vph .p-btn.p-nice{background:var(--nice);border-color:var(--nice);color:var(--ink)}
.vph .p-btn.p-naughty{background:var(--naughty);border-color:var(--naughty);color:var(--ink)}
.vph .p-btn.p-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.vph .p-btn[aria-disabled=true]{border-color:#4a524d;color:var(--mute);cursor:not-allowed}
.vph .p-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vph .p-link{font:500 14px var(--body);color:var(--nice);text-decoration:none}
.vph .p-hero{padding:26px 18px 30px;border-top:0}
.vph .p-halves{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.vph .p-half{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 10px 12px;border:1px solid;text-align:center;overflow:hidden;text-decoration:none}
.vph .p-half.p-n1{border-color:rgba(0,255,153,.38);color:var(--nice)}
.vph .p-half.p-n2{border-color:rgba(230,46,72,.5);color:var(--naughty)}
.vph .p-half canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.vph .p-half::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 80% 62% at 50% 54%,rgba(4,6,10,.9) 0%,rgba(4,6,10,.66) 58%,rgba(4,6,10,.12) 100%)}
.vph .p-half>*:not(canvas){position:relative;z-index:2}
.vph .p-half svg{width:34px;height:40px}
.vph .p-half .p-eyebrow{color:inherit;font-size:10.5px}
.vph .p-half .p-q{font:400 19.5px/1.14 var(--display);color:var(--bone);min-height:4.6em;display:flex;align-items:center}
.vph .p-half .p-q em{color:inherit;font-style:italic}
.vph .p-half.p-n1 .p-q em{color:var(--nice)}
.vph .p-half.p-n2 .p-q em{color:var(--naughty)}
.vph .p-half .p-btn{width:100%;min-height:46px}
.vph .p-half .p-note{font-size:9.5px;letter-spacing:.08em}
.vph .p-censusbar{height:5px;background:var(--naughty);margin-top:18px}
.vph .p-censusbar i{display:block;height:100%;background:var(--nice)}
.vph .p-census{display:flex;justify-content:space-between;margin-top:8px;font:500 11.5px var(--mono);letter-spacing:.12em}
.vph .p-latest{display:flex;flex-direction:column;gap:6px;margin-top:20px;padding:12px 14px;border:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--soft);text-decoration:none}
.vph .p-latest b{font:400 11px var(--mono);letter-spacing:.12em;color:var(--mute)}
.vph .p-lead{font:400 23px/1.2 var(--display);color:var(--bone);border-left:2px solid var(--nice);padding-left:14px}
.vph .p-banner .p-punch{margin-top:14px;font:600 16.5px/1.5 var(--body);letter-spacing:0;color:var(--bone);text-align:left}
.vph .p-banner{padding:22px 18px;text-align:center;font:400 12px/1.8 var(--mono);letter-spacing:.3em;color:var(--nice);border-top:1px solid var(--line)}
.vph .p-tiers{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.vph .p-tier{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line)}
.vph .p-tier.p-top{border-color:var(--bone);background:var(--panel)}
.vph .p-tier .p-h{display:flex;align-items:baseline;gap:14px;font:500 12px var(--mono);letter-spacing:.16em}
.vph .p-tier .p-h b{font:400 23px var(--mono);letter-spacing:0;color:var(--bone)}
.vph .p-tier.p-top .p-h b{color:var(--nice)}
.vph .p-tier p{font-size:15px;line-height:1.5}
.vph .p-one{background:#0a0a06}
.vph .p-price{font:400 60px/.95 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.vph details{border-top:1px solid var(--line)}
.vph details:last-of-type{border-bottom:1px solid var(--line)}
.vph summary{display:flex;justify-content:space-between;gap:14px;padding:16px 0;font-weight:600;font-size:17px;line-height:1.3;cursor:pointer;list-style:none}
.vph summary::-webkit-details-marker{display:none}
.vph summary::after{content:"+";font-family:var(--mono);color:var(--nice)}
.vph details[open]>summary::after{content:"−"}
.vph details p{padding:0 0 12px}
.vph details p:last-child{padding-bottom:20px}
.vph .p-pagehead{border-top:0;padding:34px 18px 40px}
.vph .p-counts{display:flex;justify-content:space-between;align-items:baseline;font:400 11px var(--mono);letter-spacing:.16em}
.vph .p-counts b{font:400 30px var(--mono);letter-spacing:0;margin:0 8px}
.vph .p-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.vph .p-seg button{min-height:44px;font:500 11.5px var(--mono);letter-spacing:.14em;color:var(--soft);background:none;border:0;border-right:1px solid var(--line)}
.vph .p-seg button:last-child{border-right:0}
.vph .p-seg button[aria-pressed=true]{background:var(--bone);color:var(--ink)}
.vph .p-frow{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}
.vph .p-frow .p-jump{display:flex;border:1px solid var(--line)}
.vph .p-frow input{flex:1;min-width:0;background:none;border:0;color:var(--bone);font:400 12px var(--mono);letter-spacing:.1em;padding:0 12px}
.vph .p-frow .p-jump button{font:500 12px var(--mono);letter-spacing:.14em;color:var(--nice);background:none;border:0;border-left:1px solid var(--line);padding:0 14px}
.vph .p-frow .p-btn{min-height:44px;border-color:var(--line);font-size:11.5px}
.vph .p-rec{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.vph .p-recopen{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:15px 12px;border:1px solid var(--bone);margin-bottom:8px;text-decoration:none;font:400 11px var(--mono);letter-spacing:.1em;color:var(--soft)}
.vph .p-recopen .p-n{font:500 15px var(--mono);letter-spacing:0;color:var(--bone);animation:p-pulse 1.6s ease-in-out infinite}
.vph .p-recopen .p-go{color:var(--bone);font-weight:500;white-space:nowrap}
@keyframes p-pulse{50%{opacity:.4}}
.vph .p-recrow{border-top:0;border-bottom:1px solid var(--line);border-left:2px solid var(--nice);padding-left:10px}
.vph .p-recrow.p-r{border-left-color:var(--naughty)}
.vph .p-recrow:last-of-type{border-bottom:1px solid var(--line)}
.vph .p-recrow summary{display:grid;grid-template-columns:40px auto 1fr 12px;gap:10px;align-items:baseline;padding:14px 0;font-weight:400;font-size:15px}
.vph .p-recrow summary .p-n{font:500 14px var(--mono)}
.vph .p-recrow summary .p-al{font-weight:600;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vph .p-recrow summary .p-st{color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vph .p-recrow summary::after{content:"+";font-family:var(--mono);color:var(--mute)}
.vph .p-recrow[open] summary::after{content:"−"}
.vph .p-recrow .p-full{padding:0 0 16px;display:flex;flex-direction:column;gap:10px}
.vph .p-recrow .p-full p{font:400 22px/1.2 var(--display);color:var(--bone);padding:0}
.vph .p-seq{padding:14px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.vph .p-seq div{display:flex;justify-content:space-between;font:400 10.5px var(--mono);letter-spacing:.14em;color:var(--mute)}
.vph .p-seq input{width:100%;accent-color:var(--nice)}
.vph .p-rank{display:flex;flex-direction:column;margin-top:24px}
.vph .p-rank div{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.vph .p-rank b{font:400 20px var(--mono);font-variant-numeric:tabular-nums;color:var(--bone)}
.vph .p-rank b i{font-style:normal;color:var(--mute);margin-right:10px}
.vph .p-rank span{font-weight:600;font-size:15.5px;line-height:1.35;color:var(--bone)}
.vph .p-rank small{font-size:15px;line-height:1.5;color:var(--soft)}
.vph .p-rank .p-you{margin:0 -10px;padding:16px 10px;border:1px solid var(--gold);background:rgba(255,181,71,.05)}
.vph .p-rank .p-you b,.vph .p-rank .p-you span,.vph .p-rank .p-you small{color:var(--gold)}
.vph .p-rank .p-you+div{border-top:0}
.vph .p-rule{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);background:var(--panel);font-size:15px;line-height:1.5;color:var(--soft)}
.vph .p-rule b{font:400 11px var(--mono);letter-spacing:.14em;color:var(--gold)}
.vph .p-qa{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.vph .p-qa div{display:flex;flex-direction:column;gap:6px;padding:16px 12px 16px 0;border-bottom:1px solid var(--line)}
.vph .p-qa b{font:400 10.5px var(--mono);letter-spacing:.14em;color:var(--mute)}
.vph .p-qa span{color:var(--soft);font-size:14.5px;line-height:1.4}
.vph .p-end{text-align:center}
.vph .p-end .p-stack{align-items:stretch}
.vph .p-end h2{font-size:40px}
.vph .p-stage{position:relative;height:min(74vh,640px);min-height:470px;margin:26px -18px 0;background:#03050a;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.vph .p-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vph .p-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 80% at 50% 44%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%)}
.vph .p-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.06;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.vph .p-hud{position:absolute;left:16px;top:14px;font:400 10px/1.5 var(--mono);letter-spacing:.16em;color:var(--soft);pointer-events:none;text-shadow:0 1px 10px #000}
.vph .p-hud b{display:block;font:400 30px/1.05 var(--mono);letter-spacing:0;color:var(--bone);margin-bottom:4px}
.vph .p-hint{position:absolute;right:16px;top:16px;font:400 10px/1.5 var(--mono);letter-spacing:.14em;color:var(--soft);pointer-events:none;text-align:right;text-shadow:0 1px 10px #000}
.vph .p-line{position:absolute;left:16px;right:16px;bottom:16px;pointer-events:none}
.vph .p-line p{font:400 27px/1.06 var(--display);color:var(--bone);text-shadow:0 2px 22px rgba(0,0,0,.9)}
.vph .p-line p i{color:var(--nice)}
.vph .p-line span{display:block;margin-top:8px;font:400 9.5px/1.5 var(--mono);letter-spacing:.14em;color:var(--soft)}
@media (prefers-reduced-motion:reduce){.vph .p-recopen .p-n{animation:none}}
/* ── the site's own additions to the ported phone stylesheet ── */
/* links inside running text keep the page colour; the ported sheet styles a{} only */
.vph a:hover{color:var(--bone)}
/* grain: same noise and strength as the prototype, stage-sized and laid over normally.
   The prototype's double-size, screen-blended layer costs about a third of the frame rate. */
.vph .p-grain{inset:0;mix-blend-mode:normal}
/* a sample row label, shown only where the local preview serves its test entries */
.vph .p-demo{font:500 10px var(--mono);letter-spacing:.12em;color:var(--ink);background:var(--gold);padding:7px 9px;align-self:flex-start}
/* a still picture of the wall, shown when the phone cannot run the scene */
.vph .p-stage img.p-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* record: the filter panel and messages */
.vph .p-fpanel{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line)}
.vph .p-fpanel label{display:flex;flex-direction:column;gap:6px;font:400 10.5px var(--mono);letter-spacing:.14em;color:var(--mute)}
.vph .p-fpanel select{min-height:44px;background:var(--panel);color:var(--bone);border:1px solid var(--line);border-radius:0;font:400 14px var(--body);padding:0 10px}
.vph .p-recnote{font:400 11px/1.6 var(--mono);letter-spacing:.1em;color:var(--mute);padding:14px 0}
.vph .p-frow input,.vph .p-frow .p-jump button{min-height:44px}
.vph .p-frow input::placeholder{color:var(--mute)}
.vph button{font-family:inherit;border-radius:0;cursor:pointer}
.vph .p-seg button{cursor:pointer}
.vph .p-rec a.p-link{font:500 11px var(--mono);letter-spacing:.1em}
/* text links: the look stays, the touch area grows to 44px */
.vph a.p-link{position:relative}
.vph a.p-link::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* record: FILTERS shows how many are set; the whole record (the live list) opens under the block */
.vph .p-frow .p-btn[data-n]:not([data-n=""])::after{content:" · " attr(data-n);color:var(--nice)}
.vph .p-fpanel select{width:100%}
.vph .p-recrow .p-full .p-note{display:block}
.vph .p-btn[aria-disabled="true"]{color:var(--mute);border-color:var(--line);background:none;pointer-events:none}
body.vphp.vph-walk .tl-main{display:flex!important;flex-direction:column}
body.vphp.vph-walk #vph{display:contents}
body.vphp.vph-walk .tl-main > .shell:not(#vph){display:block!important;order:2;width:100%}
body.vphp.vph-walk #vph > .p-pagehead{order:1}
body.vphp.vph-walk #vph > section#p-findings{order:3}
body.vphp.vph-walk .tl-main > .shell > :is(header,.tl-kept){display:none}
/* older page rules must not set the type of the fold-open rows */
.vph details,.vph summary,.vph details p{font-family:var(--body)}
/* the wall frame: sample label, state line, the flat still */
.vph .p-stage .p-wdemo{position:absolute;left:16px;top:74px}
.vph .p-stage .p-wstate{position:absolute;left:16px;right:16px;top:50%;text-align:center;font:400 11px var(--mono);letter-spacing:.14em;color:var(--soft)}
.vph .p-stage canvas.p-flat{position:absolute;inset:0;width:100%;height:100%;display:block}
.vph .p-stage canvas{touch-action:pan-y}
.vph .p-line p i{font-style:italic}
.vph .p-line p i[data-sky="ruby"]{color:var(--naughty)}
/* links inside answers, and the jump box: 44px touch areas */
.vph details p a{position:relative}
.vph details p a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.vph .p-frow .p-jump{min-height:44px}
.vph .p-frow input{min-height:44px}
}