/* /guides/office-lighting. Loaded with /guides.css (hero, on-this-page links, scroll cue).
   Each step is text beside a plan of the same room (stacked on phones). The plans are inline SVG
   drawn at build time, so they are complete without JavaScript; office-guide.js adds the controls.
   Reduced motion: the script does not animate; nothing here transitions. */
.og { padding-bottom: clamp(24px, 4vw, 56px); }
.og [hidden] { display: none !important; }
.og-step { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(32px, 6vw, 72px) 0; border-top: 1px solid var(--line, #e4e1da); scroll-margin-top: calc(var(--header-height) + 8px); }
.og-step:first-child { border-top: 0; }
.og-step__text, .og-fig { min-width: 0; }
.og-step__text h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 0.5em; }
.og-step__text p, .og-step__text li { max-width: 40rem; }
.og-step__text ul:not(.og-ugr) { padding-left: 1.2em; }
@media (min-width: 960px) {
  .og-step { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .og-fig { position: sticky; top: calc(var(--header-height) + 20px); }
}

.og-fig { margin: 0; }
.og-fig figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.og-plot { position: relative; max-width: 620px; }
.og-svg { display: block; width: 100%; height: auto; border-radius: 2px; background: #1f2633; }
.og-dims { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.og-plot--glare { max-width: 520px; }
.og-glare-svg { display: block; width: 100%; height: auto; background: var(--stone, #f3f1ec); border-radius: 2px; color: var(--ink); }
.og-cone { display: block; width: 100%; height: auto; color: var(--ink); margin-bottom: 8px; }

.og-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin-bottom: 16px; max-width: 620px; }
.og-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1 1 150px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.og-field select { font: inherit; font-weight: 400; color: var(--ink); min-height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; }
.og-field input[type="range"] { width: 100%; min-height: 40px; accent-color: var(--ink); }
.og-btn { min-height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.og-btn:hover { background: var(--black); color: #fff; }
.og-controls :focus-visible, .og-btn:focus-visible { outline: 2px solid var(--focus, #2a5bd7); outline-offset: 2px; }

.og-stats { display: grid; gap: 8px; margin: 14px 0 0; max-width: 620px; }
.og-stats > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 8px 12px; background: var(--stone, #f3f1ec); border-radius: var(--radius); }
.og-stats dt { font-size: 0.85rem; color: var(--muted); }
.og-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.og-compare, .og-readout { margin: 10px 0 0; max-width: 620px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.og-readout { font-weight: 600; }

.og-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.8rem; }
.og-legend li { display: inline-flex; align-items: center; gap: 5px; }
.og-swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.25); }

.og-beams { display: grid; gap: 24px; }
.og-beam h4 { margin: 0 0 6px; font-size: 1rem; }
.og-beam .og-stats > div { padding: 6px 10px; }
@media (min-width: 560px) and (max-width: 959px), (min-width: 1200px) { .og-beams { grid-template-columns: 1fr 1fr; } }

.og-ugr { display: grid; gap: 6px; margin: 1rem 0; padding: 0; list-style: none; max-width: 32rem; }
.og-ugr li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; }
.og-ugr a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.og-ugr a:hover .og-ugr__name { text-decoration: underline; text-underline-offset: 3px; }
.og-ugr__name { font-weight: 600; }
.og-ugr__type { font-size: 0.85rem; color: var(--muted); }
.og-ugr__value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-note { font-size: 0.9rem; color: var(--muted); }
.og-chips-line { padding: 12px 14px; background: var(--cream, #f7f1e3); border-radius: var(--radius); font-weight: 500; }
.og-end { padding: clamp(24px, 4vw, 48px) 0; }