@font-face{font-family:"Neue Haas Text";src:url(assets/haas-regular.otf);font-weight:400}
@font-face{font-family:"Neue Haas Text";src:url(assets/haas-medium.otf);font-weight:600}
@font-face{font-family:"Austin News Deck";src:url(assets/austin.otf);font-weight:400}
:root{
  --ink:#101626;--raised:#151d31;--azure:#325fff;--azure-hover:#446cff;--teal:#00c7c5;--violet:#805cff;
  --text:#f8faff;--lead:#c3ccdc;--muted:#aeb8ca;--quiet:#8e9bb0;--line:rgba(209,221,255,.18);--row:rgba(209,221,255,.12);
  --icon:#8ea5ff;--eyebrow:#93abff;--warn:#f0cc8c;--warn-tint:rgba(233,193,123,.12);--warn-line:rgba(233,193,123,.34);
  --test:#ff8c1a;--test-ink:#140c00;--band:44px;
  --austin:"Austin News Deck",Georgia,serif;--sans:"Neue Haas Text",Arial,sans-serif;--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;overflow-x:clip;color:var(--text);font:400 1rem/1.42 var(--sans);font-synthesis:none;
  background:radial-gradient(circle at 79% 7%,rgba(50,95,255,.18),transparent 30rem),radial-gradient(circle at 5% 48%,rgba(50,95,255,.08),transparent 34rem),var(--ink);background-attachment:fixed;min-height:100vh}
a{color:inherit}
:focus-visible{outline:3px solid #9fb2ff;outline-offset:4px}
.shell{width:min(1320px,calc(100% - clamp(2.5rem,7vw,7.5rem)));margin:0 auto}
/* header: Yunus's floating pill */
header.top{position:sticky;top:18px;z-index:5;margin-top:18px;height:72px;display:flex;align-items:center;justify-content:space-between;padding-inline:20px;border-radius:999px;
  background:rgba(16,22,38,.72);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(2,6,16,.28),inset 0 1px rgba(255,255,255,.19);backdrop-filter:blur(28px) saturate(145%)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:clamp(94px,7.5vw,108px)}
.brand span{font-size:14px;color:rgba(255,255,255,.78);border-left:1px solid var(--line);padding-left:14px}
.who{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.78)}
#passkey-add .narrow{display:none}   /* doc 206: the passkey link's short name on a phone, where Keys gives way to it */
/* WHICH BACK OFFICE THIS IS (lane BO-ENVS, 6 October 2026). The header names it beside a dot: Production, teal. A TEST
   copy (backoffice.py TEST_BAND, served only where PRODUCTION_URL is set, so production's page holds none of it) also
   has an orange band at the top of every screen, the sign-in card included, that stays while the page scrolls, an
   orange frame round the whole window, and TEST in orange in the header. */
.env{display:inline-flex;align-items:center;gap:8px;font:600 .8rem/1 var(--sans);color:#fff}
.env::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.test-band{position:sticky;top:0;z-index:6;height:var(--band);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 clamp(.75rem,3vw,2rem);background:var(--test);color:var(--test-ink);font:600 .92rem/1.2 var(--sans)}
.test-band p{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.test-band b{font-weight:600;letter-spacing:.04em}
.test-band a{flex:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.test-band a:focus-visible{outline-color:var(--test-ink)}
.test-band::after{content:"";position:fixed;inset:0;border:6px solid var(--test);pointer-events:none;z-index:7}
.test-band ~ .shell header.top{top:calc(var(--band) + 18px)}
.test-band ~ .shell .env{color:var(--test)}
.test-band ~ .shell .env::before{background:var(--test)}
.layout{display:grid;grid-template-columns:230px 1fr;gap:1rem;margin:2rem auto 5rem}
nav.side{align-self:start;position:sticky;top:110px;padding:1rem;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),rgba(10,17,34,.62)}
nav.side a{display:flex;align-items:center;min-height:44px;padding:0 .8rem;border-radius:999px;text-decoration:none;font-size:14px;color:rgba(255,255,255,.78)}
nav.side a:hover{color:#fff;background:rgba(255,255,255,.04)}
nav.side a[aria-current=page]{color:#fff;background:rgba(50,95,255,.18)}
nav.side .grp{font:650 .65rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8a96ae;margin:1rem .8rem .5rem}
nav.side .grp:first-child{margin-top:.25rem}
main{min-width:0}
.eyebrow{font:500 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 .6rem}
h1{font:400 clamp(2.6rem,4.2vw,3.6rem)/.94 var(--austin);letter-spacing:-.025em;margin:0 0 .8rem}
h2{font:400 clamp(1.55rem,2.1vw,2.2rem)/.96 var(--austin);letter-spacing:-.012em;margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.48;color:var(--lead);max-width:40rem;margin:0 0 1.6rem}
.card{border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,2.8vw,2.5rem);
  background:radial-gradient(circle at 100% 0,rgba(50,95,255,.14),transparent 48%),linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),rgba(10,17,34,.62);
  box-shadow:0 24px 64px rgba(2,6,20,.2),inset 0 1px 0 rgba(255,255,255,.15);margin-bottom:1rem}
.card.warn{background:var(--warn-tint);border-color:var(--warn-line)}
.card.warn h2{color:var(--warn)}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}
.stat{padding:1.3rem 1.5rem}
.stat dt{font-size:.72rem;color:var(--quiet)}
.stat dd{margin:.4rem 0 0;font:400 clamp(1.75rem,2.35vw,2.5rem)/1.04 var(--austin);font-variant-numeric:tabular-nums}
/* A code in a tile (Order 360's Trading account, when Match-Trader's own status is shown) at the size of every other
   value, not the headline's: at 2.5rem ACTIVE_PARTICIPATING_IN_CHALLENGE broke into five lines mid-word. */
.stat dd.mono{font:400 .86rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;padding:0 .9rem;border:1px solid rgba(209,221,255,.2);border-radius:999px;background:rgba(255,255,255,.04);
  color:#fff;font:600 .78rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.btn[aria-pressed=true],.btn.primary{background:var(--azure);border-color:var(--azure)}
.btn.primary:hover{background:var(--azure-hover)}
.btn.primary.big{min-height:52px;padding:0 24px;font-size:1rem;box-shadow:0 12px 28px rgba(24,65,220,.2)}
.btn.danger{border-color:var(--warn-line);color:var(--warn)}
.search{flex:1 1 280px;display:flex;align-items:center;min-height:52px;padding:0 1.25rem;border:1px solid rgba(209,221,255,.24);border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.035)),rgba(8,14,30,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.search input{flex:1;border:0;background:transparent;color:#fff;font:400 1rem/1.2 var(--sans);outline:none}
.search input::placeholder{color:#99a5ba}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font:400 .72rem/1.3 var(--sans);color:var(--quiet);padding:0 .6rem .7rem;border-bottom:1px solid var(--row)}
td{padding:.85rem .6rem;border-bottom:1px solid var(--row);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover td{background:rgba(255,255,255,.03)}
.num{font-family:var(--austin);font-variant-numeric:tabular-nums;font-size:1.02rem}
.sub{display:block;color:var(--muted);font-size:.78rem}
/* status: dot plus label, never a capsule pill */
.st{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.st span{color:#eef2fb}
.st.paid{color:var(--teal)}.st.pending{color:#9fb2ff}.st.refunded{color:var(--violet)}.st.failed,.st.hold{color:var(--warn)}.st.cancelled,.st.off{color:#6f7b92}
.tag{font-size:.72rem;color:var(--warn)}
dl.kv{margin:0}
dl.kv div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--row)}
dl.kv div:first-child{border-top:0}
dl.kv dt{font-size:.72rem;color:var(--quiet)}
dl.kv dd{margin:0;font-size:.86rem;color:#eef2fb;text-align:right;min-width:0;overflow-wrap:anywhere}
dl.kv dd .st{white-space:normal;text-align:left}   /* a long status wraps inside its card (Order 360 at 390) */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--row);font-size:.86rem}
.timeline li:first-child{border-top:0}
.timeline time{color:var(--quiet);font-size:.78rem;font-variant-numeric:tabular-nums}
.note{font-size:.84rem;line-height:1.45;color:var(--muted)}
.back{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;font:600 .82rem/1 var(--sans);text-decoration:none;color:#fff;margin-bottom:.5rem}
.lev{display:grid;grid-template-columns:8rem repeat(6,1fr);font-size:.8rem}
.lev>div{padding:.6rem .5rem;border-bottom:1px solid var(--row)}
.lev .h{color:var(--quiet);font-size:.72rem}
.lev .c{color:var(--teal)}
.lev .c.off{color:#6f7b92}
dialog{max-width:520px;width:calc(100% - 2rem);color:var(--text);border:1px solid rgba(182,199,255,.3);border-radius:30px;padding:2rem;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),#121c33;box-shadow:0 34px 84px rgba(2,6,20,.5)}
dialog::backdrop{background:rgba(5,9,20,.7)}
dialog label{display:block;font-size:.72rem;color:var(--quiet);margin:1rem 0 .4rem}
dialog select,dialog input{width:100%;min-height:52px;padding:0 1rem;border-radius:999px;border:1px solid rgba(209,221,255,.24);background:rgba(8,14,30,.58);color:#fff;font:400 .95rem var(--sans)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.proto{font-size:.72rem;color:var(--quiet);text-align:center;padding:0 1rem 2rem}
@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  nav.side{position:static;display:flex;overflow-x:auto;gap:.3rem;padding:.5rem;border-radius:999px;scrollbar-width:none}
  nav.side .grp{display:none}
  nav.side a{flex:none}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .grid4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .shell{width:calc(100% - 1.5rem)}
  header.top{top:12px;margin-top:12px;height:64px;padding-inline:14px 9px}
  /* On a phone the band's words wrap rather than being cut, so it has no fixed height and scrolls away with the page;
     the orange frame and TEST in the header stay. */
  .test-band{position:static;height:auto;flex-wrap:wrap;gap:.3rem 1rem;padding:.6rem .9rem;font-size:.84rem}
  .test-band p{white-space:normal}
  .test-band ~ .shell header.top{top:12px}
  .brand span{display:none}   /* #1537's one-line header, from 760px down: the env name beside it is wider now */
  .who{gap:8px}
  .brand img{width:78px}
  .who .name{display:none}
  #keys-open,#passkey-add .wide{display:none !important}
  #passkey-add .narrow{display:inline}
  .who{gap:6px}
  .who .btn{padding:0 .6rem}
  .card{padding:1.3rem;border-radius:20px}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{padding:.8rem 0;border-bottom:1px solid var(--row)}
  td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.25rem 0;text-align:right;overflow-wrap:anywhere}
  td::before{content:attr(data-label);font:400 .72rem/1.35 var(--sans);color:var(--quiet);text-align:left;word-break:normal;overflow-wrap:normal}
  .lev{grid-template-columns:5.5rem repeat(6,1fr);font-size:.7rem}
}
@media (max-width:400px){.env::before{display:none}}   /* the word alone, so Sign out still fits at 360px */
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* ---- additions for the working build (same tokens as above) ---- */
[hidden]{display:none!important}
.field{display:block;margin:0 0 1rem}
.field span{display:block;font-size:.72rem;color:var(--quiet);margin-bottom:.4rem}
.field input,.field select{width:100%;min-height:52px;padding:0 1rem;border-radius:999px;border:1px solid rgba(209,221,255,.24);background:rgba(8,14,30,.58);color:#fff;font:400 .95rem var(--sans)}
.field input[aria-invalid=true]{border-color:var(--warn)}
.levrow{display:grid;grid-template-columns:6.5rem 1fr;gap:.6rem;align-items:center;padding:.4rem 0;border-top:1px solid var(--row)}
.levrow label{display:flex;align-items:center;gap:.5rem;font-size:.86rem}
.levrow input[type=text]{min-height:44px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(209,221,255,.24);background:rgba(8,14,30,.58);color:#fff;font:400 .8rem var(--sans);width:100%}
.check{display:flex;align-items:center;gap:.6rem;min-height:44px;font-size:.86rem}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--azure)}
.msg{font-size:.86rem;margin:.8rem 0 0;color:var(--teal)}
.msg.bad{color:var(--warn)}
.signin{max-width:560px;margin:4rem auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;word-break:break-all}
/* A phone has no room for a long Match-Trader code on one line (Order 360's stage, ACTIVE_PARTICIPATING_IN_CHALLENGE):
   inside a status it wraps rather than pushing the card, and every card beside it, past the screen's edge. The grid
   tracks above are minmax(0,1fr) on a phone for the same reason: no one value can make a column wider than the screen. */
.st .mono{white-space:normal}
.diff{font-size:.78rem;color:var(--muted)}
.diff b{color:#eef2fb;font-weight:600}
.mt{margin-top:1.5rem}
input.btn.wide{width:100%;justify-content:flex-start;text-align:left;font-weight:400}
input.btn.fee{width:7rem;font-weight:400}
h1.num{font:400 clamp(2.6rem,4.2vw,3.6rem)/.94 var(--austin)}
.preview-banner{margin:1.2rem 0 0;padding:.7rem 1rem;border:1px solid var(--warn-line);border-radius:14px;background:var(--warn-tint);color:var(--warn);font:600 .82rem/1.3 var(--sans)}
/* payouts: rows are not links, and a request stuck at New is marked */
table.payouts tbody tr{cursor:default}
table.payouts tr.stuck td{background:var(--warn-tint)}
td .tag{display:block;margin-top:.3rem}
.stat .tag{display:block;margin-top:.4rem}
table.payouts td.mono,table.payouts .btn{white-space:nowrap;word-break:normal}
/* today: a trading login never breaks across lines */
.mono.login{white-space:nowrap;word-break:normal}
/* needs a person (static/needs.js): who has an item, its next step, and rows that are not links */
table.needs tbody tr,table.plain tbody tr{cursor:default}
.who-has{color:var(--muted);font-size:.84rem;white-space:nowrap}
.who-has.none{color:var(--warn)}
.btn.small{min-height:36px;font-size:.74rem;padding:0 .8rem;white-space:nowrap}
.next{font-size:.84rem;line-height:1.45;color:var(--lead);max-width:26rem}
td.nw{white-space:nowrap}
@media (max-width:760px){.next{max-width:none;text-align:right}}
/* order 360 (static/order360.js): the journey on one line, two cards a row, and the facts for a reply */
.grid2.even{grid-template-columns:1fr 1fr}
.timeline.journey li{grid-template-columns:7rem 6.5rem 1fr}
.timeline.journey .kind{font:600 .68rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.stat .sub{margin-top:.5rem}
.facts{margin:0 0 1rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:16px;background:rgba(8,14,30,.4);font-size:.9rem;line-height:1.5}
@media (max-width:760px){.grid2.even{grid-template-columns:minmax(0,1fr)}.timeline.journey li{grid-template-columns:5.5rem 1fr;row-gap:.25rem}
  .timeline.journey time{grid-row:span 2}.timeline.journey .kind,.timeline.journey li>span:last-child{grid-column:2}}
/* doc 169 card 9: a Match-Trader code with no words breaks only at its underscores (order360.js code()), never mid-word */
.mono.code{word-break:normal;overflow-wrap:break-word}
/* doc 169 card 8, customer 360: a status row, one check per line with where the answer came from, and the section buttons */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;margin:0 0 1rem}
.row .st,td .st,ul.checklist .st{white-space:normal}
.st.ok{color:var(--teal)}.st.no{color:var(--warn)}.st.open{color:#9fb2ff}.st.out{color:#6f7b92}
ul.checklist{list-style:none;margin:0;padding:0}
ul.checklist li{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;padding:.72rem 0;border-top:1px solid var(--row);font-size:.88rem;align-items:baseline}
ul.checklist li:first-child{border-top:0;padding-top:.2rem}
ul.checklist .st{align-items:baseline}
ul.checklist .src{font-size:.74rem;color:var(--quiet);text-align:right;white-space:nowrap}
ul.checklist .sub{grid-column:1 / -1;margin-left:1.05rem}
.h3{font:600 .72rem/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--eyebrow);margin:1.6rem 0 .8rem}
@media (max-width:760px){ul.checklist .src{grid-column:1 / -1;text-align:left;margin-left:1.05rem}}
/* doc 169 (5 October 2026): Payouts to review */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mb0{margin-bottom:0}
/* doc 169 (5 October 2026): search everything, and the keys */
kbd{display:inline-flex;align-items:center;min-height:22px;padding:0 .4rem;border:1px solid rgba(209,221,255,.28);border-radius:6px;
  background:rgba(255,255,255,.05);color:#eef2fb;font:600 .66rem/1 var(--sans);letter-spacing:.04em;white-space:nowrap}
.btn kbd{min-height:20px}
tbody tr.kbd td{background:rgba(50,95,255,.16)}
tbody tr.kbd td:first-child{box-shadow:inset 3px 0 0 var(--azure)}
dialog.palette{max-width:720px;padding:0;overflow:hidden}
.palette .q{display:flex;align-items:center;gap:.8rem;margin:0;padding:.9rem 1.2rem;border-bottom:1px solid var(--row);font:inherit;color:inherit}
.palette .q input{flex:1;min-height:44px;border:0;border-radius:0;padding:0;background:transparent;color:#fff;font:400 1.1rem/1.2 var(--sans);outline:none}
.palette #pal-list{max-height:min(60vh,520px);overflow-y:auto;padding:.3rem 0 .6rem}
.palette .grp{margin:0;padding:.9rem 1.2rem .35rem;font:600 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8a96ae}
.palette .hit{display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.62rem 1.2rem;font-size:.9rem;color:#eef2fb;text-decoration:none}
.palette .hit[aria-selected=true]{background:rgba(50,95,255,.2);box-shadow:inset 3px 0 0 var(--azure)}
.palette .hit .kind{font:600 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.palette .hit .sub{margin-top:.15rem}
.palette .pad{padding:.9rem 1.2rem;margin:0}
.palette .foot{margin:0;padding:.8rem 1.2rem;border-top:1px solid var(--row);font-size:.76rem;color:var(--muted)}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem;margin:0 0 1rem}
.keys div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;border-top:1px solid var(--row);font-size:.86rem}
.keys .k{display:inline-flex;gap:.25rem;align-items:center}
dialog .keys + .note{margin-top:0}
@media (max-width:760px){
  .keys{grid-template-columns:1fr}
  dialog.palette{border-radius:20px}
  .palette .hit{grid-template-columns:minmax(0,1fr) auto;gap:.15rem .8rem}
  .palette .hit .kind{grid-column:1 / -1}
  .palette .foot{display:none}
  #keys-open,#search-open kbd{display:none}
}
/* doc 169 (5 October 2026): on call, from a phone, with few, big, thumb-sized controls; and the alarm cards */
.oncall{max-width:620px}
.oncall .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}
.oncall .tile{display:block;text-decoration:none;margin:0}
.oncall .tile dd{margin:.35rem 0 0;font:400 2rem/1 var(--austin)}
.oncall .tile dt{font-size:.74rem;color:var(--quiet)}
.oncall .btn{min-height:52px;font-size:.92rem}
.alarmcard{border-left:3px solid var(--warn)}
.alarmcard.calm{border-left-color:var(--teal)}
.alarmcard .eyebrow{margin-bottom:.4rem}
.alarmcard h2{margin-bottom:.6rem}
.alarmcard .st{white-space:normal;align-items:flex-start}
.alarmcard .st::before{margin-top:.42em}
.who-line{font-size:.84rem;color:var(--muted);margin:.6rem 0 0}
.who-line b{color:#eef2fb;font-weight:600}
.alarmcard .what{margin:.9rem 0 0;padding:.8rem 1rem;border:1px solid var(--line);border-radius:14px}
.alarmcard .what h3{margin:0 0 .35rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.alarmcard .what p{margin:0;font-size:.9rem;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
@media (max-width:760px){.oncall .tiles{grid-template-columns:1fr 1fr}}
/* doc 169 (5 October 2026): the refunds board, one column per step */
.lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}
.lane{border:1px solid var(--line);border-radius:20px;padding:1rem;background:rgba(10,17,34,.45);min-width:0}
.lane h2{display:flex;justify-content:space-between;gap:.5rem;font:600 .68rem/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 .4rem}
.lane h2 b{font:400 1.1rem/1 var(--austin);letter-spacing:0;color:#fff}
.lane .note{margin:0 0 .4rem;font-size:.76rem}
.item{display:block;border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem;margin-top:.55rem;font-size:.8rem;color:var(--muted);text-decoration:none;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.item b{display:block;font:400 1.02rem/1.15 var(--austin);color:#fff}
.item .amt{display:block;margin:.15rem 0 .35rem;font:600 .84rem/1.2 var(--sans);color:#eef2fb}
.item .st{display:flex;font-size:.76rem;margin-top:.35rem;white-space:normal}
@media (max-width:1180px){.lanes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.lanes{grid-template-columns:1fr}}
/* Lane BACKOFFICE-UX (6 October 2026): on a phone the header keeps to one line (the "Back office" word gives way, in
   the 760px block above since lane BO-ENVS made the env name wider, and no button breaks in two), and an empty list's
   sentence reads from the left rather than pushed to the right edge by the label column every other cell on a phone has. */
header.top .btn{white-space:nowrap}
@media (max-width:760px){td[colspan]{display:block;text-align:left}td[colspan]::before{content:none}}
/* Times in UK time or UTC (doc 196 item 6, lane BO-ROLES-CHECK, 6 October 2026): a pair of small buttons, the one in use filled
   (aria-pressed, as every pressed button here). app.js draws two pairs and this shows one: in the header before Search from 1360px
   up, and in a narrower window at the top of the menu (the first thing in its strip on a phone). The header has no room for it
   there: at 390px it has 6px to spare in practice (TEST, passkey link on), and with Production beside the passkey link Sign out is
   already past the edge, so neither two buttons nor one compact toggle fit (measured 6 October 2026). The new look keeps the
   header's pair in its account menu. On a phone, and in the menu's strip, the first label reads UK, as the passkey link reads Passkey. */
.zone{display:inline-flex;align-items:center;gap:4px}
.zone .narrow,nav.side > .zone{display:none}
nav.side .zone .wide{display:none}
nav.side .zone .narrow{display:inline}
nav.side > .zone::before,.ui2-memenu .zone::before{content:"Times in";content:"Times in" / "";margin-right:.4rem;white-space:nowrap;font:600 .72rem/1 var(--sans);color:var(--quiet)}
.ui2-memenu .extra > .zone:hover{background:transparent}   /* a row holding two buttons is not a button: the menu's row tint stays off it */
@media (max-width:1359px){header.top .who > .zone{display:none}nav.side > .zone{display:flex;align-items:center;padding:.3rem .8rem .6rem}}
@media (max-width:1000px){nav.side > .zone{flex:none;padding:0 .6rem 0 .4rem}}
@media (max-width:760px){.zone .wide{display:none}.zone .narrow{display:inline}}