/* WKOS Guides theme bridge.
   themes.css (copied verbatim from wkos-app-ts/web/assets/system/themes.css) sets the
   WKOS token contract per skin × shade: --canvas --surface --elevated --text --muted
   --border --accent --accent-2 --accent-3 --success --link.
   The guide pages were written against their own names (--navy, --purple-light, …) in
   page-level :root blocks. This file re-points those names at the contract. Selectors
   carry [data-skin][data-theme] so they outrank any page :root, wherever the link sits.
   Default look (original · midday) is the guides' original palette, so nothing shifts
   until someone picks a skin. */

html[data-skin][data-theme]{
  --navy:var(--canvas);
  --dark-blue:var(--surface);
  --slate:var(--elevated);
  --dark-slate:var(--elevated);
  --surface-2:var(--elevated);
  --text-bright:var(--text);

  /* derived tones — mixing toward --text lightens on dark shades and darkens on Light */
  --g-dim:color-mix(in srgb,var(--muted) 72%,var(--canvas));
  --g-neutral:color-mix(in srgb,var(--muted) 38%,var(--canvas));
  --g-accent-soft:color-mix(in srgb,var(--accent) 70%,var(--text));
  --g-accent2-soft:color-mix(in srgb,var(--accent-2) 78%,var(--text));
  --g-accent3-soft:color-mix(in srgb,var(--accent-3) 80%,var(--text));
  --g-red:color-mix(in srgb,#f87171 78%,var(--text));
  --g-blue:color-mix(in srgb,#60a5fa 78%,var(--text));

  --light:var(--g-dim);
  --light-slate:var(--g-dim);
  --neutral-dark:var(--g-neutral);
  --purple:var(--accent);
  --purple-light:var(--g-accent-soft);
  --cyan:var(--accent-2);
  --cyan-light:var(--g-accent2-soft);
  --amber:var(--accent-3);
  --amber-light:var(--g-accent3-soft);
  --green:var(--success);
  --red:var(--g-red);
  --blue:var(--g-blue);
  color-scheme:dark;
}
html[data-skin][data-theme="light"]{
  color-scheme:light;
  /* game-semantic colours (tier metals, elements, route colours) are tuned for dark
     backgrounds; pull them toward ink so they stay readable on white */
  --g-red:color-mix(in srgb,#dc2626 85%,var(--text));
  --g-blue:color-mix(in srgb,#2563eb 85%,var(--text));
  --g-dim:color-mix(in srgb,var(--muted) 90%,var(--canvas));
  --green:color-mix(in srgb,var(--success) 75%,var(--text));
  --g-neutral:color-mix(in srgb,var(--muted) 85%,var(--canvas));
  --chip-ink:#fff; /* Palworld chips: dark ink on bright chips flips once the chips darken */
  --g-accent-soft:color-mix(in srgb,var(--accent) 85%,var(--text));
  --g-accent2-soft:color-mix(in srgb,var(--accent-2) 80%,var(--text));
  --g-accent3-soft:color-mix(in srgb,var(--accent-3) 80%,var(--text));
  /* page-level game tokens (same values on every page that defines them) */
  --plat:#5b6b8c; --gold:#a16207; --silver:#64748b; --bronze:#9a5a24;
  --cai:#0369a1; --dietrich:#b91c1c; --theodora:#7e22ce; --leda:#15803d;
  --flame:#b91c1c; --electric:#a16207; --ice:#0369a1; --venom:#7e22ce; --pink:#be185d;
}

/* Light-only page fixes for colours that page JS writes inline (not rewritable in CSS) */
html[data-theme="light"] .lv{color:#0a0e1a}                               /* Palworld: level chips sit on fixed bright --c */
html[data-theme="light"] .sq-type-badge{filter:brightness(.58) saturate(1.3)} /* Metaphor: badge colour set inline from JS */

/* Accent picker — same model as the app: remaps the state colour (the cyan slot).
   'cyan' is the default and writes no attribute, so each skin keeps its own. */
html[data-skin][data-accent="purple"]{--accent-2:#7c3aed}
html[data-skin][data-accent="amber"]{--accent-2:#f59e0b}
html[data-skin][data-accent="emerald"]{--accent-2:#10b981}
html[data-skin][data-accent="rose"]{--accent-2:#f43f5e}
html[data-skin][data-theme="light"][data-accent="purple"]{--accent-2:#6d28d9}
html[data-skin][data-theme="light"][data-accent="amber"]{--accent-2:#b45309}
html[data-skin][data-theme="light"][data-accent="emerald"]{--accent-2:#047857}
html[data-skin][data-theme="light"][data-accent="rose"]{--accent-2:#be123c}

/* ---- picker ---- */
.wk-theme-btn{position:fixed;right:14px;bottom:14px;z-index:9999;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:17px;line-height:1;cursor:pointer;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.wk-theme-btn:hover,.wk-theme-btn[aria-expanded="true"]{border-color:var(--accent-2)}
.wk-theme-panel{position:fixed;right:14px;bottom:60px;z-index:9999;width:min(320px,calc(100vw - 28px));
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:.85rem .9rem;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.6);font:13px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif}
.wk-theme-panel[hidden]{display:none}
.wk-theme-panel h4{font:700 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin:.75rem 0 .4rem}
.wk-theme-panel h4:first-child{margin-top:0}
.wk-theme-row{display:flex;flex-wrap:wrap;gap:.3rem}
.wk-theme-row button{font:600 .72rem/1 system-ui,sans-serif;padding:.42rem .6rem;border-radius:7px;cursor:pointer;
  border:1px solid var(--border);background:var(--canvas);color:var(--text)}
.wk-theme-row button[aria-pressed="true"]{border-color:var(--accent-2);color:var(--accent-2);
  background:color-mix(in srgb,var(--accent-2) 12%,var(--canvas))}
.wk-theme-row .sw{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid var(--border)}
.wk-theme-row .sw[aria-pressed="true"]{border-color:var(--text)}
.wk-theme-note{margin-top:.7rem;font-size:.68rem;color:var(--muted)}
@media print{.wk-theme-btn,.wk-theme-panel{display:none}}
/* phones: let the nav brand break between the hub name and the guide name (nowrap pushed pages ~6px past 375px) */
@media (max-width:640px){.nav-brand{white-space:normal;min-width:0}.nav-brand .hub,.nav-brand .sep{white-space:nowrap}}
.wk-acct{margin-top:.2rem;border-top:1px solid var(--border);padding-top:.1rem}
.wk-acct-form{display:flex;gap:.35rem}
.wk-acct-form input{flex:1;min-width:0;font:inherit;font-size:.78rem;padding:.4rem .55rem;border-radius:7px;border:1px solid var(--border);background:var(--canvas);color:var(--text)}
.wk-acct button{font:600 .72rem/1 system-ui,sans-serif;padding:.42rem .6rem;border-radius:7px;cursor:pointer;border:1px solid var(--border);background:var(--canvas);color:var(--text)}
.wk-acct-on{display:flex;align-items:center;gap:.45rem;width:100%;text-align:left}
.wk-acct-on .dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}
.wk-acct-tok{font-size:.72rem;color:var(--muted);margin-bottom:.4rem}.wk-acct-tok code{font-family:ui-monospace,monospace;color:var(--text)}
.wk-acct-acts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.4rem}

/* ---- Site-wide layout standard (RULES.md → Presentation) ----
   One page width everywhere: a 1100px content column with 1.15rem gutters, on every page (hub, guide homes, kit pages,
   hand-built pages, trackers). Card grids: four cards per row (2 on tablets, 1 on phones), every card the same size. */
:root{--wk-page:1100px;--wk-gutter:1.15rem}
html{scrollbar-gutter:stable}   /* short pages sit in the same spot as long ones */
body{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
body>main,body>.wrap{box-sizing:border-box!important;width:100%!important;max-width:calc(var(--wk-page) + 2 * var(--wk-gutter))!important;
  margin-left:auto!important;margin-right:auto!important;padding-left:var(--wk-gutter)!important;padding-right:var(--wk-gutter)!important}
.cards:not(.shelf-track){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.75rem}
@media (max-width:900px){.cards:not(.shelf-track){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:540px){.cards:not(.shelf-track){grid-template-columns:1fr!important}}
.cards>.card,.shelf-page>.card{display:flex!important;flex-direction:column;min-height:9.5rem;padding:.95rem 1rem}
.cards>.card h2,.shelf-page>.card h2{font-size:1.05rem;margin:.45rem 0 .3rem}
.cards>.card p,.shelf-page>.card p{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cards>.card .go,.shelf-page>.card .go{margin-top:auto;padding-top:.6rem;font-size:.7rem}