/* Shared tokens and components for all pages. */
[hidden] { display: none !important; }  /* even on elements styled display: flex/grid */

/* Inter (SIL Open Font License, fonts/LICENSE-Inter.txt), served from this site:
   no request to a font service. Variable weight; Latin + Latin extended. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Type, shapes and depth: one scale everywhere. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(20, 20, 18, .04), 0 1px 1px rgba(20, 20, 18, .03);
}
/* Colour themes (settings.html, theme.js): Sky & navy by default, or <html data-palette="sky|sectional|golden|cockpit">
   (sky = Sky & runway, the default until the EchoPIC rename, 2026-10-21);
   each in light and dark (system, or <html data-theme>). The altitude ramp is one hue per theme, dark -> light
   = low -> high in dark mode. --on-accent: text on accent fills. */
:root { --bg: #f4f7fb; --surface: #ffffff; --border: #dfe6ef; --ink: #0b1d47; --ink-2: #475a7a; --ink-3: #8593ad; --grid: #e8eef6; --ground: #93a1b8; --cursor: #0b1d47; --accent: #0b1d47; --link: #0369a1; --on-accent: #ffffff; --brand: #0369a1; --alt-0: #bae6fd; --alt-1: #7dd3fc; --alt-2: #38bdf8; --alt-3: #0284c7; --alt-4: #0b1d47; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #071330; --surface: #0d1f45; --border: #1c3163; --ink: #e8f1ff; --ink-2: #a7bbdc; --ink-3: #7186ad; --grid: #142857; --ground: #5d7099; --cursor: #e8f1ff; --accent: #38bdf8; --link: #7dd3fc; --on-accent: #07132f; --brand: #38bdf8; --alt-0: #0c4a6e; --alt-1: #0369a1; --alt-2: #0ea5e9; --alt-3: #38bdf8; --alt-4: #bae6fd; --shadow: 0 1px 2px rgba(0, 0, 0, .35); } }
:root[data-theme="dark"] { --bg: #071330; --surface: #0d1f45; --border: #1c3163; --ink: #e8f1ff; --ink-2: #a7bbdc; --ink-3: #7186ad; --grid: #142857; --ground: #5d7099; --cursor: #e8f1ff; --accent: #38bdf8; --link: #7dd3fc; --on-accent: #07132f; --brand: #38bdf8; --alt-0: #0c4a6e; --alt-1: #0369a1; --alt-2: #0ea5e9; --alt-3: #38bdf8; --alt-4: #bae6fd; --shadow: 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-palette="sky"] { --bg: #f5f7fa; --surface: #ffffff; --border: #e2e7ee; --ink: #14202e; --ink-2: #4e5d6d; --ink-3: #8191a2; --grid: #e9eef4; --ground: #94a0ad; --cursor: #14202e; --accent: #1f6fd1; --link: #1a62bc; --on-accent: #ffffff; --alt-0: #86b6ef; --alt-1: #5598e7; --alt-2: #2a78d6; --alt-3: #1c5cab; --alt-4: #0d366b; }
@media (prefers-color-scheme: dark) { :root[data-palette="sky"]:not([data-theme="light"]) { --bg: #0b1622; --surface: #122235; --border: #22354b; --ink: #e8eef5; --ink-2: #a9b8c9; --ink-3: #7889a0; --grid: #1a2b40; --ground: #64758a; --cursor: #e8eef5; --accent: #3d86e8; --link: #86b6ef; --on-accent: #ffffff; --alt-0: #1c5cab; --alt-1: #2a78d6; --alt-2: #5598e7; --alt-3: #86b6ef; --alt-4: #cde2fb; --shadow: 0 1px 2px rgba(0, 0, 0, .35); } }
:root[data-palette="sky"][data-theme="dark"] { --bg: #0b1622; --surface: #122235; --border: #22354b; --ink: #e8eef5; --ink-2: #a9b8c9; --ink-3: #7889a0; --grid: #1a2b40; --ground: #64758a; --cursor: #e8eef5; --accent: #3d86e8; --link: #86b6ef; --on-accent: #ffffff; --alt-0: #1c5cab; --alt-1: #2a78d6; --alt-2: #5598e7; --alt-3: #86b6ef; --alt-4: #cde2fb; --shadow: 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-palette="sectional"] { --bg: #f4efe3; --surface: #fffdf7; --border: #e2dbc9; --ink: #2a2a26; --ink-2: #5f5b50; --ink-3: #8c877a; --grid: #ece5d4; --ground: #9a9484; --cursor: #2a2a26; --accent: #b0307a; --link: #8e2563; --on-accent: #ffffff; --alt-0: #86b6ef; --alt-1: #5598e7; --alt-2: #2a78d6; --alt-3: #1c5cab; --alt-4: #0d366b; }
@media (prefers-color-scheme: dark) { :root[data-palette="sectional"]:not([data-theme="light"]) { --bg: #1b1d1a; --surface: #24271f; --border: #383b31; --ink: #ece8dc; --ink-2: #bdb8a8; --ink-3: #8e8a7c; --grid: #2e3128; --ground: #76715f; --cursor: #ece8dc; --accent: #d4529c; --link: #ee8cc5; --on-accent: #ffffff; --alt-0: #1c5cab; --alt-1: #2a78d6; --alt-2: #5598e7; --alt-3: #86b6ef; --alt-4: #cde2fb; --shadow: 0 1px 2px rgba(0, 0, 0, .35); } }
:root[data-palette="sectional"][data-theme="dark"] { --bg: #1b1d1a; --surface: #24271f; --border: #383b31; --ink: #ece8dc; --ink-2: #bdb8a8; --ink-3: #8e8a7c; --grid: #2e3128; --ground: #76715f; --cursor: #ece8dc; --accent: #d4529c; --link: #ee8cc5; --on-accent: #ffffff; --alt-0: #1c5cab; --alt-1: #2a78d6; --alt-2: #5598e7; --alt-3: #86b6ef; --alt-4: #cde2fb; --shadow: 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-palette="golden"] { --bg: #fbf7f3; --surface: #ffffff; --border: #ede4da; --ink: #25223a; --ink-2: #5a5670; --ink-3: #8e89a3; --grid: #f2ebe3; --ground: #a29a90; --cursor: #25223a; --accent: #d9541c; --link: #b8460f; --on-accent: #ffffff; --alt-0: #b9b3f5; --alt-1: #8c84ea; --alt-2: #5f55d6; --alt-3: #3b3486; --alt-4: #1e1b4b; }
@media (prefers-color-scheme: dark) { :root[data-palette="golden"]:not([data-theme="light"]) { --bg: #14122b; --surface: #1e1b3d; --border: #322e5a; --ink: #eeeaf8; --ink-2: #bdb8d6; --ink-3: #8d88ab; --grid: #28254b; --ground: #6e698f; --cursor: #eeeaf8; --accent: #ff8a50; --link: #ffb089; --on-accent: #2a1305; --alt-0: #3b3486; --alt-1: #5f55d6; --alt-2: #8c84ea; --alt-3: #b9b3f5; --alt-4: #e2dfff; --shadow: 0 1px 2px rgba(0, 0, 0, .35); } }
:root[data-palette="golden"][data-theme="dark"] { --bg: #14122b; --surface: #1e1b3d; --border: #322e5a; --ink: #eeeaf8; --ink-2: #bdb8d6; --ink-3: #8d88ab; --grid: #28254b; --ground: #6e698f; --cursor: #eeeaf8; --accent: #ff8a50; --link: #ffb089; --on-accent: #2a1305; --alt-0: #3b3486; --alt-1: #5f55d6; --alt-2: #8c84ea; --alt-3: #b9b3f5; --alt-4: #e2dfff; --shadow: 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-palette="cockpit"] { --bg: #eef2f4; --surface: #ffffff; --border: #dce3e8; --ink: #132027; --ink-2: #4c5c66; --ink-3: #7d8d97; --grid: #e5ebee; --ground: #8d9aa2; --cursor: #132027; --accent: #0b7f91; --link: #0a6f7f; --on-accent: #ffffff; --alt-0: #8fdce6; --alt-1: #4cc3d3; --alt-2: #16a2b6; --alt-3: #0e7a8a; --alt-4: #08505b; }
@media (prefers-color-scheme: dark) { :root[data-palette="cockpit"]:not([data-theme="light"]) { --bg: #0b0f12; --surface: #141a1f; --border: #253039; --ink: #e2e9ee; --ink-2: #a8b5be; --ink-3: #7a8892; --grid: #1b232a; --ground: #5d6b75; --cursor: #e2e9ee; --accent: #22b8cf; --link: #6fd6e5; --on-accent: #06262b; --alt-0: #0e7a8a; --alt-1: #16a2b6; --alt-2: #4cc3d3; --alt-3: #8fdce6; --alt-4: #d2f4f8; --shadow: 0 1px 2px rgba(0, 0, 0, .35); } }
:root[data-palette="cockpit"][data-theme="dark"] { --bg: #0b0f12; --surface: #141a1f; --border: #253039; --ink: #e2e9ee; --ink-2: #a8b5be; --ink-3: #7a8892; --grid: #1b232a; --ground: #5d6b75; --cursor: #e2e9ee; --accent: #22b8cf; --link: #6fd6e5; --on-accent: #06262b; --alt-0: #0e7a8a; --alt-1: #16a2b6; --alt-2: #4cc3d3; --alt-3: #8fdce6; --alt-4: #d2f4f8; --shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* Categories in charts (the admin page's costs): a colour-blind-safe set, the same in every
   palette, lighter on dark; none of them red (--danger is reserved). */
:root { --cat-1: #e69f00; --cat-2: #0072b2; --cat-3: #56b4e9; --cat-4: #009e73; --cat-5: #cc79a7; --cat-6: #8e6cc2; --cat-7: #9a9a9a; --cat-8: #b8a12e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cat-1: #f0b43c; --cat-2: #4aa3e0; --cat-3: #8fd0f5; --cat-4: #2bbf8f; --cat-5: #dd9ac2; --cat-6: #ad92e0; --cat-7: #a8a8a8; --cat-8: #d8c55a; } }
:root[data-theme="dark"] { --cat-1: #f0b43c; --cat-2: #4aa3e0; --cat-3: #8fd0f5; --cat-4: #2bbf8f; --cat-5: #dd9ac2; --cat-6: #ad92e0; --cat-7: #a8a8a8; --cat-8: #d8c55a; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--font); font-feature-settings: "cv11", "ss03";  /* Inter: simpler a, round dots */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
/* Base fields and plain buttons: zero specificity (:where), so any page's own rules win. */
:where(main) :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select, textarea) {
  font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); transition: border-color .15s, box-shadow .15s; }
:where(main) :where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
:where(main) :where(button:not([class])) {
  font-size: 13.5px; font-weight: 500; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); }
:where(main) :where(button:not([class])):hover { background: var(--bg); }
main { max-width: 1200px; margin: 0 auto; padding: 28px 24px 56px; }
/* A page inside another (flight.html?embed=1 in an airfield page's player): the stage and replay only. */
html.embed main { max-width: none; padding: 0; }
html.embed main > :not(.stage-panel) { display: none !important; }
html.embed .stage-panel { border: 0; border-radius: 0; box-shadow: none; position: relative; }
html.embed .stage-panel > .legend { display: none; }
html.embed .stage { height: calc(100vh - 56px); }
.embed-play { position: absolute; z-index: 6; left: 50%; top: 45%; transform: translate(-50%, -50%);
  font: inherit; font-size: 18px; font-weight: 600; padding: 12px 22px; border-radius: 28px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.embed-play[hidden] { display: none; }
/* Settings: "Your data". */
.data-panel { padding: 4px 18px 8px; }
.data-panel p { font-size: 14px; }
.big-files { font-size: 14px; padding-left: 20px; }
/* Flight-simulator flights: a chip wherever a flight is named; the pilot's switch and the suggestion. */
.chip.virtual { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 600; line-height: 1.5;
  padding: 1px 8px; border-radius: 10px; letter-spacing: .02em;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.chip.virtual[hidden] { display: none; }
.title-row .chip.virtual { margin-left: 4px; }
.virtual-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-top: 6px; cursor: pointer; }
.virtual-row[hidden] { display: none; }
p.suggest { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius); font-size: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid var(--border); }
p.suggest button { font: inherit; font-size: 13px; margin: 6px 6px 0 0; padding: 4px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
p.suggest button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
header h1 { font-size: 26px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; margin: 0 0 4px; }
header .title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
header .rename { font-size: 13px; }
header .rename-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
header .rename-form input { font: inherit; font-size: 18px; font-weight: 600; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); min-width: min(420px, 100%); flex: 1 1 280px; }
.card h3 .route { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.name-it { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 2px 32px; }
.name-it input { font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); flex: 1 1 260px; max-width: 420px; }
header p { margin: 0; color: var(--ink-2); }
header .back { color: var(--ink-2); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 6px; }
header .back:hover { color: var(--ink); }
header .note { color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.legend .gap { display: inline-block; width: 18px; border-top: 2px dotted var(--ground); vertical-align: middle; }

.stats {
  display: grid; gap: 8px; margin: 16px 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow); }
.stat .label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.stat .value { font-size: 24px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.stat .sub { color: var(--ink-3); font-size: 12px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); }
#map { height: 520px; }
@media (max-width: 640px) { #map { height: 360px; } }
/* The flight page's map stage: the map, and the replay's corner window for
   photos and videos (moments.js); "swapped" = video full size, map in the corner. */
.stage { position: relative; height: 520px; overflow: hidden; }
@media (max-width: 640px) { .stage { height: 360px; } }
.stage #map { position: absolute; inset: 0; height: auto; transition: all .3s ease; }
.stage .pip { position: absolute; top: 12px; right: 56px; width: min(320px, 46%); aspect-ratio: 16 / 10; z-index: 3;
  background: #000; border-radius: 8px; overflow: hidden; border: 2px solid var(--surface); transition: all .3s ease; }
.stage .pip video, .stage .pip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage .pip video { cursor: pointer; }
.stage .pip-sign { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; color: #fff; background: rgba(0,0,0,.5); pointer-events: none; opacity: 0; }
.stage .pip-sign.show { animation: pip-sign .7s ease-out; }
@keyframes pip-sign { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.stage .pip-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.stage .pip-label { flex: 1; }
.stage .pip-bar button { font: inherit; font-size: 14px; line-height: 1; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.15); border: 0; border-radius: 4px; padding: 3px 7px; }
/* Sequences in the videos (sequences.js): the list under the map, bars under the profile. */
.sequences { margin: 32px 0 4px; }
.sequences .seq-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sequences .seq-head h2 { margin: 0; }
.sequences .seq-head .muted { font-size: 13px; }
.sequences h3 { font-size: 13px; margin: 12px 0 4px; color: var(--ink-2); }
.seq-list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); }
.seq-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--border);
  font-size: 14px; flex-wrap: wrap; }
.seq-list li:first-child { border-top: 0; }
.seq-list .seq-label { flex: 1 1 160px; }
.seq-list .seq-time { font-size: 12px; font-variant-numeric: tabular-nums; }
.seq-list .seq-play { font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--ink); padding: 2px 8px; }
.seq-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.seq-dot.departure, .seq-bar.departure { background: var(--alt-2); fill: var(--alt-2); }
.seq-dot.arrival, .seq-bar.arrival { background: var(--alt-1); fill: var(--alt-1); }
.seq-dot.circuit, .seq-bar.circuit { background: var(--alt-3); fill: var(--alt-3); }
.seq-dot.landing, .seq-bar.landing { background: var(--alt-4); fill: var(--alt-4); }
.seq-dot.takeoff, .seq-bar.takeoff { background: var(--alt-2); fill: var(--alt-2); }
.seq-dot.approach, .seq-bar.approach { background: var(--alt-4); fill: var(--alt-4); }
.seq-dot.enroute, .seq-bar.enroute { background: var(--alt-0); fill: var(--alt-0); }
.seq-dot.taxi, .seq-bar.taxi { background: var(--ground); fill: var(--ground); }
.seq-dot.mine, .seq-bar.mine { background: var(--ink); fill: var(--ink); }
.seq-dot.star, .seq-bar.star { background: #f2a93b; fill: #f2a93b; }  /* starred moments: the brand amber */
.seq-bar { cursor: pointer; opacity: .85; }
.seq-bar.editing { opacity: 1; stroke: var(--accent); stroke-width: 2; }
.seq-handle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; cursor: ew-resize; touch-action: none; }
.seq-list li.seq-edit { display: block; padding: 10px 12px; background: var(--bg); }
.seq-edit > input { font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); width: min(420px, 100%); }
.seq-bounds { display: grid; gap: 6px; margin: 8px 0 4px; }
.seq-bound { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.seq-bound .seq-which { width: 40px; color: var(--ink-2); }
.seq-bound .seq-at { min-width: 140px; font-variant-numeric: tabular-nums; }
.seq-bound button, .sequences .seq-add { font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--ink); padding: 3px 8px; }
.sequences .seq-add { font-size: 13px; padding: 4px 10px; margin-left: auto; }
.seq-hint { font-size: 12px; margin: 2px 0 8px; }
.seq-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seq-bar:hover { opacity: 1; }
/* The replay's live figures, head-up over the map or the video (replay.js). */
.stage .hud { position: absolute; top: 52px; left: 10px;  /* top: set under the map's top-left buttons (flight.html) */ z-index: 5; display: grid; grid-template-columns: auto auto;
  gap: 1px 12px; padding: 7px 11px; border-radius: 8px; background: rgba(15, 18, 22, .58); color: #fff;
  font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; pointer-events: none;
  backdrop-filter: blur(2px); }
.stage .hud .r-time { grid-column: 1 / -1; font-weight: 600; font-size: 13px; }
.stage .hud .r-alt { font-size: 18px; font-weight: 600; }
.stage .hud .r-vs { font-size: 13px; align-self: end; padding-bottom: 2px; }
.stage .hud .r-gs, .stage .hud .r-agl { color: rgba(255, 255, 255, .82); }
.stage .hud.gap .r-vs { font-style: italic; opacity: .7; }
@media (max-width: 640px) { .stage .hud { font-size: 11px; padding: 5px 8px; } .stage .hud .r-alt { font-size: 15px; } }
.stage.swapped .pip { top: 0; right: 0; width: 100%; height: 100%; border-width: 0; border-radius: 0; z-index: 1; }
.stage.swapped #map { inset: auto auto 40px 12px; width: min(260px, 42%); height: 38%; z-index: 4;
  border: 2px solid var(--surface); border-radius: 8px; overflow: hidden; }
.stage.swapped #map .maplibregl-ctrl-top-left, .stage.swapped #map .maplibregl-ctrl-top-right,
.stage.swapped #map .maplibregl-ctrl-bottom-left { display: none; }
.stage.swapped #map .maplibregl-ctrl-attrib:not(:hover) .maplibregl-ctrl-attrib-inner { display: none; }  /* credits: on the ⓘ */

/* New member without a profile (nav.js), and what to do next (profile.html). */
.welcome-banner { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--surface); font-size: 14px; }
.welcome-banner a { color: var(--link); margin-left: 6px; }
.next-steps { padding: 14px 16px; margin-top: 12px; }
.next-steps p { margin: 0 0 10px; }
.next-actions { display: flex; flex-wrap: wrap; gap: 8px; }
a.button { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; text-decoration: none;
  border-radius: 8px; padding: 6px 14px; border: 1px solid var(--border); color: var(--ink); background: var(--surface);
  box-shadow: var(--shadow); }
a.button:hover { background: var(--bg); }
a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Track replay (replay.js), between the map and its legend: a slim toolbar. */
.replay { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px;
  border-top: 1px solid var(--border); font-size: 13px; }
.replay button { font: inherit; font-size: 13px; line-height: 1; cursor: pointer; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2); padding: 7px 9px; min-width: 32px; }
.replay button:hover { background: var(--bg); color: var(--ink); }
.replay button.replay-play { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: 14px; box-shadow: 0 1px 3px rgba(28, 92, 171, .35); }
.replay button.replay-play:hover { filter: brightness(1.08); background: var(--accent); color: var(--on-accent); }
.replay .replay-track { flex: 1 1 200px; min-width: 140px; position: relative; display: flex; align-items: center; }
.replay .replay-slider { flex: 1; min-width: 0; accent-color: var(--accent); margin: 0; }
/* Sequence starts on the time bar: --at = 0..1 along the track (the thumb's 8 px at each end aside). */
.replay .replay-marks { position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; pointer-events: none; }
.replay button.replay-mark { position: absolute; left: calc(var(--at) * 100%); top: -2px; width: 4px; min-width: 0; height: 8px;
  padding: 0; margin-left: -2px; border-radius: 2px; pointer-events: auto; background: var(--ink-3); }
.replay button.replay-mark:hover { background: var(--ink); transform: scaleY(1.4); }
.replay button.replay-mark.takeoff { background: var(--alt-2); }
.replay button.replay-mark.approach { background: var(--alt-4); }
.replay button.replay-mark.enroute { background: var(--alt-0); }
.replay button.replay-mark.taxi { background: var(--ground); }
.replay button.replay-mark.mine { background: var(--ink); }
.replay button.replay-mark.star { background: #f2a93b; }
.replay .replay-star { font-size: 18px; line-height: 1; min-width: 36px; color: #c98410; }
.replay .replay-star[aria-pressed="true"] { color: #f2a93b; }
.replay .replay-star:disabled { color: var(--ink-3); opacity: .5; }
/* Chapters: the list on the replay bar, and the current one's name over the stage (replay.js). */
.replay .replay-chapters-wrap { position: relative; }
.replay .replay-chapters { white-space: nowrap; }
.replay .replay-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; display: flex; flex-direction: column;
  min-width: 260px; max-width: min(380px, 86vw); max-height: 320px; overflow-y: auto; padding: 4px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.replay .replay-menu-item { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none;
  padding: 7px 8px; border-radius: var(--radius-sm); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.replay .replay-menu-item:hover, .replay .replay-menu-item.now { background: var(--bg); }
.replay .replay-menu-item span { flex: 1; }
.replay .replay-menu-item small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.replay .replay-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.replay .replay-dot.takeoff { background: var(--alt-2); }
.replay .replay-dot.approach { background: var(--alt-4); }
.replay .replay-dot.enroute { background: var(--alt-0); }
.replay .replay-dot.taxi { background: var(--ground); }
.replay .replay-dot.mine { background: var(--ink); }
.replay .replay-dot.star { background: #f2a93b; }
.stage .chapter-now { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: 12px; max-width: 80%;
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; }
.replay button.replay-full { font-size: 16px; }
/* Full screen replay: the stage fills what the bar leaves (browser full screen, or the window). */
.stage-panel:fullscreen, .stage-panel.full { display: flex; flex-direction: column; background: var(--surface);
  border-radius: 0; border: 0; }
.stage-panel.full { position: fixed; inset: 0; z-index: 1000; }
body.has-full { overflow: hidden; }
.stage-panel:fullscreen .stage, .stage-panel.full .stage { flex: 1 1 auto; height: auto; min-height: 0; }
.stage-panel:fullscreen > .legend, .stage-panel.full > .legend { display: none; }
.replay select { font: inherit; font-size: 13px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); }
.replay .replay-follow { color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 13px; }
.replay .replay-readout { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.replay .replay-readout .r-time { color: var(--ink); font-weight: 600; }
.maplibregl-ctrl-group button.flyover-toggle { width: auto; padding: 0 9px; font: 600 12px/29px system-ui, sans-serif;
  color: #333; }
.replay.gap .r-vs { color: var(--ink-3); font-style: italic; }
.legend { display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px; color: var(--ink-3); font-size: 12px;
  flex-wrap: wrap; border-top: 1px solid var(--border); }
.legend .ramp { width: 160px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--alt-0), var(--alt-1), var(--alt-2), var(--alt-3), var(--alt-4)); }
.legend .ground { display: inline-block; width: 18px; border-top: 2px dashed var(--ground); vertical-align: middle; }

h2 { font-size: 16px; font-weight: 650; letter-spacing: -.005em; margin: 28px 0 10px; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: 220px; }
.chart .axis text { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .grid line { stroke: var(--grid); }
/* charts.js: legend, hovered column, the tooltip's swatches. */
.chart .seg.hover, .chart .dot.hover { filter: brightness(1.12); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 12px 8px; font-size: 12px; color: var(--ink-2); }
.chart-legend i, .tooltip .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tooltip {
  position: absolute; pointer-events: none; display: none; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  font-variant-numeric: tabular-nums;
}
.tooltip b { font-weight: 600; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--ink-2); font-weight: 500; font-size: 12px; }
tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg); }

.error { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.error code { background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.maplibregl-popup-content { background: var(--surface); color: var(--ink); }
.muted { color: var(--ink-3); }
/* Tabs between a section's pages (the admin pages). */
.subnav { display: flex; gap: 4px; margin: 8px 0 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.subnav a { padding: 6px 12px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.subnav a:hover { color: var(--ink); }
.footnote { color: var(--ink-3); font-size: 12px; margin: 8px 2px 0; max-width: 80ch; }
.table-wrap { overflow-x: auto; }
/* Sortable headers and the search box above a table (tables.js). */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: "↕"; margin-left: 4px; font-size: 10px; opacity: .35; }
th.sortable[aria-sort="ascending"]::after { content: "▲"; opacity: .9; color: var(--accent); }
th.sortable[aria-sort="descending"]::after { content: "▼"; opacity: .9; color: var(--accent); }
.table-search { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.table-search input { flex: 1 1 auto; max-width: 420px; padding-left: 32px !important;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238191a2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 10px center / 16px; }
.table-search .count { font-size: 12.5px; font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }
.legs td { white-space: nowrap; vertical-align: middle; }
.legs tbody tr { cursor: default; }
.crew { padding: 12px; overflow: visible; }  /* let suggestion lists overflow the panel */
.crew-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.crew-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
.crew input, .crew select, .crew button {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
}
.crew input::placeholder { color: var(--ink-3); }
.crew input:disabled, .crew select:disabled { opacity: .6; }
.crew button.primary { cursor: pointer; background: var(--ink); color: var(--surface); border-color: var(--ink); }
.crew button.primary:disabled { cursor: default; opacity: .35; }
.crew .status { font-size: 12px; margin-left: 8px; }
.crew-actions { display: flex; align-items: center; flex-wrap: wrap; min-height: 32px; }
.crew-note { font-size: 12px; margin: 0 0 8px; }
.crew .legs select { font-size: 13px; padding: 3px 6px; }
.crew button.link {
  cursor: pointer; border: 0; background: none; padding: 0; font-size: 12px;
  color: var(--alt-3); text-decoration: underline;
}
/* Suggestion list under a text field (see combobox() in flight.html). */
.combo { position: relative; display: block; }
.combo input { width: 100%; }
.combo-list {
  position: fixed; z-index: 10;  /* placed by combobox() from the field's position */
  max-height: 220px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); color: var(--ink); font-size: 14px;
}
.combo-list li { padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.combo-list li:hover, .combo-list li.active { background: var(--bg); }
.crew .legs .place input { font-size: 13px; padding: 3px 6px; width: 7em; }
.crew .legs .place input:not(:placeholder-shown) { font-weight: 600; }  /* entered, not detected */
header .nav { float: right; font-size: 13px; }
header .nav a { color: var(--ink-2); text-decoration: none; }
header .nav a:hover { color: var(--ink); }
.crew .legs tbody tr { cursor: pointer; }
.crew .legs tbody tr:hover { background: var(--bg); }
.crew .legs tbody tr.pinned { background: var(--bg); box-shadow: inset 3px 0 0 var(--ink-2); }
/* Confirmation dialog (confirmDialog() in inputs.js). */
dialog.confirm {
  border: 1px solid var(--border); border-radius: 10px; padding: 20px; max-width: 440px;
  background: var(--surface); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
dialog.confirm::backdrop { background: rgba(0,0,0,.45); }
/* The teaser dialog (teaser.js): progress, then the clip, the text to share, Share/Save. */
dialog.confirm.teaser { max-width: 560px; width: calc(100% - 32px); }
dialog.teaser video { width: 100%; max-height: 50vh; background: #000; border-radius: var(--radius); margin: 4px 0 10px; }
dialog.teaser textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; resize: none; margin-bottom: 12px;
  padding: 8px; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
dialog.teaser .upload-bar { margin: 0 0 8px; }
dialog.reel video { max-height: 60vh; width: auto; max-width: 100%; display: block; margin-inline: auto; aspect-ratio: 9 / 16; }
dialog.reel .reel-sound { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
dialog.reel .reel-sound legend { font-weight: 600; padding: 0 4px; }
dialog.reel .reel-sound label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
dialog.confirm h2 { margin: 0 0 8px; font-size: 16px; }
dialog.confirm p { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.confirm-actions button {
  font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
/* Destructive = red, reserved for delete actions only. */
:root { --danger: #c62828; --good: #2e7d32; }  /* danger carries white text */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger: #d32f2f; --good: #66bb6a; } }
:root[data-theme="dark"] { --danger: #d32f2f; --good: #66bb6a; }
a { color: var(--link); }
.danger-solid { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.danger-link {
  font: inherit; font-size: 13px; cursor: pointer; background: none; border: 1px solid var(--border);
  color: var(--danger); border-radius: 6px; padding: 5px 10px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .danger-link { color: #ef9a9a; } }

/* Prominent "Add a flight" call to action. */
.add-flight {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px;
  padding: 10px 18px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.add-flight:hover { filter: brightness(1.1); }
.add-flight .plus { font-size: 20px; line-height: 1; }
header.with-action { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.delete-zone { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); }
header .nav-inline { margin-top: 6px; font-size: 13px; }
header .nav-inline a { color: var(--ink-2); text-decoration: none; }
header .nav-inline a:hover { color: var(--ink); }
/* Sidebar (nav.js): sections on the left; a bar on top on narrow screens. */
body.has-sidebar { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100vh; }
body.has-sidebar > main { min-width: 0; width: 100%; box-sizing: border-box; }  /* shrink into its column */
.sidebar { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px;
  padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--border); }
.sidebar svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px; text-decoration: none; }
.sidebar .brand img { border-radius: 8px; flex: none; }
/* The wordmark: "PiC" (pilot in command, pictures) bold, "share" in the accent. */
/* EchoPIC: "E" and "PIC" in the brand's sky blue, "cho" grey (--brand: the default palette's; others keep it). */
.wordmark { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink-3); line-height: 1; }
.wordmark b { font-weight: inherit; color: var(--brand, #0369a1); }
.sidebar .item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; border: 0;
  background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  cursor: pointer; text-align: left; }
.sidebar .item:hover { background: var(--bg); color: var(--ink); }
.sidebar .item[aria-current="page"] { background: var(--bg); color: var(--ink); font-weight: 650; }
.sidebar .item[aria-current="page"] svg { color: var(--accent); }
.sidebar .item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .legal-links { padding: 8px 10px 0; font-size: 12px; color: var(--ink-3); }
.sidebar .legal-links a { color: var(--ink-3); text-decoration: none; }
.sidebar .legal-links a:hover { color: var(--ink); text-decoration: underline; }
.sidebar .add { color: var(--accent); margin-top: 8px; }
.sidebar .badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.sidebar .grow { flex: 1; }
.topbar, .tabbar { display: none; }
.topbar svg, .tabbar svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.topbar .badge, .tabbar .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
@media (max-width: 720px) {
  body.has-sidebar { display: block; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  /* Top: the section's name and a few tools. */
  .topbar { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 20;
    /* Below the clock and notch when the page runs edge to edge (the iPhone app). */
    padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left)); background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
  .topbar .title { flex: 1; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
  .topbar .mark { display: flex; margin-right: 6px; }
  .topbar .mark img { border-radius: 7px; }
  .topbar .tool { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    border: 0; background: none; color: var(--ink-2); cursor: pointer; }
  .topbar .tool:hover { background: var(--bg); color: var(--ink); }
  /* Bottom: the five main sections, thumb-reachable. */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--border); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    font-size: 11px; font-weight: 550; color: var(--ink-3); text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a[data-key="add"] svg { width: 26px; height: 26px; padding: 3px; border-radius: 9px; color: var(--on-accent);
    background: var(--accent); stroke-width: 2.2; }
  .tabbar .avatar { width: 22px; height: 22px; font-size: 9px; }
  .tabbar a[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--accent); }
  main { padding: 18px 16px 32px; }
  header h1 { font-size: 22px; }
  header h1.same-as-topbar { display: none; }
  header.with-action > .add-flight { display: none; }  /* the tab bar has "+ Add" */
  /* The "⋯" menu: settings, admin, sign out, legal pages. */
  .topbar .more-wrap { position: relative; }
  .topbar .more-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; padding: 6px; z-index: 30;
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
  .topbar .more-menu[hidden] { display: none; }
  .topbar .more-menu a, .topbar .more-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 10px;
    border-radius: 8px; font: inherit; font-size: 15px; color: var(--ink); text-decoration: none; background: none;
    border: 0; text-align: left; cursor: pointer; }
  .topbar .more-menu a:active, .topbar .more-menu button:active { background: var(--bg); }
  .topbar .more-menu .legal { padding: 8px 10px 4px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--border); margin-top: 4px; }
  .topbar .more-menu .legal a { display: inline; padding: 0; font-size: 12px; color: var(--ink-3); }
  /* Phones: a field under 16 px makes iOS zoom in when tapped. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
  /* App-like touch: no grey flash on tap, no text selection or callouts on the bars. */
  .topbar, .tabbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
html { -webkit-tap-highlight-color: transparent; }
/* Pull to refresh in the iPhone/iPad app (nav.js): a ring following the finger. */
.pull-refresh { position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px);
  width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; color: var(--ink-3); background: var(--surface); box-shadow: var(--shadow);
  transform: translateY(calc(var(--pull, 0) * 40px)) rotate(calc(var(--pull, 0) * 300deg)); opacity: calc(.3 + var(--pull, 0) * .7); }
.pull-refresh.ready { color: var(--accent); }
/* The site's version, under the legal links (nav.js). */
.version { display: block; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 4px; }
.pull-refresh.spinning { animation: pull-spin .8s linear infinite; }
@keyframes pull-spin { to { transform: translateY(40px) rotate(360deg); } }

/* Tables (tables.js): the "Sort" menu is for phones, where headers are hidden. */
.table-sort { display: none; font: inherit; font-size: 14px; padding: 7px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); max-width: 46%; }
.table-search.sort-only { display: none; }
@media (max-width: 600px) {
  .table-sort, .table-search.sort-only { display: flex; }
  .table-search.sort-only { justify-content: flex-end; }
  .table-search { flex-wrap: wrap; }
  .table-search input { min-width: 0; flex: 1 1 150px; }
  .table-sort { max-width: 100%; margin-left: auto; }
  /* Cards: the page scrolls, not a box inside it. */
  .table-wrap:has(> table.stack) { max-height: none; overflow: visible; }
  /* Each row a small card: column names as labels. */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: auto; }
  table.stack thead { display: none; }
  table.stack tr { padding: 10px 14px; border-top: 1px solid var(--border); }
  table.stack tbody tr:first-child { border-top: 0; }
  table.stack tr[hidden] { display: none; }
  table.stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0 !important;
    border: 0 !important; text-align: right !important; white-space: normal; }
  table.stack td::before { content: attr(data-label); flex: none; color: var(--ink-3); font-size: 13px; font-weight: 500;
    text-align: left; }
  table.stack td[data-label=""]::before { content: none; }
  table.stack td[data-label=""] { justify-content: flex-end; }
  table.stack td:first-child { font-weight: 600; }
  table.stack td[colspan] { display: block; text-align: left !important; }
  table.stack td[colspan]::before { content: none; }
}
/* Lists of members (members, followers…) and their small action buttons. */
ul.people, ul.results { list-style: none; margin: 0; padding: 0; }
ul.people li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
ul.people li:last-child { border-bottom: 0; }
ul.people li > a { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
ul.people .name { font-weight: 600; }
ul.people .home { color: var(--ink-3); font-size: 13px; }
ul.people .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
button.primary, button.link-button { font: inherit; font-size: 13.5px; cursor: pointer; border-radius: 8px; padding: 6px 14px; }
button.primary { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); font-weight: 550; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.link-button { background: none; border: 0; padding: 4px 2px; color: var(--ink-2); text-decoration: underline; }
button.link-button.danger-link { color: var(--danger); }
button.primary:disabled, button.link-button:disabled { opacity: .5; cursor: default; }
/* Likes & comments (reactions.js). */
button.like { font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--border); border-radius: 14px;
  padding: 3px 12px; background: var(--surface); color: var(--ink-2); }
button.like[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.like-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
button.like-count { font: inherit; font-size: 13px; cursor: pointer; border: 0; background: none; padding: 3px 4px;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.likers-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 200px; max-width: 280px;
  max-height: 260px; overflow-y: auto; padding: 6px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.likers-panel .title { margin: 2px 6px 6px; font-size: 12px; color: var(--ink-3); }
.likers-panel p { margin: 4px 6px; font-size: 13px; }
.likers-panel ul { list-style: none; margin: 0; padding: 0; }
.likers-panel a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px;
  color: var(--ink); text-decoration: none; }
.likers-panel a:hover, .likers-panel a:focus { background: var(--bg); }
.reactions { padding: 12px 14px; }
.reaction-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.reactions .comments { list-style: none; margin: 10px 0 0; padding: 0; }
.reactions .comments li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.reactions .meta { font-size: 12px; }
.reactions .meta a { color: var(--ink); font-weight: 600; text-decoration: none; }
.reactions .text { margin: 2px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.comment-form textarea { flex: 1; font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 6px; resize: vertical;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.emoji-wrap { position: relative; display: inline-flex; }
.emoji-toggle { font-size: 18px; line-height: 1; cursor: pointer; background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px; }
.emoji-panel { position: absolute; bottom: calc(100% + 4px); right: 0; z-index: 20; width: 236px; display: grid;
  grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 6px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.emoji-panel button { font-size: 20px; line-height: 1; padding: 4px; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.emoji-panel button:hover, .emoji-panel button:focus { background: var(--bg); }
.story-actions .emoji-panel { right: auto; left: 0; }  /* the story box: the button sits at the left */
/* Airspace (airspace.js). */
.airspace-toggle { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer;
  color: #333; background: #fff; }
.airspace-popup { font-size: 12px; line-height: 1.4; color: #222; }
.airspace-popup hr { border: 0; border-top: 1px solid #ddd; margin: 6px 0; }
.airspace-popup .muted { color: #666; }
table.airspace tbody tr[data-k] { cursor: pointer; }
table.airspace tbody tr[data-k]:hover { background: var(--bg); }
/* Members (members.js): round avatar, photo or initials. */
.avatar { --size: 40px; flex: 0 0 auto; display: inline-grid; place-items: center; width: var(--size); height: var(--size);
  border-radius: 50%; background: var(--alt-2) center / cover no-repeat; color: #fff; font-weight: 600;
  font-size: calc(var(--size) * .38); }
/* "Who can see this flight" selector. */
label.visibility { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
label.visibility select {
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; box-shadow: var(--shadow);
}
.choice label.visibility { margin: 0 0 12px; }
/* Photos (photos.js). */
.section-head { display: flex; align-items: center; gap: 12px; margin: 32px 0 10px; }
.section-head h2 { margin: 0; }
.section-head .unit { font-size: 13px; }
/* The flight page's header: what it is on the left, who can see it on the right. */
.flight-head .head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.flight-head .head-main { min-width: 0; flex: 1 1 360px; }
.flight-head .head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.flight-head .head-side label.visibility { margin: 4px 0 0; }
.flight-head .meta { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .flight-head .head-side { align-items: flex-start; }
  /* Tables on a phone: tighter, smaller. */
  table.airspace th, table.airspace td, table.legs th, table.legs td { padding: 6px 8px; font-size: 13px; }
  table.airspace td:nth-child(5) { font-size: 12px; color: var(--ink-3); }
}
/* Explanations: folded away until asked for. */
details.about { margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-3); max-width: 80ch; line-height: 1.5; }
details.about summary { cursor: pointer; color: var(--ink-2); font-weight: 500; list-style: none; display: inline-flex;
  align-items: center; gap: 5px; }
details.about summary::-webkit-details-marker { display: none; }
details.about summary::before { content: "ⓘ"; font-size: 13px; }
details.about[open] summary { margin-bottom: 4px; }
.flight-head details.about { text-align: right; max-width: 34ch; }
@media (max-width: 720px) { .flight-head details.about { text-align: left; } }
.add-photos {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 6px; padding: 5px 12px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.photos { padding: 12px; }
/* An upload's progress (photos.js showBar). */
.upload-bar { height: 8px; margin: 10px 0 0; border-radius: 4px; background: var(--border); overflow: hidden; }
.upload-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
/* Several uploads at once (photos.js uploadRow): one row each, its own bar. */
.upload-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.upload-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; font-size: 13px; }
.upload-list .upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.upload-list .upload-state { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.upload-list .upload-bar { grid-column: 1 / -1; margin: 2px 0 0; height: 6px; }
.upload-list li.done .upload-state { color: var(--ink-2); }
.upload-list li.failed .upload-state { color: var(--ink); font-weight: 600; }
/* The storyboard (photos.js): the flight down a time line, its photos, videos and sequences on it. */
.storyboard { list-style: none; margin: 0; padding: 0; }
.sb-row { display: grid; grid-template-columns: 48px 18px minmax(0, 1fr); gap: 0 8px; align-items: center; position: relative; }
.sb-row::before { content: ""; position: absolute; left: 64px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.sb-time { font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.sb-dot { justify-self: center; width: 12px; height: 12px; border-radius: 50%; position: relative; z-index: 1;
  border: 2px solid var(--surface); }
.sb-dot.public { background: var(--accent); }
.sb-dot.private { background: var(--ink-3); }
.sb-dot.event { width: 8px; height: 8px; background: var(--ink-3); }
.sb-dot.clip { background: var(--surface); border: 2px solid var(--accent); }
/* A procedure clip (procedures.py): its name, then each camera covering it. */
.sb-card.sb-proc { display: block; border-style: dashed; }
.sb-feeds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.sb-feed { display: grid; gap: 4px; justify-items: start; max-width: 160px; }
.sb-feed .sb-frame { flex: none; width: 140px; }
.sb-feed .sb-player { width: min(480px, 100%); }
.sb-feeds:has(.sb-player) .sb-feed:has(.sb-player) { max-width: none; flex: 1 1 100%; }
/* The flight-wide switch: its procedure clips on the airfield pages. */
.sb-share { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg); font-size: 13.5px; }
.sb-share .pp-label { min-width: 72px; }
.sb-event { font-size: 12.5px; color: var(--ink-3); padding: 6px 0; }
.sb-card { display: flex; gap: 12px; align-items: center; padding: 8px 10px; margin: 4px 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); min-width: 0; }
.sb-card .photo { flex: 0 0 112px; aspect-ratio: 16 / 9; }
.sb-card.private .photo img { filter: grayscale(1) brightness(.85); }
.sb-seq { margin-left: 24px; border-style: dashed; }
.sb-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
  color: var(--ink); cursor: pointer; font-size: 12px; }
.sb-text { flex: 1; min-width: 0; }
.sb-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-sub { font-size: 12.5px; }
.sb-note { font-size: 12.5px; color: var(--ink-2); }
.sb-summary { margin: 0 0 8px; font-size: 13px; }
.sb-loose { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 16px 0 4px; }
/* Public / Private: a sliding switch (on = public). */
.pp-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px;
  color: var(--ink-2); position: relative; }
.pp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-track { width: 36px; height: 20px; border-radius: 10px; background: var(--ink-3); position: relative; transition: background .15s; }
.pp-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.pp-toggle input:checked + .pp-track { background: var(--accent); }
.pp-toggle input:checked + .pp-track::after { transform: translateX(16px); }
.pp-toggle input:focus-visible + .pp-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-label { min-width: 46px; }
/* A sequence's picture (its frame, over the video's thumbnail) and its player in place. */
.sb-frame { flex: 0 0 112px; aspect-ratio: 16 / 9; position: relative; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; }
.sb-frame img, .sb-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-frame canvas { opacity: 0; transition: opacity .2s; }
.sb-frame canvas.ready { opacity: 1; }
.sb-frame .badge { position: absolute; top: 5px; left: 5px; padding: 1px 6px; border-radius: 9px; font-size: 11px;
  background: rgba(0, 0, 0, .6); color: #fff; }
.sb-card.private .sb-frame canvas, .sb-card.private .sb-frame img { filter: grayscale(1) brightness(.8); }
.sb-player { flex: 1 1 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; }
.sb-card:has(.sb-player) { flex-wrap: wrap; }
.sb-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; font-size: 12.5px; }
.sb-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.sb-tools button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.sb-editor { display: block; padding-left: 74px; }
.sb-editor::before { display: none; }
.sb-editor .sequences { margin: 0 0 6px; }
.sb-title .seq-dot { display: inline-block; vertical-align: middle; margin-right: 2px; }
@media (max-width: 600px) {
  .sb-row { grid-template-columns: 40px 14px minmax(0, 1fr); gap: 0 6px; }
  .sb-row::before { left: 52px; }
  .sb-card { flex-wrap: wrap; }
  .sb-card .photo { flex-basis: 96px; }
  .sb-card .pp-toggle { margin-left: auto; }
  .sb-editor { padding-left: 0; }
  .sb-seq { margin-left: 12px; }
}
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.photo-grid .empty { margin: 0; font-size: 13px; }
.photo { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--bg); cursor: pointer; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .when { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 11px; text-align: left;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.photo img:not([src]) { visibility: hidden; }  /* no still yet: just the tile */
.photo .badge { position: absolute; top: 5px; left: 5px; padding: 1px 6px; border-radius: 9px; font-size: 11px;
  color: #fff; background: rgba(0,0,0,.6); }
.photo .lock { position: absolute; top: 5px; right: 5px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px;
  background: rgba(0, 0, 0, .6); }
.photo .state { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.45); }
.photos .status { font-size: 13px; margin: 8px 0 0; }
/* Your own flight: drop photos/videos onto the panel. */
.panel.photos.dropzone { border: 2px dashed var(--border); transition: border-color .15s, background .15s; }
.panel.photos.dropzone.over { border-color: var(--accent); background: var(--bg); }
.photos .empty.choose { grid-column: 1 / -1; padding: 28px 12px; text-align: center; cursor: pointer; font-size: 14px; }
.photos .empty.choose:hover, .photos .empty.choose:focus-visible { color: var(--ink); outline: none; }
.photos .drop-icon { font-size: 26px; line-height: 1; }
.photos .drop-hint { font-size: 12px; margin: 8px 0 0; }
.photos .status:empty { display: none; }
.photo-marker {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; padding: 0; cursor: pointer;
  background: var(--surface) center / cover no-repeat; box-shadow: 0 1px 4px rgba(0,0,0,.4); font-size: 16px;
}
.photo-marker.has-thumb span { display: none; }
.photo-marker.video.has-thumb::after { content: "▶"; color: #fff; font-size: 12px; text-shadow: 0 0 3px #000; }
.chart .photo-tick { cursor: pointer; }
.chart .photo-tick line { stroke: var(--ink-3); stroke-dasharray: 2 3; }
.chart .photo-tick text { font-size: 11px; }
.chart .photo-tick .span { fill: var(--alt-2); opacity: .18; }
dialog.photo-viewer {
  border: 0; border-radius: 10px; padding: 0; max-width: min(1100px, 96vw); background: var(--surface); color: var(--ink);
}
dialog.photo-viewer::backdrop { background: rgba(0,0,0,.75); }
dialog.photo-viewer figure { margin: 0; }
dialog.photo-viewer .stage { position: relative; min-height: 200px; touch-action: pan-y; user-select: none; }
dialog.photo-viewer img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; }
dialog.photo-viewer video { display: block; width: 100%; max-height: 78vh; background: #000; }
dialog.photo-viewer .load-error { padding: 80px 20px; text-align: center; margin: 0; }
dialog.photo-viewer .nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: 0; padding: 0 0 4px; font-size: 30px; line-height: 1; cursor: pointer; color: #fff; background: rgba(0,0,0,.45);
}
dialog.photo-viewer .nav:hover { background: rgba(0,0,0,.65); }
dialog.photo-viewer .nav[hidden] { display: none; }
dialog.photo-viewer .prev { left: 10px; }
dialog.photo-viewer .next { right: 10px; }
dialog.photo-viewer figcaption { padding: 10px 14px 0; font-size: 13px; color: var(--ink-2); }
dialog.photo-viewer figcaption .muted { display: block; font-size: 12px; margin-top: 2px; }
.viewer-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px 14px; }
.viewer-actions button { font: inherit; font-size: 13px; cursor: pointer; border-radius: 6px; padding: 5px 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.viewer-actions .danger-link { color: var(--danger); }
.viewer-actions .counter { margin-right: auto; align-self: center; font-size: 13px; }
.viewer-actions .danger-link + .counter { margin-left: 8px; }
.viewer-actions .like-slot { align-self: center; }
.viewer-actions [data-act="privacy"][aria-pressed="true"] { border-color: var(--ink-2); font-weight: 600; }
.viewer-actions button.like { border-radius: 14px; padding: 3px 12px; color: var(--ink-2); }
.viewer-actions button.like[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.viewer-actions button.like-count { border: 0; background: none; padding: 3px 4px; color: var(--ink-2); }
.viewer-actions .likers-panel { top: auto; bottom: calc(100% + 4px); }  /* at the dialog's foot: open upwards */
/* Home page: latest photos, one scrolling row. */
.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px; scroll-snap-type: x proximity; }
.photo-strip .photo { flex: 0 0 168px; scroll-snap-align: start; }
.photo-strip .when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Public pages (welcome, privacy, terms): no sign-in, no navigation ---- */
.public-top { display: flex; align-items: center; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 18px 24px; }
.public-top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.public-top .grow { flex: 1; }
.public-top a.link { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.public-top a.link:hover { color: var(--ink); }
.btn { display: inline-block; font: inherit; font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: 10px;
  text-decoration: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.small { font-size: 14px; padding: 7px 14px; }
.public-foot { max-width: 1080px; margin: 0 auto; padding: 28px 24px 40px; color: var(--ink-3); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--border); }
.public-foot a { color: var(--ink-2); }
main.legal { max-width: 760px; padding-top: 8px; }
main.legal h1 { margin-bottom: 4px; }
main.legal h2 { margin-top: 30px; }
main.legal p, main.legal li { font-size: 15px; line-height: 1.6; color: var(--ink); }
main.legal .updated { color: var(--ink-3); font-size: 13px; margin-top: 0; }
main.legal .note { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
main.legal table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0; }
main.legal th, main.legal td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--border); }

/* ---- Milestones (profile) and flight chips ---- */
.badges { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.badge-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.badge-tile:hover { border-color: var(--accent); }
.badge-tile .icon { font-size: 26px; line-height: 1.1; }
.badge-tile .what { font-weight: 650; font-size: 15px; }
.badge-tile .when { font-size: 12px; color: var(--ink-3); }
.badge-tile.first { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.next-up { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 14px; }
.next-up .next { display: inline-flex; align-items: center; gap: 6px; }
.next-up .bar { width: 60px; height: 6px; border-radius: 3px; background: var(--border); position: relative; overflow: hidden; }
.next-up .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--done) * 100%); background: var(--accent); }
.chip.milestone { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px;
  background: color-mix(in srgb, #f2a93b 22%, var(--surface)); color: var(--ink); margin: 0 6px 6px 0; }
.story { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
.card .milestones:empty { display: none; }
.card .milestones { margin: 6px 0 2px; }
.card-story { margin: 8px 0 10px; font-size: 14.5px; color: var(--ink); }
.card-story.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.more-story { font-size: 13px; margin: -6px 0 8px; }
.story-block { margin-top: 10px; max-width: 720px; }
.story-block .story { margin: 0 0 4px; font-size: 15px; }
.story-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); resize: vertical; }
.story-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* Logbook times under the legs (flight.html renderTimes): off-block + Hobbs per leg. */
.crew .crew-sub { font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
.crew .crew-sub .muted { font-weight: 400; font-size: 12.5px; margin-left: 6px; }
.crew table.times input { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.crew table.times input[name^="hobbs"] { width: 7.5em; }
.crew table.times td { white-space: nowrap; }
/* The flight's logbook lines (flight.html renderLegs): times and counts typed in place. */
.crew table.legs input[type="time"], .crew table.legs input.count { font: inherit; font-size: 13px; padding: 4px 6px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-variant-numeric: tabular-nums; }
.crew table.legs input.count { width: 4em; }
.crew table.legs td { white-space: nowrap; }
.crew table.legs .small { font-size: 11px; font-weight: 400; }
.crew table.legs tr.extra td:first-child { box-shadow: inset 3px 0 0 var(--ink-3); }
.crew #add-leg { margin-top: 8px; }
.extra-form { margin-top: 10px; padding: 12px; overflow: visible; }
.extra-form .crew-fields label.wide { flex: 1 1 260px; }
table.extra .actions { white-space: nowrap; }