:root {
    --bg: #f1f3ee; --panel: #ffffff; --ink: #232b21; --ink-soft: #5b665a;
    --green: #2f5233; --green-dark: #203a25; --wheat-soft: #f0e3c6;
    --line: #e3e6df; --danger: #c2412d; --radius: 16px;
    /* One typeface across the whole app: Apple's San Francisco on iPhone,
       iPad and Mac (the font the mob names were already in), with each
       platform's own modern system font as the fallback elsewhere. */
    --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --top-inset: env(safe-area-inset-top, 20px);
    --top-breathe: 0px;
    /* Bottom tab bar: icon row height plus the home-indicator area. Every
       panel that sits above the bar reads --tabbar-total. */
    --bottom-inset: env(safe-area-inset-bottom, 0px);
    --tabbar-h: 58px;
    --tab-lift: max(10px, calc(var(--bottom-inset) - 8px));
    --tabbar-total: calc(var(--tab-lift) + var(--tabbar-h));
    --glass: rgba(16, 20, 16, 0.42);
    --glass-line: rgba(255, 255, 255, 0.14);
    --sheet-shadow: 0 10px 34px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin:0; padding:0; height:100%; font-family:var(--body); color:var(--ink); background:#000; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
  /* Leaflet sets its own (Helvetica) font on the map; this puts everything
     drawn inside the map - labels, popups, panels - on the app's font. */
  .leaflet-container { font-family:var(--body) !important; }
  #shell { display:flex; flex-direction:column; height:100vh; height:100dvh; position:relative; }
  header {
    position:absolute; top:0; left:0; right:0; z-index:900;
    padding:calc(var(--top-inset) + var(--top-breathe)) 16px 12px 16px; background:linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0));
    pointer-events:none; display:flex; align-items:center;
  }
  header h1 {
    font-family:var(--display); font-size:20px; font-weight:700; margin:0;
    color:#fff; letter-spacing:-0.4px; text-shadow:0 1px 6px rgba(0,0,0,0.5);
  }
  header h1 .wm-light { font-weight:400; opacity:0.92; }
  #main { flex:1; display:flex; min-height:0; }
  #map { flex:1; min-width:0; background:#000; position:relative; }
  #sidebar {
    position:fixed; right:12px; left:12px; margin-left:auto;
    bottom:calc(var(--tabbar-total) + 10px);
    width:min(360px, calc(100vw - 24px));
    background:var(--panel); border-radius:var(--radius); box-shadow:var(--sheet-shadow);
    display:flex; flex-direction:column; min-height:0; max-height:min(49vh, 420px);
    overflow:hidden; z-index:1000;
    opacity:0; pointer-events:none; transform:translateY(10px);
    transition:opacity 0.15s ease, transform 0.15s ease;
  }
  #sidebar.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  #summary { padding:5px 12px; border-bottom:1px solid var(--line); background:var(--wheat-soft); flex-shrink:0; display:flex; align-items:baseline; gap:6px; }
  #summary .big { font-family:var(--body); font-size:12px; font-weight:700; color:var(--green-dark); }
  #summary .label { font-size:11px; color:var(--ink-soft); }
  #list { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px; }

  .empty-hint { padding:22px 14px; text-align:center; color:var(--ink-soft); font-size:13px; line-height:1.6; }

  .layer-block { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; }
  .layer-header { display:flex; align-items:center; gap:8px; padding:9px 10px; background:#f7f8f4; cursor:pointer; border-left:4px solid transparent; }
  .layer-header.active { border-left-color:var(--green); background:#eef2ea; }
  .layer-header .dot { width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; }
  .layer-header.active .dot { background:var(--green); }
  .layer-header .lname { flex:1; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .layer-header input.lname-edit { flex:1; font-size:13px; font-weight:700; border:1px solid var(--green); border-radius:5px; padding:2px 5px; font-family:inherit; }
  .layer-header button { border:none; background:transparent; cursor:pointer; font-size:14px; padding:4px 5px; color:var(--ink-soft); }
  .layer-header button.expand-btn { width:16px; height:16px; padding:0; margin:0 2px; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .layer-header button.danger { color:var(--danger); }
  .layer-body { padding:6px; }
  .layer-empty { padding:8px 6px; font-size:12px; color:var(--ink-soft); }

  .item-card { border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:6px; cursor:pointer; display:flex; align-items:center; gap:8px; background:#fff; }
  .item-card:active { border-color:var(--green); }
  .card-swatch { width:13px; height:13px; border-radius:50%; flex-shrink:0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
  .card-swatch.none-swatch { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size:6px 6px; background-position:0 0,0 3px,3px -3px,-3px 0; background-color:#fff; }
  .card-icon { font-size:15px; width:16px; text-align:center; flex-shrink:0; }
  .item-card .info { flex:1; min-width:0; }
  .item-card .info strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .item-card .info span { display:block; font-size:11px; color:var(--ink-soft); line-height:1.5; margin-top:1px; }
  .item-card .note-flag { font-size:11px; }
  .item-card button.delete-btn { border:none; background:transparent; color:var(--danger); font-size:16px; cursor:pointer; padding:5px 6px; flex-shrink:0; }
  .move-select { font-size:11px; border:1px solid var(--line); border-radius:6px; padding:3px 2px; max-width:56px; background:#fff; flex-shrink:0; font-family:inherit; }

  .add-layer-row { display:flex; gap:6px; padding:6px 2px; }
  .add-layer-row input { flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit; }
  .add-layer-row button { padding:8px 12px; border-radius:8px; border:1px solid var(--green); background:var(--green); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }

  /* Zoom-based sizing is set once on the map (as --z-scale / --gate-px) and
     every label, pin and gate reads it, instead of each one being found and
     resized individually on every zoom. */
  .label-scale-wrap { transform-origin: center center; transform:scale(var(--z-scale, 1)); }
  .pin-emoji-plain, .pin-badge-pointer-wrap { transform:scale(var(--pin-scale, 1)); }
  .pin-emoji-plain { transform-origin:center; }
  .pin-badge-pointer-wrap { transform-origin:bottom center; }
  .paddock-label-icon .label-name { color:#fff; font-weight:700; font-size:12px; text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7); white-space:nowrap; text-align:center; }
  .paddock-label-icon .label-sub { display:flex; align-items:baseline; justify-content:center; gap:6px; white-space:nowrap; }
  .paddock-label-icon .label-area { color:var(--wheat-soft); font-size:10px; text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7); text-align:center; }
  .paddock-label-icon .label-stock { color:#fff; font-weight:400; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7); }

  .custom-pin { background:transparent; border:none; }
  .farm-name-label { background:transparent; border:none; }
  .farm-name-inner { position:absolute; left:0; top:0; transform:translate(-50%, -50%); white-space:nowrap;
    color:#fff; font-size:var(--farm-name-px, 13px); font-weight:600; letter-spacing:-0.1px;
    text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6); }
  /* The tap area stays finger-sized; only the drawn circle shrinks. */
  .gate-icon { background:transparent; border:none; display:flex; align-items:center; justify-content:center; }
  .gate-icon svg { width:var(--gate-px, 22px); height:var(--gate-px, 22px); display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
  .pin-emoji-plain { font-size:26px; line-height:1; text-align:center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65)) drop-shadow(0 0 4px rgba(255,255,255,0.6)); }
  .pin-badge-pointer { width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:#fefaf1; border:2px solid var(--green); box-shadow:0 2px 5px rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; margin:0 auto; }
  .pin-badge-pointer span { transform:rotate(-45deg); font-size:15px; line-height:1; display:block; }

  .leaflet-popup-content { margin:10px 12px; }
  .popup-body strong { font-family:var(--display); font-size:15px; display:block; }
  .popup-measure { font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .popup-notes { font-size:12px; color:var(--ink); margin-top:6px; white-space:pre-wrap; border-top:1px solid var(--line); padding-top:6px; }
  .popup-actions { margin-top:8px; font-size:13px; }
  .popup-pasture-date { font-size:11px; font-weight:400; color:var(--ink-soft); margin-left:2px; }
  .popup-actions a { color:var(--green); text-decoration:none; font-weight:600; }
  .popup-actions a.delete-link { color:var(--danger); margin-left:10px; }
  /* Sits in the same line as Move and Edit, at the same text size, in a
     small coloured box. Traffic-light green to open, red to shut. */
  .gate-toggle { display:inline-block; padding:2px 8px; border-radius:6px; border:none; color:#fff; font-size:13px; font-weight:600; font-family:inherit; line-height:1.4; cursor:pointer; vertical-align:baseline; text-shadow:0 1px 1px rgba(0,0,0,0.25); }
  .gate-toggle.to-open { background:#22c55e; }
  .gate-toggle.to-close { background:#c0392b; }

  /* ---------- Bottom tab bar ----------
     One frosted strip across the bottom, icons evenly spaced in a single
     row - the same arrangement as Instagram's bottom bar. The map shows
     through it, blurred. */
  .tabbar {
    position:fixed; left:50%; transform:translateX(-50%); z-index:1100;
    bottom:var(--tab-lift);
    height:var(--tabbar-h); width:min(372px, calc(100vw - 24px)); padding:0 4px;
    display:flex; align-items:stretch; justify-content:space-between;
    border-radius:999px;
    /* Clear glass: the map shows straight through, only softly blurred,
       with a fine bright rim - Instagram's floating bar. */
    /* No blur: on iPhone a blurred bar pinned to the screen edge stops the
       map drawing underneath the bottom strip, which shows as a black band.
       Plain transparency keeps the map visible right to the edge. */
    background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)), rgba(14,18,14,0.52);
    border:0.5px solid rgba(255,255,255,0.32);
    box-shadow:0 10px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.28);
  }
  .tab-btn {
    position:relative; flex:1 1 0; height:var(--tabbar-h);
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; padding:0; margin:0; cursor:pointer;
    color:#fff; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none;
  }
  .tab-btn svg { position:relative; width:26px; height:26px; display:block; overflow:visible; transition:transform 0.12s ease; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
  .tab-btn:active svg { transform:scale(0.88); }
  /* The open tab gets a soft lighter lozenge behind it, and a filled icon. */
  .tab-btn::before { content:''; position:absolute; top:6px; bottom:6px; left:3px; right:3px; border-radius:999px; background:rgba(255,255,255,0.20); opacity:0; transition:opacity 0.14s ease; }
  .tab-btn.on::before { opacity:1; }
  .tab-btn .ic-fill { opacity:0; transition:opacity 0.12s ease; }
  .tab-btn.on .ic-fill { opacity:1; }
  .tab-btn.on .ic-plus-cross { stroke:#1d241c; }
  .tab-badge {
    position:absolute; top:6px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px;
    border-radius:9px; background:#ff3b30; color:#fff; font-size:10.5px; font-weight:700; line-height:17px;
    text-align:center; box-shadow:0 0 0 2px rgba(20,24,20,0.55); display:none; pointer-events:none;
    font-variant-numeric:tabular-nums;
  }
  .tab-dot { position:absolute; top:9px; left:calc(50% + 9px); width:10px; height:10px; border-radius:50%; background:#e6a817; box-shadow:0 0 0 2px rgba(20,24,20,0.55); display:none; pointer-events:none; }

  .fab-menu { position:fixed; bottom:calc(var(--tabbar-total, 56px) + 12px); left:50%; transform:translateX(-50%) translateY(8px); z-index:1000; display:flex; flex-direction:column; gap:2px; opacity:0; pointer-events:none; transition:opacity 0.16s ease, transform 0.16s ease;
    background:var(--panel); border-radius:var(--radius); padding:6px; box-shadow:var(--sheet-shadow); min-width:220px; }
  .fab-menu.open { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .fab-option { display:flex; align-items:center; gap:12px; white-space:nowrap; background:transparent; border:none; border-radius:11px; padding:11px 12px; font-size:15px; font-weight:500; font-family:inherit; color:var(--ink); cursor:pointer; text-align:left; }
  .fab-option:active { background:#eef2ea; }
  .fab-option svg { width:22px; height:22px; flex-shrink:0; color:var(--green); }
  .active-tag { position:fixed; bottom:calc(var(--tabbar-total, 56px) + 12px); left:50%; transform:translateX(-50%); z-index:999; background:rgba(20,26,20,0.72); color:#fff; font-size:13px; font-weight:500; padding:6px 6px 6px 14px; border-radius:20px; display:flex; align-items:center; gap:8px; pointer-events:none; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,0.25); }
  .active-tag button { pointer-events:auto; background:rgba(255,255,255,0.2); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:13px; line-height:1; cursor:pointer; font-family:inherit; }
  .active-tag button#finishDrawBtn { background:#c99b4e; }

  .modal-overlay { position:fixed; inset:0; background:rgba(35,43,33,0.45); display:flex; align-items:flex-start; justify-content:center; padding-top:8vh; z-index:10000; overflow-y:auto; }
  .modal-overlay.hidden { display:none; }
  .modal-card { background:var(--panel); border-radius:20px; padding:22px 20px 20px; width:min(340px, 90vw); box-shadow:0 16px 44px rgba(0,0,0,0.28); margin-bottom:8vh; }
  .modal-card h2 { font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-0.35px; margin:0 0 6px; }
  .area-preview { font-size:15px; color:var(--ink-soft); margin:0 0 18px; }
  .measure-preview { font-size:13px; color:var(--ink-soft); margin-bottom:12px; }
  .measure-preview div { margin-bottom:2px; }
  .modal-card input[type=text], .modal-card textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; font-size:16px; font-family:inherit; margin-bottom:12px; resize:vertical; }
  .passcode-input {
    width:100%; padding:16px 12px; border:1px solid var(--line); border-radius:10px;
    font-size:26px; letter-spacing:10px; text-align:center; font-family:inherit;
    margin-bottom:14px; color:var(--ink);
  }
  .passcode-input:focus { outline:2px solid var(--green); outline-offset:1px; }
  .field-label { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:6px; display:block; }
  .color-row { display:flex; gap:7px; margin-bottom:16px; flex-wrap:wrap; }
  .swatch { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
  .thickness-row { display:flex; gap:8px; margin-bottom:16px; }
  .thickness-option { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 6px; border:1.5px solid var(--line); border-radius:9px; background:#fbfcfa; cursor:pointer; font-family:inherit; }
  .thickness-option.selected { border-color:var(--green); background:#eef4ec; }
  .thickness-bar { display:block; width:36px; background:var(--ink); border-radius:3px; }
  .thickness-label { font-size:11px; font-weight:600; color:var(--ink-soft); }
  .thickness-option.selected .thickness-label { color:var(--green-dark); }
  .pasture-swatch { display:block; width:28px; height:28px; border-radius:50%; }
  .pasture-option { padding:7px 4px !important; gap:4px !important; }
  .pasture-swatch-small { width:16px; height:16px; }
  .pasture-option .thickness-label { font-size:10px; }
  .pasture-option { position:relative; }
  /* The date sits inside the selected option, in small print; tapping it
     opens the calendar again. */
  .pasture-opt-date { display:none; font-size:9px; font-weight:400; color:var(--ink-soft); line-height:1.1; white-space:nowrap; padding:1px 2px; }
  .pasture-option.selected .pasture-opt-date { display:block; }
  .pasture-date-input { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none; border:0; padding:0; margin:0; }
  .swatch.selected { border-color:var(--ink); }
  .swatch.custom-swatch { background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); position:relative; }
  .icon-input { font-size:26px !important; text-align:center; }
  .popup-locked-note { font-size:12px; color:var(--ink-soft); }
  .modal-actions { display:flex; justify-content:flex-end; gap:8px; }
  .modal-actions .spacer { flex:1; }
  .btn.btn-danger-text { color:var(--danger); }
  .btn.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
  .confirm-msg { font-size:14px; color:var(--ink); line-height:1.45; margin:6px 0 16px; white-space:pre-line; }
  .mob-actions-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .mob-actions-grid .btn { width:100%; margin:0; }
  .btn { padding:11px 16px; border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; letter-spacing:-0.1px; }
  .btn:active { filter:brightness(0.94); }
  .btn-primary { background:var(--green); border-color:var(--green); color:#fff; }
  .small-link-btn { display:block; width:auto; margin:2px auto 0; background:none; border:none; color:var(--danger); font-size:11px; cursor:pointer; padding:2px 0; font-family:inherit; }
  .backup-row { display:flex; gap:10px; justify-content:center; border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
  .backup-row button { background:none; border:none; color:var(--green); font-size:12px; font-weight:600; cursor:pointer; padding:2px 4px; font-family:inherit; }

  #toast { position:fixed; bottom:calc(var(--tabbar-total) + 60px); left:50%; transform:translateX(-50%); background:rgba(28,34,27,0.92); color:#fff; font-size:14px; font-weight:500; padding:10px 18px; border-radius:22px; box-shadow:0 6px 18px rgba(0,0,0,0.25); z-index:9500; opacity:0; pointer-events:none; transition:opacity 0.25s ease; max-width:85vw; text-align:center; }
  #toast.show { opacity:0.94; }
  #updateBar { position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-total, 56px) + 12px); z-index:30000;
    padding:12px 14px; border:0; border-radius:12px; background:var(--accent); color:#fff; font:inherit; font-size:14px; font-weight:600;
    box-shadow:0 6px 20px rgba(0,0,0,.3); cursor:pointer; }

  /* Top-left map controls (zoom and find-me) sit in small frosted pills,
     the same glass as the bottom bar, instead of bare glyphs on the map. */
  .leaflet-draw { display:none !important; }
  .leaflet-top.leaflet-left { top:calc(var(--top-inset) + var(--top-breathe) + 40px) !important; }
  .leaflet-top.leaflet-left .leaflet-control { margin-left:6px; margin-top:4px; }
  .leaflet-bar { border:none !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important; }
  .leaflet-bar a, .leaflet-touch .leaflet-bar a {
    width:40px !important; height:38px !important; line-height:38px !important;
    background:transparent !important; border:none !important; color:#fff !important;
    font-family:var(--body) !important; font-size:28px !important; font-weight:400 !important;
    text-shadow:0 1px 3px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.5); box-shadow:none !important;
    display:flex !important; align-items:center; justify-content:center;
  }
  .leaflet-bar a:hover, .leaflet-bar a:active { background:transparent !important; opacity:0.75; }
  .leaflet-bar a.leaflet-disabled { color:rgba(255,255,255,0.45) !important; }
  .locate-btn svg { filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8)) drop-shadow(0 0 3px rgba(0,0,0,0.45)); }
  .locate-btn svg { width:21px; height:21px; display:block; }
  /* Map imagery credits (Esri, QLD Gov...) live at the foot of the Map Views
     panel in small print, not on the map itself. */
  .views-credits { margin:-4px 0 10px; }
  .views-credits .leaflet-control-attribution {
    float:none !important; clear:none !important; margin:0 !important; padding:0 !important;
    background:transparent !important; box-shadow:none !important; border:none !important;
    font-size:9px !important; line-height:1.35; color:var(--ink-soft) !important; text-shadow:none;
    text-align:center;
  }
  .views-credits .leaflet-control-attribution::before { content:'Imagery: '; }
  .views-credits .leaflet-control-attribution a { color:var(--ink-soft) !important; }
  .base-toggle { display:flex; background:#eee; border-radius:8px; padding:2px; margin-bottom:12px; }
  .base-option { flex:1; border:none; background:transparent; padding:7px 0; font-size:12px; font-weight:600; border-radius:6px; cursor:pointer; font-family:inherit; color:var(--ink-soft); }
  .base-option.active { background:var(--green); color:#fff; }
  .roads-recolor { filter: grayscale(1) brightness(1.4); }

  /* Top-right: map views and compass, as frosted circles. */
  .top-round {
    position:absolute; top:calc(var(--top-inset) + var(--top-breathe)); z-index:1000;
    width:40px; height:40px; padding:0; margin:0; background:transparent; border:none;
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .top-round svg { width:24px; height:24px; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8)) drop-shadow(0 0 3px rgba(0,0,0,0.45)); }
  .map-views-btn { right:10px; cursor:pointer; }
  .map-views-btn:active { opacity:0.7; }
  .compass-badge { right:54px; pointer-events:none; }
  .compass-badge svg { width:28px; height:28px; }
  .views-panel { position:absolute; top:calc(var(--top-inset) + var(--top-breathe) + 50px); right:12px; z-index:1000; background:var(--panel); border-radius:var(--radius); box-shadow:var(--sheet-shadow); padding:14px 16px; width:250px; max-height:min(75vh, 520px); overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity 0.16s ease, transform 0.16s ease; }
  .mob-panel { position:fixed; bottom:calc(var(--tabbar-total) + 10px); left:12px; z-index:1500; background:var(--panel); border-radius:var(--radius); box-shadow:var(--sheet-shadow); padding:16px; width:min(340px, calc(100vw - 24px)); max-height:min(68vh, 540px); overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 0.16s ease, transform 0.16s ease; }
  .mob-panel.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .mob-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .mob-panel-header h3 { margin:0; font-size:19px; font-weight:700; letter-spacing:-0.3px; font-family:var(--display); color:var(--ink); }
  .mob-total { font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
  .mob-stock-entry { border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; background:#fbfcfa; }
  .mob-stock-line { display:flex; gap:8px; margin-bottom:6px; align-items:center; }
  .mob-stock-date-row { display:flex; align-items:center; gap:8px; }
  .mob-stock-date-label { font-size:11px; color:var(--ink-soft); flex-shrink:0; }
  .mob-stock-date { flex:1; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:12px; font-family:inherit; }
  .mob-stock-line select { flex:1.4; padding:8px; border:1px solid var(--line); border-radius:7px; font-size:13px; font-family:inherit; }
  .mob-stock-line input[type=number] { flex:1; padding:8px; border:1px solid var(--line); border-radius:7px; font-size:13px; font-family:inherit; }
  .mob-stock-line button { border:none; background:transparent; color:var(--danger); font-size:16px; cursor:pointer; padding:2px 6px; }
  /* Leaflet's own stylesheet sets font-family on its container, so anything
     rendered inside the map inherits Helvetica Neue instead of the app's font.
     That's why these panels looked dated next to Layers and Mob Tracker, which
     sit outside the map. This puts them back on the app's own stack. */
  .views-panel, .changes-panel, .active-tag, .leaflet-popup-content { font-family:var(--body); }
  .views-panel.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .views-panel h3 { margin:0 0 10px; font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-0.3px; color:var(--ink); }
  /* Notifications: same sheet as Mob Tracker and Layers, opening up from
     the bell in the bottom bar. */
  .changes-panel { position:fixed; bottom:calc(var(--tabbar-total) + 10px); right:12px; z-index:1000; background:var(--panel); border-radius:var(--radius); box-shadow:var(--sheet-shadow); padding:16px; width:min(340px, calc(100vw - 24px)); max-height:min(68vh, 520px); overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 0.16s ease, transform 0.16s ease; }
  .changes-panel.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .changes-panel h3 { margin:0 0 10px; font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-0.3px; color:var(--ink); }
  /* One class for every field in the treatment form so they line up exactly.
     Date inputs in particular carry their own native appearance and sizing,
     which is what made that one field sit out of line with the rest. */
  .tx-field { display:block; width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--line);
    border-radius:8px; font-size:16px; font-family:inherit; line-height:1.2; min-height:40px;
    margin-bottom:10px; background:#fff; color:var(--ink);
    appearance:none; -webkit-appearance:none; }
  /* Short fields sit two to a row - a batch number and a head count don't
     need the full width, and pairing them takes four rows off the height. */
  .tx-row { display:flex; gap:10px; }
  .tx-row > div { flex:1; min-width:0; }
  #treatmentModal .field-label { margin-bottom:2px; }
  .tx-field[type=date]::-webkit-date-and-time-value { text-align:left; margin:0; }
  .tx-field[type=date]::-webkit-calendar-picker-indicator { margin-left:auto; }
  /* Every date field, everywhere: iOS Safari (and the home-screen web app)
     gives date inputs a built-in minimum width and ignores width:100%, so
     the date ran out past the edge of narrow windows like Burnt. Dropping
     the native appearance and the minimum width keeps each one inside its
     box on iPhone, iPad, Android and desktop alike. */
  input[type=date] { box-sizing:border-box; max-width:100%; min-width:0;
    appearance:none; -webkit-appearance:none; }
  input[type=date]::-webkit-date-and-time-value { text-align:left; margin:0; min-width:0; }
  input[type=date]::-webkit-datetime-edit { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  input[type=date]::-webkit-calendar-picker-indicator { margin-left:auto; }
  select.tx-field { background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px; }
  /* The list scrolls rather than the whole panel, so the heading stays put
     while you work back through a long run of changes. */
  #bellScroll { max-height:min(56vh, 380px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* Decisions: the only thing in Notifications that needs an answer, so they
     sit above everything else and are the one place red is used. */
  .dec-head { font-size:11px; font-weight:700; color:var(--danger); text-transform:uppercase; letter-spacing:0.04em; margin:0 0 6px; }
  .dec-card { border:1.5px solid var(--danger); border-radius:9px; padding:10px 11px; margin-bottom:10px; background:var(--panel); }
  .dec-title { font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; }
  .dec-sub { font-size:12px; color:var(--ink-soft); margin:2px 0 6px; }
  .dec-row { border-top:1px solid var(--line); padding:6px 0 4px; }
  .dec-field { font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:3px; }
  .dec-val { display:flex; gap:8px; font-size:13px; line-height:1.45; color:var(--ink); }
  .dec-who { flex:0 0 86px; color:var(--ink-soft); font-size:12px; }
  .dec-actions { display:flex; gap:8px; margin-top:8px; }
  .dec-actions .btn { flex:1; padding:8px 6px; font-size:13px; }
  /* Swipe-to-delete: the row content slides left to reveal a delete button
     sitting underneath it, the way a mail app behaves. */
  .chg-row { position:relative; overflow:hidden; border-top:1px solid var(--line); }
  .chg-slide { position:relative; background:var(--panel); padding:9px 0; transition:transform 0.18s ease; will-change:transform; }
  .chg-row.swiped .chg-slide { transform:translateX(-84px); }
  .chg-del { position:absolute; top:0; right:0; bottom:0; width:84px; border:none; background:var(--danger);
    color:#fff; font-family:var(--body); font-size:13px; font-weight:600; cursor:pointer; }
  .view-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-top:1px solid var(--line); gap:8px; }
  .view-row:first-of-type { border-top:none; }
  .view-row .vlabel { font-size:13px; }
  .switch { position:relative; width:38px; height:22px; flex-shrink:0; }
  .switch input { opacity:0; width:0; height:0; }
  .switch .track { position:absolute; inset:0; background:#ccd0c6; border-radius:22px; cursor:pointer; transition:background 0.15s ease; }
  .switch .track::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.15s ease; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
  .switch input:checked + .track { background:var(--green); }
  .switch input:checked + .track::before { transform:translateX(16px); }
  .switch input:disabled + .track { opacity:0.4; cursor:not-allowed; }
  .sync-line { font-size:12px; line-height:1.4; color:var(--ink-soft); }
  .sync-line.warn { color:#9a6a00; font-weight:600; }
  .sync-line.bad { color:var(--danger); font-weight:600; }

  /* ---------- Profile sheet ----------
     Farm account, sync, offline maps, backups and sign out, laid out as
     grouped rows in the style of iOS Settings. */
  .profile-panel { position:fixed; bottom:calc(var(--tabbar-total) + 10px); right:12px; z-index:1500; background:#f2f3f0; border-radius:var(--radius); box-shadow:var(--sheet-shadow); padding:16px 14px 14px; width:min(340px, calc(100vw - 24px)); max-height:min(74vh, 600px); overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 0.16s ease, transform 0.16s ease; }
  .profile-panel.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .pf-head { display:flex; align-items:center; gap:12px; padding:2px 4px 14px; }
  .pf-avatar { width:50px; height:50px; border-radius:50%; flex-shrink:0; background:linear-gradient(145deg, #3d6b43, #203a25); color:#fff; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:600; letter-spacing:-0.3px; }
  .pf-name { font-size:19px; font-weight:700; letter-spacing:-0.35px; color:var(--ink); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pf-sub { font-size:13px; color:var(--ink-soft); margin-top:2px; }
  .pf-label { font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; margin:4px 6px 6px; }
  .pf-group { background:#fff; border-radius:12px; overflow:hidden; margin-bottom:16px; }
  .pf-row { display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:10px 14px; background:transparent; border:none; border-top:0.5px solid var(--line); font-family:inherit; font-size:15px; color:var(--ink); text-align:left; cursor:pointer; }
  .pf-group > .pf-row:first-child, .pf-group > :first-child { border-top:none; }
  .pf-row:active { background:#f1f3ef; }
  .pf-row .pf-ic { width:28px; height:28px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; }
  .pf-row .pf-ic svg { width:17px; height:17px; }
  .pf-row .pf-text { flex:1; min-width:0; }
  .pf-link { display:block; margin-top:6px; padding:0; background:none; border:none; color:var(--green); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
  .pf-check { width:24px; height:24px; border-radius:50%; background:#34a853; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .pf-check svg { width:14px; height:14px; }
  .pf-row.danger { color:var(--danger); justify-content:center; font-weight:600; }
  .pf-info { padding:11px 14px; border-top:0.5px solid var(--line); }
  .pf-info:first-child { border-top:none; }
  .pf-info .sync-line { font-size:13px; }
  .pf-group .small-link-btn { margin:6px auto 2px; font-size:13px; }
  #downloadProgressWrap, #tileCacheStatus { padding:0 14px; }
  /* On a phone the bottom sheets all open centred above the bar, the same
     width, so whichever icon you tap the sheet lands in the same place. */
  @media (max-width:560px) {
    #sidebar, .mob-panel, .changes-panel, .profile-panel {
      left:12px; right:12px; margin-left:auto; margin-right:auto; width:auto; max-width:420px;
    }
  }
  @media (max-width:720px), (max-height:500px), (pointer:coarse) {
    header { padding:calc(var(--top-inset) + var(--top-breathe)) 12px 8px 12px; }
    header h1 { font-size:17px; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
  /* Phone on its side: the screen is short, so panels use all the height
     there is above the bar (instead of a share of it), and stay clear of
     the notch, which is now at a side edge. */
  @media (orientation:landscape) and (max-height:500px) {
    #sidebar, .mob-panel, .changes-panel, .profile-panel {
      max-height:calc(100vh - var(--tabbar-total, 56px) - 54px) !important;
    }
    .mob-panel { left:calc(12px + env(safe-area-inset-left, 0px)); }
    .changes-panel, .profile-panel, #sidebar { right:calc(12px + env(safe-area-inset-right, 0px)); }
  }
  @media (orientation:landscape) {
    :root { --top-breathe: 0px; }
    /* The notch/Dynamic Island rotates to a side edge in landscape — a small
       nudge keeps the title clear of it without shifting the whole header. */
    header h1 { margin-left:10px; }
  }
  /* ---------- Accounts ---------- */
  .modal-card input[type=password] { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; font-size:16px; font-family:inherit; margin-bottom:12px; }
  .acct-intro { font-size:13px; color:var(--ink-soft); line-height:1.45; margin:-2px 0 14px; }
  .acct-intro b { color:var(--ink); font-weight:600; }
  .acct-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0 12px; }
  .acct-row .vlabel { font-size:15px; }
  .vis-list { max-height:34vh; overflow-y:auto; margin:0 0 6px; border:1px solid var(--line); border-radius:10px; padding:2px 12px; }
  .vis-chk { display:flex; align-items:center; gap:10px; padding:9px 0; font-size:15px; cursor:pointer; border-top:0.5px solid var(--line); }
  .vis-list .vis-chk:first-child { border-top:none; }
  .vis-chk input { width:19px; height:19px; accent-color:var(--green); flex-shrink:0; margin:0; }
  .vis-chk.solo { border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-top:8px; }
  .acct-note { font-size:12px; color:var(--ink-soft); margin:6px 0 4px; line-height:1.4; }
  .acct-error { color:var(--danger); font-size:13px; margin:2px 0 10px; display:none; }
  .vo-banner { font-size:13px; color:var(--ink-soft); line-height:1.45; }
  /* A visitor's login can look but not change anything: every control
     that would change the farm is taken away. */
  body.view-only #fab, body.view-only .vo-hide, body.view-only .add-layer-row, body.view-only #addMobBtn,
  body.view-only #viewTreatmentsBtn, body.view-only #viewDisposalsBtn, body.view-only #mobEditBtn,
  body.view-only #mobMoveBtn, body.view-only #mobSplitBtn, body.view-only #offlineHint,
  body.view-only #redrawBoundaryBtn, body.view-only #backupGroup, body.view-only #backupLabel,
  body.view-only .owner-only { display:none !important; }
  body:not(.view-only) .viewer-only { display:none !important; }
  body.is-demo .owner-only { display:none !important; }
  /* Staff logins: everything except managing people, visitors and billing. */
  body.is-staff .owner-only { display:none !important; }
  body.view-only .person-only, body.is-demo .person-only { display:none !important; }
  /* =====================================================================
     Windows, 2026 look. Every panel and window floats above the map as one
     card, in the colours of the bottom bar (Dark) or a clean light version
     (Light). Chosen per phone in Profile → Appearance. The map, its labels
     and the bottom bar are untouched.
     ===================================================================== */
  html[data-theme="dark"] {
    color-scheme: dark;
    --panel: #111813; --panel-border: rgba(255,255,255,0.13);
    --card: rgba(255,255,255,0.065); --card-press: rgba(255,255,255,0.11);
    --ink: #f1f4f0; --ink-soft: #9fb0a4; --line: rgba(255,255,255,0.10);
    --field: rgba(255,255,255,0.07); --field-line: rgba(255,255,255,0.16);
    --accent: #a6e35b; --accent-ink: #0d1712; --accent-soft: rgba(166,227,91,0.14); --accent-line: rgba(166,227,91,0.38);
    --danger: #ff7b6e; --warn: #f2c94c; --overlay: rgba(0,0,0,0.55);
    --win-shadow: 0 18px 44px rgba(0,0,0,0.5);
  }
  html[data-theme="light"] {
    color-scheme: light;
    --panel: #ffffff; --panel-border: rgba(0,0,0,0.06);
    --card: #f2f4f0; --card-press: #e7eae4;
    --ink: #141c16; --ink-soft: #5b665e; --line: #e3e6df;
    --field: #f3f5f1; --field-line: #dce1d9;
    --accent: #2f7d3a; --accent-ink: #ffffff; --accent-soft: #e5f1e6; --accent-line: #b8d7bc;
    --danger: #c2412d; --warn: #9a6a00; --overlay: rgba(20,26,20,0.42);
    --win-shadow: 0 16px 40px rgba(0,0,0,0.22);
  }

  /* --- the window itself --- */
  #sidebar, .fab-menu, .views-panel, .mob-panel, .changes-panel, .profile-panel, .modal-card {
    background: var(--panel); color: var(--ink);
    border: 0.5px solid var(--panel-border); border-radius: 26px; box-shadow: var(--win-shadow);
  }
  .modal-overlay { background: var(--overlay); }
  .modal-card { padding: 22px 18px 18px; }
  .modal-card h2, .mob-panel-header h3, .views-panel h3, .changes-panel h3 { color: var(--ink); font-size: 22px; letter-spacing: -0.45px; }
  .area-preview, .measure-preview, .acct-intro, .acct-note, .mob-total, .empty-hint, .layer-empty, .popup-measure, .popup-locked-note { color: var(--ink-soft); }
  .acct-intro b, .confirm-msg { color: var(--ink); }
  .field-label { color: var(--ink-soft); font-weight: 600; letter-spacing: 0.08em; }

  /* --- fields --- */
  .modal-card input[type=text], .modal-card input[type=password], .modal-card input[type=number], .modal-card input[type=date],
  .modal-card textarea, .modal-card select, .passcode-input, .tx-field, .mob-stock-line select, .mob-stock-line input[type=number],
  .mob-stock-date, .move-select, .add-layer-row input, .layer-header input.lname-edit {
    background-color: var(--field); color: var(--ink); border: 1px solid var(--field-line); border-radius: 12px;
  }
  .modal-card input::placeholder, .modal-card textarea::placeholder, .add-layer-row input::placeholder, .passcode-input::placeholder { color: var(--ink-soft); opacity: 0.8; }
  .modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus, .tx-field:focus, .passcode-input:focus, .add-layer-row input:focus { outline: 2px solid var(--accent-line); outline-offset: 0; border-color: var(--accent); }
  .mob-stock-entry { background: var(--card); border: none; border-radius: 14px; }
  .mob-stock-date-label { color: var(--ink-soft); }

  /* --- buttons --- */
  .btn { background: var(--card); border: 1px solid transparent; color: var(--ink); border-radius: 14px; min-height: 44px; }
  .btn:active { background: var(--card-press); filter: none; }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn-primary:active { background: var(--accent); filter: brightness(0.92); }
  .btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
  .btn.btn-danger-text { background: transparent; color: var(--danger); }
  .mob-stock-line button, .item-card button.delete-btn, .small-link-btn { color: var(--danger); }
  .pf-link, .popup-actions a, .backup-row button { color: var(--accent); }
  .popup-actions a.delete-link { color: var(--danger); }

  /* --- choices: colours, thickness, pasture, map type, switches --- */
  .swatch.selected { border-color: var(--ink); }
  .thickness-option { background: var(--card); border: 1.5px solid transparent; border-radius: 14px; }
  .thickness-option.selected { border-color: var(--accent); background: var(--accent-soft); }
  .thickness-bar { background: var(--ink); }
  .thickness-label, .pasture-opt-date { color: var(--ink-soft); }
  .thickness-option.selected .thickness-label { color: var(--ink); }
  .base-toggle { background: var(--card); border-radius: 12px; padding: 3px; }
  .base-option { color: var(--ink-soft); border-radius: 9px; padding: 8px 0; font-size: 13px; }
  .base-option.active { background: var(--accent); color: var(--accent-ink); }
  .switch .track { background: var(--field-line); }
  .switch input:checked + .track { background: var(--accent); }
  html[data-theme="dark"] .switch input:checked + .track::before { background: #0d1712; }
  .view-row { border-top-color: var(--line); }
  .view-row .vlabel { color: var(--ink); }
  .vis-list { border-color: var(--field-line); border-radius: 14px; }
  .vis-chk { border-top-color: var(--line); color: var(--ink); }
  .vis-chk input { accent-color: var(--accent); }
  .vis-chk.solo { border-color: var(--field-line); border-radius: 14px; }
  .sync-line { color: var(--ink-soft); }
  .sync-line.warn { color: var(--warn); }
  .sync-line.bad { color: var(--danger); }
  .acct-error { color: var(--danger); }

  /* --- Add menu --- */
  .fab-menu { padding: 8px; min-width: 230px; }
  .fab-option { color: var(--ink); border-radius: 14px; padding: 12px 12px; }
  .fab-option:active { background: var(--card); }
  .fab-option svg { color: var(--accent); }

  /* --- Layers --- */
  #summary { background: transparent; border-bottom: 1px solid var(--line); padding: 14px 16px 10px; }
  #summary .big { color: var(--accent); font-size: 15px; }
  #summary .label { color: var(--ink-soft); font-size: 12px; }
  #list { padding: 10px; }
  .layer-block { border: none; background: var(--card); border-radius: 16px; margin-bottom: 8px; }
  .layer-header { background: transparent; border-left: none; padding: 11px 12px; border-radius: 16px; }
  .layer-header.active { background: var(--accent-soft); }
  .layer-header .lname { font-size: 15px; color: var(--ink); }
  .layer-header .dot { background: var(--field-line); }
  .layer-header.active .dot { background: var(--accent); }
  .layer-header button, .layer-header button.expand-btn { color: var(--ink-soft); }
  .layer-body { padding: 4px 8px 8px; }
  .item-card { background: var(--panel); border: none; border-radius: 12px; padding: 10px 12px; }
  .item-card:active { background: var(--card-press); }
  .item-card .info strong { font-size: 14px; color: var(--ink); }
  .item-card .info span { color: var(--ink-soft); font-size: 12px; }
  .add-layer-row { padding: 8px 2px 2px; gap: 8px; }
  .add-layer-row input { padding: 11px 12px; font-size: 15px; min-width: 0; }
  .add-layer-row button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); border-radius: 12px; padding: 0 14px; font-size: 14px; font-weight: 700; white-space: nowrap; }

  /* --- Map Views --- */
  .views-panel { padding: 16px; width: 260px; }
  /* Leaflet makes its controls catch taps even inside a hidden panel; the
     closed panel's imagery credits were swallowing taps on the map. */
  .views-panel:not(.open) .leaflet-control { pointer-events: none !important; }

  /* --- paddock and pin pop-ups --- */
  .leaflet-popup-content-wrapper { background: var(--panel); color: var(--ink); border-radius: 18px; box-shadow: var(--win-shadow); border: 0.5px solid var(--panel-border); }
  .leaflet-popup-tip { background: var(--panel); box-shadow: none; }
  .leaflet-container a.leaflet-popup-close-button { color: var(--ink-soft); }
  .leaflet-popup-content { margin: 12px 14px; }
  .popup-body strong { color: var(--ink); font-size: 16px; }
  .popup-notes { color: var(--ink); border-top-color: var(--line); }
  .popup-pasture-date { color: var(--ink-soft); }

  /* --- decisions and swipe-to-delete --- */
  .dec-card { background: var(--card); border-radius: 16px; }
  .dec-title, .dec-val { color: var(--ink); }
  .dec-sub, .dec-field, .dec-who { color: var(--ink-soft); }
  .dec-row { border-top-color: var(--line); }
  .chg-row { border-top: none; border-radius: 14px; }
  .chg-slide { background: var(--panel); }

  #toast { background: rgba(14,20,16,0.94); border: 0.5px solid rgba(255,255,255,0.14); border-radius: 999px; }
  html[data-theme="light"] #toast { background: rgba(20,28,22,0.92); }

  /* ---------- What's New ---------- */
  .changes-panel { padding: 18px 16px 10px; }
  .wn-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 6px; }
  .wn-head h3 { margin: 0; }
  .wn-new { background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; display: none; }
  .wn-day { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 0 8px 48px; }
  .wn-group { position: relative; }
  .wn-group::before { content: ''; position: absolute; left: 17px; top: 4px; bottom: 6px; width: 1.5px; background: var(--line); }
  .changes-panel .chg-row { margin-bottom: 2px; }
  .changes-panel .chg-slide { display: flex; gap: 12px; padding: 7px 0 9px; align-items: flex-start; }
  .wn-ic { position: relative; width: 35px; height: 35px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--card-press); color: var(--ink-soft); }
  html[data-theme="dark"] .wn-ic { background: #222b25; border: 1px solid rgba(255,255,255,0.14); }
  .wn-ic svg { width: 17px; height: 17px; }
  .wn-ic.t-burn { color: #ff9f5a; } .wn-ic.t-sale { color: var(--warn); } .wn-ic.t-delete { color: var(--danger); }
  html[data-theme="light"] .wn-ic.t-burn { color: #b4541a; }
  html[data-theme] .wn-ic.is-new { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .wn-body { flex: 1; min-width: 0; padding-top: 1px; }
  .wn-text { font-size: 15px; line-height: 1.35; color: var(--ink); }
  .wn-text b { font-weight: 650; }
  .wn-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
  .wn-map { display: inline-flex; align-items: center; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--field-line); padding: 6px 12px; border-radius: 999px; }
  .wn-empty { color: var(--ink-soft); font-size: 14px; line-height: 1.5; padding: 10px 2px 14px; }
  .changes-panel .chg-del { border-radius: 14px; }
  .chg-row:not(.swiped) .chg-del { visibility: hidden; }
  .chg-row .chg-del { transition: visibility 0s linear 0.18s; }
  .chg-row.swiped .chg-del { transition: none; }

  /* ---------- Mob Tracker ---------- */
  .mob-panel { padding: 18px 12px 12px; }
  .mob-panel-header { padding: 0 6px; margin-bottom: 12px; align-items: flex-start; }
  .mob-total { font-size: 14px; margin: 3px 0 0; }
  .mob-total b { color: var(--accent); font-weight: 700; }
  #mobPanelCloseBtn { display: none; }
  .mp-add { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
  .mp-add svg { width: 14px; height: 14px; }
  #mobListArea { display: flex; flex-direction: column; gap: 8px; }
  .mob-card { background: var(--card); border-radius: 18px; padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .mob-card:active { background: var(--card-press); }
  .mob-card .mc-info { flex: 1; min-width: 0; }
  .mob-card .mc-name { font-size: 16px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-card .mc-where { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
  .mob-card .mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .mob-card .mc-chip { font-size: 12px; font-weight: 600; background: var(--card-press); color: var(--ink); padding: 4px 9px; border-radius: 999px; }
  .mob-card .mc-warn { font-size: 12px; font-weight: 700; color: var(--danger); margin-top: 6px; }
  .mob-card .mc-num { text-align: right; flex-shrink: 0; }
  .mob-card .mc-num b { display: block; font-size: 25px; font-weight: 700; letter-spacing: -0.6px; color: var(--ink); line-height: 1.05; }
  .mob-card .mc-num span { font-size: 11px; color: var(--ink-soft); }
  .mp-empty { color: var(--ink-soft); font-size: 14px; padding: 6px 6px 10px; line-height: 1.5; }
  .mp-foot { display: flex; gap: 8px; margin-top: 12px; }
  .mp-foot .btn { flex: 1; background: transparent; border: 1px solid var(--field-line); margin: 0; }

  /* ---------- Jobs (tasks) ---------- */
  .tab-btn.on .ic-tick { stroke:#1d241c; }
  .tasks-panel { padding: 18px 12px 12px; }
  .tk-switch { display: flex; background: var(--card); border-radius: 12px; padding: 3px; margin: 0 0 10px; }
  .tk-switch button { flex: 1; border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 650; padding: 8px 0; border-radius: 9px; cursor: pointer; }
  .tk-switch button.on { background: var(--card-press); color: var(--ink); }
  .tk-group { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 6px 6px; }
  .tk-group.tk-late { color: var(--danger); }
  .tk-card { background: var(--card); border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .tk-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--field-line, var(--line)); background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
  .tk-check svg { width: 15px; height: 15px; opacity: 0; }
  .tk-card.done .tk-check { background: var(--accent); border-color: var(--accent); }
  .tk-card.done .tk-check svg { opacity: 1; }
  .tk-card.late .tk-check { border-color: var(--danger); }
  .tk-info { flex: 1; min-width: 0; cursor: pointer; }
  .tk-title { font-size: 15.5px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
  .tk-card.done .tk-title { color: var(--ink-soft); text-decoration: line-through; }
  .tk-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }
  .tk-meta .tk-due-late { color: var(--danger); font-weight: 650; }
  .tk-empty { color: var(--ink-soft); font-size: 14px; padding: 6px 6px 10px; line-height: 1.5; }
  .tk-more { display: block; width: 100%; background: transparent; border: none; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; padding: 8px; cursor: pointer; }
  .tk-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
  .tk-cal-head b { font-size: 16px; color: var(--ink); }
  .tk-cal-head button { border: none; background: var(--card); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; line-height: 1; }
  .tk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .tk-cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-soft); padding: 2px 0 4px; }
  .tk-day { position: relative; height: 40px; min-width: 0; border: none; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; }
  .tk-day.other { color: var(--ink-soft); opacity: 0.45; }
  .tk-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 700; }
  .tk-day.sel { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .tk-dots { display: flex; gap: 2px; height: 5px; }
  .tk-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: block; }
  .tk-dots i.late { background: var(--danger); }
  .tk-dots i.done { background: var(--ink-soft); }
  .tk-day.sel .tk-dots i { background: var(--accent-ink); }
  .tk-day-title { font-size: 13px; font-weight: 700; color: var(--ink-soft); padding: 12px 6px 6px; }
  .tk-templates { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
  .tk-templates button { border: 1px solid var(--field-line, var(--line)); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
  .tk-templates button:active { background: var(--card-press); }
  .tk-repeat-note { font-size: 12.5px; color: var(--ink-soft); margin: -4px 0 10px; line-height: 1.4; }
  .tk-repeat-note:empty { display: none; }
  #taskModal .field-label { display: block; margin-bottom: 4px; }

  /* ---------- Profile ---------- */
  .profile-panel { background: var(--panel); padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
  .pf-hero { background: var(--card); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
  html[data-theme="light"] .pf-hero { background: #14201a; color: #fff; }
  .pf-hero-top { display: flex; align-items: center; gap: 12px; }
  .pf-avatar { width: 52px; height: 52px; border-radius: 17px; background: var(--accent); color: var(--accent-ink); font-size: 23px; font-weight: 800; }
  html[data-theme="light"] .pf-avatar { background: #a6e35b; color: #0d1712; }
  .pf-name { color: var(--ink); font-size: 20px; font-weight: 750; }
  .pf-sub { color: var(--ink-soft); }
  html[data-theme="light"] .pf-hero .pf-name { color: #fff; }
  html[data-theme="light"] .pf-hero .pf-sub, html[data-theme="light"] .pf-hero .sync-line { color: #b9c7bd; }
  .pf-sync { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border-radius: 14px; padding: 10px 12px; }
  html[data-theme="light"] .pf-sync { background: rgba(255,255,255,0.09); }
  .pf-sync .sync-line { flex: 1; min-width: 0; font-size: 13px; }
  .pf-sync-dot { width: 9px; height: 9px; border-radius: 50%; background: #a6e35b; flex-shrink: 0; }
  .pf-sync-dot.warn { background: #f2c94c; } .pf-sync-dot.bad { background: #ff7b6e; }
  .pf-sync-btn { background: #ffffff; color: #0d1712; border: none; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
  .pf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-tile { background: var(--card); border: none; border-radius: 20px; padding: 14px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 96px; }
  .pf-tile:active { background: var(--card-press); }
  .pf-tile svg { width: 23px; height: 23px; color: var(--accent); margin-bottom: auto; padding-bottom: 12px; box-sizing: content-box; }
  .pf-tile-title { font-size: 15px; font-weight: 700; }
  .pf-tile-sub { font-size: 12px; color: var(--ink-soft); }
  .pf-card { background: var(--card); border-radius: 20px; padding: 14px; }
  .pf-card-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
  .pf-card-strong { font-size: 15px; font-weight: 600; color: var(--ink); }
  .pf-card-text { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
  #tileCacheStatus:empty { display: none; }
  #tileCacheStatus { margin-top: 8px; }
  .pf-check { background: var(--accent); color: var(--accent-ink); }
  .pf-toggle-row { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
  .pf-toggle-row .vlabel { font-size: 14px; }
  .pf-wide-btn { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: none; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
  .pf-wide-btn svg { width: 18px; height: 18px; }
  .pf-progress-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin: 12px 0 6px; }
  .pf-progress { height: 6px; border-radius: 3px; background: var(--field-line); overflow: hidden; }
  .pf-progress > div { height: 100%; background: var(--accent); transition: width 0.2s ease; }
  .seg { display: flex; background: var(--field); border-radius: 12px; padding: 3px; gap: 2px; }
  .seg button { flex: 1; border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 4px; border-radius: 9px; cursor: pointer; }
  .seg button.on { background: var(--accent); color: var(--accent-ink); }
  .pf-signout { min-height: 46px; border-radius: 14px; border: 1px solid rgba(255,123,110,0.4); background: transparent; color: var(--danger); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  html[data-theme="light"] .pf-signout { border-color: rgba(194,65,45,0.3); }
  .profile-panel .vo-banner { color: var(--ink-soft); }
  /* ---------- Toned down: smaller type, tighter cards ---------- */
  .modal-card h2, .mob-panel-header h3, .views-panel h3, .changes-panel h3 { font-size: 18px; letter-spacing: -0.3px; }
  .modal-card { padding: 18px 16px 16px; border-radius: 22px; }
  #sidebar, .fab-menu, .views-panel, .mob-panel, .changes-panel, .profile-panel { border-radius: 22px; }
  .btn { min-height: 40px; padding: 9px 14px; font-size: 14px; border-radius: 12px; }
  .fab-option { padding: 10px 11px; font-size: 14px; }
  .layer-header { padding: 9px 10px; }
  .layer-header .lname { font-size: 14px; }
  /* Mob Tracker */
  .mob-panel { padding: 14px 10px 10px; }
  .mob-panel-header { margin-bottom: 10px; }
  .mob-total { font-size: 13px; margin-top: 1px; }
  .mp-add { padding: 7px 12px; font-size: 13px; }
  .mp-add svg { width: 12px; height: 12px; }
  #mobListArea { gap: 6px; }
  .mob-card { padding: 10px 12px; border-radius: 14px; gap: 10px; }
  .mob-card .mc-name { font-size: 15px; }
  .mob-card .mc-where { font-size: 12px; margin-top: 1px; }
  .mob-card .mc-chips { gap: 4px; margin-top: 5px; }
  .mob-card .mc-chip { font-size: 11px; padding: 2px 7px; }
  .mob-card .mc-num b { font-size: 20px; letter-spacing: -0.4px; }
  .mob-card .mc-num span { font-size: 10px; }
  .mp-foot { margin-top: 8px; gap: 6px; }
  .mp-foot .btn { min-height: 38px; font-size: 13px; }
  /* Profile */
  .profile-panel { padding: 10px; gap: 8px; }
  .pf-hero { padding: 12px; gap: 10px; border-radius: 18px; }
  .pf-avatar { width: 40px; height: 40px; border-radius: 13px; font-size: 18px; }
  .pf-name { font-size: 16px; }
  .pf-sub { font-size: 12px; margin-top: 1px; }
  .pf-sync { padding: 7px 10px; border-radius: 12px; }
  .pf-sync .sync-line { font-size: 12px; }
  .pf-sync-btn { padding: 5px 10px; font-size: 12px; }
  .pf-tiles { gap: 6px; }
  .pf-tile { min-height: 0; padding: 10px 12px; border-radius: 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
  .pf-tile svg { width: 19px; height: 19px; padding: 0; margin: 0; grid-row: span 2; }
  .pf-tile-title { font-size: 13px; }
  .pf-tile-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pf-card { padding: 10px 12px; border-radius: 14px; }
  .pf-card-title { font-size: 13px; margin-bottom: 6px; }
  .pf-card-strong { font-size: 14px; }
  .pf-card-text { font-size: 12px; }
  .pf-link { font-size: 13px; margin-top: 4px; }
  .pf-wide-btn { min-height: 38px; margin-top: 8px; font-size: 14px; border-radius: 12px; }
  .seg button { padding: 6px 4px; font-size: 12px; }
  .pf-signout { min-height: 38px; font-size: 14px; border-radius: 12px; }
  .pf-check { width: 20px; height: 20px; }
  /* What's New */
  .changes-panel { padding: 14px 12px 8px; }
  .wn-day { font-size: 11px; padding: 10px 0 6px 40px; }
  .wn-group::before { left: 14px; }
  .changes-panel .chg-slide { gap: 10px; padding: 5px 0 7px; }
  .wn-ic { width: 29px; height: 29px; }
  .wn-ic svg { width: 14px; height: 14px; }
  .wn-text { font-size: 13.5px; }
  .wn-meta { font-size: 11.5px; margin-top: 2px; }
  .wn-body { display: flex; align-items: center; gap: 8px; }
  .wn-main { flex: 1; min-width: 0; }
  .wn-map { margin: 0; flex-shrink: 0; font-size: 11px; padding: 4px 9px; white-space: nowrap; }
  /* Paddock and pin pop-ups */
  .popup-body strong { font-size: 14px; }
  .popup-measure { font-size: 11.5px; }
  .popup-actions { font-size: 12.5px; margin-top: 7px; }
  .leaflet-popup-content { margin: 10px 12px; }
  /* Pasture right in the pop-up: four small chips */
  .pp-row { display: flex; gap: 4px; margin-top: 7px; }
  .pp-chip { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px 4px; border: 1px solid transparent; border-radius: 9px; background: var(--card); color: var(--ink-soft); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; line-height: 1.15; }
  .pp-chip .pp-dot { width: 9px; height: 9px; border-radius: 50%; display: block; margin-bottom: 1px; box-shadow: 0 0 0 1px rgba(127,127,127,0.55); }
  .pp-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
  .pp-date { font-size: 9px; font-weight: 400; color: var(--ink-soft); display: none; white-space: nowrap; }
  .pp-chip.on .pp-date { display: block; }
  .burn-date-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 6px; }
  .burn-date-input { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; line-height: 1.2; box-sizing: border-box; margin-bottom: 16px; padding: 11px 12px; border: 1px solid var(--field-line, var(--line)); border-radius: 10px; font: inherit; font-size: 16px; background: var(--card); color: var(--ink); }
  .pp-chip input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; }
  /* Reshaping: corners you can drag, half-way points you can pull out */
  .leaflet-editing-icon { border-radius: 50% !important; background: #ffffff !important; border: 2.5px solid #2f7d3a !important; box-shadow: 0 1px 4px rgba(0,0,0,0.45); }
  .reshape-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 38px; margin: -2px 0 14px; border: 1px dashed var(--field-line); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .reshape-btn svg { width: 16px; height: 16px; color: var(--accent); }
  .active-tag button.tag-undo { display: flex; align-items: center; justify-content: center; }
  .active-tag button.tag-undo svg { width: 15px; height: 15px; }

  /* ---------- Accounts ---------- */
  .login-signup { display:block; width:100%; margin:16px 0 4px; background:none; border:none; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; padding:10px 0; }
  .login-signup b { color:var(--accent); }
  .legal-links { text-align:center; font-size:12px; color:var(--ink-soft); margin-top:4px; }
  .legal-links a, .vis-chk a { color:var(--ink-soft); }
  #signupModal input:not([type=checkbox]), #peopleModal input, #peopleModal select, #propertiesModal input, #meModal input { width:100%; box-sizing:border-box; padding:11px 12px; font:inherit; font-size:16px; border-radius:12px; margin-bottom:12px; min-height:44px; }
  #peopleModal select { appearance:none; -webkit-appearance:none; }
  .person-row { background:var(--card); border-radius:16px; padding:12px 14px; margin-bottom:8px; }
  .person-head { display:flex; align-items:center; gap:10px; }
  .person-avatar { width:38px; height:38px; border-radius:12px; background:var(--accent-soft); color:var(--ink); font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .person-name { font-size:15.5px; font-weight:700; color:var(--ink); }
  .person-sub { font-size:12.5px; color:var(--ink-soft); }
  .role-chip { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:3px 8px; border-radius:999px; background:var(--card-press); color:var(--ink-soft); margin-left:auto; flex-shrink:0; }
  .role-chip.owner { background:var(--accent-soft); color:var(--ink); }
  .device-row { display:flex; align-items:center; gap:10px; padding:9px 0 0; margin-top:9px; border-top:1px solid var(--line); font-size:13px; color:var(--ink); }
  .device-row .dv-info { flex:1; min-width:0; }
  .device-row .dv-when { font-size:12px; color:var(--ink-soft); }
  .mini-btn { border:1px solid var(--field-line, var(--line)); background:transparent; color:var(--ink); font:inherit; font-size:13px; font-weight:600; border-radius:999px; padding:0 14px; min-height:40px; cursor:pointer; flex-shrink:0; }
  .mini-btn.danger { color:var(--danger); }
  .person-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .prop-row { display:flex; align-items:center; gap:10px; width:100%; background:var(--card); border:none; border-radius:16px; padding:14px; margin-bottom:8px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; min-height:56px; }
  .prop-row.current { box-shadow:inset 0 0 0 1.5px var(--accent); cursor:default; }
  .prop-row .pr-name { font-size:15.5px; font-weight:700; }
  .prop-row .pr-sub { font-size:12.5px; color:var(--ink-soft); }
  .billing-card .pf-card-text { margin-bottom:10px; }
  .billing-banner { position:fixed; top:calc(var(--top-inset) + 44px); left:50%; transform:translateX(-50%); z-index:1200; display:flex; align-items:center; gap:10px; background:rgba(20,26,20,0.9); color:#fff; border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:6px 6px 6px 16px; font-size:13px; max-width:calc(100vw - 24px); box-shadow:0 6px 18px rgba(0,0,0,0.25); }
  .billing-banner span { min-width:0; }
  .billing-banner button { background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px; font:inherit; font-weight:700; font-size:13px; padding:0 14px; min-height:36px; cursor:pointer; flex-shrink:0; }
  .billing-banner.ended { background:rgba(120,30,20,0.92); }

  /* ---------- Station hub: rain, water, records ---------- */
  .hub-tabs { margin-top: 2px; }
  .hub-tabs button { padding: 9px 0; font-size: 13.5px; }
  .st-card { background: var(--card); border-radius: 18px; padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; }
  .st-card:active { background: var(--card-press); }
  .st-card.overdue { box-shadow: inset 3px 0 0 var(--warn); }
  .st-info { flex: 1; min-width: 0; }
  .st-name { font-size: 15.5px; font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .st-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
  .st-note { font-size: 12.5px; color: var(--ink); margin-top: 4px; font-style: italic; }
  .st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .st-late { color: var(--warn); font-weight: 700; }
  .st-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; background: var(--card-press); color: var(--ink-soft); }
  .st-status.ok { background: var(--accent-soft); color: var(--ink); }
  .st-status.warn { background: rgba(242, 201, 76, 0.18); color: var(--warn); }
  .st-status.bad { background: rgba(255, 123, 110, 0.16); color: var(--danger); }
  .st-quick { flex-shrink: 0; min-width: 48px; min-height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--field-line, var(--line)); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
  .st-quick.ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .st-quick.bad { color: var(--danger); min-width: 44px; }
  .rain-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
  .rain-totals.station { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rain-totals div { background: var(--card); border-radius: 14px; padding: 10px; }
  .rain-totals b { display: block; font-size: 22px; font-weight: 750; color: var(--ink); letter-spacing: -0.4px; }
  .rain-totals span { font-size: 11.5px; color: var(--ink-soft); }
  .rain-chart { width: 100%; height: auto; display: block; margin-top: 4px; }
  .rain-chart .rc-now { fill: var(--accent); }
  .rain-chart .rc-last { fill: var(--card-press); stroke: var(--ink-soft); stroke-width: 0.6; }
  .rain-chart text { fill: var(--ink-soft); font-size: 9px; }
  .rc-key { font-size: 11.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; }
  .rc-key span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
  .rc-key .k-now { background: var(--accent); }
  .rc-key .k-last { background: var(--card-press); border: 1px solid var(--ink-soft); margin-left: 8px; }
  .rec-list { display: flex; flex-direction: column; gap: 4px; }
  .rec-row { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--card); border: none; border-radius: 12px; padding: 10px 12px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-height: 48px; margin-bottom: 4px; }
  .rec-row .rr-main { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
  .rec-row .rr-main small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
  .rec-row .rr-val { font-size: 13.5px; color: var(--ink); font-weight: 650; text-align: right; flex-shrink: 0; max-width: 50%; }
  .rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
  .rec-grid > .rec-tile:last-child:nth-child(odd) { grid-column: span 2; }
  .mob-recs { margin: -4px 0 14px; }
  #exportsCard .rec-grid, #propertyCard .pf-wide-btn { margin-top: 10px; }
  #mobRecordArea { margin-top: 6px; }
  .rec-tile { background: var(--card); border: none; border-radius: 14px; padding: 12px; min-height: 52px; font: inherit; font-size: 14px; font-weight: 650; color: var(--ink); text-align: left; cursor: pointer; }
  .rec-tile:active { background: var(--card-press); }
  .rec-tile.small { font-size: 13px; font-weight: 600; }
  .rec-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin: -6px 0 10px; }
  .rec-choice { margin-bottom: 8px; }
  #recModal .field-label { display: block; margin-bottom: 4px; }
  #recModal .rec-field { min-width: 0; }
  #recModal .vis-chk.solo { margin: 2px 0 16px; }
  .run-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
  .run-name { font-size: 15px; font-weight: 650; color: var(--ink); }
  .run-name span { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); }
  .run-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .run-btn { min-height: 44px; border-radius: 12px; border: 1px solid var(--field-line, var(--line)); background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .run-btn.ok.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .run-btn.warn.on { background: var(--warn); border-color: var(--warn); color: #1d1d1d; }
  .run-btn.bad.on { background: var(--danger); border-color: var(--danger); color: #fff; }
  .mob-extra { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: -6px 0 12px; }
  .mob-extra b { color: var(--ink); }
  .popup-station { font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
  .popup-station .st-status { font-size: 10px; padding: 2px 6px; }
  .pp-acts { display: flex; gap: 6px; margin-top: 8px; }
  .pp-act { flex: 1; min-height: 40px; border-radius: 12px; border: 1px solid var(--field-line, var(--line)); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0 10px; }
  .pp-act.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .pp-act.danger { color: var(--danger); }
  .sale-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .sale-grid input { width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 14px; }
  #featureExtraFields .tx-field { margin-bottom: 10px; }
  #featureExtraFields .field-label { display: block; margin-bottom: 4px; }
  .mob-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---------- Map views: imagery and paddock colours ---------- */
  .views-panel { max-height: min(76vh, 640px, calc(100vh - var(--top-inset) - var(--top-breathe) - 62px - var(--tabbar-total))); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .base-options { display: flex; flex-direction: column; gap: 6px; }
  .base-kind { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 2px 0; }
  .base-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: var(--card); border: none; border-radius: 12px; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; min-height: 48px; }
  .base-choice.active { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-soft); }
  .base-choice .bc-name { font-size: 14.5px; font-weight: 650; }
  .base-choice .bc-off { font-size: 11px; font-weight: 700; color: var(--accent); margin-left: 4px; }
  html[data-theme="light"] .base-choice .bc-off { color: var(--green-dark, #2f7d3a); }
  .base-choice .bc-note { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
  .colour-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 2px 4px; font-size: 12px; color: var(--ink-soft); }
  .colour-legend:empty { display: none; }
  .colour-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .colour-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

  /* ---------- Computer layout (desktop.js): windows side by side on the right ---------- */
  body.desk #sidebar, body.desk .mob-panel, body.desk .changes-panel, body.desk .profile-panel, body.desk .assist-panel {
    box-shadow: 0 14px 40px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.14);
  }
  body.desk .tabbar { width: min(440px, calc(100vw - 24px)); }

  /* ---------- Bigger buttons, drawn icons ---------- */
  /* Everything you tap is at least 44px - easy with gloves or dirty hands. */
  .layer-header { gap: 4px; }
  .layer-header button.lyr-btn { width: 44px; height: 44px; padding: 10px; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; }
  .layer-header button.lyr-btn svg { width: 22px; height: 22px; }
  .layer-header button.lyr-btn.on { color: var(--warn); }
  .layer-header button.lyr-btn:active { background: var(--card-press); }
  .layer-header button.expand-btn { width: 44px !important; height: 44px !important; margin: 0 !important; padding: 13px !important; border-radius: 12px; }
  .pf-sync-btn { min-height: 44px; padding: 0 16px !important; }
  #drawBoundaryBtn, #redrawBoundaryBtn, .pf-link { min-height: 44px; display: inline-flex; align-items: center; }
  .hist-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
  .hist-row .wn-ic { width: 30px; height: 30px; }
  .hist-row .wn-ic svg { width: 15px; height: 15px; }
  .hist-body { flex: 1; min-width: 0; }
  .hist-when { font-size: 11.5px; color: var(--ink-soft); }
  .hist-text { white-space: pre-line; font-size: 14px; color: var(--ink); line-height: 1.4; }

  /* ---------- Text size (Profile → Appearance) ---------- */
  /* The contents of windows and pop-ups are scaled, not the windows
     themselves, so everything still fits the screen. */
  html[data-text="l"] .mob-panel > *, html[data-text="l"] .changes-panel > *, html[data-text="l"] .profile-panel > *, html[data-text="l"] #sidebar > *,
  html[data-text="l"] .views-panel > *, html[data-text="l"] .modal-card > *, html[data-text="l"] .leaflet-popup-content > *, html[data-text="l"] .assist-panel > * { zoom: 1.12; }
  html[data-text="xl"] .mob-panel > *, html[data-text="xl"] .changes-panel > *, html[data-text="xl"] .profile-panel > *, html[data-text="xl"] #sidebar > *,
  html[data-text="xl"] .views-panel > *, html[data-text="xl"] .modal-card > *, html[data-text="xl"] .leaflet-popup-content > *, html[data-text="xl"] .assist-panel > * { zoom: 1.25; }
  html[data-text="xl"] .label-name { font-size: 13px; }

  /* Phone on its side: windows open on the right, clear of the map's
     zoom buttons on the left. */
  @media (orientation: landscape) and (max-height: 500px) {
    .mob-panel { left: auto !important; right: calc(12px + env(safe-area-inset-right, 0px)) !important; }
  }

  /* Thumb-sized: tabs, add buttons, ticks and switches all 44px or more. */
  .mp-add { min-height: 44px; }
  .tk-switch button { min-height: 44px; }
  .mp-foot .btn { min-height: 44px; }
  .seg button { min-height: 44px; }
  .tk-check { width: 44px; height: 44px; border: none !important; background: transparent !important; position: relative; margin: -8px -6px -8px -8px; }
  .tk-check::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid var(--field-line, var(--line)); }
  .tk-card.late .tk-check::before { border-color: var(--danger); }
  .tk-card.done .tk-check::before { background: var(--accent); border-color: var(--accent); }
  .tk-check svg { position: relative; z-index: 1; }
  .tk-day { min-height: 40px; }
  .label-stock .tag-ic { width: 0.95em; height: 0.95em; vertical-align: -0.12em; color: #f2c94c; }

  /* ---------- Ask GraziMap ---------- */
  .assist-btn { position: absolute; top: calc(var(--top-inset) + var(--top-breathe) + 46px); right: 10px; z-index: 1000; display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 14px 0 11px; border-radius: 999px; border: 0.5px solid rgba(255,255,255,0.32); cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)), rgba(14,18,14,0.6); color: #fff; font: inherit; font-size: 14px; font-weight: 700;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
  .assist-btn svg { width: 19px; height: 19px; color: var(--accent); }
  .assist-btn.on { background: var(--accent); color: var(--accent-ink); }
  .assist-btn.on svg { color: var(--accent-ink); }
  .assist-panel { display: flex; flex-direction: column; max-height: min(76vh, 640px); }
  .assist-panel #assistThread { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 10px; }
  .as-msg { max-width: 92%; border-radius: 16px; padding: 10px 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
  .as-msg p { margin: 0 0 6px; } .as-msg p:last-child { margin-bottom: 0; }
  .as-msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
  .as-msg.assistant { align-self: flex-start; background: var(--card); border-bottom-left-radius: 6px; }
  .as-msg .as-li { padding-left: 14px; position: relative; margin: 3px 0; }
  .as-msg .as-li::before { content: ''; position: absolute; left: 3px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
  .as-from { font-size: 12.5px; color: var(--ink-soft); }
  .as-article { margin-top: 8px; } .as-article b { display: block; margin-bottom: 2px; }
  .as-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .as-chip { border: 1px solid var(--field-line, var(--line)); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 8px 12px; min-height: 40px; cursor: pointer; text-align: left; }
  .as-dots { display: flex; gap: 5px; padding: 4px 2px; }
  .as-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); animation: asDot 1.2s infinite ease-in-out; }
  .as-dots span:nth-child(2) { animation-delay: 0.15s; } .as-dots span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes asDot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
  .assist-input { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; border-top: 1px solid var(--line); }
  .assist-input textarea { flex: 1; min-width: 0; resize: none; border-radius: 14px; padding: 11px 12px; font: inherit; font-size: 16px; line-height: 1.3; min-height: 44px; max-height: 120px; background: var(--field); color: var(--ink); border: 1px solid var(--field-line); }
  .assist-input button { width: 48px; height: 44px; border-radius: 14px; border: none; background: var(--accent); color: var(--accent-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .assist-input button:disabled { opacity: 0.5; }
  .assist-input button svg { width: 22px; height: 22px; }
  body.desk .assist-panel { max-height: none; }
  body.view-only .assist-btn { display: inline-flex; }