/* ============================================================
   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-copy{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.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; min-width:126px; justify-content:center; border-radius:7px; padding:0 12px; font-size:12.5px; gap:7px; color:var(--ink); }

/* ---- In-place regeneration ------------------------------------------------
   The mounted button keeps focus and width while its icon + copy move through
   ready → progress → success. Only the generation triggers lock; the rest of
   the briefing and the global navigation stay interactive. */
.b-refresh-form{ display:inline-flex; position:relative; }
.b-refresh-btn{ position:relative; justify-content:center; }
.b-refresh-btn::before{
  content:""; position:absolute; left:50%; top:50%; width:40px; height:40px;
  transform:translate(-50%,-50%); border-radius:10px;
}
.b-refresh-btn[disabled],
.b-refresh-btn[aria-disabled="true"]{ opacity:1; cursor:wait; }
.b-refresh-btn[data-refresh-state="starting"],
.b-refresh-btn[data-refresh-state="generating"],
.b-refresh-btn[data-refresh-state="updating"]{
  color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-edge);
}
.b-refresh-btn[data-refresh-state="updated"]{
  color:var(--ok-ink); background:var(--ok-soft); border-color:oklch(0.82 0.05 160);
}
.b-refresh-btn[data-refresh-state="failed"]{
  color:var(--bad-ink); background:var(--bad-soft); border-color:var(--bad-edge);
}
.b-refresh-icons{ position:relative; width:13px; height:13px; flex-shrink:0; }
.b-refresh-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.25); filter:blur(4px);
  transition-property:opacity, transform, filter;
  transition-duration:.3s; transition-timing-function:cubic-bezier(.2,0,0,1);
}
.b-refresh-btn[data-ready-icon="write"][data-refresh-state="ready"] .b-refresh-icon-write,
.b-refresh-btn[data-ready-icon="write"][data-refresh-state="failed"] .b-refresh-icon-write,
.b-refresh-btn[data-ready-icon="refresh"][data-refresh-state="ready"] .b-refresh-icon-refresh,
.b-refresh-btn[data-ready-icon="refresh"][data-refresh-state="failed"] .b-refresh-icon-refresh,
.b-refresh-btn[data-refresh-state="starting"] .b-refresh-icon-busy,
.b-refresh-btn[data-refresh-state="generating"] .b-refresh-icon-busy,
.b-refresh-btn[data-refresh-state="updating"] .b-refresh-icon-busy,
.b-refresh-btn[data-refresh-state="updated"] .b-refresh-icon-success{
  opacity:1; transform:scale(1); filter:blur(0);
}
.b-refresh-spinner,
.b-refresh-status-spinner{
  display:block; width:11px; height:11px; border-radius:50%;
  border:1.5px solid currentColor; border-right-color:transparent;
  animation:spin .8s linear infinite;
}

/* Page-level status mirrors the button and opens as a slim editorial strip.
   It intentionally reserves no space at rest. */
.b-refresh-status{
  display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center;
  column-gap:8px; max-height:0; padding:0 16px; overflow:hidden; opacity:0;
  border-bottom:1px solid transparent; background:var(--accent-soft); color:var(--accent-ink);
  transition-property:max-height, padding, opacity, border-color;
  transition-duration:.2s; transition-timing-function:ease-out;
}
.b-refresh-status[data-state="starting"],
.b-refresh-status[data-state="generating"],
.b-refresh-status[data-state="updating"],
.b-refresh-status[data-state="updated"],
.b-refresh-status[data-state="failed"]{
  max-height:40px; padding:8px 16px; opacity:1; border-bottom-color:var(--rule-2);
}
.b-refresh-status[data-state="updated"]{ background:var(--ok-soft); color:var(--ok-ink); }
.b-refresh-status[data-state="failed"]{ background:var(--bad-soft); color:var(--bad-ink); }
.b-refresh-status-mark{ position:relative; display:block; width:13px; height:13px; }
.b-refresh-status-check,
.b-refresh-status-spinner{
  position:absolute; inset:0; opacity:0; transform:scale(.25); filter:blur(4px);
  transition-property:opacity, transform, filter;
  transition-duration:.3s; transition-timing-function:cubic-bezier(.2,0,0,1);
}
.b-refresh-status[data-state="starting"] .b-refresh-status-spinner,
.b-refresh-status[data-state="generating"] .b-refresh-status-spinner,
.b-refresh-status[data-state="updating"] .b-refresh-status-spinner,
.b-refresh-status[data-state="updated"] .b-refresh-status-check,
.b-refresh-status[data-state="failed"] .b-refresh-status-check{
  opacity:1; transform:scale(1); filter:blur(0);
}
.b-refresh-status[data-state="failed"] .b-refresh-status-check{ transform:scale(1) rotate(45deg); }
.b-refresh-status-text{ min-width:0; font-size:12.5px; line-height:16px; font-weight:500; font-variant-numeric:tabular-nums; }
.b-refresh-status-hint{ font-family:var(--mono); font-size:10px; line-height:13px; color:var(--ink-3); white-space:nowrap; }

/* The final payload is atomic; only its presentation is staggered. Each
   semantic chunk rises 8px and fades in independently. Use backwards fill so
   the delay starts hidden but the finished text returns to its ordinary paint
   layer; retaining a zero-blur filter leaves text visibly soft in Safari. */
.b-refresh-chunk[data-briefing-enter]{
  animation:b-refresh-enter .3s cubic-bezier(.2,0,0,1) backwards;
  animation-delay:var(--briefing-delay, 0ms);
}
@keyframes b-refresh-enter{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- 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;
}
/* minmax(0,…), not 1fr: a bare 1fr floors at the widest child's min-content
   width, which the Insights card puts past a phone viewport. */
@media (max-width:900px){ .b-lede{ grid-template-columns:minmax(0, 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; }
/* Phone (#280): a nowrap ellipsis with no working tap/title path clips the
   reason ("conversion five months below target" → "conversion five …").
   Reasons are 3–6 words; wrapping them keeps the same rail and the card
   already sizes to its (at most five) rows. Wider widths keep the ellipsis. */
@media (max-width:700px){
  .b-stat .b-s-sub{
    white-space:normal; overflow:visible; text-overflow:unset;
  }
  .b-s-sub.tm-why{ align-items:flex-start; }
  .b-s-sub.tm-why span{
    overflow:visible; text-overflow:unset; white-space:normal;
  }
}

/* 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:minmax(0, 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:minmax(0, 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); }
/* Individual rotate keeps spinner motion independent from icon scale/blur
   transitions, which also use transform during state changes. */
@keyframes spin{ to{ 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:minmax(0, 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; } }
@media (prefers-reduced-motion: reduce){
  .b-refresh-icon,
  .b-refresh-status-check,
  .b-refresh-status-spinner,
  .b-refresh-status{ transition:none; }
  .b-refresh-spinner,
  .b-refresh-status-spinner,
  .b-refresh-chunk[data-briefing-enter]{ 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 settle as they enter the viewport.
   Opacity stays at 1 — hiding cards until IntersectionObserver fires left
   “Around the teams” as a blank hole (heading + kicker, no cards, no empty
   state) whenever the section was at the fold or the observer was late.
   Reduced-motion users never get .b-reveal (JS opts them straight to
   revealed); this media query is the CSS belt-and-brace. */
.team-article.b-reveal{
  transform:translateY(10px);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.team-article.b-reveal.b-revealed{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .team-article.b-reveal{ 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 catalog never blows out 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); }
/* Read/manage lists are at most five insights, so the card sizes to its rows
   and uses the page. The old two-column clamp (absolute + max-height:100% of
   the prose column, overflow-y:auto on .b-stats) trapped those five rows in a
   nested one-item scroller whenever the lede was short — the rest of the
   briefing looked empty. Only the picker is unbounded, so it keeps its own
   viewport cap instead of borrowing the prose height. */
.b-metrics-col{ min-width:0; }
#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;
  max-height:60vh; 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; }
.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); }

/* ---- Weekly report pages (/report, /report/teams/:id) ----------------------
   The depths behind the briefing: the company analysis and each team's
   analysis. Reuses the briefing's masthead/prose/team-card vocabulary; rp-*
   covers what is report-specific (sections, the callout rail, banners). */

/* Edition body when both columns exist: team analysis beside the company
   synthesis. Not a new layout — the same two tracks — but flex-wrap with a
   card-width floor so synthesis cannot starve the team side into a sliver
   (a 1fr/flex-grow track will, once the pair shares a row). Inner grids
   stack: nested 2-col cards inside a half-width track is how the sliver
   happens. Wrap is content-sized, so the drawer (narrow pane, wide
   viewport) stacks too — a viewport media query would miss it. */
.rp-edition{
  display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; padding:28px 0 8px;
  container-type:inline-size; container-name:rp-edition;
}
.rp-edition-teams{
  flex:1 1 22rem; min-width:min(22rem, 100%);
}
.rp-edition-synth{
  flex:1.4 1 26rem; min-width:min(20rem, 100%);
}
.rp-edition-teams .team-articles{ grid-template-columns:minmax(0, 1fr); padding-top:16px; }
/* Stacked keeps the teams-head rule. Drop it only when both tracks share
   a row: team floor + synth floor + gap. Flex-shrink can go below the
   26rem synth basis down to 20rem, so this matches the real wrap — not
   a viewport query (which misses the archive drawer). */
.rp-edition-teams .rp-teams-head{ padding-top:16px; }
.rp-edition-synth .rp-lede{ grid-template-columns:minmax(0, 1fr); gap:20px; padding:0; }
@container rp-edition (min-width: calc(22rem + 20rem + 40px)){
  .rp-edition-teams .rp-teams-head{ border-top:none; padding-top:0; }
}

.rp-lede{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; padding:28px 0 32px; }
@media (max-width:900px){ .rp-lede{ grid-template-columns:minmax(0, 1fr); } }
.rp-lede .b-body{ display:flex; flex-direction:column; gap:18px; }
.rp-lede .b-body p{ font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--ink); margin:0; text-wrap:pretty; }

.rp-section{ display:flex; flex-direction:column; gap:12px; padding-top:10px; }
.rp-section h2{
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink);
  text-transform:uppercase; letter-spacing:0.06em; margin:0;
  padding-bottom:6px; border-bottom:1px solid var(--rule);
}

.rp-rail-head{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.08em; margin:0 0 4px;
}
.rp-callouts{ display:flex; flex-direction:column; gap:10px; align-self:start; }
.rp-callout{
  display:flex; flex-direction:column; gap:5px; padding:12px 14px;
  border:1px solid var(--rule); border-radius:10px; background:var(--card, transparent);
  text-decoration:none; transition:border-color .12s ease;
}
a.rp-callout:hover{ border-color:var(--rule-3); }
.rp-callout-main{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rp-callout-label{ font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink); }
.rp-callout-value{ font-family:var(--mono); font-size:14px; color:var(--ink); white-space:nowrap; }
.rp-callout-sub{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rp-delta{ font-family:var(--mono); font-size:11px; }
.rp-delta.ok{ color:var(--ok); }
.rp-delta.warn{ color:var(--warn); }
.rp-delta.bad{ color:var(--bad); }
.rp-delta.neutral{ color:var(--ink-4); }
.rp-note{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); text-align:right; }
.rp-reason{ font-family:var(--sans); font-size:12px; color:var(--ink-3); font-style:italic; }

.rp-banner{
  display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px 16px;
  border:1px solid var(--rule); border-radius:10px;
  font-family:var(--sans); font-size:13px; color:var(--ink-3);
}
.rp-banner.failed{ color:var(--bad); border-color:color-mix(in oklch, var(--bad) 35%, transparent); }

.rp-teams-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-top:8px; border-top:2px solid var(--ink);
}
.rp-teams-head h2{
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink);
  text-transform:uppercase; letter-spacing:0.06em; margin:0;
}
.rp-teams-head span{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }

/* A digest team whose analyst didn't land: present, honest, not a link. */
.team-article.is-missing{ opacity:0.62; cursor:default; }
.team-article.is-missing h3{ color:var(--ink-3); font-style:italic; }

.rp-backlink{ padding:8px 0 24px; }
.rp-backlink a{ font-family:var(--sans); font-size:13px; color:var(--ink-3); text-decoration:none; }
.rp-backlink a:hover{ color:var(--ink); }

/* Rail fact cards: the report's colophon ("How this edition was written") and
   a team analysis's inputs ("What the analyst read") — provenance surfaced in
   the product, sourced from real timestamps and live counts only. */
.rp-fact{
  display:flex; flex-direction:column; gap:10px; padding:14px 16px 12px;
  border:1px solid var(--rule); border-radius:10px; background:var(--card, transparent);
  margin-bottom:6px;
}
.rp-fact-head{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.08em; margin:0;
}
.rp-fact-rows{ display:flex; flex-direction:column; gap:8px; }
.rp-fact-row{ display:flex; gap:10px; align-items:baseline; }
.rp-fact-key{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-4);
  width:44px; flex-shrink:0; white-space:nowrap;
}
.rp-fact-key.bad{ color:var(--bad); }
.rp-fact-key.warn{ color:var(--warn); }
.rp-fact-text{ font-family:var(--sans); font-size:12.5px; line-height:17px; color:var(--ink); }
.rp-fact-foot{
  padding-top:9px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-4);
}

/* ---- Report archive (/report/archive) --------------------------------------
   The log of back editions: month rail with scrollspy, live-filtered edition
   cards, gap weeks kept in the record, the trial plan's locked band, and the
   reading drawer (a turbo-frame over the edition URLs). */
.ar-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0 22px; }
.ar-search{
  display:flex; align-items:center; gap:8px; flex:0 1 300px;
  height:32px; padding:0 11px;
  background:var(--surface, #fff); border:1px solid var(--rule-2); border-radius:8px;
}
.ar-search:focus-within{ border-color:var(--accent-edge); }
.ar-search input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:var(--sans); font-size:13px; color:var(--ink);
}
.ar-search input::placeholder{ color:var(--ink-4); }
.ar-chips{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ar-chip{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px;
  border-radius:999px; font-family:var(--sans); font-size:12.5px; font-weight:500;
  color:var(--ink-3); border:1px solid transparent; background:none; cursor:pointer;
}
.ar-chip:hover{ color:var(--ink); background:var(--surface-2); }
.ar-chip[aria-pressed="true"]{ color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-edge); }
.ar-chip:disabled,
.ar-chip.is-inert{
  opacity:0.42; cursor:default;
}
.ar-chip:disabled:hover,
.ar-chip.is-inert:hover{ color:var(--ink-3); background:none; }
.ar-chip .tally{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); }
.ar-chip[aria-pressed="true"] .tally{ color:var(--accent-ink); opacity:0.75; }
.ar-result-note{ font-family:var(--mono); font-size:11px; color:var(--ink-4); margin-left:auto; }
.ar-result-note a{ color:var(--ink-3); }

/* Two columns: the month rail (the log's index) and the log itself. */
.ar-layout{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:28px; align-items:start; }
/* When a filter leaves no months (#281), the rail is hidden with THE LOG.
   Collapse the leftover 132px column so the heading cannot sit as a stray
   fragment — and so NO MATCHES is not indented beside an empty sidebar. */
.ar-layout:has(.ar-rail[hidden]){ grid-template-columns:minmax(0,1fr); }
/* The briefing .b-state reserves a 340px Insights track. The archive reuses
   the printer's notice without that card, so the leftover track left the
   rule above "No matches" short of the log (and of the month-head rules).
   One column — same notice, full-width rule. */
[data-controller="archive"] .b-state{ grid-template-columns:minmax(0, 1fr); }
/* Server-rendered no-match (#231): not a leftover month-head — those are
   not rendered when @months is empty. The orphan rule is the briefing
   printer's border-top on .b-state-head, and the ~200px hole is this
   notice's lede padding (36/44) sitting under the toolbar with no log
   beneath the CTA. Same copy and button; drop the rule and the padding. */
[data-controller="archive"] .b-state.ar-nomatch{ padding:8px 0 0; }
[data-controller="archive"] .b-state.ar-nomatch .b-state-head{
  border-top:none; padding-top:0;
}
[data-controller="archive"] .b-state.ar-nomatch .b-state-actions{ padding-top:14px; }
.ar-rail{ position:sticky; top:68px; padding-top:6px; }
.ar-rail-title{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 10px 12px;
}
.ar-rail ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--rule-2); }
.ar-rail button{
  display:flex; align-items:baseline; gap:8px; width:100%;
  padding:6px 8px 6px 11px; margin-left:-1px;
  border:none; border-left:2px solid transparent; background:none; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; color:var(--ink-3); text-align:left;
}
.ar-rail button:hover{ color:var(--ink); background:var(--surface-2); }
.ar-rail button .n{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); margin-left:auto; }
.ar-rail li.cur button{ border-left-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.ar-rail li.cur button .n{ color:var(--accent-ink); opacity:0.75; }

.ar-month{ scroll-margin-top:120px; }
.ar-month + .ar-month{ margin-top:22px; }
.ar-month-head{ display:flex; align-items:baseline; gap:10px; margin:0 0 10px; }
.ar-month-head h2{ margin:0; font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ink-2); }
.ar-month-head span{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.ar-month-head::after{ content:""; flex:1; border-top:1px solid var(--rule-2); transform:translateY(-3px); }

.ar-list{ display:flex; flex-direction:column; gap:8px; }
.ar-edition{
  position:relative;
  display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:16px; align-items:start;
  padding:14px 16px;
  background:var(--surface, #fff); border:1px solid var(--rule-2); border-radius:12px;
  box-shadow:var(--shadow-1);
  transition:box-shadow .15s ease, border-color .15s ease;
}
/* display:grid wins the UA [hidden] rule the same way .empty-state { display:flex }
   did on Teams — honor the attribute so a Starred-filter hide actually leaves. */
.ar-edition[hidden],
.ar-gap[hidden]{ display:none; }
.ar-edition:hover{ border-color:var(--rule-3); box-shadow:var(--shadow-2); }
.ar-edition.is-partial{ background:color-mix(in srgb, var(--surface, #fff) 88%, var(--surface-2)); }
.ar-week{ display:flex; flex-direction:column; gap:3px; padding-top:2px; }
.ar-week .d{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); }
.ar-week .n{ font-family:var(--mono); font-size:10px; color:var(--ink-4); }
.ar-first{
  align-self:flex-start; margin-top:3px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:4px; padding:2px 5px;
}
.ar-edition h3{
  margin:0 0 3px; font-family:var(--serif); font-weight:500; font-size:18px;
  line-height:1.3; color:var(--ink); text-wrap:balance;
}
/* The headline link stretches over the card; the star stays clickable above it. */
.ar-cardlink{ color:inherit; text-decoration:none; }
.ar-cardlink::after{ content:""; position:absolute; inset:0; border-radius:12px; }
.ar-deck{ margin:0 0 8px; font-family:var(--sans); font-size:13px; color:var(--ink-3); text-wrap:pretty; }
.ar-band{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--sans); font-size:12.5px; color:var(--ink-4); }
.ar-band .partial{ color:var(--warn-ink, var(--warn)); }
.ar-dots{ display:inline-flex; align-items:center; gap:4px; }
.ar-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-5); flex:none; }
.ar-dot.ok{ background:var(--ok); }
.ar-dot.warn{ background:var(--warn); }
.ar-dot.bad{ background:var(--bad); }
.ar-dot.missing{ width:6px; height:6px; background:transparent; border:1px dashed var(--ink-4); }
.ar-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; position:relative; z-index:1; }
.ar-open{ font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--ink-4); white-space:nowrap; }
.ar-edition:hover .ar-open{ color:var(--accent-ink); }

.ar-star{
  width:28px; height:28px; border:none; border-radius:6px; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--ink-4); padding:0;
}
.ar-star:hover{ background:var(--surface-2); color:var(--ink-2); }
.ar-star.is-on{ color:var(--accent); }

/* A week with no edition, kept honest in the record. */
.ar-gap{
  display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; align-items:baseline;
  padding:8px 16px; color:var(--ink-4);
  font-family:var(--sans); font-size:12.5px;
  border:1px dashed var(--rule-3); border-radius:12px;
}
.ar-gap .d{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; }

/* Trial gate: everything older than the window, in one quiet locked band. */
.ar-locked{
  display:flex; align-items:center; gap:14px; margin-top:26px; padding:16px 18px;
  border:1px solid var(--rule-2); border-radius:12px; background:var(--surface-2);
}
.ar-locked svg{ flex-shrink:0; color:var(--ink-4); }
.ar-locked-copy{ flex:1; min-width:0; }
.ar-locked-copy b{ font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink-2); display:block; }
.ar-locked-copy span{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3); }

.ar-end{
  margin:30px 0 8px; text-align:center; color:var(--ink-4);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
}

/* ---- Reading drawer ---------------------------------------------------------
   An edition over the log: same URL as the full page, loaded into a frame. */
.ar-scrim{
  position:fixed; inset:0; z-index:80; background:rgba(21,36,47,0.32);
  opacity:0; transition:opacity .2s ease;
}
.ar-scrim.show{ opacity:1; }
.ar-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:min(620px, 94vw);
  background:var(--surface, #fff); border-left:1px solid var(--rule-2);
  box-shadow:var(--shadow-pop, 0 8px 28px rgba(21,36,47,0.12));
  transform:translateX(102%); transition:transform .24s cubic-bezier(.32,.72,.35,1);
  visibility:hidden;
}
.ar-drawer.show{ transform:translateX(0); visibility:visible; }
.ar-drawer turbo-frame{ display:flex; flex-direction:column; height:100%; }
.ar-drawer-head{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:14px 16px 12px 24px; border-bottom:1px solid var(--rule);
}
.ar-drawer-head .spacer, .ar-drawer-foot .spacer{ flex:1; }
.ar-drawer-week{
  font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3);
}
.ar-drawer-close{
  width:30px; height:30px; border:none; border-radius:6px; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--ink-3); padding:0;
}
.ar-drawer-close:hover{ background:var(--surface-2); color:var(--ink); }
.ar-drawer-body{ flex:1; overflow-y:auto; padding:20px 24px 28px; }
.ar-drawer-headline{
  margin:2px 0 6px; font-family:var(--serif); font-weight:500; font-size:24px;
  line-height:1.25; letter-spacing:-0.008em; text-wrap:balance;
}
/* The drawer is one column: the callout rail stacks under the prose. */
.ar-drawer .rp-lede{ grid-template-columns:minmax(0,1fr); gap:20px; padding:12px 0 24px; }
.ar-drawer .rp-lede .b-body p{ font-size:15.5px; }
.ar-drawer .team-articles{ grid-template-columns:minmax(0,1fr); }
.ar-drawer .rp-edition{ padding:12px 0 0; gap:24px; }
.ar-drawer .rp-edition-synth .rp-lede{ padding:0; }
.ar-drawer-foot{
  display:flex; align-items:center; gap:8px; flex:none;
  padding:12px 24px; border-top:1px solid var(--rule); background:var(--surface, #fff);
}

@media (prefers-reduced-motion: reduce){
  .ar-drawer, .ar-scrim{ transition-duration:0.01ms; }
}
@media (max-width:860px){
  .ar-layout{ grid-template-columns:minmax(0,1fr); }
  .ar-rail{ display:none; }
}
@media (max-width:700px){
  /* Masthead meta lines are sentences on every report surface (archive,
     edition, team analysis); let the shared column shrink and wrap instead
     of pushing past the viewport. */
  .b-masthead{ flex-wrap:wrap; }
  .b-masthead .b-mast-meta{ flex-shrink:1; min-width:0; align-items:flex-start; }
  .b-masthead .b-meta-line{ text-align:left; white-space:normal; }
  /* Phone cards: week + star share the header row so the star stays inside
     its own card. The previous single-column stack parked an absolutely
     positioned star against a collapsed .ar-side at the bottom — top:10px
     then painted below the card and over the next edition's header. */
  .ar-edition{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "week side"
      "main main";
    gap:8px 10px;
  }
  .ar-week{ grid-area:week; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:10px; min-width:0; }
  .ar-main{ grid-area:main; min-width:0; }
  .ar-first{ margin-top:0; }
  .ar-side{ grid-area:side; flex-direction:row; align-items:center; align-self:start; gap:10px; }
  .ar-open{ display:none; }
  .ar-gap{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .ar-result-note{ margin-left:0; }
}

/* ============ DARK MODE overrides (tokens flip in design.css) ============ */
/* The insights cross-highlight wash is a near-white accent tint in light mode;
   re-pitch it just above the dark surface so the lit row stays readable. */
[data-theme="dark"] body[data-themeable] .b-stat.is-lit{
  background:oklch(0.27 0.035 var(--accent-h));
}