/* Wall mode (wall.html only). Page tokens from style.css. Tile fills use the site's own colour code (green better, amber worse,
   blue no verdict, grey about the same), each nudged so white text passes 4.5:1 and the four stay apart for colour-blind viewers
   (all-pairs CVD dE 7.6 with a text label on every tile; normal-vision dE 15.6). One fill per label, as on every other page. */
:root{
  --bg:#f5f4f0;--card:#ffffff;--text:#15181c;--muted:#474e57;--border:#c9cdd3;--link:#0a55a6;--focus:#8a4b00;
  --chipbg:#ffffff;--chipon:#15181c;--chipontx:#ffffff;--ring:#15181c;--shade:rgba(21,24,28,.28);--edge:transparent;
  --none-bg:#eceef1;--none-bd:#7a838d;--none-tx:#15181c;--track:#dfe2e6;
  --good:#1f5f3b;--bad:#c45314;--move:#17397b;--flat:#6d767f;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#101318;--card:#181d24;--text:#eef0f3;--muted:#bec5cf;--border:#3a424d;--link:#8fc4ff;--focus:#ffcc66;
  --chipbg:#181d24;--chipon:#eef0f3;--chipontx:#101318;--ring:#ffffff;--shade:rgba(0,0,0,.55);--edge:rgba(255,255,255,.09);
  --none-bg:#1b2129;--none-bd:#6b7480;--none-tx:#dfe3e8;--track:#2b323b;}
@media (prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;
  --bg:#101318;--card:#181d24;--text:#eef0f3;--muted:#bec5cf;--border:#3a424d;--link:#8fc4ff;--focus:#ffcc66;
  --chipbg:#181d24;--chipon:#eef0f3;--chipontx:#101318;--ring:#ffffff;--shade:rgba(0,0,0,.55);--edge:rgba(255,255,255,.09);
  --none-bg:#1b2129;--none-bd:#6b7480;--none-tx:#dfe3e8;--track:#2b323b;}}

*{box-sizing:border-box}
html{font-size:clamp(16px,1.1vw,42px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.35 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden;transition:background-color .4s var(--ease),color .4s var(--ease)}
p,h1,h2,h3{margin:0}
a{color:var(--link);text-underline-offset:.15em}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- layout: one screen at 900 px and up. Row 1 the header, row 2 the controls, then the map and the rail, then the ticker ---- */
.app{display:grid;grid-template-columns:minmax(0,1fr) clamp(17rem,24vw,26rem);grid-template-rows:auto auto minmax(0,1fr) 2.5rem;
  grid-template-areas:"head head" "ctrl ctrl" "map rail" "tick tick";height:100vh;height:100dvh;column-gap:1rem;
  padding:.8rem max(1.1rem,env(safe-area-inset-right)) 0 max(1.1rem,env(safe-area-inset-left));transition:transform .6s ease}
body.wall{overflow:hidden}
.w-head{grid-area:head;display:flex;align-items:center;gap:1.4rem;min-width:0;padding-bottom:.5rem}
.w-brand{flex:none;padding-right:1.4rem;border-right:1px solid var(--border)}
.w-title{flex:1 1 auto;min-width:0;max-width:100%}
.w-clock{flex:none;text-align:right}
.w-mark{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.w-mark a{color:var(--text);text-decoration:none}
.w-sub{font-size:max(16px,.8rem);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:.15rem}
.w-title h1{font-size:1.45rem;line-height:1.15;font-weight:800;white-space:normal;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;hyphens:manual;overflow-wrap:normal}
.w-status{color:var(--muted);font-size:1rem;margin-top:.1rem}
.w-vbar{height:3px;width:min(18rem,100%);margin-top:.4rem;background:var(--track);border-radius:3px;overflow:hidden}
.w-vbar i{display:block;height:100%;width:0;background:var(--text);opacity:.55;border-radius:3px;transition:width .25s linear}
.w-vbar.off{visibility:hidden}
.w-time{font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.w-date{color:var(--muted);font-size:1rem;margin-top:.25rem;white-space:nowrap}

/* controls: views on the left, buttons and the way back on the right */
.w-ctrl{grid-area:ctrl;display:flex;align-items:center;gap:.4rem 1rem;margin-bottom:.6rem;min-width:0;flex-wrap:wrap}
.w-chips,.w-btns{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.w-btns{margin-left:auto;flex-wrap:nowrap}
.chip,.btn{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;min-width:44px;padding:0 .8rem;border-radius:2rem;border:1px solid var(--border);
  background:var(--chipbg);color:var(--text);font-size:max(16px,.95rem);font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.chip:hover,.btn:hover{border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--chipon);color:var(--chipontx);border-color:var(--chipon)}
.chip .n{font-weight:500;opacity:.78;font-variant-numeric:tabular-nums}
.chip.cur{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.btn{border-radius:.6rem;padding:0 .7rem}
.btn .bl{color:var(--muted);font-weight:500}
.btn .ico{font-size:1rem;line-height:1;display:inline-block;min-width:1em;text-align:center}
.tico{width:1rem;height:1rem;border-radius:50%;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.w-sep{width:1px;height:1.6rem;background:var(--border);margin:0 .3rem;flex:none}
.w-exit{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .4rem;font-size:max(16px,.95rem);font-weight:600;color:var(--link);text-decoration:none;white-space:nowrap;flex:none}
.w-exit:hover{text-decoration:underline}
/* 1,400 px and up (TVs, desktops): the buttons and the way back sit in the header row, the views get their own row */
@media (min-width:1400px){
  .app{grid-template-columns:auto minmax(0,1fr) auto clamp(17rem,22vw,25rem);
    grid-template-areas:"brand title btns clock" "chips chips chips chips" "map map map rail" "tick tick tick tick"}
  .w-head,.w-ctrl{display:contents}
  .w-brand{grid-area:brand;align-self:center;margin-bottom:.55rem}
  .w-title{grid-area:title;align-self:center;margin-bottom:.55rem}
  .w-clock{grid-area:clock;align-self:center;margin-bottom:.55rem}
  .w-btns{grid-area:btns;align-self:center;margin:0 0 .55rem;justify-self:end}
  .w-chips{grid-area:chips;margin-bottom:.6rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0}
  .w-chips::-webkit-scrollbar{display:none}
}

/* ---- heat map ---- */
.w-map{grid-area:map;position:relative;min-height:0;min-width:0;margin:0 0 .9rem}
.w-mapin{position:absolute;inset:0}
.w-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:1.2rem;text-align:center;padding:1rem}
.w-empty[hidden]{display:none}
.tl,.thl{position:absolute;transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease),opacity .5s var(--ease),box-shadow .4s var(--ease)}
.thl{font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%;padding-right:.3rem;line-height:1.5rem;height:1.5rem;pointer-events:none;hyphens:manual}
.tl{border:0;margin:0;padding:.45rem .5rem;border-radius:.3rem;overflow:hidden;text-align:left;cursor:pointer;color:#fff;background:var(--fill,var(--flat));
  box-shadow:inset 0 0 0 1px var(--edge);display:flex;flex-direction:column;justify-content:flex-start;gap:.12rem;line-height:1.18}
.tl.b-none{background:var(--none-bg);color:var(--none-tx);border:2px dashed var(--none-bd);padding:calc(.45rem - 2px) calc(.5rem - 2px);box-shadow:none}
.tl .nm{font-size:var(--tf,1rem);font-weight:700;max-width:100%;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
.tl .vl{font-weight:800;letter-spacing:-.02em;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl .mt{font-size:var(--tf,1rem);max-width:100%;opacity:.94;font-variant-numeric:tabular-nums}
/* what a tile shows, set by the size check in wall.js: s4 everything, s3 no label word, s2 name and value, s1 value only, s0 colour only.
   Nothing is ever cut with an ellipsis; the spotlight and the ticker carry every field. */
.tl.s3 .mt .ml,.tl.s3 .mt .sep{display:none}
.tl.s0 .mt,.tl.s1 .mt,.tl.s2 .mt{display:none}
.tl.s0 .nm,.tl.s0 .vl,.tl.s1 .nm,.tl.s1 .vl{display:block}
.tl.leaving{opacity:0;pointer-events:none;transition-delay:0s !important}
.tl.entering,.thl.entering{opacity:0}
.tl:hover{filter:brightness(1.1)}
.tl.spot{z-index:3;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--ring),0 .7rem 1.8rem var(--shade)}
.tl:focus-visible{outline:3px solid var(--focus);outline-offset:.45rem;z-index:4}
/* a figure that changed in the last 24 hours: a quiet dot, and one brighten-and-roll when the change arrives */
.tl .dot{position:absolute;top:.4rem;right:.4rem;width:.6rem;height:.6rem;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.tl.b-none .dot{background:var(--text)}
.tl.upd{animation:upd 1.4s var(--ease) 1}
.tl.upd .vl{animation:roll .7s var(--ease) 1}
@keyframes upd{0%{filter:brightness(1.45)}100%{filter:brightness(1)}}
@keyframes roll{0%{transform:translateY(.55em);opacity:0}100%{transform:none;opacity:1}}

/* ---- rail ---- */
.w-rail{grid-area:rail;display:flex;flex-direction:column;gap:.6rem;min-height:0;overflow:hidden auto;scrollbar-width:none;padding-bottom:.9rem}
.w-rail::-webkit-scrollbar{display:none}
.card{background:var(--card);border:1px solid var(--border);border-radius:.7rem;padding:.85rem 1rem}
.w-rail .spot{flex:0 0 auto}
.spot{display:flex;flex-direction:column}
.spot.swap{animation:swap .45s var(--ease) 1}
.spot .go{margin-top:auto;flex:none}
.spot .bar{flex:none;margin-top:.35rem}
.spot dd.src{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
@keyframes swap{0%{opacity:0;transform:translateY(.35rem)}100%{opacity:1;transform:none}}
.kick{display:flex;justify-content:space-between;gap:.6rem;font-size:max(16px,.8rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kick span{min-width:0}
.kick span:last-child{text-align:right}
.spot h2{font-size:1.2rem;line-height:1.2;margin:.35rem 0 .1rem;font-weight:700}
.spot .big{font-size:2.8rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.spot .cap{color:var(--muted);font-size:max(16px,.92rem);line-height:1.3}
.pill{display:inline-flex;align-items:center;min-height:2rem;padding:.15rem .75rem;border-radius:2rem;color:#fff;font-weight:700;font-size:1rem;margin:.5rem 0 .2rem;background:var(--fill,var(--flat))}
.pill.b-none{background:var(--none-bg);color:var(--none-tx);border:2px dashed var(--none-bd)}
.spot .chg{font-size:1rem;margin:.15rem 0}
.spot .chg b{font-variant-numeric:tabular-nums}
.spot dl{margin:.4rem 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.05rem .6rem;font-size:max(16px,.9rem);line-height:1.3}
.spot dt{color:var(--muted)}
.spot dd{margin:0}
.spot .go{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.bar{height:.3rem;background:var(--track);border-radius:1rem;overflow:hidden;margin-top:.2rem}
.bar i{display:block;height:100%;width:0;background:var(--text);border-radius:1rem}
.count h2,.term h2{font-size:1rem;font-weight:700}
.stack{display:flex;height:.8rem;border-radius:1rem;overflow:hidden;margin:.5rem 0 .45rem;background:var(--track);gap:2px}
.stack i{display:block;height:100%;background:var(--fill);transition:width .6s var(--ease)}
.stack i.b-none{background:var(--none-bd)}
.leg{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.leg li{display:grid;grid-template-columns:1rem minmax(0,1fr) auto;gap:.55rem;align-items:center;font-size:max(16px,.95rem)}
.leg b{font-variant-numeric:tabular-nums}
.sw{display:inline-block;width:1rem;height:1rem;border-radius:.2rem;background:var(--fill,var(--flat))}
.sw.b-none{background:var(--none-bg);border:2px dashed var(--none-bd)}
.b-good{--fill:var(--good)}.b-bad{--fill:var(--bad)}.b-move{--fill:var(--move)}.b-flat{--fill:var(--flat)}
.term p{font-size:1rem;margin:.2rem 0}
.term .bar{height:.45rem;margin:.4rem 0}
.term .bar i{background:var(--text);opacity:.7}
.notes{color:var(--muted);font-size:max(16px,.9rem);padding:0 .2rem}
.notes p+p{margin-top:.25rem}
.notes a{display:inline-flex;align-items:center;min-height:44px}
.small{font-size:max(16px,.9rem);color:var(--muted);margin-top:.35rem}
.w-rail.c1 .notes{display:none}
.w-rail.c2 .spot .big{font-size:2.6rem}
.w-rail.c2 .spot h2{font-size:1.2rem}
.w-rail.c2 .spot dl{gap:0 .6rem}
.w-rail.c3 .stack{margin:.3rem 0}
.w-rail.c3 .card{padding:.6rem .8rem}
.w-rail.c4 .spot .chg{margin:0}
.w-rail.c4 .term p{margin:.1rem 0}
.w-rail.c5 .spot .upd{display:none}
.w-rail.c6 .spot .five{display:none}
.w-rail.c7 .term{display:none}
.w-rail.c7 .spot .big{font-size:2.1rem}
.w-rail.c7 .spot h2{font-size:1.1rem}

/* ---- ticker ---- */
.w-tick{grid-area:tick;overflow:hidden;border-top:1px solid var(--border);margin:0 calc(-1 * max(1.1rem,env(safe-area-inset-left)));background:var(--card);display:flex;align-items:center}
.w-tickin{display:flex;width:max-content;animation:tick var(--dur,300s) linear infinite;will-change:transform}
.w-tickin .tset{display:flex}
.ti{display:inline-flex;align-items:center;gap:.45rem;padding:0 1.6rem 0 0;white-space:nowrap;font-size:1rem;line-height:2.5rem}
.ti b{font-weight:700}
.ti .tv{font-weight:800;font-variant-numeric:tabular-nums}
.ti .tm{color:var(--muted)}
.ti .sw{width:.8rem;height:.8rem}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.paused .w-tickin{animation-play-state:paused}

/* ---- toast ---- */
.w-toast{position:fixed;left:50%;bottom:3.5rem;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:.7rem 1.1rem;border-radius:.6rem;font-size:1rem;font-weight:600;z-index:20;max-width:calc(100vw - 2rem);box-shadow:0 .4rem 1.2rem var(--shade)}
.w-toast[hidden]{display:none}

/* ---- full screen: the header stays clean; the controls become a dock above the ticker, shown on any input and hidden when idle ---- */
.fs .app{grid-template-rows:auto minmax(0,1fr) 2.5rem;grid-template-areas:"head head" "map rail" "tick tick";padding-top:1.1rem}
.fs .w-head{padding-bottom:.9rem}
.fs .w-ctrl{position:fixed;z-index:10;left:max(1.1rem,env(safe-area-inset-left));right:max(1.1rem,env(safe-area-inset-right));bottom:calc(2.5rem + .7rem);margin:0;
  flex-wrap:nowrap;background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:.45rem .6rem;box-shadow:0 .6rem 2rem var(--shade);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.fs .w-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.fs .w-chips::-webkit-scrollbar{display:none}
.fs.idle .w-ctrl{opacity:0;transform:translateY(.6rem);pointer-events:none}
.fs.idle,.fs.idle *{cursor:none !important}

/* full screen at 1,400 px and up: the header row has no buttons; they live in the dock with the views */
@media (min-width:1400px){
  .fs .app{grid-template-areas:"brand title title clock" "map map map rail" "tick tick tick tick"}
  .fs .w-ctrl{display:flex}
  .fs .w-brand,.fs .w-title,.fs .w-clock{margin-bottom:.9rem}
  .fs .w-chips,.fs .w-btns{margin:0;padding:0}
}

/* ---- narrow screens ---- */
@media (max-width:899.98px){
  body.wall{overflow-y:auto}
  .app{display:block;height:auto;padding-top:.5rem}
  .w-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand clock" "title title";align-items:start;gap:.5rem 1rem;padding-bottom:.5rem}
  .w-brand{grid-area:brand;border-right:0;padding-right:0}.w-title{grid-area:title}.w-clock{grid-area:clock}
  .w-mark{font-size:1.3rem}
  .w-time{font-size:1.45rem}
  .w-title h1{font-size:1.3rem;white-space:normal}
  .w-status{white-space:normal}
  .w-ctrl{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -1.1rem;padding:.1rem 1.1rem .6rem}
  .w-ctrl::-webkit-scrollbar{display:none}
  .w-chips,.w-btns{flex-wrap:nowrap;flex-shrink:0}
  .w-btns{margin-left:0}
  .w-map{height:clamp(300px,min(calc(1.3 * (100vw - 2rem)),92svh),640px)}
  .w-rail{overflow:visible;margin-top:.2rem;padding-bottom:1rem}
  .w-tick{position:sticky;bottom:0;height:2.5rem;z-index:5;margin:0 -1.1rem}
  .fs .w-ctrl{position:static;transform:none;box-shadow:none;border:0;background:none;border-radius:0;padding:.1rem 1.1rem .6rem}
}
@media (min-width:600px) and (max-width:899.98px){
  .w-rail{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .w-rail .spot{grid-row:span 3}
}

/* Brief v5 Z5: Wall mode is made for large screens; small screens get a pointer to the home page above the tiles */
.w-small{display:none;margin:.5rem 0;padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:.75rem;font-size:1rem;color:var(--text)}
.w-small a{font-weight:700;color:var(--link);display:inline-flex;align-items:center;min-height:44px}
@media (max-width:699.98px){.w-small{display:block}}

/* ---- reduced motion: no tile moves, no fades, no roll, a ticker the viewer scrolls ---- */
@media (prefers-reduced-motion:reduce){
  .tl,.thl,.app,.w-ctrl,.stack i,.w-vbar i,body{transition:none !important}
  .tl.upd,.tl.upd .vl,.spot.swap{animation:none}
  .w-tick{overflow-x:auto}
  .w-tickin{animation:none;transform:none}
}
.rm .tl,.rm .thl{transition:none !important}
.rm .tl.upd,.rm .tl.upd .vl,.rm .spot.swap{animation:none}
.rm .w-tick{overflow-x:auto}
.rm .w-tickin{animation:none}