/* Styles for left-pane views.
 *
 * OWNED BY THE WAVE-B FEATURE BUILDERS. index.html and parent.html already
 * link this file, so a view module can add its rules here without touching
 * the page markup (which belongs to A3).
 *
 * House rules, enforced by test/design-tokens.test.js:
 *   - no colour literals; only var(--token) from styles/tokens.css
 *   - scope every rule under `.view[data-view="<your-id>"]`
 *   - reach for a design-system primitive before writing new CSS
 */

.view > * + * { margin-top: var(--stack-gap); }

.view .view-section {
  display: grid;
  gap: var(--stack-gap);
}

.view .view-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
  align-items: center;
}

/* ================================================================== *
 * B1 — welcome, sign-in, sign-up, onboarding and the Account surface
 *
 * The flow overlay is not a left-pane view, so its rules are scoped under
 * `.overlay-flow` / `.flow-*` rather than `.view[data-view=…]`. The Account
 * section's rules are scoped under `.view[data-view="account"]` as usual, and
 * apply unchanged when the same content renders inside the account sheet.
 *
 * Everything here works at 320px: the card is fluid, the grids collapse to one
 * column, and the footer wraps.
 * ================================================================== */

.overlay-flow { align-items: flex-start; overflow: auto; }

.flow-card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  width: min(36rem, 100%);
  margin: auto;
  padding: var(--space-8) var(--space-6);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--overlay-bg);
  box-shadow: var(--shadow-lift);
}

.flow-head { display: grid; gap: var(--space-2); }
.flow-title { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.flow-hint { color: var(--muted); line-height: var(--leading-body); max-width: 46ch; }
.flow-hint[hidden] { display: none; }

.flow-progress { display: flex; align-items: center; gap: var(--space-3); }
.flow-progress[hidden] { display: none; }
.flow-position { font-size: var(--text-sm); color: var(--muted); }

.flow-body { display: grid; gap: var(--space-4); }
.flow-status:empty { display: none; }
.flow-busy { color: var(--muted); font-size: var(--text-sm); }
.flow-note { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-body); }
.flow-not-an-exam { display: flex; align-items: flex-start; gap: var(--space-2); }

.flow-foot { border-top: var(--border-width) solid var(--divider); padding-top: var(--space-4); }
.flow-pane[hidden] { display: none; }

/* ---- profile picker ---------------------------------------------- */

.flow-profiles {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow-profiles li { display: flex; align-items: center; gap: var(--space-2); }

.flow-profile {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  color: var(--fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.flow-profile:hover { border-color: var(--accent); }
.flow-profile-face { font-size: var(--text-2xl); line-height: 1; }
.flow-profile-name { font-weight: var(--weight-medium); }

/* ---- choices and avatars ----------------------------------------- */

.flow-choices-wrap, .flow-avatars-wrap { display: grid; gap: var(--space-2); }
.flow-choices-label { font-weight: var(--weight-medium); }
.flow-choices { display: grid; gap: var(--space-2); }

.flow-choice {
  display: flex;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  cursor: pointer;
}
.flow-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-ghost); }
.flow-choice:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.flow-choice-body { display: grid; gap: var(--space-1); }
.flow-choice-title { font-weight: var(--weight-medium); }
.flow-choice-hint { font-size: var(--text-sm); color: var(--muted); }

.flow-avatars { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.flow-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-lg);
  height: var(--control-h-lg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
  cursor: pointer;
}
.flow-avatar:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.flow-avatar:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.flow-avatar-face { font-size: var(--text-xl); line-height: 1; }

.flow-ideas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.flow-ideas .chip[data-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }
.flow-wants { width: 100%; }
.flow-greeting { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); }

/* ---- a labelled control that is not a form field ----------------- */

/* `SegmentedControl` carries its question as an `aria-label`, which is
   invisible. Beside two questions that each had a visible label and a hint,
   the third was four unexplained pills. These give it the same furniture. */
.flow-field { display: grid; gap: var(--space-2); }
.flow-field-label { font-weight: var(--weight-medium); }
.flow-field-hint { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-body); max-width: 46ch; }

/* Four options, one of them twice the width of its siblings and wrapping to
   two lines, is a row of pills that reads as broken. In a flow they share the
   width evenly, wrap as a block at 320px, and stay legible at 200% zoom. */
.overlay-flow .segmented {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.overlay-flow .segmented-item {
  flex: 1 1 10rem;
  min-height: var(--flow-tap);
  justify-content: center;
  text-align: center;
  white-space: normal;
}

/* ---- controls a child has to be able to hit ---------------------- */

/*
 * Every control in a flow is at least 44px tall. The default `--control-h` is
 * 34px in the classic themes, which is comfortable with a mouse and not with
 * a trackpad, a tablet or a six-year-old's aim — and this is the one surface
 * where a child is asked to press things before anything else has happened.
 */
.overlay-flow { --flow-tap: max(var(--tap-min), 2.75rem); }
.overlay-flow .btn,
.overlay-flow .input,
.overlay-flow .select,
.overlay-flow .flow-profile { min-height: var(--flow-tap); }

/*
 * The way out of a step — "Not now", "I will decide later", "That is not me" —
 * was a `quiet` button: transparent, borderless, grey. Next to a solid primary
 * it reads as a caption rather than as the other choice, and on the
 * secret-word step it is the choice most children should be making. It keeps
 * its lower weight; it stops pretending not to be a control.
 */
.overlay-flow .btn[data-variant="quiet"] {
  --btn-border: var(--border);
  --btn-fg: var(--fg);
  text-decoration: none;
}
.overlay-flow .btn[data-variant="quiet"]:hover {
  --btn-border: var(--accent);
  --btn-bg: var(--accent-ghost);
}

/* ---- the wrong-audience gate ------------------------------------- */

/*
 * A grown-up signed in at `/` meets `createGuardianHandoverGate`. The shell
 * underneath is not theirs, so it is not shown behind the scrim either: it is
 * a workbench, a Leia pane and a rail full of controls that would all fail
 * against the server, and a picture of them is an invitation to try.
 */
html[data-audience-mismatch] .shell { visibility: hidden; }
html[data-audience-mismatch] .overlay-welcome .overlay-scrim { opacity: 1; }

/* ---- the grown-up desk's account launcher ------------------------ */

/* In the desk header, as a member of that flex row. The floating variant
   below is the fallback for a page with no header, and it is `position:
   fixed`, which is how it came to paint over the last 18px of "Back to the
   workbench" and render it as "Back to the workbenc". */
.identity-desk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  color: var(--fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.identity-desk:hover { border-color: var(--accent); }

.identity-floating {
  position: fixed;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.identity-floating:hover { border-color: var(--accent); }

/* ---- account ------------------------------------------------------ */

.view[data-view="account"] .account-stack { display: grid; gap: var(--stack-gap); }
.view[data-view="account"] .account-profile { display: grid; gap: var(--space-4); }
.view[data-view="account"] .account-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.view[data-view="account"] .account-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.view[data-view="account"] .account-handle { font-size: var(--text-sm); color: var(--muted); }
.view[data-view="account"] .account-handle code {
  font-family: var(--font-mono);
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}
.view[data-view="account"] .account-secret-form { display: grid; gap: var(--space-3); }
.view[data-view="account"] .account-code-slot:empty { display: none; }
.view[data-view="account"] .account-code {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-bold);
}

/* ---- 320px -------------------------------------------------------- */

@media (max-width: 30rem) {
  .overlay-flow { padding: var(--space-2); }
  .flow-card { padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); }
  .flow-title { font-size: var(--text-xl); }
  .flow-profiles li { flex-wrap: wrap; }
  .identity-floating { position: static; width: 100%; justify-content: center; }
  /* In a header that has already wrapped, a pill that refuses to wrap is the
     one thing that can still push the row wider than the window. */
  .identity-desk { white-space: normal; flex: 1 1 100%; justify-content: center; }
}

/* ==================================================================
 * B2 — Projects, Files and History
 * ------------------------------------------------------------------
 * Scoped to the three views this builder owns. Colours are tokens only.
 * ================================================================== */

/* -- shared ------------------------------------------------------- */

.view .git-disclosure {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.view .git-disclosure > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
  color: var(--muted);
  padding: var(--space-1) 0;
}

.view .git-disclosure > summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.view .git-disclosure-body > * + * { margin-top: var(--space-2); }

/* -- projects ----------------------------------------------------- */

.view[data-view="projects"] .projects-open,
.view[data-view="projects"] .projects-requests { display: grid; gap: var(--stack-gap); }

.view[data-view="projects"] .projects-open:empty,
.view[data-view="projects"] .projects-requests:empty { display: none; }

.view[data-view="projects"] .projects-git { display: grid; gap: var(--space-2); }

/* -- files -------------------------------------------------------- */

.view[data-view="files"] .files-body { min-height: 4rem; }

.view[data-view="files"] .file-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.view[data-view="files"] .file-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  padding-inline-start: calc(var(--space-2) + (var(--depth, 0) * var(--space-4)));
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--fg);
  background: transparent;
}

.view[data-view="files"] .file-row:hover { background: var(--accent-ghost); }

.view[data-view="files"] .file-row[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: var(--weight-medium);
}

.view[data-view="files"] .file-row:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: -2px;
}

.view[data-view="files"] .file-twist {
  flex: 0 0 auto;
  width: 1em;
  text-align: center;
  color: var(--muted);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.view[data-view="files"] .file-row[aria-expanded="true"] > .file-twist { transform: rotate(90deg); }

.view[data-view="files"] .file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- history ------------------------------------------------------ */

.view[data-view="history"] .history-controls { margin-bottom: var(--stack-gap); }
.view[data-view="history"] .history-note { color: var(--muted); font-size: var(--text-sm); }
.view[data-view="history"] .history-timeline > * + * { margin-top: var(--stack-gap); }

.view[data-view="history"] .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--stack-gap);
}

.view[data-view="history"] .timeline-item {
  position: relative;
  padding: var(--space-3);
  padding-inline-start: var(--space-5);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}

.view[data-view="history"] .timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-2);
  top: var(--space-4);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

.view[data-view="history"] .timeline-item[data-reason="automatic-safety"]::before { background: var(--muted); }

.view[data-view="history"] .timeline-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--row-gap);
}

.view[data-view="history"] .timeline-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.view[data-view="history"] .timeline-when {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}

.view[data-view="history"] .timeline-diff:empty { display: none; }
.view[data-view="history"] .timeline-diff > * + * { margin-top: var(--space-2); }
.view[data-view="history"] .diff-summary { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.view[data-view="history"] .diff-files { font-size: var(--text-sm); color: var(--muted); }

.view[data-view="history"] .diff {
  margin-top: var(--space-2);
  max-height: 22rem;
  overflow: auto;
  border: var(--border-width) solid var(--code-border);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  padding: var(--space-2) 0;
}

.view[data-view="history"] .diff:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.view[data-view="history"] .diff-line {
  display: block;
  padding: 0 var(--space-3);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--code-fg);
}

.view[data-view="history"] .diff-line[data-kind="added"] { background: var(--success-soft); color: var(--success-ink); }
.view[data-view="history"] .diff-line[data-kind="removed"] { background: var(--danger-soft); color: var(--danger-ink); }
.view[data-view="history"] .diff-line[data-kind="hunk"] { color: var(--info-ink); font-weight: var(--weight-medium); }
.view[data-view="history"] .diff-line[data-kind="meta"] { color: var(--muted); }

/* ==================================================================
 * B5 — the learner's own view of their learning
 * Sections: learn (s35) · map (s63) · evaluations (s36)
 *
 * House rules kept here: no colour literal (tokens only), every rule
 * scoped to one of the three view ids, and every layout works at
 * 320px and at 200% text zoom — hence rem-based sizing, wrapping rows
 * and no fixed pixel widths anywhere below.
 * ================================================================== */

.view[data-view="learn"] .learn-body,
[data-view="map"] .map-view-body,
.view[data-view="evaluations"] .evals-body {
  display: grid;
  gap: var(--stack-gap);
}

/* The longer "what this page is" paragraph, set below the two buttons so the
   first screen of the app leads with something to press rather than with
   something to read. Quieter than `.empty-body` above the buttons, because it
   is the explanation and not the instruction. */
.view[data-view="learn"] .empty-detail {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 48ch;
}

/* ---- shared: confidence, evidence trail, honesty notes ----------- */

.view[data-view="learn"] .evidence-trail,
[data-view="map"] .evidence-trail,
.view[data-view="evaluations"] .evidence-trail {
  margin-top: var(--space-2);
  border-top: var(--border-width) solid var(--hairline);
  padding-top: var(--space-2);
}

.view[data-view="learn"] .evidence-trail > summary,
[data-view="map"] .evidence-trail > summary,
.view[data-view="evaluations"] .evidence-trail > summary {
  cursor: pointer;
  color: var(--accent-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-1) 0;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}

.view[data-view="learn"] .evidence-trail > summary:focus-visible,
[data-view="map"] .evidence-trail > summary:focus-visible,
.view[data-view="evaluations"] .evidence-trail > summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.view[data-view="learn"] .evidence-trail-list,
[data-view="map"] .evidence-trail-list,
.view[data-view="evaluations"] .evidence-trail-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.view[data-view="learn"] .evidence-trail-item,
[data-view="map"] .evidence-trail-item,
.view[data-view="evaluations"] .evidence-trail-item {
  border-inline-start: 3px solid var(--border);
  padding-inline-start: var(--space-3);
}

.view[data-view="learn"] .evidence-trail-item[data-yours="true"],
[data-view="map"] .evidence-trail-item[data-yours="true"],
.view[data-view="evaluations"] .evidence-trail-item[data-yours="true"] {
  border-inline-start-color: var(--success);
}

.view[data-view="learn"] .evidence-what,
[data-view="map"] .evidence-what,
.view[data-view="evaluations"] .evidence-what {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.view[data-view="learn"] .evidence-meta,
[data-view="map"] .evidence-meta,
.view[data-view="evaluations"] .evidence-meta {
  margin: var(--space-1) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ---- s13 evaluation-mode banner (shared by learn and evaluations) - */

.view[data-view="learn"] .evaluation-banner,
[data-view="map"] .evaluation-banner,
.view[data-view="evaluations"] .evaluation-banner {
  border-width: 2px;
  box-shadow: var(--shadow-lift);
}

.view[data-view="learn"] .eval-banner-rules,
[data-view="map"] .eval-banner-rules,
.view[data-view="evaluations"] .eval-banner-rules {
  margin: var(--space-2) 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-1);
}

.view[data-view="learn"] .eval-banner-note,
[data-view="map"] .eval-banner-note,
.view[data-view="evaluations"] .eval-banner-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ---- s35 Learn -------------------------------------------------- */

.view[data-view="learn"] .question-card .card-body {
  display: grid;
  gap: var(--stack-gap);
}

.view[data-view="learn"] .question-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.view[data-view="learn"] .next-item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}

.view[data-view="learn"] .next-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.view[data-view="learn"] .next-why,
.view[data-view="learn"] .claim-because,
.view[data-view="learn"] .uncertain-why {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.view[data-view="learn"] .claim,
.view[data-view="learn"] .uncertain-item {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--hairline);
}

.view[data-view="learn"] .claim:last-child,
.view[data-view="learn"] .uncertain-item:last-child { border-bottom: 0; }

.view[data-view="learn"] .claim-title,
.view[data-view="learn"] .uncertain-title {
  margin: 0;
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.view[data-view="learn"] .claim-confidence,
.view[data-view="learn"] .uncertain-confidence { margin: 0; }

.view[data-view="learn"] .toward-group {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-width) dashed var(--border);
}

.view[data-view="learn"] .toward-group[data-kind="evaluation"] {
  border-style: solid;
  background: var(--accent-ghost);
}

.view[data-view="learn"] .toward-heading {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.view[data-view="learn"] .toward-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}

.view[data-view="learn"] .toward-list {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-1);
}

.view[data-view="learn"] .target-detail { display: grid; gap: var(--space-2); }
.view[data-view="learn"] .target-label {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.view[data-view="learn"] .target-extra,
.view[data-view="learn"] .target-note { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.view[data-view="learn"] .target-not-an-exam,
.view[data-view="learn"] .why-basis {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.view[data-view="learn"] .target-fixed { margin: 0; }

.view[data-view="learn"] .why-block { display: grid; gap: var(--space-2); }
.view[data-view="learn"] .why-question {
  margin: 0;
  font-weight: var(--weight-semibold);
}
.view[data-view="learn"] .why-text { margin: 0; line-height: var(--leading-body); }
.view[data-view="learn"] .why-points { margin: 0; padding-inline-start: var(--space-5); }
.view[data-view="learn"] .why-uncertainty { margin: 0; color: var(--muted); font-size: var(--text-sm); }

/* ---- s63 the map ------------------------------------------------ */

[data-view="map"] .learning-map {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

[data-view="map"] .map-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* `.map-summary` carries `.sr-only`; nothing here may give it a box back. */

[data-view="map"] .map-stack {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: stretch;
  gap: var(--space-2);
}

[data-view="map"] .map-rail {
  width: 2.25rem;
  height: 100%;
  align-self: stretch;
}

[data-view="map"] .map-rail-line {
  stroke: var(--border);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

[data-view="map"] .map-rail-arrow { fill: var(--accent); }

[data-view="map"] .map-rungs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

[data-view="map"] .map-rung-button {
  inline-size: 100%;
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  text-align: start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  min-height: var(--tap-min);
  /* Mutable by default: a dashed edge, so the route reads as provisional
   * without relying on colour alone. */
  border: 2px dashed var(--border);
}

/* The fixed destination: solid, anchored, visually heavier (s63, s3). */
[data-view="map"] .map-rung-button[data-fixed="true"] {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: var(--shadow-soft);
}

[data-view="map"] .map-rung-button[data-kind="pupil"] {
  border-style: solid;
  border-color: var(--fg-strong);
  background: var(--bg-sunken);
}

[data-view="map"] .map-rung-button:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

[data-view="map"] .map-rung-role {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

[data-view="map"] .map-rung-button[data-fixed="true"] .map-rung-role { color: var(--accent-ink); }

[data-view="map"] .map-rung-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

[data-view="map"] .map-rung-detail {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--muted);
}

[data-view="map"] .map-rung-button[data-fixed="true"] .map-rung-detail { color: var(--accent-ink); }

[data-view="map"] .map-legend {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--muted);
}

[data-view="map"] .map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

[data-view="map"] .map-detail:empty { display: none; }

[data-view="map"] .map-detail-inner {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}

[data-view="map"] .map-detail-title { margin: 0; font-size: var(--text-lg); }
[data-view="map"] .map-detail-why,
[data-view="map"] .map-detail-note { margin: 0; color: var(--muted); font-size: var(--text-sm); }
[data-view="map"] .map-detail-fixed { margin: 0; }

[data-view="map"] .map-list,
[data-view="map"] .coverage-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

[data-view="map"] .map-list-item,
[data-view="map"] .coverage-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

[data-view="map"] .map-list-title,
[data-view="map"] .coverage-item-title {
  font-weight: var(--weight-medium);
  flex: 1 1 12rem;
  min-inline-size: 0;
}

[data-view="map"] .map-list-plain,
[data-view="map"] .map-list-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  flex: 1 1 100%;
}

[data-view="map"] .coverage-groups { display: grid; gap: var(--space-4); }

[data-view="map"] .coverage-group-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

[data-view="map"] .coverage-group[data-state="evidence-contradictory"] .coverage-group-title { color: var(--warn-ink); }
[data-view="map"] .coverage-group[data-state="demonstrated-independently"] .coverage-group-title { color: var(--success-ink); }

[data-view="map"] .coverage-item .evidence-trail { flex: 1 1 100%; }

/* ---- s36 evaluations -------------------------------------------- */

.view[data-view="evaluations"] .not-an-exam { border-style: dashed; }

.view[data-view="evaluations"] .level-list,
.view[data-view="evaluations"] .upcoming-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.view[data-view="evaluations"] .level-item,
.view[data-view="evaluations"] .upcoming-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border);
}

.view[data-view="evaluations"] .level-item[data-exam-like="true"] {
  border-width: 2px;
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.view[data-view="evaluations"] .level-title,
.view[data-view="evaluations"] .upcoming-about {
  font-weight: var(--weight-semibold);
  flex: 1 1 10rem;
}

.view[data-view="evaluations"] .level-blurb,
.view[data-view="evaluations"] .upcoming-why,
.view[data-view="evaluations"] .upcoming-when {
  flex: 1 1 100%;
  font-size: var(--text-sm);
  color: var(--muted);
}

.view[data-view="evaluations"] .level-item[data-exam-like="true"] .level-blurb { color: var(--warn-ink); }

.view[data-view="evaluations"] .completed-body { display: grid; gap: var(--space-3); }

.view[data-view="evaluations"] .leia-changed-its-mind { border-width: 2px; }

.view[data-view="evaluations"] .changed-list {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.view[data-view="evaluations"] .changed-list li {
  display: grid;
  gap: var(--space-1);
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--warn);
}

.view[data-view="evaluations"] .changed-before { color: var(--muted); font-size: var(--text-sm); }
.view[data-view="evaluations"] .changed-after { font-size: var(--text-sm); }
.view[data-view="evaluations"] .changed-reassurance { margin: 0; font-size: var(--text-sm); }

.view[data-view="evaluations"] .completed-task {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  line-height: var(--leading-body);
}

.view[data-view="evaluations"] .completed-answer { margin: 0; line-height: var(--leading-body); }
.view[data-view="evaluations"] .completed-answer-label,
.view[data-view="evaluations"] .feedback-next-label { font-weight: var(--weight-semibold); }
.view[data-view="evaluations"] .completed-help,
.view[data-view="evaluations"] .completed-label {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}

.view[data-view="evaluations"] .feedback-block { display: grid; gap: var(--space-1); }

.view[data-view="evaluations"] .feedback-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.view[data-view="evaluations"] .feedback-list {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-1);
}

.view[data-view="evaluations"] .feedback-empty,
.view[data-view="evaluations"] .feedback-next { margin: 0; font-size: var(--text-sm); }
.view[data-view="evaluations"] .feedback-empty { color: var(--muted); }

.view[data-view="evaluations"] .feedback-leia {
  margin: 0;
  padding: var(--space-3);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-ghost);
  line-height: var(--leading-body);
}

.view[data-view="evaluations"] .demonstrated,
.view[data-view="evaluations"] .revisit { display: grid; gap: var(--space-1); }

.view[data-view="evaluations"] .demonstrated h5,
.view[data-view="evaluations"] .revisit h5 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.view[data-view="evaluations"] .demonstrated ul,
.view[data-view="evaluations"] .revisit ul {
  margin: 0;
  padding-inline-start: var(--space-5);
}

/* ---- narrow screens: 320px is a real target --------------------- */

@media (max-width: 24rem) {
  [data-view="map"] .map-stack { grid-template-columns: 1.25rem 1fr; }
  [data-view="map"] .map-rail { width: 1.25rem; }
  [data-view="map"] .map-rung-button { padding: var(--space-2); }
  .view[data-view="learn"] .next-item { padding: var(--space-2); }
}

/* ==================================================================== *
 * B4 — the conversation with Leia, and the developer trace panel.
 *
 * Scope: `.conv-*` inside the Leia pane, and `.view[data-view="trace"]`.
 * No colour literals; every value is a token from styles/tokens.css.
 * ==================================================================== */

/* -- mode bar and banners ------------------------------------------- */

.conv-bar {
  padding: var(--space-2) var(--space-3) 0;
}

.conv-banner {
  padding: var(--space-2) var(--space-3) 0;
}

.conv-banner[data-evaluation="true"] .callout {
  border-width: var(--focus-width);
}

.conv-eval { display: grid; gap: var(--space-1); }
.conv-eval-plain { font-size: var(--text-sm); color: var(--muted); }

/* -- turns ----------------------------------------------------------- */

.conv-turn { margin-block-end: var(--space-4); }

.conv-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-inline-start: var(--space-2);
}

.conv-notices { margin-block-start: var(--space-2); }

.conv-offers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.conv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

.conv-notes { margin-block-start: var(--space-2); }
.conv-note-summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
}
.conv-note-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.conv-note {
  font-size: var(--text-xs);
  color: var(--muted);
  padding-inline-start: var(--space-3);
  border-inline-start: var(--border-width) solid var(--divider);
}

/* -- citations ------------------------------------------------------- */

.conv-citations { margin-block-start: var(--space-2); }
.conv-citations-title {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.conv-citation-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.conv-citation { display: grid; gap: 0.1rem; }
.conv-citation-snippet { font-size: var(--text-xs); color: var(--muted); }
.conv-citation-static { font-size: var(--text-sm); color: var(--fg); }

/* A source Leia read on the open web. It leaves the app, so it looks like a
   link rather than like one of the product's own buttons, and the line under
   it names the site — a citation is not an endorsement (s49). */
.conv-citation-link {
  font-size: var(--text-sm);
  color: var(--accent);
  justify-self: start;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.conv-citation-origin { font-size: var(--text-xs); color: var(--muted); }

/* -- composer additions ---------------------------------------------- */

.conv-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-2);
}

.conv-attachment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: var(--control-h-sm);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  font-size: var(--text-xs);
}

.conv-attachment-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#leia.conv-dropping,
.conv-dropping .composer-inner {
  outline: var(--focus-width) dashed var(--accent);
  outline-offset: var(--focus-offset);
}

.conv-mentions {
  position: absolute;
  inset-inline: var(--space-3);
  bottom: 100%;
  z-index: var(--z-overlay);
  margin: 0 0 var(--space-2);
  padding: var(--space-1);
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--bg-raise);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.conv-mention {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}

.conv-mention[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.conv-mention-kind { color: var(--muted); font-size: var(--text-xs); }

.composer { position: relative; }

/* -- history expansion ------------------------------------------------ */

.conv-earlier { display: flex; justify-content: center; padding: var(--space-2) 0; }
.conv-earlier-block { display: grid; gap: var(--space-3); }

/* Opening a day from "Earlier conversations" moves the view to that message
 * and puts focus on it. Focus arrives without a key press, so `:focus-visible`
 * would not match — and a reader who has just been moved somewhere else in a
 * long transcript needs to see where they landed. */
.conv-turn[tabindex]:focus {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
.conv-earlier-label {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  text-align: center;
}
.conv-turn-earlier { opacity: 0.85; }

/* -- code blocks ------------------------------------------------------ */

.conv-code {
  border: var(--border-width) solid var(--code-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block: var(--space-2);
}
.conv-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-sunken);
  border-block-end: var(--border-width) solid var(--code-border);
}
.conv-code-lang { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.conv-code .md-code { margin: 0; border: 0; border-radius: 0; }

/* -- maths ------------------------------------------------------------ */

.math { font-family: var(--font-mono); white-space: nowrap; }
.math-display { display: block; text-align: center; margin-block: var(--space-2); white-space: normal; }
.math-fn { padding-inline-end: 0.15em; }
.math-text { font-family: var(--font-ui); }

.math-frac {
  display: inline-grid;
  vertical-align: middle;
  text-align: center;
  margin-inline: 0.15em;
}
.math-num { border-block-end: var(--border-width) solid currentColor; padding-inline: 0.25em; }
.math-den { padding-inline: 0.25em; }

.math-sqrt { display: inline-flex; align-items: flex-start; }
.math-radical { padding-inline-end: 0.05em; }
.math-radicand { border-block-start: var(--border-width) solid currentColor; padding-inline: 0.15em; }
.math-index { font-size: var(--text-xs); align-self: flex-start; }

.math-script sup, .math-script sub { font-size: 0.75em; }
.math-raw { white-space: pre-wrap; }
.math-raw code { font-family: var(--font-mono); }

/* -- developer trace panel (s65): a workbench surface, not a nav view -- */

.trace-panel .trace-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.trace-panel .trace-record {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}
.trace-panel .trace-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  cursor: pointer;
}
.trace-panel .trace-name { font-family: var(--font-mono); font-size: var(--text-sm); }
.trace-panel .trace-when { color: var(--muted); font-size: var(--text-xs); }
.trace-panel .trace-body { padding: 0 var(--space-2) var(--space-2); display: grid; gap: var(--space-3); }
.trace-panel .trace-section h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--muted); }
.trace-panel .trace-values,
.trace-panel .trace-tools { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); }
.trace-panel .trace-tool { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.trace-panel .trace-reason { font-family: var(--font-ui); color: var(--muted); }
.trace-panel .trace-rationale { font-size: var(--text-sm); margin-block-start: var(--space-1); }

/* ================================================================== *
 * B7 — Books, Friends and Schedule views
 *
 * Scoped under `.view[data-view="books"|"friends"|"schedule"]`, except for a
 * few shared chat/ribbon rules which are prefixed `.friends-` / `.schedule-`
 * and only ever rendered by those views.
 *
 * No colour literals: every colour is a token from styles/tokens.css.
 * Everything below reflows to a single column at 320px and uses relative
 * units so 200% text zoom grows the layout rather than clipping it.
 * ================================================================== */

/* --- Books -------------------------------------------------------- */

.view[data-view="books"] .book-search-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.view[data-view="books"] .book-results:empty { display: none; }

.view[data-view="books"] .book-results .list-title {
  /* A search snippet is a fragment of prose, so it wraps rather than clipping. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.book-import {
  display: grid;
  gap: var(--stack-gap);
}

.book-import .file-input {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2);
  border: var(--border-width) dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  color: var(--fg);
}

.book-import .file-input:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.book-import-or {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* --- Friends ------------------------------------------------------ */

.friends-conversation { display: block; }
.friends-conversation[hidden] { display: none; }

.view[data-view="friends"] .friend-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--divider);
}

.view[data-view="friends"] .friend-row:last-child { border-bottom: 0; }

.view[data-view="friends"] .friend-who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.view[data-view="friends"] .friend-name {
  margin: 0;
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.view[data-view="friends"] .friend-meta,
.view[data-view="friends"] .friend-none {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.view[data-view="friends"] .friend-who-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* Waiting on a grown-up. The explanation sits under the name on its own
 * full-width row rather than beside it, so it reads as a sentence at 320px
 * instead of a two-word-per-line ribbon. */
.view[data-view="friends"] .friend-waiting {
  margin: 0;
  padding: 0;
  list-style: none;
}

.view[data-view="friends"] .friend-waiting .friend-row {
  flex-direction: column;
  align-items: flex-start;
}

.view[data-view="friends"] .friend-waiting-note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.chat-list {
  display: grid;
  gap: var(--space-2);
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-message {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}

.chat-message[data-mine="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.chat-who {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

.chat-message[data-mine="true"] .chat-who { color: var(--accent-ink); }

.chat-text {
  margin: 0;
  overflow-wrap: anywhere;
}

.chat-empty,
.chat-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.chat-composer {
  display: grid;
  gap: var(--row-gap);
  margin-top: var(--space-3);
}

/* --- Schedule ----------------------------------------------------- */

.view[data-view="schedule"] .schedule-item {
  padding: var(--space-3);
  border: var(--border-width) solid var(--hairline);
  border-left-width: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}

.view[data-view="schedule"] .schedule-item + .schedule-item { margin-top: var(--space-3); }

/* The two classes are told apart by more than a colour: the badge, the left
 * edge and the wording all carry it, so a colour-blind reader loses nothing. */
.view[data-view="schedule"] .schedule-item[data-origin="fixed"] { border-left-color: var(--success); }
.view[data-view="schedule"] .schedule-item[data-origin="generated"] {
  border-left-color: var(--info);
  border-left-style: dashed;
}

.view[data-view="schedule"] .schedule-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
}

.view[data-view="schedule"] .schedule-item-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.view[data-view="schedule"] .schedule-item-when {
  margin: var(--space-1) 0 0;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}

.view[data-view="schedule"] .schedule-item-notes,
.view[data-view="schedule"] .schedule-item-who,
.view[data-view="schedule"] .schedule-item-reason {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.view[data-view="schedule"] .schedule-item-reason { font-style: italic; }

.schedule-replan:empty { display: none; }
.schedule-kept { margin: var(--space-1) 0 0; font-weight: var(--weight-medium); }

.view[data-view="schedule"] .schedule-history {
  padding: var(--space-3);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
}

.view[data-view="schedule"] .schedule-history > summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.view[data-view="schedule"] .schedule-history > summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.schedule-history-body { margin-top: var(--space-3); }

@media (max-width: 26rem) {
  .view[data-view="friends"] .friend-row,
  .view[data-view="schedule"] .schedule-item-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The map embedded inside Learn (see views/map.js). It carries the same
 * `data-view="map"` hook as the standalone section, so every rule above
 * applies in both places without being written twice. */

.view[data-view="learn"] .view-embed[data-view="map"] {
  display: grid;
  gap: var(--stack-gap);
}

.view[data-view="learn"] .map-inline {
  display: grid;
  gap: var(--stack-gap);
}

.view[data-view="learn"] .map-inline-lead {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}