/* SAIHM /contact — page-scoped styles.
   Kept out of site.css so the contact page carries zero blast radius for the
   other 65 pages, and served as an external sheet so the page stays valid if
   style-src ever drops 'unsafe-inline' (brief §9 #1 intent). */

/* Accessibility: keyboard skip target (WCAG 2.4.1) — visible only on focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* Visible focus ring everywhere on this page (WCAG 2.4.7 / 2.4.11). */
a:focus-visible,
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Routing table. Each row is one reason-to-write; the address is a block target
   so it clears the 24x24 CSS-px minimum (WCAG 2.5.8 AA) on touch. */
table.routes { table-layout: auto; }
table.routes caption {
  caption-side: top;
  text-align: left;
  color: var(--ink-muted);
  font-size: 0.9rem;
  padding-bottom: 10px;
}
table.routes th[scope="row"] { font-weight: 600; color: var(--ink-primary); }
table.routes a {
  display: inline-block;
  min-height: 24px;
  padding: 3px 0;
  word-break: break-word;
}
table.routes .tag {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Advisory panels. Border + heading carry the meaning; color is never the only
   signal (WCAG 1.4.1). */
.panel { border-left: 3px solid var(--border); padding: 4px 0 4px 16px; margin: 16px 0; }
.panel-stop { border-left-color: #f87171; }
.panel-note { border-left-color: var(--accent); }
.panel h3 { margin-top: 0; }

ul.checks li { margin-bottom: 6px; }

@media (max-width: 640px) {
  table.routes, table.routes tbody, table.routes tr, table.routes td, table.routes th { display: block; width: 100%; }
  table.routes thead { position: absolute; left: -9999px; }
  table.routes tr { border-bottom: 1px solid var(--border); padding: 12px 0; }
  table.routes td, table.routes th { border: 0; padding: 2px 0; }
}