/* ════════════════════════════════════════════════════════════════════
   SymposiON — Home Revamp · PROTOTYPE HARNESS
   The dark control chrome that hosts the live home screen. This is NOT
   part of the design — it's the comparison shell (direction switcher,
   theme picker, language, tweaks).
   ════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0c0d10;
  font-family: 'Alegreya Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Global keyboard focus (WCAG 2.4.7) ──────────────────────────────
   Many controls use `outline:none` with only a faint border swap, which
   leaves keyboard users without a visible focus indicator. Restore a
   clear, theme-aware ring for any focusable element navigated by keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--terra-dk, #8a5a18);
  outline-offset: 2px;
}
/* search field (defined in css/system.css) currently has no focus state */
.sys-search__in:focus-visible {
  outline: 2px solid var(--terra-dk, #8a5a18);
  outline-offset: 2px;
}

/* ── Harness bar ─────────────────────────────────────────────────── */
.harness {
  /* Retired: the dev "themes/tweaks" top bar is hidden in production. Theme +
     colour selection now lives in the main nav (next to Ἀγορά). The node still
     builds for admins (so window.symApplyTheme stays defined) but never shows. */
  display: none !important;
  position: sticky; top: 0; z-index: 9000;
  align-items: center; gap: 18px;
  height: 54px; padding: 0 16px;
  background: linear-gradient(#16181d, #101216);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4);
  color: #cdd2da;
  font-size: 13px;
}
.harness__brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: 0.02em; color: #eef1f5; white-space: nowrap;
}
.harness__brand svg { width: 20px; height: 20px; color: #c9a44a; }
.harness__brand b { color: #fff; font-weight: 700; }
.harness__brand small {
  color: #6b7280; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 9.5px; padding-left: 9px; margin-left: 3px;
  border-left: 1px solid #2a2e36;
}
.harness__spacer { flex: 1; }

/* ── Direction segmented switcher ────────────────────────────────── */
.dirswitch {
  display: flex; align-items: stretch; gap: 3px;
  background: #0a0b0e; border: 1px solid #23262e; border-radius: 11px; padding: 3px;
}
.dirswitch__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 14px 6px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; color: #9aa1ac; font-family: inherit; line-height: 1.1;
  transition: background .18s, color .18s;
}
.dirswitch__btn:hover { color: #d7dce3; }
.dirswitch__btn .k { font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; }
.dirswitch__btn .n { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
.dirswitch__btn.active {
  background: linear-gradient(#2a2e37, #20242c); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4);
}
.dirswitch__btn.active .k { color: #c9a44a; opacity: 1; }

/* ── Generic harness controls ────────────────────────────────────── */
.hctl {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  background: #181b21; border: 1px solid #272b33; border-radius: 8px;
  color: #c4cad2; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s; white-space: nowrap;
}
.hctl:hover { border-color: #3a404a; color: #eef1f5; }
.hctl.on { border-color: #c9a44a; color: #f1e2bd; background: #221d12; }
.hctl__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); }
.hctl svg { width: 15px; height: 15px; }

.hlang { display: inline-flex; background: #0a0b0e; border: 1px solid #272b33; border-radius: 8px; overflow: hidden; }
.hlang button {
  border: 0; background: transparent; color: #7e8590; font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 7px 11px; cursor: pointer;
}
.hlang button.active { background: #2a2e37; color: #fff; }

/* ── Theme picker popover ────────────────────────────────────────── */
.hpop { position: relative; }
.theme-menu {
  /* Viewport-anchored (fixed), not button-anchored, so the wide theme gallery
     can never run off the LEFT edge (its left column was getting clipped). The
     `top` is set from the trigger button's position in js/app.js when it opens;
     84px is the fallback for the deep-link (?menu=themes) open. */
  position: fixed; top: 84px; right: 14px;
  width: max-content; max-width: min(1100px, 94vw); max-height: calc(100vh - 100px); overflow: auto;
  background: #14161b; border: 1px solid #2a2e36; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6); padding: 16px 18px; z-index: 9500;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.theme-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.theme-menu__hd {
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #6b7280; padding: 2px 4px 12px; font-weight: 600;
}
/* horizontal "window": each theme group is its own column, all visible at once (no scroll) */
.theme-menu__cols { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; row-gap: 16px; }
.theme-menu__col { display: flex; flex-direction: column; min-width: 146px; }
.theme-menu__grid { display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; }
.theme-menu__grid--two { grid-template-columns: 1fr 1fr; }
.theme-menu__col:has(.theme-menu__grid--two) { min-width: 300px; }
.theme-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px;
  border: 1px solid transparent; background: #1b1e24; cursor: pointer; text-align: left;
  color: #cdd2da; font-family: inherit; transition: border-color .14s, background .14s; position: relative;
}
.theme-opt:hover { background: #20242b; border-color: #343a44; }
.theme-opt.active { border-color: #c9a44a; background: #221d12; }
.theme-opt__sw { width: 19px; height: 19px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.theme-opt__nm { font-size: 11.5px; font-weight: 600; line-height: 1.12; }
.theme-opt__ds { display: none; }
.theme-opt br { display: none; }
.theme-menu__sec { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #5d636d; padding: 0 4px 6px; font-weight: 600; min-height: 13px; }
.theme-menu__sec--cursor { padding-top: 12px; margin-top: 12px; border-top: 1px solid #23262e; }

/* ── Stage that holds the live home screen ───────────────────────── */
.stage { background: var(--sym-bg, #f7f3ea); min-height: calc(100vh - 54px); min-height: calc(100dvh - 54px); transition: background .35s; }
#sym-home { position: relative; }

/* ── Tweaks panel ────────────────────────────────────────────────── */
.tweaks {
  position: fixed; top: 66px; right: 14px; z-index: 9400; width: 252px;
  background: #14161b; border: 1px solid #2a2e36; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); color: #cdd2da; overflow: hidden;
  opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.tweaks.open { opacity: 1; transform: none; pointer-events: auto; }
.tweaks__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #23262e;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #eef1f5;
}
.tweaks__hd button { border: 0; background: transparent; color: #757b86; cursor: pointer; font-size: 16px; line-height: 1; }
.tweaks__body { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.tweak { display: flex; flex-direction: column; gap: 7px; }
.tweak__lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a9099; font-weight: 600; }
.seg { display: flex; background: #0a0b0e; border: 1px solid #23262e; border-radius: 8px; padding: 3px; gap: 3px; }
.seg button {
  flex: 1; border: 0; background: transparent; color: #9aa1ac; font-family: inherit;
  font-size: 11px; font-weight: 600; padding: 6px 4px; border-radius: 6px; cursor: pointer; transition: .14s;
}
.seg button.active { background: #2a2e37; color: #fff; }

@media (max-width: 1024px) {
  .dirswitch__btn .k { display: none; }
  .harness__brand small { display: none; }
}
@media (max-width: 720px) {
  .harness { gap: 10px; overflow-x: auto; }
  .tweaks { display: none; }
}

/* ── Tweaks: wrapping segmented (cursor picker) ── */
.seg--wrap { flex-wrap: wrap; }
.seg--wrap button { flex: 1 1 44%; }

/* ── Theme picker: locked / unlockable ── */
.theme-opt { position: relative; }
.theme-opt--locked .theme-opt__sw { filter: grayscale(.4) brightness(.92); }
.theme-opt--locked .theme-opt__nm { color: #aeb4bd; }
.theme-opt__lock { position: absolute; right: 7px; top: 7px; font-size: 10px; opacity: .7; }
.theme-opt.unlocking { border-color: #e8c766; box-shadow: 0 0 0 1px #e8c766, 0 0 18px rgba(232,199,102,.5); }
.theme-opt__price { position: absolute; right: 7px; top: 7px; font-size: 9px; font-weight: 700; letter-spacing: .02em; color: #e0b24c; background: rgba(224,178,76,.12); border: 1px solid rgba(224,178,76,.4); border-radius: 999px; padding: 1px 6px; }
.theme-opt--locked .theme-opt__sw { filter: grayscale(.4) brightness(.92); }
.theme-opt.shake { animation: theme-shake .42s; }
@keyframes theme-shake { 0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ════════════════════════════════════════════════════════════════════
   REIMAGINED CURSOR — accent ring + themed glyph (laurel / stylus / owl)
   ════════════════════════════════════════════════════════════════════ */
body.symc-on .stage, body.symc-on .stage * { cursor: none !important; }
#symc-ring, #symc-glyph { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 100000; opacity: 0; }
body.symc-show #symc-ring, body.symc-show #symc-glyph { opacity: 1; }
/* While a Ver1 game overlay is open, the custom stage cursor (z-index 100000)
   would float over the game and the native pointer would be hidden, making
   in-game controls unusable. Suppress the custom cursor + mouse-FX trail and
   restore the native cursor for the duration of the game. */
body.syn-game-open #symc-ring,
body.syn-game-open #symc-glyph,
body.syn-game-open #sym-mousefx { display: none !important; }
body.syn-game-open.symc-on .stage,
body.syn-game-open.symc-on .stage * { cursor: auto !important; }
.game-overlay, .game-overlay * { cursor: auto; }
#symc-ring { transition: opacity .25s; }
#symc-ring .rc { display: block; width: 38px; height: 38px; margin: -19px 0 0 -19px; color: color-mix(in srgb, var(--terra) 62%, transparent); transition: transform .2s; }
#symc-ring .rc svg { display: block; width: 100%; height: 100%; }
/* Hover feedback = the ring grows + takes the accent colour. No box fill:
   `.rc` is a square 38×38 element (no border-radius), so a background here
   painted a square behind the circular cursor over any interactive element. */
#symc-ring.hot .rc { transform: scale(1.7); color: var(--terra); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
#symc-glyph { color: var(--terra); transition: opacity .25s; }
#symc-glyph svg { position: absolute; width: 22px; height: 22px; left: -11px; top: -11px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); transition: transform .2s; }
#symc-ring.hot ~ #symc-glyph svg { transform: scale(.78) rotate(-8deg); }

/* ── Theme panel: cursor picker ── */
.theme-menu__cursors { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-menu__cursors .cursor-opt { flex: 0 0 auto; }
.cursor-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; border: 1px solid transparent; background: #1b1e24; cursor: pointer; color: #cdd2da; font-family: inherit; text-align: left; }
.cursor-opt:hover { background: #20242b; border-color: #343a44; }
.cursor-opt.active { border-color: #c9a44a; background: #221d12; }
.cursor-opt__gl { width: 20px; height: 20px; flex: none; color: #c9a44a; display: flex; align-items: center; justify-content: center; }
.cursor-opt__gl svg { width: 100%; height: 100%; }
.cursor-opt__gl--sys { font-size: 14px; }
.cursor-opt__nm { font-size: 11.5px; font-weight: 600; }
.cursor-opt { position: relative; }
.cursor-opt.locked .cursor-opt__nm { color: #9aa0aa; }
.cursor-opt__price { font-size: 8px; font-weight: 700; color: #e0b24c; background: rgba(224,178,76,.12); border: 1px solid rgba(224,178,76,.4); border-radius: 999px; padding: 0 4px; }
.cursor-opt.premium { border-color: rgba(224,178,76,.5); }
.cursor-opt.premium .cursor-opt__gl { color: #e8c766; }
.cursor-opt.shake { animation: theme-shake .42s; }

/* SymLoader — branded loading overlay */
.sym-loader { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; background: color-mix(in srgb, #0a0a0c 62%, transparent); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sym-loader.on { opacity: 1; pointer-events: auto; }
.sym-loader__box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sym-loader__mark { width: 60px; height: 60px; color: #f1e9d6; animation: sym-spin 1.1s cubic-bezier(.5,.1,.5,.9) infinite; }
.sym-loader__svg { width: 100%; height: 100%; }
.sym-loader__txt { font-family: var(--disp,'Oswald',sans-serif); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #cdd2da; }
@keyframes sym-spin { to { transform: rotate(360deg); } }

/* ── Theme menu: seasonal badges ── */
.theme-menu__sec { display: flex; align-items: center; gap: 8px; }
.theme-menu__now { margin-left: auto; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #e0b24c; font-weight: 700; }
.theme-opt__now { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #e0b24c; box-shadow: 0 0 8px #e0b24c; }

/* ── Seasonal effects (GSAP-positioned; CSS fallback for --css) ── */
.season-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 56; }
.season-p { position: absolute; top: 0; left: 0; line-height: 1; will-change: transform; }
.season-p--css { top: -6%; opacity: 0; animation: season-fall var(--dur,10s) linear var(--delay,0s) infinite; }
@keyframes season-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .85; } 92% { opacity: .85; }
  100% { transform: translate3d(var(--drift,20px), 110vh, 0) rotate(var(--rot,200deg)); opacity: 0; }
}
.season-fx--christmas .season-p { color: #cfe6ff; text-shadow: 0 0 6px rgba(255,255,255,.6); }
.season-fx--carnival .season-p { color: #E3BB4B; }
.season-fx--carnival .season-p:nth-child(3n) { color: #D4499A; }
.season-fx--carnival .season-p:nth-child(3n+1) { color: #5E73D6; }
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } }
#cosmetic-fx { z-index: 54; }
#throw-fx { z-index: 99998; }
#throw-fx .throw-p { will-change: transform, opacity; text-shadow: 0 0 8px currentColor; }

/* circle cursor: hide glyph, keep ring */
body.symc-ringonly #symc-glyph { display: none; }
body.symc-noshape #symc-ring { display: none; }
body.symc-noicon #symc-glyph { display: none; }
#symc-glyph svg { color: var(--terra); }
body.symc-season #symc-ring .rc { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════
   THEMED SCROLLBARS — one look, everywhere
   ────────────────────────────────────────────────────────────────────
   Every scrollable region (shell, game overlays, theory panels, level
   pickers) used the raw OS scrollbar, which reads as a foreign grey slab
   on the brand surfaces. These rules key the bar to the ACTIVE theme's
   tokens, so it flips with the palette exactly like the rest of the UI.
   Fallbacks keep it sane before a theme class lands on <body>.
   ════════════════════════════════════════════════════════════════════ */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sym-terra, #C5572F) 46%, transparent) transparent;
}
body, body * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sym-terra, #C5572F) 46%, transparent) transparent;
}

/* WebKit / Blink */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--sym-fg, #1E1810) 5%, transparent);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sym-terra, #C5572F) 42%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background .18s;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--sym-terra, #C5572F) 74%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Compact variant for dense inner panels (level rails, lesson chapter nav) */
.sym-scroll-slim { scrollbar-width: thin; }
.sym-scroll-slim::-webkit-scrollbar { width: 8px; height: 8px; }
.sym-scroll-slim::-webkit-scrollbar-thumb { border-width: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   READING-THEME SWITCHER (js/study-theme.js)
   Top-right of every Θεωρία / μελέτη panel: ☀ light · ☾ dark · ◐ site.
   Theme-token driven, so it reads correctly on whichever surface it is
   currently sitting on.
   ══════════════════════════════════════════════════════════════════════ */
.sym-stheme {
  position: fixed; top: 18px; right: 72px; z-index: 12;
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sym-bg-panel, #fff) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--sym-fg, #1E1810) 14%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.45);
}
.sym-stheme--inline { position: static; }
.sym-stheme__b {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--sym-fg-muted, #8C7F6B);
  font-size: 14px; line-height: 1; transition: .16s;
}
.sym-stheme__b:hover { color: var(--sym-fg, #1E1810); background: color-mix(in srgb, var(--sym-fg, #1E1810) 7%, transparent); }
.sym-stheme__b.on {
  background: var(--sym-terra-dk, #9C3F1F); color: #fff;
  box-shadow: 0 3px 10px -4px var(--sym-terra, #C5572F);
}
@media (max-width: 640px) {
  .sym-stheme { top: 12px; right: 58px; padding: 2px; }
  .sym-stheme__b { width: 27px; height: 27px; font-size: 13px; }
}