/* ---------------------------------------------------------------------------
   AWG to mm2 conversion chart. Sibling of wave-offgrid-calculator.css and
   deliberately built from the same tokens, so the two calculator pages read as
   one family rather than two designs.

   EVERYTHING IS SCOPED TO #wag-chart.
   The standalone version of the voltage drop calculator styled `table`, `th`,
   `a` and `h1` as bare elements, and dropping that into a WordPress page bled
   into the header, the nav and the footer. Every rule below is prefixed. Do not
   add an unprefixed selector to this file.

   FIVE TEXT SIZES, IN px, NOT em.
   Same discipline and the same five tokens as the calculator. px because
   MediaCenter sets `html { font-size: 10px }`, so a rem here resolves against
   10px and not 16, and because ems compound when one scaled element sits inside
   another. That compounding is what produced 17 different sizes on the
   calculator page before it was rebuilt.

   FONT WEIGHT NEEDS !important.
   MediaCenter ships `.entry-content h1, ...h6 { font-weight: 400 !important }`,
   which flattens every heading on the page including the h1. The only thing that
   beats an !important is another one. Learned the hard way on 2026-08-10, when
   six question headings were added to the calculator and were invisible as
   headings because they rendered at the same weight as body copy.
   See LRN-20260810-04.
--------------------------------------------------------------------------- */

#wag-chart {
  --t1: 49.6px;
  --t2: 38.4px;
  --t3: 24.8px;
  --t4: 19.2px;
  --t5: 15.2px;

  font-size: var(--t5);

  --navy:      #021C48;
  --accent:    #3A7A0B;
  --panel:     #FFFFFF;
  --panel-2:   #F9F9F9;
  --ink:       #3D3D3D;
  --ink-soft:  #565656;
  --ink-faint: #6E6E6E;
  --rule:      #E0E0E0;
  --have-bg:   #F2F8EC;
  --have-rule: #CFE4B8;

  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  max-width: 1060px;
  margin: 0 auto;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
}

/* ---- headings ---------------------------------------------------------- */

#wag-chart h1 {
  font-size: var(--t2);
  line-height: 1.15;
  font-weight: 700 !important;
  color: var(--navy);
  margin: 0;
  padding: 0;
}

#wag-chart .wag-byline {
  margin: 10px 0 0;
  font-size: var(--t5);
  color: var(--ink-faint);
}

#wag-chart .wag-def {
  margin: 14px 0 0;
  max-width: 67ch;
  font-size: var(--t5);
}

#wag-chart .wag-notes > h2 {
  font-size: var(--t3);
  line-height: 1.25;
  font-weight: 700 !important;
  color: var(--navy);
  margin: 0 0 10px;
  padding: 0;
}

#wag-chart .wag-notes h3 {
  font-size: var(--t4);
  line-height: 1.3;
  font-weight: 700 !important;
  color: var(--navy);
  margin: 30px 0 8px;
  padding: 0;
}

#wag-chart .wag-notes p {
  max-width: 67ch;
  margin: 0 0 12px;
  font-size: var(--t5);
}

#wag-chart .wag-formula {
  font-family: var(--mono);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  max-width: 46ch;
}

/* ---- the table --------------------------------------------------------- */

/* Its own scroller. 34 rows by 7 columns will not fit a phone, and the one
   thing that must never happen is the PAGE scrolling sideways. */
#wag-chart .wag-scroll {
  margin: 26px 0 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--panel);
}

#wag-chart .wag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t5);
  /* Digits in a column must line up or the table is unreadable at a glance. */
  font-variant-numeric: tabular-nums;
}

#wag-chart .wag-cap {
  caption-side: top;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--t5);
  max-width: 67ch;
}

#wag-chart .wag-table thead th {
  text-align: right;
  vertical-align: bottom;
  padding: 10px 14px;
  border-bottom: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

#wag-chart .wag-table thead th:first-child,
#wag-chart .wag-table thead th:last-child { text-align: left; }

#wag-chart .wag-unit {
  display: block;
  font-weight: 400;
  color: var(--ink-faint);
}

#wag-chart .wag-table td,
#wag-chart .wag-table tbody th {
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
}

#wag-chart .wag-table tbody tr:last-child td,
#wag-chart .wag-table tbody tr:last-child th { border-bottom: none; }

#wag-chart .wag-awg {
  text-align: left;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

#wag-chart .wag-n    { text-align: right; font-family: var(--mono); white-space: nowrap; }
#wag-chart .wag-key  { font-weight: 700; color: var(--navy); }
#wag-chart .wag-near { white-space: nowrap; }

/* Below 8 AWG the 10 A/mm2 figure is arithmetically right and practically
   meaningless: nobody runs 0.4 amps down a battery cable. Dimmed rather than
   removed, because removing it would leave a reader wondering. */
#wag-chart .wag-faint { color: var(--ink-faint); }

/* A stocked size is a row worth acting on, so it gets a tint and a link.
   Tint, not bold: 9 of 34 rows highlighted in bold would fight the header. */
#wag-chart .wag-have { background: var(--have-bg); }
#wag-chart .wag-have td,
#wag-chart .wag-have th { border-bottom-color: var(--have-rule); }

#wag-chart .wag-near a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
#wag-chart .wag-near a:hover,
#wag-chart .wag-near a:focus { color: var(--navy); }

#wag-chart .wag-tick { margin-left: 4px; }

/* Visible to a screen reader, not to the eye. The tick alone says nothing. */
#wag-chart .wag-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#wag-chart .wag-notes { margin-top: 34px; }

#wag-chart .wag-notes a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
#wag-chart .wag-notes a:hover,
#wag-chart .wag-notes a:focus { color: var(--navy); }

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 780px) {
  #wag-chart h1 { font-size: var(--t3); }
  #wag-chart .wag-table thead th,
  #wag-chart .wag-table td,
  #wag-chart .wag-table tbody th { padding: 8px 10px; }
}