/* ============================================================
   Story Builder, a writer's desk at night
   ============================================================ */

:root {
  /* ink & parchment */
  --ink-900: #0c0a09;
  --ink-850: #100e0c;
  --ink-800: #14110f;
  --ink-750: #191512;
  --ink-700: #1f1a16;
  --ink-600: #2a231d;
  --ink-500: #372e26;
  --line:    #2c2521;
  --line-soft: #241e1a;

  --parch-100: #f6ecdd;
  --parch-200: #e8dcc8;
  --parch-300: #cfc0a8;
  --parch-400: #a1917c;
  --parch-500: #7b6e5d;

  /* ember accent */
  --ember: #e08a45;
  --ember-hot: #f2a45f;
  --ember-dim: rgba(224, 138, 69, 0.16);
  --ember-line: rgba(224, 138, 69, 0.34);
  --brass: #c9a227;

  /* tiers */
  --tier-main: #d9b45b;
  --tier-key: #4fb3a5;
  --tier-bg: #7e8a99;

  /* semantics */
  --err: #e2635c;
  --warn: #d9a441;
  --note: #6f9fd8;
  --ok: #62b98a;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --shadow-1: 0 1px 2px var(--well-3), 0 2px 10px var(--well-2);
  --shadow-2: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-3: 0 30px 80px rgba(0,0,0,.6);

  --sidebar-w: 258px;
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;

  /* ---------------------------------------------------------------
     Derived tokens. Everything below is expressed in terms of the
     palette above, so a theme only has to restate the palette.
     --fg drives "lift" tints and --shade drives "well" tints, which is
     what makes light themes invert correctly instead of washing out.
     --------------------------------------------------------------- */
  --fg: var(--parch-100);
  --shade: #000;
  --accent: var(--ember);

  --surface-1: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-750);
  --surface-4: var(--ink-700);
  --panel-bg: color-mix(in srgb, var(--ink-800) 60%, transparent);
  --card-a: color-mix(in srgb, var(--ink-700) 82%, transparent);
  --card-b: color-mix(in srgb, var(--ink-800) 86%, transparent);
  --hero-a: color-mix(in srgb, var(--ink-600) 60%, var(--ink-800));
  --hero-b: color-mix(in srgb, var(--ink-850) 86%, transparent);
  --major-a: color-mix(in srgb, var(--ember) 12%, var(--ink-800));
  --sidebar-a: color-mix(in srgb, var(--ink-750) 86%, transparent);
  --sidebar-b: color-mix(in srgb, var(--ink-850) 86%, transparent);
  --fade-bottom: color-mix(in srgb, var(--ink-850) 95%, transparent);
  --bg-grad-b: var(--ink-900);
  --bg-grad-c: color-mix(in srgb, var(--ink-900) 90%, var(--shade));

  --lift-0: color-mix(in srgb, var(--fg) 2%, transparent);
  --lift-1: color-mix(in srgb, var(--fg) 3%, transparent);
  --lift-2: color-mix(in srgb, var(--fg) 5%, transparent);
  --lift-3: color-mix(in srgb, var(--fg) 7%, transparent);
  --lift-4: color-mix(in srgb, var(--fg) 10%, transparent);
  --well-1: color-mix(in srgb, var(--shade) 20%, transparent);
  --well-2: color-mix(in srgb, var(--shade) 26%, transparent);
  --well-3: color-mix(in srgb, var(--shade) 40%, transparent);
  --scrim: color-mix(in srgb, var(--shade) 62%, transparent);
  --shadow-drop: color-mix(in srgb, var(--shade) 40%, transparent);

  --line-strong: color-mix(in srgb, var(--fg) 18%, var(--line));
  --scroll-thumb: color-mix(in srgb, var(--fg) 12%, var(--ink-800));
  --track: color-mix(in srgb, var(--fg) 12%, var(--ink-700));
  --placeholder: var(--parch-500);
  --dot-off: color-mix(in srgb, var(--parch-500) 70%, var(--ink-700));
  --on-accent: var(--ink-900);
  --accent-edge: color-mix(in srgb, var(--ember) 74%, var(--shade));
  --accent-edge-hot: color-mix(in srgb, var(--ember) 86%, var(--shade));
  --accent-soft: color-mix(in srgb, var(--ember) 50%, transparent);
  --btn-gloss: color-mix(in srgb, #fff 18%, transparent);
  --glyph-fade: color-mix(in srgb, var(--parch-100) 28%, transparent);
  --glow-accent: color-mix(in srgb, var(--ember) 10%, transparent);
  --glow-cool: color-mix(in srgb, var(--tier-key) 6%, transparent);

  --tint-accent-1: color-mix(in srgb, var(--ember) 7%, transparent);
  --tint-accent-2: color-mix(in srgb, var(--ember) 9%, transparent);
  --tint-accent-3: color-mix(in srgb, var(--ember) 14%, transparent);
  --tint-accent-4: color-mix(in srgb, var(--ember) 22%, transparent);
  --tint-accent-5: color-mix(in srgb, var(--ember) 32%, transparent);

  --err-hot: color-mix(in srgb, var(--err) 80%, var(--fg));
  --err-line: color-mix(in srgb, var(--err) 34%, transparent);
  --err-tint: color-mix(in srgb, var(--err) 8%, transparent);
  --err-tint-2: color-mix(in srgb, var(--err) 14%, transparent);
  --ok-line: color-mix(in srgb, var(--ok) 30%, transparent);
  --ok-tint: color-mix(in srgb, var(--ok) 9%, transparent);
  --ok-glow: color-mix(in srgb, var(--ok) 14%, transparent);
  --note-line: color-mix(in srgb, var(--note) 32%, transparent);
  --note-tint: color-mix(in srgb, var(--note) 8%, transparent);
  --main-line: color-mix(in srgb, var(--tier-main) 36%, transparent);
  --main-tint: color-mix(in srgb, var(--tier-main) 9%, transparent);
  --main-fade: color-mix(in srgb, var(--tier-main) 15%, transparent);
  --key-line: color-mix(in srgb, var(--tier-key) 34%, transparent);
  --key-tint: color-mix(in srgb, var(--tier-key) 8%, transparent);
  --key-fade: color-mix(in srgb, var(--tier-key) 15%, transparent);
  --bg-line: color-mix(in srgb, var(--tier-bg) 34%, transparent);
  --bg-tint: color-mix(in srgb, var(--tier-bg) 9%, transparent);
  --bg-fade: color-mix(in srgb, var(--tier-bg) 15%, transparent);
  --violet: #b18ad4;
  --violet-line: color-mix(in srgb, var(--violet) 34%, transparent);
  --violet-tint: color-mix(in srgb, var(--violet) 9%, transparent);
  --brass-line: color-mix(in srgb, var(--brass) 32%, transparent);
  --brass-tint: color-mix(in srgb, var(--brass) 8%, transparent);

  /* Avatars and era bands generate colours from a name; themes tune them. */
  --gen-sat: 42%;
  --gen-light-a: 30%;
  --gen-light-b: 15%;
  --gen-text-light: 82%;
  --grain: .035;
}

/* ============================ themes ============================ */

