/* Site visit Now: six equal tiles, a quiet "worth checking" line, and the Measure pad.
   Motion is decoration only: nothing waits on it, and Reduce Motion swaps instantly. */

/* "The job" folded is one slim line under the tabs: THE JOB · Open fire → New stove · Change */
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-fold{min-height:52px;padding:6px 2px;border:0;border-bottom:1px solid var(--ss-line);border-radius:0;background:none;gap:10px}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-fold .job-site-job-tick{display:none}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-fold-copy{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-fold .job-site-job-kicker{flex:0 0 auto}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-fold-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:.9375rem;font-weight:650;line-height:1.3}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-fold-copy small{display:none}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-fold .job-site-job-change{color:var(--ss-brass);text-decoration:none;padding-block:12px}

/* Equal tiles: same height, a slight press under the thumb. */
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles{grid-auto-rows:auto}
/* Reminders and Choose a stove matter less on site: same row, lighter and shorter. */
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles [data-site-tile="site-reminders"] .btn,
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles [data-site-tile="stove"] .btn{min-height:52px;padding:9px 14px;background:transparent;border-style:solid;border-color:color-mix(in srgb,var(--ss-line) 80%,transparent)}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles [data-site-tile="site-reminders"] strong,
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles [data-site-tile="stove"] strong{font-size:.875rem;font-weight:600}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles [data-site-tile="site-reminders"] small,
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles [data-site-tile="stove"] small{font-size:.8125rem}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles .job-site-tile>.btn{min-height:68px;transition:transform .12s ease,background-color .12s ease}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles .job-site-tile>.btn:active,
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles .job-site-tile>.btn.is-pressed{transform:scale(.97);background:#f1ece1}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tile[data-survey-row-state="recorded"] small{color:var(--sj-green,#2f6a57);font-weight:600}

/* The only nudge: by End visit, never a gate. */
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-worth{margin:0;color:var(--ss-muted);font-size:.875rem;line-height:1.45}
/* End visit is quiet while things are still worth checking, and dark once the essentials are in. */
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-exits[data-site-essentials="open"] :is([data-job-choice="finish-site-visit"],[data-job-choice-kind="finish-visit"]){border:2px solid var(--ss-ink);background:var(--ss-card);color:var(--ss-ink)}
/* Leave visit open is the quiet way out, so End visit is always the one main button. */
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-exits .job-site-leave{border-color:transparent;background:none;color:var(--ss-muted);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Opening a tile: the page fades and slides in from the right under a header that stays still. */
@keyframes sp-site-page-in{from{opacity:0;transform:translate3d(18px,0,0)}to{opacity:1;transform:none}}
@keyframes sp-site-page-back{from{opacity:0;transform:translate3d(-12px,0,0)}to{opacity:1;transform:none}}
.route-jobs .job-workspace[data-wf-site-visit="true"][data-job-view="task"] [data-job-task-active]{animation:sp-site-page-in 320ms cubic-bezier(.2,.7,.2,1) both}
/* Animate only the sheet, not the next-action container or the fixed job header. No :has() dependency on iOS. */
.route-jobs .job-workspace[data-job-returning][data-job-view="overview"] .job-site-sheet{animation:sp-site-page-back 320ms cubic-bezier(.2,.7,.2,1) both}
.route-jobs .job-workspace[data-wf-site-visit="true"][data-job-task-restored] [data-job-task-active]{animation:none}

/* The Measure pad slides up over the screen. */
html.measure-pad-open{overflow:hidden}
.measure-pad-shell{position:fixed;inset:0;z-index:60;font-family:inherit}
.measure-pad-shade{position:absolute;inset:0;background:rgb(20 21 21 / .35);opacity:0;transition:opacity .2s ease}
.measure-pad{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;display:grid;gap:10px;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));
  border-radius:18px 18px 0 0;background:var(--sp-premium-paper,#f7f4ee);color:var(--ink,#202725);box-shadow:0 -8px 24px rgb(0 0 0 / .15);transform:translateY(102%);transition:transform .26s ease}
.measure-pad-shell.is-open .measure-pad-shade{opacity:1}
.measure-pad-shell.is-open .measure-pad{transform:none}
.measure-pad-grab{width:38px;height:4px;border-radius:4px;background:#cfc9bd;justify-self:center}
.measure-pad-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.measure-pad-head h2{margin:0;font-size:1.0625rem;font-weight:650}
.measure-pad-done{min-height:44px;padding:0 4px;border:0;background:none;color:#8a7047;font:inherit;font-weight:650;cursor:pointer}
.measure-pad-sizes{display:grid;gap:6px}
.measure-pad-row{display:grid;grid-template-columns:4.6em repeat(3,minmax(0,1fr));gap:5px;align-items:center}
.measure-pad-row>span{font-size:.75rem;font-weight:650;color:var(--muted,#667069)}
.measure-pad-size{min-height:44px;padding:2px 4px;border:1px solid var(--line,#d9ded6);border-radius:9px;background:var(--card,#fff);color:var(--muted,#667069);font:inherit;font-size:.75rem;line-height:1.15;font-variant-numeric:tabular-nums;cursor:pointer}
.measure-pad-size b{display:block;font-size:.875rem;font-weight:600;color:var(--ink,#202725)}
.measure-pad-size[data-state="current"]{border-color:#b8954f;box-shadow:inset 0 0 0 1px #b8954f;color:var(--ink,#202725)}
.measure-pad-size[data-state="local"]{border-style:dashed;border-color:#b8954f}
.measure-pad-size[data-state="alert"]{border-color:#b85d5d;color:#8a3434}
.measure-pad-readout{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid var(--line,#d9ded6);border-radius:12px;background:var(--card,#fff)}
.measure-pad-readout small{display:block;font-size:.8125rem;color:var(--muted,#667069)}
.measure-pad-readout strong{font-size:1rem}
.measure-pad-value{font-size:2.1rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.measure-pad-value i{margin-left:4px;font-size:1rem;font-style:normal;color:var(--muted,#667069)}
.measure-pad-status{min-height:1.3em;margin:0;font-size:.8125rem;line-height:1.35;color:var(--muted,#667069)}
.measure-pad-status[data-tone="saved"]{color:#2f6a57}
.measure-pad-status[data-tone="local"]{color:#735c32}
.measure-pad-status[data-tone="alert"]{color:#8a3434;font-weight:600}
.measure-pad-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.measure-pad-choice[hidden]{display:none}
.measure-pad-choice button{min-height:48px;border:1px solid var(--ink,#202725);border-radius:10px;background:#fff;color:var(--ink,#202725);font:inherit;font-weight:650;cursor:pointer;touch-action:manipulation}
.measure-pad-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.measure-pad-key{min-height:50px;border:0;border-radius:10px;background:#fff;color:var(--ink,#202725);font:inherit;font-size:1.35rem;box-shadow:0 1px 0 #d6d0c4;cursor:pointer;touch-action:manipulation}
.measure-pad-key.alt{background:#e8e3d8;font-size:1rem}
.measure-pad-key:disabled{opacity:.35}
.measure-pad-key.next{grid-column:span 3;min-height:54px;background:var(--brand-ink,#141515);color:var(--brand-white,#f2eee5);font-size:1rem;font-weight:650}
.measure-pad-key:active{transform:scale(.97)}
.measure-pad-done:focus-visible,.measure-pad-size:focus-visible,.measure-pad-key:focus-visible{outline:3px solid var(--brand-gold,#c7a76a);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .route-jobs .job-workspace[data-wf-site-visit="true"][data-job-view="task"] [data-job-task-active],
  .route-jobs .job-workspace[data-job-returning][data-job-view="overview"] .job-site-sheet{animation:none!important}
  .route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-tiles .job-site-tile>.btn,
  .measure-pad,.measure-pad-shade{transition:none}
}
.route-jobs .job-workspace :is(.job-site-sheet,.job-fit-sheet) .job-site-job-saved{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.measure-pad-size[data-state="saved"]{border-color:#b9d1c4}
.measure-pad-size[data-state="saved"] b::after{content:" ✓";color:#2f6a57;font-size:.75rem}