:root { --fg:#1f2937; --muted:#6b7280; --bg:#f8fafc; --card:#fff; --line:#e5e7eb; --accent:#2563eb; --danger:#dc2626; }
* { box-sizing: border-box; }
[hidden] { display:none !important; } /* or `button { display:inline-block }` etc. would show hidden elements */
body { margin:0; font:15px/1.5 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
body { display:flex; min-height:100vh; }
:root { --sidebar-w:220px; } html.nav-collapsed { --sidebar-w:56px; }
.content { flex:1; min-width:0; }
main { max-width:960px; margin:1.5rem auto; padding:0 1rem; }
main.wide { max-width:none; margin:1rem 0; padding:0 .75rem; }
.icon { flex-shrink:0; vertical-align:-4px; }

/* --- sidebar: full width with labels, or a 56px icon rail when html.nav-collapsed --- */
.sidebar { position:sticky; top:0; height:100vh; width:var(--sidebar-w); flex-shrink:0; display:flex; flex-direction:column; gap:.25rem;
  padding:.75rem .5rem; background:var(--card); border-right:1px solid var(--line); transition:width .15s ease; overflow:hidden; }
.sidebar .label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand { display:flex; align-items:center; gap:.6rem; padding:.25rem .45rem .75rem; font-weight:700; color:var(--fg); }
.brand:hover { text-decoration:none; }
.brand-logo { width:28px; height:28px; flex-shrink:0; }
.avatar { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:8px; background:var(--accent); color:#fff; font-weight:700; }
.avatar { border-radius:50%; background:#94a3b8; }
.side-nav { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.side-link { display:flex; align-items:center; gap:.75rem; width:100%; padding:.5rem .6rem; border-radius:6px; color:var(--fg); background:none; font:inherit; text-align:left; }
.side-link:hover { background:#f1f5f9; text-decoration:none; opacity:1; }
.side-link.active { background:#dbeafe; color:#1e40af; font-weight:600; }
.side-foot { display:flex; flex-direction:column; gap:.15rem; border-top:1px solid var(--line); padding-top:.5rem; }
.me { display:flex; gap:.6rem; align-items:center; padding:.35rem .45rem; font-size:.8rem; line-height:1.3; }
.me img { width:28px; height:28px; border-radius:50%; flex-shrink:0; }
#nav-toggle .icon { transition:transform .15s ease; }
html.nav-collapsed .sidebar .label { display:none; }
html.nav-collapsed #nav-toggle .icon { transform:rotate(180deg); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.5rem; }
.card.small { padding:.75rem 1rem; font-size:.9rem; }
.center { max-width:420px; margin:4rem auto; text-align:center; }
.btn, button { font:inherit; cursor:pointer; border:0; border-radius:6px; padding:.5rem 1rem; background:var(--accent); color:#fff; display:inline-block; }
.btn:hover { text-decoration:none; opacity:.9; }
button.link { background:none; color:var(--accent); padding:0; }
button.danger { background:var(--danger); padding:.25rem .6rem; font-size:.85rem; }
input, select { font:inherit; padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; background:#fff; }
.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.list th, .list td { text-align:left; padding:.5rem .75rem; border-bottom:1px solid var(--line); }
.list th { background:#f1f5f9; font-weight:600; font-size:.85rem; }
.num { text-align:right !important; white-space:nowrap; }
.muted { color:var(--muted); }
main.public { display:flex; flex-direction:column; min-height:100vh; max-width:none; margin:0; padding:0; }
.public-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1.25rem; }
.public-brand { display:flex; align-items:center; gap:.6rem; color:var(--fg); font-weight:700; font-size:1.1rem; }
.public-brand:hover { text-decoration:none; }
.public-brand img { width:32px; height:32px; }
.hero { flex:1; max-width:600px; margin:0 auto; padding:4rem 1.25rem 3rem; text-align:center; }
.hero-logo { width:88px; height:88px; }
.hero h1 { font-size:2.6rem; margin:.75rem 0 .25rem; letter-spacing:-.02em; }
.hero-lead { font-size:1.25rem; color:var(--muted); margin:0 0 1.5rem; }
.hero p:not(.hero-lead) { line-height:1.65; }
.public-foot { padding:1rem 1.25rem; text-align:center; font-size:.85rem; border-top:1px solid var(--line); }
.prose { max-width:680px; width:calc(100% - 2rem); box-sizing:border-box; margin:1rem auto 2rem; line-height:1.55; }
.prose h2 { font-size:1.1rem; margin:1.5rem 0 .4rem; }
.error { color:var(--danger); }
.notice { background:#ecfdf5; border:1px solid #a7f3d0; padding:.5rem .75rem; border-radius:6px; }
.crumbs { margin-bottom:.75rem; }
.roles { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; margin-bottom:1rem; }
.role { font-style:normal; font-size:.75rem; padding:.1rem .45rem; border-radius:999px; background:#e5e7eb; }
.role-admin { background:#fee2e2; color:#991b1b; } .role-viewer { background:#dbeafe; color:#1e40af; } .role-pending { background:#fef3c7; color:#92400e; }
form.inline { display:inline; } .row { display:flex; flex-wrap:wrap; gap:.5rem; }
.viewbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem 1rem; margin-bottom:.75rem; }
.viewbar .crumbs { margin:0; }
/* --- gallery: as many ~100px columns as fit, stretched to fill the row exactly --- */
.gallery { display:grid; grid-template-columns:repeat(var(--cols, 10), minmax(0, 1fr)); gap:3px; }
.thumb-size { display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); }
/* Photos-per-row slider: the track and its ticks run exactly from the first to the last position
   (thumb centre to thumb centre), unlike the native track, which overhangs both ends. */
.zoom-track { --knob:16px; position:relative; display:block; width:140px; height:22px; }
.zoom-track::before { content:""; position:absolute; left:calc(var(--knob) / 2); right:calc(var(--knob) / 2); top:50%; height:2px;
  margin-top:-1px; border-radius:1px; background:#cbd5e1; }
.zoom-tick { position:absolute; top:50%; width:2px; height:8px; margin:-4px 0 0 -1px; border-radius:1px; background:#cbd5e1; pointer-events:none; }
.zoom-track input { position:relative; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer; }
.zoom-track input::-webkit-slider-runnable-track { height:100%; background:none; }
.zoom-track input::-moz-range-track { background:none; }
.zoom-track input::-webkit-slider-thumb { -webkit-appearance:none; width:var(--knob); height:var(--knob); margin-top:3px; border:0; border-radius:50%; background:var(--accent); }
.zoom-track input::-moz-range-thumb { width:var(--knob); height:var(--knob); border:0; border-radius:50%; background:var(--accent); }
.zoom-track input:focus-visible { outline:none; }
.zoom-track input:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px #bfdbfe; }
.zoom-track input:focus-visible::-moz-range-thumb { box-shadow:0 0 0 3px #bfdbfe; }
.thumb-size output { min-width:1.4em; color:var(--fg); font-variant-numeric:tabular-nums; text-align:right; }
.gallery a { display:block; aspect-ratio:1; background:var(--line); }
.gallery img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery a:hover img, .gallery a:focus-visible img { outline:3px solid var(--accent); outline-offset:-3px; }
.gallery-status { text-align:center; margin:1rem 0; min-height:1.5em; }
.gallery-head { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:.5rem 1rem; margin:-1rem -.75rem .5rem; padding:.6rem .75rem; background:var(--bg); border-bottom:1px solid var(--line); }
.date-pick { position:relative; }
.gallery-crumbs { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; margin:0; font-size:1.05rem; }
.gallery-crumbs .trip-name { display:inline-block; font-size:inherit; font-weight:inherit; }
.crumb-sep { color:var(--muted); }
/* After the breadcrumb the date sits further right: anchor the picker to the header instead, so it still fits. */
.gallery-crumbs ~ .date-pick { position:static; margin-right:auto; }
.gallery-crumbs ~ .date-pick .datepicker { left:.25rem; top:calc(100% - .2rem); }
.gallery-crumbs ~ .date-pick .gallery-date { margin-left:0; }
.gallery-date { font:inherit; font-size:1.05rem; font-weight:700; min-height:1.5em; padding:.2rem .5rem; margin-left:-.5rem;
  border-radius:6px; background:none; color:var(--fg); }
.gallery-date:hover, .gallery-date[aria-expanded="true"] { background:#e2e8f0; opacity:1; }
.gallery-date::after { content:" ▾"; color:var(--muted); font-size:.8em; }

/* --- date picker popover: wide, a year at a time (3 rows of 4 months); narrow, every year in one
   vertically scrolling list under a pinned row of years. gallery.js adds .paged when 4 months fit. --- */
.datepicker { position:absolute; top:calc(100% + .4rem); left:-.5rem; z-index:20; display:flex; flex-direction:column;
  width:min(1000px, calc(100vw - var(--sidebar-w) - 1rem));
  padding:.75rem; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(15,23,42,.15); }
.dp-years { display:flex; flex:none; gap:.25rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:.6rem; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.datepicker.paged .dp-years { flex-wrap:wrap; }
.dp-year-tab { display:flex; flex:none; flex-direction:column; align-items:center; gap:2px; padding:.25rem .5rem; border-radius:6px;
  background:none; color:var(--fg); font-size:.85rem; font-weight:600; }
@media (hover:hover) { .dp-year-tab:hover:not(.active) { background:#f1f5f9; opacity:1; } }
.dp-year-tab.active { background:var(--accent); color:#fff; }
.dp-year-tab.active .count-chip { background:rgba(255,255,255,.25); color:#fff; }
.dp-undated { margin-left:auto; font-weight:400; color:var(--muted); }
.dp-body { position:relative; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.dp-year { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem; }
.dp-year + .dp-year { margin-top:1rem; }
.datepicker.paged .dp-year { grid-template-columns:repeat(4, 1fr); gap:.75rem 1rem; margin:0; }
.datepicker.paged .dp-year:not(.active) { display:none; }
.datepicker.paged .dp-month-year { display:none; }
.dp-month h3 { display:flex; align-items:center; justify-content:center; gap:.4rem; margin:0 0 .4rem; font-size:.95rem; }
.datepicker.paged .dp-month h3 { font-size:.85rem; margin-bottom:.2rem; }
.dp-days { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.dp-weekday { text-align:center; font-size:.7rem; color:var(--muted); padding-bottom:.2rem; }
.dp-day { display:flex; flex-direction:column; align-items:center; gap:1px; min-height:2.6rem; padding:.2rem 0; border-radius:6px;
  background:none; color:var(--fg); font-size:.85rem; line-height:1.2; }
.datepicker.paged .dp-day { min-height:2.1rem; padding:.1rem 0; font-size:.75rem; }
.datepicker.paged .dp-day .count-chip { font-size:.6rem; }
.dp-day:hover:not(:disabled) { background:#dbeafe; opacity:1; }
.dp-day:disabled { color:#cbd5e1; cursor:default; }
.dp-day.current { outline:2px solid var(--accent); outline-offset:-2px; }
.count-chip { display:inline-block; min-width:1.4em; padding:0 .3rem; border-radius:999px; background:#e0e7ff; color:#3730a3;
  font-size:.65rem; font-weight:600; line-height:1.5; text-align:center; }
.count-chip:empty { display:none; }
.gallery-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-left:auto; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .3rem .2rem .6rem; border-radius:999px; background:#e0e7ff; font-size:.85rem; }
.chip a { display:grid; place-items:center; color:inherit; }
.chip .icon { width:16px; height:16px; }

/* --- full-screen viewer --- */
body.viewer-active { overflow:hidden; }
.viewer { position:fixed; inset:0; z-index:100; display:flex; background:#0b0b0c; color:#e5e7eb; outline:none; }
.viewer[hidden] { display:none; }
.viewer-stage { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
/* The photo is opaque and letterboxed (object-fit) on the viewer's solid background; nothing is drawn behind or over it. */
.viewer-canvas { flex:1; min-height:0; display:flex; overflow:hidden; user-select:none; touch-action:pan-x pan-y; }
.viewer-img { flex-shrink:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
/* Zoomed: the image gets its full-resolution size inline; margin:auto centres it while smaller than the canvas. */
.viewer.zoomed .viewer-canvas { overflow:auto; cursor:grab; }
.viewer.zoomed .viewer-canvas.panning { cursor:grabbing; }
.viewer.zoomed .viewer-img { margin:auto; max-width:none; object-fit:fill; }
.viewer.loading-full .viewer-counter::after { content:" · loading original…"; opacity:.7; }
.viewer-bar { order:-1; display:flex; justify-content:space-between; align-items:center; padding:.35rem .75rem; }
.viewer-counter { font-size:.9rem; opacity:.85; }
.viewer-actions { display:flex; gap:.25rem; }
.viewer-btn { display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; background:none; color:#fff; }
.viewer-btn:hover, .viewer-btn[aria-pressed="true"] { background:rgba(255,255,255,.18); opacity:1; }
.viewer-info { width:300px; flex-shrink:0; padding:1rem 1.25rem; overflow-y:auto; background:#18181b; border-left:1px solid #27272a; display:none; }
.viewer.info-open .viewer-info { display:block; }
.viewer-info h2 { margin-top:.25rem; }
.viewer-info dl { margin:0; }
.viewer-info dt { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:#a1a1aa; margin-top:.9rem; }
.viewer-info dd { margin:.15rem 0 0; word-break:break-word; }
.viewer-info a { color:#93c5fd; }
.viewer-map { height:220px; margin-top:.5rem; border-radius:8px; overflow:hidden; background:#27272a; }
.viewer-map .mapboxgl-ctrl-attrib { font-size:10px; }
@media (max-width:700px) {
  .viewer { flex-direction:column; }
  .viewer-info { width:auto; max-height:40vh; border-left:0; border-top:1px solid #27272a; }
}
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.75rem; margin:1rem 0; }
.stats strong { display:block; font-size:1.4rem; }
progress { width:100%; height:1rem; margin:.5rem 0; }
.status { font-size:.8rem; padding:.1rem .45rem; border-radius:999px; background:#e5e7eb; }
.status-running, .status-queued { background:#dbeafe; color:#1e40af; } .status-done { background:#dcfce7; color:#166534; }
.status-failed { background:#fee2e2; color:#991b1b; } .status-interrupted { background:#fef3c7; color:#92400e; }
.scroll { overflow-x:auto; }
h2 { font-size:1.1rem; margin-top:1.5rem; }
@media (max-width:640px) { .list th:nth-child(3), .list td:nth-child(3) { display:none; } }

/* --- admin database explorer --- */
.dbx { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:1rem; height:calc(100vh - 2rem); }
.dbx-tree { display:flex; flex-direction:column; gap:.5rem; min-height:0; overflow-y:auto; padding:.75rem; background:var(--card); border:1px solid var(--line); border-radius:10px; font-size:.85rem; }
.dbx-tree-head { display:flex; justify-content:space-between; align-items:center; }
.dbx-tree summary { cursor:pointer; padding:.2rem 0; }
.dbx-schema > summary { font-weight:600; }
.dbx-table { margin-left:.75rem; }
.dbx-table > summary { display:flex; align-items:center; gap:.35rem; list-style:none; }
.dbx-table > summary::before { content:"▸"; color:var(--muted); width:.8em; }
.dbx-table[open] > summary::before { content:"▾"; }
.dbx-tname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dbx-select { opacity:.5; } .dbx-table > summary:hover .dbx-select { opacity:1; }
.dbx-table ul { list-style:none; margin:.1rem 0 .4rem 1.1rem; padding:0; }
.dbx-table li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem; padding:.05rem 0; }
.dbx-col { color:var(--fg); text-align:left; }
.dbx-type { color:var(--muted); font-size:.75rem; }
.dbx-badge { font-size:.65rem; font-weight:600; padding:0 .3rem; border-radius:4px; background:#e5e7eb; color:#374151; cursor:help; }
.dbx-pk { background:#fef3c7; color:#92400e; } .dbx-fk { background:#dbeafe; color:#1e40af; }
.dbx-api { margin-top:auto; font-size:.75rem; }
.dbx-main { display:flex; flex-direction:column; gap:.5rem; min-width:0; min-height:0; }
.dbx-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; font-size:.85rem; }
.dbx-toolbar button { display:inline-flex; align-items:center; gap:.35rem; }
.dbx-toolbar button .icon { width:14px; height:14px; }
.dbx-limit { margin-left:auto; }
.dbx-editor { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.dbx-editor .CodeMirror { height:30vh; min-height:140px; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dbx-meta { margin:0; font-size:.85rem; }
.dbx-results { flex:1; min-height:0; overflow:auto; border-radius:10px; }
.dbx-grid { font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* overflow:visible: .list's overflow:hidden would make the table the scroll container and the header never stick. */
.dbx-grid { overflow:visible; border-collapse:separate; border-spacing:0; }
.dbx-grid th { position:sticky; top:0; z-index:1; padding:0; background:#f1f5f9; box-shadow:inset 0 -1px 0 var(--line); white-space:nowrap; }
.dbx-sort { display:flex; align-items:center; gap:.3rem; width:100%; padding:.3rem .6rem; border-radius:0; background:none; color:inherit; font:inherit; font-weight:600; text-align:left; }
.dbx-sort::after { content:"↕"; color:var(--muted); opacity:.5; font-size:.9em; }
th[aria-sort="ascending"] .dbx-sort::after { content:"▲"; color:var(--accent); opacity:1; }
th[aria-sort="descending"] .dbx-sort::after { content:"▼"; color:var(--accent); opacity:1; }
.dbx-saved summary { cursor:pointer; padding:.2rem 0; }
.dbx-saved ul { list-style:none; margin:.2rem 0 .5rem; padding:0; }
.dbx-saved li { display:flex; align-items:center; gap:.3rem; padding:.1rem .3rem; border-radius:4px; }
.dbx-saved li.current { background:#e0e7ff; }
.dbx-saved-load { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); text-align:left; }
.dbx-saved-delete { color:var(--muted); opacity:0; } .dbx-saved li:hover .dbx-saved-delete, .dbx-saved-delete:focus-visible { opacity:1; }
.dbx-saved-delete:hover { color:var(--danger); }
.dbx-toolbar button.secondary { background:var(--card); color:var(--fg); border:1px solid var(--line); }
.dbx-grid td { max-width:28rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dbx-grid td { padding:.3rem .6rem; }
.dbx-null { color:var(--muted); font-style:italic; }
.CodeMirror-hints { font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; z-index:50; }
@media (max-width:800px) {
  .dbx { grid-template-columns:1fr; height:auto; }
  .dbx-tree { max-height:35vh; }
  .dbx-results { max-height:60vh; }
}

/* --- trips --- */
.trips { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem; }
.trip-card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.trip-card > a { display:block; color:inherit; }
.trip-card > a:hover { text-decoration:none; }
.trip-card > a:hover img, .trip-card > a:focus-visible img { opacity:.9; }
.trip-card img, .trip-cover-empty { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--line); }
.trip-cover { display:block; perspective:900px; background:var(--card); }
/* Cover flip (trips.js): turn edge-on, swap the photo, turn back from the other side. */
.trip-cover img { transition:transform .3s ease-out; backface-visibility:hidden; }
.trip-cover img.flip-out { transform:rotateY(90deg); transition-timing-function:ease-in; }
.trip-cover img.flip-from { transform:rotateY(-90deg); transition:none; }
.trip-cover-empty { display:grid; place-items:center; color:#94a3b8; background:#f1f5f9; }
.trip-cover-empty .icon { width:40px; height:40px; }
.trip-meta { display:flex; flex-direction:column; gap:.1rem; padding:.6rem .75rem .7rem; font-size:.9rem; }
.trip-name { display:block; font-size:1rem; }
.trip-name::first-letter { text-transform:uppercase; }
.trip-count { font-size:.85rem; }
.trip-card.empty .trip-count { color:var(--muted); }
.trip-delete { position:absolute; top:.4rem; right:.4rem; }
.trip-delete button { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.85); color:var(--danger); opacity:0; }
.trip-card:hover .trip-delete button, .trip-delete button:focus-visible { opacity:1; }
@media (hover:none) { .trip-delete button { opacity:1; } }
.trip-new { position:relative; }
.trip-new summary { display:inline-flex; align-items:center; gap:.35rem; list-style:none; }
.trip-new summary::-webkit-details-marker { display:none; }
.trip-new summary .icon { width:18px; height:18px; }
.trip-form { position:absolute; right:0; top:calc(100% + .4rem); z-index:10; display:grid; gap:.75rem; width:min(360px, calc(100vw - var(--sidebar-w) - 2rem));
  padding:1rem; box-shadow:0 10px 30px rgba(15,23,42,.15); }
.trip-form label, .trip-form legend { font-size:.85rem; color:var(--muted); }
.trip-form-name input { display:block; width:100%; margin-top:.2rem; }
.trip-form fieldset { display:flex; gap:.5rem; margin:0; padding:0; border:0; }
.trip-form fieldset input[type=date] { flex:1; min-width:0; }
.trip-form p { margin:0; font-size:.8rem; }
.worker-card { margin-bottom:1rem; } .worker-card h2 { margin:0; } .worker-card .stats { margin-bottom:0; }

/* --- trip head (breadcrumb + Gallery | Map) and the trip map page --- */
.view-tabs { display:inline-flex; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.view-tabs a { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .7rem; border-radius:6px; color:var(--fg); font-size:.9rem; }
.view-tabs a:hover { text-decoration:none; background:#f1f5f9; }
.view-tabs a[aria-current="page"] { background:var(--accent); color:#fff; }
.view-tabs .icon { width:16px; height:16px; }
.view-tabs > span[aria-disabled] { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .7rem; font-size:.9rem; color:var(--muted); opacity:.5; }
main.fill { max-width:none; margin:0; padding:0; height:100vh; height:100dvh; display:flex; flex-direction:column; }
.trip-head { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding:.6rem .75rem; border-bottom:1px solid var(--line); background:var(--bg); }
.trip-map-notice { margin:1rem; }
.tripmap { --map-w:80%; --chart-h:34%; flex:1; min-height:0; display:flex; }
.tripmap.resizing { cursor:col-resize; user-select:none; }
.tripmap.resizing-rows { cursor:row-resize; user-select:none; }
.tm-main { flex:0 0 var(--map-w); min-width:0; min-height:0; display:flex; flex-direction:column; }
.tripmap.no-photos .tm-main { flex:1 1 auto; }
.tm-map { position:relative; flex:1; min-height:0; }
.tm-map > .tm-canvas { position:absolute; inset:0; } /* beats mapbox-gl.css's .mapboxgl-map { position:relative } */
.tm-toggles { position:absolute; top:10px; left:10px; z-index:2; display:flex; gap:4px; }
.tm-toggle { padding:.3rem .7rem; font-size:.85rem; background:#fff; color:var(--fg); border:1px solid #cbd5e1; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.tm-toggle[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.tm-status { position:absolute; inset:auto 0 45% 0; text-align:center; color:var(--muted); z-index:1; }
.tm-dot { width:14px; height:14px; border-radius:50%; background:#facc15; border:3px solid #111; box-shadow:0 0 0 2px #fff; }
.tm-popup { display:block; color:var(--fg); font-size:.8rem; }
.tm-popup:hover { text-decoration:none; }
.tm-popup img { display:block; width:200px; height:200px; object-fit:cover; border-radius:4px; margin-bottom:.25rem; background:var(--line); }
.tm-chart { flex:0 0 var(--chart-h); min-height:140px; display:flex; flex-direction:column; background:var(--card); }
.tm-chart-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding:.4rem .75rem; }
.tm-hint { font-size:.8rem; margin-left:auto; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.seg button { padding:.2rem .65rem; font-size:.85rem; border-radius:0; background:#fff; color:var(--fg); }
.seg button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.tm-plot { flex:1; min-height:0; padding:0 .5rem; overflow:hidden; }
.tm-empty { padding:1rem; }
.tm-split { flex:0 0 7px; cursor:col-resize; background:var(--line); touch-action:none; }
.tm-split:hover, .tm-split:focus-visible, .tripmap.resizing .tm-split { background:var(--accent); outline:none; }
.tm-hsplit { flex:0 0 7px; cursor:row-resize; background:var(--line); touch-action:none; }
.tm-hsplit:hover, .tm-hsplit:focus-visible, .tripmap.resizing-rows .tm-hsplit { background:var(--accent); outline:none; }
.tm-photos { flex:1; min-width:0; min-height:0; /* stacked on phones: never grow to fit the thumbnails */ display:flex; flex-direction:column; background:var(--bg); }
.tm-photos-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.25rem .75rem; padding:.45rem .6rem; font-size:.85rem; border-bottom:1px solid var(--line); }
.tm-grid { flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:minmax(0, 1fr); gap:3px; padding:3px; align-content:start; }
.tm-grid a { display:block; aspect-ratio:1; background:var(--line); }
.tm-grid img { display:block; width:100%; height:100%; object-fit:cover; }
.tm-grid a:hover img { outline:3px solid #facc15; outline-offset:-3px; }
@media (max-width:700px) {
  .tripmap { flex-direction:column; }
  .tm-main, .tripmap.no-photos .tm-main { flex:1 1 60%; }
  .tm-split { display:none; }
  .tm-photos { flex:0 0 40%; border-top:1px solid var(--line); }
  .tm-hint { display:none; }
}

/* --- favourites --- */
.view-options-btn { display:inline-flex; align-items:center; gap:.15rem; padding:.35rem .5rem; border:1px solid var(--line); border-radius:6px;
  background:var(--card); color:var(--fg); }
.view-options-btn .icon { width:18px; height:18px; }
.view-options-btn[aria-expanded="true"] { border-color:var(--accent); }
.view-options { position:fixed; inset:auto; margin:0; min-width:13rem; padding:.5rem; background:var(--card); color:var(--fg);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(15,23,42,.15); }
.view-options fieldset { margin:0; padding:0; border:0; }
.view-options fieldset + fieldset { margin-top:.4rem; padding-top:.4rem; border-top:1px solid var(--line); }
.view-options legend { float:left; width:100%; padding:.2rem .5rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.view-options label { clear:both; display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:6px; cursor:pointer; white-space:nowrap; }
.view-options label:hover { background:#f1f5f9; }
.view-options input { margin:0; padding:0; }
.view-options .flag-icon { display:inline-flex; }
.view-options .flag-icon .icon { width:16px; height:16px; }
.view-options .is-fav .icon { fill:#f59e0b; stroke:#f59e0b; }
.view-options .not-fav .icon { stroke:#f59e0b; }
.view-options .is-private .icon, .view-options .not-private .icon { stroke:var(--muted); }
.trip-head-tools { margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.viewer-fav[aria-pressed="true"] { background:none; color:#facc15; }
.viewer-fav[aria-pressed="true"] .icon { fill:currentColor; }
.viewer-lock[aria-pressed="true"] { background:none; color:#fca5a5; }
.viewer-lock .when-on, .viewer-lock[aria-pressed="true"] .when-off { display:none; }
.viewer-lock[aria-pressed="true"] .when-on { display:inline; }
/* Thumbnail badges: a star on favourites, a padlock on private photos, unless the filter shows only
   those. One changed in the viewer so it no longer passes the filter is faded until the page reloads. */
.gallery a, .tm-grid a { position:relative; }
.gallery:not([data-fav="yes"]) a.fav::after, .tripmap:not([data-fav="yes"]) .tm-grid a.fav::after { content:"★"; position:absolute;
  top:3px; right:5px; color:#facc15; font-size:1rem; line-height:1; text-shadow:0 0 3px rgba(0,0,0,.8); pointer-events:none; }
.gallery:not([data-private="yes"]) a.private::before, .tripmap:not([data-private="yes"]) .tm-grid a.private::before { content:"";
  position:absolute; top:5px; left:5px; width:14px; height:14px; background:#fff; pointer-events:none; filter:drop-shadow(0 0 2px rgba(0,0,0,.9));
  -webkit-mask:var(--lock-mask) center/contain no-repeat; mask:var(--lock-mask) center/contain no-repeat; }
.gallery, .tripmap { --lock-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' fill='black'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.gallery a.stale img { opacity:.35; }
.trip-count .icon { width:14px; height:14px; vertical-align:-2px; fill:#f59e0b; stroke:#f59e0b; }
.map-title { margin:0; font-size:1.05rem; }