/* ALTO Auckland: a full-size map with compact, independent control surfaces. */
html, body { overflow: hidden; overflow: clip; }
body { font-size: 16px; position: fixed; inset: 0; }
[hidden] { display: none !important; }
button, select, input { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.app, body[data-aside-collapsed="true"] .app {
  display: block; position: fixed; inset: 0; overflow: hidden; overflow: clip; height: 100vh; height: 100dvh;
}
#map { position: absolute; inset: 0; min-height: 0; }
#explorer {
  position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top));
  width: 306px; max-height: calc(100% - 64px); min-height: 0;
  border: 1px solid var(--line); border-radius: 14px; z-index: 20;
  box-shadow: 0 4px 20px #17201a18; overflow: hidden;
  background: rgba(255,255,255,.97); transition: opacity 160ms ease, transform 160ms ease;
}
body[data-aside-collapsed="true"] #explorer { transform: translateX(calc(-100% - 24px)); visibility: hidden; opacity: 0; }
#explorer header { position: relative; padding: 16px 16px 10px; gap: 8px; flex: 0 0 auto; border: 0; }
#explorer header .title-block { flex-basis: 100%; padding-right: 26px; }
h1.brand img { height: 48px; width: auto; }
.subhead { font-size: 12px; margin-top: 6px; }
#collapseAside { position: absolute; right: 6px; top: 10px; width: 38px; height: 44px; border: 0; background: transparent; font-size: 24px; }
.about-btn { font-size: 13px; border: 0; padding: 5px 0; background: none; color: var(--accent); }
.about-btn:hover { background: none; color: var(--ink); text-decoration: underline; }
.view-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 8px 16px 2px; gap: 10px; }
.view-summary strong { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.view-summary span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.summary-scope { padding: 0 16px; margin: 8px 0 14px; color: var(--muted); font-size: 12px; }
.panel-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); padding: 0 10px; flex: 0 0 auto; }
.panel-tabs button { min-height: 44px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font-size: 14px; color: var(--muted); }
.panel-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 700; }
.controls { display: flex; flex-direction: column; min-height: 0; gap: 14px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
/* One short tab at a time fits normal laptop/phone heights. Internal overflow is
   retained for landscape, large text, and zoom so no control becomes unreachable. */
.controls > * { flex-shrink: 0; }
label, .control-heading { font-size: 13px; letter-spacing: 0; text-transform: none; }
.control-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: var(--muted); }
.text-button { border: 0; background: none; color: var(--accent); font-size: 12px; padding: 8px 0 8px 8px; cursor: pointer; }
input, select, .species-trigger { min-height: 44px; font-size: 14px; }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 500; cursor: pointer; }
.toggle-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.toggle-row .check { display: flex; border: 0; border-radius: 0; padding: 9px 0; min-height: 40px; background: transparent; font-size: 14px; }
.toggle-row .check + .check { border-top: 1px solid #edf0eb; }
.toggle-row .check input { pointer-events: auto; }
.candidate-toggle { font-size: 14px; min-height: 40px; }
.legend { gap: 4px 6px; font-size: 13px; }
.legend-row { min-height: 40px; gap: 7px; padding: 6px 7px; border-color: transparent; background: transparent; border-radius: 6px; }
.legend-row[aria-pressed="true"] { border-color: transparent; background: #f1f5ef; }
.legend-row[aria-pressed="false"] { opacity: .65; background: #fff; text-decoration: line-through; }
.dot { width: 10px; height: 10px; }
.species-menu { position: static; box-shadow: none; margin-top: 8px; }
.species-options { max-height: 150px; }
.species-option { min-height: 40px; font-size: 14px; align-items: center; }
.species-option .count { font-size: 12px; }
.species-chips:empty { display: none; }
.species-chips { flex-wrap: nowrap; overflow-x: auto; max-height: 44px; }
.species-chip { flex: 0 0 auto; min-height: 36px; font-size: 12px; }
.section-heading { font-size: 16px; margin: 0; }
.control-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.view-details { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; margin: 0; font-size: 13px; }
.view-details dt, .view-details dd { padding: 8px 0; margin: 0; border-bottom: 1px solid #edf0eb; }
.view-details dt { color: var(--muted); }
.view-details dd { text-align: right; font-weight: 600; max-width: 125px; overflow-wrap: anywhere; }
.action-button { border: 1px solid var(--line); border-radius: 8px; color: var(--accent); background: #f1f5ef; min-height: 44px; padding: 10px; font-size: 13px; cursor: pointer; }
.action-button:disabled { opacity: .5; cursor: default; }
.status { font-size: 12px; padding: 10px 16px; flex: 0 0 auto; line-height: 1.4; }
.map-dock { display: none; position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); z-index: 25; width: 290px; max-width: calc(100vw - 24px); }
body[data-aside-collapsed="true"] .map-dock { display: grid; gap: 6px; }
.reveal-aside, body[data-aside-collapsed="true"] .reveal-aside {
  position: static; display: flex; width: 100%; height: 48px; max-width: none; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); box-shadow: 0 2px 12px #17201a14; font-size: 14px; justify-content: flex-start;
}
.reveal-aside b { color: var(--accent); font-size: 19px; letter-spacing: -.5px; }
.reveal-aside span { font-weight: 400; font-size: 12px; }
.reveal-aside .dock-action { margin-left: auto; font-size: 13px; color: var(--accent); font-weight: 600; }
.reveal-aside:hover { background: #f1f5ef; }
.floating-stats, body[data-aside-collapsed="true"] .floating-stats {
  position: static; display: block; max-width: none; padding: 9px 10px; border: 1px solid #d8ddd6;
  border-radius: 8px; background: rgba(255,255,255,.95); backdrop-filter: none;
  box-shadow: none; font-size: 12px; line-height: 1.5; cursor: pointer; color: var(--muted); text-align: left;
}
.floating-stats strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.floating-stats > span { padding: 0 3px; }
.basemap-switch { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.basemap-switch button { font-size: 13px; min-height: 36px; padding: 8px 10px; }
.basemap-switch:not(:hover) button:not(.active) { max-width: 200px; padding: 8px 10px; opacity: 1; pointer-events: auto; }
.colour-legend { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.colour-key { display: inline-flex; align-items: center; gap: 5px; }
.colour-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.tree-profile { width: 390px; max-width: 100vw; height: 100vh; height: 100dvh; transform: none; z-index: 40; }
.tree-profile-head { padding-top: max(12px, env(safe-area-inset-top)); }
.tree-profile-close { width: 44px; height: 44px; }
.tree-profile-body { min-height: 0; overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.pp-row { font-size: 14px; }
.pp-note, .pp-sub, .pp-chip, .pp-confidence, .pp-tl-item { font-size: 12px; }
.pp-value { overflow-wrap: anywhere; }
.pp-hero-species { font-size: 25px; }
.about-backdrop { z-index: 100; }
.about-modal { max-height: 90dvh; font-size: 16px; }
.about-modal .stats { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.about-modal .stat span, .about-modal .stats-scope { font-size: 12px; }
.about-close { min-width: 44px; min-height: 44px; }
.loading { bottom: 52px; font-size: 12px; }
.maplibregl-ctrl-bottom-left { left: 8px; }
.maplibregl-ctrl-bottom-right { bottom: env(safe-area-inset-bottom); }
.maplibregl-ctrl-group button { width: 44px; height: 44px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .basemap-switch { top: auto; bottom: 52px; right: 64px; }
}
@media (max-width: 760px) {
  #explorer { top: auto; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); max-height: calc(100dvh - 80px); border-radius: 16px; }
  #explorer header { padding: 12px 16px 4px; }
  h1.brand img { height: 40px; }
  #explorer header .title-block { flex-basis: auto; flex-grow: 1; }
  #explorer .about-btn { margin-right: 28px; align-self: center; }
  .subhead { margin-top: 4px; }
  .view-summary { padding-top: 6px; }
  .summary-scope { margin-bottom: 8px; }
  .controls { padding: 12px 16px; gap: 10px; }
  .toggle-row .check { min-height: 44px; }
  #paneLayers .toggle-row { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  #paneLayers .toggle-row .check { border: 0; font-size: 13px; }
  .legend-row { min-height: 44px; }
  body[data-aside-collapsed="true"] #explorer { transform: translateY(calc(100% + 24px)); }
  .basemap-switch { top: auto; bottom: max(76px, env(safe-area-inset-bottom)); right: 64px; max-width: calc(100vw - 76px); }
  .basemap-switch button, .basemap-switch:not(:hover) button:not(.active) { min-height: 40px; font-size: 12px; padding: 8px; }
  body[data-aside-collapsed="false"] .basemap-switch { visibility: hidden; }
  .tree-profile { top: auto; bottom: 0; right: 0; width: 100%; height: 62dvh; border-radius: 18px 18px 0 0; border: 1px solid var(--line); box-shadow: 0 -8px 28px #17201a1a; }
  .tree-profile-head { padding: 6px 14px; }
  .tree-profile-head h2 { font-size: 12px; }
  .about-backdrop { padding: 8px; }
  .about-modal { padding: 20px; max-height: 95dvh; }
  .about-dl { flex-wrap: wrap; }
  input[type="search"], select { font-size: 16px; }
}
@media (max-height: 650px) {
  #explorer header { padding-top: 8px; padding-bottom: 2px; }
  h1.brand img { height: 34px; }
  .view-summary { padding-top: 4px; }
  .view-summary strong { font-size: 17px; }
  .summary-scope { margin: 5px 0 8px; }
  .controls { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .status { padding-top: 6px; padding-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 760px) {
  #explorer header .title-block { flex: 1 1 170px; padding-right: 0; }
  #explorer .about-btn { font-size: 12px; }
}
@media (min-width: 360px) and (max-width: 760px) {
  .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legend-row { font-size: 12px; padding: 5px; }
}
.pp-label { flex: 0 1 48%; }
.pp-row > .pp-value { min-width: 0; flex: 1; }
.pp-section.pp-value { text-align: left; }
h1.brand img { display: block; width: 174px; height: auto; max-width: 100%; }
.reveal-aside img { display: block; width: 76px; height: auto; flex: 0 0 auto; }
.about-logo { display: block; width: 180px; height: auto; margin: 4px 0 18px; }
@media (max-width: 760px), (max-height: 650px) { h1.brand img { width: 146px; height: auto; } }
@media (max-height: 500px) {
  #explorer header { padding: 10px 14px 8px; flex-wrap: nowrap; align-items: center; }
  #explorer header .title-block { flex: 0 1 auto; padding: 0; }
  #explorer h1.brand img { width: 106px; }
  #explorer .subhead { font-size: 10px; }
  #explorer .about-btn { margin: 0 26px 0 auto; font-size: 12px; white-space: nowrap; }
  #explorer .view-summary, #explorer .summary-scope { display: none; }
  #paneLayers .toggle-row { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  #paneLayers .toggle-row .check { border: 0; min-height: 40px; font-size: 12px; }
}

/* Detailed research records load only after a tree is selected. */
.pp-research h3 { font-size:15px; margin:0 0 8px; color:var(--ink); }
.pp-download-record,.pp-retry-details { border:1px solid #b7c8b2; border-radius:8px; padding:10px 12px; background:#eff4eb; color:#24422e; font:inherit; font-size:12px; cursor:pointer; width:100%; }
.pp-dataset { padding:12px 16px; border-top:1px solid #dce4d6; }
.pp-dataset summary { font-weight:650; font-size:13px; cursor:pointer; line-height:1.45; }
.pp-dataset summary span { display:block; font-size:10px; font-weight:400; color:#566350; margin-left:15px; }
.pp-dataset .pp-row { align-items:start; }
.pp-dataset .pp-value { max-width:58%; overflow-wrap:anywhere; }
.pp-dataset .pp-label { max-width:48%; overflow-wrap:anywhere; }
.pp-raw-value { white-space:pre-wrap; font-size:10px; text-align:left; max-height:220px; overflow:auto; margin:0; }