/* mc_flights.css — styles for cloud_page_flights.cgi
   Extracted from the ten inline CSS blocks the page used to print on every view.
   Sections are in the order the blocks appeared in the page, so the cascade is
   unchanged. Each section header names the line it came from in the old .cgi. */

/* ════ FSGRID — was cloud_page_flights.cgi line 4224 ════
 ── Card stylesheets ──────────────────────────────────────────────────────
 These were emitted in heredocs at the foot of the page, so every card
 painted unstyled - raw stacked text - until the browser reached the bottom
 of the document and re-laid the whole page out. They are emitted here,
 ahead of the cards, so the first paint is already correct. */
/* ── Flight summary panel ──────────────────────────────────────────────────
   Lead figure with the supporting numbers beside it, the flight as a timeline,
   the housekeeping values as tiles, then stability as a gauge and four
   weighted bars. Breakpoints key off the PANEL, not the window: it sits in a
   tab inside a sheet, so its width and the viewport's are different numbers. */
.fs-body { container-type: inline-size; container-name: fsum; padding: 0 0 26px; font-size: 14px; }
.fsa { --ink:#0f172a; --dim:#64748b; --hair:#e9eef4; --rule:#dde5ee; --acc:#2563eb;
       --tint:rgba(37,99,235,0.07); --track:#e9eef4; font-family: Outfit, sans-serif; color: var(--ink); }
.lk { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); margin: 0 0 10px; }
.lk i { width: 16px; height: 2px; background: var(--acc); border-radius: 2px; flex: none; }
.lk--plain { margin: 0; }
.fsa-r { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
         padding: 6px 0; border-top: 1px solid var(--hair); font-size: 12.5px; }
.fsa-r span { color: var(--dim); }
.fsa-r b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.fsa-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 0 46px;
           align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.fsa-big { font-size: 74px; font-weight: 700; letter-spacing: -.035em; line-height: .92;
           margin-top: 10px; font-variant-numeric: tabular-nums; }
.fsa-big span { font-size: 22px; font-weight: 600; color: var(--dim); margin-left: 8px; letter-spacing: 0; }
.fsa-sub { font-size: 13px; color: var(--dim); margin-top: 10px; }
.fsa-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 26px; }
.fsa-st { border-left: 1px solid var(--hair); padding-left: 22px; }
.fsa-st:first-child { border-left: 0; padding-left: 0; }
.fsa-v { font-size: 30px; font-weight: 700; margin-top: 9px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fsa-v span { font-size: 13px; font-weight: 600; color: var(--dim); margin-left: 4px; letter-spacing: 0; }
.fsa-c { font-size: 11.5px; color: var(--dim); margin-top: 7px; line-height: 1.45; }

/* the five moments on one line, dots on a rule */
/* named sections, divided by a rule - the blocks no longer carry their own */
.fsec { padding: 0; }
.fsec + .fsec { margin-top: 42px; padding-top: 42px; border-top: 1px solid var(--rule); }
.fsec-h { margin: 0 0 20px; font-size: 17px; font-weight: 700; color: var(--ink);
          letter-spacing: -0.015em; }
.fsa-time { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
            gap: 0 24px; }
/* on the dots' centre line: they are 10px tall at the top of each moment, so
   4px, not the 33px that suited the padding this block used to carry */
.fsa-line { position: absolute; left: 5px; right: 5px; top: 4px; height: 2px; border-radius: 2px;
            background: linear-gradient(90deg, var(--acc), #bcd0f2); }
.fsa-dot { width: 10px; height: 10px; border-radius: 50%; background: #ffffff;
           border: 2px solid var(--acc); margin-bottom: 16px; position: relative; z-index: 1; }
.fsa-mt { font-size: 22px; font-weight: 700; margin: 4px 0 10px; letter-spacing: -.02em;
          font-variant-numeric: tabular-nums; }
.fsa-mt span { font-size: 12px; font-weight: 600; color: var(--dim); margin-left: 3px; letter-spacing: 0; }

/* housekeeping as tiles rather than rows buried in the disclosure */
.fsa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ch { display: flex; align-items: center; gap: 9px; background: #f7f9fc; border: 1px solid var(--hair);
      border-radius: 11px; padding: 9px 13px; }
.ch-i { width: 15px; height: 15px; flex: none; color: var(--acc); }
.ch-k { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.ch-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Gauge, the four weighted bars, then the caveat and the raw figures beside
   them. The bars used the left 45% of the row and the rest of it was empty.
   The right column is where the one red statement lives, so the score, the
   arc, a caps label and a warning are no longer four ways of saying poor. */
.fsa-stab { display: grid; grid-template-columns: 158px minmax(0,1fr); gap: 0 40px; align-items: start; }
.fsa-sb { display: grid; grid-template-columns: minmax(0,1fr) 300px; column-gap: 40px;
          grid-template-rows: auto auto 1fr; }
.fsa-bars { grid-column: 1; grid-row: 1 / span 3; margin-top: 2px; max-width: none; }
.fsa-sk { grid-column: 2; grid-row: 1; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.fsa-sk em { font-style: normal; margin-left: 5px; font-weight: 700; }
.fsa-lowconf { grid-column: 2; grid-row: 2; font-size: 12.5px; margin-top: 10px; line-height: 1.5; }
.fsa-bar { display: grid; grid-template-columns: 210px minmax(0,1fr) 52px; align-items: center;
           gap: 0 16px; padding: 7px 0; font-size: 12.5px; }
.fsa-bar span { color: var(--dim); }
.fsa-bar i { display: block; height: 6px; border-radius: 3px; background: #eef2f7; overflow: hidden; }
.fsa-bar i b { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.fsa-bar em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* the weight is already in the label - "Launch straightness (20%)" */
.fsa-bar u { display: none; }
.fsa-raw { grid-column: 2; grid-row: 3; font-size: 11.5px; color: var(--dim); margin-top: 14px;
           padding-top: 0; border-top: 0; max-width: none; line-height: 1.65; }
.fsa-help { font: inherit; font-size: 12px; font-weight: 600; color: var(--acc); background: none;
            border: 0; padding: 0; cursor: pointer; }
.fsa-help:hover { text-decoration: underline; }

@container fsum (max-width: 1150px) {
  .fsa-top, .fsa-stab { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .fsa-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 26px; }
  .fsa-st:nth-child(3) { border-left: 0; padding-left: 0; }
  .fsa-time { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
  .fsa-line { display: none; }
  .fsa-bar { grid-template-columns: minmax(0,1fr) 100px 46px; }
  /* one column: the row assignments above would otherwise put the caveat in
     an implicit second track of its own */
  .fsa-sb { grid-template-columns: minmax(0,1fr); }
  .fsa-bars, .fsa-sk, .fsa-lowconf, .fsa-raw { grid-column: 1; grid-row: auto; }
  .fsa-raw { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--hair); }
}
@container fsum (max-width: 620px) {
  .fsa-stats, .fsa-time { grid-template-columns: minmax(0,1fr); }
  .fsa-st { border-left: 0; padding-left: 0; }
  .fsa-big { font-size: 54px; }
  .fsa-bar { grid-template-columns: minmax(0,1fr) 70px 40px; }
  .fsa-bar u { display: none; }
  .ch { flex: 1 1 100%; }
}

/* Reference data behind one disclosure. Three shapes have now been tried on
   this - a dashed full-width bar, an outlined pill, a blue button - and the
   trouble with all of them was the same: a control floating on the panel with
   nothing to belong to. So it is not a button any more. It is a row of the
   panel, ruled top and bottom the way every section divide is ruled, the
   count leading it and a chevron at the far right, and the whole row is the
   target. The panel reads as continuing rather than as sprouting a widget. */
.fs-more { margin: 42px 0 0; }
.fs-more-sum { display: flex; align-items: center; gap: 12px; padding: 17px 2px;
  cursor: pointer; list-style: none; background: transparent;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font: 600 13.5px/1 Outfit, sans-serif; color: #0f172a;
  transition: background 0.12s, color 0.12s; }
.fs-more-open, .fs-more-shut { flex: 1; }
.fs-more-sum::-webkit-details-marker { display: none; }
.fs-more-sum:hover { background: #f7f9fc; color: #1d4ed8; }
.fs-more-sum::after { content: ''; width: 17px; height: 17px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s; }
.fs-more[open] .fs-more-sum::after { transform: rotate(180deg); }
.fs-more[open] .fs-more-open { display: none; }
.fs-more:not([open]) .fs-more-shut { display: none; }

/* 4 — everything else, quiet */
.detail { display: grid; gap: 26px 52px; padding: 26px 28px 28px; align-items: start; }
.tb { min-width: 0; }
.tb-t { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
        color: #64748b; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #e2e8f0; }
.tb-r { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
        padding: 7px 0; border-bottom: 1px solid #f4f7fa; }
.tb-k { font-size: 12.5px; color: #64748b; }
.tb-v { font-size: 13px; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums;
        text-align: right; }
.tb-sub { padding-left: 16px; }
/* Sub-heading inside a table: the three burnout estimates belong to a stage,
   and a parent row with an empty value reads as missing data. */
.tb-h { font-size: 12.5px; font-weight: 600; color: #334155; padding: 9px 0 3px; }
.tb-pill { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px;
           border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; }
.tb-none { font-size: 12.5px; color: #64748b; padding: 6px 0; }
.tb-warn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin-top: 10px;
           background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
           font-size: 12px; color: #92400e; font-weight: 500; }

/* Widest: capped measure, so nothing spreads across a 2500px screen */
.hero    { grid-template-columns: repeat(4, minmax(0, 400px)); justify-content: space-between; }
.moments { grid-template-columns: repeat(5, minmax(0, 380px)); justify-content: space-between; }
.detail  { grid-template-columns: repeat(4, minmax(0, 440px)); justify-content: space-between; }

@container fsum (max-width: 1500px) {
  .hero    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The headline numbers are the point of the card, so they hold four across on
   a reduced scale rather than wrapping first. */
@container fsum (max-width: 1120px) {
  .hero    { gap: 18px 26px; padding: 20px 22px 22px; }
  .hero-k  { font-size: 10px; letter-spacing: 0.07em; }
  .hero-v  { font-size: 30px; margin-top: 6px; }
  .hero-u  { font-size: 14px; margin-left: 4px; }
  .hero-c  { font-size: 11.5px; margin-top: 5px; }
  .moments { gap: 14px 22px; padding: 18px 22px; }
  .stab    { padding: 18px 22px 16px; }
  .meter   { grid-template-columns: 45fr 55fr; }
  .detail  { grid-template-columns: minmax(0, 1fr); gap: 24px 0; padding: 22px 22px 24px; }
}
@container fsum (max-width: 720px) {
  .hero   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-v { font-size: 27px; }
}
@container fsum (max-width: 430px) {
  .hero, .moments, .meter { grid-template-columns: minmax(0, 1fr); }
}

/* ════ JUMPCSS — was cloud_page_flights.cgi line 4405 ════ */
/* ── Under-chart panels: three tabbed views on one flat surface ────────────
   Was 14 cards packed into newspaper columns with a sticky JUMP TO rail. The
   rail existed to cope with a page too long to scan; the tabs fix the length
   instead, so the rail is gone. No JavaScript: the tabs are radio inputs and
   the panes are sibling selectors. */
:root { --navh: 157px; }
.mctabs { --ink:#0f172a; --dim:#64748b; --hair:#e9eef4; --rule:#dde5ee; --acc:#2563eb;
          --track:#e9eef4; --warn:#dc2626; --warnT:#b45309; --soft:#f7f9fc; }
/* Only the five tab radios, which are direct children. As `.mctabs input` this
   matched EVERY input inside the tabbed region - .mctabs wraps #container and
   #mcstack too - so the launch-site search box, the launch date and time, the
   motor quantity and the custom delay were all invisible and unclickable.
   Selects were unaffected, which is why the forms looked half-built. */
.mctabs > input { position: absolute; opacity: 0; pointer-events: none; }
/* Docks under the site chrome, whose height is measured at runtime - it
   compacts on scroll and differs between mobile and desktop, so a fixed
   number would be wrong. Above #stickyNav (990) but below the mobile nav. */
/* ── Tab bar: segmented (option 2b) ──────────────────────────────────────
   The tabs sit in one soft grey track and the selected one is a white pill
   raised off it. The strip keeps the page colour because it is sticky, and
   its bottom padding is the gap to the sheet below. The track shrinks to its
   tabs (fit-content) up to the strip's width; the More script measures
   against the strip, not the track. Without the script the track scrolls
   sideways, as the old bar did. */
.mctabbar { position: sticky; top: var(--navh); z-index: 995; width: 95%; margin: 0 auto;
            background: #f4f7fa; border: 0; padding: 6px 0 12px; }
/* overflow-x on its own forces the other axis to auto (a phantom vertical
   scrollbar), so both axes are named. */
.mctabbar-in { display: flex; width: fit-content; max-width: 100%; box-sizing: border-box;
            gap: 2px; padding: 4px; background: #e4e9f0; border-radius: 12px;
            overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.mctabbar-in::-webkit-scrollbar { display: none; }
/* #475569 on #e4e9f0 is 6.6:1 */
.mctabbar label { font-family: Outfit, sans-serif; font-size: 14px; font-weight: 600;
            color: #475569; padding: 8px 16px; cursor: pointer; white-space: nowrap;
            display: inline-flex; align-items: center; background: transparent; border: 0;
            border-radius: 9px; position: relative; margin: 0;
            transition: background 0.12s, color 0.12s; }
.mctabbar label:hover { color: var(--ink); background: rgba(255,255,255,0.6); }
@media (max-width: 820px) {
  .mctabbar label { font-size: 13px; padding: 7px 12px; }
}
/* ── Flight comparison ─────────────────────────────────────────────────────
   One row per metric: name, place, your value, then a track filled with your
   value against the record. Rank scales and min-max scales both told the
   reader nothing about the size of the gap - 67.8 m against a 303.66 m record
   is 22% of the pace, which is the thing worth seeing. Wide enough for two
   columns, but a half-width panel gets one: three sparse columns of tracks
   read as scattered furniture. */
.cmp-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 20px 44px; }
.cmp-intro { font-size: 12.5px; color: var(--dim); margin-bottom: 22px; }
.cmp-intro b { color: var(--ink); font-weight: 600; }
/* the best placing, said once at the top, so the rows do not each shout it */
.cmp-lead { display: flex; align-items: baseline; gap: 14px; padding: 0 0 22px;
            border-bottom: 1px solid var(--hair); margin-bottom: 22px; }
.cmp-lead-n { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-lead-n span { font-size: 15px; color: var(--dim); }
.cmp-lead-d { font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.cmp-row { min-width: 0; }
.cmp-head { display: flex; align-items: baseline; gap: 10px; cursor: help; position: relative; }
.cmp-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cmp-place { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.cmp-val { margin-left: auto; font-size: 19px; font-weight: 700; letter-spacing: -.02em;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-val span { font-size: 11.5px; font-weight: 600; color: var(--dim); margin-left: 3px; }
.cmp-tip { width: 220px; z-index: 9999; position: absolute; font-weight: 400; font-size: 12px; }
.cmp-track { position: relative; height: 8px; border-radius: 4px; background: #eef2f7; margin-top: 10px;
            overflow: hidden; }
.cmp-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--acc); }
.cmp-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 11.5px;
            color: var(--dim); margin-top: 7px; }
.cmp-foot a { color: var(--acc); text-decoration: none; }
.cmp-foot a:hover { text-decoration: underline; }
/* the joke row is a cell in the grid like any other, marked only by its fill */
.cmp-tree .cmp-fill { background: #94a3b8; }
.cmp-empty { border: 1px dashed #cbd5e1; border-radius: 12px; background: var(--soft);
            padding: 26px 24px; text-align: center; }
.cmp-empty-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.cmp-empty-d { font-size: 12.5px; color: var(--dim); max-width: 460px; margin: 7px auto 0; line-height: 1.55; }
.cmp-empty-b { margin-top: 16px; }

/* "Filled in" dot on Site & weather and Motors & rocket */
.mct-dot { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%;
           background: #16a34a; flex: none; }
.mct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mct-n { display: inline-flex; align-items: center; margin-left: 8px; font-size: 11px;
         font-weight: 700; color: #475569; background: #f4f7fa;
         border: 0; border-radius: 999px; padding: 1px 7px; }
#mct-chat:checked   ~ .mctabbar label[for="mct-chat"],
#mct-chart:checked  ~ .mctabbar label[for="mct-chart"],
#mct-flight:checked ~ .mctabbar label[for="mct-flight"],
#mct-anim:checked   ~ .mctabbar label[for="mct-anim"],
#mct-launch:checked ~ .mctabbar label[for="mct-launch"],
#mct-linked:checked ~ .mctabbar label[for="mct-linked"],
#mct-rocket:checked ~ .mctabbar label[for="mct-rocket"],
#mct-device:checked ~ .mctabbar label[for="mct-device"],
#mct-dl:checked     ~ .mctabbar label[for="mct-dl"],
#mct-media:checked  ~ .mctabbar label[for="mct-media"] { color: var(--ink); background: #ffffff;
            box-shadow: 0 1px 3px rgba(15,23,42,0.10), 0 0 0 1px rgba(15,23,42,0.04); }
/* Panels are filtered by the tab they declare, so they stay in source order
   and nothing has to be buffered and re-emitted in group order. */
#mcstack > [data-tab] { display: none; }
#mct-flight:checked ~ #container [data-tab="flight"],
#mct-anim:checked   ~ #container [data-tab="anim"],
#mct-launch:checked ~ #container [data-tab="launch"],
#mct-linked:checked ~ #container [data-tab="linked"],
#mct-rocket:checked ~ #container [data-tab="rocket"],
#mct-device:checked ~ #container [data-tab="device"],
#mct-dl:checked     ~ #container [data-tab="downloads"],
#mct-media:checked  ~ #container [data-tab="media"] { display: block; }

/* One flat surface: sections divided by a rule rather than 14 floating boxes.
   The stack keeps a single column now - a tab holds few enough panels that
   columns would only break the reading order. */
#mcstack { background: #ffffff; border: 1px solid var(--hair);
           border-radius: 14px; padding: 0 30px; }
#mcstack > .grid-item.mbox { width: auto; max-width: none; margin: 0;
           background: transparent; border: 0; border-radius: 0; box-shadow: none;
           border-top: 1px solid var(--hair); overflow: visible; }
#mcstack > .grid-item.mbox:hover { transform: none; box-shadow: none; }
#mcstack > [data-tab]:first-of-type,
#mct-flight:checked ~ #container [data-tab="flight"]:first-of-type,
#mct-anim:checked   ~ #container [data-tab="anim"]:first-of-type,
#mct-launch:checked ~ #container [data-tab="launch"]:first-of-type,
#mct-linked:checked ~ #container [data-tab="linked"]:first-of-type,
#mct-rocket:checked ~ #container [data-tab="rocket"]:first-of-type,
#mct-device:checked ~ #container [data-tab="device"]:first-of-type,
#mct-dl:checked     ~ #container [data-tab="downloads"]:first-of-type,
#mct-media:checked  ~ #container [data-tab="media"]:first-of-type { border-top: 0; }
/* ── The animation and the comparison read as a pair ───────────────────────
   Both are wrapped in one .mc-pair so they sit side by side on wide screens
   and stack again below 1250px - the width the masthead already breaks at.
   The wrapper carries data-tab, so the tab filter still hides the two
   together; the stack's own rules are restated one level deeper because they
   were written for direct children. The grid rule has to outweigh the tab
   filter's own display:block, hence the extra attribute in the selector. */
#mcstack > .mc-pair { border-top: 1px solid var(--hair); }
/* The first section on the summary tab sat 32px below the tab bar and then
   added its own heading margin on top. One or the other. */
#mct-flight:checked ~ #container [data-tab="flight"]:first-of-type { padding-top: 14px !important; }
#mct-flight:checked ~ #container .mc-pair[data-tab="flight"] {
           display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
           column-gap: 76px; align-items: start; }
#mcstack > .mc-pair > .grid-item.mbox { width: auto; max-width: none; margin: 0; min-width: 0;
           background: transparent; border: 0; border-radius: 0; box-shadow: none;
           overflow: visible; }
#mcstack > .mc-pair > .grid-item.mbox:hover { transform: none; box-shadow: none; }
#mcstack > .mc-pair > .grid-item.mbox > div:not(.mbox-header):not(.fs-more):not([style*="clear"]),
#mcstack > .mc-pair > .grid-item.mbox > .uc,
#mcstack > .mc-pair > .grid-item.mbox > .fs-body { padding: 0 0 var(--sp-body) !important; margin: 0 !important; }
/* the animation was drawn for a panel the full width of the stack */
#mcstack > .mc-pair canvas, #mcstack > .mc-pair img { max-width: 100%; }
@media (max-width: 1250px) {
  #mct-flight:checked ~ #container .mc-pair[data-tab="flight"] { grid-template-columns: minmax(0,1fr); }
  #mcstack > .mc-pair > .grid-item.mbox + .grid-item.mbox { border-top: 1px solid var(--hair); }
}

/* ── Notes & media ────────────────────────────────────────────────────────
   Four stacked panels, each with a full-width grey empty box and a blue
   button under it, made a tab of announcements. The notes are prose and get
   a measure; the video and the images are small things and stack beside
   them; the empty states become the size of what they are asking for. */
#mcstack > .mc-media { border-top: 1px solid var(--hair); }
/* Notes across the top, then video / images / groups as three equal cards.
   They were a 1.35fr column of prose beside a 1fr stack of three full-width
   grey slabs, which is why the tab ran 700px tall to hold one sentence and
   three empty states. Placement only - the panels' own markup is untouched. */
#mct-media:checked ~ #container .mc-media[data-tab="media"] {
           display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
           column-gap: 16px; row-gap: 30px; align-items: start; }
#mcstack > .mc-media > .grid-item.mbox { width: auto; max-width: none; margin: 0; min-width: 0;
           background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
#mcstack > .mc-media > .grid-item.mbox:hover { transform: none; box-shadow: none; }
#mcstack > .mc-media > .grid-item.mbox > div:not(.mbox-header):not([style*="clear"]),
#mcstack > .mc-media > .grid-item.mbox > .uc { padding: 0 !important; margin: 0 !important; }
#mcstack > .mc-media > #sec-user_notes { grid-column: 1 / -1; grid-row: 1; }
#mcstack > .mc-media > #sec-youtube_video { grid-column: 1; grid-row: 2; }
#mcstack > .mc-media > #sec-flight_images { grid-column: 2; grid-row: 2; }
#mcstack > .mc-media > #sec-groups { grid-column: 3; grid-row: 2; }

/* the three media panels become cards; notes stays on the sheet */
#mcstack > .mc-media > #sec-youtube_video,
#mcstack > .mc-media > #sec-flight_images,
#mcstack > .mc-media > #sec-groups {
           background: #f4f6fb !important; border-radius: 16px !important;
           padding: 16px 18px 18px !important; }
#mcstack > .mc-media > #sec-youtube_video > div:not(.mbox-header):not([style*="clear"]),
#mcstack > .mc-media > #sec-flight_images > div:not(.mbox-header):not([style*="clear"]),
#mcstack > .mc-media > #sec-groups > div:not(.mbox-header):not([style*="clear"]),
#mcstack > .mc-media > #sec-youtube_video > .uc,
#mcstack > .mc-media > #sec-flight_images > .uc,
#mcstack > .mc-media > #sec-groups > .uc { padding: 0 !important; }
/* a card's name is a label, not a 17px heading competing with Notes */
#mcstack > .mc-media > #sec-youtube_video > .mbox-header,
#mcstack > .mc-media > #sec-flight_images > .mbox-header,
#mcstack > .mc-media > #sec-groups > .mbox-header {
           padding: 0 0 12px !important; font-size: 11px !important; font-weight: 800 !important;
           letter-spacing: 0.12em; text-transform: uppercase; color: #67748c !important;
           background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* Notes is the heading of the tab */
#mcstack > .mc-media > #sec-user_notes > .mbox-header {
           padding: 0 0 14px !important; font-size: 21px !important; font-weight: 800 !important;
           letter-spacing: -0.03em; color: #1a2233 !important;
           background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* inside a third-width card the surfaces are white, so they read against it */
#mcstack > .mc-media > #sec-flight_images .uc-empty,
#mcstack > .mc-media > #sec-youtube_video .uc-empty,
#mcstack > .mc-media > #sec-groups .uc-empty { background: #ffffff; border-color: #cbd5e1; }
#mcstack > .mc-media > #sec-flight_images img,
#mcstack > .mc-media > #sec-youtube_video iframe { max-width: 100%; border-radius: 12px; }
#mcstack > .mc-media > #sec-youtube_video iframe { width: 100%; aspect-ratio: 16/9; height: auto; }
/* Identical in all four panels. Said once, on the notes, it is information;
   said four times it is noise. */
#mcstack > .mc-media > #sec-youtube_video .uc-hint,
#mcstack > .mc-media > #sec-flight_images .uc-hint,
#mcstack > .mc-media > #sec-groups .uc-hint { display: none; }
#mcstack > .mc-media > #sec-user_notes .uc-hint { font-size: 12px; color: #8b97ad; }
/* the notes are the one piece of real writing on the page */
#mcstack > .mc-media > #sec-user_notes .uc-notes { font-size: 15px; line-height: 1.7;
           max-width: 68ch; color: #26304a; }
/* an empty video or gallery does not need a full-width grey slab */
#mcstack > .mc-media .uc-empty { padding: 15px 17px; border-radius: 12px; }
#mcstack > .mc-media #sec-flight_images .uc-empty { min-height: 92px; align-items: center;
           justify-content: center; text-align: center; }
/* one blue thing per row: uploading is it. Editing text is not an event. */
/* The video card's action stays quiet - it sits beside an upload button that
   should win. Editing notes is the only action in its own panel, so it is the
   primary one and looks like it. */
#mcstack > .mc-media > #sec-youtube_video .uc-btn.is-primary {
           background: #ffffff; border-color: #cbd5e1; color: #475569; }
#mcstack > .mc-media > #sec-youtube_video .uc-btn.is-primary:hover {
           border-color: #94a3b8; color: var(--ink); background: var(--soft); }
#mcstack > .mc-media > #sec-user_notes .uc-btn.is-primary {
           background: #3f5bd9; border: 0; color: #ffffff; font-weight: 700;
           border-radius: 11px; padding: 11px 20px; font-size: 13px; }
#mcstack > .mc-media > #sec-user_notes .uc-btn.is-primary:hover {
           background: #3349b5; color: #ffffff; }
@media (max-width: 760px) {
  #mct-media:checked ~ #container .mc-media[data-tab="media"] {
           grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 1250px) {
  #mct-media:checked ~ #container .mc-media[data-tab="media"] {
           grid-template-columns: repeat(2, minmax(0,1fr)); }
  #mcstack > .mc-media > .grid-item.mbox { grid-column: auto !important; grid-row: auto !important; }
  #mcstack > .mc-media > #sec-user_notes { grid-column: 1 / -1 !important; }
}
/* ── One scale for every panel ─────────────────────────────────────────────
   Sizes and spacing as tokens, so a panel cannot drift: heading 17/700,
   sub-heading 10.5 caps, label 12.5, value 13/600, and a single vertical
   rhythm of 30px above a heading and 32px below a body. */
#mcstack { --h1:17px; --h2:10.5px; --lbl:12.5px; --val:13px;
           --sp-head:44px; --sp-gap:22px; --sp-body:46px; }
/* The .mbox stylesheet emitted after this one also sets .mbox-header padding,
   and won on order - so every panel heading sat 18px in while the summary's
   own section headings sat on the stack's left edge. One id settles it. */
#mcstack .mbox-header { padding: var(--sp-head) 0 var(--sp-gap); }
/* the icon was card furniture; without the card it marks the heading twice */
#mcstack .mbox-header .mhi { display: none; }
/* the summary's sections name themselves, so the card heading is redundant */
#mcstack > #sec-flight_summary > .mbox-header { display: none; }
#mcstack > #sec-flight_summary { padding-top: var(--sp-head); }
/* every panel body gets the same bottom space. Was [style*="padding"], which
   only matched panels that happened to carry an inline padding - the rest got
   none and sat flush against the next section's rule. */
#mcstack > .grid-item.mbox > div:not(.mbox-header):not(.fs-more):not([style*="clear"]),
#mcstack > .grid-item.mbox > .uc,
#mcstack > .grid-item.mbox > .fs-body { padding: 0 0 var(--sp-body) !important; margin: 0 !important; }
/* the stray inline sizes inside panels, brought onto the scale */
#mcstack .grid-item.mbox div[style*="font-size:15px"],
#mcstack .grid-item.mbox div[style*="font-size:18px"] { font-size: var(--h1) !important;
           font-weight: 700 !important; letter-spacing: -0.015em; }
#mcstack .grid-item.mbox div[style*="font-size:11px"],
#mcstack .grid-item.mbox div[style*="font-size:12px"] { font-size: var(--lbl) !important; }
/* the collapse chevron went with the cards - a tab of five sections does not
   need each one folded away */
.mbox-header::after { display: none; }
@media (max-width: 700px) { #mcstack { padding: 0 18px; } }

/* ── The other panels, brought into the summary's language ─────────────────
   All CSS: these target markup the panels already emit, so none of their
   Perl changes. Tokens come from .mctabs so one change lands everywhere. */
#mcstack { --ink:#0f172a; --dim:#64748b; --hair:#e9eef4; --rule:#dde5ee; --acc:#2563eb;
           --track:#e9eef4; --soft:#f7f9fc; }
#mcstack .uc { gap: 16px; }

/* label / value rows: one style, values on a tabular right edge */
#mcstack .sr, #mcstack .fs-group > div[style*="clear"] { border-color: var(--hair) !important; }
#mcstack .sr-k, #mcstack .fs-label { font-size: var(--lbl); color: var(--dim); font-weight: 400; }
#mcstack .sr-v, #mcstack .fs-value { font-size: var(--val); font-weight: 600;
           color: var(--ink); font-variant-numeric: tabular-nums; }
/* the rows fill the panel, up to a measure that keeps label and value together */
#mcstack .sr-list { max-width: 720px; }
#mcstack .tb-t, #mcstack .fs-tab { font-size: var(--h2) !important; font-weight: 700 !important;
           letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim) !important;
           border: 0 !important; background: none !important; padding: 0 0 9px !important;
           margin: 0 0 2px !important; }
#mcstack .tb-r { border-color: var(--hair) !important; padding: 6px 0 !important; }
#mcstack .tb-k { font-size: var(--lbl) !important; color: var(--dim) !important; }
#mcstack .tb-v { font-size: var(--val) !important; font-weight: 600 !important; }

/* one button family, and the mixed anchor-links become buttons too */
#mcstack .uc-btn, #mcstack .dev-action-link, #mcstack button[onclick] {
           font-family: Outfit, sans-serif; font-size: 12.5px; font-weight: 600;
           padding: 8px 14px; border-radius: 9px; border: 1px solid #cbd5e1;
           background: #ffffff; color: #475569; cursor: pointer; white-space: nowrap;
           text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
#mcstack .uc-btn:hover, #mcstack .dev-action-link:hover { border-color: #94a3b8;
           color: var(--ink); background: var(--soft); }
#mcstack .uc-btn.is-primary { background: var(--acc); border-color: var(--acc); color: #ffffff; }
#mcstack .uc-empty { border: 1px dashed #cbd5e1; border-radius: 11px; background: var(--soft);
           padding: 18px 20px; }
#mcstack .uc-empty-t { font-size: 13px; color: var(--dim); }
/* the header icon picks up the accent, so every panel is marked the same way */
#mcstack .mbox-header .mhi { width: 18px; height: 18px; color: var(--acc); }

/* ════ SETUPCSS — was cloud_page_flights.cgi line 4763 ════
 ── Rocket & motors, Altimeter, Downloads: the tabs the setup view became ──
 Styling only. Nothing here moves a panel: the tab each one belongs to is a
 line in %mcj_tab, and the launch site is emitted inside the summary sheet
 rather than positioned there. Single-quoted, like FSGRID and JUMPCSS. */
/* The sheet's width is used, not avoided. An earlier pass capped this content
   at 1580px and centred it, which turned every tab into a narrow ribbon with
   a desert of white beside it. The x=110-label/x=2470-value problem is real,
   but the answer is more columns across the width, not less width: a row is
   short because its column is ~400px, and there are four of them. */
#mcstack > .mc-rocket, #mcstack > .mc-device, #mcstack > .mc-dl,
#mcstack > .mc-launch, #mcstack > .mc-linked {
           max-width: none; margin: 0; }

/* Sections divide by a rule. The card inside each one already carries a
   44px heading pad, so the section adds its own separation and the heading
   drops its top padding - otherwise the two stack into a 130px gap, which is
   what put a chasm between Linked rocket and Flight motors. */
.stp { padding: 0; }
.stp + .stp { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule); }
.stp-h { margin: 0 0 24px; font-size: 17px; font-weight: 700; color: var(--ink);
         letter-spacing: -0.015em; }
#mcstack > .mc-device .stp > .grid-item.mbox > .mbox-header { padding-top: 34px; }
.stp-sub { font-size: var(--h2); font-weight: 700; letter-spacing: 0.13em;
         text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.stp-lede { font-size: 13px; color: #475569; margin: -12px 0 26px; max-width: 62ch; }

/* Two-across, collapsing on the width the masthead already breaks at. */
.stp-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
         column-gap: 72px; row-gap: 44px; align-items: start; }
/* The map is the subject, so it takes the bulk of the row. At 1.5fr against
   1fr it came out 410px wide next to a 420px-tall map - a portrait sliver -
   with the right column half empty. */
.stp-map { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(320px,1fr);
         column-gap: 48px; align-items: start; }
@media (max-width: 1250px) {
  .stp-2, .stp-map { grid-template-columns: minmax(0,1fr); row-gap: 38px; }
}

/* Settings groups fill the sheet: as many ~340px columns as fit, so a wide
   screen shows five or six and the tab stops being a tall thin list. */
.stp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
         column-gap: 56px; row-gap: 40px; align-items: start; }
/* ── Settings and calibration: one flowing set of columns ──────────────────
   A grid of panels was wrong twice over. auto-fit gave a device with two
   panels two 1,200px columns, so every label sat a metre from its value; and
   a 17-row list in one column is a 17-row column however wide the page is.
   Multi-column instead: the whole block flows into as many ~330px columns as
   fit, three or four on a desktop and one on a phone, and a long list simply
   continues into the next column.

   The container must be a BLOCK for this - "columns" is ignored on a grid
   container, which is why the last attempt did nothing at all: .sr-list is
   display:grid, so the rule was silently dropped. */
/* Three columns, stacking to two then one. "columns: 330px auto" gave as many
   as would fit - six on a wide monitor - which was never the ask. */
#mcstack > .mc-device .stp-groups { display: block; column-count: 3; column-gap: 48px; }
@media (max-width: 1180px) { #mcstack > .mc-device .stp-groups { column-count: 2; } }
@media (max-width: 760px)  { #mcstack > .mc-device .stp-groups { column-count: 1; } }
/* The group name spans the three columns instead of sitting inside the first
   one, which is what pushed that column's rows out of step with the others.
   It also keeps each group's rows under their own heading. */
#mcstack > .mc-device .stp-groups .mbox-header {
      column-span: all; -webkit-column-span: all; }
#mcstack > .mc-device .stp-groups > .grid-item.mbox { display: block; }
#mcstack > .mc-device .stp-groups .sr-list { display: block; max-width: none; }
/* a row, a heading or a calibration box may not be split down the middle */
#mcstack > .mc-device .stp-groups .sr,
#mcstack > .mc-device .stp-groups .mbox-header,
#mcstack > .mc-device .stp-groups .axes,
#mcstack > .mc-device .stp-groups div[style*="border-radius:8px"] {
      break-inside: avoid; -webkit-column-break-inside: avoid; }
/* a panel heading starts its own column rather than orphaning one row above */
#mcstack > .mc-device .stp-groups > .grid-item.mbox + .grid-item.mbox > .mbox-header {
      padding-top: 26px !important; margin-top: 8px !important;
      border-top: 1px solid var(--hair); }
