/* uniCare Occupational Health. Colours, fonts, cards and buttons follow uniCare Camps;
   module tiles follow the Dental Consent department screen. */
:root {
  --teal: #0098a0;
  --teal-dark: #007a82;
  --teal-soft: #e1f5ee;
  --ink: #182030;
  --muted: rgba(24, 32, 48, 0.62);
  --soft: #8993a4;
  --bg: #eef0f3;
  --panel: #f5f7f8;
  --line: rgba(24, 32, 48, 0.14);
  --line-strong: rgba(24, 32, 48, 0.24);
  --danger: #a32d2d;
  --danger-soft: #fcebeb;
  --warn: #854f0b;
  --warn-soft: #faeeda;
  /* Outstanding (not yet done) on staff screens; dark amber is kept for genuine warnings (28 October 2026). */
  --todo: #2A3447;
  --ok: #0f6e56;
  --ok-soft: #d6f1e2;
  --control-h: 42px;

  --grad-oeuk: linear-gradient(135deg, #06b6c4 0%, #0098a0 42%, #2f6fed 100%);
  --grad-pre: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 42%, #6d28d9 100%);
  --grad-periodic: linear-gradient(135deg, #5eead4 0%, #10b981 42%, #047857 100%);
  --grad-aviation: linear-gradient(135deg, #7dd3fc 0%, #0ea5e9 42%, #0369a1 100%);
  --grad-drug: linear-gradient(135deg, #fcd34d 0%, #f59e0b 42%, #b45309 100%);
}

* { box-sizing: border-box; }
/* Anything marked hidden stays hidden, whatever layout it has. */
[hidden] { display: none !important; }

/* No italics anywhere. */
*, *::before, *::after { font-style: normal !important; }

html, body { margin: 0; padding: 0; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.app-page { min-width: 1000px; }

/* Brand book: no underlined text anywhere. Links are told apart by colour (teal, or light grey for help
   links); keyboard users still see a clear focus outline. */
a, a:hover, a:visited, summary, .link-btn, .link-btn:hover { text-decoration: none; }
a { color: var(--teal-dark); }
a:hover, .link-btn:hover { color: var(--teal); }
a:focus-visible, summary:focus-visible, .link-btn:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.muted { color: var(--muted); margin-top: 0; }
.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }

/* ---- Sign-in card (as Camps) ---- */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card {
  background: #fff;
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 32px 30px;
  width: 100%; max-width: 380px;
  box-shadow: 0 8px 30px rgba(24, 32, 48, 0.06);
}
.auth-logo { margin-bottom: 22px; }
.auth-logo .brand-logo { height: 42px; width: auto; display: block; }
.auth-title { font-size: 20px; font-weight: 600; margin: 0; }
.auth-sub { font-size: 13px; color: var(--muted); margin: 3px 0 20px; }
.auth-error {
  background: var(--danger-soft); border: 1px solid #f5c5c5; color: var(--danger);
  font-size: 13px; font-weight: 500; border-radius: 8px; padding: 10px 12px; margin-bottom: 16px;
}
.auth-card .field { margin-bottom: 15px; }
.auth-card .btn-block { margin-top: 6px; }

/* ---- App shell and top bar (as Camps admin) ---- */
.shell { max-width: 1160px; margin: 0 auto; padding: 20px 24px 48px; }
.topbar {
  background: #fff; border: 0.5px solid var(--line); border-radius: 12px;
  padding: 12px 20px; display: flex; align-items: center; gap: 28px; margin-bottom: 18px;
}
.topbar .brand-logo { height: 40px; width: auto; display: block; }
.logo-link { display: flex; align-items: center; }
.nav { display: flex; gap: 22px; flex: 1; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.nav a:hover { color: var(--teal-dark); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-right form { margin: 0; }
.who { font-size: 13px; color: var(--muted); }

.card {
  background: #fff; border: 0.5px solid var(--line); border-radius: 12px;
  padding: 22px 24px; margin: 0 0 16px;
}
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 16px; }
.pagehead h1 { margin: 0; }

/* ---- Form controls: inputs, selects and buttons share one height ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-weight: 600; font-size: 13px; }
.label .opt { font-weight: 400; color: var(--muted); }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="date"], input[type="search"], select {
  height: var(--control-h); padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; width: 100%;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' stroke='%23182030' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 152, 160, 0.12); }
input[readonly] { background: var(--panel); color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--teal); margin: 0; }
.check.locked { color: var(--muted); cursor: default; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--control-h); min-width: 150px; padding: 0 18px;
  font: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-secondary { background: #fff; color: var(--teal-dark); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal-soft); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn-small { height: 34px; min-width: 0; padding: 0 14px; font-size: 13px; }

.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 18px; align-items: start; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.span-all { grid-column: 1 / -1; }
.span-2 { grid-column: span 2; }
.inline-form { display: flex; align-items: flex-end; gap: 12px; }
.inline-form .field { width: 280px; }
.inline-form .notebook-field { width: 520px; max-width: 100%; }
.actions { display: flex; gap: 12px; margin-top: 18px; }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 14px; }
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
.radio-row { display: flex; gap: 24px; align-items: center; min-height: var(--control-h); }

.email-rows { display: flex; flex-direction: column; gap: 10px; }
.email-row { display: flex; gap: 10px; }
.email-row input { flex: 1; }
.email-row [data-remove-email][hidden] { display: none; }

/* ---- Notices ---- */
.notice { padding: 11px 14px; border-radius: 8px; margin: 0 0 16px; font-size: 13.5px; border: 1px solid; }
.notice-error { background: var(--danger-soft); color: var(--danger); border-color: #f5c5c5; }
.notice-success { background: var(--ok-soft); color: var(--ok); border-color: #b5ddd0; }
.notice-warn { background: var(--warn-soft); color: var(--warn); border-color: #ebcfa0; }
.notice strong { font-weight: 700; }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 0.5px solid var(--line); border-radius: 12px; margin: 0 0 24px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(24, 32, 48, 0.08); vertical-align: middle; }
.table th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fafbfc; }
.table tr:last-child td { border-bottom: none; }
.row-inactive td { color: var(--muted); }
.cell-action { text-align: right; width: 1%; }
.table-link tbody tr { cursor: pointer; }
.table-link tbody tr:hover td { background: #f7fafa; }
.row-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 36px 14px !important; }

/* Brand book: no capsule or pill shapes. Labels, tags and statuses are coloured text. */
.tag { display: inline; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.tag-on { color: var(--ok); }
.tag-off { color: var(--muted); }
.tag-warn { color: var(--warn); }
.type-tag { display: inline; margin: 0 6px 0 0; font-size: 12.5px; font-weight: 500; color: var(--ink); }

/* Stages: coloured text, one colour each (no capsule). */
.stage { display: inline; font-size: 13px; font-weight: 600; white-space: nowrap; }
.stage-awaiting_examinee, .stage-awaiting_reports { color: var(--todo); }
.stage-questionnaire_received, .stage-ready_for_examination, .stage-ready_for_signoff { color: var(--teal); }
.stage-pending { color: #A32D2D; }
.stage-signed, .stage-sent { color: #0F6E56; }

.filters { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.filters .field { width: 220px; }
.filters .field.grow { flex: 1; width: auto; }

/* ---- Details lists ---- */
.details { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin: 0; }
.details dt { color: var(--muted); font-size: 13px; }
.details dd { margin: 0; font-weight: 500; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.link-box { display: flex; gap: 10px; margin-top: 10px; }
.link-box input { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
/* The questionnaire line on the file page (UI fixes): link, Copy and Resend on one compact row. */
.link-line { display: flex; gap: 8px; align-items: center; }
.link-line input { flex: 1; height: 34px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.link-line .link-status { flex: 1; }
.link-line .link-status .muted { font-weight: 400; margin-left: 6px; }
.link-note { margin: 8px 0 0; }
.link-history, .all-docs { margin-top: 10px; }
.link-history > summary, .all-docs > summary { cursor: pointer; color: var(--teal); font-size: 13px; font-weight: 600; width: max-content; }
.link-history table, .all-docs table { margin-top: 8px; }
.doc-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line, #e5e7eb); border-bottom: 1px solid var(--line, #e5e7eb); }

/* ---- Module tiles (as Dental Consent) ---- */
.launcher { max-width: 760px; margin: 28px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 18px 48px rgba(24, 32, 48, 0.08), 0 4px 12px rgba(24, 32, 48, 0.04); }
.launcher-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 18px; }
.launcher-heading h1 { font-size: 18px; margin: 0; letter-spacing: -0.01em; }
.lede { font-size: 12px; color: var(--muted); font-weight: 500; }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: inherit; min-height: 140px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.tile.live { cursor: pointer; }
.tile.live:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(24, 32, 48, 0.08); }
.tile.soon { cursor: default; }
.tile.soon .icon-tile { filter: grayscale(1); opacity: 0.45; }
.tile.soon .tile-name, .tile.soon .tile-sub { opacity: 0.55; }
.icon-tile {
  width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; background: var(--tile-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(24, 32, 48, 0.1);
}
.icon-tile svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-oeuk { --tile-grad: var(--grad-oeuk); }
.tile-pre_employment { --tile-grad: var(--grad-pre); }
.tile-periodic { --tile-grad: var(--grad-periodic); }
.tile-aviation { --tile-grad: var(--grad-aviation); }
.tile-drug_alcohol { --tile-grad: var(--grad-drug); }
.tile-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; margin-bottom: 3px; }
.tile-sub { font-size: 11px; color: var(--soft); font-weight: 500; line-height: 1.35; }
.soon-label { margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft);  padding: 2px 9px; }

/* ---- Public questionnaire link page ---- */
.q-card { text-align: center; }
.q-card .auth-logo .brand-logo { margin: 0 auto; }

/* Small spacing helpers (no inline styles: the page security policy blocks them). */
.mb-14 { margin-bottom: 14px; }
.mb-18 { margin-bottom: 18px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-22 { margin-top: 22px; }
.ml-10 { margin-left: 10px; }

/* Read-only questionnaire on the staff file page */
.qv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qv-consent { border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; border: 2px solid; }
.qv-consent-yes { border-color: #0f6e56; background: #eef9f3; }
.qv-consent-no { border-color: #a32d2d; background: #fdf1f1; }
.qv-consent-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.qv-section { font-size: 15px; margin: 22px 0 8px; color: var(--teal-dark); }
.qv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.qv-col-q { width: 50%; }
.qv-with-notes .qv-col-q { width: 36%; }
.qv-with-notes .qv-col-n { width: 30%; }
.qv-table td { padding: 7px 10px; border-bottom: 1px solid rgba(24, 32, 48, 0.08); vertical-align: top; }
.qv-table td { overflow-wrap: anywhere; }
.qv-table td:first-child { color: #3a4658; }
.qv-subhead td { font-weight: 700; background: #f4f7f8; }
.qv-comment { margin-top: 4px; padding: 5px 8px; background: #f4f7f8; border-radius: 6px; }
.qv-meds { border-collapse: collapse; width: 100%; }
.qv-meds th, .qv-meds td { border: 1px solid rgba(24, 32, 48, 0.12); padding: 4px 6px; text-align: left; font-size: 12.5px; }
.qv-signature img { max-width: 360px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.link-status { margin: 0; font-weight: 500; }

/* Three-dropdown date field and mobile field (brandbook form fields) */
.date3 { display: grid; grid-template-columns: 0.8fr 1fr 1fr; gap: 8px; }
.date3 select { min-width: 0; }
.mobile-field { display: grid; grid-template-columns: minmax(240px, 1.15fr) 1fr; gap: 8px; }
.mobile-field select { min-width: 0; }
.range-buttons { display: flex; gap: 8px; }
.filters .field.date-field { width: 260px; }
.filters-card { padding: 16px 18px; }
.filters-card .filters { margin-bottom: 12px; flex-wrap: wrap; }
.filters-card .filters .field.grow { flex: 1 1 340px; }
.filters-card .filters .field.date-field { flex: 0 0 250px; }
.qv-nta { display: inline; margin-left: 8px; color: #5b6573; font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.qv-ticks { margin: 4px 0 0; padding-left: 18px; }
.qv-system-q { font-weight: 400; color: #5b6573; font-size: 12.5px; }

/* Measurements */
.span-3 { grid-column: span 3; }
.field-error { color: var(--danger); font-size: 13px; font-weight: 500; margin-top: 6px; }
.q-default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice-info { background: #eef7f8; color: #12545a; border-color: #bfe1e3; }
.clothing-rule { margin-bottom: 16px; }
.radio-stack { display: flex; flex-direction: column; gap: 4px; }
.vision-table { border-collapse: collapse; width: 100%; max-width: 720px; }
.vision-table th, .vision-table td { text-align: left; padding: 6px 10px 6px 0; }
.vision-table th { font-size: 12px; color: var(--muted); }
.vision-table select { width: 200px; }
.corrected-col.is-off { opacity: 0.35; }
.bp-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.bp-row[hidden] { display: none; }
.bp-row input { width: 120px; }
.bp-label { width: 90px; }
.bp-slash { font-size: 20px; color: var(--muted); }
.bp-clinic { margin: 12px 0 0; font-size: 15px; }
.bmi-out { display: flex; align-items: center; height: var(--control-h); font-size: 20px; font-weight: 700; color: var(--teal-dark); }
.mini-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.mini-table th, .mini-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(24, 32, 48, 0.08); }
.mini-table th { font-size: 12px; color: var(--muted); font-weight: 600; }
.identity-correct summary { cursor: pointer; font-weight: 600; color: var(--teal-dark); }
.confirm-box { margin-top: 10px; }
.upload-actions { white-space: nowrap; display: flex; gap: 6px; }
form.inline { display: inline; margin: 0; }
input[type="file"] { height: var(--control-h); padding: 8px 0; font: inherit; font-size: 13px; }

/* Doctor review */
.review-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.review-fieldset[disabled] input, .review-fieldset[disabled] select { background: var(--panel); }
.review-table { width: 100%; border-collapse: collapse; }
.review-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(24, 32, 48, 0.07); vertical-align: middle; }
.review-table td:first-child { width: 48%; }
.w-yn { width: 220px; }
.w-na { width: 230px; }
.w-small { width: 110px !important; display: inline-block; margin-left: 8px; }
.sub-title { font-size: 14px; margin: 18px 0 8px; }
.sub-panel { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }

.note-row { display: flex; gap: 10px; margin-top: 8px; }
.note-row input { flex: 1; }
.med-item { border-top: 1px solid rgba(24, 32, 48, 0.08); padding: 12px 0; }
.med-item select { max-width: 520px; margin-top: 6px; }
.med-extra { margin-top: 10px; }
.extra-row { display: grid; grid-template-columns: 2fr 160px 3fr; gap: 10px; margin-top: 10px; }

.rules-panel .flag-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 10px 12px; margin: 8px 0; border-left: 4px solid var(--danger); background: #fdf3f3; border-radius: 6px; }
.flag-text { color: var(--danger); font-weight: 500; }
.flag-section { display: inline-block; font-weight: 700; margin-right: 6px; }
.flag-effect { display: inline; margin-left: 6px; font-size: 12px; font-weight: 700; color: #a32d2d; }
.flag-seen { white-space: nowrap; }
.outcome-fit { color: var(--ok); }
.outcome-pending { color: var(--warn); }
.outcome-conditional, .outcome-ineligible { color: var(--danger); }

.nowrap { white-space: nowrap; }
.settings-json { background: #f6f8f9; border-radius: 8px; padding: 12px; font-size: 12.5px; overflow-x: auto; }
.signature-preview img { max-width: 320px; max-height: 120px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px; }
.advice-item { border-left: 4px solid var(--teal); background: #f4fbfb; border-radius: 6px; padding: 10px 12px; margin: 10px 0; }
.advice-text { margin-bottom: 6px; line-height: 1.5; }
.decision-panel textarea, #summary textarea, .sign-panel textarea, #follow-up textarea, #abnormal-box textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; }
.checklist { margin: 8px 0 14px; padding-left: 20px; color: var(--danger); }
.checklist li { margin: 3px 0; }
.final-summary { white-space: pre-wrap; background: #f6f8f9; border-radius: 8px; padding: 12px; font-size: 13.5px; }
.follow-up { border-top: 1px solid rgba(24, 32, 48, 0.08); padding: 10px 0; white-space: pre-wrap; }
.signed-panel { border-left: 4px solid var(--ok); }

.test-result { margin-top: 6px; font-weight: 500; }

#tests details > summary { cursor: pointer; color: var(--teal-dark); font-weight: 600; margin-top: 8px; }

/* Step 6: settings and documents */
.settings-logo { max-width: 200px; max-height: 80px; border: 1px solid var(--line, #dde3e8); padding: 6px; background: #fff; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.section-head .section-title { margin: 0; }
.row-sub td { background: #f7f9fa; font-size: 13px; }
.cell-action .btn + .btn { margin-left: 6px; }
.subhead { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.table-compact td, .table-compact th { padding: 6px 10px; font-size: 13px; }
/* Trial mode (step 7A-2) */
.trial-banner { background: #c0392b; color: #fff; font-weight: 700; text-align: center; padding: 10px 16px; font-size: 14px; letter-spacing: 0.2px; }
.tag-override { color: #a32d2d; font-size: 12px; font-weight: 600; }
/* Sign-in name suggestions on clinic computers */
.suggest-wrap { position: relative; }
.suggest-list { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(24, 32, 48, 0.12); z-index: 20; }
.suggest-list li { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.suggest-list li[aria-selected="true"], .suggest-list li:hover { background: #eef7f8; }

/* Examinee list: one filter row (stage, search, date range) */
.filters-card .filter-row { display: flex; gap: 12px; align-items: center; }
.filter-stage { flex: 0 0 220px; }
.filter-search { flex: 1 1 auto; min-width: 0; }
.filter-range { flex: 0 0 auto; position: relative; }
.range-button { height: var(--control-h); display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; white-space: nowrap; }
.range-button:hover { border-color: var(--teal); }
.range-button:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 152, 160, 0.12); }
.range-icon { color: var(--teal); flex: 0 0 auto; }
.range-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(24, 32, 48, 0.14); padding: 16px; display: grid; gap: 12px; }
.range-panel[hidden] { display: none; }
.range-error { background: var(--danger-soft); border: 1px solid #f5c5c5; color: var(--danger); font-size: 13px; border-radius: 8px; padding: 8px 10px; }
.range-error[hidden] { display: none; }
@media (max-width: 760px) {
  .filters-card .filter-row { flex-wrap: wrap; }
  .filter-stage { flex: 1 1 0; }
  .filter-range { order: 2; }
  .filter-search { order: 3; flex: 1 1 100%; }
  .range-panel { right: 0; width: min(340px, calc(100vw - 48px)); }
}
.pagehead-level { align-items: center; }

/* Tests card (step 8A): grouped compact rows, status chips, drag and drop */

/* One line per row: name, then results and file links on the same line, so every row is the same height. */

.file-unlink { display: inline; margin: 0; }
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--teal); cursor: pointer; }

.file-remove { color: var(--muted); font-size: 12px; display: none; }

.file-remove:hover { color: var(--danger); }

/* The x shows on hover with a mouse; on touch screens a small row menu holds "Remove". */

.test-remove .icon-btn:focus { opacity: 1; }
@media (hover: none) and (pointer: coarse) {
  .test-remove .icon-btn { display: none; }

  .file-remove { display: inline; }
}
.cover-dialog { border: none; border-radius: 12px; padding: 0; width: 460px; max-width: calc(100vw - 32px); box-shadow: 0 18px 48px rgba(24, 32, 48, 0.22); }
.cover-dialog::backdrop { background: rgba(24, 32, 48, 0.35); }
.cover-form { padding: 20px 22px; }
.cover-form h3 { margin: 0 0 4px; font-size: 16px; }
.cover-list { max-height: 52vh; overflow-y: auto; margin: 10px 0 14px; border-top: 1px solid var(--line); }

.cover-group-head { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.cover-group-head .link-btn { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
/* The lab upload pop-up (30 October 2026): Select all and Choose files are standard secondary buttons. */
.cover-group-head:has(.btn) { align-items: center; }
.cover-group-head .btn { text-transform: none; letter-spacing: 0; }
.lab-choose-line { display: flex; justify-content: flex-end; margin-top: 14px; }

.test-remove { margin: 0; }
.icon-btn { width: 26px; height: 26px; border: none; background: none; color: var(--muted); font-size: 18px; line-height: 1; border-radius: 6px; cursor: pointer; }
.icon-btn:hover { background: var(--danger-soft); color: var(--danger); }

.panel-actions { display: flex; gap: 8px; margin-top: 10px; }

.add-test { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.add-test-box { flex: 1; max-width: 420px; }
.add-test input[hidden], .add-test button[hidden] { display: none; }

/* Test catalogue and packages (step 8A) */
.catalogue-group { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 22px 0 8px; }
.catalogue-card { padding: 4px 14px; }
.catalogue-row { display: grid; grid-template-columns: minmax(200px, 2fr) 1fr 1fr 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.catalogue-card .catalogue-row:last-child { border-bottom: none; }
.catalogue-add { padding: 14px; border-bottom: none; }
.catalogue-row .check { white-space: nowrap; min-height: 0; }
.package-tests { columns: 3 220px; column-gap: 24px; }
.package-tests .group-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; break-after: avoid; }
.package-tests .check { break-inside: avoid; min-height: 28px; }
.package-list .package-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.package-row .package-name { font-weight: 700; flex: 1; }
.package-name-field { max-width: 360px; }

/* Audiometry entry screen (step 8B) */
.quiet-warn { color: #8a5300; background: #fff8ec; border: 1px solid #f3dfb8; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 0 0 14px; }
.audio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.audio-chart { position: sticky; top: 16px; }
.audio-chart svg { display: block; width: 100%; height: auto; }
.audio-unit { font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.audio-table { border-collapse: collapse; width: 100%; }
.audio-table th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 3px 8px; text-align: center; }
.audio-table th.ear { text-align: left; white-space: nowrap; padding-right: 10px; font-size: 13px; }
.audio-table td { padding: 3px; vertical-align: top; text-align: center; }
.audio-table input[type="text"] { height: 38px; padding: 0 4px; text-align: center; font-variant-numeric: tabular-nums; min-width: 46px; }
.ear-right, .audio-table th.ear-right { color: #c62828; font-weight: 700; }
.ear-left, .audio-table th.ear-left { color: #1d4ed8; font-weight: 700; }
input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1); }
.cell-error { color: var(--danger); font-size: 11px; line-height: 1.25; margin-top: 3px; text-align: left; }
.cell-error[hidden] { display: none; }
.tymp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tymp-ear { display: grid; gap: 10px; }
.audio-comments { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.audio-meter { margin-top: 8px; }

/* HAVS answers on the Tests card (step 8C) */
.havs-review { max-width: 860px; }
.havs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.havs-table td, .havs-table th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.havs-table th { font-size: 12px; color: var(--muted); font-weight: 600; }
.havs-answer { width: 110px; font-weight: 600; }
.row-form { display: inline; margin: 0; }

/* Questionnaire help texts (step 9A) */
.help-field { margin-top: 12px; }
.help-text { width: 100%; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }

/* Step 9A: examiner, My files, nurse flags, note for the doctor */

.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.segmented .seg { height: var(--control-h); padding: 0 14px; border: none; background: #fff; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.segmented .seg + .seg { border-left: 1px solid var(--line-strong); }
.segmented .seg.is-on { background: var(--teal); color: #fff; font-weight: 600; }
.flag-icon { display: inline-block; width: 13px; height: 13px; margin-left: 8px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1.5v11' stroke='%23b45f06' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M3.6 2h7.6l-1.9 2.9 1.9 2.9H3.6z' fill='%23e8a33d'/%3E%3C/svg%3E") no-repeat center / contain; }
.flag-icon { margin-left: 0; margin-right: 6px; }

@media (hover: none) and (pointer: coarse) { }

.doctor-note-card textarea, .doctor-note { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.notebook-link { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.entered-after { color: #8a5300; }
.consent-yes { color: #2f7d55; }
.consent-no { color: #9a5b00; }

/* Step 9B: companies, sending to the company, referral */
.suggest-tag { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--teal-dark); }
.company-note { margin-top: 6px; color: var(--teal-dark); }
.save-company { margin-top: 6px; }
.send-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin: 4px 0 14px; }
.send-panel > summary { list-style: none; }
.send-panel > summary::-webkit-details-marker { display: none; }
.send-panel[open] { flex-basis: 100%; }
.send-body { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; display: grid; gap: 12px; max-width: 720px; }
.send-form { display: grid; gap: 12px; }
.send-attach div { font-size: 13.5px; }
.send-text { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.send-history { margin-bottom: 14px; }
.sent-line { color: #2f7d55; }
.referral-form textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.send-body .actions, .send-body .notice { margin: 0; }
.doc-actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.doc-actions .btn { min-width: 96px; }

/* Step 8D: the urine drug screen */
.order-input { max-width: 72px; }
.drug-panel-table td { vertical-align: middle; }
.drug-form .card { margin-bottom: 16px; }
.time2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drug-table td { vertical-align: middle; }
.w-yn2 { width: 300px; }

.drug-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 4px 8px; }
.drug-table td { padding-top: 6px; padding-bottom: 6px; }

/* ---- New file screen (screen review) ---- */
/* "Change the ID numbers or date of birth": teal, a little bolder. */

/* Country code: the closed box shows only the code; the select itself stays on top for clicks and keys. */
.code-select { position: relative; }
.code-select select { color: transparent; }
.code-select select option { color: var(--ink); }
.code-select .code-shown { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ink); pointer-events: none; }
/* A small x inside a box, shown once anything is typed. */
.clear-wrap input { padding-right: 34px; }
.input-clear { position: absolute; right: 6px; top: calc(var(--control-h) / 2); transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.input-clear:hover { background: var(--panel); color: var(--ink); }
/* "What does this mean?" beside an item, opening in place (as on the examinee questionnaire). */
.check-help { display: block; }
.check-help > .check, .check-help > .section-title { display: inline-flex; vertical-align: middle; margin: 0 10px 0 0; }
.field-help { display: inline; }
/* "What does this mean?": small, light grey, no underline (here and on the examinee questionnaire). */
.field-help summary { display: inline; color: #7A8497; font-size: 12.5px; text-decoration: none; cursor: pointer; list-style: none; }
.field-help summary:hover { color: var(--ink); }
.field-help summary::-webkit-details-marker { display: none; }
.field-help p { display: block; margin: 4px 0 6px 28px; padding: 9px 12px; background: #f1f8f8; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.check-help.mt-22 .field-help p { margin-left: 0; }
.checks-help { align-items: start; }
/* Job title on the file page: one compact line, box and Save. */
.inline-edit { display: flex; gap: 8px; align-items: center; margin: 0; }
.inline-edit input { height: 34px; max-width: 280px; }
.email-row .btn { min-width: 120px; }
.row-start { grid-column: 1; }
/* File page header: Back on the left, the stage on the right, both plain coloured text. */
.file-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 14px; font-size: 13.5px; }
.file-who { color: var(--ink); }
.file-name { color: var(--ink); font-size: 18px; font-weight: 600; }
.file-top-right { display: flex; align-items: center; gap: 16px; }
.back-link { color: var(--teal); font-weight: 600; }
.file-line { margin: 2px 0 0; }
/* ---- Tests card on the file page (Tests card redo, refinements): each line is the name, the action ending
   at one right edge for every row, and a fixed slot for the x (reserved even when empty). A row sits close
   under the line above it, with more space below. ---- */
.trows { border-top: 1px solid #D5DAE1; }
.trow { padding: 8px 2px 14px; border-bottom: 1px solid #D5DAE1; }
.trows .trow:last-child { border-bottom: 0; }
/* Measurements and tests: two soft cards, "In the clinic" and "Reports" (28 October 2026). */
.tcard { background: #fff; border: 1px solid #DDE2E8; border-radius: 10px; padding: 4px 18px 6px; margin-top: 14px; }
.tcard-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 12px 0 10px; }
.tline { display: grid; grid-template-columns: minmax(0, 1fr) 14px 88px 18px; column-gap: 12px; align-items: start; min-height: 24px; }
.tline + .tline { border-top: 1px solid #EEF0F3; margin-top: 6px; padding-top: 6px; }
.trow-name { font-weight: 600; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; min-width: 0; }
.tnote { width: 14px; line-height: 0; align-self: center; }
.tact { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; line-height: 22px; }
.tx { width: 18px; line-height: 22px; text-align: center; }
.act { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 22px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.act-todo { color: var(--todo); }
.act-done, .act-view { color: #0098A0; }
.act:hover { filter: brightness(0.85); }
.act-x-form { display: inline; margin: 0; }
.act-x { background: none; border: 0; padding: 0; font-size: 15px; line-height: 22px; color: #9aa3ad; cursor: pointer; }
.act-x:hover { color: var(--danger); }
.tests-foot { margin-top: 12px; }
.tests-foot .act { font-size: 13px; }
#tests-edit-dialog .add-test { max-width: 420px; }
/* The Note for the doctor keeps its line breaks wherever it is shown. */
.note-text { white-space: pre-line; overflow-wrap: anywhere; }
.lab-dialog { width: 600px; }
.lab-list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lab-list td { padding: 6px 4px; border-bottom: 1px solid #EEF0F3; vertical-align: middle; }
.lab-list td:last-child { width: 70px; text-align: right; }
.lab-received { color: #0098A0; font-weight: 600; }
.lab-pending { color: var(--todo); font-weight: 600; }
.lab-sub { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.quiet-link { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.quiet-link:hover { color: var(--danger); }
.cover-list .check.is-received { color: var(--muted); }
.file-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-pick-btn { cursor: pointer; flex: 0 0 auto; }
.file-pick-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.form-error { color: var(--danger); font-size: 13px; margin: 8px 0 0; }
.nonneg-panel { margin-top: 12px; padding: 12px 14px; background: #fbf6ee; border: 1px solid #f0dfc0; border-radius: 6px; max-width: 560px; }
/* The real file input stays in the page (so the form still requires it) but is hidden from view. */
.file-pick-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick-btn { position: relative; }
/* Files chosen for an upload: one line each, in the order chosen, with a quiet Remove. */
.file-list { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; max-width: 560px; }
.file-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-top: 1px solid #EEF0F3; }
.file-list li:last-child { border-bottom: 1px solid #EEF0F3; }
.file-list li span { min-width: 0; overflow-wrap: anywhere; }
/* Additional documents: plain text links, the include tick, and one upload row. */
.docs-table .docs-links { white-space: nowrap; text-align: right; }
.docs-table .docs-links .act { margin-left: 14px; font-size: 13px; }
.docs-table .docs-links form { display: inline; margin-left: 14px; }
.docs-table .doc-file { overflow-wrap: anywhere; }
.docs-table .include-form { margin: 0; }
.docs-upload-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) auto auto; gap: 12px 16px; align-items: end; }
@media (max-width: 760px) { .docs-upload-row { grid-template-columns: 1fr; } }
.uk-answer { margin: 4px 0 8px 30px; font-size: 13.5px; color: var(--muted); }
/* A task the examinee ticked that is not ticked on the file (questionnaire version 4): dark amber. */
.task-note { color: #854F0B; font-weight: 600; margin: 0 0 12px; }
.task-add .check { display: flex; margin: 6px 0; }
.task-note-link { color: var(--teal); margin-left: 8px; font-weight: 600; }
.package-test { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; break-inside: avoid; }
.package-test .image-required { color: var(--muted); font-size: 13px; }
/* The identity check: one line above Measurements and tests (25 October 2026). */
.identity-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.identity-line .label { margin: 0; }
.identity-line select { width: auto; min-width: 160px; }
.identity-line .check { margin: 0; }
.identity-flag { color: #854F0B; font-weight: 600; margin: 0 0 8px; }
.measure-row { grid-template-columns: repeat(3, minmax(0, 220px)); }
#measures .bp-label { min-width: 150px; }
#measures .bp-row { margin-top: 14px; }

/* ---- Step 10A: the file as four tabs, and the quiet autosave status ---- */
/* The four tabs: one strip joined to the top of the white box below, like folder tabs. */
.file-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; background: #EAF0F1; border: 0.5px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; overflow: hidden; }
.file-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 8px 12px; background: #EAF0F1; color: var(--ink); font-weight: 600; font-size: 14px; text-align: center; }
.file-tab.is-todo { color: var(--todo); }
.file-tab.is-done { color: #0098A0; }
.file-tab:hover { background: #dfe8ea; }
.file-tab.is-active, .file-tab.is-active:hover { background: #fff; }
.file-tab-n { font-weight: 700; }
.autosave-status { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.autosave-status.is-retry, .autosave-status.is-error { color: #854F0B; font-weight: 600; }
.autosave-errors { color: #854F0B; font-size: 13px; margin: 8px 0 0; }
.tab-review { display: flex; flex-direction: column; gap: 10px; }
.tab-review .check { margin: 0; }
.tab-review textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.review-history { margin-top: 6px; }
.review-history li { margin: 2px 0; }
.match-line { margin: 10px 0 0; font-size: 14px; }
.match-line.is-warn { color: #854F0B; }
.identity-line.is-todo .label { color: var(--todo); }

/* ---- Step 10B: the issued certificate on the Certificate tab, the record form answers ---- */
.cert-frame { display: block; width: 100%; height: 760px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.compact-table td { padding-top: 6px; padding-bottom: 6px; }
.qv-note .note-row { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.qv-note .note-row input { width: 100%; }
.qv-note .note-row .btn { align-self: flex-start; }
.qv-note-text { color: var(--teal-dark); }
.qv-medclass { min-width: 0; }
.qv-medclass .med-item { margin: 0; }
.qv-medclass select { width: 100%; }
.qv-note .note-row input { flex: none; height: var(--control-h); padding: 0 12px; font: inherit; font-size: 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }

/* ---- Step 10C: Not done on a test row, the walk test link ---- */
.act-quiet { color: var(--muted); font-weight: 500; cursor: pointer; list-style: none; }
.act-quiet::-webkit-details-marker { display: none; }
#tests .nd > summary { color: var(--muted); font-weight: 500; margin-top: 0; }
.nd { display: inline-block; margin-left: 14px; }
.nd[open] { display: block; margin: 6px 0 0; }
.nd-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.nd-form input { width: 260px; }
.act-notdone { color: var(--muted); }
.nd-reason { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.nd-undo { display: inline; margin-left: 12px; }
.walk-line { margin: 12px 0 0; }
.walk-line .link-btn { color: var(--teal-dark); font-weight: 600; }

/* The white box under the tabs; the sections inside it are divided by a line instead of being separate cards. */
.tab-body { background: #fff; border: 0.5px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: 4px 24px 22px; margin: 0 0 16px; }
.tab-body .card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0 0; margin: 20px 0 0; box-shadow: none; }
.tab-body > .card:first-child, .tab-body > form:first-child > .card:first-child, .tab-body > .notice + .card { border-top: 0; margin-top: 0; }
.tab-body > .card:first-of-type, .tab-body .review-fieldset > .card:first-child { border-top: 0; margin-top: 0; }
.decision-actions { display: flex; gap: 12px; margin: 20px 0 0; }
.edit-tests-link { font-size: 13.5px; font-weight: 600; }
.qv-meds td.qv-medclass { width: 30%; }
.med-by-app { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* Issue certificate (29 October 2026): "Guideline suggests" as one quiet card of plain sentences, with an 8.2
   hard block as the tab's only red line; "Valid until" with its quick choices; quiet teal links beside
   Sign with PIN. */
.suggests .suggest-line { margin: 0 0 6px; color: var(--ink); }
.suggests .suggest-block { margin: 6px 0 0; color: var(--danger); font-weight: 600; }
.valid-until { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.quick-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--teal); cursor: pointer; text-decoration: none; }
.quick-link:hover { color: var(--teal-dark); }
.decision-panel .radio-row { flex-wrap: wrap; gap: 8px 24px; }
.decision-panel .rule-questions { margin-top: 16px; }
.decision-actions { align-items: flex-end; flex-wrap: wrap; gap: 12px 22px; }
.decision-actions .pin-field { margin: 0; }
.decision-actions .pin-field input { width: 130px; }
.decision-actions .quick-link { line-height: var(--control-h); }
/* With nothing to suggest, the Decision is the first block on the tab. */
.tab-body .review-fieldset > .suggests[hidden] + .decision-panel { border-top: 0; margin-top: 0; padding-top: 0; }

/* Measurements and tests (29 October 2026, second review): "Photo ID checked" and "Other reports" read as
   headings; edit mode ("Edit measurements and tests" / "Done") shows the x beside each test row, the lab
   list's x and "Add lab tests", and "Add a test" at the bottom of the card. */
.tcard .identity-line { margin: 16px 0 14px; }
.tcard .identity-line .label { font-size: 15px; font-weight: 600; }
.tcard-title { font-size: 15px; font-weight: 600; margin: 16px 0 14px; }
.tests-edit-toggle { font-size: 14px; font-weight: 600; color: var(--teal); }
.trm { display: none; }
.tests-card.is-editing .tline { grid-template-columns: 22px minmax(0, 1fr) 14px 88px 18px; }
.tests-card.is-editing .trm { display: block; line-height: 22px; }
.act-rm { background: none; border: 0; padding: 0; font-size: 16px; line-height: 22px; color: #9aa3ad; cursor: pointer; }
.act-rm:hover { color: var(--danger); }
.tests-card:not(.is-editing) .edit-only, .tests-card.is-editing .view-only { display: none !important; }
#add-test-form { margin-top: 14px; }
.remove-test-name { font-weight: 600; margin: 0 0 12px; }

/* Issue certificate (29 October 2026, second review): a larger Decision heading with room above it, and "Valid
   until" as one dropdown. */
.decision-panel .decision-title { font-size: 16px; letter-spacing: 0.04em; margin: 12px 0 18px; }
.tab-body .review-fieldset > .suggests[hidden] + .decision-panel .decision-title { margin-top: 12px; }
.valid-until select[name="decision_expiry_choice"] { width: auto; min-width: 170px; }
.decision-panel .decision-table td:first-child { width: 30%; }

/* The note icon on a test row (29 October 2026): a square note card (14 px, 1.5 px teal line, 2 px corners) with
   two short lines, just before "View"; filled teal with white lines once the row has a note. */
.note-icon { background: none; border: 0; padding: 0; margin: 0; line-height: 0; cursor: pointer; display: block; }
.note-icon svg { display: block; }
.note-icon rect { fill: none; stroke: var(--teal); stroke-width: 1.5; }
.note-icon path { fill: none; stroke: var(--teal); stroke-width: 1.5; }
.note-icon.has-note rect { fill: var(--teal); }
.note-icon.has-note path { stroke: #fff; }
.note-icon:hover rect { stroke: var(--teal-dark); }
#note-input { width: 100%; }
.colour-fields input.is-readonly { background: #F4F6F8; color: var(--ink); }

/* Who did the test, on the entry screens (4 November 2026). */
.performed-by { max-width: 280px; }
.audio-entry .performed-by { margin-bottom: 16px; }