/* KYTE on the ALTO design system v1.0. tokens.css loads first and supplies every colour, type size, space, radius,
   shadow, layer and duration; this file arranges KYTE's screens with them. The only values KYTE adds are in the
   next block: the camera works on black, as cameras do, and the icons are drawn here. */

/* A first visit draws in the phone's own font until KYTE's first screen is ready (app.js then adds .kyte-fonts). */
:root:not(.kyte-fonts){--font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

:root{
  /* KYTE-only values: nothing outside this block names a colour directly. */
  --kyte-camera-bg:#000;
  --kyte-camera-fg:#fff;
  --kyte-camera-muted:rgb(255 255 255 / 80%);
  --kyte-camera-control:rgb(255 255 255 / 16%);
  --kyte-camera-line:rgb(255 255 255 / 50%);
  /* Camera labels and panels: white type on 62% black, legible over sky and leaves alike, with no blur. */
  --kyte-camera-pill:rgb(0 0 0 / 62%);
  --kyte-pin:28px;
  --kyte-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b655f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Functional icons, one stroke set, drawn in the current text colour through a mask: on controls and beside the words
     of a status, never alone and never as decoration. */
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.5'/%3E%3C/svg%3E");
  --icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6m0-9.5v.5'/%3E%3C/svg%3E");
  --icon-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --icon-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 19.5h14'/%3E%3C/svg%3E");
  --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --icon-chevron-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --icon-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --icon-camera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4V8Z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  --icon-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='M20.5 15.5l-5-5-8.5 9'/%3E%3C/svg%3E");

  font:var(--text-body);color:var(--color-text);background:var(--color-bg);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--color-bg);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--color-text-link);text-underline-offset:3px}
p{max-width:var(--prose-max)}
h1{font:var(--text-h1);letter-spacing:var(--ls-tight);margin:var(--space-2) 0 var(--space-4)}
h2{font:var(--text-h2);margin:var(--space-6) 0 var(--space-2)}
h3{font:var(--text-h3);margin:var(--space-4) 0 var(--space-2)}
h1:focus{outline:none}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.button:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.eyebrow{font:var(--text-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text-muted);margin:0 0 var(--space-2);max-width:none}
.small{font:400 var(--fs-sm)/var(--lh-normal) var(--font-sans);color:var(--color-text-muted)}
.num,.near-points,.account-points,.progress-head{font-variant-numeric:var(--numeric-data)}
.mono{font:var(--text-mono);overflow-wrap:anywhere}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#buildLine:empty{display:none}
/* The icon beside a status or on a control: the element sets --icon, its ::before draws it in the text colour. */
.callout::before,.best-label::before,.sync-state::before,.state-pill:is(.positive,.info,.warning)::before,.coverage-chip.complete::before,.field-error:not(:empty)::before,.toast.error #status::before,#connection.offline::before,.cam-fail h2::before,.with-icon::before{
  content:"";flex:none;width:var(--icon-sm);height:var(--icon-sm);background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

/* ---------- Page frame: app bar, content, footer credit ---------- */
body>header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--app-bar-h);
  padding:max(var(--space-1-5),env(safe-area-inset-top)) max(var(--space-4),env(safe-area-inset-right),calc((100% - var(--page-max))/2 + var(--space-6))) var(--space-1-5) max(var(--space-4),env(safe-area-inset-left),calc((100% - var(--page-max))/2 + var(--space-6)));
  background:var(--color-app-bar-bg);color:var(--color-app-bar-fg);border-bottom:1px solid var(--color-border)}
.brand{display:flex;align-items:center;gap:var(--space-2);min-height:var(--target-touch);min-width:0;text-decoration:none;color:var(--color-text)}
.brand img{width:32px;height:32px;flex:none}
.brand strong{display:block;font:700 var(--fs-xl)/1.1 var(--font-sans);letter-spacing:var(--ls-caps)}
.brand small{display:block;font:var(--text-caption);color:var(--color-text-muted)}
.plantnet-credit{display:block;margin-top:var(--space-1);font:var(--text-caption);color:var(--color-text-muted)}
.part-of{display:flex;align-items:center;gap:var(--space-2);min-height:var(--target-touch);flex:none;text-decoration:none;color:var(--color-text-muted);font:var(--text-caption)}
.part-of img{height:24px;width:auto;display:block}
main{max-width:var(--page-max);margin:0 auto;padding:var(--space-4) var(--space-6) var(--space-8)}
body>footer{max-width:var(--page-max);margin:var(--space-8) auto 0;padding:var(--space-4) var(--space-6) max(var(--space-8),env(safe-area-inset-bottom));border-top:1px solid var(--color-border);font:var(--text-caption);color:var(--color-text-muted)}
body>footer p{margin:0 0 var(--space-2);max-width:none}
.credit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3)}
.credit a{color:var(--color-text-muted)}
.credit a.bpl{display:inline-flex;align-items:center;gap:6px;min-height:var(--target-min);color:var(--bpl-navy);font-weight:var(--fw-semibold);text-decoration:none}
.credit a.bpl img{width:14px;height:14px;display:block}
.back-link{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--target-touch);font:600 var(--fs-md)/1.3 var(--font-sans);color:var(--color-text-link)}
.back-link::before{content:"";width:var(--icon-sm);height:var(--icon-sm);background:currentColor;-webkit-mask:var(--icon-chevron-left) center/contain no-repeat;mask:var(--icon-chevron-left) center/contain no-repeat}

/* One line for background work and the connection, at the top of the page, with the account button at its right. */
.topline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);min-height:var(--target-touch);margin:0 0 var(--space-2);font:var(--text-caption);color:var(--color-text-muted)}
#connection:empty{display:none}
#connection.offline{display:inline-flex;align-items:center;gap:var(--space-1-5);color:var(--color-info);font-weight:var(--fw-semibold);--icon:var(--icon-info)}
.top-actions{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}
.account-button{padding:0 var(--space-3);background:var(--color-surface);color:var(--color-text);border-color:var(--color-border-input);font-size:var(--fs-sm)}
.account-button:hover{background:var(--color-surface-tint)}

/* ---------- Buttons: primary (filled), secondary (outlined), quiet (a link), danger ---------- */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--target-touch);padding:0 var(--space-4);
  border:1px solid transparent;border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-on-accent);
  font:600 var(--fs-md)/1.25 var(--font-sans);text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
button:hover,.button:hover{background:var(--color-accent-hover)}
button:active,.button:active{background:var(--color-accent-active)}
.button{position:relative}
.button input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:0;cursor:pointer;margin:0}
.secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border-input)}
.secondary:hover{background:var(--color-surface-tint)}
.secondary:active{background:var(--color-surface-tint-hover)}
.text-button{min-height:var(--target-touch);padding:0;background:none;border:0;color:var(--color-text-link);font:600 var(--fs-md)/1.3 var(--font-sans);text-decoration:underline;text-underline-offset:3px}
.text-button:hover,.text-button:active{background:none;color:var(--color-accent-active)}
.danger,.secondary.danger{background:var(--color-surface);color:var(--color-critical);border-color:var(--color-critical-border)}
.danger:hover{background:var(--color-critical-bg)}
.text-button.danger{background:none;border:0}
button:disabled,.button:has(input:disabled){background:var(--color-surface-sunken);color:var(--color-text-disabled);border-color:transparent;cursor:not-allowed}
.text-button:disabled{background:none;text-decoration:none}
.lg{min-height:var(--control-lg);padding:0 var(--space-5);font-size:var(--fs-lg)}
.with-icon::before{width:var(--icon-md);height:var(--icon-md)}
#startCamera,#revisit{--icon:var(--icon-camera)}
.choose-photo{--icon:var(--icon-image)}
.actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-6) 0}
.compact{margin:var(--space-3) 0}
/* An icon button: 44 px, quiet, named by its aria-label. */
.dialog-close,.icon-button{display:inline-grid;place-items:center;width:var(--target-touch);height:var(--target-touch);min-height:var(--target-touch);padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);flex:none}
.dialog-close:hover{background:var(--color-surface-sunken)}
.dialog-close::before,.icon-button::before{content:"";width:var(--icon-md);height:var(--icon-md);background:currentColor;-webkit-mask:var(--icon-close) center/contain no-repeat;mask:var(--icon-close) center/contain no-repeat}

/* ---------- Form fields ---------- */
label{display:block;font:600 var(--fs-md)/var(--lh-snug) var(--font-sans);color:var(--color-text)}
label span{font-weight:400;color:var(--color-text-muted)}
input,textarea,select{display:block;width:100%;min-height:var(--target-touch);margin-top:var(--space-1-5);padding:var(--space-2) var(--space-3);
  font:400 var(--fs-lg)/1.3 var(--font-sans);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border-input);border-radius:var(--radius-sm)}
textarea{line-height:var(--lh-normal);resize:vertical}
select{-webkit-appearance:none;appearance:none;padding-right:calc(var(--space-3) + 22px);background:var(--color-surface) var(--kyte-select-chevron) right var(--space-3) center/18px no-repeat}
input::placeholder,textarea::placeholder{color:var(--color-text-muted);opacity:1}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--color-accent)}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border:2px solid var(--color-critical)}
.field-error{display:flex;gap:var(--space-1-5);align-items:flex-start;margin:var(--space-1-5) 0 var(--space-2);color:var(--color-critical);font:600 var(--fs-md)/var(--lh-normal) var(--font-sans);--icon:var(--icon-warn)}
.field-error::before{margin-top:3px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-3) 0}
.two-col:has(>label[hidden])>label{grid-column:1/-1}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:var(--space-2) 0}
.check{display:flex;align-items:flex-start;gap:var(--space-3);margin:var(--space-5) 0}
.check strong{display:block;font:600 var(--fs-lg)/var(--lh-snug) var(--font-sans);color:var(--color-text)}
.check small{display:block;margin-top:var(--space-1);font:400 var(--fs-sm)/var(--lh-normal) var(--font-sans);color:var(--color-text-muted)}
/* Option cards: a radio and its words; the checked one also has a heavier border. */
.choice{border:0;padding:0;margin:var(--space-4) 0;min-width:0}
.choice legend{font:600 var(--fs-md)/var(--lh-snug) var(--font-sans);padding:0;margin-bottom:var(--space-1-5)}
.choice:focus{outline:2px solid var(--color-focus);outline-offset:2px}
.choice-item{display:flex;align-items:center;gap:var(--space-3);min-height:var(--target-touch);margin:var(--space-1-5) 0;padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border-input);border-radius:var(--radius-sm);background:var(--color-surface);font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);color:var(--color-text);cursor:pointer}
.choice-item span{color:var(--color-text)}
.choice-item input{width:20px;height:20px}
.choice-item:has(input:checked){border:2px solid var(--color-accent);padding:calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);background:var(--color-surface-tint)}

/* ---------- Disclosure: a chevron that turns, a 44 px row ---------- */
details{border-top:1px solid var(--color-border);padding:var(--space-1) 0}
details>summary{position:relative;display:block;min-height:var(--target-touch);padding:var(--space-3) 0 var(--space-3) calc(var(--icon-sm) + var(--space-2));font:600 var(--fs-md)/1.4 var(--font-sans);color:var(--color-text);cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";position:absolute;left:0;top:calc(var(--space-3) + 2px);width:var(--icon-sm);height:var(--icon-sm);background:currentColor;-webkit-mask:var(--icon-chevron-right) center/contain no-repeat;mask:var(--icon-chevron-right) center/contain no-repeat;transition:transform var(--dur-base) var(--ease-standard)}
details[open]>summary::before{transform:rotate(90deg)}

/* ---------- Callouts, badges and statuses: always an icon and words, never colour alone ---------- */
.callout{display:grid;grid-template-columns:var(--icon-sm) minmax(0,1fr);column-gap:var(--space-2);align-items:start;padding:var(--space-3);border:1px solid var(--color-info-border);border-radius:var(--radius-md);
  background:var(--color-info-bg);color:var(--color-text);font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);--icon:var(--icon-info);--ink:var(--color-info)}
.callout::before{grid-column:1;grid-row:1/span 8;margin-top:4px;background:var(--ink)}
.callout>*{grid-column:2;margin:0 0 var(--space-2)}
.callout>:last-child{margin-bottom:0}
.callout.positive{background:var(--color-positive-bg);border-color:var(--color-positive-border);--icon:var(--icon-check);--ink:var(--color-positive)}
.callout.warning{background:var(--color-warning-bg);border-color:var(--color-warning-border);--icon:var(--icon-warn);--ink:var(--color-warning)}
.callout .eyebrow{color:var(--ink);margin:2px 0 var(--space-1)}
.callout .small,.callout.small{color:var(--color-text-secondary)}
.callout.small{font-size:var(--fs-sm)}
.badge-estimate{display:inline-flex;align-items:center;height:18px;margin-left:var(--space-1-5);padding:0 6px;border:1px dashed var(--color-estimate-border);border-radius:var(--radius-pill);color:var(--color-estimate);font:500 var(--fs-xs)/1 var(--font-sans);vertical-align:2px;white-space:nowrap}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--color-surface-sunken);color:var(--color-text-secondary);font:600 var(--fs-xs)/1 var(--font-sans);font-variant-numeric:var(--numeric-data)}
.state-pill,.sync-state,.coverage-chip{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:2px var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  background:var(--color-surface-sunken);color:var(--color-text-secondary);font:600 var(--fs-xs)/1.3 var(--font-sans)}
.state-pill.positive,.sync-state.done,.coverage-chip.complete{background:var(--color-positive-bg);border-color:var(--color-positive-border);color:var(--color-positive);--icon:var(--icon-check)}
.state-pill.info,.sync-state.busy{background:var(--color-info-bg);border-color:var(--color-info-border);color:var(--color-info);--icon:var(--icon-clock)}
.sync-state.busy{--icon:var(--icon-upload)}
.state-pill.warning,.sync-state.error{background:var(--color-warning-bg);border-color:var(--color-warning-border);color:var(--color-warning);--icon:var(--icon-warn)}
/* A visit that could not be sent: the status says so; a separate button beside it opens the visit (A11Y-12). */
.sync-open{min-height:var(--target-touch);font-size:var(--fs-sm)}
.sync-state:not(.busy):not(.done):not(.error)::before{display:none}

/* ---------- Toast: the result of something the person did. Bottom centre on home and the tree pages, under the app bar on
   the visit steps and the task page, so it never covers the bars at the bottom; a tap anywhere but its close button goes
   to the page under it (FTK-15). ---------- */
.toast{position:fixed;z-index:var(--z-toast);left:max(var(--space-3),env(safe-area-inset-left));right:max(var(--space-3),env(safe-area-inset-right));bottom:calc(max(var(--space-3),env(safe-area-inset-bottom)) + var(--toast-lift,0px));
  display:flex;gap:var(--space-1);align-items:flex-start;max-width:560px;margin:0 auto;padding:var(--space-2) var(--space-1) var(--space-2) var(--space-4);border-radius:var(--radius-md);
  background:var(--color-surface-inverse);color:var(--color-text-inverse);box-shadow:var(--shadow-2);pointer-events:none}
.toast #status{flex:1;display:flex;gap:var(--space-2);align-items:flex-start;margin:var(--space-1) 0;max-width:none;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.toast .toast-close{pointer-events:auto;width:var(--target-touch);height:var(--target-touch);min-height:var(--target-touch);background:transparent;color:inherit}
.toast .toast-close:hover,.toast .toast-close:active{background:transparent;color:inherit}
.toast.error{background:var(--color-critical-bg);color:var(--color-text);border:1px solid var(--color-critical-border)}
.toast.error #status{--icon:var(--icon-warn)}
.toast.error #status::before{background:var(--color-critical);margin-top:3px}
body.has-bar{--toast-lift:calc(var(--bar-h,88px) + var(--space-2))}
body.in-visit:not(.capturing) .toast,body.in-task .toast{top:calc(max(var(--space-2),env(safe-area-inset-top)) + var(--app-bar-h) + var(--space-2));bottom:auto}

/* ---------- Cards ---------- */
.tree-card,.mission,.progress,.near-card,.resume-card,.notice{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.empty{grid-column:1/-1;padding:var(--space-4);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);color:var(--color-text-muted)}
.empty p,.empty h3{margin:0}
.empty h3{color:var(--color-text);margin-bottom:var(--space-1)}

/* ---------- Home ---------- */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-8);align-items:center;padding:var(--space-6) 0 var(--space-8)}
.hero h1{font:var(--text-display);letter-spacing:var(--ls-display);margin:var(--space-2) 0 var(--space-3)}
.hero-copy>p:not(.eyebrow):not(.small){font:var(--text-body);color:var(--color-text-secondary);max-width:44ch;margin:0}
.hero .small{margin:var(--space-3) 0 0}
/* A talk card's first visit: one line of what to do, above the two buttons (app.js renderFirstRun). */
.hero-copy>#firstRun{font:600 var(--fs-md)/var(--lh-snug) var(--font-sans);color:var(--color-text);max-width:44ch;margin:var(--space-4) 0 0}
.hero .actions{margin:var(--space-6) 0 0;max-width:460px}
.hero-photo{width:100%;max-width:340px;justify-self:center;margin:0}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-md);background:var(--color-surface-sunken);filter:url(#kyteDuotone)}
.hero-photo svg{position:absolute;width:0;height:0}
.hero-photo figcaption{margin-top:var(--space-2);font:var(--text-caption);color:var(--color-text-muted)}
#resume:not(:empty){margin:var(--space-2) 0 0}
.resume-card{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:var(--space-2) var(--space-4);padding:var(--space-3) var(--space-4)}
.resume-card img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-sm)}
.resume-card p{flex:1;min-width:160px;margin:0}
.resume-card strong{display:block;font:var(--text-h3)}
.resume-card small{display:block;font:var(--text-caption);color:var(--color-text-muted)}
.resume-card .actions{flex:1 1 100%;align-items:center;gap:var(--space-5);margin:0}
.resume-card .actions>button{flex:0 0 auto;min-width:0;white-space:nowrap}
.more-drafts{padding:var(--space-2) 0;border-top:0}
.more-drafts .resume-card{margin-top:var(--space-2)}
.mission{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) var(--space-6);margin:var(--space-6) 0 var(--space-8)}
.mission h2{font:var(--text-h2);margin:0 0 var(--space-2)}
.mission p{margin:0;max-width:600px;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary)}
.mission p.eyebrow{font:var(--text-eyebrow);color:var(--color-text-muted);margin-bottom:var(--space-1)}
.mission-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1);flex-shrink:0}
.mission .mission-actions .text-button{align-self:center}
.progress{padding:var(--space-3) var(--space-4);margin:var(--space-2) 0 var(--space-6)}
.progress p{margin:var(--space-0-5) 0}
.progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.progress-head>strong{font:var(--text-value-lg)}
.progress-head span{font:400 var(--fs-md)/1.3 var(--font-sans);color:var(--color-text-secondary)}
.progress-head span strong{font:var(--text-value-lg);color:var(--color-text)}
.progress-bar{height:8px;border-radius:var(--radius-pill);background:var(--color-surface-sunken);overflow:hidden;margin:var(--space-2) 0 var(--space-1)}
.progress-bar span{display:block;height:100%;background:var(--color-accent);border-radius:var(--radius-pill)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.section-heading h2{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-6) 0 var(--space-3)}
.collection{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tree-card{display:block;width:100%;overflow:hidden;padding:0;color:var(--color-text);text-align:left;font:400 var(--fs-md)/1.3 var(--font-sans)}
.tree-card:hover{background:var(--color-surface-tint)}
.tree-card img{display:block;width:100%;height:195px;object-fit:cover;background:var(--color-surface-sunken)}
.tree-card .card-body{display:block;padding:var(--space-3) var(--space-4)}
.tree-card strong{display:block;font:var(--text-h3)}
.tree-card small{display:block;margin-top:var(--space-1);font:var(--text-caption);color:var(--color-text-muted)}
.about{margin-top:var(--space-8)}
.about p{font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary)}
.about p.small{font-size:var(--fs-sm);color:var(--color-text-muted)}
/* Once there are trees, the welcome steps back so My trees and the next step come first. */
#home.returning .hero{grid-template-columns:1fr;padding:var(--space-3) 0 var(--space-4)}
#home.returning .hero-photo,#home.returning .hero-copy>p:not(.eyebrow):not(.small),#home.returning .hero .small{display:none}
#home.returning .hero h1{font:var(--text-title-panel);letter-spacing:var(--ls-tight);margin:var(--space-1) 0 0}
#home.returning .hero .actions{margin:var(--space-4) 0 0}
#home.returning #treesHeading h2{margin-top:var(--space-2)}

/* ---------- The bar above steps 2 and 3 and the inner pages ---------- */
.app-bar{position:sticky;top:0;z-index:var(--z-panel);display:flex;align-items:center;gap:var(--space-2);min-height:var(--app-bar-h);
  padding:max(var(--space-1-5),env(safe-area-inset-top)) max(var(--space-3),env(safe-area-inset-right),calc(50% - var(--page-max)/2 + var(--space-6))) var(--space-1-5) max(var(--space-3),env(safe-area-inset-left),calc(50% - var(--page-max)/2 + var(--space-6)));
  background:var(--color-app-bar-bg);border-bottom:1px solid var(--color-border)}
.app-back{gap:var(--space-1);padding:0 var(--space-3) 0 var(--space-2);background:var(--color-surface);color:var(--color-text);border-color:var(--color-border-input)}
.app-back:hover{background:var(--color-surface-tint)}
.app-back::before{content:"";width:var(--icon-md);height:var(--icon-md);background:currentColor;-webkit-mask:var(--icon-chevron-left) center/contain no-repeat;mask:var(--icon-chevron-left) center/contain no-repeat}
.app-step{flex:1;margin:0;text-align:center;font:var(--text-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text-muted);font-variant-numeric:var(--numeric-data)}
#saveLater{min-height:var(--target-touch)}
body.in-visit>header,body.in-visit .topline,body.in-visit>footer{display:none}

/* ---------- Step 1: the camera fills the screen; the shutter sits in the thumb zone and close at top left ---------- */
html.capturing,body.capturing{overflow:hidden;overscroll-behavior:none;background:var(--kyte-camera-bg)}
#capturePage:not([hidden]){position:fixed;inset:0;z-index:var(--z-sheet);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;background:var(--kyte-camera-bg);color:var(--kyte-camera-fg)}
#capturePage :focus-visible{outline-color:var(--kyte-camera-fg)}
.cam-bar{display:flex;align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-2) max(var(--space-3),env(safe-area-inset-right)) var(--space-2) max(var(--space-3),env(safe-area-inset-left))}
.cam-top{padding-top:max(var(--space-2),env(safe-area-inset-top))}
.cam-title{flex:1;min-width:0;text-align:center}
.cam-step,.cam-for{margin:0;font:var(--text-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--kyte-camera-muted);max-width:none}
.cam-for{font:var(--text-caption);letter-spacing:0;text-transform:none}
#captureTitle{font:600 var(--fs-lg)/1.25 var(--font-sans);letter-spacing:0;margin:0;color:var(--kyte-camera-fg)}
.icon-button{width:var(--control-lg);height:var(--control-lg);min-height:var(--control-lg);background:var(--kyte-camera-control);color:var(--kyte-camera-fg)}
.icon-button:hover,.icon-button:active{background:var(--kyte-camera-line)}
.cam-chip{min-height:var(--target-touch);padding:0 var(--space-3);border:1px solid var(--kyte-camera-line);border-radius:var(--radius-pill);background:transparent;color:var(--kyte-camera-fg);font:600 var(--fs-sm)/1.2 var(--font-sans)}
.cam-chip:hover,.cam-chip:active{background:var(--kyte-camera-control)}
.cam-chip[aria-pressed=true]{background:var(--kyte-camera-fg);color:var(--color-text);border-color:var(--kyte-camera-fg)}
#overlayToggle{align-self:center}
.camera-wrap{position:relative;overflow:hidden}
.camera-wrap.cam-stage{min-height:0;background:var(--kyte-camera-bg);display:flex;align-items:center;justify-content:center}
.cam-stage video{display:block;width:100%;height:100%;object-fit:contain}
.reticle{position:absolute;left:calc(50% - 32px);top:calc(50% - 32px);width:64px;height:64px;border:2px solid var(--kyte-camera-line);border-radius:var(--radius-md);pointer-events:none}
.previous-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.35;pointer-events:none}
.cam-pill{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 2*var(--space-3));margin:0;padding:var(--space-1-5) var(--space-3);border-radius:var(--radius-sm);
  background:var(--color-surface-inverse);color:var(--color-text-inverse);font:400 var(--fs-sm)/var(--lh-normal) var(--font-sans);text-align:center}
.cam-pill p{margin:0;color:inherit}
.cam-pill:empty,#compassState:empty{display:none}
.cam-hint{top:var(--space-2)}
.cam-status{bottom:var(--space-2)}
.cam-priming{position:absolute;left:var(--space-5);right:var(--space-5);top:50%;transform:translateY(-50%);margin:0 auto;text-align:center;color:var(--kyte-camera-fg);font:var(--text-body)}
/* When the camera cannot open: an opaque card saying what failed and what to do. */
.cam-fail{position:absolute;left:var(--space-4);right:var(--space-4);top:50%;transform:translateY(-50%);max-width:480px;max-height:calc(100% - var(--space-4));overflow:auto;margin:0 auto;padding:var(--space-5);
  border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-3)}
.cam-fail h2{display:flex;gap:var(--space-2);align-items:flex-start;margin:0 0 var(--space-2);font:var(--text-h2);color:var(--color-text);--icon:var(--icon-warn)}
.cam-fail h2::before{width:var(--icon-md);height:var(--icon-md);margin-top:1px;background:var(--color-critical)}
.cam-fail p{margin:0 0 var(--space-2);font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary)}
.cam-fail button,.cam-fail .button{width:100%;margin-top:var(--space-2)}
.cam-bottom{flex-direction:column;align-items:stretch;padding-bottom:max(var(--space-4),env(safe-area-inset-bottom))}
.view-choices{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cam-modes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--space-1-5);min-width:0;justify-content:safe center}
.cam-modes::-webkit-scrollbar{display:none}
.view-choice{flex:0 0 auto;min-height:var(--target-touch);padding:0 var(--space-3);border:1px solid var(--kyte-camera-line);border-radius:var(--radius-pill);background:transparent;color:var(--kyte-camera-fg);font:600 var(--fs-sm)/1.2 var(--font-sans)}
.view-choice:hover{background:var(--kyte-camera-control)}
.view-choice.active,.view-choice.active:hover{background:var(--kyte-camera-fg);color:var(--color-text);border-color:var(--kyte-camera-fg)}
.view-choice.active::before{content:"";width:var(--icon-sm);height:var(--icon-sm);background:currentColor;-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.shutter-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3)}
.cam-side{justify-self:center;min-width:72px;min-height:var(--control-lg);padding:0 var(--space-4);border:0;border-radius:var(--radius-sm);background:var(--kyte-camera-control);color:var(--kyte-camera-fg)}
.cam-side:hover,.cam-side:active{background:var(--kyte-camera-line)}
.cam-done:not([hidden]),.cam-done:not([hidden]):active{background:var(--color-accent);color:var(--color-on-accent)}
.cam-done:not([hidden]):hover{background:var(--color-accent-hover)}
.cam-done .badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--color-on-accent);color:var(--color-accent-active);font:700 var(--fs-sm)/1 var(--font-sans);font-variant-numeric:var(--numeric-data)}
.shutter{grid-column:2;width:76px;height:76px;min-height:76px;padding:0;border-radius:var(--radius-round);background:var(--kyte-camera-fg);border:4px solid var(--kyte-camera-fg);box-shadow:inset 0 0 0 3px var(--kyte-camera-bg)}
.shutter:hover{background:var(--kyte-camera-fg)}
.shutter:active{transform:scale(.93);background:var(--kyte-camera-fg)}
.shutter:disabled{background:transparent;border-color:var(--kyte-camera-line);box-shadow:none}
/* Each control keeps its own slot: Next holds its place (invisible) before the first photo, so the shutter never moves when it appears. */
.shutter-row>label{grid-column:1}
#cameraDone{grid-column:3}
#cameraDone[hidden]{display:inline-flex!important;visibility:hidden}
.cam-stage.flash::after{content:'';position:absolute;inset:0;background:var(--kyte-camera-fg);opacity:.7;animation:camflash .25s ease-out forwards;pointer-events:none}
@keyframes camflash{to{opacity:0}}
.cam-done.pulse{animation:campulse 1s ease-out 1}
@keyframes campulse{0%{box-shadow:0 0 0 0 var(--kyte-camera-line)}100%{box-shadow:0 0 0 14px transparent}}
@media(prefers-reduced-motion:reduce){.cam-stage.flash::after,.cam-done.pulse{animation:none;opacity:0}}
body.capturing .toast{top:calc(max(var(--space-2),env(safe-area-inset-top)) + 64px);bottom:auto}
@media (orientation:landscape) and (max-height:500px){
 #capturePage:not([hidden]){grid-template-columns:minmax(132px,auto) minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top stage controls" "modes stage controls" "guide stage controls"}
 .cam-top{grid-area:top;flex-direction:column;align-items:flex-start;padding:max(var(--space-2),env(safe-area-inset-top)) var(--space-2) var(--space-1) max(var(--space-3),env(safe-area-inset-left))}
 .cam-title{text-align:left}.cam-stage{grid-area:stage}.cam-bottom{display:contents}
 .cam-modes{grid-area:modes;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:var(--space-1) var(--space-2) max(var(--space-2),env(safe-area-inset-bottom)) max(var(--space-3),env(safe-area-inset-left))}
 #overlayToggle{grid-area:guide;justify-self:start;margin:var(--space-1) var(--space-2) max(var(--space-2),env(safe-area-inset-bottom)) max(var(--space-3),env(safe-area-inset-left))}
 .shutter-row{grid-area:controls;grid-template-columns:auto;grid-template-rows:1fr auto 1fr;padding:max(var(--space-2),env(safe-area-inset-top)) max(var(--space-3),env(safe-area-inset-right)) max(var(--space-2),env(safe-area-inset-bottom)) var(--space-3)}
 .shutter-row>label,.shutter,#cameraDone{grid-column:1}.shutter{grid-row:2;justify-self:center}.shutter-row>label{grid-row:3}#cameraDone{grid-row:1}
 body.capturing .toast{left:calc(var(--stage-l,0px) + var(--space-3));right:calc(var(--stage-r,0px) + var(--space-3))}
}

/* ---------- Step 2: the map first, the list under it, the tools folded away, and a bar with the chosen tree ---------- */
#map,#nearMap{position:relative;z-index:var(--z-base);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-sunken)}
#map{height:340px;margin-top:var(--space-4)}
body.in-visit #matchTitle{font:var(--text-title-panel);letter-spacing:var(--ls-tight);margin:var(--space-2) 0 var(--space-1)}
.match-intro{max-width:650px;margin:0 0 var(--space-2)}
body.in-visit #map{height:clamp(300px,44vh,560px);height:clamp(300px,44dvh,560px);margin-top:var(--space-2)}
/* v28: the map's own controls. Full screen and the zoom buttons are 44 px targets; a pressed toggle reads by its border and bold
   text, not by colour alone. */
.map-box{position:relative}
.map-full-toggle{position:absolute;top:var(--space-2);left:var(--space-2);z-index:var(--z-map-ui);min-height:var(--target-touch);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-input);box-shadow:var(--shadow-1)}
.map-full-toggle:hover{background:var(--color-surface-tint)}
.secondary[aria-pressed=true]{border:2px solid var(--color-selection);font-weight:var(--fw-bold)}
.map-actions{margin:var(--space-2) 0 0}
.map-box.full{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;flex-direction:column;background:var(--color-bg)}
body.has-bar .map-box.full{bottom:var(--bar-h,88px)}
.map-legend .map-legend-help{padding:0 var(--space-2);font:var(--text-caption);color:var(--color-text-secondary)}
/* Every other tree in the search, behind a disclosure: the legend scrolls rather than covering the map. */
.map-box.full .map-legend{max-height:45vh;overflow:auto}
.map-legend-all summary{display:flex;align-items:center;min-height:var(--target-touch);padding:0 var(--space-2);font:600 var(--fs-md)/1.25 var(--font-sans);cursor:pointer}
.map-legend-all ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
/* What to do when there is no search yet, inside the map box so the full-screen map never covers it. */
.map-note{margin:0;padding:var(--space-2) max(var(--space-3),env(safe-area-inset-right)) var(--space-2) max(var(--space-3),env(safe-area-inset-left));background:var(--color-surface);color:var(--color-text);border-top:1px solid var(--color-border);font:var(--text-body)}
.map-note p{margin:0}
.map-note summary{display:flex;align-items:center;min-height:var(--target-touch);font-weight:var(--fw-semibold);cursor:pointer}
body.map-full{overflow:hidden}
body.in-visit .map-box.full #map{flex:1;height:auto;min-height:0;max-height:none;margin:0;border:0;border-radius:0}
.map-box.full .map-full-toggle{top:max(var(--space-2),env(safe-area-inset-top))}
/* The legend of the trees listed, under the full-screen map: number, species, height; each row chooses its tree. */
.map-legend{list-style:none;margin:0;padding:var(--space-2) max(var(--space-3),env(safe-area-inset-right)) var(--space-2) max(var(--space-3),env(safe-area-inset-left));display:grid;gap:var(--space-1);background:var(--color-surface);border-top:1px solid var(--color-border)}
.map-legend button{width:100%;justify-content:flex-start;gap:var(--space-3);padding:0 var(--space-2);background:var(--color-surface);color:var(--color-text);border:1px solid transparent;font:400 var(--fs-md)/1.25 var(--font-sans);text-align:left}
.map-legend button:hover{background:var(--color-surface-tint)}
.map-legend button[aria-pressed=true]{border:2px solid var(--color-selection);font-weight:var(--fw-bold)}
.map-legend b{flex:none;display:inline-grid;place-items:center;width:var(--kyte-pin);height:var(--kyte-pin);border:2px solid var(--color-text);border-radius:var(--radius-round);font:700 var(--fs-sm)/1 var(--font-sans)}
.map-legend span:last-child{margin-left:auto;color:var(--color-text-secondary);font-variant-numeric:var(--numeric-data)}
/* Your photo over the map, to set the two side by side; a tap hides it. */
.map-photo{position:absolute;right:var(--space-2);top:var(--space-2);z-index:var(--z-map-ui);width:min(46%,240px);min-height:0;padding:0;background:var(--color-surface);border:2px solid var(--color-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-2)}
.map-photo:hover{background:var(--color-surface)}
.map-photo img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.pick-photo{flex-shrink:0;min-height:0;padding:0;background:none;border:0;border-radius:var(--radius-sm)}
.pick-photo:hover,.pick-photo:active{background:none}
/* "Search from here" after a tap on open ground: under the map, with Cancel. */
.map-offer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 0;padding:var(--space-2) var(--space-3);border:1px solid var(--color-info-border);border-radius:var(--radius-md);background:var(--color-info-bg)}
.map-offer p{flex:1 1 100%;margin:0}
.map-box.full .map-offer{margin:0;border-radius:0;border-width:1px 0 0}
/* Save, after the fast path: where you stood, the camera's direction and the tree, on a small map beside the words. */
.confirm-place{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin:var(--space-3) 0}
.confirm-map{position:relative;z-index:var(--z-base);height:180px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-sunken)}
.confirm-place p{margin:0}
#mapHelp,#nearMapHelp{margin:var(--space-2) 0}
#mapHelp.armed,#nearMapHelp.armed{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);border:1px solid var(--color-info-border);border-radius:var(--radius-md);background:var(--color-info-bg);color:var(--color-text);font-weight:var(--fw-semibold)}
#mapHelp.armed::before,#nearMapHelp.armed::before{content:"";flex:none;width:var(--icon-sm);height:var(--icon-sm);margin-top:3px;background:var(--color-info);-webkit-mask:var(--icon-info) center/contain no-repeat;mask:var(--icon-info) center/contain no-repeat}
#candidateStatus,#nearStatus{font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary)}
.notice{padding:var(--space-3) var(--space-4);margin:var(--space-2) 0}
.notice h2{font:var(--text-h3);margin:0 0 var(--space-1)}
.notice p{margin:0;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.search-actions{margin:0 0 var(--space-2)}
.candidates{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);grid-auto-flow:row dense}
.candidates.stale .best-label{opacity:.45}
/* How much to trust the first tree, in words with its own icon. */
.best-label{grid-column:1/-1;display:flex;gap:var(--space-2);align-items:flex-start;margin:0 0 var(--space-1);padding:var(--space-2) var(--space-3);border:1px solid var(--color-info-border);border-radius:var(--radius-md);
  background:var(--color-info-bg);color:var(--color-text);font:600 var(--fs-md)/var(--lh-normal) var(--font-sans);--icon:var(--icon-info);--ink:var(--color-info)}
.best-label::before{margin-top:3px;background:var(--ink)}
.best-label.clear{background:var(--color-positive-bg);border-color:var(--color-positive-border);--icon:var(--icon-check);--ink:var(--color-positive)}
.best-label.unsure{background:var(--color-warning-bg);border-color:var(--color-warning-border);--icon:var(--icon-warn);--ink:var(--color-warning)}
.candidate{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--space-3);min-width:0;padding:var(--space-3);text-align:left;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font:400 var(--fs-md)/1.3 var(--font-sans)}
.candidate:hover{background:var(--color-surface-tint)}
.candidate>span{flex:1;min-width:0}
.candidate strong{display:block;font:var(--text-h3)}
.candidate small{display:block;margin-top:2px;font:var(--text-caption);color:var(--color-text-muted)}
/* The number matches the pin on the map. The chosen tree: an ink border, the number reversed and a tick. */
.candidate b,.near-num{flex:none;display:inline-grid;place-items:center;width:var(--kyte-pin);height:var(--kyte-pin);border:2px solid var(--color-text);border-radius:var(--radius-round);background:var(--color-surface);color:var(--color-text);font:700 var(--fs-sm)/1 var(--font-sans);font-variant-numeric:var(--numeric-data)}
.candidate.selected{border:2px solid var(--color-selection);padding:calc(var(--space-3) - 1px);background:var(--color-surface-tint)}
.candidate.selected b{background:var(--color-selection);color:var(--color-selection-halo);border-color:var(--color-selection)}
.candidate.selected::after{content:"";flex:none;width:var(--icon-md);height:var(--icon-md);background:var(--color-text);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
#pickFull,#newTree{margin:var(--space-3) var(--space-2) 0 0}
/* Under the chosen tree's card (derived.js): its street view and iNaturalist lines, tied to the card by an ink rule, the
   whole width of the list (dense rows close the gap beside a chosen card on wide screens). Every link and the summary is a
   44 px target; the newest records open under the summary. */
.tree-more{grid-column:1/-1;margin:0 0 var(--space-1) var(--space-3);padding:0 0 0 var(--space-3);border-left:2px solid var(--color-selection);font:400 var(--fs-sm)/var(--lh-snug) var(--font-sans);color:var(--color-text-secondary)}
.tree-more p{margin:0;max-width:none}
.tree-more a{display:inline-flex;align-items:center;min-height:var(--target-touch);font-weight:var(--fw-semibold)}
.tree-more .tree-newer{font-size:var(--fs-xs);font-weight:var(--fw-regular)}
.tree-inat{border-top:0;padding:0}
.tree-inat>summary{font-size:var(--fs-sm)}
.tree-inat ul{list-style:none;margin:0;padding:0}
.tree-inat li a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:var(--target-touch);padding:var(--space-1) 0;font-weight:var(--fw-regular);text-decoration:none}
.tree-inat li a span{text-decoration:underline;text-underline-offset:3px}
.tree-inat li small{display:block;font:var(--text-caption);color:var(--color-text-muted)}
.tree-inat>p{margin:var(--space-1) 0 var(--space-2);font:var(--text-caption);color:var(--color-text-muted)}
#photoTools{margin-top:var(--space-5)}
/* Numbered trees on aerial photographs: white with an ink edge and a dark halo; the chosen one reversed to ink, ringed, larger.
   Each pin answers a tap anywhere in its 44 px square; the disc drawn inside it is 28 px. */
.number-pin,.mission-pin{display:grid;place-items:center;background:none;border:0}
.number-pin span,.mission-pin span{display:grid;place-items:center;width:var(--kyte-pin);height:var(--kyte-pin);border:2px solid var(--color-text);border-radius:var(--radius-round);
  background:var(--color-surface);color:var(--color-text);font:700 var(--fs-sm)/1 var(--font-sans);font-variant-numeric:var(--numeric-data);box-shadow:0 0 0 2px var(--viz-mark-stroke-imagery),0 1px 6px var(--viz-overlay-halo)}
.number-pin small{display:none;font:600 var(--fs-xs)/1 var(--font-sans)}
.number-pin.selected small{display:inline;white-space:nowrap}
.number-pin.selected span{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:auto;min-width:34px;padding:0 var(--space-2);border-radius:var(--radius-pill);height:34px;background:var(--color-selection);color:var(--color-selection-halo);border-color:var(--color-selection);
  box-shadow:0 0 0 3px var(--color-selection-halo),0 0 0 4px var(--color-selection),0 1px 8px var(--viz-overlay-halo);font-size:var(--fs-lg)}
.mission-pin.done span{background:var(--color-selection);color:var(--color-selection-halo);border-color:var(--color-selection);box-shadow:0 0 0 2px var(--color-selection-halo),0 0 0 3px var(--color-selection),0 1px 6px var(--viz-overlay-halo)}
/* The chosen tree beside the photo, with "This is my tree" always in reach. */
.pick-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) max(var(--space-4),env(safe-area-inset-right)) max(var(--space-2),env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left));
  background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-2)}
.pick-bar img{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0}
.pick-bar p{flex:1;min-width:0;margin:0}
.pick-bar strong{display:block;font:var(--text-h3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-bar small{display:block;font:var(--text-caption);color:var(--color-text-muted)}
.pick-bar button{flex-shrink:0;min-height:var(--control-lg)}
body.has-bar #matchPage{padding-bottom:calc(var(--bar-h,88px) + var(--space-2) + env(safe-area-inset-bottom))}
/* Your photos and location, folded under the list */
.photo-strip{display:flex;gap:var(--space-3);overflow:auto;padding:var(--space-2) 0;max-width:100%}
.photo-thumb{flex:0 0 128px;max-width:128px}
.photo-thumb img{display:block;width:128px;height:125px;object-fit:cover;border-radius:var(--radius-sm);background:var(--color-surface-sunken)}
.photo-thumb.active img{outline:3px solid var(--color-selection);outline-offset:-3px}
.photo-thumb p{font:var(--text-caption);margin:2px 0;overflow-wrap:anywhere}
.photo-thumb button{width:100%;margin-top:var(--space-1-5);padding:0 var(--space-2);font-size:var(--fs-xs)}
.photo-thumb [data-remove]{width:auto}
.photo-view-label{margin-top:var(--space-1-5);font:var(--text-caption);color:var(--color-text-muted)}
.photo-view-label select{margin-top:var(--space-1);max-width:128px;font-size:var(--fs-lg)}
.photo-hint{display:block;margin-top:var(--space-1);font:var(--text-caption);color:var(--color-text-muted)}
.coverage{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-3) 0}
.coverage-label{font:var(--text-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text-muted)}
.coverage small{flex-basis:100%;font:var(--text-caption);color:var(--color-text-muted)}
#locationInfo{font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
#captureInfo p{font:400 var(--fs-sm)/var(--lh-normal) var(--font-sans);overflow-wrap:anywhere}

/* ---------- Step 3: the tree, the essentials, one "Add details" section, and Save always in reach ---------- */
#confirmation{--pad:var(--space-6);margin-top:var(--space-4);padding:var(--pad);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
body.in-visit #confirmation{margin-top:0}
.record-head{display:grid;grid-template-columns:72px 1fr;gap:var(--space-1) var(--space-4);align-items:start}
.record-head img{grid-row:span 4;width:72px;height:72px;object-fit:cover;border-radius:var(--radius-sm)}
.record-head p,.record-head h1{margin:0}
.record-head .eyebrow{color:var(--color-text-accent)}
.record-head .text-button{justify-self:start}
.save-hint{margin:var(--space-3) 0 0}
/* "Add another photo" on the save step: one tap per extra shot, never required. A shot already taken says so in its
   label (a check mark), never by colour alone. */
.more-shots{margin:var(--space-4) 0 0;padding:var(--space-3) 0 0;border-top:1px solid var(--color-border)}
.more-shots-head{margin:0 0 var(--space-2)}
.more-shots-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.more-shots .chip{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-input);border-radius:var(--radius-pill);padding:0 var(--space-4);font:600 var(--fs-sm)/1.2 var(--font-sans)}
.more-shots .chip:hover{background:var(--color-surface-tint)}
.more-shots .chip:active{background:var(--color-surface-tint-hover)}
.more-shots .chip:disabled{background:var(--color-surface-sunken);color:var(--color-text-disabled);border-color:transparent}
.more-shots #moreShotsState,.more-shots-hint{margin:var(--space-2) 0 0}
/* Tree numbers (TMCTT6X4) are set like the record IDs beside them */
.tn{font:var(--text-mono)}
.task-number{margin:0 0 var(--space-2)}
#selectedName{font:var(--text-title-panel);letter-spacing:var(--ls-tight);margin:2px 0}
.record-source{border-top:0;padding:var(--space-1) 0}
.record-source summary{font-size:var(--fs-sm)}
.record-source p{margin:0 0 var(--space-2);font:400 var(--fs-sm)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary);overflow-wrap:anywhere}
#confirmation .visit-date{margin:var(--space-4) 0 var(--space-1);max-width:320px}
#confirmation .share-check{margin:var(--space-4) 0 var(--space-1)}
.share-state{margin:var(--space-1-5) 0 var(--space-2);color:var(--color-text-secondary)}
#nztrOffer.off,#nztrOffer.off strong{color:var(--color-text-disabled)}
.mission-note{margin:var(--space-3) 0 var(--space-4)}
.mission-note p{margin:0 0 var(--space-1)}
.visit-details{margin:var(--space-3) 0 0;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg)}
.visit-details>summary::before{top:calc(var(--space-3) + 4px)}
.visit-details>summary .details-head{display:block;font:600 var(--fs-lg)/var(--lh-snug) var(--font-sans)}
.visit-details>summary .details-head .small{display:block;font-weight:400;font-size:var(--fs-sm)}
.details-summary{display:block;margin-top:var(--space-1);font:600 var(--fs-sm)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary)}
.detail-group{border:0;border-top:1px solid var(--color-border);padding:var(--space-2) 0 var(--space-3);margin:0;min-width:0}
.detail-group legend{float:left;width:100%;padding:var(--space-2) 0 0;font:var(--text-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text-muted)}
.detail-group legend+*{clear:both}
.detail-group .two-col{margin:var(--space-2) 0}
.detail-group>label{margin:var(--space-2) 0}
.detail-group .small{margin:var(--space-2) 0 0;font-size:var(--fs-xs)}
.measure-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-1-5) 0}
.record-actions{position:sticky;bottom:0;z-index:var(--z-panel);margin:var(--space-4) calc(-1*var(--pad)) calc(-1*var(--pad));padding:var(--space-3) var(--pad) max(var(--space-3),env(safe-area-inset-bottom));
  background:var(--color-surface);border-top:1px solid var(--color-border);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.record-actions button{width:100%;min-height:var(--control-lg);font-size:var(--fs-lg)}

/* ---------- A tree: the receipt, ALTO's numbers, then and now, the visits ---------- */
.receipt{margin:var(--space-4) 0 var(--space-6)}
.receipt h2{font:var(--text-h2);margin:0 0 var(--space-2)}
.receipt-line{font:600 var(--fs-lg)/var(--lh-snug) var(--font-sans);color:var(--color-text)}
.receipt>button{justify-self:start}
.near-points{margin:0;font:600 var(--fs-sm)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary)}
.story-photo{display:block;width:100%;max-height:430px;object-fit:cover;border-radius:var(--radius-md)}
#treeStory>.eyebrow{margin-top:var(--space-4)}
#treeTitle{margin-top:0}
/* Data rows: label, value and unit, and where the value comes from (design system 2.8). */
.data{display:grid;grid-template-columns:minmax(110px,38%) 1fr;column-gap:var(--space-4);margin:var(--space-4) 0}
.data>div{display:contents}
.data dt,.data dd{margin:0;padding:var(--space-2) 0;border-top:1px solid var(--color-border-subtle)}
.data dt{font:var(--text-label);color:var(--color-text-muted)}
.data .v{font:var(--text-value);font-variant-numeric:var(--numeric-data);color:var(--color-text)}
.data .u{font:400 var(--fs-sm)/1 var(--font-sans);color:var(--color-text-muted)}
.data .p{display:block;margin-top:2px;font:var(--text-caption);color:var(--color-text-muted)}
/* Yours beside ALTO's: a data table, numbers right-aligned in tabular figures (design system 2.9). */
.compare{width:100%;margin:var(--space-3) 0 var(--space-2);border-collapse:collapse;font:var(--text-label)}
.compare th,.compare td{padding:var(--space-2);border-bottom:1px solid var(--color-border-subtle);text-align:left;vertical-align:top}
.compare th:first-child{padding-left:0}
.compare td:last-child{padding-right:0}
.compare thead th{font:600 var(--fs-xs)/1.3 var(--font-sans);color:var(--color-text-muted);border-bottom:1px solid var(--color-border-strong)}
.compare tbody th{font:var(--text-label);color:var(--color-text-secondary)}
.compare td,.compare thead th:not(:first-child){text-align:right}
.compare strong{font:var(--text-value);font-variant-numeric:var(--numeric-data);white-space:nowrap}
.compare small{display:block;margin-top:2px;font:var(--text-caption);color:var(--color-text-muted)}
.compare .badge-estimate{margin-left:var(--space-1)}
.comparison{margin:var(--space-6) 0}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.comparison figure{margin:0}
.comparison img{display:block;width:100%;height:260px;object-fit:contain;background:var(--color-surface-sunken);border-radius:var(--radius-md)}
.comparison figcaption{padding:var(--space-1-5) 0;font:var(--text-caption);color:var(--color-text-muted);font-variant-numeric:var(--numeric-data)}
.visit{border-top:1px solid var(--color-border);padding:var(--space-4) 0}
.visit h3{margin-top:0}
.visit p{white-space:pre-wrap}
.visit-photos{display:flex;gap:var(--space-3);overflow:auto}
.visit-photos a{flex:0 0 160px}
.visit-photos img{display:block;width:160px;height:150px;object-fit:cover;border-radius:var(--radius-sm)}
.visit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5) var(--space-4);margin-top:var(--space-2)}
.visit-actions>button{margin:0}
.contribution-state{display:flex;gap:var(--space-2) var(--space-4);align-items:center;flex-wrap:wrap;margin-top:var(--space-3)}
.contribution-state small{flex-basis:100%;font:var(--text-caption);color:var(--color-text-muted)}
.contribution-state .block-reason{color:var(--color-warning)}
.observation-facts{margin:var(--space-2) 0 0}
.species-lead{margin-top:var(--space-2);color:var(--color-text-secondary)}
.species-lead em{font-style:italic}

/* ---------- Missions near you ---------- */
#nearMap{height:300px;margin-top:var(--space-3)}
.near-intro{margin:var(--space-1) 0 var(--space-2)}
.near-list{list-style:none;padding:0;margin:var(--space-3) 0}
.near-card{padding:var(--space-4);margin:0 0 var(--space-3);scroll-margin-top:72px}
.near-card>p{margin:var(--space-2) 0;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.near-head{display:flex;gap:var(--space-3);align-items:flex-start}
.near-head h2{font:600 var(--fs-xl)/var(--lh-snug) var(--font-sans);margin:0 0 2px}
.near-head p{margin:0}
.near-num{margin-top:2px}
.near-kind{font:var(--text-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text-accent)}
.near-meta{font:400 var(--fs-sm)/var(--lh-normal) var(--font-sans);color:var(--color-text-muted)}
.near-arrow{display:inline-block;margin-right:var(--space-1-5);font-weight:700;color:var(--color-text)}
.near-capture{font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
/* v29: a mission card's one line, the register's credit once under the list, and All missions. */
.near-ask{margin:var(--space-2) 0 0;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.near-credit,.near-all{color:var(--color-text-secondary)}
.near-foot .near-points{order:2}
.near-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);flex-wrap:wrap;margin-top:var(--space-3)}
.near-care{margin-top:var(--space-1)}

/* ---------- Know this tree? ---------- */
#taskPage{max-width:640px}
.task-tree{margin:0 0 var(--space-1);font:var(--text-h3);overflow-wrap:anywhere}
.task-intro{margin:0 0 var(--space-4)}
#taskForm>label,#taskForm .two-col{margin:var(--space-4) 0}
.task-privacy{margin:var(--space-2) 0 0}
.task-history{margin-top:var(--space-6)}
.task-history h2{font:var(--text-h3)}
.task-history ul{list-style:none;padding:0;margin:0}
.task-history li{border-top:1px solid var(--color-border);padding:var(--space-2) 0;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.task-history small{display:block;font:var(--text-caption);color:var(--color-text-muted)}
#taskDone:focus{outline:none}

/* ---------- The account panel: a dialog, and a sheet on phones ---------- */
.account-dialog{width:min(560px,calc(100vw - 2*var(--space-4)));max-height:min(88dvh,820px);padding:var(--space-6);border:0;border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-3);overflow:auto}
.account-dialog::backdrop{background:var(--color-scrim)}
.dialog-close{position:absolute;top:var(--space-2);right:var(--space-2)}
.account-dialog h2{font:var(--text-h2);margin:var(--space-1) var(--space-8) var(--space-3) 0}
.account-dialog>p:not(.small):not(.eyebrow){font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.account-dialog code,.account-dialog .small{overflow-wrap:anywhere}
.account-points{font-weight:var(--fw-semibold);color:var(--color-text)}
.import-note{margin-top:var(--space-4)}
.import-note p{font:400 var(--fs-sm)/var(--lh-normal) var(--font-sans)}
.anon-remove{margin:var(--space-4) 0 var(--space-1);padding-top:var(--space-3);border-top:1px solid var(--color-border)}
.anon-remove p{margin:0 0 var(--space-2)}
.camera-choice{margin:var(--space-5) 0 var(--space-2)}
.account-dialog #deleteConfirmation{padding-top:var(--space-3)}
#accountDetails{margin-top:var(--space-4)}
@media(max-width:599px){
 .account-dialog{width:100%;max-width:100%;margin:auto 0 0;max-height:92dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-5) var(--space-4) max(var(--space-6),env(safe-area-inset-bottom))}
}

/* ---------- Maps: Leaflet's controls in ALTO's size, surface, border and type ---------- */
.leaflet-container{font:var(--text-caption)}
.leaflet-container .leaflet-bar{border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);overflow:hidden}
.leaflet-container .leaflet-bar a,.leaflet-touch .leaflet-bar a{width:var(--target-touch);height:var(--target-touch);line-height:var(--target-touch);background:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);font:600 var(--fs-xl)/var(--target-touch) var(--font-sans)}
.leaflet-container .leaflet-bar a:last-child{border-bottom:0}
.leaflet-container .leaflet-bar a:hover{background:var(--color-surface-tint);color:var(--color-text)}
.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}
.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.leaflet-container .leaflet-control-attribution{padding:2px var(--space-1-5);background:var(--color-surface);color:var(--color-text-secondary);font:400 var(--fs-2xs)/1.35 var(--font-sans)}
.leaflet-container .leaflet-control-attribution a{color:var(--color-text-link)}
.leaflet-container .leaflet-control-scale-line{padding:1px var(--space-1-5);background:var(--color-surface);border-color:var(--color-text-secondary);color:var(--color-text);font:400 var(--fs-2xs)/1.3 var(--font-sans);text-shadow:none}
.leaflet-popup-content{max-width:220px}
.leaflet-tooltip{font:var(--text-caption)}

/* ---------- Phones: below 760 px, ALTO's breakpoint ---------- */
@media(max-width:759px){
 main{padding:var(--space-3) var(--space-4) var(--space-8)}
 body>footer{padding-left:var(--space-4);padding-right:var(--space-4)}
 h1{font-size:var(--fs-2xl)}
 .hero{grid-template-columns:1fr;gap:0;padding:var(--space-3) 0 var(--space-6)}
 .hero h1{font:var(--text-h1);letter-spacing:var(--ls-tight)}
 .hero-photo{max-width:100%;margin-top:var(--space-6)}
 .hero-photo img{aspect-ratio:16/9}
 .hero .actions>button,.hero .actions>.button{flex:1 1 100%}
 .collection{grid-template-columns:1fr 1fr;gap:var(--space-3)}
 .tree-card img{height:155px}
 .tree-card .card-body{padding:var(--space-3)}
 .candidates,.two-col,.measure-row{grid-template-columns:1fr}
 .three-col{grid-template-columns:1fr 1fr}
 #confirmation{--pad:var(--space-4)}
 #map{height:300px}
 .actions>button,.actions>.button{flex:1 1 auto;min-width:140px}
 .mission{display:block;padding:var(--space-4)}
 .mission button{width:100%;margin-top:var(--space-4)}
 .near-foot button{width:100%}
 #nearMap{height:260px}
 .comparison img{height:200px}
 .photo-strip{margin-right:calc(-1*var(--space-2))}
}
@media(max-width:339px){.brand small{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Measure the girth (task=girth): why this tree, the method, the tape photo. Text and the tree's own numbers only. */
.girth-why{margin:0 0 var(--space-3)}
.girth-line{margin:0 0 var(--space-1);font:600 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.girth-values,.girth-credit{margin:0 0 var(--space-1)}
.girth-method{margin:0 0 var(--space-3)}
.girth-method h2{margin:0 0 var(--space-1);font:var(--text-h3)}
.girth-method ul{margin:0;padding-left:var(--space-5)}
.girth-method li{margin:0 0 var(--space-1);font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.girth-care{margin:0 0 var(--space-3)}
#girthWarn{margin:var(--space-2) 0}
.girth-photo{margin:var(--space-3) 0}
.girth-photos{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.girth-photos:empty{display:none}
.girth-photos li{display:grid;gap:var(--space-1);justify-items:start}
.girth-photos img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-border)}
.near-girth{margin-top:var(--space-1)}

/* ---------- KYTE v20 ---------- */
/* FE-10: a task link or Missions near you never shows home first. route.js marks the screen this load opens before anything
   is drawn; until the app shows it, home is hidden and a placeholder holds the height, so nothing below moves. */
.route-skeleton{display:none}
html[data-route=task] #home,html[data-route=near] #home{display:none}
/* The app bar those screens show is held in place, unseen, until the app shows it: main does not move down under the eye. */
html[data-route=task] #appBar[hidden],html[data-route=near] #appBar[hidden]{display:flex!important;visibility:hidden}
html[data-route=task] .route-skeleton,html[data-route=near] .route-skeleton{display:block;min-height:calc(100vh - 140px);min-height:calc(100dvh - 140px);padding:var(--space-2) 0;max-width:640px}
.route-skeleton span{display:block;height:var(--space-4);margin:0 0 var(--space-3);border-radius:var(--radius-sm);background:var(--color-surface-sunken)}
.route-skeleton span:nth-child(1){width:30%}
.route-skeleton span:nth-child(2){width:75%;height:var(--space-8)}
.route-skeleton span:nth-child(3){width:45%}
.route-skeleton span:nth-child(4){width:90%;height:var(--space-16,96px)}
.task-number{min-height:calc(var(--fs-sm) * var(--lh-normal))}

/* v25: KYTE's own menu under the brand (find, photograph, my trees, help); ALTO is the one link "Part of ALTO". */
body>header{flex-wrap:wrap;row-gap:0}
.kyte-menu{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 var(--space-2);flex-basis:100%;font:var(--text-caption)}
/* Each link is at least a 44 px square to tap. */
.kyte-menu a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target-touch);min-width:var(--target-touch);color:var(--color-text-secondary);text-decoration:none}
.kyte-menu a:hover{color:var(--color-text);text-decoration:underline}
/* v29: five short links (Find, Photograph, Missions, My trees, Help) on one line at 360 px, 8 px apart, no separators. The page
   you are on is bold and underlined (aria-current), never marked by colour alone. */
.kyte-menu a[aria-current=true],.kyte-menu a[aria-current=page]{font-weight:700;color:var(--color-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.home-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin:calc(-1*var(--space-3)) 0 var(--space-6)}
.home-links a{display:inline-flex;align-items:center;min-height:var(--target-touch);font:600 var(--fs-md)/1.3 var(--font-sans)}
.home-links .small{margin-right:auto}
.sent-answers-block{margin:var(--space-6) 0 0}
.sent-answers-block h2{display:flex;align-items:center;gap:var(--space-2);font:var(--text-h3);margin:0 0 var(--space-2)}
.sent-answers{list-style:none;margin:0;padding:0}
.sent-answers li{display:grid;gap:2px;border-top:1px solid var(--color-border);padding:var(--space-2) 0;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.sent-answers small{font:var(--text-caption);color:var(--color-text-muted)}
.sent-answers a{font:var(--text-caption)}

/* A11Y-02: on short screens Save sits at the end of the form, and the pick bar wraps the tree's name. */
@media (max-height:500px){
 .record-actions{position:static;margin-bottom:0}
 .pick-bar strong{white-space:normal;overflow:visible;text-overflow:clip}
 body.in-visit #map{min-height:120px;height:40vh}
 #pickMap{height:180px}
}

/* FTK-03: kauri, on every visit and task screen. */
.cam-kauri{color:var(--kyte-camera-fg);font-weight:var(--fw-semibold)}
#matchKauri,#confirmKauri,.task-kauri,#missionKauri{margin:var(--space-2) 0 var(--space-3)}

/* FTK-02: the expected tree, when it is not in this search. */
.expected-note{grid-column:1/-1;margin:0 0 var(--space-1)}
.expected-note .actions{margin:var(--space-2) 0 0}

/* A11Y-05, FTK-15: a new tree without the map, and the street search. */
.new-tree-tools{margin:var(--space-3) 0}
.new-tree-tools h2{font:var(--text-h3)}
#map.placing::after{content:"";position:absolute;left:50%;top:50%;z-index:var(--z-map-ui);width:32px;height:32px;margin:-16px 0 0 -16px;pointer-events:none;
  background:linear-gradient(var(--color-text),var(--color-text)) center/2px 100% no-repeat,linear-gradient(var(--color-text),var(--color-text)) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 1px var(--color-surface)) drop-shadow(0 0 1px var(--color-surface))}
.street-search{margin:var(--space-3) 0 0}
.street-row{display:flex;gap:var(--space-2);align-items:flex-end}
.street-row input{flex:1;margin-top:var(--space-1-5)}
.street-results{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:var(--space-1-5)}
.street-results button{width:100%;justify-content:flex-start;text-align:left}

/* FTK-06: "Report a tree that has gone" picks the tree on a map first. */
#pickMap{position:relative;z-index:var(--z-base);height:260px;margin:var(--space-2) 0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-sunken)}
.pick-list{list-style:none;margin:var(--space-2) 0;padding:0;display:grid;gap:var(--space-2)}
.pick-list .candidate{width:100%}
.task-photo-note{margin:calc(-1*var(--space-3)) 0 var(--space-4)}

/* FTK-07, DB-02: the girth tree's place and links; a near-tie line reads as data, not as a badge. */
.girth-place-block{margin:0 0 var(--space-3)}
.girth-place{margin:0;font:600 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.girth-line.near-tie{font-weight:400}
.girth-ranked{margin:0 0 var(--space-1)}
.girth-earlier{margin:var(--space-2) 0 0;color:var(--color-text-secondary)}
.near-girth-block{margin:var(--space-4) 0}
.near-girth-block h2{font:var(--text-h3);margin:0 0 var(--space-2)}
.near-girth-list{margin:0 0 var(--space-2);padding-left:var(--space-5)}
.near-girth-list li{margin:0 0 var(--space-1);font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.compare-range,.compare-release{font:var(--text-caption);color:var(--color-text-secondary)}

/* v25: Find a tree, walk there, and which tree is it (labels over the live camera). */
.find-form{display:flex;gap:var(--space-2);margin:var(--space-3) 0}
.find-form input{flex:1 1 auto;min-width:0;min-height:var(--control-lg)}
.find-suggest{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-3)}
.find-suggest .chip{min-height:var(--target-touch);padding:0 var(--space-4);border:1px solid var(--color-border-input);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font:600 var(--fs-sm)/1.2 var(--font-sans)}
#findMap,#walkMap{position:relative;z-index:var(--z-base);height:300px;margin-top:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-sunken)}
.find-credit{margin-top:var(--space-4);color:var(--color-text-secondary)}
.find-heading{margin:var(--space-6) 0 var(--space-2);font:var(--text-h2)}
/* Near you · Notable · Big trees · NZ Tree Register · Few on record: the pressed one has a heavier border and bold type. */
.find-sets{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-3)}
.find-sets button{min-height:var(--target-touch);padding:0 var(--space-4);border:1px solid var(--color-border-input);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font:400 var(--fs-sm)/1.2 var(--font-sans)}
.find-sets button:hover{background:var(--color-surface-tint)}
.find-sets button[aria-pressed=true]{border:2px solid var(--color-text);padding:0 calc(var(--space-4) - 1px);font-weight:700}
/* v29 Find: the switch Near me | Search (pressed: a 2 px border and bold type, never colour alone), Take me to one, a small map
   in Near me, and "Only show:" under the list. */
.find-mode{display:flex;gap:var(--space-2);margin:var(--space-2) 0 var(--space-3)}
.find-mode button{flex:1 1 0;min-height:var(--target-touch);padding:0 var(--space-4);border:1px solid var(--color-border-input);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font:400 var(--fs-md)/1.2 var(--font-sans)}
.find-mode button:hover{background:var(--color-surface-tint)}
.find-mode button[aria-pressed=true]{border:2px solid var(--color-text);padding:0 calc(var(--space-4) - 1px);font-weight:700}
.find-hint{margin:calc(-1*var(--space-1)) 0 var(--space-3);color:var(--color-text-secondary)}
.find-near .find-heading{margin-top:var(--space-3)}
.find-take{margin:var(--space-3) 0}
.find-take button{width:100%}
.find-take p{margin:var(--space-1) 0 0;color:var(--color-text-secondary)}
.find-near #findMap{height:clamp(180px,26dvh,240px)}
/* v29 review: Find's map credits sit under the map, in full, so on the small Near me map they cover no pin or "You" ring.
   Leaflet's own control rules (float, z-index, the white panel) do not apply out of the map; links stay underlined. */
.map-credit .leaflet-control-attribution{float:none;clear:none;position:static;margin:var(--space-1) 0 0;padding:0;background:none;color:var(--color-text-secondary);font:400 var(--fs-2xs)/1.35 var(--font-sans)}
.map-credit .leaflet-control-attribution a{color:var(--color-text-link);text-decoration:underline}
.find-where{margin-top:var(--space-2)}
.find-where button[hidden]{display:none}
.find-sets-block{margin-top:var(--space-4)}
.find-sets-label{margin:0 0 var(--space-2);color:var(--color-text-secondary)}
.find-card .near-done{font-weight:600;color:var(--color-text)}
#findMore{margin:0 0 var(--space-4)}
.near-why{margin:var(--space-1) 0}
.credit-list{margin:var(--space-2) 0;padding-left:var(--space-5)}
.credit-list li{margin:0 0 var(--space-2)}
.walk-why{margin:var(--space-2) 0;padding-left:var(--space-5)}
.walk-credits{margin-top:var(--space-4);color:var(--color-text-secondary)}
.walk-dial{display:flex;align-items:center;justify-content:center;width:160px;height:160px;margin:var(--space-5) auto var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-round);background:var(--color-surface-tint)}
.walk-arrow{display:block;font:700 var(--fs-4xl)/1 var(--font-sans);color:var(--color-accent);transition:transform .25s ease-out}
.walk-distance{text-align:center;font:600 var(--fs-xl)/1.3 var(--font-sans);margin:0 0 var(--space-2)}
#walkHint{text-align:center}
/* v29: "I’m there" under the distance, and "Is this the tree?": the tree's own lines as a list, then the answers. Found it
   and its buttons; the picked line after Take me to one. */
.walk-there{text-align:center;margin:0 0 var(--space-2)}
#walkLocate{display:flex;margin:0 auto var(--space-2)}
.walk-check{margin:var(--space-3) 0 var(--space-4);padding:var(--space-4);background:var(--color-surface);border:2px solid var(--color-text);border-radius:var(--radius-md)}
.walk-check h2{margin:0 0 var(--space-1);font:var(--text-h2)}
.walk-check h2:focus,.walk-check #walkLostText:focus{outline:none}
.walk-check h2:focus-visible,.walk-check #walkLostText:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.walk-check p[role=status]:empty{display:none}
.walk-cues{margin:var(--space-2) 0 var(--space-3);padding-left:var(--space-5);font:400 var(--fs-md)/var(--lh-normal) var(--font-sans)}
.walk-cues li+li{margin-top:var(--space-1)}
.walk-picked{margin:var(--space-1) 0 var(--space-2);color:var(--color-text-secondary)}
.look-card-cues{margin:var(--space-2) 0;padding-left:var(--space-5)}
#lookPage:not([hidden]){position:fixed;inset:0;z-index:var(--z-sheet);background:var(--kyte-camera-bg);color:var(--kyte-camera-fg);overflow:hidden}
#lookPage :focus-visible{outline-color:var(--kyte-camera-fg)}
.look-stage{position:absolute;inset:0}
.look-stage video{display:block;width:100%;height:100%;object-fit:cover}
/* Taps are found by position (look.js hit, 16 px to spare), so the layer takes them and the labels do not. */
.look-labels{position:absolute;inset:0;overflow:hidden;touch-action:manipulation}
.look-label{position:absolute;left:0;top:0;pointer-events:none;min-height:var(--target-touch);max-width:70vw;padding:0 var(--space-3);border:1px solid var(--kyte-camera-line);border-radius:var(--radius-pill);background:var(--kyte-camera-pill);color:var(--kyte-camera-fg);font:600 var(--fs-lg)/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.look-label.target{background:var(--kyte-camera-fg);color:var(--color-text);border-color:var(--kyte-camera-fg);box-shadow:0 0 0 1px var(--kyte-camera-pill)}
/* The label nearest the middle, which "Details" opens: an outline as well as its place, never colour alone. The white outline
   and the leader lines carry a dark halo, so they show against bright sky as well as dark leaves. */
.look-label.centred{outline:2px solid var(--kyte-camera-fg);outline-offset:2px;box-shadow:0 0 0 5px var(--kyte-camera-pill)}
.look-leader{position:absolute;left:0;top:0;height:2px;background:var(--kyte-camera-fg);box-shadow:0 0 0 1px var(--kyte-camera-pill);transform-origin:0 50%;pointer-events:none}
.look-around{position:absolute;left:var(--space-4);right:var(--space-4);top:calc(var(--space-16) + var(--space-16) + env(safe-area-inset-top));max-height:42vh;overflow:auto;padding:var(--space-3);border-radius:var(--radius-md);background:var(--kyte-camera-pill);color:var(--kyte-camera-fg)}
.look-around h2{margin:0 0 var(--space-2);font:var(--text-h3);color:var(--kyte-camera-fg)}
.look-around-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.look-around-list .cam-chip{width:100%;justify-content:flex-start;text-align:left;font:600 var(--fs-lg)/1.25 var(--font-sans)}
.look-offer,.look-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.look-chips:not(:has(:not([hidden]))){display:none}
/* The card a label opens: the page's own colours on a sheet over the camera picture. */
.look-card{position:absolute;left:var(--space-3);right:var(--space-3);bottom:max(var(--space-3),env(safe-area-inset-bottom));z-index:var(--z-popover);max-height:72vh;overflow:auto;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-2)}
.look-card h2{margin:0 0 var(--space-2);font:var(--text-h2)}
.look-card p{margin:0 0 var(--space-2)}
.look-card .actions{margin:var(--space-4) 0 0}
#lookPage .look-card :focus-visible{outline-color:var(--color-focus)}
.look-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:var(--space-3);padding:max(var(--space-3),env(safe-area-inset-top)) var(--space-4) var(--space-3)}
/* Everything over the live picture sits on the 62% black pill: pointed up at trees, the sky behind is often near white. */
.look-title{margin:0;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);background:var(--kyte-camera-pill);font:600 var(--fs-lg)/1.25 var(--font-sans);color:var(--kyte-camera-fg)}
.look-status{position:absolute;left:var(--space-4);right:var(--space-4);top:calc(var(--space-16) + env(safe-area-inset-top));margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--kyte-camera-pill);color:var(--kyte-camera-fg);font:var(--text-body)}
.look-status:empty{display:none}
.look-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom))}
.look-nudge{display:flex;align-items:center;gap:var(--space-3);color:var(--kyte-camera-fg);font:var(--text-caption)}
.look-nudge span{padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);background:var(--kyte-camera-pill)}
#lookPage .cam-chip{background:var(--kyte-camera-pill);border-color:var(--kyte-camera-fg)}
#lookPage .cam-chip:hover,#lookPage .cam-chip:active{background:var(--kyte-camera-bg)}
@media(prefers-reduced-motion:reduce){.walk-arrow{transition:none}}