/* Shheletar — Noise-Abatement (altitude) page styles. Loads AFTER detail.css so it
   reuses the record sheet (.rec-*), hero (.sv-*) and toolbar. New here: the two
   signature visuals (plan map + altitude profile), the sparkline + tile, and the
   single-page layout. All colours/spacing are existing design tokens. */

/* ---- daytime identity: the altitude record reads sky-blue, not curfew-red ---- */
.alt-doc .rec-head__name b { color: var(--sky); }
.alt-head__sub { color: var(--sky) !important; }
.alt-rulechip { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono);
  font-size: var(--t-caption); letter-spacing: .04em; color: var(--ink-soft);
  padding: .3em .7em; background: var(--sky-tint); border: var(--bw-hair) solid color-mix(in srgb, var(--sky) 30%, transparent);
  border-radius: var(--r-sm); }
.alt-rulechip b { color: var(--sky); }

/* In-prose "X ft below" highlight. A class, not an inline style: Go's html/template
   refuses to interpolate a var(--…) token into a style="color:…" property (it emits
   the ZgotmplZ safety sentinel), so the colour lives here. The rule is binary-confirmed,
   so this is always the stamp red (the old plausible-tier amber recolour is retired). */
.alt-gap-hl { color: var(--stamp); }

/* ============================================================ PLAN MAP */
.pv__svg { display: block; width: 100%; max-width: 100%; height: auto; border: var(--bw-rule) solid var(--border-strong);
  border-radius: var(--r-md); background: var(--paper-deep); }
.pv__coast { fill: var(--green-tint); fill-opacity: .45; stroke: var(--green-bright); stroke-width: .35; stroke-opacity: .7; }
.pv__scale { font-family: var(--font-mono); font-size: 2.6px; font-weight: var(--w-semibold); fill: var(--ink-soft); }
.pv__area { font-family: var(--font-mono); font-size: 2.9px; font-weight: var(--w-bold); letter-spacing: .12px; }
.pv__min { font-family: var(--font-mono); font-size: 2.8px; font-weight: var(--w-bold); fill: var(--stamp); }
/* Flown track, split by weight: the breach pass carries the story; other passes stay
   visible but recede so a multi-lap flight doesn't render as equal-weight spaghetti. */
.pv__track { fill: none; stroke: var(--ink-soft); stroke-linecap: round; stroke-linejoin: round; }
.pv__track--primary { stroke-width: .8; stroke-dasharray: 2 1.4; opacity: .9; }
.pv__track--ctx { stroke-width: .4; stroke-dasharray: 1 1.6; opacity: .35; }
.pv__arrow { fill: var(--ink); opacity: .85; }
.pv__sel { font-family: var(--font-mono); font-size: 3px; font-weight: var(--w-bold); fill: var(--ink); }
.pv__n { font-family: var(--font-mono); font-size: 2.8px; font-weight: var(--w-bold); fill: var(--ink-soft); }

/* ============================================================ ALTITUDE PROFILE */
.ap__svg { display: block; width: 100%; max-width: 100%; height: auto; border: var(--bw-rule) solid var(--border-strong);
  border-radius: var(--r-md); background: var(--paper-deep); }
.ap__band { font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-bold); letter-spacing: 1px; }
.ap__ytick { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ap__axis { font-family: var(--font-mono); font-size: 9px; font-weight: var(--w-semibold); letter-spacing: 1.2px; fill: var(--ink-faint); }
.ap__floorlbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--w-semibold); letter-spacing: .4px; fill: var(--sky); }
.ap__gap { font-family: var(--font-mono); font-size: 14px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.ap__gapsub { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .5px; text-transform: uppercase; fill: var(--ink-faint); }

/* two-viz layout on the record page */
.alt-viz { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s-6); align-items: start; margin: var(--s-6) 0; }
/* let the SVG columns shrink to the track width — grid/flex items default to
   min-width:auto, which lets the 600-wide profile SVG blow the column out past the
   page. min-width:0 confines each visual to its container. */
.alt-hero > *, .alt-viz > * { min-width: 0; }
.alt-viz__cell h3 { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--s-3); }
.alt-viz__cap { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-faint); }
.alt-viz__cap span { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.alt-viz__cap i { width: 18px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.alt-viz__cap i.k-track { border-top-style: dashed; border-color: var(--ink-soft); }
.alt-viz__cap i.k-track--ctx { opacity: .4; }
.alt-viz__cap i.k-breach { border-color: var(--stamp); }
.alt-viz__cap i.k-floor { border-top-style: dashed; border-color: var(--sky); }

/* ============================================================ TILE + GRID */
.alt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-3); }

/* The altitude card reuses the curfew card's skeleton (.vcard*) verbatim — same date
   header, corner metric, tail block — so the two read as one family. Only the body
   differs: it stacks the location rows above the full-width flight profile, and the
   corner metric is the gap below the floor (set in the markup). */
.vcard__body--alt { flex-direction: column; align-items: stretch; gap: var(--s-3); }

.atile__spark { line-height: 0; }
.aspk { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }

.atile__caveat { display: flex; align-items: flex-start; gap: .4em; font-family: var(--font-serif); font-style: italic;
  font-size: var(--t-caption); color: var(--amber-deep); line-height: 1.4; }
.atile__caveat svg { flex: none; margin-top: 2px; }

/* a small Kind badge so commingled curfew/altitude rows read apart in the ledger */
.c-kind { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: var(--w-bold);
  letter-spacing: .08em; text-transform: uppercase; padding: .1em .45em; border-radius: var(--r-sm);
  background: var(--sky-tint); color: var(--sky); }

/* ============================================================ RECORD PAGE */
.alt-hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-7); align-items: stretch; margin: var(--s-6) 0; }
.alt-key { display: flex; flex-direction: column; gap: var(--s-5); }
.alt-key__badges { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.alt-key__facts { display: flex; flex-direction: column; }
.alt-key__facts > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0;
  border-bottom: var(--bw-hair) solid var(--rule); font-family: var(--font-mono); font-size: var(--t-caption); }
.alt-key__facts > div:last-child { border-bottom: 0; }
.alt-key__facts span { color: var(--ink-faint); }
.alt-key__facts b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.alt-explain { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin: var(--s-6) 0;
  padding: var(--s-5); background: var(--paper-deep); border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-md); }
.alt-explain__item { display: flex; flex-direction: column; gap: var(--s-2); }
.alt-explain__item h4 { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.alt-explain__item p { margin: 0; font-family: var(--font-serif); font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.alt-explain__item b { color: var(--ink); }

.alt-tierkey { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-4) 0 var(--s-2);
  font-family: var(--font-serif); font-size: var(--t-small); color: var(--ink-soft); }
.alt-tierkey div { display: flex; align-items: flex-start; gap: .6em; max-width: 42ch; }
.alt-tierkey b { color: var(--ink); }
.alt-tierkey .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; margin-top: 3px; }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .alt-grid { grid-template-columns: repeat(2, 1fr); }
  .alt-viz { grid-template-columns: 1fr; }
  .alt-hero { grid-template-columns: 1fr; }
  .alt-explain { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .alt-grid { grid-template-columns: 1fr; } }

/* ---- Print ---- */
@media print {
  .alt-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .atile { break-inside: avoid; box-shadow: none; border-color: var(--ink-faint); }
  .alt-viz { break-inside: avoid; }
  .ap__svg, .pv__svg, .aspk { background: #fff; }
  .alt-explain { break-inside: avoid; background: #fff; border-color: var(--ink-faint); }
}