/* ===================================================================
   Reset & base
=================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:   #ffffff;
  /* Owner 2026-09-25: NO transparent panels. Surface tokens are opaque; content never bleeds through a
     panel. --bg3 stays translucent (it is a subtle hover/overlay tint, not a panel surface). */
  --bg0:  rgb(240, 237, 233);
  --bg1:  rgb(248, 246, 243);
  --bg2:  rgb(255, 255, 255);
  --bg3:  rgba(255, 255, 255, 0.36);
  --line: rgba(175, 170, 163, 0.42);
  --txt:  #1c1814;
  --ink:  #0f0c08;
  --dim:  #6b655d;
  --faint:#a09890;
  --card: rgb(255, 255, 255);
  --blue: #3574c4;
  --amber:#9a6e18;
  --green:#2e7a50;
  --red:  #b83030;
  --purple:#5848a0;
  --pin:  #8a6008;
  --mono: 'Nunito', 'SF Mono', 'Consolas', monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  /* Aliases used by feed/gami CSS that were never defined, so var() fell back to transparent/inherit
     (invisible active time-chip label, tag chips vanishing on hover, missing sparkline bars, wrong UI
     font). Aliased to existing tokens; var() substitutes lazily so these follow the active theme's
     --blue/--amber automatically. (CSS correctness audit 2026-09-22.) */
  --accent: var(--blue);
  --gold:   var(--amber);
  --ui:     var(--sans);
  --page: rgb(255, 255, 255);
  --win-shadow: 0 4px 28px rgba(0,0,0,0.10);
  --win-radius: 12px;
  /* Glass mixin values */
  --glass-bg:     rgb(250, 248, 245);
  --glass-border: rgba(255, 255, 255, 0.80);
  --glass-blur: none;
  --glass-shadow: 0 4px 28px rgba(0,0,0,0.08),
                  inset 0 1px 0 rgba(255,255,255,0.92),
                  inset 0 -1px 0 rgba(0,0,0,0.025);
}

/* ── Dark mode palette ── */
body.dark-mode {
  --bg:   #1e1c1a;
  --bg0:  rgb(28, 26, 24);
  --bg1:  rgb(36, 33, 30);
  --bg2:  rgb(44, 40, 36);
  --bg3:  rgba(52, 48, 44, 0.55);
  --line: rgba(100, 94, 86, 0.55);
  --txt:  #ece8e3;
  --ink:  #f5f2ee;
  --dim:  #b0a8a0;
  --faint:#807870;
  --card: rgb(38, 35, 32);
  --blue: #6aabe8;
  --amber:#daa830;
  --green:#4ab878;
  --red:  #e05858;
  --purple:#8a7ad0;
  --pin:  #daa830;
  --page: rgb(32, 30, 28);
  --win-shadow: 0 4px 28px rgba(0,0,0,0.35);
  --glass-bg:     rgb(30, 28, 26);
  --glass-border: rgba(90, 84, 76, 0.50);
  --glass-shadow: 0 4px 28px rgba(0,0,0,0.25),
                  inset 0 1px 0 rgba(255,255,255,0.06),
                  inset 0 -1px 0 rgba(0,0,0,0.10);
  /* Force native form controls (select dropdowns, date pickers) to dark */
  color-scheme: dark;
}
body.dark-mode { background: #1a1816; color: var(--txt); }
/* ── Dark mode form controls (comprehensive) ── */
body.dark-mode input, body.dark-mode textarea, body.dark-mode select {
  background: var(--bg); color: var(--txt); border-color: var(--line);
  color-scheme: dark;
}
body.dark-mode select option {
  background: #2a2826; color: var(--txt);
}
body.dark-mode select optgroup {
  background: #222018; color: var(--dim);
}
/* Checkboxes and radio buttons */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
  accent-color: var(--blue);
}
/* Number input spinners */
body.dark-mode input[type="number"] {
  background: var(--bg); color: var(--txt);
}
/* Modal/panel backgrounds */
body.dark-mode #forge-panel { background: #242220; }
body.dark-mode .forge-close:hover { background: rgba(255,255,255,0.08); }
body.dark-mode .forge-pbar-wrap { background: rgba(255,255,255,0.08); }
body.dark-mode .forge-select, body.dark-mode .forge-input, body.dark-mode .forge-cw-input {
  background: #2a2826; color: var(--txt); border-color: var(--line);
}
body.dark-mode .forge-cw-dropdown { background: #2a2826; }
/* Auth modals, preference panels, any inline-styled var(--bg) elements */
body.dark-mode [style*="var(--bg)"] { color: var(--txt); }
/* Scrollbar in dark mode */
body.dark-mode * { scrollbar-color: rgba(255,255,255,0.15) transparent; }
/* Segment delete modal (has inline background:#fff) */
body.dark-mode #seg-delete-modal { background: #2a2826 !important; color: var(--txt); }
body.dark-mode #seg-delete-modal button { color: var(--txt); }
/* Save-Vocab-As modal */
body.dark-mode #sva-modal { background: #2a2826 !important; }
/* Keyboard shortcuts panel */
body.dark-mode #kbd-panel > div { background: #2a2826 !important; }
/* Entry card tooltips, context menus, popovers */
body.dark-mode .ctx-menu, body.dark-mode .popover { background: #2a2826; }
/* Ensure text on buttons is visible */
body.dark-mode button { color: var(--dim); }
body.dark-mode button:hover { color: var(--txt); }
/* Left column panels, vocabulary panel */
body.dark-mode .left-col-win { border-color: var(--line); }
body.dark-mode .lcw-header { color: var(--dim); }
/* Right column wordbank items */
body.dark-mode .suggest-item .si-left  { color: var(--blue); }
body.dark-mode .suggest-item .si-right { color: var(--amber); }
body.dark-mode .suggest-item .si-arr   { color: var(--faint); }
/* Preferences panel */
body.dark-mode #prefs-panel {
  background: #2a2826; border-color: var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
body.dark-mode .prefs-ize-group { border-color: var(--line); }
body.dark-mode .prefs-ize-btn { border-color: var(--line); color: var(--dim); }
body.dark-mode .prefs-ize-btn:hover { background: rgba(255,255,255,0.06); color: var(--txt); }
body.dark-mode .prefs-ize-btn.active {
  background: rgba(106,171,232,0.18); color: var(--blue);
}
body.dark-mode #prefs-font-select {
  background: #222018 !important; color: var(--txt) !important;
}
body.dark-mode .proj-tab {
  background: rgba(40,38,36,0.7); border-color: var(--line); color: var(--dim);
}
body.dark-mode .proj-tab:hover { background: rgba(50,48,44,0.8); color: var(--txt); }
body.dark-mode .proj-tab.active {
  background: rgba(60,58,54,0.9); color: var(--txt); border-color: var(--blue);
}
/* Composition bar buttons */
body.dark-mode .comp-bar-btn { color: var(--dim); }
body.dark-mode .comp-bar-btn:hover { color: var(--txt); }
/* Segment cards in segment panel */
body.dark-mode .seg-card { background: rgba(255,255,255,0.04); border-color: var(--line); }
body.dark-mode .seg-card:hover { background: rgba(255,255,255,0.07); }
body.dark-mode .seg-card.seg-active { border-color: var(--blue); }
body.dark-mode .entry-card { background: rgba(255,255,255,0.04); border-color: var(--line); }
body.dark-mode .entry-card:hover { background: rgba(255,255,255,0.08); }
body.dark-mode .suggest-item { background: rgba(255,255,255,0.06); border-color: var(--line); }
body.dark-mode .feed-post { background: var(--card); }
body.dark-mode .fp-replies { background: rgba(0,0,0,0.18); border-top-color: rgba(255,255,255,0.06); }

body.dark-mode .fp-mod-bar { background: rgba(0,0,0,0.12); }
body.dark-mode #feed-tabs { background: var(--glass-bg); }
body.dark-mode #pp-tabs { background: rgba(30,28,26,0.6); }
body.dark-mode .btn, body.dark-mode button { color: var(--dim); }
/* ── Dark mode: segment boxes (studio rows) ── */
body.dark-mode .seg-box {
  background: rgba(255,255,255,0.05);
  border-color: var(--line);
}
body.dark-mode .seg-box:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(106,171,232,0.45);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
body.dark-mode .seg-box.active {
  background: rgba(53,116,196,0.12);
  border-color: rgba(106,171,232,0.65);
  box-shadow: 0 2px 16px rgba(53,116,196,0.2);  /* left-edge inset highlight removed (Hadrian 2026-06-18) */
}
body.dark-mode .seg-box.seg-branch {
  border-left-color: rgba(138,122,208,0.5);
  background: rgba(138,122,208,0.08);
}
body.dark-mode .seg-box.active.seg-branch {
  border-left-color: rgba(138,122,208,0.7);
}
body.dark-mode .seg-box.pending-delete {
  border-color: rgba(224,88,88,0.6);
  background: rgba(224,88,88,0.1);
  box-shadow: 0 0 0 3px rgba(224,88,88,0.2), 0 4px 20px rgba(0,0,0,0.3);
}
/* ── Dark mode: composition text segment colors ── */
body.dark-mode #comp-text .seg-done { color: #5cc48a; }
body.dark-mode #comp-text .seg-empty { color: rgba(180,174,166,0.5); }
body.dark-mode #comp-text .seg-empty-inline { color: rgba(180,174,166,0.45); }
body.dark-mode #comp-text .seg-gap { opacity: 0.85; }
body.dark-mode #comp-text .comp-sep { color: rgba(180,174,166,0.4); }
body.dark-mode #comp-text .seg-active {
  background: rgba(106,171,232,0.20);
  box-shadow: inset 0 -2px 0 rgba(106,171,232,0.4);
}
body.dark-mode #comp-text .seg-active.suggest-edge-outer-left  { background: linear-gradient(to left,  rgba(106,171,232,0.04) 30%, rgba(106,171,232,0.12) 100%); }
body.dark-mode #comp-text .seg-active.suggest-edge-inner-left  { background: linear-gradient(to right, rgba(106,171,232,0.04) 30%, rgba(106,171,232,0.12) 100%); }
body.dark-mode #comp-text .seg-active.suggest-edge-inner-right { background: linear-gradient(to left,  rgba(106,171,232,0.04) 30%, rgba(106,171,232,0.12) 100%); }
body.dark-mode #comp-text .seg-active.suggest-edge-outer-right { background: linear-gradient(to right, rgba(106,171,232,0.04) 30%, rgba(106,171,232,0.12) 100%); }
/* ── Dark mode: entry card pinned state ── */
body.dark-mode .entry-card.pinned {
  border-color: rgba(218,168,48,0.35);
  background: rgba(218,168,48,0.08);
}
body.dark-mode .entry-card.pinned:hover { border-color: rgba(218,168,48,0.55); }
body.dark-mode .entry-card.pinned.selected { border-color: var(--pin); background: rgba(218,168,48,0.14); }

html, body { height: 100%; overflow: hidden; }

/* ── Legibility on glass (light mode only) ── */
/* White halo lifts text off frosted panel  -  disabled in dark mode where it causes blur */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* text-shadow disabled for performance  -  39K element DOM */
/* Heavier base weight for mono text */
.cell-char,
.cell-spacer,
#comp-text,
.entry-pair,
.lcw-title,
.segs-panel-title,
.panel-title,
.op-label,
.section-label,
.tool-window-title {
  font-weight: 600;
}
/* Main body text */
body,
.entry-note,
.op-label,
.radio-row label,
.suggest-item,
.ph-item,
.ctx-item {
  font-weight: 600;
}
/* Accent labels  -  slightly bolder */
header h1,
.lcw-title,
.segs-panel-title,
.panel-title {
  font-weight: 700;
  letter-spacing: 0.20em;
}
body:not(.dark-mode) header h1,
body:not(.dark-mode) .lcw-title,
body:not(.dark-mode) .segs-panel-title,
body:not(.dark-mode) .panel-title {
  text-shadow: 0 1px 4px rgba(255,255,255,0.95),
               0 0   8px rgba(255,255,255,0.70),
               0 1px 1px rgba(0,0,0,0.10);
}

body {
  font-family: var(--sans);
  color: var(--txt);
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background: #d4cfc7;
}
/* Subtle warm tint over the video to unify brightness */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(245, 242, 238, 0.18);
  z-index: 0;
  pointer-events: none;
}

/* "Dao-load…" animated loader (owner 2026-09-20): use <span class="dao-load">Dao-load</span>; the
   trailing dots loop . .. ... continuously. The same keyframe drives the graffiti field placeholder. */
.dao-load::after {
  content: '.';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dao-dots 1.2s steps(3, end) infinite;
}
@keyframes dao-dots {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
}

/* Inline icon (emoji->icon pass 2026-09-24). Sized to the control's font-size (1em) so an icon drops
   in where an emoji glyph was, inheriting color via currentColor. Matches the existing inline SVGs. */
.ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Theme colour (owner 2026-09-28) ─────────────────────────────────────────────────────────────
   The user's own theme (Setup > "Tint nit", stored server-side) arrives as --user-theme /
   --user-theme-dark on <html> (js/10e-utils-tabs.js _palApplyTheme). Declared on BODY so that with no
   theme chosen it falls back to the active Skiniks accent (body.accent-*). Every single-accent highlight
   (selected tab/space/project, Add/Stir/Post buttons, dividers, avatar rings, the Wordbank accent...) reads
   --theme; the two palindrome-cell colours (--blue left / --amber right) are NOT the theme.
   --author / --author-dark are set per post/name by _palAuthorStyle: another user's own colour. */
body {
  --theme: var(--user-theme, var(--accent));
  --theme-soft: color-mix(in srgb, var(--theme) 14%, transparent);
  --theme-line: color-mix(in srgb, var(--theme) 45%, transparent);
}
body.dark-mode { --theme: var(--user-theme-dark, var(--accent)); }