/* ════════════════════════════════════════════════════════════════════════
   Mind Climate — platform shell (W3)
   Layout for the /app shell, the editorial home, the floating chrome, and the
   expandable hub. Consumes W1 --mc-* tokens + components.css ONLY — no new
   colours, no hardcoded values. Class names are behavioural / signal-agnostic.
   ════════════════════════════════════════════════════════════════════════ */

/* ── App shell: full-bleed map under a fixed nav; all chrome floats over it ── */
.mc-app        { height: 100dvh; display: flex; flex-direction: column; background: var(--mc-bg); overflow: hidden; }
.mc-app__nav   { flex: 0 0 auto; }                       /* reuse .mc-nav */
.mc-app__stage { position: relative; flex: 1 1 auto; min-height: 0; }  /* map + floating chrome */
.mc-app__map   { position: absolute; inset: 0; }         /* W2 map fills the stage */
.mc-app__map svg { display: block; }

/* Sign-in / get-access cluster in the nav */
.mc-nav__auth  { display: flex; align-items: center; gap: var(--mc-space-2); }

/* ── Floating chrome (sits over the map; never couples map sizing) ─────────── */
.mc-float            { position: absolute; z-index: 5; }
.mc-float--toggle    { top: var(--mc-space-4); left: 50%; transform: translateX(-50%); }
.mc-float--legend    { left: var(--mc-space-4); bottom: var(--mc-space-4); }

/* ── Map tooltip behaviour (map.css gives the chrome; style.css — which the new
      pages don't load — owns position/visibility, so define it here) ───────── */
#map-tooltip          { position: fixed; pointer-events: none; opacity: 0;
                        transition: opacity .1s; z-index: 200; max-width: 200px; }
#map-tooltip.visible  { opacity: 1; }
#map-tooltip .tt-score { font-size: 0.76rem; }

/* ── Overlay toggle states (layered on .mc-seg button from components.css) ─── */
.mc-seg button.is-soon,
.mc-seg button.is-locked { opacity: .5; cursor: not-allowed; }
.mc-seg button .mc-pill  { padding: 1px 7px; font-size: 0.58rem; margin-left: 4px; }
.mc-seg button .mc-lock  { margin-left: 4px; font-size: 0.7rem; }

/* ── Legend (reads the active overlay's --mc-tier-* tokens inline) ─────────── */
.mc-legend        { background: var(--mc-surface); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius); box-shadow: var(--mc-shadow-1);
                    padding: var(--mc-space-3) var(--mc-space-4); max-width: 220px; }
.mc-legend__title { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
                    text-transform: uppercase; color: var(--mc-muted); margin-bottom: var(--mc-space-2); }
.mc-legend__row   { display: flex; align-items: center; gap: var(--mc-space-2);
                    font-size: 0.72rem; color: var(--mc-ink-2); line-height: 1.7; }
.mc-legend__sw    { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto;
                    border: 1px solid rgba(0,0,0,.08); }

/* ── Expandable hub: docked card (right) ⇄ expanded (covers most of the map) ─ */
.mc-hub             { position: absolute; z-index: 6; top: var(--mc-space-4); right: var(--mc-space-4);
                      bottom: var(--mc-space-4); width: 360px; display: flex; flex-direction: column;
                      gap: var(--mc-space-4); overflow: auto;
                      transition: width var(--mc-motion-fast), left var(--mc-motion-fast); }
.mc-hub.is-hidden   { display: none; }
.mc-hub.is-expanded { left: var(--mc-space-4); width: auto; }   /* expands leftward over the map */

.mc-hub__head       { display: flex; align-items: center; gap: var(--mc-space-3); }
.mc-hub__head .mc-entity__name { font-size: 1.15rem; }
.mc-hub__head-actions { margin-left: auto; display: flex; gap: var(--mc-space-2); }

.mc-hub__scoreline  { display: flex; align-items: baseline; gap: var(--mc-space-3); }
.mc-hub__score      { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2.6rem; line-height: 1; }
.mc-hub__sub        { font-size: 0.78rem; color: var(--mc-muted); }

