rindle

/* generated by brandbook/src/admin-css-build.mjs from tokens.json - do not edit by hand */

:root {
  --rindle-ink: #101417;
  --rindle-deep-current: #123A35;
  --rindle-deep-current-hover: #1A4A43;
  --rindle-deep-current-active: #0D2B27;
  --rindle-rindle-green: #32D08C;
  --rindle-rind-lime: #CFEF6A;
  --rindle-warm-shell: #F7F4EA;
  --rindle-porcelain: #FBFEFC;
  --rindle-mist: #E3EAE5;
  --rindle-slate: #52605A;
  --rindle-border: #D9E0DA;
  --rindle-border-strong: #75847B;
  --rindle-ready: #0E7A51;
  --rindle-processing: #6D5DD3;
  --rindle-warning: #9A5C00;
  --rindle-danger: #C83232;
  --rindle-quarantine: #5A4B6B;
  --rindle-info: #2C63D6;
  --rindle-ready-surface: #E0F0E8;
  --rindle-processing-surface: #F4F2FD;
  --rindle-warning-surface: #F6EBD9;
  --rindle-danger-surface: #FCEDED;
  --rindle-quarantine-surface: #ECE7F2;
  --rindle-info-surface: #E5ECFA;
  --rindle-code-bg: #0E1316;
  --rindle-code-text: #D7F8E7;
  --rindle-dark-bg: #0E1316;
  --rindle-dark-surface: #161E23;
  --rindle-dark-border: #2C3840;
  --rindle-dark-border-strong: #5C6E66;
  --rindle-dark-text: #F1F7F3;
  --rindle-dark-text-secondary: #A3B5AC;
  --rindle-dark-ready: #4FD79C;
  --rindle-dark-processing: #A99DEB;
  --rindle-dark-warning: #E2A85B;
  --rindle-dark-danger: #F09090;
  --rindle-dark-quarantine: #BDAED6;
  --rindle-dark-info: #85AAF5;
  --rindle-dark-ready-surface: #16241E;
  --rindle-dark-processing-surface: #1C1E2B;
  --rindle-dark-warning-surface: #241F16;
  --rindle-dark-danger-surface: #2A1A1A;
  --rindle-dark-quarantine-surface: #211C2B;
  --rindle-dark-info-surface: #161D2B;
  --rindle-elevation-0: #0E1316;
  --rindle-elevation-1: #161E23;
  --rindle-elevation-2: #1E282E;
  --rindle-elevation-3: #27343B;

  /* semantic roles (light) */
  --rindle-surface: #F7F4EA;
  --rindle-surface-raised: #FBFEFC;
  --rindle-surface-sunken: #E3EAE5;
  --rindle-text: #101417;
  --rindle-text-secondary: #52605A;
  --rindle-text-on-brand: #F7F4EA;
  --rindle-brand: #123A35;
  --rindle-brand-hover: #1A4A43;
  --rindle-brand-active: #0D2B27;
  --rindle-accent: #32D08C;
  --rindle-accent-energetic: #CFEF6A;
  --rindle-border-subtle: #D9E0DA;
  --rindle-border-strong: #75847B;
  --rindle-focus-ring: #123A35;
  --rindle-status-ready: #0E7A51;
  --rindle-status-processing: #6D5DD3;
  --rindle-status-warning: #9A5C00;
  --rindle-status-danger: #C83232;
  --rindle-status-quarantine: #5A4B6B;
  --rindle-status-info: #2C63D6;
  --rindle-status-ready-surface: #E0F0E8;
  --rindle-status-processing-surface: #F4F2FD;
  --rindle-status-warning-surface: #F6EBD9;
  --rindle-status-danger-surface: #FCEDED;
  --rindle-status-quarantine-surface: #ECE7F2;
  --rindle-status-info-surface: #E5ECFA;

  /* typography */
  --rindle-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --rindle-font-sans: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --rindle-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rindle-text-hero-size: 64px;
  --rindle-text-hero-line: 1.02;
  --rindle-text-hero-weight: 700;
  --rindle-text-h1-size: 44px;
  --rindle-text-h1-line: 1.05;
  --rindle-text-h1-weight: 700;
  --rindle-text-h2-size: 30px;
  --rindle-text-h2-line: 1.15;
  --rindle-text-h2-weight: 600;
  --rindle-text-h3-size: 22px;
  --rindle-text-h3-line: 1.25;
  --rindle-text-h3-weight: 600;
  --rindle-text-body-size: 17px;
  --rindle-text-body-line: 1.6;
  --rindle-text-body-weight: 400;
  --rindle-text-small-size: 14px;
  --rindle-text-small-line: 1.45;
  --rindle-text-small-weight: 400;
  --rindle-text-code-size: 14px;
  --rindle-text-code-line: 1.55;
  --rindle-text-code-weight: 400;

  /* spacing */
  --rindle-space-1: 4px;
  --rindle-space-2: 8px;
  --rindle-space-3: 12px;
  --rindle-space-4: 16px;
  --rindle-space-5: 24px;
  --rindle-space-6: 32px;
  --rindle-space-7: 48px;
  --rindle-space-8: 64px;

  /* radii */
  --rindle-radius-control-sm: 8px;
  --rindle-radius-control: 10px;
  --rindle-radius-card: 14px;
  --rindle-radius-panel: 20px;
  --rindle-radius-pill: 999px;

  /* fluid display type (clamp on hero/h1/h2/h3 only) */
  --rindle-text-hero-fluid: clamp(40px, 28px + 3.4vw, 64px);
  --rindle-text-h1-fluid: clamp(32px, 24px + 2.2vw, 44px);
  --rindle-text-h2-fluid: clamp(24px, 20px + 1.4vw, 30px);
  --rindle-text-h3-fluid: clamp(20px, 18px + 0.7vw, 22px);

  /* fluid space */
  --rindle-space-fluid-gutter: clamp(16px, 12px + 1.25vw, 32px);
  --rindle-space-fluid-section: clamp(32px, 24px + 2.5vw, 64px);

  /* named breakpoints */
  --rindle-bp-sm: 480px;
  --rindle-bp-md: 760px;
  --rindle-bp-lg: 1024px;
  --rindle-bp-xl: 1280px;

  /* dark elevation ladder (semantic surface-lightness tint, not inversion) */
  --rindle-elevation-0: #0E1316;
  --rindle-elevation-1: #161E23;
  --rindle-elevation-2: #1E282E;
  --rindle-elevation-3: #27343B;

  /* borders, shadow, focus, motion */
  --rindle-border-rule-subtle: 1px solid #D9E0DA;
  --rindle-border-rule-strong: 1px solid #75847B;
  --rindle-shadow-card: 0 1px 2px rgba(16, 20, 23, 0.06), 0 8px 24px rgba(16, 20, 23, 0.06);
  --rindle-shadow-raised: 0 1px 2px rgba(16, 20, 23, 0.06);
  --rindle-shadow-overlay: 0 18px 40px -22px rgba(16, 20, 23, 0.32);
  --rindle-focus-width: 2px;
  --rindle-focus-offset: 2px;
  --rindle-motion-press: 120ms;
  --rindle-motion-popover: 160ms;
  --rindle-motion-toast: 200ms;
  --rindle-motion-transition: 300ms;
  --rindle-motion-diagram: 600ms;
  --rindle-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --rindle-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --rindle-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --rindle-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --rindle-admin-target-min: 44px;
}

[data-theme="dark"] {
  --rindle-surface: #0E1316;
  --rindle-surface-raised: #161E23;
  --rindle-surface-sunken: #101417;
  --rindle-text: #F1F7F3;
  --rindle-text-secondary: #A3B5AC;
  --rindle-text-on-brand: #101417;
  --rindle-brand: #32D08C;
  --rindle-brand-hover: #4FD79C;
  --rindle-brand-active: #32D08C;
  --rindle-accent: #32D08C;
  --rindle-accent-energetic: #CFEF6A;
  --rindle-border-subtle: #2C3840;
  --rindle-border-strong: #5C6E66;
  --rindle-focus-ring: #32D08C;
  --rindle-status-ready: #4FD79C;
  --rindle-status-processing: #A99DEB;
  --rindle-status-warning: #E2A85B;
  --rindle-status-danger: #F09090;
  --rindle-status-quarantine: #BDAED6;
  --rindle-status-info: #85AAF5;
  --rindle-status-ready-surface: #16241E;
  --rindle-status-processing-surface: #1C1E2B;
  --rindle-status-warning-surface: #241F16;
  --rindle-status-danger-surface: #2A1A1A;
  --rindle-status-quarantine-surface: #211C2B;
  --rindle-status-info-surface: #161D2B;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --rindle-surface: #0E1316;
    --rindle-surface-raised: #161E23;
    --rindle-surface-sunken: #101417;
    --rindle-text: #F1F7F3;
    --rindle-text-secondary: #A3B5AC;
    --rindle-text-on-brand: #101417;
    --rindle-brand: #32D08C;
    --rindle-brand-hover: #4FD79C;
    --rindle-brand-active: #32D08C;
    --rindle-accent: #32D08C;
    --rindle-accent-energetic: #CFEF6A;
    --rindle-border-subtle: #2C3840;
    --rindle-border-strong: #5C6E66;
    --rindle-focus-ring: #32D08C;
    --rindle-status-ready: #4FD79C;
    --rindle-status-processing: #A99DEB;
    --rindle-status-warning: #E2A85B;
    --rindle-status-danger: #F09090;
    --rindle-status-quarantine: #BDAED6;
    --rindle-status-info: #85AAF5;
    --rindle-status-ready-surface: #16241E;
    --rindle-status-processing-surface: #1C1E2B;
    --rindle-status-warning-surface: #241F16;
    --rindle-status-danger-surface: #2A1A1A;
    --rindle-status-quarantine-surface: #211C2B;
    --rindle-status-info-surface: #161D2B;
  }

  [data-theme="auto"] .rindle-admin-nav {
    background: var(--rindle-elevation-1);
  }

  [data-theme="auto"] .rindle-admin-confirm-dialog,
  [data-theme="auto"] .rindle-admin-drawer,
  [data-theme="auto"] .rindle-admin-confirm-panel {
    background: var(--rindle-elevation-3);
  }

  [data-theme="auto"] .rindle-admin-toast,
  [data-theme="auto"] .rindle-admin-table--sticky .rindle-admin-table__head {
    background: var(--rindle-elevation-2);
  }
}

.rindle-admin-shell,
.rindle-admin-shell * {
  box-sizing: border-box;
}

.rindle-admin-shell {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: var(--rindle-space-6);
  background: var(--rindle-surface);
  color: var(--rindle-text);
  font-family: var(--rindle-font-sans);
  font-size: var(--rindle-text-body-size);
  line-height: var(--rindle-text-body-line);
  padding-inline: var(--rindle-space-fluid-gutter);
  transition: background-color var(--rindle-motion-transition) var(--rindle-motion-easing-standard), color var(--rindle-motion-transition) var(--rindle-motion-easing-standard);
}

.rindle-admin-shell__main {
  min-width: 0;
  max-width: var(--rindle-bp-xl);
  padding: var(--rindle-space-6);
  margin-block: var(--rindle-space-fluid-section);
}

.rindle-admin-nav {
  min-width: 0;
  padding: var(--rindle-space-5);
  background: var(--rindle-surface-raised);
  border-right: var(--rindle-border-rule-subtle);
  box-shadow: var(--rindle-shadow-raised);
}

[data-theme="dark"] .rindle-admin-nav {
  background: var(--rindle-elevation-1);
}

.rindle-admin-nav__brand {
  margin: 0 0 var(--rindle-space-5);
  font-family: var(--rindle-font-display);
  font-size: var(--rindle-text-h3-fluid);
  line-height: var(--rindle-text-h3-line);
  font-weight: var(--rindle-text-h3-weight);
}

.rindle-admin-nav__list {
  display: grid;
  gap: var(--rindle-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rindle-admin-nav__item {
  min-height: var(--rindle-admin-target-min);
  display: flex;
  align-items: center;
  gap: var(--rindle-space-2);
  padding: var(--rindle-space-2) var(--rindle-space-3);
  border-radius: var(--rindle-radius-control-sm);
  color: var(--rindle-text-secondary);
  text-decoration: none;
  transition: background-color var(--rindle-motion-press) var(--rindle-motion-easing), color var(--rindle-motion-press) var(--rindle-motion-easing);
}

.rindle-admin-nav__item:hover,
.rindle-admin-nav__item[aria-current="page"] {
  background: var(--rindle-surface-sunken);
  color: var(--rindle-text);
}

.rindle-admin-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--rindle-surface-raised);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-card);
  overflow: hidden;
  font-size: var(--rindle-text-small-size);
  line-height: var(--rindle-text-small-line);
}

.rindle-admin-table__head {
  color: var(--rindle-text);
  font-family: var(--rindle-font-display);
  font-weight: 600;
}

.rindle-admin-table__row {
  min-height: var(--rindle-admin-target-min);
  border-top: var(--rindle-border-rule-subtle);
  color: var(--rindle-text);
}

.rindle-admin-table__row:hover,
.rindle-admin-table__row:focus-within {
  background: var(--rindle-surface-sunken);
}

.rindle-admin-table__row[aria-busy="true"],
.rindle-admin-table__row[data-rindle-admin-state="loading"] {
  color: var(--rindle-text-secondary);
  background: var(--rindle-surface-raised);
}

.rindle-admin-table__cell {
  padding: var(--rindle-space-3) var(--rindle-space-4);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.rindle-admin-status-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: var(--rindle-space-2);
  padding: var(--rindle-space-1) var(--rindle-space-3);
  border-radius: var(--rindle-radius-pill);
  font-size: var(--rindle-text-small-size);
  line-height: var(--rindle-text-small-line);
  font-weight: 600;
}

.rindle-admin-status-chip::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  flex: 0 0 auto;
  border-radius: var(--rindle-radius-pill);
  background: currentColor;
}

.rindle-admin-status-chip--ready {
  color: var(--rindle-status-ready);
  background: var(--rindle-status-ready-surface, var(--rindle-surface-raised));
}

.rindle-admin-status-chip--processing {
  color: var(--rindle-status-processing);
  background: var(--rindle-status-processing-surface, var(--rindle-surface-raised));
}

.rindle-admin-status-chip--warning {
  color: var(--rindle-status-warning);
  background: var(--rindle-status-warning-surface, var(--rindle-surface-raised));
}

.rindle-admin-status-chip--danger {
  color: var(--rindle-status-danger);
  background: var(--rindle-status-danger-surface, var(--rindle-surface-raised));
}

.rindle-admin-status-chip--quarantine {
  color: var(--rindle-status-quarantine);
  background: var(--rindle-status-quarantine-surface, var(--rindle-surface-raised));
}

.rindle-admin-status-chip--info {
  color: var(--rindle-status-info);
  background: var(--rindle-status-info-surface, var(--rindle-surface-raised));
}

.rindle-admin-button {
  min-height: var(--rindle-admin-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rindle-space-2);
  padding: var(--rindle-space-2) var(--rindle-space-4);
  border: 1px solid transparent;
  border-radius: var(--rindle-radius-control);
  font-family: var(--rindle-font-sans);
  font-size: var(--rindle-text-small-size);
  line-height: var(--rindle-text-small-line);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--rindle-motion-press) var(--rindle-motion-easing), background-color var(--rindle-motion-press) var(--rindle-motion-easing), border-color var(--rindle-motion-press) var(--rindle-motion-easing), color var(--rindle-motion-press) var(--rindle-motion-easing);
}

.rindle-admin-button:active {
  transform: translateY(1px);
}

.rindle-admin-button:disabled,
.rindle-admin-button[aria-disabled="true"] {
  background: var(--rindle-surface-sunken);
  border-color: var(--rindle-border-subtle);
  color: var(--rindle-text-secondary);
  cursor: not-allowed;
  transform: none;
}

.rindle-admin-button--primary {
  background: var(--rindle-brand);
  color: var(--rindle-text-on-brand);
}

.rindle-admin-button--primary:hover {
  background: var(--rindle-brand-hover);
}

.rindle-admin-button--secondary {
  background: var(--rindle-surface-raised);
  border-color: var(--rindle-border-strong);
  color: var(--rindle-text);
}

.rindle-admin-button--secondary:hover {
  background: var(--rindle-surface-sunken);
}

.rindle-admin-button--quiet {
  background: transparent;
  color: var(--rindle-text);
}

.rindle-admin-button--quiet:hover {
  background: var(--rindle-surface-sunken);
}

.rindle-admin-button--destructive {
  background: var(--rindle-status-danger);
  color: var(--rindle-text-on-brand);
}

.rindle-admin-button--destructive:hover {
  background: var(--rindle-status-danger-surface);
  color: var(--rindle-status-danger);
  border-color: var(--rindle-status-danger);
}

.rindle-admin-actions-directory,
.rindle-admin-action-panel,
[data-rindle-admin-action-panel] {
  min-width: 0;
}

.rindle-admin-actions-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rindle-space-2);
  margin-bottom: var(--rindle-space-6);
  max-width: 100%;
}

.rindle-admin-actions-tab {
  min-height: var(--rindle-admin-target-min);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--rindle-space-2) var(--rindle-space-3);
  border: 1px solid var(--rindle-border-strong);
  border-radius: var(--rindle-radius-control);
  background: var(--rindle-surface-raised);
  color: var(--rindle-text);
  font: inherit;
  font-size: var(--rindle-text-small-size);
  line-height: var(--rindle-text-small-line);
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}

.rindle-admin-actions-tab:hover,
.rindle-admin-actions-tab.active {
  background: var(--rindle-surface-sunken);
  border-color: var(--rindle-brand);
}

[data-rindle-admin-form] {
  max-width: 720px;
  display: grid;
  gap: var(--rindle-space-4);
}

[data-rindle-admin-form] label {
  display: grid;
  gap: var(--rindle-space-2);
  max-width: 100%;
  color: var(--rindle-text);
}

/* Text-like controls only: the box treatment (full-width, padded, bordered,
   surface-filled) is wrong for native checkbox/radio toggles, which are excluded
   here and handled by the dedicated rule below (WR-01). */
[data-rindle-admin-input]:where(:not([type="checkbox"]):not([type="radio"])) {
  min-height: var(--rindle-admin-target-min);
  width: 100%;
  max-width: 100%;
  padding: var(--rindle-space-2) var(--rindle-space-3);
  border: 1px solid var(--rindle-border-strong);
  border-radius: var(--rindle-radius-control-sm);
  background: var(--rindle-surface-raised);
  color: var(--rindle-text);
  font: inherit;
  overflow-wrap: anywhere;
}

/* Native checkbox/radio selection controls keep their intrinsic box size and
   adopt the brand accent rather than the stretched text-input treatment. */
input[type="checkbox"][data-rindle-admin-input],
input[type="radio"][data-rindle-admin-input] {
  width: auto;
  min-height: auto;
  accent-color: var(--rindle-brand);
}

[data-rindle-admin-input]:hover,
[data-rindle-admin-confirm-input]:hover {
  border-color: var(--rindle-brand);
}

[data-rindle-admin-input][aria-invalid="true"],
[data-rindle-admin-confirm-input][aria-invalid="true"] {
  border-color: var(--rindle-status-danger);
  background: var(--rindle-status-danger-surface);
}

[data-rindle-admin-input]:disabled,
[data-rindle-admin-input][aria-disabled="true"],
[data-rindle-admin-confirm-input]:disabled,
[data-rindle-admin-confirm-input][aria-disabled="true"] {
  background: var(--rindle-surface-sunken);
  border-color: var(--rindle-border-subtle);
  color: var(--rindle-text-secondary);
  cursor: not-allowed;
}

textarea[data-rindle-admin-input] {
  min-height: calc(var(--rindle-admin-target-min) * 2);
  resize: vertical;
}

[data-rindle-admin-confirm-input] {
  font-family: var(--rindle-font-mono);
}

[data-rindle-admin-form] pre {
  margin: var(--rindle-space-2) 0;
  max-width: 100%;
  font-family: var(--rindle-font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[data-rindle-admin-submit] {
  min-height: var(--rindle-admin-target-min);
  max-width: 100%;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rindle-space-2);
  padding: var(--rindle-space-2) var(--rindle-space-4);
  border: 1px solid transparent;
  border-radius: var(--rindle-radius-control);
  background: var(--rindle-brand);
  color: var(--rindle-text-on-brand);
  font: inherit;
  font-size: var(--rindle-text-small-size);
  line-height: var(--rindle-text-small-line);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}

/* Destructive submit buttons must read as dangerous. The base [data-rindle-admin-submit]
   rule above paints every submit button brand-colored at equal specificity to
   .rindle-admin-button--destructive (and wins on source order), so the destructive intent
   needs this higher-specificity override to actually paint red. */
[data-rindle-admin-submit].rindle-admin-button--destructive {
  background: var(--rindle-status-danger);
  color: var(--rindle-text-on-brand);
}

[data-rindle-admin-submit].rindle-admin-button--destructive:hover {
  background: var(--rindle-status-danger-surface);
  color: var(--rindle-status-danger);
  border-color: var(--rindle-status-danger);
}

[data-rindle-admin-submit][aria-busy="true"],
.rindle-admin-button[aria-busy="true"],
.rindle-admin-button--loading {
  color: var(--rindle-text-secondary);
  cursor: progress;
  transform: none;
}

[data-rindle-admin-submit]:disabled,
[data-rindle-admin-submit][aria-disabled="true"] {
  background: var(--rindle-surface-sunken);
  border-color: var(--rindle-border-subtle);
  color: var(--rindle-text-secondary);
  cursor: not-allowed;
  transform: none;
}

.rindle-admin-theme-picker {
  min-height: var(--rindle-admin-target-min);
  display: inline-flex;
  align-items: center;
  gap: var(--rindle-space-1);
  padding: 0 var(--rindle-space-1);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-control);
  background: var(--rindle-surface-raised);
}

.rindle-admin-theme-picker__option {
  min-height: var(--rindle-admin-target-min);
  padding: var(--rindle-space-1) var(--rindle-space-3);
  border: 0;
  border-radius: var(--rindle-radius-control-sm);
  background: transparent;
  color: var(--rindle-text-secondary);
  font: inherit;
  cursor: pointer;
}

.rindle-admin-theme-picker__option[aria-pressed="true"] {
  background: var(--rindle-brand);
  color: var(--rindle-text-on-brand);
}

.rindle-admin-theme-picker__option:hover {
  background: var(--rindle-surface-sunken);
  color: var(--rindle-text);
}

.rindle-admin-theme-picker__option:disabled,
.rindle-admin-theme-picker__option[aria-disabled="true"] {
  color: var(--rindle-text-secondary);
  cursor: not-allowed;
}

.rindle-admin-confirm-dialog {
  max-width: 560px;
  padding: var(--rindle-space-5);
  border: var(--rindle-border-rule-strong);
  border-radius: var(--rindle-radius-card);
  background: var(--rindle-surface-raised);
  color: var(--rindle-text);
  box-shadow: var(--rindle-shadow-overlay);
  transform-origin: top center;
  transition: opacity var(--rindle-motion-popover) var(--rindle-motion-easing-decelerate), transform var(--rindle-motion-popover) var(--rindle-motion-easing-decelerate);
}

[data-theme="dark"] .rindle-admin-confirm-dialog {
  background: var(--rindle-elevation-3);
}

