/* Message & Method usability layer. Loaded after mm.css on every page (site_postprocess.py injects it), so it
   only adjusts sizes and phone layouts and leaves the design itself to mm.css.
   1. Site navigation: readable text, finger-sized targets, one row from 960px up, and a Menu button below
      that (mm-ux.js adds it).
   2. Tables on phones: short tables stack into one card per row; long ones keep sideways scroll with the first
      column frozen (mm-ux.js marks each .tablewrap as .mm-stack or .mm-freeze and labels the cells). */

/* 1. Navigation */
.sitenav { font-size: .8rem; letter-spacing: .08em; gap: 0 22px; padding-block: 2px; }
.sitenav a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 0; }
.mm-menu { display: none; }
/* The nine links need 1,067px at full size. Tighten in steps so they stay on one row down to 960px;
   below that (tablets in portrait, phones) the Menu button takes over. */
@media (max-width: 1139px) { .sitenav { letter-spacing: .06em; column-gap: 16px; } }
@media (max-width: 1069px) { .sitenav { font-size: .74rem; letter-spacing: .05em; column-gap: 12px; } }
@media (max-width: 959px) {
  header.band.has-menu .wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0; padding-block: 10px; }
  .mm-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: none; color: var(--band-fg);
    border: 1px solid var(--band-line); font: 600 .78rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  .mm-menu:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
  .mm-menu .bars { display: inline-block; width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; }
  .mm-menu .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
  header.band.has-menu .sitenav { display: none; }
  header.band.has-menu.open .sitenav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; width: 100%; margin-top: 10px; padding-block: 4px 8px; justify-content: stretch; }
  header.band.has-menu .sitenav a { min-height: 46px; font-size: .84rem; letter-spacing: .08em; border-bottom: 1px solid var(--band-line); }
  header.band.has-menu .sitenav a[aria-current] { box-shadow: inset 3px 0 0 var(--copper); padding-left: 10px; border-bottom-color: var(--band-line); }
}

/* 2. Tables on phones */
/* Wide tables (min-width 760px in mm.css) must scroll inside their .tablewrap, not stretch the page: grid and
   flex children otherwise grow to the table's width (the MRP tracker laid out 784px wide on a 375px phone). */
.tablewrap { min-width: 0; max-width: 100%; }
section.block > *, main .wrap > *, :has(> .tablewrap), :has(.tablewrap) { min-width: 0; }
/* Dropdowns size to their longest option (the MRP tracker's comparison selects were 760px): cap them. */
select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
label:has(> select), :has(> label > select) { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .tablewrap.mm-stack { overflow: visible; }
  .mm-stack table { min-width: 0; }
  .mm-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mm-stack tbody, .mm-stack tr { display: block; }
  .mm-stack tr { padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .mm-stack tbody tr:last-child { border-bottom: 0; }
  .mm-stack td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; padding: 3px 0; border: 0; text-align: left !important; white-space: normal !important; }
  .mm-stack td::before { content: attr(data-label); font: 600 .7rem/1.6 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .mm-stack td:first-child { display: block; padding-bottom: 6px; font-size: 1rem; }
  .mm-stack td:first-child::before, .mm-stack td[data-label=""]::before { content: none; }
  .mm-stack td[data-label=""] { display: block; }

  .mm-freeze th:first-child, .mm-freeze td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: 1px 0 0 var(--line);
    width: 38vw; min-width: 38vw; max-width: 38vw; white-space: normal; overflow-wrap: anywhere; padding-right: 10px; }
  .mm-freeze td:first-child * { white-space: normal !important; }
  /* Some pages also stick the header row to the top of a scrolling .tablewrap: keep the corner cell above both. */
  .mm-freeze thead th { z-index: 2; }
  .mm-freeze thead th:first-child { z-index: 3; }
}