/* Compact 12-domain breakdown (lighter than panel.js) */
.mc-hub__domains    { display: flex; flex-direction: column; gap: 5px; }
.mc-hub__dom        { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: var(--mc-space-3); }
.mc-hub__dom-name   { font-size: 0.72rem; color: var(--mc-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-hub__dom-track  { position: relative; height: 7px; border-radius: 4px; background: var(--mc-panel); overflow: hidden; }
.mc-hub__dom-bar    { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.mc-hub__dom-val    { font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--mc-muted); text-align: right; }
.mc-hub__section-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
                         text-transform: uppercase; color: var(--mc-muted); }

/* Reserved (W5 funding / W6 analytics) slots */
.mc-hub__reserved   { border: 1px dashed var(--mc-hairline); border-radius: var(--mc-radius);
                      padding: var(--mc-space-4); color: var(--mc-muted); font-size: 0.82rem;
                      display: flex; align-items: center; gap: var(--mc-space-3); }
.mc-hub__reserved .mc-pill { flex: 0 0 auto; }

/* Docked: single column (detail then reserved slots stacked).
   Expanded: two columns so reserved analytics regions get real room (W6 fills). */
.mc-hub__body       { display: flex; flex-direction: column; gap: var(--mc-space-4); }
.mc-hub__primary,
.mc-hub__secondary  { display: flex; flex-direction: column; gap: var(--mc-space-4); min-width: 0; }
.mc-hub.is-expanded .mc-hub__body { display: grid; grid-template-columns: minmax(320px, 360px) 1fr; gap: var(--mc-space-5); align-items: start; }
.mc-hub.is-expanded .mc-hub__reserved { min-height: 160px; align-items: flex-start; }

/* ── Editorial home ───────────────────────────────────────────────────────── */
.mc-home   { max-width: 1100px; margin: 0 auto; padding: var(--mc-space-6) var(--mc-space-5) 64px; }
.mc-hero   { padding: var(--mc-space-6) 0 var(--mc-space-5); max-width: 760px; }
.mc-hero .mc-display-1 { margin-bottom: var(--mc-space-4); }
.mc-hero__sub  { font-size: 1.05rem; color: var(--mc-ink-2); margin: 0 0 var(--mc-space-5); }
.mc-hero__cta  { display: flex; flex-wrap: wrap; gap: var(--mc-space-3); }

.mc-section       { padding: var(--mc-space-6) 0; border-top: 1px solid var(--mc-hairline); }
.mc-section__head { margin-bottom: var(--mc-space-4); }
.mc-what__lead    { font-family: var(--mc-font-display); font-size: 1.4rem; line-height: 1.3;
                    color: var(--mc-ink); max-width: 720px; margin: 0; }
.mc-what__lead em { color: var(--mc-primary); font-style: normal; }

.mc-cred-grid     { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mc-space-3); }
.mc-cred          { background: var(--mc-surface); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius-lg); padding: var(--mc-space-4); }
.mc-cred__big     { font-family: var(--mc-font-display); font-size: 1.5rem; font-weight: 600; color: var(--mc-ink); line-height: 1.15; }
.mc-cred__label   { font-size: 0.78rem; color: var(--mc-muted); margin-top: 4px; }

.mc-cta-band      { background: var(--mc-panel); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius-lg); padding: var(--mc-space-6);
                    text-align: center; margin-top: var(--mc-space-6); }
.mc-cta-band .mc-display-2 { margin-bottom: var(--mc-space-4); }
.mc-cta-band__row { display: flex; flex-wrap: wrap; gap: var(--mc-space-3); justify-content: center; }

.mc-footer        { border-top: 1px solid var(--mc-hairline); background: var(--mc-surface);
                    padding: var(--mc-space-5); }
.mc-footer__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
                    align-items: center; gap: var(--mc-space-4); }
.mc-footer__links { display: flex; gap: var(--mc-space-4); }
.mc-footer__cross { margin-left: auto; font-size: 0.82rem; color: var(--mc-muted); }

/* ── Access modal (new pages don't load style.css, so define it here) ──────── */
.mc-modal         { width: min(520px, calc(100vw - 32px)); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius-lg); background: var(--mc-surface);
                    color: var(--mc-ink); box-shadow: var(--mc-shadow-2); padding: 0; }
.mc-modal::backdrop { background: rgba(16, 24, 32, .5); }
.mc-modal__header { display: flex; align-items: center; justify-content: space-between;
                    padding: var(--mc-space-4) var(--mc-space-5); border-bottom: 1px solid var(--mc-hairline); }
.mc-modal__title  { font-family: var(--mc-font-display); font-size: 1.2rem; font-weight: 600; color: var(--mc-ink); }
.mc-modal__close  { font-size: 1rem; line-height: 1; color: var(--mc-muted); background: none;
                    border: none; cursor: pointer; padding: 4px; }
.mc-modal__close:hover { color: var(--mc-ink); }
.mc-modal__body   { padding: var(--mc-space-5); }
.mc-modal__body p { color: var(--mc-ink-2); font-size: 0.92rem; margin: 0 0 var(--mc-space-4); }
.mc-modal__list   { margin: 0 0 var(--mc-space-5); padding-left: var(--mc-space-5);
                    color: var(--mc-ink-2); font-size: 0.88rem; line-height: 1.8; }

/* ── Responsive: hub becomes a bottom sheet; toggle/legend reflow ─────────── */
@media (max-width: 700px) {
  /* Nav wraps: brand + theme/auth on row 1, links on a full-width row 2. */
  .mc-nav            { flex-wrap: wrap; row-gap: var(--mc-space-2); }
  .mc-brand          { margin-right: auto; }
  .mc-nav__links     { order: 5; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; gap: var(--mc-space-3); }
  .mc-hub            { left: var(--mc-space-3); right: var(--mc-space-3); top: auto;
                       bottom: var(--mc-space-3); width: auto; max-height: 56dvh; }
  .mc-hub.is-expanded { top: var(--mc-space-3); }
  .mc-hub.is-expanded .mc-hub__body { grid-template-columns: 1fr; }
  .mc-float--toggle  { top: var(--mc-space-2); }
  .mc-float--legend  { display: none; }   /* keep the small-screen map uncluttered */
  .mc-home           { padding: var(--mc-space-5) var(--mc-space-4) 48px; }
  .mc-display-1      { font-size: 2rem; }
}