/* Pinout sheets. Transcribed from the spreadsheets the old wiki published, so
   the category colours are load-bearing — they are how the original grouped
   pins, and the legend is the key to them. Each category gets a light and a
   dark fill; text and borders come from the page theme so these read as part
   of the content column rather than as pasted-in screenshots. */

.pinout {
  --pin-gnd: #e3e3e6;
  --pin-v5: #f0c4c4;
  --pin-3v: #f8dcdc;
  --pin-lcd: #ddd4f0;
  --pin-adc: #d3e8c6;
  --pin-iq: #cfe0fa;
  --pin-rot: #f8ddb8;
  --pin-sw: #fbeec4;
  --pin-i2c: #d5f5bd;
  --pin-led: #f6cdf0;
  --pin-dbnc: #c6efef;
  --pin-rly: #f9ecc0;
  --pin-midi: #e2efdd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pinout {
    --pin-gnd: #33333f;
    --pin-v5: #5c2f2f;
    --pin-3v: #4a3030;
    --pin-lcd: #3b3357;
    --pin-adc: #2e4630;
    --pin-iq: #23385e;
    --pin-rot: #573f22;
    --pin-sw: #4d4326;
    --pin-i2c: #2f4a26;
    --pin-led: #4f2a4c;
    --pin-dbnc: #1f4747;
    --pin-rly: #4a4223;
    --pin-midi: #2c3a2c;
  }
}

:root[data-theme="dark"] .pinout {
  --pin-gnd: #33333f;
  --pin-v5: #5c2f2f;
  --pin-3v: #4a3030;
  --pin-lcd: #3b3357;
  --pin-adc: #2e4630;
  --pin-iq: #23385e;
  --pin-rot: #573f22;
  --pin-sw: #4d4326;
  --pin-i2c: #2f4a26;
  --pin-led: #4f2a4c;
  --pin-dbnc: #1f4747;
  --pin-rly: #4a4223;
  --pin-midi: #2c3a2c;
}

/* Three columns for v3 — legend, the 40-pin header, the ADC channel map —
   matching how the source spreadsheet laid them out side by side. Only the
   middle one grows. */
.pinout {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 0.75rem;
  align-items: start;
  margin: 1.5rem 0;
  overflow-x: auto;
}

/* v2 has no ADC map, so it drops to two. */
.pinout-v2 {
  grid-template-columns: max-content minmax(0, 1fr);
}

.pinout table {
  border-collapse: collapse;
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0;
  width: auto;
}

.pinout .pinmain {
  width: 100%;
}

.pinout caption {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-bottom: 0.3rem;
  white-space: nowrap;
}

.pinout td,
.pinout th {
  border: 1px solid var(--color-border);
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
  font-weight: 400;
  text-align: left;
  background: var(--color-surface);
}

.pinout th {
  font-weight: 700;
  background: var(--color-surface-alt);
}

/* Pin and GPIO numbers right-align, as in the spreadsheet. */
.pinout td.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pinout td.b {
  font-weight: 700;
}

/* An empty cell that still belongs to the pin row keeps the row's full width
   without drawing a box around nothing. */
.pinout td.e {
  border-color: transparent;
  background: none;
}

.pinout .gnd { background: var(--pin-gnd); }
.pinout .v5 { background: var(--pin-v5); }
.pinout .v3 { background: var(--pin-3v); }
.pinout .lcd { background: var(--pin-lcd); }
.pinout .adc { background: var(--pin-adc); }
.pinout .iq { background: var(--pin-iq); }
.pinout .rot { background: var(--pin-rot); }
.pinout .sw { background: var(--pin-sw); }
.pinout .i2c { background: var(--pin-i2c); }
.pinout .led { background: var(--pin-led); }
.pinout .dbnc { background: var(--pin-dbnc); }
.pinout .rly { background: var(--pin-rly); }
.pinout .midi { background: var(--pin-midi); }

/* The annotation column carries the two IQ labels on the v2 sheet. It sits
   outside the pin table in the original; here it rides along with its row. */
.pinout td.ann {
  border-color: transparent;
  background: none;
  color: var(--color-text-muted);
  text-align: right;
  font-size: 0.68rem;
}

/* Below the tablet breakpoint the three columns will not fit a phone, so the
   legend goes above and the pin tables scroll on their own. */
@media (max-width: 44.9375em) {
  .pinout,
  .pinout-v2 {
    display: block;
  }

  .pinout .pinkey {
    margin-bottom: 0.75rem;
  }

  .pinout .pinmain,
  .pinout .pinaux {
    display: block;
    overflow-x: auto;
    margin-bottom: 0.75rem;
  }
}