/* /design: lighting and controls design on a demo office. Loaded with /guides.css (scroll cue) and
   /office-guide.css (legend, buttons, stats), so the plans read like the office guide's.
   Every plan is inline SVG drawn at build time (scripts/lib/design.mjs). Without JavaScript the page
   shows option B everywhere and the controls plan in its commissioned end state; design.js adds the
   A · B · C switch, the camera picker and the controls animation. Reduced motion: nothing animates. */
.page-design [hidden] { display: none !important; }

/* Hero */
.dz-hero { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; padding-top: clamp(20px, 4vw, 48px); padding-bottom: clamp(24px, 4vw, 56px); }
.dz-hero__text, .dz-hero__media { min-width: 0; }
.dz-hero h1 { max-width: 16ch; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.8rem); line-height: 1.05; letter-spacing: -0.02em; }
.dz-hero__media { margin: 0; }
.dz-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.dz-hero__media figcaption, .dz-shot figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
@media (min-width: 1000px) { .dz-hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* Scenes */
.dz { padding-bottom: clamp(16px, 3vw, 40px); }
.dz-scene { padding: clamp(36px, 6vw, 80px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + 8px); }
.dz-scene h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); margin-bottom: 0.5em; }
.dz-scene__text { max-width: 46rem; }
.dz-scene__text { margin-bottom: clamp(20px, 3vw, 32px); }
.dz-scene p { max-width: 44rem; }
.dz-note { font-size: 0.85rem; color: var(--muted); }

/* The A · B · C switch */
.dz-switch { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.dz-switch__btn {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
.dz-switch__btn:hover { background: var(--stone); }
.dz-switch__btn[aria-pressed="true"] { background: var(--black); color: #fff; }
.dz-switch__letter { display: inline-block; min-width: 1.1em; }
.dz-switch__btn:focus-visible, .dz-cam:focus-visible, .dzc-step:focus-visible, .dz-card__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dz-opt__summary { margin: 0 0 12px; }

/* Plans: wide drawings scroll inside their figure on small screens. */
.dz-fig { margin: 0; min-width: 0; }
.dz-fig > figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.dz-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.dz-plan-wrap { min-width: 0; }
@media (max-width: 759px) { .dz-plan-wrap { min-width: 680px; } }
.dz-plan { display: block; width: 100%; height: auto; border-radius: 2px; }
.dz-plan--setout, .dzc-svg { border: 1px solid var(--line); }
.dz-label { font-size: 0.21px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(15, 15, 16, 0.75); stroke-width: 0.06px; stroke-linejoin: round; }
.dz-label__sub { font-size: 0.17px; font-weight: 600; }
.dz-label--under .dz-label__sub, .dz-label--uneven .dz-label__sub { fill: #f6e2b8; }
.dz-room-name { font-size: 0.22px; font-weight: 600; fill: var(--muted); }
.dz-dim { stroke: #5b5c61; stroke-width: 0.015px; font-size: 0.19px; }
.dz-dim text { stroke: none; fill: #2e2f32; font-variant-numeric: tabular-nums; }

/* Results and totals */
.dz-results { margin-top: 20px; }
.dz-totals { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: none; margin: 0 0 16px; }
.dz-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.dz-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.dz-table caption { text-align: left; font-weight: 600; padding: 0 0 8px; }
.dz-table th, .dz-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dz-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--muted); border-bottom-color: var(--line-strong); }
.dz-table tbody th { font-weight: 600; }
.dz-table a { color: var(--ink); text-underline-offset: 3px; }
.dz-sub { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.dz-table--schedule td:nth-child(n+3), .dz-table--schedule thead th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.dz-table--schedule td:nth-child(2) { min-width: 16rem; }
.dz-table__total th, .dz-table__total td { font-weight: 700; border-bottom: 0; }
.dz-table__total th { text-align: right; }
.dz-schedules .dz-table-wrap + .dz-table-wrap { margin-top: 28px; }
.dz-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.dz-badge--ok { background: var(--black); color: #fff; }
.dz-badge--under, .dz-badge--uneven { background: var(--warm); color: var(--amber-ink); }

/* Controls scene */
.dzc-controls { max-width: none; }
.dzc-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.dzc-step { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--charcoal); font: inherit; font-size: 0.9rem; cursor: pointer; }
.dzc-step:hover { border-color: var(--ink); }
.dzc-step[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.dzc-layout { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.dzc-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: dzc; }
.dzc-list li { counter-increment: dzc; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; transition: border-color 0.3s ease, background-color 0.3s ease; }
.dzc-list h3 { margin: 0 0 6px; font-size: 1.05rem; }
.dzc-list h3::before { content: counter(dzc) " "; color: var(--amber-ink); }
.dzc-list p { margin: 0; font-size: 0.93rem; }
.dzc-list li.is-current { border-color: var(--ink); background: var(--cream); }
@media (min-width: 1000px) { .dzc-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dzc-status { min-height: 1.5em; margin: 10px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.dzc-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.dzc-key__bus { width: 22px; height: 0; border-top: 3px solid #5479a1; }

.dzc-glow { transition: opacity 0.6s ease, fill 1.2s ease; }
.dzc-bus { fill: none; stroke: #5479a1; stroke-width: 0.05px; stroke-linecap: round; }
.dzc-ctl, .dzc-sensor, .dzc-level, .dzc-bus, .dzc-controller { opacity: 0; transition: opacity 0.45s ease; }
.dzc-svg .is-on { opacity: 1; }
.dzc-level { font-size: 0.3px; font-weight: 700; fill: #1c1c1e; font-variant-numeric: tabular-nums; }
.dzc-clock { font-size: 0.26px; font-weight: 700; fill: #8f5a12; }
.dzc-svg .dz-room-name { fill: #2e2f32; }
@media (prefers-reduced-motion: no-preference) {
  .dzc.is-flowing .dzc-bus { stroke-dasharray: 0.22 0.12; animation: dzc-flow 1.1s linear infinite; }
}
@keyframes dzc-flow { to { stroke-dashoffset: -0.68; } }
@media (prefers-reduced-motion: reduce) { .dzc-glow, .dzc-ctl, .dzc-sensor, .dzc-level, .dzc-bus, .dzc-controller, .dzc-list li { transition: none; } }

.dzc-breadth { margin-top: clamp(28px, 4vw, 48px); padding: clamp(20px, 3vw, 32px); background: var(--stone); border-radius: var(--radius-lg); }
.dzc-breadth h3 { margin: 0 0 14px; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
.dz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.dz-chips li { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); font-size: 0.92rem; }
.dzc-breadth p { margin: 14px 0 0; }

/* Renders */
.dz-cams { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.dz-cam { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--charcoal); font: inherit; font-size: 0.9rem; cursor: pointer; }
.dz-cam:hover { border-color: var(--ink); }
.dz-cam[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.dz-renders .dz-switch { margin-right: 12px; }
.dz-shots { display: grid; gap: 16px; }
@media (min-width: 760px) { .dz-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dz-shot { margin: 0; min-width: 0; }
.dz-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--stone); }
.dz-renders.is-js .dz-shots { grid-template-columns: minmax(0, 1fr); }
.dz-renders.is-js .dz-shot:not(.is-current) { display: none; }

/* Option cards */
.dz-cards { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .dz-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dz-card { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.dz-card[data-current] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dz-card__letter { margin: 0; font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--amber-ink); }
.dz-card__name { margin: 6px 0 8px; font-size: 1.3rem; }
.dz-card p { margin: 0 0 14px; }
.dz-card__facts { display: grid; gap: 6px; margin: auto 0 14px; }
.dz-card__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.dz-card__facts dt { color: var(--muted); }
.dz-card__facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dz-card__btn { align-self: flex-start; }
.dz-card__btn[aria-pressed="true"] { background: var(--black); color: #fff; }

/* Setout symbols */
.dz-symbols { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--ink); }
.dz-symbols li { display: inline-flex; align-items: center; gap: 6px; }
.dz-symbols svg { width: 22px; height: 22px; }
.dz-schedules { margin-top: 24px; }