/*
 * Shared IAQng tool-page foundation: design tokens + base reset. Loaded once for BOTH the room
 * risk model and the intervention planner (via ToolLayout), so the two tools share ONE canonical
 * theme palette instead of drifting copies in each page's head (the risk-model head, for example,
 * was missing --panel-2 and used a slightly different background-gradient position). Page chrome,
 * typography and component CSS still live in each page's own head — those are the next dedup pass.
 */
:root {
  color-scheme: dark;
  --bg: #050707;
  --panel: #0a1011;
  --panel-2: #0d1517;
  --line: rgba(130, 222, 236, 0.25);
  --line-strong: rgba(130, 222, 236, 0.46);
  --ink: #f6f2e8;
  --muted: #bed0d0;
  --dim: #738488;
  --cyan: #67daf8;
  --mint: #82e1b3;
  --amber: #f1c65a;
  --clay: #df806c;
  --olive: #b6d76e;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 6%, rgba(103, 218, 248, 0.14), transparent 33rem),
    linear-gradient(180deg, #050707 0%, #030505 58%, #10130f 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.tool-icon {
  /* FA7's base rule sets width:var(--fa-width) and display:var(--fa-display) on
     .fa-solid and loads after this file, so it overrides a plain width/display
     here (collapsing the badge to a tall oval). Drive both through FA's own
     custom properties so the round badge survives regardless of load order. */
  --fa-width: 1.85em;
  --fa-display: inline-grid;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.85em;
  height: 1.85em;
  margin-right: 0.45rem;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 0.72rem;
  line-height: 1;
}

/* ------------------------------------------------------------------
   Shared tool shell: rules that were byte-identical in BOTH the risk-
   model and planner heads (chrome, typography, form controls, cards,
   the feedback form). Page-specific component CSS — and the handful of
   intentionally per-page values (main width, hero, fonts) — stay in
   each page head.
   ------------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 72px;
  padding: 0 3.6%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(2, 4, 4, 0.9);
  backdrop-filter: blur(14px);
}

.brand {
  font-size: 1.45rem;
  font-weight: 950;
}

.brand span {
  color: var(--mint);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.15rem;
  color: rgba(246, 242, 232, 0.72);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nav a:hover {
  color: var(--cyan);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.65rem;
  padding: 0.72rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 58%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: var(--mint);
  font-weight: 700;
  line-height: 1.1;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.text-link:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transform: translateY(-1px);
}

.text-link.secondary {
  color: var(--cyan);
}

.panel {
  padding: 1.2rem;
}

.control-group h3 {
  display: flex;
  align-items: center;
  margin-bottom: 0.55rem;
  color: var(--amber);
  font-size: 0.92rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.control-group h3.cat-air { color: var(--cyan); }

.control-group h3.cat-people { color: var(--amber); }

.control-group h3.cat-service { color: var(--clay); }

.control-group h3.cat-context { color: var(--olive); }

details.advanced-controls {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.16);
}

details.advanced-controls summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

details.advanced-controls summary::-webkit-details-marker {
  display: none;
}

details.advanced-controls summary::after {
  content: "+";
  color: var(--muted);
  font-size: 1rem;
}

details.advanced-controls[open] summary::after {
  content: "-";
}

.advanced-body {
  display: grid;
  gap: 0.72rem;
  padding: 0 0.85rem 0.85rem;
}

/* Sub-section heading inside a single details disclosure — lets one collapsible hold a
   few labeled groups (e.g. Occupancy & activity / Schedule / Vulnerability). */
.adv-subhead {
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.advanced-body > .adv-subhead:first-child {
  padding-top: 0;
  border-top: 0;
}

/* A little breathing room between stacked detail disclosures within a section. */
details.advanced-controls + details.advanced-controls {
  margin-top: 0.45rem;
}

/* The four lens sections read as distinct full-bleed bands (the bleed itself is the
   per-page .control-group padding/margin), each subtly tinted with its category color
   keyed off the section heading. Operations (cat-plan) stays untinted — not a risk lens. */
.control-group:has(h3.cat-air) { background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.control-group:has(h3.cat-people) { background: color-mix(in srgb, var(--amber) 6%, transparent); }
.control-group:has(h3.cat-service) { background: color-mix(in srgb, var(--clay) 6%, transparent); }
.control-group:has(h3.cat-context) { background: color-mix(in srgb, var(--olive) 6%, transparent); }

/* The controls aside drops its top/bottom padding so the tinted section bands run
   edge to edge; overflow:hidden clips them to the panel's rounded corners. The first/last
   sections carry their own inner padding (set per page) so content isn't jammed. */
aside.panel {
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.label-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(246, 242, 232, 0.9);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.readout {
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.control small {
  color: var(--dim);
  font-size: 0.78rem;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
}

/* The four headline lens sliders all run right = higher risk (after the Air flip), so their
   track carries a subtle low->high (cool->warm) gradient to signal that direction at a glance.
   Detail sliders and Operations (constraints) keep the plain cyan fill — some of those run the
   other way (more ventilation / more resource = better), where a risk gradient would mislead. */
input[data-driver]:not([data-driver="constraints"]) {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  background: transparent;
}
input[data-driver]:not([data-driver="constraints"])::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 45%, transparent), color-mix(in srgb, var(--amber) 42%, transparent) 52%, color-mix(in srgb, var(--clay) 72%, transparent));
}
input[data-driver]:not([data-driver="constraints"])::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 45%, transparent), color-mix(in srgb, var(--amber) 42%, transparent) 52%, color-mix(in srgb, var(--clay) 72%, transparent));
}
input[data-driver]:not([data-driver="constraints"])::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid rgba(6, 9, 9, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
input[data-driver]:not([data-driver="constraints"])::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid rgba(6, 9, 9, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.scenario-text {
  min-width: 0;
}

.scenario-card .eyebrow { margin-bottom: 0; }

.scenario-card p { margin-bottom: 0; color: var(--muted); font-size: 0.9rem; }

.metric-label {
  margin-bottom: 0.62rem;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.metric-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.note-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.cta-callout {
  padding: 1.5rem;
  border: 1px solid rgba(135, 230, 244, 0.17);
  border-radius: 8px;
  background: rgba(8, 13, 14, 0.78);
  box-shadow: var(--shadow);
}

.cta-callout .eyebrow {
  margin-bottom: 0.5rem;
}

.cta-callout p {
  color: var(--muted);
  margin-bottom: 1rem;
}

.tool-feedback-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 243, 232, 0.12);
}

.tool-feedback-form label {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.tool-feedback-form span {
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tool-feedback-form input,
.tool-feedback-form select,
.tool-feedback-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(247, 243, 232, 0.16);
  border-radius: 8px;
  background: rgba(3, 6, 6, 0.82);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
}

.tool-feedback-form input,
.tool-feedback-form select {
  min-height: 2.7rem;
  padding: 0.68rem 0.75rem;
}

.tool-feedback-form textarea {
  min-height: 5.5rem;
  padding: 0.75rem;
  resize: vertical;
}

.tool-feedback-form input::placeholder,
.tool-feedback-form textarea::placeholder {
  color: rgba(197, 205, 206, 0.54);
}

.tool-feedback-form input:focus,
.tool-feedback-form select:focus,
.tool-feedback-form textarea:focus {
  border-color: rgba(146, 226, 182, 0.72);
  outline: 2px solid rgba(146, 226, 182, 0.2);
  outline-offset: 2px;
}

.tool-feedback-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.tool-feedback-submit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.tool-feedback-submit button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  border: 1px solid rgba(146, 226, 182, 0.58);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  background: rgba(146, 226, 182, 0.08);
  color: var(--mint);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
}

.tool-feedback-submit p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .tool-feedback-row {
    grid-template-columns: 1fr;
  }
}

