/* Layout: map (left) beside a field-notebook panel (right); stacks on phones. */
:root {
  --bg: #E9EFEC; --panel: #F7FAF8; --ink: #16262A; --muted: #5A6B6C; --line: #D0DBD7;
  --accent: #1D6A64; --accent-ink: #FFFFFF; --rare: #B8466E; --rare-soft: rgba(184,70,110,.12);
  --shadow: 0 1px 2px rgba(22,38,42,.12), 0 4px 14px rgba(22,38,42,.10);
  --f-display: "Songti SC", "STSong", "Noto Serif SC", serif;
  --f-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --f-mono: ui-monospace, Menlo, "SF Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1618; --panel: #142022; --ink: #E2EBE9; --muted: #8EA2A2; --line: #26383B;
    --accent: #5DB7AC; --accent-ink: #0E1618; --rare: #E481A5; --rare-soft: rgba(228,129,165,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
    color-scheme: dark;
  }
  .leaflet-tile-pane { filter: brightness(.82) contrast(1.05) saturate(.85); }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.55 var(--f-body); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.brand h1 { font: 700 24px var(--f-display); margin: 0; letter-spacing: .06em; }
.brand p { margin: 0; color: var(--muted); font-size: 13px; }
header .sp { flex: 1; }

.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 4px 10px; font-size: 12.5px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); font-size: 12px; text-decoration: underline; }
.linkbtn.danger { color: var(--rare); }

main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; min-height: 0; }
.maphint { position: absolute; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(10,18,20,.45); color: #fff; font-size: 16px; opacity: 0; transition: opacity .2s; }
.maphint.on { opacity: 1; }
.mapwrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); min-height: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }
#map.picking, #map.picking .leaflet-interactive { cursor: crosshair; }
.float { position: absolute; z-index: 500; }
.seg { top: 12px; left: 56px; right: 56px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg .short { display: none; }   /* phones swap the long season names for these, see the phone rules below */
.seg button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; white-space: nowrap; flex: none; box-shadow: var(--shadow); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.pickbar { top: 56px; left: 50%; transform: translateX(-50%); background: var(--rare); color: #fff;
  border-radius: 999px; padding: 6px 14px; font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; }

/* map markers */
.photo-pin, .photo-cluster { background: none; border: 0; }
.photo-pin div, .photo-cluster div { position: relative; width: 100%; height: 100%; border-radius: 50%;
  border: 3px solid #fff; box-shadow: var(--shadow); background: #ccc center/cover no-repeat; }
.photo-pin.fz div, .photo-cluster.fz div { border-color: var(--rare); border-style: dashed; }
.photo-pin.pend div, .photo-cluster.pend div { border-color: var(--accent); }
.photo-cluster span { position: absolute; right: -7px; top: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--accent); color: var(--accent-ink); font: 500 12px/22px var(--f-mono); text-align: center; }
.photo-cluster.fz span { background: var(--rare); }
.site-pin { background: none; border: 0; }
.site-pin div { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: #16262A; }
.site-pin i { width: 10px; height: 10px; transform: rotate(45deg); background: #fff; border: 2px solid #1D6A64; flex: none; }
.site-pin span { background: rgba(255,255,255,.88); padding: 1px 6px; border-radius: 4px; }
.leaflet-container { font: inherit; }

/* panel */
aside { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow-y: auto; min-height: 0; }
.pad { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.sec-h { font-size: 11.5px; letter-spacing: .14em; color: var(--muted); margin: 0 0 6px; font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { border-bottom: 2px solid var(--line); padding-bottom: 6px; }
.stat b { display: block; font: 500 24px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.rare b { color: var(--rare); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.chip em { font-style: normal; font-family: var(--f-mono); color: var(--muted); margin-left: 4px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed="true"] em { color: inherit; }
.chip.rare { border-color: var(--rare); }
.selbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.rec { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.rec:first-child { border-top: 0; }
.rec img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; background: var(--line); cursor: var(--bird-zoomin), zoom-in; }
.rec h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec .sci { font-style: italic; color: var(--muted); font-size: 12px; font-weight: 400; }
.rec .meta { font-size: 12px; color: var(--muted); }
.rec .note { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.badge { font-size: 11px; font-weight: 500; border-radius: 4px; padding: 0 5px; border: 1px solid var(--rare); color: var(--rare); }
.badge.pend { border-color: var(--accent); color: var(--accent); }
.badge.ai { border-color: var(--line); color: var(--muted); }
.badge.ev { border-color: var(--accent); color: var(--accent); }
/* On a phone the two ways in are named: take a photo now, or pick one already taken. */
.srcbtns { display: none; gap: 8px; }
.srcbtns .btn { flex: 1; justify-content: center; text-align: center; }
@media (max-width: 860px) { .srcbtns { display: flex; } }
.fznote { font-size: 12px; color: var(--rare); }
.sug { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.sug ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sugform { display: flex; gap: 6px; }
.sugform input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px 8px; font-size: 13px; }
.empty { border: 1.5px dashed var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.empty h3 { margin: 0; font: 700 17px var(--f-display); }
.empty p, .siteinfo p { margin: 0; color: var(--muted); }
.siteinfo h2 { margin: 0 0 4px; font: 700 19px var(--f-display); }
.code { border-top: 1px solid var(--line); padding-top: 14px; }
.code ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* upload form */
form.up { display: flex; flex-direction: column; gap: 12px; }
.up h2 { margin: 0; font: 700 19px var(--f-display); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px;
  border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; padding: 10px; cursor: pointer; position: relative; }
.drop.over { border-color: var(--accent); background: var(--bg); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop img { max-height: 240px; max-width: 100%; border-radius: 8px; }
.box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mono { font-family: var(--f-mono); font-size: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.field input, .field textarea { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 7px 9px; font-size: 14px; color: var(--ink); }
.field textarea { min-height: 56px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.chk input { margin-top: 3px; }
.cand { display: flex; flex-direction: column; gap: 6px; }
.cand button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; text-align: left;
  border: 1px solid var(--line); background: none; border-radius: 10px; padding: 8px 10px; }
.cand button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cand .nm { font-weight: 700; }
.cand .pc { font: 500 13px var(--f-mono); color: var(--accent); align-self: center; }
.cand .why { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.bar { grid-column: 1 / -1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.err { color: var(--rare); font-size: 13px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: var(--panel); padding: 8px 16px; border-radius: 999px; font-size: 13px; z-index: 2000; box-shadow: var(--shadow); }
#lightbox { position: fixed; inset: 0; background: rgba(10,18,20,.85); display: flex; align-items: center; justify-content: center; z-index: 3000; padding: 16px; cursor: var(--bird-zoomout), zoom-out; }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

@media (max-width: 860px) {
  .app { height: auto; min-height: 100%; }
  main { grid-template-columns: minmax(0, 1fr); }
  .mapwrap { height: min(62vh, 560px); }
  aside { overflow: visible; }
  .brand h1 { font-size: 21px; }
  header { gap: 8px 6px; }
  header .sp { flex-basis: 100%; height: 0; }
  header .btn { padding: 6px 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.drop-pin { background: none; border: 0; }
.drop-pin div { width: 24px; height: 24px; background: var(--rare); border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: var(--shadow); cursor: move; }

/* record ⋮ menu */
.rec { position: relative; }
.rec h3 { padding-right: 30px; }
.kebab { position: absolute; top: 8px; right: -6px; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); display: grid; place-items: center; fill: currentColor; }
.kebab:hover, .kebab[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
.popmenu { position: fixed; z-index: 2500; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(22,38,42,.18);
  display: flex; flex-direction: column; }
.popmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; font-size: 14px; color: var(--ink); }
.popmenu button:hover, .popmenu button:focus-visible { background: var(--bg); outline: none; }
.popmenu button.danger { color: var(--rare); }
.popmenu button.reason { padding-left: 14px; }
.popmenu .mhead button { color: var(--muted); font-size: 13px; }
.popmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.popmenu .mtext { padding: 8px 10px 4px; font-size: 13px; color: var(--muted); }
.statusnote { font-size: 12.5px; color: var(--ink); background: var(--bg); border: 1px dashed var(--line);
  border-radius: 6px; padding: 6px 9px; margin-bottom: 6px; }
.sitefoot { border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.sitefoot a, .consent a { color: var(--muted); }
.consent { margin: 0; }
.editthumb { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; }
.segsep { width: 1px; background: var(--line); margin: 4px 2px; flex: none; }
.badge.first { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.backbtn { align-self: flex-start; font-size: 13px; text-decoration: none; }
.lifehead { margin: 0 0 4px; font: 700 19px var(--f-display); }
.lifelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lifelist li + li { border-top: 1px solid var(--line); }
.lifelist button { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 10px 2px; }
.lifelist button:hover .nm { color: var(--accent); }
.lifelist .nm { font-weight: 700; font-size: 15px; }
.lifelist .sci { font-style: italic; color: var(--muted); font-size: 12px; }
.lifelist .meta { font-size: 12px; color: var(--muted); }
.mergebox { border-color: var(--accent); }
.mergerow { display: flex; gap: 10px; align-items: center; }
.mergerow img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
#lifeBtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.exportbox { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.exportbox p { margin: 0; }
.exportlinks { display: flex; gap: 8px; flex-wrap: wrap; }
.exportlinks a { text-decoration: none; color: var(--ink); }
#guideBtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.guide section { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.guide section p { margin: 0; }
.ghead { margin: 6px 0 0; font-size: 14px; }
.ghead em { font-style: normal; font-family: var(--f-mono); color: var(--muted); font-weight: 400; margin-left: 4px; }
.chip:disabled { cursor: var(--bird-plain), default; opacity: .85; }
/* A record in the list is a door to its own page: it says so before it is clicked. */
.rec { cursor: var(--bird-point), pointer; margin: 0 -10px; padding: 12px 26px 12px 10px; border-radius: 10px; transition: background .12s; }
.rec::after { content: '›'; position: absolute; right: 8px; bottom: 12px; font-size: 20px; line-height: 1; color: var(--muted); opacity: .45; transition: opacity .12s, transform .12s; }
.rec:hover { background: var(--bg); }
.rec:hover::after { opacity: 1; transform: translateX(3px); color: var(--accent); }
.rec .kebab { right: 2px; }
/* Going into a record the page comes in from the right; coming back, the list from the left. */
@keyframes enter-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes enter-swap { from { opacity: 0; } }
.enter-in { animation: enter-in .22s ease-out; }
.enter-back { animation: enter-back .22s ease-out; }
.enter-swap { animation: enter-swap .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .enter-in, .enter-back, .enter-swap { animation: none; } .rec, .rec::after { transition: none; } }
.rechead { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: -16px -18px 0; padding: 12px 18px;
  background: var(--panel); border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.rechead b { font: 700 15px var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rechead .backbtn { flex: none; }
/* The open record's pin stands out; the rest step back. */
.photo-pin.cur div { border: 4px solid var(--accent); box-shadow: 0 0 0 4px rgba(255,255,255,.9), var(--shadow); }
/* !important: Leaflet writes each pin's opacity into the pin itself. */
#map.focus .leaflet-marker-pane .photo-pin:not(.cur), #map.focus .photo-cluster { opacity: .45 !important; transition: opacity .2s; }
.recpage { display: flex; flex-direction: column; gap: 12px; }
.recphotobox { position: relative; line-height: 0; }
.liftbtn { position: absolute; right: 8px; bottom: 8px; line-height: 1.4; background: var(--panel); box-shadow: var(--shadow); }
.liftbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.recphoto { width: 100%; max-height: 46vh; object-fit: contain; border-radius: 12px; background: var(--line); cursor: var(--bird-zoomin), zoom-in; }
.recpage .sci { font-style: italic; color: var(--muted); font-size: 13px; }
.recfacts, .spprofile dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13.5px; }
.recfacts dt, .spprofile dt { color: var(--muted); }
.recfacts dd, .spprofile dd { margin: 0; }
.spprofile { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.spprofile p { margin: 0; }
.spprofile .sec-h { margin-top: 6px; }
.spprofile .sci { font-style: italic; color: var(--muted); font-size: 12px; }
.months i.seen { position: relative; }
.months i.seen::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--rare); }
.recents { display: flex; gap: 6px; flex-wrap: wrap; }
.recents button { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; line-height: 0; }
.recents button[aria-pressed="true"] { border-color: var(--accent); }
.recents img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.fact { background: var(--bg); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.fact b { font-weight: 600; }
.fact p { margin: 4px 0 0; }
.spcard { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.spcard h3 { margin: 0; font: 700 16px var(--f-display); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spcard .sci { margin: 0; font-style: italic; color: var(--muted); font-size: 12.5px; }
.spcard p { margin: 0; }
.spcard dl { margin: 2px 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
.spcard dt { color: var(--muted); }
.spcard dd { margin: 0; }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 4px 0 2px; }
.months i { font-style: normal; font: 11px var(--f-mono); text-align: center; padding: 3px 0; border-radius: 4px; color: var(--muted); background: transparent; border: 1px solid var(--line); }
.months i.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.months i.now { outline: 2px solid var(--ink); outline-offset: 1px; }
.spacts { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; }
.spacts a { color: var(--accent); }
.sites { display: flex; flex-direction: column; gap: 10px; }
.sitecard { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.sitecard h3 { margin: 0; font: 700 16px var(--f-display); }
.sitecard dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 13px; }
.sitecard dt { color: var(--muted); }
.sitecard dd { margin: 0; }
.sitecard ul, .kit { margin: 0; padding-left: 1.2em; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.sitecard .btn { align-self: flex-start; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: none; padding: 8px 10px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.guide section { border-top: 0; padding-top: 4px; }
.sources { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.sources a { color: var(--muted); }
.gear { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; }
.gear dt { color: var(--muted); white-space: nowrap; }
.gear dd { margin: 0; }
.sugname, .mergetitle { font-weight: 600; }
.badge.city { border-color: var(--accent); color: var(--accent); }
.notbird { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
#zoneBtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.zone-label { background: rgba(255,255,255,.85); border: 0; box-shadow: none; color: #085041; font-size: 12px; font-weight: 500; padding: 1px 6px; border-radius: 4px; }
.zone-label::before { display: none; }
.zone-label.on { background: #0F6E56; color: #fff; }
.draftnote { margin: 0; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 5px 9px; }
.zone .zdesc { margin: 0; font-size: 13.5px; }
.zone .sec-h + .chips + .small, .zone .zmissing + .small { margin: 6px 0 0; }
.chip.exp { background: #EAF3DE; border-color: #EAF3DE; color: #27500A; }
.zrows { list-style: none; margin: 0; padding: 0; }
.zrows li + li { border-top: 1px solid var(--line); }
.zrows button { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 2px; text-align: left; }
.zrows button:hover span:first-child { color: var(--accent); }
.zrows .meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.zmissing { background: #FAEEDA; color: #633806; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
@media (prefers-color-scheme: dark) {
  .chip.exp { background: #27500A; border-color: #27500A; color: #EAF3DE; }
  .zmissing { background: #633806; color: #FAEEDA; }
}
.sndrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sndrow label.btn { cursor: pointer; }
.recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--rare); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .recdot { animation: none; } }
.sndcand > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.framepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.framepick button { position: relative; padding: 0; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); aspect-ratio: 4 / 3; }
.framepick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.framepick span { position: absolute; left: 4px; bottom: 4px; font: 500 11px var(--f-mono); color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; padding: 0 5px; }
.framepick button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#frames p { margin: 0; }
.photo-pin.approx div { border-style: dashed; border-color: var(--muted); }
.arearow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.arearow select { flex: 1; min-width: 150px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px 8px; font-size: 13px; }
#homeBtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#map.zoomed-out .zone-label:not(.on) { display: none; }
.heatkey { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.heatkey span { margin-right: 4px; }
.heatkey i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.zone-label .heat { display: inline-block; margin-left: 5px; min-width: 16px; padding: 0 4px; border-radius: 8px; color: #412402; font: 500 11px/16px var(--f-mono); text-align: center; }
.heatkey span { flex-basis: 100%; }
.heatswitch { clear: both; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 5px 4px 11px; font-size: 12.5px; color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.heatswitch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.heatswitch i { position: relative; width: 38px; height: 22px; border-radius: 11px; background: #C9D1CE; transition: background .2s; flex: none; }
.heatswitch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.heatswitch input:checked + i { background: #34C759; }
.heatswitch input:checked + i::after { transform: translateX(16px); }
.heatswitch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .heatswitch i, .heatswitch i::after { transition: none; } }
.heatnote { left: 12px; bottom: 34px; max-width: min(360px, calc(100% - 24px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--muted); box-shadow: var(--shadow); }
.heatnote b { display: block; color: var(--ink); font-weight: 500; font-size: 12.5px; }
.heatnote span { display: block; font-size: 11px; margin-top: 2px; }
/* The pointer is a bird in every state (see cursors.js); the system cursor after the comma is the fallback. */
body, .leaflet-container { cursor: var(--bird-plain), auto; }
button, a, select, summary, label[for], .drop, .heatswitch, input[type="checkbox"], input[type="file"], input[type="date"],
.leaflet-interactive, .leaflet-bar a, .leaflet-control-layers-toggle, .leaflet-control-layers label { cursor: var(--bird-point), pointer; }
.leaflet-grab { cursor: var(--bird-grab), grab; }
.leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive { cursor: var(--bird-grabbing), grabbing; }
input:not([type]), input[type="text"], input[type="number"], input[type="search"], input[type="password"], textarea { cursor: var(--bird-text), text; }
#map.picking, #map.picking .leaflet-interactive, #map.picking.leaflet-grab { cursor: crosshair; }
.btn:disabled { cursor: not-allowed; }
.heatnote em { font-style: normal; }
/* The language menu: a globe that opens the list of languages. */
.lang { position: relative; }
.langbtn { padding: 7px 9px; display: inline-flex; align-items: center; }
.langmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1500; min-width: 136px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.langmenu button { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: none; color: var(--ink);
  padding: 7px 10px; border-radius: 8px; font-size: 13.5px; text-align: left; }
.langmenu button:hover, .langmenu button:focus-visible { background: var(--bg); }
.langmenu i { font-style: normal; color: var(--accent); min-width: 12px; }
/* Phones: one line of name, one of navigation; uploading is a round button that stays in reach of the thumb. */
@media (max-width: 860px) {
  .brand p { display: none; }
  header .sp { display: none; }
  header { justify-content: space-between; }
  .brand { flex-basis: 100%; }
  header .btn:not(.primary) { flex: 1; justify-content: center; padding: 6px 4px; }
  header .btn.langbtn { flex: 0 0 auto; padding: 6px 8px; }
  #uploadBtn { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1200;
    width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; box-shadow: 0 4px 16px rgba(22,38,42,.28); }
  #uploadBtn span { display: none; }
  #uploadBtn b { font-size: 26px; line-height: 1; }
  .seg { gap: 2px; left: 52px; right: 60px; }
  .seg button { padding: 5px 6px; font-size: 12px; min-width: 26px; }
  .segsep { margin: 4px 0; }
  .seg .full { display: none; }
  .seg .short { display: inline; }
  .pad { padding-bottom: 76px; }
  .editing #uploadBtn { display: none; }   /* already filling in a record */
  .heatnote { left: 8px; bottom: 30px; padding: 6px 9px; }
  .heatnote em { display: none; }   /* the caption's long sentence: the title and the source are enough on a small map */
}
/* Opened from the home screen: no browser bars, so keep clear of the phone's own status bar and home indicator. */
@media (display-mode: standalone) {
  .app { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
}
#uploadBtn b { font-weight: 400; }
.filing { font-size: 12px; color: var(--muted); }
.filing a { color: var(--muted); text-decoration: none; }
.filing a:hover { text-decoration: underline; }
p.filing { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); }
.gaicon { height: 15px; width: auto; vertical-align: -3px; margin-right: 4px; }   /* the police emblem that goes with a 公安备案号 */

/* Upload: quick (identify, keep for oneself) and map (a record on the area map) share one form. */
.up.quick .maponly, .up:not(.quick) .quickonly { display: none !important; }
#spcard:empty { display: none; }
.spprofile .nicks { color: var(--accent); font-weight: 500; }
#spcard .spprofile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }

/* The header's "My birds": a shorter word on a phone, where five buttons share one line. */
header .short { display: none; }
@media (max-width: 860px) {
  header .full { display: none; }
  header .short { display: inline; }
}

/* My birds */
.minepage { display: flex; flex-direction: column; gap: 12px; }
.minegrp { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.mg-h b { font-size: 15px; }
.minethumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.minethumbs button { display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 0; border: 2px solid transparent;
  border-radius: 10px; background: none; color: var(--muted); font-size: 11px; }
.minethumbs button[aria-pressed="true"] { border-color: var(--accent); }
.minethumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; display: block; }
.minethumbs .onmap span { color: var(--accent); }
.minedetail { display: flex; flex-direction: column; gap: 8px; }
.minedetail > img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; background: var(--bg); cursor: zoom-in; }
.minedetail .actions { justify-content: space-between; align-items: center; }
.keepcode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.keepcode b { font-size: 18px; letter-spacing: .12em; }
.keeplink { display: flex; gap: 8px; }
.keeplink input { flex: 1; min-width: 0; text-transform: uppercase; border: 1px solid var(--line); background: var(--bg);
  border-radius: 8px; padding: 6px 9px; font-size: 14px; color: var(--ink); }
.minedetail .field input { min-width: 0; width: 100%; box-sizing: border-box; }

/* The map page's own way to record a sighting: present, but quieter than the header's "identify". */
.recordbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; }
.recordbox > div { display: flex; flex-direction: column; gap: 2px; }
.recordbox b { font-size: 14px; }
.recordbox span { font-size: 12px; color: var(--muted); }
.recordbox .btn { flex: none; }
/* The end of identifying: what happened, and another bird. */
.donecard { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 12px; text-align: center; }
.donewhat { margin: 0; font-size: 16px; }
.donecard .btn.primary { padding: 10px 28px; font-size: 15px; }
.donelinks { display: flex; gap: 18px; }
.donelinks .linkbtn { font-size: 13px; }

/* Long press on the map: no text selection or iOS callout, and the pin's popup */
#map { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.holdpop { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.holdpop b { font-size: 14px; }
.holdpop .row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }