/* NBF Overview - "The Morning Glance".
   ------------------------------------------------------------------------
   The overview page loads THIS sheet instead of style.css. The two share no
   selectors on purpose: style.css dresses the other five pages (cards on a
   gray field, blue accents) and any token or table rule redefined here would
   restyle them. Tokens, chip seating and motion are ported from the landing
   app (templates/_styles.html + _letter.html) so the report and zeedaily.com
   read as one house.

   Colour law: green appears only on at-or-ahead-of-pace marks and the
   freshness dot; red only on cancellations, behind-pace rows and the
   year-over-year deficit. Every green or red mark carries a glyph or a
   texture (triangle, strike, dotted-vs-solid, tick) so hue is never the only
   encoding.
   ------------------------------------------------------------------------ */

/* ============ @font-face (self-hosted) ============
   The three subset files Google's css2 endpoint serves for
   Familjen+Grotesk:wght@400..700 (v11), pinned into static/fonts/ so the
   hero figure never waits on two third-party origins or reflows on swap for
   a cold cache. Variable weight 400-700, normal style only - the italic
   surfaces (.oneline-t, .dl-line) synthesise, exactly as they did from
   Google. unicode-range kept verbatim: a page fetches only the subsets its
   text touches, latin in practice. */
@font-face{
  font-family:"Familjen Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/familjen-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Familjen Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/familjen-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Familjen Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/familjen-grotesk-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* ============ tokens (landing _styles.html) ============ */
:root{
  /* --gray is a MARK colour, never a text colour: #B4B4B4 is 2.07:1 on white
     and fails WCAG AA at any size. Everything readable uses --ink-soft
     (#5F5F5F, 6.39:1) or darker. --gray survives only on hairline underlines,
     checkbox borders, the dotted last-year swatch and the pace tick. */
  --paper:#ffffff; --ink:#0A0A0A; --ink-soft:#5F5F5F; --gray:#B4B4B4; --rule:#E8E8E8;
  --up:#067647; --up-bg:#E4F5EC; --down:#B3261E; --down-bg:#FBE9E8;
  --chip-ink:#111; --chip-up:#0E7A4A; --chip-down:#B3261E; --chip-edge:#E4E4E4;
  --grotesk:"Familjen Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--grotesk);line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-synthesis-weight:none;overflow-x:clip}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
a{color:inherit}
/* One gutter for every section. 22px floor on phones: at 390px the old 4vw
   worked out to 15.6px and read as scrunched against the bezel. */
.wrap{max-width:1180px;margin:0 auto;
  padding-left:clamp(1.375rem,4vw,3rem);padding-right:clamp(1.375rem,4vw,3rem)}
.kicker{font-size:.8125rem;font-weight:500;letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.num,.fig,.sub,.gfig,td,.ax{font-variant-numeric:tabular-nums}

/* ============ topbar (glass chrome) ============ */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;gap:1.5rem;min-height:56px}
.wordmark{font-weight:600;letter-spacing:-.035em;font-size:1.0625rem;text-decoration:none;white-space:nowrap}
.tabs{display:flex;gap:1.15rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{text-decoration:none;font-size:.9375rem;color:var(--ink-soft);padding:1rem 0;
  white-space:nowrap;transition:color .2s var(--ease)}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
/* The admin tab is de-emphasised by being last and unweighted, not by being
   too pale to read: --gray is 2.07:1 on white and fails AA as TEXT. */
.tabs a.admin{color:var(--ink-soft)}
.toggle{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;
  color:var(--ink-soft);text-decoration:none;padding:.42rem .85rem;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--rule);white-space:nowrap;
  transition:transform .2s var(--ease),color .2s var(--ease)}
.toggle:hover{transform:translateY(-1px);color:var(--ink)}
.toggle .box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--gray);
  position:relative;flex:none;background:#fff}
.toggle.on .box{background:var(--ink);border-color:var(--ink)}
.toggle.on .box::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ============ dateline ============ */
.dateline{margin-top:1.5rem}
.dateline-in{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:.6rem 0}
.dl-left{font-weight:600;font-size:.9375rem;letter-spacing:-.01em;white-space:nowrap;
  text-transform:none;color:var(--ink)}
.dl-center{color:var(--ink-soft)}
.dl-right{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--up);flex:none}
.dl-right b{font-weight:600;color:var(--ink)}

/* ---- month navigator (plain links, lives in the dateline row) ---- */
.dl-nav{display:inline-flex;align-items:baseline;gap:.7rem;white-space:nowrap}
.mnav-m{font-weight:600;color:var(--ink);letter-spacing:.045em}
.mnav-a{text-decoration:none;color:var(--ink-soft);
  transition:color .2s var(--ease)}
.mnav-a:hover{color:var(--ink)}
/* An arrow past the range bound is furniture, not a control: it keeps the
   navigator's width so nothing jumps, but it is pale and aria-hidden. */
.mnav-a.off{color:var(--gray);cursor:default}
.mview{color:var(--ink);font-weight:600}
.mback{color:var(--ink-soft);text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--gray);
  transition:color .2s var(--ease),box-shadow .2s var(--ease)}
.mback:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
/* The quiet tag month-scoped panels wear when the view is off today. */
.mtag{display:inline-block;margin-left:.6rem;padding:.13em .6em .17em;
  border-radius:999px;font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--rule);vertical-align:.1em;white-space:nowrap}

/* ============ lede ============ */
/* Vertical only. A `padding` shorthand here would zero out .wrap's gutters -
   same specificity, declared later - and run the headline into the bezel. */
.lede{padding-top:clamp(2.1rem,4.5vw,3.6rem);padding-bottom:.4rem}

/* Coloured numerals are the lede's grammar, not chips. Direction is carried
   twice (hue AND a triangle) and NOTHING is ever drawn across a figure: in a
   report the number is the data, so a strikethrough would destroy it. */
