/* Pacific Alpacas platform — design system
   Brand palette from pacificalpacas.com: sage green accents, tan/camel alpaca
   mark, charcoal serif display type on white, airy surfaces.
   (Token names keep the historical green/gold scale names so every consumer
   rethemes automatically; the VALUES are the website's sage + tan.) */

:root {
  --green-950: #222b1a;
  --green-900: #2e3a23;
  --green-800: #46603a;
  --green-700: #5c7c49; /* primary — 4.6:1 on white */
  --green-600: #6f9459;
  --green-500: #8caf72; /* brand sage (site buttons) */
  --green-100: #e4ecd9;
  --green-50:  #f2f6ec;
  --gold-500:  #b0854b; /* alpaca tan/camel from the site logo */
  --gold-text: #795727;
  --gold-100:  #f3ead8;
  --red-600:   #b83b32;
  --red-100:   #fbe9e7;
  --blue-600:  #2c6e9e;
  --blue-100:  #e3eef6;
  --bg:        #f7f6f2;
  --card:      #ffffff;
  --border:    #e8e5dd;
  --border-strong: #cfc9bb;
  --text:      #3b3b3b;  /* site charcoal */
  --muted:     #6f6f6f;  /* site body gray */
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(45, 40, 25, 0.05), 0 4px 14px rgba(45, 40, 25, 0.05);
  --focus: #46603a;
  --chart-series: #5c7c49;
  --chart-text: #3b3b3b;
  --chart-muted: #6f6f6f;
  --chart-grid: #e9e6df;
  --sidebar-w: 248px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Site display serif (LUXURY FOR GENERATIONS / Our Products) */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  /* Site wordmark geometric sans (Pacific Alpacas®) */
  --font-brand: "Questrial", "Century Gothic", "Futura", "Trebuchet MS", var(--font);

  /* ---- pacificalpacas.com brand, used on the signed-out pages ----
     The marketing site sets headings in Quattrocento and body copy in Nunito
     Sans, buttons in sage #93b786 and links in tan #a57041.

     Two of those are kept for decoration only. White on #93b786 measures
     2.24:1 and tan link text on the warm ground 3.96:1, both under the 4.5:1
     minimum, so text-bearing elements use the darker relatives below while the
     exact brand sage carries the large flat areas where nothing has to be read
     against it. The page still reads as the brand; the words stay legible. */
  --site-sage: #93b786;         /* exact brand sage — decorative fills only */
  --site-sage-dark: #87a87a;    /* exact brand sage hover — decorative only */
  --site-sage-ink: #5c7c49;     /* 4.74:1 with white — button and badge fills */
  --site-tan: #a57041;          /* exact brand tan — decorative only */
  --site-tan-ink: #96663a;      /* 4.65:1 on the warm ground — link text */
  --site-paper: #faf8f3;
  --font-site-display: "Quattrocento", Georgia, "Times New Roman", serif;
  --font-site-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
/* Display serif for page + section headings, echoing the website */
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
small, .muted { color: var(--muted); }
hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
code { background: var(--green-50); padding: .1em .35em; border-radius: 4px; font-size: .92em; }

.skip-link {
  position: fixed; z-index: 1000; top: 8px; left: 8px;
  padding: 9px 13px; border-radius: var(--radius-sm);
  background: var(--green-900); color: #fff; font-weight: 700;
  transform: translateY(-150%); transition: transform .12s ease;
}
.skip-link:focus { color: #fff; transform: translateY(0); text-decoration: none; }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  /* White, airy nav like the website header */
  background: var(--card);
  border-right: 1px solid var(--border);
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.sidebar .brand {
  display: grid; gap: 5px;
  padding: 18px 16px 14px;
  color: var(--text);
}
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand-wordmark {
  display: block;
  width: 100%;
  max-width: 205px;
  height: auto;
  aspect-ratio: 513 / 132;
  border-radius: 3px;
  object-fit: contain;
  object-position: left center;
}
.sidebar .brand .brand-sub {
  display: block;
  width: 100%;
  color: var(--gold-text);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.sidebar .sidebar-close { display: none; }
.sidebar nav {
  padding: 6px 10px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar .nav-section {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); padding: 14px 10px 4px;
}
.sidebar .platform-navigation { margin: 2px 0 6px; }
/* Dashboard sits above the first group, so the rule that would normally only
   divide two groups has to divide it from the group below as well. */
.sidebar .platform-navigation > a.nav-item + .platform-nav-group,
.sidebar .platform-nav-group + .platform-nav-group {
  border-top: 1px solid var(--border);
  margin-top: 9px;
  padding-top: 8px;
}
.sidebar .platform-nav-group .nav-section {
  padding-top: 3px;
  padding-bottom: 5px;
  font-weight: 700;
}
.sidebar .platform-navigation a.nav-item { min-height: 44px; }
/* Entering a farm swaps the lower half of the nav wholesale. The rule and the
   named area header mark where membership ends and the tenant workspace
   begins, which is otherwise only inferable from the link labels. */
.sidebar .nav-farm-head {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 6px;
}
.sidebar .nav-section-area { color: var(--green-800); font-weight: 700; }
.sidebar a.nav-back {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin: 6px 0 2px;
  min-height: 38px; border-radius: 8px;
  font-size: .82rem; font-weight: 600; color: var(--muted);
}
.sidebar a.nav-back:hover { background: var(--green-50); color: var(--green-800); text-decoration: none; }
.sidebar a.nav-back svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar a.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0;
  min-height: 42px; color: var(--text); border-radius: 8px; font-weight: 500;
}
.sidebar a.nav-item:hover { background: var(--green-50); text-decoration: none; color: var(--green-800); }
.sidebar a.nav-item.active { background: var(--green-100); color: var(--green-900); font-weight: 600; }
.sidebar a.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; color: var(--green-700); }
.sidebar .sidebar-footer { padding: 12px 16px; font-size: .72rem; color: var(--muted); border-top: 1px solid var(--border); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  position: sticky; top: 0; z-index: 40;
}
.topbar .farm-name { font-weight: 650; }
.topbar .spacer { flex: 1; }
.topbar form.topsearch { flex: 0 1 340px; }
.topbar .user-menu { position: relative; }
.topbar .user-menu > summary {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

.impersonation-banner {
  background: var(--gold-500); color: #3b2c07;
  padding: 7px 22px; font-weight: 600; font-size: .85rem;
  display: flex; align-items: center; gap: 12px;
}
.impersonation-banner form { margin-left: auto; }
.trial-banner {
  background: var(--blue-100); color: var(--blue-600);
  padding: 7px 22px; font-size: .85rem; font-weight: 550;
}
.trial-banner a { font-weight: 700; }

.content { padding: clamp(14px, 2vw, 24px); max-width: 1280px; width: 100%; margin: 0 auto; }
.content-narrow { width: min(100%, 760px); margin-inline: auto; }
.content-medium { width: min(100%, 980px); margin-inline: auto; }
.welcome-card {
  background: linear-gradient(120deg, var(--green-50), var(--card));
  border-color: var(--green-100);
}
.print-surface {
  --text: #3b3b3b; --muted: #6f6f6f; --card: #fff;
  --border: #e8e5dd; --border-strong: #cfc9bb;
  --chart-text: #3b3b3b; --chart-muted: #6f6f6f; --chart-grid: #e9e6df;
  color: var(--text); background: #fff; color-scheme: light;
}

.page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .titles { flex: 1; min-width: 220px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-sub { color: var(--muted); font-size: .9rem; }
.page-sub, .card, dd { overflow-wrap: anywhere; }
.one-time-credentials { border-color: var(--gold-500); }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.card-pad { padding: 18px 20px; }
.card h2.card-title { font-size: .95rem; margin: 0 0 12px; }
.lifecycle-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-left: 4px solid var(--red-600);
}
.lifecycle-form-card { max-width: 720px; }
@media (max-width: 660px) { .lifecycle-notice { align-items: flex-start; flex-direction: column; } }
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.card-head h2 { margin: 0; font-size: .95rem; }
.card-head .spacer { flex: 1; }

.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid > .card { margin-bottom: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* minmax(0,…) matters: a bare 1fr means minmax(auto,1fr), and "auto" lets a
   wide table inflate its card past the phone's screen instead of scrolling
   inside .table-wrap — which also shoves anything viewport-anchored (the
   report button) outside the initial view. */
@media (max-width: 660px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.split-layout { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); align-items: start; }
.split-layout-reverse { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); }
.split-layout-balanced { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.split-layout > :only-child,
.split-layout-reverse > :only-child,
.split-layout-balanced > :only-child { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .split-layout, .split-layout-reverse, .split-layout-balanced { grid-template-columns: 1fr; }
}

/* Stat tiles */
.stat { padding: 16px 18px; }
.stat-label, .stat .stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; }
.stat .stat-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.stat .stat-sub { font-size: .8rem; color: var(--muted); }
/* A tile that navigates has to look different from one that just reports a
   number. These carried only `cursor: pointer`, so the only way to discover
   they were links was to hover the right pixel. */
a.stat-link {
  display: flex; flex-direction: column; color: var(--text); cursor: pointer;
  border-color: var(--border);
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
a.stat-link .stat-go {
  margin-top: auto; padding-top: 10px;
  font-size: .8rem; font-weight: 650; color: var(--green-700);
}
a.stat-link:hover {
  color: var(--text); text-decoration: none;
  border-color: var(--green-500);
  box-shadow: 0 2px 10px rgba(45, 40, 25, .10);
}
a.stat-link:hover .stat-go { text-decoration: underline; }
a.stat-link:active { transform: translateY(1px); }
a.stat-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Five tiles in a fixed three-column grid left a hole on the second row. */
.grower-tiles {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.grower-tiles .card { margin: 0; }

.grower-details-actions {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.grower-details-actions p { margin: 8px 0 0; font-size: .82rem; }

.grower-soon-list { margin: 10px 0 14px; padding-left: 18px; font-size: .92rem; }
.grower-soon-list li { padding: 3px 0; }
.grower-soon .card-head .badge { flex: none; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
table.data {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
table.data th {
  text-align: left; font-weight: 650; color: var(--muted);
  font-size: .73rem; text-transform: uppercase; letter-spacing: .07em;
  padding: 9px 12px; border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data td a, table.data td code { overflow-wrap: anywhere; word-break: break-word; }
table.data tr:last-child td { border-bottom: none; }
table.data tr.clickable:hover { background: var(--green-50); cursor: pointer; }
table.data td.num, table.data th.num { text-align: right; }
table.data .row-actions { white-space: nowrap; text-align: right; }

/* Admin-issued user identifiers. */
.pag-number-controls { display: flex; align-items: center; gap: 6px; min-width: 174px; flex-wrap: wrap; }
.pag-number-form { display: flex; align-items: center; gap: 6px; }
/* Save/Issue/Remove are short enough to break mid-word when the row is tight,
   which reads as a rendering fault rather than a wrap. */
.pag-number-controls .btn { white-space: nowrap; }
.pag-number-input { width: 96px !important; min-width: 96px; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* ---------- Forms ---------- */
form .field { margin-bottom: 13px; }
/* .field-label is for the handful of cells whose content is a link or a
   readout rather than a control — a <label> there points at nothing. */
label, .field-label { display: block; font-weight: 600; font-size: .8rem; margin-bottom: 4px; color: #4c4c46; }
label .req { color: var(--red-600); }
.field-disabled { opacity: .62; }
/* Listing the types individually is what keeps a checkbox from being stretched
   to the width of a text box — but it also means a type left off the list gets
   no styling at all. `tel` was missing, which is why a phone number sat in a
   raw browser-default box half the height of every field beside it. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="time"], input[type="month"],
input[type="date"], input[type="datetime-local"], input[type="url"], input[type="search"], input[type="file"], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: inherit;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--green-500);
}
textarea { min-height: 84px; resize: vertical; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* One grid for a whole form section rather than one per row.
   .field-row makes each row its own grid, so a row of four boxes and a row of
   one produced a narrow field and a field the width of the card — the reason
   the animal form looked ragged. Sharing a single grid means every control in
   the section lines up in the same columns however many are in it. */
.form-grid {
  display: grid;
  gap: 13px 14px;
  /* auto-fill, not auto-fit: auto-fit collapses the tracks nothing landed in,
     which is exactly how a lone trailing field grows to fill the row again.
     230px lands on four columns at every card width the app uses, so a
     .field-wide is reliably half a row and a .field-full is all of it. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
}
.form-grid > .field { margin-bottom: 0; min-width: 0; }
/* Save and Cancel at the end of a long form. */
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.form-grid > .field-wide { grid-column: span 2; }
.form-grid > .field-full { grid-column: 1 / -1; }
/* One column below this, where spanning two of one is meaningless and would
   otherwise conjure a second, off-screen column. */
@media (max-width: 700px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid > .field-wide, .form-grid > .field-full { grid-column: auto; }
  /* The offset exists to drop a checkbox level with the inputs beside it.
     Stacked, there is nothing beside it and the gap is just a hole. */
  .form-grid .form-checkbox-offset { margin-top: 0; }
}

/* .btn and friends set display, which outranks the [hidden] attribute's own
   UA rule — so hiding one from script silently did nothing. */
[hidden] { display: none !important; }
.checkbox-line { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.checkbox-line input { width: auto; }
.form-checkbox-offset { margin-top: 26px; }
.field-hint { font-size: .76rem; color: var(--muted); margin-top: 3px; }
fieldset {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 0 0 14px;
}
legend { font-size: .78rem; font-weight: 700; color: var(--green-700); padding: 0 6px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--green-700);
  color: #fff; font: inherit; font-weight: 600; font-size: .86rem;
  cursor: pointer; text-decoration: none;
  transition: background .12s ease;
}
.btn:hover { background: var(--green-800); text-decoration: none; color: #fff; }
.btn.secondary { background: #fff; color: var(--green-800); border-color: var(--border-strong); }
.btn.secondary:hover { background: var(--green-50); }
.btn.danger { background: #fff; color: var(--red-600); border-color: var(--red-600); }
.btn.danger:hover { background: var(--red-100); }
.btn.gold { background: var(--gold-500); color: #3b2c07; }
.btn.small { min-height: 36px; padding: 5px 10px; font-size: .78rem; }
.btn.block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-inline-form { display: inline; }

/* ---------- Badges & flags ---------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--green-100); color: var(--green-800);
  white-space: nowrap;
}
.badge.gray { background: #eceff0; color: #4c5a55; }
.badge.gold { background: var(--gold-100); color: #8a6414; }
.badge.red { background: var(--red-100); color: var(--red-600); }
.badge.blue { background: var(--blue-100); color: var(--blue-600); }
.flag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.flag-red { background: #d64541; } .flag-green { background: #2f9e63; } .flag-yellow { background: #e8c13a; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.tabs a {
  padding: 8px 13px; font-weight: 600; font-size: .85rem;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
  white-space: nowrap;
}
.tabs a:hover { color: var(--green-700); text-decoration: none; }
.tabs a.active { color: var(--green-800); border-bottom-color: var(--green-600); }

/* ---------- Flash ---------- */
.flash-stack { margin-bottom: 16px; }
.flash {
  padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 8px;
  font-weight: 550; font-size: .88rem; border: 1px solid transparent;
}
.flash.success { background: var(--green-100); color: var(--green-800); border-color: #bfe3d8; }
.flash.error { background: var(--red-100); color: var(--red-600); border-color: #f2c9c4; }
.flash.info { background: var(--blue-100); color: var(--blue-600); border-color: #c8dded; }
.form-error-summary p { margin: 5px 0 0; }
.form-error-summary ul { margin: 5px 0 0; padding-left: 20px; }

/* ---------- Public product entry ---------- */
/* ---- signed-out pages: pacificalpacas.com typography ----
   Scoped to the public shell rather than applied through :root so the
   signed-in product keeps the type it was designed around. */
.public-home, .auth-wrap {
  font-family: var(--font-site-body);
  letter-spacing: .002em;
}
.public-home h1, .public-home h2, .public-home h3,
.auth-wrap h1, .auth-wrap h2 {
  font-family: var(--font-site-display);
  font-weight: 700; letter-spacing: -.005em;
}
.public-home {
  width: min(1180px, 100%); min-height: 100vh; margin: 0 auto;
  padding: 22px clamp(18px, 4vw, 52px) 32px;
  background: var(--site-paper);
}
.public-home a:not(.btn):not(.public-home-brand) {
  color: var(--site-tan-ink); text-underline-offset: 3px;
}
.site-eyebrow {
  margin: 0 0 14px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .19em; color: var(--site-tan-ink);
}
.site-section-head {
  margin: 40px 0 16px; font-size: clamp(1.5rem, 2.6vw, 2rem); scroll-margin-top: 20px;
}
.site-section-head::after {
  content: ""; display: block; width: 46px; height: 3px; margin-top: 10px;
  border-radius: 2px; background: var(--site-sage);
}
.badge.site-badge-live {
  background: var(--site-sage-ink); color: #fff; border-color: transparent;
}
.badge.site-badge-soon {
  background: transparent; color: var(--site-tan-ink);
  border: 1px solid color-mix(in srgb, var(--site-tan) 45%, transparent);
}
.public-home-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.public-home-brand {
  display: inline-flex; max-width: min(290px, 48vw); padding: 5px 7px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
}
.public-home-brand img { display: block; width: 100%; height: auto; }
.public-home-nav nav, .public-home-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.public-home-nav .theme-toggle { flex: none; }
.public-home-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 28px 0 22px; padding: clamp(30px, 6vw, 68px);
  padding-bottom: clamp(96px, 13vw, 150px);
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(160deg, #fff 0%, var(--site-paper) 45%, #f2f2e9 100%);
  box-shadow: var(--shadow);
}
.public-hero-copy { position: relative; z-index: 1; }
/* The hills sit behind the copy and bleed to the panel edges — the same
   pastoral motif the marketing site leads with. */
.public-hero-hills {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(90px, 14vw, 165px); display: block;
}
.public-home-hero h1 {
  max-width: 22ch; margin: 0 0 16px;
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1;
  text-wrap: balance;
}
.public-hero-lede {
  max-width: 60ch; margin: 0; font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.65; color: var(--muted);
}
.public-hero-note {
  max-width: 62ch; margin: 6px 0 0; font-size: .9rem; color: var(--muted);
  text-wrap: pretty;
}
.public-home-actions { margin: 24px 0 8px; }
.public-product-grid { align-items: stretch; }
.public-product-card {
  display: flex; flex-direction: column; margin: 0;
  border-top: 3px solid transparent;
}
.public-product-card.is-live { border-top-color: var(--site-sage-ink); }
.public-product-card.is-soon { border-top-color: color-mix(in srgb, var(--site-tan) 40%, transparent); }
.public-product-card h3 { font-size: 1.42rem; margin: 2px 0 0; }
.public-card-status { margin: 10px 0 12px; }
.public-card-list {
  margin: 0 0 14px; padding: 0; list-style: none;
  font-size: .92rem; color: var(--muted);
}
.public-card-list li { position: relative; padding: 3px 0 3px 18px; }
.public-card-list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--site-sage);
}
.public-card-terms { font-size: .84rem; margin-bottom: 16px; }
.public-product-card > .btn { margin-top: auto; }

.public-access-panel { margin: 0; }
.public-access-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.public-access-steps > li { display: flex; gap: 13px; align-items: flex-start; }
.public-access-steps h3 { margin: 0 0 5px; font-size: 1.06rem; }
.public-access-steps p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.public-access-step {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--site-sage-ink); color: #fff;
  font-size: .86rem; font-weight: 700; font-family: var(--font-site-body);
}
.public-access-foot {
  margin: 22px 0 0; padding-top: 16px; font-size: .86rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 860px) {
  .public-access-steps { grid-template-columns: 1fr; gap: 18px; }
}
.public-home-footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .84rem;
}
@media (max-width: 680px) {
  .public-home { padding-inline: 14px; }
  .public-home-nav { align-items: flex-start; }
  .public-home-nav nav { justify-content: flex-end; }
  .public-home-nav nav .secondary { display: none; }
  .public-home-brand { max-width: 175px; }
  /* Keep the bottom inset larger than the hills so the copy clears them —
     a plain `padding` shorthand here would reset the fluid value above. */
  .public-home-hero { padding: 28px 22px 104px; }
  .public-home-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; }
.auth-hero {
  /* Airy white-to-sage panel echoing the website's light editorial look */
  flex: 1.15; color: var(--text); position: relative; overflow: hidden;
  background: linear-gradient(170deg, #ffffff 0%, var(--green-50) 82%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 42px 48px;
}
.auth-hero .hero-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.auth-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.auth-hero-top .theme-toggle { flex: none; background: var(--card); }
.auth-hero .hero-brand:hover { text-decoration: none; }
.auth-hero .hero-brand img {
  display: block; width: min(100%, 360px); height: auto;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff;
}
.auth-hero .hero-brand-sub {
  color: var(--gold-text); font-size: .68rem; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase;
}
.auth-hero .auth-hero-heading { font-size: 2.3rem; max-width: 500px; margin-top: 22px; letter-spacing: .04em; }
.auth-hero p { color: var(--muted); max-width: 460px; }
.auth-hero .hero-hills { position: absolute; bottom: 0; left: 0; right: 0; opacity: .35; pointer-events: none; }
.auth-hero ul.hero-points { list-style: none; padding: 0; margin: 18px 0 0; color: var(--text); }
.auth-hero ul.hero-points li { padding: 5px 0 5px 28px; position: relative; }
.auth-hero ul.hero-points li::before {
  content: "✓"; position: absolute; left: 4px; color: var(--green-600); font-weight: 800;
}
.auth-panel {
  flex: 1; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 36px 24px;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card.auth-card-wide { max-width: 560px; }
.auth-card .card-pad { padding: 28px; }
.auth-card h1 { font-size: 1.3rem; margin-bottom: 4px; }
.auth-foot { text-align: center; margin-top: 14px; font-size: .86rem; color: var(--muted); }
@media (max-width: 900px) {
  .auth-wrap { flex-direction: column; }
  .auth-hero {
    flex: 0 0 auto; padding: 16px 24px 14px;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .auth-hero > div { width: 100%; }
  .auth-hero-top { align-items: center; }
  .auth-hero .hero-brand { align-items: center; }
  .auth-hero .hero-brand img { width: min(100%, 250px); }
  .auth-hero .auth-hero-heading, .auth-hero p, .auth-hero .hero-points, .auth-hero .hero-hills { display: none; }
  .auth-panel { flex: 1; padding-top: 24px; }
}

/* ---------- Misc ---------- */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 16px;
}
.filter-bar .field { margin: 0; min-width: 140px; flex: 0 1 auto; }
.filter-bar .field.grow { flex: 1 1 200px; }
.check-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 400; white-space: nowrap; padding: 8px 0;
}
.check-inline input { width: auto; margin: 0; }
/* A link styled as a button is a button. This rule is more specific than .btn,
   so without the exclusion every <a class="btn"> in a card header rendered
   green-on-green. */
.card-head a:not(.btn) { font-size: .82rem; color: var(--accent, #2f7d5b); text-decoration: none; }
.empty {
  text-align: center; color: var(--muted); padding: 42px 20px;
}
.empty .empty-icon { font-size: 2rem; margin-bottom: 8px; }
.pagination { display: flex; gap: 6px; align-items: center; padding: 12px 16px; font-size: .85rem; }
.pagination a, .pagination span.cur {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-strong);
}
.pagination span.cur { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.account-wordmark {
  width: 112px; height: 32px; padding: 3px 5px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.account-wordmark img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 100%; object-fit: contain;
}
@media (max-width: 560px) {
  .account-wordmark { width: 88px; height: 28px; padding: 2px 4px; }
}
.kv { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 4px 14px; font-size: .89rem; }
.kv dt { color: var(--muted); font-weight: 550; }
.kv dd { margin: 0; }
.photo-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--green-50); }
.animal-avatar { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); }

/* ---------- Platform grower CRM ---------- */
.crm-privacy-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 18px; padding: 12px 14px;
  border: 1px solid var(--blue-100); border-left: 4px solid var(--blue-600);
  border-radius: var(--radius-sm); background: var(--card);
}
.crm-privacy-note p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
.crm-notice-icon {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--blue-100); color: var(--blue-600);
}
.crm-notice-icon .icon { width: 16px; height: 16px; }
.crm-stats { margin-bottom: 18px; }
.crm-grower-filter {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(170px, 220px) auto auto;
  gap: 12px;
}
.crm-grower-filter .field,
.crm-grower-filter .field.grow { min-width: 0; margin: 0; }
.crm-grower-filter > .btn { white-space: nowrap; }
.crm-grower-table { min-width: 1160px; table-layout: fixed; }
.crm-grower-table .crm-col-pag { width: 9%; }
.crm-grower-table .crm-col-grower { width: 24%; }
.crm-grower-table .crm-col-contact { width: 23%; }
.crm-grower-table .crm-col-location { width: 13%; }
.crm-grower-table .crm-col-linked { width: 24%; }
.crm-grower-table .crm-col-action { width: 7%; }
.crm-grower-table th,
.crm-grower-table td { padding-inline: 16px; }
.crm-grower-table .crm-email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.crm-table-primary { display: inline-block; color: var(--text); font-weight: 700; }
.crm-cell-line { display: block; margin-top: 2px; }
.crm-nowrap { white-space: nowrap; }
.crm-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.crm-section-head .card-title { margin-bottom: 2px; }
.crm-section-head p { margin: 0; font-size: .8rem; }
.crm-admin-only { border-color: var(--gold-500); box-shadow: inset 4px 0 0 var(--gold-500), var(--shadow); }
.crm-account-link { padding: 11px 12px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.crm-account-summary { margin-bottom: 14px; }
.crm-account-summary.has-actions {
  display: grid; grid-template-columns: minmax(280px, .8fr) minmax(380px, 1.2fr);
  gap: 14px; align-items: stretch;
}
.crm-account-summary .crm-account-link { margin: 0; }
.crm-login-help {
  display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--green-50);
}
.crm-login-help > div:first-child { min-width: 0; }
.crm-login-help h3 { margin: 0; font-size: .84rem; }
.crm-login-help p { max-width: 620px; margin: 3px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.crm-login-help-actions {
  display: flex; flex: none; align-items: center; justify-content: flex-start;
  gap: 8px; flex-wrap: wrap;
}
.crm-checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
/* A Yes/No/Unknown control needs the width of the word "Unknown", not half the
   card. Capping it keeps a column of them scannable. */
.crm-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 260px)); gap: 10px 16px; }
.crm-choice-grid .field { margin-bottom: 0; }
.crm-choice-grid select, .field-sm select, .field-xs select { max-width: 100%; }
.crm-checkbox-grid .checkbox-line { margin: 0; }
.crm-checkbox-grid .field { margin-bottom: 0; }
.crm-notes { min-height: 122px; }

/* Field widths sized to their content. A postcode input as wide as a street
   address invites the wrong thing to be typed into it. */
/* .field-row is an even grid, which would leave a narrow field marooned in a
   full-width track. A row that mixes widths packs from the left instead. */
.field-row-tight { display: flex; flex-wrap: wrap; align-items: flex-start; }
.field-row-tight > .field { flex: 1 1 220px; min-width: 0; }
.field-row-tight > .field-sm { flex: 0 1 240px; }
.field-row-tight > .field-xs { flex: 0 0 130px; }
.field-sm > input, .field-sm > select, .field-xs > input, .field-xs > select { width: 100%; }
@media (max-width: 760px) {
  .field-row-tight > .field, .field-row-tight > .field-sm, .field-row-tight > .field-xs { flex: 1 1 100%; }
}

/* The PAG number is the identifier staff quote on the phone, so it sits beside
   the name at the size of a heading rather than as small print beneath it. */
.crm-grower-head { align-items: flex-start; }
.crm-pag-identity {
  display: flex; flex-direction: column; gap: 2px; flex: none;
  padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--green-50);
}
.crm-pag-label { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crm-pag-number { font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.crm-role-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* Registers and batch forms are places you arrive at from somewhere else, so
   the way back sits above the heading rather than being left to the browser. */
.page-back {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 4px; font-size: .8rem; font-weight: 600; color: var(--muted);
}
.page-back:hover { color: var(--green-700); text-decoration: none; }

/* Saving happens per field, so the bar reports state rather than offering a
   button. Without scripting it keeps the button, because nothing else saves. */
.crm-save-state { display: inline-flex; align-items: center; gap: 7px; }
.crm-save-state .icon { width: 16px; height: 16px; }
.crm-save-saving { color: var(--muted); }
.crm-save-saved { color: var(--green-700); }
.crm-save-failed { color: var(--red-600); font-weight: 600; }
.field-saving > input, .field-saving > select, .field-saving > textarea { border-color: var(--gold-500); }
.field-saved > input, .field-saved > select, .field-saved > textarea { border-color: var(--green-600); }
.field-error > input, .field-error > select, .field-error > textarea { border-color: var(--red-600); }
.field-save-message { margin-top: 4px; font-size: .76rem; color: var(--red-600); }
.crm-detail-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
.crm-detail-layout > * { min-width: 0; }
.crm-detail-layout > div > .card { margin-bottom: 0; }
.crm-form-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.crm-action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1200px) {
  .crm-account-summary.has-actions { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .crm-grower-filter { grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) auto; }
  .crm-grower-filter .field.grow { grid-column: 1 / -1; }
}
@media (max-width: 660px) {
  .crm-grower-filter { grid-template-columns: 1fr; }
  .crm-grower-filter .field.grow { grid-column: auto; }
  .crm-login-help { align-items: stretch; flex-direction: column; }
  .crm-login-help-actions { align-items: stretch; flex-direction: column; }
  .crm-login-help-actions .btn { justify-content: center; width: 100%; }
}
.crm-import-layout { align-items: start; }
.crm-message-list { margin: 6px 0 0; padding-left: 21px; }
.crm-message-list li + li { margin-top: 3px; }
.crm-safeguard-list { margin: 0; padding-left: 21px; }
.crm-safeguard-list li + li { margin-top: 8px; }
.crm-preview-head { margin-top: 6px; }
.crm-import-summary { margin-bottom: 0; }
.crm-preview-table td { max-width: 340px; overflow-wrap: anywhere; }
.crm-confirm-card { border-color: var(--green-500); }
.crm-checkbox-warning { align-items: flex-start; }
.crm-confirm-check {
  align-items: flex-start; margin: 16px 0;
  padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.crm-confirm-check input, .crm-checkbox-warning input { margin-top: 3px; }
.crm-empty-profile { display: flex; align-items: flex-start; gap: 14px; max-width: 760px; }
.crm-empty-profile-icon {
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--blue-600); background: var(--blue-100);
}
.crm-empty-profile-icon .icon { width: 21px; height: 21px; }
.crm-readonly-details { max-width: 760px; row-gap: 8px; }
.crm-readonly-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.crm-readonly-fields:disabled { opacity: 1; }
.crm-readonly-fields:disabled input,
.crm-readonly-fields:disabled textarea,
.crm-readonly-fields:disabled select {
  color: var(--text); opacity: 1; cursor: default;
}
.crm-pre-wrap { white-space: pre-wrap; }
.crm-self-profile { max-width: 900px; }
.crm-self-actions { padding-top: 4px; }
.crm-self-actions p { margin: 0; max-width: 560px; }
.audit-action-label { display: block; font-weight: 650; text-transform: capitalize; }
.audit-action-code { display: block; margin-top: 3px; font-size: .72rem; }
.audit-details summary { width: fit-content; color: var(--green-700); cursor: pointer; font-weight: 650; }
.audit-details p { max-width: 560px; margin: 8px 0 4px; white-space: pre-wrap; }

/* ---------- Grower resource manager ---------- */
.resource-page-head { margin-bottom: 14px; }
.resource-overview {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 14px;
}
.resource-overview-card {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-width: 0; padding: 13px 14px; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.resource-overview-card:hover {
  color: var(--text); border-color: var(--border-strong); text-decoration: none;
  box-shadow: 0 4px 16px rgba(45, 40, 25, .08);
}
.resource-overview-icon {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; color: var(--green-700); background: var(--green-50);
}
.resource-overview-icon .icon { width: 18px; height: 18px; }
.resource-overview-card strong, .resource-overview-card small { display: block; min-width: 0; }
.resource-overview-card strong { font-size: .88rem; line-height: 1.25; }
.resource-overview-card small { margin-top: 2px; font-size: .72rem; color: var(--muted); }
.resource-overview-card b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.resource-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 12px;
}
.resource-search-field { position: relative; flex: 1 1 420px; min-width: 220px; }
.resource-search-field input { padding-left: 35px; }
.resource-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--muted); pointer-events: none;
}
.resource-search-icon .icon { width: 15px; height: 15px; }
.resource-status-field { flex: 0 0 180px; }
.resource-results { margin: 0 4px 0 2px; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.resource-visibility-note {
  display: flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 8px 11px;
  color: var(--muted); background: var(--green-50); border-radius: var(--radius-sm); font-size: .8rem;
}
.resource-visibility-note > span { display: inline-flex; color: var(--green-700); }
.resource-visibility-note p { margin: 0; }

.resource-manager-section { margin-top: 30px; scroll-margin-top: 74px; }
.resource-manager-section:first-of-type { margin-top: 0; }
.resource-section-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 11px;
}
.resource-section-heading > div:first-child { flex: 1 1 420px; }
.resource-section-heading h2 { margin-bottom: 2px; font-size: 1.35rem; }
.resource-section-heading p { margin: 0; color: var(--muted); font-size: .82rem; }
.resource-section-kicker {
  color: var(--green-700) !important; font-size: .68rem !important; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
}
.resource-secondary-fields { grid-template-columns: repeat(auto-fit, minmax(150px, 240px)); }

.resource-group-list { display: grid; gap: 10px; }
.resource-nested-group-list {
  padding: 10px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.resource-nested-group-list > .resource-group { box-shadow: none; }
.resource-group {
  overflow: hidden; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.resource-group[hidden] { display: none; }
.resource-group > summary {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center;
  gap: 11px; min-height: 62px; padding: 11px 15px; cursor: pointer; list-style: none;
}
.resource-group > summary::-webkit-details-marker,
.resource-record-disclosure > summary::-webkit-details-marker,
.grower-resource-group > summary::-webkit-details-marker { display: none; }
.resource-group > summary:hover,
.resource-record-disclosure > summary:hover,
.grower-resource-group > summary:hover { background: var(--green-50); }
.resource-group-icon {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; color: var(--green-700); background: var(--green-50);
}
.resource-group-icon .icon { width: 18px; height: 18px; }
.resource-group-heading { min-width: 0; }
.resource-group-heading strong, .resource-group-heading small { display: block; }
.resource-group-heading strong { overflow-wrap: anywhere; font-size: .94rem; }
.resource-group-heading small { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.resource-group-chevron {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; color: var(--muted); transition: transform .16s ease;
}
.resource-group[open] > summary .resource-group-chevron,
.resource-record-disclosure[open] > summary .resource-group-chevron,
.grower-resource-group[open] > summary .resource-group-chevron { transform: rotate(180deg); }
.resource-group > .resource-list {
  border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
}

.resource-list {
  overflow: hidden; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.resource-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center;
  gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  scroll-margin-top: 78px;
}
.resource-item:last-child { border-bottom: 0; }
.resource-item:hover { background: var(--green-50); }
.resource-item-icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  align-self: start; border-radius: 10px; color: var(--green-700); background: var(--green-50);
}
.resource-item-icon .icon { width: 19px; height: 19px; }
.resource-item-content { min-width: 0; }
.resource-item-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resource-item-title-line h3 { margin: 0; font-size: .94rem; overflow-wrap: anywhere; }
.resource-item-title-line .badge { font-size: .65rem; }
.resource-item-meta {
  display: flex; align-items: center; gap: 5px 12px; flex-wrap: wrap;
  margin: 3px 0 0; color: var(--muted); font-size: .75rem;
}
.resource-item-meta > * { min-width: 0; }
.resource-filename { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-item-description {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin: 5px 0 0; color: var(--muted); font-size: .8rem; white-space: pre-line;
}
.resource-item-description-full {
  display: block; overflow: visible; -webkit-line-clamp: initial; white-space: pre-wrap;
}
.resource-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.resource-item-actions .btn.small { min-height: 40px; }
.resource-share {
  grid-column: 1 / -1; margin-top: 2px; padding: 10px 12px;
  background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius-sm);
}
.resource-share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resource-share-icon { display: inline-flex; color: var(--green-700); }
.resource-share-url {
  flex: 1 1 260px; width: auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem;
}
.resource-share-hint { margin: 6px 0 0; }
[data-copy-target][data-copied] { color: var(--green-700); }
.resource-disclosure-row { display: block; padding: 0; }
.resource-disclosure-row:hover { background: transparent; }
.resource-record-disclosure > summary {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center;
  gap: 12px; min-height: 68px; padding: 13px 16px; cursor: pointer; list-style: none;
}
.resource-record-disclosure > summary .resource-item-icon { align-self: center; }
.resource-record-title { font-size: .94rem; font-weight: 650; overflow-wrap: anywhere; }
.resource-record-body { padding: 0 16px 15px 68px; }
.resource-record-body .resource-item-description { margin-top: 0; }
.resource-record-body > .resource-item-actions { margin-top: 10px; justify-content: flex-start; }
.resource-editor-panel {
  grid-column: 1 / -1; margin-top: 4px; padding: 18px 20px;
  background: var(--green-50); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.resource-editor-panel[hidden] { display: none; }
.resource-editor-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px;
}
.resource-editor-heading h3, .resource-editor-heading h4 { margin: 0 0 2px; font-size: 1rem; }
.resource-editor-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.resource-editor-heading .icon-btn { width: 40px; height: 40px; }
.resource-inline-error { margin: 0 0 14px; }
.resource-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.batch-form-actions { display: flex; justify-content: flex-end; margin: -2px 0 18px; }
.batch-animal-table td { overflow-wrap: normal; }
.resource-filter-empty { margin-top: 10px; }

@media (max-width: 1050px) {
  .resource-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-results { flex: 1 0 100%; }
}
@media (max-width: 760px) {
  .resource-toolbar { align-items: stretch; flex-wrap: wrap; }
  .resource-search-field { flex: 1 1 100%; }
  .resource-status-field { flex: 1 1 calc(50% - 5px); }
  .resource-item { grid-template-columns: 36px minmax(0, 1fr); align-items: start; padding: 13px; }
  .resource-item-icon { width: 36px; height: 36px; }
  .resource-item-actions { grid-column: 2; justify-content: flex-start; }
  .resource-editor-panel { grid-column: 1 / -1; padding: 15px; }
  .resource-section-heading { align-items: flex-start; }
  .resource-record-body { padding: 0 13px 13px; }
}
@media (max-width: 480px) {
  .resource-overview {
    display: flex; gap: 8px; overflow-x: auto; padding: 1px 1px 8px;
    scroll-snap-type: x proximity; overscroll-behavior-inline: contain;
  }
  .resource-overview-card { flex: 0 0 210px; padding: 10px 12px; scroll-snap-align: start; }
  .resource-section-heading > .btn { width: 100%; justify-content: center; }
  .resource-item-actions .btn { flex: 1 1 auto; justify-content: center; }
  .resource-form-actions .btn { flex: 1 1 100%; justify-content: center; }
}

.grower-resource-section + .grower-resource-section { margin-top: 12px; }
.grower-resource-group {
  overflow: hidden; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.grower-resource-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 70px; padding: 13px 18px; cursor: pointer; list-style: none;
}
.grower-resource-group-title { display: block; font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; }
.grower-resource-group > summary small { display: block; margin-top: 2px; color: var(--muted); }
.grower-resource-group-body { padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.grower-resource-group-body > .grid { margin-bottom: 0; }
.grower-download-card { display: flex; flex-direction: column; align-items: flex-start; }
.grower-resource-card-actions {
  display: flex; width: 100%; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto;
}
.grower-resource-card-actions .btn { flex: 1 1 140px; justify-content: center; }
.grower-faq-list { display: grid; gap: 10px; }
.grower-faq-item { overflow: hidden; }
.grower-faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 19px; cursor: pointer; font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600; list-style: none;
}
.grower-faq-item > summary::-webkit-details-marker { display: none; }
.grower-faq-item > summary .icon { transition: transform .16s ease; }
.grower-faq-item[open] > summary .icon { transform: rotate(180deg); }
.grower-faq-answer { padding: 0 19px 18px; color: var(--muted); }
.grower-faq-answer > :last-child { margin-bottom: 0; }
.grower-faq-item.compact { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.grower-faq-item.compact > summary { padding: 11px 13px; font-family: var(--font); font-size: .92rem; }
.grower-faq-item.compact .grower-faq-answer { padding: 0 13px 12px; }

@media (max-width: 660px) {
  .crm-checkbox-grid { grid-template-columns: 1fr; }
  .crm-form-actions, .crm-action-buttons { align-items: stretch; }
  .crm-action-buttons { width: 100%; }
  .crm-action-buttons .btn, .crm-self-actions .btn { flex: 1 1 auto; justify-content: center; }
  .crm-readonly-details { grid-template-columns: 1fr; gap: 1px; }
  .crm-readonly-details dd { margin-bottom: 9px; }
}

/* Family tree */
.tree-scroll { overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px; }
.tree-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.tree { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; align-items: stretch; min-width: 620px; }
.tree-col { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.tree-node {
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 8px 10px; background: #fff; font-size: .82rem;
}
.tree-node.sire { border-left-color: #7ca8d8; background: #f3f8fd; }
.tree-node.dam { border-left-color: #e2a1b0; background: #fdf4f6; }
.tree-node .tn-name { font-weight: 650; }
.tree-node .tn-meta { color: var(--muted); font-size: .74rem; }
.tree-node.unknown { color: var(--muted); font-style: italic; }

/* Charts */
.chart-svg { width: 100%; height: auto; display: block; }

/* Dropdown menu */
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu .menu-body {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); min-width: 200px; max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); overflow-y: auto; padding: 6px;
}
details.menu .menu-body a, details.menu .menu-body button {
  display: flex; align-items: center; width: 100%; min-height: 40px; text-align: left; padding: 7px 10px;
  border-radius: 6px; color: var(--text); background: none; border: none;
  font: inherit; cursor: pointer;
}
details.menu .menu-body a:hover, details.menu .menu-body button:hover { background: var(--green-50); text-decoration: none; }
details.menu .menu-body .menu-danger { color: var(--red-600); }
.menu-identity { padding: 7px 10px; overflow-wrap: anywhere; }

/* Without JS, table menus remain in flow so every action is still reachable. */
details.menu.table-menu {
  display: inline-grid;
  justify-items: end;
  vertical-align: top;
}
details.menu.table-menu > .menu-body {
  position: static;
  margin-top: 6px;
  text-align: left;
}

/* With JS, table menus float against the viewport. Fixed positioning escapes
   the wrapper's clipping without expanding a row; app.js keeps the menu
   aligned and flips it above the trigger when needed. */
details.menu.table-menu.floating-menu-ready { display: inline-block; }
details.menu.table-menu.floating-menu-ready[open] > .menu-body {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 90;
  margin-top: 0;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
details.menu.table-menu.floating-menu-ready.menu-above[open] > .menu-body { transform: translateY(4px); }
details.menu.table-menu.floating-menu-ready.menu-positioned[open] > .menu-body { visibility: visible; }
details.menu.table-menu.floating-menu-ready.menu-positioned.menu-visible[open] > .menu-body { opacity: 1; transform: translateY(0); }

/* Mobile */
.topbar .menu-toggle { display: none; }
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 99; border: 0; padding: 0;
  background: rgba(16, 23, 13, .5); cursor: pointer;
}
.sidebar-backdrop[hidden] { display: none; }
.topbar .farm-name { max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .sidebar { width: min(88vw, 290px); height: 100dvh; position: fixed; z-index: 100; left: 0; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s; box-shadow: none; }
  .sidebar.open { transform: translateX(0); visibility: visible; transition-delay: 0s; box-shadow: 0 8px 40px rgba(0,0,0,.4); }
  .sidebar .sidebar-close { display: inline-flex; position: absolute; z-index: 1; top: 11px; right: 10px; }
  .sidebar .brand { padding-right: 58px; }
  .topbar .menu-toggle { display: inline-flex; }
  .content { padding: 14px; }
  .topbar { padding: 8px 14px; gap: 8px; }
  .topbar .farm-name { display: none; }
  .topbar form.topsearch { flex: 1 1 auto; min-width: 0; }
  .page-head .actions { width: 100%; }
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-inline: contain; scrollbar-width: thin;
  }
  .tabs a { min-height: 42px; display: inline-flex; align-items: center; }
}
@media (max-width: 560px) {
  .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
  .page-head .actions > form, .page-head .actions > details { flex: 1 1 auto; }
  .page-head .actions > form .btn, .page-head .actions > details > summary { width: 100%; justify-content: center; }
  .card-pad { padding: 16px; }
  .card-head { padding-inline: 16px; }
  .filter-bar { align-items: stretch; }
  .filter-bar .field, .filter-bar .field.grow { flex: 1 1 100%; min-width: 0; }
  .filter-bar > .btn { width: 100%; justify-content: center; }
  .form-checkbox-offset { margin-top: 0; }
  .batch-form-actions .btn { width: 100%; justify-content: center; }
  .kv { grid-template-columns: 1fr; gap: 1px; }
  .kv dd { margin-bottom: 9px; }
  .modal-foot { align-items: stretch; flex-direction: column-reverse; }
  .modal-foot .btn { justify-content: center; }
  .icon-btn { width: 44px; height: 44px; }
}

/* ---------- Icons ---------- */
.icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; }
.icon-sm { width: .9em; height: .9em; }
h1 .icon, h2 .icon, .card-head h2 .icon, .card-title .icon, .page-head h1 .icon {
  color: var(--green-600); vertical-align: -0.12em; margin-right: 2px;
}
.icon-inline { color: var(--green-600); vertical-align: -0.15em; }
.empty .empty-icon { display: inline-flex; }
.empty .empty-icon .icon { width: 40px; height: 40px; color: var(--border-strong); }
.error-emblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%;
  background: var(--green-50); color: var(--green-600);
}
.error-emblem .icon { width: 30px; height: 30px; }
.error-page { min-height: 100vh; }
.error-card { text-align: center; }
.shared-file-page { min-height: 100vh; }
.shared-file-brand {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--green-700);
}
.shared-file-kind { margin: 0 0 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.shared-file-card h1 { font-size: 1.45rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.shared-file-description { margin: 0 0 10px; white-space: pre-line; }
.shared-file-meta { margin: 0; font-size: .82rem; }
.shared-file-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.shared-file-foot { margin: 18px 0 0; font-size: .8rem; }
.error-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.error-card code { display: block; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }

/* Icon-only buttons (topbar) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--green-50); color: var(--green-700); }
.icon-btn .icon { width: 19px; height: 19px; }

/* Theme toggle: show the icon for the theme you'd switch TO */
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-flex; }

/* Top search with leading icon */
.topbar form.topsearch { position: relative; }
.topsearch-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: inline-flex;
}
.topbar form.topsearch input { padding-left: 34px; }

/* ---------- Accessibility ---------- */
.sr-only {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Visible keyboard focus on every interactive element */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .nav-item:focus-visible, .tabs a:focus-visible,
[data-href]:focus-visible, .icon-btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.sidebar a:focus-visible { outline-color: var(--green-600); outline-offset: -2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Styled file inputs ---------- */
input[type="file"] {
  padding: 6px 10px; cursor: pointer; font-size: .85rem;
  background: var(--green-50); border: 1px dashed var(--border-strong);
}
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: #fff; color: var(--green-800); font: inherit; font-weight: 600; font-size: .82rem;
  transition: background .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--green-50); }

/* ---------- Micro-interactions ---------- */
.btn { transition: background .15s ease, box-shadow .15s ease, transform .06s ease, border-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn:not(.secondary):not(.danger):not(.gold):hover { box-shadow: 0 2px 8px rgba(19, 99, 83, 0.28); }
.sidebar a.nav-item { transition: background .15s ease, color .15s ease; }
.tabs a { transition: color .15s ease, border-color .15s ease; }
.badge { transition: background .15s ease; }
table.data tr.clickable { transition: background .12s ease; }
.card { transition: box-shadow .18s ease, border-color .18s ease; }
a.card { transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease; }
a.card:hover { box-shadow: 0 4px 18px rgba(10, 40, 34, 0.1); transform: translateY(-1px); border-color: var(--border-strong); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- Modal / dialog ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 25, 21, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.modal-backdrop.open { opacity: 1; }
.modal {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(10, 30, 24, 0.28);
  width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
  transform: translateY(8px) scale(.98); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 6px; }
.modal-head .modal-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-100); color: var(--red-600);
}
.modal-head .modal-icon .icon { width: 20px; height: 20px; }
.modal h2 { font-size: 1.05rem; margin: 0; }
.modal-body { padding: 6px 20px 4px; color: var(--muted); font-size: .9rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }

/* ---------- Form dialogs ---------- */
/* Creating a record used to mean a permanent side card or a disclosure that
   pushed the list down the page. The form now opens over the list it belongs
   to, so the list stays the page and the form stays a form. Native <dialog>
   brings the focus trap, Escape and inertness with it. */
.app-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(10, 30, 24, .3);
  overflow: hidden;
}
.app-dialog.app-dialog-wide { width: min(860px, calc(100vw - 32px)); }
.app-dialog::backdrop { background: rgba(10, 25, 21, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.app-dialog[open] { display: flex; flex-direction: column; }
.app-dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--border); flex: none;
}
.app-dialog-head h2 { margin: 0; font-size: 1.08rem; }
.app-dialog-sub { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.app-dialog-body { padding: 18px 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.app-dialog-body > form:last-child > :last-child { margin-bottom: 0; }
/* Trailing actions sit on the dialog's own edge so the primary button is where
   it is in every other dialog, not wherever the form happened to end. */
.dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.dialog-actions .btn { min-height: 44px; }
@media (max-width: 620px) {
  .app-dialog, .app-dialog.app-dialog-wide { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; margin: auto auto 0; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { width: 100%; justify-content: center; }
}
/* Without scripting a dialog can never be opened, so shell_top's noscript rule
   turns it into a plain card and hides the button that would have opened it. */

/* ---------- Media viewer ---------- */
/* Photographs and vet PDFs open over the record they belong to. Sending people
   to a new tab loses the animal they were looking at, and on a phone it loses
   the app entirely. */
.media-viewer { width: min(1100px, calc(100vw - 24px)); max-height: 94vh; }
.media-viewer .app-dialog-body { padding: 0; background: #10130c; display: flex; }
.media-viewer img {
  display: block; margin: auto; max-width: 100%; max-height: calc(94vh - 74px);
  object-fit: contain;
}
.media-viewer iframe, .media-viewer object { width: 100%; height: calc(94vh - 74px); border: 0; background: #fff; }
.media-viewer-actions { display: flex; align-items: center; gap: 8px; }
.media-viewer-fallback { margin: auto; padding: 40px 20px; text-align: center; color: #dbd9cb; }
/* Anything that opens the viewer is a control, so it has to look like one. */
.media-thumb-button {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: var(--radius-sm);
}
.media-thumb-button:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.media-thumb-button .photo-thumb { transition: transform .12s ease, box-shadow .12s ease; }
.media-thumb-button:hover .photo-thumb { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.animal-avatar-button { width: auto; flex: none; }
/* Some viewer triggers sit in running text where a button must read as a link. */
.link-button {
  display: inline; padding: 0; border: 0; background: none; font: inherit;
  color: var(--green-700); text-decoration: underline; cursor: pointer; text-align: left;
}
.file-list-heading { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 20px 0 10px; }
.file-list-heading:first-child { margin-top: 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.media-tile { display: flex; flex-direction: column; gap: 7px; }
.media-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--muted); }
.media-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The camera control only means anything on a device that has one. */
.camera-capture-field { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.camera-capture-field .btn { min-height: 44px; }
.camera-hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.camera-selected-name { font-size: .82rem; color: var(--muted); }

/* ---------- Dark theme (token overrides) ---------- */
:root[data-theme="dark"] {
  --green-50: #20261a;
  --green-100: #2b3620;
  --gold-100: #372b18;
  --red-100: #3a201d;
  --blue-100: #143040;
  --bg: #141511;
  --card: #1c1e18;
  --border: #2b2e25;
  --border-strong: #3f4335;
  --text: #eae8df;
  --muted: #a3a194;
  --gold-text: #d7b27f;
  --red-600: #ee8f85;
  --focus: #b7d598;
  --chart-series: #a8c98a;
  --chart-text: #eae8df;
  --chart-muted: #aaa99e;
  --chart-grid: #3a3e31;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .38);
  /* The brand hues are tuned for a paper-white ground. On the dark surface the
     ink variants have to move the other way to stay readable, while the flat
     sage keeps its hue because nothing is read against it. */
  --site-paper: #16180f;
  --site-sage-ink: #93b786;
  --site-tan-ink: #d7b27f;
  color-scheme: dark;
}
:root[data-theme="dark"] .badge.site-badge-live { background: #2f4226; color: #cfe0b8; }
:root[data-theme="dark"] .public-access-step { background: #2f4226; color: #cfe0b8; }
:root[data-theme="dark"] a { color: #adc98f; }
/* That link colour outranks .btn's own white (an element+attribute selector
   beats a single class), so every anchor-styled primary button was rendering
   pale green on green — 2.6:1, unreadable. Restore each variant's intended
   text colour for anchors specifically; buttons rendered as <button> were
   never affected, which is why the two drifted apart. */
:root[data-theme="dark"] a.btn { color: #fff; }
:root[data-theme="dark"] a.btn.secondary { color: #dbd9cb; }
:root[data-theme="dark"] a.btn.danger { color: var(--red-600); }
:root[data-theme="dark"] a.btn.gold { color: #3b2c07; }
:root[data-theme="dark"] a.stat-link { color: var(--text); }
:root[data-theme="dark"] .sidebar a.nav-item:hover { color: #cfe0b8; }
:root[data-theme="dark"] .sidebar a.nav-item.active { background: #2b3620; color: #d6e4bd; }
:root[data-theme="dark"] .sidebar a.nav-item svg { color: #9db984; }
:root[data-theme="dark"] .sidebar a.nav-back { color: #9a9788; }
:root[data-theme="dark"] .sidebar a.nav-back:hover { background: #2b3620; color: #cfe0b8; }
:root[data-theme="dark"] .sidebar .nav-section-area { color: #cfe0b8; }
:root[data-theme="dark"] label { color: #c6c4b6; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background: #17190f; border-color: var(--border-strong); color: var(--text);
}
:root[data-theme="dark"] input[type="file"] { background: #20261a; }
:root[data-theme="dark"] input[type="file"]::file-selector-button { background: #262a1c; color: #d8d6c6; border-color: var(--border-strong); }
:root[data-theme="dark"] code { background: #2b3620; color: #d3e4b6; }
:root[data-theme="dark"] .btn.secondary { background: #262a1c; color: #dbd9cb; border-color: var(--border-strong); }
:root[data-theme="dark"] .btn.secondary:hover { background: #2f3423; }
:root[data-theme="dark"] .btn.danger { background: #262a1c; }
:root[data-theme="dark"] .badge { background: #2b3620; color: #bcd99c; }
:root[data-theme="dark"] .badge.gray { background: #2c2e26; color: #c9c7bb; }
:root[data-theme="dark"] .badge.gold { background: #372b18; color: #dcba85; }
:root[data-theme="dark"] .badge.red { background: #3a201d; color: #f0a79e; }
:root[data-theme="dark"] .badge.blue { background: #143040; color: #90c5e7; }
:root[data-theme="dark"] .flash.success { background: #232d19; color: #bcd99c; border-color: #3a4a2c; }
:root[data-theme="dark"] .flash.error { background: #3a201d; color: #f0a79e; border-color: #4d2b27; }
:root[data-theme="dark"] .flash.info { background: #143040; color: #90c5e7; border-color: #22475c; }
:root[data-theme="dark"] .trial-banner { background: #143040; color: #90c5e7; }
:root[data-theme="dark"] table.data tr.clickable:hover td { background: #23261c; }
:root[data-theme="dark"] .tree-node { background: #20231b; }
:root[data-theme="dark"] .tree-node.sire { background: #142430; border-left-color: #4d7aa8; }
:root[data-theme="dark"] .tree-node.dam { background: #2a1a20; border-left-color: #a86e7c; }
:root[data-theme="dark"] .icon-btn:hover { background: #262a1c; color: #bcd99c; }
:root[data-theme="dark"] .public-home-brand { border-color: #56584c; background: #fff; }
:root[data-theme="dark"] .public-home-hero {
  background:
    radial-gradient(circle at 88% 10%, rgba(176, 133, 75, .22), transparent 28%),
    linear-gradient(145deg, #20231b 5%, var(--green-50) 100%);
}
:root[data-theme="dark"] .public-product-card > p:nth-of-type(3) strong { color: #bcd99c; }
:root[data-theme="dark"] .auth-hero { background: linear-gradient(170deg, #20231b 0%, var(--green-50) 82%); }
:root[data-theme="dark"] .auth-hero .hero-brand img,
:root[data-theme="dark"] .account-wordmark { border-color: #56584c; background: #fff; }
:root[data-theme="dark"] .photo-thumb, :root[data-theme="dark"] .animal-avatar { background: #20261a; }
:root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .62); }
:root[data-theme="dark"] .app-dialog::backdrop { background: rgba(0, 0, 0, .66); }
/* ---------- Print (sales sheets, reports) — force light rendering ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --card: #fff; --text: #111; --muted: #444; --border: #ccc; --border-strong: #999;
    --chart-series: #46603a; --chart-text: #111; --chart-muted: #444; --chart-grid: #ddd;
    color-scheme: light;
  }
  .sidebar, .topbar, .page-head .actions, .no-print, .impersonation-banner, .trial-banner,
  .filter-bar, .pagination, .flash, form, .theme-toggle, .menu-toggle { display: none !important; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #bbb; }
  .table-wrap { overflow: visible !important; }
  body { background: #fff; color: #111; }
}

/* ---------- Staff fibre programme dashboard ---------- */
.fibre-filter-card { margin-bottom: 18px; }
.fibre-filter-form { display: block; padding: 15px 16px 16px; }
.fibre-filter-form .field { min-width: 0; margin: 0; }
.fibre-filter-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid var(--border);
}
.fibre-filter-heading h2 { margin: 0; }
.fibre-filter-heading p { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.fibre-filter-count { flex: none; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.fibre-filter-count strong { color: var(--text); font-size: .92rem; }
.fibre-filter-primary {
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(190px, 230px) auto;
  gap: 11px; align-items: end;
}
.fibre-filter-options {
  display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 11px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border);
}
.fibre-filter-actions { display: flex; align-items: center; gap: 7px; }
.fibre-context {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: -4px 0 14px; font-size: .82rem;
}
.fibre-context > :last-child { text-align: right; }
.fibre-focus-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 4px 2px 8px;
  border: 1px solid var(--green-100); border-radius: 999px; background: var(--green-50);
  color: var(--green-800); font-size: .72rem;
}
.fibre-focus-chip a {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: inherit; font-size: 1rem; line-height: 1;
}
.fibre-focus-chip a:hover { background: var(--green-100); text-decoration: none; }
.fibre-kpis { margin-bottom: 18px; }
.fibre-kpis .stat-value {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fibre-kpi-card {
  min-height: 148px; display: flex; flex-direction: column; color: var(--text);
  border-color: var(--border); transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.fibre-kpi-card:hover {
  color: var(--text); border-color: var(--green-500); text-decoration: none;
  box-shadow: 0 5px 18px rgba(45, 40, 25, .1); transform: translateY(-1px);
}
.fibre-kpi-action {
  margin-top: auto; padding-top: 11px; color: var(--green-700); font-size: .76rem; font-weight: 700;
}
.fibre-account-breakdown { line-height: 1.55; }
.fibre-account-breakdown span { white-space: nowrap; }
.fibre-chart-grid { align-items: start; }
.fibre-chart-grid > .card { min-width: 0; }
.fibre-bars { display: grid; gap: 10px; padding: 16px 18px 12px; }
.fibre-bar-row {
  display: grid; grid-template-columns: minmax(76px, 130px) minmax(100px, 1fr) minmax(64px, auto);
  gap: 10px; align-items: center; font-size: .8rem;
}
.fibre-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fibre-bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--green-50); }
.fibre-bar-fill {
  display: block; width: var(--fibre-bar, 0%); height: 100%; border-radius: inherit;
  background: var(--chart-series);
}
.fibre-bar-gold { background: var(--gold-500); }
.fibre-chart-note { margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--border); font-size: .78rem; }
.fibre-grower-table { min-width: 1180px; table-layout: fixed; }
.fibre-grower-table th:nth-child(1) { width: 17%; }
.fibre-grower-table th:nth-child(2) { width: 18%; }
.fibre-grower-table th:nth-child(3) { width: 17%; }
.fibre-grower-table th:nth-child(4) { width: 11%; }
.fibre-grower-table th:nth-child(5),
.fibre-grower-table th:nth-child(6) { width: 11%; }
.fibre-grower-table th:nth-child(7) { width: 7%; }
.fibre-grower-table th:nth-child(8) { width: 8%; }
.fibre-grower-table td:nth-child(4),
.fibre-grower-table td:nth-child(5),
.fibre-grower-table td:nth-child(6) { white-space: nowrap; }
.fibre-grower-table th:first-child { min-width: 185px; }
.fibre-login-cell { min-width: 220px; }
.fibre-login-identifier {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
}
.fibre-summary-cell { min-width: 280px; }
.fibre-grade-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.fibre-grade {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 7px;
  border-radius: 999px; background: var(--green-50); color: var(--muted);
  font-size: .72rem; white-space: nowrap;
}
.fibre-grade strong { color: var(--text); font-weight: 650; }
.fibre-sort-link {
  display: inline-flex; min-height: 28px; align-items: center; gap: 5px; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
}
.fibre-sort-link:hover { color: var(--green-700); text-decoration: none; }
.fibre-grower-table th.num .fibre-sort-link { justify-content: flex-end; width: 100%; }
.fibre-sort-icon { color: var(--muted); font-size: .85rem; font-weight: 700; }
.fibre-sort-icon.active { color: var(--green-700); }
#fibre-growers-heading { scroll-margin-top: 74px; }
:root[data-theme="dark"] .fibre-kpi-card,
:root[data-theme="dark"] .fibre-kpi-card:hover { color: var(--text); }
:root[data-theme="dark"] .fibre-kpi-action,
:root[data-theme="dark"] .fibre-sort-link:hover,
:root[data-theme="dark"] .fibre-sort-icon.active { color: #adc98f; }
:root[data-theme="dark"] .fibre-focus-chip { color: #cfe0b8; }
.fibre-edit-head { margin-bottom: 14px; }
.fibre-edit-overview {
  display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.8fr);
  overflow: hidden;
}
.fibre-edit-overview-intro {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px;
  border-right: 1px solid var(--border); background: var(--green-50);
}
.fibre-edit-overview-intro strong { display: block; margin-top: 1px; }
.fibre-edit-overview-intro p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.42; }
.fibre-edit-meta-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
}
.fibre-edit-meta-grid > div { min-width: 0; padding: 10px 14px; }
.fibre-edit-meta-grid > div:nth-child(even) { border-left: 1px solid var(--border); }
.fibre-edit-meta-grid > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
.fibre-edit-meta-grid dt {
  margin-bottom: 2px; color: var(--muted); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.fibre-edit-meta-grid dd { margin: 0; font-size: .82rem; }
.fibre-record-form { position: relative; }
.fibre-edit-toolbar {
  position: sticky; top: 66px; z-index: 25;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding: 7px 8px 7px 10px;
  border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(45, 40, 25, .09);
}
.fibre-edit-jump-links {
  display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto;
  overscroll-behavior-inline: contain; scrollbar-width: thin;
}
.fibre-edit-jump-links a {
  flex: none; padding: 6px 9px; border-radius: 6px; color: var(--green-800);
  font-size: .76rem; font-weight: 650; white-space: nowrap;
}
.fibre-edit-jump-links a:hover { background: var(--green-50); text-decoration: none; }
.fibre-edit-toolbar-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.fibre-edit-toolbar .btn { min-height: 36px; padding-block: 6px; white-space: nowrap; }
.fibre-edit-workspace {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, .8fr);
  gap: 16px; align-items: start;
}
.fibre-edit-column { display: grid; min-width: 0; gap: 16px; align-content: start; }
.fibre-edit-column > .card { margin: 0; }
.fibre-edit-section { overflow: hidden; scroll-margin-top: 130px; }
.fibre-edit-section > summary {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center;
  gap: 10px; min-height: 62px; padding: 10px 14px; cursor: pointer; list-style: none;
}
.fibre-edit-section > summary::-webkit-details-marker { display: none; }
.fibre-edit-section > summary:hover { background: var(--green-50); }
.fibre-edit-section > summary:focus-visible { outline-offset: -3px; }
.fibre-edit-summary-copy { min-width: 0; }
.fibre-edit-section > summary h2, .fibre-edit-section > summary small { display: block; }
.fibre-edit-section > summary h2 { margin: 0; font-family: inherit; font-size: .9rem; line-height: 1.25; }
.fibre-edit-section > summary small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.fibre-edit-summary-meta {
  max-width: 220px; overflow: hidden; color: var(--muted); font-size: .72rem;
  font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap;
}
.fibre-edit-financial .fibre-edit-section > summary {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.fibre-edit-financial .fibre-edit-summary-meta {
  grid-column: 2 / 3; max-width: 100%; justify-self: start; margin-top: -4px; text-align: left;
}
.fibre-edit-financial .fibre-edit-section > summary .resource-group-chevron {
  grid-column: 3; grid-row: 1 / 3;
}
.fibre-edit-section[open] > summary { border-bottom: 1px solid var(--border); }
.fibre-edit-section[open] > summary .resource-group-chevron { transform: rotate(180deg); }
.fibre-edit-summary-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 9px; color: var(--green-700); background: var(--green-50);
}
.fibre-edit-summary-icon .icon { width: 18px; height: 18px; }
.fibre-edit-body { padding: 15px; }
.fibre-edit-groups { display: grid; gap: 12px; }
.fibre-edit-group {
  min-width: 0; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--card);
}
.fibre-edit-group-head { margin-bottom: 10px; }
.fibre-edit-group-head h3 { margin: 0; font-size: .83rem; }
.fibre-edit-group-head p { margin: 2px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.4; }
.fibre-field-grid { display: grid; gap: 10px; align-items: end; }
.fibre-field-grid .field { min-width: 0; margin-bottom: 0; }
.fibre-arrival-grid { grid-template-columns: minmax(230px, .9fr) minmax(220px, 1.25fr) minmax(130px, .6fr); }
.fibre-weight-grid { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
.fibre-testing-grid { grid-template-columns: minmax(110px, .45fr) minmax(200px, 1.2fr) minmax(230px, 1fr); }
.fibre-logistics-grid, .fibre-credit-grid, .fibre-payout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fibre-field-wide { grid-column: 1 / -1; }
.fibre-record-form input[type="number"], .fibre-record-form input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
}
.fibre-record-form input[type="number"] { text-align: right; }
.fibre-field-unit {
  margin-left: 3px; color: var(--muted); font-size: .67rem; font-weight: 650; text-transform: uppercase;
}
.fibre-total-field label { color: var(--green-800); }
.fibre-total-field input { border-color: var(--green-500); background: var(--green-50); font-weight: 650; }
.fibre-choice-field { min-width: 0; padding: 0; margin: 0; border: 0; }
.fibre-choice-field > legend {
  margin: 0 0 4px; padding: 0; color: var(--text); font-size: .8rem;
  font-weight: 600; letter-spacing: 0; text-transform: none;
}
.fibre-segmented-control {
  display: grid; grid-template-columns: .7fr .7fr 1.35fr; min-width: 0;
  padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--green-50);
}
.fibre-segmented-control label { position: relative; min-width: 0; margin: 0; color: var(--muted); }
.fibre-segmented-control input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.fibre-segmented-control span {
  display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 5px 7px;
  border-radius: 5px; font-size: .72rem; font-weight: 650; text-align: center; cursor: pointer;
}
.fibre-segmented-control input:checked + span {
  color: var(--text); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--green-500), 0 1px 3px rgba(45, 40, 25, .13);
}
.fibre-segmented-control input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -1px; }
.fibre-signed-note { margin: 8px 0 0; }
.fibre-quantity-heading { margin: 8px 0; font-size: .86rem; }
.fibre-quantity-heading:not(:first-child) { margin-top: 20px; }
.fibre-quantity-table { min-width: 560px; }
.fibre-quantity-table th:first-child { width: 110px; }
.fibre-quantity-table th:last-child { width: 220px; }
.fibre-quantity-table input { min-width: 150px; }
.fibre-edit-empty { padding: 20px; }
.fibre-edit-bottom-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding: 13px 15px; border-top: 1px solid var(--border);
}
.fibre-edit-bottom-actions .field-hint { max-width: 660px; }
.fibre-catalogue-section .card-head > div { min-width: 220px; }
.fibre-catalogue-section .card-head p { margin: 3px 0 0; font-size: .76rem; }
.fibre-rate-context { margin: 0 0 16px; }
#classification-code { text-transform: uppercase; }
@media (max-width: 1360px) {
  .fibre-edit-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .fibre-filter-primary { grid-template-columns: minmax(260px, 1fr) minmax(180px, 220px); }
  .fibre-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 900px) {
  .fibre-filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fibre-filter-options .field:last-child { grid-column: 1 / -1; }
  .fibre-edit-overview { grid-template-columns: 1fr; }
  .fibre-edit-overview-intro { border-right: 0; border-bottom: 1px solid var(--border); }
  .fibre-arrival-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fibre-arrival-grid .fibre-choice-field { grid-column: 1 / -1; width: min(100%, 360px); }
  .fibre-testing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fibre-testing-grid .fibre-choice-field { grid-column: 1 / -1; width: min(100%, 360px); }
  .fibre-weight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .fibre-filter-heading { align-items: flex-start; flex-direction: column; }
  .fibre-filter-count { white-space: normal; }
  .fibre-filter-primary, .fibre-filter-options { grid-template-columns: 1fr; }
  .fibre-filter-actions { align-items: stretch; flex-direction: column; }
  .fibre-filter-actions .btn { justify-content: center; width: 100%; }
  .fibre-context { flex-direction: column; }
  .fibre-context > :last-child { text-align: left; }
  .fibre-bar-row { grid-template-columns: 70px minmax(80px, 1fr) 58px; gap: 7px; }
  .fibre-edit-toolbar { top: 61px; padding: 7px; }
  .fibre-edit-jump-links { display: none; }
  .fibre-edit-toolbar-actions { width: 100%; margin-left: 0; }
  .fibre-edit-toolbar-actions .btn:last-child { flex: 1; justify-content: center; }
  .fibre-edit-meta-grid { grid-template-columns: 1fr; }
  .fibre-edit-meta-grid > div:nth-child(even) { border-left: 0; }
  .fibre-edit-meta-grid > div + div { border-top: 1px solid var(--border); }
  .fibre-edit-section > summary {
    grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 60px; padding: 9px 11px;
  }
  .fibre-edit-summary-icon { width: 34px; height: 34px; }
  .fibre-edit-summary-meta {
    grid-column: 2 / 3; max-width: 100%; justify-self: start; margin-top: -4px; text-align: left;
  }
  .fibre-edit-section > summary .resource-group-chevron { grid-column: 3; grid-row: 1 / 3; }
  .fibre-edit-section > summary small { display: none; }
  .fibre-edit-body { padding: 11px; }
  .fibre-edit-group { padding: 11px; }
  .fibre-arrival-grid, .fibre-weight-grid, .fibre-testing-grid,
  .fibre-logistics-grid, .fibre-credit-grid, .fibre-payout-grid { grid-template-columns: 1fr; }
  .fibre-arrival-grid .fibre-choice-field, .fibre-testing-grid .fibre-choice-field { grid-column: auto; width: 100%; }
  .fibre-field-wide { grid-column: auto; }
  .fibre-segmented-control span { min-height: 42px; }
  .fibre-quantity-table { min-width: 0; }
  .fibre-quantity-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .fibre-quantity-table, .fibre-quantity-table tbody, .fibre-quantity-table tr, .fibre-quantity-table td { display: block; width: 100%; }
  .fibre-quantity-table tr { display: grid; grid-template-columns: 78px minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--border); }
  .fibre-quantity-table tr:last-child { border-bottom: 0; }
  table.data.fibre-quantity-table td { padding: 3px 7px; border: 0; }
  .fibre-quantity-table td:last-child { grid-column: 1 / -1; }
  .fibre-quantity-table input { width: 100%; min-width: 0; }
  .fibre-edit-bottom-actions { align-items: stretch; flex-direction: column; padding-inline: 0; }
  .fibre-edit-bottom-actions .crm-action-buttons { width: 100%; }
  .fibre-edit-bottom-actions .btn { flex: 1; justify-content: center; }
}
@media print {
  .fibre-edit-toolbar, .fibre-edit-bottom-actions { display: none !important; }
}

/* ---------- grower collection points ---------- */
.collection-map-card { padding: 0; overflow: hidden; }
.collection-map { width: 100%; height: clamp(260px, 42vh, 460px); }
/* Shown until the Maps API replaces the container's contents. If the key is
   wrong or blocked it never does, and this says so rather than leaving a
   blank rectangle. */
.collection-map-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; margin: 0; padding: 24px 32px;
  text-align: center; color: var(--muted); font-size: .84rem; line-height: 1.5;
}
.collection-map-missing { margin-bottom: 16px; }
.grower-point-grid { gap: 14px; padding: 14px 18px 18px; }
.grower-point { display: flex; flex-direction: column; gap: 2px; }
.grower-point-distance { align-self: flex-start; margin: 4px 0 2px; }
.grower-no-address p { margin: 0 0 8px; }
.grower-no-address .btn { margin-top: 6px; }

/* ---------- masked payment details ---------- */
.crm-secret-row { display: flex; gap: 8px; align-items: center; }
.crm-secret-row input { flex: 1 1 auto; min-width: 0; }
.crm-secret-row .btn { flex: none; min-width: 68px; justify-content: center; }
.crm-secret input[type="password"] { letter-spacing: .28em; font-family: var(--font); }
.crm-sensitive { border-color: var(--border-strong); }

/* ---------- grower contact history ---------- */
.call-log { list-style: none; margin: 0; padding: 0; }
.call-log-entry { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.call-log-entry:last-child { border-bottom: 0; }
.call-log-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.call-log-body { margin-top: 4px; font-size: .92rem; }
.call-log-body p { margin: 6px 0 0; }
.call-log-form { border-bottom: 1px solid var(--border); }
.call-log-entry .call-log-meta form { margin: 0; }
/* Separates the two farm products in the sidebar, matching the rule that
   divides membership from the farm workspace above it. */
.sidebar .nav-group-break {
  border-top: 1px solid var(--border);
  margin: 12px 10px 0;
}
/* The staff dashboard repeats the sidebar's grouping, so the same words appear
   over each band of cards. */
.dashboard-group-heading {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin: 22px 0 10px;
}
.dashboard-group-heading:first-of-type { margin-top: 4px; }
/* A person can hold every product at once, so the badges wrap rather than
   stretching the column. */
.user-products { max-width: 190px; }
.user-products .badge { margin: 0 4px 4px 0; }

/* ---------- report a problem ---------- */
/* Anchored to the viewport so it is reachable from wherever the problem is,
   and above the sidebar's stacking context without covering its content. */
.report-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--green-700); color: #fff;
  font: inherit; font-weight: 600; font-size: .82rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(45, 40, 25, .16), 0 8px 22px rgba(45, 40, 25, .14);
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.report-fab:hover { background: var(--green-800); box-shadow: 0 3px 10px rgba(19, 99, 83, .32); }
.report-fab:active { transform: translateY(1px); }
.report-fab svg { width: 16px; height: 16px; }
.report-fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* On a phone the label is the first thing worth losing: the icon still reads
   as "tell us something" and the button stops crowding the content. */
@media (max-width: 560px) {
  .report-fab { right: 12px; bottom: 12px; padding: 10px; }
  .report-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .report-fab { display: none; } }

.report-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.report-kind { flex: 1 1 190px; }
.report-kind input { position: absolute; opacity: 0; pointer-events: none; }
.report-kind span {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
  font-size: .87rem; font-weight: 600; color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
.report-kind span svg { width: 17px; height: 17px; color: var(--green-700); opacity: .85; }
.report-kind:hover span { border-color: var(--border-strong); }
.report-kind input:checked + span { border-color: var(--green-700); background: var(--green-50); }
.report-kind input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.report-shot-preview { margin-top: 10px; }
.report-shot-preview img {
  display: block; width: 100%; max-height: 220px;
  object-fit: cover; object-position: top;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--paper);
}
.report-status { margin: 10px 0 0; font-size: .85rem; color: var(--ink-muted); }
.report-status.is-ok { color: var(--green-800); font-weight: 600; }
.report-status.is-warn { color: var(--red-600); }

:root[data-theme="dark"] .report-kind span { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .report-kind input:checked + span { background: rgba(19, 99, 83, .18); }
/* A report is prose typed into a textarea, so its line breaks are the
   reporter's own and are kept rather than collapsed. */
.report-admin-message { white-space: pre-wrap; margin: 0 0 14px; }
.report-admin-shot { display: block; margin: 4px 0 14px; max-width: 520px; text-decoration: none; }
.report-admin-shot img {
  display: block; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--paper);
}
.report-admin-shot .field-hint { margin-top: 5px; }
/* Pressed and working on the picture: the button shows it heard the click
   while the capture runs, instead of the dialog blinking in and out. */
.report-fab.is-busy { opacity: .65; pointer-events: none; }
.report-fab.is-busy span::after { content: '…'; }

/* ---------- fibre collections ---------- */
.checkbox-inline { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; margin-right: 6px; white-space: nowrap; }
.rate-card-table input[type="text"] { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.rate-card-table .rate-prior { white-space: nowrap; }
.rate-card-table tr.rate-disabled td { color: var(--ink-muted); }
.rate-card-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.rate-card-bulk input[type="text"] { width: 72px; text-align: right; }
.rate-manual-flag { font-size: .74rem; color: var(--gold-text); margin-left: 6px; }

/* ---------- fibre intake: bag grid + reconciliation rail ---------- */
.intake-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .intake-layout { grid-template-columns: minmax(0, 1fr); } }
.intake-rail { position: sticky; top: 12px; }
.intake-rail-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; font-size: .85rem; }
.intake-rail-list dt { color: var(--ink-muted); }
.intake-rail-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.intake-rail-heading { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 14px 0 6px; }
.intake-rail-derived { border-top: 1px solid var(--border); padding-top: 8px; }
.rail-ok { color: var(--green-800); font-weight: 600; }
.rail-bad { color: var(--red-600); font-weight: 600; }
.intake-rail-note { font-size: .8rem; margin: -6px 0 10px; }
.intake-rail-warning { font-size: .8rem; color: var(--gold-text); margin-top: 6px; display: flex; gap: 5px; align-items: flex-start; }
.intake-breakdown summary { cursor: pointer; font-weight: 600; }
.intake-breakdown table { margin-top: 10px; font-size: .82rem; }

.intake-grid td { padding-top: 4px; padding-bottom: 4px; }
.intake-grid input[type="text"] { min-height: 34px; }
.intake-grid input[name="weight_kg"], .intake-grid [data-new-weight] { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.intake-grade { width: 74px; text-transform: uppercase; }
.intake-comment { width: 100%; min-width: 140px; }
.intake-bag-no { font-weight: 600; color: var(--ink-muted); }
.intake-grade-echo { display: block; font-size: .72rem; color: var(--ink-muted); margin-top: 2px; min-height: 1em; }
.intake-grade-echo.is-ok { color: var(--green-800); }
.intake-grade-echo.is-bad { color: var(--red-600); }
.intake-save-state { color: var(--green-700); font-size: .9rem; }
.intake-save-state.is-saving { color: var(--ink-muted); }
.intake-save-state.is-failed { color: var(--red-600); }
.intake-row-message { font-size: .76rem; color: var(--gold-text); margin-top: 3px; }
.intake-delete svg { width: 13px; height: 13px; }
.intake-new-row td { background: var(--green-50); }
.intake-new-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.intake-sheet-of { display: flex; gap: 6px; align-items: center; }
.intake-sheet-of input { width: 58px; }
.intake-total-head { display: inline-block; min-height: 40px; padding: 8px 0; font-weight: 600; }
.intake-header-row .field { min-width: 105px; }
.intake-keys { padding: 0 18px 12px; }
.intake-grade-pad { padding: 0 18px 14px; }
.intake-pad-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; align-items: center; }
.intake-pad-section { font-size: .74rem; color: var(--ink-muted); width: 130px; }
.intake-pad-colour { display: block; font-size: .62rem; font-weight: 400; color: var(--ink-muted); }
.intake-grower .field-row { align-items: flex-end; }
:root[data-theme="dark"] .intake-new-row td { background: rgba(19, 99, 83, .12); }

/* ---------- collection summary ---------- */
.summary-wrap { max-height: 75vh; overflow: auto; }
.summary-table { font-size: .78rem; }
.summary-table th, .summary-table td { white-space: nowrap; padding: 6px 8px; }
.summary-table thead th { position: sticky; top: 0; background: var(--card); z-index: 2; }
.summary-table thead .summary-totals th, .summary-table thead .summary-totals td {
  position: sticky; top: 33px; background: var(--card); z-index: 2;
  border-bottom: 2px solid var(--border-strong); font-weight: 600;
}
.summary-sticky { position: sticky; left: 0; background: var(--card); z-index: 1; text-align: left; }
.summary-table thead .summary-sticky { z-index: 3; }
.summary-flagged .summary-sticky { border-left: 3px solid var(--red-600); }
.summary-flag { color: var(--red-600); font-size: .7rem; }
.intake-scan { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .84rem; }
.intake-scan-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }