/* =====================================================================
   Flight summary — one stylesheet for both renders (interactive app page
   and the stored public page). Everything is scoped under .fsum so the
   summary's token system cannot collide with app or public-page CSS.
   Light is the default; dark comes from the OS unless the page stamps
   data-theme, which always wins.
   ===================================================================== */

.fsum {
  --fs-page:      #eef1f5;
  --fs-surface:   #ffffff;
  --fs-surface-2: #f7f9fb;
  --fs-inset:     #eef2f6;
  --fs-border:    #c7ced6;
  --fs-hairline:  #e1e6eb;
  --fs-ink:       #1b2733;
  --fs-muted:     #55636c;
  --fs-faint:     #8593a0;
  --fs-link:      #17669e;

  --fs-blue:  #4193cf;
  --fs-blue3: #87d5f7;

  --fs-red:   #8f1f14;
  --fs-amber: #b3650c;
  --fs-green: #17855f;

  --fs-red-tint:   rgba(143,31,20,.10);
  --fs-amber-tint: rgba(179,101,12,.12);
  --fs-green-tint: rgba(23,133,95,.11);
  --fs-blue-tint:  rgba(65,147,207,.10);

  --fs-track: #e5eaef;

  --fs-hero-ink:   #eaf4fb;
  --fs-hero-muted: #9dc0da;

  --fs-shadow-sm: 0 1px 2px rgba(20,33,48,.06);
  --fs-shadow-md: 0 4px 16px -6px rgba(20,33,48,.18), 0 1px 3px rgba(20,33,48,.06);

  color: var(--fs-ink);
  font-size: 14px;
  line-height: 1.5;
  max-width: 1040px;
  margin: 0 auto;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fsum {
    --fs-page:      #000000;
    --fs-surface:   #00101b;
    --fs-surface-2: #001621;
    --fs-inset:     #002136;
    --fs-border:    rgba(135,213,247,.22);
    --fs-hairline:  rgba(135,213,247,.13);
    --fs-ink:       #e6eef4;
    --fs-muted:     #96abb9;
    --fs-faint:     #6e8695;
    --fs-link:      #87d5f7;

    --fs-red:   #dd6d59;
    --fs-amber: #e5a03c;
    --fs-green: #3cc493;

    --fs-red-tint:   rgba(221,109,89,.14);
    --fs-amber-tint: rgba(229,160,60,.14);
    --fs-green-tint: rgba(60,196,147,.14);
    --fs-blue-tint:  rgba(135,213,247,.12);

    --fs-track: rgba(135,213,247,.13);

    --fs-shadow-sm: none;
    --fs-shadow-md: none;
  }
}

:root[data-theme="dark"] .fsum {
  --fs-page:      #000000;
  --fs-surface:   #00101b;
  --fs-surface-2: #001621;
  --fs-inset:     #002136;
  --fs-border:    rgba(135,213,247,.22);
  --fs-hairline:  rgba(135,213,247,.13);
  --fs-ink:       #e6eef4;
  --fs-muted:     #96abb9;
  --fs-faint:     #6e8695;
  --fs-link:      #87d5f7;

  --fs-red:   #dd6d59;
  --fs-amber: #e5a03c;
  --fs-green: #3cc493;

  --fs-red-tint:   rgba(221,109,89,.14);
  --fs-amber-tint: rgba(229,160,60,.14);
  --fs-green-tint: rgba(60,196,147,.14);
  --fs-blue-tint:  rgba(135,213,247,.12);

  --fs-track: rgba(135,213,247,.13);

  --fs-shadow-sm: none;
  --fs-shadow-md: none;
}

.fsum * { box-sizing: border-box; }
.fsum .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.fsum .ico { width: 1em; height: 1em; flex: none; display: block; }

/* ---------------- shared furniture ---------------- */
.fsum .card {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: 20px;
  box-shadow: var(--fs-shadow-sm);
}
.fsum .pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fsum .pill.good { background: var(--fs-green-tint); color: var(--fs-green); }
.fsum .pill.warn { background: var(--fs-amber-tint); color: var(--fs-amber); }
.fsum .pill.bad  { background: var(--fs-red-tint);   color: var(--fs-red); }
.fsum .pill.info { background: var(--fs-blue-tint);  color: var(--fs-link); }
/* Neither good nor bad - a check nobody made. Matches .gdot.none on the gates card. */
.fsum .pill.none { background: transparent; color: var(--fs-faint); box-shadow: inset 0 0 0 1px var(--fs-hairline); }

/* ---------------- hero ---------------- */
.fsum .hero {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(135deg, #013457 0%, #00497e 46%, #013e6c 100%);
  color: var(--fs-hero-ink);
  padding: 26px 28px 74px;
  overflow: hidden;
}
.fsum .hero::after {
  content: "";
  position: absolute; right: -90px; top: -140px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(135,213,247,.16), transparent 68%);
  pointer-events: none;
}
.fsum .route {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,1.25fr) minmax(0,1fr);
  align-items: center; gap: 20px;
  position: relative; z-index: 1;
}
.fsum .ap { min-width: 0; }
.fsum .ap .top { display: flex; align-items: center; gap: 10px; }
.fsum .ap .flag {
  width: 30px; height: 15px; flex: none; object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28);
}
.fsum .ap .icao { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.fsum .ap .place {
  font-size: 13.5px; color: var(--fs-hero-ink); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsum .ap .rwy {
  margin-top: 5px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fs-blue3);
  font-variant-numeric: tabular-nums;
}
.fsum .ap.to { text-align: right; }
.fsum .ap.to .top { justify-content: flex-end; }
.fsum .centre { text-align: center; }
.fsum .score-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fs-blue3); margin: 0;
}
.fsum .score-big {
  font-size: 58px; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  margin: 6px 0 0; color: #ffffff; font-variant-numeric: tabular-nums;
}
.fsum .score-big .pct { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
/* The in-flight stand-in for the score: the same weight in the hero, but plainly a
   clock rather than a mark out of a hundred. */
.fsum .score-live {
  font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  margin: 6px 0 0; color: #ffffff; font-variant-numeric: tabular-nums;
}
.fsum .score-live .pct { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.fsum .byline {
  font-size: 13px; color: var(--fs-hero-muted); margin: 7px auto 0;
  max-width: 42ch; line-height: 1.45;
}
.fsum .arc { display: block; width: 100%; height: 40px; margin-top: 10px; overflow: visible; }
.fsum .facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; margin-top: 12px;
  font-size: 12.5px; color: var(--fs-hero-ink);
  font-variant-numeric: tabular-nums;
}
.fsum .facts span { display: inline-flex; align-items: center; gap: 7px; }
.fsum .facts .ico { font-size: 15px; color: var(--fs-blue3); }

/* ---------------- score rail ---------------- */
.fsum .rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  /* On the same three columns as the read cards below and the phase cards after
     them; the side inset every section shares is set once, below. */
  margin-top: -56px;
  position: relative; z-index: 3;
}
/* Everything under the hero sits 12 px inside its edges, so the hero reads as the
   widest thing on the page and the rail's cards sit within it rather than flush with
   it. One rule for every section, so they all stay on the same columns. Desktop only:
   below 940 the columns need every pixel. */
@media (min-width: 941px) {
  .fsum > :not(.hero) { margin-left: 12px; margin-right: 12px; }
}
.fsum .scard {
  position: relative; overflow: hidden;
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: 16px;
  padding: 14px 16px 15px;
  box-shadow: var(--fs-shadow-md);
}
.fsum .scard .row1 { display: flex; align-items: center; gap: 9px; }
.fsum .scard .badge {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
}
.fsum .scard .badge .ico { font-size: 17px; }
.fsum .scard .lbl { font-size: 12px; font-weight: 650; color: var(--fs-muted); flex: 1 1 auto; }
.fsum .scard .big {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums;
}
.fsum .scard .cap { font-size: 12px; color: var(--fs-muted); margin-top: 5px; }
.fsum .scard .meter { height: 4px; border-radius: 2px; background: var(--fs-track); margin-top: 10px; overflow: hidden; }
.fsum .scard .meter i { display: block; height: 100%; border-radius: 2px; }

/* ---------------- ledger ---------------- */
.fsum .ledger-grid {
  display: grid; grid-template-columns: 270px minmax(0,1fr);
  gap: 8px 32px; align-items: start;
}
.fsum .ledger-head .eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--fs-faint); margin: 0 0 4px;
}
.fsum .ledger-head h2 { font-size: 17px; font-weight: 680; letter-spacing: -.015em; margin: 0 0 4px; }
.fsum .ledger-head .sub { font-size: 12.5px; color: var(--fs-muted); margin: 0 0 14px; max-width: 62ch; }
.fsum .waterfall {
  display: flex; height: 34px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--fs-hairline);
}
.fsum .waterfall i {
  display: grid; place-items: center; height: 100%;
  font-size: 11px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; font-style: normal;
  overflow: hidden;
}
.fsum .wf-key {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 11.5px; color: var(--fs-muted); font-variant-numeric: tabular-nums;
}
.fsum .lrows {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 32px; margin-top: 4px;
}
.fsum .lrow {
  display: grid; grid-template-columns: 52px minmax(0,1fr);
  gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--fs-hairline);
}
.fsum .lrow .amt {
  font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-align: right;
  color: var(--fs-red); font-variant-numeric: tabular-nums;
}
.fsum .lrow .amt.rem { color: var(--fs-muted); }
.fsum .lrow .what { font-size: 13px; font-weight: 650; }
.fsum .lrow .what.rem { color: var(--fs-muted); }
.fsum .lrow .why { font-style: normal; font-size: 12px; font-weight: 400; color: var(--fs-muted); margin-left: 4px; }

/* ---------------- read of the flight ---------------- */
.fsum .read {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px; margin-top: 16px;
}
.fsum .rcard { display: flex; flex-direction: column; }
.fsum .rhead { display: flex; align-items: center; gap: 9px; padding: 18px 22px 0; }
.fsum .rhead h2 { font-size: 17px; font-weight: 680; letter-spacing: -.015em; margin: 0; }
.fsum .hi-ic {
  width: 20px; height: 20px; border-radius: 6px; padding: 2px;
  box-sizing: content-box; display: grid; place-items: center;
}
.fsum .hi-ic .ico { width: 20px; height: 20px; }
.fsum .hi-ic.ok   { background: var(--fs-green-tint); color: var(--fs-green); }
.fsum .hi-ic.warn { background: var(--fs-amber-tint); color: var(--fs-amber); }
.fsum .wins { padding: 14px 22px 18px; display: flex; flex-direction: column; gap: 11px; }
.fsum .wins > div {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--fs-muted);
}
.fsum .tick { margin-top: 1px; }
.fsum .tick .ico { width: 17px; height: 17px; }
.fsum .tick.ok { color: var(--fs-green); }
.fsum .tick.warn { color: var(--fs-amber); }
/* The stage a held-back line is about: a link into the flight story. Bold either way,
   so a line whose stage has no card to open (an old flight) still leads with its name. */
.fsum .hb-stage { font-weight: 700; color: var(--fs-ink); }
.fsum a.hb-stage { color: var(--fs-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(65,147,207,.45); }
.fsum a.hb-stage:hover { text-decoration-color: currentColor; }
.fsum a.hb-stage:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 2px; border-radius: 3px; }
/* Full width under the read cards. The left third names the opportunity; the rest is the
   passage, which needs more room than a third of the page ever gave it. */
.fsum .opp { border-color: var(--fs-amber); margin-top: 16px; }
.fsum .opp-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
.fsum .opp-side { border-right: 1px solid var(--fs-hairline); }
.fsum .opp-main { padding: 18px 22px 18px; }
.fsum .opp-main .opp-coach, .fsum .opp-main .opp-why { margin-top: 0; }
.fsum .opp-about { font-size: 12.5px; color: var(--fs-muted); line-height: 1.5; margin: 8px 0 0; }
.fsum .opp-body { padding: 14px 22px 18px; }
.fsum .opp-lead { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.fsum .opp-why { font-size: 12.5px; color: var(--fs-muted); line-height: 1.5; margin: 12px 0 0; }
/* The guide passage and where it is from. Quiet, readable prose; the link names the article. */
/* The whole passage. It was clamped to five lines while the text was a paragraph lifted
   from an article; now it is written for the card in the Blog Manager, and what is
   written is what shows. */
.fsum .opp-coach { font-size: 12.5px; color: var(--fs-muted); line-height: 1.55; margin: 12px 0 0; white-space: pre-line; }
.fsum .opp-link {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
  color: var(--fs-link); text-decoration: none;
}
.fsum .opp-link b { font-weight: 700; }
.fsum .opp-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.fsum .opp-link:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 2px; border-radius: 3px; }
.fsum .rempty { font-size: 12.5px; color: var(--fs-muted); line-height: 1.5; font-style: italic; }
.fsum .rempty-row {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--fs-muted);
}

/* ---------------- phase cards (takeoff / approach / touchdown) ---------------- */
.fsum .trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.fsum .pcard { display: flex; flex-direction: column; }
.fsum .phead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 22px 0;
}
.fsum .phead h2 { font-size: 17px; font-weight: 680; letter-spacing: -.015em; margin: 0; }
.fsum .pband { padding: 14px 22px 16px; }
.fsum .sband { position: relative; padding-bottom: 14px; }
.fsum .sb-track { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.fsum .sb-track .z { display: block; height: 100%; }
.fsum .sb-track .r { width: 25%; background: var(--fs-red-tint); }
.fsum .sb-track .a { width: 50%; background: var(--fs-amber-tint); }
.fsum .sb-track .g { width: 25%; background: var(--fs-green-tint); }
.fsum .sb-mark {
  position: absolute; top: -3px; width: 3px; height: 14px;
  border-radius: 2px; transform: translateX(-1.5px);
  box-shadow: 0 0 0 2px var(--fs-surface);
}
.fsum .sb-ticks { position: absolute; left: 0; right: 0; top: 12px; height: 12px; }
.fsum .sb-ticks span {
  position: absolute; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 650; color: var(--fs-faint);
  font-variant-numeric: tabular-nums;
}
.fsum .phase-cap { font-size: 12.5px; color: var(--fs-muted); margin: 12px 0 0; }
.fsum .mtable { border-top: 1px solid var(--fs-hairline); }
.fsum .mrow {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 22px;
  border-bottom: 1px solid var(--fs-hairline);
}
.fsum .mrow:last-child { border-bottom: 0; }
/* The pill column is 64px because that is what "100.00" needs. A word chip - "Not
   assessed", "Stable" - is wider, and a fixed width let it run under the label beside it.
   min-width keeps every pill in a column while a long one takes the room it needs. */
.fsum .mrow .p { order: -1; min-width: 64px; text-align: left; flex: none; }
.fsum .mrow .p .pill { white-space: nowrap; }
.fsum .mrow .k { font-size: 12.5px; color: var(--fs-muted); flex: 1 1 auto; min-width: 0; }
/* The value wraps, and only where the component put a break opportunity: every space
   inside a part is non-breaking, so "14 kn" and "250°" stay whole and the line can only
   turn after a separator. It was nowrap, which on a phone sent the longer values - the
   wind, a gate listing the checks it failed - straight out through the side of the card. */
.fsum .mrow .v { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  white-space: normal; text-align: right; flex: 0 1 auto; min-width: 0; }
.fsum .flare-note {
  margin-top: auto;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--fs-hairline);
  font-size: 12.5px; color: var(--fs-muted); line-height: 1.55;
}
.fsum .flare-note .pill { float: right; margin: 1px 0 4px 10px; }

/* ---------------- gates + touchdown duo ---------------- */
/* The gates card is exactly one column of the three-column phase grid above it (the
   Takeoff card's width), so the two stack on the same lines; the touchdown drawing
   takes the other two columns and the gap between them. The gate card's fixed
   columns below are sized to fit. */
.fsum .duo { display: grid; grid-template-columns: calc((100% - 32px) / 3) minmax(0,1fr); gap: 16px; margin-top: 16px; }
.fsum .dhead { padding: 18px 22px 0; }
.fsum .dhead .eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--fs-faint); margin: 0 0 4px;
}
.fsum .dhead h2 { font-size: 17px; font-weight: 680; letter-spacing: -.015em; margin: 0; }
.fsum .dhead .sub { font-size: 12.5px; color: var(--fs-muted); line-height: 1.5; margin: 6px 0 0; max-width: 62ch; }
.fsum .gate-body { padding: 16px 20px 20px; }
.fsum .ghead, .fsum .grow {
  display: grid; grid-template-columns: minmax(0,1fr) 62px 62px;
  align-items: center; gap: 8px; padding: 13px 2px;
}
/* A circuit has one gate. */
.fsum .ggrid.one .ghead, .fsum .ggrid.one .grow {
  grid-template-columns: minmax(0,1fr) 62px;
}
.fsum .ghead {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fs-faint);
  border-bottom: 1px solid var(--fs-hairline);
}
/* The gate columns are 62px, and a height in the owner's units can be wider than that
   ("1,000 ft"). Stacking the unit under the number costs a header line; refusing to wrap
   put it over the column beside it. */
.fsum .ghead span:nth-child(n+2) { text-align: center; white-space: normal; }
.fsum .grow { border-bottom: 1px solid var(--fs-hairline); font-size: 12.5px; font-weight: 620; }
.fsum .grow:last-child { border-bottom: 0; }
.fsum .grow .gc { display: flex; justify-content: center; }
.fsum .gate-note { font-size: 12px; color: var(--fs-muted); line-height: 1.5; margin: 10px 0 0; }
.fsum .gdot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.fsum .gdot .ico { width: 13px; height: 13px; }
.fsum .gdot.pass { background: var(--fs-green-tint); color: var(--fs-green); }
.fsum .gdot.fail { background: var(--fs-amber-tint); color: var(--fs-amber); }
/* Never assessed - a gate nobody measured. Deliberately the quietest of the three: it is not
   a pass and it is not a failure, and it used to be drawn as a green tick. */
.fsum .gdot.none { background: transparent; color: var(--fs-faint); }
.fsum .agates { border-top: 1px solid var(--fs-hairline); margin-top: 16px; padding-top: 16px; }
.fsum .agates .ah {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fs-faint); margin: 0 0 4px;
}
.fsum .arow {
  display: grid; grid-template-columns: 42px minmax(0,1.1fr) minmax(0,1fr) minmax(0,0.9fr);
  gap: 6px; align-items: center; padding: 9px 2px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--fs-hairline);
}
.fsum .arow:last-child { border-bottom: 0; }
.fsum .arow.ahead {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fs-faint);
}
.fsum .arow span:first-child { font-weight: 650; color: var(--fs-muted); }
.fsum .arow .ok { color: var(--fs-muted); font-weight: 600; }
.fsum .arow .off { color: var(--fs-amber); font-weight: 650; }
.fsum .td-body { padding: 14px 22px 20px; }
.fsum .td-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.fsum .td-stats > div {
  background: var(--fs-surface-2); border: 1px solid var(--fs-hairline);
  border-radius: 12px; padding: 10px 12px;
}
.fsum .td-stats .k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fs-faint); min-height: 24px;
}
.fsum .td-stats .v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
/* Band colour per tile: tint, edge and value, the same three bands as the pills. A tile
   with no class is a metric that was never scored and keeps the plain surface. */
.fsum .td-stats > div.good { background: var(--fs-green-tint); border-color: var(--fs-green); }
.fsum .td-stats > div.warn { background: var(--fs-amber-tint); border-color: var(--fs-amber); }
.fsum .td-stats > div.bad  { background: var(--fs-red-tint);   border-color: var(--fs-red); }
.fsum .td-stats > div.good .v { color: var(--fs-green); }
.fsum .td-stats > div.warn .v { color: var(--fs-amber); }
.fsum .td-stats > div.bad  .v { color: var(--fs-red); }
.fsum .td-stats .u { font-size: 11.5px; font-weight: 600; color: var(--fs-muted); margin-left: 3px; }
.fsum .rwy-svg { width: 100%; height: auto; display: block; }
.fsum .viewcap { font-size: 11px; font-weight: 600; color: var(--fs-muted); margin: 0 0 6px; }
.fsum .viewcap b {
  color: var(--fs-ink); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: 10px; margin-right: 6px;
}
.fsum .td-note {
  margin: 14px 0 0; font-size: 12.5px; color: var(--fs-muted);
  padding-top: 13px; border-top: 1px solid var(--fs-hairline);
}
.fsum .used { margin-top: 16px; }
.fsum .used-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; font-weight: 600; }
.fsum .used-head span:last-child { color: var(--fs-muted); font-weight: 500; }
.fsum .used-bar { position: relative; height: 12px; margin-top: 8px; border-radius: 6px; background: var(--fs-track); overflow: hidden; }
.fsum .used-bar i { position: absolute; top: 0; bottom: 0; display: block; }
.fsum .used-bar .air { left: 0; opacity: .75; background: var(--fs-blue3); }
.fsum .used-bar .roll { background: var(--fs-blue); }

/* ---------------- flight story: carousel + drill-downs ---------------- */
.fsum .story { margin-top: 16px; }
.fsum .story-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 18px 22px 0;
}
.fsum .story-head .eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--fs-faint); margin: 0 0 4px;
}
.fsum .story-head h2 { font-size: 17px; font-weight: 680; letter-spacing: -.015em; margin: 0; }
.fsum .story-tools { display: flex; align-items: center; gap: 4px; }
.fsum .counter { font-size: 11.5px; font-weight: 600; color: var(--fs-muted); padding: 0 8px 0 4px; white-space: nowrap; }
.fsum .cbtn {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--fs-border); border-radius: 999px;
  background: var(--fs-surface); color: var(--fs-ink);
  cursor: pointer; font: inherit;
}
.fsum .cbtn .ico { width: 17px; height: 17px; }
.fsum .cbtn:hover { background: var(--fs-surface-2); }
.fsum .story-body { padding: 14px 22px 20px; }
.fsum .track {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.fsum .track::-webkit-scrollbar { display: none; }
.fsum .stg {
  flex: 0 0 calc((100% - 50px) / 6);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--fs-surface-2);
  border: 1px solid var(--fs-hairline);
  border-radius: 14px;
  padding: 11px 12px 12px;
}
.fsum .stg:hover { background: var(--fs-surface); border-color: var(--fs-border); }
.fsum .stg.open { border-color: var(--fs-blue); background: var(--fs-surface); box-shadow: inset 0 0 0 1px var(--fs-blue); }
.fsum .stg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The "held you back" flag: sits between the glyph and the score, only on the stages
   the read card names. Same triangle as the read card, so the two visibly match. */
.fsum .stg-flag { display: block; color: var(--fs-amber); }
.fsum .stg-flag .ico { width: 15px; height: 15px; }
/* One pulse when a read-card link lands on the card, so the eye finds it in a strip of
   near-identical tiles. Ends on the .open styling, which stays. */
.fsum .stg.hit { animation: fs-hit .9s ease-out; }
@keyframes fs-hit {
  0%   { box-shadow: inset 0 0 0 1px var(--fs-blue), 0 0 0 0 rgba(65,147,207,.55); }
  100% { box-shadow: inset 0 0 0 1px var(--fs-blue), 0 0 0 14px rgba(65,147,207,0); }
}
@media (prefers-reduced-motion: reduce) { .fsum .stg.hit { animation: none; } }
.fsum .stg-ico { font-size: 18px; width: 18px; height: 18px; color: var(--fs-muted); }
.fsum .stg-name { font-size: 12.5px; font-weight: 680; margin-top: 3px; }
.fsum .stg-val { font-size: 12.5px; font-weight: 600; color: var(--fs-ink); }
.fsum .stg-desc {
  font-size: 11.5px; color: var(--fs-muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fsum .minimap { position: relative; margin-top: 16px; height: 10px; }
.fsum .mm-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--fs-track); }
/* Grabbable, like the scrollbar thumb it resembles. touch-action:none so a horizontal
   drag scrolls the strip instead of the page. Only where the script has bound it - .js is
   set on the root at init - so a page without JS keeps a plain indicator. */
.fsum.js .mm-bar { cursor: grab; touch-action: none; }
.fsum.js .mm-bar.dragging { cursor: grabbing; }
.fsum.js .mm-bar.dragging i { opacity: 1 !important; }
.fsum .mm-bar i { display: block; height: 100%; cursor: pointer; min-width: 6px; }
/* short stages (touchdown, rollout) are seconds in an hours-long bar - the floor above
   keeps their band colour visible at the cost of strict scale */
.fsum .mm-window {
  position: absolute; top: -3px; bottom: -3px;
  border: 2px solid var(--fs-ink); border-radius: 8px;
  pointer-events: none;
}
.fsum .mm-key {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 9px; font-size: 11px; color: var(--fs-faint);
}
.fsum .mm-key span:nth-child(2) { text-align: center; }
.fsum .mm-key span:first-child, .fsum .mm-key span:last-child { font-weight: 650; color: var(--fs-muted); }

.fsum .drill {
  margin-top: 14px;
  border: 1px solid var(--fs-border); border-radius: 14px;
  background: var(--fs-surface-2);
  overflow: hidden;
}
/* server renders every panel open for crawlers; the js layer collapses them */
.fsum.js .drill { display: none; }
.fsum.js .drill.open { display: block; }
.fsum .drill-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fs-hairline);
  background: var(--fs-surface);
}
.fsum .drill-head .stg-ico { color: var(--fs-muted); }
/* Stage names run long - "Departure ground roll" - and the head is a flex row that already
   wraps, so the title wraps with it rather than pushing out of the panel. */
.fsum .drill-title { font-size: 13.5px; font-weight: 680; }
.fsum .drill-sub { font-size: 12px; color: var(--fs-muted); flex: 1 1 auto; min-width: 160px; }
.fsum .drill-rows { overflow-x: auto; }
.fsum .drow {
  display: grid;
  grid-template-columns: 64px minmax(180px,1fr) 72px 130px 72px;
  gap: 12px; align-items: center;
  min-width: 580px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--fs-hairline);
}
.fsum .drow:last-child { border-bottom: 0; }
.fsum .drow.drhead {
  padding: 8px 16px 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fs-faint);
}
.fsum .drow .dl { font-size: 12.5px; font-weight: 650; }
.fsum .drow .dl em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 11.5px; color: var(--fs-muted);
}
/* These columns are 72px and the values are single measurements, so wrapping lands between
   the number and its unit - two short lines in the column instead of one line across the
   one beside it. The table itself still side-scrolls; that is deliberate. */
.fsum .drow .dv {
  font-size: 12px; color: var(--fs-muted); text-align: right;
  font-variant-numeric: tabular-nums;
}
.fsum .drow .dv b { color: var(--fs-ink); font-weight: 650; }
.fsum .spark { width: 100%; height: 28px; display: block; }
.fsum .devents { border-top: 1px solid var(--fs-hairline); padding: 10px 16px 12px; }
.fsum .devents-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fs-faint); margin: 0 0 4px;
}
.fsum .devent {
  display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 12px; align-items: center;
  font-size: 12px; color: var(--fs-muted); padding: 3px 0;
}
/* Height and speed, joined. The component makes each measurement unbreakable and leaves the
   join breakable, so a long one turns after the separator instead of leaving the card. */
.fsum .devent .dv { color: var(--fs-ink); font-weight: 600; text-align: right; }
/* A fault reads like a failed check in the rows above: the name in ink, and bold. */
.fsum .devent.warn .dn { color: var(--fs-ink); font-weight: 650; }
.fsum .devent .dcarried { font-style: normal; font-weight: 500; color: var(--fs-muted); margin-left: 6px; }
.fsum .drill-spatial { padding: 12px 16px 16px; border-top: 1px solid var(--fs-hairline); }
.fsum .spatial { width: 100%; height: auto; display: block; }
.fsum .spatial + .spatial { margin-top: 10px; }

/* ---------------- explore + narrative ---------------- */
.fsum .explore-sec { margin-top: 16px; }
.fsum .explore {
  padding: 16px 22px 22px;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px;
}
.fsum .xcard {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: 16px;
  border: 1px solid var(--fs-hairline); background: var(--fs-surface-2);
  font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.fsum .xcard:hover { background: var(--fs-surface); border-color: var(--fs-border); }
.fsum .xcard.open { background: var(--fs-surface); border-color: var(--fs-blue); box-shadow: inset 0 0 0 1px var(--fs-blue); }
.fsum .xi {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--fs-blue-tint); color: var(--fs-link);
}
.fsum .xi .ico { width: 17px; height: 17px; }
.fsum .xt { font-size: 13px; font-weight: 680; }
.fsum .xd { font-size: 11.5px; color: var(--fs-muted); line-height: 1.4; }
.fsum .xpanel { padding: 0 22px 22px; }
.fsum.js .xpanel { display: none; }
.fsum.js .xpanel.open { display: block; }
.fsum .xpanel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0 12px; border-top: 1px solid var(--fs-hairline);
}
.fsum .xpanel-head .xi { width: 28px; height: 28px; }
.fsum .xpanel-title { font-size: 14px; font-weight: 680; flex: 1 1 auto; }
.fsum .xprose { font-size: 13px; line-height: 1.65; color: var(--fs-ink); }
.fsum .xprose p { margin: 0 0 10px; }
.fsum .xprose p:last-child { margin-bottom: 0; }
.fsum .xstub {
  border: 1.5px dashed var(--fs-border); border-radius: 14px;
  background: var(--fs-surface-2);
  min-height: 180px; display: grid; place-items: center;
  text-align: center; color: var(--fs-muted); font-size: 12.5px;
  line-height: 1.6; padding: 24px;
}
.fsum .xstub b { color: var(--fs-ink); font-weight: 650; display: block; margin-bottom: 4px; }
.fsum .xcharts .spatial + .spatial { margin-top: 12px; }
.fsum .xcap { font-size: 12px; color: var(--fs-muted); margin: 0 0 10px; }
.fsum .mapload {
  display: inline-block; margin-top: 12px;
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--fs-blue); color: #fff;
  border: 0; border-radius: 8px; padding: 10px 24px; cursor: pointer;
}
.fsum #mapbox.map { height: 76vh; border-radius: 14px; overflow: hidden; }
/* the app embed keeps its own map route, exactly as the old report hid its map in-frame */
html.embed .fsum [data-fx-card="map"], html.embed .fsum [data-fx-panel="map"] { display: none !important; }

/* ---------------- screenshots (members only) ---------------- */
.fsum .shots-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fsum .shots-head .tag {
  font-size: 11.5px; font-weight: 650; color: var(--fs-muted);
  background: var(--fs-inset); border-radius: 999px; padding: 3px 11px; margin-top: 4px;
}
.fsum .shots {
  padding: 16px 22px 22px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
}
.fsum .shot {
  position: relative; margin: 0; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--fs-hairline); background: var(--fs-inset);
}
.fsum .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsum .shot .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 10px 7px;
  font-size: 11px; font-weight: 600; color: #eaf4fb;
  background: linear-gradient(transparent, rgba(1,22,38,.78));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- owner field editor ---------------- */
.fsum .editor-body {
  padding: 14px 22px 4px;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
}
.fsum .field { display: flex; flex-direction: column; gap: 5px; }
.fsum .field.wide { grid-column: 1 / -1; }
.fsum .field label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fs-faint);
}
.fsum .field label i {
  font-style: normal; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--fs-faint); opacity: .85;
}
.fsum .field input, .fsum .field textarea {
  font: inherit; font-size: 13px; color: var(--fs-ink);
  background: var(--fs-inset); border: 1px solid var(--fs-border);
  border-radius: 8px; padding: 8px 10px; width: 100%;
}
.fsum .field textarea { resize: vertical; min-height: 60px; }
.fsum .editor-note {
  font-size: 11.5px; color: var(--fs-muted); line-height: 1.5;
  padding: 10px 22px 18px; margin: 0;
}

/* ---------------- responsive ---------------- */
@media (max-width: 940px) {
  .fsum .rail { margin-top: -46px; gap: 8px; }
  .fsum .trio { grid-template-columns: 1fr; }
  .fsum .read { grid-template-columns: 1fr; }
  .fsum .opp-grid { grid-template-columns: 1fr; }
  .fsum .opp-side { border-right: 0; border-bottom: 1px solid var(--fs-hairline); }
  .fsum .opp-main { padding-top: 14px; }
  .fsum .duo { grid-template-columns: 1fr; }
  .fsum .explore { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fsum .stg { flex: 0 0 calc((100% - 30px) / 4); }
  .fsum .route { grid-template-columns: 1fr; gap: 14px; }
  .fsum .ap.to { text-align: left; }
  .fsum .ap.to .top { flex-direction: row-reverse; justify-content: flex-end; }
  .fsum .hero { padding-bottom: 64px; }
}
@media (max-width: 620px) {
  .fsum .arc { display: none; }
  .fsum .score-big { font-size: 46px; }
  .fsum .facts { justify-content: flex-start; }
  .fsum .rail { grid-template-columns: 1fr; }
  .fsum .stg { flex: 0 0 calc((100% - 10px) / 2); }
  .fsum .mm-key span:nth-child(2) { display: none; }
  .fsum .td-stats { grid-template-columns: repeat(2, 1fr); }
  .fsum .explore { grid-template-columns: 1fr; }
  .fsum .shots { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fsum .lrows { grid-template-columns: 1fr; }
  .fsum .ledger-grid { grid-template-columns: 1fr; }
}

/* ---------------- owner strip (embedded view) ---------------- */
/* The owner's field editor, opened from the nav bar above it. No card chrome of its own -
   SummaryOwnerEditor already draws one - just the same 20px inset the frame's contents
   have, so the panel lines up with the hero underneath it. */
.fsum.ff-owneredit { margin: 4px 20px 12px; }
.fsum.ff-owneredit .card { margin: 0; }

/* ---------------------------------------------------------------------------
   Metric tooltips. Pure CSS: the text is a data-tip attribute on the label, so
   it ships in the stored HTML, needs no script, and survives the static cache.
   Shown on hover AND on keyboard focus, and the trigger carries tabindex, so a
   reader without a mouse can still get at it.

   Positioned above the label and clamped to the card's width. The summary's
   cards do not clip their contents (only the bars and the minimap do), so a
   tooltip on a metric row has room; anything inside an overflow container would
   need JS positioning instead, which is why these live on the rows only.
   --------------------------------------------------------------------------- */
.fsum .tip {
  position: relative;
  cursor: help;
  text-decoration: underline dotted var(--fs-hairline);
  text-underline-offset: 3px;
}
.fsum .tip:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 2px; border-radius: 3px; }
.fsum .tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--fs-ink);
  color: var(--fs-surface);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--fs-shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.fsum .tip:hover::after,
.fsum .tip:focus-visible::after { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .fsum .tip::after { transition: none; } }
/* A tip on a label at the right edge of its card opens leftwards instead. */
.fsum .tip.tip-r::after { left: auto; right: 0; }
/* Narrow screens: a 260px bubble anchored left would run off the right edge. */
@media (max-width: 560px) { .fsum .tip::after { max-width: 60vw; } }