.n{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.n .g{font-size:.8em;margin-right:.16em}
.n-up{color:var(--chip-up)}
.n-dn{color:var(--chip-down)}
.n-flat{color:var(--ink)}

/* ---- variant A: sentence-led ---- */
.lede h1{font-size:clamp(2rem,4.6vw,3.9rem);font-weight:500;line-height:1.1;
  letter-spacing:-.036em;max-width:27ch;text-wrap:balance}
.lede h1 b{font-weight:600}

/* ---- variant B: number-led. The figure is the hero and the rest of the
        sentence finishes underneath it, so the eye lands on the money first. */
.lede h1.hero{max-width:none;letter-spacing:-.045em;line-height:1}
.hero-fig{display:block;font-size:clamp(3.4rem,10.5vw,8.25rem);font-weight:600;
  line-height:.92;font-variant-numeric:tabular-nums}
.hero-tail{display:block;margin-top:.3rem;font-size:clamp(1.3rem,3vw,2.4rem);
  font-weight:500;line-height:1.14;letter-spacing:-.03em;color:var(--ink-soft)}
.attain{margin-top:clamp(1.1rem,2vw,1.5rem)}
.attain-pct{font-size:clamp(1.85rem,4.1vw,3rem);font-weight:600;line-height:1.08;
  letter-spacing:-.032em}
/* Thin progress rule: 0 to 100% of goal. The full scale to 140% lives in the
   goal panel below; up here the number itself carries any overshoot. */
.prog{position:relative;height:6px;border-radius:3px;background:var(--rule);
  max-width:min(100%,30rem);margin-top:.7rem;overflow:hidden}
.prog-fill{position:absolute;top:0;bottom:0;left:0;border-radius:3px;
  background:var(--chip-down);transform-origin:left center}
.prog.up .prog-fill{background:var(--chip-up)}
.prog.flat .prog-fill{background:var(--ink-soft)}
.attain-word{margin-top:.55rem;font-size:clamp(1.0625rem,1.9vw,1.35rem);font-weight:500;
  letter-spacing:-.02em;color:var(--ink-soft)}

/* ---- deck: one idea per sentence, one sentence per paragraph ---- */
.deck{margin-top:1.05rem;font-size:clamp(1.0625rem,2vw,1.45rem);font-weight:400;
  line-height:1.38;letter-spacing:-.02em;color:var(--ink-soft);max-width:47ch;
  text-wrap:pretty}
.deck+.deck{margin-top:.35rem}
.deck strong{color:var(--ink);font-weight:600}

/* ---- the exact dollars, then the method behind a quiet disclosure ----
   Both sit at #5F5F5F on white (6.4:1), not the old #B4B4B4 (2.1:1). */
.exact{margin-top:1.2rem;font-size:.875rem;color:var(--ink-soft);line-height:1.65;
  font-variant-numeric:tabular-nums}
.exact b{font-weight:600;color:var(--ink)}
.exact .sep{padding:0 .1em}
.how{margin-top:.5rem;font-size:.8125rem;color:var(--ink-soft)}
.how>summary{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;
  cursor:pointer;list-style:none;box-shadow:inset 0 -1px 0 var(--rule);
  transition:color .2s var(--ease),box-shadow .2s var(--ease)}
.how>summary::-webkit-details-marker{display:none}
.how>summary::before{content:"";flex:none;width:.46em;height:.46em;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-.1em) rotate(-45deg);transition:transform .2s var(--ease)}
.how[open]>summary::before{transform:translateY(-.14em) rotate(45deg)}
.how>summary:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.how ul{margin-top:.55rem;padding-left:1.1rem;line-height:1.62;max-width:66ch}
.how li{margin-top:.18rem}

/* ============ the day in one line ============
   One written sentence, sitting between the lede and the figures. It is set
   in ink italic a step above body copy: quiet enough to read as an aside,
   large enough to be read first. A hairline above separates it from the lede
   without turning it into a banner. Ink on paper is 19.3:1, well past AA. */
