/* ============================================================================
   NuGen Safety — design system
   ----------------------------------------------------------------------------
   Tokens taken from the "NuGen Safety Design System" the Stitch project
   actually carries (asset 59d4b41001bf40e29d6499c58c168e1c), so pages built
   here match the ones generated there.

   Plus Jakarta Sans for headings, Inter for body and data.

   Mobile first, laptop second: every page is laid out for a phone, and
   nothing scrolls sideways at any width — the header folds into a menu and
   tables fold into cards (nugen-ui.js decides when).
   ========================================================================== */

/* The design tokens and the self-hosted faces are shared with the course engine. */
@import url('fonts.css');
@import url('tokens.css');
@import url('theme.css');

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

body {
  margin: 0;
  background: var(--ng-canvas);
  color: var(--ng-text-body);
  font-family: var(--ng-sans);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* A hidden thing is hidden, whatever display a class gives it (a grid or flex rule would otherwise win). */
[hidden] { display: none !important; }

/* Digits that sit in columns must line up. */
.ng-num, table td, .ng-stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Type ---------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--ng-display); color: var(--ng-text); margin: 0; text-wrap: balance; }
h1 { font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 16px; font-weight: 600; }

.ng-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ng-text-muted);
}
.ng-muted { color: var(--ng-text-muted); }
/* Read by a screen reader, not seen. */
.ng-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ng-small { font-size: 13px; }
.ng-nowrap { white-space: nowrap; }

/* --- Layout -------------------------------------------------------------- */
.ng-shell { max-width: var(--ng-max); margin: 0 auto; padding: 0 var(--ng-lg); }
.ng-stack { display: flex; flex-direction: column; gap: var(--ng-md); }
.ng-row   { display: flex; align-items: center; gap: var(--ng-sm); flex-wrap: wrap; }
.ng-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ng-md); flex-wrap: wrap; }
.ng-grid  { display: grid; gap: var(--ng-md); }
.ng-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.ng-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.ng-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
/* Grid and flex children may shrink below their content, so a wide child can't push the page sideways. */
.ng-grid > *, .ng-stack > *, .ng-row > *, .ng-between > * { min-width: 0; }

/* --- Cards --------------------------------------------------------------- */
.ng-card {
  background: var(--ng-surface);
  border: 1px solid var(--ng-border);
  border-radius: var(--ng-r-lg);
  padding: var(--ng-lg);
  box-shadow: var(--ng-shadow-1);
}
.ng-card-tight { padding: var(--ng-md); }
.ng-card-flush { padding: 0; overflow: hidden; }

/* Not everything is a card — a plain panel for grouping without the weight. */
.ng-panel {
  background: var(--ng-surface-sunk);
  border-radius: var(--ng-r);
  padding: var(--ng-md);
}

/* --- Stat tiles ----------------------------------------------------------
   A number in a box sits in the middle of it, with its label underneath. */
.ng-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ng-2xs); }
.ng-stat-label { font-size: 12px; font-weight: 500; color: var(--ng-text-muted); }
.ng-stat-value { font-family: var(--ng-display); font-size: 28px; font-weight: 700;
                 letter-spacing: -.02em; color: var(--ng-text); line-height: 1.15; }
.ng-stat-note  { font-size: 12px; color: var(--ng-text-muted); }

/* --- Buttons ------------------------------------------------------------- */
.ng-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ng-xs);
  height: 40px; padding: 0 var(--ng-md);
  font-family: var(--ng-sans); font-size: 14px; font-weight: 500;
  border-radius: var(--ng-r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.ng-btn:hover { transform: translateY(-1px); }
.ng-btn:active { transform: translateY(0) scale(.98); }
/* The main button: hi-vis orange with ink text, on a light page and a dark one alike. */
.ng-btn-primary { background: var(--ng-signal); color: var(--ng-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(255,122,26,.3); }
.ng-btn-primary:hover { background: var(--ng-signal-hover); box-shadow: 0 8px 20px -6px rgba(255,122,26,.6); }
.ng-btn-secondary { background: var(--ng-surface); border-color: var(--ng-border-strong); color: var(--ng-text); }
.ng-btn-secondary:hover { background: var(--ng-surface-sunk); border-color: var(--ng-primary); box-shadow: var(--ng-shadow-2); }
.ng-btn-ghost { background: transparent; color: var(--ng-text-muted); }
.ng-btn-ghost:hover { background: var(--ng-surface-sunk); color: var(--ng-text); transform: none; }
.ng-btn-block { width: 100%; }
/* A button that cannot be pressed yet looks that way. */
.ng-btn:disabled, .ng-btn:disabled:hover { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.ng-btn-primary:disabled:hover { background: var(--ng-signal); }
.ng-btn-secondary:disabled:hover { background: var(--ng-surface); border-color: var(--ng-border-strong); }
/* The main button of a window that cannot be taken back: red, and never the orange of a button that is only the next step. */
.ng-btn-danger { background: var(--ng-bad-tint); border-color: var(--ng-bad-border); color: var(--ng-bad-text); font-weight: 600; }
.ng-btn-danger:hover { border-color: var(--ng-bad); box-shadow: var(--ng-shadow-2); }
/* The site's own confirmation and question windows (shared/nugen-dialog.js), in place of the browser's. */
.ng-dlg { width: min(480px, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--ng-border); border-top: 4px solid var(--ng-primary); border-radius: var(--ng-r-lg); background: var(--ng-surface); color: var(--ng-text-body); box-shadow: var(--ng-shadow-3); }
.ng-dlg.danger { border-top-color: var(--ng-bad); }
.ng-dlg::backdrop { background: rgba(11, 18, 32, .55); }
.ng-dlg-body { display: grid; gap: var(--ng-sm); padding: var(--ng-lg); }
.ng-dlg-body h2 { margin: 0; font-size: 20px; line-height: 1.25; color: var(--ng-text); }
.ng-dlg-msg p { margin: 0 0 var(--ng-xs); line-height: 1.55; overflow-wrap: anywhere; }
.ng-dlg-msg p:last-child { margin-bottom: 0; }
.ng-dlg-body .ng-field { margin: var(--ng-2xs) 0 0; }
.ng-dlg-err { min-height: 0; color: var(--ng-bad-text); font-size: 14px; }
.ng-dlg-err:empty { display: none; }
.ng-dlg-acts { display: flex; flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; gap: var(--ng-xs); margin-top: var(--ng-xs); }
@media (max-width: 420px) { .ng-dlg-acts { flex-direction: column-reverse; } .ng-dlg-acts .ng-btn { width: 100%; } }
/* An arrow inside a button or link nudges forward when it is pointed at. */
.ng-arr { display: inline-block; transition: transform .18s; }
a:hover > .ng-arr, .ng-btn:hover > .ng-arr, .ng-go:hover .ng-arr { transform: translateX(4px); }
.ng-btn:focus-visible, .ng-input:focus-visible, a:focus-visible {
  outline: 2px solid var(--ng-primary); outline-offset: 2px;
}

/* --- Forms --------------------------------------------------------------- */
.ng-field { display: flex; flex-direction: column; gap: var(--ng-2xs); min-width: 0; }
.ng-label { font-size: 13px; font-weight: 500; color: var(--ng-text-body); }
.ng-input, .ng-select {
  height: 40px; width: 100%; max-width: 100%; padding: 0 var(--ng-sm);
  background: var(--ng-surface); color: var(--ng-text);
  border: 1px solid var(--ng-border-strong); border-radius: var(--ng-r);
  font-family: var(--ng-sans); font-size: 14px;
}
.ng-input::placeholder { color: var(--ng-text-faint); }
.ng-input:focus, .ng-select:focus {
  outline: none; border-color: var(--ng-primary);
  box-shadow: 0 0 0 3px rgba(234,88,12,.15);
}
.ng-hint { font-size: 12px; color: var(--ng-text-muted); }
.ng-check { display: flex; align-items: flex-start; gap: var(--ng-xs); font-size: 13px; }
.ng-check input { margin-top: 3px; accent-color: var(--ng-primary); }

/* --- File chooser (shared/nugen-files.js fileField, 8 October 2026) ------------------------------------
   One look for every place a file is chosen. The real input is hidden to the eye but still takes focus (Tab, then
   Enter or Space opens the chooser); the button is the secondary button and shows the focus ring; the name and size of
   what was chosen sit beside it in muted ink. Colours are tokens only, so the dark theme needs nothing of its own. */
.ng-file { display: grid; gap: var(--ng-2xs); min-width: 0; }
.ng-file-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ng-xs) var(--ng-sm); min-width: 0; }
.ng-file-btn { position: relative; }
.ng-file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; border: 0; }
.ng-file-btn:has(.ng-file-input:focus-visible) { outline: 2px solid var(--ng-focus); outline-offset: 2px; }
.ng-file-btn:has(.ng-file-input:disabled), .ng-file-btn:has(.ng-file-input:disabled):hover { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; background: var(--ng-surface); border-color: var(--ng-border-strong); }
.ng-file-name { min-width: 0; font-size: 13px; color: var(--ng-text-muted); overflow-wrap: anywhere; }
.ng-file .ng-hint { display: block; }

/* --- "What's this page?" (shared/nugen-help.js, 8 October 2026) ----------------------------------------
   The explanation under a page's heading is hidden until this is pressed. */
.ng-help-toggle { display: inline-block; margin: var(--ng-2xs) 0 0; font-size: 13px; color: var(--ng-primary-ink); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.ng-help-toggle:hover { text-decoration-style: solid; }
.ng-help-toggle:focus-visible { outline: 2px solid var(--ng-focus); outline-offset: 2px; border-radius: var(--ng-r-sm); }
.ng-help-toggle[aria-expanded="true"] { color: var(--ng-text-muted); }
@media print { .ng-help-toggle { display: none; } }

/* --- Help: the button in the header, and the panel it opens (shared/nugen-help.js, 9 October 2026) --------------------
   One quiet "?" button beside the theme switch, the same weight as it, on every page with the shared header. It opens a panel
   that is not a modal: the page stays usable. Laptop (1200 px and wider): 360 px on the right and the page narrows to make room.
   720 to 1199 px: over the right edge. Under 720 px: a sheet from the bottom, at most 60% of the height. A tablet's panel starts as a
   56 px bar after a page change, with "Open" ("Smaller" was taken away, 28 October 2026). The classes that say which are on <html>, set by the script. Colours are tokens only, so the dark theme needs nothing
   of its own. Nothing moves except inside prefers-reduced-motion: no-preference. */
.ng-help-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ng-help-btn { position: relative; flex: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--ng-ink-line); border-radius: 50%; background: transparent; color: var(--ng-on-ink-muted); cursor: pointer; }
.ng-help-btn::after { content: ''; position: absolute; inset: -4px; }   /* a 44 px target round a 36 px button */
.ng-help-btn:hover { color: var(--ng-hivis); border-color: var(--ng-hivis); }
.ng-help-btn[aria-expanded="true"] { color: var(--ng-on-ink); border-color: var(--ng-on-ink-muted); }
.ng-help-btn:focus-visible { outline: 2px solid var(--ng-hivis); outline-offset: 2px; }
.ng-help-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* On the narrowest phones the logo, Help, the cert or sun/moon button and Menu share 288 px: Menu keeps its three bars and its word for a screen reader, but not the word on the screen. */
@media (max-width: 400px) {
  .ng-help-btn { width: 34px; height: 34px; }
  .ng-header .ng-menu-btn { position: relative; }
  .ng-header .ng-menu-btn .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.ng-help-panel { position: fixed; z-index: 9100; display: flex; flex-direction: column; min-height: 0; background: var(--ng-surface); color: var(--ng-text-body);
  border: 1px solid var(--ng-border-strong); box-shadow: var(--ng-shadow-3); font-size: 14px; line-height: 1.5; }
/* The bar is the site header's: ink ground, the display face at the logo's weight, the light buttons of the header (.ng-theme) */
.ng-help-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ng-xs); min-height: 56px;
  padding: var(--ng-2xs) var(--ng-xs) var(--ng-2xs) var(--ng-md); background: var(--ng-ink); color: var(--ng-on-ink); border-bottom: 1px solid var(--ng-ink-line);
  border-radius: inherit; }
.ng-help-title { margin: 0; min-width: 0; font-family: var(--ng-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ng-on-ink); overflow-wrap: anywhere; }
.ng-help-title:focus-visible { outline: 2px solid var(--ng-hivis); outline-offset: 2px; border-radius: var(--ng-r-sm); }
.ng-help-bar .ng-btn-ghost { border-color: var(--ng-ink-line); background: transparent; color: var(--ng-on-ink-muted); }
.ng-help-bar .ng-btn-ghost:hover { background: var(--ng-ink-2); border-color: var(--ng-hivis); color: var(--ng-hivis); }
.ng-help-bar .ng-btn-ghost:focus-visible { outline: 2px solid var(--ng-hivis); outline-offset: 2px; }
.ng-help-tools { flex: none; display: flex; gap: var(--ng-2xs); }
.ng-help-panel .ng-btn { min-height: 44px; }
.ng-help-fold { padding: 0 var(--ng-sm); font-size: 13px; }
.ng-help-close { min-width: 44px; padding: 0 var(--ng-xs); font-size: 22px; line-height: 1; }
.ng-help-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--ng-md); padding: var(--ng-md); }
.ng-help-sec h3 { margin: 0 0 var(--ng-xs); font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--ng-text); }
.ng-help-sec h3::after { content: ''; display: block; width: 32px; height: 3px; margin-top: var(--ng-2xs); border-radius: 3px; background: var(--ng-signal); }
.ng-help-sec p { margin: 0; overflow-wrap: anywhere; }
.ng-help-muted { color: var(--ng-text-muted); }
/* a task is a card like the front page's "I need a cert": surface, light border, an orange top edge */
.ng-help-task { margin-top: var(--ng-xs); border: 1px solid var(--ng-border); border-top: 4px solid var(--ng-signal); border-radius: var(--ng-r-lg); background: var(--ng-surface); box-shadow: var(--ng-shadow-1); overflow: hidden; }
.ng-help-task h4 { margin: 0; font-size: 14px; }
.ng-help-task-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--ng-xs); width: 100%; min-height: 44px; padding: var(--ng-xs) var(--ng-sm);
  border: 0; border-radius: var(--ng-r); background: none; color: var(--ng-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ng-help-task-btn::after { content: '+'; flex: none; color: var(--ng-primary-ink); font-size: 18px; font-weight: 600; }
.ng-help-task-btn[aria-expanded="true"]::after { content: '−'; }
.ng-help-task-btn:hover { background: var(--ng-surface-sunk); }
.ng-help-task-btn:focus-visible { outline: 2px solid var(--ng-focus); outline-offset: -2px; }
/* steps are numbered with the site's orange chip (the avatar's initials colours) */
.ng-help-steps { display: grid; gap: var(--ng-sm); margin: 0; padding: 0 var(--ng-sm) var(--ng-sm); list-style: none; counter-reset: ng-help-step; }
.ng-help-step { position: relative; padding-left: 32px; counter-increment: ng-help-step; }
.ng-help-step::before { content: counter(ng-help-step); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ng-primary-tint); color: var(--ng-primary-ink); border: 1px solid var(--ng-primary-border); font-family: var(--ng-display); font-size: 12px; font-weight: 700; }
.ng-help-steps[hidden], .ng-help-show[hidden] { display: none; }
.ng-help-words { overflow-wrap: anywhere; }
.ng-help-show { display: flex; margin-top: var(--ng-2xs); }
.ng-help-ask:empty, .ng-help-answer:empty, .ng-help-ticket-slot:empty { display: none; }   /* a visitor has no Ask box; no answer yet; the message form is shut */
.ng-help-ask-row { display: flex; gap: var(--ng-xs); }
.ng-help-ask-row .ng-input { flex: 1 1 0; min-width: 0; }
.ng-help-panel .ng-input { min-height: 44px; }
.ng-help-panel textarea.ng-input { height: auto; min-height: 96px; padding: var(--ng-xs) var(--ng-sm); font-family: var(--ng-sans); resize: vertical; }
.ng-help-answer { margin-top: var(--ng-sm); display: grid; gap: var(--ng-xs); }
.ng-help-answer .ng-help-steps { padding: 0; }
.ng-help-go { display: flex; width: fit-content; align-items: center; min-height: 44px; margin-top: var(--ng-2xs); font-size: 13px; }
.ng-help-note { margin: 0; }
.ng-help-source { margin: 0; }
.ng-help-error { margin: 0; font-size: 13px; color: var(--ng-bad-text); overflow-wrap: anywhere; }
.ng-help-sent { margin: 0; }
.ng-help-ticket { display: grid; gap: var(--ng-sm); margin-top: var(--ng-xs); }
.ng-help-ticket .ng-hint { margin: 0; overflow-wrap: anywhere; }
.ng-help-person { display: grid; justify-items: start; gap: var(--ng-xs); padding-top: var(--ng-sm); border-top: 1px solid var(--ng-border-soft); font-size: 13px; }
.ng-help-person > * { max-width: 100%; min-width: 0; }
.ng-help-ticket-slot { width: 100%; }
.ng-help-contact { margin: 0; }

html.ng-help-push .ng-help-panel, html.ng-help-over .ng-help-panel { top: 0; right: 0; bottom: 0; width: 360px; border-width: 0 0 0 1px; }
html.ng-help-over .ng-help-panel { width: min(360px, 100vw); }
html.ng-help-sheet .ng-help-panel { left: 0; right: 0; bottom: 0; max-height: 60vh; max-height: 60dvh; border-width: 1px 0 0; border-radius: var(--ng-r-lg) var(--ng-r-lg) 0 0; }
/* folded to a bar */
html.ng-help-small .ng-help-panel { height: 56px; max-height: 56px; }
html.ng-help-small .ng-help-body { display: none; }
html.ng-help-small .ng-help-bar { border-bottom: 0; }
html.ng-help-small .ng-help-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ng-help-push.ng-help-small .ng-help-panel, html.ng-help-over.ng-help-small .ng-help-panel { top: auto; bottom: var(--ng-md); right: var(--ng-md); width: min(360px, calc(100vw - 2 * var(--ng-md))); border-width: 1px; border-radius: var(--ng-r-lg); }
/* room for it: beside the page on a laptop, below it on a phone */
html.ng-help-push.ng-help-open:not(.ng-help-small) body { margin-right: 360px; }
html.ng-help-sheet.ng-help-open body { padding-bottom: calc(var(--ng-help-space, 60dvh) + var(--ng-md)); }
html.ng-help-sheet.ng-help-small body { padding-bottom: calc(56px + var(--ng-md)); }
/* staff's "Suggest a change" button moves left of the panel, or above the bar */
html.ng-help-push:not(.ng-help-small), html.ng-help-over:not(.ng-help-small) { --ng-help-right: 360px; }
html.ng-help-push.ng-help-small, html.ng-help-over.ng-help-small { --ng-help-bottom: calc(56px + var(--ng-md)); }
html.ng-help-sheet:not(.ng-help-small) { --ng-help-bottom: var(--ng-help-space, 60dvh); }
html.ng-help-sheet.ng-help-small { --ng-help-bottom: 56px; }
html.ng-help-open .ngr-launcher { right: calc(var(--ng-help-right, 0px) + var(--ng-md)); bottom: calc(var(--ng-help-bottom, 0px) + var(--ng-md)); }
/* what "Show me" points at */
.ng-help-target { outline: 3px solid var(--ng-focus); outline-offset: 3px; scroll-margin-top: 140px; }
html.ng-help-sheet:not(.ng-help-small) .ng-help-target { scroll-margin-bottom: calc(var(--ng-help-space, 60dvh) + var(--ng-lg)); }
@media (prefers-reduced-motion: no-preference) {
  .ng-help-target { animation: ng-help-pulse .9s ease-out 2; }
  @keyframes ng-help-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ng-focus) 55%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
}
@media print {
  .ng-help-panel, .ng-help-btn { display: none !important; }
  html.ng-help-push.ng-help-open body { margin-right: 0 !important; }
  html.ng-help-sheet.ng-help-open body { padding-bottom: 0 !important; }
  .ng-help-target { outline: none; animation: none; }
}

/* --- Multi-select: a dropdown to choose several from, with a chip for each (shared/nugen-multiselect.js) -------------------------------------------------------------------
   The list opens under the box and is as wide as it, so it never makes a phone scroll sideways; every row is at least 40px tall to touch. */
.ng-ms { position: relative; display: grid; gap: var(--ng-xs); min-width: 0; max-width: 560px; }
.ng-ms-chips { display: flex; flex-wrap: wrap; gap: var(--ng-2xs) var(--ng-xs); min-width: 0; }
.ng-ms-chip { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; border: 1px solid var(--ng-border-strong); background: var(--ng-surface-sunk); border-radius: var(--ng-r-pill); font-size: 13px; color: var(--ng-text-body); }
.ng-ms-chip-text { min-width: 0; padding: 2px var(--ng-2xs) 2px var(--ng-sm); overflow-wrap: anywhere; }
.ng-ms-chip small { color: var(--ng-text-muted); font-size: 11.5px; }
.ng-ms-x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ng-r-pill); background: transparent; color: var(--ng-text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.ng-ms-x:hover, .ng-ms-x:focus-visible { background: var(--ng-sunken); color: var(--ng-text); }
.ng-ms-none { font-size: 13px; color: var(--ng-text-muted); }
.ng-ms-field { position: relative; display: flex; min-width: 0; }
.ng-ms-input { padding-right: 40px; }
.ng-ms-toggle { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--ng-text-muted); font-size: 14px; cursor: pointer; }
.ng-ms-list { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: var(--ng-2xs) 0 0; padding: var(--ng-2xs); list-style: none; background: var(--ng-surface); border: 1px solid var(--ng-border-strong); border-radius: var(--ng-r); box-shadow: var(--ng-shadow-2); }
.ng-ms-opt { display: flex; align-items: center; gap: var(--ng-xs); min-height: 40px; padding: var(--ng-2xs) var(--ng-xs); border-radius: var(--ng-r-sm); font-size: 14px; color: var(--ng-text-body); cursor: pointer; overflow-wrap: anywhere; }
.ng-ms-opt:hover, .ng-ms-opt.active { background: var(--ng-surface-sunk); }
.ng-ms-opt.active { outline: 2px solid var(--ng-primary); outline-offset: -2px; }
.ng-ms-box { position: relative; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--ng-border-strong); border-radius: var(--ng-r-sm); background: var(--ng-surface); }
.ng-ms-opt.on .ng-ms-box { background: var(--ng-primary); border-color: var(--ng-primary); }
.ng-ms-opt.on .ng-ms-box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--ng-on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ng-ms-text small { color: var(--ng-text-muted); font-size: 12px; }
.ng-ms-group { padding: var(--ng-xs) var(--ng-xs) var(--ng-2xs); font-size: 12px; font-weight: 600; color: var(--ng-text-muted); }
.ng-ms-note { padding: var(--ng-xs); font-size: 12.5px; color: var(--ng-text-muted); }

/* --- Course box: type to find a course, the list under it, click one (shared/nugen-pick.js, 14 October 2026) ---------------------------------------------------------------------
   Takes the place of a <select> of courses (which stays on the page, hidden, as the value the page reads). The list is under the box and no wider than it, so it never makes a phone scroll
   sideways; a row is 44px tall on a phone. The input's rule is as specific as a page's own `.row .ng-input` so a page cannot shrink it. */
.ng-pick-host { min-width: 0; max-width: 100%; }
.ng-pick { position: relative; min-width: 0; max-width: 100%; }
.ng-pick .ng-pick-input.ng-input { width: 100%; flex: none; padding-right: 40px; }
.ng-pick-toggle { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--ng-text-muted); font-size: 14px; cursor: pointer; }
.ng-pick-list { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-width: 100%; max-height: 280px; overflow-y: auto; margin: var(--ng-2xs) 0 0; padding: var(--ng-2xs); list-style: none; background: var(--ng-surface); border: 1px solid var(--ng-border-strong); border-radius: var(--ng-r); box-shadow: var(--ng-shadow-2); }
.ng-pick-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--ng-xs); min-height: 40px; padding: var(--ng-2xs) var(--ng-xs); border-radius: var(--ng-r-sm); font-size: 14px; color: var(--ng-text-body); cursor: pointer; overflow-wrap: anywhere; }
.ng-pick-opt:hover, .ng-pick-opt.active { background: var(--ng-surface-sunk); }
.ng-pick-opt.active { outline: 2px solid var(--ng-primary); outline-offset: -2px; }
.ng-pick-opt.on { font-weight: 600; color: var(--ng-text); }
.ng-pick-opt.on::after { content: '✓'; flex: none; color: var(--ng-primary-ink); }
.ng-pick-opt.none { color: var(--ng-text-muted); border-bottom: 1px solid var(--ng-border-soft); border-radius: var(--ng-r-sm) var(--ng-r-sm) 0 0; margin-bottom: var(--ng-2xs); }
.ng-pick-note { padding: var(--ng-xs); font-size: 12.5px; color: var(--ng-text-muted); }
@media (max-width: 720px) { .ng-pick-opt { min-height: 44px; } }

/* --- Badges -------------------------------------------------------------- */
.ng-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 var(--ng-xs);
  border-radius: var(--ng-r-pill); border: 1px solid transparent;
  font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.ng-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ng-badge-plain::before { display: none; }
.ng-badge-ok   { color: var(--ng-ok-text);   background: var(--ng-ok-tint);   border-color: var(--ng-ok-border); }
.ng-badge-warn { color: var(--ng-warn-text); background: var(--ng-warn-tint); border-color: var(--ng-warn-border); }
.ng-badge-bad  { color: var(--ng-bad-text);  background: var(--ng-bad-tint);  border-color: var(--ng-bad-border); }
.ng-badge-neutral { color: var(--ng-text-body); background: var(--ng-surface-sunk); border-color: var(--ng-border); }
.ng-badge-info { color: var(--ng-blue-ink); background: color-mix(in srgb, var(--ng-blue-ink) 9%, var(--ng-surface)); border-color: color-mix(in srgb, var(--ng-blue-ink) 35%, var(--ng-surface)); }   /* someone is on it: blue says where something is, never how it is going */

/* People waiting to be let into a company (shared/nugen-people.js joinPanelHtml): on the crew, roles and dashboard pages. */
.joins { margin-top: var(--ng-md); }
.joins h2 { font-size: 18px; margin: 0 0 2px; }
.join { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--ng-md); align-items: start; margin-bottom: var(--ng-xs); }
.join-who { overflow-wrap: anywhere; }
.join-msg { margin: var(--ng-xs) 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.join-do { display: grid; gap: var(--ng-xs); }
.join-why { display: grid; gap: var(--ng-xs); }
.join-why[hidden] { display: none; }
@media (max-width: 640px) { .join { grid-template-columns: minmax(0, 1fr); } }

/* A person's picture, or their initials when there is none (shared/nugen-people.js). Sized inline. */
.ng-avatar { display: inline-block; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--ng-border); vertical-align: middle; }
.ng-avatar-initials { display: inline-flex; align-items: center; justify-content: center; font-family: var(--ng-display); font-weight: 700;
  color: var(--ng-primary-ink); background: var(--ng-primary-tint); border-color: var(--ng-primary-border); letter-spacing: .02em; }

/* --- Tables -------------------------------------------------------------- */
.ng-tablewrap { overflow-x: auto; border: 1px solid var(--ng-border);
                border-radius: var(--ng-r-lg); background: var(--ng-surface); }
.ng-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ng-table th {
  text-align: left; padding: var(--ng-xs) var(--ng-sm);
  background: var(--ng-canvas); color: var(--ng-text-muted);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--ng-border); white-space: nowrap;
}
.ng-table td { padding: var(--ng-sm); border-bottom: 1px solid var(--ng-border-soft); vertical-align: middle; }
.ng-table tbody tr:hover { background: var(--ng-canvas); }
.ng-table tbody tr:last-child td { border-bottom: none; }
.ng-table .ng-right { text-align: right; }
/* Sortable headers (nugen-sort.js): the header is a button; the arrow is drawn from aria-sort so the header's own words stay the cell labels. */
.ng-table th .ng-sort { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: inherit; }
.ng-table th .ng-sort:hover { color: var(--ng-text); }
.ng-table th .ng-sort:focus-visible { outline: 2px solid var(--ng-focus, currentColor); outline-offset: 2px; }
.ng-table th[aria-sort] .ng-sort { color: var(--ng-text); }
.ng-table th[aria-sort="ascending"] .ng-sort::after { content: ' \25B2'; font-size: .8em; }
.ng-table th[aria-sort="descending"] .ng-sort::after { content: ' \25BC'; font-size: .8em; }
/* A number column lines up on the right, header and values alike. */
table th.n, table td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* On a phone, number tiles sit two to a row, and an odd last tile takes the whole row. */
@media (max-width: 505px) {
  .ng-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-page .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Tables fold into cards. nugen-ui.js labels every cell with its column header,
   and adds .ng-cards on a phone or whenever a table would not fit its space, so
   a table never scrolls sideways. Screen only: printed documents stay tables. */
@media screen {
  .ng-tablewrap.ng-tablewrap-cards { border: 0; border-radius: 0; background: none; overflow: visible; }
  table.ng-table.ng-cards, table.ng-table.ng-cards > tbody, table.ng-table.ng-cards > tfoot { display: block; width: 100%; }
  table.ng-table.ng-cards > thead { display: none; }
  table.ng-table.ng-cards tr {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--ng-xs) var(--ng-md);
    background: var(--ng-surface); border: 1px solid var(--ng-border); border-radius: var(--ng-r-lg);
    box-shadow: var(--ng-shadow-1); padding: var(--ng-sm) var(--ng-md); margin-bottom: var(--ng-xs);
  }
  table.ng-table.ng-cards td, table.ng-table.ng-cards th {
    display: block !important; padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; max-width: none;
    position: static !important; text-align: left !important; white-space: normal !important;
    font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--ng-text-body);
  }
  table.ng-table.ng-cards td::before, table.ng-table.ng-cards th::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ng-text-muted);
  }
  table.ng-table.ng-cards tr > :first-child { grid-column: 1 / -1; font-size: 14px; color: var(--ng-text); }
  table.ng-table.ng-cards tr > :first-child::before,
  table.ng-table.ng-cards [data-label=""]::before,
  table.ng-table.ng-cards [colspan]::before { content: none; }
  table.ng-table.ng-cards [colspan] { grid-column: 1 / -1; }
  /* A cell with a control in it gets the card's full width, so the control isn't cut short. */
  table.ng-table.ng-cards td:has(select, textarea, form) { grid-column: 1 / -1; }
  table.ng-table.ng-cards .ng-cell-empty { display: none !important; }
  table.ng-table.ng-cards tbody tr:hover { background: var(--ng-surface); }
}

/* --- Viewing band ----------------------------------------------------------
   The old dark staff bar is gone (27 October 2026). This thin line shows only while a NuGen staff member is looking at the site as someone else
   or as the public, and says so, with the way back. One line: the name shortens with an ellipsis and the button never drops under it. */
.ng-viewing { background: var(--ng-warn-tint); color: var(--ng-warn-text); border-bottom: 1px solid var(--ng-warn-border); font-size: 13px; }
.ng-viewing-inner { display: flex; align-items: center; gap: var(--ng-sm); min-height: 38px; }
.ng-viewing-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-viewing-back {
  flex: none; height: 30px; padding: 0 var(--ng-sm); border: 1px solid currentColor; border-radius: var(--ng-r-sm);
  background: transparent; color: inherit; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.ng-viewing-back:hover { background: var(--ng-warn-border); }
.ng-viewing-back:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- Header -------------------------------------------------------------
   On a phone, and whenever the links would not fit on one line, they fold
   behind a Menu button. The header never scrolls sideways. */
.ng-header {
  background: var(--ng-ink); color: var(--ng-on-ink); border-bottom: 1px solid var(--ng-ink-line);
  position: sticky; top: 0; z-index: 20;
}
.ng-header-inner { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--ng-md); min-height: 64px; }
.ng-logo { display: flex; align-items: center; gap: var(--ng-xs); flex: none;
           font-family: var(--ng-display); font-weight: 700; font-size: 17px;
           color: var(--ng-on-ink); text-decoration: none; letter-spacing: -.01em; }
/* The shield emblem (shared/brand/emblem.png, 19 October 2026): taller than wide, so the height is fixed and the width follows. */
.ng-logo-mark { height: 32px; width: auto; flex: none; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .ng-logo-mark { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
  .ng-logo:hover .ng-logo-mark { transform: scale(1.08); }
}
.ng-logo em { font-style: normal; color: var(--ng-signal); }

/* The site's menu sits beside the logo (28 October 2026, Sam: "to the right of the nugen logo up at top left"); the person's own items (Profile, Sign out, Sign in) and the buttons stay on the right. */
.ng-nav-links { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--ng-2xs); min-width: 0; margin-left: var(--ng-sm); }
.ng-nav-links > .ng-nav-push { margin-left: auto; }
.ng-nav {
  position: relative; padding: 8px 12px; border-radius: var(--ng-r);
  font-size: 14px; font-weight: 500; color: var(--ng-on-ink-muted); text-decoration: none;
  white-space: nowrap; transition: background .15s, color .15s;
}
/* An underline draws in from the left when a link is pointed at, and stays on the current page. */
.ng-nav::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--ng-signal); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.ng-nav:hover { color: var(--ng-on-ink); }
.ng-nav:hover::after, .ng-nav-active::after { transform: scaleX(1); }
.ng-nav-active { color: var(--ng-on-ink); }
/* One link in the bar is a button: the way in (Sign in), or the way back to your certs. */
.ng-nav-cta { background: var(--ng-signal); color: var(--ng-ink); font-weight: 600; margin-left: var(--ng-2xs); }
.ng-nav-cta::after { display: none; }
.ng-nav-cta:hover { background: var(--ng-signal-hover); color: var(--ng-ink); box-shadow: 0 6px 16px -6px rgba(255,122,26,.7); }
.ng-nav-cta.ng-nav-active { box-shadow: inset 0 0 0 2px var(--ng-hivis); }

/* The sun/moon button: shows the mode a tap will switch to. */
.ng-theme {
  flex: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--ng-ink-line); border-radius: 50%; background: transparent; color: var(--ng-on-ink-muted); cursor: pointer;
  transition: color .15s, border-color .15s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.ng-theme:hover { color: var(--ng-hivis); border-color: var(--ng-hivis); transform: rotate(20deg); }
.ng-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ng-theme .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ng-theme .moon { display: none; }
  :root:not([data-theme="light"]) .ng-theme .sun { display: block; }
}
:root[data-theme="dark"] .ng-theme .moon { display: none; }
:root[data-theme="dark"] .ng-theme .sun { display: block; }
/* While the theme changes, everything eases over instead of snapping. */
.ng-theme-fade, .ng-theme-fade *, .ng-theme-fade *::before, .ng-theme-fade *::after {
  transition: background-color .3s, border-color .3s, color .3s, fill .3s, stroke .3s, box-shadow .3s !important;
}

.ng-menu-btn {
  display: none; align-items: center; gap: var(--ng-xs); flex: none;
  height: 40px; padding: 0 var(--ng-sm); border: 1px solid var(--ng-ink-line); border-radius: var(--ng-r);
  background: var(--ng-ink-2); color: var(--ng-on-ink); cursor: pointer;
  font-family: var(--ng-sans); font-size: 14px; font-weight: 500;
}
.ng-menu-btn .bars { position: relative; width: 16px; height: 2px; background: currentColor; }
.ng-menu-btn .bars::before, .ng-menu-btn .bars::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.ng-menu-btn .bars::before { top: -5px; }
.ng-menu-btn .bars::after { top: 5px; }
.ng-header.is-collapsed .ng-menu-btn { display: inline-flex; order: -1; }   /* the very left, before the logo */
.ng-header.is-collapsed .ng-nav-links { display: none; }
.ng-header.is-collapsed.is-open .ng-nav-links {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px;
  position: absolute; left: 0; top: 100%;
  /* A dropdown under the Menu button, which is at the far left (28 October 2026, Sam): only as wide as its words, never the whole screen. */
  width: max-content; min-width: min(260px, 100vw); max-width: min(340px, 100vw);
  padding: var(--ng-xs) var(--ng-md) var(--ng-md);
  background: var(--ng-ink-2); border: 1px solid var(--ng-ink-line); border-top: 0; border-radius: 0 0 var(--ng-r) 0; box-shadow: 0 24px 40px -12px rgba(0,0,0,.5);
  animation: ng-drop .18s ease-out;
}
.ng-header.is-collapsed.is-open .ng-nav { padding: 13px var(--ng-sm); font-size: 16px; white-space: normal; }
.ng-header.is-collapsed.is-open .ng-nav-cta { margin: var(--ng-2xs) 0 0; text-align: center; }
.ng-header.is-collapsed .ng-nav-links { margin-left: 0; }
.ng-header.is-collapsed .ng-nav-links > .ng-nav-push { margin-left: 0; }
.ng-header.is-collapsed .ng-header-inner { justify-content: flex-start; }
.ng-header.is-collapsed .ng-logo { margin-right: auto; }
@keyframes ng-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* The profile menu (staff only, 27 October 2026): My profile, View as, Staff tools. A panel under the Profile button; on a phone it opens in place under
   Profile inside the open Menu, full width. Colours come from the header's own tokens. */
.ng-profile { position: relative; display: inline-flex; }
.ng-profile-btn { background: none; border: 0; font-family: inherit; cursor: pointer; }
.ng-profile-btn[aria-expanded="true"] { color: var(--ng-on-ink); }
.ng-profile-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 2px;
  min-width: 260px; max-width: min(340px, calc(100vw - 2 * var(--ng-md))); padding: var(--ng-xs);
  background: var(--ng-ink-2); border: 1px solid var(--ng-ink-line); border-radius: var(--ng-r); box-shadow: 0 24px 40px -12px rgba(0,0,0,.5);
}
.ng-profile-menu[hidden] { display: none; }
.ng-pm-group { display: grid; gap: 2px; padding-top: var(--ng-2xs); margin-top: var(--ng-2xs); border-top: 1px solid var(--ng-ink-line); }
.ng-pm-label { padding: var(--ng-2xs) var(--ng-sm) 0; font-size: 12px; font-weight: 600; color: var(--ng-on-ink-muted); }
.ng-pm-item {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--ng-xs); width: 100%; min-height: 40px; padding: 8px var(--ng-sm);
  border: 0; border-radius: var(--ng-r-sm); background: none; color: var(--ng-on-ink-muted);
  font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.ng-pm-item:hover, .ng-pm-item:focus-visible { background: var(--ng-ink); color: var(--ng-on-ink); }
.ng-pm-item:focus-visible { outline: 2px solid var(--ng-hivis); outline-offset: -2px; }
.ng-pm-item .ngr-nav-count { margin-left: auto; }
/* The ticked choice: a check mark before the words, and a space kept in front of the others so the words line up. */
.ng-pm-item[role="menuitemradio"]::before { content: ''; flex: none; width: 5px; height: 10px; margin: 0 5px 3px 3px; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ng-pm-item[aria-checked="true"] { color: var(--ng-on-ink); font-weight: 600; }
.ng-pm-item[aria-checked="true"]::before { border-color: var(--ng-signal); }
/* View as: a dropdown beside Profile, always in view (28 October 2026). */
.ng-viewas { display: inline-flex; align-items: center; gap: var(--ng-2xs); margin-right: var(--ng-xs); color: var(--ng-on-ink-muted); font-size: 13px; }
/* As narrow as the choice shown (field-sizing: content, where the browser has it; elsewhere the longest word sets it), with no wasted padding. */
.ng-viewas-select {
  box-sizing: border-box; width: auto; field-sizing: content; min-height: 32px; max-width: 100%; padding: 2px 4px; border: 1px solid var(--ng-ink-line); border-radius: var(--ng-r-sm);
  background: var(--ng-ink-2); color: var(--ng-on-ink); font: inherit; font-size: 13px; cursor: pointer;
}
.ng-viewas-select:focus-visible { outline: 2px solid var(--ng-hivis); outline-offset: 2px; }
/* A phone override goes after the rule it overrides: in the open Menu the panel is part of the list, not a floating sheet. */
.ng-header.is-collapsed .ng-profile { display: block; }
.ng-header.is-collapsed .ng-viewas { display: flex; margin: 0 0 var(--ng-xs); padding: 0 12px; font-size: 16px; }
.ng-header.is-collapsed .ng-viewas-label { flex: none; }
.ng-header.is-collapsed .ng-viewas-select { flex: none; width: auto; min-width: 0; min-height: 44px; padding: 4px var(--ng-xs); font-size: 16px; }
.ng-header.is-collapsed .ng-profile-btn { width: 100%; text-align: left; }
.ng-header.is-collapsed .ng-profile-menu {
  position: static; min-width: 0; max-width: none; margin: 2px 0 var(--ng-xs); box-shadow: none; background: var(--ng-ink);
}
.ng-header.is-collapsed .ng-pm-item { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
/* Signed in, the cert is one tap away on every page (1 October 2026): it never folds into the menu. */
.ng-mycert {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  border-radius: var(--ng-r); background: var(--ng-signal); color: var(--ng-ink); text-decoration: none;
  font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s, box-shadow .15s;
}
.ng-mycert:hover { background: var(--ng-signal-hover); box-shadow: 0 6px 16px -6px rgba(255,122,26,.7); }
.ng-mycert:focus-visible { outline: 2px solid var(--ng-hivis); outline-offset: 2px; }
.ng-mycert svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* A section's pages, as tabs under the bar (the company area: Team, Certs, Records, Account). They scroll
   sideways inside themselves on a narrow phone rather than pushing the page. */
.ng-subtabs { background: var(--ng-surface); border-bottom: 1px solid var(--ng-border); }
.ng-subtabs-inner { display: flex; gap: var(--ng-md); overflow-x: auto; scrollbar-width: none; }
.ng-subtabs-inner::-webkit-scrollbar { display: none; }
.ng-subtab { flex: none; padding: 12px 2px 10px; border-bottom: 3px solid transparent; color: var(--ng-text-muted);
             font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ng-subtab:hover { color: var(--ng-text); }
.ng-subtab.is-on { color: var(--ng-text); border-bottom-color: var(--ng-primary); }
.ng-subtab:focus-visible { outline: 2px solid var(--ng-primary); outline-offset: -2px; }
/* Four tabs with the System group's labels came to 324 px in a 320 px bar when Insights was added (tools/check-overflow.mjs, 8 October 2026): the gap between tabs narrows on the smallest phones. */
@media (max-width: 340px) { .ng-subtabs-inner { gap: var(--ng-sm); } }
/* Five tabs (the System group, with Expenses, 11 October 2026) are 394 px of tabs in a 320 px bar, and 410 px in a 375 px one: on a phone they wrap onto a second row rather than scroll sideways. A group that fits stays on one row. */
@media (max-width: 420px) { .ng-subtabs-inner { flex-wrap: wrap; column-gap: var(--ng-sm); } }
/* The menu's own light/dark switch: only where the bar has no room for the sun/moon button. */
.ng-nav-theme { display: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
/* On the narrowest phones the logo, Menu and either the sun/moon button or (signed in) the cert button
   share 288px. Signed in, the cert button wins and the light/dark switch moves into the menu. */
@media (max-width: 400px) {
  .ng-header-inner { gap: var(--ng-xs); }
  .ng-menu-btn { padding: 0 var(--ng-xs); }
  .ng-mycert { padding: 0 10px; }
}
/* Signed in, on any phone up to 560 px wide, the bar cannot hold the logo, the cert button with its words, Help, the sun/moon button and Menu:
   at 430 px it was 72 px too wide, so the page scrolled sideways and the Menu button, and the menu with it, sat off the right edge (24 October 2026).
   The cert button shrinks to its icon and the light/dark switch moves into the menu. */
@media (max-width: 560px) {
  .ng-mycert { padding: 0 10px; }
  .ng-mycert .lbl { display: none; }
  .ng-header.has-mycert .ng-theme { display: none; }
  .ng-header.has-mycert .ng-nav-theme { display: block; font-size: 14px; font-weight: 500; }
  .ng-header.is-collapsed.is-open .ng-nav-theme { font-size: 16px; }
  .ng-header-inner { gap: var(--ng-xs); }
  /* A long menu (the staff one) scrolls inside the sheet instead of running off the bottom of a short screen. */
  .ng-header.is-collapsed.is-open .ng-nav-links { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
}

/* --- Segmented control (filters) ------------------------------------------
   Wraps onto a second row rather than running off a narrow screen. */
.ng-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 1px;
          background: var(--ng-border); border: 1px solid var(--ng-border-strong); border-radius: var(--ng-r); overflow: hidden; }
.ng-seg button {
  flex: 1 1 auto; height: 40px; padding: 0 12px; border: 0;
  background: var(--ng-surface); color: var(--ng-text-muted);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.ng-seg button:hover { color: var(--ng-text); background: var(--ng-canvas); }
.ng-seg button[aria-pressed="true"] { background: var(--ng-primary-tint); color: var(--ng-primary-ink); }
.ng-seg button:focus-visible { outline: 2px solid var(--ng-primary); outline-offset: -2px; }

/* --- Page furniture ------------------------------------------------------ */
/* Top and bottom only: the side padding comes from .ng-shell. */
.ng-page { padding-top: var(--ng-xl); padding-bottom: var(--ng-2xl); }
.ng-page-head { margin-bottom: var(--ng-lg); }
.ng-crumbs { font-size: 12px; color: var(--ng-text-muted); margin-bottom: var(--ng-xs); }
.ng-crumbs a { color: inherit; text-decoration: none; }
.ng-crumbs a:hover { color: var(--ng-primary); }

.ng-divider { height: 1px; background: var(--ng-border); border: 0; margin: var(--ng-lg) 0; }
.ng-or { display: flex; align-items: center; gap: var(--ng-sm);
         color: var(--ng-text-faint); font-size: 12px; font-weight: 500; }
.ng-or::before, .ng-or::after { content: ''; flex: 1; height: 1px; background: var(--ng-border); }

/* --- Notices ------------------------------------------------------------- */
.ng-notice { display: flex; gap: var(--ng-sm); padding: var(--ng-sm) var(--ng-md);
             border-radius: var(--ng-r); border: 1px solid; font-size: 13px; }
.ng-notice-info { background: var(--ng-surface-sunk); border-color: var(--ng-border); color: var(--ng-text-body); }
.ng-notice-warn { background: var(--ng-warn-tint); border-color: var(--ng-warn-border); color: var(--ng-warn-text); }
.ng-notice-bad  { background: var(--ng-bad-tint);  border-color: var(--ng-bad-border);  color: var(--ng-bad-text); }
.ng-notice-ok   { background: var(--ng-ok-tint);   border-color: var(--ng-ok-border);   color: var(--ng-ok-text); }

a { color: var(--ng-primary-ink); }
.ng-link-quiet { color: var(--ng-text-muted); text-decoration: none; }
.ng-link-quiet:hover { color: var(--ng-primary-ink); text-decoration: underline; }
/* A button that reads as a quiet link (Remove, Keep). */
button.ng-link-quiet { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* --- Footer ---------------------------------------------------------------
   The same ink as the header, so every page is closed the way it opened. */
.ng-footer { background: var(--ng-ink); color: var(--ng-on-ink-muted); margin-top: var(--ng-2xl); border-top: 1px solid var(--ng-ink-line); font-size: 13.5px; }
.ng-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--ng-xl); padding: var(--ng-2xl) 0 var(--ng-xl); }
.ng-footer h4 { font-family: var(--ng-sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-on-ink); margin: 0 0 var(--ng-sm); }
.ng-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ng-xs); }
.ng-footer a { color: var(--ng-on-ink-muted); text-decoration: none; transition: color .15s; }
.ng-footer a:hover { color: var(--ng-signal); }
.ng-footer-brand p { margin: var(--ng-sm) 0 0; max-width: 34ch; }
.ng-footer-base { border-top: 1px solid var(--ng-ink-line); padding: var(--ng-md) 0 var(--ng-lg); display: flex; flex-wrap: wrap; gap: var(--ng-xs) var(--ng-lg); justify-content: space-between; font-size: 12.5px; }
@media (max-width: 800px) {
  .ng-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-footer-brand { grid-column: 1 / -1; }
}

/* --- Scroll reveal ---------------------------------------------------------
   Things ease up into view as they are scrolled to. Only when script is running
   (theme.js puts .js on <html>), so a page without script shows everything. */
.js .ng-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .ng-reveal.is-in { opacity: 1; transform: none; }
@media print { .js .ng-reveal { opacity: 1 !important; transform: none !important; } }

/* Course cover tiles are drawn in light colours (tools/build-course-images.mjs). These rules
   give them the page's own colours instead, which are the same values in light, so only a
   dark page notices. Photos are not touched. */
svg[role="img"] rect[fill="#f1f5f9"] { fill: var(--ng-surface-sunk); }
svg[role="img"] text[fill="#0f172a"] { fill: var(--ng-text); }
svg[role="img"] text[fill="#64748b"] { fill: var(--ng-text-muted); }

/* A card that is a link: lifts when pointed at. */
.ng-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ng-lift:hover { transform: translateY(-4px); box-shadow: var(--ng-shadow-3); border-color: var(--ng-border-strong); }

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

@media (max-width: 720px) {
  h1 { font-size: 28px; }
  .ng-shell { padding: 0 var(--ng-md); }
  /* 16px stops phones zooming the page in when a field is tapped. */
  .ng-input, .ng-select { font-size: 16px; }
  /* A long button label wraps onto two lines instead of running off the screen. */
  .ng-btn { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
}

/* The .pub rules were the strip that showed a course change going through GitHub (Sent, Checked, Live on staging; shared/nugen-publish-status.js, removed 17 October 2026 when Publish began to make a version on the site). No page shows that strip now. Kept: admin/certifiers.html has a fieldset.pub that shares the class name, and its look was set with these rules. */
.pub { margin: var(--ng-md) 0; padding: var(--ng-md); background: var(--ng-surface-sunk); border: 1px solid var(--ng-border); border-radius: var(--ng-r-lg); }
.pub-ok { background: var(--ng-ok-tint); color: var(--ng-ok-text); }
.pub-bad { background: var(--ng-bad-tint); color: var(--ng-bad-text); }
.pub-warn { background: var(--ng-warn-tint); color: var(--ng-warn-text); }
.pub .steps { display: flex; flex-wrap: wrap; gap: var(--ng-xs) var(--ng-md); list-style: none; margin: 0 0 var(--ng-sm); padding: 0; }
.pub .step { display: flex; align-items: center; gap: var(--ng-xs); font-weight: 600; }
.pub .step-todo { opacity: .6; font-weight: 400; }
.pub .mark { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .8rem; line-height: 1; flex: none; }
.pub .step-done .mark { background: var(--ng-ok-text); border-color: var(--ng-ok-text); color: #fff; }
.pub .step-bad .mark { color: var(--ng-bad-text); }
.pub .headline { margin: 0 0 var(--ng-2xs); overflow-wrap: anywhere; }
.pub .detail { margin: var(--ng-2xs) 0 0; padding-left: 1.2rem; overflow-wrap: anywhere; }
.pub .more, .pub .when { margin: var(--ng-xs) 0 0; font-size: .875rem; }
.pub .when { color: var(--ng-text-muted); }
.pub .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pub-compact { display: inline-flex; align-items: center; gap: var(--ng-xs); margin: 0; padding: 0; background: none; border: 0; }
.pub-compact .mark { width: 1.2rem; height: 1.2rem; font-size: .7rem; }
@media (max-width: 479px) { .pub .steps { flex-direction: column; } }

@media print {
  .ng-viewing, .ng-menu-btn, .ng-subtabs, .ng-mycert { display: none !important; }
}

/* Media library tiles (Change 33): three across on a laptop, one on a phone. */
.ng-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--ng-md); align-items: stretch; }
.ng-media-grid > * { min-width: 0; }
.ng-btn.ng-media-btn { height: 30px; padding: 0 var(--ng-xs); font-size: 12.5px; }
.ng-media-acts { margin-top: auto; padding-top: var(--ng-xs); gap: var(--ng-2xs); }

/* --- Requirement chips that wrap, and the tick bar (Sam, 21 October 2026: many required courses overflowed the row; tick people to assign courses) -------------------------
   Placed last so they win over the table and button rules above. Colours are the badge tokens, so both themes follow. */
.ng-chips { display: flex; flex-wrap: wrap; gap: var(--ng-2xs) var(--ng-xs); align-items: center; min-width: 0; }
.ng-chips-rest { display: contents; }
.ng-chips-rest[hidden] { display: none; }
.ng-chip { display: inline-flex; align-items: center; gap: var(--ng-2xs); max-width: 100%; min-width: 0; padding: 2px var(--ng-sm); border: 1px solid var(--ng-border-strong); border-radius: var(--ng-r-pill);
           background: var(--ng-surface-sunk); color: var(--ng-text-body); font-size: 12.5px; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.ng-chip-code { font-weight: 600; }
a.ng-chip:hover { border-color: var(--ng-primary); }
.ng-chip[data-tone="ok"] { color: var(--ng-ok-text); background: var(--ng-ok-tint); border-color: var(--ng-ok-border); }
.ng-chip[data-tone="warn"] { color: var(--ng-warn-text); background: var(--ng-warn-tint); border-color: var(--ng-warn-border); }
.ng-chip[data-tone="bad"] { color: var(--ng-bad-text); background: var(--ng-bad-tint); border-color: var(--ng-bad-border); }
.ng-chip-req { padding-right: 2px; }
.ng-chip-x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ng-r-pill); background: transparent; color: var(--ng-text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.ng-chip-x:hover, .ng-chip-x:focus-visible { background: var(--ng-sunken); color: var(--ng-text); }
.ng-chips-more { font: inherit; font-size: 12.5px; min-height: 28px; padding: 2px var(--ng-sm); border: 1px dashed var(--ng-border-strong); border-radius: var(--ng-r-pill); background: transparent; color: var(--ng-primary-ink); cursor: pointer; }
.ng-chips-more:hover, .ng-chips-more:focus-visible { border-color: var(--ng-primary); background: var(--ng-primary-tint); }
@media print {
  .ng-chips-rest[hidden] { display: contents !important; }
  .ng-chips-more { display: none !important; }
  .ng-chip { border-color: var(--ng-border-strong); }
}
/* The tick column and the bar over the People list. */
.ng-tick { width: 18px; height: 18px; accent-color: var(--ng-primary); cursor: pointer; vertical-align: middle; }
.ng-table th.tick, .ng-table td.tick { width: 1%; padding-right: 0; }
.ng-tickbar-host:empty { display: none; }
.ng-tickbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ng-xs) var(--ng-sm); padding: var(--ng-xs) var(--ng-sm); margin: 0 0 var(--ng-sm);
              background: var(--ng-primary-tint); border: 1px solid var(--ng-primary-border); border-radius: var(--ng-r-lg); }
.ng-tickbar-count { font-weight: 600; font-size: 13.5px; color: var(--ng-text); margin-right: auto; }
.tickline { display: none; margin: 0 0 var(--ng-xs); }
#results:has(.ng-cards) .tickline { display: block; }
@media (max-width: 720px) {
  /* On a phone the bar stays at the bottom of the screen while the list scrolls, and the page keeps room under it. */
  .ng-tickbar-host { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 var(--ng-sm) var(--ng-sm); pointer-events: none; }
  .ng-tickbar { margin: 0; box-shadow: var(--ng-shadow-2, var(--ng-shadow-1)); background: var(--ng-surface); pointer-events: auto; }
  #main:has(.ng-tickbar) { padding-bottom: 140px; }
}
@media screen {
  table.ng-table.ng-cards td.tick { grid-column: 1 / -1; }
  table.ng-table.ng-cards td.tick + td { grid-column: 1 / -1; font-size: 14px; color: var(--ng-text); }
  table.ng-table.ng-cards td.tick + td::before { content: none; }
}
/* Choosing courses to buy for people (shared/nugen-assign.js). */
.assign { margin-top: var(--ng-md); display: grid; gap: var(--ng-sm); }
.assign h3 { font-size: 17px; margin: 0; }
.assign .err { color: var(--ng-bad-text); font-size: 12.5px; min-height: 1.2em; }
@media print { .ng-tickbar-host, .assign { display: none !important; } }