/* Semantic colors describe tasks. The app accent remains the keyboard-focus color. */
:root{--field-help:#f48787;--field-distribution:#55cb8b;--field-followup:#68c6ef;--field-help-filter:brightness(0) saturate(100%) invert(71%) sepia(22%) saturate(1500%) hue-rotate(310deg)}
html[data-appearance="light"]{--field-help:#ad303d;--field-distribution:#176c40;--field-followup:#086a9e;--field-help-filter:brightness(0) saturate(100%) invert(25%) sepia(68%) saturate(1900%) hue-rotate(328deg)}
html body #app :is(.fk-symptom,.fk-tool-grid .fk-help-tool),.fk-task-sheet .fk-row[data-route="troubleshooting"]{border-color:color-mix(in srgb,var(--field-help) 55%,transparent)!important;background:linear-gradient(130deg,color-mix(in srgb,var(--field-help) 9%,var(--fk-surface)),var(--fk-surface))!important}
html body #app .fk-symptom .fk-issue-icon{display:block;width:40px;height:40px;flex:0 0 40px;background:var(--field-help);mask:var(--issue-icon) center/contain no-repeat;-webkit-mask:var(--issue-icon) center/contain no-repeat}
html body #app .fk-symptom .fk-corner-cue{color:var(--field-help)!important}
html body #app :is(.fk-help-page,.fk-problem) .fk-section-heading{border-color:color-mix(in srgb,var(--field-help) 55%,transparent);background:linear-gradient(125deg,color-mix(in srgb,var(--field-help) 10%,var(--fk-surface)),var(--fk-surface))}
html body #app :is(.fk-help-page,.fk-problem) .fk-overline,html body #app .fk-inline-help{color:var(--field-help)!important}
html body #app .fk-problem .fk-primary{background:var(--field-help)!important;color:var(--fk-surface)!important}
html body #app .fk-fix-steps li:before{color:var(--field-help)!important;background:color-mix(in srgb,var(--field-help) 12%,transparent)!important}
html body #app :is(.fk-help-tool,.fk-inline-help,[data-route="troubleshooting"],.survey-guide-exit [data-route="troubleshooting"]) img,.fk-task-sheet .fk-row[data-route="troubleshooting"]>img{filter:var(--field-help-filter)!important}
html body #app .fk-help-tool .fk-tool-symbol{background:color-mix(in srgb,var(--field-help) 14%,transparent)!important;filter:none!important}
html body #app .survey-guide-exit [data-route="troubleshooting"],html body #app .fk-inline-help{border-color:color-mix(in srgb,var(--field-help) 50%,transparent)!important;background:color-mix(in srgb,var(--field-help) 8%,var(--fk-surface))!important;color:var(--field-help)!important}
html body #app .instruction-guide[data-survey-kind="distribution"]{--visit-color:var(--field-distribution)}
html body #app .instruction-guide[data-survey-kind="follow-up"]{--visit-color:var(--field-followup)}
html body #app .instruction-guide[data-survey-kind]:not([data-survey-kind=""]) :is(.fk-review-number,.step-number){color:var(--visit-color)}
html body #app .instruction-guide[data-survey-kind]:not([data-survey-kind=""]) .fk-survey-review details{border-color:color-mix(in srgb,var(--visit-color) 45%,transparent)}
html body #app .instruction-guide[data-survey-kind]:not([data-survey-kind=""]) .fk-survey-review details[open]{background:color-mix(in srgb,var(--visit-color) 7%,var(--fk-surface))}
@media(hover:hover){html body #app .fk-symptom:hover{box-shadow:0 0 0 1px var(--field-help);background:color-mix(in srgb,var(--field-help) 14%,var(--fk-surface))!important}}
html body #app .fk-symptom:focus-visible{outline-color:var(--fk-focus)}

/* Training is consistently orange; individual survey workflows retain their identity. */
:root{--field-training:#f6ac64;--field-training-filter:brightness(0) saturate(100%) invert(76%) sepia(47%) saturate(675%) hue-rotate(333deg)}
html[data-appearance="light"]{--field-training:#985005;--field-training-filter:brightness(0) saturate(100%) invert(31%) sepia(76%) saturate(1100%) hue-rotate(7deg)}
html body[data-page="training"] #app .page-heading{border-color:color-mix(in srgb,var(--field-training) 50%,transparent);background:linear-gradient(125deg,color-mix(in srgb,var(--field-training) 19%,var(--fk-surface)),var(--fk-surface))}
html body[data-page="training"] #app :is(.page-heading .eyebrow,.page-tool-section header>p){color:var(--field-training)}
html body[data-page="training"] #app .content-panel .action-icon img{width:34px;height:34px;object-fit:contain}
html body[data-page="training"] #app .content-panel .action-card:not(.disabled){border-color:var(--study-line);background:color-mix(in srgb,var(--tone,var(--fk-focus)) 6%,var(--fk-surface))!important}

/* Training Hub is a secondary destination, not another hero card. */
html body[data-page="training"] #app .content-panel .training-deeper{margin-top:24px;padding:0;background:transparent;border:0;border-top:1px solid var(--fk-edge);border-radius:0}
html body[data-page="training"] #app .training-deeper>a{display:flex;align-items:center;gap:12px;padding:16px 2px;min-height:44px;color:var(--fk-ink);text-decoration:none}
html body[data-page="training"] #app .training-deeper>a>img{display:block;width:36px!important;height:36px!important;max-width:36px;object-fit:contain;flex:0 0 36px;border-radius:9px;filter:none}
html body[data-page="training"] #app .training-hub-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
html body[data-page="training"] #app .training-hub-copy strong{font-size:14px;line-height:1.4}
html body[data-page="training"] #app .training-hub-copy small{font-size:12px;color:var(--fk-muted);line-height:1.4}
html body[data-page="training"] #app .training-hub-open{font-size:13px;color:var(--field-training)}
html body[data-page="training"] #app .training-deeper>a:hover .training-hub-copy strong{text-decoration:underline;text-underline-offset:3px}
html body[data-page="training"] #app .page-tool-section header h2{color:var(--fk-ink)!important}

/* Field hierarchy: semantic headers and icons, shared app-accent card outlines. */
body{--field-section:var(--fk-focus)}
body[data-page="training"],body[data-page="water-filter"],body[data-page="water-filter-day"],body[data-page="submitting-survey"]{--field-section:var(--field-training)}
body[data-page="troubleshooting"],body[data-page^="problem/"],body[data-page="visible-damage"],body[data-page="uncertain-water-source"],body[data-page="report-issue"]{--field-section:var(--field-help)}
body[data-page="filter-setup"],body[data-page="task/filter-setup"],body[data-page^="checklist"],body[data-page="checklists"]{--field-section:var(--field-followup)}
body[data-page="filter-cleaning"],body[data-page="task/filter-cleaning"]{--field-section:#a999ed}
body[data-page^="water-testing"]{--field-section:#ec91c1}
html[data-appearance="light"] body[data-page="filter-cleaning"],html[data-appearance="light"] body[data-page="task/filter-cleaning"]{--field-section:#6650ac}
html[data-appearance="light"] body[data-page^="water-testing"]{--field-section:#a02c69}
html body:not(.survey-mode):not(.management-mode) #app :is(.page-heading,.fk-section-heading){background:linear-gradient(125deg,color-mix(in srgb,var(--field-section) 19%,var(--fk-surface)),var(--fk-surface));border-color:color-mix(in srgb,var(--field-section) 50%,transparent)}
html body:not(.survey-mode):not(.management-mode) #app :is(.page-heading .eyebrow,.fk-section-heading .fk-overline){color:var(--field-section)}
html body #app :is(.fk-help-page,.fk-problem) :is(.fk-section-heading h1,.fk-problem-body h2){color:var(--fk-ink)}
html body:not(.survey-mode):not(.management-mode) #app :is(.action-card:not(.disabled),.fk-tool-grid button,.fk-symptom,.fk-current-step,.fk-testing-grid>button,.instruction-step,.guide-group,.fact-card,.checklist-item,.check-item,.checklist-head,.external-reference,.fk-survey-review details,.sc-apps>a,.survey-guide-exit button,.fk-inline-help){border-color:var(--study-line)!important}
.fk-task-sheet .fk-row{border-color:var(--study-line)!important}
html body:not(.survey-mode):not(.management-mode) #app :is(.action-card,.fk-symptom,.fk-testing-grid>button,.sc-apps>a):hover{border-color:var(--fk-focus)!important;box-shadow:0 0 0 1px var(--study-line)}
html body #app .instruction-guide[data-survey-kind]:not([data-survey-kind=""]) :is(.guide-heading h2,.fk-survey-review summary strong){color:var(--fk-ink)}
html body #app .fk-task>h1{color:var(--fk-ink)}

/* Shared readable heading hierarchy; semantic color stays in labels and accents. */
html body:not(.survey-mode):not(.management-mode) #app :is(h1,h2,h3){color:var(--fk-ink)}

html body #app .fk-back{display:inline-flex;width:44px!important;max-width:none;justify-content:center;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:8px;margin:0 0 14px;border:1px solid var(--study-line);border-radius:12px;background:var(--fk-surface);color:var(--fk-ink);font-size:13px;line-height:1.2}
html body #app .fk-back:focus-visible{outline:2px solid var(--fk-focus);outline-offset:3px}
html body #app .fk-task-heading .fk-back{margin:0}

html body #app .fk-back svg{flex:0 0 20px}

/* Compact, touch-friendly guide controls, including their semantic visit icons. */
html body #app .field-switch{display:flex;flex-wrap:wrap;gap:6px;width:fit-content;max-width:100%;padding:5px;margin:14px 0;border:1px solid var(--study-line);border-radius:15px;background:var(--fk-surface)}
html body #app .field-switch button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--fk-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
html body #app .field-switch button img{width:24px;height:24px;flex:0 0 24px;object-fit:contain;filter:none}
html body #app .field-switch [data-survey-topic="distribution"]{--choice-color:var(--field-distribution)}
html body #app .field-switch [data-survey-topic="follow-up"]{--choice-color:var(--field-followup)}
html body #app .field-switch [data-survey-topic][aria-pressed="true"]{border-color:var(--choice-color);background:color-mix(in srgb,var(--choice-color) 14%,var(--fk-surface))}
html body #app .field-switch button:focus-visible{outline:2px solid var(--fk-focus);outline-offset:2px}
html body #app .sc-apps>a>picture{display:block;width:64px;height:64px;flex:0 0 64px}
html body #app .sc-apps>a>picture img{display:block;width:64px;height:64px;object-fit:contain;border-radius:22%}

/* Secondary guide exits keep app artwork at button scale. */
html body #app .survey-guide-exit{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:24px}
html body #app .survey-guide-exit button{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;max-width:100%;min-height:48px;padding:10px 14px;text-align:left;font:inherit;font-size:14px;font-weight:700;color:var(--fk-ink)}
html body #app .survey-guide-exit button img{display:block;width:28px!important;height:28px!important;max-width:28px;flex:0 0 28px;object-fit:contain}
html body #app .survey-guide-exit button .surveyor-app-icon{border-radius:7px;filter:none!important}
html body #app .survey-guide-exit button:focus-visible{outline:2px solid var(--fk-focus);outline-offset:3px}

/* Reference is read-only; checklist retains its separate progress controls. */
html body #app .instruction-guide[data-guide-mode="reference"] .instruction-step{grid-template-columns:minmax(120px,190px) minmax(0,1fr)}
html body #app .instruction-guide[data-guide-mode="reference"] .instruction-step:has(.step-number){grid-template-columns:32px minmax(0,1fr)}
html body #app .instruction-check[hidden]{display:none!important}
@media(max-width:700px){
 html body #app .instruction-guide[data-guide-mode="reference"] .instruction-step{grid-template-columns:minmax(0,1fr)}
 html body #app .instruction-guide[data-guide-mode="reference"] .instruction-step :is(.step-media,.instruction-copy){grid-column:auto}
 /* Float the dock over the scrolling page; the shell owns the safe inset. */
 html:root body:not(.survey-mode):not(.management-mode) .app-shell{height:100dvh!important;max-height:100dvh!important}
 html:root body:not(.survey-mode):not(.management-mode) .field-workspace>#bottomNav{position:absolute!important;inset:auto 14px 8px!important;left:14px!important;bottom:8px!important;transform:none!important;width:calc(100% - 28px)!important;margin:0!important}
 html:root body:not(.survey-mode):not(.management-mode) .field-workspace>main#app{padding-bottom:92px!important;scroll-padding-bottom:92px;overflow-anchor:none}
 html body:not(.survey-mode):not(.management-mode) #app :is(.fk-home,.fk-task,.fk-help-page,.fk-problem,.fk-testing,.content-panel,.sc-preview){padding-bottom:24px!important}
}

/* Checklist controls use the same scale and surfaces as reference guides. */
html body #app .guide-step-symbol{display:block;width:26px!important;height:26px!important;max-width:26px;flex:0 0 26px;object-fit:contain}
html body #app .instruction-copy h3:has(.guide-step-symbol){display:flex;align-items:center;gap:10px}
html body #app .field-checklist-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:18px 0}
html body #app .field-checklist-tools p{flex:1 1 180px;margin:0;color:var(--fk-muted);font-size:13px;line-height:1.5}
html body #app .field-checklist-tools button,html body #app .guide-inline-tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 12px;border:1px solid var(--study-line);border-radius:12px;background:var(--fk-surface);color:var(--fk-ink);font:600 13px/1.4 var(--wf-font);cursor:pointer}
html body #app .guide-inline-tool{color:var(--field-help)}
html body #app .guide-inline-tool img{width:22px;height:22px;object-fit:contain;filter:var(--field-help-filter)}
html body #app .guide-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:16px 0;font-size:12px;line-height:1.5}
html body #app .instruction-guide[data-guide-mode="checklist"] .instruction-check{padding:0;min-height:44px;align-items:center;align-self:start}
html body #app .instruction-guide[data-guide-mode="checklist"] .instruction-check input{width:24px;height:24px}
html body #app .instruction-step:has(.step-number) .instruction-copy{min-width:0}
@media(max-width:700px){
 html body #app .instruction-guide[data-guide-mode="checklist"] .instruction-step:has(.step-number){grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
 html body #app .instruction-guide[data-guide-mode="checklist"] .instruction-step:has(.step-number)>.step-number{display:none}
 html body #app .instruction-guide[data-guide-mode="checklist"] .instruction-copy{font-size:14px}
 html body #app .instruction-guide .instruction-copy h3{font-size:15px;line-height:1.4;text-transform:capitalize}
 html body #app .instruction-guide .instruction-copy p{font-size:14px;line-height:1.6}
 html body #app .sc-apps>a>picture,html body #app .sc-apps>a>picture img{width:56px!important;height:56px!important;flex-basis:56px}
}

/* Field phone dock geometry; appearance remains owned by the shared glass styles. */
#fieldRoutePending{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:12;max-width:calc(100% - 24px);padding:9px 14px;border:1px solid var(--study-line);border-radius:12px;background:var(--fk-surface);color:var(--fk-ink);font:600 13px/1.4 system-ui;box-shadow:0 3px 10px #0002;pointer-events:none}
.field-workspace{position:relative}
@media(max-width:700px){
 html:root body:not(.survey-mode):not(.management-mode) .field-workspace>#bottomNav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;height:64px!important;min-height:64px!important}
 html:root body:not(.survey-mode):not(.management-mode) .field-workspace>#bottomNav :is(.suite-rail-footer,.field-manager-bar){display:none!important}
 html:root body:not(.survey-mode):not(.management-mode) .field-workspace>#bottomNav>button{min-width:0!important;touch-action:manipulation}
 html:root body:not(.survey-mode):not(.management-mode) .field-workspace>#bottomNav>button[hidden]{display:none!important}
}
@media(max-width:700px) and (display-mode:standalone){
 html:root body:not(.survey-mode):not(.management-mode) .app-shell{position:relative!important;inset:auto!important;height:100dvh!important;max-height:100dvh!important;min-height:0!important}
}

/* Page mastheads establish hierarchy; outlined surfaces remain interactive tools. */
html body:not(.survey-mode):not(.management-mode) #app :is(.fk-heading,.page-heading,.fk-section-heading){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;width:calc(100% + 16px);box-sizing:border-box;margin:0 -8px 26px;padding:22px 24px 26px;border:0!important;border-bottom:2px solid color-mix(in srgb,var(--field-section,var(--fk-focus)) 45%,transparent)!important;border-radius:18px;background:linear-gradient(115deg,color-mix(in srgb,var(--field-section,var(--fk-focus)) 20%,var(--fk-surface)),var(--fk-surface))!important;box-shadow:none;overflow:visible;text-align:left}
html body #app .fk-heading::after{display:none}
html body #app .fk-heading>div{grid-column:1/-1}
html body:not(.survey-mode):not(.management-mode) #app :is(.page-heading,.fk-section-heading)>.back{grid-column:1;grid-row:1;position:static!important;transform:none!important;margin:0!important;width:44px;min-height:44px;border:1px solid var(--fk-edge);border-radius:13px;background:transparent;color:var(--fk-ink)}
html body:not(.survey-mode):not(.management-mode) #app :is(.page-heading,.fk-section-heading)>:is(.eyebrow,.fk-overline){grid-column:2;grid-row:1;justify-self:start;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--field-section,var(--fk-focus))!important;font-size:10px!important;font-weight:750;letter-spacing:1.5px;line-height:1.5}
html body:not(.survey-mode):not(.management-mode) #app :is(.page-heading,.fk-section-heading):not(:has(>.back))>:is(.eyebrow,.fk-overline){grid-column:1/-1}
html body:not(.survey-mode):not(.management-mode) #app :is(.fk-heading,.page-heading,.fk-section-heading) h1{grid-column:1/-1;font-size:clamp(34px,4.8vw,52px)!important;line-height:1.08!important;letter-spacing:-1.4px!important;font-weight:800;max-width:850px;margin:8px 0!important;color:var(--fk-ink)!important;text-align:left;text-transform:none!important}
html body:not(.survey-mode):not(.management-mode) #app :is(.page-heading,.fk-section-heading)>:is(.intro,p:last-child){grid-column:1/-1;margin:0;max-width:680px;font-size:15px;line-height:1.6;color:var(--fk-muted)}
html body #app .fk-heading .fk-overline{color:var(--field-section,var(--fk-focus))!important}
.field-build-footer{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;margin:28px 22px 0;padding:16px 0;border-top:1px solid var(--fk-edge);color:var(--fk-muted);font:11px/1.6 system-ui}
.field-build-footer small{font:inherit}
#appMenu>.field-build-footer{flex:none;margin:12px 20px 20px}
@media(max-width:700px){html body:not(.survey-mode):not(.management-mode) #app :is(.fk-heading,.page-heading,.fk-section-heading){padding:18px 20px 22px;margin-bottom:24px;gap:10px}.field-build-footer{margin:24px 4px 0}}
html body:not(.survey-mode):not(.management-mode) #app .page-heading::after{display:none!important}
/* Surveyor entry adopts the masthead, without changing capture screens. */
html body #app .sf-surveyor-home-heading{box-sizing:border-box;width:calc(100% + 16px);padding:22px 24px 26px!important;margin:0 -8px 26px!important;border:0!important;border-bottom:2px solid color-mix(in srgb,var(--fk-focus) 45%,transparent)!important;border-radius:18px!important;background:linear-gradient(115deg,color-mix(in srgb,var(--fk-focus) 20%,var(--fk-surface)),var(--fk-surface))!important;box-shadow:none!important;text-align:left}
html body #app .sf-surveyor-home-heading h1{font-size:clamp(34px,4.8vw,52px)!important;letter-spacing:-1.4px;line-height:1.08;color:var(--fk-ink)!important;text-align:left;margin:8px 0 12px}
html body #app .sf-surveyor-home-heading p{color:var(--fk-muted);font-size:15px;line-height:1.6;text-align:left}

/* A shared content gutter keeps every Field masthead aligned across routes. */
html body:not(.survey-mode):not(.management-mode) #app> :is(.fk-home,.content-panel,.fk-help-page,.fk-problem,.fk-testing,.sc-preview){box-sizing:border-box;max-width:1050px;width:100%;margin:0 auto;padding:24px 22px!important;border:0;border-radius:0}
@media(max-width:700px){html body:not(.survey-mode):not(.management-mode) #app> :is(.fk-home,.content-panel,.fk-help-page,.fk-problem,.fk-testing,.sc-preview){padding:12px 8px 24px!important}}

@media(max-width:700px){html body #app .sf-surveyor-home-heading{padding:18px 20px 22px!important;margin-bottom:24px!important}}

/* Give the wide masthead more presence without changing phone navigation. */
@media(min-width:701px){
 html body:not(.survey-mode):not(.management-mode) #app :is(.fk-heading,.page-heading,.fk-section-heading){width:calc(100% + 24px);margin-inline:-12px;padding:28px 32px 32px;min-height:200px}
 html body:not(.survey-mode):not(.management-mode) #app :is(.fk-heading,.page-heading,.fk-section-heading) h1{font-size:clamp(38px,4.4vw,54px)!important}
}
html body #app .fk-main-column>.fk-tools:first-child{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--fk-edge)}
/* Preserve the Quick Reference card; draw the section divider outside it. */
html body #app .fk-reference{position:relative;margin-top:18px}
html body #app .fk-reference::before{content:"";position:absolute;left:0;right:0;top:-19px;border-top:1px solid var(--fk-edge);pointer-events:none}
@media(min-width:1051px){html body #app .fk-reference{margin-top:0}html body #app .fk-reference::before{display:none}}

/* App identity lines share a left edge beside the icon. */
html body .topbar .brand .wata-brand-copy,
html body .topbar .brand .wata-brand-copy>:is(.wata-app-title,.wata-suite-name){text-align:left!important;align-items:flex-start}

/* Section titles sit outside their cards, matching Tools At Hand. */
html body #app .fk-outside-heading{font-size:21px;font-weight:750;letter-spacing:-.4px;line-height:1.3;text-transform:none;color:var(--fk-ink);margin:0 0 16px}
html body #app .fk-reference-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
html body #app .fk-reference-heading .fk-outside-heading{margin:0}
html body #app .fk-reference-section{align-self:start;border-top:1px solid var(--fk-edge);padding-top:24px}
html body #app .fk-reference-section .fk-reference{margin-top:0}
html body #app .fk-reference-section .fk-reference::before{display:none}
@media(min-width:1051px){html body #app .fk-reference-section{border-top:0;padding-top:0}}

/* Phone viewport owns its safe area once; carry the page surface behind the dock. */
@media(max-width:700px){
 html:root body:not(.survey-mode):not(.management-mode){min-height:0!important;background:var(--wf-surface)!important}
 html:root body:not(.survey-mode):not(.management-mode) :is(.app-shell,.field-workspace){background:var(--wf-surface)!important}
 html:root body:not(.survey-mode):not(.management-mode) .app-shell>.topbar{padding:14px 12px!important;min-height:72px!important;box-sizing:border-box!important}
}