/* Spaces build (24 Oct 2026): the base area's styles. Every class is namespaced (base spx-, guide spg-, kinds spk-, content spt-, home-tidy sph-). */
/* The guide's frame, ported from the approved artifact (SPACES-FIRST-PAGE.src.html: .frame, .app, .bar, .crumb, .saved,
   .stepper, .st, .stepn, .head, .from, .btn.big, .next, .chip, .tag, .vi-row, .maya, the phone sheet). The artifact's
   colours are the app's own tokens (design-tokens.css); its fonts are the app's (Fraunces, Bricolage Grotesque,
   JetBrains Mono, loaded by app.html). Only the class names change: bare names would collide with the app's. */

.spx-root { --spx-display: Fraunces, Georgia, "Times New Roman", serif; --spx-body: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --spx-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --spx-rec: #dc2626; --spx-rec-soft: rgba(220,38,38,.12);
  font-family: var(--spx-body); font-size: 15px; line-height: 1.45; color: var(--text); }
.spx-root *, .spx-root *::before, .spx-root *::after { box-sizing: border-box; }
.spx-root button { font-family: inherit; }
.spx-root:not([data-own]) button:focus-visible, .spx-root:not([data-own]) input:focus-visible, .spx-root:not([data-own]) textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spx-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── the frame: the screen, with Maya beside it (.frame, .app) ── */
/* S9 (Alex, 28 Oct 2026): "Maya works a lot better when she's a bubble that can be opened up ... when you have the
   'Ask Maya,' it comes up as a floating box in the courses. I think that's a better UX to be using throughout." So
   the screen has the whole frame, and Maya is the bar's Ask Maya, opening a floating box (below). */
.spx-frame { display: grid; grid-template-columns: minmax(0,1fr); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.spx-frame > * { min-width: 0; }
.spx-app { padding: 16px 22px 20px; display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; align-content: start; }
@media (max-width: 899.98px) { .spx-frame { grid-template-columns: minmax(0,1fr); } .spx-app { padding-bottom: 76px; } }
@media (max-width: 520px) { .spx-app { padding: 14px 14px 76px; } }
/* A screen drawn on the Clips studio (SpacesBase.register `own`: the program plan, js/spaces/program.js; Alex, 28 Oct
   2026: "You go in and you use it. You mirror the exact same code"). The guide's frame steps aside, so the page is
   laid out exactly as Clips' is: the page head, then the studio, scrolling with the page. Layout only: every look on
   the screen is css/clips-studio.css. */
.spx-root[data-own] .spx-frame { display: block; background: none; border: 0; border-radius: 0; overflow: visible; height: auto; }
.spx-root[data-own] .spx-app { display: block; padding: 0; overflow: visible; min-height: 0; container-type: normal; }
.spx-root[data-own] .spx-app > :last-child { padding-bottom: 0; }
/* Clips' choice grid is three across; a two-way or four-way choice is two across, so it leaves no hole. The page's
   own head steps aside on a phone while a step is open, as Clips' does (clips-studio.css "Phone", .page-head). */
@media (min-width: 761px) { .spx-root[data-own] .sppl-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .spx-root[data-own] .page-head { display: none; } }
/* The room after a program stage's pinned button on a phone lives in clips-studio.css (no other stylesheet may name a
   studio class: tests/clips-studio-css-namespace.test.js). */

/* ── the bar: crumb, Saved, Ask Maya (.bar) ── */
.spx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.spx-crumb { font-family: var(--spx-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.spx-crumb b { color: var(--text); font-weight: 500; }
.spx-crumb-root { border: 0; background: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.spx-crumb-root:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.spx-saved { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.spx-saved .spx-i { width: 14px; height: 14px; }
.spx-saved[data-state="failed"] { color: var(--warn); font-weight: 600; }
.spx-saved-retry { border: 0; background: none; padding: 0; margin-left: 4px; font: inherit; font-weight: 600; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.spx-askbtn { display: none; align-items: center; gap: 6px; flex: none; border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-left: 8px; }
/* Ask Maya at every width now (S9): her one door. */
.spx-askbtn { display: inline-flex; min-height: 34px; padding: 4px 12px 4px 4px; font-size: 13px; }
/* On a phone the crumb shows only its last part, so a name the coach chose is never cut. */
/* ...and when even that is longer than the bar, it ends in an ellipsis of its own (the parent's has no size to draw
   one: "BRING NEW P" was cut mid-word on dev3 at 390, 24 Oct). */
@media (max-width: 520px) { .spx-bar .spx-crumb { font-size: 0; } .spx-bar .spx-crumb b { font-size: 11px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } }

/* Maya's one mark (assistant-panel.css .rc-maya-av) */
.spx-mv { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--salmon), var(--rose) 55%, var(--plum)); color: #fff; }
.spx-mv svg { width: 76%; height: 76%; }
.spx-mv-m { width: 28px; height: 28px; }
.spx-mv-l { width: 42px; height: 42px; }

/* ── the step bar (.stepper, .st, .stepn; A95, A283, A288) ── */
.spx-stepper { display: grid; position: relative; max-width: 520px; width: 100%; justify-self: center; }
.spx-stepper::before { content: ""; position: absolute; left: 10%; right: 10%; top: 13px; height: 2px; background: var(--border); }
.spx-st { position: relative; display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--text-3); min-width: 0; }
.spx-st i { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--border); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-3); }
.spx-st i .spx-i { width: 14px; height: 14px; stroke-width: 3; }
.spx-st:hover i { border-color: var(--accent); }
.spx-st.spx-done i { background: var(--accent); border-color: var(--accent); color: #fff; }
.spx-st.spx-on i { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.spx-st.spx-on { color: var(--text); font-weight: 600; }
.spx-st:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.spx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spx-stepn { justify-self: center; font-family: var(--spx-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: -8px; text-align: center; }
@media (max-width: 520px) { .spx-st { font-size: 0; } .spx-st i { width: 32px; height: 32px; font-size: 12px; } .spx-stepper::before { top: 15px; } }

/* ── the head, the one filled button and its Next line, Back (.head, .btn.big, .next) ── */
.spx-head { display: grid; gap: 6px; text-align: center; justify-items: center; }
/* The course guide's scale (course-wizard.css .ccw-g-h1: Fraunces 30px, 26px on a phone; .ccw-g-sub 15px), so the two
   guides read the same. It was clamp(27px, 4.6vw, 38px), the artifact's full-window size: 38px in the app's column and
   two lines on most screens, which with the tiles pushed page one past the bottom of a 13" laptop (Alex, 24 Oct). */
.spx-head h2 { margin: 0; font-family: var(--spx-display); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; color: var(--text); }
.spx-head p { margin: 0; font-size: 15px; color: var(--text-2); }
@media (max-width: 520px) { .spx-head h2 { font-size: 26px; } }
.spx-app .btn.spx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.25; padding: 11px 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(106,76,241,.25); text-decoration: none; }
.spx-app .btn.spx-btn .spx-i { width: 18px; height: 18px; }
/* The course guide's main button (.ccw-g-go: 16px), 48px tall: the touch target CODING-STANDARDS sets. */
.spx-app .btn.spx-big { font-size: 16px; padding: 14px 24px; justify-self: center; min-width: min(100%, 300px); }
.spx-app .btn.spx-btn:hover { background: var(--accent-deep); }
.spx-app .btn.spx-btn[disabled] { background: var(--border-strong); color: #fff; box-shadow: none; cursor: not-allowed; }
.spx-app .btn.spx-ghost { background: #fff; color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
.spx-app .btn.spx-ghost:hover { background: #fff; border-color: var(--accent); }
.spx-app .btn.spx-small { font-size: 13.5px; padding: 7px 13px; }
.spx-next { justify-self: center; font-size: 13px; color: var(--text-3); text-align: center; }
/* nextBtn's wrapper draws no box: the button and its Next line lay out in whatever holds them, as they always did */
.spx-go { display: contents; }
.spx-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.spx-from { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 3px; justify-self: center; }
.spx-know { justify-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent-deep); background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 11px 20px; cursor: pointer; }
.spx-know .spx-i { width: 18px; height: 18px; }

/* the pictogram tile (.pic) */
.spx-pic { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 16px; }
.spx-pic-i { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* chips, tags, the "1 of 3" dots (.chip, .tag, .sub: the artifact draws the dots hidden) */
.spx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spx-chip { font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.spx-chip.spx-on { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent); }
.spx-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.spx-tag-told, .spx-tag-members, .spx-tag-program { color: var(--good); background: var(--good-soft); }
.spx-tag-guess { color: var(--warn); background: var(--warn-soft); }
.spx-tag-conn { color: var(--accent-deep); background: var(--accent-soft); }
.spx-sub { display: none; }
.spx-sub em { width: 22px; height: 5px; border-radius: 3px; background: var(--border); }
.spx-sub em.spx-on { background: var(--accent); }

/* the "i" tooltip and the collapsible (A157: one short line; the reason in an "i"; longer in a collapsible) */
.spx-tip { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--text-3); font: italic 600 11px/1 Georgia, serif; vertical-align: 1px; margin-left: 4px; cursor: help; }
.spx-tip:hover, .spx-tip:focus-visible { border-color: var(--accent); color: var(--accent-deep); outline: none; }
.spx-tip-t { position: absolute; z-index: 25; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(260px, 70vw); padding: 8px 10px; border-radius: 10px; background: var(--text); color: #fff; font: 400 12.5px/1.4 var(--spx-body); font-style: normal; text-align: left; box-shadow: 0 10px 26px -12px rgba(21,23,43,.6); opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; }
.spx-tip:hover .spx-tip-t, .spx-tip:focus-visible .spx-tip-t, .spx-tip[data-open="1"] .spx-tip-t { opacity: 1; visibility: visible; }
.spx-more { border: 1px solid var(--border-soft); background: var(--surface-2); border-radius: 12px; padding: 0 12px; }
.spx-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 9px 0; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }
.spx-more > summary::-webkit-details-marker { display: none; }
.spx-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.spx-more[open] > summary::before { transform: rotate(45deg); }
.spx-more-b { padding: 0 0 12px; font-size: 14px; color: var(--text-2); }

/* Speak (A36): VoiceInput's Option A, its own row beneath the field (voice-input.js styles its own row; this places it) */
.spx-speak:empty { display: none; }
.spx-speak .vi-row { margin-top: 8px; }

/* a step not built yet (never seen once every lane has landed) */
.spx-soon { display: grid; gap: 8px; justify-items: center; text-align: center; background: #fff; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 28px; color: var(--text-3); }

/* ── Maya beside every step (.maya; space-maya.js docked mode draws it) ── */
.spx-maya { background: #fff; border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; min-width: 0; font-family: var(--spx-body); }
.spx-maya-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--accent-softer), #fff); }
.spx-maya-n { font-weight: 700; font-size: 15px; color: var(--text); }
.spx-maya-r { font-size: 12px; color: var(--text-3); }
.spx-maya-x { margin-left: auto; display: none; border: 0; background: none; cursor: pointer; color: var(--text-3); padding: 6px; }
.spx-maya-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.spx-maya .cc-wrap { color: var(--text); font-family: var(--spx-body); height: 100%; min-height: 0; }
.spx-maya .cc-messages { padding: 14px 16px; gap: 10px; max-height: 560px; }
.spx-maya .cc-msg { max-width: 94%; }
.spx-maya .cc-bubble { font-size: 14px; line-height: 1.45; border-radius: 14px; padding: 10px 12px; }
.spx-maya .cc-bubble--ai { background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text); }
.spx-maya .cc-bubble--user { background: var(--accent); color: #fff; }
.spx-maya-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.spx-maya-sugg:empty { display: none; }
.spx-maya-sugg button { font: inherit; font-size: 13px; color: var(--accent-deep); background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 999px; padding: 5px 10px; cursor: pointer; text-align: left; }
.spx-maya .cc-input-row { margin: 0 12px 12px; border: 1.5px solid var(--border); border-radius: 14px; padding: 5px 5px 5px 12px; gap: 6px; align-items: flex-end; border-top-width: 1.5px; }
.spx-maya .cc-textarea { background: transparent; border: 0; color: var(--text); font-family: inherit; font-size: 14px; min-height: 34px; padding: 7px 0; line-height: 1.45; max-height: min(240px, 35vh); }
.spx-maya .cc-textarea::placeholder { color: var(--text-3); }
.spx-maya .cc-textarea:focus, .spx-maya .cc-textarea:focus-visible { outline: none; box-shadow: none; }
.spx-maya .cc-input-row:focus-within { border-color: var(--accent); }
.spx-maya .cc-action-btn { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; }
.spx-maya .cc-action-btn--send, .spx-maya .cc-action-btn--send:disabled { background: var(--accent); color: #fff; opacity: 1; }
.spx-maya .cc-voice-row { padding: 0; margin: -4px 14px 12px; }
.spx-maya .smy-card, .spx-maya .smy-kit, .spx-maya .smy-go-build { margin: 0; }
@media (max-width: 899.98px) {
  .spx-maya { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 72vh; z-index: 60; border: 1px solid var(--border); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px -18px rgba(21,23,43,.45); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .spx-maya.spx-open { display: flex; }
  .spx-maya-x { display: block; }
  .spx-maya .cc-messages { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .spx-root * { transition: none !important; } }

/* Inside the app the guide's column is narrower than the window (two menus sit beside it): about 600px at 1440. The
   lanes' two-column layouts (choices beside "What members see") were written to the artifact's full-width page and
   collapse only on a narrow WINDOW, so here they collapse on a narrow COLUMN. `.spx-app` prefixes win over the
   modules' own injected rules, which come later in the page. */
.spx-app { container-type: inline-size; container-name: spx; }
@container spx (max-width: 720px) {
  .spx-app .spg-two, .spx-app .spg-w-two, .spx-app .spg-p-two, .spx-app .spt-two, .spx-app .spk-two,
  .spx-app .spg-p-launch, .spx-app .spg-p-live { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone the app's own menu button floats at the top right; the guide's bar (Saved, Ask Maya) keeps clear of it. */
@media (max-width: 899.98px) { .spx-app .spx-bar { padding-right: 52px; } }

/* ══ ONE SCREEN AT 100% (Alex, 24 Oct 2026, on a MacBook at 100%: "it doesn't fit on the whole page ... you're like
   scrolling down to see the other buttons ... even Maya's box is making me having to scroll vertically"). ══
   From 900px the frame is exactly the room the page has for it: the window, less where the frame starts (16px
   down, the course guide's top, and lower when a banner is showing above it) and less the 16px the page keeps under
   it. Both are measured on the frame by base.js (`--spx-top`, `--spx-below`); without the script the values set here
   stand. So the page itself never scrolls. A screen whose content is genuinely longer (Maya's summary, a long list)
   scrolls INSIDE the frame, and its main button stays pinned at the foot, in reach. Maya fits the frame's height the
   way the course guide's panel does (course-wizard.css `.ccw .rc-maya`; Alex 2026-08-19: "her chat box ... should
   be always visible and easy to write into"): her head, chips and typing box always whole, her thread the part that
   gives way and scrolls.
   Help keeps the bottom-right corner (support-widget.js `--help-room`). Every page keeps that much room under its
   last row (app-styles-v2.css #mainContent, 98px on a 13" laptop) so the row can be scrolled out from under Help.
   The guide never scrolls, so it takes that room back for the screen and keeps Help clear itself: Maya's column,
   which Help sits over, ends her typing box above it.
   The floor (520px): on a window too short even for that, the frame keeps its shape and the page scrolls, rather
   than folding everything to nothing. Under 900px (Maya is a sheet) the page scrolls, as a phone page should. */
@media (min-width: 900px) {
  #appShell #mainContent:has(> .page.active > .route.active .spx-root:not([data-own]) .spx-frame) { padding-top: 16px; padding-bottom: 16px; }
  .spx-frame {
    height: max(520px, calc(100vh - var(--spx-top, 16px) - var(--spx-below, 16px)));
    height: max(520px, calc(100dvh - var(--spx-top, 16px) - var(--spx-below, 16px)));
  }
  .spx-app { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; container-type: inline-size scroll-state; }
  /* Maya floats over the bottom right, the course's Ask Maya box (maya-page-panel.js, open 'bottom-right'): closed
     until Ask Maya, her head, chips and typing box always whole, her thread the part that scrolls. */
  .spx-maya { display: none; position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 380px; height: min(600px, calc(100vh - 120px)); height: min(600px, calc(100dvh - 120px));
    border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(21,23,43,.45), 0 2px 8px rgba(21,23,43,.08); }
  .spx-maya.spx-open { display: flex; }
  .spx-maya-x { display: block; }
  .spx-maya-head, .spx-maya-sugg, .spx-maya .cc-input-row, .spx-maya .cc-voice-row { flex: none; }
  .spx-maya .cc-messages { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

  /* The main button stays in reach. The screen's foot is pinned to the bottom of the screen column while more of the
     screen lies below it, and sits back in its own place once she reaches the end. The foot is the lane's own foot
     row where it has one (the set-up, work, content and kinds feet, a Cancel and Save row), or else nextBtn's
     .spx-go (the button and its Next line, which then becomes a box of its own, laid out as they were). It always
     stands on a full-width band of the frame's colour, in every browser, so nothing shows through beside or behind
     it, and carries a 12px foot inside itself, laid over the 12px gap under it, so nothing peeks out beneath it.
     (A sticky box stops at the scroller's padding, so the column keeps none at its foot; the screen's last box
     takes it.) */
  .spx-app { padding-bottom: 0; }
  .spx-app > :last-child { padding-bottom: 16px; }
  .spx-app > * > .spx-go { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: inherit; }
  .spx-app > * > :is(.spx-go, :has(> .spx-go), :has(> .spk-cta .spx-big)) { position: sticky; bottom: 0; z-index: 3; justify-self: stretch; width: auto; max-width: none; background: var(--bg); padding-bottom: 12px; margin-bottom: -12px; }
  /* While there IS more below (a scroll-state query, where the browser has one): what scrolls under the band also
     fades into it, so the foot reads as "there is more", never as the end of the screen. */
  @container spx scroll-state(scrollable: bottom) {
    .spx-app > * > :is(.spx-go, :has(> .spx-go), :has(> .spk-cta .spx-big))::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
  }

  /* The course guide's density where the frame is one screen tall: the chrome's gaps, the step bar (the course
     guide's journey, .ccw-c-journey: 28px dots, 12.5px names), the head, the chips. */
  .spx-app { gap: 12px; padding-top: 14px; }
  .spx-stepn { line-height: 1.2; }
  .spx-speak .vi-row { margin-top: 6px; }
  .spx-st { gap: 3px; }
  .spx-st i { width: 26px; height: 26px; }
  .spx-stepper::before { top: 12px; }
  .spx-head { gap: 4px; }
  .spx-know { font-size: 14.5px; padding: 9px 18px; }
  .spx-chips { gap: 6px; }
  .spx-chip { padding: 6px 12px; }
  /* "What members see" goes back BESIDE the choices, as the artifact drew it, in a column a little narrower than its
     250px: stacked under them in the app's ~600px column it doubled the screen's height (a set-up screen's choices
     and its preview, one above the other, were 520px of a 744px column). Only a column too narrow for both
     (under 520px) stacks them, and there the member's card keeps its own width rather than stretching across.
     Each week's work is the exception: a list of pieces, each with its answer on the right, needs the column's full
     width to stay readable, so its preview still goes under it. */
  @container spx (min-width: 520px) and (max-width: 760px) {
    .spx-app .spg-two, .spx-app .spg-w-two, .spx-app .spg-p-two { grid-template-columns: minmax(0, 1fr) minmax(0, 230px); gap: 14px; }
    .spx-app .spg-w-two:has(.spg-w-units) { grid-template-columns: minmax(0, 1fr); }
    /* Ready to publish and It's published: the member's card (and the phone) beside the list, as drawn, not a
       full-width card standing 465px tall over it. */
    .spx-app .spg-p-launch { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; gap: 14px; }
    .spx-app .spg-p-live { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; }
    .spx-app .spg-p-live .spg-p-phone { width: 100%; }
    .spx-app .spg-p-live .spg-p-ph { min-height: 340px; }
    /* two option cards side by side in the narrower panel: "Maya recommends" sits on the card's top edge, where it
       never covers the card's picture (at the artifact's full width it sat in the card's top right corner) */
    .spx-app .spg-opts2 .spg-op .spg-rec { position: absolute; top: -9px; right: 10px; }
  }
  @container spx (max-width: 519.98px) {
    .spx-app .spg-two > .spg-prev, .spx-app .spg-w-two > .spg-w-prev, .spx-app .spg-p-two > .spg-p-prev { width: 100%; max-width: 300px; justify-self: center; }
  }
  @container spx (max-width: 760px) {
    .spx-app .spg-w-two:has(.spg-w-units) > .spg-w-prev { width: 100%; max-width: 300px; justify-self: center; }
    /* Maya's ideas (ideas.js injects their sheet), three across in the narrow column: the cards at the course guide's
       scale, the cover a little shorter. Three rich ideas are genuinely longer than one screen, so this screen reads
       by scrolling inside the frame; the cards just ask less of it. */
    .spx-app .spx-ideas { gap: 12px; }
    .spx-app .spx-i-card { padding: 8px; gap: 8px; }
    .spx-app .spx-i-cov { aspect-ratio: 16 / 8; }
    .spx-app .spx-i-card h3 { font-size: 18px; }
    .spx-app .spx-i-card p { font-size: 13.5px; }
  }
}

/* Help steps out of the way while her box is open (the course's ch-maya-open, support-widget.js), read from the open
   box itself so it can never be left hidden when the coach goes elsewhere in the app. */
body:has(.route.active .spx-maya.spx-open) .sw-launch, body:has(.route.active .spx-maya.spx-open) .sw-nudge { display: none !important; }