/**
 * guided-workspace.css — the guided-flow WORKSPACE.
 *
 * The two-column working area from the website Launch Studio's first step:
 * a coach card on the left that asks one question at a time, and a rail on the
 * right showing what you are building, how far along it is, and what is still
 * to come. Opted into with `.gw` on a container.
 *
 * ── Why it moved out of launch-studio.css ───────────────────────────────
 * Alex, 2026-08-01, sending a screenshot of launch-phase-one: "You're meant to
 * be following this styling." He had already said it once — "the builder, the
 * wizard, needs to follow the same design as the wizard for the website" — and
 * the course wizard had only been given the CHROME: the top bar, the crumbs,
 * Save & exit, the welcome heading. Those are real, and they are not what
 * makes that screen what it is. This is: Maya, one question, and a rail that
 * shows the thing being built filling in as you answer.
 *
 * Every rule was scoped to `#page-launch-phase-one`, so a second guided flow
 * could only have the layout by growing its own copy of it. That is the exact
 * thing the instruction is against.
 *
 * ── Scoped to a class, not global ───────────────────────────────────────
 * `.gw` rather than bare `.phase-grid`, for the reason the wizard-shell
 * extraction found the hard way: an unscoped move hands these rules to any
 * page that happens to share a class name, and the surprises turn up on
 * screens nobody edited. A consumer opts in; nothing is opted in by accident.
 *
 * The move trades an id for a class, LOWERING specificity from (1,1,0) to
 * (0,2,0) — anything that used to lose to these rules can now win.
 * tests/browser/guided-workspace-css.browser.js renders the real markup
 * against the stylesheets before and after and diffs every property that
 * decides what the workspace looks like.
 *
 * ── NOT here ────────────────────────────────────────────────────────────
 * `.save-hint` and the `.welcome` block. Those already live in
 * css/wizard-shell.css under `.wz-shell`, which both flows already wear —
 * copying them here would give the same element two owners.
 */

.gw .phase-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 18px; align-items: start; }

.gw .ls-fcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 30px 70px -50px rgba(21,23,43,0.5); }
.gw .ls-fhead { display: flex; align-items: center; gap: 14px; padding: 20px 26px 18px; border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--accent-softer), var(--surface)); }
.gw .coach-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #f17d6e, #e85a8a 55%, #b15dde); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px; box-shadow: 0 8px 20px -7px rgba(232,90,138,0.55); flex-shrink: 0; }
.gw .coach-meta { flex: 1; min-width: 0; }
.gw .coach-meta .nm { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.gw .coach-meta .nm .ai-pill { font-family: "Inter", sans-serif; font-size: 10.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent-deep); padding: 2px 8px; border-radius: 999px; letter-spacing: 0; }
.gw .coach-meta .ro { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.gw .focus-progress { text-align: right; flex-shrink: 0; }
.gw .focus-progress .pl { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.gw .focus-progress .pv { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 17px; color: var(--text); }
.gw .focus-progress .pv b { color: var(--accent); }
.gw .focus-progress .pbar { width: 120px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 5px; }
.gw .focus-progress .pbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; width: 8%; transition: width .5s cubic-bezier(.33,1.1,.5,1); }
.gw .ls-fbody { padding: 26px 30px 24px; }
.gw .maya-intro { font-size: 14.5px; color: var(--text-2); line-height: 1.6; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 14px; border-bottom-left-radius: 4px; padding: 14px 18px; margin-bottom: 22px; max-width: 560px; }
.gw .maya-intro b { color: var(--text); font-weight: 600; }
.gw .q-kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 10px; }
.gw .q-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 27px; letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 8px; color: var(--text); }
.gw .q-body { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 0 0 18px; max-width: 580px; }
/* The box is the TEXTAREA, and nothing else is inside it.
   Alex, 2026-07-31: "the location of the speak button should be outside the
   dialogue text box. The back button should also be outside so that it's not
   interfering with the space so they can use all the space for the text box."
   The border used to be on .composer, which wraps the field AND the button row,
   so Speak, Back and Send all sat inside the frame and ate the typing area. The
   frame moves to the field; the buttons sit under it. */
.gw .composer { background: transparent; border: 0; border-radius: 0; padding: 0; }
.gw .composer textarea {
  width: 100%; box-sizing: border-box; display: block;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 14px 16px; outline: none; resize: none;
  font-family: inherit; font-size: 15.5px; line-height: 1.5; color: var(--text);
  min-height: 104px; transition: border-color .15s, box-shadow .15s;
}
.gw .composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.gw .composer textarea::placeholder { color: var(--text-4); }
.gw .composer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.gw .voice-btn { background: linear-gradient(135deg, #f17d6e, #e85a8a); color: #fff; border: none; padding: 9px 15px; border-radius: 10px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.gw .voice-btn:hover { filter: brightness(1.06); }
.gw .voice-btn.recording { background: #dc2626; animation: ls-dpulse 1.2s ease-in-out infinite; }
.gw .voice-btn svg { width: 14px; height: 14px; }
.gw .send-btn { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 11px 20px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.gw .send-btn:hover { background: var(--accent-deep); }
.gw .send-btn svg { width: 14px; height: 14px; }
.gw .cr-left { display: inline-flex; align-items: center; gap: 8px; }
.gw .nav-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gw .nav-btn:hover { background: var(--surface-3); color: var(--text); }
.gw .nav-btn svg { width: 14px; height: 14px; }
.gw .foot-actions { display: inline-flex; align-items: center; gap: 14px; }
.gw .review-plan-btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.gw .review-plan-btn:hover { background: var(--accent-deep); }
.gw .review-plan-btn svg { width: 14px; height: 14px; }
.gw .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.gw .chips .cl { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); width: 100%; margin-bottom: -2px; }
.gw .chip { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: border-color .12s, background .12s, color .12s; }
.gw .chip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.gw .focus-foot { padding: 16px 30px; border-top: 1px solid var(--border-soft); background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gw .focus-foot .tip { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; max-width: 460px; line-height: 1.45; }
.gw .focus-foot .tip svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.gw .focus-foot .later { background: transparent; border: none; color: var(--text-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.gw .focus-foot .later:hover { color: var(--text); text-decoration: underline; }
.gw .nudge { display: none; margin: 18px 0 0; padding: 13px 16px; background: var(--good-soft); border: 1px solid #c4e6d3; border-radius: 12px; color: var(--good); font-size: 13.5px; font-weight: 500; align-items: center; gap: 10px; }
.gw .nudge.show { display: flex; }
.gw .nudge svg { width: 16px; height: 16px; flex-shrink: 0; }
.gw .nudge b { font-weight: 700; }

.gw .rail { display: flex; flex-direction: column; gap: 16px; }
.gw .design-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.gw .design-card-head { padding: 15px 18px 12px; }
.gw .design-card-head .ey { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.gw .design-card-head .ti { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.gw .design-card-head .ti .badge { font-family: "Fraunces", serif; font-style: italic; font-weight: 500; font-size: 14px; color: var(--accent-deep); }
.gw .mini-frame { margin: 4px 14px 0; border: 1px solid var(--border); border-radius: 12px 12px 0 0; border-bottom: none; overflow: hidden; }
.gw .mini-bar { display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.gw .mini-bar i { width: 7px; height: 7px; border-radius: 50%; }
.gw .mini-bar .u { flex: 1; margin-left: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--text-4); }
.gw .mini-site { --s-bg:#fcfaf6; --s-ink:#1c2e22; --s-ink2:#51625a; --s-acc:#2d5d3a; background: var(--s-bg); color: var(--s-ink); font-family: "Fraunces", serif; }
.gw .mini-site .mn { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid rgba(28,46,34,0.08); }
.gw .mini-site .mn .lg { font-weight: 600; font-size: 11px; }
.gw .mini-site .mn .ct { background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 7.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; }
.gw .mini-site .mh { padding: 22px 16px 18px; text-align: center; }
.gw .mini-site .mk { font-family: "Inter",sans-serif; font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-acc); font-weight: 600; margin-bottom: 9px; }
.gw .mini-site .mt { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; line-height: 1.12; letter-spacing: -0.01em; margin: 0 auto 9px; max-width: 15ch; }
.gw .mini-site .mt em { font-style: italic; color: var(--accent-deep, var(--accent)); font-weight: 500; }
.gw .mini-site .ml { font-family: "Inter",sans-serif; font-size: 9.5px; line-height: 1.45; color: var(--s-ink2); max-width: 30ch; margin: 0 auto 12px; }
.gw .mini-site .mb { display: inline-block; background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 8.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; }
.gw .design-foot { margin: 0 14px 16px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; padding: 11px 14px; background: var(--surface-2); display: flex; align-items: center; gap: 10px; }
.gw .design-foot .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; position: relative; }
.gw .design-foot .pulse::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--good); opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  .gw .design-foot .pulse::after { animation: ls-dring 1.9s ease-out infinite; }
  @keyframes ls-dring { 0%{opacity:.6;transform:scale(.6)} 100%{opacity:0;transform:scale(1.7)} }
}
.gw .design-foot .ft { flex: 1; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.gw .design-foot .ft b { color: var(--text); font-weight: 600; }
.gw .design-foot .fp { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; color: var(--good); }
.gw .road { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.gw .road .rt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.gw .road ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* ⚠️ THE ROW TREATMENT LIVES ON `.rowbtn`, NOT ON THE `li` (2026-08-03).
   The roadmap became NAVIGABLE (A0c.1: "we want to be able to move back and
   forth between the steps"), so each row now wraps its three parts in a
   <button> when the step is reachable and a <span> when it is not. The li was
   the flex container, so leaving the layout there would have collapsed every
   row into a single stacked child the moment the wrapper appeared.
   `display: contents` on the button would have preserved the layout for free
   and was rejected: it strips button semantics in several browsers, and a
   navigation control that screen readers cannot see is not a saving. */
.gw .road li { display: block; padding: 0; border-radius: 9px; }
.gw .road li .rowbtn {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px;
  border-radius: 9px; width: 100%; text-align: left;
  background: none; border: 0; font: inherit; color: inherit;
}
.gw .road li.go .rowbtn { cursor: pointer; }
.gw .road li.go .rowbtn:hover { background: var(--surface-2); }
.gw .road li.go .rowbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gw .road li.now .rowbtn { background: var(--accent-soft); }
.gw .road li .m { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-4); }
.gw .road li .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw .road li .tx .n { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: -0.005em; }
.gw .road li .tx .s { display: block; font-size: 11.5px; color: var(--text-4); margin-top: 1px; }
.gw .road li .st { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); }
/* moved to `.gw .road li.now .rowbtn` — the button is the padded row now. */
.gw .road li.now .m { background: var(--accent); border-color: var(--accent); color: #fff; }
.gw .road li.now .tx .n { color: var(--accent-deep); }
.gw .road li.now .st { color: var(--accent); }
.gw .road li.locked { opacity: 0.72; }
.gw .road li.locked .m svg { width: 11px; height: 11px; }
.gw .bg-strip { margin-top: 18px; background: linear-gradient(110deg, #15102e 0%, #221a52 62%, #2d2470 100%); border-radius: var(--radius); padding: 13px 20px; color: #fff; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.gw .bg-strip::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 92% 50%, rgba(139,109,255,0.38), transparent 60%); pointer-events:none; }
.gw .bg-strip .ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #b07aff; flex-shrink: 0; position: relative; z-index: 1; }
.gw .bg-strip .ic svg { width: 18px; height: 18px; }
.gw .bg-strip .tx { flex: 1; position: relative; z-index: 1; }
.gw .bg-strip .tx b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 13.5px; }
.gw .bg-strip .tx .s { font-size: 12px; color: rgba(255,255,255,0.66); margin-top: 1px; }
.gw .bg-strip .live { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #b07aff; display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 1; }
.gw .bg-strip .live .d { width: 7px; height: 7px; border-radius: 50%; background: #b07aff; }
@media (prefers-reduced-motion: no-preference) {
  .gw .bg-strip .live .d { animation: ls-bp 1.6s ease-in-out infinite; }
  @keyframes ls-bp { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }
}

@media (max-width: 1080px) {
  /* minmax(0,1fr), not 1fr. A bare `1fr` track cannot be narrower than its
     content's min-content width, so ONE wide child — a scrolling strip, a long
     unbroken string — makes the whole grid wider than the phone and the page
     scrolls sideways. The desktop rule above already says minmax(0,1fr) for
     exactly this reason; the mobile override did not, and the fault only shows
     up when something inside genuinely wants to be wide. Found 2026-08-02 at
     375px, when the rail's design browser grew a scrolling filter row. */
  .gw .phase-grid { grid-template-columns: minmax(0, 1fr); }
  .gw .rail { flex-direction: row; flex-wrap: wrap; }
  .gw .design-card, .gw .road { flex: 1; min-width: 280px; }
}
@media (max-width: 760px) {
  .gw .welcome h1 { font-size: 27px; }
  .gw .q-title { font-size: 22px; }
}

/* ── Phones: the controls have to be thumb-sized ─────────────────────────
   Measured at 375px on the course wizard, which wears this same sheet:
   "Finish later" was 17px tall, Back 35px, Send answer 38px. CODING-STANDARDS
   asks for 48px targets and a 375px-first layout, and all three miss.

   This is a component-level correctness rule rather than a course-only one, so
   it lives here and both flows get it — the website's own onboarding has
   exactly the same three controls at exactly the same sizes. Two surfaces had
   the fault; one of them found it.

   Width rather than `pointer: coarse`: a narrow window on a laptop is the same
   cramped layout, and a rule that only fires on a touchscreen would leave the
   very case this was measured in untouched. */
@media (max-width: 760px) {
  .gw .send-btn, .gw .nav-btn, .gw .voice-btn {
    min-height: 48px; padding-top: 12px; padding-bottom: 12px;
  }
  .gw .later { min-height: 48px; padding: 12px 10px; }
  /* Back and Send stop sharing a row once they are both 48px — side by side
     at 375px each would be under 150px wide with the label wrapping. */
  .gw .composer-row { flex-wrap: wrap; gap: 10px; }
  .gw .composer-row .cr-left, .gw .composer-row .send-btn { flex: 1 1 100%; justify-content: center; }
}