/* ── DESIGN TOKENS ─────────────────────────────────────────────────────────
   Warm palette, hairline borders, single amber accent, no rounded shapes.
   Dark is default; data-theme="light" inverts lightness while keeping the
   same warm hue family.                                                    */
:root {
  --bg-deep:      #0a0908;
  --bg-primary:   #0d0c0b;
  --bg-elevated:  #161412;
  --bg-surface:   #1c1a17;
  --bg-input:     #12110f;
  --bg-nav:       rgba(10, 9, 8, 0.85);

  --text-primary:   #e8e4dc;
  --text-secondary: #7a756c;
  --text-dim:       #4a463f;

  --accent:       #c8a455;
  --accent-hover: #ddb966;
  --accent-dim:   rgba(200, 164, 85, 0.12);
  --accent-glow:  rgba(200, 164, 85, 0.06);
  --accent-fg:    #0a0908;   /* fg color on filled-accent surfaces — dark ink reads well on the lightish dark-mode amber */

  --border-line:    #2a2622;
  --border-subtle:  #1e1c19;

  --error:   #c45a4a;
  --success: #6a9f5b;
  --grain-opacity: 0.025;

  /* The only shadow used in the system — modals only. */
  --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Sharp corners everywhere; tiny radius reserved for pill bars only. */
  --r:  0;
  --rs: 0;
  --r-pill: 1px;

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* ── Legacy aliases ─────────────────────────────────────────────────────
     The component CSS below was built against the old teal palette; rather
     than rewriting every selector at once, the old names point at the new
     warm tokens so the cascade lights up everything for free. New rules
     should reference the design tokens directly. */
  --brand:       var(--accent);
  --brand-hi:    var(--accent-hover);
  --brand-light: var(--accent-dim);
  --brand-mid:   var(--accent-glow);
  --brand-ring:  var(--accent-dim);

  --bg:          var(--bg-primary);
  --surface:     var(--bg-elevated);
  --border:      var(--border-line);
  --border-hi:   var(--border-line);

  --t1:          var(--text-primary);
  --t2:          var(--text-secondary);
  --t3:          var(--text-dim);

  --green:       var(--success);
  --green-bg:    rgba(106, 159, 91, 0.10);
  --green-bord:  rgba(106, 159, 91, 0.35);
  --red:         var(--error);
  --red-bg:      rgba(196, 90, 74, 0.10);
  --red-bord:    rgba(196, 90, 74, 0.35);
  --amber:       var(--accent);
  --amber-bg:    var(--accent-dim);
  --amber-bord:  rgba(200, 164, 85, 0.40);
  --yellow:      var(--accent);
  --purple:      var(--accent);
  --purple-bg:   var(--accent-dim);
  --purple-bord: rgba(200, 164, 85, 0.40);
  --orange:      var(--accent);
  --orange-bg:   var(--accent-dim);
  --orange-bord: rgba(200, 164, 85, 0.40);
  --blue:        var(--text-secondary);
  --blue-bg:     var(--bg-surface);
  --blue-bord:   var(--border-line);
  --gray-bg:     var(--bg-surface);
  --gray-bord:   var(--border-line);

  --shadow-sm:   none;
  --shadow:      var(--shadow-modal);

  --sans: var(--font-body);
}

[data-theme="light"] {
  --bg-deep:      #2a241c;            /* used as fg-on-accent — keep dark */
  --bg-primary:   #f3ecdf;            /* warm parchment */
  --bg-elevated:  #ebe2d0;
  --bg-surface:   #e3d8c2;
  --bg-input:     #f7f1e6;
  --bg-nav:       rgba(243, 236, 223, 0.85);

  --text-primary:   #2a241c;          /* warm ink */
  --text-secondary: #6b6253;
  --text-dim:       #a39a89;

  --accent:       #9b7a2c;            /* deeper amber for contrast */
  --accent-hover: #7e6220;
  --accent-dim:   rgba(155, 122, 44, 0.14);
  --accent-glow:  rgba(155, 122, 44, 0.07);
  --accent-fg:    #f3ecdf;   /* parchment fg on the deeper light-mode amber for ~7:1 contrast */

  --border-line:    #d4c9b1;
  --border-subtle:  #e2d8c2;

  --error:   #b14535;
  --success: #5a8a4d;
  --grain-opacity: 0.012;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
::selection { background: var(--accent); color: var(--accent-fg); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-line); border-radius: 0; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg-primary);
  color: var(--text-secondary);
  display: flex;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typography rules ─────────────────────────────────────────────────────
   Three rules do most of the work:
   1) Big numerals + page headlines = serif, often italic (Cormorant).
   2) Buttons / nav / labels / captions = mono uppercase, letter-spaced.
   3) Body and inputs = plain DM Sans, no tricks.
   Never mix: don't bold the mono labels, don't put serif on a button. */
.serif    { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.mono-cap { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 400; }

/* ── FILM GRAIN OVERLAY ───────────────────────────────────────────────────
   Site-wide tungsten-lit feel. SVG fractal noise (looks like film, not
   like JPEG noise). Pointer-events:none so it never intercepts clicks. */
#grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

/* ── PAGE-LEVEL ENTRANCE — single canonical animation, no scroll choreography */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#view > * { animation: fadeUp 0.5s ease both; }

/* ── SIDEBAR ── */
#sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0 0 20px;
  overflow-y: auto;
}

/* Push Usage + Theme to the very bottom of the sidebar. margin-top:auto on
   the wrapper does the work. */
.sidebar-bottom {
  margin-top: auto;
}

/* Instagram (and future) connection status row in the sidebar bottom. */
.ig-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 24px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ig-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}
.ig-status[data-state="ok"]    .ig-status-dot { background: var(--success); }
.ig-status[data-state="err"]   .ig-status-dot { background: var(--error); }
.ig-status[data-state="off"]   .ig-status-dot { background: var(--text-dim); }
.ig-status[data-state="mixed"] .ig-status-dot { background: var(--accent); }
.ig-status-state {
  margin-left: auto;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

/* ── 3-WAY THEME SEGMENTED CONTROL ───────────────────────────────────────── */
.theme-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 4px 12px 0;
  border: 1px solid var(--border-line);
  padding: 2px;
  border-radius: var(--r-pill);
}
.theme-toggle button {
  /* Override global button rules so segmented children sit clean. */
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  min-width: 0;
}
.theme-toggle button:hover { color: var(--text-primary); border-color: transparent; }
.theme-toggle button.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.logo {
  display: block;
  padding: 24px 22px 18px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  line-height: 1;
  transition: color 0.15s;
}
.logo:hover { color: var(--accent); text-decoration: none; }

.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 22px 6px;
}

nav {
  padding: 2px 12px;
}
nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 9px 11px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
nav button svg { color: var(--text-dim); transition: color 0.2s; flex-shrink: 0; }
nav button:hover { color: var(--text-primary); border-bottom-color: var(--accent); }
nav button:hover svg { color: var(--text-primary); }
nav button.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
nav button.active svg { color: var(--accent); }

.usage-indicator {
  display: block;
  width: calc(100% - 24px);
  margin: 2px 12px 0;
  text-align: left;
  padding: 10px 11px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.usage-indicator:hover { color: var(--accent); border-color: var(--accent); }
.usage-indicator.active { color: var(--accent); border-color: var(--accent); }
.usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.usage-row + .usage-row { margin-top: 5px; }
.usage-row span:first-child {
  color: var(--t3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.usage-row span:last-child {
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: inherit;
}

/* Usage page: stacked-bar chart cards */
.usage-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  .usage-cards-grid { grid-template-columns: 1fr; }
}
.usage-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.usage-chart-card .usage-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.usage-chart-card .usage-card-total {
  font-size: 30px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
  line-height: 1.1;
}
.usage-chart-wrap {
  margin-bottom: 18px;
}
.usage-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
}
.usage-legend-row {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--t2);
  gap: 10px;
}
.usage-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.usage-legend-name { flex: 1; }
.usage-legend-val {
  font-variant-numeric: tabular-nums;
  color: var(--t3);
  font-size: 12px;
  font-weight: 500;
}

/* Range picker (segmented pills) */
.usage-range-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.usage-range-pills {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--border-line);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 0;
}
.usage-range-pills .usage-range-pill {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  min-width: 44px;
  text-align: center;
}
.usage-range-pills .usage-range-pill:hover { color: var(--text-primary); }
.usage-range-pills .usage-range-pill.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.usage-range-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.usage-range-custom input {
  width: auto;
  padding: 6px 10px;
  font-size: 12px;
  height: 32px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.usage-range-custom.hidden { display: none; }

/* Chart tooltip */
.chart-tooltip {
  position: fixed;
  background: var(--bg-deep);
  border: 1px solid var(--border-line);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 1000;
  box-shadow: var(--shadow-modal);
  min-width: 200px;
  max-width: 280px;
}
.chart-tooltip.hidden { display: none; }
.chart-tooltip .tt-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip .tt-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-line);
}
.chart-tooltip .tt-total-label {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 400;
}
.chart-tooltip .tt-total-val   { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.chart-tooltip .tt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.chart-tooltip .tt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chart-tooltip .tt-model { flex: 1; color: var(--text-secondary); font-size: 12px; }
.chart-tooltip .tt-val { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); }
.chart-tooltip .tt-empty { color: var(--text-dim); font-style: italic; font-size: 12px; }

/* ── Generic SVG chart tooltip card ────────────────────────────────────────
   Built from rows (label/value pairs) + an optional footer for context.
   Drives every chart on the site; values come from data-tip attrs built
   by tipAttr(rows, footer) in app.js. */
.chart-tip {
  position: fixed;
  z-index: 1000;
  background: var(--bg-elevated);
  border: 1px solid var(--border-line);
  padding: 0.45rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 120px;
  max-width: 280px;
  box-shadow: var(--shadow-modal);
}
.chart-tip.hidden { display: none; }
.chart-tip .tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.chart-tip .tooltip-row span {
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.chart-tip .tooltip-row strong {
  font-size: 0.78rem;
  color: var(--text-primary);
  font-weight: 600;
}
.chart-tip .tooltip-date {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 0.1rem;
}

.usage-chart-wrap {
  margin-bottom: 18px;
  cursor: crosshair;
}

/* ── CONTENT ── */
#content { flex: 1; overflow-y: auto; }

#view { padding: 40px 44px; max-width: 1600px; }

/* ── PAGE HEADER ── */
.ph {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* Page headlines = serif, museum plaque feel. Fraunces (variable optical
   size) sits between Cormorant elegance and a more grounded slab — works
   better for short page titles where italic Garamond felt fragile. */
.ph-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.ph-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 8px;
}
.ph-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── CARD ── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-line);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 18px;
}
.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 24px; }

/* ── SECTION LABEL ── */
.slabel {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 28px 0 12px;
}
.slabel:first-child { margin-top: 0; }

/* ── FORMS ── */
.form-grid { display: grid; gap: 18px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

input, textarea, select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-line);
  color: var(--text-primary);
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 14px;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s, outline-color 0.2s;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
/* Suppress Chrome's yellow/cream autofill bg that ignores our dark theme.
   The -webkit-box-shadow trick paints the input bg via shadow inset since
   the underlying bg can't be overridden directly when autofill is active. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.55; }

input[type=checkbox], input[type=radio] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--brand);
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
  flex: 0 0 auto;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.check-row-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t1);
  margin: 0;
  cursor: pointer;
}

/* custom caret for selects */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 34px;
}

/* Color inputs need the native swatch — reverse the global `appearance:none`. */
input[type=color] {
  appearance: auto;
  -webkit-appearance: auto;
  padding: 3px;
  height: 38px;
  cursor: pointer;
  background: var(--bg-input);
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────
   Editorial mono uppercase. Default is outlined (no fill), 1px hairline.
   Hover swaps border + text to amber. Primary is filled amber on the deep
   bg color, used sparingly for the single CTA on a screen.            */
button {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-line);
  background: transparent;
  color: var(--text-secondary);
  padding: 0.45rem 0.95rem;
  border-radius: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 500;
}
button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-fg);
}

button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
  padding: 0.4rem 0.7rem;
}
button.ghost:hover { color: var(--accent); border-color: transparent; background: transparent; }

button.danger { color: var(--error); background: transparent; border-color: transparent; }
button.danger:hover { color: var(--error); border-color: var(--error); background: transparent; }

button.sm { padding: 0.35rem 0.85rem; font-size: 0.72rem; }
button.xs { padding: 0.25rem 0.7rem; font-size: 0.66rem; }

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button.ghost:disabled:hover   { color: var(--text-dim);   border-color: transparent; background: transparent; }
button.danger:disabled:hover  { color: var(--error);      border-color: transparent; background: transparent; }
button.primary:disabled:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button:disabled:hover         { color: var(--text-secondary); border-color: var(--border-line); background: transparent; }

.btn-row { display: flex; gap: 10px; align-items: center; margin-top: 20px; }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead tr { border-bottom: 1px solid var(--border); }
th {
  text-align: left;
  padding: 14px 20px 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-line);
}
thead tr:first-child th:first-child { border-top-left-radius: 0; }
thead tr:first-child th:last-child  { border-top-right-radius: 0; }
td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-elevated); }

/* ── BADGE / CHIP ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 0;
  white-space: nowrap;
  border: 1px solid var(--border-line);
}
.badge.purple { background: var(--purple-bg); color: var(--purple); border-color: var(--purple-bord); }
.badge.green  { background: var(--green-bg);  color: var(--green);  border-color: var(--green-bord); }
.badge.red    { background: var(--red-bg);    color: var(--red);    border-color: var(--red-bord); }
.badge.amber  { background: var(--amber-bg);  color: var(--amber);  border-color: var(--amber-bord); }
.badge.orange { background: var(--orange-bg); color: var(--orange); border-color: var(--orange-bord); }
.badge.blue   { background: var(--blue-bg);   color: var(--blue);   border-color: var(--blue-bord); }
.badge.gray   { background: var(--gray-bg);   color: var(--t3);     border-color: var(--gray-bord); }

/* ── SCORE ── */
.score-cell { display: flex; align-items: center; gap: 8px; }
.score-bar { width: 48px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.score-fill { height: 100%; border-radius: 2px; }
.score-fill.hi  { background: var(--green); }
.score-fill.mid { background: var(--amber); }
.score-fill.lo  { background: var(--red); }
.score-num { font-size: 12px; font-weight: 600; min-width: 26px; }
.score-num.hi  { color: var(--green); }
.score-num.mid { color: var(--amber); }
.score-num.lo  { color: var(--red); }
.score-num.nil { color: var(--t3); font-weight: 400; }

/* ── STATUS DOT ── */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--border-hi); flex-shrink: 0; }
.dot.on  { background: var(--green); box-shadow: 0 0 0 2px var(--green-bg); }
.dot.err { background: var(--red); }

/* ── RECORD (expandable draft) ── */
.record {
  border-bottom: 1px solid var(--border);
}
.record:last-child { border-bottom: none; }
.record-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  cursor: pointer;
  transition: background 0.1s;
  flex-wrap: nowrap;
  min-width: 0;
}
.record-head:hover { background: var(--bg-surface); }
.record-chevron { color: var(--text-dim); font-size: 11px; flex-shrink: 0; transition: transform 0.15s; }
.record.open .record-chevron { transform: rotate(90deg); }
.record-title { font-weight: 500; color: var(--text-primary); flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.record-meta  { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--text-dim); white-space: nowrap; }
.record-body  { display: none; padding: 20px 24px 24px; border-top: 1px solid var(--border-line); background: var(--bg-primary); }
.record.open .record-body { display: block; }

/* Brief teal pulse to draw the eye when a draft is opened via a deep-link
   (e.g. clicking "drafted ›" on the Items page). */
@keyframes focus-flash {
  0%   { box-shadow: 0 0 0 0 var(--brand-ring); }
  40%  { box-shadow: 0 0 0 4px var(--brand-ring); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.record.focus-flash {
  animation: focus-flash 1.6s ease-out 1;
}

/* Title + structural-shape line in the record header. Stacks the title
   and the "caption + 4 slides" descriptor so both fit without colliding. */
.record-title-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.record-shape {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.02em;
}

/* Status tabs at the top of the Drafts view. Live counts so triage doesn't
   require switching tabs blindly. */
.drafts-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.drafts-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.drafts-tab:hover { color: var(--t1); }
.drafts-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.drafts-tab-count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--t2);
  font-variant-numeric: tabular-nums;
}
.drafts-tab.active .drafts-tab-count {
  background: rgba(13,148,136,0.12);
  color: var(--brand);
}

/* Buttons that put an inline icon next to a label, e.g. the Reset button
   in the drafts filter bar. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.icon-btn svg { flex-shrink: 0; }

/* Two clearly-labelled sections inside an expanded draft so it's obvious
   the post is "Text + Images" rather than one mashed list of fields. */
.draft-section {
  margin-bottom: 20px;
}
.draft-section:last-child {
  margin-bottom: 0;
}
.draft-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Newly fetched item rows get a soft amber wash that fades over a few
   seconds. Re-fires on every render of the row, so reloading the page
   while the item is still "recent" replays the highlight. */
@keyframes new-row-flash {
  0%   { background-color: var(--accent-dim); }
  60%  { background-color: var(--accent-glow); }
  100% { background-color: transparent; }
}
tr.is-new-row > td {
  animation: new-row-flash 5s ease-out 1;
}

@keyframes new-eval-flash {
  0%   { background-color: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent); }
  60%  { background-color: var(--accent-glow); box-shadow: inset 0 0 0 1px var(--accent-dim); }
  100% { background-color: transparent;        box-shadow: inset 0 0 0 1px transparent; }
}
.score-cell.is-new-eval {
  border-radius: 0;
  padding: 2px 4px;
  margin: -2px -4px;
  animation: new-eval-flash 4s ease-out 1;
}

/* ── JOBS ── */
.jobs-timeline-card {
  margin-bottom: 18px;
  padding: 14px 16px;
}
.jobs-timeline-wrap {
  width: 100%;
  margin-top: 6px;
}
.jobs-timeline {
  width: 100%;
  height: auto;
  display: block;
}
.jobs-timeline-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: auto;
  font-size: 11px;
  color: var(--t2);
}
.jobs-timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.jobs-timeline-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.jobs-timeline-legend .dot.ok        { background: var(--green); }
.jobs-timeline-legend .dot.error     { background: var(--red); }
.jobs-timeline-legend .dot.running   { background: var(--t3); }
.jobs-timeline-legend .dot.scheduled { background: transparent; border-left: 2px dashed var(--brand); width: 0; height: 12px; border-radius: 0; }

/* ── HOME / DASHBOARD ── */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.home-section {
  border: 1px solid var(--border-line);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
}
.home-section-wide { grid-column: 1 / -1; }
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-line);
}
.home-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.home-section-more {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-decoration: none;
}
.home-section-more:hover { color: var(--accent); }
.home-section-body { padding: 6px 8px; }
.home-empty {
  padding: 22px 12px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.home-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-line);
}
.home-row:last-child { border-bottom: none; }
.home-row:hover { background: var(--bg); }
.home-row-title {
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-row-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-row-stack .home-row-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-row-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.home-row-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
  border: 1px solid var(--accent);
}
.home-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 10px;
}
.home-thumb {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--border-line);
}
.home-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.home-thumb-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
}
.home-thumb-meta {
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  background: var(--bg-surface);
}
.home-thumb:hover { border-color: var(--accent); }
.home-thumb-engagement {
  display: flex;
  gap: 12px;
  padding-top: 6px;
  background: var(--bg-surface);
  border-top: none;
}
.home-thumb-engagement .home-thumb-stat strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  margin-right: 4px;
}
.home-thumb-stat { display: inline-flex; align-items: baseline; }
.home-pulse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border-line);
}
.home-pulse-cell {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--border-line);
}
.home-pulse-cell:last-child { border-right: none; }
.home-pulse-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.home-pulse-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.home-pulse-jobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.home-pulse-job {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  text-decoration: none;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-line);
}
.home-pulse-job:last-child { border-right: none; }
.home-pulse-job:hover { color: var(--accent); }

/* ── ASSET ENGAGEMENT (7d / 30d totals on the asset detail page) ── */
.asset-engagement-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}
.asset-engagement-window {
  padding: 16px 18px;
  border-right: 1px solid var(--border-line);
}
.asset-engagement-window:last-child { border-right: none; }
.asset-engagement-window-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.asset-engagement-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.asset-engagement-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asset-engagement-stat span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.asset-engagement-stat strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .asset-engagement-card { grid-template-columns: 1fr; }
  .asset-engagement-window { border-right: none; border-bottom: 1px solid var(--border-line); }
  .asset-engagement-window:last-child { border-bottom: none; }
}

