/* ============================================================================
   REBOOT DESIGN SYSTEM — reboot.css
   A dark-first UI kit for the reboot.li family of projects, with an
   automatic light theme for bright rooms and bright minds.

   v0.2 — projects: keep this stamp in sync with the release tag you
   vendored from, so drifted copies are visible at a glance.

   One file, zero dependencies. Structure:
     1. Fonts          (Adwaita Sans, SIL OFL 1.1 — see fonts/LICENSE)
     2. Tokens         (--brand knob + light/dark themes — source of truth)
     3. Base           (reset + element defaults)
     4. Typography     (display / overline / lead / section-title)
     5. Utilities      (a small, deliberate set — not a framework)
     6. Components     (buttons, cards, badges, alerts, inputs, tables, dialogs, …)
     7. Layout         (topbar, container, optional sidebar rail/drawer)
     8. Display overrides (.hidden, .hide-sm/.hide-md — last, to win the cascade)

   Consuming projects: link this file, keep fonts/ next to it, done.
   ========================================================================== */


/* ── 1. Fonts ────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Adwaita Sans";
  src: url("fonts/adwaita-sans-latin-900-normal.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}


/* ── 2. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* ── Brand ── the one variable to edit ──────────────────────────────────
     Change --brand and the whole system follows: --accent and its hover,
     glow and soft tints all derive from it. Retint with any hue — neon
     mint is just the default. Projects: don't edit this file — set --brand
     in your own brand file, linked after this one (see README, Theming). */
  --brand: #00f5c8;

  /* Type */
  --font: "Adwaita Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;

  /* Derived tints — resolve against whatever accent/tones the active
     theme provides, so they never need per-theme copies. */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --success-soft: color-mix(in srgb, var(--success) 10%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 10%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 10%, transparent);
  --ring: 0 0 0 3px var(--accent-soft);

  /* ── Light theme (default) ───────────────────────────────────────────────
     The page follows the system preference automatically; users pin a
     theme with <html data-theme="light|dark">. The accent is a darkened,
     contrast-safe version of the brand neon (white text on it passes AA). */
  color-scheme: light;

  /* Surfaces — near-white page, cards float above it in pure white */
  --bg: #f2f4f6;
  --surface: #ffffff;         /* cards, panels */
  --surface-raised: #f4f5f7;  /* inputs, table headers, nested blocks */
  --border: #e3e6ea;          /* hairlines */
  --border-strong: #c9cfd7;   /* visible borders (ghost buttons, inputs) */

  /* Text */
  --text: #16191d;
  --muted: #5c6570;
  --faint: #8b929c;

  /* Accent — the brand neon, dimmed to hold contrast on white */
  --accent: color-mix(in srgb, var(--brand) 50%, black);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  --on-accent: #ffffff;       /* text on accent fills */

  /* Feedback tones, darkened for white backgrounds */
  --success: #15803d;
  --warning: #b45309;
  --danger: #dc2626;
  --info: #0369a1;
  --on-danger: #ffffff;
  --danger-hover: color-mix(in srgb, var(--danger) 88%, black);

  /* Elevation & glow — restraint is the whole point */
  --glow-accent: 0 0 22px -6px color-mix(in srgb, var(--accent) 40%, transparent);
  --shadow-card:
    0 1px 2px rgb(16 20 26 / 0.05),
    0 12px 32px -14px rgb(16 20 26 / 0.28);
  --shadow-card-hover:
    0 1px 2px rgb(16 20 26 / 0.05),
    0 16px 40px -14px rgb(16 20 26 / 0.34),
    0 0 30px -16px color-mix(in srgb, var(--accent) 50%, transparent);
  --shadow-pop:
    0 16px 48px -12px rgb(16 20 26 / 0.35);
  --overlay: rgb(15 20 26 / 0.45);
  --scrollbar-thumb: #d7dbe0;
  --scrollbar-thumb-hover: #c5cad1;
}

/* ── Dark theme — the signature look ─────────────────────────────────────
   Applied when the system asks for dark (and light isn't pinned), or when
   html[data-theme="dark"] is set. The two blocks below are identical on
   purpose — keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Surfaces — pure black page, cards float slightly above it */
    --bg: #000000;
    --surface: #0d1014;         /* cards, panels */
    --surface-raised: #161a20;  /* inputs, table headers, nested blocks */
    --border: #1f252d;          /* hairlines */
    --border-strong: #2d3540;   /* visible borders (ghost buttons, inputs) */

    /* Text */
    --text: #f2f4f6;
    --muted: #9aa3ae;
    --faint: #5f6873;

    /* Accent — the one neon, at full strength */
    --accent: var(--brand);
    --accent-hover: color-mix(in srgb, var(--accent) 70%, white);
    --on-accent: #04211b;       /* text on accent fills */

    /* Feedback tones */
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #38bdf8;
    --on-danger: #14090b;
    --danger-hover: color-mix(in srgb, var(--danger) 82%, white);

    /* Elevation & glow */
    --glow-accent: 0 0 22px -6px color-mix(in srgb, var(--accent) 65%, transparent);
    --shadow-card:
      inset 0 1px 0 rgb(255 255 255 / 0.03),
      0 12px 32px rgb(0 0 0 / 0.55),
      0 0 28px -14px color-mix(in srgb, var(--accent) 45%, transparent);
    --shadow-card-hover:
      inset 0 1px 0 rgb(255 255 255 / 0.04),
      0 16px 40px rgb(0 0 0 / 0.6),
      0 0 34px -12px color-mix(in srgb, var(--accent) 60%, transparent);
    --shadow-pop:
      0 16px 48px rgb(0 0 0 / 0.65),
      0 0 24px -12px color-mix(in srgb, var(--accent) 40%, transparent);
    --overlay: rgb(0 0 0 / 0.6);
    --scrollbar-thumb: #20262e;
    --scrollbar-thumb-hover: #2c3440;
  }
}

/* Manual dark pin — same values as the media block above (keep in sync). */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #0d1014;
  --surface-raised: #161a20;
  --border: #1f252d;
  --border-strong: #2d3540;

  --text: #f2f4f6;
  --muted: #9aa3ae;
  --faint: #5f6873;

  --accent: var(--brand);
  --accent-hover: color-mix(in srgb, var(--accent) 70%, white);
  --on-accent: #04211b;

  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #38bdf8;
  --on-danger: #14090b;
  --danger-hover: color-mix(in srgb, var(--danger) 82%, white);

  --glow-accent: 0 0 22px -6px color-mix(in srgb, var(--accent) 65%, transparent);
  --shadow-card:
    inset 0 1px 0 rgb(255 255 255 / 0.03),
    0 12px 32px rgb(0 0 0 / 0.55),
    0 0 28px -14px color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow-card-hover:
    inset 0 1px 0 rgb(255 255 255 / 0.04),
    0 16px 40px rgb(0 0 0 / 0.6),
    0 0 34px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow-pop:
    0 16px 48px rgb(0 0 0 / 0.65),
    0 0 24px -12px color-mix(in srgb, var(--accent) 40%, transparent);
  --overlay: rgb(0 0 0 / 0.6);
  --scrollbar-thumb: #20262e;
  --scrollbar-thumb-hover: #2c3440;
}


/* ── 3. Base ─────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* keep anchors clear of the sticky topbar */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, video { max-width: 100%; display: block; }

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  width: 1rem; height: 1rem;
}

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.08em 0.35em;
}

pre {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; font-size: 0.85rem; }

kbd {
  font-family: var(--font-mono);
  font-size: 0.75em;
  padding: 0.15em 0.45em;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface-raised);
  color: var(--muted);
}

/* Quiet scrollbars, themed with the page */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }


/* ── 4. Typography ───────────────────────────────────────────────────────── */

/* The reboot.li signature: huge, black-weight, uppercase, tight. */
.display {
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

/* Tiny uppercase metadata label — dates, section markers, captions. */
.overline {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

.lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--muted);
}

.section-title {
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}


/* ── 5. Utilities ────────────────────────────────────────────────────────── */
/* A small, deliberate set covering ~95% of app layout needs. If something
   is used across three projects, promote it here. */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mx-auto { margin-inline: auto; }

.p-4 { padding: 1rem; }

.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.max-w-prose { max-width: 65ch; }
/* .hidden now lives in section 8 — display overrides must come after the
   components they need to beat. */

.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.35rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.accent { color: var(--accent); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.18em; }
.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); }

/* Icons (inline <svg><use href="#…"/></svg>) */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}


/* ── 6. Components ───────────────────────────────────────────────────────── */

/* Tone pattern: badge/alert/toast variants only override --tone. */
.badge, .alert, .toast { --tone: var(--accent); }

/* ── Brand wordmark ──
   Lowercase, letter-spaced, accent — the reboot.li signature. The glowing
   dot is the system's favicon-in-text; drop the ::before rule to disable. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-decoration: none;
  white-space: nowrap;
  flex: none;               /* the site title keeps its shape */
}
.brand::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.brand:hover { color: var(--text); text-decoration: none; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: none;               /* controls keep their shape — never squish */
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-accent);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  box-shadow: none;
}

.btn-danger {
  background: var(--danger);
  color: var(--on-danger);
}
.btn-danger:hover {
  background: var(--danger-hover);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--danger) 65%, transparent);
}

.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.83rem; }

/* Touch: comfortable hit targets on coarse pointers (phones, tablets). */
@media (pointer: coarse) {
  .btn { min-height: 2.75rem; }
  .btn-sm {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.5rem 0.85rem;
  }
}

/* Square icon button — combine: class="btn btn-ghost btn-sm btn-icon" */
.btn-icon {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}
/* Flush cards let tables/media run edge-to-edge (rounded corners intact). */
.card-flush { padding: 0; overflow: hidden; }
/* Interactive cards lift slightly and lean toward the accent. */
.card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--shadow-card-hover);
}

/* ── Badges ── */
.badge {
  --tone: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  color: var(--tone);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}
.badge-neutral { --tone: var(--muted); }
.badge-success { --tone: var(--success); }
.badge-warning { --tone: var(--warning); }
.badge-danger { --tone: var(--danger); }
.badge-info { --tone: var(--info); }

/* ── Alerts ── */
.alert {
  --tone: var(--accent);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  color: var(--tone);
  font-size: 0.9rem;
}
.alert-success { --tone: var(--success); }
.alert-warning { --tone: var(--warning); }
.alert-danger { --tone: var(--danger); }
.alert-info { --tone: var(--info); }

/* ── Inputs ── */
.label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: var(--faint); }
.input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring),
    0 0 18px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.input:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 6rem; }

/* ── Tables ── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}
.table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: var(--accent-soft); }

/* ── Dropdown (<details class="dropdown">) ── */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 35;
  min-width: 11rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.dropdown[open] > .dropdown-menu { display: block; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}
.dropdown-item.danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ── Dialog (<reboot-dialog> — needs reboot-dialog.js) ──
   A zero-dependency web component over the native <dialog>: Esc, focus
   handling and backdrop come free. Rendered in light DOM, styled here. */
reboot-dialog { display: contents; }

reboot-dialog > dialog {
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(85dvh, 100%);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
reboot-dialog > dialog[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-in 0.18s ease;
}
reboot-dialog > dialog[open]::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(4px);
  animation: backdrop-in 0.18s ease;
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.dialog-title { font-size: 1.15rem; }
.dialog-body { padding: 1.25rem; overflow-y: auto; }
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border);
}

/* ── Toasts ── */
.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  --tone: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: 0.9rem;
  animation: toast-in 0.25s ease;
}
.toast::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--tone);
  box-shadow: 0 0 10px var(--tone);
  flex: none;
}
.toast-success { --tone: var(--success); }
.toast-warning { --tone: var(--warning); }
.toast-danger { --tone: var(--danger); }
.toast-info { --tone: var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
}

/* ── Progress & spinner ── */
.progress-track {
  height: 0.45rem;
  background: var(--surface-raised);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: width 0.3s ease;
}

.spinner {
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
  color: var(--muted);
  text-align: center;
}
.empty .icon { width: 2.5rem; height: 2.5rem; opacity: 0.6; }

/* ── Swatches (styleguide pages) ── */
.swatches {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.swatch {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.swatch-color {
  height: 4.5rem;
  border-bottom: 1px solid var(--border);
}
.swatch-name { padding: 0.5rem 0.65rem 0.1rem; font-size: 0.8rem; font-weight: 600; }
.swatch-value {
  padding: 0 0.65rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
}

/* ── Grid ── */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}


/* ── 7. Layout ───────────────────────────────────────────────────────────── */

.container {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  width: 100%;
}

/* Sticky, translucent topbar. Brand left, actions right. Buttons and the
   wordmark are flex: none, so they never squish — hide furniture with
   .hide-sm/.hide-md instead, and wrap only as a last resort. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
}

/* ── Sidebar (optional) ──
   Wide screens: a quiet rail in the left margin, next to the centered
   container. Narrow screens: a slide-in drawer with a backdrop. The toggle
   button (.nav-toggle) is hidden on wide screens by default. */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.95rem;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.side-nav a:hover {
  color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}
.side-nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.side-nav-label {
  padding: 0.9rem 0.75rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nav-toggle { display: none; }

/* Wide: permanent rail */
@media (min-width: 1400px) {
  #sidebar {
    position: fixed;
    top: 5rem;
    bottom: 0;
    left: 1.25rem;
    width: 12rem;
    padding: 0.25rem 0;
    overflow-y: auto;
  }
}

/* Below 1400px: slide-in drawer */
@media (max-width: 1399.98px) {
  .nav-toggle { display: inline-flex; }

  #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(16rem, 82vw);
    padding: 1rem 0.75rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  html.nav-open #sidebar { transform: none; }
  html.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  html.nav-open > body { overflow: hidden; }
}

/* ── Footer ── */
.footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 1.25rem 3.5rem;
  color: var(--faint);
  font-size: 0.85rem;
}


/* ── 8. Display overrides ────────────────────────────────────────────────── */
/* Placed last on purpose: display declarations must beat those of the
   components and utilities above (.badge, .alert, .flex, …) regardless of
   what else is on the element. */

.hidden { display: none; }

/* Hide header furniture on narrow screens (user chips, badges, labels). */
@media (max-width: 39.98rem) {   /* < 640px */
  .hide-sm { display: none; }
}
@media (max-width: 63.98rem) {   /* < 1024px */
  .hide-md { display: none; }
}