@font-face{font-family:Inter;src:url('./assets/fonts/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('./assets/fonts/InterVariable-Italic.woff2') format('woff2');font-style:italic;font-weight:100 900;font-display:swap}
/* Eucalypt: restrained iOS layout with locally bundled Inter typography. */
:root {
  color-scheme: light dark;
  --bg:#f2f2f7; --surface:#fff; --surface-solid:#fff; --sheet-bg:#fff; --sheet-bg-solid:#fff;
  --surface-2:#f2f2f7; --surface-3:#c7c7cc; --text:#1c1c1e; --text-2:#59595f; --text-3:#63636a; --text-sec:var(--text-2);
  --sep:#e5e5ea; --brand:#50674c; --brand-deep:#40543d; --brand-tint:#edf2eb;
  --action-fill:#50674c; --action-ink:#fff; --on-brand:#fff; --accent:#a95b2b; --accent-deep:#894522;
  --danger:#b6302b; --verified-ink:#275d88; --verified-tint:#eaf2f9; --fresh:#64852b;
  --paper:#f7f5ef; --cream:#fff; --charcoal-olive:#353a32; --gum-leaf:#b5c8ab; --ochre:#c47f4a;
  --cat-seen:#7fa33a; --cat-heard:#6d9bb5; --cat-signs:#d9a441; --cat-care:#c4453a; --cat-rescue:#f28c28; --cat-other:#8a8474; --cat-photo:var(--cat-seen);
  --location:#007aff; --location-ring:#fff; --toast-bg:#292b28;
  --r-sheet:28px; --r-card:14px; --r-ctl:14px; --r-organic:14px; --r-organic-sm:10px;
  --shadow-sm:0 2px 8px #00000014; --shadow:0 5px 24px #0000001a; --shadow-lg:0 -4px 24px #00000014;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-heading:var(--font-body); --font-display:var(--font-body); --font:var(--font-body);
}
html{font-size:17px}
@supports(font:-apple-system-body){html{font:-apple-system-body}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000; --surface:#1c1c1e; --surface-solid:#1c1c1e; --sheet-bg:#1c1c1e; --sheet-bg-solid:#1c1c1e;
  --surface-2:#2c2c2e; --surface-3:#636366; --text:#f2f2f7; --text-2:#c0c0c8; --text-3:#b0b0b8; --text-sec:var(--text-2); --sep:#38383a;
  --brand:#b5c8ab; --brand-deep:#d0dfc8; --brand-tint:#293329; --action-fill:#b5c8ab; --action-ink:#182316; --on-brand:#182316;
  --danger:#ff827b; --verified-ink:#b1d2ee; --verified-tint:#233442; --cream:#1c1c1e; --location:#0a84ff; --location-ring:#fff;
}}
body{font-family:var(--font);background:var(--bg);line-height:1.4}
button,input,textarea,select{font-family:inherit}
.maplibregl-map,.maplibregl-popup,.maplibregl-ctrl-attrib{font-family:var(--font-body)}
.brand,.ctl,.popover,.banner,.sheet,.modal,.lb-btn,.photo::before,.pick-actions .btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-image:none}
.menu-control,.map-controls{overflow:hidden;border-radius:16px;background:var(--surface-solid);box-shadow:var(--shadow-sm)}
.menu-control{height:48px}
.map-controls{gap:0}
.menu-control .ctl,.map-controls .ctl{width:48px;height:48px;border-radius:0;box-shadow:none;background:none;color:var(--text)}
.map-controls .ctl+.ctl{border-top:1px solid var(--sep)}
#locateBtn[data-state="active"],#locateBtn[data-state="background"]{color:var(--location);background:none}
.popover{z-index:45;border-radius:14px;background:var(--surface-solid);box-shadow:var(--shadow)}
.menu-item{min-height:48px;height:auto;padding:12px;gap:12px;font-size:.9412rem;line-height:1.375;border-radius:10px}
.menu-item svg{width:20px;height:20px;flex:none;color:var(--text-2)}
.menu-item .sub{margin-left:auto;font-size:.8235rem;color:var(--text-2)}
#menu{width:264px;max-width:calc(100vw - var(--sal) - var(--sar) - 24px);max-height:calc(100dvh - var(--sat) - var(--sab) - 80px);overflow-y:auto;padding:4px;left:calc(var(--sal) + 12px);right:auto;transform-origin:top left}
#menu .menu-item{display:flex;align-items:center;width:100%;text-align:left}
.menu-item[aria-checked="true"]{background:var(--brand-tint)}
.sheet,.sheet.moving,.sheet[data-state="full"],.sheet.detail-mode{background:var(--sheet-bg);border-radius:28px 28px 0 0;box-shadow:var(--shadow-lg)}
.sheet-header{padding:0 16px 12px;gap:0 8px}
.grabber{height:32px;margin:0;min-width:44px}
.grabber::before{width:36px;height:5px;top:10px;margin-left:-18px;background:var(--surface-3)}
.search{height:44px;min-height:44px;padding:0 12px;gap:8px;border-radius:10px;background:var(--surface-2);box-shadow:none}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--brand)}
.search-ico{width:19px;height:19px;color:var(--text-3)}
#searchInput{font-size:1rem;font-weight:400;letter-spacing:0}
.search-cancel{min-height:44px;font-size:1rem;padding:0 0 0 4px}
.chips,.seg,.seg.mini{padding:2px;border-radius:10px;background:var(--surface-2);box-shadow:none}
.chips{margin-top:12px}
.chip,.seg.mini .chip{height:44px;min-height:44px;border-radius:8px;padding:0 10px;font-size:.8235rem;font-weight:500;color:var(--text-2)}
.chip[aria-checked="true"]{background:var(--surface-solid);color:var(--text);font-weight:600;box-shadow:0 1px 3px #00000014}
.sheet-body{position:relative;padding:0 16px calc(var(--sheet-safe-bottom,var(--sab)) + 24px)}
.section-head{padding:8px 0 12px;gap:12px;align-items:center}
.head-main{min-width:0}
.section-head h2{font-family:var(--font);font-size:1.1765rem;font-weight:600;line-height:1.25;letter-spacing:-.2px}
.section-head .sub{font-size:.7647rem;line-height:1.4;color:var(--text-2)}
.section-head .seg{flex:none}
.list{border-radius:0;background:none;overflow:visible}
.row{gap:12px;min-height:72px;padding:12px 0;background:none;text-align:left}
.row+.row::before{left:56px;right:0;background:var(--sep)}
.row-main{min-width:0}
.row-icon{flex:none;width:44px;height:44px;margin:0;border-radius:12px;transform:none;box-shadow:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--brand)) 12%,transparent);color:var(--c,var(--brand))}
.row-icon svg{display:block;width:23px;height:23px}
.row-icon.plain{background:var(--surface-2);color:var(--brand)}
.row-thumb{width:44px;height:44px;border-radius:10px;flex:none;overflow:hidden;box-shadow:none;background:var(--surface-2)}
.row-thumb img{width:100%;height:100%;object-fit:cover;opacity:1;transition:none}
.row-title{font-size:1rem;font-weight:500;letter-spacing:0;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.row-sub{font-size:.7647rem;font-weight:400;line-height:1.4;color:var(--text-2);white-space:normal}
.row-sub .when{font-weight:400}
.row-trail{flex:none;display:flex;flex-direction:column;gap:2px;align-items:flex-end;white-space:nowrap}
.row-dist{font-size:.8824rem;font-weight:500;color:var(--text);letter-spacing:0}
.row-dir{font-size:.7059rem;font-weight:400;color:var(--text-2)}
.row-dir::before{content:none}
.list-note{padding:0 0 12px;font-size:.7647rem;color:var(--text-2)}
.sug-head,.add-label,.about-group h3{font-size:.8235rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
.hotspot{min-height:44px;height:auto;padding:10px 12px;display:inline-flex;gap:8px;align-items:center;border-radius:10px;background:var(--surface-2);font-size:.8824rem}
.hotspot svg{width:18px;height:18px;color:var(--brand);flex:none}
.btn{min-height:50px;padding:12px 16px;border-radius:12px;background:var(--surface-2);color:var(--brand);font-size:1rem;font-weight:600;line-height:1.35;box-shadow:none}
.btn.primary,#addSubmit,.pick-actions .btn.primary{background:var(--action-fill);color:var(--action-ink)}
.btn.danger{color:var(--danger);background:none}
.field{border-radius:10px;background:var(--surface-2);box-shadow:none;font-size:1rem;padding:12px}
.field:focus{box-shadow:inset 0 0 0 2px var(--brand)}
.fab{width:48px;min-width:48px;height:48px;top:-60px;right:16px;border-radius:16px;padding:0;display:grid;place-items:center;background:var(--surface-solid);color:var(--text);box-shadow:var(--shadow-sm)}
.fab span{position:static;width:auto;height:auto;clip:auto;overflow:visible;font-size:.8824rem;font-weight:600}
.fab svg{width:22px;height:22px}
.back{min-height:44px;position:sticky;top:0;z-index:3;background:var(--sheet-bg);width:100%;margin:0 0 12px;padding:0;text-align:left;font-size:1rem;font-weight:400;color:var(--brand)}
.detail-hero{gap:12px;margin:0 0 12px;align-items:center}
.detail-hero h2{font-size:1.2941rem;line-height:1.2;font-weight:600;letter-spacing:-.3px}
.detail-hero p{font-size:.8235rem;line-height:1.4;color:var(--text-2);margin-top:4px}
.detail-hero p b{font-weight:400}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px;border-radius:8px;background:var(--surface-2);color:var(--text-2);font-size:.7647rem;font-weight:500}
.tag.verified{background:var(--verified-tint);color:var(--verified-ink)}
.tag.fresh{background:var(--brand-tint);color:var(--brand)}
.detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px;margin:16px 0}
.detail-actions .btn{min-width:0;min-height:44px;padding:10px 12px;font-size:.9412rem;font-weight:500;gap:8px;background:var(--surface-2);color:var(--text-2)}
.detail-actions .btn svg{width:18px;height:18px;flex:none}
.card{background:none;border:0;border-radius:0;padding:0;margin:16px 0}
.kv{padding:12px 0;min-height:48px;gap:16px;font-size:.8824rem;border:0;align-items:baseline}
.kv+.kv{border-top:1px solid var(--sep)}
.kv>span{color:var(--text-2);max-width:44%;white-space:normal}
.kv b{font-weight:400;min-width:0;overflow-wrap:anywhere;color:var(--text)}
.desc{font-size:.8824rem;line-height:1.5;color:var(--text-2)}
.fine{font-size:.7647rem;line-height:1.5;color:var(--text-2)}
.photo{width:100%;height:min(38vh,340px);border-radius:14px;margin:0 0 16px;background:#171717!important;box-shadow:none}
.photo::before{display:none}
.photo img{width:100%;height:100%;object-fit:contain;opacity:1;transition:none}
.photo-credit{left:0;right:0;bottom:0;border-radius:0;padding:24px 10px 8px;background:linear-gradient(transparent,#000b);font-size:.7059rem;color:white}
.photo-strip{gap:8px;overflow-x:auto;padding:2px 0;margin-bottom:16px}
.photo-strip button{flex:0 0 56px;height:56px;border-radius:8px}
.pending-badge{font-size:.7059rem;background:var(--surface-2);color:var(--text-2);border-radius:6px;padding:3px 6px}
.lightbox{background:#000;touch-action:pan-x;animation:none}
.lb-track{min-height:0;min-width:0}
.lb-slide{min-height:0;min-width:0}
.lb-btn{width:44px;height:44px;background:#333;color:#fff}
.lb-btn::before{inset:0}
.lb-caption{font-size:.7647rem;line-height:1.4}
.sheet[data-state="collapsed"] .photo,.sheet[data-state="collapsed"] .photo-strip,.sheet[data-state="collapsed"] .detail-tags{display:none}
.modal{background:#0006}
.modal-card{background:var(--bg);border-radius:20px 20px 0 0}
.nav-text{min-height:44px;font-size:1rem;font-weight:600;color:var(--brand)}
.add-title{font-size:1.2941rem;line-height:1.25;font-weight:600;letter-spacing:-.3px}
.add-sub{font-size:.8824rem;line-height:1.45;color:var(--text-2)}
.date-input{min-height:44px;font-size:.8824rem;max-width:48%}
/* About: a quiet information sheet, without promotional artwork. */
#about .modal-card{padding:0 0 var(--sab);background:var(--surface-solid);border-radius:20px 20px 0 0;scroll-padding-top:72px}
.about-nav{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;min-height:60px;padding:0 12px;background:var(--surface-solid);border-bottom:1px solid var(--sep)}
.about-nav h1{grid-column:2;margin:0;text-align:center;font-size:1rem;line-height:1.3;font-weight:600;letter-spacing:-.02em}
#about #aboutClose{position:static;grid-column:3;min-height:44px;padding:8px;background:none;box-shadow:none;border-radius:8px;font-size:.9412rem;font-weight:500;color:var(--text)}
.about-content{padding:28px 24px 32px}
.about-intro{margin:0;padding:0 0 28px;text-align:left}
.about-intro h2{margin:0;max-width:340px;font-size:1.4118rem;line-height:1.2;font-weight:600;letter-spacing:-.035em;color:var(--text)}
.about-intro p{margin:12px 0 0;font-size:.9412rem;line-height:1.5;color:var(--text-2)}
#about .about-group{margin:0;padding:24px 0;border-top:1px solid var(--sep);border-radius:0;background:none;box-shadow:none}
#about .about-group:last-child{padding-bottom:0}
#about .about-group h3{margin:0 0 12px;font-size:.9412rem;line-height:1.4;font-weight:600;letter-spacing:-.015em;text-transform:none;color:var(--text)}
#about .about-group p{font-size:.8824rem;line-height:1.55;color:var(--text-2)}
#about .about-group p+p{margin-top:12px}
#about .legend li{gap:14px;padding:10px 0}
#about .legend li:first-child{padding-top:2px}
#about .legend b{font-weight:500;color:var(--text)}
#about .legend .dot{width:10px;height:10px;margin:6px 2px 0;box-shadow:none}
#about .legend .desc{display:block;margin:3px 0 0;font-size:.8235rem;line-height:1.45;color:var(--text-2)}
#about .tips li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:.8824rem;line-height:1.5;color:var(--text-2)}
#about .tips li::before{content:none}
#about .tips li svg{flex:none;margin-top:2px;width:20px;height:20px;color:var(--text-2)}
#about .about-group a.tel{color:var(--text);font-weight:500;text-underline-offset:3px}
#about .about-group.fine p{font-size:.8235rem;line-height:1.5;margin-bottom:0}
.about-links{margin-top:20px;border-top:1px solid var(--sep)}
.about-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;border-bottom:1px solid var(--sep);font-size:.8824rem;color:var(--text);text-decoration:none}
.about-links a:last-child{border-bottom:0}
.about-links svg{flex:none;width:16px;height:16px;color:var(--text-2)}
@media(min-width:760px){#about .modal-card{border-radius:20px}.about-content{padding:32px}}
.toast{background:var(--toast-bg);color:#fff;line-height:1.4}
@media(min-width:760px){
  #menu{left:calc(432px + var(--sal) + 12px)}
  /* iPad: keep the side panel clear of the status bar. Desktop browsers have no top inset, so it stays at 16px. */
  .sheet{top:max(16px,calc(var(--sat) + 8px))}
  .sheet,.sheet[data-state="full"]{border-radius:0}
  .sheet:not(.search-mode):not(.detail-mode) .fab{top:auto;bottom:20px;right:16px;background:var(--surface-solid)}
  .sheet-body{padding-bottom:88px}
  .photo{height:280px}
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-mark{content:url(/assets/eucalypt/koala-head-paper.png)}}
@media(prefers-reduced-motion:reduce){.view,.view.pop,.sheet,.photo img,.row-thumb img{animation:none!important;transition:none!important}}

/* Brief status messages should not wrap into a narrow block. */
.toast{width:max-content;max-width:calc(100vw - 32px);padding:12px 16px;border-radius:14px;font-size:.8824rem}

/* Keep the sighting itself ahead of technical source fields. */
.detail-location{margin:4px 0 16px}
.detail-location .kv{border:0;padding:4px 0;min-height:28px}
.record-details{margin-top:24px;padding-top:16px;border-top:1px solid var(--sep)}
.record-details h3{font-size:1rem;font-weight:600;margin:0;color:var(--text)}
.record-details .card{margin-top:4px}
.koala-name-source{margin:0 0 8px;font-size:.7647rem;line-height:1.4;color:var(--text-2)}
.koala-name-source a{color:inherit;text-underline-offset:2px}

.stack-back{position:static;width:auto;margin:0 0 8px;display:flex;align-items:center;gap:4px;min-height:44px}
.stack-back svg{width:20px;height:20px;flex:none}

/* Compact map picker: consistent icon, label and trailing selection columns. */
#styleMenu{width:296px;max-width:calc(100vw - var(--sal) - var(--sar) - 24px);max-height:calc(100dvh - var(--sat) - var(--sab) - 80px);overflow-y:auto;padding:4px}
#styleMenu[data-anchor="left"]{left:calc(var(--sal) + 12px);right:auto;transform-origin:top left}
#styleMenu .menu-item{min-height:48px;padding:12px;gap:12px;font-size:.9412rem;font-weight:400;line-height:1.375;border-radius:10px}
#styleMenu .menu-item svg{width:20px;height:20px;color:var(--text-2)}
.map-style-label{flex:1;min-width:0}
#styleMenu .menu-item[aria-checked="true"]{background:none;font-weight:400}
#styleMenu .menu-item::after{content:"";flex:0 0 7px;width:7px;height:12px;margin:0 3px 0 0;border:solid transparent;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-2px,-2px)}
#styleMenu .menu-item[aria-checked="true"]::after{border-color:var(--brand)}
#styleMenu .menu-item:active{background:var(--surface-2)}
.nature-divider{height:1px;background:var(--sep);margin:4px 12px}
.corridor-swatch{display:inline-block;flex:none;width:20px;height:20px;border-radius:5px;background:rgba(28,155,146,.28);border:1.5px solid #16857e;box-sizing:border-box}
.corridor-label{display:flex;flex-direction:column;gap:3px}
.nature-caption{display:block;font-size:.7647rem;line-height:1.4;color:var(--text-2);font-weight:400}
#corridorToggle{min-height:72px}
#corridorToggle>.corridor-swatch{align-self:flex-start;margin-top:2px}
#styleMenu #corridorToggle::after{align-self:flex-start;margin-top:5px}
.nature-info{margin:0 12px;padding:12px 0 4px;border-top:1px solid var(--sep);font-size:.8235rem;line-height:1.45;color:var(--text-2)}
.nature-info p{margin:0 0 12px}
#corridorStatus:empty{display:none}
.nature-key{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;font-size:.7647rem}
.nature-key>span{display:flex;align-items:center;gap:6px}
.nature-key i{width:12px;height:12px;border-radius:3px}
.restoration-swatch{display:inline-block;border:1.5px dashed #16857e;background:transparent;box-sizing:border-box}
.nature-link,.nature-source{display:flex;align-items:center;min-height:44px;text-align:left;font:inherit;color:var(--text);background:none;border:0;padding:4px 0;text-decoration:none}
.nature-link{font-weight:500;width:100%;color:var(--brand)}
.nature-source{font-size:.7647rem;color:var(--text-2);border-top:1px solid var(--sep)}
#styleBtn{position:relative}
#styleBtn.has-corridors::after{content:'';position:absolute;right:8px;bottom:8px;width:6px;height:6px;border-radius:50%;background:#16857e}
.maplibregl-popup.corridor-popup{display:flex}
.corridor-popup .maplibregl-popup-content{padding:16px 36px 16px 16px;border-radius:14px;font-family:var(--font-ui,Inter,system-ui);font-size:14px;line-height:1.45;background:var(--surface);color:var(--text);box-shadow:0 4px 24px #0002}
.corridor-popup strong{display:block;font-size:16px;margin-bottom:4px}
.corridor-popup p{margin:4px 0}
.corridor-popup .maplibregl-popup-close-button{width:36px;height:36px;font-size:24px;color:var(--text)}

/* Touch/mouse activation keeps focus, but only keyboard navigation draws its ring. */
:root[data-focus-input="pointer"] :is(button,a,[role="button"]):focus{outline:none}
:root[data-focus-input="keyboard"] :is(button,a,[role="button"]):focus{outline:2px solid var(--accent-deep);outline-offset:2px}
@media(prefers-contrast:more){:root[data-focus-input="pointer"] :is(.btn,.ctl):focus{outline:1px solid var(--ink-500)}}

/* Consistent form labels, supporting text and scalable choice rows. */
.add-label{display:block;margin:0 0 8px}
.add-label .optional{font-weight:400}
.add-step>.field+.add-label{margin-top:16px}
.add-card .field{background:var(--surface-solid)}
.field::placeholder,#searchInput::placeholder{color:var(--text-2);opacity:1}
#whatSeg .chip{height:auto;min-height:44px;min-width:0;padding:8px 6px;white-space:normal;line-height:1.3}
#countSeg .chip{min-width:0}
.pill-btn{min-height:44px;height:auto;padding:10px 14px}
.add-done h2{font-size:1.2941rem;font-weight:600;line-height:1.25}
.add-done p{font-size:.8824rem;line-height:1.5}
.attrib{margin-top:24px;padding:0}
.attrib p{font-size:.7059rem;line-height:1.5;opacity:1;color:var(--text-2)}
.attrib p+p{margin-top:8px}
#viewDetail>.fine+.fine{margin-top:8px}
#viewDetail>.desc{margin:12px 0}
@media(min-width:760px){#styleMenu[data-anchor="left"]{left:calc(432px + var(--sal) + 12px)}}

.legend-care{width:16px;height:16px;flex:none;margin:3px -2px 0;color:var(--cat-rescue)}

@media(prefers-reduced-motion:reduce){.user-dot-ring{animation:none;opacity:.5}}