/* ── Site theme system ──────────────────────────────────────────────────
   Swapped at runtime via `data-theme` on <html> (see theme-toggle.js).
   Each page defines the "missioncontrol" look as its own :root defaults
   (the default state, no overrides needed here); the rulesets below
   override the same variable names for the alternate themes. Typography
   stays constant for Paper/Mono — only the color/mood/surface language
   changes. Ink-torial uses its own scoped layouts and typography in
   ink-torial.css, with reversible content composition in ink-torial.js.

   Note: the isometric-city homepage redesign has been shelved for now
   (full working version preserved in git history at commit f1b1d4d —
   `git show f1b1d4d:public/index.html` — to pick back up later). The
   homepage is back to the "Mission Control" two-panel layout that's
   live at phenatse.com. */

:root[data-theme="paper"] {
  --bg:         #f5f0e6;
  --white:      #211d1a;
  --muted:      #6b6459;
  --surface:    rgba(20,15,10,.045);
  --pink:       #c1425a;
  --yellow:     #c98a1f;
  --coral:      #c1512f;
  --cyan:       #2f8f83;
  --lavender:   #7a5cb8;
  --blue:       #3d6ea5;
  --glow-1:     rgba(122,92,184,.08);
  --glow-2:     rgba(47,143,131,.07);
  --glow-3:     rgba(193,66,90,.05);
  --sidebar-bg: rgba(255,250,240,.8);
  --dot:        rgba(20,15,10,.055);
}

:root[data-theme="mono"] {
  --bg:         #050505;
  --white:      #eef0ea;
  --muted:      #7a8078;
  --surface:    rgba(255,255,255,.05);
  --pink:       #39ff7a;
  --yellow:     #ffb000;
  --coral:      #ff5c5c;
  --cyan:       #39ff7a;
  --lavender:   #9df5c2;
  --blue:       #6fe3b4;
  --glow-1:     rgba(57,255,122,.06);
  --glow-2:     rgba(255,176,0,.05);
  --glow-3:     rgba(57,255,122,.04);
  --sidebar-bg: rgba(0,0,0,.72);
  --dot:        rgba(255,255,255,.05);
}

/* Neon's custom cursor + floating orbs + grain don't suit a clean
   editorial or terminal look — switch back to a normal cursor and hide
   the decorative layers for the alternate themes. */
:root[data-theme="paper"] body,
:root[data-theme="mono"]  body { cursor: auto; }
:root[data-theme="paper"] #cursor-dot, :root[data-theme="paper"] #cursor-ring,
:root[data-theme="mono"]  #cursor-dot, :root[data-theme="mono"]  #cursor-ring,
:root[data-theme="paper"] .orb-layer,
:root[data-theme="mono"]  .orb-layer,
:root[data-theme="paper"] #grain,
:root[data-theme="mono"]  #grain { display: none; }

/* ── Theme toggle widget ────────────────────────────────────────────────
   Fixed to the bottom-right corner on every page, above the sidebar and
   everything but modal overlays. It's the one piece of chrome that
   survives every theme untouched in mechanism — only its colors get
   reskinned via the variables above. Styled to invite a click: it
   floats, bobs gently on its own, and reacts with a happy bounce. */
.theme-toggle-widget {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 22px 13px 16px; border-radius: 999px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1.5px solid rgba(199,125,255,.35);
  cursor: pointer; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 0 rgba(199,125,255,.4);
  animation: theme-toggle-bob 3.6s ease-in-out infinite;
  transition: border-color .2s, background .2s, box-shadow .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle-widget:hover {
  border-color: var(--lavender);
  transform: scale(1.07) rotate(-1.5deg);
  box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 28px rgba(199,125,255,.45);
  animation-play-state: paused;
}
.theme-toggle-widget:active { transform: scale(.95) rotate(0deg); }
.theme-toggle-icon {
  width: 21px; height: 21px; flex-shrink: 0; color: var(--lavender);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle-widget:hover .theme-toggle-icon { transform: rotate(1turn) scale(1.15); }
.theme-toggle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.theme-toggle-eyebrow {
  font-family: var(--font-head); font-size: .62rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); opacity: .85;
}
.theme-toggle-name {
  font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
.theme-toggle-swatch {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--lavender), var(--pink), var(--yellow));
  animation: theme-toggle-pulse 2s ease-in-out infinite;
}
.theme-toggle-widget:hover .theme-toggle-swatch { animation: theme-toggle-spin .6s linear; }