/* ── PUBLISHED GRID ── (read-only post cards in the Published view) */
.published-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.published-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-line);
  background: var(--bg-surface);
}
.pcard-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border-bottom: 1px solid var(--border-line);
  overflow: hidden;
}
.pcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}
.pcard-carousel {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
}
.pcard-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px 12px;
}
.pcard-title {
  font-size: 13px; line-height: 1.35; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.pcard-link {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent);
  text-decoration: none;
}
.pcard-link:hover { color: var(--accent-hover); }
.pcard-link.muted { color: var(--text-dim); }

.pcard-stats {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-line);
}
.pcard-stats-pending,
.pcard-stats-error {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.pcard-stats-error { color: var(--red); }
.pcard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pcard-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.pcard-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pcard-stat-num {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
}
.pcard-stats-meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.pcard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.pcard-refresh {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 8px;
}

.jobs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.job-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 16px;
}
.job-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.job-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}
.job-card-cron {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--t3);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.job-card-rows {
  display: grid;
  grid-template-columns: auto 1fr auto;
  row-gap: 6px;
  column-gap: 8px;
  align-items: center;
  font-size: 12px;
}
.job-card-row { display: contents; }
.job-card-row > .muted { font-size: 11px; }
.job-card-row > .ago,
.job-card-row > .job-card-last { justify-self: end; text-align: right; }
.job-card-last { display: inline-flex; align-items: center; gap: 8px; }
.job-card-actions { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.job-summary {
  font-size: 11px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.draft-source-line {
  font-size: 11px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-line);
  line-height: 1.45;
}
.draft-source-line strong {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}
.draft-source-line a { color: var(--accent); }

/* ── DRAFT IMAGE PANEL ── */
.draft-image-panel {
  margin-bottom: 18px;
}

/* Slot list — vertical stack of cards, one per slide. Replaces the old
   horizontal tab strip so a draft's image structure (caption + N slides
   each with components) is scannable top-to-bottom. */
.slot-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.slot-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.slot-card.active {
  border-color: var(--accent);
  box-shadow: none;
}
.slot-card-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.slot-card.active .slot-card-summary {
  cursor: default;
  border-bottom: 1px solid var(--border-line);
  background: var(--bg-surface);
}
.slot-card:not(.active):hover .slot-card-summary { background: var(--bg-surface); }

.slot-thumb {
  width: 48px;
  height: 48px;
  border-radius: 0;
  border: 1px solid var(--border-line);
  object-fit: cover;
  flex-shrink: 0;
}
.slot-thumb.empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--t3);
  background: var(--bg);
}
.slot-meta {
  flex: 1;
  min-width: 0;
}
.slot-meta-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}
.slot-meta-detail {
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-card-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--t3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.slot-card-remove:hover {
  border-color: var(--red);
  color: var(--red);
}
.slot-card-body {
  padding: 16px;
}
.slot-add-btn {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: transparent;
  color: var(--t2);
  padding: 12px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}
.slot-add-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.draft-image-panel .draft-image {
  width: 100%;
  max-width: 540px;
  border-radius: var(--r);
  display: block;
  border: 1px solid var(--border);
  transition: opacity 0.18s;
}
.draft-image-panel .draft-image.is-composing {
  opacity: 0.5;
}
.draft-image-panel .draft-image-placeholder {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--border-hi);
  border-radius: var(--r);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
  font-size: 13px;
}
.draft-image-meta,
.draft-attribution {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  max-width: 540px;
  color: var(--t2);
}
.draft-attribution a { color: var(--brand-hi); text-decoration: underline; }
.draft-attribution a:hover { color: var(--brand); }
.image-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.image-queries button.xs { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; }
.image-queries button.xs.active {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-hi);
}
.image-candidates {
  max-width: 540px;
}
.image-source-group + .image-source-group { margin-top: 14px; }
.image-source-label {
  margin-bottom: 6px;
}
.image-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.image-source-badge.unsplash  { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.image-source-badge.wikimedia { background: #f5f3ff; color: #6d28d9; border-color: #e9d5ff; }
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.image-candidate {
  border: 1px solid var(--border-hi);
  border-radius: var(--rs);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  transition: all 0.12s;
}
.image-candidate:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.image-candidate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chart-modal "extract from article" row */
.chart-extract-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chart-extract-row input[type=text] {
  flex: 1;
}
.chart-extract-row button.sm {
  white-space: nowrap;
}

/* Manual search input + upload button in picker */
.image-query-custom {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  max-width: 540px;
  align-items: center;
}
.image-query-custom input[type=search] {
  flex: 1;
  padding: 7px 12px;
  font-size: 12px;
  height: auto;
}
.image-query-custom label.file-btn {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}
.image-query-custom button.sm,
.image-query-custom label.file-btn {
  height: 32px;
  box-sizing: border-box;
}

/* Editable draft fields */
.draft-edit {
  width: 100%;
  max-width: 900px;
  background: var(--bg-input);
  border: 1px solid var(--border-line);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  border-radius: 0;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.2s, outline-color 0.2s;
}
.draft-edit:hover { border-color: var(--text-dim); }
.draft-edit:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; box-shadow: none; }
textarea.draft-edit { min-height: 80px; resize: vertical; }
.draft-edit.draft-edit-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.01em;
  padding: 10px 12px;
}
.draft-edit.draft-edit-visual {
  flex: 1;
  background: transparent;
  border: 1px dashed var(--amber-bord);
  color: var(--t1);
  padding: 5px 9px;
  font-size: 13px;
}
.draft-edit.draft-edit-visual:focus { background: var(--bg-input); border-style: solid; border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; box-shadow: none; }

/* Picker review (after image(s) picked, before compose) */
.picked-row {
  display: flex;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
  align-items: center;
}
.picked-add {
  padding: 6px 12px;
  font-size: 12px;
}
.picked-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--rs);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}
.picked-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picked-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(15,23,42,0.78);
  color: #fff;
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.picked-remove:hover { background: var(--red); }
.picked-action {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(15,23,42,0.78);
  color: #fff;
  border: none;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.picked-action:hover { background: var(--brand); }
.picked-edit  { top: 4px; left: 4px; }
.picked-regen { bottom: 4px; left: 4px; }

.picker-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.picker-opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.picker-opt-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t2);
  min-width: 52px;
}
.pill-bar {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.pill-bar .pill {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--t2);
  border-radius: calc(var(--rs) - 2px);
  cursor: pointer;
  font-family: var(--sans);
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
  min-width: 40px;
  text-align: center;
}
.pill-bar .pill:hover { color: var(--t1); }
.pill-bar .pill.active {
  background: var(--surface);
  color: var(--t1);
  box-shadow: var(--shadow-sm);
}

.picker-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Inline size slider for inset images */
.size-slider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.size-slider input[type=range] {
  width: 180px;
  padding: 0;
  height: auto;
  accent-color: var(--brand);
}
.size-slider .size-value {
  font-size: 12px;
  color: var(--t2);
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ── DRAFT ── */
.draft-text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--t2);
  white-space: pre-wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 14px;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.draft-visual {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 14px;
  background: var(--amber-bg);
  border: 1px solid #fde68a;
  border-radius: var(--rs);
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--t2);
}
.draft-visual-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
  margin-top: 2px;
}
.draft-footer { display: flex; align-items: center; gap: 8px; }
.draft-footer-meta { margin-left: auto; font-size: 11px; color: var(--t3); }

/* ── INLINE EDIT PANEL ── */
.edit-panel {
  padding: 20px 24px;
  background: transparent;
  border-top: none;
}

/* ── MISC ── */
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

details { margin-top: 4px; }
summary { font-size: 12px; color: var(--t3); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '↓ '; font-size: 10px; }
details[open] summary::before { content: '↑ '; }

.strong { color: var(--t1); font-weight: 500; }
.muted { color: var(--t3); font-size: 12px; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 32px;
  color: var(--t3);
  font-size: 13px;
  text-align: center;
}
.empty svg { opacity: 0.3; margin-bottom: 4px; }

/* ── FILTER BAR ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-line);
  flex-wrap: wrap;
  background: var(--bg-surface);
}
.filter-bar input,
.filter-bar select {
  width: auto;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 0;
  height: 32px;
}
.filter-bar select { padding-right: 32px; background-position: right 10px center; }
.filter-bar input[type=search] { min-width: 200px; }
.filter-bar select { min-width: 130px; }
.filter-bar input[type=number] { width: 76px; }
.filter-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.filter-sep { width: 1px; height: 22px; background: var(--border-line); margin: 0 6px; }
.filter-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── SORTABLE TABLE ── */
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover { color: var(--t2); }
th.sort-active { color: var(--t1); }
th.sort-active::after { content: ' ↓'; font-size: 10px; }
th.sort-active.asc::after { content: ' ↑'; }

/* ── DROPDOWN ── */
.dd-wrap { position: relative; display: inline-block; }
.dd-menu {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 4px;
  min-width: 130px;
  z-index: 50;
}
.dd-menu.open { display: block; }
.dd-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--rs);
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--t2);
  cursor: pointer;
}
.dd-item:hover { background: var(--bg); color: var(--t1); }
.dd-item.danger { color: var(--red); }
.dd-item.danger:hover { background: var(--red-bg); }

/* ── TOAST ── */
#toast {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-line);
  color: var(--text-primary);
  padding: 10px 18px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-modal);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
#toast.err { color: var(--error); border-color: var(--error); }
#toast .toast-action {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-left: 1px solid var(--border-line);
  padding-left: 12px;
}
#toast .toast-action:hover { color: var(--accent-hover); text-decoration: underline; }
#toast.hidden { display: none; }
.hidden { display: none; }

/* ── ASSET ICON (display) ── */
.asset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 11px;
  flex-shrink: 0;
  overflow: hidden;
}
/* Letter-fallback state (no image) — draw a filled tile. */
.asset-icon:not(:empty) {
  background-color: var(--brand-light);
  color: var(--brand-hi);
  font-weight: 600;
  border: 1px solid var(--border);
}
.asset-icon.sm { width: 22px; height: 22px; font-size: 10px; border-radius: 5px; }
.asset-icon.lg { width: 48px; height: 48px; font-size: 22px; border-radius: 10px; }

/* ── ASSET DETAIL PAGE ── */
.ph-crumbs {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
}
.ph-crumbs a {
  color: var(--t2);
  text-decoration: none;
}
.ph-crumbs a:hover { color: var(--brand); }

.asset-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.asset-stat-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 16px;
}
.asset-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
}
.asset-stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.asset-stat-hint {
  font-size: 11px;
  margin-top: 4px;
}

.asset-items-card { padding: 14px 16px; }
.asset-items-chart-wrap { width: 100%; margin-top: 6px; }
.asset-items-chart { width: 100%; height: auto; display: block; }

/* ── Chart hover highlights ────────────────────────────────────────────────
   Brightness only — preserves the element's own color so a red dot doesn't
   suddenly get an amber ring. The items chart's circles already carry a
   same-color stroke; bumping its width on hover gives a subtle outline
   effect without recoloring. */
.asset-items-chart g,
.jobs-timeline g {
  cursor: pointer;
}
.asset-items-chart g:hover circle {
  filter: brightness(1.4);
  stroke-width: 1.8;
}
.asset-items-chart g:hover rect,
.jobs-timeline g:hover rect,
.jobs-timeline g:hover line {
  filter: brightness(1.35);
}

.asset-chart-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: auto;
  font-size: 11px;
  color: var(--t2);
}
.asset-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.asset-chart-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.asset-chart-legend .dot.brand     { background: var(--brand); }
.asset-chart-legend .dot.mid       { background: var(--amber); }
.asset-chart-legend .dot.lo        { background: var(--red); }
.asset-chart-legend .dot.un        { background: var(--t3); opacity: 0.5; }
.asset-chart-legend .dot.pending   { background: var(--accent-dim); border: 1px solid var(--accent); }
.asset-chart-legend .dot.approved  { background: var(--success); }
.asset-chart-legend .dot.rejected  { background: var(--error); }
.asset-chart-legend .dot.published { background: var(--accent); }

/* ── ICON PICKER (form input) ── */
.icon-picker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon-picker .icon-preview {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border-hi);
  flex-shrink: 0;
  color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.04em;
}
.file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border-hi);
  border-radius: var(--rs);
  font-size: 12px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  background: var(--surface);
  transition: all 0.12s;
}
.file-btn:hover { background: var(--bg); color: var(--t1); }
.file-btn input { display: none; }

/* ── COMPOSE STYLE form grid (in asset edit panel) ── */
.compose-style-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .compose-style-wrap { grid-template-columns: 1fr; }
}
.compose-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.compose-preview-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compose-preview {
  position: relative;
  width: 420px;
  height: 420px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  /* CSS `background` is set inline by wireComposePreview — stacks a
     darkening gradient (top) over a tonal placeholder (bottom). */
}
.compose-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}
.compose-preview-col .draft-edit { max-width: 420px; font-size: 12px; padding: 7px 10px; }
.compose-style-grid .field span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 6px;
}
.cs-recolor {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-recolor input[type=color] { flex: 1; }
.cs-recolor input[type=color]:disabled { opacity: 0.5; cursor: not-allowed; }
.compose-style-grid input[type=color] {
  padding: 3px;
  height: 38px;
  cursor: pointer;
}

/* ── CHIP MULTI-SELECT ── */
.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  user-select: none;
  transition: all 0.1s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-hi); }
/* Visually hide the checkbox but keep label click-forwarding reliable across browsers */
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.chip:has(input:checked) {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-hi);
  font-weight: 600;
}
.chip:focus-within { box-shadow: 0 0 0 3px var(--brand-ring); }

/* ── SWITCH TOGGLE ── */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: 0.18s;
}
.switch-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.switch input:checked + .switch-slider { background: var(--brand); }
.switch input:checked + .switch-slider::before { transform: translateX(14px); }
.switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; }

/* ── GENERATE CONFIG EDITOR ── */
.gen-config-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gen-config-editor [data-role=specs-container] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spec-toggle {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-line);
  background: var(--bg-input);
  border-radius: 0;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}
.spec-toggle:hover { border-color: var(--accent); color: var(--accent); }
.spec-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spec-card.collapsed .spec-body { display: none; }
.spec-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spec-head {
  display: grid;
  grid-template-columns: 28px 1fr 1fr auto;
  cursor: pointer;
  gap: 8px;
  align-items: center;
}
.spec-head input {
  padding: 7px 11px;
  font-size: 12px;
  height: auto;
}
.spec-head input[name="spec-slug"] {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 500;
}
.spec-field-row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spec-field-row:last-child { border-bottom: none; }
.spec-field-main {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 8px;
  align-items: center;
}
.spec-field-main input,
.spec-field-main select {
  padding: 7px 11px;
  font-size: 12px;
  height: auto;
}
.spec-field-main input[name="f-name"] {
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.spec-field-constraints {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}
.spec-field-constraints:empty { display: none; }
.spec-constraint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t2);
}
.spec-constraint input {
  width: 70px;
  padding: 5px 8px;
  font-size: 12px;
  height: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.spec-add-field {
  align-self: flex-start;
  margin-top: 2px;
}
.spec-instructions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spec-instructions label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t2);
}
.spec-instructions textarea {
  font-size: 13px;
  line-height: 1.55;
  min-height: 110px;
}
.spec-fields-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.spec-fields-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t2);
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 20px 20px;
  overflow-y: auto;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-dialog {
  background: var(--bg-elevated);
  border: 1px solid var(--border-line);
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 680px;
  overflow: hidden;
  animation: modal-in 0.5s ease both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-line);
}
.modal-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--t3);
  padding: 4px 8px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--rs);
}
.modal-close:hover { color: var(--t1); background: var(--bg); }
.modal-body {
  padding: 24px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* ── Stories view ─────────────────────────────────────────────────────────── */
.story-list { display: flex; flex-direction: column; gap: 8px; }
.story-card { border: 1px solid var(--border); background: var(--surface); }
.story-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; cursor: pointer; user-select: none;
}
.story-head:hover { background: var(--brand-mid); }
.story-count {
  flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--accent-fg); background: var(--accent);
}
.story-main { flex: 1 1 auto; min-width: 0; }
.story-title {
  font-family: var(--font-display); font-size: 16px; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story-summary { font-size: 13px; color: var(--t2); margin-top: 4px; line-height: 1.4; }
.story-meta { font-size: 12px; color: var(--t3); margin-top: 4px; }
.story-meta .muted { color: var(--t3); }
.story-chev {
  flex: 0 0 auto; color: var(--t3); font-size: 20px; line-height: 1;
  transition: transform 0.15s ease;
}
.story-card.open .story-chev { transform: rotate(90deg); color: var(--accent); }
.story-items { display: none; border-top: 1px solid var(--border-subtle); }
.story-card.open .story-items { display: block; }
.story-loading { padding: 12px 16px; color: var(--t2); font-size: 13px; }
.story-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 16px 9px 46px; border-top: 1px solid var(--border-subtle);
}
.story-item:first-child { border-top: none; }
.story-item-src {
  flex: 0 0 120px; font-family: var(--font-mono); font-size: 11px;
  color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story-item-body { flex: 1 1 auto; min-width: 0; }
.story-item-title { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--t1); }
.story-item-title a { color: var(--t1); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-item-title a:hover { color: var(--accent); text-decoration: underline; }
.story-item-preview {
  font-size: 12px; color: var(--t2); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story-item-date { flex: 0 0 auto; font-size: 12px; color: var(--t3); font-family: var(--font-mono); }
.story-item-dup {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--t2); border: 1px solid var(--border); padding: 1px 5px;
}

/* ── Corrections + editorial rules ─────────────────────────────────────── */
.correct-form { display: flex; flex-direction: column; gap: 12px; }
.correct-form textarea { width: 100%; resize: vertical; }
.correct-learn { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.correct-scope { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: var(--gray-bg); border: 1px solid var(--gray-bord); border-radius: 8px; }
.correct-scope-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.correct-asset-list { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 22px; }
.correct-asset { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

.rules-list { display: flex; flex-direction: column; }
.rule-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 4px;
  border-bottom: 1px solid var(--gray-bord); }
.rule-row:last-child { border-bottom: none; }
.rule-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rule-text { font-size: 14px; line-height: 1.4; }
.rule-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.rule-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.rule-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--t3); }
.rule-inactive { opacity: 0.5; }

.fx-table { width: 100%; border-collapse: collapse; }
.fx-table th, .fx-table td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--gray-bord); }
.fx-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t3); }
.fx-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Auth: login screen + account block (M1.6) ───────────────────────────── */
body.logged-out #sidebar,
body.logged-out #content { display: none; }

#login-screen { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; background: var(--bg-primary); padding: 24px; }
#login-screen.hidden { display: none; }
.login-card { display: flex; flex-direction: column; gap: 14px; width: 340px; max-width: 100%;
  padding: 38px 34px; background: var(--bg-elevated); border: 1px solid var(--border-line); }
.login-brand { display: flex; align-items: center; gap: 11px; }
.login-glyph { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--accent); border-radius: 2px;
  font-family: var(--font-display); font-size: 23px; line-height: 1; color: var(--accent); }
.login-word { font-family: var(--font-display); font-size: 25px; color: var(--text-primary); }
.login-sub { margin: 0 0 4px; color: var(--text-secondary); font-size: 13px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-secondary); }
.login-card input { padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border-line);
  color: var(--text-primary); font-size: 14px; font-family: var(--font-body); }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-btn { margin-top: 6px; padding: 11px; background: var(--accent); color: var(--accent-fg);
  border: none; font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--font-body); }
.login-btn:hover { background: var(--accent-hover); }
.login-btn:disabled { opacity: 0.6; cursor: default; }
.login-msg { font-size: 12.5px; color: var(--text-secondary); background: var(--accent-dim); padding: 8px 11px; }
.login-error { min-height: 16px; font-size: 12.5px; color: var(--error); }

.account { display: flex; flex-direction: column; gap: 8px; }
.account-info { display: flex; flex-direction: column; gap: 1px; }
.account-org { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.account-email { font-size: 11.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.account-logout { align-self: flex-start; background: none; border: 1px solid var(--border-line);
  color: var(--text-secondary); padding: 4px 11px; font-size: 11.5px; cursor: pointer; font-family: var(--font-body); }
.account-logout:hover { border-color: var(--accent); color: var(--text-primary); }

/* ── Roles + budget (M1.4) ───────────────────────────────────────────────── */
body.role-editor .owner-only { display: none !important; }

.usage-budget { border: 1px solid var(--border-line); background: var(--bg-elevated);
  padding: 14px 16px; margin: 0 0 16px; }
.usage-budget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.usage-budget-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.budget-bar { height: 6px; background: var(--bg-input); border: 1px solid var(--border-line); margin-bottom: 8px; }
.budget-fill { height: 100%; background: var(--accent); }
.budget-fill.over { background: var(--error); }
.budget-nums { display: flex; justify-content: space-between; font-size: 12.5px;
  color: var(--text-primary); font-variant-numeric: tabular-nums; }
.budget-over { color: var(--error); }