/* Course shell: the outline panel flush against one edge of the viewport, and the
   rail that pulls it back out. It is over the lesson or it is gone — never beside it.
   Loaded by content/index.html and by the generated dist/index.html — never by a lesson.

   `body[data-outline]` carries the mode: collapsed, open or page. */

:root{
  --samai-outline-width:clamp(300px,27vw,372px);
  --samai-outline-ease:.28s cubic-bezier(.4,0,.2,1);
}

/* Registered so the module rings can animate — a plain custom property is a
   string and jumps. An engine without @property still shows the right sweep,
   it just arrives at it instantly. */
@property --samai-ring{
  syntax:"<number>";
  inherits:false;
  initial-value:0;
}

/* ── the panel ─────────────────────────────────────────────────────────────── */

/* The shell holds the left edge, and says so physically rather than logically.
   That is the exception the RTL rule allows for: it is the edge the browser's
   own scrollbar never takes, and a viewport scrollbar sits on the right whatever
   the direction — `dir="rtl"` does not move it in Chromium or in Firefox. A rail
   parked in the scrollbar's gutter gets reached for by mistake both ways round,
   so left it is, in either direction. */

.samai-course-outline{
  position:fixed;
  z-index:90;
  inset-block:0;
  left:0;
  inline-size:min(var(--samai-outline-width),86vw);
  transition:transform var(--samai-outline-ease);
}

/* It hides by leaving through the edge it rests on. */
body[data-outline="collapsed"] .samai-course-outline{transform:translateX(-100%)}

.samai-outline{
  display:flex;
  flex-direction:column;
  block-size:100%;
  border-right:1.5px solid var(--samai-border);
  background:var(--samai-surface);
  box-shadow:16px 0 40px #2437711a;
  overflow:hidden;
}

/* The head is the brand bar's sibling, so it wears the same dark surface and the
   same wash. It is only ever the wordmark and the progress under it. */
.samai-outline-head{
  position:relative;
  flex:none;
  padding:var(--samai-space-2) var(--samai-space-4) calc(var(--samai-space-2) + 3px);
  background:var(--samai-dark);
  color:#fff;
  overflow:hidden;
}

.samai-outline-head::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(320px 140px at 80% 50%,#3fae9a33,transparent 70%),
    radial-gradient(320px 140px at 20% 50%,#73c2671f,transparent 70%);
}

/* The wordmark is centred, so the reset control comes out of the flow rather
   than balancing it against nothing. */
.samai-outline-headline{
  display:flex;
  position:relative;
  z-index:1;
  align-items:center;
  justify-content:center;
  min-block-size:44px;
}

.samai-outline-logo{
  block-size:30px;
  inline-size:auto;
  max-inline-size:calc(100% - var(--samai-space-12));
}

.samai-outline-reset{
  display:grid;
  position:absolute;
  place-items:center;
  inset-inline-end:0;
  inline-size:44px;
  block-size:44px;
  padding:0;
  border:1px solid #ffffff26;
  border-radius:12px;
  background:#ffffff0d;
  color:#ffffffa8;
  font-size:var(--samai-text-xs);
  cursor:pointer;
  transition:color var(--samai-duration-fast) ease,border-color var(--samai-duration-fast) ease,background var(--samai-duration-fast) ease;
}

.samai-outline-reset:hover{
  border-color:#3fae9acc;
  background:#3fae9a26;
  color:#fff;
}

/* The course bar sits flush on the head's bottom edge, the way the window's own
   scroll indicator does — not as a widget taking a row of its own. */
.samai-outline-bar{
  display:block;
  position:absolute;
  z-index:1;
  inset-inline:0;
  inset-block-end:0;
  block-size:3px;
  background:#2437711f;
  overflow:hidden;
}

.samai-outline-head .samai-outline-bar{background:#ffffff1f}

.samai-outline-bar > i{
  display:block;
  width:0;
  block-size:100%;
  background:linear-gradient(to left,var(--samai-teal),var(--samai-green));
  transition:width var(--samai-duration) ease;
}

/* ── the handle ────────────────────────────────────────────────────────────── */

/* One unit hanging on the edge: the lesson before, the mark that pulls the
   panel out, and the lesson after.

   It parks on the margin with only a sliver showing, so it costs a phone almost
   no width, and comes out when it is reached for. */
/* The peek is what stays on screen when it is parked, and it is deliberately
   wider than the sliver it used to be: it cuts through the mark rather than
   stopping short of it, so what hangs on the edge is legibly the course icon
   and not an unexplained tab. The rail narrowed to pay for it. */
.samai-outline-rail{
  --samai-rail-peek:24px;
  --samai-rail-reach:24px;
  display:flex;
  position:fixed;
  z-index:95;
  flex-direction:column;
  inset-block-start:50%;
  left:0;
  border:1.5px solid var(--samai-border);
  border-left:0;
  border-top-right-radius:var(--samai-radius-md);
  border-bottom-right-radius:var(--samai-radius-md);
  background:var(--samai-surface);
  box-shadow:10px 0 26px #2437711f;
  transform:translateY(-50%) translateX(calc(-1 * (100% - var(--samai-rail-peek))));
  transition:left var(--samai-outline-ease),transform var(--samai-outline-ease),opacity var(--samai-duration-fast) ease,box-shadow var(--samai-duration-fast) ease;
}

/* A sliver is a poor target for a pointer and a worse one for a thumb, so the
   rail reaches past its own edge, and the pseudo hits as the rail itself.
   It sits strictly outside the rail: an absolutely positioned pseudo paints
   over static children, so covering the rail would swallow every button. */
.samai-outline-rail::before{
  content:"";
  position:absolute;
  inset-block:-10px;
  left:100%;
  inline-size:var(--samai-rail-reach);
}

.samai-outline-rail:hover,
.samai-outline-rail:focus-within,
.samai-outline-rail.is-out{
  box-shadow:14px 0 32px #24377133;
  transform:translateY(-50%) translateX(0);
}

/* An outset focus ring on a rail sitting against the edge would fall off it. */
.samai-outline-rail :focus-visible{outline-offset:-3px}

/* Beside an open panel it is a close control, not something parked. */
body[data-outline="open"] .samai-outline-rail{
  left:min(var(--samai-outline-width),86vw);
  transform:translateY(-50%) translateX(0);
}

.samai-outline-tab{
  display:grid;
  place-items:center;
  inline-size:44px;
  block-size:48px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}

.samai-outline-tab img{
  inline-size:26px;
  block-size:26px;
}

.samai-outline-step{
  display:grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  color:var(--samai-primary);
  font-size:var(--samai-text-2xs);
  text-decoration:none;
  transition:background var(--samai-duration-fast) ease,color var(--samai-duration-fast) ease;
}

.samai-outline-step:hover{background:#3fae9a1a;color:var(--samai-teal-dark)}

.samai-outline-step[aria-disabled="true"]{
  opacity:.3;
  color:var(--samai-muted);
  pointer-events:none;
}

/* The rail no longer clips, so the end controls carry its corners themselves —
   the same two the rail rounds, on the side facing the lesson. */
.samai-outline-previous{
  border-block-end:1px solid var(--samai-border);
  border-top-right-radius:var(--samai-radius-md);
}

.samai-outline-next{
  border-block-start:1px solid var(--samai-border);
  border-bottom-right-radius:var(--samai-radius-md);
}

.samai-outline-scrim{
  position:fixed;
  z-index:85;
  inset:0;
  opacity:0;
  background:var(--samai-dark);
  pointer-events:none;
  transition:opacity var(--samai-outline-ease);
}

body[data-outline="open"] .samai-outline-scrim{
  opacity:.42;
  pointer-events:auto;
}

/* ── modules ───────────────────────────────────────────────────────────────── */

.samai-outline-modules{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:var(--samai-space-2);
  min-block-size:0;
  padding:var(--samai-space-3);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

/* A module is a link to its own opening lesson with the rest of its lessons
   under it, and only the module you are reading shows that list. Nothing here
   is a disclosure any more: there is no control to toggle and no state to
   remember, so the outline follows where you are instead of being arranged. */
.samai-outline-module{
  border:1.5px solid transparent;
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface-soft);
  transition:border-color var(--samai-duration-fast) ease,background var(--samai-duration-fast) ease;
}

.samai-outline-module.is-current{
  border-color:#3fae9a45;
  background:var(--samai-surface);
}

.samai-outline-module .samai-outline-lessons{display:none}
.samai-outline-module.is-current .samai-outline-lessons{display:flex}

.samai-outline-module-head{
  display:flex;
  align-items:center;
  gap:var(--samai-space-3);
  min-block-size:44px;
  padding:var(--samai-space-2) var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  color:inherit;
  text-decoration:none;
}

a.samai-outline-module-head{cursor:pointer}
a.samai-outline-module-head:hover{background:#3fae9a12}
.samai-outline-module-head:focus-visible{outline:3px solid #3fae9a73;outline-offset:-2px}
.samai-outline-module-head.is-current{background:#2437711a}

/* The module number sits inside its own progress: a conic sweep for the share
   of the module finished, over a track, with the number on the disc in the
   middle. Clockwise in both directions — a ring reads as a clock, and clocks
   are not mirrored. */
.samai-outline-number{
  display:grid;
  flex:none;
  place-items:center;
  inline-size:34px;
  block-size:34px;
  border-radius:50%;
  background:conic-gradient(var(--samai-teal) calc(var(--samai-ring,0) * 1%),#2437711f 0);
  transition:--samai-ring var(--samai-duration) ease;
}

.samai-outline-module.is-complete .samai-outline-number{
  background:conic-gradient(var(--samai-success) calc(var(--samai-ring,0) * 1%),#2437711f 0);
}

/* White, so the sweep is the only thing carrying colour and the number stays
   legible against it. */
.samai-outline-number > i{
  display:grid;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  border-radius:50%;
  background:#fff;
  color:var(--samai-primary);
  font-size:var(--samai-text-2xs);
  font-style:normal;
  font-weight:900;
}

.samai-outline-module.is-complete .samai-outline-number > i{color:var(--samai-success)}

.samai-outline-module-title{
  flex:1 1 auto;
  min-inline-size:0;
  color:var(--samai-primary);
  font-size:var(--samai-text-sm);
  font-weight:900;
  line-height:var(--samai-leading-snug);
}

/* ── lessons ───────────────────────────────────────────────────────────────── */

.samai-outline-lessons{
  display:flex;
  flex-direction:column;
  gap:var(--samai-space-hair);
  margin:0;
  padding:0 var(--samai-space-3) var(--samai-space-3);
  list-style:none;
}

.samai-outline-lesson{
  display:flex;
  align-items:center;
  gap:var(--samai-space-1);
}

.samai-outline-mark{
  display:grid;
  flex:none;
  place-items:center;
  inline-size:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:#95a2b1;
  font-size:16px;
  cursor:pointer;
  transition:color var(--samai-duration-fast) ease,transform var(--samai-duration-fast) ease;
}

.samai-outline-mark:hover{color:var(--samai-teal);transform:scale(1.14)}
.samai-outline-lesson[data-state="seen"] .samai-outline-mark{color:var(--samai-teal)}
.samai-outline-lesson[data-state="done"] .samai-outline-mark{color:var(--samai-success)}

.samai-outline-link{
  display:flex;
  position:relative;
  flex:1 1 auto;
  align-items:center;
  gap:var(--samai-space-2);
  min-block-size:40px;
  min-inline-size:0;
  padding:var(--samai-space-2) var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  color:var(--samai-ink);
  font-size:13.5px;
  font-weight:700;
  line-height:var(--samai-leading-snug);
  text-decoration:none;
  transition:background var(--samai-duration-fast) ease,color var(--samai-duration-fast) ease;
}

a.samai-outline-link:hover{background:#3fae9a1a;color:var(--samai-primary)}
span.samai-outline-link{color:var(--samai-muted);cursor:default}

.samai-outline-lesson-title{flex:1 1 auto;min-inline-size:0}
.samai-outline-lesson[data-state="done"] .samai-outline-lesson-title{color:var(--samai-muted)}

.samai-outline-lesson.is-current .samai-outline-link{
  background:#2437711a;
  color:var(--samai-primary);
}

.samai-outline-lesson.is-current .samai-outline-link::before{
  content:"";
  position:absolute;
  inset-block:7px;
  inset-inline-start:0;
  inline-size:3px;
  border-radius:999px;
  background:var(--samai-teal);
}

.samai-outline-flag{
  flex:none;
  padding:var(--samai-space-hair) var(--samai-space-2);
  border-radius:999px;
  background:#e0a12826;
  color:#8a6110;
  font-size:var(--samai-text-3xs);
  font-weight:900;
}

/* ── the standalone index ──────────────────────────────────────────────────── */

/* dist/index.html has no lesson under it — it is only ever the outline, so the
   panel leaves the edge and becomes the page. */
body[data-outline="page"] .samai-course-outline{
  position:static;
  inline-size:min(760px,calc(100% - (var(--samai-gutter) * 2)));
  margin-inline:auto;
  padding-block:var(--samai-space-10) var(--samai-space-12);
  transform:none;
}

body[data-outline="page"] .samai-outline{
  block-size:auto;
  border:1.5px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  box-shadow:var(--samai-shadow);
}

body[data-outline="page"] .samai-outline-modules{overflow:visible}

/* Collapsing to one module suits a panel sitting next to the lesson you are
   reading. The standalone index is not that: it is the course itself, and a
   table of contents that hides five modules out of six is no longer one. */
body[data-outline="page"] .samai-outline-lessons{display:flex}

body[data-outline="page"] .samai-outline-rail,
body[data-outline="page"] .samai-outline-scrim{display:none}

@media (prefers-reduced-motion:reduce){
  .samai-course-outline,
  .samai-outline-rail,
  .samai-outline-step,
  .samai-outline-scrim,
  .samai-outline-bar > i,
  .samai-outline-number,
  .samai-outline-mark,
  .samai-outline-module,
  .samai-outline-link{transition:none}
  .samai-outline-mark:hover{transform:none}
}