/* Guidepost admin — field ledger */
/* finesse · register=product · A=sea-salt-paper+teal/clay · B=grotesk-600/plex-400 · C=rail+ledger-table+drawer
 * D=feedback-only · E=field-ledger · SOUL=6 SPECTACLE=2 DENSITY=7 */
/* Every colour is a token here; dark mode redefines the tokens only (both the
 * system setting and an explicit data-theme choice). Rules never use a raw colour. */
:root {
  --paper: #ecf0ee;          /* page ground */
  --paper-2: #f2f5f3;        /* insets, table heads, quiet fills */
  --paper-3: #e2e8e5;        /* tracks, placeholders */
  --card: #fbfcfb;           /* panels and cards */
  --field: #ffffff;          /* inputs */
  --field-line: rgba(16, 38, 36, 0.55);
  --ink: #0f2221;
  --ink-soft: #374a48;
  --ink-faint: #556866;
  --rule: rgba(16, 38, 36, 0.11);
  --rule-strong: rgba(16, 38, 36, 0.2);
  --hover: rgba(16, 38, 36, 0.05);
  --stamp: #136a66;          /* accent */
  --stamp-hover: #0e5652;
  --stamp-soft: rgba(19, 106, 102, 0.1);
  --on-stamp: #ffffff;
  --clay: #a84a25;
  --ok: #306a27;
  --ok-soft: rgba(58, 122, 46, 0.12);
  --warn: #7d5700;
  --warn-soft: rgba(143, 100, 0, 0.12);
  --warn-line: rgba(143, 100, 0, 0.3);
  --bad: #a5352b;
  --bad-soft: rgba(178, 58, 47, 0.1);
  --bad-line: rgba(178, 58, 47, 0.3);
  --partial: #5552b0;
  --partial-soft: rgba(85, 82, 176, 0.12);
  --ignored: #4a5b59;
  --ignored-soft: rgba(91, 110, 108, 0.12);
  --chart-1: #008c84;        /* chart series: teal · clay · indigo (colour-blind checked) */
  --chart-2: #c85a30;
  --chart-3: #6360c8;
  --gold: #d9b85c;  --on-gold: #2e2405;
  --silver: #c3c9c6; --on-silver: #1d2624;
  --bronze: #c79a78; --on-bronze: #2f1c0e;
  --cover-top: linear-gradient(160deg, #1b6b66, #0f2221);
  --cover-bottom: linear-gradient(160deg, #a9b5b1, #5b6e6c);
  --scrim: rgba(12, 24, 23, 0.4);
  --on-cover: #ffffff;
  --focus: #136a66;
  --shadow: 0 1px 3px rgba(16, 48, 44, 0.06);
  --shadow-lg: 0 30px 70px -30px rgba(16, 48, 44, 0.4);
  --radius: 8px;
  --radius-lg: 12px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --display: "Schibsted Grotesk", var(--font);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sidebar-w: 232px;
  --tabbar-h: 0px;
  --top-h: 0px;
  color-scheme: light;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1312; --paper-2: #16211f; --paper-3: #22302e; --card: #121c1b; --field: #0e1716; --field-line: rgba(225, 245, 240, 0.38);
    --ink: #e7efed; --ink-soft: #b4c3c0; --ink-faint: #8d9f9c;
    --rule: rgba(225, 245, 240, 0.1); --rule-strong: rgba(225, 245, 240, 0.18); --hover: rgba(225, 245, 240, 0.06);
    --stamp: #3cc7b8; --stamp-hover: #5dd6c9; --stamp-soft: rgba(60, 199, 184, 0.14); --on-stamp: #06201d;
    --clay: #e8916a;
    --ok: #7cc56c; --ok-soft: rgba(124, 197, 108, 0.14);
    --warn: #e2b24a; --warn-soft: rgba(226, 178, 74, 0.14); --warn-line: rgba(226, 178, 74, 0.35);
    --bad: #f69084; --bad-soft: rgba(240, 120, 108, 0.14); --bad-line: rgba(240, 120, 108, 0.35);
    --partial: #b0adf3; --partial-soft: rgba(163, 160, 240, 0.15);
    --ignored: #a3b4b1; --ignored-soft: rgba(141, 159, 156, 0.14);
    --chart-1: #1fa89c; --chart-2: #db7444; --chart-3: #817ee0;
    --gold: #c9a548; --on-gold: #1c1503; --silver: #9aa5a2; --on-silver: #0b1312; --bronze: #b0835f; --on-bronze: #1a0f06;
    --cover-top: linear-gradient(160deg, #1fa89c, #0b1312); --cover-bottom: linear-gradient(160deg, #3a4a47, #16211f);
    --scrim: rgba(0, 0, 0, 0.55); --focus: #3cc7b8;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
@media screen {
:root[data-theme="dark"] {
  --paper: #0b1312; --paper-2: #16211f; --paper-3: #22302e; --card: #121c1b; --field: #0e1716; --field-line: rgba(225, 245, 240, 0.38);
  --ink: #e7efed; --ink-soft: #b4c3c0; --ink-faint: #8d9f9c;
  --rule: rgba(225, 245, 240, 0.1); --rule-strong: rgba(225, 245, 240, 0.18); --hover: rgba(225, 245, 240, 0.06);
  --stamp: #3cc7b8; --stamp-hover: #5dd6c9; --stamp-soft: rgba(60, 199, 184, 0.14); --on-stamp: #06201d;
  --clay: #e8916a;
  --ok: #7cc56c; --ok-soft: rgba(124, 197, 108, 0.14);
  --warn: #e2b24a; --warn-soft: rgba(226, 178, 74, 0.14); --warn-line: rgba(226, 178, 74, 0.35);
  --bad: #f69084; --bad-soft: rgba(240, 120, 108, 0.14); --bad-line: rgba(240, 120, 108, 0.35);
  --partial: #b0adf3; --partial-soft: rgba(163, 160, 240, 0.15);
  --ignored: #a3b4b1; --ignored-soft: rgba(141, 159, 156, 0.14);
  --chart-1: #1fa89c; --chart-2: #db7444; --chart-3: #817ee0;
  --gold: #c9a548; --on-gold: #1c1503; --silver: #9aa5a2; --on-silver: #0b1312; --bronze: #b0835f; --on-bronze: #1a0f06;
  --cover-top: linear-gradient(160deg, #1fa89c, #0b1312); --cover-bottom: linear-gradient(160deg, #3a4a47, #16211f);
  --scrim: rgba(0, 0, 0, 0.55); --focus: #3cc7b8;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--stamp-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

a {
  color: var(--stamp);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--stamp-hover);
}

img {
  display: block;
  max-width: 100%;
}

/* —— Shell ——
 * Desktop: a rail of icon + label links. Tablet (<=1020px): the rail narrows to
 * icons over small labels. Phone (<=760px): the rail is replaced by a top bar
 * and a bottom tab bar whose "More" opens the remaining sections. */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--rule);
  padding: 1.1rem 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem 0.45rem;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--stamp);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.brand-sub {
  font-size: 0.78rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 40px;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.92rem;
}

.nav svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.nav a:hover {
  background: var(--hover);
  color: var(--ink);
}

.nav a.is-active {
  background: var(--stamp-soft);
  color: var(--stamp);
}

.nav a .badge {
  margin-left: auto;
}

.nav-sep {
  height: 1px;
  background: var(--rule);
  margin: 0.45rem 0.65rem;
}

.sidebar-foot {
  padding: 0.6rem 0.65rem 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.sidebar-foot a {
  color: var(--ink-soft);
}

.sidebar-foot .signout {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 32px;
  text-decoration: none;
}

.sidebar-foot .signout svg {
  width: 16px;
  height: 16px;
}

.conn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-weight: 550;
}

.conn-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}

.conn-dot.is-warn {
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.theme-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.theme-seg button {
  flex: 1;
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0;
  min-height: 28px;
  cursor: pointer;
}

.theme-seg button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.main-wrap {
  min-width: 0;
  min-height: 100vh;
}

.main {
  padding: 1.5rem 1.75rem 2.5rem;
  max-width: 1240px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
  flex-wrap: wrap;
}

.page-head > div {
  min-width: 0;
}

.page-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.page-head .lede {
  margin: 0.35rem 0 0;
  color: var(--ink-faint);
  font-size: 0.92rem;
  max-width: 60ch;
}

.page-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Phone chrome: hidden until the phone breakpoint. */
.topbar,
.tabbar {
  display: none;
}

.tabbar a,
.tabbar summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 4px 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.tabbar summary::-webkit-details-marker {
  display: none;
}

.tabbar svg {
  width: 22px;
  height: 22px;
}

.tabbar a.is-active,
.tabbar .tab-more.is-active > summary,
.tabbar .tab-more[open] > summary {
  color: var(--stamp);
}

.tabbar .badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 6px);
}

.tab-menu {
  max-height: calc(100dvh - var(--tabbar-h) - 24px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  position: fixed;
  right: 8px;
  bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px));
  width: min(280px, calc(100vw - 16px));
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  z-index: 31;
}

.tab-menu a {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.tab-menu a.is-active {
  background: var(--stamp-soft);
}

.tab-menu .badge {
  position: static;
  margin-left: auto;
}

.tab-menu svg {
  width: 18px;
  height: 18px;
}

.tab-menu .theme-seg {
  margin: 4px 4px 2px;
}

.tab-menu .theme-seg button {
  min-height: 44px;
}

.sidebar-foot .foot-short {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* —— Buttons —— */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--stamp);
  color: var(--on-stamp);
  border-color: var(--stamp);
}

.btn-primary:hover:not(:disabled) {
  background: var(--stamp-hover);
  border-color: var(--stamp-hover);
  color: var(--on-stamp);
}

.btn-secondary {
  background: var(--paper);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--ink-faint);
}

.btn-ghost {
  color: var(--ink-soft);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.btn-danger {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: transparent;
}

.btn-danger:hover:not(:disabled) {
  background: var(--bad-soft);
  border-color: var(--bad-line);
}

.btn-sm {
  padding: 0.28rem 0.55rem;
  font-size: 0.8rem;
}

/* —— Cards / panels —— */
.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.panel-pad {
  padding: 1rem 1.1rem;
}

.panel + .panel {
  margin-top: 1rem;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.stat {
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 650;
}

.stat-value {
  margin-top: 0.25rem;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat-meta {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* —— Tables (dense ledger) —— */
.table-wrap {
  overflow-x: auto;
  position: relative; /* keeps .sr-only cells inside the scroller instead of widening the page */
}

.panel > .table-wrap:first-child,
.panel > .list-wrap:first-child {
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
}

.panel > .table-wrap:last-child,
.panel > .list-wrap:last-child {
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

table.data th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
  background: var(--paper-2);
}

table.data td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

table.data tbody tr:hover td {
  background: var(--hover);
}

table.data tbody tr.is-attention td {
  background: var(--warn-soft);
}

.cell-post {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--paper-3);
  flex-shrink: 0;
  border: 1px solid var(--rule);
}

.thumb.lg {
  width: 72px;
  height: 72px;
  border-radius: 6px;
}

.media-head { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.media-cover { flex-shrink: 0; line-height: 0; }
.media-cover-fallback { display: grid; place-items: center; text-align: center; font-size: .7rem; color: var(--ink-faint); }

.cell-title {
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.cell-title:hover {
  color: var(--stamp);
}

.cell-sub {
  font-size: 0.75rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.kw {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.12rem 0.4rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-soft);
}

/* —— Status pills —— */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.pill-ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.pill-bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.pill-warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.pill-partial {
  background: var(--partial-soft);
  color: var(--partial);
}
.pill-ignored {
  background: var(--ignored-soft);
  color: var(--ignored);
}
.pill-active {
  background: var(--stamp-soft);
  color: var(--stamp);
}
.pill-paused {
  background: var(--paper-3);
  color: var(--ink-faint);
}

/* —— Forms —— */
.form-grid {
  display: grid;
  gap: 1rem;
}

.form-grid.two {
  grid-template-columns: 1fr 1fr;
}

label.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink-soft);
}

label.field .hint {
  font-weight: 450;
  color: var(--ink-faint);
  font-size: 0.75rem;
}

/* Campaign guide links: label + URL per button */
fieldset.link-rows { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; min-width: 0; }
fieldset.link-rows legend { padding: 0; margin-bottom: .35rem; font-size: 0.82rem; font-weight: 650; color: var(--ink-soft); }
.link-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2.2fr); gap: .6rem; }
@media (max-width: 520px) { .link-row { grid-template-columns: 1fr; } }
.dm-buttons { max-width: 22rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.dm-buttons pre { white-space: pre-wrap; margin: 0; padding: .6rem; }
.dm-button { display: block; padding: .55rem .6rem; border-top: 1px solid var(--rule-strong); text-align: center; font-weight: 650; color: var(--stamp); }

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="date"],
textarea,
select {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  width: 100%;
}

textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.4;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--stamp);
  box-shadow: 0 0 0 3px var(--stamp-soft);
}

.char-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-weight: 450;
}

.char-row .over {
  color: var(--bad);
  font-weight: 700;
}

.preview-box {
  margin-top: 0.35rem;
  padding: 0.75rem 0.85rem;
  background: var(--paper-2);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.toggle-row:last-child {
  border-bottom: 0;
}

.toggle-copy strong {
  display: block;
  font-size: 0.92rem;
}

.toggle-copy span {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-weight: 450;
}

.switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  background: var(--paper-3);
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.switch span::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--ink-faint);
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}

.switch input:checked + span {
  background: var(--stamp);
  border-color: var(--stamp);
}

.switch input:checked + span::after {
  transform: translateX(18px);
  background: var(--on-stamp);
}

.switch input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* —— Filters / toolbar —— */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--field);
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0.35rem 0.65rem;
  color: var(--ink-faint);
  cursor: pointer;
  border-right: 1px solid var(--rule);
}

.seg button:last-child {
  border-right: 0;
}

.seg button.is-on {
  background: var(--stamp-soft);
  color: var(--stamp);
}

.search {
  margin-left: auto;
  min-width: 200px;
}

.search input {
  padding: 0.4rem 0.65rem;
  font-size: 0.86rem;
}

/* —— Empty / callouts —— */
.empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.empty h2 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.empty p {
  margin: 0 auto 1rem;
  max-width: 36ch;
  color: var(--ink-faint);
}

.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.callout > div {
  min-width: 0;
  flex: 1;
}

.callout .btn {
  flex-shrink: 0;
}

.callout-warn {
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

.callout-bad {
  background: var(--bad-soft);
  border-color: var(--bad-line);
}

.callout strong {
  display: block;
  margin-bottom: 0.15rem;
}

/* —— Post detail layout —— */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  align-items: start;
}

.stack-gap > * + * {
  margin-top: 1rem;
}

.section-title {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 700;
}

.post-hero {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.post-hero .meta {
  min-width: 0;
}

.post-hero h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.mono {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.kw-input-row {
  display: flex;
  gap: 0.4rem;
}

.kw-input-row input {
  flex: 1;
}

/* —— Sync / media library —— */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
  align-items: stretch;
}

.media-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.media-card:hover,
.media-card.is-selected {
  border-color: var(--stamp);
  box-shadow: 0 0 0 2px var(--stamp-soft);
}

.media-card img,
.media-card .thumb-fallback {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper-3);
  flex: 0 0 auto;
  display: block;
}

.media-card .cap {
  padding: 0.55rem 0.6rem 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.media-card .cap-id {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card .cap-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 1.35;
  max-height: calc(1.35em * 3);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.media-card .cap-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem 0.65rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}

.media-card .cap-actions .btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.media-card .cap-actions .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-faint);
  cursor: help;
  vertical-align: middle;
  margin-left: 0.2rem;
}

dialog.sheet {
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 0;
  max-width: 720px;
  width: calc(100% - 2rem);
  background: var(--paper);
  box-shadow: var(--shadow);
}

dialog.sheet::backdrop {
  background: var(--scrim);
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--rule);
}

.sheet-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.sheet-body {
  padding: 1rem;
}

.sheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}

/* —— Login —— */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem max(1.5rem, env(safe-area-inset-right, 0px)) 1.5rem max(1.5rem, env(safe-area-inset-left, 0px));
  background: var(--paper);
}

.login-card {
  width: min(380px, 100%);
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.login-card .brand {
  justify-content: center;
  margin-bottom: 1.25rem;
  padding: 0;
}

.login-card .login-logo {
  display: block;
  margin: 0 auto 0.85rem;
  width: 112px;
  height: 112px;
}

.login-card h1 {
  margin: 0 0 0.25rem;
  text-align: center;
  font-size: 1.35rem;
}

.login-card .lede {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.login-card .field {
  margin-bottom: 0.85rem;
}

.login-card .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: 0.35rem;
  padding: 0.6rem;
}

.login-error {
  display: none;
  margin-bottom: 0.85rem;
  padding: 0.55rem 0.7rem;
  background: var(--bad-soft);
  color: var(--bad);
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
}

.login-error.is-show {
  display: block;
}

/* —— Attention list —— */
.attn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attn-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.88rem;
}

.attn-list li:last-child {
  border-bottom: 0;
}

.attn-list .when {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* —— Row actions —— */
.row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-end;
}

/* —— Insights —— */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.metric-tile {
  padding: 0.7rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.metric-tile .k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 700;
}

.metric-tile .v {
  margin-top: 0.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.metric-tile .d {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.metric-tile .d.up {
  color: var(--ok);
  font-weight: 650;
}

.metric-tile .d.down {
  color: var(--bad);
  font-weight: 650;
}

.metric-tile.is-accent {
  border-color: color-mix(in srgb, var(--stamp) 35%, transparent);
  background: var(--stamp-soft);
}

.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--paper-3);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.rank.gold {
  background: var(--gold);
  color: var(--on-gold);
}
.rank.silver {
  background: var(--silver);
  color: var(--on-silver);
}
.rank.bronze {
  background: var(--bronze);
  color: var(--on-bronze);
}

.tip-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tip-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.88rem;
}

.tip-list li:last-child {
  border-bottom: 0;
}

.tip-list strong {
  display: block;
  margin-bottom: 0.15rem;
}

.tip-list span {
  color: var(--ink-faint);
  font-size: 0.82rem;
}

.delta {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 0.78rem;
}

.delta.up {
  color: var(--ok);
}
.delta.down {
  color: var(--bad);
}

@media (max-width: 900px) {
  .stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .detail-grid,
  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .main {
    padding: 1rem 1rem 2rem;
  }

  .search {
    margin-left: 0;
    width: 100%;
  }

  .callout {
    flex-direction: column;
    align-items: stretch;
  }

  .callout .btn {
    align-self: flex-start;
  }
}

@media (max-width: 520px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
}

.readonly-note {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* AI analysis panel */
.ai-panel { margin-bottom: 1rem; }
.ai-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ai-meta { color: var(--ink-faint); font-size: 0.82rem; }
.ai-run { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ai-note { margin: 0; }
.ai-body { margin-top: 0.9rem; }
.ai-body h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 1rem 0 0.35rem; }
.ai-body ul, .ai-body ol { margin: 0; padding-left: 1.2rem; }
.ai-body li { margin: 0.3rem 0; }
.ai-verdict { font-size: 1.05rem; font-weight: 600; margin: 0; }
.ai-ratios { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.ai-ratios em { color: var(--stamp); font-style: normal; font-weight: 600; }
.ai-evidence { color: var(--ink-faint); font-size: 0.88rem; }
.ai-evidence::before { content: "— "; }
.ai-action { margin-top: 0.15rem; color: var(--stamp); font-weight: 550; }
.ai-rewrite { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.7rem 0.85rem; margin: 0; }
.ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 640px) { .ai-cols { grid-template-columns: 1fr; } }
details.ai-body > summary { cursor: pointer; list-style: revert; }

/* AI report page */
.report .eyebrow { margin: 0 0 .25rem; color: var(--ink-faint); font-size: .85rem; }
.report-head h1 { display: flex; align-items: center; gap: .6rem; }
.verdict-card { background: var(--card); border: 1px solid var(--rule-strong); border-left: 4px solid var(--stamp); border-radius: 10px; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.verdict { font-size: 1.25rem; font-weight: 600; line-height: 1.45; margin: 0 0 1rem; }
.verdict.small { font-size: .95rem; font-weight: 500; margin: .25rem 0 0; color: var(--ink-soft); }
.ratios { margin-bottom: .75rem; }
.ratios .metric-tile .k { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-size: .72rem; }
.ratios .metric-tile .d { white-space: normal; font-size: .78rem; }
.since { margin: 0; font-size: .85rem; color: var(--ink-faint); display: flex; gap: .6rem; flex-wrap: wrap; }
.delta { padding: .1rem .5rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); }
.delta.up { background: var(--ok-soft); color: var(--ok); } .delta.down { background: var(--bad-soft); color: var(--bad); }
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1.5rem; align-items: start; }
.report-body, .rsec { min-width: 0; }
.rsec { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; scroll-margin-top: calc(var(--top-h, 0px) + env(safe-area-inset-top, 0px) + 1rem); }
.rsec h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; margin: 0 0 .75rem; }
.rsec h2 .num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--stamp); color: var(--on-stamp); font-size: .8rem; font-family: var(--mono); }
.rsec h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: 0 0 .4rem; }
.hint { font-size: .8rem; color: var(--ink-faint); font-weight: 400; margin: .5rem 0 0; }
.points, .levers, .do ul, .todo { margin: 0; padding-left: 1.2rem; }
.points li, .levers li { margin: 0 0 .8rem; }
.points p, .levers p { margin: 0; }
.evidence { color: var(--ink-faint); font-size: .86rem; margin-top: .15rem !important; padding-left: .9rem; border-left: 2px solid var(--rule); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.do { padding: .8rem .9rem; border-radius: 6px; } .do.more { background: var(--ok-soft); } .do.less { background: var(--bad-soft); }
.do li { margin: .35rem 0; }
.cover-strip { margin-bottom: .9rem; }
.cover-strip-label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .4rem; }
.cover-row { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .25rem; }
.cover { margin: 0; flex: 0 0 104px; }
.cover-img { aspect-ratio: 4/5; border-radius: 6px; display: grid; place-items: center; text-align: center; padding: .4rem; font-size: .68rem; color: var(--on-cover); line-height: 1.25; background: var(--cover-top); }
.cover.bottom .cover-img { background: var(--cover-bottom); }
.cover figcaption { font-size: .7rem; color: var(--ink-soft); margin-top: .3rem; display: flex; justify-content: space-between; gap: .3rem; }
.cover figcaption b { color: var(--stamp); font-family: var(--mono); font-weight: 500; }
.prose { margin: .4rem 0 0; line-height: 1.55; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.idea { border: 1px solid var(--rule); border-radius: 8px; padding: .85rem .9rem; background: var(--card); display: flex; flex-direction: column; gap: .4rem; }
.idea h3 { text-transform: none; letter-spacing: 0; font-size: .98rem; color: var(--ink); margin: 0; }
.idea p { margin: 0; font-size: .88rem; color: var(--ink-soft); flex: 1; }
.levers { counter-reset: lever; list-style: none; padding-left: 0; }
.levers li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .4rem; }
.levers li::before { counter-increment: lever; content: counter(lever); font-family: var(--mono); font-size: 1.4rem; color: var(--stamp); line-height: 1; grid-row: span 2; }
.todo { list-style: none; padding-left: 0; }
.todo li { margin: .3rem 0; }
.todo label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; padding: .5rem .6rem; border-radius: 6px; }
.todo label:hover { background: var(--paper-2); }
.todo input { margin-top: .3rem; accent-color: var(--stamp); }
.todo input:checked + span .t { text-decoration: line-through; color: var(--ink-faint); }
.todo .pill { margin-left: .4rem; }
.report-foot { color: var(--ink-faint); font-size: .8rem; padding: .5rem .25rem 2rem; }
.rail { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.rail-card { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: .7rem .8rem; display: flex; flex-direction: column; }
.rail-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: .35rem; }
.rail a { text-decoration: none; color: var(--ink-soft); font-size: .88rem; padding: .3rem .45rem; border-radius: 5px; display: flex; justify-content: space-between; gap: .4rem; }
.rail a.is-active, .rail a:hover { background: var(--stamp-soft); color: var(--ink); }
.rail .hist span { color: var(--ink-faint); font-family: var(--mono); font-size: .78rem; } .rail .hist b { font-weight: 500; }
.rail .hist.is-current { background: var(--paper-2); }
.rail .more { color: var(--stamp); }
.todo-progress { font-family: var(--mono); font-size: .75rem; color: var(--ink-faint); }
/* generating */
.gen-card { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 1.25rem 1.4rem; box-shadow: var(--shadow); max-width: 720px; }
.steps { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.steps li { display: grid; grid-template-columns: 1.2rem 1fr auto; gap: .7rem; align-items: start; color: var(--ink-faint); }
.steps li b { display: block; color: var(--ink-faint); } .steps li span { font-size: .84rem; }
.steps li.done b, .steps li.active b { color: var(--ink); }
.steps .dot { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--rule-strong); margin-top: .2rem; }
.steps li.done .dot { background: var(--ok); border-color: var(--ok); }
.steps li.active .dot { border-color: var(--stamp); border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps em { font-family: var(--mono); font-style: normal; font-size: .8rem; }
.progress { height: 6px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--stamp); transition: width 1s linear; }
.ghost-card { margin-top: 1rem; max-width: 720px; border: 1px dashed var(--rule-strong); border-radius: 10px; padding: 1rem 1.2rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.gen-card.fail { border-color: var(--bad); background: var(--bad-soft); } .fail-head { display: flex; gap: .6rem; align-items: center; margin-bottom: .3rem; }
/* history */
.hist-list { list-style: none; margin: 0; padding: 0; }
.hist-list li + li { border-top: 1px solid var(--rule); }
.hist-list a { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; text-decoration: none; color: var(--ink); }
.hist-list a:hover { background: var(--paper-2); }
.hist-list a > div { min-width: 0; overflow-wrap: anywhere; }
.todo form { display: contents; }
.hist-list b { font-weight: 550; display: block; } .hist-list .meta { font-size: .8rem; color: var(--ink-faint); }
.kind { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--stamp-soft); color: var(--stamp); justify-self: start; display: inline-flex; gap: .4rem; align-items: center; }
.kind.media { background: var(--paper-2); color: var(--ink-soft); }
.arrow { color: var(--ink-faint); }
@media print { .sidebar, .topbar, .tabbar, .readonly-note.phone, .page-actions, .rail, .todo input { display: none !important; } .app { grid-template-columns: minmax(0, 1fr) !important; } .main { padding: 0 !important; } .report-grid { grid-template-columns: 1fr; } .rsec { break-inside: avoid; border: 0; padding: 0 0 1rem; } }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } .rail { position: static; flex-direction: row; overflow-x: auto; } .rail-card { flex: 0 0 auto; min-width: 220px; } .two, .cards { grid-template-columns: 1fr; } }

.report .next { padding-left: 1.2rem; } .report .next li { margin: .35rem 0; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.cover a { color: inherit; text-decoration: none; }
.hist-list .empty { padding: 1rem 1.1rem; color: var(--ink-faint); }
.ai-panel .ai-verdict { margin: 0 0 .75rem; }

.ai-running .spin, .steps li.active .dot { display: inline-block; }
.ai-running .spin { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--stamp); border-top-color: transparent; animation: spin 1s linear infinite; vertical-align: -.1rem; }
.ai-failed { color: var(--bad); }
.pill-bad { background: var(--bad-soft); color: var(--bad); } .pill-partial { background: var(--partial-soft); color: var(--partial); }
.todo input:disabled { opacity: .6; }

/* ---------- Diagnosis: funnel strip ---------- */
.funnel { display: flex; overflow-x: auto; padding: .4rem .8rem 1rem .2rem; scrollbar-width: thin; }
.stage { position: relative; flex: 0 0 150px; padding: .7rem .75rem .6rem; border: 1.5px solid var(--rule-strong); border-radius: 8px; background: var(--card); min-width: 0; }
.stage + .stage { margin-left: 22px; }
.stage + .stage::before { content: ""; position: absolute; left: -23px; top: 50%; width: 22px; height: 1.5px; background: var(--rule-strong); }
.stage .k { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.stage .v { font: 500 1.35rem/1.2 var(--mono); margin: .15rem 0 .05rem; }
.stage .r { font-size: .76rem; line-height: 1.3; color: var(--ink-soft); min-height: 2.6em; }
.stage .p { margin-top: .35rem; display: inline-block; font: 500 .68rem var(--mono); padding: .05rem .4rem; border-radius: 4px; background: var(--paper-2); color: var(--ink-soft); }
.stage.good .p { background: var(--ok-soft); color: var(--ok); }
.stage.weak { border-color: var(--bad); border-style: dashed; }
.stage.weak .p { background: var(--bad-soft); color: var(--bad); }
.stage.biz { border-color: var(--stamp); } .stage.biz .k { color: var(--stamp); }
.stage.na { opacity: .6; }
.stamp-mark { position: absolute; right: -10px; bottom: -12px; transform: rotate(-8deg); font: 700 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bad); border: 2px solid var(--bad); border-radius: 4px; padding: .28rem .4rem; background: var(--paper); box-shadow: var(--shadow); }
.stamp-mark.ok { color: var(--ok); border-color: var(--ok); transform: rotate(6deg); }
.tags { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.diag { display: grid; grid-template-columns: auto 1fr; gap: .45rem .8rem; align-items: baseline; margin-top: .5rem; }
.diag .pill { justify-self: start; }
.diag p { margin: 0; font-size: .92rem; }
.diag .evidence { display: block; margin-top: .15rem; }
.conf { display: inline-flex; gap: .4rem; align-items: center; font-size: .78rem; color: var(--warn); background: var(--warn-soft); padding: .15rem .55rem; border-radius: 999px; }
.velo { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.velo svg { width: 100%; height: 110px; display: block; }
.velo .legend { font-size: .78rem; color: var(--ink-faint); display: flex; flex-direction: column; gap: .25rem; }
.legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--stamp); margin-right: .4rem; vertical-align: middle; }
.legend i.med { border-top-style: dashed; border-color: var(--rule-strong); }
@media (max-width: 560px) { .diag { grid-template-columns: 1fr; } .velo { grid-template-columns: 1fr; } }

/* ---------- library chips + pills ---------- */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip { border: 1px solid var(--rule-strong); background: var(--card); border-radius: 999px; padding: .25rem .7rem; font-size: .84rem; text-decoration: none; color: var(--ink); display: inline-flex; gap: .4rem; align-items: center; }
.chip.is-on { background: var(--stamp); color: var(--on-stamp); border-color: var(--stamp); }
.chip .c { font: 500 .72rem var(--mono); opacity: .75; }
.chip.is-on .c, .format-seg .btn-primary .c { opacity: .9; }
.media-card .cap-stat { font-size: .7rem; color: var(--ink-faint); }
/* ---------- report: funnel breaks ---------- */
.breaks { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem .8rem; align-items: center; font-size: .9rem; }
.bar { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--bad); border-radius: 999px; }
.worst-row { display: flex; gap: .5rem; align-items: center; margin: .8rem 0 .4rem; flex-wrap: wrap; }
.worst-row .label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-right: .3rem; }
.worst { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; text-decoration: none; color: var(--bad); font: 500 .7rem var(--mono); }
.worst img, .worst > span { width: 40px; height: 50px; border-radius: 4px; object-fit: cover; background: var(--cover-bottom); display: block; }
/* ---------- settings: goal ---------- */
.goal-seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; margin: .25rem 0 .75rem; }
.goal-opt { padding: .5rem .95rem; cursor: pointer; border-right: 1px solid var(--rule-strong); }
.goal-opt:last-child { border-right: 0; }
.goal-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.goal-opt.is-on, .goal-opt:has(input:checked) { background: var(--stamp); color: var(--on-stamp); }
.goal-opt:has(input:checked) ~ .goal-opt, .goal-seg:has(input:checked) .goal-opt.is-on:not(:has(input:checked)) { background: transparent; color: inherit; }
.effects.goal-effects { display: none; }
.goal-seg:has(input[value="followers"]:checked) ~ .goal-effects[data-goal="followers"],
.goal-seg:has(input[value="leads"]:checked) ~ .goal-effects[data-goal="leads"],
.goal-seg:has(input[value="reach"]:checked) ~ .goal-effects[data-goal="reach"] { display: grid; }
.effects { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .9rem; align-items: baseline; }
.effects .k { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- plans + experiments ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.plan { border: 1px solid var(--rule-strong); border-radius: 10px; padding: .9rem 1rem; background: var(--card); display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.plan.is-chosen { border-color: var(--stamp); box-shadow: 0 0 0 3px var(--stamp-soft); }
.plan.is-dim { opacity: .6; }
.plan h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.plan .hyp { font-size: .9rem; margin: 0; }
.plan ul { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink-soft); }
.plan .target { font: 500 .74rem var(--mono); background: var(--paper-2); border-radius: 5px; padding: .35rem .5rem; word-break: break-word; }
.plan .foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.exp-card { border-left: 4px solid var(--stamp); background: var(--card); border-radius: 10px; padding: 1rem 1.2rem; margin-top: 1rem; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.exp-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.exp-card .progress { height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; margin: .6rem 0; }
.exp-card .progress span { display: block; height: 100%; background: var(--stamp); }
.exp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; margin: .4rem 0; }
.exp-row .m { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.exp-row .b { font-size: 1.05rem; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plans, .exp-row { grid-template-columns: 1fr; } }

/* ---------- feedback + verdict ---------- */
.fb { display: inline-flex; gap: .2rem; margin-left: .35rem; vertical-align: middle; flex-wrap: wrap; align-items: center; }
.fb form { display: inline-flex; gap: .2rem; }
.fb button { border: 1px solid transparent; background: transparent; border-radius: 5px; padding: .05rem .35rem; cursor: pointer; font-size: .85rem; color: var(--ink-faint); line-height: 1.3; }
.fb button:hover { background: var(--paper-2); color: var(--ink); }
.fb button[aria-pressed="true"] { background: var(--stamp-soft); color: var(--stamp); border-color: var(--stamp); }
.fb button.down[aria-pressed="true"] { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.fb .reason { display: flex; gap: .4rem; flex: 1 1 100%; margin-top: .3rem; }
.fb .reason[hidden] { display: none; }
.fb .reason input { flex: 1; border: 1px solid var(--field-line); border-radius: 5px; padding: .3rem .5rem; background: var(--field); color: var(--ink); font: inherit; font-size: .85rem; min-width: 0; }
.exp-verdict.won { border-left-color: var(--ok); } .exp-verdict.lost { border-left-color: var(--bad); } .exp-verdict.inconclusive { border-left-color: var(--rule-strong); }
.exp-verdict .label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .4rem; }
.exp-row.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .exp-row.four { grid-template-columns: 1fr 1fr; } }

.toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .85rem; white-space: nowrap; }
.toggle input { accent-color: var(--stamp); }
.toggle-form { display: inline-flex; gap: .3rem; align-items: center; }

.badge { font: 600 .66rem var(--mono); background: var(--stamp); color: var(--on-stamp); border-radius: 999px; padding: .05rem .4rem; vertical-align: middle; }
.stat-link { text-decoration: none; color: inherit; display: block; }
.stat-link:hover { border-color: var(--stamp); }
.sched { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .88rem; align-items: baseline; }
.sched .mono { color: var(--ink-faint); font-size: .8rem; white-space: nowrap; }

/* ---------- asset prompts ---------- */
.assets { display: grid; gap: .8rem; }
.asset { border: 1px solid var(--rule-strong); border-radius: 10px; padding: .9rem 1rem; background: var(--card); min-width: 0; }
.asset-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.asset-head .asset-used { margin-left: auto; }
.asset-goal { margin: .5rem 0 .6rem; font-weight: 550; }
.asset-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.asset-tabs > input { position: absolute; opacity: 0; width: 0; height: 0; }
.asset-tabs > label { padding: .3rem .8rem; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: .82rem; cursor: pointer; color: var(--ink-soft); background: var(--paper-2); }
.asset-tabs > input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.asset-tabs > input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.asset-pane { width: 100%; min-width: 0; display: none; margin-top: .5rem; border: 1px solid var(--rule-strong); border-radius: 8px; padding: .6rem; }
.asset-tabs > input:nth-of-type(1):checked ~ .asset-pane:nth-of-type(1), .asset-tabs > input:nth-of-type(2):checked ~ .asset-pane:nth-of-type(2), .asset-tabs > input:nth-of-type(3):checked ~ .asset-pane:nth-of-type(3) { display: block; }
.asset-pane .ai-rewrite { margin: 0 0 .4rem; font-size: .88rem; }
@media (max-width: 560px) { .asset-tabs > label { flex: 1; text-align: center; padding: .3rem .3rem; } }