[data-theme="parchment"] {
  color-scheme: light;
  --ink-900: #efe5d2; --ink-850: #f4ecdc; --ink-800: #fbf6ea; --ink-750: #f7f0e0;
  --ink-700: #efe6d4; --ink-600: #e5d9c2; --ink-500: #d8c9ad;
  --line: #ddcfb4; --line-soft: #e8ddc7;
  --parch-100: #2b211a; --parch-200: #3a2d23; --parch-300: #55442f; --parch-400: #7a6547;
  --parch-500: #8d7757;
  --ember: #8c2f2f; --ember-hot: #a83b3b; --ember-dim: color-mix(in srgb, #8c2f2f 12%, transparent);
  --ember-line: color-mix(in srgb, #8c2f2f 34%, transparent); --brass: #9a7a1f;
  --tier-main: #9a7a1f; --tier-key: #2f7d72; --tier-bg: #6b7480;
  --err: #a32b2b; --warn: #9a6a12; --note: #2f5f9e; --ok: #2f7d4f;
  --shade: #4a3a28; --on-accent: #fdf8ee;
  --btn-gloss: color-mix(in srgb, #fff 45%, transparent);
  --gen-sat: 46%; --gen-light-a: 62%; --gen-light-b: 78%; --gen-text-light: 26%;
  --grain: .02;
}

[data-theme="midnight"] {
  --ink-900: #0b1020; --ink-850: #0e1426; --ink-800: #131a30; --ink-750: #172038;
  --ink-700: #1d2743; --ink-600: #263254; --ink-500: #35446c;
  --line: #253055; --line-soft: #1c2544;
  --parch-100: #dfe6f5; --parch-200: #c9d3ea; --parch-300: #a7b4d4; --parch-400: #7e8cb0; --parch-500: #5f6c8d;
  --ember: #7aa2ff; --ember-hot: #9bb9ff; --ember-dim: color-mix(in srgb, #7aa2ff 16%, transparent);
  --ember-line: color-mix(in srgb, #7aa2ff 34%, transparent); --brass: #c9b46a;
  --tier-main: #e0c46a; --tier-key: #5fd0c4; --tier-bg: #8592ad;
  --err: #f27b7b; --warn: #e3b45c; --note: #8fb6ff; --ok: #6fd39a;
  --on-accent: #0b1020;
  --gen-sat: 44%; --gen-light-a: 34%; --gen-light-b: 18%;
}

[data-theme="forest"] {
  --ink-900: #0a110d; --ink-850: #0e1511; --ink-800: #131c16; --ink-750: #172019;
  --ink-700: #1e2a21; --ink-600: #27362b; --ink-500: #35483a;
  --line: #26332a; --line-soft: #1c2620;
  --parch-100: #e4ead9; --parch-200: #cfd8c2; --parch-300: #aebb9d; --parch-400: #879377; --parch-500: #67725a;
  --ember: #c8a24a; --ember-hot: #ddb95f; --ember-dim: color-mix(in srgb, #c8a24a 15%, transparent);
  --ember-line: color-mix(in srgb, #c8a24a 34%, transparent); --brass: #c8a24a;
  --tier-main: #d9c05b; --tier-key: #5aa88c; --tier-bg: #7d8a7e;
  --err: #d9705f; --warn: #d3a441; --note: #74a3c4; --ok: #6fb87f;
  --on-accent: #11170f;
  --gen-sat: 34%; --gen-light-a: 28%; --gen-light-b: 14%;
}

[data-theme="rose"] {
  color-scheme: light;
  --ink-900: #f2e4e8; --ink-850: #f7eef0; --ink-800: #fdf7f8; --ink-750: #faf1f3;
  --ink-700: #f3e6ea; --ink-600: #ead6dd; --ink-500: #dcc0ca;
  --line: #e4cdd5; --line-soft: #eedde3;
  --parch-100: #3a1f2b; --parch-200: #4a2b38; --parch-300: #6b4353; --parch-400: #8e6474; --parch-500: #a37f8c;
  --ember: #b23a5c; --ember-hot: #c94d70; --ember-dim: color-mix(in srgb, #b23a5c 12%, transparent);
  --ember-line: color-mix(in srgb, #b23a5c 32%, transparent); --brass: #9c7b2e;
  --tier-main: #9c7b2e; --tier-key: #2f7d76; --tier-bg: #77707a;
  --err: #b02a45; --warn: #94661a; --note: #3a5f9c; --ok: #2f7a55;
  --shade: #4a2b38; --on-accent: #fff4f6;
  --btn-gloss: color-mix(in srgb, #fff 45%, transparent);
  --gen-sat: 40%; --gen-light-a: 66%; --gen-light-b: 80%; --gen-text-light: 28%;
  --grain: .015;
}

[data-theme="slate"] {
  --ink-900: #0e1013; --ink-850: #121417; --ink-800: #171b20; --ink-750: #1b1f24;
  --ink-700: #22272e; --ink-600: #2c333c; --ink-500: #3c4550;
  --line: #2a313a; --line-soft: #20262d;
  --parch-100: #e8eaee; --parch-200: #d2d6dd; --parch-300: #adb4bf; --parch-400: #838c99; --parch-500: #626b78;
  --ember: #5ec8c0; --ember-hot: #7ad9d2; --ember-dim: color-mix(in srgb, #5ec8c0 15%, transparent);
  --ember-line: color-mix(in srgb, #5ec8c0 34%, transparent);
  --brass: #c2a54e;
  --tier-main: #d8b95e; --tier-key: #5ec8c0; --tier-bg: #8792a0;
  --err: #e8756e; --warn: #d9a441; --note: #7fa8d8; --ok: #63bd8c;
  --on-accent: #0e1013;
  --gen-sat: 26%; --gen-light-a: 32%; --gen-light-b: 17%;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--parch-200);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* the desk: a warm pool of lamplight, a faint paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 22% -12%, var(--glow-accent), transparent 62%),
    radial-gradient(900px 700px at 108% 108%, var(--glow-cool), transparent 60%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--bg-grad-b) 55%, var(--bg-grad-c) 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

::selection { background: var(--tint-accent-5); color: var(--parch-100); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: .2px; color: var(--parch-100); }
p { margin: 0 0 .9em; }
a { color: var(--ember); text-decoration: none; }
a:hover { color: var(--ember-hot); text-decoration: underline; text-underline-offset: 3px; }
code, kbd, .mono { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================ layout ============================ */

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  height: 100dvh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px 14px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--sidebar-a), var(--sidebar-b));
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px 2px; }
.brand-mark {
  color: var(--ember);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: radial-gradient(circle at 34% 28%, var(--tint-accent-4), var(--tint-accent-1));
  border: 1px solid var(--ember-line);
  box-shadow: inset 0 1px 0 var(--lift-3);
  flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--parch-100); letter-spacing: .3px; }
.brand-text em { font-style: italic; font-family: var(--font-display); font-size: 12.5px; color: var(--parch-500); }

/* project switcher */
.switcher { position: relative; }
.switcher-btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--ink-750);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--parch-200);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.switcher-btn:hover { border-color: var(--ember-line); background: var(--ink-700); }
.switcher-btn .sw-label { flex: 1; min-width: 0; }
.switcher-btn .sw-name {
  display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--parch-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher-btn .sw-sub { display: block; font-size: 11px; color: var(--parch-500); text-transform: uppercase; letter-spacing: .09em; }
.switcher-btn .chev { color: var(--parch-500); flex: none; transition: transform .2s var(--ease); }
.switcher.open .chev { transform: rotate(180deg); }

.switcher-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 5px;
  z-index: 60;
  max-height: 60vh; overflow: auto;
  animation: pop .16s var(--ease);
}
.switcher-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: transparent; color: var(--parch-200);
  border-radius: var(--radius-sm); cursor: pointer; font: inherit;
}
.switcher-menu button:hover { background: var(--ink-600); }
.switcher-menu button.active { color: var(--ember); }
.switcher-menu .divider { height: 1px; background: var(--line); margin: 5px 2px; }
.switcher-menu .new-proj { color: var(--ember); font-weight: 500; }

@keyframes pop { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: none; } }

/* nav */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: var(--parch-300);
  font-size: 14px;
  font-weight: 500;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav-link svg { flex: none; opacity: .75; }
.nav-link:hover { background: var(--lift-2); color: var(--parch-100); text-decoration: none; }
.nav-link.active { background: var(--ember-dim); color: var(--ember-hot); }
.nav-link.active svg { opacity: 1; }
.nav-link.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--ember);
}
.nav-link .count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--parch-500); background: var(--lift-2);
  padding: 1px 6px; border-radius: 20px;
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.kbd-hint { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-start; font-size: 13px; }
.kbd-hint kbd {
  font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--ink-700); color: var(--parch-400);
}
.kbd-hint span { flex: 1; text-align: left; }

.ai-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--parch-500);
  padding: 7px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft); background: var(--well-1);
}
.ai-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--parch-500); flex: none; }
.ai-pill.on .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-glow); }
.ai-pill.off .dot { background: var(--dot-off); }
.ai-pill .mono { color: var(--parch-400); }

/* main */
.main { overflow-y: auto; overflow-x: hidden; position: relative; }
.view { max-width: 1180px; margin: 0 auto; padding: 34px 38px 90px; animation: viewin .32s var(--ease); }
.view.wide { max-width: 1400px; }
@keyframes viewin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.boot { display: grid; place-items: center; height: 100%; }
.boot-inner { text-align: center; color: var(--parch-500); font-family: var(--font-display); font-size: 19px; font-style: italic; }
.spinner {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid var(--tint-accent-3);
  border-top-color: var(--ember);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ page furniture ============================ */

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 22px;
  margin-bottom: 26px; flex-wrap: wrap;
}
.page-title { font-size: 38px; line-height: 1.08; letter-spacing: .3px; }
.page-title .accent { color: var(--ember); }
.page-sub { color: var(--parch-500); font-size: 13.5px; margin: 6px 0 0; max-width: 62ch; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.eyebrow {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--parch-500); font-weight: 600; margin-bottom: 7px;
}

.section { margin-bottom: 34px; }
.section-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.section-head h2 { font-size: 23px; }
.section-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.section-head .n {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--parch-500);
  border: 1px solid var(--line); padding: 1px 8px; border-radius: 20px;
}

/* ============================ buttons ============================ */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  font: 500 13.5px/1.2 var(--font-ui);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--ink-700);
  color: var(--parch-200);
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), color .16s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--ink-600); border-color: var(--line-strong); color: var(--parch-100); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn.primary {
  background: linear-gradient(180deg, var(--ember-hot), var(--ember));
  border-color: var(--accent-edge);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 0 1px 0 var(--btn-gloss) inset, 0 4px 16px var(--tint-accent-4);
}
/* Must restate the background: `.btn:hover:not(:disabled)` is more specific
   than `.btn.primary`, so without this the gradient is dropped on hover. */
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--ember-hot), var(--ember));
  border-color: var(--accent-edge-hot);
  filter: brightness(1.07);
  color: var(--on-accent);
}
.btn.ghost { background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--lift-2); }
.btn.danger { color: var(--err); border-color: var(--err-line); background: var(--err-tint); }
.btn.danger:hover:not(:disabled) { background: var(--err-tint-2); color: var(--err-hot); }
.btn.small { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn.tiny { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; gap: 4px; }
.btn.block { width: 100%; justify-content: center; }

.ghost-btn {
  background: transparent; border: 1px solid var(--line-soft); color: var(--parch-400);
  padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font: inherit;
  transition: border-color .16s, color .16s, background .16s;
}
.ghost-btn:hover { border-color: var(--ember-line); color: var(--parch-200); background: var(--lift-1); }

/* the AI mark */
.btn.ai { border-color: var(--ember-line); color: var(--ember); background: var(--tint-accent-1); }
.btn.ai:hover:not(:disabled) { background: var(--tint-accent-3); color: var(--ember-hot); }
.spark { font-size: 1.05em; line-height: 1; display: inline-block; }
.btn.ai:not(:disabled) .spark { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: 1; transform: scale(1) rotate(0); } 45% { opacity: .55; transform: scale(.85) rotate(-14deg); } }

/* tooltip on disabled AI buttons */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  background: var(--surface-4); color: var(--parch-200);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 10px; font-size: 12px; font-weight: 400; line-height: 1.4;
  width: max-content; max-width: 260px; white-space: normal; text-align: center;
  opacity: 0; pointer-events: none; z-index: 200;
  box-shadow: var(--shadow-2);
  transition: opacity .16s, transform .16s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ============================ forms ============================ */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.field > label, .lbl {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--parch-500); font-weight: 600;
}
.hint { font-size: 12px; color: var(--parch-500); line-height: 1.5; }

input[type=text], input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--well-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--parch-100);
  font: 400 14px/1.5 var(--font-ui);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.62; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ember-line);
  background: var(--well-3);
  box-shadow: 0 0 0 3px var(--tint-accent-2);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%237b6e5d' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px;
}
select[multiple] { background-image: none; padding-right: 11px; min-height: 110px; }
input[type=range] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px; padding: 0;
  background: linear-gradient(90deg, var(--ember) var(--pct,50%), var(--track) var(--pct,50%));
  border: 0; width: 100%;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--parch-100); border: 2px solid var(--ember); cursor: grab;
  box-shadow: 0 1px 4px var(--shadow-drop);
}
input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--parch-100); border: 2px solid var(--ember); cursor: grab;
}
input[type=checkbox] { accent-color: var(--ember); width: 15px; height: 15px; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--parch-300); }
.check input { margin-top: 2.5px; flex: none; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ============================ cards & chips ============================ */

.card {
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.panel h3 { font-size: 19px; margin-bottom: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  font-size: 11.5px; font-weight: 500;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--lift-1);
  color: var(--parch-400);
  white-space: nowrap;
}
button.chip { cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s, background .15s; }
button.chip:hover { border-color: var(--ember-line); color: var(--parch-200); }
.chip.on { background: var(--ember-dim); border-color: var(--ember-line); color: var(--ember-hot); }
.chip.mono { font-family: var(--font-mono); font-size: 11px; }

.tier-chip { text-transform: capitalize; }
.tier-main  { color: var(--tier-main); border-color: var(--main-line); background: var(--main-tint); }
.tier-key   { color: var(--tier-key);  border-color: var(--key-line);  background: var(--key-tint); }
.tier-background { color: var(--tier-bg); border-color: var(--bg-line); background: var(--bg-tint); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.empty {
  text-align: center; padding: 54px 24px;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  color: var(--parch-500);
}
.empty .big { font-family: var(--font-display); font-size: 25px; color: var(--parch-300); margin-bottom: 6px; }
.empty p { max-width: 46ch; margin: 0 auto 16px; font-size: 13.5px; }

/* ============================ character / place cards ============================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 15px;
}
.card-grid.places { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.entity-card {
  text-align: left; padding: 0; cursor: pointer; font: inherit; color: inherit;
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.entity-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--lift-2);
}
.entity-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.entity-card:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.entity-card .tier-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.tier-stripe.main { background: linear-gradient(180deg, var(--tier-main), var(--main-fade)); }
.tier-stripe.key { background: linear-gradient(180deg, var(--tier-key), var(--key-fade)); }
.tier-stripe.background { background: linear-gradient(180deg, var(--tier-bg), var(--bg-fade)); }

.ec-top { display: flex; gap: 13px; padding: 14px 15px 12px 17px; }
.ec-body { padding: 0 15px 14px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ec-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--parch-100); }
.ec-role { font-size: 12px; color: var(--parch-500); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.ec-line { font-size: 13px; color: var(--parch-300); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-meta { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }

.avatar {
  width: 54px; height: 54px; border-radius: 11px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  border: 1px solid var(--lift-4);
  box-shadow: 0 2px 8px var(--shadow-drop);
  position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.lg { width: 84px; height: 84px; font-size: 33px; border-radius: 14px; }
.avatar.sm { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }

.statbars { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.statbar { flex: 1; background: var(--lift-3); border-radius: 2px; position: relative; height: 100%; overflow: hidden; }
.statbar i {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--ember), var(--accent-soft));
  border-radius: 2px;
  transition: height .5s var(--ease);
}

.place-card .thumb {
  height: 118px; background: var(--ink-700); position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.place-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-card .thumb .gradient { position: absolute; inset: 0; }
.place-card .thumb .glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 40px; color: var(--glyph-fade);
}

/* ============================ overview ============================ */

.hero-panel {
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 200px at 8% 0%, var(--glow-accent), transparent 70%),
    linear-gradient(180deg, var(--hero-a), var(--hero-b));
  border: 1px solid var(--line);
  margin-bottom: 26px;
  position: relative; overflow: hidden;
}
.hero-panel .premise {
  font-family: var(--font-display); font-size: 20px; line-height: 1.5;
  color: var(--parch-200); max-width: 72ch; font-style: italic;
}
.hero-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 26px; }
.tile { padding: 15px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-bg); position: relative; overflow: hidden; }
.tile .num { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--parch-100); }
.tile .lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--parch-500); margin-top: 6px; }
.tile .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; opacity: .8; }

.activity { display: flex; flex-direction: column; }
.activity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; border-radius: var(--radius-sm);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  color: inherit; font: inherit; text-align: left; width: 100%;
  transition: background .15s;
}
.activity-row:hover { background: var(--lift-1); }
.activity-row .kind { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--parch-500); width: 74px; flex: none; }
.activity-row .nm { font-family: var(--font-display); font-size: 17px; color: var(--parch-100); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--parch-500); }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.qa {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel-bg); cursor: pointer; color: inherit; font: inherit; text-align: left;
  transition: transform .18s var(--ease), border-color .18s, background .18s;
}
.qa:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ember-line); background: var(--tint-accent-1); }
.qa:disabled { opacity: .45; cursor: not-allowed; }
.qa .qa-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ember-dim); color: var(--ember); flex: none; }
.qa strong { display: block; font-weight: 600; font-size: 14px; color: var(--parch-100); }
.qa span { font-size: 12px; color: var(--parch-500); }

/* ============================ toolbar / filters ============================ */

.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-bg);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(9px);
}
.toolbar .search { flex: 1; min-width: 180px; position: relative; }
.toolbar .search input { padding-left: 32px; }
.toolbar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--parch-500); pointer-events: none; }
.toolbar select { width: auto; min-width: 120px; }

/* ============================ drawer ============================ */

.scrim {
  position: fixed; inset: 0; z-index: 300;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: fade .22s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.scrim.closing { animation: fadeout .2s var(--ease) forwards; }
@keyframes fadeout { to { opacity: 0; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 310;
  width: min(880px, 94vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  animation: slidein .3s var(--ease);
}
.drawer.narrow { width: min(620px, 94vw); }
@keyframes slidein { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer.closing { animation: slideout .22s var(--ease) forwards; }
@keyframes slideout { to { transform: translateX(30px); opacity: 0; } }

.drawer-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  background: var(--well-1);
}
.drawer-head h2 { font-size: 25px; line-height: 1.2; }
.drawer-head .sub { font-size: 12px; color: var(--parch-500); }
.drawer-head .grow { flex: 1; min-width: 0; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--parch-400);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.icon-btn:hover { color: var(--parch-100); border-color: var(--ember-line); background: var(--lift-2); }

.tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--well-1); overflow-x: auto; }
.tab {
  padding: 10px 13px; background: transparent; border: 0; cursor: pointer;
  color: var(--parch-500); font: 500 13px var(--font-ui);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--parch-200); }
.tab.active { color: var(--ember); border-bottom-color: var(--ember); }

.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-top: 1px solid var(--line);
  background: var(--well-2);
}
.dirty-dot { font-size: 12px; color: var(--warn); display: none; align-items: center; gap: 6px; }
.drawer.dirty .dirty-dot { display: flex; }

/* AI revise affordance */
.field-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.field-head .lbl { margin: 0; }
.field-head .spacer { flex: 1; }
.revise-box {
  margin-top: 8px; padding: 12px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--ember-line); background: var(--tint-accent-1);
}
.revise-box .rb-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); margin-bottom: 7px; font-weight: 600; }
.revise-box .rb-text { font-size: 13.5px; line-height: 1.6; color: var(--parch-200); white-space: pre-wrap; max-height: 260px; overflow: auto; margin-bottom: 10px; }

/* stats + radar */
.stat-row { display: grid; grid-template-columns: 130px 1fr 62px; gap: 12px; align-items: center; margin-bottom: 11px; }
.stat-row .sname { font-size: 13px; color: var(--parch-300); }
.stat-row input[type=number] { text-align: center; font-family: var(--font-mono); padding: 5px; }
.stats-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
@media (max-width: 820px) { .stats-layout { grid-template-columns: 1fr; } }
.radar-wrap { position: sticky; top: 0; display: grid; place-items: center; padding: 8px; }

/* relationship & constraint lists */
.list-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--well-1); margin-bottom: 9px;
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-size: 13.5px; color: var(--parch-100); font-weight: 500; }
.list-item .li-sub { font-size: 12.5px; color: var(--parch-400); margin-top: 3px; line-height: 1.5; }
.sev-hard { color: var(--err); border-color: var(--err-line); background: var(--err-tint); }
.sev-soft { color: var(--note); border-color: var(--note-line); background: var(--note-tint); }
.src-ai { color: var(--ember); border-color: var(--ember-line); background: var(--ember-dim); }

.add-form { padding: 13px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--lift-0); margin-top: 12px; }

/* portrait tab */
.portrait-stage {
  display: grid; place-items: center; min-height: 260px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--well-2); overflow: hidden; margin-bottom: 16px; padding: 14px;
}
.portrait-stage img { max-width: 100%; max-height: 440px; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.portrait-stage .placeholder { color: var(--parch-500); text-align: center; font-family: var(--font-display); font-size: 18px; font-style: italic; }

/* ============================ modal ============================ */

.modal {
  position: fixed; z-index: 320; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  animation: modalin .24s var(--ease);
}
.modal.wide { width: min(880px, 94vw); }
@keyframes modalin { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.98); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.modal.closing { animation: modalout .18s var(--ease) forwards; }
@keyframes modalout { to { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.985); } }
.modal-head { padding: 18px 22px 10px; }
.modal-head h2 { font-size: 24px; }
.modal-head .sub { font-size: 13px; color: var(--parch-500); margin-top: 4px; }
.modal-body { padding: 8px 22px 4px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 14px 22px 18px; display: flex; gap: 10px; align-items: center; }

/* ============================ toasts ============================ */

.toast-root {
  position: fixed; right: 18px; bottom: 18px; z-index: 500;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 240px; max-width: 400px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-3);
  box-shadow: var(--shadow-2);
  font-size: 13.5px; color: var(--parch-200);
  animation: toastin .26s var(--ease);
}
@keyframes toastin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastout .24s var(--ease) forwards; }
@keyframes toastout { to { opacity: 0; transform: translateX(18px); } }
.toast .bead { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ember); }
.toast.ok .bead { background: var(--ok); }
.toast.error .bead { background: var(--err); }
.toast.error { border-color: var(--err-line); }

/* ============================ skeletons ============================ */

.skel {
  position: relative; overflow: hidden;
  background: var(--lift-2); border-radius: 6px;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--tint-accent-3), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel-card { padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-bg); }
.skel-line { height: 11px; margin-bottom: 9px; }
.skel-note { font-family: var(--font-display); font-style: italic; color: var(--parch-500); font-size: 14px; margin-top: 12px; }

.thinking { display: inline-flex; gap: 4px; align-items: center; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); animation: bounce 1.1s infinite; }
.thinking i:nth-child(2) { animation-delay: .16s; }
.thinking i:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ============================ timeline ============================ */

.era-band { margin-bottom: 26px; }
.era-track {
  position: relative; height: 46px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--well-2); overflow: hidden;
  display: flex;
}
.era-seg {
  position: absolute; top: 0; bottom: 0;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--parch-100);
  border-right: 1px solid var(--well-3);
  overflow: hidden; white-space: nowrap; padding: 0 8px;
  cursor: pointer;
  transition: filter .18s;
}
.era-seg:hover { filter: brightness(1.25); }
.era-seg.dim { opacity: .34; }
.era-ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--parch-500); margin-top: 5px; }
.era-marks { position: relative; height: 12px; margin-top: 2px; }
.era-mark { position: absolute; top: 0; width: 2px; height: 6px; background: var(--ember); border-radius: 2px; opacity: .55; transform: translateX(-1px); }

.tl { position: relative; padding-left: 30px; }
.tl::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent);
}
.tl-item { position: relative; margin-bottom: 15px; }
.tl-dot {
  position: absolute; left: -26px; top: 17px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-800); border: 2px solid var(--parch-500);
}
.tl-item.major .tl-dot { width: 13px; height: 13px; left: -28px; top: 15px; border-color: var(--ember); background: var(--ember); box-shadow: 0 0 0 4px var(--tint-accent-3); }
.tl-card {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel-bg);
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s;
  display: block;
}
.tl-card:hover { transform: translateX(3px); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.tl-item.major .tl-card { border-color: var(--tint-accent-4); background: linear-gradient(180deg, var(--major-a), var(--panel-bg)); }
.tl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--ember); flex: none; }
.tl-title { font-family: var(--font-display); font-size: 20px; color: var(--parch-100); font-weight: 600; }
.tl-item.major .tl-title { font-size: 22px; }
.tl-desc { font-size: 13px; color: var(--parch-300); margin-top: 5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.year-sep { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.year-sep .y { font-family: var(--font-display); font-size: 24px; color: var(--parch-400); }
.year-sep .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.issue-flag { color: var(--warn); display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }

/* ============================ consistency ============================ */

.issue {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 10px; background: var(--panel-bg);
  border-left-width: 3px;
}
.issue.error { border-left-color: var(--err); }
.issue.warning { border-left-color: var(--warn); }
.issue.note { border-left-color: var(--note); }
.issue-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.issue-sev { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.issue.error .issue-sev { color: var(--err); }
.issue.warning .issue-sev { color: var(--warn); }
.issue.note .issue-sev { color: var(--note); }
.issue blockquote {
  margin: 8px 0; padding: 7px 12px; border-left: 2px solid var(--line);
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--parch-300);
}
.issue .explain { font-size: 13.5px; color: var(--parch-200); line-height: 1.6; }
.issue .suggest { font-size: 13px; color: var(--parch-400); margin-top: 7px; padding-left: 18px; position: relative; }
.issue .suggest::before { content: "\2192"; position: absolute; left: 0; color: var(--ember); }

.notice {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--ember-line); background: var(--tint-accent-1);
  font-size: 13.5px; color: var(--parch-300); line-height: 1.6; margin-bottom: 20px;
}
.notice strong { color: var(--parch-100); }
.notice .ic { color: var(--ember); flex: none; }
.notice code { background: var(--well-3); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--parch-200); }

/* ============================ markdown (bible) ============================ */

.md {
  max-width: 78ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--parch-200);
}
.md h1 { font-family: var(--font-display); font-size: 42px; margin: 0 0 .3em; color: var(--parch-100); }
.md h2 {
  font-family: var(--font-display); font-size: 29px; margin: 1.5em 0 .45em;
  padding-bottom: .22em; border-bottom: 1px solid var(--line); color: var(--parch-100);
}
.md h3 { font-family: var(--font-display); font-size: 22px; margin: 1.25em 0 .35em; color: var(--ember); }
.md h4 { font-family: var(--font-ui); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 1.2em 0 .3em; color: var(--parch-500); }
.md p { margin: 0 0 1em; }
.md ul, .md ol { margin: 0 0 1em; padding-left: 1.35em; }
.md li { margin-bottom: .3em; }
.md strong { color: var(--parch-100); font-weight: 600; }
.md em { font-style: italic; }
.md hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 2.2em 0; }
.md code { background: var(--well-3); padding: 1px 6px; border-radius: 4px; font-size: .88em; color: var(--ember); }
.md blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 2px solid var(--ember-line); color: var(--parch-300); font-style: italic; }

/* ============================ settings ============================ */

.kv { display: grid; grid-template-columns: 170px 1fr; gap: 9px 16px; font-size: 13.5px; }
.kv dt { color: var(--parch-500); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; color: var(--parch-100); word-break: break-word; }

.copy-block {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--well-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px; margin: 8px 0 6px;
}
.copy-block pre {
  margin: 0; flex: 1; overflow-x: auto;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--parch-200);
  white-space: pre;
}
.provider-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.provider-row:last-child { border-bottom: 0; }
.provider-row .pr-main { flex: 1; }
.provider-row .pr-name { font-size: 14px; color: var(--parch-100); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.provider-row .pr-hint { font-size: 12.5px; color: var(--parch-500); margin-top: 3px; line-height: 1.5; }
.dot-ok, .dot-no { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; }
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-glow); }
.dot-no { background: var(--dot-off); }

/* ============================ thesaurus ============================ */

.mode-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.mode-tab {
  padding: 6px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--line); background: var(--lift-1);
  color: var(--parch-400); font: 500 12.5px var(--font-ui);
  transition: color .15s, border-color .15s, background .15s;
}
.mode-tab:hover { color: var(--parch-100); border-color: var(--ember-line); }
.mode-tab.active { background: var(--ember-dim); border-color: var(--ember-line); color: var(--ember-hot); }

.thes-layout { display: grid; grid-template-columns: 1fr 330px; gap: 26px; align-items: start; }
@media (max-width: 1080px) { .thes-layout { grid-template-columns: 1fr; } }

.thes-word { font-size: 32px; line-height: 1; }
.def-line { font-size: 13.5px; color: var(--parch-300); margin: 0 0 .45em; line-height: 1.6; }
.def-line:last-child { margin-bottom: 0; }

.word-chips { gap: 7px; }
.word-chip {
  font-size: 13.5px; padding: 4px 11px; font-family: var(--font-display);
  color: var(--parch-200); background: var(--lift-2);
}
.word-chip:hover { background: var(--ember-dim); border-color: var(--ember-line); color: var(--ember-hot); }
.word-chip[data-tip]::after { font-family: var(--font-ui); }

.thes-ai { position: sticky; top: 0; }
.thes-ai h3 { font-size: 19px; margin-bottom: 4px; color: var(--parch-100); }
.thes-ai .spark { color: var(--ember); }
.thes-ai .hint { margin-bottom: 14px; }

.word-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.word-card {
  padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--well-2);
}
.wc-word {
  font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ember-hot);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.wc-word:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-copy { color: var(--parch-500); opacity: 0; transition: opacity .15s; }
.word-card:hover .wc-copy { opacity: 1; }
.wc-note { font-size: 12.5px; color: var(--parch-400); margin-top: 3px; line-height: 1.5; }
.wc-example {
  font-family: var(--font-display); font-size: 14.5px; font-style: italic;
  color: var(--parch-200); margin-top: 8px; padding-left: 10px;
  border-left: 2px solid var(--line); line-height: 1.55;
}
.wc-example mark { background: var(--tint-accent-4); color: var(--ember-hot); border-radius: 3px; padding: 0 2px; font-style: normal; }

/* ============================ unstick ============================ */

.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.mode-card {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel-bg);
  transition: transform .16s var(--ease), border-color .16s, background .16s;
}
.mode-card:hover { transform: translateY(-2px); border-color: var(--ember-line); }
.mode-card.active { border-color: var(--ember); background: var(--tint-accent-2); }
.mode-card strong { display: block; font-size: 13.5px; color: var(--parch-100); margin-bottom: 3px; }
.mode-card span { font-size: 12px; color: var(--parch-500); line-height: 1.45; }

/* idea kinds */
.chip.kind-spark        { color: var(--ember);     border-color: var(--ember-line);        background: var(--ember-dim); }
.chip.kind-beat         { color: var(--tier-main); border-color: var(--main-line);     background: var(--main-tint); }
.chip.kind-complication { color: var(--err);       border-color: var(--err-line);      background: var(--err-tint); }
.chip.kind-dialogue     { color: var(--tier-key);  border-color: var(--key-line);     background: var(--key-tint); }
.chip.kind-question     { color: var(--note);      border-color: var(--note-line);    background: var(--note-tint); }
.chip.kind-scene        { color: var(--violet);          border-color: var(--violet-line);    background: var(--violet-tint); }
.chip.kind-note         { color: var(--tier-bg);   border-color: var(--bg-line);    background: var(--bg-tint); }

.chip.status-chip { text-transform: capitalize; }
.chip.status-new       { color: var(--parch-300); }
.chip.status-kept      { color: var(--ok);  border-color: var(--ok-line);  background: var(--ok-tint); }
.chip.status-used      { color: var(--brass); border-color: var(--brass-line); background: var(--brass-tint); }
.chip.status-discarded { color: var(--parch-500); opacity: .8; }

.chip.ing-character { color: var(--tier-main); border-color: var(--main-line); }
.chip.ing-place     { color: var(--tier-key);  border-color: var(--key-line); }
.chip.ing-event     { color: var(--ember);     border-color: var(--ember-line); }
.chip.ing-constraint{ color: var(--err);       border-color: var(--err-line); }

.suggestion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.suggestion-card { padding: 15px 17px; display: flex; flex-direction: column; }
.sg-title { font-size: 20px; line-height: 1.2; margin-bottom: 7px; }
.sg-text { font-size: 13.5px; color: var(--parch-200); line-height: 1.6; margin: 0 0 8px; white-space: pre-wrap; }
.sg-rationale {
  font-size: 12.5px; font-style: italic; color: var(--parch-500);
  line-height: 1.55; margin: 0; padding-left: 10px; border-left: 2px solid var(--line);
}

/* random spark */
.spark-panel { padding: 20px 22px; }
.spark-filters summary { cursor: pointer; margin-bottom: 6px; }
.spark-stage { margin-top: 16px; min-height: 150px; }
.spark-empty { text-align: center; padding: 22px 12px; color: var(--parch-500); }
.spark-glyph { font-size: 34px; color: var(--ember); opacity: .5; margin-bottom: 10px; }
.spark-empty p { max-width: 48ch; margin: 0 auto; font-size: 13.5px; }
.spark-title { font-size: 26px; line-height: 1.15; margin-bottom: 10px; color: var(--parch-100); }
.spark-text {
  font-family: var(--font-display); font-size: 17px; line-height: 1.62;
  color: var(--parch-200); white-space: pre-wrap; margin: 0; max-width: 76ch;
}

/* open threads */
.thread-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.thread-group { padding: 15px 17px; }
.thread-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.thread-row:last-child { border-bottom: 0; }
.thread-name {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 16px; color: var(--parch-100);
}
.thread-name:hover { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.thread-text { font-size: 12.5px; color: var(--parch-400); line-height: 1.5; margin-top: 2px; }

/* sprint */
.sprint-layout { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .sprint-layout { grid-template-columns: 1fr; } }
.sprint-side { text-align: center; }
.sprint-ring {
  height: 3px; border-radius: 3px; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--ember) var(--pct, 100%), var(--track) var(--pct, 100%));
  transition: background .3s linear;
}
.sprint-clock {
  font-size: 52px; font-weight: 500; line-height: 1;
  color: var(--parch-100); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.freewrite {
  min-height: 260px; font-family: var(--font-display); font-size: 16.5px; line-height: 1.7;
}

/* idea bin */
.idea-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.idea-row { padding: 13px 15px; }
.idea-row.status-discarded { opacity: .58; }
.idea-title { font-family: var(--font-display); font-size: 19px; color: var(--parch-100); line-height: 1.2; }
.idea-text {
  font-size: 13px; color: var(--parch-300); line-height: 1.55; margin: 6px 0 0; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================ command palette ============================ */

.palette-wrap { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: center; padding-top: 12vh; }
.palette {
  position: relative; z-index: 1; /* above the wrap's own scrim */
  width: min(660px, 94vw); max-height: 66vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  animation: modalin .2s var(--ease);
  overflow: hidden;
}
.palette-input { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.palette-input svg { color: var(--parch-500); flex: none; }
.palette-input input {
  border: 0; background: transparent; padding: 0; font-size: 17px; color: var(--parch-100);
  font-family: var(--font-display);
}
.palette-input input:focus { box-shadow: none; background: transparent; }
.palette-results { overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.palette-item:hover, .palette-item.sel { background: var(--ember-dim); }
.palette-item .pi-name { font-family: var(--font-display); font-size: 17px; color: var(--parch-100); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .pi-kind { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--parch-500); }
.palette-empty { padding: 26px; text-align: center; color: var(--parch-500); font-style: italic; font-family: var(--font-display); }
.palette-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--parch-500); display: flex; gap: 14px; }

/* ============================ onboarding ============================ */

.onboard { min-height: 100%; display: grid; place-items: center; padding: 44px 26px 80px; }
.onboard-inner { width: min(880px, 100%); }
.onboard-hero { text-align: center; margin-bottom: 34px; }
.onboard-hero .kicker { font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
.onboard-hero h1 { font-size: 54px; line-height: 1.04; margin-bottom: 12px; }
.onboard-hero h1 em { font-style: italic; color: var(--ember); }
.onboard-hero p { color: var(--parch-400); font-size: 16px; max-width: 54ch; margin: 0 auto; font-family: var(--font-display); }
.onboard-card { padding: 28px 30px; border-radius: var(--radius-lg); }

.onboard-tabs {
  display: flex; gap: 4px; justify-content: center; margin-bottom: 18px;
  padding: 4px; border-radius: 30px; border: 1px solid var(--line);
  background: var(--well-2); width: fit-content; margin-left: auto; margin-right: auto;
}
.onboard-tab {
  padding: 8px 20px; border-radius: 26px; cursor: pointer;
  border: 0; background: transparent; color: var(--parch-400);
  font: 500 13.5px var(--font-ui);
  transition: color .16s, background .16s;
}
.onboard-tab:hover { color: var(--parch-100); }
.onboard-tab.active { background: var(--ember-dim); color: var(--ember-hot); box-shadow: inset 0 0 0 1px var(--ember-line); }
.onboard-tab .spark { color: var(--ember); }

/* ============================ seed from summary ============================ */

.seed-form textarea { font-family: var(--font-display); font-size: 16px; line-height: 1.65; }

.steppers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 700px) { .steppers { grid-template-columns: repeat(2, 1fr); } }
.stepper {
  padding: 10px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--well-1); text-align: center;
}
.st-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--parch-400); margin-bottom: 6px; }
.st-row { display: flex; align-items: center; gap: 4px; }
.st-row input { text-align: center; font-family: var(--font-mono); padding: 5px 2px; min-width: 0; }
.st-row input::-webkit-outer-spin-button, .st-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.st-btn {
  width: 24px; height: 28px; flex: none; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--lift-1);
  color: var(--parch-300); font: 500 15px/1 var(--font-ui);
  transition: border-color .15s, color .15s, background .15s;
}
.st-btn:hover { border-color: var(--ember-line); color: var(--ember-hot); background: var(--tint-accent-2); }
.st-hint { font-size: 10.5px; color: var(--parch-500); margin-top: 6px; }

.seed-progress { padding: 4px 0; }
.seed-bar {
  height: 5px; border-radius: 4px; overflow: hidden;
  background: var(--lift-3); margin: 10px 0 12px;
}
.seed-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ember), var(--ember-hot));
  border-radius: 4px;
  transition: width .45s var(--ease);
}
.seed-step {
  font-family: var(--font-display); font-size: 17px; font-style: italic;
  color: var(--parch-200); min-height: 1.5em;
}
.seed-log {
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  margin-top: 14px; max-height: 220px; overflow-y: auto;
  padding: 2px; scroll-behavior: smooth;
}
.seed-chip { animation: chipin .3s var(--ease); }
@keyframes chipin { from { opacity: 0; transform: translateY(5px) scale(.96); } to { opacity: 1; transform: none; } }
.seed-chip.step-place { color: var(--tier-key); border-color: var(--key-line); background: var(--key-tint); }
.seed-chip.step-event { color: var(--ember); border-color: var(--ember-line); background: var(--ember-dim); }
.seed-chip.step-character { color: var(--parch-300); }
.seed-summary { margin-top: 16px; }

/* ============================ interview ============================ */

.interview-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.interview-title { font-size: 27px; line-height: 1.1; }
.interview-controls { display: flex; gap: 10px; align-items: flex-end; }
.interview-controls input { padding: 7px 10px; }

.saved-answers {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--well-1); padding: 10px 14px; margin-bottom: 18px;
}
.saved-answers summary { cursor: pointer; font-size: 13px; color: var(--parch-400); }
.saved-answers summary:hover { color: var(--parch-100); }
.saved-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; }
.saved-item { padding-left: 11px; border-left: 2px solid var(--line); }
.saved-q { font-family: var(--font-display); font-size: 15.5px; color: var(--parch-200); line-height: 1.4; }
.saved-a { font-size: 13px; color: var(--parch-400); margin-top: 3px; line-height: 1.55; white-space: pre-wrap; }

.round-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 14px; }
.round-head:first-child { margin-top: 4px; }
.round-n {
  font-family: var(--font-mono); font-size: 11px; color: var(--ember);
  border: 1px solid var(--ember-line); border-radius: 20px; padding: 1px 9px;
}
.round-title { font-family: var(--font-display); font-size: 20px; color: var(--parch-200); }
.round-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.question-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.question-card { padding: 15px 17px; transition: opacity .2s var(--ease); }
.question-card.skipped { opacity: .45; }
.question-text { font-size: 19px; line-height: 1.28; margin-bottom: 5px; }
.question-why { font-size: 12.5px; color: var(--parch-500); line-height: 1.5; margin: 0 0 10px; }
.suggestion-chips { margin-bottom: 10px; }
.suggestion-chips .chip { cursor: pointer; max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; }
.suggestion-chips .chip:hover { border-color: var(--ember-line); color: var(--ember-hot); background: var(--tint-accent-2); }
.answer-area { min-height: 54px; resize: none; overflow-y: auto; }
.skip-toggle { cursor: pointer; }
.skip-toggle.on { color: var(--parch-500); border-color: var(--line); background: var(--lift-1); }

.topic-tag { text-transform: lowercase; letter-spacing: .02em; }
.topic-a { color: var(--tier-main); border-color: var(--main-line); background: var(--main-tint); }
.topic-b { color: var(--tier-key);  border-color: var(--key-line);  background: var(--key-tint); }
.topic-c { color: var(--note);      border-color: var(--note-line); background: var(--note-tint); }
.topic-d { color: var(--violet);          border-color: var(--violet-line); background: var(--violet-tint); }
.topic-e { color: var(--ember);     border-color: var(--ember-line);     background: var(--ember-dim); }
.topic-f { color: var(--ok);        border-color: var(--ok-line);  background: var(--ok-tint); }

.interview-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--fade-bottom) 40%);
  padding-bottom: 4px;
}

.note-item { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.note-item:last-child { border-bottom: 0; }
.note-item .saved-q { margin: 6px 0 7px; }

/* ============================ auth ============================ */

/* Signed out: no sidebar, the auth card owns the screen. */
.app.no-session { grid-template-columns: 1fr; }
.app.no-session .sidebar { display: none; }

.auth-screen { min-height: 100%; display: grid; place-items: center; padding: 40px 20px 70px; }
.auth-card {
  width: min(430px, 100%);
  padding: 30px 32px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow: var(--shadow-2);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--parch-100); display: block; }
.auth-tagline { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--parch-500); }
.auth-title { font-size: 30px; line-height: 1.1; margin-bottom: 5px; }
.auth-sub { color: var(--parch-500); font-size: 13.5px; margin-bottom: 20px; }
.auth-form { display: block; }
.auth-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth-error {
  border: 1px solid var(--err-line); background: var(--err-tint);
  color: var(--err); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.5;
}
.auth-foot { margin: 18px 0 0; font-size: 13px; color: var(--parch-500); text-align: center; }

/* ============================ landing ============================ */

.landing { max-width: 880px; margin: 0 auto; padding: 56px 24px 40px; }
.landing-hero { text-align: center; }
.landing-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; text-align: left; }
.landing-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--parch-100); display: block; letter-spacing: .3px; }
.landing-tagline { font-family: var(--font-display); font-style: italic; font-size: 13.5px; color: var(--parch-500); }
.landing-title { font-size: 58px; line-height: 1.03; letter-spacing: .3px; margin-bottom: 16px; }
.landing-title em { font-style: italic; color: var(--ember); }
.landing-lede {
  font-family: var(--font-display); font-size: 20px; line-height: 1.55;
  color: var(--parch-200); max-width: 34em; margin: 0 auto 26px;
}
.landing-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.landing-actions .btn { padding: 11px 20px; font-size: 14.5px; }
.landing-nokey {
  font-size: 13px; color: var(--parch-500); max-width: 52em;
  margin: 22px auto 0; line-height: 1.6;
}

.landing-features { margin: 56px 0 12px; display: flex; flex-direction: column; gap: 26px; }
.landing-feature {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 24px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--panel-bg);
}
.lf-icon {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--ember); background: var(--tint-accent-1);
  border: 1px solid var(--ember-line);
}
.lf-title { font-size: 22px; line-height: 1.2; margin-bottom: 6px; }
.lf-body { font-size: 14.5px; color: var(--parch-300); line-height: 1.65; margin: 0; max-width: 62ch; }

.landing-cta {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin: 40px 0 10px;
}
.landing-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--parch-500);
}

@media (max-width: 700px) {
  .landing { padding: 34px 18px 30px; }
  .landing-title { font-size: 38px; }
  .landing-lede { font-size: 17px; }
  .landing-feature { flex-direction: column; gap: 14px; padding: 18px 18px; }
  .lf-icon { width: 46px; height: 46px; }
  .landing-actions .btn { width: 100%; justify-content: center; }
}

/* ============================ legal pages ============================ */

.legal-page { max-width: 720px; margin: 0 auto; padding: 34px 24px 60px; }
.legal-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 30px;
  border-bottom: 1px solid var(--line-soft);
}
.legal-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.legal-brand:hover { text-decoration: none; }
.legal-brand strong { font-family: var(--font-display); font-size: 19px; color: var(--parch-100); }
.legal-title { font-size: 42px; line-height: 1.05; margin-bottom: 6px; }
.legal-updated { color: var(--parch-500); font-size: 13.5px; margin-bottom: 30px; }
.legal-body { max-width: 68ch; }
.legal-h {
  font-family: var(--font-display); font-size: 24px; color: var(--parch-100);
  margin: 32px 0 10px; padding-bottom: .2em; border-bottom: 1px solid var(--line);
}
.legal-p { font-size: 14.5px; line-height: 1.7; color: var(--parch-200); margin: 0 0 1em; }
.legal-list { margin: 0 0 1.2em; padding-left: 1.3em; }
.legal-list li { font-size: 14px; line-height: 1.65; color: var(--parch-300); margin-bottom: .5em; }
.legal-foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.auth-terms { font-size: 12px; color: var(--parch-500); text-align: center; margin: 14px 0 0; line-height: 1.6; }
.auth-purpose { font-size: 12px; color: var(--parch-500); text-align: center; margin: 8px 0 0; line-height: 1.6; }

.principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 1.2em; }
@media (max-width: 620px) { .principle-grid { grid-template-columns: 1fr; } }
.principle-card {
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel-bg);
}
.principle-label {
  font-family: var(--font-display); font-size: 17px; color: var(--ember);
  margin-bottom: 5px;
}
.principle-text { font-size: 13px; color: var(--parch-300); line-height: 1.6; margin: 0; }

/* ---- puns, used sparingly ---- */
.landing-pun {
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  color: var(--ember); margin: 0 0 14px; letter-spacing: .2px;
}
.landing-about-link { margin: 16px 0 0; font-size: 13px; }
.foot-pun { font-family: var(--font-display); font-style: italic; color: var(--parch-500); }
.seed-pun {
  font-family: var(--font-display); font-style: italic; font-size: 14px;
  color: var(--parch-500); margin: 2px 0 4px;
}

.purpose-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-bg);
}
.what-this-is {
  display: block; font-size: 12px; color: var(--parch-500);
  padding: 4px 8px 8px; text-decoration: none;
}
.what-this-is:hover { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .legal-page { padding: 24px 18px 44px; }
  .legal-title { font-size: 32px; }
  .legal-h { font-size: 21px; }
}

/* ============================ social sign-in ============================ */

.social-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.social-block .btn { width: 100%; justify-content: center; }
.or-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 4px; color: var(--parch-500); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .12em;
}
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============================ consent, pricing, feedback ============================ */

.consent-block {
  border: 1px solid var(--ember-line); background: var(--tint-accent-1);
  border-radius: var(--radius); padding: 15px 17px; margin-top: 14px;
}
.consent-block.acknowledged {
  display: flex; gap: 11px; align-items: flex-start;
  border-color: var(--ok-line); background: var(--ok-tint);
}
.consent-block.acknowledged .dot-ok { margin-top: 5px; }
.consent-title { font-size: 19px; margin-bottom: 8px; }
.consent-body { font-size: 13.5px; color: var(--parch-200); line-height: 1.65; margin: 0 0 .7em; }
.consent-body:last-of-type { margin-bottom: 0; }
.consent-ack { font-size: 13.5px; color: var(--parch-100); font-weight: 500; }
.consent-link { font-size: 13px; }
.pc-caption { font-size: 11.5px; color: var(--ember); margin-top: 4px; line-height: 1.45; }

.landing-pricing {
  margin: 44px 0 8px; padding: 24px 26px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel-bg);
}
.lp-title { font-size: 24px; margin-bottom: 10px; }
.lp-body { font-size: 14px; color: var(--parch-300); line-height: 1.65; margin: 0 0 .8em; }
.lp-prompt { font-size: 14px; color: var(--parch-200); margin: 14px 0 10px; }
.subscribe-form { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe-form input { flex: 1; min-width: 220px; }
.subscribe-done {
  font-size: 13.5px; color: var(--ok);
  border: 1px solid var(--ok-line); background: var(--ok-tint);
  border-radius: var(--radius-sm); padding: 10px 12px;
}

.pricing-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 20px;
  border: 1px solid var(--ember-line); border-radius: var(--radius);
  background: var(--tint-accent-1);
}
.pb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-text strong { font-size: 13.5px; color: var(--parch-100); }
.pb-text span { font-size: 12.5px; color: var(--parch-400); line-height: 1.45; }

.feedback-list, .sub-list { display: flex; flex-direction: column; }
.feedback-row { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.feedback-row:last-child { border-bottom: 0; }
.feedback-message { font-size: 13.5px; color: var(--parch-200); line-height: 1.6; margin: 0; white-space: pre-wrap; }
.feedback-reply {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  border-left: 2px solid var(--ember-line); background: var(--well-1);
  font-size: 13px; color: var(--parch-300);
}
.hint.short { color: var(--warn); }

.chip.cat-bug { color: var(--err); border-color: var(--err-line); background: var(--err-tint); }
.chip.cat-idea { color: var(--tier-main); border-color: var(--main-line); background: var(--main-tint); }
.chip.cat-general { color: var(--parch-300); }
.chip.cat-ai-quality { color: var(--tier-key); border-color: var(--key-line); background: var(--key-tint); }
.chip.cat-billing { color: var(--brass); border-color: var(--brass-line); background: var(--brass-tint); }
.chip.cat-other { color: var(--tier-bg); border-color: var(--bg-line); background: var(--bg-tint); }
.chip.fb-new { color: var(--ember); border-color: var(--ember-line); background: var(--tint-accent-1); }
.chip.fb-read { color: var(--parch-400); }
.chip.fb-replied { color: var(--ok); border-color: var(--ok-line); background: var(--ok-tint); }
.chip.fb-archived { color: var(--parch-500); opacity: .8; }

/* ============================ admin ============================ */

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-item { overflow: hidden; }
.admin-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 12px 15px; cursor: pointer; text-align: left;
  background: transparent; border: 0; color: inherit; font: inherit;
}
.admin-head:hover { background: var(--lift-1); }
.admin-snippet {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--parch-200);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-body { padding: 4px 15px 15px; border-top: 1px solid var(--line-soft); }
.sub-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.sub-row:last-child { border-bottom: 0; }
.sub-mail { font-size: 13.5px; color: var(--parch-100); }
.num-inline { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--parch-100); }

/* ============================ user strip ============================ */

.user-strip { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.signout-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; width: auto; }
.signout-label { font-size: 12px; }
.user-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit;
  transition: background .15s;
}
.user-btn:hover { background: var(--lift-1); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--ember-dim); color: var(--ember-hot);
  border: 1px solid var(--ember-line);
  font: 600 12px var(--font-ui);
}
.user-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-size: 13px; color: var(--parch-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mail { font-size: 11px; color: var(--parch-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-actions { display: flex; gap: 4px; flex: none; }

/* ============================ theme picker ============================ */

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.popover .theme-grid { grid-template-columns: 1fr 1fr; margin-top: 0; }
.theme-card {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  padding: 10px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--well-1);
  transition: border-color .16s, transform .16s var(--ease), background .16s;
}
.theme-card:hover { border-color: var(--ember-line); transform: translateY(-1px); }
.theme-card.active { border-color: var(--ember); background: var(--tint-accent-1); }
.theme-swatch { display: flex; height: 22px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.theme-swatch i { flex: 1; display: block; }
.theme-label { display: block; font-size: 13px; color: var(--parch-100); margin-top: 7px; font-weight: 500; }
.theme-desc { display: block; font-size: 11.5px; color: var(--parch-500); line-height: 1.4; margin-top: 2px; }
.popover .theme-desc { display: none; }

.theme-group { margin-bottom: 14px; }
.theme-group .eyebrow { margin-bottom: 6px; }
.theme-chip { border-color: var(--ember-line); color: var(--ember-hot); background: var(--tint-accent-1); }

/* ============================ your AI ============================ */

.provider-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; margin-bottom: 16px; }
.provider-choice {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 11px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--well-1);
  transition: border-color .15s, background .15s;
}
.provider-choice:hover { border-color: var(--ember-line); }
.provider-choice.active { border-color: var(--ember); background: var(--tint-accent-1); }
.provider-choice input { margin-top: 3px; flex: none; accent-color: var(--ember); }
.pc-label { font-size: 13.5px; color: var(--parch-100); font-weight: 500; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pc-note { font-size: 12px; color: var(--parch-500); line-height: 1.45; margin-top: 2px; }
.provider-detail { padding-top: 4px; }

.quota { margin-top: 12px; }
.quota-bar { height: 5px; border-radius: 4px; background: var(--lift-3); overflow: hidden; }
.quota-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--ember-hot)); }
.quota-text { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--parch-400); margin-top: 5px; }

.token-list { margin-top: 12px; }
.token-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.token-row:last-child { border-bottom: 0; }
.token-name { font-size: 13.5px; color: var(--parch-100); font-weight: 500; }

/* ============================ manual helpers ============================ */

.popover {
  position: fixed; z-index: 340;
  width: 300px; max-width: calc(100vw - 24px);
  padding: 13px 14px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  animation: pop .16s var(--ease);
}
.popover .field { margin-bottom: 8px; }

.input-with-dice { display: flex; gap: 6px; align-items: center; }
.input-with-dice input { flex: 1; min-width: 0; }
.dice-btn { flex: none; }
.dice-btn:hover { color: var(--ember-hot); }

.name-chips { gap: 6px; margin-top: 4px; max-height: 190px; overflow-y: auto; }
.name-chip { cursor: pointer; font-family: var(--font-display); font-size: 14px; padding: 3px 10px; }
.name-chip:hover { border-color: var(--ember-line); color: var(--ember-hot); background: var(--tint-accent-2); }

.stat-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.profile-select { width: auto; min-width: 130px; }

.template-list { margin-bottom: 10px; }
.template-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.template-row.already { opacity: .5; }

.portrait-stage.drop-target { border-color: var(--ember); background: var(--tint-accent-1); }

.source-toggle {
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1px solid var(--line); border-radius: 24px;
  background: var(--well-2); margin-bottom: 12px;
}
.source-opt {
  padding: 5px 13px; border-radius: 20px; cursor: pointer;
  border: 0; background: transparent; color: var(--parch-400);
  font: 500 12.5px var(--font-ui);
  transition: color .15s, background .15s;
}
.source-opt:hover { color: var(--parch-100); }
.source-opt.active { background: var(--ember-dim); color: var(--ember-hot); }
.source-opt .spark { color: var(--ember); }

.manual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 13px; margin-top: 14px; }
.manual-item { display: flex; gap: 11px; align-items: flex-start; }
.manual-icon {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--ok-tint); color: var(--ok);
  border: 1px solid var(--ok-line);
}
.manual-title { font-size: 13.5px; color: var(--parch-100); font-weight: 500; }
.manual-text { font-size: 12.5px; color: var(--parch-500); line-height: 1.5; margin-top: 2px; }

.notes-line { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--parch-500); }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ember); font: inherit; font-size: 13px;
}
.link-btn:hover { color: var(--ember-hot); text-decoration: underline; text-underline-offset: 3px; }

.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th {
  text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--parch-500); font-weight: 600; padding: 0 8px 6px 0;
}
.mini-table td { padding: 3px 8px 3px 0; vertical-align: middle; }
.mini-table input { padding: 6px 8px; font-size: 13px; }
.mini-table td.act { width: 34px; padding-right: 0; }

/* ============================ misc ============================ */

.muted { color: var(--parch-500); }
.small { font-size: 12.5px; }
.mono-id { font-family: var(--font-mono); font-size: 11px; color: var(--parch-500); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.divider-h { height: 1px; background: var(--line); margin: 20px 0; }

/* ============================ responsive ============================ */

@media (max-width: 1000px) {
  :root { --sidebar-w: 216px; }
  .view { padding: 26px 22px 80px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar {
    flex-direction: row; align-items: center; gap: 12px;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 10px 14px; overflow-x: auto; overflow-y: visible;
  }
  .brand-text em { display: none; }
  .brand-text strong { font-size: 18px; }
  .project-switch { min-width: 190px; }
  .nav { flex-direction: row; gap: 3px; }
  .nav-link { padding: 7px 9px; font-size: 13px; }
  .nav-link .count, .nav-link.active::before { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; padding: 0; flex-shrink: 0; }
  .user-strip { padding-top: 0; border-top: 0; }
  .user-meta, .what-this-is { display: none; }
  .kbd-hint span, .ai-pill .txt { display: none; }
  .stats-layout { grid-template-columns: 1fr; }
  .onboard-hero h1 { font-size: 38px; }
  .page-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}