/* causa/ui/static/site.css — site shell (spec 2026-10-15-causa-site-design.md, mozilla-protocol card).
   Every colour, size and spacing is a tokens.css custom property. The only literals are 0, 1px/2px
   hairlines, the 768px breakpoint (custom properties cannot drive @media) and the print page box.
   Scoped under .site-* so nothing here reaches the graph canvas or its chrome. */

.site-page { margin: 0; background: var(--site-white); color: var(--site-black); font-family: var(--site-font); font-size: var(--site-body-md); line-height: var(--site-lh-body); -webkit-font-smoothing: antialiased; }
.site-page *, .site-page *::before, .site-page *::after { box-sizing: border-box; }
.site-page :focus-visible, .site-header :focus-visible { outline: 2px solid var(--site-link); outline-offset: 2px; }

/* Skip link: off-canvas until focused */
.site-skip { position: absolute; left: var(--site-spacing-md); top: calc(-1 * var(--site-layout-lg)); padding: var(--site-spacing-sm) var(--site-spacing-md); background: var(--site-black); color: var(--site-white-strong); border-radius: var(--site-radius-sm); text-decoration: none; z-index: 30; }
.site-skip:focus { top: var(--site-spacing-md); }

/* Header + primary nav (also used on the graph page, compact variant) */
.site-header { border-bottom: 1px solid var(--site-gray-light); background: var(--site-white-strong); font-family: var(--site-font); }
.site-header__inner { max-width: var(--site-content-max); margin: 0 auto; padding: 0 var(--site-spacing-lg); min-height: var(--site-header-height); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--site-spacing-sm) var(--site-spacing-lg); }
.site-header--app .site-header__inner { min-height: var(--site-header-height-app); }
.site-brand { font-size: var(--site-title-sm); line-height: var(--site-lh-display); font-weight: 700; color: var(--site-black); text-decoration: none; padding: var(--site-spacing-sm) 0; }
.site-brand:hover { color: var(--site-gray-dark); }
.site-nav__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--site-spacing-xs); margin: 0; padding: 0; }
.site-nav__link { display: inline-flex; align-items: center; min-height: var(--site-touch-target); padding: var(--site-spacing-sm) var(--site-spacing-md); border-radius: var(--site-radius-sm); color: var(--site-gray-dark); text-decoration: none; font-size: var(--site-body-sm); font-weight: 600; }
.site-nav__link:hover { background: var(--site-gray-light); color: var(--site-black); }
.site-nav__link:active { background: var(--site-gray); }
.site-nav__link[aria-current="page"] { color: var(--site-black); box-shadow: inset 0 calc(-1 * var(--site-radius-xs)) 0 var(--site-black); border-radius: var(--site-radius-sm) var(--site-radius-sm) 0 0; }

/* Page body */
.site-main { max-width: var(--site-content-max); margin: 0 auto; padding: var(--site-layout-md) var(--site-spacing-lg) var(--site-layout-lg); }
.site-main a:not([class]) { color: var(--site-link); text-underline-offset: var(--site-radius-xs); }
.site-main a:not([class]):hover { color: var(--site-link-hover); }
.site-main a:not([class]):visited { color: var(--site-link-visited); }
.site-main p, .site-main li { max-width: var(--site-measure); }
.site-main p { margin: 0 0 var(--site-spacing-md); }
.site-main code { font-size: var(--site-body-sm); background: var(--site-gray-light); padding: 0 var(--site-spacing-xs); border-radius: var(--site-radius-xs); }

.site-kicker { margin: 0 0 var(--site-spacing-md); font-size: var(--site-body-sm); font-weight: 600; letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--site-gray-mid); }
.site-title-2xl { margin: 0 0 var(--site-spacing-lg); font-size: var(--site-title-2xl); line-height: var(--site-lh-display); font-weight: 700; letter-spacing: -0.01em; max-width: var(--site-measure); }
.site-title-xl { margin: 0 0 var(--site-spacing-lg); font-size: var(--site-title-xl); line-height: var(--site-lh-display); font-weight: 700; letter-spacing: -0.01em; }
.site-title-lg { margin: 0 0 var(--site-spacing-md); font-size: var(--site-title-lg); line-height: var(--site-lh-display); font-weight: 700; }
.site-title-md { margin: 0 0 var(--site-spacing-md); font-size: var(--site-title-md); line-height: var(--site-lh-display); font-weight: 700; }
.site-title-sm { margin: var(--site-spacing-xl) 0 var(--site-spacing-sm); font-size: var(--site-title-sm); line-height: var(--site-lh-display); font-weight: 700; }
.site-lede { font-size: var(--site-body-lg); color: var(--site-gray-dark); }

.site-hero { padding: var(--site-layout-sm) 0 var(--site-layout-md); }
.site-actions { display: flex; flex-wrap: wrap; gap: var(--site-spacing-md); margin: var(--site-spacing-xl) 0 0; }

/* Buttons do things; links go places — both may wear .site-button (card idiom) */
.site-button { display: inline-flex; align-items: center; min-height: var(--site-touch-target); padding: var(--site-spacing-sm) var(--site-spacing-lg); border: 1px solid var(--site-black); border-radius: var(--site-radius-sm); background: var(--site-white-strong); color: var(--site-black); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.site-button:hover { background: var(--site-gray-light); }
.site-button:active { background: var(--site-gray); }
.site-button--primary { background: var(--site-black); color: var(--site-white-strong); }
.site-button--primary:hover { background: var(--site-gray-dark); }
.site-button--primary:active { background: var(--site-black-strong); }

.site-section { padding: var(--site-layout-sm) 0; border-top: 1px solid var(--site-gray-light); }
.site-section--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-layout-sm); }
.site-band { padding: var(--site-layout-sm); border: 1px solid var(--site-gray-light); border-radius: var(--site-radius-md); background: var(--site-white-strong); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--site-spacing-lg); }
.site-band p { margin: 0; }

/* Live stats and the field grid (Start) */
.site-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--site-layout-2xl), 1fr)); gap: var(--site-spacing-md); margin: 0 0 var(--site-layout-sm); }
.site-stat { margin: 0; padding: var(--site-spacing-md); border: 1px solid var(--site-gray-light); border-radius: var(--site-radius-md); background: var(--site-white-strong); }
.site-stat dt { font-size: var(--site-body-sm); color: var(--site-gray-mid); }
.site-stat dd { margin: var(--site-spacing-xs) 0 0; font-size: var(--site-title-lg); line-height: var(--site-lh-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.site-fieldlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--site-card-min), 1fr)); gap: var(--site-spacing-sm); }
.site-fieldlist li { max-width: none; }
.site-fieldlist a { display: flex; align-items: center; justify-content: space-between; gap: var(--site-spacing-sm); min-height: var(--site-touch-target); padding: var(--site-spacing-md); border: 1px solid var(--site-gray-light); border-radius: var(--site-radius-md); background: var(--site-white-strong); color: var(--site-black); font-weight: 600; text-decoration: none; }
.site-fieldlist a.site-fieldlist__link--accent { border-left: var(--site-swatch-border) solid var(--field-accent); }
.site-fieldlist a::after { content: "\2192"; color: var(--site-gray-mid); }
.site-fieldlist a:hover { border-color: var(--site-black); }
.site-fieldlist a:hover::after { color: var(--site-black); }
.site-fieldlist a:active { background: var(--site-gray-light); }

/* Tables (Voices, Product mapping) */
.site-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--site-spacing-lg); font-size: var(--site-body-md); }
.site-table caption { text-align: left; padding: 0 0 var(--site-spacing-sm); color: var(--site-gray-mid); font-size: var(--site-body-sm); }
.site-table th, .site-table td { padding: var(--site-spacing-sm) var(--site-spacing-md); text-align: left; vertical-align: top; border-bottom: 1px solid var(--site-gray-light); }
.site-table th { font-size: var(--site-body-sm); font-weight: 600; color: var(--site-gray-mid); }
.site-table tbody tr:hover { background: var(--site-white-strong); }

/* Method legend: same tokens and border styles the canvas draws */
.site-legend { list-style: none; margin: 0 0 var(--site-spacing-lg); padding: 0; display: grid; gap: var(--site-spacing-md); }
.site-legend li { display: grid; grid-template-columns: auto 1fr; gap: var(--site-spacing-md); align-items: start; max-width: var(--site-measure); }
.site-swatch { display: inline-block; width: var(--site-spacing-2xl); height: var(--site-spacing-xl); margin-top: var(--site-spacing-xs); border: var(--site-swatch-border) solid var(--color-hypothesized); border-radius: var(--radius-panel); background: var(--color-node-claim); }
.site-swatch--supported { border-style: solid; border-color: var(--color-supported); box-shadow: inset 0 calc(-1 * var(--support-band-height)) 0 var(--color-supported); }
.site-swatch--hypothesized { border-style: dashed; border-color: var(--color-hypothesized); }
.site-swatch--contested { border-style: double; border-color: var(--color-contested); box-shadow: inset 0 calc(-1 * var(--support-band-height)) 0 var(--color-contested); }

.site-note, .site-empty { margin: 0 0 var(--site-spacing-lg); padding: var(--site-spacing-md); color: var(--site-gray-dark); border: 1px dashed var(--site-gray); border-radius: var(--site-radius-sm); max-width: var(--site-measure); }

/* Footer */
.site-footer { border-top: 1px solid var(--site-gray-light); background: var(--site-white-strong); color: var(--site-gray-mid); font-size: var(--site-body-sm); }
.site-footer__inner { max-width: var(--site-content-max); margin: 0 auto; padding: var(--site-layout-sm) var(--site-spacing-lg); display: grid; gap: var(--site-spacing-md); }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--site-spacing-xs) var(--site-spacing-md); }
.site-footer__link { display: inline-flex; align-items: center; min-height: var(--site-touch-target); color: var(--site-gray-dark); text-decoration: none; }
.site-footer__link:hover { color: var(--site-black); text-decoration: underline; }
.site-footer__link[aria-current="page"] { color: var(--site-black); font-weight: 600; }
.site-footer__meta { margin: 0; max-width: var(--site-measure); }

@media (max-width: 768px) {
  .site-header__inner { padding: var(--site-spacing-sm) var(--site-spacing-md); }
  .site-main { padding: var(--site-layout-xs) var(--site-spacing-md) var(--site-layout-md); }
  .site-title-2xl { font-size: var(--site-title-xl); }
  .site-title-xl { font-size: var(--site-title-lg); }
  .site-section--split { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { padding: var(--site-layout-xs) var(--site-spacing-md); }
}

@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }
  .site-page { background: var(--site-white-strong); color: var(--site-black-strong); font-size: 10pt; }
  .site-header, .site-footer, .site-skip, .site-actions { display: none; }
  .site-main { max-width: none; padding: 0; }
  .site-title-2xl { font-size: var(--site-title-md); }
  .site-title-xl, .site-title-lg { font-size: var(--site-title-sm); }
  .site-table, .site-stat, .site-legend li { break-inside: avoid; }
  .site-table thead { display: table-header-group; }
  .site-table tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .site-main a:not([class]) { color: var(--site-black-strong); }
}