/* The one confirm sheet (static/confirm-sheet.js; docs/plans/PRODUCT_LIBRARY_PLAN.md §3c).
   Loaded by index.html (New Entry, Edit, the Add product sheet, Plan a job,
   the board) and products.html. Its colours are the page's own tokens, with
   the grower app's values as fallbacks: app.css / products.html's --sf --tx
   --tm --br --gm, org.css's --surface --ink --line --accent and --warn-* /
   --ok-* (product-library.html), app.css's --card --ink --line. A bottom
   sheet on a phone (above the bottom nav), a centred dialog wider. */
.cfs-ov {
  --c-sf: var(--sf, var(--surface, var(--card, #fffdf8))); --c-tx: var(--tx, var(--ink, #1d2b21)); --c-tm: var(--tm, var(--ink2, #5b6560));
  --c-tm2: var(--tm2, var(--ink3, #7c857f)); --c-br: var(--br, var(--line, #e2dbcb)); --c-line2: var(--line2, #efe9dc);
  --c-head: var(--head, #faf7f0); --c-gm: var(--gm, var(--accent, #2d6a35)); --c-on-gm: var(--on-gm, var(--accent-ink, #ffffff));
  --c-warn-bg: var(--warn-bg, #FAEEDA); --c-warn-tx: var(--warn-tx, #854F0B); --c-warn-line: var(--warn-line, #efd3a3);
  --c-ok-bg: var(--ok-bg, #e8f5e9); --c-ok-tx: var(--ok-tx, #1f5a2c); --c-scrim: var(--scrim, rgba(20, 30, 22, .42));
  position: fixed; inset: 0; z-index: 10060; background: var(--c-scrim); display: flex; align-items: center; justify-content: center;
  padding: 20px; font-family: inherit; color: var(--c-tx);
}
.cfs-sheet { background: var(--c-sf); color: var(--c-tx); border-radius: 16px; width: 100%; max-width: 460px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-br); box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.cfs-h { padding: 14px 18px 10px; border-bottom: 1px solid var(--c-line2); flex: none; }
.cfs-runc { font-size: 12px; color: var(--c-tm2); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.cfs-h h3 { margin: 2px 0; font-size: 18px; line-height: 1.3; color: var(--c-tx); }
.cfs-sub { color: var(--c-tm); font-size: 13.5px; }
.cfs-b { padding: 12px 18px; overflow-y: auto; overscroll-behavior: contain; }
.cfs-st { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cfs-badge { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 9px; border: 1px solid transparent; }
.cfs-b-ok { background: var(--c-ok-bg); color: var(--c-ok-tx); }
.cfs-b-am { background: var(--c-warn-bg); color: var(--c-warn-tx); border-color: var(--c-warn-line); }
.cfs-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfs-fld label { display: block; font-size: 12px; font-weight: 700; color: var(--c-tm2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.cfs-box { display: flex; align-items: center; border: 1px solid var(--c-br); border-radius: 9px; background: var(--c-sf); overflow: hidden; }
.cfs-box input { border: 0; padding: 9px 10px; width: 100%; min-width: 0; background: none; font: inherit; font-size: 16px; color: var(--c-tx); }
.cfs-box input:focus { outline: none; }
.cfs-box:focus-within { border-color: var(--c-gm); }
.cfs-box span { padding: 0 10px; color: var(--c-tm); font-size: 13.5px; }
.cfs-box.chg { border-color: var(--c-warn-line); background: var(--c-warn-bg); }
.cfs-box.off { opacity: .5; }
.cfs-was { font-size: 12.5px; color: var(--c-warn-tx); font-weight: 600; margin-top: 3px; }
.cfs-from { font-size: 12.5px; color: var(--c-tm); margin-top: 8px; line-height: 1.45; }
.cfs-from.rec { color: var(--c-warn-tx); }
.cfs-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; }
.cfs-rows button { text-align: left; border: 1px solid var(--c-br); background: var(--c-sf); color: var(--c-tx); border-radius: 9px; padding: 7px 10px;
  font: inherit; font-size: 13px; cursor: pointer; }
.cfs-rows button.on { border-color: var(--c-gm); outline: 1px solid var(--c-gm); }
.cfs-nophi { font-size: 13.5px; color: var(--c-tx); margin-top: 10px; }
.cfs-nophi label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.cfs-nophi input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.cfs-nophi textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 7px 9px; border: 1px solid var(--c-br); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--c-sf); color: var(--c-tx); resize: vertical; }
.cfs-note { margin-top: 10px; font-size: 13.5px; }
.cfs-note label { display: block; margin-bottom: 4px; }
.cfs-note input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--c-br); border-radius: 8px; font: inherit;
  font-size: 16px; background: var(--c-sf); color: var(--c-tx); }
.cfs-law { background: var(--c-head); border: 1px solid var(--c-line2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--c-tm);
  margin-top: 12px; line-height: 1.5; }
.cfs-err { color: var(--c-warn-tx); font-size: 13px; min-height: 0; margin-top: 6px; }
.cfs-err:empty { display: none; }
.cfs-f { padding: 12px 18px 14px; border-top: 1px solid var(--c-line2); display: flex; flex-direction: column; gap: 8px; flex: none; }
.cfs-btn { border: 1px solid var(--c-br); background: var(--c-sf); color: var(--c-tx); border-radius: 10px; padding: 9px 14px; font: inherit;
  font-weight: 600; cursor: pointer; }
.cfs-p { background: var(--c-gm); border-color: var(--c-gm); color: var(--c-on-gm); width: 100%; padding: 11px 14px; font-size: 15px; line-height: 1.3; }
.cfs-p:disabled { opacity: .45; cursor: default; }
.cfs-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; gap: 10px; }
.cfs-lnk { color: var(--c-gm); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap; }
.cfs-faint { color: var(--c-tm2); }
.cfs-done { font-size: 13.5px; color: var(--c-ok-tx); background: var(--c-ok-bg); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.cfs-also { font-size: 13.5px; color: var(--c-tx); margin-top: 8px; line-height: 1.5; }
.cfs-also[hidden] { display: none; }
.cfs-left { font-size: 13.5px; color: var(--c-warn-tx); background: var(--c-warn-bg); border-radius: 10px; padding: 10px 12px; line-height: 1.5; margin-top: 8px; }
.cfs-ps { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--c-line2); cursor: pointer; font-size: 13.5px; }
.cfs-ps input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.cfs-ps > span { flex: 1; min-width: 0; }
.cfs-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 560px) {
  .cfs-ov { align-items: flex-end; padding: 0; }
  .cfs-sheet { border-radius: 18px 18px 0 0; max-width: none; margin-bottom: var(--cfs-nav, 0px); max-height: calc(100vh - var(--cfs-nav, 0px) - 24px); }
}