/* Org app — Direction A ("Slate"). See HANDOFF_ORGS_SLICE1_DESIGN.md.
   Its own look: none of the grower app's cream tokens, and nothing in app.css
   depends on this file. */

/* ── theme tokens (polish round, 2026-10-16) ──────────────────────────────
   One set of colours for every /org page and Today, light and dark, from
   mock-appearance.html: light is look A ("Tidied": cool grey page, white
   cards, no cream), dark is look B. theme.js sets <html data-theme>; the
   user menu's Theme (Device / Light / Dark) is remembered per device.
   Nothing in org.css, scout.css, traps.css or watch.css names a colour
   outside this block, except the crop dots and chart series (the same in
   both), the printable field sheet (paper) and the sign-in screen (its own
   fixed dark-green look). */
:root {
  --bg: #f3f5f2;        /* page */
  --surface: #ffffff;   /* cards, dialogs, menus */
  --head: #f7f8f6;      /* soft fill: table heads, hovers, quotes */
  --ink: #1d2420;
  --ink2: #646e67;      /* secondary text */
  --ink3: #7a847d;      /* the grey "—", placeholders */
  --line: #e1e5df;
  --line2: #edf0ec;     /* hairlines inside a card */
  --line-strong: #c9d0c8; /* control borders: date buttons, steppers */
  --rail: #1f3d29; --rail-tx: #cfe0d3; --rail-on: rgba(255, 255, 255, .13); --rail-on-tx: #ffffff;
  --brand-tile: #14301a;
  --band1: #1f3d29; --band2: #2f5d3a; --band-tx: #ffffff; --band-tx2: #cfe0d2;
  --band-btn: #ffffff; --band-btn-tx: #1f3d29; --band-btn-hover: #e2f1e5;
  --accent: #2f5d3a; --accent-hover: #1f3d29; --accent-ink: #ffffff;
  --focus-ring: rgba(47, 93, 58, .22);
  --chip-bg: #e4f1e7; --chip-tx: #245a33;
  --ok-bg: #e2f1e5;   --ok-tx: #1f5a2c;
  --warn-bg: #fbefd9; --warn-tx: #86560e; --warn-line: #e7c88f; --warn-strong: #b26b14;
  --mute-bg: #edf0ec; --mute-tx: #4f5953;
  --bad-bg: #fbe7e5;  --bad-tx: #b3261e;
  --info-bg: #e8eef7; --info-tx: #2c4d7a; --info-line: #c9dbef;
  --danger: #b4352f; --danger-line: #e7b9b5;
  --alert: #c62828;     /* unread counts: white on red in both themes */
  --hl-bg: #eef6f0;     /* today / the focused row */
  --flash-bg: #fff1c2; --flash-line: #e0b23a;
  --scrim: rgba(20, 30, 24, .45);
  --shadow: 0 1px 3px rgba(20, 40, 25, .10);
  --pop-shadow: 0 12px 32px rgba(20, 40, 25, .16);
  --map-ground: #dfe5dc;                 /* a map with no tiles yet */
  --map-panel: rgba(255, 255, 255, .92); --map-panel-tx: #1d2420;
  --toast-bg: #1d2420; --toast-tx: #ffffff;
  --rail-w: 88px;
  --bar-h: 76px;
  --top-h: 72px;
  --r-card: 14px;       /* radius scale: cards and bands 14, tiles and pills 12, controls 10, small 6 */
  --r-tile: 12px;
  --r-ctl: 10px;
  --r-sm: 6px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #141916;
  --surface: #1d231f;
  --head: #222924;
  --ink: #e6ebe7;
  --ink2: #98a39b;
  --ink3: #838e86;
  --line: #2c3530;
  --line2: #262e29;
  --line-strong: #3d4840;
  --rail: #0f1411; --rail-tx: #a9bcae; --rail-on: rgba(143, 207, 158, .14); --rail-on-tx: #eef6f0;
  --brand-tile: #17301f;
  --band1: #17301f; --band2: #24452f; --band-tx: #eef6f0; --band-tx2: #b9cdbd;
  --band-btn: #1d231f; --band-btn-tx: #a6dcb1; --band-btn-hover: #22402b;
  --accent: #8fcf9e; --accent-hover: #a6dcb1; --accent-ink: #0f1a12;
  --focus-ring: rgba(143, 207, 158, .3);
  --chip-bg: #22402b; --chip-tx: #a6dcb1;
  --ok-bg: #1f3a26;   --ok-tx: #a6dcb1;
  --warn-bg: #3b2e15; --warn-tx: #f0c27a; --warn-line: #6a5226; --warn-strong: #f0c27a;
  --mute-bg: #2a322c; --mute-tx: #b4bdb6;
  --bad-bg: #4a2420;  --bad-tx: #f3b0a3;
  --info-bg: #1e2c40; --info-tx: #a9c4ea; --info-line: #34496a;
  --danger: #f08a7e; --danger-line: #6b3530;
  --alert: #c62828;
  --hl-bg: #1f3a26;
  --flash-bg: #4a3d12; --flash-line: #c9a13a;
  --scrim: rgba(0, 0, 0, .6);
  --shadow: 0 1px 0 rgba(0, 0, 0, .4);
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  --map-ground: #1f2621;
  --map-panel: rgba(29, 35, 31, .94); --map-panel-tx: #e6ebe7;
  --toast-bg: #e6ebe7; --toast-tx: #141916;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1200px) { body { font-size: 16px; } }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
         stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.ic.sm { width: 16px; height: 16px; }
svg.ic.xs { width: 13px; height: 13px; }

/* ── controls ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-ctl);
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--head); color: var(--ink); }
.btn-p { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-p:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--ink2); color: var(--bg); }
.btn-link { border: 0; background: none; color: var(--accent); padding: 0 8px; min-height: 44px; }
.btn-link:hover { background: none; color: var(--accent-hover); text-decoration: underline; }
.btn-danger { color: var(--danger); }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border-radius: var(--r-ctl);
  border: 0; background: none; color: var(--ink2); cursor: pointer; font: inherit;
}
.icon-btn:hover { background: var(--line2); color: var(--ink); }

label.fld { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select {
  font: inherit; font-size: 16px; color: var(--ink);
  min-height: 48px; padding: 0 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: var(--surface); width: 100%;
}
select { padding-right: 32px; }
/* Settings › Scouting season (Watch round 2) */
form[data-form="season"] input[type=date] { font: inherit; font-size: 16px; color: var(--ink); min-height: 48px; padding: 0 12px;
  border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); }
textarea {
  font: inherit; font-size: 16px; color: var(--ink); padding: 10px 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: var(--surface); width: 100%; resize: vertical;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.select-sm { min-height: 44px; width: auto; font-size: 15px; }
.note { color: var(--ink2); font-size: 14px; }
.err { color: var(--danger); font-size: 14px; min-height: 1.2em; margin-top: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 3px 10px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.chip-ok { background: var(--ok-bg); color: var(--ok-tx); }
.chip-warn { background: var(--warn-bg); color: var(--warn-tx); }
.chip-mute { background: var(--mute-bg); color: var(--mute-tx); }
.chip .icon-btn { min-width: 28px; min-height: 28px; margin: -4px -6px -4px 0; color: inherit; }
/* Farms list: a scout's chip opens the farm's scout popover (route days) */
.chip-open { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; min-height: 28px; }
.chip-open:hover { text-decoration: underline; }
.chip-days { font-weight: 500; }
/* the farm's report history: an earlier version under the current one */
.rv-old td { color: var(--ink2); }
.chip-add {
  border: 1px dashed var(--line); background: var(--surface); color: var(--ink2);
  min-height: 44px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600;
  border-radius: 999px; cursor: pointer;
}
.chip-add:hover { border-color: var(--accent); color: var(--accent); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  margin-bottom: 20px;
}
.card-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; flex-wrap: wrap; }
.card-head h2 { font-size: 19px; margin: 0; font-weight: 700; }
.card-body { padding: 0 20px 20px; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--line2); }
.grow { flex: 1; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); background: var(--rail);
  display: flex; flex-direction: column; align-items: stretch; padding: 14px 8px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 20;
}
/* .rail .brand, not .brand: the generic `.rail a` rule below would otherwise win. */
.rail .brand {
  width: 44px; height: 44px; min-height: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; padding: 0;
  font-weight: 700; font-size: 20px; text-decoration: none; flex-direction: row;
}
.rail .brand:hover { background: var(--accent-hover); color: var(--accent-ink); }
/* The grower login's mark, scaled to the rail: dark-green rounded tile, full
   apple (icon-transparent.png at ~76% of the tile, as on the login). */
.rail .brand { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-tile);
  box-shadow: 0 2px 10px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); }