.oneline{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.oneline-t{margin-top:.5rem;font-size:clamp(1.125rem,2.1vw,1.5rem);
  font-style:italic;font-weight:400;line-height:1.36;letter-spacing:-.018em;
  color:var(--ink);max-width:44ch;text-wrap:balance;
  font-variant-numeric:tabular-nums}

/* ============ the figures rail ============ */
.rail{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:1.6rem}
.rail-in{display:grid;grid-template-columns:repeat(4,1fr)}
.slot{display:block;text-decoration:none;padding:1rem 1.5rem 1.15rem;border-left:1px solid var(--rule);
  min-width:0;transition:background .2s var(--ease)}
.slot:first-child{border-left:0;padding-left:0}
.slot:hover{background:#FAFAF9}
.slot .fig{font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:600;letter-spacing:-.03em;
  margin-top:.28rem;line-height:1.1}
.slot .fig.down{color:var(--down)}
.slot .sub{font-size:.8125rem;color:var(--ink-soft);margin-top:.3rem}
.slot .sub .u{box-shadow:inset 0 -1px 0 var(--gray)}
.slot:hover .sub .u{box-shadow:inset 0 -1px 0 var(--ink)}
.upword{color:var(--up);font-weight:600}
.downword{color:var(--down);font-weight:600}
.flatword{color:var(--ink-soft);font-weight:600}

/* ============ section furniture ============ */
section.mod{margin-top:clamp(2.2rem,4vw,3.2rem)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding-bottom:.5rem}
.sec-head .qual{font-size:.8125rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sec-head .qual.pad{margin-left:.7rem}
.more{font-size:.8125rem;color:var(--ink-soft);text-decoration:none;box-shadow:inset 0 -1px 0 var(--gray);
  transition:box-shadow .2s var(--ease),color .2s var(--ease)}
.more:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.cap{font-size:.8125rem;color:var(--ink-soft);margin-top:.8rem;line-height:1.55;max-width:62ch}
.cap .tickdemo{display:inline-block;width:2px;height:.8em;vertical-align:-.1em;margin:0 .2em}
.empty{color:var(--ink-soft);font-size:.9375rem;padding:1rem 0}
.notice{margin-top:1rem;background:#FFF8E6;border:1px solid #F3E2B3;border-radius:8px;
  padding:.8rem .95rem;font-size:.8125rem;color:#6B5200;line-height:1.55}
.notice code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;word-break:break-all}

/* ============ booking curve ============ */
.legend{display:flex;gap:1.4rem;align-items:center;font-size:.875rem;color:var(--ink-soft);
  flex-wrap:wrap;font-variant-numeric:tabular-nums}
.legend b{color:var(--ink);font-weight:600}
.sw{display:inline-block;width:22px;border-top:2.5px solid var(--ink);vertical-align:middle;margin-right:.45rem}
.sw.ly{border-top:2px dotted var(--gray)}
.yoy{color:var(--down);font-weight:600}
.yoy.up{color:var(--up)}
/* pan-y: a vertical drag still scrolls the page, a horizontal one reads the
   curve. Without it the browser claims the gesture and the crosshair is
   unusable on a phone. */
.chart-stage{position:relative;height:380px;margin-top:1rem;touch-action:pan-y}
.chart-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.chart-stage svg.curve-phone{display:none}
.ax{font-size:11px;fill:var(--ink-soft)}
.endlab{font-size:12.5px;font-weight:600}
/* #7A7A7A was 4.29:1 at 12.5px. The last-year label is secondary by weight and
   position, not by hue, so it goes to the same --ink-soft as every other caption. */
.endlab.ink{fill:var(--ink)} .endlab.gray{fill:var(--ink-soft)} .endlab.down{fill:var(--down)}
.endlab.upl{fill:var(--up)}
/* Crosshair, read-out dot and tooltip. All three start hidden and are placed
   with no transition, so reduced-motion needs no special case. */
.xh{position:absolute;top:16px;height:336px;width:1px;background:var(--ink);
  opacity:0;pointer-events:none}
.xdot{position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 2px #fff;opacity:0;pointer-events:none}
.tip{position:absolute;top:22px;pointer-events:none;opacity:0;background:#fff;
  border:1px solid var(--rule);border-radius:6px;padding:.45rem .6rem;font-size:.78rem;
  line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(17,17,17,.05),0 4px 10px rgba(17,17,17,.07)}
.tip b{font-weight:600}
.tip .lyv{color:var(--ink-soft)}
.tip .gap{color:var(--down);font-weight:600}
.tip .gap.up{color:var(--up)}

/* ============ two-panel bands ============ */
.band{display:grid;grid-template-columns:1.15fr 1fr}
.band .panel{min-width:0;border-left:1px solid var(--rule);padding-left:2.4rem}
.band .panel:first-child{border-left:0;padding-left:0;padding-right:2.4rem}

/* ============ goal bullets ============ */
.goal-list{margin-top:.4rem}
.goal-row{display:grid;grid-template-areas:"loc bullet fig pill";
  grid-template-columns:52px 1fr auto 90px;gap:1rem;align-items:center;
  padding:.62rem 0;border-bottom:1px solid var(--rule)}
.goal-row.total{border-bottom:0;border-top:1px solid var(--ink);margin-top:-1px}
.goal-row.total .loc{font-weight:700}
.loc{grid-area:loc;font-weight:600;font-size:.9375rem;text-decoration:none;justify-self:start;
  min-width:0;box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .2s var(--ease)}
a.loc:hover{box-shadow:inset 0 -1px 0 var(--ink)}
.bullet{grid-area:bullet;position:relative;height:18px;min-width:0}
.bullet .track{position:absolute;left:0;right:0;top:6px;height:6px;background:#F2F2F1;border-radius:3px}
.bullet .fill{position:absolute;left:0;top:6px;height:6px;border-radius:3px;
  background:var(--ink-soft);transform-origin:left center}
.bullet .fill.up{background:var(--up)} .bullet .fill.dn{background:var(--down)}
.bullet .tick{position:absolute;top:1px;width:2px;height:16px;background:var(--ink);border-radius:1px}
.bullet .tick.pace{top:3px;height:12px;background:var(--gray)}
.gfig{grid-area:fig;font-size:.8125rem;color:var(--ink-soft);white-space:nowrap}
.gfig b{color:var(--ink);font-weight:600}
.gfig small{display:block;margin-top:.16rem;font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.gfig small.up{color:var(--up)}
.gfig small.dn{color:var(--down)}
.pill{grid-area:pill;display:inline-flex;align-items:center;justify-content:center;gap:.3em;
  justify-self:end;padding:.16em .65em .2em;border-radius:999px;font-size:.8125rem;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:76px}
.pill.up{background:var(--up-bg);color:var(--up)}
.pill.dn{background:var(--down-bg);color:var(--down)}
.pill.flat{background:#F2F2F1;color:var(--ink-soft)}
.pill.na{background:#F2F2F1;color:var(--ink-soft)}

/* ============ cancellations panel ============ */
.cancel-lead{margin-top:1.1rem;line-height:1}
.cancel-lead .chip{font-size:clamp(3.2rem,5.5vw,4.6rem)}
.cancel-sub{margin-top:.7rem;font-size:.9375rem;color:var(--ink-soft)}
.cancel-sub b{color:var(--ink);font-weight:600}
.cbars-wrap{margin-top:1.6rem}
.cbars{display:flex;align-items:flex-end;gap:2px;height:88px}
.cbar{flex:1;min-width:0;background:var(--down);opacity:.38;border-radius:2px 2px 0 0;
  transform-origin:bottom;position:relative}
.cbar.worst{opacity:1}
.cbar.zero{background:var(--rule);opacity:1;border-radius:1px}
.wtag{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  font-size:.72rem;font-weight:600;color:var(--down);white-space:nowrap;font-variant-numeric:tabular-nums}
.axis-x{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-soft);
  border-top:1px solid var(--rule);padding-top:.35rem;margin-top:.45rem;font-variant-numeric:tabular-nums}
.fact{margin-top:1.05rem;font-size:.875rem;color:var(--ink-soft)}
.fact b{color:var(--ink);font-weight:600}
.fact a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--gray)}
.fact a:hover{box-shadow:inset 0 -1px 0 var(--ink)}
.footlink{display:inline-block;margin-top:1rem;font-size:.875rem;color:var(--ink);
  text-decoration:none;box-shadow:inset 0 -1px 0 var(--gray);transition:box-shadow .2s var(--ease)}
.footlink:hover{box-shadow:inset 0 -1px 0 var(--ink)}

/* ============ sparkbars (yesterday's board) ============ */
.spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:2.75rem}
.sbar{flex:1;min-width:0;background:#DFDFDE;border-radius:2px 2px 0 0;transform-origin:bottom;position:relative}
.sbar.today{background:var(--ink)}
.sbar.zero{background:var(--rule);border-radius:1px}
.stag{position:absolute;bottom:calc(100% + 5px);right:0;font-size:.875rem;font-weight:600;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============ tables ============ */
.scroll{overflow-x:auto;margin-top:.9rem}
table{width:100%;border-collapse:collapse;font-size:.895rem}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);
  font-weight:500;text-align:left;padding:.4rem .8rem .45rem 0;border-bottom:1px solid var(--ink);white-space:nowrap}
td{padding:.52rem .8rem .52rem 0;border-bottom:1px solid var(--rule);white-space:nowrap}
th.num,td.num{text-align:right;padding-right:0}
th:last-child,td:last-child{padding-right:0}
td.rank{color:var(--ink-soft);width:1.7rem;padding-right:.4rem}
tr.dim td{color:var(--ink-soft)}
tr.total td{border-bottom:0;border-top:1px solid var(--ink);font-weight:600}
a.drill{text-decoration:none;box-shadow:inset 0 -1px 0 var(--rule);transition:box-shadow .2s var(--ease)}
a.drill:hover{box-shadow:inset 0 -1px 0 var(--ink)}

/* ============ footer ============ */
footer{margin-top:clamp(2.6rem,5vw,3.6rem);border-top:1px solid var(--rule);padding:1.2rem 0 2.8rem;
  font-size:.8125rem;color:var(--ink-soft);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--gray)}
footer a:hover{box-shadow:inset 0 -1px 0 var(--ink)}

/* ============ chips (landing _letter.html seating) ============
   Only TWO survive, and both clear a hard legibility floor: numerals at >=.45em
   of the host text and tabular, no glyph under .3em. The old .38em digits and
   .26em percent sign could not be read beside 80px headline type, which is why
   the delta and curve chips are gone entirely - a chip is a garnish, and
   everything it used to say is now a plain coloured numeral (see .n above).

   The em seating constants are Familjen Grotesk metrics. Re-derive them if the
   typeface ever changes. */
.chip{display:inline-block;position:relative;font-size:1em;height:.9em;margin:0 .14em;
  vertical-align:-.12em;background:#fff;border:max(1px,.02em) solid var(--chip-edge);
  box-shadow:0 .015em .04em rgba(17,17,17,.05),0 .05em .14em rgba(17,17,17,.07);
  white-space:nowrap;overflow:hidden}
.chip__in{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.nb{white-space:nowrap}
.nb .chip{margin-right:0}
.chip__val{display:inline-flex;align-items:baseline}
.chip__num{font-size:.5em;font-weight:700;font-variant-numeric:tabular-nums}
.chip__pct{font-size:.34em;font-weight:600;color:var(--ink-soft);margin-left:.12em}
/* goal chip (variant A only) - the under-rule width IS the attainment, and its
   colour follows the PACE verdict so the bar never claims a state the sentence
   contradicts. Height is content-driven: .5em numerals will not fit .9em. */
.chip--goal{height:auto;border-radius:.32em;padding:.14em .28em .2em;margin:0 .03em;
  vertical-align:-.2em}
.chip--goal .chip__num{font-size:.56em;color:var(--chip-down)}
.chip--goal .chip__pct{font-size:.36em}
.chip--goal .chip__rule{position:absolute;left:.3em;right:.3em;bottom:.085em;height:.05em;
  border-radius:.05em;background:var(--chip-down);transform-origin:left center;
  transform:scaleX(var(--fill,1))}
.chip--goal.is-up .chip__num{color:var(--chip-up)}
.chip--goal.is-up .chip__rule{background:var(--chip-up)}
.chip--goal.is-flat .chip__num{color:var(--ink)}
.chip--goal.is-flat .chip__rule{background:var(--ink-soft)}
/* money chip - a leading minus and red ink. No strikethrough: the figure is
   data an operator has to read, and a rule through the digits destroys it. */
.chip--money{border-radius:.2em;padding:.12em .17em}
.chip__minus{font-size:.6em;font-weight:800;color:var(--chip-down);margin-right:.16em;line-height:1}
.chip__fig{position:relative;display:inline-flex;align-items:flex-start}
.chip__unit{font-size:.34em;font-weight:600;color:var(--chip-down);margin-top:.05em;margin-right:.04em}
.chip__amt{font-size:.52em;font-weight:700;color:var(--chip-down);line-height:1.15;
  font-variant-numeric:tabular-nums}

/* ============ motion - ALL gated .anim; base CSS = finished state ============ */
@keyframes wipeFill{from{transform:scaleX(0)}to{transform:scaleX(var(--fill,1))}}
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes numIn{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes drawUnit{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bloom{0%,55%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.anim .reveal{opacity:0;transform:translateY(14px)}
.anim .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.anim .reveal[data-d="1"].is-in{transition-delay:.07s}
.anim .reveal[data-d="2"].is-in{transition-delay:.14s}

.anim .is-in .chip--goal .chip__rule{animation:wipeFill .7s cubic-bezier(.65,0,.25,1) .5s both}
.anim .is-in .chip__num{animation:numIn .55s ease-out .62s both}
.anim .is-in .chip__minus{animation:stamp .6s cubic-bezier(.3,1.4,.4,1) .5s both}
/* variant B's attainment rule: same wipe, same law - the final state is already
   in the base CSS, so this is choreography and nothing more. */
.anim .is-in .prog-fill{animation:wipe .8s cubic-bezier(.65,0,.25,1) .45s both}

.anim .is-in .curve-cy{stroke-dasharray:1;animation:drawUnit 1.4s cubic-bezier(.3,.7,.2,1) .35s both}
.anim .is-in .curve-area{animation:bloom 1.5s ease .35s both}
.anim .is-in .curve-ly{animation:fadeIn .6s ease both}
.anim .is-in .curve-endlab{animation:numIn .5s ease-out 1.55s both}

.anim .goal-list .fill{transform:scaleX(0)}
.anim .goal-list.is-in .fill{transform:scaleX(1);transition:transform .7s cubic-bezier(.65,0,.25,1);
  transition-delay:calc(var(--i,0)*70ms)}
.anim .cbars .cbar{transform:scaleY(0)}
.anim .cbars.is-in .cbar{transform:scaleY(1);transition:transform .5s var(--ease);transition-delay:calc(var(--i,0)*18ms)}
.anim .spark .sbar{transform:scaleY(0)}
.anim .spark.is-in .sbar{transform:scaleY(1);transition:transform .5s var(--ease);transition-delay:calc(var(--i,0)*24ms)}
.anim .spark .stag,.anim .cbars .wtag{opacity:0}
.anim .spark.is-in .stag,.anim .cbars.is-in .wtag{opacity:1;transition:opacity .4s ease .6s}

/* ============ responsive ============ */
@media(max-width:980px){
  .rail-in{grid-template-columns:1fr 1fr}
  .slot{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .slot:nth-child(-n+2){border-top:0}
  .slot:nth-child(even){border-left:1px solid var(--rule);padding-left:1.25rem}
  .band{grid-template-columns:1fr}
  .band .panel{border-left:0;padding-left:0;border-top:1px solid var(--rule);
    margin-top:2rem;padding-top:1.9rem}
  .band .panel:first-child{border-top:0;margin-top:0;padding-top:0;padding-right:0}
}
@media(max-width:640px){
  .chart-stage{height:300px}
  .chart-stage svg.curve-desktop{display:none}
  .chart-stage svg.curve-phone{display:block}
  .xh{height:258px}
  .t-long{display:none}
  /* More air where the phone lands: the dateline needs to clear the topbar and
     the headline needs to clear the dateline. */
  .dateline{margin-top:1.9rem}
  /* Phone dateline stacks in reading order: today's date, then the month
     navigator on its own full-width row, then freshness, then the caption or
     the "Viewing ..." state. No mid-row wrapping, no horizontal scroll. */
  .dl-nav{order:2;width:100%;justify-content:space-between;margin-top:.15rem}
  .dl-right{order:3}
  .dl-center{order:4;width:100%;margin-top:.15rem}
  .lede{padding-top:2.4rem}
  .lede h1{line-height:1.16}
  .lede h1.hero{line-height:1}
  .prog{max-width:100%}
  .exact{margin-top:1.1rem}
  .rail{margin-top:1.9rem}
  .goal-row{grid-template-areas:"loc pill" "bullet bullet" "fig fig";
    grid-template-columns:1fr auto;row-gap:.45rem;column-gap:.6rem;padding:.7rem 0}
  .gfig{white-space:normal}
  .cancel-lead .chip{font-size:3.2rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media print{
  /* A print snapshot scrolls nothing, so the IntersectionObserver never adds
     .is-in and every unrevealed section would print at opacity:0 / scale 0.
     Same override shape as reduced-motion above: kill the choreography, then
     pin each .anim pre-state to its finished geometry. */
  *{animation:none!important;transition:none!important}
  .anim .reveal{opacity:1!important;transform:none!important}
  .anim .goal-list .fill{transform:scaleX(1)!important}
  .anim .cbars .cbar,.anim .spark .sbar{transform:scaleY(1)!important}
  .anim .spark .stag,.anim .cbars .wtag{opacity:1!important}
  /* Screen chrome off; the crosshair may hold an inline opacity from a hover
     mid-print, so display, not opacity, hides it. */
  .topbar,.toggle{display:none}
  .xh,.xdot,.tip{display:none}
  body{background:#fff;color:var(--ink)}
  /* These marks ARE the data and live in backgrounds, which print engines
     strip unless told otherwise. */
  .cbar,.sbar,.bullet .track,.bullet .fill,.bullet .tick,.pill,.prog,
  .prog-fill,.dot,.chip--goal .chip__rule{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .panel,.rail,.chart-stage,.oneline,.goal-row{break-inside:avoid}
}

/* ============ admin surfaces ============
   /admin and the /admin/email-preview toolbar, dressed in the same system as
   the overview above. Everything here is namespaced .adm-* on purpose: the old
   admin classes (.card, .flash, .btn, .badge, .admin-add) still live in
   style.css and still dress nothing but themselves, so /trends, /compare,
   /cancellations, /order and /location are untouched by this block.

   No new tokens. Ink, soft ink, hairlines, the green and the red are the ones
   declared at the top of this sheet, and every text colour used here clears
   4.5:1 on white. */

/* ---- lede ---- */
.adm-lede{padding-top:clamp(1.9rem,4vw,3rem);padding-bottom:.2rem}
.adm-lede .kicker{display:block;margin-bottom:.5rem}
.adm-lede h1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:500;line-height:1.1;
  letter-spacing:-.032em;max-width:22ch;text-wrap:balance}
.adm-lede .deck{margin-top:.75rem;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.4}
.adm-lede .deck+.deck{margin-top:.2rem}

/* ---- notices: a rule and a word, never a banner ---- */
.adm-notes{margin-top:1.4rem}
.adm-note{font-size:.875rem;line-height:1.5;color:var(--ink-soft);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.6rem 0;margin-top:-1px}
.adm-note+.adm-note{margin-top:-1px}
.adm-note b{font-weight:600}
.adm-note.ok b{color:var(--up)}
.adm-note.bad b{color:var(--down)}
section.mod>.adm-note{margin-top:1rem}

/* ---- add-user form ---- */
.adm-add{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.adm-add input[type=email]{flex:1 1 20rem;min-width:0;font:inherit;font-size:.9375rem;
  color:var(--ink);background:#fff;padding:.6rem .8rem;border:0;border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .2s var(--ease)}
.adm-add input[type=email]::placeholder{color:var(--ink-soft);opacity:1}
.adm-add input[type=email]:hover{box-shadow:inset 0 0 0 1px var(--gray)}
.adm-add input[type=email]:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.adm-btn{font:inherit;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;padding:.6rem 1.15rem;border:0;border-radius:8px;
  background:var(--ink);color:var(--paper);white-space:nowrap;
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.adm-btn:hover{transform:translateY(-1px);opacity:.9}

/* ---- activity filters ---- */
.adm-filter{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end;margin-top:1.1rem}
.adm-filter label{display:flex;flex-direction:column;gap:.35rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);font-weight:500}
.adm-filter select,.adm-filter input[type=text]{font:inherit;font-size:.9375rem;
  color:var(--ink);background:#fff;padding:.55rem .8rem;border:0;border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .2s var(--ease)}
.adm-filter select:hover,.adm-filter input[type=text]:hover{box-shadow:inset 0 0 0 1px var(--gray)}
.adm-filter select:focus,.adm-filter input[type=text]:focus{outline:none;
  box-shadow:inset 0 0 0 1.5px var(--ink)}
.adm-filter .more{align-self:center}

/* ---- the access list ---- */
.adm-list{margin-top:1rem}
.adm-row{display:grid;grid-template-areas:"who tog act";
  grid-template-columns:minmax(0,1fr) auto 5.5rem;gap:1rem;align-items:center;
  padding:.62rem 0;border-bottom:1px solid var(--rule)}
.adm-row.adm-hd{padding:.35rem 0 .45rem;border-bottom:1px solid var(--ink);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:500;
  color:var(--ink-soft)}
.adm-who{grid-area:who;min-width:0;font-size:.9375rem}
/* Long addresses break rather than push the page sideways at 390px. */
.adm-mail{overflow-wrap:anywhere;color:var(--ink)}
.adm-tog{grid-area:tog;justify-self:start}
.adm-act{grid-area:act;justify-self:end;text-align:right}
.adm-dash{color:var(--ink-soft)}

/* Quiet pill. Weight and a hairline ring carry it; no fill, no colour. */
.adm-pill{display:inline-block;margin-left:.5rem;padding:.13em .6em .17em;
  border-radius:999px;font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--rule);vertical-align:.08em}

/* ---- daily-email switch ----
   The overview's NBF toggle, wearing a <button> instead of an <a>: the form
   carries the value it flips TO, so one press is one POST and no script is
   involved. role=switch + aria-checked announce the state. */
.adm-switch{display:inline-flex;align-items:center;gap:.5rem;font:inherit;
  font-size:.875rem;color:var(--ink-soft);cursor:pointer;padding:.35rem .8rem;
  border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);
  white-space:nowrap;transition:transform .2s var(--ease),color .2s var(--ease)}
.adm-switch:hover{transform:translateY(-1px);color:var(--ink)}
.adm-switch .box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--gray);
  position:relative;flex:none;background:#fff}
.adm-switch.on{color:var(--ink)}
.adm-switch.on .box{background:var(--ink);border-color:var(--ink)}
.adm-switch.on .box::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.adm-switch .lbl{font-variant-numeric:tabular-nums}

/* ---- the daily-line panel ----
   Same parts as the rest of /admin: a switch, a text field wearing the
   add-user field's ring, and the ink button. The sentence itself is shown in
   the italic it is set in everywhere else, so what you read here is what the
   email opens with. */
.dl-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:1.1rem}
.dl-now{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.dl-line{margin-top:.45rem;font-size:1.125rem;font-style:italic;
  line-height:1.4;letter-spacing:-.015em;color:var(--ink);max-width:44ch;
  font-variant-numeric:tabular-nums}
.dl-none{margin-top:.45rem;font-size:.9375rem;line-height:1.5;
  color:var(--ink-soft);max-width:52ch}
.dl-form{margin-top:1.4rem}
.dl-form textarea{display:block;width:100%;margin-top:.5rem;font:inherit;
  font-size:.9375rem;line-height:1.55;color:var(--ink);background:#fff;
  padding:.7rem .85rem;border:0;border-radius:8px;resize:vertical;
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow .2s var(--ease)}
.dl-form textarea::placeholder{color:var(--ink-soft);opacity:1}
.dl-form textarea:hover{box-shadow:inset 0 0 0 1px var(--gray)}
.dl-form textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.dl-acts{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:.9rem}
.dl-acts .cap{margin-top:0;max-width:34ch}

/* ---- the schedule panel ----
  Native checkboxes and a native number input, accent-color'd to the ink so
  they read as part of the page without a script or a custom control. The row
  wraps on a phone rather than scrolling. */
.sched-form{margin-top:1.1rem}
.sched-days{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.55rem}
.sched-day{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  font-size:.9375rem;color:var(--ink-soft);background:#fff;
  padding:.45rem .7rem;border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow .2s var(--ease),color .2s var(--ease)}
.sched-day:hover{box-shadow:inset 0 0 0 1px var(--gray);color:var(--ink)}
.sched-day:has(input:checked){color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink)}
.sched-day input,.sched-quiet input{accent-color:var(--ink);
  width:15px;height:15px;margin:0;cursor:pointer}
.sched-quiet{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  margin-top:1.3rem;font-size:.9375rem;color:var(--ink)}
.sched-min{font:inherit;font-size:.9375rem;width:8ch;color:var(--ink);
  background:#fff;padding:.15rem .4rem;border:0;border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--rule);
  font-variant-numeric:tabular-nums;
  transition:box-shadow .2s var(--ease)}
.sched-min:hover{box-shadow:inset 0 0 0 1px var(--gray)}
.sched-min:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.sched-last{margin-top:1.1rem;max-width:60ch}

/* ---- send time ----
   A native time input, so the phone gets its own picker and the desktop gets
   a typed 24-hour field. The value on the wire is always "HH:MM". */
.sched-at{display:block;margin-top:1.1rem}
.sched-at .kicker{display:block;margin-bottom:.55rem}
.sched-at input[type=time]{font:inherit;font-size:.9375rem;color:var(--ink);
  padding:.45rem .7rem;border:0;border-radius:10px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--rule);font-variant-numeric:tabular-nums}
.sched-at input[type=time]:hover{box-shadow:inset 0 0 0 1px var(--gray)}
.sched-at input[type=time]:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.sched-at .cap{display:inline-block;margin-top:0;margin-left:.9rem;max-width:34ch;
  vertical-align:middle}

/* ---- remove: a red word, not a red box ---- */
.adm-rm{font:inherit;font-size:.875rem;color:var(--down);background:none;border:0;
  padding:.2rem 0;cursor:pointer;box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow .2s var(--ease)}
.adm-rm:hover{box-shadow:inset 0 -1px 0 var(--down)}
/* Send now is not a destructive act, so it does not wear the red word. */
.adm-send{color:var(--ink-soft);margin-right:.9rem}
.adm-send:hover{box-shadow:inset 0 -1px 0 var(--ink);color:var(--ink)}

/* ---- the reader row: a fourth column for what the mail server said ----
   Tone is a hint, never the message: every delivery cell already opens with a
   word ("Delivered.", "Bounced.") so the state survives greyscale. */
.adm-row4{grid-template-areas:"who tog del act";
  grid-template-columns:minmax(0,1fr) auto minmax(0,15rem) 9.5rem}
.adm-del{grid-area:del;min-width:0;font-size:.8125rem;line-height:1.35;
  color:var(--ink-soft);overflow-wrap:anywhere}
.adm-del-good{color:var(--up)}
.adm-del-bad{color:var(--down)}
.adm-del-none{opacity:.7}
.adm-row4 .adm-act{white-space:nowrap}
.adm-row4 .adm-act form{display:inline}

@media(max-width:900px){
  /* The delivery line wants a whole row of its own before the page narrows. */
  .adm-row4{grid-template-areas:"who tog act" "del del del";
    grid-template-columns:minmax(0,1fr) auto 9.5rem;row-gap:.45rem}
  .adm-row4.adm-hd .adm-del{display:none}
}

@media(max-width:640px){
  .adm-lede h1{line-height:1.14}
  /* Phone: the address takes the row, the two controls share the one below. */
  .adm-row{grid-template-areas:"who who" "tog act";
    grid-template-columns:minmax(0,1fr) auto;row-gap:.5rem;column-gap:.6rem;
    padding:.75rem 0}
  .adm-row4{grid-template-areas:"who who" "del del" "tog act";
    grid-template-columns:minmax(0,1fr) auto}
  .adm-row.adm-hd{display:none}
  .sched-at .cap{display:block;margin-left:0;margin-top:.5rem}
}

/* Overview comparison and location controls. */
.hero-comparisons{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;max-width:950px}
.prior-year{border-left:1px solid var(--rule);padding-left:2.5rem}
.prior-year .cap{margin-top:.55rem}
.location-filter{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}
.location-filter label{font-weight:600}
.location-filter select{flex:1;min-width:0;max-width:28rem;min-height:48px}
.location-filter select,.location-filter button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:5px;padding:.55rem .8rem}
.location-filter button{cursor:pointer;background:var(--ink);color:var(--paper,#fff)}
.location-filter select:focus-visible,.location-filter button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rail-in{grid-template-columns:repeat(2,minmax(0,1fr))}
.rail-in .slot{display:grid;grid-template-rows:subgrid;grid-row:span 3}
.rail-in .slot .kicker{align-self:start}
.goal-band{grid-template-columns:1fr}
.goal-band .panel:first-child{padding-right:0}
@media(max-width:650px){
 .hero-comparisons{grid-template-columns:1fr;gap:.5rem}
 .prior-year{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:1rem}
 .rail-in{grid-template-columns:1fr}
 .rail-in .slot{border-left:0;padding:1rem 0}
 .rail-in .slot + .slot{border-top:1px solid var(--rule)}
}

/* Keep every report tab visible when the header has limited width. */
@media(max-width:1050px){
 .topbar .wrap{flex-wrap:wrap;gap:0 1rem;padding-top:.6rem}
 .topbar .tabs{order:3;flex-basis:100%;flex-wrap:wrap;overflow:visible;gap:0 1.15rem}
 .topbar .tabs a{padding:.65rem 0}
 .topbar .toggle{margin-left:auto}
}

/* Group and location use the same scope for figures and daily recognition. */
.location-filter{display:flex;gap:.6rem}
.location-filter #overview-group{flex:0 1 13rem;max-width:13rem}
.spotlight-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;flex-wrap:wrap}
.oneline-t{max-width:58rem}
@media(max-width:600px){
 .location-filter{display:flex;flex-wrap:nowrap}
 .location-filter #overview-group,.location-filter #overview-location{width:100%;max-width:none}
}

/* One quiet row for the reporting period and scope. */
.report-controls{justify-content:flex-start;align-items:center;gap:1.25rem;font-size:.875rem}
.report-controls .dl-nav{gap:.75rem}
.report-controls .mnav-m{letter-spacing:0;font-weight:600}
.report-controls .mnav-a{padding:.5rem .25rem}
.report-controls .location-filter{padding:0;flex-wrap:nowrap;gap:.5rem}
.report-controls .location-filter select{flex:none;width:auto;min-height:38px;padding:.35rem 1.8rem .35rem .6rem;font-size:.875rem}
.report-controls .dl-right{margin-left:auto;color:var(--ink-soft);font-size:.8125rem;gap:.35rem}
@media(max-width:600px){
 .report-controls{gap:.5rem .8rem}
 .report-controls .dl-nav{order:0;width:auto;margin:0;justify-content:flex-start}
 .report-controls .dl-right{order:0}
 .report-controls .location-filter{order:1;width:100%}
 .report-controls .location-filter select{flex:1;width:0;max-width:none}
}

.curve-switch{display:inline-flex;gap:2px;border:1px solid var(--rule);border-radius:5px;padding:2px}
.curve-switch a{padding:.3rem .65rem;text-decoration:none;color:var(--ink-soft);font-size:.75rem;border-radius:3px}
.curve-switch a[aria-current]{background:var(--ink);color:white}

.revenue-comparison{grid-template-columns:1fr 1fr}
.revenue-comparison .panel:first-child{padding-right:2rem}
.revenue-comparison .goal-row{grid-template-areas:"loc pill" "bullet bullet" "fig fig";grid-template-columns:1fr auto;gap:.5rem}
.prior-table{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.prior-table th,.prior-table td{padding:.8rem .35rem;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
.prior-table th:first-child,.prior-table td:first-child{text-align:left;padding-left:0}
.prior-table thead th{font-size:.6875rem;font-weight:500;color:var(--ink-soft)}
.prior-table tfoot{font-weight:600;border-top:1px solid var(--ink)}
@media(max-width:700px){
 .revenue-comparison{grid-template-columns:1fr}
 .revenue-comparison .panel{padding-left:0;border-left:0;border-top:1px solid var(--rule);margin-top:1.5rem;padding-top:1.5rem}
 .revenue-comparison .panel:first-child{padding-right:0;margin-top:0;padding-top:0;border-top:0}
}
@media(min-width:701px){
 .revenue-comparison .panel{margin-top:0;padding-top:0;border-top:0;padding-left:1.5rem;border-left:1px solid var(--rule)}
 .revenue-comparison .panel:first-child{padding-left:0;padding-right:1.5rem;border-left:0}
}

.revenue-table-scroll{overflow-x:auto}
.revenue-table{min-width:540px}
.revenue-table tbody th{font-weight:400}
.revenue-table-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.comparison-period{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.comparison-period a{color:var(--ink);text-decoration:none;padding:.5rem}
.people-page{padding-top:2.5rem;padding-bottom:3rem;max-width:960px}
.people-page h1{font-size:2.5rem;margin:.4rem 0}.people-page h2{font-size:1.2rem;margin:0 0 1rem}
.people-section{margin-top:2rem;border-top:1px solid var(--rule);padding-top:1.5rem}
.people-form{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin-top:1rem}
.people-form label{display:grid;gap:.4rem;font-size:.875rem}
.people-form input[type=email]{font:inherit;padding:.7rem;border:1px solid var(--rule);border-radius:5px;min-width:260px}
.people-form .people-check{display:flex;align-items:center;padding:.7rem 0}
.people-page button{font:inherit;font-size:.8125rem;padding:.65rem .8rem;background:white;color:var(--ink);border:1px solid var(--rule);border-radius:5px;cursor:pointer}
.people-form>button{background:var(--ink);color:white}
.people-row{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule);align-items:center;flex-wrap:wrap}
.people-row b{font-size:.9375rem;overflow-wrap:anywhere}.people-row small{display:block;color:var(--ink-soft);margin-top:.25rem}.people-row form{display:flex;gap:.5rem}

/* Match the sign-out button to the navigation links. */
.tabs .nav-signout{display:flex;align-items:stretch;margin:0;flex-shrink:0}
.tabs .nav-signout button{display:block;font:inherit;font-size:.9375rem;line-height:inherit;
  color:var(--ink-soft);background:none;border:0;padding:1rem 0;white-space:nowrap;cursor:pointer}
.tabs .nav-signout button:hover{color:var(--ink)}
.tabs .nav-signout button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.login-confirm{margin-top:1.5rem}
.login-confirm .adm-btn{min-height:44px}
@media(max-width:1050px){.tabs .nav-signout button{padding:.65rem 0}}

.settings-instructions{margin-top:1.5rem}
.settings-instructions summary{cursor:pointer;font-size:.9375rem}

.report-loading[hidden]{display:none}
.report-loading{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(255,255,255,.78);backdrop-filter:blur(2px);padding:1.5rem}
.report-loading-panel{text-align:center;background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:2rem 2.5rem;box-shadow:0 8px 32px rgba(0,0,0,.06)}
.report-loading-spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--rule);
  border-top-color:var(--ink);border-radius:50%;animation:report-loading-spin .8s linear infinite}
.report-loading-panel p{font-size:1.0625rem;margin:.75rem 0}
.report-loading-panel button{font:inherit;font-size:.875rem;color:var(--ink-soft);background:none;
  border:0;text-decoration:underline;padding:.5rem;cursor:pointer}
@keyframes report-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.report-loading-spinner{animation:none}}