/* Shadowhunter Wiki — Modernist design system, dark-mode default.
   Tokens + dark/light values lifted from the design handoff styles.css and the
   .dc.html <style> block. Flat, architectural, Archivo, 0px radius, 2px rules. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

/* Tokens live on :root, NOT on .sh-app — modals and toasts mount in
   #modal-root / #toast-root, which are siblings of .sh-app. Scoping the colour
   variables to .sh-app left those undefined there, so dialogs rendered with no
   background at all. */
:root {
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;

  /* Dark (default) */
  --color-bg:#1a1817; --color-surface:#232120; --color-text:#f1efee;
  --color-divider:color-mix(in srgb,#f1efee 32%,transparent);
  --color-neutral-100:#2d2b2b; --color-neutral-200:#444141; --color-neutral-300:#605d5d;
  --color-neutral-400:#7d7979; --color-neutral-500:#9b9797; --color-neutral-600:#bab6b6;
  --color-neutral-700:#d7d3d3; --color-neutral-800:#eae7e7; --color-neutral-900:#f8f4f4;
  --color-accent-100:#4d170e; --color-accent-200:#7c1405; --color-accent-300:#ae1800;
  --color-accent-400:#dd2b0f; --color-accent-500:#ff563c; --color-accent-600:#ff9783;
  --color-accent-700:#ffc4b8; --color-accent-800:#ffe0d9; --color-accent-900:#fff2ef;
  --color-accent-2-100:#471d16; --color-accent-2-200:#71261b; --color-accent-2-300:#9e3526;
  --color-accent-2-400:#c94b39; --color-accent-2-500:#ef6853; --color-accent-2-600:#ff9784;
  --color-accent-2-700:#ffc4b9; --color-accent-2-800:#ffe0da; --color-accent-2-900:#fff2ef;
  --shadow-sm: 0 1px 2px color-mix(in srgb,#000 40%,transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb,#000 45%,transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb,#000 55%,transparent);
}

.sh-app { background:var(--color-bg); color:var(--color-text); }
.btn-primary { color:#faf7f6; }
.btn-primary:hover { background:var(--color-accent-400); }
.btn-primary:active { background:var(--color-accent-300); }

/* Light override — :has() lifts the theme class up to :root so modals and
   toasts (outside .sh-app) switch theme too. */
:root:has(.sh-app.sh-light) {
  --color-bg:#f3f2f2; --color-surface:#eae9e9; --color-text:#201e1d;
  --color-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7; --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6; --color-neutral-500:#9b9797; --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141; --color-neutral-900:#2d2b2b;
  --color-accent-100:#fff2ef; --color-accent-200:#ffe0d9; --color-accent-300:#ffc4b8;
  --color-accent-400:#ff9783; --color-accent-500:#ff563c; --color-accent-600:#dd2b0f;
  --color-accent-700:#ae1800; --color-accent-800:#7c1405; --color-accent-900:#4d170e;
  --color-accent-2-100:#fff2ef; --color-accent-2-200:#ffe0da; --color-accent-2-300:#ffc4b9;
  --color-accent-2-400:#ff9784; --color-accent-2-500:#ef6853; --color-accent-2-600:#c94b39;
  --color-accent-2-700:#9e3526; --color-accent-2-800:#71261b; --color-accent-2-900:#471d16;
  --shadow-sm: 0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);
}
:root:has(.sh-app.sh-light) .btn-primary { color:var(--color-bg); }
:root:has(.sh-app.sh-light) .btn-primary:hover { background:var(--color-accent-600); }
:root:has(.sh-app.sh-light) .btn-primary:active { background:var(--color-accent-700); }

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; }
body {
  background:#1a1817; color:#f1efee;
  font-family:var(--font-body); font-size:15px; line-height:1.55; font-weight:400;
}
.sh-app { min-height:100vh; display:flex; flex-direction:column; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:800; line-height:1.12; letter-spacing:-0.015em; margin:0 0 var(--space-2); }
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px} h4{font-size:20px} h5{font-size:16px}
h6{font-size:13px; letter-spacing:0.08em; text-transform:uppercase;}
p { margin:0 0 var(--space-3); }
a { color:var(--color-accent); text-underline-offset:3px; }
img { display:block; max-width:100%; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.text-muted { color:color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
::selection { background:color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wrap { width:min(1120px, 100%); margin:0 auto; padding:0 var(--space-4); }
.main { flex:1; padding:var(--space-6) 0 var(--space-8); }
.hr { height:2px; border:0; margin:var(--space-4) 0; background:var(--color-divider); }
.stack { display:flex; flex-direction:column; gap:var(--space-4); }
.row { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.spacer { flex:1; }

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none; font-family:var(--font-heading); font-weight:800;
  font-size:14px; line-height:1.2; color:var(--color-text);
  background:transparent; border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3) * 1.2); border-radius:var(--radius-md);
}
.btn svg { display:block; }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
.btn-primary { background:var(--color-accent); color:var(--color-bg); }
.btn-secondary { border-color:var(--color-divider); }
.btn-secondary:hover { background:color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color:var(--color-accent); padding-inline:var(--space-1); }
.btn-ghost:hover { background:color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-sm { font-size:12px; padding:5px 10px; }
.btn-discord { background:#5865F2; color:#fff; }
.btn-discord:hover { background:#4752c4; }

/* forms */
.field > label { display:block; font-size:12px; margin-bottom:5px; color:color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:14px;
  color:var(--color-text); caret-color:var(--color-accent);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
}
.input:hover { border-color:color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color:var(--color-accent); outline-offset:0; }
textarea.input { min-height:90px; resize:vertical; }
select.input { min-height:36px; }

/* cards */
.card { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3); background:var(--color-surface); }
.card-kicker { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent); }
.card-title { font-family:var(--font-heading); font-weight:800; font-size:17px; line-height:1.2; }
.card-body { margin:0; font-size:13px; opacity:0.8; flex:1; }
.card.clickable { cursor:pointer; }
.card.clickable:hover { box-shadow:var(--shadow-md); outline:2px solid var(--color-accent); outline-offset:-2px; }
.elev-sm { box-shadow:var(--shadow-sm); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--space-4); }
.grid-5 { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--space-3); }
/* Variant cards hold long spawn commands — give them room. */
.grid-variants { display:grid; grid-template-columns:repeat(auto-fill, minmax(440px, 1fr)); gap:var(--space-4); }
@media (max-width:520px){ .grid-variants { grid-template-columns:1fr; } }

/* image placeholder */
.imgph { aspect-ratio:1/1; background:var(--color-neutral-100); display:grid; place-items:center; color:var(--color-neutral-400); }
.imgph svg { width:32%; height:32%; opacity:.6; }
.imgph img { width:100%; height:100%; object-fit:cover; }

/* tags */
.tags { display:inline-flex; gap:6px; flex-wrap:wrap; }
.tag { display:inline-flex; align-items:center; font-size:11px; letter-spacing:0.02em; padding:3px 10px; }
.tag-accent { background:var(--color-accent-100); color:var(--color-accent-800); }
.tag-accent-2 { background:var(--color-accent-2-100); color:var(--color-accent-2-800); }
.tag-neutral { background:var(--color-neutral-100); color:var(--color-neutral-800); }
.tag-outline { border:1px solid var(--color-accent); color:var(--color-accent); }

/* nav */
.nav { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4); border-bottom:2px solid var(--color-divider); position:sticky; top:0; background:var(--color-bg); z-index:10; }
.nav-brand { font-family:var(--font-heading); font-weight:800; font-size:18px; cursor:pointer; }
.nav-links { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.nav a, .nav .navlink { color:inherit; text-decoration:none; font-size:14px; cursor:pointer; }
.nav a:hover, .nav .navlink:hover, .nav .navlink[aria-current='page'] { color:var(--color-accent); }
.nav-search { min-width:200px; max-width:280px; flex:1; }
/* The nav search is an .ac-wrap containing the real input. */
.nav-search-input { width:100%; }

/* table */
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb, var(--color-text) 60%, transparent); padding:var(--space-2); border-bottom:2px solid var(--color-divider); }
.table td { padding:var(--space-2); border-bottom:1px solid var(--color-divider); }
.table tbody tr:hover { background:color-mix(in srgb, var(--color-text) 4%, transparent); }

/* code rows */
.coderow { display:flex; align-items:stretch; gap:0; border:1px solid var(--color-divider); margin-bottom:var(--space-2); }
.coderow .label { flex:none; width:130px; padding:var(--space-2); font-size:11px; background:var(--color-neutral-100); display:flex; align-items:center; border-right:1px solid var(--color-divider); }
/* min-width:0 lets the code flex-item shrink so overflow-x:auto engages. */
.coderow code { flex:1 1 0; min-width:0; padding:var(--space-2) var(--space-3); font-size:12px; overflow-x:auto; white-space:nowrap; display:flex; align-items:center; }
.coderow .copy, .coderow .btn-ghost { flex:none; border-left:1px solid var(--color-divider); border-top:0; border-bottom:0; border-right:0; align-self:stretch; }
@media (max-width:560px){
  .coderow { flex-wrap:wrap; }
  .coderow .label { width:100%; border-right:0; border-bottom:1px solid var(--color-divider); }
  .coderow code { flex:1 1 100%; order:3; }
}

/* hero */
.hero { padding:var(--space-8) 0; border-bottom:2px solid var(--color-divider); }
.hero h1 { font-size:clamp(32px, 6vw, 56px); }
.statrow { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:var(--space-3); }
.stat { border:1px solid var(--color-divider); padding:var(--space-3); }
.stat .n { font-family:var(--font-heading); font-weight:800; font-size:28px; color:var(--color-accent); }
.stat .l { font-size:12px; text-transform:uppercase; letter-spacing:0.06em; opacity:.7; }

/* tier chips + dots */
.tierchip { display:inline-flex; align-items:center; font-size:11px; padding:4px 12px; font-family:var(--font-heading); font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.tierdots { display:inline-flex; gap:4px; flex-wrap:wrap; }
.tierdot { width:13px; height:13px; border:1px solid var(--color-divider); }

/* banner */
.banner { background:var(--color-accent); color:var(--color-bg); padding:var(--space-4); display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.banner h3 { margin:0; color:var(--color-bg); }

/* filters bar */
.filters { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:flex-end; margin-bottom:var(--space-4); }
.filters .field { min-width:180px; }

/* dialog */
.dialog-backdrop {
  position:fixed; inset:0; display:grid; place-items:center; padding:var(--space-4);
  background:rgba(0,0,0,.72); backdrop-filter:blur(2px); z-index:50;
}
/* Opaque fallback colour first, so the panel is never see-through even if a
   custom property fails to resolve. */
.dialog {
  width:min(440px,100%); display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-6);
  background:#232120; background:var(--color-surface, #232120);
  color:var(--color-text, #f1efee);
  border:2px solid var(--color-divider);
  box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto;
}
.dialog.wide { width:min(600px,100%); }
.dialog-title { font-family:var(--font-heading); font-weight:800; font-size:20px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-2); }

/* autocomplete dropdown */
.ac-wrap { position:relative; }
.ac-wrap .input { width:100%; }
.ac-menu {
  display:none; position:absolute; left:0; right:0; top:calc(100% - 1px); z-index:40;
  background:var(--color-surface, #232120);
  border:2px solid var(--color-divider);
  box-shadow:var(--shadow-lg);
  max-height:300px; overflow-y:auto;
}
.ac-menu.open { display:block; }
.ac-item {
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:7px 10px; font-size:13px; cursor:pointer;
  border-bottom:1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.ac-item:last-child { border-bottom:0; }
.ac-item.active, .ac-item:hover { background:var(--color-accent); color:var(--color-bg); }
.ac-kind {
  flex:none; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  opacity:.65;
}
.ac-item.active .ac-kind { opacity:.85; }

/* toast */
.toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#f8f4f4; background:var(--color-neutral-900, #f8f4f4);
  color:var(--color-bg, #1a1817);
  padding:10px 18px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow-lg); animation:toastIn .18s ease; z-index:60;
}
@keyframes toastIn { from { opacity:0; transform:translate(-50%,10px);} to { opacity:1; transform:translate(-50%,0);} }

/* detail layout */
.detail-head { display:grid; grid-template-columns:280px 1fr; gap:var(--space-6); align-items:start; }
@media (max-width:640px){ .detail-head { grid-template-columns:1fr; } }
.section-title { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-accent); margin:var(--space-6) 0 var(--space-3); }
.empty { padding:var(--space-8); text-align:center; color:var(--color-neutral-500); border:1px dashed var(--color-divider); }
.chibi-ini { background:var(--color-neutral-100); padding:var(--space-3); font-size:12px; white-space:pre; overflow-x:auto; }