/* Clarity CDM Academy - the shared Clarity chrome on top, the course styles below.
   No inline CSS anywhere (the CSP forbids it). Colours follow 0000-Software/CLARITY BANNER AND HELP.md:
   the vivid #49A91D never carries white text; green TEXT on white is #2f7d14 or darker; nothing is faded
   with opacity to mean "later" or "done" (disabled controls are the one exception). No dark mode, as PD. */
:root {
  /* the Clarity bar tokens - the same on every product */
  --cbar-bg: #17231C; --cbar-ink: #FFFFFF; --cbar-ink-soft: rgba(255, 255, 255, 0.74);
  --cbar-accent: #49A91D; --cbar-deep: #096126; --crow-bg: #FFFFFF; --crow-rule: #D7DED9;
  /* the page */
  --bg: #f2f4f2;
  --surface: #ffffff;
  --ink: #1c2430;
  --muted: #5d6f7e;
  --muted-fill: #4a5a66;      /* muted text on a pale fill (tags, chips) */
  --line: #D7DED9;
  --accent: #2f7d14;          /* green as text on white: 5.0:1 */
  --green-ink: #1f6b3f;       /* green text on a pale green fill */
  --accent-soft: #EEF2EF;
  --deep: #096126;            /* white text goes on this, never on the vivid green */
  --deep-hover: #0b7a30;
  --good: #1f6b3f;
  --good-soft: #e8f6ee;
  --bad: #b03024;
  --bad-soft: #fbe9e7;
  --warn: #8a4f0e;
  --warn-soft: #fcf1e2;
  --warn-line: #f0d3a6;
  --code-bg: #eef1ef;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(23, 35, 28, .06), 0 4px 16px rgba(23, 35, 28, .05);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); overflow-x: hidden; }
a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 1.2em 0 .5em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-top: .4em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
@media print { .no-print { display: none !important; } }

/* ==== THE CLARITY BAR ======================================================
   Copied from Clarity PD / Clarity Planner (CLARITY BANNER AND HELP.md section 2): one dark bar on
   every product; Green 2 marks the current tab. The Academy's bar HAS tabs, so it folds at the shared
   widths: the name hides under 1100px, the tabs and Raise a ticket fold into Menu under 1000px, the
   product's name hides under 520px (the icon stays). */
.cbar { display: flex; align-items: center; gap: 1.4rem; height: 56px; padding: 0 1.1rem; background: var(--cbar-bg); color: var(--cbar-ink);
  font-family: inherit; position: relative; z-index: 20; }
.cbar-prod { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; color: var(--cbar-ink); text-decoration: none; }
.cbar-prod img { width: 30px; height: 30px; display: block; border-radius: 7px; }
.cbar-prod span { font-size: 17px; font-weight: 400; letter-spacing: 0.01em; white-space: nowrap; }
.cbar-prod b { font-weight: 700; }
.cbar-name { display: inline-flex; flex-direction: column; line-height: 1.1; }
.cbar-name .cbar-by { font-size: 11px; color: var(--cbar-ink-soft); letter-spacing: 0.02em; }
.cbar-tabs { display: flex; gap: 0.15rem; align-self: stretch; }
.cbar-tabs a, .cbar-menu nav a { display: inline-flex; align-items: center; padding: 0 0.75rem; color: var(--cbar-ink-soft); font-size: 14.5px; font-weight: 600;
  text-decoration: none; border-top: 3px solid transparent; border-bottom: 3px solid transparent; white-space: nowrap; }
.cbar-tabs a:hover, .cbar-tabs a:focus-visible { color: var(--cbar-ink); }
.cbar-tabs a[aria-current="page"] { color: var(--cbar-ink); border-bottom-color: var(--cbar-accent); }
.cbar-menu { display: none; position: relative; }
.cbar-menu > summary { list-style: none; cursor: pointer; color: var(--cbar-ink); font-weight: 600; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; padding: 0.3rem 0.7rem; }
.cbar-menu > summary::-webkit-details-marker { display: none; }
.cbar-menu nav { position: absolute; left: 0; top: calc(100% + 0.5rem); min-width: 12rem; background: #fff; border: 1px solid var(--crow-rule); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(22, 32, 43, 0.16); display: flex; flex-direction: column; padding: 0.3rem 0; }
.cbar-menu nav a { color: #1f2a30; padding: 0.5rem 0.9rem; border: 0; border-left: 3px solid transparent; }
.cbar-menu nav a[aria-current="page"] { border-left-color: var(--cbar-accent); color: var(--cbar-deep); }
.cbar-side { margin-left: auto; display: flex; align-items: center; gap: 1rem; white-space: nowrap; min-width: 0; }
.cbar-side form { margin: 0; display: inline; }
.cbar-help, .cbar-ticket { color: var(--cbar-ink); font-weight: 600; text-decoration: none; }
.cbar-help:hover, .cbar-help:focus-visible, .cbar-ticket:hover, .cbar-ticket:focus-visible { text-decoration: underline; }
.cbar-who { color: var(--cbar-ink-soft); font-size: 14px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cbar-out { font: inherit; font-weight: 600; font-size: 14px; color: var(--cbar-ink); background: transparent; border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; }
.cbar-out:hover, .cbar-out:focus-visible { background: rgba(255, 255, 255, 0.12); }
.cbar a:focus-visible, .cbar button:focus-visible, .cbar summary:focus-visible { outline: 2px solid var(--cbar-accent); outline-offset: 2px; }
/* where it folds - the shared widths for a bar with tabs (measured on the Planner, 360 to 1366px) */
@media (max-width: 1099px) { .cbar-who { display: none; } }
@media (max-width: 999px) {
  .cbar { height: 52px; gap: 0.8rem; padding: 0 0.75rem; }
  .cbar-tabs, .cbar-ticket { display: none; }
  .cbar-menu { display: block; }
  .cbar-prod span { font-size: 15px; }
  .cbar-side { gap: 0.7rem; }
}
@media (max-width: 519px) { .cbar-name { display: none; } }
@media (max-width: 399px) {
  .cbar { gap: 0.5rem; padding: 0 0.5rem; }
  .cbar-side { gap: 0.55rem; }
  .cbar-out, .cbar-menu > summary { padding: 0.25rem 0.5rem; }
}
@media print { .cbar { display: none; } }

/* The update strip: the same words and green on every product. Above the bar; update.js fills it.
   White text on --cbar-deep (7.6:1), never on the vivid green (3.0:1). */
.netbar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; min-height: 38px; padding: 0.4rem 1rem; font-size: 0.9rem; }
.netbar[hidden] { display: none; }
.netbar-new { background: var(--cbar-deep); color: #fff; font-weight: 600; }
.netbar-off { background: #F2C14E; color: #3F3110; font-weight: 600; }
.netbar-reload { font: inherit; font-weight: 600; background: #fff; color: var(--cbar-deep); border: 0; border-radius: 6px; padding: 0.2rem 0.8rem; cursor: pointer; }

/* The warn bars under the bar: read-only, the account's grace period, the course's own end date. */
.warnbar { background: var(--warn-soft); border: 1px solid var(--warn-line); border-left: 4px solid #d98324; border-radius: 6px; padding: 10px 14px; margin: 12px 0; }
.warnbar a { color: var(--warn); font-weight: 600; }
.account-state { margin: 0; border-radius: 0; border-left: 0; border-right: 0; text-align: center; }
.install-pin-tip { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0.75rem 1.5rem 0; }
.install-pin-tip p { margin: 0; }
.install-pin-tip[hidden], .install-banner[hidden], [data-install-variant][hidden] { display: none; }
.pin-edge { display: none; }
.app-edge .pin-edge { display: block; }
.app-edge .pin-chrome { display: none; }
.link-button { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }
.link-button:hover { color: var(--deep); }
.linkbtn { display: inline-block; font-size: .8rem; font-weight: 600; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--deep); text-decoration: none; white-space: nowrap; }
.linkbtn:hover, .linkbtn:focus-visible { background: var(--accent-soft); border-color: var(--deep); }

/* Install as an app - the BANNER (PC Site Manager v4.102.0, copied by every product). Full width
   above the page title, the deep Clarity greens (white text needs them), the app's own icon, one big
   white button and the three steps. Nothing else in the app looks like this, which is the point. */
.install-banner { position: relative; margin: 0 0 22px; padding: 20px 24px; border-radius: 14px; color: #fff;
  background: #13702a; background: linear-gradient(100deg, #096126 0%, #13702a 55%, #1d862c 100%); box-shadow: 0 6px 18px rgba(9, 97, 38, 0.28); }
.install-banner-row { display: flex; gap: 22px; align-items: center; padding-right: 26px; }
.install-banner-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; padding: 5px;
  border-radius: 19px; background: #fff; color: #096126; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }
.install-banner-icon img { display: block; width: 74px; height: 74px; border-radius: 16px; }
.install-banner-icon-done { border-radius: 50%; font-size: 2.2rem; font-weight: 800; }
.install-banner-body { flex: 1; min-width: 0; }
.install-banner .install-banner-kicker { margin: 0 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.install-banner .install-banner-title { margin: 0 0 4px; padding: 0; border: 0; background: none; color: #fff; font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.install-banner .install-banner-why { margin: 0; font-size: 1rem; }
.install-banner a { color: #fff; }
.install-banner-actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.install-banner .install-banner-cta { display: inline-flex; gap: 10px; align-items: center; justify-content: center; padding: 14px 26px; border: none;
  border-radius: 10px; background: #fff; color: #096126; font: inherit; font-size: 1.12rem; font-weight: 800; text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18); }
.install-banner .install-banner-cta:hover { background: #F0F8F2; }
.install-banner .install-banner-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.install-banner-cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.install-banner-links { display: flex; justify-content: center; gap: 18px; font-size: 0.92rem; }
.install-banner .install-banner-links a, .install-banner .install-banner-links .link-button { padding: 0; border: none; background: none; color: #fff; font: inherit; text-decoration: underline; }
.install-banner-steps { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.35); list-style: none; font-size: 0.95rem; }
.install-banner-steps li { display: flex; gap: 9px; align-items: center; }
.install-banner-steps b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #096126; font-size: 0.85rem; }
.install-banner .install-banner-close { position: absolute; top: 8px; right: 10px; padding: 2px 8px; border: none; background: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
@media (max-width: 860px) {
  .install-banner-row { flex-wrap: wrap; padding-right: 0; }
  .install-banner-actions { width: 100%; }
}

/* ==== THE CLARITY HELP ======================================================
   The shared manual layout (CLARITY BANNER AND HELP.md section 5): an index of topic cards, then a
   topic page with the contents down the side (200px) and the article (up to 760px). Greys are #5d6f7e. */
.page.helpmain { max-width: 1040px; }
.helpidx { margin: 0 auto; padding: 22px 26px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(23, 35, 28, 0.08); }
.helpmast { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.helpmast img { flex: none; display: block; border-radius: 12px; }
.helpmast h1 { margin: 2px 0 0; font-size: 26px; }
.helpmast .eyebrow { font-family: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #5d6f7e; margin: 0; }
.helpmast .helpticket { margin-left: auto; }
.helpgroup { margin-top: 26px; }
.helpgroup > h2 { margin: 0; font-family: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #5d6f7e; font-weight: 600; }
.helpgrid { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 699px) { .helpgrid { grid-template-columns: minmax(0, 1fr); } }
.helpcard { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--crow-rule); border-radius: 8px; padding: 12px 16px; }
.helpcard:hover, .helpcard:focus-visible { border-color: var(--cbar-accent); background: #FBFDFB; }
.helpcard strong { display: block; color: var(--cbar-deep); font-weight: 700; font-size: 15px; }
.helpcard span { display: block; color: #5d6f7e; font-size: 13.5px; margin-top: 2px; }
.helpmore { margin-top: 22px; font-size: 13.5px; color: #5d6f7e; }
.helpback { margin: 18px 0 0; font-weight: 600; }
.helpback a, .helpmore a { color: var(--cbar-deep); }
.helpwrap { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 28px; margin: 0 auto; align-items: start; }
.helpcontents { position: sticky; top: 14px; font-size: 14px; }
.helpcontents > summary { display: none; }
.helpcontents-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #5d6f7e; margin: 0 0 6px 10px; font-weight: 600; }
.helpcontents nav a { display: block; padding: 5px 10px; border-radius: 6px; color: #1c2430; text-decoration: none; }
.helpcontents nav a:hover { background: #F2F5F3; }
.helpcontents nav a[aria-current="page"] { background: #EEF2EF; color: var(--cbar-deep); font-weight: 700; }
.helparticle { background: #fff; border-radius: 10px; padding: 20px 26px; box-shadow: 0 1px 3px rgba(23, 35, 28, 0.08); min-width: 0; }
.helparticle h1 { font-size: 1.6rem; margin: 0 0 .4em; }
.helparticle h2 { font-size: 1.1rem; margin: 1.4em 0 .4em; color: var(--cbar-deep); }
.helparticle ol, .helparticle ul { padding-left: 1.4em; }
.helparticle li { margin: 4px 0; }
.helparticle code { font-family: var(--mono); font-size: .9em; background: var(--code-bg); padding: 1px 5px; border-radius: 5px; }
@media (max-width: 899px) {
  .helpwrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .helpcontents { position: static; background: #fff; border-radius: 10px; padding: 8px 14px; }
  .helpcontents > summary { display: list-item; cursor: pointer; font-weight: 700; color: var(--cbar-deep); }
  .helpcontents-title { display: none; }
}
.crumb { margin: 0 0 8px; font-size: 12.5px; color: #5d6f7e; }
.crumb a { color: inherit; }
.inshort { background: #EEF2EF; border-left: 4px solid var(--cbar-accent); border-radius: 0 6px 6px 0; padding: 10px 14px; margin: 12px 0 6px; font-size: 14.5px; max-width: 760px; }
.inshort strong { color: var(--cbar-deep); margin-right: 6px; }
.helpbody { margin-top: 14px; }
.related { margin-top: 26px; padding-top: 12px; border-top: 1px solid #e2e7ed; font-size: 14px; color: #5d6f7e; }
.related + .related { margin-top: 10px; padding-top: 0; border-top: 0; }
.related a { color: var(--cbar-deep); font-weight: 600; }
@media print { .helpidx, .helparticle { box-shadow: none; padding: 0; } .helpcontents { display: none; } }

/* ==== THE PAGE AND ITS FOOTER ============================================= */
.page { max-width: 920px; margin: 0 auto; padding: 24px 24px 48px; }
.page.narrow { max-width: 520px; }
.page.wide { max-width: 1320px; }
.app-footer { max-width: 100%; margin: 8px auto 18px; padding: 14px 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem;
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ==== THE COURSE ============================================================ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 16px 0; box-shadow: var(--shadow); }
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }
.lede { font-size: 1.08rem; color: var(--muted); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .85rem; font-weight: 400; }
.crumbs { color: var(--muted); font-size: .9rem; margin: 0; }
.crumbs a { color: var(--muted); }
.notice { background: var(--accent-soft); border-left: 4px solid var(--cbar-accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 16px; }
.error { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 10px 14px; }
.inline { display: inline; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--deep); color: var(--deep); }
.btn.primary { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn.primary:hover { background: var(--deep-hover); border-color: var(--deep-hover); color: #fff; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: #9c2c20; border-color: #9c2c20; color: #fff; }
.btn.small { padding: 4px 12px; font-size: .85rem; }
.btn:disabled { opacity: .55; cursor: default; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.linkish:hover { color: var(--deep); text-decoration: underline; }

.stack { display: grid; gap: 14px; }
.stack label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; }
.grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
input[type=text], input[type=email], input[type=url], input[type=date], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 400; }
/* The learner door and the account page (BUILD-CONTRACTS.md 4.1): one narrow card, the actions in a row. */
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.auth .standing { margin: 18px 0 4px; padding: 10px 14px; background: var(--accent-soft); border-radius: 8px; font-size: .95rem; }
.account-section h2 { margin-top: 0; }
.danger-zone { border-color: var(--bad-soft); }
.learner-actions form.inline { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 8px 0; }
.learner-actions form.inline label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; min-width: 240px; }
.enrol-form { align-items: end; }
@media (max-width: 719px) { .enrol-form { grid-template-columns: 1fr; } .enrol-form .span-3 { grid-column: auto; } }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, .btn:focus-visible, a:focus-visible, .linkish:focus-visible { outline: 2px solid var(--cbar-accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--code-bg); color: var(--muted-fill); vertical-align: middle; }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.accent { background: var(--accent-soft); color: var(--green-ink); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }

/* dashboard */
.hero { padding: 8px 0 12px; }
.helpstart { margin: 6px 0 14px; color: var(--muted); }
.meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 20px 0 8px; }
.meter .seg { height: 8px; border-radius: 4px; background: var(--line); }
.meter .seg.on { background: var(--cbar-accent); }
.courses { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.course-card { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
.course-card h2 { margin: 0; font-size: 1.12rem; }
.course-card h2 a { color: var(--ink); text-decoration: none; }
.course-card h2 a:hover { color: var(--accent); }
.course-card p { margin: 4px 0 0; color: var(--muted); }
.course-body { min-width: 0; }
.course-hours { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: var(--accent-soft); color: var(--green-ink); }
.course-card.is-passed .course-hours { background: var(--deep); color: #fff; }
/* a course whose access ended or that is not bought is drawn differently, never faded */
.course-card.is-locked, .course-card.is-soon { background: #f7f9f7; border-style: dashed; box-shadow: none; }
.course-card.is-locked h2, .course-card.is-soon h2 { color: var(--muted-fill); }
.course-card.is-locked .course-hours, .course-card.is-soon .course-hours { background: var(--code-bg); color: var(--muted-fill); }

/* course page */
.modules { padding-left: 1.4em; }
.modules li { padding: 6px 0; }
.modules li a { font-weight: 600; margin-right: 8px; }
.modules li.done a { color: var(--good); }
.table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.table tr.is-off td { color: var(--muted); text-decoration: line-through; }
.card .table { margin-bottom: 4px; }

/* reader */
.reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.timer { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 16px; }
.timer-label { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.timer-value { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; min-width: 4.5ch; }
.timer.is-running { border-color: var(--cbar-accent); }
.timer-spent { padding-right: 16px; }
.timer-spent .timer-value { min-width: 0; font-size: .98rem; }
.timer.is-low { border-color: var(--bad); }
.timer.is-low .timer-value { color: var(--bad); }
.prose { overflow-wrap: break-word; }
.prose h2 { margin-top: 1.8em; padding-top: .4em; border-top: 1px solid var(--line); }
.prose > h2:first-child { border-top: 0; margin-top: .4em; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--code-bg); padding: 1px 5px; border-radius: 5px; }
.prose pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; line-height: 1.5; }
.prose pre code { background: none; padding: 0; font-size: .88rem; }
.prose blockquote { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--cbar-accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.prose blockquote p { margin: .4em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--code-bg); }
.prose img { max-width: 100%; }
.module-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }

/* lesson checks */
.lesson-check .question.is-right { border-color: var(--good); }
.lesson-check .question.is-wrong { border-color: var(--bad); }
.explain { background: var(--accent-soft); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; font-size: .95rem; }

/* exam */
.exam-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 5; }
.exam-bar h1 { margin: 0; font-size: 1.4rem; }
.exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.brief { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px 16px; position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
.question { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 20px 18px; margin: 0 0 16px; min-width: 0; }
.question legend { font-weight: 700; padding: 0 6px; }
.q-prompt p:first-child { margin-top: 0; }
.option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.option:hover { background: var(--code-bg); }
.option input { margin-top: 5px; }
.numeric { display: grid; gap: 4px; font-weight: 600; max-width: 280px; }
.counter { text-align: right; margin: 4px 0 0; }
.submit-row { display: grid; gap: 8px; justify-items: start; }

/* results */
.result.pass { border-color: var(--good); background: var(--good-soft); }
.result.fail { border-color: var(--bad); }
.big-score { font-size: 2.4rem; font-weight: 800; margin: 0; }
.big-score span { font-size: 1.2rem; color: var(--muted); font-weight: 600; }
.qresult h3 { margin-top: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.answer-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.answer { background: var(--code-bg); border-radius: 8px; padding: 10px 14px; margin-top: 0; }
.feedback { border-left: 4px solid var(--cbar-accent); padding-left: 12px; }
.mark-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.mark-row label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.mark-row label.grow { flex: 1; min-width: 220px; }
.mark-row input[type=number] { width: 110px; }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; }

/* verify, signed out, sign-in problems, course complete */
.status-line { font-size: 1.05rem; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 16px 0; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; min-width: 0; }
.fingerprint { word-break: break-all; font-size: .85em; }
code { font-family: var(--mono); font-size: .92em; }

@media (max-width: 860px) {
  .exam-layout { grid-template-columns: 1fr; }
  .brief { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .page { padding: 16px 16px 40px; }
  .card { padding: 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .table { display: block; overflow-x: auto; }
  .install-pin-tip { margin: 0.75rem 1rem 0; flex-wrap: wrap; }
  .helpidx, .helparticle { padding: 16px; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 8px; }
}

/* ==== THE LESSON PLAYER (BUILD-CONTRACTS.md section 10.3) ==================
   A reader, not a wall of words: the outline down the left from 1000px (folded into Contents below
   that), one step at a time in a card up to 820px wide at 18px/1.65, the whole lesson area up to 1180px,
   a Back / "3 of 8" / Next bar that stays in reach, and the interactions a 16-year-old would call clean:
   Try-it cards, quick checks, think-first folds and flip cards. Nothing is faded. */
.page.lesson-page { max-width: 1180px; }
.lesson-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 14px; }
.lesson-outline-fold { position: sticky; top: 14px; font-size: 14px; min-width: 0; }
.lesson-outline-fold > summary { display: none; }
.outline-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5d6f7e; margin: 0 0 6px 13px; font-weight: 600; }
.lesson-outline a { display: block; padding: 6px 10px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.lesson-outline a:hover, .lesson-outline a:focus-visible { background: #F2F5F3; }
.lesson-outline a[aria-current="step"] { background: var(--accent-soft); color: var(--cbar-deep); font-weight: 700; border-left-color: var(--cbar-accent); }
.lesson-outline a.outline-check { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); border-radius: 0; }
.player { min-width: 0; }
.step { max-width: 820px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 32px 30px; box-shadow: var(--shadow); outline: none; }
.step[hidden] { display: none; }
.step + .step { margin-top: 16px; }
.step:focus-visible { outline: 2px solid var(--cbar-accent); outline-offset: 2px; }
.step-kicker { margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5d6f7e; font-weight: 600; }
.step .prose { font-size: 18px; line-height: 1.65; }
.step .prose > :first-child { margin-top: 0; }
.step .prose h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.55rem; }
.step .prose h2 + h2, .step .prose :not(:first-child) + h2 { margin-top: 1.4em; }
.step .prose h3 { margin-top: 1.5em; font-size: 1.18rem; }
.step .prose p, .step .prose li { margin-top: .6em; margin-bottom: .6em; }
.step .prose li { margin-top: .3em; margin-bottom: .3em; }
.step .prose pre { font-size: .95rem; }
.step .prose table { font-size: 1rem; }
.step-check .card { margin: 0; padding: 0; border: 0; box-shadow: none; }
.player-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 820px; margin-top: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; bottom: 12px; z-index: 4; }
.step-pos { font-weight: 700; color: var(--muted); min-width: 5ch; text-align: center; }
.player-bar .read-all { margin-left: auto; }
.player-bar .btn[hidden] { display: none; }   /* the introduction swaps Next for "Go to Level 1" on its last step */
.player.is-all .step-prev, .player.is-all .step-next, .player.is-all .step-pos { display: none; }
.player.is-all .player-bar { position: static; }
.player-bar .notes-open { margin-left: auto; }
.player-bar .notes-open + .read-all { margin-left: 0; }
.player-bar .notes-open[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--deep); color: var(--deep); }

/* The notebook (BUILD-CONTRACTS.md section 11): a third column beside the content from 1000px, a sheet that
   rises from the foot of the screen below that. Newest note first, each stamped with its step. */
.lesson-wrap.has-notebook { grid-template-columns: 220px minmax(0, 1fr) 300px; }
.notebook { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow: auto; min-width: 0; padding: 16px 18px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .95rem; line-height: 1.5; }
.notebook[hidden] { display: none; }
.notebook-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.notebook-head h2 { margin: 0; font-size: 1.15rem; }
.note-new-label { display: block; font-weight: 600; font-size: .9rem; }
.notebook .note-new { margin-top: 6px; min-height: 72px; font-size: .95rem; }
.note-add-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.note-status { font-size: .85rem; color: var(--muted); }
.note-status.is-error { color: var(--bad); font-weight: 600; }
.note-list { list-style: none; margin: 14px 0 0; padding: 0; }
.note-item { padding: 10px 0; border-top: 1px solid var(--line); }
.note-item .note-step { display: inline-block; font-weight: 700; color: var(--cbar-deep); font-size: .85rem; text-decoration: none; }
.note-item a.note-step:hover, .note-item a.note-step:focus-visible { text-decoration: underline; }
.note-item .note-prompt { margin: 4px 0 0; font-size: .85rem; font-weight: 400; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.note-item .note-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: .8rem; color: var(--muted); }
.note-meta .note-delete { font-size: .8rem; color: var(--muted); }
.note-meta .note-delete:hover, .note-meta .note-delete:focus-visible { color: var(--bad); }
.note-empty, .note-all { margin: 14px 0 0; font-size: .9rem; }

/* Note cards (the :::note tag): the prompt as a heading line, the box under it, a quiet "Saved". */
.note-card { margin: 26px 0; padding: 18px 22px 20px; background: #FBF8EE; border: 1px solid #E8DDB5; border-left: 5px solid #C9A227; border-radius: 0 12px 12px 0; font-size: 1rem; line-height: 1.55; }
.note-card::before { content: "Your note"; display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7A6410; font-weight: 700; }
.note-card .note-prompt { margin: 0; font-size: 1.08rem; }
.note-card .note-body { margin: 8px 0 0; }
.note-card .note-body > :first-child { margin-top: 0; }
.note-card .note-body > :last-child { margin-bottom: 0; }
.note-card .note-text { display: block; width: 100%; margin-top: 12px; min-height: 84px; font-size: 1rem; }
.note-saved { margin-left: 2px; font-size: .85rem; color: var(--muted); }
.note-saved.is-error { color: var(--bad); font-weight: 600; }

/* ==== THE NOTES PAGE (section 11) ==========================================
   Every note, grouped by course and lesson, newest first; a search box; each note a link back to its step. */
.note-search { margin: 8px 0 16px; }
.note-search-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.note-search-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.note-search-row input[type=search] { flex: 1 1 240px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.note-search-result { margin: -6px 0 12px; }
.notes-group-title { font-size: 1.1rem; margin: 0 0 4px; }
.notes-group-title a { color: inherit; text-decoration: none; }
.notes-group-title a:hover, .notes-group-title a:focus-visible { color: var(--deep); text-decoration: underline; }
.notes-level { display: inline-block; margin-right: 8px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.notes-page .note-list { margin-top: 6px; }
.note-link { display: block; margin: 0 -8px; padding: 2px 8px; color: inherit; text-decoration: none; border-radius: 8px; }
a.note-link:hover, a.note-link:focus-visible { background: var(--accent-soft); }
a.note-link:hover .note-step { text-decoration: underline; }
.note-link .note-step, .note-link .note-prompt, .note-link .note-body { display: block; }

/* Try-it cards: the instruction, the prompt to copy and your notes. */
.try-card { margin: 26px 0; padding: 18px 22px 20px; background: #F6FAF6; border: 1px solid #CFE3D2; border-left: 5px solid var(--cbar-accent); border-radius: 0 12px 12px 0; font-size: 1rem; line-height: 1.55; }
.try-card > :first-child { margin-top: 0; }
.try-card > p { margin: .5em 0; }
.try-text > :first-child { margin-top: 0; }
.try-text > :last-child { margin-bottom: 0; }
.try-text p, .try-text li { margin: .5em 0; }
.try-card .try-prompt { margin: 10px 0; padding: 12px 14px; background: #fff; border: 1px dashed #B9CFBE; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .9rem; line-height: 1.5; }
.try-card label { display: block; margin-top: 12px; font-weight: 600; font-size: .95rem; }
.try-card textarea { display: block; width: 100%; margin-top: 6px; min-height: 84px; font-size: 1rem; }
.try-done, .quiz-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.try-done:hover, .quiz-check:hover, .try-done:focus-visible, .quiz-check:focus-visible { border-color: var(--deep); color: var(--deep); }
.try-done:focus-visible, .quiz-check:focus-visible, .flip-card:focus-visible { outline: 2px solid var(--cbar-accent); outline-offset: 2px; }
.try-done:disabled, .quiz-check:disabled { background: var(--code-bg); border-color: var(--line); color: var(--muted-fill); cursor: default; }
.try-card.is-done { border-left-color: var(--good); }
.try-card.is-done .try-done { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.try-card.is-done .try-done::before { content: "\2713"; font-weight: 800; }
.try-status { margin-left: 10px; font-size: .85rem; color: var(--muted); }
.try-status.is-error { color: var(--bad); font-weight: 600; }

/* Quick checks: marked in the browser, never graded. */
.quick-check { margin: 26px 0; padding: 18px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 1rem; line-height: 1.55; }
.quick-check::before { content: "Quick check"; display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cbar-deep); font-weight: 700; }
.quick-check > p { margin: .4em 0; font-weight: 600; }
.quick-check .quiz-question { font-size: 1.05rem; }
.quick-check .quiz-options { margin: 8px 0 4px; }
.quick-check label { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; font-weight: 400; cursor: pointer; }
.quick-check label:hover { background: var(--code-bg); }
.quick-check label input { margin-top: 5px; flex: none; }
.quick-check.is-right label.is-answer, .quick-check.is-wrong label.is-answer { background: var(--good-soft); border-color: var(--good); }
.quick-check.is-wrong label.is-chosen:not(.is-answer) { background: var(--bad-soft); border-color: var(--bad); }
.quick-check .quiz-result { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--code-bg); font-weight: 400; }
.quick-check .quiz-result:empty { display: none; }
.quick-check.is-right .quiz-result { background: var(--good-soft); color: var(--good); }
.quick-check.is-wrong .quiz-result { background: var(--bad-soft); color: var(--bad); }
.quick-check.is-right::before { content: "Quick check \2013 right"; color: var(--good); }
.quick-check.is-wrong::before { content: "Quick check \2013 not quite"; color: var(--bad); }

/* Think-first folds. */
.reveal { margin: 22px 0; padding: 0 18px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 1rem; }
.reveal > summary { padding: 14px 0; font-weight: 700; color: var(--cbar-deep); }
.reveal > summary::before { content: "Think first \2014 "; color: var(--muted); font-weight: 600; }
.reveal.reveal-detail > summary::before { content: none; }   /* "Want the detail?" (10.7) carries its own lead */
.reveal[open] > summary { margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.reveal > :last-child { margin-bottom: 10px; }

/* Flip cards: the term on the front, the meaning on the back; tap (or press) to turn. */
.flip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 22px 0; perspective: 900px; }
.flip-card { position: relative; display: grid; min-height: 132px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.flip-card .flip-front, .flip-card .flip-back { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 16px 16px 26px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .5s; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.flip-card .flip-front { font-weight: 700; font-size: 1.12rem; color: var(--cbar-deep); transform: rotateY(0deg); }
.flip-card .flip-back { background: var(--accent-soft); border-color: #CFE3D2; transform: rotateY(180deg); }
.flip-card.is-flipped .flip-front { transform: rotateY(-180deg); }
.flip-card.is-flipped .flip-back { transform: rotateY(0deg); }
.flip-card:hover .flip-front, .flip-card:hover .flip-back { border-color: var(--cbar-accent); }
.flip-card::after { content: "Tap to flip"; position: absolute; right: 12px; bottom: 7px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.flip-card.is-flipped::after { content: "Tap to flip back"; }
@media (prefers-reduced-motion: reduce) { .flip-card .flip-front, .flip-card .flip-back { transition: none; } }


@media (max-width: 999px) {
  .lesson-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 10px; }
  .lesson-outline-fold { position: static; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  .lesson-outline-fold > summary { display: list-item; cursor: pointer; font-weight: 700; color: var(--cbar-deep); }
  .outline-title { display: none; }
  .lesson-outline { padding: 6px 0 4px; }
  /* the notebook is a full-width sheet over the foot of the screen; Close (or Notes again) puts it away */
  .lesson-wrap.has-notebook { grid-template-columns: minmax(0, 1fr); }
  .notebook { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 6; max-height: 72vh; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(23, 35, 28, .18); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  .reader-bar h1 { margin-bottom: .2em; }
  .step { padding: 16px 16px 20px; }
  .step .prose { font-size: 17px; }
  .player-bar { position: static; padding: 10px 12px; gap: 8px; }
  .player-bar .step-pos { order: -1; width: 100%; text-align: left; }
  .player-bar .step-prev, .player-bar .step-next { flex: 1 1 40%; justify-content: center; }
  .player-bar .notes-open { width: 100%; justify-content: center; margin-left: 0; }
  .player-bar .read-all { width: 100%; justify-content: center; margin-left: 0; }
  .try-card, .quick-check, .note-card { padding: 14px 14px 16px; }
  .try-card, .note-card { border-left-width: 4px; }
  .notebook { padding: 12px 14px 14px; max-height: 80vh; }
  .note-link { margin: 0; padding: 2px 0; }
  .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media print {
  .step { display: block !important; box-shadow: none; max-width: none; }
  .player-bar, .lesson-outline-fold, .step-kicker, .timer, .notebook, .note-search, .note-meta .note-delete { display: none; }
  .exam-key-question, .exam-settings { break-inside: avoid; box-shadow: none; }
  .exam-key-brief, .exam-key-marking { box-shadow: none; }
}

/* the tutor's exams and answers (3.2.0): the right option is marked by a class AND the word "Answer" */
.key-options { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.key-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); }
.key-option.correct { border: 2px solid var(--good); background: var(--good-soft); font-weight: 600; }
.key-letter { font-weight: 700; min-width: 1.4em; }
.key-text { flex: 1; min-width: 0; }

/* ==== THE PRE-CHECKOUT FORM (BUILD-CONTRACTS.md 9.1) =====================================
   Price first, then the form; a tick row keeps its box and its words on one line; the company fields sit in a
   quiet panel that static/buy.js hides until the business box is ticked (visible without scripts). */
.buy .price { font-size: 1.35rem; font-weight: 700; margin: 4px 0 2px; color: var(--ink); }
.buy-form .tick { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 500; }
.buy-form .tick input { margin-top: 5px; width: 18px; height: 18px; }
.buy-form .company-fields { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--accent-soft); }
.buy-form .company-fields[hidden] { display: none; }
.course-card .btn.buy-btn { margin-left: 4px; }

/* ==== THE QUESTION TYPES (BUILD-CONTRACTS.md 6.1) ===========================================
   Hotspot: the image with an SVG overlay for the marks (numbered circles); drag-drop: targets positioned by
   interact.js from data-x/y/w/h; sequence: a list with arrow buttons; all geometry in percent of the image. */
.hotspot { position: relative; display: block; max-width: 720px; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--code-bg); outline-offset: 2px; }
.hotspot:focus { outline: 3px solid var(--cbar-accent); }
.hotspot .hotspot-img { display: block; width: 100%; height: auto; }
.hotspot .hotspot-overlay { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.hotspot.is-review .hotspot-overlay { cursor: default; }
.hotspot .hs-mark circle { fill: var(--deep); stroke: #fff; stroke-width: .5; cursor: pointer; }
.hotspot .hs-mark text { fill: #fff; font-size: 3px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.hotspot .hs-cursor { fill: none; stroke: var(--cbar-accent); stroke-width: .6; stroke-dasharray: 1 1; }
.hotspot .region-answer { fill: rgba(73, 169, 29, .18); stroke: var(--good); stroke-width: .6; }
.dragdrop { margin: 8px 0; }
.dragdrop .dd-stage { position: relative; display: block; max-width: 720px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--code-bg); }
.dragdrop .dd-img { display: block; width: 100%; height: auto; }
.dragdrop .dd-target { position: absolute; display: flex; align-items: center; justify-content: center; padding: 2px; border: 2px dashed var(--muted); border-radius: 6px; background: rgba(255, 255, 255, .55); font: inherit; font-size: .85rem; cursor: pointer; overflow: hidden; }
.dragdrop .dd-target.is-over, .dragdrop.has-selection .dd-target:hover { border-color: var(--cbar-accent); background: var(--accent-soft); }
.dragdrop .dd-target.is-filled { border-style: solid; border-color: var(--deep); }
.dragdrop .dd-target .dd-target-label { position: absolute; left: 4px; top: 2px; font-size: .72rem; color: var(--muted); pointer-events: none; }
.dragdrop .dd-target.is-filled .dd-target-label { display: none; }
.dragdrop .dd-tray { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; min-height: 44px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }
.dd-item { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--deep); border-radius: 8px; background: var(--surface); color: var(--deep); font: inherit; font-weight: 600; cursor: grab; max-width: 100%; }
.dd-item[aria-pressed="true"] { background: var(--deep); color: #fff; }
.dd-target .dd-item { width: 100%; height: 100%; justify-content: center; border-radius: 4px; padding: 2px 4px; font-size: .8rem; cursor: pointer; }
.sequence .seq-list { list-style: none; padding: 0; margin: 8px 0; counter-reset: seq; display: grid; gap: 6px; }
.sequence .seq-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); counter-increment: seq; cursor: grab; }
.sequence .seq-item::before { content: counter(seq); font-weight: 700; color: var(--deep); min-width: 1.4em; }
.sequence .seq-item:focus { outline: 3px solid var(--cbar-accent); outline-offset: 1px; }
.sequence .seq-text { flex: 1; min-width: 0; }
.sequence .seq-controls { display: flex; gap: 4px; }
.sequence .seq-up, .sequence .seq-down { padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); font: inherit; cursor: pointer; }
.sequence .seq-up:disabled, .sequence .seq-down:disabled { opacity: .55; cursor: default; }
.tfr .tfr-reason { display: grid; gap: 4px; font-weight: 600; margin-top: 8px; }
.extract { border-left: 4px solid var(--line); background: var(--code-bg); padding: 8px 14px; border-radius: 0 8px 8px 0; margin: 6px 0 10px; }
.duty-holders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; }
.review-options { display: grid; gap: 4px; margin: 4px 0 8px; }
.review-option { margin: 0; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; }
.review-option.is-chosen { border-color: var(--line); background: var(--code-bg); }
.review-option.is-answer { border-color: var(--good); background: var(--good-soft); }
.qresult.is-wrong .review-option.is-chosen:not(.is-answer) { border-color: var(--bad); background: var(--bad-soft); }
.answer-key { font-weight: 600; }
.answer-order, .answer-pairs { margin: 4px 0 8px; }
.ref { margin-top: 8px; }

/* The in-lesson practice tags (6.5): the same widgets in a card with a Check button. */
.practice { margin: 26px 0; padding: 18px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.practice::before { content: "Practice"; display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cbar-deep); font-weight: 700; }
.practice.in-practice::before { content: "In practice"; }
.practice .practice-prompt { font-weight: 600; margin: .3em 0 .6em; }
.practice .practice-result { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--code-bg); }
.practice .practice-result:empty { display: none; }
.practice.is-right .practice-result { background: var(--good-soft); color: var(--good); }
.practice.is-wrong .practice-result { background: var(--bad-soft); color: var(--bad); }
.in-practice .in-practice-img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.in-practice .in-practice-caption { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
.quick-check.spot-breach .spot-breach-img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0 10px; border: 1px solid var(--line); }
blockquote.reg { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--cbar-accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
blockquote.reg .reg-cite { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cbar-deep); }
blockquote.waiver-words { margin: 14px 0; padding: 12px 18px; border-left: 4px solid var(--cbar-accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
blockquote.waiver-words p { margin: 0; }
.lesson-audio { display: block; width: 100%; max-width: 560px; margin: 12px 0 4px; }
.transcript { margin: 4px 0 14px; font-size: .95rem; }
.note-card.project-card { border-left-color: var(--cbar-accent); }
.note-card.project-card .note-prompt::before { content: "Your worked project: "; color: var(--muted); font-weight: 600; }

/* Step 7: the course-end software-card (6.5: the result page and the dashboard only), the 9.6 start interstitial. */
.software-card { border-left: 4px solid var(--cbar-accent); background: var(--accent-soft); }
.software-card h2 { margin-bottom: 6px; }
.software-card p { margin: 6px 0; }
.interstitial h1 { margin-top: 0; }
.interstitial-form { margin: 18px 0 10px; }
.interstitial-form .btn { white-space: normal; text-align: left; }

/* Step 8: the admin side (8.3) - the dashboard figures, the readiness panel, the page links, the search rows. */
.admin-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 18px; font-size: .95rem; }
.admin-links a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; }
.admin-links a:hover { border-color: var(--deep); color: var(--deep); }
.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 12px 0 6px; }
.figure { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.figure-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.figure-label { color: var(--muted); font-size: .85rem; }
.figure.is-bad { border-color: var(--bad); }
.figure.is-warn { border-color: var(--cbar-accent); }
.readiness-table td:last-child { font-size: .9rem; }
.search-row { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.search-row label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; min-width: 260px; }
.filter-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 12px; }
.filter-links a[aria-current="page"] { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--cbar-accent); }
.extend-form { display: flex; gap: 8px; align-items: end; }
.extend-form label { display: grid; gap: 2px; font-size: .85rem; font-weight: 600; }
.extend-form input[type=number] { width: 80px; }
.cert-action { margin: 4px 0; }
.cert-action label { font-size: .85rem; }
.histogram th, .histogram td { text-align: center; }
.support-message { padding: 10px 0; border-bottom: 1px solid var(--line); }
.support-message:last-child { border-bottom: 0; }
.support-message h3 { margin: 0 0 4px; }
.lint-list li { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }

/* Step 10: the public side - the catalogue, the course page, the verify form, the legal pages, the footer's legal
   links. Phone width first: covers shrink to the column, nothing scrolls sideways. */
.catalogue-card { align-items: stretch; }
.course-cover { flex: none; width: 160px; height: auto; max-height: 120px; object-fit: cover; border-radius: 8px; background: var(--accent-soft); }
.course-card .eyebrow, .who-for .eyebrow { margin: 6px 0 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-fill); }
.who-for p { margin-top: 2px; }
.cpd-line { margin: 6px 0 0; }
.course-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.course-actions .price, .course-public .price { font-weight: 700; color: var(--ink); }
.course-public { display: grid; gap: 14px; }
.course-public .card { margin: 0; }
.course-head h1 { margin-top: .3em; }
.course-cover-large { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: 8px; }
.outcomes li, .public-modules li { margin: 4px 0; }
.public-modules { list-style: decimal; padding-left: 1.4em; }
.legal-doc .legal-body h1 { font-size: 1.35rem; }
.legal-doc .legal-body h2 { font-size: 1.12rem; }
.legal-draft { margin: 0 0 10px; border-radius: 6px; }
.legal-links a { white-space: nowrap; }
.app-footer-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; width: 100%; }
.app-footer-legal a { color: inherit; }
@media (max-width: 600px) {
  .catalogue-card { flex-direction: column; }
  .course-cover { width: 100%; max-height: 160px; }
}