/* Producer Map app skin (dark only). Same token names as the Producer Map PDF (B2.1 SIGN): --ea-font-body, --ea-font-display, --plate-*.
   Body face: EA Helvetica (TeX Gyre Heros, GUST Font License, text in fonts/licences/). Display: Anton. Static woff2, regular and bold; every weight 600 and above is bold.
   Plate band: 4 px here, which is the PDF's 3 pt (the mockup drew 5 px; app and PDF now match). Logic lives in app.js and model.js, never here. */
@font-face{font-family:Anton;src:url(/map/anton.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EA Helvetica";src:url(/map/fonts/heros-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EA Helvetica";src:url(/map/fonts/heros-700.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
:root{--ea-font-body:"EA Helvetica",sans-serif;--ea-font-display:"Anton",sans-serif;
--plate-bg:#050505;--plate-keyline:#8D8A84;--plate-keyline-w:1px;--plate-radius:4px;--plate-band:4px;--plate-name-size:14.67px;--plate-name-track:.06em;--plate-bullet:26.67px;
--ink:#050505;--paper:#F2EDE3;--muted:#BDB7AA;--gold:#FCCC0A;--edge:rgba(242,237,227,.3);--soft:rgba(242,237,227,.18);--panel:rgba(8,8,8,.97);--card:#141414;--card-edge:#262626;--gray:#999;--warn:#FFB59E;
--l1:#FCCC0A;--l2:#7AD0FF;--l3:#FF8A5B;--l4:#9BE37A;--l5:#C79BFF;--l6:#FF7AA8;--l7:#5FE0C0;--l8:#E0C07A;--l9:#A0A8FF;--gutter:clamp(14px,3vw,48px)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.55 var(--ea-font-body);min-height:100vh}
/* photograph: one fixed layer behind everything, never scrolls, no overlay (80 percent brightness is baked into the file). Left anchored on desktop. */
.bg{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;transform:translateZ(0);background:var(--ink) url(/map/bg/station-bg-3344.webp) left center/cover no-repeat}
@media(max-width:960px){.bg{background-image:url(/map/bg/station-bg-1672.webp);background-position:58% center}}
@media(max-width:560px){.bg{background-position:60% center}}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15}
h1{font-family:var(--ea-font-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.98;letter-spacing:.005em;color:var(--paper)}
h1 .y{color:var(--gold)}
h2{font-size:1.2rem}h3{font-size:1.02rem}
p{margin:.4em 0 .9em}a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:10px 14px;z-index:50;font-weight:700}.skip:focus{left:8px;top:8px}
.mute{color:var(--muted)}.small{font-size:.9rem}.center{text-align:center}.right{margin-left:auto}.grow{flex:1}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lead{font-size:1.1rem}.err{color:var(--warn);font-weight:700}.ok{color:var(--gold)}
.kicker{margin:0 0 8px;color:var(--gold);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
/* header */
.strip{background:var(--gold);color:var(--ink);text-align:center;font-weight:700;padding:8px 12px;font-size:.9rem}.strip.test{background:var(--l2)}
.top{display:flex;align-items:center;gap:16px;padding:12px var(--gutter);background:rgba(5,5,5,.92);border-bottom:1px solid var(--soft)}
.top img{height:clamp(30px,3vw,38px);width:auto;display:block}
.top .brand-sub{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.top .who{margin-left:auto;font-size:.85rem;color:var(--muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:560px){.top .brand-sub{display:none}.top .who .em{display:none}}
/* page and panel: near-black, thin border. .panel carries the small yellow tab; .card is the quieter secondary panel. */
main{display:block}
.wrap{max-width:720px;margin:0 auto;padding:clamp(22px,5vh,56px) var(--gutter) 110px}.wrap.wide{max-width:1180px}
@media(max-width:560px){.wrap{padding-top:20px}}
.panel,fieldset.panel,.card,fieldset.card{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:4px;padding:clamp(20px,2.8vw,32px);margin:0 0 22px;min-width:0}
.panel,fieldset.panel{box-shadow:0 24px 64px rgba(0,0,0,.65)}
.panel::before,fieldset.panel::before{content:"";position:absolute;left:clamp(20px,2.8vw,32px);top:-4px;width:64px;height:7px;background:var(--gold);border-radius:1px}
.card,fieldset.card{padding:clamp(16px,2vw,24px);margin:0 0 16px}
@media(max-width:560px){.panel,fieldset.panel{padding:22px 18px 20px}}
.lede{font-size:clamp(1.05rem,1.3vw,1.15rem);margin:14px 0 0;max-width:46ch}
.quiet{border-left:3px solid var(--gold);padding:4px 0 4px 14px;margin:18px 0 0}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:4px;border:2px solid var(--gold);background:var(--gold);color:var(--ink);font:700 17px/1.2 var(--ea-font-body);cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.06)}
.btn.sec{background:rgba(255,255,255,.05);color:var(--paper);border:1px solid rgba(242,237,227,.6)}.btn.sec:hover{background:rgba(255,255,255,.09);border-color:var(--paper);filter:none}
.btn.small{min-height:44px;padding:8px 16px;font-size:15px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.6;cursor:progress}
.btn svg{width:20px;height:20px;flex:none}
@media(max-width:560px){.btn.block-m{width:100%}}
/* forms */
label.f{display:block;font-weight:700;margin:16px 0 6px}
input[type=text],input[type=email],input[type=number],textarea,select{width:100%;font:inherit;padding:11px 12px;border:1px solid rgba(242,237,227,.55);border-radius:4px;background:#0c0c0c;color:var(--paper);min-height:48px}
textarea{min-height:92px}
input.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.8rem;letter-spacing:.35em;text-align:center;max-width:300px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.grid3>.card,.grid3>.card:last-child{margin:0}
.nx{margin:6px 0;padding-left:18px}.said{padding-left:16px}.said li{margin:6px 0}.banner{border:1px solid var(--gold);border-radius:4px;padding:10px 14px;margin:0 0 16px}
details>summary{cursor:pointer;color:var(--muted);min-height:44px;display:flex;align-items:center}details.card>summary{color:var(--paper)}
.hist li{margin:10px 0;list-style:none}.hist{padding:0}
.steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font:400 1.1rem/30px var(--ea-font-display);text-align:center}
/* questions */
.qhead{position:sticky;top:0;z-index:4;background:rgba(5,5,5,.94);margin:0 calc(-1*var(--gutter));padding:10px var(--gutter) 6px;border-bottom:1px solid var(--soft)}
.qhead .savewrap{display:flex;justify-content:flex-end;min-height:20px;padding:0 2px 4px}
.save{font-size:.82rem;color:var(--muted)}.save.bad,.small.bad{color:var(--warn);font-weight:700}
.catnav{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.cn{flex:0 0 auto;display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:6px 12px 6px 8px;border:1px solid var(--soft);background:#0c0c0c;color:var(--paper);border-radius:4px;font:700 14px/1 var(--ea-font-body);cursor:pointer}
.cn .cb{width:26px;height:26px;border-radius:50%;background:var(--c);color:var(--ink);font:400 .95rem/26px var(--ea-font-display);text-align:center}
.cn.cur{border:2px solid var(--gold);background:#1b1a12;padding:5px 11px 5px 7px}
.cn.done::after{content:"\2713";font-weight:700;color:var(--gold)}
.cn.na{opacity:.6}
.catnav .cn:nth-child(1){--c:var(--l1)}.catnav .cn:nth-child(2){--c:var(--l2)}.catnav .cn:nth-child(3){--c:var(--l3)}.catnav .cn:nth-child(4){--c:var(--l4)}.catnav .cn:nth-child(5){--c:var(--l5)}.catnav .cn:nth-child(6){--c:var(--l6)}.catnav .cn:nth-child(7){--c:var(--l7)}.catnav .cn:nth-child(8){--c:var(--l8)}.catnav .cn:nth-child(9){--c:var(--l9)}
.areah{font-family:var(--ea-font-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1;margin:26px 0 0;display:table;background:rgba(5,5,5,.92);padding:8px 16px 6px;border-radius:4px 4px 0 0}
/* text that sits directly on the photo gets a near-black backing so it holds contrast over the lamps (measured, see scripts/producer-map-tests/a11y-check.mjs) */
.areah+p{display:table;background:rgba(5,5,5,.92);padding:2px 16px 8px;border-radius:0 0 4px 4px}
p.exit{display:table;margin:16px auto 0;background:rgba(5,5,5,.92);padding:8px 16px;border-radius:4px}
.qleg{padding:0;display:flex;gap:10px;align-items:center;float:left;width:100%;margin:0 0 14px;color:var(--gold);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.qn{width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;font:400 .9rem/1 var(--ea-font-display);letter-spacing:0;flex:none}
.tick{margin-left:auto;white-space:nowrap;color:var(--paper);letter-spacing:.08em;font-size:12px}
.stem{clear:both;font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:700;line-height:1.3;margin:0 0 14px}
legend.stem{float:left;width:100%;padding:0}
.opt{display:flex;gap:14px;align-items:flex-start;min-height:56px;padding:14px 16px;margin:8px 0;border:1px solid var(--soft);border-radius:4px;background:rgba(255,255,255,.03);cursor:pointer;line-height:1.4}
.opt:hover{border-color:var(--muted)}
.opt input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border-radius:50%;border:2px solid var(--muted);background:transparent;position:relative;cursor:pointer}
.opt input:checked{background:var(--gold);border-color:var(--gold)}
.opt input:checked::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.opt.sel{border:2px solid var(--gold);padding:13px 15px;background:#17160f}
.opt input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.minors{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.minors .opt{flex:1 1 150px;margin:4px 0;min-height:48px;padding:10px 14px;color:var(--muted);font-size:.92rem;align-items:center}
.opt.minor.sel{color:var(--paper);padding:9px 13px}
.bar{position:sticky;bottom:0;z-index:3;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px var(--gutter);margin:0 calc(-1*var(--gutter));background:rgba(5,5,5,.95);border-top:1px solid var(--soft)}
.bar .msg,.bar #barmsg{color:var(--muted);font-size:.9rem}
@media(max-width:560px){.bar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bar #barmsg{grid-column:1/-1;order:-1;text-align:center}.bar .btn{width:100%;padding:12px 10px}}
.exit{font-size:.92rem;color:var(--muted)}.exit a{color:var(--paper)}
/* chips: state shape plus words, never colour alone */
.chip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;padding:4px 10px;border:1px solid var(--soft);border-radius:3px;background:#0d0d0d;--bg:#0d0d0d;--fg:#fff;line-height:1.3}
.chip .gl{--s:14px;margin:0;box-shadow:none}.chip .gl.sug{margin:0 3px}
.chip.gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.tile{border:1px solid var(--soft);border-radius:4px;padding:8px 12px;margin:8px 0;background:rgba(255,255,255,.03)}.tile.sugg{border-color:var(--paper)}.tile.picked{border:2px solid var(--gold);padding:7px 11px}.tile h3{margin:0;font-size:.98rem}
/* ---------- the subway map: a route card per line, sign plate heads, five white state shapes ---------- */
.pmap{margin:22px 0 14px}
.pmap .ln{--c:var(--l1);--lc:var(--c);--bg:var(--card);--fg:#fff;background:var(--card);border:1px solid var(--card-edge);border-radius:8px;padding:14px 20px 16px;margin:0 0 12px}
.pmap .ln:nth-child(9n+1){--c:var(--l1)}.pmap .ln:nth-child(9n+2){--c:var(--l2)}.pmap .ln:nth-child(9n+3){--c:var(--l3)}.pmap .ln:nth-child(9n+4){--c:var(--l4)}.pmap .ln:nth-child(9n+5){--c:var(--l5)}
.pmap .ln:nth-child(9n+6){--c:var(--l6)}.pmap .ln:nth-child(9n+7){--c:var(--l7)}.pmap .ln:nth-child(9n+8){--c:var(--l8)}.pmap .ln:nth-child(9n+9){--c:var(--l9)}
/* sign plate: CSS only on the existing chain .lname > .lbadge + span. No arrow, no direction, no count. */
.pmap .lname{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;background:var(--plate-bg);border:var(--plate-keyline-w) solid var(--plate-keyline);border-radius:var(--plate-radius);padding:4px 16px 8px 5px;font:700 var(--plate-name-size)/1.15 var(--ea-font-body);letter-spacing:var(--plate-name-track);text-transform:uppercase;color:#fff}
.pmap .lname::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--plate-band);background:var(--lc)}
.pmap .lbadge{flex:none;width:var(--plate-bullet);height:var(--plate-bullet);border-radius:50%;background:var(--lc);color:#0A0A0A;font:700 14.67px/var(--plate-bullet) var(--ea-font-body);text-align:center;letter-spacing:0}
.pmap .stns{--pitch:clamp(88px,10.4vw,116px);--pt:14px;list-style:none;margin:6px 0 0;padding:var(--pt) 0 0;display:flex;width:max-content;max-width:100%;position:relative}
.pmap .ln.haspri .stns{--pt:34px}
.pmap .stns::before{content:"";position:absolute;left:calc(var(--pitch)/2);right:calc(var(--pitch)/2);top:calc(var(--pt) + 11px);height:8px;border-radius:4px;background:var(--c);z-index:0}
.pmap .stns li{flex:none;width:var(--pitch);text-align:center;position:relative;z-index:1}
.stn{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;min-height:44px;padding:0 3px 6px;background:none;border:0;color:var(--paper);font:inherit;cursor:pointer;text-align:center;border-radius:4px}
span.stn{cursor:default}
.stn .nm{font-size:12.5px;line-height:1.25;font-weight:700;max-width:112px}
.stn:hover .nm{text-decoration:underline;text-underline-offset:3px}
.stn .nx2{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:-4px}
/* the five state shapes, white on the card (the PDF's shapes, converted from pt to px) */
.dot,.gl{--s:30px;display:block;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:var(--bg);box-shadow:0 0 0 4px var(--bg);z-index:1}
.dot::before,.dot::after,.gl::before,.gl::after{content:"";position:absolute}
.cap .dot,.gl.cap{background:var(--fg)}
.cap .dot::after,.gl.cap::after{left:35%;top:17%;width:26%;height:48%;border:solid var(--bg);border-width:0 calc(var(--s)*.115) calc(var(--s)*.115) 0;transform:rotate(45deg)}
.own .dot,.gl.own{border:calc(var(--s)*.115) solid var(--fg);background:linear-gradient(90deg,var(--fg) 50%,var(--bg) 50%)}
.dev .dot,.gl.dev{border:calc(var(--s)*.115) solid var(--fg);background:var(--bg)}
.dev .dot::after,.gl.dev::after{left:50%;top:50%;width:30%;height:30%;margin:-15% 0 0 -15%;border-radius:50%;background:var(--fg)}
.unk .dot,.gl.unk{border:calc(var(--s)*.1) dashed var(--fg);background:var(--bg)}
.unk .dot::after,.gl.unk::after{content:"?";left:0;right:0;top:50%;margin-top:-.58em;text-align:center;font:700 calc(var(--s)*.56)/1.16 var(--ea-font-body);color:var(--fg)}
.na .dot{--s:18px;margin:6px 0;border:2.5px dotted var(--gray);background:var(--bg)}
.gl.na{border:calc(var(--s)*.17) dotted var(--gray);background:var(--bg);transform:scale(.82)}
.na .nm{color:var(--gray);font-weight:400}
.sug .dot{box-shadow:0 0 0 3px var(--bg),0 0 0 5.6px var(--fg)}
.sug.na .dot{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--fg)}
.gl.sug{box-shadow:0 0 0 2px var(--bg),0 0 0 3.6px var(--fg)}
/* First priority (class pri on the station, no :has): thick gold halo with a white outline, gold chip above, bold gold name. Stronger than Next step. */
.stn.pri .dot{box-shadow:0 0 0 3.5px var(--bg),0 0 0 9px var(--gold),0 0 0 11.5px var(--fg)}
.stn.pri .nm{color:var(--gold);margin-top:6px}
.flag{position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--gold);color:var(--ink);font:700 10px/1 var(--ea-font-body);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:2px;z-index:2}
.stn.pri{padding-top:2px}
@media(max-width:760px){
 .pmap .ln{padding:12px 14px 12px}
 .pmap .stns{--pt:6px;flex-direction:column;width:100%;margin-top:4px}
 .pmap .ln.haspri .stns{--pt:6px}
 .pmap .stns::before{left:16px;right:auto;width:8px;top:calc(var(--pt) + 28px);bottom:28px;height:auto}
 .pmap .stns li{width:100%;text-align:left}
 .stn{flex-direction:row;align-items:center;gap:12px;min-height:56px;padding:0;text-align:left}
 .stn .dot{margin:0 5px}.na .dot{margin:0 11px}
 .stn .nm{max-width:none;flex:1;font-size:15px}
 .stn.pri .nm{margin-top:0}
 .stn .nx2{margin:0 0 0 auto;align-self:center;border:1px solid var(--soft);border-radius:2px;padding:4px 7px}
 .stn.pri{flex-wrap:wrap;row-gap:6px;padding:8px 0}
 .stn.pri .nm{flex:1 1 calc(100% - 64px)}
 .stn.pri .flag,.stn.pri .nx2{margin:0 0 0 52px}
 .flag{position:static;transform:none;margin-left:auto;flex:none}
 .stn.pri .dot{box-shadow:0 0 0 3px var(--bg),0 0 0 7px var(--gold),0 0 0 9px var(--fg)}
}
/* legend: a dark station sign */
.legend{margin:0 0 26px;padding:16px 20px 18px;background:#0a0a0a;border:1px solid rgba(242,237,227,.4);border-radius:3px;--bg:#0a0a0a;--fg:#fff}
.legend .lt{margin:0 0 12px;color:var(--gold);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.legend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.legend li{display:flex;gap:12px;align-items:center;font-size:.9rem;line-height:1.3}
.legend .gl{--s:22px;margin:0;box-shadow:none}.legend .gl.sug{box-shadow:0 0 0 2px var(--bg),0 0 0 3.6px var(--fg);margin:0 3px}
@media(max-width:640px){.legend ul{grid-template-columns:1fr}}
.sticky{position:sticky;bottom:0;z-index:4;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px var(--gutter);background:rgba(5,5,5,.95);border-top:1px solid var(--soft)}
.sticky .fp{font-size:.95rem}.sticky .fp b{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:12px;display:block}
@media(max-width:560px){.sticky{display:grid;grid-template-columns:1fr 1fr}.sticky .fp{grid-column:1/-1}.sticky .btn{width:100%;padding:12px 8px}.sticky .right{margin-left:0}}
/* masthead and plan boxes (final screen) */
.mast h1{font-size:clamp(2.8rem,6.4vw,4.6rem);line-height:.95}
.mast .meta{margin:12px 0 12px;color:var(--muted);font-size:.92rem}
.routekey{display:flex;gap:8px;margin:0 0 16px}.routekey i{width:20px;height:20px;border-radius:50%;background:var(--c);color:var(--ink);font:400 .8rem/20px var(--ea-font-display);font-style:normal;text-align:center}
.routekey i:nth-child(1){--c:var(--l1)}.routekey i:nth-child(2){--c:var(--l2)}.routekey i:nth-child(3){--c:var(--l3)}.routekey i:nth-child(4){--c:var(--l4)}.routekey i:nth-child(5){--c:var(--l5)}.routekey i:nth-child(6){--c:var(--l6)}.routekey i:nth-child(7){--c:var(--l7)}.routekey i:nth-child(8){--c:var(--l8)}.routekey i:nth-child(9){--c:var(--l9)}
.rule{height:4px;background:var(--gold);border:0;margin:0}
.fpbox{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;background:var(--gold);color:var(--ink);border:3px solid #fff;border-radius:8px;padding:20px 24px;margin:0 0 16px}
.fpbox h2{font:400 clamp(1.5rem,2.6vw,2rem)/1.05 var(--ea-font-display);text-transform:uppercase;margin:0 0 8px}
.fpbox p{margin:0 0 8px;font-size:1.02rem;font-weight:700}.fpbox p.why{font-style:italic;font-weight:400;border-top:1px solid rgba(0,0,0,.4);padding-top:8px;margin:8px 0 0}
.halo{width:52px;height:52px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 4px var(--ink);position:relative}
.halo::before{content:"";position:absolute;inset:11px;border-radius:50%;box-shadow:0 0 0 4px var(--ink);background:var(--gold)}.halo::after{content:"";position:absolute;inset:21px;border-radius:50%;background:var(--ink)}
.destbox{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;background:var(--panel);border:3px solid var(--paper);border-radius:8px;padding:20px 24px;margin:0 0 26px}
.destbox h2{font:400 clamp(1.4rem,2.4vw,1.8rem)/1.05 var(--ea-font-display);text-transform:uppercase;margin:0 0 8px}
.destbox p{margin:0 0 8px}.destbox .facts{border-top:1px solid var(--soft);padding-top:10px;font-size:.95rem}
.term{width:34px;height:34px;border-radius:7px;background:#fff;display:grid;place-items:center}.term::after{content:"";width:16px;height:16px;border-radius:2px;background:var(--gold)}
@media(max-width:560px){.fpbox,.destbox{grid-template-columns:1fr;padding:18px}}
/* download: idle, preparing, ready (a real tap opens it), failed (retry). Neutral, no red. */
.dl .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.dl .emailed{margin:14px 0 0;color:var(--paper);font-size:.95rem;display:flex;gap:10px;align-items:flex-start}
.dl .emailed svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--gold)}
.dl .status{margin:14px 0 0;padding:12px 14px;border:1px solid var(--soft);border-left:4px solid var(--gold);background:#0d0d0d;border-radius:0 3px 3px 0;font-size:.95rem;display:flex;gap:12px;align-items:flex-start}
.dl .status b{display:block}.dl .status svg{flex:none;width:22px;height:22px;color:var(--gold);margin-top:1px}
.dl .status:empty{display:none}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(252,204,10,.3);border-top-color:var(--gold);animation:spin 1s linear infinite;flex:none;margin-top:1px}
.btn .spin{width:18px;height:18px;border-color:rgba(5,5,5,.3);border-top-color:var(--ink);margin:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.spin{border-color:var(--gold) rgba(252,204,10,.3) rgba(252,204,10,.3) rgba(252,204,10,.3)}.btn .spin{border-color:var(--ink) rgba(5,5,5,.3) rgba(5,5,5,.3) rgba(5,5,5,.3)}}
/* stop dialog */
dialog{position:relative;background:var(--panel);color:var(--paper);border:1px solid var(--edge);border-radius:4px;padding:clamp(20px,2.8vw,32px);max-width:560px;width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;box-shadow:0 24px 64px rgba(0,0,0,.7)}
dialog::before{content:"";position:absolute;left:clamp(20px,2.8vw,32px);top:-4px;width:64px;height:7px;background:var(--gold);border-radius:1px}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog h2{font:400 1.7rem/1.05 var(--ea-font-display);text-transform:uppercase;margin:6px 96px 8px 0}dialog h2:focus,dialog h2:focus-visible{outline:none}.dclose{position:absolute;top:14px;right:14px}
.note{border-left:3px solid var(--gold);padding:8px 14px;background:rgba(255,255,255,.04);margin:12px 0}

.small a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
input::placeholder{color:#a8a8a8;opacity:1}
.hist .rowbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}