/* SILA — academy component layer.
 *
 * Built only on SecuryTik design tokens (themes.css). No new colors, radii or
 * shadows; no physical direction properties (logical only, so RTL is free).
 * Layout primitives (.card, .btn, .table, .field) come from app.css and
 * ecosystem.css — this file adds only what the academy genuinely needs.
 */


/* The shared shell is a grid, and a grid item's default `min-inline-size` is
   `auto` — so any child wider than the track (a 297mm certificate, a wide
   table) widens the whole column past the viewport instead of scrolling or
   clipping inside its own box. SICO carries the same one-liner for the same
   reason. */
.sila-app.app-shell > * { min-inline-size: 0; }

/* ── Page rhythm ───────────────────────────────────────────────────────── */
/* The academy runs full width, as the shared shell intends. Only the vertical
   rhythm is set here: one gap value between every stacked block, so the page
   does not alternate between 14px and 18px depending on which element
   happens to follow which. */
/* One rule, one value. An earlier attempt paired a `margin: 0` reset with a
   `> * + *` rule; the reset carried the higher specificity, won, and the
   blocks ended up touching. Set the gap on every child and clear it on the
   first — nothing to out-specify. */
.sila-app main.content > * { margin-block-start: 20px; }
.sila-app main.content > :first-child { margin-block-start: 0; }

/* Card headings in the academy are section labels, not page titles — the page
   title already sits in the topbar. */
.sila-app .card__header h2 { font-size: 16px; margin: 0; }
.sila-app .card__header h3 { font-size: 15px; margin: 0; }

/* Numeric table column: sized to its content and aligned to the number, so a
   count does not drift to the far edge of a wide table. */
.sila-app .table .sila-num { inline-size: 1%; white-space: nowrap; text-align: end; }
@media (max-width: 720px) {
  /* Stacked rows put the label on the left — keep the value beside it. */
  .sila-app .table .sila-num { text-align: start; inline-size: auto; }
}

/* ── Sidebar: modules that exist but are not built yet ─────────────────── */
/* Rendered as spans, not links, so they cannot be clicked or tabbed into. */
.sila-nav-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--fg-dim);
  font-size: 13px;
  cursor: default;
  opacity: .62;
}
.sila-nav-soon svg { inline-size: 16px; block-size: 16px; flex: none; }
.sila-nav-soon em {
  margin-inline-start: auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

/* ── Vendor filter chips ───────────────────────────────────────────────── */
.sila-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 18px; }
.sila-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
}
.sila-chip:hover { border-color: var(--border-strong); color: var(--fg); text-decoration: none; }
.sila-chip.is-active {
  background: var(--primary); border-color: var(--primary); color: var(--primary-fg);
}
.sila-chip.is-soon { opacity: .5; cursor: default; }

/* ── Certificate list ──────────────────────────────────────────────────── */
.sila-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sila-cert__link {
  display: grid;
  /* Fixed first column: the codes differ in width (MTCSE vs MTCIPv6E), so
     an auto column starts every name at a different x and the list reads
     ragged. */
  grid-template-columns: 92px 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  color: var(--fg);
}
.sila-cert__link:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: var(--bg-hover);
  text-decoration: none;
  /* The row is the link, so the whole row lights up. Without this the shared
     `a:hover { color: var(--primary-hov) }` also turns the name blue, which
     reads as a second, separate target inside an already-clickable row. */
  color: var(--fg);
}
.sila-cert__code {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  padding: 7px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}
.sila-cert__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-weight: 600;
  font-size: 14px;
}

.sila-level {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
}
.sila-level.is-basic    { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sila-level.is-advanced { color: var(--info);   border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.sila-level.is-extended { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); }
.sila-level.is-legacy   { color: var(--fg-dim); }

/* ── Fact lists (certificate detail, exam rules) ───────────────────────── */
.sila-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sila-facts li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-block-end: 1px solid var(--border);
  font-size: 13px;
}
.sila-facts li:last-child { border-block-end: 0; }
.sila-facts strong { color: var(--fg-muted); font-weight: 500; }
.sila-facts--rules li { border-block-end: 0; padding: 4px 0; }

/* ── Mode picker ───────────────────────────────────────────────────────── */
.sila-modes-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
/* Both cards stretch to the taller of the two; without this the shorter
   card's button floats mid-air with dead space under it. */
