/* =========================================================
   Resolve Environmental IMS Portal
   Stylesheet. The :root token block below is carried over
   verbatim from the interim portal stylesheet.
   ========================================================= */

/* =========================================================
   DESIGN TOKENS  (from brand-tokens.md)
   ========================================================= */
:root {
  /* Brand colours */
  --color-primary:        #155da8;
  --color-primary-dark:   #0051a8;
  --color-primary-hover:  #0d4a8c;
  --color-accent:         #f79022;
  --color-accent-hover:   #e07a10;
  --color-bg:             #ffffff;
  --color-surface:        #f2f7fc;
  --color-surface-2:      #e8f0f8;
  --color-border:         rgba(21, 93, 168, 0.15);
  --color-text:           #1a1a1a;
  --color-text-muted:     #636363;
  --color-text-faint:     #a5a5a5;
  --color-text-inverse:   #ffffff;
  --color-divider:        #dce8f5;

  /* Status colours */
  --status-approved:      #2d7d3a;
  --status-draft:         #155da8;
  --status-review:        #f79022;
  --status-annual:        #d4890a;
  --status-overdue:       #c0392b;
  --status-placeholder:   #6f6f6f;

  /* Typography */
  --font-body:    'Ubuntu', sans-serif;
  --font-display: 'Ubuntu', sans-serif;
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --weight-light:  300;
  --weight-medium: 500;
  --weight-bold:   700;

  /* Spacing (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(21, 93, 168, 0.08);
  --shadow-md: 0 4px 12px rgba(21, 93, 168, 0.12);
  --shadow-lg: 0 12px 32px rgba(21, 93, 168, 0.16);

  /* Motion & layout */
  --transition:      180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-default: 1320px;

  /* Layout sizes */
  --nav-height:    72px;
  --sidebar-width: 264px;
  --detail-width:  290px;
}

/* Extra tokens used by this portal only */
:root {
  --space-5: 1.25rem;
  --status-issued:     #0e3d6b;
  --status-superseded: #6f6f6f;
  /* Acknowledged sits between "received" and "underway", so it needs its
     own hue rather than a second amber alongside In progress. */
  --status-acknowledged: #0f6b76;
  --status-obsolete:   #8e1b12;
  --risk-low:     #2d7d3a;
  --risk-medium:  #f79022;
  --risk-high:    #c0392b;
  --risk-extreme: #7b1f18;
  --font-mono: 'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =========================================================
   BASE RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); }

p { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
}

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

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

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

[hidden] { display: none !important; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: var(--content-default);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--nav-height);
}

.nav-logo img { width: 160px; height: auto; }

.nav-title {
  font-weight: var(--weight-light);
  color: var(--color-primary);
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
}

/* Signed-in identity block */
.identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: right;
}
.identity-text { min-width: 0; }
.identity-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.identity-email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: rgba(21, 93, 168, 0.1);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.role-badge--30, .role-badge--40 {
  background: rgba(247, 144, 34, 0.12);
  color: #b35e0d;
  border-color: rgba(247, 144, 34, 0.35);
}

/* =========================================================
   DEMO BANNER
   ========================================================= */
