/* dashboard-v2 prototype — throwaway. Design language lifted from
   dashboard-reference-20261008/ (warm paper, white rounded cards, blue accent,
   uppercase mono eyebrows, serif display). No build step. */

:root {
  --paper: #fefbfe;
  --card: #ffffff;
  --ink: #17161a;
  --muted: #8b8a90;
  --faint: #b7b6bc;
  --line: #eceae4;
  --track: #eceef4;
  --accent: #0a34c1;
  --accent-soft: #eef1fd;
  --warn: #c0392b;
  --amber: #8a6a18; --amber-soft: #fdf8e8; --amber-line: #ead9a8;
  --ok: #1d9a6c;
  --lead: #6b7280;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "New York", ui-serif, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r: 16px;
  /* multi-platform brand colors (V2 · brand-forward) */
  --ig1: #f9ce34; --ig2: #ee2a7b; --ig3: #6228d7;
  --tt2: #25f4ee; --tt3: #fe2c55;
  --yt: #e5484d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: #dedbd4;
  color: var(--ink);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
.mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- phone frame ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--paper);
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.phone.is-ready { opacity: 1; }
@media (min-width: 760px) {
  body { padding: 24px 0 48px; }
  .phone {
    min-height: 0;
    border: 1px solid #cfccc4;
    border-radius: 34px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
}

/* ---------- loading splash (V2c) ----------
   Full-viewport paper curtain shown from first paint until boot completes. The
   wordmark carries the dotted thinking orb as its period; a hairline draws in beneath.
   z-index sits above the demo overlays (80/85) but below the join-code modal (90), and
   the curtain is gone long before any modal can appear. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.splash.is-gone { opacity: 0; pointer-events: none; }
.splash-word {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.02em;
  padding-right: calc(20px + 0.08em);
  animation: splash-rise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.splash-dot {
  position: absolute;
  right: 0;
  bottom: -0.13em;
  width: 20px;
  height: 20px;
}
.splash-dot canvas { display: block; width: 20px; height: 20px; }
.splash-line {
  height: 1px;
  margin-top: 14px;
  background: var(--line);
  transform-origin: left;
  animation: splash-draw 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) 350ms both;
}
@keyframes splash-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes splash-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 12px;
}
.display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}
.topbar-lead { flex: 1 1 auto; min-width: 0; }
.see-all { text-align: center; color: var(--accent); }
/* inline "show more" (#307): a button, not a link — it expands in place */
button.see-all { width: 100%; font: inherit; font-size: 13px; cursor: pointer; }
button.see-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* incremental feed footer (#713): sentinel + keyboard fallback + end note */
.feed-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.feed-more { align-self: center; }
.feed-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Busy is announced with aria, never `disabled` (a disabled control blurs). */
.feed-more[aria-busy="true"], .feed-more[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.feed-sentinel { width: 100%; height: 1px; }
.feed-end { text-align: center; color: var(--muted); font-size: 11px; margin: 8px 2px 0; }
.feed-error { text-align: center; color: var(--muted); font-size: 11px; margin: 0; }

/* ---------- profile menu (top-right) ---------- */
.profile-wrap { position: relative; flex: 0 0 auto; }
.profile-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  color: var(--ink); cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.profile-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .profile-btn:hover { border-color: var(--faint); } }
.profile-ico { width: 20px; height: 20px; display: block; }
.profile-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px; z-index: 40; margin-top: 0;
}
.profile-menu-k { color: var(--muted); padding: 2px 4px 6px; }

/* mode toggle (topbar, above the title) */
.mode-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--track); border-radius: 10px;
}
.mode-tab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 10px; border: none; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.mode-tab.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.mode-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) { .mode-tab:not(.active):hover { color: var(--ink); } }
@media (max-width: 360px) {
  .mode-tab { padding: 5px 8px; letter-spacing: 0.06em; }
}

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(var(--paper) 78%, rgba(254, 251, 254, 0));
}
.tabs-list { display: flex; gap: 8px; }
.tab-back {
  width: 32px; height: 32px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card); border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: border-color 140ms ease;
}
.tab-back svg { width: 16px; height: 16px; display: block; }
.tab-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .tab-back:hover { border-color: var(--accent); } }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.tab-ico { font-size: 11px; opacity: 0.75; }
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
}
.tab-badge[hidden] { display: none; }
.tab.active .tab-badge { background: #fff; color: var(--accent); }
.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tab.active .tab-ico { opacity: 1; }

/* ---------- view + mount/cross-fade ---------- */
.view {
  flex: 1;
  padding-bottom: 40px;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.phone.is-ready .view { opacity: 1; }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
}
.feed { display: flex; flex-direction: column; gap: 12px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 2px 10px;
}
.section-head .eyebrow { color: var(--ink); }
.section-head .hint { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.section-head .head-actions { display: flex; align-items: center; gap: 8px; align-self: center; }
.pause-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #7a5b00; background: #fdf6e3; border: 1px solid #d8b13a;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.queue-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.queue-idle { display: flex; flex-direction: column; gap: 2px; }
.queue-idle b { font-size: 12px; color: var(--ink); font-weight: 600; }
.queue-idle span { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.queue-action {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
@media (hover: hover) { .queue-action:hover { color: var(--ink); } }
.queue-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.queue-action:disabled { color: var(--faint); cursor: default; }
.queue-action-row { display: flex; justify-content: flex-end; }

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px 12px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .stat:hover { border-color: var(--faint); } }
.stat.selected { border-color: var(--accent); background: var(--accent-soft); }
.stat .k { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.stat .k .ind { color: var(--accent); letter-spacing: 0.06em; }
.stat .v { font-family: var(--serif); font-size: 30px; line-height: 1; margin: 8px 0 4px; }
.stat .v.blue { color: var(--accent); }
.stat .n { font-size: 11px; color: var(--muted); }

/* ---------- stat popover ---------- */
.popover {
  margin-top: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: card-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pop-opt, .fb-opt {
  text-align: left;
  font: 13px var(--sans);
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.pop-opt:focus-visible, .fb-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .pop-opt:hover, .fb-opt:hover { background: #f6f6f4; } }
.pop-opt[aria-pressed="true"], .fb-opt[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.empty-match { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.empty-match p { margin: 0; color: var(--muted); }
.section-head .btn { align-self: center; }

/* ---------- reel card ---------- */
.reel-card {
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 14px 12px 17px;
  transition: border-color 140ms ease, transform 90ms ease, box-shadow 140ms ease;
}
.reel-card:active { transform: scale(0.995); }
@media (hover: hover) {
  .reel-card:hover { border-color: var(--faint); box-shadow: 0 6px 18px rgba(23, 22, 26, 0.05); }
}
.reel-head { display: flex; align-items: flex-start; gap: 10px; }
.reel-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.2;
  margin: 0;
  flex: 1;
  letter-spacing: -0.005em;
}
.reel-handle { color: var(--accent); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; flex: none; padding-top: 3px; }
/* T11 dashboard feed: V3 64×96 2:3 cover top-right, title/handle in the left
   column. #979: shared by the collection drawer too. */
.reel-card--cover .reel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 14px;
}
.reel-card--cover .reel-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reel-card--cover .reel-title { overflow-wrap: anywhere; }
.reel-card--cover .reel-handle { padding-top: 0; }
.reel-card--cover .progress { margin-top: 12px; }
.reel-thumb {
  position: relative;
  display: block;
  flex: none;
  width: 64px;
  height: 96px;
  overflow: hidden;
  border-radius: 9px;
  background: #eceaf0;
  box-shadow: 0 6px 14px rgba(23, 22, 26, 0.12);
  isolation: isolate;
}
.reel-thumb-ini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: rgba(23, 22, 26, 0.32);
  z-index: 0;
}
.reel-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  z-index: 1;
}
.reel-thumb[data-miss="1"] .reel-thumb-ini { font-size: 13px; color: rgba(23, 22, 26, 0.42); }
.reel-thumb.is-fallback { border: 1px dashed rgba(23, 22, 26, 0.14); }
.progress { height: 4px; border-radius: 3px; background: var(--track); overflow: hidden; margin: 10px 0 11px; }
.progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: grow-x 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.metrics { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--lead); }
.metrics b { color: var(--ink); font-weight: 600; }
.metrics .pill { margin-left: auto; }
/* "· 38% of top": what the progress bar above encodes (plays vs the library's
   top reel), kept inline with the views stat for a near-zero footprint. */
.metrics .of-top { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; }
.metrics .metric-na, .bd-metrics .metric-na { color: var(--faint); }
.metrics .metric-na b, .bd-metrics .metric-na b { color: inherit; }
/* Card taxonomy chips: same set and order as the video brief (vertical →
   sub-topics → purposes), left-aligned. */
.card-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.card-chips .pill { margin: 0; }
.pill {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  white-space: nowrap;
}
.pill.score { border-color: var(--line); color: var(--muted); background: #f6f6f4; margin: 9px 0 0; display: inline-block; }
.hook-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.4;
  color: #3a3a40;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 10px 0 0;
}
.card-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.card-actions .watch { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.card-actions .break { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.card-actions .dot { color: var(--faint); }
.card-link { cursor: pointer; }

/* ---------- platforms: pills, card spine, filter, detection ---------- */
/* Solid brand-color pill (cards, detail) + a compact variant (detail sub, queue). */
.plat {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.plat .g { font-size: 9.5px; line-height: 1; }
.plat-mini {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.plat.ig, .plat-mini.ig { background: linear-gradient(100deg, var(--ig1), var(--ig2) 55%, var(--ig3)); }
.plat.tt, .plat-mini.tt { background: var(--ink); }
.plat.tt .g, .plat-mini.tt .g { color: var(--tt2); }
.plat.yt, .plat-mini.yt { background: var(--yt); }
/* 4px platform spine on the card edge repeats the pill's signal for scanning. */
.reel-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.reel-card.ig::before { background: linear-gradient(180deg, var(--ig1), var(--ig2) 55%, var(--ig3)); }
.reel-card.tt::before { background: linear-gradient(180deg, var(--tt2), var(--ink) 55%, var(--tt3)); }
.reel-card.yt::before { background: var(--yt); }
.progress > i.ig { background: linear-gradient(90deg, var(--ig1), var(--ig2) 55%, var(--ig3)); }
.progress > i.tt { background: var(--ink); }
.progress > i.yt { background: var(--yt); }
.bd-sub .plat-mini { margin-right: 6px; }
/* Account filter rows carry the platform pill so the same handle on two
   platforms stays distinguishable (issue #255). */
.rank-name .plat-mini, .pop-opt .plat-mini { margin-right: 6px; vertical-align: middle; }

/* Always-on PLATFORM filter: a full-width segmented control above the chips. */
.plat-seg { display: flex; gap: 2px; padding: 3px; background: #f4f3f0; border: 1px solid var(--line); border-radius: 999px; }
.seg {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  border: none; border-radius: 999px; padding: 7px 4px; background: transparent;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.seg .n { opacity: 0.65; font-size: 8.5px; }
.seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .seg:not(.active):hover { color: var(--ink); } }
.seg.active { color: #fff; }
.seg.active.all { background: var(--ink); }
.seg.active.ig { background: linear-gradient(100deg, var(--ig1), var(--ig2) 55%, var(--ig3)); }
.seg.active.tt { background: var(--ink); }
.seg.active.yt { background: var(--yt); }

/* ---------- ranked bars (reach / hooks) ---------- */
.rank-row, .hook-row {
  display: grid;
  grid-template-columns: 104px 1fr 74px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.hook-row { grid-template-columns: 150px 1fr 34px; align-items: start; }
.rank-name { font-family: var(--mono); font-size: 11px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hook-name { font-size: 13px; font-weight: 600; }
.hook-name .desc { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.rank-value { text-align: right; font-size: 12px; color: var(--lead); }
.hook-value { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.bar { height: 12px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  animation: grow-x 640ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 60ms);
}
.bar.yellow > i { background: #e8b93c; }
.bar.green > i { background: var(--ok); }

/* ---------- performance x icp scatter ---------- */
.scatter { width: 100%; height: 132px; display: block; }
.scatter text { font-family: var(--mono); font-size: 8px; fill: var(--muted); }
.scatter .axis { stroke: var(--line); stroke-width: 1; }

/* ---------- reel breakdown ---------- */
.player {
  aspect-ratio: 9 / 14;
  border-radius: var(--r);
  background: #0c0c0e center/cover no-repeat;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.player::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.player.ig::after { background: linear-gradient(180deg, var(--ig1), var(--ig2) 55%, var(--ig3)); }
.player.tt::after { background: linear-gradient(180deg, var(--tt2), var(--ink) 55%, var(--tt3)); }
.player.yt::after { background: var(--yt); }
.player-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #0c0c0e; }
.player .no-media {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.player .dur { position: absolute; right: 10px; bottom: 10px; color: #fff; font-family: var(--mono); font-size: 10px; background: rgba(0, 0, 0, 0.5); padding: 2px 6px; border-radius: 5px; }
.bd-title { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.18; margin: 0 0 6px; scroll-margin-top: 64px; }
.bd-title:focus { outline: none; }
.bd-sub { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bd-sub .spacer { flex: 1 1 auto; }
.bd-user { color: var(--ink); font-weight: 600; }
.bd-more { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--accent); background: none; border: 0; padding: 2px; cursor: pointer; }
.bd-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.bd-when { font-size: 11.5px; color: var(--muted); }
.bd-iconbtn {
  flex: none; width: 30px; height: 30px; border: 1px solid var(--line); background: var(--card);
  border-radius: 9px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.bd-iconbtn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bd-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.mdicon {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  font-size: 9.5px; background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}
.btn.mdicon svg { width: 13px; height: 13px; }
.btn.copied { border-color: var(--ok); background: var(--ok); color: #fff; }
.bd-quote { font-family: var(--serif); font-size: 17px; line-height: 1.4; border-left: 3px solid var(--accent); padding-left: 11px; margin: 0; }
/* ---------- breakdown dossier: masthead ---------- */
.bd-metrics { margin-top: 10px; }
.bd-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bd-tags .pill { margin: 0; }
.bd-tags .pill.score { margin: 0; }

/* one bottom action row: back-to-top + Dashboard + bookmark + delete + agent prompt */
.bd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bd-actions .btn { flex: 1 1 0; text-align: center; }
.bd-actions [data-agent-open] { flex-basis: 100%; }
.bd-actions [data-hide-reel] { color: var(--warn); border-color: var(--warn); }

/* ---------- brief rating micro-row (#739, UI5) ----------
   One hairline row above .bd-actions. The reasons popover is absolutely
   positioned above the row, and main/status share the same reserved box, so
   idle -> open -> saved -> error never reflows the brief or the action bar. */
.bd-rate {
  position: relative;
  margin-top: 26px;
  padding: 11px 0 2px;
  border-top: 1px solid var(--line);
  min-height: 58px;
}
.bd-rate-main,
.bd-rate-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.bd-rate-main[hidden],
.bd-rate-status[hidden],
.bd-rate-panel[hidden] { display: none; }
.bd-rate-k {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-rate-thumbs { display: flex; gap: 6px; margin-left: auto; }
.bd-rate-thumb {
  min-width: 36px;
  min-height: 36px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.bd-rate-thumb:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.bd-rate-thumb[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bd-rate-thumb:disabled { opacity: 0.45; cursor: default; }
.bd-rate-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bd-rate-status { color: var(--muted); font-size: 12px; }
.bd-rate-status[data-tone="ok"] { color: #137a55; }
.bd-rate-status[data-tone="error"] { color: var(--warn); }
.bd-rate-status-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.35; }
.bd-rate-status .btn { flex: none; margin-left: auto; }
.bd-rate-check { font-size: 13px; }
.bd-rate-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 30;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 16px 36px rgba(23, 22, 26, 0.2);
}
.bd-rate-panel::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 23px;
  width: 10px;
  height: 10px;
  background: var(--card);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.bd-rate-panel-k { margin: 0 0 9px; color: var(--ink); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.bd-rate-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-rate-chip {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.bd-rate-chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bd-rate-chip[aria-disabled="true"] { opacity: 0.45; }
.bd-rate-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bd-rate-hint { margin: 8px 0 0; color: var(--faint); font-size: 11px; }
.bd-rate-panel-actions { display: flex; gap: 8px; margin-top: 10px; }
.bd-rate-panel-actions .btn { flex: 1 1 0; }
.bd-rate + .bd-actions { margin-top: 12px; }
@media (max-width: 360px) {
  .bd-rate { min-height: 60px; }
  .bd-rate-main { gap: 6px; }
  .bd-rate-k { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-rate, .bd-rate * { transition: none !important; animation: none !important; }
}

/* agent_prompt disclosure (agent-prompt-brief §4.1) */
.bd-agent-text {
  margin: 8px 0 0; padding: 10px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--track); color: var(--ink);
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bd-agent-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bd-copy {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
.bd-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bd-copy-state { color: var(--muted); }

/* ---------- breakdown sections ---------- */
.bd-section { margin-top: 18px; }
.bd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.bd-section-head .eyebrow { color: var(--ink); }
.bd-section-meta { color: var(--faint); font-size: 9.5px; }
.bd-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
.bd-empty.mono { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.bd-quote { font-family: var(--serif); font-size: 17px; line-height: 1.4; color: #33333a; border-left: 3px solid var(--accent); padding-left: 11px; margin: 0 0 4px; }
.bd-quote.small { font-size: 15px; margin-top: 10px; }

/* score meters */
.bd-lens-score { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin-top: 10px; background: var(--card); }
.bd-lens-head { display: flex; align-items: center; gap: 8px; }
.bd-lens-name { color: var(--ink); }
.bd-overall { margin-left: auto; font-family: var(--serif); font-size: 20px; line-height: 1; }
.bd-of { color: var(--faint); font-size: 10px; }
.bd-verdict { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.bd-verdict.green { border-color: var(--ok); color: var(--ok); background: #eefaf4; }
.bd-verdict.yellow { border-color: #d8b13a; color: #7a5b00; background: #fdf6e3; }
.bd-verdict.red { border-color: var(--warn); color: var(--warn); background: #fdeeec; }
.bd-weak { color: var(--muted); margin-top: 6px; }
.bd-meter { display: block; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; margin-top: 8px; }
.bd-meter.sm { height: 6px; margin-top: 0; }
.bd-meter > i { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); animation: grow-x 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.bd-details { margin-top: 10px; }
.bd-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bd-details > summary::-webkit-details-marker { display: none; }
.bd-details > summary::before { content: "▸"; font-size: 9px; transition: transform 140ms ease; }
.bd-details[open] > summary::before { transform: rotate(90deg); }
.bd-checks { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.bd-check { display: grid; grid-template-columns: 66px 1fr 26px; align-items: center; gap: 8px; }
.bd-check-name { color: var(--lead); font-size: 9.5px; }
.bd-check-score { text-align: right; color: var(--ink); }
.bd-check-detail { grid-column: 2 / -1; color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: -2px; }

/* anatomy timeline + beats */
.bd-timeline { display: flex; gap: 2px; height: 16px; margin-top: 4px; border-radius: 5px; overflow: hidden; }
.bd-seg { border: none; padding: 0; min-width: 3px; display: block; }
button.bd-seg { cursor: pointer; }
button.bd-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bd-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.bd-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.bd-timeline-hint { color: var(--faint); margin-top: 8px; }
.bd-beats { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bd-beat { border-left: 2px solid var(--line); padding-left: 10px; }
.bd-beat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-beat-role { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.bd-beat-role i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.bd-beat-time { font-family: var(--mono); font-size: 9.5px; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; }
span.bd-beat-time { color: var(--faint); cursor: default; }
.bd-beat-body { font-family: var(--serif); font-size: 14.5px; line-height: 1.4; color: #33333a; margin: 4px 0 0; }

/* ask + caption */
.bd-line { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.bd-line.muted { color: var(--muted); font-size: 13px; }
.bd-line-k { flex: 0 0 62px; color: var(--accent); padding-top: 3px; }
.bd-line-v { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; }
.bd-issues { margin: 8px 0 0; padding-left: 18px; color: #8f2a20; font-size: 12.5px; }
.bd-issues li { margin: 2px 0; }
.bd-caption-window { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fafafa; }
.bd-caption-window .mono { color: var(--faint); }
.bd-caption-window p { margin: 5px 0 0; font-size: 12.5px; color: #3a3a40; white-space: pre-wrap; overflow-wrap: anywhere; }

/* rhythm grid */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bd-cell { border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; background: var(--card); }
.bd-cell .k { color: var(--muted); }
.bd-cell .v { display: block; font-family: var(--serif); font-size: 22px; line-height: 1; margin-top: 4px; }

/* on-screen overlay */
.bd-overlay { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.bd-overlay li { display: flex; gap: 9px; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.bd-overlay li:last-child { border-bottom: none; }
.bd-ov-time { flex: 0 0 40px; color: var(--faint); }
.bd-ov-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* consumer lens */
.bd-type-hero { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.1; margin: 2px 0 8px; }
.bd-dek { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: #3a3a40; margin: 0 0 6px; }
.bd-tools { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.bd-tools th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.bd-tools td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.bd-tools a { color: var(--accent); }
.bd-news { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.bd-news td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bd-news td.mono { color: var(--muted); font-size: 9px; white-space: nowrap; }
.bd-steps, .bd-takeaways { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.bd-steps li, .bd-takeaways li { margin: 3px 0; }
/* v3 brief cards: trait axes + topic-extraction keys (#89) */
.bd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.bd-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.bd-card.gap { border-style: dashed; }
.bd-card-k { display: block; color: var(--muted); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.bd-card-v { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.bd-tips { margin: 8px 0 0; padding-left: 22px; font-size: 13px; }
.bd-tips li { margin: 4px 0; }
.bd-tips strong { font-weight: 600; }
.bd-mindmap { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; background: #fafafa; }
.bd-mm-topic { font-family: var(--serif); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.bd-mm-tree, .bd-mm-tree ul { list-style: none; margin: 0; padding: 0; }
.bd-mm-tree > li { margin: 7px 0; }
.bd-mm-node { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.bd-mm-tree ul { margin: 4px 0 0 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.bd-mm-tree ul li { display: flex; align-items: baseline; gap: 7px; margin: 3px 0; font-size: 12.5px; }
.bd-mm-ts { flex: 0 0 auto; font-size: 9.5px; color: var(--faint); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }

/* recipe card (Recipe brief §5) */
.bd-recipe { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; background: #fafafa; margin: 10px 0 4px; }
.bd-recipe-empty { color: var(--muted); font-style: italic; font-size: 12.5px; }
.bd-recipe-title { font-family: var(--serif); font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.bd-recipe-meta { color: var(--faint); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.bd-ingredients { list-style: none; margin: 0; padding: 0; }
.bd-ingredients li { display: flex; gap: 7px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.bd-ing-qty { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.bd-ing-metric { color: var(--accent); font-family: var(--mono); font-size: 10px; }
.bd-ing-item { color: var(--lead); }
.bd-ing-note { color: var(--muted); font-size: 11px; margin-left: auto; }
.bd-mindmap-details { margin-top: 12px; }
.bd-mindmap-details > summary { color: var(--faint); }

/* genre axis */
.pill.genre { border-color: var(--line); color: var(--ink); background: #f6f6f4; }
.bd-genre { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.bd-genre-k { color: var(--faint); }
.bd-genre-v { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); }
.bd-genre-d { font-size: 12px; color: var(--muted); }
.genre-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.genre-chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.genre-chip:hover { border-color: var(--faint); color: var(--ink); }
.genre-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.genre-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filter-bar { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-group-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.chip-count { opacity: 0.65; }
.rank-row.link { cursor: pointer; border-radius: 6px; }
.rank-row.link:hover .rank-name { color: var(--accent); }
.rank-row.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rank-row.selected .rank-name { color: var(--accent); }

/* ---------- shared filter bar (#64) ---------- */
.fb-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.fb-chips { display: flex; flex-direction: column; gap: 8px; }
.fb-search { flex: 1 1 200px; position: relative; }
.fb-input {
  width: 100%; box-sizing: border-box; font: 13px var(--sans); color: var(--ink);
  background: #fafafa; border: 1px solid var(--line); border-radius: 10px; padding: 10px 30px 10px 11px;
}
.fb-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.fb-input::placeholder { color: var(--faint); }
.fb-input::-webkit-search-cancel-button, .fb-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fb-clear-q {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--muted); font-size: 16px; line-height: 1;
  padding: 4px 6px; cursor: pointer; border-radius: 8px;
}
.fb-clear-q[hidden] { display: none; }
.fb-clear-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .fb-clear-q:hover { color: var(--ink); } }
.fb-select { position: relative; flex: 1 1 auto; }
.fb-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.fb-trigger-k { color: var(--faint); }
.fb-trigger-k::after { content: "·"; margin-left: 6px; }
.fb-trigger-v { margin-left: auto; color: var(--accent); }
.fb-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .fb-trigger:hover { border-color: var(--faint); } }
.fb-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb-status-text { font-family: var(--mono); font-size: 10px; color: var(--muted); }
/* #688 filter indicator: dashboard-only layout; the shared `.fb-status` row
   above stays the Collections status slot and is not restyled. */
.fb-filter-indicator { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.fb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-pill {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent-soft); color: var(--accent); cursor: pointer;
}
.fb-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-pill-x { font-size: 12px; line-height: 1; color: var(--accent); }
.fb-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .fb-pill:hover { box-shadow: inset 0 0 0 1px var(--accent); } }
.fb-status-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fb-status-all { font-family: var(--mono); font-size: 10px; color: var(--muted); }
@media (max-width: 360px) {
  .fb-pill-label { max-width: 210px; }
  .fb-status-meta > .btn { margin-left: auto; }
}
@media (max-width: 420px) {
  .fb-search { flex-basis: 100%; }
  .fb-top > .fb-select { flex: 1 1 0; }
}
@media (max-width: 340px) {
  .fb-top > .fb-select { flex-basis: 100%; }
}

/* ---------- consumer dashboard (#63) ---------- */
.consumer-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 2px 2px 12px; }
.hero-main { display: flex; flex-direction: column; }
.hero-num { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -0.01em; }
.hero-label { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; }
.hero-stats { display: flex; gap: 18px; padding-bottom: 4px; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-k { color: var(--muted); }
.hero-stat-v { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; }

.saved-breakdown { margin: 2px 0 14px; }
.sbd-seg { display: flex; gap: 4px; padding: 3px; background: var(--track); border-radius: 11px; margin-bottom: 10px; }
.sbd-tab {
  flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 6px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.sbd-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sbd-tab.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
@media (hover: hover) { .sbd-tab:not(.active):hover { color: var(--ink); } }
.sbd-hint {
  margin: 0 0 6px; color: var(--lead); font-size: 10.5px; letter-spacing: .04em;
}
.sbd-scroll {
  --sbd-row: 30px;
  max-height: calc(var(--sbd-row) * 8);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sbd-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbd-scroll .rank-row {
  min-height: var(--sbd-row); padding-top: 0; padding-bottom: 0;
  grid-template-columns: 104px minmax(0, 1fr) 58px 12px;
}
.rank-go { color: var(--muted); font-size: 13px; line-height: 1; text-align: right; }
.rank-row.link.selected { background: var(--accent-soft); }
.rank-row.link.selected .rank-go { color: var(--accent); }
.sbd-dot { display: inline-block; width: 4px; height: 4px; margin-left: 5px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
button.rank-row.link { border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.rank-row.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rank-more {
  display: block; width: 100%; border: none; border-top: 1px solid var(--line);
  background: none; color: var(--muted); font-family: var(--mono); font-size: 11px;
  padding: 9px 0 2px; margin-top: 6px; cursor: pointer; text-align: center;
}
.rank-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) { .rank-more:hover { color: var(--ink); } }

/* needs re-processing: selected count + Enqueue action row (§8.2) */
.rp-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

.identity-card { margin: 2px 0 0; }
.identity-q { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.25; }
.identity-primary { margin-top: 10px; }
.identity-label { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--accent); }
.identity-def { font-size: 13.5px; color: #3a3a40; margin: 6px 0 0; }
.identity-why { font-family: var(--serif); font-style: italic; font-size: 15px; color: #3a3a40; border-left: 3px solid var(--accent); padding-left: 10px; margin: 10px 0 0; }
.identity-rows { margin-top: 12px; }
.identity-note, .identity-empty { color: var(--muted); font-size: 13px; margin-top: 10px; }
.identity-note code { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }

/* discreet footer */
.bd-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--faint); }
.bd-foot a { color: var(--muted); }
.bd-foot a.bd-report { color: var(--faint); }
.bd-foot a:hover { color: var(--accent); }
.bd-foot-dot { color: var(--faint); }

/* dashboard aggregate panels */
.bar.red > i { background: var(--warn); }
.craft-sub { color: var(--faint); margin: 4px 0 6px; }
.craft-sub:not(:first-child) { margin-top: 16px; }
.craft-empty { color: var(--muted); font-size: 10px; margin: 4px 0; }
.craft-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.craft-metric { display: flex; flex-direction: column; gap: 4px; }
.craft-metric .k { color: var(--muted); }
.craft-metric .v { font-family: var(--serif); font-size: 26px; line-height: 1; }

/* ---------- pipeline ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 2px 18px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.dot-paid { background: var(--accent); }
.dot-claude { background: var(--warn); }
.dot-local { background: #8a8a90; }
.dot-output { background: var(--ok); }
.dag { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 8px; position: relative; padding: 6px 0 4px; }
.node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; }
.node .box {
  width: 52px; height: 52px; border-radius: 15px; background: var(--card);
  border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 20px;
}
.node .box.paid { border-color: var(--accent); }
.node .box.claude { border-color: var(--warn); }
.node .box.local { border-color: #b9b9bf; }
.node .box.output { border-color: var(--ok); }
.node .box.dashed { border-style: dashed; }
.node .nm { font-size: 11.5px; font-weight: 600; line-height: 1.15; }
.node .tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.node .tag.paid { color: var(--accent); }
.node .tag.claude { color: var(--warn); }
.node .tag.output { color: var(--ok); }
.node .arrow { position: absolute; top: 24px; right: -16px; color: var(--faint); font-size: 13px; }
.node.end .arrow { display: none; }
.pipe-note { margin-top: 24px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--r); font-size: 13px; color: var(--muted); }
.pipe-note b { color: var(--ink); }

/* ---------- footer ---------- */
.foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 2px 22px;
  color: var(--faint);
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.proto-badge { border: 1px solid var(--faint); border-radius: 5px; padding: 2px 6px; color: var(--muted); }
.loading { color: var(--muted); padding: 40px 2px; }
.error-box { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--card); color: var(--ink); }
.error-box code { font-family: var(--mono); font-size: 11px; background: #f4f4f2; padding: 2px 6px; border-radius: 5px; }

/* ---------- pipeline: live batch + queue ---------- */
.pipe-foot { color: var(--faint); margin: 10px 2px 0; }
.pipe-foot code { font-family: var(--mono); font-size: 9.5px; }
.notice { border-radius: 11px; padding: 10px 12px; font-size: 12.5px; margin: 10px 0 2px; border: 1px solid var(--line); }
.notice.ok { border-color: var(--ok); color: #146b4a; background: #eefaf4; }
.notice.err { border-color: var(--warn); color: #8f2a20; background: #fdeeec; }
.notice.warn { border-color: #d8b13a; color: #7a5b00; background: #fdf6e3; }
.muted-card { color: var(--muted); }

.inline-form { display: flex; gap: 8px; }
.inline-form input {
  flex: 1; min-width: 0; font: 13px var(--sans); color: var(--ink);
  background: #fafafa; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px;
}
.inline-form input:focus { outline: none; border-color: var(--accent); background: #fff; }
/* iOS Safari auto-zooms the page when a focused input is under 16px; bump
   touch devices only so desktop keeps the 13px look. Pinch-zoom stays on. */
@supports (-webkit-touch-callout: none) {
  .fb-input, .inline-form input, .top-row input { font-size: 16px; }
}
.btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 10px; padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: var(--card); color: var(--accent); }
.btn.sm { padding: 6px 10px; font-size: 9.5px; }
/* brief "saved" confirmation (see flashSaved) */
.btn.saved { border-color: var(--ok); background: var(--ok); color: #fff; }
/* "Save a short": the URL field carries a live platform detection tile. */
.input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.input-wrap input { width: 100%; padding-left: 40px; }
.detect-tile {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: #f4f3f0; color: var(--faint); font-size: 12px;
  transition: background-color 150ms ease, color 150ms ease;
}
.input-wrap.p-ig .detect-tile { background: linear-gradient(135deg, var(--ig1), var(--ig2) 55%, var(--ig3)); color: #fff; }
.input-wrap.p-tt .detect-tile { background: var(--ink); color: var(--tt2); }
.input-wrap.p-yt .detect-tile { background: var(--yt); color: #fff; }
.input-wrap.p-no input { border-color: var(--warn); }
.input-wrap.p-no .detect-tile { background: #fdeeec; color: var(--warn); }
.detect-line {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); margin: 7px 2px 0; min-height: 13px;
}
.detect-line.attn { color: var(--warn); }
.detect-line.ok { color: var(--ok); }

/* "Save a short": clipboard Paste chip. Native paste is the PRIMARY path (the
   field's own input event runs the detection); the chip is a feature-detected
   fallback. V3: the chip sits at the field's trailing edge and slides in only
   while the field is empty and focused (or hovered) — no permanent furniture.
   Tap the field to reveal it. */
.input-wrap.ctx input { transition: padding-right 140ms ease; }
.input-wrap.ctx.on input { padding-right: 84px; }
.paste-chip {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--line); background: #f4f3f0; color: var(--muted);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.input-wrap.ctx.on .paste-chip { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.input-wrap.ctx.on .paste-chip.is-off { opacity: 0.45; }
.paste-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.paste-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paste-chip.is-off { cursor: help; }
.paste-chip.is-busy { animation: paste-busy 900ms ease-in-out infinite; }
@keyframes paste-busy { 50% { opacity: 0.55; } }
.paste-chip.is-ok { background: var(--card); border-color: var(--ok); color: var(--ok); }
.paste-chip svg { display: block; }
.paste-chip .lbl { line-height: 1; }

/* "Save top shorts by account": platform dropdown + account field. */
.top-row { display: flex; gap: 8px; }
.acct-select {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); padding: 0 8px;
}
.acct-select:focus { outline: none; border-color: var(--accent); }
.top-row input {
  flex: 1; min-width: 0; font: 13px var(--sans); color: var(--ink);
  background: #fafafa; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px;
}
.top-row input:focus { outline: none; border-color: var(--accent); background: #fff; }
.top-form .pipe-save .btn { flex: 1; }

/* two save buttons on a phone: let the field take its own row if it must */
@media (max-width: 380px) {
  .inline-form.pipe-save { flex-wrap: wrap; }
  .inline-form.pipe-save .input-wrap { flex-basis: 100%; }
  .inline-form.pipe-save .btn { flex: 1; }
  .top-row { flex-wrap: wrap; }
  .top-row .acct-select { flex-basis: 100%; padding: 9px 8px; }
}

.top-form { display: flex; flex-direction: column; gap: 10px; }
.tile-row { display: flex; gap: 8px; }
.tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--mono); border: 1px solid var(--line); border-radius: 11px;
  background: #fafafa; color: var(--lead); padding: 9px 6px; cursor: pointer;
}
.tile .tile-n { font-size: 14px; letter-spacing: 0.02em; color: var(--ink); }
.tile.selected { border-color: var(--accent); background: var(--accent-soft); }
.tile.selected .tile-n { color: var(--accent); }
.tile[disabled] { opacity: 0.45; cursor: default; }

/* ---------- quota at-cap (Metered, #930/#931) ----------
   Ported from landing/prototypes/brief-share/quota-v4.html inline <style>
   and app.css. State is driven by atQuotaCap()/singleLinkLocked(); the
   prototype's static disabled attributes are not copied. */
.meter-card {
  padding: 14px;
  margin-bottom: 4px;
  background: linear-gradient(180deg, #fff, #fbfaf8);
}
.meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.meter-head .eyebrow { color: var(--ink); }
.meter-head b {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.meter-track {
  height: 10px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.meter-track i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c99a2e, #a97812);
}
.meter-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.meter-foot .quota-label { color: var(--amber); }
.meter-foot .reset {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.single-card { display: flex; flex-direction: column; gap: 10px; }
.one-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #faf9f6;
}
.one-line .pulse {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.one-line p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--lead); }
.one-line b { color: var(--ink); font-weight: 500; }
.lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
}
.lock-chip::before { content: "▣"; font-size: 7px; }
.top-form .cap-note { margin-top: 1px; }
.quota-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.quota-label.at-cap {
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: 999px;
  padding: 3px 8px;
}
.quota-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.cap-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--amber);
  margin: 0;
}
.cap-note::before {
  content: "!";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--amber-line);
  background: var(--amber-soft);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
}
.one-note {
  position: relative;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  padding-left: 15px;
}
.one-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.one-note b { color: var(--ink); font-weight: 500; }
.profile-quota.at-cap { color: var(--amber); }

.job-list { display: flex; flex-direction: column; gap: 8px; }
.job { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px 11px 15px; }
.job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.job.ig::before { background: linear-gradient(180deg, var(--ig1), var(--ig2) 55%, var(--ig3)); }
.job.tt::before { background: linear-gradient(180deg, var(--tt2), var(--ink) 55%, var(--tt3)); }
.job.yt::before { background: var(--yt); }
.job.running { border-color: var(--accent); }
.job.failed { border-color: var(--warn); }
.job-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; flex: none; color: #fff; background: var(--faint); margin-top: 1px; }
.job-ico.running { background: var(--accent); }
.job-ico.done { background: var(--ok); }
.job-ico.failed { background: var(--warn); }
.job-ico.queued { background: #8a8a90; }
.job-del { flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; }
.job-del:hover { border-color: var(--warn); color: var(--warn); }
.job-del:focus-visible { outline: 2px solid var(--warn); outline-offset: 1px; }
.job-del:disabled { opacity: 0.5; cursor: default; }
.job-orb { width: 22px; height: 22px; flex: none; display: block; margin-top: 1px; }
.job-main { flex: 1; min-width: 0; }
.job-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.job-name { font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-sub { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-msg { color: var(--muted); font-size: 12px; margin-top: 2px; }
.job-err { color: var(--warn); font-size: 10px; margin-top: 3px; overflow-wrap: anywhere; }
.job-att { color: var(--faint); font-family: var(--mono); font-size: 9.5px; }
.status-pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.status-pill.running { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.status-pill.done { border-color: var(--ok); color: var(--ok); }
.status-pill.failed { border-color: var(--warn); color: var(--warn); }
.job-tags { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.job-tail { flex: none; display: flex; align-items: center; padding-top: 2px; }
.job-eta { font-family: var(--mono); font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.job-eta.live { color: var(--accent); }
.job-eta.ready { color: var(--ok); }

/* Queue expectation strip (#1040 · V4 compact utility). */
.qbar { display: flex; align-items: center; gap: 9px; margin: 0 2px; flex-wrap: wrap; }
.qbar .bar { flex: 1; min-width: 90px; height: 4px; display: flex; border-radius: 999px; background: var(--track); overflow: hidden; }
.qbar .bar > i { display: block; height: 100%; }
.qbar .b-done { background: var(--ok); }
.qbar .b-run {
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, #aebcf4 8px 14px);
  background-size: 28px 100%;
  animation: qbar-run 1.2s linear infinite;
}
.qbar .b-queue { background: #d9dbe3; }
@keyframes qbar-run { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .qbar .b-run { animation: none; } }
.qbar .qcount { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.qbar .qcount b { color: var(--ink); font-weight: 600; }
.queue-nudge {
  display: block; width: 100%; margin: 2px 2px 0; padding: 9px 11px;
  border: 1px dashed var(--line); border-radius: 10px; background: #fbfafc;
  font-family: inherit; font-size: 11.5px; line-height: 1.4; color: var(--muted);
  text-align: left; cursor: pointer;
}
.queue-nudge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .queue-nudge:hover { border-color: var(--faint); color: var(--ink); } }
.prio-pill {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; border: 1px solid var(--accent);
  color: var(--accent); background: var(--accent-soft); white-space: nowrap;
}

.batch-list { display: flex; flex-direction: column; gap: 12px; }
.batch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.batch-actions .btn { flex: 1; }
.batch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.batch-name { font-family: var(--mono); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.batch-sub { color: var(--muted); margin-top: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--lead); background: #fafafa; }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip.off { color: var(--faint); }
.chip.warn { border-color: var(--warn); color: var(--warn); background: #fdeeec; }
.chip.ok { border-color: var(--ok); color: var(--ok); background: #eefaf4; }
.reel-picks-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; color: var(--muted); }
.reel-picks { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 10px; max-height: 260px; overflow-y: auto; }
.reel-pick { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.reel-pick:last-child { border-bottom: none; }
.reel-pick input { accent-color: var(--accent); flex: none; }
.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-sc { font-size: 10px; color: var(--ink); }
.rp-topic { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- clickable done rows ---------- */
.job.job-open { cursor: pointer; }
@media (hover: hover) { .job.job-open:hover { border-color: var(--accent); } }
.job.job-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- persistent job bubble (#56) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Viewport-anchored by design (see README): fixed so it survives route swaps
   and floats over the page background when the phone card is shorter than the
   viewport. The horizontal term keeps it inside the 460px frame at all widths. */
.job-bubble {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  right: max(14px, calc(50vw - 216px));
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: min(92vw, 340px);
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(23, 22, 26, 0.18);
}
.job-bubble.is-running { border-color: var(--accent); }
.job-bubble.is-done { border-color: var(--ok); }
.job-bubble.is-failed { border-color: var(--warn); }
.jb-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 6px;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}
.jb-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jb-orb { width: 28px; height: 28px; flex: none; display: block; }
.jb-body { display: flex; flex-direction: column; text-align: left; line-height: 1.2; min-width: 0; }
.jb-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-status { font-size: 10.5px; color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-badge {
  align-self: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}
.job-bubble.is-done .jb-badge { background: var(--ok); }
.jb-paused {
  align-self: center;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a5b00;
  background: #fdf6e3;
  border: 1px solid #d8b13a;
  border-radius: 999px;
  padding: 2px 6px;
}
.jb-dismiss {
  padding: 0 9px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.jb-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Minimized bubble: orb + count only (title/status/dismiss/paused hidden). */
.job-bubble.is-min .jb-body,
.job-bubble.is-min .jb-paused,
.job-bubble.is-min .jb-dismiss { display: none; }
.job-bubble.is-done { animation: jb-pop 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.job-bubble.is-failed { animation: jb-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes jb-pop {
  0% { transform: scale(0.86); opacity: 0.4; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes jb-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* ---------- animations ---------- */
@keyframes grow-x { to { transform: scaleX(var(--p, 1)); } }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger {
  opacity: 0;
  animation: card-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* state-only re-renders: skip count-up (JS), stagger and popover entrance */
.no-anim .stagger, .no-anim .popover { animation: none !important; opacity: 1 !important; }
.no-anim .progress > i, .no-anim .bar > i, .no-anim .bd-meter > i { animation: none !important; transform: scaleX(var(--p, 1)); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .phone, .view { opacity: 1 !important; }
  .stagger { opacity: 1 !important; }
  .progress > i, .bar > i, .bd-meter > i { transform: scaleX(var(--p, 1)); }
}

.demo-veil {
  position: fixed;
  inset: 0;
  left: max(0px, calc(50% - 230px));
  right: max(0px, calc(50% - 230px));
  z-index: 50;
  background: rgba(254, 251, 254, 0.88);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 1;
}
.demo-pin { position: relative; z-index: 55; }
.demo-dim { opacity: 0.35; filter: blur(3px); pointer-events: none; }
.demo-skip {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  right: max(14px, calc(50vw - 216px));
  z-index: 55;
}
@media (min-width: 760px) {
  .demo-veil { top: 24px; bottom: 48px; border-radius: 34px; }
}

/* demo reveal driver (P3): consumed by app.js/demo-mode.js only */
.demo-veil.reveal {
  transform-origin: var(--ox, 50%) var(--oy, 30%);
  animation: demo-veil-out 640ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes demo-veil-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.16); }
}
@keyframes demo-shake {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-2.5px); }
  40%, 60% { transform: translateX(2.5px); }
}
.demo-shake { animation: demo-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes demo-card-shake {
  0%, 100% { transform: translateX(0); }
  15%, 45% { transform: translateX(-2px); }
  30%, 60% { transform: translateX(2px); }
  75%      { transform: translateX(-1px); }
}
.reel-card.demo-invite {
  will-change: transform;
  animation: demo-card-shake 560ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.reel-card.demo-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  scroll-margin-top: 64px;
}

/* ---------- collections (V5 Board, #319) ----------
   Full-page bento board of derived collections, slide-over detail, the ★/⇄
   reassign chip/popover + undo toast. Model: docs/collections-model.md. */
.tabs-list { flex-wrap: wrap; }
.coll-head { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 12px; }
.coll-title { margin: 6px 0 0; }
.coll-hint { font-size: 12.5px; line-height: 1.5; color: var(--lead); margin: 8px 0 0; }
.coll-hint b { color: var(--ink); }
.coll-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px; padding: 8px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.coll-stats > div { min-width: 0; padding: 0 8px; }
.coll-stats > div + div { border-left: 1px solid var(--line); }
.coll-stats .k {
  display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-stats .v { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.25; margin-top: 1px; min-width: 0; }
.coll-stats .v.handle {
  display: block; max-width: 100%; font-size: 11px; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 340px) {
  .coll-stats > div { padding: 0 6px; }
  .coll-stats .v { font-size: 15px; }
  .coll-stats .v.handle { font-size: 10px; }
}


.coll-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
@media (min-width: 700px) { .coll-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.coll-tile {
  text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 11px; cursor: pointer; display: flex; flex-direction: column; gap: 9px;
  font: inherit; color: inherit; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.coll-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .coll-tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(23, 22, 26, 0.07); } }
.coll-tile.big { grid-column: span 2; }
.coll-cov { display: flex; align-items: flex-start; gap: 3px; }
.coll-thumb {
  position: relative; display: block; flex: 1 1 0; min-width: 0;
  aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden;
  background: #eceaf0; isolation: isolate;
}
.coll-thumb-ini {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 15px;
  color: rgba(23, 22, 26, 0.32); z-index: 0;
}
.coll-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%; display: block; z-index: 1;
}
.coll-thumb[data-miss="1"] .coll-thumb-ini { font-size: 13px; color: rgba(23, 22, 26, 0.42); }
.coll-thumb.void { background: repeating-linear-gradient(135deg, #f4f3f0 0 6px, #efeeeb 6px 12px); }
.coll-cov-all .coll-thumb { border-radius: 7px; }
.coll-trow { display: flex; align-items: baseline; gap: 8px; }
.coll-tn { font-weight: 600; font-size: 14px; line-height: 1.25; }
.coll-tn2 { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.coll-tm { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.coll-empty { grid-column: 1 / -1; font-size: 13.5px; color: var(--lead); line-height: 1.55; }

/* the reassign chip on each short + the match snippet */
.coll-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--lead); cursor: pointer;
}
@media (hover: hover) { .coll-chip:hover { border-color: var(--accent); color: var(--accent); } }
.coll-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coll-chip .car { color: var(--faint); font-size: 8px; }
.coll-chip.moved { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.coll-snip { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 8px 0 0; }
.coll-snip mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 2px; }

/* slide-over detail */
.coll-scrim { position: fixed; inset: 0; background: rgba(23, 22, 26, 0.38); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms ease; z-index: 60; }
.coll-scrim.on { opacity: 1; visibility: visible; }
.coll-scrim.on.closing { opacity: 0; transition: opacity 190ms ease; }
.coll-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw);
  background: var(--paper); border-left: 1px solid var(--line); z-index: 61;
  display: flex; flex-direction: column; transform: translateX(103%); visibility: hidden;
  transition: transform 220ms ease, visibility 220ms ease; box-shadow: -18px 0 44px rgba(23, 22, 26, 0.14);
}
.coll-drawer.on { transform: none; visibility: visible; }
.coll-drawer.on.closing { transform: translateX(103%); visibility: visible; transition: transform 190ms cubic-bezier(0.4, 0, 1, 1); }
.coll-drawer.dragging { transition: none; }
/* M3 spring sheet: 340ms with a small overshoot, applied in wireCollections. */
@keyframes coll-drawer-in {
  0% { transform: translateX(103%); }
  62% { transform: translateX(-1.6%); }
  82% { transform: translateX(0.6%); }
  100% { transform: none; }
}
.coll-drawer.entering { animation: coll-drawer-in 340ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.coll-dr-head {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: start; gap: 12px;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--line);
}
.coll-dr-title { min-width: 0; text-align: center; }
.coll-dr-head h2 { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; }
.coll-dr-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; line-height: 1.6; }
.coll-dr-back {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer;
}
@media (hover: hover) { .coll-dr-back:hover { border-color: var(--faint); background: var(--card); } }
.coll-dr-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coll-dr-body { flex: 1; overflow: auto; padding: 2px 14px 16px; touch-action: pan-y; }
.coll-dr-body .reel-card { margin-top: 12px; }
.coll-dr-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .coll-drawer, .coll-scrim, .coll-drawer.on.closing { transition: none; }
  .coll-drawer.entering { animation: none; }
}
.coll-dempty { font-size: 13px; color: var(--muted); padding: 14px 2px; }

/* reassign popover */
.coll-pop {
  position: fixed; z-index: 90; display: none; flex-direction: column; gap: 2px;
  padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23, 22, 26, 0.16); min-width: 240px; max-width: calc(100vw - 20px);
}
.coll-pop.on { display: flex; }
.coll-pop-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 2px 6px 6px; }
.coll-opt { display: flex; align-items: center; gap: 8px; text-align: left; font: 13px var(--sans); color: var(--ink); background: none; border: none; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
@media (hover: hover) { .coll-opt:hover { background: #f6f6f4; } }
.coll-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.coll-opt[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); }
.coll-opt .ck { width: 12px; flex: none; color: var(--accent); }
.coll-opt-l { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.coll-from { font-size: 11px; color: var(--muted); }
.coll-opt-n { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.coll-pop-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.coll-pop-foot button { text-align: left; width: 100%; font: 12.5px var(--sans); color: var(--accent); background: none; border: none; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
@media (hover: hover) { .coll-pop-foot button:hover { background: var(--accent-soft); } }
.coll-pop-foot button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.coll-pop-note { font-size: 11px; line-height: 1.45; color: var(--faint); margin: 6px 6px 2px; }

/* undo toast */
.coll-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 12px);
  z-index: 95; display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; box-shadow: 0 12px 30px rgba(23, 22, 26, 0.28);
  opacity: 0; visibility: hidden; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  max-width: calc(100vw - 24px);
}
.coll-toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.coll-toast button { font: inherit; font-weight: 600; color: #fff; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.coll-toast button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }


/* ---------- live auth (#513) ----------
   Conservative composition from the existing primitives only: .phone, .card,
   .eyebrow, --serif, .btn, .notice and the shared tokens. No new palette,
   ornament or motion. */
.phone.auth-mode .tabs,
.phone.auth-mode .foot,
.phone.auth-mode .job-bubble,
.phone.auth-mode .profile-wrap { display: none !important; }

.auth {
  padding: 26px 4px 36px;
  max-width: 100%;
}
.auth .eyebrow { margin: 0 0 8px; }
.auth-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  scroll-margin-top: 20px;
}
.auth-title:focus { outline: none; }
.auth-lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lead);
  margin: 9px 0 0;
  max-width: 38ch;
}
.auth-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 10px 0 0;
}
.auth-card {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
}
.auth-label { color: var(--muted); }
.auth-input {
  width: 100%;
  font: 13px var(--sans);
  color: var(--ink);
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
}
.auth-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.auth-input::placeholder { color: var(--faint); }
.auth-card .notice { margin: 0; }
.auth-turnstile { min-height: 0; }
.auth-submit { width: 100%; margin-top: 3px; }
.auth-submit:disabled { opacity: 0.5; cursor: default; }
.auth-fine {
  color: var(--faint);
  font-size: 9px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0;
}
.auth-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 18px 0 0;
}
.auth-note a { color: var(--accent); }
.auth-note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.auth-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.auth-btn { width: 100%; text-align: center; }
.auth-callback-page { justify-content: flex-start; }
.profile-email {
  display: block;
  padding: 0 4px 8px;
  font: 12.5px var(--sans);
  color: var(--ink);
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-logout { width: 100%; }
.profile-menu .notice { margin: 8px 0 0; }

@supports (-webkit-touch-callout: none) {
  .auth-input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth, .auth-card { animation: none !important; }
}