/* =====================================================================================================================================
 * learn.css — Learn: the tutorial's paths and lessons (views/learn.js), the practice beside the real screens (views/practice.js), the
 * drawings (ui/learn_art.js), the demonstration's pointer (ui/show_me.js), the words in place (ui/coach.js). Every colour and length is
 * css/tokens.css's; the side columns are the one layout's (ui/split.js, css/layout.css); motion is opacity and transform only, in the
 * motion tokens' time (0 under prefers-reduced-motion), and nothing moves while it rests.
 * ===================================================================================================================================*/

/* --- the pages ----------------------------------------------------------------------------------------------------------------------- */
.rms-learn-pages, .rms-learn-practice-host, .rms-learn-host { min-width: 0; }
.rms-learn-practice-host, .rms-learn-host { container: rms-learn / inline-size; }
.rms-learn { color: var(--c-text); }
.rms-learn-split { align-items: flex-start; }
.rms-learn-side { padding-block: var(--g-space-2); }
.rms-learn-side-title { margin: 0 0 var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-learn-path-list { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
.rms-learn-path-go {
  display: grid; grid-template-columns: auto minmax(max-content, 1fr) auto; grid-template-areas: "icon name count" "icon bar bar"; align-items: center;
  column-gap: var(--g-space-2); row-gap: var(--g-space-1); width: 100%; padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid transparent;
  border-radius: var(--g-radius-md); background: none; color: var(--c-text); font: inherit; text-align: start; cursor: pointer;
}
.rms-learn-path-go:hover { background: var(--c-hover); }
.rms-learn-path-go.is-on { border-color: var(--c-border); background: var(--c-surface); box-shadow: var(--c-shadow-1); }
.rms-learn-path-go > .rms-icon { grid-area: icon; width: var(--g-icon-md, var(--g-icon-sm)); height: var(--g-icon-md, var(--g-icon-sm)); color: var(--c-accent); }
.rms-learn-path-name { grid-area: name; font-weight: var(--t-weight-medium); white-space: nowrap; } /* its track never narrower than it: the side widens */
.rms-learn-path-count { grid-area: count; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-learn-path-go > .rms-learn-bar { grid-area: bar; }

.rms-learn-bar { display: block; width: 100%; min-width: var(--g-learn-bar-w); height: var(--g-learn-bar-h); border-radius: var(--g-learn-bar-h); background: var(--c-elevated); overflow: hidden; }
.rms-learn-bar-fill { display: block; width: var(--learn-share); height: 100%; border-radius: inherit; background: var(--c-ok); }

.rms-learn-path { display: grid; gap: var(--g-space-4); min-width: 0; }
.rms-learn-path-head { display: grid; gap: var(--g-space-1); }
.rms-learn-path-title { display: flex; align-items: center; gap: var(--g-space-2); margin: 0; font-size: var(--t-size-xl); }
.rms-learn-path-title > .rms-icon { color: var(--c-accent); }
.rms-learn-path-for { margin: 0; color: var(--c-text-muted); }
.rms-learn-path-lede { margin: 0; line-height: var(--t-lh-text); max-inline-size: var(--g-prose-measure); }
.rms-learn-lessons { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-learn-lesson {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4);
  border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface);
}
.rms-learn-lesson.is-done { border-left: var(--g-tone-bar) solid var(--c-ok); }
.rms-learn-lesson.is-started { border-left: var(--g-tone-bar) solid var(--c-accent); }
.rms-learn-lesson-n, .rms-learn-step-n {
  display: inline-grid; place-items: center; width: var(--g-learn-step-n); height: var(--g-learn-step-n); border-radius: var(--g-round);
  background: var(--c-elevated); color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm);
}
.rms-learn-lesson-words { display: grid; gap: var(--g-space-1); min-width: 0; }
.rms-learn-lesson-title { padding: 0; border: 0; background: none; color: var(--c-accent); font: inherit; font-weight: var(--t-weight-semibold); text-align: start; cursor: pointer; }
.rms-learn-lesson-title:hover { text-decoration: underline; }
.rms-learn-lesson-lede { margin: 0; color: var(--c-text-muted); }
.rms-learn-lesson-meta { display: inline-flex; align-items: center; gap: var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-sm); white-space: nowrap; }
.rms-learn-lesson-acts { display: inline-flex; gap: var(--g-space-1); }
.rms-learn-state { padding: 0 var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-elevated); color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-learn-state.is-done { background: var(--c-learn-done); color: var(--c-ok); }
.rms-learn-state.is-started { background: var(--c-learn-why); color: var(--c-accent); }
.rms-learn-quiz-call {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4);
  border: var(--g-border) dashed var(--c-border-strong); border-radius: var(--g-radius-md);
}
.rms-learn-quiz-title { margin: 0; font-weight: var(--t-weight-semibold); }
.rms-learn-quiz-sub { margin: 0; color: var(--c-text-muted); }

/* a lesson's page: one wide sheet, its steps one after another */
.rms-learn-sheet { display: grid; gap: var(--g-space-4); min-width: 0; padding-block: var(--g-space-2) var(--g-space-6); }
.rms-learn-lede { margin: 0; font-size: var(--t-size-md); line-height: var(--t-lh-text); max-inline-size: var(--g-prose-measure); }
.rms-learn-manual { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-learn-steps { display: grid; gap: var(--g-space-5); }
/* a step: its words, and its drawing beside them while the sheet holds both, under them when it does not */
.rms-learn-step { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--g-space-3) var(--g-space-5); min-width: 0; }
.rms-learn-step-words { display: grid; flex: 1 1 var(--g-learn-words-min); gap: var(--g-space-2); min-width: 0; }
.rms-learn-step > .rms-art { flex: 1 1 var(--g-learn-art-min); }
.rms-learn-step-head { display: flex; align-items: center; gap: var(--g-space-2); }
.rms-learn-step-title { margin: 0; font-size: var(--t-size-lg); }
.rms-learn-step-of { margin-left: auto; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); white-space: nowrap; }
.rms-learn-step-text { margin: 0; line-height: var(--t-lh-text); max-inline-size: var(--g-prose-measure); }
.rms-learn-callout { display: grid; gap: var(--g-space-1); padding: var(--g-space-2) var(--g-space-3); border-left: var(--g-tone-bar) solid var(--c-accent); border-radius: var(--g-radius-sm); background: var(--c-learn-why); }
.rms-learn-callout.is-mistake { border-left-color: var(--c-err); background: var(--c-learn-mistake); }
.rms-learn-callout-label { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-learn-callout-text { margin: 0; line-height: var(--t-lh-text); max-inline-size: var(--g-prose-measure); }
.rms-learn-task { display: grid; gap: var(--g-space-1); padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) dashed var(--c-learn-sandbox-edge); border-radius: var(--g-radius-md); background: var(--c-learn-task); }
.rms-learn-task.is-done { border-style: solid; border-color: var(--c-ok); background: var(--c-learn-done); }
.rms-learn-task-text { margin: 0; font-weight: var(--t-weight-medium); line-height: var(--t-lh-text); }
.rms-learn-task-state { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-learn-task.is-done .rms-learn-task-state { color: var(--c-ok); font-weight: var(--t-weight-semibold); }
.rms-learn-task-done { margin: 0; line-height: var(--t-lh-text); }
.rms-learn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); padding-top: var(--g-space-3); border-top: var(--g-border) solid var(--c-border); }
.rms-learn-fill { flex: 1; }

/* a word of the trade in place: its card opens on it (core/pops.js `term`) */
.rms-term { text-decoration: underline dotted var(--c-learn-term-line); text-underline-offset: var(--g-term-offset); cursor: help; }
.rms-term:focus-visible { outline: var(--g-border-strong) solid var(--c-focus); outline-offset: var(--g-border); border-radius: var(--g-radius-sm); }

/* the questions */
.rms-learn-q { display: grid; gap: var(--g-space-2); margin: 0; padding: var(--g-space-3) var(--g-space-4); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-learn-q-ask { padding: 0; font-weight: var(--t-weight-semibold); }
.rms-learn-q-option { display: flex; align-items: baseline; gap: var(--g-space-2); cursor: pointer; }
.rms-learn-q-verdict { padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-sm); background: var(--c-learn-mistake); line-height: var(--t-lh-text); }
.rms-learn-q-verdict[data-ok="true"] { background: var(--c-learn-done); }
.rms-learn-quiz-score { margin: 0; font-weight: var(--t-weight-semibold); }

/* the glossary */
.rms-learn-find { min-width: var(--g-col-narrow); }
.rms-learn-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--g-learn-term-min), 100%), 1fr)); gap: 0 var(--g-space-5); }
.rms-learn-term { display: grid; gap: var(--g-space-1); padding: var(--g-space-3) var(--g-space-4); border-bottom: var(--g-border) solid var(--c-border); }
.rms-learn-term-name { margin: 0; font-size: var(--t-size-lg); }
.rms-learn-term-text, .rms-learn-term-note { margin: 0; line-height: var(--t-lh-text); max-inline-size: var(--g-prose-measure); }
.rms-learn-term-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-learn-link { padding: 0; border: 0; background: none; color: var(--c-accent); font: inherit; cursor: pointer; }
.rms-learn-link:hover { text-decoration: underline; }

/* --- the drawings --------------------------------------------------------------------------------------------------------------- */
.rms-art { display: grid; gap: var(--g-space-2); margin: 0; padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); min-width: 0; }
.rms-art-svg { display: block; width: 100%; height: auto; max-block-size: var(--g-art-max-h); overflow: visible; }
.rms-art-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title again" "caption again"; align-items: center; gap: var(--g-space-1) var(--g-space-3); }
.rms-art-title { grid-area: title; font-weight: var(--t-weight-semibold); font-size: var(--t-size-sm); }
.rms-art-caption { grid-area: caption; margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-small); }
.rms-art-again { grid-area: again; font-size: var(--t-size-sm); }
.rms-art-el { opacity: 0; transform: translateY(var(--g-space-1)); transition: opacity var(--g-motion-base) var(--g-ease), transform var(--g-motion-base) var(--g-ease); }
.rms-art-el.is-on { opacity: 1; transform: none; }
.rms-art-card { fill: color-mix(in srgb, var(--art-tone) var(--c-mix-wash), var(--c-surface)); stroke: var(--art-tone); stroke-width: var(--g-art-stroke); }
.rms-art-el.is-frame .rms-art-card { fill: none; stroke-dasharray: 6 4; }
.rms-art-el.is-empty .rms-art-card { stroke-dasharray: 3 4; }
.rms-art-name { fill: var(--c-text); font-family: var(--t-sans); font-size: var(--g-art-font); font-weight: var(--t-weight-semibold); }
.rms-art-name.is-corner { fill: var(--c-text-muted); font-weight: var(--t-weight-medium); }
.rms-art-sub { fill: var(--c-text-muted); font-family: var(--t-sans); font-size: var(--g-art-small); }
.rms-art-word { fill: var(--art-tone); font-family: var(--t-sans); font-size: var(--g-art-font); font-weight: var(--t-weight-medium); }
.rms-art-word.is-small { font-size: var(--g-art-small); }
.rms-art-word.is-mono { font-family: var(--t-mono); }
.rms-art-word.is-tone-muted { fill: var(--c-text-muted); }
.rms-art-stroke { fill: none; stroke: var(--art-tone); stroke-width: var(--g-art-stroke); }
.rms-art-head { fill: none; stroke: var(--art-tone); stroke-width: var(--g-art-stroke); stroke-linecap: round; stroke-linejoin: round; }
.rms-art-el.is-dash .rms-art-stroke { stroke-dasharray: 6 5; }
.rms-art-dot { fill: color-mix(in srgb, var(--art-tone) var(--c-mix-halo), var(--c-surface)); stroke: var(--art-tone); stroke-width: var(--g-art-stroke); }
.rms-art-ring { fill: none; stroke: var(--art-tone); stroke-width: var(--g-art-ring); }
.rms-art-mark-ground { fill: var(--c-surface); stroke: var(--art-tone); stroke-width: var(--g-art-stroke); }
.rms-art-glyph { fill: none; stroke: var(--art-tone); stroke-width: var(--g-art-ring); stroke-linecap: round; stroke-linejoin: round; }
.is-tone-ok { --art-tone: var(--c-art-ok); }
.is-tone-warn { --art-tone: var(--c-art-warn); }
.is-tone-err { --art-tone: var(--c-art-err); }
.is-tone-base { --art-tone: var(--c-art-base); }
.is-tone-review { --art-tone: var(--c-art-review); }
.is-tone-working { --art-tone: var(--c-art-working); }
.is-tone-controlled { --art-tone: var(--c-art-controlled); }
.is-tone-proven { --art-tone: var(--c-art-proven); }
.is-tone-muted { --art-tone: var(--c-art-muted); }
.is-tone-accent { --art-tone: var(--c-art-accent); }
.is-tone-person { --art-tone: var(--c-art-person); }
.is-tone-c1 { --art-tone: var(--c-art-c1); }
.is-tone-c2 { --art-tone: var(--c-art-c2); }
.is-tone-c3 { --art-tone: var(--c-art-c3); }
.is-tone-c4 { --art-tone: var(--c-art-c4); }
.rms-art-sha { display: grid; gap: var(--g-space-1); }
.rms-art-sha-label { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-art-sha-out { overflow-wrap: anywhere; color: var(--c-accent); font-size: var(--t-size-sm); }

/* --- the practice: the banner, the real frame and the coach beside it ---------------------------------------------------------- */
.rms-learn-practice { display: grid; grid-template-rows: auto minmax(0, 1fr); height: var(--g-frame-h); min-width: 0; }
.rms-learn-banner { display: grid; min-width: 0; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-4) 0; border-bottom: var(--g-border-strong) solid var(--c-learn-sandbox-edge); background: var(--c-learn-sandbox); }
.rms-learn-banner-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-3); }
.rms-learn-banner-mark { display: inline-grid; place-items: center; color: var(--c-warn); }
.rms-learn-banner-words { display: grid; flex: 1 1 0; min-width: min(var(--g-col-mid), 100%); }
.rms-learn-banner-title { margin: 0; font-weight: var(--t-weight-semibold); }
.rms-learn-banner-sub { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-learn-persona { display: inline-flex; align-items: center; gap: var(--g-space-2); min-width: 0; max-inline-size: 100%; }
.rms-learn-persona-pick { min-width: 0; }
.rms-learn-persona-label { color: var(--c-text-muted); font-size: var(--t-size-sm); white-space: nowrap; }
.rms-learn-wins { display: flex; gap: var(--g-space-1); overflow-x: auto; scrollbar-width: thin; }
.rms-learn-wins .rms-tab { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-learn-body { height: 100%; min-height: 0; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.rms-learn-stage { display: grid; min-width: 0; min-height: 0; }
.rms-learn-stage > .rms-app { --g-frame-h: 100%; height: 100%; min-height: 0; }
.rms-learn-coach { height: 100%; overflow-y: auto; border-left: var(--g-border) solid var(--c-border); background: var(--c-surface); }
.rms-learn-coach-in { display: grid; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4) var(--g-space-6); }
.rms-learn-coach-path { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-learn-coach-title { margin: 0; font-size: var(--t-size-lg); }
.rms-learn-coach-tools, .rms-learn-coach-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); }
.rms-learn-coach-acts { padding-top: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }
.rms-learn-show-line { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-learn-show-line:empty { display: none; }
.rms-learn-coach .rms-learn-step-n { display: none; }
.rms-learn-coach .rms-learn-step-text, .rms-learn-coach .rms-learn-callout-text, .rms-learn-coach .rms-learn-task-text, .rms-learn-coach .rms-learn-task-done { font-size: var(--t-size-base); }
.rms-learn-art-open { justify-self: start; }
.rms-learn-art-modal .rms-art { border: 0; padding: 0; }

/* the ring a step points with: no veil, the screen stays usable; it arrives with a short scale and fade, then rests */
.rms-learn-ring {
  position: fixed; left: var(--ring-x); top: var(--ring-y); width: var(--ring-w); height: var(--ring-h); z-index: var(--g-z-menu); pointer-events: none;
  border: var(--g-learn-ring-w) solid var(--c-warn); border-radius: var(--g-radius-md); box-shadow: 0 0 0 var(--g-space-1) color-mix(in srgb, var(--c-warn) var(--c-mix-halo), transparent);
  opacity: 0; transform: scale(1.04); transition: opacity var(--g-motion-base) var(--g-ease), transform var(--g-motion-base) var(--g-ease);
}
.rms-learn-ring.is-on { opacity: 1; transform: none; }

/* the demonstration's pointer: an arrow that moves by transform, a short ring when it presses */
.rms-show-pointer {
  position: fixed; left: 0; top: 0; z-index: var(--g-z-tour); width: var(--g-show-pointer); height: var(--g-show-pointer); pointer-events: none;
  transform: translate(var(--show-x, 0), var(--show-y, 0)); transition: transform var(--g-motion-show) var(--g-ease);
}
.rms-show-arrow { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--c-text); stroke: var(--c-surface); stroke-width: var(--g-art-stroke); stroke-linejoin: round; filter: drop-shadow(var(--c-shadow-pop)); }
.rms-show-press {
  position: absolute; left: calc(var(--g-show-press) / -2); top: calc(var(--g-show-press) / -2); width: var(--g-show-press); height: var(--g-show-press);
  border: var(--g-learn-ring-w) solid var(--c-warn); border-radius: var(--g-round); opacity: 0; transform: scale(0.4);
  transition: opacity var(--g-motion-fast) var(--g-ease), transform var(--g-motion-fast) var(--g-ease);
}
.rms-show-pointer.is-pressing .rms-show-press { opacity: 1; transform: none; }