@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* ============================================================================
   Asset Management — interface styles.

   One stylesheet, no build step, no framework. The product is operated on a
   phone in a store room as often as on a desk, so touch targets stay large and
   tables collapse rather than scroll off screen.
   ========================================================================= */

/* Design tokens — ported from the QC Tracking design system so this product
   and the existing one look like the same company made them. Names on the left
   are this codebase's; the values are theirs. */
:root {
  /* Brand + neutrals */
  --navy:        #0F172A;
  --navy-2:      #1E293B;
  --sidebar-bg:  #0C1220;

  --brand:       #6366F1;   /* indigo   — primary */
  --brand-2:     #8B5CF6;   /* violet   — gradient end */
  --brand-ink:   #4F46E5;   /* pressed / hover */
  --brand-dim:   #EEF0FF;   /* tinted fill */
  --accent:      #06B6D4;
  --accent-2:    #22D3EE;

  --grad-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --grad-navbar:  linear-gradient(90deg, #080d14 0%, #0d1520 60%, #080d14 100%);
  --grad-mark:    linear-gradient(135deg, #0EA5E9 0%, #38D9F5 100%);

  /* Surfaces */
  --stock:       #F1F5F9;
  --surface:     #FFFFFF;
  --surface-2:   #F1F5F9;
  --rule:        #E2E8F0;
  --rule-soft:   #EEF2F7;
  --rule-strong: #CBD5E1;

  --ink:         #0F172A;
  --ink-soft:    #64748B;
  --ink-faint:   #94A3B8;

  /* Semantic */
  --good:      #10B981;
  --good-dim:  #D1FAE5;
  --warn:      #F97316;
  --warn-dim:  #FFEDD5;
  --bad:       #EF4444;
  --bad-dim:   #FEE2E2;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --shadow:    0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, .18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* A column at least as tall as the window, so the content area can be told to
     take up the slack and push the footer down. Without this a short page — an
     empty register, a dashboard with three tiles — leaves the footer stranded
     halfway down with blank space beneath it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Takes the slack. `1 0 auto` rather than `1 1 auto`, so a long page still
   grows past the viewport instead of being squeezed to fit inside it. */
.main, .shell, .stmain { flex: 1 0 auto; }

a { color: var(--brand); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--grad-navbar); color: #fff;
  padding: 0 20px; height: 62px;
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
/* The logo file is already a rounded app icon with its own ground, so it is
   shown as itself. It used to sit shrunk to 76% inside a second gradient
   square, which read as a badge inside a badge. */
.brand__mark {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  display: block; overflow: hidden;
  box-shadow: 0 3px 12px rgba(6, 182, 212, .35);
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand__name { font-weight: 700; font-size: 16px; letter-spacing: -.015em; }
.topbar__spacer { flex: 1; }

.topbar__menu {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.topbar__menu span { width: 18px; height: 2px; background: #fff; border-radius: 2px; }

.who { text-align: right; line-height: 1.25; }
.who__name { display: block; font-size: 13px; font-weight: 600; }
.who__role { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); }
.topbar__out { margin: 0; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; }

.sidebar {
  padding: 16px 12px; position: sticky; top: 62px;
  height: calc(100vh - 62px); overflow-y: auto;
  background: var(--sidebar-bg);
}
.nav { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav__link {
  display: block; padding: 10px 13px; border-radius: var(--r-md);
  color: #94A3B8; text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.nav__link:hover { background: rgba(255, 255, 255, .06); color: #E2E8F0; }
.nav__link.is-active {
  background: rgba(99, 102, 241, .18); color: #fff; font-weight: 650;
  box-shadow: inset 2px 0 0 var(--brand);
}
.nav__head {
  margin: 22px 13px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #475569;
}

.main { padding: 24px 28px 64px; min-width: 0; }

/* ── Page furniture ──────────────────────────────────────────────────────── */
.page-head { margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.page-head__sub { margin: 3px 0 0; color: var(--ink-faint); font-size: 13.5px; }

.panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow);
}
.panel__title { margin: 0 0 14px; font-size: 14px; font-weight: 700; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.stat {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 16px 18px; text-decoration: none;
  display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow);
}
.stat:hover { border-color: var(--brand); }
.stat__n {
  font-size: 27px; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 12.5px; color: var(--ink-faint); }
.stat--bad .stat__n { color: var(--bad); }

/* ── Worklist ────────────────────────────────────────────────────────────── */
.worklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.worklist__item a {
  display: block; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--rule); border-left-width: 3px;
  text-decoration: none; background: var(--surface);
}
.worklist__item a:hover { background: var(--surface-2); }
.worklist__item--warn a { border-left-color: var(--warn); }
.worklist__item--info a { border-left-color: var(--brand); }
.worklist__item--good a { border-left-color: var(--good); }
.worklist__label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.worklist__hint  { display: block; font-size: 12px; color: var(--ink-faint); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.table--flush td:last-child, .table--flush th:last-child { padding-right: 0; }
.table tr:last-child td { border-bottom: 0; }

.muted { color: var(--ink-faint); }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .92em; }

.empty {
  margin: 0; padding: 22px 4px; color: var(--ink-faint);
  font-size: 13.5px; text-align: center;
}

.facts { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 16px; }
.facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }

.filelist { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13.5px; }
.filelist li { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.form__section {
  margin: 8px 0 -4px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
.field--error input { border-color: var(--bad); }
.field__error { margin: 0; font-size: 12.5px; color: var(--bad); }
.field__hint  { margin: 0; font-size: 12.5px; color: var(--ink-faint); }

.btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px;
}
.btn--primary { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .6); }
.btn--primary:hover { filter: brightness(1.07); }
.btn--ghost {
  background: transparent; color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .28);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--block { width: 100%; }

/* ── Flash + hints ───────────────────────────────────────────────────────── */
.flash {
  padding: 11px 15px; border-radius: var(--r-md); margin-bottom: 16px;
  font-size: 14px; border: 1px solid transparent;
}
.flash--success { background: var(--good-dim); color: var(--good); border-color: rgba(28, 122, 79, .25); }
.flash--error   { background: var(--bad-dim);  color: var(--bad);  border-color: rgba(163, 44, 44, .25); }
.flash--warning { background: var(--warn-dim); color: var(--warn); border-color: rgba(168, 98, 47, .25); }

.hint { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-soft); }
.hint--warn {
  background: var(--warn-dim); color: var(--warn);
  padding: 10px 14px; border-radius: var(--r-md);
}

.checks { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.check {
  padding: 10px 14px; border-radius: var(--r-md); font-size: 13.5px;
  border: 1px solid var(--rule); background: var(--surface);
  border-left-width: 3px;
}
.check strong { display: inline-block; min-width: 120px; }
.check--ok   { border-left-color: var(--good); }
.check--bad  { border-left-color: var(--bad); background: var(--bad-dim); }
.check--info { border-left-color: var(--brand); }

/* ── Signed-out pages ────────────────────────────────────────────────────── */
.body--plain { background: var(--stock); }
.plain {
  max-width: 480px; margin: 0 auto; padding: 56px 20px 64px;
  display: flex; flex-direction: column; gap: 18px;
}
.plain__brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 4px; }
.plain__brand .brand__name { color: var(--ink); font-size: 17px; }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 26px 26px 22px; box-shadow: var(--shadow);
}
.card--narrow { padding: 26px; }
.card__title { margin: 0 0 16px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.card__foot { margin: 18px 0 0; font-size: 13.5px; text-align: center; }

.error__code {
  margin: 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; color: var(--ink-faint);
}

/* ── Small screens: the store-room case ──────────────────────────────────── */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .topbar__menu { display: flex; }
  .sidebar {
    display: none; position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .sidebar.is-open { display: block; }
  .main { padding: 18px 16px 56px; }
  .who__role { display: none; }

  /* Tables become stacked records rather than scrolling sideways. */
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr { padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
  .table td { border: 0; padding: 2px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .topbar, .sidebar, .btn, .flash { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .main { padding: 0; }
  .panel { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   Phase 1 — register, forms, master data
   ========================================================================== */

.page-head--row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eyebrow {
  margin: 0 0 2px; font-size: 12px; letter-spacing: .06em;
  color: var(--ink-faint); text-transform: uppercase;
}
.subhead { margin: 18px 0 6px; font-size: 13px; font-weight: 700; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* -- Filter bar ----------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.filters__search { flex: 1 1 260px; min-width: 200px; }
.filters input, .filters select {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 8px 11px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); width: 100%;
}
.filters select { width: auto; min-width: 130px; cursor: pointer; }
.filters input:focus, .filters select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim);
}
.filters__clear { font-size: 13px; color: var(--ink-faint); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-dim); color: var(--brand);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.chip a { color: inherit; text-decoration: none; font-size: 15px; line-height: 1; }

/* -- Tables --------------------------------------------------------------- */
.panel--flush { padding: 0; overflow: hidden; }
.panel--flush .table { margin: 0; }
.panel--flush .table th { padding: 14px 14px 9px; }
.panel--flush .table td { padding: 11px 14px; }
.panel--flush .empty { padding: 34px 20px; }
.panel--quiet { background: var(--surface-2); box-shadow: none; }

.table--rows tbody tr:hover { background: var(--surface-2); }
.table .strong { font-weight: 700; }
.table .sub { display: block; font-size: 12px; color: var(--ink-faint); }
.is-inactive td { opacity: .58; }
.is-expired { color: var(--bad); font-weight: 600; }

.sort { color: inherit; text-decoration: none; }
.sort:hover { color: var(--brand); }
.sort.is-sorted { color: var(--brand); }

.tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; margin-left: 6px;
}
.tag--muted { background: var(--surface-2); color: var(--ink-faint); }

.status {
  display: inline-block; font-size: 12px; font-weight: 650;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
}
.status--active    { background: var(--good-dim); color: var(--good); }
.status--in_repair { background: var(--warn-dim); color: var(--warn); }
.status--lost      { background: var(--bad-dim);  color: var(--bad); }
.status--disposed,
.status--retired   { background: var(--surface-2); color: var(--ink-faint); }

.row-actions { text-align: right; white-space: nowrap; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--brand); font-weight: 600;
}
.linkbtn:hover { text-decoration: underline; }

.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 18px;
}
.pager__state { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* -- Forms ---------------------------------------------------------------- */
.form--wide { gap: 18px; }
.cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cols .field--wide { grid-column: span 2; }
@media (max-width: 640px) { .cols .field--wide { grid-column: span 1; } }
.form__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel .form { margin-top: 4px; }

.btn--secondary {
  background: var(--surface); color: var(--ink-soft); border-color: var(--rule);
}
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn--danger { background: var(--bad); color: #fff; }
.btn--danger:hover { background: #8b2424; }

.notice {
  padding: 11px 15px; border-radius: var(--r-md); margin: 0 0 16px;
  font-size: 13.5px; border: 1px solid transparent;
}
.notice--warn { background: var(--warn-dim); color: var(--warn); border-color: rgba(168,98,47,.25); }

/* -- Detail view ---------------------------------------------------------- */
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 900px) { .grid--sidebar { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.detail { display: grid; gap: 12px 22px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; }
.detail dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
}
.detail dd { margin: 2px 0 0; font-size: 14px; }

.prose { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.bigfig {
  margin: 0 0 6px; font-size: 26px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.linklist a { text-decoration: none; font-size: 13.5px; font-weight: 600; }
.linklist a:hover { text-decoration: underline; }
.linklist .sub { display: block; font-size: 12px; font-weight: 400; }

/* -- Timeline ------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--rule-soft); }
.timeline__item { position: relative; padding: 0 0 15px 14px; font-size: 13.5px; }
.timeline__item::before {
  content: ""; position: absolute; left: -21px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__when { display: block; font-size: 11.5px; color: var(--ink-faint); }
.timeline__what { font-weight: 650; }
.timeline__detail { color: var(--ink-soft); }

/* -- Photographs ---------------------------------------------------------- */
.thumbs {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.thumb { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.thumb img { display: block; width: 100%; height: 110px; object-fit: cover; }
.thumb__flag {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(22,33,31,.78); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 4px;
}
.thumb form { position: absolute; top: 5px; right: 5px; margin: 0; }
.thumb__remove {
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(22,33,31,.72); color: #fff; font-size: 15px; line-height: 1;
}
.thumb__remove:hover { background: var(--bad); }

/* -- Tabs ----------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.tabs__tab {
  padding: 9px 15px; text-decoration: none; font-size: 13.5px; font-weight: 600;
  color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* -- Stacked tables on a phone need their column names back --------------- */
@media (max-width: 860px) {
  .table--rows td[data-label]::before {
    content: attr(data-label) " ";
    display: inline-block; min-width: 92px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .panel--flush .table td { padding: 3px 14px; }
  .panel--flush .table tr { padding: 12px 0; }
  .row-actions { text-align: left; padding-top: 8px !important; }
}

/* ==========================================================================
   Phase 2 — QR labels, printing, and the scan page
   ========================================================================== */

/* -- QR panel on the asset page ------------------------------------------- */
.qrbox { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px; text-align: center; }
.qrbox svg { max-width: 100%; height: auto; }
.qrbox__url { word-break: break-all; margin-top: 8px; }
.qrbox__actions { margin: 12px 0 8px; }

/* -- Print toolbar -------------------------------------------------------- */
.body--print { background: var(--stock); }
.printpage { max-width: 1000px; margin: 0 auto; padding: 22px 20px 60px; }

.toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.toolbar__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.toolbar__sub { margin: 3px 0 0; font-size: 13px; color: var(--ink-faint); }
.toolbar__actions { display: flex; gap: 8px; }

.printhint { margin: 20px 0 0; font-size: 13px; color: var(--ink-faint); }
.notice form { margin-top: 8px; }

/* -- The label sheet -----------------------------------------------------
   Sized in millimetres so what prints matches what the setting says. The grid
   uses the same units, which is why "fit to page" must be off — scaling the
   page scales the code and can push it under a scanner's resolution.        */
.labels {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--label-w, 50mm));
  gap: 3mm;
  align-content: start;
}
.label {
  width: var(--label-w, 50mm);
  height: var(--label-h, 25mm);
  border: 1px dashed var(--rule);
  border-radius: 1mm;
  padding: 1.5mm;
  display: flex; align-items: center; gap: 2mm;
  overflow: hidden;
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}
.label__qr { flex: 0 0 auto; line-height: 0; }
.label__qr svg { display: block; width: auto; height: calc(var(--label-h, 25mm) - 3mm); }
.label__text { display: flex; flex-direction: column; gap: 0.4mm; min-width: 0; }
.label__no {
  font-family: var(--mono); font-size: 3mm; font-weight: 700; color: #000;
  letter-spacing: -0.02em;
}
.label__name {
  font-size: 2.6mm; color: #000; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.label__where { font-size: 2.2mm; color: #444; }

@media print {
  @page { size: A4; margin: 8mm; }
  .body--print { background: #fff; }
  .printpage { max-width: none; padding: 0; }
  .noprint { display: none !important; }
  /* Dashed guides are for cutting on screen; on paper they waste toner and
     confuse a die-cut sheet. */
  .label { border-color: transparent; }
  .labels { gap: 2mm; }
}

/* -- The scan page -------------------------------------------------------- */
.body--scan { background: var(--stock); }
.scan {
  max-width: 460px; margin: 0 auto;
  padding: 26px 16px calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.scan__card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--shadow);
}
.scan__card--empty { text-align: center; }
.scan__no {
  margin: 0 0 2px; font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink-faint); text-transform: uppercase;
}
.scan__name { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.scan__status { margin: 0 0 16px; }

.scan__facts { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.scan__facts > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--rule-soft);
}
.scan__facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.scan__facts dt { font-size: 13px; color: var(--ink-faint); }
.scan__facts dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; }

/* Fingers, not cursors: this page is only ever used on a phone. */
.scan .btn { min-height: 48px; font-size: 15px; }

.scan__note { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.scan__note + .scan__note { margin-top: 10px; }
.scan__staff { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-soft); font-size: 13.5px; }
.scan__foot {
  margin: 0; text-align: center; font-size: 11.5px;
  color: var(--ink-faint); letter-spacing: .03em;
}

/* ==========================================================================
   Phase 3 — issue catalogs, tickets, reporting from a scan
   ========================================================================== */

/* -- Shared: priority and ticket status pills -----------------------------
   Priority and status answer different questions, so they read differently:
   priority is a filled chip, status an outlined one. Side by side in a table
   row the two never blur into one another.                                  */
.prio {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.prio--critical { background: var(--bad-dim);   color: var(--bad); }
.prio--high     { background: var(--warn-dim);  color: var(--warn); }
.prio--medium   { background: var(--surface-2); color: var(--ink-soft); }
.prio--low      { background: var(--surface-2); color: var(--ink-faint); }

.tstatus {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  border: 1px solid var(--rule);
}
.tstatus--open        { border-color: rgba(163, 44, 44, .3); color: var(--bad);   background: var(--bad-dim); }
.tstatus--in_progress { border-color: rgba(31, 78, 74, .3);  color: var(--brand); background: var(--brand-dim); }
.tstatus--waiting     { border-color: rgba(168, 98, 47, .3); color: var(--warn);  background: var(--warn-dim); }
.tstatus--resolved    { border-color: rgba(28, 122, 79, .3); color: var(--good);  background: var(--good-dim); }
.tstatus--closed      { color: var(--ink-faint); background: var(--surface-2); }

.is-warn { color: var(--warn); }
.is-bad  { color: var(--bad); }

.checkline { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; cursor: pointer; }
.checkline input { margin-top: 3px; flex: 0 0 auto; }

.facts--stack { flex-direction: column; gap: 10px; }

/* -- Catalogs: areas and the issues under them ---------------------------- */
.catnode__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.catnode__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.catnode__sub   { margin: 3px 0 0; font-size: 13px; color: var(--ink-faint); }
.catnode__empty { margin: 0; font-size: 13px; color: var(--ink-faint); font-style: italic; }

.issues { list-style: none; margin: 0; padding: 0; }
.issue {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--rule-soft);
}
.issue__text { flex: 1 1 200px; min-width: 0; }
.issue__name { display: block; font-size: 14px; font-weight: 600; }
.issue__sub  { display: block; font-size: 12.5px; color: var(--ink-faint); }
.issue__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.issue__action { margin: 0; }

/* -- Ticket list: the quick views ----------------------------------------
   Four named slices, because "open work", "nobody has it" and "overdue" are
   the questions actually asked. Rebuilding each of them from filter
   dropdowns is work the screen should already have done.                    */
.quickviews { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.quickview {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600;
}
.quickview:hover { border-color: var(--brand); color: var(--brand); }
.quickview.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.quickview__n {
  font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft);
}
.quickview.is-active .quickview__n { background: rgba(255, 255, 255, .2); color: #fff; }
.quickview__n.is-bad { background: var(--bad-dim); color: var(--bad); }
.quickview.is-active .quickview__n.is-bad { background: rgba(255, 255, 255, .22); color: #fff; }

/* -- One ticket ----------------------------------------------------------- */
.tkhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.tkbody { margin: 0; font-size: 14.5px; line-height: 1.6; }
.tkasset { margin: 0 0 10px; display: flex; flex-direction: column; gap: 2px; }
.tkasset__name { font-size: 14px; font-weight: 600; }

/* Photographs, as thumbnails. A phone photo shown full width pushes the
   history off the screen, and the history is the part being read. */
.shots { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.shots--inline { margin: 8px 0 0; }
.shot {
  display: block; width: 84px; height: 84px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--rule); background: var(--surface-2);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot__file {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 6px; font-size: 11px; color: var(--ink-faint); text-align: center;
  word-break: break-all;
}

/* -- Notes and events on one timeline ------------------------------------
   One list on purpose: reading them apart means reconstructing the order in
   your head, which is where "who knew what when" arguments come from.       */
.tline { list-style: none; margin: 0; padding: 0; }
.tl {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 13.5px;
}
.tline .tl:first-child { border-top: 0; padding-top: 0; }
.tl__when {
  color: var(--ink-faint); font-size: 12.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl__what { min-width: 0; }
.tl__from { color: var(--ink-faint); }
.tl__body { display: block; margin-top: 4px; line-height: 1.55; }
.tl--event { color: var(--ink-soft); }
/* An internal note is marked in the margin as well as by its tag: the tag
   scrolls out of view, the stripe does not. */
.tl--internal {
  background: var(--warn-dim); border-left: 3px solid var(--warn);
  padding-left: 11px; margin-left: -14px;
}

@media (max-width: 620px) {
  .tl { grid-template-columns: 1fr; gap: 3px; }
  .tl--internal { margin-left: 0; }
}

/* -- Reporting from a phone ----------------------------------------------- */
.scan__card .field { margin-bottom: 16px; }
.scan__card .field:last-of-type { margin-bottom: 18px; }
.scan__card .field label { font-size: 14px; }
/* 16px or larger stops iOS zooming the page when a field takes focus, which
   leaves the person scrolled sideways halfway through reporting. */
.scan__card input, .scan__card select, .scan__card textarea { font-size: 16px; padding: 11px 12px; }

.scan__who { margin: 4px 0 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.scan__whotitle { margin: 0 0 2px; font-size: 14px; font-weight: 700; }

.scan__tick { margin: 0 0 6px; font-size: 40px; line-height: 1; color: var(--good); }

/* ==========================================================================
   Phase 4 — audit cycles and the scanning screen
   ========================================================================== */

/* -- Progress ------------------------------------------------------------- */
.meter {
  height: 8px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; margin: 0 0 10px;
}
.meter--sm { height: 5px; margin: 0 0 4px; max-width: 140px; }
.meter--lg { height: 12px; margin: 0 0 18px; }
.meter__fill {
  display: block; height: 100%; background: var(--brand);
  border-radius: 999px; transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } }

.tallies {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.tally { display: flex; flex-direction: column; gap: 1px; }
.tally__n {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tally__label { font-size: 12.5px; color: var(--ink-faint); }
.tally--warn .tally__n { color: var(--warn); }
.tally--bad  .tally__n { color: var(--bad); }

/* -- Audit results -------------------------------------------------------
   Distinct from ticket statuses and asset statuses on purpose: an audit page
   can show all three, and three pill styles that look alike would be worse
   than none.                                                                */
.ares {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ares--found     { background: var(--good-dim); color: var(--good); }
.ares--misplaced { background: var(--warn-dim); color: var(--warn); }
.ares--damaged   { background: var(--warn-dim); color: var(--warn); }
.ares--missing   { background: var(--bad-dim);  color: var(--bad); }

/* -- The scanning screen -------------------------------------------------
   Lives inside layouts/scan, so it inherits the phone-sized column. Nothing
   here should need two hands or a second look.                              */
.auditbar { position: sticky; top: 0; z-index: 5; }
.auditbar__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.auditbar__count { margin: 0; font-size: 13px; color: var(--ink-soft); }
.auditbar__count strong { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The code box is the whole interface on a desktop with a scanner gun, so it
   is sized to be unmissable and to hold focus visibly. */
[data-code] {
  font-family: var(--mono); font-size: 17px !important;
  letter-spacing: .02em; text-align: center;
}
[data-code]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* AU-14. A scan that did not save has to look wrong from across a room —
   without an offline queue this is the only thing between a dropped
   connection and an asset wrongly reported missing. */
[data-code].is-bad {
  border-color: var(--bad); background: var(--bad-dim); color: var(--bad);
  box-shadow: 0 0 0 3px rgba(163, 44, 44, .16);
}

.is-busy { opacity: .6; pointer-events: none; }

.camera {
  display: block; width: 100%; margin-top: 12px;
  border-radius: var(--r-md); background: #000; aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* -- The running log -----------------------------------------------------
   Newest first, because the only entry anyone checks is the one they just
   made — and it is also where a failure stays visible after the box is
   retyped.                                                                  */
.scan__card--log { padding-bottom: 14px; }
.log__title {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.log { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.log__empty { font-size: 13.5px; color: var(--ink-faint); font-style: italic; }
.log__row {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 0 8px 11px; border-left: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft); font-size: 13.5px;
}
.log__row:last-child { border-bottom: 0; }
.log__row strong { font-weight: 650; }
.log__row span { font-size: 12.5px; color: var(--ink-faint); }
.log__row--ok   { border-left-color: var(--good); }
.log__row--warn { border-left-color: var(--warn); }
.log__row--bad  { border-left-color: var(--bad); background: var(--bad-dim); }
.log__row--bad span { color: var(--bad); font-weight: 600; }

/* ==========================================================================
   Phase 5 — settings, users and roles, activity, reports
   ========================================================================== */

/* -- The settings screen -------------------------------------------------
   ST-2: values, not prose. One setting per row, label and one line of
   guidance on the left, the live control on the right, aligned down a column
   so the page can be scanned for the switch someone came to find.           */
.settings { display: flex; flex-direction: column; gap: 18px; }
.spanel { padding: 6px 20px 8px; }
.spanel__title {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}

/* Marks a section only a super admin can see, so the difference between two
   administrators' screens has a visible reason rather than looking like a bug. */
.stag {
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--brand-dim);
  background: var(--brand-dim);
  color: var(--brand-ink);
  font-size: 10px; letter-spacing: .05em;
}

.srow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 13px 0; border-top: 1px solid var(--rule-soft);
}
.spanel__title + .srow { border-top: 0; }
.srow__text { min-width: 0; flex: 1 1 auto; }
.srow__label { display: block; font-size: 14px; font-weight: 600; }
.srow__hint  { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
.srow__control { flex: 0 0 auto; display: flex; align-items: center; min-width: 190px; justify-content: flex-end; }
.srow__control input[type="text"],
.srow__control select { width: 190px; }
.srow__control .input--narrow { width: 90px; }
.srow--error { background: var(--bad-dim); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

/* A read-only fact, shown the same way a value is so the column still reads
   as one column. */
.sval {
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Only shown while the risky option is actually selected. A standing row of
   cautions teaches people to ignore all of them, including the real one. */
.srow__warn {
  margin: 0 -20px; padding: 11px 20px;
  background: var(--warn-dim); color: var(--warn);
  font-size: 13px; line-height: 1.5;
  border-top: 1px solid rgba(168, 98, 47, .2);
}

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 42px; height: 24px; border-radius: 999px; background: var(--rule);
  position: relative; transition: background .15s ease; flex: 0 0 auto;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch__state { font-size: 13px; font-weight: 600; color: var(--ink-soft); min-width: 24px; }
@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__track::after { transition: none; }
}

/* The page is long enough that a save button at the foot is one the person
   has already scrolled past. */
.savebar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.savebar__note { font-size: 12.5px; color: var(--ink-faint); }

@media (max-width: 620px) {
  .srow { flex-direction: column; align-items: stretch; gap: 8px; }
  .srow__control { justify-content: flex-start; min-width: 0; }
  .srow__control input[type="text"], .srow__control select { width: 100%; }
}

/* -- Roles ---------------------------------------------------------------- */
.perms { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.perm__key {
  display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}

/* -- Activity log --------------------------------------------------------- */
.ctx { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.ctx li { display: flex; gap: 6px; }
.ctx__k { color: var(--ink-faint); font-family: var(--mono); font-size: 11.5px; }

/* -- Reports -------------------------------------------------------------- */
.grid--sidebar-left { grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 900px) { .grid--sidebar-left { grid-template-columns: 1fr; } }

.rlist { display: flex; flex-direction: column; gap: 2px; }
.rlist__item {
  display: block; padding: 10px 12px; border-radius: var(--r-md);
  text-decoration: none; color: var(--ink);
}
.rlist__item:hover { background: var(--surface-2); }
.rlist__item.is-active { background: var(--brand-dim); }
.rlist__title { display: block; font-size: 13.5px; font-weight: 650; }
.rlist__item.is-active .rlist__title { color: var(--brand); }
.rlist__q { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.4; }

.rhead { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Raising an issue — the stepped wizard
   Shared by the staff form and the public page a QR code opens.
   ========================================================================== */

.wiz { display: block; }

/* -- Where you are --------------------------------------------------------
   A path you can walk back, not chips to delete — so no remove icon, and the
   separators carry the meaning.                                             */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 18px; }
.crumb {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent;
  color: var(--ink-faint); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.crumb:hover { background: var(--brand-dim); color: var(--brand); }
.crumb + .crumb::before {
  content: "›"; margin-right: 7px; color: var(--rule); font-weight: 400;
}

/* -- A step --------------------------------------------------------------- */
.wstep { margin-bottom: 22px; }
.wstep__head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.wstep__n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.wstep__label { margin: 0; font-size: 14px; font-weight: 700; }

.wtag {
  margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: middle;
}
.wtag--opt { background: var(--surface-2); color: var(--ink-faint); }
.wtag--req { background: var(--bad-dim); color: var(--bad); }

/* -- The choices ---------------------------------------------------------
   Large targets in a grid, not a drop-down. A flat list of every fault is
   unusable the moment a catalog outgrows one screen, and it asks somebody
   holding a phone to read all of it before choosing.                        */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; }
.choices--tight { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 9px; }

.choice {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 54px; padding: 13px 15px; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(22, 33, 31, .04);
  transition: border-color .14s, box-shadow .14s, transform .1s;
}
.choice:hover { border-color: var(--brand); box-shadow: 0 3px 10px rgba(31, 78, 74, .13); transform: translateY(-1px); }
.choice:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .choice { transition: none; }
  .choice:hover { transform: none; }
}

.choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__name { font-size: 14.5px; font-weight: 650; }
.choice__sub  { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
.choice__go   { flex: 0 0 auto; color: var(--ink-faint); font-size: 18px; line-height: 1; }
.choice:hover .choice__go { color: var(--brand); }

/* The radio itself is hidden, but only visually — it still takes focus and
   still answers to the keyboard, which is what makes these cards real
   controls rather than divs pretending. */
.choice--pick input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.choice__go, .tick { pointer-events: none; }

.tick {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--rule); background: var(--surface);
}
.choice--pick input:checked ~ .tick {
  border-color: var(--brand); background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.choice--pick:has(input:checked) {
  border-color: var(--brand); background: var(--brand-dim);
}
.choice--pick input:focus-visible ~ .choice__text {
  text-decoration: underline; text-underline-offset: 3px;
}
.choice--pick:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

.choice--pill { justify-content: flex-start; min-height: 46px; }
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; background: var(--ink-faint);
}
.dot--critical { background: var(--bad); }
.dot--high     { background: var(--warn); }
.dot--medium   { background: var(--brand); }
.dot--low      { background: var(--ink-faint); }

.wtextarea {
  width: 100%; padding: 11px 13px; border-radius: var(--r-md); resize: vertical;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px;
}
.wtextarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* -- Photographs ---------------------------------------------------------- */
.photos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.photo { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-md); border: 1px solid var(--rule);
}
.photo__x {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bad); color: #fff; border: 2px solid var(--surface);
  padding: 0; font-size: 12px; line-height: 1;
}
.photo__x:hover { background: #8b2424; }

.photoadd {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 11px 16px; cursor: pointer;
  border: 1px dashed var(--rule); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--brand);
  font-size: 14px; font-weight: 600;
}
.photoadd:hover { border-color: var(--brand); }
.photoadd input { position: absolute; opacity: 0; width: 0; height: 0; }
.photoadd:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* On a phone the wizard sits inside the scan card, which already has padding. */
.scan__card .wstep:last-child { margin-bottom: 8px; }
.scan__card .choices { grid-template-columns: 1fr; }
.scan__card .choices--tight { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
/* 16px stops iOS zooming the page when a field takes focus. */
.scan__card .wtextarea { font-size: 16px; }

/* ==========================================================================
   Issue catalog — collapsible areas, matching the reference layout
   ========================================================================== */

.backlink { margin: 0 0 6px; font-size: 13px; }
.backlink a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.backlink a:hover { color: var(--brand); }

/* A chip saying what a row *is*, so "Mechanical" and "Leak" are never mistaken
   for each other when scanning down the page. */
.chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}

/* ==========================================================================
   Issue catalogs — a card per area, the way the reference product does it

   One flat list of forty faults gives the eye nothing to group by, and on a
   wide screen it strands each row's buttons a foot from the name they act on.
   ========================================================================== */

.backbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px 5px 6px; border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: 13px; font-weight: 600; text-decoration: none;
}
.backbtn:hover { background: var(--surface-2); color: var(--ink); }

.areas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.area {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.area--off { opacity: .66; }

/* A <details> summary, so it collapses natively with no script at all. */
.area__head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 14px; cursor: pointer; list-style: none;
  background: var(--surface-2); border-bottom: 1px solid var(--rule);
}
.area__head::-webkit-details-marker { display: none; }

.twisty {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
}
.twisty::before {
  content: "›"; font-size: 17px; line-height: 1; transition: transform .12s;
}
.area[open] > .area__head .twisty::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .twisty::before { transition: none; } }

.area__icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-dim); color: var(--brand);
}
.area__name { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; min-width: 0; }
.area__link { color: inherit; text-decoration: none; }
.area__link:hover { color: var(--brand); }

/* Pushed right, so the count and the buttons share the far edge. */
.area__count {
  margin-left: auto; font-size: 12px; color: var(--ink-faint);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.area__body { padding: 4px 0; }
.area__empty {
  margin: 0; padding: 14px 18px; font-size: 13px; color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.area__empty form { margin: 0; }

/* The catalog card's own body, on the list screen. */
.area__card { padding: 12px 14px 13px; }
.area__desc { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.area__warn { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.area__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.area__foot form { margin: 0; }
.area__used { font-size: 12.5px; color: var(--ink-faint); }
/* A catalog assigned to nothing reaches no asset. Said in colour, because
   otherwise somebody edits it for an hour and wonders why nothing changed. */
.area__unused { font-size: 12.5px; font-weight: 600; color: #B45309; }
.area__open {
  margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--brand); text-decoration: none;
}
.area__open:hover { text-decoration: underline; }

/* -- one fault ------------------------------------------------------------ */

.noderow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 14px; min-height: 40px; margin: 0 6px;
  border-radius: var(--r-md);
}
.noderow:hover { background: var(--surface-2); }
.noderow--off .noderow__name { color: var(--ink-faint); text-decoration: line-through; }
.noderow__name { font-size: 14px; font-weight: 600; min-width: 0; }
.noderow form { margin: 0; }

/* Tags sit right of the name and left of the actions, so a row reads
   name -> what it does -> what you can do to it. */
.noderow__tags {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-left: auto; justify-content: flex-end;
}

/* -- what a row *is*, and what is true about it ---------------------------- */

.ltag {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; line-height: 1.4;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink-faint);
}
.ltag--off  { background: var(--surface-2); }
.ltag--site { background: var(--brand-dim); border-color: #C7D2FE; color: var(--brand-ink); }

.tag--warn { background: var(--warn-dim); color: #92400E; }

/* -- row actions ---------------------------------------------------------- */

/* Held back until the row is hovered, so forty rows do not show a hundred and
   twenty buttons at once. Focus still reveals them, so keyboard use is not
   quietly broken by a hover-only affordance, and coarse pointers keep them
   permanently — there is no hover on a touchscreen. */
.nodeacts {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; margin-left: 10px;
  opacity: 0; transition: opacity .12s;
}
.noderow:hover .nodeacts,
.area__head:hover .nodeacts,
.nodeacts:focus-within { opacity: 1; }
@media (hover: none) { .nodeacts { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nodeacts { transition: none; } }
.nodeacts form { display: inline; margin: 0; }
.nodeacts .iconact { margin-left: 0; width: 28px; height: 28px; }

/* -- nothing here yet ----------------------------------------------------- */

.blank {
  padding: 40px 24px; margin-bottom: 20px; text-align: center;
  border: 1px dashed var(--rule-strong); border-radius: var(--r-lg);
  background: var(--surface);
}
.blank__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.blank__sub { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-faint); }

/* An add form that stays out of the way until wanted — no modal, no script. */
.addrow { margin-top: 12px; }
.addrow > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--brand);
  padding: 7px 0;
}
.addrow > summary::-webkit-details-marker { display: none; }
.addrow > summary:hover { text-decoration: underline; }
.addrow__form {
  margin-top: 10px; padding: 16px;
  background: var(--surface-2); border-radius: var(--r-md);
}
.addrow--quiet { margin-top: 20px; }

/* ==========================================================================
   The shell — control row, everyday nav beneath it, setup behind the gear
   ========================================================================== */

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: var(--r-md); text-decoration: none;
  background: rgba(255, 255, 255, .07); color: #CBD5E1;
  border: 1px solid rgba(255, 255, 255, .09);
}
.iconbtn:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.iconbtn.is-active {
  background: var(--grad-primary); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .8);
}

/* The station link. Cyan rather than white, because the one control in this row
   that leaves the app for a full-screen job should say so — the same
   distinction the existing product draws. */
.iconbtn--station:hover {
  background: rgba(6, 182, 212, .14); color: var(--accent-2);
  border-color: rgba(6, 182, 212, .32);
}
.iconbtn--station.is-active {
  background: rgba(6, 182, 212, .16); color: var(--accent-2);
  border-color: rgba(6, 182, 212, .38); box-shadow: none;
}

.who {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .09);
}
.who:hover { background: rgba(255, 255, 255, .13); }
.who__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3B82F6, #06B6D4); color: #fff;
  font-size: 12.5px; font-weight: 700;
}
.who__text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }

.btn--signout {
  background: rgba(239, 68, 68, .14); color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, .3);
}
.btn--signout:hover { background: rgba(239, 68, 68, .24); color: #fff; }

/* The everyday nav. Five items, always the same five, so it can be hit
   without reading. */
.mainnav {
  display: flex; align-items: stretch; gap: 4px;
  background: var(--navy); padding: 0 20px;
  position: sticky; top: 62px; z-index: 19;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  overflow-x: auto;
}
.mainnav__link {
  display: flex; align-items: center; padding: 0 15px; height: 46px;
  color: #94A3B8; text-decoration: none; font-size: 13.5px; font-weight: 600;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.mainnav__link:hover { color: #E2E8F0; }
.mainnav__link.is-active { color: #fff; border-bottom-color: var(--brand); }

/* The configuration sidebar, ported from the existing product's setup screen —
   width, colours, sizes and the cyan active rail all taken from it rather than
   guessed at, so the two products' setup areas are the same place. */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
.sidebar {
  top: 108px; height: calc(100vh - 108px);
  padding: 0; color: #AAC5DC;
  box-shadow: 4px 0 24px rgba(2, 8, 20, .18);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }
.main--wide { max-width: 1600px; }

/* The sidebar's own header — a tile and two lines, so the area names itself
   rather than relying on the gear being remembered. */
.setuphead {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 0; flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  text-decoration: none;
}
.setuphead:hover { background: rgba(255, 255, 255, .04); }
.setuphead__mark {
  width: 30px; height: 30px; border-radius: var(--r-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-mark); color: #fff;
}
.setuphead__text { display: flex; flex-direction: column; line-height: 1.25; }
.setuphead__title { font-size: 12.5px; font-weight: 700; color: #fff; }
.setuphead__sub { font-size: 10px; opacity: .6; }

.snav { padding: 4px 8px 12px; }
.snav__group { margin-bottom: 2px; }

.snav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 4px; cursor: pointer; list-style: none;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #5B6B86;
}
.snav__head::-webkit-details-marker { display: none; }
.snav__head:hover { color: #8397B3; }
.snav__chev { opacity: .6; transition: transform .15s; }
.snav__group[open] > .snav__head .snav__chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .snav__chev { transition: none; } }

.snav__item {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 6px 12px; margin-bottom: 1px; border-radius: 7px;
  color: #AAC5DC; text-decoration: none; font-size: 12.5px; font-weight: 500;
  transition: background .12s, color .12s;
}
.snav__item svg { flex: 0 0 auto; }
.snav__item:hover { background: rgba(255, 255, 255, .05); color: #E2EEF9; }
.snav__item.is-active {
  background: linear-gradient(90deg, rgba(56, 217, 245, .16) 0%, rgba(56, 217, 245, .02) 100%);
  color: #5DEDFB; font-weight: 600;
}
.snav__item.is-active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; min-height: 16px; border-radius: 0 3px 3px 0;
  background: var(--accent-2, #22D3EE);
}
@media (prefers-reduced-motion: reduce) { .snav__item { transition: none; } }

/* Settings pages keep a readable measure rather than stretching to the full
   viewport, and the column is centred so the whitespace reads as margin. */
.shell > .main { max-width: 1280px; margin: 0 auto; padding: 26px 32px 40px; width: 100%; }

/* The setup front door. */
.setupgrid {
  display: grid; gap: 12px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.setupcard {
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 17px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  transition: border-color .14s, box-shadow .14s, transform .1s;
}
.setupcard:hover {
  border-color: var(--brand); transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(99, 102, 241, .13);
}
@media (prefers-reduced-motion: reduce) {
  .setupcard { transition: none; }
  .setupcard:hover { transform: none; }
}
.setupcard__name { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.setupcard__sub { font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; display: none; }
  .sidebar.is-open { display: block; }
  .who__text { display: none; }
  .mainnav { top: 62px; }
}

/* ==========================================================================
   Managed lists — toolbar, status pills, icon actions, add/edit dialog
   ========================================================================== */

.toolbar2 {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 14px 12px; border-bottom: 1px solid var(--rule-soft);
}
.toolbar2__search { flex: 1 1 240px; margin: 0; }
.toolbar2__search input {
  width: 100%; max-width: 340px; padding: 9px 13px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); font: inherit; font-size: 14px;
}
.toolbar2__search input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim);
}
.toolbar2__actions { display: flex; gap: 8px; align-items: center; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.pill--on  { background: var(--good-dim); color: #065F46; }
.pill--off { background: var(--surface-2); color: var(--ink-faint); }

.upd__by { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.upd__at { display: block; font-size: 11.5px; color: var(--ink-faint); }

/* Icon actions. A pencil and a bin need no reading; "Retire" did. */
.rowacts { text-align: right; white-space: nowrap; }
.rowacts form { display: inline; margin: 0; }
.iconact {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: 5px; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  vertical-align: middle;
}
.iconact:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-dim); }
.iconact--bad:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-dim); }
.iconact:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* -- The add / edit dialog ------------------------------------------------ */
.modal {
  width: min(520px, calc(100vw - 32px)); padding: 0;
  border: 0; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); color: var(--ink);
  background: var(--surface);
}
.modal::backdrop { background: rgba(15, 23, 42, .55); }
.modal .form { gap: 0; }

.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
}
.modal__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal__x {
  border: 0; background: none; cursor: pointer; padding: 2px 6px;
  font-size: 22px; line-height: 1; color: var(--ink-faint);
}
.modal__x:hover { color: var(--ink); }

.modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 15px; max-height: 66vh; overflow-y: auto; }
.modal__foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--surface-2);
}

/* ==========================================================================
   Issue forms — the extra questions a fault asks
   ========================================================================== */

.toolbar2__note { flex: 1 1 240px; margin: 0; font-size: 13px; color: var(--ink-faint); }

/* A question carries a type, choices, limits and a condition. At 520px they
   stack into a column of single fields and the dialog becomes a scroll. */
.modal--wide { width: min(680px, calc(100vw - 32px)); }

.iconact:disabled { opacity: .35; cursor: default; }
.iconact:disabled:hover { border-color: var(--rule); color: var(--ink-soft); background: var(--surface); }

/* Attaching a form to a fault, on the fault's own row. */
.attach { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px 0 0; }
.attach__pick {
  padding: 5px 9px; max-width: 190px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink-soft);
}
.attach__pick:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

.tag--form { background: var(--brand-dim); color: var(--brand); text-decoration: none; }
.tag--form:hover { text-decoration: underline; }

/* -- The questions, inside the wizard ------------------------------------- */
.afield { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.afield:last-child { margin-bottom: 0; }
.afield__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.afield input[type="text"],
.afield input[type="number"],
.afield input[type="date"],
.afield select {
  width: 100%; max-width: 420px; padding: 10px 13px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); font: inherit; font-size: 15px;
}
.afield input:focus, .afield select:focus, .afield textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim);
}
.afield--error input, .afield--error select, .afield--error textarea { border-color: var(--bad); }

.asection {
  margin: 22px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--rule-soft);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* -- The answers, on the ticket ------------------------------------------- */
.answers { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.answers__row { display: flex; gap: 14px; padding: 6px 0; }
.answers__row + .answers__row { border-top: 1px solid var(--rule-soft); }
.answers dt { flex: 0 0 200px; font-size: 13px; color: var(--ink-faint); }
.answers dd { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; }

@media (max-width: 640px) {
  .answers__row { flex-direction: column; gap: 2px; }
  .answers dt { flex: none; }
  .attach { display: flex; margin: 6px 0; }
  .attach__pick { max-width: none; flex: 1; }
}

/* ==========================================================================
   The audit dashboard — ported from the existing product's Audits screen
   (PageHeader.module.css, Tabs.module.css, the JobCards stat tiles and
   Audits.module.css) rather than approximated.
   ========================================================================== */

/* -- page header with an icon tile ---------------------------------------- */
.phead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.phead__title { display: flex; align-items: center; gap: 12px; }
.phead__tile {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, .12) 0%, rgba(99, 102, 241, .06) 100%);
  border: 1px solid rgba(99, 102, 241, .2); color: var(--brand);
}
.phead h1 { margin: 0 0 1px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.phead__sub { margin: 0; font-size: 12px; color: var(--ink-soft); }
.phead__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.phead__meta {
  font-size: 11.5px; color: var(--ink-soft);
  padding-right: 16px; border-right: 1px solid var(--rule);
}

/* -- pill tab strip -------------------------------------------------------- */
.tabs {
  display: inline-flex; gap: 3px; width: fit-content; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 9px; padding: 4px; box-shadow: var(--shadow);
}
.tab {
  padding: 7px 16px; border-radius: var(--r-sm);
  color: var(--ink-soft); text-decoration: none;
  font-size: 12.5px; font-weight: 600; transition: background .18s, color .18s;
}
.tab:hover { color: var(--navy); }
.tab.is-on, .tab.is-on:hover { background: var(--brand); color: #fff; }
@media (prefers-reduced-motion: reduce) { .tab { transition: none; } }

/* -- the cycle control bar ------------------------------------------------- */
.dashbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 13px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.dashbar__pick { margin: 0; min-width: 260px; display: flex; gap: 8px; }
.dashbar__pick select { width: 100%; }
.dashbar select, .filtercard select, .recsel {
  padding: 8px 11px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
.dashbar select:focus, .filtercard select:focus, .recsel:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim);
}
.dashbar__meta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft); white-space: nowrap;
}
.dashbar__prog { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 200px; }

.scpill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--rule);
  font-size: 12.5px; font-weight: 600; color: var(--navy);
}
.scdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.scpill--open .scdot { background: var(--good); }

/* Two segments in one bar: what was fine, and what was not. */
.pbar {
  flex: 1; display: flex; height: 10px; border-radius: 6px; overflow: hidden;
  background: #EEF2F6; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}
.pbar__ok    { height: 100%; background: linear-gradient(90deg, #10B981, #34D399); }
.pbar__issue { height: 100%; background: linear-gradient(90deg, #EF4444, #F87171); }
.pbar__pct {
  min-width: 38px; text-align: right; font-size: 12.5px; font-weight: 800;
  color: var(--navy); font-variant-numeric: tabular-nums;
}

/* -- the five KPI tiles, which are also the table filters ------------------ */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.stat {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s;
  /* The first tile is given no colour of its own, so its rail is grey while the
     number stays navy — which is what the reference falls back to. */
  --tile: #CBD5E1;
  --tile-ink: var(--navy);
}
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tile); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat__val {
  display: block; font-size: 30px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1; color: var(--tile-ink);
}
.stat__lbl {
  display: block; margin-top: 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
}
.stat--blue  { --tile: #2563EB; --tile-ink: #2563EB; }
.stat--green { --tile: #059669; --tile-ink: #059669; }
.stat--red   { --tile: #DC2626; --tile-ink: #DC2626; }
.stat--amber { --tile: #D97706; --tile-ink: #D97706; }
.stat--on {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .3), var(--shadow-md);
}
.stat--on::before { width: 6px; }
@media (prefers-reduced-motion: reduce) { .stat { transition: none; } .stat:hover { transform: none; } }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* -- filter bar ------------------------------------------------------------ */
.filtercard, .rectool {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 12px 14px;
}
.filtercard__count {
  margin-left: auto; font-size: 12px; font-weight: 800;
  color: var(--ink-soft); white-space: nowrap; letter-spacing: .02em;
}
.searchbox {
  flex: 1; min-width: 240px; height: 38px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface);
  padding: 0 12px; color: var(--ink-soft);
}
.searchbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.searchbox input {
  flex: 1; border: 0; outline: none; padding: 9px 0;
  font: inherit; font-size: 13px; color: var(--ink); background: transparent;
}

.recchips { display: inline-flex; gap: 8px; }
.recchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--rule);
  font-size: 12.5px; font-weight: 600; color: var(--navy);
}
.recchip:hover { border-color: var(--rule-strong); }
.recchip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.recdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.recchip--all .recdot   { background: var(--brand); }
.recchip--ok .recdot    { background: var(--good); }
.recchip--issue .recdot { background: var(--bad); }
.recsel { min-width: 170px; }

/* -- results --------------------------------------------------------------- */
.recmeta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-soft);
}
.recmeta strong { color: var(--navy); }
.recmeta__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rule-strong); }
.recmeta__ok strong  { color: #047857; }
.recmeta__bad strong { color: var(--bad); }

/* The result bucket: OK, Issue, or nothing recorded yet. */
.rpill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px; border-radius: 20px; border: 1px solid rgba(15, 23, 42, .06);
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap; background: var(--surface-2); color: #475569;
}
.rpill--ok    { background: var(--good-dim); color: #065F46; }
.rpill--issue { background: var(--bad-dim);  color: #991B1B; }

.row--issue > td { background: rgba(239, 68, 68, .035); }
.tabular { font-variant-numeric: tabular-nums; }

/* An asset number reads as a code, and is the way through to the asset. */
.codebadge {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  color: var(--brand); background: rgba(99, 102, 241, .08);
  border: 1px solid rgba(99, 102, 241, .18); text-decoration: none;
}
.codebadge:hover { background: rgba(99, 102, 241, .16); }

/* ==========================================================================
   Station screens — a fixed desk running one job all day.

   No everyday nav and no setup sidebar: both are places to wander off to, and
   the person here is holding a piece of equipment. Ported from the existing
   product's Station.module.css.
   ========================================================================== */

.stationbody { background: var(--stock); min-height: 100vh; }

.stbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; background: var(--grad-navbar); color: #fff;
}
.stbar__exit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .08); color: #E2EEF9;
  text-decoration: none; font-size: 13px; font-weight: 600;
}
.stbar__exit:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.stbar__title {
  flex: 1; margin: 0; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.stbar__user { margin: 0; font-size: 13px; color: #AAC5DC; }

.stmain { max-width: 1280px; margin: 0 auto; padding: 22px 24px 60px; }

.sttoast {
  padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 16px;
  font-size: 14px; font-weight: 600;
}
.sttoast--success { background: var(--good-dim); color: #065F46; }
.sttoast--warning { background: var(--warn-dim); color: #92400E; }
.sttoast--error   { background: var(--bad-dim);  color: #991B1B; }

/* -- the capture row ------------------------------------------------------- */
.sttop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }

.stcap {
  flex: 1 1 320px; margin: 0; display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow);
  color: var(--ink-faint);
}
.stcap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.stcap input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 17px; color: var(--ink);
}

.streader { flex: 0 1 auto; margin: 0; font-size: 13px; color: var(--ink-faint); }

.stman {
  flex: 0 1 auto; margin: 0; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow);
  color: var(--ink-faint);
}
.stman input {
  border: 0; outline: none; background: transparent; min-width: 170px;
  font: inherit; font-size: 14px; color: var(--ink);
}

.stbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--rule);
  color: var(--ink-soft); text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 600;
}
.stbtn:hover { border-color: var(--rule-strong); color: var(--ink); }

/* -- nothing scanned yet --------------------------------------------------- */
.stidle {
  padding: 60px 24px; text-align: center;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); box-shadow: var(--shadow);
}
.stidle__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; margin-bottom: 18px; border-radius: 50%;
  background: var(--brand-dim); color: var(--brand);
}
.stidle__title { margin: 0 0 5px; font-size: 20px; font-weight: 700; }
.stidle__sub { margin: 0; font-size: 14px; color: var(--ink-faint); }

/* -- resolved: what it is, and what to do about it ------------------------- */
.stbody { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .stbody { grid-template-columns: 1fr; } }

.stcard, .staction {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden;
}
.staction { padding: 18px; display: flex; flex-direction: column; gap: 13px; }

.stbanner {
  display: flex; align-items: center; gap: 9px; margin: 0;
  padding: 13px 18px; font-size: 13.5px; font-weight: 700;
}
.stbanner--green { background: var(--good-dim); color: #065F46; }
.stbanner--amber { background: var(--warn-dim); color: #92400E; }
.stbanner--red   { background: var(--bad-dim);  color: #991B1B; }

.stasset { display: flex; align-items: center; gap: 14px; padding: 18px; }
.stasset__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--r-lg);
  background: var(--brand-dim); color: var(--brand);
}
.stasset__no { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stasset__name { margin: 2px 0 0; font-size: 14px; color: var(--ink-soft); }

.stunreg { padding: 18px; }
.stunreg__hint { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

.stmeta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0; padding: 0 18px 18px;
}
.stmeta--wide { grid-column: 1 / -1; }
.stmeta dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.stmeta dd { margin: 0; font-size: 14px; }
.stmeta code { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }

.sthist { border-top: 1px solid var(--rule-soft); }
.sthist > summary {
  padding: 13px 18px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--brand);
}
.sthist > summary::-webkit-details-marker { display: none; }
.sthist > summary:hover { background: var(--surface-2); }
.sthist__empty { margin: 0; padding: 16px 18px; font-size: 13px; color: var(--ink-faint); }

/* -- the only place a result is recorded ----------------------------------- */
.stlbl {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.stpick { margin: 0; display: flex; gap: 8px; }
.stpick select, .staction select, .staction textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
}
.stpick select:focus, .staction select:focus, .staction textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim);
}
.stcycle { margin: 0; font-size: 15px; font-weight: 700; }
.stcycle span { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }

.stchoice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stchoice form { margin: 0; }
.stok, .stissue {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 22px 12px; border: 0; border-radius: var(--r-lg); cursor: pointer;
  text-decoration: none; font: inherit; font-size: 15px; font-weight: 700; color: #fff;
}
.stok { background: var(--good); }
.stok:hover { background: #0E9F72; }
.stissue { background: var(--bad); }
.stissue:hover { background: #DC2626; }
.stissue--sm { flex-direction: row; padding: 10px 16px; font-size: 13.5px; width: auto; }

.stdone {
  padding: 16px; border-radius: var(--r-lg);
  background: var(--good-dim); color: #065F46; text-align: center;
}
.stdone__title {
  margin: 0 0 3px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700;
}
.stdone__sub { margin: 0 0 12px; font-size: 13px; }

.stissueform { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.stissueform__acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.stnone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 16px; text-align: center; color: var(--ink-faint);
}
.stnone p { margin: 0; font-size: 13.5px; }

.stnext {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--rule-soft);
  text-align: center; text-decoration: none;
  font-size: 13px; font-weight: 700; color: var(--brand);
}
.stnext:hover { text-decoration: underline; }

/* ==========================================================================
   App footer — copyright left, version right

   Pinned to the bottom of the viewport rather than the end of the document, so
   the version is readable at any scroll position. It is the first thing worth
   asking for when somebody reports a fault, and it should not require scrolling
   a long register to find. Opaque, so content simply passes behind it.
   ========================================================================== */
.appfoot {
  position: sticky; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 28px;
  background: var(--grad-navbar);
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .28);
}
.appfoot__ver { font-weight: 700; color: rgba(255, 255, 255, .75); letter-spacing: .03em; }
@media print { .appfoot { display: none; } }

