/* Moved verbatim from FlightReport.cshtml's inline style blocks so the flight
summary page can render _PublicFlightSections with identical styling. Both
pages link this file; the report's remaining inline styles stay with it. */
/* Themed ground (was hard black): dark stays near-black via the token, and the
standalone light theme gets the app's light surface. */
body { background-color: var(--surface-bg); }
.pf-nav .btn-visit { background-color: rgb(var(--myfsdarkblue)); color: white;
padding: 8px 18px; border-radius: 6px; font-size: 15px; text-decoration: none; white-space: nowrap; }
.pf-nav .btn-visit:hover { filter: brightness(1.15); color: white; }
/* Marketing header (matches the public hub pages / _LayoutPublic) */
.mfs-head { display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 14px 14px; max-width: 1000px; margin: 0 auto; position: relative; }
.mfs-head a { color: var(--surface-fg); text-decoration: none; }
:root[data-theme="light"] .mfs-brand .txt b { color: var(--link-accent); }
.mfs-theme { background: none; border: 1px solid var(--panel-border); color: inherit;
border-radius: 999px; width: 34px; height: 34px; line-height: 1; cursor: pointer;
font-size: 15px; padding: 0; flex: 0 0 auto; }
.mfs-theme:hover { background: var(--overlay-tint); }
.mfs-theme .t-light { display: none; }
:root[data-theme="light"] .mfs-theme .t-light { display: inline; }
:root[data-theme="light"] .mfs-theme .t-dark { display: none; }
.embed .mfs-theme { display: none; }
.mfs-brand { display: flex; align-items: center; gap: 12px; }
.mfs-brand img { width: 46px; height: auto; }
.mfs-brand .txt { font-weight: 100; font-size: 17px; white-space: nowrap; }
.mfs-brand .txt b { color: rgb(var(--myfslightblue)); font-weight: 100; }
.mfs-nav { display: flex; align-items: center; gap: 26px; }
.mfs-nav a { font-size: 16px; letter-spacing: .04em; white-space: nowrap; }
.mfs-nav a:hover { color: #bd99ef; }
.mfs-burger { display: none; background: none; border: 0; }
@media (max-width: 800px) {
.mfs-brand .txt { font-size: 15px; }
.mfs-brand .txt-full { display: none; }
.mfs-nav { display: none; position: absolute; right: 14px; top: 62px; z-index: 140;
flex-direction: column; gap: 4px; align-items: flex-end; background: #000000E8;
border: 1px solid #551A8B; border-radius: 12px; padding: 12px 16px; }
.mfs-nav.open { display: flex; }
/* the dropdown keeps its dark panel in both themes */
.mfs-nav a { color: #fff; }
.mfs-burger { display: block; cursor: pointer; }
}
/* The full marketing hero (_PublicHero + .mfs-hero styles) used to render here.
Removed Aug 2026 with the landing A/B test: the landing page owns the pitch,
and the compact header keeps this page aligned with the hub family. */
.pf-subnav { position: sticky; top: 0; z-index: 100; background: var(--surface-bg);
border-bottom: 1px solid var(--panel-border); overflow-x: auto; white-space: nowrap; }
.pf-subnav-inner { max-width: 1000px; margin: 0 auto; display: flex; justify-content: center; }
.pf-subnav a { display: inline-block; padding: 12px 16px; font-size: 14px; color: var(--surface-faint-fg); text-decoration: none; }
.pf-subnav a:hover { background: var(--overlay-tint); }
.pf-headbar { display: flex; justify-content: center; align-items: center; gap: 15px; padding: 10px;
text-align: center; font-size: 1.1rem; background-color: var(--panel-tint-strong);
border: 1px solid var(--panel-border); border-radius: 20px; }
.pf-section { scroll-margin-top: 52px; }
/* Airport name and the city/region/country line, in both cards.
site_a.css sets .summary{white-space:nowrap}, and nowrap INHERITS - so these cells
refuse to break and a long name ("Monsenor Oscar Arnulfo Romero International Airport",
"San Salvador (San Luis Talpa), Departamento de La Paz, El Salvador") runs straight out
of the card. FlightSummary.razor fixes this with .fs-aptname; the port of these cards
never carried it across. Unconditional rather than inside a width media query - the
overflow happens at any width, it just needs a long enough name. */
.pf-aptname { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
/* Landing summary. Built on the page's own tokens rather than a second palette, and it
reuses RenderPill so the scores read on the same scale as every stage card below. */
.pf-ls { max-width: 640px; margin: 4px auto 0; border: 1px solid var(--panel-border);
border-radius: 14px; overflow: hidden; text-align: left; }
.pf-ls-heads { display: grid; grid-template-columns: 1fr 1fr; }
.pf-ls-head { padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 7px; }
.pf-ls-head + .pf-ls-head { border-left: 1px solid var(--panel-border); }
.pf-ls-hlabel { font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--surface-muted-fg); }
.pf-ls-hscore { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; color: var(--surface-fg); }
/* State in form as well as number - the bar is readable before the digits are. */
.pf-ls-meter { height: 5px; border-radius: 3px; background: var(--panel-tint); overflow: hidden; }
.pf-ls-meter > i { display: block; height: 100%; border-radius: 3px; }
.pf-ls-group { padding: 11px 16px 7px; border-top: 1px solid var(--panel-border);
background: var(--panel-tint); font-size: 11.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--surface-muted-fg); }
.pf-ls-context { padding: 10px 16px; border-top: 1px solid var(--panel-border);
font-size: 13px; color: var(--surface-muted-fg); }
.pf-ls-row { display: grid; grid-template-columns: 1fr auto;
grid-template-areas: "label score" "note note"; gap: 2px 12px;
padding: 10px 16px; border-top: 1px solid var(--panel-border); align-items: center; }
.pf-ls-label { grid-area: label; font-size: 13.5px; font-weight: 600; color: var(--surface-fg); }
.pf-ls-score { grid-area: score; }
.pf-ls-note { grid-area: note; font-size: 12.5px; color: var(--surface-muted-fg); }
/* The stabilised lines are shared with the standalone badge, so only their placement
inside this panel is restated. */
.pf-ls .sbdg-line { padding: 10px 16px; margin: 0; border-top: 1px solid var(--panel-border);
text-align: left; }
@media (max-width: 460px) {
/* One column, and the pill drops under the label rather than squeezing the note. */
.pf-ls-heads { grid-template-columns: 1fr; }
.pf-ls-head + .pf-ls-head { border-left: 0; border-top: 1px solid var(--panel-border); }
.pf-ls-row { grid-template-columns: 1fr; grid-template-areas: "label" "note" "score"; }
.pf-ls-score { margin-top: 6px; }
}
/* ScoreDisplay port (Pages/Components/ScoreDisplay.razor) */
.pf-narrative { max-width: 900px; margin: 0 auto; font-size: .9rem; text-align: left; padding: 0 10px; }
/* Inline map: site_a.css .map is position:fixed for the Blazor full-screen tab;
on the long-form page the map lives inside its section. */
#mapbox.map { position: relative !important; top: 0 !important; height: 80vh !important;
overflow: hidden; border-radius: 10px; }
/* Map stage/event pill labels — copied verbatim from the main app's css/index.css
(loaded by Index.razor) so the pills match: black text on the score colour for
stages, black-on-white for events, white-on-red for failures. This page loads
site_a.css, which does not define these. */
.rounded-stage-label { color: black; padding: 0.1em 0.5em; font-size: .6875rem;
border-radius: 1em; cursor: pointer; border: 0px solid black; }
.rounded-event-label { color: black; background-color: white; text-align: center;
padding: 3px; font-size: .6875rem; border-radius: 1em; border: 0px solid black;
width: 180px; line-height: 12px; }
.rounded-event-fail-label { color: white; background-color: red; text-align: center;
padding: 3px; font-size: .6875rem; border-radius: 1em; border: 0px solid black;
width: 140px; line-height: 12px; }
/* FlightSummary.razor component styles.
:not(.pf-section) because .borderstyling sits on section WRAPPERS as well as on
cards - #summary is "borderstyling pf-section" and contains the cards. Painting
both was invisible when the fill was a 16% tint; with light mode's opaque white
the wrapper becomes a slab behind everything. */
.borderstyling:not(.pf-section) { border-radius: 20px; border: 1px solid var(--panel-border);
background-color: var(--panel-tint-strong); }
.reportSummary { font-size: 0.9rem; text-align: left; }
/* Stages (Stages.razor + StageDialog.razor port) */
.pf-stagepanel { border-radius: 20px; background-color: var(--panel-tint-strong);
border: 1px solid var(--panel-border);
margin: 14px auto; max-width: 960px; }
.pf-stagepanel > summary { list-style: none; cursor: pointer; text-align: center; padding: 18px 16px; }
.pf-stagepanel > summary::-webkit-details-marker { display: none; }
.pf-stagepanel > summary h3 { font-size: 1.1rem; margin: 0 0 12px; }
.pf-stagepanel > summary p { font-size: .875rem; max-width: 820px; margin: 12px auto 0; }
.pf-pill { display: inline-block; color: black; font-size: .6875rem; font-weight: 600;
padding: .15em .7em; border-radius: 1em; line-height: 1.5; }
/* cross-linking cards (shared look with the hub pages) */
.pf-card { display: block; width: 300px; border-radius: 11px; padding: 14px 16px; color: white;
background-color: var(--panel-tint-strong); border: 1px solid var(--panel-border);
transition: .15s; text-decoration: none; }
.pf-card:hover { color: white; background-color: var(--panel-tint-hover);
border-color: rgba(var(--myfslightblue), .34); text-decoration: none; }
.pf-card .route { font-weight: 700; font-size: 1rem; }
.pf-card .sub { font-size: .8rem; color: rgb(var(--myfslightblue)); margin-top: 2px; }
.pf-card .meta { font-size: .8rem; margin-top: 6px; display: flex; justify-content: space-between; }
.pf-dash { margin: 0 14px 16px; overflow-x: auto; }
.pf-dash table { width: 100%; border-collapse: collapse; min-width: 620px; }
.pf-dash thead td { border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5);
font-weight: 600; padding: 6px 10px; font-size: .85rem; }
.pf-dash td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.2);
font-size: .8rem; vertical-align: middle; }
.pf-dash td.pf-desc p { margin: 0; }
.pf-dash svg { display: block; }
/* Takeoff/Landing report panels (DepartureProfile.razor + LandingProfile.razor port) */
.pf-panel { border-radius: 20px; background-color: var(--panel-tint-strong);
border: 1px solid var(--panel-border); margin: 14px auto; max-width: 960px; padding-bottom: 14px; }
.pf-panelhead { display: flex; align-items: center; font-size: 1.1rem; line-height: 50px;
border-bottom: .5px solid white; padding: 0 14px; }
.pf-panelhead > div { flex: 1; text-align: center; }
.pf-paneldesc { text-align: center; padding: 15px 15% 5px; font-size: .9rem; }
.pf-innerbox { border: .5px solid white; border-radius: 20px; margin: 12px 15% 0;
padding: 12px 6px 4px; display: flex; flex-wrap: wrap; justify-content: center; }
.pf-mcell { flex: 1 1 30%; min-width: 170px; text-align: center; padding: 4px; }
.pf-mcell .mt, .pf-minichart .mt { font-size: 1rem; padding: 5px; text-align: center; }
.pf-mcell .md { font-size: .9rem; padding: 10px 6px 12px; }
.pf-chartrow { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 12px 6px; justify-content: center; }
/* Six of these sit in a row on the approach - glideslope, speed, alignment, bank, g
and descent rate. At 145px they came to 920px with the gaps, which is wider than the
panel, so the sixth dropped onto a row of its own. 118px fits all six and still gives
a readable sparkline; the row wraps on a phone, which is what it should do. */
.pf-minichart { flex: 1 1 130px; min-width: 118px; max-width: 260px; }
.pf-minichart svg { width: 100%; height: auto; display: block; }
.pf-bigchart { margin: 10px 1.5% 14px; }
.pf-bigchart svg { width: 100%; height: auto; display: block; }
/* .pf-subnav is mirrored into the app's sticky bar (outside the iframe), so hide the
in-frame copy - it can't stay sticky here anyway. The marketing hero and header go
too: the app supplies its own chrome. */
.embed .mfs-head, .embed .pf-subnav, .embed .pf-crumbs { display: none !important; }
/* "More flights like this" and the hub links: public cross-linking, and a way OUT of
the page. In the app's frame the reader is already inside the app, which has its own
navigation, so the block is public-only. */
.embed .pf-related { display: none !important; }
/* Owner view: the app renders its own editable summary above this frame - route, scores,
narrative, stabilised badge, fuel - so those blocks would appear twice. The landing summary
is the exception: it exists nowhere else, so it stays and becomes the top of the embedded
report. Its stabilised lines go, since the app's badge already shows them.
Listed by class deliberately, NOT as "every child except .pf-ls": #summary is never closed
before the stage sections, so #flightmap, #stages, #takeoffreport, #landingreport and
#metrics are all its children too, and a blanket child rule hid the whole report. */
.owner-embed #summary > .pf-headbar,
.owner-embed #summary > .row,
.owner-embed #summary > .pf-narrative,
.owner-embed #summary > .pf-profile,
.owner-embed #summary > .pf-fuelcmp,
.owner-embed #summary > .sbdg-line,
.owner-embed #summary > hr { display: none !important; }
.owner-embed #summary { border: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
.owner-embed .pf-ls .sbdg-line { display: none; }
/* Blend with the app behind the iframe. The head script copies the app's data-theme
onto this document, so in light mode the loose text flips dark while the
hardcoded dark-blue panels keep white text. */
.embed body { background: transparent !important; background-image: none !important; }
/* The light rules below were :root.embed-scoped, which is why the embedded view
rendered correctly in light while the standalone page did not. Unscoped: the
standalone page follows the same theme system now. */
:root[data-theme="light"] body,
:root[data-theme="light"] .text-white { color: #16222e !important; }
/* Panels take the Explore page's translucent brand tint instead of solid navy;
text inherits the theme's body colour. */
/* :not(.pf-section) - .borderstyling sits on section WRAPPERS as well as on cards
(e.g. #summary is "borderstyling pf-section" and contains the cards). A 16% tint
behind a card was invisible on the dark theme; opaque white is a slab covering the
page. Wrappers stay transparent; the departure/arrival cards carry .borderstyling
without .pf-section, so they still paint. */
.pf-headbar, .borderstyling:not(.pf-section), .pf-panel,
.pf-stagepanel, .pf-card,
.e-custombk, .e-inplaceeditor .e-editable-value-container {
background: var(--panel-tint) !important;
color: inherit;
}
:root[data-theme="light"] .pf-card .sub { color: #17669e; }
:root[data-theme="light"] [style*="myfslightblue"],
:root[data-theme="light"] [style*="#9dc3e6"] { color: #17669e !important; }
/* server-rendered SVG charts: white/cyan strokes vanish on the light tint.
CSS outranks SVG presentation attributes, so retarget just those strokes. */
:root[data-theme="light"] svg [stroke="white"] { stroke: #33475c; }
:root[data-theme="light"] svg [stroke="#22d3ee"] { stroke: #0a7ea8; }
/* white hairlines inside panels flip dark on the light tint */
:root[data-theme="light"] .pf-panelhead { border-bottom-color: rgba(0,0,0,.3); }
:root[data-theme="light"] .pf-innerbox { border-color: rgba(0,0,0,.3); }
:root[data-theme="light"] .pf-dash thead td { border-color: rgba(0,0,0,.4); }
:root[data-theme="light"] .pf-dash td { border-color: rgba(0,0,0,.2); }
/* The map is 80vh; inside a self-sizing iframe, vh is a fraction of the iframe height,
which we set from content height -> feedback loop that makes the map grow huge. Pin it
to a fixed pixel height in embed so it opens at a sane size. */
.embed #mapbox.map { height: 640px !important; }
/* In the app, the map is opened in the shared Mapbox session from the embed's top bar
(Index.OpenCommunityFlightMap), so the report's own click-to-load GL map is hidden -
two maps would mean two Mapbox instances, and Mapbox bills per map load. */
.embed #flightmap { display: none !important; }
/* Two vertical scrollbars were visible while the page shimmered: the app's container AND
this document's own. A self-sizing iframe must never scroll internally - the parent does
that - and an inner scrollbar is actively harmful here because it takes width, reflowing
the content narrower and taller, which changes the height we feed back to the frame.
Gated on .embed-fitted (set by _EmbedScript after its first height write) so nothing is
unreachable in the moment before the frame has been sized. */
:root.embed.embed-fitted, :root.embed.embed-fitted body { overflow-y: hidden; }
/* Vertical profile + stabilised approach. Same values as StabilizedBadge.razor so the
public report and the app read identically. */
.pf-profile { text-align: center; margin: 6px 0 2px; }
.pf-profile-title { color: var(--surface-muted-fg); font-size: 12px; margin: 6px 0 2px; }
.sbdg-line { text-align: center; margin: 2px 0 10px; font-size: 12.5px; line-height: 26px; }
.sbdg-pill { border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.sbdg-pill.ok { background: #eef7ee; border: 1px solid #cfe8cf; color: #2e7d32; }
.sbdg-pill.bad { background: #fdecea; border: 1px solid #f5c6c0; color: #c62828; }
.sbdg-sep { margin: 0 7px; color: var(--surface-muted-fg); opacity: .7; }
.sbdg-cond { font-weight: 600; white-space: nowrap; }
.sbdg-cond.ok { color: #2e9e5b; }
.sbdg-cond.bad { color: #c34f4d; }
/* Fuel pill - same values as FuelComparison.razor. */
.pf-fuelcmp { text-align: center; margin: 2px 0 10px; }
.pf-fuelpill { background: #eef2f7; border: 1px solid #d3ddea; color: #33475b;
border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }