/*
 * Bordeaux Projects Tracker — Manuscript Console
 *
 * A dark, deep-navy interface matching the bordeauxvo.com brand:
 * midnight blue surfaces, warm cream text, single magenta/hot-pink
 * accent used sparingly. Fraunces for display, Manrope for body,
 * JetBrains Mono for system meta. Hairlines, no drop shadows. Depth
 * from value contrast. Palette swappable via the :root block below.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..700,0..100,0..1;1,9..144,400..700,0..100,0..1&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     PALETTE: bordeaux-v3 (active)
     Matches bordeauxvo.com — deep midnight navy with a vivid
     magenta/hot-pink single accent. No gold or second accent on
     the brand site; the --gold token is repurposed as a quieter
     desaturated rose so callsites (timeline chips etc.) keep
     working without inventing a foreign color.
     To revert: swap this block with the bordeaux-v1 block below.
     ============================================================ */

  /* surfaces — deep midnight navy with slight purple tilt */
  --surface-0: #161A3D;   /* page (deepest) */
  --surface-1: #1D2349;   /* card / panel face */
  --surface-2: #262C56;   /* elevated row / hover */
  --surface-3: #2F3563;   /* table header, pressed */
  --line:      #3A416E;   /* hairline borders */
  --line-soft: #232A52;   /* row dividers in dense tables */
  --surface-0-rgb: 22, 26, 61;

  /* ink — warm cream-white (matches the brand site) */
  --ink-0: #F5F2EA;       /* headlines on dark surface */
  --ink-1: #E2DDD0;       /* body text */
  --ink-2: #9BA0BA;       /* secondary, slightly blue-gray */
  --ink-3: #61678C;       /* tertiary, timestamps */

  /* primary accent — magenta/hot-pink (the brand pop) */
  --accent:        #E0488F;   /* magenta — primary brand */
  --accent-bright: #F25CA0;   /* hover / focus */
  --accent-soft:   #3A1A2D;   /* chip background tint */
  --accent-rgb: 224, 72, 143;

  /* "gold" slot — desaturated rose. No real gold in the brand;
     this is the quieter second-tier highlight for chips/badges
     where --accent would be too loud. */
  --gold:        #C58B9B;   /* desaturated rose */
  --gold-bright: #D9A6B0;   /* hover */
  --gold-soft:   #2E1A24;   /* dark chip background */
  --gold-rgb: 197, 139, 155;

  /* semantic states tuned for readability on navy */
  --good:      #6FB97A;       /* mint green — positive */
  --good-soft: #1F3525;
  --danger:    #E27A3F;       /* warm amber — distinct from magenta */
  --danger-soft: #3A2616;

  /* ============================================================
     PALETTE: bordeaux-v1 (preserved for revert)
     Original ink-red accent. To revert: replace the v2 block
     above with these values (variable names unchanged).
     ============================================================

     --surface-0: #161310;
     --surface-1: #1d1a16;
     --surface-2: #25211c;
     --surface-3: #2e2a24;
     --line:      #3a352d;
     --line-soft: #2a2620;
     --surface-0-rgb: 22, 19, 16;
     --ink-0: #faf8f1;
     --ink-1: #e8e3d6;
     --ink-2: #a8a08e;
     --ink-3: #6e6759;
     --accent:        #c8462a;
     --accent-bright: #e8694a;
     --accent-soft:   #3a201b;
     --accent-rgb: 200, 70, 42;
     --gold:        #c8462a;     (no gold in v1 — falls back to accent)
     --gold-bright: #e8694a;
     --gold-soft:   #3a201b;
     --gold-rgb: 200, 70, 42;
     --good:      #95a86b;
     --good-soft: #2a3220;
     --danger:    #d6883f;
     --danger-soft: #382716;
     ============================================================ */

  /* ---- type tokens ----------------------------------------------- */
  /* Display: Fraunces serif for headlines + project titles + italic
     emphasis (next-action text). Body: Manrope sans — serif body on
     dark surface rendered too thinly through Windows ClearType.
     Manrope is well-drawn, distinctive without being cliché, and
     stays crisp at 15-16px on dark. */
  --display: "Fraunces", "Times New Roman", serif;
  --body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:   "Fraunces", "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Variable-font feature settings for Fraunces */
  --fraunces-display: "opsz" 144, "SOFT" 50, "WONK" 0;
  --fraunces-body:    "opsz" 72,  "SOFT" 40, "WONK" 0;

  /* ---- spatial --------------------------------------------------- */
  --pad: 28px;
  --pad-tight: 18px;
  --pad-loose: 40px;
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.92  0 0 0 0 1.0  0 0 0 0.022 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- base ------------------------------------------------------- */

* { box-sizing: border-box; }

html { background: var(--surface-0); }

body {
  margin: 0;
  font-family: var(--body);
  font-feature-settings: "kern", "liga", "calt", "ss01";
  font-size: 16px;
  font-weight: 450;
  line-height: 1.55;
  color: var(--ink-0);
  background: var(--surface-0) var(--grain-url);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: var(--ink-0); }

a {
  color: var(--ink-0);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--display);
  font-feature-settings: "kern", "liga", "calt", "onum";
  font-variation-settings: var(--fraunces-display);
  color: var(--ink-0);
  margin: 0;
  letter-spacing: -0.005em;
}
h1 { font-size: 36px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  font-variation-settings: var(--fraunces-body);
}
h3 { font-size: 16px; font-weight: 600; }

p { margin: 0 0 10px; }
.meta {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0;
}

code, pre, .num {
  font-family: var(--mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--pad) 0;
}

/* ---- masthead --------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--surface-0-rgb), 0.85);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: var(--pad);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  border: 0 !important;
  text-decoration: none;
}
.brand-name {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-display);
  font-feature-settings: "smcp" on, "c2sc" on, "kern", "liga";
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-0);
}
.brand-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: translateY(-2px);
  margin: 0 2px;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.topnav {
  display: flex;
  gap: 22px;
  flex: 1 1 auto;
  align-items: center;
  margin-left: 12px;
}
.topnav > a, .topnav-more > summary {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.topnav > a:hover, .topnav-more > summary:hover { color: var(--ink-0); border-bottom-color: var(--accent); }
.topnav > a.is-active { color: var(--ink-0); border-bottom-color: var(--accent); }

.topnav-more { position: relative; list-style: none; }
.topnav-more > summary { cursor: pointer; list-style: none; }
.topnav-more > summary::-webkit-details-marker { display: none; }
.topnav-more > summary::after { content: " ◇"; color: var(--ink-3); font-size: 12px; margin-left: 4px; }
.topnav-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 6px 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  z-index: 60;
}
.topnav-more-menu a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 16px;
}
.topnav-more-menu a:hover { background: var(--surface-2); color: var(--ink-0); border-bottom: 0; }

.topnav-search { display: flex; }
.topnav-search input[type=search] {
  font: inherit;
  font-family: var(--body);
  font-size: 13px;
  padding: 6px 10px;
  width: 200px;
  background: var(--surface-1);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 0;
  outline: none;
}
.topnav-search input[type=search]:focus { border-color: var(--accent); }
.topnav-search input[type=search]::placeholder { color: var(--ink-3); }

.topnav-actor {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.logout-form { display: inline; }

.btn-link {
  background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn-link:hover { color: var(--accent-bright); }
.btn-link.danger { color: var(--danger); }

/* ---- container -------------------------------------------------- */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--pad-loose) var(--pad);
  animation: paper-rise 220ms ease-out both;
}
@keyframes paper-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---- card / empty / button ------------------------------------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: var(--pad-tight) calc(var(--pad-tight) + 4px);
  margin-bottom: 18px;
  border-radius: 2px;
}

.empty {
  background: var(--surface-1);
  border: 1px dashed var(--line);
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-2);
  font-family: var(--body);
  font-style: italic;
}

.btn {
  display: inline-block;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--ink-0);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn:hover { background: var(--accent-bright); border: 0; }
.btn:active { background: var(--accent); }

/* ---- forms ------------------------------------------------------ */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px 18px;
}
.field {
  display: flex; flex-direction: column; gap: 4px;
}
.field .label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.field input[type=text],
.field input[type=date],
.field input[type=number],
.field input[type=password],
.field select,
.field textarea,
.inline-edit input[type=text],
.inline-edit input[type=date],
.inline-edit input[type=number],
.inline-edit select,
.inline-edit textarea {
  font: inherit;
  font-family: var(--body);
  font-size: 14px;
  padding: 6px 8px;
  background: var(--surface-0);
  color: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.inline-edit input:focus,
.inline-edit select:focus,
.inline-edit textarea:focus { border-color: var(--accent); }

.field-bool { flex-direction: row; align-items: center; gap: 8px; }
.field-bool .label { order: 2; }
.field-bool input[type=checkbox] { width: auto; }

.form-actions { margin-top: 18px; display: flex; gap: 14px; align-items: center; }

.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px 20px;
}
.field-block { display: flex; flex-direction: column; gap: 4px; }
.field-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.inline-edit textarea { resize: vertical; min-height: 40px; }

.bool-cell { display: inline-flex; align-items: center; gap: 6px; }
.bool-cell span { display: none; }

/* ---- tables ----------------------------------------------------- */

table.data,
table.chapters,
table.schedule-grid,
table.todo-list,
table.proofing-table,
table.proofing-list {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 14px;
}
table.data th, table.data td,
table.todo-list th, table.todo-list td,
table.schedule-grid th, table.schedule-grid td,
table.proofing-list th, table.proofing-list td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.data thead th,
table.todo-list thead th,
table.schedule-grid thead th,
table.proofing-list thead th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  font-weight: 500;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
table.data tbody tr:hover,
table.todo-list tbody tr:hover,
table.schedule-grid tbody tr:hover {
  background: var(--surface-2);
}

.table-scroll { overflow-x: auto; }

/* ---- stage chip + legacy badge -------------------------------- */

.stage {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 0;
}
.stage-unset { color: var(--ink-3); border-style: dashed; font-style: italic; }
.legacy { color: var(--ink-3); font-style: italic; font-size: 12px; }
.legacy-badge {
  margin-left: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.stage-form {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.detail-header h1 { line-height: 1.05; }
.detail-actions {
  display: flex; gap: 18px; align-items: center;
}
.detail-actions a {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.detail-actions a:hover { color: var(--accent-bright); }
.detail-actions .btn { color: var(--ink-0); }

/* ---- owner chip + schedule chip --------------------------------- */

/* One chip family. The person's NAME is the identifier; a tiny
   3px square introduces a visual rhythm without painting the whole
   chip a different color. */
.owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 8px;
  background: var(--surface-2);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.owner-chip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  flex: 0 0 6px;
}
/* unassigned / team chips drop the accent dot and read as ghosted */
.owner-chip-unassigned-splicer,
.owner-chip-unassigned-proofer,
.owner-chip-unassigned-engineer,
.owner-chip-unassigned-narrator,
.owner-chip-bordeaux-team {
  color: var(--ink-3);
  font-style: italic;
  font-weight: 500;
  border-style: dashed;
}
.owner-chip-unassigned-splicer::before,
.owner-chip-unassigned-proofer::before,
.owner-chip-unassigned-engineer::before,
.owner-chip-unassigned-narrator::before,
.owner-chip-bordeaux-team::before {
  background: var(--ink-3);
}

.schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: transparent;
  color: var(--ink-2);
  border: 1px dashed var(--line);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.schedule-chip::before {
  content: "◴";
  font-size: 13px;
  color: var(--ink-3);
}

/* ---- home page -------------------------------------------------- */

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.home-header h1 {
  font-size: 44px;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 0;
}
.home-quicknav { display: flex; gap: 22px; }
.home-quicknav a {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  padding-bottom: 2px;
}
.home-quicknav a:hover { color: var(--accent-bright); border-bottom-color: var(--accent); }

.stage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}
.stage-strip-badge {
  display: inline-flex;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  border-right: 1px solid var(--line-soft);
}
.stage-strip-badge:last-child { border-right: 0; }
.stage-strip-badge:hover { color: var(--ink-0); border-bottom: 0; }

/* ---- stuck-book panel (dashboard) ------------------------------ */

.stuck-panel {
  margin-bottom: 24px;
  border: 1px solid var(--accent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent
  );
}
.stuck-panel-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 20px 8px;
}
.stuck-panel-mark {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-0);
  background: var(--accent);
  padding: 2px 8px;
}
.stuck-panel-head h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "SOFT" 60, "WONK" 0;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-0);
  margin: 0;
}
.stuck-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stuck-row {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(0, 1fr) minmax(120px, auto) minmax(150px, auto);
  align-items: baseline;
  gap: 14px;
  padding: 8px 20px;
  border-top: 1px solid var(--line-soft);
}
.stuck-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 28, "SOFT" 40, "WONK" 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-0);
}
.stuck-author { color: var(--ink-3); font-size: 13px; }
.stuck-stage {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.stuck-days {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-bright);
  text-align: right;
}

/* ---- due-this-week panel (dashboard) --------------------------- */

.due-panel {
  margin-bottom: 24px;
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.due-panel-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 20px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.due-panel-mark {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--surface-0);
  background: var(--ink-1);
  padding: 2px 8px;
}
.due-panel-head h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "SOFT" 60, "WONK" 0;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-0);
  margin: 0;
}
.due-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.due-row {
  display: grid;
  grid-template-columns: 90px 130px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 8px 20px;
  border-top: 1px solid var(--line-soft);
}
.due-row:first-child { border-top: 0; }
.due-when {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-bright);
  text-transform: uppercase;
}
.due-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.due-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 28, "SOFT" 40, "WONK" 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-0);
}
.due-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

/* ---- cycle-time report ----------------------------------------- */

.report-cycle-table { width: 100%; }
.report-col-bar { width: 38%; }
.report-col-num { text-align: right; white-space: nowrap; }
.report-bar {
  display: inline-block;
  height: 12px;
  min-width: 2px;
  background: var(--accent);
  vertical-align: middle;
  border-radius: 1px;
}
.report-row.is-bottleneck .report-bar {
  background: var(--accent-bright);
}
.report-row.is-bottleneck {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.report-bar-empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.report-bottleneck-tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-0);
  background: var(--accent);
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 1px;
}
.report-cycle-note { margin-top: 12px; }

/* Time-in-stage chip on the project detail page. */
.stage-age-chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 2px 9px;
  margin-left: 10px;
  vertical-align: 3px;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.stage-age-chip.is-stuck {
  border-color: var(--accent);
  color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.stage-strip-name { font-weight: 600; }
.stage-strip-count { color: var(--ink-3); }

.stage-group {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface-1);
  margin-bottom: 18px;
}
.stage-group-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 22px 10px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 120ms ease;
}
.stage-group-head::-webkit-details-marker { display: none; }
.stage-group-head::marker { content: ""; }
.stage-group[open] .stage-group-head {
  border-bottom-color: var(--line-soft);
}
.stage-group-head:hover {
  background: var(--surface-2);
}
.stage-group-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.stage-group-caret {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform 160ms ease;
  margin-left: 4px;
  align-self: center;
  flex: 0 0 auto;
}
.stage-group[open] .stage-group-caret {
  transform: rotate(45deg);
}
.stage-group-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.stage-group-head h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 0;
  font-weight: 500;
  font-size: 25px;
  color: var(--ink-0);
  text-transform: none;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
}
.stage-group-count {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.stage-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Multi-stage meta-groups (e.g. "Intake & Booking") render a vertical
   lane layout — one row per canonical stage, full width, connected
   by a single continuous accent rail on the left. Active stages
   expand to show project rows beneath; empty stages compress to one
   thin line so the canonical pipeline stays visible without bulk. */
.stage-group-multi .stage-group-num {
  letter-spacing: 0.08em;
}
.lanes {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  position: relative;
}
/* The continuous left rail behind the dots. */
.lanes::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 33px;
  width: 1px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.lane {
  position: relative;
}
.lane.is-empty .lane-head { opacity: 0.55; }
.lane-head {
  display: grid;
  grid-template-columns: 56px auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 0;
  min-height: 32px;
}
.lane-dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px var(--surface-1);
  transition: background 120ms ease;
}
.lane.is-active .lane-dot { background: var(--accent); }
.lane.is-empty .lane-dot {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.lane-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  min-width: 22px;
}
.lane.is-active .lane-num { color: var(--accent); }
.lane-name {
  font-family: var(--display);
  font-variation-settings: "opsz" 32, "SOFT" 60, "WONK" 0;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-1);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lane.is-active .lane-name { color: var(--ink-0); }
.lane-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.lane.is-active .lane-count { color: var(--accent-bright); }
.lane-rows {
  list-style: none;
  margin: 0;
  padding: 0 0 6px 0;
}
/* Project rows under a lane sit indented past the rail dot. */
.lane-row {
  padding-left: 70px;
}

