@import url("chrome.css"); /* LOCAL DESIGN PASS 5: the shared header + footer */
/* =====================================================================
   LMS — "System" skin (LOCAL DESIGN PASS)
   Governu Timor-Leste · IGEADI National OHS Licensing System

   Loaded AFTER app.css on every application page, in the slot glass.css
   used to occupy. app.css still owns the tokens (ink / paper / state red /
   gold, Barlow Semi Condensed + Inter + IBM Plex Mono) and the component
   anatomy; this file only changes the MATERIAL and the RHYTHM.

   Direction — the register of a modern licensing / compliance back-office
   (reference set: Vanta, Linear, Airtable, Fresha, Contra, AWS console):
     · flat surfaces on warm paper, one hairline, one soft shadow
     · no frosted glass, no gradients, no glows, no ambient blooms
     · the state red is the ONLY accent and is used for intent
       (primary action, current item, error) — never for decoration
     · quiet type hierarchy: small uppercase labels, big Barlow numbers
     · 8 / 12 px radii, 4 px spacing grid, 36 px controls

   Swap the <link> back to glass.css to return to the previous look.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · Tokens
   --------------------------------------------------------------------- */
:root {
  /* Brand: THE OHS logo red on black. Gold and blue accents retired. */
  --state:      #b32025;
  --state-dk:   #8c1a1e;
  --gold:       #b32025;
  --info:       #3a4551;
  --info-bg:    #eef0f2;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 1px 2px rgba(20, 27, 36, .05);
  --shadow-lg:  0 12px 32px -16px rgba(20, 27, 36, .22);
  --ring:       0 0 0 3px rgba(179, 32, 37, .16);
  --tint:       rgba(179, 32, 37, .07);   /* state red at 7 % — the selected tint */
  --ctl:        36px;                     /* control height (buttons, inputs) */
  --ctl-sm:     30px;
  --ease:       cubic-bezier(.2, .7, .3, 1);
}

body { background: var(--paper); }

/* ---------------------------------------------------------------------
   2 · Masthead · portal bar · acting-as strip
   --------------------------------------------------------------------- */
.lms-mast {
  background: var(--mast, var(--ink));
  color: #fff;
  border-bottom: 2px solid var(--state);
  box-shadow: none;
  position: sticky; top: 0; z-index: 40;
}
.lms-mast > div { padding-top: 9px; padding-bottom: 9px; }
.lms-mast__logo { height: 34px; }
.lms-mast h1 { font-size: 15px; }
.lms-mast__sub { font-size: 10.5px; letter-spacing: .5px; color: #aab4be; }
.lms-mast__rule { background: rgba(255, 255, 255, .18); }
.lms-lang { border-color: rgba(255, 255, 255, .22); border-radius: 8px; }
.lms-lang button { padding: 4px 9px; font-size: 11px; }
.lms-lang button.is-on { background: var(--state); }
.lms-iconbtn { border-radius: 8px; border-color: rgba(255, 255, 255, .16); }

.lms-portalbar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.lms-portal-tab {
  padding: 11px 14px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-3); border-bottom: 2px solid transparent; border-radius: 0;
  transition: color .15s, border-color .15s;
}
.lms-portal-tab:hover { color: var(--ink); background: transparent; }
.lms-portal-tab.is-on { color: var(--state); border-bottom-color: var(--state); background: transparent; }

/* ---------------------------------------------------------------------
   3 · Sidebar
   --------------------------------------------------------------------- */
.lms-side {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding-top: 14px !important;
}
.lms-side__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  color: var(--ink-3); padding: 12px 10px 5px;
}
.lms-navgrp { margin-top: 8px; }
.lms-navgrp:hover { background: transparent; color: var(--ink-2); }
.lms-navgrp svg { opacity: .55; }

.lms-nav {
  min-height: 34px; padding: 7px 10px; gap: 10px;
  border-radius: var(--radius); margin-bottom: 1px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: background .12s, color .12s;
  box-shadow: none;
}
.lms-nav svg { opacity: .9; }
.lms-nav:hover { background: var(--line-2); color: var(--ink); box-shadow: none; }
.lms-nav.is-active {
  background: var(--tint); color: var(--state);
  box-shadow: none;
}
.lms-nav.is-active svg { color: var(--state); }
.lms-nav.is-active .lms-modid { color: var(--state); opacity: .75; }
.lms-nav.is-active .lms-badge { background: var(--state); color: #fff; }
.lms-nav svg.lms-navic { filter: none !important; }
.lms-modid { font-size: 10px; opacity: .8; }
.lms-badge {
  background: var(--state); color: #fff; font-size: 10.5px;
  padding: 1px 7px; min-width: 20px; box-shadow: none;
}

/* The account block under the menu. */
.lms-side .text-ink-3 { font-size: 11.5px; }

/* ---------------------------------------------------------------------
   4 · Page header
   --------------------------------------------------------------------- */
.lms-ph {
  align-items: flex-end; gap: 14px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.lms-ph__eyebrow { font-size: 11px; letter-spacing: .6px; color: var(--state); margin-bottom: 6px; }
.lms-ph h2 { font-size: 24px; line-height: 1.05; letter-spacing: 0; }
.lms-ph p { font-size: 13px; margin-top: 6px; max-width: 68ch; color: var(--ink-3); }
.lms-ph__actions .lms-btn { white-space: nowrap; }

.lms-sec-title { font-size: 15px; font-weight: 600; margin: 22px 0 10px; color: var(--ink); }

/* ---------------------------------------------------------------------
   5 · Buttons — 36 px, 8 px radius, flat
   --------------------------------------------------------------------- */
.lms-btn {
  min-height: var(--ctl); padding: 7px 14px;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600; line-height: 1.2;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  transform: none !important;           /* no lift anywhere */
}
.lms-btn:hover { background: var(--paper); border-color: var(--ink-3); }
.lms-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.lms-btn svg { width: 16px; height: 16px; }

.lms-btn--primary { background: var(--state); border-color: var(--state); color: #fff; box-shadow: none; }
.lms-btn--primary:hover { background: var(--state-dk); border-color: var(--state-dk); color: #fff; }
.lms-btn--ink { background: var(--mast, var(--ink)); border-color: var(--mast, var(--ink)); color: #fff; box-shadow: none; }
.lms-btn--ink:hover { background: #000; border-color: #000; }
.lms-btn--danger { background: var(--paper-2); border-color: var(--line); color: var(--state); }
.lms-btn--danger:hover { background: var(--bad-bg); border-color: var(--state); }
.lms-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.lms-btn--ghost:hover { background: var(--line-2); border-color: transparent; color: var(--ink); box-shadow: none; }
.lms-btn--sm { min-height: var(--ctl-sm); padding: 4px 10px; font-size: 12px; }
.lms-btn--sm svg { width: 14px; height: 14px; }
.lms-btn--block { width: 100%; justify-content: center; }

/* Inside a table a primary button is one of many: keep the red for the
   page-level action and show row actions as quiet outlined buttons. */
.lms-table .lms-btn--primary { background: var(--paper-2); border-color: var(--line); color: var(--state); }
.lms-table .lms-btn--primary:hover { background: var(--tint); border-color: var(--state); color: var(--state-dk); }

/* Row icon buttons (edit / delete) */
.lms-ic { width: 30px; height: 30px; border-radius: 7px; border-color: var(--line); background: var(--paper-2); }
.lms-ic:hover { background: var(--paper); }

/* ---------------------------------------------------------------------
   6 · Form fields — 36 px, 8 px radius, red focus ring
   --------------------------------------------------------------------- */
.lms-input, .lms-select, .lms-textarea {
  min-height: var(--ctl); padding: 7px 11px;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: none; font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
.lms-textarea { min-height: 96px; }
.lms-input:hover, .lms-select:hover, .lms-textarea:hover { border-color: var(--ink-3); }
.lms-input:focus, .lms-select:focus, .lms-textarea:focus {
  outline: none; border-color: var(--state); box-shadow: var(--ring); background: var(--paper-2);
}
.lms-input:disabled, .lms-input[readonly] { background: var(--paper); color: var(--ink-2); }
.lms-input--padded { padding-left: 34px; }
.lms-field > svg { left: 11px; width: 16px; height: 16px; }
.lms-label { font-size: 11px; letter-spacing: .5px; color: var(--ink-2); margin-bottom: 6px; }
.lms-error { font-size: 12px; }

.lms-radio-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: none; transition: border-color .12s, background .12s;
}
.lms-radio-card:hover { background: var(--paper); transform: none; }
.lms-radio-card:has(input:checked) { border-color: var(--state); background: var(--tint); box-shadow: none; }

/* List toolbar (search + filters) — theme.css draws it as a card; keep it
   on the same radius as everything else and the same control height. */
[data-live-table] > div:first-child:has(.lms-field, .lms-select), .lms-toolbar, .pay-bar {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  border-color: var(--line) !important;
  padding: 8px !important;
}
.lms-field > .lms-input--padded { height: 38px !important; border-radius: var(--radius) !important; border-width: 1px !important; font-size: 13px !important; }
[data-live-table] .lms-select, .lms-toolbar .lms-select { height: 38px; border-radius: var(--radius); border-width: 1px; font-size: 13px; }
[data-live-count] { height: 28px; font-size: 11.5px; }
.lms-toolbar .lms-btn { height: 38px; border-radius: var(--radius); }

/* ---------------------------------------------------------------------
   7 · Cards, tiles, key figures
   --------------------------------------------------------------------- */
.lms-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lms-card__h {
  padding: 12px 16px; gap: 10px;
  background: transparent; border-bottom: 1px solid var(--line-2);
}
.lms-card__h h3 { font-size: 15px; font-weight: 600; }
.lms-card__more { font-size: 12px; font-weight: 600; color: var(--state); }
.lms-card__b { padding: 16px; }
.lms-card__b--flush { padding: 0; }

/* Stat tile: label / number / delta. No rail, no halo, no lift. */
.lms-tile {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px 16px;
  box-shadow: var(--shadow); transition: border-color .12s;
}
.lms-tile::before, .lms-tile::after { display: none; }
.lms-tile:hover { transform: none; box-shadow: var(--shadow); border-color: var(--ink-3); }
.lms-tile__k { font-size: 11.5px; letter-spacing: .4px; }
.lms-tile__v { font-size: 28px; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lms-tile__d { font-size: 11.5px; margin-top: 4px; }

/* Administration tiles / panels (theme.css) */
.adm-tile { border-radius: var(--radius-lg); border-color: var(--line); box-shadow: var(--shadow); }
.adm-tile:hover { border-color: var(--ink-3); box-shadow: var(--shadow); transform: none; }
.adm-panel { border-radius: var(--radius-lg); border-color: var(--line); box-shadow: var(--shadow); }
.adm-panel[open] { box-shadow: var(--shadow); }
.adm-panel__h { background: var(--paper-2); }
.adm-panel__ic { border-radius: 8px; background: var(--tint); border-color: transparent; }

/* ---------------------------------------------------------------------
   8 · Tables
   --------------------------------------------------------------------- */
.lms-table { font-size: 13px; }
.lms-table th {
  font-size: 10.5px; letter-spacing: .5px; font-weight: 600; color: var(--ink-3);
  padding: 10px 14px; background: var(--paper);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lms-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.lms-table tbody tr { transition: background .1s; }
.lms-table tbody tr:hover { background: var(--paper); }
.lms-table tbody tr.is-clickable:hover, .lms-table tbody tr[data-href]:hover { background: var(--paper); cursor: pointer; }
.lms-table__empty { padding: 40px 16px; font-size: 13px; }
.lms-table .nm { font-weight: 600; }
.lms-table .mut { color: var(--ink-3); }

/* ---------------------------------------------------------------------
   9 · Pills, chips, notices
   --------------------------------------------------------------------- */
.lms-pill {
  font-size: 11px; font-weight: 600; padding: 3px 9px 3px 8px;
  border-radius: 999px; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lms-pill::before { width: 6px; height: 6px; }
.lms-chip, .lms-sector-chip {
  background: var(--line-2); border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lms-modref { border-radius: 4px; }

.lms-notice {
  border-radius: 10px; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--info-bg); border: 1px solid transparent; border-left: 3px solid var(--info);
  padding: 11px 14px; font-size: 12.5px;
}
.lms-notice--bad  { background: var(--bad-bg);  border-left-color: var(--bad); }
.lms-notice--warn { background: var(--warn-bg); border-left-color: var(--warn); }
.lms-notice--ok   { background: var(--ok-bg);   border-left-color: var(--ok); }

.lms-hr { background: var(--line); }

/* ---------------------------------------------------------------------
   10 · Stepper — numbered circles joined by a hairline (Contra / AWS)
   --------------------------------------------------------------------- */
.lms-steps {
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  gap: 0; margin-bottom: 22px;
}
.lms-step {
  border-right: 0; padding: 0 12px 0 0; gap: 10px; font-size: 12.5px;
  background: transparent !important; color: var(--ink-3);
}
.lms-step:not(:last-child)::after {
  content: ""; flex: 1 1 24px; height: 1px; background: var(--line); margin-left: 4px; min-width: 16px;
}
.lms-step__n {
  width: 26px; height: 26px; flex: 0 0 26px; font-size: 11.5px;
  background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line); box-shadow: none;
}
.lms-step b { font-size: 12.5px; color: var(--ink-2); }
.lms-step span { font-size: 10.5px; }
.lms-step.is-on { color: var(--ink); }
.lms-step.is-on b { color: var(--ink); }
.lms-step.is-on .lms-step__n { background: var(--state); border-color: var(--state); color: #fff; }
.lms-step.is-done .lms-step__n { background: var(--ok); border-color: var(--ok); color: #fff; font-size: 0; }
.lms-step.is-done .lms-step__n::before { content: "✓"; font-size: 12px; font-weight: 700; }
.lms-step.is-done:not(:last-child)::after { background: var(--ok); }
.lms-step.is-done b { color: var(--ink-2); }

/* ---------------------------------------------------------------------
   11 · Timeline, key/value, progress
   --------------------------------------------------------------------- */
.lms-timeline::before { background: var(--line); }
.lms-timeline__i::before { border-color: var(--state); background: var(--paper-2); }
.lms-timeline__m { box-shadow: none; }
.lms-kv dt { font-weight: 500; }
.lms-bar { height: 6px; background: var(--line-2); }
.lms-bar i { background: var(--state); }

/* ---------------------------------------------------------------------
   12 · Course and sector cards, course hero, licence card
   --------------------------------------------------------------------- */
.lms-vcard, .lms-stile {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--paper-2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease);
}
.lms-vcard:hover, .lms-stile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line); }
.lms-chero { border-radius: var(--radius-lg); }
.lms-dlc { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.lms-brandbar { border-radius: var(--radius-lg); background: var(--paper-2); border-color: var(--line); }

/* ---------------------------------------------------------------------
   13 · Dialog, toast, error pages
   --------------------------------------------------------------------- */
.lms-dlg { border-radius: 14px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.lms-dlg input[type=text] { border-radius: var(--radius); border-width: 1px; }
.lms-toast {
  background: var(--ink); border: 0; border-radius: 10px;
  box-shadow: var(--shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.grid.place-items-center > main {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 36px 32px;
}

/* ---------------------------------------------------------------------
   14 · Public applicant portal — same system, a touch more room
   (public-portal.css loads after this file; these use its selectors at
   equal or higher specificity so the flat register wins.)
   --------------------------------------------------------------------- */
body.lms-realm-public { background: var(--paper); }
body.lms-realm-public .lms-mast { background-image: none; border-bottom: 2px solid var(--state); box-shadow: none; }
body.lms-realm-public .lms-side { background: var(--paper); border-right: 1px solid var(--line); }
body.lms-realm-public .lms-side nav[aria-label="Sections"] { background: transparent; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
body.lms-realm-public .lms-nav { border-radius: var(--radius); padding: 7px 10px; gap: 10px; font-weight: 500; }
body.lms-realm-public .lms-nav svg { width: 18px; height: 18px; flex-basis: 18px; padding: 0; background: transparent; color: inherit; border-radius: 0; }
body.lms-realm-public .lms-nav:hover { background: var(--line-2); }
body.lms-realm-public .lms-nav:hover svg { background: transparent; }
body.lms-realm-public .lms-nav.is-active { background: var(--tint); color: var(--state); box-shadow: none; }
body.lms-realm-public .lms-nav.is-active svg { background: transparent; color: var(--state); }
body.lms-realm-public .lms-side .text-ink-3 { background: transparent; border: 0; }
body.lms-realm-public .lms-ph {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 0 0 16px; box-shadow: none;
}
body.lms-realm-public .lms-ph::after { display: none; }
body.lms-realm-public .lms-ph__eyebrow { color: var(--state); }
body.lms-realm-public .lms-ph h2 { font-size: 26px; }
body.lms-realm-public a.lms-card:hover { border-color: var(--ink-3); transform: none; }
body.lms-realm-public a.lms-card .lms-card__b > .text-state { background: var(--tint); border-radius: 10px; }

/* ---------------------------------------------------------------------
   15 · Print — flat already; only strip chrome
   --------------------------------------------------------------------- */
@media print {
  .lms-card, .lms-tile { box-shadow: none; border-color: #ddd; }
}

/* ---------------------------------------------------------------------
   16 · Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lms-vcard:hover, .lms-stile:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   17 · No badges (Han, 2026-09-29): status pills become plain coloured
   text with the small dot. Counters in the sidebar stay.
   --------------------------------------------------------------------- */
.lms-pill, .ls-pill, .lms-pri, .lms-modref, .dl-chip, .cv-cls, .emp-count-badge {
  background: transparent !important; border: 0 !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
.lms-pill { font-weight: 600; letter-spacing: 0; }
.lms-pri { font-family: var(--font-b); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

/* ---------------------------------------------------------------------
   18 · Brand-only colour: figure tiles and charts use the logo palette
   (red + ink) rather than a rainbow of tones. Status colours stay
   semantic (green / amber / red) where they carry meaning.
   --------------------------------------------------------------------- */
.ct-ic, .dk-ic, .aq-ic, .adm-panel__ic, .dk-h-ic { background: var(--line-2) !important; color: var(--ink) !important; }
.ct-tile--red .ct-ic, .dk-ic--red, .aq--red .aq-ic { background: var(--tint) !important; color: var(--state) !important; }
.ct-tile { --ct-c: var(--ink); }
.dk-bar { fill: var(--state) !important; } .dk-bar--2 { fill: var(--ink) !important; }
.dk-line { stroke: var(--ink) !important; } .dk-area { fill: var(--ink) !important; } .dk-dot { fill: var(--ink) !important; }

/* No eyebrows / kickers (Han, 2026-09-29): the small uppercase red label
   above headings goes everywhere; the heading carries the page. */
.lms-ph__eyebrow, .eyebrow, .aop-kicker, .lms-chero__code, .lms-chero__by, .vsx-band__k,
.vk-hero__eyebrow, .vk-hero__eye, .vk-eyebrow, .kicker { display: none !important; }

/* =====================================================================
   19 · PHONE LAYER (≤767px) — LOCAL DESIGN PASS, mobile
   References: Docusign / Jobber home (two-up KPI tiles, 56px top bar),
   KOHO / Instacart lists (record cards, filter chips), Stake / Shopee
   forms (48px inputs, sticky bottom bar), Tinder / Stake steppers
   (segment bars). No horizontal page scroll, 16px gutters, 44px targets.
   ===================================================================== */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .lms-main { padding: 16px 16px 96px; }

  /* Masthead: 56px, logo 26px, controls 40px */
  .lms-mast > div { padding: 8px 12px; gap: 8px; }
  .lms-mast__logo { height: 26px; max-width: 40vw; }
  .lms-mast .lms-theme { display: none; }
  .lms-lang button { padding: 6px 8px; font-size: 11px; min-height: 32px; }
  .lms-iconbtn { width: 40px; height: 40px; }
  .lms-acct__t { padding: 2px; }
  .lms-portalbar > div { padding: 0 8px; }
  .lms-portal-tab { padding: 12px 10px; min-height: 44px; }
  body.lms-nav-open .lms-side, body.lms-nav-open::after { inset: 56px 0 0 0; }

  /* Page header: title, then full-width actions */
  .lms-ph { display: block; margin-bottom: 16px; padding-bottom: 14px; }
  .lms-ph h2 { font-size: 24px; }
  .lms-ph p { font-size: 14px; }
  .lms-ph__actions { margin: 12px 0 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .lms-ph__actions .lms-btn { justify-content: center; min-height: 44px; width: 100%; }
  .lms-ph__actions .lms-btn:only-child { grid-column: 1 / -1; }

  /* Controls: 44px targets, 16px text so iOS does not zoom */
  .lms-btn { min-height: 44px; padding: 10px 16px; }
  .lms-btn--sm { min-height: 40px; padding: 8px 12px; }
  .lms-ic { width: 40px; height: 40px; }
  .lms-input, .lms-select, .lms-textarea { min-height: 44px; font-size: 16px; border-radius: 10px; }
  .lms-field > .lms-input--padded { height: 44px !important; font-size: 16px !important; }
  [data-live-table] .lms-select, .lms-toolbar .lms-select { height: 44px; width: 100%; }
  .lms-radio-card { min-height: 52px; }

  /* Filter row: stacked, full width */
  [data-live-table] > div:first-child:has(.lms-field, .lms-select), .lms-toolbar, .pay-bar {
    flex-direction: column; align-items: stretch; gap: 8px; padding: 10px !important;
  }
  .lms-field:has(> .lms-input--padded) { max-width: none; flex-basis: auto; min-width: 0; }
  [data-live-count] { margin-left: 0; height: auto; padding: 4px 0; background: transparent; border: 0; }
  .lms-toolbar .lms-btn { width: 100%; }

  /* KPI tiles: two-up, compact */
  .ct-tiles, .dk-tiles, .lms-stat-row, .adm-tiles, .pay-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .ct-tile, .dk-tile, .lms-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px !important; min-height: 96px; }
  .ct-ic, .dk-ic, .aq-ic { width: 28px !important; height: 28px !important; flex-basis: 28px !important; border-radius: 8px !important; }
  .ct-ic__svg, .dk-ic__svg, .aq-svg { width: 16px !important; height: 16px !important; }
  .ct-v, .dk-v { font-size: 26px !important; }
  .ct-k, .dk-k { white-space: normal; font-size: 12px; }
  .ct-s, .dk-s { white-space: normal; font-size: 11.5px; }
  .lms-tile__v { font-size: 26px; }

  /* Cards */
  .lms-card__b { padding: 14px; }
  .lms-card__h { padding: 12px 14px; }
  .dk-row, .dk-row--2, .dk-row--3 { grid-template-columns: 1fr !important; }

  /* Tables → stacked record cards (labels come from data-label, set by the
     layout script from the header row). The record column stays first and
     reads as the card title; actions become full-width buttons. */
  .lms-card__b--flush { padding: 10px; overflow: visible !important; }
  .lms-table, .lms-table tbody, .lms-table tr, .lms-table td { display: block; width: 100%; }
  .lms-table thead { display: none; }
  .lms-table tr { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; }
  .lms-table tr:last-child { margin-bottom: 0; }
  .lms-table tbody tr:hover, .lms-table tbody tr.is-clickable:hover, .lms-table tbody tr[data-href]:hover { background: var(--paper-2); }
  .lms-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border: 0; text-align: left !important; font-size: 14px; }
  .lms-table td[data-label]::before { content: attr(data-label); flex: 0 0 38%; color: var(--ink-3); font-size: 12px; font-weight: 500; }
  .lms-table td:first-child { display: block; padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); font-size: 15px; }
  .lms-table td:first-child::before { content: none; }
  .lms-table td:has(> .lms-btn, > form, > .lms-ic, > a.lms-btn) { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  .lms-table td:has(> .lms-btn, > a.lms-btn)::before { content: none; }
  .lms-table td .lms-btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .lms-table td.text-right { justify-content: space-between; }
  .lms-table__empty { display: block; }
  .lms-table td input[type="checkbox"] { width: 22px; height: 22px; }

  /* Stepper → segment bars; the current step's title sits under its bar */
  .lms-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 40px; position: relative; }
  .lms-step { display: block; height: 4px; padding: 0 !important; min-width: 0; background: var(--line); border-radius: 2px; position: static; }
  .lms-step:not(:last-child)::after { content: none; }
  .lms-step > * { display: none; }
  .lms-step.is-done { background: var(--ink-2); }
  .lms-step.is-on { background: var(--state); }
  .lms-step.is-on b, .lms-step.is-on > div b { display: block; position: absolute; left: 0; top: 12px; font-size: 13px; color: var(--ink); }
  .lms-step.is-on > div { display: block; }
  .lms-step.is-on > div span { display: none; }

  /* Key/value lists stack */
  .lms-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .lms-kv dt { margin-top: 8px; }

  /* Course cards and sector tiles: one-up, full width */
  .lms-chero { grid-template-columns: 1fr; }
  .lms-chero__l { padding: 20px 16px; }
  .lms-chero h1 { font-size: 30px; }

  /* Floating chat sits low and small so it never covers a primary action */
  .wa { left: 12px !important; bottom: 12px !important; }

  /* Dialogs become bottom sheets */
  .lms-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .lms-dlg form { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .lms-dlg__row .lms-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
  .lms-lang { display: none; }
}

/* ---------------------------------------------------------------------
   20 · Audit fixes (shell) — controls 36px on desktop, guest header,
   account menu, chips as text, portal bar not sticky, sidebar rows 44px
   on phones. Selectors carry the header element so they outrank the
   partials' own <style> blocks that come later in the document.
   --------------------------------------------------------------------- */
.lms-iconbtn { width: 36px; height: 36px; }
.lms-lang button { min-height: 32px; padding: 4px 10px; font-size: 11px; }
.lms-portalbar { position: static; }
header.lms-mast .lms-acct__m { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: none; border-color: var(--line); }
header.lms-mast .lms-acct__m::before { display: none; }
header.lms-mast .lms-acct__i { border-radius: 8px; }
.lms-chip, .lms-sector-chip { background: transparent !important; border: 0 !important; padding: 0 !important; margin-right: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); box-shadow: none !important; }
.lms-side__label { font-size: 11px; }
.lms-modid, .lms-badge { font-size: 11px; }
/* Guest header (partials/public-nav.php) */
header .pn-lang button, .pn-lang button { font-size: 11px !important; min-height: 32px !important; padding: 0 10px !important; }
.pn-mast .in { padding-top: 8px !important; padding-bottom: 8px !important; }
.pn-burger { width: 44px !important; height: 44px !important; padding: 0 !important; display: inline-grid !important; place-items: center; }
@media (max-width: 767px) {
  .lms-lang { display: none; }
  .lms-nav { min-height: 44px; font-size: 15px; }
  .lms-navgrp { min-height: 40px; }
  .pn-brand .s { display: none !important; }
  .pn-brand img { height: 28px !important; }
  .pn-lang button { min-height: 40px !important; min-width: 40px !important; }
  .pn-nav a { min-height: 44px !important; padding: 0 14px !important; font-size: 15px !important; display: flex !important; align-items: center; }
  .wa-btn { width: 48px; height: 48px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
  .wa-btn span { display: none; }
  /* Verify: class table stacks */
  .vsx-res .lms-table tr, .vk-result .lms-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .vk-hero__in { padding: 24px 16px !important; }
  .vk-search__row { flex-direction: column; }
  .vk-search__go, .vk-search__scan { min-height: 44px; }
}
/* Public verify page: flat hero and tiles in the brand palette */
.vk-hero { background: var(--paper) !important; color: var(--ink) !important; } /* pass 5: black only in the header and footer */
.vk-hero h1, .vk-hero .vk-hero__title, .vk-hero .vk-hero__lead, .vk-hero p, .vk-hero .vk-search__label { color: var(--ink) !important; }
.vk-hero .vk-hero__lead, .vk-hero p { color: var(--ink-2) !important; }
.vk-hero .vk-search__hint, .vk-hero .mut { color: var(--ink-3) !important; }
.vk-hero::after { background: var(--state) !important; height: 3px !important; }
.vk-tile__ico { background: var(--line-2) !important; color: var(--state); }
.vk-search__field input { font-size: 16px !important; }
.vk-search__scan { min-height: 44px; }
.vsx-card { border-radius: 12px !important; box-shadow: var(--shadow) !important; border: 1px solid var(--line) !important; }
.vsx-card--hero { box-shadow: var(--shadow) !important; }
.vsx-band { background: var(--ink) !important; }
.vsx-band::after { display: none !important; }
.vsx-band__ic { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .14) !important; backdrop-filter: none !important; }
.vsx-head { background: var(--paper-2) !important; }
.vsx-head__ic { background: var(--line-2) !important; }
.vsx-res .lms-kv, .vsx-res .lms-table { border-radius: 10px !important; }

/* ---------------------------------------------------------------------
   21 · Audit fixes (screens) — leftovers from page-level styles
   --------------------------------------------------------------------- */
.lms-main { overflow-x: clip; }
.lms-main .grid > * { min-width: 0; }
.lms-card__b--flush { overflow-x: auto; }
.lms-notice { font-size: 13px; }
.lms-bar i { transition: none; }
.lms-main .hover\:shadow-lift:hover { box-shadow: var(--shadow) !important; }
.lms-vcard:hover, .lms-stile:hover { transform: none; box-shadow: var(--shadow); border-color: var(--ink-3); }
.lms-vcard__tag { display: none; }
.lms-vcard__cls { backdrop-filter: none; background: var(--ink); }
.lms-sector-chip[style] { background: transparent !important; color: var(--ink-2) !important; border: 0 !important; }
.lms-chero__tag, .lms-brandbar__tag, .reg-part__n, .hv-band__k { display: none !important; }
.lms-dlc { background: var(--mast, var(--ink)); box-shadow: var(--shadow); }
.lms-dlc::before, .lms-dlc::after { display: none; }
.lms-dlc__hdr, .lms-dlc__k { font-size: 11px; }
.dl-pill, .dl-count, .pay-seg__o em { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; color: var(--ink-3) !important; font-weight: 600; }
.pay-seg__dot { display: none !important; }
.pay-row--pending td { background: var(--tint) !important; }
.dl-top { background: var(--ink) !important; }
.dl-card--hrw .dl-top { background: #000 !important; }
.dl-card--hrw .dl-bd, .dl-back { background: var(--paper-2) !important; }
.dl-top, .dl-bh, .dl-lb, .dl-back th { font-size: 11px !important; }
.dl-who dl, .dl-chips span { font-size: 12px !important; }
.dl-tabs button { border-radius: 8px !important; min-height: 36px; padding: 0 12px; }
.adm-panel__b { animation: none !important; }
.adm-panel__ref { background: none; border: 0; padding: 0; border-radius: 0; font-size: 11px; }
.adm-tile b { font-family: var(--font-d); }
.lms-dlg, .paydlg, .dl-insp { border-radius: 12px !important; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line) !important; }
.lms-dlg::backdrop, .paydlg::backdrop, .dl-insp::backdrop { background: rgba(20, 27, 36, .5) !important; backdrop-filter: none !important; }
/* licence-services shared skin (partials/ls-style.php) */
.ls-note { background: var(--paper-2) !important; border: 1px solid var(--line) !important; border-left: 3px solid var(--ink-3) !important; }
.ls-note.red { border-left-color: var(--state) !important; background: var(--bad-bg) !important; }
.ls-note.green { border-left-color: var(--ok) !important; background: var(--ok-bg) !important; }
.ls-note.blue { border-left-color: var(--ink-2) !important; background: var(--paper) !important; }
.ls-lbl { font: 600 13px/1.3 var(--font-b) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
.ls-card .ic { background: var(--tint) !important; color: var(--state) !important; }
.ls-card:hover { border-color: var(--ink-3) !important; box-shadow: var(--shadow) !important; }
.lsc::after { display: none !important; }
.lsc:hover { transform: none !important; }
.lsh-ic { background: var(--line-2) !important; }
.reg-opt:has(input:checked), .cart-item__ic { background: var(--tint) !important; border-color: var(--state) !important; }
.aop-callout { background: var(--paper) !important; border: 1px solid var(--line) !important; border-left: 3px solid var(--ink-3) !important; }
.aop-callout--info { border-left-color: var(--ok) !important; }
.cart-sum { top: 72px; }
@media (max-width: 900px) { .cart-sum { position: static; } }
@media (max-width: 767px) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea { font-size: 16px !important; min-height: 44px; }
  .lms-btn, .lms-btn--sm, .lms-ic, .pay-ic, .dl-tabs button, .cart-item__rm, .lms-cartbtn { min-height: 44px; }
  .lms-ic, .pay-ic { width: 44px; height: 44px; }
  .dk-svg { min-width: 480px; }
  .dk-chart .lms-card__b { overflow-x: auto; }
  .dl-bd { flex-wrap: wrap; }
  .dl-qr { margin-left: 0; order: 3; }
  .dl-who { flex: 1 1 60%; }
  .dl-who dd { word-break: break-word; }
  .lms-main .lg\:grid-cols-\[1\.6fr_1fr\], .lms-main .lg\:grid-cols-\[1\.4fr_1fr\] { grid-template-columns: 1fr; }
}

/* Public verify footer and partner plates (verify.php inline styles) */
.vk-foot { background: #16130f !important; color: #cfc7b8 !important; }
.vk-partner { box-shadow: none !important; border-radius: 8px !important; }
a.vk-partner:hover { transform: none !important; }
@media (max-width: 767px) { .vk-foot__partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* verify: the empty result placeholder is a plain paper panel */
.vsx-res .text-center:first-child { background: var(--paper-2) !important; background-image: none !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: none !important; }
.vsx-res .text-center:first-child::before, .vsx-res .text-center:first-child::after { content: none !important; }

/* phone: KPI tiles keep their text inside the tile; segmented filters and small links reach 44px */
@media (max-width: 767px) {
  .ct-tile { padding: 12px; min-width: 0; }
  .ct-tile > * { min-width: 0; }
  .ct-v { font-size: 22px; }
  .ct-s, .ct-k { white-space: normal; overflow-wrap: anywhere; text-align: center; }
  .pay-seg { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; }
  .pay-seg__o { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
  .pay-search__go, .pay-search__x { min-height: 44px; min-width: 44px; }
  .lms-card__more, .lms-ph a.flex-none, .lms-card__h a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) {
  .ct-tile .ct-v { font-size: 22px !important; }
  .ct-tile .ct-s, .ct-tile .ct-k { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
}
/* portal/apply: the three service cards in brand colours, no corner bloom, no lift */
.lsc--green, .lsc--blue, .lsc--violet { --lsc-c: var(--state); --lsc-bg: var(--tint); --lsc-t: var(--ink); }
.lsc::after { content: none !important; }
.lsc:hover { transform: none !important; border-color: var(--ink-3) !important; box-shadow: var(--shadow) !important; }
.lsc .ic { border-radius: 10px !important; }
html body .lsc--green, html body .lsc--blue, html body .lsc--violet { --lsc-c: var(--state) !important; --lsc-bg: var(--tint) !important; --lsc-t: var(--ink) !important; }
html body .lsc .ic { background: var(--tint) !important; }
html body .lsc .f { color: var(--ink) !important; }

/* pass 5: line icons — ink by default, red on the active item, ink on tile plates */
.lms-nav svg.lms-navic { color: var(--ink-3); filter: none !important; }
.lms-nav:hover svg.lms-navic { color: var(--ink); }
.lms-nav.is-active svg.lms-navic { color: var(--state); }
.ct-ic svg, .dk-ic svg, .lms-stile__ic svg, .aq-ic svg, .adm-panel__ic svg { color: var(--ink); width: 20px; height: 20px; }
.hv-band__ic svg, .vk-tile__ico svg { color: currentColor; }

/* ---------------------------------------------------------------------
   Pass 6 — 80rem shell (max-w-shell), more room in the main column
   --------------------------------------------------------------------- */
html body .vk-wrap { max-width: var(--ohs-max); padding-left: var(--ohs-gutter); padding-right: var(--ohs-gutter); box-sizing: border-box; }
html body .vk-sec { padding-top: clamp(56px, 7vw, 96px) !important; padding-bottom: clamp(56px, 7vw, 96px) !important; }
html body .lms-main { padding: 36px 40px 96px; }
html body .lms-ph { margin-bottom: 32px; padding-bottom: 24px; }
html body .lms-ph p { line-height: 1.65; }
html body .lms-card__h { padding: 18px 24px; }
html body .lms-card__b { padding: 24px; }
html body .lms-card__b--flush { padding: 0; }
html body .lms-main .gap-3 { gap: 1rem; }
html body .lms-main .gap-4 { gap: 1.5rem; }
html body .lms-main .gap-5 { gap: 1.75rem; }
html body .lms-main .gap-6 { gap: 2rem; }
html body .lms-main :is(.space-y-4, .space-y-5, .space-y-6) > :not([hidden]) ~ :not([hidden]) { margin-top: 1.75rem; }
html body .lms-main .mb-4 { margin-bottom: 1.5rem; }
html body .lms-main .mb-5 { margin-bottom: 1.75rem; }
html body .ct-tile { padding: 20px 22px; gap: 16px; }
html body .lms-side { padding-top: 24px; }
@media (min-width: 768px) {
  html body .lms-table th, html body .lms-table td { padding: 14px 16px; }
  html body .lms-table th:first-child, html body .lms-table td:first-child { padding-left: 24px; }
  html body .lms-table th:last-child, html body .lms-table td:last-child { padding-right: 24px; }
}
@media (max-width: 767px) {
  html body .lms-main { padding: 20px 16px 72px; }
  html body .lms-ph { margin-bottom: 24px; padding-bottom: 18px; }
  html body .lms-card__h { padding: 14px 16px; }
  html body .lms-card__b { padding: 18px 16px; }
  html body .lms-main .gap-4 { gap: 1rem; }
  html body .ct-tile { padding: 14px; }
}


/* employer guide: journey colours from the brand set, role labels as plain text (no badges) */
html body .gd-j { border-left-color: var(--ink-3) !important; }
html body .gd-j.gd-p3 { border-left-color: var(--ink) !important; }
html body .gd-j.gd-p2 { border-left-color: var(--state-dk, #8c1a1e) !important; }
html body .gd-j.gd-p1, html body .gd-j.gd-st { border-left-color: var(--state) !important; }
html body .gd-j.gd-rv { border-left-color: #6b665f !important; }
html body .gd-btn { background: var(--ink) !important; color: #fff !important; }
html body .gd-btn.gd-p2 { background: var(--state-dk, #8c1a1e) !important; }
html body .gd-btn.gd-p1 { background: var(--state) !important; }
html body .gd-btn.gd-rv { background: #6b665f !important; }
html body [class*="gd-who"] { background: none !important; color: var(--ink-2) !important; padding: 0 !important; border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; text-align: left !important; }
html body .gd-n { background: var(--line-2) !important; }

/* =====================================================================
   Pass 7 · six-colour palette (light mode; dark mode keeps theme.css)
   Red #B32025 · Charcoal #2F2D2A · Stone #6B665F · Mist #EDEAE4 · White · Green #1B6F35
   Hover red #931A1E and tints are derived from the palette, not new colours.
   ===================================================================== */
html:root:not([data-theme="dark"]) {
  --ink: #2f2d2a; --ink-2: #2f2d2a; --ink-3: #6b665f;
  --paper: #ffffff; --paper-2: #ffffff; --paper-3: #edeae4;
  --line: #edeae4; --line-2: #edeae4;
  --state: #b32025; --state-dk: #931a1e; --gold: #b32025; --tint: rgba(179, 32, 37, .08);
  --ok: #1b6f35; --ok-bg: rgba(27, 111, 53, .08);
  --warn: #2f2d2a; --warn-bg: #edeae4;
  --bad: #b32025; --bad-bg: rgba(179, 32, 37, .08);
  --info: #2f2d2a; --info-bg: #edeae4;
  --mast: #2f2d2a;
  --ring: 0 0 0 3px rgba(179, 32, 37, .18);
}
:root:not([data-theme="dark"]) body { background: #ffffff; color: #2f2d2a; }
/* form controls need a 3:1 edge: stone (5.7:1 on white) */
:root:not([data-theme="dark"]) body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea) { border-color: #6b665f; }
:root:not([data-theme="dark"]) body :is(input, select, textarea):focus { border-color: #b32025; }
:root:not([data-theme="dark"]) body input::placeholder, :root:not([data-theme="dark"]) body textarea::placeholder { color: #6b665f; opacity: 1; }
:root:not([data-theme="dark"]) body .lms-btn:not(.lms-btn--primary):not(.lms-btn--ink):not([class*="danger"]) { background: #ffffff; border-color: #6b665f; color: #2f2d2a; }
:root:not([data-theme="dark"]) body .lms-btn:not(.lms-btn--primary):not(.lms-btn--ink):not([class*="danger"]):hover { background: #edeae4; border-color: #2f2d2a; }
:root:not([data-theme="dark"]) body .lms-btn--primary { background: #b32025; border-color: #b32025; color: #ffffff; }
:root:not([data-theme="dark"]) body .lms-btn--primary:hover { background: #931a1e; border-color: #931a1e; }
/* tables: mist header row and hover */
:root:not([data-theme="dark"]) body .lms-table thead th { background: #edeae4; color: #2f2d2a; }
:root:not([data-theme="dark"]) body .lms-table tbody tr:hover > td { background: #edeae4; }
/* shell: white sidebar and portal bar, red only for the current item */
:root:not([data-theme="dark"]) body .lms-side { background: #ffffff; border-right: 1px solid #edeae4; }
:root:not([data-theme="dark"]) body .lms-nav { color: #2f2d2a; }
:root:not([data-theme="dark"]) body .lms-nav.is-active { background: rgba(179, 32, 37, .08); color: #b32025; }
:root:not([data-theme="dark"]) body .lms-navgrp { color: #6b665f; }
:root:not([data-theme="dark"]) body .lms-portalbar, :root:not([data-theme="dark"]) body [class*="lms-portalbar"] { background: #ffffff; border-bottom: 1px solid #edeae4; }
/* verify page: the band and the step numbers on the palette */
html body .vsx-band { background: #edeae4 !important; color: #2f2d2a !important; }
html body .vsx-band::after { content: none !important; }
html body .vsx-band__d { color: #6b665f !important; }
html body .vsx-band__ic { background: #ffffff !important; border-color: #edeae4 !important; color: #b32025 !important; backdrop-filter: none !important; }
html body .vk-step::before { background: #2f2d2a !important; color: #ffffff !important; }
html body .vk-hero { background: #ffffff !important; }
/* photo tiles keep a flat charcoal scrim so their white text stays legible */
html body .lms-stile__ov { background: rgba(47, 45, 42, .72) !important; }

/* =====================================================================
   Pass 7b · training pages (/portal/courses, /portal/calendar): the
   layout that came with licensingtls.com's course cards (white cards
   with the picture on top, a full-width "N courses" button). Pass 41
   took their licensingtls.com colours away again: the page, text, red,
   edges and buttons are the six-colour palette every other page uses
   (white page, charcoal #2F2D2A, stone #6B665F, mist #EDEAE4, red
   #B32025, hover #931A1E), and the course hero is light like the front
   site's hero. Header and footer stay the shared OHS chrome.
   ===================================================================== */
:root:not([data-theme="dark"]) body.lms-training :is(.lms-shell, .lms-main) { background: transparent; }
:root:not([data-theme="dark"]) body.lms-training .lms-notice { background: #ffffff; border: 1px solid #edeae4; color: #2f2d2a; }
:root:not([data-theme="dark"]) body.lms-training .lms-notice svg { color: #b32025; }
:root:not([data-theme="dark"]) body.lms-training .lms-notice a { color: #b32025; }
:root:not([data-theme="dark"]) body.lms-training .lms-sec-title { color: #2f2d2a; font-size: 18px; font-weight: 700; margin: 28px 0 14px; }
/* the two ways in */
:root:not([data-theme="dark"]) body.lms-training .cs-ways { gap: 20px; margin-bottom: 20px; }
:root:not([data-theme="dark"]) body.lms-training .cs-way { background: #ffffff; border: 1px solid #edeae4; border-radius: 16px; padding: 20px 22px; color: #2f2d2a; box-shadow: none; transform: none; }
:root:not([data-theme="dark"]) body.lms-training .cs-way:hover { border-color: #b32025; box-shadow: none; transform: none; }
:root:not([data-theme="dark"]) body.lms-training .cs-way small { color: #6b665f; opacity: 1; }
:root:not([data-theme="dark"]) body.lms-training .cs-way__ic { background: #edeae4; color: #b32025; border-radius: 50%; width: 44px; height: 44px; }
:root:not([data-theme="dark"]) body.lms-training .cs-way--pri { background: #b32025; border-color: #b32025; color: #ffffff; }
:root:not([data-theme="dark"]) body.lms-training .cs-way--pri:hover { background: #931a1e; border-color: #931a1e; }
:root:not([data-theme="dark"]) body.lms-training .cs-way--pri small { color: #ffffff; }
:root:not([data-theme="dark"]) body.lms-training .cs-way--pri .cs-way__ic { background: rgba(255, 255, 255, .16); color: #ffffff; }
/* sector tiles: a white card with the picture on top */
:root:not([data-theme="dark"]) body.lms-training .lms-stile { flex-direction: column; align-items: stretch; aspect-ratio: auto; max-height: none; min-height: 0; background: #ffffff; border: 1px solid #edeae4; border-radius: 16px; box-shadow: none; transform: none; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile:hover { border-color: #b32025; box-shadow: none; transform: none; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile > :is(svg.bg, img.bg) { position: relative; inset: auto; height: 180px; width: 100%; object-fit: cover; flex: none; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile__ov { display: none; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile__c { padding: 20px 22px 22px; color: #2f2d2a; display: flex; flex-direction: column; flex: 1; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile__c h3 { color: #2f2d2a; font-size: 21px; text-transform: uppercase; letter-spacing: .01em; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile__c p { color: #6b665f; font-size: 13.5px; line-height: 1.6; margin: 8px 0 18px; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile__n { margin-top: auto; justify-content: center; width: 100%; background: #ffffff; color: #2f2d2a; border: 1px solid #6b665f; border-radius: 8px; padding: 10px 12px; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
:root:not([data-theme="dark"]) body.lms-training .lms-stile:hover .lms-stile__n { background: #b32025; border-color: #b32025; color: #ffffff; }
:root:not([data-theme="dark"]) body.lms-training .grid.gap-3\.5 { gap: 24px; }
/* course lists and course pages */
:root:not([data-theme="dark"]) body.lms-training :is(.lms-vcard, .lms-card, .lms-tile) { background: #ffffff; border: 1px solid #edeae4; border-radius: 16px; box-shadow: none; }
:root:not([data-theme="dark"]) body.lms-training :is(.lms-vcard:hover, .lms-card:hover) { border-color: #b32025; }
:root:not([data-theme="dark"]) body.lms-training .lms-vcard__unit { color: #6b665f; }
:root:not([data-theme="dark"]) body.lms-training :is(.lms-vcard__fee, .lms-vcard__body h3) { color: #2f2d2a; }
:root:not([data-theme="dark"]) body.lms-training .lms-main :is(p, li, dd, small, .lms-notice) a:not(.lms-btn) { color: #b32025; }
@media (max-width: 767px) {
  :root:not([data-theme="dark"]) body.lms-training .lms-stile > :is(svg.bg, img.bg) { height: 150px; }
  :root:not([data-theme="dark"]) body.lms-training .grid.gap-3\.5 { gap: 16px; }
}
/* course hero: light like the front site's hero, the title charcoal with its last word in red, the photo on the right */
:root:not([data-theme="dark"]) body.lms-training .lms-chero { background: #ffffff; border: 1px solid #edeae4; color: #2f2d2a; border-radius: 16px; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero__l { color: #2f2d2a; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero h1 { color: #2f2d2a; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero :is(.red, em, .accent) { color: #b32025; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero__back { color: #6b665f; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero__back:hover { color: #2f2d2a; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero :is(p, .lms-chero__desc) { color: #6b665f; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero__cta { background: #b32025; border-color: #b32025; color: #ffffff; }
:root:not([data-theme="dark"]) body.lms-training .lms-chero__cta:hover { background: #931a1e; border-color: #931a1e; color: #ffffff; }

/* =====================================================================
   Pass 9 · no red accent lines, whole numbers, no red tags
   ===================================================================== */
html body .vk-hero::after, html body .lms-dlc::before { content: none !important; }
html body :is(.lms-notice, .ls-note, .ls-note.red, .ls-note.green, .ls-note.blue, .aop-callout, .gd-j, .vsx-card, .lms-card) { border-left-width: 1px !important; border-top-width: 1px !important; border-left-color: var(--line) !important; border-top-color: var(--line) !important; }
html body :is(.lms-notice, .ls-note, .aop-callout) { border-style: solid !important; }
html body .lms-tile::before, html body [class*="lms-tile--"]::before { content: none !important; }
html body .lms-stile__tag { display: none !important; }
html body.lms-training .lms-vcard__cls { display: none !important; }
:root:not([data-theme="dark"]) body.lms-training .lms-notice { border: 1px solid #edeae4 !important; }

/* pass 9: licence service cards lose the 4px side accent bar */
html body .lsc::before { content: none !important; display: none !important; }
/* pass 9: assessment stat tiles and "hot" panels lose their coloured side bars (active tile keeps its charcoal fill) */
html:root:not([data-theme="dark"]) body .lms-stat::before { content: none !important; display: none !important; }
html:root:not([data-theme="dark"]) body .adm-panel--hot { border-left: 1px solid var(--line) !important; }
/* pass 9: driver licensing. Class cards lose the side bar, class codes become tinted tiles (no solid red tags),
   the demerit band goes light (no near-black on the page body, no red rule under it) */
html:root:not([data-theme="dark"]) body .dl-card::before { content: none !important; display: none !important; }
html:root:not([data-theme="dark"]) body .dl-card--ink { --dl-c: #2f2d2a; --dl-bg: #edeae4; }
html:root:not([data-theme="dark"]) body .dl-code { background: var(--line-2) !important; color: var(--ink) !important; box-shadow: none !important; }
html:root:not([data-theme="dark"]) body .dl-card--red .dl-code { background: var(--tint) !important; color: var(--state) !important; }
html:root:not([data-theme="dark"]) body .dl-demerit { background: #ffffff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
html:root:not([data-theme="dark"]) body .dl-demerit::after { content: none !important; display: none !important; }
html:root:not([data-theme="dark"]) body .dl-demerit__ic { background: var(--tint) !important; color: var(--state) !important; }
html:root:not([data-theme="dark"]) body .dl-demerit__tx b { color: var(--ink) !important; }
html:root:not([data-theme="dark"]) body .dl-demerit__tx span { color: var(--ink-3) !important; }
html:root:not([data-theme="dark"]) body .dl-demerit__v { border-left-color: var(--line) !important; }
html:root:not([data-theme="dark"]) body .dl-demerit__v b { color: var(--state) !important; }
html:root:not([data-theme="dark"]) body .dl-demerit__v small { color: var(--ink-3) !important; }
/* pass 9: KPI, report, assessment and driver tiles. The per-card colour tokens use the palette,
   and the tiles lose their 4px side bars and tinted corner blobs */
html:root:not([data-theme="dark"]) body :is(.kp-t, .rp-card, .lms-stat, .dl-card) {
  --kp-c: #2f2d2a; --kp-bg: #edeae4; --rp-c: #2f2d2a; --rp-bg: #edeae4; --aq-c: #2f2d2a; --aq-bg: #edeae4; }
html:root:not([data-theme="dark"]) body :is(.kp-t--red, .rp-card--red, .aq--red) {
  --kp-c: #b32025; --kp-bg: rgba(179, 32, 37, .08); --rp-c: #b32025; --rp-bg: rgba(179, 32, 37, .08); --aq-c: #b32025; --aq-bg: rgba(179, 32, 37, .08); }
html:root:not([data-theme="dark"]) body :is(.kp-t--green, .rp-card--green, .aq--green) {
  --kp-c: #1b6f35; --kp-bg: rgba(27, 111, 53, .08); --rp-c: #1b6f35; --rp-bg: rgba(27, 111, 53, .08); --aq-c: #1b6f35; --aq-bg: rgba(27, 111, 53, .08); }
html:root:not([data-theme="dark"]) body :is(.kp-t, .rp-card)::before,
html:root:not([data-theme="dark"]) body :is(.kp-t, .dl-card)::after { content: none !important; display: none !important; }
html:root:not([data-theme="dark"]) body .kp-t--pub { background: #ffffff !important; border-color: var(--line) !important; }
html:root:not([data-theme="dark"]) body .kp-t--ok b { color: var(--ok) !important; }
html:root:not([data-theme="dark"]) body .kp-t--warn b { color: var(--ink) !important; }
/* pass 9: state markers stay, but in charcoal instead of red (current apply step, active portal tab) */
html:root:not([data-theme="dark"]) body .ls-rl.now { border-top-color: var(--ink) !important; }
html:root:not([data-theme="dark"]) body .lms-portal-tab.is-on { color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
/* pass 9: assessment gate note, employer invoice and enrol strips. No red side bars or red header rules;
   the "waiting on you" card keeps a charcoal ring so its state still shows */
html:root:not([data-theme="dark"]) body .aop-gate { border-left: 1px solid var(--line) !important; border: 1px solid var(--line) !important; border-radius: 9px !important; background: #ffffff !important; }
html body .lms-card.aop-you.is-you { box-shadow: 0 0 0 1px var(--ink) !important; }
html:root:not([data-theme="dark"]) body .iv-step { border: 1px solid var(--line) !important; background: #ffffff !important; }
html:root:not([data-theme="dark"]) body :is(.iv-top, .aop-inv__brand) { border-bottom: 1px solid var(--line) !important; }
html:root:not([data-theme="dark"]) body .emp-strip { border: 1px solid var(--line) !important; background: #ffffff !important; border-radius: 10px !important; }
html:root:not([data-theme="dark"]) body .emp-strip .gn { background: #ffffff !important; color: var(--state) !important; border: 1px solid var(--line) !important; }
/* pass 9: consent and declaration pages. Light hero (no navy block, no red bottom bar), kicker in charcoal,
   palette tints for the avatar and the warning state */
html:root:not([data-theme="dark"]) body .cs-hero { background: #ffffff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
html:root:not([data-theme="dark"]) body .cs-hero::after { content: none !important; display: none !important; }
html:root:not([data-theme="dark"]) body .cs-hero h1 { color: var(--ink) !important; }
html:root:not([data-theme="dark"]) body .cs-hero p { color: var(--ink-3) !important; }
html:root:not([data-theme="dark"]) body .cs-eye { color: var(--ink) !important; }
html:root:not([data-theme="dark"]) body .cs-av { background: var(--line-2) !important; }
html:root:not([data-theme="dark"]) body .cs-state--warn { background: var(--warn-bg) !important; border-color: var(--line) !important; color: var(--ink) !important; }

/* =====================================================================
   Pass 49 · the Assessment Only page for visitors (/assessment, signed
   out, body.lms-site) takes the template of the site's other public
   pages: light (layouts/app.php), the full 80rem column (the shell had
   shrunk to the width of its text), the page header as on the training
   pages, and the first visit in two columns: the application, and the
   fee beside it. One column below 900px.
   ===================================================================== */
html body.lms-site .lms-shell { width: 100%; }
html body .aop-landing { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px; align-items: start; }
html body .aop-landing > .lms-card { margin: 0; }
html body .aop-landing .aop-fee { margin: 0; }
html body .aop-landing .aop-gate { max-width: none; }
@media (max-width: 900px) {
  html body .aop-landing { grid-template-columns: minmax(0, 1fr); }
}
html body.lms-site .aop-landing__main h3 { margin: 0 0 8px !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3; color: var(--ink) !important; }
/* the account step reads as the end of the card, not as a box inside it */
html body.lms-site .aop-landing .aop-gate { margin-top: 4px; padding: 16px 0 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; }

/* =====================================================================
   Pass 50 · course cards (moved here from portal/courses.php with the
   card itself, partials/course-vcard.php) and the training catalogue
   opening a sector in place: its courses in a panel under the row of
   the tile that was clicked, a notch pointing at the tile, "Browse all"
   at the end of the heading line (as on the public licence classes).
   ===================================================================== */
.lms-vcard-wrap{display:flex;flex-direction:column}
.lms-vcard-wrap .lms-vcard{flex:1}
.lms-vcard__bar{margin-top:-1px;border:1px solid var(--line,#dfe0d9);border-top:0;border-radius:0 0 var(--radius-lg,14px) var(--radius-lg,14px);background:var(--paper-2,#fff);padding:.55rem .9rem;display:flex;justify-content:flex-end}
.lms-vcard-wrap .lms-vcard{border-bottom-left-radius:0;border-bottom-right-radius:0}
.lms-cartbtn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--state,#b32025);color:var(--state,#b32025);background:transparent;font:600 .8rem var(--font-b,inherit);cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.lms-cartbtn:hover{background:var(--state,#b32025);color:#fff}
.lms-cartbtn.is-in{border-color:var(--ok,#1f7a4d);color:var(--ok,#1f7a4d);background:var(--ok-bg,#e6f2ea)}
.lms-cartbtn.is-in:hover{background:var(--ok,#1f7a4d);color:#fff}
html body .sec-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 28px 0 14px; scroll-margin-top: 90px; }
html body .sec-bar .lms-sec-title { margin: 0 !important; }
html body .sec-all { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--state); text-decoration: none; white-space: nowrap; }
html body .sec-all:hover span { text-decoration: underline; }
html body .sec-all:focus-visible, html body .lms-stile:focus-visible { outline: 2px solid var(--state); outline-offset: 3px; }
html body .sec-chev { width: 14px; height: 14px; flex: none; transition: transform .22s ease; }
html body :is(.sec-all, .lms-stile).is-on .sec-chev { transform: rotate(180deg); }
html body .lms-stile.is-on { border-color: var(--state) !important; box-shadow: inset 0 0 0 1px var(--state) !important; }
html body .sec-panel { grid-column: 1 / -1; position: relative; display: grid; grid-template-rows: 0fr; opacity: 0; margin: 2px 0 4px; transition: grid-template-rows .32s cubic-bezier(.2, .7, .3, 1), opacity .2s ease; }
html body .sec-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
html body .sec-panel--all { margin: 0 0 20px; }
html body .sec-panel::before { content: ""; position: absolute; z-index: 1; top: -7px; left: calc(var(--notch-x, 48px) - 7px); width: 14px; height: 14px; background: color-mix(in srgb, var(--paper-3, #edeae4) 55%, var(--paper-2, #fff)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg); }
html body .sec-panel__in { min-height: 0; overflow: hidden; }
html body .sec-panel__box { padding: 22px 24px 22px; background: color-mix(in srgb, var(--paper-3, #edeae4) 55%, var(--paper-2, #fff)); border: 1px solid var(--line); }
html body .sec-panel__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
html body .sec-panel__hd { flex: 1; min-width: 0; }
html body .sec-panel__t { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); }
html body .sec-panel__b { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
html body .sec-panel__n { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--state); }
html body .sec-panel__x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer; background: var(--paper-2, #fff); border: 1px solid var(--line); color: var(--ink); }
html body .sec-panel__x:hover { border-color: var(--ink-3); }
html body .sec-panel__x svg { width: 18px; height: 18px; }
html body .sec-panel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body .sec-panel__foot { display: flex; justify-content: center; margin-top: 20px; }
html body .sec-panel__foot .lms-btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1279px) { html body .sec-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  html body .sec-panel__grid { grid-template-columns: minmax(0, 1fr); }
  html body .sec-panel__box { padding: 16px 14px 18px; }
  html body .sec-panel:not(.sec-panel--all) :is(.sec-panel__t, .sec-panel__b) { display: none; }
  html body .sec-panel:not(.sec-panel--all) .sec-panel__head { align-items: center; margin-bottom: 14px; }
  html body .sec-panel:not(.sec-panel--all) .sec-panel__n { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { html body :is(.sec-panel, .sec-chev) { transition: none; } }