/**
 * 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;
}
#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 ──────────────────────────────────────────────────────── */
.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;
}
.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);
}
.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; }
}