/* ENV Solution Flow unified interface. */
:root {
  --charcoal-950: #171c1f;
  --charcoal-900: #202629;
  --charcoal-800: #2b3337;
  --charcoal-700: #3d474d;
  --env-yellow: #f4a900;
  --env-yellow-dark: #a86f00;
  --brand-950: var(--charcoal-950);
  --brand-900: var(--charcoal-900);
  --brand-700: #245e7b;
  --brand-600: #32789b;
  --brand-100: #e8f0f5;
  --ink: #182127;
  --ink-soft: #63717c;
  --ground: #f3f5f7;
  --ground-warm: #f7f6f2;
  --panel: #ffffff;
  --line: #dfe4e7;
  --line-strong: #ccd3d8;
  --amber: #a86f00;
  --amber-bg: #fff4d8;
  --red: #a83d32;
  --red-bg: #fbe9e6;
  --ok: #2d7049;
  --ok-bg: #e7f3eb;
  --info: #285a78;
  --info-bg: #e8f1f7;
  --incident: #ed9715;
  --hazard: #8f50a7;
  --checklist: #2da36f;
  --actions: #3b88c9;
  --dashboard: #56636d;
  --subcontractors: #8a6a3d;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(21, 29, 34, 0.05);
  --shadow: 0 10px 26px rgba(21, 29, 34, 0.08);
  --mono: Consolas, "Cascadia Mono", ui-monospace, monospace;
  --page-wide: 1240px;
  --page-safety: 930px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1 {
  margin: 0;
  color: #121a1f;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

h2 {
  margin: 0 0 0.65rem;
  color: #172127;
  font-size: 1.05rem;
  line-height: 1.3;
}

h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(244, 169, 0, 0.62);
  outline-offset: 2px;
}

.mono {
  font-family: var(--mono);
  font-size: 0.85em;
}

.muted {
  color: var(--ink-soft);
}

.small {
  font-size: 0.8rem;
}

.note {
  margin-top: 0.6rem;
  font-size: 0.82rem;
}

.empty {
  margin: 0;
  padding: 1.25rem;
  color: var(--ink-soft);
  text-align: center;
}

.eyebrow,
.section-kicker {
  margin: 0 0 0.28rem;
  color: var(--env-yellow-dark);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.page-intro {
  max-width: 680px;
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* Application header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  flex: none;
  background: var(--charcoal-900);
  border-top: 2px solid #324048;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.app-header-inner {
  width: min(100%, 1480px);
  min-height: 62px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr minmax(220px, auto);
  align-items: center;
  gap: 20px;
}

.product-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #ffffff;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.product-env {
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: 0.015em;
}

.product-arrows {
  width: 39px;
  height: 20px;
  display: inline-grid;
  place-items: center;
}

.product-arrows svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--env-yellow);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.product-name {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.product-brand-dark,
.product-brand-dark .product-env,
.product-brand-dark .product-name {
  color: var(--ink);
}

.workspace-switcher {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
}

.workspace-switcher a {
  min-height: 36px;
  padding: 0.5rem 0.9rem;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  color: #dbe2e6;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.workspace-switcher a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.workspace-switcher a.on {
  background: var(--env-yellow);
  color: var(--charcoal-950);
}

.account-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.account-actions > a,
.logout-form button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #e2e7ea;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

.logout-form {
  margin: 0;
}

.logout-form button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.account-actions > a:hover,
.logout-form button:hover {
  color: var(--env-yellow);
}

.user-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #f2f5f6;
  font-size: 0.8rem;
}

.user-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: #364148;
  color: var(--env-yellow);
  font-size: 0.78rem;
  font-weight: 800;
}

.user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-nav {
  position: sticky;
  top: 64px;
  z-index: 40;
  flex: none;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.context-nav-inner {
  width: min(100%, var(--page-wide));
  min-height: 46px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
}

.context-nav a {
  position: relative;
  min-height: 46px;
  padding: 0 0.82rem;
  display: inline-flex;
  align-items: center;
  color: #53626c;
  font-size: 0.81rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.context-nav a:hover {
  color: var(--ink);
  background: #f7f8f9;
}

.context-nav a.on {
  color: var(--ink);
}

.context-nav a.on::after {
  position: absolute;
  right: 0.78rem;
  bottom: -1px;
  left: 0.78rem;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--env-yellow);
  content: "";
}

.environment-banner,
.test-banner {
  flex: none;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 0;
  border-bottom: 1px solid #eedaa9;
  border-radius: 0;
  background: #fff8e8;
  color: #785a16;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
}

.page-container > .test-banner {
  display: none;
}

.page-container {
  width: min(100%, var(--page-wide));
  margin: 0 auto;
  padding: 30px 24px 64px;
  flex: 1 0 auto;
}

.site-footer {
  min-height: 58px;
  padding: 1rem 24px 1.25rem;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  color: #71808a;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Legacy shell contracts retained for older templates. */
.shell {
  min-height: 100vh;
  display: flex;
}

.sidebar {
  width: 220px;
  padding: 1.25rem 0.9rem;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--brand-900);
  color: #e8eef1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-mark {
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: #ffffff;
  color: var(--brand-900);
  font-size: 0.95rem;
  font-weight: 800;
}

.brand-text {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}

.brand-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  opacity: 0.7;
  text-transform: uppercase;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sidebar nav a {
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: #c8d3d9;
  font-weight: 500;
  text-decoration: none;
}

.sidebar nav a:hover,
.sidebar nav a.on {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.tagline {
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.65;
}

.logout {
  color: #c8d3d9;
  font-size: 0.8rem;
}

.content {
  width: 100%;
  max-width: var(--page-wide);
  padding: 1.75rem 2rem 4rem;
  flex: 1;
}

/* Page headings and actions */
.page-head {
  margin-bottom: 1.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.job-head {
  align-items: flex-start;
}

.crumbs {
  margin-bottom: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.head-meta {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.head-actions,
.cal-nav,
.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.kpi-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.kpi-big {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

/* Panels, cards and stats */
.panel,
.card {
  margin: 0 0 1.25rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.card {
  color: inherit;
}

a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

a.card:hover {
  border-color: #bdc8ce;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.panel-attention {
  border-left: 4px solid var(--amber);
}

.panel-head {
  margin-bottom: 0.6rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.panel-head h2 {
  margin-bottom: 0;
}

.panel-head > a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.stat-row,
.stats {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem;
}

.stat {
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.stat b,
.stat strong {
  display: block;
  overflow: hidden;
  color: #254d63;
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.stat span {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.stat-warn b,
.stat-alert b {
  color: var(--red);
}

.stat-alert {
  border-color: #e7b7b0;
  background: #fffafa;
}

.stat-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.stat-link:hover {
  border-color: #9dafb9;
  box-shadow: 0 8px 18px rgba(21, 29, 34, 0.07);
  transform: translateY(-1px);
}

/* Tables */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th {
  padding: 0.5rem 0.62rem;
  border-bottom: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.065em;
  text-align: left;
  text-transform: uppercase;
}

td {
  padding: 0.6rem 0.62rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom-color: transparent;
}

tbody tr[onclick] {
  cursor: pointer;
}

tbody tr[onclick]:hover {
  background: var(--brand-100);
}

.addr {
  max-width: 240px;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Pills, status chips and flags */
.pill {
  max-width: 100%;
  padding: 0.18rem 0.58rem;
  display: inline-block;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f3;
  color: #51606a;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.45;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.pill-danger {
  background: var(--red-bg);
  color: var(--red);
}

/* Investigation worklist stages. "Not started" carries the warning colour because it is
   the only stage where nobody has picked the record up yet. */
.pill-stage-not-started {
  background: var(--amber-bg);
  color: var(--amber);
}

.pill-stage-in-progress {
  background: var(--info-bg);
  color: var(--info);
}

.pill-stage-complete {
  background: var(--ok-bg);
  color: var(--ok);
}

.waiting-long {
  color: var(--red);
  font-weight: 800;
}

.register-table .row-action {
  text-align: right;
  white-space: nowrap;
}

.st-new {
  background: var(--amber-bg);
  color: var(--amber);
}

.st-accepted,
.st-scheduled {
  background: var(--info-bg);
  color: var(--info);
}

.st-visited {
  background: var(--brand-100);
  color: var(--brand-700);
}

.st-report_review {
  background: var(--amber-bg);
  color: var(--amber);
}

.st-report_uploaded,
.st-invoiced,
.st-complete {
  background: var(--ok-bg);
  color: var(--ok);
}

.st-cancelled {
  background: #ebedef;
  color: #6e7680;
}

.kpi-chip {
  margin: 0 0.15rem 0.15rem 0;
  padding: 0.1rem 0.5rem;
  display: inline-block;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 750;
  white-space: nowrap;
}

.k-ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.k-at_risk {
  background: var(--amber-bg);
  color: var(--amber);
}

.k-breached {
  background: var(--red-bg);
  color: var(--red);
}

.k-met {
  background: #ebedef;
  color: #6e7680;
}

.k-pending {
  background: #f2f4f6;
  color: #8a959e;
}

.flags {
  white-space: nowrap;
}

.flag-mini {
  width: 1.35rem;
  margin-right: 0.15rem;
  padding: 0.1rem 0;
  display: inline-block;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.f-yes {
  background: var(--ok-bg);
  color: var(--ok);
}

.f-no {
  background: #f2f4f6;
  color: #a7b0b7;
}

.flag {
  margin: 0.5rem 0;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.flag-ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.flag-warn {
  background: var(--amber-bg);
  color: var(--amber);
}

.flag-info {
  background: var(--info-bg);
  color: var(--info);
}

/* Forms and buttons */
input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.58rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

textarea {
  min-height: 92px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #abb7be;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #6f858f;
  outline: 3px solid rgba(244, 169, 0, 0.24);
  outline-offset: 1px;
}

textarea[readonly] {
  background: var(--ground);
  color: var(--ink-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-grid label,
.report-form label,
form.card > label,
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  color: #53616b;
  font-size: 0.79rem;
  font-weight: 700;
}

.span2,
.form-grid .full {
  grid-column: 1 / -1;
}

.filters {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filters input[type="search"] {
  min-width: 220px;
  flex: 1;
}

.filters select {
  width: auto;
  min-width: 150px;
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.inline {
  display: inline;
}

.btn {
  width: auto;
  min-height: 42px;
  padding: 0.52rem 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #27343c;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.btn:hover {
  border-color: #8e9da6;
  background: #f9fafb;
  color: #172127;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  border-color: var(--charcoal-900);
  background: var(--charcoal-900);
  color: #ffffff;
}

.btn-primary:hover {
  border-color: var(--charcoal-700);
  background: var(--charcoal-700);
  color: #ffffff;
}

.btn-small {
  min-height: 34px;
  padding: 0.35rem 0.65rem;
  font-size: 0.74rem;
}

.btn-copy {
  min-height: 34px;
  padding: 0.32rem 0.62rem;
  flex: none;
  font-size: 0.74rem;
}

.btn-link {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  font-size: 0.75rem;
  text-decoration: underline;
}

/* Tabs */
.tabs {
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--line);
}

.tab {
  min-height: 42px;
  margin-bottom: -2px;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

.tab:hover {
  color: var(--ink);
}

.tab.on {
  border-bottom-color: var(--env-yellow);
  color: var(--ink);
}

.tab-pane {
  display: none;
}

.tab-pane.on {
  display: block;
}

/* Operations stepper */
.stepper {
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  display: flex;
  gap: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.step {
  position: relative;
  min-width: 110px;
  padding-right: 1.2rem;
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.45rem;
}

.step:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  width: 0.7rem;
  height: 2px;
  background: var(--line);
  content: "";
}

.step-dot {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #ebedef;
  color: #7d8992;
  font-size: 0.72rem;
  font-weight: 700;
}

.step-label {
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.15;
}

.step.done .step-dot {
  background: var(--ok-bg);
  color: var(--ok);
}

.step.done .step-label {
  color: var(--ink);
}

.step.now .step-dot {
  background: var(--charcoal-900);
  color: var(--env-yellow);
}

.step.now .step-label {
  color: var(--ink);
  font-weight: 700;
}

/* Operations calendar */
.cal {
  min-width: 900px;
  table-layout: fixed;
}

.cal th,
.cal td {
  border: 1px solid var(--line);
}

.cal td {
  height: 70px;
  padding: 0.3rem;
}

.cal-name {
  width: 140px;
}

.cal-today {
  background: var(--brand-100);
}

.cal-job {
  margin-bottom: 0.3rem;
  padding: 0.32rem 0.42rem;
  display: block;
  border-left: 3px solid currentColor;
  border-radius: 5px;
  color: inherit;
  font-size: 0.7rem;
  line-height: 1.3;
  text-decoration: none;
}

.cal-job:hover {
  filter: brightness(0.96);
}

.cal-addr {
  display: block;
  overflow: hidden;
  opacity: 0.8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Operations pipeline */
.board-wrap {
  padding-bottom: 0.5rem;
  overflow-x: auto;
}

.board {
  min-width: max-content;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.board-col {
  width: 230px;
  padding: 0.6rem;
  flex: none;
  border-radius: var(--radius);
  background: #e9edf0;
}

.board-col-head {
  margin-bottom: 0.6rem;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.board-count {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.board-card {
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.82rem;
  text-decoration: none;
}

.board-card:hover {
  border-color: #9dafb9;
  box-shadow: var(--shadow-sm);
}

.board-card b {
  font-weight: 650;
  line-height: 1.25;
}

.board-meta {
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.board-empty {
  padding: 0.8rem 0;
  color: #909ba3;
  font-size: 0.78rem;
  text-align: center;
}

.cancelled-line {
  padding: 0.3rem 0;
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
}

.cancelled-line:hover {
  color: var(--brand-700);
}

/* Shared layout helpers */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.25rem;
}

.kv {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 1rem;
  font-size: 0.88rem;
}

.kv dt {
  color: var(--ink-soft);
}

.kv dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.claim {
  white-space: pre-wrap;
}

.checklist {
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.checklist li {
  margin-bottom: 0.45rem;
}

.breakdown {
  max-width: 420px;
  margin-bottom: 0.8rem;
}

.breakdown .sum td {
  font-weight: 700;
}

.copy-row {
  padding: 0.55rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.copy-row:last-child {
  border-bottom: 0;
}

.copy-label {
  width: 130px;
  flex: none;
  color: var(--ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.copy-row code {
  min-width: 0;
  padding: 0.3rem 0.5rem;
  flex: 1;
  overflow-x: auto;
  border-radius: 4px;
  background: var(--ground);
  font-family: var(--mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Comments and documents */
.note-form {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.note-author {
  max-width: 200px;
}

.note-form .btn {
  align-self: flex-start;
}

.notes {
  max-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}

.note-item {
  padding: 0.58rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--ground);
}

.note-item p {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  white-space: pre-wrap;
}

.note-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
}

.upload-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.upload-form input[type="file"] {
  min-width: 220px;
  flex: 1;
}

.upload-form input[type="text"] {
  min-width: 200px;
  flex: 1;
}

.upload-form .btn {
  flex: none;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
}

.photo {
  margin: 0;
}

.photo img {
  width: 100%;
  height: 130px;
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.photo figcaption {
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.report-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.guide {
  max-width: 820px;
}

.guide p {
  margin: 0.4rem 0 0.8rem;
}

.guide-list,
.guide-steps {
  padding-left: 1.2rem;
}

.guide-list li {
  margin-bottom: 0.6rem;
}

.guide-steps li {
  margin-bottom: 0.75rem;
}

/* Safety landing */
.safety-home-body {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.92), transparent 34rem),
    var(--ground);
}

.safety-home-container {
  width: min(100%, var(--page-safety));
  padding-top: 36px;
}

.safety-hero {
  margin: 0 0 1.35rem;
}

.safety-hero h1 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
}

.safety-hero > p:last-child {
  margin: 0.42rem 0 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.module-card {
  position: relative;
  min-height: 116px;
  padding: 1.2rem 1.35rem;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid #e6e9eb;
  border-left: 5px solid var(--module-color);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.module-card:hover {
  border-color: color-mix(in srgb, var(--module-color) 55%, #dfe4e7);
  box-shadow: 0 14px 30px rgba(21, 29, 34, 0.12);
  transform: translateY(-2px);
}

.module-card:active {
  transform: translateY(0);
}

.module-incident {
  --module-color: var(--incident);
}

.module-hazard {
  --module-color: var(--hazard);
}

.module-checklist {
  --module-color: var(--checklist);
}

.module-actions {
  --module-color: var(--actions);
}

.module-dashboard {
  --module-color: var(--dashboard);
}

/* The subcontractor register, added beside the dashboard on 9 September 2026.
   Its own colour so the six cards stay distinguishable at a glance. */
.module-subcontractors {
  --module-color: var(--subcontractors);
}

.module-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--module-color);
  color: #ffffff;
}

.module-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.module-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.module-copy strong {
  font-size: 1.08rem;
  line-height: 1.25;
}

.module-copy span {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.38;
}

.module-arrow {
  color: #a9b2b8;
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 170ms ease, transform 170ms ease;
}

.module-card:hover .module-arrow,
.module-card:focus-visible .module-arrow {
  opacity: 1;
  transform: translateX(0);
}

.safety-status-line {
  margin: 2rem auto 0;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  color: #75818a;
  font-size: 0.76rem;
}

.safety-status-line strong {
  color: #3f4c54;
  font-variant-numeric: tabular-nums;
}

/* Safety manager dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
}

.dashboard-grid .panel {
  min-height: 100%;
}

.compact-list {
  display: flex;
  flex-direction: column;
}

.compact-row {
  min-height: 56px;
  padding: 0.62rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid #edf0f2;
  color: var(--ink);
  text-decoration: none;
}

.compact-row:last-child {
  border-bottom: 0;
}

.compact-row:hover strong {
  color: var(--brand-700);
}

.compact-row > span:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.compact-row strong {
  font-size: 0.82rem;
}

.compact-row small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-summary {
  display: flex;
  flex-direction: column;
}

.risk-summary-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  border-bottom: 1px solid #edf0f2;
  font-size: 0.84rem;
}

.risk-summary-row:last-child {
  border-bottom: 0;
}

.risk-summary-row strong {
  font-variant-numeric: tabular-nums;
}

.risk-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9aa5ac;
}

.risk-dot-low,
.risk-dot-negligible,
.risk-dot-minor {
  background: #54a36e;
}

.risk-dot-medium,
.risk-dot-moderate {
  background: #e3b23c;
}

.risk-dot-high,
.risk-dot-major {
  background: #e47e35;
}

.risk-dot-extreme,
.risk-dot-catastrophic,
.risk-dot-critical {
  background: #c84a3d;
}

.admin-shortcuts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-left: 4px solid var(--env-yellow);
}

.admin-shortcuts h2 {
  margin-bottom: 0;
}

/* Safety forms, checklists and matrix */
.quick-links {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.quick-links .card {
  margin-bottom: 0;
  color: inherit;
  text-decoration: none;
}

.risk-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 6px;
  overflow-x: auto;
}

.risk-cell {
  min-height: 54px;
  padding: 0.55rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 750;
}

.risk-cell small {
  margin-top: 0.15rem;
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.2;
}

.risk-cell:hover {
  filter: brightness(0.97);
}

.risk-cell.selected {
  border-color: #172127;
  box-shadow: 0 0 0 2px #ffffff inset;
}

.risk-ok {
  background: #a8d08d;
}

.risk-warn {
  background: #ffe699;
}

.risk-high {
  background: #f4b183;
}

.risk-crit {
  background: #d85f57;
  color: #ffffff;
}

.builder-section {
  margin: 12px 0;
}

.add-question {
  margin-top: 0.5rem;
}

.remove-question,
.remove-section {
  border-color: #e6b8b1;
  color: var(--red);
}

.remove-question:hover,
.remove-section:hover {
  border-color: #d58e84;
  background: var(--red-bg);
  color: var(--red);
}

.builder-question {
  margin: 10px 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafbfb;
}

.checklist-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.checklist-section > label {
  margin: 0.8rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  color: #53616b;
  font-size: 0.82rem;
  font-weight: 650;
}

pre {
  padding: 12px;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: #f5f6f7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Login */
.login-body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--charcoal-900);
}

.login-layout {
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(440px, 1.05fr);
  background: #ffffff;
}

.login-brand-panel {
  position: relative;
  min-height: 100%;
  padding: clamp(2rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 13%, rgba(244, 169, 0, 0.19), transparent 32%),
    radial-gradient(circle at 88% 82%, rgba(83, 105, 116, 0.22), transparent 34%),
    linear-gradient(145deg, #171c1f, #263036);
  color: #ffffff;
}

.login-brand-panel::after {
  position: absolute;
  right: -150px;
  bottom: -190px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(255, 255, 255, 0.025),
    0 0 0 90px rgba(255, 255, 255, 0.018);
  content: "";
}

.product-brand-large {
  position: relative;
  z-index: 1;
  align-self: flex-start;
}

.product-brand-large .product-env {
  font-size: 1.55rem;
}

.product-brand-large .product-arrows {
  width: 50px;
  height: 24px;
}

.product-brand-large .product-name {
  font-size: 1.28rem;
}

.login-brand-panel > div {
  position: relative;
  z-index: 1;
  max-width: 550px;
}

.login-kicker {
  margin: 0 0 0.75rem;
  color: var(--env-yellow);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.login-brand-panel h1 {
  max-width: 560px;
  color: #ffffff;
  font-size: clamp(2rem, 4.1vw, 3.45rem);
  line-height: 1.08;
}

.login-brand-panel h1 + p {
  max-width: 520px;
  margin: 1rem 0 0;
  color: #c4cdd2;
  font-size: 1rem;
}

.login-footnote {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #9ca9b0;
  font-size: 0.8rem;
}

.login-form-panel {
  padding: 2rem;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.login-card {
  width: min(430px, 100%);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(220, 226, 229, 0.85);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(22, 30, 35, 0.1);
}

.login-form-panel .login-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.login-card h2 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.login-hint {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.login-error {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e5b2ab;
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  color: var(--red);
  font-size: 0.84rem;
}

.btn-login {
  width: 100%;
  min-height: 48px;
  margin-top: 0.2rem;
}

.forgot-link {
  align-self: center;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

.login-test-note {
  margin: 0.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: #7c888f;
  font-size: 0.72rem;
  text-align: center;
}

.login-brand {
  color: var(--ink);
}

.login-brand .brand-mark {
  background: var(--brand-900);
  color: #ffffff;
}

/* Safety reporting flow */
[hidden] {
  display: none !important;
}

.safety-form-container,
.checklist-form-container {
  width: min(100%, 980px);
}

.back-link {
  min-height: 34px;
  margin: -0.25rem 0 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #5c6a73;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link::before {
  content: "<";
  color: var(--env-yellow-dark);
  font-size: 1rem;
  font-weight: 850;
}

.back-link:hover {
  color: var(--ink);
}

.page-head-accent {
  --page-accent: var(--dashboard);
  position: relative;
  padding-left: 1.1rem;
}

.page-head-accent::before {
  position: absolute;
  top: 0.2rem;
  bottom: 0.15rem;
  left: 0;
  width: 5px;
  border-radius: 5px;
  background: var(--page-accent);
  content: "";
}

.accent-incident {
  --page-accent: var(--incident);
}

.accent-hazard {
  --page-accent: var(--hazard);
}

.accent-checklist {
  --page-accent: var(--checklist);
}

.required {
  color: var(--red);
  font-weight: 800;
}

/* Form labels are flex columns, so a bare asterisk became its own line under the field
   name (UAT item 1). Wrapping the two in .field-label keeps them on one row. */
.field-label {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.factor-options {
  margin: 0.5rem 0 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.3rem 1rem;
}

.checkbox-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.45rem;
  font-weight: 500 !important;
  line-height: 1.35;
}

.checkbox-option input {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Emma's prompt between the 5 Whys and the factor checklists, kept visually distinct
   the way it is in the Donesafe form. */
.investigation-instruction {
  margin: 1rem 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--page-accent, var(--red));
  background: #fdf6f1;
  color: #6b4a35;
  font-size: 0.78rem;
  line-height: 1.5;
}

.alert {
  margin: 0 0 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #ffffff;
  color: #3f4b53;
  font-size: 0.86rem;
}

.alert-error {
  border-color: #e4aca4;
  background: var(--red-bg);
  color: #7e2e26;
}

.alert-error strong {
  color: var(--red);
}

/* Not an error, a caveat: the thing on screen is usable but its provenance is
   incomplete. Used by the training matrix while requirements are still only
   Focus's word for it. */
.alert-warn {
  border-color: #e0c489;
  background: var(--amber-bg);
  color: #6d4a06;
}

.alert-warn b {
  color: var(--amber);
}

.safety-report-form,
.investigation-form,
.checklist-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-section {
  margin: 0;
  padding: 1.35rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.form-section > label {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  color: #53616b;
  font-size: 0.79rem;
  font-weight: 700;
}

.form-section-head {
  margin-bottom: 1.15rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.form-section-head h2 {
  margin: 0;
  font-size: 1.08rem;
}

.form-section-head p {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--charcoal-900);
  color: var(--env-yellow);
  font-size: 0.78rem;
  font-weight: 850;
}

.nested-fields {
  margin: 0.2rem 0;
  padding: 1rem;
  border: 1px solid #e6eaec;
  border-radius: var(--radius);
  background: #f8fafb;
}

.reporter-summary {
  margin-top: 1rem;
  padding: 0.78rem 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  border: 1px solid #e4e8ea;
  border-radius: var(--radius);
  background: #f8fafb;
}

.reporter-summary .user-avatar {
  width: 36px;
  height: 36px;
  border-color: #d6dde1;
  background: var(--charcoal-900);
}

.reporter-summary > span:not(.user-avatar) {
  min-width: 130px;
  display: flex;
  flex-direction: column;
}

.reporter-summary small {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.reporter-summary strong {
  color: #29353d;
  font-size: 0.84rem;
}

.risk-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) minmax(155px, 0.75fr);
  align-items: end;
  gap: 0.75rem;
}

.risk-controls > label {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  color: #53616b;
  font-size: 0.79rem;
  font-weight: 700;
}

.risk-times {
  min-height: 44px;
  display: grid;
  place-items: center;
  color: #818c93;
  font-size: 1rem;
  font-weight: 800;
}

.risk-result {
  min-height: 66px;
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f9fa;
}

.risk-result small {
  color: var(--ink-soft);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.risk-result strong {
  color: #47555d;
  font-size: 0.96rem;
}

.risk-value {
  font-weight: 800;
}

.risk-value-ok {
  color: var(--ok) !important;
}

.risk-value-warn {
  color: var(--amber) !important;
}

.risk-value-high {
  color: #b85b26 !important;
}

.risk-value-crit {
  color: var(--red) !important;
}

.matrix-scroll {
  width: 100%;
  margin-top: 1rem;
  overflow-x: auto;
  border-radius: var(--radius);
  scrollbar-color: #b5c0c6 #edf0f2;
}

.matrix-grid {
  min-width: 610px;
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  gap: 6px;
}

.matrix-grid .risk-cell {
  min-height: 66px;
}

/* Risk matrix with Consequence and Likelihood headings, per HSE-TEM-004 and UAT item 7.
   A table rather than a bare grid so the axis labels are real headers for screen
   readers and stay attached to their row and column when the matrix scrolls. */
.risk-matrix {
  min-width: 680px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 0.72rem;
}

.risk-matrix th,
.risk-matrix .matrix-corner {
  padding: 0.4rem 0.5rem;
  background: #172127;
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-weight: 750;
  text-align: center;
  vertical-align: middle;
}

.risk-matrix .matrix-corner {
  font-size: 0.74rem;
}

.risk-matrix th[scope="row"] {
  min-width: 108px;
  text-align: right;
}

.risk-matrix .matrix-axis {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.risk-matrix .matrix-axis-side {
  width: 2rem;
  padding: 0.3rem 0.15rem;
}

.risk-matrix .matrix-axis-side span {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.risk-matrix td {
  padding: 0;
}

.risk-matrix .risk-cell {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.field-note {
  margin: 0.65rem 0 0;
  color: #738089;
  font-size: 0.73rem;
  line-height: 1.45;
}

.upload-drop {
  min-height: 142px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  border: 2px dashed #bfc9ce;
  border-radius: var(--radius);
  background: #f8fafb;
  color: #56646d;
  text-align: center;
}

.upload-drop > svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--brand-700);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.upload-drop label {
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: #34434b;
  font-size: 0.85rem;
  font-weight: 750;
}

.upload-drop input[type="file"] {
  background: #ffffff;
  font-size: 0.78rem;
}

.upload-drop small {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.sticky-form-actions {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  margin-top: 0.15rem;
  padding: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
  border: 1px solid rgba(210, 217, 221, 0.92);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(21, 29, 34, 0.14);
  backdrop-filter: blur(12px);
}

.btn-lg {
  min-height: 46px;
  padding-inline: 1.15rem;
}

/* Safety record details */
.record-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.record-stats .stat b {
  font-size: 1.03rem;
  line-height: 1.3;
  white-space: normal;
}

.record-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 0.82fr);
  align-items: start;
  gap: 1rem;
}

.record-main,
.record-side {
  min-width: 0;
}

.record-side {
  position: sticky;
  top: 128px;
}

.detail-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #e6eaec;
  border-radius: var(--radius);
  overflow: hidden;
}

.detail-grid > div {
  min-width: 0;
  padding: 0.72rem 0.8rem;
  border-right: 1px solid #e9edef;
  border-bottom: 1px solid #e9edef;
}

.detail-grid > div:nth-child(2n) {
  border-right: 0;
}

.detail-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.detail-grid .detail-wide {
  grid-column: 1 / -1;
  border-right: 0;
}

.detail-grid dt,
.side-kv dt,
.action-meta dt {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-grid dd,
.side-kv dd,
.action-meta dd {
  min-width: 0;
  margin: 0.15rem 0 0;
  color: #2f3c44;
  font-size: 0.84rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.narrative-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #edf0f2;
}

.narrative-block h3 {
  margin: 0 0 0.35rem;
  color: #36444c;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.narrative-block p {
  margin: 0;
  color: #3d4a52;
  white-space: pre-wrap;
}

.side-kv {
  margin: 0;
}

.side-kv > div {
  padding: 0.55rem 0;
  border-bottom: 1px solid #edf0f2;
}

.side-kv > div:last-child {
  border-bottom: 0;
}

.empty-state {
  margin: 0;
  padding: 1.1rem;
  border: 1px dashed #cfd7db;
  border-radius: var(--radius);
  background: #fafbfb;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

.edit-panel,
.create-panel {
  padding: 0;
  overflow: hidden;
}

.edit-panel > summary,
.create-panel > summary {
  min-height: 70px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.edit-panel > summary::-webkit-details-marker,
.create-panel > summary::-webkit-details-marker,
.embedded-action > summary::-webkit-details-marker {
  display: none;
}

.edit-panel > summary > span:first-child,
.create-panel > summary > span:first-child {
  display: flex;
  flex-direction: column;
}

.edit-panel > summary > span:last-child,
.create-panel > summary > span:last-child {
  color: var(--brand-700);
  font-size: 0.76rem;
  font-weight: 750;
}

.edit-panel[open] > summary,
.create-panel[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #fafbfb;
}

.edit-panel > form,
.create-panel > form {
  padding: 1.2rem;
}

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

.version-timeline li {
  position: relative;
  min-height: 58px;
  padding: 0.55rem 0 0.65rem 2.65rem;
  border-bottom: 1px solid #edf0f2;
}

.version-timeline li:last-child {
  border-bottom: 0;
}

.version-number {
  position: absolute;
  top: 0.55rem;
  left: 0;
  min-width: 34px;
  padding: 0.18rem 0.35rem;
  border-radius: 999px;
  background: var(--charcoal-900);
  color: var(--env-yellow);
  font-size: 0.66rem;
  font-weight: 800;
  text-align: center;
}

.version-timeline li > div {
  display: flex;
  flex-direction: column;
}

.version-timeline time {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.version-timeline p {
  margin: 0.2rem 0 0;
  color: #4d5a62;
  font-size: 0.8rem;
}

/* Safety attachments and library */
.library-path {
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  background: #f3f6f8;
  color: #64727b;
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.library-path svg,
.integration-note svg,
.library-folder-head svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--brand-700);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.attachment-grid {
  margin-bottom: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 0.75rem;
}

.attachment-image {
  min-width: 0;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: #48565e;
  font-size: 0.74rem;
  text-decoration: none;
}

.attachment-image:hover {
  border-color: #9eafb8;
  box-shadow: var(--shadow-sm);
}

.attachment-image img {
  width: 100%;
  height: 120px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background: #eef1f3;
}

.attachment-image span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-list {
  display: flex;
  flex-direction: column;
}

.document-row {
  min-height: 58px;
  padding: 0.55rem 0.2rem;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid #edf0f2;
  color: var(--ink);
  text-decoration: none;
}

.document-row:last-child {
  border-bottom: 0;
}

.document-row:hover {
  background: #fafbfb;
}

.document-row > svg {
  width: 26px;
  height: 26px;
  justify-self: center;
  fill: none;
  stroke: var(--brand-700);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.document-row > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.document-row strong {
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-row small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-row > span:last-child,
.document-row time {
  color: var(--brand-700);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.file-thumb {
  width: 34px;
  height: 34px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 5px;
  object-fit: cover;
  background: #eef1f3;
}

.inline-upload {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  border-top: 1px solid var(--line);
}

.file-picker {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #27343c;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}

.file-picker:hover {
  border-color: #8e9da6;
  background: #f9fafb;
}

.file-picker:focus-within {
  border-color: var(--amber);
  outline: 3px solid rgba(244, 169, 0, 0.28);
  outline-offset: 2px;
}

.file-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.file-picker span {
  padding: 0.55rem 0.9rem;
}

.integration-note {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid #cadce7;
  border-radius: var(--radius);
  background: #eef5f9;
  color: #355468;
}

.integration-note > svg {
  width: 26px;
  height: 26px;
}

.integration-note p {
  margin: 0.15rem 0 0;
  color: #587181;
  font-size: 0.8rem;
}

.library-groups {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.library-folder {
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}

.library-folder-head {
  min-height: 72px;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid var(--line);
  background: #fafbfb;
}

.library-folder-head > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.library-folder-head small {
  color: var(--ink-soft);
  font-size: 0.66rem;
}

.library-folder-head strong {
  overflow-wrap: anywhere;
  font-size: 0.84rem;
}

.library-folder-head > span {
  color: var(--ink-soft);
  font-size: 0.72rem;
  white-space: nowrap;
}

.library-folder .document-list {
  padding: 0 1rem;
}

.empty-page {
  min-height: 260px;
  padding: 2rem;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px dashed #c8d1d6;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  text-align: center;
}

.empty-page > svg {
  width: 44px;
  height: 44px;
  margin-bottom: 0.5rem;
  fill: none;
  stroke: #81919b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.empty-page h2 {
  margin-bottom: 0.25rem;
}

.empty-page p {
  max-width: 460px;
  margin: 0 0 1rem;
}

/* Investigation */
.status-badge {
  padding: 0.35rem 0.68rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #ffffff;
  color: #4e5c65;
  font-size: 0.73rem;
  font-weight: 750;
  white-space: nowrap;
}

.investigation-summary {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.investigation-summary > div {
  min-width: 0;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.investigation-summary > div:last-child {
  border-right: 0;
}

.investigation-summary small {
  color: var(--ink-soft);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.investigation-summary strong {
  overflow: hidden;
  color: #2f3c44;
  font-size: 0.83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factor-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.factor-card {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafbfb;
}

.factor-card legend {
  padding: 0 0.4rem;
  color: #2f3c44;
  font-size: 0.85rem;
  font-weight: 800;
}

.factor-card > p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.embedded-action {
  margin-top: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafbfb;
  overflow: hidden;
}

.embedded-action > summary {
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--brand-700);
  font-size: 0.82rem;
  font-weight: 750;
  list-style: none;
}

.embedded-action[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #f4f7f8;
}

.embedded-action .form-grid {
  padding: 1rem;
}

.linked-actions {
  margin-bottom: 0.6rem;
}

/* Checklist completion */
.stop-work-alert {
  position: sticky;
  top: 122px;
  z-index: 25;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 2px solid #cf5145;
  border-radius: var(--radius);
  background: #fff2f0;
  box-shadow: 0 10px 28px rgba(133, 41, 32, 0.16);
  color: #7b2d26;
}

.stop-work-alert > svg {
  width: 28px;
  height: 28px;
  flex: none;
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.stop-work-alert p {
  margin: 0.12rem 0 0;
  font-size: 0.8rem;
}

.stop-work-confirm {
  margin-top: 0.65rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #61231e;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
}

.stop-work-confirm input {
  width: 19px;
  height: 19px;
  min-height: 0;
  flex: none;
  accent-color: var(--red);
}

.checklist-context {
  border-left: 4px solid var(--checklist);
}

.checklist-form .checklist-section {
  margin-top: 0;
}

.question-list {
  display: flex;
  flex-direction: column;
}

.checklist-question {
  position: relative;
  min-width: 0;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(260px, 1.05fr);
  align-items: start;
  gap: 1.2rem;
  border-bottom: 1px solid #e9edef;
}

.checklist-question:last-child {
  border-bottom: 0;
}

.question-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
}

.question-number {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf1f3;
  color: #58666f;
  font-size: 0.68rem;
  font-weight: 800;
}

.question-copy label {
  align-self: center;
  color: #2d3a42;
  font-size: 0.84rem;
  font-weight: 700;
}

.question-copy small {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.question-control {
  min-width: 0;
}

.segmented-control {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.segment {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segment span {
  min-height: 44px;
  padding: 0.5rem;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: #59666f;
  font-size: 0.78rem;
  font-weight: 750;
}

.segment:last-child span {
  border-right: 0;
}

.segment input:focus-visible + span {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(244, 169, 0, 0.55);
  outline-offset: -3px;
}

.segment input:checked + span {
  background: var(--charcoal-900);
  color: #ffffff;
}

.segment-no input:checked + span,
.segment-fail input:checked + span {
  background: var(--red);
}

.segment-pass input:checked + span,
.segment-yes input:checked + span {
  background: var(--ok);
}

.confirm-control {
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #34424a;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}

.confirm-control input {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--ok);
}

.photo-control {
  position: relative;
  min-height: 82px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
  border: 2px dashed #bcc8cd;
  border-radius: var(--radius);
  background: #f8fafb;
  color: var(--brand-700);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 750;
}

.photo-control svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.photo-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.photo-control:focus-within {
  border-color: var(--amber);
  outline: 3px solid rgba(244, 169, 0, 0.28);
  outline-offset: 2px;
}

.signature-pad {
  padding: 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #f8fafb;
}

.signature-pad canvas {
  width: 100%;
  height: 156px;
  display: block;
  border: 1px solid #cbd4d9;
  border-radius: 6px;
  background:
    linear-gradient(to bottom, transparent calc(100% - 35px), #d8dee1 calc(100% - 34px), transparent calc(100% - 33px)),
    #ffffff;
  cursor: crosshair;
  touch-action: none;
}

.signature-pad canvas:focus-visible {
  outline: 3px solid rgba(244, 169, 0, 0.42);
  outline-offset: 2px;
}

.signature-pad.invalid,
.signon-sheet.invalid,
.signon-row.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(181, 54, 43, 0.13);
}

.signature-pad > div {
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.signature-pad small {
  color: var(--ink-soft);
  font-size: 0.69rem;
}

.typed-signature {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: #53616b;
  font-size: 0.72rem;
  font-weight: 700;
}

.typed-signature input {
  min-height: 40px;
  background: #ffffff;
}

.signature-pad-small canvas {
  height: 94px;
}

.signon-sheet {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.signon-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.signon-row {
  padding: 0.75rem;
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(240px, 1.3fr) auto;
  align-items: start;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fafb;
}

.signon-row > label {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  color: #53616b;
  font-size: 0.76rem;
  font-weight: 700;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #e4b1aa;
  border-radius: 50%;
  background: #ffffff;
  color: var(--red);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
}

.icon-button:hover {
  background: var(--red-bg);
}

.critical-instruction {
  grid-column: 1 / -1;
  margin: -0.2rem 0 0;
  padding: 0.65rem 0.75rem;
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--red-bg);
  color: #7b2d26;
  font-size: 0.79rem;
  font-weight: 700;
}

/* Checklist index and printable report */
.checklist-card-grid {
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.checklist-card {
  --card-accent: var(--checklist);
  min-width: 0;
  padding: 1rem;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--card-accent);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.checklist-card.accent-amber {
  --card-accent: var(--incident);
}

.checklist-card.accent-purple {
  --card-accent: var(--hazard);
}

.checklist-card.accent-blue {
  --card-accent: var(--actions);
}

.checklist-card.accent-slate {
  --card-accent: var(--dashboard);
}

.checklist-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-accent) 12%, white);
  color: var(--card-accent);
}

.checklist-card-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.checklist-card-copy {
  min-width: 0;
}

.checklist-card-copy h2 {
  margin: 0;
  font-size: 0.95rem;
}

.checklist-card-copy p {
  margin: 0.2rem 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.checklist-card-copy small {
  color: #7c888f;
  font-size: 0.68rem;
}

.checklist-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.checklist-report {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.report-section {
  break-inside: avoid;
}

.response-list {
  margin: 0;
}

.response-list > div {
  min-height: 50px;
  padding: 0.62rem 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  border-bottom: 1px solid #edf0f2;
}

.response-list > div:last-child {
  border-bottom: 0;
}

.response-list dt {
  color: #4e5c65;
  font-size: 0.8rem;
  font-weight: 700;
}

.response-list dd {
  min-width: 0;
  margin: 0;
  color: #26333b;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.response-critical {
  margin-inline: -0.55rem;
  padding-inline: 0.55rem !important;
  border-left: 4px solid var(--red);
  background: #fff7f5;
}

.report-signons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.report-signons > div {
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.report-signons img {
  width: 100%;
  height: 70px;
  display: block;
  object-fit: contain;
  border-radius: 4px;
  background: #ffffff;
}

.report-signons span {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.report-evidence-image {
  width: min(100%, 420px);
  max-height: 320px;
  display: block;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f5f7f8;
}

/* Corrective actions */
.filter-bar {
  margin-bottom: 1rem;
  padding: 0.75rem;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.filter-bar label {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 750;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.action-card {
  margin: 0;
  scroll-margin-top: 135px;
  border-left: 4px solid var(--actions);
}

.action-card.action-overdue {
  border-left-color: var(--red);
}

.action-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.action-card-head h2 {
  margin-bottom: 0;
}

.action-description {
  margin: 0.75rem 0;
  color: #46545c;
  white-space: pre-wrap;
}

.action-meta {
  margin: 0 0 0.9rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.action-meta > div {
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border-radius: var(--radius-sm);
  background: #f5f7f8;
}

.action-meta .detail-wide {
  grid-column: 1 / -1;
}

.closeout-note,
.verification-note {
  margin: 0.6rem 0;
  padding: 0.7rem 0.8rem;
  border-left: 4px solid var(--actions);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #eef6fb;
  color: #31566d;
}

.verification-note {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: #2d6242;
}

.closeout-note p,
.verification-note p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  white-space: pre-wrap;
}

.action-update {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) repeat(2, minmax(210px, 1fr)) auto;
  align-items: end;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
}

.action-update label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 750;
}

.action-update textarea {
  min-height: 76px;
}

.action-readonly {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.action-readonly p {
  margin: 0;
  font-size: 0.78rem;
}

.pill-success {
  background: var(--ok-bg);
  color: var(--ok);
}

/* Register filters */
.filter-panel {
  margin-bottom: 1rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(250px, 1.6fr) repeat(3, minmax(135px, 0.7fr));
  align-items: end;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.filter-panel label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 750;
}

.filter-search {
  grid-column: span 2;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.register-table {
  min-width: 980px;
}

/* Two lines in one cell: a title with its context underneath.
   Targeted by class rather than by column position. It used to be nth-child(4), which
   silently stopped applying the moment the same pattern was used in the Investigations
   table where the title sits third, and the title ran into the location with no space
   (Emma, UAT 04.08.26 item 13). */
.register-table .cell-stacked {
  min-width: 210px;
}

.register-table .cell-stacked strong,
.register-table .cell-stacked small {
  display: block;
}

.register-table .cell-stacked small {
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
}

/* A date needs far less room than the header word suggests. */
.register-table .cell-date {
  width: 1%;
  white-space: nowrap;
}

.record-type {
  padding: 0.18rem 0.5rem;
  display: inline-block;
  border-radius: 999px;
  background: #edf1f3;
  color: #52616a;
  font-size: 0.68rem;
  font-weight: 750;
}

.record-type-incident {
  background: #fff0dd;
  color: #9a5d0d;
}

.record-type-hazard {
  background: #f3eaf7;
  color: #75418a;
}

/* Manager analytics */
.analytics-grid .panel {
  min-height: 300px;
}

.trend-chart {
  height: 205px;
  padding: 1rem 0.4rem 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(44px, 1fr));
  align-items: end;
  gap: 0.55rem;
  border-bottom: 1px solid var(--line-strong);
}

.trend-column {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(130px, 1fr) auto auto;
  align-items: end;
  justify-items: center;
  gap: 0.16rem;
}

.trend-bars {
  width: min(100%, 48px);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.trend-bar {
  width: 18px;
  min-height: 3px;
  display: block;
  border-radius: 4px 4px 0 0;
  transition: filter 140ms ease;
}

.trend-bar:hover {
  filter: brightness(0.9);
}

.trend-incident {
  background: var(--incident);
}

.trend-hazard {
  background: var(--hazard);
}

.trend-column > strong {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.trend-column > small {
  color: var(--ink-soft);
  font-size: 0.65rem;
  white-space: nowrap;
}

.chart-legend {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chart-legend i {
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 2px;
}

.legend-incident {
  background: var(--incident);
}

.legend-hazard {
  background: var(--hazard);
}

.horizontal-bars {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.horizontal-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(120px, 2fr) 30px;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
}

.horizontal-bar-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-bar-row > div {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f3;
}

.horizontal-bar-row i {
  height: 100%;
  min-width: 3px;
  display: block;
  border-radius: inherit;
  background: var(--brand-600);
}

.horizontal-bar-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lifecycle-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.lifecycle-stats > div {
  padding: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fafbfb;
}

.lifecycle-stats > div:last-child {
  border-right: 0;
}

.lifecycle-stats strong {
  color: #254d63;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.lifecycle-stats span {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Tablet */
@media (max-width: 860px) {
  .app-header,
  .context-nav {
    position: static;
  }

  .app-header-inner {
    min-height: auto;
    padding: 10px 16px;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
  }

  .workspace-switcher {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }

  .workspace-switcher a {
    flex: 1;
    justify-content: center;
  }

  .account-actions {
    gap: 0.7rem;
  }

  .user-name {
    display: none;
  }

  .context-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .context-nav::-webkit-scrollbar {
    display: none;
  }

  .context-nav-inner {
    width: max-content;
    min-width: 100%;
    padding: 0 10px;
  }

  .page-container {
    padding: 24px 18px 52px;
  }

  .two-col,
  .form-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .span2,
  .form-grid .full {
    grid-column: auto;
  }

  .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-question {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shortcuts {
    align-items: flex-start;
    flex-direction: column;
  }

  .shell {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
  }

  .sidebar nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sidebar-foot {
    margin: 0 0 0 auto;
  }

  .content {
    padding: 1.25rem 1rem 3rem;
  }

  .login-layout {
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    min-height: 310px;
    padding: 2rem;
    gap: 2.5rem;
  }

  .login-brand-panel h1 {
    max-width: 650px;
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .login-footnote {
    display: none;
  }

  .login-form-panel {
    padding: 3rem 1.5rem;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .app-header-inner {
    padding-inline: 12px;
  }

  .product-name {
    font-size: 0.9rem;
  }

  .product-arrows {
    width: 32px;
  }

  .account-actions {
    gap: 0.5rem;
  }

  .account-actions > a,
  .logout-form button {
    min-height: 40px;
    font-size: 0.75rem;
  }

  .user-chip {
    display: none;
  }

  .environment-banner,
  .test-banner {
    padding: 0.48rem 0.75rem;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .page-container {
    padding: 22px 14px 44px;
  }

  .page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .page-head .head-actions {
    width: 100%;
  }

  .page-head .head-actions .btn {
    flex: 1;
  }

  .site-footer {
    padding-inline: 14px;
  }

  .stat-row,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat {
    padding: 0.8rem;
  }

  .stat b,
  .stat strong {
    font-size: 1.45rem;
  }

  .panel,
  .card {
    padding: 1rem;
  }

  .filters {
    align-items: stretch;
    flex-direction: column;
  }

  .filters input[type="search"],
  .filters select,
  .filters .btn {
    width: 100%;
    min-width: 0;
  }

  .inline-form,
  .copy-row,
  .upload-form {
    align-items: stretch;
    flex-direction: column;
  }

  .copy-label {
    width: auto;
  }

  .form-actions .btn {
    min-height: 44px;
  }

  .quick-links,
  .builder-question {
    grid-template-columns: 1fr;
  }

  .risk-grid {
    grid-template-columns: repeat(5, minmax(92px, 1fr));
  }

  .safety-home-container {
    padding-top: 26px;
  }

  .safety-hero {
    margin-bottom: 1rem;
  }

  .safety-hero > p:last-child {
    font-size: 0.93rem;
  }

  .module-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .module-card {
    min-height: 102px;
    padding: 1rem;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.85rem;
    border-radius: 14px;
  }

  .module-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .module-icon svg {
    width: 28px;
    height: 28px;
  }

  .module-copy strong {
    font-size: 1rem;
  }

  .module-copy span {
    font-size: 0.79rem;
  }

  .module-arrow {
    display: none;
  }

  .safety-status-line {
    margin-top: 1.4rem;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .compact-row {
    align-items: flex-start;
  }

  .compact-row small {
    max-width: 190px;
  }

  .login-brand-panel {
    min-height: 280px;
    padding: 1.5rem;
  }

  .product-brand-large .product-env {
    font-size: 1.25rem;
  }

  .product-brand-large .product-arrows {
    width: 41px;
  }

  .product-brand-large .product-name {
    font-size: 1.05rem;
  }

  .login-brand-panel h1 {
    font-size: 2rem;
  }

  .login-brand-panel h1 + p {
    font-size: 0.9rem;
  }

  .login-form-panel {
    padding: 2.25rem 1rem;
  }

  .login-card {
    width: min(100%, 430px);
    padding: 1.35rem;
    border-radius: 13px;
  }

  .login-form-panel .login-card {
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Safety tablet refinements */
@media (max-width: 860px) {
  .record-layout {
    grid-template-columns: 1fr;
  }

  .record-side {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .record-side .panel {
    margin-bottom: 0;
  }

  .record-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .risk-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .risk-result {
    grid-column: 1 / -1;
  }

  .investigation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .investigation-summary > div:nth-child(2) {
    border-right: 0;
  }

  .investigation-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .checklist-question {
    grid-template-columns: minmax(190px, 0.8fr) minmax(230px, 1.2fr);
    gap: 0.9rem;
  }

  .signon-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .signon-row .signature-pad {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .signon-row .icon-button {
    grid-column: 2;
    grid-row: 1;
  }

  .checklist-card-grid {
    grid-template-columns: 1fr;
  }

  .action-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-update {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-update .btn {
    justify-self: start;
  }

  .filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-search {
    grid-column: 1 / -1;
  }

  .filter-actions {
    align-self: end;
  }

  .stop-work-alert {
    top: 12px;
  }
}

/* Safety mobile refinements */
@media (max-width: 600px) {
  .safety-form-container,
  .checklist-form-container {
    padding-inline: 12px;
  }

  .page-head-accent {
    padding-left: 0.85rem;
  }

  .form-section {
    padding: 1rem;
    border-radius: 13px;
  }

  .form-section-head {
    margin-bottom: 0.9rem;
    gap: 0.65rem;
  }

  .step-number {
    width: 27px;
    height: 27px;
    font-size: 0.7rem;
  }

  .nested-fields {
    padding: 0.8rem;
  }

  .reporter-summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.55rem 0.7rem;
  }

  .reporter-summary > span:not(.user-avatar) {
    min-width: 0;
  }

  .reporter-summary > span:nth-child(n + 3) {
    grid-column: 2;
  }

  .risk-controls {
    grid-template-columns: 1fr;
  }

  .risk-times {
    display: none;
  }

  .risk-result {
    grid-column: auto;
    min-height: 58px;
  }

  .matrix-grid {
    min-width: 520px;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
  }

  .matrix-grid .risk-cell {
    min-height: 60px;
    padding: 0.45rem;
  }

  .risk-matrix {
    min-width: 560px;
    font-size: 0.66rem;
  }

  .risk-matrix th[scope="row"] {
    min-width: 88px;
  }

  .risk-matrix .risk-cell {
    min-height: 46px;
    padding: 0.4rem 0.25rem;
  }

  .upload-drop {
    min-height: 130px;
    padding: 0.8rem;
  }

  .sticky-form-actions {
    position: static;
    padding: 0.65rem;
    box-shadow: var(--shadow-sm);
  }

  .sticky-form-actions .btn {
    flex: 1;
  }

  .record-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-layout {
    display: block;
  }

  .record-side {
    display: block;
  }

  .record-side .panel {
    margin-bottom: 1rem;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-grid > div,
  .detail-grid > div:nth-child(2n),
  .detail-grid > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid #e9edef;
  }

  .detail-grid > div:last-child {
    border-bottom: 0;
  }

  .detail-grid .detail-wide {
    grid-column: auto;
  }

  .edit-panel > summary,
  .create-panel > summary {
    min-height: 64px;
    padding: 0.85rem 1rem;
  }

  .edit-panel > form,
  .create-panel > form {
    padding: 1rem;
  }

  .attachment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attachment-image img {
    height: 105px;
  }

  .document-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .document-row > span:last-child,
  .document-row time {
    font-size: 0.66rem;
  }

  .inline-upload {
    grid-template-columns: 1fr;
  }

  .file-picker,
  .inline-upload .btn {
    width: 100%;
  }

  .file-picker {
    justify-content: center;
  }

  .library-folder-head {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .library-folder-head > span {
    grid-column: 2;
  }

  .library-folder .document-list {
    padding-inline: 0.75rem;
  }

  .empty-page {
    min-height: 220px;
    padding: 1.5rem 1rem;
  }

  .status-badge {
    align-self: flex-start;
  }

  .investigation-summary {
    grid-template-columns: 1fr;
  }

  .investigation-summary > div,
  .investigation-summary > div:nth-child(2),
  .investigation-summary > div:nth-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .investigation-summary > div:last-child {
    border-bottom: 0;
  }

  .factor-card {
    padding: 0.8rem;
  }

  .checklist-question {
    padding: 0.9rem 0;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .question-copy {
    grid-template-columns: 25px minmax(0, 1fr);
  }

  .question-number {
    width: 24px;
    height: 24px;
  }

  .signature-pad canvas {
    height: 135px;
  }

  .signature-pad-small canvas {
    height: 90px;
  }

  .signon-row {
    grid-template-columns: 1fr auto;
  }

  .checklist-card {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  .checklist-card-icon {
    width: 44px;
    height: 44px;
  }

  .checklist-card-actions {
    grid-column: 1 / -1;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
  }

  .response-list > div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .report-signons {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-bar label {
    min-width: 0;
  }

  .filter-bar .btn {
    width: 100%;
  }

  .action-card-head {
    align-items: flex-start;
  }

  .action-card-head .pill {
    flex: none;
  }

  .action-meta {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .action-meta .detail-wide {
    grid-column: auto;
  }

  .action-update {
    grid-template-columns: 1fr;
  }

  .action-update .btn {
    width: 100%;
  }

  .filter-panel {
    grid-template-columns: 1fr;
    padding: 0.85rem;
  }

  .filter-search {
    grid-column: auto;
  }

  .filter-actions {
    width: 100%;
  }

  .filter-actions .btn {
    flex: 1;
  }

  .analytics-grid .panel {
    min-height: 0;
    overflow: hidden;
  }

  .trend-chart {
    width: 100%;
    grid-template-columns: repeat(6, minmax(58px, 1fr));
    overflow-x: auto;
  }

  .horizontal-bar-row {
    grid-template-columns: minmax(72px, 0.8fr) minmax(90px, 1.5fr) 28px;
    gap: 0.45rem;
  }

  .lifecycle-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lifecycle-stats > div:nth-child(2) {
    border-right: 0;
  }

  .lifecycle-stats > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

.print-brand {
  display: none;
}

/* Checklist report printing */
@media print {
  @page {
    size: A4;
    margin: 13mm;
  }

  html,
  body {
    min-width: 0;
    min-height: 0;
    display: block;
    background: #ffffff !important;
    color: #000000;
    font-size: 9.5pt;
  }

  .app-header,
  .context-nav,
  .environment-banner,
  .site-footer,
  .no-print {
    display: none !important;
  }

  .page-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .print-brand {
    margin-bottom: 7mm;
    display: flex;
    align-items: center;
    gap: 2mm;
    font-size: 15pt;
  }

  .print-brand strong {
    font-size: 18pt;
  }

  .print-brand span {
    color: #a86f00;
    letter-spacing: -1px;
  }

  .page-head {
    margin: 0 0 8mm;
    padding-bottom: 4mm;
    border-bottom: 1px solid #aeb7bc;
  }

  .page-head-accent {
    padding-left: 4mm;
  }

  .page-head h1 {
    font-size: 18pt;
  }

  .back-link {
    display: none;
  }

  .page-intro {
    color: #333333;
    font-size: 9pt;
  }

  .stat-row,
  .record-stats {
    margin-bottom: 6mm;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2mm;
  }

  .stat {
    padding: 3mm;
    border-color: #aeb7bc;
    box-shadow: none;
  }

  .stat b,
  .stat strong,
  .record-stats .stat b {
    color: #000000;
    font-size: 10pt;
  }

  .stat span {
    color: #444444;
    font-size: 6.5pt;
  }

  .alert {
    break-inside: avoid;
    border-color: #555555;
    background: #ffffff !important;
    color: #000000;
  }

  .panel,
  .card {
    margin-bottom: 5mm;
    padding: 4mm;
    break-inside: avoid;
    border-color: #aeb7bc;
    border-radius: 2mm;
    box-shadow: none;
  }

  .panel-head {
    margin-bottom: 2mm;
  }

  .panel-head h2 {
    font-size: 11pt;
  }

  .eyebrow {
    color: #444444;
    font-size: 6.5pt;
  }

  .response-list > div {
    min-height: 0;
    padding: 2.5mm 0;
    grid-template-columns: 42% 58%;
    break-inside: avoid;
    border-color: #d3d8db;
  }

  .response-list dt,
  .response-list dd {
    color: #000000;
    font-size: 8.5pt;
  }

  .response-critical {
    border-left-color: #000000;
    background: #f1f1f1 !important;
  }

  .pill,
  .pill-danger {
    border: 1px solid #555555;
    background: #ffffff !important;
    color: #000000;
  }

  .report-signons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-signons > div {
    break-inside: avoid;
    border-color: #aeb7bc;
  }

  .report-signons img {
    height: 20mm;
  }

  .report-evidence-image {
    max-width: 100%;
    max-height: 70mm;
    border-color: #aeb7bc;
  }

  a {
    color: #000000;
    text-decoration: none;
  }
}

/* ---------- assignment: offer, accept, decline ---------- */

.assignment-panel p {
  margin: 0 0 10px;
}

.assignment-card {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.assignment-card:first-of-type {
  border-top: 0;
}

.assignment-main b {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.assignment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.decline-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.decline-form input[type="text"] {
  min-width: 220px;
}

.panel-hint {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 6px 0 12px;
}

.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.plain-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.row-overdue td {
  background: var(--red-bg);
}

.tone-crit {
  color: var(--red);
}

@media (max-width: 640px) {
  .assignment-card {
    flex-direction: column;
  }

  .decline-form input[type="text"] {
    min-width: 0;
    width: 100%;
  }
}

/* ---------- repeating rows (sample tables) ---------- */

.repeater-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.repeater-table th,
.repeater-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.repeater-table th {
  background: var(--ground);
  font-weight: 600;
  white-space: nowrap;
}

.repeater-table input,
.repeater-table select,
.repeater-table textarea {
  width: 100%;
  min-width: 96px;
  margin: 0;
}

.repeater-index {
  width: 34px;
  text-align: right;
  color: var(--ink-soft);
}

.repeater > .btn {
  margin-top: 10px;
}

.repeater [data-remove-row][disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------- inline corrective action, the "+" on ENV's paper forms ---------- */

.inline-action {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--amber-bg);
}

.inline-action-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.inline-action-fields {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.inline-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.inline-action label {
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .inline-action-row {
    grid-template-columns: 1fr;
  }
}

/* Corrective actions, reworked for Emma's UAT of 4 August 2026. */

/* Item 10: the summary has to read as the thing you click, not the word beside it. */
.create-panel .summary-link {
  color: var(--link, #1f4e79);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.create-panel summary:hover .summary-link {
  text-decoration-thickness: 2px;
}

/* Item 11: an action waiting on HSEQ review reads differently from one still being
   worked on, so the queue can be scanned without opening anything. */
.pill-review {
  background: #fde8c8;
  color: #7a4b00;
}

.action-trail {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.74rem;
}

.evidence-list {
  margin-top: 0.6rem;
}

.evidence-upload {
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.evidence-upload .field-note {
  margin: 0.1rem 0 0.5rem;
}

/* Travel calculator map. Fixed height because Leaflet needs a sized container. */
.map-canvas {
  height: 320px;
  border-radius: 8px;
  border: 1px solid var(--border, #d9dfe1);
  background: #eef1f2;
}

/* Sortable column headers and the extra filters on the job register. */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { text-decoration: underline; }
.sort-link.on { font-weight: 700; }
.filters .filter-date { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.head-actions { display: flex; gap: 8px; align-items: center; }

/* Pipeline quick actions: advance a job from the board without opening it. */
.board-card-wrap { display: flex; flex-direction: column; gap: 4px; }
.board-card-action { margin: 0 0 6px; }
.btn-tiny { font-size: 0.74rem; padding: 3px 8px; width: 100%; }
.nav-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
  border-radius: 9px; background: #b3261e; color: #fff;
  font-size: 0.7rem; line-height: 18px; text-align: center; font-weight: 700;
}

/* Guide flowchart: scrolls sideways on a phone rather than shrinking to nothing. */
.flowchart { margin: 0; overflow-x: auto; }
.flowchart svg { min-width: 940px; width: 100%; height: auto; display: block; }
.flowchart figcaption { margin-top: 10px; }
.legend-swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  vertical-align: -2px; margin: 0 4px 0 12px;
}
.legend-swatch:first-child { margin-left: 0; }
.legend-here { background: #fff8e8; border: 2px solid #f2a900; }
.legend-out { background: #f3f5f5; border: 1px dashed #b9c2c6; }

/* ---------- Feedback ----------
   The button sits in the top bar on every page. Raising something where it happened
   is the whole point, so it must never be more than one click away. */
.feedback-open {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.85rem;
}
.feedback-open:hover { background: rgba(255, 255, 255, 0.12); }

.feedback-modal { inset: 0; position: fixed; z-index: 1000; }
.feedback-modal[hidden] { display: none; }
.feedback-backdrop { background: rgba(20, 24, 26, 0.55); inset: 0; position: absolute; }
.feedback-open-body { overflow: hidden; }
.feedback-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 20, 22, 0.35);
  left: 50%;
  max-height: 88vh;
  max-width: 560px;
  overflow-y: auto;
  padding: 1.4rem 1.5rem 1.5rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
}
.feedback-panel-head { align-items: flex-start; display: flex; justify-content: space-between; }
.feedback-panel-head h2 { margin: 0.1rem 0 0.9rem; }
.feedback-dismiss {
  background: none; border: 0; cursor: pointer; font-size: 1.6rem; line-height: 1;
  color: #7a8286; padding: 0 0.2rem;
}
.feedback-kinds { border: 0; display: flex; gap: 1.1rem; margin: 0 0 0.9rem; padding: 0; }
.feedback-kinds legend { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: #657177; }
.feedback-kinds label { align-items: center; display: flex; gap: 0.35rem; }
.feedback-message textarea { width: 100%; }
.feedback-shot { margin: 0.9rem 0; }
.feedback-shot-toggle { align-items: center; display: flex; gap: 0.5rem; margin-bottom: 0.45rem; }
/* The site sizes checkboxes up for gloved hands on a checklist. Here it sat next to
   one line of text and dwarfed it. */
.feedback-shot-toggle input[type="checkbox"] { height: 1.05rem; margin: 0; width: 1.05rem; }
.feedback-kinds input[type="radio"] { height: 1rem; margin: 0; width: 1rem; }
.feedback-shot img {
  border: 1px solid #d9dfe1; border-radius: 8px; display: block;
  max-height: 150px; max-width: 100%; object-fit: contain; object-position: top left;
}
.feedback-files { display: block; margin: 0.6rem 0; }
.feedback-note { margin: 0.8rem 0 1rem; }
.feedback-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

.feedback-item { border-top: 1px solid #e6eaec; padding: 1rem 0; }
.feedback-item:first-of-type { border-top: 0; }
.feedback-item-head { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.feedback-item-head small { display: block; }
.feedback-message-text { margin: 0.5rem 0; white-space: pre-wrap; }
.feedback-thumb { border: 1px solid #d9dfe1; border-radius: 8px; max-height: 180px; max-width: 100%; }
.feedback-response { background: #f3f5f5; border-radius: 8px; margin: 0.6rem 0; padding: 0.6rem 0.8rem; }
/* An answer with more than one paragraph in it, such as the three access levels a
   record can be set to, arrives with real line breaks in the text. Without this they
   collapse into one wall of prose and the list of options stops reading as a list. */
.feedback-response p { margin: 0.25rem 0; white-space: pre-line; }
.feedback-manage { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.feedback-manage .grow { flex: 1 1 260px; }
.feedback-manage input { width: 100%; }

.flash-ok {
  background: #eaf5ee; border: 1px solid #cfe6d9; border-radius: 8px;
  color: #287a50; margin: 0 0 1rem; padding: 0.7rem 0.9rem;
}

@media (max-width: 640px) {
  .feedback-panel { max-height: 92vh; padding: 1.1rem; }
  .feedback-kinds { flex-wrap: wrap; gap: 0.7rem; }
}
.flash-floating { margin: 1rem auto 0; max-width: 1180px; width: calc(100% - 3rem); }

.feedback-badges { display: flex; gap: 0.4rem; flex-shrink: 0; }
.pill-priority-high { background: #fcecec; color: #a43232; }
.pill-priority-medium { background: #fff5dd; color: #8a6100; }
.pill-priority-low { background: #f3f5f5; color: #657177; }
.feedback-edit { margin-top: 0.7rem; }
.feedback-edit summary { color: #657177; cursor: pointer; font-size: 0.85rem; }
.feedback-edit form { margin-top: 0.6rem; }
.feedback-edit textarea { width: 100%; }
.feedback-edit label { display: block; margin-bottom: 0.5rem; }
.btn-danger { background: #a43232; border-color: #a43232; color: #fff; }
.btn-danger:hover { background: #8c2a2a; }

/* Access controls: the per-user row on /admin/users, and the named-people list on a
   protected safety record. Both are long lists of choices that have to stay scannable. */
.inline-form .inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.inline-form .inline-check input { width: auto; margin: 0; }
.checkbox-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem 1rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.6rem;
  border: 1px solid var(--line, #d9dee5);
  border-radius: 8px;
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.checkbox-row input { width: auto; margin-top: 0.2rem; }
.checkbox-row small { display: block; color: #6b7280; font-size: 0.75rem; }

/* The tabs on a user's page are links rather than buttons, so they need the
   underline removed and the same hit area the button version already has. */
.tabs a.tab { display: inline-flex; align-items: center; text-decoration: none; }

/* The select column on the user directory. The row is clickable, so the tick needs a
   generous target of its own that does not drag the administrator to another page. */
.cell-tick { width: 2.5rem; text-align: center; }
.cell-tick input { width: 18px; height: 18px; cursor: pointer; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- phones
   Measured on production at 390x844 (iPhone 14/15), 25 August 2026, driven
   through a real browser rather than eyeballed in a devtools frame.

   Every page scrolled sideways, and there was one cause, not many. The header
   grid is `minmax(0,1fr) auto` here but was `1fr auto`, and a `1fr` track keeps
   `min-width: auto`, so the brand column refused to shrink below the width of
   its own text. Brand 140px + actions 270px + gap + padding settled the row at
   460px inside a 390px viewport, and the whole document inherited it.

   The wide tables were never the problem: .matrix-scroll and .table-wrap
   already scroll inside themselves. They show up in a naive "wider than the
   viewport" sweep, and are contained. */
@media (max-width: 640px) {
  .app-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Both header children have to be allowed to shrink, or the track minimum
     simply moves from one to the other. */
  .product-brand,
  .account-actions,
  .workspace-switcher {
    min-width: 0;
  }

  .account-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.35rem;
  }

  .workspace-switcher a {
    min-width: 0;
    padding-inline: 0.5rem;
  }

  /* Letting both header children shrink stopped the page scrolling and started
     them overlapping instead: the brand text has nowhere to wrap to, so it ran
     underneath the feedback button. The wordmark is the part that can go. The
     ENV monogram and arrows stay, and the page title says where you are. */
  .product-name {
    display: none;
  }

  .product-brand {
    overflow: hidden;
  }

  /* 44px is Apple's minimum touch target, and these are used in the field with
     gloves on. Measured before: nav links 36px, the brand 20px. */
  .workspace-switcher a,
  .context-nav-inner a,
  .account-actions > a,
  .account-actions > button,
  .logout-form button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* iOS zooms the entire page in when a focused field is under 16px, and does
     not zoom back out. Report forms measured 12.64px and the register filters
     11.2px, so reporting an incident on a phone left the page magnified and the
     rest of the form off screen. */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* The Operations workspace is still being built. The people who can reach it are
   team leaders and admins, and they should know that before they read a gap as a
   defect. Small, quiet, and not a red alert: it is unfinished, not broken. */
.nav-wip {
  margin-left: 0.35rem;
  padding: 0.1rem 0.32rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Training matrix, Phase 2 requirement 1.
   Deliberately not reusing the .matrix-* prefix: that belongs to the risk matrix on
   the incident form, which is a different component with different rules.

   Sized so ENV's 35 courses and 53 people fit the page without sideways scrolling.
   Two things buy that: the course name is set on its side in the header, so a long
   name costs height instead of width, and the position sits under the person's name
   rather than in a column of its own. Status is carried by colour AND by the glyph
   in the cell, because colour alone is unreadable to anyone with a colour vision
   deficiency and unusable in print. */
.training-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.training-matrix {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  width: 100%;
  table-layout: fixed;
}

.training-matrix th,
.training-matrix td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0.4rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}

.training-matrix thead th {
  background: var(--ground);
  color: var(--ink-soft);
  vertical-align: bottom;
}

.training-matrix .training-person {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 13.5rem;
  background: var(--panel);
  font-weight: 600;
  color: var(--ink);
}

.training-matrix thead .training-person {
  z-index: 4;
  background: var(--ground);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The row header is a person's name, not a column label, so it opts out of the
   global uppercase treatment that every other `th` in the app carries. */
.training-matrix tbody .training-person {
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
}

.training-role {
  display: block;
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--ink-faint, var(--ink-soft));
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One glyph per cell and the colour behind it. */
.training-cell {
  text-align: center;
  padding: 0.3rem 0.1rem;
}

.training-cell.is-ok { background: var(--ok-bg); }
.training-cell.is-warn { background: var(--amber-bg); }
.training-cell.is-bad { background: var(--red-bg); }
.training-cell.is-info { background: var(--info-bg); }

.training-mark {
  display: inline-block;
  min-width: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.1rem;
}

.training-cell.is-ok .training-mark { color: var(--ok); }
.training-cell.is-warn .training-mark { color: var(--amber); }
.training-cell.is-bad .training-mark { color: var(--red); }
.training-cell.is-info .training-mark { color: var(--info); }

/* The full course name, set on its side. Height is capped so one very long name
   cannot push the header off the screen; the whole name stays in the title. */
.training-matrix thead .training-course {
  padding: 0.4rem 0.1rem;
  height: 12.5rem;
  text-align: center;
}

.training-course span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 11.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.training-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  margin: 0 0 0.7rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.training-key {
  display: inline-block;
  min-width: 1.15rem;
  height: 1.15rem;
  line-height: 1.15rem;
  text-align: center;
  border-radius: 3px;
  margin-right: 0.15rem;
  vertical-align: -0.25rem;
  font-weight: 700;
  font-size: 0.75rem;
}

.training-key.is-ok { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok); }
.training-key.is-warn { background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber); }
.training-key.is-bad { background: var(--red-bg); border: 1px solid var(--red); color: var(--red); }
.training-key.is-info { background: var(--info-bg); border: 1px solid var(--info); color: var(--info); }

@media (max-width: 900px) {
  .training-matrix { font-size: 0.74rem; }
  .training-matrix .training-person { width: 10rem; }
}
}

/* Training admin screens: the small pieces the person, catalogue, position and
   course-people pages lean on. Written after seeing them render as bare text, which
   made "Provide First Aid Required Earlier certificate" read as one course name. */
.training-status {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.training-status.is-ok { background: var(--ok-bg); color: var(--ok); }
.training-status.is-warn { background: var(--amber-bg); color: var(--amber); }
.training-status.is-bad { background: var(--red-bg); color: var(--red); }
.training-status.is-info { background: var(--info-bg); color: var(--info); }

/* A label about the row, not part of the name beside it, so it needs to look like
   one. Without this the words simply ran on. */
.tag-required,
td .tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.05rem;
}

.tag-required {
  border-color: #cdd9e0;
  background: var(--info-bg);
  color: var(--info);
}

/* An earlier certificate somebody has since renewed. Kept on the page because the
   history is the point of a register, dimmed because it is not the current answer. */
tr.is-superseded td,
tr.is-superseded th {
  color: var(--ink-faint, var(--ink-soft));
  background: var(--ground);
}

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

.row-actions form {
  display: inline;
}

.btn-quiet {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
}

.btn-quiet:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}

.training-record {
  margin-bottom: 2rem;
}

.training-record h2 {
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}

/* Course detail and certificate links. */
.training-file {
  display: block;
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.course-description {
  max-width: 70ch;
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.course-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 0;
}

.course-facts div {
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

.course-facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--ink-soft));
}

.course-facts dd {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.course-positions {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
}

/* A description needs the width of the panel, not one cell of the form grid. */
.filter-panel label.wide {
  grid-column: 1 / -1;
}

.filter-panel textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}

/* A tick box is not a field with a label above it. `.filter-panel label` stacks its
   contents in a column and stretches them to the column width, which turned the two
   checkboxes on the course form into large blue squares. Row direction, and the input
   keeps its own size. */
.filter-panel label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  align-self: center;
}

.filter-panel label.check input[type="checkbox"],
.filter-panel label.check input[type="radio"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

/* The rotated header is a link now. It keeps the header's colour so the row of
   course names does not turn into a wall of blue, and shows it is a link on hover. */
.training-course a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.training-course a:hover,
.training-course a:focus-visible {
  color: var(--brand-700);
  text-decoration: underline;
}

/* The chosen likelihood or consequence, explained under its picker. ENV's own words
   from HSE-TEM-004, which used to be reachable only through a tooltip and a
   collapsed drawer: neither works on the phone people report from. */
.risk-note {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.risk-note[hidden] { display: none; }

/* ---------- HR: leave calendar and its forms ---------- */

.form-grid .checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  align-self: center;
}

/* Without this the box inherits the full-width sizing every other field in a
   form-grid gets, and a half-day tick renders as a 40px square. */
.form-grid .checkbox-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
}

.inline-decide {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.inline-decide input {
  min-width: 9rem;
}

.leave-calendar {
  table-layout: fixed;
}

.leave-calendar td {
  vertical-align: top;
  height: 5.5rem;
  padding: 0.35rem;
}

.leave-calendar .day-number {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.leave-calendar td.is-outside {
  background: var(--ground);
}

.leave-calendar td.is-outside .day-number {
  opacity: 0.45;
}

.leave-calendar td.is-holiday {
  background: var(--amber-bg);
}

.leave-calendar td.is-today {
  outline: 2px solid var(--incident);
  outline-offset: -2px;
}

.leave-chip {
  display: block;
  margin-top: 0.2rem;
  padding: 0.14rem 0.35rem;
  border-radius: 5px;
  background: var(--info-bg);
  border: 1px solid var(--info);
  color: var(--info);
  font-size: 0.7rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-chip small {
  display: block;
  opacity: 0.75;
  font-size: 0.62rem;
}

/* A request nobody has decided yet is shown, and shown to be provisional: a manager
   planning around it needs to know it is not agreed. */
.leave-chip.is-pending {
  background: transparent;
  border-style: dashed;
}

.leave-chip.is-mine {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
}

/* A birthday is not an absence. Same chip so the day reads as one list, warm rather
   than informational so nobody scanning for who is away trips over one. */
.leave-chip.is-birthday {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: var(--amber);
}

/* The heading of a group that is already late, on the compliance page. Overdue and
   due look different because one is a failure and the other is a diary entry. */
h3.is-overdue {
  color: var(--red);
}

/* Four chips in four colours need saying out loud. Asked for on 9 September 2026,
   the same day birthdays landed and read as leave on a stale stylesheet. */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0.7rem 0 0.4rem;
  padding: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.calendar-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-swatch {
  display: inline-block;
  width: 1.6rem;
  height: 0.85rem;
  margin: 0;
  padding: 0;
  flex: none;
}

/* A message under the field it is about, on the subcontractor form. The panel at
   the top says nothing was saved; this says which box to look at. */
/* `.form-grid label` stacks its children, which puts a tick box above its own words.
   `.checkbox-row` is used elsewhere outside a grid, where that never showed. */
.form-grid .checkbox-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
}

.form-grid .checkbox-row input[type="checkbox"] {
  margin-top: 0.15rem;
  flex: none;
}

.field-error {
  color: var(--red);
  font-weight: 600;
  font-size: 0.74rem;
}

.legend-holiday {
  border-radius: 5px;
  background: var(--ground);
  border: 1px solid var(--line-strong);
}

.holiday-list {
  list-style: none;
  margin: 0.4rem 0 0.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.holiday-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--amber);
  background: var(--amber-bg);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}

.holiday-bulk {
  margin-top: 0.9rem;
}

.holiday-bulk summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.holiday-bulk textarea {
  width: 100%;
  margin-top: 0.5rem;
}