.rindle-admin-confirm-dialog__title {
  margin: 0 0 var(--rindle-space-2);
  font-family: var(--rindle-font-display);
  font-size: var(--rindle-text-h3-size);
  line-height: var(--rindle-text-h3-line);
  font-weight: var(--rindle-text-h3-weight);
}

.rindle-admin-drawer {
  width: min(100%, 520px);
  min-height: 100%;
  padding: var(--rindle-space-5);
  border-left: var(--rindle-border-rule-strong);
  background: var(--rindle-surface-raised);
  color: var(--rindle-text);
  box-shadow: var(--rindle-shadow-overlay);
  transition: transform var(--rindle-motion-popover) var(--rindle-motion-easing-decelerate), opacity var(--rindle-motion-popover) var(--rindle-motion-easing-decelerate);
}

[data-theme="dark"] .rindle-admin-drawer {
  background: var(--rindle-elevation-3);
}

.rindle-admin-toast {
  min-height: var(--rindle-admin-target-min);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--rindle-space-3);
  align-items: center;
  padding: var(--rindle-space-3) var(--rindle-space-4);
  border: var(--rindle-border-rule-subtle);
  border-left: 4px solid var(--rindle-status-info);
  border-radius: var(--rindle-radius-control);
  background: var(--rindle-surface-raised);
  color: var(--rindle-text);
  box-shadow: var(--rindle-shadow-overlay);
  transition: opacity var(--rindle-motion-toast) var(--rindle-motion-easing-accelerate), transform var(--rindle-motion-toast) var(--rindle-motion-easing-accelerate);
}

[data-theme="dark"] .rindle-admin-toast {
  background: var(--rindle-elevation-2);
}

.rindle-admin-toast--success { border-left-color: var(--rindle-status-ready); }
.rindle-admin-toast--warning { border-left-color: var(--rindle-status-warning); }
.rindle-admin-toast--danger { border-left-color: var(--rindle-status-danger); }
.rindle-admin-toast--info { border-left-color: var(--rindle-status-info); }

.rindle-admin-empty-state {
  padding: var(--rindle-space-6);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-card);
  background: var(--rindle-surface-raised);
  color: var(--rindle-text);
}

[data-rindle-admin-empty-state] {
  border-style: dashed;
}

[data-rindle-admin-error-state] {
  padding: var(--rindle-space-6);
  border: 1px solid var(--rindle-status-danger);
  border-radius: var(--rindle-radius-card);
  background: var(--rindle-status-danger-surface);
  color: var(--rindle-text);
}

[data-rindle-admin-error-state]::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-inline-end: var(--rindle-space-2);
  border-radius: var(--rindle-radius-pill);
  background: var(--rindle-status-danger);
}

[data-rindle-admin-loading-state] {
  min-height: var(--rindle-admin-target-min);
  display: flex;
  align-items: center;
  gap: var(--rindle-space-2);
  color: var(--rindle-text-secondary);
}

.rindle-admin-empty-state__title {
  margin: 0 0 var(--rindle-space-2);
  font-family: var(--rindle-font-display);
  font-size: var(--rindle-text-h3-size);
  line-height: var(--rindle-text-h3-line);
  font-weight: var(--rindle-text-h3-weight);
}

.rindle-admin-skeleton {
  min-height: var(--rindle-admin-target-min);
  border-radius: var(--rindle-radius-control-sm);
  background: linear-gradient(90deg, var(--rindle-surface-sunken), var(--rindle-surface-raised), var(--rindle-surface-sunken));
  background-size: 200% 100%;
  border: var(--rindle-border-rule-subtle);
  transition: opacity var(--rindle-motion-transition) var(--rindle-motion-easing);
}

/* Fluid display headings: clamp() interpolates between bp-sm and the fixed max
   so large viewports stay byte-identical to the existing fixed scale (D-94-09). */
.rindle-admin-heading--hero {
  font-family: var(--rindle-font-display);
  font-size: var(--rindle-text-hero-fluid);
  line-height: var(--rindle-text-hero-line);
  font-weight: var(--rindle-text-hero-weight);
}

.rindle-admin-heading--h1 {
  font-family: var(--rindle-font-display);
  font-size: var(--rindle-text-h1-fluid);
  line-height: var(--rindle-text-h1-line);
  font-weight: var(--rindle-text-h1-weight);
}

.rindle-admin-heading--h2 {
  font-family: var(--rindle-font-display);
  font-size: var(--rindle-text-h2-fluid);
  line-height: var(--rindle-text-h2-line);
  font-weight: var(--rindle-text-h2-weight);
}

/* ============================================================================
   Level-2 meta-components (UPLIFT-02 / D-97-01..03)
   Composed units built ONLY from Level-1 rindle-admin primitives + tokens.
   No new color literal, no off-grid spacing: every gap/margin/padding resolves
   to a --rindle-space-* token. Data-table sort/sticky/bulk-select state is driven
   entirely by attributes + BEM modifiers + fixture markup — never client JS.
   ============================================================================ */

/* Toolbar: left title cluster + right action cluster on the 4px grid. */
.rindle-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rindle-space-4);
  padding: var(--rindle-space-3) var(--rindle-space-4);
  background: var(--rindle-surface-raised);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-control);
}

.rindle-admin-toolbar__cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-2);
  min-width: 0;
}

.rindle-admin-toolbar__title {
  margin: 0;
  font-family: var(--rindle-font-display);
  font-size: var(--rindle-text-h3-size);
  line-height: var(--rindle-text-h3-line);
  font-weight: var(--rindle-text-h3-weight);
}

/* Data table: composes .rindle-admin-table + sortable / sticky / bulk-select state. */
.rindle-admin-data-table {
  display: grid;
  gap: var(--rindle-space-3);
  min-width: 0;
}

/* Sortable header: aria-sort drives a token-backed, VISIBLE direction glyph
   (never color-only). The active column uses --rindle-text so the glyph stays
   legible on both light surface-raised and dark elevation-1; the ↑/↓ vs ↕
   shape change carries the active/inactive signal (rindle-green fails contrast
   on light surfaces — see tokens.json). */
