/* ── MagicServer v2 — design tokens, fonts, keyframes, shared utilities ──
   Tokens are verbatim from the design handoff (README + prototype :root).   */

@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/Manrope-Variable.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-display: swap;
}

/* ── Theme tokens ──────────────────────────────────────────────────────
   Three switches on <html>: data-theme (dark | light), data-accent
   (green | blue) and data-rail (colored | neutral). The values are the ones
   reviewed in prototypes/rail-theme.html, with its contrast fixes applied:
   text colours reach WCAG AA (4.5:1) on the surfaces they sit on. In light
   mode the content is white; the rail carries the colour.

   Two naming layers. The role names from the prototype (--rail-*,
   --accent-ui*, --status-*, --text-muted, --surface-raised) are for new code.
   The older names are the same values, so the ~700 existing uses keep
   working: --bg is the content ground, --surface a panel or card on it,
   --surface-2/-3 sunken and hover fills, --dim muted text, --faint the
   quietest text that still reads. */
:root {
  --bg:#14191e; --surface:#1b2128; --surface-2:#222a32; --surface-3:#2b343e;
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16);
  --text:#e9eef4; --dim:#8b97a5; --faint:#7e8a97;
  --danger:#f26d6d; --danger-soft:rgba(242,109,109,0.12);
  --warn:#e8b34b; --warn-soft:rgba(232,179,75,0.15);
  --shadow:0 16px 48px rgba(0,0,0,0.5); --shadow-sm:0 4px 16px rgba(0,0,0,0.35);
  --overlay:rgba(6,9,12,0.66); --rowpad:10px;

  /* Accent: green (the default) */
  --accent:#3ecf8e; --accent-strong:#5bd69f; --on-accent:#07130d; --accent-soft:rgba(62,207,142,0.13);
  --accent-ui-subtle:#1b3630;

  /* Rail: colored, green. A deep, muted tint of the accent. */
  --rail-bg:#16271f; --rail-fg:#eef2f6; --rail-fg-muted:#a5adad; --rail-active-bg:#204f3a;
  --rail-hover-bg:#24342c; --rail-divider:#2d3d35; --rail-card-bg:#22322a;
  --status-warn-bg:#e8b34b; --status-warn-fg:#0a0f0c; --status-crit-bg:#f26d6d; --status-crit-fg:#0a0f0c;

  /* Role names for new code */
  --accent-ui:var(--accent); --accent-ui-fg:var(--on-accent);
  --surface-raised:var(--surface); --text-muted:var(--dim);
}
[data-theme="light"] {
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f6f8; --surface-3:#e9edf1;
  --border:rgba(16,24,32,0.1); --border-strong:rgba(16,24,32,0.2);
  --text:#181f26; --dim:#5d6a77; --faint:#66717c;
  --danger:#d62c2c; --danger-soft:rgba(214,44,44,0.09);
  --warn:#976617; --warn-soft:rgba(200,150,40,0.16);
  --shadow:0 16px 48px rgba(20,30,40,0.2); --shadow-sm:0 4px 16px rgba(20,30,40,0.12);
  --overlay:rgba(18,24,30,0.45);

  --accent:#0c8056; --accent-strong:#096443; --on-accent:#ffffff; --accent-soft:rgba(12,128,86,0.1);
  --accent-ui-subtle:#e7f2ee;

  /* Darkened until white text on it reaches 5:1. */
  --rail-bg:#1f7c52; --rail-fg:#ffffff; --rail-fg-muted:#c5ddd2; --rail-active-bg:#186140;
  --rail-hover-bg:#1c6e49; --rail-divider:#509978; --rail-card-bg:#1a6845;
  --status-warn-bg:#ecc16d; --status-warn-fg:#0a0f0c; --status-crit-bg:#f9b8b8; --status-crit-fg:#0a0f0c;
}
[data-accent="blue"] {
  --accent:#4c8dff; --accent-strong:#70a4ff; --on-accent:#0a0f0c; --accent-soft:rgba(76,141,255,0.15);
  --accent-ui-subtle:#1d2c42;
  --rail-bg:#111b2c; --rail-fg:#eef2f6; --rail-fg-muted:#a3a9b1; --rail-active-bg:#1f365f;
  --rail-hover-bg:#1f2939; --rail-divider:#293241; --rail-card-bg:#1d2637;
}
[data-theme="light"][data-accent="blue"] {
  --accent:#0963ff; --accent-strong:#0055e9; --on-accent:#ffffff; --accent-soft:rgba(9,99,255,0.1);
  --accent-ui-subtle:#e6efff;
  --rail-bg:#2167e3; --rail-fg:#ffffff; --rail-fg-muted:#c5d7f8; --rail-active-bg:#1a50b1;
  --rail-hover-bg:#1d5cca; --rail-divider:#5288e9; --rail-card-bg:#1c57bf;
  --status-warn-bg:#edc371; --status-crit-bg:#f9b8b8;
}
/* Neutral rail: the rail is plain; only the accents are coloured. These come
   after the accent blocks so they win at the same specificity. */
[data-rail="neutral"] {
  --rail-bg:#0f1317; --rail-fg:#e9eef4; --rail-fg-muted:#8b97a5; --rail-active-bg:#18392f;
  --rail-hover-bg:#1a2027; --rail-divider:#232a32; --rail-card-bg:#171d23;
  --status-warn-bg:#e8b34b; --status-warn-fg:#0a0f0c; --status-crit-bg:#f26d6d; --status-crit-fg:#0a0f0c;
}
[data-accent="blue"][data-rail="neutral"] { --rail-active-bg:#1b2b45; }
[data-theme="light"][data-rail="neutral"] {
  --rail-bg:#f4f6f8; --rail-fg:#181f26; --rail-fg-muted:#5d6a77; --rail-active-bg:#d4e5e1;
  --rail-hover-bg:#e9edf1; --rail-divider:#dfe4ea; --rail-card-bg:#ffffff;
  --status-warn-bg:#996d15; --status-warn-fg:#ffffff; --status-crit-bg:#d53f3f; --status-crit-fg:#ffffff;
}
[data-theme="light"][data-accent="blue"][data-rail="neutral"] { --rail-active-bg:#d3e1f9; }

body { margin:0; font-family:'Manrope',system-ui,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-strong); }
input, textarea, button, select { font-family:inherit; }
input::placeholder, textarea::placeholder { color:var(--faint); }
* { scrollbar-width:thin; scrollbar-color:var(--faint) transparent; box-sizing:border-box; }

@keyframes msv-pop { from{opacity:0;transform:translateY(8px) scale(0.98)} to{opacity:1;transform:none} }
@keyframes msv-pop-o { from{opacity:0} to{opacity:1} }
@keyframes msv-fade { from{opacity:0} to{opacity:1} }
@keyframes msv-modal { from{opacity:0;transform:translate(-50%,-46%) scale(.95)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes msv-menu { from{opacity:0;transform:translateY(5px) scale(.97)} to{opacity:1;transform:none} }
@keyframes msv-pane { from{transform:translateX(26px);opacity:0} to{transform:none;opacity:1} }
@keyframes msv-pane-out { from{transform:none;opacity:1} to{transform:translateX(26px);opacity:0} }
@keyframes msv-shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
@keyframes msv-toast { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:none} }
@keyframes msv-toast-out { from{opacity:1;transform:none} to{opacity:0;transform:translateY(14px) scale(.95)} }
@keyframes msv-row-in { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:none} }
@keyframes msv-check { 0%{transform:scale(0)} 60%{transform:scale(1.35)} 100%{transform:scale(1)} }

div,span,button,input,textarea,a,pre {
  transition: background-color .25s ease, border-color .25s ease, color .18s ease, box-shadow .18s ease;
}

/* ── Pseudo-state utilities (inline styles can't express :hover/:focus).
      Components copy prototype inline styles verbatim and add one of these
      classes for the prototype's style-hover / style-focus attribute. ── */
.fr:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
.btn-acc:hover { background:var(--accent-strong) !important; }
.hv-acc:hover { color:var(--accent-strong) !important; }
.hv-text:hover { color:var(--text) !important; }
.hv-s2:hover { background:var(--surface-2) !important; }
.hv-s3:hover { background:var(--surface-3) !important; }
.hv-border:hover { border-color:var(--border-strong) !important; }
.hv-danger:hover { background:var(--danger-soft) !important; color:var(--danger) !important; }
.hv-raise:hover { box-shadow:var(--shadow-sm) !important; }

/* The product mark: the ASCII cat on a tinted tile. Shared by the app and the
   server-rendered pages (status, share links, downloads), so it is identical
   wherever it appears. */
.ms-mark { width:38px; height:38px; border-radius:11px; flex:none; background:var(--accent-soft); border:1px solid var(--accent-soft); display:inline-flex; align-items:center; justify-content:center; }
/* Everything the art depends on is set here rather than inherited. Inside
   the sidebar's button it picked up text-align:center, and three lines of
   different lengths centred separately shift the ears and the mouth half a
   character off the face. */
.ms-mark pre { margin:0; font:600 8px/1.25 'JetBrains Mono', ui-monospace, monospace; color:var(--accent); text-align:left; white-space:pre; letter-spacing:normal; text-transform:none; }