/* ============================================================
   BOLD Community Tracking — Revolut design system
   Tokens taken directly from DESIGN-revolut.md
   ============================================================ */
:root{
  /* brand */
  --primary:#FBA4D3; --primary-bright:#FFBCE1; --primary-deep:#E87FBB; --on-primary:#1A0410;
  /* surface */
  --canvas-dark:#000000; --canvas-light:#ffffff;
  --surface-deep:#0a0a0a; --surface-elevated:#16181a; --surface-soft:#f4f4f4; --surface-card:#ffffff;
  --hairline-dark:rgba(255,255,255,0.12); --hairline-light:#e2e2e7; --divider-soft:rgba(255,255,255,0.06);
  /* text */
  --ink:#191c1f; --body:#1f2226; --charcoal:#3a3d40; --mute:#505a63; --ash:#5c5e60;
  --stone:#8d969e; --faint:#c9c9cd; --on-dark:#ffffff; --on-dark-mute:rgba(255,255,255,0.72);
  /* accents — data visualisation only, never button surfaces */
  --bold-pink:#FBA4D3;   /* alias of --primary, kept for readability */
  --teal:#00a87e; --lblue:#007bc2; --lgreen:#428619; --yellow:#b09000;
  --warning:#ec7e00; --pink:#e61e49; --danger:#e23b4a; --brown:#936d62; --link:#376cd5;
  /* ink for content sitting on an inverted .on surface (a selected pill, etc) */
  --on-invert:rgba(0,0,0,.66); --on-invert-wash:rgba(0,0,0,.09);
  --itype-on-ink:#8c2f66; --itype-on-wash:rgba(232,127,187,.28);
  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-full:9999px;
  /* spacing */
  --s-xxs:4px; --s-xs:6px; --s-sm:8px; --s-md:14px; --s-lg:16px; --s-xl:24px;
  --s-xxl:32px; --s-xxxl:48px; --s-block:80px; --s-section:88px;
  /* chart colours, read by app.js at render time so charts follow the theme */
  --chart-ink:#ffffff;
  --wash-05:rgba(255,255,255,.05); --wash-07:rgba(255,255,255,.07);
  --wash-09:rgba(255,255,255,.09); --wash-18:rgba(255,255,255,.18);
  --wash-22:rgba(255,255,255,.22); --wash-26:rgba(255,255,255,.26);
  --wash-28:rgba(255,255,255,.28); --wash-30:rgba(255,255,255,.30);
  --wash-32:rgba(255,255,255,.32);
}

/* ============================================================
   LIGHT THEME
   Dark is the default. This redefines the same tokens rather than
   restyling components, so every surface follows automatically.
   canvas-dark and canvas-light swap roles: several components use
   canvas-light as the "selected" fill and invert against it.
   ============================================================ */
:root[data-theme="light"]{
  --canvas-dark:#FFFFFF; --canvas-light:#191c1f;
  --surface-deep:#F2F2F4; --surface-elevated:#FFFFFF;
  --hairline-dark:rgba(0,0,0,.12); --divider-soft:rgba(0,0,0,.07);
  --on-dark:#191c1f; --on-dark-mute:rgba(25,28,31,.66);
  --stone:#69707a; --ash:#8a919b; --faint:#b9bdc4;
  --on-primary:#1A0410;
  --on-invert:rgba(255,255,255,.80); --on-invert-wash:rgba(255,255,255,.16);
  --itype-on-ink:var(--primary); --itype-on-wash:rgba(251,164,211,.20);
  --chart-ink:#191c1f;
  --wash-05:rgba(0,0,0,.045); --wash-07:rgba(0,0,0,.07);
  --wash-09:rgba(0,0,0,.09);  --wash-18:rgba(0,0,0,.20);
  --wash-22:rgba(0,0,0,.24);  --wash-26:rgba(0,0,0,.28);
  --wash-28:rgba(0,0,0,.30);  --wash-30:rgba(0,0,0,.32);
  --wash-32:rgba(0,0,0,.34);
}
/* brand marks are white silhouettes and must flip. The BOLD wordmark is pink
   and inverts to green, so it is left alone. */
/* real brand marks are white silhouettes and must flip in light mode; the
   generated monogram for a new workspace is already coloured, so exclude it */
:root[data-theme="light"] .blogo:not([src^="data:"]){filter:invert(1)}
:root[data-theme="light"] .nav{background:#FFFFFF}
:root[data-theme="light"] .card{background:var(--surface-elevated);
  border:1px solid var(--hairline-dark)}
:root[data-theme="light"] .card-featured{background:var(--primary);
  border-color:transparent;color:var(--on-primary)}
:root[data-theme="light"] .modal-back{background:rgba(25,28,31,.42)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--canvas-dark);color:var(--on-dark);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
body{min-height:100vh}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--primary);color:var(--on-primary)}

/* ---------- type ---------- */
.d-xl{font-size:80px;font-weight:500;line-height:1.0;letter-spacing:-0.8px}
.d-lg{font-size:48px;font-weight:500;line-height:1.21;letter-spacing:-0.48px}
.d-md{font-size:40px;font-weight:500;line-height:1.2;letter-spacing:-0.4px}
.h-lg{font-size:32px;font-weight:500;line-height:1.19;letter-spacing:-0.32px}
.h-md{font-size:24px;font-weight:500;line-height:1.33}
.h-sm{font-size:20px;font-weight:500;line-height:1.4}
.b-lg{font-size:18px;font-weight:400;line-height:1.56;letter-spacing:-0.09px}
.b-md{font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.24px}
.b-sm{font-size:14px;font-weight:400;line-height:1.43}
.cap{font-size:13px;font-weight:400;line-height:1.4}
.mute{color:var(--on-dark-mute)} .stone{color:var(--stone)}
.mono{font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- nav ---------- */
.nav{height:64px;background:var(--canvas-dark);border-bottom:1px solid var(--hairline-dark);
  display:flex;align-items:center;gap:var(--s-xxl);padding:0 var(--s-xl);position:sticky;top:0;z-index:50}
.wordmark-img{height:20px;width:auto;display:block;flex:none}
.nav-links{display:flex;gap:var(--s-xs);margin-left:var(--s-lg)}
.nav-link{font-size:14px;font-weight:600;color:var(--on-dark-mute);padding:8px 14px;border-radius:var(--r-full);
  transition:background .15s,color .15s}
.nav-link:hover{color:var(--on-dark);background:var(--wash-05)}
.nav-link.on{color:var(--on-dark);background:var(--wash-09)}
.nav-right{display:flex;align-items:center;gap:var(--s-md)}
.brand-pill{display:flex;align-items:center;gap:10px;background:var(--surface-elevated);
  border-radius:var(--r-full);padding:7px 8px 7px 14px;font-size:14px;font-weight:600}
.brand-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.brand-pill{gap:8px}
.pill-logo{width:20px;height:20px;margin-right:1px}
.brand-pill .chev{color:var(--stone);font-size:11px;padding-right:6px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);
  display:grid;place-items:center;font-size:12px;font-weight:700}

/* ---------- shell ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--s-xl) var(--s-block)}
.subhead{padding:var(--s-xxl) 0 var(--s-xl);display:flex;align-items:flex-end;
  column-gap:var(--s-xl);row-gap:18px;flex-wrap:wrap}
.subhead > .sh-main{flex:1 1 480px;min-width:0}
.subhead .meta{display:flex;gap:var(--s-sm) var(--s-md);flex-wrap:wrap}
/* chips take their own full-width row so all six stay on one line */
.subhead > .meta{flex:1 0 100%;margin-top:0}
.chip{background:var(--surface-elevated);border-radius:var(--r-full);padding:6px 14px;font-size:13px;
  color:var(--on-dark-mute);display:inline-flex;align-items:center;gap:7px}
.chip .dot{width:6px;height:6px;border-radius:50%}
.actions{flex:0 0 auto;margin-left:auto;display:flex;gap:var(--s-sm);align-items:center;padding-bottom:2px}
@media(max-width:900px){.actions{margin-left:0;width:100%}}

/* buttons — all pills, never accent-coloured */
.btn{border-radius:var(--r-full);font-size:14px;font-weight:600;padding:11px 22px;transition:opacity .15s,background .15s}
.btn-primary{background:var(--canvas-light);color:var(--canvas-dark)}
.btn-primary:hover{background:var(--faint)}
.btn-outline{background:transparent;color:var(--on-dark);border:1px solid var(--hairline-dark)}
.btn-outline:hover{border-color:var(--wash-32)}
.btn-sm{padding:8px 16px;font-size:13px}

/* filter rail */
/* 6px rather than 8px: the newest five plus both filters then hold one line */
.rail{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:var(--s-xl);position:relative;z-index:40}
/* NOTE: no overflow here. overflow-x:auto forces overflow-y to compute as auto,
   which clips the period dropdowns. flex-wrap handles narrow screens instead. */
.pill{background:transparent;border:1px solid var(--hairline-dark);border-radius:var(--r-full);
  padding:9px 18px;font-size:13px;font-weight:600;color:var(--on-dark-mute);white-space:nowrap;transition:.15s}
.pill:hover{color:var(--on-dark);border-color:var(--wash-30)}
.pill.on{background:var(--canvas-light);color:var(--canvas-dark);border-color:var(--canvas-light)}
.pill .live{width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block;margin-right:7px;
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- cards ---------- */
.card{background:var(--surface-elevated);border-radius:var(--r-lg);padding:var(--s-xxl)}
.card-tight{padding:var(--s-xl)}
.card-featured{background:var(--primary);color:var(--on-primary)}
.card-featured .mute,.card-featured .stone{color:rgba(26,4,16,.72)}
.grid{display:grid;gap:var(--s-lg)}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.sec{margin-top:var(--s-xxl)}
.sec-head{display:flex;align-items:baseline;gap:var(--s-md);margin-bottom:var(--s-lg)}
.sec-head .h-md{letter-spacing:-.3px}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone)}

/* score cards */
.score{position:relative;transition:background .15s;border:1px solid transparent}
/* the Content cards reveal method only, so they are only a control in internal view;
   the home cards carry a plain reading too, so they are a control in both */
body.internal-on .score[data-score]{cursor:pointer}
.sub-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.score:hover{background:#1c1e21}
.score.open{border-color:var(--hairline-dark)}
.score .lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.score .val{font-size:56px;font-weight:500;letter-spacing:-1.6px;line-height:1;margin-top:14px}
.score .sub{font-size:13px;color:var(--on-dark-mute);margin-top:10px;line-height:1.45}
/* ---------- Overview headline cards ----------
   Same primitives as the Rhythm cards: .card padding, an .eyebrow into an .h-md
   question, one figure with room around it, then the comparison and only the
   detail the chart does not already show. */
.hcard .hfig{font-size:48px;font-weight:500;line-height:1;letter-spacing:-1.4px;
  margin-top:18px;font-variant-numeric:tabular-nums}
/* The viz takes whatever slack the grid row leaves, so the reading and the
   action sit at the foot of the card instead of the space dumping under them.
   A bar or a track centres itself in that space; the health card's columns
   stretch through it, because .cv-quad carries its own flex:1. */
.hcard .hviz{margin-top:22px;flex:1;display:flex;flex-direction:column;
  justify-content:center;min-height:0}
.hcard .hrows{margin-top:20px}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--divider-soft)}
.hrow:last-child{border-bottom:none}
.hrow .mono{font-size:14px}
.hcard .hfoot{margin-top:18px}
.hcard .expand{font-size:11px;color:var(--stone);margin-top:16px;
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.hcard .expand .chev{display:inline-block;transition:transform .18s var(--ease-out)}
.hcard.open .expand .chev{transform:rotate(180deg)}
.hcard.open .decomp{display:block}
body.internal-on .hcard{cursor:pointer}

/* the comparison bars */
.cv-track{position:relative;height:10px;border-radius:var(--r-full);background:var(--wash-09)}
.cv-track > i{display:block;height:100%;border-radius:var(--r-full);background:var(--primary)}
.cv-track.empty > i{background:var(--wash-18)}
.cv-track > b{position:absolute;top:-4px;width:2px;height:18px;border-radius:1px;
  background:var(--on-dark);opacity:.5;transform:translateX(-1px)}
.cv-track.band{background:var(--wash-05)}
.cv-track.band .range{position:absolute;top:0;height:100%;border-radius:var(--r-full);
  background:rgba(251,164,211,.28)}
.cv-track.band .called{background:var(--stone);opacity:.95;height:18px;top:-4px}
.cv-track.band .actual{background:var(--primary);width:3px;height:18px;top:-4px}
.cv-split{display:flex;height:10px;gap:2px}
.cv-split > i{display:block;height:100%}
.cv-split > i:first-child{border-radius:var(--r-full) 0 0 var(--r-full)}
.cv-split > i:last-child{border-radius:0 var(--r-full) var(--r-full) 0}
.cv-split .a{background:var(--wash-26)} .cv-split .b{background:var(--wash-18)}
.cv-split .p0{background:var(--primary)} .cv-split .p1{background:var(--primary-deep)}
.cv-split .p2{background:rgba(251,164,211,.5)}
/* the two-part split reads brand against community, so that second half is the accent */
.cv-split .a + .b{background:var(--primary)}
.cv-axis{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
  font-size:12px;color:var(--stone)}
.cv-axis b{color:var(--on-dark-mute);font-weight:500}
/* The health card's content is shorter than the grid row its sibling sets, so
   it carried dead space under the foot text. The bars take that space instead:
   .hviz grows, the columns stretch, and the labels and foot are pushed to the
   bottom. The card's own height is unchanged - it is the row that sets it, and
   82px stays the floor for any width where there is no slack to take. */
.hcard .hviz:has(.cv-quad){justify-content:stretch}
.cv-quad{display:flex;gap:10px;align-items:stretch;flex:1;min-height:82px}
.cv-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;
  justify-content:flex-end}
.cv-colbar{width:100%;flex:1;min-height:82px;border-radius:6px;background:var(--wash-07);
  display:flex;align-items:flex-end;overflow:hidden}
.cv-colbar i{display:block;width:100%;background:var(--primary);border-radius:5px}
/* Unused while HEALTH_WEAK_AMBER is false in app.js. Kept so turning the flag
   back on restores the amber bar without hunting for the colour again. */
.cv-colbar i.weak{background:var(--warning)}
.cv-col em{font-style:normal;font-size:13px;color:var(--on-dark-mute);
  font-variant-numeric:tabular-nums}
.cv-col span{font-size:11px;color:var(--stone)}
@media(max-width:900px){.hcard .hfig{font-size:40px}}
.score .delta{font-size:12px;font-weight:600;margin-top:12px;display:inline-flex;align-items:center;gap:5px}
.up{color:var(--teal)} .down{color:var(--danger)} .flat{color:var(--stone)}
.score .expand{font-size:11px;color:var(--stone);margin-top:14px;display:flex;align-items:center;gap:6px}
.decomp{display:none;margin-top:var(--s-lg);padding-top:var(--s-lg);border-top:1px solid var(--hairline-dark)}
.score.open .decomp{display:block}
.decomp .row{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:5px 0}
.decomp .row .k{color:var(--stone)}
.decomp .row .v{font-family:'SF Mono',Menlo,monospace;color:var(--on-dark)}
.formula{background:rgba(251,164,211,.11);border-left:2px solid var(--primary);border-radius:0 8px 8px 0;
  padding:10px 12px;margin-top:10px;font-family:'SF Mono',Menlo,monospace;font-size:11.5px;line-height:1.6;color:var(--on-dark)}
.tagsrc{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;
  border-radius:4px;margin-right:6px}
.t-api{background:rgba(0,168,126,.2);color:#4fd6ab} .t-db{background:rgba(251,164,211,.22);color:#FBA4D3}
.t-est{background:rgba(176,144,0,.22);color:#e0c25a} .t-comp{background:rgba(255,255,255,.1);color:#c9c9cd}

/* meters */
.meter{height:8px;border-radius:var(--r-full);background:rgba(255,255,255,.09);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;border-radius:var(--r-full)}
.comp-row{padding:var(--s-lg) 0;border-bottom:1px solid var(--divider-soft)}
.comp-row:last-child{border-bottom:none}
.comp-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.comp-name{font-size:16px;font-weight:600}
.comp-val{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}

/* tables */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--stone);
  font-weight:700;padding:0 12px 12px;border-bottom:1px solid var(--hairline-dark);user-select:none;white-space:nowrap}
/* a plain header is a label, not a control: only [data-sk] sorts */
th[data-sk],th[data-ck]{cursor:pointer}
th[data-sk]:hover,th[data-ck]:hover{color:var(--on-dark)}
th[data-sk]:focus-visible,th[data-ck]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;color:var(--on-dark)}
th .arr{opacity:.4;font-size:9px;margin-left:5px}
td{font-size:14px;padding:14px 12px;border-bottom:1px solid var(--divider-soft);vertical-align:middle}
tr.adv{cursor:pointer;transition:background .12s}
tr.adv:hover{background:rgba(255,255,255,.04)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.rank{width:34px;height:34px;border-radius:50%;background:var(--surface-deep);display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--stone)}
.rank.top{background:var(--primary);color:var(--on-primary)}
.plat{font-size:10px;font-weight:800;padding:3px 8px;border-radius:var(--r-sm);letter-spacing:.05em}
.plat-ig{background:rgba(230,30,73,.18);color:#ff7d99} .plat-tt{background:rgba(0,123,194,.2);color:#5ab6e8}
.avs-pill{font-family:'SF Mono',Menlo,monospace;font-size:13px;font-weight:700;padding:4px 10px;
  border-radius:var(--r-full);background:rgba(255,255,255,.07)}

/* charts */
svg{display:block;overflow:visible}
.tip{position:fixed;background:var(--canvas-light);color:var(--ink);border-radius:var(--r-md);
  padding:10px 13px;font-size:12.5px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:100;
  line-height:1.5;max-width:230px}
.tip b{display:block;font-size:13px;margin-bottom:3px}
.legend{display:flex;gap:var(--s-lg);flex-wrap:wrap;margin-top:var(--s-md)}
.legend span{font-size:12px;color:var(--on-dark-mute);display:inline-flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:3px;display:block}

/* cohort grid */
.cohort td{padding:9px 8px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;border:none}
.cohort td.lbl{text-align:left;color:var(--on-dark-mute);font-size:13px;white-space:nowrap}
.cell{border-radius:var(--r-sm);padding:9px 6px;font-weight:600}

/* alert */
.alert{border-radius:var(--r-lg);padding:var(--s-xl);display:flex;gap:var(--s-lg);align-items:flex-start;
  background:rgba(236,126,0,.10);border:1px solid rgba(236,126,0,.32)}
.alert .ico{width:34px;height:34px;border-radius:50%;background:var(--warning);color:#1a1000;
  display:grid;place-items:center;font-weight:800;flex:none;font-size:16px}

/* submissions */
.subs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-lg)}
.sub-card{background:var(--surface-elevated);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.15s}
.sub-card:hover{background:#1c1e21}
.thumb{aspect-ratio:4/5;position:relative;display:grid;place-items:center}
.thumb .pl{position:absolute;top:12px;left:12px}
/* the badge sits on a dark image scrim in both themes, so it sets its own
   colour rather than inheriting body text, which is near-black in light mode */
.thumb .vw{position:absolute;bottom:12px;left:12px;font-size:12px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.55);padding:4px 10px;border-radius:var(--r-full);backdrop-filter:blur(6px)}
.sub-meta{padding:14px 16px}

/* drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;background:var(--surface-elevated);
  border-left:1px solid var(--hairline-dark);padding:var(--s-xxl);overflow-y:auto;z-index:80;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.drawer.on{transform:translateX(0)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;opacity:0;pointer-events:none;transition:opacity .28s}
.scrim.on{opacity:1;pointer-events:auto}
.x{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:15px}
.x:hover{background:rgba(255,255,255,.16)}

/* view switching */
.view{display:none} .view.on{display:block}
.foot{border-top:1px solid var(--hairline-dark);margin-top:var(--s-block);padding:var(--s-xxl) 0;
  display:flex;justify-content:space-between;gap:var(--s-lg);flex-wrap:wrap;font-size:13px;color:var(--stone)}

@media(max-width:1180px){
  .g5{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(2,1fr)}
  .g-2-1,.g-1-2{grid-template-columns:1fr} .subs{grid-template-columns:repeat(3,1fr)}
}
/* the nav runs out of room here: tighten it rather than let the page scroll sideways.
   The sample-data notice still stands in the footer. */
@media(max-width:1500px){
  .nav{gap:var(--s-md);padding:0 var(--s-lg)}
  .nav-links{margin-left:var(--s-sm)}
  .nav-link{padding:8px 10px;font-size:13.5px}
  .nav-right{gap:var(--s-sm)}
}
@media(max-width:820px){
  .nav-links{display:none} .g5,.g4,.g3,.g2{grid-template-columns:1fr}
  .subs{grid-template-columns:repeat(2,1fr)} .d-lg{font-size:34px} .drawer{width:100%}
  .score .val{font-size:44px}
}

/* ---------- brand marks ----------
   white, transparent-background PNGs so a mark reads on any dark surface  */
.blogo{flex:none;display:block;object-fit:contain;opacity:.94}
.brand-h1{display:flex;align-items:center;gap:16px}
.h1-logo{width:40px;height:40px}
@media(max-width:820px){.h1-logo{width:30px;height:30px}.brand-h1{gap:12px}}

/* ---------- brand switcher ---------- */
/* the aggregate pill reads as a selection like any other, just held apart */
.pill-all{font-weight:650;margin-right:2px}
.pill-more{color:var(--primary);border-color:rgba(251,164,211,.34);font-weight:650}
.pill-more:hover{color:var(--primary);border-color:var(--primary);background:rgba(251,164,211,.10)}
/* the cohort row matching the campaign picked in the rail */
tr.row-on td{background:rgba(251,164,211,.09)}
tr.row-on td:first-child{box-shadow:inset 3px 0 0 var(--primary)}

.brand-switch{position:relative}
.brand-pill{cursor:pointer;transition:background .15s}
.brand-pill:hover{background:#1c1e21}
.brand-pill .chev{transition:transform .18s}
.brand-switch.open .brand-pill .chev{transform:rotate(180deg)}
.brand-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:326px;background:var(--surface-elevated);
  border:1px solid var(--hairline-dark);border-radius:var(--r-lg);padding:8px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.brand-switch.open .brand-menu{opacity:1;visibility:visible;transform:translateY(0)}
.brand-menu .hdr{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--stone);padding:10px 12px 8px}
.brand-item{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);
  text-align:left;transition:background .12s}
.brand-item:hover{background:rgba(255,255,255,.06)}
.brand-item.on{background:rgba(251,164,211,.13)}
.brand-item .bi-logo{width:30px;height:30px}
.brand-item .bi-txt,.brand-new .bi-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.brand-item .bi-name,.brand-new .bi-name{font-size:14.5px;font-weight:650;line-height:1.25;
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.brand-item .bi-live{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.brand-item .bi-cat,.brand-new .bi-cat{font-size:11.5px;color:var(--on-dark-mute);line-height:1.3;white-space:nowrap}
.brand-item .bi-fol{font-size:11px;color:var(--stone);line-height:1.3;white-space:nowrap}
.brand-item .bi-chs{margin-left:auto;text-align:right;flex:none;padding-left:14px}
.brand-item .bi-chs b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.brand-item .bi-chs span{display:block;font-size:9px;color:var(--stone);letter-spacing:.08em;text-transform:uppercase}
.brand-menu .ftr{border-top:1px solid var(--divider-soft);margin-top:6px;padding:11px 12px 6px;
  font-size:11px;color:var(--stone)}

/* ---------- internal-only surfaces ----------
   Method, formulas, constants and data provenance are IP.
   Hidden unless the workspace is switched to Internal view. */
body:not(.internal-on) .internal{display:none !important}
.internal{position:relative;border-left:2px solid rgba(236,126,0,.5);
  padding-left:14px;margin-top:12px;background:rgba(236,126,0,.045);
  border-radius:0 10px 10px 0;padding:12px 14px 12px 14px}
.int-tag{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--warning);
  background:rgba(236,126,0,.16);padding:2px 8px;border-radius:4px;margin-bottom:9px}
body:not(.internal-on) .internal-inline{display:none !important}
.viewmode{display:flex;align-items:center;gap:0;background:var(--surface-elevated);
  border-radius:var(--r-full);padding:3px}
.viewmode button{font-size:12px;font-weight:600;padding:6px 13px;border-radius:var(--r-full);
  color:var(--on-dark-mute);transition:.15s;white-space:nowrap}
.viewmode button.on{background:var(--canvas-light);color:var(--canvas-dark)}
.viewmode button.on.int{background:var(--warning);color:#1a1000}

/* ============================================================
   MICROINTERACTIONS
   Every chart builds from zero. Driven by an .in class added on
   the frame after render, so the browser has a start state to
   transition from. Fully disabled under reduced-motion.
   ============================================================ */
:root{ --ease-out:cubic-bezier(.22,1,.36,1); --dur:.72s; }

/* bars grow from their own baseline */
.anim-bar{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;
  transition:transform var(--dur) var(--ease-out)}
.anim-bar.in{transform:scaleY(1)}

/* html bars (launch window, breadth) */
.anim-vbar{transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--dur) var(--ease-out)}
.anim-vbar.in{transform:scaleY(1)}

/* strokes draw themselves */
.anim-draw{transition:stroke-dashoffset var(--dur) var(--ease-out)}

/* donut / gauge arcs sweep out */
.anim-arc{transition:stroke-dasharray .82s var(--ease-out)}

/* meters fill from zero */
.meter i{width:0;transition:width var(--dur) var(--ease-out)}

/* areas + dots fade up */
.anim-fade{opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s var(--ease-out)}
.anim-fade.in{opacity:1;transform:none}

/* heatmap cells bloom with a stagger */
.anim-cell{opacity:0;transform:scale(.55);transform-box:fill-box;transform-origin:center;
  transition:opacity .34s ease,transform .34s var(--ease-out)}
.anim-cell.in{opacity:1;transform:scale(1)}

/* table + list rows */
.anim-row{opacity:0;transform:translateY(7px);
  transition:opacity .38s ease,transform .38s var(--ease-out)}
.anim-row.in{opacity:1;transform:none}

/* cards settle in on brand switch */
.anim-card{opacity:0;transform:translateY(10px);
  transition:opacity .42s ease,transform .42s var(--ease-out)}
.anim-card.in{opacity:1;transform:none}

/* the brand name itself acknowledges the switch */
@keyframes brandIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.brand-swap{animation:brandIn .5s var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  .anim-bar,.anim-vbar,.anim-draw,.anim-arc,.anim-fade,.anim-cell,.anim-row,.anim-card,.meter i{
    transition:none !important;transform:none !important;opacity:1 !important;
    stroke-dashoffset:0 !important}
  .brand-swap{animation:none}
}

/* ---------- boot loader ---------- */
#boot{position:fixed;inset:0;z-index:999;background:var(--canvas-dark);
  display:grid;place-items:center;transition:opacity .55s ease,visibility .55s}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
/* Safari draws its own transport control over an inline video and will not be
   told not to, and it also refuses to play video it treats as off-screen - so
   hiding the video to escape the control is what stopped it playing.

   Both are solved by stacking rather than hiding. The video stays at full size
   in the viewport, so playback is allowed; the canvas sits in the same grid
   cell on top of it, opaque, so what you see is the painted frame and the
   control is behind it. Neither element takes pointer events, so every click
   reaches the skip layer. */
/* The stage carries the clip's aspect ratio so both layers are the same box
   from the first painted frame. Left to their defaults the canvas is 2:1 and
   the video 16:9, and the strip of video below the canvas is exactly where a
   transport control sits. */
#bootstage{display:grid;width:min(46vw,420px);aspect-ratio:16 / 9;line-height:0}
#bootstage > *{grid-area:1/1;width:100%;height:100%;display:block;
  object-fit:contain;pointer-events:none}
#bootcanvas{z-index:2;background:#000}
#bootskip{position:absolute;bottom:38px;left:0;right:0;text-align:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  opacity:0;transition:opacity .5s ease .9s}
#boot.ready #bootskip{opacity:1}
body.booting{overflow:hidden}
@media (prefers-reduced-motion:reduce){#boot{display:none}}

/* ---------- period selectors in the campaign rail ---------- */
.sel{position:relative;z-index:1}
.sel.open{z-index:61}
.sel-btn{display:flex;align-items:center;gap:9px;background:var(--surface-elevated);
  border:1px solid var(--hairline-dark);border-radius:var(--r-full);padding:9px 14px 9px 16px;
  font-size:13px;font-weight:600;color:var(--on-dark);white-space:nowrap;transition:.15s;cursor:pointer}
.sel-btn:hover{border-color:var(--wash-30)}
.sel.open .sel-btn{border-color:var(--primary)}
.sel-btn .lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-weight:700}
.sel-btn .chev{color:var(--stone);font-size:10px;transition:transform .18s}
.sel.open .sel-btn .chev{transform:rotate(180deg)}
.sel-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;max-height:290px;overflow-y:auto;
  background:var(--surface-elevated);border:1px solid var(--hairline-dark);border-radius:var(--r-md);
  padding:6px;z-index:60;box-shadow:0 18px 40px -12px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .15s,transform .15s,visibility .15s}
.sel.open .sel-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sel-opt{width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  font-size:13px;text-align:left;color:var(--on-dark-mute);transition:background .12s}
.sel-opt:hover{background:var(--wash-05);color:var(--on-dark)}
.sel-opt.on{background:rgba(251,164,211,.14);color:var(--on-dark);font-weight:600}
.sel-opt .n{margin-left:auto;font-size:11px;color:var(--stone);font-variant-numeric:tabular-nums}
.rail-div{width:1px;align-self:stretch;background:var(--hairline-dark);margin:0 4px}
.rail-empty{font-size:13px;color:var(--stone);align-self:center;padding:0 4px}

/* ---------- layout: equal-height cards, no dead space ----------
   Every card in a row is the same height. To stop a shorter card being
   padded out with emptiness, each card is a flex column and its main
   content block carries `.grow`, which absorbs the slack instead. */
.grid{align-items:stretch}
.card{display:flex;flex-direction:column}
.grow{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.grow.mid{justify-content:center}
.grow.scroll{display:block}
/* a stretched wrapper holding cards passes its height down to them */
.stack{display:flex;flex-direction:column;gap:16px}
.stack > .card{flex:1 1 auto}
/* last row in a stacked list should not carry a divider */
.card .rowlist > div:last-child,
.decomp .row:last-child{border-bottom:none !important}

/* ---------- export dialog ---------- */
.modal-back{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:24px}
.modal-back.on{display:flex}
.modal{width:min(660px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface-elevated);border:1px solid var(--hairline-dark);border-radius:var(--r-lg)}
.modal-head{display:flex;align-items:flex-start;gap:16px;padding:22px 24px 16px;
  border-bottom:1px solid var(--divider-soft)}
.modal-x{margin-left:auto;color:var(--stone);font-size:15px;line-height:1;padding:6px 8px;border-radius:8px}
.modal-x:hover{color:var(--on-dark);background:var(--wash-07)}
.modal-body{padding:20px 24px;overflow-y:auto}
.modal-foot{display:flex;align-items:center;gap:10px;padding:16px 24px 20px;
  border-top:1px solid var(--divider-soft)}
.modal-foot .btn{flex:none}
.modal-foot .b-sm{flex:1;min-width:0}
.lock-modal{width:min(440px,100%)}
.lock-modal form{display:contents}
.lock-err{margin:10px 0 0;color:var(--danger)}
.seg{display:inline-flex;gap:4px;background:var(--surface-deep);border-radius:var(--r-full);padding:4px;margin-top:10px}
.seg button{font-size:13px;font-weight:600;padding:7px 16px;border-radius:var(--r-full);color:var(--on-dark-mute)}
.seg button.on{background:var(--canvas-light);color:var(--canvas-dark)}
.exp-pages{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.exp-row{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-radius:var(--r-md);
  border:1px solid var(--hairline-dark);cursor:pointer;transition:background .12s,border-color .12s}
.exp-row:hover{background:rgba(255,255,255,.04)}
.exp-row.on{border-color:rgba(251,164,211,.45);background:rgba(251,164,211,.08)}
.exp-row.locked{opacity:.72;cursor:default}
.exp-box{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--stone);flex:none;margin-top:1px;
  display:grid;place-items:center;font-size:10px;color:transparent}
.exp-row.on .exp-box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.exp-row b{font-size:13px;font-weight:600;display:block}
.exp-row span{font-size:11px;color:var(--stone);display:block;margin-top:3px;line-height:1.35}
.exp-pick{margin-top:14px}
.exp-pick .pill{margin:0 6px 6px 0}
.exp-pick{max-height:186px;overflow-y:auto}
.exp-note{font-size:12px;color:var(--stone);margin-top:12px;line-height:1.5}
@media(max-width:640px){.exp-pages{grid-template-columns:1fr}}

/* ---------- global search ---------- */
.searchbtn{margin-left:auto;margin-right:var(--s-md);
  display:flex;align-items:center;gap:10px;width:340px;max-width:32vw;
  background:var(--surface-elevated);border:1px solid var(--hairline-dark);border-radius:var(--r-full);
  padding:8px 12px 8px 14px;color:var(--stone);font-size:13px;
  transition:border-color .15s,color .15s}
.searchbtn > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchbtn kbd{margin-left:auto}
.searchbtn:hover{color:var(--on-dark);border-color:var(--wash-26)}
.searchbtn kbd,.search-field kbd,.search-foot kbd{font:inherit;font-size:10.5px;color:var(--stone);
  background:var(--surface-deep);border:1px solid var(--hairline-dark);border-radius:5px;padding:2px 6px;line-height:1.4}
@media(max-width:1400px){.searchbtn{width:250px}}
@media(max-width:1180px){.searchbtn span,.searchbtn kbd{display:none}
  .searchbtn{width:auto;padding:8px 10px}}

.search-back{align-items:flex-start;padding-top:11vh}
.searchbox{width:min(660px,100%);max-height:74vh;display:flex;flex-direction:column;
  background:var(--surface-elevated);border:1px solid var(--hairline-dark);border-radius:var(--r-lg);overflow:hidden}
.search-field{display:flex;align-items:center;gap:11px;padding:16px 18px;color:var(--stone);
  border-bottom:1px solid var(--divider-soft)}
.search-field input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--on-dark);
  font:inherit;font-size:15px}
.search-field input::placeholder{color:var(--stone)}
.search-results{overflow-y:auto;padding:8px}
.search-results .sec-lbl{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--stone);padding:10px 10px 7px}
.sres{width:100%;display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:var(--r-md);
  text-align:left;transition:background .1s}
.sres:hover,.sres.cur{background:rgba(255,255,255,.07)}
.sres.cur{outline:1px solid rgba(251,164,211,.4)}
.sres .blogo{width:26px;height:26px}
.sres .s-main{flex:1;min-width:0}
.sres .s-name{font-size:14px;font-weight:600;line-height:1.3;display:flex;align-items:center;gap:7px}
.sres .s-sub{font-size:11.5px;color:var(--stone);line-height:1.35;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres .s-mets{flex:none;display:flex;gap:16px;text-align:right}
.sres .s-met b{display:block;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.sres .s-met span{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--stone);margin-top:2px}
.sres .s-live{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.search-empty{padding:26px 12px;text-align:center;color:var(--stone);font-size:13px}
.search-foot{display:flex;align-items:center;gap:16px;padding:11px 18px;
  border-top:1px solid var(--divider-soft);font-size:11px;color:var(--stone)}
.search-foot span:last-child{margin-left:auto}
@media(max-width:640px){.sres .s-mets{display:none}}

/* ---------- section rhythm ----------
   Spacing is structural rather than dependent on remembering the .sec class:
   every block after the first gets the section gap, the first gets none.
   A wrapper whose children are all internal-only would otherwise collapse to
   zero height while still contributing its margin, leaving a phantom gap. */
.view > * + *{margin-top:var(--s-xxl)}
.view > *:first-child{margin-top:0}
body:not(.internal-on) .view > .internal{margin-top:0}

/* ---------- initiative types ---------- */
.itype{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:3px;white-space:nowrap;display:inline-block;
  background:rgba(255,255,255,.09);color:var(--on-dark-mute)}
/* every type badge opens the Campaign vs Challenge explainer */
.itype{cursor:pointer}
.itype:hover,.itype:focus-visible{outline:1px solid var(--hairline-dark);outline-offset:1px}
table.thelp{width:100%;border-collapse:collapse;font-size:13px}
table.thelp th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stone);font-weight:500;padding:0 12px 9px 0;border-bottom:1px solid var(--hairline-dark)}
table.thelp td{padding:10px 12px 10px 0;border-bottom:1px solid var(--divider-soft);vertical-align:top}
table.thelp tr.on td{background:var(--surface-elevated)}

.itype.prompted{background:rgba(251,164,211,.15);color:var(--primary)}
.pill .itype{margin-left:8px;vertical-align:1px}
/* a selected pill inverts its surface, so the badge has to invert with it or it
   ends up the same colour as the pill it is sitting on */
.pill.on .itype{background:var(--on-invert-wash);color:var(--on-invert)}
.pill.on .itype.prompted{background:var(--itype-on-wash);color:var(--itype-on-ink)}
.split{display:flex;gap:2px;height:7px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.07)}
.split i{display:block;height:100%}
.split .a{background:var(--primary)}
.split .p{background:rgba(255,255,255,.26)}

/* ============================================================
   STUDIO
   The making half. Built on the same tokens as everything else so
   both themes follow without a second palette. Three states of one
   surface: .studio-state.on is the one showing.
   ============================================================ */
.studio-state{display:none}
.studio-state.on{display:block}

/* ---- the brief: one committed recommendation, not a menu of ideas ---- */
.studio-brief{padding:var(--s-xxl)}
.studio-brief-top{display:flex;gap:var(--s-xxl);align-items:flex-start;justify-content:space-between}
.studio-proj{text-align:right;flex:0 0 auto;padding-left:var(--s-xl);
  border-left:1px solid rgba(26,4,16,.16)}
.studio-proj-n{font-size:56px;font-weight:500;line-height:1;letter-spacing:-1.6px;
  margin-top:10px;font-variant-numeric:tabular-nums}
.studio-proj-n.dark{color:var(--on-dark);font-size:44px;letter-spacing:-1.2px}
.studio-brief-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl);
  margin-top:var(--s-xxl);padding-top:var(--s-xl);border-top:1px solid rgba(26,4,16,.16)}
.studio-fact-v{font-size:20px;font-weight:600;margin-top:7px;letter-spacing:-.2px}
.studio-brief-cta{display:flex;align-items:center;gap:var(--s-lg);margin-top:var(--s-xxl);flex-wrap:wrap}
/* Buttons that sit on the pink featured card. That card is --primary in both
   themes, so its contents must NOT use theme-flipping ink: --chart-ink on this
   surface renders dark-on-dark in light mode. These two are the sanctioned pair. */
.btn-on-primary{background:var(--on-primary);color:var(--primary-bright)}
.btn-on-primary:hover{background:#2d0a1d}
.btn-on-primary-soft{background:rgba(26,4,16,.10);color:var(--on-primary)}
.btn-on-primary-soft:hover{background:rgba(26,4,16,.17)}

/* ---- the pipeline ---- */
.studio-list{padding:var(--s-xs) var(--s-xl)}
.studio-row{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.15fr) 120px 46px;
  align-items:center;gap:var(--s-lg);width:100%;text-align:left;
  padding:var(--s-lg) 0;border-bottom:1px solid var(--divider-soft);transition:.15s}
.studio-row:last-child{border-bottom:none}
.studio-row:hover{background:var(--wash-05)}
.studio-row:hover .studio-row-name{color:var(--primary)}
.studio-row-name{font-size:15px;font-weight:600;color:var(--on-dark);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
.studio-row-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-row-meter{height:6px;border-radius:var(--r-full);background:var(--wash-09);overflow:hidden}
.studio-row-meter i{display:block;height:100%;border-radius:var(--r-full);background:var(--wash-30)}
.studio-row-meter i.lit{background:var(--primary)}
.studio-row-pct{font-size:13px;color:var(--stone);text-align:right;font-variant-numeric:tabular-nums}
.studio-row-stage{display:inline-flex;align-items:center;gap:6px;justify-self:start;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-full);white-space:nowrap}
.st-draft{background:var(--wash-09);color:var(--stone)}
.st-ready{background:rgba(0,168,126,.16);color:#2ec39b}
.st-sched{background:rgba(251,164,211,.16);color:var(--primary)}
.st-live {background:rgba(0,168,126,.16);color:#2ec39b}
.st-miss {background:rgba(226,59,74,.16);color:#f0707c}
.st-live .live{width:6px;height:6px;border-radius:50%;background:#2ec39b;display:inline-block}
.studio-empty{padding:var(--s-xxl)}

/* ---- build: header and step rail ---- */
.studio-head{display:flex;align-items:flex-start;gap:var(--s-xl);margin-bottom:var(--s-xxl)}
.studio-back{font-size:13px;font-weight:600;color:var(--stone);padding:9px 16px;
  border:1px solid var(--hairline-dark);border-radius:var(--r-full);
  white-space:nowrap;margin-top:4px;transition:.15s}
.studio-back:hover{color:var(--on-dark);border-color:var(--wash-30)}
.studio-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-sm);margin-bottom:var(--s-xl)}
.sstep{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 18px;
  border:1px solid var(--hairline-dark);border-radius:var(--r-md);transition:.15s}
.sstep:hover{border-color:var(--wash-30)}
.sstep-n{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--wash-09);color:var(--stone)}
.sstep-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sstep-t b{font-size:14px;font-weight:600;color:var(--on-dark)}
.sstep-t em{font-style:normal;font-size:12px;color:var(--stone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sstep.on{border-color:var(--primary);background:rgba(251,164,211,.07)}
.sstep.on .sstep-n{background:var(--primary);color:var(--on-primary)}
.sstep.done .sstep-n{background:rgba(0,168,126,.2);color:#2ec39b}

/* ---- build: the form ---- */
.studio-form{padding:var(--s-xxl)}
.sgrid{margin-bottom:var(--s-xl)}
.sfield{margin-bottom:var(--s-xl)}
.sgrid .sfield{margin-bottom:0}
.sfield-l{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  color:var(--on-dark);margin-bottom:9px}
.pf{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-primary);background:var(--primary);padding:2px 7px;border-radius:4px}
.sfield-src{font-size:12.5px;color:var(--stone);margin-top:8px;line-height:1.45}
.sinput{width:100%;background:var(--wash-05);color:var(--on-dark);
  border:1px solid var(--hairline-dark);border-radius:var(--r-sm);
  padding:12px 14px;font-size:14px;font-family:inherit;transition:.15s}
.sinput::placeholder{color:var(--ash)}
.sinput:hover{border-color:var(--wash-18)}
.sinput:focus{outline:none;border-color:var(--primary);background:var(--wash-07);
  box-shadow:0 0 0 3px rgba(251,164,211,.18)}
.sarea{resize:vertical;line-height:1.55}
.spick{display:flex;gap:6px;flex-wrap:wrap}
.spick-b{font-size:13px;font-weight:600;color:var(--on-dark-mute);padding:9px 15px;
  border:1px solid var(--hairline-dark);border-radius:var(--r-full);transition:.15s}
.spick-b:hover{color:var(--on-dark);border-color:var(--wash-30)}
.spick-b.on{background:var(--canvas-light);color:var(--canvas-dark);border-color:var(--canvas-light)}

/* ---- build: projection band and checklist ---- */
.studio-band{display:flex;justify-content:space-between;margin-top:9px;
  font-size:12px;color:var(--stone);font-variant-numeric:tabular-nums}
.studio-checks{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.scheck{display:flex;align-items:center;gap:11px;color:var(--stone)}
.scheck i{flex:0 0 17px;height:17px;border-radius:50%;border:1.5px solid var(--wash-22);
  display:grid;place-items:center}
.scheck.ok{color:var(--on-dark)}
.scheck.ok i{background:rgba(0,168,126,.22);border-color:transparent}
.scheck.ok i::after{content:"";width:8px;height:4.5px;border-left:1.5px solid #2ec39b;
  border-bottom:1.5px solid #2ec39b;transform:rotate(-45deg) translate(1px,-1px)}

/* ---- build: footer ---- */
.studio-foot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-lg);margin-top:var(--s-xl);flex-wrap:wrap}
.studio-foot-r{display:flex;align-items:center;gap:var(--s-lg)}
/* a disabled button has to look disabled wherever it appears, not only in
   Studio's footer: onboarding's Continue was dimmed nowhere and read as live */
.btn:disabled{opacity:.34;cursor:not-allowed}
.studio-foot .btn:disabled{opacity:.34;cursor:not-allowed}

/* keyboard focus on every studio control, not just the inputs */
.studio-row:focus-visible,.sstep:focus-visible,.spick-b:focus-visible,
.studio-back:focus-visible,.btn-on-primary:focus-visible,.btn-on-primary-soft:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px}

/* light theme: the washes invert with the tokens, these do not */
:root[data-theme="light"] .btn-on-primary{background:var(--on-primary);color:var(--primary-bright)}
:root[data-theme="light"] .btn-on-primary-soft{background:rgba(26,4,16,.10);color:var(--on-primary)}
:root[data-theme="light"] .st-ready,:root[data-theme="light"] .st-live{color:#0a7d61}
:root[data-theme="light"] .st-miss{color:#c22334}
:root[data-theme="light"] .studio-row-meter i.lit{background:var(--primary-deep)}
:root[data-theme="light"] .sinput{background:#fff}
:root[data-theme="light"] .sinput:focus{background:#fff}

@media(max-width:1080px){
  .studio-brief-top{flex-direction:column;gap:var(--s-xl)}
  .studio-proj{text-align:left;padding-left:0;border-left:none;
    border-top:1px solid rgba(26,4,16,.16);padding-top:var(--s-lg);width:100%}
  .studio-steps{grid-template-columns:1fr}
  .studio-row{grid-template-columns:88px minmax(0,1fr) 90px 42px}
  .studio-row-note{display:none}
}
@media(max-width:820px){
  .studio-brief-facts{grid-template-columns:1fr;gap:var(--s-lg)}
  .studio-proj-n{font-size:44px}
  .sgrid{grid-template-columns:1fr;gap:var(--s-xl)}
  .sgrid .sfield{margin-bottom:0}
  .studio-head{flex-direction:column;gap:var(--s-lg)}
}

/* the projection sits where it actually falls in the band, not at the midpoint */
.studio-bandtrack{position:relative;height:8px;border-radius:var(--r-full);
  background:linear-gradient(90deg,rgba(251,164,211,.18),rgba(251,164,211,.42),rgba(251,164,211,.18))}
.studio-bandtrack b{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;
  background:var(--primary);transform:translateX(-1.5px)}
.studio-band{margin-top:10px}

/* the second door sits below the brief as its own pill, so it reads as an
   alternative to the recommendation rather than a second action inside it */
.studio-alt-row{display:flex;align-items:center;gap:var(--s-lg);flex-wrap:wrap;
  margin-top:var(--s-lg)}
.pill-cta{display:inline-flex;align-items:center;gap:9px;
  border-color:var(--wash-26);color:var(--on-dark);font-weight:600;padding:11px 20px}
.pill-cta:hover{border-color:var(--primary);color:var(--primary);background:rgba(251,164,211,.08)}
.pill-cta .pill-plus{font-size:17px;line-height:1;font-weight:400}

/* what just happened, said once */
.studio-flash{display:flex;align-items:center;gap:11px;margin-bottom:var(--s-lg);
  padding:13px 18px;border-radius:var(--r-full);font-size:14px;
  background:rgba(0,168,126,.12);color:#2ec39b}
.studio-flash .tick{font-weight:700}

/* a required field says so, quietly, until it is filled */
.reqd{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--warning);background:rgba(236,126,0,.14);padding:2px 7px;border-radius:4px;
  margin-left:2px}
.studio-need{color:var(--warning)}
.studio-foot-l{display:flex;gap:var(--s-sm);align-items:center;flex-wrap:wrap}
.studio-danger:hover{border-color:var(--danger);color:var(--danger)}
.btn.armed{border-color:var(--danger);color:var(--danger);background:rgba(226,59,74,.08)}
/* a read-only field is data, not an input, so it should not look editable */
.sinput[readonly]{cursor:default;background:var(--wash-05);border-style:dashed}
.sinput[readonly]:hover{border-color:var(--hairline-dark)}

/* the app's .sel dropdown, sized for a form row rather than the filter rail */
.sel.sfd{display:block;width:100%}
.sel.sfd .sel-btn{width:100%;justify-content:space-between;background:var(--wash-05);
  border:1px solid var(--hairline-dark);border-radius:var(--r-sm);
  padding:12px 14px;font-size:14px;font-weight:400;color:var(--on-dark)}
.sel.sfd .sel-btn:hover{border-color:var(--wash-18)}
.sel.sfd.open .sel-btn{border-color:var(--primary)}
.sel.sfd .sel-btn:focus-visible{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(251,164,211,.18)}
.sel.sfd .sel-menu{left:0;right:0;min-width:0}
.sel.sfd .sel-opt{white-space:normal}

/* ---------- paging ----------
   Neither the creator table nor the gallery renders whole: a brand can have
   hundreds of creators and thousands of posts. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s-lg);
  flex-wrap:wrap;margin-top:var(--s-lg);padding-top:var(--s-lg);
  border-top:1px solid var(--divider-soft)}
.pager-count{font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums}
.pager-ctrl{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pager-n{min-width:32px;height:32px;padding:0 9px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;color:var(--on-dark-mute);
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;transition:.15s}
.pager-n:hover:not(:disabled){background:var(--wash-07);color:var(--on-dark)}
.pager-n.on{background:var(--canvas-light);color:var(--canvas-dark)}
.pager-n:disabled{opacity:.3;cursor:not-allowed}
.pager-n:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pager-gap{color:var(--stone);padding:0 2px}

/* search inside a card header */
.tbl-search{align-self:center;background:var(--wash-05);border:1px solid var(--hairline-dark);
  border-radius:var(--r-full);padding:8px 15px;font:inherit;font-size:13px;
  color:var(--on-dark);min-width:210px;margin-left:var(--s-lg);transition:.15s}
.tbl-search::placeholder{color:var(--ash)}
.tbl-search:hover{border-color:var(--wash-18)}
.tbl-search:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(251,164,211,.18)}
.tbl-search::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}
.tbl-empty{padding:34px 12px;text-align:center;color:var(--stone);font-size:14px}
@media(max-width:820px){.tbl-search{margin-left:0;width:100%;min-width:0}}

/* ---------- schedule ----------
   Every cell is shaded by --heat, the participation grid for that day and hour,
   so a booking is always read against whether anyone is awake for it. */
.sch-nav{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap}
.sch-nav-label{display:flex;flex-direction:column;line-height:1.25;min-width:190px}
.sch-nav-label b{font-size:16px;font-weight:600}
.sch-nav-label em{font-style:normal;font-size:12px;color:var(--stone)}

.sch-week{display:grid;grid-template-columns:62px repeat(7,minmax(0,1fr));
  gap:2px;min-width:720px}
.sch-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;min-width:720px}
#sch-grid{overflow-x:auto}

.sch-corner{}
.sch-dayhead{padding:9px 8px;text-align:center;border-radius:var(--r-sm) var(--r-sm) 0 0}
.sch-dayhead b{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone)}
.sch-dayhead em{display:block;font-style:normal;font-size:12px;color:var(--on-dark-mute);margin-top:3px}
.sch-dayhead.today b,.sch-dayhead.today em{color:var(--primary)}

.sch-hour{font-size:11px;color:var(--stone);text-align:right;padding:6px 10px 0 0;
  font-variant-numeric:tabular-nums}
/* One ramp for the week grid, the month grid and the legend swatches. They used
   to be 34%, 20% and a legend copied from Rhythm that ran to solid pink, so the
   key described a colour no cell could reach. Derive all three from here. */
:root{ --sch-heat-max:32%; }
.sch-heat{background:color-mix(in srgb, var(--primary) calc(var(--heat) * var(--sch-heat-max)), var(--wash-05))}
.sch-cell{min-height:30px;border-radius:5px;padding:3px;
  background:color-mix(in srgb, var(--primary) calc(var(--heat) * var(--sch-heat-max)), var(--wash-05));
  display:flex;flex-direction:column;gap:2px}
.sch-cell.today{box-shadow:inset 0 0 0 1px rgba(251,164,211,.35)}

.sch-mcell{min-height:104px;border-radius:var(--r-sm);padding:8px;
  background:color-mix(in srgb, var(--primary) calc(var(--heat) * var(--sch-heat-max)), var(--wash-05));
  display:flex;flex-direction:column;gap:3px}
.sch-mcell.out{opacity:.4}
.sch-mcell.today{box-shadow:inset 0 0 0 1.5px var(--primary)}
.sch-mday{font-size:12px;font-weight:600;color:var(--on-dark-mute);margin-bottom:2px;
  font-variant-numeric:tabular-nums}
.sch-mcell.today .sch-mday{color:var(--primary)}
.sch-more{font-size:10.5px;color:var(--stone);padding-left:2px}

.sch-chip{display:flex;align-items:center;gap:5px;width:100%;text-align:left;
  padding:3px 7px;border-radius:4px;border:none;font:inherit;font-size:11px;font-weight:600;
  background:var(--surface-elevated);color:var(--on-dark);cursor:pointer;
  overflow:hidden;transition:.15s}
.sch-chip:hover{background:var(--canvas-light);color:var(--canvas-dark)}
.sch-chip:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.sch-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sch-chip-time{font-size:10px;color:var(--stone);font-variant-numeric:tabular-nums}
.sch-chip:hover .sch-chip-time{color:var(--canvas-dark);opacity:.7}
.sch-dot{flex:0 0 6px;height:6px;border-radius:50%;background:var(--primary)}
.sch-chip.live .sch-dot{background:var(--teal)}
.sch-chip.close .sch-dot{background:var(--warning)}
.sch-chip.done .sch-dot{background:var(--stone)}

/* the two queues */
.sch-row{display:grid;grid-template-columns:88px minmax(0,1fr) 92px 88px;align-items:center;
  gap:var(--s-md);width:100%;text-align:left;padding:12px 0;
  border-bottom:1px solid var(--divider-soft);transition:.15s}
.sch-row:last-child{border-bottom:none}
.sch-row:hover{background:var(--wash-05)}
.sch-row:hover .sch-row-name{color:var(--primary)}
.sch-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sch-row-when{display:flex;flex-direction:column;line-height:1.3}
.sch-row-when b{font-size:14px;font-weight:600}
.sch-row-when em{font-style:normal;font-size:11.5px;color:var(--stone);
  font-variant-numeric:tabular-nums}
.sch-row-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;transition:color .15s}
.sch-row-kind{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-full);justify-self:start;white-space:nowrap;
  background:rgba(251,164,211,.16);color:var(--primary)}
.sch-row-kind.live{background:rgba(0,168,126,.16);color:#2ec39b}
.sch-row-kind.close{background:rgba(236,126,0,.16);color:var(--warning)}
.sch-row-kind.done{background:var(--wash-09);color:var(--stone)}
.sch-row-rel{text-align:right}

@media(max-width:900px){
  .sch-row{grid-template-columns:80px minmax(0,1fr) 84px}
  .sch-row-rel{display:none}
}

/* ---------- settings ----------
   Reached from the avatar. Every control here is live; the theme and view-mode
   switches stay in the header too, because this is a demo shown on someone
   else's screen and two clicks deep is too far for those two. */
/* .wrap has no top padding: every view gets its top space from .subhead, and
   settings hides that, so it has to supply the same 32px itself */
#v-settings{padding-top:var(--s-xxl)}
.set-head{display:flex;align-items:flex-start;gap:var(--s-xl);margin-bottom:var(--s-xxl)}
.set-rows{margin-top:var(--s-lg)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-xxl);
  padding:18px 0;border-bottom:1px solid var(--divider-soft);flex-wrap:wrap}
.set-row:last-child{border-bottom:none}
.set-row-text{flex:1 1 320px;min-width:0}
.set-label{font-size:15px;font-weight:600}
.set-desc{margin-top:6px;max-width:62ch}
.set-ctrl{flex:0 0 auto}
.set-static{font-size:13px;color:var(--stone)}
.set-seg button{white-space:nowrap}

.set-you{display:flex;gap:var(--s-xl);align-items:flex-start;margin-top:var(--s-lg)}
.set-avatar{width:64px;height:64px;font-size:20px;flex:0 0 auto}
.set-you-fields{flex:1;min-width:0}
.set-you-fields .set-row{padding:11px 0}
.set-you-fields .set-ctrl{flex:1 1 260px}
.set-you-fields .sinput{min-width:240px}

.set-conns{margin-top:var(--s-lg)}
.set-conn{display:flex;align-items:center;gap:var(--s-lg);padding:14px 0;
  border-bottom:1px solid var(--divider-soft)}
.set-conn:last-child{border-bottom:none}
.set-conn-name{flex:1;font-size:15px;font-weight:600;display:flex;flex-direction:column;gap:3px}
.set-conn-name em{font-style:normal;font-size:12px;font-weight:400;color:var(--stone)}
.set-conn-plats{display:flex;gap:var(--s-sm);flex-wrap:wrap}
.set-plat{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--stone);
  border:1px solid var(--hairline-dark);border-radius:var(--r-full);padding:5px 12px}
.set-plat i{width:6px;height:6px;border-radius:50%;background:var(--wash-26)}
.set-plat.on{color:var(--on-dark)}
.set-plat.on i{background:var(--teal)}

button.avatar{border:none;font:inherit;cursor:pointer;transition:.15s}
button.avatar:hover{filter:brightness(1.08)}
button.avatar:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

@media(max-width:820px){
  .set-row{gap:var(--s-lg)}
  .set-you{flex-direction:column}
  .set-head{flex-direction:column;gap:var(--s-lg)}
}

/* ---------- connect an account ----------
   The status pill is the control: connected shows Disconnect on hover,
   disconnected shows Connect. */
button.set-plat{cursor:pointer;font:inherit;background:transparent;transition:.15s}
button.set-plat:hover{border-color:var(--wash-30);color:var(--on-dark)}
button.set-plat.on:hover{border-color:var(--danger);color:var(--danger)}
button.set-plat.on:hover i{background:var(--danger)}
button.set-plat:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.set-plat-act{display:none;font-weight:600}
button.set-plat:hover .set-plat-name{display:none}
button.set-plat:hover .set-plat-act{display:inline}

.conn-scopes{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.conn-scope{display:flex;gap:12px;align-items:flex-start}
.conn-scope-t{font-size:14.5px;font-weight:600}
.conn-scope p{margin-top:5px;max-width:62ch}
.conn-tick{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,168,126,.18);color:#2ec39b;font-size:11px;font-weight:700;margin-top:2px}

.conn-never,.conn-loss{margin-top:22px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--wash-05);border:1px solid var(--hairline-dark)}
.conn-loss-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);margin-bottom:12px}
.conn-loss-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;
  font-size:13.5px;color:var(--on-dark-mute)}
.conn-loss-row i{flex:0 0 6px;height:6px;border-radius:50%;background:var(--warning);margin-top:7px}
.conn-loss-row i.no{background:var(--danger)}
.conn-loss-row i.ok{background:var(--teal)}

.conn-accounts{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.conn-account{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:13px 16px;border:1px solid var(--hairline-dark);border-radius:var(--r-md);
  background:transparent;color:inherit;font:inherit;cursor:pointer;transition:.15s}
.conn-account:hover{border-color:var(--wash-30)}
.conn-account.on{border-color:var(--primary);background:rgba(251,164,211,.07)}
.conn-account:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.conn-avatar{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-deep);font-size:12px;font-weight:700;color:var(--stone)}
.conn-account.on .conn-avatar{background:var(--primary);color:var(--on-primary)}
.conn-acct-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.conn-acct-t b{font-size:14.5px;font-weight:600}
.conn-acct-t em{font-style:normal;font-size:12px;color:var(--stone)}
.conn-radio{flex:0 0 18px;height:18px;border-radius:50%;border:1.5px solid var(--wash-26)}
.conn-account.on .conn-radio{border-color:var(--primary);background:var(--primary);
  box-shadow:inset 0 0 0 4px var(--surface-elevated)}

.conn-done{display:flex;gap:16px;align-items:flex-start;margin-top:6px}
.conn-done-tick{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,168,126,.18);color:#2ec39b;font-size:20px;font-weight:700}

/* ============================================================
   THE PEOPLE — Community view
   One row per person: who they are, the numbers behind them, and the
   posts they made. Hover changes the border rather than the fill, so it
   reads the same in both themes.
   ============================================================ */
.ppl-row{display:grid;gap:20px;align-items:center;
  grid-template-columns:44px minmax(150px,1fr) minmax(230px,1.2fr) auto;
  background:var(--surface-elevated);border:1px solid transparent;
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:10px;
  cursor:pointer;transition:border-color .15s}
.ppl-row:hover{border-color:var(--wash-30)}
.ppl-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
:root[data-theme="light"] .ppl-row{border-color:var(--hairline-dark)}
:root[data-theme="light"] .ppl-row:hover{border-color:var(--primary)}
.ppl-av{width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em}
.ppl-who{min-width:0}
.ppl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ppl-num{font-size:14px;margin-top:5px}
.ppl-posts{display:flex;gap:8px;justify-self:end}
.ppl-thumb{width:52px;height:64px;border-radius:var(--r-sm);position:relative;
  overflow:hidden;cursor:pointer;flex:none;transition:transform .15s}
.ppl-thumb:hover{transform:translateY(-2px)}
.ppl-thumb:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ppl-thumb .plat{position:absolute;top:5px;left:5px;transform:scale(.8);transform-origin:top left}
.ppl-thumb-v{position:absolute;bottom:5px;left:6px;font-size:10px;font-weight:700;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.ppl-noposts{align-self:center;max-width:180px;text-align:right}
@media(max-width:1240px){
  .ppl-row{grid-template-columns:44px minmax(140px,1fr) auto;row-gap:14px}
  .ppl-stats{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
  .ppl-posts{justify-self:end}
}
@media(max-width:820px){
  .ppl-row{grid-template-columns:44px 1fr}
  .ppl-posts{grid-column:1/-1;justify-self:start}
  .ppl-noposts{text-align:left}
}

/* a hairline between two groups of filter pills in one sec-head */
.ctl-div{width:1px;align-self:stretch;background:var(--hairline-dark);margin:0 4px}

/* Rhythm: target location and launch date sit under the segment pills */
.rhy-ctrls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.rhy-ctrl{display:flex;flex-direction:column;gap:7px;min-width:0}
.rhy-ctrl .sinput{padding:10px 12px;font-size:13.5px}
.sselect{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--stone) 50%),
                   linear-gradient(135deg,var(--stone) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sselect option{background:var(--surface-elevated);color:var(--on-dark)}
@media(max-width:520px){.rhy-ctrls{grid-template-columns:1fr}}

/* the tile wall now appears on Content as well, where light mode showed a
   near-black hover on a white card */
:root[data-theme="light"] .sub-card:hover{background:var(--surface-deep)}

/* ============================================================
   PROVENANCE CHIPS — measured / declared / inferred
   Client-visible, unlike the internal tagsrc tags: the class of a
   figure is the reader's question, not only ours.
   ============================================================ */
.hcard-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hcard-top .eyebrow{margin:0}
.pv{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-full);white-space:nowrap;cursor:help;
  border:1px solid transparent;line-height:1.5}
.pv:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pv-m{background:rgba(0,168,126,.18);color:#4fd6ab}
.pv-d{background:rgba(0,123,194,.20);color:#74bdf0}
.pv-i{background:rgba(176,144,0,.22);color:#e0c25a}
:root[data-theme="light"] .pv-m{background:rgba(0,168,126,.14);color:#046b52;border-color:rgba(0,168,126,.30)}
:root[data-theme="light"] .pv-d{background:rgba(0,123,194,.12);color:#0a5b8e;border-color:rgba(0,123,194,.28)}
:root[data-theme="light"] .pv-i{background:rgba(176,144,0,.16);color:#6d5800;border-color:rgba(176,144,0,.32)}

.pv-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:var(--s-xxl);padding:16px 18px;border-radius:var(--r-lg);
  border:1px solid var(--hairline-dark);background:var(--wash-05)}
.pv-leg{display:flex;align-items:center;gap:9px;min-width:0}
.pv-leg .b-sm{max-width:340px}
@media(max-width:900px){.pv-legend{flex-direction:column;align-items:flex-start;gap:12px}}

/* the reference index in Settings */
.prov-table{width:100%;border-collapse:collapse;min-width:640px}
.prov-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone);padding:0 14px 12px 0;
  border-bottom:1px solid var(--hairline-dark)}
.prov-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--divider-soft);
  vertical-align:top}
.prov-table td:nth-child(2){white-space:nowrap}
.prov-table td.lbl{font-weight:600;font-size:14px;white-space:nowrap}

/* ============================================================
   RHYTHM HERO — the planner's one answer surface
   With a date set it stops saying "here is the best slot" and starts
   answering "here is how yours rates", so the control and the verdict
   are no longer two cards apart.
   ============================================================ */
.plan-when{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(26,4,16,.62);margin-bottom:8px}
.plan-fig{font-size:52px;font-weight:500;letter-spacing:-1.6px;line-height:1.05}
.plan-lede{margin-top:12px;font-size:16px;color:rgba(26,4,16,.82);max-width:540px}
.plan-verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;
  padding:16px 0;border-top:1px solid rgba(26,4,16,.16);border-bottom:1px solid rgba(26,4,16,.16)}
.plan-verdict > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.plan-verdict .cap{color:rgba(26,4,16,.62);font-size:12px}
.plan-verdict b{font-size:26px;font-weight:500;letter-spacing:-.6px;line-height:1.1}
.plan-hint{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;
  padding:14px 16px;border-radius:var(--r-md);background:rgba(26,4,16,.09);
  font-size:14px;line-height:1.5;color:rgba(26,4,16,.82)}
.plan-hint > span{flex:1;min-width:230px}
@media(max-width:760px){.plan-verdict{grid-template-columns:1fr;gap:16px}}

/* ============================================================
   SIGNAL FUNNEL — Community view
   Three stages read left to right. The bars carry the rate, not the
   absolute count: reach and participants are three orders of magnitude
   apart, so a to-scale bar for the last stage would be a hairline.
   ============================================================ */
.funnel{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0 18px;align-items:stretch}
.funnel-stage{background:var(--surface-elevated);border:1px solid var(--hairline-dark);
  border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:6px}
.funnel-stage.locked{opacity:.62}
.funnel-stage.locked .funnel-n{color:var(--stone)}
.funnel-stage.locked .funnel-bar{border:1px dashed var(--hairline-dark);background:transparent}
.funnel-stage.locked .funnel-bar i{background:transparent!important}

.funnel-n{font-size:38px;font-weight:500;letter-spacing:-1.2px;line-height:1.05;margin-top:4px}
.funnel-bar{height:8px;border-radius:var(--r-full);background:var(--wash-07);
  overflow:hidden;margin-top:14px}
.funnel-bar i{display:block;height:100%;width:0;border-radius:var(--r-full);
  transition:width .85s var(--ease-out)}
.funnel-step{margin-top:10px}
.funnel-arrow{align-self:center;font-size:22px;color:var(--stone);line-height:1}
.funnel-note{margin-top:22px;padding:18px 20px;border-radius:var(--r-lg);
  border:1px solid var(--hairline-dark);background:var(--wash-05)}
@media(max-width:980px){
  .funnel{grid-template-columns:1fr;gap:12px}
  .funnel-arrow{transform:rotate(90deg);justify-self:center}
}

/* ============================================================
   SECTION HEADER TOOLS
   A search box and a pill group used to be two separate children of
   .sec-head: the search hugged the title with its own margin while the
   pills flew right on margin-left:auto, leaving a void between them.
   They are one right-aligned cluster now.
   ============================================================ */
.sec-tools{margin-left:auto;align-self:center;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;justify-content:flex-end}
.sec-tools .tbl-search{margin-left:0;align-self:auto}
.sec-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:900px){
  .sec-head{flex-wrap:wrap}
  .sec-tools{margin-left:0;width:100%;justify-content:flex-start}
  .sec-tools .tbl-search{flex:1;min-width:0}
}

/* ============================================================
   ONBOARDING — first run, over everything
   ============================================================ */
body.onb-open{overflow:hidden}
.onb{position:fixed;inset:0;z-index:200;background:var(--canvas-dark);
  display:grid;place-items:center;padding:var(--s-xl);overflow-y:auto}
.onb[hidden]{display:none!important}
.onb-panel{width:100%;max-width:920px;background:var(--surface-elevated);
  border:1px solid var(--hairline-dark);border-radius:var(--r-xl);
  padding:var(--s-xxl);display:flex;flex-direction:column;gap:var(--s-xl);margin:auto}
.onb-head{display:flex;align-items:center;gap:var(--s-lg)}
.onb-steps{display:flex;gap:7px;margin-left:auto}
.onb-dot{width:7px;height:7px;border-radius:var(--r-full);background:var(--wash-18)}
.onb-dot.done{background:var(--wash-30)}
.onb-dot.on{background:var(--primary);width:22px}
.onb-skip{background:none;border:0;color:var(--stone);font:inherit;font-size:13px;
  cursor:pointer;padding:4px 2px}
.onb-skip:hover{color:var(--on-dark)}
.onb-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--primary)}
.onb-h1{font-size:34px;font-weight:500;letter-spacing:-1.1px;line-height:1.15;
  margin-top:12px;max-width:20ch}
.onb-panel .onb-h1:first-child{margin-top:0}
.onb-lede{margin-top:14px;font-size:15px;line-height:1.6;color:var(--on-dark-mute);max-width:62ch}

.onb-choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg);margin-top:var(--s-xxl)}
.onb-choice{text-align:left;background:var(--wash-05);border:1px solid var(--hairline-dark);
  border-radius:var(--r-lg);padding:22px;color:inherit;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:9px;transition:border-color .15s}
.onb-choice:hover{border-color:var(--primary)}
.onb-choice:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.onb-choice-t{font-size:19px;font-weight:600;letter-spacing:-.3px}
.onb-choice p{font-size:13.5px;line-height:1.55;color:var(--on-dark-mute);margin:0}
.onb-choice-cta{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:600;color:var(--primary)}

.onb-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg);margin-top:var(--s-xxl)}
.onb-card{text-align:left;background:transparent;border:1px solid var(--hairline-dark);
  border-radius:var(--r-lg);padding:20px;color:inherit;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:9px;transition:.15s}
.onb-card:hover{border-color:var(--wash-30)}
.onb-card.on{border-color:var(--primary);background:rgba(251,164,211,.07)}
.onb-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.onb-card-t{font-size:18px;font-weight:600;letter-spacing:-.3px}
.onb-card p{font-size:13.5px;line-height:1.55;color:var(--on-dark-mute);margin:0}

.onb-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg);margin-top:var(--s-xl)}
.onb-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.onb-summary{margin-top:var(--s-xl);border-top:1px solid var(--divider-soft)}

.onb-foot{display:flex;align-items:center;gap:10px;padding-top:var(--s-lg);
  border-top:1px solid var(--divider-soft)}
.onb-foot .btn:last-child{margin-left:auto}
.onb-foot .btn-outline+.btn-primary{margin-left:auto}

@media(max-width:760px){
  .onb-panel{padding:var(--s-xl)}
  .onb-h1{font-size:26px}
  .onb-choices,.onb-cards,.onb-form{grid-template-columns:1fr}
}

/* starting a new workspace lives with switching between them */
.brand-new{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 12px;border-radius:var(--r-md);background:transparent;color:inherit;
  font:inherit;cursor:pointer;border:0;margin-top:4px;transition:background .15s}
.brand-new:hover{background:var(--wash-05)}
.brand-new:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.brand-new-ico{flex:none;width:32px;height:32px;border-radius:var(--r-full);
  display:grid;place-items:center;font-size:17px;font-weight:500;line-height:1;
  background:var(--wash-07);color:var(--primary)}

/* ---------- what to do next, on every headline metric ----------
   A number a client cannot act on is a number they did not need. Sits at the
   foot of the card, after the reading, so the card still runs
   category -> question -> number -> composition -> what it means -> what to do. */
.hact{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--divider-soft)}
/* on a third-width card the text and the button together squeeze the reading
   into a five-line ribbon, so the button drops below instead */
.hact-t{flex:1;min-width:280px;font-size:13px;line-height:1.5;color:var(--on-dark-mute)}
/* margin-left:auto keeps the action at the trailing edge in both cases: beside the
   reading on a wide card, and on its own line when the row wraps on a narrow one.
   Without it a wrapped button starts its new line at the left, so two cards in a
   row put the action bottom-right and two put it bottom-left. */
.hact-b{flex:none;white-space:nowrap;margin-left:auto}
.hact-none{flex:none;margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--stone);padding:7px 0}
.hcard.open .hact{border-top-color:var(--hairline-dark)}


/* the slot the rail moves into on Community */
.funnel-filter{margin-top:2px;padding-bottom:20px;border-bottom:1px solid var(--divider-soft)}
.funnel-filter:empty{display:none}
.rail.rail-inset{margin:0;padding:0}

/* the "beat the last one" comparison at the top of the build flow */
.imp-card{margin-bottom:var(--s-lg);border:1px solid var(--hairline-dark)}
.imp-rows{margin-top:18px;display:flex;flex-direction:column}
.imp-row{display:grid;grid-template-columns:1fr auto;gap:24px;padding:18px 0;
  border-top:1px solid var(--divider-soft);align-items:start;transition:opacity .15s}
/* direct child only: the prose underneath uses <b> for its figures, and a
   descendant selector turned every one of them into a 15px block */
.imp-row.on .imp-lever > b{color:var(--primary)}
.imp-lever > b{font-size:15px;font-weight:600;display:block;letter-spacing:-.2px}
.imp-why b{font-weight:600}
.imp-why{font-size:13px;line-height:1.6;color:var(--on-dark-mute);margin-top:7px;max-width:66ch}
.imp-kind{display:inline-block;margin-top:10px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--stone)}
.imp-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:130px}
.imp-done{font-size:11.5px;color:var(--teal);text-align:right;line-height:1.4}
.imp-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--hairline-dark)}
.imp-foot .btn:nth-of-type(1){margin-left:auto}
@media(max-width:860px){
  .imp-row{grid-template-columns:1fr;gap:12px}
  .imp-act{align-items:flex-start}
  .imp-foot .btn:nth-of-type(1){margin-left:0}
}
.imp-row.auto .imp-lever > b{color:var(--teal)}

/* draft from a sentence, at the top of step 1 */
.draft-card{margin-bottom:var(--s-lg);border:1px solid var(--hairline-dark)}
.draft-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.draft-input{flex:1;min-width:260px;border-radius:var(--r-full);padding:13px 20px}
.draft-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--divider-soft);
  display:flex;flex-direction:column;gap:9px}
.draft-note > div{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.draft-note b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);min-width:210px}
.draft-note span{font-size:13px;color:var(--on-dark-mute)}
@media(max-width:700px){.draft-note b{min-width:0;display:block}}
.draft-ground{margin:14px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px}
.draft-ground li{font-size:13px;line-height:1.55;color:var(--on-dark-mute)}
.draft-ground b{color:var(--on-dark);font-weight:600}

/* the info icon: nothing at rest, everything on demand */
.eyebrow{display:flex;align-items:center;gap:7px}
.infoi{width:15px;height:15px;flex:none;border-radius:50%;border:1px solid currentColor;
  background:transparent;color:inherit;opacity:.6;font-family:inherit;font-size:9.5px;font-weight:700;
  line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;
  text-transform:none;letter-spacing:0;transition:opacity .15s}
.infoi:hover,.infoi:focus-visible{opacity:1}
#scores .lbl{display:flex;align-items:center;gap:7px}
.qlist{margin-top:20px;display:flex;flex-direction:column;gap:18px}
.qk{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.qv{margin:7px 0 0}

/* one line saying what the workspace is for; the nav says where you are, this says why */
.sh-sub{margin:10px 0 0;font-size:14.5px;color:var(--stone);max-width:52ch}

/* first-run walkthrough: a spotlight on the real element, not a modal over a blur */
.wt{position:fixed;inset:0;z-index:190;pointer-events:none}
.wt-spot{position:fixed;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.72);outline:2px solid var(--primary);outline-offset:0;
  transition:top .22s cubic-bezier(.2,.8,.2,1),left .22s cubic-bezier(.2,.8,.2,1),
             width .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1)}
.wt-pop{position:fixed;width:min(360px,calc(100vw - 24px));pointer-events:auto;
  background:var(--surface-elevated);border:1px solid var(--hairline-dark);border-radius:12px;
  padding:18px 18px 15px;box-shadow:0 18px 50px rgba(0,0,0,.5);
  transition:top .22s cubic-bezier(.2,.8,.2,1),left .22s cubic-bezier(.2,.8,.2,1)}
.wt-n{font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone)}
.wt-q{font-size:17px;font-weight:600;letter-spacing:-.2px;margin-top:6px}
.wt-b{font-size:13.5px;line-height:1.55;color:var(--stone);margin:9px 0 0}
.wt-foot{display:flex;align-items:center;margin-top:16px;gap:10px}
.wt-nav{display:flex;gap:8px;margin-left:auto}
.wt-skip{background:none;border:0;color:var(--stone);font:inherit;font-size:13px;cursor:pointer;padding:4px 2px}
.wt-skip:hover{color:var(--text)}
body.wt-on{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .wt-spot,.wt-pop{transition:none} }

/* dormant, split: still posting elsewhere vs stopped altogether */
.dgroup + .dgroup{margin-top:22px}
.dgroup-h{display:block;font-weight:600}
.dgroup-n{margin:6px 0 4px;max-width:62ch}

/* creator scorecard: live figures and the ones naming what they wait on */
.sc{margin-top:24px;border:1px solid var(--hairline-dark);border-radius:10px;overflow:hidden}
.sc-h{display:flex;align-items:baseline;gap:10px;padding:12px 15px;border-bottom:1px solid var(--hairline-dark);
  background:var(--surface-deep)}
.sc-n{margin-left:auto;font-size:11px;color:var(--stone)}
.sc-row{display:flex;align-items:flex-start;gap:14px;padding:12px 15px;border-bottom:1px solid var(--divider-soft)}
.sc-row:last-of-type{border-bottom:0}
.sc-row.wait{opacity:.72}
.sc-k{flex:1;font-size:13.5px;font-weight:600;display:flex;flex-direction:column;gap:3px}
.sc-note{font-weight:400;font-size:11.5px;line-height:1.45;color:var(--stone)}
.sc-v{flex:none;text-align:right;font-size:15px;padding-top:1px}
.sc-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;background:rgba(236,126,0,.14);color:var(--warning,#ec7e00);white-space:nowrap}
.sc-foot{padding:13px 15px 15px;margin:0;border-top:1px solid var(--hairline-dark)}

/* what you already have, against what connecting adds */
.conn-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
.conn-half{border:1px solid var(--hairline-dark);border-radius:9px;padding:13px 14px}
.conn-half.add{border-color:rgba(251,164,211,.35);background:rgba(251,164,211,.06)}
.conn-half-h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--stone);margin-bottom:7px}
.conn-half.add .conn-half-h{color:var(--primary)}
@media (max-width:640px){ .conn-split{grid-template-columns:1fr} }

/* business results: formula, value, and what each is waiting on */
.biz-grid{display:flex;flex-direction:column;margin-top:6px}
.biz-row{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(170px,1.5fr) 70px minmax(150px,1.3fr);
  gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--divider-soft)}
.biz-row:last-child{border-bottom:0}
.biz-name{font-size:14px;font-weight:600}
.biz-formula{font-size:12px;color:var(--stone)}
.biz-val{font-size:13px;color:var(--stone)}
.biz-needs{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.biz-conv{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--stone)}
.biz-conv select{background:var(--surface-elevated);color:inherit;border:1px solid var(--hairline-dark);
  border-radius:6px;padding:5px 8px;font:inherit;font-size:12.5px}
@media (max-width:760px){
  .biz-row{grid-template-columns:1fr auto;row-gap:5px}
  .biz-formula{grid-column:1/-1}
  .biz-needs{grid-column:1/-1;justify-content:flex-start}
}

/* amplification resting on partial view counts */
.cov-warn{margin-top:10px;font-size:12px;line-height:1.45;color:var(--warning);max-width:36ch}

/* provenance index: where a figure is collected from */
.route-tag{display:inline-block;font-size:11px;white-space:nowrap;padding:3px 7px;border-radius:4px;
  border:1px solid var(--hairline-dark);color:var(--stone)}

/* ---- report branding ------------------------------------------------------
   Set in Settings, confirmed in the export dialog. The preview is drawn on white
   because that is the page the agency's logo has to work on. ---------------- */
.exp-brand{margin-top:22px;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--hairline-dark);
  font-size:13px;line-height:1.5;color:var(--stone)}
.exp-brand b{color:var(--on-dark);font-weight:600}
.lnk{color:var(--primary);font:inherit;font-weight:600;padding:0;margin-left:4px;text-decoration:underline;text-underline-offset:3px}
.set-brand-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:6px}
@media(max-width:900px){.set-brand-grid{grid-template-columns:1fr}}
.wl-logo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wl-logo label.btn{cursor:pointer}
.wl-thumb{display:flex;align-items:center;height:44px;padding:0 12px;border-radius:var(--r-sm);background:#fff}
.wl-thumb img{height:24px;width:auto;max-width:120px;object-fit:contain}
#brandPrev{margin-top:18px}
.bp-page{background:#fff;border-radius:10px;padding:16px 18px 12px;color:#14161A;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.bp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(20,22,26,.14)}
.bp-lead{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;min-width:0}
.bp-lead span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-al{height:18px;width:auto;max-width:90px;object-fit:contain}
.bp-bl{height:12px;width:auto}
.bp-sub{font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:#7C838D;font-weight:600;white-space:nowrap}
.bp-body{padding:16px 0 18px;display:flex;flex-direction:column;gap:8px}
.bp-body i{display:block;height:7px;border-radius:4px;background:#ECEEF0}
.bp-body i:first-child{height:12px;background:#D9DCE0}
.bp-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:9px;border-top:1px solid rgba(20,22,26,.12);font-size:8px;color:#9AA0A8}
.bp-foot span:last-child{text-align:right}
.bp-credit{display:flex;align-items:center;gap:5px}
.bp-credit img{height:8px;width:auto}
.bp-cap{margin:10px 0 0}