/* 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; }

/* ---------- 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-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. Scoped to .reel-card--cover so collection-drawer cards keep their
   current composition. */
.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; }
/* 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 {
  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); }

/* 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-opt-n { color: var(--muted); font-family: var(--mono); font-size: 9px; margin-left: 6px; }
.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); }
@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); } }
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; }

.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-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-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; }
.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; }
}

/* ---------- Collections through-line (V4 Split card, #369) ----------
   The through-line kicker type is shared with the "Your Charter" eyebrow so
   both labels line up on the same left edge in the Collections head. */
.tl-eyebrow {
  display: block; font-family: var(--mono); font-size: 8px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 4px;
}
.tl-eyebrow.start { text-align: left; }
.tl {
  position: relative; display: block; width: 100%; text-align: left;
  text-decoration: none; color: inherit; font: inherit; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; padding: 12px 13px;
  margin: 8px 0; cursor: pointer; overflow: hidden;
}
.tl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .tl:hover { border-color: var(--accent); box-shadow: 0 8px 20px rgba(23, 22, 26, 0.06); } }
.tl-headline { display: block; font-family: var(--serif); font-weight: 600; font-size: 16.5px; line-height: 1.28; letter-spacing: -0.005em; color: var(--ink); }
.tl-arrow { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 13px; line-height: 1; }
.tl.tl-v4 { display: grid; grid-template-columns: minmax(0, 1fr) 86px; padding: 0; min-height: 104px; }
.tl-v4-left { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 12px 11px 12px 13px; min-width: 0; }
.tl-v4-left .tl-headline { font-size: 15.5px; }
.tl-v4-right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-left: 1px solid var(--line); background: var(--accent-soft); color: var(--accent); text-align: center; padding: 10px 6px; }
.tl-count { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1; }
.tl-count-k { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.tl-v4-right .tl-arrow { margin-top: 6px; background: #fff; }
@media (max-width: 340px) {
  .tl.tl-v4 { grid-template-columns: minmax(0, 1fr) 76px; }
  .tl-v4-left .tl-headline { font-size: 14.5px; }
}

/* Compact Report Card in the Collections header (#338) — R1 Edge radar. */
.ch-card {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: linear-gradient(180deg, #fff, #f7f6ff); border: 1px solid var(--line);
  border-radius: 20px; padding: 13px 14px 12px; cursor: pointer;
}
.ch-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .ch-card:hover { border-color: var(--accent); box-shadow: 0 10px 24px rgba(23, 22, 26, 0.07); } }
.ch-card-empty { cursor: default; }
.ch-radar-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin: 4px 0 2px; }
.ch-radar { display: block; width: 156px; height: 156px; }
.radar-ring { fill: none; stroke: var(--line); }
.radar-axis { stroke: var(--line); }
.radar-poly { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; }
.radar-dot { fill: var(--accent); }
.radar-lab { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.02em; fill: var(--muted); }
.ch-cap-txt { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.ch-lead { font-size: 12.5px; line-height: 1.45; color: var(--lead); max-width: 34ch; }
.ch-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ch-tap { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ch-empty-t { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin: 10px 0 0; }
.ch-empty-b { display: block; font-size: 12.5px; line-height: 1.5; color: var(--lead); margin: 5px 0 0; }
/* D2 "Amber Row" — full-width status row under the radar on the compact card. */
.ch-amber-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 7px 10px; border: 1px solid var(--amber-line);
  border-radius: 10px; background: var(--amber-soft); color: var(--amber);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.03em; line-height: 1.45;
  text-transform: uppercase; text-align: left;
}
.ch-amber-row[data-tone="busy"] { color: var(--accent); border-color: #c9d3f5; background: var(--accent-soft); }
.ch-amber-row .car { font-size: 11px; line-height: 1; }

/* Full Charter bottom sheet (persistent, outside #view) */
html.ch-sheet-open, html.ch-sheet-open body { overflow: hidden; }
.ch-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(23, 22, 26, 0.38); opacity: 0; transition: opacity 0.18s; }
.ch-scrim.on { opacity: 1; }
.ch-scrim[hidden] { display: none; }
.ch-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--paper);
  border-radius: 22px 22px 0 0; padding: 8px 16px calc(22px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto;
  transform: translate(var(--ch-x, 0px), var(--ch-y, 103%));
  transition: transform 0.24s ease, visibility 0.24s; visibility: hidden;
  box-shadow: 0 -18px 44px rgba(23, 22, 26, 0.18);
  touch-action: pan-y;
}
.ch-sheet.on { --ch-y: 0; visibility: visible; }
/* Desktop: keep the sheet inside the dashboard's 460px phone column. */
@media (min-width: 760px) {
  .ch-sheet { left: 50%; right: auto; width: min(460px, 100%); --ch-x: -50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-sheet, .ch-scrim { transition: none; }
}
.ch-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 6px auto 12px; touch-action: pan-y; cursor: grab; }
.ch-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; touch-action: pan-y; cursor: grab; }
.ch-sheet-head.only-x { justify-content: flex-end; }
.ch-sheet.ch-sheet-dragging { transition: none; }
.ch-x { width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.ch-x:hover { color: var(--ink); }
.ch-sheet-body .charter-report { border: 0; padding: 0; background: transparent; }
.ch-sheet-body .cr-block { margin-top: 14px; }

.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; }