.demo-banner {
  background: var(--color-accent);
  color: #2a1a05;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* =========================================================
   APP LAYOUT — persistent left sidebar + content
   ========================================================= */
.app-shell {
  flex: 1;
  width: 100%;
  max-width: var(--content-default);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.side-nav {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.side-nav h2 {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}
.side-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.side-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--color-bg);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.side-nav-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.side-nav-link.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.side-nav-link.is-active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}
.side-nav-link svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-nav-link > span:not(.side-nav-count) {
  flex: 1 1 auto;
  min-width: 0;
}
.side-nav-count {
  margin-left: auto;
  flex: 0 0 auto;
  background: var(--color-accent);
  color: #2a1a05;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-bold);
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.side-nav-foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.content { min-width: 0; }

/* =========================================================
   VIEW HEADINGS
   ========================================================= */
.view-head { margin-bottom: var(--space-6); }
.view-title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.view-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 68ch;
}

/* Generic card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.card--tight { padding: var(--space-5); }
.card + .card { margin-top: var(--space-6); }
.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.card-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.section-head h2 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}

/* =========================================================
   FORMS
   ========================================================= */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.form-row label,
.form-legend {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.form-row .req { color: var(--status-overdue); }
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row select,
.form-row textarea {
  width: 100%;
  padding: var(--space-3);
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(21, 93, 168, 0.15);
}
.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"],
.form-row select[aria-invalid="true"] {
  border-color: var(--status-overdue);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.field-error {
  font-size: var(--text-xs);
  color: var(--status-overdue);
  font-weight: var(--weight-medium);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  background: var(--color-bg);
}
.form-fieldset legend {
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Checkbox rows with generous tap targets */
/* A choice row is body text, not a field label, so it must not inherit the
   small uppercase treatment applied to labels inside a form row. */
.form-row label.check-row,
.check-row {
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  font-weight: 400;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  cursor: pointer;
  line-height: 1.5;
}
.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  accent-color: var(--color-primary);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-top: 2px;
}
.check-row span { min-width: 0; flex: 1 1 auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--color-surface-2); }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn--accent {
  background: var(--color-accent);
  color: #2a1a05;
  border-color: var(--color-accent);
}
.btn--accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.4);
}
.btn--danger:hover { background: rgba(185, 28, 28, 0.08); }
.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover { background: var(--color-bg); }
.btn--primary:disabled:hover { background: var(--color-primary); }
.btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* File drop */
.file-drop {
  display: block;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  min-height: 88px;
}
.file-drop:hover, .file-drop.is-drag {
  border-color: var(--color-primary);
  background: rgba(21, 93, 168, 0.05);
}
.form-row label.file-drop, .file-drop {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--weight-light);
  color: var(--color-text);
}
.file-drop strong { color: var(--color-primary); font-weight: var(--weight-medium); }
.file-drop input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.file-drop-name {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Photo thumbnails */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.thumb {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  aspect-ratio: 1 / 1;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-state {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 4px;
}
.thumb-state--failed { background: rgba(142, 27, 18, 0.85); }
.thumb-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.thumb-remove:hover { color: var(--status-overdue); }

/* =========================================================
   STATUS CHIPS
   ========================================================= */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-text-inverse);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--status-placeholder);
}
.status-chip .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}
/* Solid chips: white 11px text needs 4.5:1, so every background below
   is checked against #fff. The brand amber only reaches 2.3:1 against
   white, so amber chips take dark text instead of a darkened orange. */
.status-chip--draft        { background: var(--status-draft); }        /* 6.6:1  */
.status-chip--teal         { background: var(--status-acknowledged); } /* 6.2:1  */
.status-chip--green        { background: var(--status-approved); }     /* 5.1:1  */
.status-chip--overdue      { background: var(--status-overdue); }      /* 5.4:1  */
.status-chip--obsolete     { background: var(--status-obsolete); }     /* 9.1:1  */
.status-chip--superseded   { background: var(--status-superseded); }   /* 5.0:1  */
.status-chip--placeholder  { background: var(--status-placeholder); }  /* 5.0:1  */

/* Amber chips: brand accent retained, dark text for legibility (7.4:1). */
.status-chip--amber {
  background: var(--color-accent);
  color: var(--color-text);
}
.status-chip--amber .status-dot { background: rgba(0, 0, 0, 0.55); }

/* Approved is provisional, Issued is in force. Same green family, one
   outlined and one solid, so the two never read as the same state. */
.status-chip--approved {
  background: transparent;
  color: var(--status-approved);
  border: 1px solid var(--status-approved);
  padding: 2px calc(var(--space-2) - 1px);
}
.status-chip--approved .status-dot { background: var(--status-approved); }

/* Retained for the acknowledgement cards, which use it as a border
   colour rather than a chip background. */
.status-chip--needs-review {
  background: var(--color-accent);
  color: var(--color-text);
}
.status-chip--needs-review .status-dot { background: rgba(0, 0, 0, 0.55); }

.risk-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-inverse);
  white-space: nowrap;
  background: var(--status-placeholder);
}
.risk-chip--low     { background: var(--risk-low); }     /* 5.1:1  */
.risk-chip--high    { background: var(--risk-high); }    /* 5.4:1  */
.risk-chip--extreme { background: var(--risk-extreme); } /* 10.2:1 */
/* Medium keeps the brand amber and takes dark text (7.4:1). */
.risk-chip--medium {
  background: var(--risk-medium);
  color: var(--color-text);
}
.risk-chip--medium .status-dot { background: rgba(0, 0, 0, 0.55); }

.tier-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mono { font-family: var(--font-mono); font-size: 12px; }

/* =========================================================
   ALERT / MESSAGE REGIONS
   ========================================================= */
.notice {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.55;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.notice--error {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.3);
  color: #8e1b12;
}
.notice--success {
  background: rgba(45, 125, 58, 0.08);
  border-color: rgba(45, 125, 58, 0.3);
  color: #1f5d2a;
}
.notice--warning {
  background: rgba(247, 144, 34, 0.1);
  border-color: rgba(247, 144, 34, 0.35);
  color: #8a4c05;
}
.notice strong { font-weight: var(--weight-medium); }
.notice ul { margin: var(--space-2) 0 0 var(--space-4); padding: 0; }
.notice ul li + li { margin-top: var(--space-1); }
.notice + .ack-list { margin-top: var(--space-4); }
#doc-message .notice, #admin-message .notice { margin-bottom: var(--space-4); }
#admin-message .notice { margin-top: var(--space-4); margin-bottom: 0; }
.detail-block ul { margin: 0 0 0 var(--space-4); padding: 0; font-size: var(--text-sm); }
.detail-block ul li { overflow-wrap: anywhere; }
.detail-block p + p { margin-top: var(--space-2); }
.state-banner + .card { margin-top: var(--space-6); }
#digest-out { margin-top: var(--space-4); }
#digest-out .detail-block-title { margin-bottom: var(--space-2); }
.tier-group + .tier-group, .empty-state { margin-top: var(--space-5); }
#view-root:focus { outline: none; }
#view-root:focus-visible { outline: none; }
#hazard-slot .detail-eyebrow { margin-top: var(--space-5); }
#hazard-slot .card > .btn-row { margin-top: var(--space-5); }
.notice-title {
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-1);
}

.empty-state {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.empty-state h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.empty-state p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 48ch;
  margin: 0 auto;
}

/* Skeletons */
@keyframes skeleton-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}
.skeleton {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  min-height: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  html { scroll-behavior: auto; }
}
.skeleton-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.skeleton-card + .skeleton-card { margin-top: var(--space-3); }
.skeleton-line-60 { width: 60%; }
.skeleton-line-40 { width: 40%; }
.skeleton-line-85 { width: 85%; }
.skeleton-line-25 { width: 25%; }
.skeleton-block-h48 { height: 48px; }
.skeleton-block-h20 { height: 20px; }

/* =========================================================
   FILTER SIDEBAR (register / documents)
   ========================================================= */
.work-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.work-layout > * { min-width: 0; }
.app-shell > * { min-width: 0; }
/* Filters sit in a horizontal bar above the table so the register
   itself gets the full content width. */
.filter-sidebar {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}
.filter-sidebar h2 {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 var(--space-1) var(--space-2) 0;
  flex: 0 0 auto;
}
.filter-sidebar .form-row {
  flex: 1 1 170px;
  min-width: 150px;
  max-width: 200px;
  margin: 0;
}
/* The reset button is declared btn--block for the old vertical sidebar;
   in the bar it must sit inline beside the controls, not on its own row. */
.filter-sidebar > .btn,
.filter-sidebar > .btn--block {
  flex: 0 0 auto;
  display: inline-flex;
  width: auto;
  margin-bottom: 1px;
}
.filter-sidebar > .form-hint {
  flex: 0 0 auto;
  margin: 0 0 var(--space-2) auto;
  text-align: right;
}
.filter-group-title {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}
.filter-select,
.filter-search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.filter-select:focus, .filter-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(21, 93, 168, 0.15);
}
/* Dividers belonged to the old vertical sidebar; the bar layout
   separates controls with gap instead. */
.filter-divider { display: none; }

/* =========================================================
   TABLES / LISTS
   ========================================================= */
.table-pane {
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-wrap: wrap;
}
.table-toolbar-info { font-size: var(--text-sm); color: var(--color-text-muted); }
.table-toolbar-info strong { color: var(--color-primary); font-weight: var(--weight-medium); }
.table-scroll { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.data-table thead th {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  padding: var(--space-3);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.data-table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  background: var(--color-bg);
}
.data-table tbody tr { transition: background var(--transition); cursor: pointer; }
.data-table tbody tr:hover td { background: var(--color-surface-2); }
.data-table tbody tr.is-selected td { background: rgba(21, 93, 168, 0.08); }
.data-table tbody tr:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.cell-title { font-weight: var(--weight-medium); min-width: 150px; max-width: 26ch; }
/* Documents: fixed column widths so every tier group lines up with the others. */
.data-table--docs { table-layout: fixed; min-width: 560px; }
.data-table--docs .col-title { width: auto; }
.data-table--docs .col-version { width: 84px; }
.data-table--docs .col-status { width: 108px; }
.data-table--docs .col-actions { width: 176px; }
.data-table--docs .cell-title { max-width: none; }
.data-table--docs .btn-row { flex-wrap: nowrap; gap: var(--space-2); }
.doc-ref, .doc-name, .doc-meta { display: block; }
.doc-ref { font-size: var(--text-xs); color: var(--color-text-muted); }
.doc-name { overflow-wrap: anywhere; }
.doc-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-wrap { max-width: 26ch; overflow-wrap: anywhere; }
@media (max-width: 1400px) {
  .data-table thead th, .data-table tbody td { padding: var(--space-2); }
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cell-nowrap { white-space: nowrap; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

/* =========================================================
   DETAIL PANEL
   ========================================================= */
.detail-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
}
.detail-eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
}
.detail-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.35;
}
.detail-fields {
  margin: var(--space-5) 0 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  font-size: var(--text-sm);
}
.detail-fields dt { color: var(--color-text-muted); font-weight: var(--weight-medium); margin: 0; }
.detail-fields dd { color: var(--color-text); margin: 0; overflow-wrap: anywhere; }
.detail-footnote {
  margin: var(--space-5) 0 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.detail-block {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.detail-block-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.detail-close {
  float: right;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.detail-close:hover { background: var(--color-surface-2); color: var(--color-text); }

/* Audit trail */
.audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.audit-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.audit-item:last-child { border-bottom: 0; padding-bottom: 0; }
.audit-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 7px;
}
.audit-event { font-weight: var(--weight-medium); }
.audit-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.audit-note { font-size: var(--text-sm); color: var(--color-text); margin-top: 2px; }

/* =========================================================
   ACKNOWLEDGEMENT CARDS
   ========================================================= */
.ack-list { display: flex; flex-direction: column; gap: var(--space-4); }
.ack-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.ack-card.is-overdue { border-left-color: var(--status-overdue); }
.ack-card.is-due-soon { border-left-color: var(--status-review); }
.ack-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-start;
}
.ack-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: 1.35;
}
.ack-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.ack-due {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.ack-due--overdue { color: var(--status-overdue); }
.ack-due--soon { color: #8a4c05; }
.ack-due--ok { color: var(--color-text-muted); }
.ack-checks { margin-top: var(--space-4); }
.ack-actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   DOCUMENT TIER GROUPS
   ========================================================= */
.tier-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
}
.tier-group + .tier-group { margin-top: var(--space-5); }
.tier-group-header {
  width: 100%;
  background: var(--color-surface-2);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--color-text);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}
.tier-group-header:hover { background: var(--color-surface); }
.tier-group.is-collapsed .tier-group-header { border-bottom-color: transparent; }
.tier-group.is-collapsed .tier-group-body { display: none; }
.tier-group-caret {
  display: inline-block;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.tier-group.is-collapsed .tier-group-caret { transform: rotate(-45deg); }
.tier-group-count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-light);
}

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-6) var(--space-4);
}
.modal-overlay.is-open { display: flex; }
.modal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-12));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.modal-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.modal-close {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--color-surface-2); color: var(--color-text); }
.modal-body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-wrap: wrap;
}

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 1100;
  max-width: min(480px, calc(100vw - 2rem));
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   ACCESS GATE (full page state)
   ========================================================= */
.gate {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #f2f7fc 0%, #e8f0f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 900;
  overflow-y: auto;
}
.gate-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10);
  width: 100%;
  max-width: 520px;
}
.gate-logo { width: 200px; height: auto; margin: 0 auto var(--space-6); }
.gate-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  text-align: center;
  text-wrap: balance;
}
.gate-body {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gate-body a { font-weight: var(--weight-medium); }
.gate-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
@media (max-width: 480px) {
  .gate-card { padding: var(--space-8) var(--space-6); }
  .gate-logo { width: 160px; }
}

/* =========================================================
   ADMIN
   ========================================================= */
.state-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.state-banner--on {
  background: rgba(45, 125, 58, 0.08);
  border-color: rgba(45, 125, 58, 0.3);
}
.state-banner--off {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.35);
}
.state-banner--paused {
  background: rgba(247, 144, 34, 0.1);
  border-color: rgba(247, 144, 34, 0.35);
}
.state-lamp {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--status-placeholder);
}
.state-banner--on .state-lamp { background: var(--status-approved); }
.state-banner--off .state-lamp { background: var(--status-overdue); }
.state-banner--paused .state-lamp { background: var(--status-review); }
.state-headline {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.state-detail { font-size: var(--text-sm); color: var(--color-text-muted); }

.kv-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  font-size: var(--text-sm);
  margin: 0;
}
.kv-list dt { color: var(--color-text-muted); font-weight: var(--weight-medium); margin: 0; }
.kv-list dd { margin: 0; overflow-wrap: anywhere; }

.code-out {
  margin: 0;
  background: #0f2135;
  color: #dbe7f3;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  margin-top: auto;
}
.footer-inner {
  max-width: var(--content-default);
  margin: 0 auto;
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
}
.footer-left { opacity: 0.95; }
.footer-right { opacity: 0.85; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .side-nav { position: static; }
  .side-nav ul { flex-direction: row; flex-wrap: wrap; }
  .side-nav-link { flex: 1 1 auto; }
  .nav-inner {
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
  }
  .nav-title {
    grid-column: 1 / -1;
    order: 3;
    font-size: var(--text-base);
  }
}

@media (max-width: 768px) {
  .nav-inner {
    grid-template-columns: auto 1fr;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2) var(--space-3);
  }
  .nav-logo { grid-column: 1; order: 1; }
  .nav-logo img { width: 132px; }
  .nav-title { grid-column: 2; order: 2; }
  .identity {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
    text-align: left;
  }
  .app-shell { padding: var(--space-6) var(--space-4); }
  .view-title { font-size: 24px; }
  .card { padding: var(--space-5); }
  .form-grid-2 { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; gap: var(--space-2); }
  .detail-fields, .kv-list { grid-template-columns: 1fr; row-gap: var(--space-1); }
  .detail-fields dd, .kv-list dd { margin-bottom: var(--space-2); }
}

@media (max-width: 640px) {
  .btn--wide-mobile { width: 100%; }
  .gate-card { padding: var(--space-6); }
}

/* On a phone the section nav becomes a compact horizontal strip so the
   working screen is visible without scrolling past the whole menu. */
@media (max-width: 900px) {
  .side-nav {
    position: static;
    padding: var(--space-2);
  }
  .side-nav h2, .side-nav-foot { display: none; }
  .side-nav ul {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .side-nav li { flex: 0 0 auto; }
  .side-nav-link {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
  }
}

/* On a narrow phone the five sections cannot all fit, so fade the right edge
   of the strip to signal that it scrolls sideways. */
@media (max-width: 700px) {
  .side-nav ul {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}

/* Person cell: the filter bar freed enough width to show most names
   in full, so only genuinely long ones truncate. */
.cell-person {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .scroll-hint { display: block; }
}

/* Below the tablet breakpoint the bar stacks so each control keeps a
   48px touch target at full width. */
@media (max-width: 700px) {
  .filter-sidebar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-sidebar h2 { margin: 0; }
  /* flex-basis follows the main axis, so the 170px basis used by the
     horizontal bar would become a 170px row height once stacked. */
  .filter-sidebar .form-row {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
  }
  .filter-sidebar > .form-hint { margin: 0; text-align: left; }
  /* Match the 44px minimum touch target used by the other controls. */
  .filter-sidebar > .btn,
  .filter-sidebar > .btn--block { margin-bottom: 0; min-height: 44px; }
}
.scroll-hint { display: none; }

/* Narrow rule tables keep a readable minimum width and scroll instead of squashing */
.data-table--min { min-width: 440px; }

/* =========================================================
   Documents landing: view switch, count chips, tree
   ========================================================= */

/* Type colours — one hue per document type across nodes, dots and links */
:root {
  --type-primary-policy: #155da8;
  --type-supporting-policy: #4a7fc1;
  --type-manual: #6b4fa0;
  --type-program: #0f8b8d;
  --type-procedure: #2d7d3a;
  --type-sop: #6d8a2a;
  --type-form: #b56a00;
  --type-tool: #c0392b;
  --type-register: #8d6708;
  --type-guideline: #4d6a79;
  --type-alert: #d81b60;
  --type-swms: #546e7a;
}

.side-nav-badge {
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a4a00;
  background: rgba(247, 144, 34, 0.16);
  border: 1px solid rgba(247, 144, 34, 0.45);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: auto;
  white-space: nowrap;
}

.count-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.count-chip {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 14px;
}
.count-chip strong { color: var(--color-text); font-weight: var(--weight-medium); }
.count-chip--live { border-color: rgba(45, 125, 58, 0.4); background: rgba(45, 125, 58, 0.07); }
.count-chip--dev { border-color: rgba(247, 144, 34, 0.45); background: rgba(247, 144, 34, 0.09); }
.count-chip--ph { border-style: dashed; }

.view-switch {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.view-switch-btn {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  padding: 8px 20px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.view-switch-btn + .view-switch-btn { border-left: 1px solid var(--color-border); }
.view-switch-btn.is-active {
  background: var(--color-primary);
  color: #fff;
}
.view-switch-btn:not(.is-active):hover { background: rgba(21, 93, 168, 0.08); color: var(--color-primary); }

/* Legend */
.tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.tree-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.tree-legend-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--color-border);
  flex-shrink: 0;
}
.tree-legend-dot--ph { background: transparent; border: 1.5px dashed var(--color-text-muted); }
.tree-legend-dot.type--primary-policy { background: var(--type-primary-policy); }
.tree-legend-dot.type--supporting-policy { background: var(--type-supporting-policy); }
.tree-legend-dot.type--manual { background: var(--type-manual); }
.tree-legend-dot.type--program { background: var(--type-program); }
.tree-legend-dot.type--procedure { background: var(--type-procedure); }
.tree-legend-dot.type--sop { background: var(--type-sop); }
.tree-legend-dot.type--form { background: var(--type-form); }
.tree-legend-dot.type--tool { background: var(--type-tool); }
.tree-legend-dot.type--register { background: var(--type-register); }
.tree-legend-dot.type--guideline { background: var(--type-guideline); }
.tree-legend-dot.type--alert { background: var(--type-alert); }
.tree-legend-dot.type--swms { background: var(--type-swms); }

/* Document tree: tier swimlane canvas with progressive disclosure */
.tree-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.tree-toolbar-hint { margin: 0; }

/* The viewport clips and scrolls; the canvas inside it is the thing that
   scales, so a fully expanded hierarchy can be read whole. */
.tree-viewport {
  position: relative;
  overflow: auto;
  max-height: 74vh;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f7f9fc);
  cursor: grab;
  overscroll-behavior: contain;
}
.tree-viewport.is-dragging { cursor: grabbing; user-select: none; }
.tree-viewport:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.tree-canvas {
  position: relative;
  display: grid;
  gap: var(--space-4);
  width: max-content;
  min-width: 100%;
  transform-origin: top left;
}

.tree-zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
}
.tree-zoom-level {
  min-width: 44px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.tree-focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-text);
  cursor: pointer;
}
.tree-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.tree-link {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.5;
  opacity: 0.35;
}
.tree-link.type--primary-policy { stroke: var(--type-primary-policy); }
.tree-link.type--supporting-policy { stroke: var(--type-supporting-policy); }
.tree-link.type--manual { stroke: var(--type-manual); }
.tree-link.type--program { stroke: var(--type-program); }
.tree-link.type--procedure { stroke: var(--type-procedure); }
.tree-link.type--sop { stroke: var(--type-sop); }
.tree-link.type--form { stroke: var(--type-form); }
.tree-link.type--tool { stroke: var(--type-tool); }
.tree-link.type--register { stroke: var(--type-register); }
.tree-link.type--guideline { stroke: var(--type-guideline); }
.tree-link.type--alert { stroke: var(--type-alert); }
.tree-link.type--swms { stroke: var(--type-swms); }

/* With a card selected, its own branch stays legible and the rest recedes. */
.tree-canvas.has-selection .tree-link { opacity: 0.12; }
.tree-canvas.has-selection .tree-link.is-active { opacity: 1; stroke-width: 2.25; }

/* Lanes sit above the connector layer; they carry no box of their own so the
   connectors read as one continuous canvas behind the cards. */
.tree-lane {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.tree-lane-rail {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: none;
  width: 124px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
}
.tree-lane-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tree-lane-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}
.tree-lane-body {
  flex: 1 1 auto;
  min-height: 40px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: flex-start;
  gap: var(--space-2);
}
.tree-lane-empty {
  margin: 0;
  align-self: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Cards: filled with the document type colour, as in the sandbox tree. */
.tree-node {
  --node-color: var(--color-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 150px;
  text-align: left;
  border: 1px solid var(--node-color);
  border-radius: var(--radius-md);
  background: var(--node-color);
  color: #fff;
  padding: 5px 7px;
  font: inherit;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.tree-node:hover, .tree-node:focus-visible {
  box-shadow: var(--shadow-md, 0 2px 8px rgba(16, 42, 67, 0.22));
  transform: translateY(-1px);
}
.tree-node.is-selected {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}
.tree-node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
}
.tree-node-id {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
}
.tree-node-toggle {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0 5px;
}
.tree-node-title {
  font-size: 11px;
  line-height: 1.25;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
.tree-node-detail {
  align-self: flex-end;
  margin-top: 2px;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm, 4px);
  padding: 0 6px;
  cursor: pointer;
}
.tree-node-detail:hover, .tree-node-detail:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  border-color: #fff;
}
.tree-node.type--primary-policy { --node-color: var(--type-primary-policy); }
.tree-node.type--supporting-policy { --node-color: var(--type-supporting-policy); }
.tree-node.type--manual { --node-color: var(--type-manual); }
.tree-node.type--program { --node-color: var(--type-program); }
.tree-node.type--procedure { --node-color: var(--type-procedure); }
.tree-node.type--sop { --node-color: var(--type-sop); }
.tree-node.type--form { --node-color: var(--type-form); }
.tree-node.type--tool { --node-color: var(--type-tool); }
.tree-node.type--register { --node-color: var(--type-register); }
.tree-node.type--guideline { --node-color: var(--type-guideline); }
.tree-node.type--alert { --node-color: var(--type-alert); }
.tree-node.type--swms { --node-color: var(--type-swms); }

/* Placeholders keep the type colour but read as an outline, not a filled card. */
.tree-node.status--placeholder {
  background: #fff;
  border-style: dashed;
  border-left: 4px solid var(--node-color);
  color: var(--color-text);
}
.tree-node.status--placeholder .tree-node-id { color: var(--node-color); }
.tree-node.status--placeholder .tree-node-title { color: var(--color-text-muted); }
.tree-node.status--placeholder .tree-node-toggle {
  color: var(--node-color);
  background: rgba(16, 42, 67, 0.08);
}
.tree-node.status--placeholder .tree-node-detail {
  color: var(--color-primary);
  background: none;
  border-color: var(--color-border);
}
.tree-node.status--placeholder .tree-node-detail:hover,
.tree-node.status--placeholder .tree-node-detail:focus-visible {
  background: rgba(23, 92, 148, 0.08);
  border-color: var(--color-primary);
}
.tree-node.status--superseded, .tree-node.status--obsolete { opacity: 0.55; }
.tree-node.is-dim { opacity: 0.45; }
@media (max-width: 720px) {
  .tree-lane { flex-direction: column; gap: var(--space-2); }
  .tree-lane-rail { position: static; width: 100%; flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .tree-lane-body { flex-wrap: wrap; }
  .tree-node { width: 132px; }
  .tree-viewport { max-height: none; padding: var(--space-1, 4px); }
  .tree-toolbar { gap: var(--space-2); }
}

/* Register photo links */
.photo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.photo-link {
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  transition: background var(--transition);
}
.photo-link:hover, .photo-link:focus-visible {
  background: rgba(242, 247, 252, 1);
  text-decoration: underline;
}
.photo-link[disabled] { opacity: 0.6; cursor: default; }

/* Document detail modal */
.doc-detail-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.doc-detail-title {
  font-size: var(--text-lg, 18px);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.doc-detail-title .mono { color: var(--color-primary); font-size: 14px; }
.doc-detail-subhead {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin: var(--space-5) 0 var(--space-3);
}
.doc-detail-children {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.child-chip {
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: 6px;
  background: #fff;
  padding: 4px 10px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.child-chip:hover { background: var(--color-surface); }
.child-chip.is-placeholder { border-style: dashed; border-left-style: solid; color: var(--color-text-muted); }
.child-chip.type--primary-policy { border-left-color: var(--type-primary-policy); }
.child-chip.type--supporting-policy { border-left-color: var(--type-supporting-policy); }
.child-chip.type--manual { border-left-color: var(--type-manual); }
.child-chip.type--program { border-left-color: var(--type-program); }
.child-chip.type--procedure { border-left-color: var(--type-procedure); }
.child-chip.type--sop { border-left-color: var(--type-sop); }
.child-chip.type--form { border-left-color: var(--type-form); }
.child-chip.type--tool { border-left-color: var(--type-tool); }
.child-chip.type--register { border-left-color: var(--type-register); }
.child-chip.type--guideline { border-left-color: var(--type-guideline); }
.child-chip.type--alert { border-left-color: var(--type-alert); }
.child-chip.type--swms { border-left-color: var(--type-swms); }

.link-btn {
  font: inherit;
  font-size: inherit;
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

/* Lists inside cards (incident placeholder, notes) */
.doc-notes-list {
  margin: var(--space-3) 0 0;
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--color-text);
  display: grid;
  gap: var(--space-2);
}

/* Tools table rows that open a portal module */
tr.is-linked { cursor: pointer; }
tr.is-linked:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.side-nav a.is-active .side-nav-badge,
.side-nav-link.is-active .side-nav-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 720px) {
  .tree-node { width: 124px; }
  .side-nav-badge { display: none; }
}

/* =========================================================
   VIEW-AS (admin and above)
   ========================================================= */
.view-as {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
}
.view-as-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.view-as-select {
  font: inherit;
  font-size: var(--text-sm);
  padding: 4px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.view-as-banner {
  background: var(--color-primary);
  color: #ffffff;
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.view-as-banner strong { font-weight: var(--weight-bold); }
.view-as-exit {
  margin-left: var(--space-3);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
.view-as-exit:hover { background: rgba(255, 255, 255, 0.15); }
@media (max-width: 720px) {
  .view-as-label { display: none; }
}

/* Placeholder upload panel in the document detail modal */
.doc-upload-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(242, 247, 252, 0.6);
}
.doc-upload-panel .form-row:last-of-type { margin-bottom: var(--space-3); }

/* Summary statistics row (acknowledgement register) */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 104px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.stat-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.empty-line {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.data-table .cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------
   Choice cards — the "Report an incident" fork between the
   reporting tool (T-003) and the assessment tool (T-001).
   Two equal columns on desktop, stacked on a phone.
   --------------------------------------------------------- */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (max-width: 860px) {
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
}
.choice-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.choice-card--locked { background: var(--color-surface-2); }
.choice-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  margin: 0 0 var(--space-3);
}
.choice-card-body { margin: 0 0 var(--space-4); }
.choice-card-meta {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.choice-card-meta li { margin-bottom: var(--space-1); }
/* Pushed to the foot of the card so both buttons line up even when the
   two descriptions run to different lengths. */
.choice-card-action { margin: auto 0 0; }
.choice-card-note {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* =========================================================
   Safety alert detail
   The stored alert text is rendered from a narrow markdown
   subset, so the styling here only has to cover headings,
   lists, paragraphs and bold. Measure is held near 70ch:
   an alert is read once, in a hurry, on a phone in a ute.
   ========================================================= */
.alert-detail { max-width: 72ch; }

.alert-body { margin-top: var(--space-4); }
.alert-body > :first-child { margin-top: 0; }
.alert-body p { margin: 0 0 var(--space-3); line-height: 1.6; }
.alert-body h4,
.alert-body h5 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.alert-body ul,
.alert-body ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.alert-body li { margin-bottom: var(--space-2); line-height: 1.6; }
.alert-body li:last-child { margin-bottom: 0; }
.alert-body strong { font-weight: 600; }