/* Annotated data booklet: tables, circuit symbols and diagrams; equation lists are in ../assets/page.css. */
.grid.two { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.grid.two > .card { margin-top: 18px; }
@media (min-width: 900px) { .grid.two { grid-template-columns: minmax(0, 1fr) 320px; } }

.how { display: inline-flex; align-items: center; gap: 8px; }
.how kbd { padding: 1px 7px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); font: 600 .8rem var(--mono); }

.key { margin-top: 12px; }
.key summary { cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; font: 600 .76rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.card.hl .key summary { color: var(--hl); }
.key dl { margin: 8px 0 0; display: grid; gap: 6px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.key dl > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; align-items: baseline; }
.key dt { text-align: right; }
.key dd { margin: 0; font-size: .9rem; color: var(--muted); }

table.constants td.sym { font-size: 1.15rem; white-space: nowrap; }
table.constants td.what { color: var(--muted); font-size: .88rem; min-width: 16rem; }
table.constants td.value .eq-math { padding: 0; font-size: 1rem; }
/* On a narrow screen each constant is a block: name and symbol, then its value, then what it is. */
@media (max-width: 960px) {
  table.constants, table.constants tbody { display: block; }
  table.constants thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.constants tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.constants tr:last-child { border-bottom: 0; }
  table.constants td { padding: 0; border: 0; min-width: 0; }
  table.constants td.name { font-weight: 700; }
  table.constants td.value, table.constants td.what { grid-column: 1 / -1; min-width: 0; }
}
/* Fourteen prefixes: seven to a row on a wide screen, so the large ones sit above the small ones. */
.multipliers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); }
@media (min-width: 1000px) { .multipliers { grid-template-columns: repeat(7, 1fr); } }
.multipliers li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); text-align: center; }
.multipliers b { font: 700 1.5rem/1.2 var(--mono); color: var(--teal); }
.multipliers span { font-size: .9rem; color: var(--muted); }

.symbols { margin-top: 18px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.symbols figure { margin: 0; padding: 14px 14px 12px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); text-align: center; }
.symbols svg { display: block; width: 132px; max-width: 100%; margin: 0 auto 8px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.symbols svg text { fill: var(--ink); stroke: none; font: 700 17px var(--body); text-anchor: middle; }
.symbols svg .fill { fill: var(--ink); }
.symbols figcaption { font-size: .84rem; color: var(--muted); }
.symbols figcaption b { display: block; color: var(--ink); font-size: .95rem; }

.spectrum svg { display: block; min-width: 760px; width: 100%; height: auto; padding: 8px; }
.spectrum path { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.spectrum .band { fill: var(--soft); stroke: var(--ink); stroke-width: 1.5; }
.spectrum .band.alt { fill: var(--card); }
.spectrum .vis, .spectrum .rainbow { fill: url(#rainbow); stroke: var(--ink); stroke-width: 1.5; }
.spectrum text { fill: var(--ink); font: 600 14px var(--body); text-anchor: middle; }
.spectrum .tick { font: 500 13px var(--mono); }
.spectrum .axis { font: 600 13px var(--mono); fill: var(--muted); text-anchor: start; }
.spectrum .axis[text-anchor="end"] { text-anchor: end; }
.spectrum .vibgyor { fill: #fff; font: 700 13px var(--mono); letter-spacing: .1em; }
.spectrum .arrow, .spectrum .zoom { stroke: var(--muted); stroke-dasharray: 4 4; }
.spectrum .arrow { stroke-dasharray: none; }
.spectrum .head { fill: var(--muted); stroke: none; }

.vector { margin: 18px 0 0; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); }
.vector svg { display: block; width: 100%; height: auto; }
.vector .dash { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.vector .vec { stroke: var(--teal); stroke-width: 3; }
.vector .vhead { fill: var(--teal); }
.vector .arc { stroke: var(--apricot); stroke-width: 2; fill: none; }
.vector text { fill: var(--ink); font: italic 600 18px Georgia, serif; }

@media print { .key[open] summary { display: none; } }