:root {
    /* Type scale - the only font sizes used anywhere in the app.
       Title 18 (window titles) · Heading 14 (cards, items, sections) ·
       Body 13 (text, buttons, rows) · Small 12 (labels, notes) ·
       Caption 11 (tags, badges) · Display 20 (big numbers).
       Typing fields stay 16 so iPhones don't zoom in when you tap them. */
    --fs-caption: 11px; --fs-small: 12px; --fs-body: 13px; --fs-head: 14px; --fs-title: 18px; --fs-display: 20px; --fs-input: 16px;
    --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:var(--fs-title); 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:var(--fs-small); font-weight:700; color:var(--green-dark); }
  #summary .label { font-size:var(--fs-caption); 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:var(--fs-small); 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:var(--fs-body); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .layer-header input.lname-edit { flex:1; font-size:var(--fs-body); 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:var(--fs-body); 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:var(--fs-small); 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:var(--fs-head); width:16px; text-align:center; flex-shrink:0; }
  .item-card .info { flex:1; min-width:0; }
  .item-card .info strong { display:block; font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .item-card .info span { display:block; font-size:var(--fs-caption); color:var(--ink-soft); line-height:1.5; margin-top:1px; }
  .item-card .note-flag { font-size:var(--fs-caption); }
  .item-card button.delete-btn { border:none; background:transparent; color:var(--danger); font-size:var(--fs-head); cursor:pointer; padding:5px 6px; flex-shrink:0; }
  .move-select { font-size:var(--fs-caption); 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:var(--fs-body); 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:var(--fs-body); 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:var(--fs-small); 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:var(--fs-caption); 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:var(--fs-body); 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:var(--fs-display); 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:var(--fs-head); line-height:1; display:block; }

  .leaflet-popup-content { margin:10px 12px; }
  .popup-body strong { font-family:var(--display); font-size:var(--fs-head); display:block; }
  .popup-measure { font-size:var(--fs-small); color:var(--ink-soft); margin-top:2px; }
  .popup-notes { font-size:var(--fs-small); 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:var(--fs-body); }
  .popup-pasture-date { font-size:var(--fs-caption); 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:var(--fs-body); 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:var(--fs-caption); 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:var(--fs-head); 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:var(--fs-body); 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:var(--fs-body); 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:var(--fs-title); font-weight:700; letter-spacing:-0.35px; margin:0 0 6px; }
  .area-preview { font-size:var(--fs-head); color:var(--ink-soft); margin:0 0 18px; }
  .measure-preview { font-size:var(--fs-small); 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:var(--fs-input); 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:var(--fs-display); 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:var(--fs-caption); 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:var(--fs-caption); 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:var(--fs-caption); }
  .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:var(--fs-caption); 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:var(--fs-display) !important; text-align:center; }
  .popup-locked-note { font-size:var(--fs-small); 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:var(--fs-body); 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:var(--fs-head); 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:var(--fs-caption); 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:var(--fs-small); 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:var(--fs-body); 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:var(--fs-body); 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:var(--fs-display) !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:var(--fs-caption) !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:var(--fs-small); 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:var(--fs-title); font-weight:700; letter-spacing:-0.3px; font-family:var(--display); color:var(--ink); }
  .mob-total { font-size:var(--fs-small); 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:var(--fs-caption); 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:var(--fs-small); font-family:inherit; }
  .mob-stock-line select { flex:1.4; padding:8px; border:1px solid var(--line); border-radius:7px; font-size:var(--fs-body); font-family:inherit; }
  .mob-stock-line input[type=number] { flex:1; padding:8px; border:1px solid var(--line); border-radius:7px; font-size:var(--fs-body); font-family:inherit; }
  .mob-stock-line button { border:none; background:transparent; color:var(--danger); font-size:var(--fs-head); 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:var(--fs-title); 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:var(--fs-title); 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:var(--fs-input); 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:var(--fs-caption); 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:var(--fs-body); font-weight:700; color:var(--ink); line-height:1.3; }
  .dec-sub { font-size:var(--fs-small); color:var(--ink-soft); margin:2px 0 6px; }
  .dec-row { border-top:1px solid var(--line); padding:6px 0 4px; }
  .dec-field { font-size:var(--fs-caption); 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:var(--fs-body); line-height:1.45; color:var(--ink); }
  .dec-who { flex:0 0 86px; color:var(--ink-soft); font-size:var(--fs-small); }
  .dec-actions { display:flex; gap:8px; margin-top:8px; }
  .dec-actions .btn { flex:1; padding:8px 6px; font-size:var(--fs-body); }
  /* 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:var(--fs-body); 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:var(--fs-body); }
  .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:var(--fs-small); 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:var(--fs-title); font-weight:600; letter-spacing:-0.3px; }
  .pf-name { font-size:var(--fs-title); 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:var(--fs-small); color:var(--ink-soft); margin-top:2px; }
  .pf-label { font-size:var(--fs-small); 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:var(--fs-head); 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:var(--fs-body); 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:var(--fs-body); }
  .pf-group .small-link-btn { margin:6px auto 2px; font-size:var(--fs-body); }
  #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:var(--fs-head); }
  }
  @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:var(--fs-input); font-family:inherit; margin-bottom:12px; }
  .acct-intro { font-size:var(--fs-small); 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:var(--fs-head); }
  .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:var(--fs-head); 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:var(--fs-small); color:var(--ink-soft); margin:6px 0 4px; line-height:1.4; }
  .acct-error { color:var(--danger); font-size:var(--fs-body); margin:2px 0 10px; display:none; }
  .vo-banner { font-size:var(--fs-small); 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; }
  /* =====================================================================
     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: #2f7d3a; --accent-fg: #66bb73; --accent-ink: #ffffff; --accent-soft: rgba(102,187,115,0.16); --accent-line: rgba(102,187,115,0.45);
    --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-fg: #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: var(--fs-title); 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-fg); }
  .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: var(--fs-small); }
  .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: #fff; }
  .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-fg); }

  /* --- Layers --- */
  #summary { background: transparent; border-bottom: 1px solid var(--line); padding: 14px 16px 10px; }
  #summary .big { color: var(--accent-fg); font-size: var(--fs-head); }
  #summary .label { color: var(--ink-soft); font-size: var(--fs-small); }
  #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: var(--fs-head); 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: var(--fs-body); color: var(--ink); }
  .item-card .info span { color: var(--ink-soft); font-size: var(--fs-small); }
  .add-layer-row { padding: 8px 2px 2px; gap: 8px; }
  .add-layer-row input { padding: 11px 12px; font-size: var(--fs-input); 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: var(--fs-body); 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: var(--fs-head); }
  .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: var(--fs-small); font-weight: 800; padding: 3px 9px; border-radius: 999px; display: none; }
  .wn-day { font-size: var(--fs-small); 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: var(--fs-head); line-height: 1.35; color: var(--ink); }
  .wn-text b { font-weight: 650; }
  .wn-meta { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 3px; }
  .wn-map { display: inline-flex; align-items: center; margin-top: 8px; font-size: var(--fs-body); 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: var(--fs-body); 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: var(--fs-body); margin: 3px 0 0; }
  .mob-total b { color: var(--accent-fg); 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: var(--fs-body); 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: var(--fs-head); font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-card .mc-where { font-size: var(--fs-small); 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: var(--fs-small); font-weight: 600; background: var(--card-press); color: var(--ink); padding: 4px 9px; border-radius: 999px; }
  .mob-card .mc-warn { font-size: var(--fs-small); 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: var(--fs-display); font-weight: 700; letter-spacing: -0.6px; color: var(--ink); line-height: 1.05; }
  .mob-card .mc-num span { font-size: var(--fs-caption); color: var(--ink-soft); }
  .mp-empty { color: var(--ink-soft); font-size: var(--fs-body); 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: var(--fs-body); 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: var(--fs-small); 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: var(--fs-head); 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: var(--fs-small); 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: var(--fs-body); 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: var(--fs-small); 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: var(--fs-head); color: var(--ink); }
  .tk-cal-head button { border: none; background: var(--card); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; font-size: var(--fs-title); 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: var(--fs-caption); 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: var(--fs-body); 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: var(--fs-small); 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: var(--fs-body); font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
  .tk-templates button:active { background: var(--card-press); }
  .tk-repeat-note { font-size: var(--fs-small); 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: var(--fs-display); font-weight: 800; }
  
  .pf-name { color: var(--ink); font-size: var(--fs-title); 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: var(--fs-body); }
  .pf-sync-dot { width: 9px; height: 9px; border-radius: 50%; background: #66bb73; 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: var(--fs-body); 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-fg); margin-bottom: auto; padding-bottom: 12px; box-sizing: content-box; }
  .pf-tile-title { font-size: var(--fs-head); font-weight: 700; }
  .pf-tile-sub { font-size: var(--fs-small); color: var(--ink-soft); }
  .pf-card { background: var(--card); border-radius: 20px; padding: 14px; }
  .pf-card-title { font-size: var(--fs-head); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
  .pf-card-strong { font-size: var(--fs-head); font-weight: 600; color: var(--ink); }
  .pf-card-text { font-size: var(--fs-small); 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: var(--fs-body); }
  .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: var(--fs-head); font-weight: 700; cursor: pointer; }
  .pf-wide-btn svg { width: 18px; height: 18px; }
  .pf-progress-labels { display: flex; justify-content: space-between; font-size: var(--fs-small); 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: var(--fs-small); 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: var(--fs-head); 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: var(--fs-title); 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: var(--fs-body); border-radius: 12px; }
  .fab-option { padding: 10px 11px; font-size: var(--fs-body); }
  .layer-header { padding: 9px 10px; }
  .layer-header .lname { font-size: var(--fs-body); }
  /* Mob Tracker */
  .mob-panel { padding: 14px 10px 10px; }
  .mob-panel-header { margin-bottom: 10px; }
  .mob-total { font-size: var(--fs-body); margin-top: 1px; }
  .mp-add { padding: 7px 12px; font-size: var(--fs-body); }
  .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: var(--fs-head); }
  .mob-card .mc-where { font-size: var(--fs-small); margin-top: 1px; }
  .mob-card .mc-chips { gap: 4px; margin-top: 5px; }
  .mob-card .mc-chip { font-size: var(--fs-caption); padding: 2px 7px; }
  .mob-card .mc-num b { font-size: var(--fs-title); letter-spacing: -0.4px; }
  .mob-card .mc-num span { font-size: var(--fs-caption); }
  .mp-foot { margin-top: 8px; gap: 6px; }
  .mp-foot .btn { min-height: 38px; font-size: var(--fs-body); }
  /* 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: var(--fs-title); }
  .pf-name { font-size: var(--fs-head); }
  .pf-sub { font-size: var(--fs-small); margin-top: 1px; }
  .pf-sync { padding: 7px 10px; border-radius: 12px; }
  .pf-sync .sync-line { font-size: var(--fs-small); }
  .pf-sync-btn { padding: 5px 10px; font-size: var(--fs-small); }
  .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: var(--fs-body); }
  .pf-tile-sub { font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pf-card { padding: 10px 12px; border-radius: 14px; }
  .pf-card-title { font-size: var(--fs-body); margin-bottom: 6px; }
  .pf-card-strong { font-size: var(--fs-body); }
  .pf-card-text { font-size: var(--fs-small); }
  .pf-link { font-size: var(--fs-body); margin-top: 4px; }
  .pf-wide-btn { min-height: 38px; margin-top: 8px; font-size: var(--fs-body); border-radius: 12px; }
  .seg button { padding: 6px 4px; font-size: var(--fs-small); }
  .pf-signout { min-height: 38px; font-size: var(--fs-body); border-radius: 12px; }
  .pf-check { width: 20px; height: 20px; }
  /* What's New */
  .changes-panel { padding: 14px 12px 8px; }
  .wn-day { font-size: var(--fs-caption); 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: var(--fs-body); }
  .wn-meta { font-size: var(--fs-caption); 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: var(--fs-caption); padding: 4px 9px; white-space: nowrap; }
  /* Paddock and pin pop-ups */
  .popup-body strong { font-size: var(--fs-body); }
  .popup-measure { font-size: var(--fs-caption); }
  .popup-actions { font-size: var(--fs-small); 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: var(--fs-caption); 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: var(--fs-caption); 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: var(--fs-small); 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: var(--fs-input); 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: var(--fs-body); font-weight: 600; cursor: pointer; }
  .reshape-btn svg { width: 16px; height: 16px; color: var(--accent-fg); }
  .active-tag button.tag-undo { display: flex; align-items: center; justify-content: center; }
  .active-tag button.tag-undo svg { width: 15px; height: 15px; }

  /* ---------- 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 {
    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)); }

  /* ---------- Station hub: rain, water, records ---------- */
  .hub-tabs { margin-top: 2px; }
  .hub-tabs button { padding: 9px 0; font-size: var(--fs-body); }
  .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: var(--fs-head); font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .st-sub { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
  .st-note { font-size: var(--fs-small); 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: var(--fs-caption); 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: var(--fs-body); 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: var(--fs-title); font-weight: 750; color: var(--ink); letter-spacing: -0.4px; }
  .rain-totals span { font-size: var(--fs-caption); color: var(--ink-soft); }
  .rain-chart { width: 100%; height: auto; display: block; margin-top: 4px; }
  .rain-chart .rc-now { fill: var(--accent-fg); }
  .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: var(--fs-caption); }
  .rc-key { font-size: var(--fs-caption); 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: var(--fs-body); font-weight: 600; }
  .rec-row .rr-main small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
  .rec-row .rr-val { font-size: var(--fs-body); 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-tile { background: var(--card); border: none; border-radius: 14px; padding: 12px; min-height: 52px; font: inherit; font-size: var(--fs-body); font-weight: 650; color: var(--ink); text-align: left; cursor: pointer; }
  .rec-tile:active { background: var(--card-press); }
  .rec-tile.small { font-size: var(--fs-body); font-weight: 600; }
  .rec-hint { font-size: var(--fs-small); 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; }
  .run-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
  .run-name { font-size: var(--fs-head); font-weight: 650; color: var(--ink); }
  .run-name span { display: block; font-size: var(--fs-small); 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: var(--fs-body); 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: var(--fs-small); color: var(--ink-soft); line-height: 1.5; margin: -6px 0 12px; }
  .mob-extra b { color: var(--ink); }
  .popup-station { font-size: var(--fs-small); margin-top: 6px; line-height: 1.45; }
  .popup-station .st-status { font-size: var(--fs-caption); 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: var(--fs-body); 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: var(--fs-body); }
  #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)); }

  /* ---------- 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 > * { 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 > * { zoom: 1.25; }
  html[data-text="xl"] .label-name { font-size: var(--fs-body); }

  /* ---------- Records, water reminder, profile cards ---------- */
  .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; }
  .mp-foot.rec-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .mp-foot.rec-btns > .btn:last-child:nth-child(odd) { grid-column: span 2; }
  #recordsPane .tk-group:first-child { padding-top: 2px; }
  .hub-tabs button { min-width: 0; padding-left: 2px; padding-right: 2px; font-size: var(--fs-small); }
  .hub-tabs { gap: 2px; }
  .remind-row { display: flex; flex-direction: row; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 5px 8px 5px 12px; margin-top: 6px; }
  .remind-row label { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: baseline; gap: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; }
  .remind-row b { font-size: var(--fs-body); color: var(--ink); }
  .remind-row span { font-size: var(--fs-small); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
  .remind-row select { width: auto; flex: 0 0 auto; max-width: 40%; margin: 0; min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: var(--fs-body); }
  .remind-days { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--ink); white-space: nowrap; flex: 0 0 auto; }
  .remind-days input { width: 64px; margin: 0; min-height: 34px; padding: 4px 8px; text-align: center; }
  #recModal .vis-chk.solo { margin: 2px 0 16px; }

  /* ---------- Map views: choice of map pictures ---------- */
  .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; margin-bottom: 12px; }
  .base-options .base-toggle { margin-bottom: 4px; }
  .base-options .base-option { min-height: 40px; }
  .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: var(--fs-body); font-weight: 650; }
  .base-choice .bc-off { font-size: var(--fs-caption); font-weight: 700; color: var(--accent-fg); margin-left: 4px; }
  html[data-theme="light"] .base-choice .bc-off { color: var(--green-dark, #2f7d3a); }
  .base-choice .bc-note { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.35; }
  .colour-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 2px 4px; font-size: var(--fs-small); 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; }

  /* ---------- Drawn icons ---------- */
  .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); }
  .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: var(--fs-caption); color: var(--ink-soft); }
  .hist-text { white-space: pre-line; font-size: var(--fs-body); color: var(--ink); line-height: 1.4; }
  .label-stock .tag-ic { width: 0.95em; height: 0.95em; vertical-align: -0.12em; color: #f2c94c; }

  /* 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; }
  }

  /* ---------- Station runs: switches in Profile, lick levels ---------- */
  .lick-card { flex-wrap: wrap; }
  .lick-card .run-btns { flex-basis: 100%; }
  .pp-levels { margin-top: 8px; }
  .pp-levels .run-btn { min-height: 38px; font-size: var(--fs-small); }

  /* ---------- Online rain gauge ---------- */
  .weather-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .weather-btns .btn { margin: 0; min-height: 44px; background: transparent; border: 1px solid var(--field-line); }
  .weather-btns .btn:only-child { grid-column: span 2; }

  /* ---------- Records: reports, recently deleted, point windows ---------- */
  #recordsPane > .rec-btns + .rec-btns { margin-top: 6px; }
  #soldWrap > .btn:only-child, #soldWrap > .btn:first-child:nth-last-child(2) { grid-column: span 2; }
  .report-row .rr-view, .trash-summary .rr-view { color: var(--accent-fg); font-weight: 700; }
  .trash-row { cursor: default; }
  .trash-row .mini-btn { flex-shrink: 0; }
  .mini-btn { border:1px solid var(--field-line, var(--line)); background:transparent; color:var(--ink); font:inherit; font-size:var(--fs-body); font-weight:600; border-radius:999px; padding:0 14px; min-height:40px; cursor:pointer; flex-shrink:0; }
  .pt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  .pt-actions .btn { margin: 0; min-height: 44px; background: transparent; border: 1px solid var(--field-line); }
  .pt-actions .btn.danger { color: var(--danger); }
  .pt-actions > .btn:last-child:nth-child(odd) { grid-column: span 2; }
  #ptRemind { margin-bottom: 4px; }
  /* The report on screen: a plain white page, like the PDF it makes. */
  .report-view { position: fixed; inset: 0; z-index: 26000; background: #fff; color: #111; display: flex; flex-direction: column; }
  .report-view.hidden { display: none; }
  .report-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; border-bottom: 1px solid #ddd; background: #f4f5f2; }
  .report-bar .btn { margin: 0; min-height: 44px; padding: 0 14px; background: #fff; color: #111; border: 1px solid #ccc; }
  .report-bar .btn.primary { background: #2f7d3a; color: #fff; border-color: #2f7d3a; }
  .report-bar-btns { display: flex; gap: 6px; }
  .report-page { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); font: 13px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
  .report-page h1 { font-size: var(--fs-title); margin: 0 0 4px; color: #111; }
  .report-page p { margin: 0 0 14px; color: #555; }
  .report-table { border-collapse: collapse; width: 100%; min-width: 560px; }
  .report-table th, .report-table td { border: 1px solid #ccc; padding: 6px 7px; text-align: left; vertical-align: top; color: #111; }
  .report-table th { background: #eee; font-weight: 700; }
  .report-page .tk-empty { color: #555; }
  .report-sig { display: flex; gap: 40px; margin-top: 30px; }
  .report-sig div { flex: 1; border-top: 1px solid #333; padding-top: 4px; }
  @media print {
    body.printing-report > *:not(#reportView) { display: none !important; }
    body.printing-report { background: #fff !important; }
    body.printing-report #reportView { position: static; display: block; }
    body.printing-report .report-bar { display: none; }
    body.printing-report .report-page { overflow: visible; padding: 0; }
    body.printing-report .report-table { min-width: 0; font-size: var(--fs-caption); }
    @page { margin: 12mm; }
  }


  /* ---------- Compact lists: reports, trash, troughs and feeders ---------- */
  .report-row, .trash-summary { min-height: 36px; padding: 6px 12px; margin-bottom: 3px; border-radius: 10px; }
  .report-row .rr-main, .trash-summary .rr-main { font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .report-row .rr-val, .trash-summary .rr-val { font-size: var(--fs-small); }
  .trash-summary .rr-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; font-size: var(--fs-caption); }
  .trash-summary { margin-top: 8px; }
  #reportList { gap: 0; }
  .trash-row { min-height: 40px; padding: 6px 8px 6px 12px; margin-bottom: 0; border-radius: 10px; }
  .trash-row .rr-main { font-size: var(--fs-body); }
  .trash-row .rr-main small { font-size: var(--fs-caption); margin-top: 0; }
  .trash-row .mini-btn { min-height: 32px; padding: 0 12px; font-size: var(--fs-small); }
  .trash-empty { display: block; width: 100%; margin-top: 10px; min-height: 38px; border-radius: 12px; border: 1px solid var(--field-line, var(--line)); background: transparent; color: var(--danger); font: inherit; font-size: var(--fs-body); font-weight: 650; cursor: pointer; }
  #waterArea .st-card, #lickArea .st-card { padding: 7px 8px 7px 12px; margin-bottom: 4px; border-radius: 12px; gap: 6px; }
  #waterArea .st-name, #lickArea .st-name { gap: 6px; flex-wrap: nowrap; }
  #waterArea .st-name .st-status, #lickArea .st-name .st-status { font-size: var(--fs-caption); padding: 2px 6px; flex-shrink: 0; }
  #waterArea .st-sub, #lickArea .st-sub { font-size: var(--fs-caption); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #waterArea .st-note { font-size: var(--fs-caption); margin-top: 2px; }
  #waterArea .st-quick { min-height: 34px; min-width: 40px; padding: 0 10px; border-radius: 10px; font-size: var(--fs-body); }
  #waterArea .st-quick.bad { min-width: 36px; }
  #lickArea .lick-card { flex-wrap: wrap; row-gap: 5px; }
  #lickArea .lick-card .run-btns { gap: 4px; }
  #lickArea .lick-card .run-btn { min-height: 32px; font-size: var(--fs-small); border-radius: 9px; }
  #waterArea .tk-more, #lickArea .tk-more { padding: 6px; }

  /* ---------- Account: property details and station runs ---------- */
  #propertyCard, #runsCard { position: relative; padding: 10px 12px; }
  #propertyCard .pf-card-title, #runsCard .pf-card-title { margin-bottom: 4px; }
  #runsCard .pf-card-title small { font-size: var(--fs-caption); font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
  #propertyCard .pf-card-text { font-size: var(--fs-small); line-height: 1.4; padding-right: 64px; }
  #propertyCard .pf-ratings { font-size: inherit; }
  #propertyCard .pf-edit { position: absolute; top: 8px; right: 10px; width: auto; min-height: 30px; margin: 0; padding: 0 16px; border-radius: 999px; font-size: var(--fs-body); }
  #runsCard .run-toggle { padding: 5px 0; border-top: 1px solid var(--line); }
  #runsCard .run-toggle:first-of-type { border-top: none; }
  #runsCard .run-toggle .vlabel { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--fs-body); }
  #runsCard .run-layer { font-size: var(--fs-caption); font-weight: 400; color: var(--ink-soft); }

  /* =====================================================================
     One type system. Same roles look the same in every window and tab.
       Title        18  bold      window titles
       Heading      14  bold      cards, items, section headings
       Subheading   12  bold      group labels, field labels (Title Case)
       Body         13  regular   text, buttons, list rows
       Secondary    12  regular   notes, dates, hints
       Caption      11  bold      badges and tags
       Display      20  bold      big numbers
     ===================================================================== */
  header h1, .modal-card h2, .mob-panel-header h3, .views-panel h3, .changes-panel h3, .pf-name, .report-page h1 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; }
  .pf-card-title, .mob-card .mc-name, .tk-title, .st-name, .run-name, .layer-header .lname, .pf-tile-title, .popup-body strong, #summary .big { font-size: var(--fs-head); font-weight: 700; line-height: 1.25; }
  .tk-group, .wn-day, .pf-label, .burn-date-label, .dec-head, .dec-field, .field-label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
  .dec-head { color: var(--danger); }
  .st-status { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0; text-transform: none; }
  .wn-text, .fab-option, .vis-chk, .pf-row, .acct-row .vlabel, .btn, .pf-wide-btn, .pf-signout, .mob-stock-line button, .pf-card-strong, .rec-row .rr-main, .rec-row .rr-val { font-size: var(--fs-body); }
  .rec-row .rr-main, .pf-card-strong { font-weight: 600; }
  .rec-row .rr-main small, .st-sub, .st-note, .hist-when, .pf-card-text, .tk-empty, .mob-total, .remind-row span, .run-layer { font-size: var(--fs-small); font-weight: 400; }
  .rain-totals b, .mob-card .mc-num b { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.4px; }
  #hubTabs button, .hub-tabs button { font-size: var(--fs-small); font-weight: 700; }
  /* Windows never shout over the title: the same item name is the same size everywhere. */

  /* ---------- Compact: Layers, Mob Tracker and Records ---------- */
  .layer-block { margin-bottom: 5px; border-radius: 12px; }
  .layer-header { padding: 4px 8px 4px 10px; border-radius: 12px; gap: 2px; }
  .layer-header button.lyr-btn { width: 38px; height: 38px; padding: 8px; }
  .layer-header button.lyr-btn svg { width: 20px; height: 20px; }
  .layer-header .lcount { flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft); background: var(--card-press); border-radius: 999px; padding: 1px 8px; margin-right: 4px; }
  #summary { padding: 10px 14px 8px; }
  .layer-empty { padding: 4px 8px 8px; }
  .item-card { padding: 7px 10px; margin-bottom: 4px; }
  .mob-panel { padding: 12px 10px 8px; }
  .mob-panel-header { margin-bottom: 6px; }
  .mob-card { padding: 8px 12px; border-radius: 12px; gap: 8px; }
  .mob-card .mc-chips { margin-top: 3px; }
  .mob-card .mc-chip { padding: 1px 7px; }
  .mob-card .mc-where { margin-top: 0; }
  #mobListArea { gap: 4px; }
  .mp-foot { margin-top: 6px; gap: 5px; }
  .mp-foot .btn { min-height: 34px; padding: 6px 12px; border-radius: 10px; }
  #recordsPane > .rec-btns + .rec-btns { margin-top: 5px; }
  #recordsPane .tk-group { padding: 8px 6px 4px; }
  .hub-tabs button { padding-top: 6px; padding-bottom: 6px; }

/* No floating "click map to place marker" hints while drawing - they show up
   in random places on touch screens. The top banner says what's happening. */
.leaflet-draw-tooltip, .leaflet-draw-tooltip-single, .leaflet-draw-tooltip-subtext { display: none !important; }

/* Lick cards: a small Show on Map button beside the name */
.st-map { flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--field-line, var(--line)); background: transparent; color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.st-map:active { background: var(--card-press); }

/* Record windows: Cancel and the main button stay pinned at the bottom, the
   same width, even when the window scrolls. */
#recModal .modal-actions { position: sticky; bottom: -20px; margin: 10px -20px -20px; padding: 10px 20px 20px; background: var(--panel); border-radius: 0 0 20px 20px; display: flex; gap: 8px; justify-content: stretch; }
#recModal .modal-actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
#recModal .modal-actions #recDeleteBtn { flex: 0 0 auto; margin-right: 0 !important; }

/* Paddock Green tidy: warnings are small tinted pills like the other chips */
.mob-card .mc-warn { display: inline-block; width: fit-content; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 700; background: color-mix(in srgb, var(--danger) 18%, transparent); }

/* Full / Half / Low / Empty: one rounded group, a coloured dot for each level,
   the chosen one filled in its colour. */
:root { --lv-half: #7fc48a; }
.run-btns { display: flex; gap: 2px; padding: 3px; background: var(--card-press); border-radius: 12px; }
.run-btn { flex: 1 1 0; min-width: 0; min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: var(--fs-small); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; }
.run-btn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fg); flex: none; }
.run-btn.lv-half::before { background: var(--lv-half); }
.run-btn.lv-low::before { background: var(--warn); }
.run-btn.lv-empty::before { background: var(--danger); }
.run-btn.on, .run-btn.ok.on, .run-btn.warn.on, .run-btn.bad.on { box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.run-btn.lv-full.on { background: var(--accent); color: var(--accent-ink); }
.run-btn.lv-half.on { background: var(--lv-half); color: #12301a; }
.run-btn.lv-low.on { background: var(--warn); color: #1d1d1d; }
.run-btn.lv-empty.on { background: var(--danger); color: #fff; }
.run-btn.on::before { background: currentColor; }
#lickArea .lick-card .run-btns { gap: 2px; }
#lickArea .lick-card .run-btn, .pp-levels .run-btn { min-height: 34px; font-size: var(--fs-small); border-radius: 9px; }

/* ✓ OK is a toggle: outlined until the trough is ticked OK today, then filled.
   Same on the Water tab, the map popup and the trough's own window. */
.st-quick.ok, .pp-act.ok, .pt-today .btn.ok { background: transparent; border: 1px solid color-mix(in srgb, var(--accent-fg) 55%, transparent); color: var(--accent-fg); }
.st-quick.ok.on, .pp-act.ok.on, .pt-today .btn.ok.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* A trough's or feeder's window: today's check at the top */
.pt-today { margin-bottom: 12px; }
.pt-today .field-label { display: block; margin-bottom: 6px; }
.pt-today-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pt-today-row .btn { margin: 0; min-height: 40px; font-size: var(--fs-body); font-weight: 700; }
.pt-today-row .btn.danger { background: transparent; border: 1px solid var(--field-line); color: var(--danger); }
.pt-today .run-btn { min-height: 38px; }
#recIntro .st-status { font-size: var(--fs-caption); padding: 2px 7px; vertical-align: 1px; }
/* Check history in a trough's or feeder's window: one line per check */
.rec-row.hist { min-height: 38px; padding: 7px 10px 7px 12px; cursor: default; }
.rec-row.hist .rr-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row.hist .rr-main small { display: inline; margin: 0 0 0 4px; }
.rec-row.hist .st-status { flex-shrink: 0; font-size: var(--fs-caption); }
#recModal .tk-group { padding: 10px 0 6px; }

/* =====================================================================
   One look across the app (Paddock Green, tidied)
   ===================================================================== */

/* Dark-green text that was unreadable on the dark theme */
html[data-theme="dark"] { --green-dark: #66bb73; }
html[data-theme="light"] { --green-dark: #2f7d3a; }

/* Every on/off switch row (tabs, Appearance, Text Size, Map Views, List /
   Calendar): the same track, the chosen one raised in the panel colour. */
html[data-theme="dark"] { --seg-track: rgba(255,255,255,0.065); --seg-on: rgba(255,255,255,0.14); --seg-shadow: none; }
html[data-theme="light"] { --seg-track: #eef1eb; --seg-on: #ffffff; --seg-shadow: 0 1px 3px rgba(20,28,22,0.14); }
.seg, .tk-switch { background: var(--seg-track); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button, .tk-switch button { border-radius: 9px; color: var(--ink-soft); font-size: var(--fs-small); font-weight: 700; min-height: 32px; padding: 6px 4px; }
.seg button.on, .tk-switch button.on { background: var(--seg-on); color: var(--ink); box-shadow: var(--seg-shadow); }

/* Windows: one width, and the buttons along the bottom the same size, with
   the main (green) one on the right and Delete kept small on the left. */
.modal-overlay:not(#loginOverlay):not(#confirmModal) .modal-card { width: min(420px, calc(100vw - 24px)) !important; }
#confirmModal .modal-card { width: min(340px, calc(100vw - 32px)) !important; }
.modal-overlay:not(#loginOverlay) .modal-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: stretch; }
.modal-overlay:not(#loginOverlay) .modal-actions .spacer { display: none; }
.modal-overlay:not(#loginOverlay) .modal-actions .btn { flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0 !important; white-space: nowrap; border-radius: 12px; }
.modal-overlay:not(#loginOverlay) .modal-actions .btn-danger-text,
.modal-overlay:not(#loginOverlay) .modal-actions [id$="DeleteBtn"] { flex: 0 0 auto; padding: 0 14px; background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.modal-overlay:not(#loginOverlay) .modal-actions .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-text):not([id$="DeleteBtn"]) { background: var(--card-press); border: 1px solid transparent; color: var(--ink); }
#confirmModal .modal-actions #confirmOkBtn { flex: 1 1 0; background: var(--danger); border-color: var(--danger); color: #fff; padding: 0; }
/* Long windows keep their buttons in reach at the bottom */
.modal-overlay:not(#loginOverlay) .modal-card > .modal-actions:last-child { position: sticky; bottom: -20px; margin: 16px -20px -20px; padding: 10px 20px 20px; background: var(--panel); border-radius: 0 0 20px 20px; z-index: 2; }

/* Lists of records in a window: the add button sits clear of the list */
#recFields > .pf-wide-btn:first-child, #treatmentsModal #addTreatmentBtn { margin: 4px 0 10px; }
#treatmentsList .item-card { background: var(--card); border-radius: 12px; padding: 9px 12px; margin-bottom: 4px; }
#treatmentsList .item-card .info span { font-size: var(--fs-small); }

/* Buttons at the foot of a gauge's, trough's or feeder's window match the
   mob window's buttons */
.pt-actions .btn { background: var(--card-press); border: 1px solid transparent; color: var(--ink); border-radius: 12px; min-height: 42px; }
.pt-actions .btn.danger { background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }

/* Rain: totals, gauge cards and readings as compact as Water and Lick */
.rain-totals div { padding: 8px 10px; border-radius: 12px; }
.rain-totals b { font-size: var(--fs-display); line-height: 1.15; }
.rain-totals span { display: block; line-height: 1.3; margin-top: 1px; }
#rainArea .st-card { padding: 8px 8px 8px 12px; margin-bottom: 4px; border-radius: 12px; gap: 8px; }
#rainArea .st-sub { font-size: var(--fs-caption); margin-top: 1px; }
#rainArea .st-chips, .st-chips { gap: 4px; margin-top: 5px; }
.st-chips .mc-chip { font-size: var(--fs-caption); font-weight: 700; background: var(--card-press); color: var(--ink); padding: 2px 8px; border-radius: 999px; }
#rainArea .st-quick { min-height: 34px; min-width: 52px; padding: 0 10px; border-radius: 10px; color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent-fg) 55%, transparent); }
.rec-row.hist.tap { cursor: pointer; }
.rec-row.hist .rr-val { font-size: var(--fs-body); }

/* Full / Half / Low / Empty and OK / Low / Fault / Dry: the dot and the fill
   follow what the level means - green good, amber low, red empty or broken. */
.run-btn.ok::before { background: var(--accent-fg); }
.run-btn.warn::before { background: var(--warn); }
.run-btn.bad::before { background: var(--danger); }
.run-btn.lv-half::before { background: var(--lv-half); }
.run-btn.ok.on { background: var(--accent); color: var(--accent-ink); }
.run-btn.warn.on { background: var(--warn); color: #1d1d1d; }
.run-btn.bad.on { background: var(--danger); color: #fff; }
.run-btn.lv-half.on { background: var(--lv-half); color: #12301a; }
.run-btn.on::before { background: currentColor; }
html[data-theme="light"] { --lv-half: #8fcf99; }
/* In a map popup there's less room: no dots, tighter text */
.pp-levels { margin-top: 8px; min-width: 210px; }
.pp-levels .run-btn { font-size: var(--fs-caption); padding: 0 2px; gap: 0; min-height: 34px; }
.pp-levels .run-btn::before { display: none; }

/* Layers gets a title like every other tab */
#summary { display: block; padding: 14px 16px 8px; border-bottom: none; }
#summary .sb-title { margin: 0; font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }
#summary .sb-line { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
#summary .big { font-size: var(--fs-small); color: var(--accent-fg); }
#summary .sb-dot { color: var(--ink-soft); font-size: var(--fs-small); }

/* "Change" next to a layer name is a normal link, not a red warning */
#editLayerChangeBtn { color: var(--accent-fg); font-weight: 700; font-size: var(--fs-small); }

/* Fields in a window are all one height; stock lines a touch shorter. */
.modal-card select, .modal-card input[type=text], .modal-card input[type=number], .modal-card input[type=date], .modal-card input[type=password], .modal-card .tx-field:not(textarea) { min-height: 44px; font-size: var(--fs-input); }
.modal-card .mob-stock-line select, .modal-card .mob-stock-line input[type=number], .modal-card .mob-stock-date, .modal-card .mob-stock-line input[type=date] { min-height: 40px; font-size: var(--fs-input); padding-top: 6px; padding-bottom: 6px; }
#splitGroups select, #splitGroups input { border-radius: 12px; }
#splitGroups .split-group { background: var(--card); border-radius: 14px; padding: 10px; margin-bottom: 8px; }
#splitGroups select, #splitGroups input { font-size: var(--fs-input) !important; border-radius: 12px !important; min-height: 44px; border-color: var(--field-line) !important; }
#splitGroups .mob-stock-line select, #splitGroups .mob-stock-line input { min-height: 40px; }
.base-toggle { background: var(--seg-track); border-radius: 12px; padding: 3px; gap: 2px; }
.base-option { border-radius: 9px; font-weight: 700; color: var(--ink-soft); }
.base-option.active { background: var(--seg-on); color: var(--ink); box-shadow: var(--seg-shadow); }
#splitGroups .mob-stock-line { display: flex; gap: 6px; align-items: center; }
#splitGroups .mob-stock-line > select { flex: 1.2 1 0; min-width: 0; }
#splitGroups .mob-stock-line > input { flex: 1 1 0; min-width: 0; width: auto !important; }
#splitGroups .mob-stock-line > button { flex: 0 0 auto; }
/* Small phones: the reminder row drops "All troughs" so it fits */
@media (max-width: 380px) { .remind-row label span { display: none; } .remind-days input { width: 56px; } }

/* Full / Half / Low / Empty (and OK / Low / Fault / Dry on a water run) look
   like the rest of the app's quick buttons: separate outlined buttons with
   the level's colour, filled in that colour once chosen. */
.run-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; background: transparent; border-radius: 0; }
.run-btn { min-height: 34px; border-radius: 10px; background: transparent; border: 1px solid color-mix(in srgb, var(--lv, var(--accent-fg)) 55%, transparent); color: var(--lv, var(--accent-fg)); font-size: var(--fs-body); font-weight: 700; padding: 0 4px; gap: 0; box-shadow: none; }
.run-btn::before { display: none; }
.run-btn.ok { --lv: var(--accent-fg); --lv-fill: var(--accent); --lv-ink: var(--accent-ink); }
.run-btn.lv-half { --lv: var(--lv-half); --lv-fill: var(--lv-half); --lv-ink: #12301a; }
.run-btn.warn { --lv: var(--warn); --lv-fill: var(--warn); --lv-ink: #1d1d1d; }
.run-btn.bad { --lv: var(--danger); --lv-fill: var(--danger); --lv-ink: #fff; }
.run-btn.on, .run-btn.ok.on, .run-btn.warn.on, .run-btn.bad.on, .run-btn.lv-half.on { background: var(--lv-fill); border-color: var(--lv-fill); color: var(--lv-ink); box-shadow: none; }
#lickArea .lick-card .run-btns { gap: 6px; }
#lickArea .lick-card .run-btn, .pt-today .run-btn { min-height: 34px; font-size: var(--fs-body); border-radius: 10px; }
.pp-levels { min-width: 220px; gap: 4px; }
.pp-levels .run-btn { min-height: 32px; font-size: var(--fs-small); border-radius: 9px; padding: 0 2px; }
html[data-theme="light"] .run-btn.lv-half { --lv: #3f8f4b; }
.gz-instant { transition: none !important; }
/* Snappier: tabs and menus open in 0.12s */
.mob-panel, .profile-panel, .changes-panel, .views-panel, .fab-menu { transition-duration: 0.12s; }
.pf-report { display: block; margin: 8px auto 0; background: none; border: none; color: var(--ink-soft); font: inherit; font-size: var(--fs-small); font-weight: 600; padding: 8px 12px; cursor: pointer; min-height: 36px; }
.mob-card .mc-warn.esi { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

/* Small controls keep their look but get a thumb-sized area to tap */
.tk-check, .expand-btn, .pf-sync-btn, #redrawBoundaryBtn, .mob-stock-line button, .lyr-btn { position: relative; }
.tk-check::after, .expand-btn::after, .pf-sync-btn::after, #redrawBoundaryBtn::after, .mob-stock-line button::after { content: ''; position: absolute; inset: -9px; }
/* Pop-up links (Move · Edit · Grazing History) and the gate button: same look, bigger tap area */
.popup-actions a, .popup-actions .gate-toggle { display: inline-block; padding: 10px 2px; margin: -10px 0; }
.popup-actions { line-height: 1.2; }
.swatch, #editLayerChangeBtn, .small-link-btn { position: relative; }
.swatch::after, #editLayerChangeBtn::after, .small-link-btn::after { content: ''; position: absolute; inset: -6px; }
#waterArea .tk-more, #lickArea .tk-more, #rainArea .tk-more { min-height: 40px; }
label.switch { position: relative; }
label.switch::after { content: ''; position: absolute; inset: -10px -8px; }
.view-row:has(label.switch), .acct-row:has(label.switch) { cursor: pointer; }
.switch .track { z-index: 1; }

/* Jobs: place on the map and a photo */
.tk-geo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.tk-geo .btn, .tk-photo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; margin: 0; background: var(--card-press); border: 1px solid transparent; color: var(--ink); font-weight: 700; border-radius: 12px; }
.tk-geo .btn svg { width: 16px; height: 16px; color: var(--accent-fg); }
.tk-photo-btn { width: 100%; margin-bottom: 12px; }
.tk-geo-set { display: flex; align-items: center; gap: 4px; background: var(--card); border-radius: 12px; padding: 4px 6px 4px 12px; margin-bottom: 12px; min-height: 44px; }
.tk-geo-set > span { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.tk-geo-link { background: none; border: none; color: var(--accent-fg); font: inherit; font-size: var(--fs-small); font-weight: 700; padding: 8px 8px; cursor: pointer; min-height: 36px; }
.tk-geo-link.danger { color: var(--danger); }
.tk-photo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
.tk-photo img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; background: var(--card); cursor: zoom-in; }
.tk-photo .tk-geo-link { padding-left: 0; }
.tk-extras { margin-top: 3px; }
.tk-has { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft); }
.tk-has svg { width: 12px; height: 12px; }
.tk-card .tk-map { align-self: center; margin-left: 4px; }
.job-pin { background: none; border: none; }
.job-pin-in { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: #f2a33a; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; }
.job-pin-in svg { width: 16px; height: 16px; color: #1d1d1d; transform: rotate(45deg); }

/* Inventory */
#invArea .st-card { padding: 7px 8px 7px 12px; margin-bottom: 4px; border-radius: 12px; gap: 6px; }
#invArea .st-name { gap: 6px; flex-wrap: nowrap; }
#invArea .st-name .st-status { font-size: var(--fs-caption); padding: 2px 6px; flex-shrink: 0; }
#invArea .st-sub { font-size: var(--fs-caption); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#invArea .inv-card.low { box-shadow: inset 3px 0 0 var(--warn); }
#invArea .inv-card.out { box-shadow: inset 3px 0 0 var(--danger); }
.inv-qty { min-width: 48px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.inv-qty b { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.4px; color: var(--ink); }
.inv-qty span { font-size: var(--fs-caption); color: var(--ink-soft); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#invArea .inv-step { min-width: 36px; min-height: 36px; padding: 0; border-radius: 10px; font-size: 18px; font-weight: 700; color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent-fg) 55%, transparent); }
#invArea .tk-more { min-height: 40px; }
/* Six tabs in the Mob Tracker: a touch smaller so they all fit */
#hubTabs.many button { font-size: var(--fs-caption); padding-left: 0; padding-right: 0; letter-spacing: -0.1px; }
.layer-header .dot.job-dot { background: #f2a33a; }
.card-swatch.job-swatch { background: #f2a33a; border-radius: 50%; }
.lyr-spacer { visibility: hidden; pointer-events: none; display: inline-block; flex-shrink: 0; }

/* Own icons: a small picture instead of an emoji */
.pin-img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; display: block; }
.pin-badge-pointer .pin-img { width: 20px; height: 20px; border-radius: 50%; }
.pin-emoji-plain .pin-img { width: 28px; height: 28px; box-shadow: 0 1px 4px rgba(0,0,0,0.5); border: 2px solid #fff; }
.pp-icon .pin-img, .card-icon .pin-img, .run-icon .pin-img { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; box-shadow: none; border: none; }
.icon-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.icon-row .icon-input { flex: 1; margin: 0 !important; }
.icon-row .btn { margin: 0; min-height: 44px; flex: 0 0 auto; background: var(--card-press); border: 1px solid transparent; color: var(--ink); font-weight: 700; border-radius: 12px; }
.icon-img-preview { flex: 1; display: flex; align-items: center; min-height: 44px; }
.icon-img-preview img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.icon-pick-now { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: var(--fs-small); color: var(--ink-soft); }
.icon-big { font-size: 30px; line-height: 1; display: inline-flex; }
.icon-big .pin-img { width: 36px; height: 36px; border-radius: 8px; }

/* ---------- Calendar (Jobs panel, Calendar tab) ---------- */
.tasks-panel.cal-mode { width: min(520px, calc(100vw - 16px)); padding-left: 8px; padding-right: 8px;
  /* Never taller than the screen that's actually showing, under the top bar. */
  max-height: calc(100vh - var(--tabbar-total) - 10px - var(--top-inset) - 52px);
  max-height: calc(100dvh - var(--tabbar-total) - 10px - var(--top-inset) - 52px); }
.tk-cal-head { gap: 8px; }
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.tk-cal-head .cal-today-btn { width: auto; border-radius: 999px; padding: 0 12px; font-size: var(--fs-small); font-weight: 700; height: 34px; }
.cal-month { border-radius: 14px; overflow: hidden; background: var(--card); touch-action: pan-y; }
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 6px 0 4px; }
.cal-dow span { text-align: center; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 76px; row-gap: 2px; border-top: 1px solid var(--line); position: relative; }
.cal-cell { grid-row: 1 / -1; border: none; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; padding: 3px 0 0; cursor: pointer; display: flex; justify-content: center; align-items: flex-start; min-width: 0; z-index: 0; }
.cal-cell:first-of-type { border-left: none; }
.cal-cell.other { color: var(--ink-soft); }
.cal-cell.other .cal-num { opacity: 0.5; }
.cal-cell.sel { background: var(--accent-soft); }
.cal-num { font-size: var(--fs-small); font-weight: 650; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center; }
.cal-cell.today .cal-num { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.cal-bar { z-index: 1; pointer-events: none; color: #fff; font-size: 9.5px; font-weight: 650; line-height: 14px; height: 14px; padding: 0 4px; margin: 0 1px; border-radius: 4px; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-bar.cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-job { z-index: 1; pointer-events: none; font-size: 10px; line-height: 15px; height: 15px; padding: 0 3px 0 4px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-job::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-fg); margin-right: 3px; vertical-align: 1px; }
.cal-job.done { color: var(--ink-soft); text-decoration: line-through; }
.cal-job.done::before { background: var(--ink-soft); }
.cal-job.late { color: var(--danger); }
.cal-job.late::before { background: var(--danger); }
.cal-more { z-index: 1; pointer-events: none; font-size: 10px; line-height: 15px; font-weight: 700; color: var(--ink-soft); padding-left: 5px; }
#calAgenda { padding-top: 2px; }
.ev-card { width: 100%; display: flex; align-items: stretch; gap: 10px; text-align: left; background: var(--card); border: none; border-radius: 16px; padding: 10px 12px 10px 10px; margin-bottom: 6px; color: var(--ink); font: inherit; cursor: pointer; }
.ev-stripe { width: 5px; border-radius: 3px; background: var(--ev); flex-shrink: 0; }
.ev-info { flex: 1; min-width: 0; display: block; }
.ev-title { display: block; font-size: var(--fs-head); font-weight: 700; overflow-wrap: anywhere; }
.ev-meta { display: block; font-size: var(--fs-small); color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.cal-add-row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.cal-add-row .btn { margin: 0; min-height: 42px; background: var(--card-press); border: 1px solid transparent; color: var(--ink); font-weight: 700; border-radius: 12px; }
.cal-plan { background: var(--card); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.cal-plan-title { font-size: var(--fs-head); font-weight: 700; color: var(--ink); }
.cal-plan-text { font-size: var(--fs-small); color: var(--ink-soft); margin: 3px 0 8px; line-height: 1.4; }
.cal-plan ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.cal-plan li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink); }
.cal-plan li i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cal-plan li b { flex: 1; min-width: 0; font-weight: 650; }
.cal-plan li span { color: var(--ink-soft); white-space: nowrap; }
.cal-plan-acts { display: flex; gap: 6px; justify-content: flex-end; }
.cal-plan-acts .btn { margin: 0; min-height: 40px; }
.tk-ev { display: inline-flex; align-items: center; gap: 4px; }
.tk-ev i, .tk-ev-link i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.tk-ev-link { display: flex; align-items: center; gap: 6px; background: var(--card); border-radius: 12px; padding: 6px 6px 6px 12px; margin: -4px 0 12px; }
.tk-ev-link > span { flex: 1; min-width: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.4; }
.tk-ev-link > span i { margin-right: 6px; vertical-align: 0; }
.ev-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.ev-swatch { aspect-ratio: 1; min-height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08); }
.ev-swatch.on { border-color: var(--ink); }
.ev-len { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 6px; }
.ev-len .tx-field { padding-left: 8px; padding-right: 8px; }
.ev-jobs-help { margin-top: 0; }
.evj-row { background: var(--card); border-radius: 14px; padding: 8px; margin-bottom: 6px; }
.evj-row .tx-field { margin-bottom: 0; }
.evj-top { display: flex; gap: 6px; align-items: center; }
.evj-top .evj-title { flex: 1; min-width: 0; }
.evj-del { flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 10px; background: transparent; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer; }
.evj-bottom { display: flex; gap: 6px; margin-top: 6px; }
.evj-bottom > * { flex: 1; min-width: 0; }
.evj-when-note { font-size: var(--fs-small); color: var(--ink-soft); padding: 6px 4px 0; }
.evj-when-note:empty { display: none; }
#eventModal .tk-photo-btn { margin-bottom: 4px; }
body:not(.desk) .tasks-panel.cal-mode { left: calc(8px + env(safe-area-inset-left, 0px)); }
.tk-done-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; min-height: 40px; font: inherit; }
.tk-done-toggle > span:first-child { flex: 1; }
.tk-done-toggle .tk-done-count { font-weight: 600; }
.tk-done-toggle svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.tk-done-toggle.open svg { transform: rotate(90deg); }
.inv-media { margin: 2px 0 6px; }
.inv-photo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.inv-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; cursor: pointer; }
.inv-photo .btn, .inv-map-row .btn { margin: 0; min-height: 42px; background: var(--card-press); border: 1px solid transparent; color: var(--ink); font-weight: 700; border-radius: 12px; }
.inv-photo .btn { flex: 1; }
.inv-map-row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; }
/* Gate pop-up: a neat Open / Shut button with room around it. */
.popup-actions.has-gate { margin-top: 8px; }
.popup-actions .gate-toggle { padding: 6px 14px; margin: 0 8px 0 0; font-size: var(--fs-small); font-weight: 700; line-height: 1.3; border-radius: 999px; vertical-align: middle; }
/* Pop-up quick actions (Record Rain, ✓ OK / Problem): compact rounded
   buttons sized to their words, like the gate's, with room around them. */
.popup-body .pp-acts { gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
.popup-body .pp-acts .pp-act { flex: 0 0 auto; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-small); position: relative; }
.popup-body .pp-acts .pp-act::after { content: ''; position: absolute; inset: -6px -3px; }

/* ---------- Windows: one structure for all of them ----------
   The window fits the screen that's showing (--vvh, measured in app.js),
   only its contents scroll (never the dark backdrop behind it, which used
   to carry the whole window off the screen), and its Save / Cancel row
   stays pinned at the bottom, always in reach. */
.modal-overlay:not(#loginOverlay) {
  top: var(--vvtop, 0px); bottom: auto; height: var(--vvh, 100vh);
  overflow: hidden; overscroll-behavior: contain; touch-action: none;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
}
.modal-overlay:not(#loginOverlay) > .modal-card {
  --card-pad: 16px;
  max-height: 100% !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  margin: 0 !important;
  padding: 18px var(--card-pad) 0 !important;
}
.modal-overlay:not(#loginOverlay) > .modal-card > .modal-actions {
  position: sticky; bottom: 0; z-index: 3; background: var(--panel);
  margin: 14px calc(-1 * var(--card-pad)) 0 !important;
  padding: 12px var(--card-pad) 16px !important;
  border-radius: 0;
}
/* A window without a button row still gets room at its foot. */
.modal-overlay:not(#loginOverlay) > .modal-card::after { content: ''; display: block; height: 16px; }
.modal-overlay:not(#loginOverlay) > .modal-card:has(> .modal-actions)::after { display: none; }

/* ---------- Mob movements on the map ---------- */
.moves-pick { margin-top: 2px; }
.moves-pick .tx-field { margin-bottom: 8px; }
.moves-legend { display: grid; gap: 6px; margin-bottom: 10px; }
.moves-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-soft); min-width: 0; }
.moves-row i { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.moves-row b { color: var(--ink); font-weight: 650; }
.moves-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moves-empty { font-size: var(--fs-small); color: var(--ink-soft); }
.move-stop span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #111; font-weight: 800; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.55); box-sizing: border-box; }
.move-stop.now span { box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 1px 4px rgba(0,0,0,0.55); }
.move-arrow i { display: block; width: 0; height: 0; margin: 2px 0 0 3px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid #fff; transform-origin: 4px 5px; filter: drop-shadow(0 0 1px rgba(0,0,0,0.8)); }
.move-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.moves-chip { position: fixed; top: calc(var(--top-inset, 0px) + 54px); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 2px; background: var(--panel); border-radius: 999px; box-shadow: var(--sheet-shadow); padding: 4px 4px 4px 6px; max-width: calc(100vw - 32px); }
.moves-chip button { border: none; background: none; color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 650; cursor: pointer; min-height: 32px; }
#movesChipText { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#movesChipOff { width: 32px; border-radius: 50%; background: var(--card-press); flex-shrink: 0; }
body.views-open .moves-chip { display: none !important; }

/* ---------- Consistency ----------
   One font everywhere (buttons and fields used the browser's own), the same
   12px corners on every ordinary button and row, and the Done row in Jobs
   styled like the other section labels. */
button, input, select, textarea { font-family: inherit; }
.tk-done-toggle { font-size: var(--fs-small) !important; font-weight: 700 !important; color: var(--ink-soft); }
.tk-done-toggle .tk-done-count { font-weight: 600; }
#recordTiles .btn, #viewDisposalsBtn, .rec-row, .st-quick, .st-card .st-quick, .fab-option { border-radius: 12px !important; }
/* Map Views: room for the movement pickers. */
.views-panel { width: min(300px, calc(100vw - 24px)) !important; }

/* Rain widget window */
.pf-tile.pf-tile-wide { grid-column: 1 / -1; }
.rw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rw-head h2 { margin-bottom: 0; }
.rw-q { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.rw-help-steps { margin: 6px 0 4px; padding-left: 20px; font-size: var(--fs-body); line-height: 1.45; color: var(--ink); }
.rw-help-steps li { margin: 5px 0; }
.rw-state { font-weight: 700; font-size: var(--fs-small); color: var(--ink-soft); }
.rw-state.on { color: var(--accent-fg); }
.rw-steps { margin-top: 12px; }
.rw-copy { width: 100%; }
.rw-steps .acct-note { margin-top: 8px; }