/* B2: “What <collection> taught you” — the learnings entry above the shorts */
.coll-learn-card {
  display: block; margin: 14px 2px 2px; padding: 14px 16px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.coll-learn-card .eyebrow { margin: 0 0 8px; }
.coll-learn-head { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.coll-learn-line { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; }
.coll-learn-stat { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin: 10px 0 0; line-height: 1.6; }
.coll-learn-cta { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.coll-learn-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@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; }

/* ---------- charter (epic #304, ticket #307) ----------
   Tab shell only; the V1 "Report Card" content ships in #310. The empty state
   explains the feature and previews its shape (a cap + 1–5 trait bars). */
.charter-head { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 12px; }
.charter-title { margin: 6px 0 0; }
.charter-hint { font-size: 12.5px; line-height: 1.5; color: var(--lead); margin: 8px 0 0; }
.charter-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.charter-preview { width: 100%; display: flex; flex-direction: column; gap: 9px; padding: 2px 0 10px; }
.charter-cap { height: 15px; width: 58%; border-radius: 6px; background: var(--track); }
.charter-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.charter-bars i { height: 7px; border-radius: 3px; background: var(--track); }
.charter-k { color: var(--accent); margin: 2px 0 0; }
.charter-empty-t { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 4px 0 0; }
.charter-empty-b { font-size: 13px; line-height: 1.55; color: var(--lead); margin: 6px 0 0; max-width: 46ch; }
.charter-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- charter Report Card (V1, #310) ----------
   The generated document: headline cap, 8 trait bars, collection chips, merged
   guidelines, conflict cards and the refresh/export toolbar. Optimized for the
   ego hit (a result card you'd screenshot) inside the dashboard chrome. */
.cr-error { margin: 0 2px 10px; padding: 9px 11px; border: 1px solid #e7c9c3; border-radius: 12px; background: #fdf4f1; color: #8a3b2c; font-size: 12.5px; line-height: 1.45; }
.cr-error .mono { display: block; margin-top: 3px; font-size: 9.5px; color: #a56556; }
.charter-report { background: linear-gradient(180deg, #fff, #f7f6ff); padding: 16px; text-align: center; }
.charter-report > .tl-eyebrow { margin-top: 4px; }
.cr-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cr-badge { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; background: #fff; }
.cr-badge.warn { color: #8a6a18; border-color: #ead9a8; background: #fdf8e8; }
.cr-badge.busy { color: var(--accent); border-color: #cdd5f4; background: var(--accent-soft); }
.cr-cap-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 14px 0 0; }
.cr-cap { font-size: clamp(28px, 9vw, 38px); line-height: 1.05; margin: 5px 0 0; }
.cr-lead { font-size: 13.5px; line-height: 1.55; color: var(--ink); max-width: 34ch; margin: 9px auto 0; }
.cr-def { font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 40ch; margin: 7px auto 0; }
.cr-note { font-size: 12px; line-height: 1.5; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; margin: 10px auto 0; max-width: 40ch; }
.cr-meta { font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin: 12px 0 0; line-height: 1.6; }

.cr-block { margin-top: 10px; }
.cr-block > .eyebrow { display: block; margin-bottom: 8px; }
.cr-traits { display: grid; grid-template-columns: 1fr; gap: 2px; }
.cr-trait { display: grid; grid-template-columns: 88px minmax(0, 1fr) 34px; gap: 8px; align-items: center; padding: 6px 0; }
.cr-tn { font-size: 12px; color: var(--lead); line-height: 1.2; min-width: 0; }
.cr-band { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.cr-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cr-dots i { height: 8px; border-radius: 3px; background: var(--track); display: block; }
.cr-dots i.f { background: var(--accent); }
.cr-tv { font-size: 10px; text-align: right; color: var(--muted); }
.cr-desc { grid-column: 1 / -1; font-size: 12px; line-height: 1.42; color: var(--lead); margin-top: 2px; text-wrap: pretty; }
.cr-zinger { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.4; color: var(--muted); margin-top: 1px; }
.cr-zinger::before { content: "zinger · "; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.cr-trait-note { font-size: 8px; letter-spacing: 0.03em; color: var(--faint); margin: 8px 0 0; line-height: 1.6; }

.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: #fff; color: var(--lead); font-family: var(--sans); font-size: 12px; text-decoration: none; cursor: pointer; }
.cr-chip:hover, .cr-chip:focus-visible { border-color: var(--accent); color: var(--accent); }
.cr-chip-n { font-size: 9px; color: var(--faint); }

.cr-conflicts { display: flex; flex-direction: column; gap: 9px; }
.cr-conflict { border-color: #e6dcc6; background: #fffdf7; padding: 12px; }
.cr-ck { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a6a18; margin: 0; }
.cr-cq { font-size: 13px; font-weight: 600; line-height: 1.4; margin: 5px 0 9px; }
.cr-side { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--lead); }
.cr-side-k { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 9px; display: grid; place-items: center; }
.cr-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cr-opt { font: 11.5px var(--sans); border: 1px solid var(--line); background: #fff; color: var(--lead); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.cr-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cr-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cr-choice { font-size: 9px; color: var(--faint); margin: 8px 0 0; }
.cr-choice.done { color: var(--accent); }

.cr-guides { display: flex; flex-direction: column; }
.cr-guide { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.cr-guide:first-child { border-top: none; }
.cr-gi { font-size: 9px; color: var(--faint); padding-top: 2px; }
.cr-gbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-gtext { font-size: 13px; line-height: 1.48; color: var(--ink); }
.cr-gsrc { font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); line-height: 1.6; }
.cr-gempty { font-size: 13px; color: var(--muted); padding: 4px 0; }
.cr-dupes { display: flex; gap: 8px; margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: #f4f7f2; color: #435c39; font-size: 11.5px; line-height: 1.45; }
.cr-dupe-ico { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #dcead5; color: #3d6a2d; display: grid; place-items: center; font-size: 10px; }
.cr-dupe-text { display: block; color: #64805a; margin-top: 2px; }

.cr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 2px; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
@media (max-width: 380px) {
  .cr-trait { grid-template-columns: 74px minmax(0, 1fr) 30px; gap: 6px; }
  .cr-tn { font-size: 11.5px; }
  .cr-actions { width: 100%; }
  .cr-actions .btn { flex: 1; }
}

/* ---------- Learnings deck (D3 V5 "One Line", #347) ----------
   A Collections sub-route: the global through-line anchor plus one swipeable
   card per collection. `.ln-*` is deliberately separate from `.cr-*` so the
   Charter's four merged-row assertion never sees these rows. */
.ln-view { display: block; }
.ln-head { padding: 4px 2px 12px; }
.ln-head .display { font-size: clamp(28px, 8vw, 34px); margin: 5px 0 0; }
.ln-lead { font-size: 13px; line-height: 1.55; color: var(--lead); max-width: 42ch; margin: 8px 0 0; }
.ln-anchor {
  background: linear-gradient(160deg, #eef2ff, #fff 62%);
  border-radius: 20px;
  padding: 15px;
}
.ln-ahead {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 7vw, 27px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
}
.ln-amt { font-size: 8.5px; letter-spacing: 0.05em; color: var(--muted); margin: 8px 0 0; line-height: 1.6; }
.ln-gs { display: flex; flex-direction: column; margin-top: 10px; }
.ln-g { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); }
.ln-g:first-child { border-top: none; }
.ln-gtext { font-size: 13px; line-height: 1.45; color: var(--ink); }
.ln-gsrc { font-size: 8.5px; letter-spacing: 0.04em; color: var(--faint); line-height: 1.6; }
.ln-deck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 18px 2px 8px; }
.ln-deck-head .mono { font-size: 8px; color: var(--faint); white-space: nowrap; }
.ln-deck {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 3px 2px 10px;
  margin: 0 -2px;
  scrollbar-width: none;
  align-items: stretch;
  position: relative;
}
.ln-deck::-webkit-scrollbar { display: none; }
.ln-deck:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 18px; }
.ln-deck-empty { margin: 0; padding: 18px 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ln-card {
  flex: 0 0 88%;
  min-width: 0;
  scroll-snap-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  box-shadow: 0 8px 20px rgba(23, 22, 26, 0.04);
  transition: box-shadow 0.16s, border-color 0.16s;
}
.ln-card.is-active { box-shadow: 0 14px 30px rgba(23, 22, 26, 0.09); border-color: #d9d6ee; }
.ln-card-top { display: flex; align-items: center; gap: 7px; }
.ln-num { font-size: 8.5px; color: var(--faint); }
.ln-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 0;
}
.ln-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); flex: none; }
.ln-count { margin-left: auto; font-size: 9px; color: var(--faint); white-space: nowrap; }
.ln-head {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}
.ln-line-label { font-size: 8px; letter-spacing: 0.12em; color: var(--accent); margin: 14px 0 0; }
.ln-line {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  margin: 5px 0 0;
}
.ln-none { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }
.ln-also { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; }
.ln-also .eyebrow { font-size: 8px; }
.ln-row { font-size: 12px; line-height: 1.45; color: var(--lead); margin: 6px 0 0; }
.ln-foot { margin-top: auto; padding-top: 12px; }
.ln-stat { font-size: 8px; letter-spacing: 0.04em; color: var(--faint); margin: 0; line-height: 1.6; }
.ln-dnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 2px 0; }
.ln-dbtn {
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.ln-dbtn:disabled { opacity: 0.45; cursor: default; }
.ln-dbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .ln-dbtn:not(:disabled):hover { border-color: var(--accent); color: var(--accent); } }
.ln-pos { font-size: 8.5px; color: var(--faint); }
.ln-dots { display: flex; align-items: center; justify-content: center; gap: 2px; }
.ln-dot-btn {
  width: 22px;
  height: 22px;
  border: 0;
  background: none;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ln-dot-btn i { width: 5px; height: 5px; border-radius: 999px; background: var(--faint); display: block; transition: width 0.14s, background 0.14s; }
.ln-dot-btn[aria-current="true"] i { width: 16px; background: var(--accent); }
.ln-dot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 6px; }
.ln-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.ln-note { font-size: 8px; letter-spacing: 0.05em; line-height: 1.7; text-transform: uppercase; color: var(--faint); margin: 12px 2px 0; }
.ln-empty-card { margin-top: 4px; }
.ln-empty-t { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 4px 0 0; }
.ln-empty-b { font-size: 13px; line-height: 1.55; color: var(--lead); margin: 6px 0 0; max-width: 46ch; }
.ln-empty-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cr-learnings-link { white-space: normal; text-align: left; }
@media (max-width: 380px) {
  .cr-learnings-link { flex: 1 0 100%; }
}
.ln-more { font-size: 8px; letter-spacing: 0.04em; color: var(--faint); margin: 8px 0 0; line-height: 1.6; }

/* ---------- 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; }
}