/* ═══ Mind Climate component library — consumes --mc-* tokens only ═══ */
*, *::before, *::after { box-sizing: border-box; }

.mc-page {
  margin: 0;
  background: var(--mc-bg);
  color: var(--mc-ink);
  font-family: var(--mc-font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* — Typography utilities — */
.mc-display-1 { font-family: var(--mc-font-display); font-weight: 600; font-size: 2.6rem; line-height: 1.05; color: var(--mc-ink); margin: 0; }
.mc-display-2 { font-family: var(--mc-font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: var(--mc-ink); margin: 0; }
.mc-h3       { font-family: var(--mc-font-sans); font-weight: 600; font-size: 1rem; color: var(--mc-ink); margin: 0; }
.mc-body     { font-size: 0.95rem; line-height: 1.6; color: var(--mc-ink-2); }
.mc-small    { font-size: 0.82rem; line-height: 1.5; color: var(--mc-muted); }
.mc-eyebrow  { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-primary); margin: 0 0 var(--mc-space-3); }
.mc-muted    { color: var(--mc-muted); }
.mc-mono     { font-family: var(--mc-font-mono); font-size: 0.82rem; color: var(--mc-ink-2); background: var(--mc-panel); border: 1px solid var(--mc-hairline); border-left: 2px solid var(--mc-primary); border-radius: var(--mc-radius-sm); padding: var(--mc-space-2) var(--mc-space-3); display: inline-block; }
.mc-num      { font-family: var(--mc-font-sans); font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a { color: var(--mc-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(.mc-btn, .mc-nav__link, .mc-tab, .mc-seg button, .mc-theme-toggle, .mc-input, .mc-select):focus-visible {
  outline: 2px solid var(--mc-focus); outline-offset: 2px;
}

/* — Nav + brand — */
.mc-nav { display: flex; align-items: center; gap: var(--mc-space-4); padding: var(--mc-space-3) var(--mc-space-5); background: var(--mc-surface); border-bottom: 1px solid var(--mc-hairline); }
.mc-brand { display: flex; align-items: center; gap: var(--mc-space-3); }
.mc-brand__mark { display: inline-flex; align-items: center; color: var(--mc-primary); }
.mc-brand__wm { font-family: var(--mc-font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--mc-ink); }
.mc-nav__links { display: flex; gap: var(--mc-space-4); margin-left: auto; }
.mc-nav__link { font-size: 0.85rem; font-weight: 500; color: var(--mc-muted); }
.mc-nav__link:hover, .mc-nav__link.is-active { color: var(--mc-ink); text-decoration: none; }

/* — Theme toggle — */
.mc-theme-toggle { font-family: var(--mc-font-sans); font-size: 0.78rem; font-weight: 600; color: var(--mc-ink); background: var(--mc-panel); border: 1px solid var(--mc-hairline); border-radius: var(--mc-radius); padding: var(--mc-space-2) var(--mc-space-3); cursor: pointer; }
.mc-theme-toggle:hover { border-color: var(--mc-primary); }

/* — Style-guide layout — */
.mc-sg { max-width: 1100px; margin: 0 auto; padding: var(--mc-space-5) var(--mc-space-5) 64px; display: flex; flex-direction: column; gap: var(--mc-space-4); }
.mc-card { background: var(--mc-surface); border: 1px solid var(--mc-hairline); border-radius: var(--mc-radius-lg); padding: var(--mc-space-5); }
.mc-card--inset { background: var(--mc-panel); }

/* — Colour swatches — */
.mc-swatches { display: flex; flex-wrap: wrap; gap: var(--mc-space-3); }
.mc-sw { width: 100px; }
.mc-sw__chip { height: 46px; border-radius: var(--mc-radius); border: 1px solid rgba(0,0,0,.08); }
.mc-sw__name { font-size: 0.64rem; font-weight: 600; margin-top: var(--mc-space-1); color: var(--mc-ink); }
.mc-sw__hex { font-size: 0.58rem; font-family: var(--mc-font-mono); color: var(--mc-muted); }

/* — Risk ramp display — */
.mc-ramp { display: flex; border-radius: var(--mc-radius); overflow: hidden; border: 1px solid var(--mc-hairline); }
.mc-ramp__tier { flex: 1; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.56rem; font-weight: 700; text-align: center; line-height: 1.15; }
.mc-ramp__tier span { font-weight: 500; opacity: .85; }
.mc-tier-thriving   { background: var(--mc-tier-thriving);   color: var(--mc-tier-thriving-ink); }
.mc-tier-resilient  { background: var(--mc-tier-resilient);  color: var(--mc-tier-resilient-ink); }
.mc-tier-baseline   { background: var(--mc-tier-baseline);   color: var(--mc-tier-baseline-ink); }
.mc-tier-watch      { background: var(--mc-tier-watch);      color: var(--mc-tier-watch-ink); }
.mc-tier-concerning { background: var(--mc-tier-concerning); color: var(--mc-tier-concerning-ink); }
.mc-tier-elevated   { background: var(--mc-tier-elevated);   color: var(--mc-tier-elevated-ink); }
.mc-tier-severe     { background: var(--mc-tier-severe);     color: var(--mc-tier-severe-ink); }
.mc-tier-crisis     { background: var(--mc-tier-crisis);     color: var(--mc-tier-crisis-ink); }

/* — Buttons — */
.mc-btn { font-family: var(--mc-font-sans); font-size: 0.85rem; font-weight: 600; border-radius: var(--mc-radius); padding: 9px 17px; border: 1px solid transparent; cursor: pointer; transition: background var(--mc-motion-fast), border-color var(--mc-motion-fast); }
.mc-btn--sm { font-size: 0.78rem; padding: 6px 12px; }
.mc-btn--primary { background: var(--mc-primary); color: var(--mc-primary-ink); }
.mc-btn--primary:hover { filter: brightness(1.06); }
.mc-btn--secondary { background: var(--mc-surface); color: var(--mc-ink); border-color: var(--mc-hairline); }
.mc-btn--secondary:hover { border-color: var(--mc-primary); }
.mc-btn--amber { background: var(--mc-amber); color: var(--mc-amber-ink); }
.mc-btn--amber:hover { filter: brightness(1.05); }
.mc-btn--ghost { background: transparent; color: var(--mc-primary); }
.mc-btn--ghost:hover { background: var(--mc-primary-soft); }

/* — Badges / pills / dots — */
.mc-badge { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--mc-radius-sm); display: inline-block; }
.mc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 600; color: var(--mc-primary); background: var(--mc-primary-soft); border: 1px solid var(--mc-hairline); border-radius: 20px; padding: 4px 10px; }
.mc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }

/* — Entity card — */
.mc-entity { background: var(--mc-panel); border: 1px solid var(--mc-hairline); border-radius: var(--mc-radius); padding: var(--mc-space-4); }
.mc-entity__top { display: flex; align-items: baseline; gap: 9px; }
.mc-entity__name { font-size: 0.95rem; font-weight: 600; color: var(--mc-ink); }
.mc-entity__score { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.8rem; color: var(--mc-ink); }
.mc-entity__sub { font-size: 0.78rem; color: var(--mc-muted); margin-top: 6px; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--mc-space-3); }

/* — Table — */
.mc-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.mc-table th { text-align: left; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-muted); padding: 8px 10px; border-bottom: 1px solid var(--mc-hairline); }
.mc-table td { padding: 9px 10px; border-bottom: 1px solid var(--mc-panel); font-variant-numeric: tabular-nums; color: var(--mc-ink-2); }
.mc-table tr:last-child td { border-bottom: none; }

/* — Tabs — */
.mc-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--mc-hairline); }
.mc-tab { font-size: 0.85rem; font-weight: 500; color: var(--mc-muted); padding: 9px 1px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; }
.mc-tab.is-active { color: var(--mc-ink); font-weight: 600; border-bottom-color: var(--mc-primary); }

/* — Segmented toggle (overlay switch) — */
.mc-seg { display: inline-flex; background: var(--mc-panel); border-radius: var(--mc-radius); padding: 3px; gap: 3px; }
.mc-seg button { font-family: var(--mc-font-sans); font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: var(--mc-radius-sm); color: var(--mc-muted); border: none; background: none; cursor: pointer; }
.mc-seg button.is-active { background: var(--mc-surface); color: var(--mc-ink); box-shadow: var(--mc-shadow-1); }

/* — Form controls — */
.mc-input, .mc-select { font-family: var(--mc-font-sans); font-size: 0.85rem; color: var(--mc-ink); background: var(--mc-surface); border: 1px solid var(--mc-hairline); border-radius: var(--mc-radius); padding: 8px 11px; }
.mc-input::placeholder { color: var(--mc-muted); }
.mc-input:focus, .mc-select:focus { border-color: var(--mc-primary); outline: none; }

/* — Floating panel shell (W2/W5 detail panel) — */
.mc-panel-float { background: var(--mc-surface); border: 1px solid var(--mc-hairline); border-radius: var(--mc-radius-lg); box-shadow: var(--mc-shadow-2); padding: var(--mc-space-4) var(--mc-space-5); }

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }