/* 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: #6b726f;
  --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: #8f9794;
    --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; }
.noscript { max-width: 520px; margin: 48px auto; text-align: center; padding: 0 var(--gutter); font-size: 15px; color: var(--ink-2); }
.noscript img { height: 38px; display: block; margin: 0 auto 16px; }
.noscript a { color: var(--ink); }
.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: 14px 0; position: sticky; top: 0; z-index: 20;
  background: var(--bg);
}
.bar__logo { height: 38px; 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: 650; font-size: 15px; color: var(--ink); letter-spacing: -.01em;
  padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.bar__home, .bar .ib { flex: none; }
.bar__sp { flex: 1; }

.ib {
  height: 40px; min-width: 40px; 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; }
.lang-note { margin-top: 8px; font-size: 13px; color: var(--muted); }

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; }
/* Equal halves whose labels can wrap: pH Down target presets. */
.seg--even button { flex: 1 1 0; min-width: 0; font-size: 13px; letter-spacing: -.01em; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }

/* ---------- 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 5px; 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: 40px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--ink); background: var(--surface);
  font: 650 13px var(--sans); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.edit-btn svg { width: 15px; height: 15px; }
.edit-btn:hover { border-color: var(--ink-2); }

.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(--muted);
}
.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; }
.chart th .th-u { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 10px; }

.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); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 650; }
.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--wide thead th:not(:first-child) { width: 17%; }
.chart--wide tbody th { white-space: nowrap; width: auto; }
.chart--wide tbody tr:not(.rec):not(.ecr):not(.phrow) th { width: 1%; padding-right: 0; }
.chart--wide td.hu { width: 1%; white-space: nowrap; padding: 11px 6px 11px 12px; text-align: left; color: var(--faint); }
.chart--wide td.hu .v { font-size: 11px; font-weight: 550; line-height: 22px; }
.chart select { font-size: 13px; }

/* Feed rows layout: the phase column hugs its content, so spare width goes between the number columns
   instead of opening a gap after the phase name. */
.chart--rows.chart--feed th:first-child, .chart--rows.chart--feed td:first-child { width: 1%; }
/* Feed rows layout: the EC and amount cells centre on the phase cell (name, recipe, pH, mix bar). The EC
   cell and dash cells get an empty second line the height of "EC x.xx", so every number shares one line. */
.chart--rows.chart--feed tbody td:not(:first-child) { vertical-align: middle; }
.chart--rows.chart--feed tbody td .ec::after,
.chart--rows.chart--feed tbody td > .dash::after { content: "\00a0"; display: block; font: 10.5px var(--num); margin-top: 2px; }
.chart--rows.chart--feed tbody td > .dash { display: block; font-size: 17px; font-weight: 650; line-height: 1.1; }
@media (max-width: 419px) {
  /* Small phones (320-414): tighter cells and wrapping phase names keep all five columns on screen. */
  .chart--rows.chart--feed th, .chart--rows.chart--feed td { padding-left: 5px; padding-right: 5px; }
  .chart--rows.chart--feed th:first-child, .chart--rows.chart--feed td:first-child { padding-left: 10px; }
  .chart--rows.chart--feed th:last-child, .chart--rows.chart--feed td:last-child { padding-right: 10px; }
}
@media (max-width: 379px) {
  /* Only the smallest phones (360-375) need long phase names to wrap. */
  .chart--rows.chart--feed .ph { white-space: normal; }
}
/* Feed charts switch to the wide layout once every chart variant fits without sideways scroll: the widest
   (2-doser, Spanish) needs 618px; 640 leaves room for font differences. So tablets in portrait get it too. */
@media (min-width: 640px) {
  .chart--rows.chart--feed { display: none; }
  .chart--wide.chart--feed { display: block; }
}
@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-add { display: block; width: 100%; padding: 12px 0 2px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--muted); font: 550 13px var(--sans); text-align: left; cursor: pointer; }
.supp-add:hover { color: var(--ink); }
.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: 12.5px; color: var(--faint); text-align: center; line-height: 1.6; }
.foot a { color: var(--muted); display: inline-block; padding: 6px 0; text-underline-offset: 3px; }
.foot a:hover { color: var(--ink); }
@media (max-width: 639px) {
  .foot > div + .foot__c { margin-top: 10px; }
  .foot__c { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; }
  .foot__c .sep { display: none; }
  .foot__c b { flex-basis: 100%; }
}

/* ---------- 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(--ink-2); font-weight: 600; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.field summary:hover { text-decoration-color: currentColor; }
.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[type="number"], .input[inputmode="decimal"] { font-family: var(--num); font-variant-numeric: tabular-nums; }
.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; }
.logo-link { display: inline-block; }
.backlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 0; padding: 6px 0; min-height: 32px; 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--3 { grid-template-columns: repeat(3, 1fr); } .tool { align-content: start; } }
/* Short pages (hub, team portal): the footer sits at the bottom of the screen. */
.app--fill { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app--fill > .foot { margin-top: auto; padding-top: 40px; }
.hero { padding: 36px 0 8px; }
.hero__k { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero h1.title { font-size: 34px; margin: 6px 0 8px; }
.hero .lede { font-size: 16px; }
@media (min-width: 640px) { .hero { padding: 64px 0 12px; } .hero h1.title { font-size: 44px; } .hub { margin-top: 28px; } .tool { min-height: 120px; padding: 22px 20px 22px 22px; } }
.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(--ink); border-color: var(--ink-2); }
.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-head .logo-link { display: block; flex: none; }
.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-qr--slot { height: 0; }
.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: 9px; color: #5b625f; }
.s-table .dash { color: #a3a9a6; }
.s-table tr.phrow td { font-size: 11px; font-weight: 650; }
.s-table tr.off td { color: #a3a9a6; }
/* Feed chart: the product name and its unit/EC helper fit their text; the five phase columns share the rest. */
.s-table--feed { table-layout: auto; }
.s-table--feed thead th:not(:first-child) { width: 17%; }
.s-table--feed tbody th { width: auto; white-space: nowrap; }
.s-table--feed tr.part th { width: 1%; padding-right: 0; }
.s-table--feed td.hu { width: 1%; white-space: nowrap; padding: 7px 4px 7px 10px; text-align: left; }
.s-table--feed td.hu .v { font-size: 9.5px; font-weight: 550; color: #5b625f; line-height: calc(18px * 1.15); }
.s-table--feed td.hu .s { font-size: 9px; color: #5b625f; }
.s-table--feed td.dash .v { font-size: 18px; line-height: 1.15; }
.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 th.unit { text-transform: none; letter-spacing: .02em; }
.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 a { color: inherit; text-decoration: none; }
.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; }
  .scrim, .sheet-panel, .toast { display: none !important; }
  /* Tools print their sheet (.print-root); pages without one (hub, team portal, gates) print their screen view. */
  .print-root { display: block; }
  [data-app] { display: none !important; }
  .app:has(~ .print-root) { display: none !important; }
  .ib, .backlink, .bar__sp { display: none !important; }
  .bar { position: static; background: none; }
  .app--fill { min-height: 0; }
  .gate { min-height: 0; }
  .gate__card .input, .gate__card .btn, .gate__err { display: none !important; }
  .logo-link, .bar__home { text-decoration: none; color: inherit; outline: none; }
  .sheet { break-after: page; page-break-after: always; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}