/* ============================================================================
   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');

*, *::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;
}

/* 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); }
.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 .12s, border-color .12s, color .12s;
}
.ng-btn-primary { background: var(--ng-primary); color: var(--ng-on-primary); box-shadow: 0 1px 2px rgba(234,88,12,.2); }
.ng-btn-primary:hover { background: var(--ng-primary-hover); }
.ng-btn-secondary { background: var(--ng-surface); border-color: var(--ng-border); color: var(--ng-text-body); }
.ng-btn-secondary:hover { background: var(--ng-canvas); }
.ng-btn-ghost { background: transparent; color: var(--ng-text-muted); }
.ng-btn-ghost:hover { background: var(--ng-surface-sunk); color: var(--ng-text); }
.ng-btn-block { width: 100%; }
.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); }

/* --- 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); }

/* --- 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; }
/* 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); }
}

/* --- Staff bar ------------------------------------------------------------
   The dark strip above the header is a staff tool, not product: switch between
   what visitors, workers, company admins and NuGen staff see, and reach the
   page map. At launch only NuGen staff get it, and every switch is logged. */
.ng-staffbar { background: var(--ng-text); color: var(--ng-sunken); font-size: 12px; }
.ng-staffbar-inner { display: flex; align-items: center; gap: var(--ng-sm); min-height: 38px; flex-wrap: wrap; }
.ng-staffbar-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-primary-border); }
.ng-viewas { display: inline-flex; align-items: center; gap: var(--ng-xs); }
.ng-viewas select {
  height: 28px; max-width: 100%; padding: 0 var(--ng-xs); border: 1px solid var(--ng-text-muted); border-radius: var(--ng-r-sm);
  background: var(--ng-text-body); color: var(--ng-canvas); font-family: var(--ng-sans); font-size: 13px;
}
.ng-staffbar-link { margin-left: auto; color: var(--ng-border-strong); text-decoration: none; }
.ng-staffbar-link:hover { color: var(--ng-surface); text-decoration: underline; }

/* --- 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-surface); border-bottom: 1px solid var(--ng-border);
  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: 60px; }
.ng-logo { display: flex; align-items: center; gap: var(--ng-xs); flex: none;
           font-family: var(--ng-display); font-weight: 700; font-size: 16px;
           color: var(--ng-text); text-decoration: none; letter-spacing: -.01em; }
.ng-logo-mark {
  width: 26px; height: 26px; border-radius: var(--ng-r-sm);
  background: var(--ng-primary); color: var(--ng-on-primary);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.ng-logo em { font-style: normal; color: var(--ng-primary); }

.ng-nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ng-2xs); min-width: 0; }
.ng-nav {
  padding: 6px 10px; border-radius: var(--ng-r);
  font-size: 13px; font-weight: 500; color: var(--ng-text-muted); text-decoration: none;
  white-space: nowrap; transition: background .12s, color .12s;
}
.ng-nav:hover { background: var(--ng-surface-sunk); color: var(--ng-text); }
.ng-nav-active { color: var(--ng-text); background: var(--ng-surface-sunk); }

.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-border); border-radius: var(--ng-r);
  background: var(--ng-surface); color: var(--ng-text); 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; }
.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; gap: 2px;
  position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--ng-xs) var(--ng-md) var(--ng-md);
  background: var(--ng-surface); border-bottom: 1px solid var(--ng-border); box-shadow: var(--ng-shadow-2);
}
.ng-header.is-collapsed.is-open .ng-nav { padding: 12px var(--ng-sm); font-size: 15px; white-space: normal; }

/* --- 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); }

a { color: var(--ng-primary); }
.ng-link-quiet { color: var(--ng-text-muted); text-decoration: none; }
.ng-link-quiet:hover { color: var(--ng-primary); text-decoration: underline; }

@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; }
}

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