/* Op Amp Basics: page tokens and layout. Loaded after the shared css/styles.css. */

/* ---------- Tokens ---------- */
/* Water. The body is a gentle gradient from --water to --water-deep (a background,
   1.2 to 1.5:1 on the surface, decorative). The marks that carry meaning on it, the
   level lines of the columns, use --water-edge: 5.2:1 on --water and 4.4:1 on
   --water-deep, 6.4:1 on the surface. The flow streaks are a faint texture, not data
   (flow is described in the caption). Walls are --text-secondary (6.3:1 on the water);
   gates and floats are outlined in the text colour, so they pass on any fill. */
:root {
  --water: #d7e8f7;
  --water-deep: #b9d6f1;
  --water-edge: #1b5ea6;
  --water-streak: rgba(255, 255, 255, 0.8);
  --wall: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --water: #173550;
    --water-deep: #0f2a45;
    --water-edge: #6cb0f2;                 /* 5.5:1 on --water, 6.4:1 on --water-deep */
    --water-streak: rgba(150, 200, 250, 0.4);
  }
}
:root[data-theme="dark"] {
  --water: #173550;
  --water-deep: #0f2a45;
  --water-edge: #6cb0f2;
  --water-streak: rgba(150, 200, 250, 0.4);
}

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

.scale-note { font-weight: 600; }
.toggle-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.card-head + .sliders { margin-top: 4px; }
.tap-row { display: flex; gap: 8px; margin: 2px 0 6px; }
.btn.tap { padding: 3px 14px; }
.btn.tap:active { background: var(--surface); }

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

/* The trough is a 632 × 400 drawing (with its scale margins), so its height follows its width. */
.trough-canvas { height: auto; aspect-ratio: 79 / 50; touch-action: none; }
/* The op amp drawing has a fixed shape (480 × 360), so its height follows its width.
   Below 330 px its labels (held at 12 px or more) would crowd, so there it scrolls sideways;
   the input labels then overhang its left edge by up to 11 px, inside the scroll gutter. */
.opamp-svg { height: auto; min-width: 330px; }
/* A note about the drawing, under it and outside its scroll box, so it wraps with the card. */
.visual-note { margin: 8px 0 0; max-width: 70ch; font-size: 0.85rem; color: var(--text-secondary); }
.time-canvas, .xfer-canvas { --h: clamp(230px, 24vw, 300px); }

/* Under each drawing: its Key (what the marks mean), then Now (the present state as
   label and value rows). The values are not a live region; a visually hidden status line
   in the op amp's Now block announces when the output reaches or leaves a limit. */
.info-block { margin-top: 14px; }
.info-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.info-block .legend { margin-top: 6px; }
.state-list { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.state-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.state-list > div:last-child { border-bottom: 1px solid var(--border); }
.state-list dt { flex: 0 0 8.5rem; font-weight: 600; color: var(--text-primary); }
.state-list dd { flex: 1 1 12rem; margin: 0; color: var(--text-primary); }

.schem .sch-plus { stroke: var(--series-a); }
.schem .sch-minus { stroke: var(--series-b); }
.schem .sch-fb { stroke: var(--series-d); }

/* Side by side, the Op Amp and Water Model panels line up part for part (heading,
   controls, toggle, drawing, Key, Now), so matching pieces sit level with each other.
   Each card has exactly six children, one per shared row. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 981px) {
    .grid-2.pair { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .grid-2.pair > .card {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }
    .grid-2.pair > .card > * { align-self: start; }
  }
}

/* ---------- Key table ---------- */

.key-table { min-width: 34rem; }
.key-table td.text { vertical-align: top; }
.key-table td.text:first-child, .key-table td.text:nth-child(2) { width: 27%; font-weight: 600; color: var(--text-primary); }
.key-table td.text:last-child { color: var(--text-secondary); }
.key-table tr.is-hl td { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

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

@media (min-width: 900px) {
  html[data-present] {
    --water-edge: #174f8c;                 /* 6.6:1 on --water, 5.5:1 on --water-deep when projecting */
  }
  html[data-present] .btn.tap { padding: 8px 20px; }
  html[data-present] .state-list, html[data-present] .legend-note, html[data-present] .visual-note { font-size: 1.05rem; }
  html[data-present] .info-title { font-size: 0.9rem; }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  html[data-present]:not([data-theme="light"]) { --water-edge: #86c0f5; }
}
@media (min-width: 900px) {
  html[data-present][data-theme="dark"] { --water-edge: #86c0f5; }
}