@keyframes theme-toggle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes theme-toggle-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(199,125,255,.45); }
  50%      { box-shadow: 0 0 13px rgba(199,125,255,.9); }
}
@keyframes theme-toggle-spin {
  to { transform: rotate(360deg) scale(1.3); }
}

@media (max-width: 520px) {
  .theme-toggle-widget { bottom: 14px; right: 14px; padding: 10px 16px 10px 12px; }
  .theme-toggle-eyebrow { display: none; }
  .theme-toggle-name { max-width: 30vw; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-widget { animation: none; }
  .theme-toggle-swatch { animation: none; box-shadow: 0 0 6px rgba(199,125,255,.5); }
  .theme-toggle-widget:hover { transform: none; }
  .theme-toggle-widget:hover .theme-toggle-icon,
  .theme-toggle-widget:hover .theme-toggle-swatch { animation: none; transform: none; }
}

.welcome-ink-copy, .welcome-emblem, .welcome-edition { display:none; }
html[data-theme="inktorial"] .welcome-original-copy { display:none; }
html[data-theme="inktorial"] .welcome-ink-copy { display:inline; }
html[data-theme="inktorial"] .welcome-emblem, html[data-theme="inktorial"] .welcome-edition { display:block; }
/* Ink-torial invitation only; other editions retain the original welcome. */
html[data-theme="inktorial"] #welcome-overlay { background:var(--bg); color:var(--white); padding:30px 22px; }
html[data-theme="inktorial"] #welcome-overlay::after { background:none; inset:22px; border:1px solid currentColor; opacity:.18; }
html[data-theme="inktorial"] .welcome-inner { width:min(900px,100%); }
html[data-theme="inktorial"] .welcome-eyebrow { color:var(--muted); font-size:10px; letter-spacing:.18em; animation:none; }
html[data-theme="inktorial"] .welcome-emblem { font-size:clamp(65px,12vw,115px); line-height:1; margin:35px 0; color:var(--pink); }
html[data-theme="inktorial"] .welcome-logo { font-size:clamp(42px,8vw,100px); line-height:1.05; letter-spacing:-.05em; color:var(--white); background:none; -webkit-text-fill-color:currentColor; animation:none; filter:none; }
html[data-theme="inktorial"] .welcome-sub { color:var(--muted); font-size:clamp(16px,2vw,22px); line-height:1.6; margin:25px 0; animation:none; }
html[data-theme="inktorial"] .welcome-edition { color:var(--muted); font-size:11px; letter-spacing:.09em; margin-bottom:25px; }
html[data-theme="inktorial"] .welcome-enter { background:var(--white); color:var(--bg); border:1px solid var(--white); border-radius:0; box-shadow:none; padding:18px 28px; min-height:58px; animation:none; }
html[data-theme="inktorial"] .welcome-enter:hover { background:var(--bg); color:var(--white); box-shadow:none; transform:translateY(-3px); }
html[data-theme="inktorial"] .welcome-logo { font-family:Georgia,serif; font-weight:400; }
html[data-theme="inktorial"] .welcome-emblem { font-size:0; width:100px; height:100px; border-radius:50%; background:#22221f; margin:35px auto; box-shadow:inset 25px -8px 0 var(--bg); border:1px solid #22221f; }
@media(prefers-reduced-motion:reduce) { html[data-theme="inktorial"] #welcome-overlay, html[data-theme="inktorial"] .welcome-inner { transition:none; } html[data-theme="inktorial"] #welcome-overlay.exiting .welcome-inner { transform:none; } }
@media(max-height:650px) { html[data-theme="inktorial"] .welcome-emblem { display:none; } html[data-theme="inktorial"] .welcome-sub { margin:15px 0; } }