/* Shared tokens and components for all pages. */
[hidden] { display: none !important; }  /* even on elements styled display: flex/grid */
:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e4e3df;
  --ink: #1f1f1d;
  --ink-2: #5c5b57;
  --ink-3: #8a8984;
  --grid: #ecebe7;
  --ground: #9a9994;
  --cursor: #1f1f1d;
  /* Sequential altitude ramp (one hue, light -> dark = low -> high). */
  --alt-0: #86b6ef;
  --alt-1: #5598e7;
  --alt-2: #2a78d6;
  --alt-3: #1c5cab;
  --alt-4: #0d366b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161615; --surface: #1f1f1d; --border: #34332f;
    --ink: #ecebe7; --ink-2: #b4b3ae; --ink-3: #85847f; --grid: #2c2b28;
    --ground: #6f6e69; --cursor: #ecebe7;
    /* Dark mode: dark -> light = low -> high, so high stays the most salient. */
    --alt-0: #1c5cab; --alt-1: #2a78d6; --alt-2: #5598e7; --alt-3: #86b6ef; --alt-4: #cde2fb;
  }
}
:root[data-theme="dark"] {
  --bg: #161615; --surface: #1f1f1d; --border: #34332f;
  --ink: #ecebe7; --ink-2: #b4b3ae; --ink-3: #85847f; --grid: #2c2b28;
  --ground: #6f6e69; --cursor: #ecebe7;
  --alt-0: #1c5cab; --alt-1: #2a78d6; --alt-2: #5598e7; --alt-3: #86b6ef; --alt-4: #cde2fb;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }
header h1 { font-size: 20px; font-weight: 600; margin: 0 0 2px; }
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: 8px; padding: 10px 12px; }
.stat .label { color: var(--ink-2); font-size: 12px; }
.stat .value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .sub { color: var(--ink-3); font-size: 12px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#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-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; }
/* 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-block; font-size: 14px; text-decoration: none; border-radius: 6px; padding: 6px 12px;
  border: 1px solid var(--border); color: var(--ink); background: var(--surface); }
a.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Track replay (replay.js), between the map and its legend. */
.replay { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 13px; }
.replay button { font: inherit; font-size: 14px; line-height: 1; cursor: pointer; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--ink); padding: 5px 8px; min-width: 32px; }
.replay button.replay-play { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 40px; }
.replay .replay-slider { flex: 1 1 200px; min-width: 140px; accent-color: var(--accent); }
.replay select { font: inherit; font-size: 13px; padding: 3px 4px; border-radius: 6px; 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: 4px; cursor: pointer; }
.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 12px; color: var(--ink-2); font-size: 12px; flex-wrap: wrap; }
.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: 14px; font-weight: 600; margin: 20px 0 8px; }
.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); }
.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); }
.footnote { color: var(--ink-3); font-size: 12px; margin: 8px 2px 0; max-width: 80ch; }
.table-wrap { overflow-x: auto; }
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); }
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; --accent: #1c5cab; --link: #1c5cab; --good: #2e7d32; }  /* danger/accent carry white text */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger: #d32f2f; --accent: #2a78d6; --link: #86b6ef; --good: #66bb6a; } }
:root[data-theme="dark"] { --danger: #d32f2f; --accent: #2a78d6; --link: #86b6ef; --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: #fff; 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: 28px; padding-top: 16px; 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: 16px 10px; 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: 4px 10px 14px; font-weight: 600;
  color: var(--ink); text-decoration: none; }
.sidebar .item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; border: 0;
  background: none; font: inherit; font-size: 14px; 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: 600;
  box-shadow: inset 3px 0 0 var(--accent); }
.sidebar .item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.sidebar .grow { flex: 1; }
@media (max-width: 720px) {
  body.has-sidebar { display: block; }
  .sidebar { z-index: 10; height: auto; flex-direction: row; overflow-x: auto; padding: 6px 8px;
    border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar .brand, .sidebar .grow { display: none; }
  .sidebar .item { flex: none; padding: 6px 10px; font-size: 13px; }
  .sidebar .add { margin-top: 0; }
}
/* 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: 13px; cursor: pointer; border-radius: 6px; padding: 4px 12px; }
button.primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
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); }
/* 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: 13px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
}
.choice label.visibility { margin: 0 0 12px; }
/* Photos (photos.js). */
.section-head { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; }
.section-head h2 { margin: 0; }
.add-photos {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 6px; padding: 5px 12px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.photos { padding: 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 .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; }
/* 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; }