/* ==========================================================================
   Audit Station — a closer, quieter finish

   A station screen is looked at all day from a metre away, so the changes below
   are about weight and rhythm rather than decoration: one clear focal point per
   column, tighter meta rows, and a result banner that reads at a glance.
   ========================================================================== */

.stmain { max-width: 1320px; }

/* -- the capture row ------------------------------------------------------- */
/* One height across all three controls, so the row reads as a single strip
   rather than three cards that happen to be adjacent. */
.sttop { gap: 14px; align-items: stretch; }
.stcap, .stman { min-height: 58px; box-shadow: var(--shadow-md); }
.stcap {
  padding: 0 20px;
  border-width: 2px; border-color: var(--rule);
  transition: border-color .15s, box-shadow .15s;
}
.stcap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-dim), var(--shadow-md);
}
.stcap svg { color: var(--brand); flex: 0 0 auto; }
.stcap input { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.stcap input::placeholder { font-weight: 400; color: var(--ink-faint); }

.streader {
  flex: 1 1 200px; text-align: center; align-self: center;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-faint);
}
.stman { padding: 0 12px 0 16px; gap: 10px; }
.stman input { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .stcap { transition: none; } }

/* -- what just happened ---------------------------------------------------- */
/* A result the person can confirm without reading: colour, an icon, and the
   asset number at a size that carries across a desk. */
.sttoast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-lg);
  border: 1px solid transparent; box-shadow: var(--shadow);
  font-size: 15px; font-weight: 600;
}
.sttoast::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: currentColor; opacity: .18;
}
.sttoast--success { border-color: rgba(16, 185, 129, .32); }
.sttoast--warning { border-color: rgba(249, 115, 22, .32); }
.sttoast--error   { border-color: rgba(239, 68, 68, .32); }

/* -- the asset card -------------------------------------------------------- */
.stbody { gap: 20px; }
.stcard, .staction { border-radius: var(--r-xl); box-shadow: var(--shadow-md); }

.stbanner {
  padding: 12px 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

.stasset { padding: 22px 20px 18px; gap: 16px; }
.stasset__mark { width: 56px; height: 56px; border-radius: var(--r-lg); }
.stasset__no {
  font-size: 26px; font-weight: 800; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.stasset__name { margin-top: 3px; font-size: 14.5px; color: var(--ink-soft); }

/* Meta reads as label-over-value pairs on a faint ground, so the eye can jump
   to "last audited" without re-reading the row above it. */
.stmeta { gap: 1px; padding: 0; background: var(--rule-soft); border-top: 1px solid var(--rule-soft); }
.stmeta > div { padding: 14px 20px; background: var(--surface); }
.stmeta dt { font-size: 10px; letter-spacing: .08em; margin-bottom: 5px; }
.stmeta dd { font-size: 14.5px; }
.stmeta code {
  font-size: 12px; padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--rule);
}

.sthist { border-top: 1px solid var(--rule-soft); }
.sthist > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 20px; font-size: 13px;
}
.sthist > summary::after {
  content: "›"; margin-left: auto; font-size: 16px; color: var(--ink-faint);
  transition: transform .15s;
}
.sthist[open] > summary::after { transform: rotate(90deg); }
.sthist .table { border-top: 1px solid var(--rule-soft); }
.sthist .table th { font-size: 10px; letter-spacing: .07em; }
@media (prefers-reduced-motion: reduce) { .sthist > summary::after { transition: none; } }

/* -- the action panel ------------------------------------------------------ */
/* Sticky, because the asset card grows with its history and the two buttons
   should not slide off the bottom while somebody is reading it. */
.staction { position: sticky; top: 20px; padding: 20px; gap: 15px; }
.stlbl { font-size: 10px; letter-spacing: .08em; }
.stcycle {
  padding: 13px 15px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--rule);
  font-size: 15px;
}
.stcycle span { margin-top: 2px; font-size: 12px; }

.stchoice { gap: 12px; }
.stok, .stissue {
  gap: 9px; padding: 26px 12px; border-radius: var(--r-lg);
  font-size: 15.5px; letter-spacing: -.01em;
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .35);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.stok:hover, .stissue:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .45); }
.stok:active, .stissue:active { transform: translateY(0); }
.stok:focus-visible, .stissue:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .stok, .stissue { transition: none; }
  .stok:hover, .stissue:hover { transform: none; }
}

.stdone { padding: 20px 16px; border-radius: var(--r-lg); border: 1px solid rgba(16, 185, 129, .3); }
.stdone__title { font-size: 15.5px; }
.stdone__sub { font-size: 12.5px; opacity: .85; }

.stnext { margin-top: 4px; padding-top: 15px; font-size: 12.5px; letter-spacing: .01em; }

