/* Shheletar — Single violation (one flight) page styles. Loads after site.css + violations.css. */

/* ---- Hero: key facts + the route chart ---- */
.sv-hero{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:var(--s-7); align-items:stretch; margin:var(--s-6) 0; }
.sv-key{ display:flex; flex-direction:column; gap:var(--s-5); }
.sv-key__badges{ display:flex; gap:var(--s-2); flex-wrap:wrap; }
.sv-key__facts{ display:flex; flex-direction:column; }
.sv-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); }
.sv-key__facts > div:last-child{ border-bottom:0; }
.sv-key__facts span{ color:var(--ink-faint); }
.sv-key__facts b{ color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; }

/* ---- Route detail chart ---- */
.sv-route{ display:flex; flex-direction:column; }
.rd{ flex:1; }
.rd__svg{ display:block; width:100%; height:auto; border:var(--bw-rule) solid var(--border-strong); border-radius:var(--r-md); background:var(--paper-deep); }
.rd__fix{ font-family:var(--font-mono); font-size:2.6px; font-weight:var(--w-semibold); letter-spacing:.12px; fill:var(--ink-soft); }
.rd__port{ font-family:var(--font-mono); font-size:3.1px; font-weight:var(--w-bold); letter-spacing:.1px; fill:var(--ink); }
.rd__sel{ font-family:var(--font-mono); font-size:3.1px; font-weight:var(--w-bold); letter-spacing:.1px; fill:var(--green-deep); }
.rd__n{ font-family:var(--font-mono); font-size:2.8px; font-weight:var(--w-bold); fill:var(--ink-soft); }
.sv-route__cap{ display:flex; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-3);
  font-family:var(--font-mono); font-size:var(--t-caption); color:var(--ink-faint); }
.sv-route__cap b{ color:var(--ink-soft); }

/* ---- Filing block ---- */
.sv-filing{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-7);
  padding:var(--s-5); background:var(--paper-deep); border:var(--bw-hair) solid var(--border-strong); border-radius:var(--r-md); margin:var(--s-6) 0; }
.sv-filing > 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); }
.sv-filing span{ color:var(--ink-faint); }
.sv-filing b{ color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }

/* ---- Timeline ---- */
.sv-tl__cap{ font-family:var(--font-display); font-size:var(--t-h3); margin:var(--s-6) 0 var(--s-4); color:var(--ink); }
.sv-tl{ list-style:none; margin:0; padding:0; position:relative; }
.sv-tl::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1.5px; background:var(--paper-edge-2); }
.sv-tl li{ position:relative; display:grid; grid-template-columns:auto 86px 1fr; align-items:baseline; gap:var(--s-4);
  padding:var(--s-3) 0; }
.sv-tl__dot{ width:15px; height:15px; border-radius:50%; border:2px solid var(--border-strong); background:var(--paper-panel); z-index:1; align-self:center; }
.sv-tl li.is-breach .sv-tl__dot{ border-color:var(--stamp); background:var(--stamp); box-shadow:0 0 0 3px var(--rust-tint); }
.sv-tl__time{ font-family:var(--font-mono); font-weight:var(--w-bold); font-size:var(--t-body); color:var(--ink); font-variant-numeric:tabular-nums; }
.sv-tl li.is-breach .sv-tl__time{ color:var(--stamp); }
.sv-tl__time small{ display:block; font-size:9px; font-weight:var(--w-medium); letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase; }
.sv-tl__what b{ font-family:var(--font-serif); font-size:var(--t-body); color:var(--ink); }
.sv-tl__what span{ display:block; font-family:var(--font-serif); font-size:var(--t-caption); color:var(--ink-soft); margin-top:2px; }

/* ---- Responsive ---- */
@media(max-width:760px){
  .sv-hero{ grid-template-columns:1fr; gap:var(--s-5); }
  .sv-filing{ grid-template-columns:1fr; }
  .sv-tl li{ grid-template-columns:auto 70px 1fr; gap:var(--s-3); }
}

/* ---- Print ---- */
@media print{
  @page{ size:A4 portrait; margin:13mm; }
  .rec-stage,.rec-desk{ background:#fff; padding:0; }
  .mk-nav,.rec-toolbar,.mk-footer,.record__acts{ display:none !important; }
  /* Compress the whole doc subtree by shrinking the shared spacing + type tokens. */
  .rec-doc{
    --s-3:.4rem; --s-4:.5rem; --s-5:.55rem; --s-6:.6rem; --s-7:.7rem; --s-8:.4rem;
    --t-body:.78rem; --t-small:.7rem; --t-caption:.66rem; --t-h3:1rem;
    --t-readout:1.5rem; --t-eyebrow:.6rem;
    box-shadow:none; width:100%; padding:0; border-top:3px solid var(--green);
  }
  /* The A4 content box (~184mm ≈ 695px) is narrower than the 760px mobile
     breakpoint, so the responsive single-column rules fire in print and stack
     every block tall. Force the desktop multi-column layouts back on. */
  .rec-head{ flex-direction:row; padding-bottom:var(--s-3); }
  .rec-head__meta{ align-items:flex-end; }
  .rec-head .shh-stamp svg{ width:62px; height:auto; }
  .rec-head__name{ font-size:1.2rem; }
  .rec-title{ margin:var(--s-3) 0 var(--s-2); }
  .rec-title h1{ font-size:1.25rem; line-height:1.1; margin:var(--s-2) 0 0; }
  /* Hero: two columns, capped route map (aspect kept via the SVG viewBox). */
  .sv-hero{ break-inside:avoid; grid-template-columns:1fr .9fr; gap:var(--s-6); }
  .sv-key{ gap:var(--s-3); }
  .sv-key__facts > div{ padding:var(--s-1) 0; }
  .sv-route .rd__svg{ height:38mm; width:auto; max-width:100%; background:#fff; }
  .sv-route__cap{ color:var(--ink-soft); }
  /* Filing: two columns with tighter rows. */
  .sv-filing{ break-inside:avoid; grid-template-columns:1fr 1fr; background:#fff; border-color:var(--ink-faint); }
  .sv-filing > div{ padding:var(--s-1) 0; }
  /* Timeline: keep its desktop grid, tighten, and let it flow (no break-inside)
     so a long timeline never dumps a blank page. */
  .sv-tl li{ grid-template-columns:auto 86px 1fr; gap:var(--s-4); padding:2pt 0; }
  .sv-tl__dot{ width:10px; height:10px; }
  .sv-tl::before{ left:4.5px; }
  /* Certification: trim the gap, paragraph spacing, and the signature rule. */
  .rec-cert{ break-inside:avoid; margin-top:var(--s-3); padding-top:var(--s-2); }
  .rec-cert__text p{ margin:var(--s-1) 0; }
  .rec-sign__line{ height:20px; }
}