/* The screen kit (FND-04): tokens, type by role, depth, buttons, tags, forms, navigation and focus, from Gabi's
   Design and UX Guide (14 October 2026) and the Clear Paths prototype v4.1.  Every page uses these classes and no
   inline style; a customer's colours (CUS-02, CUS-03) override the brand tokens only, never the fixed ones. */

/* ---------------------------------------------------------------- fonts (IBM Plex Sans, OFL 1.1, served here) */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* Brand: the customer's two colours and the tints worked out from them (CUS-02, CUS-03).  QedON's own by default. */
  --brand-dark: #003c5b;
  --brand: #1f5f99;
  --brand-hover: #174d7f;
  --brand-soft: #e8f0f8;
  --brand-soft-line: #b7cde3;
  --on-brand: #ffffff;

  /* Fixed: never change with the theme (guide 8.8). */
  --ink: #172b3a;
  --muted: #536370;
  --line: #d5dce2;
  --line-strong: #c3ccd4;
  --track: #e4e9ed;
  --bg: #f2f4f6;
  --subtle: #f7f9fa;
  --panel: #ffffff;
  --ok: #1e6b3f; --ok-bg: #e9f5ee; --ok-line: #a9d4bc;
  --warn: #8a5300; --warn-bg: #fff3e0; --warn-line: #e8c48a;
  --bad: #b42318; --bad-bg: #fbeceb; --bad-line: #e2aaa4;
  --info: #3b4a56; --info-bg: #eef1f3; --info-line: #c3ccd4;
  --focus: #1d4ed8;

  /* Type, by role (guide section 4).  Desktop sizes; the mobile sizes are below. */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: 32px; --lh-h1: 40px;
  --fs-h2: 24px; --lh-h2: 32px;
  --fs-h3: 20px; --lh-h3: 28px;
  --fs-h4: 18px; --lh-h4: 24px;
  --fs-body: 16px; --lh-body: 24px;
  --fs-small: 14px; --lh-small: 20px;

  /* Depth: the page, content panels, raised items (guide section 2). */
  --radius: 8px;
  --radius-panel: 12px;
  --shadow-panel: 0 1px 4px rgba(23, 43, 58, .06);
  --shadow-raised: 0 6px 20px rgba(23, 43, 58, .3);

  /* Layout */
  --nav-width: 240px;
  --tab-bar-height: 64px;
  --target: 44px;
  --target-touch: 48px;
  --gutter: 16px;
}

@media (max-width: 899px) {
  :root {
    --fs-h1: 26px; --lh-h1: 32px;
    --fs-h2: 22px; --lh-h2: 28px;
    --fs-h3: 18px; --lh-h3: 24px;
    --fs-h4: 16px; --lh-h4: 24px;
  }
}

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

html {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; }

h1, h2, h3, h4 { margin: 0 0 8px; color: var(--ink); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
p { margin: 0 0 12px; max-width: 70ch; }
ul, ol { margin: 0 0 12px; padding-left: 24px; }
a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }
small, .small { font-size: var(--fs-small); line-height: var(--lh-small); }
.muted { color: var(--muted); }
img, video { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: #fff; }

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

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 16px; background: var(--panel); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-raised); }
.skip-link:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none; animation: none; }
}

/* ---------------------------------------------------------------- layout: navigation on the left, tab bar on a phone */
.app { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); min-height: 100vh; }
.app-main { min-width: 0; padding: 24px var(--gutter) calc(var(--tab-bar-height) + 32px); }
.app-plain .app-main { padding-bottom: 32px; }
.page { max-width: 960px; margin: 0 auto; }
.page-narrow { max-width: 640px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }

.nav { background: var(--brand-dark); color: var(--on-brand); display: flex; flex-direction: column; }
.nav-in { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100vh; padding: 16px 12px; }
.nav-brand { display: flex; align-items: center; gap: 10px; min-height: var(--target); padding: 4px 8px 16px; color: var(--on-brand); text-decoration: none; font-weight: 600; }
.nav-brand img { max-height: 32px; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: var(--target); padding: 8px 12px; border-radius: var(--radius); color: var(--on-brand); text-decoration: none; font-weight: 600; }
.nav-link:hover { background: rgba(255, 255, 255, .12); color: var(--on-brand); }
.nav-link[aria-current="page"] { background: rgba(255, 255, 255, .18); box-shadow: inset 4px 0 0 var(--on-brand); }
.nav-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25); }
.nav-icon { width: 20px; height: 20px; flex: none; }
.tab-bar { display: none; }

@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .tab-bar { position: fixed; z-index: 50; inset: auto 0 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: var(--tab-bar-height); padding: 4px 0 env(safe-area-inset-bottom); background: var(--panel); border-top: 1px solid var(--line); }
  .tab-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--target-touch); padding: 4px 2px; color: var(--muted); text-decoration: none; font-size: var(--fs-small); line-height: 16px; text-align: center; }
  .tab-link[aria-current="page"] { color: var(--brand); font-weight: 600; }
  .tab-icon { position: relative; width: 24px; height: 24px; }
  .tab-icon .flag { position: absolute; top: -6px; left: 14px; margin: 0; }
  .app-plain .app-main { padding-bottom: 32px; }
}

/* The collapsed rail inside a course (CRS-01 fills it): only the expand button. */
.rail { background: var(--brand-dark); width: 64px; }
.rail-btn { display: grid; place-items: center; width: var(--target-touch); height: var(--target-touch); margin: 16px auto; border: 1px solid rgba(255, 255, 255, .45); border-radius: 10px; background: transparent; color: var(--on-brand); cursor: pointer; }

/* ---------------------------------------------------------------- depth: panels and raised items */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); padding: 20px; margin-bottom: 16px; min-width: 0; }
.panel-lead { padding: 24px; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.raised { background: var(--panel); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised); }
.stack > * + * { margin-top: 16px; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

/* ---------------------------------------------------------------- buttons: verb plus object, one primary per block */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--target); padding: 8px 20px; border: 2px solid transparent; border-radius: var(--radius); font: inherit; font-weight: 600; line-height: var(--lh-body); text-align: center; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.btn-secondary { background: var(--panel); border-color: var(--brand); color: var(--brand); }
.btn-secondary:hover { background: var(--brand-soft); color: var(--brand-dark); }
.btn-quiet { background: var(--panel); border: 1px solid var(--muted); color: var(--ink); padding: 8px 14px; }
.btn-quiet:hover { background: var(--subtle); }
.btn-danger { background: var(--panel); border-color: var(--bad); color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); }
.btn-sm { min-height: 36px; padding: 4px 12px; font-size: var(--fs-small); }
.btn-block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; min-height: var(--target); }
.icon-btn { display: inline-grid; place-items: center; width: var(--target); height: var(--target); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--subtle); }
@media (max-width: 899px) { .btn { min-height: var(--target-touch); } }

/* ---------------------------------------------------------------- tags and flags: words plus colour, never colour alone */
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border: 1px solid var(--info-line); border-radius: 999px; background: var(--info-bg); color: var(--info); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; white-space: nowrap; }
.tag-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.tag-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.tag-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.tag-brand { background: var(--brand-soft); border-color: var(--brand-soft-line); color: var(--brand-dark); }
.flag { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; border: 1px solid var(--warn-line); border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: var(--fs-small); line-height: 1; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 10px; border: 1px solid var(--brand-soft-line); border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: var(--fs-small); }
.chip .icon-btn { width: 24px; height: 24px; border: 0; background: transparent; }

/* ---------------------------------------------------------------- progress */
progress.bar { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--track); color: var(--brand); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
progress.bar::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
progress.bar::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

/* ---------------------------------------------------------------- forms: label above, hint, error beside the field */
.field { margin-bottom: 16px; max-width: 480px; }
.field label, .field legend { display: block; margin-bottom: 4px; font-weight: 600; }
.field-hint { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.field-error { margin: 6px 0 0; color: var(--bad); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.input, .select, .textarea { display: block; width: 100%; min-height: var(--target); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); color: var(--ink); font: inherit; }
.textarea { min-height: 120px; resize: vertical; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--target); padding: 8px 0; }
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--brand); }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }

/* ---------------------------------------------------------------- lists, rows and tables */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row-main { flex: 1 1 240px; min-width: 0; }
.row-title { font-weight: 600; }
.row-meta { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 8px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table th { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); font-weight: 600; border-top: 0; }
.table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- messages: empty, flash, inline */
.empty { text-align: center; padding: 32px 16px; }
.empty h2 { margin-bottom: 8px; }
.empty p { margin: 0 auto 16px; }
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--info-line); border-left-width: 4px; border-radius: var(--radius); background: var(--info-bg); color: var(--ink); }
.flash-ok { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); }
.flash-warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); }
.flash-bad { background: var(--bad-bg); border-color: var(--bad-line); border-left-color: var(--bad); }
.flash p { margin: 0; }
.flash-title { font-weight: 600; }

/* ---------------------------------------------------------------- the site header on the platform's own pages */
.site-header { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px var(--gutter); background: var(--brand-dark); color: var(--on-brand); }
.site-name { margin: 0; font-weight: 600; }
.site-header a { color: var(--on-brand); }

/* ---------------------------------------------------------------- the kit page (staff reference) */
.kit-section { margin-bottom: 32px; }
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.swatch { display: flex; flex-direction: column; gap: 4px; }
.swatch-colour { height: 48px; border-radius: var(--radius); border: 1px solid var(--line); }
.swatch-brand-dark { background: var(--brand-dark); }
.swatch-brand { background: var(--brand); }
.swatch-brand-soft { background: var(--brand-soft); }
.swatch-ink { background: var(--ink); }
.swatch-muted { background: var(--muted); }
.swatch-bg { background: var(--bg); }
.swatch-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.swatch-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.swatch-bad { background: var(--bad-bg); border-color: var(--bad-line); }

/* ================================================================ the course page (part: course page; CRS, SCO, ASM) */
/* Inside a course (guide 8.1): the rail with only its expand button on desktop, a course bar with Contents on a phone. */
.course-app { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 100vh; }
.course-app .rail-btn { position: sticky; top: 16px; }
.rail-btn { position: relative; }
.rail-tip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 4px 10px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 60; }
.rail-btn:hover .rail-tip, .rail-btn:focus-visible .rail-tip { opacity: 1; }
.course-body { min-width: 0; display: flex; flex-direction: column; }
.course-bar { display: none; }
.course-main { flex: 1; min-width: 0; padding: 24px var(--gutter) 48px; }
.course-main:focus { outline: none; }

/* The full menu, opened over the page from the rail. */
.course-menu { padding: 0; border: 0; margin: 0; width: var(--nav-width); max-width: 85vw; height: 100vh; max-height: 100vh; background: var(--brand-dark); color: var(--on-brand); box-shadow: var(--shadow-raised); }
.course-menu::backdrop { background: rgba(23, 43, 58, .45); }
.course-menu-in { display: flex; flex-direction: column; min-height: 100%; padding: 16px 12px; }
.course-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.course-menu-close { background: transparent; color: var(--on-brand); border-color: rgba(255, 255, 255, .45); }
.course-menu-close:hover { background: rgba(255, 255, 255, .12); }
.icon { width: 20px; height: 20px; flex: none; }

.course-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; align-items: start; }
.contents-col { position: sticky; top: 24px; }
.topic { min-width: 0; max-width: 760px; }
.topic-course { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.topic-pos { margin: 0 0 4px; color: var(--muted); }
.topic-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 32px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.topic-next { display: flex; flex-direction: column; gap: 4px; }
.topic-next .field-hint { margin: 0; }

/* CRS-01: the contents, topics joined by a line; the state is in words for screen readers as well as in the mark. */
.contents { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); padding: 16px; }
.contents-label { margin: 0 0 4px; font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-h4); }
.contents-sum { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.contents .bar { margin-bottom: 12px; }
.contents-list { list-style: none; margin: 0; padding: 0; }
.ci { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--target); padding: 4px 0; }
.ci + .ci::before { content: ""; position: absolute; left: 11px; top: -12px; height: 20px; border-left: 2px solid var(--line-strong); }
.ci-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--muted); background: var(--panel); }
.ci-done .ci-mark { color: var(--ok); }
.ci-in_progress .ci-mark { color: var(--brand); }
.ci-title { flex: 1; min-width: 0; padding: 8px 0; }
a.ci-title { color: var(--ink); text-decoration: none; }
a.ci-title:hover { text-decoration: underline; }
.ci-current .ci-title { font-weight: 700; color: var(--brand-dark); }
.ci-locked .ci-title { color: var(--muted); }
.ci-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ci-final { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ci-final::before { display: none; }

/* The contents as a bottom sheet on a phone. */
.sheet { padding: 0; border: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 85vh; border-radius: var(--radius-panel) var(--radius-panel) 0 0; background: var(--panel); box-shadow: var(--shadow-raised); }
.sheet::backdrop { background: rgba(23, 43, 58, .45); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sheet-title { margin: 0; font-weight: 700; }
.sheet .contents { border: 0; box-shadow: none; border-radius: 0; }

/* CRS-06: Read Aloud.  Stop is a square, never an X. */
.read-aloud { display: grid; gap: 8px; margin: 16px 0 24px; padding: 12px 16px; }
.read-aloud[hidden] { display: none; }
.ra-label { margin: 0; font-weight: 700; }
.ra-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ra-play { min-width: 112px; }
.ra-icon-pause { display: none; }
.read-aloud[data-state="reading"] .ra-icon-play { display: none; }
.read-aloud[data-state="reading"] .ra-icon-pause { display: inline; }
.ra-speed-label { font-weight: 600; margin-left: 8px; }
.ra-speed { width: auto; min-width: 120px; }
.ra-meter { display: grid; gap: 4px; }
.ra-status { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.read-aloud[data-state="reading"] .ra-status { color: var(--ink); font-weight: 600; }
.is-reading { background: var(--warn-bg); box-shadow: 0 0 0 4px var(--warn-bg); border-radius: 2px; }

/* Sections (CRS-02 to CRS-05, ASM-01, SCO-01). */
.sec { margin: 0 0 24px; }
.sec h2 { margin-top: 8px; }
.sec-hint { color: var(--muted); }
.sec-wait { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.sec-figure { margin: 0; }
.sec-figure img, .sec-figure video { display: block; border-radius: var(--radius); background: var(--subtle); }
.sec-figure video { width: 100%; }
.sec-figure figcaption { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.transcript { margin-top: 8px; }
.transcript summary, .reveal summary { cursor: pointer; min-height: var(--target); display: flex; align-items: center; font-weight: 600; color: var(--brand); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card-item { display: flex; flex-direction: column; gap: 6px; }
.card { display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 160px; padding: 16px; border: 2px solid var(--brand-soft-line); border-radius: var(--radius-panel); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-panel); }
.card:hover { border-color: var(--brand); }
.card[data-side="back"] { background: var(--brand-soft); border-color: var(--brand); }
.card-label { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.card-face { flex: 1; font-size: var(--fs-h4); line-height: var(--lh-h4); }
.card-face[hidden] { display: none; }
.card-turn { display: inline-flex; gap: 6px; align-items: center; color: var(--brand); font-size: var(--fs-small); font-weight: 600; }
.card-seen { display: inline-flex; gap: 6px; align-items: center; margin: 0; color: var(--ok); font-size: var(--fs-small); font-weight: 600; }
.card-seen[hidden] { display: none; }

.reveals { border-top: 1px solid var(--line); }
.reveal { border-bottom: 1px solid var(--line); }
.reveal summary { padding: 8px 0; gap: 8px; }
.reveal-seen { color: var(--muted); font-weight: 400; font-size: var(--fs-small); }
.reveal-body { padding: 0 0 12px; }

.scenario { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px; }
.scn-pos { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.scn-text { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.scn-set, .cyu-set, .asm-set { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.scn-set legend, .cyu-set legend { font-weight: 600; margin-bottom: 4px; }
.scn-feedback { padding: 12px 16px; border-left: 4px solid var(--brand); background: var(--panel); border-radius: var(--radius); }
.scn-end { font-weight: 600; }
.scn-form .btn, .scenario > .btn { margin-right: 8px; }

.cyu { padding: 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--panel); }
.cyu-pos, .asm-pos { display: block; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.cyu-stem { display: block; }
.cyu-feedback { margin: 12px 0 0; font-weight: 600; }
.cyu-feedback:empty { display: none; }
.cyu-feedback.is-right { color: var(--ok); }
.cyu-feedback.is-wrong { color: var(--bad); }

.pkg { display: grid; gap: 8px; }
.pkg-frame { width: 100%; height: 70vh; min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.pkg-status { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ASM-02 to ASM-04: the Final Assessment, one question a screen, no clock. */
.asm { max-width: 760px; margin: 0 auto; }
.asm-terms { color: var(--muted); }
.asm .bar { margin-bottom: 16px; }
.asm-stem { margin: 4px 0 12px; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.asm-saved { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.asm-score { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.lead-line { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
.asm-locked { font-weight: 600; }

@media (max-width: 899px) {
  .course-app { grid-template-columns: minmax(0, 1fr); }
  .course-app .rail { display: none; }
  .course-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 4px var(--gutter); background: var(--panel); border-bottom: 1px solid var(--line); }
  .course-bar-title { margin: 0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .course-bar-btn { min-height: var(--target-touch); }
  .course-main { padding-bottom: calc(var(--tab-bar-height) + 32px); }
  .course-grid { grid-template-columns: minmax(0, 1fr); }
  .contents-col { display: none; }
  .pkg-frame { height: 75vh; min-height: 400px; }
  .card { min-height: 120px; }
}

/* ================================================================ Sign-in and People (SGN, PPL, CUS-05) */
/* ---------------------------------------------------------------- sign-in pages: one centred panel */
.auth { max-width: 480px; margin: 24px auto 0; }
.auth-wide { max-width: 640px; }
.auth-card { padding: 24px; }
.auth-card form { margin-top: 16px; }
.auth-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-more form { margin: 0; }
.auth-link { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }
.auth-help { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.steps { margin-bottom: 16px; }
.qr-box { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 8px 0 16px; }
.qr { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.qr-key { margin: 0; }
.qr-key code { display: block; font-size: var(--fs-body); letter-spacing: .06em; word-break: break-all; }

/* ---------------------------------------------------------------- the profile menu: a disclosure with two links */
.profile-menu summary { list-style: none; cursor: pointer; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu[open] summary { background: rgba(255, 255, 255, .12); }
.profile-menu-items { padding: 4px 0 0 12px; }
.profile-menu-items form { margin: 0; }
.nav-button { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.nav-group { margin: 16px 12px 4px; color: var(--on-brand); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; opacity: .85; }

/* ---------------------------------------------------------------- facts, finding people, permissions */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0 0 12px; }
.facts dt { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.link-list { list-style: none; padding: 0; }
.link-list a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }
.find-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; align-items: end; margin-bottom: 8px; }
.find-bar .field { max-width: none; }
.find-actions { margin-bottom: 16px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.fieldset { margin-bottom: 8px; }
.fieldset legend { margin-bottom: 8px; font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); }
.perm-table tbody th { color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; border-top: 1px solid var(--line); }
.perm-yes { font-weight: 600; color: var(--ok); }
.perm-no { color: var(--muted); }

/* ---------------------------------------------------------------- QedON staff pages: header navigation and a customer's tabs */
.staff-header { flex-wrap: wrap; justify-content: space-between; }
.staff-where { margin-left: 8px; font-weight: 400; }
.staff-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.staff-nav form { margin: 0; }
.staff-nav-link { display: inline-flex; align-items: center; min-height: var(--target); padding: 8px 12px; border-radius: var(--radius); color: var(--on-brand); text-decoration: none; font-weight: 600; }
.staff-nav-link:hover { background: rgba(255, 255, 255, .12); color: var(--on-brand); }
.staff-nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--on-brand); }
.staff-nav-button { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.sub-nav-link { display: inline-flex; align-items: center; min-height: var(--target); padding: 8px 14px; color: var(--ink); text-decoration: none; font-weight: 600; }
.sub-nav-link[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }

@media (max-width: 899px) {
  .staff-nav-link, .sub-nav-link, .auth-link, .link-list a { min-height: var(--target-touch); }
}
/* ---------------------------------------------------------------- QCB Light, the course builder (QedON staff only) */
.qcb-page { max-width: 1240px; }
.qcb-customer { margin: 0 0 0 auto; font-weight: 600; }
.qcb-builder { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.qcb-tree { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 12px; }
.qcb-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); padding: 0 8px; }
.qcb-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.qcb-topics, .qcb-sections { list-style: none; margin: 0; padding: 0; }
.qcb-topic { margin-bottom: 8px; }
.qcb-sections { margin-left: 18px; padding-left: 8px; border-left: 2px solid var(--line); }
.qcb-link { display: flex; flex-direction: column; justify-content: center; min-height: var(--target); padding: 6px 8px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.qcb-link:hover { background: var(--subtle); color: var(--ink); }
.qcb-link[aria-current="page"] { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); font-weight: 600; }
.qcb-topic-link { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; font-weight: 600; }
.qcb-n { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--brand-dark); color: var(--on-brand); font-size: var(--fs-small); }
.qcb-s-title { overflow-wrap: anywhere; }
.qcb-s-meta { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; }
.qcb-empty-topic { margin: 0 0 0 44px; }
.qcb-final-link { margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; }
.qcb-editor { min-width: 0; }
.qcb-editor-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.qcb-position { margin-bottom: 4px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.qcb-block { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.qcb-block > h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.qcb-source { margin: 12px 0 16px; padding: 12px 16px; border: 1px solid var(--brand-soft-line); border-left-width: 4px; border-radius: var(--radius); background: var(--brand-soft); }
.qcb-pre { white-space: pre-wrap; margin: 0; max-width: none; }
.qcb-field-wide { max-width: none; }
.qcb-group { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.qcb-group legend { padding: 0 6px; font-weight: 600; }
.qcb-choice { background: var(--subtle); }
.qcb-options td { vertical-align: middle; }
.qcb-options td:last-child { width: 140px; }
.qcb-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.qcb-add .field { margin-bottom: 0; }
.qcb-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.qcb-actions > * + * { margin-top: 12px; }
.qcb-delete summary { list-style: none; display: inline-flex; }
.qcb-delete summary::-webkit-details-marker { display: none; }
.qcb-delete-body { margin-top: 8px; padding: 12px 16px; border: 1px solid var(--bad-line); border-radius: var(--radius); background: var(--bad-bg); }
.qcb-thumb { display: block; max-height: 240px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.qcb-video { display: block; width: 100%; max-width: 640px; margin-bottom: 12px; background: var(--ink); border-radius: var(--radius); }
.qcb-frame { display: grid; place-items: center; min-height: 160px; padding: 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--subtle); text-align: center; }
.qcb-frame-package { min-height: 240px; }
.qcb-problems li { margin-bottom: 8px; }
.qcb-rows .row p { margin: 4px 0; }

/* The preview: each section as a designer checks it. */
.qcb-preview-topic > .qcb-render + .qcb-render { margin-top: 20px; }
.qcb-strapline { color: var(--muted); }
.qcb-figure { margin: 0; }
.qcb-figure img { border-radius: var(--radius); }
.qcb-figure figcaption { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); }
.qcb-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.qcb-disclosure { margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.qcb-disclosure summary { min-height: var(--target); padding: 10px 14px; cursor: pointer; font-weight: 600; }
.qcb-disclosure > :not(summary) { padding: 0 14px; }
.qcb-question { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--subtle); }
.qcb-stem { font-weight: 600; }
.qcb-steps > li { margin-bottom: 12px; }

@media (max-width: 899px) {
  .qcb-builder { grid-template-columns: minmax(0, 1fr); }
  .qcb-tree { position: static; max-height: none; }
  .qcb-link, .qcb-page .btn { min-height: var(--target-touch); }
}

/* ---------------------------------------------------------------- Admin and the audit trail: the log, Recently Deleted, plans, settings */
.audit-rows .row { align-items: flex-start; }
.audit-details { margin-top: 4px; }
.audit-details summary { display: inline-flex; align-items: center; min-height: var(--target); cursor: pointer; color: var(--brand); font-weight: 600; }
.audit-summary { margin: 8px 0 0; padding: 12px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-small); line-height: var(--lh-small); }
.plan-list { margin: 0 0 8px; padding-left: 20px; }
.security-value { overflow-wrap: anywhere; }
.attention { color: var(--bad); font-weight: 600; }
.attention-list { margin: 0; padding-left: 18px; }
@media (max-width: 899px) {
  .audit-details summary { min-height: var(--target-touch); }
}

/* ================================================================ Courses and Home (CLS-01, CLS-02, HOM-01, HOM-03, HOM-04, HOM-06) */
.back-link { margin-bottom: 8px; }
.back-link a, .target-link, .course-link { display: inline-flex; align-items: center; min-height: var(--target); }
.page-actions { margin-bottom: 16px; }

/* A segmented switch: the status buttons and Table or Tiles.  The pressed one is marked by more than colour. */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.seg-b { min-height: var(--target); padding: 8px 14px; border: 0; border-left: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.seg-b:first-child { border-left: 0; }
.seg-b:hover { background: var(--subtle); }
.seg-b[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; box-shadow: inset 0 -3px 0 var(--brand); }
.seg-n { color: var(--muted); font-weight: 400; }
.seg-b[aria-pressed="true"] .seg-n { color: var(--brand-dark); }

/* CLS-01 and HOM-03: one row of controls, read left to right. */
.course-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.control-search { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; }
.control-search .input { flex: 1; min-width: 0; }
.control-sort { display: flex; align-items: center; gap: 8px; }
.control-sort label { font-weight: 600; white-space: nowrap; }
.control-sort .select { width: auto; }
.filter { position: relative; }
.filter > summary { list-style: none; }
.filter > summary::-webkit-details-marker { display: none; }
.filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: var(--fs-small); line-height: 1; }
.filter-panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 2 * var(--gutter))); padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised); }
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.filter-head h2 { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); }
.filter-panel legend { font-weight: 600; margin-bottom: 4px; }
.filter-panel .check { align-items: center; }
.check-n { margin-left: auto; color: var(--muted); }
.filter-actions { display: grid; gap: 8px; }
.filter-actions .btn { width: 100%; }
.shown-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.shown-line { margin: 0; }
.chip-link { min-height: var(--target); padding: 4px 14px; text-decoration: none; font-weight: 600; }
.chip-link:hover { background: var(--brand-soft-line); color: var(--brand-dark); }
.chip-x { font-weight: 700; }

/* The course list: a real table (guide 8.8); Tiles lays the same rows out as cards, and so does a phone. */
.course-table td { vertical-align: middle; }
.course-type { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.course-link { font-weight: 600; }
.course-cell .row-meta { margin: 2px 0 0; }
.course-cell progress.bar { max-width: 240px; margin-top: 8px; }
.course-date { white-space: nowrap; }
.course-date-warn { color: var(--warn); font-weight: 600; }
.course-action { text-align: right; }
.course-list-tiles { background: transparent; border: 0; box-shadow: none; padding: 0; }
.course-list-tiles thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.course-list-tiles tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.course-list-tiles tr { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.course-list-tiles td { display: block; padding: 0; border: 0; text-align: left; }
.course-list-tiles .course-action { margin-top: auto; padding-top: 8px; }
.course-list-tiles .course-action .btn { width: 100%; }
@media (max-width: 899px) {
  .back-link a, .target-link, .course-link, .seg-b, .chip-link { min-height: var(--target-touch); }
  .view-switch { display: none; }
  .course-list { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .course-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .course-list tbody { display: grid; gap: 12px; }
  .course-list tr { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); }
  .course-list td { display: block; padding: 0; border: 0; text-align: left; }
  .course-list .course-action .btn { width: 100%; }
  .control-sort, .filter { flex: 1 1 auto; }
  .filter-panel { left: 0; right: auto; }
}

/* HOM-03 and HOM-04: the library and the viewer. */
.doc-row .btn { flex: none; }
.doc-head { align-items: center; }
.doc-frame { display: block; width: 100%; height: 75vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--subtle); }
.doc-alt { margin: 12px 0 0; }
.confirm-block .check { max-width: 60ch; }

/* CLS-02: picking people and teams. */
.pick-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 420px; overflow-y: auto; }
.pick-list .check { padding: 6px 0; }
.check-strong { font-weight: 600; }
.assign-form legend h2 { margin: 0 0 8px; }
.field-wide { max-width: 640px; }

/* HOM-01: Home.  The welcome panel, To Do, then News and Updates (guide 8.3). */
.welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; }
.welcome-text { flex: 1 1 auto; min-width: 0; }
.welcome-text p { margin: 0; }
.welcome-art { flex: none; width: 160px; height: 110px; }
.empty-art { display: block; width: 140px; height: 130px; margin: 0 auto 8px; }
.art-shadow { fill: var(--track); }
.art-page { fill: var(--panel); stroke: var(--brand); stroke-width: 2; }
.art-line { fill: none; stroke: var(--brand-soft-line); stroke-width: 3; stroke-linecap: round; }
.art-badge { fill: var(--brand); }
.art-ok { fill: var(--ok); }
.art-tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.home-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; margin-bottom: 16px; }
.todo-list, .news-list { list-style: none; margin: 0 0 16px; padding: 0; }
.todo-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 12px; }
.todo-text { flex: 1 1 220px; min-width: 0; }
.todo-text h3 { margin-bottom: 6px; font-size: var(--fs-h4); line-height: var(--lh-h4); }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.news-list { padding: 4px 20px; }
.news-item { padding: 14px 0; border-top: 1px solid var(--line); }
.news-item:first-child { border-top: 0; }
.news-item h3 { margin: 8px 0 4px; font-size: var(--fs-h4); line-height: var(--lh-h4); }
.news-item p { margin: 0; }
.tag-icon { width: 16px; height: 16px; flex: none; }
@media (max-width: 899px) {
  .home-cols { grid-template-columns: minmax(0, 1fr); }
  .welcome-art { display: none; }
  .todo-item .btn { width: 100%; }
}

/* ================================================================ Ask Nana, the learning assistant (NAN) */
/* ---------------------------------------------------------------- the floating button and the panel over the page */
.nana-icon { width: 20px; height: 20px; flex: none; }
.nana-fab { position: fixed; z-index: 60; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 20px; border: 2px solid var(--brand); border-radius: 999px; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; box-shadow: var(--shadow-raised); cursor: pointer; }
.nana-fab:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.nana[data-side="left"] .nana-fab, .nana[data-side="left"] .nana-bar { right: auto; left: 24px; }
.nana-fab[hidden], .nana-bar[hidden] { display: none; }
/* Room for the last item to scroll clear of the button (guide 8.8). */
body:has(.nana-fab) .app-main, body:has(.nana-fab) .course-main { padding-bottom: 112px; }

.nana-panel { position: fixed; z-index: 70; inset: auto 24px 24px auto; width: min(420px, calc(100vw - 32px)); height: min(680px, calc(100vh - 48px)); margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-raised); overflow: hidden; }
.nana-panel[open] { display: flex; flex-direction: column; }
.nana-panel::backdrop { background: rgba(23, 43, 58, .12); }
.nana[data-side="left"] .nana-panel { inset: auto auto 24px 24px; }
.nana-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; background: var(--brand-dark); color: var(--on-brand); }
.nana-head-text { min-width: 0; }
.nana-title { margin: 0; color: var(--on-brand); font-size: var(--fs-h4); line-height: var(--lh-h4); }
.nana-sub { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.nana-tool { display: inline-grid; place-items: center; width: var(--target); height: var(--target); border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; }
.nana-tool:hover { background: rgba(255, 255, 255, .14); color: inherit; }
.nana-head :focus-visible { outline-color: #fff; }
.nana-ai-note { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--subtle); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); max-width: none; }

/* ---------------------------------------------------------------- the conversation */
.nana-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.nana-log:focus-visible { outline-offset: -3px; }
.nana-empty { color: var(--muted); }
.nana-msg { margin-bottom: 16px; }
.nana-who { margin: 0 0 2px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--muted); }
.nana-text { padding: 10px 14px; border-radius: var(--radius-panel); background: var(--subtle); border: 1px solid var(--line); overflow-wrap: anywhere; }
.nana-text p, .nana-text ul { margin: 0 0 8px; }
.nana-text > :last-child { margin-bottom: 0; }
.nana-msg-you .nana-text { background: var(--brand-soft); border-color: var(--brand-soft-line); }
.nana-sources { margin-top: 8px; }
.nana-sources-title { margin: 0 0 2px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.nana-source-list { margin: 0; padding-left: 24px; font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-source-list li { padding: 0; }
.nana-source-list a, .nana-contact a, .nana-caption-sources a { display: inline-flex; align-items: center; min-height: var(--target); }
.nana-contact { margin: 8px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-status { margin: 0; padding: 4px 16px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-status:empty { display: none; }
.nana-status.is-warn { padding: 8px 16px; background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.nana-form { padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.nana-label { display: block; margin-bottom: 4px; font-weight: 600; font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-input-row { display: flex; gap: 8px; align-items: flex-end; }
.nana-input { flex: 1; min-height: 52px; max-height: 160px; resize: vertical; }
.nana-send { flex: none; padding: 8px 14px; }
.nana-voice-row:empty { display: none; }
.nana-voice-row { margin-top: 8px; }
.nana-summary { margin: 12px 16px 0; padding: 12px 14px; border: 1px solid var(--ok-line); border-radius: var(--radius); background: var(--ok-bg); }
.nana-summary p { margin: 0 0 6px; }

/* ---------------------------------------------------------------- minimised, docked */
.nana-bar { position: fixed; z-index: 60; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); box-shadow: var(--shadow-raised); }
.nana-bar-text { margin: 0; font-weight: 600; }
.nana-bar-actions { display: flex; align-items: center; gap: 4px; }
.nana-bar .nana-tool { color: var(--ink); }
.nana-bar .nana-tool:hover { background: var(--subtle); }
/* Docked: the page narrows and the panel takes a column, so the lesson stays in view (NAN-08). */
.nana-panel.is-docked { inset: 0 0 0 auto; width: 400px; height: 100vh; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; }
.nana[data-side="left"] .nana-panel.is-docked { inset: 0 auto 0 0; border-width: 0 1px 0 0; }
body.nana-docked-right .app, body.nana-docked-right .course-app { margin-right: 400px; }
body.nana-docked-left .app, body.nana-docked-left .course-app { margin-left: 400px; }

/* ---------------------------------------------------------------- its own window (NAN-08) */
.nana-window { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.page:has(.nana-window) { max-width: 1200px; }
.nana-history { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px; }
.nana-history-title { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.nana-group-title { margin: 16px 0 4px; font-size: var(--fs-body); line-height: var(--lh-body); }
.nana-history-list { list-style: none; margin: 0; padding: 0; }
.nana-history-link { display: block; min-height: var(--target); padding: 8px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nana-history-link:hover { background: var(--subtle); color: var(--ink); }
.nana-history-link[aria-current="page"] { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
.nana-history-q { display: block; font-weight: 600; overflow-wrap: anywhere; }
.nana-history-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-main { display: flex; flex-direction: column; min-height: 70vh; padding: 0; overflow: hidden; }
.nana-main-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 16px 16px 8px; }
.nana-main-head h2 { margin-bottom: 0; }
.nana-main-head p { margin: 4px 0 0; }
.nana-main .nana-ai-note { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- a phone: a near full-height sheet */
@media (max-width: 899px) {
  .nana-fab, .nana-bar { right: 16px; bottom: calc(var(--tab-bar-height) + 12px + env(safe-area-inset-bottom)); }
  .nana[data-side="left"] .nana-fab, .nana[data-side="left"] .nana-bar { left: 16px; }
  body:has(.nana-fab) .app-main, body:has(.nana-fab) .course-main { padding-bottom: calc(var(--tab-bar-height) + 96px); }
  .nana-panel, .nana[data-side="left"] .nana-panel { inset: auto 0 0 0; width: 100%; max-width: none; height: calc(100dvh - 24px); max-height: none; border-radius: 16px 16px 0 0; }
  .nana-dock-button { display: none; }
  .nana-tool { width: var(--target-touch); height: var(--target-touch); }
  .nana-window { grid-template-columns: minmax(0, 1fr); }
  .nana-history { position: static; max-height: none; }
  .nana-send span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ---------------------------------------------------------------- two-way voice (NAN-06): green, captions always on */
.nana-voice-btn { background: var(--ok); border-color: var(--ok); color: #fff; }
.nana-voice-btn:hover { background: #17552f; border-color: #17552f; color: #fff; }
.nana-voice-btn[aria-disabled="true"] { background: var(--track); border-color: var(--line-strong); color: var(--muted); opacity: 1; }
.nana-voice-why { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-tip { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--ok-line); border-radius: var(--radius); background: var(--ok-bg); font-size: var(--fs-small); line-height: var(--lh-small); }
.nana-tip[hidden], .nana-voice[hidden], .nana-voice-view[hidden], .nana-bar-voice[hidden] { display: none; }
.nana-panel.is-live .nana-head { background: var(--ok); }
.nana-panel.is-voice .nana-log, .nana-panel.is-voice .nana-form, .nana-panel.is-voice .nana-status { display: none; }
.nana-voice { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 16px; }
.nana-voice-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.nana-voice-title { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.nana-voice-list { padding-left: 20px; }
.nana-voice-list li { margin-bottom: 6px; }
.nana-live-tag { margin: 0 0 4px; }
.nana-live-status { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--ok); }
.nana-live-status.is-paused { color: var(--warn); }
.nana-live-hint { margin: 4px 0 12px; color: var(--muted); }
.nana-captions { flex: 1; min-height: 120px; overflow-y: auto; padding: 8px 0; border-top: 1px solid var(--line); }
.nana-caption { margin: 0 0 8px; }
.nana-caption-who { font-weight: 700; }
.nana-live-controls { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.nana-live-btn { flex: 1; min-height: var(--target); }
.nana-voice-problem { padding: 12px 14px; border: 1px solid var(--warn-line); border-left-width: 4px; border-radius: var(--radius); background: var(--warn-bg); flex: none; }
.nana-voice-summary { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--ok-line); border-radius: var(--radius-panel); background: var(--ok-bg); }
.nana-voice-summary p { margin: 0 0 6px; }
.nana-voice-summary details { margin-top: 6px; }
.nana-voice-summary summary { min-height: var(--target); display: flex; align-items: center; color: var(--brand); text-decoration: underline; cursor: pointer; }
.nana-bar.is-live { border-color: var(--ok); background: var(--ok); }
.nana-bar.is-live .nana-bar-text { color: #fff; }
.nana-bar.is-live .nana-tool { color: #fff; }
.nana-bar .nana-bar-voice { min-height: var(--target); padding: 4px 12px; font-size: var(--fs-small); }
@media (max-width: 899px) {
  .nana-live-btn, .nana-bar .nana-bar-voice { min-height: var(--target-touch); }
  .nana-live-status { font-size: var(--fs-h1); line-height: var(--lh-h1); }
}

/* ================================================================ Certificates, and Progress and Results (CRT, PRG) */
/* A form around one button takes no box of its own, so the button sits in the row or cell as a link would. */
.action-form { display: contents; }
.cert-title { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.cert-row .row-meta { margin: 2px 0 0; }
.cert-date { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.cert-preview { height: auto; aspect-ratio: 297 / 210; min-height: 280px; }
/* ---------------------------------------------------------------- Progress and Results */
.prg-filters { align-items: flex-end; }
.prg-actions { margin-bottom: 16px; }
.prg-figure { margin: 4px 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; color: var(--ink); }
.prg-target { margin: 0 0 12px; color: var(--muted); }
.prg-set-target summary, .prg-names summary { cursor: pointer; }
.prg-set-target form { margin-top: 12px; max-width: 360px; }
.prg-short { max-width: 200px; }
.prg-table th[scope="row"] { color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-body); min-width: 200px; }
.prg-kind { display: block; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; }
.prg-cell { white-space: nowrap; min-width: 96px; }
.prg-pct { display: block; font-weight: 600; }
.prg-of { display: block; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.prg-under .prg-pct { color: var(--warn); }
.prg-cell .tag { margin-top: 4px; }
.prg-none { color: var(--muted); font-size: var(--fs-small); }
.prg-result .bar { width: 100%; max-width: 420px; margin: 6px 0 2px; }
.prg-missed { margin: 12px 0 0; }
.prg-name-list { margin: 8px 0 0; padding-left: 20px; }
.prg-name-list li { margin-bottom: 4px; }
.prg-period-note { flex-basis: 100%; margin: 0; }

/* ---------------------------------------------------------------- Branding and platform (CUS-03, CUS-04, PHN-01, QUA-07, QUA-08) */
/* The customer's logo sits on a white plate, so a dark logo still reads on the brand's dark navigation. */
.brand-logo { display: block; flex: none; width: auto; height: 40px; max-width: 200px; padding: 4px 8px; border-radius: 6px; background: var(--panel); object-fit: contain; }
.nav-brand .brand-logo { max-height: none; }
/* Notes for the copy installed on the home screen only, and for the browser only (PHN-01, D29).  The media query
   alone covers Android; the class from platform.js covers an iPhone, which reports navigator.standalone. */
.standalone-only { display: none; }
.is-standalone .standalone-only { display: block; }
.is-standalone .browser-only { display: none; }
@media (display-mode: standalone) {
  .standalone-only { display: block; }
  .browser-only { display: none; }
}
/* The privacy notice (QUA-07): QedON's own wording marked until written; the footer link on signed-in pages. */
.notice { max-width: 760px; }
.notice h2 { margin-top: 32px; }
.notice-placeholder { padding: 12px 16px; border: 2px dashed var(--warn-line); border-radius: var(--radius); background: var(--warn-bg); }
.notice-placeholder-tag { display: block; color: var(--warn); font-weight: 600; }
.app-footer { margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-small); }
.app-footer a { display: inline-flex; align-items: center; min-height: var(--target); }
.install-steps { margin: 4px 0 16px; padding-left: 24px; }
/* The staff pages for mail and errors (EML-01, QUA-08). */
.errors-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }