/* app.css — chrome that sits around the v3 tokens.
 * Top nav, modal scrim, entry-form composites. Strict spacing scale (4/8/12/16/24/40).
 */

/* ── PAGE SHELL ── */
.shell-canvas { max-width: 1800px; margin: 0 auto; padding: 24px 40px 80px; }

.shell-top {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.shell-brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.shell-brand .pip { width: 8px; height: 8px; background: var(--ink); border-radius: 999px; display: inline-block; }
.shell-brand b { color: var(--ink-1); }

.shell-nav { display: inline-flex; gap: 18px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.shell-nav a {
  text-decoration: none; display: inline-flex; padding: 4px 0;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  font-weight: 600;
}
.shell-nav a:hover { color: var(--ink-1); }
.shell-nav a.current { color: var(--ink); border-bottom-color: var(--ink); }
.shell-nav a:focus-visible { outline: 0; box-shadow: 0 2px 0 var(--paper-3); }

.shell-spacer { flex: 1; }

.shell-actions { display: inline-flex; align-items: center; gap: 12px; }
/* Top-bar + New idea on desktop stays flat — no coral block-stamp. */
.shell-actions .btn-primary { box-shadow: none; }
.shell-actions .btn-primary:focus-visible { box-shadow: 0 0 0 2px var(--paper-3); }
.shell-user {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.shell-user b { color: var(--ink-1); }

/* The theme toggle from v3-tokens.css is `position: fixed` — that fights the top bar.
 * Inline it instead. */
.shell-top .theme-toggle {
  position: static;
}

/* ── HEADINGS ── */
.page-h1 {
  font-family: "Inter Tight", "Inter", system-ui, sans-serif;
  font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -.025em;
  margin: 0 0 8px;
}
.page-sub { color: var(--ink-2); font-size: 15px; margin: 0 0 24px; max-width: 720px; }

/* ── MODAL SCRIM (desktop overlay per brief §4.3) ── */
.modal-host { /* HTMX swap target */ }

.modal-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 10, 10, .35);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 16px 40px;
  overflow-y: auto;
}
html[data-theme="dark"] .modal-scrim,
body[data-theme="dark"] .modal-scrim { background: rgba(0, 0, 0, .55); }

.modal {
  position: relative; z-index: 1;
  width: min(720px, 100%);
  background: var(--bg);
  border: 1px solid var(--ink-1);
  border-radius: 2px;
  padding: 28px 32px 24px;
}

.modal-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.modal-head h3 { margin: 0; font-family: "Inter Tight", "Inter", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1; color: var(--ink-1); }
.modal-head .session { flex: 1; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.modal-head .session b { color: var(--ink-1); }
.modal-head .x {
  all: unset; cursor: pointer;
  width: 24px; height: 24px; border: 1px solid var(--rule); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 13px;
}
.modal-head .x:hover { color: var(--ink-1); border-color: var(--ink-1); }
.modal-head .x:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--paper-3); }

/* ── BRAND SEARCH BOX in the entry form ── */
.search-box {
  border: 1px solid var(--ink-1); border-radius: 2px; padding: 6px 10px;
  background: var(--bg);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: relative;
}
.search-box.focus, .search-box:focus-within { box-shadow: 0 0 0 2px var(--paper-3); }
.search-box .icon { color: var(--ink-3); font-family: "JetBrains Mono", monospace; font-size: 13px; flex-shrink: 0; }
.search-box input.brand-input {
  flex: 1; min-width: 140px; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--ink-1); padding: 4px 0;
}
.search-box input.brand-input::placeholder { color: var(--ink-3); }

.selected-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 3px;
  background: var(--ink-1); color: var(--bg);
  border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.2;
}
.selected-chip .ava { width: 18px; height: 18px; border-radius: 999px; background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: "Inter Tight", "Inter", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.selected-chip .x {
  all: unset; cursor: pointer;
  opacity: .7; font-family: "JetBrains Mono", monospace; font-size: 11px;
  padding: 0 6px 0 2px;
}
.selected-chip .x:hover { opacity: 1; }

.brand-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 10;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 12px;
  max-height: 280px; overflow-y: auto;
}
.brand-results:empty { display: none; }
.brand-results button {
  all: unset; display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-1);
}
.brand-results button:last-child { border-bottom: 0; }
.brand-results button:hover, .brand-results button:focus-visible { background: var(--bg-2); }
.brand-results button .ava {
  width: 18px; height: 18px; border-radius: 999px; background: var(--paper-3); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", "Inter", sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0;
}
.brand-results .empty {
  padding: 10px 12px; color: var(--ink-3); font-size: 12.5px;
}

.recents-label { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; margin: 14px 0 8px; }
.recents { display: flex; gap: 5px; flex-wrap: wrap; }
.recent {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 3px;
  background: var(--bg); color: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.2;
  white-space: nowrap;
}
.recent:hover { border-color: var(--ink-1); }
.recent .ava { width: 18px; height: 18px; border-radius: 999px; background: var(--paper-3); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: "Inter Tight", "Inter", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.recent.added { color: var(--ink-3); text-decoration: line-through; opacity: .55; pointer-events: none; }
.recent:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--paper-3); }

/* Title input — hairline-underline per brief §4.3. */
.text-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink-1);
  padding: 6px 2px; font-family: "Inter", sans-serif; font-size: 15px;
  color: var(--ink-1); background: transparent;
}
.text-input:focus, .text-input:focus-visible { outline: 0; border-bottom-color: var(--ink); }

/* 2-of-3 banner — Refined: hairline tile, no colored left border, three
   small pips on the right indicate progress. */
.require {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 13px; color: var(--ink); margin-bottom: 20px;
}
.require .dots { display: flex; gap: 4px; margin-left: auto; }
.require .dots i { width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 999px; display: block; transition: background .2s ease; }
.require .dots i.on { background: var(--ink); }
.require .met {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em;
  color: var(--st-green); font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--st-green); border-radius: 999px;
  display: none;
}
.require.is-met .met { display: inline-block; }

/* Tag pills wrapper */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-newtag-input {
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--ink-1);
  min-width: 80px;
}
.pill.editing { border-style: solid; border-color: var(--ink-1); font-style: normal; }

/* Errors */
.field-error {
  margin-top: 6px; padding: 6px 10px;
  background: var(--st-red-soft); border-left: 3px solid var(--st-red);
  color: var(--ink-1); font-size: 12.5px; border-radius: 2px;
}

/* Footer */
.modal-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.save-info {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .08em;
  color: var(--ink-3); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.save-info .live { color: var(--st-green); }
.save-info .pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.modal-foot .spacer { flex: 1; }

/* Brand list (Sprint 2 placeholder for now) */
.brand-card {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 18px; border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper); text-decoration: none; color: var(--ink);
  margin-bottom: 8px;
  transition: border-color .15s ease;
}
.brand-card:hover { border-color: var(--ink); }
.brand-card .ava {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: .02em; text-transform: uppercase;
}
.brand-card .name { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 15px; }
.brand-card .meta { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }

/* ────────────────────────────────────────────────────────────────
   BRAND PAGE (Sprint 2 · Variant E)
   ──────────────────────────────────────────────────────────────── */
/* On desktop the frame is a 2-col grid with the queue rail as a real
   right column (sibling, not a fixed overlay). On mobile it stacks. */
.bp-frame {
  display: block;
  min-height: calc(100vh - 160px);
}
.bp-main {
  padding: 4px 0;
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0;
}
.bp-rail {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}

/* Desktop: rail is a real right-column sibling of .bp-main inside the
   .bp-frame grid. Sticky positioning keeps it pinned in view while the
   main content scrolls — same UX intent as the old position:fixed, but
   without the visual "floating overlay" feel (Vincent's call). */
@media (min-width: 901px) {
  .bp-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
  }
  .bp-rail {
    position: sticky;
    top: 90px;                          /* clear the shell-top header */
    align-self: start;
    /* Fixed-height rail — Open Export CTA stays pinned at the bottom
       at the same vertical position no matter how many items are
       queued. Queue list inside fills the available space (flex:1) and
       scrolls when it would push the CTA off-screen. */
    height: calc(100vh - 140px);
  }
  /* Picks list grows to fill, scrolls when it would push preview/CTA down. */
  .bp-rail .rail-list {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding-right: 2px;
  }
  /* Preview keeps a fixed window — does NOT grow with content. */
  .bp-rail .rail-preview { flex: 0 0 auto; max-height: 180px; }
  .bp-rail .rail-cta { flex: 0 0 auto; }
  .bp-rail .rail-empty { flex: 0 0 auto; }
}