/* -- waiting for the first scan -------------------------------------------- */
.stidle { padding: 76px 24px; border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.stidle__mark {
  width: 104px; height: 104px; margin-bottom: 22px;
  box-shadow: 0 0 0 12px rgba(99, 102, 241, .06);
}
.stidle__title { font-size: 22px; letter-spacing: -.02em; }

@media (max-width: 900px) {
  .staction { position: static; }
  .sttop { gap: 10px; }
  .streader { order: 3; flex-basis: 100%; text-align: left; }
}

/* ==========================================================================
   Register and Support lists — the same finish as the audit dashboard

   These are the two screens people live in, so they get the treatment that was
   built for Audits rather than a plainer one: an icon tile on the heading, the
   filter row in a card of its own, and a table whose header reads as a header.
   ========================================================================== */

/* The filter row is a card, so it separates from the table below it instead of
   floating between two white areas with nothing to say where one ends. */
.filters.filtercard { margin-bottom: 16px; padding: 13px 14px; gap: 9px; }
.filters.filtercard .filters__search { flex: 1 1 280px; }
.filters.filtercard input,
.filters.filtercard select { padding: 9px 12px; font-size: 13.5px; }
.filters.filtercard select { min-width: 145px; }
.filters__clear { margin-left: auto; font-weight: 600; }

/* -- tables --------------------------------------------------------------- */
/* A tinted, stuck header: on a register of several hundred rows the column
   names are the one thing that must not scroll away. */
.table--rows thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  color: var(--ink-soft); white-space: nowrap;
  padding-top: 12px; padding-bottom: 12px;
}
.table--rows tbody tr { transition: background .1s; }
.table--rows tbody tr:hover > td { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .table--rows tbody tr { transition: none; } }

/* A sorted column should be findable without hunting for a small arrow. */
.sort { color: inherit; text-decoration: none; }
.sort:hover { color: var(--brand); }
.sort.is-sorted { color: var(--brand); }

/* -- the quick views above Support ---------------------------------------- */
/* Segmented, on one ground, so they read as one control rather than four loose
   links — and so the active one is obviously a selection. */
.quickviews {
  display: inline-flex; flex-wrap: wrap; gap: 3px; width: fit-content;
  margin-bottom: 16px; padding: 4px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 9px; box-shadow: var(--shadow);
}
.quickview {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.quickview:hover { color: var(--navy); background: var(--surface-2); }
.quickview.is-active, .quickview.is-active:hover { background: var(--brand); color: #fff; }
.quickview__n {
  min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.quickview.is-active .quickview__n { background: rgba(255, 255, 255, .22); color: #fff; }
.quickview__n.is-bad { background: var(--bad-dim); color: var(--bad); }
.quickview.is-active .quickview__n.is-bad { background: rgba(255, 255, 255, .25); color: #fff; }
@media (prefers-reduced-motion: reduce) { .quickview { transition: none; } }

/* -- the empty state ------------------------------------------------------ */
/* An empty register is the first thing a new install shows, so it should not
   look like a rendering failure. */
.panel--flush > .empty {
  padding: 52px 24px; text-align: center;
  font-size: 14px; color: var(--ink-faint);
}

/* ==========================================================================
   Table insets inside a card

   `.table` is written for a table sitting in the page's own margin, so its
   cells have no left padding — the first column is meant to line up with the
   text above it. Dropped inside a card that has its own padding, that leaves
   the first column touching the card's edge while everything around it is
   inset. These rules give a carded table the card's inset back.
   ========================================================================== */

/* The register, Support, and every other list in a flush panel. */
.panel--flush .table th:first-child,
.panel--flush .table td:first-child { padding-left: 18px; }
.panel--flush .table th:last-child,
.panel--flush .table td:last-child  { padding-right: 18px; }

/* The audit history inside the station's asset card. Matched to the 20px the
   summary above it uses, so the two line up down the left edge. */
.sthist .table th,
.sthist .table td { padding-left: 0; padding-right: 14px; }
.sthist .table th:first-child,
.sthist .table td:first-child { padding-left: 20px; }
.sthist .table th:last-child,
.sthist .table td:last-child  { padding-right: 20px; }

/* Same story for the tables on a ticket and inside the setup dialogs. */
.recmeta + .table th:first-child,
.recmeta + .table td:first-child { padding-left: 18px; }
.recmeta + .table th:last-child,
.recmeta + .table td:last-child  { padding-right: 18px; }

@media (max-width: 760px) {
  /* Stacked rows already carry their own padding; a first-child inset on top
     of it pushes the labels out of line. */
  .panel--flush .table td:first-child,
  .panel--flush .table td:last-child { padding-left: 14px; padding-right: 14px; }
}