.plan-asset { margin-top: .2rem; }
.plan-asset > summary { cursor: pointer; font-size: .84rem; color: var(--stamp); font-weight: 550; }
.plan-asset .assets { margin-top: .5rem; }
.plan-asset .asset { padding: .7rem .8rem; }
.asset-ref { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.asset-ref img { width: 32px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }

/* ---------- Insights grid ---------- */
.insights-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Grow the media+caption block so row-stretch height fills above the footer, not as blank paper below the button. */
.insights-grid .card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}
.insights-grid .card-link img, .insights-grid .thumb-fallback { aspect-ratio: 4 / 5; flex: 0 0 auto; }
.insights-grid .thumb-fallback { place-items: center; display: grid; color: var(--ink-faint); font-size: .75rem; }
.insights-grid .media-card .cap { flex: 1 1 auto; }
.insights-grid .media-card:hover { border-color: var(--stamp); }
.insights-grid .media-card.is-tagged .cap-id { color: var(--bad); }
.insights-grid .pills a { text-decoration: none; }
.insights-grid .cap-stat {
  font-size: .74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Equal footer: one-line stat + two pill rows reserved, CTA pinned to the footer bottom. */
.insights-grid .cap-actions {
  flex: 0 0 auto;
  min-height: 8rem;
}
.insights-grid .cap-actions .pills {
  min-height: calc(1.35rem * 2 + 0.3rem);
  align-content: flex-start;
}
.insights-grid .cap-actions .btn { margin-top: auto; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
@media (max-width: 1100px) { .insights-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .insights-grid .cap-actions .btn { font-size: .78rem; } }

/* ---------- audience ---------- */
.aud-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.aud-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem 2.6rem; gap: .4rem; align-items: center; font-size: .82rem; margin: .2rem 0; }
.aud-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-row .bar i { background: var(--stamp); }
@media (max-width: 900px) { .aud-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Insights list view ---------- */
.chips-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chips-row .chips { margin-bottom: 0; }
.list-wrap { overflow-x: auto; }
.list-view th, .list-view td { white-space: nowrap; }
.list-view th.num, .list-view td.num { text-align: right; font-variant-numeric: tabular-nums; }
.list-view th a { color: inherit; text-decoration: none; }
.list-view th.is-active a { color: var(--stamp); }
.list-view .sticky { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 14rem; max-width: 18rem; }
.list-view th.sticky { background: var(--paper-2); }
.list-view td.sticky .cell-post strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.list-view .cell-post { display: flex; gap: .5rem; align-items: center; text-decoration: none; color: inherit; }
.list-view .thumb { width: 32px; height: 40px; object-fit: cover; border-radius: 4px; }
.list-view tfoot .median td { border-top: 2px solid var(--rule-strong); background: var(--paper-2); font-weight: 600; }
.list-view tfoot .median .cell-sub { font-weight: 400; }

/* Best time to post (Insights) */
.besttime { margin-bottom: 1rem; }
.besttime-format { font: 600 .8rem/1.4 var(--sans, inherit); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, inherit); margin: .8rem 0 .3rem; }
.besttime-table th:first-child { width: 3rem; }
.besttime-table td { text-align: center; font-family: var(--mono); white-space: nowrap; }
.besttime-table td .n { display: block; font-size: .68rem; opacity: .6; }
.besttime-table td.is-empty { opacity: .55; }
.besttime-table td.is-top { background: var(--ok-soft); font-weight: 600; }

/* Bio page (/go) */
.bio-card { text-align: left; }
.bio-card h1 { text-align: center; }
.bio-card .lede { text-align: center; }
.bio-item { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; padding: .7rem .9rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.bio-item:hover { border-color: var(--stamp); }
.bio-item img, .bio-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; background: var(--rule); display: block; }

/* Next post drafts (report) */
.rsub { font: 600 .8rem/1.4 inherit; letter-spacing: .04em; text-transform: uppercase; opacity: .75; margin: .9rem 0 .3rem; }
.drafts .draft { margin: 0 0 .25rem; }

/* ---------- Insights desk (above diagnosis chips) ---------- */
.insights-head { margin-bottom: .85rem; }
.insights-kicker { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; flex-wrap: wrap; }
.insights-kicker-meta { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

.insights-status {
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.insights-status-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.insights-status-text { font-size: .88rem; color: var(--ink-soft); }
.insights-status-text .bad { color: var(--bad); font-weight: 600; }
.insights-status-err { width: 100%; font-size: .8rem; color: var(--bad); margin-top: .25rem; }
.insights-status-meta { margin-top: .4rem; font-size: .75rem; color: var(--ink-faint); }
.insights-status-warn { color: var(--warn); }

.insights-report { margin-bottom: 1rem; }
.insights-report .ai-panel { margin-bottom: 0; border-color: color-mix(in srgb, var(--stamp) 28%, transparent); box-shadow: inset 3px 0 0 var(--stamp); }

.insights-desk {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: .85rem;
  margin-bottom: 1.15rem;
  align-items: start;
}
.desk-col { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.desk-label {
  display: flex; flex-direction: column; gap: .1rem;
  padding: 0 .1rem .15rem;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: .1rem;
}
.desk-label span {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.desk-label em { font-style: normal; font-size: .78rem; color: var(--ink-faint); }
.desk-label-inline {
  flex-direction: row; align-items: baseline; justify-content: space-between; gap: .75rem;
  border-bottom: none; margin: 0 0 .55rem; padding: 0;
}
.desk-panel { margin: 0; }
.desk-panel .ai-head { margin-bottom: .45rem; }
.desk-panel .section-title { font-size: .95rem; }
.desk-panel .hint { margin: .45rem 0 0; font-size: .78rem; }

.insights-posts-rail { margin-bottom: .35rem; }
.insights-list-hint { margin: 0 0 .55rem; font-size: .8rem; color: var(--ink-faint); }

.aud-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: .35rem; }
.aud-kind {
  padding: .45rem .5rem .5rem;
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  min-width: 0;
}
.aud-kind.is-empty { opacity: .65; }
.aud-kind .besttime-format { margin: 0 0 .35rem; }
.aud-block + .aud-block { margin-top: .35rem; padding-top: .3rem; border-top: 1px dashed var(--rule); }
.aud-dim { display: block; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .15rem; }
.aud-list { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.aud-list li { display: flex; justify-content: space-between; gap: .4rem; padding: .08rem 0; }
.aud-list strong { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.online-bars { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: .35rem 0 .2rem; }
.online-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.online-bar span { display: block; width: 100%; background: var(--paper-3); border-radius: 2px 2px 0 0; min-height: 2px; }
.online-bar.is-top span { background: var(--stamp); }
.online-bar em { font-size: .55rem; font-style: normal; color: var(--ink-faint); margin-top: 2px; line-height: 1; }

.topics-table th.num, .topics-table td.num { text-align: right; }

@media (max-width: 980px) {
  .insights-desk { grid-template-columns: 1fr; }
  .aud-kinds { grid-template-columns: 1fr; }
}

/* Format button group on Insights posts rail */
.chips-row-formats { margin-bottom: .55rem; }
.format-seg .c { opacity: .75; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.insights-posts-rail .chips { margin-bottom: .75rem; }

.insights-format-bar { margin: 0 0 1rem; }
.insights-format-bar .format-seg { margin-top: .35rem; }
.insights-format-bar .desk-label-inline { margin-bottom: .25rem; }

.insights-live.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.insights-live.is-loading::after {
  content: "";
  position: sticky;
  top: calc(var(--top-h, 0px) + env(safe-area-inset-top, 0px));
  display: block;
  height: 2px;
  margin: 0 0 .5rem;
  background: linear-gradient(90deg, transparent, var(--stamp), transparent);
  animation: insights-shimmer 1s linear infinite;
}
@keyframes insights-shimmer {
  0% { opacity: .35; }
  50% { opacity: 1; }
  100% { opacity: .35; }
}

/* Media page: Opening & caption check */
.caption-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.caption-checks li { display: flex; gap: .5rem; align-items: baseline; line-height: 1.45; }
.caption-checks .pill { flex: none; }

/* ---------- Responsive shell ---------- */
@media (max-width: 1020px) {
  :root { --sidebar-w: calc(84px + env(safe-area-inset-left, 0px)); }
  .sidebar { padding: 1rem 0.5rem; align-items: stretch; }
  .brand { justify-content: center; padding: 0.2rem 0; }
  .brand-text, .sidebar-foot .foot-text, .sidebar-foot .foot-full { display: none; }
  .sidebar-foot .foot-short { display: inline-flex; justify-content: center; white-space: normal; text-align: center; text-decoration: none; }
  .sidebar-foot a.pill-warn.foot-short:hover { color: var(--warn); }
  .sidebar-foot a.pill-bad.foot-short:hover { color: var(--bad); }
  .sidebar-foot .theme-seg { flex-direction: column; width: 100%; }
  .sidebar-foot .theme-seg button { font-size: 0.68rem; min-height: 26px; }
  .nav a { flex-direction: column; gap: 3px; padding: 0.45rem 0.2rem; font-size: 0.68rem; text-align: center; line-height: 1.15; }
  .nav a .badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; }
  .nav-sep { margin: 0.35rem 0.4rem; }
  .sidebar-foot { align-items: center; padding: 0.6rem 0 0; }
  .main { padding: 1.25rem max(1.25rem, env(safe-area-inset-right, 0px)) 2.25rem 1.25rem; }
  .sidebar { padding-left: calc(0.5rem + env(safe-area-inset-left, 0px)); }
}

@media (max-width: 760px) {
  :root { --tabbar-h: 58px; --top-h: 52px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar {
    display: flex;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--top-h);
    padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
    height: var(--top-h);
    box-sizing: border-box;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .topbar .brand { padding: 0; min-width: 0; flex: 1; justify-content: flex-start; }
  .topbar .brand-mark { width: 28px; height: 28px; }
  .topbar .brand-text { display: flex; }
  .topbar .pill { flex: none; min-height: 44px; padding-inline: 0.75rem; text-decoration: none; }
  .topbar .pill-warn:hover { color: var(--warn); }
  .topbar .pill-bad:hover { color: var(--bad); }
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    min-height: var(--tabbar-h);
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
    background: var(--card);
    border-top: 1px solid var(--rule);
  }
  .main { padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) calc(var(--tabbar-h) + 2rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
  .page-head h1 { font-size: 1.35rem; }
  .readonly-note.phone { margin: 0.75rem 1rem 0; }
}

@media (min-width: 761px) {
  .readonly-note.phone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Technical details (shared) ----------
 * <details class="tech"><summary>Technical details</summary><dl class="kv">…</dl></details>
 * Folds API names, IDs and raw payloads away from the plain-language view. */
details.tech {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rule-strong);
}
details.tech > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-faint);
}
details.tech > summary::-webkit-details-marker { display: none; }
details.tech > summary::before {
  content: "";
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
details.tech[open] > summary::before { transform: rotate(90deg); }
details.tech > summary:hover { color: var(--ink); }
.kv {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 0.3rem 1rem;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
}
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.kv .mono { color: var(--ink-soft); }
pre.json {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  max-height: 18rem;
  overflow: auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: 0.75rem/1.5 var(--mono);
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.muted { color: var(--ink-faint); }
.pill.is-phrase { text-transform: none; letter-spacing: 0; font-size: 0.76rem; font-weight: 600; }
.main > .panel { margin-bottom: 1rem; }

/* ---------- Today ---------- */
.health {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.hchip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink-faint);
  font-size: 0.85rem;
  text-decoration: none;
}
.hchip b { color: var(--ink); font-weight: 600; }
.hchip:hover { border-color: var(--rule-strong); color: var(--ink-soft); }
.conn-dot.is-quiet { background: var(--ink-faint); box-shadow: 0 0 0 3px var(--ignored-soft); }

.kpi-panel { margin-bottom: 1.25rem; padding-bottom: 0.75rem; }
.kpi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.9rem 1rem 0.4rem;
}
.kpi-head h2 { margin: 0; font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.kpi-head .hint { margin: 0; }
.kpi-panel details.tech { margin: 0.5rem 1rem 0; }
.kpi-ledger { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.75rem 1rem 0.6rem;
  border-left: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.kpi:first-child { border-left: 0; }
.kpi:hover { background: var(--hover); color: inherit; }
.kpi-label { font-size: 0.8rem; color: var(--ink-faint); }
.kpi-value {
  font: 700 1.5rem/1.15 var(--display);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.kpi-sub { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; font-size: 0.76rem; color: var(--ink-faint); }
.delta-chip { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-chip.up { color: var(--ok); }
.delta-chip.down { color: var(--bad); }
.delta-chip.flat, .delta-chip.none { color: var(--ink-faint); font-weight: 500; }
svg.spark { display: block; width: 100%; height: 28px; margin-top: 0.3rem; overflow: visible; }
.spark-area { fill: var(--chart-1); opacity: 0.12; }
.spark-line { fill: none; stroke: var(--chart-1); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-dot { fill: var(--chart-1); }

.goal-row { margin-bottom: 1.25rem; }
.goal-row .stat-row { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: start;
}
.today-grid > .panel + .panel { margin-top: 0; }

.best-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; }
.pcard {
  display: flex;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: inherit;
  text-decoration: none;
}
.pcard:hover { border-color: var(--stamp); color: inherit; }
.pcard-cover {
  flex: none;
  width: 64px;
  height: 80px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--paper-3);
  border: 1px solid var(--rule);
}
.pcard-cover.is-empty { display: grid; place-items: center; font-size: 0.68rem; color: var(--ink-faint); text-align: center; }
.pcard-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.pcard-meta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.pcard-cmp { color: var(--stamp); }
.pcard-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--ink);
  font-weight: 550;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pcard-stats { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; margin-top: auto; font-size: 0.76rem; color: var(--ink-faint); }
.pcard-stats b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.today-attn { list-style: none; margin: 0; padding: 0; }
.today-attn li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule);
}
.today-attn li > div { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.today-attn b { color: var(--ink); font-weight: 600; }
.today-attn li > div span { font-size: 0.82rem; color: var(--ink-faint); }
.today-attn .btn { flex: none; }
.attn-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font: 700 0.85rem var(--mono);
  background: var(--stamp-soft);
  color: var(--stamp);
}
.attn-ic.warn { background: var(--warn-soft); color: var(--warn); }
.verdict-read { margin-bottom: 1rem; }
.verdict-text { margin: 0; max-width: 72ch; font: 600 1.05rem/1.55 var(--display); color: var(--ink); }
.cell-comment { white-space: normal; min-width: 14rem; max-width: 32rem; overflow-wrap: anywhere; }
.cell-comment .cell-sub { display: inline; }

@media (max-width: 1180px) {
  .kpi-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(3n + 1) { border-left: 0; }
  .kpi:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .today-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .kpi-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3n + 1) { border-left: 1px solid var(--rule); }
  .kpi:nth-child(2n + 1) { border-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .kpi-value { font-size: 1.3rem; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .kv dd { margin-bottom: 0.4rem; }
  .today-attn li { flex-wrap: wrap; }
  .today-attn .btn { margin-left: 34px; }
}

/* ---------- Posts library (stage 3) ---------- */
.lib-new { margin-bottom: 1rem; }
.lib-new > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 650;
  color: var(--ink);
  list-style: none;
}
.lib-new > summary::-webkit-details-marker { display: none; }
.lib-new > summary::before {
  content: "+";
  font: 600 1rem/1 var(--mono);
  color: var(--stamp);
}
.lib-new[open] > summary::before { content: "−"; }
.lib-new > summary .hint { margin: 0; }
.lib-new[open] > summary { border-bottom: 1px solid var(--rule); }

.lib-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.4rem; }
.lib-tools .chips { margin-bottom: 0; }
.lib-search { display: flex; gap: 0.4rem; align-items: center; flex: 0 1 22rem; min-width: 0; }
.lib-search input { flex: 1; min-width: 0; }
.lib-count { margin: 0 0 0.75rem; }

.lib-sort { display: none; align-items: center; }
.lib-sort-label { font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }

.lib-table th a { color: inherit; text-decoration: none; display: inline-block; }
.lib-table th a:hover { color: var(--ink); }
.lib-table th[aria-sort] a { color: var(--stamp); }
.lib-table th.num, .lib-table td.num { text-align: right; }
.lib-table td { white-space: nowrap; }
.lib-table tbody tr[data-href] { cursor: pointer; }
.lib-table .lib-sticky { position: sticky; left: 0; z-index: 1; background: var(--card); }
.lib-table thead .lib-sticky, .lib-table tfoot .lib-sticky { background: var(--paper-2); }
.lib-table tbody tr:hover .lib-sticky { background: linear-gradient(var(--hover), var(--hover)), var(--card); }
.lib-table tfoot th, .lib-table tfoot td {
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--rule-strong);
  background: var(--paper-2);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}
.lib-table tfoot td.num { text-align: right; }

.lib-post { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.lib-post .pcard-cover { width: 40px; height: 50px; }
.lib-post .pcard-cover.is-empty { font-size: 0.6rem; }
.lib-post-text { display: grid; gap: 0.1rem; min-width: 10rem; }
.lib-open {
  display: block;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.lib-open:hover { color: var(--stamp); text-decoration: underline; }
.lib-ig { color: var(--ink-faint); }

.lib-cards { display: none; list-style: none; margin: 0 0 1rem; padding: 0; gap: 0.6rem; }
.lib-notes { margin-top: 1rem; }
.lib-notes details.tech { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 760px) {
  .lib-panel { display: none; }
  .lib-cards { display: grid; }
  .lib-sort { display: flex; }
  .lib-tools { align-items: stretch; }
  .lib-search { flex: 1 1 100%; }
  .lib-tools .chip, .lib-sort .chip { min-height: 44px; padding-inline: 0.85rem; }
  .lib-search input, .lib-search .btn, .lib-new .btn, .lib-cards .pcard { min-height: 44px; }
  .lib-count a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Campaign cell: status, title, first keywords, edit link */
.lib-cmp-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; max-width: 18rem; white-space: normal; }
.lib-cmp-title { font-size: 0.8rem; color: var(--ink-soft); }
.lib-cmp-cell .keywords { flex-basis: 100%; }
.lib-cmp-edit { font-size: 0.8rem; font-weight: 600; }
.lib-cards .keywords { margin-top: 0.2rem; }
/* The li is the card so the post link and its Edit campaign link sit side by side, not nested */
.lib-cards li { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); min-width: 0; }
.lib-cards li:has(.pcard:hover) { border-color: var(--stamp); }
.lib-cards .pcard { border: 0; background: none; }
.lib-cards .lib-cmp-edit { display: flex; align-items: center; min-height: 44px; padding: 0 0.6rem; border-top: 1px solid var(--rule); }
@media (max-width: 760px) {
  .lib-new input:not([type="checkbox"]), .lib-new textarea, .lib-new select { min-height: 44px; }
  .lib-new label.field:has(input[type="checkbox"]) { min-height: 44px; }
  .lib-orphans .btn-sm, .lib-orphans td > a { min-height: 44px; display: inline-flex; align-items: center; }
  .lib-new details.tech > summary, .lib-orphans details.tech > summary, .lib-notes details.tech > summary { min-height: 44px; }
}

/* ---------- Inbox (stage 3) ----------
 * Funnel strip reuses .kpi-panel/.kpi-ledger as a 4-step <ol>; the stream is a
 * stacked list at every width, so nothing scrolls sideways on a phone. */
.inbox-funnel .kpi-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.inbox-funnel .kpi:hover { background: none; }
.inbox-funnel .kpi + .kpi .kpi-label::before { content: "→ "; color: var(--ink-faint); }
@media (max-width: 1180px) {
  .inbox-funnel .kpi-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inbox-funnel .kpi:nth-child(n) { border-top: 0; border-left: 1px solid var(--rule); }
  .inbox-funnel .kpi:first-child { border-left: 0; }
}
@media (max-width: 760px) {
  .inbox-funnel .kpi-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox-funnel .kpi:nth-child(2n + 1) { border-left: 0; }
  .inbox-funnel .kpi:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .inbox-funnel .kpi:nth-child(3) .kpi-label::before { content: none; }
}

.inbox-filter { justify-content: flex-start; align-items: flex-end; gap: 0.6rem; }
.inbox-filter label.field { margin: 0; min-width: 9.5rem; }
.inbox-filter label.field:first-of-type { min-width: 12rem; }
.inbox-filter-actions { display: flex; gap: 0.4rem; }

.inbox-stream-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 0.4rem; }
.inbox-stream-head .section-title, .inbox-stream-head .hint { margin: 0; }

.inbox-list { list-style: none; margin: 0; padding: 0; }
.inbox-item { padding: 0.85rem 1rem 0.7rem; border-top: 1px solid var(--rule); min-width: 0; }
.inbox-item.is-attention { box-shadow: inset 3px 0 0 var(--warn); }
.inbox-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.inbox-who { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.inbox-src { font-size: 0.82rem; color: var(--ink-faint); }
.inbox-when { margin-left: auto; font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inbox-text { margin: 0.4rem 0 0; max-width: 72ch; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.inbox-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0.55rem 0 0; font-size: 0.84rem; }
.inbox-facts > div { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.inbox-facts dt { color: var(--ink-faint); }
.inbox-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink-soft); }
.inbox-item .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.3rem 0.75rem; margin-top: 0.6rem; }
.inbox-item .row-actions .hint { margin: 0; }
.inbox-item details.tech { margin-top: 0.6rem; }
.inbox-empty p { margin: 0; }
.inbox-empty .hint { margin-top: 0.35rem; }

/* Phone: 44px touch targets, the time drops under the name. */
@media (max-width: 760px) {
  .inbox-filter { display: grid; grid-template-columns: 1fr 1fr; }
  .inbox-filter label.field:first-of-type { grid-column: 1 / -1; min-width: 0; }
  .inbox-filter label.field { min-width: 0; }
  .inbox-filter select, .inbox-filter input { min-height: 44px; width: 100%; }
  .inbox-filter-actions { grid-column: 1 / -1; }
  .inbox-filter-actions .btn, .inbox-item .btn, body[data-page="inbox"] .page-head .btn { min-height: 44px; }
  /* padding keeps the 2px focus ring (2px offset) inside the scroller */
  .inbox-chips { flex-wrap: nowrap; overflow-x: auto; padding: 4px; margin-inline: -4px; scroll-padding-inline: 4px; }
  .inbox-chips .chip { min-height: 44px; flex: none; }
  .inbox-when { margin-left: 0; flex-basis: 100%; }
  .inbox-facts { flex-direction: column; }
  .inbox-facts .toggle { min-height: 44px; }
  .inbox-funnel details.tech > summary, .inbox-item details.tech > summary, body[data-page="inbox"] .callout details.tech > summary { min-height: 44px; }
  .inbox-facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Growth (stage 4) ----------
 * Period chips, the period ledger (static .kpi cells), server-drawn charts
 * (SVG plot + HTML axis labels so text never stretches), stacked shares with
 * a legend that carries every number, and horizontal bars. */
.growth .ai-head .section-title { margin: 0; }
.growth-period { margin: 0 0 1rem; }
.growth-kpis .kpi:hover { background: none; }
.growth-panel { min-width: 0; }
.main > .growth-panel, .main > .insights-status { margin-bottom: 1rem; }
.growth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: start;
}
.growth-grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.growth-grid > .panel + .panel { margin-top: 0; }
.growth-sub { margin: 0.9rem 0 0.45rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); }
.growth-sub:first-of-type { margin-top: 0.2rem; }
.growth-panel table.data th.num, .growth-panel table.data td.num { text-align: right; }
.growth-panel table.data tbody th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border-bottom: 1px solid var(--rule);
}

.gchart { margin: 0; }
.gchart-body { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); }
.gchart-y { position: relative; height: 200px; }
.gchart-y span, .gchart-x span {
  position: absolute;
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gchart-y span { right: 0.5rem; transform: translateY(50%); }
.gchart-plot { height: 200px; min-width: 0; }
.gchart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gchart-grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gchart-line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gchart-area { fill: var(--chart-1); opacity: 0.12; }
.gchart-hit { fill: transparent; }
.gchart-hit:hover { fill: var(--hover); }
.gchart-x { position: relative; height: 1.4rem; margin: 0.3rem 0 0 3.25rem; }
.gchart-x span { top: 0; transform: translateX(-50%); }
.gchart-x span:first-child { transform: none; }
.gchart-x span:last-child { transform: translateX(-100%); }
.gchart figcaption { margin-top: 0.2rem; }

details.growth-table { margin-top: 0.75rem; }
details.growth-table > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--stamp);
}
details.growth-table > summary:hover { text-decoration: underline; }
details.growth-table .table-wrap { max-height: 22rem; overflow: auto; margin-top: 0.4rem; border: 1px solid var(--rule); border-radius: var(--radius); }

.gstack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--paper-3); }
.gstack-seg { display: block; height: 100%; min-width: 2px; }
.gstack-seg + .gstack-seg { border-left: 2px solid var(--card); }
.gstack-seg.c1, .gswatch.c1 { background: var(--chart-1); }
.gstack-seg.c2, .gswatch.c2 { background: var(--chart-2); }
.gstack-seg.c3, .gswatch.c3 { background: var(--chart-3); }
.gstack-seg.c4, .gswatch.c4 { background: var(--ink-faint); }
.gstack-seg.c5, .gswatch.c5 { background: repeating-linear-gradient(45deg, var(--ink-faint) 0 2px, var(--paper-3) 2px 5px); }
.gstack-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin: 0.55rem 0 0; padding: 0; list-style: none; font-size: 0.84rem; }
.gstack-legend li { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.gstack-legend b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.gstack-label { color: var(--ink-soft); }
.gswatch { flex: none; width: 10px; height: 10px; border-radius: 3px; }

.hbars { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.hbars li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(3.5rem, auto); align-items: center; gap: 0.75rem; font-size: 0.86rem; }
.hbar-label { color: var(--ink-soft); }
.hbar-track { height: 10px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.hbar-track > span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--chart-1); }
.hbars b { text-align: right; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.growth-posts-head { margin-top: 1.5rem; }
.growth-posts-head .hint { margin: 0; }

@media (max-width: 1180px) {
  .growth-grid, .growth-grid-even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .growth-period .chip, body[data-page="growth"] .page-actions .btn,
  .insights-live .format-seg .btn, .insights-live .view-seg .btn, .insights-live .toolbar .btn,
  .insights-posts-rail .chip, .insights-live .pills a.pill { min-height: 44px; display: inline-flex; align-items: center; }
  .list-view th a { display: inline-flex; align-items: center; min-height: 44px; }
  .insights-live .cap-actions .btn, body[data-page="growth"] .ai-panel .btn { min-height: 44px; }
  .insights-live .seg { max-width: 100%; overflow-x: auto; } /* the sort group scrolls inside itself, never the page */
  details.growth-table > summary, body[data-page="growth"] details.tech > summary { min-height: 44px; }
  .gchart-y, .gchart-plot { height: 160px; }
  .gchart-body { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .gchart-x { margin-left: 2.75rem; }
  .hbars li { grid-template-columns: 4.75rem minmax(0, 1fr) auto; gap: 0.5rem; }
}

/* ---------- Settings (stage 4) ----------
 * One panel of "set" rows: title + one line on the left, controls on the right;
 * stacks on phones. Messaging, Safety and AI share one form (SettingsSave writes
 * them together); every row but the first carries the top rule. */
.callout-ok { background: var(--ok-soft); }
.set-index { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.set-panel { padding: 0; }
.set {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.75rem 1.75rem;
  padding: 1.15rem 1.1rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--top-h) + 1rem);
}
.set-panel > .set:first-child { border-top: 0; }
.set-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.set-d h2 { margin: 0; font: 650 1rem/1.3 var(--display); color: var(--ink); }
.set-d p { margin: 0.3rem 0 0; max-width: 36ch; font-size: 0.84rem; color: var(--ink-faint); }
.set-c { display: grid; gap: 0.85rem; align-content: start; min-width: 0; max-width: 42rem; }
.set-c > p, .set-c > .hint, .set-sub > p, .set-sub > .hint, .set-goal > .hint { margin: 0; }
.set-c > details.tech, .set-sub > details.tech { margin-top: 0; }
.set-c h3 { margin: 0; font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.set-c .toggle-row { padding: 0; border-bottom: 0; }
.set-c .pill { margin-right: 0.35rem; }
.set-sub { display: grid; gap: 0.6rem; padding-top: 0.85rem; border-top: 1px dashed var(--rule-strong); min-width: 0; }
.set-gap { margin-top: 0.75rem; }
.set-warn { color: var(--warn); font-weight: 650; }

.set-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; }
.set-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--stamp);
  color: var(--on-stamp);
  font: 700 0.9rem var(--display);
  text-transform: uppercase;
}
.set-acct-who { flex: 1 1 12rem; display: grid; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.set-acct-who .hint { margin: 0; }

details.set-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--stamp);
}
details.set-more > summary::-webkit-details-marker { display: none; }
details.set-more > summary::before {
  content: "";
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
details.set-more[open] > summary::before { transform: rotate(90deg); }
.set-steps { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }

.set-goal { display: grid; gap: 0.5rem; min-width: 0; }
.set-goal .goal-seg { margin: 0; justify-self: start; max-width: 100%; }
.goal-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }
.set-save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.set-save .hint { margin: 0; }
.set-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.set-inline label.field { flex: 1 1 14rem; min-width: 0; }
.set-danger .set-d h2 { color: var(--bad); }

@media (max-width: 1020px) {
  .set { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.75rem 1.25rem; }
}
@media (max-width: 760px) {
  .set { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 1rem; }
  .set-d p { max-width: none; }
  /* one swipeable row, as the Inbox chips; padding keeps the focus ring inside the scroller */
  .set-index { flex-wrap: nowrap; overflow-x: auto; padding: 4px; margin: 0 -4px 0.75rem; scroll-padding-inline: 4px; }
  .set-index .chip { flex: none; }
  .set-index .chip, .set .btn, .set input[type="text"], .set .goal-opt { min-height: 44px; }
  .set .goal-opt { display: inline-flex; align-items: center; }
  .set details.tech > summary, details.set-more > summary { min-height: 44px; }
  /* the switch stays 42x24; its label reaches 44px tall for the thumb */
  .set .switch::before { content: ""; position: absolute; inset: -10px -1px; }
}

/* ---------- Reports (stage 4) ----------
 * Latest account report (its sections in two columns), then Experiments and
 * History as stacked lists at every width, so nothing scrolls sideways. */
.rp-quota { margin: 0.4rem 0 0; }
.page-head details.tech { margin-top: 0.4rem; }
.rp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.rp-head h2 { margin: 0; font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.rp-head .hint { margin: 0; }
.rp-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.rp-run.is-failed { border-color: var(--bad-line); background: var(--bad-soft); }
.rp-run a { font-weight: 600; }
.rp-run details.tech { flex-basis: 100%; margin-top: 0.15rem; }
.rp-verdict { margin-top: 0.85rem; }
.rp-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin-top: 1.1rem; }
.rp-sec { min-width: 0; }
.rp-sec h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rp-count { font-weight: 500; letter-spacing: 0; text-transform: none; }
.rp-sec ul { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.1rem; }
.rp-sec li, .rp-sec p { color: var(--ink); overflow-wrap: anywhere; }
.rp-sec p { margin: 0; max-width: 68ch; }
.rp-ev { display: block; margin-top: 0.1rem; font-size: 0.82rem; color: var(--ink-faint); }
.rp-sec ul.rp-todo { list-style: none; padding-left: 0; }
.rp-todo li { position: relative; padding-left: 1.3rem; }
.rp-todo li::before { content: "○"; position: absolute; left: 0; color: var(--ink-faint); }
.rp-todo li.is-done::before { content: none; }
.rp-todo li.is-done { color: var(--ink-soft); }
.rp-tick { position: absolute; left: 0; font-weight: 700; color: var(--ok); }
.rp-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.rp-empty p { margin: 0; }
.rp-empty .hint { margin-top: 0.35rem; max-width: 68ch; }
.rp-latest .rp-empty { margin-top: 0.6rem; }

.rp-chips { margin: 0; padding: 0 1.1rem 0.75rem; }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-item { min-width: 0; padding: 0.85rem 1.1rem 0.7rem; border-top: 1px solid var(--rule); }
.rp-item.is-attention { box-shadow: inset 3px 0 0 var(--bad); }
.rp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.rp-name { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
a.rp-name { text-decoration: none; }
a.rp-name:hover { color: var(--stamp); text-decoration: underline; }
.rp-when { margin-left: auto; font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-text { margin: 0.35rem 0 0; max-width: 72ch; color: var(--ink-soft); overflow-wrap: anywhere; }
.rp-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0.5rem 0 0; font-size: 0.84rem; }
.rp-facts:not(:has(div)) { display: none; }
.rp-facts > div { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.rp-facts dt { color: var(--ink-faint); }
.rp-facts dd { margin: 0; min-width: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.rp-item details.tech { margin-top: 0.6rem; }

/* Phone: one column, the date drops under the title, 44px touch targets. */
@media (max-width: 760px) {
  .rp-secs { grid-template-columns: minmax(0, 1fr); }
  .rp-when { margin-left: 0; flex-basis: 100%; }
  .rp-facts { flex-direction: column; align-items: flex-start; gap: 0; }
  body[data-page="reports"] .page-head .btn, .rp-foot .btn, .rp-chips .chip { min-height: 44px; }
  .rp-run a, .rp-facts dd a, a.rp-name, .rp-quota a { display: inline-flex; align-items: center; min-height: 44px; }
  body[data-page="reports"] details.tech > summary { min-height: 44px; }
}

/* ---------- Account switcher and All creators (stage 4) ----------
 * The switcher is a <details> menu like the phone More menu: in flow under the
 * brand on the full rail, a popover beside the compact rail (<=1020px) and
 * under the phone top bar (<=760px). One membership shows the identity only. */
.ws-current {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-align: left;
}
.ws-switch { min-width: 0; }
.ws-switch > summary { list-style: none; cursor: pointer; }
.ws-switch > summary::-webkit-details-marker { display: none; }
.ws-switch > summary:hover { border-color: var(--rule-strong); }
.ws-switch[open] > summary { border-color: var(--stamp); }
.ws-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.8rem/1 var(--display);
  background: var(--stamp);
  color: var(--on-stamp);
}
.ws-avatar.is-off { background: var(--paper-2); color: var(--ink-soft); border: 1px dashed var(--rule-strong); }
.ws-avatar svg { width: 16px; height: 16px; }
.ws-who { display: grid; flex: 1; min-width: 0; gap: 0.05rem; }
.ws-who b, .ws-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-who b { font-size: 0.88rem; font-weight: 650; color: var(--ink); }
.ws-who > span { font-size: 0.74rem; color: var(--ink-faint); }
.ws-chev { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }
.ws-menu {
  margin-top: 0.35rem;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ws-cap { margin: 0.25rem 0.5rem 0.1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.ws-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ws-list form { margin: 0; }
.ws-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ws-opt:hover { background: var(--hover); color: var(--ink); }
.ws-all { margin-top: 4px; box-shadow: 0 -1px 0 var(--rule); border-radius: 0 0 var(--radius) var(--radius); }
.ws-all[aria-current="page"] { background: var(--stamp-soft); }
.ws-all + .ws-all, .ws-menu > .ws-all:first-child { margin-top: 0; box-shadow: none; }
.creators-add form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-top: 0.75rem; }
.creators-add .field { flex: 1 1 16rem; margin: 0; }

/* All creators: a ledger table on wide screens, cards on a phone. */
.creators-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 0.4rem; }
.creators-head .section-title, .creators-head .hint { margin: 0; }
.creators-table td { white-space: nowrap; }
.creators-table th.num, .creators-table td.num { text-align: right; }
.creators-table td.num .cell-sub { display: block; }
.creators-table tbody th {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: none;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.creators-table tbody tr:hover th { background: var(--hover); }
.creators-table tbody tr.is-current th, .creators-table tbody tr.is-current td { background: var(--stamp-soft); }
.creators-table tbody tr.is-current th { box-shadow: inset 3px 0 0 var(--stamp); }
.creator-cell { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.creator-name { display: grid; min-width: 0; }
.creator-name b { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.creators-table .creator-name { min-width: 10rem; max-width: 15rem; white-space: normal; }
.creators-table .creator-name .cell-sub { white-space: normal; overflow-wrap: anywhere; }
.creators-act { text-align: right; }
.creators-act form { margin: 0; display: inline; }
.creators-cards { display: none; list-style: none; margin: 0 0 1rem; padding: 0; gap: 0.6rem; }
.creator-card { display: grid; gap: 0.65rem; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); min-width: 0; }
.creator-card.is-current { border-color: var(--stamp); box-shadow: inset 3px 0 0 var(--stamp); }
.creator-card .cell-sub { white-space: normal; }
.creator-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.creator-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.creator-stats dt { font-size: 0.72rem; color: var(--ink-faint); }
.creator-stats dd { margin: 0; font: 500 1rem/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.creator-card .creators-act { text-align: left; }
.creators-notes { margin-top: 1rem; }
.creators-notes details.tech { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1020px) {
  .sidebar { z-index: 25; } /* sticky makes the rail a stacking context; lift it so the popover covers the page */
  .sidebar .ws-current { justify-content: center; padding: 0.3rem; border-color: transparent; background: none; }
  .sidebar .ws-current .ws-who, .sidebar .ws-current .ws-chev {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0;
  }
  .sidebar .ws-switch[open] > summary .ws-avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--stamp); }
  .sidebar .ws-menu {
    position: fixed;
    z-index: 40;
    top: 4.25rem;
    left: calc(var(--sidebar-w) + 6px);
    width: min(300px, calc(100vw - var(--sidebar-w) - 16px));
    max-height: calc(100dvh - 5.25rem);
    overflow-y: auto;
    margin: 0;
  }
}

@media (max-width: 760px) {
  .topbar .brand.is-mark { flex: none; min-width: 44px; min-height: 44px; justify-content: center; }
  .topbar .ws-switch, .topbar .ws-static { flex: 1; min-width: 0; }
  .topbar .ws-current { min-height: 44px; padding: 0 0.25rem; border: 0; background: none; }
  .topbar .ws-menu {
    position: fixed;
    z-index: 31;
    top: calc(env(safe-area-inset-top, 0px) + var(--top-h) + 6px);
    left: max(8px, env(safe-area-inset-left, 0px));
    width: min(340px, calc(100vw - 16px));
    max-height: calc(100dvh - var(--top-h) - var(--tabbar-h) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
  }
  .creators-panel { display: none; }
  .creators-cards { display: grid; }
  .creator-card .btn { min-height: 44px; width: 100%; justify-content: center; }
  .creators-notes details.tech > summary { min-height: 44px; }
}