/**
 * maya-hq.css — Maya's HQ (P7 rework, UI-BRIEF.md).
 *
 * The whole sheet answers one brief: a dead copy of the Claude chat feel —
 * whisper header, assistant text with no bubble, one quiet composer card,
 * one restrained accent, and NOTHING squishes. Layout rule: every row is a
 * flex with exactly one flexible member; fixed elements never share a row
 * with text they could crush.
 */

/* ── The page box (CC5) ───────────────────────────────────────────────────
   Alex, 2026-08-25: "the padding is all wrong… make sure the styling around
   the edges, the padding, and how it looks matches all our other pages."
   HQ was flush to the grid line while every other module page pads its content
   column, and that alone is why it read as a different app.

   The page — not the panel — is what owns the viewport height now. It is a
   flex column: the shared .page-head takes whatever the design system gives
   it, and #mhq-shell takes the rest. Two rules that both spaced this page
   (`padding: 0` here and a padding block at the foot of the file) have been
   folded into this one, because a page whose padding is set twice is a page
   whose padding gets changed in the wrong place next time.

   ⚠️ We do NOT restyle .page-head. Its 28px is the design system's answer and
   HQ has no reason to disagree; overriding a shared class from a feature
   sheet is the collision tests/css-namespace-collisions.test.js exists to
   catch.

   🚨 THE `display` GOES ON `.active`, AND NOTHING ELSE IN THIS FILE MAY SET
   `display` ON THE PAGE ELEMENT. The SPA hides pages with `.page { display:
   none }` — a CLASS selector. `#page-maya-hq { display: flex }` is an ID, so
   it beat the hide rule and Maya's HQ then rendered on EVERY page in the app,
   stacked above whatever you had navigated to. Alex saw it on the Control
   Centre, 2026-08-25: *"you messed up the control centre. You've pushed it all
   the way down… when you go to Maya HQ and then go back to the control centre…
   it's kind of sitting inside."* He was looking at two pages at once.
   Every other feature sheet uses `#page-x` only as a scope prefix and never
   touches the page element's own display — checked, and HQ was the only
   exception. Pinned by tests/spa-page-visibility.test.js. */
#page-maya-hq {
  padding: 22px 24px 20px;
  height: calc(100dvh - 118px); /* app shell header; tuned on dev */
  min-height: 0;
}

/* ⚠️ THE PLAN IS A DOCUMENT, NOT A CHAT, AND THIS IS THE LINE THAT MAKES IT ONE.
   Alex, 2026-09-10, looking at the shipped page: *"You've got an iframe inside
   this. We don't use iframes anywhere on the platform."* There is no iframe —
   what he was seeing is this page pinned to `height: calc(100dvh - …)` with
   `.mhq-gl` scrolling inside it, which behaves and reads exactly like one: a
   bordered region with its own scrollbar, content clipped mid-sentence at the
   top, the page behind it not moving.

   ⚠️ AND IT WAS THE ONLY PAGE IN THE APP THAT DID THIS. Grepped every
   stylesheet: maya-hq.css was the sole file using `height: calc(100dvh`.
   manage-board and the rest use `min-height`, so they scroll like ordinary
   pages. That is the house pattern the control centre follows and this did not.

   The fixed height is RIGHT for the chat — a thread wants its composer pinned
   and its history scrolling — so it stays, and `.mhq-doc` releases it only when
   the Green Lane plan is what is on screen. One class, set by the renderer. */
/* 🚨 `.active` IS PART OF THIS SELECTOR AND LEAVING IT OFF HID THE WHOLE APP
   BEHIND THIS PAGE. Alex, 2026-09-10: *"When the page loads up or you refresh
   the page, you can see the control centre. If you then click on any of the
   other options, then go back to the control centre, it always loads up Maya
   HQ."*

   `.page { display: none }` is (0,1,0). This rule was written as
   `#page-maya-hq.mhq-doc { … display: block }`, which is (1,1,0) and therefore
   BEAT it — so from the moment the plan page rendered once and stamped the
   class, `#page-maya-hq` was displayed on top of every other page in the app
   for the rest of the session. Nothing was wrong with the routing: the control
   centre was mounting correctly underneath.

   The `display` was only ever needed to beat `#page-maya-hq.active
   { display: flex }` below, which is the chat's column. Scoped to `.active`
   (2,1,0) it still beats that and no longer beats the hide.

   ⚠️ THE GENERAL RULE, NOW ENFORCED: a `#page-…` element's visibility belongs
   to `.active` and to nothing else. tests/pages-are-hidden-by-active.test.js
   walks every stylesheet in css/ and fails on any rule that sets `display` on a
   page element without it. This was the only one. */
#page-maya-hq.mhq-doc { height: auto; min-height: 0; }
#page-maya-hq.mhq-doc.active { display: block; }
#page-maya-hq.mhq-doc .mhq-gl { overflow: visible; flex: none; }

/* ⚠️ A READING MEASURE, BECAUSE THE ARTEFACT HAS ONE AND PROSE NEEDS ONE.
   `.page{max-width:640px;margin:0 auto}` in the approved prototype. Without it
   the rungs took the whole content column — measured 1392px at a 1440 viewport —
   so every You/We line ran the full width of a laptop and the page read as a
   stretched form rather than a letter. That is most of what "text bleeding off"
   and "it just looks very bad" were pointing at, alongside the padding.

   The head and the bar take the same measure so the left edges line up; a
   640px ladder under a full-width title looks like two pages. */
#page-maya-hq.mhq-doc .mhq-gl,
#page-maya-hq.mhq-doc .page-head { max-width: 640px; margin-left: auto; margin-right: auto; }
#page-maya-hq.active { display: flex; flex-direction: column; }
@media (max-width: 900px) { #page-maya-hq { padding: 14px 14px 10px; } }

/* ⚠️ HQ SITS IN THE APP'S CONTENT COLUMN LIKE EVERY OTHER PAGE (BB1).
   It used to be `max-width:760px; margin:0 auto` with a rail of its own inside,
   which is what put the chat off-centre in Alex's screenshot: the page was
   centring itself inside a column that was already positioned by the app grid.
   The LEFT MENU is now the platform subnav (#appSubnav) — see _mayaHqGroups in
   sidebar-nav.js — so this file styles the content column and nothing else. */
#mhq-shell {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;        /* the page owns the height; this takes the rest */
  width: 100%; min-width: 0;
  /* ⚠️ NO BACKGROUND. This was `var(--surface)` from when the shell WAS the
     panel; the panel now paints its own surface, border and radius, so the
     white spread across the whole content column and made HQ the one page in
     the app sitting on white instead of the app's ground. Seen in a render. */
  font-size: 16px; line-height: 1.6; color: var(--text, #1a1a18);
}
/* ⚠️ THIS USED TO SAY `.mhq-main`, AND `.mhq-main` NO LONGER EXISTS. When BB1
   mounted the shared panel, the wrapper div went with the bespoke markup and
   these two rules were left behind pointing at nothing — so the panel stopped
   filling the column AND lost its width cap, silently, with no error. Found by
   reading the markup against the sheet. The panel is `.rc-maya`, and where the
   page puts it is the page's business (this file's header).

   ⚠️ CAP THE CONTAINER, NEVER THE CHILDREN. The first cut put
   `max-width:760px; margin:auto; width:100%` on each child — and the composer
   sets its own side margins LATER, so the shorthand restored the 12px margins
   while width:100% stayed. Result: a 390px composer sitting 12px right of a
   390px viewport, i.e. horizontal scroll on a phone. Measured, not guessed. */
#mhq-shell > .rc-maya {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0; min-height: 0;
  max-width: 1040px; width: 100%;
}


/* HQ's own header controls. The head itself is .rc-maya-head from the shared
   panel; these two buttons are the PAGE's, and the component's header says
   plainly that what a page adds is the page's business. */
