/*
 * Critique Partner — visual layer on top of Bootstrap 5.
 * Aesthetic: literary, atmospheric, confident. For creative authors.
 * Cream paper, deep ink, oxblood accent, antique gold highlight.
 */

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */

:root {
  /* Surfaces — warm paper */
  --cp-paper:      #f6efde;   /* primary page background, warm cream */
  --cp-paper-2:    #efe6cf;   /* deeper paper, alt sections */
  --cp-ivory:      #fdf9ef;   /* near-white cream for cards */
  --cp-field:      #ffffff;   /* form inputs — crisp white field on the cream panels */
  --cp-ink-dark:   #15110a;   /* dramatic dark surface (quote band, footers) */
  --cp-ink-dark-2: #221b10;

  /* Ink (text on paper) */
  --cp-ink:        #1a1610;   /* primary text — deep warm near-black */
  --cp-ink-soft:   #403a2d;   /* secondary */
  /* --cp-muted tuned to clear WCAG AA on the cream paper.
     #5b5240 on #f6efde ≈ 5.6:1, comfortably above the 4.5:1 threshold for
     body text. Old value (#6e6754) was 4.4:1 — failed body, passed large. */
  --cp-muted:      #5b5240;   /* tertiary / meta */

  /* Rules / borders */
  --cp-rule:       #d9cfb3;
  --cp-rule-strong:#bdb094;

  /* Accents */
  --cp-oxblood:    #7a2630;   /* primary accent — saturated, literary */
  --cp-oxblood-2:  #5e1c25;   /* hover darker */
  --cp-oxblood-soft:#f2e0e2;
  --cp-gold:       #b08838;   /* antique gold — editorial highlight */
  --cp-gold-2:     #8a6b2b;
  --cp-gold-soft:  #f4ead0;

  /* Feedback */
  --cp-danger:     #a23a3a;
  --cp-warning:    #d4a843;
  --cp-success:    #4f7556;

  /* Type */
  --cp-font-display: "Cormorant Garamond", "Lora", Georgia, serif;
  --cp-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --cp-font-serif:   "Cormorant Garamond", Georgia, serif;

  /* Type ramp — modular scale (Minor Third, ratio 1.20) anchored at body 1rem.
     Single source of truth for heading + utility sizes; class-based helpers
     and ad-hoc h1/h2 selectors should reach for these instead of hardcoding. */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.3rem;
  --text-xl:   1.55rem;
  --text-2xl:  1.85rem;
  --text-3xl:  2.2rem;
  --text-4xl:  clamp(2.4rem, 3.8vw, 3.2rem);

  /* Spacing — 4px baseline. Use these instead of one-off margins so the
     vertical rhythm stays consistent across pages. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadow tokens */
  --cp-shadow-sm: 0 1px 2px rgba(20, 16, 8, 0.05), 0 1px 3px rgba(20, 16, 8, 0.06);
  --cp-shadow-md: 0 6px 18px -6px rgba(20, 16, 8, 0.10), 0 2px 4px rgba(20, 16, 8, 0.05);
  --cp-shadow-lg: 0 24px 50px -20px rgba(20, 16, 8, 0.22), 0 4px 10px rgba(20, 16, 8, 0.06);
  --cp-shadow-cinematic: 0 40px 80px -30px rgba(20, 16, 8, 0.35), 0 10px 30px -10px rgba(20, 16, 8, 0.15);

  /* Focus ring — single value, reused everywhere via :focus-visible. */
  --cp-focus-ring: 0 0 0 3px rgba(122, 38, 48, 0.30);

  /* Themeable surfaces that don't fit into the cream-paper/ivory pair —
     the navbar's translucent backdrop, the footer's muted text. Overridden
     in the dark variants below. */
  --cp-nav-bg: rgba(246, 239, 222, 0.85);
  --cp-footer-muted: rgba(246, 239, 222, 0.55);

  /* "On dark" — text that sits on permanently-dark surfaces (footer,
     pull-quote, hero quote band). These are intentionally constant
     across themes because those surfaces stay dark in dark mode too;
     if we used --cp-paper here, it would flip to dark-on-dark and
     disappear. */
  --cp-on-dark:       #f6efde;
  --cp-on-dark-strong:#fdf9ef;
  --cp-on-dark-muted: rgba(246, 239, 222, 0.62);
  --cp-on-dark-rule:  rgba(246, 239, 222, 0.14);

  /* Bootstrap overrides */
  --bs-body-bg: var(--cp-paper);
  --bs-body-color: var(--cp-ink);
  --bs-body-font-family: var(--cp-font-body);
  --bs-primary: var(--cp-oxblood);
  --bs-primary-rgb: 122, 38, 48;
  --bs-link-color: var(--cp-oxblood);
  --bs-link-color-rgb: 122, 38, 48;
  --bs-link-hover-color: var(--cp-oxblood-2);
  --bs-border-color: var(--cp-rule);
  --bs-secondary-color: var(--cp-muted);
  --bs-tertiary-color: var(--cp-muted);
}

/* ---------------------------------------------------------------------------
   Dark mode — inversion of the paper palette. Engages automatically with
   prefers-color-scheme=dark, OR manually via <html data-theme="dark">
   (set by the nav theme toggle below).
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cp-paper:      #1a1610;
    --cp-paper-2:    #221c12;
    --cp-ivory:      #2a2317;
    --cp-field:      #15110a;
    --cp-ink-dark:   #0e0b06;
    --cp-ink-dark-2: #15110a;

    --cp-ink:        #f6efde;
    --cp-ink-soft:   #d9cfb3;
    --cp-muted:      #a89e85;

    --cp-rule:       #3a3122;
    --cp-rule-strong:#564a35;

    --cp-oxblood:    #c46b73;
    --cp-oxblood-2:  #d48a90;
    --cp-oxblood-soft: rgba(196, 107, 115, 0.14);
    --cp-gold:       #d3ad5d;
    --cp-gold-2:     #e5c577;
    --cp-gold-soft:  rgba(211, 173, 93, 0.14);

    --cp-danger:     #d97676;
    --cp-warning:    #e5c577;
    --cp-success:    #8db792;

    --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cp-shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
    --cp-shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
    --cp-shadow-cinematic: 0 40px 80px -30px rgba(0, 0, 0, 0.85);

    --cp-focus-ring: 0 0 0 3px rgba(196, 107, 115, 0.45);
    --cp-nav-bg: rgba(26, 22, 16, 0.88);
    --cp-footer-muted: rgba(246, 239, 222, 0.55);
  }
}

:root[data-theme="dark"] {
  --cp-paper:      #1a1610;
  --cp-paper-2:    #221c12;
  --cp-ivory:      #2a2317;
  --cp-field:      #15110a;
  --cp-ink-dark:   #0e0b06;
  --cp-ink-dark-2: #15110a;

  --cp-ink:        #f6efde;
  --cp-ink-soft:   #d9cfb3;
  --cp-muted:      #a89e85;

  --cp-rule:       #3a3122;
  --cp-rule-strong:#564a35;

  --cp-oxblood:    #c46b73;
  --cp-oxblood-2:  #d48a90;
  --cp-oxblood-soft: rgba(196, 107, 115, 0.14);
  --cp-gold:       #d3ad5d;
  --cp-gold-2:     #e5c577;
  --cp-gold-soft:  rgba(211, 173, 93, 0.14);

  --cp-danger:     #d97676;
  --cp-warning:    #e5c577;
  --cp-success:    #8db792;

  --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cp-shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
  --cp-shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  --cp-shadow-cinematic: 0 40px 80px -30px rgba(0, 0, 0, 0.85);

  --cp-focus-ring: 0 0 0 3px rgba(196, 107, 115, 0.45);
  --cp-nav-bg: rgba(26, 22, 16, 0.88);
  --cp-footer-muted: rgba(246, 239, 222, 0.55);
}

/* Theme toggle button (lives in the global nav). Two paired icons,
   one visible per theme; both share the same button so the nav stays tight. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cp-ink-soft);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.theme-toggle:hover {
  background: var(--cp-oxblood-soft);
  color: var(--cp-oxblood);
}
.theme-toggle .theme-icon-dark   { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark  { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-light { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-dark  { display: inline-block; }
}

/* Admin menu toggle — gear + caret, styled to match the user menu beside it. */
.navbar.site-nav .admin-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.55rem !important;
  color: var(--cp-ink-soft);
  text-decoration: none;
}
.navbar.site-nav .admin-menu-toggle .bi-gear {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--cp-ink-soft);
  transition: color 120ms ease;
}
.navbar.site-nav .admin-menu-toggle:hover .bi-gear { color: var(--cp-oxblood); }
.admin-menu-toggle__caret { font-size: 0.6rem; color: var(--cp-ink-soft); opacity: 0.65; }
.navbar.site-nav .admin-menu-toggle::after { display: none; }

html, body {
  background: var(--cp-paper);
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
}

/* Global focus state — single source of truth. Applies to anything
   keyboard-focusable that hasn't opted out via a more specific rule.
   Inputs, links, persona cards, conflict buttons all inherit this. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--cp-focus-ring);
  border-radius: var(--radius-sm);
}

/* Type — display vs body */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cp-font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cp-ink);
}

a { color: var(--cp-oxblood); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cp-oxblood-2); }

.prose, p.prose { font-family: var(--cp-font-serif); font-size: 1.08rem; line-height: 1.65; color: var(--cp-ink-soft); }

/* Utility: muted text, small */
.text-muted, .muted { color: var(--cp-muted) !important; }
.small { font-size: 0.875rem; }

/* Hide Alpine-managed elements until Alpine has initialized */
[x-cloak] { display: none !important; }

/* HTMX transitions */
[hx-swap-oob], .htmx-swapping { transition: opacity 120ms ease; }
.htmx-swapping { opacity: 0.4; }

/* ---------------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------------- */

.navbar.site-nav {
  background: var(--cp-nav-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cp-rule);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.navbar.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--cp-ink);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.navbar.site-nav .brand:hover { color: var(--cp-oxblood); }
.navbar.site-nav .brand-name { padding-top: 0.05em; }

/* Brand mark — book-spine glyph with a gold band and ink punctum. Inline
   SVG via CSS so it ships with the stylesheet and never 404s. Reads on
   both the cream and dark paper without color swaps. */
.brand-mark {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3.5' y='2' width='17' height='20' rx='2.2' fill='%237a2630'/><rect x='3.5' y='9.6' width='17' height='1.4' fill='%23b08838'/><rect x='3.5' y='11.6' width='17' height='0.5' fill='%23f4ead0' opacity='0.55'/><circle cx='12' cy='17' r='1.3' fill='%23f4ead0'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 1px 0 rgba(20, 16, 8, 0.10));
}
.site-footer .brand-mark { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }

.navbar.site-nav .nav-link {
  color: var(--cp-ink-soft);
  font-family: var(--cp-font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0.85rem !important;
  border-radius: 8px;
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
}
.navbar.site-nav .nav-link:hover {
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
}
.navbar.site-nav .navbar-toggler { color: var(--cp-ink); }
.navbar.site-nav .navbar-toggler:focus { box-shadow: none; }

/* User-menu dropdown — themed so it doesn't read as a stark white island
   in dark mode. Cream surface in light mode, dark ivory in dark mode,
   gold-tinted hover state in both. */
.navbar.site-nav .dropdown-menu {
  background-color: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--cp-shadow-md);
  padding: 0.4rem;
}
.navbar.site-nav .dropdown-item {
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}
.navbar.site-nav .dropdown-item:hover,
.navbar.site-nav .dropdown-item:focus {
  background-color: var(--cp-oxblood-soft);
  color: var(--cp-oxblood);
}
.navbar.site-nav .dropdown-divider {
  border-top-color: var(--cp-rule);
  margin: 0.35rem 0;
}

/* Compact user-menu trigger — replaces the old inline email. Just an
   avatar icon + a tiny caret to signal "this opens a menu". */
.navbar.site-nav .user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.55rem !important;
}
.navbar.site-nav .user-menu-toggle .bi-person-circle {
  font-size: 1.45rem;
  line-height: 1;
  color: var(--cp-ink-soft);
  transition: color 120ms ease;
}
.navbar.site-nav .user-menu-toggle:hover .bi-person-circle {
  color: var(--cp-oxblood);
}
.user-menu-toggle__caret {
  font-size: 0.6rem;
  color: var(--cp-ink-soft);
  opacity: 0.65;
}
/* Strip Bootstrap's default dropdown-toggle caret since we render our own. */
.navbar.site-nav .user-menu-toggle::after { display: none; }

/* Dropdown identity header — shows the email + plan that used to live
   in the navbar inline. Sits flush with the menu top, non-interactive. */
.user-menu .user-menu__header {
  padding: 0.5rem 0.75rem 0.6rem;
}
.user-menu__identity {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}
.user-menu__plan {
  margin: 0.15rem 0 0;
  font-family: var(--cp-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
}

/* ---------------------------------------------------------------------------
   Buttons (Bootstrap overlay)
   --------------------------------------------------------------------------- */

.btn {
  font-family: var(--cp-font-body);
  font-weight: 500;
  border-radius: 999px;
  transition: transform 140ms ease, box-shadow 180ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  letter-spacing: 0.005em;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--cp-oxblood);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary,
.btn-primary:focus {
  background: var(--cp-ink);
  border-color: var(--cp-ink);
  color: var(--cp-ivory);
  box-shadow: var(--cp-shadow-sm);
  padding: 0.7rem 1.5rem;
}
.btn-primary:hover {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
  color: var(--cp-ivory);
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-md);
}
.btn-primary.btn-lg {
  font-size: 1.05rem;
  padding: 0.9rem 1.9rem;
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--cp-rule-strong);
  color: var(--cp-ink);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: transparent;
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--cp-rule-strong);
  color: var(--cp-ink);
  padding: 0.4rem 1rem;
}
.btn-ghost:hover, .btn-ghost:focus {
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.btn-arrow .arrow {
  display: inline-block;
  transition: transform 200ms ease;
}
.btn:hover .arrow { transform: translateX(4px); }

/* Danger button (used by app pages) */
button.danger, .btn.danger {
  background: var(--cp-danger);
  border-color: var(--cp-danger);
  color: #fff;
}
button.danger:hover, .btn.danger:hover {
  background: #882f2f;
  border-color: #882f2f;
  color: #fff;
}

/* Destructive ghost — softer than a solid red button. Designed so an
   accidental click *feels* different from a safe edit/cancel button:
   borderless, muted danger color, only commits on hover. Used in nav
   trios where "Edit" and "Delete" sit side-by-side; the latter should
   visually recede so it's a deliberate target, not the default click. */
.btn-ghost.btn-danger-ghost,
.btn.btn-danger-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--cp-muted);
  padding: 0.4rem 0.85rem;
}
.btn-ghost.btn-danger-ghost:hover,
.btn.btn-danger-ghost:hover,
.btn-ghost.btn-danger-ghost:focus,
.btn.btn-danger-ghost:focus {
  background: rgba(162, 58, 58, 0.08);
  border-color: rgba(162, 58, 58, 0.30);
  color: var(--cp-danger);
}

/* Solid destructive button — reserved for the *confirm step* of a
   destructive flow (e.g. inside a confirmation modal where the user
   has already opted in to a dangerous action). Should never be the
   default click on a card or row. */
.btn.btn-danger {
  background: var(--cp-danger);
  color: var(--cp-ivory);
  border: 1px solid var(--cp-danger);
  padding: 0.55rem 1.05rem;
  font-weight: 600;
}
.btn.btn-danger:hover,
.btn.btn-danger:focus {
  background: color-mix(in srgb, var(--cp-danger) 88%, black);
  border-color: color-mix(in srgb, var(--cp-danger) 88%, black);
}

/* ---------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------- */

.site-footer {
  background: var(--cp-ink-dark);
  color: var(--cp-on-dark);
  padding: var(--space-7) 0 var(--space-6);
  margin-top: var(--space-12);
  border-top: 1px solid var(--cp-ink-dark-2);
}
.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--cp-on-dark-strong);
}
.site-footer .text-muted { color: var(--cp-on-dark-muted) !important; }
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--cp-on-dark-rule);
}
@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.site-footer__tagline {
  font-family: var(--cp-font-serif);
  font-style: italic;
  color: var(--cp-on-dark-muted);
  margin: var(--space-2) 0 0;
  max-width: 32ch;
  font-size: var(--text-md);
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.site-footer__heading {
  font-family: var(--cp-font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-gold);
  margin: 0 0 var(--space-3);
}
.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.site-footer__col a {
  color: var(--cp-on-dark);
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.site-footer__col a:hover {
  color: var(--cp-gold);
  border-bottom-color: var(--cp-gold);
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--cp-on-dark-muted);
}
.site-footer__bottom p { color: var(--cp-on-dark-muted); }
.site-footer__built a {
  color: var(--cp-gold-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.site-footer__built a:hover {
  color: var(--cp-gold);
  border-bottom-color: var(--cp-gold);
}
.site-footer__dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cp-success);
  margin-right: 0.45rem;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(79, 117, 86, 0.18);
}

/* ---------------------------------------------------------------------------
   Landing page — atmospheric, dramatic, literary
   --------------------------------------------------------------------------- */

.landing-page main { padding: 0; }
.landing-page .site-footer { margin-top: 0; }

main.landing-main {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Section eyebrow — small, gold, with a leading rule */
.eyebrow {
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--cp-gold-2);
  margin: 0 0 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: var(--cp-gold);
  display: inline-block;
}

.section-title {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 2.75rem;
  max-width: 22ch;
  color: var(--cp-ink);
}
.section-title em {
  font-style: italic;
  color: var(--cp-oxblood);
  font-weight: 500;
}

/* Ornamental section separator — typographic fleuron */
.ornament {
  text-align: center;
  font-family: var(--cp-font-display);
  font-style: italic;
  color: var(--cp-gold);
  font-size: 1.4rem;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.6rem;
}

/* ---- HERO ---- */

.landing-hero {
  position: relative;
  padding: 6.5rem 0 5.5rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 60% at 85% 15%, rgba(176, 136, 56, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(122, 38, 48, 0.08), transparent 65%),
    linear-gradient(180deg, var(--cp-paper) 0%, var(--cp-paper-2) 100%);
}
/* Subtle paper grain overlay — tiny SVG noise */
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0 0.04  0 0 0 0.55 0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
/* Faint ruled-paper vertical lines on the right edge */
.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% - 2rem),
    rgba(122, 38, 48, 0.08) calc(100% - 2rem),
    rgba(122, 38, 48, 0.08) calc(100% - 2rem + 1px)
  );
  pointer-events: none;
  z-index: 0;
}
.landing-hero > .container { position: relative; z-index: 2; }

/* Decorative oversized fleuron behind the hero */
.hero-ornament {
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--cp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14rem, 28vw, 26rem);
  line-height: 1;
  color: var(--cp-oxblood);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.hero-eyebrow {
  /* slightly stronger on hero */
  color: var(--cp-oxblood);
}
.hero-eyebrow::before { background: var(--cp-oxblood); }

.hero-title {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cp-ink);
  margin: 0 0 1.75rem;
  max-width: 16ch;
}
.hero-title em {
  font-style: italic;
  color: var(--cp-oxblood);
  font-weight: 500;
  position: relative;
}
/* Subtle hand-drawn underline beneath italic emphasis */
.hero-title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.18em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q 50 2 100 6 T 198 5' stroke='%23b08838' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  opacity: 0.7;
}

.hero-lede {
  font-family: var(--cp-font-serif);
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--cp-ink-soft);
  max-width: 50ch;
  margin: 0 0 2.25rem;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.hero-cta-note { color: var(--cp-muted); font-size: 0.92rem; }
.hero-cta-note::before { content: "·"; margin-right: 0.5rem; color: var(--cp-rule-strong); }

/* Author chips beneath the CTA — placeholder trust elements */
.hero-credit {
  margin-top: 3.5rem;
  font-family: var(--cp-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-muted);
}

/* ---- Pillars ---- */

.landing-pillars {
  padding: 6.5rem 0 6rem;
  background: var(--cp-ivory);
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule);
  position: relative;
}

.pillar-card {
  height: 100%;
  background: var(--cp-paper);
  border: 1px solid var(--cp-rule);
  border-radius: 14px;
  padding: 2.25rem 1.85rem 2rem;
  position: relative;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cp-shadow-lg);
  border-color: var(--cp-gold);
}
.pillar-card::before {
  /* Top-corner gold accent */
  content: "";
  position: absolute;
  top: 0;
  left: 1.85rem;
  width: 2.2rem;
  height: 3px;
  background: var(--cp-gold);
  border-radius: 0 0 2px 2px;
}
.pillar-num {
  font-family: var(--cp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 2.5rem;
  color: var(--cp-oxblood);
  margin: 0 0 0.5rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.pillar-card h3 {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  color: var(--cp-ink);
}
.pillar-card p {
  font-family: var(--cp-font-serif);
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--cp-ink-soft);
  margin: 0;
}
.pillar-card p em { font-style: italic; color: var(--cp-ink); }

/* ---- How it works (timeline-ish) ---- */

.landing-howitworks {
  padding: 6rem 0 5.5rem;
  background:
    radial-gradient(ellipse 60% 40% at 10% 10%, rgba(176, 136, 56, 0.10), transparent 60%),
    var(--cp-paper);
  position: relative;
}

.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.step-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 4px solid var(--cp-oxblood);
  border-radius: 12px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.step-item:hover {
  transform: translateX(2px);
  box-shadow: var(--cp-shadow-md);
}
.step-num {
  counter-increment: step;
  font-family: var(--cp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--cp-oxblood);
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step-item h4 {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
  color: var(--cp-ink);
}
.step-item p {
  font-family: var(--cp-font-serif);
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--cp-ink-soft);
  margin: 0;
}

/* ---- Partners showcase ------------------------------------------------
   A horizontal carousel of the three built-in partner cards plus a "make
   your own" tile. Snap-scrolling track on narrow viewports, auto-grid on
   wide screens. The four tiles are all visible at once on desktop; the
   carousel arrows are there for trackpad-less users and for the few
   visitors where 4 tiles overflow even the wide breakpoint. */

.landing-partners {
  padding: 6rem 0 5.5rem;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(176, 136, 56, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(122, 38, 48, 0.05), transparent 60%),
    var(--cp-paper);
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule);
  overflow: hidden;
}
.landing-partners__head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.landing-partners__head .section-title { margin-bottom: var(--space-3); }
.landing-partners__head .prose { margin: 0; }

/* =========================================================
   Coverflow carousel — the featured tile is centered, with
   immediate neighbors peeking from each side, scaled down,
   dimmed, and slightly rotated in 3D for depth.
   ========================================================= */

.partner-coverflow {
  position: relative;
  perspective: 1600px;
  /* Atmospheric backdrop — a soft pool of warm light behind the
     featured card so it reads as elevated, even before any shadow. */
}
.partner-coverflow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, var(--cp-oxblood-soft), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(176, 136, 56, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.partner-coverflow__stage {
  position: relative;
  height: 480px;
  z-index: 1;
  cursor: grab;
}
.partner-coverflow__stage:active { cursor: grabbing; }

/* --- Individual tile --- */
.partner-tile {
  /* Coverflow positioning: every tile is absolutely centered, then
     translated/scaled/rotated by its data-offset. */
  position: absolute;
  top: 0;
  left: 50%;
  width: min(600px, 94%);
  margin: 0;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2.4rem 2.3rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 500ms ease,
    filter 500ms ease,
    box-shadow 500ms ease,
    border-color 500ms ease;
  will-change: transform, opacity;
}
.partner-tile::before {
  /* Top accent rule — matches the .cp-card filament aesthetic */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cp-oxblood) 50%, transparent);
  opacity: 0.5;
  z-index: 2;
}

/* The soft glow ring that wraps the active tile — sits behind via z-index
   tricks. Off by default; the active offset turns it on. */
.partner-tile__glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(122, 38, 48, 0.18), transparent 70%);
  box-shadow:
    0 30px 60px -25px rgba(122, 38, 48, 0.35),
    0 20px 40px -20px rgba(0, 0, 0, 0.25);
  transition: opacity 500ms ease;
}

/* ---- Coverflow offset rules ---- */

/* Active — centered, full size, bright, glowing. */
.partner-tile[data-offset="0"] {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  z-index: 30;
  filter: none;
  border-color: var(--cp-rule-strong);
  box-shadow: var(--cp-shadow-lg);
  cursor: default;
}
.partner-tile[data-offset="0"]::before { opacity: 1; height: 4px; }
.partner-tile[data-offset="0"] .partner-tile__glow { opacity: 1; }

/* Immediate neighbors — peek at the edges, scaled and angled. */
.partner-tile[data-offset="-1"] {
  transform: translate(-50%, 0) translateX(-72%) scale(0.82) rotateY(22deg);
  opacity: 0.55;
  z-index: 20;
  filter: saturate(0.55);
  cursor: pointer;
}
.partner-tile[data-offset="1"] {
  transform: translate(-50%, 0) translateX(72%) scale(0.82) rotateY(-22deg);
  opacity: 0.55;
  z-index: 20;
  filter: saturate(0.55);
  cursor: pointer;
}
.partner-tile[data-offset="-1"]:hover,
.partner-tile[data-offset="1"]:hover { opacity: 0.85; }

/* Distant — sit one rank further out, much dimmer. Gives a sense of
   "there's more" without crowding the stage. */
.partner-tile[data-offset="-2"] {
  transform: translate(-50%, 0) translateX(-105%) scale(0.7) rotateY(28deg);
  opacity: 0.15;
  z-index: 10;
  filter: saturate(0.3);
  pointer-events: none;
}
.partner-tile[data-offset="2"] {
  transform: translate(-50%, 0) translateX(105%) scale(0.7) rotateY(-28deg);
  opacity: 0.15;
  z-index: 10;
  filter: saturate(0.3);
  pointer-events: none;
}

/* Anything further out — hidden, off the stage but still in DOM so the
   wrap-around animations stay smooth. */
.partner-tile:not([data-offset="0"]):not([data-offset="-1"]):not([data-offset="1"]):not([data-offset="-2"]):not([data-offset="2"]) {
  transform: translate(-50%, 0) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 991.98px) {
  /* Tablet — narrower neighbors. */
  .partner-tile { padding: 2rem 1.85rem 2.1rem; }
  .partner-tile[data-offset="-1"] { transform: translate(-50%, 0) translateX(-82%) scale(0.78) rotateY(22deg); }
  .partner-tile[data-offset="1"]  { transform: translate(-50%, 0) translateX(82%)  scale(0.78) rotateY(-22deg); }
  .partner-tile[data-offset="-2"],
  .partner-tile[data-offset="2"] { opacity: 0; }
  .partner-coverflow__stage { height: 460px; }
}

@media (max-width: 640px) {
  /* Mobile — single-card view, no peeks. The card fills the stage. */
  .partner-coverflow__stage { height: auto; min-height: 460px; }
  .partner-tile { width: 100%; padding: 1.75rem 1.5rem 1.85rem; }
  .partner-tile__mark { font-size: 2.6rem; width: 2.6rem; }
  .partner-tile__name { font-size: var(--text-xl); }
  .partner-tile__voice { font-size: var(--text-md); }
  .partner-tile__focus li { font-size: 1rem; }
  .partner-tile[data-offset="-1"],
  .partner-tile[data-offset="1"],
  .partner-tile[data-offset="-2"],
  .partner-tile[data-offset="2"] {
    transform: translate(-50%, 0) scale(0.95);
    opacity: 0;
    pointer-events: none;
  }
}

.partner-tile__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.partner-tile__mark {
  flex-shrink: 0;
  font-family: var(--cp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 0.9;
  color: var(--cp-oxblood);
  width: 3rem;
  text-align: center;
}
.partner-tile__mark--plus {
  font-style: normal;
  font-size: 2.6rem;
  color: var(--cp-gold-2);
}
.partner-tile__role {
  font-family: var(--cp-font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
  margin: 0 0 0.35rem;
}
.partner-tile__name {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--cp-ink);
  line-height: 1.1;
}
.partner-tile__voice {
  font-family: var(--cp-font-serif);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--cp-ink);
  margin: 0;
}
.partner-tile__focus {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid var(--cp-rule);
  padding-top: var(--space-4);
}
.partner-tile__focus li {
  font-family: var(--cp-font-serif);
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--cp-ink);
  padding-left: 1rem;
  position: relative;
}
.partner-tile__focus li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--cp-gold-2);
  font-weight: 600;
}
.partner-tile__focus--cta li {
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  color: var(--cp-ink-soft);
}
.partner-tile__focus--cta li::before { content: "·"; color: var(--cp-gold-2); }

/* Sample custom-partner tiles — distinguish from the three defaults so
   the writer instantly reads "this is the kind of thing you could make". */
.partner-tile--sample {
  background:
    linear-gradient(180deg, rgba(176, 136, 56, 0.04), transparent 30%),
    var(--cp-ivory);
}
.partner-tile--sample::before {
  background: linear-gradient(90deg, transparent, var(--cp-gold-2) 50%, transparent);
  opacity: 0.6;
}
.partner-tile--sample .partner-tile__mark--sample {
  font-size: 1.4rem;
  color: var(--cp-gold-2);
  letter-spacing: 0;
  padding-top: 0.35rem;
}
.partner-tile--sample .partner-tile__role { color: var(--cp-gold-2); }

/* The "add your own" CTA tile — dashed, more inviting, ends the carousel */
.partner-tile--custom {
  background:
    radial-gradient(circle at 100% 0%, rgba(176, 136, 56, 0.14), transparent 60%),
    var(--cp-ivory);
  border-style: dashed;
  border-color: var(--cp-rule-strong);
}
.partner-tile--custom::before {
  background: linear-gradient(90deg, transparent, var(--cp-gold) 50%, transparent);
}
.partner-tile--custom .partner-tile__mark--plus {
  background: var(--cp-gold-soft);
  color: var(--cp-oxblood);
  border-radius: var(--radius-pill);
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 500;
}

/* ---- Coverflow controls (prev / meta / next) ---- */
.partner-coverflow__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  position: relative;
  z-index: 2;
}
.partner-coverflow__btn {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--cp-rule-strong);
  background: var(--cp-ivory);
  color: var(--cp-ink);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.18);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.partner-coverflow__btn:hover {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
  color: var(--cp-ivory);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(122, 38, 48, 0.45);
}
.partner-coverflow__btn:active {
  transform: translateY(0);
}

/* The meta block sits between the two arrow pills: a "1 of 7 partners"
   counter (large display numeral, small label) plus a row of indicator
   dashes underneath. */
.partner-coverflow__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  min-width: 12rem;
}
.partner-coverflow__counter {
  margin: 0;
  font-family: var(--cp-font-display);
  font-size: 1.05rem;
  color: var(--cp-ink-soft);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.partner-coverflow__counter > span:first-child {
  font-size: 1.45rem;
  font-weight: 600;
  font-style: italic;
  color: var(--cp-oxblood);
  font-variant-numeric: tabular-nums;
}
.partner-coverflow__counter-sep {
  color: var(--cp-ink-faint, var(--cp-rule-strong));
}
.partner-coverflow__counter-label {
  margin-left: 0.35rem;
  font-family: var(--cp-font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
}

.partner-coverflow__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.partner-coverflow__dot {
  width: 1.4rem;
  height: 2px;
  margin: 0;
  padding: 0;
  background-color: var(--cp-rule-strong);
  border: 0;
  border-radius: 2px;
  opacity: 0.55;
  cursor: pointer;
  transition: background-color 220ms ease, opacity 220ms ease, width 220ms ease;
}
.partner-coverflow__dot:hover { opacity: 0.9; }
.partner-coverflow__dot.is-active {
  background-color: var(--cp-oxblood);
  opacity: 1;
  width: 2.4rem;
}

@media (max-width: 768px) {
  .landing-partners { padding: 4rem 0; }
  .partner-coverflow__controls { gap: var(--space-3); margin-top: var(--space-5); }
  .partner-coverflow__btn { width: 2.7rem; height: 2.7rem; }
  .partner-coverflow__meta { min-width: 9rem; gap: 0.5rem; }
  .partner-coverflow__counter > span:first-child { font-size: 1.25rem; }
  .partner-coverflow__counter-label { display: none; }
  .partner-coverflow__dot { width: 1rem; }
  .partner-coverflow__dot.is-active { width: 1.7rem; }
}

/* ---------------------------------------------------------------------------
   Inside the bible — paired editorial column + showcase of bible
   entry types and a sample conflict-resolution card.
   --------------------------------------------------------------------------- */

.landing-bible {
  padding: 6rem 0 6.5rem;
  background:
    radial-gradient(ellipse 50% 40% at 10% 0%, rgba(122, 38, 48, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(176, 136, 56, 0.07), transparent 60%),
    var(--cp-paper-2);
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule);
}
.landing-bible .section-title { margin-bottom: var(--space-4); }
.landing-bible .prose { margin: 0 0 var(--space-4); }
.landing-bible .prose:last-of-type { margin-bottom: 0; }

.bible-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.bible-types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.bible-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cp-ink);
}
.bible-type-chip__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cp-oxblood);
  box-shadow: 0 0 0 3px var(--cp-oxblood-soft);
}

.bible-showcase__panel {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: var(--cp-shadow-lg);
  position: relative;
  overflow: hidden;
}
.bible-showcase__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cp-oxblood) 50%, transparent);
  opacity: 0.55;
}
.bible-showcase__panel-head {
  margin-bottom: var(--space-3);
}
.bible-showcase__panel-head .eyebrow {
  margin-bottom: 0.35rem;
}
.bible-showcase__panel-head h3 {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
  color: var(--cp-ink);
  line-height: 1.2;
}

.bible-showcase .conflict-list { margin-top: 0; }
.bible-showcase .conflict {
  padding: 1.1rem 1.25rem 1.2rem;
}
.bible-showcase .conflict-header strong {
  font-family: var(--cp-font-display);
  font-size: 1.1rem;
  color: var(--cp-ink);
}
.bible-showcase .conflict blockquote {
  font-family: var(--cp-font-serif);
  color: var(--cp-ink-soft);
}
.bible-showcase__faux-link {
  color: var(--cp-oxblood);
  text-decoration: underline;
  text-decoration-color: rgba(122, 38, 48, 0.35);
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .landing-bible { padding: 4rem 0 4.5rem; }
  .bible-showcase__panel { padding: 1.25rem 1.15rem; }
  .bible-showcase .conflict { padding: 0.95rem 1.05rem 1.05rem; }
}

/* ---- Pull quote (cinematic dark band) ---- */

.landing-quote {
  padding: 6rem 0;
  background: var(--cp-ink-dark);
  color: var(--cp-on-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.landing-quote::before {
  /* Atmospheric gold wash */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(176, 136, 56, 0.18), transparent 70%);
  pointer-events: none;
}
.landing-quote::after {
  /* Top and bottom hairlines in gold */
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(176, 136, 56, 0.35);
  border-bottom: 1px solid rgba(176, 136, 56, 0.35);
  pointer-events: none;
}
.landing-quote > .container { position: relative; z-index: 1; }

.pull-quote {
  margin: 0 auto;
  max-width: 56ch;
  padding: 0;
}
.pull-quote .quote-mark {
  font-family: var(--cp-font-display);
  font-style: italic;
  font-size: 5rem;
  line-height: 0.7;
  color: var(--cp-gold);
  display: block;
  margin: 0 auto 1rem;
  user-select: none;
}
.pull-quote p {
  font-family: var(--cp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  line-height: 1.45;
  color: var(--cp-on-dark-strong);
  margin: 0 0 1.5rem;
  letter-spacing: -0.005em;
}
.pull-quote cite {
  font-family: var(--cp-font-body);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cp-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.pull-quote cite::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--cp-gold);
  display: inline-block;
}

/* ---- Trust band — quiet reassurance before the ask ---- */

.landing-trust {
  padding: 5.5rem 0;
  text-align: center;
}
.landing-trust .ornament { margin-bottom: var(--space-4); }
.landing-trust .section-title { margin-bottom: var(--space-4); }
.landing-trust__lede {
  font-family: var(--cp-font-serif);
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--cp-ink-soft);
  max-width: 42rem;
  margin: 0 auto;
}
.landing-trust__cta { margin: var(--space-6) 0 0; }
.landing-trust__cta a {
  font-family: var(--cp-font-body);
  font-weight: 600;
  color: var(--cp-oxblood);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.landing-trust__cta a:hover { color: var(--cp-oxblood-2); }
.landing-trust__cta .arrow { transition: transform 0.15s ease; }
.landing-trust__cta a:hover .arrow { transform: translateX(4px); }

/* ---- Pricing band — short, honest, paired aside ---- */

.landing-pricing {
  padding: 5.5rem 0 5.5rem;
  background:
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(176, 136, 56, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(122, 38, 48, 0.06), transparent 60%),
    var(--cp-paper-2);
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule);
}
.landing-pricing .section-title { margin-bottom: var(--space-4); }
.landing-pricing .prose { margin: 0; }

.pricing-aside {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
}
.pricing-aside::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cp-gold-2) 50%, transparent);
  opacity: 0.7;
}
.pricing-aside__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--cp-rule);
}
.pricing-aside__line:last-child { border-bottom: 0; padding-bottom: 0; }
.pricing-aside__line:first-child { padding-top: 0; }
.pricing-aside__line span {
  font-family: var(--cp-font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-ink);
}
.pricing-aside__line em {
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--cp-ink-soft);
}

@media (max-width: 768px) {
  .landing-pricing { padding: 4rem 0; }
}

/* ---- Closing CTA ---- */

.landing-footer-cta {
  padding: 6.5rem 0 7rem;
  text-align: center;
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%, rgba(122, 38, 48, 0.08), transparent 65%),
    var(--cp-paper);
  position: relative;
}
.landing-footer-cta .section-title {
  margin: 1rem auto 1rem;
  max-width: 24ch;
}
.landing-footer-cta .lede {
  font-family: var(--cp-font-serif);
  font-size: 1.15rem;
  color: var(--cp-ink-soft);
  line-height: 1.6;
  margin: 0 auto 2.5rem;
  max-width: 52ch;
}
.landing-footer-cta .hero-cta { justify-content: center; }

/* ---------------------------------------------------------------------------
   App pages (logged-in surfaces) — Bootstrap overlay
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Container widths — content-type aware.

   Design principle: the right width is determined by what's INSIDE, not by
   the viewport. Best-practice line length for prose is 45-75 characters
   (~60ch sweet spot); dashboards / card grids benefit from wider canvases;
   forms read best a little wider than prose. Overflowing wide screens
   with prose makes scanning miserable.

   - `.container.reading` ≈ 760px (≈65ch in our body font) — chapter form,
     account, persona detail/edit, error pages, billing pages with prose.
   - `.container.narrow`  ≈ 720px — focused forms (project form, entry new,
     processing status, delete confirmations).
   - `.container` default ≈ 1240px — most app pages: hybrid content with a
     header + cards + occasional prose. Allows 2-3 columns of cards on a
     1440px monitor without becoming a sea of empty cream.
   - `.container.wide` ≈ 1440px — dashboard/grid pages where more columns
     genuinely help (project list, project detail, bible browser, partner
     library). Caps at 1440px so even on 4K monitors we don't drift into
     wall-of-card territory.
   --------------------------------------------------------------------------- */

main.container {
  max-width: 1240px;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}
main.container.narrow  { max-width: 720px; }
main.container.reading { max-width: 760px; }
main.container.wide    { max-width: 1440px; }

/* App page header — eyebrow + serif title + optional action */
.app-page-head {
  margin-bottom: 2.5rem;
}
.app-page-head .crumb {
  font-size: 0.86rem;
  margin: 0 0 1rem;
  color: var(--cp-muted);
}
.app-page-head .crumb a {
  color: var(--cp-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.app-page-head .crumb a:hover {
  color: var(--cp-oxblood);
  border-bottom-color: var(--cp-oxblood);
}
.app-page-head .row-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.app-page-head h1 {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--cp-ink);
}
.app-page-head h1 em {
  font-style: italic;
  color: var(--cp-oxblood);
}
.app-page-head .meta {
  color: var(--cp-muted);
  font-size: 0.92rem;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.app-page-head .meta .sep { color: var(--cp-rule-strong); }
.app-page-head .desc {
  font-family: var(--cp-font-serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--cp-ink-soft);
  margin: 1rem 0 0;
  max-width: 60ch;
}
/* Inline page-head note — short prose with optional inline badges.
   Unlike .meta (a flex row meant for metadata chips), this is a real
   sentence that may carry an inline .badge-cp; flex would create awkward
   inter-word gaps. Body font, muted color, comfortable line-height. */
.app-page-head .page-head-note {
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cp-muted);
  margin: 0.6rem 0 0;
  max-width: 60ch;
}
.app-page-head .page-head-note .badge-cp {
  vertical-align: baseline;
  margin: 0 0.1rem;
}
.app-page-head .actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Section title within app pages */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 1.5rem;
}
.section-head h2 {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--cp-ink);
}
.section-head .eyebrow { margin-bottom: 0.35rem; }

/* App card — used for projects, chapters, bible entries */
.app-card {
  display: block;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 4px solid var(--cp-oxblood);
  border-radius: 12px;
  padding: 1.5rem 1.6rem 1.3rem;
  text-decoration: none;
  color: var(--cp-ink);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  position: relative;
}
.app-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cp-shadow-md);
  border-color: var(--cp-rule);
  border-left-color: var(--cp-oxblood);
  color: var(--cp-ink);
}
.app-card .card-title {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  color: var(--cp-ink);
}
.app-card:hover .card-title { color: var(--cp-oxblood); }
.app-card .card-meta {
  margin: 0;
  color: var(--cp-muted);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  align-items: center;
}
.app-card .card-meta .sep { color: var(--cp-rule-strong); }
.app-card .card-desc {
  font-family: var(--cp-font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cp-ink-soft);
  margin: 0.8rem 0 0;
}
/* Last-chapter line inside an .app-card on the projects list.
   Italic serif so it reads like a kicker; pairs with the card-meta line
   below it for stats. */
.app-card .card-resume {
  font-family: var(--cp-font-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cp-ink-soft);
  margin: 0.25rem 0 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.app-card .card-resume__label {
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
}
.app-card .card-resume__title {
  font-style: italic;
  color: var(--cp-ink);
}
/* Bible card on the project page. Sits above the chapter list as the
   first thing the writer's eye lands on — a quiet but unmissable signpost
   to the story bible, with at-a-glance entry counts and an alert when
   conflicts are pending. */
.bible-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 4px solid var(--cp-gold-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--cp-shadow-sm);
  position: relative;
  overflow: hidden;
}
.bible-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 60% at 0% 0%, rgba(176, 136, 56, 0.08), transparent 60%);
}
.bible-card--needs-attention {
  border-left-color: var(--cp-oxblood);
}
.bible-card__main {
  position: relative;
  min-width: 0;
}
.bible-card__main .eyebrow {
  margin-bottom: 0.35rem;
}
.bible-card__heading {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.15;
  margin: 0 0 0.85rem;
  color: var(--cp-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.85rem;
}
.bible-card__alert {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  border: 1px solid rgba(122, 38, 48, 0.25);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
}
.bible-card__breakdown {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.4rem;
}
.bible-card__breakdown li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  color: var(--cp-ink-soft);
  font-variant-numeric: tabular-nums;
}
.bible-card__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cp-gold-2);
  display: inline-block;
  transform: translateY(-1px);
}
.bible-card__count {
  font-weight: 700;
  color: var(--cp-ink);
}
.bible-card__type {
  font-weight: 500;
}
.bible-card__empty {
  margin: 0;
  color: var(--cp-ink-soft);
  font-size: 0.95rem;
}
.bible-card__cta {
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .bible-card {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.35rem;
  }
}

/* Chapter row on project_detail: app-card spans the row, with a quiet
   delete affordance pinned to the right that doesn't fight the main click
   target. Whole row is `position: relative` so the delete button can sit
   absolutely without taking the click for the card itself. */
.chapter-row { position: relative; }
.chapter-row__delete {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--cp-ink-soft);
  background: transparent;
  text-decoration: none;
  opacity: 0;
  transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease;
}
.chapter-row:hover .chapter-row__delete,
.chapter-row:focus-within .chapter-row__delete {
  opacity: 1;
}
.chapter-row__delete:hover,
.chapter-row__delete:focus {
  background: rgba(162, 58, 58, 0.10);
  color: var(--cp-danger);
  outline: none;
}

.app-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Responsive grid — 2 cols at tablet, 3 cols on standard laptop, 4 on wide
   monitors. auto-fit + minmax means the grid breathes with the container
   without us picking exact breakpoints per page. The min-width (260px)
   keeps cards comfortably readable; below that we fall back to fewer cols. */
@media (min-width: 768px) {
  .app-card-list.cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* Badges / pills */
.badge-cp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--cp-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--cp-gold-soft);
  color: var(--cp-gold-2);
  border: 1px solid rgba(176, 136, 56, 0.3);
}
.badge-cp.badge-oxblood {
  background: var(--cp-oxblood-soft);
  color: var(--cp-oxblood);
  border-color: rgba(122, 38, 48, 0.18);
}
.badge-cp.badge-muted {
  background: rgba(110, 103, 84, 0.10);
  color: var(--cp-ink-soft);
  border-color: var(--cp-rule);
}
.badge-cp.badge-danger {
  background: rgba(162, 58, 58, 0.10);
  color: var(--cp-danger);
  border-color: rgba(162, 58, 58, 0.30);
}

/* "In progress" badge — gentle pulse so the project list communicates
   liveness when a chapter is mid-pipeline. Stops automatically as soon
   as a status modifier (badge-oxblood / badge-danger / badge-muted) is
   present; honors prefers-reduced-motion. */
.badge-cp:not(.badge-oxblood):not(.badge-muted):not(.badge-danger) {
  position: relative;
}
.badge-cp:not(.badge-oxblood):not(.badge-muted):not(.badge-danger)::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cp-gold-2);
  margin-right: 0.4rem;
  animation: cp-status-pulse 1.6s ease-in-out infinite;
}
@keyframes cp-status-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-cp::before { animation: none; }
}

/* Empty state */
.app-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--cp-ivory);
  border: 1px dashed var(--cp-rule-strong);
  border-radius: 14px;
}
.app-empty .ornament {
  font-family: var(--cp-font-display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--cp-gold);
  margin: 0 0 1rem;
  line-height: 1;
  letter-spacing: 0.5rem;
}
.app-empty p.prose {
  font-family: var(--cp-font-serif);
  font-size: 1.15rem;
  color: var(--cp-ink-soft);
  max-width: 48ch;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

/* Form panel — used for project/chapter form pages */
.form-panel {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: 14px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: var(--cp-shadow-sm);
}
/* Danger variant — destructive confirm pages (project delete, etc.).
   Oxblood-strength rail to signal the action's weight without going to
   a full red tint that would clash with the editorial palette. */
.form-panel--danger {
  border-left: 4px solid var(--cp-danger);
}
.form-panel .form-field { margin-bottom: 1.4rem; }
.form-panel label,
form .cp-label {
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cp-ink);
  margin-bottom: 0.5rem;
  display: block;
}
.form-panel label .help,
form .cp-label .help {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--cp-muted);
  margin-left: 0.4rem;
}

/* Form controls */
.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="password"],
.form-panel input[type="search"],
.form-panel input[type="url"],
.form-panel select,
.form-panel textarea,
form.cp-form input[type="text"],
form.cp-form input[type="email"],
form.cp-form input[type="password"],
form.cp-form input[type="search"],
form.cp-form input[type="url"],
form.cp-form select,
form.cp-form textarea {
  width: 100%;
  /* Inputs sit on the same ivory surface as form panels (.partner-form-panel,
     .cp-card, .form-panel) so they read as part of the surface, with the
     border carrying the visual delineation. */
  background: var(--cp-ivory);
  color: var(--cp-ink);
  border: 1px solid var(--cp-rule-strong);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-family: var(--cp-font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.form-panel textarea,
form.cp-form textarea {
  font-family: var(--cp-font-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  min-height: 8rem;
}
.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus,
form.cp-form input:focus,
form.cp-form select:focus,
form.cp-form textarea:focus {
  outline: none;
  border-color: var(--cp-oxblood);
  box-shadow: 0 0 0 4px rgba(122, 38, 48, 0.12);
}
form.cp-form input::placeholder,
form.cp-form textarea::placeholder {
  color: var(--cp-muted);
  opacity: 0.7;
}
.form-panel .error,
form.cp-form .error {
  color: var(--cp-danger);
  font-size: 0.86rem;
  margin-top: 0.35rem;
  display: block;
}

/* Form actions row */
.form-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.form-actions a.cancel,
.form-actions .muted {
  color: var(--cp-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.form-actions a.cancel:hover,
.form-actions .muted:hover {
  color: var(--cp-oxblood);
  border-bottom-color: var(--cp-oxblood);
}
.form-actions--cancel-only { margin-top: 1.2rem; }

/* Two-choice action block for the customize page — primary "Save as my
   version" and secondary "Save as a new partner", each with an
   explanatory help line beneath. Reads as a clear fork-in-the-road. */
.customize-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 0.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
}
@media (max-width: 720px) {
  .customize-actions { grid-template-columns: 1fr; gap: 1rem; }
}
.customize-actions__choice {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
}
.customize-actions__choice .btn {
  white-space: nowrap;
}
.customize-actions__help {
  font-family: var(--cp-font-body);
  font-size: 0.86rem;
  color: var(--cp-muted);
  line-height: 1.5;
  margin: 0;
}
.customize-actions__choice:first-child .customize-actions__help {
  /* Slightly stronger color on the primary path's help so the
     primary/secondary hierarchy still reads. */
  color: var(--cp-ink-soft, var(--cp-ink));
}

/* Chapter writing textarea — larger, calm */
.chapter-writing-area {
  font-family: var(--cp-font-serif);
  font-size: 1.12rem;
  line-height: 1.7;
  min-height: 60vh;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule-strong);
  border-radius: 10px;
  padding: 1.5rem;
  width: 100%;
  resize: vertical;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.chapter-writing-area:focus {
  outline: none;
  border-color: var(--cp-oxblood);
  box-shadow: 0 0 0 4px rgba(122, 38, 48, 0.10);
}
.word-count-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--cp-muted);
}
.word-count-row .word-count-over { color: var(--cp-danger); font-weight: 500; }

/* Persona picker — toggleable reader cards above the Submit button */
.persona-picker {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cp-rule);
}
.persona-picker-head { margin-bottom: 1.25rem; }
.persona-picker-title {
  font-family: var(--cp-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cp-ink);
  margin: 0 0 0.35rem;
}
.persona-picker-sub {
  color: var(--cp-muted);
  margin: 0;
  font-size: 0.94rem;
  max-width: 50ch;
}
.persona-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.persona-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.05rem 1.1rem 1.1rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease,
              background-color 140ms ease, transform 140ms ease;
  user-select: none;
}
.persona-card:hover {
  border-color: var(--cp-rule-strong);
  box-shadow: var(--cp-shadow-sm);
  transform: translateY(-1px);
}
.persona-card-selected {
  border-color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  box-shadow: 0 0 0 2px var(--cp-oxblood), 0 12px 30px -16px rgba(122, 38, 48, 0.35);
  transform: translateY(-1px);
}
.persona-card-selected:hover {
  border-color: var(--cp-oxblood-2);
  box-shadow: 0 0 0 2px var(--cp-oxblood-2), 0 16px 36px -18px rgba(122, 38, 48, 0.45);
}
.persona-card-input {
  /* Visually hidden but accessible; the card itself is the click target. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.persona-card-input:focus-visible ~ .persona-card-check {
  box-shadow: var(--cp-focus-ring);
}
.persona-card-check {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--cp-rule-strong);
  color: transparent;
  font-size: 0.85rem;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, transform 140ms ease;
}
.persona-card-selected .persona-card-check {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
  color: var(--cp-ivory);
  transform: scale(1.02);
}
/* Header row: portrait + name/tagline stack, side-by-side */
.persona-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 2.25rem; /* breathing room for the checkmark */
}
.persona-card-portrait {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--partner-accent, var(--cp-gold-2));
}
.persona-card-portrait .partner-portrait-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.persona-card-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--partner-accent, var(--cp-gold-2));
  color: var(--cp-ivory);
  border-radius: 50%;
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-weight: 700;
  font-size: 0.95rem;
}
.persona-card-heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.persona-card-name {
  font-family: var(--cp-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cp-ink);
  line-height: 1.2;
}
.persona-card-tagline {
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--cp-muted);
  line-height: 1.3;
}
.persona-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.persona-card-quote {
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cp-ink-soft, var(--cp-ink));
  padding: 0.55rem 0.75rem;
  background: var(--cp-paper-2);
  border-left: 2px solid var(--partner-accent, var(--cp-rule-strong));
  border-radius: 0 5px 5px 0;
  margin: 0;
}
.persona-card-tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--cp-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-muted);
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.persona-card-tag-custom {
  color: var(--cp-gold-2);
  background: var(--cp-gold-soft);
  border-color: var(--cp-gold-soft);
}

/* --- Reading-depth chip ---------------------------------------------------
   Visible on persona cards, the partner list, the partner detail page, and
   the chapter form's selectable cards. Carries the model tier at a glance:
   muted green for "quick" (cheap & fast), oxblood for "deep" (premium). */
.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--cp-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  width: fit-content;
}
.tier-chip::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
/* Tier chips share an editorial gold/ivory palette so neither reads as
   "good" or "bad" — they're two equally valid choices. Deep gets the
   filled gold-soft fill to suggest weight/depth; Quick is the lighter,
   outlined variant. No green/red. */
.tier-chip--quick {
  color: var(--cp-ink-soft);
  background: var(--cp-paper-2);
  border-color: var(--cp-rule-strong);
}
.tier-chip--deep {
  color: var(--cp-gold-2);
  background: var(--cp-gold-soft);
  border-color: rgba(176, 136, 56, 0.35);
}

/* Reading-depth radio picker on the persona edit/new forms. Two big stacked
   options with a label/meta/description block so the writer sees the
   tradeoff clearly. Selected option gets the brand accent. */
.tier-picker__options {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .tier-picker__options { grid-template-columns: 1fr 1fr; }
}
.tier-picker__option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.95rem 1.05rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.tier-picker__option:hover {
  border-color: var(--cp-rule-strong);
  background: var(--cp-paper);
}
.tier-picker__option input[type="radio"] {
  margin-top: 0.3rem;
  accent-color: var(--cp-oxblood);
}
/* Both tiers use the brand's oxblood selected-state — neither option
   should read as "good" (green) or "bad" (red). They're different
   tradeoffs, not value judgments. */
.tier-picker__option:has(input[type="radio"]:checked) {
  border-color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  box-shadow: 0 0 0 1px var(--cp-oxblood) inset;
}
.tier-picker__option-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.tier-picker__option-name {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--cp-ink);
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tier-picker__option-rec {
  font-family: var(--cp-font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--cp-gold-soft);
  color: var(--cp-gold-2);
  border: 1px solid rgba(176, 136, 56, 0.30);
}
.tier-picker__rec-note {
  margin-top: 0.6rem;
  color: var(--cp-ink-soft);
}
.tier-picker__option-meta {
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
}
.tier-picker__option-desc {
  font-family: var(--cp-font-body);
  font-size: 0.88rem;
  color: var(--cp-ink-soft);
  line-height: 1.45;
}

/* Per-partner-card live credit estimate on the chapter form. Tiny, muted —
   it's information, not a CTA. */
.persona-card-tier {
  margin-top: 0.1rem;
}
.persona-card-credits {
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  color: var(--cp-ink-soft);
  font-variant-numeric: tabular-nums;
}
.persona-card-credits__num {
  font-weight: 700;
  color: var(--cp-ink);
}
.persona-card-voice {
  font-family: var(--cp-font-body);
  color: var(--cp-ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  margin-top: 0.1rem;
}
.persona-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--cp-muted);
}
.persona-picker-foot .error { margin-top: 0; }

/* Bulk Select all / Clear actions for the persona picker. Lets the
   writer quickly recover when the prefill is missing a partner they
   wanted (the form remembers last-submission selection by default). */
.persona-picker-bulk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
}
.persona-picker-bulk .ghost-link {
  font-size: 0.86rem;
  font-weight: 500;
}
.persona-picker-bulk__sep {
  color: var(--cp-rule-strong);
  font-size: 0.8rem;
}

/* Per-card "View prompt" link in the toggle UI. Sits in the lower-right
   corner; @click.stop on the link prevents the surrounding label toggle
   from firing when the user clicks the link. */
.persona-card-link {
  position: absolute;
  bottom: 0.7rem;
  right: 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cp-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.persona-card-link:hover {
  color: var(--cp-oxblood);
  border-bottom-color: var(--cp-oxblood);
}

/* "Add a custom reader" tile — same shape as the toggle cards but
   dashed, decorative, and links out to /personas/new/. */
.persona-card-add {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.05rem 1.1rem 1.1rem;
  background: transparent;
  border: 1.5px dashed var(--cp-rule-strong);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.persona-card-add:hover {
  border-color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  transform: translateY(-1px);
  color: inherit;
}
.persona-card-add-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-paper-2);
  color: var(--cp-oxblood);
  font-size: 1.05rem;
  transition: background-color 140ms ease;
}
.persona-card-add:hover .persona-card-add-icon {
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
}

/* ---------------------------------------------------------------------------
   Persona-management pages: list, detail, edit, wizard
   --------------------------------------------------------------------------- */

.page-actions { margin-top: 1.25rem; }

/* ============================================================
   Partners section — modernized to match project/manuscript pages
   ============================================================
   Three card lists (built-in / customized / custom) under a single
   app-page-head, each preceded by a section-head with an inline hint.
   Cards use an oxblood-rail pattern matching .app-card; built-in
   defaults get a quieter gold rail to read as read-only.
*/
/* Section lede — short description paragraph that sits between a
   section-head and its content list. Lives outside the .section-head
   flex row so it doesn't have to compete with the heading for width. */
.section-lede {
  color: var(--cp-ink-soft);
  font-family: var(--cp-font-serif);
  font-size: 1rem;
  line-height: 1.55;
  margin: -0.5rem 0 1.4rem;
  max-width: 62ch;
}
.section-lede em {
  font-style: italic;
  color: var(--cp-oxblood);
}


.partner-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .partner-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.partner-card {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 4px solid var(--cp-gold-2);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem 1.1rem;
  box-shadow: var(--cp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.partner-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cp-shadow-md);
}
.partner-card--mine {
  border-left-color: var(--cp-oxblood);
}
.partner-card--archived {
  border-left-color: var(--cp-rule-strong);
  background: var(--cp-paper-2);
}
.partner-card--archived .partner-card__name { color: var(--cp-ink-soft); }
.partner-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.partner-card__name {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--cp-ink);
}
.partner-card__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.partner-card__name a:hover,
.partner-card__name a:focus-visible {
  color: var(--cp-oxblood);
  border-bottom-color: var(--cp-oxblood);
  outline: none;
}
.partner-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.partner-card__voice {
  font-family: var(--cp-font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cp-ink-soft);
  margin: 0;
  font-style: italic;
}
.partner-card__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--cp-rule);
  padding-top: 0.85rem;
  margin-top: auto;
}
.partner-card__actions form { margin: 0; display: inline; }

/* Bible-aware badge variant — quiet success-tone treatment to read as
   metadata, not a call to action. Sits alongside the gold/oxblood badges. */
.badge-cp.badge-bible {
  color: var(--cp-success);
  background: rgba(79, 117, 86, 0.10);
  border-color: rgba(79, 117, 86, 0.28);
}
/* "Suggested" chip on the chapter-submit picker — partners matched to the
   project's work type + genres. Oxblood to read as a gentle recommendation. */
.badge-cp.badge-suggested {
  color: var(--cp-oxblood);
  background: rgba(122, 38, 48, 0.09);
  border-color: rgba(122, 38, 48, 0.26);
}

/* Quiet link to the archived-partners page, shown only when at least
   one is archived. Sits below all sections, deliberately understated. */
.partner-archived-link {
  margin: 3rem 0 0;
  text-align: center;
}
.partner-archived-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cp-muted);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
  transition: color 160ms ease, border-color 160ms ease;
}
.partner-archived-link a:hover {
  color: var(--cp-oxblood);
  border-bottom-color: var(--cp-oxblood);
}

/* Empty hint when the user has no forks or customs yet. */
.partner-empty-hint {
  margin-top: 2.5rem;
  padding: 2rem 1.75rem;
  border: 1px dashed var(--cp-rule-strong);
  border-radius: var(--radius-lg);
  background: var(--cp-ivory);
  text-align: center;
}
.partner-empty-hint .prose {
  margin: 0;
  font-family: var(--cp-font-serif);
  font-size: 1.05rem;
  color: var(--cp-ink-soft);
}
.partner-empty-hint a { color: var(--cp-oxblood); }


.ghost-link {
  font-size: 0.86rem;
  color: var(--cp-muted);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.ghost-link:hover {
  color: var(--cp-oxblood);
  border-bottom-color: var(--cp-oxblood);
}
.ghost-link-danger:hover { color: var(--cp-danger); border-bottom-color: var(--cp-danger); }

.btn-ghost {
  background: transparent;
  color: var(--cp-ink);
  border: 1px solid var(--cp-rule-strong);
  padding: 0.4rem 0.95rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.86rem;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  text-decoration: none;
}
.btn-ghost:hover {
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
}

/* Partner detail page — system prompt display + action row. The
   .meta line in the page-head carries badges + tier chip, so the
   detail body focuses on the prompt itself. */
.partner-detail__voice {
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--cp-ink-soft);
  margin: 1rem 0 0;
  max-width: 62ch;
}
.partner-detail__prompt-section {
  margin-top: 2.75rem;
}
.section-head--tight { margin: 0 0 0.85rem; }
.partner-detail__prompt-note {
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
  color: var(--cp-muted);
  margin: 0 0 1rem;
  max-width: 60ch;
}
.partner-prompt-display {
  white-space: pre-wrap;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-left: 3px solid var(--cp-gold-2);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cp-ink);
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}
/* Prose variant of the prompt display block — used for the user-facing
   `public_description` on system defaults / forks. <pre> isn't right for
   prose; this variant drops the monospace fixed-line look. */
.partner-prompt-display--prose {
  font-family: var(--cp-font-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  white-space: normal;
}
.partner-prompt-display--prose p {
  margin: 0 0 0.85rem;
}
.partner-prompt-display--prose p:last-child { margin-bottom: 0; }
/* User-addendum variant — oxblood rail to read as "your additions" vs
   the gold rail used for built-in content. */
.partner-prompt-display--addendum {
  border-left-color: var(--cp-oxblood);
  background: var(--cp-ivory);
}

/* Read-only "what this partner does" summary on the customize page.
   Sits between the page head and the editable form so the user has
   context for what they're adding instructions to. */
.partner-builtin-summary {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem 1.1rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-left: 3px solid var(--cp-gold-2);
  border-radius: var(--radius-md);
}
.partner-builtin-summary .eyebrow { margin-bottom: 0.5rem; }
.partner-builtin-summary__body {
  font-family: var(--cp-font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cp-ink-soft);
}
.partner-builtin-summary__body p { margin: 0 0 0.65rem; }
.partner-builtin-summary__body p:last-child { margin-bottom: 0; }

/* Compact info block above the addendum textarea in fork-edit mode.
   Explains why the system_prompt field isn't shown. */
.partner-addendum-block .help { margin-top: 0.4rem; }

/* Addendum textarea — smaller than the full system_prompt area; the
   user is layering instructions on, not writing a full prompt. */
.persona-addendum-textarea,
form.cp-form .persona-addendum-textarea {
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 8rem;
}
.partner-detail__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cp-rule);
}
.partner-detail__actions > p { width: 100%; }

/* Edit / paste / wizard forms */
.persona-edit-form .persona-prompt-textarea,
form.cp-form .persona-prompt-textarea {
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 22rem;
}
.form-field-check { margin-bottom: 1.4rem; }
.cp-check-label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cp-ink);
}
.cp-check-label input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--cp-oxblood);
}
.cp-check-label .help { color: var(--cp-muted); font-weight: 400; }

/* Partner-create page — underline-style mode tabs above a card panel.
   Clean editorial tabs (no chunky boxes), with a subtle oxblood
   underline marking the active tab. The descriptive intro copy moves
   into the panel itself so the tab strip stays uncluttered. */
.partner-mode-tabs {
  display: flex;
  gap: 1.75rem;
  margin: 2rem 0 0;
  border-bottom: 1px solid var(--cp-rule);
  padding: 0 0.25rem;
}
.partner-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.15rem 0.95rem;
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  color: var(--cp-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;          /* overlap the strip border */
  transition: color 160ms ease, border-color 160ms ease;
}
.partner-mode-tab i {
  font-size: 1rem;
  color: var(--cp-muted);
  transition: color 160ms ease;
}
.partner-mode-tab:hover,
.partner-mode-tab:focus-visible {
  color: var(--cp-ink);
  outline: none;
}
.partner-mode-tab:hover i,
.partner-mode-tab:focus-visible i { color: var(--cp-oxblood); }
.partner-mode-tab--active {
  color: var(--cp-ink);
  border-bottom-color: var(--cp-oxblood);
}
.partner-mode-tab--active i { color: var(--cp-oxblood); }

/* Card panel that holds the create / edit form. Shared by the new-
   partner wizard, the new-partner paste form, and the persona edit
   form so they all read as the same surface. */
.partner-form-panel {
  margin-top: 1.5rem;
  padding: 1.75rem 2rem 1.5rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--cp-shadow-sm);
}
.partner-form-panel__intro {
  font-family: var(--cp-font-serif);
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--cp-ink-soft);
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cp-rule);
  max-width: 62ch;
}

/* Compatibility for inline form wrappers used by the wizard / paste /
   edit forms — they live inside .partner-form-panel and should not
   reapply background or padding. */
.wizard-panel,
.paste-panel { margin: 0; }
.wizard-panel { margin-top: 0; }
@media (max-width: 640px) {
  .partner-form-panel { padding: 1.35rem 1.25rem 1.2rem; }
  .partner-mode-tabs { gap: 1.25rem; }
}
.wizard-error {
  background: rgba(162, 58, 58, 0.08);
  color: var(--cp-danger);
  border: 1px solid rgba(162, 58, 58, 0.3);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}
.wizard-spinner {
  display: none;
  align-items: center;
  gap: 0.55rem;
  color: var(--cp-muted);
  font-size: 0.9rem;
  margin-left: 0.5rem;
}
.wizard-spinner.htmx-request { display: inline-flex; }
.wizard-spinner.htmx-indicator.htmx-request { display: inline-flex; }

.wizard-review-head { margin-bottom: 1.5rem; }
.wizard-review-title {
  font-family: var(--cp-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

/* Auth pages */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  min-height: calc(100vh - 200px);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: 16px;
  padding: 2.5rem 2.25rem 2.25rem;
  box-shadow: var(--cp-shadow-lg);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cp-oxblood) 0%, var(--cp-gold) 100%);
}
.auth-card .auth-eyebrow {
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cp-gold-2);
  margin: 0 0 0.75rem;
}
.auth-card h1 {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  color: var(--cp-ink);
}
.auth-card .auth-sub {
  font-family: var(--cp-font-serif);
  color: var(--cp-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}
.auth-card .auth-footer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--cp-muted);
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cp-rule);
}
.auth-card .auth-footer a { color: var(--cp-oxblood); }

/* Bible page refinements (Bootstrap overlay) */
.bible-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* Same responsive logic as .app-card-list: more columns on wider canvases,
   minimum card width keeps things readable. Bible entries get longer
   (descriptions, source excerpts) so the floor is slightly higher (300px). */
@media (min-width: 768px) {
  .bible-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Legacy / preserved styles below
   --------------------------------------------------------------------------- */

/* Hero (old) — preserved for any unconverted templates */
.hero h1 { font-family: var(--cp-font-display); font-size: clamp(1.75rem, 2.5vw, 2.25rem); margin-bottom: 1rem; }
.hero .lede { font-family: var(--cp-font-serif); font-size: 1.15rem; line-height: 1.65; color: var(--cp-ink); }
/* Note: container widths are defined once in the "Container widths" block
   above. Don't add another `main.container { max-width: ... }` declaration
   here — duplicates were the source of a layout bug where the legacy 65ch
   rule was winning over the wider value and capping every default-class
   page at ~520px on wide monitors. */

.error { color: var(--cp-danger); }

/* Page header pattern */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-header h1, .page-header h2 { margin: 0; }
.page-header [role="button"] { white-space: nowrap; }

/* Project / chapter lists */
.project-list, .chapter-list { list-style: none; padding: 0; }
.project-list li, .chapter-list li {
  border-top: 1px solid var(--cp-rule);
  padding: 1rem 0;
}
.project-list li:last-child, .chapter-list li:last-child { border-bottom: 1px solid var(--cp-rule); }
.project-list a, .chapter-list a { text-decoration: none; color: var(--cp-ink); }
.project-list a:hover, .chapter-list a:hover { color: var(--cp-oxblood); }
.project-list p, .chapter-list p { margin: 0.25rem 0 0; }

/* Forms */
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.form-actions .muted { text-decoration: none; }
.form-actions .muted:hover { text-decoration: underline; }

.empty { text-align: center; padding: 3rem 0; }

.chapter-textarea {
  font-family: var(--cp-font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  min-height: 60vh;
}

/* Version strip — chapter draft history on version_detail.html */
.version-strip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
  padding: 0.75rem 1rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
}
.version-strip__label {
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
  flex-shrink: 0;
}
.version-strip__pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.version-strip__pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-pill);
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cp-ink-soft);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
a.version-strip__pill:hover {
  background: var(--cp-paper);
  color: var(--cp-ink);
  border-color: var(--cp-rule-strong);
}
.version-strip__pill--active {
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
  border-color: var(--cp-oxblood);
  cursor: default;
}
.version-strip__pill-meta {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.7;
}

/* Bible page — top-level tab strip (Updates / Entries) */
.bible-toptabnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0.4rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-pill);
  width: fit-content;
}
.bible-toptabnav button {
  background: transparent;
  border: 0;
  color: var(--cp-ink-soft);
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  width: auto;
}
.bible-toptabnav button:hover { color: var(--cp-ink); }
.bible-toptabnav button.active {
  background: var(--cp-ivory);
  color: var(--cp-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--cp-rule-strong) inset;
}
.bible-toptab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bible-toptab__count--quiet {
  background: transparent;
  color: var(--cp-ink-soft);
  font-weight: 600;
  min-width: auto;
  padding: 0;
}
.bible-toptabnav button.active .bible-toptab__count--quiet {
  color: var(--cp-ink);
}

/* Tighter heading inside a tabpanel — the top tab already labels the area. */
.section-head--tight { margin-bottom: 1.25rem; }
.section-head--tight h2 {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}
.app-empty--inset {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* Bible page — tabnav + cards */
.bible-tabnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--cp-rule);
  margin-bottom: 1.5rem;
}
.bible-tabnav button {
  background: transparent;
  color: var(--cp-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.9rem;
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 0;
  width: auto;
}
.bible-tabnav button:hover { color: var(--cp-ink); }
.bible-tabnav button.active {
  color: var(--cp-ink);
  border-bottom-color: var(--cp-oxblood);
  font-weight: 500;
}

.bible-cards { display: flex; flex-direction: column; gap: 1rem; }
.bible-add-link { margin-top: 1.25rem; }
.bible-add-link a { text-decoration: none; color: var(--cp-muted); }
.bible-add-link a:hover { color: var(--cp-oxblood); }

.entry-card {
  border: 1px solid var(--cp-rule);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--cp-ivory);
  position: relative;
}

/* Brief "Saved" flash after an HTMX inline-edit save. CSS-only:
   the server renders the card with `entry-card--just-saved` once on the
   save response; the animation runs once and then settles. */
.entry-card--just-saved {
  animation: cp-card-flash-border 1.6s ease-out 1;
}
@keyframes cp-card-flash-border {
  0%   { box-shadow: 0 0 0 3px rgba(79, 117, 86, 0.45); }
  100% { box-shadow: 0 0 0 0   rgba(79, 117, 86, 0); }
}
.entry-card__saved-flash {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--cp-success);
  color: var(--cp-ivory);
  font-family: var(--cp-font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem 0.2rem;
  border-radius: var(--radius-pill);
  pointer-events: none;
  animation: cp-saved-flash 1.8s ease-out 1 forwards;
}
@keyframes cp-saved-flash {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.95); }
  15%  { opacity: 1; transform: translateY(0)    scale(1); }
  75%  { opacity: 1; transform: translateY(0)    scale(1); }
  100% { opacity: 0; transform: translateY(-2px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .entry-card--just-saved { animation: none; }
  .entry-card__saved-flash { animation: none; opacity: 1; }
}
.entry-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.entry-card-header h3 { margin: 0 0 0.1rem; font-size: 1.15rem; }
.entry-card-header h3 + p { margin: 0; }
.entry-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.entry-actions button {
  background: transparent;
  border: 1px solid var(--cp-rule);
  color: var(--cp-muted);
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 4px;
  width: auto;
}
.entry-actions button:hover { color: var(--cp-ink); border-color: var(--cp-muted); }
.entry-actions button.danger-text:hover { color: var(--cp-danger); border-color: var(--cp-danger); }

.entry-section-label {
  font-family: var(--cp-font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-muted);
  margin: 1rem 0 0.25rem;
}

.kv-list { list-style: none; padding: 0; margin: 0.25rem 0; }
.kv-list li { padding: 0.1rem 0; }

.entry-extras, .entry-sources { margin-top: 1rem; border-top: 1px dashed var(--cp-rule); padding-top: 0.5rem; }
.entry-sources blockquote {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--cp-rule);
  font-style: italic;
}
.entry-sources blockquote footer { font-style: normal; margin-top: 0.25rem; }
.entry-card-editing label { margin-top: 0.75rem; }
.entry-card-editing label:first-of-type { margin-top: 0; }

/* Chapter processing polling page */
.processing-panel { margin-top: 2rem; }

/* Import progress bar: morph-swapped in place, so the width change animates
   smoothly between polls instead of snapping. Explicit transition in case a
   Bootstrap override drops the default. */
.import-progress__bar { transition: width 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
  .import-progress__bar { transition: none; }
  .progress-bar-animated { animation: none; }
}

.processing-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.processing-steps .step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--cp-font-body);
  color: var(--cp-muted);
  transition: color 200ms ease;
}
.processing-steps .step-icon {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--cp-rule);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
}
.processing-steps .step--running { color: var(--cp-ink); }
.processing-steps .step--running .step-icon {
  border-color: color-mix(in srgb, var(--cp-oxblood) 25%, transparent);
  border-top-color: var(--cp-oxblood);
  animation: cp-spin 0.7s linear infinite;
}
.processing-steps .step--complete { color: var(--cp-ink); }
.processing-steps .step--complete .step-icon {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
}
.processing-steps .step--complete .step-icon::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.1rem;
  width: 0.3rem;
  height: 0.55rem;
  border: 1.5px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(40deg);
}
.processing-steps .step--failed { color: var(--cp-danger); }
.processing-steps .step--failed .step-icon { border-color: var(--cp-danger); background: var(--cp-danger); }
.processing-steps .step--failed .step-icon::after {
  content: "×";
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: bold;
}
.processing-steps .step--skipped { color: var(--cp-muted); font-style: italic; }

@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Canonical app spinner. One ring used everywhere (buttons, headings, status
   chips, htmx indicators) so loading states are visually consistent.
   - `currentColor` → adapts to context (white on the oxblood button, oxblood
     on cream pages, muted in subtle indicators) with no per-use color rule.
   - `em`-sized → scales with the surrounding text; `--sm` for tight chips.
   - A faint full track with a solid arc travelling around it — more refined
     than a hard-gap ring. Transform-only animation, so it's cheap and smooth.
   --------------------------------------------------------------------------- */
.cp-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  border: 0.13em solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: cp-spin 0.7s linear infinite;
}
.cp-spinner--sm { width: 0.8em; height: 0.8em; border-width: 0.12em; }
.cp-spinner--accent { color: var(--cp-oxblood); }
@media (prefers-reduced-motion: reduce) {
  /* Don't strobe — slow to a calm rotation that still reads as "working". */
  .cp-spinner { animation-duration: 2.4s; }
}

.processing-steps .step-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
.processing-steps .step-detail { font-size: 0.85rem; }

.persona-progress {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.persona-progress .persona {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--cp-muted);
}
.persona-progress .persona-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cp-rule);
  flex-shrink: 0;
}
.persona-progress .persona--running .persona-dot {
  background: var(--cp-oxblood);
  animation: cp-pulse 1.2s ease-in-out infinite;
}
.persona-progress .persona--running { color: var(--cp-ink); }
.persona-progress .persona--complete .persona-dot { background: var(--cp-oxblood); }
.persona-progress .persona--complete { color: var(--cp-ink); }
.persona-progress .persona--failed .persona-dot { background: var(--cp-danger); }
.persona-progress .persona--failed { color: var(--cp-danger); }

@keyframes cp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.stalled-hint {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cp-warning);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--cp-gold-soft);
}
.stalled-hint pre {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  padding: 0.4rem 0.6rem;
  margin: 0.5rem 0;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Critique view — partner filter cards + unified severity-ordered feed
   --------------------------------------------------------------------------- */

.critique-board { margin: 1.25rem 0 2rem; }

/* At-a-glance counters above the partner grid */
.critique-glance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  padding: 0.95rem 1.25rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  margin-bottom: 1.75rem;
}
.critique-glance-stat {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.critique-glance-num {
  font-family: var(--cp-font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--cp-ink);
  line-height: 1;
}
.critique-glance-lbl {
  color: var(--cp-muted);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.critique-glance-rule {
  width: 1px;
  height: 1.6rem;
  background: var(--cp-rule);
}
.critique-glance-sev {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Section titles inside the critique board */
.critique-section-title {
  font-family: var(--cp-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  margin: 1.75rem 0 0.4rem;
}
.critique-section-title-feed {
  margin: 2.5rem auto 0.4rem;
  max-width: 1024px;
}
.critique-section-hint { margin-bottom: 1rem; }

/* Severity pills — used in the glance bar, partner cards, and findings.
   Sizes tune themselves via the surrounding context. */
.sev-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.sev-pill-high {
  color: var(--cp-danger);
  background: rgba(162, 58, 58, 0.10);
  border: 1px solid rgba(162, 58, 58, 0.22);
}
.sev-pill-medium {
  color: var(--cp-gold-2);
  background: var(--cp-gold-soft);
  border: 1px solid rgba(176, 136, 56, 0.28);
}
.sev-pill-low {
  color: var(--cp-muted);
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
}

/* Partner cards — clickable filter grid */
.partner-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
  margin: 0.5rem 0 1.5rem;
}
.partner-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
  padding: 1rem 1.1rem 1.05rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--cp-font-body);
  color: var(--cp-ink);
  transition: border-color 140ms ease, box-shadow 140ms ease,
              background-color 140ms ease, opacity 140ms ease, transform 140ms ease;
  /* Override default button-reset width on this card */
  width: 100%;
}
.partner-card:hover {
  border-color: var(--cp-rule-strong);
  box-shadow: var(--cp-shadow-sm);
  transform: translateY(-1px);
}
.partner-card-active {
  border-color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  box-shadow: 0 0 0 2px rgba(122, 38, 48, 0.10), var(--cp-shadow-sm);
}
.partner-card-active:hover { border-color: var(--cp-oxblood-2); }
.partner-card-dim { opacity: 0.55; }
.partner-card-dim:hover { opacity: 0.85; }

.partner-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.partner-card-name {
  font-family: var(--cp-font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cp-ink);
}
.partner-card-state {
  font-size: 0.76rem;
  color: var(--cp-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.partner-card-state-fail {
  color: var(--cp-danger);
  font-weight: 600;
}
.partner-card-sev {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.partner-card-summary {
  font-family: var(--cp-font-serif);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--cp-ink-soft);
  margin: 0;
  /* Clamp the prose summary to a sane height so cards stay aligned */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.partner-card-summary-muted { color: var(--cp-muted); font-style: italic; }

.critique-retry-row { margin: 1.5rem 0 0; }
.critique-retry-row form { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }


/* Findings feed — one severity-ordered list, partner chip on each card.
   Single column always (cards vary in length; multi-column staggers
   awkwardly). Capped at a magazine-column width and centered within the
   wider container so the page reads as a focused reading flow rather
   than a stranded-narrow list. */
.findings-feed {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1024px;
}
.finding {
  border: 1px solid var(--cp-rule);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: 1.35rem 1.4rem 1.25rem;
  background: var(--cp-ivory);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.finding:hover {
  box-shadow: var(--cp-shadow-md);
  transform: translateY(-1px);
}
.finding--high { border-left-color: var(--cp-danger); }
.finding--medium { border-left-color: var(--cp-gold-2); }
.finding--low { border-left-color: var(--cp-rule-strong); }

.finding-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.finding-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-muted);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--cp-rule);
  border-radius: 4px;
  white-space: nowrap;
}
.finding-partner-chip {
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--cp-font-body);
  color: var(--cp-ink-soft);
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  margin-left: auto; /* push to the right of the head row */
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  white-space: nowrap;
}
.finding-partner-chip:hover {
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
}
.finding-partner-chip-active {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
  color: var(--cp-ivory);
}
.finding-partner-chip-active:hover {
  background: var(--cp-oxblood-2);
  border-color: var(--cp-oxblood-2);
  color: var(--cp-ivory);
}

.finding-title {
  font-family: var(--cp-font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.002em;
  margin: 0 0 0.3rem;
  color: var(--cp-ink);
}
.finding-explanation { margin: 0.25rem 0; }
.finding p.prose { margin: 0.4rem 0; }
.finding blockquote {
  margin: 0.5rem 0;
  padding: 0.4rem 0.9rem;
  border-left: 2px solid var(--cp-rule);
  font-style: italic;
  font-family: var(--cp-font-serif);
  line-height: 1.6;
  color: var(--cp-ink);
}
.finding-suggestion { margin: 0.4rem 0 0; }

/* --- Per-finding disposition (Resolved / Dismissed) ---------------------- */
.finding-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--cp-rule);
}
.finding-act {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--cp-font-body);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--cp-rule);
  background: var(--cp-ivory);
  color: var(--cp-ink-soft);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.finding-act i { font-size: 0.8rem; }
.finding-act--resolve:hover {
  border-color: var(--cp-success);
  color: var(--cp-success);
  background: color-mix(in srgb, var(--cp-success) 8%, var(--cp-ivory));
}
.finding-act--dismiss:hover {
  border-color: var(--cp-rule-strong);
  color: var(--cp-ink);
}

/* "All handled" confirmation when the open feed empties out */
.findings-allclear {
  max-width: 1024px;
  margin: 0.5rem auto 0;
  padding: 0.9rem 1.1rem;
  background: color-mix(in srgb, var(--cp-success) 7%, var(--cp-ivory));
  border: 1px solid color-mix(in srgb, var(--cp-success) 35%, var(--cp-rule));
  border-radius: 0.55rem;
  color: var(--cp-ink-soft);
}
.findings-allclear i { color: var(--cp-success); }

/* Collapsible "Done" section — dispositioned findings, never lost */
.findings-done {
  max-width: 1024px;
  margin: 1.5rem auto 0;
  border-top: 1px solid var(--cp-rule);
  padding-top: 1rem;
}
.findings-done__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  padding: 0.2rem 0;
  cursor: pointer;
  font-family: var(--cp-font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cp-ink);
}
.findings-done__toggle:hover { color: var(--cp-oxblood); }
.findings-done__breakdown { font-weight: 500; margin-left: 0.15rem; }
.findings-done__body { margin-top: 0.75rem; }
.findings-done__group {
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cp-muted);
  margin: 0.9rem 0 0.4rem;
}
.findings-done__list { list-style: none; margin: 0; padding: 0; }
.finding-done-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cp-rule) 60%, transparent);
}
.finding-done-row__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cp-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finding-done-row__partner { flex: 0 0 auto; }
.finding-reopen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cp-oxblood);
}
.finding-reopen:hover { text-decoration: underline; }

/* Empty-state shown when filtering to a partner with 0 findings or a fail */
.findings-empty {
  max-width: 1024px;
  margin: 0 auto;
  padding: 1.5rem 1.6rem;
  background: var(--cp-ivory);
  border: 1px dashed var(--cp-rule);
  border-radius: 12px;
  text-align: center;
}
.findings-empty-fail {
  border-color: rgba(162, 58, 58, 0.3);
  background: rgba(162, 58, 58, 0.04);
}
.findings-empty .prose { margin: 0; }
.findings-empty form { margin-top: 1rem; }

/* Full prose summary block — shown above the findings feed when the user
   filters to a single partner. Cards stay truncated for the gestalt view. */
.partner-summary-full {
  margin: 2rem auto 0.5rem;
  max-width: 1024px;
  padding: 1.4rem 1.6rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 3px solid var(--cp-oxblood);
  border-radius: 10px;
}
.partner-summary-full .eyebrow {
  margin: 0 0 0.6rem;
  color: var(--cp-oxblood);
}
.partner-summary-full .prose {
  margin: 0;
  font-family: var(--cp-font-serif);
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--cp-ink);
}
.partner-summary-full .prose p:last-child { margin-bottom: 0; }

/* Conflict list */
.conflicts-section {
  margin: 3rem auto 0;
  max-width: 1024px;
  border-top: 1px solid var(--cp-rule);
  padding-top: 1.5rem;
}

/* "Bible changes from this draft" — shown on the chapter version page so
   the writer sees exactly what the submitted version added or revised in
   the bible. Sits above the conflicts section (related but distinct:
   changes = what landed; conflicts = what needs resolving). */
.bible-changes-section {
  margin: 3rem auto 0;
  max-width: 1024px;
  border-top: 1px solid var(--cp-rule);
  padding-top: 1.5rem;
}
.bible-changes-section h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }

.bible-changes-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.bible-change {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem 1.1rem;
}
.bible-change--new      { border-left-color: var(--cp-gold-2); }
.bible-change--updated  { border-left-color: var(--cp-oxblood); }
.bible-change--mentioned { border-left-color: var(--cp-rule-strong); opacity: 0.85; }

.bible-change__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.bible-change__kind {
  font-family: var(--cp-font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.bible-change__kind--new {
  color: var(--cp-gold-2);
  background: var(--cp-gold-soft);
  border-color: rgba(176, 136, 56, 0.30);
}
.bible-change__kind--updated {
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  border-color: rgba(122, 38, 48, 0.25);
}
.bible-change__kind--mentioned {
  color: var(--cp-ink-soft);
  background: var(--cp-paper-2);
  border-color: var(--cp-rule);
}
.bible-change__desc {
  margin: 0.25rem 0 0;
  color: var(--cp-ink-soft);
  font-size: 0.97rem;
}
.bible-change__label {
  margin: 0.4rem 0 0.2rem;
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
}
.bible-change__fields {
  list-style: none;
  padding: 0;
  margin: 0 0 0.45rem;
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
  color: var(--cp-ink);
}
.bible-change__fields li { padding: 0.15rem 0; }
.bible-change__fields strong { font-weight: 600; }
.bible-change__old {
  color: var(--cp-ink-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(15, 17, 10, 0.30);
}
.bible-change__new {
  font-weight: 600;
  color: var(--cp-ink);
}
.bible-change__excerpt {
  margin: 0.5rem 0 0;
  padding: 0.35rem 0.85rem;
  border-left: 2px solid var(--cp-rule);
  font-family: var(--cp-font-serif);
  font-style: italic;
  color: var(--cp-ink-soft);
  font-size: 0.92rem;
}

/* Help note shown only on the chapter revise form, explaining the
   strict v2-wins bible semantics so writers know to include everything
   they want tracked in the new draft. Two-column layout: icon left,
   stacked title + detail on the right so the takeaway reads at a glance. */
.revise-help {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-top: 1.1rem;
  padding: 0.95rem 1.1rem 0.85rem;
  background: var(--cp-gold-soft);
  border: 1px solid rgba(176, 136, 56, 0.28);
  border-left: 3px solid var(--cp-gold-2);
  border-radius: var(--radius-md);
  font-family: var(--cp-font-body);
}
.revise-help__icon {
  color: var(--cp-gold-2);
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.revise-help__body {
  min-width: 0;
  flex: 1;
}
.revise-help__title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--cp-ink);
  line-height: 1.4;
}
.revise-help__detail {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--cp-ink-soft);
}
.conflicts-section h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }

.conflict-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.conflict {
  border: 1px solid var(--cp-rule);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  background: var(--cp-ivory);
}
.conflict--hard_fact { border-left-color: var(--cp-danger); }
.conflict--soft_observation { border-left-color: var(--cp-oxblood); }
.conflict--structural { border-left-color: var(--cp-muted); }
.conflict-header strong { font-family: var(--cp-font-body); }
.conflict-values {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.75rem;
  margin: 0.5rem 0;
}
.conflict-values dt { color: var(--cp-muted); font-size: 0.875rem; }
.conflict-values dd { margin: 0; }
.conflict blockquote {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.9rem;
  border-left: 2px solid var(--cp-rule);
  font-style: italic;
}
/* Conflict resolution action row. The first button ("Update bible") is the
   primary path 90% of the time — it gets the solid ink-on-cream treatment
   so the writer's eye lands there. The other two recede to muted text
   buttons; they're still discoverable but no longer competing. */
.conflict-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.85rem; align-items: center; }
.conflict-actions .conflict-primary {
  background: var(--cp-ink);
  border: 1px solid var(--cp-ink);
  color: var(--cp-ivory);
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.conflict-actions .conflict-primary:hover {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
  color: var(--cp-ivory);
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-sm);
}
.conflict-actions button:not(.conflict-primary) {
  background: transparent;
  border: 1px solid transparent;
  color: var(--cp-muted);
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  border-radius: var(--radius-pill);
  width: auto;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.conflict-actions button:not(.conflict-primary):hover {
  color: var(--cp-ink);
  background: rgba(20, 16, 8, 0.04);
}
.conflict.conflict--resolved {
  border-left-color: var(--cp-rule);
  background: transparent;
  padding: 0.5rem 1rem;
}
.conflict.conflict--resolved p { margin: 0; }

.chapter-text-toggle {
  margin: 3rem auto 0;
  max-width: 1024px;
  border-top: 1px solid var(--cp-rule);
  padding-top: 1rem;
}
.chapter-text-toggle summary {
  cursor: pointer;
  color: var(--cp-muted);
  font-family: var(--cp-font-body);
}
.chapter-text-toggle .chapter-prose { margin-top: 1rem; }

/* Branded error pages (404, 500). Same paper aesthetic as the rest of
   the app — they shouldn't feel like a different product. */
.cp-error-page {
  max-width: 56ch;
  margin: var(--space-7) auto var(--space-10);
  text-align: center;
}
.cp-error-page .ornament {
  font-family: var(--cp-font-display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--cp-gold);
  margin: 0 0 var(--space-4);
  line-height: 1;
  letter-spacing: 0.5rem;
}
.cp-error-page__title {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  color: var(--cp-ink);
}
.cp-error-page__title em {
  font-style: italic;
  color: var(--cp-oxblood);
}
.cp-error-page__lede {
  font-family: var(--cp-font-serif);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--cp-ink-soft);
  margin: 0 auto var(--space-4);
  max-width: 48ch;
}
.cp-error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Skeleton preview — shimmer placeholders shown on the processing page
   so the writer sees the shape of what's coming. Single shimmer animation
   on each bar; pauses for reduced-motion. */
.cp-skeleton-preview {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--cp-rule);
}
.cp-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.cp-skeleton-card {
  padding: 1.2rem 1.3rem 1.1rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cp-skeleton-bar {
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--cp-rule) 0%,
    var(--cp-paper-2) 50%,
    var(--cp-rule) 100%
  );
  background-size: 200% 100%;
  animation: cp-skeleton-shimmer 1.8s ease-in-out infinite;
  opacity: 0.7;
}
.cp-skeleton-bar--title { height: 1.05rem; width: 65%; opacity: 0.85; }
.cp-skeleton-bar--meta  { height: 0.55rem; width: 35%; }
.cp-skeleton-bar--short { width: 80%; }
@keyframes cp-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-skeleton-bar { animation: none; }
}

/* Reader-mode toggle (chapter text on version_detail). The default render
   matches the rest of the page; switching to "reader" gives a narrow
   serif column with extra leading — the way the writer's own draft would
   feel in a printed proof. */
/* Chapter text view (version_detail) — a single serif, page-like reading
   column shown beside the feedback. No display-mode toggle: one well-made
   view beats two near-identical ones. */
.chapter-prose {
  font-family: var(--cp-font-serif);
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--cp-ink);
  white-space: pre-wrap;
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-7) clamp(var(--space-6), 6vw, var(--space-10));
  background:
    linear-gradient(180deg, rgba(176, 136, 56, 0.05), transparent 12%, transparent 88%, rgba(176, 136, 56, 0.05)),
    var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--cp-shadow-md);
}

/* --- Credit balance nav chip (billing/_nav_credits.html) ------------------ */
/* Credit chip in the nav. Pill-shaped with: coin icon, balance ("/ allowance"
   when on a plan), and a colored fill bar showing percentage of monthly plan
   remaining. The bar's `--bar-color` swaps green / yellow / red via the
   .cp-credit-chip--{high,medium,low} modifier classes. */
.cp-credit-chip {
  --bar-color: var(--cp-gold-2);
  --bar-track: rgba(176, 136, 56, 0.20);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--cp-ivory);
  color: var(--cp-ink);
  border: 1px solid var(--cp-rule-strong);
  text-decoration: none;
  font-family: var(--cp-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 17, 10, 0.04);
  transition: background-color 140ms ease, border-color 140ms ease,
              box-shadow 140ms ease, transform 140ms ease;
}
.cp-credit-chip:hover {
  background: var(--cp-paper-2);
  border-color: var(--bar-color);
  color: var(--cp-ink);
  text-decoration: none;
  box-shadow: 0 2px 8px -2px rgba(15, 17, 10, 0.12);
  transform: translateY(-1px);
}
.cp-credit-chip__icon {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--bar-color);
  flex-shrink: 0;
}
.cp-credit-chip__amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.cp-credit-chip__num {
  color: var(--cp-ink);
  font-weight: 700;
}
.cp-credit-chip__denom {
  color: var(--cp-ink-soft);
  font-weight: 500;
  font-size: 0.78rem;
}
.cp-credit-chip__bar {
  display: inline-block;
  width: 54px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--bar-track);
  overflow: hidden;
  flex-shrink: 0;
}
.cp-credit-chip__bar-fill {
  display: block;
  height: 100%;
  background: var(--bar-color);
  border-radius: inherit;
  transition: width 320ms ease, background-color 220ms ease;
}

/* Level modifiers — swap the bar/icon/border accent colour. The chip body
   stays ivory so the nav doesn't visually scream until we're actually in
   the red zone. */
.cp-credit-chip--high {
  --bar-color: var(--cp-success);
  --bar-track: rgba(79, 117, 86, 0.18);
}
.cp-credit-chip--medium {
  --bar-color: var(--cp-warning);
  --bar-track: rgba(212, 168, 67, 0.22);
}
.cp-credit-chip--low {
  --bar-color: var(--cp-danger);
  --bar-track: rgba(162, 58, 58, 0.20);
  background: rgba(162, 58, 58, 0.06);
  border-color: rgba(162, 58, 58, 0.32);
}
.cp-credit-chip--low .cp-credit-chip__num { color: var(--cp-danger); }

/* --- Generic info card (account page, insufficient-credits page) ---------
   Warm ivory, hairline cream rule, soft inset shadow — same family as
   .app-card but no oxblood rail (cp-card is a display container, not a
   clickable item in a list). */
.cp-card {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(20, 16, 8, 0.04),
    0 18px 40px -28px rgba(20, 16, 8, 0.18);
  position: relative;
  overflow: hidden;
}
/* A top-edge gold filament — purely decorative, but matches the literary
   metaphor (book spine / page edge). 1px hairline; doesn't fight content. */
.cp-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(176, 136, 56, 0.45) 18%,
    rgba(176, 136, 56, 0.55) 50%,
    rgba(176, 136, 56, 0.45) 82%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}
.cp-card-warm {
  background: var(--cp-gold-soft);
  border-color: rgba(176, 136, 56, 0.35);
}

/* Eyebrow color variants */
.eyebrow--danger { color: var(--cp-danger); }
.eyebrow--success { color: var(--cp-success); }

/* Inline alert (paper-toned variants instead of Bootstrap defaults) */
.cp-alert {
  padding: 1.25rem 1.5rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 4px solid var(--cp-rule-strong);
  border-radius: 12px;
}
.cp-alert--danger {
  background: rgba(162, 58, 58, 0.05);
  border-color: rgba(162, 58, 58, 0.22);
  border-left-color: var(--cp-danger);
}
.cp-alert--warning {
  background: rgba(212, 168, 67, 0.08);
  border-color: rgba(212, 168, 67, 0.30);
  border-left-color: var(--cp-warning);
}

/* ============================================================
   Flash messages (django.contrib.messages)
   ============================================================
   Replaces Bootstrap's stock .alert .alert-success etc. with an editorial
   treatment: ivory paper card, status-colored left rail, a small icon
   that hints the tag, and an italic serif body that pairs with the rest
   of the design. Sits at the top of <main> via the messages-region
   wrapper in base.html.
*/
.messages-region {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 2rem;
}
.messages-region .alert {
  position: relative;
  margin: 0;
  padding: 0.95rem 1.15rem 0.95rem 3rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 4px solid var(--cp-rule-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--cp-shadow-sm);
  font-family: var(--cp-font-body);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--cp-ink);
}
.messages-region .alert::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}
.messages-region .alert-success {
  background: var(--cp-gold-soft);
  border-color: rgba(176, 136, 56, 0.28);
  border-left-color: var(--cp-gold-2);
  color: var(--cp-ink);
}
.messages-region .alert-success::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%238a6b2b' d='M13.485 1.929a1 1 0 0 1 1.414 1.414L6.414 11.83a1 1 0 0 1-1.414 0L1.293 8.121a1 1 0 1 1 1.414-1.414L5.707 9.707l7.778-7.778z'/></svg>");
}
.messages-region .alert-info {
  background: rgba(110, 103, 84, 0.06);
  border-color: var(--cp-rule);
  border-left-color: var(--cp-muted);
  color: var(--cp-ink-soft);
}
.messages-region .alert-info::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%235b5240' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm.93 5.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469L6.6 10.91c-.18.836.1 1.229.751 1.229.504 0 1.094-.234 1.36-.554l.088-.418c-.184.162-.454.227-.633.227-.255 0-.347-.179-.281-.491l1.045-4.295zM8 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/></svg>");
}
.messages-region .alert-warning {
  background: rgba(212, 168, 67, 0.10);
  border-color: rgba(212, 168, 67, 0.32);
  border-left-color: var(--cp-warning);
}
.messages-region .alert-warning::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23b08838' d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>");
}
.messages-region .alert-error,
.messages-region .alert-danger {
  background: rgba(162, 58, 58, 0.08);
  border-color: rgba(162, 58, 58, 0.28);
  border-left-color: var(--cp-danger);
  color: var(--cp-ink);
}
.messages-region .alert-error::before,
.messages-region .alert-danger::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23a23a3a' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm.93 4-1.86 0 .14 4.7h1.58L8.93 4Zm-.93 6.2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
}

/* Heading helper inside cards — replaces the inline-styled h2 callsites */
.cp-card__heading {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--cp-ink);
}
.cp-card__heading em {
  font-style: italic;
  color: var(--cp-oxblood);
}
.cp-detail-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.cp-detail-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(15, 17, 10, 0.10);
}
.cp-detail-list li:last-child { border-bottom: none; }
.cp-detail-list .label {
  font-family: var(--cp-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cp-ink-soft);
}
.cp-detail-list .value {
  font-family: var(--cp-font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cp-ink);
}

/* Prose paragraphs inside a card on a wide page cap at a comfortable
   reading width so long lines don't sprawl across a 1440px container. */
.cp-card__prose { max-width: 65ch; }

/* Date-range filter on the account page — a pill rail under the page head
   that scopes both spend-by-activity totals and the ledger entries. */
.account-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.25rem 0 0;
  padding: 0.65rem 0.85rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
}
.account-filter__label {
  font-family: var(--cp-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
  flex-shrink: 0;
}
.account-filter__pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
}
.account-filter__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--cp-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cp-ink-soft);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.account-filter__pill:hover {
  background: var(--cp-ivory);
  color: var(--cp-ink);
  text-decoration: none;
}
.account-filter__pill.is-active {
  background: var(--cp-ivory);
  color: var(--cp-ink);
  border-color: var(--cp-rule-strong);
  box-shadow: 0 1px 2px rgba(15, 17, 10, 0.06);
  cursor: default;
}

/* Account page top row: balance card + spend-by-activity paired side-by-side
   on wide screens, stacked on narrow. Both cards stretch to the same height
   via grid stretch so the row reads as a balanced dashboard. */
.account-summary-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .account-summary-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .account-summary-grid > .cp-card {
    margin: 0;
    height: 100%;
  }
}

/* Balance card — vertical flow with the Add-credits CTA pinned to the
   bottom-left so the card reads top-to-bottom: stat → context → action. */
.cp-card--balance {
  display: flex;
  flex-direction: column;
}
.cp-card--balance .display-figure { margin-bottom: 0.4rem; }
.cp-card--balance .meta { margin-top: 0.8rem; }
.cp-card--balance .account-balance-cta {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Plan metadata as a 2-column definition list, so labels and values
   sit in neat columns instead of running together on one wrapped line. */
.account-balance-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--cp-rule);
}
.account-balance-meta dt {
  font-family: var(--cp-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
  margin: 0;
  align-self: center;
}
.account-balance-meta dd {
  margin: 0;
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

.cp-detail-list--activity li {
  padding: 0.95rem 0;
  gap: 1.5rem;
  align-items: center;
  border-bottom-style: solid;
  border-bottom-color: var(--cp-rule);
}
.cp-detail-list--activity .label {
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--cp-ink);
}
.cp-detail-list--activity .value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: right;
}
.cp-detail-list--activity .value__credits {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cp-ink);
}
.cp-detail-list--activity .value__calls {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.display-figure {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 0;
  color: var(--cp-oxblood);
}
.display-figure__unit {
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-ink-soft);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* --- Ledger table -------------------------------------------------------- */
.cp-table {
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
  --bs-table-bg: transparent;
  --bs-table-color: var(--cp-ink);
  --bs-table-border-color: var(--cp-rule);
  --bs-table-striped-bg: rgba(176, 136, 56, 0.05);
  --bs-table-striped-color: var(--cp-ink);
  --bs-table-hover-bg: var(--cp-gold-soft);
  --bs-table-hover-color: var(--cp-ink);
  margin-bottom: 0;
}
.cp-table thead th {
  font-family: var(--cp-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-muted);
  border-bottom: 1px solid var(--cp-rule-strong);
  background: transparent;
  padding: 0.6rem 0.85rem;
  white-space: nowrap;
}
.cp-table tbody td {
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  border-color: rgba(217, 207, 179, 0.55);
  padding: 0.7rem 0.85rem;
  background: transparent;
}
.cp-table tbody tr:hover td { background: rgba(176, 136, 56, 0.07); }
.cp-amount-debit  { color: var(--cp-oxblood); font-weight: 600; }
.cp-amount-credit { color: var(--cp-success); font-weight: 600; }

/* Credit-estimate planning grid on the account page */
.cp-credit-grid thead th {
  vertical-align: bottom;
}
.cp-credit-grid thead th .cp-credit-grid__default-tag {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cp-gold-2);
}
.cp-credit-grid__row-label {
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cp-ink);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}
.cp-credit-grid__default {
  background: rgba(122, 38, 48, 0.04);
  border-left: 1px solid var(--cp-rule-strong);
  border-right: 1px solid var(--cp-rule-strong);
}
.cp-credit-grid tbody td.cp-credit-grid__default {
  font-weight: 600;
  color: var(--cp-ink);
}
.cp-credit-grid thead th.cp-credit-grid__default {
  color: var(--cp-ink);
  border-bottom-color: var(--cp-oxblood);
}
.cp-credit-grid tbody tr:last-child td.cp-credit-grid__default {
  border-bottom: 1px solid var(--cp-rule-strong);
}


/* ============================================================
   Project detail — manuscript layout: TOC + sidebar
   ============================================================
   Two-column on desktop (chapters as a typeset table of contents
   on the left, story-bible + manuscript stats on the right).
   Collapses to single column on narrower screens.
*/
.manuscript-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 992px) {
  .manuscript-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 3rem;
  }
}

.section-head--toc {
  margin-top: 0;
  margin-bottom: 1.75rem;
}
.section-head--sub {
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
}

/* The TOC itself. Counter is rendered explicitly via forloop.counter,
   so list-style is suppressed. Borders are razor-thin rules between
   entries — the look of a printed contents page. */
.manuscript-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cp-rule);
}
.toc-entry {
  position: relative;
  border-bottom: 1px solid var(--cp-rule);
}
.toc-entry__link,
.toc-entry__link--inert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.15rem 3rem 1.1rem 0;
  text-decoration: none;
  color: var(--cp-ink);
  transition: background-color 160ms ease, color 160ms ease;
}
.toc-entry__link:hover,
.toc-entry__link:focus-visible {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(176, 136, 56, 0.08) 30%,
    rgba(176, 136, 56, 0.04) 100%
  );
  color: var(--cp-ink);
}
.toc-entry__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cp-oxblood);
}
.toc-entry__link--inert {
  cursor: default;
  color: var(--cp-ink-soft);
}

/* The big serif chapter number. Tabular so 02 / 10 / 100 align
   neatly down the left edge. Gold to differentiate from the
   page-head h1. */
.toc-entry__num {
  font-family: var(--cp-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cp-gold-2);
  min-width: 2ch;
  text-align: right;
  padding-top: 0.25rem;
  transition: color 160ms ease;
}
.toc-entry__link:hover .toc-entry__num {
  color: var(--cp-oxblood);
}
.toc-entry--alert .toc-entry__num {
  color: var(--cp-danger);
}

.toc-entry__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.toc-entry__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.toc-entry__title {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--cp-ink);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 160ms ease;
}
.toc-entry__link:hover .toc-entry__title {
  color: var(--cp-oxblood);
}

/* Classic table-of-contents leader. Radial-gradient dots give an
   even, controllable spacing that CSS dotted-border doesn't.
   align-self:flex-end pulls it down to sit on the title baseline. */
.toc-entry__leader {
  flex: 1 1 auto;
  align-self: flex-end;
  height: 0.5rem;
  margin-bottom: 0.35rem;
  background-image: radial-gradient(circle, var(--cp-rule-strong) 1px, transparent 1.4px);
  background-size: 7px 6px;
  background-position: 0 100%;
  background-repeat: repeat-x;
  min-width: 1.5rem;
  opacity: 0.85;
}
.toc-entry__status {
  flex-shrink: 0;
}
.toc-entry__meta {
  font-family: var(--cp-font-body);
  font-size: 0.86rem;
  color: var(--cp-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.toc-meta__sep { color: var(--cp-rule-strong); }
.toc-meta__version {
  font-weight: 600;
  color: var(--cp-ink-soft);
  letter-spacing: 0.02em;
}

/* Status pills inside the TOC entry. Smaller and quieter than
   the page-level badge-cp pills — they're metadata, not headlines. */
.toc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--cp-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.toc-status i { font-size: 0.85rem; }

.toc-status--complete {
  background: var(--cp-gold-soft);
  color: var(--cp-gold-2);
  border-color: rgba(176, 136, 56, 0.28);
}
.toc-status--running {
  background: var(--cp-oxblood-soft);
  color: var(--cp-oxblood);
  border-color: rgba(122, 38, 48, 0.22);
}
.toc-status--failed {
  background: rgba(162, 58, 58, 0.12);
  color: var(--cp-danger);
  border-color: rgba(162, 58, 58, 0.32);
}
.toc-status--cancelled,
.toc-status--draft {
  background: transparent;
  color: var(--cp-muted);
  border-color: var(--cp-rule);
}

/* Quiet trash affordance pinned to the right edge of the entry.
   Hidden until the row is hovered/focused so it doesn't compete
   with the click target. */
.toc-entry__delete {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  color: var(--cp-ink-soft);
  background: transparent;
  text-decoration: none;
  opacity: 0;
  transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease;
}
.toc-entry:hover .toc-entry__delete,
.toc-entry:focus-within .toc-entry__delete {
  opacity: 1;
}
.toc-entry__delete:hover,
.toc-entry__delete:focus {
  background: rgba(162, 58, 58, 0.10);
  color: var(--cp-danger);
  outline: none;
}

/* Narrow screens: title can wrap, leader collapses, status drops
   below the title. Keeps the entry readable without horizontal scroll. */
@media (max-width: 640px) {
  .toc-entry__link,
  .toc-entry__link--inert {
    padding-right: 2.5rem;
    gap: 0.85rem;
  }
  .toc-entry__num {
    font-size: 1.4rem;
  }
  .toc-entry__title {
    font-size: 1.2rem;
    white-space: normal;
  }
  .toc-entry__row {
    flex-wrap: wrap;
  }
  .toc-entry__leader { display: none; }
  .toc-entry__status { margin-top: 0.15rem; }
}

/* Sidebar column: stacked bible card + manuscript stats. */
.manuscript-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* Sidebar-compact bible card. Re-uses the existing component but
   collapses the side-by-side CTA underneath, since the sidebar is
   narrower than the original full-width band. */
.bible-card--compact {
  grid-template-columns: 1fr;
  padding: 1.35rem 1.4rem;
}
.bible-card--compact .bible-card__heading {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}
.bible-card--compact .bible-card__breakdown {
  gap: 0.5rem 1rem;
  margin-bottom: 0.25rem;
}
.bible-card--compact .bible-card__cta {
  margin-top: 1rem;
}
/* Replaces the inline pill in the heading when the card is compact —
   takes a full line, more legible at the narrow width. */
.bible-card__alert-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  border: 1px solid rgba(122, 38, 48, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
}

/* Manuscript stats panel — quiet sibling to the bible card. */
.manuscript-stats {
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem;
}
.manuscript-stats .eyebrow {
  margin-bottom: 0.4rem;
}
.manuscript-stats__total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--cp-rule);
}
.manuscript-stats__words {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--cp-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.manuscript-stats__unit {
  font-family: var(--cp-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.manuscript-stats__breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.manuscript-stats__breakdown li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  color: var(--cp-ink-soft);
}
.manuscript-stats__count {
  font-weight: 700;
  color: var(--cp-ink);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}
.manuscript-stats__label {
  color: var(--cp-ink-soft);
}
.manuscript-stats__row--complete .manuscript-stats__count { color: var(--cp-gold-2); }
.manuscript-stats__row--running  .manuscript-stats__count { color: var(--cp-oxblood); }
.manuscript-stats__row--failed   .manuscript-stats__count { color: var(--cp-danger); }
.manuscript-stats__row--failed   .manuscript-stats__label { color: var(--cp-danger); }

/* ============================================================
   Projects list — hero card
   ============================================================
   The most-recently-touched project gets a hero treatment: large
   serif title, last-chapter "resume" line, CTA on the right. Quieter
   .app-card grid below covers the rest.
*/
.project-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2.25rem 2.4rem;
  margin: 0 0 2rem;
  background:
    linear-gradient(135deg, var(--cp-ivory) 0%, var(--cp-paper) 100%);
  border: 1px solid var(--cp-rule);
  border-left: 5px solid var(--cp-oxblood);
  border-radius: var(--radius-lg);
  box-shadow: var(--cp-shadow-md);
  text-decoration: none;
  color: var(--cp-ink);
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.project-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%, rgba(176, 136, 56, 0.10), transparent 60%),
    radial-gradient(ellipse 35% 60% at 0% 100%, rgba(122, 38, 48, 0.06), transparent 70%);
}
.project-hero:hover,
.project-hero:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--cp-shadow-lg);
  color: var(--cp-ink);
  outline: none;
}
.project-hero__main {
  position: relative;
  min-width: 0;
}
.project-hero__eyebrow {
  margin-bottom: 0.5rem;
}
.project-hero__title {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  color: var(--cp-ink);
  transition: color 200ms ease;
}
.project-hero:hover .project-hero__title {
  color: var(--cp-oxblood);
}
.project-hero__resume {
  font-family: var(--cp-font-serif);
  font-size: 1.1rem;
  color: var(--cp-ink-soft);
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.project-hero__resume-label {
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
}
.project-hero__resume-title {
  font-style: italic;
  color: var(--cp-ink);
}
.project-hero__desc {
  font-family: var(--cp-font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--cp-ink-soft);
  margin: 0 0 1rem;
  max-width: 56ch;
}
.project-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  color: var(--cp-muted);
}
.project-hero__meta .sep { color: var(--cp-rule-strong); }
.project-hero__cta {
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .project-hero {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.5rem;
  }
}

/* ---------------------------------------------------------------
   Manuscript metadata picker (Project form + Chapter override)
   Compact chip-row + popover pattern. Three rows: Age / Format /
   Genres. Selected items render as inline chips; "+ Add" buttons
   anchor a popover with checkboxes (and search for genres).
   --------------------------------------------------------------- */

.metadata-card {
  margin: 2rem 0 1.5rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
}
.metadata-card__head { margin-bottom: 1.25rem; }
.metadata-card__title {
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-size: 1.3rem;
  margin: 0.2rem 0 0.45rem;
  letter-spacing: -0.005em;
}
.metadata-card__lede {
  color: var(--cp-ink-soft, var(--cp-muted));
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
  max-width: 64ch;
}
.metadata-card__lede em {
  font-style: italic;
  color: var(--cp-oxblood);
  font-weight: 500;
}

.metadata-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.metadata-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: start;
  gap: 0.5rem 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--cp-rule);
}
.metadata-row:first-child { border-top: 0; padding-top: 0.4rem; }
@media (max-width: 560px) {
  .metadata-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}
.metadata-row__label {
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--cp-ink-soft, var(--cp-ink));
  padding-top: 0.5rem;
}
.metadata-row__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.6rem;
  min-height: 2.2rem;
}
.metadata-row__hint {
  color: var(--cp-muted);
  font-size: 0.82rem;
  margin: 0;
  flex-basis: 100%;
  line-height: 1.4;
}

/* Chip stack: visual representation of selected items. Sits AFTER the
   trigger so the trigger's position never shifts as chips are added —
   this is what fixes the popover-jitter the writer noticed when clicking
   checkboxes inside an open popover. */
.metadata-chip-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 0;
  padding-top: 0.25rem;  /* visual center vs the 2.4rem trigger */
}
.metadata-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem 0.3rem 0.8rem;
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--cp-font-body);
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.metadata-chip__x {
  background: transparent;
  border: 0;
  color: var(--cp-ivory);
  opacity: 0.75;
  padding: 0 0.1rem;
  width: auto;
  height: auto;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.metadata-chip__x:hover { opacity: 1; }
.metadata-chip-stack__empty {
  color: var(--cp-muted);
  font-style: italic;
  font-size: 0.86rem;
  padding: 0.1rem 0.2rem;
}

/* "Add age / Add genre" trigger button + anchored popover */
.metadata-trigger-wrap {
  position: relative;
  display: inline-block;
}
.metadata-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: var(--cp-ivory);
  border: 1px dashed var(--cp-rule-strong);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--cp-font-body);
  font-size: 0.85rem;
  color: var(--cp-ink-soft, var(--cp-ink));
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  width: auto;
  height: auto;
  margin: 0;
}
.metadata-trigger:hover {
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
  background: var(--cp-ivory);
}
.metadata-trigger[aria-expanded="true"] {
  background: var(--cp-paper-2);
  border-style: solid;
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
}
.metadata-trigger__caret {
  font-size: 0.7rem;
  opacity: 0.7;
}

.metadata-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 18rem;
  max-width: 22rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
  padding: 0.9rem 1rem;
}
.metadata-popover--wide {
  min-width: 28rem;
  max-width: 34rem;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .metadata-popover,
  .metadata-popover--wide {
    min-width: min(20rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    left: 0;
  }
}
.metadata-popover__title {
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 0.2rem;
  color: var(--cp-ink);
}
.metadata-popover__hint {
  color: var(--cp-muted);
  font-size: 0.82rem;
  margin: 0 0 0.6rem;
  line-height: 1.4;
}
.metadata-popover__search {
  width: 100%;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.92rem !important;
  margin-bottom: 0.6rem;
}
.metadata-popover__buckets {
  overflow-y: auto;
  flex: 1;
  margin: 0 -0.3rem;
  padding: 0 0.3rem;
}
.metadata-popover__bucket {
  margin: 0.5rem 0 0.85rem;
}
.metadata-popover__bucket:first-child { margin-top: 0; }
.metadata-popover__bucket-title {
  font-family: var(--cp-font-body);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cp-muted);
  margin: 0 0 0.35rem;
}
.metadata-popover__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.metadata-popover__list--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.05rem 0.6rem;
}
@media (max-width: 520px) {
  .metadata-popover__list--cols { grid-template-columns: 1fr; }
}
.metadata-popover__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--cp-ink);
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.metadata-popover__row:hover {
  background: var(--cp-paper-2);
}
.metadata-popover__row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--cp-oxblood);
  flex-shrink: 0;
}

/* "Inherit from book" row in the override format popover — visually
   subdued so it reads as "go back to default" not a real format. */
.metadata-popover__row--clear {
  margin-top: 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--cp-rule);
  color: var(--cp-muted);
}

/* Default-partners popover on the project create/edit page. Wider than
   the metadata popover and contains tabs + per-partner rows. */

.metadata-popover--partners {
  min-width: 32rem;
  max-width: 40rem;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.85rem 0.4rem;
}
@media (max-width: 640px) {
  .metadata-popover--partners {
    min-width: min(22rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }
}
.partner-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  border-bottom: 1px solid var(--cp-rule);
  margin: 0.4rem 0 0.55rem;
}
.partner-tab {
  background: transparent;
  border: 0;
  color: var(--cp-muted);
  font-family: var(--cp-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  margin: 0;
  width: auto;
  text-transform: none;
  letter-spacing: 0;
}
.partner-tab:hover { color: var(--cp-ink); }
.partner-tab--active {
  color: var(--cp-ink);
  border-bottom-color: var(--cp-oxblood);
}
.partner-list {
  overflow-y: auto;
  flex: 1;
  margin: 0 -0.3rem;
  padding: 0 0.3rem 0.3rem;
}
.partner-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.partner-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--cp-font-body);
  font-weight: 400;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.partner-row:hover {
  background: var(--cp-paper-2);
  border-color: var(--cp-rule);
}
.partner-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.5rem;
  accent-color: var(--cp-oxblood);
  flex-shrink: 0;
}
.partner-row__portrait {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--partner-accent, var(--cp-gold-2));
}
.partner-row__portrait .partner-portrait-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.partner-row__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--partner-accent, var(--cp-gold-2));
  color: var(--cp-ivory);
  border-radius: 50%;
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-weight: 700;
  font-size: 0.78rem;
}
.partner-row__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.partner-row__tagline {
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--cp-muted);
  line-height: 1.35;
}
.partner-row__name {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--cp-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.partner-row__tier {
  font-size: 0.7rem;
  padding: 0.05rem 0.45rem;
}
.partner-row__voice {
  color: var(--cp-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.partner-rows__empty {
  color: var(--cp-muted);
  font-style: italic;
  font-size: 0.86rem;
  padding: 0.8rem 0.4rem;
  list-style: none;
}

/* "Show partners for other work types" reveal at the foot of the picker
   popover (project partner picker). */
.partner-wt-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.55rem 0.4rem 0.2rem;
  border-top: 1px solid var(--cp-rule);
  font-size: 0.84rem;
  color: var(--cp-ink-soft, var(--cp-muted));
  cursor: pointer;
  user-select: none;
}
.partner-wt-toggle input { flex: none; }

/* Variant of the metadata-card used for the partner picker — only differs
   in `.partner-tabs` margins above, this class is a hook for future tweaks. */
.metadata-card--partners {}

/* ---- Work-type selector (Fiction / Non-fiction) --------------------------
   Two large radio cards, the first question on the project form. Shares the
   .metadata-card shell; the choice grid + option cards are bespoke. */
.worktype-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 33rem) {
  .worktype-choice { grid-template-columns: 1fr; }
}
.worktype-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  background: var(--cp-paper);
  border: 1.5px solid var(--cp-rule);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.worktype-option:hover { border-color: var(--cp-oxblood); }
.worktype-option.is-active {
  border-color: var(--cp-oxblood);
  background: var(--cp-paper-2);
  box-shadow: inset 0 0 0 1px var(--cp-oxblood);
}
/* The real radio drives state via x-model; keep it reachable for keyboard
   and screen readers but visually collapsed behind the card. */
.worktype-option__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.worktype-option__input:focus-visible + .worktype-option__icon {
  outline: 2px solid var(--cp-oxblood);
  outline-offset: 2px;
}
.worktype-option__icon {
  flex: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--cp-oxblood);
  margin-top: 0.05rem;
}
.worktype-option__body { display: flex; flex-direction: column; gap: 0.15rem; }
.worktype-option__name {
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--cp-ink);
}
.worktype-option__desc {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--cp-ink-soft, var(--cp-muted));
}
.worktype-option__check {
  position: absolute;
  top: 0.7rem;
  right: 0.75rem;
  font-size: 0.95rem;
  color: var(--cp-oxblood);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.worktype-option.is-active .worktype-option__check { opacity: 1; }
.worktype-card__note {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--cp-ink-soft, var(--cp-muted));
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
}
.worktype-card__note .bi { color: var(--cp-oxblood); }

/* "Save this selection as the default for this chapter" checkbox row */
.save-as-default {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0.65rem 0.85rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 8px;
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  color: var(--cp-ink);
  cursor: pointer;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.save-as-default input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--cp-oxblood);
  flex-shrink: 0;
}
.save-as-default__hint {
  display: block;
  margin-top: 0.15rem;
  color: var(--cp-muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Project detail — manuscript info card */

.manuscript-info-card {
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 10px;
  padding: 0.9rem 1rem 1rem;
  margin-top: 1rem;
}
.manuscript-info-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.manuscript-info-card__head h3 {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-ink-soft, var(--cp-ink));
}
.manuscript-info-card__edit {
  font-size: 0.82rem;
  color: var(--cp-muted);
}
.manuscript-info-card__edit:hover { color: var(--cp-oxblood); }
.manuscript-info-card__rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.manuscript-info-card__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
}
.manuscript-info-card__row dt {
  flex-shrink: 0;
  min-width: 4.5rem;
  color: var(--cp-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.manuscript-info-card__row dd {
  margin: 0;
  color: var(--cp-ink);
}
.manuscript-info-card__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.manuscript-info-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule-strong);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  color: var(--cp-ink);
}
.manuscript-info-card__empty {
  color: var(--cp-muted);
  font-style: italic;
  font-size: 0.88rem;
  margin: 0.35rem 0 0;
}

/* Per-submission override reveal on the chapter submit form.
   Prominent card with a sliders icon, clear title, and a summary chip
   row showing what the writer is inheriting — visible even when closed
   so the override path is discoverable, not hidden. */

.metadata-override-shell {
  margin: 1.5rem 0 0.75rem;
  border: 1px solid var(--cp-rule-strong);
  border-left: 4px solid var(--cp-oxblood);
  border-radius: 10px;
  background: var(--cp-ivory);
  transition: box-shadow 160ms ease;
}
.metadata-override-shell:hover { box-shadow: var(--cp-shadow-sm); }
.metadata-override-shell[open] {
  background: var(--cp-paper-2);
  box-shadow: var(--cp-shadow-sm);
}
.metadata-override-shell__summary {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  padding: 0.9rem 1rem 0.9rem 0.9rem;
  font-family: var(--cp-font-body);
  list-style: none;
  user-select: none;
}
.metadata-override-shell__summary::-webkit-details-marker { display: none; }
.metadata-override-shell__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 8px;
  color: var(--cp-oxblood);
  font-size: 1.05rem;
}
.metadata-override-shell[open] .metadata-override-shell__icon {
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
  border-color: var(--cp-oxblood);
}
.metadata-override-shell__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.metadata-override-shell__title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--cp-ink);
}
.metadata-override-shell__sub {
  color: var(--cp-muted);
  font-size: 0.84rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
}
.metadata-override-shell__sub em { font-style: italic; }
.metadata-override-shell__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  color: var(--cp-ink-soft, var(--cp-ink));
}
.metadata-override-shell__caret {
  flex-shrink: 0;
  align-self: center;
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--cp-muted);
  border-bottom: 2px solid var(--cp-muted);
  transform: rotate(45deg);
  transition: transform 180ms ease;
  margin-right: 0.25rem;
}
.metadata-override-shell[open] .metadata-override-shell__caret {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}
.metadata-override-shell__body {
  border-top: 1px solid var(--cp-rule);
  padding: 0 1rem 0.5rem;
}
/* Inside the override shell the metadata-card has its own border + bg
   already — drop the shell's redundant outer styling so we don't get
   nested boxes. */
.metadata-override-shell__body .metadata-card {
  margin: 1rem 0;
  border: 0;
  background: transparent;
  padding: 0;
}

/* ---------------------------------------------------------------
   Partner library page — equal-weight grids with SVG patron marks
   --------------------------------------------------------------- */

/* Per-partner accent color. Stable across deploys per slug (see
   `Persona.color_class`). Used as the avatar fill and the row's
   left-edge accent. The palette stays inside the editorial range —
   muted, slightly desaturated, paired well with ivory + oxblood. */
.partner-color-0 { --partner-accent: #7a2630; }  /* oxblood */
.partner-color-1 { --partner-accent: #5b6e54; }  /* sage */
.partner-color-2 { --partner-accent: #4a6585; }  /* slate-blue */
.partner-color-3 { --partner-accent: #8e6f3e; }  /* burnished gold */
.partner-color-4 { --partner-accent: #6b4f6b; }  /* aubergine */
.partner-color-5 { --partner-accent: #b86d52; }  /* terracotta */
.partner-color-6 { --partner-accent: #4f6e6e; }  /* deep teal */
.partner-color-7 { --partner-accent: #8a5266; }  /* dusty wine */

.partner-library { margin-top: 1.5rem; }

/* ----- CONTROLS (search + tabs) ----- */

.partner-library__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cp-rule);
}
.partner-library__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.partner-library__tab {
  background: transparent;
  border: 0;
  color: var(--cp-muted);
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  margin: 0 0 -1px;
  width: auto;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 140ms ease, border-color 140ms ease;
}
.partner-library__tab:hover { color: var(--cp-ink); }
.partner-library__tab--active {
  color: var(--cp-ink);
  border-bottom-color: var(--cp-oxblood);
}
.partner-library__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  background: var(--cp-paper-2);
  color: var(--cp-ink-soft);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.partner-library__tab--active .partner-library__tab-count {
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
}

.partner-library__search-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 22rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.partner-library__search {
  flex: 1;
  padding: 0.55rem 0.85rem 0.55rem 2.3rem !important;
  font-size: 0.95rem !important;
}
.partner-library__search-icon {
  position: absolute;
  left: 0.85rem;
  color: var(--cp-muted);
  pointer-events: none;
}
@media (max-width: 720px) {
  .partner-library__controls { flex-direction: column; align-items: stretch; }
  .partner-library__search-wrap { min-width: 0; }
}

/* ----- SECTIONS (Craft / Genre / Customs) ----- */

.partner-section { margin: 0 0 2.5rem; }
.partner-section__heading {
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-size: 1.45rem;
  margin: 0 0 0.3rem;
  letter-spacing: -0.005em;
  color: var(--cp-ink);
}
.partner-section__lede {
  color: var(--cp-muted);
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 0.96rem;
  margin: 0 0 1.25rem;
  max-width: 68ch;
  line-height: 1.5;
}

/* ----- Uniform card grid (craft + genre + customs) ----- */

.partner-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 720px)  { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }

.partner-card {
  position: relative;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-top: 4px solid var(--partner-accent, var(--cp-gold-2));
  border-radius: var(--radius-md);
  padding: 1.25rem 1.3rem 1rem;
  box-shadow: var(--cp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cp-shadow-md);
}
/* Custom and fork cards get a small rubber-stamp impression in the
   top-right corner — bordered, rotated slightly, in the partner's
   accent color. Reads as an editorial stamp ("this one is yours") that
   sits ON TOP of the card without competing with the content area. */
/* Rectangular rubber-stamp impression — bordered "★ CUSTOM ★" rotated
   slightly, in the partner's accent color. Sits in the top-right corner
   of fork/custom cards as a clear-but-restrained "this one is yours" mark. */
.partner-card--fork::before,
.partner-card--custom::before {
  content: "★ CUSTOM ★";
  position: absolute;
  top: 1rem;
  right: 1rem;
  transform: rotate(-12deg);
  transform-origin: center;
  padding: 0.25rem 0.55rem 0.28rem;
  border: 2.6px solid var(--partner-accent, var(--cp-oxblood));
  border-radius: 2.5px;
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--partner-accent, var(--cp-oxblood));
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
  background: var(--cp-ivory);
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
}
/* Reserve space on the name row for the stamp. 7rem reliably clears
   the rotated stamp; smaller values (6.5–6.75rem) allowed visible
   overlap in practice — the rendered character widths land wider than
   the unrotated-box math suggests, especially around the star glyph. */
.partner-card--fork .partner-card__name,
.partner-card--custom .partner-card__name {
  padding-right: 7rem;
}

.partner-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
/* Name + inline portrait on the same line. The portrait acts as a
   leading emblem at name-line height, saving vertical space vs. the
   previous layout where the portrait stretched alongside name + tagline. */
.partner-card__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0;
  color: var(--cp-ink);
}
.partner-card__name-text {
  min-width: 0;
  flex: 1;
}
.partner-card__portrait {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  color: var(--partner-accent, var(--cp-gold-2));
}
.partner-portrait-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Fallback monogram — same footprint as the SVG portrait */
.partner-card__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  background: var(--partner-accent, var(--cp-gold-2));
  color: var(--cp-ivory);
  border-radius: 50%;
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
/* Tagline — italic serif in the partner's accent color, slightly
   bolder. Reads as a literary subtitle that also carries the partner's
   visual identity. Distinct from the pull-quote calling card below by
   color (accent vs. ink-soft) and absence of the hanging quote mark. */
.partner-card__tagline {
  margin: 0.15rem 0 0;
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--partner-accent, var(--cp-oxblood));
  line-height: 1.3;
  letter-spacing: -0.005em;
}
/* Pull-quote treatment for the partner's calling card — large hanging
   serif quote mark in the partner's accent color, italic text indented
   past it. No background tint, no left rail: lets the partner's color
   identity sit on the top border while the quote reads as editorial
   prose, not a UI alert block. */
.partner-card__quote {
  margin: 0.15rem 0 0;
  padding: 0 0 0 2.1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--cp-ink-soft, var(--cp-ink));
}
.partner-card__quote::before {
  content: "\201C"; /* opening curly double-quote */
  position: absolute;
  left: -0.15rem;
  top: -0.3rem;
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-style: normal;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--partner-accent, var(--cp-oxblood));
  opacity: 0.32;
  pointer-events: none;
}
.partner-card__voice {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--cp-ink-soft);
  font-style: italic;
}
.partner-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.partner-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--cp-rule);
  padding-top: 0.85rem;
  margin-top: auto;
}
.partner-card__actions form { margin: 0; display: inline; }

/* Inline expanded detail panel — opens beneath the tags row when the
   writer clicks "Full profile". Replaces the separate detail page. */
.partner-card__detail {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 3px solid var(--partner-accent, var(--cp-gold-2));
  border-radius: 8px;
  padding: 1rem 1.1rem 0.85rem;
  margin: 0.2rem 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Detail panel keeps the default ivory background for fork/custom cards
   now that the card itself isn't tinted. */
.partner-card__detail-eyebrow {
  font-family: var(--cp-font-body);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cp-muted);
  margin: 0;
}
.partner-card__detail-eyebrow + * { margin-top: 0.1rem; }
.partner-card__detail-prose {
  font-family: var(--cp-font-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cp-ink);
  margin: 0;
}
.partner-card__detail-prose p {
  margin: 0 0 0.7rem;
}
.partner-card__detail-prose p:last-child { margin-bottom: 0; }
.partner-card__detail-note {
  font-family: var(--cp-font-body);
  font-size: 0.86rem;
  color: var(--cp-muted);
  font-style: italic;
  margin: 0;
}
.partner-card__detail-empty {
  font-family: var(--cp-font-body);
  font-size: 0.88rem;
  color: var(--cp-muted);
  font-style: italic;
  margin: 0;
}
.partner-card__detail-prompt {
  font-family: var(--cp-font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 0.82rem;
  line-height: 1.55;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  margin: 0;
  color: var(--cp-ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 22rem;
  overflow-y: auto;
}

/* Toggle button — "Full profile" / "Show less" with rotating chevron. */
.partner-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--cp-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--partner-accent, var(--cp-oxblood));
  background: transparent;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  margin: 0;
  letter-spacing: 0.01em;
  width: auto;
  text-transform: none;
  transition: color 160ms ease;
}
.partner-card__toggle:hover { opacity: 0.85; }
.partner-card__toggle:focus-visible {
  outline: 2px solid var(--partner-accent, var(--cp-oxblood));
  outline-offset: 2px;
  border-radius: 4px;
}
.partner-card__toggle-icon {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 220ms ease;
}
.partner-card__toggle-icon--open { transform: rotate(180deg); }

/* When the card expands, give it a tiny visual lift so it reads as the
   active card on the page. */
.partner-card--expanded {
  box-shadow: var(--cp-shadow-md);
  border-color: var(--partner-accent, var(--cp-rule-strong));
}

/* ---------------------------------------------------------------
   Persona-picker list (chapter-submit form). Compact row list —
   each row carries portrait + name + tagline + tier + credits +
   info chevron. Click row to toggle selection. Click chevron to
   expand calling-card quote and voice description in place.
   --------------------------------------------------------------- */

.persona-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.persona-list-item {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.persona-list-item:hover {
  border-color: var(--cp-rule-strong);
}

.persona-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem 0.7rem 0.75rem;
  cursor: pointer;
  font-family: var(--cp-font-body);
  font-weight: 400;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  user-select: none;
  position: relative;
  border-left: 3px solid transparent;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.persona-row:hover { background: var(--cp-paper-2); }
.persona-row-selected {
  background: var(--cp-oxblood-soft);
  border-left-color: var(--partner-accent, var(--cp-oxblood));
}
.persona-row-selected:hover {
  background: color-mix(in srgb, var(--cp-oxblood-soft) 80%, var(--partner-accent, var(--cp-oxblood)));
}

.persona-row-input {
  /* Visually hidden but accessible — the visible checkmark below is the indicator. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.persona-row-check {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: transparent;
  border: 1.5px solid var(--cp-rule-strong);
  color: transparent;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.persona-row-selected .persona-row-check {
  background: var(--partner-accent, var(--cp-oxblood));
  border-color: var(--partner-accent, var(--cp-oxblood));
  color: var(--cp-ivory);
}
.persona-row-input:focus-visible ~ .persona-row-check {
  box-shadow: var(--cp-focus-ring);
}

.persona-row-portrait {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--partner-accent, var(--cp-gold-2));
}
.persona-row-portrait .partner-portrait-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.persona-row-monogram {
  width: 2.6rem;
  height: 2.6rem;
  background: var(--partner-accent, var(--cp-gold-2));
  color: var(--cp-ivory);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-weight: 700;
  font-size: 0.82rem;
}

.persona-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.persona-row-name {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cp-ink);
  line-height: 1.2;
}
.persona-row-tagline {
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--cp-muted);
  line-height: 1.3;
}

.persona-row-tags {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.persona-row-credits {
  font-family: var(--cp-font-body);
  font-size: 0.82rem;
  color: var(--cp-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  min-width: 3.2rem;
}
.persona-row-credits__num {
  font-weight: 700;
  color: var(--cp-ink);
  margin-right: 0.15rem;
}

.persona-row-info {
  background: transparent;
  border: 0;
  color: var(--cp-muted);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
  transition: background-color 140ms ease, color 140ms ease;
}
.persona-row-info:hover {
  background: var(--cp-paper-2);
  color: var(--partner-accent, var(--cp-oxblood));
}
.persona-row-info:focus-visible {
  outline: 2px solid var(--partner-accent, var(--cp-oxblood));
  outline-offset: 1px;
}
.persona-row-info-icon--open { transform: rotate(180deg); }
.persona-row-info > i { transition: transform 200ms ease; }

.persona-row-detail {
  padding: 0.7rem 1rem 0.95rem 4.45rem;  /* aligns under the name */
  background: var(--cp-paper-2);
  border-top: 1px dashed var(--cp-rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.persona-row-detail-quote {
  margin: 0;
  padding: 0.5rem 0.85rem;
  background: var(--cp-ivory);
  border-left: 3px solid var(--partner-accent, var(--cp-gold-2));
  border-radius: 0 5px 5px 0;
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--cp-ink-soft, var(--cp-ink));
}
.persona-row-detail-voice {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--cp-ink);
}
.persona-row-detail-hint {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: 0.82rem;
  color: var(--cp-muted);
}
.persona-row-detail-hint a {
  color: var(--partner-accent, var(--cp-oxblood));
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.persona-row-detail-hint a:hover {
  border-bottom-color: var(--partner-accent, var(--cp-oxblood));
}

/* "Add a custom partner" row — no checkbox, dashed border to read as CTA */
.persona-list-add-item {
  border-style: dashed;
}
.persona-row-add {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  cursor: pointer;
}
.persona-row-add:hover .persona-row-name {
  color: var(--cp-oxblood);
}
.persona-row-add-icon {
  background: var(--cp-paper-2);
  border: 1px dashed var(--cp-rule-strong);
  border-radius: 50%;
  color: var(--cp-muted);
  font-size: 1rem;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.persona-row-add:hover .persona-row-add-icon {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
  color: var(--cp-ivory);
}

/* Tighten the grid on narrow screens — drop credits to a second line if needed */
@media (max-width: 640px) {
  .persona-row {
    grid-template-columns: auto auto 1fr auto auto;
    column-gap: 0.6rem;
  }
  .persona-row-credits { display: none; }
  .persona-row-detail { padding-left: 1rem; }
}

/* ---------------------------------------------------------------
   Avatar picker on the custom-partner create/edit form. Live preview
   on the left, mark grid + color swatches on the right.
   --------------------------------------------------------------- */

.avatar-picker {
  margin: 1.4rem 0;
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
}
.avatar-picker__head { margin-bottom: 1rem; }
.avatar-picker__help {
  margin: 0.3rem 0 0;
  color: var(--cp-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 60ch;
}
.avatar-picker__layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 720px) {
  .avatar-picker__layout {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

/* Live preview — large emblem in the selected color */
.avatar-picker__preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.avatar-picker__preview {
  width: 7rem;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--partner-accent, var(--cp-gold-2));
  position: relative;
}
.avatar-picker__preview .partner-portrait-svg {
  width: 100%;
  height: 100%;
}
.avatar-picker__preview-empty {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-paper-2);
  border: 2px dashed var(--partner-accent, var(--cp-rule-strong));
  border-radius: 50%;
  color: var(--partner-accent, var(--cp-muted));
}
.avatar-picker__preview-mono {
  font-family: var(--cp-font-display);
  font-weight: 700;
  font-size: 1.8rem;
}
.avatar-picker__preview-caption {
  margin: 0;
  font-family: var(--cp-font-body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--cp-muted);
  text-align: center;
  max-width: 12rem;
}

/* Mark grid + color row */
.avatar-picker__controls {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.avatar-picker__group { display: flex; flex-direction: column; gap: 0.55rem; }
.avatar-picker__group-label {
  font-family: var(--cp-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cp-ink-soft, var(--cp-ink));
  margin: 0;
}
.avatar-picker__mark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
  gap: 0.45rem;
  color: var(--partner-accent, var(--cp-gold-2));
}
.avatar-picker__mark-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cp-ivory);
  border: 1.5px solid var(--cp-rule);
  border-radius: 10px;
  cursor: pointer;
  margin: 0;
  padding: 0.2rem;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.avatar-picker__mark-tile:hover {
  border-color: var(--partner-accent, var(--cp-rule-strong));
  transform: translateY(-1px);
}
.avatar-picker__mark-tile--selected {
  border-color: var(--partner-accent, var(--cp-oxblood));
  border-width: 2px;
  background: var(--cp-paper-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--partner-accent, var(--cp-oxblood)) 18%, transparent);
}
.avatar-picker__mark-tile-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-picker__mark-tile-inner .partner-portrait-svg {
  width: 100%;
  height: 100%;
}

.avatar-picker__color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.avatar-picker__color-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.avatar-picker__color-swatch:hover { transform: translateY(-1px) scale(1.04); }
.avatar-picker__color-fill {
  width: 100%;
  height: 100%;
  background: var(--partner-accent);
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.avatar-picker__color-swatch--selected {
  box-shadow:
    0 0 0 2px var(--cp-paper-2),
    0 0 0 4px var(--partner-accent);
}

/* Visually-hidden radio inputs inside the picker tiles/swatches —
   we render visible labels and let the label drive click + focus. */
.visually-hidden-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.avatar-picker__mark-tile:has(.visually-hidden-input:focus-visible),
.avatar-picker__color-swatch:has(.visually-hidden-input:focus-visible) {
  outline: 2px solid var(--partner-accent, var(--cp-oxblood));
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Confirmation modal — Alpine-driven overlay used for destructive
   actions where the native browser confirm() would feel jarring.
   Currently used by partner delete; designed to be reusable.
   --------------------------------------------------------------- */

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(20, 18, 14, 0.55);
  backdrop-filter: blur(2px);
}

.confirm-modal__dialog {
  width: 100%;
  max-width: 32rem;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule-strong);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.25),
    0 4px 14px rgba(0, 0, 0, 0.10);
  padding: 1.75rem 1.75rem 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
/* Entrance animation — gentle scale-up + fade from center */
.confirm-modal__dialog--enter {
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1.05);
}
.confirm-modal__dialog--enter-start {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
}
.confirm-modal__dialog--enter-end {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.confirm-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: transparent;
  border: 0;
  color: var(--cp-muted);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
  transition: background-color 140ms ease, color 140ms ease;
}
.confirm-modal__close:hover {
  background: var(--cp-paper-2);
  color: var(--cp-ink);
}

.confirm-modal__icon {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  font-size: 1.4rem;
  margin-top: 0.25rem;
  background: var(--cp-paper-2);
  color: var(--cp-muted);
}
.confirm-modal__icon--danger {
  background: color-mix(in srgb, var(--cp-danger) 12%, var(--cp-paper-2));
  color: var(--cp-danger);
}
.confirm-modal__icon--neutral {
  background: var(--cp-paper-2);
  color: var(--cp-ink-soft, var(--cp-ink));
}
.confirm-modal__icon--info {
  background: color-mix(in srgb, var(--cp-oxblood) 12%, var(--cp-paper-2));
  color: var(--cp-oxblood);
}

.confirm-modal__title {
  font-family: var(--cp-font-display, var(--cp-font-serif));
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  text-align: center;
  margin: 0;
  color: var(--cp-ink);
}

.confirm-modal__body {
  font-family: var(--cp-font-body);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--cp-ink-soft, var(--cp-ink));
  text-align: center;
  margin: 0;
}

/* Warning block — amber accent for hard warnings; quieter slate for info */
.confirm-modal__warning {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, #b86d52 10%, var(--cp-paper-2));
  border: 1px solid color-mix(in srgb, #b86d52 30%, transparent);
  border-radius: 10px;
  align-items: start;
}
.confirm-modal__warning--soft {
  background: color-mix(in srgb, var(--cp-oxblood) 6%, var(--cp-paper-2));
  border-color: color-mix(in srgb, var(--cp-oxblood) 22%, transparent);
}
.confirm-modal__warning--soft .confirm-modal__warning-icon {
  color: var(--cp-oxblood);
}
.confirm-modal__warning-icon {
  color: color-mix(in srgb, #b86d52 75%, black);
  font-size: 1.2rem;
  margin-top: 0.1rem;
}
.confirm-modal__warning-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.confirm-modal__warning-body p {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cp-ink-soft, var(--cp-ink));
}
.confirm-modal__warning-headline {
  font-weight: 600;
  color: var(--cp-ink);
}

.confirm-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cp-rule);
}
.confirm-modal__actions form { margin: 0; display: inline; }
@media (max-width: 520px) {
  .confirm-modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .confirm-modal__actions .btn,
  .confirm-modal__actions form { width: 100%; }
  .confirm-modal__actions .btn { width: 100%; justify-content: center; }
}

/* Empty state hint when the customs tab is selected but the user has none. */
.partner-empty-hint {
  padding: 1.5rem 1rem;
  background: var(--cp-paper-2);
  border: 1px dashed var(--cp-rule);
  border-radius: 10px;
  text-align: center;
  color: var(--cp-muted);
}

/* --- Bible field-level citations (chapter reference chips) --- */
.bible-cite {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-left: 0.4em;
  padding: 0.05em 0.45em;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: baseline;
  color: var(--cp-oxblood, #7a2630);
  background: rgba(122, 38, 48, 0.08);
  border-radius: 999px;
  text-decoration: none;
  cursor: help;
  white-space: nowrap;
}
.bible-cite:hover,
.bible-cite:focus {
  background: rgba(122, 38, 48, 0.16);
  text-decoration: none;
}
.bible-cite .bi {
  font-size: 0.72em;
  opacity: 0.8;
}

/* --- Bible: entries no longer referenced (removed in a revision) --- */
.unref-banner {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-left: 3px solid var(--cp-muted, #6b6b6b);
  border-radius: 0.5rem;
  padding: 0.9rem 1.05rem;
  margin-bottom: 1.25rem;
  background: rgba(0, 0, 0, 0.02);
}
.unref-banner__head { margin: 0; }
.unref-banner__sub { margin: 0.15rem 0 0.6rem; }
.unref-list { list-style: none; padding: 0; margin: 0; }
.unref-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.4rem 0;
}
.unref-item + .unref-item { border-top: 1px solid rgba(0, 0, 0, 0.06); }


/* ---------------------------------------------------------------------------
   Inline help tooltip (templates/_help_tip.html)
   A small (i) that reveals a one-line explanation on hover / focus / tap.
   Pure CSS via :hover and :focus-within so it works on touch (tap focuses
   the button) and keyboard, with no JavaScript.
   --------------------------------------------------------------------------- */
.cp-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.3rem;
  line-height: 1;
}
/* `.cp-tip` wraps an actual control (e.g. a button/link) so the tooltip
   triggers from the control itself — the right pattern for explaining an
   action, vs. an (i) icon for labels/fields. Reuses .cp-help__bubble. */
.cp-tip { position: relative; display: inline-flex; }
.cp-help__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  /* A solid info dot in the brand oxblood (a reddish accent) — visible and
     clearly an affordance, without the "error" connotation of true red. */
  color: var(--cp-oxblood);
  cursor: help;
  font-size: 0.95rem;
  transition: color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.cp-help__btn:hover,
.cp-help__btn:focus-visible {
  color: var(--cp-oxblood-2);
  transform: scale(1.12);
  outline: none;
}
.cp-help__btn:focus-visible { box-shadow: var(--cp-focus-ring); }
.cp-help__bubble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 60;
  width: max-content;
  max-width: 16rem;
  padding: 0.6rem 0.75rem;
  background: var(--cp-ink-dark);
  color: var(--cp-on-dark);
  border: 1px solid var(--cp-ink-dark-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--cp-shadow-md);
  font-family: var(--cp-font-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
.cp-help--up .cp-help__bubble,
.cp-tip--up .cp-help__bubble { bottom: calc(100% + 0.45rem); }
.cp-help--down .cp-help__bubble,
.cp-tip--down .cp-help__bubble { top: calc(100% + 0.45rem); }
/* help_tip.js promotes the bubble to viewport space on show so ancestors
   with overflow (cards, responsive tables) can't clip it. Coordinates are
   set inline; this neutralizes the anchored bottom/top above. */
.cp-help__bubble.is-fixed { position: fixed; bottom: auto; }
/* Small arrow */
.cp-help__bubble::after {
  content: "";
  position: absolute;
  /* --tip-arrow-shift keeps the arrow on the icon when help_tip.js clamps
     a bubble back inside the viewport. */
  left: calc(50% + var(--tip-arrow-shift, 0px));
  transform: translateX(-50%);
  border: 5px solid transparent;
}
.cp-help--up .cp-help__bubble::after,
.cp-tip--up .cp-help__bubble::after {
  top: 100%;
  border-top-color: var(--cp-ink-dark);
}
.cp-help--down .cp-help__bubble::after,
.cp-tip--down .cp-help__bubble::after {
  bottom: 100%;
  border-bottom-color: var(--cp-ink-dark);
}
/* When help_tip.js flips a fixed bubble to whichever side has room, the
   arrow follows the side actually used rather than the template's pos. */
.cp-help__bubble.is-fixed.opens-up::after {
  top: 100%;
  bottom: auto;
  border-top-color: var(--cp-ink-dark);
  border-bottom-color: transparent;
}
.cp-help__bubble.is-fixed.opens-down::after {
  bottom: 100%;
  top: auto;
  border-bottom-color: var(--cp-ink-dark);
  border-top-color: transparent;
}
.cp-help:hover .cp-help__bubble,
.cp-help:focus-within .cp-help__bubble,
.cp-tip:hover .cp-help__bubble,
.cp-tip:focus-within .cp-help__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Keep the bubble on-screen near the right edge of narrow viewports. */
@media (max-width: 560px) {
  .cp-help__bubble { max-width: 12rem; }
}


/* ---------------------------------------------------------------------------
   "How it works" — first-run strip (project_list) + help-menu modal
   (templates/_how_it_works.html). Steps render 3-across on the strip and
   stacked in the modal.
   --------------------------------------------------------------------------- */
.howto-strip {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-left: 4px solid var(--cp-oxblood);
  border-radius: var(--radius-lg);
  box-shadow: var(--cp-shadow-sm);
  padding: 1.5rem 1.6rem 1.3rem;
  margin-bottom: 2rem;
}
.howto-strip__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.howto-strip__title {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  margin: 0.1rem 0 0;
  color: var(--cp-ink);
}
.howto-strip__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--cp-muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 50%;
  line-height: 1;
  transition: color 140ms ease, background-color 140ms ease;
}
.howto-strip__close:hover {
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
}
.howto-strip__foot {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cp-rule);
  font-size: 0.85rem;
  color: var(--cp-muted);
}
.howto-strip__foot .bi { color: var(--cp-oxblood); }

.howto-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
  .howto-steps { grid-template-columns: 1fr; gap: 1rem; }
}
.howto-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.howto-step__num {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
  font-family: var(--cp-font-display);
  font-weight: 700;
  font-size: 1rem;
}
.howto-step__title {
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cp-ink);
  margin: 0.15rem 0 0.2rem;
}
.howto-step__desc {
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cp-ink-soft);
  margin: 0;
}

/* Nav help ("?") menu */
.help-menu-toggle { color: var(--cp-ink-soft); }
.help-menu-toggle:hover,
.help-menu-toggle:focus { color: var(--cp-oxblood); }
.help-menu-toggle .bi { font-size: 1.15rem; }
.help-menu__header { padding: 0.4rem 1rem 0.25rem; }
.help-menu__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-muted);
  margin: 0;
}
/* Icon dropdowns — shared by the help, user, and admin menus. */
.dropdown-menu--icons .dropdown-item { display: flex; align-items: center; gap: 0.6rem; }
.dropdown-menu--icons .dropdown-item .bi {
  color: var(--cp-oxblood);
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

/* How-it-works modal: themed surface + stacked steps */
.howto-modal {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
}
.howto-modal .modal-header { border-bottom-color: var(--cp-rule); }
.howto-modal .howto-steps { grid-template-columns: 1fr; gap: 1.1rem; }


/* ---------------------------------------------------------------------------
   Custom-partner wizard (templates/critique/persona_new.html)
   A three-step guided flow with a persistent live-preview rail. Reuses the
   tier-picker, avatar-picker, and partner-card components; the .pw-* layer
   below is just the wizard chrome (stepper, layout, archetype gallery,
   focus chips, prompt disclosure).
   --------------------------------------------------------------------------- */
.pw-shell { max-width: 1060px; margin: 0 auto; }
.pw-head { margin-bottom: 1.5rem; }

/* ----- Stepper ----- */
.pw-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.pw-step {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cp-muted);
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.pw-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 1.5px solid var(--cp-rule-strong);
  background: var(--cp-ivory);
  color: var(--cp-muted);
  font-weight: 700;
  font-size: 0.92rem;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.pw-step--active { color: var(--cp-ink); }
.pw-step--active .pw-step__dot {
  background: var(--cp-oxblood);
  border-color: var(--cp-oxblood);
  color: var(--cp-ivory);
  box-shadow: var(--cp-focus-ring);
}
.pw-step--done { color: var(--cp-ink-soft); }
.pw-step--done .pw-step__dot {
  background: var(--cp-oxblood-soft);
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
}
.pw-step__bar {
  flex: 1;
  height: 2px;
  min-width: 1.25rem;
  background: var(--cp-rule);
  border-radius: 2px;
  transition: background-color 220ms ease;
}
.pw-step__bar--done { background: var(--cp-oxblood); }
@media (max-width: 560px) {
  .pw-step__label { display: none; }
}

/* ----- Two-column layout ----- */
.pw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .pw-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

.pw-panel {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--cp-shadow-sm);
  padding: 1.85rem 2rem 1.65rem;
}
@media (max-width: 560px) {
  .pw-panel { padding: 1.35rem 1.2rem 1.2rem; }
}
.pw-panel__intro { margin-bottom: 1.5rem; }
.pw-panel__title {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0 0 0.4rem;
  color: var(--cp-ink);
}
.pw-panel__lede {
  font-family: var(--cp-font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--cp-ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ----- Step 1: archetype gallery ----- */
.pw-archetype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 0.85rem;
}
.pw-archetype {
  --partner-accent: var(--cp-gold-2);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
  padding: 1.05rem 1.1rem;
  background: var(--cp-paper);
  border: 1px solid var(--cp-rule);
  border-left: 3px solid var(--partner-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.pw-archetype:hover,
.pw-archetype:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--cp-shadow-md);
  border-color: var(--partner-accent);
  background: var(--cp-ivory);
  outline: none;
}
.pw-archetype__mark {
  flex-shrink: 0;
  width: 2.7rem;
  height: 2.7rem;
  color: var(--partner-accent);
}
.pw-archetype__mark .partner-portrait-svg { width: 100%; height: 100%; display: block; }
.pw-archetype__mark--scratch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--cp-rule-strong);
  border-radius: 50%;
  color: var(--cp-muted);
  font-size: 1.1rem;
}
.pw-archetype__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pw-archetype__name {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--cp-ink);
}
.pw-archetype__blurb {
  font-family: var(--cp-font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--cp-ink-soft);
}
.pw-archetype__go {
  margin-left: auto;
  align-self: center;
  color: var(--cp-rule-strong);
  font-size: 1.05rem;
  transition: color 160ms ease, transform 160ms ease;
}
.pw-archetype:hover .pw-archetype__go,
.pw-archetype:focus-visible .pw-archetype__go {
  color: var(--partner-accent);
  transform: translateX(2px);
}
.pw-archetype--scratch {
  --partner-accent: var(--cp-rule-strong);
  background: transparent;
  border-style: dashed;
}

/* ----- Step 1: describe + escape hatch ----- */
.pw-describe { margin-top: 1.5rem; }
.pw-describe__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.4rem 0;
  cursor: pointer;
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cp-oxblood);
}
.pw-describe__toggle:hover { color: var(--cp-oxblood-2); }
.pw-describe__body { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }
.pw-describe__input {
  width: 100%;
  background: var(--cp-paper);
  border: 1px solid var(--cp-rule-strong);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
  font-family: var(--cp-font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--cp-ink);
  resize: vertical;
}
.pw-describe__input:focus { outline: none; border-color: var(--cp-oxblood); box-shadow: var(--cp-focus-ring); }
.pw-escape {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cp-rule);
  font-size: 0.92rem;
  color: var(--cp-muted);
}
.pw-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cp-oxblood);
  font: inherit;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.pw-link:hover { border-bottom-color: var(--cp-oxblood); }
.pw-link--muted { color: var(--cp-muted); font-weight: 500; margin-left: auto; }
.pw-link--muted:hover { color: var(--cp-oxblood); border-bottom-color: var(--cp-oxblood); }

/* ----- Step 2/3: premium form fields -----
   Roomy inputs on warm paper with a clear oxblood focus ring. Fields group
   under quiet section labels so the long questionnaire reads as a few calm
   blocks rather than a wall of inputs. */
.pw-section {
  padding: 1.6rem 0;
  border-top: 1px solid var(--cp-rule);
}
.pw-section:first-child { padding-top: 0.25rem; border-top: none; }
.pw-section__label {
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-oxblood);
  margin: 0 0 1.1rem;
}
.pw-field { margin-bottom: 1.35rem; }
.pw-field:last-child { margin-bottom: 0; }
.pw-field__label {
  display: block;
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cp-ink);
  margin: 0 0 0.15rem;
  letter-spacing: 0;
  text-transform: none;
}
.pw-field__label--sub { font-size: 0.98rem; }
.pw-field__optional {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--cp-muted);
  font-style: italic;
  margin-left: 0.3rem;
}
.pw-field__hint {
  margin: 0 0 0.6rem;
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cp-muted);
  max-width: 64ch;
}
.pw-field__error {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
  color: var(--cp-danger);
}

/* The premium input surface. Element-qualified so it cleanly wins over the
   base form.cp-form input/textarea rules. */
form.cp-form .pw-input,
form.cp-form input.pw-input,
form.cp-form textarea.pw-input {
  width: 100%;
  background: var(--cp-field);
  border: 1.5px solid var(--cp-rule-strong);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  font-family: var(--cp-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cp-ink);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
form.cp-form .pw-input:hover { border-color: var(--cp-oxblood); }
form.cp-form .pw-input:focus,
form.cp-form input.pw-input:focus,
form.cp-form textarea.pw-input:focus {
  outline: none;
  border-color: var(--cp-oxblood);
  background: var(--cp-field);
  box-shadow: var(--cp-focus-ring);
}
form.cp-form .pw-input::placeholder { color: var(--cp-muted); opacity: 0.7; }
.pw-textarea { resize: vertical; min-height: 5.5rem; }
.pw-textarea--tall { min-height: 9.5rem; }
.pw-field-check { margin-bottom: 0; }

/* Temperament toggle tags */
.pw-temper { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pw-temper__tag {
  padding: 0.45rem 0.95rem;
  background: var(--cp-paper);
  color: var(--cp-ink-soft);
  border: 1.5px solid var(--cp-rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.pw-temper__tag:hover { border-color: var(--cp-oxblood); color: var(--cp-oxblood); transform: translateY(-1px); }
.pw-temper__tag--on {
  background: var(--cp-oxblood-soft);
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood-2);
  box-shadow: 0 0 0 1px var(--cp-oxblood) inset;
}

/* Focus example "starters" — tap to insert guidance into the free-text box */
.pw-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}
.pw-example {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  background: var(--cp-paper-2);
  color: var(--cp-ink-soft);
  border: 1px dashed var(--cp-rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--cp-font-body);
  font-size: 0.83rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.pw-example:hover {
  border-style: solid;
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
  background: var(--cp-ivory);
}
.pw-example .bi { font-size: 0.85rem; flex-shrink: 0; }

/* Two-up field row (Meet step: name + tagline). Collapses on narrow screens. */
.pw-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 620px) { .pw-grid-2 { grid-template-columns: 1fr; gap: 0; } }
.pw-grid-2 .pw-field { margin-bottom: 1.35rem; }

/* "Start over" — a quiet button pushed to the right of the action row. */
.pw-startover { margin-left: auto; }
.pw-startover .bi { font-size: 0.85rem; }

/* Focus tip — a clean editorial callout (distinct from the warm chat bubbles)
   that sells specializing a partner. White field + a gold accent rail. */
.pw-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.1rem;
  background: var(--cp-field);
  border: 1px solid var(--cp-rule);
  border-left: 3px solid var(--cp-gold-2);
  border-radius: var(--radius-md);
}
.pw-tip .bi { color: var(--cp-gold-2); font-size: 1.05rem; margin-top: 0.1rem; flex-shrink: 0; }
.pw-tip p {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--cp-ink-soft);
}
.pw-tip strong { color: var(--cp-ink); }

/* In-progress / restored-draft bar on the Describe step. */
.pw-resume-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.2rem;
  padding: 0.6rem 0.65rem 0.6rem 0.95rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-md);
}
.pw-resume-bar__text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--cp-font-body);
  font-size: 0.9rem;
  color: var(--cp-ink-soft);
}
.pw-resume-bar__text .bi { color: var(--cp-muted); }
.pw-resume-bar .btn { margin-left: auto; }

/* ----- Step 1: conversational composer -----
   A light chat thread above a generous free-text composer. The agent reads
   the writer's description and either asks one follow-up or drafts. */
.pw-chat {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.25rem 0.25rem 0.5rem;
  margin-bottom: 1.1rem;
}
.pw-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 92%;
}
.pw-msg--agent { align-self: flex-start; }
.pw-msg--you { align-self: flex-end; flex-direction: row-reverse; }
.pw-msg__avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cp-oxblood);
  color: var(--cp-ivory);
  font-size: 0.95rem;
}
.pw-msg__bubble {
  font-family: var(--cp-font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-lg);
  white-space: pre-wrap;
}
.pw-msg--agent .pw-msg__bubble {
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-top-left-radius: var(--radius-sm);
  color: var(--cp-ink);
}
.pw-msg--you .pw-msg__bubble {
  background: var(--cp-oxblood-soft);
  border: 1px solid rgba(122, 38, 48, 0.22);
  border-top-right-radius: var(--radius-sm);
  color: var(--cp-ink);
}
.pw-msg--typing .pw-msg__bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cp-muted);
  font-style: italic;
}

.pw-composer {
  border: 1.5px solid var(--cp-rule-strong);
  border-radius: var(--radius-lg);
  background: var(--cp-field);
  padding: 0.4rem 0.4rem 0.55rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pw-composer:focus-within {
  border-color: var(--cp-oxblood);
  box-shadow: var(--cp-focus-ring);
  background: var(--cp-field);
}
.pw-composer__input {
  width: 100%;
  border: none;
  background: transparent;
  resize: vertical;
  min-height: 5rem;
  padding: 0.6rem 0.7rem;
  font-family: var(--cp-font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--cp-ink);
}
.pw-composer__input:focus { outline: none; }
.pw-composer__input::placeholder { color: var(--cp-muted); opacity: 0.75; }
.pw-composer__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem 0.15rem;
}
.pw-composer__hint {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--cp-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pw-composer__send { flex-shrink: 0; }
.pw-composer__bar .pw-link { white-space: nowrap; }

/* "suggested for you" note beside a review section label */
.pw-section__note {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cp-muted);
  font-style: italic;
}

/* ----- Action rows ----- */
.pw-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.pw-actions .btn-arrow .cp-spinner { margin-left: 0.4rem; }
.pw-actions__hint { font-size: 0.86rem; color: var(--cp-muted); font-style: italic; }
.pw-gen-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(162, 58, 58, 0.08);
  color: var(--cp-danger);
  border: 1px solid rgba(162, 58, 58, 0.3);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.pw-gen-error .bi { margin-top: 0.1rem; }

/* ----- Step 3: prompt disclosure ----- */
.pw-prompt-field { border-top: 1px solid var(--cp-rule); padding-top: 1.4rem; }
.pw-prompt-head { display: flex; align-items: center; }
.pw-prompt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cp-ink);
}
.pw-prompt-toggle:hover { color: var(--cp-oxblood); }
.pw-prompt-toggle .bi { color: var(--cp-oxblood); }
.pw-prompt-note { margin: 0.6rem 0 0.6rem; max-width: 60ch; }
.pw-prompt-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  font-size: 0.92rem;
  color: var(--cp-success);
}

/* ----- Live preview rail ----- */
.pw-preview { position: sticky; top: 1.75rem; }
@media (max-width: 900px) {
  .pw-preview { position: static; order: -1; }
}
.pw-preview__eyebrow {
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-muted);
  margin: 0 0 0.6rem;
}
.pw-preview__card {
  /* the partner-card hover lift is for clickable cards; this is a preview */
  cursor: default;
}
.pw-preview__card:hover { transform: none; box-shadow: var(--cp-shadow-sm); }
.pw-preview__mark { display: inline-flex; width: 100%; height: 100%; color: var(--partner-accent, var(--cp-gold-2)); }
.pw-preview__mark .partner-portrait-svg { width: 100%; height: 100%; }
.pw-preview__caption {
  margin: 0.85rem 0 0;
  font-family: var(--cp-font-body);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cp-muted);
}

/* ---------------------------------------------------------------------------
   Story timeline builder (drafting tools) — templates/drafting/story_timeline.html
   Interactive plotting canvas: markers on an SVG curve with laned labels.
   Geometry (positions, shape clip-paths, character colors) is bound inline
   by static/js/story_timeline.js; everything static lives here on tokens so
   both themes work.
   --------------------------------------------------------------------------- */

/* Drafting-tools sidebar card — reuses the bible-card component with an
   oxblood accent and a miniature of the timeline canvas as its hook. */
.drafting-card {
  border-left-color: var(--cp-oxblood);
}
.drafting-card::before {
  background:
    radial-gradient(ellipse 40% 60% at 0% 0%, rgba(122, 38, 48, 0.07), transparent 60%);
}
.drafting-card .bible-card__heading {
  margin-bottom: 0.35rem;
}
.drafting-card__art {
  margin: 0.5rem 0 0.75rem;
}
.drafting-card__art svg {
  display: block;
  width: 100%;
  height: auto;
}
.drafting-card__line-under { stroke: var(--cp-rule); opacity: 0.55; }
.drafting-card__line { stroke: var(--cp-ink); opacity: 0.85; }
.drafting-card__peak {
  fill: var(--cp-gold);
  stroke: var(--cp-ivory);
}

.stb-head-actions { align-items: center; }
.stb-status {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cp-muted);
}
.stb-status.is-ok { color: var(--cp-success); }
.stb-status.is-error { color: var(--cp-danger); }
.stb-status.is-dirty { color: var(--cp-gold-2); font-style: italic; }

/* --- Timeline card --- */
.stb-card {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--cp-shadow-md);
  overflow: hidden;
}
.stb-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--cp-rule);
}

/* Segmented format toggle */
.stb-seg {
  display: flex;
  gap: 0.25rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
}
.stb-seg__btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  font-family: var(--cp-font-body);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--cp-ink-soft);
  white-space: nowrap;
}
.stb-seg__btn.is-active {
  background: var(--cp-ivory);
  color: var(--cp-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--cp-rule-strong) inset;
}
.stb-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--cp-muted);
  font-style: italic;
}

/* Filter row — chips double as the legend */
.stb-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--cp-rule);
}
.stb-filter__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-gold-2);
  margin-right: 0.2rem;
}
.stb-filter__divider {
  width: 1px;
  height: 1.1rem;
  background: var(--cp-rule);
  margin: 0 0.35rem;
}
.stb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--cp-rule-strong);
  background: var(--cp-ivory);
  color: var(--cp-ink);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--cp-font-body);
}
.stb-chip.is-active {
  border-color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
  color: var(--cp-oxblood);
}
.stb-chip__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.stb-clear {
  background: none;
  border: none;
  color: var(--cp-oxblood);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--cp-font-body);
}
.stb-sort { margin-left: auto; }

/* Canvas — horizontal-scroll track */
.stb-canvas-outer {
  overflow-x: auto;
  overflow-y: hidden;
}
.stb-canvas {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.stb-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.stb-line--under { stroke: var(--cp-rule); stroke-width: 6; opacity: 0.55; }
.stb-line--over { stroke: var(--cp-ink); stroke-width: 2; opacity: 0.85; }

/* Arc climax handle + draw points */
.stb-peak {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cp-gold);
  border: 2.5px solid var(--cp-ivory);
  box-shadow: 0 0 0 1.5px var(--cp-gold-2), 0 2px 6px rgba(20, 16, 8, 0.3);
  cursor: grab;
  touch-action: none;
  z-index: 35;
}
.stb-pt {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cp-ivory);
  border: 2.5px solid var(--cp-gold);
  box-shadow: 0 1px 4px rgba(20, 16, 8, 0.25);
  cursor: grab;
  touch-action: none;
  z-index: 34;
}

/* Markers */
.stb-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.stb-marker__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--cp-oxblood) 55%, transparent);
  background: color-mix(in srgb, var(--cp-oxblood) 7%, transparent);
  display: none;
  pointer-events: none;
  z-index: 0;
}
.stb-marker.is-selected .stb-marker__ring { display: block; }
/* Straight connector from the marker to its label lane — sits UNDER the shape. */
.stb-marker__leader {
  position: absolute;
  left: calc(50% - 0.75px);
  width: 1.5px;
  background: color-mix(in srgb, var(--cp-oxblood) 30%, transparent);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}
.stb-marker.is-selected .stb-marker__leader {
  background: color-mix(in srgb, var(--cp-oxblood) 70%, transparent);
}
/* Horizontal title in its lane — one consistent reading direction. */
.stb-marker__label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 176px;
}
.stb-marker__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--cp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  background: color-mix(in srgb, var(--cp-ivory) 85%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}
.stb-marker__date {
  font-size: 10.5px;
  color: var(--cp-muted);
  margin-top: 1px;
}

/* Draw-mode controls + footer bar */
.stb-ctrls {
  display: flex;
  gap: 0.6rem;
  padding: 0 1.4rem 0.9rem;
}
.stb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.4rem;
  border-top: 1px solid var(--cp-rule);
}
.stb-footer__count { font-size: 0.82rem; color: var(--cp-muted); }
.stb-footer__sep { color: var(--cp-rule-strong); }
.stb-footer__zoom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.stb-fit {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule-strong);
  color: var(--cp-ink);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--cp-font-body);
  white-space: nowrap;
}
.stb-fit.is-active {
  background: var(--cp-oxblood-soft);
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
}
.stb-zoom {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-pill);
  padding: 0.15rem;
}
.stb-zoom__btn {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--cp-ink);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
}
.stb-zoom__btn:hover { background: var(--cp-ivory); }
.stb-zoom__pct {
  min-width: 2.9rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cp-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Config row: edit event / characters / event types --- */
.stb-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.5rem;
}
.stb-panel {
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--cp-shadow-sm);
}
.stb-panel--edit { border-left: 4px solid var(--cp-oxblood); }
.stb-panel h2 {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 0.2rem;
  color: var(--cp-ink);
}
.stb-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.stb-panel__head h2 { margin: 0; }
.stb-panel__lede {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--cp-muted);
}
.stb-close {
  background: none;
  border: none;
  color: var(--cp-muted);
  font-size: 1.1rem;
  cursor: pointer;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  line-height: 1;
}
.stb-close:hover {
  background: var(--cp-oxblood-soft);
  color: var(--cp-oxblood);
}

/* Fields */
.stb-field { margin-bottom: 1rem; }
.stb-field--split {
  display: flex;
  gap: 0.6rem;
}
.stb-field--date { flex: 1.4; min-width: 0; }
.stb-field--time { flex: 1; min-width: 0; }
.stb-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-ink);
  margin: 0 0 0.35rem;
}
.stb-label__aside {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cp-muted);
}
.stb-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--cp-field);
  border: 1px solid var(--cp-rule-strong);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
  color: var(--cp-ink);
}
.stb-input:focus {
  outline: none;
  border-color: var(--cp-oxblood);
  box-shadow: var(--cp-focus-ring);
}
.stb-input:disabled {
  background: var(--cp-paper-2);
  color: var(--cp-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.stb-textarea {
  font-family: var(--cp-font-serif);
  font-size: 1.02rem;
  line-height: 1.55;
  resize: vertical;
}

/* "When" mode toggle — miniature of the canvas format toggle. */
.stb-when-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.stb-when-head__label { margin: 0; }
.stb-when-toggle {
  display: flex;
  gap: 0.2rem;
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-pill);
  padding: 0.15rem;
}
.stb-when-toggle__btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.65rem;
  font-family: var(--cp-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--cp-ink-soft);
  white-space: nowrap;
}
.stb-when-toggle__btn.is-active {
  background: var(--cp-ivory);
  color: var(--cp-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--cp-rule-strong) inset;
}
.stb-field__note {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: var(--cp-muted);
}

/* Shape buttons + picker grid */
.stb-shape-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.stb-shape-btn {
  height: 2.1rem;
  padding: 0 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1.5px solid var(--cp-rule);
  background: var(--cp-field);
  color: var(--cp-ink-soft);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--cp-font-body);
  font-size: 0.8rem;
  font-weight: 600;
}
.stb-shape-btn.is-active {
  border-color: var(--cp-oxblood);
  background: var(--cp-gold-soft);
  color: var(--cp-oxblood);
}
.stb-shape-btn--row { height: 2rem; padding: 0 0.55rem; flex-shrink: 0; }
.stb-shape-btn__caret { font-size: 0.65rem; opacity: 0.6; }
.stb-shape-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
  padding: 0.6rem;
  background: var(--cp-field);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-md);
}
.stb-shape-grid--row {
  margin: 0.35rem 0 0.75rem;
}
.stb-tile {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cp-rule);
  background: var(--cp-ivory);
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
}
.stb-tile.is-active {
  border-color: var(--cp-oxblood);
  background: var(--cp-gold-soft);
}

/* Character / type manager rows */
.stb-row { border-bottom: 1px solid var(--cp-paper-2); }
.stb-row__main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
}
.stb-row__name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  font-family: var(--cp-font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cp-ink);
  padding: 0.25rem 0.1rem;
}
.stb-row__name:focus {
  outline: none;
  border-bottom-color: var(--cp-oxblood);
}
.stb-row__remove {
  background: none;
  border: none;
  color: var(--cp-rule-strong);
  font-size: 1.05rem;
  cursor: pointer;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  line-height: 1;
  padding: 0;
}
.stb-row__remove:hover {
  background: rgba(162, 58, 58, 0.08);
  color: var(--cp-danger);
}
.stb-swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--cp-ivory);
  box-shadow: 0 0 0 1.5px var(--cp-rule-strong);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.stb-swatch.is-open { box-shadow: 0 0 0 2px var(--cp-oxblood); }
.stb-color-pop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0.65rem;
  background: var(--cp-field);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-md);
}
.stb-color {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 2px solid var(--cp-ivory);
  box-shadow: 0 0 0 1.5px var(--cp-rule-strong);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.stb-color.is-active { box-shadow: 0 0 0 2px var(--cp-ink); }
.stb-custom-color {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.15rem;
  padding: 0.25rem 0.5rem;
  border: 1px dashed var(--cp-rule-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--cp-ink-soft);
  font-family: var(--cp-font-body);
}
.stb-custom-color input[type="color"] {
  width: 1.4rem;
  height: 1.4rem;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.stb-add {
  margin-top: 0.85rem;
  background: transparent;
  border: 1px dashed var(--cp-rule-strong);
  color: var(--cp-ink-soft);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--cp-font-body);
  width: 100%;
}
.stb-add:hover {
  border-color: var(--cp-oxblood);
  color: var(--cp-oxblood);
  background: var(--cp-oxblood-soft);
}