/* Nyanda Field Catalogue. Built for a phone in bright sun: big targets, strong contrast. */
:root {
  --serif: Georgia, 'Noto Serif', 'Droid Serif', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --paper: #FFFCF5; --card: #FBEFD9; --ink: #0C2229; --ink2: #3D555C; --line: #DCCBAA;
  --teal: #1F6378; --on-teal: #FFFFFF; --orange: #E89B3C; --on-orange: #0C2229;
  --green: #2D7A4B; --red: #B3261E; --red-bg: #FBE4E1; --warn-bg: #FFF1D6; --warn-ink: #6B4300;
  --gps: #1E88E5; --shadow: 0 1px 2px rgba(12, 34, 41, .18), 0 4px 14px rgba(12, 34, 41, .10);
  --top: calc(56px + env(safe-area-inset-top, 0px)); --tabs: calc(66px + env(safe-area-inset-bottom, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mapbg: #1B3A44; --paper: #0C2229; --card: #143440; --ink: #FBEFD9; --ink2: #B9CCCF; --line: #2C4F5A;
    --teal: #74B8CC; --on-teal: #0C2229; --green: #6FCB91; --red: #FF7B6F; --red-bg: #3B1815; --warn-bg: #3A2C12; --warn-ink: #F6CF8C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mapbg: #1B3A44; --paper: #0C2229; --card: #143440; --ink: #FBEFD9; --ink2: #B9CCCF; --line: #2C4F5A;
  --teal: #74B8CC; --on-teal: #0C2229; --green: #6FCB91; --red: #FF7B6F; --red-bg: #3B1815; --warn-bg: #3A2C12; --warn-ink: #F6CF8C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.45 var(--sans); padding: var(--top) 0 var(--tabs); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
a { color: var(--teal); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--ink2); }
.small { font-size: .88rem; }
/* Only the app's own icons; the map draws its own SVG and must keep its size */
svg[aria-hidden="true"] { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
#top { position: fixed; inset: 0 0 auto 0; height: var(--top); padding: env(safe-area-inset-top, 0px) 12px 0; display: flex; align-items: center; justify-content: space-between; background: var(--teal); color: var(--on-teal); z-index: 1000; }
:root[data-theme="dark"] #top { background: #0A1C22; color: var(--ink); border-bottom: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #top { background: #0A1C22; color: var(--ink); border-bottom: 1px solid var(--line); } }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--serif); font-size: 1.12rem; font-weight: 700; min-width: 0; }
.brand img { width: 34px; height: 34px; object-fit: contain; background: #FBEFD9; border-radius: 50%; padding: 2px; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.backup-badge { position: relative; display: grid; place-items: center; width: 46px; height: 46px; color: inherit; border-radius: 12px; }
.backup-badge span:empty { display: none; }
.backup-badge span { position: absolute; top: 2px; right: 0; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--orange); color: var(--on-orange); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.backup-badge.pending { color: var(--orange); }

/* Tabs */
#tabs { position: fixed; inset: auto 0 0 0; height: var(--tabs); padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--paper); border-top: 1px solid var(--line); z-index: 1000; }
#tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink2); text-decoration: none; font-size: .78rem; font-weight: 600; }
#tabs a.on { color: var(--teal); }
#tabs a.on svg { stroke-width: 2.4; }
#tabs .fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#tabs .fab svg { width: 62px; height: 62px; padding: 15px; margin-top: -22px; border-radius: 50%; background: var(--orange); color: var(--on-orange); stroke-width: 3; box-shadow: 0 3px 10px rgba(12, 34, 41, .35); border: 4px solid var(--paper); }
body.form-open #tabs, body.form-open #top { display: none; }
body.form-open { padding-top: 0; padding-bottom: 0; }

/* Screens */
.screen { max-width: 680px; margin: 0 auto; padding: 16px 16px 32px; }
.screen-title { font-size: 1.65rem; margin-top: 4px; }
h2.sub { font-size: 1.15rem; margin: 26px 0 10px; }
.card { background: var(--card); border-radius: 16px; padding: 16px; margin: 0 0 16px; box-shadow: var(--shadow); }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; font-weight: 600; }
.banner.strong { background: var(--orange); color: var(--on-orange); }
.back-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; margin: 0 0 6px -6px; padding: 8px 6px; }

/* Buttons and inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; border-radius: 12px; border: 2px solid var(--teal); background: transparent; color: var(--teal); font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.btn.primary { background: var(--teal); color: var(--on-teal); }
.btn.danger, .btn.danger:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger-outline { border-color: var(--red); color: var(--red); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .92rem; }
.btn.wide { width: 100%; margin: 6px 0; }
.btn:disabled { opacity: .45; cursor: default; }
.banner .btn { border-color: currentColor; color: inherit; white-space: nowrap; flex: none; }
.link-btn { background: none; border: 0; color: var(--teal); font-weight: 700; padding: 12px 0; cursor: pointer; display: inline-block; text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; font-size: 1.6rem; }
.input { width: 100%; min-height: 50px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); }
.input:focus { border-color: var(--teal); outline: none; }
textarea.input { min-height: 90px; resize: vertical; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.row-btns.end { justify-content: flex-end; }
.field-label { font-weight: 700; margin: 16px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 46px; padding: 8px 14px; border-radius: 23px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 600; cursor: pointer; text-align: left; line-height: 1.2; }
.chip.on { border-color: var(--teal); background: var(--teal); color: var(--on-teal); }
.seg { display: flex; gap: 0; border: 2px solid var(--teal); border-radius: 12px; overflow: hidden; margin: 8px 0; }
.seg-btn { flex: 1; min-height: 48px; border: 0; background: transparent; color: var(--teal); font-weight: 700; cursor: pointer; padding: 6px 10px; }
.seg-btn + .seg-btn { border-left: 2px solid var(--teal); }
.seg-btn.on { background: var(--teal); color: var(--on-teal); }
.seg.big .seg-btn { min-height: 60px; font-size: 1.1rem; }
.seg-btn.green.on { background: var(--green); color: #fff; }
.seg-btn.red { color: var(--red); }
.seg-btn.red.on { background: var(--red); color: #fff; }
.small-seg { max-width: 260px; }
.tick { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 2px solid var(--line); border-radius: 12px; margin: 8px 0; cursor: pointer; background: var(--paper); }
.tick input { width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--teal); flex: none; }
.tick strong { display: block; }
.tick small { color: var(--ink2); }
.warn { background: var(--warn-bg); color: var(--warn-ink); padding: 10px 12px; border-radius: 10px; font-weight: 600; margin: 10px 0; }
.sw { display: inline-block; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(12, 34, 41, .35); flex: none; }
.sw.sm { width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.sw-unknown { background: repeating-linear-gradient(45deg, var(--line) 0 4px, transparent 4px 8px); }
ul.plain { padding-left: 1.2em; }
ul.plain li { margin: 4px 0; }
progress { width: 100%; height: 12px; accent-color: var(--orange); }

/* The specimen label: the one bold thing. Every record looks like a printed museum tag. */
.label-card { position: relative; background: var(--card); border: 4px double var(--teal); border-radius: 6px; padding: 14px 16px 12px; margin: 0 0 14px; }
.label-card::before { content: ""; position: absolute; top: 10px; right: 12px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--teal); background: var(--paper); }
.label-no { font-family: var(--serif); font-size: 2rem; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; }
.label-type { font-family: var(--serif); font-size: 1.2rem; font-style: italic; margin-top: 4px; }
.label-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: .92rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.label-hint { margin-top: 4px; font-size: .82rem; color: var(--ink2); }
.label-card.red { border-color: var(--red); }
.label-card.red::before { border-color: var(--red); }
.label-card.void .label-no { text-decoration: line-through; opacity: .6; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; border: 1.5px solid var(--ink2); color: var(--ink2); }
.pill.green { border-color: var(--green); color: var(--green); }
.pill.red { border-color: var(--red); color: #fff; background: var(--red); }
.pill.warn { border-color: var(--orange); color: var(--warn-ink); background: var(--warn-bg); }

/* Find form */
.find { max-width: 680px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 120px; }
.find-top { display: flex; align-items: center; gap: 6px; margin: 0 0 8px -8px; }
.find-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.find .block { padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.find .block:empty { display: none; }
.find .block:last-of-type { border-bottom: 0; }
.find.red-mode { --line: color-mix(in srgb, var(--red) 35%, transparent); }
.find.red-mode .label-card { border-color: var(--red); background: var(--red-bg); }
.find.red-mode .label-card::before { border-color: var(--red); }
.find.red-mode .find-title { color: var(--red); }
.red-protocol { background: var(--red-bg); margin: 8px -14px 4px; padding: 14px !important; border-bottom: 0 !important; }
.red-protocol h3 { color: var(--red); font-size: 1.2rem; }
.red-protocol .tick { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.red-protocol .tick input { accent-color: var(--red); }
.readonly { margin: 6px 0; color: var(--ink2); }
.loc-status { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.loc-status.wait { color: var(--ink2); }
.loc-acc { font-family: var(--serif); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.loc-status.live .loc-acc { color: var(--gps); }
.loc-status.held .loc-acc { color: var(--green); }
.loc-status.placed .loc-acc { color: var(--warn-ink); background: var(--warn-bg); padding: 0 8px; border-radius: 6px; font-size: 1.1rem; }
.loc-coords { font-size: .9rem; color: var(--ink2); font-variant-numeric: tabular-nums; margin-top: 4px; }
.fm-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }
.fm-card .sw { width: 34px; height: 34px; }
.fm-text { flex: 1; }
.fm-text strong, .fm-text small { display: block; }
.fm-text small { color: var(--ink2); }
.fm-change { color: var(--teal); font-weight: 700; }
.fm-list { display: grid; gap: 6px; }
.fm-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); text-align: left; cursor: pointer; }
.fm-row.on { border-color: var(--teal); }
.fm-row strong, .fm-row small { display: block; }
.fm-row small { color: var(--ink2); font-size: .82rem; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 6px 0; }
.ph { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--card); cursor: pointer; display: block; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph span { position: absolute; inset: auto 0 0 0; background: rgba(12, 34, 41, .78); color: #FBEFD9; font-size: .75rem; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ph.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--teal); color: var(--teal); font-weight: 700; background: transparent; }
.ph.add svg { width: 34px; height: 34px; }
.ph.add span { position: static; background: none; color: inherit; font-size: .85rem; }
.ph-big { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 10px; background: #000; margin-bottom: 10px; }
details summary { font-weight: 700; min-height: 48px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mgrid.two { grid-template-columns: 1fr 1fr; align-items: end; }
.mfield { display: block; margin: 8px 0; }
.mfield > span:first-child { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 4px; color: var(--ink2); }
.mfield.wide { width: 100%; }
.munit { display: flex; align-items: center; gap: 6px; }
.munit em { font-style: normal; color: var(--ink2); font-size: .9rem; }
.custom-row { display: grid; grid-template-columns: 2fr 1.2fr 1fr 48px; gap: 6px; margin: 6px 0; }
.savebar { position: fixed; inset: auto 0 0 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); z-index: 900; }
.savebar > * { max-width: 652px; margin-left: auto; margin-right: auto; }
.save-why { font-size: .88rem; color: var(--ink2); margin-bottom: 6px; }
.btn.save { width: 100%; min-height: 58px; font-size: 1.15rem; background: var(--orange); border-color: var(--orange); color: var(--on-orange); display: flex; }
.btn.save.red { background: var(--red); border-color: var(--red); color: #fff; }

/* Today */
.tour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.tour-btn { min-height: 86px; border-radius: 14px; border: 2px solid var(--teal); background: var(--paper); color: var(--ink); text-align: left; padding: 10px 12px; cursor: pointer; }
.tour-btn strong { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--teal); }
.tour-btn span { font-size: .9rem; }
.dep-code { font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums; }
.dep-code.big { font-size: 1.55rem; }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.tally div { background: var(--paper); border-radius: 12px; padding: 10px; text-align: center; }
.tally strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tally span { font-size: .85rem; color: var(--ink2); }
.tally .has-red strong { color: var(--red); }
.guest-list { display: flex; flex-wrap: wrap; gap: 8px; }
.guest { min-height: 52px; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); text-align: left; cursor: pointer; }
.guest strong, .guest small { display: block; }
.guest small { color: var(--ink2); font-size: .75rem; }
.guest.add { border-style: dashed; border-color: var(--teal); color: var(--teal); font-weight: 700; }
.dep-list { list-style: none; padding: 0; margin: 0; }
.dep-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }

/* Catalogue */
.search-row { display: flex; gap: 8px; }
.search-row .btn { flex: none; }
.count { margin: 6px 0; }
.rec-list { list-style: none; padding: 0; margin: 0; }
.rec-item { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; align-items: center; }
.rec-item.is-red { border-left: 5px solid var(--red); padding-left: 8px; }
.rec-item.is-void { opacity: .5; }
.rec-thumb { width: 64px; height: 64px; border-radius: 8px; background: var(--card) center/cover no-repeat; flex: none; border: 1px solid var(--line); }
.rec-main { display: flex; flex-direction: column; min-width: 0; }
.rec-no { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.rec-type { font-weight: 600; }
.rec-sub { font-size: .85rem; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin-left: 8px; vertical-align: 2px; }
.empty { padding: 28px 8px; color: var(--ink2); text-align: center; }
.rec-top { margin: -6px 0 2px -8px; }
.kvs { margin: 14px 0; }
.kv { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--ink2); font-size: .9rem; font-weight: 600; }
.kv dd { margin: 0; }
.kv small { color: var(--ink2); }
.history { margin-top: 18px; }
.hist { padding-left: 1.2em; font-size: .9rem; }
.hist li { margin: 8px 0; }
.hist ul { padding-left: 1em; margin: 4px 0; color: var(--ink2); word-break: break-word; }

/* More */
.menu { list-style: none; padding: 0; margin: 0; }
.menu a, .menu > li > span { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.menu strong, .menu small { display: block; }
.menu small { color: var(--ink2); }
.menu.soon { opacity: .6; }

/* Sheets, toasts, busy */
.sheet-wrap { position: fixed; inset: 0; z-index: 3000; background: rgba(12, 34, 41, 0); display: flex; align-items: flex-end; justify-content: center; transition: background .18s; }
.sheet-wrap.open { background: rgba(12, 34, 41, .55); }
.sheet { width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; background: var(--paper); border-radius: 18px 18px 0 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateY(30px); opacity: 0; transition: transform .18s, opacity .18s; }
.sheet-wrap.open .sheet { transform: none; opacity: 1; }
.sheet-title { font-size: 1.3rem; }
.sheet-body p { margin: 0 0 12px; }
.sheet-body .input { margin: 6px 0; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; padding: 0 10px; }
.saved-sheet .sheet-title { font-variant-numeric: tabular-nums; }
.saved-sheet .sheet-actions { flex-wrap: wrap; }
.saved-sheet .sheet-actions .btn.primary { flex-basis: 100%; order: -1; min-height: 58px; font-size: 1.1rem; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs) + 14px); transform: translate(-50%, 20px); max-width: 92vw; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--paper); font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 4000; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--red); color: #fff; }
body.form-open .toast { bottom: 110px; }
.busy { position: fixed; inset: 0; z-index: 3500; background: rgba(12, 34, 41, .6); display: grid; place-items: center; }
.busy-box { background: var(--paper); padding: 20px; border-radius: 14px; width: min(90vw, 360px); }
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabs) + 10px); z-index: 5100; background: var(--teal); color: var(--on-teal); padding: 10px 14px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.update-bar .btn { border-color: currentColor; background: var(--paper); color: var(--teal); }
.fatal { padding: 30px 20px; max-width: 560px; margin: 0 auto; }

