/* Characters surface — shared styles for both directions */

/* ---- View toggle (Dossier / Constellation) ---- */
.cast-view-tabs {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-2);
  border-radius: 8px;
  border: 1px solid var(--line-soft);
}
.cast-view-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px;
  border: none; background: transparent;
  border-radius: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
}
.cast-view-tab:hover { color: var(--ink); }
.cast-view-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.cast-view-tab.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: auto; }
.cast-view-tab.disabled:hover { color: var(--ink-3); }
.cast-tab-sep { display: inline-block; width: 1px; height: 22px; background: var(--line); margin: 0 6px; }

/* ============================================================
   DIRECTION A — DOSSIER
   ============================================================ */

.cast-stage {
  display: grid;
  grid-template-columns: 264px 1fr 320px;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  background: var(--paper);
}

/* ---- Left rail ---- */
.cast-rail {
  border-right: 1px solid var(--line);
  background: var(--paper);
  padding: 18px 12px 14px;
  overflow: auto;
  display: flex; flex-direction: column;
}
.cast-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.cast-filters {
  display: flex; gap: 4px;
  margin-bottom: 14px;
  padding: 3px;
  background: var(--paper-2);
  border-radius: 8px;
}
.cast-filter {
  flex: 1;
  height: 26px;
  border: none; background: transparent;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-3);
}
.cast-filter:hover { color: var(--ink); }
.cast-filter.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.cast-filter { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.cast-filter-tick { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }

.cast-group-label { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; }
.cast-group-tick { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cast-group-name { font-family: var(--serif); font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.cast-group-kind { font-size: 10px; color: var(--ink-4); margin-left: auto; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.cast-item-tags { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cast-also { width: 7px; height: 7px; border-radius: 2px; opacity: 0.7; }

.cast-thread-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cast-thread-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  font-size: 12px;
}
.cast-thread-tick { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.cast-thread-name { color: var(--ink); font-weight: 500; }
.cast-thread-kind {
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}

.cast-group { margin-bottom: 16px; }
.cast-group-label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); padding: 4px 8px 6px; font-weight: 600;
}
.cast-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  position: relative;
}
.cast-item:hover { background: var(--paper-2); }
.cast-item.selected {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.cast-item.selected::before {
  content: "";
  position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 2px; background: var(--accent); border-radius: 2px;
}
.cast-mono {
  width: 30px; height: 30px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.cast-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cast-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cast-role {
  font-size: 11px; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Selected card bg (#e9eae9) drops --ink-4 to 4.35:1; darken the role text there to 6.09:1. */
.cast-item.selected .cast-role { color: #575652; }
.cast-pov {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--ink); color: var(--paper);
  padding: 2px 5px; border-radius: 3px;
  flex-shrink: 0;
}

/* ---- Center page ---- */
.cast-page-wrap {
  background: var(--paper-2);
  overflow: auto;
  padding: 28px 36px 40px;
  display: flex; justify-content: center; align-items: flex-start;
}
.cast-page {
  width: 100%;
  max-width: 1080px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 36px 44px 44px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 14px 40px rgba(20,18,12,0.15);
}
.cast-page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.cast-page-eyebrow {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  display: flex; gap: 8px; align-items: center;
}
.cast-page-eyebrow .dot { color: var(--ink-5); }
.cast-page-actions { display: flex; gap: 6px; }

.cast-hero {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}
.cast-portrait {
  width: 116px; height: 144px;
  border-radius: 6px;
  display: grid; place-items: center;
  position: relative;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.cast-portrait-mono {
  font-family: var(--serif);
  font-size: 60px; font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.cast-portrait-rule {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  height: 1px; background: currentColor; opacity: 0.45;
}
.cast-name-big {
  font-size: 38px; line-height: 1.05;
  margin: -2px 0 8px;
  color: var(--ink);
}
.cast-logline {
  font-size: 16px; line-height: 1.45;
  color: var(--ink-2);
  font-style: italic;
  margin: 0 0 16px;
  max-width: 52ch;
}
.cast-attr-row {
  display: flex; flex-wrap: wrap; gap: 24px 28px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}
.attr-label {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.attr-value {
  font-family: var(--serif);
  font-size: 14.5px; color: var(--ink);
  margin-top: 2px;
  font-weight: 500;
}
.attr-suffix { color: var(--ink-4); font-weight: 400; font-size: 13px; }

.cast-section { margin-top: 28px; }
.cast-section-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  margin-bottom: 12px;
}
.cast-section-rule {
  flex: 0 0 18px; height: 1px; background: var(--ink-3);
}
.cast-prose {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.arc-strip {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 0;
  align-items: stretch;
}
.arc-panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  position: relative;
}
.arc-panel:nth-child(3) { border-color: color-mix(in oklab, var(--accent) 28%, var(--line)); }
.arc-num {
  font-family: var(--mono);
  font-size: 10px; color: var(--ink-4);
  letter-spacing: 0.04em;
}
.arc-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin: 2px 0 6px;
}
.arc-body {
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-2);
}
.arc-connector { color: var(--ink-5); align-self: center; padding: 0 2px; }

.voice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.voice-line {
  font-size: 17px; line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  padding: 10px 18px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 6px 6px 0;
}
.voice-quote {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
  font-style: normal;
  vertical-align: -3px;
  margin: 0 4px;
  font-weight: 400;
}

/* ---- Right inspector ---- */
.cast-inspector {
  border-left: 1px solid var(--line);
  background: var(--paper);
  padding: 18px 16px;
  overflow: auto;
  display: flex; flex-direction: column; gap: 22px;
}
.cast-insp-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.cast-insp-section { display: flex; flex-direction: column; gap: 8px; }
.cast-insp-label {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}

.rel-list { display: flex; flex-direction: column; gap: 4px; }
.rel-empty { color: var(--ink-4); font-size: 12px; padding: 6px 0; }
.rel-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border: none; background: transparent;
  border-radius: 6px;
  text-align: left;
}
.rel-row:hover { background: var(--paper-2); }
.rel-mono {
  width: 24px; height: 24px; border-radius: 5px;
  display: grid; place-items: center;
  color: var(--paper);
  font-family: var(--serif); font-weight: 600; font-size: 12px;
}
.rel-mid { display: flex; flex-direction: column; min-width: 0; }
.rel-other { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-label { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-source-phrase {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 3px;
  font-style: italic;
}
.rel-type {
  font-size: 9.5px; letter-spacing: 0.08em;
  font-weight: 600; text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 2px 5px; border-radius: 3px;
  opacity: 0.85;
}

.app-list { display: flex; flex-direction: column; gap: 1px; }
.app-row {
  display: grid;
  grid-template-columns: 38px 1fr 24px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
}
.app-row:first-child { border-top: 0; }
.app-ch { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.app-title { font-size: 12.5px; color: var(--ink); font-family: var(--serif); }
.app-act { font-size: 10px; color: var(--ink-4); text-align: right; font-family: var(--mono); }

.cast-quick { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.cast-quick .btn { justify-content: flex-start; }


/* ============================================================
   DIRECTION B — CONSTELLATION
   ============================================================ */

.con-stage {
  display: grid;
  grid-template-columns: 1fr 340px;
  flex: 1;
  min-height: 0;
  background: var(--paper);
}

.con-graph-wrap {
  display: flex; flex-direction: column;
  padding: 18px 22px 16px;
  min-width: 0;
  min-height: 0;
}
.con-graph-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.con-graph-sub {
  font-size: 12.5px; color: var(--ink-3);
  margin-top: 4px;
}
.con-focus em { color: var(--ink); font-style: normal; font-weight: 600; }
.con-graph-actions { display: flex; gap: 6px; }

.con-graph {
  flex: 1;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-svg { width: 100%; height: 100%; display: block; }

.con-node:hover circle:nth-child(2) {
  filter: brightness(0.95);
}

.con-legend {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.con-legend-label {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.con-legend-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.con-legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-2);
  text-transform: capitalize;
}
.con-legend-chip:hover { background: var(--paper-2); }
.con-legend-chip.off { opacity: 0.4; }

/* Side panel */
.con-side {
  border-left: 1px solid var(--line);
  background: var(--paper);
  padding: 18px 16px 0;
  overflow-y: auto;   /* was overflow:hidden -- it clipped the Arc/card, which sit */
  overflow-x: hidden; /* outside .con-side-lower. Scroll the whole panel instead.  */
  display: flex; flex-direction: column; gap: 18px;
}
.con-side-lower {
  min-height: 0;
  padding-bottom: 22px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.con-side-lower::-webkit-scrollbar { display: none; }
.con-side-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* don't let the flex column compress + clip the bio (overflow:hidden makes its flex min-size 0) */
}
.con-side-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--accent);
}
.con-side-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  padding-top: 4px;
}
.con-side-mono {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--paper);
  font-family: var(--serif); font-weight: 600; font-size: 18px;
}
.con-side-name {
  font-size: 19px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.con-side-role {
  font-size: 11.5px; color: var(--ink-4);
  margin-top: 2px;
}
.con-logline {
  font-size: 14px; line-height: 1.45;
  color: var(--ink-2);
  font-style: italic;
  margin: 6px 0 12px;
}
.con-meta { display: flex; flex-direction: column; gap: 1px; }
.con-meta-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}
.con-meta-row:first-child { border-top: 0; }
.con-meta-row span:first-child { color: var(--ink-4); }
.con-meta-row span:last-child { color: var(--ink); font-family: var(--serif); font-weight: 500; }

.con-threads { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.con-thread-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  border: 1px solid;
  background: var(--paper);
  font-size: 11px;
  font-weight: 500;
}
.con-thread-tick { width: 7px; height: 7px; border-radius: 2px; }

.con-side-label {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  margin-bottom: 8px;
}

.con-arc { padding: 0 4px; }
.con-arc-row {
  display: grid; grid-template-columns: 14px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--line-soft);
}
.con-arc-row:first-of-type { border-top: 0; }
.con-arc-tick { color: var(--ink-4); font-weight: 600; }
.con-arc-text {
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-2);
}
.con-arc-text b { color: var(--ink); font-weight: 600; }

.con-edges-list { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.con-edge-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border: none; background: transparent;
  border-radius: 6px;
  text-align: left;
}
.con-edge-row:hover { background: var(--paper-2); }
.con-edge-mono {
  width: 24px; height: 24px; border-radius: 5px;
  display: grid; place-items: center;
  color: var(--paper);
  font-family: var(--serif); font-weight: 600; font-size: 12px;
}
.con-edge-mid { display: flex; flex-direction: column; min-width: 0; }
.con-edge-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.con-edge-label { font-size: 11px; color: var(--ink-3); }
.con-edge-source-phrase {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 3px;
  font-style: italic;
  overflow-wrap: break-word;
}
.con-edge-type {
  font-size: 9.5px; letter-spacing: 0.08em;
  font-weight: 600; text-transform: uppercase;
}

/* ============================================================
   TEMPLATE-LEVEL LAYOUT RULES
   (used by design-staging/characters/template-dossier.js)
   ============================================================ */

/* ID-scoping convention: all #state-container rules must be prefixed with
   their page's app-class (.ch-app, .pa-app, .sc-app, etc.). Unscoped ID
   selectors leak across every SPA page — #state-container exists on all of them. */

/* ch-app — full-viewport grid wrapper for the Characters page shell */
.ch-app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
}
.ch-app .pb-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px 36px 40px;
  background: var(--paper);
}
.ch-app #state-container {
  flex: 1;
  min-height: 0;
  /* overflow:hidden clipped ~300px below the fold on phones with no way to
     scroll (launch blocker, verified live). The pregeneration hero has no
     inner scroller, so the state container itself must scroll. */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  /* scroll works, but no standalone scrollbar pill floating beside the hero */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ch-app #state-container::-webkit-scrollbar { display: none; width: 0; }

/* ch-empty — Characters empty state centering */
.ch-empty {
  max-width: 950px;
  margin: 0 auto;
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ch-empty .wb-eyebrow {
  margin-bottom: 0;
}
.ch-empty .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
  max-width: 56ch;
  margin: 0;
}
.ch-empty .actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ch-empty .actions .pb-btn {
  height: 38px;
  padding: 0 18px;
  font-size: 13.5px;
}
.ch-empty h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.ch-empty .world-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 22px 16px;
  margin: 20px 0 28px;
}
.ch-empty .world-card .row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 10px;
}
.ch-empty .world-card .ll {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
}
.ch-empty .world-card .open {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.ch-empty .world-card .open:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-3);
}

/* topbar-right — right slot of .pb-topbar (tab strip + controls) */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* cast-no-selection — centered placeholder when nothing is selected */
.cast-no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  color: var(--ink-4);
  font-size: 13px;
  font-style: italic;
}

/* cast-psych-grid — two-column grid for psychology fields in the dossier */
.cast-psych-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

/* Editable attribute fields (Phase 9.7d) */
.attr.editable { cursor: text; }
.attr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.attr-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.attr-value.editable {
  outline: none;
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 120ms ease;
}
.attr-value.editable:hover { background: var(--paper-2); }
.attr-value.editable:focus {
  background: var(--paper-2);
  outline: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  outline-offset: 0;
}

/* Compact chip + revert variants for inline attr rows */
.pb-edited.compact { font-size: 9.5px; letter-spacing: 0.06em; padding: 1px 5px; }
.pb-savestate.compact { font-size: 9.5px; }
.pb-revert.compact { font-size: 9.5px; padding: 1px 5px; gap: 2px; }

/* Editable logline */
.cast-logline.editable {
  outline: none;
  border-radius: 4px;
  padding: 2px 4px;
  margin-left: -4px;
  transition: background 120ms ease;
}
.cast-logline.editable:hover { background: var(--paper-2); }
.cast-logline.editable:focus {
  background: var(--paper-2);
  outline: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  outline-offset: 0;
}

/* Hide scrollbar track/thumb on inner scroll panels — scroll still works */
.cast-rail::-webkit-scrollbar,
.cast-page-wrap::-webkit-scrollbar,
.cast-inspector::-webkit-scrollbar {
  display: none;
}
.cast-rail,
.cast-page-wrap,
.cast-inspector {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ─── Knowledge tab (ported from character-knowledge.js) ─────────────────── */

.ck-loading,
.ck-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 64px;
  gap: 16px;
  color: var(--ink-3);
}

.ck-stage {
  padding: 48px 64px 80px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 14px 40px rgba(20,18,12,0.15);
  align-self: stretch;
}
.ck-stage::-webkit-scrollbar { display: none; }

.ck-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 20px;
}

.ck-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.ck-select,
.ck-input {
  font-size: 12px;
  font-family: var(--sans);
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.ck-input[type="number"] { width: 80px; }

.ck-timeline { display: flex; flex-direction: column; gap: 10px; }

.ck-no-results { font-size: 13px; color: var(--ink-4); font-style: italic; padding: 16px 0; }

.ck-char-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.ck-char-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
}
.ck-char-toggle:hover { background: var(--paper); }

.ck-ch-chevron {
  display: inline-flex;
  color: var(--ink-4);
  transition: transform 0.2s ease;
}
.ck-char-group.expanded .ck-ch-chevron { transform: rotate(180deg); }

.ck-char-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  flex: 1;
}

.ck-char-pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: none;
  border: none;
  padding: 0;
}

.ck-char-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ck-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}

.ck-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ck-chapter-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.ck-source-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.ck-source-story_state,
.ck-source-story_state_extraction { background: rgba(99,102,241,0.1); color: rgb(79,70,229); }
.ck-source-overheard   { background: rgba(168,85,247,0.1); color: rgb(147,51,234); }
.ck-source-told        { background: rgba(59,130,246,0.1); color: rgb(37,99,235); }
.ck-source-witnessed,
.ck-source-direct,
.ck-source-sees        { background: rgba(34,197,94,0.1); color: rgb(22,163,74); }
.ck-source-unknown     { background: var(--paper-2); color: var(--ink-3); }

.ck-card-fact {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}

.ck-card-source {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-4);
  margin-top: 4px;
}

@keyframes ck-chapter-flash {
  0%   { background-color: rgba(250, 204, 21, 0.3); }
  100% { background-color: transparent; }
}
.ck-chapter-flash { animation: ck-chapter-flash 1.5s ease-out; }

/* ============================================================
   RESPONSIVE — fluid reflow, retractable side panels.
   Desktop (>= 1321px) keeps the original 3-column dossier layout.
   .cast-stage receives an inline grid-template-columns from the
   page module, so these overrides need !important.
   ============================================================ */

.pb-main { min-width: 0; }
.pb-topbar { min-width: 0; }
.crumbs { min-width: 0; }

.topbar-right { min-width: 0; flex-wrap: wrap; }
.cast-view-tabs {
  min-width: 0; max-width: 100%;
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin;
}
.cast-view-tab { flex: 0 0 auto; white-space: nowrap; }

.cast-rail, .cast-page-wrap, .cast-inspector,
.con-graph-wrap, .con-side { min-width: 0; }

.cast-insp-toggle { display: none; }

/* <=1320: cast list stacks on top (retracts upward), middle is the main
   column, Connections retracts to the right as an overlay. Trigger is 1320
   so the middle info panel never gets crushed in the 1101-1320 band. */
@media (max-width: 1320px) {
  .cast-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
  }

  /* --- Left cast drawer --- */
  .cast-stage .cast-rail {
    position: absolute; top: 0; left: 0; height: 100%;
    width: 264px; max-width: 86vw; z-index: 22;
    border-right: 1px solid var(--line);
    padding: 18px 12px 14px; overflow: auto;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: 8px 0 24px rgba(20,18,12,0.12);
  }
  .cast-stage.cast-rail-open .cast-rail { transform: translateX(0); }
  .cast-stage .__ch-rlh { display: flex !important; }

  /* --- Right Connections panel: retractable overlay --- */
  .cast-inspector {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: min(340px, 86%);
    border-left: 1px solid var(--line);
    border-top: 0;
    background: var(--paper);
    box-shadow: -8px 0 24px rgba(20,18,12,0.12);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 20;
    overflow: auto;
  }
  .cast-stage.inspector-open .cast-inspector { transform: translateX(0); }

  .cast-insp-scrim {
    position: absolute; inset: 0;
    background: rgba(20,18,12,0.28);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 15;
  }
  .cast-stage.inspector-open .cast-insp-scrim { opacity: 1; pointer-events: auto; }

  .cast-insp-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute;
    top: 14px; right: 0;
    width: 30px; height: 46px;
    border: 1px solid var(--line); border-right: 0;
    border-radius: 8px 0 0 8px;
    background: var(--paper); color: var(--ink-4);
    cursor: pointer; padding: 0; z-index: 25;
    box-shadow: -3px 0 10px rgba(20,18,12,0.08);
    transition: transform 0.22s ease;
  }
  .cast-insp-toggle svg { width: 16px; height: 16px; transition: transform 0.22s ease; }
  .cast-stage.inspector-open .cast-insp-toggle { transform: translateX(calc(-1 * min(340px, 86%))); }
  .cast-stage.inspector-open .cast-insp-toggle svg { transform: rotate(180deg); }
}

/* CONSTELLATION drops below at its own narrower trigger (1100), kept separate
   from the 1320 cast-stage trigger above. */
@media (max-width: 1100px) {
  .con-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .con-graph-wrap { min-height: 420px; }
  .con-side {
    grid-column: 1 / -1;
    border-left: 0; border-top: 1px solid var(--line);
    overflow: visible;
  }
}

