/* Library › Products, shared by the team app (/org) and the grower app's
   Setup › Products (static/product-library.js; product-library.html). The
   products page's own rules, moved from org.css as they were; both pages
   load org.css first (the table, chip, button and tile looks) and then this.
   The grower page (html.pl-grower) points org.css's tokens at the grower
   app's light colours; the team page keeps its own, light or dark. */

.pr-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.pr-bar .btn-p { margin-left: auto; }
.pr-q { flex: 1 1 220px; max-width: 420px; font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); }
.pr-tbl th { white-space: nowrap; }
/* long chemical names break anywhere, so the table fits a laptop without a sideways scroll */
.pr-tbl td[data-label="Active ingredient"], .pr-tbl td[data-label="Formulation"] { overflow-wrap: anywhere; min-width: 120px; }
.pr-tbl td.c-first { min-width: 230px; }
/* panel open: Formulation, Default rate, EPA reg and Label step aside (the
   panel shows them for the open product), so no column is ever cut; the
   table still scrolls in its own box if a narrow window needs it */
.view.pr-open .pr-tbl :is(.col-formulation, .col-rate, .col-epa_reg, .col-label) { display: none; }
.pr-panel { position: fixed; right: 0; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 14;
  width: min(460px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--pop-shadow);
  padding: 12px 20px 24px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
/* the form in the panel scrolls inside its own frame (products.html panel mode) */
.pr-panel.is-form { overflow: hidden; }
.pr-ph { margin: 4px 0 0; font-size: 21px; }
.pr-panel .sub { color: var(--ink2); font-size: 13px; }
.pr-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; margin: 14px 0; font-size: 14px; }
.pr-k { color: var(--ink2); }
.pr-pacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* the full label: a section of the products panel */
.pr-label { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pr-label .sc-cap { padding: 0 0 6px; }
.pr-lframe { display: block; width: calc(100% + 40px); margin: 0 -20px; height: 420px; border: 0; }
.pr-pframe { flex: 1; width: 100%; min-height: 560px; border: 0; }
.pr-panel:has(.pr-pframe) { padding: 12px 0 0; }
.pr-panel:has(.pr-pframe) .pr-phead { padding: 0 12px 0 20px; }
@media (min-width: 1100px) { .view.pr-open { padding-right: calc(460px + 24px); } }
@media (max-width: 760px) {
  .pr-bar .btn-p { margin-left: 0; }
}
@media (max-width: 899px) {
  .pr-panel { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ── the grower's page (product-library.html) ─────────────────────────────
   org.css's token names, the grower app's light values (products.html and
   app.css): cream page, white-ish cards, the grower green. No top bar and no
   bottom bar inside the frame: the grower app has its own. */
html.pl-grower {
  --bg: #f6efe0; --surface: #fffdf8; --head: #faf7f0; --ink: #1a1a1a; --ink2: #666666; --ink3: #8a8f86;
  --line: #e7dfca; --line2: #efe9dc; --line-strong: #c8d4ca; --accent: #2d6a35; --accent-hover: #1b5e20; --accent-ink: #ffffff;
  --chip-bg: #e8f5e9; --chip-tx: #2d6a35; --ok-bg: #e8f5e9; --ok-tx: #1f5a2c; --warn-bg: #FAEEDA; --warn-tx: #854F0B;
  --warn-line: #EF9F27; --warn-strong: #a35a0c; --mute-bg: #efe9dc; --mute-tx: #5b6560; --hl-bg: #f3efe3;
  --focus-ring: rgba(45, 106, 53, .22); --top-h: 0px; --bar-h: 0px; color-scheme: light;
}
html.pl-grower body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html.pl-grower .view { max-width: none; padding: 4px 4px 40px; }
html.pl-grower .stats { margin: 0 0 16px; }
html.pl-grower .stat { border: 1px solid var(--line); box-shadow: none; }
html.pl-grower .stat.w { background: var(--warn-bg); border-color: var(--warn-line); }
html.pl-grower .stat.w span, html.pl-grower .stat.w small { color: var(--warn-tx); }
html.pl-grower .stat[role="button"].on { border-color: var(--accent); }
html.pl-grower .stat.w[role="button"].on { border-color: var(--warn-tx); }
.pr-filter { display: flex; align-items: center; gap: 8px; background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-line);
  border-radius: var(--r-ctl); padding: 6px 6px 6px 12px; margin: 0 0 10px; font-size: 14px; }
.pr-filter[hidden] { display: none; }
.pr-filter span { flex: 1; }
.pr-filter .btn-link { color: var(--warn-tx); min-height: 32px; }
.pr-filter { flex-wrap: wrap; }
/* the "need confirming" tile's Confirm all (the run), inside the tile's sub-line */
/* the grower's tiles never cut a word off: they wrap; a narrow frame (the panel
   open on a laptop) puts them two across, narrower still drops the sub-line */
html.pl-grower .view { container-type: inline-size; }
html.pl-grower .stat b, html.pl-grower .stat span, html.pl-grower .stat small { white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: normal; word-break: normal; }
@container (max-width: 760px) { html.pl-grower .stats.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@container (max-width: 420px) { html.pl-grower .stats small { display: none; } }
html.pl-grower .stat .pl-run { color: var(--warn-tx); font: inherit; font-weight: 650; min-height: 0; padding: 0; }
.pr-tbl tr.sel td { background: var(--hl-bg); }
/* Your crops: one short status; amber when something is to confirm */
.pl-st { color: var(--ink2); font-size: 14px; }
.pl-am { color: var(--warn-tx); font-weight: 650; }
.pl-grey { color: var(--ink3); }
.pl-flag { color: var(--warn-tx); }
/* the panel's crop cards: one per crop grown, most acres first */
.pl-crops { margin-top: 10px; }
.pl-crops .sc-cap { padding: 0 0 6px; }
.pl-cc { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.pl-cc.am { border-color: var(--warn-line); }
.pl-cc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-cc-h b { font-size: 15.5px; }
.pl-cc-h .chip { margin-left: auto; }
.pl-cc-rp { display: flex; gap: 16px; margin: 7px 0 2px; font-size: 14px; }
.pl-cc-rp i { font-style: normal; color: var(--ink3); font-size: 12.5px; margin-right: 4px; }
.pl-cc-src { font-size: 13px; color: var(--ink2); margin-top: 4px; }
/* the crop's default rate: not a compliance value, saved on its own */
.pl-cc-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line2); }
.pl-cc-rate .pr-k { flex-basis: 100%; }
.pl-rate-in { width: 84px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit;
  font-size: 16px; background: var(--surface); color: var(--ink); }
.pl-rate-u { min-height: 36px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 14px;
  background: var(--surface); color: var(--ink); max-width: 130px; }
.pl-rate-in:focus, .pl-rate-u:focus { outline: 2px solid var(--focus-ring); border-color: var(--accent); }
.pl-lr { color: var(--ink2); }
.pl-anyc, .pl-warn { flex-basis: 100%; font-size: 13px; }
.pl-warn { color: var(--warn-tx); font-weight: 600; }
.pl-warn[hidden] { display: none; }
/* a confirmed crop's old records with no REI/PHI */
.pl-blank { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; color: var(--warn-tx); }
.pl-blank .btn-link { color: var(--warn-tx); font-weight: 650; }
.pl-cc-f { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pl-cc-f .btn { margin-left: auto; }
/* the grower's frame is narrower than the team's page (the grower app's menu
   and Setup's own list beside it), so its columns step aside to fit, one by
   one, widest first (product-library.js fitColumns): never Product or Active
   ingredient. With the panel open the table narrows beside it, as the team
   page does on a wide window; a phone's panel covers the page. */
.pr-tbl.pl-fit-formulation .col-formulation { display: none; }
.pr-tbl.pl-fit-epa_reg .col-epa_reg { display: none; }
.pr-tbl.pl-fit-sprayed .col-sprayed { display: none; }
.pr-tbl.pl-fit-price .col-price { display: none; }
.pr-tbl.pl-fit-label .col-label { display: none; }
.pr-tbl.pl-fit-signal .col-signal { display: none; }
.pr-tbl.pl-fit-group .col-group { display: none; }
.pr-tbl.pl-fit-crops .col-crops { display: none; }
.pr-tbl.pl-fit-reiphi .col-reiphi { display: none; }
html.pl-grower .pr-panel { width: min(460px, 46vw); }
html.pl-grower .view.pr-open { padding-right: calc(min(460px, 46vw) + 16px); }
html.pl-grower .pr-tbl td.c-first { min-width: 160px; }
@media (min-width: 601px) { html.pl-grower .pr-tbl :is(th, td) { padding-left: 10px; padding-right: 10px; } }
html.pl-grower .pr-tbl td.col-epa_reg .nw { white-space: normal; }   /* "34704-50035 (CA)" wraps at its space */
/* a long chemical name breaks at a space or hyphen, never inside a word: the column takes the width it needs */
html.pl-grower .pr-tbl td[data-label="Active ingredient"], html.pl-grower .pr-tbl td[data-label="Formulation"] { overflow-wrap: normal; word-break: normal; }
@media (max-width: 700px) {
  html.pl-grower .pr-panel { width: 100vw; }
  html.pl-grower .view.pr-open { padding-right: 4px; }
}
/* a phone's cards: a gap between a label and its value */
@media (max-width: 600px) {
  html.pl-grower table.stack td[data-label]:not(:empty)::before { min-width: 112px; margin-right: 8px; }
}
/* the phone's one line of tiles (tiles.css), drawn when the grower app's window is a phone's */
html.pl-grower .pl-ktline { margin: 0 0 12px; }