/* ============================================================
   Company briefing — editorial layout per Paper artboard 01
   (Cadry.ai · "01 · Company Briefing", node 45-0).
   ============================================================ */

.b-wrap{ max-width:1160px; margin:0 auto; padding:0 40px 60px; }

/* ---- Masthead: eyebrow + plain-ink headline, caps-mono meta block with the
   Regenerate action beneath it. ---- */
.b-masthead{
  padding:28px 0; border-bottom:2px solid var(--ink);
  display:flex; align-items:flex-end; justify-content:space-between; gap:48px;
}
.b-masthead .b-title-group{ flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
.b-masthead .b-eyebrow{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.16em; font-weight:500;
  line-height:14px; margin:0;
}
.b-masthead h1{
  font-family:var(--serif); font-weight:500; font-size:54px; line-height:1.12;
  letter-spacing:-0.02em; margin:0; color:var(--ink); max-width:760px; text-wrap:balance;
}
/* Emphasis in the AI headline reads as editorial italics — plain ink, never accent. */
.b-masthead h1 em{ font-style:italic; color:inherit; font-weight:500; }
.b-mast-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  padding-bottom:6px; flex-shrink:0;
}
.b-meta-line{
  font-family:var(--mono); font-size:11px; line-height:14px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.14em; text-align:right;
}
.b-mast-actions{ display:flex; gap:8px; margin-top:2px; }
/* Masthead action buttons: artboard geometry (30px / radius 7 / 12.5px) on the
   base .btn. */
.btn.b-regen{ height:30px; border-radius:7px; padding:0 12px; font-size:12.5px; gap:7px; color:var(--ink); }

/* ---- Narrative lede: prose column + 340px Top metrics card ---- */
.b-lede{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px;
  padding:36px 0 44px; align-items:start;
}
@media (max-width:900px){ .b-lede{ grid-template-columns:1fr; } }
.b-lede .b-body{ display:flex; flex-direction:column; gap:18px; }
.b-lede .b-body p{ font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--ink); margin:0; text-wrap:pretty; }
.b-lede .b-body p b{ font-weight:500; color:var(--ink); }
/* "Written by Cadry…" note row — replaces the old caps byline. */
.b-note{ display:flex; align-items:center; gap:10px; padding-top:6px; }
.b-note-ic{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--rule-2);
  display:inline-flex; align-items:center; justify-content:center; color:var(--accent);
}
.b-note > span:last-child{ font-family:var(--sans); font-size:12.5px; line-height:16px; color:var(--ink-3); }

/* ---- Top metrics — the compact white card (read / manage / picker live inside
   <turbo-frame id="top_metrics">, which carries the card chrome). ---- */
#top_metrics{
  display:flex; flex-direction:column; min-height:0;
  background:var(--surface); border:1px solid var(--rule-2);
  border-radius:12px; overflow:clip;
}
.b-stats-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--rule); flex-shrink:0;
}
.b-stats-title{ font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); line-height:18px; }
.b-stats-tools{ display:flex; align-items:center; gap:12px; }
.b-stats-tools .tm-count{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.tm-link{ font-family:var(--sans); font-size:12px; font-weight:500; color:var(--accent-ink); text-decoration:none; cursor:pointer; transition:color .12s ease; }
.tm-link:hover{ color:var(--accent); }
.tm-link.strong{ color:var(--accent-ink); font-weight:600; }

/* Compact rows: dot · name over caps locus · right value + delta. */
.b-stats{ display:flex; flex-direction:column; }
.b-stat{
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--rule);
}
.b-stat:last-child{ border-bottom:none; }
.b-s-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--ink-5); transition:opacity .14s ease; }
.b-s-dot.ok{ background:var(--ok); }
.b-s-dot.warn{ background:var(--warn); }
.b-s-dot.bad{ background:var(--bad); }
.b-s-dot.neutral{ background:var(--ink-4); }
.b-stat .b-s-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.b-stat .b-s-label{ font-family:var(--sans); font-size:13px; font-weight:500; line-height:16px; color:var(--ink); }
.b-stat .b-s-sub{
  font-family:var(--mono); font-size:10.5px; line-height:14px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.08em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.b-stat .b-s-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; text-align:right; }
.b-stat .b-s-val{
  font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:-0.02em;
  line-height:18px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.b-stat .b-s-meta .d{ font-family:var(--mono); font-size:10.5px; line-height:14px; font-weight:500; }
.b-stat .b-s-meta .d.bad{ color:var(--bad-ink); }
.b-stat .b-s-meta .d.ok{ color:var(--ok-ink); }
.b-stat .b-s-meta .d.warn{ color:var(--warn-ink); }
.b-stat .b-s-meta .d.neutral{ color:var(--ink-4); }
/* Linked rows deep-link to the metric page. Keep the row typography intact
   (children own their colors), strip the anchor defaults, quiet hover tint. */
a.b-stat{ text-decoration:none; color:inherit; cursor:pointer; transition:background .12s ease, box-shadow .12s ease; }
a.b-stat:hover{ background:var(--hover); }
a.b-stat:hover .b-s-label{ color:var(--accent-ink); }
a.b-stat:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ---- Insights cross-highlight (insights_controller.js) ----
   .is-lit is the shared "this metric, here and there" state: an Insights row
   lights its lede mentions, a mention lights its row. Same accent family on
   both ends so the eye pairs them instantly.

   Pure CSS animation: the controller toggles .is-lit and stamps each mention's
   reading-order index into --lit-i; the lit rule turns that into a
   transition-delay, so mentions sweep across the prose in order. The base rule
   carries no delay, so clearing is always immediate and interruptible —
   re-hovering mid-fade never stutters. */
.b-stat.is-lit{
  background:oklch(0.96 0.015 var(--accent-h));
  box-shadow:inset 2px 0 0 var(--accent);
}
.b-stat.is-lit .b-s-label{ color:var(--accent-ink); }
.b-body mark.b-mention{
  background-color:transparent; color:inherit;
  box-shadow:0 0 0 0 transparent;
  border-bottom:1px dotted var(--accent-edge);
  padding:0 1px; border-radius:4px; cursor:default;
  /* Wrapped mentions: each line fragment gets its own rounded highlight box. */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-color .14s ease-out, color .14s ease-out, box-shadow .14s ease-out, border-color .14s ease-out;
  transition-delay:0ms;
}
.b-body mark.b-mention.is-lit{
  background-color:var(--accent-soft); color:var(--accent-ink);
  border-bottom-color:transparent;
  /* The spread shadow grows the highlight ~3px past the glyphs in the same
     color as the fill — breathing room without padding, so the prose never
     reflows on hover. */
  box-shadow:0 0 0 3px var(--accent-soft);
  transition-duration:.2s;
  transition-delay:calc(var(--lit-i, 0) * 50ms);
}
.b-body mark.b-mention:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
@media (prefers-reduced-motion: reduce){
  .b-body mark.b-mention,
  .b-body mark.b-mention.is-lit{ transition-duration:0ms; transition-delay:0ms; }
}

/* Read rows live in a wrapper that hosts the quick pin/unpin overlay (the
   button can't nest inside the row's anchor). The wrapper owns last-child
   border trimming since the anchor is no longer the list's direct child. */
.b-stat-wrap{ position:relative; }
.b-stat-wrap:last-child .b-stat{ border-bottom:none; }
.b-stat-wrap .b-stat{ border-bottom:1px solid var(--rule); }

/* Pinned-row glyph beside the label. */
.tm-pin-ic{ display:inline-block; color:var(--accent-ink); vertical-align:-1px; margin-left:2px; }

/* Cadry-picked rows: the AI's one-line "why" replaces the caps locus. */
.b-s-sub.tm-why{
  font-family:var(--sans); font-size:11px; font-style:italic;
  text-transform:none; letter-spacing:0; color:var(--ink-3);
  display:flex; align-items:center; gap:5px;
}
.b-s-sub.tm-why svg{ flex-shrink:0; color:var(--ink-4); }
/* The flex layout swallows the parent's ellipsis — re-apply it on the text. */
.b-s-sub.tm-why span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Card foot whisper: how the unpinned slots behave / the all-pinned state. */
.tm-foot{
  display:flex; align-items:center; gap:7px; padding:11px 18px; flex-shrink:0;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; font-weight:500; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:0.05em;
}
.tm-foot svg{ flex-shrink:0; }
.tm-foot.pinned{ color:var(--accent-ink); background:oklch(0.97 0.01 var(--accent-h)); }

/* Read-only viewers: a Realtime broadcast repaints the card with editor
   affordances on (a shared payload can't know who's watching), and the
   per-request data-can-edit flag on .b-wrap (company/show) turns them off.
   Writes are independently rejected server-side (require_data_editor). */
[data-can-edit="false"] #top_metrics .tm-quickpin-form,
[data-can-edit="false"] #top_metrics .b-stats-tools .tm-link,
[data-can-edit="false"] #top_metrics .tm-empty-cta{ display:none; }

/* Quick pin/unpin: revealed over the status-dot lane on row hover. */
.tm-quickpin-form{ position:absolute; left:10px; top:50%; transform:translateY(-50%); display:flex; }
.tm-quickpin{
  position:relative; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-2); border-radius:7px; background:var(--surface); color:var(--ink-3);
  cursor:pointer; opacity:0; box-shadow:var(--shadow-1);
  transition:opacity .14s ease, border-color .12s ease, color .12s ease, scale .1s ease;
}
.tm-quickpin::after{ content:""; position:absolute; inset:-7px; } /* hit area */
.b-stat-wrap:hover .tm-quickpin, .tm-quickpin:focus-visible{ opacity:1; }
.b-stat-wrap:hover .b-s-dot{ opacity:0; }
.tm-quickpin:hover{ border-color:var(--accent); color:var(--accent-ink); }
.tm-quickpin:active{ scale:0.96; }
.tm-quickpin.is-pinned{ color:var(--accent-ink); }

/* ---- "THE WEEK IN FOUR NUMBERS" — computed hero cards ---- */
.b-hero4{ border-top:1px solid var(--rule-2); }
.b-hero4-label{
  padding:20px 0 16px;
  font-family:var(--mono); font-size:11px; line-height:14px; font-weight:500;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:0.16em;
}
.b-hero4-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
@media (max-width:980px){ .b-hero4-row{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .b-hero4-row{ grid-template-columns:1fr; } }
.hs-card{
  background:var(--surface); border:1px solid var(--rule-2); border-radius:12px;
  padding:20px 22px; display:flex; flex-direction:column; gap:8px; min-width:0;
}
.hs-head{ display:flex; align-items:center; gap:8px; }
.hs-label{
  flex:1; min-width:0; font-family:var(--mono); font-size:10.5px; line-height:14px;
  font-weight:500; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.12em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hs-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--ink-5); }
.hs-dot.ok{ background:var(--ok); }
.hs-dot.warn{ background:var(--warn); }
.hs-dot.bad{ background:var(--bad); }
.hs-val{
  font-family:var(--mono); font-size:32px; line-height:40px; font-weight:500;
  letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.hs-note{ font-family:var(--mono); font-size:11.5px; line-height:14px; font-weight:500; color:var(--ink-3); }
.hs-note.ok{ color:var(--ok-ink); }
.hs-note.warn{ color:var(--warn-ink); }
.hs-note.bad{ color:var(--bad-ink); }
.hs-note.neutral{ color:var(--ink-4); }
.hs-spark{ height:30px; margin-top:2px; }
.hs-spark svg{ display:block; max-width:100%; }

/* ---- Section head (serif h2 + caps kicker) ---- */
.b-section-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:44px 0 16px; border-bottom:1px solid var(--rule-2);
}
.b-section-h h2{
  margin:0; font-family:var(--serif); font-size:24px; line-height:30px;
  font-weight:500; letter-spacing:-0.01em; color:var(--ink);
}
.b-section-h .h-kicker{
  font-family:var(--mono); font-size:11px; line-height:14px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.14em;
}

/* ---- Around the teams: 2×2 bordered white cards ---- */
.team-articles{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; padding-top:24px; }
@media (max-width:820px){ .team-articles{ grid-template-columns:1fr; } }
.team-article{
  background:var(--surface); border:1px solid var(--rule-2); border-radius:12px;
  padding:22px 24px; display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit; cursor:pointer; min-width:0;
  transition:border-color .12s ease;
}
.team-article:hover{ border-color:var(--rule-3); }
.team-article:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.team-article .ta-top{ display:flex; align-items:center; gap:8px; }
.team-article .ta-rag{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.team-article .ta-rag.ok{ background:var(--ok); }
.team-article .ta-rag.warn{ background:var(--warn); }
.team-article .ta-rag.bad{ background:var(--bad); }
.team-article .ta-team{
  flex:1; min-width:0; font-family:var(--mono); font-size:10.5px; line-height:14px;
  font-weight:500; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.12em;
}
.team-article .ta-count{
  font-family:var(--mono); font-size:10.5px; line-height:14px; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:0.04em; flex-shrink:0;
}
.team-article h3{
  font-family:var(--serif); font-size:20px; line-height:26px; font-weight:500;
  letter-spacing:-0.01em; color:var(--ink); margin:0; text-wrap:pretty;
}
.team-article .ta-desk{ font-family:var(--sans); font-size:13.5px; line-height:20px; color:var(--ink-3); margin:0; text-wrap:pretty; }
.team-article .ta-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:4px;
}
.team-article .ta-foot .spark{ flex-shrink:0; line-height:0; }
.team-article .ta-status{
  font-family:var(--mono); font-size:10.5px; line-height:14px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.04em;
}

/* ---- This week's activity — ledger rows with right caps pills ---- */
.b-activity{ padding-top:44px; }
.b-act-h{ display:flex; align-items:baseline; gap:16px; padding-bottom:6px; }
.b-act-h h2{
  flex:1; margin:0; font-family:var(--serif); font-size:24px; line-height:30px;
  font-weight:500; letter-spacing:-0.01em; color:var(--ink);
}
.b-act-link{
  font-family:var(--sans); font-size:12.5px; line-height:16px; font-weight:500;
  color:var(--accent-ink); text-decoration:none; flex-shrink:0;
}
.b-act-link:hover{ color:var(--accent); }
.feed-item{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--rule-2);
}
.feed-item:last-child{ border-bottom:none; }
.feed-item .f-when{
  width:90px; flex-shrink:0; font-family:var(--mono); font-size:11px; line-height:14px;
  color:var(--ink-4); text-transform:uppercase;
}
.feed-item .f-avatar{ width:24px; height:24px; flex-shrink:0; }
.feed-item .f-cadry{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--surface-2); color:var(--accent);
}
.feed-item .f-txt{ flex:1; min-width:0; font-size:13.5px; line-height:18px; color:var(--ink); }
.feed-item .f-txt b{ font-weight:500; }
.feed-item .f-badge{
  display:inline-flex; align-items:center; flex-shrink:0; height:22px; padding:0 9px;
  border-radius:11px; background:var(--surface-2); color:var(--accent-ink);
  font-family:var(--mono); font-size:10px; line-height:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.04em;
}
.feed-item .f-badge.warn{ background:var(--warn-soft); color:var(--warn-ink); }
/* "Load more" pagination control for the expanded feed */
.b-act-more{ display:flex; justify-content:center; padding-top:16px; }
.b-act-more:empty{ padding:0; }
.b-act-more-btn{
  display:inline-flex; align-items:center; height:34px; padding:0 18px;
  border:1px solid var(--rule); border-radius:17px; background:var(--surface);
  font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--accent-ink);
  text-decoration:none; cursor:pointer; transition:background .12s ease, border-color .12s ease;
}
.b-act-more-btn:hover{ background:var(--surface-2); border-color:var(--rule-3); }

/* summary generating / empty banner (still used by csv_imports) */
.summary-pending{ display:flex; align-items:center; gap:12px; padding:24px 0; color:var(--ink-3); font-size:14px; }
.summary-pending .spinner{ width:16px; height:16px; border:2px solid var(--rule-2); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
.summary-pending.summary-failed{ color:var(--bad-ink); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Briefing states: printer's notices in the lede column ----------------
   The no-edition / writing / interrupted states share the lede's two-column
   geometry: an editorial notice where the prose goes, a ghost Insights card
   where the card goes. Same grid + breakpoint as .b-lede. */
.b-state{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px;
  padding:36px 0 44px; align-items:start;
}
@media (max-width:900px){ .b-state{ grid-template-columns:1fr; } }
.b-state-col{ min-width:0; display:flex; flex-direction:column; }
.b-state-head{
  display:flex; flex-direction:column; gap:14px;
  border-top:3px double var(--rule-3); padding-top:18px;
}
.b-state-head.interrupted{ border-top-color:var(--bad-edge); }
.b-state-eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-4); margin:0;
}
.b-state-eyebrow.live{ color:var(--accent-ink); }
.b-state-head.interrupted .b-state-eyebrow{ color:var(--bad-ink); }
.b-state-headline{
  font-family:var(--serif); font-size:28px; font-weight:500; line-height:34px;
  letter-spacing:-0.01em; color:var(--ink); max-width:560px; margin:0;
}
.b-state-body{
  font-family:var(--serif); font-size:16px; line-height:26px; color:var(--ink-3);
  max-width:520px; margin:10px 0 0; text-wrap:pretty;
}
.b-state-status{ display:flex; align-items:flex-start; gap:10px; padding-top:10px; max-width:560px; }
.b-state-status .spinner{
  width:15px; height:15px; margin-top:2px; flex-shrink:0;
  border:2px solid var(--rule-2); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.8s linear infinite;
}
.b-state-status span{ font-family:var(--sans); font-size:13.5px; line-height:20px; color:var(--ink-3); }
.b-state-error{
  display:flex; align-self:flex-start; max-width:100%; margin-top:16px; padding:9px 14px;
  border-left:2px solid var(--bad); border-radius:6px; background:var(--bad-soft);
}
.b-state-error span{
  font-family:var(--mono); font-size:11px; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--bad-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.b-state-actions{ display:flex; align-items:center; gap:16px; padding-top:22px; }
.b-state-hint{ font-family:var(--mono); font-size:11px; letter-spacing:0.02em; color:var(--ink-4); }
/* Blank column awaiting copy (idle + interrupted). */
.b-await{ display:flex; flex-direction:column; gap:30px; padding-top:44px; max-width:620px; }
.b-await i{ display:block; border-bottom:1px dashed var(--rule-2); }
.b-await i:last-child{ width:62%; }
/* The column typesetting itself (writing). */
.b-skeleton{ display:flex; flex-direction:column; gap:28px; padding-top:40px; max-width:620px; }
.b-skeleton .para{ display:flex; flex-direction:column; gap:12px; }
.b-skeleton i{ display:block; height:10px; border-radius:5px; background:var(--surface-2); animation:b-pulse 1.6s ease-in-out infinite; }
.b-skeleton .para i:first-child{ background:var(--surface-3); }
.b-skeleton .byline{ display:flex; align-items:center; gap:8px; padding-top:4px; }
.b-skeleton .byline .dot{ width:14px; height:14px; border-radius:50%; background:var(--surface-2); flex-shrink:0; }
@keyframes b-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .b-skeleton i{ animation:none; } }
/* Ghost Insights card — where the real card will land. */
.b-ghost-card{
  display:flex; flex-direction:column; gap:14px;
  border:1px dashed var(--rule-3); border-radius:10px; padding:16px 16px 14px;
}
.b-ghost-card.solid{ border-style:solid; border-color:var(--rule-2); }
.b-ghost-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
}
.b-ghost-head .t{ color:var(--ink-4); }
.b-ghost-head .c{ color:var(--ink-5); }
.b-ghost-row{ display:flex; align-items:center; gap:10px; }
.b-ghost-row .dot{ width:6px; height:6px; border-radius:50%; background:var(--rule-2); flex-shrink:0; }
.b-ghost-row .bar{ flex:1; height:8px; border-radius:4px; background:var(--surface-2); }
.b-ghost-row .val{ width:42px; height:8px; border-radius:4px; background:var(--surface-2); flex-shrink:0; }
.b-ghost-note{ font-family:var(--sans); font-size:11.5px; line-height:16px; color:var(--ink-4); margin:2px 0 0; }

/* ============================================================
   briefing-reader — reading-experience polish (scroll-reveal).
   ============================================================ */

/* Scroll-reveal: team articles rise + fade as they enter the viewport.
   Compositor-only (transform/opacity). Reduced-motion users never get the
   .b-reveal class (JS opts them straight to revealed), and we belt-and-brace
   it here too so the content is always legible if motion is off. */
.team-article.b-reveal{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.team-article.b-reveal.b-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .team-article.b-reveal{ opacity:1; transform:none; transition:none; }
}

/* ── Insights — pinning (manage / picker / empty) ────────────────────────────
   The Insights card is managed in place inside <turbo-frame id="top_metrics">
   (which carries the card chrome above). Manage rows reuse .b-stat; these add
   the pin controls, the pin picker, and the empty/cap states. All colors are
   existing design tokens. */

/* Manage rows: the grip leads, the unpin button trails the value. */
.tm-actform{ display:contents; }
.tm-iconbtn{ width:28px; height:28px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--rule); border-radius:7px; background:transparent; color:var(--ink-3); font-family:var(--mono); font-size:12px; line-height:1; cursor:pointer; transition:border-color .12s ease, color .12s ease, background .12s ease; }
.tm-iconbtn:hover{ border-color:var(--ink-3); color:var(--ink); }
.tm-iconbtn:disabled{ opacity:0.3; cursor:default; }
.tm-iconbtn.danger:hover{ border-color:var(--bad); color:var(--bad-ink); background:var(--bad-soft); }
.tm-iconbtn.tm-unpin{ color:var(--accent-ink); }
.tm-iconbtn.tm-unpin:hover{ border-color:var(--bad); color:var(--bad-ink); background:var(--bad-soft); }
.tm-iconbtn.tm-pin:hover{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft); }

/* Manage mode: the "Cadry fills the rest" divider + its pinnable picks. */
.tm-fill-note{
  display:flex; align-items:center; gap:7px; padding:10px 18px; flex-shrink:0;
  background:var(--bg); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; font-weight:500; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:0.05em;
}
.tm-fill-note svg{ flex-shrink:0; }
.tm-ai-list .tm-ai-row{ opacity:0.78; transition:opacity .14s ease; }
.tm-ai-list .tm-ai-row:hover{ opacity:1; }

.tm-row{ gap:10px; }
.tm-row.is-dragging{ opacity:0.45; }
.tm-grip{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:30px; margin-left:-6px; padding:0; border:none; background:transparent; color:var(--ink-4); cursor:grab; border-radius:6px; flex-shrink:0; transition:color .12s ease, background .12s ease; }
.tm-grip:hover{ color:var(--ink-3); background:var(--surface-2); }
.tm-grip:active{ cursor:grabbing; }
.tm-grip:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; color:var(--ink-2); }
.tm-managing .tm-row{ cursor:default; }
.tm-row .b-s-val{ margin-left:auto; }

/* Add affordance, cap note, inline flash. */
.tm-add{ display:flex; align-items:center; gap:9px; padding:13px 18px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.06em; text-decoration:none; cursor:pointer; transition:color .12s ease; }
.tm-add:hover{ color:var(--accent-ink); }
.tm-add-plus{ font-size:15px; line-height:0; }
.tm-cap{ display:flex; align-items:center; gap:8px; padding:13px 18px; font-family:var(--mono); font-size:10.5px; color:var(--ink-4); letter-spacing:0.02em; }
.tm-flash{ font-family:var(--mono); font-size:11px; color:var(--bad-ink); background:var(--bad-soft); border-radius:7px; padding:9px 11px; margin:10px 18px 0; }
.tm-read-empty{ font-family:var(--mono); font-size:11px; color:var(--ink-3); padding:14px 18px; }
.tm-read-empty a{ color:var(--accent-ink); }

/* Empty floor (curated then cleared). */
.tm-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:26px 18px 22px; }
.tm-empty-eyebrow{ font-family:var(--mono); font-size:10px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.1em; }
.tm-empty-title{ font-family:var(--serif); font-size:22px; font-weight:500; letter-spacing:-0.015em; line-height:1.2; color:var(--ink); max-width:300px; }
.tm-empty-sub{ font-family:var(--sans); font-size:12.5px; line-height:1.55; color:var(--ink-3); max-width:300px; }
.tm-empty-cta{ margin-top:4px; }

/* Add picker — searchable, scrollable so a long list never overflows the card. */
.tm-search{ display:flex; align-items:center; gap:9px; padding:10px 18px; border-bottom:1px solid var(--rule); flex-shrink:0; }
.tm-search-ic{ color:var(--ink-4); flex-shrink:0; }
.tm-search-input{ flex:1; min-width:0; border:none; background:transparent; outline:none; font-family:var(--sans); font-size:13px; color:var(--ink); padding:0; }
.tm-search-input::placeholder{ color:var(--ink-4); }
/* The card is a flex column whose head (+ picker search) stay pinned while the
   list region scrolls. This only does anything once the card has a *bounded*
   height — which the two-column anchoring below supplies. min-height:0 at each
   level lets the inner scroll area actually shrink. */
#tm_picker_results{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.tm-picker{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.tm-pick-more{ flex-shrink:0; font-family:var(--mono); font-size:10px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.05em; padding:12px 18px; }

/* Two-column lede: the prose column is the height authority. The card anchors
   in a relative cell, sized to its own content but clamped to the prose
   column's height (absolute + max-height) — out of normal flow, it can't grow
   the lede row, and the list scrolls inside whatever height the prose
   establishes. Scoped to the two-column breakpoint — below 900px the layout
   stacks (no tall sibling to anchor to) and the picker keeps its own viewport
   cap instead. */
@media (min-width:901px){
  .b-metrics-col{ position:relative; min-width:0; align-self:stretch; }
  .b-metrics-col > #top_metrics{ position:absolute; inset:0 0 auto 0; max-height:100%; }
  /* Read + manage lists scroll within that clamped height, like the picker
     results already do; the head above them stays pinned (it's outside the
     scroll region). scrollbar-gutter reserves the scrollbar's width so it
     never overlaps the right-aligned value/delta. */
  #top_metrics > .b-stats,
  #top_metrics > [data-controller="top-metrics-sort"]{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
}
@media (max-width:900px){ .tm-picker{ max-height:60vh; } }
.tm-pick{ width:100%; display:flex; align-items:center; gap:12px; padding:13px 18px; border:none; border-bottom:1px solid var(--rule); background:transparent; text-align:left; cursor:pointer; transition:background .12s ease; }
.tm-pick:last-child{ border-bottom:none; }
.tm-pick:hover{ background:var(--hover); }
.tm-pick-main{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.tm-pick-name{ font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink); }
.tm-pick-loc{ font-family:var(--mono); font-size:10px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.05em; }
.tm-pick-val{ font-family:var(--mono); font-size:12px; color:var(--ink-3); flex-shrink:0; }
.tm-pick-add{ width:24px; height:24px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--rule); border-radius:6px; color:var(--ink-3); font-family:var(--mono); font-size:13px; line-height:0; transition:border-color .12s ease, color .12s ease; }
.tm-pick:hover .tm-pick-add{ border-color:var(--accent); color:var(--accent-ink); }