.mhq-head-actions { display: flex; gap: 2px; flex: none; margin-left: auto; }
.mhq-hbtn {
  width: 34px; height: 34px; border: 0; background: none; border-radius: 9px;
  color: var(--text-3); font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mhq-hbtn:hover { background: var(--surface-2); color: var(--text); }

/* ── History drop ───────────────────────────────────────────────────────── */
.mhq-history {
  border-bottom: 1px solid var(--border, #ececea);
  max-height: 40dvh; overflow-y: auto; flex: none;
}
.mhq-hist-row {
  display: block; width: 100%; text-align: left; padding: 11px 16px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--text-2, #4a4a46);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mhq-hist-row:hover { background: var(--surface-2, #f5f5f3); }
.mhq-hist-empty { padding: 14px 16px; font-size: 13.5px; color: var(--text-3, #8a8a86); }

/* ── The plan (R5) ───────────────────────────────────────────────────────
   It used to be a full-width bar between the header and the conversation.
   Alex: "We need to keep it simple. Maybe the chat should come up as the first
   thing." So it is a chip in the header row that opens the plan as a sheet —
   the same slide-in this screen already uses for artifacts. */
.mhq-plan-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 28px; padding: 0 10px; margin-right: 4px;
  border: 1px solid var(--border, #ececea); border-radius: 999px;
  background: none; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--text-3, #8a8a86);
  font-variant-numeric: tabular-nums;
}
.mhq-plan-chip:hover { background: var(--surface-2, #f5f5f3); color: var(--text-2, #4a4a46); }
.mhq-plan-chip i { font-size: 11px; }

/* The sheet leads with the one next thing, so opening it still answers
   "what do I do" in its first line (the next-thing-first rule from UI-BRIEF,
   which the collapsed bar used to carry). */
.mhq-plan-next {
  padding: 14px 16px 10px; font-size: 15px; line-height: 1.45;
  color: var(--text, #1a1a18); border-bottom: 1px solid var(--border, #ececea);
}
.mhq-pn-label {
  display: inline-block; margin-right: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3, #8a8a86);
}
.mhq-plan-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.mhq-plan-body { flex: none; }
.mhq-plan-strategy { padding: 12px 16px 6px; font-size: 13.5px; color: var(--text-2, #4a4a46); line-height: 1.55; }
.mhq-plan-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 9px 16px; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 14px; color: var(--text, #1a1a18);
}
.mhq-plan-item:hover { background: var(--surface-2, #f5f5f3); }
.mhq-plan-item .mhq-pi-tick { flex: none; color: var(--text-3, #c9c9c5); margin-top: 2px; }
.mhq-plan-item.done .mhq-pi-tick { color: var(--good, #2f9e6e); }
.mhq-plan-item.done .mhq-pi-title { text-decoration: line-through; color: var(--text-3, #8a8a86); }

/* ── Thread: type does the work ─────────────────────────────────────────── */
/* .rc-thread supplies the padding, gap and column. The component deliberately
   OMITS flex+overflow — its header explains why: those two make it the
   scrolling part of a fixed-height column, which is placement. HQ is that
   fixed-height column, so HQ asks for the scroll, here, in one line. */
#mhq-shell .rc-thread { flex: 1; min-height: 0; overflow-y: auto; }
.mhq-welcome { padding: 18dvh 8px 0; text-align: center; }
.mhq-w-title { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.mhq-w-sub { font-size: 14.5px; color: var(--text-3, #8a8a86); }

.mhq-thinking::after { content: '·'; animation: mhqPulse 1s infinite; color: var(--text-3, #8a8a86); }
@keyframes mhqPulse { 0% { opacity: .2 } 50% { opacity: 1 } 100% { opacity: .2 } }
/* The "working…" line inside a coach bubble. Selected by HQ's own class alone:
   compounding it onto .rc-mbub would make this sheet a second definer of a
   shared component class, which is exactly what the collision test catches. */
#mhq-shell .mhq-working { color: var(--text-3); font-size: 13px; }

/* Queued-approval chip: a quiet, factual line — not an alarm.
   ⚠️ THESE USED TO NAME TOKENS THAT DO NOT EXIST. --warn-text / --warn-bg /
   --warn-border were invented here; app-shell.css defines --warn and
   --warn-soft and nothing else. An undefined token is not a loud failure — it
   silently falls through to the hex fallback forever, so the chip looked right
   and simply never followed the theme. Now on the real tokens. */
.mhq-queued-chip {
  align-self: flex-start; margin: -8px 0 18px; padding: 7px 12px;
  font-size: 13px; line-height: 1.5; border-radius: 10px;
  color: var(--warn, #b87410); background: var(--warn-soft, #fbf0d9);
  border: 1px solid color-mix(in srgb, var(--warn, #b87410) 26%, transparent);
}

/* ── Attach chips (only while pending) ──────────────────────────────────── */
.mhq-attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 6px; flex: none; }
.mhq-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--surface-2, #f5f5f3); border: 1px solid var(--border, #ececea);
  border-radius: 999px; padding: 4px 10px; color: var(--text-2, #4a4a46);
  max-width: 75vw; overflow: hidden;
}
.mhq-chip-x { border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--text-3, #8a8a86); padding: 0 2px; }
.mhq-chip-err { color: var(--warn, #b87410); background: var(--warn-soft, #fbf0d9); border-color: color-mix(in srgb, var(--warn, #b87410) 26%, transparent); }

/* Dictation mount (the platform's one VoiceInput row) + the meter. */
#mhq-voice-mount { padding: 0 16px; flex: none; }


/* ── Connect sheet ──────────────────────────────────────────────────────── */
/* Tall content scrolls instead of falling off-screen. */
.mhq-modal-overlay {
  position: fixed; inset: 0; z-index: 1200; background: rgba(20, 20, 18, .4);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto;
}
.mhq-modal-card {
  position: relative; background: var(--surface, #fff); border-radius: 16px;
  max-width: 430px; width: 100%; padding: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.18);
  margin-top: auto; margin-bottom: auto;
}
.mhq-modal-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.mhq-modal-state { font-size: 12.5px; color: var(--text-3, #8a8a86); margin-bottom: 10px; }
.mhq-modal-p { font-size: 14px; line-height: 1.6; color: var(--text-2, #4a4a46); }
.mhq-connect-url {
  display: flex; gap: 8px; align-items: center; margin: 14px 0;
  background: var(--surface-2, #f5f5f3); border: 1px solid var(--border, #ececea);
  border-radius: 10px; padding: 8px 10px;
}
.mhq-connect-url code { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhq-modal-steps { margin: 10px 0 16px 18px; font-size: 13.5px; line-height: 1.65; color: var(--text-2, #4a4a46); }
.mhq-modal-manage { border: 0; background: none; color: var(--text, #1a1a18); text-decoration: underline; font: inherit; font-size: 13.5px; cursor: pointer; padding: 0; }
.mhq-modal-close {
  position: absolute; top: 12px; right: 14px; border: 0; background: none;
  font-size: 20px; line-height: 1; color: var(--text-3, #8a8a86); cursor: pointer;
}

/* ── The artifact handoff card + slide-in panel (7.2, UI-BRIEF §2) ─────── */
.mhq-artifact {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px;
  margin: -8px 0 18px; padding: 12px 14px;
  border: 1px solid var(--border, #ececea); border-radius: 12px;
  background: var(--surface, #fff); cursor: pointer; font: inherit; text-align: left;
}
.mhq-artifact:hover { background: var(--surface-2, #f5f5f3); }
.mhq-art-ic {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  background: var(--surface-2, #f5f5f3); color: var(--text-2, #4a4a46);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.mhq-art-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mhq-art-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhq-art-sub { font-size: 12px; color: var(--text-3, #8a8a86); }

#mhq-panel .mhq-panel-backdrop {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(20, 20, 18, 0); transition: background .22s ease;
}
#mhq-panel.open .mhq-panel-backdrop { background: rgba(20, 20, 18, .35); }
.mhq-panel-sheet {
  position: fixed; z-index: 1301; left: 0; right: 0; bottom: 0; height: 92dvh;
  background: var(--surface, #fff); border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18);
  transform: translateY(100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
#mhq-panel.open .mhq-panel-sheet { transform: translateY(0); }
/* The plan sheet (R5) reuses the same furniture. Listed alongside rather than
   given its own copy — one slide-in on this screen, not two that drift. */
#mhq-plan-sheet .mhq-panel-backdrop {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(20, 20, 18, 0); transition: background .22s ease;
}
#mhq-plan-sheet.open .mhq-panel-backdrop { background: rgba(20, 20, 18, .35); }
#mhq-plan-sheet.open .mhq-panel-sheet { transform: translateY(0); }
/* Shorter than an artifact preview — a list of five things does not need 92dvh. */
#mhq-plan-sheet .mhq-panel-sheet { height: auto; max-height: 78dvh; }
.mhq-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--border, #ececea); flex: none;
}
.mhq-panel-title {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mhq-panel-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.mhq-panel-newtab, .mhq-panel-close {
  width: 38px; height: 38px; border: 0; background: none; border-radius: 10px;
  color: var(--text-3, #8a8a86); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.mhq-panel-close { font-size: 20px; }
.mhq-panel-newtab:hover, .mhq-panel-close:hover { background: var(--surface-2, #f5f5f3); color: var(--text, #1a1a18); }
.mhq-panel-frame { flex: 1; width: 100%; border: 0; }

/* Desktop: the split pane — chat stays visible and usable on the left. */
@media (min-width: 900px) {
  .mhq-panel-sheet {
    left: auto; top: 0; bottom: 0; right: 0; width: 55%; height: 100dvh;
    border-radius: 0; border-left: 1px solid var(--border, #ececea);
    box-shadow: -8px 0 30px rgba(0,0,0,.08);
    transform: translateX(100%);
  }
  #mhq-panel.open .mhq-panel-sheet { transform: translateX(0); }
  #mhq-panel .mhq-panel-backdrop { background: transparent !important; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mhq-panel-sheet, #mhq-panel .mhq-panel-backdrop { transition: none; }
}

/* (R6's reply buttons lived here and are deleted. They are .rc-chips /
   .rc-mchip from the shared assistant panel — the component already had
   quick chips, and this file had rebuilt them as .mhq-options / .mhq-opt.) */

/* ── Artefacts sheet (BB1) ────────────────────────────────────────────────
   "Everything that has been shared should all be available from there." */
.mhq-sheet {
  background: var(--surface, #fff); border-radius: 16px;
  width: min(520px, calc(100vw - 32px)); max-height: 70dvh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.35);
}
.mhq-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--border, #ececea);
}
.mhq-sheet-title { font-size: 15px; font-weight: 600; }
.mhq-art-list { overflow-y: auto; padding: 8px; }
.mhq-art-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 14.5px; color: var(--text, #1a1a18); cursor: pointer;
  min-height: 44px;   /* the 48px-ish tap target the design system asks for */
}
.mhq-art-row:hover { background: var(--surface-2, #f5f5f3); }
.mhq-art-row i { color: var(--text-3, #8a8a86); font-size: 13px; flex: none; }
.mhq-art-empty {
  padding: 26px 20px; text-align: center; line-height: 1.6;
  font-size: 14px; color: var(--text-3, #8a8a86);
}


/* ── Maya's mark in the nav ───────────────────────────────────────────────
   .rc-ava IS the mark (assistant-panel.css) — the gradient disc with her
   letter, worn on every Maya surface. The nav needs it smaller, and a size is
   placement, so the size lives here and the mark stays there. This replaces
   maya-figure.js, a bespoke SVG that produced three designs, two rejections,
   and a second definition of something that already existed.

   ⚠️ SELF-SUFFICIENT ON PURPOSE (dev3 round B1). The panel's disc rules are
   scoped `.rc-mmsg .rc-ava`, so a bare `.rc-ava` in a menu got NONE of them:
   the span stayed display:inline (width/height ignored on inline boxes) and
   `.mhq-mark`'s 72% resolved against the MENU ROW — measured 118px tall in
   the dev3 hamburger, the giant M in Alex's screenshot. Everything the disc
   needs is therefore declared here, not inherited from a context this span
   is not in. */
.mhq-nav-ava {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; vertical-align: middle;
  width: 18px; height: 18px; font-size: 9.5px;
  border-radius: 50%; color: var(--on-accent, #fff);
  background: linear-gradient(135deg, var(--salmon), var(--rose) 55%, var(--plum));
}
.hamburger-ico .mhq-nav-ava { width: 18px; height: 18px; }

/* ── Maya's mark inside the component's disc ──────────────────────────────
   The glyph (js/maya-figure.js) is a STROKE in currentColor; the disc already
   sets `color: var(--on-accent)`, so the M comes out white without this file
   naming a colour at all. All that is left is how much of the disc it fills.
   72% leaves the letterform a ring of space rather than touching the edge,
   which is what stopped it reading as a blob at 18px when the mark was first
   built (rendered at 18/26/40/72 then, and again now). */
.mhq-mark { width: 72%; height: 72%; display: block; flex: none; }


/* ── A step in the plan (FIRST-RUN.md §10d step 7) ────────────────────────
   Three affordances per row and no more: tick it, go and do it, or open the
   fold to see what is covered first. The row USED to be one big button that
   toggled done — which is why the tick is now its own control, because a
   button cannot contain buttons.

   ⚠️ `.mhq-ps-*`, deliberately NOT `.mhq-step-*`: the connect sheet already
   owns that name (EE4), and two unrelated things sharing a class is how one
   silently restyles the other. */
.mhq-ps { display: flex; gap: 11px; padding: 13px 16px; border-top: 1px solid var(--border-soft); }
.mhq-ps:first-of-type { border-top: 0; }
.mhq-ps-tick {
  flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--text-4); font-size: 15px; line-height: 1;
}
.mhq-ps-tick:hover { color: var(--accent); }
.mhq-ps.done .mhq-ps-tick { color: var(--good); }
.mhq-ps-main { flex: 1; min-width: 0; }
.mhq-ps-title { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
/* Struck through, not hidden: a finished step is the evidence of progress that
   the whole surface exists to show. */
.mhq-ps.done .mhq-ps-title { text-decoration: line-through; color: var(--text-3); font-weight: 500; }
.mhq-ps-outcome { font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 3px; }
.mhq-ps-detail {
  margin-top: 9px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
}
.mhq-ps-dh {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
.mhq-ps-detail ol { margin: 0; padding-left: 18px; }
.mhq-ps-detail li { font-size: 13px; line-height: 1.55; color: var(--text-2); margin-bottom: 3px; }
.mhq-ps-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
/* Smaller than the design system's default button: this is one of three on a
   sheet, not the page's single call to action. */
.mhq-ps-go { padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.mhq-ps-more {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--text-3); text-decoration: underline;
}
.mhq-ps-more:hover { color: var(--text); }

/* The milestone leads the sheet — everything under it is only the route to it. */
.mhq-ps-milestone { padding: 15px 16px 13px; border-bottom: 1px solid var(--border); }
.mhq-ps-mtitle {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 18px; line-height: 1.25; color: var(--text); margin-top: 4px;
}
.mhq-ps-count {
  margin-top: 6px; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ── The Speak It chip on the opening screen (§7a) ────────────────────────
   Alex asked for the dictation control to be reachable as a pill among the
   answer chips rather than mentioned in Maya's text. It is a `.rc-mchip` like
   the answers so it sits in the same row and needs no layout of its own; the
   only additions are the glyph and enough emphasis to read as the different
   KIND of thing it is — the others send an answer, this one changes how you
   give one. */
.mhq-chip-talk { display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-deep); border-color: var(--accent-soft); background: var(--accent-softer); }
.mhq-chip-talk:hover { background: var(--accent-soft); border-color: var(--accent); }
.mhq-chip-talk svg { width: 13px; height: 13px; flex: none; }

/* ── The connect sheet's steps ────────────────────────────────────────────
   Alex, 2026-08-25, on the old sheet: *"the text is a little bit… I think you
   can make this much better, this UX."* It was a paragraph, a URL row and a
   dense <ol> of three sentences, so the thing you had to DO first was the
   third thing you read. Now each step is a titled block with its own control,
   and the first one is a primary button — the eye lands on the action.

   Numbered because these ARE a sequence: you cannot paste before you open, and
   you cannot approve before you paste. (Numbering that does not encode an
   order is decoration; this one does.) */
/* Two doors into the ONE connection: the Claude app (connector settings) and
   Claude Code (a terminal command). A segmented pair, not tabs-as-furniture:
   the coach picks the tool they actually have open. */
.mhq-doors { display: flex; gap: 4px; margin: 12px 0 2px; padding: 3px;
  background: var(--surface-2); border-radius: 10px; }
.mhq-door { flex: 1 1 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-3); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.mhq-door.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mhq-door:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mhq-door-panel[hidden] { display: none; }
.mhq-cmd { display: flex; gap: 8px; align-items: center; margin: 8px 0 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.mhq-cmd code { flex: 1; min-width: 0; font-size: 12px; overflow-x: auto; white-space: nowrap; }
.mhq-steps { list-style: none; margin: 14px 0 16px; padding: 0;
  counter-reset: mhqstep; display: flex; flex-direction: column; gap: 14px; }
.mhq-step { counter-increment: mhqstep; position: relative; padding-left: 30px; }
.mhq-step::before {
  content: counter(mhqstep);
  position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.mhq-step-t { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.mhq-step-d { font-size: 12.5px; line-height: 1.55; color: var(--text-3); margin-bottom: 8px; }
.mhq-step-go { margin-top: 2px; }
.mhq-step .mhq-connect-url { margin-top: 8px; }

/* ── The usage ring (CC2) ─────────────────────────────────────────────────
   Alex, 2026-08-25: "I don't want to have this month with May at 800K tokens…
   I want to copy what we've got with them, Claude. We have a little pie or a
   little circle and then you can click on it to get the detailed information."
   A conic-gradient ring, the same control shape Claude Code uses, in our
   tokens. `--pct` is set inline from the real number. */
.mhq-meter { position: relative; flex: none; display: flex; align-items: center; }
.mhq-ring {
  width: 28px; height: 28px; flex: none; padding: 0; border: 0; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) 0 var(--pct, 0%), var(--border) var(--pct, 0%) 100%);
}
.mhq-ring span {
  width: 21px; height: 21px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
/* Capped is the one state worth colouring — it changes what a coach can do. */
.mhq-ring.is-capped { background: conic-gradient(var(--warn) 0 100%, var(--warn) 0); }
.mhq-ring.is-capped span { color: var(--warn); }

.mhq-meter-card {
  position: absolute; top: 34px; right: 0; z-index: 60; width: 244px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.28);
}
.mhq-mtitle { font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.mhq-mrow { margin-bottom: 10px; }
.mhq-mlab { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--text-3); margin-bottom: 4px; }
.mhq-mlab b { color: var(--text-2); font-weight: 500;
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.mhq-mbar { height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.mhq-mbar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.mhq-mnote { font-size: 11.5px; line-height: 1.5; color: var(--warn); margin-top: 2px; }

/* ── The pinned plan in the left menu (CC8) ───────────────────────────────
   It is not one of the projects — it is the one they all point at — so it
   reads as its own object rather than a row with a different icon. */
.subnav .sub-item.is-pinned, .hamburger-subitem.is-pinned {
  background: linear-gradient(135deg, var(--accent-softer), var(--surface));
  border: 1px solid var(--accent-soft); border-radius: 12px;
  margin: 2px 0 8px; font-weight: 600; color: var(--text);
}
.subnav .sub-item.is-pinned .ico, .hamburger-subitem.is-pinned .ico { color: var(--rose); }

/* The header controls that the left menu already carries on desktop. */
@media (min-width: 900px) { .mhq-mob-only { display: none !important; } }

/* ── HQ's head at 390px ───────────────────────────────────────────────────
   Rendered at 390 and looked at: the head carried five things in one row —
   avatar, name, role, the context chip and three controls — so "Your business
   coach" wrapped onto two lines and the chip truncated to "LAU…". A chip that
   cannot show its own value is worse than no chip.

   HQ's chip goes, because the crumb directly above it already reads
   MAYA / <project>. It was the same fact twice, and it was the copy crushing
   Maya's own name. Nothing is lost from the screen.

   ⚠️ It hides by HQ's OWN class, not by `.rc-nowsec`. On the course Builder
   the same chip names the lesson Maya is pointed at, and that panel's header
   says plainly that an assistant editing the wrong lesson is worse than no
   assistant — hiding it there would be a real regression. HQ can drop its own
   chip; it cannot drop the component's. (The head's spacing at narrow widths
   IS the component's business and lives in assistant-panel.css.) */
@media (max-width: 900px) {
  #mhq-shell .mhq-head-chip { display: none; }
  #mhq-shell .mhq-hbtn { width: 32px; height: 32px; }
}


/* ── The Green Lane read-only view ────────────────────────────────────────
   Alex, 2026-09-09: "We can open up Maya HQ now but only show the email trail."
   A coach who arrived through this door has no chat, so there is no composer to
   grey out and nothing to explain. Placement only, per this file's header: the
   type scale and colours are the design system's. */
/* ⚠️ GOLD IS DEFINED ONCE, HERE. The approved artefact uses two colours with two
   jobs: gold says "this is the one you are on", purple says "press this". The
   platform's own tokens have no gold that means that — `--warn` is a warning, and
   an open rung is not a warning — so these three are the artefact's own values,
   named for what they do rather than for what they look like. */
.mhq-gl { --gl-gold: #b45309; --gl-gold-soft: #fcf0df; --gl-gold-line: #ebcfa0;
  display: flex; flex-direction: column; gap: 22px; overflow-y: auto;
  flex: 1; min-height: 0; padding-bottom: 24px; }
.mhq-gl-lab { font: 600 11.5px/1 ui-monospace, monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); }
/* An unagreed plan says so. It is a proposal until they answer, and a screen
   that presented it as settled would be putting our words in their mouth. */
.mhq-gl-lab.prop { color: var(--warn, #b87410); }
/* ⚠️ 19px, NOT 22. At 22 the milestone ran to five lines at 390px and became the
   biggest thing on the page, above a ladder it is only the title of. Measured in
   a render after the formula card went in above it and the two competed. */
.mhq-gl-plan h2 { font-size: 19px; line-height: 1.25; margin: 7px 0 0; }
.mhq-gl-strat { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 8px 0 0; }
.mhq-gl-count { font: 500 12.5px/1.5 ui-monospace, monospace; color: var(--text-3); margin-top: 9px; }
.mhq-gl-steps { margin: 14px 0 0; padding-left: 20px; }
.mhq-gl-steps li { margin-bottom: 11px; }
.mhq-gl-steps li .t { font-size: 15px; font-weight: 600; line-height: 1.35; }
.mhq-gl-steps li .o { display: block; font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 2px; }
.mhq-gl-steps li.done .t { text-decoration: line-through; color: var(--text-3); font-weight: 500; }

.mhq-gl-trail { display: flex; flex-direction: column; gap: 10px; }
.mhq-gl-mail { border: 1px solid var(--border); border-radius: var(--radius-lg, 18px);
  background: var(--surface); padding: 13px 16px; }
/* Their own replies sit apart from ours, the way a thread reads. */
.mhq-gl-mail.mine { background: var(--surface-2); border-color: var(--border-soft); }
.mhq-gl-mail header { display: flex; gap: 10px; align-items: baseline; }
.mhq-gl-mail .who { font-size: 13px; font-weight: 600; }
.mhq-gl-mail .when { margin-left: auto; font: 400 12px/1 ui-monospace, monospace; color: var(--text-3); }
.mhq-gl-mail .su { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin-top: 5px; }
.mhq-gl-mail .gi { font-size: 13.5px; line-height: 1.55; color: var(--text-2); margin-top: 4px; }


/* ── The plan page: a ladder you can read in one screen ───────────────────
   Alex, 2026-09-09, on the first build of this: *"It's an overwhelming block of
   words. It goes far away from what we've been aiming for and I think you're
   trying to do too much with this. You're forgetting the whole focus of making
   this fun and quick... I think we need to make it more of a bite-size thing."*

   ⚠️ THE MEASUREMENT THAT PROVED HIM RIGHT: 8,638px tall at 390px wide — about
   twenty-two phone screens — because every one of eight steps printed its
   outcome, its reason and its detail at once, under a four-row strategy block and
   a challenge panel.

   ⚠️ NOTHING WAS DELETED TO FIX IT except the challenge, which he moved to later
   in the journey. The reasons are one tap away and already open on the rung the
   coach is on. Same information, shaped as a ladder instead of a document.

   Placement and motion only, per this file's header. Every colour and type size
   is the design system's token. */

/* The count, pinned. It is the goal, and a goal you scroll away from is a goal
   you stop working towards. */
/* ⚠️ `padding: 10px 0 11px` GAVE THE BAR NO SIDES, AND IT SHOWED. Alex,
   2026-09-10: *"if you look around the border of the 8 out of 9, you can see
   that there's no space in there. It touches the edge."* The bar carries its own
   surface and a bottom rule, so with zero horizontal padding the count sat hard
   against the left edge of a white block and "One step left" against the right.
   The artefact's own value is `padding:10px 20px 0`; 16px here so the count
   lines up with the rung titles below it rather than sitting 4px proud of them. */
.mhq-gl .glbar { position: sticky; top: 0; z-index: 3; margin: -2px 0 2px;
  padding: 10px 16px 11px; background: var(--surface);
  border-bottom: 1px solid var(--border-soft); border-radius: 10px; }
.mhq-gl .glbar-row { display: flex; align-items: baseline; gap: 12px; }
.mhq-gl .glbar .c { margin: 0; font: 500 13px/1.2 ui-monospace, monospace;
  color: var(--text-2); }
.mhq-gl .glbar .c b { font-size: 16px; font-weight: 700; color: var(--text); }
.mhq-gl .glbar .n { margin: 0 0 0 auto; font-size: 12.5px; line-height: 1.2;
  color: var(--text-3); text-align: right; }
/* The last two steps are where people give up. It is the only place on the page
   that raises its voice. */
.mhq-gl .glbar .n.near { color: var(--accent-deep, var(--accent)); font-weight: 600; }
.mhq-gl .glbar .track { height: 5px; margin-top: 9px; border-radius: 3px;
  background: var(--surface-3); overflow: hidden; }
.mhq-gl .glbar .fill { height: 100%; border-radius: 3px; background: var(--accent);
  transition: width 900ms cubic-bezier(.22,.61,.36,1); }

/* ⚠️ THE OPENING IS TWO LINES: their own words, then the milestone as the answer.
   Alex, 2026-09-09: "You put too much background information at the beginning. I
   don't like the introduction at all. It's not exciting and it doesn't feel
   personalised." Problem, then answer. Everything that used to sit here is now
   attached to the thing it explains, one tap away. */
.mhq-gl .glsaid { margin: 0 0 8px; display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap; }
.mhq-gl .glsaid .k { font: 600 10.5px/1 ui-monospace, monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-4); }
.mhq-gl .glsaid .q { font-size: 15px; line-height: 1.4; color: var(--text-2);
  font-style: italic; }

/* Not committed to any of it, said before they read it. Quiet, but not so quiet
   it is missed — this is the line that makes a plan somebody else wrote feel safe
   to read. */
.mhq-gl .glstate { margin: 9px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--text-3); }

/* Why this plan — CLOSED. It was four rows sitting open at the top and it was
   the first thing Alex objected to. Worth having, not worth being first. */
.mhq-gl .glwhyplan { margin-top: 12px; }
.mhq-gl .glwhyplan > summary { cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 7px 0; display: flex; align-items: center; gap: 7px; }
.mhq-gl .glwhyplan > summary::-webkit-details-marker { display: none; }
.mhq-gl .glwhyplan > summary::before { content: ''; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms ease; }
.mhq-gl .glwhyplan[open] > summary::before { transform: rotate(45deg); }
.mhq-gl .glwhy { list-style: none; margin: 4px 0 6px; padding: 0;
  display: flex; flex-direction: column; gap: 9px; }
.mhq-gl .glwhy li { display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.mhq-gl .glwhy .m { flex: none; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%; background: var(--accent-soft, var(--surface-3));
  color: var(--accent-deep, var(--accent)); display: grid; place-items: center; }
.mhq-gl .glwhy .m svg { width: 9px; height: 9px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── the ladder ───────────────────────────────────────────────────────── */
.mhq-gl .glrungs { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
/* ⚠️ THE COMPONENT CARRIES ITS OWN FACE, because it is rendered on two pages
   and only one of them sets it. On app.html this is inherited from
   `app-shell.css`'s `body { font-family: "Inter", ... }`. The Onboarding Desk in
   admin.html has its own body font, so the coach's plan rendered there in the
   admin's face - and before the webfont was linked at all, in Times New Roman.
   Alex, 2026-09-11: *"the exact pixel-perfect version of what they see in their
   dashboard."* Same argument as the design tokens: what the panel needs travels
   with the panel. */
.mhq-gl { font-family: "Inter", system-ui, -apple-system, sans-serif; }

.mhq-gl .glr { border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22,.61,.36,1); }
.mhq-gl .glrungs.in .glr { opacity: 1; transform: none;
  transition-delay: calc(var(--n, 0) * 120ms); }
/* ⚠️ REDUCED MOTION SKIPS THE CHOREOGRAPHY, NEVER THE CONTENT. Two routes to the
   same place — the media query and the .nomo class the script adds — because the
   rungs start at opacity 0 and the script's matchMedia read can throw in odd
   embeddings. A reader who asked for less motion must never be left looking at an
   invisible list. */
.mhq-gl .glrungs.nomo .glr,
.mhq-gl .glrungs.nomo.in .glr { opacity: 1; transform: none;
  transition: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .mhq-gl .glr, .mhq-gl .glrungs.in .glr { opacity: 1; transform: none;
    transition: none; transition-delay: 0s; }
  .mhq-gl .glbar .fill, .mhq-gl .glr .body { transition: none; }
  /* The pair and the options still appear; they just do not slide. Content is
     never the thing a motion preference removes. */
  .mhq-gl .glr[data-open="1"] .pair,
  .mhq-gl .glr[data-open="1"] .glopt { animation: none; }
}

/* ⚠️ THE ROW IS ONE LINE AND STAYS ONE LINE. This is the whole fix: a coach sees
   the shape of the plan in a screen, and opens the one they care about. */
.mhq-gl .glr .row { display: flex; gap: 11px; align-items: center;
  padding: 12px 14px; cursor: default; }
.mhq-gl .glr .row[data-x] { cursor: pointer; }
.mhq-gl .glr .ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mhq-gl .glr .t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
/* What they will HAVE. Hidden once the rung is done — a promise kept does not
   need restating, which is what the artefact does too. */
.mhq-gl .glr .o { font-size: 12.5px; line-height: 1.4; color: var(--text-3); }
.mhq-gl .glr .flag { flex: none; font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.mhq-gl .glr .chev { flex: none; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.6px solid var(--text-4); border-bottom: 1.6px solid var(--text-4);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 160ms ease; }
.mhq-gl .glr[data-open="1"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }

.mhq-gl .glr .tick { flex: none; width: 20px; height: 20px;
  border-radius: 50%; border: 1.5px solid var(--border);
  display: grid; place-items: center; color: transparent; }
.mhq-gl .glr .tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The body: closed by default, open on the rung they are on. `grid-template-rows`
   rather than max-height so it animates to its real height without a magic
   number that clips a long reason. */
/* ⚠️ ONE CHILD (.bin), OR NOTHING IS CLIPPED. `grid-template-rows: 0fr` collapses
   the row; with several direct children each got its own row and a "closed" rung
   still showed its text. Caught in a screenshot, not a test. */
.mhq-gl .glr .body { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(.22,.61,.36,1); }
.mhq-gl .glr .body > .bin { overflow: hidden; min-height: 0; }
.mhq-gl .glr[data-open="1"] .body { grid-template-rows: 1fr; }
/* ⚠️ THE ARTEFACT'S OWN NUMBERS: 16px sides, 16px under. Alex, 2026-09-10:
   *"It's mainly the padding around the step that they're on."* The rung a coach
   is actually working in was 14/13, and with the panels inside it that left the
   text almost touching the gold edge — which is what "no padding, text bleeding
   off" was describing. `.rung-body{padding:0 16px 16px}` in the approved
   prototype; matched here rather than re-invented. */
.mhq-gl .glr .body { padding: 0 16px; }
.mhq-gl .glr[data-open="1"] .body { padding: 0 16px 16px; }
.mhq-gl .glr .body > span { display: block; }
.mhq-gl .glr .w, .mhq-gl .glr .gn { font-size: 13px; line-height: 1.55;
  color: var(--text-2); padding-left: 31px; margin-top: 9px; }
.mhq-gl .glr .d { font-size: 12.5px; line-height: 1.5; color: var(--text-3);
  padding-left: 31px; margin-top: 5px; }

/* ── WHAT YOU DO, AND WHAT WE DO ──────────────────────────────────────────
   Alex, 2026-09-09: *"It could use different colours for what they have to do and
   what we do and use some sort of emoji... We need to get across the idea that
   they have to do very little and we're going to do a lot."*

   ⚠️ THE ARGUMENT IS MADE BY THE SHAPE, NOT BY A SENTENCE CLAIMING IT. Their block
   is one short line in the accent colour; ours runs two or three in the quiet one.
   Side by side the difference in length says "you do almost nothing here" before a
   single word is read, which is the only version of that claim a coach believes. */
.mhq-gl .glr .pair { display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px; border-radius: 10px; margin-top: 8px; }
.mhq-gl .glr .pair .lb { flex: none; font: 600 11px/1.5 ui-monospace, monospace;
  letter-spacing: .04em; white-space: nowrap; }
.mhq-gl .glr .pair .tx { font-size: 13px; line-height: 1.55; }
/* Theirs: the accent, because it is the one thing on the rung they act on. */
.mhq-gl .glr .pair.you { background: var(--accent-softer, var(--accent-soft));
  color: var(--accent-deep, var(--accent)); }
.mhq-gl .glr .pair.you .tx { color: var(--text); font-weight: 600; }
/* Ours: quiet. It is longer on purpose and must not shout over the short line
   above it — the moment ours draws the eye first, the point is lost. */
.mhq-gl .glr .pair.us { background: var(--surface-2); color: var(--text-3); }
.mhq-gl .glr .pair.us .tx { color: var(--text-2); }

/* The two blocks arrive one after the other when the rung opens. Small, and only
   on open — Alex asked for "a bit of animation", and a bit is the brief. */
.mhq-gl .glr[data-open="1"] .pair { animation: glpair 260ms cubic-bezier(.22,.61,.36,1) both; }
.mhq-gl .glr[data-open="1"] .pair.us { animation-delay: 70ms; }
@keyframes glpair { from { opacity: 0; transform: translateY(6px); } }

/* Reversible, said before they choose. Quiet — it is reassurance, not an
   instruction — but on its own line, because a coach hesitating over a tap is
   scanning for exactly this and it must not be buried in the sentence above. */
.mhq-gl .glr .glease { display: block; margin-top: 7px; padding-left: 31px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-3); font-style: italic; }

/* ── THE OPTIONS: the work, inside the rung ───────────────────────────────
   The artefact's "Name it" rung is three tappable names, each with a one-line
   reason and one marked as our suggestion. Not a button to another screen — three
   builds of this page put a description of the work here instead of the work, and
   that is what made it a document. */
.mhq-gl .glopts { display: flex; flex-direction: column; gap: 8px;
  margin-top: 11px; padding-left: 31px; }
/* ⚠️ THE RUNG THAT HAS NOTHING TO TAP, AND STILL IS NOT A DEAD END. The finish
   line has no generator (its checklist is unspecified), so where the chips would
   be it says how the rung is actually worked: through the email conversation.
   Styled as a statement rather than as a disabled control — a greyed-out button
   would promise something that does not exist, which is the fault it fixes.
   14px, not 13, and the body colour rather than the muted one: this is the last
   thing a coach reads on the page and the sunlight gate holds it to 7:1. */
/* ⚠️ NO 31px INDENT, UNLIKE `.glopts`. That padding aligns CHIPS under the rung
   title, past the tick. This is not a chip — it is a panel of the same weight as
   the You/We pair above it, and the pair sits at the body's left edge. Inset it
   and the three panels step to the right for no reason, which is what the first
   render showed. */
.mhq-gl .glnext { padding-left: 0; margin-top: 8px; }
/* ⚠️ IT TAKES THE SURFACE BACK, LIKE THE You/We PANELS ABOVE IT. First cut was a
   thin gold rule beside plain text, and in the render it read as a footnote
   under the rung rather than as the rung's instruction — which is exactly
   backwards, because on this rung it IS the work. The open rung is gold; a panel
   inside it takes the surface back so it stays readable, the same reason
   `.glr.open .pair` does. Still not a button: the `.you` panel is a white card
   and is not a control either. Only visible in a PNG. */
.mhq-gl .glnext .gx { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55;
  color: var(--text); background: var(--surface); border-radius: 10px;
  padding: 10px 12px; border-left: 3px solid var(--gl-gold); }
/* ⚠️ THE FEW SECONDS BEFORE THE WORK ARRIVES. The options are generated on
   demand, so between the page painting and the answer landing the open rung has
   nothing in it — and a rung with nothing in it is what this whole page was
   redesigned to stop being. It says what is happening, in the coach's language,
   and it pulses gently rather than spinning: a spinner on a plan reads as an
   error, a breathing line reads as somebody writing. */
.mhq-gl .glpend { padding-left: 31px; margin-top: 11px; }
.mhq-gl .glp { font-size: 13px; color: var(--text-2, #64748b); font-style: italic;
  animation: mhq-glp 1500ms ease-in-out infinite; }
@keyframes mhq-glp { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mhq-gl .glp { animation: none; opacity: .8; }
}
.mhq-gl .glopt { display: flex; flex-direction: column; gap: 3px; text-align: left;
  cursor: pointer; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color 140ms ease, background 140ms ease, transform 90ms ease; }
.mhq-gl .glopt:hover { border-color: var(--accent); }
.mhq-gl .glopt:active { transform: scale(.99); }
.mhq-gl .glopt .n { font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Our steer. "Choose one of three" with no steer is work, and the promise of this
   rung is that it is not work. */
.mhq-gl .glopt .tag { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-deep, var(--accent));
  background: var(--accent-softer, var(--accent-soft));
  padding: 3px 6px; border-radius: 999px; }
/* ⚠️ `padding-left: 0` UNDOES AN INDENT THIS RULE NEVER ASKED FOR. There are two
   different `.d`s on this page: the RUNG's outcome line, which is indented 31px
   to clear the tick (`.mhq-gl .glr .d`, above), and an option chip's REASON,
   which is inside a chip that already has its own padding. Same weight (0,3,0),
   and this rule declares no padding, so the rung's 31px leaked into every chip
   and every reason sat a third of an inch right of the name it belongs to.
   Measured in the browser (name text at 462, reason text at 493) after seeing it
   in a screenshot; invisible in the markup and in jsdom. */
.mhq-gl .glopt .d { font-size: 12.5px; line-height: 1.45; color: var(--text-2);
  padding-left: 0; }
.mhq-gl .glopt.sel { border-color: var(--accent); background: var(--accent-softer, var(--accent-soft)); }
/* The way out. A coach who hates all three must not be stuck choosing the least
   bad one. */
.mhq-gl .glopt.own { border-style: dashed; }
.mhq-gl .glopt.own .n { font-weight: 500; font-size: 13.5px; color: var(--text-2); }

/* They arrive with the pair when the rung opens, just after it. */
.mhq-gl .glr[data-open="1"] .glopt {
  animation: glpair 260ms cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(140ms + var(--i, 0) * 60ms); }

/* ── THE TONE NUDGE ───────────────────────────────────────────────────────
   One description and three registers of it, not three descriptions. The coach's
   question here is "does this sound like me?", never "which of these?". */
.mhq-gl .gltone { margin-top: 11px; padding-left: 31px;
  display: flex; flex-direction: column; gap: 10px; }
.mhq-gl .gltone .seg { display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border-radius: 999px; align-self: flex-start; }
.mhq-gl .gltone .seg button { cursor: pointer; border: 0; background: transparent;
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  color: var(--text-3); transition: background 140ms ease, color 140ms ease; }
.mhq-gl .gltone .seg button[aria-pressed="true"] { background: var(--surface);
  color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.mhq-gl .gltone .draft { display: flex; flex-direction: column; gap: 5px;
  padding: 12px 13px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); }
/* Named, so nobody wonders whether this is a form field they are meant to fill. */
.mhq-gl .gltone .draft .lbl { font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
/* ⚠️ A TEXTAREA THAT DOES NOT LOOK LIKE ONE, DELIBERATELY. It sits inside the
   panel that already has the border and the surface, so a second frame around it
   would draw a box in a box. Its own chrome is stripped and its focus ring is the
   panel's, not the field's. `field-sizing` grows it with the words where the
   browser has it; `rows="3"` plus the min-height is what the rest get. */
.mhq-gl .gltone .draft .tx { font-size: 13.5px; line-height: 1.55; color: var(--text);
  font-family: inherit; width: 100%; border: 0; padding: 0; margin: 0;
  background: transparent; resize: vertical; min-height: 3.4em;
  field-sizing: content; }
.mhq-gl .gltone .draft .tx:focus { outline: none; }
.mhq-gl .gltone .draft:focus-within { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(0,0,0,.05)); }
/* ⚠️ SAID BEFORE THEY TYPE, NOT AFTER. Nudging the tone overwrites the box, and a
   coach who loses an edit they made first will not trust the control again. */
.mhq-gl .gltone .draft .eh { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4;
  color: var(--text-4); }
/* ── THE OTHER WAYS TO GET AN ADDRESS ─────────────────────────────────────
   Not chips: the three above them are addresses a coach can HAVE, these are
   three different journeys. A dashed edge and a quieter weight, so the row reads
   as "or, if none of those" rather than as three more things to choose between.
   Alex, 2026-09-10: *"'None of these, I'll write my own' doesn't make sense
   here. You need to give those three options."* */
.mhq-gl .gldoors { display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border); }
.mhq-gl .glopt.door { border-style: dashed; }
.mhq-gl .glopt.door .n { font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.mhq-gl .glopt.door:hover .n { color: var(--accent); }

/* ── WHAT A FINISHED RUNG SAYS ────────────────────────────────────────────
   Alex, 2026-09-10: *"Once it's completed what goes inside needs to change to
   say exactly what they selected."* The answer, not the instructions. It reads
   as a settled fact rather than a control: a tick, a quiet lead-in, and their
   own words at the size of the thing that matters. */
.mhq-gl .glans { display: flex; align-items: flex-start; gap: 10px;
  margin-top: 11px; padding: 12px 13px; border-radius: 12px;
  border: 1px solid var(--good-line, var(--border));
  background: var(--good-soft, var(--surface-2)); }
.mhq-gl .glans[hidden] { display: none !important; }
.mhq-gl .glans .tick { flex: none; font-size: 13px; line-height: 1.5;
  color: var(--good, var(--accent)); font-weight: 700; }
.mhq-gl .glans .txt { display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1 1 auto; }
.mhq-gl .glans .lead { font: 600 10px/1.3 ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
/* ⚠️ `overflow-wrap` BECAUSE ONE OF THESE IS A DOMAIN. A description wraps at
   spaces; "successonyourterms.coach" has none, and on a 390px phone it would
   push the Edit button off the rung. */
.mhq-gl .glans .val { font-size: 14.5px; line-height: 1.5; color: var(--text);
  font-weight: 500; overflow-wrap: anywhere; }
/* The way back to changing it, and it is deliberately not a primary button:
   the coach has finished this step and the page should not be inviting them to
   redo it. */
.mhq-gl .glans .gledit { flex: none; align-self: center; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--text-2); }
.mhq-gl .glans .gledit:hover { border-color: var(--accent); color: var(--accent); }
/* The moment, not a label. It removes itself after six seconds. */
.mhq-gl .glwoo { margin: 11px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--accent-soft, var(--surface-2));
  color: var(--accent-deep, var(--text)); font-size: 13px; font-weight: 600;
  animation: glwoo 240ms ease both; }
@keyframes glwoo { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .mhq-gl .glwoo { animation: none; } }

/* ── WRITING YOUR OWN ─────────────────────────────────────────────────────
   Alex, 2026-09-10: *"For the name it should just allow them to actually write
   their own and save it."* It replaces the three chips in place rather than
   opening anywhere: the coach has just decided our suggestions are wrong, and
   sending them to another screen to fix that is the opposite of the promise this
   page makes. */
/* ⚠️ `display: flex` BEATS THE BROWSER'S `[hidden] { display: none }` AND THIS
   FILE HAS ALREADY BEEN BITTEN BY IT ONCE (`.mhq-door-panel[hidden]`, line ~476).
   The box is rendered hidden and the opener hides itself when pressed; without
   these two rules `el.hidden = true` is a no-op and the coach gets the chips, the
   opener AND the box all at once. */
.mhq-gl .glown[hidden], .mhq-gl .glopt[hidden] { display: none !important; }
.mhq-gl .glown { display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); }
.mhq-gl .glown .lbl { font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.mhq-gl .glown .in { font: inherit; font-size: 14.5px; line-height: 1.4;
  color: var(--text); width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg, var(--surface-2)); }
.mhq-gl .glown .in.ml { font-size: 13.5px; line-height: 1.55; resize: vertical;
  min-height: 4.4em; field-sizing: content; }
.mhq-gl .glown .in:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(0,0,0,.05)); }
.mhq-gl .glown .row { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; }
/* Not a button that competes with Save. It is the way back, and it should read
   as one. */
.mhq-gl .glown .glcancel { cursor: pointer; border: 0; background: transparent;
  padding: 6px 2px; font: inherit; font-size: 12.5px; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 2px; }
.mhq-gl .glown .glcancel:hover { color: var(--text); }
/* ⚠️ `align-self: flex-start` ON `.glopt.use` WOULD STRETCH IT IN THIS ROW. The
   row is a flex container of its own, so the button needs its own margin rule
   rather than inheriting the column's. */
.mhq-gl .glown .row .glopt.use { align-self: auto; margin: 0; }

/* ⚠️ THE `.glr.open` SURFACE RULE BEATS THIS ONE AND TURNED IT INTO A BLANK
   WHITE BOX. `.mhq-gl .glr.open .glopt { background: var(--surface) }` is 0,4,0;
   `.mhq-gl .glopt.use` is 0,3,0. So inside an open rung — which is the ONLY
   place this button ever renders — the primary action lost its accent while its
   label kept `color: var(--on-accent)`. White text on a white button.
   Alex, 2026-09-10: *"the white button is obviously not correct."*
   It was my own "panels take the surface back so they stay readable" rule
   catching a button that is not a panel. Scoped to match. */
.mhq-gl .glopt.use,
.mhq-gl .glr.open .glopt.use { align-self: flex-start; border-color: var(--accent);
  background: var(--accent); }
.mhq-gl .glopt.use .n { color: var(--on-accent, #fff); }
.mhq-gl .glopt.use:hover,
.mhq-gl .glr.open .glopt.use:hover { background: var(--accent-deep, var(--accent)); }
@media (prefers-reduced-motion: reduce) {
  .mhq-gl .gltone .seg button { transition: none; }
}

/* ── WHAT GOES LIVE ───────────────────────────────────────────────────────
   "Is this what goes live?" cannot be answered from a sentence describing it, so
   the rung shows the thing. The artefact's own shape: a browser bar with the
   address, and the room inside it. */
.mhq-gl .glpv { margin-top: 11px; padding-left: 31px;
  display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.mhq-gl .glpv .card { width: 100%; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; background: var(--surface); }
.mhq-gl .glpv .bar { display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft); }
.mhq-gl .glpv .bar .dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--good, var(--accent)); flex: none; }
.mhq-gl .glpv .bar .url { font: 500 11.5px/1 ui-monospace, monospace;
  color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhq-gl .glpv .inner { padding: 14px 13px 15px; display: flex;
  flex-direction: column; gap: 6px; align-items: flex-start; }
.mhq-gl .glpv .nm { font-size: 16px; font-weight: 700; line-height: 1.25; }
.mhq-gl .glpv .ds { font-size: 13px; line-height: 1.5; color: var(--text-2); }
/* Not a real button — it is what a visitor will see. Styled as one and inert. */
.mhq-gl .glpv .join { margin-top: 4px; padding: 6px 15px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent, #fff);
  font-size: 12.5px; font-weight: 600; pointer-events: none; }

/* ── THE ONE DRAFT THEY CAN EDIT ──────────────────────────────────────────
   A post goes under their name to their members. "Edit it or send it" — and the
   edit half is the important half: a coach who cannot change a word before it is
   published has not approved it, they have accepted it. */
.mhq-gl .gldr { margin-top: 11px; padding-left: 31px;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.mhq-gl .gldr .lbl { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-4); }
/* ⚠️ `font-family: inherit` ON ITS OWN LINE, AND NOT IN THE SHORTHAND. This read
   `font: 400 13.5px/1.6 inherit;` and the whole declaration was INVALID: `inherit`
   is only legal as an entire property value, never as a component of the `font`
   shorthand, so the browser dropped all four parts and the textarea fell back to
   the user-agent default — which for a textarea is monospace.
   The result was the coach's first community post presented to them in a
   typewriter font, looking like a code editor on the one screen written for a
   fifty- and sixty-something coaching audience. Nothing errored and nothing
   failed a test; the PNG showed it in a second. */
.mhq-gl .gldr .tx { width: 100%; box-sizing: border-box; resize: vertical;
  padding: 12px 13px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.6; }
.mhq-gl .gldr .tx:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent); }
/* ⚠️ THE PREVIEW IS CLAMPED, AND BOTH REASONS CAME OUT OF A SCREENSHOT.
   Rendered at 390px the first cut ran the title straight into the body — "Success
   on your termsIn a first session I always ask…" — because both were inline
   spans, and then printed the whole post at full size, taking the page to 4,092px
   on the one rung whose brief is "bite-size".
   So: the title is its own line, the body keeps the blank line between its
   paragraphs (pre-wrap, because the post is plain text and its shape is part of
   what they are approving), and four lines is all the rung shows. The rest is in
   the editor, which is where they are going anyway. */
.mhq-gl .gldr .pv { width: 100%; box-sizing: border-box;
  padding: 12px 13px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); }
.mhq-gl .gldr .pv .t { display: block; font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 5px; }
.mhq-gl .gldr .pv .b { display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.mhq-gl .gldr .hint { margin: 0; font-size: 12.5px; line-height: 1.45;
  color: var(--text-3); }

/* ── THE RHYTHM, AND ITS DATES ────────────────────────────────────────────
   This rung does not post now; it agrees to post three times. The dates are shown
   because they are what is being agreed to — approving a rhythm you cannot
   picture is not approving it. */
.mhq-gl .glsc { margin-top: 11px; padding-left: 31px;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.mhq-gl .glsc .th { font-size: 14px; font-weight: 700; }
.mhq-gl .glsc .rows { list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mhq-gl .glsc .rows li { display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 12px; background: var(--surface); }
.mhq-gl .glsc .rows li + li { border-top: 1px solid var(--border-soft); }
.mhq-gl .glsc .dt { flex: none; min-width: 52px;
  font: 600 11.5px/1.5 ui-monospace, monospace; color: var(--accent-deep, var(--accent)); }
.mhq-gl .glsc .bd { font-size: 13px; line-height: 1.5; color: var(--text-2); }

.mhq-gl .glopt.busy { opacity: .55; cursor: progress; }
.mhq-gl .glopt[disabled] { cursor: default; }
/* Said out loud when a choice does not land. A tap that silently does nothing is
   worse than an error — the coach taps again and concludes the page is broken. */
.mhq-gl .glsay { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--warn, #b87410); }

/* The rung's own reason, closed. Same rule as the plan's strategy at the top:
   worth having, not worth being the thing between a coach and the step. */
.mhq-gl .glr .glwhyrung { margin-top: 9px; padding-left: 31px; }
.mhq-gl .glr .glwhyrung > summary { cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.mhq-gl .glr .glwhyrung > summary::-webkit-details-marker { display: none; }
.mhq-gl .glr .glwhyrung > summary::before { content: ''; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms ease; }
.mhq-gl .glr .glwhyrung[open] > summary::before { transform: rotate(45deg); }
.mhq-gl .glr .glwhyrung .w { padding-left: 0; margin-top: 4px; }

/* The ask, on the closed row: how little of their time this costs, before they
   open anything. Their seconds only. */
.mhq-gl .glr .secs { flex: none; font: 600 10.5px/1 ui-monospace, monospace;
  color: var(--accent-deep, var(--accent));
  background: var(--accent-softer, var(--accent-soft));
  padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.mhq-gl .glr.done .secs { display: none; }

.mhq-gl .glr.done { background: var(--surface-2); border-color: var(--border-soft); }
.mhq-gl .glr.done .tick { background: var(--good, var(--accent)); border-color: transparent;
  color: var(--on-accent, #fff); }
.mhq-gl .glr.done .t { color: var(--text-2); }
/* ⚠️ NO STRIKETHROUGH ON A DONE RUNG. Struck-out reads as cancelled; these are
   the coach's wins, and the first three are the head start the page opens with. */

/* ── THE FORMULA, THE NAME, AND THE FINALE ───────────────────────────────
   The three pieces the build had left out of the approved artefact. */

/* ⚠️ THE SENTENCE THAT STOPS THIS READING AS A TEMPLATE. Raised off the page like
   the artefact's card, and in the display face rather than the body one, because
   it is a statement about the method and not another line of copy. */
.mhq-gl .glform { background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 17px; display: flex; flex-direction: column;
  gap: 8px; }
/* The face comes from `.display` in the markup — the platform's own class, which
   is Bricolage Grotesque. A second font-family here would be a second place to
   change it the day that stack moves. */
.mhq-gl .glform .fh { margin: 0; font-size: 17.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
  color: var(--text); }
.mhq-gl .glform .fp { margin: 0; font-size: 13.5px; line-height: 1.55;
  color: var(--text-2); }

/* Their room's name, in the heading, in the accent. The one word on the page that
   is theirs rather than ours. */
.mhq-gl-page .glname, .page-head .glname { color: var(--accent); }

/* ⚠️ THE TOP OF THE LADDER. Bordered in the accent rather than the gold, because
   gold means "you are here" and this is the one thing on the page that is not a
   step — it is what the steps were for. */
.mhq-gl .glfin { border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column;
  gap: 12px; }
.mhq-gl .glfin .k { margin: 0; font: 600 10.5px/1 ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep, var(--accent)); }
.mhq-gl .glfin h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.18; letter-spacing: -.02em;
  color: var(--text); }
.mhq-gl .glfin .p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.mhq-gl .glfin .p b { color: var(--text); font-weight: 600; }
.mhq-gl .glfin .live { margin: 0; display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--good, #15803d);
  border-radius: 11px; padding: 10px 13px;
  font: 500 12px/1.3 ui-monospace, monospace; color: var(--good, #15803d);
  word-break: break-all; }
.mhq-gl .glfin .live .dot { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good, #15803d); }
.mhq-gl .glfin .glgo.fin { margin: 2px 0 0; align-self: flex-start; }

/* ⚠️ THE CELEBRATION SITS OVER EVERYTHING AND CATCHES NOTHING. A full-viewport
   canvas that swallowed a tap would turn the best moment on the page into a
   button that did not work. It is removed when it finishes, not just cleared. */
.glburst { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }

/* ⚠️ GOLD FOR "THIS IS THE ONE YOU ARE ON", PURPLE FOR "PRESS THIS".
   The approved artefact separates them deliberately and this build had both in
   purple, so the open rung and the button inside it competed: the eye landed on
   the rung's own outline instead of on the one thing to do. Gold frames, purple
   acts, and the difference is visible before a word is read.
   The tick is dashed rather than solid — an outline waiting to be filled in,
   which is what the rung is. */
.mhq-gl .glr.open { border-color: var(--gl-gold-line);
  background: var(--gl-gold-soft);
  box-shadow: 0 2px 4px rgba(21,23,43,.06), 0 14px 34px -14px rgba(180,83,9,.22); }
.mhq-gl .glr.open .flag { background: var(--gl-gold); color: #fff;
  padding: 3px 7px; border-radius: 999px; }
.mhq-gl .glr.open .tick { border-color: var(--gl-gold); border-style: dashed; }
/* The rung's own panels sit ON the gold, so they take the page's surface back to
   stay readable — the pair and the options must not tint. */
.mhq-gl .glr.open .pair, .mhq-gl .glr.open .glopt, .mhq-gl .glr.open .gldr .pv,
.mhq-gl .glr.open .glpv, .mhq-gl .glr.open .gltone .draft { background: var(--surface); }

/* ⚠️ THE QUEUE, SAID OUT LOUD. The artefact flags the rungs ahead Next / Then /
   Then / Last, so a coach can see how much is in front of them without counting.
   Ours showed only a seconds pill, which says how long one step takes and
   nothing about the shape of the rest. */
.mhq-gl .glr.ahead .flag { border: 1px solid var(--border); padding: 3px 7px;
  border-radius: 999px; color: var(--text-4); }

.mhq-gl .glgo { margin: 11px 0 0 31px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 9px 18px;
  background: var(--accent); color: var(--on-accent, #fff);
  font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.mhq-gl .glgo:hover { background: var(--accent-deep, var(--accent)); }

@media (max-width: 640px) {
  .mhq-gl .glr .row { padding: 11px 12px; gap: 9px; }
  .mhq-gl .glr .body, .mhq-gl .glr[data-open="1"] .body { padding-left: 12px;
    padding-right: 12px; }
  .mhq-gl .glr .o, .mhq-gl .glr .w, .mhq-gl .glr .gn, .mhq-gl .glr .d,
  .mhq-gl .glr .glease { padding-left: 29px; }
  /* ⚠️ THE SAME EXCEPTION AS ON THE DESKTOP RULE, AND IT HAS TO BE RESTATED
     BECAUSE THE INDENT IS. Two different `.d`s live inside `.glr`: the rung's
     own outcome line, indented to clear the tick, and an option chip's REASON,
     which sits inside a chip that already has its own padding. Fixing only the
     desktop rule left every reason on a PHONE sitting 29px right of the name it
     belongs to — measured at 390px (name 70, reason 99) after the desktop fix
     measured clean at 1440. One fix, two rules, because there are two rules.
     tests/maya-hq-chip-reason-alignment.test.js fails if either loses it. */
  .mhq-gl .glopt .d { padding-left: 0; }
  .mhq-gl .glopts, .mhq-gl .glr .glwhyrung, .mhq-gl .gltone,
  .mhq-gl .glpv, .mhq-gl .gldr, .mhq-gl .glsc { padding-left: 29px; }
  .mhq-gl .glgo { margin-left: 29px; }
}

/* ── THE MODAL, SO A RUNG NEVER TAKES THEM OFF THE CHECKLIST ───────────────
   Alex, 2026-09-10: *"I don't want them to be taken away from the checklist, as
   it might be difficult for them to find their way back."* One sheet, shared by
   the first post and the finish line, in the app's own surfaces — no new palette
   and nothing borrowed from the chat panel, which has its own sheet for a
   different job (a preview, not a form). */
.glm-open { overflow: hidden; }
.glmodal { position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: flex-end; justify-content: center; }
.glmodal .glm-back { position: absolute; inset: 0; background: rgba(21,23,43,.42); }
.glmodal .glm-sheet { position: relative; width: 100%; max-width: 640px;
  max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 8px rgba(21,23,43,.08), 0 -20px 60px -20px rgba(21,23,43,.3); }
@media (min-width: 680px) {
  .glmodal { align-items: center; }
  .glmodal .glm-sheet { border-radius: 16px; max-height: 86dvh; }
}
.glmodal .glm-head { display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border-soft); }
.glmodal .glm-head h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700;
  color: var(--text); }
.glmodal .glm-x { margin-left: auto; flex: none; width: 32px; height: 32px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: 13px; cursor: pointer; }
.glmodal .glm-x:hover { color: var(--text); border-color: var(--text-3); }
.glmodal .glm-body { padding: 16px; overflow-y: auto; }
.glmodal .glm-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.glmodal .glm-l { display: block; font: 600 11.5px/1 ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; }
.glmodal .glm-in, .glmodal .glm-ta { width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.55; }
.glmodal .glm-in { margin-bottom: 14px; }
.glmodal .glm-ta { resize: vertical; min-height: 180px; }
.glmodal .glm-in:focus, .glmodal .glm-ta:focus { outline: 2px solid var(--accent);
  outline-offset: 1px; border-color: transparent; }
.glmodal .glm-err { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #b3261e; }
/* ⚠️ THE BUTTON STYLE HAS TO BE RESTATED HERE, AND THE REASON IS WORTH KNOWING.
   `.glgo` is scoped `.mhq-gl .glgo`, and this sheet is appended to <body> —
   OUTSIDE `.mhq-gl` — so in the first render both doors of the finish-line modal
   came out unstyled grey and the primary action did not read as one. Caught in a
   screenshot; invisible in the markup, which has the right classes on it. */
.glmodal .glgo { cursor: pointer; border: 0; border-radius: 999px;
  padding: 11px 20px; background: var(--accent); color: var(--on-accent, #fff);
  font-size: 14px; font-weight: 600; line-height: 1.25; font-family: inherit; }
.glmodal .glgo:hover { background: var(--accent-deep, var(--accent)); }
.glmodal .glgo.ghost { background: var(--surface); color: var(--text);
  border: 1px solid var(--border); }
.glmodal .glgo.ghost:hover { background: var(--surface-2); border-color: var(--text-3); }
.glmodal .glgo[disabled] { opacity: .6; cursor: default; }
.glmodal .glm-foot { margin-top: 16px; }
.glmodal .glm-foot .glgo { width: 100%; }

/* The finish line's two doors: the big one first, because it is the one that
   fills a room rather than the one that empties an address book. */
.glmodal .glm-doors { display: flex; flex-direction: column; gap: 10px; }
.glmodal .glm-doors .glgo { width: 100%; display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; }
.glmodal .glm-doors .glgo .sub { font-size: 12.5px; line-height: 1.45; font-weight: 400;
  opacity: .85; }
.glmodal .glm-doors .glm-big { font-size: 15.5px; }

/* The finish line's own button, under its sentence. */
.mhq-gl .glnext .glgo { margin-top: 12px; }

/* ── RUNG 6: THE FINISH LINE'S TWO DOORS ──────────────────────────────────
 *
 * ⚠️ SAME MARKUP AS THE ADDRESS RUNG'S DOORS, DELIBERATELY NOT THE SAME WEIGHT.
 * `.gldoors` above is an "or, if none of those" row: dashed, quieter, sitting
 * under three chips that are the real answer. On rung 6 there are no chips —
 * the doors ARE the answer, and the last screen of the ladder is the worst
 * place to render the only two controls in the de-emphasised style that means
 * "probably not this". `.main` puts the weight back: solid edge, body colour,
 * and no dashed rule above them, because there is nothing above them to be an
 * alternative to.
 */
.mhq-gl .glq { margin: 10px 0 8px; font-size: 14px; line-height: 1.5;
  font-weight: 600; color: var(--text); }
.mhq-gl .gldoors.main { padding-top: 0; border-top: 0; margin-top: 0; }
.mhq-gl .gldoors.main .glopt.door { border-style: solid; }
.mhq-gl .gldoors.main .glopt.door .n { color: var(--text); font-size: 14px; }

/* The challenge pitch's two buttons, side by side and wrapping on a phone. */
.glmodal .glm-actions { display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; }
.glmodal .glm-actions .glgo { flex: 1 1 auto; }
/* Brainstorming and Building (maya-hq/modes.js): the mode beside her name. */
.mhq-mode { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  font: 700 11px/1.5 Inter, sans-serif; letter-spacing: 0; vertical-align: 2px;
  background: var(--accent-soft, #f1edff); color: var(--accent, #5a3fd6); border: 1px solid #d9d0ff; }
.mhq-mode[hidden] { display: none; }
.mhq-mode[data-mode="building"] { background: #e9f7ef; color: #16794a; border-color: #bfe5cf; }
.mhq-go-build .btn { min-height: 44px; }