/* ─────────────────────────────────────────────────────────────────────────────
   ALYCE · Shared theme  (Alice Blue palette)
   Loaded on every page. Pages reference these tokens instead of hard-coded
   colours, so switching <html data-theme="light|dark"> re-themes the app.
   The choice is stored in localStorage('alyce_theme') by alyce-theme.js.
───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');

/* ── Dark (default) — deep navy, Alice Blue accents ── */
:root {
  color-scheme: dark;

  --bg:             #0B1622;
  --bg-rgb:         11, 22, 34;
  --bg-deep:        #07101A;
  --surface:        #111F2E;
  --surface-rgb:    17, 31, 46;
  --surface-2:      #172839;
  --surface-sunken: #0E1A27;
  --border:         #1F3447;
  --line-strong:    #2B465E;

  --text:           #E8F2FB;
  --text-rgb:       232, 242, 251;
  --text-2:         #C3D5E6;
  --text-muted:     #8FA6BC;
  --muted-rgb:      143, 166, 188;
  --text-faint:     #5F7890;

  --accent:         #8CC1EE;   /* Alice Blue, deepened for contrast */
  --accent-rgb:     140, 193, 238;
  --accent-strong:  #5E9FD8;
  --accent-bright:  #B9DBF7;
  --on-accent:      #0B1622;

  --ink-rgb:        255, 255, 255;   /* subtle overlays / hairlines */

  --green:  #4ADE80;  --green-soft:  #86EFAC;
  --red:    #F87171;  --red-strong:  #DC2626;  --red-soft: #FCA5A5;
  --orange: #FB923C;  --orange-soft: #FDBA74;
  --amber:  #FBBF24;  --amber-soft:  #FCD34D;
  --blue:   #60A5FA;  --blue-soft:   #93C5FD;
  --purple-soft: #D8B4FE;
  --pink-soft:   #F9A8D4;
  --teal-soft:   #5EEAD4;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --radius: 12px;

  --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
}

/* ── Light — Alice Blue canvas, white surfaces, navy ink ── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:             #F0F8FF;   /* Alice Blue */
  --bg-rgb:         240, 248, 255;
  --bg-deep:        #E3EFFA;
  --surface:        #FFFFFF;
  --surface-rgb:    255, 255, 255;
  --surface-2:      #F6FAFE;
  --surface-sunken: #E9F2FB;
  --border:         #D5E3F0;
  --line-strong:    #A9C0D6;

  --text:           #0F2438;
  --text-rgb:       15, 36, 56;
  --text-2:         #2A4560;
  --text-muted:     #587089;
  --muted-rgb:      88, 112, 137;
  --text-faint:     #8499AE;

  --accent:         #2F6DAE;
  --accent-rgb:     47, 109, 174;
  --accent-strong:  #22578F;
  --accent-bright:  #3F83C8;
  --on-accent:      #FFFFFF;

  --ink-rgb:        15, 36, 56;

  --green:  #16A34A;  --green-soft:  #15803D;
  --red:    #DC2626;  --red-strong:  #B91C1C;  --red-soft: #B91C1C;
  --orange: #EA580C;  --orange-soft: #C2410C;
  --amber:  #D97706;  --amber-soft:  #B45309;
  --blue:   #2563EB;  --blue-soft:   #1D4ED8;
  --purple-soft: #7E22CE;
  --pink-soft:   #BE185D;
  --teal-soft:   #0F766E;

  --shadow-sm: 0 1px 2px rgba(15,36,56,.06);
  --shadow-md: 0 10px 30px rgba(15,36,56,.08);
}

/* ── Anarchy — the original ALYCE look: warm black, gold, anarchy A ── */
:root[data-theme="anarchy"] {
  color-scheme: dark;

  --bg:             #0E0D0B;
  --bg-rgb:         14, 13, 11;
  --bg-deep:        #0C0A08;
  --surface:        #181614;
  --surface-rgb:    24, 22, 20;
  --surface-2:      #1E1C17;
  --surface-sunken: #121110;
  --border:         #3A3020;
  --line-strong:    #4A4030;

  --text:           #E8E0D0;
  --text-rgb:       232, 224, 208;
  --text-2:         #C8C0B0;
  --text-muted:     #9A8F80;
  --muted-rgb:      154, 143, 128;
  --text-faint:     #6B6455;

  --accent:         #C9A227;
  --accent-rgb:     201, 162, 39;
  --accent-strong:  #A07D1A;
  --accent-bright:  #FFD700;
  --on-accent:      #0E0D0B;

  --ink-rgb:        255, 255, 255;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
}

/* ── App-wide polish ── */
html { background: var(--bg); }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.alyce-theme-anim, html.alyce-theme-anim * {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease, fill .2s ease, stroke .2s ease !important;
}
::selection { background: rgba(var(--accent-rgb), .28); color: var(--text); }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .7); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; border: 3px solid transparent; }

input, select, textarea { color-scheme: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ── Theme picker (rendered by alyce-theme.js into #alyce-theme-picker) ── */
.alyce-theme-picker {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 9000;
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}
.alyce-theme-picker button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  font: 500 12.5px/1 var(--font-sans);
  transition: background .15s, color .15s;
}
.alyce-theme-picker button:hover { color: var(--text); }
.alyce-theme-picker button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.alyce-theme-picker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .alyce-theme-picker { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .alyce-theme-picker button { padding: 7px 9px; }
  .alyce-theme-picker button span { display: none; }
  .alyce-theme-picker button[aria-checked="true"] span { display: inline; }
}
@media print { .alyce-theme-picker { display: none; } }

/* ── Quick-access sidebar (rendered by alyce-theme.js → alyceNav.mount) ── */
:root { --alyce-nav-w: 248px; }
:root.alyce-nav-collapsed { --alyce-nav-w: 68px; }
#alyce-nav, .an-burger, .an-scrim { display: none; }

#alyce-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--alyce-nav-w); z-index: 45;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  font-family: var(--font-sans);
  transition: width .2s ease;
}
.an-brand { display: flex; align-items: center; gap: 10px; padding: 16px 20px; text-decoration: none; flex-shrink: 0; }
.an-brand .an-text { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 2.5px; color: var(--text); }
.an-list { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.an-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding: 14px 12px 6px; white-space: nowrap; }
.an-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.an-item:hover { background: rgba(var(--ink-rgb), .06); color: var(--text); }
.an-item.is-active { background: rgba(var(--accent-rgb), .14); color: var(--text); }
.an-ico { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); }
.an-item:hover .an-ico, .an-item.is-active .an-ico { color: var(--accent); }
.an-ico svg, .an-collapse svg, .an-burger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.an-foot { flex-shrink: 0; padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.an-foot .alyce-theme-picker { position: static; box-shadow: none; display: flex; justify-content: space-between; }
.an-foot .alyce-theme-picker button { flex: 1; justify-content: center; padding: 6px 6px; }
.an-collapse {
  display: flex; align-items: center; gap: 11px; padding: 7px 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text-muted); font: 500 12.5px var(--font-sans); white-space: nowrap;
}
.an-collapse:hover { color: var(--text); background: rgba(var(--ink-rgb), .06); }
.an-collapse svg { transition: transform .2s; }

/* Collapsed: icons only (desktop) */
@media (min-width: 1024px) {
  :root.alyce-nav-collapsed #alyce-nav .an-text,
  :root.alyce-nav-collapsed #alyce-nav .an-label { display: none; }
  :root.alyce-nav-collapsed .an-brand { padding: 16px 0; justify-content: center; }
  :root.alyce-nav-collapsed .an-item, :root.alyce-nav-collapsed .an-collapse { justify-content: center; padding: 9px 0; }
  :root.alyce-nav-collapsed .an-collapse svg { transform: rotate(180deg); }
  :root.alyce-nav-collapsed .an-foot .alyce-theme-picker { flex-direction: column; border-radius: 14px; }
  :root.alyce-nav-collapsed .an-foot .alyce-theme-picker button span { display: none; }
}

/* Desktop: fixed sidebar, page shifts right */
@media (min-width: 1024px) {
  html.has-alyce-nav #alyce-nav { display: flex; }
  html.has-alyce-nav body { padding-left: var(--alyce-nav-w) !important; transition: padding-left .2s ease; }
  html.has-alyce-nav #alyce-theme-picker { display: none; }        /* the sidebar carries the switcher */
  html.has-alyce-nav .alyce-fab-left, html.has-alyce-nav .social-fab { left: calc(var(--alyce-nav-w) + 24px) !important; }
}

/* Phones & small windows: menu button opens the sidebar as a drawer */
@media (max-width: 1023px) {
  html.has-alyce-nav .an-burger {
    display: grid; place-items: center; position: fixed; z-index: 9000;
    left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 50%;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-md); cursor: pointer;
  }
  html.has-alyce-nav #alyce-theme-picker { display: none; }
  html.has-alyce-nav .alyce-fab-left, html.has-alyce-nav .social-fab { left: 74px !important; }
  html.alyce-nav-open #alyce-nav { display: flex; width: min(280px, 84vw); z-index: 10002; box-shadow: var(--shadow-md); }
  html.alyce-nav-open .an-scrim { display: block; position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.4); }
  #alyce-nav .an-collapse { display: none; }
}

@media print { #alyce-nav, .an-burger, .an-scrim { display: none !important; } html.has-alyce-nav body { padding-left: 0 !important; } }