/* StoryWeb — "new chapter, who dis?" edition.
   Showy fonts where it's fun (Lobster, Great Vibes, Shrikhand), clean ones where you read (Nunito, Lora).
   Light theme = Brunch (cozy cream & blush). Dark theme = Wine o'clock (aubergine & merlot). */

:root {
  --font: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: 'Lora', Georgia, "Times New Roman", serif;
  --show: 'Lobster', 'Brush Script MT', cursive;
  --script: 'Great Vibes', 'Segoe Script', cursive;
  --chunk: 'Shrikhand', 'Lobster', cursive;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pink: #e0218a;
  --magenta: #d6246e;
  --wine: #7b1e3a;
  --plum: #4a1942;
  --coral: #ff6f59;
  --gold: #d29a1f;
  --gold-soft: #ecd29c;
  --turq: #17a2a0;
  --rose-gold: #b76e79;
  --sunset: linear-gradient(100deg, #7b1e3a 0%, #c81d6a 34%, #ff5f6d 68%, #f6b93b 100%);
  --sunset-soft: linear-gradient(100deg, #fbd3e0 0%, #ffd9cf 55%, #ffe9b8 100%);
  --leopard: url("../leopard.svg");

  /* Brunch (light) */
  --bg: #fdf1e7;
  --bg2: #fffaf4;
  --panel: #fff7ef;
  --panel2: #fdeae2;
  --panel3: #f9dcd2;
  --line: #f0cfc2;
  --line2: #e3aa9b;
  --text: #3b1830;
  --muted: #86576c;
  --faint: #b48a9a;
  --accent: #d6246e;
  --accent-2: #b5175b;
  --accent-soft: rgba(214, 36, 110, .1);
  --outline: #a63d67;
  --title: #7b1e3a;
  --danger: #c0182f;
  --ok: #17a2a0;
  --warn: #c98a10;
  --dot: rgba(214, 36, 110, .085);
  --shadow: 0 14px 36px rgba(123, 30, 58, .2);
  --soft-shadow: 0 2px 0 rgba(123, 30, 58, .06), 0 6px 16px rgba(123, 30, 58, .08);
  --tl-bg: #fff4ec;
  --card: #fffdf9;
  --radius: 14px;
  color-scheme: light;
}

/* Wine o'clock (dark) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #220e1d; --bg2: #1a0916; --panel: #2c1227; --panel2: #381832; --panel3: #48203f; --line: #55284b; --line2: #7a3a66;
    --text: #fde8f1; --muted: #dba9c0; --faint: #a87892; --accent: #e8719f; --accent-2: #c94c82; --accent-soft: rgba(232, 113, 159, .14); --outline: #d993b4; --gold-soft: #8f7444;
    --title: #ffb3d4; --danger: #ff5f7e; --ok: #4fd1c5; --warn: #f4cf6a; --dot: rgba(244, 207, 106, .07);
    --shadow: 0 14px 40px rgba(0, 0, 0, .55); --soft-shadow: 0 2px 10px rgba(0, 0, 0, .35); --tl-bg: #1e0b1a; --card: #33162e;
    --sunset-soft: linear-gradient(100deg, #4a1942 0%, #5e1d3f 55%, #5a3420 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #220e1d; --bg2: #1a0916; --panel: #2c1227; --panel2: #381832; --panel3: #48203f; --line: #55284b; --line2: #7a3a66;
  --text: #fde8f1; --muted: #dba9c0; --faint: #a87892; --accent: #e8719f; --accent-2: #c94c82; --accent-soft: rgba(232, 113, 159, .14); --outline: #d993b4; --gold-soft: #8f7444;
  --title: #ffb3d4; --danger: #ff5f7e; --ok: #4fd1c5; --warn: #f4cf6a; --dot: rgba(244, 207, 106, .07);
  --shadow: 0 14px 40px rgba(0, 0, 0, .55); --soft-shadow: 0 2px 10px rgba(0, 0, 0, .35); --tl-bg: #1e0b1a; --card: #33162e;
  --sunset-soft: linear-gradient(100deg, #4a1942 0%, #5e1d3f 55%, #5a3420 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: #ffc1dc; color: #3b1830; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline wavy; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 400; }
h3 { font-family: var(--show); font-size: 21px; color: var(--title); margin-top: 1.1em; }
h4 { font-family: var(--show); font-size: 18px; color: var(--title); }
p { margin: 0 0 .7em; }
kbd { font: 700 11px var(--font); background: var(--panel); border: 1.5px solid var(--line2); border-bottom-width: 3px; border-radius: 6px; padding: 0 5px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.grow { flex: 1 1 auto; min-width: 0; }
.pad { padding: 10px 12px; }
.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.wrap > input { flex: 1 1 120px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.shape { display: inline-block; vertical-align: -2px; flex: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .18)); }
.shape-wrap { display: inline-flex; align-items: center; }
.note { background: var(--sunset-soft); border: 1.5px dashed var(--line2); border-radius: 12px; padding: 7px 12px; color: var(--text); }
.warn { color: var(--warn); }
.script { font-family: var(--script); font-weight: 400; }
.polka { background-image: radial-gradient(var(--dot) 1.6px, transparent 2px); background-size: 20px 20px; }

/* leopard trim, used sparingly (…ish) */
.leopard-trim { position: relative; }
.leopard-trim::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; background: var(--leopard) 0 0 / 70px 70px; box-shadow: 0 2px 4px rgba(58, 34, 20, .25); z-index: 3; pointer-events: none; }

/* --- form controls --- */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea {
  background: var(--bg2); border: 1.5px solid var(--line2); border-radius: 12px; padding: 7px 11px; width: 100%; outline: none; min-width: 0;
  box-shadow: inset 0 2px 3px rgba(123, 30, 58, .06);
}
input:focus, select:focus, textarea:focus { border-color: var(--rose-gold); box-shadow: 0 0 0 3px var(--accent-soft), inset 0 2px 3px rgba(123, 30, 58, .06); }
input::placeholder, textarea::placeholder { color: var(--faint); font-style: italic; }
textarea { resize: vertical; line-height: 1.55; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type=color] { width: 32px; height: 30px; padding: 0; border: 1.5px solid var(--line2); border-radius: 50%; background: none; cursor: pointer; flex: none; overflow: hidden; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 0; }
.field > input, .field > select, .field > textarea { font-size: 14.5px; font-weight: 400; color: var(--text); }
.field.inline { flex-direction: row; align-items: center; gap: 6px; }
.field.inline select { width: auto; max-width: 340px; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text); }
.check.small { font-size: 12.5px; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1.5px solid var(--line2); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 6px 15px; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.2; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 0 var(--line); transition: transform .08s, box-shadow .08s, background .15s; }
.btn:hover { background: var(--panel2); text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 0 var(--line2); }
.btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--line); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; box-shadow: 0 2px 0 var(--wine); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 3px 0 var(--wine); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--card)); }
.btn.small { padding: 3px 11px; font-size: 12px; }
.btn.big { padding: 11px 20px; font-size: 16px; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn.left { margin-right: auto; }
.btn-group { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.icon-btn { border: none; background: none; color: var(--muted); cursor: pointer; padding: 4px 7px; border-radius: 999px; font-size: 15px; line-height: 1; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn.small { font-size: 12px; padding: 3px 6px; }
.icon-btn.danger:hover { color: var(--danger); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.link-btn { border: none; background: none; color: var(--accent); cursor: pointer; padding: 2px 0; font-size: 12.5px; font-weight: 700; }
.seg { display: inline-flex; border: 1.5px solid var(--line2); border-radius: 999px; overflow: hidden; background: var(--card); }
.seg > button, .seg > label { border: none; background: transparent; padding: 3px 11px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.seg > * + * { border-left: 1.5px dotted var(--line2) !important; }
.seg > button.active { background: var(--accent-2); color: #fff; }
.seg.small > button { padding: 2px 10px; }
.toggle { border: 1.5px solid var(--line2); background: var(--card); color: var(--faint); border-radius: 999px; padding: 2px 11px; cursor: pointer; font-size: 12px; font-weight: 800; }
.toggle.on { color: #fff; background: var(--accent-2); border-color: var(--accent-2); }
.toggle.small { padding: 2px 6px; }
.toggle-pair { display: inline-flex; gap: 2px; }
.badge { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; background: var(--gold-soft); color: #5a3a00; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; flex: none; border: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.avatar.small { width: 19px; height: 19px; font-size: 10px; box-shadow: none; }
.avatar.tiny { width: 17px; height: 17px; font-size: 9.5px; box-shadow: none; }
.avatar.online { cursor: pointer; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 0 3.5px var(--turq); }

/* --- auth pages --- */
body.simple-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
  background: radial-gradient(rgba(255, 255, 255, .22) 2px, transparent 2.5px) 0 0 / 26px 26px, var(--sunset); }
.auth-card { width: 100%; max-width: 440px; background: var(--card); border-radius: 26px; padding: 30px 30px 28px; box-shadow: 0 30px 60px rgba(74, 25, 66, .45); position: relative; margin-top: 14px; }
/* scalloped lace edge */
.auth-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: -12px; height: 14px;
  background: radial-gradient(circle at 10px 14px, var(--card) 9px, transparent 9.5px) 0 0 / 20px 14px repeat-x; }
.auth-card .brand { display: flex; align-items: center; gap: 8px; font-family: var(--show); font-size: 22px; color: var(--magenta); margin-bottom: 8px; }
.auth-card h1 { font-family: var(--show); font-size: 40px; color: var(--title); margin-bottom: 2px; }
.auth-card .tagline { font-family: var(--script); font-size: 30px; color: var(--pink); line-height: 1.1; margin: 0 0 12px; }
.auth-card form { margin-top: 16px; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.auth-card label.check { flex-direction: row; color: var(--text); font-weight: 400; }
.auth-card button { width: 100%; margin-top: 6px; }
.alert { background: color-mix(in srgb, var(--danger) 10%, var(--card)); border: 1.5px dashed var(--danger); color: var(--text); padding: 8px 12px; border-radius: 12px; margin: 10px 0; }
.checks { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.checks li span { display: inline-block; width: 18px; font-weight: 800; }
.checks .pass span { color: var(--ok); }
.checks .fail span { color: var(--danger); }
.checks small { display: block; margin-left: 18px; color: var(--muted); }

/* --- app layout --- */
#app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
#app.booting { align-items: center; justify-content: center; }
.boot-msg { color: var(--muted); padding: 40px; text-align: center; font-family: var(--script); font-size: 34px; }
.boot-msg.error { color: var(--danger); font-family: var(--font); font-size: 15px; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 7px 14px 9px; background: var(--sunset); color: #fff; flex: none; position: relative; z-index: 6; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--leopard) 0 0 / 60px 60px; box-shadow: 0 3px 6px rgba(58, 34, 20, .3); }
.brand img { display: block; filter: drop-shadow(0 2px 2px rgba(74, 25, 66, .5)); }
.story-title { font-family: var(--show); font-size: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; text-shadow: 0 2px 0 rgba(74, 25, 66, .45); letter-spacing: .01em; }
.search-wrap { width: min(360px, 34vw); }
.topbar .search { padding: 6px 14px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .22) !important; border: 1.5px solid rgba(255, 255, 255, .45) !important; color: #fff; box-shadow: none !important; }
.topbar .search::placeholder { color: rgba(255, 255, 255, .85); }
.topbar .search:focus { background: rgba(255, 255, 255, .95) !important; color: #3b1830; }
.topbar .search:focus::placeholder { color: #b48a9a; }
.topbar .icon-btn { color: #fff; }
.topbar .icon-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.presence-list { display: flex; gap: 6px; }
.user-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; cursor: pointer; padding: 2px 8px 2px 2px; border-radius: 999px; color: #fff; }
.user-btn:hover { background: rgba(255, 255, 255, .2); }
.user-name { font-size: 13.5px; font-weight: 800; }
.conn { width: 9px; height: 9px; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
.conn.offline { background: #ff3b3b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }
.busy { width: 15px; height: 15px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; opacity: 0; }
.busy.on { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tl-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px 7px; background: var(--panel); border-bottom: 1.5px dashed var(--line2); flex: none; flex-wrap: wrap; }
.tl-toolbar .sep { width: 0; align-self: stretch; border-left: 2px dotted var(--line2); }
.levels { display: inline-flex; align-items: center; gap: 4px; }
.levels > .faint { font-family: var(--script); font-size: 21px; color: var(--rose-gold); margin-right: 3px; }
.kind-picker { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.timeline { position: relative; flex: none; min-height: 140px; background-color: var(--tl-bg); background-image: radial-gradient(var(--dot) 1.6px, transparent 2px); background-size: 22px 22px; }
.splitter { height: 11px; flex: none; cursor: row-resize; position: relative; background: var(--leopard) 0 0 / 60px 60px; box-shadow: inset 0 2px 3px rgba(58, 34, 20, .35), inset 0 -2px 3px rgba(58, 34, 20, .35); }
.splitter::after { content: "♥"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: 22px; height: 22px; border-radius: 50%; background: var(--card);
  color: var(--outline); font-size: 13px; line-height: 22px; text-align: center; box-shadow: 0 0 0 1px var(--line2), 0 2px 4px rgba(0, 0, 0, .25); }
.splitter:hover::after { transform: translate(-50%, -52%) scale(1.15); }
.bottom { flex: 1 1 auto; display: flex; min-height: 0; }
.sidebar { width: 310px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-right: 2px dotted var(--line2); min-height: 0; }
.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pane { flex: 1 1 auto; overflow: auto; min-height: 0; }
.details-pane { padding: 16px 24px 48px; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.6px, transparent 2px); background-size: 22px 22px; }
.details-pane.file-over { outline: 3px dashed var(--accent); outline-offset: -10px; }
.activity-pane { padding: 16px 24px; }
.graph-pane { display: flex; flex-direction: column; overflow: hidden; }

.tabs { display: flex; gap: 4px; padding: 6px 10px 0; flex: none; border-bottom: 1.5px solid var(--line); }
.tab { border: none; background: none; padding: 6px 13px 5px; cursor: pointer; color: var(--muted); font-family: var(--show); font-size: 17px; border-radius: 14px 14px 0 0; margin-bottom: -1.5px; border: 1.5px solid transparent; }
.tab:hover { color: var(--accent); }
.tab.active { color: var(--title); background: var(--card); border-color: var(--line); border-bottom-color: var(--card); text-decoration: underline wavy var(--rose-gold); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.main-tabs, .side-tabs { background: var(--panel); }

/* --- timeline --- */
.tl-viewport { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; outline: none; cursor: grab; touch-action: none; }
.tl-viewport.panning, .tl-viewport.dragging { cursor: grabbing; }
.tl-lines { position: absolute; inset: 0; pointer-events: none; }
.tl-items, .tl-overlay { position: absolute; inset: 0; }
.tl-overlay { pointer-events: none; z-index: 5; }
.tl-lines .tick { stroke: var(--rose-gold); stroke-width: 1.5; }
.tl-lines .tick-label { fill: var(--rose-gold); font: 700 10px var(--font); }
.tl-lines .colline { stroke: var(--line2); stroke-opacity: .5; stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 1.5; }
/* the strings are little gold chains */
.tl-lines .string { stroke: var(--gold); stroke-width: 2.4; stroke-dasharray: 3 2.6; stroke-linecap: round; opacity: .75; }
.tl-lines .string.lit { opacity: 1; stroke: var(--outline); }
.tl-lines .port { fill: var(--card); stroke: var(--gold); stroke-width: 2; }
.tl-lines .thread { fill: none; stroke-width: 3; stroke-opacity: .4; stroke-linecap: round; }
.tl-lines .thread.lit { stroke-width: 4; stroke-opacity: .9; }
.tl-lines .playhead { stroke: var(--outline); stroke-width: 1.5; stroke-dasharray: 6 4; }
.tl-ruler { position: absolute; left: 0; right: 0; top: 0; height: 22px; cursor: col-resize; z-index: 2; background: linear-gradient(var(--panel), transparent); }
.tl-ruler:hover { background: linear-gradient(rgba(224, 33, 138, .14), transparent); }
.tl-playhead-handle { position: absolute; top: -1px; width: 24px; height: 22px; margin-left: -12px; z-index: 3; cursor: ew-resize; text-align: center; }
.tl-playhead-handle::before { content: "♥"; color: var(--outline); font-size: 21px; line-height: 22px; }

.tl-block { position: absolute; border-radius: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 11px; display: flex; align-items: center; cursor: pointer; color: var(--text); font-size: 13px; }
.tl-chapter { font-family: var(--show); font-size: 17px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 62%, #ff6f59) 100%);
  border: 1px solid color-mix(in srgb, var(--c) 75%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 color-mix(in srgb, var(--c) 55%, #000); }
.tl-chapter:hover { filter: brightness(1.07) saturate(1.1); }
.tl-episode { font-weight: 800; font-style: italic; background: color-mix(in srgb, var(--c) 18%, var(--card)); color: color-mix(in srgb, var(--c) 72%, var(--text));
  border: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent); border-radius: 12px; }
.tl-episode:hover { background: color-mix(in srgb, var(--c) 28%, var(--card)); }
.tl-block.virtual { background: transparent; border: 2px dashed var(--line2); color: var(--faint); cursor: default; font-family: var(--script); font-size: 20px; font-style: normal; text-shadow: none; box-shadow: none; }
.tl-block.selected, .tl-event.selected { outline: 2px solid var(--outline); outline-offset: 1px; z-index: 1; }
.tl-block.lit { box-shadow: 0 0 0 2px var(--gold-soft); }
.tl-label { overflow: hidden; text-overflow: ellipsis; white-space: pre; }
/* events: little index cards with a strip of washi tape */
.tl-event { position: absolute; border-radius: 12px; background: var(--card); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); padding: 8px 9px 4px; cursor: pointer; overflow: visible;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 18%, var(--line)), 0 4px 10px rgba(123, 30, 58, .07); }
.tl-event::before { content: ""; position: absolute; top: -4px; left: 12px; width: 26px; height: 8px; transform: rotate(-2deg); border-radius: 1px; opacity: .55;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 45%, var(--card)) 0 4px, color-mix(in srgb, var(--c) 25%, var(--card)) 4px 8px); }
.tl-event:hover { background: color-mix(in srgb, var(--c) 8%, var(--card)); transform: rotate(-.4deg); }
.tl-event.simul { box-shadow: 3px 0 0 -1px var(--gold-soft), 0 2px 0 color-mix(in srgb, var(--c) 18%, var(--line)), 0 4px 10px rgba(123, 30, 58, .07); }
.tl-event.dim { opacity: .35; }
.tl-event.lit { box-shadow: 0 0 0 2px var(--gold-soft), 0 4px 10px rgba(123, 30, 58, .15); }
.tl-ev-title { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tl-num { color: var(--rose-gold); font-weight: 700; font-size: 11px; }
.tl-ev-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; font-style: italic; }
.tl-empty { position: absolute; border: 2px dashed var(--line2); border-radius: 12px; color: var(--faint); font-size: 12px; font-style: italic; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px; background: color-mix(in srgb, var(--card) 50%, transparent); }
/* beads = charms on a bracelet */
.tl-bead { position: absolute; height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 4px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; cursor: grab; z-index: 2;
  background: radial-gradient(circle at 25% 25%, var(--card), color-mix(in srgb, var(--c) 18%, var(--card)) 80%); border: 1.2px solid color-mix(in srgb, var(--gold) 55%, var(--line)); color: var(--text);
  box-shadow: 0 1px 0 rgba(123, 30, 58, .15), inset 0 1px 0 rgba(255, 255, 255, .6); }
.tl-bead span { overflow: hidden; text-overflow: ellipsis; }
.tl-bead:hover { background: color-mix(in srgb, var(--c) 30%, var(--card)); }
.tl-bead.narrow { padding: 0; justify-content: center; border-radius: 50%; }
.tl-bead.auto { border-style: dashed; border-color: var(--rose-gold); }
.tl-bead.inherited { opacity: .75; }
.tl-bead.dim { opacity: .22; }
.tl-bead.lit { background: color-mix(in srgb, var(--c) 30%, var(--card)); border-color: var(--outline); opacity: 1; }
.tl-bead.more { justify-content: center; color: var(--muted); cursor: pointer; border-style: dotted; background: var(--card); }
.presence { position: absolute; top: -6px; right: -4px; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--card); z-index: 2; }
.tl-block .presence { top: 4px; right: 5px; }
.presence.big { position: static; width: 24px; height: 24px; font-size: 11px; }
.drop-line { position: absolute; width: 4px; background: var(--outline); border-radius: 2px; }
.drop-box { position: absolute; border: 2px dashed var(--outline); border-radius: 14px; background: var(--accent-soft); }
.tl-ghost { position: absolute; background: var(--card); border: 1.5px solid var(--line2); border-radius: 14px; padding: 6px 11px; box-shadow: var(--shadow); font-size: 12.5px; display: flex; flex-direction: column; max-width: 300px; transform: rotate(-2deg); }
.tl-ghost b { font-family: var(--show); font-weight: 400; font-size: 15px; color: var(--title); }
.tl-ghost span { color: var(--muted); }
.tl-ghost.invalid { border-color: var(--line2); opacity: .8; }
.tl-empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; color: var(--muted); pointer-events: none; }
.tl-empty-state .script { font-size: 40px; color: var(--pink); line-height: 1.1; }
.tl-empty-state button { pointer-events: auto; }
.chip.playhead-chip { --c: #e0218a; }

/* --- sidebar --- */
.side-body { flex: 1 1 auto; overflow: auto; min-height: 0; }
.side-tools { display: flex; gap: 6px; padding: 9px 9px 7px; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.side-filter { padding: 5px 12px !important; font-size: 13px; border-radius: 999px !important; }
.tree { padding: 2px 0 8px; }
.tree-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px calc(6px + var(--depth) * 16px); cursor: pointer; font-size: 13.5px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; white-space: nowrap; }
.tree-row:hover { background: var(--accent-soft); }
.tree-row.selected { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 3px 0 0 var(--outline); }
.tree-row.dragging { opacity: .4; }
.tree-row.drop-before { border-top-color: var(--outline); }
.tree-row.drop-after { border-bottom-color: var(--outline); }
.tree-row.drop-into { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--outline); border-radius: 8px; }
.tree-row .caret { border: none; background: none; color: var(--rose-gold); width: 14px; padding: 0; cursor: pointer; font-size: 11px; flex: none; }
.tree-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.t-chapter .tree-dot { border-radius: 50%; transform: scale(1.15); }
.t-episode .tree-dot { border-radius: 50%; }
.t-event .tree-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: none; }
.t-chapter { font-family: var(--show); font-size: 16px; color: var(--title); }
.t-episode { font-weight: 800; }
.t-unassigned { color: var(--faint); font-family: var(--script); font-size: 20px; }
.tree-num { color: var(--rose-gold); font-family: var(--font); font-size: 11px; font-weight: 700; flex: none; }
.tree-title { overflow: hidden; text-overflow: ellipsis; }
.tree-count { margin-left: auto; color: var(--faint); font-family: var(--font); font-size: 11px; flex: none; }
.simul-mark { color: var(--gold); font-weight: 800; }
.kind-block { border-bottom: 1.5px dashed var(--line); }
.kind-block.hidden-kind .kind-name { opacity: .5; }
.kind-head { display: flex; align-items: center; gap: 4px; padding: 7px 9px 4px; }
.kind-head .caret { border: none; background: none; color: var(--rose-gold); cursor: pointer; width: 14px; padding: 0; font-size: 11px; }
.kind-name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--show); font-size: 17px; color: var(--title); }
.kind-name .faint { font-family: var(--font); font-size: 12px; }
.entity-list { padding-bottom: 6px; }
.entity-row { display: flex; align-items: center; gap: 8px; padding: 3px 9px 3px 28px; cursor: pointer; font-size: 13.5px; }
.entity-row:hover { background: var(--accent-soft); }
.entity-row.selected { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 3px 0 0 var(--outline); }
.entity-row.spot .spot-btn { color: var(--gold); opacity: 1; }
.entity-row.drop-into { box-shadow: inset 0 0 0 1.5px var(--outline); background: var(--accent-soft); }
.ent-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.spot-btn { opacity: 0; }
.entity-row:hover .spot-btn { opacity: 1; }
.library .seg { margin: 0 9px 7px; }
.lib-list { display: flex; flex-direction: column; }
.lib-row { display: flex; gap: 9px; align-items: center; padding: 7px 10px; cursor: pointer; border-bottom: 1.5px dotted var(--line); }
.lib-row:hover { background: var(--accent-soft); }
.lib-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; flex: none; border: 1px solid var(--line2); transform: rotate(-3deg); }
.lib-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--panel3); border-radius: 10px; color: var(--accent); flex: none; font-family: var(--show); font-size: 18px; }
.lib-text { flex: 1 1 auto; min-width: 0; }
.lib-title { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-excerpt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--serif); font-style: italic; }
.lib-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; flex: none; }

/* --- inspector --- */
.insp { max-width: 1000px; }
.insp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.type-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  background: var(--card); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 11px 3px 9px; }
.type-badge .num { background: var(--gold-soft); color: #5a3a00; border-radius: 999px; padding: 0 7px; letter-spacing: 0; text-transform: none; }
.type-badge.entity { padding: 2px 4px 2px 9px; }
.type-badge.entity select { width: auto; padding: 1px 8px; font-size: 12px; text-transform: none; letter-spacing: 0; border-radius: 999px; font-weight: 800; }
.insp-presence { display: flex; gap: 4px; }
.color-in { width: 28px !important; height: 28px !important; }
.title-input { font-family: var(--show) !important; font-size: 38px !important; color: var(--title); border-color: transparent !important; background: transparent !important; box-shadow: none !important;
  padding: 2px 4px !important; margin: 6px 0 8px; line-height: 1.25; }
.title-input:hover { border-color: var(--line2) !important; border-style: dashed !important; }
.title-input:focus { border-color: var(--accent) !important; background: var(--bg2) !important; border-style: solid !important; }
.placement { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.placement .pos { color: var(--muted); font-family: var(--script); font-size: 22px; }
.simul-note { width: 100%; font-size: 12.5px; font-weight: 700; color: var(--gold); }
.grid-when { display: grid; grid-template-columns: minmax(200px, 360px); margin-bottom: 8px; }
.summary { min-height: 46px; font-family: var(--serif) !important; font-size: 15px !important; }
.insp > .field { margin-bottom: 8px; }
.insp-section { margin-top: 22px; }
.sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; padding-bottom: 5px;
  background: radial-gradient(circle, var(--line2) 1.3px, transparent 1.6px) 0 100% / 9px 4px repeat-x; }
.sec-toggle { border: none; background: none; cursor: pointer; font-family: var(--show); font-size: 22px; color: var(--title); padding: 0; display: inline-flex; gap: 8px; align-items: center; }
.sec-toggle:hover { color: var(--accent); }
.sec-toggle .caret { color: var(--rose-gold); font-family: var(--font); font-size: 12px; width: 10px; }
.sec-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.kind-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; }
.kind-label { width: 100px; flex: none; font-family: var(--show); font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 6px; padding-top: 1px; }
.inherited { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; opacity: .85; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 5px 2px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c, #b76e79) 40%, var(--line2));
  background: color-mix(in srgb, var(--c, #b76e79) 14%, var(--card)); font-size: 13px; font-weight: 700; cursor: pointer; max-width: 100%; box-shadow: 0 1.5px 0 color-mix(in srgb, var(--c, #b76e79) 30%, transparent); }
.chip:hover { background: color-mix(in srgb, var(--c, #b76e79) 24%, var(--card)); }
.chip.auto { border-style: dashed; }
.chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-auto { font-size: 10px; color: var(--faint); }
.chip-x { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 10px; padding: 2px 5px; border-radius: 999px; }
.chip-x:hover { color: #fff; background: var(--danger); }
.adder-wrap { position: relative; margin-top: 9px; max-width: 440px; }
.adder { font-size: 13.5px; border-radius: 999px !important; border-style: dashed !important; }
.adder-list, .suggest { position: absolute; z-index: 30; background: var(--card); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow); min-width: 260px; max-width: 420px; overflow: hidden; }
.adder-list { left: 0; top: 100%; margin-top: 5px; }
.adder-item, .suggest-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 13.5px; font-weight: 700; }
.adder-item small, .suggest-item small { margin-left: auto; color: var(--faint); font-weight: 400; font-style: italic; }
.adder-item.active, .suggest-item.active { background: var(--sunset-soft); }
.adder-item.create { color: var(--muted); font-weight: 400; }
.suggest { position: fixed; z-index: 150; }
.suggest-hint { font-size: 11px; color: var(--faint); padding: 5px 12px; border-top: 1.5px dotted var(--line2); }
.child-list { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.child-list li { padding: 5px 12px; border-left: 4px solid var(--c); background: var(--card); border-radius: 4px 12px 12px 4px; box-shadow: var(--soft-shadow); }
.child-list a { color: var(--text); font-weight: 700; }
.child-list .num { color: var(--rose-gold); font-size: 11px; }
.entity-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
/* portrait in a little gilded frame */
.entity-portrait { width: 104px; height: 104px; object-fit: cover; border-radius: 50%; border: 4px solid var(--card); cursor: zoom-in; flex: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, var(--card)), 0 6px 14px rgba(123, 30, 58, .18); margin: 4px; }
.aliases { min-height: 36px; }
.rel-list { display: flex; flex-direction: column; gap: 4px; }
.rel-row-item { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 12px; flex-wrap: wrap; background: var(--card); box-shadow: var(--soft-shadow); }
.rel-row-item:hover { background: var(--panel2); }
.rel-row-item.inactive { opacity: .4; }
.rel-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.rel-arrow { color: var(--rose-gold); width: 14px; text-align: center; font-weight: 800; }
.rel-text { font-style: italic; }
.rel-other { font-weight: 800; }
.rel-span { margin-left: 4px; }
.rel-actions { margin-left: auto; display: flex; gap: 2px; opacity: .55; }
.rel-row-item:hover .rel-actions { opacity: 1; }
.node-chip .chip-label { cursor: pointer; }
.named-list { display: flex; flex-direction: column; gap: 6px; }
.named-item { text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 7px 11px; cursor: pointer; box-shadow: var(--soft-shadow); }
.named-item:hover { border-color: var(--accent); }
.named-item .faint.small:last-child { font-family: var(--serif); font-style: italic; }
.entry-list { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
/* entries: cozy recipe cards with washi tape */
.entry-card { border: 1.5px solid var(--line); background: var(--card); border-radius: 18px; padding: 14px 18px 14px; position: relative; box-shadow: var(--soft-shadow); }
.entry-card::before { content: ""; position: absolute; top: -6px; left: 26px; width: 52px; height: 12px; transform: rotate(-2deg); opacity: .5; border-radius: 1px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--rose-gold) 55%, var(--card)) 0 5px, color-mix(in srgb, var(--rose-gold) 30%, var(--card)) 5px 10px); }
.entry-card:hover { border-color: var(--line2); }
.entry-card.image { background: var(--card); }
.entry-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.entry-kind { color: var(--rose-gold); }
.entry-title { font-family: var(--show); font-weight: 400; font-size: 20px; color: var(--title); }
.entry-actions { display: flex; gap: 1px; opacity: .5; }
.entry-card:hover .entry-actions { opacity: 1; }
.entry-image img { max-width: 100%; max-height: 380px; border-radius: 6px; cursor: zoom-in; display: block; border: 8px solid #fff; border-bottom-width: 26px; box-shadow: 0 6px 16px rgba(74, 25, 66, .25); transform: rotate(-1deg); }
.also { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.also-link { font-size: 12.5px; font-weight: 700; border-left: 4px solid var(--c); padding-left: 6px; color: var(--muted); }
.drop-hint { border: 2px dashed var(--line2); border-radius: 18px; padding: 20px; text-align: center; color: var(--faint); font-size: 13.5px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.meta { margin-top: 26px; color: var(--faint); font-size: 12.5px; font-style: italic; }
.insp-overview { max-width: 860px; }
.insp-overview h2 { font-family: var(--show); font-size: 52px; color: var(--title); margin-bottom: 0; }
.affirmation { font-family: var(--script); font-size: 36px; color: var(--pink); margin: 0 0 6px 8px; line-height: 1.2; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 20px; }
/* stats as stickers */
.stat { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 8px 16px 10px; display: flex; flex-direction: column; min-width: 96px; box-shadow: var(--soft-shadow); transform: rotate(-2deg); }
.stat:nth-child(even) { transform: rotate(1.8deg); }
.stat:nth-child(3n) { transform: rotate(-.6deg); }
.stat b { font-family: var(--chunk); font-weight: 400; font-size: 30px; color: var(--magenta); line-height: 1.15; }
.stat:nth-child(2) b { color: var(--turq); }
.stat:nth-child(3) b { color: var(--gold); }
.stat:nth-child(5) b { color: var(--wine); }
.stat span { font-size: 12px; font-weight: 700; color: var(--muted); }
.quickstart { background: var(--card); border: 2px dashed var(--line2); border-radius: 20px; padding: 6px 22px 10px; margin-bottom: 16px; box-shadow: var(--soft-shadow); }
.quickstart ul { padding-left: 18px; color: var(--muted); list-style: "♥  "; }
.quickstart li { margin-bottom: 7px; }
.quickstart li::marker { color: var(--pink); }
.quickstart b { color: var(--text); }
.activity { display: flex; flex-direction: column; gap: 7px; }
.act { display: flex; gap: 9px; align-items: center; font-size: 13.5px; }
.act > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act a { font-weight: 800; }

/* --- prose (where reading matters: clean & calm) --- */
.prose { font-family: var(--serif); font-size: 16.5px; line-height: 1.75; overflow-wrap: anywhere; color: var(--text); }
.prose.plain { white-space: pre-wrap; font-size: 15px; line-height: 1.6; }
.prose.small { font-size: 13.5px; }
.prose.caption { font-size: 13.5px; color: var(--muted); font-style: italic; margin-top: 4px; }
.prose p { margin: 0 0 .7em; }
.prose p:last-child { margin-bottom: 0; }
.prose h3, .prose h4, .prose h5 { font-family: var(--show); font-weight: 400; color: var(--title); margin: .9em 0 .3em; }
.prose h3 { font-size: 24px; }
.prose h4 { font-size: 20px; }
.prose h5 { font-size: 17px; }
.prose blockquote { margin: .5em 0; padding: 4px 16px; border-left: 4px solid var(--pink); background: var(--sunset-soft); border-radius: 0 12px 12px 0; font-style: italic; }
.prose code { font: 13px var(--mono); background: var(--panel3); padding: 0 5px; border-radius: 5px; }
.prose hr { border: none; height: 18px; margin: .8em 0; text-align: center; }
.prose hr::after { content: "❦   ❦   ❦"; color: var(--rose-gold); font-size: 15px; }
.prose ul, .prose ol { margin: .3em 0 .7em; padding-left: 24px; }
.prose ul { list-style: "✿  "; }
.prose ul li::marker { color: var(--pink); }
.prose.loading { color: var(--faint); }
.prose.clamped { max-height: 440px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* names in text: highlighter-pen marks */
.mention { color: inherit; font-weight: 600; cursor: pointer; border-radius: 3px; padding: 0 2px; margin: 0 -1px;
  background: linear-gradient(104deg, transparent .5%, color-mix(in srgb, var(--c) 35%, transparent) 2.4%, color-mix(in srgb, var(--c) 28%, transparent) 95%, transparent 99%) 0 62% / 100% 58% no-repeat; }
.mention:hover, .mention:focus { background-size: 100% 100%; outline: none; }

/* --- mention editor --- */
.mention-editor { position: relative; }
.me-backdrop, .me-input { font-family: var(--serif); font-size: 17px; line-height: 1.7; padding: 14px 16px !important; border: 1.5px solid var(--line2); border-radius: 14px; letter-spacing: normal; tab-size: 4; font-weight: 400; }
.me-backdrop { position: absolute; inset: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; color: transparent; pointer-events: none; border-color: transparent; background: var(--bg2);
  background-image: repeating-linear-gradient(transparent 0 calc(1.7em - 1px), color-mix(in srgb, var(--line) 60%, transparent) calc(1.7em - 1px) 1.7em); background-position: 0 14px; }
.me-backdrop mark { color: transparent; background: color-mix(in srgb, var(--c) 32%, transparent); border-radius: 3px; box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 80%, transparent); }
.me-input { position: relative; background: transparent !important; resize: vertical; min-height: 280px; max-height: 60vh; white-space: pre-wrap; overflow-wrap: break-word; display: block; width: 100%; box-shadow: none !important; }
.entry-editor { display: flex; flex-direction: column; gap: 10px; }
.entry-title-input { font-family: var(--show) !important; font-size: 24px !important; color: var(--title); }
.entry-context { font-size: 12.5px; color: var(--muted); }
.entry-context b { color: var(--title); }
.detected { min-height: 26px; font-size: 12.5px; }
.detected-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--faint); }
.conflict-text { white-space: pre-wrap; max-height: 300px; overflow: auto; background: var(--bg2); padding: 12px; border-radius: 12px; font: 14px/1.6 var(--serif); }

/* --- modals, popovers, menus, toasts --- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(58, 14, 46, .5); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; z-index: 100; animation: fade .15s ease-out; overflow: auto; }
.modal-backdrop.out { opacity: 0; transition: opacity .15s; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.modal { background: var(--card); border-radius: 24px; box-shadow: 0 0 0 1px var(--line2), var(--shadow); width: 100%; max-width: 540px; display: flex; flex-direction: column; max-height: 88vh; animation: pop .18s ease-out; }
.modal.wide { max-width: 880px; }
.modal-header { display: flex; align-items: center; padding: 14px 18px 12px; background: var(--sunset); color: #fff; border-radius: 24px 24px 0 0; position: relative; }
.modal-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--leopard) 0 0 / 60px 60px; }
.modal-header h2 { font-family: var(--show); font-size: 25px; margin: 0; flex: 1 1 auto; text-shadow: 0 2px 0 rgba(74, 25, 66, .4); }
.modal-header .close { color: #fff; }
.modal-header .close:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.modal-body { padding: 20px 20px 14px; overflow: auto; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1.5px dashed var(--line); }
.popover { position: fixed; z-index: 120; background: var(--card); border: 1px solid var(--line2); border-radius: 18px; box-shadow: var(--shadow); padding: 8px; max-width: 380px; max-height: 70vh; overflow: auto; animation: pop .12s ease-out; }
.menu-pop { padding: 5px; }
.menu { display: flex; flex-direction: column; min-width: 210px; }
.menu-item { display: flex; gap: 9px; align-items: center; border: none; background: none; text-align: left; padding: 6px 11px; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.menu-item:hover:not(:disabled) { background: var(--sunset-soft); }
.menu-item:disabled { opacity: .4; cursor: default; }
.menu-item.danger { color: var(--danger); }
.menu-icon { width: 16px; text-align: center; color: var(--rose-gold); }
.menu-sep { height: 0; border-top: 1.5px dotted var(--line2); margin: 4px 6px; }
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 7px; z-index: 200; align-items: center; pointer-events: none; }
.toast { background: var(--plum); color: #fff; border-radius: 999px; padding: 9px 18px; box-shadow: var(--shadow); font-size: 13.5px; font-weight: 700; max-width: 80vw; animation: pop .2s; }
.toast.error { background: var(--wine); }
.toast.ok { background: #1f6f6a; }
.toast.out { opacity: 0; transition: opacity .3s; }

.preview-pop { padding: 0; width: 340px; overflow: hidden; }
.preview { display: flex; flex-direction: column; }
.preview-card { padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 7px; position: relative; }
.preview-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--leopard) 0 0 / 50px 50px; }
.preview-card + .preview-card { border-top: 1.5px dashed var(--line2); }
.preview-img { width: 100%; max-height: 170px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line2); }
.preview-head { display: flex; align-items: center; gap: 8px; font-family: var(--show); font-size: 22px; color: var(--title); }
.preview-head b { font-weight: 400; }
.preview-head small { margin-left: auto; font-family: var(--font); font-size: 12px; font-style: italic; }
.preview-rels { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.label { font-family: var(--script); font-size: 22px; color: var(--rose-gold); margin: 6px 0 2px; line-height: 1.1; }
.rel-line { display: flex; align-items: center; gap: 6px; }
.preview-actions { display: flex; gap: 6px; margin-top: 5px; }
.slot-list { display: flex; flex-direction: column; min-width: 230px; }
.slot-item { display: flex; gap: 8px; align-items: center; border: none; background: none; text-align: left; padding: 5px 9px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.slot-item:hover { background: var(--sunset-soft); }
.slot-item small { margin-left: auto; color: var(--faint); font-weight: 400; }
.help { max-width: 440px; font-size: 13.5px; }
.help ul { padding-left: 18px; margin: 0; color: var(--muted); list-style: "♥  "; }
.help li::marker { color: var(--pink); }
.help li { margin-bottom: 6px; }
.search-pop { width: 440px; padding: 5px; }
.search-results { display: flex; flex-direction: column; }
.search-item { display: flex; gap: 9px; align-items: center; border: none; background: none; text-align: left; padding: 7px 9px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.search-item:hover { background: var(--sunset-soft); }
.search-item small { color: var(--faint); font-weight: 400; font-style: italic; }

.picker { display: flex; flex-direction: column; gap: 9px; }
.pick-list { max-height: 50vh; overflow: auto; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg2); }
.pick-item { display: flex; gap: 9px; align-items: center; padding: 6px 12px; cursor: pointer; font-size: 13.5px; border-bottom: 1.5px dotted var(--line); }
.pick-item:last-child { border-bottom: none; }
.pick-item:hover, .pick-item.active { background: var(--sunset-soft); }
.pick-item small { margin-left: auto; color: var(--faint); flex: none; font-style: italic; }
.pick-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; flex: none; }
.entry-icon { width: 36px; text-align: center; color: var(--rose-gold); flex: none; font-family: var(--show); font-size: 18px; }
.entry-big-img { max-width: 100%; max-height: 60vh; border-radius: 6px; display: block; margin: 0 auto; border: 10px solid #fff; border-bottom-width: 34px; box-shadow: 0 8px 22px rgba(74, 25, 66, .3); }
.entry-view .chips { margin: 6px 0 10px; }

.rel-editor { display: flex; flex-direction: column; gap: 11px; }
.rel-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rel-row > .field { flex: 1 1 180px; }
.rel-row .grow { flex: 1 1 260px; }
.swap { align-self: center; margin-top: 14px; }
.custom-rel { border: 2px dashed var(--line2); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 9px; background: var(--bg2); }
.rel-preview { background: var(--sunset-soft); border-radius: 16px; padding: 12px 14px; font-size: 15px; text-align: center; }
.rel-preview b { font-family: var(--show); font-weight: 400; font-size: 19px; color: var(--title); }
.rel-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 25%, var(--card)); border: 1.5px solid var(--c); font-size: 13px; font-weight: 800; font-style: italic; }

.settings { display: flex; flex-direction: column; gap: 12px; }
.settings .tabs { padding: 0; }
.type-table { display: flex; flex-direction: column; gap: 7px; }
.type-row { display: grid; grid-template-columns: 34px 1fr auto 1fr auto 30px; gap: 7px; align-items: center; }
.kind-row { grid-template-columns: 22px 34px 110px 1fr 1fr auto 30px; }
.type-row.new { padding-top: 10px; border-top: 1.5px dashed var(--line2); }
.kind-icon { display: flex; justify-content: center; }
.people { display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; gap: 11px; align-items: center; padding: 9px 12px; background: var(--bg2); border-radius: 16px; border: 1.5px solid var(--line); }
.person b { font-family: var(--show); font-weight: 400; font-size: 17px; color: var(--title); }

/* --- relation graph --- */
.graph-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1.5px dashed var(--line2); flex-wrap: wrap; background: var(--panel); }
.graph-toolbar .when b { font-family: var(--show); font-weight: 400; font-size: 17px; color: var(--title); }
.graph-stage { position: relative; flex: 1 1 auto; min-height: 0; background-color: var(--tl-bg); background-image: radial-gradient(var(--dot) 1.6px, transparent 2px); background-size: 22px 22px; }
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
.graph-info { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); pointer-events: none; padding: 20px; text-align: center; font-family: var(--script); font-size: 28px; }
.g-edge { fill: none; stroke-width: 2.5; stroke-opacity: .85; stroke-linecap: round; }
.g-edge.ended { stroke-dasharray: 2 6; }
.g-edge.dim, .g-arrow.dim, .g-label.dim { opacity: .12; }
.g-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.g-label { font: italic 700 11.5px var(--font); fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--tl-bg); stroke-width: 8px; stroke-linejoin: round; cursor: pointer; }
.g-node { cursor: pointer; }
.g-node path { stroke: var(--gold); stroke-width: 2.2; filter: drop-shadow(0 2px 2px rgba(74, 25, 66, .3)); }
.g-node.selected path { stroke: var(--outline); stroke-width: 3; }
.g-node.pinned path { stroke-dasharray: 3 2; }
.g-node.dim { opacity: .25; }
.g-name { font: 800 12.5px var(--font); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--tl-bg); stroke-width: 5px; stroke-linejoin: round; }
.g-linking { stroke: var(--outline); stroke-width: 2; stroke-dasharray: 5 4; }

/* --- feedback: likes, notes, suggestions --- */
.fb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 9px; border-top: 1.5px dotted var(--line); font-size: 12.5px; }
.reactions { display: inline-flex; align-items: center; gap: 5px; }
.react-btn { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line2); background: var(--card); border-radius: 999px; padding: 2px 8px; cursor: pointer; min-height: 25px; }
.react-btn:hover { background: var(--panel2); }
.react-btn.on.like { background: color-mix(in srgb, var(--turq) 16%, var(--card)); border-color: color-mix(in srgb, var(--turq) 55%, var(--line2)); }
.react-btn.on.dislike { background: color-mix(in srgb, var(--danger) 12%, var(--card)); border-color: color-mix(in srgb, var(--danger) 45%, var(--line2)); }
.react-icon { font-size: 13px; line-height: 1; filter: saturate(.8); }
.avatar.stale { opacity: .45; }
.seen { font-size: 12px; color: var(--faint); font-style: italic; }
.fb-link { border: none; background: none; color: var(--muted); cursor: pointer; font-weight: 700; padding: 3px 6px; border-radius: 8px; font-size: 12.5px; }
.fb-link:hover, .fb-link.on { color: var(--title); background: var(--accent-soft); }
.fb-open { margin-left: 5px; font-size: 11px; background: var(--panel3); color: var(--muted); border-radius: 999px; padding: 0 6px; }
.fb-waiting { font-size: 11.5px; font-weight: 800; color: #fff; background: var(--outline); border-radius: 999px; padding: 1px 8px; }
.fb-threads { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.fb-item { border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; background: var(--bg2); }
.fb-item.suggestion { border-left: 3px solid var(--rose-gold); }
.fb-item.closed { opacity: .72; }
.fb-msg + .fb-msg, .fb-replies { margin-top: 6px; }
.fb-msg.reply { margin-left: 22px; padding-left: 10px; border-left: 2px solid var(--line); }
.fb-msg-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }
.fb-label { color: var(--muted); font-style: italic; }
.fb-time { color: var(--faint); font-size: 11.5px; }
.fb-status { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 0 8px; background: var(--panel3); color: var(--muted); }
.fb-status.accepted { background: color-mix(in srgb, var(--turq) 18%, var(--card)); color: color-mix(in srgb, var(--turq) 70%, var(--text)); }
.fb-status.rejected { background: color-mix(in srgb, var(--danger) 12%, var(--card)); color: var(--danger); }
.fb-body { margin: 4px 0 0 23px; }
.fb-body.prose.small { font-size: 14px; line-height: 1.55; }
.fb-actions { display: flex; gap: 6px; margin: 8px 0 2px; }
.fb-hint { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 6px; }
.link-btn.fold, .reply-link { margin: 4px 0 0 23px; }
.fb-compose { display: flex; flex-direction: column; gap: 5px; }
.fb-replies .fb-compose { margin-left: 22px; margin-top: 6px; }
.fb-input { font-size: 13.5px !important; min-height: 38px; }
.fb-compose-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.fb-compose-actions .faint { margin-right: auto; }
/* differences: removed words struck through, added words underlined */
.diff { font-family: var(--serif); font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; margin-top: 7px; max-height: 360px; overflow: auto; }
.diff del { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); text-decoration: line-through; text-decoration-thickness: 1.5px; border-radius: 3px; }
.diff ins { color: color-mix(in srgb, var(--turq) 70%, var(--text)); background: color-mix(in srgb, var(--turq) 14%, transparent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 3px; }
.diff-preview .diff { max-height: 220px; }
.diff-preview > .faint { display: block; padding: 8px 0; }
[data-fb].flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--outline); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tab-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--outline); color: #fff; font: 800 11px/18px var(--font); text-align: center; vertical-align: 2px; text-decoration: none; }
/* the Feedback tab */
.feedback-pane { padding: 16px 24px 40px; }
.fb-pane { max-width: 920px; }
.fb-pane h2 { font-family: var(--show); font-size: 38px; color: var(--title); }
.fb-section { margin-bottom: 24px; }
.fb-section h3 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.fb-section h3 .count { font: 800 12px var(--font); background: var(--outline); color: #fff; border-radius: 999px; padding: 1px 8px; }
.fb-list { display: flex; flex-direction: column; gap: 6px; }
.fb-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 9px 12px; cursor: pointer; }
.fb-row.static { cursor: default; align-items: center; }
button.fb-row:hover { border-color: var(--line2); background: var(--panel2); }
.fb-row.compact { padding: 5px 10px; align-items: center; border-radius: 10px; }
.fb-row-main { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.fb-row-text { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 13.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fb-target { font-weight: 800; color: var(--title); }
.fb-kind { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--panel3); border-radius: 8px; color: var(--rose-gold); flex: none; }
.fb-quick { display: flex; align-items: center; gap: 6px; flex: none; }
.fb-new { font: 800 10px var(--font); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--outline); border-radius: 999px; padding: 1px 6px; }
.link-plain { border: none; background: none; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.link-plain:hover .fb-target { text-decoration: underline; }

/* --- narrow screens --- */
@media (max-width: 860px) {
  .bottom { flex-direction: column; }
  .sidebar { width: auto; max-height: 36vh; border-right: none; border-bottom: 2px dotted var(--line2); }
  .search-wrap { width: 40vw; }
  .story-title { display: none; }
  .user-name { display: none; }
  .details-pane { padding: 12px; }
  .type-row, .kind-row { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .title-input { font-size: 30px !important; }
  .insp-overview h2 { font-size: 40px; }
  .fb-row.static { flex-wrap: wrap; }
  .feedback-pane { padding: 12px; }
}