/* tools/dip-switch-selector/tool.css — the drawn switch bank and the reference tables of the
 * Driver DIP-switch selector. Loaded after /assets/tool.css. Every class starts with dip-.
 *
 * The drawing is plain elements, not SVG, so the static HTML already shows the example pattern
 * and the script changes nothing but one data-state attribute per switch. The three rows of a
 * bank (body, marks, group labels) are separate grids with identical columns, which is what
 * keeps each ON/OFF word under its own lever. Colours come from tokens.css only. */

/* ============================================================ the figure */

.dip-fig { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-4); background: var(--media-bg);
           border: var(--hair); border-radius: var(--r-md); }
.dip-fig > * { margin: 0; }
.dip-draw { overflow-x: auto; padding-block: var(--s-2); }

.dip { --n: 10; --col: 2.5rem; display: grid; gap: 6px; width: max-content; margin-inline: auto; }
.dip--n4 { --n: 4; --col: 3.25rem; }

.dip-body,
.dip-marks,
.dip-groups { display: grid; grid-template-columns: repeat(var(--n), var(--col)); padding-inline: 10px; }

/* The switch body: dark moulding, legend on top, numbers under each position. */
.dip-body { row-gap: 6px; padding-block: 8px 6px; border: 1px solid var(--anod-hair);
            border-radius: var(--r-md);
            background: linear-gradient(180deg, var(--graphite-1), var(--graphite-2));
            -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dip-legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding-left: 4px;
              font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
              color: var(--anod-etch); }
/* An arrow pointing at the ON end of every slot. */
.dip--switch .dip-legend::before { content: ""; width: 0; height: 0;
                                   border-left: 4px solid transparent; border-right: 4px solid transparent;
                                   border-bottom: 6px solid currentColor; }

.dip-cap { display: grid; justify-items: center; gap: 4px; }
.dip-num { font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--anod-etch); }

/* ---- a slide switch: a recessed slot, the lever at the ON end (top) or the other end */
.dip-slot { position: relative; width: 20px; height: 42px; background: var(--anod-black);
            border: 1px solid var(--anod-hair); border-radius: 2px; }
.dip-lever { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 18px;
             background: var(--anod-etch); border-radius: 1px; }
.dip-cap[data-state="on"] .dip-lever { top: 2px; bottom: auto; background: var(--media-bg); }

/* Reserved, or not set by any table row: no lever drawn, rather than a guessed one. */
.dip-cap[data-state="free"] .dip-lever,
.dip-cap[data-state="unset"] .dip-lever { display: none; }
.dip-cap[data-state="free"] .dip-slot,
.dip-cap[data-state="unset"] .dip-slot { background: transparent; border-style: dashed;
                                         border-color: var(--anod-etch-dim); }

/* ---- a jumper position: two header pins, and the shunt over both when mounted */
.dip--jumper .dip-slot { width: 24px; height: 44px; background: transparent; border: 0; }
.dip--jumper .dip-slot::before,
.dip--jumper .dip-slot::after { content: ""; position: absolute; left: 8px; width: 8px; height: 8px;
                                background: var(--axis-a); border-radius: 1px; }
.dip--jumper .dip-slot::before { top: 8px; }
.dip--jumper .dip-slot::after { bottom: 8px; }
.dip--jumper .dip-lever,
.dip--jumper .dip-cap[data-state="on"] .dip-lever { top: 2px; bottom: 2px; left: 1px; right: 1px; height: auto;
                                                    z-index: 1; background: var(--anod-black);
                                                    border: 1px solid var(--anod-etch-dim); border-radius: 3px; }
.dip--jumper .dip-cap[data-state="off"] .dip-lever { display: none; }
.dip--jumper .dip-cap[data-state="unset"] .dip-slot { border: 1px dashed var(--anod-etch-dim); }

/* ---- the words under the levers, and the function of each run of switches */
.dip-marks > span { text-align: center; font-family: var(--font-mono); font-size: var(--t-xs);
                    font-weight: var(--w-medium); color: var(--page-fg); }
.dip-marks > [data-state="on"] { color: var(--brand); }
.dip-marks > [data-state="free"],
.dip-marks > [data-state="unset"] { color: var(--page-muted); font-weight: var(--w-normal); }

.dip-group { margin-inline: 3px; padding-top: 4px; border-top: 3px solid var(--page-muted);
             font-size: 11px; line-height: 1.2; text-align: center; white-space: nowrap;
             color: var(--page-muted); }
.dip-group--current  { border-top-color: var(--axis-x); }
.dip-group--address  { border-top-color: var(--axis-z); }
.dip-group--baud     { border-top-color: var(--axis-y); }
.dip-group--mode     { border-top-color: var(--axis-a); }
.dip-group--reserved { border-top-style: dashed; border-top-color: var(--page-hair-cool); }
.dip-span1 { grid-column: span 1; }
.dip-span2 { grid-column: span 2; }
.dip-span3 { grid-column: span 3; }
.dip-span4 { grid-column: span 4; }

.dip-says { font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-snug);
            overflow-wrap: anywhere; }
.dip-key { font-size: var(--t-xs); color: var(--page-muted); }

/* ============================================================ the reference tables */

.dip-ref { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.dip-ref > * { margin: 0; }
.dip-set { display: grid; gap: var(--s-3); }
.dip-set > * { margin: 0; }
.dip-tables { display: grid; gap: var(--s-4); align-items: start;
              grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dip-table thead th + th,
.dip-table td { text-align: center; }
.dip-table td,
.dip-table tbody th { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dip-table tr.dip-next > :first-child { box-shadow: inset 3px 0 0 var(--warn); }
.dip-lead,
.dip-note { font-size: var(--t-sm); }
.dip-cite { font-size: var(--t-sm); color: var(--page-muted); }
.dip-product { font-size: var(--t-sm); }

/* A phone. Ten 40 px columns come to 420 px, wider than the 293 px a 375 px screen leaves
 * for the figure, so the bank only fitted by scrolling sideways inside its box — and the
 * levers that matter sat out of sight. 28 px columns still clear the 20 px slot and put all
 * ten switches in view at once. */
@media (max-width: 420px) {
  .dip { --col: 1.75rem; }
  .dip-body,
  .dip-marks,
  .dip-groups { padding-inline: 5px; }
  .dip-group { margin-inline: 1px; font-size: 10px; }
}

@media print {
  .dip-draw { overflow: visible; }
}