/* Nyanda Station Book. Built for a phone in the sun, with gloves on: big targets,
   strong contrast, a word with every colour. Station green rather than the Field
   Catalogue's cream and teal, so the two apps are never confused. */
:root {
  --sans: system-ui, -apple-system, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --serif: var(--sans);
  --paper: #FFFFFF; --card: #F1F4F0; --ink: #14211C; --ink2: #44544C; --line: #C9D3CC;
  --teal: #1D6B57; --on-teal: #FFFFFF; --orange: #E89B3C; --on-orange: #14211C;
  --head: #173F36; --on-head: #FFFFFF; --mapbg: #CFD6CC;
  --u-red: #C62828; --u-yellow: #F2B705; --u-green: #2E7D32; --u-grey: #7A8580;
  --gate-open: #1565C0; --gate-shut: #E65100;
  --shadow: 0 1px 2px rgba(20, 33, 28, .2), 0 3px 12px rgba(20, 33, 28, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #101814; --card: #19251F; --ink: #EAF1EC; --ink2: #A9BAB1; --line: #2E3E36; --teal: #74CDAE; --on-teal: #0C1612; --head: #0C1612; --on-head: #EAF1EC; --mapbg: #26332C; --red: #FF8A80; --warn-bg: #3A2F12; --warn-ink: #F6D58C; }
}
:root[data-theme="dark"] { --paper: #101814; --card: #19251F; --ink: #EAF1EC; --ink2: #A9BAB1; --line: #2E3E36; --teal: #74CDAE; --on-teal: #0C1612; --head: #0C1612; --on-head: #EAF1EC; --mapbg: #26332C; --red: #FF8A80; --warn-bg: #3A2F12; --warn-ink: #F6D58C; }

/* Respect the phone's text size: rem everywhere, nothing fixed below 1rem for reading */
html { font-size: 100%; }
body { font-size: 1.0625rem; }
h1, h2, h3 { font-family: var(--sans); letter-spacing: -.01em; }
.screen-title { font-size: 1.75rem; font-weight: 800; }
h2.sub { font-size: 1.2rem; font-weight: 800; }
.sb-h3 { font-size: 1.05rem; margin: 18px 0 8px; }

/* Header and tabs */
.sb-top { background: var(--head) !important; color: var(--on-head) !important; border-bottom: 0 !important; }
.sb-brand { font-family: var(--sans) !important; font-weight: 800; letter-spacing: -.01em; }
.sb-brand img { background: none !important; padding: 0 !important; border-radius: 8px !important; }
.sb-tabs a { font-size: .8rem; }
.sb-tabs a.on { color: var(--teal); }
.sb-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sb-fab svg { width: 62px; height: 62px; padding: 15px; margin-top: -22px; border-radius: 50%; background: var(--teal); color: var(--on-teal); stroke-width: 3; box-shadow: 0 3px 10px rgba(20, 33, 28, .35); border: 4px solid var(--paper); }
.sb-tabs a.sb-fab.on svg { stroke-width: 3.2; }

/* Buttons with icons */
.btn svg[aria-hidden="true"] { width: 22px; height: 22px; margin-right: 8px; flex: none; }
.btn { gap: 0; }

/* Undo toast: sits above the tabs, big buttons */
.sb-undo { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabs) + 12px); z-index: 4100; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: var(--shadow); transform: translateY(16px); opacity: 0; pointer-events: none; transition: .18s; }
.sb-undo.show { transform: none; opacity: 1; pointer-events: auto; }
.sb-undo span { flex: 1 1 60%; }
.sb-undo-btn { min-height: 46px; padding: 0 16px; border-radius: 10px; border: 2px solid currentColor; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
body.form-open .sb-undo { bottom: 16px; }
body.sb-tooling .sb-undo { bottom: calc(var(--tabs) + 150px); }

/* Home */
.sb-home { padding-top: 12px; }
.sb-status { padding: 4px 2px 12px; }
.sb-hello { font-size: 1.5rem; font-weight: 800; margin: 0 0 2px; letter-spacing: -.01em; }
.sb-status p { margin: 0 0 6px; }
.sb-lately { list-style: none; padding: 0; margin: 6px 0 0; font-size: .9rem; color: var(--ink2); }
.sb-lately li { padding: 2px 0; }
.sb-lately strong { color: var(--ink); }
.sb-tile { display: block; position: relative; background: var(--card); border-radius: 6px 16px 16px 6px; padding: 14px 14px 14px 20px; margin: 0 0 14px; color: var(--ink); text-decoration: none; }
.sb-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: 6px 0 0 6px; background: var(--line); }
.sb-rail-red::before { background: repeating-linear-gradient(180deg, var(--u-red) 0 14px, #8E1B1B 14px 18px); }
.sb-rail-yellow::before { background: var(--u-yellow); }
.sb-rail-green::before { background: var(--u-green); }
.sb-tile-first { background: var(--teal); color: var(--on-teal); }
.sb-tile-first::before { display: none; }
.sb-tile-first > span:not(.sb-tile-head) { display: block; margin-top: 6px; }
.sb-tile-head { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sb-tile-head strong { min-width: 0; }
.sb-tile-head strong { font-size: 1.2rem; font-weight: 800; flex: 1 1 auto; }
.sb-tile-head svg { width: 28px; height: 28px; }
.sb-big { font-size: 2.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sb-count { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.sb-count small { color: var(--ink2); font-weight: 600; font-size: .85rem; margin-top: 2px; }
.sb-toplist { list-style: none; padding: 0; margin: 10px 0 4px; }
.sb-toplist a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sb-toplist strong, .sb-toplist small { display: block; }
.sb-toplist small { color: var(--ink2); }
.sb-tile-foot { display: flex; gap: 10px; margin-top: 10px; }
.sb-tile-foot .btn { flex: 1; }
.sb-gatesum { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-weight: 700; }
.sb-gatesum .sb-gate { margin-left: 6px; }
.sb-gatesum .sb-gate:first-child { margin-left: 0; }
.sb-warnline { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); text-decoration: none; }
.sb-fencebar { list-style: none; padding: 0; margin: 10px 0 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.sb-fencebar li { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.sb-fencebar span { flex: 1; }
.sb-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 16px; }
.sb-qa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 8px 4px; border-radius: 14px; border: 2px solid var(--teal); background: var(--paper); color: var(--teal); font: 700 .88rem/1.15 var(--sans); text-decoration: none; text-align: center; cursor: pointer; }
.sb-qa svg { width: 28px; height: 28px; }
.sb-later { color: var(--ink2); font-size: .92rem; border-top: 1px solid var(--line); padding-top: 10px; }

/* Urgency chips, always with a word and a mark */
.sb-urg { display: inline-flex; align-items: center; gap: 5px; flex: none; min-width: 64px; padding: 3px 9px 3px 6px; border-radius: 8px; font-size: .82rem; font-weight: 800; line-height: 1.3; }
.sb-urg b { display: inline-grid; place-items: center; min-width: 18px; }
.sb-u-red.sb-urg { background: var(--u-red); color: #fff; }
.sb-u-yellow.sb-urg { background: var(--u-yellow); color: #1D1600; }
.sb-u-green.sb-urg { background: var(--u-green); color: #fff; }

/* Job lists */
.sb-jobs { list-style: none; padding: 0; margin: 8px 0 14px; }
.sb-jobs > li { border-bottom: 1px solid var(--line); }
.sb-job { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; color: var(--ink); text-decoration: none; }
.sb-job-main strong, .sb-job-main small { display: block; }
.sb-job-main strong { font-size: 1.05rem; }
.sb-job-main small { color: var(--ink2); }
.sb-why { font-style: italic; }
.sb-group { padding: 14px 2px 4px; font-weight: 800; color: var(--teal); border-bottom: 2px solid var(--teal) !important; }
.sb-empty { padding: 16px 2px; color: var(--ink2); }
.sb-jobs-mini .sb-job { padding: 8px 0; }
.sb-seg { margin: 6px 0 10px; }
.sb-sort { margin: 4px 0 6px; }

/* Job form */
.sb-form { padding-bottom: 110px; }
textarea.sb-titlein { font-size: 1.15rem; font-weight: 600; min-height: 70px; }
.sb-urgpick { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sb-urgbtn { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 14px; border-radius: 12px; border: 3px solid var(--line); background: var(--paper); color: var(--ink); font: 700 1.05rem var(--sans); cursor: pointer; text-align: left; }
.sb-urgbtn b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-size: 1.05rem; }
.sb-urgbtn.sb-u-red b { background: var(--u-red); color: #fff; }
.sb-urgbtn.sb-u-yellow b { background: var(--u-yellow); color: #1D1600; }
.sb-urgbtn.sb-u-green b { background: var(--u-green); color: #fff; }
.sb-urgbtn.on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.sb-urgbtn.on::after { content: "✓"; margin-left: auto; font-size: 1.3rem; }
.sb-where { background: var(--card); border-radius: 12px; padding: 10px 12px; }
.sb-where > span { display: flex; align-items: center; gap: 8px; }
.sb-where .row-btns { margin: 8px 0 0; }
.sb-formbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); }
.sb-formbar .btn { flex: 1; }
.sb-formbar .btn.primary { flex: 2; }
.sb-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.sb-ph { margin: 0; text-align: center; }
.sb-ph-btn { border: 0; padding: 0; background: none; border-radius: 10px; overflow: hidden; cursor: pointer; display: block; }
.sb-ph img { width: 96px; height: 96px; object-fit: cover; display: block; }
.sb-photo-view { position: fixed; inset: 0; z-index: 5200; background: #000; display: grid; place-items: center; }
.sb-photo-view img { max-width: 100%; max-height: 100%; }
.sb-photo-view .btn { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; background: #fff; color: #000; border-color: #fff; }
.sb-photo-view small { position: absolute; bottom: 12px; left: 12px; color: #fff; }

/* Sheets for things on the map */
.sb-sheethead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sb-sheethead small { display: block; color: var(--ink2); }
.sb-sheet-name { font-size: 1.2rem; }
.sb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.sb-acts .btn { min-height: 56px; padding: 0 10px; justify-content: flex-start; text-align: left; line-height: 1.15; }
.sb-acts .btn.primary { grid-column: 1 / -1; justify-content: center; }
.sb-acts-add .btn { min-height: 64px; }
.sb-conds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.sb-condbtn { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 12px; border-radius: 12px; border: 3px solid var(--line); background: var(--paper); color: var(--ink); font: 700 1rem var(--sans); cursor: pointer; text-align: left; }
.sb-condbtn i, .sb-swatch { display: inline-block; flex: none; width: 30px; height: 10px; border-radius: 2px; }
.sb-condbtn.on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.sb-c-red i, .sb-swatch.sb-c-red { background: repeating-linear-gradient(90deg, var(--u-red) 0 4px, transparent 4px 9px); height: 12px; box-shadow: inset 0 0 0 1px var(--u-red); }
.sb-c-yellow i, .sb-swatch.sb-c-yellow { background: repeating-linear-gradient(90deg, var(--u-yellow) 0 10px, transparent 10px 15px); height: 12px; box-shadow: inset 0 0 0 1px #9A7400; }
.sb-c-green i, .sb-swatch.sb-c-green { background: var(--u-green); height: 12px; }
.sb-c-unchecked i, .sb-swatch.sb-c-unchecked { background: #F4F4EE; height: 12px; box-shadow: inset 0 0 0 2px #0B1410; }
.sb-hist li { margin: 8px 0; }
.sb-picklist { display: flex; flex-wrap: wrap; gap: 8px; max-height: 60vh; overflow: auto; }
.sb-kindchip { display: inline-flex; align-items: center; gap: 8px; }
.sb-kindchip .sb-feat { width: 26px; height: 26px; font-size: .75rem; }

/* Lists */
.sb-rows { list-style: none; padding: 0; margin: 6px 0 14px; }
.sb-rows > li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sb-rows > li > span small, .sb-row-main small { display: block; color: var(--ink2); }
.sb-row-main { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 2px; border: 0; background: none; color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.sb-row-main strong { display: block; }
.sb-btn-open { border-color: var(--gate-open); color: var(--gate-open); min-width: 84px; }
.sb-btn-shut { border-color: var(--gate-shut); color: var(--gate-shut); min-width: 84px; }
.sb-fencetotals { flex-wrap: wrap; gap: 6px 16px !important; font-weight: 700; font-size: .92rem; }
.sb-fencetotals span { display: inline-flex; align-items: center; gap: 6px; }
.sb-each > li { flex-wrap: wrap; }
.sb-each > li > span { flex: 1 1 100%; }
.sb-each select { flex: 1; }
.sb-impgroup strong, .sb-impgroup small { display: block; }
.sb-impgroup small { color: var(--ink2); margin-bottom: 4px; }
.sb-aeropts { display: grid; gap: 8px; margin: 10px 0; }
.sb-aeropt { display: block; text-align: left; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--teal); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.sb-aeropt strong, .sb-aeropt span { display: block; }
.sb-aeropt span { color: var(--ink2); font-size: .92rem; }
.sb-aeropt:disabled { opacity: .5; }

/* Setup and lock */
.sb-setupicon, .sb-lockicon { width: 76px; height: 76px; border-radius: 18px; display: block; margin: 8px 0 10px; }
.sb-lockicon { margin: 0 auto; }

/* ---------- Map ---------- */
.sb-mapui > * { position: absolute; z-index: 800; }
.sb-bases { top: 10px; left: 10px; right: 10px; margin: 0 auto; max-width: 360px; background: var(--paper); box-shadow: var(--shadow); }
.sb-gpslabel { top: 10px; left: 10px; border: 0; border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: .85rem; background: var(--paper); color: var(--gps); box-shadow: var(--shadow); cursor: pointer; }
.sb-gpslabel:empty { display: none; }
.sb-gpslabel.tone-meh { color: var(--warn-ink); background: var(--warn-bg); }
.sb-gpslabel.tone-bad { color: #fff; background: #B3261E; }
.sb-mapbtns { right: 10px; bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.sb-mapbtn { width: 62px; min-height: 62px; border-radius: 16px; border: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font: 700 .7rem var(--sans); padding: 6px 2px; }
.sb-mapbtn svg { width: 26px; height: 26px; }
.sb-mapadd { background: var(--teal); color: var(--on-teal); }
.sb-mapme { color: var(--gps); }
.sb-mapleft { left: 10px; bottom: 34px; display: flex; flex-direction: column; gap: 10px; }
.sb-round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(16, 24, 20, .78); color: #fff; display: grid; place-items: center; cursor: pointer; font: 800 1.1rem Georgia, serif; box-shadow: var(--shadow); }
.sb-round.off { opacity: .5; }
.sb-backbar { left: 10px; right: 84px; bottom: 26px; }
.sb-backbar .btn { min-height: 52px; box-shadow: var(--shadow); }
.sb-modebar { left: 8px; right: 8px; bottom: 8px; background: var(--paper); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.sb-modebar p { margin: 0; }
.sb-modebar .row-btns { margin: 10px 0 0; flex-wrap: nowrap; }
.sb-modebar .btn { flex: 1; padding: 0 8px; min-height: 54px; }
body.sb-tooling .sb-mapbtns, body.sb-tooling .sb-mapleft, body.sb-tooling .sb-backbar { display: none; }
body.sb-tooling .leaflet-control-scale { display: none; }
.sb-mapui .map-pick { inset: 0; pointer-events: none; }
.leaflet-control-scale { margin-left: 64px !important; margin-bottom: 10px !important; }

/* Things drawn on the map */
.sb-pdk-wrap { overflow: visible; }
.sb-pdk-label { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; padding: 2px 8px; border-radius: 6px; background: rgba(16, 24, 20, .72); color: #fff; font: 800 .85rem var(--sans); pointer-events: none; }
.sb-pdk-noshape { background: rgba(255, 255, 255, .9); color: #14211C; border: 2px dashed #14211C; pointer-events: auto; cursor: pointer; }
.sb-z-low .sb-pdk-label:not(.sb-pdk-noshape) { display: none; }
.sb-gate { display: inline-block; line-height: 0; border-radius: 50%; }
.sb-gate svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.leaflet-marker-icon .sb-gate { margin: 3px; }
.sb-gate-off { box-shadow: 0 0 0 3px #FFD600, 0 0 0 6px #14211C; }
.sb-sel { box-shadow: 0 0 0 4px #FFE082; }
/* Middle zoom: smaller gates. Zoomed out over the whole station: gates become small dots, labels shrink */
.sb-z-mid .leaflet-marker-icon .sb-gate { margin: 8px; }
.sb-z-mid .leaflet-marker-icon .sb-gate svg { width: 24px; height: 24px; }
.sb-z-far .leaflet-marker-icon .sb-gate { margin: 13px; }
.sb-z-far .leaflet-marker-icon .sb-gate svg { width: 14px; height: 14px; filter: none; }
.sb-z-far .leaflet-marker-icon .sb-gate-off { box-shadow: 0 0 0 2px #FFD600; }
.sb-z-far .sb-feat { transform: scale(.55); }
.sb-z-far .sb-feat-hazard { transform: scale(.55) rotate(45deg); }
.sb-z-far .sb-pdk-label { font-size: .72rem; padding: 1px 5px; }
.sb-z-far .sb-pdk-noshape { border-width: 1.5px; }
.sb-feat { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #37474F; color: #fff; border: 2.5px solid #fff; font: 800 .8rem var(--sans); box-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.sb-feat-water { background: #0277BD; border-radius: 50% 50% 50% 8px; }
.sb-feat-hazard { background: #FFD600; color: #14211C; transform: rotate(45deg); border-radius: 4px; }
.sb-pin-name { position: absolute; left: 34px; top: 5px; white-space: nowrap; font: 700 .75rem var(--sans); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.sb-z-mid .sb-pin-name { display: none; }
.sb-jobpin { position: relative; display: block; width: 30px; height: 30px; }
.sb-jobpin b { position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); font: 900 .95rem var(--sans); }
.sb-jobpin b::first-line { }
.sb-jobpin.sb-u-red b { background: var(--u-red); color: #fff; }
.sb-jobpin.sb-u-yellow b { background: var(--u-yellow); color: #1D1600; }
.sb-jobpin.sb-u-green b { background: var(--u-green); color: #fff; }
.sb-jobpin em { position: absolute; left: 50%; top: 31px; transform: translateX(-50%); white-space: nowrap; font: 800 .7rem var(--sans); font-style: normal; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: #14211C; }
.sb-z-mid .sb-jobpin em { display: none; }
.sb-sheethead .sb-jobpin, .sb-keyrow .sb-jobpin { flex: none; margin: 0 4px; }
.sb-vx { display: block; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 4px solid #06262E; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.sb-vx-mid { width: 26px; height: 26px; margin: 2px; border-width: 2px; background: rgba(0, 229, 255, .85); color: #06262E; display: grid; place-items: center; font: 900 1rem var(--sans); }
.sb-moving { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 229, 255, .35); box-shadow: 0 0 0 3px #00E5FF; }

/* Key */
.sb-toggles .tick { margin: 6px 0; padding: 8px 12px; }
.sb-key { display: grid; gap: 8px; }
.sb-keyrow { display: flex; align-items: center; gap: 12px; }
.sb-keyrow > :first-child { flex: none; width: 46px; display: grid; place-items: center; }

@media (min-width: 700px) { .sb-urgpick { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sb-undo, .sheet, .sheet-wrap { transition: none !important; } }
.sb-mapbtns, .sb-mapleft { pointer-events: none; }
.sb-mapbtns > *, .sb-mapleft > * { pointer-events: auto; }
.sb-tile-head svg { flex: none; }
.sb-fencebar { grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); }
.sb-fencebar strong { white-space: nowrap; }
.sb-synclink { color: var(--ink2); text-decoration: none; }
.sb-synclink.sb-sync-error { color: var(--red); font-weight: 700; }
.sb-synclink.sb-sync-ok::before { content: "✓ "; color: var(--u-green); font-weight: 800; }
.sb-syncard.sb-sync-error { background: var(--warn-bg); color: var(--warn-ink); }
.sb-acts .sb-wide { grid-column: 1 / -1; }

/* Stage 2: cattle and treatments */
.sb-hdrmore { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; font-size: .7rem; font-weight: 700; padding: 4px 6px; margin-left: 4px; }
.sb-hdrmore svg { width: 24px; height: 24px; }
.sb-hdrmore.on { color: #9FE0C6; }
.sb-mobhead { flex: none; min-width: 3.2em; text-align: center; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--teal); }
.sb-mobsum { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.sb-mobsum small { color: var(--ink2); }
.sb-hold { color: #8A4B00; font-weight: 700; }
:root[data-theme="dark"] .sb-hold { color: #F6C66B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-hold { color: #F6C66B; } }
.sb-flag { color: var(--red); font-weight: 700; }
.sb-events li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sb-quick3 { grid-template-columns: repeat(3, 1fr); }
.sb-pdkpick { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.sb-pdkopt { display: block; text-align: left; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; border-left-width: 8px; }
.sb-pdkopt strong, .sb-pdkopt small { display: block; }
.sb-pdkopt small { color: var(--ink2); }
.sb-ps-in { border-left-color: #8E5BD6; }
.sb-ps-rest { border-left-color: #4CAF50; }
.sb-trdate { flex: none; width: 5.5em; font-size: .85rem; font-weight: 700; color: var(--ink2); }
.sb-holdlist li { margin: 4px 0; }
.sb-num { max-width: 9em; }
.sb-pdk-label small { display: block; font-weight: 700; font-size: .72rem; opacity: .95; }
.sb-pdk-in { background: rgba(94, 53, 177, .85); }
.sb-pdk-rest { background: rgba(27, 94, 32, .82); }
.sb-z-far .sb-pdk-label small { display: none; }
.sb-cattleline { padding: 8px 10px; border-radius: 10px; background: var(--card); border-left: 6px solid var(--line); }

/* Stage 3 and extras */
.sb-grow { flex: 1; min-width: 0; }
.sb-lickdot { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #78909C; }
.sb-lick-green { background: #2E7D32; } .sb-lick-amber { background: #E0A100; color: #1D1600; } .sb-lick-red { background: #C62828; }
.sb-lickpin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); font: 800 .78rem var(--sans); background: #78909C; color: #fff; line-height: 1; }
.sb-lickpin em { font-style: normal; font-size: .6rem; margin-top: -3px; }
.sb-lickpin.sb-lick-green { background: #2E7D32; } .sb-lickpin.sb-lick-amber { background: #F2B705; color: #1D1600; } .sb-lickpin.sb-lick-red { background: #C62828; }
.sb-lickopt-red { border-left-color: #C62828; } .sb-lickopt-amber { border-left-color: #F2B705; } .sb-lickopt-green { border-left-color: #2E7D32; }
.sb-firefill { position: absolute; left: 20px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #FF6D00; color: #fff; font: 800 .6rem/16px var(--sans); text-align: center; font-style: normal; border: 1.5px solid #fff; }
.sb-quick { grid-template-columns: repeat(4, 1fr); }
.sb-emhome { margin: 4px 0 16px; border-color: var(--red); color: var(--red); }
.sb-call { background: #C62828; border-color: #C62828; color: #fff; font-size: 1.4rem; min-height: 72px; }
.sb-coords { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0; }
.sb-bignum { font-size: 1.6rem; font-weight: 800; }
.sb-raintot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; text-align: center; }
.sb-raintot strong { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.sb-raintot small { color: var(--ink2); }
.sb-chart { color: var(--ink); background: var(--card); border-radius: 12px; padding: 8px; }
.sb-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.sb-water { list-style: none; padding: 0; }
.sb-water > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sb-water .row-btns .btn { flex: 1; min-height: 52px; }
.sb-ok { border-color: var(--u-green); color: var(--u-green); }
.sb-levels { margin: 8px 0 0; }
.sb-firechip { flex: none; width: 3.4em; text-align: center; padding: 6px 0; border-radius: 8px; font-weight: 800; color: #1D1600; }
.sb-fireplan li { margin: 6px 0; }
.sb-emlink strong { color: var(--red); }
.sb-tile-first .btn { background: var(--paper); color: var(--teal); border-color: var(--paper); }
.sb-zoombtns { right: 10px; top: 10px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.sb-zoom { width: 56px; height: 52px; border: 0; background: var(--paper); color: var(--ink); font: 700 1.8rem/1 var(--sans); cursor: pointer; }
.sb-zoom + .sb-zoom { border-top: 1px solid var(--line); }
body.sb-tooling .sb-zoombtns { top: 10px; }

/* ---------- Desktop and laptop ----------
   Same app, laid out for a big screen: a side menu with every section instead of the
   bottom tabs, Home as a grid of tiles, wider pages, forms in two columns, and
   pop-ups in the middle of the screen. The map fills everything to the right. */
.sb-side { display: none; }
@media (min-width: 1000px) {
  :root { --side: 236px; --tabs: 0px; }
  body { padding: var(--top) 0 0 var(--side); }
  #tabs, #hdrMore { display: none !important; }
  .sb-side { display: block; position: fixed; top: var(--top); bottom: 0; left: 0; width: var(--side); overflow-y: auto; padding: 14px 10px 24px; background: var(--card); border-right: 1px solid var(--line); z-index: 900; }
  .sb-side a:not(.btn) { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
  .sb-side a:not(.btn) svg { width: 20px; height: 20px; flex: none; color: var(--ink2); }
  .sb-side a:not(.btn):not(.on):hover { background: var(--paper); }
  .sb-side a.on { background: var(--teal); color: var(--on-teal); }
  .sb-side a.on svg { color: var(--on-teal); }
  .sb-side-h { margin: 16px 10px 4px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
  .sb-side-add { width: 100%; justify-content: center; }
  #mapview { left: var(--side); bottom: 0; }
  .screen { max-width: 960px; padding: 24px 32px 48px; }
  .screen-title { font-size: 2rem; }
  /* Home: tiles side by side */
  .sb-home { max-width: 1320px; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; align-items: start; }
  .sb-home > .sb-status, .sb-home > .sb-quick, .sb-home > .sb-emhome, .sb-home > .banner, .sb-home > .sb-tile-first { grid-column: 1 / -1; }
  .sb-home > .sb-tile { margin: 0; }
  .sb-home .sb-quick { grid-template-columns: repeat(8, 1fr); margin: 0; }
  .sb-home .sb-emhome { justify-self: start; width: auto; padding: 0 28px; }
  /* Forms: two columns, keep the menu showing, save bar under the form */
  body.form-open { padding: var(--top) 0 0 var(--side); }
  body.form-open #top { display: flex; }
  .sb-form { max-width: 860px; padding-bottom: 120px; }
  .sb-formbar { left: var(--side); padding-left: max(24px, calc((100vw - var(--side) - 860px) / 2 + 32px)); padding-right: max(24px, calc((100vw - var(--side) - 860px) / 2 + 32px)); }
  .sb-urgpick { grid-template-columns: repeat(3, 1fr); }
  /* Lists and cards a little roomier */
  .sb-rows > li, .sb-jobs > li { padding-left: 4px; padding-right: 4px; }
  .sb-acts { grid-template-columns: repeat(3, 1fr); }
  .sb-acts .btn.primary { grid-column: 1 / -1; }
  /* Pop-ups in the middle of the screen */
  .sheet-wrap { align-items: center; padding-left: var(--side); }
  .sheet { max-width: 560px; border-radius: 18px; max-height: 86vh; }
  .toast { left: calc(50% + var(--side) / 2); bottom: 24px; }
  .sb-undo { left: calc(var(--side) + 24px); right: auto; width: min(560px, calc(100vw - var(--side) - 48px)); bottom: 24px; }
  .update-bar { left: calc(var(--side) + 24px); right: 24px; bottom: 24px; }
  /* Map controls: a touch smaller with a mouse */
  .sb-mapbtn { width: 58px; min-height: 58px; }
  .sb-modebar { left: auto; right: 84px; width: 520px; bottom: 16px; }
  .sb-chart { max-width: 720px; }
}
@media (min-width: 1000px) and (pointer: fine) {
  .sb-row-main:hover, .sb-job:hover { background: var(--card); border-radius: 10px; }
}

/* Room for Netlify's badge where it can't be hidden (set by makeRoomForBadge) */
:root { --badge: 0px; }
body.sb-badge { padding-bottom: calc(var(--tabs) + var(--badge)); }
body.sb-badge #tabs { bottom: var(--badge); }
body.sb-badge #mapview { bottom: calc(var(--tabs) + var(--badge)); }
body.sb-badge .sb-formbar { bottom: var(--badge); }
body.sb-badge .toast { bottom: calc(var(--tabs) + var(--badge) + 14px); }
body.sb-badge .sb-undo, body.sb-badge .update-bar { bottom: calc(var(--tabs) + var(--badge) + 12px); }
body.sb-badge.form-open { padding-bottom: var(--badge); }
body.sb-badge::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: var(--badge); background: var(--paper); border-top: 1px solid var(--line); z-index: 999; }