/* Premise — Plot Architect: design tokens */

:root {
  /* Paper-cream foundation */
  --paper:        #FBFAF6;
  --paper-2:      #F5F2EC;
  --paper-3:      #EFEBE2;
  --surface:      #FFFFFF;
  --line:         #E6E1D5;
  --line-2:       #D9D3C3;
  --line-soft:    #EFEBE2;

  /* Ink */
  --ink:          #1B1B1A;
  --ink-2:        #3D3D3A;
  --ink-3:        #6B6B66;
  --ink-4:        #6D6C68;
  --ink-5:        #716F6C;

  /* Brand violet — refined, calmer than the marketing site */
  --violet:       #6E5BCF;
  --violet-soft:  #EFEBFA;
  --violet-deep:  #463A95;

  /* Accent — fallback; overridden per-character via inline style */
  --accent:       #5B6FA6;
  --accent-soft:  color-mix(in oklab, #5B6FA6 12%, #FBFAF6);

  /* Status */
  --ok:           #4F7A6A;
  --warn:         #B8693B;
  --bad:          #A14444;

  /* Thread kind colors — semantic names for Coverage Grid and future surfaces */
  --thread-primary: #8B5CF6;
  --thread-subplot: #3B82F6;
  --thread-twist:   #F59E0B;

  /* Generic accent hues — neither violet nor warn */
  --accent-blue:  #3B82F6;
  --accent-amber: #F59E0B;

  /* Soft tints — status backgrounds, gap highlights, empty cells */
  --warn-soft:    #FEF3C7;
  --paper-2-soft: #F9FAFB;

  /* Type */
  --serif:        'Newsreader', 'Source Serif Pro', Georgia, serif;
  --sans:         'Geist', 'Söhne', -apple-system, system-ui, sans-serif;
  --mono:         'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing rhythm */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
  --r-lg: 16px; --r-xl: 24px; --r-2xl: 40px;

  /* Radius */
  --rad-sm: 4px;
  --rad: 8px;
  --rad-lg: 12px;
  --rad-xl: 16px;

  /* Font-size tokens — minimum 12px chrome, 15px content body */
  --text-xs:   12px;   /* chrome floor: labels, badges, metadata */
  --text-sm:   13px;   /* helper / status text */
  --text-base: 15px;   /* secondary body content */
  --text-md:   16px;   /* default body content */
  --text-lg:   17px;   /* prominent body / lede */
  --text-xl:   18px;   /* leading paragraphs */
  --text-2xl:  28px;   /* section headings */
  --text-3xl:  48px;   /* page titles */
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* Focusable scroll regions: role="group" containers and complementary <aside>s that carry
   tabindex="0" for keyboard scroll get the app's canonical violet focus ring instead of the UA
   default (a ~1px near-black outline, invisible on dark surfaces). These are overflow containers,
   so the ring is drawn INSET — an outside offset is clipped by an overflow ancestor (verified on
   the coverage grid). Matches exactly: .dm-rail-list, the thread coverage grid, .cast-page-wrap,
   .th-insp, .cast-inspector. */
[role="group"][tabindex="0"]:focus-visible,
aside[tabindex="0"]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: -2px;
}

/* Editorial display */
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
.serif-display { font-family: var(--serif); font-weight: 600; letter-spacing: -0.022em; }

/* Eyebrow */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}

/* Generic chip */
.pdb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--line-soft);
}

/* Scrollbars — quiet */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-5); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* App shell — sidebar + topbar shared across the layouts */
#app { height: 100%; }
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100%;
  background: var(--paper);
}
.sidebar {
  border-right: 1px solid var(--line);
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
  gap: 4px;
  overflow: hidden;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.sidebar .brand .mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.sidebar .brand .name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.sidebar .project {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  margin-bottom: 14px;
  background: var(--surface);
}
.sidebar .project .title { font-family: var(--serif); font-size: 14.5px; font-weight: 600; }
.sidebar .project .sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }

.nav-group { margin-top: 14px; }
.nav-group-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); padding: 6px 10px 4px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}
.nav-item:hover { background: var(--paper-2); }
.nav-item.active { background: var(--ink); color: var(--paper); }
.nav-item.active .nav-dot { background: var(--paper); }
.nav-item svg { width: 15px; height: 15px; opacity: 0.75; }
.nav-item.active svg { opacity: 1; }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topbar .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.topbar .crumbs .sep { color: var(--ink-5); }
.topbar .crumbs .here { color: var(--ink); font-weight: 500; }
.topbar .actions { display: flex; align-items: center; gap: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.btn:hover { background: var(--paper-2); }
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.primary:hover { background: var(--ink-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn.sm { height: 26px; padding: 0 8px; font-size: 12px; }
.btn.violet { background: var(--violet); color: white; border-color: var(--violet); }
.btn.violet:hover { background: var(--violet-deep); border-color: var(--violet-deep); }

.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 6px; border: 1px solid transparent; background: transparent;
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { width: 16px; height: 16px; }