/* ===========================================================================
   Pool Chemical Log

   Organised as: tokens, base, layout, then components grouped by the module
   they belong to. Class names are the contract with the JavaScript that
   renders them, so they are kept stable.
   =========================================================================== */

/* --- Brand and design tokens ----------------------------------------------
   One place for every colour, size and space. Nothing below this block
   hard-codes a value that belongs in it.

   A NOTE ON RED, WHICH IS NOT A BRAND COLOUR
   ------------------------------------------
   Red means one thing in this app: a chemical reading outside its safe
   range. It is a safety signal, not decoration, and it earns its weight by
   appearing nowhere else. The brand palette is deliberately navy, slate and
   amber - no red, and nothing warm enough to be mistaken for it at a glance
   or in peripheral vision.

   Amber is the only warm colour, and it sits at a hue far from the alert
   red. If a future colour choice needs thinking about, the test is: could
   someone scanning a log confuse this with an out-of-range value? If there
   is any doubt, do not use it. */

:root {
  /* Brand. */
  --brand-navy:       #1b2a4a;
  --brand-navy-deep:  #121d33;   /* pressed and hover states */
  --brand-navy-tint:  #eef1f6;   /* selected backgrounds */
  --brand-slate:      #5c6470;
  --brand-slate-tint: #eef0f2;
  --brand-amber:      #e8a33d;   /* fills, the logo mark, indicators */
  --brand-amber-deep: #8a5a00;   /* amber as TEXT, dark enough to read */
  --brand-amber-tint: #fdf4e3;

  /* Neutrals, tuned to sit under navy rather than the old teal. */
  --ink:        #16202b;
  --ink-soft:   #3d4a5c;
  --muted:      var(--brand-slate);
  --line:       #dee2e8;
  --line-soft:  var(--brand-slate-tint);
  --surface:    #ffffff;
  --canvas:     #f4f6f9;
  --raised:     #f9fafc;

  /* The primary interactive colour is the brand navy. These names are what
     the components use, so the mapping lives here and nowhere else. */
  --accent:       var(--brand-navy);
  --accent-deep:  var(--brand-navy-deep);
  --accent-tint:  var(--brand-navy-tint);

  /* RESERVED FOR OUT-OF-RANGE READINGS. Unchanged, and used nowhere else. */
  --danger:       #b3261e;
  --danger-tint:  #fdeceb;

  /* Amber, aliased so existing "needs attention but not an alert" uses keep
     working while pointing at the brand colour. */
  --warn:       var(--brand-amber-deep);
  --warn-tint:  var(--brand-amber-tint);

  /* Type scale. A small set of steps used consistently beats many sizes
     chosen ad hoc. */
  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.625rem;

  /* Spacing, on a 4px rhythm. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;

  --radius:    10px;
  --radius-sm: 6px;

  --shadow:    0 1px 2px rgba(27, 42, 74, 0.05), 0 1px 3px rgba(27, 42, 74, 0.07);
  --shadow-lg: 0 2px 8px rgba(27, 42, 74, 0.08), 0 8px 24px rgba(27, 42, 74, 0.08);

  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --page-width: 1120px;
}

/* --- Base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

/* Digits line up in columns. In a log read by scanning for anomalies,
   ragged numerals hide the very thing being looked for. */
input[type="number"], input[type="datetime-local"],
table, .crumb, .resume-path, .audit-when {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.011em; }
h1 { font-size: var(--t-xl); letter-spacing: -0.018em; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p  { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Site header and navigation ------------------------------------------
   A top bar rather than a side rail: the readings table is wide and already
   scrolls sideways, and a fixed side nav would take width from exactly the
   thing that needs it most. */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-bar {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: inherit;
  line-height: 1.25;
}

.brand-words { display: flex; flex-direction: column; }

/* Sized to the wordmark rather than a round number, so the two read as one
   lockup instead of an icon sitting next to some text. */
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: block;
}

.brand-name {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.brand-sub {
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Below this the tagline crowds the navigation; the wordmark carries it. */
@media (max-width: 900px) { .brand-sub { display: none; } }

.site-nav {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  margin-left: auto;
}

.nav-link {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  font-weight: 560;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover { background: var(--raised); color: var(--ink); }

.nav-link.is-current {
  background: var(--accent-tint);
  color: var(--accent-deep);
}

/* A stubbed module reads as available but clearly not finished. */
.nav-link.is-stub { color: var(--muted); }
.nav-link.is-stub::after {
  content: 'soon';
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: 3px;
  padding: 0.05rem 0.28rem;
  margin-left: 0.35rem;
  vertical-align: 1px;
}

/* --- Context strip: which facility everything on the page refers to ------- */

.context-strip { background: var(--raised); border-bottom: 1px solid var(--line); }

.context-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.facility-summary {
  flex: 1 1 16rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem;
  min-width: 0;
}

.context-label {
  flex-basis: 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.1rem;
}

/* A facility name must never break across lines mid-name. */
.facility-summary .crumb {
  font-weight: 600;
  font-size: var(--t-base);
  white-space: nowrap;
  color: var(--ink-soft);
}

.facility-summary .crumb-last { color: var(--accent-deep); font-weight: 600; }
.crumb-sep { color: var(--muted); margin: 0 0.3rem; }

.summary-detail {
  flex-basis: 100%;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 0.1rem;
}

/* --- Page shell ---------------------------------------------------------- */

main {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s7);
}

.page-head { margin-bottom: var(--s5); }
.page-head h1 { margin-bottom: var(--s1); }

/* The tagline, where the app introduces itself: the dashboard and sign-in.
   Amber rule to the left rather than amber text, which would be too light
   to read comfortably at this size. */
.tagline {
  font-size: var(--t-md);
  color: var(--brand-slate);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-left: 3px solid var(--brand-amber);
  padding-left: var(--s3);
  margin: 0 0 var(--s3);
}

.page-lede {
  color: var(--muted);
  font-size: var(--t-base);
  max-width: 62ch;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
  margin-bottom: var(--s5);
}

.panel > h2 { margin-bottom: var(--s2); }
.panel > h2 + .hint { margin-top: calc(var(--s2) * -1); }

.count { font-weight: 400; color: var(--muted); font-size: var(--t-sm); }

.hint {
  font-size: var(--t-sm);
  color: var(--muted);
  margin: 0 0 var(--s4);
  max-width: 70ch;
}

.empty { color: var(--muted); margin: 0; }

/* --- Buttons ------------------------------------------------------------- */

button { font-family: inherit; }

button.primary,
button.secondary,
button.danger-button {
  border-radius: var(--radius-sm);
  font-size: var(--t-base);
  font-weight: 600;
  padding: 0.55rem 1.05rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

button.primary { background: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-deep); }
button.primary:disabled { opacity: 0.4; cursor: not-allowed; }

button.secondary {
  background: var(--surface);
  color: var(--accent-deep);
  border-color: var(--line);
}
button.secondary:hover { background: var(--accent-tint); border-color: var(--accent); }

button.secondary.small { padding: 0.35rem 0.7rem; font-size: var(--t-sm); }

/* Destructive actions are amber, not red.
   Red belongs to out-of-range readings alone. A red Delete sitting in the
   same table row as a red out-of-range value would blunt both: the alert
   stops meaning "this water is wrong" and starts meaning "something on this
   row is red". Amber still reads as caution, and the confirmation dialogs
   say what will be lost in words rather than relying on colour. */
button.danger-button {
  background: var(--surface);
  color: var(--brand-amber-deep);
  border-color: #e8d3a8;
}
button.danger-button:hover { background: var(--brand-amber-tint); }

button.link {
  background: none;
  border: none;
  padding: 0 0.3rem;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--accent-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.link.danger { color: var(--brand-amber-deep); }

/* --- Forms --------------------------------------------------------------- */

.field { margin-bottom: var(--s4); }

.field label {
  display: block;
  font-weight: 600;
  font-size: var(--t-sm);
  margin-bottom: var(--s1);
  color: var(--ink-soft);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.field textarea { line-height: 1.5; resize: vertical; }

.field input:hover, .field textarea:hover { border-color: var(--brand-slate); }

.range-hint {
  display: block;
  font-size: var(--t-sm);
  color: var(--muted);
  margin-top: var(--s1);
}

.optional-tag, .tree-type, .note-icon, .source-badge {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
  padding: 0.08rem 0.36rem;
  vertical-align: 1px;
}

.optional-tag { color: var(--muted); background: var(--line-soft); margin-left: var(--s2); }

/* A validation message, not a chemical alert - and it appears in the very
   form where red means "this reading is out of range". Amber. */
.form-error {
  color: var(--brand-amber-deep);
  font-weight: 600;
  font-size: var(--t-sm);
  margin: 0 0 var(--s3);
}

.form-actions { display: flex; gap: var(--s2); align-items: center; }

/* Out-of-range: colour is never the only signal - .warning carries words. */
.field.out-of-range label { color: var(--danger); }

.field.out-of-range input {
  border-color: var(--danger);
  background: var(--danger-tint);
}

.warning {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--danger);
}

/* The form while editing an existing reading rather than creating one. */
.panel.editing { border-color: var(--accent); box-shadow: var(--shadow-lg); }

.panel.editing > h2::after {
  content: 'Editing';
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--accent);
  border-radius: 3px;
  padding: 0.12rem 0.4rem;
  margin-left: var(--s2);
  vertical-align: 2px;
}

/* --- Tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 calc(var(--s5) * -1); padding: 0 var(--s5); }

table.readings, .standards-table, .summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

table.readings { white-space: nowrap; }

table.readings th, table.readings td,
.standards-table th, .standards-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
}

table.readings thead th, .standards-table thead th, .summary-table thead th {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: none;
  vertical-align: bottom;
}

table.readings tbody tr:hover { background: var(--raised); }

.when { font-weight: 600; color: var(--ink); }

td.cell-out-of-range {
  color: var(--danger);
  background: var(--danger-tint);
  font-weight: 700;
}

td.cell-empty { color: var(--muted); }

.row-actions { white-space: nowrap; text-align: right; }

.header-source { display: block; margin-top: var(--s1); font-weight: 400; }
.header-source .source-badge { margin-left: 0; margin-right: 0.2rem; }

/* --- A reading's note, on its own row ------------------------------------ */

.note-row td {
  padding-top: 0;
  padding-bottom: 0.65rem;
  white-space: normal;
  background: var(--raised);
}

.note-icon { color: var(--muted); background: var(--line-soft); margin-right: var(--s2); }
.note-text { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }

/* Keep a note visually tied to its reading. */
table.readings tbody tr:has(+ .note-row) td { border-bottom: none; }
table.readings tbody tr:has(+ .note-row):hover + .note-row td { background: var(--raised); }

/* --- Where a range came from ---------------------------------------------- */

.source-badge { margin-left: 0.35rem; white-space: nowrap; }
/* Five sources, told apart by weight and shape rather than by reaching for
   more hues. None of them may be red: these badges sit inches from the
   out-of-range cells they explain. */
.source-default        { background: var(--brand-slate-tint); color: var(--brand-slate); }
.source-classification { background: var(--brand-navy-tint); color: var(--brand-navy); }
.source-account        { background: var(--brand-navy); color: #fff; }
.source-facility       { background: var(--surface); color: var(--brand-navy);
                         box-shadow: inset 0 0 0 1px var(--brand-navy); }
.range-hint .source-badge { margin-left: 0.25rem; }

/* --- Facility tree (Organization) ---------------------------------------- */

.facility-tree, .facility-tree ul { list-style: none; margin: 0; padding-left: 0; }

.facility-tree ul {
  padding-left: var(--s4);
  border-left: 2px solid var(--line-soft);
  margin: var(--s2) 0 var(--s4) var(--s2);
}

.facility-tree li { margin: var(--s2) 0; }

.tree-name { font-weight: 600; }
.tree-account > .tree-name { font-size: var(--t-md); }
.tree-location > .tree-name { color: var(--ink-soft); }
.tree-attraction > .tree-name { font-weight: 500; }

.tree-type { color: var(--muted); background: var(--line-soft); margin-left: var(--s2); }

.facility-actions { white-space: nowrap; margin-left: var(--s1); }

.add-form { display: flex; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; }

.add-form input, .add-form select, .classification-picker, #standards-classification {
  padding: 0.35rem 0.5rem;
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.add-form input { flex: 1; max-width: 16rem; }
.classification-picker { margin-left: var(--s2); }

.transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-soft);
}

/* --- Account standards ---------------------------------------------------- */

.standards-table { min-width: 30rem; }
.standards-table tbody th { font-weight: 600; color: var(--ink-soft); }

.standards-input {
  width: 5.5rem;
  padding: 0.32rem 0.45rem;
  font-family: inherit;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* A box holding a real override, not an inherited placeholder. */
.standards-input.is-override {
  border-color: var(--accent);
  background: var(--accent-tint);
  font-weight: 600;
}

/* --- History -------------------------------------------------------------- */

.audit-list { list-style: none; margin: 0; padding: 0; }

.audit-event {
  display: flex;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
}

.audit-event:last-child { border-bottom: none; }

.audit-when {
  flex: 0 0 11rem;
  font-size: var(--t-sm);
  color: var(--muted);
  padding-top: 0.08rem;
}

.audit-body { flex: 1; min-width: 0; }
.audit-summary { font-weight: 600; font-size: var(--t-base); }
.audit-context { margin-top: 0.1rem; font-size: var(--t-sm); color: var(--muted); }

/* Destructive entries are findable when scanning a long list. */
.audit-event[data-action-kind$='.deleted'] {
  border-left: 3px solid var(--brand-amber);
  padding-left: var(--s3);
}
.audit-event[data-action-kind='reading.restored'] {
  border-left: 3px solid var(--accent);
  padding-left: var(--s3);
}

.audit-changes { list-style: none; margin: var(--s2) 0 0; padding: 0; font-size: var(--t-sm); }

.audit-changes li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.08rem 0;
}

.change-label { color: var(--muted); min-width: 8rem; }
.change-from { color: var(--brand-slate); text-decoration: line-through; }
.change-arrow { color: var(--muted); }
.change-to { font-weight: 600; }

.audit-body button { margin-top: var(--s2); }

/* --- Landing picker and dashboard ----------------------------------------- */

.landing-panel { max-width: 40rem; margin-left: auto; margin-right: auto; }

.picker-progress {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: var(--s1);
}

.landing-panel h2 { margin-bottom: var(--s4); }

.picker-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.picker-option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.picker-option:hover { border-color: var(--accent); background: var(--accent-tint); }

.picker-option.is-chosen {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.option-name { font-weight: 600; }
.option-detail { font-size: var(--t-sm); color: var(--muted); }

.picker-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.picker-empty { padding: var(--s2) 0 var(--s4); }
.picker-empty .empty { margin-bottom: var(--s2); font-weight: 600; color: var(--ink); }

.resume-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-tint);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}

.resume-card:hover { background: #e3e9f2; }

.resume-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-deep);
  margin-bottom: var(--s1);
}

.resume-path { display: block; font-size: var(--t-md); }
.resume-path .crumb { font-weight: 600; }
.resume-path .crumb-last { color: var(--accent-deep); }
.resume-detail { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 0.2rem; }

/* Module shortcuts on the dashboard. */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3);
}

.module-card {
  display: block;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.module-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.module-card h3 { margin-bottom: var(--s1); color: var(--accent-deep); }
.module-card p { font-size: var(--t-sm); color: var(--muted); }

/* --- Import and export ----------------------------------------------------- */

.import-dialog, .import-summary {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  border-left: 3px solid var(--accent);
}

.import-choice {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
}

.choice-detail { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }

.summary-table { min-width: 20rem; margin-bottom: var(--s4); }
.summary-table th, .summary-table td { text-align: left; padding: 0.35rem 1.2rem 0.35rem 0; border-bottom: 1px solid var(--line-soft); }
.summary-table tbody td { font-weight: 600; }
.summary-table tbody th { font-weight: 500; color: var(--ink-soft); }

.summary-heading { font-size: var(--t-sm); margin: var(--s3) 0 var(--s1); }
.summary-heading-warn { color: var(--brand-amber-deep); }

.summary-list {
  margin: 0 0 var(--s3);
  padding-left: var(--s4);
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.55;
}

.summary-list-warn { color: var(--brand-amber-deep); }

/* --- Stub pages ------------------------------------------------------------ */

.stub-panel { max-width: 44rem; text-align: left; }

.stub-badge {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--warn);
  background: var(--warn-tint);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  margin-bottom: var(--s3);
}