.rindle-admin-table__head th[aria-sort] {
  cursor: pointer;
}

.rindle-admin-table__head th[aria-sort] .rindle-admin-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--rindle-space-1);
}

.rindle-admin-table__head th[aria-sort] .rindle-admin-table__sort::after {
  content: "\2195"; /* up-down arrow: sortable but unsorted */
  color: var(--rindle-text-secondary);
}

.rindle-admin-table__head th[aria-sort="none"] .rindle-admin-table__sort::after {
  content: "\2195";
  color: var(--rindle-text-secondary);
}

.rindle-admin-table__head th[aria-sort="ascending"] .rindle-admin-table__sort::after {
  content: "\2191"; /* upwards arrow */
  color: var(--rindle-text);
}

.rindle-admin-table__head th[aria-sort="descending"] .rindle-admin-table__sort::after {
  content: "\2193"; /* downwards arrow */
  color: var(--rindle-text);
}

/* Sticky header: head row pins to the top of an explicit internal scroll region
   (the only opted-in no-h-scroll exception, marked data-rindle-admin-scroll-region). */
.rindle-admin-table--sticky {
  display: block;
  max-height: calc(var(--rindle-admin-target-min) * 8);
  overflow: auto;
}

.rindle-admin-table--sticky .rindle-admin-table__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--rindle-surface-raised);
}

[data-theme="dark"] .rindle-admin-table--sticky .rindle-admin-table__head {
  background: var(--rindle-elevation-1);
}

/* Bulk-select: per-row selected surface + contextual bulk-action bar. */
.rindle-admin-table__row[data-rindle-admin-selected],
[data-rindle-admin-selected] {
  background: var(--rindle-surface-sunken);
}

.rindle-admin-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-3);
  padding: var(--rindle-space-2) var(--rindle-space-4);
  background: var(--rindle-surface-sunken);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-control);
  color: var(--rindle-text);
}

.rindle-admin-bulk-bar__count {
  font-weight: 600;
}

.rindle-admin-bulk-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-2);
  margin-inline-start: auto;
}

/* Filter bar: inline filter controls + apply/clear + active-filter chips. */
.rindle-admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rindle-space-3);
  padding: var(--rindle-space-3) var(--rindle-space-4);
  background: var(--rindle-surface-raised);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-control);
}

.rindle-admin-filter-bar__field {
  display: grid;
  gap: var(--rindle-space-1);
  min-width: 0;
}

.rindle-admin-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--rindle-space-2);
  margin-inline-start: auto;
}

.rindle-admin-filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-2);
}

/* Action panel: grouped primary + secondary + destructive on consistent rhythm. */
.rindle-admin-action-panel {
  display: grid;
  gap: var(--rindle-space-4);
  padding: var(--rindle-space-5);
  background: var(--rindle-surface-raised);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-panel);
}

.rindle-admin-action-panel__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-2);
}

/* Detail drill-down: master summary -> key/value rows on consistent rhythm. */
.rindle-admin-detail-drilldown {
  display: grid;
  gap: var(--rindle-space-4);
  padding: var(--rindle-space-5);
  background: var(--rindle-surface-raised);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-panel);
}

.rindle-admin-detail-drilldown__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
  gap: var(--rindle-space-4);
  padding-block: var(--rindle-space-2);
  border-top: var(--rindle-border-rule-subtle);
}

.rindle-admin-detail-drilldown__key {
  color: var(--rindle-text-secondary);
  font-weight: 600;
}

/* Confirm / destructive panel: preview + typed confirmation. Composes the
   Level-1 confirm-dialog + destructive button + confirm-input primitives. */
.rindle-admin-confirm-panel {
  display: grid;
  gap: var(--rindle-space-4);
  max-width: 560px;
  padding: var(--rindle-space-5);
  background: var(--rindle-surface-raised);
  border: var(--rindle-border-rule-strong);
  border-radius: var(--rindle-radius-panel);
  color: var(--rindle-text);
  box-shadow: var(--rindle-shadow-overlay);
}

[data-theme="dark"] .rindle-admin-confirm-panel {
  background: var(--rindle-elevation-3);
}

.rindle-admin-confirm-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-2);
}

/* Drawer panel: header + body + action footer on grid (composes .rindle-admin-drawer). */
.rindle-admin-drawer-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--rindle-space-4);
  min-height: 100%;
}

.rindle-admin-drawer-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rindle-space-3);
}

.rindle-admin-drawer-panel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-2);
  padding-top: var(--rindle-space-3);
  border-top: var(--rindle-border-rule-subtle);
}

/* Toast stack: vertically stacked real-state toasts with consistent inter-toast gap. */
.rindle-admin-toast-stack {
  display: grid;
  gap: var(--rindle-space-3);
  width: min(100%, 420px);
}

/* ============================================================================
   Phase 98 — Level-3 page composition + motion + responsive + a11y (D-98-12..15)
   ALL of the following is generated CSS authored ONLY here. Mobile-first: the
   single-column scaffold is the base; the two-pane / sidebar layouts are layered
   in NEVER-CONFLATED min-width blocks below (760 = shell sidebar ONLY,
   1024 = :aside two-pane ONLY). No selector uses the all-properties shorthand;
   only transform/opacity animate (GPU-only, §B).
   ============================================================================ */

/* §A scaffold root: page rhythm. Section gap = fluid-section; card gap =
   space-5; intra-card = space-4/-3. NO grid/measure here at base — single column
   is the mobile-first default; the two-pane grid lives in the 1024 block. */
.rindle-admin-page {
  display: grid;
  gap: var(--rindle-space-fluid-section);
  padding-inline: var(--rindle-space-fluid-gutter);
  padding-block: var(--rindle-space-6);
}

.rindle-admin-page__summary {
  display: grid;
  gap: var(--rindle-space-4);
}

.rindle-admin-page__filters {
  display: grid;
  gap: var(--rindle-space-3);
}

/* Two-pane panes container: single column by default (mobile-first); flips to a
   two-track grid ONLY inside @media (min-width:1024px) below (D-98-15). */
.rindle-admin-page__panes {
  display: grid;
  gap: var(--rindle-space-5);
}

.rindle-admin-page__work {
  display: grid;
  gap: var(--rindle-space-4);
  min-width: 0;
}

.rindle-admin-page__aside {
  display: grid;
  gap: var(--rindle-space-3);
  min-width: 0;
}

.rindle-admin-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rindle-space-3);
  padding-top: var(--rindle-space-4);
  border-top: var(--rindle-border-rule-subtle);
}

/* §A hierarchy (token-only, assertable): 1st-order :summary is the raised
   triage surface — the FIRST consumer of --rindle-shadow-card (D-98-13 guard-1):
   surface-raised + radius-panel (20) + shadow-card. */
.rindle-admin-page__summary {
  background: var(--rindle-surface-raised);
  border-radius: var(--rindle-radius-panel);
  box-shadow: var(--rindle-shadow-card);
  padding: var(--rindle-space-5);
}

/* 2nd-order :work table = base surface + radius-card (14). */
.rindle-admin-page__work .rindle-admin-table {
  background: var(--rindle-surface);
  border-radius: var(--rindle-radius-card);
}

/* Text-region measure cap (~68-78ch); tables are full-width (exempt). */
.rindle-admin-page__summary > :not(.rindle-admin-table),
.rindle-admin-page__aside > :not(.rindle-admin-table) {
  max-width: 74ch;
}

/* §C nav disclosure button (mobile top-bar toggle). 44px hit-area target. */
.rindle-admin-nav__disclosure {
  min-height: var(--rindle-admin-target-min);
  min-width: var(--rindle-admin-target-min);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--rindle-space-2);
  padding: var(--rindle-space-2) var(--rindle-space-3);
  border: 1px solid transparent;
  border-radius: var(--rindle-radius-control-sm);
  background: transparent;
  color: var(--rindle-text);
  cursor: pointer;
  transition: background-color var(--rindle-motion-press) var(--rindle-motion-easing), color var(--rindle-motion-press) var(--rindle-motion-easing);
}

/* §D skip link: visually hidden until focused, then anchored top-left. */
.rindle-admin-skip-link {
  position: absolute;
  left: var(--rindle-space-3);
  top: -100%;
  z-index: 10;
  padding: var(--rindle-space-2) var(--rindle-space-4);
  background: var(--rindle-surface-raised);
  color: var(--rindle-text);
  border-radius: var(--rindle-radius-control-sm);
  box-shadow: var(--rindle-shadow-overlay);
  text-decoration: none;
  transition: top var(--rindle-motion-press) var(--rindle-motion-easing-decelerate);
}

.rindle-admin-skip-link:focus,
.rindle-admin-skip-link:focus-visible {
  top: var(--rindle-space-3);
}

/* §D modal overlay (WR-01): the full-viewport positioning + centering host for
   modal/1 and confirm_dialog/1. The dialog card (.rindle-admin-confirm-dialog) is
   centered inside it; the dimmed scrim is .rindle-admin-overlay__backdrop. Fixed +
   high z-index so it floats above the (inerted) shell. Only opacity animates
   (GPU-only, §B). Visibility is server-assign driven (the inline display:none when
   not shown); this rule supplies the positioning/backdrop the components reference. */
.rindle-admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rindle-space-5);
  transition: opacity var(--rindle-motion-popover) var(--rindle-motion-easing-decelerate);
}

/* §D dimmed scrim behind the dialog card. Absolute inset-0 inside the fixed
   overlay; semi-opaque so the inerted shell reads as backgrounded. Sits below the
   dialog card (which is a later sibling in normal flow + raised). */
.rindle-admin-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 23, 0.56);
}

/* §D dialog permanent border: a programmatically-focused dialog container may not
   trigger :focus-visible, so it always carries a visible boundary (RESEARCH). */
.rindle-admin-confirm-dialog,
.rindle-admin-drawer {
  border: 1px solid var(--rindle-focus-ring);
}

/* §D the dialog card must layer above the absolute backdrop within the overlay. */
.rindle-admin-overlay .rindle-admin-confirm-dialog {
  position: relative;
  z-index: 1;
}

/* §D general visually-hidden utility (D-98-08). The migrated data tables each carry a
   <caption class="rindle-admin-visually-hidden"> naming the surface for AT users; the
   caption must be announced but never painted at >=760 where the real <table> returns.
   Same clip/clip-path recipe as the stacked <thead> hide below — authored once here so
   any element (not just <thead>) can opt into accessible-but-invisible. */
.rindle-admin-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* §B motion catalog. Only opacity/transform animate (GPU-only); exact properties
   enumerated, never the all-properties shorthand. Reduced-motion collapse below. */

/* Popover / menu / theme-picker open-close: opacity + transform ONLY (GPU-only,
   §B) — NEVER background-color/color (those tween the pressed-state surface and
   make the computed background non-deterministic mid-animation). popover 160ms. */
.rindle-admin-theme-picker__option {
  transition: opacity var(--rindle-motion-popover) var(--rindle-motion-easing-decelerate), transform var(--rindle-motion-popover) var(--rindle-motion-easing-decelerate);
}

/* Toast / alert enter-exit: opacity + transform translateY, toast 200ms. */
.rindle-admin-toast {
  transition: opacity var(--rindle-motion-toast) var(--rindle-motion-easing-decelerate), transform var(--rindle-motion-toast) var(--rindle-motion-easing-decelerate);
}

/* Drawer / dialog / inspector open-close: opacity + transform, transition 300ms. */
.rindle-admin-confirm-dialog,
.rindle-admin-drawer {
  transition: opacity var(--rindle-motion-transition) var(--rindle-motion-easing-decelerate), transform var(--rindle-motion-transition) var(--rindle-motion-easing-decelerate);
}

/* Status-chip state change: CONTENT opacity cross-fade only (press 120ms) — NO
   color tween, NO pulse (§B). */
.rindle-admin-status-chip {
  transition: opacity var(--rindle-motion-press) var(--rindle-motion-easing-standard);
}

/* Skeleton -> content swap: opacity cross-fade, transition 300ms. Skeleton is
   STATIC (no shimmer loop). */
.rindle-admin-skeleton {
  transition: opacity var(--rindle-motion-transition) var(--rindle-motion-easing-standard);
}

.rindle-admin-button:focus-visible,
.rindle-admin-nav__item:focus-visible,
.rindle-admin-nav__disclosure:focus-visible,
.rindle-admin-skip-link:focus-visible,
.rindle-admin-table__row:focus-within,
.rindle-admin-table__sort:focus-visible,
.rindle-admin-actions-tab:focus-visible,
.rindle-admin-theme-picker__option:focus-visible,
[data-rindle-admin-input]:focus-visible,
[data-rindle-admin-confirm-input]:focus-visible,
[data-rindle-admin-submit]:focus-visible,
[data-rindle-admin-action]:focus-visible,
[data-rindle-admin-detail-link]:focus-visible,
.rindle-admin-confirm-dialog:focus-visible,
.rindle-admin-drawer:focus-visible,
.rindle-admin-toast:focus-visible {
  outline: var(--rindle-focus-width) solid var(--rindle-focus-ring);
  outline-offset: var(--rindle-focus-offset);
}

/* ----------------------------------------------------------------------------
   §C mobile-first responsive (D-98-14). Base (0-479) is the single-column / stacked
   layout authored OUTSIDE any media query (the .rindle-admin-* rules above + the
   stacked-table base below). Each min-width stop layers ONE concern; the 760 and
   1024 blocks are NEVER conflated (D-98-15). Breakpoint pixels are literals because
   CSS media conditions cannot read custom properties; they mirror tokens.json
   breakpoint sm480/md760/lg1024/xl1280.
   ---------------------------------------------------------------------------- */

/* base/<760 STACKED data tables: gov.uk "label: value" cards, no markup fork, no
   priority-column hiding. The <td data-label> markup rides the P2b surface
   migration (D-98-08); this rule consumes it. EXCEPTION: .rindle-admin-table--sticky
   is a wrapper modifier, so wrapped tables keep horizontal scroll for wide numeric
   matrices at all widths. */
.rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table),
.rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) tbody,
.rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) tr,
.rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) td {
  display: block;
}

.rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) thead {
  /* visually-hidden: each cell self-labels via ::before below */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) tr {
  margin-block-end: var(--rindle-space-3);
  border: var(--rindle-border-rule-subtle);
  border-radius: var(--rindle-radius-card);
  padding: var(--rindle-space-3) var(--rindle-space-4);
}

.rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) td::before {
  content: attr(data-label);
  display: block;
  font-weight: 600;
  color: var(--rindle-text-secondary);
}

.rindle-admin-table--sticky {
  overflow-x: auto;
}

.rindle-admin-table--sticky .rindle-admin-table {
  display: table;
}

.rindle-admin-table--sticky tbody {
  display: table-row-group;
}

.rindle-admin-table--sticky tr {
  display: table-row;
}

.rindle-admin-table--sticky td {
  display: table-cell;
}

@media (min-width: 480px) {
  /* sm: filter fields 2-up */
  .rindle-admin-page__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 760 = shell sidebar switch ONLY (D-98-15). The shell becomes the two-track
   sidebar grid here; data tables revert to real <table> rows. */
@media (min-width: 760px) {
  .rindle-admin-shell {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .rindle-admin-nav__disclosure {
    display: none;
  }

  /* real <table> at md+ : undo the stacked-card flip */
  .rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) {
    display: table;
  }

  .rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    display: table-header-group;
  }

  .rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) tbody {
    display: table-row-group;
  }

  .rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) tr {
    display: table-row;
    margin-block-end: 0;
    border: 0;
    border-top: var(--rindle-border-rule-subtle);
    border-radius: 0;
    padding: 0;
  }

  .rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) td {
    display: table-cell;
  }

  .rindle-admin-table:not(.rindle-admin-table--sticky .rindle-admin-table) td::before {
    content: "";
    display: none;
  }
}

/* sub-760 the shell is single-column and the nav becomes a sticky top bar with
   a disclosure button (literal breakpoint mirrors --rindle-bp-md). */
@media (max-width: 759.98px) {
  .rindle-admin-shell {
    grid-template-columns: 1fr;
  }

  .rindle-admin-nav {
    border-right: 0;
    border-bottom: var(--rindle-border-rule-subtle);
  }

  .rindle-admin-nav__disclosure {
    display: inline-flex;
  }

  .rindle-admin-shell__main {
    padding: var(--rindle-space-4);
  }

  .rindle-admin-actions-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rindle-admin-actions-tab {
    width: 100%;
  }
}

/* 1024 = :aside two-pane ONLY (D-98-15). The scaffold :work + :aside region
   becomes a two-track grid here and ONLY here; single track below 1024. */
@media (min-width: 1024px) {
  .rindle-admin-page--two-pane .rindle-admin-page__panes {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }
}

@media (min-width: 1280px) {
  /* xl: main honors the max-width cap (token-backed). */
  .rindle-admin-shell__main {
    max-width: var(--rindle-bp-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rindle-admin-shell,
  .rindle-admin-nav__item,
  .rindle-admin-nav__disclosure,
  .rindle-admin-skip-link,
  .rindle-admin-actions-tab,
  .rindle-admin-button,
  .rindle-admin-theme-picker__option,
  .rindle-admin-status-chip,
  .rindle-admin-confirm-dialog,
  .rindle-admin-drawer,
  .rindle-admin-toast,
  .rindle-admin-skeleton {
    transition-duration: 0ms;
    animation: none;
    transform: none;
  }
}