/* Light Environment assessment, rooms, screens, and saved audits. */

.light-page .dashboard-widget[data-widget-id="light-environment"] .dashboard-widget-body {
  gap: 0;
}
.light-page .dashboard-widget[data-widget-id="light-environment"] .light-env-section {
  margin-top: 0;
}
.light-page .dashboard-widget[data-widget-id="light-environment"] .light-section-title {
  display: none;
}
.light-page .dashboard-widget[data-widget-id="light-environment"] .light-env-head {
  margin-bottom: 14px;
}

/* Light Environment — rooms + screens survey */
.light-env-assessment-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 4px solid var(--text-muted);
  padding-left: 14px;
}
.light-env-assessment-summary-green { border-left-color: var(--green); }
.light-env-assessment-summary-orange { border-left-color: var(--orange); }
.light-env-assessment-summary-red { border-left-color: var(--red); }
.light-env-assessment-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.light-env-assessment-tier {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 16px;
}
.light-env-assessment-parts {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.light-env-assessment-lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.light-env-assessment-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.light-env-assessment-metric {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.light-env-assessment-metric-label,
.light-env-assessment-metric span:last-child {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
}
.light-env-assessment-metric strong {
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.light-env-assessment-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.light-env-assessment-overlay.modal-overlay.show {
  align-items: flex-start;
  overflow: hidden;
  padding: 24px;
}
.light-env-assessment-modal {
  width: min(96vw, 980px);
  max-width: 980px;
  max-height: calc(100dvh - 48px);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.light-env-assessment-modal .modal-header {
  margin-bottom: 6px;
  padding-right: 38px;
}
.light-env-assessment-modal-copy {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.light-env-section-embedded {
  margin-top: 0;
}
.light-env-section-embedded .light-env-summary-top {
  margin-top: 0;
}
@media (max-width: 700px) {
  .light-env-assessment-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .light-env-assessment-modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .light-env-assessment-overlay.modal-overlay.show { padding: 0; }
}
@media (max-width: 420px) {
  .light-env-assessment-metrics {
    grid-template-columns: 1fr;
  }
}
.light-env-section { margin-top: 24px; }
.light-env-block { margin-top: 16px; }
.light-env-block-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.light-env-block-head strong {
  color: var(--text-primary); font-size: 14px;
  flex: 1;
}
.light-env-empty {
  font-size: 13px; color: var(--text-muted);
  padding: 12px 0;
}
/* Empty-state CTA card — replaces the flat "No rooms added yet"
   line with a value-prop block + primary action. Mirrors the
   pattern used by other empty surfaces in the app. */
.light-env-empty-cta {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.light-env-empty-cta p {
  margin: 0; color: var(--text-secondary);
  font-size: 13px; line-height: 1.5;
}
.light-env-empty-cta strong { color: var(--text-primary); }
.light-env-rows {
  display: flex; flex-direction: column; gap: 8px;
}
.light-env-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.light-env-input { font-size: 13px; padding: 6px 10px; }
.light-env-row > .light-env-input:first-child { flex: 1; min-width: 100px; }
.light-env-hours { width: 80px; }
.light-env-evening {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-secondary);
}
.light-env-tool {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px; padding: 4px 8px;
  cursor: pointer; color: var(--text-primary);
}
.light-env-tool:hover { background: var(--bg-hover); }
.light-env-delete {
  background: transparent; border: none;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.light-env-delete:hover { color: var(--red); }

/* Indoor-light burden summary — interpretive plain-English copy with
   tier indicator, instead of raw "8.2 hr/day · 4.2 hr/day" numbers
   that read as abstract without context. Color-coded by tier so a
   row of green / orange / red strips down the page tells the story
   at a glance. */
.light-env-summary {
  margin-top: 16px; padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px;
  border-left: 4px solid var(--text-muted);
}
.light-env-summary-top {
  margin: 0 0 18px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg-card) 94%, transparent);
  box-shadow: var(--shadow);
}
.light-env-summary-green  { background: var(--green-bg, rgba(34,197,94,0.06));  border-left-color: var(--green); }
.light-env-summary-orange { background: var(--orange-bg, rgba(249,115,22,0.06)); border-left-color: var(--orange); }
.light-env-summary-red    { background: var(--red-bg, rgba(239,68,68,0.06));    border-left-color: var(--red); }
.light-env-summary-top.light-env-summary-green {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 9%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg-card) 94%, transparent);
}
.light-env-summary-top.light-env-summary-orange {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--orange) 10%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg-card) 94%, transparent);
}
.light-env-summary-top.light-env-summary-red {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 10%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg-card) 94%, transparent);
}
.light-env-summary-kicker {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.light-env-summary-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.light-env-summary-tier {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-primary);
}
.light-env-summary-parts {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.light-env-summary-interp {
  margin: 0; font-size: 13px; line-height: 1.5;
  color: var(--text-secondary);
}
/* Legacy classes used elsewhere — kept for back-compat */
.light-env-summary strong { color: var(--text-primary); }
.light-env-summary-sep { opacity: 0.4; }

/* Severity dot — mirrors EMF assessment color tokens */
.light-env-sev-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; box-shadow: 0 0 6px currentColor;
}
.light-env-sev-green  { background: var(--green);  color: var(--green); }
.light-env-sev-yellow { background: var(--yellow); color: var(--yellow); }
.light-env-sev-orange { background: var(--orange); color: var(--orange); }
.light-env-sev-red    { background: var(--red);    color: var(--red); }
/* Distinct from "Good" — gray dot for rooms that have nothing graders
   can use yet, so users don't read an unreviewed default green dot
   as "we verified you're good." */
.light-env-sev-incomplete {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px dashed var(--text-muted);
  box-shadow: none;
}
.light-env-sev-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted);
  margin-left: auto;
}
/* Severity chip — pill-shaped tinted background, more prominent than
   the previous tiny grey label. Used in room + screen card heads. */
.light-env-sev-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: auto;
}
.light-env-sev-chip-green  { background: var(--green-bg, rgba(34,197,94,0.12));  color: var(--green); }
.light-env-sev-chip-yellow { background: var(--yellow-bg, rgba(234,179,8,0.12)); color: var(--yellow); }
.light-env-sev-chip-orange { background: var(--orange-bg, rgba(249,115,22,0.12)); color: var(--orange); }
.light-env-sev-chip-red    { background: var(--red-bg,    rgba(239,68,68,0.12)); color: var(--red); }
/* Card-level severity accent strip on the left edge — ties room +
   screen cards into the same visual language as the device cards. */
.light-env-card-sev-green::before,
.light-env-card-sev-yellow::before,
.light-env-card-sev-orange::before,
.light-env-card-sev-red::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.light-env-card-sev-green::before  { background: var(--green); }
.light-env-card-sev-yellow::before { background: var(--yellow); }
.light-env-card-sev-orange::before { background: var(--orange); }
.light-env-card-sev-red::before    { background: var(--red); }
.light-env-card-sev-green,
.light-env-card-sev-yellow,
.light-env-card-sev-orange,
.light-env-card-sev-red { position: relative; }
/* Tab severity tint — subtle border-bottom hue so the active+inactive
   tabs both telegraph the room's status. */
.light-env-tab-sev-yellow { border-bottom: 2px solid var(--yellow); }
.light-env-tab-sev-orange { border-bottom: 2px solid var(--orange); }
.light-env-tab-sev-red    { border-bottom: 2px solid var(--red); }

/* Per-day "in use today / skipped today" toggle. Auto-resets at
   midnight so the baseline schedule stays set-and-forget; the toggle
   only affects today's exposure math. */
.light-env-today-toggle {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all 0.15s;
}
.light-env-today-toggle:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.light-env-today-on {
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border-color: var(--green);
  color: var(--green);
}
.light-env-today-off {
  background: var(--bg-secondary);
  border-color: var(--text-muted);
  color: var(--text-muted);
  font-style: italic;
}
/* Cards toggled "skipped today" dim down so the user can see at a
   glance which items aren't contributing to today's burden math.
   The severity chip stays at full opacity (it's a baseline judgement,
   not a today value) so the room's chronic state is still readable. */
.light-env-card-skipped { opacity: 0.55; }
.light-env-card-skipped:hover { opacity: 0.85; }
.light-env-card-skipped .light-env-today-toggle { opacity: 1; }
.light-env-card-skipped .light-env-sev-chip { opacity: 0.85; }

/* Compact mode — icon-only pill in disclosure headers. Most users
   never touch the today-toggle, so it shouldn't burn header space
   with a verbose label. The icon (✓ / ⊘) carries the state; full
   text lives in the title attribute + visually-hidden span for SR. */
.light-env-today-compact {
  width: 26px; height: 26px;
  padding: 0;
  justify-content: center;
  font-size: 13px; line-height: 1;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Header overflow menu — currently single-purpose (delete) but
   structured as a button so we can swap to a popover later when
   more actions land. Sits next to the chevron, away from primary
   scan path. */
.light-env-overflow {
  /* 32px visual size — was 26px, but hybrid mouse+touch devices
     (iPad with cursor, Surface, etc.) treat it as a mouse target without
     the @media (pointer: coarse) expansion firing. WCAG 2.5.5 minimum
     is 44px; 32px stays under but is acceptable for tertiary delete
     actions where the cell tap area is the primary path. */
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1;
  transition: all 0.15s;
}
.light-env-overflow:hover {
  background: var(--alert-soft-bg);
  color: var(--red);
  border-color: var(--red);
}
.light-env-overflow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--alert-soft-bg);
  color: var(--red);
}

/* Screens — disclosure pattern matching rooms. Collapsed shows
   status dot · device-icon · device label · one-line summary +
   today-toggle + chevron. Expanded body holds chip pickers for
   hours / evening + the blue-blocker checkbox + room-reassignment. */
.light-env-screen-cards {
  display: flex; flex-direction: column; gap: 8px;
}
.light-env-screen-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.light-env-screen-card.expanded { border-color: var(--accent); }
.light-env-screen-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  background: var(--bg-secondary);
  transition: background 0.15s;
}
.light-env-screen-card-head:hover { background: var(--bg-hover); }
.light-env-screen-card.expanded .light-env-screen-card-head {
  border-bottom: 1px solid var(--border);
}
.light-env-screen-card-icon { font-size: 16px; }
.light-env-screen-card-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.light-env-screen-card-summary {
  font-size: 12px; color: var(--text-muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.light-env-screen-card-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.light-env-screen-meta-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr);
  gap: 12px;
}
.light-env-screen-meta-row .ctx-label { margin: 0; }
.light-env-screen-blocker {
  font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.light-env-screen-blocker input[type="checkbox"] { margin-right: 4px; }
.light-env-screen-room { width: 100%; }
@media (max-width: 600px) {
  .light-env-screen-card-head { flex-wrap: wrap; gap: 6px; }
  .light-env-screen-meta-row { grid-template-columns: 1fr; }
}

/* Inline "Screens used here" block within each room card — appears
   below the readings strip. Uses compact-mode screen cards that
   share markup with the top-level Portable screens section but
   ratchet density down (smaller padding, denser fields). Goal:
   set-once UX where one Office card carries everything the user
   needs to keep up to date. */
.light-env-room-screens {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.light-env-room-screens-head {
  display: flex; align-items: center; gap: 12px;
}
.light-env-room-screens-head strong {
  font-size: 12px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  flex: 1;
}
/* Quick-pick chip row inside Step 3 — mirrors the room quick-picks at
   the bottom of the Rooms section. Shared row styles come from
   .light-env-quickpicks-row; this selector only spaces the row from
   the preceding screen list / empty copy. */
.light-env-screen-quickpicks {
  margin-top: 10px;
}

/* Per-room measurement tools (Step 2) — pill row + readings strip. */
.light-env-room-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.light-env-measure-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.light-env-tool-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 12px;
  color: var(--text-primary); cursor: pointer;
  transition: all 0.15s;
  min-width: 0;
  justify-content: center;
}
.light-env-tool-pill:hover {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent);
}

/* Step-body empty / readings copy. Used by no-measurements + no-screens
   placeholders. */
.light-env-room-empty {
  font-size: 12px; color: var(--text-muted);
  margin: 0;
  font-style: italic;
}
.light-env-room-readings {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 4px;
}
.light-env-reading {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px; font-size: 12px;
  color: var(--text-secondary);
}
.light-env-reading-icon { font-size: 13px; }
.light-env-reading-value { color: var(--text-primary); font-weight: 500; }
.light-env-reading-time { color: var(--text-muted); font-size: 11px; }

/* Disclosure-pattern room list — replaces the tabs/stacked mode-switch.
   Each row is collapsed by default; clicking the header expands a
   Step 1/2/3 form. Mirrors EMF Assessment + Light Audits so the three
   sub-modules share one mental model. */
.light-env-room-list { display: flex; flex-direction: column; gap: 8px; }
.light-env-room-disclosure {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.light-env-room-disclosure.expanded { border-color: var(--accent); }
.light-env-room-disclosure-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  background: var(--bg-secondary);
  transition: background 0.15s;
}
.light-env-room-disclosure-head:hover { background: var(--bg-hover); }
.light-env-room-disclosure.expanded .light-env-room-disclosure-head {
  border-bottom: 1px solid var(--border);
}
.light-env-room-disclosure-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  /* min-width:0 lets the name shrink past its intrinsic width inside the
     flex row when the user names a room something long; ellipsis keeps the
     chevron + delete button reachable on 375px viewports. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 1;
}
.light-env-room-disclosure-signals {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted);
}
.light-env-room-signal { white-space: nowrap; }
.light-env-room-signal-evening { color: var(--orange); }
.light-env-room-disclosure-spacer { flex: 1; }
.light-env-room-disclosure-chevron {
  color: var(--text-muted); font-size: 12px; flex-shrink: 0;
  transition: transform 0.15s;
}
.light-env-room-disclosure-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.light-env-room-disclosure-footer {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.light-env-room-disclosure.light-env-card-skipped { opacity: 0.7; }

/* Step blocks inside the expanded body — numbered to make the linear
   flow obvious (versus the old layout where 5 concerns competed for
   attention all at once). */
.light-env-room-step {
  display: flex; flex-direction: column; gap: 10px;
}
.light-env-room-step-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.light-env-room-step-head > span:first-child {
  flex: 1;
  min-width: 0;
}
.light-env-room-status-pill,
.light-env-room-step-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.light-env-room-status-green { border-color: color-mix(in srgb, var(--green) 36%, var(--border)); color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }
.light-env-room-status-yellow { border-color: color-mix(in srgb, var(--yellow) 42%, var(--border)); color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.light-env-room-status-orange { border-color: color-mix(in srgb, var(--orange) 42%, var(--border)); color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.light-env-room-status-red { border-color: color-mix(in srgb, var(--red) 42%, var(--border)); color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.light-env-room-status-incomplete { border-style: dashed; color: var(--text-muted); }
.light-env-room-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: var(--accent); color: white;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.light-env-room-step-body {
  display: flex; flex-direction: column; gap: 10px;
  padding-left: 28px;
}
.light-env-room-setup-body {
  gap: 12px;
}
.light-env-room-step-body .light-env-room-tools {
  padding-top: 0; border-top: none;
}
.light-env-room-step-body .ctx-label { margin: 0; }
.light-env-room-name-input { font-size: 14px; }
.light-env-room-today-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-secondary) 58%, transparent);
}
.light-env-room-today-copy {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.light-env-room-today-copy span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

.light-env-room-ai {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: -2px 0 0 28px;
  padding: 7px 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
  font-size: 12px;
  line-height: 1.35;
}
.light-env-room-ai-green { border-top-color: color-mix(in srgb, var(--green) 34%, var(--border)); }
.light-env-room-ai-yellow { border-top-color: color-mix(in srgb, var(--yellow) 38%, var(--border)); }
.light-env-room-ai-red { border-top-color: color-mix(in srgb, var(--red) 36%, var(--border)); }
.light-env-room-ai-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.light-env-room-ai-tip {
  min-width: 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.light-env-room-ai-refresh {
  align-self: center;
  min-height: 28px;
  padding: 3px 8px;
  font-size: 12px;
}

/* Quick-pick chip row for adding rooms — replaces the bare "+ Room"
   button. Common names are one-click; "Other…" prompts for custom. */
.light-env-room-quickpicks { margin-top: 12px; }
.light-env-quickpicks-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.light-env-quickpicks-label {
  font-size: 12px; color: var(--text-muted);
  margin-right: 4px;
}
.light-env-quickpick {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px; font-size: 12px;
  color: var(--text-primary); cursor: pointer;
  transition: all 0.15s;
}
.light-env-quickpick:hover {
  background: var(--accent); border-color: var(--accent);
  color: white;
}
.light-env-quickpick-other { font-style: italic; }

@media (max-width: 600px) {
  .light-env-room-disclosure-head { flex-wrap: wrap; gap: 6px; }
  .light-env-room-disclosure-spacer { display: none; }
  .light-env-room-step-body { padding-left: 0; }
  .light-env-room-today-row {
    align-items: flex-start;
  }
  .light-env-room-ai {
    margin-left: 0;
  }
  .light-env-measure-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .light-env-measure-toolbar .light-env-tool-pill {
    min-height: 44px;
  }
}

/* Step 1 chip pickers — replace the lonely number field + 10-option
   dropdown + boolean checkbox with three concise chip rows the user
   can answer by *looking* at a bulb / their day. */
.light-env-room-step-sub {
  margin: -4px 0 0 28px;
  font-size: 12px; color: var(--text-muted);
  line-height: 1.4;
}
.light-env-picker { display: flex; flex-direction: column; gap: 6px; }
.light-env-picker-label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.light-env-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.light-env-chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px; font-size: 13px;
  color: var(--text-primary); cursor: pointer;
  transition: all 0.15s;
}
.light-env-chip:hover { background: var(--bg-hover); border-color: var(--accent); }
.light-env-chip-active {
  background: var(--accent); border-color: var(--accent); color: white;
}
.light-env-chip-active:hover { background: var(--accent); border-color: var(--accent); }
.light-env-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion — keep Light Environment disclosure and screen-card state changes static. */
@media (prefers-reduced-motion: reduce) {
  .light-env-room-disclosure,
  .light-env-screen-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Touch tap-target sizing — coarse pointer gets larger Light Environment controls. */
@media (pointer: coarse) {
  .light-env-chip,
  .light-env-tool-pill,
  .light-env-overflow,
  .light-env-picker-more summary {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .light-env-chip { padding: 0 14px; }
}
.light-env-picker-more {
  margin-top: 2px; font-size: 12px;
}
.light-env-picker-more summary {
  cursor: pointer; color: var(--text-muted);
  padding: 2px 0; user-select: none;
}
.light-env-picker-more summary:hover { color: var(--text-primary); }
.light-env-picker-more[open] { padding-top: 6px; }
.light-env-picker-more select,
.light-env-picker-more input { margin-top: 4px; }

/* Spectrum tool gets primary-action treatment as the recommended
   start — it auto-detects warm / cool / fluorescent so it's the
   single best button for users who don't know their bulb specs. */
.light-env-tool-pill-primary {
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.light-env-tool-pill-primary:hover {
  background: var(--accent); color: var(--on-accent);
}
.light-env-tool-pill-hint {
  font-size: 10px; font-weight: 500;
  margin-left: 4px; opacity: 0.85;
  text-transform: uppercase; letter-spacing: 0.4px;
}

/* Light Audits — frozen snapshots of rooms + screens + measurements.
   Visual pattern mirrors EMF assessments (collapsed cards with severity
   dot, expand to detail, side-by-side compare table) so the two
   surfaces feel like one design system. */
.light-audits-block {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  overflow: hidden;
}
.light-audits-block > summary {
  list-style: none;
}
.light-audits-block > summary::-webkit-details-marker {
  display: none;
}
.light-audits-summary {
  margin: 0;
  padding: 10px 12px;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
}
.light-audits-block[open] .light-audits-summary {
  border-bottom: 1px solid var(--border);
}
.light-audits-block > .light-env-empty,
.light-audits-block > .light-audit-hint,
.light-audits-block > .light-audit-card,
.light-audits-block > .light-audit-compare {
  margin: 10px 12px;
}
.light-audit-actions { display: flex; gap: 8px; }
.light-audit-show-more {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.light-audit-show-more:hover {
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}
.light-audit-show-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.light-audit-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; overflow: hidden; background: var(--bg-card);
}
.light-audit-card.expanded { border-color: var(--accent); }
.light-audit-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; cursor: pointer; transition: background 0.15s;
}
.light-audit-header:hover { background: var(--bg-hover); }
.light-audit-header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Two-row layout — date + label on the top line, "N rooms · M measurements"
   as a small grey caption underneath. The original single-line treatment
   forced every audit row to read as one dense run-on; the column flow
   gives the eye a clear "title / subtitle" rhythm. */
.light-audit-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.light-audit-info-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.light-audit-date { font-weight: 600; font-size: 13px; }
.light-audit-label { font-size: 12px; color: var(--text-secondary); }
.light-audit-meta { font-size: 11px; color: var(--text-muted); }
.light-audit-detail { padding: 0 14px 14px; }
.light-audit-meta-row {
  display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
  align-items: flex-end;
}
.light-audit-meta-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--text-muted);
}
.light-audit-meta-field--date { flex: 0 0 auto; width: 160px; }
.light-audit-meta-field--label { flex: 1 1 200px; min-width: 0; max-width: 360px; }
.light-audit-meta-field-text {
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-muted);
}
.light-audit-meta-row .ctx-input { margin-top: 0; font-size: 13px; padding: 6px 10px; }
.light-audit-empty { color: var(--text-muted); font-size: 12px; padding: 12px 0; line-height: 1.5; }
.light-audit-hint {
  font-size: 12px; color: var(--text-muted);
  padding: 6px 10px; margin-bottom: 10px;
  background: var(--bg-secondary); border-left: 2px solid var(--accent);
  border-radius: 4px;
}
.light-audit-footer {
  display: flex; gap: 8px; align-items: center; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}

/* Single-audit detail — per-room mini cards stacked. Replaces the wide
   7-column table that scrolled horizontally on mobile. Each card shows
   severity dot + room name + status label + measurement chips for the
   channels that have readings. Channels with no data are omitted (vs
   the table's "—" cells which were just visual noise). */
.light-audit-rooms {
  display: flex; flex-direction: column; gap: 8px;
}
.light-audit-room-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.light-audit-room-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.light-audit-room-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.light-audit-room-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.light-audit-room-status-green      { background: rgba(34,197,94,0.12);  color: var(--green); }
.light-audit-room-status-yellow     { background: rgba(234,179,8,0.12);  color: var(--yellow); }
.light-audit-room-status-orange     { background: rgba(249,115,22,0.12); color: var(--orange); }
.light-audit-room-status-red        { background: rgba(239,68,68,0.12);  color: var(--red); }
.light-audit-room-status-incomplete { background: var(--bg-card);        color: var(--text-muted); }
.light-audit-room-empty { font-size: 12px; color: var(--text-muted); margin: 0; font-style: italic; }
.light-audit-room-channels {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.light-audit-channel {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 12px;
}
.light-audit-channel-label { color: var(--text-muted); font-size: 11px; }
.light-audit-channel-value { color: var(--text-primary); font-weight: 500; }

/* Compare view — per-room delta cards, no wide table. Each card stacks
   the channel rows; each row is `before  →  after` with a directional
   arrow whose color signals improvement (green) / regression (red) /
   neutral (depends-on-context channels like CCT and lux). */
.light-audit-compare-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 10px 14px; background: var(--bg-card); border-radius: var(--radius-sm);
  border: 1px solid var(--border); flex-wrap: wrap;
}
.light-audit-compare-label { font-size: 13px; font-weight: 600; }
.light-audit-compare-arrow { color: var(--text-muted); font-size: 16px; }
.light-audit-compare-note { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.light-audit-interpret-btn {
  margin-left: auto;
  font-size: 12px;
  padding: 5px 10px;
}
@media (max-width: 600px) {
  .light-audit-interpret-btn { margin-left: 0; width: 100%; }
}
.light-audit-compare-rooms { display: flex; flex-direction: column; gap: 8px; }
.light-audit-compare-room {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.light-audit-compare-room-improved   { border-left: 3px solid var(--green); }
.light-audit-compare-room-regressed  { border-left: 3px solid var(--red); }
.light-audit-compare-room-measured   { border-left: 3px solid var(--text-muted); }
.light-audit-compare-room-unchanged  { border-left: 3px solid transparent; }
.light-audit-compare-room-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.light-audit-sev-empty {
  display: inline-block; width: 10px; height: 10px;
  border: 1.5px dashed var(--text-muted); border-radius: 50%;
  flex-shrink: 0;
}
.light-audit-compare-room-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  flex: 1;
}
.light-audit-compare-verdict {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 2px 8px; border-radius: 10px;
}
.light-audit-compare-verdict-improved   { background: rgba(34,197,94,0.12);  color: var(--green); }
.light-audit-compare-verdict-regressed  { background: rgba(239,68,68,0.12);  color: var(--red); }
.light-audit-compare-verdict-measured   { background: var(--bg-card);        color: var(--text-muted); }
.light-audit-compare-verdict-unchanged  { display: none; }
.light-audit-compare-channels {
  display: flex; flex-direction: column; gap: 4px;
}
.light-audit-compare-channel {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(60px, auto) auto minmax(60px, auto);
  gap: 8px; align-items: baseline;
  font-size: 12px; padding: 3px 0;
}
.light-audit-compare-channel-label { color: var(--text-muted); font-size: 11px; }
.light-audit-compare-channel-before { color: var(--text-secondary); text-align: right; }
.light-audit-compare-channel-after  { color: var(--text-primary); font-weight: 500; }
.light-audit-arrow { font-weight: 600; font-size: 13px; }

@media (max-width: 600px) {
  .light-audit-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .light-audit-compare-channel {
    grid-template-columns: minmax(70px, 1fr) auto auto auto;
    font-size: 11px;
  }
}

/* Compact AI verdict line for Light Tools measurement readings —
   sits directly under the value row in the room detail panel.
   `flex-basis: 100%` forces this onto its own row inside the
   flex-wrap parent (.light-env-room-readings) so the tip text can
   wrap on narrow viewports instead of overflowing horizontally. */
.light-env-reading-ai {
  display: flex; align-items: center; gap: 6px;
  flex-basis: 100%; min-width: 0; width: 100%;
  margin: 4px 0 8px 22px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.light-env-reading-ai .sun-session-ai-tip {
  flex: 1; min-width: 0;
  white-space: normal; overflow-wrap: anywhere;
}
.light-env-reading-ai .sun-session-ai-cta {
  background: transparent; border: none;
  color: var(--accent); cursor: pointer;
  font-size: 11.5px; padding: 0; text-align: left;
}
.light-env-reading-ai .sun-session-ai-cta:hover { text-decoration: underline; }

/* Per-screen AI verdict block — sits at the bottom of an expanded screen card. */
.light-env-screen-ai {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.light-env-screen-ai-head {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.light-env-screen-ai .sun-detail-ai { margin-bottom: 0; }

/* Per-audit AI verdict block — sits at the top of the audit detail body. */
.light-audit-ai {
  margin: 12px 0 14px 0;
}
.light-audit-ai-head {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.light-audit-ai .sun-detail-ai { margin-bottom: 0; }
/* At-a-glance dot in the audit card header (collapsed view). */
.light-audit-ai-dot {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 4px;
  vertical-align: middle;
}
/* On very narrow screens the audit card header is already cramped
   (date + label + delete + chevron). Drop the verdict dot from the
   header — it's still rendered in the expanded detail body. */
@media (max-width: 375px) {
  .light-audit-ai-dot { display: none; }
}

/* Indoor-burden AI verdict — replaces the static heuristic interp at
   the bottom of the Light Environment block when an AI verdict has
   been generated. */
.light-env-summary-ai {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: 13px; line-height: 1.5;
}
.light-env-summary-ai-green  { color: var(--green); }
.light-env-summary-ai-yellow { color: var(--yellow); }
.light-env-summary-ai-red    { color: var(--red); }
.light-env-summary-ai-tip { flex: 1; min-width: 0; }
.light-env-summary-ai-detail {
  width: 100%;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: normal;
}
.light-env-summary-ai-cta {
  background: transparent; border: 1px solid var(--border);
  color: var(--accent); cursor: pointer;
  font-size: 11.5px; padding: 3px 10px; border-radius: 6px;
  white-space: nowrap;
}
.light-env-summary-ai-cta:hover { border-color: var(--accent); }

@media (max-width: 600px) {
  /* Light Environment — room-card meta grid stacks; screens fields
     stack to single column; tab strip becomes horizontally scrollable
     so 5+ rooms don't overflow into a wrap that fights the rest of
     the layout. */
  .light-env-room-meta { grid-template-columns: 1fr; gap: 10px; }
  .light-env-screen-fields { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .light-env-room-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .light-env-room-tabs::-webkit-scrollbar { height: 4px; }
  .light-env-room-card-head { flex-wrap: wrap; }
  .light-env-empty-cta { padding: 14px 16px; }
  .light-env-summary { padding: 12px 14px; }
}