/* DALI-2 guide (/guides/dali-2): animated ceiling plan pinned beside scrolling chapters.
   Loaded only on that page (site.json "styles"). Every rule is scoped under .dali-guide (or the
   page-only body class) so nothing leaks into styles.css.

   Layout: wide screens pin the canvas on the left under the sticky site header; at 860px and
   below it pins across the top, and the site header scrolls away so the stage gets the height
   (same approach as guides.css). Without JavaScript the canvas is hidden and the chapters read
   as plain text. */

.dali-guide {
  --bus: var(--charcoal);
  --lamp: var(--amber-ink);
  --warn: #b3382a;
  --hl: var(--cream);
  --g0: #4f7fb3; --g1: #d08a2c; --g2: #c4587a; --g3: #8a8578;
  --mono: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  --stage-top: calc(var(--header-height) + 16px);
  overflow-x: clip;
  padding-bottom: clamp(32px, 5vw, 64px);
}
.dali-guide [hidden] { display: none !important; }

.dali-guide .stage {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.dali-guide .viewport { position: sticky; top: var(--stage-top); z-index: 2; }
.dali-guide canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1000 / 640;
  border-radius: var(--radius-lg);
  background: var(--black);
  touch-action: pan-y;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(15, 15, 16, 0.55);
}
.dali-guide figcaption { display: grid; gap: 6px; padding-top: 10px; }
.dali-guide #cap { font-size: 0.95rem; color: var(--ink); margin: 0; min-height: 1.6em; }
.dali-guide #frame {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); min-height: 2.8em;
  font-variant-numeric: tabular-nums;
}
.dali-guide #frame .fl { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.dali-guide #log {
  list-style: none; margin: 0; padding: 8px 10px; height: 150px; overflow-y: auto;
  background: var(--stone); border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.dali-guide #log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; color: var(--muted); padding-block: 1px; }
.dali-guide #log li:last-child { color: var(--ink); font-weight: 600; }
.dali-guide #log li span { margin-left: 4px; }
.dali-guide #frame b, .dali-guide #log b { font-weight: 600; padding: 0 5px; border-radius: 3px; color: #fff; }
.dali-guide #frame b.a, .dali-guide #log b.a { background: var(--charcoal); }
.dali-guide #frame b.d, .dali-guide #log b.d { background: #6a6c72; }
.dali-guide #frame b.r, .dali-guide #log b.r { background: var(--amber); color: var(--black); }
.dali-guide #frame .bits { color: var(--ink); }
.dali-guide #frame .desc { flex-basis: 100%; color: var(--muted); }
.dali-guide #frame .reply { display: contents; }

/* Chapters */
.dali-guide .chapters { padding-bottom: 6vh; }
.dali-guide .chapter { min-height: 76vh; padding-top: 10vh; }
.dali-guide .chapter:first-child { padding-top: 0; }
.dali-guide .chapter:last-child { min-height: 0; }
.dali-guide .chapter h2 {
  font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.25rem); line-height: 1.1;
  margin: 0.35em 0 0.55em; text-wrap: balance;
}
.dali-guide .chapter p, .dali-guide .chapter li, .dali-guide .chapter dd { color: var(--muted); transition: color 0.4s; }
.dali-guide .chapter.is-active p, .dali-guide .chapter.is-active li, .dali-guide .chapter.is-active dd { color: var(--ink); }
.dali-guide .chapter p { max-width: 62ch; margin: 0 0 1em; }
.dali-guide .eyebrow { font-family: var(--mono); color: var(--amber-ink); margin: 0; }
.dali-guide code, .dali-guide .mono { font-family: var(--mono); font-size: 0.88em; }
.dali-guide code { background: var(--stone-deep); padding: 1px 5px; border-radius: 3px; }

.dali-guide .parts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 1.2em; font-size: 0.97rem; }
.dali-guide .parts dt { font-family: var(--mono); font-weight: 600; color: var(--black); }
.dali-guide .parts dd { margin: 0; }

.dali-guide .legend { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 6px; font-size: 0.97rem; }
.dali-guide .legend li {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid transparent; transition: background 0.3s, border-color 0.3s;
}
.dali-guide .legend li[data-group], .dali-guide .legend li[data-scene] { cursor: pointer; }
.dali-guide .legend li[data-group]:hover, .dali-guide .legend li[data-scene]:hover { border-color: var(--charcoal); }
.dali-guide .legend li.is-on { background: var(--hl); border-color: var(--line-strong); font-weight: 600; }
.dali-guide .legend li.is-on .swatch { transform: scale(1.35); box-shadow: 0 0 0 3px #fff; }
.dali-guide .swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; transition: transform 0.3s; }
.dali-guide .legend small { font-size: 0.82rem; color: var(--muted); font-weight: 400; }
.dali-guide .legend .mono { color: var(--muted); margin-left: auto; font-size: 12.5px; }

.dali-guide .ladder { list-style: none; counter-reset: rung; padding: 0; margin: 0 0 1.2em; display: grid; gap: 0; font-size: 0.97rem; }
.dali-guide .ladder li {
  counter-increment: rung; display: grid; grid-template-columns: 2.2em 1fr; gap: 2px 10px;
  padding: 9px 8px; border-top: 1px solid var(--line); transition: background 0.3s;
}
.dali-guide .ladder li::before { content: counter(rung); grid-row: span 2; font-family: var(--mono); font-weight: 600; color: var(--amber-ink); font-size: 13px; padding-top: 2px; }
.dali-guide .ladder strong { color: var(--ink); font-weight: 600; }
.dali-guide .ladder li.dali-line { border-top: 2px solid var(--amber); }
.dali-guide .ladder li.is-on { background: var(--hl); border-radius: 8px; }
.dali-guide .ladder li.is-on + li { border-top-color: transparent; }
.dali-guide .ladder .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-ink); }

.dali-guide .table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
.dali-guide table { border-collapse: collapse; font-size: 0.9rem; min-width: 460px; width: 100%; }
.dali-guide th, .dali-guide td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-top: 1px solid var(--line); }
.dali-guide thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-top: 0; }
.dali-guide tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.dali-guide td { color: var(--muted); }
.dali-guide td.win { color: var(--ink); }
/* the column matching the wiring currently shown in the diagram */
.dali-guide th.col-trad, .dali-guide td.col-trad, .dali-guide th.col-dali, .dali-guide td.col-dali { padding-inline: 10px; transition: background 0.4s, color 0.4s; }
.dali-guide table[data-active="trad"] .col-trad, .dali-guide table[data-active="dali"] .col-dali { background: var(--hl); color: var(--ink); }
.dali-guide table[data-active="trad"] thead .col-trad, .dali-guide table[data-active="dali"] thead .col-dali { color: var(--black); }
.dali-guide table[data-active="trad"] .col-dali, .dali-guide table[data-active="dali"] .col-trad { color: var(--muted); }

/* Playground */
.dali-guide .console {
  display: grid; gap: 14px; padding: 18px; margin: 0 0 1.2em;
  background: radial-gradient(120% 90% at 85% 10%, rgba(246, 226, 184, 0.35), rgba(255, 255, 255, 0) 60%), var(--stone);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.dali-guide .console label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.dali-guide .console output { color: var(--ink); text-transform: none; letter-spacing: 0; }
.dali-guide .console .row { display: grid; gap: 6px; }
.dali-guide select, .dali-guide input[type="range"] { width: 100%; font: inherit; font-size: 0.95rem; }
.dali-guide select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.dali-guide input[type="range"] { accent-color: var(--charcoal); }
.dali-guide .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.dali-guide button {
  font: inherit; font-size: 0.88rem; color: var(--ink); background: #fff; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.dali-guide button:hover { border-color: var(--black); }
.dali-guide button.primary { background: var(--black); border-color: var(--black); color: #fff; }
.dali-guide button.primary:hover { background: var(--charcoal); }

.dali-guide .notes { border-top: 1px solid var(--line); margin-top: clamp(24px, 4vw, 48px); padding-top: 26px; font-size: 0.88rem; color: var(--muted); }
.dali-guide .notes p { max-width: 80ch; margin: 0 0 0.6em; }
.dali-guide .notes .cta { color: var(--ink); }

/* Without JavaScript there is no canvas to drive: show the chapters as plain text. */
html:not(.js) .dali-guide .viewport { display: none; }
html:not(.js) .dali-guide .stage { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .dali-guide .chapter { min-height: 0; padding-top: 5vh; }
html:not(.js) .dali-guide .chapter p, html:not(.js) .dali-guide .chapter li, html:not(.js) .dali-guide .chapter dd { color: var(--ink); }
html:not(.js) .dali-guide .console { display: none; }

@media (max-width: 860px) {
  /* The site header scrolls away on this page so the pinned canvas gets the height. */
  .page-dali-guide .site-header { position: relative; }
  .dali-guide { --stage-top: 0px; }
  .dali-guide .stage { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dali-guide .viewport { background: #fff; padding-block: 8px 6px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .dali-guide #cap { font-size: 0.875rem; }
  .dali-guide #frame { font-size: 11.5px; min-height: 2.6em; }
  .dali-guide #log { height: 104px; font-size: 11px; }
  .dali-guide .chapter { min-height: 62vh; padding-top: 6vh; }
  .dali-guide .chapter:first-child { padding-top: 14px; }
  .dali-guide .legend .mono { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dali-guide .chapter p, .dali-guide .chapter li, .dali-guide .chapter dd, .dali-guide .legend li { transition: none; }
}

/* Section title pinned with the diagram (copy of the active chapter's h2; updated by dali-guide.js). */
.dali-guide .viewport__title {
  margin: 0 0 8px; font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--black); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.dali-guide .viewport__title::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--amber); }
.dali-guide .viewport__title:empty { display: none; }
@media (max-width: 860px) {
  .dali-guide .viewport__title { margin-bottom: 4px; font-size: 0.9rem; }
}