/* 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%);
  --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,.near-entry,.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}
.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)}
.near-entry{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) var(--space-5);margin:0 0 var(--space-6)}
.near-entry h2{font:var(--text-h2);margin:0 0 var(--space-1)}
.near-entry p{margin:0;font:400 var(--fs-md)/var(--lh-normal) var(--font-sans);color:var(--color-text-secondary)}
.near-entry p.eyebrow{font:var(--text-eyebrow);color:var(--color-text-muted);margin-bottom:var(--space-1)}
.near-entry button{flex-shrink:0}
.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 .near-entry{margin-bottom:var(--space-4)}
#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:36vh;height:36dvh;min-height:200px;max-height:360px;margin-top:var(--space-2)}
#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.high{background:var(--color-positive-bg);border-color:var(--color-positive-border);--icon:var(--icon-check);--ink:var(--color-positive)}
.best-label.low{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}
#moreCandidates,#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.selected span{width:34px;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}
/* "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{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)}
.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-entry{display:block;padding:var(--space-4)}
 .near-entry button{width:100%;margin-top:var(--space-3)}
 .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}
.kyte-menu a+a::before{content:"·";margin-right:var(--space-2);color:var(--color-text-muted)}
.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)}
.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}
#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}
.look-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.look-label{position:absolute;left:0;top:0;pointer-events:auto;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-control);color:var(--kyte-camera-fg);font:600 var(--fs-sm)/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(6px)}
.look-label.target{background:var(--kyte-camera-fg);color:var(--color-text);border-color:var(--kyte-camera-fg)}
.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)}
.look-title{margin:0;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-control);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-alto{display:inline-flex;align-items:center;text-decoration:none}
.look-nudge{display:flex;align-items:center;gap:var(--space-3);color:var(--kyte-camera-muted);font:var(--text-caption)}
@media(prefers-reduced-motion:reduce){.walk-arrow{transition:none}}