/* ============================================================================
   BUR OAK — COMPONENTS
   Depends on tokens.css. Mobile-first. Every interactive element resolves to
   a >=44x44px hit area (WCAG 2.2 SC 2.5.8 requires 24px; 44px is the 2.5.5
   AAA threshold and the Apple HIG / Material touch-target recommendation).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;        /* keep iOS from inflating type */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--appbar-h, 64px) + var(--sp-4));
  /* ^ SC 2.4.11 Focus Not Obscured: anchor targets clear the sticky app bar */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* -------------------------------------------------------------- focus ---- */
/* SC 2.4.13 Focus Appearance: >=2px thick, >=3:1 against both the component
   and the adjacent background. outline-offset guarantees the second contrast. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-xs);
}

/* --------------------------------------------------------- typography ---- */
h1, h2, h3, h4 { margin: 0 0 .55em; font-weight: 400; }
.balance { text-wrap: balance; }
.display-large, h1 {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  font-weight: 400;
}
.display-medium { font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-medium-size);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking); font-weight: 400; }
.display-small { font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  letter-spacing: var(--md-sys-typescale-display-small-tracking); font-weight: 400; }

.headline-large, h2 { font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height); font-weight: 500; }
.headline-medium, h3 { font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height); font-weight: 500; }
.headline-small, h4 { font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height); font-weight: 500; }

.title-large { font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height); font-weight: 500; }
.title-medium { font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: 600; }
.title-small { font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height); font-weight: 600; }

.body-large { font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height); }
.body-medium { font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height); }
.body-small { font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height); }

.label-large { font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height); font-weight: 600; }
.label-medium { font-family: var(--md-ref-typeface-plain); font-weight: 600;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking); text-transform: uppercase; }
.label-small { font-family: var(--md-ref-typeface-plain); font-weight: 600;
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  letter-spacing: var(--md-sys-typescale-label-small-tracking); text-transform: uppercase; }

.on-variant { color: var(--md-sys-color-on-surface-variant); }
.prose { max-width: var(--measure-prose); }
.prose p { margin: 0 0 1.15em; }

/* ---------------------------------------------------------------- grid ---- */
.container {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}
/* span-N-<class>: mobile-first. Default span = full width of the 4-col grid. */
[class*="span-"] { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .span-m-2 { grid-column: span 2; } .span-m-3 { grid-column: span 3; }
  .span-m-4 { grid-column: span 4; } .span-m-6 { grid-column: span 6; }
  .span-m-8 { grid-column: span 8; }
}
@media (min-width: 840px) {
  .span-e-3 { grid-column: span 3; } .span-e-4 { grid-column: span 4; }
  .span-e-5 { grid-column: span 5; } .span-e-6 { grid-column: span 6; }
  .span-e-7 { grid-column: span 7; } .span-e-8 { grid-column: span 8; }
  .span-e-9 { grid-column: span 9; } .span-e-12 { grid-column: span 12; }
  .start-e-2 { grid-column-start: 2; } .start-e-4 { grid-column-start: 4; }
}
/* intrinsic auto-fit track — no breakpoints needed for card shelves */
.auto-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min, 260px)), 1fr));
}
.section { padding-block: clamp(var(--sp-12), 7vw, var(--sp-24)); }
.stack > * + * { margin-top: var(--stack, var(--sp-4)); }

/* ------------------------------------------------------------ buttons ---- */
.btn {
  --_bg: transparent; --_fg: var(--md-sys-color-primary);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: 0 var(--sp-6);
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  border: none; border-radius: var(--md-sys-shape-corner-full);
  background: var(--_bg); color: var(--_fg);
  text-decoration: none; cursor: pointer;
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
/* M3 state layer — a pseudo-element tinted with the *foreground* colour, so
   hover/press contrast holds in both themes without hard-coding a hover colour */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.btn:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.btn:active::before { opacity: var(--md-sys-state-pressed-opacity); }
/* Gold is a fill, never a text colour: #D4A373 carries a charcoal label at
   6.66:1, but as text on linen it would sit at 2.18:1. */
.btn--filled { --_bg: var(--md-sys-color-primary-container);
  --_fg: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-1); }
.btn--filled:hover { box-shadow: var(--md-sys-elevation-2); }
.btn--tonal { --_bg: var(--md-sys-color-secondary-container); --_fg: var(--md-sys-color-on-secondary-container); }
.btn--tonal:hover { box-shadow: var(--md-sys-elevation-1); }
.btn--outlined { --_fg: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }
.btn--text { padding-inline: var(--sp-3); }
.btn--icon { padding: 0; width: var(--target-min); height: var(--target-min);
  border-radius: var(--md-sys-shape-corner-full); }

