/*
 * One stylesheet, tokens at the top, semantic classes below.
 * Every colour, space, radius and font size in this file comes from a custom property
 * declared in :root — no raw hex outside the token block, and no inline styles in any
 * template. Adding a shade means adding a token.
 */

:root {
  /* Palette (light) */
  --colour-bg: #f6f7f9;
  --colour-surface: #ffffff;
  --colour-surface-alt: #f0f2f5;
  --colour-border: #d8dce3;
  --colour-border-strong: #b3bac5;
  --colour-text: #1a1d23;
  --colour-text-muted: #5b626e;
  --colour-accent: #1f4d8f;
  --colour-accent-text: #ffffff;
  --colour-accent-soft: #e8f0fb;
  --colour-danger: #9c1c1c;
  --colour-danger-soft: #fdecec;
  --colour-warn: #7a4b00;
  --colour-warn-soft: #fff5e0;
  --colour-success: #14622f;
  --colour-success-soft: #e7f5ec;
  --colour-focus: #1f6feb;
  /* A QR code must stay dark-on-white to scan reliably, in either theme. */
  --colour-qr-bg: #ffffff;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --leading: 1.55;

  /* Shape */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 8%);
  --shadow: 0 4px 12px rgb(16 24 40 / 10%);
  --border-width: 1px;
  --layer-base: 0;
  --layer-header: 10;
  --measure: 34rem;
  --page-max: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --colour-bg: #14171c;
    --colour-surface: #1c2027;
    --colour-surface-alt: #23282f;
    --colour-border: #333a44;
    --colour-border-strong: #4a525e;
    --colour-text: #e8eaee;
    --colour-text-muted: #a3abb8;
    --colour-accent: #7fb0f5;
    --colour-accent-text: #10151c;
    --colour-accent-soft: #1d2937;
    --colour-danger: #f4a3a3;
    --colour-danger-soft: #34201f;
    --colour-warn: #f0c477;
    --colour-warn-soft: #33270f;
    --colour-success: #92d6a8;
    --colour-success-soft: #16281c;
    --colour-focus: #7fb0f5;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 4px 14px rgb(0 0 0 / 45%);
  }
}

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

body {
  margin: 0;
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--colour-accent); }
a:hover { text-decoration: none; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ layout */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--colour-surface);
  border-bottom: var(--border-width) solid var(--colour-border);
  box-shadow: var(--shadow-sm);
}

.brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--colour-text);
}

.nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.nav-link {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--colour-text-muted);
}
.nav-link:hover { background: var(--colour-surface-alt); color: var(--colour-text); }
.nav-link.is-active { background: var(--colour-accent-soft); color: var(--colour-accent); }

.topbar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.who { color: var(--colour-text-muted); font-size: var(--text-sm); }

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
}
.page-narrow { max-width: var(--measure); }

.footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-6);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------------- typography */

.h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); line-height: 1.2; }
.h2 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.lead { font-size: var(--text-lg); margin-top: 0; }
.muted { color: var(--colour-text-muted); font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--colour-surface);
  border: var(--border-width) solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card-form { max-width: var(--measure); margin-inline: auto; }
.card-highlight { border-color: var(--colour-accent); background: var(--colour-accent-soft); }

/* ------------------------------------------------------------------- forms */

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.row-end { justify-content: flex-end; }
.row-form { align-items: flex-end; }
.inline-form { display: inline; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-inline { flex-direction: row; align-items: center; gap: var(--space-2); }
.field-grow { flex: 1 1 16rem; }
.field-label { font-size: var(--text-sm); font-weight: 600; }
.field-hint { font-size: var(--text-xs); color: var(--colour-text-muted); }

.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--colour-text);
  background: var(--colour-surface);
  border: var(--border-width) solid var(--colour-border-strong);
  border-radius: var(--radius);
}
.input:focus-visible { border-color: var(--colour-focus); }
.input-code { letter-spacing: 0.35em; font-family: var(--font-mono); }
textarea.input { resize: vertical; }

.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

.searchbar {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.searchbar .input { min-width: 16rem; flex: 1 1 20rem; }

/* ----------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-text);
  background: var(--colour-surface-alt);
  border: var(--border-width) solid var(--colour-border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.button:hover { border-color: var(--colour-text-muted); }
.button-primary {
  background: var(--colour-accent);
  border-color: var(--colour-accent);
  color: var(--colour-accent-text);
}
.button-quiet { background: transparent; border-color: transparent; color: var(--colour-text-muted); }
.button-quiet:hover { background: var(--colour-surface-alt); }
.button-danger { color: var(--colour-danger); border-color: var(--colour-border); }
.button-danger:hover { background: var(--colour-danger-soft); }
.button-tiny { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.button-reveal { min-width: 5.5rem; justify-content: center; }

/* ------------------------------------------------------------------ tables */

.table-scroll { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--colour-surface);
  border: var(--border-width) solid var(--colour-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.table th, .table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--colour-border);
  vertical-align: top;
}
.table thead th {
  background: var(--colour-surface-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colour-text-muted);
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.cell-name { font-weight: 600; }
.cell-actions { white-space: nowrap; text-align: right; }
.table-audit .detail { color: var(--colour-text-muted); max-width: 22rem; }

/* ------------------------------------------------------- secrets and pills */

.secret {
  display: inline-block;
  min-width: 6rem;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  word-break: break-all;
  background: var(--colour-surface-alt);
  border-radius: var(--radius-sm);
}
.secret:empty { display: none; }

.secret-shown {
  padding: var(--space-3);
  background: var(--colour-surface-alt);
  border: var(--border-width) dashed var(--colour-border-strong);
  border-radius: var(--radius);
  word-break: break-all;
}

.tag, .badge, .pill {
  display: inline-block;
  padding: 0 var(--space-2);
  margin-right: var(--space-1);
  font-size: var(--text-xs);
  border-radius: 999px;
  border: var(--border-width) solid var(--colour-border-strong);
  color: var(--colour-text-muted);
}
.pill-success { color: var(--colour-success); background: var(--colour-success-soft); border-color: currentcolor; }
.pill-failure, .pill-revoked { color: var(--colour-danger); background: var(--colour-danger-soft); border-color: currentcolor; }
.pill-denied, .pill-pending { color: var(--colour-warn); background: var(--colour-warn-soft); border-color: currentcolor; }
.pill-used { color: var(--colour-text-muted); }

/* ------------------------------------------------------------------ alerts */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  font-size: var(--text-sm);
}
.alert-error { color: var(--colour-danger); background: var(--colour-danger-soft); border-color: currentcolor; }
.alert-warn { color: var(--colour-warn); background: var(--colour-warn-soft); border-color: currentcolor; }
.alert-ok { color: var(--colour-success); background: var(--colour-success-soft); border-color: currentcolor; }

.empty { color: var(--colour-text-muted); padding: var(--space-5) 0; text-align: center; }

.steps { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.qr {
  padding: var(--space-3);
  background: var(--colour-qr-bg);
  border-radius: var(--radius);
  display: inline-block;
}
.details { font-size: var(--text-sm); }

@media (max-width: 40rem) {
  .page { padding: var(--space-4) var(--space-3) var(--space-6); }
  .topbar { padding: var(--space-3); }
  .cell-actions { text-align: left; }
}