/* Calibration is not a list of rows, so flowing it through the columns tore
   it up - the accelerometer warning landed beside the gyroscope heading and
   the axes split across a column break. column-span lifts it out whole and
   sets it below the settings, where its own two blocks sit side by side. */
#mcstack > .mc-device .stp-groups > #sec-sensor_calibration {
      column-span: all; -webkit-column-span: all; break-inside: avoid;
      margin-top: 30px !important; padding-top: 24px !important;
      border-top: 1px solid var(--rule) !important; }
#mcstack > .mc-device #sec-sensor_calibration .cal {
      display: inline-block; vertical-align: top; width: 100%; max-width: 380px;
      margin: 0 30px 16px 0; }
#mcstack > .mc-device #sec-sensor_calibration .cal-howto { display: block; clear: both; }
/* Nothing in a 330px column may exceed it. */
#mcstack > .mc-device .stp-groups div,
#mcstack > .mc-device .stp-groups table { max-width: 100%; box-sizing: border-box; }

/* ── Sensor calibration ────────────────────────────────────────────────────
   Was a grey box holding three white boxes, with the uncalibrated warning as
   a full-width yellow bar above them - three nested surfaces to say six
   numbers. One heading, the warning as a pill beside it, and the three axes
   as the same tiles the rest of the tab uses. */
.cal { margin: 0 0 14px; }
.cal-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 9px; }
.cal-h b { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
      color: #67748c; }
.cal-warn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
      color: #8a5a00; background: #fff6e0; border: 1px solid #f5dfa8; border-radius: 999px;
      padding: 2px 9px; }
.cal-axes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.cal-ax { background: #f4f6fb; border-radius: 11px; padding: 9px 6px; text-align: center; }
.cal-ax i { display: block; font-style: normal; font-size: 10.5px; font-weight: 800;
      letter-spacing: 0.1em; color: #67748c; }
.cal-ax b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.02em;
      margin-top: 3px; color: #1a2233; font-variant-numeric: tabular-nums; }
.cal-ax b u { text-decoration: none; font-size: 10.5px; font-weight: 600; color: #67748c; }
.cal-howto { margin-top: 4px; }

/* ── Panels one level deeper ───────────────────────────────────────────────
   The stack's rules were written for direct children of #mcstack. A panel
   inside one of these wrappers needs them restated, exactly as .mc-media
   already does for the notes tab: no card, no shadow, no hover lift. */
#mcstack > .mc-rocket .grid-item.mbox,
#mcstack > .mc-device .grid-item.mbox,
#mcstack > .mc-dl .grid-item.mbox {
         width: auto; max-width: none; margin: 0; min-width: 0;
         background: transparent; border: 0; border-radius: 0; box-shadow: none;
         overflow: visible; display: block; }
#mcstack > .mc-rocket .grid-item.mbox:hover,
#mcstack > .mc-device .grid-item.mbox:hover,
#mcstack > .mc-dl .grid-item.mbox:hover { transform: none; box-shadow: none; }
#mcstack > .mc-rocket .grid-item.mbox > div:not(.mbox-header):not([style*="clear"]),
#mcstack > .mc-device .grid-item.mbox > div:not(.mbox-header):not([style*="clear"]),
#mcstack > .mc-rocket .grid-item.mbox > .uc,
#mcstack > .mc-device .grid-item.mbox > .uc { padding: 0 !important; margin: 0 !important; }
/* A group's name is the panel's own heading, at the sub-heading size. The
   header carries an icon that was card furniture; without the card it marks
   the heading twice. */
#mcstack > .mc-device .stp-groups .mbox-header {
         padding: 0 0 14px !important; font-size: var(--h2) !important; font-weight: 700 !important;
         letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim) !important;
         border-bottom: 0; background: transparent; }
#mcstack > .mc-device .stp-groups .mbox-header .mhi { display: none; }

/* ── Motors & rocket: Direction 3 ──────────────────────────────────────────
   Two big cards on a tinted ground, figures in tiles, 32px radii, indigo.
   The stack's own card chrome is switched off inside this tab and replaced
   here, so there is one stylesheet for the tab rather than two fighting. */
/* No tinted sheet and no floating cards on this tab. Both attempts at a
   tinted ground left the selected tab plate with nothing to join onto: the
   white card below it had its own radius and shadow and sat in a grey field
   almost the same colour as the page, so the tab read as floating. The sheet
   is white here exactly as it is on every other tab; the tint lives in the
   stage blocks and the tiles, which is where the design needs it. */
/* Every tab's first heading needs top space: ".stp + .stp" only spaces the
   SECOND section onwards, so whatever comes first sits against the tab strip.
   Set once for all four wrappers rather than per tab, which is how the media
   tab was missed after the altimeter one was fixed. */
#mcstack > .mc-rocket, #mcstack > .mc-device,
#mcstack > .mc-dl, #mcstack > .mc-media, #mcstack > .mc-anim,
#mcstack > .mc-launch, #mcstack > .mc-linked { padding: 32px 0 34px; }
/* the animation is the only thing on its tab, so it fills it */
#mcstack > .mc-anim .grid-item.mbox { width: auto !important; max-width: none !important;
      margin: 0 !important; background: transparent !important; border: 0 !important;
      box-shadow: none !important; overflow: visible !important; }
#mcstack > .mc-anim canvas, #mcstack > .mc-anim img { max-width: 100%; }
/* Holding pen until this tab is rebuilt properly: the stage ran the full
   sheet width under a deep empty band. Capping the tab itself is enough -
   everything inside is width:100%, so it follows - and the top padding comes
   off so the title sits under the tab bar. */
#mcstack > .mc-anim { max-width: 800px; margin-left: 0 !important; margin-right: auto !important; }
#mcstack > .mc-rocket { background: transparent; margin: 0; }
/* the motors tab's first heading carries its own 34px, so it must not double */
#mcstack > .mc-rocket .stp:first-child > .grid-item.mbox > .mbox-header { padding-top: 0 !important; }
#mcstack > .mc-rocket .stp { padding: 0; margin: 0; border: 0; }
#mcstack > .mc-rocket .stp + .stp { margin-top: 30px; padding-top: 26px; border-top: 1px solid #dde5ee; }
/* panels are sections on the sheet, not cards on a ground */
#mcstack > .mc-rocket .grid-item.mbox {
      background: transparent !important; border: 0 !important; border-radius: 0 !important;
      padding: 0 !important; margin: 0 !important; width: auto !important;
      max-width: none !important; overflow: visible !important; box-shadow: none !important; }
#mcstack > .mc-rocket .grid-item.mbox:hover { transform: none; }
#mcstack > .mc-rocket .grid-item.mbox > div:not(.mbox-header):not([style*="clear"]),
#mcstack > .mc-rocket .grid-item.mbox > .uc { padding: 0 !important; margin: 0 !important; }
#mcstack > .mc-rocket .mbox-header {
      padding: 34px 0 20px !important; font-size: 21px !important; font-weight: 800 !important;
      letter-spacing: -0.035em; color: #1a2233 !important; border: 0; background: none; }
#mcstack > .mc-rocket .mbox-header .mhi { display: none !important; }

/* ── figure tiles: the one carrier for every number on this tab ─────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
      gap: 10px; margin-top: 16px; }
.tile { background: #f4f6fb; border-radius: 13px; padding: 12px 14px; min-width: 0; }
.tile i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600;
      color: #67748c; }
.tile b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.035em;
      margin-top: 5px; font-variant-numeric: tabular-nums; color: #1a2233; }
.tile b u { text-decoration: none; font-size: 12px; font-weight: 600; color: #67748c;
      margin-left: 2px; }
.tile.sm b { font-size: 15px; }

/* ── a stage: identity and figures beside its own thrust curve ──────────── */
.stage { display: grid; grid-template-columns: minmax(250px,1fr) minmax(0,1.6fr);
      gap: 24px; background: #f4f6fb; border-radius: 16px; padding: 18px 20px;
      align-items: start; }
.stage + .stage { margin-top: 12px; }
.stage .tile { background: #ffffff; }
.slab { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase; color: #3f5bd9; background: #e6eaff;
      padding: 5px 11px; border-radius: 999px; }
.mlist { margin-top: 12px; max-width: 480px; }
/* Opened by mcMoToggle(). Without this every motor's eight detail rows were
   on screen at all times. */
.mo-detail { display: none; padding: 2px 0 10px 32px; }
#mcstack .mo-detail .sr-list { max-width: 448px; }
#mcstack .mo-detail .sr { padding: 7px 0; }
#mcstack .mo-detail .sr-k { font-size: 12px; }
#mcstack .mo-detail .sr-v { font-size: 12.5px; }
.mrow { display: flex; align-items: baseline; gap: 11px; padding: 8px 0; }
.mrow + .mrow { border-top: 1px solid #e2e8f2; }
.mrow .q { min-width: 32px; font-size: 14px; font-weight: 800; letter-spacing: -0.03em;
      color: #67748c; font-variant-numeric: tabular-nums; }
.mrow .n { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: #1a2233; }
.mrow .bd { font-size: 12.5px; font-weight: 500; color: #67748c; }
.mrow .more { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #3f5bd9;
      text-decoration: none; }
.mrow .x { color: #b3261e; font-size: 16px; text-decoration: none; }

/* ── thrust curve: one chart per stage, one for the combined outcome ────── */
.tc { background: #ffffff; border-radius: 13px; padding: 12px 14px 8px; min-width: 0; }
.tc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
      margin-bottom: 4px; }
.tc-h b { font-size: 13px; font-weight: 700; color: #1a2233; }
.tc-h span { font-size: 12px; font-weight: 500; color: #67748c; }
/* Chart.js sets the canvas size itself. It must have a parent with a real
   height and nothing overriding the inline size it writes, or responsive +
   maintainAspectRatio:false feed each other and the canvas grows forever. */
.tc-canvas { position: relative; width: 100%; height: 188px; }
.comb .tc-canvas { height: 214px; }
@media (max-width: 1100px) { .tc-canvas, .comb .tc-canvas { height: 210px; } }
.tc-credit { font-size: 10.5px; color: #8b97ad; margin-top: 4px; }
.tc-credit a { color: #67748c; text-decoration: underline;
      text-decoration-color: #c3cbdd; text-underline-offset: 2px; }
.tc-credit a:hover { color: #3f5bd9; text-decoration-color: #3f5bd9; }

/* the combined outcome is the conclusion, so it takes the accent ground */
.comb { margin-top: 14px; background: #eef1fe; border: 1px solid #dbe1fb; border-radius: 16px;
      padding: 18px 20px; display: grid; grid-template-columns: minmax(250px,1fr) minmax(0,1.6fr);
      gap: 24px; align-items: start; }
.comb .slab { color: #ffffff; background: #3f5bd9; }
.comb .tile { background: #ffffff; }
.comb p { font-size: 12.5px; line-height: 1.55; color: #4a5670; margin: 11px 0 0; max-width: 54ch; }
@media (max-width: 1100px) {
  .stage, .comb { grid-template-columns: minmax(0,1fr); }
}

/* ── the add-motor form ─────────────────────────────────────────────────── */
.mo-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6ebf5; }
.mo-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 12px 14px; align-items: end; background: #f4f6fb; border-radius: 14px;
      padding: 16px 18px; margin-top: 12px; }
.mo-f { display: block; min-width: 0; }
.mo-f > span { display: block; font-size: 11.5px; font-weight: 600; color: #67748c;
      margin-bottom: 5px; }
.mo-f select, .mo-f input { width: 100%; box-sizing: border-box; font-family: 'Plus Jakarta Sans', Outfit, sans-serif;
      font-size: 13px; font-weight: 500; color: #1a2233; background: #ffffff;
      border: 1px solid #d7dceb; border-radius: 10px; padding: 9px 11px; }
.mo-f select:focus, .mo-f input:focus { outline: 0; border-color: #3f5bd9; }

/* ── buttons on this tab ────────────────────────────────────────────────── */
#mcstack > .mc-rocket .uc-btn, .d3btn {
      font-family: 'Plus Jakarta Sans', Outfit, sans-serif; font-size: 12.5px; font-weight: 700;
      color: #3c4a63; background: #f0f3f9; border: 0; border-radius: 11px; padding: 10px 18px; }
#mcstack > .mc-rocket .uc-btn:hover, .d3btn:hover { background: #e3e8f4; color: #1a2233; }
#mcstack > .mc-rocket .uc-btn.is-primary, .d3btn.is-primary {
      background: #3f5bd9; color: #ffffff; border: 0; }
#mcstack > .mc-rocket .uc-btn.is-primary:hover, .d3btn.is-primary:hover { background: #3349b5; }
#mcstack > .mc-rocket .uc-btn.is-danger { color: #b3261e; background: #fdeceb; }
.addbtn { font-family: 'Plus Jakarta Sans', Outfit, sans-serif; font-size: 12.5px;
      font-weight: 700; color: #3f5bd9; background: #eef1fe; border: 0; border-radius: 11px;
      padding: 10px 17px; cursor: pointer; }
.addbtn:hover { background: #e2e7fd; }

/* ── the rocket, now the second card ───────────────────────────────────── */
/* start, not center: centred against a six-row spec list the photo floated
   half a card below the title it belongs to. */
.rk { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 26px; align-items: start; }
/* contain, not cover: these are photos of a whole rocket, usually on the
   diagonal, and cropping them to a square cut the nose and the fins off. */
.rk-shot { position: relative; width: 250px; height: 186px; border-radius: 14px;
      overflow: hidden; background: #eef2f9; }
.rk-shot img { width: 100% !important; height: 100% !important; max-width: none !important;
      object-fit: contain !important; display: block; }
.rk-empty { width: 250px; height: 186px; border-radius: 14px; background: #eef2f9;
      display: flex; align-items: center; justify-content: center; font-size: 40px; }
.rk-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
      color: #0e7a52; background: #dff5e9; padding: 6px 15px; border-radius: 999px;
      position: static; letter-spacing: 0; text-transform: none; }
.rk-count { position: absolute; top: 10px; right: 10px; font-size: 12px; font-weight: 700;
      color: #fff; background: rgba(26,34,51,0.7); padding: 4px 10px; border-radius: 999px; }
.rk-name { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.035em;
      line-height: 1.1; color: #1a2233; text-decoration: none; margin-top: 10px; }
.rk-name:hover { color: #3f5bd9; }
.rk-sub { font-size: 13.5px; font-weight: 500; color: #67748c; margin-top: 7px; }
.rk-meta { font-size: 12.5px; font-weight: 500; color: #8b97ad; margin-top: 2px; }
@media (max-width: 900px) { .rk { grid-template-columns: minmax(0,1fr); }
  .rk-shot, .rk-empty { width: 100%; } }

/* ── Recent flights from this altimeter ────────────────────────────────────
   A carousel, not a wrapping grid: 20 cards must cost one row however narrow
   the sheet gets. flex-nowrap so it can never reflow, scroll-snap so a paged
   scroll always lands on a card edge. */
.mc-carou { margin-top: 4px; }
.mc-chead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mc-chead h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.mc-chead span { font-size: 12.5px; color: #67748c; }
.mc-cwhy { font-size: 12.5px; color: #8b97ad; font-style: italic; }
.mc-cnav { margin-left: auto; display: flex; gap: 8px; }
.mc-cbtn { width: 34px; height: 34px; border-radius: 11px; border: 0; background: #f0f3f9;
      color: #3c4a63; font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1; }
.mc-cbtn:hover { background: #e3e8f4; }
/* The sort selector. Radios so switching costs no script, hidden with a
   direct-child selector - ".flsort input" would catch anything else that ever
   lands inside, which is the mistake ".mctabs input" made across the tabs. */
.flsort > input { position: absolute; opacity: 0; pointer-events: none; }
.fls-bar { display: inline-flex; gap: 2px; padding: 3px; background: #eef1f6;
      border-radius: 11px; flex-wrap: wrap; }
.fls-bar label { font-size: 12.5px; font-weight: 700; color: #67748c; padding: 7px 14px;
      border-radius: 9px; cursor: pointer; white-space: nowrap; }
.fls-bar label:hover { color: #1a2233; }
/* selected: white, with its hairline drawn as a shadow so selecting cannot
   change the segment's size */
#fls-recent:checked  ~ .mc-chead .fls-bar label[for="fls-recent"],
#fls-stable:checked  ~ .mc-chead .fls-bar label[for="fls-stable"],
#fls-highest:checked ~ .mc-chead .fls-bar label[for="fls-highest"],
#fls-fastest:checked ~ .mc-chead .fls-bar label[for="fls-fastest"],
#fls-shortest:checked ~ .mc-chead .fls-bar label[for="fls-shortest"],
#fls-longest:checked ~ .mc-chead .fls-bar label[for="fls-longest"] {
      color: #1a2233; background: #fff;
      box-shadow: 0 0 0 1px #e2e8f2, 0 1px 2px rgba(26,34,51,0.06); }
/* One row shown at a time - but only where there are sorts to switch between.
   Scoped to .flsort: as ".mc-carou .mc-crow" it also hid the Motors tab's
   carousel, which has no sort radios and so had nothing to reveal it. The
   cards were all present and invisible. */
.flsort .mc-crow { display: none; }
#fls-recent:checked  ~ .mc-crow[data-sort="recent"],
#fls-stable:checked  ~ .mc-crow[data-sort="stable"],
#fls-highest:checked ~ .mc-crow[data-sort="highest"],
#fls-fastest:checked  ~ .mc-crow[data-sort="fastest"],
#fls-shortest:checked ~ .mc-crow[data-sort="shortest"],
#fls-longest:checked  ~ .mc-crow[data-sort="longest"] { display: flex; }
/* display:flex belongs on the base rule. It was moved onto the sort-reveal
   selector, so a carousel without sorts had a block row: the cards' flex
   basis did nothing and each one stretched to the full width of the sheet. */
.mc-crow { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden;
      padding: 2px 2px 12px; scroll-snap-type: x mandatory; scroll-behavior: smooth;
      scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.mc-crow::-webkit-scrollbar { height: 8px; }
.mc-crow::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.mc-crow::-webkit-scrollbar-track { background: transparent; }
.fcard { flex: 0 0 246px; scroll-snap-align: start; background: #f4f6fb; border: 1px solid #eaeff7;
      border-radius: 14px; overflow: hidden; display: block; text-decoration: none; }
.fcard:hover { background: #eef1fe; border-color: #dbe1fb; }
/* The chart thumbs are 340x255 and transparent, so the slot keeps that ratio
   and sits on white - a letterbox band cropped the launch off the left. */
.fthumb { position: relative; aspect-ratio: 340 / 255; background: #ffffff;
      border-bottom: 1px solid #eaeff7; overflow: hidden; }
.fthumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px;
      box-sizing: border-box; }
/* top right: the y axis and the launch rise are both on the left of these
   charts, so a badge on that side covers the part worth seeing. */
.fthumb s { position: absolute; top: 7px; right: 7px; z-index: 2; text-decoration: none;
      font-size: 10px; font-weight: 700; color: #fff; background: rgba(26,34,51,0.72);
      padding: 2px 7px; border-radius: 999px; }
.fnone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 600; color: #8b97ad; background: #f7f9fc; }
.fbody { padding: 11px 13px 13px; }
.ftitle { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; color: #1a2233;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fapo { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; margin-top: 5px;
      color: #1a2233; font-variant-numeric: tabular-nums; }
.fapo u { text-decoration: none; font-size: 12px; font-weight: 600; color: #67748c; margin-left: 2px; }
.fmeta { font-size: 11.5px; font-weight: 500; color: #67748c; margin-top: 3px; }
.fcard.is-this { background: #eef1fe; border-color: #c9d3f7; }
.fbadge { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
      text-transform: uppercase; color: #3f5bd9; background: #dbe1fb; border-radius: 999px;
      padding: 1px 7px; margin-left: 7px; vertical-align: 1px; }

/* Device identity: was a 130px float and a 26px #2050b0 title, the only place
   on the page using that blue. */
.dv { display: grid; grid-template-columns: 148px minmax(0,1fr); gap: 26px; align-items: start; }
.dv img { max-width: 100%; height: auto; display: block; background: #fff; border-radius: 12px; }
.dv-name { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.dv-sub { font-size: 13px; color: var(--dim); margin-top: 4px; }
@media (max-width: 760px) { .dv { grid-template-columns: minmax(0,1fr); } }

/* ── Flight files ──────────────────────────────────────────────────────────
   The two links sat as chips inside the chart toolbar's Download block, where
   a file is a word and a size. Given a tab, each says what it is. */
/* The files: name and description left, size and button sized, so the three
   rows read across the sheet without the button landing 2,000px from the
   filename. */
.dl-list { max-width: none; }
.dl-row {
      gap: 32px; }
.dl-row:first-child { border-top: 0; }
.dl-name {
      letter-spacing: -0.01em; }
.dl-size { font-weight: 600;
      }
.dl-tick { color: #059669; font-weight: 700; cursor: help; }
.dl-off .dl-name, .dl-off .dl-size { color: var(--dim); }
@media (max-width: 760px) {
  .dl-row { grid-template-columns: minmax(0,1fr); gap: 12px; }
}

/* ── Launch site ───────────────────────────────────────────────────────────
   Every class this panel uses - .widget-panel, .widget-desc, .layer-btn,
   .search-row, .coord-display, .datetime-row, .now-btn, .submit-btn, .notice -
   had no rule anywhere in this file or the template, and #map had no height.
   A Leaflet container with no height is 0px tall, so the map drew nothing but
   its controls; invalidateSize() cannot measure a box that has no size. That
   is the bug. This is the stylesheet the panel was written against. */
.widget-panel, .widget-body { background: transparent; border: 0; padding: 0; margin: 0; }
.widget-desc { font-size: 13px; color: #475569; line-height: 1.65; margin: 0 0 22px;
      max-width: 62ch; }

/* the map itself: the one rule whose absence broke it */
/* Now a WebGL terrain view rather than a Leaflet container. It still needs a
   height of its own, and it needs to swallow the gestures it uses: without
   touch-action the page scrolls out from under a drag on a phone. */
#map { height: 500px; width: 100%; border-radius: 12px;
      border: 1px solid var(--hair); background: #fff; position: relative;
      overflow: hidden; cursor: grab; touch-action: none; user-select: none;
      -webkit-user-select: none; }
#map canvas { display: block; }
#map:active { cursor: grabbing; }
@media (max-width: 1150px) { #map { height: 420px; } }
@media (max-width: 760px)  { #map { height: 320px; } }
.ls3-cred { position: absolute; right: 7px; bottom: 7px; z-index: 5; pointer-events: none;
      background: rgba(255,255,255,0.78); color: #475569; font-size: 10px; line-height: 1.3;
      padding: 2px 6px; border-radius: 4px; }

.map-hint { font-size: 12px; color: var(--dim); margin: 10px 0 0; }
.map-src { font-size: 11px; color: var(--dim); margin: 6px 0 0; line-height: 1.5; }

/* Suggestions under the place search. Nominatim's usage policy forbids
   search as you type from a browser, so the list comes from Photon. */
.search-row { position: relative; }
.ls-sr { position: absolute; left: 0; right: 0; top: 100%; z-index: 120;
      display: none; max-height: 260px; overflow-y: auto; background: #fff;
      border: 1px solid var(--hair); border-top: none;
      border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.ls-sr-row { padding: 8px 10px; font-size: 13px; cursor: pointer;
      border-bottom: 1px solid #f1f5f9; }
.ls-sr-row:last-child { border-bottom: none; }
.ls-sr-row:hover { background: #eef3ff; }
.ls-sr-note { padding: 8px 10px; font-size: 12px; color: var(--dim); }
.ls-sr-cred { padding: 5px 10px; font-size: 10px; color: var(--dim);
      border-top: 1px solid #f1f5f9; }
.map-src a { color: inherit; text-decoration: underline; }

/* Fullscreen is a modal rather than the fullscreen API, which is refused on
   a div by mobile Safari. The map keeps its own element, so the renderer and
   the loaded ground survive opening and closing it. */
#map.ls3-full { position: fixed; inset: 0; width: 100vw; height: 100vh;
      z-index: 9000; border-radius: 0; border: 0; }
body.ls3-full-on { overflow: hidden; }

/* One control in the corner, which expands and then closes again. */
.ls3-x { position: absolute; right: 10px; top: 10px; z-index: 6;
      width: 34px; height: 34px; line-height: 30px; text-align: center;
      font-size: 17px; cursor: pointer; border-radius: 8px; padding: 0;
      background: rgba(255,255,255,0.9); color: #334155;
      border: 1px solid var(--hair); }
.ls3-x:hover { background: #fff; }

/* how solid the canopy is drawn, alongside the Trees button in the same
   segmented control */
.ls3-op { width: 78px; margin: 0 8px 0 2px; accent-color: #16a34a;
      vertical-align: middle; cursor: pointer; }
@media (max-width: 760px) { .ls3-op { width: 58px; } }

/* Fullscreen keeps the layer, tree and size pickers: the same controls are
   lifted over the map rather than duplicated, so their state stays put. */
#map.ls3-full .ls-controls { position: absolute; left: 12px; top: 12px;
      z-index: 7; margin: 0; max-width: calc(100vw - 70px); }

/* Layer picker, as the segmented control the unit selectors already use: a
   track, and the selected segment white with its hairline drawn as a shadow
   so selecting cannot change its size. */
.map-layer-toggle { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px;
      background: #f1f5f9; border-radius: 10px; }
.layer-btn { font-family: Outfit, sans-serif; font-size: 12.5px; font-weight: 600;
      color: #475569; background: transparent; border: 0; border-radius: 8px;
      padding: 7px 15px; cursor: pointer; }
.layer-btn:hover { color: var(--ink); }
.layer-btn.active { color: var(--ink); background: #fff;
      box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(15,23,42,0.05); }

/* Search row: one field and one button on a line, both on the page's scale. */
.search-row { display: flex; gap: 8px; margin: 0 0 12px; max-width: 520px; }
.search-row input { flex: 1; min-width: 0; box-sizing: border-box;
      font-family: Outfit, sans-serif; font-size: 13px; color: var(--ink);
      background: #fff; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 9px; }
.search-row input:focus { outline: 0; border-color: var(--acc); }
.search-row button { flex: none; font-family: Outfit, sans-serif; font-size: 12.5px;
      font-weight: 600; color: #475569; background: #fff; border: 1px solid #cbd5e1;
      border-radius: 9px; padding: 9px 16px; cursor: pointer; }
.search-row button:hover { border-color: #94a3b8; color: var(--ink); background: var(--soft); }
#search-error { font-size: 12.5px; color: #b91c1c; margin: 0 0 12px; }

/* Coordinates. Two label/value pairs side by side in a 320px column put the
   Lng label on top of the Lat value; they are two rows. */
.coord-display { display: block; margin: 0 0 24px; }
.coord-display > span { display: flex; align-items: baseline; justify-content: space-between;
      gap: 20px; padding: 10px 0; border-top: 1px solid var(--hair); }
.coord-display > span:first-child { border-top: 0; }
.coord-label { font-size: var(--lbl); font-weight: 400; color: var(--dim);
      text-transform: none; letter-spacing: 0; }
.coord-display strong { font-size: var(--val); font-weight: 600; color: var(--ink);
      font-variant-numeric: tabular-nums; }

/* Date and time, on the add-motor form's field scale. The labels were coming
   out as uppercase small caps from a generic label rule elsewhere. */
.datetime-row { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: end;
      margin: 0 0 18px; }
.datetime-field { display: block; }
.datetime-field label { display: block; font-size: 12.5px; color: var(--dim);
      margin-bottom: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.datetime-field input { box-sizing: border-box; font-family: Outfit, sans-serif;
      font-size: 13px; color: var(--ink); background: #fff; padding: 8px 10px;
      border: 1px solid #cbd5e1; border-radius: 9px; }
.datetime-field input:focus { outline: 0; border-color: var(--acc); }

.now-btn { font-family: Outfit, sans-serif; font-size: 12.5px; font-weight: 600;
      color: #475569; background: #fff; border: 1px solid #cbd5e1; border-radius: 9px;
      padding: 8px 14px; cursor: pointer; }
.now-btn:hover { border-color: #94a3b8; color: var(--ink); background: var(--soft); }
.submit-btn { font-family: Outfit, sans-serif; font-size: 12.5px; font-weight: 600;
      color: #fff; background: var(--acc); border: 1px solid var(--acc); border-radius: 9px;
      padding: 9px 16px; cursor: pointer; }
.submit-btn:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.submit-btn:disabled { background: #fff; border-color: #e2e8f0; color: #64748b;
      cursor: default; }

/* The JS reveals these by setting display, so they start hidden. */
.notice { display: none; font-size: 12.5px; border-radius: 10px; padding: 11px 14px;
      margin-top: 14px; }
.notice.success { color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; }
.notice.error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }

/* ── Launch site tab, rebuilt ──────────────────────────────────────────────
   The map takes the width against a fixed 420px field column. .stp-map is
   shared with nothing else any more, but the override rides on its own class
   anyway so the base rule stays as written. Specificity note: .ls-grid beats
   the shared 1250px collapse, so it restates its own. */
/* Both columns are a fixed size and the row is left aligned, so on a wide
   screen the page simply has space to the right rather than a map stretched
   into a letterbox. 550 by 500 is about 1.1:1, which suits a block of ground
   seen from an angle. */
.stp-map.ls-grid { grid-template-columns: 550px minmax(460px, 700px); column-gap: 40px;
      justify-content: start; align-items: start; }
.stp-map.ls-grid #location-form { margin-top: 18px; }
@media (max-width: 1150px) {
  .stp-map.ls-grid { grid-template-columns: minmax(0,1fr); }
}
/* The layer and size pickers used to sit on top of the map, which left the
   right hand column starting a good 90px higher than the map did and the two
   reading as unrelated. They are controls for the view, so they live with the
   rest of the controls now and both columns start on the same line. */
.ls-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ls-controls .map-layer-toggle { margin: 0; }

.ls-field { margin: 0 0 18px; }
.ls-field label { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 6px;
      text-transform: none; letter-spacing: 0; font-weight: 400; }
.ls-field input, .ls-field select { width: 100%; box-sizing: border-box;
      font-family: 'Plus Jakarta Sans', Outfit, sans-serif; font-size: 13px; font-weight: 500;
      color: #1a2233; background: #ffffff; border: 1px solid #d7dceb; border-radius: 10px;
      padding: 9px 11px; }
.ls-field input:focus, .ls-field select:focus { outline: 0; border-color: #3f5bd9; }
.ls-field input:disabled, .ls-field select:disabled { background: #f7f9fc; color: #67748c; }
.ls-unit { position: relative; }
.ls-unit input { padding-right: 56px; }
.ls-unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      font-size: 12px; font-weight: 600; color: #67748c; pointer-events: none; }
.ls-hint { font-size: 12px; color: var(--dim); margin: -14px 0 20px; }
.ls-sec { border-top: 1px solid var(--hair); margin-top: 30px; padding-top: 26px; }
.ls-h { font-size: 17px; font-weight: 700; color: #1a2233; margin: 0; }
.ls-sub { font-size: 12.5px; color: #67748c; margin: 6px 0 18px; max-width: 62ch; }
/* Recently used sites: a details dropdown, the uploader's pattern. It opens
   on a tap with no JS, and the list is absolutely positioned so opening it
   does not shove the form around. It sits beside the search box; the row
   wraps when the two cannot share the width. */
.ls-toprow { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; margin: 0 0 12px; }
.ls-toprow .search-row { margin: 0; flex: 1 1 260px; }
.ls-toprow .ls-dd { flex: 0 1 320px; min-width: 240px; }
.ls-dd { position: relative; z-index: 1200; }
.ls-dd summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
      align-items: center; gap: 12px; font-family: 'Plus Jakarta Sans', Outfit, sans-serif;
      font-size: 13px; font-weight: 500; color: #67748c; background: #ffffff;
      border: 1px solid #d7dceb; border-radius: 10px; padding: 9px 11px; }
.ls-dd summary::-webkit-details-marker { display: none; }
.ls-dd-c { color: #67748c; font-size: 12px; transition: transform .15s ease; }
.ls-dd[open] summary { border-color: #3f5bd9; }
.ls-dd[open] .ls-dd-c { transform: rotate(180deg); }
.ls-dd-pop { position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0; right: 0;
      background: #ffffff; border: 1px solid #d7dceb; border-radius: 12px;
      box-shadow: 0 10px 30px rgba(15,23,42,0.12); padding: 6px; max-height: 340px; overflow: auto; }
.ls-site { display: grid; row-gap: 2px; width: 100%; text-align: left; box-sizing: border-box;
      font-family: 'Plus Jakarta Sans', Outfit, sans-serif; background: transparent;
      border: 0; border-radius: 9px; padding: 9px 11px; cursor: pointer; }
.ls-site:hover { background: #f4f6fb; }
.ls-site-n { font-size: 13px; font-weight: 700; color: #1a2233; }
.ls-site-c { font-size: 11.5px; font-weight: 500; color: #67748c; font-variant-numeric: tabular-nums; }
.ls-site-x { font-size: 11.5px; font-weight: 600; color: #3f5bd9; }
.ls-wx { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px 16px; max-width: 1100px; }
.ls-wx .ls-field { margin: 0; }
.ls-tiles { display: grid; grid-template-columns: repeat(3, minmax(140px, 220px)); gap: 12px; }
@media (max-width: 760px) { .ls-tiles { grid-template-columns: minmax(0,1fr); } }
.ls-tile { background: #f4f6fb; border-radius: 12px; padding: 14px 16px; }
.ls-tile span { display: block; font-size: 11.5px; font-weight: 600; color: #67748c;
      margin-bottom: 5px; }
.ls-tile strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #1a2233;
      font-variant-numeric: tabular-nums; }

/* ── Linked flights tab ────────────────────────────────────────────────────
   The cards are the altimeter carousel's .fcard/.fthumb, so they inherit that
   look for free. Additions: a relation badge on the thumb, a device chip in
   the body (the point of the card row: three altimeters in one rocket must be
   tellable apart at a glance), and a picked state for the candidate row. */
.fcard .frel { position: absolute; left: 7px; top: 7px; z-index: 2; font-size: 10px;
      font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.frel.r-altimeter, .flc-rel.r-altimeter { color: #3349b5; background: #e8edfe; }
.frel.r-sameday, .flc-rel.r-sameday { color: #0d7a4f; background: #e7f6ef; }
.frel.r-samerocket, .flc-rel.r-samerocket { color: #7040b8; background: #f4ecfe; }
.fcard .fdev { display: inline-block; font-size: 10.5px; font-weight: 700; color: #3c4a63;
      background: #e8edf6; border-radius: 999px; padding: 2px 9px; margin: 3px 0 4px; }
.fcard .fhit { display: block; font-size: 11px; font-weight: 600; color: #3f5bd9; margin-top: 3px; }
/* Green tick, top left of a thumb: this one is the reader's own flight. Top
   left is safe here: the badge row on these cards sits top right, and the
   relation badge only appears on linked-tab cards, which never carry a tick. */
.fthumb .fown { position: absolute; top: 7px; left: 7px; z-index: 2; display: inline-flex;
      align-items: center; justify-content: center; width: 20px; height: 20px;
      color: #ffffff; background: #0d9455; border-radius: 999px;
      box-shadow: 0 1px 3px rgba(15,23,42,0.25); }
.fthumb .fown svg { width: 12px; height: 12px; }
div.fcard { cursor: pointer; }
div.fcard.is-picked { border: 2px solid #3f5bd9; margin: -1px; }
.fcard .funlink { float: right; font-family: inherit; font-size: 11px; font-weight: 700;
      color: #b91c1c; background: transparent; border: 0; padding: 0; cursor: pointer; }
.flk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.flk-controls input[type="text"] { flex: 1 1 260px; max-width: 460px; min-width: 0;
      box-sizing: border-box; font-family: 'Plus Jakarta Sans', Outfit, sans-serif; font-size: 13px;
      color: #1a2233; background: #ffffff; padding: 9px 12px; border: 1px solid #d7dceb;
      border-radius: 9px; }
.flk-controls input[type="text"]:focus { outline: 0; border-color: #3f5bd9; }
.flk-n { font-size: 12px; font-weight: 500; color: var(--dim); }
.flk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.flk-empty { font-size: 13px; color: var(--dim); margin: 4px 0 0; }
/* The overlay chart: every linked flight's altitude trace on one canvas.
   Chart.js needs a parent with a real height (see the note on the stage
   charts above); the legend chips are built by script and toggle traces. */
.flc-agree { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
      font-weight: 600; color: #0d7a4f; background: #e7f6ef; border-radius: 10px;
      padding: 8px 14px; margin: 0 0 16px; }
.flc-agree--off { color: #92400e; background: #fdf0dc; }
.flc-agree--off .flc-agree-t { background: #b45309; }
.flc-agree-t { display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 999px; background: #0d9455;
      color: #ffffff; font-size: 11px; font-weight: 800; }
.flc-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.flc-chip { display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Plus Jakarta Sans', Outfit, sans-serif; font-size: 12px; font-weight: 700;
      color: #1a2233; background: #f4f6fb; border: 1px solid #eaeff7; border-radius: 999px;
      padding: 6px 13px; cursor: pointer; }
.flc-chip.is-off { color: #8b97ad; background: #ffffff; border-style: dashed; }
.flc-chip.is-off .flc-swatch { opacity: 0.35; }
.flc-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.flc-wrap { position: relative; height: 380px; box-sizing: border-box;
      border: 1px solid var(--hair); border-radius: 12px; padding: 14px; }
.flc-spread { position: absolute; top: 14px; right: 16px; display: grid; row-gap: 3px;
      background: rgba(255,255,255,0.92); border: 1px solid #e9eef4; border-radius: 10px;
      padding: 10px 14px; }
.flc-spread span { font-size: 11px; font-weight: 700; color: #67748c; }
.flc-spread strong { font-size: 15px; font-weight: 800; color: #1a2233;
      font-variant-numeric: tabular-nums; }
.flc-rows { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.flc-row { display: flex; align-items: center; gap: 10px; font-size: 12px;
      background: #f4f6fb; border-radius: 12px; padding: 9px 14px; }
.flc-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.flc-rel { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* ── Flight summary, v7 ─────────────────────────────────────────────────────
   One typographic system: hairline rules only, tabular figures, amber spent
   on ejection and the stability warning alone. The timeline is a scroller so
   extra burnouts simply append; the arrows appear only when something is off
   the edge. */
.fsv-heroes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 44px; row-gap: 24px; }
@media (max-width: 900px){ .fsv-heroes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fsv-hk { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #67748c; }
.fsv-hv { font-size: 40px; font-weight: 800; color: var(--ink); letter-spacing: -0.025em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.fsv-hv span { font-size: 16px; font-weight: 500; color: #8b97ad; letter-spacing: 0; }
.fsv-hs { font-size: 12.5px; color: #8b97ad; margin-top: 2px; }
.fsv-tlwrap { position: relative; margin-top: 24px; }
.fsv-tl { display: flex; overflow-x: auto; scrollbar-width: none; }
.fsv-tl::-webkit-scrollbar { display: none; }
.fsv-ev { position: relative; flex: 1 0 224px; box-sizing: border-box; padding-right: 44px; }
.fsv-ev > i { position: absolute; left: 21px; right: 0; top: 5px; height: 2px; }
.fsv-ev > b { position: relative; display: block; width: 12px; height: 12px; border-radius: 999px; box-sizing: border-box; border: 2.5px solid #1a2233; box-shadow: 0 0 0 4px #ffffff; }
.fsv-el { height: 32px; display: flex; align-items: flex-end; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.45; text-transform: uppercase; margin-top: 12px; }
.fsv-et { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 1px 0 10px; }
.fsv-et span { font-size: 12.5px; font-weight: 500; color: #8b97ad; letter-spacing: 0; }
.fsv-er { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid #eef1f7; }
.fsv-er span { font-size: 12px; color: #67748c; }
.fsv-er em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fsv-arr { position: absolute; top: -10px; z-index: 2; width: 32px; height: 32px; border-radius: 999px; background: #ffffff; border: 1px solid #d7dceb; box-shadow: 0 2px 8px rgba(15,23,42,0.1); font-family: inherit; font-size: 17px; font-weight: 700; color: #3c4a63; cursor: pointer; padding: 0 0 3px; align-items: center; justify-content: center; }
.fsv-arr:hover { border-color: #94a3b8; }
.fsv-sech { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; flex-wrap: wrap; border-top: 1px solid var(--hair); margin-top: 40px; padding-top: 32px; }
.fsv-note { font-size: 12.5px; color: #8b97ad; text-align: right; }
.fsv-sgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px 40px; margin-top: 24px; }
.fsv-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px 54px; margin-top: 24px; }
@media (max-width: 900px){ .fsv-sgrid, .fsv-rgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fsv-sbar { height: 3px; background: #eef1f7; margin-bottom: 12px; }
.fsv-sbar b { display: block; height: 3px; background: #1a2233; }
.fsv-rr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid #eef1f7; padding-top: 12px; }
.fsv-st .fsv-rr { border-top: 0; padding-top: 0; }
.fsv-rr span { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fsv-rr em { font-style: normal; font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fsv-rs { font-size: 11.5px; color: #8b97ad; margin-top: 2px; }
.fsv-foot { font-size: 12.5px; color: #8b97ad; border-top: 1px solid var(--hair); margin-top: 40px; padding-top: 22px; }
.fs-alldata { border-top: 1px solid var(--hair); margin-top: 26px; padding-top: 6px; }
/* Flown as (Motors & rocket tab): the Flight summary's figures for the rocket,
   its motor configuration and the loaded weight; names a step down from the
   numbers, the owner's button in the fourth column, amber for an estimate. */
.fa-a { color: inherit; text-decoration: none; }
.fa-a:hover { color: #3f5bd9; }
.fsv-hv.fa-t { font-size: 32px; line-height: 1.35; overflow-wrap: break-word; }
.fa-nil { color: #b6bfce !important; }
.fsv-rr em.fa-nil { font-size: 12.5px; font-weight: 600; }
.fa-est { color: #b45309 !important; }
.fa-act { display: flex; align-items: center; justify-content: flex-end; }
@media (max-width: 900px){ .fsv-hv.fa-t { font-size: 24px; } .fa-act { justify-content: flex-start; } }
@media (max-width: 560px){ .fa-burn .fsv-sgrid { grid-template-columns: minmax(0,1fr); } .fa-burn .fsv-note { text-align: left; } }

/* ── Downloads & sharing ───────────────────────────────────────────────────
   Two jobs side by side: take the flight away on the left, send it to someone
   on the right. Both previews are the same 340x255 box so the column lines
   up, and every copy control is the same small button. */
.dl-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); column-gap: 54px; }
@media (max-width: 1100px) { .dl-grid { grid-template-columns: minmax(0,1fr); row-gap: 34px; }
  .dl-share { border-left: 0 !important; padding-left: 0 !important; } }
.dl-share { border-left: 1px solid var(--hair); padding-left: 54px; }
.dl-list { display: block; }
.dl-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; column-gap: 14px;
  align-items: baseline; border-top: 1px solid #eef1f7; padding: 15px 0; }
.dl-ext { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: #67748b;
  background: #f4f6fb; border-radius: 5px; padding: 3px 0; text-align: center; }
.dl-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-sig { font-family: Outfit, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: #0f7a4d; background: #e7f6ef; border-radius: 999px; padding: 2px 8px; }
.dl-what { font-size: 12px; color: #67748b; line-height: 1.5; margin-top: 3px; max-width: 54ch; }
.dl-size { font-size: 12px; color: #67748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-adj { border-top: 1px solid #eef1f7; margin-top: 4px; padding-top: 18px; }
.dl-adj-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dl-adj-h b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  font-weight: 600; color: var(--ink); }
.dl-adj-h span { font-size: 11.5px; color: #67748b; }
/* The build button takes the right edge, so it stops on the same line as the
   Download buttons in the file rows above it. */
.dl-adj-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dl-adj-row #dladj-go { margin-left: auto; }
.dl-f { display: block; }
.dl-f > span { display: block; font-size: 11.5px; color: #64748b; margin-bottom: 5px; }
.dl-unit { position: relative; display: block; }
.dl-unit input { width: 132px; box-sizing: border-box; font-family: Outfit, sans-serif;
  font-size: 13px; font-weight: 500; color: var(--ink); background: #ffffff;
  border: 1px solid #d7dceb; border-radius: 10px; padding: 9px 46px 9px 11px; }
.dl-unit input:focus { outline: 0; border-color: #3f5bd9; }
.dl-unit em { position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #67748b; pointer-events: none; }
.dl-adj-apo { font-size: 11.5px; color: #67748b; padding-bottom: 10px; }
@media (max-width: 520px) { .dl-adj-row #dladj-go { margin-left: 0; } }
.dl-adj-apo b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* The adjusted file is derived, so it cannot carry the device signature the
   CSV and ACLZ do. Said plainly, next to the button that makes it. */
.dl-adj-note { font-size: 11.5px; color: #67748b; line-height: 1.55; margin: 12px 0 0;
  max-width: 66ch; padding-left: 11px; border-left: 2px solid #e5eaf3; }
/* Custom CSV: the data sets in the file as the chart legend's own chips
   (.mcl-pill, its cross to take one out), the rest in a list to add from (the
   page's .ls-field select). The span inputs show the span being exported
   whichever way it was chosen, greyed when not typed in. */
#dl-custom { margin-top: 22px; }
.dlc-head > span, .dlc-span > span { font-size: 11.5px; color: #64748b; }
.dlc-head em { font-style: normal; color: #94a3b8; margin-left: 4px; font-variant-numeric: tabular-nums; }
.dlc-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.dlc-list .dl-what { margin: 0; }
.dlc-add { max-width: 340px; margin: 0 0 20px; }
.dlc-span { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.dlc-span .useg { margin-right: 0; }
#dl-custom .dl-unit input:disabled { background: #f7f9fc; color: #67748b; }
#dlc-go { margin-left: auto; }
#dlc-go:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 520px) { #dlc-go { margin-left: 0; } }
.dl-url { display: flex; gap: 8px; margin: 0 0 10px; }
.dl-url input { flex: 1; min-width: 0; box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #475569;
  background: #f7f9fc; border: 1px solid #e2e8f2; border-radius: 10px; padding: 10px 12px; }
.dl-copy { font-family: Outfit, sans-serif; cursor: pointer; }
.dl-url .dl-copy { font-size: 12.5px; font-weight: 700; color: #ffffff; background: var(--ink);
  border: 0; border-radius: 10px; padding: 10px 16px; white-space: nowrap; }
.dl-soc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.dl-s { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 999px; color: #ffffff !important; font: 700 13px/1 Outfit, sans-serif;
  text-decoration: none; }
.dl-s:hover { filter: brightness(1.1); }
.dl-h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.dl-p { font-size: 12.5px; color: #67748b; line-height: 1.55; margin: 0 0 12px; max-width: 58ch; }
.dl-p strong { color: var(--ink); }
.dl-media { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.dl-prev { flex: 0 0 168px; aspect-ratio: 340 / 255; background: #f7f9fc;
  border: 1px solid var(--hair); border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.dl-prev img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
.dl-prev canvas { width: 100% !important; height: 100% !important; display: block; padding: 5px;
  box-sizing: border-box; }
.dl-prev--qr { aspect-ratio: 1; flex-basis: 120px; }
/* The snapshot is a wide chart, so its preview keeps the export's 1000x550
   proportions and takes half the column rather than sitting in a small
   square where nothing can be made out. */
.dl-media--wide { flex-wrap: wrap; }
.dl-prev--wide { flex: 1 1 50%; min-width: 260px; aspect-ratio: 1000 / 550; }
.dl-media--wide .dl-acts { flex: 1 1 240px; }
.dl-prev--qr img, .dl-prev--qr canvas { width: 100%; height: 100%; object-fit: contain; padding: 8px;
  box-sizing: border-box; }
.dl-acts { flex: 1; min-width: 0; display: grid; row-gap: 12px; align-content: start; }
.dl-acts-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* The snapshot sizes are alternatives, not a toolbar: one per line, each
   the same width, so they read as a list to choose from. */
.dl-acts-col { display: grid; row-gap: 7px; justify-items: stretch; max-width: 230px; }
.dl-acts-col .uc-btn { text-align: center; }
.dl-acts .uc-btn, .dl-acts-row .uc-btn { font-size: 11.5px; padding: 6px 11px; }
.dl-sz-h { display: flex; align-items: baseline; gap: 8px; }
.dl-sz-h b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dl-sz-h span { font-size: 11.5px; color: #67748b; }
.dl-note { font-size: 11.5px; color: #67748b; line-height: 1.5; }

/* ── Flight credentials ───────────────────────────────────────────────────
   The secure-log badge and the flight flags are one set: solid chips in the
   masthead's device line, stating what this log IS. Solid rather than tinted
   - a pale pill beside a pale pill read as decoration, and the state of a
   flight is not decoration. Detail lives in a hover card, which must clear
   the sticky tab strip below it (z-index 995), hence 1200. */
.mcflag { position: relative; display: inline-flex; vertical-align: middle; }
.mcflag-c { display: inline-flex; align-items: center; gap: 6px; font-family: Outfit, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #ffffff; background: #b45309; border-radius: 8px; padding: 5px 11px; cursor: default;
  white-space: nowrap; }
.mcflag-c svg { width: 12px; height: 12px; flex: none; opacity: 0.9; }
.mcflag--ok .mcflag-c { background: #0f7a4d; }
.mcflag:hover .mcflag-c { filter: brightness(1.08); }
.mcflag-p { display: none; position: absolute; z-index: 1200; top: calc(100% + 9px); left: 0;
  width: 300px; box-sizing: border-box; background: #ffffff; border: 1px solid #e5e9f2;
  border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,0.16); padding: 13px 15px;
  font-family: Outfit, sans-serif; text-transform: none; letter-spacing: 0; }
.mcflag:hover .mcflag-p { display: block; }
.mcflag-p b { display: block; font-size: 12.5px; font-weight: 700; color: #1a2233; margin-bottom: 4px; }
.mcflag-p > span { display: block; font-size: 12px; color: #475569; line-height: 1.6; }
.mcflag-r { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f3f8; }
.mcflag-r span { display: block; font-size: 11.5px; color: #64748b; padding: 2px 0 2px 13px;
  position: relative; }
.mcflag-r span::before { content: ''; position: absolute; left: 0; top: 9px; width: 4px;
  height: 4px; border-radius: 999px; background: #b45309; }
.mcflag--ok .mcflag-r span::before { background: #0f7a4d; }
@media (max-width: 700px) { .mcflag-p { left: auto; right: 0; width: 260px; } }

/* ── The chart as the first tab ─────────────────────────────────────────────
   The chart sheet is a sibling of the tab radios and #container, so the same
   :checked ~ chains drive it. It is the checked default, so a visitor still
   lands on the trace; the data sheet (#container) hides while it shows. The
   sheet mirrors #mcstack's card so the tab bar joins whichever is active.
   (#mcstack's --hair token is scoped to it, hence the literal colour.) */
.mctabs > .mc-chartsheet { display: none; width: 95%; margin: 0 auto; box-sizing: border-box;
  background: #ffffff; border: 1px solid #e9eef4; border-radius: 14px;
  padding: 6px 22px 16px; }
#mct-chart:checked ~ .mc-chartsheet { display: block; }
#mct-chart:checked ~ #container { display: none; }
#mct-chat:checked  ~ #container { display: none; }
#mct-chat:checked  ~ .mc-chartsheet { display: none; }
/* The discussion lives in its own tab now instead of the page footer. */
#comments { display: none; }
body.mc-chat-on #comments { display: block; }

/* ════ Panels, cards, summary rows — was cloud_page_flights.cgi line 5655 (double-quoted string) ════ */
.mbox {
  background: #ffffff;
  border-radius: 12px;
  padding: 0px;
  box-shadow: 0 2px 12px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.mbox:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
}

.mbox-header {
  font-weight: 600;
  font-size: 16px;
  background: #ffffff;
  color: #0f172a;
  padding: 15px 18px 13px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.mbox-header:hover { background: #f8fafc; }
.mbox-chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.2s;
}
.mbox-collapsed .mbox-chevron { transform: rotate(-90deg); }
.mbox-collapsed .mbox-body { display: none !important; }
/* Collapse hides the card's own children rather than a wrapper element, so no
   card body has to be re-parented into one. */
.mbox-collapsed > *:not(.mbox-header) { display: none !important; }
/* The chevron is decoration, so it is drawn rather than inserted into every
   header as an element. .mbox-header is already a flex row. */
.mbox-header::after { content: ''; width: 18px; height: 18px; margin-left: auto; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s; }
.mbox-collapsed .mbox-header::after { transform: rotate(-90deg); }

/* ── Masthead ──────────────────────────────────────────────────────────────
   The flight names itself and states its headline figures on one line: title
   and identity left, figures right. Flat on the page with a hairline under,
   not a card - the chart below it is the first boxed thing. */
.mast { width: 100%; margin: 10px 0 0 0; box-sizing: border-box; font-family: Outfit, sans-serif; }
.mast-in { display: grid; grid-template-columns: minmax(360px,1fr) minmax(0,auto);
           gap: 0 40px; align-items: end; padding: 8px 0 20px; }
.mast-id { min-width: 0; }
.mast-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mast-h { margin: 0; font-size: 30px; font-weight: 700; color: #0f172a; line-height: 1.15;
           letter-spacing: -0.028em; }
.mast-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px;
           font-size: 13px; color: #64748b; margin-top: 8px; }
.mast-edit { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
           color: #475569; text-decoration: none; cursor: pointer; padding: 6px 12px;
           border: 1px solid #cbd5e1; border-radius: 9px; background: #ffffff; white-space: nowrap; }
.mast-edit:hover { border-color: #94a3b8; color: #0f172a; background: #f7f9fc; }
.mast-edit svg { width: 13px; height: 13px; }
/* the figures sit as a row on the right, each measured so they stay a group */
.mast-figs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 150px); gap: 0 26px; }
.mfig { min-width: 0; }
.mfig-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; }
.mfig-v { font-size: 34px; font-weight: 700; color: #0f172a; letter-spacing: -.032em; line-height: 1;
           margin-top: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mfig-v span { font-size: 13px; font-weight: 600; color: #64748b; margin-left: 4px; letter-spacing: 0; }
.mfig-c { font-size: 11.5px; color: #64748b; margin-top: 6px; }
/* Between about 1250 and 1500 there is room for both columns, but not at
   full size: the figures step down instead of overlapping each other. */

/* ── Modals ────────────────────────────────────────────────────────────────
   Used by the stability explanation and the notes editor. Both were inline
   disclosures that pushed the whole card, and everything below it, down the
   page when opened. Declared here, in the early block, because the summary
   stylesheet is emitted long after the notes card. */
/* A modal dialog is centred by the user agent stylesheet, via margin auto on
   dialog:modal. A global margin reset in the site stylesheet cancels that, so
   the dialog fell to the top left. Centred explicitly here rather than relying
   on a UA default that something else has already overridden.
   NB: this block is inside a double-quoted Perl string, so no double quotes. */
.mdl { border: 0; padding: 0; background: transparent;
  position: fixed; inset: 0; margin: auto; width: fit-content;
  max-width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: auto; }
.mdl-wide { width: fit-content; }
.mdl::backdrop { background: rgba(15,23,42,0.45); }
.mdl-card { background: #ffffff; border-radius: 14px; padding: 22px 24px 20px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.22); font-family: Outfit, sans-serif; }
.mdl-head { display: flex; align-items: flex-start; gap: 16px; }
.mdl-title { margin: 0; font-size: 17px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.mdl-x { margin-left: auto; flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: #f1f5f9; color: #64748b; font-size: 13px; cursor: pointer; line-height: 1; }
.mdl-x:hover { background: #e2e8f0; color: #0f172a; }
.mdl-lead { margin: 12px 0 16px; font-size: 13px; color: #475569; line-height: 1.6; }
.mdl-rows { display: flex; flex-direction: column; }
/* Swatch, name and weight on one line, the sentence under it - so the four
   contributions read as a list of four things and not as a paragraph. */
.mdl-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 2px 10px;
  align-items: baseline; padding: 11px 0; border-top: 1px solid #f1f5f9; }
.mdl-sw { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.mdl-k { font-size: 13px; font-weight: 600; color: #0f172a; }
.mdl-w { font-size: 12px; font-weight: 600; color: #64748b; font-variant-numeric: tabular-nums; }
.mdl-d { grid-column: 2 / -1; font-size: 12.5px; color: #64748b; line-height: 1.5; }
.mdl-tail { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #f1f5f9;
  font-size: 12.5px; color: #64748b; line-height: 1.6; }
/* Notes editor: wider, and its buttons sit in a row under the editor. */
.mdl-wide { max-width: min(880px, calc(100vw - 32px)); }
.mdl-body { margin-top: 14px; }
.mdl-body .uc-textarea { min-height: 260px; }
.mdl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.mdl-note { font-size: 12px; color: #64748b; }
/* ── Notes: public and private ─────────────────────────────────────────────
   The dialog holds both, switched by a tab, saved by one Save. */
/* the private counterpart of .mdl-warn: a fact, stated calmly */
.mdl-safe { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0;
  padding: 11px 13px; border-radius: 10px; background: #f1f5f9;
  border: 1px solid #e2e8f0; font-size: 12.5px; line-height: 1.55; color: #475569; }
.mdl-safe span:first-child { flex: none; font-size: 13px; line-height: 1.35; }

/* The panel toggle. Radios, so switching costs no script. The public notes
   are the div before .nsw, so they are hidden by a sibling selector. */
/* Two bodies of text, so tabs on a rule - not pills on a grey track. The
   selected one carries the ink and a 2px underline; the rest is nothing. The
   real signal that notes are private is on the CONTENT, below, not here. */
.nsw-bar, .ntabs { display: flex !important; gap: 26px !important; padding: 0 !important;
  margin: 0 0 20px !important; background: none !important; border: 0 !important;
  border-bottom: 1px solid #e4e9f2 !important; border-radius: 0 !important;
  box-shadow: none !important; }
.ntabs { margin: 18px 0 0 !important; }
.nsw-b, .ntab { font-family: Outfit, sans-serif !important; font-size: 14px !important;
  font-weight: 600 !important; color: #8b97ad !important; background: none !important;
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  padding: 0 1px 11px !important; margin-bottom: -1px !important; cursor: pointer !important;
  box-shadow: none !important; display: inline-flex !important; align-items: center;
  gap: 8px; line-height: 1.2; letter-spacing: -0.005em; }
.nsw-b:hover, .ntab:hover { color: #3c4a63 !important; background: none !important; }
.nsw-b.is-on, .ntab.is-on { color: #1a2233 !important; background: none !important;
  border-bottom-color: #1a2233 !important; }
.nsw-i { width: 14px; height: 14px; flex: none; opacity: 0.85; }

/* Private content reads as private without the tab having to shout: a tinted
   panel with a rule down its left edge. */
#nswp-priv { background: #f7f9fc; border-left: 3px solid #c9d3f7; border-radius: 0 12px 12px 0;
  padding: 18px 22px 22px; }
/* the panel's own padding is zeroed for the media cards, so the actions row
   sets its own space rather than inheriting any */
.nsw .uc-actions { margin: 22px 0 0 !important; padding: 0 !important; }
#nswp-pub { padding-bottom: 2px; }
.nsw-note { font-size: 12.5px; color: #64748b; margin: 0 0 14px; max-width: 70ch; }
.nsw .uc-notes { margin: 0; }
.nsw .uc-empty { margin: 0; }
.nsw { margin-top: 2px; }
/* Said before typing rather than after saving. Amber, not red: it is a fact
   about where the text goes, not an error. */
.mdl-warn { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0;
  padding: 11px 13px; border-radius: 10px; background: #fff6e0;
  border: 1px solid #f5dfa8; font-size: 12.5px; line-height: 1.55; color: #8a5a00; }
.mdl-warn span:first-child { flex: none; font-size: 13px; line-height: 1.35; }
/* TinyMCE's own chrome, brought in line with the card */
.mdl-body .tox-tinymce { border: 1px solid #cbd5e1; border-radius: 9px; }
.mdl-body .tox .tox-toolbar__primary { background: #f8fafc; }
/* ── The four user panels: notes, video, images, linked rocket ─────────────
   One shell for all four - same body padding, same empty state, same action
   row - so they read as a set rather than four one-offs. */
.mbox-count { font-weight: 500; font-size: 12px; color: #64748b; }
.uc { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.uc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-btn { display: inline-flex; align-items: center; gap: 6px; font-family: Outfit, sans-serif;
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px;
  border: 1px solid #cbd5e1; background: #ffffff; color: #475569; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.uc-btn:hover { border-color: #94a3b8; color: #0f172a; background: #f8fafc; }
.uc-btn.is-primary { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.uc-btn.is-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
.uc-btn.is-danger { color: #b91c1c; border-color: #fecaca; }
.uc-btn.is-danger:hover { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
/* Empty state: a dashed well holding the reason, so an empty panel looks
   deliberately empty instead of broken. The action sits below it, in the same
   row every panel uses. */
.uc-empty { display: flex; align-items: center; padding: 18px; border: 1px dashed #cbd5e1;
  border-radius: 10px; background: #f8fafc; }
.uc-empty-t { font-size: 13px; color: #64748b; }
.uc-hint { font-size: 12px; color: #64748b; }
.uc-notes { font-size: 13.5px; line-height: 1.6; color: #334155; }
.uc-notes p { margin: 0 0 9px; }
.uc-notes p:last-child { margin-bottom: 0; }
.uc-embed iframe { display: block; width: 100%; aspect-ratio: 16/9; height: auto;
  border: 0; border-radius: 10px; }
/* Edit forms: they were raw browser defaults - a bare label, a fixed-size
   textarea and a grey submit button - inside otherwise styled cards. */
.uc-form { border-top: 1px solid #f1f5f9; padding-top: 14px; }
.uc-fform { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.uc-flabel { font-size: 12px; font-weight: 600; color: #475569; }
.uc-input, .uc-textarea { width: 100%; box-sizing: border-box; font-family: Outfit, sans-serif;
  font-size: 13.5px; color: #0f172a; background: #ffffff; border: 1px solid #cbd5e1;
  border-radius: 9px; padding: 9px 11px; }
.uc-textarea { line-height: 1.6; resize: vertical; min-height: 120px; }
.uc-input:focus, .uc-textarea:focus { outline: none; border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.uc-input::placeholder { color: #94a3b8; }

.mbox-header img {
  height: 22px;
  opacity: 0.7;
}

.mbox-header .mhi {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #475569;
}

/* ── Tooltip z-index fix ── */
.tt .tttext {
  z-index: 9999 !important;
}

/* ── Info icon for settings tooltips ── */
.sr-k .tt {
  flex-shrink: 0;
  cursor: help;
}
.sr-k .tt .info-dot,
.sr-out .sr-k .tt .info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  transition: all 0.2s ease;
}
.sr-k .tt:hover .info-dot { background: #2563eb; color: #fff; }
.sr-out .sr-k .tt:hover .info-dot { background: #ea580c; color: #fff; }

/* ── Inline info icon for flight-stat values (e.g. website-detected ejection) ── */
.fs-value .tt { display:inline-flex; cursor:help; margin-left:6px; vertical-align:middle; position:relative; }
.fs-value .tt .info-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,0.08); color:#64748b;
  font-size:10px; font-weight:700; font-style:normal; line-height:1;
  transition:all 0.2s ease;
}
.fs-value .tt:hover .info-dot { background:#2563eb; color:#fff; }

/* ── Device info action links ── */
.dev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}
.dev-action-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 18px;
  transition: all 0.2s ease;
}
.dev-action-link:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
.dev-action-link .da-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
}
.dev-action-link .da-arrow {
  color: #94a3b8;
  transition: transform 0.2s ease;
}
.dev-action-link:hover .da-arrow {
  transform: translateX(2px);
  color: #2563eb;
}

.grid-item {
  margin-bottom: 16px;
}

/* ── Chart wrapper ── */
.chart-wrap {
  /* the sheet around it is the card now, so this is a plain container */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 0 0 0;
  box-shadow: none;
  margin-bottom: 0;
  /* overflow-x:hidden on its own forces the OTHER axis to compute as auto,
     which is where the phantom vertical scrollbar came from — nothing was
     actually overflowing downward. */
  overflow: hidden;
  max-width: 100%;
}

/* ── Chart toolbar strip ── */
/* Eight floating white blocks on a white sheet read as eight cards. They are
   groups on one strip now: ruled off from the chart, aligned left with the
   rest of the page, each group named in the same small caps the panels use
   and divided by a hairline. Download PNG is the one primary. */
.chart-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  justify-content: flex-start;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #e9eef4;
}
.chart-toolbar .tb-block {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: none;
}
.chart-toolbar .tb-block + .tb-block { border-left: 1px solid #e9eef4; padding-left: 20px; }
.chart-toolbar .tb-label {
  display: flex;
  align-items: center;
  background: transparent;
  color: #64748b;
  font: 700 10.5px/1 Outfit, sans-serif;
  padding: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  border-right: none;
}
.chart-toolbar .tb-body {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #475569;
}
.chart-toolbar .tb-body a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}
.chart-toolbar .tb-body a:hover {
  text-decoration: underline;
}
/* Checkboxes render as toggle switches — markup unchanged */
/* Event toggles are pills now, matching the series pills they sit next to:
   two toggle idioms in one toolbar was the inconsistency. The checkbox becomes
   the pill's dot, exactly like .mcl-pill's .mcl-dot. */
.chart-toolbar .tb-body input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  outline: none;
  margin: 0;
  transition: background 0.15s ease;
  flex: none;
}
.chart-toolbar .tb-body input[type=checkbox]:checked {
  background: #2563eb;
}
.chart-toolbar .tb-body input[type=checkbox]:focus-visible {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}
/* the same button as every panel below uses: 12.5/600, 9px radius */
.chart-toolbar .tb-body input[type=button],
.chart-toolbar .tb-body button {
  font: 600 12.5px/1 Outfit, sans-serif;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
  color: #475569;
  transition: all 0.15s ease;
}
.chart-toolbar .tb-body input[type=button]:hover,
.chart-toolbar .tb-body button:hover {
  background: #f7f9fc;
  border-color: #94a3b8;
  color: #0f172a;
}
/* saving the picture is what the strip is mostly for */
.chart-toolbar .tb--image input[type=button] { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.chart-toolbar .tb--image input[type=button]:hover { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
.chart-toolbar .tb-body input[type=text],
.chart-toolbar .tb-body input[type=number] {
  font: 500 12.5px/1 Outfit, sans-serif;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 8px 10px;
  color: #0f172a;
  outline: none;
  max-width: 90px;
}
.chart-toolbar .tb-body input[type=text]:focus,
.chart-toolbar .tb-body input[type=number]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.chart-toolbar .tb-body input[type=submit] {
  font: 600 12.5px/1 Outfit, sans-serif;
  border: 1px solid #2563eb;
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}

/* ── Event checkboxes in toolbar ── */
/* Metrics copied verbatim from .mcl-pill, so the two pill sets are
   indistinguishable in size, weight and radius. They were 6px/13px against
   .mcl-pill's 3.5px/12px, which is why they looked oversized beside it. */
.chart-toolbar .evt-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 0;
  border: 1px solid #e2e8f0;
  background: #fbfcfe;
  color: #334155;
  border-radius: 999px;
  padding: 3.5px 12px;
  font: 500 12px/1.4 Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.chart-toolbar .evt-group:hover { border-color: #94a3b8; }
.chart-toolbar .evt-group:has(input:checked) { color: #111827; font-weight: 600; }

/* Each event takes the colour it actually draws on the chart, rather than every
   pill being the same blue. Keyed off the checkbox name, so no markup change.
   Read off the rendered chart: apogee red, velocities indigo, ejection green,
   landing violet, burnout the blue dashed reference, lockouts the dark red wash
   (rgba(50,0,0,0.07)). Output/Rules draws green like ejection, so it takes
   emerald to stay distinguishable -- say the word if you would rather it match. */
.chart-toolbar .evt-group input[name=show_apogee]:checked { background: #dc2626; }
.chart-toolbar .evt-group:has(input[name=show_apogee]:checked) { border-color: #dc2626; background: rgba(220,38,38,0.08); }
.chart-toolbar .evt-group input[name=show_burn]:checked { background: #2563eb; }
.chart-toolbar .evt-group:has(input[name=show_burn]:checked) { border-color: #2563eb; background: rgba(37,99,235,0.08); }
.chart-toolbar .evt-group input[name=show_landing]:checked { background: #6d28d9; }
.chart-toolbar .evt-group:has(input[name=show_landing]:checked) { border-color: #6d28d9; background: rgba(109,40,217,0.08); }
.chart-toolbar .evt-group input[name=show_output]:checked { background: #059669; }
.chart-toolbar .evt-group:has(input[name=show_output]:checked) { border-color: #059669; background: rgba(5,150,105,0.08); }
.chart-toolbar .evt-group input[name=show_lock]:checked { background: #7f1d1d; }
.chart-toolbar .evt-group:has(input[name=show_lock]:checked) { border-color: #7f1d1d; background: rgba(127,29,29,0.08); }
.chart-toolbar .evt-group input[name=show_descentvel]:checked { background: #4f46e5; }
.chart-toolbar .evt-group:has(input[name=show_descentvel]:checked) { border-color: #4f46e5; background: rgba(79,70,229,0.08); }
.chart-toolbar .evt-group input[name=show_ejection]:checked { background: #16a34a; }
.chart-toolbar .evt-group:has(input[name=show_ejection]:checked) { border-color: #16a34a; background: rgba(22,163,74,0.08); }
.chart-toolbar .evt-group input[name=show_stagefind]:checked { background: #7c3aed; }
.chart-toolbar .evt-group:has(input[name=show_stagefind]:checked) { border-color: #7c3aed; background: rgba(124,58,237,0.08); }

/* ── Flight summary section tabs & data rows ── */
details[open] .stab-chevron { transform: rotate(180deg); }
details summary::-webkit-details-marker { display: none; }
.fs-tab {
  font-size: 11px;
  color: #475569;
  display: block;
  margin: 18px 8px 3px 8px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fs-group {
  margin: 0 8px 2px 8px;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}
/* One continuous hairline per row, drawn on the clear div that already
   follows every label/value pair. Done here rather than as a border-bottom
   on the two floats, because a value that wraps to a second line would put
   the two halves of the rule at different heights. */
.fs-group > div[style*='clear'],
.fs-group .fs-clear {
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #f1f5f9;
}
.fs-group > div[style*='clear']:last-child,
.fs-group .fs-clear:last-child { border-top: 0; }
.fs-label {
  width: 165px;
  text-align: left;
  padding: 9px 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
  float: left;
  margin: 0;
  box-sizing: border-box;
}
.fs-value {
  text-align: right;
  padding: 9px 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  float: right;
  width: calc(100% - 165px);
  margin: 0;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

/* ── Settings rows ────────────────────────────────────────────────────────
   Every settings panel used to emit each pair as two floated chips - a grey
   190px pill and a value pill - inside a wrapper carrying display:table and
   margin:0 auto, which is why those panels sat as a narrow centred column of
   chips in the middle of a sheet ten times that wide. The markup is now a
   list of rows: label left, value right, one hairline each, no floats and
   nothing to clear. .sr-out is the output-settings variant. */
.sr-list { display: grid; gap: 0; max-width: 720px; }
.sr { display: flex; align-items: baseline; justify-content: space-between; gap: 28px;
      padding: 10px 0; border-top: 1px solid #e9eef4; }
.sr:first-child { border-top: 0; }
.sr-k { display: flex; align-items: center; gap: 8px; min-width: 0;
      font-size: 12.5px; font-weight: 400; color: #64748b; }
.sr-v { flex: none; font-size: 13px; font-weight: 600; color: #0f172a;
      font-variant-numeric: tabular-nums; text-align: right; }
.sr-out .sr-k { color: #9a3412; }
.sr-k .tt img { opacity: 0.5; width: 20px !important; }

/* ── Breadcrumb bar ── */
.bc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  font-size: 14px;
}
.bc-bar a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #64748b;
  padding: 2px 0;
  transition: color 0.2s ease;
}
.bc-bar a:hover {
  color: #0f172a;
}
/* The page you are already on is the one thing that does not need emphasis:
   ink weight, not a filled button. */
.bc-bar a.bc-active {
  color: #0f172a;
  font-weight: 600;
  cursor: default;
}
/* Separator drawn as a rotated corner, so the path needs no extra markup. */
.bc-bar a + a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 11px;
  border-top: 1.5px solid #cbd5e1;
  border-right: 1.5px solid #cbd5e1;
  transform: rotate(45deg);
  flex: none;
}

/* ── Sheets ────────────────────────────────────────────────────────────────
   The title area (.mc-top) sits on the page ground; the tab content and the
   comments are the white sheets. */
.mc-top { width: 95%; margin: 0 auto; box-sizing: border-box; }
.mc-sheet { width: 95%; margin: 8px auto 0 auto; box-sizing: border-box; background: #ffffff;
  border: 1px solid #e9eef4; border-radius: 16px; padding: 4px 30px 20px; }

/* ── Unit selector bar ── */
/* No panel. A grey box floating up there was another box-in-a-box, and the
   labels were competing with their own values. Labels recede to small caps;
   the select is the only thing carrying weight. */
.unit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
  background: none;
  border: 0;
  padding: 6px 0;
  font: 700 10.5px/1 Outfit, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #64748b;
}
/* Segmented unit control. Track is grey, the selected segment lifts to white,
   matching the chip vocabulary used everywhere else on the page. */
.useg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 2px;
  margin-right: 14px;
}
.useg label {
  display: inline-flex;
  position: relative;
  cursor: pointer;
}
.useg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.useg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 5px 10px;
  font: 500 12px/1 Outfit, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #64748b;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.useg label:hover span { color: #0f172a; }
.useg input:checked + span {
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  /* the hairline is a shadow, not a border, so the segment cannot change size
     when it becomes the selected one */
  box-shadow: 0 0 0 1px #dde5ee, 0 1px 2px rgba(15,23,42,0.05);
}
.useg input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}
/* ── Units button ──
   One button showing the current units; clicking it slides the selectors out
   to its left. .js-fold is set by UNITFOLDJS, so without the script the
   selectors show as before and the button stays hidden. visibility keeps the
   folded radios out of the tab order. .is-shown lifts the clip once the slide
   has finished, so the label tooltips are not cut off. */
.unit-fold { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.unit-btn { display: none; }
.unit-bar.js-fold .unit-fold { flex-wrap: nowrap; overflow: hidden; max-width: 0; opacity: 0; visibility: hidden;
  transition: max-width 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s; }
.unit-bar.js-fold.is-open .unit-fold { max-width: 760px; opacity: 1; visibility: visible;
  transition: max-width 0.3s ease, opacity 0.2s ease 0.05s, visibility 0s; }
.unit-bar.js-fold.is-shown .unit-fold { overflow: visible; }
.unit-bar.js-fold .unit-btn { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px;
  background: #ffffff; border: 1px solid #dde5ee; border-radius: 10px; cursor: pointer;
  font: 600 12.5px/1.2 Outfit, sans-serif; letter-spacing: 0; text-transform: none; color: #334155;
  white-space: nowrap; transition: border-color 0.15s; }
.unit-btn:hover { border-color: #94a3b8; }
.unit-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.unit-btn-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; }
.unit-btn-car { font-size: 11px; color: #64748b; }
.unit-btn-x { display: none; font-size: 12px; color: #64748b; }
.unit-bar.is-open .unit-btn-v, .unit-bar.is-open .unit-btn-car { display: none; }
.unit-bar.is-open .unit-btn-x { display: inline; }

/* kept for any other page still rendering .unit-bar with <select>s */
.unit-bar select {
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  margin-right: 9px;
  transition: border-color 0.15s ease;
}
.unit-bar select:hover {
  border-color: #94a3b8;
}
.unit-bar select:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
/* As the window narrows the unit bar stops fighting the breadcrumbs for one
   row: it takes its own full-width line and shrinks its segments, so nothing
   clips off the right edge. */

.btn-modern {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;

  background: linear-gradient(#a1c4fd, #c2e9fb);
  backdrop-filter: blur(5px); /* Glass effect */
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid #606090;
  border-radius: 999px; /* Pill shape */

  color: #000000;
  font-weight: 600;
  font-family: 'Inter';
  letter-spacing: 0.5px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  font-size:16px;

}

.btn-modern::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: all 0.5s ease;
}

.btn-modern:hover {
  background: linear-gradient(#a1c4ed, #c2e9eb);
  box-shadow: 0 12px 32px rgba(15,23,42,0.14);
  transform: translateY(-2px);
}

.btn-modern:hover::after {
  left: 100%;
}

.btn-modern:active {
  transform: translateY(0);
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.btn-modern:hover .arrow-icon {
  transform: translateX(5px);
}

/* ── Mobile responsive fixes ── */

/* ── Chart toolbar ? tooltip ── */
.tb-label .tb-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.07);
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
  transition: all 0.15s ease;
}
.tb-label .tb-tip:hover { background: #e2e8f0; color: #334155; }
#tb-tooltip-popup {
  display: none;
  position: fixed;
  width: 280px;
  padding: 10px 14px;
  background: #ffffff;
  color: #334155;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  z-index: 99999;
  pointer-events: none;
  text-align: left;
  font-family: Outfit, sans-serif;
}

/* Device thumbnail hover-zoom (flight page) */
.hwzoom { position:relative; display:inline-block; }
.hwzoom .hwzoom-pop {
  position:absolute; left:0; top:50%; transform:translateY(-50%) scale(0.96);
  z-index:60; background:#ffffff; border:1px solid #e2e8f0; border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,0.14); padding:12px; width:260px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.15s, transform 0.15s;
}
.hwzoom:hover .hwzoom-pop { opacity:1; visibility:visible; transform:translateY(-50%) scale(1); }
.hwzoom .hwzoom-pop img { width:220px; max-width:220px; display:block; margin:0 auto 8px; border-radius:8px; }
.hwzoom .hwzoom-meta { font-size:13px; color:#334155; text-align:center; line-height:1.5; }
.hwzoom .hwzoom-meta b { color:#0f172a; }

/* ════ MCRANGEUI — was cloud_page_flights.cgi line 12168 ════
 ── Time-range slider under the chart ─────────────────────────────────────────
 Same control as the Jupiter viewer. Blue start handle, red end handle, an editable seconds box
 at each end, and a Reset. Dragging a handle or editing a box narrows the chart x-axis to that
 window. The track is shaded as a miniature flight profile: fill = altitude, top/bottom stripes
 = acceleration. Nothing here changes how the chart is built; the behaviour block further down
 only sets scales.x.min/max on the existing myChart. */
.jt-range { display:flex; align-items:center; gap:12px; margin:44px 8px 0; }
/* One field each end, with the unit sitting inside it. The spinners are off:
   the handles are the coarse control and these are for typing an exact time.
   The blue/red border tint went with them - the handles carry that. */
.jt-range-box { width:82px; box-sizing:border-box; font:600 12.5px/1 Outfit,sans-serif;
                text-align:left; font-variant-numeric:tabular-nums; background:#ffffff;
                border:1px solid #cbd5e1; border-radius:9px; padding:9px 24px 9px 11px; color:#0f172a;
                appearance:textfield; -moz-appearance:textfield; }
.jt-range-box::-webkit-outer-spin-button,
.jt-range-box::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.jt-range-box:hover { border-color:#94a3b8; }
.jt-range-box:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* The box reserves 24px on its right for this, so the unit belongs inside
   it, vertically centred and legible - it was 11px and riding the border. */
.jt-range-unit { align-self:center; margin-left:-20px; width:16px;
           font:600 12px/1 Outfit,sans-serif; color:#67748b; pointer-events:none; }
.jt-track { overflow:visible; position:relative; flex:1; height:34px; }
.jt-track.jt-hz { height:56px; }   /* extra headroom only when there are zoom markers */
/* the bracket-over-the-track marker is gone: the buttons sit in a row above,
   and each window is shown by a tinted band ON the track instead */
.jt-zoom { display:none; }
/* the pale window bands are gone: they read as a rendering fault rather than
   as information, and the event bar already says where the point is */
.jt-poi-tick { display:none; }
.jt-poi-bar { position:absolute; top:50%; height:30px; width:2px; margin-left:-1px;
           transform:translateY(-50%); opacity:0.85; pointer-events:none; }
/* the same down-pointing marker as the chart above, so the eye connects the
   two without being told */
.jt-poi-cap { position:absolute; top:50%; margin-top:-22px; margin-left:-5px;
           width:0; height:0; border-left:5px solid transparent;
           border-right:5px solid transparent; border-top:7px solid #94a3b8;
           pointer-events:none; }
.jt-spark { position:absolute; inset:0; width:100%; height:100%;
           display:block; pointer-events:none; }
.jt-poi-tri { display:inline-block; width:0; height:0; margin-right:6px;
           border-left:4px solid transparent; border-right:4px solid transparent;
           border-top:6px solid #94a3b8; vertical-align:middle; }
/* pushed to the right edge, where it lines up with the chart's own Reset */
.jt-zoi { display:inline-flex; align-items:center; gap:3px; pointer-events:auto; }
/* A saved zoom states both dimensions: the sketch shows where the window sits
   in the flight, the name is the owner's label, the figures are the span. */
/* Bigger and bolder than the built-in event chips: these are the flight's
   own views, and at 11px they were the quietest thing in a busy row. */
.jt-zoi .jt-zoom-btn { display:inline-flex; align-items:center; gap:8px;
           border-color:#c9d3f7; }
.jt-zoi .jt-zoom-btn:hover { border-color:#3f5bd9; background:#f7f9ff; }
.jt-zoi-s { width:26px; height:18px; flex:none; }
.jt-zoi-s rect { fill:#ffffff; stroke:#d7dceb; stroke-width:1; }
.jt-zoi-s rect.w { fill:#3f5bd9; fill-opacity:0.18; stroke:#3f5bd9; stroke-width:0.8; }
.jt-zoi .jt-zoom-btn b { font-weight:700; font-size:12.5px; color:#1a2233; letter-spacing:0; }
/* The note, the span and any series switch: a proper card on hover rather
   than a browser tooltip, so it can be read and styled like the rest. */
.jt-zoi { position:relative; }
.jt-zoi-card { display:none; position:absolute; z-index:1200; bottom:calc(100% + 9px); left:0;
           width:260px; box-sizing:border-box; text-align:left; background:#ffffff;
           border:1px solid #e5e9f2; border-radius:12px; padding:11px 13px;
           box-shadow:0 12px 32px rgba(15,23,42,0.16); white-space:normal; }
.jt-zoi:hover .jt-zoi-card { display:block; }
.jt-zoi-card b { display:block; font:700 12.5px/1.3 Outfit, sans-serif; color:#1a2233;
           letter-spacing:0; }
.jt-zoi-note { display:block; margin-top:4px; font:400 12px/1.55 Outfit, sans-serif;
           color:#475569; }
.jt-zoi-span { display:block; margin-top:8px; padding-top:8px; border-top:1px solid #f0f3f8;
           font:500 11.5px/1.4 Outfit, sans-serif; color:#67748b;
           font-variant-numeric:tabular-nums; }
.jt-zoi-sets { display:block; margin-top:4px; font:400 11.5px/1.45 Outfit, sans-serif;
           color:#8b97ad; }
.jt-zoi-sep { display:inline-block; width:1px; height:20px; background:#e2e8f2; margin:0 4px; }
/* Each set of zoom chips is its own flex box inside the row, so when the row
   runs out of width the two sets break apart instead of chips from one
   drifting into the middle of the other. */
.jt-poi-set { display:flex; align-items:center; flex-wrap:wrap; gap:7px; pointer-events:none; }
.jt-poi-mine { border-left:1px solid #e2e8f2; padding-left:11px; }
@media (max-width: 1000px) { .jt-poi-mine { border-left:0; padding-left:0; } }
/* ── Zoom to event: the heads-up control on the plot ──────────────────────
   Three states in one place, top right of the chart: resting (a button that
   says what it does), open (the tour of built-in events and this flight's
   own zooms, in time order), and applied (the caption for the view you are
   in, with a stepper and a close that puts the chart back). */
/* Top right of the plot, inset past the right-hand axis: its tick labels and
   rotated title take about 100px, and the panel was sitting on them. The
   children are right-aligned to the same edge, so the button rests in the
   empty band above the trace and the wider card and list hang to the left of
   it rather than pushing further out over the axis. */
.zh { position:absolute; top:6px; right:104px; z-index:46; width:auto;
      display:flex; flex-direction:column; align-items:flex-end;
      font-family:Outfit, sans-serif; }
@media (max-width: 1400px) { .zh { right:84px; } }
@media (max-width: 1100px) { .zh { right:64px; } }
.zh-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
      background:rgba(255,255,255,0.96); border:1px solid #d7dceb; border-radius:10px;
      padding:8px 12px; font:700 12.5px/1 Outfit, sans-serif; color:#1a2233;
      box-shadow:0 2px 8px rgba(15,23,42,0.08); }
.zh-btn:hover { border-color:#94a3b8; }
.zh-btn svg { width:14px; height:14px; color:#67748b; flex:none; }
.zh-btn i { font-style:normal; font-size:10px; color:#8b97ad; }
.zh.is-open .zh-btn { background:#1a2233; border-color:#1a2233; color:#ffffff; }
.zh.is-open .zh-btn svg { color:#aab6d8; }
.zh.is-open .zh-btn i { color:#aab6d8; }
.zh-list { display:none; width:244px; margin-top:6px; box-sizing:border-box;
      background:#ffffff; border:1px solid #e2e8f2; border-radius:12px; padding:6px;
      box-shadow:0 10px 26px rgba(15,23,42,0.13); max-height:280px; overflow:auto; }
.zh.is-open .zh-list { display:block; }
.zh-row { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px;
      cursor:pointer; background:none; border:0; width:100%; text-align:left;
      font:500 12.5px/1.3 Outfit, sans-serif; color:#1a2233; }
.zh-row:hover { background:#f7f9fc; }
.zh-row.is-at { background:#f4f6fb; font-weight:700; }
.zh-row span.d { width:9px; height:9px; border-radius:999px; flex:none; }
.zh-row.is-saved span.d { border-radius:3px; }
.zh-row b { flex:1; min-width:0; font-weight:inherit; overflow:hidden;
      text-overflow:ellipsis; white-space:nowrap; }
.zh-row i { font-style:normal; font-size:11px; color:#67748b; font-variant-numeric:tabular-nums; }
/* the applied caption */
.zh-card { display:none; width:258px; box-sizing:border-box; background:#ffffff;
      border:1px solid #e2e8f2; border-radius:12px; padding:11px 12px;
      box-shadow:0 10px 26px rgba(15,23,42,0.13); }
.zh.is-at .zh-card { display:block; }
.zh.is-at .zh-btn { display:none; }
.zh.is-at.is-open .zh-btn { display:inline-flex; }
.zh-card-h { display:flex; align-items:center; gap:8px; }
.zh-card-h svg.s { width:24px; height:17px; flex:none; }
.zh-card-h svg.s rect { fill:#ffffff; stroke:#d7dceb; stroke-width:1; }
.zh-card-h svg.s rect.w { fill:#3f5bd9; fill-opacity:0.18; stroke:#3f5bd9; stroke-width:0.8; }
.zh-card-h b { flex:1; min-width:0; font:700 13px/1.3 Outfit, sans-serif; color:#1a2233;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zh-mini { display:inline-flex; align-items:center; justify-content:center; width:20px;
      height:20px; border-radius:7px; border:1px solid #e2e8f2; background:#ffffff;
      color:#475569; font-size:10px; cursor:pointer; }
.zh-x { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
      border-radius:999px; border:0; background:#f1f4f9; color:#475569; font-size:11px;
      cursor:pointer; }
.zh-x:hover { background:#fecaca; color:#b91c1c; }
.zh-note { font:400 12px/1.5 Outfit, sans-serif; color:#475569; margin-top:6px; }
.zh-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-top:1px solid #f0f3f8; margin-top:9px; padding-top:8px; }
.zh-span { font:500 11.5px/1 Outfit, sans-serif; color:#67748b; font-variant-numeric:tabular-nums; }
.zh-nav { display:inline-flex; align-items:center; gap:4px; }
.zh-nav button { display:inline-flex; align-items:center; justify-content:center; width:23px;
      height:23px; border-radius:8px; border:1px solid #e2e8f2; background:#ffffff;
      color:#475569; font-size:12px; cursor:pointer; }
.zh-nav button:hover { border-color:#94a3b8; }
.zh-nav span { font:600 11px/1 Outfit, sans-serif; color:#67748b; }
@media (max-width: 700px) { .zh { display:none; } }
/* ── Zooms of interest ─────────────────────────────────────────────────────
   The owner's saved views, sitting after the built-in ZOOM TO chips so they
   read as this flight's own, with a divider before them. Each carries the
   owner's note as its tooltip and, for the owner, a cross to remove it. */
.jt-zoom-user { border-color:#d7dceb !important; color:#1a2233 !important;
           background:#f4f6fb !important; }
.jt-zoom-user:hover { border-color:#c9d3f7 !important; background:#eef1fe !important; }
.jt-zoom-x { display:inline-flex; align-items:center; justify-content:center;
           width:19px; height:19px; border-radius:999px; text-decoration:none;
           background:#e6ebf4; color:#475569 !important; font-size:9.5px; line-height:1;
           pointer-events:auto; }
.jt-zoom-x:hover { background:#fecaca; color:#b91c1c; }
.jt-zoom-add { border-style:dashed !important; border-color:#c9d3f7 !important;
           color:#3f5bd9 !important; font-weight:700 !important; font-size:12.5px !important;
           padding:5px 13px !important; }
.jt-zoom-add:hover { background:#f4f6fb !important; }
.jt-zoom-full { font:400 11px/1 Outfit, sans-serif; color:#8b97ad; pointer-events:none; }
.jt-poi .jt-zoom-user, .jt-poi .jt-zoom-add, .jt-poi .jt-zoom-full { pointer-events:auto; }
/* the dialog */
.zoi-card { width:520px; max-width:100%; }
.zoi-shot { border:1px solid #e9eef4; border-radius:12px; padding:8px; margin:4px 0 10px;
           background:#fbfcfe; }
.zoi-shot canvas { width:100%; height:auto; display:block; }
.zoi-recap { font:400 11.5px/1.55 Outfit, sans-serif; color:#8b97ad; margin:0 0 16px; }
.zoi-fields { display:flex; gap:12px; margin-bottom:14px; }
.zoi-f { display:block; flex:1; min-width:0; }
.zoi-f--name { flex:0 0 190px; }
.zoi-f > span { display:flex; align-items:baseline; gap:6px;
           font:400 11.5px/1 Outfit, sans-serif; color:#64748b; }
.zoi-f > span b { font-weight:400; color:#8b97ad; }
.zoi-f > span i { margin-left:auto; font-style:normal; font-size:10.5px; color:#8b97ad;
           font-variant-numeric:tabular-nums; }
.zoi-f input, .zoi-f textarea { width:100%; box-sizing:border-box; margin-top:5px;
           font:600 13px/1.45 Outfit, sans-serif; color:#1a2233; background:#ffffff;
           border:1px solid #d7dceb; border-radius:10px; padding:9px 11px; resize:vertical; }
.zoi-f textarea { font-weight:400; color:#475569; }
.zoi-f input:focus, .zoi-f textarea:focus { outline:0; border-color:#3f5bd9; }
.zoi-f em { display:block; margin-top:5px; font-style:normal; font-size:10.5px; color:#8b97ad; }
.zoi-sets { display:flex; align-items:flex-start; gap:10px; cursor:pointer;
           background:#f7f9fc; border-radius:11px; padding:12px 14px; margin-bottom:18px; }
.zoi-sets input { margin:2px 0 0; width:16px; height:16px; accent-color:#3f5bd9; flex:none; }
.zoi-sets b { display:block; font:600 12.5px/1 Outfit, sans-serif; color:#1a2233; }
.zoi-sets i { display:block; margin-top:3px; font-style:normal;
           font:400 11.5px/1.5 Outfit, sans-serif; color:#67748b; }
.zoi-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
           border-top:1px solid #eef1f7; padding-top:16px; }
.zoi-count { font:400 11.5px/1 Outfit, sans-serif; color:#8b97ad; }
.zoi-btns { display:flex; gap:8px; }

/* Anchored by its bottom, so when the chips wrap the strip grows upward into
   clear space instead of overflowing the 34px track and being clipped. */
/* In normal flow, above the track, NOT absolutely positioned over it. It was
   anchored by its bottom edge at calc(100% + 12px), so a second line of chips
   could only grow upward, straight over the chart's own x axis. In flow it
   takes the height it needs and the track moves down instead. The comment
   further up records the first version of this bug: the strip lives inside a
   34px track and anything that wrapped used to be clipped by it. */
.jt-poi { display:flex; align-items:center; justify-content:flex-end;
           gap:7px 10px; flex-wrap:wrap; margin:0 0 12px; pointer-events:none; }
.jt-poi-label { font:700 9.5px Outfit,sans-serif; letter-spacing:0.09em;
           color:#475569; white-space:nowrap; }
/* .jt-zoom-btn is absolutely positioned by default - it doubles as a tick on
   the track - so it only becomes a chip inside a row. The flight's own zooms
   top of each other at zero height and could not be seen. */
.jt-poi .jt-zoom-btn, .jt-zoi .jt-zoom-btn { position:static; transform:none; font-size:11px;
           padding:3px 11px; border-radius:999px; background:#fbfcfe; pointer-events:auto; }
/* sits with the rest rather than banished to the right — and a square, since
   it is a whole-flight view rather than a point in it */
.jt-poi-all { margin-left:10px; }
.jt-poi-sq { display:inline-block; width:7px; height:7px; margin-right:6px;
           border-radius:2px; background:#64748b; vertical-align:middle; }
.jt-zoom-btn { position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
               pointer-events:auto; font-family:inherit; font-size:9px; font-weight:700;
               letter-spacing:.06em; line-height:1.5; white-space:nowrap; cursor:pointer;
               color:#475569; background:#ffffff; border:1px solid #cbd5e1;
               border-radius:4px; padding:1px 6px; }
.jt-zoom-btn:hover { color:#0f172a; border-color:#94a3b8; background:#f8fafc; }
.jt-track-bar { position:absolute; top:50%; left:0; right:0; height:30px; transform:translateY(-50%);
                background:#e2e8f0; border-radius:999px; }
.jt-track-sel { position:absolute; top:50%; height:15px; transform:translateY(-50%);
                background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.45);
                border-radius:4px; box-sizing:border-box; pointer-events:none; }
/* Trim handles, as a video editor draws them: a full-height bar with a
   triangle pointing INTO the selection, so each handle says which side it
   holds. Dots gave no such cue and read as data points on the profile. The
   bar is the grab target; the arrow is drawn on it with a border triangle. */
.jt-h { position:absolute; top:50%; width:9px; height:26px; transform:translate(-50%,-50%);
        border-radius:3px; cursor:grab; box-shadow:0 1px 3px rgba(15,23,42,0.18);
        touch-action:none; }
.jt-h::after { content:''; position:absolute; top:50%; transform:translateY(-50%);
        width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.jt-h:active { cursor:grabbing; }
.jt-h.lo { background:#2563eb; }
/* start handle: arrow points right, into the selection */
.jt-h.lo::after { left:2px; border-left:6px solid #ffffff; }
.jt-h.hi { background:#dc2626; }
/* end handle: arrow points left, into the selection */
.jt-h.hi::after { right:2px; border-right:6px solid #ffffff; }
.jt-track-acc { display:none; }   /* acceleration stripes retired: the phase tint carries the shape now */
.jt-track-acc.top { top:-4px; }
.jt-track-acc.bot { bottom:-4px; }

/* ════ MCLEGEND — was cloud_page_flights.cgi line 12596 ════ */
.mclegend { margin: 26px 0 2px; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
            grid-auto-rows: 1px;
            align-items: start;   /* CRITICAL: without this, items stretch to their
                                     initial 1px track, measure as 1px, and every
                                     span collapses -> cards pile on each other */ }
/* ── The data-set row and its menu ───────────────────────────────────────
   One row of the series people use, then everything else behind a menu with
   a search. The shell spans the whole legend grid: the row is not a column
   of anything. */
/* The legend was a masonry grid of group columns. There is one row now, so
   the grid has nothing left to place and its leftovers (Show events, the
   tool row) were landing on top of the row. Straight column instead. */
#mcLegend { display: flex !important; flex-direction: column; align-items: stretch;
      gap: 14px; overflow: visible; }
/* The tools row is a different kind of thing from the data-set row, so it
   gets a rule and some air rather than butting straight up against it. */
#mcLegend > .mc-toolrow { margin-top: 6px; padding-top: 16px; border-top: 1px solid #eef1f7; }
#mcLegend > .chart-toolbar { width: 100%; }
/* Above the tools row, which follows it in the document and was painting
   over both menus. */
.mcl-shell { position: relative; z-index: 50; width: 100%; overflow: visible; }
.mcl-bar { overflow: visible; }
.mcl-off { margin-left: 5px; font-size: 10px; color: #8b97ad; }
.mcl-pill.mcl-on:hover .mcl-off { color: #b91c1c; }
.mclegend .tb--events { width: 100%; }
.mcl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.mcl-more { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      font: 700 12px/1 Outfit, sans-serif; color: #ffffff; background: #1a2233;
      border: 1px solid #1a2233; border-radius: 9px; padding: 7px 12px; white-space: nowrap; }
.mcl-more:hover { background: #0f172a; }
.mcl-more span { font-weight: 600; color: #aab6d8; }
.mcl-more i { font-style: normal; font-size: 9px; color: #aab6d8; }
.mcl-more.is-open i { transform: rotate(180deg); }
.mcl-evbtn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      font: 600 12px/1 Outfit, sans-serif; color: #334155; background: #f4f6fb;
      border: 1px solid #e6ebf4; border-radius: 9px; padding: 7px 12px; white-space: nowrap; }
.mcl-evbtn:hover { border-color: #c9d3f7; }
.mcl-evbtn span { font-weight: 600; color: #8b97ad; }
.mcl-evbtn i { font-style: normal; font-size: 9px; color: #8b97ad; }
.mcl-evbtn.is-open { background: #1a2233; border-color: #1a2233; color: #ffffff; }
.mcl-evbtn.is-open span, .mcl-evbtn.is-open i { color: #aab6d8; }
/* On <body>, fixed: inside the legend card it was clipped at the bottom and
   painted under the rest of the page whatever z-index it carried. */
.mcl-evpop { display: block !important; position: fixed; z-index: 2147483000; width: 250px; box-sizing: border-box;
      overflow: auto; background: #ffffff; border: 1px solid #e2e8f2; border-radius: 12px;
      padding: 10px; box-shadow: 0 18px 40px rgba(15,23,42,0.2); }
.mcl-evpop .tb-label { display: none; }
.mcl-evpop .tb-body { display: block !important; padding: 0 !important; }
.mcl-evpop form { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
/* The 1020px cap dates from when this was a popup floating over the chart and
   wanted to look like a menu. It is the page's own always-open box now, so it
   takes the width it is given and only steps up on a screen with room for it,
   which keeps the columns from stretching into stripes on a laptop. */
.mcl-panel { position: relative; z-index: 40; margin-top: 10px; box-sizing: border-box;
      width: min(1020px, 100%); background: #ffffff; border: 1px solid #e2e8f2;
      border-radius: 13px; box-shadow: 0 14px 34px rgba(15,23,42,0.14); padding: 12px; }
@media (min-width: 1500px) { .mcl-panel { width: min(1320px, 100%); padding: 14px; } }
@media (min-width: 1800px) { .mcl-panel { width: min(1560px, 100%); } }
@media (min-width: 2200px) { .mcl-panel { width: 100%; } }
/* The search row: the field itself is capped, because a search box the width
   of a 4K screen looks like a mistake, and the reset sits beside it. */
.mcl-srow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.mcl-search { display: flex; align-items: center; gap: 11px; background: #f7f9fc;
      border: 1px solid #e6ebf4; border-radius: 10px; padding: 10px 14px; color: #8b97ad;
      flex: 1 1 320px; max-width: 800px; }
.mcl-clear { border: 0; background: transparent; color: #94a3b8; cursor: pointer;
      font: 600 13px/1 Outfit, sans-serif; padding: 2px 4px; flex: none; }
.mcl-clear:hover { color: #334155; }
.mcl-reset { flex: none; border: 1px solid #e6ebf4; background: #fff; color: #475569;
      font: 600 12.5px/1 Outfit, sans-serif; border-radius: 10px; padding: 0 16px; cursor: pointer; }
.mcl-reset:hover { color: #0f172a; border-color: #c9d3f7; }
/* The hover note. pointer-events:none is the important line: it can sit over a
   pill without ever intercepting the click for it. */
.mcl-tip { position: absolute; z-index: 3000; display: none; pointer-events: none;
      max-width: 340px; background: #0f172a; color: #e8eefb; border-radius: 9px;
      padding: 9px 12px; font: 400 12px/1.5 Outfit, sans-serif;
      box-shadow: 0 10px 26px rgba(15,23,42,0.28); }
.mcl-search svg { width: 15px; height: 15px; flex: none; }
.mcl-search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0;
      font: 500 13px/1.3 Outfit, sans-serif; color: #1a2233; }
.mcl-search input::placeholder { color: #8b97ad; font-weight: 400; }
.mcl-search > span { font: 500 11px/1 Outfit, sans-serif; color: #a6b0c3; }
/* Columns rather than a grid, so a short group flows into the next column
   instead of leaving a hole. Count follows the width. */
.mcl-cols { column-count: 1; column-gap: 26px; margin-top: 2px; }
@media (min-width: 900px)  { .mcl-cols { column-count: 2; } }
@media (min-width: 1500px) { .mcl-cols { column-count: 3; } }
@media (min-width: 1900px) { .mcl-cols { column-count: 4; column-gap: 30px; } }
.mcl-mgroup { break-inside: avoid; padding-top: 14px; }
.mcl-mtitle { font: 800 10px/1 Outfit, sans-serif; letter-spacing: 0.11em; color: #67748b;
      text-transform: uppercase; border-bottom: 1px solid #f0f3f8; padding-bottom: 7px;
      margin-bottom: 8px; }
.mcl-mrow { display: flex; flex-wrap: wrap; gap: 6px; }
.mcl-pill-s { font-size: 11.5px !important; padding: 4px 10px !important; }
/* imports: whose a series is, the altimeter's own or worked out here (AC).
   Set like the masthead's .mcflag chips, small enough to sit inside a pill. */
.mcl-src { display: inline-flex; align-items: center; font: 700 8.5px/1 Outfit, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: #475569; background: #eef2f7;
  border: 1px solid #dde3ec; border-radius: 5px; padding: 2px 4px; white-space: nowrap; }
.mcl-src-ac { color: #1d4ed8; background: #e8efff; border-color: #c9d7fb; }
.mcl-srckey { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 5px; margin-top: 12px; font: 400 11px/1.4 Outfit, sans-serif; color: #8b97ad; }
.mcl-srckey .mcl-src-ac { margin-left: 12px; }
.mcl-none { padding: 16px 4px 6px; font: 400 12.5px/1 Outfit, sans-serif; color: #8b97ad; }

.mcl-group { display: flex; flex-direction: column; gap: 8px;
             margin: 0;
             border: none;
             }
.mcl-title { display: flex; align-items: center; gap: 7px;
             font: 700 10.5px/1 Outfit, sans-serif;
             letter-spacing: 0.13em; text-transform: uppercase; color: #64748b; }
.mcl-title svg { width: 15px; height: 15px; color: #94a3b8; flex: none; }
.mcl-row { display: flex; flex-wrap: wrap; gap: 6px 6px; }

/* ── 8d: no cards ─────────────────────────────────────────────────────────────
   The group cards were doing no work: the captions and the whitespace already
   group the chips, and forty chips in seven bordered boxes read as a filing
   cabinet. Caption gets a hairline instead, and the columns get real gutters
   now that there is no card padding to separate them. */
/* !important because the page's own .mclegend .tb-block rule is declared
   LATER in this stylesheet and was winning on source order, putting the boxes
   back around ZOOMING, the tools, DOWNLOAD and IMAGE. */
.mcl-group, .mclegend .tb-block {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 2px 0 !important;
}
/* !important on the border: the page declares .mclegend .tb-label { border:
   none } later in this stylesheet, so SHOW EVENTS lost the hairline that
   .mcl-title kept. */
.mcl-title, .mclegend .tb-label {
  width: 100% !important;
  box-sizing: border-box;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0 0 5px 0 !important;
  margin: 0;
  border-radius: 0;
}
.mcl-count {
  margin-left: auto;
  font: 600 10px ui-monospace, SFMono-Regular, monospace;
  color: #475569;
  letter-spacing: 0;
  text-transform: none;
}
.mclegend { column-gap: 34px; row-gap: 0; }

/* One full-width row for the actions, under the dataset groups. This - not
   .chart-toolbar, which is display:none and relocated here by script - is the
   strip on screen. Groups divided by a hairline, each named in the same small
   caps the panels use, one primary. */
.mclegend .mc-toolrow {
  grid-column: 1 / -1;
}
/* no dividers between the groups: the row wraps to three lines at most
   widths and a hairline then lands at the start of a line, marking nothing */
.mclegend .mc-toolrow .tb-label,
.mclegend .mc-toolrow .mcl-actions .tb-label {
  font: 700 10.5px/1 Outfit, sans-serif !important; letter-spacing: 0.13em;
  text-transform: uppercase; color: #64748b !important; }
.mclegend .mc-toolrow .tb-body,
.mclegend .mc-toolrow .mcl-actrow { gap: 8px; font: 400 12px/1.4 Outfit, sans-serif; color: #64748b; }
.mclegend .mc-toolrow .tb-body input[type=button],
.mclegend .mc-toolrow .tb-body input[type=submit],
.mclegend .mc-toolrow .tb-body button,
.mclegend .mc-toolrow .mcl-actrow input[type=button],
.mclegend .mc-toolrow .mcl-actrow button {
  font: 600 12.5px/1 Outfit, sans-serif !important; border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important; padding: 8px 14px !important; background: #ffffff !important;
  color: #475569 !important; cursor: pointer; }
.mclegend .mc-toolrow .tb-body input[type=button]:hover,
.mclegend .mc-toolrow .mcl-actrow input[type=button]:hover,
.mclegend .mc-toolrow .tb-body button:hover {
  background: #f7f9fc !important; border-color: #94a3b8 !important; color: #0f172a !important; }
/* saving the picture is what the strip is mostly for */
.mclegend .mc-toolrow .tb--image input[type=button] {
  background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; }
.mclegend .mc-toolrow .tb--image input[type=button]:hover {
  background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #ffffff !important; }
.mclegend .mc-toolrow .tb-body input[type=text],
.mclegend .mc-toolrow .tb-body input[type=number] {
  font: 500 12.5px/1 Outfit, sans-serif; border: 1px solid #cbd5e1; border-radius: 9px;
  padding: 8px 10px; color: #0f172a; }
.mclegend .mc-toolrow .tb-block,
.mclegend .mc-toolrow .mcl-actions {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  padding: 0 !important;
  grid-row-end: auto !important;
}
.mclegend .mc-toolrow .tb-label {
  width: auto !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}
.mclegend .mc-toolrow .tb-body { padding: 0 !important; }
.mclegend .mc-toolrow .mcl-actrow { display: flex; flex-wrap: wrap; gap: 8px; }
/* ── The strip under the chart ─────────────────────────────────────────────
   Three things on one line: a tray holding every chip, the zoom hint as
   plain text beside it, and one dark button out to the Downloads tab. The
   row is assembled by relocateToolbar, which now puts all the controls in
   the tray, so this only has to dress them. */
.mclegend .mc-toolrow {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px;
  width: 100%; box-sizing: border-box; padding: 0; margin: 2px 0 0;
  background: none; border: 0; }
.mclegend .mc-toolrow .mcl-actions { order: 1; padding: 0; margin: 0; display: inline-flex; }
.mclegend .mc-toolrow .mcl-hint { order: 2; font: 400 11.5px/1.4 Outfit, sans-serif;
  color: #8b97ad; }
.mclegend .mc-toolrow .tb--alldl { order: 99; margin-left: auto !important; }
/* the tray */
.mclegend .mcl-actrow {
  display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 3px; background: #f4f6fb; border-radius: 12px; }
/* one chip, whatever the control underneath happens to be */
.mclegend .mcl-actrow .mcl-popbtn,
.mclegend .mcl-actrow .mcl-ico-btn,
.mclegend .mcl-actrow .mcl-dl,
.mclegend .mcl-actrow > a,
.mclegend .mcl-actrow > button,
.mclegend .mcl-actrow input[type=button] {
  display: inline-flex !important; align-items: center; gap: 7px; box-sizing: border-box;
  font: 600 12.5px/1 Outfit, sans-serif !important; color: #334155 !important;
  background: #ffffff !important; border: 0 !important; border-radius: 9px !important;
  padding: 8px 12px !important; height: auto !important; text-decoration: none !important;
  box-shadow: 0 0 0 1px #e6ebf4 !important; cursor: pointer; }
.mclegend .mcl-actrow .mcl-popbtn:hover,
.mclegend .mcl-actrow .mcl-ico-btn:hover,
.mclegend .mcl-actrow .mcl-dl:hover,
.mclegend .mcl-actrow > a:hover,
.mclegend .mcl-actrow > button:hover {
  background: #ffffff !important; box-shadow: 0 0 0 1px #c9d3f7 !important; color: #0f172a !important; }
.mclegend .mcl-actrow svg { width: 14px; height: 14px; flex: none; color: #8b97ad; }
.mclegend .mcl-actrow .mcl-dl span { color: #67748b !important; font-weight: 500 !important; }
.mclegend .mcl-actrow .mcl-tick { color: #0f7a4d !important; }
/* order inside the tray: adjust the chart, then take it away */
.mclegend .mcl-actrow .tb--adjust  { order: 1; }
.mclegend .mcl-actrow .tb--compare { order: 2; }
.mclegend .mcl-actrow .tb--labels  { order: 3; }
.mclegend .mcl-actrow .mcl-reset   { order: 4; }
.mclegend .mcl-actrow .mcl-png     { order: 5; }
.mclegend .mcl-actrow .mcl-dl      { order: 6; }
.mclegend .mcl-actrow .tb--share   { order: 7; }
.mcl-alldl { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer;
  font: 700 12.5px/1 Outfit, sans-serif !important; color: #ffffff !important;
  background: #1a2233 !important; border: 1px solid #1a2233 !important;
  border-radius: 10px !important; padding: 10px 16px !important; white-space: nowrap; }
.mcl-alldl:hover { background: #0f172a !important; border-color: #0f172a !important; color: #ffffff !important; }
.mcl-alldl span { font-weight: 600; opacity: 0.7; }
@media (max-width: 900px) { .mclegend .mc-toolrow .tb--alldl { margin-left: 0 !important; } }
.mclegend { padding-bottom: 4px !important; }
.chart-wrap { padding-bottom: 0 !important; }

.mcl-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2e8f0;
            background: #fbfcfe;
            color: #334155; border-radius: 999px; padding: 3.5px 12px;
            font: 500 12px/1.4 Outfit, sans-serif; cursor: pointer;
            }
.mcl-pill:hover { border-color: #94a3b8; }
.mcl-pill.mcl-on { color: #111827; font-weight: 600;
                   box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.02); }
.chart-toolbar .tb-body a.share-ico, a.share-ico {
             width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
             align-items: center; justify-content: center; color: #ffffff !important;
             font: 700 13px/1 Inter, system-ui, sans-serif; text-decoration: none;
             transition: transform 0.1s, filter 0.1s; }
.chart-toolbar .tb-body a.share-ico:hover { transform: scale(1.12); filter: brightness(1.1); color: #ffffff !important; }
.mcl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none;
           transition: background 0.12s; }
/* hovering an off pill shows what colour it would be */
.mcl-pill:not(.mcl-on):hover .mcl-dot { background: var(--mcl-c, #cbd5e1) !important; }
/* hover: gentle lift + a light sweep across the control */
.mcl-pill, .mcl-popbtn { position: relative; overflow: hidden; }
.mcl-pill::after, .mcl-popbtn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: skewX(-20deg); pointer-events: none; }
.mcl-pill:hover::after, .mcl-popbtn:hover::after { left: 130%; transition: left 0.45s ease; }
.mcl-pill:hover, .mcl-popbtn:hover { transform: translateY(-1px) scale(1.03); }
.mcl-pill, .mcl-popbtn { transition: transform 0.13s ease, border-color 0.12s, background 0.12s, box-shadow 0.12s; }
/* The server-rendered toolbar bars are hidden from first paint — the cards
   are built at DOMContentLoaded, so no flash of the old layout. The relocated
   wrapper overrides this with inline display:contents. */
.chart-toolbar { display: none; }
/* Toolbar blocks relocated into the card flow — .mclegend scope out-cascades
   the .chart-toolbar block styles while its control styles stay alive */
.mclegend .tb-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
            margin: 0; position: relative;
            background: #ffffff; border: none; border-radius: 12px;
            padding: 11px 14px 13px; box-shadow: 0 1px 2px rgba(15,23,42,0.06);
            font-size: 13px; overflow: visible; }
.mclegend .tb-label { background: transparent; border: none; padding: 0;
            display: inline-flex; align-items: center; gap: 7px;
            font: 600 12.5px/1.2 Inter, system-ui, sans-serif;
            letter-spacing: 0.05em; text-transform: uppercase; color: #475569; }
.mclegend .tb-label svg { width: 15px; height: 15px; color: #94a3b8; flex: none; }
.mclegend .tb--zoom .tb-body { width: 100%; justify-content: space-between;
            font-size: 12.5px; color: #64748b; }
.mclegend .tb-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0; }
.mclegend .mcl-actions { padding: 0; }
.mcl-actrow { display: flex; flex-wrap: wrap; gap: 8px; }
.mcl-btnwrap { position: relative; display: inline-flex; }
.mcl-popbtn { display: inline-flex; align-items: center; gap: 7px;
            border: 1px solid #e2e8f0; background: #ffffff; color: #334155;
            border-radius: 12px; padding: 7px 14px; cursor: pointer;
            font: 600 12.5px/1.3 Inter, system-ui, sans-serif;
            box-shadow: 0 1px 2px rgba(15,23,42,0.06);
            transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; }
.mcl-popbtn:hover { border-color: #94a3b8; background: #f8fafc; }
.mclegend .tb-body input[type=button] {
            border: 1px solid #e2e8f0; background: #ffffff; color: #334155;
            border-radius: 12px; padding: 7px 14px; cursor: pointer;
            font: 600 12.5px/1.3 Inter, system-ui, sans-serif;
            box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.mclegend .tb-body input[type=button]:hover { border-color: #94a3b8; background: #f8fafc; }
/* floating reset over the chart's top-right corner */
/* Inside the plot, bottom right. Not the top: that carries the flight title and
   the ID/apogee/tag line, which on a narrower screen the button sat on top of.
   Not the very bottom either: that is the rotated x-axis tick labels and the
   axis title. 92px clears both and puts it in the empty corner of the plot
   itself, which on a flight chart is always dead space after landing. */
.mcl-chartreset { position: absolute; bottom: 14px; right: 16px; z-index: 45;
            display: inline-flex; align-items: center; gap: 7px;
            border: 1px solid #e2e8f0; background: rgba(255,255,255,0.92); color: #334155;
            backdrop-filter: blur(3px);
            border-radius: 12px; padding: 6px 13px; cursor: pointer;
            font: 600 12.5px/1.3 Inter, system-ui, sans-serif;
            box-shadow: 0 1px 2px rgba(15,23,42,0.06);
            transition: border-color 0.12s, background 0.12s; }
.mcl-chartreset:hover { border-color: #94a3b8; background: #ffffff; }
/* Download buttons. Three of them, shown inline rather than behind a popup:
   one click to reveal two or three links is a click for nothing. */
.mcl-dl { display: inline-flex; align-items: center; gap: 6px;
          border: 1px solid #e2e8f0; background: #ffffff; color: #334155;
          border-radius: 8px; padding: 5px 11px; cursor: pointer; text-decoration: none;
          font: 600 12px/1.3 Outfit, Inter, system-ui, sans-serif;
          transition: border-color .12s, background .12s; }
.mcl-dl:hover { border-color: #94a3b8; background: #f8fafc; }
.mcl-dl-adj { border-color: #ddd6fe; color: #7c3aed; }
.mcl-dl-adj:hover { border-color: #7c3aed; background: #faf5ff; }
.mcl-tick { color: #16a34a; font-weight: 700; font-size: 12px; line-height: 1; }
.mcl-chartreset svg { width: 14px; height: 14px; color: #64748b; }
.mcl-popbtn svg { width: 15px; height: 15px; color: #64748b; flex: none; }
.mcl-pop { display: none; position: fixed; z-index: 200;
            background: #ffffff; border-radius: 12px; padding: 13px 15px; min-width: 240px; max-width: 400px;
            box-shadow: 0 12px 32px rgba(15,23,42,0.14); }
.mcl-pop.open { display: block; }
.mcl-pop .tb-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; }
/* bare links inside popovers (CSV file) become chip buttons like their neighbours */
.mcl-pop .tb-body > a { display: inline-flex; align-items: center;
            border: 1px solid #e2e8f0; background: #ffffff; color: #334155 !important;
            border-radius: 12px; padding: 6px 14px; text-decoration: none;
            font: 600 12.5px/1.3 Inter, system-ui, sans-serif;
            box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.mcl-pop .tb-body > a:hover { border-color: #94a3b8; background: #f8fafc; }
/* The seven event pills were stacking three-deep in their column. They are
   short labels, so a slightly smaller pill fits them on one line at the
   column's own width - no layout change needed. */
/* The events body is inside the data set box now, under .mcl-evblock rather
   than .tb--events, so every rule that shaped it has to name both. */
.mclegend .tb--events .tb-body form,
.mclegend .mcl-evblock .tb-body form { gap: 5px !important; }
.mclegend .tb--events .tb-body label,
.mclegend .mcl-evblock .tb-body label { font-size: 11px; padding: 4px 9px; }
.mclegend .tb--events .tb-body label span.d,
.mclegend .tb--events .tb-body label i,
.mclegend .mcl-evblock .tb-body label span.d,
.mclegend .mcl-evblock .tb-body label i { margin-right: 5px; }
/* and it is a group in the box, so it takes the group's own box metrics and
   not the toolbar's */
.mclegend .mcl-evblock { display: flex; flex-direction: column; }
.mclegend .mcl-evblock .tb-body { padding: 0; width: 100%; }
/* Show events toggles: neat two-column grid (inline flex style overridden) */
.mclegend .tb-body form { display: flex !important; flex-wrap: wrap;
            gap: 7px !important; }
.mclegend .evt-group { margin-right: 0; }

@keyframes mclPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.mcl-pill.mcl-loading { animation: mclPulse .9s ease-in-out infinite; cursor: progress; }
/* a line this flight cannot have yet: greyed, no lift or sweep, the note says why */
.mcl-pill.mcl-pill-na { color: #a6b0c3; background: #f8fafc; border-color: #edf1f6; cursor: not-allowed; }
.mcl-pill.mcl-pill-na .mcl-dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px #d5dce6; }
.mcl-pill.mcl-pill-na:hover { transform: none; border-color: #edf1f6; }
.mcl-pill.mcl-pill-na::after { display: none; }

/* ════ Rocket picker (select2) — was cloud_page_flights.cgi line 17581 ════ */
#flt-rocket-select + .select2-container .select2-selection--single { height:auto; min-height:40px; border:1px solid #cbd5e1; border-radius:8px; padding:4px 8px; font-family:Outfit,sans-serif; }
#flt-rocket-select + .select2-container .select2-selection__rendered { line-height:30px; }
#flt-rocket-select + .select2-container .select2-selection__arrow { height:38px; }
.select2-results__option--highlighted { background:#eff6ff !important; }

/* ════ Site & weather panel (WXPANELHTML) — was cloud_page_flights.cgi line 18918 ════ */
.ls-tabs { margin: 0 0 18px !important; }
.ls-tabs .ntab { font-size: 15px !important; }
.ls-pill { display: inline-block; margin-left: 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; line-height: 1.4; }
.ls-pill.is-set { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.ls-pane .ls-status { margin: 0 0 14px; }
.ls-pane .ls-wx { margin-top: 4px; }
.ls-pane #ls-adj { margin-top: 22px; padding-top: 20px; }
.ls-ro-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 0 8px; }
.ls-ro-tiles .ls-tile strong { font-size: 17px; }
.ls-enter { margin: 12px 0 10px; }
.ls-wxsave { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.ls-more { margin: 16px 0 0; font-size: 12.5px; color: #475569; }
.ls-more summary { cursor: pointer; color: #334155; font-weight: 600; }
.ls-more p { margin: 8px 0 0; }
.wxv-panel { border-top: 1px solid var(--hair); margin-top: 26px; padding-top: 22px; }
.wxv-panel .ntabs { gap: 18px !important; flex-wrap: wrap; }
.wxv-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 14px; }
.wxv-bar .wxv-wide { grid-column: 1 / -1; }
.wxv-bar .ls-field, .wxv-row .ls-field { margin: 0; }
.wxv-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.wxv-row .ls-field { min-width: 180px; flex: 1; }
.wxv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wxv-tiles .ls-tile { padding: 12px 14px; }
.wxv-tiles .ls-tile strong { font-size: 17px; }
.wxv-tiles .ls-tile em { display: block; font-style: normal; font-size: 11.5px; color: #67748c; margin-top: 3px; }
.wxv-gap { margin-top: 12px; }
.wxv-cred { margin-top: 16px; }
.wxv-sc { max-height: 330px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.wxv-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wxv-t th { position: sticky; top: 0; background: #f8fafc; color: #475569; font-weight: 600; text-align: right;
  padding: 7px 9px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.wxv-t td { text-align: right; padding: 5px 9px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; color: #0f172a; }
.wxv-t th:first-child, .wxv-t td:first-child { text-align: left; }
.wxv-t tr.is-launch td { background: #eff6ff; font-weight: 600; }
.wxv-arrow { vertical-align: -2px; color: #334155; }
.wxv-chart { width: 100%; height: auto; display: block; margin: 2px 0 8px; font-family: Outfit, sans-serif; }
.wxv-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wxv-split .wxv-prof { max-width: 420px; }
.wxv-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px 14px; margin: 4px 0 4px;
  font-size: 12.5px; color: #334155; }
.wxv-cols label { display: flex; gap: 7px; align-items: center; cursor: pointer; }

/* ════ Tab bar: the "More" tab ════
   Tabs that don't fit move into the More tab's menu (MCTMOREJS, straight
   after the bar). .mct-fit is set by that script; without it the track
   scrolls sideways. The menu rules match the selected-tab rule's specificity
   and sit after it, so a label in the menu drops the pill. */
.mctabbar.mct-fit .mctabbar-in { overflow: visible; }
.mct-more { position: relative; flex: none; display: flex; }
.mct-more[hidden] { display: none; }
.mct-more-btn { font-family: Outfit, sans-serif; font-size: 14px; font-weight: 600; line-height: inherit;
  color: #475569; background: transparent; border: 0; border-radius: 9px;
  padding: 8px 14px 8px 16px; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.mct-more-btn:hover { color: var(--ink); background: rgba(255,255,255,0.6); }
.mct-more-btn .mct-n { margin-left: 0; }
.mct-more-car { font-size: 11px; color: #334155; transition: transform 0.15s; }
.mct-more.is-open .mct-more-car { transform: rotate(180deg); }
.mct-more.is-on .mct-more-btn { color: var(--ink); background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.10), 0 0 0 1px rgba(15,23,42,0.04); }
.mct-more-menu { display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 20;
  min-width: 260px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15,23,42,0.16); padding: 6px; flex-direction: column; gap: 2px; }
.mct-more.is-open .mct-more-menu { display: flex; }
.mctabs > .mctabbar #mctb-menu > label[for] { display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #334155;
  font-size: 13.5px; font-weight: 600; box-shadow: none; }
.mctabs > .mctabbar #mctb-menu > label[for]:hover { background: #f7f9fc; color: var(--ink); }
.mctabs > .mctabbar #mctb-menu > label.is-cur[for] { background: #eff6ff; color: #1d4ed8; }
.mctabs > .mctabbar #mctb-menu > label.is-cur[for]::after { content: "\2713"; margin-left: auto; font-size: 13px; }