/* ============================================================
   gojoe themes — win95 / neon / matrix / steel
   Applied via body.theme-<name>, set by assets/js/theme.js and
   a tiny inline script at the top of <body> on each page (to
   avoid a flash of the default look). Same pattern as thepot's
   web/static/themes.css.

   Pages define :root custom properties (--bg, --term, --header,
   --text, --muted, --navbar-*, --user/--at/--path, --radius) in
   their own inline <style>; most of a theme is just redefining
   those. Extra flourishes (fonts, borders, glow, animation) are
   layered on top with concrete selectors.
   ============================================================ */

/* ── win95 — beveled chrome, teal desktop, pixel nostalgia ── */
body.theme-win95 {
  --bg:#008080; --term:#c0c0c0; --header:#c0c0c0; --text:#000; --muted:#333;
  --navbar-bg:#c0c0c0; --navbar-text:#000; --navbar-hover:#000080;
  --user:#000080; --at:#000; --path:#000080;
  --radius:0px;
  --card-bg:#fff; --card-border:#808080;
  font-family:"MS Sans Serif","Arial",sans-serif !important;
}
body.theme-win95 .navbar a:hover{ color:#fff !important; }
body.theme-win95 .term,
body.theme-win95 .terminal-container{
  border-radius:0 !important;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-bottom:2px solid #808080; border-right:2px solid #808080;
  box-shadow:none !important;
}
body.theme-win95 .term-header,
body.theme-win95 .terminal-header{ border-radius:0 !important; border-bottom:1px solid #808080; }
body.theme-win95 .dot,
body.theme-win95 .button{ border-radius:2px !important; }
body.theme-win95 .term-input,
body.theme-win95 .term-body,
body.theme-win95 #terminal-content{ font-family:"Courier New",monospace !important; }
body.theme-win95 .switch button,
body.theme-win95 .copy,
body.theme-win95 .btn{
  border-radius:0 !important;
  border-top:2px solid #fff !important; border-left:2px solid #fff !important;
  border-bottom:2px solid #808080 !important; border-right:2px solid #808080 !important;
  background:#c0c0c0 !important; color:#000 !important;
}
body.theme-win95 .pill{ border-radius:0 !important; background:#fff !important; border:1px solid #808080 !important; color:#000 !important; }
body.theme-win95 .trip-card{ border-radius:0 !important; border-top:2px solid #fff !important; border-left:2px solid #fff !important; border-bottom:2px solid #808080 !important; border-right:2px solid #808080 !important; }
body.theme-win95 .trip-card:hover{ transform:none !important; }

/* ── neon — hot pink + cyan synthwave on deep black ── */
body.theme-neon {
  --bg:#07001a; --term:rgba(20,0,50,.85); --header:rgba(7,0,26,.95); --text:#00f5ff; --muted:#9b59f7;
  --navbar-bg:rgba(7,0,26,.97); --navbar-text:#f0e6ff; --navbar-hover:#ff2dc8;
  --user:#ff2dc8; --at:#f0e6ff; --path:#00f5ff;
  --card-bg:rgba(155,89,247,.08); --card-border:rgba(255,0,200,.25);
  font-family:'Courier New', Courier, monospace !important;
}
body.theme-neon .term,
body.theme-neon .terminal-container{
  box-shadow:0 0 24px rgba(255,45,200,.25), 0 0 48px rgba(0,245,255,.1) !important;
  border:1px solid rgba(255,0,200,.25);
}
body.theme-neon .term-header,
body.theme-neon .terminal-header{ border-bottom:1px solid rgba(255,0,200,.2); }
body.theme-neon .navbar a:hover{ text-shadow:0 0 8px rgba(0,245,255,.7); }
body.theme-neon .trip-card:hover{ border-color:#ff2dc8 !important; box-shadow:0 0 16px rgba(255,45,200,.3); }
body.theme-neon .h1,
body.theme-neon .trip-title{ text-shadow:0 0 6px rgba(0,245,255,.5); }

/* ── matrix — phosphor green digital rain, terminal energy ── */
body.theme-matrix {
  --bg:#020d06; --term:rgba(0,20,10,.9); --header:rgba(2,13,6,.97); --text:#00ff88; --muted:#00aa55;
  --navbar-bg:rgba(2,13,6,.97); --navbar-text:#00aa55; --navbar-hover:#00ff88;
  --user:#00ff88; --at:#00aa55; --path:#00ff88;
  --card-bg:rgba(0,255,136,.05); --card-border:rgba(0,255,136,.2);
  --radius:2px;
  font-family:'Courier New', Courier, monospace !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,136,.025) 0px, rgba(0,255,136,.025) 1px, transparent 1px, transparent 3px);
}
body.theme-matrix .term,
body.theme-matrix .terminal-container{
  border-radius:2px !important;
  border:1px solid rgba(0,255,136,.15);
  box-shadow:inset 0 0 30px rgba(0,255,136,.04), 0 0 12px rgba(0,255,136,.08) !important;
}
body.theme-matrix h1, body.theme-matrix h2, body.theme-matrix .h1{ text-shadow:0 0 8px rgba(0,255,136,.4); }
body.theme-matrix .trip-card{ border-radius:2px !important; }
body.theme-matrix .trip-card:hover{ border-color:#00ff88 !important; box-shadow:0 0 14px rgba(0,255,136,.2); }
@keyframes matrix-cursor { 0%,49%{opacity:1} 50%,100%{opacity:0} }
body.theme-matrix .path::after{ content:'_'; animation:matrix-cursor 1s step-end infinite; }

/* ── steel — brushed chrome, achromatic precision ── */
body.theme-steel {
  --bg:#0c0c0e; --term:rgba(18,18,20,.96); --header:rgba(10,10,12,.98); --text:#d4d4d8; --muted:#71717a;
  --navbar-bg:rgba(10,10,12,.97); --navbar-text:#d4d4d8; --navbar-hover:#f4f4f5;
  --user:#a1a1aa; --at:#d4d4d8; --path:#f4f4f5;
  --card-bg:rgba(255,255,255,.03); --card-border:rgba(255,255,255,.08);
}
body.theme-steel .term,
body.theme-steel .terminal-container{
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.6) !important;
}
body.theme-steel .trip-card:hover{ border-color:rgba(255,255,255,.3) !important; }
@keyframes chromeSweep { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
body.theme-steel .trip-title,
body.theme-steel .h1{
  background:linear-gradient(90deg,#71717a 0%,#f4f4f5 35%,#a1a1aa 55%,#f4f4f5 75%,#71717a 100%);
  background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:chromeSweep 5s linear infinite;
}

/* ── shared: theme picker widget ── */
#theme-picker{
  position:fixed; right:16px; top:12px; z-index:999;
  display:flex; align-items:center; gap:6px;
  background:rgba(20,20,20,.6); border:1px solid rgba(143,240,255,.25); border-radius:999px;
  padding:6px 10px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:'Monaco','Courier New',monospace; font-size:11px; color:#8ff0ff;
}
#theme-picker select{
  background:transparent; color:inherit; border:none; outline:none; font:inherit; cursor:pointer;
}
#theme-picker select option{ background:#1a1a1a; color:#eee; }

@media (max-width: 640px){ #theme-picker{ right:8px; top:8px; padding:5px 8px; font-size:10px; } }