.sila-modes-pick .card { margin-block-start: 0; display: flex; flex-direction: column; }
.sila-modes-pick .card__body { flex: 1; }
.sila-mode--exam { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

.sila-resume { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sila-resume__title { margin: 0 0 6px; font-size: 16px; }
.sila-resume__meta { margin: 0 0 14px; color: var(--fg-dim); font-size: 13px; }

/* ── Verdict pills ─────────────────────────────────────────────────────── */
.sila-verdict {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.sila-verdict.is-pass { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.sila-verdict.is-fail { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.sila-verdict.is-open { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }

/* ── The runner ────────────────────────────────────────────────────────── */
/* Three areas, not two, so the clock is placed independently of the palette:
   on a phone the clock must stay pinned while the palette drops below the
   question. */
.sila-runner {
  display: grid;
  grid-template-columns: 1fr 264px;
  grid-template-areas:
    "main timer"
    "main side";
  /* min-content / 1fr, NOT auto / auto. The question column spans both rows,
     and with two auto rows the browser hands part of its height to row 1 —
     so the palette started lower than the question card, and dropped further
     every time a practice answer revealed its explanation and grew the
     column. A 1fr second row absorbs the spanning height instead, and row 1
     collapses to nothing when there is no clock (practice mode). */
  grid-template-rows: min-content 1fr;
  /* Column gap only. A row gap would still be drawn above the palette when
     the clock row is collapsed (practice mode has no clock), leaving the
     palette 16px below the question card for no reason. The clock carries its
     own bottom margin instead. */
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
}
.sila-runner__main { grid-area: main; min-inline-size: 0; }
.sila-timer        { grid-area: timer; margin-block-start: 0; margin-block-end: 16px; }
.sila-runner__side { grid-area: side; position: sticky; inset-block-start: 16px; }
.sila-runner__side .card { margin-block-start: 0; }

.sila-qcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sila-qcard__counter { font-size: 13px; color: var(--fg-muted); }
.sila-qcard__counter b { color: var(--fg); font-size: 15px; }
.sila-qcard__tags { display: flex; align-items: center; gap: 10px; }
.sila-multi {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn);
}
#sila-flag.is-on { background: var(--warn); border-color: var(--warn); color: #fff; }
.sila-qcard__foot { display: flex; gap: 10px; justify-content: space-between; }

.sila-qbody { font-size: 15.5px; line-height: 1.6; margin-block-end: 18px; }
.sila-qbody code, .sila-opt__text code, .sila-reveal code, .sila-review code {
  font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-elev-2);
}

.sila-options { display: grid; gap: 8px; }
.sila-opt {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  line-height: 1.5;
}
.sila-opt:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.sila-opt input { margin-block-start: 3px; accent-color: var(--primary); }
.sila-opt__letter { font-weight: 700; color: var(--fg-dim); min-inline-size: 1.1em; }
.sila-opt:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
/* Only ever applied after the answer is revealed — practice mode alone. */
/* Three states, not two. "Correct" used to be painted green whether or not
   the student had picked it, so a paper where every right answer glowed green
   looked identical to one where they had all been missed — the single thing
   the student opened the reveal to find out. Now: green = you chose it and it
   was right, red = you chose it and it was wrong, blue = the answer you should
   have chosen. */
.sila-opt.is-correct {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.sila-opt.is-wrong {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
.sila-opt.is-missed {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 14%, var(--surface));
}

/* Colour is never the only signal — roughly one man in twelve cannot separate
   the red from the green, and this is the screen where that matters most. */
.sila-opt.is-correct::after,
.sila-opt.is-wrong::after,
.sila-opt.is-missed::after {
  margin-inline-start: auto;
  align-self: center;
  font-weight: 700;
  font-size: 1.05rem;
  flex: none;
}
.sila-opt.is-correct::after { content: "\2713"; color: var(--accent); }
.sila-opt.is-wrong::after   { content: "\2717"; color: var(--danger); }
.sila-opt.is-missed::after  { content: "\2190"; color: var(--info); }
[dir="rtl"] .sila-opt.is-missed::after { content: "\2192"; }

.sila-reveal {
  margin-block-start: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--info);
  background: var(--bg-elev-2);
  font-size: 13.5px;
  line-height: 1.65;
}
.sila-reveal.is-right { border-inline-start-color: var(--accent); }
.sila-reveal.is-wrong { border-inline-start-color: var(--danger); }
.sila-reveal__legend { margin: 0 0 6px; font-size: .84rem; color: var(--info); font-weight: 600; }
.sila-reveal__part { margin: 0 0 6px; font-size: .84rem; color: var(--warn); font-weight: 600; }
.sila-review__part { margin-inline-start: 8px; font-size: .8rem; font-weight: 600;
  color: var(--warn); }
.sila-reveal__verdict { margin: 0 0 6px; font-weight: 700; }
.sila-reveal.is-right .sila-reveal__verdict { color: var(--accent); }
.sila-reveal.is-wrong .sila-reveal__verdict { color: var(--danger); }
.sila-reveal__why { margin: 0; }
.sila-reveal__ref { margin: 8px 0 0; font-size: 12px; color: var(--fg-dim); word-break: break-word; }

/* ── Timer + palette ───────────────────────────────────────────────────── */
.sila-timer .card__body { display: grid; gap: 2px; text-align: center; }
.sila-timer__label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fg-dim); }
.sila-timer__value {
  font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sila-timer.is-low { border-color: var(--danger); }
.sila-timer.is-low .sila-timer__value { color: var(--danger); }

.sila-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sila-pal {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.sila-pal:hover { border-color: var(--border-strong); }
.sila-pal.is-answered { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.sila-pal.is-flagged { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.sila-pal.is-current { outline: 2px solid var(--ring); outline-offset: 1px; }

.sila-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--fg-dim); }
.sila-legend li { display: flex; align-items: center; gap: 7px; }
.sila-legend i { inline-size: 12px; block-size: 12px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); }
.sila-legend i.is-answered { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.sila-legend i.is-flagged { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }

/* ── Result ────────────────────────────────────────────────────────────── */
.sila-score { text-align: center; }
.sila-score__cert { margin: 0 0 4px; font-size: 13px; color: var(--fg-dim); }
.sila-score__value { margin: 0; font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: -2px; }
.sila-score__value small { font-size: 26px; font-weight: 600; }
.sila-score.is-pass .sila-score__value { color: var(--accent); }
.sila-score.is-fail .sila-score__value { color: var(--danger); }
.sila-score__verdict { margin: 6px 0 0; font-weight: 600; }
.sila-score__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--fg-dim); }
.sila-score .card__footer { display: flex; gap: 10px; justify-content: center; }

.sila-topics { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.sila-topic { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; font-size: 13px; }
.sila-topic__bar { block-size: 8px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.sila-topic__bar i { display: block; block-size: 100%; border-radius: 999px; }
.sila-topic__bar i.is-good { background: var(--accent); }
.sila-topic__bar i.is-mid  { background: var(--warn); }
.sila-topic__bar i.is-poor { background: var(--danger); }
.sila-topic__score { font-variant-numeric: tabular-nums; color: var(--fg-dim); font-size: 12.5px; }

.sila-review { display: grid; gap: 14px; }
.sila-review__q { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.sila-review__q.is-right { border-inline-start: 3px solid var(--accent); }
.sila-review__q.is-wrong { border-inline-start: 3px solid var(--danger); }
.sila-review__head { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-dim); display: flex; align-items: center; gap: 8px; }
.sila-review__n { font-weight: 700; color: var(--fg); }
.sila-review__body { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.sila-review__opts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.sila-review__opts li { padding: 5px 9px; border-radius: 7px; }
.sila-review__opts li.is-correct { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.sila-review__opts li.is-wrong { background: color-mix(in srgb, var(--danger) 11%, transparent); }
.sila-review__opts li.is-missed { background: color-mix(in srgb, var(--info) 15%, transparent); }
.sila-review__opts li.is-correct::after { content: " \2713"; color: var(--accent); font-weight: 700; }
.sila-review__opts li.is-wrong::after   { content: " \2717"; color: var(--danger); font-weight: 700; }
.sila-review__opts li.is-missed::after  { content: " \2190"; color: var(--info); font-weight: 700; }
[dir="rtl"] .sila-review__opts li.is-missed::after { content: " \2192"; }
.sila-review__why { margin: 0; font-size: 13px; color: var(--fg-muted); line-height: 1.6; }
.sila-review__ref { margin: 6px 0 0; font-size: 12px; color: var(--fg-dim); word-break: break-word; }

/* ── Narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The question comes first. An earlier pass put the palette above it, which
     buried the question under ~490px of chrome — you had to scroll to read
     what you were answering, and "Finish and submit" sat above the paper where
     it could be hit by accident. Only the clock stays pinned. */
  .sila-runner {
    grid-template-columns: 1fr;
    grid-template-areas: "timer" "main" "side";
  }
  .sila-runner__side { position: static; }

  .sila-timer {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
  }
  /* Compact to one line so it costs a strip, not a screen. */
  .sila-timer .card__body {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding-block: 10px;
  }
  .sila-timer__value { font-size: 20px; }

  /* 25 squares across a phone leaves ~27px each — under any reasonable touch
     target. Let them reflow to whatever fits at 38px and wrap. */
  .sila-palette { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
  .sila-pal { aspect-ratio: auto; min-block-size: 38px; }

  /* The floating contact button sits over the bottom-right of the viewport;
     without this it covers the last answer option. */
  .sila-app main.content { padding-block-end: 88px; }
}
@media (max-width: 600px) {
  .sila-cert__link { grid-template-columns: 1fr; row-gap: 8px; }
  .sila-cert__code { justify-self: start; min-inline-size: 92px; }
  .sila-cert__code { justify-self: start; }
  .sila-topic { grid-template-columns: 1fr auto; }
  .sila-topic__bar { grid-column: 1 / -1; }
  .sila-qcard__foot { flex-wrap: wrap; }
  .sila-qcard__foot .btn { flex: 1 1 auto; justify-content: center; }
  .sila-score__value { font-size: 52px; }
}

/* ── Row-level links (history, recent results) ─────────────────────────── */
/* The certificate name was the only clickable target in a row ~1400px wide.
   A stretched pseudo-element makes the whole row the target while keeping a
   real <a> for semantics, keyboard focus and middle-click — which a JS
   row-click handler would throw away.

   The cells must NOT be given `position: relative`: a positioned sibling
   paints above the overlay and swallows the click everywhere except the name
   itself, which is the bug this replaced. */
.sila-app .sila-rowlink tbody tr { position: relative; }
.sila-app .sila-rowlink tbody tr:hover { background: var(--bg-hover); cursor: pointer; }
.sila-app .sila-rowlink tbody tr:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.sila-app .sila-rowlink tbody a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* The whole row is the affordance now, so the name should not also advertise
   itself as a link — a blue underlined word inside a clickable row reads as
   two different targets. */
.sila-app .sila-rowlink tbody a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.sila-app .sila-rowlink tbody a:hover { color: var(--fg); text-decoration: none; }

/* ── Dashboard: progress figures ───────────────────────────────────────── */
.sila-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.sila-stat {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
}
.sila-stat__value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
.sila-stat__value small { font-size: 15px; font-weight: 600; }
.sila-stat__label {
  display: block;
  margin-block-start: 4px;
  font-size: 11.5px;
  color: var(--fg-dim);
}
/* The one figure worth celebrating rather than merely reporting. */
.sila-stat.is-highlight {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.sila-stat.is-highlight .sila-stat__value { color: var(--accent); }

/* ── Badges ────────────────────────────────────────────────────────────── */
.sila-badges {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.sila-badge {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
/* Locked badges stay visible and dimmed: the ladder only motivates if you can
   see the next rung. */
.sila-badge:not(.is-earned) { opacity: .62; border-style: dashed; background: transparent; }
.sila-badge__icon {
  inline-size: 34px; block-size: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--bg-elev-2); color: var(--fg-dim);
}
.sila-badge__icon svg { inline-size: 18px; block-size: 18px; }
.sila-badge.is-earned .sila-badge__icon {
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: #fff;
}
.sila-badge__text { display: grid; gap: 3px; min-inline-size: 0; }
.sila-badge__name { font-weight: 600; font-size: 13.5px; }
.sila-badge__desc { font-size: 11.5px; color: var(--fg-dim); line-height: 1.45; }
.sila-badge__bar {
  block-size: 4px; border-radius: 999px; background: var(--bg-elev-2);
  overflow: hidden; margin-block-start: 4px;
}
.sila-badge__bar i { display: block; block-size: 100%; background: var(--primary); border-radius: 999px; }
.sila-badge__progress { font-size: 11px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* ── Certificates ──────────────────────────────────────────────────────── */
.sila-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sila-award__link {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
}
.sila-award__link:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--bg-hover);
  color: var(--fg);
  text-decoration: none;
}
.sila-award__seal {
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: #fff;
}
.sila-award__seal svg { inline-size: 20px; block-size: 20px; }
.sila-award__main { display: grid; gap: 4px; min-inline-size: 0; }
.sila-award__name { font-weight: 600; font-size: 14px; }
.sila-award__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--fg-dim); }
.sila-award__serial {
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 12px; color: var(--fg-muted); white-space: nowrap;
}

/* The preview stage holds the real document, scaled. The document keeps its
   true print width (297mm) and is transformed down to fit, so the preview is
   the artefact rather than a re-flowed lookalike of it. Height is set by the
   same script that sets the scale. */
.sila-cert-stage {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: auto;
  overflow: hidden;
  /* The document is taken out of flow entirely. Left in flow it is 297mm wide
     and drags the whole page wider than the viewport before the script can
     scale it — and the script then measures that widened box, so the fit is
     computed against the overflow it caused. */
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.sila-cert-stage__doc { position: absolute; inset-block-start: 0; transform-origin: top left; }
/* The document paints its own frame; nothing from the app shell should reach
   inside it. */
.sila-cert-doc, .sila-cert-doc * { box-sizing: border-box; }
.sila-cert-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Exam integrity notice ─────────────────────────────────────────────── */
.sila-integrity {
  grid-column: 1 / -1;
  padding: 11px 15px;
  border-radius: 10px;
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
}
.sila-integrity.is-fatal {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

/* ── Public verification ───────────────────────────────────────────────── */
.sila-verify { max-inline-size: 760px; margin-inline: auto; }
.sila-verify__form {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-block-start: 24px;
}
.sila-verify__field { flex: 1 1 320px; display: grid; gap: 6px; text-align: start; }
.sila-verify__label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.sila-verify__field .input {
  font-family: 'Fira Code', Consolas, monospace;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.sila-verify__hint { font-size: 12px; color: var(--fg-dim); margin-block-start: 8px; text-align: start; }

.sila-verify__result {
  margin-block-start: 26px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: start;
}
.sila-verify__result h2 { margin: 0 0 6px; font-size: 19px; }
.sila-verify__result.is-good { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.sila-verify__result.is-good h2 { color: var(--accent); }
.sila-verify__result.is-bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.sila-verify__result.is-bad h2 { color: var(--danger); }
.sila-verify__stamp { inline-size: 42px; block-size: 42px; margin-block-end: 10px; }
.sila-verify__result.is-good .sila-verify__stamp { color: var(--accent); }
.sila-verify__result.is-bad .sila-verify__stamp { color: var(--danger); }
.sila-verify__note { margin: 0 0 14px; font-size: 13px; color: var(--fg-muted); line-height: 1.6; }
.sila-verify__facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.sila-verify__facts li {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 7px; border-block-end: 1px solid var(--border); font-size: 13.5px;
}
.sila-verify__facts li:last-child { border-block-end: 0; }
.sila-verify__facts strong { color: var(--fg-muted); font-weight: 500; }
.sila-verify__scope {
  margin-block-start: 16px; padding-block-start: 14px;
  border-block-start: 1px solid var(--border);
  font-size: 12px; color: var(--fg-dim); line-height: 1.6;
}

@media (max-width: 600px) {
  .sila-award__link { grid-template-columns: auto 1fr; }
  .sila-award__serial { grid-column: 1 / -1; }
  .sila-verify__facts li { flex-direction: column; gap: 2px; }
}

/* Syllabus: what the exam covers, as a list. It used to be a two-column table
   with a per-module question count — the same operational number the bank size
   was, in a different shape. */
.sila-syllabus { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.sila-syllabus li { color: var(--fg-muted); }
.sila-syllabus li::marker { color: var(--fg-dim); }

/* ── Pre-exam rules dialog ─────────────────────────────────────────────── */
/* Built on the shared .modal component. The body scrolls rather than the page
   so the accept control stays in view — an agreement you have to hunt for is
   an agreement people click without reading. */
.sila-terms__body {
  max-block-size: min(62vh, 560px);
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg-muted);
}
.sila-terms__body h3 {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--fg);
}
.sila-terms__body h3:first-child { margin-block-start: 0; }
.sila-terms__body ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 7px; }
.sila-terms__body strong { color: var(--fg); }

.sila-terms__agree {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  margin-block-start: 20px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
}
.sila-terms__agree input {
  /* A 16px checkbox is a poor target on a phone and this is the one control
     that matters on the screen. */
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sila-terms__footer { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 600px) {
  .sila-terms__body { max-block-size: 58vh; }
  .sila-terms__footer { flex-direction: column-reverse; }
  .sila-terms__footer .btn { inline-size: 100%; justify-content: center; }
}

/* ── Exam integrity breach ─────────────────────────────────────────────── */
/* A blocking overlay, not a banner. An earlier inline strip above the question
   was routinely missed — a warning nobody notices is not a warning, and the
   third one ends the sitting. */
.sila-breach {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--warn) 22%, rgba(2, 6, 23, 0.72));
  backdrop-filter: blur(3px);
}
.sila-breach[hidden] { display: none; }
.sila-breach__box {
  max-inline-size: 520px;
  padding: 28px 30px 26px;
  border-radius: 16px;
  border: 2px solid var(--warn);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.sila-breach__icon {
  inline-size: 54px; block-size: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}
.sila-breach__icon svg { inline-size: 28px; block-size: 28px; }

/* Strike pips: two spent of three reads faster than a sentence saying so. */
.sila-breach__strikes { display: flex; gap: 8px; justify-content: center; margin: 0 0 14px; }
.sila-breach__strikes i {
  inline-size: 34px; block-size: 6px; border-radius: 999px;
  background: var(--border-strong);
}
.sila-breach__strikes i.is-spent { background: var(--warn); }

.sila-breach__title { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: var(--warn); }
.sila-breach__text { margin: 0 0 20px; font-size: 14px; line-height: 1.65; color: var(--fg); }
.sila-breach .btn { min-block-size: 44px; padding-inline: 22px; }

/* The third strike is not a warning any more. */
.sila-breach.is-fatal { background: color-mix(in srgb, var(--danger) 26%, rgba(2, 6, 23, 0.78)); }
.sila-breach.is-fatal .sila-breach__box { border-color: var(--danger); }
.sila-breach.is-fatal .sila-breach__icon { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.sila-breach.is-fatal .sila-breach__strikes i.is-spent { background: var(--danger); }
.sila-breach.is-fatal .sila-breach__title { color: var(--danger); }

@media (max-width: 600px) {
  .sila-breach__box { padding: 24px 20px; }
  .sila-breach__title { font-size: 18px; }
  .sila-breach .btn { inline-size: 100%; justify-content: center; }
}

/* The exam card's missing-name notice sits above the rules, where the start
   control used to draw the eye. */
.sila-name-gate { margin-block-end: 14px; font-size: 13px; line-height: 1.6; }

/* ── History page size ─────────────────────────────────────────────────── */
.sila-history__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sila-pagesize { display: flex; align-items: center; gap: 4px; }
.sila-pagesize__label { font-size: 12px; color: var(--fg-dim); margin-inline-end: 4px; }
.sila-pagesize__opt {
  min-inline-size: 34px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.sila-pagesize__opt:hover { border-color: var(--border-strong); color: var(--fg); text-decoration: none; }
.sila-pagesize__opt.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.sila-history__count { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-dim); }

/* ── Pass celebration ──────────────────────────────────────────────────── */
.sila-party {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% 40%,
      color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 62%),
    rgba(2, 6, 23, 0.74);
  backdrop-filter: blur(4px);
  overflow: hidden;
  animation: sila-party-in .28s ease-out both;
}
.sila-party[hidden] { display: none; }

/* The particle burst is painted here, behind the card and above the scrim. */
.sila-party__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.sila-party__box {
  position: relative;
  z-index: 1;
  max-inline-size: 500px;
  padding: 34px 32px 28px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow:
    0 24px 60px rgba(2, 6, 23, .45),
    0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
  text-align: center;
  /* Overshoots then settles — the card arrives rather than appearing. */
  animation: sila-pop .62s cubic-bezier(.2, 1.35, .35, 1) both .06s;
}

/* ── Medal ── */
.sila-party__medal { position: relative; inline-size: 104px; block-size: 104px; margin: 0 auto 14px; }
.sila-party__rays {
  position: absolute; inset: -26px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 0 6deg, transparent 6deg 30deg);
  opacity: .5;
  animation: sila-spin 9s linear infinite;
}
.sila-party__disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #fff3c4 0%, #e2c463 42%, #b8912f 100%);
  color: #4a3708;
  box-shadow:
    inset 0 -4px 10px rgba(0, 0, 0, .18),
    0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
  animation: sila-medal .8s cubic-bezier(.2, 1.4, .3, 1) both .18s;
}
.sila-party__disc svg { inline-size: 46px; block-size: 46px; }

.sila-party__kicker {
  margin: 0 0 2px;
  font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
}
.sila-party__title {
  margin: 0 0 4px;
  font-size: 30px; font-weight: 800; letter-spacing: -0.8px;
  background: linear-gradient(100deg, var(--accent), var(--primary) 55%, var(--accent));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
  animation: sila-sheen 3.2s ease-in-out infinite;
}
.sila-party__score {
  margin: 6px 0 10px;
  font-size: 62px; font-weight: 800; line-height: 1;
  letter-spacing: -2.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sila-party__score small { font-size: 26px; font-weight: 700; letter-spacing: 0; }
.sila-party__text { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--fg-muted); }

.sila-party__chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  font-size: 12.5px; color: var(--fg);
}
.sila-party__chip svg { inline-size: 15px; block-size: 15px; color: var(--accent); }

.sila-party__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sila-party__actions .btn { min-block-size: 44px; padding-inline: 20px; }

@keyframes sila-party-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sila-pop {
  from { opacity: 0; transform: translateY(26px) scale(.86); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sila-medal {
  0%   { transform: scale(0) rotate(-160deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes sila-spin { to { transform: rotate(360deg); } }
@keyframes sila-sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Everything decorative is motion; honour the request to stop it. */
@media (prefers-reduced-motion: reduce) {
  .sila-party,
  .sila-party__box,
  .sila-party__disc,
  .sila-party__title { animation: none; }
  .sila-party__rays { animation: none; opacity: .35; }
  .sila-party__canvas { display: none; }
}

@media (max-width: 600px) {
  .sila-party__box { padding: 28px 20px 22px; }
  .sila-party__title { font-size: 25px; }
  .sila-party__score { font-size: 50px; }
  .sila-party__medal { inline-size: 88px; block-size: 88px; }
  .sila-party__disc svg { inline-size: 38px; block-size: 38px; }
  .sila-party__actions .btn { inline-size: 100%; justify-content: center; }
}

/* ── Free courses ──────────────────────────────────────────────────────── */
.sila-courses__lead { max-inline-size: 78ch; margin-block-end: 18px; }
.sila-courses {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Two per row, collapsing to one below the tablet breakpoint. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.sila-course__link {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0;
  block-size: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sila-course__link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--fg);
}
.sila-course__thumb {
  position: relative;
  display: block;
  background: var(--bg-elev-2);
  /* Full card height, not a fixed ratio: the image is cropped to fill the
     column so the card has no dead strip above or below it. Thumbnails are
     the 16:9 maxres variants — hqdefault bakes black letterbox bars into a
     4:3 frame, which no amount of CSS can crop away cleanly. */
  block-size: 100%;
  min-block-size: 132px;
  overflow: hidden;
}
.sila-course__thumb img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  display: block;
}
.sila-course__play {
  position: absolute;
  inset-block-end: 8px; inset-inline-start: 8px;
  inline-size: 30px; block-size: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(2, 6, 23, .74);
  color: #fff;
}
.sila-course__play svg { inline-size: 16px; block-size: 16px; }

.sila-course__body { display: grid; align-content: start; gap: 6px; padding: 14px 16px; min-inline-size: 0; }
.sila-course__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--fg-dim); align-items: center; }
.sila-course__title { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.sila-course__blurb { font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); }
.sila-course__cta {
  display: inline-flex; align-items: center; gap: 5px;
  margin-block-start: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--primary);
}
.sila-course__cta svg { inline-size: 13px; block-size: 13px; }

@media (max-width: 980px) {
  .sila-courses { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* Below this the 190px thumbnail column starves the text; stack instead. */
  .sila-course__link { grid-template-columns: 1fr; }
  .sila-course__thumb { block-size: auto; aspect-ratio: 16 / 9; }
}

/* The last warning before termination reads as one: amber says "noted", this
   says "next one ends it". */
.sila-breach.is-final { background: color-mix(in srgb, var(--danger) 20%, rgba(2, 6, 23, 0.75)); }
.sila-breach.is-final .sila-breach__box { border-color: var(--danger); }
.sila-breach.is-final .sila-breach__icon {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.sila-breach.is-final .sila-breach__strikes i.is-spent { background: var(--danger); }
.sila-breach.is-final .sila-breach__title { color: var(--danger); }

/* ── Exam focus mode ───────────────────────────────────────────────────── */
/* Exam sittings strip the page to the paper. Everything removed here is either
   a way out of the exam or something to look at instead of the question — and
   two of them (the sidebar links, the chat button) lead somewhere that would
   spend an integrity strike. */
.sila-focus .app-sidebar,
.sila-focus .site-header,
.sila-focus .app-footer,
.sila-focus .app-scrim,
.sila-focus .wa-fab { display: none !important; }

.sila-focus.app-shell,
body.sila-focus.sb-collapsed.app-shell {   /* a collapsed sidebar (sidebar.css, 58px column) must not squeeze the paper into it (2026-10-22) */
  grid-template-columns: 1fr;
  grid-template-areas: "main";
}
.sila-focus main.content {
  grid-area: main;
  max-inline-size: 1180px;
  margin-inline: auto;
  padding-block: 28px;
}

/* The way out, set apart from the paper and deliberately low-key: it is there
   when needed, not competing with the question. */
.sila-exit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-block-start: 22px;
}
.sila-exit .btn { opacity: .75; }
.sila-exit .btn:hover { opacity: 1; }
.sila-exit__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sila-exit__actions .btn { min-block-size: 44px; padding-inline: 20px; }

@media (max-width: 600px) {
  .sila-focus main.content { padding-block: 16px; }
  .sila-exit__actions { flex-direction: column-reverse; }
  .sila-exit__actions .btn { inline-size: 100%; justify-content: center; }
}

/* ── English content inside an RTL page ────────────────────────────────── */
/* The controls are translated, but the questions, options and explanations come
   from the bank in English and stay that way. Only the paper is pinned
   left-to-right: flipping English prose strands the question mark at the head
   of the line and right-aligns ragged text. The chrome around it follows the
   page like everything else. */
.sila-paper .sila-qbody,
.sila-paper .sila-options,
.sila-paper .sila-reveal,
.sila-review__body,
.sila-review__opts,
.sila-review__why,
.sila-review__ref {
  direction: ltr;
  text-align: left;
}
/* Accent rules on those blocks follow the paper, not the page. */
[dir="rtl"] .sila-paper .sila-reveal,
[dir="rtl"] .sila-review__q {
  border-inline-start-width: 0;
  border-left: 3px solid var(--info);
}
[dir="rtl"] .sila-paper .sila-reveal.is-right,
[dir="rtl"] .sila-review__q.is-right { border-left-color: var(--accent); }
[dir="rtl"] .sila-paper .sila-reveal.is-wrong,
[dir="rtl"] .sila-review__q.is-wrong { border-left-color: var(--danger); }


/* ── Courses (instructor-led, /learn/training) ─────────────────────────── */
.trn-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trn-bar .sila-filters { margin: 0; }
.trn-search { margin-inline-start: auto; display: flex; gap: 8px; min-inline-size: 0; }
.trn-search .input { min-inline-size: 0; inline-size: 240px; max-inline-size: 100%; }
@media (max-width: 640px) { .trn-search { margin-inline-start: 0; inline-size: 100%; } .trn-search .input { flex: 1; inline-size: auto; } }

.trn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.trn-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px); background: var(--bg-elev); color: var(--fg); text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s; min-inline-size: 0; }
.trn-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--fg) 40%, transparent); text-decoration: none; }
.trn-card__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trn-card__title { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; }
.trn-card__sum { font-size: 13px; color: var(--fg-muted); margin: 0; line-height: 1.5; flex: 1; }
.trn-card__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--fg-dim); }
.trn-card__facts span { display: inline-flex; gap: 5px; align-items: center; }
.trn-card__facts svg { inline-size: 14px; block-size: 14px; }
.trn-card__foot { display: flex; align-items: center; gap: 10px; padding-block-start: 12px; border-block-start: 1px solid var(--border); }
.trn-card__next { font-size: 12.5px; color: var(--fg-muted); flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-card__next.is-none { color: var(--fg-dim); }

.trn-type { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; }
.trn-type.is-vendor { color: var(--info); background: color-mix(in srgb, var(--info) 13%, transparent); }
.trn-type.is-practical { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.trn-tag { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--fg-muted);
  border: 1px solid var(--border); }
.trn-price { font-weight: 800; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trn-price small { font-weight: 600; font-size: 11px; color: var(--fg-dim); }
.trn-price.is-free { color: var(--accent); }
/* Courses page, "paths + one choice" (2026-10-17): way switch, shelves, clean cards. Hover lifts, never colours or underlines text. */
.trn2-way { display: grid; gap: 10px; margin-block-end: 16px; }
.trn2-way__q { font-size: 20px; margin: 0; }
.trn2-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.trn2-pill { display: inline-flex; align-items: center; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--bg-elev);
  color: var(--fg); font-size: 14px; font-weight: 700; text-decoration: none; min-inline-size: 0; transition: border-color .15s, transform .15s, box-shadow .15s; }
.trn2-pill:hover { transform: translateY(-2px); text-decoration: none; color: var(--fg); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--fg) 40%, transparent); }
.trn2-pill.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--bg-elev)); }
.trn2-pill--way { padding: 10px 22px; font-size: 15px; border-width: 2px; }
.trn2-pills--cat .trn2-pill { font-size: 13px; padding: 6px 14px; font-weight: 600; }
.trn2-note { margin: 8px 0 0; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 10px; color: var(--fg-muted); font-size: 13.5px; }
.trn2-note a { color: var(--fg); font-weight: 700; text-decoration: none; }
.trn2-highlight { animation: trn2-pulse 2.4s ease-out 1; outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 12px; }
@keyframes trn2-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }
.trn2-bar { margin-block-end: 8px; }
.trn2-shelf { margin-block-start: 26px; }
.trn2-shelf__title { font-size: 18px; margin: 0 0 6px; }
.trn2-path { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 0 12px; font-size: 13px; color: var(--fg-muted); }
.trn2-path b { color: var(--fg); }
.trn2-path i { font-style: normal; color: var(--fg-dim); }
[dir="rtl"] .trn2-path i { display: inline-block; transform: scaleX(-1); }
.trn2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.trn2-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg, 14px);
  background: var(--bg-elev); min-inline-size: 0; transition: border-color .15s, transform .15s, box-shadow .15s; }
.trn2-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--fg) 40%, transparent); }
.trn2-card__head { display: flex; gap: 10px; align-items: flex-start; }
.trn2-step { flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.trn2-card__title { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; min-inline-size: 0; }
.trn2-card__title a, .trn2-card__title a:hover { color: var(--fg); text-decoration: none; }
.trn2-card__sum { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-muted); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trn2-card__meta { margin: 0; font-size: 12px; color: var(--fg-dim); min-block-size: 1em; }
.trn2-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block-start: 12px; border-block-start: 1px solid var(--border); }
.trn2-card__foot form { margin: 0; }
/* The whole card opens the course (Mohammed, 2026-10-22): the title link is stretched over the card; the foot's buttons stay on top. */
.trn2-card { position: relative; cursor: pointer; }
.trn2-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.trn2-card__foot :is(a, button, form) { position: relative; z-index: 1; }
.trn2-card__when { display: grid; gap: 2px; min-inline-size: 0; }
.trn2-card__next { font-size: 12.5px; color: var(--fg-muted); }
.trn2-none { font-size: 12.5px; color: var(--fg-dim); }
.trn2-badge { display: inline-flex; align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.trn-empty { padding: 40px 16px; text-align: center; color: var(--fg-dim); }

/* Course page */
.trn-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 22px;
  border: 1px solid var(--border); border-radius: var(--radius-lg, 14px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--bg-elev)), var(--bg-elev) 60%); }
@media (max-width: 760px) { .trn-hero { grid-template-columns: 1fr; padding: 16px; } }
.trn-hero h1 { font-size: 24px; line-height: 1.25; margin: 8px 0 6px; }
.trn-hero__sum { color: var(--fg-muted); margin: 0 0 14px; max-inline-size: 70ch; line-height: 1.55; }
.trn-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.trn-fact { display: inline-flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-elev); min-inline-size: 92px; }
.trn-fact small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); font-weight: 700; }
.trn-fact strong { font-size: 14px; }
.trn-video { display: block; position: relative; inline-size: 260px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg); }
@media (max-width: 760px) { .trn-video { inline-size: 100%; } }
.trn-video img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.trn-video__play { position: absolute; inset: 0; margin: auto; inline-size: 52px; block-size: 52px; border-radius: 50%;
  display: grid; place-items: center; background: color-mix(in srgb, #000 60%, transparent); color: #fff; }
.trn-video__play svg { inline-size: 22px; block-size: 22px; }
.trn-video__cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 6px 10px; font-size: 11.5px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); }

.trn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .trn-layout { grid-template-columns: 1fr; } }
.trn-layout > * { min-inline-size: 0; }
.trn-col { display: grid; gap: 20px; }
.trn-col > .card { margin: 0; }
.trn-desc { white-space: pre-line; line-height: 1.6; color: var(--fg-muted); margin: 0; }

.trn-outline { display: grid; gap: 8px; counter-reset: trn; }
.trn-topic { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); }
.trn-topic > summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.trn-topic > summary::-webkit-details-marker { display: none; }
.trn-topic__n { counter-increment: trn; flex: none; inline-size: 28px; block-size: 28px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.trn-topic__n::before { content: counter(trn); }
.trn-topic__t { font-weight: 700; flex: 1; min-inline-size: 0; }
.trn-topic__c { font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.trn-topic__chev { transition: transform .15s; color: var(--fg-dim); }
.trn-topic[open] .trn-topic__chev { transform: rotate(90deg); }
.trn-topic ul { margin: 0; padding: 0 14px 12px calc(14px + 40px); display: grid; gap: 6px; list-style: none; }
.trn-topic li { position: relative; font-size: 13.5px; color: var(--fg-muted); line-height: 1.45; }
.trn-topic li::before { content: ""; position: absolute; inset-inline-start: -14px; inset-block-start: .6em; inline-size: 6px; block-size: 6px;
  border-radius: 50%; background: var(--accent); }

.trn-mats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trn-mat { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.trn-mat a { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-mat.is-locked { color: var(--fg-dim); }
.trn-mat svg { inline-size: 16px; block-size: 16px; flex: none; }

.trn-schedules { display: grid; gap: 12px; }
.trn-schedule { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.trn-schedule.is-mine { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.trn-schedule__date { font-size: 15px; font-weight: 800; }
.trn-schedule__meta { display: grid; gap: 4px; font-size: 12.5px; color: var(--fg-muted); }
.trn-schedule__meta span { display: flex; gap: 6px; align-items: center; }
.trn-schedule__meta svg { inline-size: 14px; block-size: 14px; flex: none; color: var(--fg-dim); }
.trn-seats { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-dim); }
.trn-seats__bar { flex: 1; block-size: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.trn-seats__bar i { display: block; block-size: 100%; background: var(--accent); }
.trn-seats.is-low .trn-seats__bar i { background: var(--warn); }
.trn-schedule__pay { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.trn-schedule__form { display: grid; gap: 10px; }
.trn-schedule__form .btn { inline-size: 100%; justify-content: center; }
.trn-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.trn-note { font-size: 12px; color: var(--fg-dim); margin: 0; }
.trn-gate { padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.trn-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.trn-pill.is-confirmed, .trn-pill.is-completed { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.trn-pill.is-pending, .trn-pill.is-offered { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.trn-pill.is-waitlisted { color: var(--info); background: color-mix(in srgb, var(--info) 13%, transparent); }
.trn-pill.is-cancelled { color: var(--fg-dim); background: color-mix(in srgb, var(--fg-dim) 12%, transparent); }

/* My courses */
.trn-mine { display: grid; gap: 14px; }
.trn-seat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 18px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--bg-elev); }
@media (max-width: 760px) { .trn-seat { grid-template-columns: 1fr; } }
.trn-seat__t { font-size: 16px; font-weight: 800; margin: 6px 0 4px; }
.trn-seat__t a { color: inherit; }
.trn-seat__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--fg-muted); }
.trn-seat__money { display: grid; gap: 4px; min-inline-size: 220px; font-size: 13px; }
.trn-seat__money div { display: flex; justify-content: space-between; gap: 16px; }
.trn-seat__money strong { font-variant-numeric: tabular-nums; }
.trn-seat__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; align-items: center; }
.trn-seat__acts form { margin: 0; display: flex; gap: 8px; align-items: center; }
.trn-seat__acts .input { inline-size: 110px; min-height: 34px; }
.trn-msg { font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); margin-block-start: 10px; }

/* A run's links (WhatsApp group / channel, Telegram, Meet, extra materials) */
.trn-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trn-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); color: var(--fg); background: var(--bg); text-decoration: none; max-inline-size: 100%; }
.trn-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-link:hover { border-color: var(--border-strong); text-decoration: none; }
.trn-link svg { inline-size: 15px; block-size: 15px; flex: none; }
.trn-link--whatsapp svg { color: #25d366; }
.trn-link--telegram svg { color: #229ed9; }
.trn-link--meeting svg { color: var(--info); }
.trn-link--silab svg { color: var(--warn); }


/* Type and vendor chips share one row; a thin divider tells the two groups apart. */
.trn-sep { inline-size: 1px; block-size: 24px; background: var(--border); flex: none; }
@media (max-width: 640px) { .trn-sep { display: none; } }
/* Cards pop on hover; their text never changes colour. */
.trn-card, .trn-card:hover { color: var(--fg); }

/* Labs page hero: centred invitation to install SILAB. */
.lab-hero { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 36px 20px 32px; margin-block-end: 22px;
  border: 1px solid var(--border); border-radius: 18px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--primary) 12%, var(--bg-elev)) 0%, var(--bg-elev) 60%); }
.lab-hero__icon { inline-size: 56px; block-size: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.lab-hero__icon svg { inline-size: 28px; block-size: 28px; }
.lab-hero__title { margin: 6px 0 0; font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.5px; line-height: 1.15;
  background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; padding-inline-end: .2em; }
.lab-hero__lead { margin: 0; max-inline-size: 52ch; color: var(--fg-muted); font-size: 15px; line-height: 1.55; }
.lab-hero__btn { margin-block-start: 8px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 22px; font-weight: 800; letter-spacing: .02em; }
.lab-hero__btn svg { inline-size: 16px; block-size: 16px; transition: transform .15s ease; }
.lab-hero__btn:hover svg { transform: translate(2px, -2px); }

/* Roadmap: child topics under a module (course page). */
.trn-kids { list-style: none; margin: 0; padding: 0 14px 14px calc(14px + 40px); display: grid; gap: 10px; counter-reset: kid; }
.trn-kid { position: relative; padding-inline-start: 26px; counter-increment: kid; }
.trn-kid::before { content: counter(kid); position: absolute; inset-inline-start: 0; inset-block-start: 1px; inline-size: 18px; block-size: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: var(--fg-muted); border: 1px solid var(--border); background: var(--bg); }
.trn-kid__t { font-weight: 700; font-size: 14px; color: var(--fg); }
.trn-kid ul { margin: 4px 0 0 !important; padding: 0 0 0 14px !important; }
.trn-kid li { font-size: 13px !important; }
.trn-topic .trn-kids ~ ul, .trn-topic > ul + .trn-kids { padding-top: 0; }
/* The module's generic bullet rule (.trn-topic li::before) must not win over the child-topic number badge. */
.trn-topic .trn-kids > .trn-kid { font-size: 14px; }
.trn-topic .trn-kids > .trn-kid::before { content: counter(kid); position: absolute; inset-inline-start: 0; inset-block-start: 1px;
  inline-size: 18px; block-size: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800;
  color: var(--fg-muted); border: 1px solid var(--border); background: var(--bg); }
.trn-topic .trn-kids > .trn-kid { padding-inline-start: 28px; }

.trn-pdf { display: flex; align-items: center; gap: 12px; margin: 14px 12px 12px; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface, transparent)), transparent);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.trn-pdf:not(.is-locked):hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.trn-pdf__ico { flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.trn-pdf__ico svg { inline-size: 20px; block-size: 20px; }
.trn-pdf__txt { flex: 1; min-inline-size: 0; display: grid; line-height: 1.25; }
.trn-pdf__txt strong { font-weight: 700; }
.trn-pdf__txt small { color: var(--text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-pdf__act { display: flex; gap: 8px; flex: none; }
.trn-pdf__btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; font-weight: 600; color: inherit;
  text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.trn-pdf__btn:hover { transform: translateY(-1px); border-color: var(--accent); opacity: 1; text-decoration: none; color: inherit; }
.trn-pdf__btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.trn-pdf__btn--solid:hover { color: #fff; }
.trn-pdf.is-locked { opacity: .75; background: none; border-style: dashed; }
.trn-pdf.is-locked .trn-pdf__ico { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
@media (max-width: 480px) { .trn-pdf { flex-wrap: wrap; } .trn-pdf__act { inline-size: 100%; } .trn-pdf__btn { flex: 1; text-align: center; } }

/* Course page: Learning material tiles and the Materials list. Links here are NEVER blue (text stays the page colour);
   hover = lift + border, never colour or underline (permanent rule). */
.trn-lm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.trn-lm__tile { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
  color: var(--fg); text-decoration: none; background: var(--surface, transparent); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.trn-lm__tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15, 23, 42, .10); text-decoration: none; color: var(--fg); }
.trn-lm__tile .trn-lm__ico { grid-row: 1 / span 2; }
.trn-lm__tile strong { font-size: .98rem; line-height: 1.2; align-self: end; }
.trn-lm__tile small { color: var(--fg-dim); font-size: .8rem; align-self: start; margin-top: 2px; }
.trn-lm__ico { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex: none; }
.trn-lm__ico svg { inline-size: 22px; block-size: 22px; }
.trn-lm__tile--read { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.trn-lm__tile--pdf .trn-lm__ico { background: color-mix(in srgb, #7c3aed 14%, transparent); color: #7c3aed; }
.trn-lm__tile--dl .trn-lm__ico { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.trn-lm__locked { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 14px; color: var(--fg-dim); }
.trn-lm__locked .trn-lm__ico { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
.trn-lm__locked strong { display: block; color: var(--fg); } .trn-lm__locked small { color: var(--fg-dim); }
.trn-mats { gap: 8px; }
.trn-mat { padding: 0; border-radius: 14px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.trn-mat:not(.is-locked):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, .08); }
.trn-mat__a, .trn-mat.is-locked { display: flex; align-items: center; gap: 12px; padding: 10px 14px; inline-size: 100%; box-sizing: border-box; }
.trn-mat .trn-mat__a, .trn-mat .trn-mat__a:hover { color: var(--fg); text-decoration: none; }
.trn-mat__ico { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 10px; flex: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.trn-mat__ico svg { inline-size: 18px; block-size: 18px; }
.trn-mat--silab .trn-mat__ico { background: color-mix(in srgb, #7c3aed 13%, transparent); color: #7c3aed; }
.trn-mat--video .trn-mat__ico { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }
.trn-mat--file .trn-mat__ico { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.trn-mat__t { flex: 1; min-inline-size: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-mat__chip { flex: none; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: .74rem; color: var(--fg-dim); }
.trn-mat__go { flex: none; inline-size: 16px; block-size: 16px; color: var(--fg-dim); transition: transform .15s ease; }
.trn-mat:not(.is-locked):hover .trn-mat__go { transform: translateX(3px); }
.trn-mat.is-locked { border-style: dashed; }
.trn-mat.is-locked .trn-mat__ico { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
/* any other link on the course page: page colour, no blue */
.trn-pdf__btn, .trn-pdf__btn:hover, .rd-toc a, .rd-toc a:hover { color: inherit; text-decoration: none; }
.trn-pdf__btn--solid, .trn-pdf__btn--solid:hover { color: #fff; }

.trn-trainer { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f1f5f9; font-size: .9rem; color: #334155; }
.trn-trainer strong { color: #0f172a; } .trn-trainer__draft { font-weight: 700; color: #b45309; }
.trn-lm__tile--trainer .trn-lm__ico { background: color-mix(in srgb, #334155 14%, transparent); color: #334155; }
/* Materials list: a long title shortens with an ellipsis instead of pushing the row past the screen (390 px). */
.trn-mat, .trn-mat__a { min-inline-size: 0; }
.trn-mat .trn-mat__a { white-space: normal; }
.trn-mat__t { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-mat__chip { flex: none; white-space: nowrap; }
@media (max-width: 480px) {
  .trn-mat:not(.is-locked) .trn-mat__chip { display: none; }
  .trn-mat.is-locked { flex-wrap: wrap; }
  .trn-mat.is-locked .trn-mat__chip { white-space: normal; }
}
.trn-pdf__tag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #047857; background: color-mix(in srgb, #059669 14%, transparent); vertical-align: middle; }

/* Self-paced card (public course pages, training course page) */
.spc { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent, #059669) 40%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #059669) 14%, var(--bg-elev)), var(--bg-elev)); transition: transform .15s ease, box-shadow .15s ease; }
.spc:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(0 0 0 / .12); }
.spc__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spc__tag { padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--accent, #059669) 22%, transparent); }
.spc__facts { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; }
.spc__facts small { display: block; font-weight: 500; opacity: .7; }
.spc__note { margin: 0; opacity: .8; }

/* Enrolled card of a trainer-led seat (what to do now, join, trainer, calendar) */
.trn-en { display: grid; gap: 12px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px dashed var(--border); }
.trn-en__when { font-size: 13.5px; font-weight: 700; }
.trn-en__trs { display: flex; flex-wrap: wrap; gap: 12px; }
.trn-en__tr { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.trn-en__tr img, .trn-en__av { inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.trn-en__av { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); font-weight: 800; }
.trn-en__tr small { display: block; color: var(--fg-dim); }
.trn-en__tr a { color: inherit; text-decoration: none; }
.trn-en__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trn-en__list label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.trn-en__list .switch { flex: none; margin-block-start: 1px; }
.trn-en__list label:has(input:checked) .trn-en__txt { color: var(--fg-dim); text-decoration: line-through; }
.trn-en__h { font-size: 13px; font-weight: 800; margin: 0 0 6px; }
.trn-en__prog { font-weight: 600; color: var(--fg-dim); }
.trn-en__save { margin-block-start: 8px; }
.trn-en__join { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trn-enrolled-card { border-inline-start: 4px solid var(--accent); }

/* ── Course catalog v3 (Mohammed, 2026-10-31): vendor logos, featured, latest, by vendor ───────────── */
.cx-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.cx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cx-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card, #fff);
  border: 1px solid var(--line, #e3e6ec); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.cx-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .10); text-decoration: none; color: inherit; }
.cx-tile.is-active { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 25%, transparent); }
.cx-tile__logo { height: 22px; max-width: 64px; object-fit: contain; flex: none; }
.cx-tile__mark { width: 22px; text-align: center; opacity: .6; }
.cx-tile__name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-tile__n { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg, #f1f3f7); color: var(--muted); }
.cx-shelf { margin-block: 28px; }
.cx-shelf__title { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 12px; }
.cx-shelf__logo { height: 26px; max-width: 110px; object-fit: contain; }
.cx-shelf__all { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.cx-shelf__all:hover { color: inherit; text-decoration: none; opacity: .8; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cx-grid--featured { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.cx-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; background: var(--card, #fff);
  border: 1px solid var(--line, #e3e6ec); transition: transform .15s ease, box-shadow .15s ease; }
.cx-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16, 24, 40, .10); }
.cx-card--featured { padding: 22px; border-top: 4px solid var(--accent, #2563eb);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #2563eb) 6%, var(--card, #fff)) 0%, var(--card, #fff) 60%); }
.cx-card--featured .cx-card__title { font-size: 20px; }
.cx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.cx-card__logo { height: 20px; max-width: 96px; object-fit: contain; }
.cx-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg, #f1f3f7); color: var(--muted); }
.cx-chip--level { text-transform: capitalize; }
.cx-card__title { margin: 0; font-size: 17px; line-height: 1.3; }
.cx-card__title a { color: inherit; text-decoration: none; }
.cx-card__title a:hover { color: inherit; text-decoration: none; opacity: .85; }
.cx-card__sum { margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-card__meta { margin: 0; font-size: 13px; color: var(--muted); }
.cx-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line, #e3e6ec); }
@media (prefers-color-scheme: dark) { .cx-card__logo, .cx-tile__logo, .cx-shelf__logo { filter: brightness(1.15); } }
@media (max-width: 600px) { .cx-grid--featured { grid-template-columns: 1fr; } .cx-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ── Overview v3 (Mohammed, 2026-10-31) ─────────────────────────────────────────────────────────── */
.ov-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 18px; }
.ov-resume { flex: 2 1 340px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
  background: var(--card, #fff); border: 1px solid var(--accent, #2563eb); }
.ov-resume__text { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.ov-resume__text strong { font-size: 15px; color: var(--fg, inherit); }
.ov-stat { flex: 1 1 120px; display: grid; place-content: center; text-align: center; padding: 10px 12px; border-radius: 14px;
  background: var(--card, #fff); border: 1px solid var(--line, #e3e6ec); }
.ov-stat b { font-size: 22px; line-height: 1.1; }
.ov-stat span { font-size: 12px; color: var(--muted); }
.ov-stat.is-highlight b { color: #059669; }
.ov-block { margin-bottom: 22px; }
.ov-h { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 10px; }
.ov-h__all { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.ov-h__all:hover { color: inherit; text-decoration: none; opacity: .8; }
.ov-badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ov-badge { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--card, #fff); border: 1px dashed var(--line, #d7dbe3); color: var(--muted); }
.ov-badge.is-earned { border-style: solid; color: var(--fg, inherit); }
.ov-badge__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg, #eef1f6); }
.ov-badge.is-earned .ov-badge__icon { background: #0d9488; color: #fff; }
.ov-badge__icon svg { width: 13px; height: 13px; }
.ov-badge__bar { width: 34px; height: 4px; border-radius: 4px; background: var(--line, #e3e6ec); overflow: hidden; }
.ov-badge__bar i { display: block; height: 100%; background: var(--accent, #2563eb); }
.ov-course { color: inherit; text-decoration: none; }
.ov-course:hover { color: inherit; text-decoration: none; }
.ov-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 22px; }
.ov-act__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ov-certs { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-cert { padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; background: var(--bg, #eef1f6); color: inherit;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.ov-cert:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 24, 40, .10); color: inherit; text-decoration: none; }
/* Overview v3b: centred blocks, four-card row, practise / exam panels */
.ov-center { text-align: center; }
.ov-center .ov-h { justify-content: center; }
.ov-center .ov-badges { justify-content: center; }
.ov-courses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: start; }
@media (max-width: 1100px) { .ov-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ov-courses { grid-template-columns: 1fr; } }
.ov-more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--muted); text-decoration: none; }
.ov-more:hover { color: inherit; text-decoration: none; opacity: .8; }
.ov-panel { position: relative; padding: 24px; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line, #e3e6ec); overflow: hidden; }
.ov-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.ov-panel--practice::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.ov-panel--exam::before { background: linear-gradient(90deg, #0d9488, #34d399); }
.ov-panel__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; }
.ov-panel--practice .ov-panel__icon { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; }
.ov-panel--exam .ov-panel__icon { background: color-mix(in srgb, #0d9488 12%, transparent); color: #0d9488; }
.ov-panel__icon svg { width: 24px; height: 24px; }
.ov-panel__title { margin: 0 0 6px; font-size: 20px; }
.ov-panel__text { margin: 0 0 16px; color: var(--muted); }
.ov-panel__choices { display: grid; gap: 10px; }
.ov-choice { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px;
  background: var(--bg, #f1f4f9); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.ov-choice:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 24, 40, .10); color: inherit; text-decoration: none; }
.ov-choice span { font-size: 18px; opacity: .6; }
.ov-egroup { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--line, #e3e6ec); }
.ov-egroup:first-of-type { border-top: 0; }
.ov-egroup__logo { height: 22px; width: 80px; object-fit: contain; object-position: left center; flex: none; }
.ov-egroup__name { width: 80px; font-weight: 700; flex: none; }