/* Front Row Ag tools: design tokens, components, and the Letter print sheet.
   Pages set data-theme="light" | "dark" on <html> (shared/theme.js). */

:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --gutter: 16px;

  --bg: #f6f7f6;
  --surface: #fff;
  --surface-2: #fafbfa;
  --ink: #101413;
  --ink-2: #353b39;
  --muted: #626a67;
  --faint: #8b928f;
  --line: #e2e5e3;
  --line-soft: #eef0ef;
  --chip: #f1f3f2;
  --chip-line: #e2e5e3;
  --accent: #b3121b;
  --accent-soft: #fbeaea;
  --primary: #101413;
  --on-primary: #fff;
  --seg-bg: #eceeed;
  --seg-line: transparent;
  --seg-on: #fff;
  --seg-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  --scrim: rgba(12, 14, 14, .38);
  --sheet-shadow: 0 -8px 40px rgba(0, 0, 0, .16);
  --warn: #8a5a00;
  --warn-bg: #fff6e0;
  --c-a: #2e7d4a;
  --c-b: #2f62b0;
  --c-bl: #c0262d;
  --c-phz: #8a6d1f;
  --c-cplus: #b4561c;
  --c-salt: #5d6461;
  color-scheme: light;
}

/* Dark tokens apply on screen only: print always uses the light set, whatever the phone's theme. */
@media not print {
  :root[data-theme="dark"] {
    --bg: #0c0e0e;
    --surface: #141817;
    --surface-2: #111514;
    --ink: #eef1f0;
    --ink-2: #c4cac8;
    --muted: #98a09d;
    --faint: #6d7572;
    --line: #252b29;
    --line-soft: #1c2120;
    --chip: #1b201f;
    --chip-line: #2a302e;
    --accent: #ff5a5f;
    --accent-soft: #2a1516;
    --primary: #eef1f0;
    --on-primary: #0c0e0e;
    --seg-bg: #141817;
    --seg-line: #252b29;
    --seg-on: #262c2a;
    --seg-shadow: none;
    --scrim: rgba(0, 0, 0, .6);
    --sheet-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
    --warn: #f3c969;
    --warn-bg: #2a2412;
    --c-a: #5cc184;
    --c-b: #6d9cf0;
    --c-bl: #ff6b6f;
    --c-phz: #d9b95e;
    --c-cplus: #ee8a4a;
    --c-salt: #aeb5b2;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 1;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.app { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter) 48px; }

.bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; position: sticky; top: 0; z-index: 20;
  background: var(--bg);
}
.bar__logo { height: 30px; display: block; }
.bar__logo--dark { display: none; }
:root[data-theme="dark"] .bar__logo--light { display: none; }
:root[data-theme="dark"] .bar__logo--dark { display: block; }
.bar__tool {
  font-weight: 600; font-size: 14px; color: var(--muted);
  padding-left: 10px; border-left: 1px solid var(--line); white-space: nowrap;
}
.bar__sp { flex: 1; }

.ib {
  height: 36px; min-width: 36px; padding: 0 10px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font: 600 12px var(--sans); letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ib svg { width: 16px; height: 16px; }

h1.title { font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; margin: 10px 0 4px; }
.lede { color: var(--muted); font-size: 14px; max-width: 60ch; }

.banner {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 550;
}

/* ---------- segmented control ---------- */
.seg {
  display: flex; background: var(--seg-bg); border: 1px solid var(--seg-line);
  border-radius: var(--r-md); padding: 3px; gap: 2px;
}
.seg button {
  flex: 1; min-height: 36px; padding: 4px 8px; border: 0;
  border-radius: calc(var(--r-md) - 3px); background: transparent;
  color: var(--muted); font: 600 13.5px var(--sans); line-height: 1.2;
}
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: var(--seg-shadow); }
.seg--wrap { flex-wrap: wrap; }
.seg--wrap button { flex: 1 1 auto; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }

.setup { margin-top: 16px; padding: 12px 12px 12px 14px; display: flex; align-items: flex-start; gap: 10px; }
.setup__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.chip {
  font-size: 12.5px; font-weight: 550; padding: 5px 9px; border-radius: 999px;
  background: var(--chip); color: var(--ink); border: 1px solid var(--chip-line); white-space: nowrap;
}
.chip--accent { color: var(--accent); border-color: currentColor; background: transparent; }
.edit-btn {
  height: 34px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--accent); color: var(--accent); background: transparent;
  font: 650 13px var(--sans); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.edit-btn svg { width: 15px; height: 15px; }

.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 2px 8px; }
.sec h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.sec__u { font-size: 12px; color: var(--muted); text-align: right; }

.note { font-size: 13px; color: var(--ink-2); padding: 12px 14px; display: flex; gap: 10px; margin-top: 10px; }
.note b { color: var(--ink); font-weight: 650; }
.note__ic {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--chip);
  display: grid; place-items: center; font: 700 11px var(--num); color: var(--accent);
}
.note--warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.note--warn .note__ic { background: transparent; color: var(--warn); border: 1px solid currentColor; }

/* ---------- chart: phases as rows (phone) ---------- */
.chart { overflow: hidden; }
.chart table { width: 100%; border-collapse: collapse; }
.chart th {
  white-space: nowrap; font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); text-align: right;
  padding: 10px 8px 8px; border-bottom: 1px solid var(--line); vertical-align: bottom;
}
.chart th:first-child, .chart td:first-child { text-align: left; padding-left: 12px; }
.chart th:last-child, .chart td:last-child { padding-right: 12px; }
.chart td { padding: 11px 8px; border-bottom: 1px solid var(--line-soft); text-align: right; vertical-align: top; }
.chart tbody tr:last-child td { border-bottom: 0; }
.chart .ph { font-weight: 650; font-size: 14px; white-space: nowrap; }
.chart .rc { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.chart .phr { font-size: 11px; color: var(--faint); margin-top: 1px; white-space: nowrap; }
.chart .ec { font-size: 15px; font-weight: 600; }
.chart .v { font-size: 17px; font-weight: 650; line-height: 1.1; white-space: nowrap; }
.chart .s { font-size: 10.5px; color: var(--faint); margin-top: 2px; white-space: nowrap; }
.chart .dash { color: var(--faint); }
.chart .off td { color: var(--faint); }
.chart .off .ph { color: var(--muted); }
.chart th .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.chart th .th-name { text-transform: none; letter-spacing: .01em; white-space: normal; display: inline-block; max-width: 7em; text-align: right; }

.k-partA { --pc: var(--c-a); }
.k-partB, .k-partBphoszyme, .k-tank2 { --pc: var(--c-b); }
.k-bloom { --pc: var(--c-bl); }
.k-phoszyme { --pc: var(--c-phz); }
/* Component Plus: CaNO3 and MKP are plain ag salts (neutral); Component Plus is its bag orange. */
.line-cplus .k-partA, .line-cplus .k-bloom { --pc: var(--c-salt); }
.line-cplus .k-partB, .line-cplus .k-partBphoszyme, .line-cplus .k-tank2 { --pc: var(--c-cplus); }
td.pc, th.pc { color: var(--pc); }
.dot { background: var(--pc); }

.mix { display: flex; gap: 2px; height: 5px; margin-top: 7px; border-radius: 3px; overflow: hidden; max-width: 100%; }
.mix i { display: block; background: var(--pc); min-width: 2px; }

/* chart: phases as columns (tablet and desktop) */
.chart--wide { display: none; }
.chart--wide th { text-align: center; }
.chart--wide td { text-align: center; vertical-align: middle; }
.chart--wide tbody th { vertical-align: middle; }
.chart--wide tbody th {
  text-align: left; font-size: 11px; letter-spacing: .06em; color: var(--muted);
  padding: 12px 8px 12px 14px; border-bottom: 1px solid var(--line-soft); white-space: normal; width: 150px;
}
.chart--wide tbody th.pc { color: var(--pc); }
.chart--wide thead th { padding: 12px 8px 10px; font-size: 11px; }
.chart--wide thead th .wk { display: block; font-size: 10.5px; font-weight: 550; letter-spacing: .02em; color: var(--faint); text-transform: none; margin-top: 2px; }
.chart--wide .rec td { font-weight: 600; }
.chart--wide .ecr td { font-size: 17px; font-weight: 650; }
.chart--wide .v { font-size: 20px; }
.chart--wide .mix { margin: 8px auto 0; }
.chart--wide tbody tr:last-child th { border-bottom: 0; }
.chart--wide .phrow td { font-size: 13px; font-weight: 600; }
.chart select { font-size: 13px; }

@media (min-width: 760px) {
  .chart--rows { display: none; }
  .chart--wide { display: block; }
  h1.title { font-size: 30px; }
}

/* ---------- actions ---------- */
.actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: 14px; }
.btn {
  min-height: 46px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: 650 14px var(--sans);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn__label { display: none; }
@media (min-width: 560px) {
  .actions { grid-template-columns: auto auto auto; justify-content: start; }
  .btn__label { display: inline; }
}

/* ---------- stock tanks ---------- */
.tanks { display: grid; gap: 8px; }
@media (min-width: 760px) { .tanks { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.tank { padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; }
.tank__tag {
  grid-row: span 2; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; font: 700 13px var(--sans); color: #fff; background: var(--pc);
}
:root[data-theme="dark"] .tank__tag { color: #0c0e0e; }
.tank__n { font-weight: 650; }
.tank__d { font-size: 12.5px; color: var(--muted); grid-column: 2 / 4; }
.tank__big { grid-row: span 1; text-align: right; }
.tank__big .v { font-size: 18px; font-weight: 650; white-space: nowrap; }
.tank__big .s { font-size: 11px; color: var(--faint); white-space: nowrap; }
.tank__adds { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-2); }

.sec__foot { font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; }
.fold { margin-top: 16px; }
.fold summary { padding: 14px; font-weight: 650; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; color: var(--muted); font-weight: 500; }
.fold[open] summary::after { content: "–"; }
.fold__h { padding: 4px 14px 0; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.at-line { color: var(--warn) !important; font-weight: 650; }
.steps--notes ul { padding-left: 1.1em; }
.steps--notes li { font-size: 13px; color: var(--ink-2); }
.supp--hint { grid-template-columns: 1fr; }
.steps { padding: 6px 14px 10px 14px; }
.steps ol { padding-left: 1.3em; }
.steps li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.steps li:last-child { border-bottom: 0; }

/* ---------- supplements list ---------- */
.supps { padding: 4px 14px; }
.supp { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.supp:last-child { border-bottom: 0; }
.supp__n { font-weight: 650; font-size: 14px; }
.supp__r { font-size: 13px; text-align: right; font-weight: 600; }
.supp__d { grid-column: 1 / 3; font-size: 12.5px; color: var(--muted); }

.foot { margin-top: 32px; font-size: 12px; color: var(--faint); text-align: center; line-height: 1.7; }
.foot a { color: var(--muted); }

/* ---------- edit sheet: bottom sheet on phone, side panel on desktop ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; opacity: 0; transition: opacity .2s; }
.scrim.open { opacity: 1; }
.sheet-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: var(--sheet-shadow);
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}
.sheet-panel.open { transform: none; }
.sheet-panel__head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.sheet-panel__head h2 { font-size: 16px; font-weight: 700; flex: 1; }
.sheet-panel__grab { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.sheet-panel__body { overflow-y: auto; padding: 4px 16px 24px; overscroll-behavior: contain; }
.sheet-panel__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet-panel__foot .btn { width: 100%; }
@media (min-width: 900px) {
  .sheet-panel {
    left: auto; top: 0; bottom: 0; width: 420px; max-height: none;
    border-radius: 0; transform: translateX(100%);
    box-shadow: -8px 0 40px rgba(0, 0, 0, .14);
  }
  .sheet-panel__grab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet-panel, .scrim { transition: none; } }

.field { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.field:last-child { border-bottom: 0; }
.field__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.field__help { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.field__help p + p { margin-top: 6px; }
.field details { margin-top: 8px; }
.field summary { font-size: 12.5px; color: var(--accent); font-weight: 600; cursor: pointer; list-style: none; }
.field summary::-webkit-details-marker { display: none; }
.field summary::before { content: "+ "; }
.field details[open] summary::before { content: "– "; }
.input {
  width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 15px;
}
.input:focus { outline: none; border-color: var(--accent); }
.input-row { display: flex; align-items: center; gap: 8px; }
.input-row .input { width: 110px; }
.input-row span { font-size: 13px; color: var(--muted); }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.grid5 label { font-size: 10.5px; color: var(--muted); display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid5 .input { height: 38px; padding: 0 6px; font-size: 14px; text-align: center; }
.grid5 select.input { padding: 0 2px; font-size: 12.5px; text-align-last: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid3 label { font-size: 11.5px; color: var(--muted); display: block; margin-bottom: 4px; }
.grid3 .input { width: 100%; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.tog {
  min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font: 600 13px var(--sans);
}
.tog[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--primary); color: var(--on-primary); font: 600 13.5px var(--sans);
  padding: 10px 16px; border-radius: 999px; transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- access gate ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px var(--gutter); }
.gate__card { max-width: 420px; width: 100%; padding: 28px 24px; text-align: left; }
.gate__card img { height: 32px; margin-bottom: 18px; }
.gate__card h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.gate__card p { font-size: 14px; color: var(--muted); }
.gate__card .input { margin: 18px 0 10px; }
.gate__card .btn { width: 100%; }
.gate__err { color: var(--accent) !important; margin-top: 10px; font-size: 13px !important; }
.gate__foot { margin-top: 18px; font-size: 13px; }

/* ---------- shared tool chrome ---------- */
.bar__home { display: block; }
.backlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.backlink svg { width: 15px; height: 15px; }
.backlink:hover { color: var(--ink); }

/* ---------- hub ---------- */
.hub { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 640px) { .hub { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 960px) { .hub { grid-template-columns: repeat(3, 1fr); } .tool { align-content: start; } }
.tool {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 18px 16px 18px 18px; text-decoration: none; color: var(--ink); min-height: 96px;
  transition: border-color .15s, transform .15s;
}
.tool:hover { border-color: var(--ink-2); }
.tool:active { transform: scale(.995); }
.tool__n { font-weight: 700; font-size: 17px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool__d { grid-column: 1; font-size: 13.5px; color: var(--muted); }
.tool__go { grid-row: 1 / 3; grid-column: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.tool__go svg { width: 16px; height: 16px; }
.tool:hover .tool__go { color: var(--accent); border-color: var(--accent); }
.tool__tag { font-size: 11px; font-weight: 650; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; color: var(--accent); border: 1px solid currentColor; }
.hub__k { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 28px 2px 0; }

/* ---------- results and settings on the smaller tools ---------- */
.result { padding: 16px 16px 14px; margin-top: 16px; }
.result__k { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.result__v { font: 650 34px/1.1 var(--num); letter-spacing: -.02em; margin-top: 6px; }
.result__v small { font-size: 16px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.result__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 0; margin-top: 12px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.result__row .num { font-weight: 600; }
.result__d { font-size: 13px; color: var(--muted); margin-top: 8px; }
.form { padding: 2px 14px; margin-top: 16px; }
.form .field__label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.form .field { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form .field--stack { display: block; }
.form .field--stack .field__label { margin-bottom: 8px; }
.form .input-row .input { width: 104px; text-align: right; font-family: var(--num); }
.ref { width: 100%; border-collapse: collapse; font-size: 14px; }
.ref th { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 10px 14px 8px; border-bottom: 1px solid var(--line); }
.ref td { text-align: right; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
.ref th:first-child, .ref td:first-child { text-align: left; }
.ref tr:last-child td { border-bottom: 0; }
.ref tr.on td { background: var(--accent-soft); font-weight: 650; }
.prose { padding: 4px 14px 14px; font-size: 14px; color: var(--ink-2); }
.prose p + p { margin-top: 8px; }
.prose b { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.prose th, .prose td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line-soft); }
.prose th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plot { width: 100%; height: auto; display: block; margin-top: 8px; }
.plot text { font-family: var(--sans); fill: var(--muted); }
.plot .grid { stroke: var(--line); stroke-width: 1; }
.plot .curve { fill: none; stroke-width: 2; }
.split { display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.ref .s { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.ref td { vertical-align: middle; }
.ref.usage td, .ref.usage th { padding-left: 8px; padding-right: 8px; }
.ref.usage td:first-child, .ref.usage th:first-child { padding-left: 14px; }
@media (max-width: 560px) {
  .ref { font-size: 13px; }
  .ref td, .ref th { padding-left: 4px; padding-right: 4px; }
  .ref td:first-child, .ref th:first-child { padding-left: 12px; }
  .ref td:last-child, .ref th:last-child { padding-right: 12px; }
  .ref.usage td:not(:first-child):not(:last-child), .ref.usage th:not(:first-child):not(:last-child) { padding-left: 4px; padding-right: 4px; }
  .ref.usage .input { width: 68px !important; padding: 0 5px; font-size: 12.5px; }
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 4px; font-size: 12.5px; color: var(--ink-2); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.warnline { display: block; font-size: 11.5px; color: var(--warn); font-weight: 600; margin-top: 3px; white-space: normal; }
.chart .tgt { font-size: 15px; font-weight: 650; }
.chart .tgt--manual { color: var(--accent); }
.col-veg { --pc: var(--c-a); }
.col-stretch { --pc: var(--c-b); }
.col-stack { --pc: var(--c-phz); }
.col-swell { --pc: var(--c-bl); }
.col-ripen { --pc: var(--ink-2); }
.card + .card.note { margin-top: 10px; }

/* ================= print: Letter sheets ================= */
.print-root { display: none; }

/* A sheet fills Letter's printable area, not the paper: @page sets .5in margins, and iOS
   Safari prints with its own margins of up to about .5in, so a sheet at most 7.5in by 10in
   fits one page either way. The height stays a little under 10in so rounding never spills
   a sliver onto a blank page. */
.sheet {
  width: 7.5in; max-width: 100%; height: 9.9in; margin: 0 auto; overflow: hidden; background: #fff; color: #141716;
  display: flex; flex-direction: column;
  font-family: var(--sans); font-size: 10.5px; line-height: 1.45;
  --c-a: #2e7d4a; --c-b: #2f62b0; --c-bl: #c0262d; --c-phz: #8a6d1f; --c-cplus: #b4561c; --c-salt: #5d6461;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet .num { font-family: var(--num); }
.s-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid #141716; }
.s-head .logo { height: 42px; }
.s-title { flex: 1; }
.s-kicker { font: 650 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #b3121b; }
.s-title h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 3px; }
.s-meta { text-align: right; font-size: 10px; color: #5b625f; line-height: 1.55; }
.s-meta b { color: #141716; font-weight: 650; }
.s-qr { height: .78in; width: .78in; margin-left: 4px; }
.s-setup { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 12px; }
.s-setup span { font-size: 9.5px; font-weight: 600; padding: 3px 7px; border-radius: 4px; background: #f0f2f1; color: #2a2f2d; }
.s-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; table-layout: fixed; }
.s-table th, .s-table td { padding: 7px 5px; text-align: center; border-bottom: 1px solid #e4e7e5; }
.s-table thead th { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650; color: #fff; background: #141716; border-bottom: 0; }
.s-table thead th .wk { display: block; font-size: 8.5px; letter-spacing: .02em; text-transform: none; font-weight: 500; color: #c9cfcc; margin-top: 1px; }
.s-table tbody th { text-align: left; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 650; color: #5b625f; width: 1.3in; line-height: 1.25; }
.s-table tbody th.pc { color: var(--pc); }
.s-table tr.part th { text-transform: none; letter-spacing: 0; font-size: 11px; }
.s-table td.pc { color: var(--pc); }
.s-table .rec td { font-size: 13px; font-weight: 600; }
.s-table .ecr td { font-size: 15px; font-weight: 650; }
.s-table .part td .v { font-size: 18px; font-weight: 650; line-height: 1.15; }
.s-table .part td .s { font-size: 8.5px; color: #7b827f; }
.s-table .dash { color: #a3a9a6; }
.s-table tr.phrow td { font-size: 11px; font-weight: 650; }
.s-table tr.off td { color: #a3a9a6; }
.s-note { font-size: 9px; color: #6b726f; margin-top: 6px; line-height: 1.5; }
.s-warn { font-size: 9.5px; color: #8a5a00; background: #fff6e0; padding: 6px 8px; border-radius: 4px; margin-top: 6px; }
.s-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 16px; }
.s-two--even { grid-template-columns: 1fr 1fr; margin-top: 4px; }
.s-two--stock { grid-template-columns: 1.75fr 1fr; margin-top: 14px; }
.sheet .nowrap { white-space: nowrap; }
.s-h { font: 700 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #b3121b; margin-bottom: 6px; }
.s-mini { width: 100%; border-collapse: collapse; font-size: 10px; }
.s-mini th { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #6b726f; font-weight: 650; text-align: left; padding: 4px 5px; border-bottom: 1px solid #d9dddb; }
.s-mini td { padding: 4px 5px; border-bottom: 1px solid #eceeed; vertical-align: top; }
.s-mini td.r, .s-mini th.r { text-align: right; }
.s-mini .sub td:first-child { padding-left: 14px; }
.s-mini tr.total td { font-weight: 700; border-top: 1px solid #141716; }
.s-p { font-size: 10px; line-height: 1.55; color: #353b39; }
.s-p + .s-p { margin-top: 6px; }
.s-list { padding-left: 1.2em; font-size: 10px; line-height: 1.5; color: #353b39; }
.s-list li { margin-bottom: 3px; }
.s-list li::marker { color: #6b726f; font-weight: 600; }
.s-notes { margin-top: 12px; flex: 1; display: flex; flex-direction: column; min-height: .5in; }
.s-notes--fill { min-height: 0; }
.s-lines { flex: 1; min-height: 0; overflow: hidden; }
.s-lines i { display: block; height: 24px; border-bottom: 1px solid #e3e6e4; }
.s-art { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border: 1px solid #e4e7e5; border-radius: 6px; padding: 8px 10px 10px; }
.s-art__panel svg { width: 100%; height: 1.5in; display: block; }
.s-art--cplus .fa { --part: #c86324; --part-l: #d98a52; --part-d: #933811; }
.s-key { list-style: none; margin: 0; padding: 0; }
.s-key li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eef0ef; }
.s-key i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--pc, #c4cac8); }
.s-key--opt { color: #6d7572; }
.s-key--opt i { background: #c4cac8; }
.s-line svg { width: 100%; height: 2in; display: block; }
.s-art__panel figcaption { font-size: 9px; line-height: 1.35; color: #353b39; display: flex; gap: 5px; align-items: flex-start; margin-top: 2px; }
.s-art__n { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #141716; color: #fff; font: 700 8px/14px var(--sans); text-align: center; }
.s-block { margin-top: 14px; }
.s-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid #e1e4e2; font-size: 9px; color: #6b726f;
}
.s-foot b { color: #141716; }
.s-spacer { flex: 1; min-height: 8px; }
/* usage estimate */
.s-for { margin-top: 5px; font-size: 12px; color: #353b39; overflow-wrap: anywhere; }
.s-for b { color: #141716; font-weight: 650; }
.sheet--usage .s-block { margin-top: 11px; }
.sheet--usage .s-list li { margin-bottom: 1px; }
.sheet--usage .s-meta { max-width: 2.2in; overflow-wrap: anywhere; }
.s-stats { display: flex; gap: 0; border: 1px solid #e4e7e5; border-radius: 6px; margin: 2px 0 4px; }
.s-stats > div { flex: 1; padding: 8px 12px; border-left: 1px solid #e4e7e5; }
.s-stats > div:first-child { border-left: 0; }
.s-stats__k { font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650; color: #6b726f; }
.s-stats__v { font-size: 16px; font-weight: 650; margin-top: 2px; }
.s-mini--order td { padding-top: 4.5px; padding-bottom: 4.5px; }
.s-sub { font-size: 8.5px; color: #7b827f; }
.s-typed { font-size: 10.5px; line-height: 1.5; color: #141716; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 4px; }
.s-cta { margin-top: 10px; padding: 8px 12px; border-left: 3px solid #b3121b; background: #f6f7f6; font-size: 10px; color: #353b39; }
.s-cta b { color: #141716; }
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.45; resize: vertical; }

@media print {
  @page { size: letter; margin: .5in; }
  html, body { background: #fff !important; color: #141716; }
  :root { color-scheme: light; }
  .app, .scrim, .sheet-panel, .toast, .gate { display: none !important; }
  .print-root { display: block; }
  .sheet { break-after: page; page-break-after: always; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}