/* ==========================================================================
   Toolshed — design tokens + component styles
   Served as /static/app.css. No inline styles anywhere (hub CSP: style-src 'self').
   Spec: docs/ui-spec.md. Fonts: see spec §2 (self-hosted /static/fonts.css
   or Google Fonts link — both need no change in this file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — light (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Surfaces & lines */
  --bg: #f3eee4; /* linen / plywood ground              */
  --surface: #fbf8f2; /* card, panel, input                   */
  --surface-2: #eae3d6; /* muted: table head, badge, chip        */
  --hairline: #d3c9b7; /* decorative dividers (1.55:1, not UI) */
  --line: #8c8170; /* input/control borders (3.61:1)       */
  --dot: rgba(32, 28, 23, 0.07); /* pegboard pattern                 */

  /* Text */
  --ink: #201c17; /* 15.98:1 on surface                   */
  --ink-muted: #5c544a; /* 7.02:1 on surface                    */
  --ink-placeholder: #6f6659; /* 5.32:1 on surface                  */
  --ink-on-accent: #ffffff; /* 6.17:1 on accent                     */

  /* Brand */
  --accent: #ac3c08; /* safety orange, burnt: 5.82:1 on surface */
  --accent-hover: #93330a;
  --accent-soft: #f7e3d6; /* accent text on it: 4.97:1            */
  --link: #7a3208; /* 8.66:1 on surface                    */

  /* Semantic */
  --success: #2e6b3a;
  --success-soft: #ddebdc; /* 5.18:1 */
  --warn: #7a5200;
  --warn-soft: #f5e7c4; /* 5.64:1 */
  --danger: #a3262c;
  --danger-soft: #f6dcdd; /* 5.64:1 */
  --danger-ink: #ffffff; /* 7.31:1 on danger                     */
  --info: #201c17;
  --info-soft: #e7e1d4; /* 13.0:1 */

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-text:
    'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem; /* 13 */
  --fs-sm: 0.875rem; /* 14 */
  --fs-md: 1rem; /* 16 */
  --fs-lg: 1.125rem; /* 18 */
  --fs-xl: 1.375rem; /* 22 */
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem); /* 24–28 */
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); /* 30–40 */
  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* Space (4-pt rhythm) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* Shape */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Elevation — "resting on the bench": short, warm, hard-edged */
  --shadow-1: 0 1px 0 rgba(32, 28, 23, 0.06), 0 1px 2px rgba(32, 28, 23, 0.08);
  --shadow-2: 0 2px 0 rgba(32, 28, 23, 0.06), 0 6px 14px -6px rgba(32, 28, 23, 0.25);
  --shadow-3: 0 3px 0 rgba(32, 28, 23, 0.08), 0 16px 32px -12px rgba(32, 28, 23, 0.35);

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-back: cubic-bezier(0.2, 0.9, 0.3, 1.2);

  /* Layout */
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --control-h: 2.75rem; /* 44px touch target */
  --control-h-sm: 2.25rem; /* 36px, tables/cards */
  --focus: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent);
}

/* --------------------------------------------------------------------------
   1b. Tokens — dark. Redefine only what changes.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #17140f;
    --surface: #221e18;
    --surface-2: #2d2820;
    --hairline: #3a332a;
    --line: #7a6e5c;
    --dot: rgba(241, 234, 224, 0.05);
    --ink: #f1eae0;
    --ink-muted: #b5aa98;
    --ink-placeholder: #9c917f;
    --ink-on-accent: #1a1208;
    --accent: #f0853f;
    --accent-hover: #f79a5e;
    --accent-soft: #3a2415;
    --link: #f5a870;
    --success: #7fc98b;
    --success-soft: #1e2f22;
    --warn: #e8b14a;
    --warn-soft: #332a14;
    --danger: #f09098;
    --danger-soft: #351c1e;
    --danger-ink: #1a0a0c;
    --info: #f1eae0;
    --info-soft: #2d2820;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 18px -6px rgba(0, 0, 0, 0.6);
    --shadow-3: 0 3px 0 rgba(0, 0, 0, 0.4), 0 18px 36px -12px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme='dark'] {
  --bg: #17140f;
  --surface: #221e18;
  --surface-2: #2d2820;
  --hairline: #3a332a;
  --line: #7a6e5c;
  --dot: rgba(241, 234, 224, 0.05);
  --ink: #f1eae0;
  --ink-muted: #b5aa98;
  --ink-placeholder: #9c917f;
  --ink-on-accent: #1a1208;
  --accent: #f0853f;
  --accent-hover: #f79a5e;
  --accent-soft: #3a2415;
  --link: #f5a870;
  --success: #7fc98b;
  --success-soft: #1e2f22;
  --warn: #e8b14a;
  --warn-soft: #332a14;
  --danger: #f09098;
  --danger-soft: #351c1e;
  --danger-ink: #1a0a0c;
  --info: #f1eae0;
  --info-soft: #2d2820;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 18px -6px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 3px 0 rgba(0, 0, 0, 0.4), 0 18px 36px -12px rgba(0, 0, 0, 0.7);
}

/* Dark-mode solid danger button uses a mid tone so dark ink stays readable */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --danger-solid: #e5646e;
  }
}
:root {
  --danger-solid: var(--danger);
}
:root[data-theme='dark'] {
  --danger-solid: #e5646e;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100dvh;
  font: 400 var(--fs-md)/var(--lh-body) var(--font-text);
  color: var(--ink);
  background-color: var(--bg);
  /* pegboard: two offset dot grids, very faint */
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1.5px),
    radial-gradient(var(--dot) 1px, transparent 1.5px);
  background-size:
    28px 28px,
    28px 28px;
  background-position:
    0 0,
    14px 14px;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fs-2xl);
}
h3 {
  font-size: var(--fs-xl);
}
h4 {
  font-size: var(--fs-lg);
}
p {
  margin: 0 0 var(--s-4);
}
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}
::placeholder {
  color: var(--ink-placeholder);
  opacity: 1;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.js-only {
  display: none !important;
}
html.js .js-only {
  display: revert !important;
}
html.js .no-js-only {
  display: none !important;
}
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.main {
  flex: 1;
  padding-block: var(--s-8) var(--s-16);
}

.topbar {
  background: var(--surface);
  border-bottom: 2px solid var(--ink);
  box-shadow: var(--shadow-1);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 3.75rem;
  flex-wrap: wrap;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.topbar__brand .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
}
.topbar__nav {
  display: flex;
  gap: var(--s-1);
  margin-left: var(--s-4);
}
.topbar__nav a {
  color: var(--ink);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-weight: 500;
}
.topbar__nav a:hover {
  background: var(--surface-2);
}
.topbar__nav a[aria-current='page'] {
  box-shadow: inset 0 -3px 0 var(--accent);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.topbar__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.topbar__user strong {
  color: var(--ink);
  font-weight: 500;
}
.topbar__user form {
  margin: 0;
}

.footer {
  padding: var(--s-6) 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  border-top: 1px solid var(--hairline);
}

/* Page header (title + subline + actions) */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-8);
}
.page-head__text {
  flex: 1 1 20rem;
}
.page-head .eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.page-head p {
  color: var(--ink-muted);
  margin: var(--s-2) 0 0;
  max-width: 60ch;
}
.page-head__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   4. Sections
   -------------------------------------------------------------------------- */
.section {
  margin-bottom: var(--s-12);
}
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
}
.section__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.section__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.section__tools {
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
}

.search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 18rem;
  max-width: 26rem;
}
.search .input {
  flex: 1;
  min-width: 0;
}

.filter-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.filter-banner strong {
  color: var(--accent);
}
.filter-banner a {
  margin-left: auto;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Page card
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base);
}
.page-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-top-color: var(--accent);
}
.page-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.page-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0;
  flex: 1;
}
.page-card__title a {
  color: var(--ink);
  text-decoration: none;
}
.page-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.page-card__title a:hover {
  color: var(--accent);
}
.page-card__owner {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.page-card__owner a {
  position: relative;
  z-index: 1;
}
.page-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--hairline);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.page-card__actions {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.125rem var(--s-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  background: var(--surface-2);
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
}
.badge--version {
  color: var(--ink);
}
.badge--accent {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.badge--success {
  background: var(--success-soft);
  color: var(--success);
  border-color: transparent;
}
.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}
.badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-h);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
  user-select: none;
}
.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--sm {
  min-height: var(--control-h-sm);
  padding: 0 var(--s-3);
  font-size: var(--fs-sm);
}
.btn--primary {
  background: var(--accent);
  color: var(--ink-on-accent);
  border-color: var(--accent);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover {
  background: var(--surface-2);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--surface-2);
}
.btn--danger {
  background: var(--danger-solid);
  color: var(--danger-ink);
  border-color: var(--danger-solid);
}
.btn--danger:hover {
  filter: brightness(0.92);
}
.btn--danger-outline {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn--danger-outline:hover {
  background: var(--danger-soft);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.btn-row--end {
  justify-content: flex-end;
}
.btn-row--center {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--s-3);
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.input--sm {
  min-height: var(--control-h-sm);
}
.textarea {
  padding: var(--s-2) var(--s-3);
  min-height: 6rem;
  resize: vertical;
  line-height: var(--lh-body);
}
.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--ink);
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus);
}
.input[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: var(--danger);
}
.input[readonly] {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.field__label {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.field__label .req {
  color: var(--danger);
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: 0;
}
.field__error {
  font-size: var(--fs-xs);
  color: var(--danger);
  font-weight: 600;
  margin: 0;
}
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  min-height: var(--control-h);
}
.checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent);
  margin: 0;
}
.file-input {
  padding: var(--s-2) var(--s-3);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.file-input:hover {
  border-color: var(--ink);
}
.form-grid {
  display: grid;
  gap: 0 var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-top: var(--s-2);
}
.form-grid > .form-actions {
  grid-column: 1 / -1;
  align-items: flex-start;
}

/* Copy-URL field */
.copy-field {
  display: flex;
  margin-bottom: var(--s-5);
  gap: var(--s-2);
  align-items: stretch;
}
.copy-field .input {
  flex: 1;
  min-width: 0;
}
.copy-field .btn {
  flex: none;
}
.copy-field[data-copied='true'] .btn {
  border-color: var(--success);
  color: var(--success);
}

/* Segmented control (radio group) */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--control-h-sm) - 6px);
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--ink-muted);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.segmented input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segmented input:checked + span {
  color: var(--ink);
}
.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.segmented label:has(input:focus-visible) {
  box-shadow: var(--focus);
}

/* Toggle switch — a <button role="switch"> inside a POST form */
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--hairline);
}
.switch-row:first-child {
  border-top: 0;
}
.switch-row__text {
  flex: 1;
}
.switch-row__text strong {
  display: block;
  font-weight: 600;
}
.switch-row__text p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: var(--s-1) 0 0;
}
.switch-row form {
  margin: 0;
  flex: none;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: 0;
  padding: var(--s-1) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.switch__track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 2px solid var(--line);
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base);
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--line);
  transition:
    transform var(--t-base) var(--ease-out-back),
    background var(--t-base);
}
.switch[aria-checked='true'] {
  color: var(--ink);
}
.switch[aria-checked='true'] .switch__track {
  background: var(--accent);
  border-color: var(--accent);
}
.switch[aria-checked='true'] .switch__knob {
  transform: translateX(1.25rem);
  background: var(--ink-on-accent);
}
.switch:focus-visible {
  box-shadow: none;
}
.switch:focus-visible .switch__track {
  box-shadow: var(--focus);
}

/* --------------------------------------------------------------------------
   8. Principal chip + picker
   -------------------------------------------------------------------------- */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2rem;
  padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.chip .icon {
  width: 1rem;
  height: 1rem;
  color: var(--ink-muted);
}
.chip--everyone {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}
.chip--everyone .icon {
  color: currentColor;
}
.chip__sub {
  color: var(--ink-muted);
  font-weight: 400;
}

.acl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acl-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
}
.acl-list li:first-child {
  border-top: 0;
}
.acl-list__meta {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.acl-list form {
  margin-left: auto;
}

.picker {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
}
.picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.picker__input {
  flex: 1 1 14rem;
  position: relative;
}
.picker__results {
  list-style: none;
  margin: 0;
  padding: var(--s-1);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  max-height: 20rem;
  overflow: auto;
}
.picker__results[hidden] {
  display: none;
}
.picker__result {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  cursor: pointer;
}
.picker__result:hover,
.picker__result[aria-selected='true'] {
  background: var(--accent-soft);
}
.picker__result .icon {
  color: var(--ink-muted);
}
.picker__result small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.picker__status {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  min-height: 1.2em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Panels + data table
   -------------------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--s-6);
  overflow: hidden;
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.panel__head h2,
.panel__head h3 {
  font-size: var(--fs-lg);
}
.panel__head .panel__tools {
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
}
.panel__body {
  padding: var(--s-5);
}
.panel__body > :last-child {
  margin-bottom: 0;
}
.panel--danger {
  border-color: var(--danger);
}
.panel--danger .panel__head {
  color: var(--danger);
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
}
.table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.table tr.is-current {
  box-shadow: inset 3px 0 0 var(--accent);
}
.table .num {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}
.table .actions {
  text-align: right;
  white-space: nowrap;
}
.table .actions form {
  display: inline;
}
.table tr.is-deleted td {
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   10. Flash / alert, empty state, status pages
   -------------------------------------------------------------------------- */
.flash {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
  border-radius: var(--r-md);
  border-left: 4px solid var(--info);
  background: var(--info-soft);
  color: var(--info);
  font-size: var(--fs-sm);
}
.flash .icon {
  margin-top: 0.1em;
}
.flash p {
  margin: 0;
}
.flash strong {
  font-weight: 700;
}
.flash--success {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}
.flash--warn {
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}
.flash--danger {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}
.flash ul {
  margin: var(--s-2) 0 0;
  padding-left: 1.2em;
}
.flash code {
  font-size: 0.9em;
}

.empty {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  border: 2px dashed var(--hairline);
  border-radius: var(--r-lg);
  color: var(--ink-muted);
}
.empty .icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--s-3);
  color: var(--line);
}
.empty h3 {
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.empty p {
  max-width: 42ch;
  margin-inline: auto;
}

.status-page {
  max-width: 34rem;
  margin: var(--s-16) auto;
  padding: var(--s-8);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.status-page__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}
.status-page h1 {
  font-size: var(--fs-2xl);
  margin: var(--s-3) 0 var(--s-2);
}
.status-page p {
  color: var(--ink-muted);
}
.status-page .btn-row {
  margin-top: var(--s-6);
}
.status-page--danger {
  border-top-color: var(--danger);
}
.status-page--danger .status-page__code {
  color: var(--danger);
}
.status-page--wait {
  text-align: center;
}

/* Spinner (auth interstitial) */
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  border: 3px solid var(--surface-2);
  border-top-color: var(--accent);
  animation: spin 900ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Definition list (meta) */
.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  font-size: var(--fs-sm);
}
.meta dt {
  color: var(--ink-muted);
}
.meta dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Motion — one staggered page-load reveal
   -------------------------------------------------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.reveal > * {
  animation: rise var(--t-slow) var(--ease) both;
}
.reveal > :nth-child(1) {
  animation-delay: 0ms;
}
.reveal > :nth-child(2) {
  animation-delay: 60ms;
}
.reveal > :nth-child(3) {
  animation-delay: 120ms;
}
.reveal > :nth-child(4) {
  animation-delay: 180ms;
}
.reveal > :nth-child(5) {
  animation-delay: 240ms;
}
.reveal > :nth-child(6) {
  animation-delay: 300ms;
}
.reveal > :nth-child(n + 7) {
  animation-delay: 360ms;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .page-card:hover {
    transform: none;
  }
  .spinner {
    border-top-color: var(--accent);
  }
}

/* --------------------------------------------------------------------------
   12. Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar__nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: var(--s-2);
  }
  .topbar__user {
    margin-left: auto;
  }
  .section__tools {
    margin-left: 0;
    width: 100%;
  }
  .search {
    max-width: none;
  }
  .page-head__actions .btn {
    flex: 1;
  }
  .copy-field {
    flex-direction: column;
  }
  .acl-list form {
    margin-left: 0;
    width: 100%;
  }
}
@media print {
  body {
    background: #fff;
  }
  .topbar,
  .footer,
  .btn,
  .picker {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. Admin (/admin) — M6.1. Only additive; reuses tokens, no new colours.
   Spec: docs/ui-spec.md §8.
   -------------------------------------------------------------------------- */

/* 13.1 Filter bar — one GET form per list (pages, audit). Fields wrap. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
.filter-bar .field {
  margin-bottom: 0;
  flex: 1 1 12rem;
  min-width: 0;
}
.filter-bar .field--grow {
  flex: 2 1 18rem;
}
.filter-bar .field--narrow {
  flex: 0 1 11rem;
}
.filter-bar .checkbox {
  min-height: var(--control-h);
  flex: 0 0 auto;
  font-size: var(--fs-sm);
}
.filter-bar__actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--control-h);
}

/* 13.2 Stacked cell — primary line + muted secondary (title/slug, name/handle). */
.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.cell-stack__sub {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.table .cell-stack a {
  font-weight: 600;
}
.table--dense th,
.table--dense td {
  padding: var(--s-2) var(--s-3);
}
.table--dense th:first-child,
.table--dense td:first-child {
  padding-left: var(--s-5);
}
.table--dense th:last-child,
.table--dense td:last-child {
  padding-right: var(--s-5);
}
.table .actions .btn + .btn,
.table .actions .btn + form,
.table .actions form + .btn {
  margin-left: var(--s-1);
}
.table tr.is-purged td {
  color: var(--ink-muted);
}
.table tr.is-purged .cell-stack a {
  color: var(--ink-muted);
  font-weight: 400;
}

/* 13.3 Share summary — compact icon+count triplet in a table cell. */
.share-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  white-space: nowrap;
}
.share-summary__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.share-summary__item .icon {
  width: 1rem;
  height: 1rem;
}
.share-summary__item--everyone {
  color: var(--accent);
  font-weight: 700;
}
.share-summary__none {
  color: var(--ink-placeholder);
}

/* 13.4 Confirmation box — step 2 of a two-step form (no confirm() dialogs). */
.confirm-box {
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
  border-radius: var(--r-md);
  color: var(--ink);
}
.confirm-box .meta {
  margin: var(--s-3) 0;
}
.confirm-box .meta dt {
  color: var(--ink-muted);
}
.confirm-box .field {
  margin: var(--s-4) 0 0;
  max-width: 24rem;
}
.confirm-box .field__hint {
  color: var(--ink-muted);
}
.confirm-box .input {
  font-family: var(--font-mono);
}
.confirm-box .form-actions {
  margin-top: var(--s-4);
  justify-content: flex-start;
}

/* 13.5 Inline details (audit payload) — <details> collapsed by default. */
.details-inline {
  font-size: var(--fs-xs);
}
.details-inline > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--control-h-sm);
  padding: 0 var(--s-2);
  margin-left: calc(-1 * var(--s-2));
  border-radius: var(--r-sm);
  color: var(--link);
  font-weight: 600;
  list-style: none;
}
.details-inline > summary::-webkit-details-marker {
  display: none;
}
.details-inline > summary::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-fast) var(--ease);
}
.details-inline[open] > summary::before {
  transform: rotate(45deg);
}
.details-inline > summary:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.details-inline > summary:focus-visible {
  box-shadow: var(--focus);
}
.details-inline pre {
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  max-width: 36rem;
  max-height: 14rem;
  overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.table td.details {
  min-width: 12rem;
  vertical-align: top;
}

/* 13.6 Pager — cursor pagination (?before=) below a table. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}
.pager__info {
  color: var(--ink-muted);
  margin-right: auto;
}
.pager .btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

/* 13.7 Empty state inside panels — tighter than the section-level version. */
.empty--compact {
  padding: var(--s-8) var(--s-5);
  margin: var(--s-5);
  border-width: 1px;
}
.empty--compact .icon {
  width: 2rem;
  height: 2rem;
}

/* 13.8 Timestamp cell — mono, wraps date/time on two lines when narrow. */
.table .ts {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  white-space: nowrap;
  color: var(--ink-muted);
}

/* 13.9 Responsive */
@media (max-width: 40rem) {
  .filter-bar {
    padding-inline: var(--s-4);
  }
  .filter-bar .field,
  .filter-bar .field--narrow,
  .filter-bar .field--grow {
    flex: 1 1 100%;
  }
  .filter-bar__actions {
    width: 100%;
  }
  .filter-bar__actions .btn {
    flex: 1;
  }
  .confirm-box .field {
    max-width: none;
  }
  .pager__info {
    width: 100%;
    margin-right: 0;
  }
}
@media print {
  .filter-bar,
  .pager {
    display: none !important;
  }
  .details-inline[open] pre {
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   Developer addition (spec §6): skip link becomes visible on focus.
   -------------------------------------------------------------------------- */
.skip-link:focus {
  position: fixed !important;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  clip: auto;
  white-space: normal;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--focus);
}

/* --------------------------------------------------------------------------
   14. M4 additions (developer, spec-conform): the no-JS picker's candidate
   list inside an info flash, and the upload form's checkbox spacing. No new
   colour tokens.
   -------------------------------------------------------------------------- */
.candidate-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
}
.candidate-list li {
  margin: 0;
  padding: 0;
}
.candidate-list .btn small {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-muted);
  text-align: left;
}
.upload-form .checkbox {
  margin-top: var(--s-4);
}
.upload-form .flash {
  margin-bottom: var(--s-5);
}