/* assets/outline.css · RIVET course outline (30 Oct 2026)
   The default learner outline, as learning platforms show a syllabus: a summary line, Expand all / Collapse all,
   an accordion of parts (or courses), modules inside them, and plain lesson rows on hairlines. No cards.
   A sticky side panel on desktop carries the course facts and the page's own buy/apply button.
   Markup is static HTML (works without JS: everything open); assets/outline.js adds the accordion.
   Light by default; dark under body.gtm-dark. Logical properties only, so the Arabic twin mirrors as is.
   Colours: brand tokens (assets/brand-tokens.css) as fixed values, because the site's own --ink can be dark on dark pages.
   Text colours carry !important only to beat the dark pages' blanket `main :is(p,li,b,...)` ink rules. */

.ol{
  --ol-ink:#000000; --ol-mute:#4A4A68; --ol-line:#D1D1D9; --ol-key:#3B06D4; --ol-hover:#F8F8FA;
  --ol-panel:#FFFFFF; --ol-panel-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); --ol-tint:#F6F8FF;
  --ol-focus:#3B06D4;
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,3.5vw,48px); align-items:start;
  margin-block-start:clamp(24px,3vw,40px); color:var(--ol-ink);
}
body.gtm-dark .ol{
  --ol-ink:#FFFFFF; --ol-mute:#9A9BBD; --ol-line:#2A2944; --ol-key:#7B87FF; --ol-hover:rgba(255,255,255,.04);
  --ol-panel:#0A0A0C; --ol-panel-shadow:none; --ol-tint:rgba(123,135,255,.08);
  --ol-focus:#7B87FF;
}
@media (min-width:1024px){
  .ol--side{ grid-template-columns:minmax(0,1fr) minmax(280px,340px); }
}

/* ---- summary bar: counts on the start side, Expand all on the end side ---- */
.ol__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
  padding-block-end:14px; border-block-end:1px solid var(--ol-ink); }
:root .ol .ol__sum{ margin:0; display:flex; flex-wrap:wrap; gap:4px 0; font:500 var(--t-meta,.75rem)/1.4 var(--font-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ol-ink) !important; max-width:none; }
.ol__sum > span{ white-space:nowrap; }
.ol__sum > span:not(:last-child)::after{ content:"·"; padding-inline:.6em; color:var(--ol-mute); }
:root .ol .ol__intro{ margin:12px 0 0; font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-mute) !important; max-width:68ch; }
.ol__all{ display:none; }
.ol--js .ol__all{ display:inline-flex; }
:root .ol .ol__all{ align-items:center; gap:8px; min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer;
  font:600 var(--t-small,.875rem)/1.2 var(--font-sans); color:var(--ol-key) !important; text-decoration:underline; text-underline-offset:4px; }
.ol__all:hover{ text-decoration-thickness:2px; }

/* ---- the accordion: one row per part (or course) ---- */
.ol__list{ list-style:none; margin:0; padding:0; }
.ol__item{ border-block-end:1px solid var(--ol-line); }
.ol__h{ margin:0; font:inherit; }
:root .ol .ol__btn{ width:100%; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:start; column-gap:14px;
  padding:20px 8px; margin:0; border:0; background:none; text-align:start; font:inherit; color:inherit; cursor:default; }
.ol--js .ol__btn{ cursor:pointer; transition:background-color var(--dur-instant,120ms) var(--ease-standard,ease); }
.ol--js .ol__btn:hover{ background:var(--ol-hover); }
.ol__btn:focus-visible, .ol__all:focus-visible{ outline:3px solid var(--ol-focus); outline-offset:2px; border-radius:8px; }
.ol__ico{ display:grid; place-items:center; width:24px; height:24px; margin-block-start:1px; color:var(--ol-key); }
.ol__ico svg{ width:20px; height:20px; }
.ol__ht{ display:flex; flex-direction:column; gap:4px; min-width:0; }
:root .ol .ol__k{ font:500 var(--t-meta,.75rem)/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ol-key) !important; }
:root .ol .ol__t{ font:600 var(--role-dense,1.25rem)/1.25 var(--font-sans); letter-spacing:-.01em; color:var(--ol-ink) !important; text-wrap:pretty; }
:root .ol .ol__d{ font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-mute) !important; }
.ol__end{ display:flex; align-items:center; gap:10px; margin-block-start:2px; }
:root .ol .ol__cnt{ font:500 var(--t-meta,.75rem)/1.4 var(--font-mono); letter-spacing:.04em; color:var(--ol-mute) !important; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ol__chev{ display:none; width:20px; height:20px; color:var(--ol-mute); transition:transform var(--dur-quick,200ms) var(--ease-standard,ease); }
.ol--js .ol__chev{ display:block; }
.ol__btn[aria-expanded="false"] .ol__chev{ transform:rotate(-90deg); }
[dir="rtl"] .ol__btn[aria-expanded="false"] .ol__chev, .ol__btn[aria-expanded="false"]:dir(rtl) .ol__chev{ transform:rotate(90deg); }

/* ---- an open row's content, indented under its title ---- */
.ol__c{ padding:0 8px 24px calc(8px + 24px + 14px); }
.ol__c[hidden]{ padding-block:0; }
.ol__c[hidden]:not([hidden="until-found"]){ display:none; }
:root .ol .ol__c > p, :root .ol .ol__p{ margin:0 0 12px; font-size:var(--t-body,1rem); line-height:1.6; color:var(--ol-mute) !important; max-width:68ch; }

/* modules inside a part */
.ol__mod + .ol__mod{ margin-block-start:22px; }
.ol__mh{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 6px; }
:root .ol .ol__mn{ font:500 var(--t-meta,.75rem)/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ol-mute) !important; font-variant-numeric:tabular-nums; }
:root .ol .ol__mt{ margin:0; font:600 var(--t-body,1rem)/1.4 var(--font-sans); color:var(--ol-ink) !important; }
:root .ol .ol__mr{ font:500 var(--t-meta,.75rem)/1.4 var(--font-mono); letter-spacing:.04em; color:var(--ol-mute) !important; }
:root .ol .ol__obj{ margin:0 0 10px; font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-ink) !important; max-width:68ch; }

/* lesson rows: number, title (and its line), and any length the data states */
.ol__ls{ list-style:none; margin:0; padding:0; border-block-start:1px solid var(--ol-line); }
:root .ol .ol__l{ display:grid; grid-template-columns:3.2ch minmax(0,1fr) auto; column-gap:14px; align-items:baseline;
  padding:12px 0; border-block-end:1px solid var(--ol-line); margin:0; color:var(--ol-ink) !important; }
:root .ol .ol__ln{ font:500 var(--t-meta,.75rem)/1.6 var(--font-mono); color:var(--ol-mute) !important; font-variant-numeric:tabular-nums; }
.ol__lb{ display:flex; flex-direction:column; gap:3px; min-width:0; }
:root .ol .ol__lt{ font-size:var(--t-body,1rem); line-height:1.45; font-weight:500; color:var(--ol-ink) !important; }
:root .ol .ol__ld{ font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-mute) !important; }
:root .ol .ol__lm{ display:inline-flex; align-items:center; gap:6px; font:500 var(--t-meta,.75rem)/1.6 var(--font-mono); color:var(--ol-mute) !important; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ol__lm svg{ width:16px; height:16px; color:var(--ol-key); }
:root .ol .ol__lo{ font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-ink) !important; }
:root body .ol .ol__lo b, :root body .ol .ol__out b, :root body .ol .ol__task b, :root body .ol .ol__obj b{ font:500 var(--t-meta,.75rem)/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ol-key) !important; margin-inline-end:8px; }

/* notes (agents built live, and the like), the task, the outcome, the link */
:root .ol .ol__note{ margin:10px 0 0; font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-mute) !important; max-width:68ch; }
/* the takeaway line each part or module carried as a figure caption before the outline (kept as text) */
:root .ol p.ol__fig{ margin:0 0 16px; padding:10px 14px; border-radius:8px; background:var(--ol-tint); font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-ink) !important; max-width:68ch; text-wrap:pretty; }
:root .ol .ol__ls + p.ol__fig{ margin:12px 0 0; }
:root .ol .ol__task{ margin:20px 0 0; padding:14px 16px; border-radius:8px; background:var(--ol-tint); }
:root .ol .ol__task p{ margin:0; font-size:var(--t-small,.875rem); line-height:1.55; color:var(--ol-ink) !important; max-width:68ch; }
:root .ol .ol__task ul{ margin:8px 0 0; padding-inline-start:18px; }
:root .ol .ol__task li{ margin:4px 0 0; font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-ink) !important; }
:root .ol .ol__out{ margin:16px 0 0; font-size:var(--t-small,.875rem); line-height:1.55; color:var(--ol-ink) !important; max-width:68ch; }
:root .ol .ol__go{ display:inline-flex; align-items:center; min-height:44px; margin-block-start:4px; font-weight:600; font-size:var(--t-small,.875rem);
  color:var(--ol-key) !important; text-decoration:underline; text-underline-offset:4px; }
:root .ol .ol__go .arr{ margin-inline-start:6px; }
:root .ol .ol__go:focus-visible{ outline:3px solid var(--ol-focus); outline-offset:2px; border-radius:4px; }

/* flat outlines (a short list with nothing to open): the same rows, no accordion */
.ol__list--flat .ol__item{ padding:18px 8px; }
.ol__list--flat .ol__row{ display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:14px; align-items:start; }
.ol__list--flat .ol__ht{ gap:6px; }
:root .ol .ol__list--flat .ol__d{ font-size:var(--t-body,1rem); line-height:1.6; }
.ol__list--flat .ol__d a, :root .ol .ol__c a:not(.ol__go):not(.btn){ color:var(--ol-ink) !important; text-decoration:underline; text-underline-offset:3px; }

/* ---- the side panel (desktop): facts and the page's own button ---- */
/* the page scrolls on html; body must not be a scroll container, or the panel never pins (moved from course-curriculum.css) */
html body:has(.ol--side){ overflow-x:clip !important; overflow-y:visible !important; }
.ol__side{ display:none; }
@media (min-width:1024px){
  .ol__side{ display:flex; flex-direction:column; gap:18px; position:sticky; top:104px; padding:24px; border-radius:12px;
    background:var(--ol-panel); box-shadow:var(--ol-panel-shadow); }
}
:root .ol .ol__sk{ margin:0; font:500 var(--t-meta,.75rem)/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ol-key) !important; }
:root .ol .ol__st{ margin:4px 0 0; font:600 var(--role-dense,1.25rem)/1.25 var(--font-sans); color:var(--ol-ink) !important; }
:root .ol .ol__sp{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
:root .ol .ol__sp strong{ font:600 var(--role-price,2rem)/1.1 var(--font-sans); letter-spacing:-.01em; color:var(--ol-ink) !important; font-variant-numeric:tabular-nums; }
:root .ol .ol__sp small{ font-size:var(--t-small,.875rem); color:var(--ol-mute) !important; }
.ol__sf{ list-style:none; margin:0; padding:0; border-block-start:1px solid var(--ol-line); }
:root .ol .ol__sf li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start; padding:10px 0; margin:0;
  border-block-end:1px solid var(--ol-line); font-size:var(--t-small,.875rem); line-height:1.45; color:var(--ol-ink) !important; }
.ol__sf svg{ width:18px; height:18px; margin-block-start:1px; color:var(--ol-key); }
:root .ol .ol__sf small{ display:block; color:var(--ol-mute) !important; font-size:var(--t-small,.875rem); }
:root .ol .ol__sm{ margin:0; font-size:var(--t-small,.875rem); line-height:1.5; color:var(--ol-mute) !important; }
:root .ol .ol__sm a{ color:var(--ol-ink) !important; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.ol__side .btn{ width:100%; justify-content:center; }
:root .ol .ol__sr{ margin:-6px 0 0; text-align:center; font-size:var(--t-small,.875rem); color:var(--ol-mute) !important; }

/* a CTA row right under an outline with a side panel: the panel carries it on desktop */
@media (min-width:1024px){ .ol-after{ display:none !important; } }

@media (max-width:640px){
  :root .ol .ol__btn{ grid-template-columns:20px minmax(0,1fr) auto; column-gap:10px; padding:16px 2px; }
  .ol__c{ padding:0 2px 20px; }
  /* the count (lesson length, modules and lessons) wraps under the title on phones, never hidden */
  .ol__btn > .ol__end{ display:contents; }
  .ol__btn > .ol__end .ol__cnt{ grid-column:2; grid-row:2; margin-block-start:6px; }
  .ol__btn > .ol__end .ol__chev{ grid-column:3; grid-row:1; margin-block-start:2px; }
  :root .ol .ol__l{ grid-template-columns:3ch minmax(0,1fr); }
  :root .ol .ol__l .ol__lm{ grid-column:2; }
  .ol__list--flat .ol__item{ padding:16px 2px; }
  .ol__list--flat .ol__row{ grid-template-columns:20px minmax(0,1fr); column-gap:10px; }
}
@media (prefers-reduced-motion:reduce){ .ol *, .ol *::before, .ol *::after{ transition:none !important; animation:none !important; } }
@media print{ .ol__c[hidden]{ display:block !important; } .ol__chev, .ol__all, .ol__side{ display:none !important; } }