/* <=899: sidebar collapses to the 60px icon-rail */
@media (max-width: 899px) {
  .ch-app, .ch-app.no-rail { grid-template-columns: 60px minmax(0, 1fr); }

  .cast-psych-grid { grid-template-columns: minmax(0, 1fr); }
  .arc-strip { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .con-graph-wrap { min-height: 360px; }
  .ck-stage { padding: 28px 22px 60px; }
}

/* Phone */
@media (max-width: 560px) {
  .cast-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cast-page-wrap { padding: 18px 16px 28px; }
  .cast-inspector { width: min(320px, 90%); }
  .ck-stage { padding: 20px 14px 48px; }
  .con-graph-wrap { min-height: 300px; }
}

/* ===== Characters: cast-rail as LEFT drawer (two side tabs) =====
   Replaces the top "CAST" pill with a left-edge drawer that mirrors the
   connections inspector. Base handle/scrim declared first so the media
   display:flex wins. */
.cast-stage .__ch-rlh{display:none;align-items:center;justify-content:center;position:absolute;
  top:14px;left:0;width:30px;height:46px;border:1px solid var(--line);border-left:0;
  border-radius:0 8px 8px 0;background:var(--paper,#fbfaf6);color:#6b6478;cursor:pointer;z-index:25;
  box-shadow:6px 0 16px rgba(20,18,12,.10);font-size:14px;padding:0;appearance:none;-webkit-appearance:none;font-family:inherit;}
.cast-stage .__ch-rlh svg{width:16px;height:16px;transition:transform .2s ease;}
.cast-stage.cast-rail-open .__ch-rlh svg{transform:rotate(180deg);}
.cast-stage .__ch-rl-scrim{display:none;position:absolute;inset:0;background:rgba(20,16,40,.26);z-index:19;}
.cast-stage.cast-rail-open .__ch-rl-scrim{display:block;}

/* ============================================================
   <=768 — topbar + tab strip + constellation (mobile batch 6)
   ============================================================ */
@media (max-width: 768px) {
  /* The view-tab strip becomes its own full-width row under the breadcrumb
     (the topbar wraps via premise.css). Shared by every page that renders
     .cast-view-tabs in .topbar-right — characters AND threads. */
  .pb-topbar .topbar-right {
    /* flex-shrink must be 0: a shrinkable 100%-basis item just shrinks onto
       the crumbs' line instead of wrapping onto its own full-width row */
    flex: 0 0 100%;
    min-width: 0;
    margin-left: 0;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; row-gap: 6px;
  }
  /* Doubled-context selectors: threads.css declares top-level
     .cast-view-tab { flex: 0 0 auto } / .cast-view-tabs { scrollbar-width: thin }
     and loads after this sheet — the extra class outranks it at <=768. */
  .topbar-right .cast-view-tabs {
    /* full row, edge to edge of the topbar's content box — Find wraps below,
       so the scroll area is maximal when the tabs overflow */
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .topbar-right .cast-view-tabs::-webkit-scrollbar { display: none; }
  .cast-view-tabs .cast-view-tab {
    height: 38px;            /* + the strip's 3px padding = 44px touch row */
    padding: 0 14px;
    white-space: nowrap;
    /* few tabs (threads): stretch to equal shares of the row; many tabs
       (characters' 7 views): min-width:auto keeps each at content size, the
       strip overflows, and the batch-6 horizontal scroll takes over */
    flex: 1 1 0;
    justify-content: center;
    scroll-snap-align: start;
  }
  .cast-tab-sep { display: none; }
  #charFindBtn { flex: 0 0 auto; height: 38px; }

  /* Breadcrumb project name truncates like the draft topbar fix */
  .pb-topbar .crumbs .here {
    max-width: 42vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-block; vertical-align: bottom;
  }

  /* Constellation: graph full-width, side card stacks below; the SVG keeps
     its compact viewBox aspect (character.js renders 380x460 units here).
     The padding diet matters: it keeps the card ~316px wide at 360, i.e.
     viewBox scale ~0.83, which is what holds node circles at ~36-43px. */
  .ch-app .pb-main { padding: 16px 12px 28px; }
  .con-graph-wrap { padding: 12px 10px; min-height: 0; }
  /* block flow, natural heights: the desktop grid is viewport-height-locked,
     which squeezed the graph and clipped the bottom ring; #state-container
     already scrolls (launch-blocker fix), so let the stage be tall. */
  .con-stage { display: block; }
  .con-graph { flex: none; }
  .con-svg { height: auto; }
  .con-graph-head { flex-wrap: wrap; gap: 8px; }
  .con-side {
    border-left: none;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  .con-side-lower { overflow-y: visible; }
  .con-legend { flex-wrap: wrap; }
}

/* ===== Arc-page (antagonist / protagonist) content blocks =====
   aa-* classes were orphaned from a removed template; styled here to
   match the dossier's cast-section / arc-panel aesthetic. Additive only. */

/* Goals / Need */
.aa-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aa-goal {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px;
}
.aa-goal-private {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 28%, var(--line));
}
.aa-goal-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}

/* Ladder (pressure / transformation rungs) */
.aa-ladder { display: flex; flex-direction: column; gap: 12px; }
.aa-rung {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px;
}
.aa-rung-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.aa-rung-num { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.aa-rung-act { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.aa-rung-method { font-size: 12px; font-style: italic; color: var(--ink-3); }
.aa-rung-body { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.aa-heat { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.aa-heat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.aa-heat-dot.on { background: var(--accent); }

/* Inspector list (Vulnerabilities / Arc notes) */
.aa-leverage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aa-lev-row { display: grid; grid-template-columns: 8px 1fr; gap: 10px; align-items: start; }
.aa-lev-mark { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.aa-lev-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aa-lev-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.aa-lev-note { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* Defeat / current state */
.aa-defeat {
  margin-top: 12px; background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line));
  border-radius: 8px; padding: 12px 14px;
}
.aa-defeat-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

/* Empty states */
.aa-empty { font-size: 13px; font-style: italic; color: var(--ink-4); padding: 6px 0; }

/* Arc checks (inspector) */
.aa-collisions { display: flex; flex-direction: column; gap: 10px; }
.aa-coll { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.aa-coll-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.aa-coll-weight { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.aa-coll-title { font-size: 14px; line-height: 1.4; color: var(--ink); }
.aa-coll-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }

@media (max-width: 899px) {
  .aa-goals { grid-template-columns: minmax(0, 1fr); }
}