.stub-panel h2 { margin-bottom: var(--s2); }
.stub-panel p { color: var(--muted); margin-bottom: var(--s3); max-width: 62ch; }
.stub-panel p:last-child { margin-bottom: 0; }

/* --- Narrow screens -------------------------------------------------------- */

@media (max-width: 640px) {
  .header-bar, .context-inner { padding-left: var(--s4); padding-right: var(--s4); }
  main { padding: var(--s5) var(--s4) var(--s6); }
  .panel { padding: var(--s4); }
  .table-scroll { margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); }
  .site-nav { margin-left: 0; width: 100%; }
  .import-choice { grid-template-columns: 1fr; }
  .audit-event { flex-direction: column; gap: var(--s1); }
  .audit-when { flex-basis: auto; }
}

/* Interim: the facility bar is replaced by the shared context strip when the
   navigation component lands. */
.facility-bar { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

/* --- Users, roles and sign-in --------------------------------------------- */

.role-badge {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.role-super_admin  { background: var(--brand-navy); color: #fff; }
.role-tenant_admin { background: var(--brand-navy-tint); color: var(--brand-navy); }
.role-user         { background: var(--brand-slate-tint); color: var(--brand-slate); }

/* Who is signed in, in the header. */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}

.user-chip:hover { background: var(--raised); }
.user-chip-name { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }

/* The sign-in list. */
.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s3);
}

.user-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.user-card:hover { border-color: var(--accent); background: var(--accent-tint); }

.user-card.is-chosen {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.user-name { font-weight: 600; font-size: var(--t-md); }
.user-title { font-size: var(--t-sm); color: var(--muted); }

.user-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s2);
}

.user-scope { font-size: var(--t-xs); color: var(--muted); }

/* Said plainly wherever the emulation could be mistaken for the real thing. */
.notice-strip {
  border: 1px solid #e8d3a8;
  background: var(--warn-tint);
  color: var(--warn);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.notice-strip strong { color: var(--brand-amber-deep); }

/* Who made an audit entry. */
.audit-actor { font-weight: 600; color: var(--ink-soft); }
.audit-actor-unknown { font-weight: 400; font-style: italic; }

.emulated-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warn);
  background: var(--warn-tint);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  margin-left: 0.2rem;
  vertical-align: 1px;
}

/* A standard shown to someone who may not change it. */
.standards-readonly {
  display: inline-block;
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.standards-readonly.is-override { font-weight: 600; color: var(--accent-deep); }

/* --- Account Management ---------------------------------------------------- */

.cap-yes { color: var(--accent-deep); font-weight: 600; }
.cap-no  { color: var(--muted); }

.user-title-cell {
  display: block;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.1rem;
}

.org-tag {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--line-soft);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin: 0.1rem 0.15rem 0.1rem 0;
  white-space: nowrap;
}

/* An organization named by a user but not present in the data. */
.org-missing {
  background: var(--warn-tint);
  color: var(--warn);
  text-decoration: underline dotted;
}

.org-all { font-size: var(--t-sm); color: var(--accent-deep); font-weight: 600; }

code {
  font-size: 0.9em;
  background: var(--line-soft);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}

/* Seat allocation on an organization. */
.allocation-tag {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-left: var(--s2);
  white-space: nowrap;
}

.allocation-tag.is-full { background: var(--warn-tint); color: var(--warn); }

/* Which health code an organization answers to. */
.jurisdiction-picker { margin-left: var(--s2); }

.jurisdiction-tag {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--brand-amber-deep);
  background: var(--brand-amber-tint);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-left: var(--s2);
}

/* --- Jurisdictions --------------------------------------------------------- */

.citation {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--brand-amber-deep);
  background: var(--brand-amber-tint);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  display: inline-block;
  margin-bottom: var(--s3);
}

/* A legal bound this app has no field for yet. */
.row-unmeasured th, .row-unmeasured td { opacity: 0.75; }

/* A legal range, distinct from an operator's own target. */
/* Legal ranges carry the accent: notable, and nowhere near the alert red. */
.source-jurisdiction { background: var(--brand-amber-tint); color: var(--brand-amber-deep); }

/* --- Grouped navigation ---------------------------------------------------- */

.nav-group { position: relative; }

.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-group.is-current > .nav-group-toggle {
  background: var(--accent-tint);
  color: var(--accent-deep);
}

.nav-caret { font-size: 0.6rem; opacity: 0.6; }

.nav-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  min-width: 15rem;
  padding: var(--s1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.nav-menu[hidden] { display: none; }

.nav-menu-item {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}

.nav-menu-item:hover { background: var(--raised); }
.nav-menu-item.is-current { background: var(--accent-tint); }

.nav-menu-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
}

.nav-menu-item.is-current .nav-menu-label { color: var(--accent-deep); }

.nav-menu-blurb {
  display: block;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 0.05rem;
}

.nav-soon {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: 3px;
  padding: 0.05rem 0.28rem;
  margin-left: 0.3rem;
  vertical-align: 1px;
}

@media (max-width: 640px) {
  /* No room to float a panel: the group's pages sit inline instead. */
  .nav-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: var(--s3);
    min-width: 0;
  }
}

/* --- Breadcrumb segments as pickers ---------------------------------------- */

.crumb-wrap { position: relative; display: inline-block; }

.crumb-button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.1rem 0.35rem;
  margin: -0.1rem -0.1rem -0.1rem -0.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.crumb-button:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.crumb-button.crumb-last { color: var(--accent-deep); font-weight: 600; }
.crumb-button.crumb-last:hover { border-color: var(--accent); }

.crumb-caret { font-size: 0.55rem; opacity: 0.55; }

.crumb-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 20;
  min-width: 13rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: var(--s1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.crumb-menu[hidden] { display: none; }

.crumb-menu-head {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: var(--s2) var(--s3) var(--s1);
}

.crumb-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s2) var(--s3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.crumb-menu-item:hover { background: var(--raised); }
.crumb-menu-item.is-current { background: var(--accent-tint); }
.crumb-menu-item.is-current .crumb-menu-name { color: var(--accent-deep); }

.crumb-menu-name { display: block; font-size: var(--t-sm); font-weight: 600; }
.crumb-menu-detail { display: block; font-size: var(--t-xs); color: var(--muted); }

/* Organizations a user belongs to that the reader cannot see. */
.org-elsewhere {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-weight: 500;
}

/* An area, between a location and the things inside it. */
.tree-area > .tree-name { font-weight: 600; color: var(--ink-soft); }

/* --- Inspection template builder ------------------------------------------- */

.builder-fields, .builder-children { list-style: none; margin: 0; padding: 0; }

.builder-field {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s2);
  background: var(--surface);
}

.builder-field.is-group { background: var(--raised); border-color: var(--accent); }

.builder-field-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
}

.builder-label { font-weight: 600; }

.field-key {
  font-size: var(--t-xs);
  color: var(--muted);
  background: var(--line-soft);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}

.field-options { font-size: var(--t-xs); color: var(--muted); }

/* A statement of fact about a field, not a warning about a value. Slate,
   so it stays quiet and leaves amber for things that need acting on. */
.required-tag {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-slate);
  background: var(--brand-slate-tint);
  border-radius: 3px;
  padding: 0.05rem 0.32rem;
}

.builder-field-actions { margin-top: var(--s1); }

/* Fields inside a repeating group - the sub-table's columns. */
.builder-children {
  margin-top: var(--s2);
  padding-left: var(--s4);
  border-left: 2px solid var(--line);
}

.builder-children .empty { font-size: var(--t-sm); padding: var(--s1) 0; }

.add-field-form { margin-bottom: var(--s3); }

.add-field-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.add-field-grid input[type="text"] {
  flex: 1 1 14rem;
  padding: 0.4rem 0.55rem;
  font-family: inherit;
  font-size: var(--t-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.add-field-grid select {
  padding: 0.4rem 0.5rem;
  font-family: inherit;
  font-size: var(--t-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* --- Assigning a template -------------------------------------------------- */

.scope-group { margin-bottom: var(--s4); }

.scope-group h4 {
  font-size: var(--t-sm);
  margin: 0 0 var(--s2);
  color: var(--ink-soft);
}

.scope-options { display: flex; flex-wrap: wrap; gap: var(--s2); }

.scope-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--t-sm);
  cursor: pointer;
}

.scope-option:hover { border-color: var(--accent); }

.scope-option.is-chosen {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-weight: 600;
}

/* --- Filling in an inspection ---------------------------------------------- */

.repeat-group {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  margin-bottom: var(--s4);
  background: var(--raised);
}

.repeat-group legend {
  font-weight: 600;
  font-size: var(--t-sm);
  padding: 0 var(--s2);
  color: var(--accent-deep);
}

.repeat-table input, .repeat-table select { width: 100%; min-width: 7rem; }

.repeat-table input[type="text"], .repeat-table input[type="number"],
.repeat-table input[type="date"], .repeat-table select {
  padding: 0.3rem 0.4rem;
  font-family: inherit;
  font-size: var(--t-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.bool-group, .multi-group { display: flex; flex-wrap: wrap; gap: var(--s3); }

.photo-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.photo-state { font-size: var(--t-sm); color: var(--muted); }

.matched-via { font-size: var(--t-xs); color: var(--muted); margin: var(--s2) 0; }

/* --- Reading a submission -------------------------------------------------- */

.answer-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line-soft);
}

.answer-label { flex: 0 0 16rem; font-weight: 600; color: var(--ink-soft); font-size: var(--t-sm); }
.answer-value { flex: 1; font-size: var(--t-sm); }

.answer-photo {
  display: block;
  max-width: 260px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* An invited person, whose record exists but whose access does not. */
.status-invited { background: var(--brand-amber-tint); color: var(--brand-amber-deep); }