.rail .brand:hover { background: var(--band1); }
/* icon-transparent.png carries its own padding, so it fills the tile */
.rail .brand img { width: 50px; height: 50px; display: block; }
.rail-items { display: flex; flex-direction: column; gap: 6px; }
/* 4d: daily work above the divider, reference below; More is the phone's */
.rail-div { border: 0; border-top: 1px solid rgba(255,255,255,.16); margin: 6px 10px; }
.rail-more { display: none; }
.rail-bottom { margin-top: auto; }
.rail a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 64px; justify-content: center; border-radius: 12px;
  color: var(--rail-tx); text-decoration: none; font-size: 12px; font-weight: 500;
}
.rail a:hover { color: var(--rail-on-tx); background: rgba(255,255,255,.05); }
.rail a[aria-current="page"] { background: var(--rail-on); color: var(--rail-on-tx); font-weight: 600; }
.rail a:focus-visible { outline-color: var(--rail-on-tx); }
/* the Reports item's count (reports to write) */
.rail a { position: relative; }
.rail-ct { position: absolute; top: 4px; right: 12px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--alert);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* Reports page and the farm page's Reports (2026-10-13) */
.rep-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 12px; }
.rep-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink2); }
.rq { font-style: italic; color: var(--ink2); font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.rv-list { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.inv-line { margin: 0 0 12px; font-size: 14px; color: var(--ink2); }
/* the farm header: "managed by <team>" on another team's placeholder */
.band-mng { color: var(--band-tx2); font-size: 14px; }
.inv-line .btn-link { font-size: 14px; }
.menu-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.menu-list .btn { justify-content: flex-start; width: 100%; }
.menu-list .note { margin: -4px 0 4px 2px; }
.today-rtw { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); color: var(--ink); text-decoration: none; font-weight: 600; }
.today-rtw.w { border-color: var(--warn-line); background: var(--warn-bg); }
/* the farm header's ⋯: a full 44 px button, but on a laptop pinned to the band's top-right corner,
   out of the flow, so the band above the tiles stays short (round 7's two rules) */
@media (min-width: 900px) {
  .band:has(.btn-more) { position: relative; }
  .band .btn-more { position: absolute; top: 12px; right: 22px; min-height: 44px; }
}

.main { flex: 1; margin-left: var(--rail-w); min-width: 0; display: flex; flex-direction: column; }
.top {
  height: var(--top-h); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15;
}
.switcher {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 12px 4px 6px;
  border: 1px solid transparent; border-radius: var(--r-ctl); background: none; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left; max-width: min(460px, 70vw);
}
.switcher:hover { background: var(--head); border-color: var(--line); }
.tile {
  width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.sw-text { min-width: 0; }
.sw-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-role { color: var(--ink2); font-size: 13px; }
.user {
  margin-left: auto; display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0 6px 0 12px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink);
  border-radius: var(--r-ctl);
}
.user:hover { background: var(--head); }
.user-name { font-weight: 500; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--line2); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: 13px; flex-shrink: 0;
}
.menu {
  position: absolute; top: calc(100% - 6px); min-width: 260px; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--pop-shadow); padding: 6px; z-index: 40;
}
.menu button, .menu a {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 12px;
  border: 0; background: none; border-radius: 8px; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer; text-decoration: none;
}
.menu button:hover, .menu a:hover { background: var(--head); color: var(--ink); }
.menu [aria-checked="true"] { font-weight: 600; }
.menu .sep { height: 1px; background: var(--line2); margin: 6px 0; }
/* the user menu's Theme: Device / Light / Dark, one row of three */
.menu .menu-cap { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); padding: 6px 12px 4px; }
.menu .theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 6px 6px; padding: 3px;
  background: var(--head); border: 1px solid var(--line); border-radius: 999px; }
.menu .theme-seg button { min-height: 40px; justify-content: center; border-radius: 999px; font-size: 14px; color: var(--ink2); padding: 0 8px; }
.menu .theme-seg button:hover { background: var(--line2); color: var(--ink); }
.menu .theme-seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.view { padding: 28px 32px 48px; max-width: 1240px; width: 100%; }
.pg-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pg-head h1 { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.pg-sub { color: var(--ink2); margin-top: 4px; }
.pg-acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── farm Overview (polish round, mock-appearance.html) ─────────────────── */
.ov-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.ov-scroll { overflow-x: auto; }
.ov-right { display: grid; gap: 16px; min-width: 0; }
.ov-card { margin: 0; padding: 16px 18px; display: grid; gap: 12px; min-width: 0; }
.ov-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ov-ch h2 { margin: 0; font-size: 17px; font-weight: 700; margin-right: auto; }
.ov-ch h2 a { color: inherit; text-decoration: none; }
.ov-ch h2 a:hover { text-decoration: underline; }
.ov-meta { color: var(--ink2); font-size: 13px; }
.ov-sub { color: var(--ink2); font-size: 13px; }
.ov-lab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); font-weight: 600; }
.ov-quote { background: var(--head); border-radius: var(--r-ctl); padding: 10px 12px; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-empty { margin: 0; color: var(--ink2); }
.ov-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-acts .btn { min-height: 44px; }
table.ov-tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.ov-tbl th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov-tbl td { padding: 8px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.ov-tbl tr:last-child td { border-bottom: 0; }
.ov-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-season { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ov-season div { background: var(--head); border-radius: var(--r-ctl); padding: 10px 12px; }
.ov-season b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.ov-season span { font-size: 12px; color: var(--ink2); }
.ov-prod { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: 14px; }
.ov-prod:last-child { border-bottom: 0; }
.ov-prod .r { white-space: nowrap; color: var(--ink2); }
@media (max-width: 900px) { .ov-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .ov-card { padding: 14px; } .ov-tbl th, .ov-tbl td { padding-left: 4px; padding-right: 4px; } }

/* ── Connected / Not connected (the farm's account, polish round) ─────────── */
/* Getting there, the header's Directions, the farm details form, the Farms search */
.ov-contact a { font-weight: 600; white-space: nowrap; }
.band-s a.band-dir, .band-dir { color: var(--band-tx); text-decoration: underline; text-underline-offset: 3px; }
.fd-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fd-row .grow { flex: 1 1 160px; min-width: 0; }
.fd-st { flex: 0 1 90px; } .fd-zip { flex: 0 1 110px; }
form[data-form="farm-details"] > * + *, .af-fields > * + * { margin-top: 12px; }
.af-more { margin-top: 12px; }
.af-more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.farm-search { margin: 0 0 10px; max-width: 420px; }
.ov-mark { color: var(--warn-tx); font-weight: 700; margin-left: 1px; }
.ov-foot { margin: -4px 0 0; font-size: 12.5px; color: var(--ink2); }
/* the Farms list's Grower column and the farm header: the status chip, the one action or what's shared */
.c-grower .gw-line { margin-top: 4px; }
.c-grower .gw-line .btn-link { min-height: 32px; padding: 0 2px; font-size: inherit; }
/* in the band: a full 44 px target that doesn't make the band taller */
.band-inv .btn-link { min-height: 44px; margin: -6px 0; padding: 0 4px; font-size: inherit; }
.band-inv { display: inline-flex; align-items: center; gap: 4px; align-self: center; }   /* centred like the chip: a baseline row would grow */
.chip-btn { font: inherit; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; min-height: 28px; }
.chip-btn:hover { text-decoration: underline; }
.chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.band .chip-ok.chip-btn, .band .chip-ok { background: rgba(255, 255, 255, .16); color: var(--band-tx); }
.band .chip-warn { background: var(--warn-bg); color: var(--warn-tx); }
.band .chip-mute { background: rgba(255, 255, 255, .16); color: var(--band-tx); }
.conn-pop p { margin: 0 0 10px; }
.conn-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.conn-pop dt { color: var(--ink2); }
.conn-pop dd { margin: 0; font-weight: 600; }

/* ── tables ────────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
/* The Farms list's header row sticks under the top bar (round 5). Its
   wrapper's overflow-x: auto made the wrapper the header's scroll box, so it
   never stuck to the page; with the rail (900 px and up) the table fits, and
   below that it is stacked rows with no header. */
@media (min-width: 900px) {
  .tbl-wrap.tbl-sticky { overflow: visible; }
  .tbl-sticky .dt th { position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index: 5;
    box-shadow: inset 0 -1px 0 var(--line); }
}
/* farm page parity tabs (recommendations, spray log) */
.pt-item { padding: 14px 0; border-bottom: 1px solid var(--line2); }
.pt-item:last-child { border-bottom: 0; }
.pt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-meta { color: var(--ink2); margin-top: 4px; }
.pt-lines { margin: 8px 0 6px; padding-left: 18px; }
.pt-lines li { margin: 3px 0; }
.pt-notes { margin: 6px 0; font-style: italic; color: var(--ink2); white-space: pre-wrap; }
.ipm-frame { display: block; width: 100%; min-height: 400px; border: 0; border-radius: var(--r-card); background: var(--surface); }
.gc-line { padding: 0 20px 14px; }
.gc-line select { max-width: 320px; }
label.check-line { display: flex; gap: 10px; align-items: center; font-weight: 600; min-height: 48px; cursor: pointer; }
label.check-line input { width: 22px; height: 22px; }
/* the grower's Map page (Map tab) and Log view (Spray log tab), embedded */
.map-frame { display: block; width: 100%; height: calc(100vh - 230px); min-height: 420px; border: 0;
  border-radius: var(--r-card); background: var(--map-ground); }
@media (max-width: 600px) { .map-frame { height: calc(100vh - 250px); min-height: 380px; } }
.blocks-frame { display: block; width: 100%; height: 240px; border: 0; margin-top: 16px; background: transparent; }
.log-frame { display: block; width: 100%; min-height: 360px; border: 0; background: transparent; }
.pt-shared { margin: 0 0 6px; }

/* Traps tab: the classic filters (static/filters.css), sortable headers, row actions */
.ft-filters { margin: 0 16px 8px; }
.ft-filters .trap-filter-bar { margin: 0; }
/* filters.css is the grower app's (light, fixed colours): here it takes the theme */
.ft-filters .trap-filter-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.ft-filters .trap-filter-toggle { background: var(--surface); color: var(--ink); }
.ft-filters .trap-filter-toggle:hover { background: var(--head); }
.ft-filters .trap-filter-count { background: var(--accent); color: var(--accent-ink); }
.ft-filters .trap-filter-chevron { color: var(--ink2); }
.ft-filters .trap-filter-content { background: var(--head); border-top-color: var(--line); }
.ft-filters .trap-filter-label { color: var(--ink2); }
.ft-filters .trap-filter-select { background: var(--surface); color: var(--ink); border-color: var(--line); }
.ft-filters .trap-filter-select:focus { border-color: var(--accent); }
.ft-filters .trap-filter-clear { background: var(--surface); color: var(--ink2); border-color: var(--line); }
.ft-filters .trap-filter-clear:hover { background: var(--line2); border-color: var(--line-strong); }
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit;
  letter-spacing: inherit; cursor: pointer; min-height: 32px; }
.th-sort:hover { text-decoration: underline; }
.row-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-danger-q { color: var(--danger); border-color: var(--danger-line); }

/* Notes tab: the grower's Notes module in team mode (static/notes.js +
   notes.css), in this app's colours: notes.css reads these tokens. */
#notes-container.notes-team, #notes-thread-view, .notes-modal { --sf: var(--surface); --br: var(--line); --tx: var(--ink);
  --gl: var(--ok-bg); --gm: var(--accent); --gm-d: var(--accent); --card: var(--surface); }
/* notes.css and notes.js's own <style> (the thread drawer, nt2-* / ntc-*)
   carry the grower app's fixed cream and greens; in the team app they take
   the theme. An id in each selector outranks notes.js's injected rules. */
#notes-container.notes-team .np-ic { background: var(--ok-bg); color: var(--accent); }
#notes-container.notes-team .note-tab.on { background: var(--accent); color: var(--accent-ink); }
#notes-container.notes-team .note-author-badge.advisor { background: var(--info-bg); color: var(--info-tx); }
#notes-container.notes-team .note-author-badge.you, #notes-container.notes-team .note-author-badge.grower { background: var(--ok-bg); color: var(--ok-tx); }
#notes-container.notes-team .note-badge.location { background: var(--head); border-color: var(--line); }
#notes-thread-view.active { background: var(--bg); color: var(--ink); }
#notes-thread-view .nt2-head { background: var(--band1); color: var(--band-tx); }
#notes-thread-view .nt2-head button { color: var(--band-tx); }
#notes-thread-view .nt2-htitle .s, #notes-thread-view .nt2-hbtn { color: var(--band-tx2) !important; }
#notes-thread-view :is(.nt2-hero, .nt2-compose, .ntc-ro) { background: var(--surface); border-color: var(--line); }
#notes-thread-view .nt2-bub .b { background: var(--surface); border-color: var(--line); color: var(--ink); }
#notes-thread-view .nt2-row.own .b { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ink); }
#notes-thread-view .nt2-hero-text { color: var(--ink); }
#notes-thread-view .nt2-hero-map { background: var(--map-ground); }
#notes-thread-view .nt2-chip { background: var(--band1); color: var(--band-tx); }
#notes-thread-view :is(.nt2-hero-meta, .nt2-div, .nt2-bub .m, .ntc-read, .ntc-ro) { color: var(--ink2); }
#notes-thread-view .ntc-hint { color: var(--ink2); background: var(--surface); }
#notes-thread-view .nt2-compose textarea { background: var(--bg); border-color: var(--line); color: var(--ink); }
#notes-thread-view .nt2-send { background: var(--accent); color: var(--accent-ink); }
#notes-thread-view .nt2-sys { color: var(--ink2); background: var(--head); border-color: var(--line); }
#notes-thread-view .ntc-suggest { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--pop-shadow); }
#notes-thread-view .ntc-suggest :is(button:hover, button:focus) { background: var(--hl-bg); }
#notes-thread-view .ntc-err { color: var(--danger); }
/* notes.js's inline greys (Team only, the globe / lock marks) */
#notes-thread-view [style*="color:#8a8676"], #notes-container.notes-team [style*="color:#8a8676"] { color: var(--ink2) !important; }
/* Data export: the workbook's group colours are dark; in dark the headings take the text colour, the items keep the colour bar */
[data-theme="dark"] .ex-gh { color: var(--ink2) !important; }
html body .nt-visit { color: var(--ink2); background: var(--hl-bg); border-color: var(--line-strong); }
html body .nt-visit button { color: var(--accent); }
html body .nt-vis-pick { border-color: var(--line); }
html body .nt-vis-pick small { color: var(--ink2); }
html body .nt-vis-pick:has(input:checked) { border-color: var(--accent); background: var(--hl-bg); }
/* the module's New note dialog */
#notes-modal.notes-modal { background: var(--scrim); }
#notes-modal .notes-modal-content { background: var(--surface); color: var(--ink); box-shadow: var(--pop-shadow); }
#notes-modal :is(.notes-modal-header, .notes-modal-footer) { border-color: var(--line); }
#notes-modal :is(.notes-modal-title, .notes-form-label) { color: var(--ink); }
#notes-modal .notes-modal-close { color: var(--ink2); }
#notes-modal .notes-modal-close:hover { background: var(--line2); }
#notes-modal .notes-form-group :is(select, textarea) { background: var(--surface); color: var(--ink); border-color: var(--line); }
#notes-modal .notes-photo-input { border-color: var(--line-strong); }
#notes-modal .notes-photo-input:hover { border-color: var(--accent); }
#notes-modal .notes-location-coords { color: var(--ink2); background: var(--head); }
#notes-modal .notes-btn-primary { background: var(--accent); color: var(--accent-ink); }
#notes-modal .notes-btn-primary:hover { background: var(--accent-hover); }
#notes-modal .notes-btn-secondary { background: var(--line2); color: var(--ink); }
#notes-modal .notes-btn-secondary:hover { background: var(--line); }
#notes-modal .notes-btn:disabled { background: var(--line-strong); color: var(--ink2); }
#notes-container.notes-team { max-width: none; padding: 0; background: none; }
#notes-container.notes-team .note-thread-card { background: var(--surface); border-color: var(--line); }
#notes-container.notes-team .np-head { margin: 0 0 12px; }
#notes-container.notes-team .np-acts { gap: 8px; }
.nt-team-btn { min-height: 40px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nt-team-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nt-team-btn.primary:hover { background: var(--accent-hover); }
.nt-last { font-size: 13px; color: var(--ink2); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-badge.nt-vis.team { background: var(--warn-bg); color: var(--warn-tx); }
.tab-ct { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 9px; background: var(--alert);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.chip-new { background: var(--alert); color: #fff; text-decoration: none; }
.radio-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.radio-line input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.radio-line .note { display: block; margin: 2px 0 0; }
.notify-set { border: 0; margin: 0; padding: 0; }
table.dt { width: 100%; border-collapse: collapse; }
.dt th {
  background: var(--head); color: var(--ink2); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; text-align: left;
  padding: 12px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dt td { padding: 14px 16px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.dt tr:last-child td { border-bottom: 0; }
.dt tr.clickable { cursor: pointer; }
.dt tr.clickable:hover td { background: var(--head); }
.dt .sub { color: var(--ink2); font-size: 13px; }
.dt .name { font-weight: 600; color: var(--ink); text-decoration: none; }
.dt a.name:hover { text-decoration: underline; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }

/* ── team strip ────────────────────────────────────────────────────────── */
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.person {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line2);
  border-radius: 12px; min-width: 0; position: relative;
}
.person .rm { position: absolute; top: 4px; right: 4px; }
.person:has(.rm) .who { padding-right: 36px; }
.person .who { min-width: 0; flex: 1; }
.person .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .meta { color: var(--ink2); font-size: 13px; }
.person .ctl { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.solo {
  display: flex; gap: 14px; align-items: center; padding: 18px 20px;
  border: 2px dashed var(--line); border-radius: var(--r-card); margin-bottom: 20px;
  background: var(--surface); flex-wrap: wrap;
}

/* ── add farm panel ────────────────────────────────────────────────────── */
.panel {
  border: 2px solid var(--accent); border-radius: var(--r-card); background: var(--surface);
  padding: 20px; margin-bottom: 20px;
}
.panel-head { display: flex; align-items: center; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 20px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.choice h3 { margin: 0 0 6px; font-size: 17px; }
.choice form > * + * { margin-top: 12px; }

/* ── dialog ────────────────────────────────────────────────────────────── */
.backdrop {
  position: fixed; inset: 0; background: var(--scrim); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dialog {
  background: var(--surface); border-radius: 16px; width: 620px; max-width: 100%;
  max-height: calc(100vh - 32px); overflow: auto; padding: 24px;
  box-shadow: var(--pop-shadow);
}
.dialog h2 { margin: 0 0 16px; font-size: 22px; }
.radio-cards { display: grid; gap: 10px; margin: 16px 0; border: 0; padding: 0; }
.radio-cards legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.rcard {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; min-height: 48px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.rcard input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.rcard .t { font-weight: 600; }
.rcard .d { color: var(--ink2); font-size: 14px; }
.rcard:has(input:checked) { border: 2px solid var(--accent); background: var(--ok-bg); padding: 13px 15px; }
.dialog-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* ── popover ───────────────────────────────────────────────────────────── */
.popover {
  position: absolute; z-index: 50; width: 320px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--pop-shadow); padding: 14px;
}
.popover h3 { margin: 0 0 8px; font-size: 16px; }
/* route days in the farm's scout popover */
.popover:has(.rt-sec) { width: 360px; }
.rt-sec { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.rt-every { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rt-every input { width: 76px; min-height: 40px; padding: 0 8px; font: inherit; }
.rt-person { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.rt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-head .meta { font-size: 13px; color: var(--ink2); }
.rt-move { margin-left: auto; display: inline-flex; gap: 2px; }
.rt-days { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.rt-day { font: inherit; font-size: 13px; min-width: 40px; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink2); cursor: pointer; }
.rt-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.check-row {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 6px;
  border-radius: 8px; cursor: pointer;
}
.check-row:hover { background: var(--head); }
.check-row input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.check-row .meta { color: var(--ink2); font-size: 13px; }

/* ── farm page ─────────────────────────────────────────────────────────── */
.crumb { color: var(--ink2); font-size: 14px; margin-bottom: 6px; }
.crumb a { color: var(--ink2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.farm-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.farm-title h1 { font-size: 28px; margin: 0; }
.farm-band { margin: 4px 0 0; color: var(--ink2); font-size: 14px; }
.tabs { background: var(--bg); }
.tabs {
  /* Sticky under the top bar in every layout (round 5; it was the compact
     laptop layout only). Sticky still contains the tabs' .sr-only labels
     (absolute), as relative did: without that they widened every farm page
     on a phone (found 2026-10-12). Nothing between the tabs and the page
     may scroll (overflow auto/hidden), or they stick to that box instead. */
  position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index: 12;
  display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line);
  margin: 18px 0 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
/* Scouting's tabs stay in the page: its template list and preview stick there */
.tabs.sc-tabs { position: relative; top: auto; }
.tabs a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px;
  color: var(--ink2); text-decoration: none; font-weight: 500; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.classic {
  max-width: 520px; margin: 48px auto; text-align: center; padding: 32px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.classic h2 { margin: 0 0 8px; font-size: 20px; }
.classic p { color: var(--ink2); margin: 0 0 20px; }

/* ── auth + invite pages ───────────────────────────────────────────────── */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
/* Sign-in / invite screens: the grower login's background and mark. */
#standalone { background: radial-gradient(ellipse at 50% 28%, #234b35 0%, #1a3a2a 45%, #122a1f 100%) fixed; min-height: 100vh; }
.auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 18px; }
.auth-tile {
  width: 96px; height: 96px; border-radius: 22px; background: #1a3a1f;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.auth-tile img { width: 74px; height: 74px; }
.auth-word { font-size: 32px; font-weight: 800; color: #1a3a1f; letter-spacing: -1px; line-height: 1; }
.auth-tag { margin-top: 4px; color: #555; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.auth-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  width: 440px; max-width: 100%; padding: 28px;
}
.auth-card h1 { font-size: 24px; margin: 0 0 6px; }
.auth-card form > * + * { margin-top: 14px; }
.auth-card .btn { width: 100%; }

/* The sign-in (and its forgot / Let's talk screens): the classic advisor
   portal's login (static/advisor.html #login-screen), same card, mark, fields,
   button and footer; the /org background (#standalone) stays. */
.auth-card.signin {
  border: 0; border-radius: 20px; padding: 32px 28px; width: 380px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.10); color: #111827;
  background: #fff;   /* the sign-in keeps the classic login's fixed look in either theme */
  color-scheme: light;
}
.signin .auth-brand { margin-bottom: 24px; }
.signin .auth-tile { margin-bottom: 14px; box-shadow: 0 6px 20px rgba(26, 58, 31, 0.25); }
.signin .auth-tile img { width: 72px; height: 72px; }
.signin .auth-word { font-size: 28px; letter-spacing: -0.5px; }
.signin .auth-tag { font-size: 11px; color: #6b7280; }
.auth-card.signin form > * + * { margin-top: 0; }
.signin input, .signin textarea {
  display: block; width: 100%; margin: 0 0 12px; padding: 11px 13px;
  font: inherit; font-size: 15px; color: #111827; background: #fff;
  border: 1px solid #d1d5db; border-radius: 12px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.signin textarea { resize: vertical; }
.signin input:focus, .signin textarea:focus { border-color: #2d6a35; box-shadow: 0 0 0 3px rgba(45, 106, 53, 0.12); }
.si-btn {
  display: block; width: 100%; padding: 13px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--g-grad-1, #234b35); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
}
.si-btn:hover { filter: brightness(1.08); }
.si-btn:active { transform: scale(0.98); }
.si-btn:disabled { opacity: .7; }
.signin .err { color: #991b1b; font-size: 13px; min-height: 18px; margin: 0 0 10px; }
.si-done { text-align: center; }
.si-check {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: #e8f1e9; display: flex; align-items: center; justify-content: center;
}
.si-check svg { width: 28px; height: 28px; fill: none; stroke: #2d6a35; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.si-done .si-h { margin-bottom: 8px; }
.si-done .si-lead { font-size: 14px; margin-bottom: 20px; overflow-wrap: anywhere; }
.si-btn2 {
  display: block; width: 100%; padding: 12px; border-radius: 12px; cursor: pointer;
  background: #fff; color: #1a3a1f; border: 1px solid #d1d5db; font: inherit; font-size: 15px; font-weight: 600;
}
.si-btn2:hover { background: #f7f8f5; }
.si-center { text-align: center; margin-top: 10px; }
.si-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: #1a3a1f; text-decoration: underline; }
.si-link.si-muted { color: #666; text-decoration: none; }
.si-link.si-small { font-size: 12px; color: #2d6a35; }
.si-note { text-align: center; font-size: 13px; color: #6b7280; margin: 14px 0 0; }
.si-lead { font-size: 13px; color: #666; margin: 0 0 12px; }
.si-h { font-size: 18px; margin: 0 0 12px; text-align: center; }
.si-foot { text-align: center; margin-top: 18px; font-size: 11px; color: #9ca3af; letter-spacing: 0.4px; }
.si-foot a { color: #2d6a35; font-weight: 600; text-decoration: none; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 80;
  background: var(--toast-bg); color: var(--toast-tx); padding: 12px 18px; border-radius: var(--r-tile);
  box-shadow: var(--pop-shadow); max-width: calc(100vw - 32px);
}
.empty { color: var(--ink2); padding: 8px 20px 22px; }
.loading { color: var(--ink2); padding: 40px; text-align: center; }

/* ── Scouting (slice 3a): template builder (A9) and pest list ──────────── */
.view.wide { max-width: 1480px; }
.sc-tabs { margin: 0 0 20px; }
.sc-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.sc-list { position: sticky; top: calc(var(--top-h) + 16px); }
/* round 6: the preview is a phone-width side panel, opened from the editor */
.sc-pvpanel {
  position: fixed; right: 0; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 14;
  width: min(390px, 100vw); background: var(--head); border-left: 1px solid var(--line);
  box-shadow: var(--pop-shadow); display: flex; flex-direction: column;
}
.sc-pvhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0 14px; }
.sc-pvhead .sc-cap { padding: 0; }
.sc-pvpanel .sc-preview { flex: 1; overflow-y: auto; border: 0; border-radius: 0; background: none; }
/* wide screens: the editor makes room beside the open panel instead of under it */
@media (min-width: 1100px) { .view.pv-open { padding-right: calc(390px + 24px); } }
.sc-etools { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sc-help { color: var(--ink2); margin: -8px 0 16px; max-width: 80ch; }

/* ── Library: Mixes and Products (slice 4b, mixes-library-mock.html) ───── */
.chip-bad { background: var(--bad-bg); color: var(--bad-tx); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.mx-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.mx-side { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--top-h) + 16px); }
.mx-sh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 2px 4px; }
.mx-sh .sc-cap { padding: 0; }
.mx-sh-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mx-item { text-align: left; font: inherit; background: var(--surface); border-radius: 10px; padding: 10px 12px;
  border: 2px solid transparent; cursor: pointer; color: var(--ink); min-height: 48px; }
.mx-item:hover { border-color: var(--line); }
.mx-item[aria-current="true"] { border-color: var(--accent); background: var(--hl-bg); }
.mx-item.is-draft:not([aria-current="true"]), .mx-item.is-arch:not([aria-current="true"]) { opacity: .75; }
.mx-item .nm { display: block; font-weight: 600; font-size: 15px; }
.mx-item .sub { display: block; font-size: 13px; color: var(--ink2); margin-top: 2px; }
.mx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.mx-arch { align-self: flex-start; margin-top: 4px; }
.mx-cap2 { margin-top: 6px; }
.mx-none { padding: 6px 4px; }
.mx-ed { background: var(--surface); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mx-src { font-size: 13px; color: var(--ink2); }
.mx-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fld-col { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink2); min-width: 0; }
.fld-col.grow { flex: 1 1 220px; }
.fld-col input, .fld-col select, .fld-col textarea { font: inherit; font-size: 15px; color: var(--ink); }
#mx-name { font-weight: 600; }
.mx-pests { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mx-tlab { font-size: 13px; color: var(--ink2); }
.mx-pest { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; background: var(--head); border-radius: 999px; padding: 2px 4px 2px 10px; }
.mx-x { border: 0; background: none; font-size: 16px; line-height: 1; color: var(--ink2); cursor: pointer; min-width: 28px; min-height: 28px; border-radius: 50%; }
.mx-x:hover { background: var(--line2); color: var(--ink); }
#mx-err:empty { display: none; }
.mx-kind { font-style: normal; font-size: 11px; color: var(--ink2); margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.mx-pest.is-purpose { background: var(--info-bg); color: var(--info-tx); }
.mxt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.mxt-chip { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; min-height: 36px; cursor: pointer; color: var(--ink); }
.mxt-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mxt-chip.on .chip { background: rgba(255, 255, 255, .2); color: inherit; }
.mx-tadd { width: auto; flex: none; font: inherit; cursor: pointer; font-size: 13px; color: var(--accent); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 3px 8px; background: none; min-height: 32px; }
.mx-h { font-size: 15px; margin: 8px 0 2px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mx-lhead, .mx-ln { display: grid; grid-template-columns: 28px minmax(0, 1.4fr) minmax(220px, 1fr) 130px minmax(0, 1.4fr) 40px; gap: 10px; align-items: center; }
.mx-lhead { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); padding: 0 10px 2px; }
.mx-ln { background: var(--head); border-radius: 10px; padding: 10px; margin-bottom: 6px; border: 1px solid transparent; }
.mx-ln.flag { background: var(--warn-bg); border: 1px dashed var(--warn-line); }
.mx-ord { font-size: 12px; font-weight: 700; color: var(--surface); background: var(--ink3); border-radius: var(--r-sm); text-align: center; padding: 2px 0; }
.mx-ln.flag .mx-ord { background: var(--warn-strong); }
.mx-prod b { font-size: 15px; }
.mx-prod .sub { font-size: 12.5px; color: var(--ink2); overflow-wrap: anywhere; }
.mx-rate { display: flex; gap: 6px; align-items: center; min-width: 0; }
.mx-rate input { width: 64px; flex: none; font: inherit; }
.mx-rate select { min-width: 140px; flex: 1; font: inherit; font-size: 14px; }
.mx-tog { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; min-height: 36px; }
.mx-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mx-tog i { width: 32px; height: 18px; border-radius: 9px; background: var(--line-strong); position: relative; display: inline-block; transition: .15s; flex: none; }
.mx-tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; }
.mx-tog.on i { background: var(--accent); }
.mx-tog.on i::after { left: 16px; }
.mx-tog input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-facts { display: flex; gap: 4px; flex-wrap: wrap; }
.mx-more { justify-self: end; }
.mx-notes, .mx-menu { grid-column: 2 / -1; }
.mx-notes:empty { display: none; }
.mx-lnote { font-size: 13px; color: var(--ink2); }
.mx-lnote.warn { color: var(--warn-tx); }
.mx-lnote.bad { color: var(--bad-tx); }
.mx-eqv { font-size: 13px; color: var(--ok-tx); background: var(--ok-bg); border-radius: 8px; padding: 5px 9px; margin-top: 4px; }
.mx-menu { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding-top: 6px; }
.mx-add { font: inherit; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 10px; text-align: center; color: var(--accent);
  font-size: 14px; font-weight: 600; cursor: pointer; background: none; min-height: 48px; }
.mx-add:hover { background: var(--ok-bg); }
.mx-add .note { font-weight: 400; }
.mx-notef textarea { resize: vertical; }
.mx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mx-foot-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mxp { width: 560px; }
.mxp-results { max-height: min(56vh, 460px); overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.mxp-results.stale { opacity: .5; pointer-events: none; }
.mxp-results .sc-cap { padding: 8px 2px 2px; }
.mxp-item { text-align: left; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px 12px; cursor: pointer; min-height: 48px; }
.mxp-item:hover { background: var(--head); }
.mxp-item .nm { display: block; font-weight: 600; }
.mxp-item .sub { display: block; font-size: 12.5px; color: var(--ink2); }
.mxr-dlg { width: 720px; }
.mxr-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.mxr { display: flex; gap: 12px; justify-content: space-between; align-items: center; background: var(--head); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.mxr-t { min-width: 0; flex: 1 1 280px; }
.mxr-t .sub { font-size: 12.5px; color: var(--ink2); }
.mxr-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Products (4b fixes, products-tab-mock): one table for both lists, pills, a side panel */
.nw { white-space: nowrap; }
.chip-team { background: var(--info-bg); color: var(--info-tx); }
.stat[role="button"] { cursor: pointer; border: 2px solid transparent; }
.stat[role="button"].on { border-color: var(--accent); }
.stat[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.pr-bar .btn-p { margin-left: auto; }
.pr-pills { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.pr-pill { font: inherit; font-size: 14px; border: 0; background: none; min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.pr-pill.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pr-q { flex: 1 1 220px; max-width: 420px; font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); }
.pl-kinds { margin: 0 0 6px; }
.pr-tbl th { white-space: nowrap; }
/* long chemical names break anywhere, so the table fits a laptop without a sideways scroll */
.pr-tbl td[data-label="Active ingredient"], .pr-tbl td[data-label="Formulation"] { overflow-wrap: anywhere; min-width: 120px; }
.pr-tbl td.c-first { min-width: 230px; }
/* panel open: Formulation, Default rate, EPA reg and Label step aside (the
   panel shows them for the open product), so no column is ever cut; the
   table still scrolls in its own box if a narrow window needs it */
.view.pr-open .pr-tbl :is(.col-formulation, .col-rate, .col-epa_reg, .col-label) { display: none; }
.pr-panel { position: fixed; right: 0; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 14;
  width: min(460px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--pop-shadow);
  padding: 12px 20px 24px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
/* the form in the panel scrolls inside its own frame (products.html panel mode) */
.pr-panel.is-form { overflow: hidden; }
.pr-phead { display: flex; align-items: center; justify-content: space-between; }
.pr-phead .sc-cap { padding: 0; }
.pr-ph { margin: 4px 0 0; font-size: 21px; }
.pr-panel .sub { color: var(--ink2); font-size: 13px; }
.pr-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; margin: 14px 0; font-size: 14px; }
.pr-k { color: var(--ink2); }
.pr-pacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* the full label: a section of the products panel, or a dialog from a mix line */
.pr-label { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pr-label .sc-cap { padding: 0 0 6px; }
.pr-lframe { display: block; width: calc(100% + 40px); margin: 0 -20px; height: 420px; border: 0; }
.lbl-dlg { width: 760px; display: flex; flex-direction: column; gap: 6px; }
/* the dialog's body scrolls; the label frame inside is as tall as its label */
.lbl-body { max-height: min(78vh, 900px); overflow-y: auto; overscroll-behavior: contain; border-radius: 10px; background: var(--bg); }
.lbl-frame { display: block; width: 100%; height: 480px; border: 0; }
.mx-lblbtn { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.pr-pframe { flex: 1; width: 100%; min-height: 560px; border: 0; }
.pr-panel:has(.pr-pframe) { padding: 12px 0 0; }
.pr-panel:has(.pr-pframe) .pr-phead { padding: 0 12px 0 20px; }
@media (min-width: 1100px) { .view.pr-open { padding-right: calc(460px + 24px); } }
@media (max-width: 1000px) {
  .mx-grid { grid-template-columns: minmax(0, 1fr); }
  .mx-side { position: static; }
}
@media (max-width: 760px) {
  .mx-lhead { display: none; }
  .mx-ln { grid-template-columns: 28px minmax(0, 1fr) 40px; row-gap: 8px; }
  .mx-ord { grid-column: 1; grid-row: 1; }
  .mx-prod { grid-column: 2; grid-row: 1; }
  .mx-more { grid-column: 3; grid-row: 1; }
  .mx-rate, .mx-eq, .mx-facts, .mx-notes, .mx-menu { grid-column: 2 / -1; }
  .mx-ln.flag .mx-eq { display: none; }
  .mx-ed { padding: 14px 12px; }
  .mxp, .mxr-dlg { width: auto; }
  .pr-bar .btn-p { margin-left: 0; }
  .pr-pills { border-radius: 14px; }
}
.sc-help-list { text-align: left; margin: 0 auto 16px; padding-left: 20px; max-width: 64ch; }
.sc-help-list li { margin: 4px 0; }
.sc-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 10px; }
.sc-cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); padding: 0 8px 8px; }
.sc-list-items { display: flex; flex-direction: column; gap: 4px; }
.tpl-item {
  text-align: left; font: inherit; border: 0; border-radius: var(--r-ctl); padding: 10px 12px; min-height: 48px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.tpl-item:hover { background: var(--head); }
.tpl-item[aria-current="true"] { background: var(--ok-bg); }
.tpl-item .nm { display: block; font-weight: 600; }
.tpl-item .sub { display: block; font-size: 13px; color: var(--ink2); }
.tpl-new {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600; min-height: 48px; padding: 0 14px;
  border: 1px dashed var(--accent); border-radius: var(--r-ctl); background: var(--surface); color: var(--accent); cursor: pointer;
}
.tpl-new:hover { background: var(--ok-bg); }
.sc-list .tpl-new { margin-top: 6px; border-color: var(--line-strong); }
.sc-editor { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sc-editor > .err { margin: -6px 0 0; min-height: 0; }
.sc-ehead { display: flex; gap: 12px; align-items: flex-end; }
.sc-ehead input { font-size: 20px; font-weight: 700; }
.sc-window { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--ink2); }
.sc-window .select-sm { color: var(--ink); }
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.sech { padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.sech h2 { font-size: 17px; margin: 0; }
.sech .note { font-size: 13px; }
.sec-foot { padding: 10px 14px; border-top: 1px solid var(--line2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sec-foot a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.sc-trow.hd, .sc-prow.hd {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink2); background: var(--head);
}
.sc-trow {
  display: grid; grid-template-columns: 1.3fr 1.6fr 1.2fr 44px; gap: 10px; padding: 6px 0 6px 16px;
  border-top: 1px solid var(--line2); font-size: 14px; align-items: center;
}
.sc-trow.hd { padding-top: 8px; padding-bottom: 8px; }
.sc-trow:not(.hd) { min-height: 56px; }
.pl-warn { margin-top: 4px; font-size: 13px; color: var(--warn-tx); background: var(--warn-bg);
  border-radius: 6px; padding: 4px 8px; }
.sc-trow .nm { font-weight: 600; }
.sc-prow { display: grid; grid-template-columns: minmax(0, 1fr) 44px; border-top: 1px solid var(--line2); align-items: center; }
.sc-pbtn {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 12px; align-items: center;
  text-align: left; font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0;
  padding: 12px 0 12px 16px; min-height: 56px; cursor: pointer; border-radius: 0;
}
.sc-pbtn:hover { background: var(--head); }
.sc-prow.open { background: var(--head); }
.dflt { color: var(--ink2); }
.sc-ipanel { grid-column: 1 / -1; padding: 4px 16px 16px; }
.sc-igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sc-iacts { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sc-more { margin: 6px 0; padding-left: 0; }
/* yes -> follow-ups under a Yes / No question */
.sc-fu { margin-top: 8px; padding: 8px 12px 10px; border-left: 3px solid var(--line); background: var(--head); border-radius: 0 8px 8px 0; }
.sc-fu-cap { font-size: 13px; font-weight: 600; color: var(--ink2); }
.sc-fu-opts { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.sc-fu-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 6px; }
.sc-fu-row .grow { flex: 1 1 220px; min-width: 0; }
.sc-fu-l { flex: 0 1 150px; min-width: 0; }
/* starters */
.sc-empty-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sc-starter-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--ink2);
  background: var(--ok-bg); border-radius: var(--r-ctl); padding: 2px 4px 2px 14px; }
.dialog.st { width: 680px; }
.st-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; margin-top: 12px; }
.st-card { border: 1px solid var(--line2); border-radius: var(--r-ctl); padding: 12px 14px; }
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.st-head .nm { font-weight: 700; }
.st-head .sub { font-size: 13px; color: var(--ink2); }
.st-card summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--accent); }
.st-body { font-size: 14px; }
.st-body ul { margin: 2px 0 8px; padding-left: 18px; }
.st-body li { margin: 3px 0; }
.st-cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); margin-top: 6px; }
.st-src { font-size: 12px; color: var(--warn-tx); }
.sc-qrow { border-top: 1px solid var(--line2); padding: 10px 14px; }
.sc-qmain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* The question's text gets the full line; its type, Required and the
   move/remove buttons sit on the line under it. */
.sc-qmain input[type=text] { flex: 1 1 100%; width: auto; min-width: 0; }
.sc-qmain select { width: auto; }
.sc-req { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.sc-req input { width: 20px; height: 20px; accent-color: var(--accent); }
.sc-qacts { display: inline-flex; margin-left: auto; }
.sc-qopts { margin-top: 8px; }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.sc-empty {
  background: var(--surface); border: 2px dashed var(--line); border-radius: var(--r-card);
  padding: 28px; text-align: center; margin-bottom: 20px;
}
.sc-empty p { margin: 0 0 16px; }
.sc-preview { background: var(--head); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 14px; }
.pv-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px;
}
.pv-title { font-weight: 700; }
.pv-cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); margin-top: 6px; }
.pv-box { border: 1px solid var(--line2); border-radius: var(--r-ctl); padding: 8px 10px; }
.pv-trap { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pv-step { display: inline-flex; gap: 4px; align-items: center; }
.pv-step span {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pv-step b { width: 20px; }
.pv-nm { font-weight: 600; }
.pv-sub { font-size: 12px; color: var(--ink2); }
.pv-note { font-size: 12px; color: var(--warn-tx); background: var(--warn-bg); border-radius: 6px; padding: 4px 8px; }
.pv-req { color: var(--danger); }
.pv-dim { color: var(--ink2); }
/* catalog picker */
.dialog.pk { width: 660px; }
.pk-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pk-bar select { width: auto; min-width: 150px; }
.pk-bar > .grow { flex: 1 1 100%; }   /* 4d: the search full width, under the crop */
.pk-results.stale { opacity: .45; pointer-events: none; }
.pk-results { margin-top: 12px; max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.pk-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line2);
  border-radius: var(--r-ctl); padding: 10px 12px; min-height: 52px; cursor: pointer;
}
.pk-row:hover:not(:disabled) { border-color: var(--accent); background: var(--ok-bg); }
.pk-row:disabled { cursor: default; color: var(--ink2); }
.pk-row .nm { display: block; font-weight: 600; }
.pk-row .sub { display: block; font-size: 13px; color: var(--ink2); }
/* pest list */
.pl-name { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-align: left; }
.pl-name:hover { text-decoration: underline; }
.sc-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; }
.pe-set { border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; margin: 14px 0 0; }
.pe-set legend { font-weight: 600; padding: 0 6px; }
.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pe-check { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.pe-check legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.pe-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; }
.pe-pick:has(input:checked) { border-color: var(--accent); background: var(--ok-bg); font-weight: 600; }
.pe-pick input { width: 18px; height: 18px; accent-color: var(--accent); }
.pe-wide { grid-column: 1 / -1; }
.pe-thr { display: flex; gap: 8px; }
.pe-thr input { flex: 0 1 140px; min-width: 0; }
.pe-thr select { flex: 1 1 auto; width: auto; min-width: 0; }
.pe-other { margin-top: 8px; }
.pe-other .note { font-size: 12px; margin-top: 2px; }
.name-pre { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); }
.name-pre:focus-within { outline: 2px solid var(--accent); border-color: var(--accent); }
.name-pre .pre { display: inline-flex; align-items: center; padding: 0 0 0 14px; font-size: 20px; font-weight: 700;
  color: var(--ink2); white-space: nowrap; }
.name-pre input { border: 0; outline: 0; padding-left: 8px; min-width: 0; }
.name-pre input:focus { outline: 0; }
.pl tr.has-note td { border-bottom: 0; }
.pl tr.pl-note td { padding-top: 0; font-size: 13px; color: var(--ink2); }

/* Tablet portrait-ish / small laptop: list + editor, preview under the editor. */
@media (max-width: 1199px) {
  .sc-grid { grid-template-columns: 220px minmax(0, 1fr); }
}
/* Portrait (bottom bar): one column, the template list scrolls sideways. */
@media (max-width: 899px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-list { position: static; grid-column: auto; }
  .sc-pvpanel, .pr-panel { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
  .sc-list { padding: 12px 10px 8px; }
  .sc-list-items { flex-direction: row; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .tpl-item, .sc-list .tpl-new { flex: 0 0 auto; max-width: 260px; margin-top: 0; }
}
@media (max-width: 600px) {
  .sc-ehead { flex-wrap: wrap; }
  .sc-ehead .btn { width: 100%; }
  .sc-trow.hd { display: none; }
  .sc-pbtn { grid-template-columns: 1fr; }
  .st-head { flex-wrap: wrap; }
  .st-head .btn { width: 100%; }
  .sc-trow { grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 8px; }
  .sc-trow > span { grid-column: 1; }
  .sc-trow > .icon-btn { grid-column: 2; grid-row: 1 / span 3; }
  .pe-grid { grid-template-columns: 1fr; }
}

/* ── search fields (4d): one style for every search or filter box in /org ──
   Full width, 44px, 16px text (no iOS zoom), a magnifier, a clear × (the
   browser's own search cancel, drawn as an ×), the green focus ring and no
   square outline. Used on <input type="search" class="sfield">. */
input.sfield {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; box-sizing: border-box;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    no-repeat 13px 50% / 18px 18px;
  border: 1px solid var(--line); border-radius: 12px; padding: 0 12px 0 40px; outline: none;
}
input.sfield::placeholder { color: var(--ink3); }
input.sfield:focus, input.sfield:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
input.sfield::-webkit-search-decoration { -webkit-appearance: none; }
input.sfield::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-right: -2px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='7' y1='7' x2='17' y2='17'/%3E%3Cline x1='17' y1='7' x2='7' y2='17'/%3E%3C/svg%3E") no-repeat 50% / 16px 16px;
}
/* in a picker the search stays put while the list under it scrolls */
.dialog input.sfield, .sheet input.sfield { position: sticky; top: 0; z-index: 2; }
/* a picker card never shrinks below its two lines (a flex column with a
   capped height squeezed them, clipping the second line at the border) */
.mxp-results > *, .pk-results > *, .rp-res > *, .nb-list > * { flex-shrink: 0; }

/* ── Notes page (4d) ─────────────────────────────────────────────────── */
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--accent); }
.nb-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.nb-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.nb-bar { display: flex; flex-direction: column; gap: 10px; }
.nb-seg { align-self: flex-start; border-radius: 16px; }
.nb-row2 { display: flex; gap: 8px; }
.nb-row2 select { flex: 0 0 auto; max-width: 42%; height: 44px; }
.nb-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 360px); min-height: 240px; overflow-y: auto; }
.nb-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.nb-item:hover { border-color: var(--accent); }
.nb-item[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.nb-item.unread .nb-text { font-weight: 700; }
.nb-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.nb-farm { font-weight: 700; }
.nb-when { margin-left: auto; color: var(--ink2); }
.nb-n { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--alert); color: #fff; font-size: 12px; text-align: center; }
.nb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-last, .nb-ctx { font-size: 13px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-thread { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; height: calc(100vh - 300px); min-height: 420px; }
.nb-pick { margin: auto; }
.nb-links { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nb-ctxbar { display: flex; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.nb-thread #notes-tab-content, .nb-thread #notes-container { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* the module's own list, header and tabs: this page has its own */
.nb-thread .np-head, .nb-thread .note-tabs, .nb-thread #notes-list-view { display: none !important; }
/* the thread sits in the pane, not as the module's own drawer over the page */
.nb-thread #notes-thread-view.active { position: static; flex: 1; min-height: 0; width: auto; z-index: auto;
  border-left: 0; box-shadow: none; animation: none; }
@media (max-width: 899px) {
  .nb-grid { grid-template-columns: 1fr; }
  .nb-list { max-height: none; }
  .nb-grid .nb-thread { display: none; }
  /* a thread open: full screen over the page, its own back button */
  .nb-grid.has-open .nb-side { display: none; }
  .nb-grid.has-open .nb-thread { display: flex; position: fixed; inset: 0; z-index: 40; height: auto; border-radius: 0; border: 0; }
}

/* The phone's More sheet (rail.js openMore) */
.more-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; }
.more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--surface);
  border-radius: 18px 18px 0 0; box-shadow: var(--pop-shadow);
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 80vh; overflow-y: auto; }
.more-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 10px; }
.more-items a, .more-teams button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px;
  padding: 0 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink);
  text-decoration: none; font: inherit; font-size: 16px; text-align: left; cursor: pointer; position: relative; }
.more-items a .ic { width: 22px; height: 22px; color: var(--ink2); }
.more-items a .rail-ct { position: static; margin-left: auto; }
.more-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2);
  margin: 14px 6px 2px; }
.more-teams .tile { width: 26px; height: 26px; font-size: 11px; }
@media (prefers-reduced-motion: no-preference) { .more-sheet { animation: more-up .18s ease-out; }
  @keyframes more-up { from { transform: translateY(30px); opacity: .6; } } }

/* ── portrait / narrow: rail → bottom bar, tables → stacked rows ───────── */
@media (max-width: 899px) {
  /* Bottom bar: every visible item (rail items + Settings) as equal columns. */
  .rail {
    inset: auto 0 0 0; width: auto; height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .rail .brand { display: none; }
  .rail-items, .rail-bottom { display: contents; }
  .rail-items a, .rail-bottom a { min-height: 60px; }
  /* 4d: the bar holds Today, Schedule, Reports, Notes and More; the rest (Farms,
     Library, Team, Settings) and the team switcher are in More's sheet */
  .rail .rail-more-item, .rail .rail-div { display: none; }
  .rail .rail-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 60px; border: 0; border-radius: 12px; background: none; color: var(--rail-tx); font: inherit;
    font-size: 12px; font-weight: 500; cursor: pointer; }
  .main { margin-left: 0; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
  .top { padding: 0 12px; }
  .user-name { display: none; }
  .view { padding: 20px 16px 32px; }
  .two { grid-template-columns: 1fr; }

  /* tables: stacked cards only on a phone now (Style A, below) */
}
/* ── compact laptop layout (2026-10-13) ─────────────────────────────────
   Below 1100 px of height, with the rail on the left (900 px and wider):
   a 56 px top bar, titles and subtitles on one line, the farm's name, chip
   and band on one row, the farm tabs stuck under the top bar, about a third
   less space between header, tabs and the first card. Tall screens and the
   bottom-bar layout (portrait, phone) keep the look above. */
@media (min-width: 900px) and (max-height: 1099px) {
  :root { --top-h: 56px; }
  .switcher { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .user { min-height: 44px; }
  .avatar { width: 32px; height: 32px; }
  .view { padding-top: 18px; }
  .pg-head { margin-bottom: 14px; align-items: center; }
  .pg-head > div:first-child { display: flex; align-items: baseline; gap: 2px 14px; flex-wrap: wrap; min-width: 0; }
  .pg-head h1 { font-size: 23px; }
  .pg-sub { margin-top: 0; }
  .crumb { margin-bottom: 0; font-size: 13px; }
  .crumb a { min-height: 28px; }
  .farm-head { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
  .farm-title h1 { font-size: 23px; }
  .farm-band { margin: 0; }
  .tabs { margin: 8px 0 16px; }
  .tabs a { min-height: 44px; }
}
@media (min-width: 900px) and (max-height: 899px) {
  .pg-sub { display: none; }
}
@media (max-width: 520px) {
  .pg-head h1 { font-size: 24px; }
  .pg-acts { width: 100%; }
  .pg-acts .btn { flex: 1; }
  .switcher { max-width: 64vw; }
}

/* ══ Style A (round 7, Casey 2026-10-13) ════════════════════════════════
   One set of pieces for every /org page, drawn by static/org/ui.js
   (OrgUI.band / tileRow / sect / dash / chip): a dark green header band,
   white stat tiles overlapping its bottom edge, section headings with a
   rule, tables as floating pill rows, green / amber status chips, a grey
   "—" for empty values. The visit keeps its own compact header; embedded
   grower pages (Map, Log, IPM) keep their look inside their frames. */
.band-wrap { margin: 0 0 18px; }
.band {
  background: linear-gradient(135deg, var(--band1), var(--band2)); color: var(--band-tx);
  border-radius: var(--r-card); padding: 20px 26px 22px;
}
.band.has-tiles { padding-bottom: 56px; }
.band h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--band-tx); overflow-wrap: anywhere; }
.band-s { margin: 4px 0 0; color: var(--band-tx2); font-size: 14px; flex-basis: 100%; }   /* under the title; beside it on a short laptop */
.band-crumb { font-size: 13px; color: var(--band-tx2); margin-bottom: 2px; }
.band-crumb a { color: var(--band-tx2); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.band-crumb a:hover { color: var(--band-tx); text-decoration: underline; }
.band-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.band-t { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.band-acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.band .btn { background: var(--band-btn); border-color: var(--band-btn); color: var(--band-btn-tx); }
.band .btn:hover { background: var(--band-btn-hover); border-color: var(--band-btn-hover); color: var(--band-btn-tx); }
.band .btn-link { background: none; border: 0; color: var(--band-tx); }
.band .chip-mute { background: rgba(255, 255, 255, .16); color: var(--band-tx); }
.stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: -40px 22px 0; }
.stats.t5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats.t1 { grid-template-columns: minmax(0, 1fr); max-width: 280px; }
.stat { background: var(--surface); border-radius: var(--r-tile); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.stat b { display: block; font-size: 26px; line-height: 1.15; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { display: block; font-size: 12px; color: var(--ink2); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.w b { color: var(--warn-strong); }
.stat small { display: block; font-size: 12px; color: var(--ink2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the Library's tabs: pills in the band beside the title (slice 4b,
   mixes-library-mock; beside rather than under it so the band keeps round 7's
   laptop height), wrapping under the title on a phone */
.lib-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  color: var(--band-tx2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.lib-tabs a:hover { color: var(--band-tx); background: rgba(255, 255, 255, .08); }
.lib-tabs a[aria-current="page"] { background: rgba(255, 255, 255, .16); color: var(--band-tx); font-weight: 600; }
.lib-line { margin: 0 0 14px; }
/* the Library read-only (scouts, viewers): no way to add, save, remove or reorder */
.view.lib-ro :is([data-action="tpl-new"], [data-action="starter-open"], #tpl-save, [data-action="tpl-remove"],
  [data-action="picker-open"], [data-action="pest-custom"], .sc-custom, .sc-starter-cta, .sc-add-q, .sec-foot,
  [data-action="tpl-drop-trap"], [data-action="tpl-drop-pest"], [data-action="q-drop"], [data-action="q-move"]) { display: none !important; }

.sect { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; min-height: 32px; }
.sect h2 { margin: 0; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.sect-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.sect-n { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.sect hr { flex: 1; min-width: 24px; border: 0; border-top: 2px solid var(--line); margin: 0; }
.sect-acts { display: inline-flex; gap: 8px; align-items: center; }
.dash { color: var(--ink3); }
.tip { font-size: 12.5px; color: var(--ink2); margin-top: 4px; font-weight: 400; }

/* Tables: floating rows. Each row a white pill, 6 px apart, the header row
   above in small uppercase grey. A card that only frames a table melts into
   the page so the pills float on it. */
table.dt { border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; }
.dt th { background: none; border: 0; font-size: 11px; letter-spacing: .06em; padding: 6px 14px 0; color: var(--ink2); }
.dt td { background: var(--surface); border: 0; padding: 12px 14px; }
.dt tr td:first-child { border-radius: 10px 0 0 10px; }
.dt tr td:last-child { border-radius: 0 10px 10px 0; }
.dt tr td:only-child { border-radius: 10px; }
.dt tr.clickable:hover td { background: var(--hl-bg); }
.dt tr:last-child td { border-bottom: 0; }
.tbl-sticky .dt th { background: var(--bg); box-shadow: none; padding-bottom: 6px; }
.card:has(> .tbl-wrap) { background: none; border: 0; }
.card:has(> .tbl-wrap) > .card-head { padding: 6px 0 4px; }
.card:has(> .tbl-wrap) > .card-foot { border-top: 0; padding: 6px 0 0; }
.card:has(> .tbl-wrap) > .sect { margin-top: 6px; }

/* the visit list, Today's rows: the same pill */
.frow { border: 0; border-radius: 10px; box-shadow: var(--shadow); }

/* ── compact laptop height: the band stays short, the first row in view ── */
@media (min-width: 900px) and (max-height: 1099px) {
  .band-wrap { margin-bottom: 12px; }
  .band { padding: 12px 22px 14px; }
  .band.has-tiles { padding-bottom: 44px; }
  .band h1 { font-size: 23px; }
  .band-t { align-items: baseline; }
  .band-s { flex-basis: auto; margin: 0; }
  .band-t .chip { align-self: center; }
  .band-crumb a { min-height: 22px; }
  .stats { margin-top: -34px; gap: 12px; }
  .stat { padding: 9px 14px; }
  .stat b { font-size: 22px; }
  .sect { margin: 12px 0 6px; }
}

/* ── tablet / portrait ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .stats.t4, .stats.t5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── phone: a title strip, one scrolling row of tiles, stacked cards ───── */
@media (max-width: 600px) {
  .band-wrap { margin: -20px -16px 14px; }
  .band, .band.has-tiles { border-radius: 0; padding: 12px 16px; }
  .band h1 { font-size: 20px; }
  .band-s { display: none; }
  .band-s:has(.band-dir) { display: block; margin-top: 2px; }   /* a farm's Directions stays on the phone */
  .band-acts { width: 100%; margin-left: 0; }
  .band-acts .btn { flex: 1; }
  .stats, .stats.t2, .stats.t3, .stats.t4 {
    display: flex; gap: 10px; margin: 10px 0 0; padding: 0 16px 4px; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 auto; min-width: 132px; max-width: 70vw; scroll-snap-align: start; padding: 10px 14px; }
  .stat b { font-size: 22px; }

  table.stack thead { display: none; }
  table.dt.stack { border-spacing: 0; margin-top: 0; }
  table.stack, table.stack tbody { display: flex; flex-direction: column; gap: 6px; }
  table.stack tr {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
    padding: 14px 16px; background: var(--surface); border-radius: 10px;
  }
  table.stack td, table.stack tr td:first-child, table.stack tr td:last-child {
    display: block; padding: 0; border: 0; background: none; border-radius: 0;
  }
  table.stack tr.clickable:hover td { background: none; }
  table.stack td.c-first { grid-column: 1; }
  table.stack td.c-chip { grid-column: 2; grid-row: 1; justify-self: end; }
  table.stack td.c-line2 { grid-column: 1 / -1; }
  table.stack td.c-line2:empty { display: none; }
  /* the Grower cell on a phone card: its chip top-right, its action or shares the full width under the name */
  table.stack td.c-grower { display: contents; }
  table.stack td.c-grower::before { content: none !important; }
  table.stack td.c-grower > .gw-chip { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  table.stack td.c-grower > .gw-line, table.stack td.c-grower > .row-acts { grid-column: 1 / -1; margin-top: 0; }
  table.stack td[data-label]:not(:empty)::before {
    content: attr(data-label) " "; display: inline-block; min-width: 96px; color: var(--ink2); font-size: 13px;
  }
}

/* ── phone polish (2026-10-14): under 600 px only; desktop and tablet unchanged ──
   Stat tiles: one summary line under the title ("2 farms · 5 acres · ..."); each
   item is still the tile element, so a tap does what the tile's tap does (a link,
   or the Reports / Products tile buttons). Sideways rows (farm tabs, Library tabs,
   filter pills) scroll on one line and fade at the edge that has more (fade-l /
   fade-r, set by ui.js). The top bar's team name truncates beside its arrow; the
   ⋯ on a farm's header and on each farm card sits top right. */
@media (max-width: 599.98px) {
  .stats, .stats.t2, .stats.t3, .stats.t4 {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 8px 0 0; padding: 0 16px;
    overflow: visible; scroll-snap-type: none;
  }
  .stat, a.stat, .stat[role="button"] {
    flex: 0 0 auto; min-width: 0; max-width: 100%; padding: 4px 0; background: none; box-shadow: none;
    border: 0; border-radius: 0; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
  }
  a.stat:hover, .stat[role="button"].on { border: 0; }
  .stat:not(:last-child) { margin-right: 8px; }
  .stat:not(:last-child)::after { content: "·"; margin-left: 4px; color: var(--ink3); }   /* ends a line, never starts one */
  .stat b { display: inline; font-size: 14px; font-weight: 700; color: var(--ink); }
  .stat span { display: inline; font-size: 14px; text-transform: lowercase; letter-spacing: 0; color: var(--ink2);
    overflow: hidden; text-overflow: ellipsis; }
  .stat span.keep-case { text-transform: none; }
  .stat small { display: none; }
  .stat.w b { color: var(--warn-strong); }
  a.stat b, .stat[role="button"] b { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .stat[role="button"].on b { text-decoration-thickness: 2px; }

  .tabs, .lib-tabs { flex-wrap: nowrap; }
  .tabs a, .lib-tabs a { flex: 0 0 auto; white-space: nowrap; }
  .pr-pills { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pr-pills::-webkit-scrollbar { display: none; }
  .pr-pill { flex: 0 0 auto; }
  .fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
  .fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

  .top > div:first-child { min-width: 0; }
  .switcher { max-width: calc(100vw - 96px); min-width: 0; gap: 10px; }
  .switcher > svg { flex-shrink: 0; }
  .sw-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; }
  .sw-name { display: block; min-width: 0; }
  .sw-role { flex-shrink: 0; }

  .band-row:has(.btn-more) { flex-wrap: nowrap; align-items: flex-start; }
  .band-row:has(.btn-more) .band-t { flex: 1 1 auto; }
  .band-acts:has(> .btn-more:only-child) { width: auto; margin-left: auto; }
  .band-acts .btn-more { flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; background: rgba(255, 255, 255, .16); border-color: transparent; color: var(--band-tx); }
  section[aria-labelledby="farms-h"] table.stack tr:has(> td.c-acts) { grid-template-columns: 1fr auto auto; }
  section[aria-labelledby="farms-h"] table.stack td.c-acts { grid-column: 3; grid-row: 1; align-self: start; }
  section[aria-labelledby="farms-h"] table.stack td.c-acts .btn { min-height: 36px; padding: 0 10px; }
}

/* ── the Farms list's ⋯ menu (mock-farm-menu.html; org.js openFarmListMenu) ── */
.fm { position: fixed; z-index: 55; width: 300px; max-width: calc(100vw - 16px); overflow-y: auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--pop-shadow); padding: 6px; }
.fm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap;
  padding: 8px 10px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.fm-h small { font-weight: 500; font-size: 13px; color: var(--ink2); }
.fm-h .fm-managed { flex-basis: 100%; }
.fm-grp { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); padding: 8px 10px 2px; }
.fm-it { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 36px; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 15px; line-height: 1.35; text-align: left;
  text-decoration: none; cursor: pointer; }
.fm-it:hover, .fm-it:focus-visible { background: var(--head); outline: none; }
.fm-it:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.fm-it .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ink2); }
.fm-tx { flex: 1; min-width: 0; }
.fm-tx small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--ink2); }
.fm-tag { flex: none; align-self: center; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; background: var(--ok-bg); color: var(--ok-tx); }
.fm-tag.draft { background: var(--warn-bg); color: var(--warn-tx); }
.fm-it.danger, .fm-it.danger .ic { color: var(--danger); }
.fm-it.danger:hover, .fm-it.danger:focus-visible { background: var(--bad-bg); }
.fm-it.dis { opacity: .45; cursor: default; }
.fm-it.dis:hover { background: none; }
.fm-sep { height: 1px; margin: 6px 4px; background: var(--line); }
[data-action="farm-list-menu"].on { border-color: var(--accent); background: var(--head); }
.fm-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.fm.fm-sheet { left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh; overflow-y: auto; z-index: 61;
  border-radius: 18px 18px 0 0; padding: 10px 10px calc(18px + env(safe-area-inset-bottom, 0px)); }
.fm-sheet .fm-it { min-height: 52px; padding: 12px 10px; font-size: 16px; align-items: center; }
.fm-sheet .fm-it .ic { width: 22px; height: 22px; margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .fm-sheet { animation: more-up .18s ease-out; } }
/* Farms list: a farm's scout chips and + Scout stay on one line; a long name ends in … */
section[aria-labelledby="farms-h"] td.c-scouts .chips { flex-wrap: nowrap; min-width: 0; }
section[aria-labelledby="farms-h"] td.c-scouts .chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
section[aria-labelledby="farms-h"] td.c-scouts .chip-open,
section[aria-labelledby="farms-h"] td.c-scouts .chip-txt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
section[aria-labelledby="farms-h"] td.c-scouts .chip .icon-btn,
section[aria-labelledby="farms-h"] td.c-scouts .chip-add { flex: none; }
@media (min-width: 900px) { section[aria-labelledby="farms-h"] td.c-scouts { width: 30%; max-width: 0; } }