/* "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, quiet). */

:root {
  /* what the floating chat button and playhead pill cover in the lower right corner (things keep clear of it) */
  --float-w: 168px;
  /* the edges a phone keeps for itself (a home-screen app, full screen: the status bar, the notch, the home indicator;
     in a browser all 0) */
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --float-h: calc(80px + var(--safe-b));
  --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");
  /* (in the dark, a veil over the leopard: deeper, not brighter than what it trims) */
  --leopard-veil: linear-gradient(transparent, transparent);
  /* how strongly an object's own colour fills something big (a chapter's band): fully by day, toned down in the dark */
  --vivid: 100%; --vivid-base: #fff;
  /* (a picture still coming: a spinner in its place, rose gold on either theme) */
  --spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23b76e79' stroke-opacity='.22' stroke-width='2.6'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23b76e79' stroke-width='2.6' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");

  /* 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;
  --on-outline: #fff;      /* text on an --outline pill */
  --badge-bg: var(--gold-soft); --badge-fg: #5a3a00;
  --title: #7b1e3a;
  --danger: #c0182f;
  --ok: #17a2a0;
  --warn: #c98a10;
  --dot: rgba(214, 36, 110, .085);
  --goo-shine: .55; /* (the bubbles' sheen at its strongest) */
  --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;
  /* a switch (the top bar's, Settings' tabs, Factions | Personal…): its track, and the thumb under the one that's on */
  --track: color-mix(in srgb, var(--accent) 9%, var(--panel));
  --thumb: #fff; --thumb-fg: var(--title);
  --thumb-shadow: 0 1px 3px rgba(74, 25, 66, .26), 0 0 0 1px rgba(123, 30, 58, .08);
  color-scheme: light;
}

/* Wine o'clock (dark): aubergine and merlot, but quiet. The grounds are low in colour, as the light theme's creams are
   (so the pinks on them don't glow), the pinks are dusty rather than candy, and the loudest things (the sunset, the
   leopard, a chapter's colour as a fill) are a step deeper than in daylight. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1319; --bg2: #170e13; --tl-bg: #1b1016; --panel: #271820; --card: #2e1d27; --panel2: #34212b; --panel3: #412a37;
    --line: #4e3442; --line2: #704b5e;
    --text: #f3e5ea; --muted: #caaab8; --faint: #987988; --title: #e8aec2;
    --accent: #d57b9b; --accent-2: #b15c7b; --accent-soft: rgba(213, 123, 155, .14); --outline: #cf9bb1; --on-outline: #271820;
    --danger: #df727c; --ok: #74beb5; --warn: #e2c481; --badge-bg: #57482e; --badge-fg: #ecddb9; --gold-soft: #87714b;
    --pink: #d8799e; --magenta: #d5708f; --turq: #62b2ab; --gold: #d2a657;
    --dot: rgba(226, 196, 129, .055); --goo-shine: .1;
    --shadow: 0 14px 40px rgba(0, 0, 0, .55); --soft-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    --sunset: linear-gradient(100deg, #5c172b 0%, #a02658 34%, #d45c64 68%, #d4a64f 100%);
    --sunset-soft: linear-gradient(100deg, #3e2238 0%, #4e283a 55%, #4d362b 100%);
    --leopard-veil: linear-gradient(rgba(23, 14, 19, .3), rgba(23, 14, 19, .3));
    --vivid: 74%; --vivid-base: #3a2531;
    --thumb: #604350; --thumb-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05);
    --cs-like: #5ba271; --cs-dislike: #cd6466; --cs-amber: #dcae62; --cs-amber-dark: #b78d4e; /* (votes: the same calm) */
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1f1319; --bg2: #170e13; --tl-bg: #1b1016; --panel: #271820; --card: #2e1d27; --panel2: #34212b; --panel3: #412a37;
  --line: #4e3442; --line2: #704b5e;
  --text: #f3e5ea; --muted: #caaab8; --faint: #987988; --title: #e8aec2;
  --accent: #d57b9b; --accent-2: #b15c7b; --accent-soft: rgba(213, 123, 155, .14); --outline: #cf9bb1; --on-outline: #271820;
  --danger: #df727c; --ok: #74beb5; --warn: #e2c481; --badge-bg: #57482e; --badge-fg: #ecddb9; --gold-soft: #87714b;
  --pink: #d8799e; --magenta: #d5708f; --turq: #62b2ab; --gold: #d2a657;
  --dot: rgba(226, 196, 129, .055); --goo-shine: .1;
  --shadow: 0 14px 40px rgba(0, 0, 0, .55); --soft-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  --sunset: linear-gradient(100deg, #5c172b 0%, #a02658 34%, #d45c64 68%, #d4a64f 100%);
  --sunset-soft: linear-gradient(100deg, #3e2238 0%, #4e283a 55%, #4d362b 100%);
  --leopard-veil: linear-gradient(rgba(23, 14, 19, .3), rgba(23, 14, 19, .3));
  --vivid: 74%; --vivid-base: #3a2531;
  --thumb: #604350; --thumb-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05);
  --cs-like: #5ba271; --cs-dislike: #cd6466; --cs-amber: #dcae62; --cs-amber-dark: #b78d4e; /* (votes: the same calm) */
  color-scheme: dark;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
html, body { margin: 0; height: 100%; }
/* (the page doesn't zoom on a phone: the timeline and the relation graph pinch-zoom on their own, touch-action: none) */
html, body { touch-action: pan-x pan-y; }
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; }
/* a picture coming in (ui.js showWhenLoaded): what has come so far out of sight, a spinner if it takes a moment, then it
   fades in whole */
img.img-wait { object-position: -99999px 0; }
img.img-slow { background: var(--spinner) center / 26px 26px no-repeat, color-mix(in srgb, var(--accent) 6%, var(--panel)); }
img.img-in { animation: img-in .3s ease-out; }
@keyframes img-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { img.img-in { animation: none; } }
.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:not([type=color]) { 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.warn { border-color: var(--danger); }
.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-veil), 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]):not([type=range]), 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=range] { accent-color: var(--accent); cursor: pointer; }
input[type=range]:disabled { cursor: default; opacity: .6; }
input[type=range]:focus { outline: none; box-shadow: none; }
input[type=range]:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; border-radius: 999px; }
.consensus-row { flex-wrap: wrap; align-items: center; }
.consensus-range { flex: 1 1 180px; max-width: 320px; margin: 0; }
.consensus-pct { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
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-icon { display: inline-flex; } /* (a line icon in a button, as tall as its words) */
.btn-icon svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.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; }
/* keyboard focus: a 2 px ring, as in the top bar (white there, on the sunset; on the page, the outline colour) */
.btn:focus-visible, .icon-btn:focus-visible, .link-btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--outline); outline-offset: 2px; }
.topbar .icon-btn:focus-visible, .modal-header .icon-btn:focus-visible, .chat-head .icon-btn:focus-visible { outline-color: #fff; }
/* a switch (two or three ways, one of them on), like the top bar's: a pale track, the one that's on on a raised thumb
   (a label holding a radio button works the same: the radio is out of sight, its label is the thumb) */
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1.5px var(--line); }
.seg > button, .seg > label { position: relative; border: none; border-radius: 999px; background: transparent; padding: 3px 11px; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: background .15s, color .15s, box-shadow .15s; }
.seg > button:hover:not(.active):not(:disabled), .seg > label:hover:not(:has(input:checked)) { color: var(--title); background: var(--accent-soft); }
.seg > button.active, .seg > label:has(input:checked) { background: var(--thumb); color: var(--thumb-fg); box-shadow: var(--thumb-shadow); }
.seg > button:disabled { cursor: default; }
.seg > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg > button:focus-visible, .seg > label:has(input:focus-visible) { outline: 2px solid var(--outline); outline-offset: 1px; }
.seg.small > button { padding: 2px 10px; }
.field > .seg { align-self: flex-start; } /* (as wide as its options, under its name) */
.badge { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; background: var(--badge-bg); color: var(--badge-fg); 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 --- */
/* (margin: auto on the card centres it, but lets a tall card scroll instead of being cut off at the top) */
body.simple-page { display: flex; align-items: flex-start; justify-content: center; height: auto; min-height: 100vh; min-height: 100dvh;
  padding: calc(24px + var(--safe-t)) calc(24px + var(--safe-r)) calc(24px + var(--safe-b)) calc(24px + var(--safe-l));
  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: auto 0; }
.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; }
.auth-card .privacy-link { display: block; width: auto; margin: 16px auto 0; }
.privacy-notice { max-width: min(480px, calc(100vw - 32px)); padding: 20px 24px 18px; border: none; border-radius: 22px; background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--line2), var(--shadow); }
.privacy-notice::backdrop { background: rgba(58, 14, 46, .5); backdrop-filter: blur(3px); }
.privacy-notice h2 { font-family: var(--show); font-size: 26px; color: var(--title); margin: 0 0 8px; }
.privacy-notice ul { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.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; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: var(--safe-t) var(--safe-r) 0 var(--safe-l); }
/* (on a home screen, iOS blurs a band under the status bar, over what's below it, to keep the clock readable: the page
   starts below that band too, which the top bar's colours fill) */
@media (display-mode: standalone) and (pointer: coarse) { :root { --safe-t: calc(env(safe-area-inset-top, 0px) + 18px); } }
/* (under the status bar, full screen: the top bar's colours) */
#app::before { content: ""; position: fixed; z-index: 300; top: 0; left: 0; right: 0; height: var(--safe-t); background: var(--sunset); pointer-events: none; }
#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; }
.boot-msg:not(.error)::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 12px; background: var(--spinner) center / contain no-repeat; } /* (while the story and its fonts come: the words wait for theirs) */
.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-veil), var(--leopard) 0 0 / 60px 60px; box-shadow: 0 3px 6px rgba(58, 34, 20, .3); }
.story-title { flex: none; font-family: var(--show); font-size: 23px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24vw; text-shadow: 0 2px 0 rgba(74, 25, 66, .45); letter-spacing: .01em; }
.story-title:hover { color: #fff; text-decoration: none; filter: brightness(1.12); }
.bar-mid { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.search-wrap { width: min(360px, 34vw); }
/* On a computer the top bar is one row, every control in it 36 px tall and centred: on the sunset (the same in both
   themes) a control is see-through, white words in a frosted pill; the one that's on is solid white. */
.topbar .tl-toolbar { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 0; gap: 8px; background: none; border: none; }
.topbar .tl-toolbar .btn { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); color: #fff; box-shadow: none; }
.topbar .tl-toolbar .btn:hover { background: rgba(255, 255, 255, .34); box-shadow: none; }
/* (the top bar's leopard edge hangs 6 px below it: what comes next starts under it, not behind it) */
#app.bars-merged .work { margin-top: 6px; }
.topbar .tl-toolbar .search-wrap { flex: 0 4 300px; width: auto; min-width: 140px; } /* (gives way first: what's open keeps its name longer) */
.topbar .search { height: 36px; padding: 0 15px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .2) !important; border: 1.5px solid rgba(255, 255, 255, .42) !important; color: #fff; box-shadow: none !important; font-size: 13.5px; }
.topbar .search::placeholder { color: rgba(255, 255, 255, .85); }
.topbar .search:hover { background: rgba(255, 255, 255, .26) !important; }
.topbar .search:focus { background: rgba(255, 255, 255, .97) !important; border-color: #fff !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; }
/* ＋ Add: everything new, in one menu */
.topbar .tl-toolbar .add-btn { flex: none; height: 36px; min-height: 0; padding: 0 15px 0 12px; border: 0; border-radius: 999px; background: #fff; color: #7b1e3a;
  font: 800 13.5px/1 var(--font); white-space: nowrap; box-shadow: 0 1px 3px rgba(74, 25, 66, .3); }
.topbar .tl-toolbar .add-btn:hover { background: #fff5f8; box-shadow: 0 2px 6px rgba(74, 25, 66, .35); }
.topbar .tl-toolbar .add-btn[aria-label] { width: 36px; padding: 0; font-size: 17px; } /* (just ＋, when the bar is short of room) */
/* the workspace's views in the top bar: one switch (Home, Graph, Read), and after it what's open, in the editor: a pill
   of its own, ✎ and its name (✎ in its colour while it's showing), ✕ to let go of it. (A phone has them as tabs in a row of their own: see the narrow screens.) */
.view-tabs { display: contents; }
.view-thumb { display: none; }
.topbar > .main-tabs { flex: 0 .2 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: none; background: none; }
.topbar .view-tabs { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border-radius: 999px;
  background: rgba(74, 25, 66, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.topbar > .main-tabs .tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 13px 0 10px; border: 0; border-radius: 999px; background: none;
  color: rgba(255, 255, 255, .92); font: 800 13.5px/1 var(--font); white-space: nowrap; text-decoration: none; }
.topbar > .main-tabs .tab .tab-icon svg { width: 17px; height: 17px; }
.topbar > .main-tabs .tab:hover { color: #fff; background: rgba(255, 255, 255, .16); }
/* (the one showing: dark words on the switch's white thumb, which slides under them, and can be dragged: main.js) */
.topbar .view-tabs { position: relative; touch-action: none; }
.topbar .view-tabs .tab { position: relative; z-index: 1; transition: color .18s; }
.topbar .view-tabs .tab.active, .topbar .view-tabs .tab.active:hover { color: #7b1e3a; background: none; cursor: grab; }
.topbar .view-thumb { display: block; position: absolute; top: 3px; left: 0; height: 30px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(74, 25, 66, .28);
  pointer-events: none; transition: transform .3s cubic-bezier(.3, .8, .35, 1), width .3s cubic-bezier(.3, .8, .35, 1), opacity .15s; }
.topbar .view-thumb.off { opacity: 0; }
.topbar .view-thumb.snap { transition: opacity .15s; }
/* (while it's dragged: it follows the pointer, and the dark words go with it, to the view it would show) */
.topbar .view-tabs.dragging, .topbar .view-tabs.dragging .tab { cursor: grabbing; }
.topbar .view-tabs.dragging .view-thumb { transition: none; box-shadow: 0 3px 10px rgba(74, 25, 66, .35); }
.topbar .view-tabs.dragging .tab:hover { background: none; }
.topbar .view-tabs.dragging .tab.active:not(.under) { color: rgba(255, 255, 255, .92); }
.topbar .view-tabs.dragging .tab.under { color: #7b1e3a; }
@media (prefers-reduced-motion: reduce) { .topbar .view-thumb { transition: opacity .15s; } }
.topbar > .main-tabs.icons-only .tab-word { display: none; }
.topbar > .main-tabs.icons-only .tab { padding: 0 9px; }
.topbar > .main-tabs .item-tab { flex: 0 1 auto; align-self: center; height: 36px; min-width: 150px; max-width: 320px; margin: 0; padding: 0 3px 0 13px; border-radius: 999px;
  color: #fff; background: rgba(74, 25, 66, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.topbar > .main-tabs .item-tab::before { display: none; }
.topbar > .main-tabs .item-tab:hover { color: #fff; background: rgba(74, 25, 66, .3); }
.topbar > .main-tabs .item-tab.active { color: #7b1e3a; background: #fff; box-shadow: 0 1px 3px rgba(74, 25, 66, .28); }
.topbar .item-open { gap: 7px; padding: 0 4px 0 0; font: 800 13.5px/1 var(--font); }
.topbar .item-tab .tab-icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.topbar .item-tab.active .tab-icon { color: color-mix(in srgb, var(--c) 85%, #3b1830); }
.topbar .item-close { width: 30px; height: 30px; font-size: 12px; }
.topbar > .side-toggle { width: 36px; height: 36px; margin: 0 0 0 -6px; color: rgba(255, 255, 255, .92); }
.topbar > .side-toggle:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.topbar > .side-toggle.open { color: #fff; }
.topbar > .side-toggle .side-badge { box-shadow: 0 0 0 2px #fff; }
.topbar > .main-tabs .tab:focus-visible, .topbar .item-open:focus-visible, .topbar .item-close:focus-visible, .topbar .add-btn:focus-visible, .user-btn:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; }
/* who's here: the others online, then you, in one pill; you open the menu with the rest (who's where, Settings, signing out) */
.whos-here { flex: none; display: inline-flex; align-items: center; border-radius: 999px; padding: 2px; }
.topbar .whos-here { height: 36px; padding: 0 3px; background: rgba(74, 25, 66, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.presence-list { display: flex; gap: 6px; }
.presence-list:empty { display: none; }
.topbar .presence-list { gap: 0; padding: 0 6px 0 2px; }
.topbar .presence-list .avatar { width: 26px; height: 26px; font-size: 11px; }
.topbar .presence-list .avatar + .avatar { margin-left: -5px; }
.user-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; cursor: pointer; padding: 2px 10px 2px 2px; border-radius: 999px; color: #fff; }
.user-btn:hover { background: rgba(255, 255, 255, .18); }
.user-btn::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 1px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); opacity: .85; }
.user-name { font-size: 13.5px; font-weight: 800; }
.offline-note, .busy, .presence-list, .user-btn { flex: none; }
/* (the menu under your name: you, who's online and where (each a click away), every part of Settings) */
.menu-head { display: flex; align-items: center; gap: 10px; padding: 7px 11px 8px; }
.menu-head .avatar { width: 34px; height: 34px; font-size: 14px; box-shadow: none; }
.menu-head b { font-size: 14.5px; color: var(--title); }
.menu-label { padding: 7px 11px 3px; font: 800 10.5px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.menu-person { min-width: 0; max-width: 300px; }
.menu-person:disabled { opacity: 1; cursor: default; }
.menu-person .avatar.small { width: 22px; height: 22px; font-size: 10.5px; }
/* (only while the server can't be reached) */
.offline-note { font: 800 11.5px var(--font); color: var(--danger); background: #fff; border-radius: 999px; padding: 2px 9px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.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;
  /* one row: it folds up instead (main.js); scrolling is only the last resort */
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-height: 46px; }
.tl-toolbar::-webkit-scrollbar { display: none; }
.tl-toolbar > * { flex: none; }
.tl-toolbar > .grow { flex: 1 1 auto; }
.tl-toolbar .btn-group { flex-wrap: nowrap; }
.tl-toolbar .sep { width: 0; align-self: stretch; border-left: 2px dotted var(--line2); }
/* a chip gives way first: its name gets cut short (the ✕ always stays inside it) */
.tl-toolbar > .chip { flex: 0 1 auto; min-width: 62px; max-width: 320px; overflow: hidden; }
.tl-toolbar > .chip.short { flex-shrink: 0; } /* (just the moment's number: nothing to cut) */
.tl-toolbar .chip-label { min-width: 0; }
.tl-toolbar .chip-x { flex: none; }
/* "Show ▾": what the timeline shows, when there's no room for it in the toolbar */
.show-box { display: flex; flex-direction: column; gap: 8px; padding: 4px; min-width: 220px; }
.show-box .label { margin: 0; }
.kind-picker { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
/* View, − and +: floating in the timeline's lower right corner, one frosted bar (on a phone, View alone, a little bigger) */
.tl-float { position: absolute; right: 10px; bottom: 10px; z-index: 6; display: flex; align-items: stretch; height: 28px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line2); box-shadow: var(--soft-shadow); opacity: .8; transition: opacity .15s; }
.tl-float:hover, .tl-float:focus-within { opacity: 1; }
.tl-float button { border: 0; background: none; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tl-float button + button { border-left: 1px solid var(--line); }
.tl-float button:hover { background: var(--accent-soft); color: var(--accent); }
.tl-zoom-btn { width: 30px; font: 700 16px/1 var(--font); }
/* (whoever is followed, first in the group: the timeline keeps to them) */
.tl-follow { display: flex; min-width: 0; max-width: 220px; border-right: 1px solid var(--line); }
.tl-follow[hidden] { display: none; }
.tl-follow .follow-tag { height: 100%; border-radius: 0; box-shadow: none; background: color-mix(in srgb, var(--c) 12%, transparent); }
.tl-float .tl-follow button + button { border-left: 0; }
.tl-float .tl-follow .follow-name:hover { background: none; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.tl-float .tl-follow .follow-x:hover { background: none; color: var(--danger); }
.tl-hide-btn { width: 30px; }
.tl-hide-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tl-view { gap: 5px; padding: 0 11px 0 9px; font: 700 12.5px var(--font); }
.tl-view svg { width: 15px; height: 15px; fill: var(--card); stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (pointer: coarse) {
  .tl-float { height: 36px; right: 8px; bottom: 8px; }
  .tl-zoom-btn { display: none !important; }
  .tl-view { width: 36px; padding: 0; }
  .tl-view-label { display: none; }
  .tl-view svg { width: 18px; height: 18px; }
  .tl-hide-btn { width: 36px; }
  .tl-hide-btn svg { width: 17px; height: 17px; }
}
.timeline { position: relative; flex: none; min-height: 96px; 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; z-index: 5; background: var(--leopard-veil), 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); } /* (over the workspace: its ♥ hangs below it, and the cards scroll under it) */
.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); }
/* the timeline and its strip above the side panel and the workspace; or the side panel the whole height, beside them */
.work { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "tl tl" "split split" "side main"; }
#app.side-full .work { grid-template-areas: "side tl" "side split" "side main"; }
.work > .timeline { grid-area: tl; }
.work > .splitter { grid-area: split; }
.work > .sidebar { grid-area: side; }
.work > .main { grid-area: main; }
.sidebar { width: 310px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-right: 2px dotted var(--line2); min-height: 0; position: relative; }
/* the tab that runs the side panel the whole height or puts it back under the timeline: on the strip above the panel, or
   hanging at its top edge */
.side-expand { position: absolute; z-index: 4; width: 48px; height: 16px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line2); background: var(--card); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.side-expand:hover, .side-expand:focus-visible { color: var(--accent); background: var(--accent-soft); }
.side-expand svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
#app.side-full .side-expand svg { transform: rotate(180deg); }
.splitter .side-expand { left: calc(155px - 24px); bottom: 0; height: 18px; border-bottom: none; border-radius: 24px 24px 0 0; padding-top: 2px; } /* (its foot flush with the strip's) */
/* (its head flush with the top of the top bar's leopard edge, 6 px above the panel, and over it) */
.sidebar .side-expand { top: -6px; z-index: 7; left: calc(50% - 24px); border-top: none; border-radius: 0 0 24px 24px; padding-bottom: 2px; }
#app.side-full .side-tabs { padding-top: 14px; }
.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 calc(var(--float-h) + 20px); 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; }
.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); }
/* four tabs in the side panel's width */
.side-tabs { gap: 2px; padding: 6px 6px 0; }
.side-tabs .tab { padding: 6px 8px 5px; font-size: 15.5px; white-space: nowrap; }
.side-tabs .tab-badge { margin-left: 4px; }

/* --- 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 .colline { stroke: var(--line2); stroke-opacity: .5; stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 1.5; }
.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: 12px; 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: 18px; height: 15px; margin-left: -9px; z-index: 3; cursor: ew-resize; text-align: center; }
.tl-playhead-handle::before { content: "♥"; color: var(--outline); font-size: 15px; line-height: 15px; }

.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, color-mix(in oklab, var(--c) var(--vivid), var(--vivid-base)) 0%, color-mix(in oklab, color-mix(in srgb, var(--c) 62%, #ff6f59) var(--vivid), var(--vivid-base)) 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; }
.tl-block.selected { z-index: 1; } /* (not on event cards: the trail must pass between a card and its tags) */
.tl-block.lit { box-shadow: 0 0 0 2px var(--gold-soft); }
/* while dragging: the chapter or episode it would go into */
.tl-block.drop-parent { outline: 2.5px solid color-mix(in srgb, var(--c) 70%, var(--text)); outline-offset: 2px; z-index: 1; }
.tl-chapter.drop-parent { filter: brightness(1.08) saturate(1.1); }
.tl-episode.drop-parent { background: color-mix(in srgb, var(--c) 32%, var(--card)); border-style: solid; }
.tl-label { overflow: hidden; text-overflow: ellipsis; white-space: pre; flex: 1 1 auto; min-width: 0; }
/* 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: 6px 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)); }
.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); }
/* (faded without opacity on the card itself, which would put the trail over its tags: the card's ground and its contents
   fade separately) */
.tl-event.dim { background: color-mix(in srgb, var(--card) 35%, transparent); border-color: color-mix(in srgb, var(--line) 35%, transparent); box-shadow: none; }
.tl-event.dim > *, .tl-event.dim::before { opacity: .35; }
.tl-event.lit { box-shadow: 0 0 0 2px var(--gold-soft), 0 4px 10px rgba(123, 30, 58, .15); }
.tl-ev-top { display: flex; align-items: center; gap: 8px; height: 14px; line-height: 14px; padding-right: 22px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.tl-num { flex: none; color: var(--rose-gold); font-weight: 800; font-size: 10.5px; letter-spacing: .02em; }
.tl-ev-ind { flex: none; display: inline-flex; align-items: center; height: 14px; }
/* (the entries' "Aa" a little smaller here, to fit the 14 px line whole: it was cut off at the bottom) */
.tl-ev-ind .aa { margin-right: 2px; font-size: 8.5px; padding: .14em .3em .1em; border-width: 1.3px; }
.tl-ev-title { font-size: 13px; font-weight: 800; line-height: 17px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tl-event.two .tl-ev-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tl-more-events { position: absolute; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--line2); border-radius: 12px; background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; }
.tl-more-events:hover { color: var(--text); border-color: var(--outline); }
.tl-viewport.compact .tl-empty { white-space: nowrap; overflow: hidden; }
.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); }
/* the compact view (a short timeline): chapters and episodes in one band, an event as one line */
.tl-viewport.compact .tl-chapter { align-items: flex-start; font-size: 12.5px; line-height: 15px; padding-top: 0; }
.tl-viewport.compact .tl-episode.pill { margin-top: 1px; border-radius: 999px; font-size: 11px; padding: 0 8px; box-shadow: none; z-index: 2; } /* (over its chapter's bar, also when that is selected or lit up while dragging) */
.tl-viewport.compact .tl-block .tl-more-btn { height: 14px; width: 22px; font-size: 12px; padding: 0 0 2px; }
.tl-viewport.compact .tl-chapter .tl-more-btn { margin-top: 1px; }
.tl-viewport.compact .tl-block .presence { top: 0; right: 2px; width: 14px; height: 14px; font-size: 8px; }
.tl-chip { padding: 0 8px 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 9px; border-left: 4px solid var(--c); }
.tl-chip::before { display: none; }
.tl-chip-title { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-chip-more { flex: none; font: 800 10.5px/16px var(--font); padding: 0 5px; border-radius: 999px; background: var(--panel3); color: var(--muted); cursor: pointer; }
.tl-chip-more:hover { color: var(--text); background: var(--accent-soft); }
.tl-chip .tl-more-btn { position: relative; top: auto; right: auto; flex: none; height: 16px; width: 22px; font-size: 12px; padding: 0 0 2px; } /* (relative: its finger-sized ::after stays around it) */
/* zoomed far out: one tile per episode, "12 events" (a click zooms in) */
.tl-group { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1.5px solid var(--line2); background: var(--card);
  color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; cursor: zoom-in; box-shadow: 0 2px 0 var(--line); }
.tl-group:hover { color: var(--text); border-color: var(--outline); }
.tl-group.empty { border-style: dashed; background: color-mix(in srgb, var(--card) 50%, transparent); box-shadow: none; }
.tl-group.selected { outline: 2px solid var(--outline); outline-offset: 1px; color: var(--text); }
.tl-group.lit { box-shadow: 0 0 0 2px var(--gold-soft); }
/* level 4 objects: small tags inside the event card (or inside the bar when events are hidden) */
.tl-tag { position: absolute; height: 18px; display: flex; align-items: center; gap: 4px; padding: 0 7px 0 4px; border-radius: 999px; font: 700 11.5px/1 var(--font); white-space: nowrap; overflow: hidden; cursor: grab; z-index: 1;
  background: color-mix(in srgb, var(--c) 13%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); color: var(--text); font-style: normal; text-shadow: none; }
.tl-tag span { overflow: hidden; text-overflow: ellipsis; }
.tl-tag svg { flex: none; }
.tl-tag:hover { background: color-mix(in srgb, var(--c) 28%, var(--card)); }
.tl-tag.icon { padding: 0; justify-content: center; width: 18px; }
.tl-tag.bare { padding: 0 7px; } /* (under a heading in an event card: the heading says what it is, no shape needed) */
.tl-tag.inherited { opacity: .75; }
.tl-tag.dim { opacity: .45; }
.tl-tag.lit { background: color-mix(in srgb, var(--c) 30%, var(--card)); border-color: var(--outline); opacity: 1; }
.tl-tag.more { justify-content: center; padding: 0 4px; color: var(--muted); cursor: pointer; background: var(--panel2); border-style: dotted; border-color: var(--line2); font-size: 11px; }
.tl-mark { font-weight: 800; color: var(--outline); margin-right: -1px; flex: none; display: inline-flex; }
.tl-mark .mark-glyph { vertical-align: 0; }
.tl-mark .mark-glyph svg { width: 12px; height: 12px; stroke-width: 2.5; } /* (a tag's mark: 12 px, as its width is worked out) */
.tl-tag.exit { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--card)) 0 5px, color-mix(in srgb, var(--c) 4%, var(--card)) 5px 10px); }
.tl-tag.gone { opacity: .45; border-style: dotted; font-style: italic; }
/* circumstances (places, processes): a tinted strip right under the title */
.tl-circ-band { position: absolute; left: 1px; right: 1px; background: color-mix(in srgb, var(--c) 9%, var(--panel2)); border-top: 1px dashed color-mix(in srgb, var(--c) 25%, var(--line)); border-bottom: 1px dashed color-mix(in srgb, var(--c) 25%, var(--line)); }
.tl-tag.circ { height: 16px; background: none; border: none; padding: 0 4px 0 1px; font: italic 700 11px/1 var(--font); color: color-mix(in srgb, var(--c) 55%, var(--text)); }
.tl-tag.circ span { padding-right: 2px; } /* (room for the slant of the italic name's last letter) */
.tl-tag.circ .shape { filter: none; } /* (flat, as the strip is: its shadow made it look lower than the mark beside it) */
.tl-tag.circ:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
.tl-tag.circ.lit { background: color-mix(in srgb, var(--c) 26%, transparent); }
.tl-sub { position: absolute; height: 13px; font: 800 9px/13px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl-tag.more.round { border-radius: 999px; padding: 0; justify-content: center; font-size: 10.5px; font-weight: 800; }
/* (no z-index: the trail paints over the event cards but under their tags, which have z-index 1) */
.tl-trace { position: absolute; inset: 0; pointer-events: none; }
.tl-trace path { fill: none; stroke-width: 2.2; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .8; }
.tl-more-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 22px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--text);
  font: 800 15px/1 var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; z-index: 2; }
.tl-more-btn:hover { background: var(--panel2); }
.tl-block .tl-more-btn { position: static; flex: none; margin-left: 6px; }
/* on an event card it sits at the end of the top line, so the title keeps the whole line under it (a little bigger
   to the finger than it looks) */
.tl-event .tl-more-btn { top: 3px; right: 4px; width: 24px; height: 17px; font-size: 13px; padding: 0 0 3px; }
.tl-event .tl-more-btn::after { content: ""; position: absolute; inset: -5px -4px; }
.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: 13px; display: flex; flex-direction: column; gap: 1px; max-width: 320px; }
.tl-ghost b { font-family: var(--show); font-weight: 400; font-size: 15px; color: var(--title); }
.tl-ghost span { color: var(--muted); }
.tl-ghost .tl-ghost-where { color: var(--text); font-weight: 800; }
.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; }

/* --- 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; flex: 1 1 auto; min-width: 0; }
.side-tools > .btn { flex: none; }
/* World / Library: Filters (with how many narrow the list) opens the popup with every filter and the sorting */
.filters-btn.on { border-color: var(--outline); color: var(--title); }
.filters-count { display: inline-block; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; border-radius: 999px; background: var(--outline); color: var(--on-outline); font: 800 10.5px/17px var(--font); text-align: center; }
.side-showing { padding: 0 12px 4px; }
.filters-box { display: flex; flex-direction: column; gap: 7px; padding: 4px 6px 2px; width: 310px; max-width: calc(100vw - 40px); }
.filters-head { display: flex; align-items: center; gap: 8px; }
.filters-head b { font-family: var(--show); font-weight: 400; font-size: 18px; color: var(--title); }
.fp-group { display: flex; flex-direction: column; gap: 3px; }
.fp-group > .label { margin: 0; font-size: 17px; }
.fp-group > .scope-select { width: 100%; flex: none; }
.fp-group > .seg { align-self: flex-start; }
.fp-checks { display: flex; flex-direction: column; gap: 4px; }
.fp-checks.row { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
.tree { padding: 2px 0 8px; }
.tree-row { --pad-t: 3px; position: relative; display: flex; align-items: baseline; gap: 6px; padding: var(--pad-t) 8px 3px calc(6px + var(--depth) * 16px); cursor: pointer; font-size: 13.5px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.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; }
/* events at the same moment: a line joins their dots, from the first one's down through the others' to the last one's
   (an event's dot sits in the middle of its first line, so the line meets it there; the rows' borders are bridged) */
.t-event .tree-dot { position: relative; z-index: 1; align-self: flex-start; margin-top: calc(.75em - 3.5px); }
.tree-row[class*="stack-"]::before { content: ""; position: absolute; z-index: 0; width: 2px; border-radius: 1px; background: var(--c);
  left: calc(6px + var(--depth) * 16px + 14px + 6px + 2.5px); top: -2px; bottom: -2px; }
.tree-row.stack-first::before { top: calc(var(--pad-t) + .75em); }
.tree-row.stack-last::before { bottom: auto; height: calc(var(--pad-t) + .75em + 2px); }
.t-chapter { font-family: var(--show); font-size: 16px; color: var(--title); }
.t-episode { font-weight: 800; }
.tree-num { color: var(--rose-gold); font-family: var(--font); font-size: 11px; font-weight: 700; flex: none; }
.tree-title { min-width: 0; overflow-wrap: break-word; } /* (a long title wraps: the whole of it shows) */
.tree-count { margin-left: auto; color: var(--faint); font-family: var(--font); font-size: 11px; flex: none; }
.kind-block { border-bottom: 1.5px dashed var(--line); }
.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(--c); opacity: 1; }
.spot-btn svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.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: 10px; align-items: flex-start; 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-head { display: flex; align-items: baseline; gap: 8px; }
.lib-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-links { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
/* (linked to N pages: the menus' "Also link to…" icon, small, its line a little heavier so it holds at that size) */
.lib-link-icon { display: inline-flex; }
.lib-link-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lib-sub { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lib-sub .owner-line { flex: 0 1 auto; min-width: 0; }
.lib-when { flex: none; margin-left: auto; font-size: 11px; color: var(--faint); white-space: nowrap; }
/* who a text or image belongs to, under its title (Library, pickers) */
.owner-line { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-line .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.owner-line.none { color: var(--faint); font-weight: 600; font-style: italic; }
.lib-excerpt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--serif); font-style: italic; }

/* --- inspector --- */
.insp { max-width: 1480px; container-type: inline-size; }
/* two columns: what's written about it (left) and how it connects to the rest of the story (right). A narrow panel
   shows one at a time, picked with the switch */
.insp-switch { display: flex; width: max-content; margin: 0 0 10px; }
.insp-switch > button { padding: 5px 18px; font-size: 13px; }
.insp-main > :first-child, .insp-side > :first-child { margin-top: 4px; }
@container (max-width: 819.98px) {
  .insp-cols[data-pane="main"] .insp-side, .insp-cols[data-pane="side"] .insp-main { display: none; }
  /* (a narrow panel, a phone: one tidy row of small, even, flat controls; the name; the switch across the whole width;
     a smaller portrait beside its fields) */
  /* (.insp-top: over the wrapping .insp-head further down. Short of room, the badge gives way first: its word ends in
     "…", its number stays whole) */
  .insp-top .insp-head { flex-wrap: nowrap; gap: 6px; }
  .insp-head > * { flex-shrink: 0; }
  .insp-head .type-badge { flex-shrink: 1; height: 32px; min-width: 0; white-space: nowrap; overflow: hidden; letter-spacing: .06em; }
  .type-badge .type-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .type-badge .num, .type-badge .dot, .type-badge .shape { flex: none; }
  .insp-head .btn.small { height: 32px; min-height: 32px; min-width: 38px; padding: 0 10px; border-width: 1px; box-shadow: none; transform: none; }
  .insp-head .color-in { width: 28px !important; height: 28px !important; }
  .insp-top .title-input { margin: 4px 0 6px; }
  .insp-switch { width: 100%; margin-bottom: 12px; }
  .insp-switch > button { flex: 1; justify-content: center; padding: 6px 10px; }
  .insp-main .entity-top { gap: 12px; align-items: center; }
  .entity-top .entity-portrait { width: 76px; height: 76px; border-width: 3px; margin: 2px; }
  .entity-top .field { margin-bottom: 4px; }
  .aliases { resize: none; }
}
@container (min-width: 820px) {
  .insp-switch { display: none; }
  .insp-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); grid-template-rows: auto 1fr; gap: 0 28px; align-items: start; }
  .insp-top { grid-area: 1 / 1; }
  .insp-main { grid-area: 2 / 1; }
  /* (from the very top of the workspace: over the pane's padding) */
  .insp-side { grid-area: 1 / 2 / 3 / 3; align-self: stretch; margin-top: -16px; padding: 16px 0 0 26px; border-left: 2px dotted var(--line2); }
  .insp-side .sec-toggle { font-size: 20px; }
}
@container (max-width: 440px) {
  .insp-head .btn-word { display: none; } /* (Aa and 🖼 only: the header stays one line) */
}
@container (max-width: 345px) {
  .insp-head .type-word { display: none; } /* (an event's dot and number say enough; a cut-off word wouldn't) */
}
/* (the connections column is narrower: a relation's ✎ ↪ ✕ show over its end on hover, rather than on a line of their own) */
@media (hover: hover) {
  .insp-side .rel-row-item { position: relative; }
  .insp-side .rel-actions { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); opacity: 0; background: var(--panel2); border-radius: 999px; padding: 0 3px; }
  .insp-side .rel-row-item:hover .rel-actions, .insp-side .rel-actions:focus-within { opacity: 1; }
}
/* the writing column: its details, then Info, Entries and Notes (no frames round them: their headings part them) */
.insp-main > .insp-section { margin-top: 26px; }
.info-sec .sheet { margin: 0; gap: 12px; }
.info-sec .slot { border-left: 4px solid color-mix(in srgb, var(--c, var(--accent)) 55%, var(--line)); }
.info-sec .slot-head { margin-bottom: 6px; }
.info-sec .slot-name { font-size: 21px; }
.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(--badge-bg); color: var(--badge-fg); border-radius: 999px; padding: 0 7px; letter-spacing: 0; text-transform: none; }
.type-badge.entity { font: inherit; font-size: 12px; font-weight: 800; padding: 3px 9px; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.type-badge.entity:hover { border-color: var(--accent); }
.kind-caret { color: var(--faint); font-size: 10px; }
.kind-change-list { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.insp-presence { display: flex; gap: 4px; }
.color-in { width: 28px !important; height: 28px !important; }
/* (inheriting its faction's colour: the dot is its own, the ring the faction's it has at the playhead) */
.color-in.inherits { border-radius: 50%; box-shadow: 0 0 0 2px var(--card), 0 0 0 5px var(--fc, var(--line2)); }
.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; width: 100%; resize: none; overflow: hidden; display: block; }
.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; }
.unsaved { outline: 2px dashed var(--warn) !important; outline-offset: 2px; } /* typed, but the server doesn't have it yet */
.placement { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.placement .pos { color: var(--muted); font-size: 13px; font-weight: 700; } /* (plain, not the script: it's information) */
.placement-parent { flex-basis: 100%; font-weight: 800; font-size: 15px; color: var(--title); border-left: 4px solid var(--c, var(--line2)); padding-left: 8px; line-height: 1.3; margin-bottom: -4px; }
.placement-parent.none { color: var(--muted); font-style: italic; }
.simul-note { width: 100%; font-size: 12.5px; font-weight: 700; color: var(--gold); }
.simul-icon { display: inline-flex; vertical-align: -.25em; margin-right: 3px; color: var(--c); } /* (its dots joined, as in the Outline) */
.simul-icon svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.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; }
/* a list's count beside its name: small, in the body font, quieter than the name */
.sec-count { font: 700 12px/1 var(--font); color: var(--muted); background: var(--panel3); border-radius: 999px; padding: 3px 8px; margin-left: 2px; }
.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-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a name found in a text: offered to add (dashed, ＋), or already there (✓) */
.add-chip { font: inherit; font-size: 13px; font-weight: 700; color: inherit; border-style: dashed; background: var(--card); padding-right: 8px; }
.add-chip:hover { border-style: solid; }
.add-chip:disabled { opacity: .5; cursor: progress; }
.chip-add { color: var(--accent); font-weight: 800; }
.chip-done { color: var(--ok); font-size: 11px; padding-right: 4px; }
.named-in { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 2px; }
.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-top { margin: -2px 0 12px; }
.adder-top .adder-wrap { margin-top: 0; }
.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; }
/* the name button over a name in a text being written (or words selected), and its menu */
.name-btn { position: fixed; z-index: 140; display: inline-flex; align-items: center; gap: 5px; max-width: min(320px, 80vw); padding: 3px 9px; border-radius: 999px;
  border: 1.5px solid var(--line2); background: var(--card); color: var(--text); font: 700 12px/1.3 var(--font); cursor: pointer; box-shadow: var(--soft-shadow); }
.name-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-btn:hover { border-color: var(--accent); color: var(--accent); }
.name-btn-caret { color: var(--faint); font-size: 10px; }
@media (pointer: coarse) { .name-btn { padding: 6px 12px; font-size: 13px; } }
.name-menu { display: flex; flex-direction: column; gap: 8px; width: min(320px, 86vw); padding: 2px; }
.name-group + .name-group { border-top: 1.5px dashed var(--line2); padding-top: 8px; }
.name-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--title); margin-bottom: 6px; }
.name-forms { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.name-form { border: 1.5px solid var(--line2); background: var(--bg2); border-radius: 999px; padding: 4px 11px; font: 600 13px var(--font); color: var(--text); cursor: pointer; }
.name-form:hover { border-color: var(--accent); color: var(--accent); }
.name-form.on { border-color: var(--accent); background: var(--accent-soft); }
.name-own-row { display: flex; gap: 6px; align-items: center; }
.name-own-row .name-own { flex: 1 1 auto; }
.name-own { font-size: 13.5px !important; padding: 5px 10px !important; }
.name-hint { margin-top: 5px; }
.name-pick { display: flex; flex-direction: column; max-height: 240px; overflow: auto; }
.name-pick-item { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 8px; border-radius: 8px; text-align: left; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.name-pick-item:hover, .name-pick-item.active { background: var(--accent-soft); }
.name-pick-sep { padding: 6px 8px 2px; font-weight: 700; }
.name-pick-sep:not(:first-child) { border-top: 1.5px dashed var(--line2); margin-top: 4px; }
.name-off-row { display: flex; align-items: baseline; gap: 8px; border-top: 1.5px dashed var(--line2); padding-top: 8px; }
.name-off { font-size: 13px; }
.name-btn-off { color: var(--faint); }
/* an object's recognized forms: a button by its other names, a list in a popup */
.field-head { display: flex; align-items: center; gap: 8px; }
.field-head .link-btn { margin-left: auto; font-size: 12px; }
.forms-box { width: min(340px, 86vw); display: flex; flex-direction: column; gap: 8px; }
.forms-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 260px; overflow: auto; }
.forms-list .chip { font-size: 13px; }
.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; }
.importance { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.importance-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.imp-dots { display: inline-flex; gap: 5px; }
.imp-dot { width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid var(--c, var(--accent-2)); background: transparent; transition: background .12s; }
.imp-dot.on { background: var(--c, var(--accent-2)); }
/* hovering previews the choice: the dots up to the one under the pointer fill up */
.imp-dots:hover .imp-dot { background: color-mix(in srgb, var(--c, var(--accent-2)) 55%, transparent); }
.imp-dots:hover .imp-dot:hover ~ .imp-dot { background: transparent; }
.main-star { color: var(--faint); }
.main-star.on { color: #d99a1e; }
/* 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: 8px; padding: 6px 9px; border-radius: 12px; background: var(--card); box-shadow: var(--soft-shadow); }
.rel-sample { flex: none; display: flex; }
.rel-main { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.rel-row-item:hover { background: var(--panel2); }
.rel-row-item.inactive { opacity: .4; }
.rel-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.line-sample { flex: none; vertical-align: middle; }
.rel-arrow { color: var(--rose-gold); display: inline-block; width: 14px; text-align: center; font-weight: 800; }
.rel-text { font-style: italic; }
.rel-other { font-weight: 800; }
.rel-span { margin-top: 1px; }
.rel-actions { flex: none; 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: 2px 7px; margin-bottom: 8px; flex-wrap: wrap; }
.entry-kind { color: var(--rose-gold); display: inline-flex; }
/* a text's mark: "Aa" in a small rounded frame (a sign, not words) */
.aa { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-style: normal; font-weight: 800; font-size: max(9.5px, .62em);
  line-height: 1; letter-spacing: -.02em; padding: .2em .32em .16em; border: 1.5px solid currentColor; border-radius: .45em; vertical-align: middle; }
.entry-title { font-family: var(--show); font-weight: 400; font-size: 20px; color: var(--title); }
.entry-actions { display: flex; gap: 1px; opacity: .5; }
.entry-by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.entry-card.editing { border-color: var(--line2); }
.entry-card.typed .fb-bar { margin-top: 6px; }
/* (what it is, who wrote it and when, and the buttons in one thin row at the top; the title under them) */
.entry-type, .entry-actions, .entry-kind { flex: none; }
.entry-by { flex: 1 1 0; }
.entry-name { order: 1; flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; }
.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; }
/* typed texts (Appearance, Backstory, Concept…): a heading with the type's name, the text (click to write), feedback */
.sheet { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.sheet-add { display: flex; }
.notes-texts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.slot { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 13px 8px; box-shadow: var(--soft-shadow); }
.slot.editing { border-color: var(--line2); }
.slot-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; min-width: 0; }
.slot-name { font-family: var(--show); font-size: 16px; color: var(--title); }
.slot-title { font-weight: 800; font-size: 13.5px; }
.slot-title::before { content: "· "; color: var(--faint); }
.slot-owner { font-size: 12.5px; color: var(--muted); }
.slot-view { cursor: text; border-radius: 10px; padding: 2px 4px; margin: 0 -4px; outline: none; }
.slot-view:hover, .slot-view:focus-visible { background: var(--accent-soft); }
.slot-view .prose > :first-child { margin-top: 0; }
.slot-view .prose > :last-child { margin-bottom: 0; }
.slot-empty { color: var(--faint); font-style: italic; font-size: 13.5px; padding: 4px 0; }
.slot-edit { display: flex; flex-direction: column; gap: 6px; }
/* Type ▾ while writing (on a page, under the text, beside ⤢; in the writing window, beside what it's for) */
.type-pick-wrap { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }
select.type-pick { width: auto; max-width: 190px; padding: 4px 26px 4px 10px; font-size: 13px; font-weight: 700; border-radius: 999px; }
.format-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 3px; margin-bottom: -2px; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--card); }
.format-btn { min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 700 14px/1 var(--font); cursor: pointer; }
.format-btn:hover { background: var(--accent-soft); color: var(--accent); }
.format-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent); }
.fmt-bold { font-weight: 900; } .fmt-italic { font-style: italic; font-family: var(--serif); } .fmt-strike { text-decoration: line-through; }
.fmt-h1 { font-size: 15px; } .fmt-h2 { font-size: 13px; } .fmt-h3 { font-size: 11.5px; }
/* (a phone: one row, the buttons sharing its width) */
@media (max-width: 860px) { .format-bar { flex-wrap: nowrap; } .format-btn { flex: 1 1 0; min-width: 0; padding: 0 2px; } }
.format-sep { width: 1px; height: 18px; margin: 0 5px; background: var(--line2); }
.entry-editor-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.slot-title-input { font-weight: 800; font-size: 14px; }
/* under a text being written: the names in it (＋ adds them where it is), and ⤢ to go on in the writing window */
.writer-foot { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.writer-named { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.writer-full { margin-left: auto; white-space: nowrap; }
.entry-card .slot-view { margin: 0 -6px; padding: 2px 6px; }
.entry-card.new-text { border-style: dashed; }
.slot .fb-bar { margin-top: 6px; }
.summary-slot .slot-editor .me-input { min-height: 52px; }
.entry-type { font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.also-link { font-size: 12.5px; font-weight: 700; border-left: 4px solid var(--c); padding-left: 6px; color: var(--muted); }
.also .owner-btn { width: 22px; height: 22px; margin-left: -4px; }
.owner-row { align-items: center; gap: 8px; }
.owned-note p { margin: 0; }
.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); }
/* Home: tiles, 3 across (a phone: 2), squares and wide ones; a tile that opens a screen lifts when pointed at */
.home-top { display: flex; align-items: flex-start; gap: 12px; }
.home-top > div { flex: 1 1 auto; min-width: 0; }
.home-help { flex: none; margin-top: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--card); font-weight: 800; color: var(--muted); }
.home-help:hover { color: var(--accent); border-color: var(--accent); }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; margin: 16px 0 24px; }
.home-tile { aspect-ratio: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; overflow: hidden; position: relative;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; box-shadow: var(--soft-shadow); transition: transform .15s ease-out, box-shadow .15s, border-color .15s; }
.home-tile.wide { grid-column: span 2; aspect-ratio: auto; }
.home-tile.opens { cursor: pointer; }
.home-tile.opens:hover, .home-tile.opens:focus-visible { transform: translateY(-2px); border-color: var(--line2); box-shadow: 0 8px 22px rgba(123, 30, 58, .14); outline: none; }
/* (what doesn't fit fades out at the foot) */
.home-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(transparent, var(--card)); pointer-events: none; }
.tile-head { display: flex; align-items: center; gap: 8px; flex: none; }
.tile-icon { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, var(--card)); color: var(--accent-2); } /* (a line icon in a tinted circle) */
.tile-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-title { font-family: var(--show); font-size: 21px; color: var(--title); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-go { color: var(--faint); font-size: 22px; line-height: 1; }
.tile-body { flex: 1 1 auto; min-height: 0; overflow: hidden; font-size: 13.5px; }
.tile-empty { color: var(--faint); font-style: italic; }
.tile-text { font-size: 15px; line-height: 1.6; }
.tile-big { font-family: var(--chunk); font-size: 44px; line-height: 1.1; color: var(--magenta); }
.tile-line { font-weight: 700; color: var(--muted); }
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.glance-row { display: flex; flex-direction: column; }
.glance-row b { font-family: var(--chunk); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--magenta); }
.glance-row span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tile-activity .tile-body { font-size: 12.5px; }
.resume-list { display: flex; flex-direction: column; gap: 4px; }
.resume-row { display: flex; align-items: center; gap: 8px; min-width: 0; border: 0; background: none; padding: 5px 6px; border-radius: 10px; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.resume-row:hover { background: var(--accent-soft); }
.resume-row .dot { background: var(--c); flex: none; }
.resume-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: break-word; } /* (the whole name, on as many lines as it needs) */
.resume-when { flex: none; white-space: nowrap; font-size: 12px; color: var(--faint); }
/* (lists that show only the rows that fit whole: no fade at the foot) */
.home-tile.tile-pickup::after, .home-tile.tile-activity::after, .home-tile.tile-ideas::after { display: none; }
/* a tile's screen: "‹ Home", its name */
.home-back { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.home-back h2 { margin: 0; }
.back-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px 0 11px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--accent-2); line-height: 1;
  background: color-mix(in srgb, var(--accent-2) 11%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
  box-shadow: 0 1px 3px rgba(74, 25, 66, .18); transition: box-shadow .15s, background .15s; }
.back-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.back-btn:hover { background: color-mix(in srgb, var(--accent-2) 18%, var(--card)); box-shadow: 0 2px 6px rgba(74, 25, 66, .22); }
.back-btn:hover svg { transform: translateX(-3px); }
.back-btn:active { box-shadow: none; }
.back-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.story-toc { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 8px; border-top: 1.5px dotted var(--line); }
.toc-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px; border-radius: 8px; color: var(--text); text-decoration: none; border-left: 3px solid var(--c); }
.toc-row:hover { background: var(--accent-soft); text-decoration: none; }
.toc-num { font-size: 11px; font-weight: 800; color: var(--rose-gold); flex: none; }
.toc-name { flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (activity in its tile: lines, not cards) */
.tile-activity .fb-row { padding: 5px 2px; border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; background: none; box-shadow: none; }
/* tiles, filled: an invitation in the middle when there's nothing yet; what there is, and a foot line, otherwise */
.tile-fill { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.tile-foot { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.tile-invite { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 0 8%; color: var(--text); }
.tile-invite-icon { font-size: 46px; opacity: .55; line-height: 1; }
.tile-invite.done .tile-big { color: var(--cs-like); }
.tile-count { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile-items { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.tile-item { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.tile-item-icon { flex: none; width: 16px; text-align: center; }
.tile-item-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.tile-story .tile-text { font-size: 16px; line-height: 1.65; }
/* the story tile: a wide tile like the others; its summary (written right in it) and chapters scroll inside it when longer */
.home-tile.tile-story::after { display: none; }
.tile-story .tile-body { flex: 1 1 0; height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-right: -8px; padding-right: 8px; }
.tile-story .tile-fill { height: auto; min-height: 100%; }
.tile-story .sheet { margin: 0; }
/* (the tile is the story's summary itself: no card in it, no heading; its ⋯ by the tile's name) */
.story-slot { background: none; border: 0; box-shadow: none; padding: 0; }
.story-slot > .slot-head { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 1; }
.story-slot .slot-view { margin: 0 -6px; padding: 2px 6px; }
.story-slot .slot-editor .me-input, .story-slot .slot-editor .me-backdrop { padding: 2px 6px !important; border-color: transparent !important; background: transparent; box-shadow: none !important; }
.story-slot .slot-editor { margin: 0 -6px; }
.home-tile.tile-story:has(.story-slot.editing) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--soft-shadow); } /* (writing in it: the tile is the field) */
.story-slot .fb-bar { margin-top: 4px; }
.tile-add { padding: 2px 10px; }
/* ideas: little notes pinned on the board, all the same size: three lines each (a title and two lines of the idea, or
   three of it), what's longer cut short with "…". The notes don't make the tile taller than its row: it shows the rows
   of notes that fit whole (fitRows), the rest wait on the board's screen. */
.tile-ideas .tile-body { flex: 1 1 0; height: 0; }
.idea-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 2px; }
.idea-note { height: calc(3lh + 18px); overflow: hidden; padding: 9px 11px; border-radius: 4px 4px 12px 4px; font-size: 13px; line-height: 1.45;
  background: color-mix(in srgb, var(--gold) 22%, var(--card)); box-shadow: 0 2px 6px rgba(123, 30, 58, .12); transform: rotate(var(--tilt, 0deg)); }
.idea-note b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea-text { font-family: var(--serif); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.idea-note b + .idea-text { -webkit-line-clamp: 2; }
/* statistics' tile: the last 8 weeks, small */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin: 6px 0 2px; padding-bottom: 2px; border-bottom: 1.5px solid var(--line); }
.spark-bar { flex: 1 1 0; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 30%, var(--card)); }
.spark-bar.now { background: var(--accent); }
/* waiting for you: a card each, to read */
.wait-lists section { margin-bottom: 24px; }
.wait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wait-card { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--soft-shadow); cursor: pointer; min-width: 0;
  transition: transform .15s ease-out, border-color .15s; }
.wait-card:hover, .wait-card:focus-visible { transform: translateY(-2px); border-color: var(--line2); outline: none; }
.wait-head { display: flex; align-items: center; gap: 6px; }
.wait-meta { font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wait-title { font-family: var(--show); font-size: 19px; color: var(--title); line-height: 1.25; overflow-wrap: break-word; }
/* (its beginning, or its picture: as tall as three lines of it, so the cards of a row match) */
.wait-excerpt { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wait-thumb { width: 100%; height: 96px; object-fit: cover; border-radius: 10px; margin-top: 2px; }
.wait-go { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.tile-invite.done.big { padding: 40px 0; }
/* ?: how it works, a popup */
.help-pop { max-width: 340px; padding: 4px 8px; font-size: 13.5px; }
.help-pop h3 { margin: 4px 0 8px; }
.help-pop ul { padding-left: 18px; margin: 0; color: var(--muted); list-style: "♥  "; }
.help-pop li { margin-bottom: 7px; }
.help-pop li::marker { color: var(--pink); }
.help-pop b { color: var(--text); }
.tile-change { font-size: 12.5px; font-weight: 700; }
.tile-change.up { color: var(--cs-like); } .tile-change.down { color: var(--muted); }
/* statistics: this week (a row each, together), badges, facts; the last 8 weeks in bars; all time */
.stats-screen section { margin-bottom: 26px; }
/* this week, a row for each writer: names left, the numbers right-aligned under their heads, in even columns */
.stat-table-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.stat-table th, .stat-table td { padding: 10px 14px; border-bottom: 1px dotted var(--line); white-space: nowrap; text-align: left; }
.stat-table th { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: normal; vertical-align: bottom; line-height: 1.25; }
.stat-table .num { text-align: right; width: 11%; }
.stat-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.stat-table tfoot td { border-bottom: 0; font-weight: 800; background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.stat-who { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.stat-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.stat-badge { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--soft-shadow); min-width: 0; }
.stat-badge-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 22px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 22%, var(--card)); }
.stat-badge-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.word-ignore { font-size: 12px; }
.home-back .stats-cog { margin-left: -6px; font-size: 20px; align-self: center; }
.word-settings { width: min(320px, 82vw); padding: 4px 6px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.word-settings h3 { margin: 2px 0 0; }
.word-settings p { margin: 0; }
.word-set-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.word-set-col { display: flex; flex-direction: column; gap: 5px; font-weight: 700; }
.word-set-col textarea { width: 100%; resize: vertical; font-weight: 400; }
.word-set-actions { display: flex; justify-content: flex-end; gap: 8px; }
.stat-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; }
.stat-fact { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; }
.stat-icon { font-size: 22px; line-height: 1.2; }
.stat-label { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-family: var(--show); font-size: 21px; color: var(--title); }
.stat-value .stat-people { font-family: var(--font); font-size: 13.5px; color: var(--text); display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.week-chart { display: flex; gap: 8px; align-items: stretch; height: 170px; padding: 12px 12px 0; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; }
.week-col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.week-bars { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1.5px solid var(--line2); }
.week-bar { width: 14px; min-height: 2px; border-radius: 5px 5px 0 0; }
.week-label { font-size: 10.5px; color: var(--muted); text-align: center; padding: 4px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-key { display: flex; gap: 14px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.chart-key .key { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 860px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-tile { padding: 12px 13px; border-radius: 16px; }
  .home-tile.wide { aspect-ratio: 2 / 1; }
  .tile-title { font-size: 18px; }
  .tile-big { font-size: 36px; }
  .idea-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* (a phone upright: one tile across, as tall as what it shows; the lists a fixed height, filled with the rows that fit) */
@media (max-width: 560px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-tile, .home-tile.wide { grid-column: auto; aspect-ratio: auto; }
  .home-tile.wide { min-height: 180px; }
  .home-tile.tile-waiting { max-height: 260px; }
  .home-tile.tile-pickup, .home-tile.tile-activity, .home-tile.tile-ideas { height: 250px; }
  .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.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); }

/* --- 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); }
.read-more { margin-top: 4px; }
.prose.clamped { max-height: 440px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* a web address pasted in a text, a note or the chat: a link (in a new tab), underlined so it reads as one without
   pointing at it (a phone can't), the line wavy under the pointer like the app's other links; a long one breaks anywhere */
a.web-link { color: var(--accent); overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a.web-link:hover, a.web-link:focus-visible { text-decoration: underline wavy; text-decoration-color: currentColor; }
.chat-msg.mine a.web-link { color: var(--outline); } /* (on my own bubble's pink: a deeper pink, a lighter one in the dark) */
/* names in text: a faint tint and a thin line in the object's colour, stronger under the pointer (Settings → Names in
   texts, this device only: html[data-names] "plain", just the line; "bright", highlighter-pen marks) */
.mention { color: inherit; cursor: pointer; border-radius: 3px; padding: 0 1px; margin: 0 -1px;
  background: color-mix(in srgb, var(--c) 9%, transparent);
  text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: none;
  text-decoration-color: color-mix(in srgb, var(--c) 50%, transparent); }
.mention:hover, .mention:focus { background: color-mix(in srgb, var(--c) 22%, transparent); text-decoration-color: var(--c); outline: none; }
html[data-names="plain"] .mention { background: none; text-decoration-style: dotted; text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent); }
html[data-names="plain"] .mention:hover, html[data-names="plain"] .mention:focus { background: color-mix(in srgb, var(--c) 14%, transparent); }
html[data-names="bright"] .mention { font-weight: 600; padding: 0 2px; text-decoration: none;
  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; }
html[data-names="bright"] .mention:hover, html[data-names="bright"] .mention:focus { background-size: 100% 100%; }

/* --- mention editor --- */
.mention-editor { position: relative; }
/* written right where it is (a typed text on a page): smaller than in the writing dialog */
.slot-editor .me-backdrop, .slot-editor .me-input { font-size: 15.5px; line-height: 1.6; padding: 9px 12px !important; border-radius: 12px; }
.slot-editor .me-input { min-height: 74px; max-height: none; resize: none; overflow: hidden; }
.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) 12%, transparent); border-radius: 3px; box-shadow: 0 1.5px 0 color-mix(in srgb, var(--c) 55%, transparent); }
html[data-names="plain"] .me-backdrop mark { background: none; }
html[data-names="bright"] .me-backdrop mark { background: color-mix(in srgb, var(--c) 32%, transparent); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 80%, transparent); }
/* a name, but not here ("Not a name here"): a dashed grey line under it, whatever the setting */
.me-backdrop mark.off, html[data-names] .me-backdrop mark.off { box-shadow: none; border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--faint) 0 3px, transparent 3px 6px) 0 100% / 100% 1.5px no-repeat; }
.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; }
/* a box that scrolls (the writing window, a suggested change) keeps room for its scroll bar in both layers, shown or
   not: the text wraps the same in both, and the names stay on their words (Windows, a Mac set to show scroll bars) */
.mention-editor:not(.slot-editor) > .me-backdrop, .mention-editor:not(.slot-editor) > .me-input { scrollbar-gutter: stable; }
.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-veil), 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; max-height: 70svh; 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:focus-visible { outline: 2px solid var(--outline); outline-offset: -2px; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .menu-icon { color: inherit; }
.menu-chip { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.menu-chip:hover { background: var(--sunset-soft); color: var(--text); }
.menu-chip.on { background: var(--accent); border-color: transparent; color: #fff; }
.menu-chip.more { font-weight: 800; letter-spacing: 1px; }
/* the enters / exits / cameo block in right-click menus */
.mark-panel { width: 290px; max-width: calc(100vw - 40px); padding: 4px 4px 2px; }
.mark-switch { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1.5px var(--line); } /* (a switch like .seg) */
.mark-switch > button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; border: none; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 800; padding: 6px 4px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s; }
.mark-switch > button:hover:not(.on) { background: var(--accent-soft); }
.mark-switch > button.on { background: var(--thumb); color: var(--thumb-fg); box-shadow: var(--thumb-shadow); cursor: default; }
.mark-switch > button:focus-visible { outline: 2px solid var(--outline); outline-offset: 1px; }
.mark-icon { color: var(--outline); font-weight: 800; }
/* a transition's symbol drawn as a line icon (ui.js markIcon), as tall as the text beside it */
.mark-glyph { display: inline-flex; align-items: center; gap: 1px; vertical-align: -.22em; }
.mark-glyph svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.glyph-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* (the symbol, for copying and exports) */
.mark-switch > button.on .mark-icon { color: var(--accent); }
.mark-sub { font-size: 12px; color: var(--muted); margin: 9px 2px 5px; }
.mark-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mark-pair { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 4px; }
.mark-lbl { flex: none; width: 48px; font-size: 11.5px; color: var(--muted); padding-top: 3px; }
.mark-foot { display: flex; align-items: center; gap: 8px; margin: 9px 2px 2px; font-size: 12px; color: var(--muted); }
.mark-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-clear { flex: none; border: none; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.menu-icon { min-width: 16px; text-align: center; color: var(--rose-gold); }
.menu-icon.menu-svg { display: inline-flex; justify-content: center; min-width: 18px; }
.menu-svg svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-item:hover:not(:disabled) .menu-svg { color: var(--accent); }
/* whoever is followed (on the timeline, in Read): 👁 and their name in their colour (a click opens them), ✕ stops following */
.follow-tag { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; height: 28px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 10%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, var(--card)); }
.follow-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 100%; padding: 0 3px 0 10px; border: 0; border-radius: 999px 0 0 999px; background: none;
  color: color-mix(in srgb, var(--c) 70%, var(--text)); font: 700 12.5px/1 var(--font); cursor: pointer; }
.follow-eye { display: flex; flex: none; color: var(--c); }
.follow-eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.follow-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-name:hover .follow-label { text-decoration: underline; text-underline-offset: 3px; }
.follow-x { flex: none; width: 26px; height: 100%; padding: 0; border: 0; border-radius: 0 999px 999px 0; background: none; color: var(--muted); font-size: 10px; cursor: pointer; }
.follow-x:hover { color: var(--danger); }
.follow-name:focus-visible, .follow-x:focus-visible { outline: 2px solid var(--outline); outline-offset: -3px; }
/* (a second line, quieter: where a new chapter goes, what someone online is looking at) */
.menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.menu-hint { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-sep { height: 0; border-top: 1.5px dotted var(--line2); margin: 4px 6px; }
.toasts { position: fixed; bottom: calc(18px + var(--safe-b)); 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; }
/* "StoryWeb has been updated": a line above the top bar, in the page's flow (it covers nothing) */
.update-bar { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; padding: 5px 14px;
  background: var(--plum); color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; position: relative; z-index: 7; }
.update-bar .btn { color: var(--plum); background: #fff; border-color: #fff; }

.preview-pop { padding: 0; width: 340px; overflow: auto; overscroll-behavior: contain; } /* (long previews scroll; the buttons stay in view) */
.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-veil), 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-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rose-gold); margin: 10px 0 4px; line-height: 1.2; }
.rel-line { display: flex; align-items: center; gap: 6px; }
.preview-actions { display: flex; gap: 6px; margin: 5px -14px -14px; padding: 8px 14px 12px; position: sticky; bottom: 0; background: var(--card); border-top: 1px dashed var(--line); z-index: 1; }
.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:focus { outline: none; }
.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: one height whatever the tab, so the tabs never jump under the pointer; they stay, what's under them scrolls */
.modal.settings-modal { height: min(88vh, 780px); }
.settings-modal .modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.settings { flex: 1 1 auto; min-height: 0; }
.settings-pane { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -20px; padding: 2px 20px 16px; }
/* (its tabs: the top bar's switch, in the window's colours; on a phone they scroll sideways) */
.settings .tabs { align-self: flex-start; max-width: 100%; gap: 2px; padding: 3px; border: 0; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1.5px var(--line); }
.settings .tab { height: 30px; margin: 0; padding: 0 13px; border: 0; border-radius: 999px; font: 800 13px/1 var(--font); color: var(--muted); white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s; }
.settings .tab:hover { color: var(--title); background: var(--accent-soft); }
.settings .tab.active { background: var(--thumb); color: var(--thumb-fg); border: 0; text-decoration: none; box-shadow: var(--thumb-shadow); }
.settings .tab:focus-visible { outline: 2px solid var(--outline); outline-offset: 1px; }
/* relation types: a list, and an editor dialog */
.rt-top { display: flex; align-items: flex-start; gap: 12px; }
.rt-top > p { flex: 1 1 auto; margin: 0; }
.rt-top > .btn { flex: none; }
.rt-list { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.rt-card { display: grid; grid-template-columns: 52px 1fr auto 22px; gap: 12px; align-items: center; padding: 9px 14px; border: none; background: var(--card);
  text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.rt-card + .rt-card { border-top: 1px dashed var(--line); }
.rt-card:hover, .rt-card:focus-visible { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.rt-line { display: flex; }
.rt-line svg { width: 46px; height: 10px; }
.rt-shape { display: flex; justify-content: center; }
/* the object kind editor: its two names side by side, its look in a row */
.kind-names, .kind-look { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.kind-names > .field { flex: 1 1 160px; }
.kind-look .kind-icon { width: 34px; height: 38px; align-items: center; }
.rt-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-name { font-weight: 800; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-inv { font-weight: 600; color: var(--muted); }
.rt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rt-chip { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0 8px; border-radius: 999px; border: 1px solid var(--line2); white-space: nowrap; }
.rt-chip.meaning { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line2)); }
.rt-used { font-size: 12px; color: var(--faint); white-space: nowrap; }
.rt-edit { color: var(--faint); font-size: 15px; }
.rt-card:hover .rt-edit { color: var(--accent-2); }
.rt-editor { max-width: 560px; }
/* Settings → Text types: a card per type, with ↑ ↓ for their order on a page */
.tt-row { display: flex; align-items: center; background: var(--card); }
.tt-row + .tt-row { border-top: 1px dashed var(--line); }
.tt-row .tt-card { flex: 1 1 auto; min-width: 0; grid-template-columns: 26px 1fr auto 22px; }
.tt-kind { font-size: 16px; text-align: center; color: var(--muted); }
.tt-order { display: flex; flex-direction: column; padding: 0 8px; }
.rt-form { display: flex; flex-direction: column; gap: 16px; }
.rt-section { display: flex; flex-direction: column; gap: 9px; }
.rt-section > h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rt-preview { position: relative; display: flex; justify-content: center; padding: 14px 0 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.rt-preview svg { max-width: 100%; height: auto; }
.rt-preview-name { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-weight: 800; font-style: italic; font-size: 13px; background: color-mix(in srgb, var(--accent) 5%, var(--bg)); padding: 0 6px; white-space: nowrap; }
.rt-preview-inv { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: 11.5px; font-style: italic; color: var(--muted); white-space: nowrap; }
.rt-dir { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rt-dir > p { margin: 0; }
.rt-dir > .field { align-self: stretch; }
.rt-looks { display: flex; flex-direction: column; gap: 7px; }
.rt-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rt-swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.rt-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--line2); cursor: pointer; padding: 0; }
.rt-swatch.on { box-shadow: 0 0 0 2.5px var(--text); }
.rt-custom { width: 34px; height: 28px; padding: 1px 2px !important; cursor: pointer; }
.rt-custom.on { box-shadow: 0 0 0 2.5px var(--text); }
.rt-patterns { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-pattern { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 9px 4px; border-radius: 10px; border: 1.5px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; font: inherit; }
.rt-pattern svg { width: 48px; height: 10px; }
.rt-pattern.on { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, var(--card)); }
.rt-ends { display: flex; flex-direction: column; gap: 8px; }
.rt-ends > p { margin: 0; }
.rt-end { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: baseline; }
.rt-end-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rt-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.rt-role { padding: 2px 10px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--card); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rt-role.on { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.rt-meaning { display: flex; flex-direction: column; gap: 6px; }
.rt-mean { display: flex; gap: 9px; align-items: flex-start; padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; }
.rt-mean.on { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 6%, var(--card)); }
.rt-mean input { margin-top: 3px; }
.rt-mean > span { display: flex; flex-direction: column; gap: 1px; }
.rt-mean b { font-size: 13.5px; }
.kind-icon { display: flex; justify-content: center; }
.people { display: flex; flex-direction: column; gap: 8px; }
/* a form's row: fields named over them, side by side (wrapping on a phone), its button level with the fields */
.form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.form-row > .field { flex: 1 1 200px; min-width: 0; }
.form-row > .field.narrow { flex: none; }
.form-row > .field.narrow > input[type=color] { width: 38px; height: 38px; } /* (as tall as the text boxes: their names on one line) */
.form-row > .form-check { padding-bottom: 9px; }
.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: nowrap; background: var(--panel); }
/* one row, always: as the pane narrows the hint gives way first, then the buttons' words (their icons stay) */
.graph-pane { container-type: inline-size; }
.graph-toolbar > * { flex: none; }
.graph-toolbar > .grow { flex: 1 1 auto; }
.graph-toolbar .when { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.25; }
.graph-toolbar .gi { line-height: 1; }
/* (measured: every word needs a 545 px pane; Play and Fit as icons 496; Options too 437; the two views too 334) */
@container (max-width: 679px) { .graph-toolbar .when { display: none; } }
@container (max-width: 549px) { .graph-toolbar :is(.g-fit, .graph-play) .gl { display: none; } }
@container (max-width: 499px) { .graph-toolbar .g-options .gl { display: none; } }
@container (max-width: 439px) { .graph-toolbar .g-mode .gl { display: none; } }
@container (max-width: 339px) { .graph-toolbar .g-add .gl { display: none; } }
.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-size: 15px; font-weight: 700; }
.g-edge { fill: none; stroke-width: 2.5; stroke-opacity: .85; stroke-linecap: round; transition: stroke-width .12s; }
.g-edge.ended { stroke-opacity: .35; } /* (not a dash: line patterns tell relation types apart) */
.g-edge.lit { stroke-width: 4; stroke-opacity: 1; }
.g-edge.dim, .g-arrow.dim { opacity: .4; } /* (focused on something: the rest fades a little, it doesn't go away) */
/* (a band of the background under each line: where two lines cross, the one on top is cut clear of the other) */
.g-edge-case { fill: none; stroke: var(--tl-bg); stroke-width: 6.5; stroke-opacity: .8; stroke-linecap: round; }
.g-edge-case.part { stroke-width: 5; }
.g-edge-case.lit { stroke-width: 8.5; stroke-opacity: 1; }
.g-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.g-edge, .g-edge-case, .g-arrow, .g-spoke, .g-own, .g-pin, .g-sel-ring { pointer-events: none; } /* (clicks go to the wider .g-edge-hit underneath) */
.g-arrow { stroke-width: 1; stroke-linejoin: round; }
/* a relation's name: written along its line, just beside it, in its colour (so it's plainly that line's, and never reads
   as a name), with a thin halo of the background where it crosses other lines */
.g-label { font: italic 700 11px var(--font); fill: color-mix(in srgb, var(--rc) 62%, var(--text)); cursor: pointer; }
/* (a name's halo: a copy of it behind it, the background's colour, so it never covers its own letters) */
text.g-label.bg, text.g-name.bg { fill: none; stroke: var(--tl-bg); stroke-linejoin: round; pointer-events: none; }
.g-label.lit { font-weight: 800; fill: color-mix(in srgb, var(--rc) 80%, var(--text)); }
.g-node { cursor: pointer; }
/* every node's edge: its own colour, a shade towards the text's (deeper on light, lighter on dark), so it always has an
   edge and adds no colour of its own — on the graph a colour always means something (the allegiance rings) */
.g-node .g-shape { stroke: color-mix(in srgb, var(--c) 68%, var(--text)); stroke-width: 2.2; }
.g-shadow { fill: rgba(74, 25, 66, .24); stroke: rgba(74, 25, 66, .12); stroke-width: 2.5; pointer-events: none; }
.g-node.gone .g-shadow, .g-object .g-shadow { opacity: .6; }
.g-node .g-shape.portrait { stroke: var(--c); stroke-width: 3; }
.g-node .g-shape.box { fill: color-mix(in srgb, var(--c) 18%, var(--card)); stroke: var(--c); stroke-width: 2; } /* processes */
.g-box-name { font-family: var(--font); font-weight: 800; fill: var(--text); text-anchor: middle; pointer-events: none; } /* (size inline, in graph units) */
.g-node.selected .g-shape { stroke: var(--outline); stroke-width: 3; }
.g-sel-ring { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 3.5; }
/* (pinned: dragged into place, it stays there) */
.g-pin { fill: var(--outline); stroke: var(--card); stroke-width: 1.5; }
.g-hit { fill: transparent; }
.g-object .g-shape { stroke-width: 1.4; }
.g-faction .g-shape { stroke-width: 2.5; }
.g-crest-glow { fill: var(--fc); opacity: .22; }
.g-halo { fill: none; stroke: var(--fc); stroke-width: 3.5; stroke-linecap: round; }
/* a faction's name: a tag in its colour (on its bubble's top edge in the factions view) */
.g-fpill { fill: color-mix(in srgb, var(--fc) 15%, var(--card)); stroke: color-mix(in srgb, var(--fc) 72%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.g-name.crest { font: 400 16px var(--show); fill: color-mix(in srgb, var(--fc) 62%, var(--text)); stroke: none; }
.g-name.item { font: 700 10.5px var(--font); fill: var(--muted); stroke-width: 4px; }
/* faction bubbles (factions view) */
.g-blobset { transition: opacity .2s; }
.g-blob { fill: color-mix(in srgb, var(--fc) 13%, transparent); fill-rule: evenodd; stroke: none; cursor: pointer; }
.g-blob-line { fill: none; stroke: color-mix(in srgb, var(--fc) 72%, transparent); stroke-width: 2.25; stroke-linejoin: round; pointer-events: none; }
.g-blobset.outline-only .g-blob { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; }
.g-blobset.outline-only .g-blob-line { stroke-dasharray: 8 5; }
.g-blobset.lit .g-blob-line { stroke-width: 3.25; }
.g-blobset.dim { opacity: .75; }
/* (the goo inside a bubble: denser along its rim, a shade low on the right, a shine high on the left) */
.g-goo { pointer-events: none; }
/* (the sheen: white, strongest at the upper left, fading smoothly into the bubble's colour by its middle) */
.g-sheen-0 { stop-color: #fff; stop-opacity: var(--goo-shine); }
.g-sheen-1 { stop-color: #fff; stop-opacity: calc(var(--goo-shine) * .35); }
.g-sheen-2 { stop-color: #fff; stop-opacity: 0; }
.g-tether { stroke: var(--fc); stroke-width: 2; stroke-dasharray: 5 5; opacity: .5; }
.g-spoke { fill: none; stroke: var(--fc); stroke-width: 1.25; stroke-opacity: .45; }
.g-spoke.dashed { stroke-dasharray: 4 4; stroke-opacity: .8; }
.g-spoke.dim, .g-own.dim, .g-tether.dim { opacity: .4; }
.g-own { fill: none; stroke-width: 1.5; stroke-opacity: .7; }
.g-own.lit { stroke-width: 2.5; stroke-opacity: 1; }
.g-own.co { stroke-width: 1.25; stroke-dasharray: 2 3; }
.g-edge.quiet { stroke-width: 1.5; stroke-opacity: .35; }
.g-arrow.quiet { opacity: .35; }
.g-arrow.ended { opacity: .4; }
.g-edge.crests { stroke-width: 3.5; }
.g-edge.part { stroke-width: 1.6; stroke-opacity: .55; }
.graph-show { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.graph-show .label { flex-basis: 100%; margin: 0; }
.graph-options { display: flex; flex-direction: column; gap: 8px; padding: 6px; max-width: 280px; }
.graph-options p { margin: 0; }
.graph-relayout { display: flex; gap: 6px; flex-wrap: wrap; }
.graph-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 10px - var(--float-w)); max-height: 40%; overflow: auto; pointer-events: auto; }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid color-mix(in srgb, var(--fc) 55%, var(--line)); background: color-mix(in srgb, var(--fc) 10%, var(--card));
  border-radius: 999px; padding: 2px 9px 2px 6px; font: 700 12px var(--font); color: var(--text); cursor: pointer; }
.legend-chip.on { background: color-mix(in srgb, var(--fc) 28%, var(--card)); border-color: var(--fc); }
.legend-chip small { color: var(--muted); font-weight: 600; }
/* (a very long faction name is cut short, so it doesn't take a row of the legend for itself; the whole name is in the tooltip) */
.legend-chip { max-width: 220px; }
.legend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-chip > .legend-dot, .legend-chip > small { flex: none; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--fc); flex: none; }
/* (the kinds of lines on screen, after the factions: lighter chips, the line as it's drawn) */
.legend-chip.rel { border-color: color-mix(in srgb, var(--fc) 30%, var(--line)); background: color-mix(in srgb, var(--card) 88%, transparent); font-weight: 700; }
.legend-chip.rel.on { background: color-mix(in srgb, var(--fc) 16%, var(--card)); border-color: var(--fc); }
.legend-line { display: inline-flex; flex: none; }
.legend-chip.key { --fc: var(--line2); border-style: dashed; background: var(--card); }
.legend-chip.key.on { border-style: solid; background: var(--panel2); border-color: var(--line2); }
.key-caret { font-weight: 800; color: var(--muted); margin-left: -2px; }
.legend-sep { align-self: stretch; width: 1.5px; margin: 3px 3px; background: var(--line2); border-radius: 1px; flex: none; opacity: .7; }
.graph-toolbar .g-gone { font-size: inherit; font-weight: 600; color: var(--faint); padding: 0; text-decoration: underline dotted; text-underline-offset: 3px; }
.graph-toolbar .g-gone:hover { color: var(--accent); }
.g-node.dim { opacity: .6; }
.g-node.gone { opacity: .35; }
.g-node.gone .g-shape { stroke-dasharray: 2 3; filter: grayscale(.7); }
.g-name { font: 800 12.5px var(--font); fill: var(--text); text-anchor: middle; }
.g-linking { stroke: var(--outline); stroke-width: 2; stroke-dasharray: 5 4; }
/* what has just left the graph, fading out where it was */
.g-leaving, .g-leaving * { pointer-events: none !important; }
/* what the graph is focused on, why the rest is faded, and the way out (top middle; under the legend on a phone) */
.graph-focus { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px - 2 * 200px);
  padding: 4px 4px 4px 14px; border-radius: 999px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1.5px solid var(--line2); box-shadow: var(--soft-shadow);
  font-size: 13px; white-space: nowrap; z-index: 3; }
.graph-focus[hidden] { display: none; }
.gf-what { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gf-what b { overflow: hidden; text-overflow: ellipsis; }
.gf-word { color: var(--muted); }
.gf-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.gf-line { width: 18px; height: 3px; border-radius: 2px; flex: none; }
.gf-off { flex: none; }
@container (max-width: 759px) { .gf-why { display: none; } }
/* the overview in the corner, shown while some of the graph is out of view */
.graph-mini { position: absolute; top: 10px; right: 10px; border-radius: 12px; background: color-mix(in srgb, var(--card) 90%, transparent); border: 1.5px solid var(--line);
  box-shadow: var(--soft-shadow); cursor: pointer; touch-action: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.graph-mini.on { opacity: 1; visibility: visible; transition: opacity .25s; }
/* the tray of the unconnected, beside the graph */
.g-tray { fill: color-mix(in srgb, var(--panel2) 38%, transparent); stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.g-tray-tag rect { fill: var(--card); stroke: var(--line2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.g-tray-tag text { font-family: var(--font); font-weight: 800; fill: var(--muted); text-anchor: middle; }

/* --- 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-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: var(--on-outline); 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; }
/* under a summary, the same row as under a text (lighter: the summary box above already sets it apart) */
/* agreeing with a note, or not (the same 👍 👎 as under a text; on your own note only who answered, nothing to press) */
.fb-verdicts { margin: 7px 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: var(--on-outline); font: 800 11px/18px var(--font); text-align: center; vertical-align: 2px; text-decoration: none; }
/* the Feedback tab, in the side panel: a narrow column, so a row's actions go under it */
.fb-pane { padding: 10px 9px calc(var(--float-h) + 12px); }
.fb-section { margin-bottom: 18px; }
.fb-section h3 { display: flex; align-items: center; gap: 7px; margin: 0 3px 7px; font-size: 19px; }
.fb-section h3 .fb-h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-section h3 .count { flex: none; font: 800 11.5px var(--font); background: var(--outline); color: var(--on-outline); border-radius: 999px; padding: 1px 7px; }
.fb-all { flex: none; margin-left: auto; border: none; background: none; padding: 2px 7px; border-radius: 8px; font: 700 12px var(--font); color: var(--muted); cursor: pointer; white-space: nowrap; }
.fb-all:hover { color: var(--title); background: var(--accent-soft); }
.fb-empty { color: var(--faint); font-size: 13px; margin: 0 4px; }
.fb-list { display: flex; flex-direction: column; gap: 6px; }
.fb-row { display: flex; align-items: flex-start; gap: 8px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 8px 10px; cursor: pointer; }
.fb-row.static { cursor: default; align-items: center; flex-wrap: wrap; }
/* (its text beside the icon, however long: only the actions go under it) */
.fb-row.static > .fb-row-main { flex-basis: 0; }
button.fb-row:hover { border-color: var(--line2); background: var(--panel2); }
.fb-row.compact { padding: 5px 9px; align-items: center; border-radius: 10px; }
.fb-row-main { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow-wrap: break-word; }
.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: 28px; height: 28px; 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; justify-content: flex-end; gap: 6px; flex: 1 0 100%; }
/* a row that leads somewhere, with "✓ Mark as read" under it (things that need nothing from you) */
.fb-row.with-action { padding: 0; align-items: center; cursor: default; flex-wrap: wrap; }
.fb-go { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 8px; text-align: left; border: none; background: none; color: inherit; font: inherit;
  padding: 8px 10px; border-radius: 13px; cursor: pointer; }
.fb-go:hover { background: var(--panel2); }
.fb-read { flex: none; margin: -6px 6px 6px auto; white-space: nowrap; }
.fb-thumb { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--panel3); border-radius: 8px; flex: none; font-size: 15px; }
.fb-time { flex: none; }
/* "Load more" under Recent activity: a pill, centred */
.btn.load-more { align-self: center; margin-top: 6px; border-radius: 999px; padding: 5px 20px; }
.fb-new { font: 800 10px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--on-outline); 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; }

/* --- drawer (phone layout only) --- */
.drawer-head, .drawer-backdrop, .drawer-search { display: none; }
/* the side panel's button, first in the workspace's tabs: folds the panel away and brings it back (on a phone: the drawer) */
#app.side-collapsed .sidebar { display: none; }
.side-toggle { flex: none; align-self: center; width: 36px; height: 32px; margin: 3px 4px 0 -4px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; transition: color .12s, background-color .12s; }
.side-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.side-toggle .side-fill { fill: currentColor; stroke: none; opacity: 0; transition: opacity .15s; }
.side-toggle.open .side-fill { opacity: .3; }
.side-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.icon-tab { display: inline-flex; align-items: center; gap: 6px; padding-left: 9px; padding-right: 9px; }
.icon-tab:has(.tab-word) { padding-right: 13px; }
.tab-icon { display: inline-flex; }
.tab-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* what's selected: a tab of its own after the others, a little apart, its sides slanting in; its colour only a stripe
   along its top (the tab itself, its ✎ too, in the page's colours, as the others) */
.item-tab { position: relative; z-index: 0; align-self: flex-end; display: flex; align-items: center; flex: 0 1 auto; min-width: 230px; max-width: min(420px, 40%);
  height: 34px; margin: 0 0 -1.5px 22px; padding: 0 12px 0 16px; color: var(--muted); }
.item-tab::before { content: ""; position: absolute; z-index: -1; inset: 0; border: 1.5px solid var(--line2); border-top: 3px solid var(--c); border-bottom: 0;
  border-radius: 9px 9px 0 0; background: color-mix(in srgb, var(--c) 6%, var(--panel)); transform: perspective(70px) rotateX(8deg); transform-origin: 50% 100%; }
.item-tab:hover { color: var(--accent); }
.item-tab.active { color: var(--title); }
.item-tab.active::before { background: var(--card); border-color: var(--line); border-top-color: var(--c); }
.item-open { flex: 1; display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 6px; min-width: 0; border: 0; background: none; color: inherit; cursor: pointer; padding: 0 4px; height: 100%;
  font-family: var(--show); font-size: 17px; }
.item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.item-close { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; font-size: 13px; opacity: .75; }
.item-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.item-tab .tab-icon svg { width: 17px; height: 17px; }
.side-toggle.open { color: var(--title); }
.side-toggle:focus-visible { outline: 2px solid var(--outline); outline-offset: 1px; }
/* …with the Feedback tab's count while the panel is out of sight */
.side-toggle { position: relative; }
.side-badge { position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--outline); color: var(--on-outline);
  font: 800 10.5px/17px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--panel); pointer-events: none; }

/* touch screens: nothing may depend on hovering */
@media (hover: none) {
  .spot-btn, .rel-actions, .entry-actions { opacity: 1; }
}
@media (pointer: coarse) {
  .tl-viewport, .tree-row, .entity-row, .tl-toolbar, .tabs { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .btn.small { min-height: 32px; padding: 4px 12px; }
  .icon-btn { min-width: 34px; min-height: 34px; }
  .toggle { min-height: 30px; }
  .seg.small > button { min-height: 30px; }
  .menu-chip { min-height: 30px; padding: 3px 12px; font-size: 13px; }
  .mark-switch > button { min-height: 40px; }
  .mark-clear { min-height: 34px; }
  .tree-row { --pad-t: 7px; padding-bottom: 7px; }
  .menu-item { padding: 10px 12px; font-size: 14.5px; }
  /* (a thin strip, as on a computer, but as easy to catch: a finger counts 6 px above and below it too) */
  .splitter { height: 11px; touch-action: none; }
  .splitter::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .splitter::after { width: 25px; height: 25px; line-height: 25px; font-size: 14px; }
}

/* (keyboard shortcuts: not on a phone or a tablet, which have no keyboard to press them on) */
@media (max-width: 860px), (pointer: coarse) { .kbd-hint { display: none; } }

/* --- narrow screens (phones, small tablets): one column --- */
@media (max-width: 860px), (max-height: 500px) {
  .topbar { gap: 6px; padding: 6px 8px 8px; }
  .topbar > .grow { display: none; }
  .search-wrap { flex: 1 1 auto; width: auto; min-width: 0; }
  .story-title { font-size: 18px; max-width: 30vw; }
  .user-name { display: none; }
  .presence-list .avatar { width: 24px; height: 24px; font-size: 11px; }

  .tl-toolbar { gap: 5px; padding: 7px 8px 6px; }
  .tl-toolbar > .chip { max-width: 34vw; }
  .timeline { min-height: 0; }
  .settings .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .settings .tabs.more-right { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .settings .tabs.more-left { mask-image: linear-gradient(90deg, transparent, #000 44px); }
  .settings .tabs.more-left.more-right { mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  .settings .tab { flex: none; white-space: nowrap; }
  .tl-toolbar .btn.small { padding: 4px 9px; }
  .tl-toolbar .btn-group { gap: 4px; }
  #app.tl-hidden .tl-toolbar { border-bottom: 1.5px dashed var(--line2); }
  /* (no top bar on a phone: the workspace's tabs are the top row, in its sunset with its leopard edge: white on it, the
     one showing in cream) */
  #app:not(.bars-merged) > .main-tabs { background: var(--sunset); border-bottom: none; position: relative; z-index: 6; overflow: visible; padding: 5px 6px 0; }
  #app:not(.bars-merged) > .main-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--leopard-veil), var(--leopard) 0 0 / 60px 60px; box-shadow: 0 3px 6px rgba(58, 34, 20, .3); }
  #app:not(.bars-merged) > .main-tabs .side-toggle, #app:not(.bars-merged) > .main-tabs .tab { color: rgba(255, 255, 255, .9); }
  #app:not(.bars-merged) > .main-tabs .side-toggle:hover { color: #fff; background: rgba(255, 255, 255, .18); }
  #app:not(.bars-merged) > .main-tabs .tab.active { color: var(--title); background: var(--card); border-color: transparent; }
  #app:not(.bars-merged) > .main-tabs .item-tab { color: #fff; margin-bottom: 0; }
  #app:not(.bars-merged) > .main-tabs .item-tab::before { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); border-top-color: var(--c); }
  #app:not(.bars-merged) > .main-tabs .item-tab.active { color: var(--title); }
  #app:not(.bars-merged) > .main-tabs .item-tab.active::before { background: var(--card); border-color: var(--card); border-top-color: var(--c); }
  /* (and a bar along the bottom, under the workspace: the timeline's toolbar (＋, the playhead, the one followed), then
     ‹ › and the chat; nothing floats over what's being read or written) */
  .phone-bar { display: flex; align-items: center; gap: 8px; flex: none; position: relative; z-index: 50; padding: 6px 10px calc(6px + var(--safe-b));
    background: var(--panel); border-top: 1.5px dashed var(--line2); }
  .phone-bar > .tl-toolbar { flex: none; gap: 6px; padding: 0; min-height: 0; background: none; border: none; }
  .phone-bar > .tl-toolbar .btn { flex: none; height: 44px; min-width: 44px; min-height: 0; padding: 0 12px; border: 2px solid var(--card); border-radius: 999px;
    background: var(--sunset); color: #fff; font-size: 17px; box-shadow: 0 3px 8px rgba(74, 25, 66, .25); }
  .phone-bar > .dock { flex: 1 1 auto; height: 44px; background: var(--card); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .phone-bar .ph-half { width: 42px; }
  .phone-bar .ph-go { font-size: 13.5px; }
  .phone-bar .chat-fab { width: 52px; }
  .dock-peek { right: calc(10px + var(--safe-r)); bottom: calc(64px + var(--safe-b)); }
  /* (the toasts go over that row (and saving / offline, below); the graph's legend to its top) */
  .toasts { bottom: calc(62px + var(--safe-b)); }
  .graph-legend { top: 10px; bottom: auto; max-width: calc(100% - 20px); }
  .graph-focus { top: 52px; max-width: calc(100% - 20px); }

  /* the sidebar slides in from the left */
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; padding: var(--safe-t) 0 var(--safe-b) var(--safe-l); width: min(88vw, 360px); max-height: none; z-index: 60; border-right: none;
    transform: translateX(-104%); transition: transform .22s ease-out, visibility 0s linear .22s; box-shadow: 6px 0 24px rgba(58, 14, 46, .35); visibility: hidden; }
  #app.drawer-open .sidebar { transform: none; visibility: visible; transition: transform .22s ease-out, visibility 0s; }
  .drawer-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; background: var(--sunset); color: #fff; flex: none; }
  .drawer-head .icon-btn { color: #fff; font-size: 18px; }
  .drawer-title { flex: 1 1 auto; min-width: 0; font-family: var(--show); font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 0; background: none; color: inherit; text-align: left; padding: 0; cursor: pointer; }
  /* (no top bar on a phone: what was in it is at the top of the side panel, and the corner says saving / offline) */
  #app:not(.bars-merged) .topbar { display: none; }
  .drawer-people { display: flex; align-items: center; gap: 6px; flex: none; }
  .drawer-people .user-name { display: none; }
  .drawer-search { display: block; padding: 8px 10px; background: var(--panel); border-bottom: 1.5px dashed var(--line2); flex: none; }
  .drawer-search .search-wrap { width: 100%; }
  .drawer-search .search { width: 100%; color: var(--text); background: var(--bg2); border-color: var(--line2); }
  .drawer-search .search::placeholder { color: var(--faint); }
  .status-corner { position: fixed; bottom: calc(62px + var(--safe-b)); left: calc(10px + var(--safe-l)); z-index: 70; display: none; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 999px; background: var(--sunset); box-shadow: var(--soft-shadow); }
  .status-corner:has(.busy.on), .status-corner:has(.offline-note:not([hidden])) { display: flex; }
  #app.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(58, 14, 46, .45); animation: fade .15s ease-out; }

  .main-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding: 4px 6px 0; }
  .main-tabs .item-tab { flex: 1 1 auto; min-width: 0; max-width: 260px; margin-left: 10px; }
  .main-tabs::-webkit-scrollbar { display: none; }
  /* (scrolling sideways only: overflow-x makes them scroll up and down too, by the tabs' overlap with the line under them) */
  .main-tabs, .settings .tabs, .side-tabs { overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x; }
  .main-tabs .tab { font-size: 15px; padding: 5px 10px 4px; white-space: nowrap; flex: none; }
  .details-pane { padding: 12px 12px calc(var(--float-h) + 16px); }
  .rt-card { grid-template-columns: 40px 1fr 18px; padding: 9px 10px; }
  .rt-used { display: none; }
  .rt-top { flex-direction: column; }
  .grid2 { grid-template-columns: 1fr; }
  .title-input { font-size: 30px !important; }
  .insp-head .head-add { display: none; } /* (a phone: texts and images are added in Entries, and the other sections) */
  .insp-overview h2 { font-size: 40px; }

  /* dialogs: big ones take the whole screen, small ones stay cards */
  .modal-backdrop { padding: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)); }
  .modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px - var(--safe-t) - var(--safe-b)); }
  .modal-backdrop:has(> .modal.wide) { padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
  .modal.wide { max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .modal.wide .modal-header { border-radius: 0; }
  .modal-header { padding: 10px 12px 9px; }
  .modal-header h2 { font-size: 21px; }
  .modal-body { padding: 14px 12px 12px; }
  .settings-pane { margin: 0 -12px; padding: 2px 12px 12px; }
  .modal-footer { padding: 10px 12px 12px; flex-wrap: wrap; }
  .popover { max-width: calc(100vw - 16px); }
  .graph-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 16px 8px 6px; } /* (clear of the strip's ♥ over it) */
  .graph-toolbar > * { flex: none; }
  .graph-toolbar .when { display: none; }
  .graph-legend { flex-wrap: nowrap; overflow-x: auto; max-height: none; scrollbar-width: none; }
  .legend-chip { flex: none; }
}

/* --- short screens (a phone on its side, a window zoomed far in): slimmer bars leave room for the content --- */
@media (max-height: 500px) {
  .topbar { padding: 4px 8px 6px; }
  .topbar .search { padding: 4px 12px !important; }
  .user-btn .avatar { width: 26px; height: 26px; }
  .tl-toolbar { padding: 4px 8px 5px; min-height: 0; }
  .tl-toolbar .btn.small, .tl-toolbar .toggle, .tl-toolbar .chip { min-height: 28px; }
  .phone-bar { padding: 3px 10px calc(3px + var(--safe-b)); }
  .phone-bar > .tl-toolbar .btn, .phone-bar > .dock { height: 36px; }
  .phone-bar > .tl-toolbar .btn { min-width: 36px; }
  .phone-bar .ph-go { padding-top: 0; padding-bottom: 0; }
  .dock-peek { bottom: calc(52px + var(--safe-b)); }
  .splitter { height: 11px; }
  .splitter::after { width: 22px; height: 22px; line-height: 22px; }
  .main-tabs { padding: 2px 6px 0; }
  .main-tabs .tab { font-size: 14px; padding: 3px 9px 2px; }
  .graph-toolbar { padding: 4px 8px; }
  .graph-toolbar .btn.small, .graph-toolbar .seg.small > button { min-height: 28px; }
}

/* --- in the story / gone (marks on events) --- */
.chip-mark { font-weight: 800; color: var(--outline); margin-right: 1px; }
.chip.gone { opacity: .5; border-style: dotted; font-style: italic; }
.life-spans { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.life-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* a mark: a card like a relation's. Icon, what and where (wrapping as one sentence), ✕; under them how and the note */
.life-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "icon what x" ". details details"; align-items: center; gap: 4px 7px;
  padding: 6px 6px 7px 9px; border-radius: 12px; background: var(--card); box-shadow: var(--soft-shadow); font-size: 13px; }
.life-icon { grid-area: icon; text-align: center; font-weight: 800; color: var(--outline); }
.life-what { grid-area: what; min-width: 0; overflow-wrap: break-word; }
.life-x { grid-area: x; }
.life-kind { color: var(--muted); font-style: italic; }
.life-details { grid-area: details; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* the transition: its name and its dropdown (a cameo's two, in and out) in one box, the name a tab on its left */
.life-trans { display: grid; grid-template-columns: auto minmax(0, 15em); max-width: 100%; border: 1.5px solid var(--line2); border-radius: 12px; overflow: hidden; background: var(--bg2); }
.life-trans:focus-within { border-color: var(--rose-gold); }
.life-how-cap { grid-column: 1; display: flex; align-items: center; padding: 0 10px; background: var(--panel3); border-right: 1.5px solid var(--line2);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.life-trans .life-how { grid-column: 2; min-width: 0; width: 100% !important; padding: 3px 8px !important; font-size: 12.5px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: transparent !important; }
.life-trans .life-how + .life-how { border-top: 1.5px solid var(--line2) !important; }
.life-note { align-self: stretch; min-width: 0; padding: 3px 10px !important; font-size: 12.5px; } /* (a line of its own, the card's width) */
.scope-select { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 4px 10px !important; }

/* --- the dock: where you are in the story (‹ the playhead ›), then the chat. On a computer it floats in the lower right
   corner, no wider than Read's column less a margin (main.js); on a phone it's in the bar along the bottom, after ＋.
   Frosted, like the timeline's own buttons: one family of things that float. --- */
.dock { display: flex; align-items: stretch; height: 40px; min-width: 0; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line2); box-shadow: 0 1px 0 rgba(123, 30, 58, .05), 0 8px 24px rgba(123, 30, 58, .14); transition: opacity .35s ease; }
.dock.floating { position: fixed; right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); z-index: 50; max-width: var(--nav-max, 290px); }
/* (while writing: faint over the words, until the mouse moves or comes over it) */
.dock.quiet:not(:hover):not(:focus-within) { opacity: .22; }
.playhead-pad { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
.playhead-pad[hidden] { display: none; }
.ph-half { flex: none; width: 34px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ph-half svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ph-half:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.ph-half:disabled { color: var(--line2); cursor: default; }
/* between ‹ and ›: the playhead's number (its title too when it isn't what's open), whoever is followed under it */
.ph-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 2px; }
.ph-mid:empty { display: none; }
.ph-line { display: flex; align-items: center; min-width: 0; }
.ph-go { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; padding: 2px 6px; border: 0; border-radius: 7px; background: none; color: var(--text);
  cursor: pointer; font: 600 13px/1.15 var(--font); text-align: left; }
.ph-go:hover { background: var(--accent-soft); }
.ph-num { flex: none; font-weight: 800; color: var(--title); font-variant-numeric: tabular-nums; }
.ph-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-title.cramped { display: none; } /* (no room for a word of it: just the number, the whole of it in the tooltip) */
.ph-mark { flex: none; font-size: 10px; color: var(--c); }
/* (✕: clear the playhead, stop following; only under the pointer, in a little room kept for it: nothing moves when it shows) */
.ph-x { flex: none; width: 16px; height: 16px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 9px; line-height: 16px;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .12s; }
.dock:hover .ph-x, .ph-x:focus-visible { opacity: 1; pointer-events: auto; }
.ph-x:hover { color: #fff; background: var(--danger); }
.dock :is(.ph-half, .ph-go, .ph-x, .chat-fab):focus-visible { outline: 2px solid var(--outline); outline-offset: -3px; }
/* the chat: the dock's last part, with how many messages are new */
.chat-fab { position: relative; flex: none; width: 46px; padding: 0; border: 0; border-left: 1px solid var(--line); background: none; color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.playhead-pad[hidden] + .chat-fab { border-left: 0; }
.chat-fab:hover { background: var(--accent-soft); color: var(--accent); }
.chat-fab.on { background: var(--accent); color: #fff; }
.chat-fab-icon { display: flex; }
.chat-fab-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-fab.ping .chat-fab-icon { animation: chat-ping .5s ease-out 2; }
@keyframes chat-ping { 30% { transform: rotate(-12deg) scale(1.12); } 70% { transform: rotate(8deg) scale(1.05); } }
.chat-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff;
  font: 800 10px/16px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--card); }
.chat-fab.on .chat-badge { display: none; }
/* (someone else's new message: a line of it over the dock for a few seconds, then into the count; a click opens the chat) */
.dock-peek { position: fixed; right: calc(18px + var(--safe-r)); bottom: calc(68px + var(--safe-b)); z-index: 51; display: flex; align-items: center; gap: 8px;
  max-width: min(320px, calc(100vw - 36px)); padding: 7px 12px 7px 8px; border: 1px solid var(--line2); border-radius: 14px 14px 4px 14px; background: var(--card);
  color: var(--text); box-shadow: var(--shadow); cursor: pointer; font: 600 13px/1.3 var(--font); text-align: left; animation: peek-in .22s ease-out; }
.dock-peek[hidden] { display: none; }
.dock-peek.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.dock-peek .avatar.small { width: 24px; height: 24px; font-size: 11px; }
.peek-text { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.peek-text b { color: var(--title); }
@keyframes peek-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
/* --- chat: the window --- */
.chat-panel { position: fixed; right: calc(18px + var(--safe-r)); bottom: var(--chat-bottom, calc(84px + var(--safe-b))); z-index: 50; width: min(370px, calc(100vw - 24px));
  height: min(520px, calc(100vh - var(--chat-bottom, calc(84px + var(--safe-b))) - 36px)); height: min(520px, calc(100dvh - var(--chat-bottom, calc(84px + var(--safe-b))) - 36px));
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; animation: pop .15s ease-out; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 16px; background: var(--sunset); color: #fff; flex: none; }
.chat-head .icon-btn { color: #fff; margin-left: auto; }
.chat-title { font-family: var(--show); font-size: 20px; }
.chat-who { font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--bg); }
.chat-empty { margin: auto; font-style: italic; }
.chat-older { align-self: center; margin-bottom: 6px; }
.chat-day { align-self: center; font-size: 11px; color: var(--muted); background: var(--panel2); border-radius: 999px; padding: 1px 10px; margin: 8px 0 4px; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; margin-top: 6px; }
.chat-msg.cont { margin-top: 0; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-name { font-size: 11.5px; font-weight: 800; margin: 0 0 1px 10px; }
.chat-bubble { background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; padding: 6px 11px 5px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.mine .chat-bubble { background: color-mix(in srgb, var(--accent) 16%, var(--card)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 16px 16px 5px 16px; }
.chat-time { font-size: 10.5px; color: var(--faint); margin-left: 8px; float: right; margin-top: 4px; }
.chat-compose { display: flex; gap: 6px; align-items: flex-end; padding: 8px; border-top: 1.5px dashed var(--line); flex: none; background: var(--card); }
.chat-input { flex: 1 1 auto; resize: none; min-height: 38px; max-height: 140px; border-radius: 16px !important; padding: 7px 12px !important; font-size: 14px; }
.chat-compose .btn { flex: none; height: 38px; padding: 0 16px; font-size: 13px; } /* (as tall as the box beside it, as long as it's one line) */
.graph-play.on { background: var(--accent-soft); border-color: var(--outline); }
@media (max-width: 860px), (max-height: 500px) {
  /* (nothing floats over the panes: the bar at the bottom has its own room) */
  :root { --float-w: 0px; --float-h: 0px; }
  .chat-panel { right: calc(8px + var(--safe-r)); left: calc(8px + var(--safe-l)); width: auto; bottom: calc(58px + var(--safe-b)); top: calc(58px + var(--safe-t)); height: auto; }
}

/* Earlier versions (🕘 History) and Settings → Trash */
.history { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 14px; min-height: 240px; }
.history-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.history-row { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; cursor: pointer; color: var(--text); font: inherit; }
.history-row:hover, .history-row.active { border-color: var(--accent); }
.history-detail { min-width: 0; max-height: 60vh; overflow: auto; }
@media (max-width: 860px) { .history { grid-template-columns: 1fr; } }
.trash-list { display: flex; flex-direction: column; gap: 6px; }
.trash-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
/* (the toasts let clicks through to the page; their buttons don't) */
.toast-action { pointer-events: auto; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 0 0 4px; }

/* --- the reader: the story as one text, a tile beside it for where you are --- */
.read-pane { display: flex; flex-direction: column; overflow: hidden; }
/* (what the reader shows, who comes and goes, and Export: at the top of the column beside the text, staying there as it
   scrolls; the text keeps the whole height) */
.rd-toolbar { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 11px 12px 10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-bottom: 1.5px dashed var(--line2); }
.rd-toolbar .rd-export { margin-left: auto; }
.rd-include-cols { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 22px; }
.rd-way-icon { display: inline-flex; justify-content: center; width: 1.3em; vertical-align: -.25em; color: var(--gold); }
.rd-menu { display: none; }
.rd-body { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26%, 330px); }
.rd-scroll { position: relative; overflow: auto; overflow-anchor: none; min-height: 0; background: var(--bg2); }
/* (room under the end: the last event can come up to the reading line too) */
.rd-text { position: relative; max-width: 40em; margin: 0 auto; padding: 28px 28px 70vh; }
.rd-empty { color: var(--muted); font-style: italic; }
.rd-block { position: relative; }
.rd-num { font-family: var(--font); font-size: .45em; font-weight: 800; color: var(--muted); margin-right: .6em; vertical-align: .35em; letter-spacing: .04em; }
.rd-chapter { font-family: var(--show); font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--title); margin: 1.6em 0 .4em; padding-bottom: .2em; border-bottom: 3px solid color-mix(in srgb, var(--c) 55%, transparent); }
.rd-block:first-child .rd-chapter { margin-top: .2em; }
.rd-episode { font-family: var(--show); font-weight: 400; font-size: 26px; color: color-mix(in srgb, var(--c) 60%, var(--title)); margin: 1.4em 0 .4em; }
.rd-event { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; color: var(--muted); text-align: center; margin: 2.2em 0 1em; }
.rd-fleuron { color: color-mix(in srgb, var(--c) 70%, var(--muted)); font-style: normal; }
.rd-meanwhile { font-family: var(--script); font-size: 24px; color: var(--rose-gold); text-align: center; margin-top: 1.4em; }
/* the story's title and summary, at the top of the text */
.rd-story { text-align: center; margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1.5px dashed var(--line2); }
.rd-story-title { font-family: var(--show); font-weight: 400; font-size: 48px; line-height: 1.1; color: var(--title); margin: 0 0 12px; }
.rd-story-summary { font-style: italic; color: var(--muted); text-align: center; position: relative; }
.rd-story-summary > .rd-edit { position: absolute; right: calc(100% + 6px); top: 0; opacity: 0; }
.rd-story-summary:hover > .rd-edit, .rd-story-summary > .rd-edit:focus-visible, .rd-mobile .rd-story-summary > .rd-edit { opacity: 1; }
.rd-mobile .rd-story-summary > .rd-edit { position: static; float: right; }
@media (max-width: 860px), (max-height: 500px) { .rd-story-title { font-size: 36px; } }
.rd-gap { text-align: center; color: var(--faint); font-size: 13px; font-style: italic; margin: 0; }
.rd-gap-btn { font: inherit; color: inherit; }
.rd-gap-btn:hover { color: var(--accent); }
.rd-gap-go { font-style: normal; font-weight: 700; color: var(--accent); }
.rd-prose { font-size: 18px; line-height: 1.8; position: relative; }
.rd-summary { font-style: italic; color: var(--muted); font-size: 16.5px; border-left: 3px solid color-mix(in srgb, var(--c) 45%, transparent); padding: 2px 0 2px 16px; margin: .4em 0 1.2em; }
.rd-entry, .rd-figure { position: relative; margin: 0 0 1.2em; }
.rd-placeholder { color: var(--faint); }
.rd-figure { text-align: center; }
.rd-figure img { max-width: 100%; max-height: 70vh; width: auto; height: auto; border: 6px solid var(--card); box-shadow: var(--soft-shadow); }
.rd-figure figcaption { color: var(--muted); font-size: 13.5px; font-style: italic; margin-top: 4px; }
/* names read as words; pointed at, they show they open a preview */
.rd-text .mention, .rd-stage .mention { background: none; font-weight: inherit; padding: 0; margin: 0; border-radius: 0; }
.rd-text .mention:hover, .rd-text .mention:focus-visible, .rd-stage .mention:hover, .rd-stage .mention:focus-visible { background: none; text-decoration: underline dotted color-mix(in srgb, var(--c) 80%, transparent); text-underline-offset: 3px; }
/* ✎ and the notes count, in the margin, when pointed at */
.rd-tools { position: absolute; right: calc(100% + 6px); top: 2px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; opacity: 0; transition: opacity .15s; }
.rd-entry:hover > .rd-tools, .rd-figure:hover > .rd-tools, .rd-tools:focus-within, .rd-tools:has(.rd-notes) { opacity: 1; }
.rd-notes { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.rd-summary > .rd-edit { position: absolute; right: calc(100% + 6px); top: 0; opacity: 0; }
.rd-summary:hover > .rd-edit, .rd-summary > .rd-edit:focus-visible { opacity: 1; }

/* the tile: an index card, square, a little askew (its card is; what's on it stays straight) */
.rd-aside { border-left: 1.5px dashed var(--line2); background: var(--bg); background-image: radial-gradient(var(--dot) 1.6px, transparent 2px); background-size: 22px 22px; overflow: auto; }
.rd-stage { display: grid; padding: 24px 22px calc(var(--float-h) + 16px); overflow: hidden; }
.rd-slot { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rd-tile, .rd-intro { position: relative; isolation: isolate; padding: 14px 16px 15px; min-width: 0; }
.rd-tile::before, .rd-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: rotate(var(--tilt, 0deg)); background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 4px 5px 0 color-mix(in srgb, var(--c) 28%, var(--line)); }
.rd-tile::after { content: ""; position: absolute; top: -7px; left: 50%; width: 58px; height: 14px; margin-left: -29px; transform: rotate(calc(var(--tilt, 0deg) * -2)); opacity: .6;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 45%, var(--card)) 0 5px, color-mix(in srgb, var(--c) 25%, var(--card)) 5px 10px); }
.rd-tile-chapter::before { background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.rd-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-bottom: 8px; font-size: 12px; }
.rd-crumbs .link-btn { font-size: 12px; text-align: left; color: var(--muted); }
.rd-crumbs .link-btn:hover { color: var(--accent); }
.rd-sep { color: var(--faint); }
.rd-tile-kind { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 65%, var(--muted)); }
.rd-tile-title { font-family: var(--show); font-size: 24px; line-height: 1.15; color: var(--title); margin: 2px 0 8px; overflow-wrap: anywhere; }
.rd-tile-where { font-family: var(--serif); font-style: italic; color: var(--muted); padding: 4px 8px; margin: 0 -8px 8px; background: color-mix(in srgb, var(--c) 9%, transparent); }
.rd-tile-who { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-tile-note { color: var(--muted); font-size: 13px; }
.rd-intro { --tilt: .6deg; }
.rd-intro::before { border-style: dashed; box-shadow: 3px 3px 0 color-mix(in srgb, var(--c) 18%, var(--line)); }
.rd-intro-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rd-way { color: var(--text); font-size: 13.5px; }
.rd-way-note { flex-basis: 100%; font-family: var(--serif); font-style: italic; }
/* following someone: 👁 and their name floating in the upper left corner of the text, staying there as it scrolls (on a
   phone, at the top of the text); their names stand out; their relations' cards */
.rd-follow-float { position: absolute; top: 14px; left: 16px; z-index: 3; display: flex; max-width: min(300px, 40%); }
.rd-follow-float[hidden] { display: none; }
.rd-follow-float .follow-tag { height: 32px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, var(--card)), 0 4px 14px rgba(123, 30, 58, .14); }
.rd-follow { display: flex; margin: 0 0 14px; }
.rd-follow .follow-tag { height: 32px; }
/* the relations that hold from the start: a plain list under the line, one a row */
.rd-start-rels { margin: 0 0 22px; padding: 0 4px; font-family: var(--font); font-size: 13.5px; }
.rd-start-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.rd-start-rel { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.rd-start-rel:last-child { border-bottom: none; }
.rd-start-rel .rd-rel-line { flex: none; align-self: center; }
.rd-start-what { min-width: 0; overflow-wrap: break-word; }
.rd-start-who { font-size: inherit; padding: 0; color: color-mix(in srgb, var(--c) 65%, var(--title)); font-weight: 800; } /* (a pale color made dark enough to read) */
.rd-start-until { color: var(--faint); font-size: 12.5px; }
.mention.rd-followed { background: color-mix(in srgb, var(--c) 28%, transparent); box-shadow: inset 0 -2px 0 var(--c); font-weight: 600; }
.rd-rel-line { display: inline-flex; }
.rd-rel-arrow { color: var(--rose-gold); font-weight: 800; }
.rd-rel-when { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rd-mark-only { padding: 9px 14px 10px; }
.rd-mark-inline { display: flex; margin: 0 0 1em; padding: 6px 12px; border-left: 3px solid color-mix(in srgb, var(--c) 50%, var(--line)); background: color-mix(in srgb, var(--c) 6%, transparent); }
.rd-intro-mark { color: var(--gold); }
.rd-intro-img { display: block; max-width: 100%; max-height: 180px; margin: 10px auto 2px; border: 5px solid var(--card); box-shadow: var(--soft-shadow); }
.rd-intro-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.rd-intro .rd-intro-prose, .rd-intro-inline .rd-intro-prose { font-size: 14.5px; line-height: 1.6; margin-top: 6px; }
.rd-intro-text { font-size: 14px; }
.rd-intro-inline { margin: 0 0 1.2em; padding: 8px 12px; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, var(--line)); background: var(--card); }
.rd-intro-inline > summary { cursor: pointer; list-style: none; }
.rd-intro-inline > summary::-webkit-details-marker { display: none; }
.rd-intro-inline > summary .rd-intro-head::after { content: "▾"; color: var(--faint); margin-left: auto; }
.rd-intro-inline[open] > summary .rd-intro-head::after { content: "▴"; }
/* the steps: the old tile slides out one way as the new one comes in from the other */
/* (like a conveyor: the old one goes all the way out of the box as the new one comes all the way in; never two on top of each other) */
.rd-enter.rd-up { animation: rd-in-up .38s cubic-bezier(.3, .7, .3, 1) both; }
.rd-enter.rd-down { animation: rd-in-down .38s cubic-bezier(.3, .7, .3, 1) both; }
.rd-leave { pointer-events: none; }
.rd-leave.rd-up { animation: rd-out-up .38s cubic-bezier(.3, .7, .3, 1) both; }
.rd-leave.rd-down { animation: rd-out-down .38s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes rd-in-up { from { transform: translateY(calc(100% + 60px)); } }
@keyframes rd-in-down { from { transform: translateY(calc(-100% - 60px)); } }
@keyframes rd-out-up { to { transform: translateY(calc(-100% - 60px)); } }
@keyframes rd-out-down { to { transform: translateY(calc(100% + 60px)); } }
@media (prefers-reduced-motion: reduce) { .rd-slot { animation: none !important; } }
/* a phone: no column beside the text; the tile is pinned at the top of it, introductions fold into the text */
.rd-mobile .rd-body { grid-template-columns: minmax(0, 1fr); }
.rd-mobile .rd-aside { display: none; }
.rd-mobile .rd-stage { position: sticky; top: 0; z-index: 2; padding: 10px 14px 12px; background: linear-gradient(var(--bg2) 75%, transparent); }
.rd-mobile .rd-tile { padding: 8px 12px 9px; }
.rd-mobile .rd-tile-title { font-size: 19px; margin-bottom: 4px; }
.rd-mobile .rd-tile-who, .rd-mobile .rd-tile-note, .rd-mobile .rd-tile-where { display: none; }
.rd-mobile .rd-text { padding: 8px 18px 70vh; }
.rd-mobile .rd-chapter { font-size: 32px; }
.rd-mobile .rd-prose { font-size: 17px; }
/* (a phone: no reader toolbar, its choices behind a round button on the tile's corner) */
.rd-mobile .rd-toolbar { display: none; }
.rd-mobile .rd-menu { display: flex; align-items: center; justify-content: center; position: absolute; top: 18px; right: 20px; z-index: 3; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line2); background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--text); box-shadow: var(--soft-shadow); cursor: pointer; }
.rd-mobile .rd-menu svg { width: 18px; height: 18px; fill: var(--card); stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rd-mobile .rd-tile { padding-right: 52px; }
/* (no pointing on a phone, and no margin: ✎ sits above its text) */
.rd-mobile .rd-tools { position: static; flex-direction: row; justify-content: flex-end; opacity: 1; }
.rd-mobile .rd-summary > .rd-edit { position: static; opacity: 1; float: right; }

/* --- the reader's export as a PDF: a book, printed (or saved as PDF) from the browser, the app hidden meanwhile --- */
.rd-book { display: none; }
@media print {
  @page { margin: 2cm 2.2cm; }
  html, body.rd-printing { height: auto; overflow: visible; background: #fff; }
  body.rd-printing > :not(.rd-book) { display: none !important; }
  /* (always the light theme on paper) */
  .rd-book { display: block; --text: #241018; --muted: #5d4450; --faint: #8a7480; --title: #5a1530; --card: #fff; --line: #e6d4cc; --rose-gold: #9a5a63; --gold: #a87a10;
    color: var(--text); background: #fff; font-family: var(--serif); }
  .rd-book-title { break-after: page; text-align: center; padding-top: 32vh; }
  .rd-book-title h1 { font-family: var(--show); font-weight: 400; font-size: 46pt; color: var(--title); margin: 0; }
  .rd-book-title p { font-family: var(--script); font-size: 24pt; color: var(--rose-gold); margin: 10px 0 0; }
  .rd-book-title .rd-book-summary { max-width: 13cm; margin: 22px auto 0; }
  .rd-book-title .rd-book-summary p { font-family: var(--serif); font-size: 12.5pt; font-style: italic; color: var(--text); margin: 0 0 .6em; }
  .rd-book .rd-b-chapter { break-before: page; }
  .rd-book .rd-chapter { margin-top: 0; font-size: 28pt; }
  .rd-book .rd-episode { font-size: 18pt; }
  .rd-book h2, .rd-book h3, .rd-book h4, .rd-book .rd-mark-inline, .rd-book .rd-meanwhile { break-after: avoid; break-inside: avoid; }
  .rd-book .rd-prose { font-size: 11.5pt; line-height: 1.55; text-align: justify; hyphens: auto; }
  .rd-book .rd-summary { font-size: 11pt; text-align: left; }
  .rd-book .rd-tools, .rd-book .rd-edit { display: none !important; }
  .rd-book .rd-figure, .rd-book .rd-intro-inline { break-inside: avoid; }
  .rd-book .rd-figure img { max-height: 55vh; box-shadow: none; border: 0; }
  .rd-book .mention { background: none; font-weight: inherit; padding: 0; margin: 0; }
  .rd-book a.web-link { color: var(--title); } /* (still a link in the PDF; on paper, a colour that prints) */
  .rd-book .chip { border: 0; background: none; padding: 0; font-weight: 700; }
  .rd-book .rd-intro-inline, .rd-book .rd-mark-inline { background: none; }
  .rd-book .rd-intro-img { box-shadow: none; max-height: 140px; }
}

/* --- consensus: a ring under each text and image (consensus.js) --- */
:root { --cs-like: #2c9f5b; --cs-dislike: #d8434f; --cs-amber: #e0a018; --cs-amber-dark: #b97f0a; }
/* (as tall as the 👍 / 👎 buttons it replaced) */
.cs-ring { width: 24px; height: 24px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; position: relative;
  transition: transform .15s ease-out; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.cs-ring:hover { transform: scale(1.08); }
.cs-ring:active { transform: scale(.95); }
.cs-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* three parts, with small gaps: liked, still to vote, disliked */
.cs-arc { fill: none; stroke-width: 5; stroke-linecap: butt; }
.cs-like { stroke: var(--cs-like); }
.cs-dislike { stroke: var(--cs-dislike); }
.cs-empty { stroke: var(--line2); opacity: .7; }
.cs-ring:hover .cs-empty { opacity: 1; }
.cs-mark { fill: var(--text); opacity: .6; }
/* the badges: ✓ agreed (a green seal), changed since (a pale amber seal, the votes as it is now in it), work in progress (amber stripes, a white bar) */
.cs-badge { stroke: none; }
.cs-badge-agreed { fill: var(--cs-like); }
.cs-seal { fill: var(--cs-like); stroke: var(--cs-like); stroke-width: 1.4; stroke-linejoin: round; }
.cs-seal-changed { fill: color-mix(in srgb, var(--cs-amber) 18%, var(--card)); stroke: color-mix(in srgb, var(--cs-amber) 60%, var(--card)); stroke-width: 1.4; stroke-linejoin: round; }
.cs-votes.small .cs-arc { stroke-width: 3.8; }
.cs-badge-wip { fill: transparent; }
.cs-ring.cs-wip { background: repeating-linear-gradient(45deg, var(--cs-amber) 0 3.5px, var(--cs-amber-dark) 3.5px 7px); }
.cs-glyph { fill: #fff; }
.cs-glyph-line { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* once, for someone who hasn't voted yet, as it comes into view: the pieces draw themselves, and a soft ripple calls */
.cs-hello .cs-arc { stroke-dasharray: 1; animation: cs-draw .5s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.cs-hello::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: cs-ripple 1.1s ease-out .35s 2 both; pointer-events: none; }
@keyframes cs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cs-ripple { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
/* the fan over the ring: 👎 · ✎ · 👍, close round it, each segment tinted in its own colour with its line icon in the
   middle (like green, dislike red, suggest neutral; solid with a white icon: your vote), lifting a little when
   pointed at; and under the ring one caption: how many likes make a consensus, or, while 👍 / 👎 is pointed at, who */
.popover.cs-fan-pop { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; max-height: none; max-width: none; pointer-events: none; animation: none; }
.cs-fan-box { position: relative; width: 190px; display: flex; flex-direction: column; align-items: center; }
.cs-fan { width: 190px; display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(58, 14, 46, .16)) drop-shadow(0 6px 14px rgba(58, 14, 46, .2)); }
.cs-fan-box.side { align-items: flex-start; } /* (round the ring's right side, where there's no room left of it) */
.cs-seg { pointer-events: auto; cursor: pointer; outline: none; transform-box: view-box; animation: cs-fan-in .2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.cs-seg-in { transition: transform .15s ease-out; }
.cs-seg.like { --seg: var(--cs-like); }
.cs-seg.dislike { --seg: var(--cs-dislike); }
.cs-seg.suggest { --seg: var(--muted); }
.cs-seg path { transition: fill .15s, stroke .15s; }
.cs-seg > .cs-seg-in > path { fill: color-mix(in srgb, var(--seg) 12%, var(--card)); stroke: color-mix(in srgb, var(--seg) 42%, var(--card)); stroke-width: 1.6; stroke-linejoin: round; }
.cs-seg-icon { pointer-events: none; fill: none; stroke: color-mix(in srgb, var(--seg) 82%, var(--text)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-seg:not(.disabled):hover > .cs-seg-in > path, .cs-seg.hot > .cs-seg-in > path, .cs-seg:focus-visible > .cs-seg-in > path {
  fill: color-mix(in srgb, var(--seg) 24%, var(--card)); stroke: color-mix(in srgb, var(--seg) 70%, var(--card)); }
.cs-seg:not(.disabled):hover .cs-seg-in, .cs-seg.hot .cs-seg-in, .cs-seg:focus-visible .cs-seg-in { transform: translate(var(--dx), var(--dy)); }
.cs-seg.on > .cs-seg-in > path, .cs-seg.on:hover > .cs-seg-in > path { fill: var(--seg); stroke: var(--seg); }
.cs-seg.on .cs-seg-icon { stroke: #fff; }
/* (✎ Suggest changes: neutral, white-ish with a soft rim and a muted pencil; pointed at, a faint blush) */
.cs-seg.suggest > .cs-seg-in > path { fill: var(--card); stroke: var(--line2); }
.cs-seg.suggest:not(.disabled):hover > .cs-seg-in > path, .cs-seg.suggest.hot > .cs-seg-in > path, .cs-seg.suggest:focus-visible > .cs-seg-in > path { fill: var(--panel2); stroke: color-mix(in srgb, var(--muted) 55%, var(--card)); }
.cs-seg.suggest .cs-seg-icon { stroke: var(--muted); }
.cs-seg.suggest:not(.disabled):hover .cs-seg-icon, .cs-seg.suggest.hot .cs-seg-icon { stroke: var(--text); }
.cs-seg.disabled { cursor: default; opacity: .45; }
@keyframes cs-fan-in { from { transform: scale(.8); opacity: 0; } }
/* (the caption: one card under the ring, its middle under the ring's; round the ring's side, starting where it starts) */
.cs-caption { margin-top: 14px; min-width: 176px; padding: 5px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 4px 14px rgba(58, 14, 46, .12); font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; white-space: nowrap; animation: fade .2s .08s both; }
.cs-fan-box.side .cs-caption { margin-top: 6px; }
.cs-caption.who { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px 9px; text-align: left; font-size: 12.5px; color: var(--text); }
.cs-who-head { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.cs-caption.like .cs-who-head { color: color-mix(in srgb, var(--cs-like) 80%, var(--text)); }
.cs-caption.dislike .cs-who-head { color: color-mix(in srgb, var(--cs-dislike) 80%, var(--text)); }
.cs-who-row { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.cs-who-row.stale > :not(.faint) { opacity: .55; }
.cs-wip-note { max-width: 250px; display: flex; flex-direction: column; gap: 6px; padding: 4px; font-size: 13px; }
.cs-wip-note p { margin: 0; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cs-seg, .cs-caption { animation: none; } .cs-ring, .cs-seg-in { transition: none; } }
/* 👍 / 👎 on a note: one small pill, split in two at a slant */
.vote-pill { display: inline-flex; height: 24px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line2); background: var(--line2); font-size: 12px; vertical-align: middle; }
.vp-half { display: inline-flex; align-items: center; gap: 3px; border: 0; background: var(--card); color: var(--text); font: inherit; font-weight: 700; padding: 0 12px 0 9px; cursor: pointer; }
.vp-half.like { clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); padding-right: 14px; }
.vp-half.dislike { clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); margin-left: -6px; padding-left: 14px; }
/* (the consensus fan's thumbs, in its colours: pointed at, a faint tint of its own; your vote, a stronger one, its count
   in its colour too) */
.vp-half.like { --vp: var(--cs-like); }
.vp-half.dislike { --vp: var(--cs-dislike); }
.vp-half:hover { background: color-mix(in srgb, var(--vp) 10%, var(--card)); }
.vp-half.on { background: color-mix(in srgb, var(--vp) 20%, var(--card)); color: color-mix(in srgb, var(--vp) 75%, var(--text)); }
.vote-pill.static { opacity: .6; }
.vote-pill.static .vp-half { cursor: default; }
.vote-pill.static .vp-half:hover { background: var(--card); }
.vp-icon { display: inline-flex; color: var(--vp); }
.vp-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vp-n { min-width: 1ch; text-align: center; font-variant-numeric: tabular-nums; }
.vp-n.zero { color: var(--faint); font-weight: 600; }
.fb-archive-fold { align-self: flex-start; }
.entry-card.archived { opacity: .72; background: color-mix(in srgb, var(--panel2) 60%, var(--card)); }
.entry-card.archived:hover, .entry-card.archived:focus-within { opacity: 1; }
.archived-tag { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }

/* --- pulling the strip up past the timeline's smallest size: a see-through fill rises over it; at the top, release to expand the workspace --- */
.tl-pull { position: fixed; z-index: 90; pointer-events: none; overflow: hidden; --p: 0; --h: 0px; --zone: 30px; animation: fade .15s ease-out; }
/* the mark to reach, at the top */
.tlp-target { position: absolute; left: 0; right: 0; top: 0; height: var(--zone); display: flex; align-items: center; justify-content: center; z-index: 2;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); opacity: calc(.5 + var(--p) * .5); }
/* the fill, up to the finger, a little stronger as it nears the mark */
.tlp-curtain { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); z-index: 1; transition: height .06s linear;
  background: color-mix(in srgb, var(--accent) calc(14% + var(--p) * 16%), transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-top: 2px solid var(--accent); }
/* the timeline folded away: a half circle hanging from the top of the workspace, pointing down, to pull it back */
.work { position: relative; }
.tl-pulltab { position: absolute; left: 50%; top: 0; z-index: 7; width: 48px; height: 16px; padding: 0; border: 0; border-radius: 0 0 24px 24px; transform: translateX(-50%);
  background: var(--accent); box-shadow: 0 2px 6px rgba(58, 14, 46, .28); cursor: grab; touch-action: none; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px; transition: height .15s ease-out, background .15s; }
.tl-pulltab[hidden] { display: none; }
/* (from the top of the top bar's leopard trim, over it (the trim is the 6 px over the workspace): its foot, grown when
   pointed at too, just above the tabs, which come a little lower while it's there) */
#app.bars-merged .tl-pulltab { top: -6px; }
#app.bars-merged.tl-hidden .graph-toolbar { padding-top: 16px; } /* (the bar under it comes a little lower while it's there) */
.tl-pulltab:hover, .tl-pulltab:focus-visible { height: 20px; background: var(--accent-2); }
.tl-pulltab:active { cursor: grabbing; }
.tlp-arrow.down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #fff; }
.tl-pulltab:hover .tlp-arrow.down { animation: tlp-bob-down 1s ease-in-out infinite; }
@keyframes tlp-bob-down { 50% { transform: translateY(2px); } }
@keyframes tlp-bob { 50% { translate: 0 -2px; } }
.tlp-let { display: none; }
/* reached: it fills the timeline, and says to release */
.tl-pull.armed .tlp-curtain { height: 100%; background: color-mix(in srgb, var(--accent) 42%, transparent); transition: height .2s cubic-bezier(.3, 1.4, .5, 1), background .2s; }
.tl-pull.armed .tlp-target { opacity: 1; color: #fff; border-bottom-color: transparent; }
.tl-pull.armed .tlp-pull { display: none; }
.tl-pull.armed .tlp-let { display: inline; animation: tlp-pop .22s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes tlp-pop { from { transform: scale(.7); opacity: 0; } }
/* released there: up and away (or, short of the mark, it just fades) */
.tl-pull.done { transition: transform .25s ease-in, opacity .25s; transform: translateY(-40%); opacity: 0; }
.tl-pull.gone { transition: opacity .2s; opacity: 0; }
/* the strip's ♥, pulled up: it follows the finger as an ▴ (bobbing), over the fill; at the mark, white, bigger, ringed */
.splitter.pulling { z-index: 91; }
.splitter::after { --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M5 0 10 8H0z' fill='%23fff'/%3E%3C/svg%3E"); }
.splitter.pulling::after { content: ""; top: calc(50% - var(--lift, 0px)); background: var(--accent) var(--tri) center / 10px 8px no-repeat; box-shadow: 0 2px 6px rgba(58, 14, 46, .3);
  animation: tlp-bob 1s ease-in-out infinite; }
.splitter.armed::after { --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M5 0 10 8H0z' fill='%23d6246e'/%3E%3C/svg%3E");
  background-color: #fff; transform: translate(-50%, -52%) scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, #fff 30%, transparent); animation: none;
  transition: top .2s cubic-bezier(.3, 1.8, .5, 1), transform .2s cubic-bezier(.3, 1.8, .5, 1); }
@media (prefers-reduced-motion: reduce) { .tlp-arrow, .tlp-let, .splitter.pulling::after { animation: none; } .tlp-curtain, .splitter.armed::after, .tl-pull.done { transition: none; } }

/* adding images: what they are (their type), then a place to drop them or choose them, and what's chosen */
.upload-dialog { max-width: 520px; }
.upload-body { display: flex; flex-direction: column; gap: 14px; }
.upload-type { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 12%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--gold) 40%, var(--line)); }
.upload-type .type-pick-wrap { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.upload-type select { flex: 1 1 auto; min-width: 0; }
.upload-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; text-align: center; border: 2px dashed var(--line2); border-radius: 18px;
  background: color-mix(in srgb, var(--card) 70%, transparent); transition: background .15s, border-color .15s; }
.upload-zone.over { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone.has-files { padding: 16px 14px; }
.upload-zone-icon { font-size: 30px; line-height: 1; }
.upload-pick { text-decoration: underline; font-weight: 800; color: var(--accent-2); padding: 0; }
.upload-previews { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.upload-previews:empty { display: none; }
.upload-preview { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--line); background: var(--panel2); }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-remove { position: absolute; top: 3px; right: 3px; background: rgba(255, 255, 255, .9); border-radius: 50%; }
.upload-note { color: var(--danger); font-size: 13px; font-weight: 700; }
.upload-note:empty { display: none; }
/* "No entry type": going on without one is the red button */
.untyped-dialog .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 2px 0 color-mix(in srgb, var(--danger) 60%, #000); }
.untyped-dialog .btn.danger:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }