rustio-core 2.0.2

/* ============================================================================
 * RustIO admin — design system (Phase 3)
 *
 * Tailwind v4 source. Compiled at `cargo build` time by `build.rs` →
 * `$OUT_DIR/admin.css` → `include_bytes!`'d into the binary.
 *
 *   :root  — variable definitions that browsers honour even if Tailwind
 *            is bypassed (passthrough mode). Names mirrored from @theme.
 *   @theme — same tokens, exposed to Tailwind's utility generator so
 *            classes like `bg-canvas` and `text-primary` resolve.
 *   @layer base       — resets and global type rules.
 *   @layer components — named primitives templates use directly.
 *
 * The component layer is split into two zones:
 *   (a) Phase 3 canonical vocabulary — .rio-topbar, .rio-sidebar,
 *       .rio-btn, .rio-card, .rio-stat, .rio-pill, .rio-table, etc.
 *       These match the brief verbatim.
 *   (b) Page-pattern vocabulary — .rio-statusbar, .rio-page-head,
 *       .rio-form*, .rio-auth, .rio-pagination, .rio-alert,
 *       .rio-detail-list, .rio-meta, .rio-empty. Higher-level
 *       compositions templates still emit by name; each is just a
 *       thin re-application of the primitives above.
 *
 * Hard rules (carry over from the original brief):
 *   - no pure black, no pure white
 *   - all borders 0.5px (featured cards use the accent border)
 *   - font weights 400 and 500 only — never 600+
 *   - sentence case everywhere, no Title Case, no ALL CAPS
 *   - body text 16px / line-height 1.7
 *   - accent #FF6A3D appears at ≤7 locations per viewport
 * ============================================================================ */

@import "tailwindcss";

/* ----------------------------------------------------------------------------
 * Token definitions — readable by browsers without Tailwind compilation.
 * Tailwind's @theme block below holds the same values; both live here so
 * the file remains useful even in passthrough mode (when build.rs falls
 * back to a verbatim copy).
 * -------------------------------------------------------------------------- */

:root {
  /* Dark grayscale ladder — 9 steps with a subtle purple undertone */
  --color-gray-950: #1B1B1F;
  --color-gray-900: #2A2A2F;
  --color-gray-800: #36363C;
  --color-gray-700: #45454C;
  --color-gray-600: #5C5C64;
  --color-gray-500: #7A7A82;
  --color-gray-400: #9C9CA4;
  --color-gray-300: #C4C4CA;
  --color-gray-100: #F0F0F4;

  /* Light palette — 9 warm neutral steps, lightest first */
  --color-light-50:  #F7F6F2;   /* page canvas — warm off-white, NEVER #FFF */
  --color-light-100: #EEEDE7;   /* primary surface / cards */
  --color-light-200: #E4E2DA;   /* elevated surface / topbar / sidebar */
  --color-light-300: #D5D2C8;   /* default borders, dividers */
  --color-light-400: #BAB6AA;   /* secondary borders, button outlines */
  --color-light-500: #8F8B7F;   /* muted icons, disabled */
  --color-light-600: #6B6862;   /* subtitle text, secondary */
  --color-light-700: #4A4843;   /* labels, tertiary emphasis */
  --color-light-900: #1F1E1B;   /* primary text / headings — warm near-black */

  /* Single accent (#FF6A3D family) — unchanged across themes */
  --color-accent:      #FF6A3D;
  --color-accent-text: #2A0A04;
  --color-accent-deep: #5C2410;
  --color-accent-soft: #FFE5D9;   /* very pale orange tint for light-mode highlights */

  /* Type scale */
  --text-hero:  26px;   /* H1, hero headline */
  --text-stat:  22px;   /* big numbers in stat cards */
  --text-h2:    18px;   /* section headings */
  --text-h3:    16px;   /* card titles, wordmark */
  --text-body:  16px;   /* paragraphs, buttons */
  --text-meta:  14px;   /* nav links, stat labels */
  --text-small: 13px;   /* subtitles, helper text, tag pills */
  --text-mono:  13px;   /* code, hex values */
  --text-micro: 11px;   /* annotations only */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Space scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 48px;

  /* Fonts */
  /* Fonts: Inter first (picked up if the project ships a self-hosted
   * copy via its own <link>); otherwise the OS native UI font — SF Pro
   * Display on macOS, Segoe UI on Windows, Roboto on Android/Linux.
   * No CDN @import, no external webfont download at runtime — the
   * admin renders identically offline. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Interim aliases — pre-Phase-3 templates still reference these. Folded
   * into the canonical names above in Phase 6. */
  --gray-950: var(--color-gray-950);
  --gray-900: var(--color-gray-900);
  --gray-800: var(--color-gray-800);
  --gray-700: var(--color-gray-700);
  --gray-600: var(--color-gray-600);
  --gray-500: var(--color-gray-500);
  --gray-400: var(--color-gray-400);
  --gray-300: var(--color-gray-300);
  --gray-100: var(--color-gray-100);
  --accent:        var(--color-accent);
  --accent-text:   var(--color-accent-text);
  --accent-deep:   var(--color-accent-deep);
  --bg-canvas:      var(--color-canvas);
  --bg-surface:     var(--color-surface);
  --bg-elevated:    var(--color-elevated);
  --border-default: var(--color-border);
  --border-strong:  var(--color-border-strong);
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary:  var(--color-text-tertiary);
}

/* ----------------------------------------------------------------------------
 * Theme switching — semantic aliases are bound to one of two themes via
 * `data-theme` on <html>. Default is light; dark is opt-in. Components only
 * ever reference `--color-canvas`, `--color-surface`, `--color-border`, etc.,
 * so toggling the attribute flips the entire surface palette in one go.
 * -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  --color-canvas:         var(--color-light-50);
  --color-surface:        var(--color-light-100);
  --color-elevated:       var(--color-light-200);
  --color-border:         var(--color-light-300);
  --color-border-strong:  var(--color-light-400);
  --color-text-primary:   var(--color-light-900);
  --color-text-secondary: var(--color-light-600);
  --color-text-tertiary:  var(--color-light-700);
  --color-text-muted:     var(--color-light-500);
  --color-highlight-soft: var(--color-accent-soft);
}

[data-theme="dark"] {
  --color-canvas:         var(--color-gray-950);
  --color-surface:        var(--color-gray-900);
  --color-elevated:       var(--color-gray-800);
  --color-border:         var(--color-gray-700);
  --color-border-strong:  var(--color-gray-600);
  --color-text-primary:   var(--color-gray-100);
  --color-text-secondary: var(--color-gray-400);
  --color-text-tertiary:  var(--color-gray-300);
  --color-text-muted:     var(--color-gray-500);
  --color-highlight-soft: rgba(255, 106, 61, 0.12);
}

/* ----------------------------------------------------------------------------
 * Tailwind v4 theme tokens — drives auto-generation of utility classes
 * (bg-canvas, text-primary, border-default, etc.). Same values as :root
 * above. Tailwind reads this; browsers ignore it.
 * -------------------------------------------------------------------------- */

@theme {
  --color-gray-950: #1B1B1F;
  --color-gray-900: #2A2A2F;
  --color-gray-800: #36363C;
  --color-gray-700: #45454C;
  --color-gray-600: #5C5C64;
  --color-gray-500: #7A7A82;
  --color-gray-400: #9C9CA4;
  --color-gray-300: #C4C4CA;
  --color-gray-100: #F0F0F4;

  --color-light-50:  #F7F6F2;
  --color-light-100: #EEEDE7;
  --color-light-200: #E4E2DA;
  --color-light-300: #D5D2C8;
  --color-light-400: #BAB6AA;
  --color-light-500: #8F8B7F;
  --color-light-600: #6B6862;
  --color-light-700: #4A4843;
  --color-light-900: #1F1E1B;

  --color-accent:      #FF6A3D;
  --color-accent-text: #2A0A04;
  --color-accent-deep: #5C2410;
  --color-accent-soft: #FFE5D9;

  /* Light is the default — `:root` and `[data-theme="light"]` below set
   * the same surface aliases. Bound here so Tailwind utility generation
   * (`bg-canvas`, `text-primary`, etc.) resolves to a value. */
  --color-canvas:        var(--color-light-50);
  --color-surface:       var(--color-light-100);
  --color-elevated:      var(--color-light-200);
  --color-border:        var(--color-light-300);
  --color-border-strong: var(--color-light-400);
  --color-text-primary:   var(--color-light-900);
  --color-text-secondary: var(--color-light-600);
  --color-text-tertiary:  var(--color-light-700);
  --color-text-muted:     var(--color-light-500);
  --color-highlight-soft: var(--color-accent-soft);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------------------------
 * Base layer — global resets and default type rules.
 * -------------------------------------------------------------------------- */

@layer base {
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html {
    font-family: var(--font-sans);
    background: var(--color-canvas);
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    background: var(--color-canvas);
    color: var(--color-text-primary);
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
  }
  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--color-text-primary);
    letter-spacing: -0.2px;
  }
  h1 { font-size: var(--text-hero); line-height: 1.3; letter-spacing: -0.5px; }
  h2 { font-size: var(--text-h2);  line-height: 1.35; }
  h3 { font-size: var(--text-h3);  line-height: 1.4; }
  h4 { font-size: var(--text-h3);  line-height: 1.4; }
  p  { margin: 0; font-size: var(--text-body); line-height: 1.7; color: var(--color-text-secondary); }
  a  { color: var(--color-text-primary); text-decoration: none; transition: color .15s ease; }
  a:hover { color: var(--color-accent); }
  code { font-family: var(--font-mono); font-size: var(--text-mono); }
  ::selection { background: var(--color-accent); color: var(--color-accent-text); }
}

/* ============================================================================
 * Components — Phase 3 canonical vocabulary
 * Use these primitives directly from templates. One class per primitive
 * with --modifier variants where the brief calls for them.
 * ============================================================================ */

@layer components {

  /* ---- Shell layout (2-col: sidebar + main, per Phase 3 spec) ----------- */
  .rio-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--color-canvas);
  }
  .rio-main {
    width: 100%;
    max-width: 1200px;
    padding: 28px 32px;
    background: var(--color-canvas);
  }

  /* ---- Sidebar (Django-admin style left nav) ---------------------------- */
  .rio-sidebar {
    background: var(--color-elevated);
    border-right: 0.5px solid var(--color-border);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .rio-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 18px;
    text-decoration: none;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    border-bottom: 0.5px solid var(--color-border);
  }
  .rio-sidebar__mark {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--text-meta);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .rio-sidebar__wordmark {
    font-size: var(--text-h3);
    font-weight: 500;
    color: var(--color-text-primary);
    letter-spacing: -0.2px;
  }
  .rio-sidebar__section {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    padding: 12px 10px 6px;
    letter-spacing: 0;
    text-transform: none;
  }
  .rio-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
  }
  .rio-sidebar__item:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
  }
  .rio-sidebar__item.is-active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: inset 2px 0 0 var(--color-accent);
  }

  /* ---- Topbar (lifted on --color-elevated) ------------------------------ */
  .rio-topbar {
    background: var(--color-elevated);
    border-bottom: 0.5px solid var(--color-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  /* Inset variant — used by header.html inside .rio-main: rounds the
   * corners, adds a full border, and reserves bottom margin so the page
   * body content sits below it. */
  .rio-topbar--inset {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 28px;
  }
  .rio-topbar__logout-form {
    display: inline;
    margin: 0;
  }
  .rio-topbar__logout-form .rio-btn {
    padding: 6px 14px;
  }
  .rio-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-primary);
    text-decoration: none;
  }
  .rio-topbar__mark {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--text-meta);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .rio-topbar__wordmark {
    font-size: var(--text-h3);
    font-weight: 500;
    color: var(--color-text-primary);
    letter-spacing: -0.2px;
  }
  .rio-topbar__nav {
    display: flex;
    gap: 24px;
  }
  .rio-topbar__link {
    font-size: var(--text-meta);
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .rio-topbar__link:hover,
  .rio-topbar__link.is-active {
    color: var(--color-text-primary);
  }
  .rio-topbar__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-meta);
    color: var(--color-text-tertiary);
  }
  .rio-topbar__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    display: inline-block;
  }

  /* ---- Buttons ---------------------------------------------------------- */
  .rio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 22px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border-strong);
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
  }
  .rio-btn:hover { background: var(--color-surface); }
  .rio-btn:active { transform: scale(0.98); }

  .rio-btn--primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    font-weight: 500;
  }
  .rio-btn--primary:hover { filter: brightness(1.05); background: var(--color-accent); color: var(--color-accent-text); }
  .rio-btn--primary:active { transform: scale(0.98); }

  .rio-btn--secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 0.5px solid var(--color-border-strong);
    font-weight: 400;
  }
  .rio-btn--secondary:hover { background: var(--color-surface); }

  .rio-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-secondary);
    padding: 8px 0;
    font-weight: 400;
  }
  .rio-btn--ghost:hover { background: transparent; color: var(--color-accent); }

  .rio-btn--block {
    width: 100%;
    justify-content: center;
  }

  /* ---- Cards ------------------------------------------------------------ */
  .rio-card {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
  }
  .rio-card--featured { border-color: var(--color-accent); }
  .rio-card__title {
    font-size: var(--text-h3);
    font-weight: 500;
    margin: 0 0 8px;
  }
  .rio-card__meta {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
  }

  /* ---- Stat (dashboard primitives) -------------------------------------- */
  .rio-stat {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color .15s ease;
    display: block;
  }
  .rio-stat:hover { border-color: var(--color-border-strong); }
  .rio-stat--featured { border-color: var(--color-accent); }
  .rio-stat__value {
    font-size: var(--text-stat);
    font-weight: 500;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
    line-height: 1.2;
  }
  .rio-stat--featured .rio-stat__value { color: var(--color-accent); }
  .rio-stat__label {
    font-size: var(--text-meta);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
  }

  /* ---- Tag pill --------------------------------------------------------- */
  .rio-pill {
    display: inline-block;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    padding: 5px 12px;
    border: 0.5px solid var(--color-border);
    border-radius: 999px;
  }
  /* Lift variant — adds the spacing pattern from the brief so the pill
   * sits cleanly above a page hero (rio-page-head). */
  .rio-pill--lift { margin-bottom: var(--space-5); }

  /* ---- Stat grid -------------------------------------------------------- */
  .rio-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
  }

  /* ---- Form fields ------------------------------------------------------ */
  .rio-input,
  .rio-select {
    width: 100%;
    height: 44px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 14px;
    font-size: var(--text-body);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    transition: border-color .15s ease;
  }
  .rio-textarea {
    width: 100%;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: var(--text-body);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    min-height: 100px;
    transition: border-color .15s ease;
    resize: vertical;
  }
  .rio-input:focus,
  .rio-select:focus,
  .rio-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }
  .rio-input::placeholder,
  .rio-textarea::placeholder {
    color: var(--color-text-secondary);
  }
  .rio-label {
    display: block;
    font-size: var(--text-meta);
    color: var(--color-text-secondary);
    margin-bottom: 6px;
  }

  /* ---- Table ------------------------------------------------------------ */
  .rio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
    margin: 0;
  }
  .rio-table thead th {
    text-align: left;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    padding: 0 var(--space-3) var(--space-3) 0;
    border-bottom: 0.5px solid var(--color-border);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  .rio-table tbody td {
    padding: var(--space-4) var(--space-3) var(--space-4) 0;
    border-bottom: 0.5px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: var(--text-body);
    font-weight: 400;
    vertical-align: middle;
  }
  .rio-table thead th:last-child,
  .rio-table tbody td:last-child {
    padding-right: 0;
    text-align: right;
  }
  .rio-table tbody tr:last-child td { border-bottom: none; }
  .rio-table a {
    color: var(--color-text-primary);
    border-bottom: 0.5px solid var(--color-border);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
  }
  .rio-table a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }

  /* ---- Toolbar ---------------------------------------------------------- */
  .rio-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
  }
  .rio-toolbar__count {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
  }

  /* ======================================================================
   * Page-pattern vocabulary — higher-level compositions still emitted by
   * templates. Each is a thin re-skin of the Phase 3 primitives above.
   * ====================================================================== */

  /* Status bar — quiet footer strip at the bottom of .rio-main. */
  .rio-statusbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-top: 0.5px solid var(--color-border);
    background: var(--color-canvas);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
  }
  .rio-statusbar__sep { color: var(--color-border); }
  .rio-statusbar__spacer { flex: 1; }

  /* Page-head pattern used by every interior admin page. */
  .rio-page-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
    max-width: 640px;
  }
  .rio-page-head > h1 { margin: 0; }
  .rio-page-head > p  { color: var(--color-text-secondary); }
  .rio-page-head--with-action {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    max-width: none;
  }
  .rio-page-head--with-action > div { max-width: 640px; }

  /* Word-level accent inside a hero headline. */
  .rio-accent-word { color: var(--color-accent); }

  /* Form scaffold used by .rio-form blocks. The fields themselves use
   * .rio-form__input rather than the Phase 3 .rio-input — the templates
   * still emit the BEM-style names; Phase 6 converges them. */
  .rio-form { max-width: 720px; }
  .rio-form__field { margin-bottom: var(--space-6); }
  .rio-form__label {
    display: block;
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
  }
  .rio-form__required { color: var(--color-accent); font-weight: 400; }
  .rio-form__input {
    width: 100%;
    height: 44px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 14px;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    outline: none;
    transition: border-color .15s ease;
  }
  .rio-form__input::placeholder { color: var(--color-text-secondary); }
  .rio-form__input:focus { border-color: var(--color-accent); }
  .rio-form__input--inline { width: auto; min-width: 12rem; }
  .rio-form__input--textarea {
    height: auto;
    min-height: 110px;
    padding: var(--space-3) 14px;
    line-height: 1.6;
    resize: vertical;
  }
  .rio-form__check {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
  }
  .rio-form__help {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    line-height: 1.5;
  }
  .rio-form__help--error { color: var(--color-accent); }
  .rio-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 0.5px solid var(--color-border);
  }

  /* Auth pages (login / forbidden / not_found) — centred 380px card on
   * the canvas. body.admin-auth supplies the centring; .rio-auth is the
   * card itself. */
  body.admin-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-6) var(--space-4);
  }
  .rio-auth {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6);
  }
  .rio-auth__header {
    text-align: center;
    margin-bottom: var(--space-7);
  }
  .rio-auth__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 500;
    font-size: var(--text-h3);
    margin-bottom: var(--space-4);
  }
  .rio-auth__title {
    font-size: var(--text-hero);
    font-weight: 500;
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    margin: 0;
  }
  .rio-auth__subtitle {
    margin-top: var(--space-1);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
  }

  /* Pagination chips at the bottom of list pages. */
  .rio-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
  }
  .rio-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: transparent;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-right: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: 400;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
  }
  .rio-pagination__link:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
  }
  .rio-pagination__link--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
  }

  /* Alerts. */
  .rio-alert {
    background: transparent;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-body);
    margin-bottom: var(--space-5);
  }
  .rio-alert--danger { border-color: var(--color-accent); }

  /* Empty state inside cards (.actions / .suggestion templates). */
  .rio-empty {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--color-text-secondary);
  }
  .rio-empty p { margin: 0 0 var(--space-2); }
  .rio-empty p:last-child { margin-bottom: 0; }
  .rio-empty strong { color: var(--color-text-primary); font-weight: 500; }

  /* Two-column dl grid (profile / suggestion-review summary). */
  .rio-detail-list {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: var(--space-3) var(--space-5);
    margin: 0;
  }
  .rio-detail-list dt {
    font-size: var(--text-meta);
    color: var(--color-text-secondary);
    margin: 0;
  }
  .rio-detail-list dd {
    margin: 0;
    font-size: var(--text-body);
    color: var(--color-text-primary);
  }

  /* Small muted annotation (404 / 403 status line above a heading). */
  .rio-meta {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2);
  }

  /* Status cells inside list-page tables. The Rust list renderer emits
   * `<span class="badge-status" data-status="…">` — Phase 3 keeps status
   * as plain sentence-case text (no coloured pills), so this neutralises
   * the legacy pill styling. */
  .badge-status,
  [data-status] {
    display: inline;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  .badge-status::before,
  .badge-status::after,
  [data-status]::before,
  [data-status]::after { content: none; }

  /* Tabular-num utility for currency / count columns. */
  .rio-num { font-variant-numeric: tabular-nums; }
}

/* ============================================================================
 * Phase 4 — Django-admin style internal-page primitives
 *
 * Page header with breadcrumb + actions; detail-grid with side column;
 * meta-list, activity timeline; canonical empty-state for list views.
 * These compose with the Phase 3 .rio-* primitives above — they are
 * additive, not replacements.
 * ============================================================================ */

@layer components {

  /* ---- Page header (breadcrumb + title + right-aligned actions) -------- */
  .rio-page-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: 6px;
    margin: var(--space-6) 0 var(--space-5);
  }
  .rio-page-header > h1 {
    grid-column: 1;
    margin: 0;
  }
  .rio-page-header__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 10px;
    align-self: center;
  }

  .rio-breadcrumb {
    grid-column: 1;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .rio-breadcrumb a { color: var(--color-text-secondary); }
  .rio-breadcrumb a:hover { color: var(--color-text-primary); }
  .rio-breadcrumb__sep { color: var(--color-text-muted); }

  /* ---- List-view pagination (replaces the Phase-3 .rio-pagination chips
   *      so list.html can show a Django-style "Showing N of M / page links"
   *      footer). The old chip list still exists for templates that pass
   *      a structured `pagination.links` array — both selectors below are
   *      narrowly scoped. */
  .rio-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    font-size: var(--text-meta);
    color: var(--color-text-secondary);
  }
  .rio-pagination__pages {
    display: flex;
    gap: var(--space-3);
  }
  .rio-pagination__pages a {
    color: var(--color-text-secondary);
  }
  .rio-pagination__pages a:hover {
    color: var(--color-text-primary);
  }
  .rio-pagination__pages a.is-active {
    color: var(--color-accent);
    font-weight: 500;
  }

  /* ---- Detail / edit grid (main column + 320px side column) ------------ */
  .rio-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-5);
    align-items: start;
  }
  .rio-detail-main { max-width: 720px; }
  .rio-detail-side { display: flex; flex-direction: column; gap: var(--space-3); }
  .rio-detail-single { max-width: 720px; }

  .rio-field { margin-bottom: var(--space-4); }
  .rio-field:last-child { margin-bottom: 0; }

  /* ---- Two-column dl used by detail-page "About" cards ----------------- */
  .rio-meta-list {
    display: grid;
    grid-template-columns: 90px 1fr;
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    font-size: var(--text-meta);
    margin: 0;
  }
  .rio-meta-list dt { color: var(--color-text-secondary); margin: 0; }
  .rio-meta-list dd { color: var(--color-text-primary); margin: 0; }

  /* ---- Activity timeline ----------------------------------------------- */
  .rio-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .rio-timeline li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2) 0;
    font-size: var(--text-meta);
    color: var(--color-text-secondary);
    border-bottom: 0.5px solid var(--color-border);
  }
  .rio-timeline li:last-child { border-bottom: none; }
  .rio-timeline__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex-shrink: 0;
  }

  /* ---- Sidebar counts + grouped sections ------------------------------- */
  .rio-sidebar__group { margin-bottom: 18px; }
  .rio-sidebar__count {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin-left: auto;
  }
  .rio-sidebar__item:hover .rio-sidebar__count,
  .rio-sidebar__item.is-active .rio-sidebar__count {
    color: var(--color-text-secondary);
  }

  /* ---- Theme toggle (topbar ghost button) ------------------------------ */
  .rio-theme-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 0.5px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-body);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .rio-theme-toggle:hover {
    color: var(--color-text-primary);
    background: var(--color-surface);
  }
}

/* ============================================================================
 * Phase 4 — Empty state override
 *
 * The original Phase 3 `.rio-empty` was a text-only padding box meant to live
 * inside a `.rio-card`. The Phase 4 list view renders the empty state stand-
 * alone (no surrounding card), so it now carries its own surface + dashed
 * border. The earlier definition above is intentionally overridden — keep
 * the new shape; older callers were updated to render outside the card.
 * ============================================================================ */

@layer components {
  .rio-empty {
    background: var(--color-surface);
    border: 0.5px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: 56px 32px;
    text-align: center;
    color: var(--color-text-secondary);
  }
  .rio-empty p { max-width: 380px; margin: var(--space-2) auto 0; }
  .rio-empty strong { color: var(--color-text-primary); font-weight: 500; }
}

/* ============================================================================
 * Phase 4 — Light-mode component overrides
 *
 * Components reference semantic aliases (`--color-surface`,
 * `--color-border`, …) which already flip with `data-theme`. These rules
 * cover the few cases where the brief calls for an explicitly lighter
 * surface or the soft-accent highlight instead of the dark-mode default.
 * ============================================================================ */

/* Form-field surfaces: drop fields to canvas-50 so they stand off the
 * surface-100 cards behind them; lift on focus to barely-perceptible #FFFDF9
 * (the one allowed near-white exception). */
[data-theme="light"] .rio-input,
[data-theme="light"] .rio-select,
[data-theme="light"] .rio-textarea,
[data-theme="light"] .rio-form__input {
  background: var(--color-light-50);
  border-color: var(--color-light-300);
}
[data-theme="light"] .rio-input:focus,
[data-theme="light"] .rio-select:focus,
[data-theme="light"] .rio-textarea:focus,
[data-theme="light"] .rio-form__input:focus {
  border-color: var(--color-accent);
  background: #FFFDF9;
}

/* Selected / active rows use the soft orange tint, not full saturation. */
[data-theme="light"] .rio-sidebar__item.is-active {
  background: var(--color-highlight-soft);
  color: var(--color-text-primary);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
[data-theme="light"] .rio-table tbody tr.is-selected {
  background: var(--color-highlight-soft);
}
[data-theme="light"] .rio-stat--featured {
  background: var(--color-highlight-soft);
  border-color: var(--color-accent);
}

/* Table zebra (light only — dark stays flat). Hover lifts on the warm tint. */
[data-theme="light"] .rio-table tbody tr {
  transition: background .15s ease;
}
[data-theme="light"] .rio-table tbody tr:nth-child(even) {
  background: var(--color-light-50);
}
[data-theme="light"] .rio-table tbody tr:hover {
  background: var(--color-highlight-soft);
}

/* Sidebar item hover: in light mode use a soft canvas wash rather than the
 * darker surface tone the dark theme uses (which would feel muddy). */
[data-theme="light"] .rio-sidebar__item:hover {
  background: var(--color-light-50);
  color: var(--color-text-primary);
}

/* Scrollbars — make light-mode chrome quieter than browser defaults. */
[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--color-light-300);
  border-radius: 999px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-light-400);
}
[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }

/* Disabled state — flat 0.5 opacity, no special color. */
.rio-btn[disabled],
.rio-input[disabled],
.rio-select[disabled],
.rio-textarea[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive — collapse detail grid to single column. */
@media (max-width: 960px) {
  .rio-detail-grid { grid-template-columns: 1fr; }
}