/* DAC/ADC Builder: page layout. Loaded after the shared css/styles.css. */

/* ---------- Controls ---------- */

.stage-sub { margin-top: 8px; min-height: 2.6em; max-width: 90ch; }

/* Build stages as a progress bar: every stage up to the chosen one is filled, each in its
   colour from the title rule (1 green, 2 orange, 3 blue), so the fill runs from stage 1 to
   the present stage. Black text on the fills: light 5.9, 6.6, 4.8:1; dark 6.2, 5.4, 5.8:1.
   The stages still to come keep the off-toggle look (dashed frame, --surface-2, secondary
   text), so filled and unfilled differ by more than colour. The fill is also in words: the
   card caption, and a hidden "(built)" on each earlier stage for screen readers. Each fill's
   edge is mixed 30 % toward --text-primary (darker in light, lighter in dark), so it stands
   out from the card by 3:1 or more even where the fill alone would not (the presentation tints).
   On a phone the segments stack and fill from the top. */
.stages {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  --stage-1: var(--series-a); --stage-2: var(--series-b); --stage-3: var(--series-c); --stage-ink: #000;
}
.stages .chip {
  padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 0;
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 0.85rem; font-weight: 700; text-align: left; line-height: 1.3;
}
.stages .chip[data-stage="1"] { --fill: var(--stage-1); }
.stages .chip[data-stage="2"] { --fill: var(--stage-2); }
.stages .chip[data-stage="3"] { --fill: var(--stage-3); }
.stages .chip:first-child { border-radius: 10px 0 0 10px; }
.stages .chip:last-child { border-radius: 0 10px 10px 0; }
.stages .chip.is-built, .stages .chip[aria-pressed="true"] {
  background: var(--fill); color: var(--stage-ink);
  border-style: solid; border-color: var(--fill); border-color: color-mix(in srgb, var(--fill) 70%, var(--text-primary));
}
.stages .chip:hover:not(.is-built):not([aria-pressed="true"]) { background: var(--surface); color: var(--text-primary); }

.bits { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.bits legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; }
.bit-check {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  font-size: 0.9rem; cursor: pointer;
}
.bit-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.bit-name { font-weight: 650; }
.bit-r { color: var(--text-secondary); }
.bit-check.is-hl { box-shadow: 0 0 0 2px var(--accent); }
.bit-check:has(input:disabled) { cursor: not-allowed; }

/* DAC Setup spans the page, above the drawing, in two columns: the inputs (Bits, Digital
   value, Count buttons) on the left, the settings (Number of bits, Full scale, Step Size,
   Reference) on the right, each stacked top to bottom. On a phone the settings follow the
   inputs. Source order is the reading order at every width. */
.dac-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; align-items: start; }
.dac-inputs, .dac-settings { display: grid; gap: 16px; min-width: 0; }
.dac-inputs .bits { margin-bottom: 0; }
.dac-inputs .count-row { margin: 0; padding: 0; border: 0; }
.dac-settings { padding-left: 28px; border-left: 1px solid var(--grid); }
.dac-settings .presets { margin-top: 6px; }

.conv-verdict { margin-top: 14px; }

.resolution .res-result { margin: 6px 0; }

/* ---------- Visuals ---------- */

/* Converter controls on the left, the ADC diagram they drive on the right, the two panels
   stretched to the same height (the taller one's). */
.pair-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: stretch; }

/* The DAC drawing grows with the number of bits, so its height follows its width.
   Below these widths the labels (held at 12 px or more) would crowd their parts and
   boxes, so there the drawings scroll sideways. */
.dac-svg { display: block; width: 100%; height: auto; max-height: 600px; min-width: 454px; }
.blocks-svg { height: auto; min-width: 580px; }
.stair-canvas, .conv-canvas { --h: clamp(240px, 25vw, 320px); }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .pair-visual { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .dac-columns { grid-template-columns: minmax(0, 1fr); }
  .dac-settings { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--grid); }
  .stages { grid-template-columns: minmax(0, 1fr); }
  .stages .chip:first-child { border-radius: 10px 10px 0 0; }
  .stages .chip:last-child { border-radius: 0 0 10px 10px; }
}

/* ---------- Presentation mode ---------- */

@media (min-width: 900px) {
  html[data-present] .bit-check input { width: 24px; height: 24px; }
  /* The presentation palette deepens the light series colours, which black text could not
     read on, so the stage fills become lighter tints of the same hues: black text 7:1 or
     more (9.1, 8.5, 8.5:1) in both themes. */
  html[data-present] .stages { --stage-1: #3cc08e; --stage-2: #f08a5d; --stage-3: #72a8ec; }
  /* Drawn at about 0.9 scale in its card; the labels grow a little when projecting. */
  html[data-present] .dac-svg { max-height: 820px; --sch-font: 18px; --sch-font-small: 15px; }
}
/* Presenting on a screen under 1500 px wide, side by side the block diagram would be too
   narrow for 16 px labels, so each pair stacks and the drawings take the full width.
   Only the layout changes; the reading and tab order stay the same. */
@media (min-width: 900px) and (max-width: 1499px) {
  html[data-present] .pair-visual { grid-template-columns: minmax(0, 1fr); }
}