/* ===== Design tokens — MatirDoctor brand =====
   Source of truth: MatirDoctor apps/mobile/constants/theme.ts (+ Figma "MatirDoctor — Admin Dashboard" styles).
   Every value below is a MatirDoctor token; the token it comes from is named alongside. See docs/BRAND_TOKENS.md. */
:root {
  --bg: #FAFAF5;           /* surface.appBackground */
  --surface: #FFFFFF;      /* surface.card */
  --surface-2: #F4F6F4;    /* surface.cardOutliner = Figma Surface/Elevated */
  --brand-soft: #F1F7F2;   /* navbar.background = Brand/Primary/100 */
  --brand-tint: #DAEDD2;   /* adminPanel.badgeGreenBg = Status System/Success BG — selected pills */
  --text: #1C1C1C;         /* text.primary */
  --muted: #666666;        /* Figma Text/Secondary — readable secondary text (theme.ts keeps #1C1C1C by directive) */
  --line: #E8E8E0;         /* surface.border */
  --brand: #375729;        /* brand.primary = Buttons/Primary/Default */
  --brand-2: #4E8038;      /* brand.link = Buttons/Primary/Hover */
  --brand-strong: #24371C; /* button.primary.pressed */
  --brand-ink: #F1F7F2;    /* Buttons/Primary/Text = text.onDark */
  --accent: #2E7D32;       /* brand.header = Agriculture Accent/Crop */
  --soil: #C08A17;         /* adminAccent.gold */
  /* Colour-coded notes (badges, warnings, offline bar, class chips) use ONLY these four pairs — strong colour for
     the dot / bar, light colour for the fill, text always #1C1C1C (owner's rule, 2026-10-13):
     green #375729/#DAEDD2 · amber #F9A825/#FFE0AE · red #C62828/#FFBFBF · blue #1565C0/#83BDFF. */
  --good: #375729;      --good-bg: #DAEDD2;       /* green — good, highly suitable, observed, measured */
  --moderate: #F9A825;  --moderate-bg: #FFE0AE;   /* amber — moderate, suitable, caution */
  --low: #C62828;       --low-bg: #FFBFBF;        /* red — low, low quality, not suitable */
  --nodata: #C62828;    --nodata-bg: #FFBFBF;     /* red — NO DATA (owner's choice) */
  --est: #1565C0;       --est-bg: #83BDFF;        /* blue — ESTIMATED, DERIVED, MODEL, info */
  --water: #1565C0;     --water-bg: #83BDFF;      /* blue — water */
  --note-ink: #1C1C1C;                             /* text on every note fill, in both themes */
  --offline-bg: #FFE0AE;                           /* amber fill — offline / stale notes */
  --shadow: 0 2px 6px rgba(0,0,0,.07);             /* layout.cardShadow (opacity .07, radius 6, y 2) */
  --radius: 16px;          /* radius.card */
  --card-pad: 20px;        /* space inside every card (owner's rule, 2026-10-24); map overlays and chips keep their own */
  --radius-btn: 12px;      /* radius.button */
  --radius-input: 10px;    /* radius.input */
  --touch: 52px;           /* layout.minTouchTarget = primaryButtonHeight */
  --nav-h: calc(64px + env(safe-area-inset-bottom, 0px));   /* bottom tab bar incl. the home-indicator area (0 on tablets/desktop) */
  --rail-w: 0px;           /* side navigation rail width (tablets/desktop only) */
  --icon-nav: #1C1C1C;     /* tab bar, app bar, menu and map-control icons */
  --icon-label: #375729;   /* icons that label content */
  --top-safe: env(safe-area-inset-top, 0px);
  --font: 'Plus Jakarta Sans', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;   /* variable fonts (owner, 2026-10-17): any weight, e.g. 450 */
  --fw-normal: 450;        /* normal text sits between Regular (400) and Medium (500) (owner, 2026-10-17) */
  color-scheme: light;
}
/* Dark mode: MatirDoctor ships no dark palette, so this is built only from its own tokens (brand.dark,
   button.pressed, text.primary, text.onDark, seriesSecondary, Buttons/Primary/Disabled). */

/* Bangla text uses a Bangla face (Noto Sans Bengali, variable), never the Latin one (MatirDoctor ui-ux-rules). */
:lang(bn) { --font: 'Noto Sans Bengali', system-ui, sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-text-large] { font-size: 112.5%; }   /* Settings → Text size: everything in rem scales with it */
body { background: var(--bg); color: var(--text); font: var(--fw-normal) .9375rem/1.5 var(--font); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny { font-size: .75rem; }
.mono { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ===== Mobile-app shell =====
   #app is a fixed-height app window whose transform makes it the containing block for every
   position:fixed screen, sheet and toast. Screens scroll inside .view; the tab bar and app bar never move.
   Phones get a bottom tab bar; from 768px the same nav becomes a side rail, like a tablet/desktop app. */
#app { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--bg); transform: translateZ(0); }
#app.no-nav { --nav-h: 0px; --rail-w: 0px; }
.view { position: absolute; inset: 0 0 0 var(--rail-w); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.view.enter { animation: view-in .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes view-in { from { opacity: 0; transform: translateX(14px); } }
/* App-like touch: no text selection on chrome, a press state on everything tappable. */
.nav, .topbar, .btn, .fab, .icon-btn, .pill, .list a.row, .list button, .tabs button, .drawer { -webkit-user-select: none; user-select: none; }
.btn, .fab, .icon-btn, .pill, .searchbox, .list a.row, .list button, .tabs button, .chip { transition: transform .12s ease, background-color .15s ease; }
.btn:active, .fab:active, .icon-btn:active, .pill:active, .searchbox:active, .tabs button:active { transform: scale(.96); }
.list a.row:active, .list button:active { background: var(--surface-2); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ico-svg { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.27em; color: var(--icon-label); }
.ico-svg .f { display: none; }
/* The owner's black crop icon (a PNG) sits where the drawn icons do, at the same size; light in dark theme. */
.ico-img { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.27em; object-fit: contain; }
.ico-crop { position: relative; }
.ico-crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* green crop icon by default (label icons are green); black where navigation icons are black */
.ico-crop .c-k, .ico-crop .c-f { display: none; }
.ico-pair { position: relative; }
.ico-pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ico-pair .p-f, .drawer-list a.active .ico-pair .p-o { display: none; }
.drawer-list a.active .ico-pair .p-f { display: block; }
/* Selected menu item: the filled crop icon, like the filled built-in icons. */
.drawer-list a.active .ico-crop .c-k { display: none; }
.drawer-list a.active .ico-crop .c-f { display: block; }
.nav .ico-crop .c-g, .topbar .ico-crop .c-g, .icon-btn .ico-crop .c-g, .brandbar .ico-crop .c-g, .drawer .ico-crop .c-g, .list.menu .r-ico .ico-crop .c-g { display: none; }
.nav .ico-crop .c-k, .topbar .ico-crop .c-k, .icon-btn .ico-crop .c-k, .brandbar .ico-crop .c-k, .drawer .ico-crop .c-k, .list.menu .r-ico .ico-crop .c-k { display: block; }
/* Label icons draw a little heavier than Material's 400 weight; nav/menu icons keep the stock weight. */
.ico-svg .o { stroke: currentColor; stroke-width: var(--ico-stroke, 26); stroke-linejoin: round; }
/* Selected state = filled icon */
.nav a.active .ico-svg .o, .drawer-list a.active .ico-svg .o, .tabs button.on .ico-svg .o, [aria-pressed="true"] > .ico-svg .o,
.ico-svg.filled .o { display: none; }
.nav a.active .ico-svg .f, .drawer-list a.active .ico-svg .f, .tabs button.on .ico-svg .f, [aria-pressed="true"] > .ico-svg .f,
.ico-svg.filled .f { display: inline; }
/* Navigation chrome uses the near-black icon colour */
.nav .ico-svg, .topbar .ico-svg, .icon-btn .ico-svg, .brandbar .ico-svg, .fab .ico-svg, .searchbox .ico-svg,
.drawer .ico-svg, .list.menu .r-ico .ico-svg, .wl-top .ico-svg { color: var(--icon-nav); --ico-stroke: 0; }
/* Inside buttons and selected chips the icon follows the text colour (e.g. white on a primary button) */
.btn .ico-svg, .tabs button .ico-svg, .lp .ico-svg { color: currentColor; }
.search-field { position: relative; display: block; }
.search-field > .ico-svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--icon-nav); pointer-events: none; }
.search-field > .field { padding-left: 46px; }
.lp-search > .ico-svg { width: 22px; height: 22px; color: var(--icon-nav); }
.toast { display: inline-flex; align-items: center; gap: 8px; }
.toast .ico-svg { color: currentColor; width: 20px; height: 20px; }
.ico-hero { display: flex; justify-content: center; margin: 4px 0 8px; }
.ico-hero .ico-svg { width: 48px; height: 48px; }
.screen { margin: 0 auto; padding: 0 16px calc(var(--nav-h) + 24px); min-height: 100%; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px; min-height: 56px;
  margin: 0 -16px; padding: var(--top-safe) 8px 0; background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 1.08rem; font-weight: 600; margin: 0; flex: 1; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar + * { margin-top: 12px; }
.icon-btn { flex: none; border: 0; background: transparent; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 1.25rem; color: var(--text); }
.icon-btn:hover { background: var(--surface-2); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); margin: 12px 0; box-shadow: var(--shadow); }
.card h2 { display: flex; align-items: center; gap: 8px; }
.hero { text-align: center; padding: 24px 16px; background: linear-gradient(160deg, var(--brand), var(--brand-2)); color: var(--brand-ink); border: 0; }
.hero .muted { color: inherit; opacity: .85; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); padding: 12px 18px; border-radius: 12px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--text); min-height: 46px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btn-row .btn { flex: 1 1 140px; }

.field { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.field:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.error { color: var(--low); margin: 8px 0; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list button, .list a.row { width: 100%; display: flex; gap: 10px; align-items: center; justify-content: space-between; text-align: left; padding: 12px 4px; border: 0; background: none; cursor: pointer; text-decoration: none; color: var(--text); }
.list .sub { display: block; font-size: .8rem; color: var(--muted); }
.list .icon-btn { flex: none; width: 44px; }   /* a delete × in a list row keeps its size (.list button is full width) */

.kv { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 6px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.prop { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.prop:last-child { border-bottom: 0; }
.prop .name { font-weight: 500; }
.prop .val { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.prop .meta { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.prop a.src { font-size: .78rem; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.badge.good { --b: var(--good); --bb: var(--good-bg); } .badge.moderate { --b: var(--moderate); --bb: var(--moderate-bg); } .badge.low { --b: var(--low); --bb: var(--low-bg); }
.badge.nodata { --b: var(--nodata); --bb: var(--nodata-bg); } .badge.est { --b: var(--est); --bb: var(--est-bg); } .badge.water { --b: var(--water); --bb: var(--water-bg); } .badge.info { --b: var(--est); --bb: var(--est-bg); }
.chip { display: inline-block; font-size: .78rem; padding: 2px 8px; background: var(--surface-2); border-radius: 999px; }

.warn { border-left: 4px solid var(--moderate); background: var(--moderate-bg); color: var(--note-ink); padding: 10px 12px; border-radius: 8px; margin: 10px 0; font-size: .88rem; }
.note { border-left: 4px solid var(--line); padding: 8px 12px; font-size: .85rem; color: var(--muted); margin: 10px 0; }

.meter { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--brand); }
.scale { position: relative; height: 26px; margin: 6px 0 2px; }
.scale .track { position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2), var(--line)); }
.scale .range { position: absolute; top: 9px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 45%, transparent); }
.scale .dot { position: absolute; top: 5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--brand); }
.scale-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }

.stars { display: inline-flex; gap: 2px; align-items: center; flex: none; }
.stars .ico-svg { width: 20px; height: 20px; color: var(--moderate); --ico-stroke: 0; }
.stars.good .ico-svg { color: var(--good); } .stars.low .ico-svg { color: var(--low); }
.depth-block { border-left: 6px solid var(--soil); padding: 8px 12px; margin: 10px 0; background: var(--surface); border-radius: 0 10px 10px 0; }
.depth-block.empty { border-left-color: var(--line); opacity: .8; }
.depth-block h3 { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Two badges (source + status) crowd the header at phone width; wrap the badges together, never the label. */
.depth-block h3 > span:first-child { white-space: nowrap; }
.depth-block h3 .badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-left: auto; }

/* Map */
.map-screen { position: fixed; inset: 0 0 var(--nav-h) var(--rail-w); }
#map { position: absolute; inset: 0; background: #E8ECE8; z-index: 0; isolation: isolate; }
.map-top { position: absolute; top: 0; left: 0; right: 0; z-index: 500; padding: calc(12px + var(--top-safe)) 16px 0; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.brandbar { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .04em; }
.brandbar .pill { background: var(--surface); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); display: inline-flex; gap: 6px; align-items: center; }
.brandbar .menu-pill { border: 0; width: 40px; height: 40px; padding: 0; justify-content: center; cursor: pointer; color: var(--text); }
.fab .ico-svg { width: 24px; height: 24px; }
.icon-btn .ico-svg { width: 24px; height: 24px; }
.card h2 .ico-svg, .card h3 .ico-svg { width: 22px; height: 22px; }
.searchbox { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); border: 1px solid var(--line); cursor: text; color: var(--muted); }
.map-fabs { position: absolute; right: 12px; bottom: 112px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.fab, .searchbox { text-decoration: none; }
.fab { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; font-size: 1.3rem; display: grid; place-items: center; }
.map-hint { position: absolute; left: 16px; bottom: 20px; z-index: 500; background: var(--surface); padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow); font-size: .82rem; max-width: 60%; }
.legend { position: absolute; left: 16px; bottom: 70px; z-index: 500; background: var(--surface); padding: 8px 10px; border-radius: 10px; box-shadow: var(--shadow); font-size: .75rem; min-width: 150px; }
/* Map tap → place sheet on the map itself (save several places without leaving the map). */
.pick-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 650; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.14); padding: 6px 16px 14px; animation: sheet-up .22s ease-out; }
.pick-sheet[hidden] { display: none; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ps-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 8px; }
.ps-head { display: flex; align-items: flex-start; gap: 10px; }
.ps-ico { flex: none; padding-top: 2px; }
.ps-ico .ico-svg { width: 28px; height: 28px; }
.ps-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-name { font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.ps-sub { color: var(--muted); font-size: .85rem; }
.ps-coord { color: var(--muted); font-size: .78rem; }
.ps-head .icon-btn { margin: -6px -8px 0 0; }
.ps-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 12px; }
.ps-actions .btn { padding: 10px 12px; min-height: 46px; }
.ps-actions .btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); }
.ps-more { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 8px; font-size: .85rem; color: var(--brand); text-decoration: none; font-weight: 600; }
.ps-more .ico-svg { width: 18px; height: 18px; color: currentColor; }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; margin: 4px 0; display: inline-block; }
.map-screen.picking .map-hint, .map-screen.picking .legend { display: none; }
.map-screen.picking .map-fabs { bottom: calc(var(--sheet-h, 0px) + 140px); }   /* stay above the zoom buttons */
@media (max-width: 767px) { #app .toast { bottom: calc(var(--nav-h) + 16px + var(--sheet-h, 0px)); } }
.map-screen.picking .leaflet-bottom { bottom: var(--sheet-h, 0px); }
@media (min-width: 768px) {
  .pick-sheet { left: auto; right: 16px; bottom: 16px; width: 380px; border-radius: 20px; }
  .map-screen.picking .map-fabs { bottom: calc(var(--sheet-h, 0px) + 132px); }
  .map-screen.picking .leaflet-bottom { bottom: calc(var(--sheet-h, 0px) + 16px); }
}
.legend .bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #FFF8E1 0.0%, #FFF8E1 20.0%, #FFE0AE 20.0%, #FFE0AE 40.0%, #A5D6A7 40.0%, #A5D6A7 60.0%, #4E8038 60.0%, #4E8038 80.0%, #1F3D0C 80.0%, #1F3D0C 100.0%); margin: 4px 0; }

.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.18); padding: 10px 16px 16px; max-height: 70%; overflow: auto; }
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 10px; }

.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: 10px 12px; }
.mini-map { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }

/* Bottom nav */
.nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h); z-index: 1000; display: flex; justify-content: space-around;
  padding: 6px 4px env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--brand-soft) 94%, transparent);   /* navbar.background */
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); }
.nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 600; gap: 3px; }
.nav a .ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color .2s ease, transform .12s ease; }
.nav a .ico .ico-svg { width: 24px; height: 24px; }
.nav a:active .ico { transform: scale(.92); }
/* No square behind a pressed tab: no tap highlight, and the focus ring goes on the (round) icon, not the link box. */
.nav a { -webkit-tap-highlight-color: transparent; }
.nav a:focus, .nav a:focus-visible { outline: none; }
.nav a:focus-visible .ico { outline: 3px solid var(--brand); outline-offset: 2px; }
.nav a.active { color: var(--icon-nav); }
.nav a.active .ico { background: none; }   /* no pill behind the selected icon — the filled icon + bold label mark it */

/* Slide-out menu drawer */
.drawer-wrap { position: fixed; inset: 0; z-index: 3000; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); opacity: 0; transition: opacity .22s ease; }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(84%, 340px); background: var(--surface); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(8px + var(--top-safe)) 0 calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 0 20px 20px 0;
  box-shadow: 8px 0 32px rgba(0, 0, 0, .2); transform: translateX(-102%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.drawer-wrap.open .drawer-scrim { opacity: 1; }
.drawer-wrap.open .drawer { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.drawer-head span { font-size: .75rem; color: var(--muted); }
.drawer-list { list-style: none; margin: 0; padding: 8px 12px; }
.drawer-list + .drawer-list { border-top: 1px solid var(--line); }
.drawer-list a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--text); font-size: .92rem; font-weight: 500; }
.drawer-list a:active { background: var(--surface-2); }
.drawer-list a.active { background: var(--brand-soft);   /* Brand/Primary/100 */ color: var(--text); font-weight: 600; }
.drawer-list .d-ico { flex: none; width: 24px; display: grid; place-items: center; }
.drawer-list .d-ico .ico-svg { width: 22px; height: 22px; }

/* Onboarding */
.center-screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; max-width: 520px; margin: 0 auto; }
.splash { background: #375729; color: #F1F7F2; max-width: none; }   /* brand.primary / text.onDark on every device and theme */
.splash .logo { width: min(260px, 70vw); height: auto; margin-bottom: 4px; }
.splash h1 { font-size: 2rem; letter-spacing: .12em; margin: 0; }
.splash .sub { letter-spacing: .3em; opacity: .85; font-weight: 600; }
.spinner { width: 28px; height: 28px; border: 3px solid rgba(102, 102, 102, .3); border-top-color: currentColor; border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps { text-align: left; margin: 20px 0; display: grid; gap: 12px; }
.step { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.step .n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; }

/* Charts */
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); }
.chart text { fill: var(--muted); font-size: 10px; }
.legend-inline { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.legend-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.hbar { display: grid; grid-template-columns: 90px 1fr 60px; gap: 8px; align-items: center; font-size: .82rem; margin: 4px 0; }
.hbar .b { height: 12px; border-radius: 6px; background: var(--brand); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.tabs button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.check { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: 0; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.check.disabled { opacity: .55; }

.toast { position: fixed; left: calc(50% + var(--rail-w) / 2); bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: toast-in .2s ease-out; z-index: 2000; font-size: .9rem; max-width: calc(100% - 32px); }

table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data th, table.data td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.scroll-x { overflow-x: auto; }

@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

@media print {
  .nav, .topbar .icon-btn, .no-print, .drawer-wrap { display: none !important; }
  html, body, #app, .view { height: auto; overflow: visible; position: static; transform: none; max-width: none; box-shadow: none; }
  body { background: #fff; color: #1C1C1C; }
  .card { box-shadow: none; break-inside: avoid; }
  .screen { max-width: none; padding: 0; }
}

/* ===== Polish layer: spacing, alignment and type for every SoilMap screen =====
   Content and data are untouched; this only refines how the shared components sit and read.
   (.lp screens keep their own component set below.) */
h1, h2, h3 { letter-spacing: -.01em; }
.card { border-radius: 16px; border-color: color-mix(in srgb, var(--line) 75%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 10px rgba(0, 0, 0, .035); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card h2 { font-size: 1.05rem; font-weight: 600; }
.card h3 { font-size: .98rem; font-weight: 600; margin-bottom: .5em; }
.card > p:last-child, .card > ul:last-child, .card > dl:last-child { margin-bottom: 0; }
.hero { border-radius: 20px; padding: var(--card-pad); }
p { margin: .5em 0; }

/* Lists: inset rows, aligned icon column, quiet chevrons */
.list.card { padding: 4px 0; overflow: hidden; }
.list.card > li { margin: 0 var(--card-pad); }
.list.card > li:has(> a.row, > button) { margin: 0; padding: 0 var(--card-pad); }
.list button, .list a.row { min-height: 52px; padding: 12px 0; gap: 12px; font-weight: 500; }
.list.card > li:has(> a.row) > a.row:active, .list.card > li:has(> button) > button:active { background: none; }
.list.card > li:has(> a.row:active, > button:active) { background: var(--surface-2); }
.list li { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.list .sub { font-weight: var(--fw-normal); margin-top: 1px; }
.r-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.r-ico .ico-svg, .r-ico .ico-img { width: 30px; height: 30px; }
.r-txt { flex: 1; min-width: 0; }
.chev { flex: none; color: var(--muted); font-size: 1.3rem; line-height: 1; opacity: .7; margin-left: auto; }

/* Key/value tables */
.kv { gap: 8px 14px; }
.kv dt { font-size: .9rem; }

/* Property rows */
.prop { padding: 12px 0; gap: 4px 12px; border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.prop .val { font-size: 1rem; }
.prop .meta { gap: 6px 8px; margin-top: 2px; }
.prop a.src, a.src { text-decoration: none; font-weight: 600; }

/* Badges: soft tinted pills (labels and wording unchanged) */
.badge { border: 0; color: var(--note-ink); background: var(--bb, var(--est-bg)); padding: 3px 9px 3px 8px; font-size: .68rem; letter-spacing: .04em; line-height: 1.3; border-radius: 20px; }   /* radius.badge */
/* Status is carried by the dot + the word, never by text colour alone (contrast + colour-blind safe). */
.badge::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--b, var(--est)); }
.chip { padding: 3px 10px; font-weight: 500; }

/* Buttons */
.btn { border-radius: var(--radius-btn); min-height: var(--touch); padding: 12px 16px; font-size: .95rem; text-align: center; line-height: 1.25;
  border-color: color-mix(in srgb, var(--line) 85%, var(--text) 15%); }
.btn.primary { box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 28%, transparent); }
.btn.block + .btn, .btn.block + .btn-row { margin-top: 10px; }
/* Each button takes its label's width and the row shares what is left; a pair that will not fit side by side
   stacks full-width instead of squeezing a label onto two lines. */
.btn-row .btn { flex: 1 1 auto; min-width: 0; }
.btn-row .btn { padding: 12px 10px; font-size: .92rem; }

/* Fields and selects */
.field { border-radius: var(--radius-input); min-height: var(--touch); transition: border-color .15s ease, box-shadow .15s ease; }
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
select.field, .card select, .map-top select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
label.small { display: block; }
label.small > .field, label.small > select { margin-top: 6px; }

/* Expandable rows: replace the raw ▶ marker with a chevron */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
details[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
details.closing > summary::after { transform: rotate(45deg) translateY(-2px); }   /* arrow turns back as the section slides shut (app.js) */
/* A summary row with a title and a badge: the title takes the free width, so every badge lines up in one
   right-hand column next to the chevron (no zig-zag after names of different lengths); long titles wrap. */
details > summary > :first-child:not(:last-child) { flex: 1 1 auto; min-width: 0; }
details > summary > :nth-child(2) { flex: none; }
details.mz-div, details.mz-dist, details.mz-upz { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
details.mz-div:last-of-type { border-bottom: 0; }
details.mz-div > summary { font-weight: 600; }

/* Callouts */
.warn { border-left-width: 3px; border-radius: 12px; padding: 12px 14px; }
.warn > summary { min-height: 24px; font-weight: 500; }
.warn ul { margin: 8px 0 0; padding-left: 18px; }
/* Icons and links in a note follow its #1C1C1C text (in dark the label-icon colour is too light for the fill). */
.warn .ico-svg, .warn a, .warn > summary::marker { color: var(--note-ink); }
.note { border-left-width: 3px; border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--surface-2) 55%, transparent); padding: 10px 14px; line-height: 1.55; }

/* Depth layers */
.depth-block { border-radius: 4px 14px 14px 4px; border-left-width: 5px; padding: 12px 14px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }

/* Settings / layer toggles */
.check { min-height: 48px; padding: 10px 0; border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }

/* Onboarding */
.step { border-radius: 16px; padding: 14px; align-items: center; }
.center-screen h1 { font-size: 1.6rem; }

/* Map overlays */
.searchbox { border-radius: 16px; min-height: 50px; }
.legend, .map-hint { border-radius: 12px; }
.legend { max-width: calc(100% - 84px); }   /* keep clear of the zoom buttons */
.legend-inline { gap: 4px 12px; }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--shadow) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; }

/* Tabs (chip switchers) */
.tabs { gap: 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: 8px 14px; font-weight: 500; font-size: .88rem; }

table.data th { color: var(--muted); font-weight: 600; font-size: .78rem; }
table.data tr:last-child td { border-bottom: 0; }
/* Report property tables: the same columns in every card, and the depth never breaks ("0–5 cm"). */
/* Map tab: neighbouring countries faded under the page colour; Bangladesh keeps its green border and a green drop shadow. */
path.bd-mask { fill: var(--bg); fill-opacity: .6; stroke: var(--brand); stroke-opacity: 1; }
path.bd-shadow { stroke: #375729; stroke-opacity: .45; }
/* NPK map: village names once zoomed in. */
.leaflet-tooltip.np-name { padding: 1px 5px; font-size: 11px; font-weight: 600; color: #1C1C1C; background: rgba(255, 255, 255, .85); border: 0; box-shadow: none; }
.leaflet-tooltip.np-name::before { display: none; }
:root[data-theme="dark"] path.bd-shadow { stroke-opacity: .3; }
:root[data-theme="dark"] path.bd-mask { stroke: #4E8038; }
table.data.rpt { table-layout: fixed; }
table.data.rpt td:first-child { width: 44%; }
table.data.rpt td:last-child { width: 4.6em; white-space: nowrap; text-align: right; }
/* An icon that leads a heading or a row name keeps a little space from the words after it. */
:is(h1, h2, h3, h4):has(> :is(.ico-svg, .ico-img):first-child) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop .name > :is(.ico-svg, .ico-img):first-child { margin-inline-end: .35em; }

/* ===== Welcome: full-bleed satellite slides of a real mouza, copy on a sheet below ===== */
.welcome { position: relative; min-height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.wl-hero { position: relative; z-index: 0; isolation: isolate; flex: 0 0 auto; height: 64vh; height: 64dvh; min-height: 340px; background: #24371C; }   /* keeps Leaflet's panes under the sheet */
.wl-map .leaflet-bottom { bottom: 20px; }
.wl-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.wl-track::-webkit-scrollbar { display: none; }
.wl-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; }
.wl-map { position: absolute; inset: 0; background: #24371C; }
.wl-map .leaflet-control-attribution { font-size: 9px; background: rgba(0, 0, 0, .35); color: #F1F7F2; border-radius: 6px 0 0 0; }
.wl-map .leaflet-control-attribution a { color: inherit; }
.wl-slide::after { content: ""; position: absolute; inset: 0; z-index: 400; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .42) 100%); }
.wl-pin { background: none; border: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.wl-pin svg { width: 100%; height: 100%; display: block; }
.wl-tag { position: absolute; left: 16px; bottom: 72px; z-index: 450; max-width: calc(100% - 32px); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #F1F7F2; font-size: .78rem; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wl-tag:empty { display: none; }
.wl-tag .wl-src { font-weight: 500; opacity: .8; }

.wl-top { position: absolute; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--top-safe)) 16px 0; }
.wl-brand { display: inline-flex; align-items: center; gap: 8px; color: #F1F7F2; font-weight: 700; letter-spacing: .08em; font-size: .9rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.wl-brand .wl-app { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .5); letter-spacing: .02em; }
.wl-skip { color: #F1F7F2; text-decoration: none; font-weight: 600; font-size: .88rem; padding: 6px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.wl-arrow { position: absolute; top: 50%; z-index: 500; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .18); color: #F1F7F2; font-size: 1.7rem; line-height: 1; cursor: pointer;
  padding: 0 0 3px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .15s ease, transform .12s ease; }
.wl-arrow:hover { background: rgba(255, 255, 255, .3); }
.wl-arrow:active { transform: scale(.92); }
.wl-arrow.prev { left: 12px; } .wl-arrow.next { right: 12px; }
@media (pointer: coarse) { .wl-arrow { display: none; } }   /* phones swipe */

.wl-dots { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 500; display: flex; justify-content: center; gap: 8px; }
.wl-dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.wl-dots button[aria-selected="true"] { width: 34px; background: #fff; }

.wl-sheet { position: relative; z-index: 2; flex: 1; margin-top: -20px; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; }
.wl-kicker { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.wl-copy { margin-bottom: 24px; }
.wl-copy h1 { font-size: 1.55rem; font-weight: 700; margin: 0 0 6px; }
.wl-copy p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.5; }
.wl-copy:not([hidden]) { animation: view-in .3s ease-out; }
.wl-sheet .btn { margin-top: auto; }
.wl-sub { margin: 12px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .wl-copy:not([hidden]) { animation: none; } }

/* My land — draw a field: each corner is a 28px draggable handle (big enough for a finger) with an amber ring. */
.land-handle { display: grid; place-items: center; cursor: grab; }
.land-handle span { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 3px solid #F57F17; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.land-handle.leaflet-drag-target, .land-handle:active { cursor: grabbing; }
.land-handle.leaflet-drag-target span { transform: scale(1.25); }
/* My land — the drawn field's corners (latitude / longitude, each opens in Google Maps) and the save form. */
.land-coords { width: 100%; margin: 6px 0 4px; font-size: .88rem; }
.land-coords th { text-align: left; font-weight: 600; color: var(--muted); font-size: .78rem; }
.land-coords td:last-child { width: 36px; text-align: right; }
.land-coords a .ico-svg { color: var(--icon-label); }
.land-crop { display: grid; grid-template-columns: 1fr 9.5rem; gap: 8px; align-items: end; }
.land-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: .88rem; line-height: 1.45; cursor: pointer; }
.land-consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: #375729; }

/* ===== Official land-survey plots screen (#/settlement) — MatirDoctor design language =====
   Tokens follow MatirDoctor (apps/mobile/constants/theme.ts): forest-green brand, #2E7D32 header with a
   wave edge, warm cream background, white 16px cards with a soft shadow, 52px fields, 14px segmented
   track, bottom-sheet pickers over a 40% scrim. Scoped to .lp so the rest of SoilMap is unchanged. */
.lp {
  --lp-brand: #375729; --lp-brand-hover: #51813b; --lp-header: #2e7d32; --lp-dark: #1f3d0c;
  --lp-bg: #fafaf5; --lp-card: #ffffff; --lp-soft: #f4f6f4; --lp-border: #e8e8e0;
  --lp-text: #1c1c1c; --lp-sub: #666666; --lp-on-dark: #f1f7f2; --lp-on-brand: #f1f7f2; --lp-tint: rgba(39, 174, 96, .16);
  --lp-plot: #2e7d32; --lp-plot-fill: #A5D6A7; --lp-area: #f39c12; --lp-warn: #C08A17;
  --lp-shadow: 0 2px 6px rgba(0, 0, 0, .07); --lp-shadow-up: 0 -4px 18px rgba(2, 32, 0, .12);
  position: fixed; inset: 0 0 var(--nav-h) var(--rail-w); display: flex; flex-direction: column;
  background: var(--lp-bg); color: var(--lp-text);
  font-family: var(--font);
}

.lp button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lp .lp-ico { width: 20px; height: 20px; flex: none; }   /* icons only — never Leaflet's overlay svg */
.lp :focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }
.lp-side { flex: none; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 2; }

/* Header band with MatirDoctor's wave edge */
.lp-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px 24px;
  background: var(--lp-header); color: var(--lp-on-dark); padding-top: max(10px, env(safe-area-inset-top)); }
.lp-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; background: var(--lp-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 375 20%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,8 Q94,22 187.5,8 T375,8 L375,20 L0,20 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 375 20%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,8 Q94,22 187.5,8 T375,8 L375,20 L0,20 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.lp-back { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--lp-dark); color: var(--lp-on-dark);
  display: grid; place-items: center; text-decoration: none; flex: none; }
.lp-back:hover { filter: brightness(1.15); }
.lp-head h1 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: .01em; }
.lp-head p { margin: 1px 0 0; font-size: 12px; opacity: .85; }

/* Controls card */
.lp-controls { position: relative; margin: -8px 16px 0; padding: 12px; background: var(--lp-card); border-radius: 16px;
  box-shadow: var(--lp-shadow); display: grid; gap: 10px; }
.lp-loc { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 6px; border: 0;
  background: transparent; border-radius: 12px; text-align: left; }
.lp-loc:hover { background: var(--lp-soft); }
.lp-loc > .lp-ico:first-child { color: var(--lp-brand); width: 24px; height: 24px; }
.lp-loc > svg:last-child { color: var(--lp-sub); }
.lp-loc .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-lbl { font-size: 12px; font-weight: 500; color: var(--lp-sub); }
.lp-val { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--lp-border); border-radius: 14px; }
.lp-seg button { border: 0; background: transparent; border-radius: 10px; padding: 9px 8px; font-size: 14px; font-weight: 500; }
.lp-seg button[aria-pressed="true"] { background: var(--lp-brand); color: var(--lp-on-brand); font-weight: 600; box-shadow: var(--lp-shadow); }
.lp-fields { display: grid; gap: 8px; grid-template-columns: 1fr; }
.lp-fields.two { grid-template-columns: 1fr 1fr; }
.lp-field { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  width: 100%; min-width: 0; min-height: 52px; padding: 6px 36px 6px 14px; text-align: left;
  border: 1px solid var(--lp-border); border-radius: 10px; background: var(--lp-card); }
.lp-field:hover { border-color: var(--lp-brand); }
.lp-field .lp-val { font-size: 14px; font-weight: 500; max-width: 100%; }
.lp-field > svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--lp-sub); }
.lp-field[disabled] { opacity: .55; cursor: default; }

/* Map */
.lp-map { position: relative; z-index: 1; flex: 1; min-height: 0; margin-top: 12px; }   /* own stacking layer: Leaflet panes stay below the panel */
.lp-map #map { position: absolute; inset: 0; }

/* Summary card (floats over the map on phones; sits in the side panel on wide screens) */
.lp-sum { position: fixed; left: calc(var(--rail-w) + 12px); right: 12px; bottom: calc(var(--nav-h) + 12px); z-index: 600; background: var(--lp-card); border-radius: 16px;
  box-shadow: var(--lp-shadow-up); padding: 6px 16px 14px; max-height: 52vh; overflow: auto; overscroll-behavior: contain; }
.lp-grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--lp-border); margin: 4px auto 8px; }
.lp-sum-head { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; }
.lp-sum-head .txt { flex: 1; min-width: 0; }
.lp-sum-head h2 { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; }
.lp-sum-head .sub { font-size: 13px; color: var(--lp-sub); margin-top: 1px; }
.lp-chev { color: var(--lp-sub); transition: transform .2s; margin-top: 2px; }
.lp-sum[aria-expanded="true"] .lp-chev { transform: rotate(180deg); }
.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.lp-stat { background: var(--lp-soft); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.lp-stat b { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-stat span { font-size: 11px; color: var(--lp-sub); }
.lp-more { margin-top: 12px; display: grid; gap: 12px; }
.lp-sum[aria-expanded="false"] .lp-more { display: none; }
.lp-note { font-size: 12px; color: var(--lp-sub); line-height: 1.5; margin: 0; }
.lp-note a { color: var(--lp-brand); }
.lp-warnline { font-size: 12.5px; color: var(--note-ink); background: var(--moderate-bg); border-left: 3px solid var(--moderate);
  border-radius: 10px; padding: 8px 10px; margin: 0; }   /* amber note pair */
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chip { border: 1px solid var(--lp-border); background: var(--lp-card); border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.lp-chip:hover { border-color: var(--lp-brand); color: var(--lp-brand); }
.lp-chip small { color: var(--lp-sub); font-weight: var(--fw-normal); margin-left: 4px; }
.lp-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--lp-sub); }
.lp-key i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lp-sectlbl { font-size: 11px; font-weight: 600; color: var(--lp-sub); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.lp .badge { border: 0; background: color-mix(in srgb, currentColor 13%, transparent); text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 20px; }
.lp-skel { height: 12px; border-radius: 6px; background: rgba(26, 26, 26, .08); margin: 8px 0; animation: lp-pulse 1.2s ease-in-out infinite; }
@keyframes lp-pulse { 50% { opacity: .45; } }
.lp-plot-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.lp-plot-tbl td { padding: 9px 0; border-top: 1px solid var(--lp-border); }
.lp-plot-tbl td:last-child { text-align: right; font-weight: 600; }
.lp-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 12px;
  border: 0; background: var(--lp-brand); color: var(--lp-on-brand); font-size: 15px; font-weight: 600; text-decoration: none; }
.lp-btn:hover { background: var(--lp-brand-hover); }
/* Primary (#375729) buttons, both themes (owner's rule, 2026-10-17): hover #4E8038, disabled #C8D6C8, with a
   short colour fade. The :root prefix outranks the dark theme's own .btn.primary colours further down. The map-sheet
   .lp-btn is #375729 only in light theme (light green in dark), so its states apply in light only. */
.btn.primary, .lp-btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease; }
@media (hover: hover) {
  :root .btn.primary:not(:disabled):hover, :root:not([data-theme="dark"]) .lp-btn:not(.ghost):not(:disabled):hover { background: #4E8038; border-color: #4E8038; }
}
html:root .btn.primary:disabled, html:root:not([data-theme="dark"]) .lp-btn:not(.ghost):disabled { background: #C8D6C8; border-color: #C8D6C8; color: #666666; opacity: 1; box-shadow: none; cursor: default; }
/* Outline buttons (border + text), both themes (owner's rule, 2026-10-17): a 3px border in the primary colours —
   #375729, hover #4E8038, disabled #C8D6C8 — with the same fade. Padding gives back the extra border so the
   button keeps its size. Text matches the border in light; in dark it stays #F1F7F2 (green text on the dark
   cards is too faint). The white-outlined button on the green place card (.btn.sm) is left as it is. */
html:root .btn:not(.primary):not(.ghost):not(.sm) { border: 3px solid #375729; color: #375729; padding: 10px 14px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.btn-row html:root .btn:not(.primary):not(.ghost):not(.sm) { padding: 10px 8px; }
@media (hover: hover) {
  html:root .btn:not(.primary):not(.ghost):not(.sm):not(:disabled):hover { border-color: #4E8038; color: #4E8038; }
}
html:root .btn:not(.primary):not(.ghost):not(.sm):disabled { border-color: #C8D6C8; color: #C8D6C8; opacity: 1; cursor: default; }
html:root[data-theme="dark"] .btn:not(.primary):not(.ghost):not(.sm), html:root[data-theme="dark"] .btn:not(.primary):not(.ghost):not(.sm):not(:disabled):hover { color: #F1F7F2; }
html:root[data-theme="dark"] .btn:not(.primary):not(.ghost):not(.sm):disabled { color: rgba(241, 247, 242, .45); }
.lp-btn.ghost { background: var(--lp-soft); color: var(--lp-text); }
.lp-btnrow { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.lp .leaflet-control-zoom { border: 0 !important; box-shadow: var(--lp-shadow) !important; border-radius: 12px; overflow: hidden; }
.lp .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; color: var(--lp-text); background: var(--lp-card); }

/* Bottom-sheet picker */
.lp-scrim { position: fixed; inset: 0; z-index: 1500; background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; justify-content: center;
  animation: lp-fade .15s ease-out; }
.lp-sheet { width: 100%; max-width: 560px; max-height: 78vh; display: flex; flex-direction: column; background: var(--lp-card);
  border-radius: 16px 16px 0 0; box-shadow: var(--lp-shadow-up); padding-bottom: env(safe-area-inset-bottom); animation: lp-up .2s ease-out; }
.lp-sheet-head { display: flex; align-items: center; gap: 4px; padding: 0 8px 8px 16px; }
.lp-sheet-head .txt { flex: 1; min-width: 0; }
.lp-sheet-head h2 { font-size: 17px; font-weight: 600; margin: 0; }
.lp-sheet-head .lp-step { font-size: 12px; color: var(--lp-sub); font-weight: 500; }
.lp-icon { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; }
.lp-icon:hover { background: var(--lp-soft); }
.lp-search { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 0 12px; min-height: 46px;
  border: 1px solid var(--lp-border); border-radius: 10px; color: var(--lp-sub); }
.lp-search:focus-within { border-color: var(--lp-brand); }
.lp-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--lp-text); min-width: 0; }
.lp-list { list-style: none; margin: 0; padding: 0 0 8px; overflow: auto; overscroll-behavior: contain; }
.lp-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0;
  border-top: 1px solid var(--lp-border); background: transparent; text-align: left; }
.lp-row:hover { background: var(--lp-soft); }
.lp-row[aria-selected="true"] { background: var(--lp-tint); color: var(--lp-brand); }
.lp-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-row .l { font-size: 15px; font-weight: 500; }
.lp-row[aria-selected="true"] .l { font-weight: 600; }
.lp-row .s { font-size: 12px; color: var(--lp-sub); }
.lp-row .c { font-size: 13px; color: var(--lp-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-row .c.zero { opacity: .6; }
.lp-empty { padding: 24px 16px; text-align: center; color: var(--lp-sub); font-size: 14px; }
@keyframes lp-up { from { transform: translateY(24px); opacity: .6; } }
@keyframes lp-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lp-scrim, .lp-sheet, .lp-skel, .view.enter, .toast { animation: none; } .drawer, .drawer-scrim { transition: none; } }

/* Wide screens: side panel + map, like a tablet maps app */
@media (min-width: 900px) {
  .lp { flex-direction: row; }
  .lp-side { width: 400px; border-right: 1px solid var(--lp-border); background: var(--lp-bg); overflow: auto; }
  .lp-map { margin-top: 0; }
  .lp-sum { position: static; margin: 12px 16px 16px; max-height: none; box-shadow: var(--lp-shadow); }
  .lp-sum .lp-grab { display: none; }
  .lp-scrim { align-items: center; }
  .lp-sheet { border-radius: 16px; max-height: 80vh; }
}

/* ===== Tablet / desktop: navigation rail + readable content column (still an app, not a web page) ===== */
@media (min-width: 768px) {
  :root { --nav-h: 0px; --rail-w: 88px; }
  .nav { top: 0; bottom: 0; left: 0; right: auto; width: var(--rail-w); height: auto; flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: calc(16px + var(--top-safe)) 0 16px; border-top: 0; border-right: 1px solid var(--line); background: var(--brand-soft); }
  .nav::before { content: ""; flex: none; width: 72px; height: 17px; margin: 4px auto 22px; background: url("/brand/logo-green-wide.png") center / contain no-repeat; }
  
  .nav a { flex: 0 0 auto; min-height: 64px; }
  .nav a .ico { width: 56px; height: 32px; }
  .screen { max-width: 760px; padding-left: 24px; padding-right: 24px; }
  .topbar { margin: 0 -24px; padding-left: 16px; padding-right: 16px; }
  .toast { bottom: 24px; }
  .map-fabs { bottom: 116px; right: 14px; }   /* above Leaflet's zoom buttons */
  .map-top { padding-left: 24px; padding-right: 24px; max-width: 560px; }
  .sheet { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); }
  .drawer { width: 340px; }
  /* Welcome: full-width imagery, copy in a centred column */
  .wl-hero { height: 62vh; height: 62dvh; }
  .wl-sheet > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  .wl-tag { left: 32px; }
  .wl-sheet .btn { margin-top: 8px; }   /* tall windows: keep the button with its copy */
}
@media (min-width: 1200px) {
  .screen { max-width: 860px; }
}

/* ===== MatirDoctor logo ===== (official wordmark only; see ui.js logo()) */
.brand-logo { display: block; height: auto; max-width: 100%; }
.brand-logo.lg-alt { display: none; }

.brand-pill { gap: 8px; font-weight: 600; letter-spacing: .02em; }
.brand-pill .bp-sep { width: 1px; height: 16px; background: var(--line); }
.brand-pill { height: 40px; }   /* same height as the round menu button beside it */
.hero-logo { display: flex; justify-content: center; margin: 4px 0 10px; }
.splash .logo { display: flex; justify-content: center; }
.splash h1 { letter-spacing: .04em; font-weight: 600; }

/* ===== Home dashboard ===== */
.home-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: 60px; margin: 0 -16px;
  padding: calc(8px + var(--top-safe)) 8px 8px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hb-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.hb-app { padding-left: 8px; border-left: 1px solid var(--line); font-weight: 600; font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-bar .lang-btn { flex: none; }
/* Light / Dark button (left of the language button): icon + word; phones show the icon only (it keeps its aria-label). */
@media (max-width: 479px) { .theme-btn .tb-lbl { display: none; } .theme-btn { padding: 0 10px; } }
.hb-brand .brand-logo { flex: none; }
@media (max-width: 374px) { .hb-app { display: none; } .lang-btn { padding: 0 10px; } }
/* Phones: the language button drops its icon (its word already says it) so the app name fits beside the logo. */
@media (max-width: 440px) { .home-bar #lang .ico-svg { display: none; } .home-bar { gap: 6px; } }   /* small phones: logo + language + menu only */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: .85rem; cursor: pointer; }
.lang-btn .ico-svg { width: 18px; height: 18px; color: var(--icon-nav); }
.hcard { padding: var(--card-pad); }
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.hc-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 600; }
.hc-head h2 .ico-svg { width: 24px; height: 24px; }
.hc-link { display: inline-flex; align-items: center; min-height: 40px; font-size: .85rem; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.hc-link .ico-svg { width: 18px; height: 18px; color: currentColor; }
/* "See all": the underline grows from the left edge of the text to the right on hover / keyboard focus. */
.hc-link .hc-txt { background: linear-gradient(currentColor, currentColor) left bottom / 0% 1.5px no-repeat; padding-bottom: 1px; transition: background-size .25s ease-out; }
.hc-link:hover .hc-txt, .hc-link:focus-visible .hc-txt { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) { .hc-link .hc-txt { transition: none; } }
.hc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); margin: 12px 0 8px; }
.hc-sub:first-child { margin-top: 0; }
.place { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.place .ico-svg, .place a { color: var(--brand-ink); }
.pl-row { display: flex; align-items: flex-start; gap: 10px; }
.pl-ico .ico-svg { width: 30px; height: 30px; }
.pl-txt { flex: 1; min-width: 0; }
.pl-txt h1 { font-size: 1.25rem; font-weight: 600; margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-txt p { margin: 2px 0 0; opacity: .9; font-size: .9rem; }
.place .btn.sm { min-height: 40px; padding: 6px 14px; background: transparent; border-color: color-mix(in srgb, var(--brand-ink) 55%, transparent); color: var(--brand-ink); font-size: .85rem; }
.pl-meta { margin: 10px 0 0; font-size: .8rem; opacity: .85; }
.fresh { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 500;
  background: color-mix(in srgb, var(--brand-ink) 16%, transparent); }
.fresh .ico-svg { width: 16px; height: 16px; }
.fresh.off { background: var(--offline-bg); color: var(--note-ink); }
.fresh.off .ico-svg { color: var(--text); }
.season { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.season li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); border-left: 4px solid var(--brand); }
.season strong { font-size: .8rem; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
.src-more summary { cursor: pointer; font-size: .8rem; color: var(--brand); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.t-l { font-size: .75rem; color: var(--muted); }
.t-v { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.adv { padding: 12px 0; border-top: 1px solid var(--line); }
.adv:first-child { border-top: 0; padding-top: 0; }
.adv h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .98rem; font-weight: 600; margin: 0 0 8px; }
.adv-q { display: grid; gap: 4px; margin: 0; }
.adv-q dt { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.adv-q dd { margin: 0; font-size: .9rem; }
.crop-list { list-style: none; margin: 0 0 6px; padding: 0; }
.crop-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.crop-list li:last-child { border-bottom: 0; }
.cl-name { font-weight: 600; min-width: 0; }
.cl-season { display: block; font-weight: var(--fw-normal); }
.cl-meta { display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.cl-var { grid-column: 1 / -1; }
.sat-row .t-v { font-size: 1.6rem; display: block; }
.sat-row .t-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chip-place { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px;
  background: var(--brand-soft); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 500; font-size: .9rem; white-space: nowrap; }
.chip-place .ico-svg { width: 18px; height: 18px; }
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border-radius: 14px;
  background: var(--brand-soft); color: var(--text); text-decoration: none; font-size: .82rem; font-weight: 600; text-align: center; }
.qa-ico .ico-svg, .qa-ico .ico-img { width: 28px; height: 28px; }
.qa:active { transform: scale(.96); }
.home-empty { text-align: center; }
.home-empty h2 { justify-content: center; }
.home-choose { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 560px) { .home-choose { grid-template-columns: repeat(3, 1fr); } .qa-grid { grid-template-columns: repeat(6, 1fr); } }

/* ===== Farmer-friendly Home (owner 2026-10-25): design only. Plain title on top, the official name small under
   it; bigger type, icons and tap areas; one colour signal per value (SRDI's own class word). ===== */
.hc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hc-term, .t-term { display: block; font-size: .85rem; font-weight: var(--fw-normal); color: var(--muted); line-height: 1.3; letter-spacing: 0; text-transform: none; }
.home .hcard { padding: 20px; margin: 20px 0; }   /* owner's 20px rule: inside each card and between cards */
.home .tiny { font-size: .85rem; } .home .small { font-size: .92rem; } .home .badge { font-size: .78rem; }
.home .hc-head { align-items: flex-start; margin-bottom: 20px; }
.home .hc-head h2 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; gap: 10px; align-items: flex-start; }
.home .hc-head h2 .h-ico, .home .hc-head h2 .ico-svg { width: 24px; height: 24px; margin-top: 1px; }
.home .hc-link { flex: none; min-height: 40px; display: inline-flex; align-items: center; font-weight: 600; }
.home .hc-sub { font-size: .95rem; color: var(--text); margin: 20px 0 12px; }
.home .hc-sub > span:not(.badge) { display: flex; flex-direction: column; }
.home .hc-sub { align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; }
.home .hc-sub .badge { flex: none; white-space: nowrap; margin-top: 2px; }
.home .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.home .tile { padding: 12px 14px; gap: 4px; border-left: 3px solid var(--line); border-radius: 8px; }
.home .t-l { font-size: .9rem; color: var(--text); font-weight: 500; line-height: 1.3; }
.home .t-v { font-size: 1.1rem; font-weight: 600; }
.home .tile.lvl-low { border-left-color: #C62828; } .home .tile.lvl-low .t-v { color: #C62828; }
.home .tile.lvl-mid { border-left-color: #F9A825; } .home .tile.lvl-mid .t-v { color: #F9A825; }
.home .tile.lvl-good { border-left-color: #375729; } .home .tile.lvl-good .t-v { color: #375729; }
.home .season li { padding: 12px 14px; border-left-width: 3px; border-radius: 8px; }
.home .season strong { font-size: .9rem; text-transform: none; letter-spacing: 0; }
.home .season span { font-size: 1.05rem; }
.home .adv h3 { font-size: 1.05rem; }
.home .adv-q dt { font-size: .9rem; text-transform: none; letter-spacing: 0; margin-top: 8px; }
.home .adv-q dd { font-size: 1rem; }
.home .adv-q dd.adv-do { background: var(--brand-soft); border-left: 3px solid var(--brand); border-radius: 8px; padding: 10px 12px; }
.home .crop-list li { padding: 12px 0; }
.home .cl-name { font-size: 1.05rem; font-weight: 600; }
.home .qa { min-height: 84px; font-size: .92rem; font-weight: 500; gap: 8px; }
.home .qa-ico .h-ico { width: 28px; height: 28px; }
.home .btn.block { min-height: 52px; font-size: 1rem; }
/* Type weights, all screens (owner 2026-10-26): app name, card and item titles semi-bold; the line under a title,
   question labels and the main value line of a list medium. */
.hb-app, .topbar h1, .card h2, .card h3, .hc-head h2, .adv h3, .lp-head h1, .lp-sum-head h2, .lp-sheet-head h2 { font-weight: 600; }
.hc-term, .t-term, .adv-q dt, .kv dt, .season li > span:first-of-type, .list .sub { font-weight: 500; }
/* ===== Farmer-friendly Soil screen (owner 2026-10-26): same anatomy as Home. Design only. ===== */
.soilx .card { margin: 20px 0; }   /* owner's 20px rule: inside each card and between cards */
.soilx .t-term, .soilx .hc-term { margin-top: 1px; }
.sx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sx-head h3 { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 1.05rem; line-height: 1.3; min-width: 0; }
.sx-head h3 .ico-svg, .sx-head h3 .h-ico, .sx-head h3 img { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.sx-head .badge { flex: none; margin-top: 2px; }
.sx-intro { margin: 0 0 8px; }
.sx-part { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.sx-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.sx-l { display: flex; flex-direction: column; font-size: .92rem; color: var(--text); min-width: 0; }
.sx-v { text-align: right; font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.soilx .hero .sx-kicker { font-size: .95rem; font-weight: 600; }
.soilx .hero .sx-kicker .t-term { color: inherit; opacity: .85; }
.soilx .prop .name { display: flex; flex-direction: column; font-size: .98rem; }
.soilx .prop .meta .tiny, .soilx .tiny { font-size: .85rem; }
.soilx .badge { font-size: .78rem; }
.soilx .menu .r-txt { display: flex; flex-direction: column; font-size: .98rem; }
.sx-q { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sx-q strong { display: flex; flex-direction: column; }
/* Satellite values in plain words (owner 2026-10-26): what each number means, under the number. */
.sat-help { margin: 4px 0 12px; padding: 12px 14px; border-radius: 8px; background: var(--brand-soft); border-left: 3px solid var(--brand); font-size: .92rem; line-height: 1.45; }
.sat-mean { display: block; margin-top: 2px; font-size: .85rem; font-weight: var(--fw-normal); color: var(--muted); line-height: 1.4; }
.sat-mean strong { display: block; color: var(--text); font-weight: 600; }
.kv dt .t-term, .sat-lbl .t-term { display: block; font-size: .85rem; color: var(--muted); font-weight: 500; }
.sat-lbl { display: flex; flex-direction: column; }
/* ===== Farmer-friendly Crop screen (owner 2026-10-26): same anatomy as Home and Soil. Design only. ===== */
.cropx { margin: 20px 0; }
.cropx .sx-head { margin-bottom: 8px; }
.cx-hint { margin: 12px 0 4px; padding: 10px 12px; border-radius: 8px; background: var(--brand-soft); border-left: 3px solid var(--brand); font-size: .92rem; }
.cropx .list li.cx-grp { display: block; padding: 20px 0 6px; border: 0; font-size: .95rem; font-weight: 600; color: var(--brand); }
.cropx .list li.cx-grp.cx-s2 { color: #F9A825; } .cropx .list li.cx-grp.cx-s3, .cropx .list li.cx-grp.cx-n { color: #C62828; }
.cx-sum { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; gap: 8px; min-height: 56px; }
.cx-name strong { font-size: 1.05rem; font-weight: 600; }
.cx-name .sub { display: block; font-size: .88rem; }
.cropx .badge { font-size: .78rem; }
.cx-kv { padding-bottom: 12px; }
.cx-kv dt { color: var(--text); font-weight: 600; display: flex; flex-direction: column; }
/* ===== Farmer-friendly Map + Layers (owner 2026-10-26): labels and copy only. ===== */
.map-fabs { gap: 30px; padding-bottom: 24px; }   /* room for the label under the lowest button, above the zoom control */
.fab { position: relative; }
.fab-lbl { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 7px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow); font-size: .72rem; font-weight: 600; color: var(--text); line-height: 1.4; pointer-events: none; }
.map-hint { display: flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 500; padding: 10px 14px; }
.map-hint .ico-svg { width: 20px; height: 20px; flex: none; color: var(--brand); }
.searchbox { font-size: .98rem; }
.ps-name { font-size: 1.1rem; }
.legend .lg-t { display: flex; flex-direction: column; margin-bottom: 4px; }
.legend .lg-t .t-term { font-size: .72rem; }
.lg-words { font-weight: 600; color: var(--text); }
.lyr-l { display: flex; flex-direction: column; font-size: .98rem; }
/* Map is the first page (owner 2026-10-26): My land row under the search box. */
.land-bar { display: flex; gap: 8px; pointer-events: none; }
.land-bar > * { pointer-events: auto; }
.land-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; font-size: .92rem; font-weight: 600; }
.land-pill .ico-svg, .land-pill img { width: 20px; height: 20px; }
.land-pill.add { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.land-pill.add .ico-svg { color: var(--brand-ink); }
.lp-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brand-soft); color: var(--text); font-size: .8rem; display: inline-grid; place-items: center; }
/* ===== Aerial / GIS / 3D look (owner 2026-10-26). Design only: same screens, data and actions. ===== */
/* Survey-map paper: faint contour lines behind every screen. */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23375729' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M-10 60c40-30 80 20 120-5s80-30 140 5'/%3E%3Cpath d='M-10 95c45-25 85 25 125 0s85-25 135 8'/%3E%3Cpath d='M-10 130c40-20 90 30 130 2s80-22 130 10'/%3E%3Cpath d='M-10 170c50-28 80 22 120-2s90-28 140 6'/%3E%3Cpath d='M-10 210c40-24 90 26 125 0s85-26 135 6'/%3E%3Cpath d='M-10 20c45-22 85 22 125-3s85-20 135 6'/%3E%3C/svg%3E"); background-size: 240px 240px; }
/* Aerial-photo headers: the real satellite tile of the chosen place under a green survey tint. */
.card.aerial { position: relative; overflow: hidden; color: #F1F7F2;
  background: linear-gradient(160deg, rgba(1, 24, 0, .78), rgba(55, 87, 41, .70)), var(--aerial) center / cover, #375729; border-color: transparent; }
.card.aerial::after { content: ''; position: absolute; inset: 10px; pointer-events: none; border-radius: 10px;
  background: linear-gradient(#A5D6A7, #A5D6A7) left top / 14px 2px no-repeat, linear-gradient(#A5D6A7, #A5D6A7) left top / 2px 14px no-repeat,
  linear-gradient(#A5D6A7, #A5D6A7) right top / 14px 2px no-repeat, linear-gradient(#A5D6A7, #A5D6A7) right top / 2px 14px no-repeat,
  linear-gradient(#A5D6A7, #A5D6A7) left bottom / 14px 2px no-repeat, linear-gradient(#A5D6A7, #A5D6A7) left bottom / 2px 14px no-repeat,
  linear-gradient(#A5D6A7, #A5D6A7) right bottom / 14px 2px no-repeat, linear-gradient(#A5D6A7, #A5D6A7) right bottom / 2px 14px no-repeat; opacity: .85; }   /* camera-frame corners */
.card.aerial .muted, .card.aerial .t-term, .card.aerial .hc-term, .card.aerial p, .card.aerial a, .card.aerial .ico-svg { color: #F1F7F2; }
.card.aerial .mono, .card.aerial .pl-meta { color: #DAEDD2; }
/* GIS readout on the main map: north arrow, centre coordinates and zoom, metric scale bar. */
.gis-hud { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; border-radius: 10px;
  background: rgba(1, 24, 0, .78); color: #F1F7F2; font-size: .75rem; box-shadow: var(--shadow); pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hud-d { white-space: nowrap; color: #FFE0AE; }
.hud-d::before { content: "·"; margin-right: 6px; color: #F1F7F2; opacity: .6; }
.map-screen.picking .gis-hud { display: none; }
.hud-n { display: inline-flex; flex-direction: column; align-items: center; font-weight: 700; line-height: 1; color: #A5D6A7; }
.hud-n i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #A5D6A7; order: -1; margin-bottom: 2px; }
.hud-c { white-space: nowrap; }
.hud-s { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.hud-s i { display: block; height: 5px; border: 1.5px solid #F1F7F2; border-top: 0; }
.hud-s span { font-size: .7rem; line-height: 1; }
/* Fields raised like 3D blocks over the imagery. */
.leaflet-overlay-pane path.land-3d { filter: drop-shadow(2px 5px 0 rgba(1, 24, 0, .55)) drop-shadow(0 0 6px rgba(165, 214, 167, .5)); }
.relief-tiles { mix-blend-mode: multiply; }
/* Land use / land cover (ESA WorldCover): map key and the Soil-screen card. */
.lc-tiles canvas { image-rendering: pixelated; }
.lc-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 4px; }
.lc-keys span { display: flex; align-items: center; gap: 5px; font-size: .72rem; }
.lc-keys i, .lc-n i { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.lc-at { margin: 0 0 10px; font-size: .98rem; }
.lc-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.lc-n { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.lc-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.lc-bar b { display: block; height: 100%; border-radius: 5px; }
.lc-p { text-align: right; font-weight: 600; font-size: .95rem; display: flex; flex-direction: column; line-height: 1.2; }
.lc-p small { font-weight: var(--fw-normal); font-size: .75rem; color: var(--muted); }
/* 3D view */
.v3d-wrap { position: relative; margin: 12px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.v3d-map { height: min(62vh, 560px); background: #011800; }
.v3d-tools { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; z-index: 2; pointer-events: none; }
.v3d-btn { pointer-events: auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: var(--shadow); }
.v3d-status { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(1, 24, 0, .8); color: #F1F7F2; }
.v3d-status .ico-svg { width: 18px; height: 18px; }
/* Map controls as GIS glass panels. */
.legend, .map-hint, .fab, .searchbox, .pill { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (min-width: 768px) {
  .home-bar { margin: 0 -24px; padding-left: 24px; padding-right: 16px; }
  .hb-brand .brand-logo { display: none !important; }   /* the side rail already carries the logo */
  .hb-app { border-left: 0; padding-left: 0; font-size: 1.1rem; }
}
   /* brand.primary / text.onDark */

/* Loading skeleton: shape of the content, no spinner jump. Respects reduced motion. */
.skel { display: grid; gap: 10px; margin: 12px 0; }
.skel span { display: block; height: 84px; border-radius: var(--radius); background: rgba(26, 26, 26, .08); animation: skel 1.2s ease-in-out infinite alternate; }   /* overlay.skeletonBase */
.hcard .skel span { height: 18px; border-radius: 8px; }
/* Satellite read in progress: a spinning ring beside the wait note (10–20 s). */
.sat-loading { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; color: var(--brand); }
.sat-loading .spinner { flex: none; margin: 0; }
@keyframes skel { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skel span, .view.enter, .pick-sheet, .toast { animation: none !important; } }

/* App-wide offline bar (alert.offlineBar) */
.offline-bar { position: fixed; left: var(--rail-w); right: 0; top: 0; z-index: 1500; display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: calc(6px + var(--top-safe)) 12px 6px; background: var(--offline-bg); color: var(--note-ink); font-size: .8rem; font-weight: 500; text-align: center; }
.offline-bar .ico-svg { width: 18px; height: 18px; flex: none; color: var(--text); }
/* Keyboard focus is always visible. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Splash progress bar (replaces the spinner): #F1F7F2 fill on a faint track, 32 px tall. */
.splash-bar { position: relative; width: min(300px, 78vw); height: 32px; margin: 28px auto 10px; border-radius: 16px; overflow: hidden;
  background: rgba(241, 247, 242, .22); box-shadow: inset 0 0 0 1px rgba(241, 247, 242, .35); }
.splash-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 16px; background: #F1F7F2; }
.splash-pct { position: absolute; inset: 0 auto 0 0; width: min(300px, 78vw); display: grid; place-items: center; font-size: .9rem; font-weight: 600;
  color: #F1F7F2; font-variant-numeric: tabular-nums; }
.splash-fill { overflow: hidden; }
.splash-fill .splash-pct { color: #375729; }   /* same label, clipped to the filled part */
.splash-msg { opacity: .85; margin: 0; }
/* Bangla joins letters into conjuncts — letter-spacing would break words apart. */
:lang(bn) .splash h1, :lang(bn) .splash .sub { letter-spacing: 0; }

/* ===== Tab bar: supplied icon pairs (64 px PNGs shown at 24 px) ===== */
.nav-img { width: 24px; height: 24px; display: block; }
.nav-img.f, .nav a.active .nav-img.o { display: none; }
.nav a.active .nav-img.f { display: block; }
/* Labels: #1C1C1C — medium when not selected, semi-bold when selected. */
.nav a, .nav a .lbl { color: var(--icon-nav); font-weight: 500; }
.nav a.active, .nav a.active .lbl { font-weight: 600; }
/* The PNGs are black; invert them where the tab bar is dark. */

/* ===== Home: supplied green (and one white) icons ===== */
.h-ico { width: 24px; height: 24px; display: inline-block; flex: none; vertical-align: middle; }
.hc-head h2 .h-ico { width: 24px; height: 24px; }
.qa-ico .h-ico { width: 28px; height: 28px; }
.pl-ico .h-ico { width: 30px; height: 30px; }
/* Dark mode: the green artwork is brightened so it stays visible on the dark green cards (white pin unchanged). */

/* =====================================================================================================
   Field design (dark, default) — immersive deep-green app with glass cards, MatirDoctor green for the main
   action, pill buttons and a floating tab bar with a round centre button (Map). Light theme unchanged.
   ===================================================================================================== */

/* Depth: soft field-green glows behind every screen (no image download). */

/* Cards: frosted glass, large radius, hairline light border. */

/* Top bar: transparent over the screen, blurred. */

/* Buttons: pills. Primary = lime with dark text; secondary = glass. */

/* ---- Floating tab bar with a round centre button (both themes) ---- */
@media (max-width: 767px) {
  .nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 70px; padding: 0 6px;
    border-radius: 35px; border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0, 0, 0, .22); align-items: center; overflow: visible; }
  :root { --nav-h: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .nav a { height: 100%; }
  /* Round Map button: raised, but green only when Map is the open tab — otherwise a light circle like a
     normal tab, so it never looks selected while another tab is. */
  .nav a.nav-main .ico { width: 60px; height: 60px; border-radius: 50%; margin-top: -26px; background: var(--surface);
    border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .10), 0 0 0 5px var(--bg); }
  .nav a.nav-main.active .ico { background: var(--brand); border-color: var(--brand); box-shadow: 0 8px 22px rgba(55, 87, 41, .45), 0 0 0 5px var(--bg); }
  .nav a.nav-main.active .nav-img { filter: invert(1); }   /* white filled icon on the green circle */
  .nav a.nav-main .nav-img { width: 28px; height: 28px; }
  .nav a.nav-main .lbl { margin-top: 2px; }
  .toast { bottom: calc(var(--nav-h) + 8px); }
}
/* Tablet/desktop side rail: Map is an ordinary tab (no circle). */
@media (min-width: 768px) {
  .nav a.nav-main .ico { width: 56px; height: 32px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}

/* ---- Map overlays: glass ---- */

/* ---- Home ---- */
/* Place card: the real satellite view of the chosen place under a dark gradient (like the field photos). */

/* Section headers: icon in a round badge, like the stat tiles in the design. */

/* Menu rows, lists, kv tables */

/* Land-plot / NPK panels keep their own tokens — align them with the field design. */

/* Phones: the map runs under the floating tab bar; everything that sits on the map moves up by the bar's height. */
@media (max-width: 767px) {
  .map-screen { bottom: 0; }
  .map-screen .leaflet-bottom { bottom: var(--nav-h); }
  .map-fabs { bottom: calc(var(--nav-h) + 112px); }
  .map-hint { bottom: calc(var(--nav-h) + 16px); }
  .legend { bottom: calc(var(--nav-h) + 66px); }
  .pick-sheet { bottom: var(--nav-h); border-radius: 26px; left: 10px; right: 10px; }
  .map-screen.picking .map-fabs { bottom: calc(var(--nav-h) + var(--sheet-h, 0px) + 140px); }
  .map-screen.picking .leaflet-bottom { bottom: calc(var(--nav-h) + var(--sheet-h, 0px)); }
}

/* Dark design: the street basemap is dimmed a little so it sits in the dark UI (still fully readable). */

/* Hero cards (soil profile summary, About): lime-tinted glass with light text in the dark design. */

/* =====================================================================================================
   Dark theme — ONLY when the user picks Dark on Home (light is the default; the phone's own dark mode never
   switches it). Page #001001 (owner's choice); everything else MatirDoctor colours: button.pressed #24371C cards,
   text.onDark #F1F7F2, greenTint #DAEDD2 / seriesSecondary #A5D6A7 accents, brand.primary #375729 fills.
   Colour-coded notes keep their four light fills with #1C1C1C text (same as light).
   ===================================================================================================== */
:root[data-theme="dark"] {
  --bg: #001001; --surface: #24371C; --surface-2: rgba(241, 247, 242, .06); --brand-soft: rgba(241, 247, 242, .06);
  --brand-tint: rgba(218, 237, 210, .18); --text: #F1F7F2; --muted: rgba(241, 247, 242, .72); --line: rgba(241, 247, 242, .12);
  --brand: #DAEDD2; --brand-2: #A5D6A7; --brand-strong: #A5D6A7; --brand-ink: #1F3D0C; --accent: #A5D6A7;
  --soil: #F9A825; --icon-nav: #F1F7F2; --icon-label: #DAEDD2;
  --glass: rgba(241, 247, 242, .06); --glass-strong: rgba(36, 55, 28, .9); --glass-line: rgba(241, 247, 242, .12);
  --shadow: 0 10px 30px rgba(0, 0, 0, .28);
  --lp-brand: #A5D6A7; --lp-brand-hover: #DAEDD2; --lp-header: #24371C; --lp-dark: #1F3D0C;
  --lp-bg: #001001; --lp-card: #24371C; --lp-soft: rgba(241, 247, 242, .06); --lp-border: rgba(241, 247, 242, .12);
  --lp-text: #F1F7F2; --lp-sub: rgba(241, 247, 242, .72); --lp-on-dark: #F1F7F2; --lp-on-brand: #1F3D0C; --lp-tint: rgba(218, 237, 210, .16);
  color-scheme: dark;
}
:root[data-theme="dark"] body, :root[data-theme="dark"] #app { background: #001001; }   /* owner's dark background */
:root[data-theme="dark"] .view { background: transparent; }
:root[data-theme="dark"] .card { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: none; }
:root[data-theme="dark"] .card h2, :root[data-theme="dark"] .card h3 { color: var(--text); }
:root[data-theme="dark"] .list li, :root[data-theme="dark"] .crop-list li, :root[data-theme="dark"] .adv { border-color: var(--line); }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .home-bar { background: rgba(0, 16, 1, .85); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root[data-theme="dark"] .btn { background: var(--glass); border-color: var(--glass-line); color: var(--text); }
:root[data-theme="dark"] .btn.primary { background: #375729; border-color: #375729; color: #F1F7F2; }
:root[data-theme="dark"] .btn.primary .ico-svg { color: #F1F7F2; }
:root[data-theme="dark"] .btn.ghost { background: transparent; border-color: transparent; color: var(--brand); }
:root[data-theme="dark"] .field, :root[data-theme="dark"] select.field { background-color: var(--glass); border-color: var(--glass-line); color: var(--text); }
:root[data-theme="dark"] .chip, :root[data-theme="dark"] .pill { background: var(--glass); border-color: var(--glass-line); color: var(--text); }
:root[data-theme="dark"] a { color: var(--brand); }
:root[data-theme="dark"] .skel span { background: rgba(241, 247, 242, .07); }
:root[data-theme="dark"] .toast { background: #F1F7F2; color: #1F3D0C; }
/* Logos and the black PNG icons. */
:root[data-theme="dark"] .brand-logo.lg-main { display: none; }
:root[data-theme="dark"] .brand-logo.lg-alt { display: block; }
:root[data-theme="dark"] .nav-img { filter: invert(1); }
:root[data-theme="dark"] .h-ico:not([src*="_white"]) { filter: brightness(2.4) saturate(.85); }
:root[data-theme="dark"] .stars.good .ico-svg { color: #A5D6A7; }   /* #375729 is too dark on the dark cards */
:root[data-theme="dark"] .ico-crop .c-g { display: none; }
:root[data-theme="dark"] .ico-crop .c-k { display: block; filter: invert(1); }
:root[data-theme="dark"] .ico-crop .c-f { filter: invert(1); }
:root[data-theme="dark"] .drawer-list a.active .ico-crop .c-k { display: none; }
:root[data-theme="dark"] .ico-png-k { filter: invert(1); }
:root[data-theme="dark"] .ico-png-g { filter: brightness(2.4) saturate(.85); }
/* Tab bar / rail. */
:root[data-theme="dark"] .nav { background: var(--glass-strong); border-color: var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
:root[data-theme="dark"] .nav a:not(.active):not(.nav-main) .nav-img { opacity: .72; }
:root[data-theme="dark"] .nav a.nav-main .ico { background: #24371C; border-color: var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 0 0 5px var(--bg); }
:root[data-theme="dark"] .nav a.nav-main.active .ico { background: #375729; border-color: #375729; }
:root[data-theme="dark"] .nav a.nav-main.active .nav-img { filter: invert(1); }
@media (min-width: 768px) {
  :root[data-theme="dark"] .nav { background: rgba(0, 16, 1, .92); border-right-color: var(--line); }
  :root[data-theme="dark"] .nav::before { background-image: url("/brand/logo-white-wide.png"); }
  :root[data-theme="dark"] .nav a.nav-main .ico { background: none; border: 0; box-shadow: none; }
}
/* Map overlays, sheets, Leaflet controls. */
:root[data-theme="dark"] .searchbox, :root[data-theme="dark"] .brandbar .pill, :root[data-theme="dark"] .fab,
:root[data-theme="dark"] .map-hint, :root[data-theme="dark"] .legend {
  background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--text); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root[data-theme="dark"] .pick-sheet, :root[data-theme="dark"] .sheet, :root[data-theme="dark"] .drawer {
  background: rgba(36, 55, 28, .96); border-top: 1px solid var(--glass-line); color: var(--text); }
:root[data-theme="dark"] .leaflet-bar a, :root[data-theme="dark"] .leaflet-control-zoom a { background: var(--glass-strong) !important; color: var(--text) !important; border-color: var(--glass-line) !important; }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(0, 16, 1, .75) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--brand) !important; }
:root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip, :root[data-theme="dark"] .leaflet-tooltip {
  background: #24371C; color: var(--text); border-color: var(--glass-line); }
/* Home. */
:root[data-theme="dark"] .place { background: #375729; color: #F1F7F2; border: 1px solid var(--glass-line); }
:root[data-theme="dark"] .place .ico-svg, :root[data-theme="dark"] .place a { color: #F1F7F2; }
:root[data-theme="dark"] .place .btn.sm { color: #F1F7F2; border-color: rgba(241, 247, 242, .5); background: transparent; }
:root[data-theme="dark"] .season li { background: rgba(218, 237, 210, .08); border-left-color: var(--brand); }
:root[data-theme="dark"] .season strong { color: var(--brand); }
:root[data-theme="dark"] .tile, :root[data-theme="dark"] .qa, :root[data-theme="dark"] .chip-place { background: rgba(241, 247, 242, .05); border: 1px solid var(--glass-line); color: var(--text); }
:root[data-theme="dark"] .qa-ico, :root[data-theme="dark"] .hc-head h2 .h-ico { background: rgba(218, 237, 210, .12); border-radius: 50%; }
:root[data-theme="dark"] .lang-btn { background: var(--glass); border-color: var(--glass-line); color: var(--text); }
:root[data-theme="dark"] .lang-btn .ico-svg { color: var(--text); }
:root[data-theme="dark"] .drawer-list a.active { background: rgba(218, 237, 210, .12); color: var(--brand); }
:root[data-theme="dark"] .list.menu .r-ico .ico-svg { color: #4E8038; }   /* Brand/Primary/700 (owner 2026-10-25) */
:root[data-theme="dark"] table.data th, :root[data-theme="dark"] table.data td { border-color: var(--line); }

/* ===== Tab bar / side rail (owner's rule, 2026-10-14): LIGHT theme #F1F7F2 with the dark icons and labels;
   DARK theme brand green #375729 with light (#F1F7F2) icons and labels, selected = filled icon + semibold label.
   In dark the round Map button is a green circle, and turns #F1F7F2 (dark icon) when Map is open. ===== */
:root[data-theme="light"] .nav { background: #F1F7F2; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="dark"] .nav { background: #375729; border-color: #375729; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="dark"] .nav a, :root[data-theme="dark"] .nav a .lbl, :root[data-theme="dark"] .nav .ico-svg { color: #F1F7F2; }
:root[data-theme="dark"] .nav .nav-img { filter: invert(1); opacity: 1; }
:root[data-theme="dark"] .nav a:not(.active):not(.nav-main) .nav-img { opacity: .85; }
@media (max-width: 767px) {
  :root[data-theme="dark"] .nav { box-shadow: 0 12px 34px rgba(0, 0, 0, .25); }
  :root[data-theme="dark"] .nav a.nav-main .ico { background: #375729; border: 1px solid rgba(241, 247, 242, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 5px var(--bg); }
  :root[data-theme="dark"] .nav a.nav-main.active .ico { background: #F1F7F2; border-color: #F1F7F2; box-shadow: 0 8px 22px rgba(0, 0, 0, .25), 0 0 0 5px var(--bg); }
  :root[data-theme="dark"] .nav a.nav-main.active .nav-img { filter: none; }   /* dark filled Map icon on the light circle */
}
@media (min-width: 768px) {
  :root[data-theme="dark"] .nav { border-right: 0; }
  :root[data-theme="dark"] .nav::before { background-image: url("/brand/logo-white-wide.png"); }
  :root[data-theme="dark"] .nav a.nav-main .ico { background: none; border: 0; box-shadow: none; }
  /* Side rail: the selected Map tab is an ordinary tab too (the green fill is for the round phone button only). */
  :root[data-theme="dark"] .nav a.nav-main.active .ico { background: none; border: 0; box-shadow: none; }
}

/* ===== Dark theme (owner's choice 2026-10-16): page #001001; tab bar, cards, sheets and map
   controls #1C1C1C (text.primary) instead of green. Overrides the green values above. Icons sit bare, with no tinted circle. ===== */
:root[data-theme="dark"] { --bg: #001001; --lp-bg: #001001; --surface: #011800; --lp-card: #011800; --glass-strong: rgba(1, 24, 0, .94); }
:root[data-theme="dark"] body, :root[data-theme="dark"] #app { background: #001001; }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .home-bar { background: rgba(0, 16, 1, .88); }
:root[data-theme="dark"] .nav { background: #011800; border-color: #011800; }
@media (max-width: 767px) {
  :root[data-theme="dark"] .nav a.nav-main .ico { background: #011800; }
}
@media (min-width: 768px) {
  :root[data-theme="dark"] .nav { background: #011800; }
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .qa, :root[data-theme="dark"] .chip-place,
:root[data-theme="dark"] .place { background: #011800; }   /* trial 2026-10-25: cards #011800 (were #1C1C1C) */
:root[data-theme="dark"] .pick-sheet, :root[data-theme="dark"] .sheet, :root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip, :root[data-theme="dark"] .leaflet-tooltip { background: #011800; }
:root[data-theme="dark"] .qa-ico, :root[data-theme="dark"] .hc-head h2 .h-ico { background: none; border-radius: 0; }
:root[data-theme="dark"] .home .tile.lvl-low .t-v { color: #FFBFBF; } :root[data-theme="dark"] .home .tile.lvl-mid .t-v { color: #FFE0AE; }
:root[data-theme="dark"] .home .tile.lvl-good .t-v { color: #DAEDD2; } :root[data-theme="dark"] .home .tile { border-left-width: 3px; } :root[data-theme="dark"] .home .tile.lvl-low { border-left-color: #C62828; }
:root[data-theme="dark"] .home .tile.lvl-mid { border-left-color: #F9A825; } :root[data-theme="dark"] .home .tile.lvl-good { border-left-color: #4E8038; }
:root[data-theme="dark"] .home .adv-q dd.adv-do { background: rgba(218, 237, 210, .08); }
:root[data-theme="dark"] .sat-help { background: rgba(218, 237, 210, .08); }
:root[data-theme="dark"] .land-pill { background: #011800; border-color: var(--glass-line); color: var(--text); }
:root[data-theme="dark"] .land-pill.add { background: #4E8038; border-color: #4E8038; color: #F1F7F2; }
:root[data-theme="dark"] .land-pill.add .ico-svg { color: #F1F7F2; }
:root[data-theme="dark"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23A5D6A7' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M-10 60c40-30 80 20 120-5s80-30 140 5'/%3E%3Cpath d='M-10 95c45-25 85 25 125 0s85-25 135 8'/%3E%3Cpath d='M-10 130c40-20 90 30 130 2s80-22 130 10'/%3E%3Cpath d='M-10 170c50-28 80 22 120-2s90-28 140 6'/%3E%3Cpath d='M-10 210c40-24 90 26 125 0s85-26 135 6'/%3E%3Cpath d='M-10 20c45-22 85 22 125-3s85-20 135 6'/%3E%3C/svg%3E"); background-size: 240px 240px; }
:root[data-theme="dark"] .card.aerial.aerial { background: linear-gradient(160deg, rgba(1, 24, 0, .82), rgba(1, 24, 0, .55)), var(--aerial) center / cover, #011800; border: 1px solid var(--glass-line); }
/* Summary cards (soil profile, About) keep the brand-green fill with light text, as in light theme. */
:root[data-theme="dark"] .card.hero { background: #011800; color: #F1F7F2; }
:root[data-theme="dark"] .card.hero h2, :root[data-theme="dark"] .card.hero .muted { color: #F1F7F2; }
/* Trial 2026-10-25 (owner): dark cards #011800, and the light (#F1F7F2) icons Brand/Primary/700 #4E8038 instead.
   The PNG icons are black files, so they get a filter that turns black into #4E8038 (within 1 RGB step). */
:root[data-theme="dark"] { --lp-card: #011800; --icon-nav: #4E8038;
  --png-green: brightness(0) saturate(100%) invert(33%) sepia(78%) saturate(5339%) hue-rotate(77deg) brightness(100%) contrast(56%); }
:root[data-theme="dark"] .ico-png-k, :root[data-theme="dark"] .ico-crop .c-k, :root[data-theme="dark"] .ico-crop .c-f,
:root[data-theme="dark"] .nav .nav-img { filter: var(--png-green); }
:root[data-theme="dark"] .nav .ico-svg, :root[data-theme="dark"] .place .ico-svg { color: #4E8038; }

/* Phone map: the map credits sat as a strip behind the raised Map tab; keep them small and to the right of it. */
@media (max-width: 767px) {
  .map-screen .leaflet-control-attribution { font-size: 9px; line-height: 1.4; border-radius: 6px 0 0 0; }
  :root[data-theme="dark"] .map-screen .leaflet-control-attribution { background: rgba(1, 24, 0, .6) !important; }
}

/* ---- CZIS agronomy knowledge articles (Government HTML rendered verbatim) ---- */
.ak-content { line-height: 1.6; overflow-wrap: break-word; }
.ak-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.ak-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .92em; display: block; overflow-x: auto; }
.ak-content td, .ak-content th { border: 1px solid var(--line, #D9D9D9); padding: 6px 8px; vertical-align: top; }
.ak-content h1, .ak-content h2, .ak-content h3, .ak-content h4 { margin: 14px 0 6px; }
.ak-content p { margin: 8px 0; }
.ak-content ul, .ak-content ol { padding-left: 20px; margin: 8px 0; }
/* One language at a time: html[lang] updates live when the user toggles language. */
html[lang="bn"] .ak-content .ln-en { display: none !important; }
html[lang="en"] .ak-content .ln-bn { display: none !important; }

/* ===== Owner's rules on EVERY screen (2026-10-26; first done on Home only): the very small text a bit bigger,
   and 20px spacing — inside each card (--card-pad) and between cards. The bottom tab labels keep their size. ===== */
.card { margin: 20px 0; }
.list.card { margin: 20px 0; }
.tiny { font-size: .85rem; }
.small { font-size: .92rem; }
.badge { font-size: .78rem; }
.chip, .prop .meta, .prop a.src, .legend-inline, .ps-coord, table.data th, .land-coords th { font-size: .85rem; }
.scale-axis, .legend, .drawer-head span, .fresh, .t-l, .adv-q dt, .lc-p small { font-size: .82rem; }
.legend .lg-t .t-term, .lc-keys span, .fab-lbl, .gis-hud { font-size: .78rem; }
.hud-s span { font-size: .75rem; }
.chart text { font-size: 11px; }
.leaflet-tooltip.np-name { font-size: 12px; }
.lp-head p, .lp-lbl, .lp-note, .lp-key, .lp-sheet-head .lp-step, .lp-row .s, .lp-chip { font-size: 13px; }
.lp-stat span, .lp-sectlbl { font-size: 12px; }

/* Farmer-friendly app frame (owner 2026-10-26): plain title on top, the official name small underneath. */
.topbar h1.tb-2 { display: flex; flex-direction: column; justify-content: center; gap: 3px; line-height: 1.25; font-size: 1rem; padding-top: 6px; padding-bottom: 6px; }
.topbar:has(h1.tb-2) { min-height: 64px; }   /* room for the title and the line under it */
.tb-term { font-size: .74rem; font-weight: 500; line-height: 1.25; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-txt { display: flex; flex-direction: column; min-width: 0; }
.mx-txt .t-term { font-size: .8rem; line-height: 1.3; }

/* Plain word on top of every soil property, official name under it (all soil screens). */
.prop .name.pn, strong.pn, dt.pn, span.pn { display: inline-flex; flex-direction: column; font-weight: 600; }
.pn .t-term { font-weight: 500; }
.tabs-2 button { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
.tabs-2 button .t-term { font-size: .72rem; }
.tabs-2 button.on .t-term { color: inherit; opacity: .8; }

/* 30-day weather with every hour (Should I irrigate?). */
.wx-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scroll-snap-type: x proximity; }
.wx-day { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; }
.wx-day.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.wx-dp { font-size: 1.3rem; line-height: 1.2; } .wx-dt { font-weight: 600; }
.wx-sum { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 1.05rem; } .wx-big { font-size: 1.8rem; }
.wx-facts { margin: 4px 0 8px; }
.wx-h { margin: 14px 0 6px; font-size: .98rem; }
.hr-list { list-style: none; margin: 0; padding: 2px 0 8px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.hr-card { flex: none; width: 168px; scroll-snap-align: start; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.hr-card.wet { border-color: #1565C0; }
.hr-time { font-weight: 700; font-size: .95rem; }
.hr-pic { font-size: 2rem; line-height: 1.2; margin-top: 4px; } .hr-word { font-size: .85rem; min-height: 2.4em; }
.hr-temp { font-size: 1.6rem; font-weight: 700; line-height: 1.1; } .hr-feels { font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.hr-r { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0; border-top: 1px solid var(--line); font-size: .8rem; }
.hr-r span { color: var(--muted); } .hr-r b { font-weight: 600; text-align: right; white-space: nowrap; }
.wx-arrow { display: inline-block; font-style: normal; color: var(--brand); }
.wx-table tr.wx-ext td { color: var(--muted); }

/* ===== Owner's rule (2026-10-26): 15px between every icon and its text, on every screen. ===== */
:is(h1, h2, h3, h4):has(> :is(.ico-svg, .ico-img):first-child), .card h2, .hc-head h2, .home .hc-head h2, .sx-head h3 { column-gap: 15px !important; }
.btn, .toast, .searchbox, .brandbar .pill, .brand-pill, .ps-head, .drawer-list a, .list button, .list a.row, .lang-btn, .fresh, .chip-place,
.map-hint, .land-pill, .v3d-status, .sat-loading, .lp-loc, .lp-btn, .lp-search, .lp-row, .lp-sum-head, .lp-head, .pl-row, .ps-more, .sat-row .t-l,
.qa, .home .qa, .wx-sum, .src-more summary { gap: 15px; }
/* An icon at the start of running text (not a flex row): the space after it plus this makes 15px. */
:is(p, li, td, dd, label, summary) > :is(.ico-svg, .ico-img):first-child, :is(span, div) > :is(.ico-svg, .ico-img):first-child:not(:only-child) { margin-inline-end: 11px; }
.ctx-l { display: flex; align-items: center; gap: 15px; } .ctx-l > :is(.ico-svg, .ico-img) { margin-inline-end: 0; }
:is(.btn, .toast, .searchbox, .pill, .ps-head, .drawer-list a, .list button, .list a.row, .lang-btn, .fresh, .chip-place, .map-hint, .land-pill,
  .v3d-status, .sat-loading, .lp-loc, .lp-btn, .lp-search, .lp-row, .qa, .r-ico, .d-ico, .qa-ico, .hc-head h2, .sx-head h3, .card h2, .ps-ico, .pl-ico, .fab, .icon-btn, .nav a, .wx-sum)
  > :is(.ico-svg, .ico-img) { margin-inline-end: 0; }   /* flex rows already have the 15px gap */

/* ===== What crop is growing here? (#/crop-now) and What crop should I plant here? (#/crop-plan) ===== */
.cn-big { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.15rem; line-height: 1.35; }
.cn-cyc { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.cn-cyc .sub, .cp-row .sub { display: block; font-size: .85rem; color: var(--muted); font-weight: 500; }
.cn-h4 { margin: 20px 0 8px; font-size: .98rem; font-weight: 600; }
.cn-note { display: flex; align-items: flex-start; gap: 15px; margin: 0 0 20px; color: var(--muted); }
.cn-note > .ico-svg { margin-inline-end: 0; flex: none; }
a.card.cn-link { display: flex; align-items: center; gap: 15px; text-decoration: none; color: inherit; }
a.card.cn-link > :is(.ico-svg, .ico-img) { flex: none; margin-inline-end: 0; color: var(--brand); }
a.card.cn-link .hc-t { flex: 1; }
.cp-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; max-width: 55%; }
.cp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.cp-body { padding: 0 0 16px; }
.cp-body .cx-hint { margin: 8px 0; }
.cp-tbl td, .cp-tbl th { vertical-align: top; font-size: .88rem; }
.cp-tbl td:first-child { min-width: 9.5em; }
.cp-tbl .t-term { font-size: .82rem; }
.cp-src { margin: 8px 0; padding-left: 18px; }

/* ===== Owner's rule (2026-10-28), light theme: every white card / box is outlined in Surface/Elevated #F4F6F4,
   and the whole app background is plain Surface/App BG #FAFAF5 (no contour pattern). Dark theme keeps its own. ===== */
:root:not([data-theme="dark"]) body { background: #FAFAF5; background-image: none; }
:root:not([data-theme="dark"]) :is(.card, .list.card, .hcard, .qa, .chip-place, .searchbox, .pick-sheet, .legend, .map-hint, .fab, .lang-btn,
  .land-pill:not(.add), .wx-day:not(.on), .hr-card, .v3d-wrap, .home-choose a, .drawer, .tile:not([class*="lvl-"])) { border-color: #F4F6F4; }
:root:not([data-theme="dark"]) .card { border: 1px solid #F4F6F4; }

/* Location on every app start: the warning that stays until the location is allowed. */
.loc-gate { position: absolute; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 24px 16px calc(var(--nav-h) + 24px);
  background: rgba(1, 24, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.loc-gate[hidden] { display: none; }
.lg-card { width: min(100%, 400px); background: var(--surface); color: var(--text); border-radius: 20px; padding: 24px 20px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.lg-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #FFBFBF; margin-bottom: 12px; }
.lg-ico .ico-svg { width: 30px; height: 30px; color: #C62828; margin: 0; }
.lg-card h2 { justify-content: center; font-size: 1.15rem; margin: 0 0 8px; }
.lg-msg { font-size: 1.02rem; font-weight: 600; margin: 0 0 10px; }
.lg-card .small { color: var(--muted); margin: 0 0 16px; }
.saved-dot span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #375729; border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.map-screen.flying .leaflet-overlay-pane, .map-screen.flying .leaflet-bdmask-pane { opacity: 0; transition: opacity .2s ease; }
.map-screen .leaflet-overlay-pane, .map-screen .leaflet-bdmask-pane { transition: opacity .4s ease; }
/* Top bar on the inner pages (not Home's bar): a floating box with 20 px round corners (owner, 2026-10-29). */
.topbar { top: 8px; margin: 8px 0 0; border-radius: 20px; border: 1px solid #F4F6F4; }
@media (min-width: 768px) { .topbar { margin: 8px 0 0; } }
:root[data-theme="dark"] .topbar { border-color: rgba(241, 247, 242, .1); }
.you-dot { cursor: zoom-in; }
.you-dot span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #1565C0; border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 0 rgba(21, 101, 192, .45), 0 2px 6px rgba(0, 0, 0, .3); animation: you-pulse 2s ease-out infinite; }
@keyframes you-pulse { 0% { box-shadow: 0 0 0 0 rgba(21, 101, 192, .45), 0 2px 6px rgba(0, 0, 0, .3); } 100% { box-shadow: 0 0 0 14px rgba(21, 101, 192, 0), 0 2px 6px rgba(0, 0, 0, .3); } }
:root[data-theme="dark"] .lg-card { background: #011800; border: 1px solid var(--glass-line); }

/* Tab bar (owner, 2026-10-28): Map is a normal tab now (no raised round button). The selected tab's icon sits on
   a small highlighted ball. */
.nav a .ico { width: 44px; height: 44px; border-radius: 50%; margin: 0; border: 0; box-shadow: none; background: none; transition: background-color .2s ease, transform .2s ease; }
.nav a.active .ico { background: #DAEDD2; box-shadow: 0 0 0 4px rgba(218, 237, 210, .45); transform: translateY(-1px); }
:root[data-theme="dark"] .nav a.active .ico { background: rgba(78, 128, 56, .45); box-shadow: 0 0 0 4px rgba(78, 128, 56, .2); }
@media (min-width: 768px) { .nav a .ico { width: 44px; height: 44px; } }

/* ===== Notch tab bar (owner, 2026-10-28; phones). The bar is drawn by ::before with a round cut over the selected
   tab; the selected icon floats in a circle (::after) in that cut. --i (0-4) is the selected tab and slides. ===== */
@property --i { syntax: '<number>'; inherits: true; initial-value: 0; }
@media (max-width: 767px) {
  .nav.notch { --nav-bg: #F1F7F2; --ball: #375729; --cx: calc(6px + (100% - 12px) * (var(--i) + .5) / 5);
    background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .16)); transition: --i .45s cubic-bezier(.4, 0, .2, 1); }
  .nav.notch::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 35px; background: var(--nav-bg);
    -webkit-mask: radial-gradient(circle at var(--cx) 2px, transparent 37px, #000 38px); mask: radial-gradient(circle at var(--cx) 2px, transparent 37px, #000 38px); }
  .nav.notch::after { content: ''; position: absolute; z-index: -1; top: -28px; left: calc(var(--cx) - 26px); width: 52px; height: 52px; border-radius: 50%;
    background: var(--ball); box-shadow: 0 8px 18px rgba(55, 87, 41, .35); }
  .nav.notch.no-sel::before { -webkit-mask: none; mask: none; } .nav.notch.no-sel::after { display: none; }
  .nav.notch a .ico { width: 44px; height: 32px; border-radius: 0; background: none !important; box-shadow: none !important; transform: none; }
  .nav.notch a.active .ico { transform: translateY(-29px); }
  .nav.notch.moved a.active .ico { animation: nav-pop .45s cubic-bezier(.4, 0, .2, 1); }
  .nav.notch a.active .nav-img { filter: brightness(0) invert(1); }   /* white icon on the green circle */
  .nav.notch a.active .lbl { color: var(--brand); }
}
@keyframes nav-pop { from { transform: translateY(0); opacity: .4; } to { transform: translateY(-29px); opacity: 1; } }
:root[data-theme="dark"] .nav.notch { --nav-bg: #011800; --ball: #4E8038; }
:root[data-theme="dark"] .nav.notch a.active .lbl { color: #A5D6A7; }

/* Side rail (tablets / computers, 768 px+): the same floating green ball for the selected tab. */
@media (min-width: 768px) {
  .nav.notch a .ico { width: 52px; height: 52px; border-radius: 50%; }
  .nav.notch a.active .ico { background: #375729 !important; box-shadow: 0 8px 18px rgba(55, 87, 41, .35), 0 0 0 5px var(--bg) !important;
    transform: translateX(6px) scale(1.04); }
  .nav.notch.moved a.active .ico { animation: rail-pop .4s cubic-bezier(.4, 0, .2, 1); }
  .nav.notch a.active .nav-img { filter: brightness(0) invert(1); }
  .nav.notch a.active .lbl { color: var(--brand); font-weight: 600; }
  :root[data-theme="dark"] .nav.notch a.active .ico { background: #4E8038 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, .35), 0 0 0 5px var(--bg) !important; }
  :root[data-theme="dark"] .nav.notch a.active .lbl { color: #A5D6A7; }
}
@keyframes rail-pop { from { transform: translateX(0) scale(.8); opacity: .4; } to { transform: translateX(6px) scale(1.04); opacity: 1; } }

/* ===== Top bar, redesigned (owner, 2026-10-28): soft floating bar, round back / menu buttons with green icons,
   a small green accent before the title, a gentle shadow instead of a hard line. Home's bar matches. ===== */
.topbar, .home-bar { min-height: 64px; padding-top: calc(8px + var(--top-safe)); padding-bottom: 8px; gap: 10px;
  background: color-mix(in srgb, #FAFAF5 90%, transparent); border-bottom: 0 !important;
  box-shadow: 0 1px 0 #F4F6F4, 0 6px 18px rgba(28, 28, 28, .05); }
.topbar { padding-left: 12px; padding-right: 12px; }
.topbar .icon-btn, .home-bar .icon-btn { width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; border: 1px solid #F4F6F4;
  box-shadow: 0 2px 8px rgba(28, 28, 28, .06); transition: background-color .15s ease, transform .12s ease; }
.topbar .icon-btn .ico-svg, .home-bar .icon-btn .ico-svg { color: #375729; width: 22px; height: 22px; }
.topbar .icon-btn:hover, .home-bar .icon-btn:hover { background: #F1F7F2; }
.topbar .icon-btn:active, .home-bar .icon-btn:active { transform: scale(.94); }
.topbar h1 { position: relative; padding-left: 14px; font-size: 1.05rem; letter-spacing: -.005em; }
.topbar h1::before { content: ''; position: absolute; left: 2px; top: 50%; width: 4px; height: 22px; margin-top: -11px; border-radius: 4px;
  background: linear-gradient(180deg, #4E8038, #375729); }
.topbar h1.tb-2::before { height: 30px; margin-top: -15px; }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .home-bar { background: rgba(1, 24, 0, .9); box-shadow: 0 1px 0 rgba(241, 247, 242, .08), 0 6px 18px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .topbar .icon-btn, :root[data-theme="dark"] .home-bar .icon-btn { background: #011800; border-color: rgba(241, 247, 242, .12); box-shadow: none; }
:root[data-theme="dark"] .topbar .icon-btn .ico-svg, :root[data-theme="dark"] .home-bar .icon-btn .ico-svg { color: #A5D6A7; }
:root[data-theme="dark"] .topbar h1::before { background: linear-gradient(180deg, #A5D6A7, #4E8038); }

/* Map 2D / 3D switch (owner, 2026-10-29) and the live 3D view shown over the flat map from zoom 15 in. */
.dim-toggle { display: flex; flex-direction: column; border-radius: 25px; overflow: hidden; background: var(--surface); border: 1px solid #F4F6F4; box-shadow: var(--shadow); }
.dim-toggle button { width: 50px; height: 40px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.dim-toggle button.on { background: #375729; color: #F1F7F2; }
:root[data-theme="dark"] .dim-toggle { background: #011800; border-color: rgba(241, 247, 242, .12); }
:root[data-theme="dark"] .dim-toggle button.on { background: #4E8038; }
.map-screen .map3d-live { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 450; background: #011800; }   /* MapLibre's own CSS would make it position:relative, 0 px tall */
.map3d-live[hidden] { display: none; }
.map-screen.is3d .leaflet-control-container { visibility: hidden; }
.map3d-live .maplibregl-ctrl-bottom-right { bottom: calc(var(--nav-h) + 20px); }
.map3d-live .maplibregl-ctrl-bottom-left { bottom: calc(var(--nav-h) + 96px); }   /* above the tap hint */

/* Latest satellite photo (Sentinel-2, 3D view): its date in the map readout. */
.hud-s2 { color: #A5D6A7; font-weight: 600; white-space: nowrap; }

/* The village's newest satellite photo in the place card (Sentinel-2 record of every village). */
.ps-s2 { display: flex; gap: 15px; align-items: flex-start; margin-top: 8px; color: var(--text); font-size: .88rem; font-weight: 500; }
.ps-s2 > .ico-svg { flex: none; width: 18px; height: 18px; color: #375729; margin-top: 2px; }
:root[data-theme="dark"] .ps-s2 > .ico-svg { color: #4E8038; }
.ps-s2-main { display: block; }
.ps-s2-term { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }