:root {
  --ink: #173D52;
  --backdrop: #2b3a44;      /* behind the map and photos; set per product at boot */
  --plate: #D9D9D9;
  --icon: #E3E3E3;
  --paper: #FFFFFF;
  --danger: #8C2F2F;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--backdrop); color: var(--ink); font-family: var(--font); overscroll-behavior: none; touch-action: pan-x pan-y; }
button { font: inherit; cursor: pointer; }
svg { fill: currentColor; }

.app { position: fixed; inset: 0; overflow: hidden; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.settings, .settings * , textarea, input { user-select: text; -webkit-user-select: text; }

/* Live map behind the viewport (home map only) -------------------------- */
/* MapLibre's own stylesheet loads later and sets position: relative on its container; outrank it so the map keeps its size */
.app > .livemap, .app > .livemap.maplibregl-map { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; background: #2b3a44; }
.app[data-live="1"] > .livemap { display: block; }
.livemap .maplibregl-canvas { outline: none; }
.app > .livemap { will-change: transform; }
.band { fill: rgba(23,61,82,.12); stroke: var(--m-primary); stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.zone-ref { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; pointer-events: none; }
.viewport { z-index: 1; }
.app[data-live="1"] .pane.live { background: transparent; }
.app[data-live="1"] .pane.live > img { visibility: hidden; }
.livemap .maplibregl-ctrl-bottom-left { left: 90px; }
.app[data-chrome="0"] .livemap .maplibregl-ctrl-bottom-left { left: 8px; }
.livemap .maplibregl-ctrl-attrib { font-size: 11px; background: rgba(255,255,255,.7); border-radius: var(--m-radius-sm); }
.range-label { display: block; font: var(--t-body-md); letter-spacing: .25px; color: var(--m-on-surface); margin: 12px 0 4px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--m-primary), var(--m-primary)) 0 / var(--p) 100% no-repeat, var(--m-surface-highest); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--m-primary); border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(23,61,82,.12); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--m-surface-highest); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--m-primary); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--m-primary); border: 0; }

/* Map viewport ------------------------------------------------------- */
.viewport {
  position: absolute; inset: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}
.viewport::-webkit-scrollbar { display: none; }
.stage { position: relative; display: flex; align-items: flex-start; transform-origin: 0 0; }
.pane { position: relative; flex: none; background: #4a5a66; }
.pane + .pane { margin-left: 8px; }
.pane img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pane img.missing { visibility: hidden; }
.pane .missing-label { position: absolute; inset: 0; display: grid; place-items: center; color: var(--icon); font-size: 14px; text-align: center; padding: 16px; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Zone overlay */
.zone-shape { stroke: #000; stroke-width: 1; cursor: pointer; }
.zone-shape:focus-visible, .zone-shape:hover { stroke: var(--paper); stroke-width: 3; }
.zone-label { fill: #fff; font-weight: 700; font-size: 48px; pointer-events: none; font-family: var(--font); }

/* Feature marks */
.feat { cursor: pointer; }
.feat .hit { fill: transparent; stroke: none; }
/* Outlines colored by kind, with a faint dark halo so they read on pale ground too */
.feat .outline { fill: none; stroke: var(--c-tree, #fff); stroke-dasharray: 4 4; opacity: .95; }
.feat.t-bed .outline { stroke: var(--c-bed, #FFD24D); }
.feat.t-mow .outline { stroke: var(--c-mow, #7ED957); stroke-dasharray: 8 4; }
.feat.t-leaves .outline { stroke: var(--c-leaves, #F4A261); stroke-dasharray: 2 4; }
.feat.t-snow .outline { stroke: var(--c-snow, #7EC8FF); stroke-dasharray: 1 3; stroke-linecap: round; }
.feat.sel .outline, .feat.sel .mark { stroke: #FFD24D; stroke-width: 3; stroke-dasharray: none; }
.app[data-view="zone"] .feat.sel .hit { cursor: move; touch-action: none; }
.btn[data-tool="bed"] svg { color: var(--c-bed, #C99A00); } .btn[data-tool="mow"] svg { color: var(--c-mow, #3E9A2A); } .btn[data-tool="leaves"] svg { color: var(--c-leaves, #D9782E); } .btn[data-tool="snow"] svg { color: var(--c-snow, #2E86DE); }
.btn.outlined[data-tool] svg { filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); }
.btn.filled[data-tool] svg { color: inherit; }
/* In the All view, tint finished areas by task so overlapping shapes stay readable */
.feat.t-mow.done .mark { fill: #CFE3C4; }
.feat.t-leaves.done .mark { fill: #F1D9B8; fill-opacity: .85; }
.feat.t-snow.done .mark { fill: #CFE0EE; fill-opacity: .9; }
.feat.done .mark { fill: var(--plate); stroke: var(--ink); stroke-width: 1.5; }
.feat.done .date { fill: var(--ink); font-weight: 600; text-anchor: middle; font-family: var(--font); pointer-events: none; }
.feat.done .who { fill: var(--ink); font-weight: 400; text-anchor: middle; font-family: var(--font); pointer-events: none; }
.feat.editing .outline { stroke: #FFD24D; stroke-dasharray: none; stroke-width: 2; }
.progress-dot { fill: var(--c-done, #FF973D); stroke: var(--ink); stroke-width: 1; pointer-events: none; }
.progress-area { fill: var(--c-done, #FF973D); fill-opacity: .8; stroke: var(--ink); stroke-width: 1; pointer-events: none; }
/* unfinished markers on the home map: outlined in their task's color so they read as "to do" next to the orange "done" */
.home-area { fill: var(--c-out, #fff); fill-opacity: .12; stroke: var(--c-out, #fff); stroke-width: 1.5; stroke-dasharray: 4 3; }
.home-dot { fill: var(--c-out, #fff); fill-opacity: .25; stroke: var(--c-out, #fff); stroke-width: 1.5; }
/* anyone can tap them (mark / clear) whenever a task is showing on the home map; the manager also assigns from here */
.app[data-view="home"] .progress-area, .app[data-view="home"] .home-area, .app[data-view="home"] .progress-dot, .app[data-view="home"] .home-dot { pointer-events: auto; cursor: pointer; }
.app[data-zedit="1"] .progress-area, .app[data-zedit="1"] .home-area, .app[data-zedit="1"] .progress-dot, .app[data-zedit="1"] .home-dot { pointer-events: auto; cursor: pointer; }
.progress-area.sel, .home-area.sel, .progress-dot.sel, .home-dot.sel { stroke: #FFD24D; stroke-width: 3; stroke-dasharray: none; cursor: move; touch-action: none; }
.draft { fill: rgba(255,210,77,.25); stroke: #FFD24D; stroke-width: 2; pointer-events: none; }
.draft-pt { fill: #FFD24D; cursor: pointer; touch-action: none; }
.draft-pt.first { stroke: var(--ink); stroke-width: 1.5; }
.draft-pt.round { fill: var(--paper); stroke: #FFD24D; stroke-width: 2; }
.feat .label .pill { fill: var(--paper); stroke: var(--ink); stroke-width: .75; opacity: .95; }
.feat .label text { pointer-events: none; }

/* Zone outline editor */
.zone-shape.sel { stroke: #FFD24D; stroke-width: 3; cursor: move; touch-action: none; }
.zpt { fill: #FFD24D; stroke: var(--ink); stroke-width: 1.5; cursor: grab; touch-action: none; }
.zpt.round { fill: var(--paper); stroke: #FFD24D; stroke-width: 2.5; }   /* same look as a rounded point while drawing */
.zpt.sel { fill: #FF973D; }
.zpt.round.sel { fill: var(--paper); stroke: #FF973D; }
.zmid { fill: var(--paper); stroke: var(--ink); stroke-width: 1; opacity: .9; cursor: copy; touch-action: none; }


/* Mower areas (Lawn views): purple Rider, blue 48, red 12 */
.mower { fill-opacity: .38; stroke-width: 1.5; pointer-events: none; }
.mower.rider { fill: var(--c-rider, #5B3FA6); stroke: var(--c-rider, #5B3FA6); }
.mower.m48 { fill: var(--c-m48, #2E86DE); stroke: var(--c-m48, #2E86DE); }
.mower.m12 { fill: var(--c-m12, #D93025); stroke: var(--c-m12, #D93025); }
.app[data-zedit="1"] .mower { pointer-events: auto; cursor: pointer; }
.mower.sel { stroke: #FFD24D; stroke-width: 3; cursor: move; touch-action: none; }
.sub-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* "Only my work": everything else fades back */
.app[data-mine="1"] .feat:not(.mine) { opacity: .28; }
.app[data-mine="1"] .mower:not(.mine) { fill-opacity: .1; stroke-opacity: .3; }
.mine-row { display: flex; align-items: center; gap: 8px; }
.mine-row .txt-col { flex: 1; min-width: 0; }
.mine-row .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.crew-card { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 16px; cursor: pointer; }
.crew-card.on { box-shadow: inset 0 0 0 2px var(--m-primary); }
.crew-card .crew-head { display: flex; align-items: center; gap: 12px; font: var(--t-title-sm); letter-spacing: .1px; margin-bottom: 8px; }
.crew-card .crew-head .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.crew-card .crew-head .sum { margin-left: auto; font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.crew-card .mine-row { background: transparent; padding: 4px 0; font: var(--t-body-md); letter-spacing: .25px; }

/* Assignee badge: 24px circle on the outline with the crew member's initials */
.asg { pointer-events: none; }
.asg circle { stroke: #fff; }
.asg text { fill: #fff; font-weight: 500; text-anchor: middle; dominant-baseline: central; font-family: var(--font); letter-spacing: 0; }
.assign-list { display: flex; flex-direction: column; gap: 12px; }
.assign-checks { display: flex; flex-direction: column; margin-bottom: 8px; max-height: 45vh; overflow-y: auto; }
.assign-checks .chk { margin: 0; flex: none; }   /* rows keep their height; the list scrolls instead of squeezing them */
.assign-checks .chk-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-left: -4px; }
.crew-item .crew-color { width: 28px; height: 28px; margin-right: 4px; flex: none; }
.crew-item .crew-color input[type="color"] { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--m-outline); border-radius: 50%; background: none; cursor: pointer; }
.crew-item .crew-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.crew-item .crew-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.crew-item .crew-name { flex: 1; }

/* Problem pins */
.prob { cursor: pointer; }
.prob .hit { fill: transparent; stroke: none; }
.prob .pin { fill: var(--c-problem, #D9382E); stroke: #fff; stroke-width: 1.5; }
.prob .ring { fill: none; stroke: var(--c-problem, #D9382E); opacity: .35; }
.prob text { fill: #fff; font-weight: 700; text-anchor: middle; pointer-events: none; font-family: var(--font); }
/* photo spots: same pin, blue, with the camera glyph */
.prob.photo .pin { fill: #6B96C7; }
.prob.photo .ring { stroke: #6B96C7; opacity: .7; }
.prob.photo .glyph { fill: #fff; pointer-events: none; }

/* Left rail (Robert's Figma design) ---------------------------------------- */
.rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 82px; z-index: 12;
  background: var(--plate); display: flex; flex-direction: column;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
  transition: transform .25s ease;
}
/* Heading: one word normally; with several tasks showing, one task per line, shrinking on narrow screens so it always fits */
.rail-head {
  min-height: 53px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px;
  font-size: 14px; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.15; overflow: hidden;
}
.rail-head > span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-head.multi { font-size: 12px; }
.rail-head.multi > span + span { margin-top: 2px; }
@media (max-width: 480px) { .rail-head.multi { font-size: 10.5px; letter-spacing: -.1px; } }
.rail-items { flex: 1; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail-items::-webkit-scrollbar { display: none; }
.rail-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 100%; height: 74px; border: 0; background: transparent; color: var(--ink); padding: 0; cursor: pointer;
}
/* Two independent states. "on" = the tab you are on: solid ink block, inverted icon (Figma). "filt" = the task filter that
   is applied: a 1px ring 2.5px outside the 36px icon (Figma BushesFilterOn: r 18 disc, r 20.5 stroke), shown wherever you
   are. --ring sets its color: ink, plate on the solid block so it stays visible, Lawn takes its list's mower color. */
.rail-item.on { background: var(--ink); color: var(--plate); }
.rail-ic { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--plate); display: grid; place-items: center; flex: none; --ring: var(--ink); }
.rail-ic svg { width: 36px; height: 36px; fill: currentColor; }
.rail-item.on .rail-ic { background: var(--plate); color: var(--ink); }
/* the ring is an outline on the disc itself (2px gap + 1px line = the r 20.5 circle), so it is centered by construction */
.rail-ic.filt { outline: 1px solid var(--ring); outline-offset: 2px; }
.rail-item.on .rail-ic.filt { --ring: var(--plate); }
.rail-lbl { font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.rail-item:active .rail-ic { filter: brightness(1.2); }
.rail-item:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.badge { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #D83A31; border: 1px solid #fff; }

/* Secondary nav: the zone list, tucked beside the rail */
.subnav {
  position: absolute; left: 82px; top: 0; bottom: 0; width: max-content; min-width: 82px; max-width: 60vw; z-index: 11;   /* grows to fit the longest entry */
  background: var(--ink); padding-top: calc(66px + var(--safe-t)); padding-bottom: var(--safe-b);
  overflow-y: auto; scrollbar-width: none; transition: transform .25s ease;
}
.subnav::-webkit-scrollbar { display: none; }
.sub-list { display: flex; flex-direction: column; gap: 1px; }
.sub-item { display: block; width: 100%; height: 28px; white-space: pre; border: 0; background: transparent; color: var(--plate); font: inherit; font-size: 12px; font-weight: 500; text-align: left; padding: 0 18px; white-space: nowrap; cursor: pointer; }
.sub-item.on { background: #C4C4C4; color: var(--ink); }
.sub-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Zoom stack (right) */
.zoomstack { position: absolute; right: 17px; bottom: calc(15px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; z-index: 12; transition: transform .25s ease; }
.zbtn { width: 42px; height: 42px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.zbtn svg { width: 42px; height: 42px; }
.zbtn:active { filter: brightness(1.2); }
.zbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 50%; }

/* Tap an empty spot on the map: the bars slide off their edges */
.app[data-chrome="0"] .rail { transform: translateX(-100%); }
.app[data-chrome="0"] .subnav { transform: translateX(-200%); }
.app[data-chrome="0"] .zoomstack { transform: translateX(calc(100% + 40px)); }
@media (prefers-reduced-motion: reduce) { .rail, .subnav, .zoomstack { transition: none; } }

/* Edit toolbars: to the right of the rail, along the bottom. The arrow folds one down to a strip. */
.edit-bar {
  position: absolute; left: 90px; right: 72px; bottom: calc(12px + var(--safe-b)); z-index: 10;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  background: var(--m-surface); padding: 10px 44px 10px 16px; border-radius: var(--m-radius-lg);
  box-shadow: 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3);
}
.edit-title { font: var(--t-title-sm); letter-spacing: .1px; color: var(--m-on-surface-variant); margin-right: 4px; }
.edit-bar .btn { padding: 0 16px; }
.edit-bar .btn svg { margin-left: -4px; }
.edit-hint { flex-basis: 100%; font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); text-align: center; min-height: 1em; }
.bar-toggle { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; border-radius: var(--m-radius-full); background: transparent; color: var(--m-on-surface-variant); display: grid; place-items: center; }
.bar-toggle:hover { background: rgba(28,28,28,.08); }
.bar-toggle svg { width: 22px; height: 22px; transition: transform .2s ease; }
.edit-bar.collapsed { padding: 6px 44px 6px 16px; cursor: pointer; border-radius: var(--m-radius-full); }
.edit-bar.collapsed > :not(.edit-title):not(.bar-toggle) { display: none !important; }
.edit-bar.collapsed .bar-toggle { top: 0; }
.edit-bar.collapsed .bar-toggle svg { transform: rotate(180deg); }
.app[data-chrome="0"] .edit-bar { left: 12px; right: 12px; }
@media (max-width: 640px) {
  .edit-bar { left: 90px; right: 12px; bottom: calc(72px + var(--safe-b)); }
}

/* Material 3 tokens (colors mapped onto the app palette) ---------------- */
:root {
  --m-primary: #173D52; --m-on-primary: #FFFFFF;
  --m-secondary-container: #D3E3EC; --m-on-secondary-container: #0F2A3A;
  --m-surface: #F5F5F5; --m-surface-high: #E8E8E8; --m-surface-highest: #E1E1E1;
  --m-on-surface: #1C1C1C; --m-on-surface-variant: #46484B;
  --m-outline: #79747E; --m-outline-variant: #C4C7C5;
  --m-error: #B3261E; --m-inverse-surface: #322F35; --m-inverse-on-surface: #F5EFF7;
  --m-radius-xs: 4px; --m-radius-sm: 8px; --m-radius-md: 12px; --m-radius-lg: 16px; --m-radius-xl: 28px; --m-radius-full: 999px;
  /* M3 type scale used in the sheets, dialogs, menus: title-large 22/28, headline-small 24/32, title-medium 16/24/500,
     title-small 14/20/500, body-large 16/24, body-medium 14/20, body-small 12/16, label-large 14/20/500, label-small 11/16/500 */
  --t-title-lg: 400 22px/28px var(--font); --t-headline-sm: 400 24px/32px var(--font);
  --t-title-md: 500 16px/24px var(--font); --t-title-sm: 500 14px/20px var(--font);
  --t-body-lg: 400 16px/24px var(--font); --t-body-md: 400 14px/20px var(--font); --t-body-sm: 400 12px/16px var(--font);
  --t-label-lg: 500 14px/20px var(--font); --t-label-sm: 500 11px/16px var(--font);
}

/* Side sheets (Settings, Instructions, Help) ---------------------------- */
.settings {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: var(--m-surface); color: var(--m-on-surface); padding: calc(20px + var(--safe-t)) 24px calc(24px + var(--safe-b));
  border-radius: var(--m-radius-lg) 0 0 var(--m-radius-lg); box-shadow: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
  overflow-y: auto; transform: translateX(100%); transition: transform .22s cubic-bezier(.2,0,0,1); z-index: 20;
  font: var(--t-body-md); letter-spacing: .25px;
}
.settings.open { transform: none; }
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); z-index: 15; display: none; }
.scrim.open { display: block; }
/* While a count from "What is drawn" is being pointed at, the panel's dimming steps out of the way
   so the flashing shapes can be seen. It still catches taps, so tapping the map closes the panel. */
.scrim.open.peek { background: transparent; transition: background .2s; }
.settings-head { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 8px 0; }
.settings h2 { margin: 0; font: var(--t-title-lg); letter-spacing: 0; }
.xbtn { border: 0; background: transparent; color: var(--m-on-surface-variant); width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--m-radius-full); }
.xbtn:hover { background: rgba(28,28,28,.08); }
.xbtn svg { width: 24px; height: 24px; }
.srow { margin-bottom: 24px; }
.srow:last-child { margin-bottom: 0; }
.srow > label.sub { margin-top: 16px; }
.srow > label { display: block; font: var(--t-title-sm); letter-spacing: .1px; color: var(--m-on-surface-variant); margin-bottom: 8px; }
.hint { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); margin: 0 0 12px; }
.hint:last-child { margin-bottom: 0; }
.hint.error { color: var(--m-error); }
/* supporting text directly under a field sits inside the field's 16px inset, 4px below it */
.tf + .hint, .tf-grid + .hint { margin: 4px 0 12px; padding: 0 16px; }
/* vertical rhythm inside a section: 16px between stacked fields, 8px between stacked buttons or a button and its note */
#mapCustom > .tf { margin-bottom: 16px; }   /* outside the panel system */
.srow > .tf:last-child { margin-bottom: 0; }
.srow > .btn + .btn, .srow > .btn + .btn-row, .srow > .btn + .hint, .srow > .btn-row + .btn-row, .srow > .btn-row + .btn, .srow > .btn-row + .hint, .color-list + .btn-row, .crew-list + .crew-add,
.srow > .instr-list + .btn, .srow > .instr-list + .btn-row, .srow > .chk + .btn, .srow > .chk + .btn-row, .srow > .chk + .hint { margin-top: 8px; }
.srow > .btn + .chk, .srow > .hint + .chk { margin-top: 4px; }
/* a text field after any control (button, checkbox, list, div) keeps 16px above it, in either order */
.srow > .btn + .tf, .srow > .btn-row + .tf, .srow > .chk + .tf, .srow > .instr-list + .tf, .srow > div + .tf, .srow > .btn + div:not(.tf), .srow > .tf + div:not(.tf) { margin-top: 16px; }
.settings-foot { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); margin-top: 24px; }
.settings-foot.copy { margin-top: 4px; }
.sync-label { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); margin: 0 0 24px; }

/* Text fields: outlined, floating label --------------------------------- */
.tf { position: relative; width: 100%; }
.tf input, .tf select, .tf textarea {
  width: 100%; min-height: 56px; padding: 16px; border: 1px solid var(--m-outline); border-radius: var(--m-radius-xs);
  background: transparent; color: var(--m-on-surface); font: var(--t-body-lg); letter-spacing: .5px; outline: none;
  -webkit-appearance: none; appearance: none; margin: 0;
}
.tf input { padding: 0 16px; height: 56px; }
.tf textarea { resize: vertical; padding-top: 24px; }
/* exposed dropdown menu: same outlined field with a 24px trailing arrow inset 12px */
.tf select { height: 56px; padding: 0 48px 0 16px; cursor: pointer; text-overflow: ellipsis;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2346484B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 24px; }
/* The focused select's arrow. Masked rather than drawn as a coloured image: a data URI cannot read
   --ink, and this folder is two products with two inks. The mask is the shape; the colour comes from
   the background, which can read the variable. */
.tf select:focus {
  background-image: none;
  background-color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E") no-repeat right 12px center / 24px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E") no-repeat right 12px center / 24px;
}
.tf select option { font: var(--t-body-md); color: var(--m-on-surface); background: var(--m-surface); }
.tf label {
  position: absolute; left: 12px; top: 16px; padding: 0 4px; background: var(--m-surface); color: var(--m-on-surface-variant);
  font: var(--t-body-lg); letter-spacing: .5px; pointer-events: none; transition: top .15s, font-size .15s, color .15s;
}
.tf input:focus + label, .tf input:not(:placeholder-shown) + label, .tf textarea:focus + label, .tf textarea:not(:placeholder-shown) + label,
.tf select + label, .tf-date label { top: -8px; font: var(--t-body-sm); letter-spacing: .4px; }
/* focus: the 2px outline is drawn with an inset shadow so the text does not shift */
.tf input:focus, .tf select:focus, .tf textarea:focus { border-color: var(--m-primary); box-shadow: inset 0 0 0 1px var(--m-primary); }
.tf input:focus + label, .tf select:focus + label, .tf textarea:focus + label { color: var(--m-primary); }
.tf input:hover:not(:focus), .tf select:hover:not(:focus), .tf textarea:hover:not(:focus) { border-color: var(--m-on-surface); }
.tf input:disabled, .tf select:disabled { color: rgba(28,28,28,.38); border-color: rgba(28,28,28,.12); }
.dialog-box .tf label { background: var(--m-surface-high); }
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-bottom: 12px; }
.tf-date input { padding-right: 8px; }
.tf-date input::-webkit-date-and-time-value { text-align: left; }
.crew-add { display: flex; gap: 8px; align-items: center; }
.crew-add .tf { flex: 1; }
.crew-add .btn { flex: none; }

/* Checkbox --------------------------------------------------------------- */
.srow > label.chk, .chk { display: flex; margin: 8px 0 0; gap: 16px; align-items: center; font: var(--t-body-md); letter-spacing: .25px; color: var(--m-on-surface); cursor: pointer; min-height: 40px; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk-box { width: 18px; height: 18px; flex: none; border: 2px solid var(--m-on-surface-variant); border-radius: 2px; display: grid; place-items: center; color: var(--m-on-primary); transition: background .12s, border-color .12s; }
.chk-box svg { width: 16px; height: 16px; display: none; }
.chk input:checked + .chk-box { background: var(--m-primary); border-color: var(--m-primary); }
.chk input:checked + .chk-box svg { display: block; }
.chk input:focus-visible + .chk-box { box-shadow: 0 0 0 10px rgba(23,61,82,.12); border-radius: var(--m-radius-full); }

/* Buttons: filled / tonal / outlined / text ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px;
  border: 0; border-radius: var(--m-radius-full); font: var(--t-label-lg); letter-spacing: .1px;
  cursor: pointer; white-space: nowrap; transition: background .12s, box-shadow .12s, filter .12s;
}
.btn svg { width: 18px; height: 18px; margin-left: -8px; }
.btn.filled { background: var(--m-primary); color: var(--m-on-primary); }
.btn.filled:hover { box-shadow: 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3); filter: brightness(1.08); }
.btn.tonal { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.btn.tonal:hover { filter: brightness(.96); }
.btn.outlined { background: transparent; color: var(--m-primary); border: 1px solid var(--m-outline); }
.btn.outlined:hover { background: rgba(23,61,82,.08); }
.btn.text { background: transparent; color: var(--m-primary); padding: 0 12px; }
.btn.text:hover { background: rgba(23,61,82,.08); }
.btn.text svg { margin-left: 0; }
.btn.danger { color: var(--m-error); border-color: var(--m-error); }
.btn.danger:hover { background: rgba(179,38,30,.08); }
.btn:active { filter: brightness(.92); }
.btn:disabled { background: rgba(28,28,28,.12); color: rgba(28,28,28,.38); border-color: transparent; cursor: default; filter: none; box-shadow: none; }
.btn.text:disabled, .btn.outlined:disabled { background: transparent; }
.btn.outlined:disabled { border-color: rgba(28,28,28,.12); }
.btn:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 2px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* Chips (history quick ranges) ------------------------------------------- */
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { height: 32px; padding: 0 16px; border: 1px solid var(--m-outline); border-radius: var(--m-radius-sm); background: transparent; color: var(--m-on-surface-variant); font: var(--t-label-lg); letter-spacing: .1px; }
.chip:hover { background: rgba(28,28,28,.08); }
.chip.on { background: var(--m-secondary-container); color: var(--m-on-secondary-container); border-color: transparent; }
.chip:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 2px; }

/* Color pickers (Settings > Colors) ---------------------------------------- */
.color-list { display: flex; flex-direction: column; gap: 2px; }
.color-row { display: flex; align-items: center; gap: 16px; min-height: 48px; font: var(--t-body-lg); letter-spacing: .5px; }
.color-row span { flex: 1; }
.color-row input[type="color"] { -webkit-appearance: none; appearance: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--m-outline); border-radius: var(--m-radius-full); background: none; cursor: pointer; }
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.color-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--m-radius-full); }
.color-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--m-radius-full); }

/* Lists ------------------------------------------------------------------ */
.crew-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.crew-item { display: flex; align-items: center; justify-content: space-between; background: var(--m-surface-high); border-radius: var(--m-radius-sm); padding: 4px 4px 4px 16px; font: var(--t-body-lg); letter-spacing: .5px; min-height: 48px; }
.crew-item .xbtn { width: 40px; height: 40px; }
.crew-item .xbtn svg { width: 20px; height: 20px; }
.instr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.instr { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 16px; font: var(--t-body-md); letter-spacing: .25px; }
.instr.mine { border-left: 4px solid #FF973D; }
.instr.new { box-shadow: inset 0 0 0 2px #FF973D; }
.instr-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: var(--t-label-sm); letter-spacing: .5px; color: var(--m-on-surface-variant); margin-bottom: 4px; }
.instr-text { white-space: pre-wrap; word-wrap: break-word; }
.instr .xbtn { width: 32px; height: 32px; }
.instr .xbtn svg { width: 18px; height: 18px; }
.empty { font: var(--t-body-md); letter-spacing: .25px; color: var(--m-on-surface-variant); margin: 0; }
.help p { font: var(--t-body-md); letter-spacing: .25px; margin: 0 0 8px; color: var(--m-on-surface); }
.help-search { margin-bottom: 8px; }
.help-search .hint { margin: 6px 0 0; min-height: 16px; }
.help-sec[hidden] { display: none; }
.help mark { background: #FFE58A; color: inherit; border-radius: 2px; padding: 0 1px; }
#helpSearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 16px; width: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2346484B'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center / 16px; cursor: pointer; }
.help h3 { font: var(--t-title-md); letter-spacing: .15px; margin: 24px 0 8px; color: var(--m-on-surface); }
.help .help-sec:first-of-type h3 { margin-top: 8px; }
/* the two parts (everyone / manager) are M3 list subheaders above their drawers */
.help h3.help-part { font: var(--t-title-sm); letter-spacing: .1px; color: var(--m-primary); margin: 24px 0 4px; text-transform: none; }
.help h3.help-part[hidden] { display: none; }
.help details.acc[hidden] { display: none; }
.help .acc-body .help-sec h3 { font: var(--t-title-sm); letter-spacing: .1px; margin: 0 0 4px; }
.help .acc-body .help-sec + .help-sec { margin-top: 16px; }
.help .acc-body { padding: 4px 0 16px; }
.hist-filter { margin-top: 12px; }
.hist { margin-top: 8px; max-height: 260px; overflow-y: auto; background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 8px 16px; font: var(--t-body-sm); letter-spacing: .4px; }
.hist-row + .hist-row { border-top: 1px solid var(--m-outline-variant); }
.hist-row { padding: 6px 0; }

/* Dialogs ----------------------------------------------------------------- */
.dialog { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0,0,0,.32); }
.dialog[hidden] { display: none; }
/* dialogs that open from inside another dialog sit above it */
#sprTypeDialog, #dayPickDialog, #whoDialog, #textDialog, #dialog { z-index: 34; }
.dialog-box {
  background: var(--m-surface-high); color: var(--m-on-surface); border-radius: var(--m-radius-xl); padding: 24px; width: min(560px, 92vw); min-width: min(280px, 92vw);
  max-height: calc(100% - 24px - var(--safe-t) - var(--safe-b)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  box-shadow: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.3);
}
@media (min-width: 641px) { .dialog-box { width: min(420px, 92vw); } }
.dialog-title { margin: 0 0 16px; font: var(--t-headline-sm); letter-spacing: 0; color: var(--m-on-surface); }
.dialog-text, .dialog-box p { margin: 0 0 16px; font: var(--t-body-md); letter-spacing: .25px; color: var(--m-on-surface-variant); }
.dialog-box .hint { font: var(--t-body-sm); letter-spacing: .4px; }
.dialog-box .tf:not(.dialog-box > .tf) { margin-bottom: 16px; }   /* nested groups only; direct children use the system */
.dialog-box .tf + .hint { margin-top: -12px; padding: 0 16px; }
.dialog-box > *:last-child { margin-bottom: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.dialog-actions .btn.text { padding: 0 12px; }
.photo-row { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
#inSprinkler { margin-bottom: 12px; }
#inSprinkler .tf:last-child { margin-bottom: 0; }
.photo-row .hint { margin: 0 0 0 4px; }
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.photo-strip:empty { display: none; }
.thumb { position: relative; width: 64px; height: 64px; }
.thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--m-radius-sm); display: block; }
.thumb .xbtn { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: var(--m-primary); color: var(--m-on-primary); }
.thumb .xbtn svg { width: 14px; height: 14px; }
.photo-gallery { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.photo-gallery:empty { display: none; }
.photo-gallery img { display: block; width: 100%; border-radius: var(--m-radius-md); background: var(--backdrop); }
.note-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.note-row p { margin: 0; flex: 1; color: var(--m-on-surface); font: var(--t-body-lg); letter-spacing: .5px; }
.note-row .btn { flex: none; margin-top: -10px; }
#pvNote { white-space: pre-wrap; word-wrap: break-word; }
.edit-actions { margin-bottom: 8px; gap: 8px; }

/* Material 3 menu (contextual, on shapes) --------------------------------- */
.menu {
  position: absolute; z-index: 35; min-width: 200px; max-width: 280px; padding: 8px 0;
  background: var(--m-surface-high); border-radius: var(--m-radius-xs); color: var(--m-on-surface);
  box-shadow: 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3); max-height: 70vh; overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu-head { padding: 8px 12px 4px; font: var(--t-label-sm); letter-spacing: .5px; color: var(--m-on-surface-variant); }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; border: 0; background: transparent; color: var(--m-on-surface); font: var(--t-label-lg); letter-spacing: .1px; text-align: left; cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: rgba(28,28,28,.08); }
.menu-item .mi { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--m-on-surface-variant); }
.menu-item .mi svg { width: 20px; height: 20px; fill: currentColor; }
.menu-item.checked .mi { color: var(--m-primary); }
.menu-item.danger { color: var(--m-error); }
.menu-item.danger .mi { color: var(--m-error); }
.menu-item:disabled { color: rgba(28,28,28,.38); cursor: default; }
.menu-div { height: 1px; background: var(--m-outline-variant); margin: 8px 0; }

/* Snackbar (toast) --------------------------------------------------------- */
.toast {
  position: absolute; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%);
  background: var(--m-inverse-surface); color: var(--m-inverse-on-surface); padding: 14px 16px; border-radius: var(--m-radius-xs); font: var(--t-body-md); letter-spacing: .25px; z-index: 40;
  max-width: min(560px, 90vw); text-align: left; box-shadow: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
}
.toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .settings { transition: none; } }

/* Phase 2 ------------------------------------------------------------- */
.ghost { position: absolute; border: 3px solid #FF973D; box-shadow: 0 0 0 2px rgba(23,61,82,.6); cursor: grab; touch-action: none; }
.ghost img { display: block; width: 100%; height: 100%; opacity: .6; pointer-events: none; -webkit-user-drag: none; }
.app[data-calib="1"] .zone-shape { pointer-events: none; }
.pane-picker { display: inline-flex; gap: 6px; }

/* Dashboard (manager) ---------------------------------------------------- */
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-tile { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 16px; cursor: pointer; }
.dash-tile.warn { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.dash-tile.bad { background: #F9DEDC; color: #410E0B; }
.dash-tile .n { font: var(--t-headline-sm); letter-spacing: 0; }
.dash-tile .l { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.dash-tile.warn .l, .dash-tile.bad .l { color: inherit; opacity: .8; }
.dash-row { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dash-row .txt-col { flex: 1; min-width: 0; }
.dash-row .t { font: var(--t-title-sm); letter-spacing: .1px; display: flex; align-items: center; gap: 8px; }
.dash-row .t .sum { margin-left: auto; font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); white-space: nowrap; }
.dash-row .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.dash-row .cnt.bad { color: var(--m-error); }
.dash-bar { height: 6px; border-radius: var(--m-radius-full); background: var(--m-surface-highest); overflow: hidden; margin-top: 6px; }
.dash-bar > div { height: 100%; background: var(--m-primary); border-radius: var(--m-radius-full); }
.dash-chip { display: inline-block; font: var(--t-label-sm); letter-spacing: .5px; padding: 1px 8px; border-radius: var(--m-radius-full); background: var(--m-surface-highest); color: var(--m-on-surface-variant); }
.dash-chip.bad { background: #F9DEDC; color: #410E0B; }

/* Georeference control points (home map) --------------------------------- */
.geopt { cursor: pointer; }
.geopt .geo-hit { fill: transparent; }
.geopt .geo-ring { fill: rgba(255,255,255,.35); stroke: #A107A9; stroke-width: 2; vector-effect: non-scaling-stroke; }
.geopt .geo-cross { stroke: #A107A9; stroke-width: 2; vector-effect: non-scaling-stroke; }
.geopt.sel .geo-ring { fill: rgba(161,7,169,.35); stroke-width: 3; }
.geopt .geo-label { fill: #FFFFFF; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 3px; font-weight: 500; pointer-events: none; }

/* Site settings: zone rows -------------------------------------------------- */
.site-zones { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.site-zone { display: flex; align-items: center; gap: 8px; }
.site-zone .tf { flex: 1; min-width: 0; margin: 0; }
.site-zone input[type="color"] { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; flex: none; padding: 0; border: 1px solid var(--m-outline); border-radius: var(--m-radius-full); background: none; cursor: pointer; }
.site-zone input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.site-zone input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--m-radius-full); }
.site-zone .btn.text { padding: 0 8px; flex: none; }
.site-zone .xbtn { width: 40px; height: 40px; flex: none; }
.site-zone .xbtn svg { width: 20px; height: 20px; }

/* Manager settings accordion (M3 expandable list items) ------------------- */
.acc { border-top: 1px solid var(--m-outline-variant); }
.acc:last-of-type { border-bottom: 1px solid var(--m-outline-variant); }
.acc-head { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 8px 8px 0; cursor: pointer; list-style: none; border-radius: var(--m-radius-sm); }
.acc-head::-webkit-details-marker { display: none; }
.acc-head:hover { background: rgba(28,28,28,.06); }
.acc-head:focus-visible { outline: 2px solid var(--m-primary); outline-offset: -2px; }
.acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-title { font: 600 15px/22px var(--font); letter-spacing: .1px; color: var(--m-on-surface); }   /* one point over title-small so drawers read as headings */
.acc-sub { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.acc-chev { width: 24px; height: 24px; fill: var(--m-on-surface-variant); flex: none; transition: transform .2s cubic-bezier(.2,0,0,1); }
.acc[open] > .acc-head .acc-chev { transform: rotate(180deg); }
.acc[open] > .acc-head { border-radius: var(--m-radius-sm) var(--m-radius-sm) 0 0; }
.acc-body { padding: 8px 0 24px; }
.acc-body > .srow:last-child { margin-bottom: 0; }
#managerPanel > .srow { margin-top: 24px; }
#dashDrawers { margin: 0 0 16px; }

/* Notification rules ------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.srow-label { display: block; font: var(--t-title-sm); letter-spacing: .1px; color: var(--m-on-surface-variant); margin: 16px 0 4px; }
.rule-card { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rule-card .txt-col { flex: 1; min-width: 0; }
.rule-card .t { font: var(--t-title-sm); letter-spacing: .1px; }
.rule-card .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }

/* Surveys ------------------------------------------------------------------ */
.stars { display: flex; gap: 4px; justify-content: center; margin: 4px 0 16px; }
.star { width: 48px; height: 48px; border: 0; background: transparent; border-radius: var(--m-radius-full); color: var(--m-outline); cursor: pointer; display: grid; place-items: center; }
.star svg { width: 32px; height: 32px; fill: currentColor; }
.star.lit { color: #E0A100; }
.star:hover { background: rgba(28,28,28,.06); }
.star:focus-visible { outline: 2px solid var(--m-primary); outline-offset: -2px; }
.dialog-box textarea { min-height: 96px; }
.camp-card { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.camp-card .txt-col { flex: 1; min-width: 0; }
.camp-card .t { font: var(--t-title-sm); letter-spacing: .1px; display: flex; align-items: center; gap: 8px; }
.camp-card .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.status { font: var(--t-label-sm); letter-spacing: .5px; padding: 1px 8px; border-radius: var(--m-radius-full); background: var(--m-surface-highest); color: var(--m-on-surface-variant); }
.status.live { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.status.closed { background: #F9DEDC; color: #410E0B; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: 8px 0 0; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bars .bar > i { display: block; width: 100%; background: var(--m-primary); border-radius: var(--m-radius-xs) var(--m-radius-xs) 0 0; min-height: 2px; }
.bars .bar > b { font: var(--t-label-sm); letter-spacing: .5px; color: var(--m-on-surface-variant); }
.bars .bar > span { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface); }
.chart-title { font: var(--t-title-sm); letter-spacing: .1px; color: var(--m-on-surface-variant); margin: 16px 0 0; }
.chip.on { background: var(--m-secondary-container); color: var(--m-on-secondary-container); border-color: transparent; }
.resp { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 16px; }
.resp .meta { font: var(--t-label-sm); letter-spacing: .5px; color: var(--m-on-surface-variant); display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.resp .meta .mini { color: #E0A100; letter-spacing: 0; }
.resp .meta .btn { margin-left: auto; }
.resp p { margin: 0; font: var(--t-body-md); letter-spacing: .25px; }
#surveyResults .instr-list { margin-top: 12px; }
#surveyKpis { margin-bottom: 16px; }
#surveyCharts { margin-bottom: 16px; }
#surveyTopics { margin-bottom: 16px; }
#authorIssues { margin-top: 12px; }
#issueFilters { margin-bottom: 12px; }

/* Peek: a small marker's label enlarged while hovered or pressed */
/* the enlarged label lives on its own top layer that never takes the pointer; the shape underneath keeps its stack place */
.peek-layer, .peek-layer * { pointer-events: none !important; cursor: default; }
.peek-layer text { text-anchor: middle; }
.peek-layer .peek-plate { fill: rgba(23,61,82,.92); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.peek-layer .peek-plate ~ text.date, .peek-layer .peek-plate ~ text.who { fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 2px; }
.peek-layer g.label .pill { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); stroke-width: 1; }
.peek-layer .asg circle { stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.feat.peek-label g.label, .feat.peek-label text.date, .feat.peek-label text.who { opacity: 0; }   /* the original label hides while its copy shows */
.feat.peek-badges .asg { opacity: 0; }

/* Plans --------------------------------------------------------------------- */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 16px; }
.plan { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 16px; border: 1px solid transparent; }
.plan.current { border-color: var(--m-primary); }
.plan .ph { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.plan .ph .n { font: var(--t-title-md); letter-spacing: .15px; }
.plan .ph .p { margin-left: auto; font: var(--t-title-sm); letter-spacing: .1px; color: var(--m-on-surface-variant); }
.plan ul { margin: 4px 0 12px; padding-left: 18px; font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.plan li { margin: 2px 0; }
.plan .btn { width: 100%; justify-content: center; }
.lic-card { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lic-card .txt-col { flex: 1; min-width: 0; }
.lic-card .t { font: var(--t-title-sm); letter-spacing: .1px; display: flex; align-items: center; gap: 8px; }
.lic-card .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }

/* Stack order list (Drawing) */
.stack-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.stack-row { display: flex; align-items: center; gap: 4px; background: var(--m-surface-high); border-radius: var(--m-radius-sm); padding: 4px 4px 4px 16px; min-height: 48px; }
.stack-row .nm { flex: 1; font: var(--t-body-lg); letter-spacing: .5px; }
.stack-row .xbtn { width: 40px; height: 40px; }
.stack-row .xbtn svg { width: 24px; height: 24px; fill: currentColor; }
.stack-row .xbtn:disabled { opacity: .3; }

/* How-to videos ------------------------------------------------------------- */
.howto { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 16px; }
.howto .hh { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.howto .hh .play { width: 40px; height: 40px; border-radius: var(--m-radius-full); background: var(--m-primary); color: var(--m-on-primary); display: grid; place-items: center; flex: none; }
.howto .hh .play svg { width: 22px; height: 22px; fill: currentColor; }
.howto .hh .txt-col { flex: 1; min-width: 0; }
.howto .hh .t { font: var(--t-title-sm); letter-spacing: .1px; }
.howto .hh .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.howto .yt { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 12px; border-radius: var(--m-radius-sm); overflow: hidden; background: #000; }
.howto .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.howto .hb { display: flex; gap: 4px; margin-top: 8px; }
.howto .hb .btn { padding: 0 12px; }
.instr .howto-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: var(--t-label-lg); letter-spacing: .1px; color: var(--m-primary); background: transparent; border: 0; cursor: pointer; padding: 0; }
.instr .howto-link svg { width: 18px; height: 18px; fill: currentColor; }

/* Feedback, issues, organizations ------------------------------------------ */
.issue { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.issue .txt-col { flex: 1; min-width: 0; }
.issue .t { font: var(--t-title-sm); letter-spacing: .1px; display: flex; align-items: center; gap: 8px; }
.issue .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.prio { font: var(--t-label-sm); letter-spacing: .5px; padding: 1px 8px; border-radius: var(--m-radius-full); color: #fff; }
.prio.p1 { background: #B3261E; } .prio.p2 { background: #E05A00; } .prio.p3 { background: #7A6A00; } .prio.p4 { background: #5C6B73; }
.issue.done { opacity: .6; }
.crew-health { background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.crew-health .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.crew-health .dot.g { background: #2E7D32; } .crew-health .dot.y { background: #E0A100; } .crew-health .dot.r { background: #B3261E; }
.crew-health .txt-col { flex: 1; min-width: 0; }
.crew-health .t { font: var(--t-title-sm); letter-spacing: .1px; }
.crew-health .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 56px; flex: none; }
.spark i { display: block; flex: 1; background: var(--m-primary); border-radius: 1px; min-height: 2px; }
.member { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 40px; font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.member .nm { flex: 1; color: var(--m-on-surface); font: var(--t-body-md); letter-spacing: .25px; }

/* Custom categories: outline color from the category; icon picker ------------ */
.feat.custom .outline { stroke: var(--c-self, #fff); }
.btn[data-tool^="c_"] svg { color: var(--c-self, currentColor); }
.icon-pick .chip { padding: 0 8px; height: 40px; display: inline-flex; align-items: center; }
.icon-pick .chip svg { width: 28px; height: 28px; fill: var(--m-on-surface-variant); }
.icon-pick .chip.on svg { fill: var(--m-on-secondary-container); }
/* category card: icon and title on the first line, the description across the full width, the actions beneath */
.cat-row { display: grid; grid-template-columns: 36px 1fr; grid-template-areas: "ic title" "desc desc" "acts acts"; column-gap: 12px; row-gap: 4px; background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 12px 4px; }
.cat-row .ic { grid-area: ic; }
.cat-row .txt-col { display: contents; }
.cat-row .t { grid-area: title; align-self: center; }
.cat-row .cnt { grid-area: desc; }
.cat-row .cat-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -12px; }
.cat-row .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--plate); display: grid; place-items: center; flex: none; }
.cat-row .ic svg { width: 36px; height: 36px; fill: currentColor; }
.cat-row .txt-col { flex: 1; min-width: 0; }
.cat-row .t { font: var(--t-title-sm); letter-spacing: .1px; display: flex; align-items: center; gap: 8px; }
.cat-row .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.cat-row.hidden-cat { opacity: .55; }
.ai-row { display: flex; align-items: flex-start; gap: 12px; background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px 16px; }
.ai-row .chk { margin: 0; }
.dialog-box .color-row + .color-row { margin-top: 8px; }
.dialog-box .color-row { margin-top: 8px; }

/* Picture loading state and the "only my work" banner --------------------- */
.pane.loading { background: #3a4a56; }
.loading-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(23,61,82,.85); color: #fff; font: var(--t-body-md); letter-spacing: .25px; padding: 8px 16px; border-radius: var(--m-radius-full); pointer-events: none; z-index: 2; }
.mine-banner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; background: var(--m-secondary-container); color: var(--m-on-secondary-container); border: 0; border-radius: var(--m-radius-full); padding: 8px 16px; font: var(--t-label-lg); letter-spacing: .1px; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.app[data-chrome="0"] .mine-banner { display: none; }

/* Assign work mode on the home map ----------------------------------------- */
.map-fabs { position: absolute; top: 8px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 15px; }   /* the buttons sit 15px apart whatever their widths */
.app[data-chrome="0"] .map-fabs { display: none; }
.fab-assign { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: var(--m-radius-full); background: var(--m-primary); color: var(--m-on-primary); font: var(--t-label-lg); letter-spacing: .1px; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.fab-assign svg { width: 20px; height: 20px; fill: currentColor; }
.fab-assign.on { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.app[data-chrome="0"] .fab-assign { display: none; }
.progress-area.picked, .home-area.picked { stroke: #FFD24D; stroke-width: 3; stroke-dasharray: none; fill-opacity: .55; }
.progress-dot.picked, .home-dot.picked { stroke: #FFD24D; stroke-width: 3; }

/* Mow days ------------------------------------------------------------------ */
.mowday .outline { fill: var(--c-day); fill-opacity: .12; stroke: var(--c-day); stroke-width: 2.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; cursor: pointer; }
.mowday.done .outline { fill-opacity: .3; stroke-dasharray: none; }
.mowday .label .pill { fill: var(--paper); stroke: var(--c-day); stroke-width: 1.5; }
.mowday .label text { fill: var(--ink); font-weight: 600; }
.mowday.done .label .pill { fill: var(--c-day); }
.app[data-mine="1"] .mowday:not(.mine) { opacity: .28; }
.dot-sw { width: 14px; height: 14px; border-radius: 50%; flex: none; }

/* glyph inside round markers (sprinkler heads, trash cans, custom points) */
.feat .ptic { fill: var(--c-self, #fff); opacity: .95; pointer-events: none; stroke: rgba(0,0,0,.85); stroke-width: .6; paint-order: stroke; }
.feat.t-head .ptic { fill: var(--c-head, #8FD3FF); }
.feat.t-can .ptic { fill: var(--c-can, #F2F2F2); }
.feat.done .ptic { fill: var(--ink); opacity: .7; filter: none; }

/* Crew schedule ------------------------------------------------------------- */
.sched-wrap { overflow-x: auto; margin: 0 -24px 16px; padding: 0 24px; }
.sched { border-collapse: collapse; width: 100%; min-width: 520px; font: var(--t-body-md); letter-spacing: .25px; }
.sched th, .sched td { border-bottom: 1px solid var(--m-outline-variant); padding: 10px 8px; text-align: left; vertical-align: top; }
.sched th { font: var(--t-title-sm); letter-spacing: .1px; color: var(--m-on-surface-variant); cursor: pointer; white-space: nowrap; user-select: none; }
.sched th.on { color: var(--m-primary); }
.sched th.term { color: var(--m-primary); font: var(--t-title-md); letter-spacing: .15px; }
.sched td.nm { font: var(--t-title-sm); letter-spacing: .1px; white-space: nowrap; }
.sched td.hrs { cursor: pointer; }
.sched td.hrs:empty::after { content: "\2014"; color: var(--m-outline); }
.sched .today { background: rgba(23,61,82,.06); }
.sched td.focus, .sched th.on { background: rgba(23,61,82,.10); }
.sched td.now { background: var(--m-secondary-container); color: var(--m-on-secondary-container); border-radius: var(--m-radius-sm); font-weight: 500; }
.sched tr.me td.nm { color: var(--m-primary); }
#schedSort { margin-bottom: 12px; }
#schedDays .tf { margin-bottom: 12px; }

/* Home map: assignment badges are hidden; hovering or pressing shows one pill with who is assigned */
.app[data-view="home"] .mower .asg, .app[data-view="home"] .mowday .asg:not(.inpill) { display: none; }
.app[data-view="home"] .mower { pointer-events: auto; }
.app[data-zedit="1"] .who-layer { display: none; }
.who-layer { pointer-events: none; }
.who-layer .who-pill { fill: rgba(23,61,82,.94); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.who-layer .who-dot { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.who-layer .who-ini { fill: #fff; font-weight: 700; font-family: var(--font); }
.who-layer .who-text { fill: #fff; font-family: var(--font); font-weight: 500; }
.who-layer .who-sub { fill: rgba(255,255,255,.85); font-family: var(--font); font-weight: 600; }
.mowday .label .asg.inpill text { fill: #fff; font-weight: 700; font-family: var(--font); }
.mowday .label .asg.inpill circle { stroke: #fff; stroke-width: 1; }

/* Mow day outline editing */
.mowday .outline.sel { stroke: #FFD24D; stroke-width: 3; stroke-dasharray: none; }
.app[data-zedit="1"] .mowday .outline { pointer-events: auto; cursor: pointer; }
.cut-line { fill: none; stroke: #FFD24D; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.cut-pt { fill: var(--paper); stroke: #FFD24D; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.cut-pt.edge { fill: #FFD24D; }
.btn-col { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.btn-col .btn { justify-content: center; }

/* glyph at the middle of an unfinished area, in the area's outline color */
.feat .aric { fill: var(--c-self, currentColor); opacity: .9; pointer-events: none; stroke: rgba(0,0,0,.85); stroke-width: .6; paint-order: stroke; }
.feat.t-bed .aric { fill: var(--c-bed, #FFD24D); } .feat.t-mow .aric { fill: var(--c-mow, #7ED957); } .feat.t-leaves .aric { fill: var(--c-leaves, #F4A261); }
.feat.t-snow .aric { fill: var(--c-snow, #7EC8FF); } .feat.t-trash .aric { fill: var(--c-trash, #B388FF); } .feat.t-irrig .aric { fill: var(--c-irrig, #8FD3FF); } .feat.t-surface .aric { fill: var(--c-surface, #E8E0C8); }
.feat.t-fixture .ptic { fill: var(--c-fixture, #E8E0C8); }
.aric.home { fill: var(--c-out, #fff); opacity: .95; pointer-events: none; stroke: rgba(0,0,0,.85); stroke-width: .6; paint-order: stroke; }

/* hover-pill switch (computers only) */
.who-toggle { width: 40px; height: 40px; border: 0; border-radius: var(--m-radius-full); background: var(--m-surface-high); color: var(--m-on-surface-variant); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.who-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.who-toggle.on { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.app[data-chrome="0"] .who-toggle { display: none; }

/* Photo gallery items and the full-screen viewer -------------------------- */
.photo-gallery .gal-item { position: relative; display: inline-block; }
.photo-gallery .gal-item img { cursor: zoom-in; }
.gal-zoom, .gal-remove { position: absolute; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(23,61,82,.85); color: #fff; display: grid; place-items: center; cursor: pointer; }
.gal-zoom { right: 6px; bottom: 6px; } .gal-remove { right: 6px; top: 6px; background: rgba(179,38,30,.9); }
.gal-zoom svg, .gal-remove svg { width: 16px; height: 16px; fill: currentColor; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.94); display: grid; place-items: center; overflow: hidden; touch-action: none; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; transition: transform .05s linear; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lightbox img.zoomed { cursor: grab; }
.lb-bar { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; }
.lb-count { color: #fff; font: var(--t-label-lg); letter-spacing: .1px; margin-right: 8px; }
.lb-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-btn svg { width: 24px; height: 24px; fill: currentColor; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 40px; line-height: 1; border-radius: var(--m-radius-md); cursor: pointer; }
.lb-nav.prev { left: 8px; } .lb-nav.next { right: 8px; }

/* Crew schedule: the panel grows to fit the grid on wide screens, the grid tightens on tablets, and on phones the grid
   becomes one day at a time (chips pick the day) so nothing scrolls sideways */
#schedPanel { width: min(1080px, calc(100vw - 82px - 24px)); }
@media (max-width: 900px) { #schedPanel .sched { min-width: 0; font: var(--t-body-sm); letter-spacing: .4px; } #schedPanel .sched th, #schedPanel .sched td { padding: 8px 6px; } #schedPanel .sched td.hrs { white-space: normal; } }
@media (max-width: 640px) { #schedPanel { width: 100vw; max-width: 100vw; border-radius: 0; } }
.sched-days { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.sched-daylist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.sched-daylist .row { display: flex; align-items: center; gap: 12px; background: var(--m-surface-high); border-radius: var(--m-radius-sm); padding: 10px 12px; min-height: 48px; cursor: pointer; }
.sched-daylist .row.now { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.sched-daylist .row .nm { flex: 1; font: var(--t-title-sm); letter-spacing: .1px; }
.sched-daylist .row .hrs { font: var(--t-body-md); letter-spacing: .25px; text-align: right; }
.sched-daylist .row.off { opacity: .5; }

/* link preview inside the Details dialog */
#inLinkView { margin: 0 0 12px; }
#inLinkView .yt { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--m-radius-sm); overflow: hidden; background: #000; }
#inLinkView .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Accessibility (WCAG 2.2 AA) --------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* focus on map objects: a bright ring that contrasts with imagery and with the shape's own colors */
.feat:focus-visible, .prob:focus-visible, .mowday:focus-visible, .zone-shape:focus-visible, .home-area:focus-visible, .home-dot:focus-visible, .progress-area:focus-visible, .progress-dot:focus-visible, .zpt:focus-visible { outline: none; }
.feat:focus-visible .outline, .feat:focus-visible .done, .feat:focus-visible .hit { stroke: #FFD24D; stroke-width: 4px; vector-effect: non-scaling-stroke; }
.prob:focus-visible .ring, .mowday:focus-visible .outline, .zone-shape:focus-visible, .home-area:focus-visible, .progress-area:focus-visible, .home-dot:focus-visible, .progress-dot:focus-visible { stroke: #FFD24D !important; stroke-width: 4px !important; vector-effect: non-scaling-stroke; }
.zpt:focus-visible { stroke: #FFD24D; stroke-width: 4px; vector-effect: non-scaling-stroke; }
/* a dark casing under dashed outlines keeps them readable on any imagery (1.4.11) */
/* The casing is the dark halo drawn under a to-do outline so it reads on pale ground. Its width is
   compensated in JS (3.5 / S.zoom, in user units) exactly as .feat .outline is, so it must NOT also
   be non-scaling: the two corrections stacked and the halo ballooned when zoomed out (v3.22.1). */
.feat .casing { fill: none; stroke: rgba(0,0,0,.55); stroke-linejoin: round; pointer-events: none; }
/* home-map outlines get a dark casing by a second stroke underneath (see homeCasing in app.js), not a filter */
.home-casing { fill: none; stroke: rgba(0,0,0,.55); stroke-width: 3.5; stroke-linejoin: round; pointer-events: none; }
/* edge dots: 24px targets, drawn light so they do not shout */
.zmid { fill-opacity: .55; }
/* gallery buttons at 32px (2.5.8) */
.gal-zoom, .gal-remove { width: 32px; height: 32px; }
.gal-zoom svg, .gal-remove svg { width: 18px; height: 18px; }
/* the hover pill can be hovered itself without vanishing (1.4.13) */
.who-layer .who-pill { pointer-events: auto; }
/* rail labels may wrap and the rail may grow when text is enlarged (1.4.4 / 1.4.10) */
.rail { width: max(82px, 5.2em); }
.rail-lbl { white-space: normal; text-align: center; line-height: 1.1; }
/* menus: visible focus */
.menu-item:focus-visible { outline: 2px solid var(--m-primary); outline-offset: -2px; background: var(--m-surface-highest); }

/* skip link (2.4.1): hidden until focused */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--m-primary); color: var(--m-on-primary); padding: 10px 16px; border-radius: var(--m-radius-full); font: var(--t-label-lg); text-decoration: none; }
.skip-link:focus { top: 8px; outline: 2px solid #FFD24D; outline-offset: 2px; }

/* Checklists */
.check-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.check-item { align-items: flex-start; padding: 10px 8px; border-radius: var(--m-radius-sm); background: var(--m-surface-high); margin: 0; }
.check-item.on { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.check-item .check-text { display: flex; flex-direction: column; gap: 2px; font: var(--t-body-md); letter-spacing: .25px; }
.check-item .check-sub { font: var(--t-label-sm); letter-spacing: .5px; color: var(--m-on-surface-variant); }
.check-item.on .check-sub { color: inherit; opacity: .8; }
.feat.t-shop .aric { fill: var(--c-shop, #FFE082); } .feat.t-asset .ptic { fill: var(--c-asset, #FFE082); }

/* Standards drawer / dialog */
.std-intro { font: var(--t-body-md); letter-spacing: .25px; color: var(--m-on-surface); margin: 4px 0 12px; }
.std-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.std-list li { position: relative; padding: 6px 12px 6px 28px; font: var(--t-body-md); letter-spacing: .25px; }
.std-list li::before { content: ""; position: absolute; left: 12px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--m-on-surface); }
#inStdAcc { margin: 0 0 12px; }
#stdBody { max-height: 60vh; overflow: auto; margin-bottom: 8px; }

/* Rail groups (Figma Closed / Opened Left Nav): text-only heading rows. Folded: 49px with a rule below in the icon
   navy at 25%. Open: 41px heading, then its items at 74px. One group open at a time. */
.rail-head { min-height: 53px; font-size: 15px; }   /* the heading is one point larger than the labels' 14 */
.rail-group { display: flex; align-items: center; justify-content: center; width: 100%; height: 49px; border: 0; border-bottom: 1px solid rgba(23,61,82,.25); background: transparent; color: var(--ink); padding: 0; cursor: pointer; font: 700 14px/1 var(--font); letter-spacing: .1px; }
.rail-group { font-weight: 500; }
.rail-group.open { border-bottom-color: transparent; }   /* same 49px whether open or folded, so nothing shifts on a tap */
.rail-group.open, .rail-group.holds { font-weight: 700; }   /* the open group, and a folded one holding the current tab or filter, are bold */
.rail-group:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.rail-open { display: flex; flex-direction: column; }
.rail-open + .rail-group { border-top: 1px solid rgba(23,61,82,.25); }

/* pinned items sit under the heading; a rule separates them from the group headings (Figma LeftNav_Area) */
.rail-pinned { display: flex; flex-direction: column; padding-bottom: 20px; }   /* 20px between the last pinned label and the first heading's rule */
.rail-pinned:not(:empty) + .rail-group { border-top: 1px solid rgba(23,61,82,.25); }
/* left-bar editor in Settings */
.rail-sec { display: flex; align-items: center; gap: 4px; margin: 12px 0 4px; }
.rail-sec .nm { flex: 1; font: var(--t-title-sm); letter-spacing: .1px; }
.stack-row .ic { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--plate); display: grid; place-items: center; flex: none; }
.stack-row .ic svg { width: 28px; height: 28px; fill: currentColor; }
.stack-row .move { height: 36px; border: 1px solid var(--m-outline); border-radius: var(--m-radius-xs); background: var(--m-surface); color: var(--m-on-surface); font: var(--t-body-sm); padding: 0 6px; max-width: 110px; }

/* the list under All: plain text like the Zones list; a hidden category is lightened to 70% (white on the navy stays
   well above 4.5:1) and labeled "hidden" */
.sub-item.all-item { display: flex; align-items: center; gap: 8px; }
.sub-item.all-item.off { opacity: .7; }
.sub-item .sub-state { margin-left: 8px; font-size: 10px; font-weight: 500; }

/* Webcam viewer: covers the map while on; black with "Webcam Off" otherwise */
.cam { position: absolute; inset: 0; z-index: 5; background: #000; color: #fff; display: flex; flex-direction: column; }
.cam[hidden] { display: none; }
.cam-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 48px; background: rgba(0,0,0,.6); }
.cam-bar .chips { margin: 0; }
.cam-bar .chip { color: #fff; border-color: rgba(255,255,255,.5); }
.cam-bar .chip.on { background: rgba(255,255,255,.18); color: #fff; }
.cam-status { font: var(--t-label-lg); letter-spacing: .1px; margin-left: auto; opacity: .9; }
.cam-stage { flex: 1; display: grid; place-items: center; overflow: hidden; }
.cam-frame, .cam-video, .cam-image { width: 100%; height: 100%; object-fit: contain; border: 0; background: #000; }
.cam-off { position: absolute; inset: 48px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font: 600 22px/1.2 var(--font); letter-spacing: .2px; color: #fff; }
.cam-off[hidden] { display: none; }
.cam-off svg { width: 96px; height: 96px; fill: #fff; opacity: .9; }
.app[data-cam="1"] .map-fabs, .app[data-cam="1"] .zoomstack, .app[data-cam="1"] .mine-banner { display: none; }

/* the drawing tools are children of the bar's wrapping flex, so they reflow onto as many lines as the width needs */
#toolButtons { display: contents; }
.edit-bar { max-height: min(60vh, 420px); overflow-y: auto; }
@media (max-width: 640px) { .edit-bar { right: 12px; padding: 10px 40px 10px 12px; gap: 6px; } .edit-bar .btn { padding: 0 12px; } }
@media (max-width: 380px) { .edit-bar { left: 86px; right: 8px; } }

/* Menus reflow: long labels wrap instead of overflowing; the menu never exceeds the screen and scrolls if it must */
.menu { max-width: min(360px, calc(100vw - 100px)); max-height: min(70vh, 520px); overflow-y: auto; }
.menu-item { white-space: normal; height: auto; min-height: 48px; padding: 10px 12px; line-height: 20px; align-items: flex-start; }
.menu-item svg { flex: none; margin-top: 0; }
.menu-item.divider { padding: 0; min-height: 0; }
.menu-head { white-space: normal; line-height: 16px; }

/* Assign dialog rows: name, the chosen day's hours, and the week in small text */
.assign-checks .assign-row { align-items: flex-start; }
.assign-checks .assign-row.off .assign-name { color: var(--m-on-surface-variant); }
.assign-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.assign-name { font: var(--t-body-lg); letter-spacing: .5px; }
.assign-day { font: var(--t-label-md); letter-spacing: .5px; color: var(--m-on-surface-variant); }
.assign-day.now { color: var(--m-primary); font-weight: 700; }
.assign-week { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); white-space: normal; }
#assignDays { margin-bottom: 8px; }
#assignDialog .dialog-box { max-height: 85vh; overflow: auto; }

.sub-rule { height: 1px; margin: 6px 18px; background: rgba(255,255,255,.25); }

/* First-run checklist */
.setup-bar { height: 6px; border-radius: 3px; background: var(--m-surface-highest); overflow: hidden; margin: 4px 0 8px; }
.setup-fill { height: 100%; background: var(--m-primary); transition: width .25s ease; }
.setup-step { display: flex; align-items: flex-start; gap: 12px; background: var(--m-surface-high); border-radius: var(--m-radius-md); padding: 12px; }
.setup-step .num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--m-surface-highest); color: var(--m-on-surface-variant); display: grid; place-items: center; font: var(--t-label-lg); }
.setup-step.done .num { background: var(--m-primary); color: var(--m-on-primary); }
.setup-step.done .num svg { width: 18px; height: 18px; fill: currentColor; }
.setup-step .t { font: var(--t-title-sm); letter-spacing: .1px; }
.setup-step .cnt { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.setup-step .btn { flex: none; }
/* Public progress page */
.public-view { position: fixed; inset: 0; z-index: 70; background: var(--m-surface); color: var(--m-on-surface); overflow: auto; padding: 24px; }
.public-view[hidden] { display: none; }
.public-head { max-width: 720px; margin: 0 auto 16px; }
.public-head h1 { font: var(--t-display-sm); letter-spacing: 0; margin: 0 0 4px; }
.public-sub { font: var(--t-body-md); letter-spacing: .25px; color: var(--m-on-surface-variant); }
.public-body { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.public-foot { max-width: 720px; margin: 24px auto 0; font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }

body.public-mode .app, body.public-mode .toast, body.public-mode .skip-link, body.public-mode .menu, body.public-mode .dialog { display: none !important; }
body.public-mode { background: var(--m-surface); }
.pub-h { font: var(--t-title-md); letter-spacing: .15px; margin: 8px 0 0; }
.dash-bar { height: 6px; border-radius: 3px; background: var(--m-surface-highest); overflow: hidden; margin-top: 6px; }
.dash-bar i { display: block; height: 100%; background: var(--m-primary); }

/* ---------------------------------------------------------------------------
   Panel spacing (Material Design 3). Every pair of neighbouring elements in a
   panel or dialog has ONE correct gap, enforced by dev/spacing-check.js:

     section to section .......................... 24px
     section label to what it labels ..............  8px
     helper text to the control it explains .......  8px
     control to helper text ....................... 12px
     control to control .......................... 16px
     stacked button to button ......................8px
     buttons in a row (flex gap) ...................8px
     anything unnamed ............................ 16px

   Nothing sets its own margin; new elements inherit these.
--------------------------------------------------------------------------- */
/* only the top-margin system governs: clear the older per-element bottom margins inside panels and dialogs */
.settings .srow > *, .dialog-box > *, .settings .acc-body > * { margin-bottom: 0; }
.settings .srow > * + *, .dialog-box > * + *, .settings .acc-body > * + * { margin-top: 16px; }
.settings .srow > label + *, .settings .srow > label.sub + *, .dialog-box > .dialog-title + *, .settings .acc-body > label + * { margin-top: 8px; }
.settings .srow > .hint + *, .dialog-box > .hint + *, .settings .acc-body > .hint + *, .dialog-box > .dialog-text + * { margin-top: 8px; }
.settings .srow > * + .hint, .dialog-box > * + .hint, .settings .acc-body > * + .hint, .settings .srow > .tf + .hint { margin-top: 12px; }
.settings .srow > * + label.sub { margin-top: 24px; }
.settings .srow > * + label.chk, .settings .acc-body > * + label.chk { margin-top: 16px; }
.settings .srow > .btn + .btn, .settings .acc-body > .btn + .btn, .dialog-box > .btn + .btn { margin-top: 8px; }
.settings .srow > .btn, .settings .acc-body > .btn { display: flex; width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.btn-row > .btn { margin-top: 0 !important; flex: 1 1 auto; justify-content: center; }
.settings .hint, .dialog-box .hint { margin-bottom: 0; }
.settings .acc-body > .srow { margin-bottom: 0; }
.settings .acc-body > .srow + .srow { margin-top: 24px; }
.settings .range-label + input[type="range"] { margin-top: 8px; }
.dialog-box > .dialog-actions { margin-top: 24px; }
.settings input[type="range"] + .hint { margin-top: 8px; }

/* Rail hover (Figma LeftNavHover): the same block that marks the current item, in a lighter grey, on hover only.
   Pointer devices only, so a tap on a phone never leaves an item looking chosen. */
@media (hover: hover) {
  .rail-item:hover:not(.on) { background: #CECECE; }
  .rail-group:hover { background: #CECECE; }
  .sub-item:hover:not(.on) { background: #112E3E; }
}
.rail-item:focus-visible:not(.on) { background: #CECECE; }
.rail-group:focus-visible { background: #CECECE; }
.sub-item:focus-visible:not(.on) { background: #112E3E; }
.rail-item, .rail-group, .sub-item { transition: background .12s ease; }
@media (prefers-reduced-motion: reduce) { .rail-item, .rail-group, .sub-item { transition: none; } }

/* A feature this site's profile does not include: hidden here as well as by the
   hidden attribute, so nothing that toggles visibility can bring it back. */
[data-feat-off] { display: none !important; }

/* Manager settings are gathered under a few headings so the panel opens short. A group is an
   accordion of accordions: the same control at both levels, one indent apart. */
/* A heading is a drawer that holds drawers, so it is drawn like one: same left edge, same rule
   between neighbours, same 64px M3 list rhythm. The only difference is the weight of its title. */
.setgrp { border-top: 1px solid var(--m-outline-variant); margin: 0; }
.setgrp:last-of-type { border-bottom: 1px solid var(--m-outline-variant); }
.setgrp > summary { list-style: none; cursor: pointer; padding: 8px 8px 8px 0; min-height: 64px;
  display: flex; align-items: center; gap: 16px; border-radius: var(--m-radius-sm); }
.setgrp > summary:hover { background: rgba(28,28,28,.06); }
.setgrp > summary::-webkit-details-marker { display: none; }
.setgrp > summary:focus-visible { outline: 3px solid var(--m-focus, #8ab4f8); outline-offset: 2px; }
.setgrp .grp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* M3 does not distinguish a parent from its children by size: type roles carry meaning, so shrinking
   a heading to show it is a heading says the opposite of what is meant. Hierarchy comes from position
   and emphasis instead — the parent keeps the same type as its children, and the children step in by
   one leading-slot width (24dp, what a list item's leading icon occupies) with their rules stepping in
   with them, which is M3's inset divider. A child's rule visibly starts after its parent's, so the
   parent is the only heading touching the left edge and is findable however deep the list gets. */
.setgrp .grp-title { font: 600 15px/22px var(--font); letter-spacing: .1px; color: var(--m-on-surface); }
.setgrp .grp-sub { font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); }
.setgrp .grp-chev { margin-left: auto; flex: none; fill: var(--m-on-surface-variant); transition: transform .15s ease; }
.setgrp[open] > summary .grp-chev { transform: rotate(180deg); }
/* the drawers inside sit on the same left edge as the heading above them; the rule on the first
   one is what separates it from the heading, so the body adds no padding of its own */
.setgrp > .grp-body { padding: 0 0 0 24px; }
/* a run of drawers inside a heading keeps its own rules, but the last one does not double up with
   the heading's bottom rule */
.setgrp > .grp-body > .acc:last-of-type { border-bottom: 0; }
.setsearch { margin: 0 0 12px; }

/* ---------- the panel system, at a panel's own top level ----------
   Inside a sheet, a .srow is a section and sections are 24 apart. At a panel's top level the rows
   ARE the layout, so they take the panel rhythm of 16 — which is also what the opening view of
   Settings is: a search field, a drawer, and a button, three separate things rather than a list.

   Rhythm from the top margin only, with the bottom margins zeroed, so a row's own spacing cannot
   fight the rule. The head owns its padding. Supporting text keeps M3's 4dp under its field, a
   hint keeps 12 after anything else, and the copyright line stays with the version above it. */
.settings > * { margin-bottom: 0; }
.settings > * + * { margin-top: 16px; }
/* drawers in a run touch: the rule between them is the separator, and a gap would break the list */
.settings > .acc + .acc { margin-top: 0; }
.settings > * + .hint { margin-top: 12px; }
.settings > .tf + .hint { margin-top: 4px; }
.settings > * + .settings-foot.copy { margin-top: 4px; }
.settings > .settings-head + * { margin-top: 0; }
.settings > .setup-bar { margin: 16px 0 0; }
#dashDrawers { margin: 16px 0 0; }
.sched-wrap { margin: 16px -24px 0; padding: 0 24px; }
#schedSort { margin-bottom: 0; }
.help-search { margin-bottom: 0; }
/* a row whose only control is hidden should not hold a gap open */
#settings > #joinRow:has(> button[hidden]) { display: none; }
#settings > #acc-me { border-top: 0; border-bottom: 0; }
#settings > #acc-me .acc-head { min-height: 64px; }

/* M3 puts a text field's supporting text 4dp under the field, insetting it 16dp to line up with
   the field's own text. The panel system's general "12px before a hint" is right for a hint that
   follows a button or a checkbox, and wrong for one that belongs to the field above it: at 12dp the
   supporting text reads as a separate paragraph rather than as part of the field. */
.settings .srow > .tf + .hint,
.settings .acc-body > .tf + .hint,
.dialog-box > .tf + .hint { margin-top: 4px; padding: 0 16px; }
#settings > #joinRow:empty, #settings > #joinRow:has(> button[hidden]) { margin-bottom: 0; }

/* Whether a crew member can actually be reached, said on their row in the crew list. */
.crew-reach { margin-left: auto; font: var(--t-body-sm); letter-spacing: .4px; color: var(--m-on-surface-variant); white-space: nowrap; }
.crew-reach.off { color: var(--m-error); }

/* How much work the person on this phone still has to do, on the Instructions item in the left bar.
   Counted rather than unread, so it clears when the work is done. */
.rail-ic .count { position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--m-error); color: #fff; font: 600 11px/18px var(--font);
  text-align: center; box-sizing: border-box; pointer-events: none; }

/* What is drawn: zones down the side, kinds across the top. Scrolls sideways inside its own wrapper
   so a site with many categories never makes the panel itself scroll. */
.table-wrap { overflow-x: auto; margin: 0; }
.drawn-table { border-collapse: collapse; width: 100%; font: var(--t-body-sm); letter-spacing: .4px; }
.drawn-table th, .drawn-table td { padding: 8px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--m-outline-variant); }
.drawn-table th:first-child, .drawn-table td:first-child { text-align: left; position: sticky; left: 0;
  background: var(--m-surface); }
.drawn-table thead th { font-weight: 600; color: var(--m-on-surface); }
.drawn-table tbody td { color: var(--m-on-surface-variant); }
.drawn-table td.has { color: var(--m-on-surface); font-weight: 600; }
.drawn-table tfoot td { font-weight: 600; color: var(--m-on-surface); border-bottom: 0; }
.drawn-table td.none { opacity: .35; }

/* "Show these on the home map": a few seconds of a colour that does not occur in aerial imagery,
   pulsing so it reads against grass, asphalt and roof alike. */
.drawn-table td.tap { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.drawn-table td.tap:focus-visible { outline: 3px solid var(--m-focus, #8ab4f8); outline-offset: -3px; }
.flash { stroke: #FF00E5 !important; stroke-width: 4px !important; stroke-dasharray: none !important;
  animation: flashPulse 1s ease-in-out 0s 3; }
/* a point marker is small, so it also grows while it flashes or the colour has nothing to sit on */
circle.flash { r: 13; transition: r .15s; }
@keyframes flashPulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) { path.flash { animation: none; } }

/* a room's name, on the outline, readable on a pale floor plan and on the waiting grid alike */
.room-name { text-anchor: middle; font-family: var(--font); font-weight: 600; fill: var(--m-on-surface); paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

/* a floor heading in the rooms list */
.sub-head { padding: 12px 12px 4px; font: var(--t-label-md, 600 11px/16px var(--font)); letter-spacing: .5px; text-transform: uppercase; color: var(--m-on-surface-variant); opacity: .8; }

/* the instruction a notification pointed at: a brief outline in the flash colour, then gone */
.instr.flash-row { outline: 3px solid #FF00E5; outline-offset: 2px; animation: flashPulse 1s ease-in-out 0s 3; }

/* a toast that waits: text, then a button that does the thing, then a dismiss */
.toast.sticky { display: flex; align-items: center; gap: 8px; padding-right: 8px; z-index: 40; }
.toast.sticky .btn.text { color: var(--m-inverse-primary, #9FD1FF); min-height: 36px; }

/* Your work: the zone line reads as a heading, its assignments sit under it */
.mine-row.row-head { background: transparent; border-bottom: 0; padding-bottom: 4px; }
.mine-row.row-head .instr-text { font-weight: 600; color: var(--m-on-surface); }
.mine-row.row-item { margin-left: 16px; }
.instr-go { margin-top: 6px; }

/* a crew member who is away: still listed, plainly not current */
/* Crew list, as an M3 two-line list item: a leading colour, the name with its status beneath it, and
   one trailing action. The 56dp height and the 16dp gutters are M3's; what changed is that four text
   buttons became one overflow, which is what stops the name wrapping in a 360px panel. */
.crew-item { min-height: 56px; gap: 16px; padding: 8px 4px 8px 16px; }
.crew-item .crew-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.crew-item .crew-name { flex: none; font: var(--t-body-lg); letter-spacing: .15px; color: var(--m-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-item .crew-reach { margin-left: 0; font: var(--t-body-sm); letter-spacing: .4px; }
.crew-item .crew-more { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--m-on-surface-variant); cursor: pointer; }
.crew-item .crew-more svg { width: 20px; height: 20px; fill: currentColor; }
.crew-item .crew-more:hover { background: color-mix(in srgb, var(--m-on-surface) 8%, transparent); }
.crew-item .crew-more:focus-visible { outline: 3px solid var(--m-primary); outline-offset: -3px; }
/* a crew member who is away: still listed, plainly not current */
.crew-item.away .crew-name { opacity: .55; }
.crew-item.away .crew-reach::after { content: " \00b7 away"; }