/* Utility: matches Tailwind's .hidden — works even without Tailwind */
.hidden { display: none !important; }

/* ═══ RENKO — base components (CHIRAL design system, docs/ui/RENKO_UI_SYSTEM.md) ════════════
 *  Type    : Orbitron (interface chrome) · Exo 2 (reading) · Share Tech Mono (data)
 *  Themes  : cyan (Chiral) · gold · blue · red · green · purple · custom
 *  Modes   : dark · deep-dark · light
 *  Tokens  : --c-* written by static/js/renko-theme.js before first paint (fallbacks in
 *            renko-cyber.css). Only tokens are used here, so every theme applies everywhere.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing */
  --rk-sp-1: 8px;
  --rk-sp-2: 12px;
  --rk-sp-3: 16px;
  --rk-sp-4: 24px;
  --rk-sp-5: 32px;
  /* Radius — soft HUD corners */
  --rk-radius-sm: 3px;
  --rk-radius:    4px;
  --rk-radius-lg: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ─── Card / Panel: glass slab, hairline border, luminous corner brackets ─────────────────── */
.rk-card, .rk-panel, .cy-card {
  position: relative;
  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgb(var(--c-accent-rgb) / .07), transparent 70%),
    linear-gradient(180deg, rgb(var(--c-panel-rgb) / .94), rgb(var(--c-panel-rgb) / .84));
  border: 1px solid var(--cy-line);
  border-radius: var(--rk-radius-lg);
  box-shadow: inset 0 1px 0 rgb(var(--c-text-rgb) / .04);
  transition: border-color var(--cy-med), box-shadow var(--cy-med);
}
.rk-panel { border-radius: var(--rk-radius); }
.rk-card::before, .rk-card::after, .cy-card::before, .cy-card::after {
  content: ""; position: absolute; width: var(--cy-brk); height: var(--cy-brk); pointer-events: none; z-index: 1;
  border: 0 solid rgb(var(--c-accent-rgb) / .5);
  transition: transform var(--cy-med) var(--cy-expo), border-color var(--cy-med);
}
.rk-card::before, .cy-card::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: var(--rk-radius-lg); }
.rk-card::after, .cy-card::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: var(--rk-radius-lg); }
.rk-card:hover, .cy-card:hover { border-color: var(--cy-line-strong); }
.rk-card:hover::before, .cy-card:hover::before { transform: translate(-3px, -3px); border-color: var(--c-accent); }
.rk-card:hover::after, .cy-card:hover::after { transform: translate(3px, 3px); border-color: var(--c-accent); }
.cy-card.is-static:hover::before, .cy-card.is-static:hover::after { transform: none; }

/* ─── Buttons: chamfered, Orbitron caps, light sweep on hover ─────────────────────────────── */
.rk-btn {
  --btn-edge: var(--cy-line-strong);
  --btn-fill: linear-gradient(180deg, rgb(var(--c-accent-rgb) / .10), rgb(var(--c-accent-rgb) / .02)), var(--c-panel);
  --btn-ink: var(--c-text);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 9px 16px;
  border: 0; border-radius: 0;
  background: var(--btn-edge);
  clip-path: polygon(var(--cy-cut) 0, 100% 0, 100% calc(100% - var(--cy-cut)), calc(100% - var(--cy-cut)) 100%, 0 100%, 0 var(--cy-cut));
  color: var(--btn-ink);
  font: 600 10.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--cy-fast), color var(--cy-fast), transform var(--cy-fast), filter var(--cy-fast);
}
.rk-btn::before, .rk-btn::after {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  clip-path: polygon(var(--cy-cut) 0, 100% 0, 100% calc(100% - var(--cy-cut)), calc(100% - var(--cy-cut)) 100%, 0 100%, 0 var(--cy-cut));
}
.rk-btn::before { background: var(--btn-fill); transition: box-shadow var(--cy-fast), background var(--cy-fast); }
.rk-btn::after { background: var(--cy-sheen); background-size: 260% 100%; background-position: 150% 0; }
.rk-btn:hover { --btn-edge: var(--c-accent); text-shadow: 0 0 10px rgb(var(--c-accent-rgb) / .55); }
:root[data-anim="on"] .rk-btn:hover::after { animation: cy-sheen .75s var(--cy-ease) forwards; }
.rk-btn:active { transform: translateY(1px); }
.rk-btn:focus-visible { outline: none; box-shadow: none; --btn-edge: var(--c-accent); }
.rk-btn:focus-visible::before { box-shadow: inset 0 0 0 1px var(--c-accent), inset 0 0 16px rgb(var(--c-accent-rgb) / .35); }
.rk-btn-primary {
  --btn-edge: var(--c-accent);
  --btn-fill: linear-gradient(180deg, var(--c-accent-h), var(--c-accent));
  --btn-ink: var(--c-on-accent);
  font-weight: 700;
}
.rk-btn-primary:hover { --btn-edge: var(--c-accent-h); text-shadow: none; filter: drop-shadow(0 0 10px rgb(var(--c-accent-rgb) / .55)); }
.rk-btn-ghost { --btn-edge: transparent; --btn-fill: transparent; }
.rk-btn-ghost:hover { --btn-edge: var(--cy-line); --btn-fill: rgb(var(--c-accent-rgb) / .06); }

/* ─── Input ───────────────────────────────────────────────────────────────────────────────── */
.rk-input {
  width: 100%; padding: 8px 11px; outline: none;
  background: var(--c-input); color: var(--c-text);
  border: 1px solid rgb(var(--c-text-rgb) / .12); border-radius: var(--rk-radius-sm);
  font: 13px var(--font-body);
  transition: border-color var(--cy-fast), box-shadow var(--cy-fast);
}
.rk-input:hover { border-color: var(--cy-line-strong); }
.rk-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(var(--c-accent-rgb) / .14), inset 0 -1px 0 var(--c-accent); }
.rk-input::placeholder { color: rgb(var(--c-muted-rgb) / .75); }

/* ─── Badges: tracked micro-caps inside a hairline capsule ────────────────────────────────── */
.rk-badge {
  --tone-rgb: var(--c-accent-rgb);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 2px;
  font: 600 9.5px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--tone-rgb)); background: rgb(var(--tone-rgb) / .10); border: 1px solid rgb(var(--tone-rgb) / .35);
}
.rk-badge-accent { --tone-rgb: var(--c-accent-rgb); }
.rk-badge-ok     { --tone-rgb: var(--rk-ok-rgb); }
.rk-badge-warn   { --tone-rgb: var(--rk-warn-rgb); }
.rk-badge-err    { --tone-rgb: var(--rk-danger-rgb); }
.rk-badge-info   { --tone-rgb: var(--rk-info-rgb); }

/* Text helpers */
.rk-muted  { color: var(--c-muted) !important; }
.rk-accent { color: var(--c-accent) !important; }
.rk-text   { color: var(--c-text) !important; }

/* Divider: a hairline that fades at both ends */
.rk-divider { border: none; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, var(--cy-line-strong), transparent); }

/* ─── Stat tiles (home, server, status) ───────────────────────────────────────────────────── */
.stat-card {
  position: relative;
  background:
    radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgb(var(--c-accent-rgb) / .08), transparent 70%),
    linear-gradient(180deg, rgb(var(--c-panel-rgb) / .94), rgb(var(--c-panel-rgb) / .80)) !important;
  border: 1px solid var(--cy-line) !important;
  border-radius: var(--rk-radius-lg) !important;
  transition: transform var(--cy-med) var(--cy-expo), border-color var(--cy-med), box-shadow var(--cy-med);
  overflow: hidden;
}
.stat-card::before { /* top light rail */
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: .55;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--cy-line-strong) !important;
  box-shadow: 0 14px 34px -18px rgb(var(--c-accent-rgb) / .55);
}

/* ─── Toggle switch (hub + config pages) — an energy rail with a lit core ─────────────────── */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 22px;
  background: var(--c-input); border: 1px solid rgb(var(--c-muted-rgb) / .45);
  transition: background var(--cy-med), border-color var(--cy-med), box-shadow var(--cy-med);
}
.slider:before {
  content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; border-radius: 50%;
  background: var(--c-muted);
  transition: transform var(--cy-med) var(--cy-expo), background var(--cy-med), box-shadow var(--cy-med);
}
input:checked + .slider { background: rgb(var(--rk-ok-rgb) / .16); border-color: var(--rk-ok); box-shadow: 0 0 14px -4px rgb(var(--rk-ok-rgb) / .8); }
input:checked + .slider:before { transform: translateX(18px); background: var(--rk-ok); box-shadow: 0 0 8px var(--rk-ok); }
input:focus-visible + .slider { box-shadow: 0 0 0 3px rgb(var(--c-accent-rgb) / .3); }
input:disabled + .slider { opacity: .45; cursor: not-allowed; }