/* --- Share a room: button + popover in the scenario card --- */
.scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.scenario-head .eyebrow { margin: 0; }
.share-wrap { position: relative; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.share-btn:hover {
  background: color-mix(in srgb, var(--cyan) 22%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.share-btn i { color: var(--cyan); }
.share-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  width: min(340px, 86vw);
  background: #11171a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.85rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: 0.5rem;
}
.share-pop[hidden] { display: none; }
.share-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.share-label span {
  font-weight: 600;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
}
.share-name,
.share-url {
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.share-name:focus,
.share-url:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.share-link-row {
  display: flex;
  gap: 0.4rem;
}
.share-url {
  flex: 1;
  min-width: 0;
  color: var(--muted);
}
.share-copy {
  flex: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  color: #07120f;
  background: var(--cyan);
  border: 0;
  border-radius: 8px;
  padding: 0 0.85rem;
}
.share-copy.is-copied { background: var(--mint); }
.share-hint {
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}
/* Optional "prepared by / for" credits in the share popover — stacked label+input pairs */
.share-by-row {
  display: grid;
  gap: 0.3rem;
}
.share-by-row .share-label:not(:first-child) {
  margin-top: 0.35rem;
}

/* --- Create a room: full-screen takeover + room library (iaq-designer.js) ---
   The creator is a modal conversation: describe the room, answer any follow-up
   questions, land on a ready room. Rooms it builds live in the "Your rooms" row. */
.scenario-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The "Create a room" chip at the end of the example row — same footprint as the
   example chips, dashed to read as "make your own" rather than a stock example. */
.preset-create {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.7rem;
  padding: 0.4rem 0.7rem;
  border: 1px dashed color-mix(in srgb, var(--cyan) 55%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.preset-create:hover {
  border-color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
}
.preset-create i { color: var(--cyan); }

/* "Your rooms" library row under the examples: rooms built with the creator,
   shared across the tool pages via localStorage. */
.my-rooms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.my-rooms[hidden] { display: none; }
.my-rooms-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.my-room-pill { max-width: 16rem; }

/* Full-screen takeover */
.designer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(4, 10, 12, 0.82);
  backdrop-filter: blur(6px);
}
.designer-overlay[hidden] { display: none; }
body.designer-open { overflow: hidden; }
.designer-modal {
  width: min(640px, 100%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  display: grid;
  gap: 0.9rem;
  background: #11171a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.25rem 1.4rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.designer-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.designer-modal-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.designer-modal-head h2 i { color: var(--cyan); }
.designer-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.designer-close:hover { background: rgba(255, 255, 255, 0.14); }
.designer-step { display: grid; gap: 0.75rem; }
.designer-step[hidden] { display: none; }
.designer-lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.designer-text {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  resize: vertical;
  min-height: 7rem;
}
.designer-text:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.designer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.designer-go,
.designer-continue,
.designer-use {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  color: #07120f;
  background: var(--cyan);
  border: 0;
  border-radius: 9px;
  padding: 0.6rem 1.1rem;
  margin-left: auto;
}
.designer-skip,
.designer-restart,
.designer-mic {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}
.designer-actions button:disabled { opacity: 0.55; cursor: default; }
.designer-mic i { color: var(--cyan); }
.designer-mic.is-listening {
  background: color-mix(in srgb, var(--cyan) 20%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.designer-mic.is-listening i { animation: designer-mic-pulse 1.2s ease-in-out infinite; }
@keyframes designer-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.designer-qa { display: grid; gap: 0.75rem; }
.designer-q { display: grid; gap: 0.35rem; }
.designer-q-label {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.designer-q-input {
  width: 100%;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
}
.designer-q-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.designer-room-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.designer-room-summary {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.designer-status {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}
.designer-status[hidden] { display: none; }
.designer-status.is-error { color: #ff9b8a; }

/* "What this number is" — a one-line clarifier under each tool's headline 0–100 read, so a
   reader crossing the risk model, planner, and forecast doesn't conflate three related-but-
   distinct numbers. Shared class (all three pages load /iaq-tool.css). */
.read-what {
  margin: 0.35rem 0 0;
  max-width: 46ch;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}
.read-what strong { color: var(--ink); font-weight: 800; }

/* Section subtitle under each lens header — the "what it is" definition, smaller than the name */
.lens-what {
  margin: -0.25rem 0 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
}

/* The named room (set via Share), shown above the presets. It's a <button>: click it to reload
   the room (clearing an in-progress custom intervention), so reset the button chrome but keep
   the title look. */
.room-title {
  margin: 0.1rem 0 0.7rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  justify-self: start;
  cursor: pointer;
}
.room-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.room-title::before {
  content: "\f3c5";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  margin-right: 0.45rem;
  color: var(--cyan);
  font-size: 0.9em;
}
.room-title[hidden] { display: none; }

/* Room name + "Prepared by X · for Y" credit stack (set via Share). The byline sits on its
   own row under the name; focus mode enlarges the name (see focus-mode block below). */
.room-id { display: grid; gap: 0.15rem; min-width: 0; }
.room-byline {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
.room-byline[hidden] { display: none; }

/* The current-room pill, woven into the scenario examples just above the preset grid.
   Shared by the risk model + planner: a lit example chip is a stock room; this pill is
   your own room (custom / named / loaded), with a reset to return to a clean example. */
.preset-inherited {
  min-width: 0; /* a grid cell like the chips: fills its column, shrinks to truncate a long name */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.7rem;
  padding: 0.4rem 0.45rem 0.4rem 0.7rem;
  border: 1px solid rgba(103, 218, 248, 0.26);
  border-radius: 6px;
  background: rgba(103, 218, 248, 0.07);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.preset-inherited:hover { border-color: rgba(130, 225, 179, 0.4); }
/* Lit when it's the current selection — matches an active example chip so "what's selected"
   reads the same whether it's a stock example or your own room. */
.preset-inherited.is-active {
  border-color: rgba(130, 225, 179, 0.58);
  background: rgba(130, 225, 179, 0.12);
  color: var(--mint);
}
.preset-inherited > i { flex: 0 0 auto; font-size: 0.85rem; opacity: 0.85; }
.preset-inherited .pi-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Scoped so a page's generic button styles can't add padding and turn it into an oval. */
.preset-inherited .pill-reset {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 0; /* override a page's global button { min-height/width } */
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1;
}
.preset-inherited .pill-reset:hover { background: var(--cyan); color: #04222b; }

/* --- Custom intervention: the loaded room is the baseline; tuning away shows the change land
   against it, with a band-aware delta (does it clear the uncertainty band, or sit within it?) --- */
.compare-bar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}
.compare-bar[hidden] { display: none; }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.35rem 0.6rem;
}
.compare-col { display: grid; gap: 0.12rem; min-width: 0; }
.compare-col-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.compare-col > strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.compare-sub { font-size: 0.7rem; color: var(--muted); }
.compare-sub b { color: var(--ink); font-weight: 700; }
.compare-tx { margin-top: 0.05rem; }
.compare-tx b { color: var(--cyan); }
.compare-arrow { color: var(--muted); font-size: 0.9rem; text-align: center; }
.compare-delta {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.compare-delta > strong { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.compare-delta > span { font-size: 0.74rem; color: var(--muted); }
.compare-delta.is-down > strong { color: var(--mint); }
.compare-delta.is-up > strong { color: var(--amber); }
.compare-delta.is-soft > strong { opacity: 0.72; }

/* --- Interventions: ranked single-lever fixes for the current room; tap a row to apply it --- */
.interventions-card {
  margin-top: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.2rem;
}
.interventions-head h3 {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.interventions-head > p {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 62ch;
}
/* Magnitude control — how hard each preset lever is pushed (modest / standard / aggressive) */
.interventions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
/* Group header (Clean air / Reduce the source / Reduce demand / Cleaning). */
.iv-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin: 0.7rem 0 0.05rem;
}
.iv-group:first-child {
  margin-top: 0;
}
.iv-group-label {
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
}
.iv-group-note {
  font-size: 0.7rem;
  color: rgba(247, 243, 232, 0.45);
}
/* Per-lever caption (e.g. the exposure-window note). */
.intervention-note {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(247, 243, 232, 0.42);
}
/* Segmented lever (masks): off + each real step as buttons, no toggle/slider. */
.intervention.is-segmented .intervention-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.intervention-segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.4rem;
}
.iv-seg {
  min-height: 2.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.iv-seg:hover {
  border-color: rgba(130, 225, 179, 0.5);
  color: var(--ink);
}
.iv-seg.is-active {
  border-color: rgba(130, 225, 179, 0.7);
  background: rgba(130, 225, 179, 0.14);
  color: var(--mint);
}
/* Plan total: combined effect of every applied lever. */
.intervention-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(103, 218, 248, 0.3);
  border-radius: 10px;
  background: rgba(103, 218, 248, 0.06);
}
.iv-summary-tag {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cyan);
}
.iv-summary-read,
.iv-summary-tx {
  font-size: 0.85rem;
  color: var(--muted);
}
.iv-summary-read b,
.iv-summary-tx b {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.iv-summary-labor {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.45rem;
  min-width: min(100%, 24rem);
  color: var(--muted);
  font-size: 0.8rem;
}
.iv-summary-labor b {
  color: var(--amber);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.iv-summary-labor span {
  color: var(--muted);
}
.iv-summary-empty {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Each lever is a small card: header (icon · label · level desc · impact) then its own slider. */
.intervention {
  display: grid;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.intervention.is-on {
  border-color: rgba(130, 225, 179, 0.38);
  background: rgba(130, 225, 179, 0.05);
}
/* Not applied: numbers, scale, and slider stay fully live — just muted so the applied levers
   (mint) stand out as the plan. */
.intervention:not(.is-on) .iv-stat > strong {
  color: var(--muted);
}
.intervention-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.intervention-toggle {
  display: inline-flex;
  cursor: pointer;
}
.intervention-toggle input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.intervention-switch {
  position: relative;
  width: 2.1rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.intervention-switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}
.intervention-toggle input:checked + .intervention-switch {
  background: rgba(130, 225, 179, 0.32);
  border-color: rgba(130, 225, 179, 0.5);
}
.intervention-toggle input:checked + .intervention-switch::after {
  transform: translateX(0.95rem);
  background: var(--mint);
}
.intervention-toggle input:focus-visible + .intervention-switch {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.intervention-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cyan);
  font-size: 0.9rem;
}
.intervention-text { min-width: 0; }
.intervention-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
}
.intervention-desc {
  font-size: 0.74rem;
  color: var(--muted);
}
.intervention-impact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 0.85rem;
  align-items: baseline;
}
.iv-stat {
  display: grid;
  gap: 0.05rem;
  text-align: right;
  min-width: 3.2rem;
}
.iv-stat > strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mint);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.iv-stat > span {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.intervention-off {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.intervention-slider {
  width: 100%;
  accent-color: var(--cyan);
}
/* Gray track until the lever is applied — the color signals it's part of the plan. */
.intervention:not(.is-on) .intervention-slider {
  accent-color: rgba(255, 255, 255, 0.28);
}
.intervention-scale {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dim);
}
.interventions-empty {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* Custom intervention: the user's own slider edits, modeled against the room. Lives below the
   preset list, separated by a rule. */
.custom-intervention {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.interventions-sub {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.interventions-sub span {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.interventions-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.interventions-hint[hidden] { display: none; }
.custom-intervention .compare-bar { margin-top: 0.7rem; }

/* --- Focus mode: page opened from a shared room reframes as "the read on THIS room" --- */
.is-focus [data-focus-hide] { display: none; }
.is-focus .scenario-head .eyebrow,
.is-focus .scenario-text { display: none; }
/* The verbose "Load a room example" section-head is replaced everywhere by a single intro
   line (.focus-intro) above the room selector — preset view and shared/custom view alike. */
#model > .section-head,
#planner > .section-head { display: none; }
.focus-intro {
  display: block;
  margin: 0 0 1.45rem;
  color: var(--muted);
  font-size: 1.4rem;
}
/* Inline lens color-coding for the lens words in prose (hero lead, focus intro) — a faint
   hue tint blended toward the muted text color, no extra weight, so it stays super subtle. */
.lens-air { color: color-mix(in srgb, var(--cyan) 30%, var(--muted)); }
.lens-people { color: color-mix(in srgb, var(--amber) 30%, var(--muted)); }
.lens-service { color: color-mix(in srgb, var(--clay) 30%, var(--muted)); }
.lens-context { color: color-mix(in srgb, var(--olive) 30%, var(--muted)); }
.scenario-head-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  min-width: 0;
}
.scenario-head-left .room-title { margin: 0; }
.scenario-head-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
/* Focus mode header: the name gets its own (larger) row with the byline beneath it; the Share
   button is hidden (a recipient is viewing a prepared read), and "See other room types" sits in
   the right corner. */
.is-focus .scenario-head-left { align-items: flex-start; }
.is-focus .room-title { font-size: 1.5rem; }
/* Collapse the room-type presets behind the "See other room types" toggle (class, not the
   [hidden] attr, which .preset-row's own display rule would override). */
.preset-row.is-collapsed { display: none; }
.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start; /* scenario-card is a grid; don't stretch full width */
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.compare-toggle:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.38);
}
.compare-toggle[hidden] { display: none; }