/* The Business screen (doc 104; Max approved doc 110 on 2 October 2026), on the back office's own tokens (app.css).
   Carried over from the approved mockup's stylesheet. Widths and flex shares are set from business.js, never inline,
   because the page's Content-Security-Policy allows no inline style. */
:root{--data:#446cff;--data-soft:rgba(68,108,255,.36);--grid:rgba(209,221,255,.12);--track:rgba(209,221,255,.08);--ctx:#8e9bb0}
.biz .blk{margin-bottom:1rem}
.biz .note.lead2{max-width:52rem;margin:0 0 1.1rem}
.biz .card.tight{padding:1.45rem 1.6rem}
.biz .card.tight h2{font-size:clamp(1.45rem,1.8vw,1.85rem);margin-bottom:.35rem}
.biz .card .note{margin:.1rem 0 1rem}
.biz .hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.biz .hdr .toolbar{margin:0;flex:none}
.biz .chart.hours{height:205px}
.biz h1{margin-bottom:.6rem}
.biz .btn.sm{white-space:nowrap}
.biz .sm-only{display:none}
.biz .funnel .lab .ga-sm{display:none}
.biz .btn.sm{min-height:36px;padding:0 .8rem;font-size:.74rem}
.biz .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.biz .grid2.even{grid-template-columns:1fr 1fr}
/* how old each source is: status dot plus label, never a pill */
.biz .ages{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;padding:.9rem 1.2rem;border:1px solid var(--line);border-radius:18px;background:rgba(10,17,34,.45);font-size:.78rem;color:var(--muted)}
.biz .age{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.biz .card .age{margin-top:.4rem;font-size:.86rem;color:var(--muted)}
.biz .ages .st span{color:#eef2fb}
.biz .st.late{color:var(--warn)}
.biz .st.lag{color:#9fb2ff}
/* stat tiles */
.biz .kpis{display:grid;grid-template-columns:1.55fr repeat(4,1fr);gap:1rem}
.biz .kpis .card{margin:0;padding:1.25rem 1.35rem}
.biz .kpis dt{font-size:.74rem;color:var(--quiet)}
.biz .kpis dd{margin:.45rem 0 0;font:400 clamp(1.9rem,2.4vw,2.45rem)/1 var(--austin)}
.biz .kpis .hero dd{font-size:clamp(2.9rem,4.4vw,3.9rem)}
.biz .kpis .sub{margin-top:.5rem}
.biz .delta{display:block;margin-top:.55rem;font-size:.76rem;color:var(--muted);line-height:1.35}
.biz .delta b{font-weight:600;color:#eef2fb}
.biz .delta.up b{color:var(--teal)}
.biz .delta.down b{color:var(--warn)}
/* small tables that stay tables on a phone */
.biz table.keep td.n,.biz table.keep th.n{text-align:right;font-variant-numeric:tabular-nums}
.biz table.keep td{padding:.62rem .6rem}
.biz table.keep tr.muted td{color:var(--muted)}
.biz table.keep tbody tr{cursor:default}
/* The pass rates by week (doc 169 card 24) have up to five columns and twelve weeks of rows: on a phone each week
   stacks as label and value, as the back office's long lists do, instead of squeezing into a table. */
.biz table.rates td.n,.biz table.rates th.n{text-align:right;font-variant-numeric:tabular-nums}
.biz table.rates tbody tr{cursor:default}
.biz .legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.74rem;color:var(--muted);margin:.2rem 0 .6rem}
.biz .legend .k{display:inline-flex;align-items:center;gap:.45rem}
.biz .legend .sw{width:12px;height:12px;border-radius:3px;background:var(--data)}
.biz .legend .sw.soft{background:var(--data-soft)}
.biz .legend .sw.today{background:transparent;border:2px solid var(--data)}
.biz .legend .ln{width:16px;height:2px;border-radius:2px;background:var(--ctx)}
.biz .chart{width:100%;margin-top:.2rem}
.biz .chart svg{display:block;width:100%;overflow:visible}
.biz .chart text{font:400 11px var(--sans);fill:var(--quiet)}
.biz .chart text.v{fill:#eef2fb;font-weight:600}
.biz .subh{font:500 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin:1.3rem 0 .6rem}
.biz .subh:first-child{margin-top:0}
.biz .line-note{font-size:.84rem;color:var(--muted);margin:.7rem 0 0}
.biz .line-note b{color:#eef2fb;font-weight:600}
/* right now: one line each, dot plus label */
.biz ul.now{list-style:none;margin:0;padding:0}
.biz ul.now li{padding:.62rem 0;border-top:1px solid var(--row)}
.biz ul.now li:first-child{border-top:0;padding-top:.2rem}
.biz ul.now .st{white-space:normal;align-items:baseline}
.biz ul.now .st::before{transform:translateY(-1px)}
.biz ul.now .sub{margin:.2rem 0 0 1.05rem}
/* horizontal bars: square at the baseline, 4px rounded data end */
.biz .hbars{display:grid;grid-template-columns:max-content 1fr max-content;gap:.5rem .9rem;align-items:center;font-size:.84rem}
.biz .hbars .lab{color:#eef2fb}
.biz .hbars .trk{display:block;height:12px}
.biz .hbars .bar{display:block;height:12px;min-width:3px;border-radius:0 4px 4px 0;background:var(--data)}
.biz .hbars .val{font-variant-numeric:tabular-nums;color:#eef2fb;text-align:right}
/* funnel */
.biz .funnel{display:grid;grid-template-columns:minmax(14rem,17rem) 1fr 7rem 7rem 5rem;gap:0;align-items:center}
.biz .funnel>div{padding-right:1rem;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.biz .funnel>div:nth-child(5n){padding-right:0}
.biz .funnel.nog{grid-template-columns:minmax(14rem,17rem) 1fr 7rem 7rem}
.biz .funnel .h{font-size:.72rem;color:var(--quiet);padding:0 0 .6rem;border-bottom:1px solid var(--row)}
.biz .funnel .c{padding:.75rem 0;border-bottom:1px solid var(--row);font-size:.86rem}
.biz .funnel .lab b{display:block;font-weight:400;color:#eef2fb}
.biz .funnel .lab .sub{margin-top:.15rem}
.biz .funnel .bar{display:block;height:16px;min-width:3px;border-radius:0 4px 4px 0;background:var(--data)}
.biz .funnel .people{font:400 1.12rem/1 var(--austin);text-align:right}
.biz .funnel .went{text-align:right}
.biz .funnel .went .m{display:block;height:4px;margin-top:.45rem;border-radius:2px;background:var(--track);overflow:hidden}
.biz .funnel .went .m i{display:block;height:100%;border-radius:2px;background:var(--data)}
.biz .funnel .ga{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.biz .funnel .r{text-align:right}
.biz .callout{display:flex;gap:.7rem;align-items:baseline;margin-top:1.1rem;padding:.85rem 1.1rem;border:1px solid var(--warn-line);border-radius:14px;background:var(--warn-tint);font-size:.86rem;color:#eef2fb}
.biz .callout .st{color:var(--warn)}
/* payments: stacked bars with a 2px surface gap between segments */
.biz .stack-rows{display:grid;grid-template-columns:max-content 1fr max-content;gap:.85rem 1rem;align-items:center;font-size:.86rem}
.biz .stack-rows .lab{color:#eef2fb}
.biz .stack{display:flex;gap:2px;height:20px}
.biz .stack i{display:flex;align-items:center;justify-content:center;height:100%;font:600 .68rem/1 var(--sans);font-style:normal;color:#0d1426}
.biz .stack i:last-child{border-radius:0 4px 4px 0}
.biz .stack i.ok{background:var(--teal)}
.biz .stack i.no{background:var(--warn)}
/* Ran out: a grey dark enough for its white count to read at 4.9:1 (WCAG 1.4.3; #eef2fb on #6f7b92 was 3.8:1) and
   light enough for the bar to stand out from the card at 3.2:1 or more (1.4.11). */
.biz .stack i.out{background:#66718a;color:#fff}
.biz .stack i.open{background:#9fb2ff}
.biz .stack-rows .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.biz .stack-rows .val b{color:#eef2fb;font-weight:600}
.biz .st.ok{color:var(--teal)}.st.no{color:var(--warn)}.st.out{color:#66718a}.st.open{color:#9fb2ff}
/* big figure inside a card */
.biz .fig{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:.2rem 0 .9rem}
.biz .fig b{font:400 clamp(2.4rem,3.4vw,3.1rem)/1 var(--austin);font-weight:400}
.biz .fig span{font-size:.84rem;color:var(--muted)}
.biz dl.kv.tight div{padding:.55rem 0}
.biz dl.kv dd b{font-weight:600}
.biz .split{display:flex;gap:2px;height:10px;margin:.3rem 0 .5rem}
.biz .split i{display:block;height:100%}
.biz .split i:first-child{border-radius:4px 0 0 4px}
.biz .split i:last-child{border-radius:0 4px 4px 0}
.biz .split i.fin{background:var(--data)}.split i.person{background:var(--teal)}.split i.nobody{background:var(--warn)}
.biz .st.fin{color:var(--data)}.st.person{color:var(--teal)}.st.nobody{color:var(--warn)}
.biz .foot{font-size:.76rem;color:var(--quiet);margin:.9rem 0 0}
.biz .late-note{margin:0 0 .9rem;padding:.6rem .85rem;border:1px solid var(--warn-line);border-radius:12px;background:var(--warn-tint);font-size:.8rem;color:var(--warn);line-height:1.4}
/* trend table */
.biz table.trend td{padding:.7rem .6rem}
.biz table.trend td.spark{width:34%}
.biz table.trend td.spark svg{display:block;width:100%;height:30px;overflow:visible}
.biz table.trend .d{display:block;font-size:.74rem;color:var(--muted)}
.biz table.trend .d.up{color:var(--teal)}
.biz table.trend .d.down{color:var(--warn)}
.biz .pagefoot{margin:1.5rem 0 1rem;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:18px;font-size:.8rem;line-height:1.5;color:var(--muted)}
.biz .pagefoot b{color:#eef2fb;font-weight:600}
@media (max-width:1180px){
  .biz .kpis{grid-template-columns:1fr 1fr 1fr}
  .biz .kpis .hero{grid-column:1 / -1}
}
@media (max-width:1000px){
  .biz .grid3,.biz .grid2.even{grid-template-columns:1fr}
}
@media (max-width:760px){
  .biz h1{font-size:2.5rem}
  .biz .ages{padding:.8rem .95rem;gap:.45rem 1rem}
  .biz .kpis{grid-template-columns:1fr 1fr;gap:.7rem}
  .biz .kpis .card{padding:1rem 1.05rem}
  .biz .kpis dd{font-size:1.9rem}
  .biz .kpis .hero dd{font-size:3rem}
  .biz .card.tight{padding:1.2rem 1.15rem}
  /* these small tables stay tables on a phone, unlike the back office's long lists */
  .biz table.keep{display:table;width:100%}
  .biz table.keep thead{display:table-header-group}
  .biz table.keep tbody{display:table-row-group}
  .biz table.keep tr{display:table-row;padding:0}
  .biz table.keep td{display:table-cell;width:auto;padding:.55rem .35rem;border-bottom:1px solid var(--row);text-align:left}
  .biz table.keep td.n{text-align:right}
  .biz table.keep td::before{content:none}
  .biz table.keep th{padding:0 .35rem .55rem}
  .biz .funnel,.biz .funnel.nog{grid-template-columns:1fr max-content;gap:0;grid-auto-flow:row dense}
  .biz .funnel .c.people,.biz .funnel .c.went{padding-left:.8rem;white-space:nowrap}
  .biz .funnel .h.bar-h,.biz .funnel .h.went-h,.biz .funnel .h.ga-h{display:none}
  .biz .funnel .c{border-bottom:0;padding:.6rem 0 .15rem}
  .biz .funnel .c.lab{grid-column:1}
  .biz .funnel .c.people{grid-column:2}
  .biz .funnel .c.barc{grid-column:1;padding:.2rem 0 .7rem;border-bottom:1px solid var(--row)}
  .biz .funnel .c.went{grid-column:2;padding:.2rem 0 .7rem;border-bottom:1px solid var(--row);font-size:.8rem}
  .biz .funnel .went .m{display:none}
  .biz .funnel .c.ga{display:none}
  .biz .funnel .lab .ga-sm{display:inline}
  .biz .stack-rows{grid-template-columns:1fr max-content;gap:.35rem .8rem;grid-auto-flow:row dense}
  .biz .stack-rows .lab{grid-column:1}
  .biz .stack-rows .val{grid-column:2}
  .biz .stack-rows .stack{grid-column:1 / -1;margin-bottom:.55rem}
  .biz table.trend td.spark{width:30%}
  .biz .hdr{flex-direction:column;gap:.6rem}
  .biz .funnel>div,.biz .funnel.nog>div:nth-child(n){padding-right:0}
  .biz .callout{flex-direction:column;gap:.3rem}
  .biz .chart.hours{height:160px}
  .biz .lg-only{display:none}
  .biz .sm-only{display:inline}
}