/* Sophron(R) skin for the Options Course buyer pages on sophron.eu (portal, modules, checkout).
   Moved from amsterdaminvestmentclub.com on 13 Oct 2026. The course files are the AIC ones with
   the burgundy recolour and square pills baked in (as the analyst portal was moved); this file is
   Sophron's own and is linked LAST before </body>, so equal selectors win by order. Rules that must
   beat the light-theme rules of portal.css carry `html` / `html body`.
   Palette and type are the site's (see /assets/sph-portal.css): cream page, paper cards, navy ink,
   burgundy for actions, gold hairlines, Cardo for titles, Chivo for everything else. The portal
   opens in its light theme here (portal.js VIEW_DEFAULT); Dark stays one click away in View. */

:root {
  --sph-cream: #f6f3ee; --sph-cream-deep: #ede8df; --sph-paper: #fbf9f5;
  --sph-ink: #030248; --sph-ink-soft: rgba(3,2,72,.7); --sph-ink-faint: rgba(3,2,72,.45); --sph-line: rgba(3,2,72,.14);
  --sph-body: #1a1410; --sph-body-soft: rgba(26,20,16,.62);
  --sph-burg: #66100c; --sph-burg-hover: #4d0c09; --sph-burg-deep: #1c0503;
  --sph-burg-soft: rgba(102,16,12,.06); --sph-burg-line: rgba(102,16,12,.22);
  --sph-gold: #daa520;
  --sph-serif: 'Cardo', Georgia, 'Times New Roman', serif;
  --sph-sans: 'Chivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Portal: the light theme, re-pointed to the Sophron palette ---- */
html[data-theme="light"] {
  --oc-ink: var(--sph-cream);
  --oc-ink-2: var(--sph-paper);
  --oc-surface: var(--sph-paper);
  --oc-line: var(--sph-line);
  --oc-line-soft: rgba(3,2,72,.07);
  --oc-red: var(--sph-burg);
  --oc-red-br: var(--sph-burg);
  --oc-text: var(--sph-body);
  --oc-muted: var(--sph-body-soft);
}
html body.oc-portal-body { font-family: var(--sph-sans); }
html body .ocp { font-family: var(--sph-sans); }
html .ocp { --oc-r: 6px; }

/* Titles in Cardo, regular weight, navy, like the site's headings. */
html body .ocp-head h1, html body .ocp-gate h2, html body .ocp-modal__top h3, html body .ocp-idle__box h3 {
  font-family: var(--sph-serif); font-weight: 400; letter-spacing: -.01em;
}
html[data-theme="light"] body .ocp-head h1, html[data-theme="light"] body .ocp-gate h2,
html[data-theme="light"] body .ocp-modal__top h3, html[data-theme="light"] body .ocp-idle__box h3 { color: var(--sph-ink); }
html body .ocp-head h1 { font-size: 2rem; }
html body .ocp-gate h2 { font-size: 2rem; margin-bottom: 12px; }
html body .ocp-gate { margin-top: 10vh; }
html body .ocp-gate p { font-size: 1rem; }

/* Labels: the site's small caps. */
html body .ocp-card__h, html body .ocp-prog2__h, html body .ocp-view__h, html body .ocp-quiz__k {
  font-family: var(--sph-sans); letter-spacing: .2em;
}
html[data-theme="light"] body .ocp-card__h { color: var(--sph-burg); }

/* Buttons: burgundy, square, tracked uppercase, no lift. */
html body .ocp-btn {
  border-radius: 2px; background: var(--sph-burg); color: var(--sph-cream); box-shadow: none;
  font-family: var(--sph-sans); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
html body .ocp-btn:hover { background: var(--sph-burg-hover); transform: none; }
html body .ocp-btn:disabled { opacity: .45; }
html[data-theme="light"] body .ocp-btn--ghost { background: transparent; color: var(--sph-ink); border: 1px solid var(--sph-burg-line); }
html[data-theme="light"] body .ocp-btn--ghost:hover { background: var(--sph-burg-soft); border-color: var(--sph-burg); color: var(--sph-burg); }

/* Chips, tools and the View / Subtitles buttons: square, quiet, burgundy when on. */
html body .ocp-tool, html body .ocp-viewbtn, html body .ocp-chip, html body .ocp-score,
html body .ocp-view__opts button, html body .ocp-tl__zoom button { border-radius: 2px; font-family: var(--sph-sans); }
html[data-theme="light"] body .ocp-tool { background: var(--sph-paper); color: var(--sph-ink-soft); }
html[data-theme="light"] body .ocp-tool:hover,
html[data-theme="light"] body .ocp-viewbtn:hover, html[data-theme="light"] body .ocp-viewbtn.on,
html[data-theme="light"] body .ocp-view__opts button:hover,
html[data-theme="light"] body .ocp-tl__zoom button:hover { color: var(--sph-burg); border-color: var(--sph-burg-line); background: var(--sph-burg-soft); }
html[data-theme="light"] body .ocp-view__opts button.on,
html[data-theme="light"] body .ocp-tl__zoom button.on { color: var(--sph-burg); border-color: var(--sph-burg); background: var(--sph-burg-soft); }
html[data-theme="light"] body .ocp-chip--ok { color: #044815; border-color: rgba(4,72,21,.3); background: rgba(4,72,21,.07); }

/* Cards and panels: paper on cream, hairline, small corners. */
html[data-theme="light"] body .ocp-card, html[data-theme="light"] body .ocp-bar,
html[data-theme="light"] body .ocp-note { background: var(--sph-paper); border-color: var(--sph-line); }
html body .ocp-card, html body .ocp-bar, html body .ocp-note, html body .ocp-terms,
html body .ocp-dl, html body .ocp-link, html body .ocp-view { border-radius: 4px; }
html body .ocp-modal__box, html body .ocp-idle__box { border-radius: 6px; }
html[data-theme="light"] body .ocp-modal__box, html[data-theme="light"] body .ocp-idle__box,
html[data-theme="light"] body .ocp-view { background: var(--sph-paper); border-color: var(--sph-line); }
html[data-theme="light"] body .ocp-modal { background: rgba(28,5,3,.45); }
html[data-theme="light"] body .ocp-note--warn { border-color: var(--sph-burg-line); background: var(--sph-burg-soft); }
html[data-theme="light"] body .ocp-dl__ic { background: var(--sph-burg-soft); color: var(--sph-burg); }
html[data-theme="light"] body .ocp-dl:hover:not(:disabled) { background: #fff; border-color: var(--sph-burg-line); }

/* Chapters rail: the open chapter gets the burgundy bar, as the analyst Journey does. */
html[data-theme="light"] body .ocp-ch.on { background: var(--sph-burg-soft); border-left-color: var(--sph-burg); color: var(--sph-ink); }
html[data-theme="light"] body .ocp-part__h { color: var(--sph-ink); }
html body .ocp-part__h { font-family: var(--sph-serif); font-size: .95rem; font-weight: 700; }

/* The "Slides follow the video" switch keeps its pill knob, but square. */
html body .ocp-toggle input { border-radius: 2px; }
html body .ocp-toggle input::after { border-radius: 1px; }

/* Quiz overlay over the stage. */
html[data-theme="light"] body .ocp-quiz { background: rgba(246,243,238,.96); }
html[data-theme="light"] body .ocp-quiz h3 { color: var(--sph-ink); font-family: var(--sph-serif); font-weight: 400; font-size: 1.3rem; }
html body .ocp-quiz__opt, html body .ocp-quiz__why { border-radius: 2px; }

/* The video and slide frames: small corners. */
html body .ocp-video, html body .ocp-slide { border-radius: 4px; }

/* ---- Modules (light by default, its own toggle) ---- */
html body.ocm-body {
  --m-bg: var(--sph-cream); --m-panel: var(--sph-cream-deep); --m-card: var(--sph-paper);
  --m-line: rgba(3,2,72,.14); --m-line-soft: rgba(3,2,72,.07);
  --m-ink: var(--sph-ink); --m-text: var(--sph-body); --m-muted: var(--sph-body-soft);
  --m-red: var(--sph-burg); --m-red-soft: var(--sph-burg-soft); --m-red-line: var(--sph-burg-line);
  --m-sans: var(--sph-sans);
}
html[data-theme="dark"] body.ocm-body {
  --m-bg: #0d0403; --m-panel: #170807; --m-card: #1c0a09;
  --m-line: rgba(255,255,255,.12); --m-line-soft: rgba(255,255,255,.07);
  --m-ink: #fff; --m-text: #f6f3ee; --m-muted: #c9b8b4;
  --m-red: #e8a49e; --m-red-soft: rgba(232,164,158,.12); --m-red-line: rgba(232,164,158,.4);
}
html body.ocm-body .ocm-banner__h1 { font-family: var(--sph-serif); font-weight: 400; letter-spacing: -.01em; }
html body.ocm-body .ocm-banner__eyebrow { font-family: var(--sph-sans); letter-spacing: .24em; color: #e8a49e; }
html body.ocm-body .ocm-bbtn, html body.ocm-body .ocm-bchip { border-radius: 2px; }
html body.ocm-body .ocm-bbtn--primary { background: var(--sph-burg); border-color: var(--sph-burg); color: var(--sph-cream); }
html body.ocm-body .ocm-bbtn--primary:hover { background: var(--sph-burg-hover); }

/* ---- Checkout (inline styles in checkout.html, AIC look re-pointed) ---- */
html body .oc-wrap { font-family: var(--sph-sans); color: var(--sph-body); }
html body .oc-hero { border-radius: 4px; }
html body .oc-hero__tag, html body .ae-tier-badge { border-radius: 2px; font-family: var(--sph-sans); }
html body .oc-k, html body .ae-tiers-label { color: var(--sph-burg); letter-spacing: .2em; }
html body .oc-h1 { font-family: var(--sph-serif); font-weight: 400; color: var(--sph-ink); }
html body .oc-lead { color: var(--sph-body-soft); }
html body .oc-inc div, html body .oc-by, html body .ae-tier { background: var(--sph-paper); border: 1px solid var(--sph-line); border-radius: 4px; }
html body .oc-inc b { font-family: var(--sph-serif); font-weight: 700; color: var(--sph-ink); }
html body .oc-by b { font-family: var(--sph-serif); font-size: 1.05rem; color: var(--sph-ink); }
html body .ae-card { background: var(--sph-paper); border: 1px solid var(--sph-line); border-top: 2px solid var(--sph-gold); border-radius: 4px; box-shadow: none; }
html body .ae-card h2 { font-family: var(--sph-serif); font-weight: 400; font-size: 1.6rem; color: var(--sph-ink); }
html body .ae-card-meta-row { border-bottom-color: var(--sph-line); }
html body .ae-card-meta-row b, html body .ae-tier-name, html body .ae-tier-price { color: var(--sph-ink); }
html body .ae-tier--mine { background: #fff; border-color: var(--sph-burg-line); }
html body .ae-btn {
  border-radius: 2px; background: var(--sph-burg); box-shadow: none;
  font-family: var(--sph-sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}
html body .ae-btn:hover:not(:disabled) { background: var(--sph-burg-hover); transform: none; box-shadow: none; filter: none; }
html body .ae-btn.ghost { background: transparent; color: var(--sph-ink); border: 1px solid var(--sph-burg-line); }
html body .ae-btn.ghost:hover:not(:disabled) { background: var(--sph-burg-soft); border-color: var(--sph-burg); color: var(--sph-burg); }
html body .ae-msg { border-radius: 2px; }
html body:not(.oc-portal-body) { background: var(--sph-cream); }
/* The page is often shorter than the window (gates): paint the canvas too. */
html { background: var(--sph-cream); }
html[data-theme="dark"] { background: #0a0303; }
@media (max-width: 520px) { html body .ae-btn { letter-spacing: .08em; } }

/* Reference panels: a readable title; the Progress column heads as site labels. */
html body .ocp-modal__top h3 { font-size: 1.45rem; }
html body .ocp-prog2__h { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
html[data-theme="light"] body .ocp-prog2__h { color: var(--sph-burg); }
/* Phones: five time labels under the timeline ran into each other; keep the first and last. */
@media (max-width: 600px) { html body .ocp-tl__labels > *:not(:first-child):not(:last-child) { display: none; } }

/* Modules: the reading-position card is the site's dark burgundy band with a gold rule
   (the analyst Journey's .aj-pos). */
html body.ocm-body .ocm-pos { background: var(--sph-burg-deep); border-top: 2px solid var(--sph-gold); }
html body.ocm-body .ocm-pos__big { font-family: var(--sph-serif); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
html body.ocm-body .ocm-pos__bar { border-radius: 2px; }
/* Phones: the wider lesson tables (module 1.1, 2.1) pushed the page sideways; they scroll in place. */
@media (max-width: 600px) { html body .ocm-lesson table.tb { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* ===== PORTAL SIDEBAR (Vincent, 13 Oct 2026: "restyle so on left you also have that sidebar ... same
   logic as analyst program", then "look and feel ... seems different"). A copy of the analyst portal's
   .ao-side as it renders on sophron.eu (measured live 13 Oct): 248px column, paper card 12px radius
   14px padding, a white profile box (42px photo, Cardo name, role, Log out), navy tabs 9px 12px,
   burgundy for the open one, pale grey group labels. The page title sits in the main column.
   The .ocp-side scope matters: in present mode portal.js moves #ocp-ctrls into the stage, where the
   old corner styling (portal.css) takes over again. ===== */
html body .ocp { max-width: none; padding: 0 0 90px; }
/* The sidebar, the page grid, the module top bar, the reader grid and Previous / Next come from the
   shared shell (/assets/sph-shell.css, 20 Oct 2026); this file only adds what is the course's own.
   The course has a dark view; these are the shell's tokens for it. */
html[data-theme="dark"] { --sh-bg: #0d0403; --sh-card: #1a0c0c; --sh-line: rgba(255,255,255,.12); --sh-ink: #fff; --sh-ink-soft: #c9b8b4; --sh-hover: rgba(255,255,255,.06); --sh-muted: #c9b8b4; --sh-surface: #1a0c0c; --sh-hairline: rgba(255,255,255,.12); }
html body #ocp-course[data-layout="split"] { max-width: none; }

/* The player controls: rows of the same list, no icons, their panels open to the right of the card. */
html body .ocp-side .ocp-me { display: block; flex: none; margin: 0; }
html body .ocp-side .ocp-ctrls { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
html body .ocp-side .ocp-ctrls .ocp-toggle {
  flex-direction: row-reverse; justify-content: space-between; gap: 10px; min-height: 0; margin: 0; padding: 9px 12px; border-radius: 8px;
  font-family: var(--sph-sans); font-size: .9rem; font-weight: 600; line-height: 1.2; color: var(--oc-muted); white-space: normal;
}
html body .ocp-side .ocp-ctrls .ocp-toggle input { flex: none; }
html body .ocp-side .ocp-ctrls .ocp-toggle span { flex: 1 1 auto; min-width: 0; }
html body .ocp-side .ocp-ctrls .ocp-viewbtn {
  display: flex; align-items: center; width: 100%; min-height: 0; margin: 0; padding: 9px 12px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: none; color: var(--oc-muted);
  font-family: var(--sph-sans); font-size: .9rem; font-weight: 600; line-height: 1.2; text-align: left;
}
html[data-theme="light"] body .ocp-side .ocp-ctrls .ocp-toggle,
html[data-theme="light"] body .ocp-side .ocp-ctrls .ocp-viewbtn { color: var(--sph-ink-soft); }
html body .ocp-side .ocp-ctrls .ocp-viewbtn svg { display: none; }
html body .ocp-side .ocp-ctrls .ocp-toggle:hover, html body .ocp-side .ocp-ctrls .ocp-viewbtn:hover { background: var(--sph-cream); color: var(--sph-ink); }
html:not([data-theme="light"]) body .ocp-side .ocp-ctrls .ocp-toggle:hover,
html:not([data-theme="light"]) body .ocp-side .ocp-ctrls .ocp-viewbtn:hover { background: rgba(255,255,255,.06); color: var(--oc-text); }
html body .ocp-side .ocp-ctrls .ocp-viewbtn.on { background: var(--sph-burg); color: var(--sph-cream); }
html body .ocp-side .ocp-ctrls .ocp-view {
  position: absolute; top: -10px; bottom: auto; left: calc(100% + 30px); right: auto; z-index: 60;
  width: min(720px, calc(100vw - 340px)); margin: 0;
}

/* Main column: the title like the analyst portal's tab titles, quiz score and access on its right. */
.ocp-mainhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 18px; }
html body .ocp-mainhead h1 { margin: 0; font-family: var(--sph-serif); font-weight: 400; font-size: 1.85rem; line-height: 1.2; letter-spacing: -.01em; color: var(--sph-ink); }
html:not([data-theme="light"]) body .ocp-mainhead h1 { color: var(--oc-text); }
.ocp-mainhead p { margin: 4px 0 0; font-size: .82rem; color: var(--oc-muted); }
.ocp-mainhead__st { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocp-main > .ocp-bar { margin-top: 0; margin-bottom: 14px; }

/* Phones and narrow tablets: the card sits on top and its rows wrap, as on the analyst portal. */
@media (max-width: 900px) {
  .ocp-shell { grid-template-columns: minmax(0, 1fr); }
  .ocp-side { padding-right: 0; margin-bottom: 14px; }
  .ocp-sidenav { flex-direction: row; flex-wrap: wrap; }
  html body .ocp-side .ocp-sidenav .ocp-stab { width: auto; }
  .ocp-navgroup { flex-basis: 100%; border-top: 0; padding-top: 8px; margin-top: 4px; }
  html body .ocp-side .ocp-me { flex-basis: 100%; }
  html body .ocp-side .ocp-ctrls { flex-direction: row; flex-wrap: wrap; }
  html body .ocp-side .ocp-ctrls .ocp-toggle, html body .ocp-side .ocp-ctrls .ocp-viewbtn { width: auto; }
  html body .ocp-side .ocp-ctrls .ocp-toggle { flex-direction: row; }
  html body .ocp-side .ocp-ctrls .ocp-view { top: calc(100% + 8px); bottom: auto; left: 0; width: calc(100vw - 48px); }
}
@media (max-width: 760px) {
  html body .ocp-side .ocp-ctrls .ocp-view { position: fixed; left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; }
  html body .ocp-side .ocp-ctrls .ocp-toggle, html body .ocp-side .ocp-ctrls .ocp-viewbtn, html body .ocp-side .ocp-sidenav .ocp-stab { min-height: 40px; }
  .ocp-mainhead h1 { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  html body .ocp { padding-left: 16px; padding-right: 16px; }
}

/* ===== TABS AND PANELS (13 Oct 2026, Vincent: "also open and show the modules like aic portal ... why are
   you not mimicking it exactly"). One panel in the main column at a time, as .ao-panel on the analyst
   portal. body[data-oc-tab] is set by the tab script in portal.html. ===== */
.ocp-pane { display: none; }
body[data-oc-tab="journey"] .ocp-pane--journey,
body[data-oc-tab="recording"] .ocp-pane--recording { display: block; }
body:not([data-oc-tab]) .ocp-pane--recording { display: block; }

/* Resources, Progress, Certificate, About, Terms: portal.js's panels, drawn in the column. */
body[data-oc-tab="res"] #ocp-modal, body[data-oc-tab="quiz"] #ocp-modal, body[data-oc-tab="cert"] #ocp-modal,
body[data-oc-tab="about"] #ocp-modal, body[data-oc-tab="terms"] #ocp-modal {
  display: block !important; position: static; inset: auto; z-index: auto; padding: 0; background: none !important; backdrop-filter: none;
}
body[data-oc-tab] #ocp-modal .ocp-modal__box {
  width: auto; max-width: 980px; max-height: none; overflow: visible; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
body[data-oc-tab] #ocp-modal .ocp-modal__x { display: none; }
body[data-oc-tab] #ocp-modal .ocp-modal__top { margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--oc-line); }
html body[data-oc-tab] #ocp-modal .ocp-modal__top h3 { font-family: var(--sph-serif); font-weight: 400; font-size: 1.85rem; line-height: 1.2; letter-spacing: -.01em; color: var(--sph-ink); }
html:not([data-theme="light"]) body[data-oc-tab] #ocp-modal .ocp-modal__top h3 { color: var(--oc-text); }
body[data-oc-tab] #ocp-modal .ocp-modal__p { font-size: .95rem; }
html[data-theme="light"] body[data-oc-tab] #ocp-modal .ocp-modal__p b { color: var(--sph-ink); }
body[data-oc-tab="cert"] #ocp-modal .ocp-cert img { max-width: 720px; }

/* ---- Journey ---- */
html body .ocp-main .ao-h { font-family: var(--sph-serif); font-weight: 400; color: var(--sph-ink); font-size: 1.85rem; letter-spacing: -.01em; line-height: 1.2; }
html:not([data-theme="light"]) body .ocp-main .ao-h { color: var(--oc-text); }
.ocp-ajbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ocp-ajbar__all { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-family: var(--sph-sans);
  font-size: .78rem; font-weight: 700; color: var(--sph-burg); }
.ocp-ajbar__all:hover { text-decoration: underline; }
.ocp-ajbar__prog { font-size: .78rem; font-weight: 600; color: var(--sph-ink-soft); }
/* the Journey's own panel colours (aj-journey.css :root) follow the theme */
html:not([data-theme="light"]) #ao-journey.aj { --aj-card: #1a0c0c; --aj-line: rgba(255,255,255,.12); --aj-soft: rgba(255,255,255,.07);
  --aj-ink: #fff; --aj-text: #f6f3ee; --aj-muted: #c9b8b4; }


/* The reader inside the portal: modules.css with the Sophron tokens (body.ocm-body is not on this page),
   no module list of its own (the Journey and the sidebar are the list), the reading card on the right. */
#ao-journey {
  --m-bg: var(--sph-cream); --m-panel: var(--sph-cream-deep); --m-card: var(--sph-paper);
  --m-line: rgba(3,2,72,.14); --m-line-soft: rgba(3,2,72,.07);
  --m-ink: var(--sph-ink); --m-text: var(--sph-body); --m-muted: var(--sph-body-soft);
  --m-red: var(--sph-burg); --m-red-soft: var(--sph-burg-soft); --m-red-line: var(--sph-burg-line);
  --m-sans: var(--sph-sans);
}
html[data-theme="dark"] #ao-journey {
  --m-bg: #0d0403; --m-panel: #170807; --m-card: #1c0a09; --m-line: rgba(255,255,255,.12); --m-line-soft: rgba(255,255,255,.07);
  --m-ink: #fff; --m-text: #f6f3ee; --m-muted: #c9b8b4; --m-red: #e8a49e; --m-red-soft: rgba(232,164,158,.12); --m-red-line: rgba(232,164,158,.4);
}
#ao-journey .ocm-lesson { color: var(--m-text); font-family: var(--m-sans); }
#ao-journey .ocm-lesson h1, #ao-journey .ocm-lesson h2, #ao-journey .ocm-lesson h3, #ao-journey .ocm-lesson h4 { color: var(--m-ink); }
html body #ao-journey .ocm-pos { background: #fff; border: 1px solid rgba(3,2,72,.14); border-top-width: 1px; }   /* a white card (audit 6 Nov 2026) */
html body #ao-journey .ocm-pos__big { font-family: var(--sph-serif); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
html body #ao-journey .ocm-pos__bar { border-radius: 2px; }


/* ===== ONE PAGE HEAD ON EVERY TAB (Vincent, 13 Oct 2026: "make sure titles and such all same aligned, like
   certificate etc"). Journey, The recording and the five reference panels share one header: the title in
   Cardo 1.85rem at the top of the column (level with the sidebar card), 14px to a hairline, 18px to the
   content, starting at the column's left edge. Measured with align_probe.mjs. ===== */
#ao-journey.aj { margin-top: 0; padding-top: 0; }
#ao-journey .aj__top, .ocp-mainhead, body[data-oc-tab] #ocp-modal .ocp-modal__top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--sh-line); min-height: 0;   /* the shell's page title (sph-shell.css 3) */
}
#ao-journey .aj__top h1, html body .ocp-mainhead h1, html body[data-oc-tab] #ocp-modal .ocp-modal__top h3 {
  margin: 0; padding: 0; font-family: var(--sph-serif); font-weight: 400; font-size: 1.85rem; line-height: 1.2; letter-spacing: -.01em;
}
.ocp-mainhead__st { align-items: center; padding-bottom: 4px; }
.ocp-mainhead__sub { font-size: .82rem; color: var(--oc-muted); white-space: nowrap; }
.ocp-ajbar { margin-top: 0; }
/* The panels fill the column like the other tabs; their text keeps a reading width. */
body[data-oc-tab] #ocp-modal { width: 100%; }
body[data-oc-tab] #ocp-modal .ocp-modal__box { width: 100% !important; max-width: none !important; margin: 0 !important; justify-self: stretch; }
body[data-oc-tab] #ocp-modal .ocp-modal__p { max-width: 980px; }
@media (max-width: 760px) {
  #ao-journey .aj__top h1, html body .ocp-mainhead h1, html body[data-oc-tab] #ocp-modal .ocp-modal__top h3 { font-size: 1.5rem; }
  .ocp-mainhead__sub { white-space: normal; }
}

/* ===== Live Q&A with Sven (20 Oct 2026). Tab "qa" in the sidebar, a strip on the Journey and a chip
   in the recording header; date and join link painted by modules.js paintQA() from modules/qa.json. */
body[data-oc-tab="qa"] .ocp-pane--qa { display: block; }
/* 7 Nov 2026: flex-start, so "Live Q&A" sits by its icon like every other item (space-between pushed the label to the
   right whenever the badge was hidden); the badge keeps the right edge with margin-left: auto. */
.ocp-stab--qa { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.ocp-stab--qa .ao-tab__badge { margin-left: auto; }
.ocp-stab__live { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--sph-burg); border-radius: 999px; padding: 3px 8px; }
.ocp-stab--qa.active .ocp-stab__live { background: #fff; color: var(--sph-burg); }
/* The Live Q&A pill on the Journey bar and its popup (20 Oct 2026; replaced the full-width strip). */
.ocp-qa-mini { display: inline-flex; align-items: center; gap: 0; margin: 0 auto 0 16px; padding: 6px 12px; border: 1px solid var(--oc-line, rgba(0,0,0,.14)); border-radius: 999px; background: transparent; color: var(--sph-ink); cursor: pointer; font-family: var(--sph-sans); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.ocp-qa-mini:hover { border-color: var(--sph-burg); color: var(--sph-burg); }
.ocp-qa-mini i { width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #c9b8b4; flex: none; }
.ocp-qa-mini span { margin-left: 4px; }
html.oc-qa-live .ocp-qa-mini i { background: #e8574b; animation: ocpLive 2s infinite; }
.ocp-qapop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(28,5,3,.55); }
/* The Q&A pop-up is the flat white card of the Q&A hero (audit 6 Nov 2026: "Cancel my place" was grey on near-black). */
.ocp-qapop__box { position: relative; width: min(440px, 100%); padding: 28px 26px 24px; border-radius: 12px; background: #fff; color: #1a1410; border: 1px solid rgba(3,2,72,.14); text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.ocp-qapop__box img { display: block; width: 72px; height: 72px; margin: 0 0 14px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: #ede8df; }
html body .ocp-qapop__box h3 { margin: 6px 0 10px; font-family: var(--sph-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: #030248; }
.ocp-qapop__when { margin: 0 0 6px; font-family: var(--sph-sans); font-size: 1rem; font-weight: 600; color: #030248; }
.ocp-qapop__note { margin: 0 0 14px; font-family: var(--sph-sans); font-size: .9rem; line-height: 1.5; color: rgba(26,20,16,.72); }
.ocp-qapop__box .ocp-qa__acts { margin: 0 0 14px; }
html body .ocp-qapop__box .ocp-qa__acts button.ocp-qa__cancel { color: rgba(26,20,16,.72); text-decoration: underline; text-underline-offset: 3px; }
.ocp-qapop__more { padding: 0; border: 0; background: none; color: #66100c; cursor: pointer; font-family: var(--sph-sans); font-size: .88rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.ocp-qapop__more:hover { text-decoration: underline; }
.ocp-qapop__x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; background: none; color: #030248; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ocp-qa-strip__k, .ocp-qa__k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sph-sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--sph-rose, #f0c9c5); }
.ocp-qa-strip__k i, .ocp-qa__k i, .ocp-chip--qa i { width: 8px; height: 8px; border-radius: 50%; background: #e8574b; box-shadow: 0 0 0 0 rgba(232,87,75,.6); animation: ocpLive 2s infinite; }
@keyframes ocpLive { 0% { box-shadow: 0 0 0 0 rgba(232,87,75,.55); } 70% { box-shadow: 0 0 0 8px rgba(232,87,75,0); } 100% { box-shadow: 0 0 0 0 rgba(232,87,75,0); } }
@media (prefers-reduced-motion: reduce) { .ocp-qa-strip__k i, .ocp-qa__k i, .ocp-chip--qa i { animation: none; } }
.ocp-chip--qa { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; color: #fff; background: var(--sph-burg); border: 1px solid var(--sph-burg); }
.ocp-qa { max-width: 1040px; }
.ocp-qa__hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; margin: 8px 0 30px; border-radius: 16px; overflow: hidden; background: var(--sph-burg-deep); color: #fff; }
.ocp-qa__hero img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 50% 20%; display: block; order: 2; }   /* photo on the right (Vincent, 22 Oct 2026) */
.ocp-qa__card { padding: 36px 38px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ocp-qa__when { font-family: var(--sph-serif); font-size: 2.6rem; line-height: 1.1; margin: 0; color: #fff; }
.ocp-qa__note { margin: 0; color: #e3d8d4; font-size: 1rem; line-height: 1.6; max-width: 520px; }
.ocp-qa__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ocp-qa__acts a { font-family: var(--sph-sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; text-decoration: none; padding: 12px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.ocp-qa__acts a.join { background: #fff; color: var(--sph-burg); border-color: #fff; }
/* Register / Cancel my place (22 Oct 2026): buttons, styled as the links beside them. */
.ocp-qa__acts button { font-family: var(--sph-sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 12px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; cursor: pointer; }
.ocp-qa__acts button.join { background: #fff; color: var(--sph-burg); border-color: #fff; }
.ocp-qa__acts button.ocp-qa__cancel { border-color: transparent; padding-left: 6px; padding-right: 6px; color: #e3d8d4; text-decoration: underline; text-underline-offset: 3px; }
.ocp-qa__acts button:disabled { opacity: .6; cursor: default; }
.ocp-qa__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.ocp-qa__cols h2 { font-family: var(--sph-serif); font-weight: 400; font-size: 1.45rem; margin: 0 0 10px; color: var(--sph-ink); }
.ocp-qa__cols p, .ocp-qa__cols li { font-size: 1rem; line-height: 1.65; color: var(--sph-body); }
.ocp-qa__cols ul { margin: 0; padding-left: 20px; }
.ocp-qa__cols li + li { margin-top: 6px; }
html:not([data-theme="light"]) .ocp-qa__cols h2 { color: var(--oc-text); }
html:not([data-theme="light"]) .ocp-qa__cols p, html:not([data-theme="light"]) .ocp-qa__cols li { color: var(--oc-text); }
@media (max-width: 760px) {
  .ocp-ajbar { flex-wrap: wrap; }
  .ocp-qa-mini { order: 3; margin: 0; }
  .ocp-qa__hero { grid-template-columns: 1fr; }
  .ocp-qa__hero img { min-height: 0; height: 240px; order: 0; }
  .ocp-qa__card { padding: 24px 22px; }
  .ocp-qa__when { font-size: 2rem; }
  .ocp-qa__cols { grid-template-columns: 1fr; gap: 20px; }
}

/* Player controls in the recording tab (20 Oct 2026): one row under the title, above the stage. */
.ocp-pane--recording .ocp-me--bar { display: flex; margin: -8px 0 14px; }
html body .ocp-mainhead .ocp-chip--qa { font-family: var(--sph-sans); font-size: .74rem; font-weight: 700; line-height: 1.2; padding: 6px 12px; border-radius: var(--sh-r, 2px); }

/* Live Q&A: the red live dots show only while a Q&A is actually on (html.oc-qa-live, set by modules.js). */
html:not(.oc-qa-live) .ocp-qa-strip__k i, html:not(.oc-qa-live) .ocp-qa__k i, html:not(.oc-qa-live) .ocp-chip--qa i { display: none; }
html body .ao-tabs .ao-tab .ao-tab__badge--live { background: #c0392b; color: #fff; }
/* Resources use the shell's list at the full column width, as the analyst portal does. */
body[data-oc-tab="res"] #ocp-modal .ocp-modal__p[data-body="res"] { max-width: none; }

/* THE CERTIFICATE TAB (audit 6 Nov 2026): the parts of the module portals' certificate block (rule book 6): the
   certificate with its badge, its name, and how it is checked. Same look as .mp-cert in modules/<id>/portal.html. */
.ocp-certx__art { position: relative; margin: 0 0 22px; }
.ocp-certx__art > img:first-child { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid rgba(3,2,72,.14); }
html body .ocp-cert img.ocp-certx__badge { position: absolute; right: -10px; bottom: -18px; width: 84px; height: 84px; max-width: none; object-fit: contain; border: 0; border-radius: 0; filter: drop-shadow(0 8px 16px rgba(42,37,35,.25)); }   /* beats .ocp-modal .ocp-cert img { width: 100% } (7 Nov 2026: badge was huge) */
html body .ocp-certx__t { margin: 0 0 12px; font-family: var(--sph-serif); font-weight: 400; font-size: 1.4rem; line-height: 1.25; color: #030248; }
.ocp-certx__ticks { list-style: none; margin: 0 0 16px; padding: 0; }
.ocp-certx__ticks li { position: relative; padding: 0 0 9px 24px; font-family: var(--sph-sans); font-size: .9rem; line-height: 1.55; color: #3b3330; }
.ocp-certx__ticks li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 10px; height: 6px; border-left: 2px solid #66100c; border-bottom: 2px solid #66100c; transform: rotate(-45deg); }
.ocp-certx__ticks b { color: #030248; }
.ocp-certx__ticks a { color: #66100c; }
/* The name field's label: a grey label, not burgundy (rule book 5c). */
html body .ocp-issue label { color: rgba(26,20,16,.62); letter-spacing: .08em; }
/* "Not passed" (and a wrong video question) in the Objectives list: the amber pill, never red (rule book 5c, audit 6 Nov 2026). */
html body .ocp-ql__s--no { background: #fef3c7; color: #a16207; border-color: transparent; }