/* =========================================================================
   Autosecure Elite Training Academy — site styles.
   One stylesheet, no framework, no build step. Edit :root to rebrand.
   ========================================================================= */
:root {
  /* AutoSecure brand: black, charcoal and signal orange. */
  --bg:#0b0b0c; --surface:#141416; --surface-2:#1c1c1f; --border:#2a2a2e;
  --text:#f2f2f3; --muted:#a3a5ab; --accent:#ff6a13; --accent-2:#ff8a45;
  --good:#3ddc97; --radius:14px; --maxw:1160px;
  --hero-image:url(../img/hero.webp);              /* 1920x819 wide crop, for desktop */
  --hero-image-mobile:url(../img/hero-mobile.webp); /* 1024x1536 portrait crop, for phones */
}
* { box-sizing:border-box; }
/* Class-based display rules would otherwise beat the browser's own
   [hidden] rule, leaving "hidden" buttons on screen. */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { line-height:1.15; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.narrow { max-width:780px; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.4rem; border-radius:999px;
  font-weight:700; font-size:.95rem; cursor:pointer; border:1px solid transparent; font-family:inherit;
  transition:transform .08s ease, background .15s ease, border-color .15s ease; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); }
.btn-ghost { background:transparent; border-color:var(--border); color:var(--text); }
.btn-ghost:hover { border-color:var(--accent); }
.btn-block { width:100%; }
.btn-sm { padding:.55rem 1rem; font-size:.85rem; }

/* header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(11,11,12,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
/* The public pages fold their links into the menu button on a phone, so the
   bar stays one row. The trainee area and the editor keep theirs on show,
   and on a narrow screen those wrap to a second row — so the bar grows to
   fit rather than holding 72px and letting the page slide underneath it. */
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:72px; flex-wrap:wrap; padding-block:8px; }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px; line-height:1.1; }
.brand .logo { width:38px; height:auto; flex:none; }
.brand .word { text-transform:uppercase; font-weight:900; font-size:1.05rem; letter-spacing:.5px; color:#fff; }
.brand .word b { color:var(--accent); font-weight:900; }
.brand small { display:block; font-weight:600; font-size:.62rem; color:#d0d2d6; letter-spacing:2.6px; text-transform:uppercase; margin-top:2px; }
.site-footer .brand .logo { width:44px; }
.nav-links { display:flex; align-items:center; gap:1.5rem; }
.nav-links a { color:var(--muted); font-weight:600; font-size:.95rem; }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-links .btn { color:#fff; }
.nav-toggle { display:none; background:none; border:0; color:var(--text); font-size:1.6rem; cursor:pointer; }

/* hero */
.hero { position:relative; padding:88px 0 64px; overflow:hidden; }
/* The livery shot is a wide 2.34:1 photo with the car on the right. The
   gradient keeps the headline readable over the dark left of the frame and
   clears early enough for the car to actually read on the right. */
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,11,12,.97) 0%, rgba(11,11,12,.9) 34%, rgba(11,11,12,.5) 58%, rgba(11,11,12,.12) 82%, rgba(11,11,12,0) 100%),
    var(--hero-image) center right / cover no-repeat; }
.hero .container { position:relative; }
.hero-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:.78rem; margin:0 0 .6rem; }
.hero h1 { font-size:clamp(2.2rem,5.2vw,3.7rem); margin:0 0 1rem; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .lead { color:var(--muted); font-size:1.15rem; max-width:560px; margin:0 0 1.1rem; }
/* The one thing a visitor must not get wrong: this is taught in a workshop,
   not watched at home. */
.hero .lead-note { color:var(--text); font-size:1rem; max-width:560px;
  margin:0 0 1.8rem; padding-left:.9rem; border-left:3px solid var(--accent); }
.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; }
.hero-panel { background:rgba(20,20,22,.85); backdrop-filter:blur(6px); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
.hero-panel h3 { margin:0 0 .8rem; font-size:1rem; color:var(--muted); font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.hero-panel ul { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.hero-panel li { display:flex; gap:.7rem; align-items:flex-start; }
.hero-panel li .tick { color:var(--good); font-weight:900; flex:none; }

/* stats strip */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; padding:26px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat { text-align:center; }
.stat strong { display:block; font-size:1.8rem; color:var(--accent); }
.stat span { color:var(--muted); font-size:.88rem; }

section { padding:64px 0; }
section.alt { background:var(--surface); }
.section-head { text-align:center; margin-bottom:2.2rem; }
.section-head h2 { font-size:clamp(1.7rem,3.6vw,2.4rem); margin:0 0 .5rem; }
.section-head p { color:var(--muted); margin:0 auto; max-width:640px; }

/* course cards */
.grid { display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
/* one course on its own gets a wider, centred card rather than a narrow column */
.grid.single { grid-template-columns:minmax(0,620px); justify-content:center; }
.grid.single .course-card .body { padding:16px 24px 24px; }
.grid.single .course-card h3 { font-size:1.45rem; }
.grid.single .course-card .desc { font-size:1rem; }
.course-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; transition:border-color .15s ease, transform .1s ease; }
section.alt .course-card { background:var(--surface-2); }
.course-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.course-card .top { padding:20px 20px 0; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.course-card .level { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:#d0d2d6; background:rgba(255,255,255,.08); padding:.25rem .6rem; border-radius:6px; }
.course-card .level.l2 { color:var(--accent); background:rgba(255,106,19,.14); }
.course-card .level.l3 { color:#fff; background:var(--accent); }
.course-card .duration { color:var(--muted); font-size:.85rem; }
.course-card .body { padding:14px 20px 20px; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.course-card h3 { margin:0; font-size:1.15rem; }
.course-card .desc { color:var(--muted); font-size:.92rem; flex:1; margin:0; }
.course-card .row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.4rem; }
.course-card .price { font-size:1.3rem; font-weight:800; color:var(--accent); }
.course-card .price small { font-size:.75rem; color:var(--muted); font-weight:600; margin-left:.3rem; }

/* features / steps */
.features { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
/* Two choices side by side, rather than auto-fitting into three columns
   with one stranded on the next row. Stacks on a narrow screen. */
.features.two-up { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.feature { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
section.alt .feature { background:var(--surface-2); }
.feature .ico { font-size:1.7rem; }
.feature h3 { margin:.7rem 0 .3rem; font-size:1.05rem; }
.feature p { color:var(--muted); margin:0; font-size:.95rem; }
.steps { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); counter-reset:step; }
.step { position:relative; padding:26px 22px 22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.step::before { counter-increment:step; content:counter(step,decimal-leading-zero); display:block;
  font-size:1.6rem; font-weight:900; color:var(--accent); margin-bottom:.4rem; }
.step h3 { margin:0 0 .3rem; font-size:1.05rem; }
.step p { margin:0; color:var(--muted); font-size:.93rem; }

/* testimonials */
.quotes { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.quote { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.quote p { margin:0 0 1rem; font-size:1rem; }
.quote footer { color:var(--muted); font-size:.88rem; }
.quote .stars { color:var(--accent); letter-spacing:2px; margin-bottom:.6rem; }

/* CTA band */
.cta { background:linear-gradient(120deg, rgba(255,106,19,.22), rgba(255,106,19,.04) 60%, transparent); border:1px solid var(--border);
  border-radius:var(--radius); padding:40px 28px; text-align:center; }
.cta h2 { margin:0 0 .5rem; font-size:clamp(1.5rem,3vw,2.1rem); }
.cta p { color:var(--muted); margin:0 auto 1.4rem; max-width:560px; }

/* packages & prices */
section.tight-top { padding-top:0; }
.packages { display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.pkg { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px 22px; display:flex; flex-direction:column; gap:.55rem; }
section.alt .pkg { background:var(--surface-2); }
.pkg h3 { margin:0; font-size:1.35rem; }
.pkg-label { margin:0; font-size:.72rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.pkg-price { margin:.35rem 0 0; font-size:clamp(2.2rem,4.4vw,2.9rem); font-weight:900; line-height:1; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:-.5px; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .5rem; }
.pkg-price small { font-size:.95rem; font-weight:800; color:var(--text); letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; }
.pkg-total { margin:0; font-weight:800; font-size:1.05rem; }
.pkg-sub { margin:.2rem 0 .2rem; color:var(--muted); font-size:.93rem; }
.pkg .pkg-list { flex:1; align-content:start; }
.pkg .btn { margin-top:auto; }
.pkg-feature { border:2px solid var(--accent); box-shadow:0 0 0 6px rgba(255,106,19,.08); }
.pkg-badge { position:absolute; top:-13px; right:20px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase; padding:.3rem .75rem; border-radius:999px; }
.pkg-addon { background:linear-gradient(160deg, rgba(255,106,19,.14), rgba(255,106,19,.02) 55%) , var(--surface); border-color:rgba(255,106,19,.45); }
section.alt .pkg-addon { background:linear-gradient(160deg, rgba(255,106,19,.14), rgba(255,106,19,.02) 55%), var(--surface-2); }
.pkg-addon .pkg-label { color:var(--accent); }
.pkg-list, .pkg-grid { list-style:none; margin:.3rem 0 .8rem; padding:0; display:grid; gap:.45rem; font-size:.88rem; color:var(--muted); }
.pkg-list li, .pkg-grid li { display:flex; gap:.55rem; align-items:flex-start; }
.pkg-list li::before, .pkg-grid li::before { content:"✓"; color:var(--good); font-weight:900; flex:none; }
.pkg-list b, .pkg-grid b { color:var(--text); font-weight:700; }
.pkg-note { margin:0 0 .8rem; padding:.6rem .75rem; border-radius:10px; background:rgba(255,255,255,.04);
  border:1px dashed var(--border); color:var(--muted); font-size:.8rem; line-height:1.45; }
.pkg-wide { margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:12px 36px; align-items:center; }
.pkg-wide > div { display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.pkg-wide .pkg-list { margin:0; flex:none; }
.pkg-worth { margin-top:20px; display:flex; align-items:center; gap:10px 28px; flex-wrap:wrap; padding:20px 24px;
  border-radius:var(--radius); border:1px solid rgba(61,220,151,.35); background:rgba(61,220,151,.07); }
.pkg-worth-fig { margin:0; font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:900; color:var(--good); line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.pkg-worth-fig small { display:block; margin-top:.35rem; font-size:.75rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--text); }
.pkg-worth-copy { margin:0; flex:1 1 320px; color:var(--muted); font-size:.92rem; }
.pkg-worth-copy b { color:var(--text); }
.pkg-worth-copy a { color:var(--accent); }
.pkg-included { margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; }
section.alt .pkg-included { background:var(--surface-2); }
.pkg-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.6rem 1.6rem; margin:.8rem 0 .4rem; font-size:.92rem; }
.pkg-fine { margin:.6rem 0 0; color:var(--muted); font-size:.85rem; }
@media (max-width:980px) {
  .packages { grid-template-columns:1fr 1fr; }
  .packages .pkg-feature { grid-column:1 / -1; }
  .pkg-wide { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .packages { grid-template-columns:1fr; }
  .pkg-feature { order:-1; margin-top:8px; }
}

/* course detail */
.course-hero { padding:56px 0 28px; }
.breadcrumb { color:var(--muted); font-size:.88rem; margin-bottom:1rem; }
.breadcrumb a:hover { color:var(--text); }
.course-hero h1 { font-size:clamp(1.9rem,4.5vw,3rem); margin:.3rem 0 .8rem; }
.course-hero .lead { color:var(--muted); font-size:1.1rem; max-width:720px; margin:0; }
.course-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:36px; align-items:start; }
.course-layout h2 { font-size:1.35rem; margin:2rem 0 .6rem; }
.course-layout h2:first-child { margin-top:0; }
.course-layout ul { color:var(--muted); padding-left:1.2rem; margin:0; }
.course-layout li { margin:.35rem 0; }
.checklist { list-style:none; padding:0 !important; }
.checklist li { display:flex; gap:.6rem; align-items:flex-start; }
.checklist li::before { content:"✓"; color:var(--good); font-weight:900; flex:none; }
.book-box { position:sticky; top:92px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.book-box .price { font-size:2rem; font-weight:800; color:var(--accent); }
.book-box .price small { font-size:.8rem; color:var(--muted); font-weight:600; margin-left:.3rem; }
.book-box dl { display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:1rem 0; font-size:.92rem; }
.book-box dt { color:var(--muted); }
.book-box dd { margin:0; }
.book-box .dates { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.4rem; }
.book-box .dates li { display:flex; justify-content:space-between; padding:.5rem .8rem; background:var(--surface-2); border-radius:8px; font-size:.9rem; }
.book-box .dates .few { color:var(--accent); font-size:.8rem; font-weight:700; }
.book-box .fine { color:var(--muted); font-size:.8rem; margin:.8rem 0 0; }
.modules { display:grid; gap:12px; }
.module { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 18px; }
.module strong { display:block; }
.module span { color:var(--muted); font-size:.9rem; }

/* FAQ */
.faq { display:grid; gap:10px; max-width:820px; margin:0 auto; }
.faq details { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0 18px; }
section.alt .faq details { background:var(--surface-2); }
.faq summary { cursor:pointer; padding:14px 0; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); font-weight:900; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:0 0 14px; color:var(--muted); }

/* forms */
.form { display:grid; gap:14px; }
.form label { font-weight:600; font-size:.9rem; display:block; margin-bottom:.3rem; }
.form input, .form textarea, .form select { width:100%; padding:.85rem 1rem; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; color:var(--text); font:inherit; }
.form select option { background:var(--surface); }
.form input:focus, .form textarea:focus, .form select:focus { outline:2px solid var(--accent); border-color:transparent; }
.form .two { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.contact-grid { display:grid; gap:36px; grid-template-columns:1.2fr 1fr; align-items:start; }
.contact-info { display:grid; gap:1.2rem; }
.contact-info h3 { margin:0 0 .2rem; font-size:1rem; }
.contact-info p { margin:0; color:var(--muted); }
.contact-info a { color:var(--accent); }

.notice { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; color:var(--muted); }
.notice.warn { border-color:var(--accent); }

/* footer */
.site-footer { border-top:1px solid var(--border); padding:44px 0 28px; color:var(--muted); font-size:.9rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:28px; margin-bottom:24px; }
.footer-grid h4 { margin:0 0 .6rem; color:var(--text); font-size:.9rem; text-transform:uppercase; letter-spacing:1px; }
.footer-grid p { margin:.3rem 0; }
.footer-grid a:hover { color:var(--text); }
.footer-bottom { border-top:1px solid var(--border); padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.center { text-align:center; }
.mt { margin-top:1.6rem; }
.muted { color:var(--muted); }

@media (max-width:860px) {
  .hero-grid, .course-layout, .contact-grid, .form .two { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .book-box { position:static; }
}
@media (max-width:780px) {
  /* The public pages carry a menu button, so their links fold away behind
     it and drop down directly under the bar, however tall the bar is.
     The trainee area, the editor and the certificate page have no such
     button and only two or three links, so theirs are marked nav-inline
     and stay in the bar. Without that distinction their links became a
     floating panel with no way to close it, sitting over the top of the
     page and swallowing taps meant for what was underneath. */
  .nav-links:not(.nav-inline) { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:0; background:var(--surface); border-bottom:1px solid var(--border); padding:.5rem 20px 1rem; }
  .nav-links:not(.nav-inline).open { display:flex; }
  .nav-links:not(.nav-inline) a { padding:.8rem 0; width:100%; }
  .nav-links:not(.nav-inline) .btn { margin-top:.5rem; }
  .nav-inline { gap:.9rem; flex-wrap:wrap; justify-content:flex-end; font-size:.9rem; }
  .nav-toggle { display:block; min-width:44px; min-height:44px; }
  .footer-grid { grid-template-columns:1fr; }

  /* Touch targets. A finger is a blunt instrument: the answer circles on a
     knowledge check and on the paper were 13px, and the plain-text buttons
     ("Sign out", "Create your account") were under 30px tall. The labels
     were always tappable, but a control you can see is one you aim at. */
  /* label.terms-tick and .check label outrank a plain class selector here,
     because their own rules sit further down the file. */
  .opt input, .exam-choices input,
  label.terms-tick input,
  .check label input[type="checkbox"],
  .editor input[type="checkbox"],
  .opt-row .opt-right input { width:22px; height:22px; }
  .nav-inline a { padding-block:.5rem; }
  .exam-choices input { margin-top:.15rem; }
  .opt { padding:.7rem .7rem; }
  .exam-choices li { padding:.25rem 0; }
  .linkish { min-height:44px; padding:.5rem 0; }
  .btn-sm { padding:.7rem 1.1rem; }
  .q { min-width:38px; min-height:38px; }
  .pill { min-height:38px; padding-inline:1rem; }
}

/* A phone-shaped hero is taller than it is wide, so the wide desktop crop
   would stretch to a meaningless sliver of bodywork. Phones get the portrait
   crop instead, in a band across the top deep enough to show the whole car,
   with the text below it on solid ground. Only the matching image is
   downloaded: a background inside a media query that does not apply is
   never fetched. */
@media (max-width:860px) {
  .hero { padding:420px 0 44px; }
  .hero::before {
    inset:0 0 auto 0; height:440px;
    background:
      linear-gradient(180deg, rgba(11,11,12,.12) 0%, rgba(11,11,12,.28) 55%, rgba(11,11,12,.9) 88%, rgba(11,11,12,1) 100%),
      var(--hero-image-mobile) center 45% / cover no-repeat; }
}


/* ---- syllabus ----------------------------------------------- */
.phase-nav { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.phase-nav a { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  display:grid; gap:2px; transition:border-color .15s ease, transform .1s ease; }
.phase-nav a:hover { border-color:var(--accent); transform:translateY(-2px); }
.phase-nav strong { color:var(--accent); font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; }
.phase-nav span { font-weight:700; font-size:.95rem; line-height:1.25; }
.phase-nav em { font-style:normal; color:var(--muted); font-size:.78rem; }
.phase-head { margin-bottom:1.6rem; max-width:760px; }
.phase-head h2 { font-size:clamp(1.5rem,3vw,2.1rem); margin:0 0 .4rem; }
.phase-head p:last-child { color:var(--muted); margin:0; }
.syllabus-list { display:grid; gap:8px; }
.syllabus-list details { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
section.alt .syllabus-list details { background:var(--surface-2); }
.syllabus-list details[open] { border-color:var(--accent); }
.syllabus-list summary { cursor:pointer; padding:14px 18px; font-weight:700; list-style:none; display:flex; gap:.9rem; align-items:baseline; }
.syllabus-list summary::-webkit-details-marker { display:none; }
.syllabus-list summary:hover { color:var(--accent); }
.syllabus-list .mnum { color:var(--accent); font-size:.8rem; font-weight:900; letter-spacing:1px; flex:none; }
.syllabus-list .mtitle { flex:1; }
.syllabus-list summary::after { content:"+"; color:var(--accent); font-weight:900; flex:none; }
.syllabus-list details[open] summary::after { content:"–"; }
.mbody { padding:0 18px 18px 48px; color:var(--muted); }
.mbody h4 { color:var(--text); margin:1.1rem 0 .4rem; font-size:.95rem; }
.mbody h4:first-child { margin-top:0; }
.mbody p { margin:0 0 .7rem; }
.mbody ul, .mbody ol { margin:0 0 .8rem; padding-left:1.2rem; }
.mbody li { margin:.2rem 0; }
.rules { counter-reset:rule; list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.rules li { counter-increment:rule; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:12px 16px 12px 52px; position:relative; font-weight:600; }
section.alt .rules li { background:var(--surface-2); }
.rules li::before { content:counter(rule,decimal-leading-zero); position:absolute; left:16px; color:var(--accent); font-weight:900; font-size:.85rem; }
.standard { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto; max-width:640px; }
.standard span { background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.5rem 1.1rem; font-weight:800; font-size:.95rem; }
section.alt .standard span { background:var(--surface-2); }
.covers { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.covers span { background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.45rem 1rem; font-size:.88rem; color:var(--muted); }
section.alt .covers span { background:var(--surface-2); }
.covers span:hover { border-color:var(--accent); color:var(--text); }
@media (max-width:600px) { .mbody { padding-left:18px; } }

/* ---- admin (/admin.html) ------------------------------------ */
.admin .nav-links { gap:1rem; }
.admin-layout { display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start; }
.admin-side { position:sticky; top:92px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.admin-side-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.course-list { list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:4px; max-height:60vh; overflow:auto; }
.course-list li { padding:.6rem .7rem; border-radius:10px; cursor:pointer; display:flex; justify-content:space-between; gap:.5rem; align-items:center; font-size:.92rem; }
.course-list li:hover { background:var(--surface-2); }
.course-list li.active { background:rgba(255,106,19,.14); outline:1px solid var(--accent); }
.course-list .nm { font-weight:600; }
.course-list .tags { display:flex; gap:4px; flex:none; }
.tag { font-style:normal; font-size:.68rem; font-weight:700; padding:.1rem .4rem; border-radius:5px; background:rgba(255,106,19,.16); color:var(--accent); }
.tag.off { background:rgba(255,255,255,.08); color:var(--muted); }
.tag.muted { background:transparent; color:var(--muted); }
.admin-main { min-width:0; }
.editor { max-width:none; }
.editor-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.editor-head h2 { margin:0; font-size:1.4rem; }
.form .three { display:grid; gap:14px; grid-template-columns:1fr 1fr 1fr; }
.form .check { display:flex; align-items:end; padding-bottom:.6rem; }
.form .check label { display:flex; align-items:center; gap:.5rem; margin:0; cursor:pointer; }
.form .check input { width:auto; }
.form .hint { display:block; color:var(--muted); font-weight:500; font-size:.78rem; margin-top:.25rem; }
.form label .hint { display:inline; margin-left:.4rem; }
.rows-block { border:1px solid var(--border); border-radius:12px; padding:14px 16px 16px; margin:0; }
.rows-block legend { font-weight:700; padding:0 .4rem; }
.rows { display:grid; gap:10px; margin-bottom:10px; }
.row-item { display:flex; gap:8px; align-items:flex-start; }
.row-item .grow { flex:1; display:grid; gap:6px; }
.row-item .grow.two { grid-template-columns:1fr 200px; }
.row-item input, .row-item select { padding:.6rem .8rem; }
.row-btns { display:flex; gap:4px; padding-top:2px; }
.row-btns .q { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-weight:700; }
.row-btns .q.rm:hover { border-color:#e5484d; color:#e5484d; }
.editor-actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding-top:.4rem; }
.msg { font-size:.9rem; min-height:1.2em; margin:0; }
.msg.err { color:#ff7a7f; }
.msg.ok { color:var(--good); }
code { background:var(--surface-2); padding:.1rem .35rem; border-radius:5px; font-size:.9em; }
@media (max-width:860px) {
  .admin-layout, .form .three { grid-template-columns:1fr; }
  .admin-side { position:static; }
  .row-item .grow.two { grid-template-columns:1fr; }
}

/* ---- admin tabs + syllabus editor --------------------------- */
.tabs { display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.tabs button { background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font:inherit;
  font-weight:700; padding:.7rem 1rem; cursor:pointer; }
.tabs button:hover { color:var(--text); }
.tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.mod-list li .ph { font-size:.68rem; font-weight:700; color:var(--muted); flex:none; }
.mod-filter { display:flex; gap:8px; margin-bottom:.6rem; }
.mod-filter select, .mod-filter input { padding:.5rem .7rem; font-size:.88rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:inherit; width:100%; }
.body-help { color:var(--muted); font-size:.8rem; margin:.3rem 0 0; }
.body-help code { font-size:.95em; }
#f-body { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88rem; line-height:1.5; }
.preview { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
.preview h4 { color:var(--text); margin:1rem 0 .4rem; font-size:.95rem; }
.preview h4:first-child { margin-top:0; }
.preview p, .preview li { color:var(--muted); }
.preview p { margin:0 0 .6rem; }
.preview ul, .preview ol { margin:0 0 .7rem; padding-left:1.2rem; }

/* ---- public syllabus outline (locked) ----------------------- */
.outline-list { list-style:none; margin:0; padding:0; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.outline-list li { display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; }
section.alt .outline-list li { background:var(--surface-2); }
.outline-list .mnum { font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; flex:none; }
.outline-list .mtitle { flex:1; font-size:.95rem; }
.outline-list .lock { flex:none; opacity:.5; font-size:.85rem; }
.gate { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius); padding:20px 24px; }
.gate p { margin:0; color:var(--muted); font-size:.95rem; max-width:62ch; }
.gate strong { color:var(--text); }

/* ---- trainee area (/learn.html) ----------------------------- */
.linkish { background:none; border:0; color:var(--accent); font:inherit; font-weight:600;
  cursor:pointer; padding:0; text-decoration:underline; }
.learn .nav-links { gap:1rem; align-items:center; }
.learn .who { color:var(--muted); font-size:.85rem; }

.progress-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:.9rem; }
.progress-head h2 { margin:0; font-size:1.6rem; }
.progress-stat { text-align:right; }
.progress-stat strong { display:block; font-size:1.5rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.progress-stat .of { color:var(--muted); font-weight:600; font-size:1rem; }
.progress-stat span { color:var(--muted); font-size:.85rem; }
.progress-bar { height:10px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; overflow:hidden; }
.progress-bar span { display:block; height:100%; width:0; background:var(--accent);
  border-radius:999px; transition:width .35s ease; }

.learn-layout { display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start; padding-top:28px; }
.learn-side { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; position:sticky; top:92px; max-height:calc(100vh - 120px); display:flex; flex-direction:column; }
.side-title { display:block; margin-bottom:.6rem; font-size:.78rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); }
.module-list { list-style:none; margin:0; padding:0; overflow-y:auto; display:grid; gap:2px; }
.module-list .phase-row { font-size:.7rem; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); padding:.9rem .5rem .35rem; font-weight:700; }
.module-list .mod { display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem;
  border-radius:9px; font-size:.9rem; cursor:pointer; border:1px solid transparent; }
.module-list .mod .ico { flex:none; width:1.1rem; text-align:center; font-size:.8rem; }
.module-list .mod .num { flex:none; color:var(--muted); font-variant-numeric:tabular-nums; font-size:.8rem; }
.module-list .mod .title { flex:1; min-width:0; }
.module-list .mod.done { color:var(--text); }
.module-list .mod.done .ico { color:var(--good); font-weight:900; }
.module-list .mod.current { background:rgba(255,106,19,.12); border-color:var(--accent); }
.module-list .mod.current .ico { color:var(--accent); }
.module-list .mod.locked { color:var(--muted); cursor:not-allowed; }
.module-list .mod.locked .ico { opacity:.55; }
.module-list .mod.open { outline:1px solid var(--accent); }
.module-list .mod:not(.locked):hover { background:var(--surface-2); }
.module-list .mod:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.learn-main { min-width:0; }
.module-view { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 32px; scroll-margin-top:92px; }
.module-view h1 { font-size:clamp(1.4rem,3vw,2rem); margin:.2rem 0 1.2rem; }
.module-foot { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--border); }

.mbody h4 { margin:1.6rem 0 .5rem; font-size:1rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:1px; }
.mbody h4:first-child { margin-top:0; }
.mbody p { margin:0 0 .9rem; color:var(--muted); max-width:70ch; }
.mbody ul, .mbody ol { color:var(--muted); margin:0 0 1rem; padding-left:1.3rem; max-width:70ch; }
.mbody li { margin:.28rem 0; }

/* ---- knowledge check (inside a module) ---------------------- */
.quiz { margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--border); }
.quiz-head h2 { font-size:1.15rem; margin:0 0 .3rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:1px; }
.quiz-head p { margin:0 0 1.4rem; font-size:.92rem; max-width:70ch; }
.quiz-questions { list-style:none; counter-reset:qn; margin:0; padding:0; display:grid; gap:18px; }
.quiz-questions .q { counter-increment:qn; background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--border); border-radius:12px; padding:16px 18px; }
.quiz-questions .q.right { border-left-color:var(--good); }
.quiz-questions .q.wrong { border-left-color:#e5484d; }
.q-prompt { margin:0 0 .8rem; font-weight:600; max-width:70ch; }
.q-prompt::before { content:counter(qn) ". "; color:var(--accent); font-weight:800; }
.q-options { display:grid; gap:6px; }
.opt { display:flex; align-items:flex-start; gap:.6rem; padding:.5rem .7rem; border-radius:9px;
  border:1px solid transparent; cursor:pointer; color:var(--muted); font-size:.94rem; }
.opt:hover { background:rgba(255,255,255,.04); color:var(--text); }
.opt input { flex:none; margin:.28rem 0 0; accent-color:var(--accent); }
.opt input:disabled { cursor:default; }
.opt:has(input:checked) { color:var(--text); border-color:var(--border); background:rgba(255,255,255,.05); }
/* Scoped so it outranks the :has() rule above, which is more specific than
   a plain .opt.correct would be — otherwise the answer they picked and got
   right would stay grey instead of turning green. */
.quiz-questions .opt.correct { border-color:var(--good); color:var(--text); background:rgba(61,220,151,.1); }
.q-verdict { margin:.8rem 0 0; font-size:.88rem; color:var(--muted); max-width:70ch; }
.q.right .q-verdict::before { content:"✓ "; color:var(--good); font-weight:900; }
.q.wrong .q-verdict::before { content:"✗ "; color:#e5484d; font-weight:900; }
.quiz-result { margin-top:1.4rem; padding:14px 18px; border-radius:12px; font-size:.95rem;
  border:1px solid var(--border); background:var(--surface-2); scroll-margin-top:92px; }
.quiz-result.pass { border-color:rgba(61,220,151,.45); background:rgba(61,220,151,.1); }
.quiz-result.fail { border-color:rgba(229,72,77,.45); background:rgba(229,72,77,.1); }
.quiz .module-foot { margin-top:1.5rem; }

/* ---- Phase 7: assessment panel, exam paper ------------------ */
.assess { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; }
.assess-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.assess-head h3 { margin:.15rem 0 0; font-size:1.25rem; }
.assess-head .eyebrow { margin:0; }
.assess-state { font-size:.72rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.25rem .7rem; }
.assess-state.open { color:var(--accent); border-color:var(--accent); }
.assess-state.done { color:var(--good); border-color:rgba(61,220,151,.45); }

.assess-steps { list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:2px; }
.astep { display:flex; gap:.9rem; padding:14px 0; border-top:1px solid var(--border); }
.astep:first-child { border-top:0; padding-top:4px; }
.astep-ico { flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; color:var(--muted); }
.astep.todo .astep-ico { border-color:var(--accent); color:var(--accent); }
.astep.done .astep-ico { border-color:rgba(61,220,151,.45); color:var(--good); background:rgba(61,220,151,.1); }
.astep.blocked { opacity:.62; }
.astep-body { min-width:0; flex:1; }
.astep-body strong { display:block; }
.astep-body p { margin:.2rem 0 0; font-size:.9rem; max-width:70ch; }
.astep-body .msg:empty { min-height:0; }
.astep-body .btn { margin-top:.7rem; }

.attempt-list { list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:4px; max-width:34rem; }
.attempt-list li { display:flex; align-items:baseline; gap:.7rem; font-size:.85rem; color:var(--muted);
  background:var(--surface-2); border-radius:8px; padding:.35rem .6rem; }
.attempt-list li strong { font-variant-numeric:tabular-nums; color:var(--text); }
.attempt-list li.ok strong { color:var(--good); }
.attempt-list li .muted { margin-left:auto; }

/* the paper itself */
.exam-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.exam-q { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; }
.exam-q.answered { border-color:rgba(255,106,19,.5); }
.exam-topic { margin:0; font-size:.72rem; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); font-weight:700; }
.exam-ask { margin:.45rem 0 .9rem; font-weight:600; max-width:70ch; }
.exam-choices { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.exam-choices li { display:flex; align-items:flex-start; gap:.6rem; }
.exam-choices input { margin-top:.35rem; accent-color:var(--accent); flex:none; }
.exam-choices label { color:var(--muted); cursor:pointer; font-size:.95rem; }
.exam-choices input:checked + label { color:var(--text); }
.exam-foot { position:sticky; bottom:0; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:18px; padding:14px 0; background:linear-gradient(rgba(11,11,12,0), var(--bg) 35%); }
.exam-foot .grow { flex:1; }

.result-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:34px 32px; text-align:center; }
.result-card.pass { border-color:rgba(61,220,151,.45); }
.result-card.fail { border-color:var(--accent); }
.result-score { margin:.6rem 0 .2rem; display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.result-score strong { font-size:3rem; line-height:1; font-variant-numeric:tabular-nums; }
.result-card.pass .result-score strong { color:var(--good); }
.result-card.fail .result-score strong { color:var(--accent); }
.result-card h2 { margin:.4rem 0 .6rem; }
.result-card p.muted { max-width:56ch; margin:0 auto; }
.revise-title { display:block; margin:1.6rem 0 .6rem; font-size:.75rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); }
.revise-list { list-style:none; margin:0 0 .6rem; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.revise-list li { background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:.3rem .8rem; font-size:.85rem; color:var(--muted); }

/* ---- certificate (/certificate.html) ------------------------ */
.cert-verified { text-align:center; color:var(--good); font-weight:700; font-size:.9rem; margin:0 0 1rem; }
.certificate { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:46px 44px 38px; text-align:center; position:relative; }
.certificate::before { content:""; position:absolute; inset:14px; border:1px solid rgba(255,106,19,.35);
  border-radius:10px; pointer-events:none; }
.cert-rule { height:3px; width:70px; margin:0 auto; background:var(--accent); border-radius:999px; }
.cert-logo { width:60px; margin:22px auto 12px; }
.cert-kicker { margin:0; font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); font-weight:800; }
.cert-title { margin:.5rem 0 1.6rem; font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.5px; }
.cert-lead { margin:0; color:var(--muted); font-size:.9rem; }
.cert-name { margin:.5rem 0 1.1rem; font-size:clamp(1.5rem,4vw,2.1rem); font-weight:800; color:var(--accent); }
.cert-course { margin:.5rem auto 1.2rem; font-size:1.1rem; font-weight:700; max-width:34ch; }
.cert-body { margin:0 auto 2rem; color:var(--muted); font-size:.92rem; max-width:52ch; }
.cert-foot { display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; margin-bottom:2rem; }
.cert-foot span { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:1.6px; color:var(--muted); }
.cert-foot strong { font-variant-numeric:tabular-nums; }
.cert-sign { margin:0 auto 26px; max-width:16rem; border-top:1px solid var(--border); padding-top:.5rem; }
.cert-sign em { display:block; font-style:italic; font-size:1rem; }
.cert-sign span { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:1.6px; color:var(--muted); margin-top:.2rem; }

@media print {
  .noprint { display:none !important; }
  body { background:#fff; color:#111; }
  .certificate { border-color:#111; background:#fff; box-shadow:none; }
  .certificate::before { border-color:#c25a12; }
  .cert-name { color:#c25a12; }
  .cert-lead, .cert-body, .cert-foot span, .cert-sign span { color:#444; }
  .cert-rule { background:#c25a12; }
  .container { max-width:none; padding:0; }
}

/* ---- course material: watermark, licence, copy guard -------- */
/* The trainee's address is tiled behind the module text by learn.js, so a
   screenshot or a photo of the screen carries it. The text itself cannot be
   selected, and learn.js refuses copy, right-click, drag, save and print
   over it. Form controls in the check stay usable. */
#mv-body { background-repeat:repeat; background-position:0 0; }
.learn #module-view { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.learn #module-view input, .learn #module-view textarea, .learn #module-view label { -webkit-user-select:auto; user-select:auto; }
.learn #module-view img, .learn #module-view video { -webkit-user-drag:none; }
.licence-line { margin:1.6rem 0 0; padding-top:.9rem; border-top:1px dashed var(--border);
  color:var(--muted); font-size:.74rem; letter-spacing:.2px; opacity:.85; }
.copy-toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:var(--surface-2); color:var(--text); border:1px solid var(--accent); border-radius:999px;
  padding:.65rem 1.2rem; font-size:.88rem; font-weight:600; z-index:100; transition:opacity .2s ease, transform .2s ease;
  max-width:calc(100vw - 32px); text-align:center; }
.copy-toast.show { opacity:1; transform:translate(-50%, 0); }

@media print {
  /* Course material does not print. Whatever the browser does with the
     page, the module text and its files are not on it. */
  .learn #module-view, .learn .learn-side, .learn .module-foot, .learn .site-header, .learn .site-footer,
  .learn #exam { display:none !important; }
  .learn .learn-main::before { content:"Course material can't be printed. It is licensed to you for study on screen."; display:block;
    padding:2rem; font-size:14pt; color:#000; }
}

/* Spam trap on the enquiry form. Positioned away rather than display:none,
   because some bots skip hidden fields but fill in ones they can "see". */
.gotcha { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---- course files inside a module --------------------------- */
.mv-files { margin:2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--border); }
.mv-files h4 { margin:0 0 .9rem; font-size:.78rem; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); font-weight:700; }
.file-list { display:grid; gap:14px; }
.file-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; display:flex; align-items:center; gap:.8rem; font-size:.92rem; }
.file-card.is-media { display:block; padding:12px; }
.file-shot { position:relative; border-radius:10px; overflow:hidden; background:var(--bg);
  min-height:120px; display:flex; align-items:center; justify-content:center; }
.file-shot img, .file-shot video { display:block; width:100%; height:auto; }
/* The same attribution as the module text, over the picture. */
.file-wm { position:absolute; right:10px; bottom:8px; font-size:.68rem; letter-spacing:.4px;
  color:rgba(255,255,255,.55); background:rgba(11,11,12,.55); padding:.2rem .5rem;
  border-radius:6px; pointer-events:none; }
/* On a preview the bottom right belongs to the player's own controls. */
.file-wm.wm-top { bottom:auto; top:8px; }
.file-card.is-media .file-name { margin:.7rem .2rem 0; color:var(--muted); font-size:.86rem; }
.file-ico { font-size:1.2rem; flex:none; }
.file-card .file-name { flex:1; color:var(--text); }
.file-open { color:var(--accent); font-weight:700; white-space:nowrap; }
@media (min-width:900px) { .file-list { grid-template-columns:1fr; } }

/* A single note on a small screen, and only until it is acknowledged. */
.phone-note { margin-bottom:1.2rem; font-size:.92rem; }
.phone-note .linkish { margin-left:.4rem; }

/* ---- course terms ------------------------------------------- */
.terms-body { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px 22px 8px; margin-bottom:1.2rem; }
.terms-body ol { margin:0; padding-left:1.4rem; display:grid; gap:.9rem; }
.terms-body li { color:var(--muted); font-size:.94rem; line-height:1.6; }
.terms-body strong { color:var(--text); }
.terms-tick { display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  font-size:.95rem; color:var(--text); margin-bottom:.4rem; }
.terms-tick input { margin-top:.25rem; width:18px; height:18px; flex:none; accent-color:var(--accent); }

/* ---- attaching sheets to a module (admin) ------------------- */
.dropzone { display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center;
  padding:26px 18px; border:2px dashed var(--border); border-radius:var(--radius);
  background:var(--surface-2); cursor:pointer; transition:border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible { border-color:var(--accent); background:rgba(255,106,19,.06); }
.dropzone.over { border-color:var(--accent); background:rgba(255,106,19,.14); }
.dropzone strong { color:var(--text); font-size:1rem; }
.dropzone span { font-size:.86rem; }
.admin-files { display:grid; gap:8px; margin-top:.9rem; }
.admin-file { display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; font-size:.9rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.af-ico { flex:none; }
.af-name { flex:1; color:var(--text); word-break:break-all; }
.af-size { flex:none; font-size:.8rem; font-variant-numeric:tabular-nums; }

/* ---- access log (admin → Trainees) -------------------------- */
.views-summary { margin:0 0 1rem; }
.views-flag { margin:0 0 .5rem; padding:.7rem .9rem; border-radius:10px; font-size:.9rem;
  background:rgba(255,106,19,.12); border:1px solid var(--accent); color:var(--text); }
.views-ok { margin:0 0 .4rem; font-size:.88rem; color:var(--muted); }

/* ---- two-factor screens ------------------------------------- */
.twofa-qr { display:flex; justify-content:center; padding:18px; margin:0 auto .6rem;
  background:#fff; border-radius:var(--radius); width:fit-content; max-width:100%; }
.twofa-qr svg, .twofa-qr img { width:200px; height:200px; display:block; }
.twofa-secret { text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1rem; letter-spacing:2px; word-break:break-all; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:.6rem .8rem; margin:.4rem 0 1.1rem; }
#tf-setup-code, #tf-check-code { font-size:1.4rem; letter-spacing:.4rem; text-align:center;
  font-variant-numeric:tabular-nums; }

@media (max-width:900px) {
  .learn-layout { grid-template-columns:1fr; }
  .learn-side { position:static; max-height:none; }
  .module-list { max-height:320px; }
  .module-view { padding:22px 20px; }
  .progress-stat { text-align:left; }
  .assess { padding:18px 18px; }
  .exam-q { padding:16px 16px; }
}
.nav-links .trainee-link { color:var(--accent); }
.nav-links .trainee-link:hover { color:var(--accent-2); }

/* ---- admin: trainees --------------------------------------- */
.trainee-admin { display:grid; grid-template-columns:360px 1fr; gap:24px; align-items:start; }
/* A grid item will not shrink below the width of its own content unless it
   is told it may. The trainees table is wider than a phone, so without this
   the panel holding it pushed the whole page sideways instead of letting
   the table scroll inside its own box. */
.trainee-admin > *, .assess-admin > *, .admin-layout > * { min-width:0; }

/* On a phone a six-column table is a sideways scroll with the buttons off
   the right-hand edge, which is where they are least likely to be found.
   Each row becomes a card instead, every cell labelled by the column it
   came from, so nothing is hidden and nothing needs scrolling to reach. */
@media (max-width:700px) {
  .table-wrap { overflow-x:visible; }
  table.trainees thead { display:none; }
  table.trainees, table.trainees tbody, table.trainees tr, table.trainees td { display:block; width:100%; }
  table.trainees tr { border-top:1px solid var(--border); padding:.6rem 0 .9rem; }
  table.trainees tr:first-child { border-top:0; }
  table.trainees td { border:0; padding:.35rem 0; display:grid; grid-template-columns:6.5rem 1fr;
    gap:.8rem; align-items:start; }
  table.trainees td::before { content:attr(data-label); color:var(--muted); font-size:.68rem;
    text-transform:uppercase; letter-spacing:.9px; font-weight:700; padding-top:.15rem; }
  table.trainees .mini-bar { width:100%; max-width:200px; }
  /* A grid cell stretches what it holds, which turned a small × and a
     status pill into full-width slabs. They keep their own size. */
  table.trainees td .pill, table.trainees td .q, table.trainees td .linkish { justify-self:start; }

  /* The tab labels wrap to three lines at this width, so the row scrolls
     sideways instead and each tab keeps one line. */
  .tabs { overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { flex:none; white-space:nowrap; padding:.7rem .8rem; }
}
.card-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; }
.card-panel h3 { margin-top:0; }
.table-wrap { overflow-x:auto; }
table.trainees { width:100%; border-collapse:collapse; font-size:.9rem; }
table.trainees th { text-align:left; color:var(--muted); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.8px; padding:0 10px 8px; }
table.trainees td { padding:12px 10px; border-top:1px solid var(--border); vertical-align:top; }
.mini-bar { height:6px; width:110px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-bottom:4px; }
.mini-bar span { display:block; height:100%; background:var(--accent); }
.pill { border:1px solid var(--border); background:var(--surface-2); color:var(--muted);
  border-radius:999px; padding:.25rem .7rem; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.pill.on { color:var(--good); border-color:rgba(61,220,151,.4); }
.tags.wrap { display:inline-flex; flex-wrap:wrap; gap:4px; max-width:15rem; }
#assess-panel { grid-column:1 / -1; }
.assess-admin { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:1rem; }
.mini-head { margin:0 0 .8rem; font-size:.75rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); }
.assess-admin .attempt-list { max-width:none; }
.attempt-list li .what { color:var(--text); }
.attempt-list li .linkish { padding:0; font-size:.8rem; }

/* one attempt, question by question (admin → Trainees → See answers) */
.marked-paper { margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.marked-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mq { background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--border);
  border-radius:12px; padding:12px 14px; display:grid; gap:.35rem; font-size:.9rem; }
.mq.is-right { border-left-color:var(--good); }
.mq.is-wrong { border-left-color:var(--accent); }
.mq-note { font-size:.88rem; padding:.2rem 0 .4rem; }
.mq-q { margin:0; color:var(--text); font-weight:600; }
.mq-n { display:inline-block; min-width:1.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.mq-topic { display:block; font-style:normal; font-size:.7rem; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); font-weight:700; margin-top:.2rem; }
.mq-a { margin:0; color:var(--muted); }
.mq-a strong { color:var(--text); font-weight:600; }
.mq-mark { display:inline-block; width:1.4rem; font-weight:700; }
.is-right .mq-mark { color:var(--good); }
.is-wrong .mq-mark { color:var(--accent); }
.mq-why { margin:.15rem 0 0 1.4rem; font-size:.85rem; }

/* ---- module sign-off (admin → Trainees) --------------------- */
.signoffs { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.signoff-tools { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.86rem; }
.signoff-tools .so-filter { display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); cursor:pointer; }
.signoff-tools .so-filter input { width:auto; margin:0; accent-color:var(--accent); cursor:pointer; }
.signoff-list { display:grid; gap:10px; }
.so-phase { font-size:.7rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted);
  border:1px solid var(--border); border-radius:99px; padding:.1rem .5rem; white-space:nowrap; }
.so-row { background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--border);
  border-radius:12px; padding:12px 14px; display:grid; gap:.6rem; }
.so-row.is-pass { border-left-color:var(--good); }
.so-row.is-reassess { border-left-color:var(--accent); }
.so-head { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.so-n { font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700; font-size:.85rem; }
.so-title { font-weight:600; }
.so-state { margin-left:auto; font-size:.82rem; font-weight:700; }
.so-row.is-pass .so-state { color:var(--good); }
.so-row.is-reassess .so-state { color:var(--accent); }
.so-state .muted { font-weight:400; }
/* The criteria are the point of the row, so they read as prose. */
.so-crit { margin:0; font-size:.88rem; color:var(--muted); max-width:80ch; }
.so-crit strong { color:var(--text); }
.so-act { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.so-act .so-ev { flex:1; min-width:12rem; font-size:.88rem; }
.so-act .so-clear { padding-left:.7rem; padding-right:.7rem; }
.so-act .so-clear:hover { border-color:#e5484d; color:#e5484d; }
@media (max-width:560px) {
  .so-state { margin-left:0; width:100%; }
  .so-act .btn { flex:1; }
}

/* ---- security (admin → Security) ---------------------------- */
.tab-count { display:inline-block; min-width:1.2rem; margin-left:.4rem; padding:0 .35rem;
  border-radius:99px; background:#e5484d; color:#fff; font-size:.72rem; font-weight:800;
  line-height:1.25rem; text-align:center; }
.alert-list { display:grid; gap:12px; margin-top:1rem; }
.alert-row { background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--border); border-radius:12px; padding:13px 15px; display:grid; gap:.55rem; }
.alert-row.warn { border-left-color:var(--accent); }
.alert-row.bad  { border-left-color:#e5484d; }
.alert-row.done { opacity:.6; }
.al-head { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.al-kind { font-weight:700; }
.alert-row.bad .al-kind { color:#e5484d; }
.alert-row.warn .al-kind { color:var(--accent); }
.al-who { color:var(--text); font-size:.9rem; word-break:break-all; }
.al-when { margin-left:auto; font-size:.82rem; white-space:nowrap; }
.al-detail { margin:0; font-size:.9rem; color:var(--muted); max-width:80ch; }
.al-act { display:flex; gap:.5rem; flex-wrap:wrap; }
.al-cut:hover { border-color:#e5484d; color:#e5484d; }
.al-done { margin:0; font-size:.84rem; }
/* What each alert means, next to the list rather than in a manual. */
.alert-key { margin:0; display:grid; gap:.5rem 1rem; }
.alert-key dt { font-weight:700; font-size:.9rem; }
.alert-key dd { margin:0 0 .5rem; font-size:.89rem; color:var(--muted); max-width:80ch; }
.tag.canary { background:rgba(229,72,77,.14); border-color:#e5484d; color:#e5484d; }
@media (min-width:760px) {
  .alert-key { grid-template-columns:11rem 1fr; }
  .alert-key dd { margin-bottom:0; }
}
@media (max-width:560px) { .al-when { margin-left:0; width:100%; } .al-act .btn { flex:1; } }

/* ---- knowledge-check editor (admin → Syllabus) -------------- */
.quiz-block .body-help { margin-bottom:1rem; max-width:80ch; }
.quiz-pass { align-items:end; margin-bottom:1rem; }
.quiz-pass #f-pass { max-width:120px; }
.quiz-pass p { margin:0 0 .7rem; font-size:.86rem; }
.row-item.question { padding:14px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; }
.row-item.question .grow { gap:8px; }
.row-item.question .q-prompt { font-weight:600; }
.row-item.question .q-prompt::before { content:none; }
.opt-list { display:grid; gap:6px; }
.opt-row { display:flex; align-items:center; gap:8px; }
.opt-row .q-option { flex:1; }
.opt-right { flex:none; display:flex; align-items:center; }
.opt-right input { width:auto; margin:0; accent-color:var(--good); cursor:pointer; }
.opt-row .q { width:28px; height:28px; flex:none; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); cursor:pointer; font-weight:700; }
.opt-row .q.rm:hover { border-color:#e5484d; color:#e5484d; }
.row-item.question .add-opt { justify-self:start; font-size:.82rem; }
.row-item.question .q-why { font-size:.88rem; }
@media (max-width:700px) { .quiz-pass { grid-template-columns:1fr; } }
@media (max-width:900px) { .trainee-admin, .assess-admin { grid-template-columns:1fr; } }