/* "Coming soon" TODO callout — sits between the rail and the rows so
   it lands exactly where future auto-imported inquiries will appear.
   Dashed border distinguishes it from the surrounding card surfaces. */
.meta-todo {
  margin: 10px 22px 14px;
  padding: 9px 14px;
  border: 1px dashed var(--accent);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 7%, transparent),
    transparent
  );
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-1);
  line-height: 1.55;
}
.meta-todo-mark {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  background: var(--accent);
  color: var(--ink-0);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 1px;
  vertical-align: 1px;
}
.meta-todo code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-1);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 1px;
}
.meta-todo strong {
  font-weight: 600;
  color: var(--ink-0);
}

.active-project-row {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr) minmax(150px, auto);
  align-items: center;
  gap: 18px;
  padding: 11px 22px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 100ms ease;
}
.active-project-row:last-child { border-bottom: none; }
.active-project-row:hover { background: var(--surface-2); }

.active-project-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.active-project-title {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.005em;
  border: 0;
}
.active-project-title:hover {
  color: var(--accent-bright);
  border: 0;
}
.active-project-author {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-body);
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
}
.active-project-due {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.active-project-next-text {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-style: italic;
  color: var(--ink-1);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  display: block;
}
.active-project-owner { text-align: right; }

/* ---- home rollup (collapsible) --------------------------------- */

/* "Awaiting · post-delivery" panel — separates books that aren't
   actively being PRODUCED by Bordeaux (waiting on author CRX, or
   queued for release) from the headline active list. */
.home-awaiting {
  margin: 28px 0 12px;
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.home-awaiting > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
}
.home-awaiting > summary::-webkit-details-marker { display: none; }
.home-awaiting > summary::before {
  content: "▸  ";
  color: var(--ink-3);
}
.home-awaiting[open] > summary::before {
  content: "▾  ";
  color: var(--accent);
}
.home-awaiting-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1);
  font-weight: 600;
}
.home-awaiting-count {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
}
.home-awaiting .stage-group {
  border: 0;
  background: transparent;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-soft);
}
.home-awaiting .stage-group:last-child { border-bottom: 0; }
.home-awaiting .stage-group.is-awaiting .active-project-row { opacity: 0.82; }
.home-awaiting .stage-group.is-awaiting .active-project-row:hover { opacity: 1; }

.home-rollup { margin-top: 32px; }
.home-rollup > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-rollup > summary::-webkit-details-marker { display: none; }
.home-rollup > summary::before { content: "▸  "; color: var(--ink-3); }
.home-rollup[open] > summary::before { content: "▾  "; color: var(--accent); }
.home-rollup > summary:hover { color: var(--ink-0); border-bottom-color: var(--accent); }

/* ---- KPI cards ------------------------------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.kpi { padding: 16px 18px; }
.kpi-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.kpi-value {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
  font-size: 42px;
  font-weight: 500;
  color: var(--ink-0);
  margin: 8px 0;
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
}
.kpi-value.is-warning { color: var(--accent); }
.kpi-list {
  padding-left: 0; margin: 6px 0 0;
  font-size: 13px;
  list-style: none;
}
.kpi-list li { padding: 2px 0; font-family: var(--body); }
.kpi progress {
  width: 100%;
  height: 6px;
  accent-color: var(--accent);
  background: var(--surface-2);
  border: 0;
}
.kpi progress::-webkit-progress-bar { background: var(--surface-2); }
.kpi progress::-webkit-progress-value { background: var(--accent); }

/* ---- recent activity ------------------------------------------- */

.recent-audit {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 1px;
}
.recent-audit li {
  font-size: 13px;
  font-family: var(--mono);
  color: var(--ink-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.recent-audit li:last-child { border-bottom: 0; }

/* ---- audit action pills (used in audit log + recent activity) -- */

.action {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 0;
}
.action-create        { color: var(--good);   border-color: var(--good); }
.action-update        { color: var(--ink-1);  border-color: var(--line); }
.action-stage_change  { color: var(--accent); border-color: var(--accent); }
.action-delete        { color: var(--danger); border-color: var(--danger); }

/* ---- stage workflow checklist (project detail) ----------------- */

.stage-checklist { margin-top: 14px; }
.stage-checklist-next {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}
.stage-checklist-next-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-bright);
  font-weight: 600;
}
.stage-checklist-next-text {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-style: italic;
  color: var(--ink-0);
  font-size: 15px;
}

.stage-checklist-items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.stage-checklist-item {
  padding: 7px 12px;
  border-left: 2px solid transparent;
  font-size: 15px;
}
.stage-checklist-item.is-next {
  background: var(--surface-2);
  border-left-color: var(--accent);
}
.stage-checklist-item.is-done .stage-checklist-text {
  text-decoration: line-through;
  color: var(--ink-3);
}
.stage-checklist-form label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.stage-checklist-form input[type=checkbox] { margin-top: 4px; accent-color: var(--accent); }
.stage-checklist-text { color: var(--ink-1); }
.stage-checklist-done-meta {
  display: block; margin-top: 2px; margin-left: 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* V15: auto-derived / automatable-later checklist metadata. */
.stage-checklist-item.is-auto { background: var(--surface-2); }
.stage-checklist-auto {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.stage-checklist-auto-mark {
  font-family: var(--mono); color: var(--ink-3); width: 16px;
}
.stage-checklist-auto-mark.is-satisfied { color: var(--accent); }
.stage-checklist-auto-badge,
.stage-checklist-automatable-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
}
.stage-checklist-auto-badge {
  background: var(--accent); color: var(--surface-1);
}
.stage-checklist-automatable-badge {
  background: var(--surface-3, var(--surface-2));
  color: var(--ink-3);
  border: 1px dashed var(--ink-3);
}
.stage-checklist-auto-evidence { font-style: italic; }
.stage-checklist-automatable-note {
  display: block; margin-top: 2px; margin-left: 26px;
  font-style: italic; color: var(--ink-3);
}
.stage-checklist-empty {
  font-style: italic;
  color: var(--ink-3);
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
}

/* ---- First Fifteen: per-character voice-sample sub-list -------- */

.stage-checklist-rollup {
  display: flex; align-items: baseline; gap: 10px;
}
.stage-checklist-rollup-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.character-sample-list {
  list-style: none;
  margin: 6px 0 2px 26px;
  padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  border-left: 1px solid var(--line);
}
.character-sample-row { padding: 4px 10px; }
.character-sample-form label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.character-sample-form input[type=checkbox] { accent-color: var(--accent); }
.character-sample-name { color: var(--ink-1); font-size: 14px; }
.character-sample-row.is-done .character-sample-name {
  text-decoration: line-through;
  color: var(--ink-3);
}
.character-sample-kind {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.character-sample-hint {
  margin: 4px 0 0 26px;
  font-size: 13px;
}

/* ---- chapter table + bulk-step bar ----------------------------- */

.bulk-step-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.bulk-step-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.bulk-step-pick select {
  font: inherit;
  font-family: var(--body);
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--surface-0);
  color: var(--ink-1);
}
.bulk-step-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}

table.chapters {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.chapters th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  font-weight: 500;
  text-align: left;
  padding: 8px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
table.chapters td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-1);
}
table.chapters .cell-bool { text-align: center; }
table.chapters .cell-textarea textarea { min-width: 200px; }
table.chapters .cell-text input { min-width: 100px; }
.cell-select { width: 30px; text-align: center; }
.cell-select input[type=checkbox] { accent-color: var(--accent); }
.cell-step.step-done {
  background: var(--good-soft);
  position: relative;
}
.cell-step.step-done::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-left: 2px solid var(--good);
  pointer-events: none;
}

.add-chapter { margin-top: 18px; }
.add-chapter summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 8px 0;
}
.add-chapter summary:hover { color: var(--accent-bright); }
.chapter-add-form { margin-top: 14px; }

.audit-val {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  white-space: pre-wrap;
  max-width: 300px;
  color: var(--ink-2);
}

/* ---- calendar slots (Timeline month Forecast list) ------------- */
/* The V3 calendar year grid is retired; these `.cal-slot*` / `.cal-add*`
   rules now dress the editable CalendarSlot partials in the Timeline
   month view's Forecast section (see `.tl-slot-list` below). */

.cal-slot {
  display: grid;
  grid-template-columns: 24px 1fr 18px;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface-0);
  border: 1px solid var(--line);
  font-size: 12px;
}
.cal-slot-num {
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.cal-slot-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-slot-body input { width: 100%; }
.cal-slot-meta { display: flex; gap: 4px; }
.cal-slot-meta form { flex: 1 1 0; min-width: 0; }
.cal-slot-meta input { font-size: 13px; padding: 3px 5px; }
.cal-slot-author-form input { padding: 4px 6px; }
.cal-slot-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cal-slot-link a { color: var(--good); border: 0; }
.cal-slot-delete { display: flex; align-items: flex-start; }
.cal-slot-delete button {
  font-size: 14px; line-height: 1; padding: 0 4px;
  background: transparent; color: var(--ink-3); border: 0; cursor: pointer;
}
.cal-slot-delete button:hover { color: var(--danger); }

.cal-add { margin-top: 8px; text-align: center; }
.cal-add-form {
  background: var(--surface-2);
  border: 1px solid var(--accent);
  padding: 10px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cal-add-form input { width: 100%; }
.cal-add-form .form-actions { margin-top: 6px; gap: 10px; }

.bvo-add-form .form-actions { margin-top: 14px; }

/* ---- audit log ------------------------------------------------- */

.search-form, .filter-bar {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.filter-bar { gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.daily-add-form .form-grid { gap: 12px; }

/* ---- todo + daily-output --------------------------------------- */

table.todo-list .col-bool { width: 40px; text-align: center; }
table.todo-list td { padding: 8px 10px; }
table.todo-list .todo-row.is-done td {
  color: var(--ink-3);
  text-decoration: line-through;
}
table.todo-list .todo-row.priority-now { border-left: 2px solid var(--accent); }
table.todo-list .todo-row.priority-later { border-left: 2px solid var(--line); }
.todo-move-form { display: inline; }

/* ---- templates / compose / messages ---------------------------- */

.rclass {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.rclass-indie_author     { color: var(--accent); border-color: var(--accent); }
.rclass-publisher_contact{ color: var(--ink-1);  border-color: var(--ink-2); }
.rclass-post_crew        { color: var(--good);   border-color: var(--good); }
.rclass-internal         { color: var(--danger); border-color: var(--danger); }

.required-fields { display: flex; gap: 10px; flex-wrap: wrap; padding-left: 16px; }
.template-edit-form { margin-bottom: 14px; }
.template-edit-form button { margin-top: 4px; }
.compose-pick-form { display: flex; gap: 16px; align-items: flex-end; }
.compose-form textarea {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface-0);
  min-height: 180px;
}

.msg-status {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
  background: transparent;
}
.msg-status-draft { color: var(--ink-3); border-style: dashed; }
.msg-status-sent  { color: var(--good); border-color: var(--good); }

.message-body {
  margin: 8px 0 0;
  padding: 14px;
  background: var(--surface-0);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink-1);
}

/* ---- schedule grid --------------------------------------------- */

table.schedule-grid th { white-space: nowrap; }
.schedule-quarter-picker { display: inline-flex; align-items: center; gap: 8px; }

/* ---- search ---------------------------------------------------- */

.search-form input[type=search] {
  flex: 1;
  padding: 9px 14px;
  background: var(--surface-0);
  color: var(--ink-0);
  border: 1px solid var(--line);
  font: inherit;
  font-family: var(--body);
  font-size: 15px;
}
.search-form input[type=search]:focus { border-color: var(--accent); outline: none; }
.search-group h2 { display: flex; align-items: center; gap: 10px; }
.search-count {
  display: inline-block;
  padding: 0 9px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  background: var(--accent-soft);
  color: var(--accent-bright);
  border: 1px solid var(--accent);
}
.search-group ul { list-style: none; padding: 0; margin: 0; }
.search-group li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }

/* ---- releases -------------------------------------------------- */

.release-flag {
  display: inline-block; padding: 1px 8px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
  color: var(--ink-3);
  margin-right: 6px;
}
.release-flag.is-on { color: var(--good); border-color: var(--good); }
.release-flags { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.release-edit { margin-bottom: 14px; }

/* ---- inquiries kanban ----------------------------------------- */

.inquiry-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.inquiry-column {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 12px;
}
.inquiry-column h2 {
  font-size: 14px;
  margin-bottom: 12px;
  font-variation-settings: var(--fraunces-body);
}
.inquiry-column ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.inquiry-column li {
  background: var(--surface-2);
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid var(--line-soft);
}

.inquiry-form { display: flex; flex-direction: column; gap: 14px; }
.inquiry-edit { display: flex; flex-direction: column; gap: 4px; }
.inquiry-edit button { align-self: flex-start; }

/* ---- proofing (legacy markup may still appear) ----------------- */

.proofing-filters {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: center; justify-content: space-between;
}
.proofing-filters-buckets { display: flex; gap: 6px; flex-wrap: wrap; }
.proofing-bucket {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.proofing-bucket.is-active { background: var(--accent); color: var(--ink-0); border-color: var(--accent); }
.proofing-bucket-count { color: var(--ink-3); }
.proofing-bucket.is-active .proofing-bucket-count { color: rgba(255,255,255,0.75); }
.proofing-pill {
  display: inline-block; padding: 1px 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.proofing-pill-done { color: var(--good); border-color: var(--good); }
.proofing-pill-progress { color: var(--ink-1); border-color: var(--ink-2); }
.proofing-pill-needs { color: var(--accent); border-color: var(--accent); }
.proofing-pill-raw { color: var(--danger); border-color: var(--danger); }

/* ---- error / warning ------------------------------------------- */

.error {
  color: var(--accent-bright);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  padding: 8px 12px;
  font-family: var(--body);
  font-size: 14px;
}
.warning { color: var(--accent); }

/* ---- login ----------------------------------------------------- */

.login-card {
  max-width: 380px;
  margin: 80px auto;
  padding: var(--pad-loose);
  background: var(--surface-1);
  border: 1px solid var(--line);
}
.login-form .field { margin-bottom: 14px; }
.login-hint { margin-top: 16px; }

/* ---- V11 permissions surfaces ---------------------------------- */

/* One-time invite link callout (admin users page + project access). */
.invite-flash {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.invite-link {
  display: inline-block;
  word-break: break-all;
  padding: 6px 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  font-size: 13px;
}
/* Read-only project field rendered for non-admins. */
.inline-edit.is-readonly {
  color: var(--ink);
  padding: 4px 0;
}
.inline-edit.is-readonly .bool-cell { font-weight: 500; }
/* Admin link in the top nav. */
.topnav-admin-link {
  margin-right: 10px;
  font-size: 13px;
}
/* Project access panel add-form lays its fields out inline. */
.project-access-add { margin-top: 14px; }
.project-access-add .field { margin-right: 14px; }

/* ---- My Work --------------------------------------------------- */

.mywork-switch select {
  margin-left: 8px;
}
.mywork-pick {
  max-width: 420px;
}
.mywork-pick form {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
}
.mywork-todo-row {
  grid-template-columns: 1fr minmax(90px, auto);
}
.todo-priority {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.todo-priority-now { border-color: var(--accent); color: var(--accent-bright); }

/* ---- stage bar chart (dashboard rollup) ------------------------ */

.stage-chart { display: flex; flex-direction: column; gap: 6px; }
.stage-bar-row {
  display: grid;
  grid-template-columns: 200px 1fr 36px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.stage-bar-label {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stage-bar-track {
  background: var(--surface-2);
  height: 10px;
  overflow: hidden;
}
.stage-bar-fill { background: var(--accent); height: 100%; }
.stage-bar-count {
  text-align: right;
  font-weight: 600;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-1);
}

/* ================================================================
   STAGE WORKFLOW — per-family views (production / comms / delivery)
   ================================================================ */

/* Hint shown above the dispatcher when stored stage is `unset` but
   the home page derived something via legacy_status / first_fifteen. */
.stage-derived-hint {
  background: var(--surface-2);
  border-left: 2px solid var(--ink-3);
  padding: 10px 14px;
  margin: 0 0 16px;
  font-family: var(--body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink-1);
}
.stage-derived-hint strong { color: var(--accent-bright); font-weight: 600; }
.stage-derived-hint code {
  background: var(--surface-0);
  padding: 1px 6px;
  color: var(--ink-1);
}

/* Common header strip used by all three family views: stage tag +
   owner chip + advance button. Sits at the top of the section. */
.stage-prod-head,
.stage-comms-head,
.stage-delivery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.stage-prod-head-meta,
.stage-comms-head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stage-prod-stage-tag {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}
.btn-advance {
  background: transparent;
  color: var(--accent-bright);
  border: 1px solid var(--accent);
  font-weight: 600;
  padding: 8px 18px;
}
.btn-advance:hover { background: var(--accent); color: var(--ink-0); border-color: var(--accent); }
.stage-advance-form { display: inline; }
.stage-move-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn-back {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-weight: 500;
  padding: 7px 14px;
  font-size: 13px;
}
.btn-back:hover {
  color: var(--ink-0);
  border-color: var(--ink-3);
  background: var(--surface-2);
}

/* Collapsible docx-checklist drawer at the bottom of each family
   view — reference material, never the headline. */
.stage-prod-checklist-drawer { margin-top: 28px; }
.stage-prod-checklist-drawer > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stage-prod-checklist-drawer > summary::-webkit-details-marker { display: none; }
.stage-prod-checklist-drawer > summary::before { content: "▸  "; color: var(--ink-3); }
.stage-prod-checklist-drawer[open] > summary::before { content: "▾  "; color: var(--accent); }
.stage-prod-checklist-drawer > summary:hover { color: var(--ink-0); }

/* ----------------------------------------------------------------
   FAMILY B — PRODUCTION VIEW (chapter-grain board)
   ---------------------------------------------------------------- */

.prod-board-wrap { margin-bottom: 22px; }
.prod-board-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}
.prod-board-title {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.005em;
}
.prod-board-meta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.prod-board-meta strong { color: var(--accent-bright); font-weight: 600; }

table.prod-board {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-1);
  border: 1px solid var(--line);
  font-size: 14px;
}
table.prod-board thead th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  font-weight: 500;
  text-align: left;
  padding: 9px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.prod-board thead th.is-active-col {
  color: var(--accent-bright);
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
  position: relative;
}
table.prod-board th.prod-col-step { text-align: center; width: 72px; }
table.prod-board th.prod-col-chapter { width: 80px; }
table.prod-board th.prod-col-character { min-width: 120px; }
table.prod-board th.prod-col-length { width: 60px; text-align: right; }
table.prod-board th.prod-col-pickups { min-width: 200px; }
.prod-col-step-marker { display: inline-block; margin-left: 4px; color: var(--accent); }

table.prod-board tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.prod-board tbody tr:hover { background: var(--surface-2); }
table.prod-board tbody tr.is-next {
  background: rgba(var(--accent-rgb), 0.06);
}
table.prod-board tbody tr.is-next:hover { background: rgba(var(--accent-rgb), 0.10); }

/* The step-dots. Empty by default, filled when done. Active stage
   column wraps the dot in a subtle ring. */
.prod-step-cell {
  text-align: center;
  width: 72px;
}
.prod-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink-3);
  background: transparent;
  border-radius: 50%;
  transition: background 100ms ease, border-color 100ms ease, transform 80ms ease;
}
.prod-dot-btn {
  background: transparent;
  border: 0;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  outline-offset: 2px;
}
.prod-dot-btn:hover .prod-dot {
  border-color: var(--accent-bright);
  transform: scale(1.15);
}
.prod-dot-btn:focus-visible {
  outline: 2px solid var(--accent);
}
.prod-dot-btn:active .prod-dot { transform: scale(0.92); }
.prod-step-cell.is-done .prod-dot {
  background: var(--good);
  border-color: var(--good);
}
.prod-step-cell.is-active-col {
  background: rgba(var(--accent-rgb), 0.04);
}
.prod-step-cell.is-active-col .prod-dot {
  border-color: var(--accent);
  border-width: 2px;
}
.prod-step-cell.is-active-col.is-done .prod-dot {
  background: var(--good);
  border-color: var(--good);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.20);
}

.prod-pickups-flag {
  display: inline-block;
  color: var(--danger);
  margin-right: 6px;
}
.prod-pickups-text {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink-2);
  font-style: italic;
}

.prod-bootstrap {
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
}
.prod-bootstrap-headline {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-style: normal;
  font-size: 17px;
  color: var(--ink-0);
  margin: 0 0 14px;
}
.prod-bootstrap-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  justify-content: center;
}
.prod-bootstrap-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prod-bootstrap-label input {
  font: inherit;
  font-family: var(--body);
  font-size: 18px;
  padding: 8px 12px;
  background: var(--surface-0);
  color: var(--ink-0);
  border: 1px solid var(--line);
  width: 140px;
}
.prod-bootstrap-label input:focus { border-color: var(--accent); outline: none; }
.prod-bootstrap-hint {
  margin-top: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
}

/* Two-option bootstrap (manuscript upload + manual chapter count). */
.prod-bootstrap-pair {
  text-align: left;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px;
}
.prod-bootstrap-pair .prod-bootstrap-headline {
  text-align: center;
  margin-bottom: 22px;
}
.prod-bootstrap-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}
/* When only one bootstrap option exists, collapse the two-up grid to a
   single centered column so the lone card reads as intentional rather
   than an auto-fit cell stretched edge to edge. */
.prod-bootstrap-options.is-single {
  grid-template-columns: minmax(0, 440px);
  justify-content: center;
}
.prod-bootstrap-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 18px 20px;
}
.prod-bootstrap-card-title {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-0);
  margin: 0 0 8px;
}
.prod-bootstrap-card-blurb {
  font-size: 14px;
  color: var(--ink-1);
  margin: 0 0 12px;
}
.prod-bootstrap-card-blurb em { font-style: italic; color: var(--accent-bright); }

.prod-upload-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prod-upload-form input[type=file] {
  font: inherit;
  font-family: var(--body);
  font-size: 13px;
  padding: 8px;
  background: var(--surface-0);
  color: var(--ink-1);
  border: 1px dashed var(--line);
  cursor: pointer;
}
.prod-upload-form input[type=file]::file-selector-button {
  background: var(--accent);
  color: var(--ink-0);
  border: 0;
  padding: 5px 10px;
  margin-right: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.prod-upload-form input[type=file]::file-selector-button:hover {
  background: var(--accent-bright);
}

/* ================================================================
   MANUSCRIPT PREVIEW PAGE
   ================================================================ */

.ms-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.ms-preview-head h1 {
  font-size: 36px;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 0;
}
.ms-preview-actions { display: flex; gap: 18px; align-items: center; }
.btn-apply {
  background: var(--accent);
  color: var(--ink-0);
  border: 0;
}
.btn-apply:hover { background: var(--accent-bright); }
.btn-apply-large {
  padding: 12px 24px;
  font-size: 12px;
}

.ms-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.ms-summary-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-summary-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.ms-summary-value {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
  font-size: 42px;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  margin-top: 6px;
}

.ms-warning {
  background: var(--surface-2);
  border-left: 2px solid var(--danger);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 14px;
  color: var(--ink-1);
}
.ms-warning strong { color: var(--danger); }
.ms-warning em { color: var(--ink-0); font-style: italic; }

.ms-section { margin-bottom: 22px; }
.ms-section h2 {
  font-size: 22px;
  margin: 0 0 14px;
  font-variation-settings: var(--fraunces-body);
}

.ms-chapter-table .ms-col-num { width: 90px; }
.ms-chapter-table .ms-col-words,
.ms-chapter-table .ms-col-est { width: 100px; text-align: right; }
.ms-chapter-table td.num { font-family: var(--mono); font-feature-settings: "lnum"; }

.ms-character-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ms-character-h {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-0);
}
.ms-character-h .meta {
  font-family: var(--body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.ms-character-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-character-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.ms-character-name {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 16px;
  color: var(--ink-0);
  font-weight: 500;
}

.ms-ai-stubs { opacity: 0.7; }
.ms-ai-stub-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ms-ai-stub-buttons .btn[disabled] {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
  border: 1px dashed var(--line);
}

.ms-apply-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 22px;
  align-items: center;
}

/* ---- V9 manuscript revamp: POV, modes, cues, estimates ---- */

/* POV confidence + narration-mode chips. */
.ms-conf,
.ms-mode {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 6px;
  border: 1px solid var(--line);
}
.ms-conf-high {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ms-conf-low {
  color: #8a5a00;
  border-color: #d8b878;
  background: #fcf3df;
}
/* `mixed` — a mid-chapter POV switch, the chapter that most needs a
   studio review. Distinct from `low`: a stronger warning tone so it
   never reads as a clean parse. */
.ms-conf-mixed {
  color: #7a1f00;
  border-color: #c9622e;
  background: #fbe3d6;
  font-weight: 600;
}
.ms-mode { color: var(--ink-2); }
.ms-mode-1st { border-color: var(--accent); color: var(--accent-bright); }
.ms-mode-2nd { border-color: #8a5a00; color: #8a5a00; }

/* Advisory parser flags (Chapter.flags) — surfaced on the preview so
   the studio reviews a flagged chapter before applying. Same chip
   styling as the POV pills; warning tone. */
.ms-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 0 6px;
  margin-left: 6px;
  border: 1px solid var(--line);
}
.ms-flag-review {
  color: #7a1f00;
  border-color: #c9622e;
  background: #fbe3d6;
  font-weight: 600;
}
/* A row carrying any parser flag gets a faint warning wash. */
.ms-row-flagged { background: #fdf1ea; }

.ms-chapter-table .ms-col-pov { width: 170px; }
.ms-chapter-table .ms-col-mode { width: 120px; }
.ms-chapter-table .ms-col-split { width: 150px; }

/* Narr / Dlg split: counts and percentages each on their own
   non-wrapping line so a thousands-scale chapter never goes "derpy". */
.ms-col-split .ms-split-counts,
.ms-col-split .ms-split-pct { display: block; white-space: nowrap; }
.ms-col-split .ms-split-pct { font-size: 12px; color: var(--ink-2); }

/* Editable POV select + narration-mode toggle on the parse preview. */
.ms-pov-select {
  font: inherit;
  font-size: 13px;
  padding: 2px 4px;
  max-width: 130px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--ink-0);
}
.ms-mode-toggle { display: inline-flex; gap: 8px; }
.ms-mode-opt {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-1);
}

/* Inline delete (×) control for droppable cue / pronunciation rows. */
.ms-del-control {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ms-del-control .ms-del-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ms-del-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  border-radius: 2px;
}
.ms-del-control:hover .ms-del-x {
  border-color: #c9622e;
  color: #7a1f00;
  background: #fbe3d6;
}
/* A checked delete row gets a struck-through, faded look so it is
   visibly "will not be applied" before the form is submitted. */
.ms-del-check:checked ~ .ms-del-x {
  border-color: #7a1f00;
  color: #fff;
  background: #7a1f00;
}
.ms-cue-item:has(.ms-del-check:checked),
.ms-pron-table tr:has(.ms-del-check:checked) {
  opacity: 0.5;
  text-decoration: line-through;
}
.ms-pron-table .ms-col-del { width: 28px; }

/* Per-character word-count table + column toggle. */
.ms-col-toggle { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ms-col-toggle label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.ms-character-table td.num,
.ms-character-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-character-table .ms-cell-sum { font-family: var(--mono); }

/* Narrator-estimate panels. */
.ms-estimate-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ms-estimate-total td { border-top: 2px solid var(--line); }

/* Vocal-cue list. */
.ms-cue-group { margin-bottom: 16px; }
.ms-cue-chapter {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--ink-0);
}
.ms-cue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-cue-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.ms-cue-word {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  padding: 0 6px;
  white-space: nowrap;
}
.ms-cue-snippet { color: var(--ink-1); font-size: 14px; }
.ms-cue-snippet u {
  text-decoration: underline;
  text-decoration-color: var(--accent-bright);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 600;
  color: var(--ink-0);
}

@media (max-width: 880px) {
  .ms-character-cols { grid-template-columns: 1fr; }
  .ms-estimate-cols { grid-template-columns: 1fr; }
}

/* ================================================================
   CHARACTERS SECTION ON PROJECT DETAIL
   ================================================================ */

.characters-section h2 .meta {
  font-family: var(--body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.characters-table { font-size: 14px; }
.characters-table .character-col-kind { width: 90px; }
.characters-table .character-col-name { width: 180px; }
.characters-table .character-col-stats { width: 180px; }
.characters-table .character-col-description,
.characters-table .character-col-notes { min-width: 220px; }

.character-kind-pill {
  display: inline-block;
  padding: 1px 9px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.character-kind-pill.character-kind-major {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.character-kind-pill.character-kind-minor {
  color: var(--ink-1);
  border-color: var(--ink-2);
}

.characters-table .character-col-narrator { width: 130px; }

/* Narrator-assignment cell: a select plus, when unset, the muted
   gender-default hint below it. Internal surface — real names. */
.character-narrator select {
  font: inherit;
  font-family: var(--body);
  font-size: 13px;
  padding: 5px 6px;
  background: var(--surface-0);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 0;
  width: 100%;
}
.character-narrator select:focus { border-color: var(--accent); outline: none; }
.character-narrator-auto {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-3);
}

/* Persisted narrator-estimate panel on the project detail page. */
.narrator-estimate-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.narrator-estimate-panel table.data { max-width: 480px; }

/* Pronunciation-candidate table — confirm/dismiss workflow (V12). */
.ms-pron-table td.num,
.ms-pron-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Status pill: candidate / confirmed / dismissed. */
.ms-pron-status-pill {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.ms-pron-status-confirmed {
  border-color: var(--accent);
  color: var(--accent);
}
.ms-pron-status-dismissed {
  color: var(--ink-3);
  text-decoration: line-through;
}
/* A dismissed row reads as de-emphasised, not deleted. */
.ms-pron-row.ms-pron-dismissed td { opacity: 0.55; }
.ms-pron-actions { white-space: nowrap; }
.ms-pron-action-form {
  display: inline;
  margin-right: 8px;
}
.ms-pron-action-form:last-child { margin-right: 0; }

/* First Fifteen "Pronunciations" activity — confirmed terms, read-only. */
.ff-pronunciation-list {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ff-pronunciation-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
}
.ff-pronunciation-term { font-weight: 500; color: var(--ink-0); }
.ff-pronunciation-reason { font-style: italic; }
.ff-pronunciation-hint { margin: 4px 0 0; }

/* Re-parse diff panel on the manuscript preview (Task 9). */
.ms-diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 10px 0 6px;
}
.ms-diff-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ms-diff-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.ms-diff-value {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-0);
  font-variant-numeric: lining-nums;
}
.ms-diff-detail { font-size: 12px; }

/* Per-chapter narrator column — Dual/Duet chapter tracker (Task 5). */
.cell-chapter-narrator { white-space: nowrap; }

/* Character-merge control on the character row (Task 7). */
.character-merge { margin-top: 6px; }
.character-merge > summary {
  cursor: pointer;
  font-size: 12px;
}
.character-merge-form {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.character-merge-form select {
  font: inherit;
  font-size: 13px;
  padding: 4px 6px;
  background: var(--surface-0);
  border: 1px solid var(--line);
}

/* Annotated-manuscript export block on the preview page. */
.ms-export .btn { margin-top: 6px; }

.character-row td { vertical-align: top; padding: 8px 10px; }
.character-row textarea {
  width: 100%;
  font: inherit;
  font-family: var(--body);
  font-size: 13px;
  padding: 6px 8px;
  background: var(--surface-0);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 0;
  resize: vertical;
  min-height: 38px;
}
.character-row textarea:focus { border-color: var(--accent); outline: none; }
.characters-ai-hint {
  margin: 14px 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
  font-style: italic;
  font-size: 12px;
}

/* ----------------------------------------------------------------
   INTAKE & BOOKING WIZARD (6-step guided workflow)
   ----------------------------------------------------------------
   A vertical spine of 6 stages; past = checkmark trail, current
   stage expands a "Right Now" panel, future stages render as
   ghosted previews. Mirrors the dashboard's vertical-lane rail so
   clicking into a project feels like zooming in, not jumping. */

.stage-workflow-intake {
  margin-top: 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 16px 0 8px;
  position: relative;
}
.intake-wizard-head {
  padding: 0 24px 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.intake-wizard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.intake-wizard-stage-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 8px;
  border: 1px solid var(--accent);
}
.intake-wizard-fact {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 2px;
}

.intake-spine {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Continuous left rail behind the dots — matches `.lanes::before`
   from the dashboard so the visual grammar is consistent. */
.intake-spine::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 41px;
  width: 1px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.spine-node {
  position: relative;
}
.spine-node-head {
  display: grid;
  grid-template-columns: 56px auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 10px 0;
  min-height: 36px;
}
.spine-mark {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  background: var(--surface-1);
  box-shadow: 0 0 0 4px var(--surface-1);
}
.spine-node-past .spine-mark {
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--ink-1));
}
.spine-node-current .spine-mark {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--ink-0);
  font-size: 8px;
}
.spine-node-future .spine-mark {
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: transparent;
}
.spine-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  min-width: 22px;
}
.spine-node-current .spine-num { color: var(--accent); }
.spine-name {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 0;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-1);
  letter-spacing: -0.005em;
  margin: 0;
}
.spine-node-current .spine-name {
  color: var(--ink-0);
  font-size: 22px;
}
.spine-node-past .spine-name,
.spine-node-future .spine-name { opacity: 0.55; }
.spine-status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spine-node-current .spine-status { color: var(--accent-bright); }

/* Right Now panel — the focused work for the current step. */
.right-now-panel {
  margin: 4px 24px 18px 86px;
  padding: 18px 22px;
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 2px 2px 0;
}
.right-now-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.right-now-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 4px;
}
.right-now-prompt {
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-0);
  margin: 0 0 14px 0;
  line-height: 1.4;
}
.right-now-action {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.right-now-action-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.btn-primary-action {
  background: var(--accent);
  color: var(--ink-0);
  border: 1px solid var(--accent);
  font-weight: 600;
  padding: 9px 18px;
  display: inline-block;
}
.btn-primary-action:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}
.right-now-template-alts {
  margin-top: 8px;
}
.right-now-template-alts summary {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.right-now-template-list {
  list-style: none;
  padding: 6px 0 0;
  margin: 0;
}
.right-now-template-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
.right-now-no-template {
  margin-bottom: 16px;
}
.right-now-activities {
  margin-bottom: 16px;
}
.right-now-activities-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.right-now-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.right-now-activity-list li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: 13px;
  color: var(--ink-1);
  line-height: 1.45;
  border-bottom: 1px dashed var(--line-soft);
}
.right-now-activity-list li:last-child { border-bottom: 0; }
.right-now-activity-list li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: 5px;
  color: var(--accent);
  font-weight: 700;
}
/* Additional Narrator Booking (Multicast) — a conditional sub-section
   of Scheduling, shown only for Style=Multi projects. Visually nested
   under the stage's main activity list. */
.multicast-booking-section {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.multicast-booking-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.multicast-booking-list li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: 13px;
  color: var(--ink-1);
  line-height: 1.45;
  border-bottom: 1px dashed var(--line-soft);
}
.multicast-booking-list li:last-child { border-bottom: 0; }
.multicast-booking-list li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: 5px;
  color: var(--accent);
  font-weight: 700;
}

.right-now-history {
  margin-bottom: 14px;
}
.right-now-history > summary {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 6px 0;
}
.right-now-foot {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

/* ----------------------------------------------------------------
   FAMILY A — COMMS VIEW (templates + threads + context)
   ---------------------------------------------------------------- */

.comms-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr minmax(220px, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.comms-section-h {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}

.comms-template-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comms-template-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comms-template-card:hover {
  border-color: var(--accent);
}
.comms-template-name {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-0);
  border: 0;
}
.comms-template-name:hover {
  color: var(--accent-bright);
  border: 0;
}
.comms-template-subject {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--serif);
}
.comms-compose-cta {
  margin-top: 14px;
  margin-bottom: 0;
}

.comms-message-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comms-message {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 10px 14px;
}
.comms-message-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.comms-message-to {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
}
.comms-message-subject {
  margin: 4px 0;
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 15px;
  color: var(--ink-0);
}
.comms-message-body-wrap > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}
.comms-message-body-wrap > summary:hover { color: var(--accent-bright); }
.comms-message-body-wrap > summary::-webkit-details-marker { display: none; }
.comms-message-body-wrap[open] > summary { color: var(--ink-2); }
.comms-message-body-wrap .message-body { margin-top: 6px; }

.comms-context-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 13px;
}
.comms-context-list dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  align-self: center;
}
.comms-context-list dd {
  margin: 0;
  color: var(--ink-1);
}

@media (max-width: 1080px) {
  .comms-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   FAMILY C — DELIVERY VIEW (handoff checklist)
   ---------------------------------------------------------------- */

.delivery-activities {
  margin: 0 0 28px;
}
.delivery-mark-form button.btn-advance {
  background: var(--accent);
  color: var(--ink-0);
  border-color: var(--accent);
  padding: 10px 22px;
  font-size: 12px;
}
.delivery-mark-form button.btn-advance:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

.delivery-template-pick { margin-bottom: 18px; }

/* ----------------------------------------------------------------
   STAGE WORKFLOW — generic fallback
   ---------------------------------------------------------------- */
.stage-workflow-generic { /* inherits default stage-form + checklist */ }

/* ---- legibility on small screens ------------------------------- */

@media (max-width: 880px) {
  .home-header { flex-direction: column; align-items: flex-start; }
  .active-project-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .active-project-owner { text-align: left; }
  .stage-strip { overflow-x: auto; }
  .stage-strip-badge { flex: 0 0 auto; }
}

/* ----------------------------------------------------------------
   TIMELINE — 3-level calendar-quarter drill-down (V11).

   Year (4 quarter cards) -> Quarter (3 month cards) -> Month (day
   grid). The two-bar bucket card is the core component: a Load track
   (outlined, neutral fill, amber overflow) and a Progress bar (solid
   mint). Extends the existing palette tokens; no new colors.
   ---------------------------------------------------------------- */

.tl-header { align-items: flex-start; }
.tl-header-meta {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-weight: 400;
  color: var(--ink-2);
  font-size: 0.65em;
  margin-left: 8px;
}
.tl-header-stats { margin-top: 6px; }

/* ---- visually-hidden text equivalent ----------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- breadcrumb -------------------------------------------------- */
.tl-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tl-crumb-sep { color: var(--ink-3); }
.tl-crumb-up {
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.tl-crumb-up:hover { color: var(--accent-bright); border-bottom-color: var(--accent); }
.tl-crumb-here { color: var(--accent); font-weight: 600; }
.tl-crumb-inert { color: var(--ink-3); }

.tl-archived-badge {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 9px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  vertical-align: middle;
}

.tl-actions {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.tl-aux-link {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.tl-aux-link:hover { color: var(--accent-bright); }

.tl-quarter-picker, .tl-year-picker {
  display: flex; gap: 8px; align-items: center;
}

/* ---- bucket card grid (year = 4, quarter = 3) -------------------- */

.tl-bucket-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
.tl-bucket-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-bucket-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .tl-bucket-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tl-bucket-grid-4,
  .tl-bucket-grid-3 { grid-template-columns: 1fr; }
}

/* ---- the two-bar bucket card ------------------------------------- */

.tl-bucket-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 var(--line);
  color: var(--ink-1);
  text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.tl-bucket-card:hover {
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.tl-bucket-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tl-bucket-current {
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent),
              inset 0 0 0 1px var(--accent-soft);
}
.tl-bucket-closed {
  opacity: 0.6;
  background: transparent;
}
/* Closed (past) month view — muted, read-only. Mirrors the quarter
   view's ARCHIVED treatment and the .tl-bucket-closed card style. */
.tl-month-closed { opacity: 0.62; }
.tl-bucket-over { border-color: var(--danger); }
.tl-bucket-over:hover { border-color: var(--danger); box-shadow: inset 0 -3px 0 var(--danger); }

.tl-bucket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tl-bucket-title { display: flex; flex-direction: column; gap: 1px; }
.tl-bucket-name {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 22px;
  color: var(--ink-0);
  line-height: 1.1;
}
.tl-bucket-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tl-bucket-foot {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.tl-bucket-foot .meta { font-size: 12px; }

/* ---- tags (CURRENT / CLOSED / peak) ------------------------------ */

.tl-tag {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tl-tag-current {
  color: var(--ink-0);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.tl-tag-closed {
  color: var(--ink-3);
  background: transparent;
  border-style: dashed;
}
.tl-peak-tag {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- the two bars ------------------------------------------------ */

.tl-bars { display: flex; flex-direction: column; gap: 12px; }
.tl-bar-block { display: flex; flex-direction: column; gap: 4px; }
.tl-bar-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.tl-bar-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tl-bar-stat {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-0);
}
.tl-bar-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.tl-warn { color: var(--danger); margin-right: 2px; }

/* LOAD — an OUTLINED track filled toward a ceiling. Neutral ink
   fill; the segment past 100% is amber (over-capacity). */
.tl-load-bar {
  display: flex;
  height: 12px;
  border: 1px solid var(--line);
  background: var(--surface-0);
  overflow: hidden;
}
.tl-load-fill {
  height: 100%;
  background: var(--ink-3);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 3px,
    rgba(var(--surface-0-rgb), 0.35) 3px,
    rgba(var(--surface-0-rgb), 0.35) 6px
  );
}
.tl-load-overflow {
  height: 100%;
  background: var(--danger);
}
.tl-load-bar-over { border-color: var(--danger); }

/* PROGRESS — a SOLID mint bar completing a job; never over 100%. */
.tl-progress-bar {
  height: 12px;
  background: var(--surface-0);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.tl-progress-fill {
  height: 100%;
  background: var(--good);
}

/* ---- month two-bar block ----------------------------------------- */

.tl-month-bars {
  margin-bottom: 18px;
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  max-width: 520px;
}

/* ---- month grid (7 × N) ------------------------------------------ */

.tl-month-nav {
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tl-month-nav a { color: var(--ink-2); }
.tl-month-nav a:hover { color: var(--accent-bright); }

.tl-month-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;
}
.tl-month-grid-wrap { min-width: 0; }

table.tl-month-grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-1);
  table-layout: fixed;
}
table.tl-month-grid th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: left;
  font-weight: 500;
}
.tl-day {
  vertical-align: top;
  padding: 6px 6px 10px;
  border: 1px solid var(--line-soft);
  background: var(--surface-0);
  min-height: 90px;
  width: 14.28%;
  height: 90px;
}
.tl-day-blank {
  background: var(--surface-1);
  border-color: var(--line-soft);
}
.tl-day-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.tl-day-has-events .tl-day-num { color: var(--ink-1); font-weight: 600; }
.tl-day-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tl-day-ev {
  font-size: 13px;
  line-height: 1.25;
}
.tl-day-ev a {
  display: flex;
  gap: 4px;
  align-items: baseline;
  padding: 2px 4px;
  background: var(--surface-1);
  border-left: 2px solid var(--ink-3);
  color: var(--ink-1);
  text-decoration: none;
  border-bottom: 0;
}
.tl-day-ev a:hover { background: var(--surface-2); border-bottom: 0; }
.tl-day-ev-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.tl-day-ev-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-day-ev-first_fifteen_start_date a { border-left-color: var(--good); }
.tl-day-ev-recording_due_date a { border-left-color: var(--accent); }
.tl-day-ev-pickup_deadline a { border-left-color: var(--danger); }
.tl-day-ev-delivery_due_date a {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.tl-day-today {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.tl-day-more {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* ---- BVO spans above the month grid ----------------------------- */

.tl-bvo-spans { margin-bottom: 12px; }
.tl-bvo-spans-label { margin-bottom: 4px; }
.tl-bvo-spans-track {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-bvo-span {
  position: relative;
  height: 22px;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* In practice the span is rendered with absolute left/right via
     inline style; the CSS just paints the bar. */
  margin: 0;
}
.tl-bvo-span-label { color: var(--ink-1); }

/* ---- month sidebar ----------------------------------------------- */

.tl-month-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tl-side-section {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 12px;
}
.tl-side-section h3 {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-body);
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--ink-1);
}
.tl-side-subhead {
  margin: 12px 0 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tl-side-subhead:first-of-type { margin-top: 4px; }
.tl-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-side-item {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.tl-side-item:last-child { border-bottom: 0; }
.tl-side-title { color: var(--ink-1); }
/* Editable CalendarSlot list in the Timeline month sidebar — stacks
   the `_calendar_slot.html` partials (the partial's own `.cal-slot`
   grid handles each row's internal layout). */
.tl-slot-list { display: flex; flex-direction: column; gap: 6px; }
.tl-slot-add { margin-top: 8px; }
.tl-side-prefix {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--good);
}

@media (max-width: 1000px) {
  .tl-month-layout { grid-template-columns: 1fr; }
}

/* ---- V9: Contracts stage --------------------------------------- */
.contracts-stage { margin-top: 18px; }
.contract-block {
  margin-bottom: 22px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-left: 2px solid var(--line);
}
.contract-block h4 {
  margin: 0 0 6px;
  font-size: 15px;
}
.contract-warning {
  background: var(--surface-1);
  border-left: 2px solid var(--danger);
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 14px;
}
.contract-warning strong { color: var(--danger); }
.contract-missing-list { margin: 6px 0 4px 18px; }
.contract-missing-flag { color: var(--danger); font-size: 13px; }
.contract-complete { color: var(--ink-2); font-size: 14px; }
.narrator-table input[type="text"] { width: 100%; min-width: 90px; }
.narrator-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.narrator-add-field span {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.contract-status {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.contract-status-generated { color: var(--ink-2); }
.contract-status-sent { color: var(--accent); }
.contract-status-signed { color: var(--ok, #3a7d44); }
.btn-small { font-size: 12px; padding: 3px 8px; }

/* ---- V17: public author-intake form ------------------------------ */
/* Standalone author-facing page — no internal nav. Reuses the .card,
   .field and .btn primitives; these classes only add layout + the few
   public-page-specific touches (lede, hints, inline field errors). */
.public-page { padding-top: 32px; }
.intake-public { max-width: 640px; }
.intake-card { padding: 28px 32px; }
.intake-head h1 { margin: 12px 0 6px; }
.intake-lede { color: var(--ink-2); line-height: 1.5; }
.intake-note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin: 12px 0;
}
.intake-form .field { margin-bottom: 18px; }
.field-hint { display: block; font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.field-error select,
.field-error input,
.field-error textarea { border-color: var(--accent-bright); }
.field-error-msg { display: block; font-size: 12px; color: var(--accent-bright); margin-top: 3px; }
.intake-foot { text-align: center; margin-top: 16px; }
.intake-thanks { text-align: center; }

/* Inquiry Response stage panel — form link + submission status. */
.intake-form-panel { margin-top: 14px; }
.intake-form-status-received { color: var(--ok, #3a7d44); }
.intake-form-status-waiting { color: var(--ink-2); }
.intake-submission-detail { margin: 8px 0; }
.intake-submission-detail dt { font-weight: 600; font-size: 12px; color: var(--ink-2); }
.intake-submission-detail dd { margin: 0 0 6px; }
.intake-form-link { word-break: break-all; }

/* ---- Part 2: collapsed Production stage ------------------------- */

/* Four-segment distribution bar — the honest book-level status when
   there is no single true production stage. */
.prod-dist {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 260px;
}
.prod-dist-seg { display: flex; flex-direction: column; gap: 4px; }
.prod-dist-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}
.prod-dist-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 180ms ease;
}
.prod-dist-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.78rem;
}
.prod-dist-name { color: var(--ink-1); font-weight: 600; }
.prod-dist-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.prod-mostly-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.8rem;
  white-space: nowrap;
}
.prod-mostly-chip strong { color: var(--accent-bright); }

/* Gated advance button — present but secondary, opens the confirm
   modal instead of advancing. */
.btn-advance-gated {
  background: var(--surface-2);
  color: var(--ink-1);
  border: 1px dashed var(--accent);
}
.btn-advance-gated:hover {
  background: var(--accent-soft);
  color: var(--ink-0);
}

/* Chapter-board row filter. */
.prod-filter { display: flex; align-items: center; gap: 6px; }
.prod-filter-label { color: var(--ink-3); font-size: 0.82rem; }
.prod-filter select {
  background: var(--surface-2);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 0.82rem;
}
.prod-filter-empty { text-align: center; padding: 18px 8px; }

/* First-unfinished-step "next here" row marker — replaces the old
   single-stage active-column ring. */
.prod-next-marker {
  color: var(--accent);
  font-weight: 700;
  margin-right: 3px;
}

/* Four-section Production checklist drawer. */
.prod-checklist-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.prod-checklist-section {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--surface-1);
}
.prod-checklist-section-head {
  margin: 0 0 6px;
  font-size: 0.86rem;
  color: var(--accent-bright);
}
.prod-checklist-section-items {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.prod-checklist-section-items li { margin: 2px 0; }
.prod-checklist-note { margin-top: 10px; }

/* Forced-advance confirm modal. */
.prod-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--surface-0-rgb), 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.prod-modal {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  max-width: 520px;
  width: calc(100% - 48px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.prod-modal-title { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink-0); }
.prod-modal-body { color: var(--ink-1); font-size: 0.9rem; line-height: 1.5; }
.prod-modal-chapter-list {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-0);
  padding: 8px 12px;
}
.prod-modal-chapter-head { margin: 0 0 4px; }
.prod-modal-chapter-list ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  color: var(--ink-1);
}
.prod-modal-chapter-num { font-weight: 600; }
.prod-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.prod-modal-audit-note { margin-top: 10px; text-align: right; }