/* ---------------------------------------------------- NAVIGATION BAR ---- */
.appbar {
  --appbar-h: 76px;
  position: sticky; top: 0; z-index: 100;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
/* backdrop-filter creates a containing block for fixed-position descendants,
   which trapped the mobile drawer inside this 76px-tall box instead of the
   viewport. It is applied only from 900px up, where the drawer is not fixed. */
@media (min-width: 900px) {
  .appbar {
    background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
  }
}
.appbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); min-height: var(--appbar-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: var(--target-min); text-decoration: none; color: inherit; }
.brand__mark { width: 32px; height: 32px; flex: none; }
.brand__name { font-family: var(--md-ref-typeface-brand); font-size: 1.3125rem; line-height: 1; }
.brand__name small { display: block; margin-top: 3px;
  font-family: var(--md-ref-typeface-mono); font-size: .5rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }

.nav__list { display: flex; align-items: center; gap: var(--sp-1);
  list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link, .nav__trigger {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--target-min); padding: 0 var(--sp-3);
  font: inherit; font-size: var(--md-sys-typescale-label-large-size); font-weight: 600;
  color: var(--md-sys-color-on-surface); background: none; border: 0;
  border-radius: var(--md-sys-shape-corner-s); text-decoration: none; cursor: pointer;
}
.nav__link:hover, .nav__trigger:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.nav__link[aria-current="page"] { color: var(--md-sys-color-primary); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 10px;
  height: 2px; background: var(--md-sys-color-primary); border-radius: 2px;
}
.nav__chevron { width: 18px; height: 18px; transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); }
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* dropdown: disclosure pattern (APG), NOT role=menu — these are page links */
.nav__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  min-width: 268px; padding: var(--sp-2);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-m);
  box-shadow: var(--md-sys-elevation-3);
  list-style: none; margin: 0;
}
.nav__panel[hidden] { display: none; }
.nav__panel a {
  display: block; min-height: var(--target-min); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--md-sys-shape-corner-s); text-decoration: none; color: inherit;
}
.nav__panel a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.nav__panel .d { display: block; color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size); margin-top: 1px; }

html { overflow-x: hidden; overflow-x: clip; }

.nav__toggle { display: none; }

@media (max-width: 899px) {
  .nav__toggle { display: inline-flex; }
  /* --nav-top is written by nav.js from the app bar's real position, because
     the utility strip above it makes the offset unknowable from CSS alone. */
  .nav { position: fixed; top: var(--nav-top, 76px); right: 0; bottom: 0; left: auto;
    width: min(88vw, 340px); max-width: calc(100vw - 24px);
    background: var(--md-sys-color-surface-container);
    border-left: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-sys-elevation-3);
    padding: var(--sp-4); overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
                visibility 0s linear var(--md-sys-motion-duration-medium);
  }
  .nav[data-open="true"] { transform: none; visibility: visible;
    transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
                visibility 0s; }

  /* tap-anywhere-else to close */
  .nav-scrim { position: fixed; inset: var(--nav-top, 76px) 0 0 0; z-index: 40;
    background: rgba(22,34,26,.38); opacity: 0; pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard); }
  .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
  .nav { z-index: 45; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link, .nav__trigger { width: 100%; justify-content: space-between; padding: 0 var(--sp-4); }
  .nav__panel { position: static; min-width: 0; box-shadow: none; border: 0;
    background: transparent; padding: 0 0 var(--sp-2) var(--sp-4); }
  .nav__link[aria-current="page"]::after { display: none; }
}

/* ------------------------------------------------------------- cards ---- */
.card {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-l);
  padding: var(--sp-6);
  box-shadow: var(--md-sys-elevation-1);
  transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.card--link:hover { box-shadow: var(--md-sys-elevation-3); transform: translateY(-3px); }
/* whole-card click target without nesting interactive elements */
.card--link { position: relative; }
.card--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* --------------------------------------------------- inline prose link ---- */
.prose a:not(.btn) {
  color: var(--md-sys-color-primary);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* 2.5.8 exception: links in a sentence are exempt from target sizing, but we
   still buy vertical room via line-height rather than padding (which would
   break the text flow). Body line-height 1.65 gives ~28px of vertical target. */

/* ------------------------------------------------------------- forms ---- */
.field { display: block; margin-bottom: var(--sp-5); }
.field label { display: block; margin-bottom: var(--sp-2);
  font-size: var(--md-sys-typescale-label-large-size); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--target-min);
  padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: 1rem;               /* >=16px stops iOS zoom-on-focus */
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-s);
}
.field textarea { min-height: 132px; resize: vertical; }
.field .hint { display: block; margin-top: var(--sp-2);
  font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
.field[data-invalid] input { border-color: var(--md-sys-color-error); border-width: 2px; }
.field .err { color: var(--md-sys-color-error); font-size: var(--md-sys-typescale-body-small-size); }

/* ------------------------------------------------------------- misc ---- */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--md-sys-shape-corner-s); z-index: 200;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-4);
  border-radius: var(--md-sys-shape-corner-s); background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: var(--md-sys-typescale-label-large-size); font-weight: 600; }
/* interactive chips need the 44px hit area even at 32px visual height */
a.chip, button.chip { position: relative; }
a.chip::before, button.chip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: var(--target-min);
}

hr.rule { border: 0; border-top: 1px solid var(--md-sys-color-outline-variant); margin: var(--sp-12) 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }