/* Shared fixes for every page (19 Oct 2026, from the user's phone/accessibility review). Loaded after each page's own
   styles, so it only adds or overrides. Paired with /site.js (phone menu button, stacked table labels). */

/* --- Phone menu: /site.js adds a "Menu" button to header.top when the header has a nav ------------------------- */
header.top { position: relative; }
.menu-btn { display: none; align-items: center; gap: 8px; font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.menu-btn svg { display: block; }
@media (max-width: 760px) {
  header.top.has-menu .menu-btn { display: inline-flex; }
  header.top.has-menu > nav { display: none !important; }
  header.top.menu-open > nav { display: flex !important; flex-direction: column; position: absolute; right: 0; top: calc(100% - 6px); z-index: 50;
    min-width: 220px; max-width: calc(100vw - 32px); padding: 8px; background: var(--card, var(--bg)); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
  header.top.menu-open > nav a { display: block !important; margin: 0 !important; padding: 12px 14px; border-radius: 9px; font-size: 16px; color: var(--text); white-space: normal; }
  header.top.menu-open > nav a:hover, header.top.menu-open > nav a:focus-visible { background: var(--bg2); }
  header.top.menu-open > nav a.btnlink { margin-top: 6px !important; text-align: center; color: #fff; }
}

/* --- Footer: long addresses wrap, links get finger-sized targets and line up on phones --------------------------- */
footer a { overflow-wrap: anywhere; word-break: break-word; display: inline-block; padding: 6px 0; }
@media (max-width: 600px) {
  footer a { min-width: calc(50% - 18px); padding: 11px 0; }
}

/* --- Code: inline code and blocks never push the page wider than the screen ------------------------------------- */
code { overflow-wrap: anywhere; word-break: break-word; }
pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }

/* --- Wide tables on phones: each row becomes a card, each cell labelled with its column (labels from /site.js) ---- */
@media (max-width: 640px) {
  table.stack { min-width: 0 !important; width: 100% !important; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: auto; }
  table.stack tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0 !important;
    border: 0 !important; white-space: normal !important; text-align: right !important; overflow-wrap: anywhere; }
  table.stack td::before { content: attr(data-l); flex: none; max-width: 45%; text-align: left; font-size: 12px; font-weight: 600;
    letter-spacing: .2px; color: var(--muted); }   /* no uppercase: labels carry names with fixed case (redPeaRL) */
  table.stack td:first-child { font-weight: 700; text-align: left !important; }
  table.stack td:first-child::before { display: none; }
  table.stack td[data-l=""]::before { display: none; }
}

/* --- Dark mode: white on the light red is ~4:1; buttons use the deeper brand red (5.9:1, WCAG AA) ---------------- */
@media (prefers-color-scheme: dark) {
  .btn:not(.ghost), a.btnlink, nav a.btnlink, button.btn { background-color: #C8102E; color: #fff; }
  .btn:not(.ghost):hover, a.btnlink:hover, button.btn:hover { background-color: #A50D26; }
}