.bp-header { display: flex; align-items: center; gap: 12px; }
.bp-glyph { width: 44px; height: 44px; border-radius: 999px; background: var(--bg-3); color: var(--ink-1); border: 1px solid var(--ink-1); display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.bp-name { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink-1); }
.bp-meta { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; margin-top: 4px; }
.bp-brief {
  padding: 4px 10px; border: 1px solid var(--ink-1); border-radius: 999px;
  font-size: 12px; font-family: "Inter", sans-serif;
  background: var(--bg); color: var(--ink-1);
  text-decoration: none; cursor: pointer;
}
.bp-brief:hover { background: var(--ink-1); color: var(--bg); }
.bp-brief:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--paper-3); }

/* ── Export log audit (admin) ───────────────────────────────────── */
.last-per-brand-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.export-row { border-bottom: 1px dashed var(--rule); }
.export-row:last-child { border-bottom: 0; }
.export-row summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; font-size: 13px;
}
.export-row summary::-webkit-details-marker { display: none; }
.export-row[open] summary { background: var(--bg-2); }
.export-row summary:hover { background: var(--bg-2); }

.export-when {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--ink-2); letter-spacing: .04em;
  min-width: 130px;
}
.export-user {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2);
}
.ava-mini {
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--paper-3); color: var(--ink); border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", "Inter", sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.export-count {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-2);
  padding: 3px 8px; border: 1px solid var(--rule); border-radius: 999px;
}
.export-chevron {
  font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-3);
  transition: transform .15s ease;
}
.export-row[open] .export-chevron { transform: rotate(180deg); }

.export-titles {
  margin: 0; padding: 8px 16px 14px 48px;
  font-size: 13px; line-height: 1.55; color: var(--ink-1);
  background: var(--bg-2);
}
.export-titles li { margin-bottom: 2px; }

/* ── Brand-page "Recent sends" history ───────────────────────────
   Rounded outer card, internal hairline dividers, no fussy borders.
   Same silhouette as the all-clients list / status rows so the
   brand page reads as one consistent system. */
.bp-history-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper); overflow: hidden;
}
.bp-history-row { border-bottom: 1px solid var(--rule); }
.bp-history-row:last-child { border-bottom: 0; }
.bp-history-row[open] { background: var(--paper-2); }
.bp-history-row summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.bp-history-row summary::-webkit-details-marker { display: none; }
.bp-history-row .ava {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
}
.bp-history-row .who { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13px; }
.bp-history-row .when { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); }
.bp-history-titles {
  margin: 0; padding: 4px 16px 14px 54px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.bp-history-titles li { margin-bottom: 2px; }

/* ── Brand brief subpage (handoff design) ───────────────────────── */
.brief-page { max-width: 880px; }
.brief-view { display: flex; flex-direction: column; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
/* Embedded inline expand on the brand page — bordered panel with close X. */
.brief-view-embed {
  position: relative;
  border: 1px solid var(--rule); border-radius: 16px;
  padding: 22px 24px; background: var(--paper);
}
.brief-close {
  position: absolute; top: 10px; right: 10px;
  all: unset; cursor: pointer;
  width: 28px; height: 28px;
  border: 1px solid var(--rule); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 13px;
  background: var(--bg);
}
.brief-close:hover { color: var(--ink-1); border-color: var(--ink-1); }
.brief-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.brief-edit-link { padding-top: 14px; border-top: 1px dashed var(--rule); }
.brief-head { display: flex; gap: 18px; align-items: flex-start; }
.brief-eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600;
}
.brief-name {
  font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600;
  font-size: 40px; line-height: 1.05; letter-spacing: -.025em;
  margin: 4px 0 8px;
}
.brief-bio {
  margin: 0 0 12px;
  font-size: 16px; color: var(--ink-3);
  line-height: 1.5; max-width: 540px;
}
.brief-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.brief-label {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600;
  margin-bottom: 8px;
}
.brief-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  padding-top: 18px; border-top: 1px dashed var(--rule);
}
@media (max-width: 720px) { .brief-grid { grid-template-columns: 1fr; } }

.brief-ops { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.brief-ops dt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; padding-top: 3px; }
.brief-ops dd { margin: 0; color: var(--ink-1); }
.brief-ops a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; }

.brief-voice { display: flex; flex-wrap: wrap; gap: 5px; }
.brief-palette { display: flex; gap: 6px; }
.brief-swatch {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--rule);
}

.brief-dodont {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  padding-top: 18px; border-top: 1px dashed var(--rule);
}
@media (max-width: 720px) { .brief-dodont { grid-template-columns: 1fr; } }
.brief-dodont ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-1); }
.brief-dodont li { margin-bottom: 4px; }

.brief-edit-wrap {
  margin-top: 22px;
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 16px 20px; background: var(--paper-2);
}
.brief-edit-wrap summary {
  cursor: pointer; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-2);
  list-style: none;
}
.brief-edit-wrap summary::-webkit-details-marker { display: none; }
.brief-edit-wrap[open] summary { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.brief-edit-form { display: flex; flex-direction: column; gap: 14px; }
.brief-edit-form .field { margin: 0; }
.brief-fieldset {
  border: 1px solid var(--rule); border-radius: 12px;
  padding: 16px 18px; background: var(--paper);
  display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.brief-fieldset legend {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-3);
  padding: 0 6px;
}

.bp-assignees {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--paper-2);
}
/* Per-user brand assignment cluster inside the admin Users page.
   Two-row layout: assigned chips on top, dashed "add" pills below. */
.user-brands {
  display: flex; flex-direction: column; gap: 6px;
  margin: 10px 0 0 54px;       /* indent under the user row's avatar column */
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.user-brands-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.user-brands-label {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600;
  min-width: 48px;
}
.user-brands-list { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.bp-assignees-label {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600;
}
.bp-assignees-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bp-assign-form { display: inline-flex; gap: 6px; align-items: center; }
.bp-assign-form select {
  border: 1px solid var(--rule); border-radius: 2px; padding: 5px 8px;
  background: var(--bg); font-family: inherit; font-size: 12.5px; color: var(--ink-1);
}
.bp-assignee-x {
  all: unset; cursor: pointer;
  margin-left: 4px; opacity: .6;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
}
.bp-assignee-x:hover { opacity: 1; color: var(--st-red); }

.bp-section-head { display: flex; align-items: baseline; gap: 10px; }
.bp-section-head h3 { margin: 0; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.bp-section-head .count { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.bp-section-head .spacer { flex: 1; }
.bp-cta-new { all: unset; cursor: pointer; padding: 4px 10px; background: var(--ink-1); color: var(--bg); border-radius: 2px; font-size: 12px; font-weight: 500; font-family: inherit; }
.bp-cta-new:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--paper-3); }

.bp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .bp-cards { grid-template-columns: 1fr; } }

/* Brand-page idea rows — Vincent aligned these to the All-ideas .ai-row
   layout. The row is a <button> rendering as a grid row; clicking it
   toggles queue membership. Brand column is dropped (we're on a brand
   page already), and the first column is a queue-check indicator
   instead of a bulk-select checkbox. */
/* Brand-page list head — uses the All-ideas .ai-list-head visual but
   matches the brand-row 4-col grid (no Brand col, no Rating col).
   Tags column shrunk to 140px so the title column gets the real estate
   it needs to render full titles without truncating. */
/* Specificity bumped to .ai-list-head.bp-list-head / .ai-row.bp-row so
   these grids beat the .ai-list-head / .ai-row 6-col grids declared
   later in the file (single-class specificity, later wins otherwise). */
.ai-list-head.bp-list-head {
  grid-template-columns: 36px minmax(0, 1fr) 240px 100px;
}
.ai-row.bp-row {
  grid-template-columns: 36px minmax(0, 1fr) 240px 100px;
}

.bp-row {
  /* 4-col grid: queue indicator · title·hook · tags · creator·added.
     Title col uses minmax(0, 1fr) so it can shrink/wrap properly inside
     the grid instead of overflowing. */
  grid-template-columns: 36px minmax(0, 1fr) 240px 100px;
  /* it's a <button> — reset native button styling */
  all: unset; box-sizing: border-box; width: 100%;
  background: var(--paper); color: var(--ink);
  cursor: pointer; text-align: left;
  border-bottom: 1px dashed var(--rule);
}
.bp-row:hover { background: var(--paper-2); }
.bp-row.is-queued { background: var(--paper-3); }
.bp-row > * { padding: 11px 12px; min-width: 0; align-self: center; }
/* First cell: center the queue-check indicator inside its 36px column,
   matches the All-ideas .bulk-cell centering for visual parity. */
.bp-row > .bp-row-check { justify-self: center; padding: 0; }
/* Title wraps fully (no truncation) so it's always readable in full.
   Hook gets a single line + ellipsis — gives a taste without dominating
   the row height when an idea has a long hook.
   Higher specificity (.ai-row.bp-row) is needed to override the
   .ai-row .body .t rule that lives later in the file and forces
   nowrap/ellipsis on All-ideas rows. */
.ai-row.bp-row .body .t { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; word-wrap: break-word; }
.ai-row.bp-row .body .h { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-row .creator { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; text-align: right; }
/* Mimics the native checkbox visual used by .bulk-select-all (which is a
   styled <input type=checkbox> with accent-color: var(--ink)). Same size,
   same fill, same border in unchecked state — both render identically. */
.bp-row-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.bp-row-check.empty {
  background: var(--paper); color: transparent;
  border: 1px solid var(--ink-3);
}
/* Already-exported pool — same row visuals, gentler weight */
.bp-cards-exported .bp-row { opacity: 0.7; }
.bp-cards-exported .bp-row:hover { opacity: 1; }

/* "Already exported" divider + dimmed cards below it. */
.bp-pool-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 8px;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600;
}
.bp-pool-divider .rule { flex: 1; height: 1px; background: var(--rule); }
.bp-pool-divider .count {
  padding: 1px 7px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 9.5px; color: var(--ink-3);
}
.bp-cards-exported .bp-card { opacity: 0.7; }
.bp-cards-exported .bp-card:hover { opacity: 1; }
.bp-cards-exported .bp-card.unselected { border-color: var(--rule); }

.bp-card {
  all: unset; cursor: pointer;
  border: 1px solid var(--ink); background: var(--paper); border-radius: 16px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
  position: relative; text-align: left;
  transition: border-color .15s ease;
}
.bp-card.unselected { border-color: var(--rule); }
.bp-card:hover { border-color: var(--ink); }
.bp-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bp-card-check {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.bp-card-check.empty { background: var(--paper); color: transparent; border: 1px solid var(--rule); }
.bp-card-title { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; padding-right: 30px; }
/* Hook: was italic — Refined drops italic emphasis in favor of mid-grey weight contrast. */
.bp-card-hook { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.bp-card-hook em { font-style: normal; color: var(--ink-2); }
.bp-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.bp-card-cred { flex: 1; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; text-align: right; }

/* Queue rail */
.rail-head { display: flex; align-items: baseline; gap: 6px; }
.rail-label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; }
.rail-badge { margin-left: auto; padding: 1px 7px; background: var(--ink); color: var(--paper); border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.rail-title { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.015em; }

.rail-list { display: flex; flex-direction: column; gap: 5px; }
.rail-pick {
  border: 1px solid var(--rule); background: var(--paper); border-radius: 10px;
  padding: 10px 12px; display: flex; gap: 8px; align-items: center;
  font-size: 12.5px; line-height: 1.25;
  cursor: grab;
  transition: border-color .15s ease;
}
.rail-pick:hover { border-color: var(--ink); }
.rail-pick.sortable-ghost { opacity: 0.4; background: var(--paper-3); }
.rail-pick.sortable-chosen { cursor: grabbing; }
.rail-pick .num { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); font-weight: 700; width: 14px; flex-shrink: 0; }
.rail-pick .body { flex: 1; min-width: 0; }
.rail-pick .body .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-pick .body .s { color: var(--ink-3); font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.rail-pick .grip { font-family: "JetBrains Mono", monospace; color: var(--ink-3); font-size: 14px; flex-shrink: 0; }

.rail-preview {
  padding: 12px 14px; background: var(--paper);
  border: 1px dashed var(--ink-3); border-radius: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  line-height: 1.6; color: var(--ink-2);
  margin-top: 8px;
  white-space: pre-wrap;
  max-height: 260px; overflow-y: auto;
}
.rail-preview .label { color: var(--ink-3); display: block; margin-bottom: 4px; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }

.rail-cta { margin-top: 10px; }

.rail-empty {
  border: 1px dashed var(--ink-3); border-radius: 12px;
  padding: 24px 16px; text-align: center; color: var(--ink-2);
  background: var(--paper);
}
.rail-empty .glyph { font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: .25em; color: var(--ink-3); margin-bottom: 10px; }
.rail-empty .ttl { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink-1); margin-bottom: 4px; }
.rail-empty .sub { font-size: 12px; color: var(--ink-3); }

/* ────────────────────────────────────────────────────────────────
   SLACK EXPORT (Sprint 2 · Variant B)
   ──────────────────────────────────────────────────────────────── */
.se-back {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--paper-2); border: 1px solid var(--rule);
  margin-bottom: 26px;
  border-radius: 12px;
}
.se-back .arr { font-size: 16px; color: var(--ink-2); text-decoration: none; }
.se-back .arr:hover { color: var(--ink-1); }
.se-back .crumb { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }

.se-stage { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; padding: 0 4px; }
@media (max-width: 900px) { .se-stage { grid-template-columns: 1fr; } }

.se-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.se-h h2 { margin: 0; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.se-h .live { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--st-green); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.se-h .count { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }

.se-queue { display: flex; flex-direction: column; gap: 8px; }
.se-q { border: 1px solid var(--rule); background: var(--paper); padding: 12px 14px; border-radius: 12px; display: flex; align-items: center; gap: 10px; cursor: grab; transition: border-color .15s ease; }
.se-q:hover { border-color: var(--ink); }
.se-q.sortable-ghost { opacity: 0.4; background: var(--paper-3); }
.se-q.sortable-chosen { cursor: grabbing; }
.se-q .n { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-3); font-weight: 700; width: 18px; flex-shrink: 0; }
.se-q .b { flex: 1; min-width: 0; }
.se-q .b .t { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13px; }
.se-q .b .s { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.se-q .g { font-family: "JetBrains Mono", monospace; color: var(--ink-3); font-size: 14px; flex-shrink: 0; }

.se-hint { margin-top: 12px; padding: 10px 14px; background: var(--paper-2); border: 1px dashed var(--ink-3); border-radius: 10px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }

.se-preview {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 18px 20px; display: flex; gap: 12px; border-radius: 14px;
}
.se-preview .ava { width: 36px; height: 36px; background: #4a154b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: "Inter", sans-serif; flex-shrink: 0; border-radius: 4px; }
.se-preview .who { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-family: "Inter", sans-serif; }
.se-preview .who .name { font-weight: 700; font-size: 14px; color: var(--ink-1); }
.se-preview .who .when { font-size: 11px; color: var(--ink-3); }
.se-preview .msg { font-family: "Inter", system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: var(--ink-1); white-space: pre-wrap; }
.se-preview .msg b { font-weight: 700; }

.copy-status {
  margin-top: 10px; min-height: 18px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
}
.copy-status.ok { color: var(--st-green); }
.copy-status.err { color: var(--st-red); }

.copy-fallback {
  margin-top: 10px; padding: 10px 14px;
  background: var(--st-yellow-soft); border-left: 3px solid var(--st-yellow);
  border-radius: 8px;
}
.copy-fallback p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-1); }
.copy-fallback textarea {
  width: 100%; min-height: 120px;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 8px 10px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  background: var(--bg); color: var(--ink-1);
}

.mark-sent-form {
  margin-top: 18px; padding: 16px 18px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mark-sent-form .mark-sent-hint {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase;
  flex: 1; min-width: 160px;
}

/* ────────────────────────────────────────────────────────────────
   DASHBOARD (Sprint 3 · brief §4.1)
   ──────────────────────────────────────────────────────────────── */
.dash-stage { display: flex; flex-direction: column; gap: 24px; }
.dash-top { display: flex; align-items: flex-start; gap: 16px; }
.dash-hello .date { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; }
.dash-hello h2 { margin: 4px 0 0; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 30px; letter-spacing: -.02em; line-height: 1; }
/* Same proportions as .dash-schedule-split below so the divider between
   columns lines up vertically across rows 1 and 2. */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
@media (max-width: 1000px) { .dash-cols { grid-template-columns: 1fr; } }
.dash-col h3 { margin: 0 0 4px; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.dash-col .sub { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 12px; }
.dash-rows { display: flex; flex-direction: column; gap: 8px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
/* Footer of the Your-deliverables column: sub on the left, legend on the right.
   margin-top: auto pushes the whole row to the bottom of the flex column so
   it always sits at the panel base no matter how many status rows are above. */
.deliverables-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}
.deliverables-foot .legend { margin-top: 0; }
.legend-item { display: flex; align-items: center; gap: 5px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--ink-2); text-transform: uppercase; font-weight: 600; }
.legend-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend-item.red    i { background: var(--st-red); }
.legend-item.yellow i { background: var(--st-yellow); }
.legend-item.green  i { background: var(--st-green); }
.legend-item.blue   i { background: var(--st-blue); }

.admin-band { margin-top: 8px; padding-top: 22px; border-top: 1px dashed var(--ink-1); }
.admin-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-tag { background: var(--ink-1); color: var(--bg); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; padding: 3px 9px; border-radius: 2px; text-transform: uppercase; font-weight: 700; }
.admin-head h3 { margin: 0; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.015em; }
.admin-head .meta-line { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }

/* ── flatpickr · v3 monochrome theme ───────────────────────────
   Overrides the lib's default light-blue look. Uses --bg/--ink-*
   tokens, so it switches automatically between light + dark theme.
   !important is used on the few backgrounds the lib hard-codes white. */
.flatpickr-calendar {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
  border-radius: 14px;
  font-family: "Inter Tight", sans-serif;
  width: 264px;
  padding: 8px;
  color: var(--ink);
}
.flatpickr-innerContainer,
.flatpickr-rContainer {
  background: var(--bg) !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowBottom::before { border-bottom-color: var(--ink-1); }
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::after  { border-bottom-color: var(--bg); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--ink-1); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--bg); }

/* Month + year nav row */
.flatpickr-months { padding: 2px 0; background: var(--bg) !important; }
.flatpickr-months .flatpickr-month {
  color: var(--ink-1) !important;
  background: var(--bg) !important;
  height: 30px;
}
.flatpickr-current-month {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 0 0;
  height: 26px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 13px;
  background: var(--bg);
  color: var(--ink-1);
  appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--bg-2); }
.flatpickr-current-month input.cur-year {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink) !important;
  background: var(--paper) !important;
}
.flatpickr-current-month .numInputWrapper { background: var(--bg) !important; }
.flatpickr-current-month .numInputWrapper:hover { background: var(--bg-2) !important; }
.flatpickr-current-month .arrowUp::after   { border-bottom-color: var(--ink-2); }
.flatpickr-current-month .arrowDown::after { border-top-color: var(--ink-2); }

/* Prev/next month arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
  color: var(--ink-2);
  fill: var(--ink-2);
  padding: 6px;
  height: 30px;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: var(--ink-2); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--ink-1); }

/* Weekday header row */
.flatpickr-weekdays { height: 22px; background: var(--bg) !important; }
.flatpickr-weekdaycontainer { background: var(--bg) !important; }
span.flatpickr-weekday {
  color: var(--ink-3) !important;
  background: var(--bg) !important;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Day cells */
.flatpickr-days, .dayContainer {
  width: 252px;
  min-width: 252px;
  max-width: 252px;
}
.flatpickr-day {
  width: 32px;
  max-width: 32px;
  height: 32px;
  line-height: 32px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink) !important;
  background: transparent !important;
  border: none;
  border-radius: 999px;
  margin: 1px 0;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--paper-3);
  border: none;
  color: var(--ink);
}
.flatpickr-day.today {
  border: none;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}
.flatpickr-day.today:hover { background: var(--paper-3); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: none;
  box-shadow: none;
  font-weight: 600;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--ink-4) !important;
  background: transparent !important;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover { color: var(--ink-2); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--ink-4);
  background: transparent;
  border: none;
}

/* ── Combobox · typeahead with suggestion list ────────────────── */
.combo-wrap { position: relative; }
.combo-suggestions {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 12px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
}
/* Filtered-out options collapse fully so the panel shrinks with the matches. */
.combo-suggestions button[hidden] { display: none !important; }
.combo-suggestions button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: var(--bg);
  border: none;
  border-bottom: 1px dashed var(--rule);
  cursor: pointer;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-1);
  text-align: left;
}
.combo-suggestions button:last-child { border-bottom: none; }
.combo-suggestions button:hover,
.combo-suggestions button.focus {
  background: var(--bg-2);
}
.combo-suggestions button .ava {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 9px;
  color: var(--ink-1);
  flex-shrink: 0;
}

/* ── Reminder board ────────────────────────────────────────────── */
.reminder-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.reminder-form .input-box { font-size: 13px; padding: 6px 8px; }
.reminder-form-row { display: grid; grid-template-columns: 1.2fr 1.2fr 110px auto; gap: 6px; }
@media (max-width: 600px) { .reminder-form-row { grid-template-columns: 1fr 1fr; } }
.reminder-add { padding: 4px 12px; font-size: 12px; box-shadow: none; }

.reminder-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.reminder-list::-webkit-scrollbar { width: 8px; }
.reminder-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

.reminder-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); height: 65px; flex-shrink: 0; box-sizing: border-box; overflow: hidden; }
/* Reminders keep the colored left border + soft-tint background per kickoff
   decision — reminders are actionable TODOs (read more urgent than the
   passive cadence info on dashboard status rows), so the louder treatment
   stays here. */
.reminder-row.overdue { border-left: 3px solid var(--st-red); background: var(--st-red-soft); }
.reminder-row.today   { border-left: 3px solid var(--st-yellow); background: var(--st-yellow-soft); }

.reminder-done { margin: 0; flex-shrink: 0; margin-top: 2px; }
/* CSS-drawn checkbox — no font glyph, consistent across browsers.
   The ::after is the checkmark, drawn from two borders rotated 45deg.
   Visible on hover only — keeps the row clean at rest, clear affordance on intent. */
.reminder-done button {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-3);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  padding: 0;
  position: relative;
  display: block;
  transition: border-color 80ms ease, background 80ms ease;
}
.reminder-done button:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.reminder-done button:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.reminder-done button:hover::after,
.reminder-done button:focus-visible::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 6px; height: 11px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

/* ── Reminder tabs · Active / Recently done ─────────────────── */
.reminder-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
}
.reminder-head h3 { margin: 0 0 6px; }
.reminder-tabs {
  display: flex;
  gap: 4px;
}
.reminder-tab {
  background: none;
  border: none;
  padding: 6px 10px 8px;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;  /* overlap parent border */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reminder-tab:hover { color: var(--ink-1); }
.reminder-tab.on {
  color: var(--ink-1);
  border-bottom-color: var(--ink);
}
.reminder-tab .n {
  font-size: 9.5px;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0;
}
.reminder-tab.on .n {
  background: var(--ink-1);
  color: var(--bg);
}
/* Reminders panel matches the Your-deliverables column dynamically.
   Grid stretches both .dash-col children of row 1 to the same height
   (default behavior). Then we flex-fill the reminders content so it
   occupies the full column instead of sitting at the top with empty
   space below. Both tab panes share the same flex slot → no jump on
   tab switch, panel always matches Deliverables. */
.dash-cols .dash-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 500px;
}
/* Deliverables status rows also scroll if there are more than ~7 brands. */
.dash-cols .dash-col .dash-rows {
  overflow-y: auto;
  min-height: 0;
}
.reminder-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.reminder-pane .reminder-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 278px !important;
  overflow-y: auto !important;
}
.reminder-pane[hidden] { display: none !important; }
/* Push the Recently-done sub line to the bottom of its pane,
   mirroring the deliverables-foot pattern on the left column. */
.reminder-pane-foot {
  margin-top: auto;
  padding-top: 12px;
}

/* ── Recently done rows · shared with active rows but dimmed ── */
.reminder-row.done {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  opacity: 0.75;
  align-items: center;
}
.reminder-row.done .reminder-text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--ink-2);
}
.reminder-row.done .reminder-meta { color: var(--ink-3); }
.reminder-done-mark {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 2px;
  background: var(--ink-1);
  position: relative;
}
.reminder-done-mark::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(45deg);
}
.reminder-undo-form { margin: 0; flex-shrink: 0; }
.reminder-undo {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  padding: 4px 8px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
}
.reminder-undo:hover {
  border-color: var(--ink-1);
  color: var(--ink-1);
  background: var(--bg);
}
.reminder-completed {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ink-3);
}

.reminder-body { flex: 1; min-width: 0; }
.reminder-text { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13.5px; line-height: 1.4; word-wrap: break-word; }
.reminder-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
/* Brand chip inside a reminder row is tight on space — shrink it back
   to the v3 dimensions instead of the Phase 3 standard chip size. */
.reminder-meta .chip { font-size: 11px; padding: 2px 10px 2px 2px; gap: 6px; }
.reminder-meta .chip .ava { width: 18px; height: 18px; font-size: 9px; }
.reminder-ava { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--bg); border: 1px solid var(--ink-1); font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 8px; color: var(--ink-1); }
.reminder-name { color: var(--ink-2); font-weight: 600; }
.reminder-anyone { color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 9px; }
.reminder-due { margin-left: auto; font-weight: 700; color: var(--ink-2); }
.reminder-row.overdue .reminder-due { color: var(--st-red); }
.reminder-row.today   .reminder-due { color: var(--st-yellow); }

/* ── Upcoming schedule · calendar grid + scrollable list ───────── */
.dash-schedule { margin-top: 12px; }
.dash-schedule-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-schedule-head h3 { margin: 0; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 16px; }
.dash-schedule-head .meta { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.dash-schedule-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
@media (max-width: 1000px) { .dash-schedule-split { grid-template-columns: 1fr; gap: 18px; } }

/* Calendar grid (LEFT) */
.dash-cal { border: 1px solid var(--rule); border-radius: 14px; padding: 16px; background: var(--paper); }
.dash-cal-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dash-cal-title { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13px; }
.dash-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 4px; }
.dash-cal-dow span { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 4px 0; font-weight: 600; }
.dash-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.dash-cal-cell { background: var(--bg); min-height: 56px; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.dash-cal-cell.dim { background: var(--bg-2); }
.dash-cal-cell.dim .dash-cal-num { color: var(--ink-4); }
.dash-cal-cell.today { box-shadow: inset 0 0 0 2px var(--ink-1); }
.dash-cal-cell.today .dash-cal-num { color: var(--ink-1); font-weight: 700; }
.dash-cal-num { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-2); line-height: 1; }
.dash-cal-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: auto; }
.dash-cal-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.dash-cal-dot.st-red    { background: var(--st-red); }
.dash-cal-dot.st-yellow { background: var(--st-yellow); }
.dash-cal-dot.st-green  { background: var(--st-green); }
.dash-cal-dot.st-blue   { background: var(--st-blue); }
.dash-cal-dot.future    { background: transparent; border: 1px solid var(--ink-3); }
.dash-cal-more { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-3); margin-left: 2px; }
.dash-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.dash-cal-legend .dash-cal-dot { margin-right: 4px; }

/* Scrollable week list (RIGHT) */
.dash-sched-list { max-height: 460px; overflow-y: auto; padding-right: 6px; border: 1px solid var(--rule); border-radius: 14px; padding: 8px 16px; background: var(--paper); }
.dash-sched-list::-webkit-scrollbar { width: 8px; }
.dash-sched-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.dash-sched-week { margin: 12px 0 18px; }
.dash-sched-week-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 2px; }
.dash-sched-week-head .lbl { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11px; letter-spacing: .1em; }
.dash-sched-week-head .rng { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); }
.dash-sched-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--rule); text-decoration: none; color: var(--ink-1); }
.dash-sched-row:hover { background: var(--bg-2); }
.dash-sched-row .day { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); min-width: 84px; }
.dash-sched-row .bul { font-size: 14px; color: var(--ink-2); width: 12px; text-align: center; }
.dash-sched-row .ava { width: 24px; height: 24px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; }
.dash-sched-row .name { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-sched-row .due { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); }
.dash-sched-row .future { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; min-width: 96px; text-align: right; }
.dash-sched-row .pill { font-size: 10px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .06em; }
.dash-sched-row .pill.st-red    { background: var(--st-red-soft);    border-color: var(--st-red);    color: var(--st-red); }
.dash-sched-row .pill.st-yellow { background: var(--st-yellow-soft); border-color: var(--st-yellow); color: var(--st-yellow); }
.dash-sched-row .pill.st-green  { background: var(--st-green-soft);  border-color: var(--st-green);  color: var(--st-green); }
.dash-sched-row .pill.st-blue   { background: var(--st-blue-soft);   border-color: var(--st-blue);   color: var(--st-blue); }

.dash-cal-foot { font-size: 11px; color: var(--ink-3); margin-top: 10px; }

/* ────────────────────────────────────────────────────────────────
   ALL IDEAS ARCHIVE (Sprint 3 · brief §4.4)
   ──────────────────────────────────────────────────────────────── */
.ai-frame {
  display: grid; grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 160px);
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
}
@media (max-width: 900px) { .ai-frame { grid-template-columns: 1fr; } }
.ai-rail {
  padding: 22px 18px; border-right: 1px solid var(--rule);
  background: var(--bg-2); display: flex; flex-direction: column; gap: 22px;
}
.ai-search-form { margin: 0; }
.ai-search {
  border: 1px solid var(--rule); background: var(--paper); padding: 10px 14px; border-radius: 999px;
  font-family: "Inter", sans-serif; font-size: 13px; color: var(--ink-3);
  display: flex; gap: 8px; align-items: center;
  transition: border-color .15s ease;
}
.ai-search:focus-within { border-color: var(--ink); }
.ai-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--ink);
}
.ai-search input::placeholder { color: var(--ink-3); }

.ai-group h5 { margin: 0 0 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.ai-group h5 .active { color: var(--ink); }
.ai-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.ai-pills a, .ai-pills a:visited { text-decoration: none; }
.ai-clear-all { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink); text-transform: uppercase; font-weight: 600; text-decoration: none; }
.ai-rail-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.ai-rail-foot > span { flex: 1; }            /* spacer when clear-all is absent */
.ai-rail-foot .ai-clear-all { flex: 1; }
.ai-filter-close {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ink-1); border-radius: 2px;
  background: var(--bg); color: var(--ink-1);
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.ai-filter-close:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--paper-3); }

.ai-main { padding: 22px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ai-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ai-title-row h2 { margin: 0; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 28px; letter-spacing: -.02em; }
.ai-title-row .count { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.ai-title-row .sort-hint { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-3); }
.ai-title-row .sort-hint b { color: var(--ink-1); }

.ai-list { border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--paper); }
.ai-list-head {
  display: grid; grid-template-columns: 36px 160px 1fr 240px 80px 130px;
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  color: var(--ink-3); text-transform: uppercase; font-weight: 600;
}
.ai-list-head > * { padding: 9px 12px; border-right: 1px dashed var(--rule); display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.ai-list-head > *:last-child { border-right: 0; justify-content: flex-end; }
.ai-list-head .hint { color: var(--ink-4); }
.ai-list-head .active { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); padding-bottom: 7px; margin-bottom: -1px; }
.ai-list-head a:hover { color: var(--ink-1); }

.ai-row {
  display: grid; grid-template-columns: 36px 160px 1fr 240px 80px 130px;
  border-bottom: 1px dashed var(--rule); align-items: center;
  text-decoration: none; color: var(--ink-1);
}
.ai-row:last-child { border-bottom: 0; }
.ai-row:hover { background: var(--bg-2); }
.ai-row.outlier { background: var(--paper-3); }
html[data-theme="dark"] .ai-row.outlier, body[data-theme="dark"] .ai-row.outlier { background: var(--paper-3); }
.ai-row > div { padding: 11px 12px; min-width: 0; }
.ai-row .ai-row-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ai-row .ai-row-brands { display: flex; flex-wrap: wrap; gap: 4px; }
.ai-row .body .t { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-row .body .h { font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-row .creator { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; text-align: right; }

/* Archive view: row is a div with a select checkbox; title is the click target. */
.ai-row.archive-row .row-link { text-decoration: none; color: var(--ink-1); display: block; }
.ai-row.archive-row .row-link:hover .t { text-decoration: underline; }

/* (Older .archive-list grid override removed — all lists now share the 6-col
   grid since every row has a checkbox column.) */

.bulk-cell {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
}
.bulk-cell input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer;
}

/* Bulk action toolbar above the archive list. */
.bulk-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px;
  margin-bottom: 8px;
}
.bulk-select-all {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .1em; color: var(--ink-2); text-transform: uppercase; font-weight: 600;
  cursor: pointer;
}
.bulk-select-all input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer;
}
.bulk-count { min-width: 80px; }
.bulk-count.on { color: var(--ink-1); }

.bulk-toolbar .btn-secondary[disabled] {
  opacity: 0.4; pointer-events: none;
  border-color: var(--ink-3); color: var(--ink-3);
}
.btn-secondary.danger { color: var(--st-red); border-color: var(--st-red); }
.btn-secondary.danger:hover { background: var(--st-red); color: #fff; }

/* Mobile bulk action — occupies the SAME corner as the + New idea FAB.
   When items are selected, this swaps in (and the FAB swaps out). */
.bulk-mobile-bar {
  position: fixed; right: 20px; bottom: 24px; z-index: 45;
  display: inline-flex; gap: 8px; align-items: center;
  padding: 0; background: transparent; border: 0;
}
/* !important here because .mobile-only also carries !important and would
   otherwise force the bar visible regardless of the [hidden] attribute. */
.bulk-mobile-bar[hidden] { display: none !important; }
/* Buttons inside match the FAB's exact button language (btn-primary). */
.bulk-mobile-bar .btn-primary,
.bulk-mobile-bar .btn-secondary {
  padding: 11px 22px; font-size: 14px; letter-spacing: .02em; line-height: 1;
}
.bulk-count-mobile { display: none; }

/* The corner is one button at a time — FAB by default, bulk action when
   items are selected. */
body.has-bulk-selection .fab { display: none !important; }

/* Mobile: clean list by default. Tapping the single toolbar toggle enters
   select mode — checkboxes overlay each row in the top-right corner. */
.bulk-mobile-toggle { display: none; }
.bulk-mobile-toggle .when-on { display: none; }

@media (max-width: 720px) {
  /* Hide the in-toolbar action buttons (floating bar replaces them). */
  .bulk-toolbar [data-bulk-btn] { display: none; }

  /* Default mobile state: only the toggle button is visible. */
  .bulk-toolbar .bulk-select-all { display: none; }
  .bulk-toolbar .bulk-mobile-toggle {
    all: unset; cursor: pointer;
    padding: 6px 12px; border: 1px solid var(--ink-1); border-radius: 2px;
    background: var(--bg); color: var(--ink-1);
    font-family: "JetBrains Mono", monospace; font-size: 11px;
    letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
    display: inline-flex;
  }

  /* Frame goes edge-to-edge on mobile — kill the side gutter the shell-canvas
     padding leaves around it. Top/bottom borders + dashed row dividers still
     do all the visual separation. */
  .ai-frame {
    margin-left: -24px;
    margin-right: -24px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .ai-main { padding: 16px 14px; }

  /* Compact mobile row layout — brand + tag share the top line,
     title and hook span the full row width below them, bottom-meta
     line carries creator/date on the left and stars on the right.
     No left-indent under the brand chip → no wasted column. */
  .ai-list .ai-row {
    position: relative;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand   tags"
      "body    body"
      "creator stars";
    gap: 6px 10px;
    padding: 12px 14px;
  }
  .ai-list .ai-row > div:nth-child(2) { grid-area: brand; align-self: center; justify-self: start; }
  .ai-list .ai-row > div.body         { grid-area: body;  align-self: start; }
  .ai-list .ai-row > div:nth-child(4) { grid-area: tags;  align-self: center; justify-self: end; }
  .ai-list .ai-row > div:nth-child(5) { grid-area: stars; align-self: center; justify-self: end; }
  .ai-list .ai-row > div.creator      { grid-area: creator; align-self: center; text-align: left; justify-self: start; }
  /* Title wraps naturally — no ellipsis on mobile, full text is more useful. */
  .ai-list .ai-row > div.body .t      { font-size: 14px; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; }
  .ai-list .ai-row > div.body .h      { font-size: 12px; }
  /* Drop empty tag cell so its row doesn't leave a phantom gap. */
  .ai-list .ai-row > div:nth-child(4):empty { display: none; }
  .ai-list .bulk-cell {
    display: none;                                /* hidden when not selecting */
    position: absolute; top: 6px; right: 8px; z-index: 2;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--rule); border-radius: 999px;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(10, 10, 10, .08);
  }

  /* Select mode: overlay appears, toolbar swaps to count + cancel label. */
  body.select-mode .ai-list .bulk-cell { display: inline-flex; }
  body.select-mode .ai-list .ai-row .body { padding-right: 44px; }   /* clear the overlay */
  body.select-mode .bulk-toolbar .bulk-select-all { display: inline-flex; }
  body.select-mode .bulk-toolbar .bulk-mobile-toggle .when-off { display: none; }
  body.select-mode .bulk-toolbar .bulk-mobile-toggle .when-on  { display: inline; }
}
/* + New FAB stays at its normal position; the bulk action bar sits beside it
   at `right: 180px`, so they don't overlap and no lift is needed. */

/* ────────────────────────────────────────────────────────────────
   IDEA DETAIL (Sprint 3 · brief §4.5)
   ──────────────────────────────────────────────────────────────── */
.id-back {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--paper-2); border: 1px solid var(--rule);
  margin-bottom: 26px; border-radius: 12px;
}
.id-back .arr { font-size: 16px; color: var(--ink-2); text-decoration: none; }
.id-back .arr:hover { color: var(--ink-1); }
.id-back .crumb { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }

.id-stage { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; padding: 0 4px; }
@media (max-width: 900px) { .id-stage { grid-template-columns: 1fr; } }

.id-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.id-niche { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.id-title { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 38px; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 24px; color: var(--ink-1); }
.id-url { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); background: var(--paper-2); padding: 12px 16px; border-radius: 14px; margin-bottom: 24px; }
.id-url .play { width: 36px; height: 36px; border-radius: 999px; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.id-url .body { flex: 1; min-width: 0; }
.id-url .body .lbl { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 3px; }
.id-url .body .u { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-url .open { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; text-decoration: none; }
.id-url .open:hover { color: var(--ink-1); }
.id-hook { font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 20px; color: var(--ink-2); line-height: 1.4; letter-spacing: -.01em; margin-bottom: 6px; }
.id-script { font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; background: var(--paper-2); border: 1px solid var(--rule); padding: 16px 18px; border-radius: 14px; }

.id-rating-card { border: 1px solid var(--ink); padding: 18px 22px; margin-bottom: 18px; border-radius: 16px; background: var(--paper); }
.id-rating-card .label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.id-rating-card .big-stars { display: inline-flex; gap: 5px; }
.id-rating-card .big-stars button {
  all: unset; cursor: pointer;
  font-size: 32px; line-height: 1;
  transition: transform .08s ease;
}
.id-rating-card .big-stars button:hover { transform: scale(1.1); }
.id-rating-card .big-stars button.on  { color: var(--ink); }
.id-rating-card .big-stars button.off { color: var(--ink-4); opacity: 0.55; }
.id-rating-card .big-stars button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.id-rating-card .help { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.id-rating-card .help a { color: var(--ink-2); margin-left: 8px; font-style: normal; }

.id-side h4 { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; margin: 0 0 8px; }
.id-side .creator { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.id-side .creator .a { width: 22px; height: 22px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--ink-1); display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700; }
.id-side .stamp { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); margin-top: 4px; letter-spacing: .04em; }

.id-archive {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2);
  font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px; border-radius: 12px; margin-top: 20px;
  cursor: pointer;
}
.id-archive:hover { color: var(--ink-1); border-color: var(--ink-1); }
.id-archive .ico { font-size: 14px; }

/* ────────────────────────────────────────────────────────────────
   EXCEL IMPORT WIZARD (Sprint 4 · brief §4.7)
   ──────────────────────────────────────────────────────────────── */
.xl-wrap { max-width: 1200px; }
.xl-head { margin-bottom: 32px; }

.xl-mobile-warn {
  display: none; margin-top: 16px;
  background: var(--st-yellow-soft); border-left: 3px solid var(--st-yellow);
  padding: 10px 14px; font-size: 13px; border-radius: 2px;
}
@media (max-width: 900px) {
  .xl-mobile-warn { display: block; }
}

.xl-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.xl-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 26px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); }
.xl-steps li.cur { border-color: var(--ink); }
.xl-steps li .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--paper-3); color: var(--ink);
  font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 14px;
}
.xl-steps li.cur .num { background: var(--ink-1); color: var(--bg); }
.xl-steps li h3 { margin: 0 0 4px; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.xl-steps li p { margin: 0 0 10px; color: var(--ink-2); font-size: 13.5px; }

.xl-drop {
  border: 2px dashed var(--ink-3); border-radius: 14px;
  padding: 28px 22px; background: var(--paper-2); margin-top: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  transition: background .15s ease, border-color .15s ease;
}
.xl-drop.is-over { background: var(--paper-3); border-color: var(--ink); }
.xl-drop input[type="file"] { display: none; }
.xl-drop-label {
  flex: 1; min-width: 240px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.xl-drop-label .glyph { font-family: "JetBrains Mono", monospace; font-size: 18px; color: var(--ink-3); }
.xl-drop-label .ttl { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 15px; }
.xl-drop-label .hint { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }

.xl-warn {
  margin-top: 12px; padding: 10px 14px;
  background: var(--st-yellow-soft); border-left: 3px solid var(--st-yellow);
  border-radius: 8px; font-size: 13px;
}
.xl-warn a { color: var(--ink-1); }

.xl-table { width: 100%; border-collapse: collapse; margin: 18px 0; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.xl-table thead th {
  text-align: left; padding: 11px 14px;
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; font-weight: 600;
}
.xl-table thead th.n { width: 40px; }
.xl-table thead th.status { width: 130px; }
.xl-table tbody td { padding: 10px 12px; border-bottom: 1px dashed var(--rule); vertical-align: top; font-size: 13px; }
.xl-table tbody tr.ok td.n { color: var(--st-green); font-weight: 700; }
.xl-table tbody tr.err td.n { color: var(--st-red); font-weight: 700; }
.xl-table tbody tr.err { background: var(--st-red-soft); }
.xl-table tbody tr.ok { background: var(--st-green-soft); }
html[data-theme="dark"] .xl-table tbody tr.ok,
body[data-theme="dark"] .xl-table tbody tr.ok { background: var(--st-green-soft); }
html[data-theme="dark"] .xl-table tbody tr.err,
body[data-theme="dark"] .xl-table tbody tr.err { background: var(--st-red-soft); }

.xl-flags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.xl-flags span {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  padding: 1px 6px; border-radius: 2px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.xl-flags .on  { background: var(--st-green); color: #fff; }
.xl-flags .off { background: var(--bg-3); color: var(--ink-3); }

.xl-inline { display: inline-flex; gap: 4px; align-items: center; margin: 4px 6px 0 0; }
.xl-inline .input-box { padding: 4px 8px; font-size: 12.5px; }
.xl-mini { min-width: 120px; }
.xl-inline-fixes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.xl-suggest { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.xl-tag-fix { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }

.xl-ok  { color: var(--st-green); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.xl-bad { color: var(--st-red);   font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.xl-errs { margin: 4px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--ink-2); }
.xl-errs li { margin-bottom: 2px; }

.xl-commit-bar {
  display: flex; align-items: center; gap: 14px;
  position: sticky; bottom: 0; padding: 14px 0;
  background: var(--bg); border-top: 1px solid var(--rule);
}

/* ────────────────────────────────────────────────────────────────
   MOBILE / DESKTOP VISIBILITY UTILITIES
   ──────────────────────────────────────────────────────────────── */
.mobile-only { display: none !important; }
.desktop-inline { display: inline; }
@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .desktop-inline { display: none; }
  .mobile-only { display: inline-flex !important; }
  /* Make any .desktop-only nav/anchor truly gone (overrides inline-flex). */
  nav .desktop-only { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   MOBILE FLOWS (Sprint 4 · brief §4.2 / §4.3 / §4.6 mobile substitutions)
   ──────────────────────────────────────────────────────────────── */

/* ── Mobile entry-form wizard (3 pages, brief §4.3) ── */
@media (max-width: 720px) {
  /* The desktop modal becomes a full-screen sheet that slides up. */
  .modal-scrim { padding: 0; align-items: stretch; }
  .modal {
    width: 100%; max-width: 100%; min-height: 100vh;
    margin: 0; padding: 14px 14px 0;            /* foot lives at bottom, sticky */
    border: 0; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column;
  }
  .modal-head { padding-bottom: 10px; margin-bottom: 12px; }
  .modal-head h3 { font-size: 18px; }
  /* Form spans the modal height. Fields stack from the upper-middle down so
     they sit in the thumb-reach zone without being crammed at the very bottom.
     wiz-foot pinned to the modal bottom via auto margin. */
  form[data-entry-form] {
    display: flex; flex-direction: column; flex: 1;
  }
  form[data-entry-form][data-wizard] {
    padding-top: clamp(80px, 18vh, 180px);    /* breathing room above fields */
  }
  form[data-entry-form][data-wizard] .field.wiz-hide,
  form[data-entry-form][data-wizard] .require.wiz-hide { display: none; }
  form[data-entry-form][data-wizard] .modal-foot { display: none; }
  form[data-entry-form][data-wizard] .field { margin-bottom: 18px; }
  /* Push the wizard footer to the modal bottom regardless of field count. */
  form[data-entry-form][data-wizard] .wiz-foot { margin-top: auto; }

  .wiz-progress {
    display: flex; gap: 4px; flex: 1; justify-content: center;
    margin: 0 8px;
  }
  .wiz-progress i {
    width: 24px; height: 4px; border-radius: 999px; background: var(--rule);
    display: inline-block;
  }
  .wiz-progress i.done { background: var(--ink-1); }
  .wiz-progress i.cur  { background: var(--ink); }

  /* Wizard footer: sticky to the modal's bottom (not fixed to viewport, so it
     can't collide with mobile browser chrome or other fixed bars). */
  .wiz-foot {
    position: sticky; bottom: 0;
    margin: 16px -14px 0;                       /* full-bleed across modal padding */
    padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: var(--bg); border-top: 1px solid var(--rule);
    display: flex; gap: 8px; align-items: center;
    z-index: 2;
  }
  .wiz-foot .btn-primary,
  .wiz-foot .btn-secondary { padding: 10px 16px; font-size: 13px; }
  .wiz-foot .hidden { display: none !important; }
}
/* On desktop, hide the wizard chrome entirely. */
@media (min-width: 721px) {
  .wiz-progress, .wiz-foot, .modal-head .wiz-only { display: none; }
}

/* ── Brand page: bottom-sheet queue + floating Export (mobile) ── */
@media (max-width: 900px) {
  .bp-frame {
    grid-template-columns: 1fr;
    /* Edge-to-edge on mobile — counter shell-canvas's 24px side padding. */
    margin-left: -24px; margin-right: -24px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .bp-main { border-right: 0; padding: 16px; }
  .bp-cards { grid-template-columns: 1fr; }
  /* Queue rail collapses into a slide-up bottom sheet (overrides desktop fixed). */
  .bp-rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40;
    width: auto;                                /* override desktop `width: 320px` */
    height: auto;
    max-height: 75vh; overflow-y: auto;
    transform: translateY(100%);
    transition: transform .25s ease;
    border: 0;
    border-top: 1px solid var(--ink-1);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 12px 12px 0 0;
    padding: 14px 14px 90px;
  }
  /* Reset the desktop sticky/scroll behaviors inside the sheet. */
  .bp-rail .rail-list { overflow-y: visible; }
  .bp-rail .rail-preview { max-height: none; }
  .bp-rail.is-open { transform: translateY(0); }
  /* Floating bottom bar: counter pill + Export → button. */
  .bp-floating-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    padding: 12px 16px; align-items: center; gap: 12px;
    background: var(--bg); border-top: 1px solid var(--rule);
  }
  .bp-floating-bar .picked-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--ink-1); border-radius: 999px;
    font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em;
    font-weight: 700; color: var(--ink-1); background: var(--bg);
  }
  .bp-floating-bar .spacer { flex: 1; }
  .bp-floating-bar .btn-primary { padding: 10px 18px; }
}
@media (min-width: 901px) {
  .bp-floating-bar { display: none; }
}

/* ── Slack export · mobile: Queue / Preview tabs + bottom CTA stack ── */
@media (max-width: 900px) {
  .se-stage { grid-template-columns: 1fr; gap: 0; }
  .se-pane[data-pane]:not(.on) { display: none; }

  /* Pane content bottom padding is set below alongside .se-action-stack so
     it clears the full bottom UI (tabs + action stack). */

  /* Tabs row: pinned to the very bottom of the viewport. */
  .se-tabs {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 35;
    display: flex; gap: 0; margin: 0;
    background: var(--bg); border-top: 1px solid var(--rule);
  }
  .se-tabs button {
    all: unset; cursor: pointer;
    flex: 1; text-align: center;
    padding: 16px 8px calc(env(safe-area-inset-bottom, 0px) + 22px);
    font-family: "JetBrains Mono", monospace; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
    color: var(--ink-3);
  }
  .se-tabs button.on {
    color: var(--ink-1); border-bottom: 2px solid var(--ink);
    margin-bottom: -1px;
  }

  /* Action stack: stacked CTAs just above the tabs row.
     bottom offset = tabs row visual height (~70px incl. safe-area). */
  .se-action-stack {
    position: fixed; left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
    z-index: 34;
    padding: 12px 18px;
    background: var(--bg); border-top: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 10px;
  }
  .se-action-stack .btn-primary,
  .se-action-stack .btn-secondary { font-size: 13px; padding: 12px 16px; }
  /* And the pane needs more bottom padding to clear the taller stack. */
  .se-pane { padding-bottom: 220px; }

  /* Hide the in-content Copy button + mark-sent form — the cloned ones in the
     fixed bottom stack are the canonical mobile controls. */
  .se-h .btn-primary[data-copy-btn] { display: none; }
  .mark-sent-form { display: none; }
  /* Also collapse the now-empty header right side so it doesn't leave a gap. */
  .se-h { gap: 8px; }

  /* Sticky back as a floating top-left FAB so it's always one tap away. */
  .se-back-fab {
    position: fixed; top: 64px; left: 16px; z-index: 36;
    width: 40px; height: 40px;
    background: var(--bg); border: 1px solid var(--ink-1);
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; color: var(--ink-1);
    font-size: 18px; line-height: 1;
    box-shadow: 0 2px 6px rgba(10, 10, 10, .12);
  }
  /* The original in-flow back row becomes redundant on mobile. */
  .se-back { display: none; }

  /* While we're on the slack-export page, hide the generic + New FAB so it
     doesn't fight the bottom stack for thumb space. */
  body.has-se-bottom .fab { display: none !important; }
}
@media (min-width: 901px) {
  .se-tabs, .se-sticky-copy, .se-action-stack, .se-back-fab { display: none; }
}

/* Login */
.login-wrap { max-width: 360px; margin: 120px auto; padding: 32px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); }
.login-wrap h1 { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -.02em; margin: 0 0 24px; }
.login-wrap .field { margin-bottom: 16px; }
.login-wrap .actions { margin-top: 24px; display: flex; align-items: center; gap: 12px; }
.login-wrap .actions .spacer { flex: 1; }

/* ────────────────────────────────────────────────────────────────
   MOBILE SHELL: compressed top bar, hamburger, drawer, FAB
   ──────────────────────────────────────────────────────────────── */

/* Hamburger button (mobile only) — sits at the top-LEFT so it aligns with
   the left-side drawer it opens. */
.shell-hamburger {
  all: unset; cursor: pointer;
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--rule); border-radius: 6px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  background: var(--bg);
  order: -1;
}
.shell-hamburger span {
  display: block; width: 18px; height: 2px; background: var(--ink-1); border-radius: 2px;
}

/* Drawer + scrim (mobile only). */
.drawer-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.shell-drawer {
  display: none;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 61;
  width: min(320px, 86vw);
  background: var(--bg);
  border-right: 1px solid var(--rule);
  box-shadow: 6px 0 18px rgba(0, 0, 0, .12);
  transform: translateX(-100%);
  transition: transform .2s ease;
  flex-direction: column;
  padding: 16px 18px;
  overflow-y: auto;
}
body.drawer-open .drawer-scrim {
  opacity: 1; pointer-events: auto;
}
body.drawer-open .shell-drawer {
  transform: translateX(0);
}
body.drawer-open { overflow: hidden; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.drawer-head .shell-brand { color: var(--ink-3); }
.drawer-close {
  all: unset; cursor: pointer;
  width: 32px; height: 32px;
  border: 1px solid var(--rule); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 14px;
}
.drawer-user {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase;
  margin-bottom: 18px;
}
.drawer-user b { color: var(--ink-1); }
.drawer-nav {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 24px;
}
.drawer-nav a {
  text-decoration: none; color: var(--ink-1);
  padding: 12px 14px;
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 16px;
  border-radius: 2px;
  border-left: 2px solid transparent;
}
.drawer-nav a:hover { background: var(--bg-2); }
.drawer-nav a.current {
  background: var(--bg-2); border-left-color: var(--ink);
}
.drawer-foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.drawer-foot .theme-toggle {
  position: static; align-self: flex-start;
}

/* On the brand page the bp-floating-bar (counter + Export) is at the very
   bottom — lift the + New FAB above it so both stay reachable. */
body.has-bp-bar .fab { bottom: 80px; }

/* On mobile, hide the small section-header "+ New" — the FAB is the only
   + New entry-point we want at thumb reach. */
@media (max-width: 720px) {
  .bp-cta-new { display: none; }
}

/* Floating action button: + New idea. Mirrors .btn-primary so it reads as
   the same system element, just floating. */
.fab {
  all: unset; cursor: pointer;
  display: none;
  position: fixed; right: 20px; bottom: 24px; z-index: 45;
  padding: 12px 22px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 12px;
  font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px;
  line-height: 1;
  align-items: center; gap: 8px;
}
.fab .plus {
  font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 600;
  color: var(--paper);
}
.fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Mobile sizing rules for the shell. */
@media (max-width: 720px) {
  .shell-canvas { padding: 14px 24px 110px; }     /* room for bottom-pinned FAB / bars */

  /* Top bar becomes a fixed, auto-hiding header so the menu is always one
     scroll-up gesture away (no need to scroll back to page top). */
  .shell-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    padding: 8px 24px;                            /* horizontal padding here, not on shell-canvas */
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    gap: 12px;
    align-items: center;
    transition: transform .22s ease;
  }
  body.shell-top-hidden .shell-top { transform: translateY(-100%); }

  /* Push page content below the fixed bar. */
  main.shell-canvas { padding-top: 64px; }

  .shell-brand {
    font-size: 12px; letter-spacing: .15em;
    padding-left: 0;
  }
  .shell-hamburger {
    display: flex;
  }
  .drawer-scrim { display: block; }
  .shell-drawer { display: flex; }
  .fab { display: inline-flex; }

  /* Page headers shrink on mobile. */
  .page-h1 { font-size: 26px; line-height: 1.12; }
  .page-sub { font-size: 14px; }

  /* Dashboard heading scaling. */
  .dash-hello h2 { font-size: 22px; white-space: normal; }
  .dash-stage { gap: 18px; }
  .dash-cols { gap: 18px; }

  /* Hide the filter rail by default on mobile — the Filters toggle button
     reveals it on demand. */
  .ai-frame { grid-template-columns: 1fr; }
  .ai-frame > .ai-rail { display: none; }
  .ai-frame.filters-open > .ai-rail {
    display: flex;
    border-right: 0; border-bottom: 1px solid var(--rule);
  }
  /* The Filters toggle button is visible only on mobile. */
  .ai-filter-toggle {
    all: unset; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ink-1); border-radius: 2px;
    background: var(--bg); color: var(--ink-1);
    font-family: "JetBrains Mono", monospace; font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  }
  .ai-filter-toggle .badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 16px; padding: 0 5px;
    background: var(--ink); color: #fff;
    border-radius: 999px;
    font-size: 9.5px;
  }
  .ai-filter-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--paper-3); }
  /* Sort hint is desktop-only chatter; hide on mobile to save room. */
  .ai-title-row .sort-hint { display: none; }

  /* All-ideas list head: header columns are cramped on mobile — collapse to a
     stacked layout where the last row puts Author · Date on the left and the
     star rating on the right (info-dense, fewer total rows). */
  .ai-list-head { display: none; }
  .ai-list .ai-row {
    grid-template-columns: 32px 1fr auto;
    grid-template-areas:
      "check brand   brand"
      "check body    body"
      "check tags    tags"
      "check creator stars";
    gap: 4px 10px; padding: 10px 14px;
  }
  .ai-list .ai-row > .bulk-cell      { grid-area: check; align-self: start; padding-top: 4px; }
  .ai-list .ai-row > div:nth-child(2) { grid-area: brand; }
  .ai-list .ai-row > div.body         { grid-area: body; }
  .ai-list .ai-row > div:nth-child(4) { grid-area: tags; }
  .ai-list .ai-row > div:nth-child(5) { grid-area: stars; align-self: center; justify-self: end; }
  .ai-list .ai-row > div.creator      { grid-area: creator; align-self: center; text-align: left; }
  .ai-list .ai-row > div { padding: 2px 0; }
  /* Drop the empty-tag cell so the rows aren't padded by ghost rows. */
  .ai-list .ai-row > div:nth-child(4):empty { display: none; }

  /* Excel commit bar fits one button row. */
  .xl-commit-bar { flex-wrap: wrap; gap: 8px; }

  /* Brand detail header: stack vertically. */
  .id-stage { padding: 0; }
  .id-back { padding: 10px 14px; margin-bottom: 14px; }
  .id-title { font-size: 26px; }
}