/* Lock and setup */
#lock { position: fixed; inset: 0; z-index: 5000; background: var(--paper); display: grid; place-items: center; padding: 20px; }
.lock-box { text-align: center; width: 100%; max-width: 330px; }
.lock-bird { width: 76px; height: 76px; object-fit: contain; background: #FBEFD9; border-radius: 50%; padding: 4px; }
.lock-box h1 { font-size: 1.4rem; margin: 10px 0 2px; }
.pin-dots { height: 28px; display: flex; justify-content: center; gap: 12px; margin: 12px 0; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.key { height: 70px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); font-size: 1.6rem; font-weight: 600; cursor: pointer; }
.setup-logo { width: 240px; max-width: 70%; display: block; margin: 8px 0 14px; }
:root[data-theme="dark"] .setup-logo { background: #FBEFD9; border-radius: 10px; padding: 6px 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .setup-logo { background: #FBEFD9; border-radius: 10px; padding: 6px 10px; } }

/* Map */
#mapview { position: fixed; top: var(--top); bottom: var(--tabs); left: 0; right: 0; z-index: 10; }
#map { position: absolute; inset: 0; background: var(--mapbg, #D9D2C3); }
.map-ui > * { position: absolute; z-index: 800; }
.map-layers { top: 10px; left: 10px; right: 10px; margin: 0 auto; max-width: 420px; background: var(--paper); box-shadow: var(--shadow); }
.map-me { right: 12px; bottom: 34px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--paper); color: var(--gps); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.map-me svg { width: 28px; height: 28px; stroke-width: 2.4; }
.map-gps { top: 70px; left: 12px; background: var(--paper); border-radius: 8px; padding: 2px 8px; font-size: .85rem; font-weight: 700; color: var(--gps); box-shadow: var(--shadow); }
.map-gps:empty { display: none; }
.map-pick { inset: 0; pointer-events: none; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--orange); box-shadow: 0 0 0 1.5px #0C2229; }
.crosshair::before { left: 21px; top: 0; width: 4px; height: 46px; }
.crosshair::after { top: 21px; left: 0; height: 4px; width: 46px; }
.pick-bar { position: absolute; left: 10px; right: 10px; bottom: 12px; background: var(--paper); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); pointer-events: auto; font-weight: 600; }
.pick-bar .row-btns { margin: 10px 0 0; }
.pick-bar .btn { flex: 1; }
body.picking .map-me { bottom: 150px; }
.pin { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.pin-red { background: #D93025; border-radius: 4px; transform: rotate(45deg) scale(.92); }
.pin-placed { border-style: dashed; }
.pin-red.pin-rescued { background: #fff; border: 5px solid #D93025; }
.rescue { border-top: 2px solid color-mix(in srgb, var(--red) 40%, transparent); margin-top: 14px; padding-top: 6px; }
.gps-me { position: relative; display: block; width: 30px; height: 30px; }
.gps-me i { position: absolute; inset: 6px; border-radius: 50%; background: #1E88E5; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(12, 34, 41, .45), 0 2px 6px rgba(0, 0, 0, .5); }
.gps-me::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(30, 136, 229, .35); animation: gpspulse 2s ease-out infinite; }
@keyframes gpspulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gps-me::before { animation: none; } }
.pop { font: 15px/1.4 var(--sans); }
.pop .btn { margin-top: 8px; }
.pop .catno { font-family: var(--serif); font-size: 1.1rem; }
.leaflet-container { font: 13px/1.4 var(--sans); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--paper); color: var(--ink); }
.leaflet-control-attribution { font-size: 10px; max-width: 70vw; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (min-width: 720px) { .tour-grid { grid-template-columns: repeat(4, 1fr); } }

/* Stage 2: map tools, sites and survey points */
.map-tool { right: 12px; bottom: 100px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.map-ui:has(#measureBar:not([hidden])) #mapMeasure { background: var(--orange); color: var(--on-orange); }
.map-ui:has(#measureBar:not([hidden])) .map-me, .map-ui:has(#measureBar:not([hidden])) .map-tool { transform: translateY(-120px); }
.measure-bar { pointer-events: auto; }
#measureOut { font-variant-numeric: tabular-nums; }
.pin-site { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: var(--teal); color: #fff; font: 700 13px/1 var(--serif); border: 3px solid #fff; }
:root[data-theme="dark"] .pin-site { background: #1F6378; }
.pin-survey { width: 16px; height: 16px; border-width: 2px; }
.place-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; margin: 0 8px; }
.place-dot.site { border-radius: 5px; background: var(--teal); }
.place-card { border-color: var(--teal); }
.row-btns.quick { margin: 12px 0 0; }
.row-btns.quick .btn { flex: 1; }

/* Stage 2 part 2: tracks, areas, photo points, revisit reminders */
.map-track { bottom: 166px; }
.map-tool.on, .map-track.on { background: #C2185B; color: #fff; }
.map-ui:has(#measureBar:not([hidden])) .map-track { transform: translateY(-120px); }
body.picking .map-tool { display: none; }
.rec-bar { top: 66px; left: 10px; right: 10px; max-width: 460px; margin: 0 auto; background: var(--paper); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); border-left: 6px solid #C2185B; }
.rec-bar.paused { border-left-color: var(--ink2); }
.rec-bar .row-btns { margin: 8px 0 0; }
.rec-bar .btn { flex: 1; }
.rec-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rec-info #recStats { font-size: .9rem; color: var(--ink2); font-variant-numeric: tabular-nums; flex-basis: 100%; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #C2185B; align-self: center; animation: recblink 1.4s ease-in-out infinite; }
.rec-bar.paused .rec-dot { background: var(--ink2); animation: none; }
@keyframes recblink { 50% { opacity: .25; } }
.map-ui:has(#recBar:not([hidden])) .map-gps { display: none; }
.rec-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 6px; padding: 5px 10px; border-radius: 16px; background: #C2185B; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.rec-pill i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: recblink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rec-dot, .rec-pill i { animation: none; } }

.pin-photo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0C2229; border: 3px solid #fff; }
.pin-photo svg.pin-cam { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.4; }
.pin-due { box-shadow: 0 0 0 4px #E89B3C, 0 1px 6px rgba(0, 0, 0, .6); }
.pin-red.pin-due { box-shadow: 0 0 0 4px #E89B3C, 0 1px 6px rgba(0, 0, 0, .6); }
.due-txt { color: var(--warn-ink); }
.place-dot.photo { background: #0C2229; border: 3px solid var(--line); }
.place-dot.area { border-radius: 4px; background: transparent; border: 3px solid #6A1B9A; }
.place-dot.track { border-radius: 2px; height: 6px; background: #C2185B; }
:root[data-theme="dark"] .place-dot.photo { background: #FBEFD9; }
.seg.three .seg-btn { font-size: 1rem; padding: 6px 4px; }

/* Tab dot when revisits are due */
#tabs a[data-tab="today"] { position: relative; }
#tabs a.has-due::after { content: ""; position: absolute; top: 9px; left: calc(50% + 8px); width: 11px; height: 11px; border-radius: 50%; background: var(--orange); border: 2px solid var(--paper); }
.dot.due { background: var(--orange); box-shadow: 0 0 0 2px var(--warn-bg); }

/* Shapes and profiles */
.shape-fig { margin: 0 0 12px; }
.shape-fig svg { width: 100%; height: auto; display: block; background: var(--card); border-radius: 12px; border: 1px solid var(--line); }
.sh-line { fill: none; stroke: #C2185B; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sh-area { fill: rgba(106, 27, 154, .14); stroke: #6A1B9A; stroke-width: 3; stroke-linejoin: round; }
:root[data-theme="dark"] .sh-area { fill: rgba(206, 147, 216, .18); stroke: #CE93D8; }
.sh-start { fill: #2D7A4B; stroke: #fff; stroke-width: 2; }
.sh-end { fill: #0C2229; stroke: #fff; stroke-width: 2; }
.sh-prof { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; }
.sh-scale, .sh-n { font: 600 12px var(--sans); fill: var(--ink2); }
.sh-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: -1px; }
.sh-key.start { background: #2D7A4B; } .sh-key.end { background: #0C2229; border: 1px solid var(--ink2); }
.fm-shares { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; }
.fm-share { display: inline-flex; align-items: center; }

/* Photo points */
.pp-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scroll-snap-type: x mandatory; }
.pp-shot { flex: none; width: 128px; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; scroll-snap-align: start; }
.pp-shot img { width: 128px; height: 160px; object-fit: cover; border-radius: 10px; display: block; background: var(--card); }
.pp-shot span { display: block; font-size: .8rem; font-weight: 600; color: var(--ink2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.cmp { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 58vh; background: #000; border-radius: 10px; overflow: hidden; margin: 0 auto; touch-action: pan-y; }
.cmp img, .cmp-b { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp img { object-fit: contain; }
.cmp-line { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .7); pointer-events: none; }
.cmp-tag { position: absolute; top: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(12, 34, 41, .8); color: #FBEFD9; font-size: .8rem; font-weight: 700; }
.cmp-tag.l { left: 8px; } .cmp-tag.r { right: 8px; }
.cmp-range { width: 100%; height: 44px; accent-color: var(--orange); margin: 6px 0; }

/* The lining-up camera */
body.cam-open { overflow: hidden; }
.cam { position: fixed; inset: 0; z-index: 4500; background: #000; color: #FBEFD9; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.cam-top { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 58px; }
.cam-x { width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.cam-head { display: flex; flex-direction: column; min-width: 0; }
.cam-head strong { font-family: var(--serif); font-size: 1.05rem; }
.cam-aim { font-size: .88rem; color: #F6CF8C; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.cam-view { flex: 1; min-height: 0; display: grid; place-items: center; }
.cam-stage { position: relative; overflow: hidden; background: #111; }
.cam-stage video, .cam-ghost, .cam-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-ghost { pointer-events: none; transition: opacity .12s; }
.cam-grid { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255, 255, 255, .35) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .35) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255, 255, 255, .35) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .35) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.cam-msg { position: absolute; left: 8px; right: 8px; top: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(12, 34, 41, .88); color: #FBEFD9; font-size: .88rem; font-weight: 600; pointer-events: none; }
.cam-bottom { padding: 8px 14px 10px; }
.cam-which { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 6px; }
.cam-chip { flex: none; min-height: 40px; padding: 4px 12px; border-radius: 20px; border: 2px solid rgba(251, 239, 217, .5); background: transparent; color: #FBEFD9; font-weight: 600; cursor: pointer; }
.cam-chip.on { background: #FBEFD9; color: #0C2229; border-color: #FBEFD9; }
.cam-fade { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.cam-fade input { flex: 1; height: 40px; accent-color: #E89B3C; }
.cam-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 4px; }
.cam-row.review { grid-template-columns: 1fr 1fr; }
.cam-row[hidden] { display: none; }
.cam-shutter { width: 76px; height: 76px; border-radius: 50%; border: 5px solid #FBEFD9; background: #E89B3C; cursor: pointer; box-shadow: inset 0 0 0 3px #000; }
.cam-shutter:disabled { opacity: .35; }
.cam-alt { justify-self: start; min-height: 44px; padding: 0 10px; border: 0; background: none; color: #FBEFD9; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cam-btn { min-height: 56px; }
.cam .btn { border-color: #FBEFD9; color: #FBEFD9; }
.cam .btn.primary { background: #E89B3C; border-color: #E89B3C; color: #0C2229; }
.cam-hint { margin: 6px 0 0; font-size: .85rem; color: rgba(251, 239, 217, .8); text-align: center; }

/* Revisit */
.revisit .sub { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.rev-count { font: 700 .85rem var(--sans); padding: 2px 10px; border-radius: 12px; background: var(--orange); color: var(--on-orange); }
.rev-list { list-style: none; padding: 0; margin: 0; }
.rev-list a { display: block; padding: 10px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.rev-list small { display: block; font-weight: 400; color: var(--ink2); }
.rev-no { font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums; }
.rain-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.rain-row small { display: block; color: var(--ink2); }
.rev-soon { margin-top: 6px; }
.remind { margin-top: 8px; }
.rem-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.rem { width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); cursor: pointer; }
.rem.due { border-color: var(--orange); background: var(--warn-bg); color: var(--warn-ink); }
.rem strong, .rem small { display: block; }
.rem small { color: inherit; opacity: .85; }
.rem-done { margin-top: 6px; }
.cmp-sheet .sheet-body { padding-bottom: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .place-dot.photo { background: #FBEFD9; } :root:not([data-theme="light"]) .sh-area { fill: rgba(206, 147, 216, .18); stroke: #CE93D8; } }

/* 1.4: Emergency screen, incident reports, emergency plans */
.sos-btn { display: inline-grid; place-items: center; min-width: 52px; height: 38px; padding: 0 10px; margin-left: auto; border-radius: 10px; background: #D93025; color: #fff; font: 800 .95rem/1 var(--sans); letter-spacing: .04em; text-decoration: none; border: 2px solid #fff; }
.sos-btn + .rec-pill { margin-left: 8px; }
.sos-btn.live { animation: recblink 1.4s ease-in-out infinite; }
body.on-sos .sos-btn { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sos-btn.live { animation: none; } }
.sos-title { color: #D93025; }
:root[data-theme="dark"] .sos-title { color: #FF7B6F; }
.sos-pos { border: 3px solid #D93025; }
.sos-big { font: 700 2.05rem/1.15 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 2px 0 4px; word-break: break-word; }
.sos-dms { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sos-where { margin-top: 8px; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.sos-wait { font-size: 1.1rem; font-weight: 600; }
.sos-call { margin: 0 0 16px; }
.btn.sos-000 { width: 100%; min-height: 64px; font-size: 1.35rem; background: #D93025; border-color: #D93025; color: #fff; }
.sos-copy { font-size: 1.1rem; font-weight: 600; user-select: all; }
.steps { padding-left: 1.3em; margin: 0; }
.steps li { margin: 6px 0; }
.sos-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-btn { min-height: 58px; font-size: .95rem; line-height: 1.2; padding: 6px 8px; }
.quick-btn.done { background: var(--teal); color: var(--on-teal); }
.sos-elapsed { font-weight: 700; font-variant-numeric: tabular-nums; }
.log { list-style: none; padding: 0; margin: 10px 0; }
.log li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.log time { display: inline-block; min-width: 5.2em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--teal); }
.log-box { margin: 8px 0; }
.sos-nums summary { font-family: var(--serif); font-size: 1.15rem; }
.inc-card { border-color: var(--orange); }
.inc-card::before { border-color: var(--orange); }
.plan-card { border-color: #D93025; }
.plan-card::before { border-color: #D93025; }
.notify { padding: 10px 0; border-bottom: 1px solid var(--line); }
.notify strong, .notify > small { display: block; }
.notify > small { color: var(--ink2); margin: 2px 0 6px; }
.tick.fault { border-color: var(--orange); }
.people { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip.add { border-style: dashed; border-color: var(--teal); color: var(--teal); }
.savebar .row-btns { margin: 0; }
.savebar .row-btns .btn { flex: 1; }
.savebar .row-btns .btn.save { flex: 2; }
.spot { padding: 4px 0 8px; border-bottom: 1px dashed var(--line); }
.spot:last-child { border-bottom: 0; }
.spot-at strong { display: block; font-variant-numeric: tabular-nums; }
.spot-at small { color: var(--ink2); }
.input.w3w { font-weight: 600; }
.input.bad { border-color: var(--red); }
.pin-plan { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; color: #fff; font: 800 12px/1 var(--sans); border: 2px solid #fff; }
.plan-sec { margin-top: 8px; }
.safety { border-left: 6px solid var(--orange); }
.safety .sub { margin-top: 0; }
.card > .sub:first-child, .card > div > .sub:first-child, .sos-pos .sub { margin-top: 0; }

/* 1.5: library, ID key, exports */
.lib-list { list-style: none; padding: 0; margin: 10px 0; }
.lib-ch { margin: 18px 0 4px; font-family: var(--serif); font-weight: 700; color: var(--teal); }
.lib-break { margin: 14px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--card); font-size: .85rem; font-weight: 700; color: var(--ink2); }
.lib-break.dying { background: #B3261E; color: #fff; }
.lib-row { display: flex; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.lib-sw { width: 30px; align-self: stretch; min-height: 44px; border-radius: 5px; border: 1px solid rgba(12, 34, 41, .3); flex: none; }
.red-txt { color: var(--red); }
.lib-head .lib-band { height: 14px; border-radius: 7px; background: var(--fm); margin: 4px 0 10px; border: 1px solid rgba(12, 34, 41, .25); }
.lib-story .sub { margin-top: 0; }
.lib-nyanda { border-left: 5px solid var(--teal); padding: 2px 0 2px 12px; margin: 0 0 14px; }
.lib-nyanda .sub { margin: 0 0 4px; font-size: 1.05rem; }
.lib-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.lib-counts div { background: var(--card); border-radius: 12px; padding: 10px; text-align: center; }
.lib-counts strong { display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1; }
.lib-counts span { font-size: .85rem; color: var(--ink2); }
.lib-counts .has-red strong { color: var(--red); }
.ty-list { list-style: none; padding: 0; margin: 0; }
.ty { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ty > .btn { grid-column: 2; justify-self: start; }
.ty-ph { width: 64px; height: 64px; border-radius: 10px; background: var(--card) center/cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; font: 800 1.6rem var(--sans); color: var(--red); }
.ty-ph.none { background-image: repeating-linear-gradient(45deg, var(--card) 0 6px, transparent 6px 12px); }
.ty-red .ty-ph { border-color: var(--red); }
.ty-main strong, .ty-main small { display: block; }
.ty-main small { color: var(--ink2); margin: 2px 0 4px; }
.ty-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-tag { font-size: .78rem; font-weight: 600; color: var(--ink2); }
.lib-draft { margin-top: 18px; }
.idk-here { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); margin: 4px 0 14px; }
.idk-here > span:nth-child(2) { flex: 1; }
.idk-here small, .idk-here strong { display: block; }
.idk-here small { color: var(--ink2); }
.idk-here .lib-sw { min-height: 36px; }
.idk-q h2 { font-size: 1.35rem; }
.idk-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.idk-yn .btn { min-height: 64px; font-size: 1.1rem; }
.idk-red { border: 3px solid var(--red); border-radius: 14px; padding: 14px; background: var(--red-bg); }
.idk-red h2 { color: var(--red); }
.idk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.idk-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 108px; padding: 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font-weight: 700; cursor: pointer; text-align: center; }
.idk-tile svg { width: 44px; height: 44px; color: var(--teal); stroke-width: 1.6; }
.exp-sum { margin: 14px 0; }

/* 1.6: compass-clinometer, voice notes, drawing on photos */
.clino { position: fixed; inset: 0; z-index: 4500; background: var(--paper); overflow: auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.clino-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.clino-top strong { font-family: var(--serif); font-size: 1.2rem; }
.clino-dial { max-width: 260px; margin: 4px auto; }
.clino-svg { width: 100%; height: auto; display: block; }
.cl-ring { fill: var(--card); stroke: var(--teal); stroke-width: 2; }
.cl-ring2 { fill: none; stroke: var(--line); stroke-width: 1; }
.cl-n, .cl-e { font: 700 13px var(--sans); fill: var(--ink2); text-anchor: middle; }
.cl-n { fill: var(--red); }
.cl-strike { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.cl-dipv { stroke: var(--orange); stroke-width: 3; }
.cl-dot { fill: var(--orange); stroke: #fff; stroke-width: 2.5; }
.clino-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.clino-read div { background: var(--card); border-radius: 12px; padding: 8px; text-align: center; }
.clino-read span { display: block; font-size: .8rem; color: var(--ink2); font-weight: 600; }
.clino-read strong { font: 700 1.5rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.clino-state { text-align: center; font-weight: 700; color: var(--warn-ink); background: var(--warn-bg); border-radius: 10px; padding: 8px; }
.clino-state.ok { color: #fff; background: var(--green); }
.clino-rec { min-height: 60px; font-size: 1.15rem; }
.clino-list { list-style: none; padding: 0; margin: 8px 0; }
.clino-list li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.clino-list li span { font-weight: 700; flex: 1; }
.clino-list li small { color: var(--ink2); }
.clino-list li.mean span { color: var(--teal); }
.clino-help { color: var(--ink2); }
.bed { margin: 4px 0 8px; }
.bed strong, .bed small { display: block; }
.bed small { color: var(--ink2); font-variant-numeric: tabular-nums; }
.bed-sym { pointer-events: none; }
.bed-sym svg { overflow: visible; }
.bs-line { stroke: #0C2229; stroke-width: 3; stroke-linecap: round; fill: none; paint-order: stroke; }
.bs-txt { font: 800 11px sans-serif; fill: #0C2229; stroke: #fff; stroke-width: 3px; paint-order: stroke; text-anchor: middle; }
.map-lowzoom .bed-sym { display: none; }
.voices { margin: 8px 0; }
.voice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.voice audio { width: 100%; height: 40px; }
.voice small { color: var(--ink2); flex: 1; }
.voice .link-btn { padding: 4px 0; }
.voice-rec { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 8px; }
.voice-dot { width: 22px; height: 22px; border-radius: 50%; background: #D93025; animation: recblink 1.2s ease-in-out infinite; }
.voice-time { font: 700 2.4rem var(--sans); font-variant-numeric: tabular-nums; }
.voice-msg { text-align: center; }
@media (prefers-reduced-motion: reduce) { .voice-dot { animation: none; } }
.drawer { position: fixed; inset: 0; z-index: 4500; background: #000; color: #FBEFD9; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.dr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; }
.dr-top .btn { border-color: #FBEFD9; color: #FBEFD9; }
.dr-top .btn.primary { background: #E89B3C; border-color: #E89B3C; color: #0C2229; }
.dr-stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.dr-stage canvas { touch-action: none; display: block; }
.dr-tools { padding: 8px 12px 10px; }
.dr-tools .seg { border-color: #FBEFD9; margin: 0 0 8px; }
.dr-tools .seg-btn { color: #FBEFD9; }
.dr-tools .seg-btn + .seg-btn { border-left-color: #FBEFD9; }
.dr-tools .seg-btn.on { background: #FBEFD9; color: #0C2229; }
.dr-cols { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-col { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(251, 239, 217, .4); cursor: pointer; }
.dr-col.on { border-color: #E89B3C; box-shadow: 0 0 0 2px #fff; }
.dr-cols .btn { border-color: #FBEFD9; color: #FBEFD9; }
.dr-hint { color: rgba(251, 239, 217, .8); margin: 8px 0 0; }

/* 1.7: Departure Record, headcount, brief cards */
.dep-prog { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--card); border-left: 6px solid var(--orange); margin: 8px 0; }
.dep-prog.ok { border-left-color: var(--green); }
.dep-prog strong { font-size: 1.1rem; }
.dep-prog span { color: var(--ink2); font-size: .9rem; }
.dep-warn { margin: 6px 0; padding: 8px 12px; border-radius: 10px; font-weight: 600; }
.dep-warn.stop { background: #B3261E; color: #fff; }
.dep-warn.care { background: var(--warn-bg); color: var(--warn-ink); }
.dep-warn.info { background: var(--card); color: var(--ink2); font-weight: 400; }
.dep-sec { border-bottom: 1px solid var(--line); padding: 4px 0 10px; }
.dep-sec > summary { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; padding: 10px 0; cursor: pointer; }
.ftick { display: flex; gap: 12px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.ftick input { width: 26px; height: 26px; flex: none; accent-color: var(--teal); margin: 0; }
.dep-car { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.dep-safety { margin: 10px 0; }
.dep-form-btn { display: block; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--orange); background: var(--paper); color: var(--ink); text-decoration: none; }
.dep-form-btn.ok { border-color: var(--green); }
.dep-form-btn strong, .dep-form-btn small { display: block; }
.dep-form-btn small { color: var(--ink2); }
.dep-safety .row-btns .btn { flex: 1; }
.dep-safety .row-btns small { font-weight: 600; opacity: .8; margin-left: 4px; }
.hc-tap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 240px; margin: 14px 0; border-radius: 22px; border: 3px solid var(--teal); background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.hc-tap strong { font: 800 6rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.hc-tap span { color: var(--ink2); font-weight: 600; }
.hc-tap.match { border-color: var(--green); background: var(--green-bg, rgba(45, 122, 75, .12)); }
.hc-tap.over { border-color: var(--red); }
.bcard { border: 2px solid var(--line); border-radius: 16px; padding: 12px 16px; margin: 14px 0; background: var(--paper); font-size: 1.12rem; line-height: 1.5; }
.bcard h2 { font-family: var(--serif); margin: 0 0 6px; font-size: 1.3rem; color: var(--teal); }
.bcard p { margin: 8px 0; }
.bcard .bline { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 8px 10px; }
.bcard.red { border-color: #B3261E; background: #FDECEA; color: #3B0A07; }
.bcard.red h2 { color: #B3261E; }
:root[data-theme="dark"] .bcard.red { background: #3B0A07; color: #FDECEA; }
:root[data-theme="dark"] .bcard.red h2 { color: #FF8A80; }
.bcard-blank { font-weight: 700; color: var(--orange); }
.red-back { margin-top: 10px; padding: 10px; border-radius: 10px; border: 2px dashed #B3261E; font-variant-numeric: tabular-nums; }

/* 1.8: pocket mode */
.pocket { position: fixed; inset: 0; z-index: 6000; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.pocket-on { overflow: hidden; }
.pk-status { position: absolute; max-width: 78%; margin: 0; color: #5a5a5a; font: 600 1rem/1.45 var(--sans); }
.pk-ring { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); width: 120px; height: 120px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.pk-track { fill: none; stroke: #121212; stroke-width: 6; }
.pk-fill { fill: none; stroke: #E89B3C; stroke-width: 7; stroke-linecap: round; }
.pk-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1rem var(--sans); color: #1a1a1a; }
.pk-ring.lit .pk-track { stroke: #2e2e2e; }
.pk-ring.lit span, .pk-ring.holding span { color: #6a6a6a; }
.rec-bar .row-btns { flex-wrap: wrap; }

/* 1.9: dots on or off */
.map-dots { bottom: 232px; }
.map-ui:has(#measureBar:not([hidden])) .map-dots { transform: translateY(-120px); }
.map-dots.filtered::after { content: ""; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); border: 2px solid var(--paper); }

/* 1.11: aerial photos */
.aer-opt { padding: 10px 0; border-bottom: 1px solid var(--line); }
.aer-opt strong, .aer-opt small { display: block; }
.aer-opt small { color: var(--ink2); margin: 2px 0 6px; }
.aer-job { display: grid; gap: 6px; }
.aer-job progress { width: 100%; height: 14px; }
.map-ui .seg.map-layers .seg-btn { padding-left: 4px; padding-right: 4px; }

/* 1.12: GPS status */
.map-gps { border: 0; font-family: inherit; cursor: pointer; }
.map-gps.meh { color: var(--warn-ink); background: var(--warn-bg); }
.map-gps.bad { color: #fff; background: #B3261E; }
.gps-me.rough { opacity: .55; }
.gps-me.rough i { background: transparent; border: 3px solid #1E88E5; }

/* 1.12: strike and dip */
.clino-who { margin: 6px 0; }
.clino-who > span { font-size: .85rem; font-weight: 700; color: var(--ink2); }
.limbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.limb { border-radius: 12px; padding: 10px; background: var(--card); border-top: 5px solid var(--lc); display: grid; gap: 2px; }
.limb strong { color: var(--lc); }
.limb-big { font: 800 2rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.limb small { color: var(--ink2); }
.limb-cmp { font-weight: 600; }
.sn-fig { margin: 8px auto; max-width: 420px; }
.stereonet { width: 100%; height: auto; display: block; }
.sn-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.sn-x { stroke: var(--ink2); stroke-width: 1; }
.sn-n { font: 700 13px var(--sans); fill: var(--ink); text-anchor: middle; }
.sn-lbl { font: 700 11px var(--sans); fill: #B26A12; }
.dep-dips { display: block; margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; }
.dep-dips strong, .dep-dips small { display: block; }
.dep-dips small { color: var(--ink2); }

/* 1.13: update details */
.upd-diag pre { white-space: pre-wrap; word-break: break-word; font-size: .78rem; background: var(--card); padding: 8px; border-radius: 8px; }

/* 1.14: credits button */
.map-credit { left: 10px; bottom: 34px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 252, 245, .9); color: var(--ink); font: italic 700 1rem/30px Georgia, serif; text-align: center; padding: 0; box-shadow: var(--shadow); cursor: pointer; }
.leaflet-control-scale { margin-left: 46px !important; }
.map-bound { left: 10px; bottom: 72px; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; background: rgba(12, 34, 41, .82); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.map-bound svg { width: 22px; height: 22px; stroke: none; }
.map-bound.off { opacity: .45; }
.map-bound.off svg path { stroke: #9AA5A8; }