/* ==========================================================================
   Treatment Logger

   Direction: the pesticide label. It is the object already in the operator's
   hand on every job - label-stock paper, printed black, a hazard band in
   safety orange, and the PCP registration number given real weight.

   Restraint rule: orange appears in exactly two places, the rail marking a
   field the app filled in, and the button you press. Nowhere else. Black
   chrome top and bottom frames the record like a document on a workbench.
   ========================================================================== */

:root{
  /* surfaces - a warm working ground, label stock for the record itself */
  --paper:#E6E5DF;
  --card:#FBFBF8;
  --card-2:#F0EFEA;
  --sunk:#F0EFEA;
  --chrome:#3A2C24;   /* warm brown, not black - softer than printed ink */
  --on-chrome:#FBFBF8;

  /* text - warm near-black, printed rather than screen-grey */
  --ink:#151512;
  --ink-2:#55534A;
  --ink-3:#66635A;

  /* Lines are tinted toward the accent rather than neutral grey. A warm border
     is most of what separates a designed screen from a default one. */
  --line:#DFC4B4;
  --line-soft:#EBD9CE;
  --line-strong:#C89880;

  /* the signature - hazard-band orange, the only accent in the app */
  --amber:#C43D14;
  --amber-mid:#C43D14;
  --on-amber:#FFFFFF;
  --amber-soft:rgba(196,61,20,.10);

  /* semantic - hue-separated from the accent so they never read alike,
     and never used alone: every state also carries an icon and words */
  --pine:#1F5C3D;
  --pine-soft:rgba(31,92,61,.10);
  --clay:#91213F;
  --clay-soft:rgba(145,33,63,.09);

  --shadow-1:0 1px 2px rgba(21,21,18,.07);
  --shadow-2:0 1px 2px rgba(21,21,18,.06), 0 10px 24px -16px rgba(21,21,18,.35);
  --shadow-3:0 -1px 0 var(--line), 0 -12px 28px -22px rgba(21,21,18,.35);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* 4pt rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;

  /* type roles, sized from the Stitch generation */
  --t-section:18px;   --lh-section:24px;   /* card headings */
  --t-label:12px;     --lh-label:16px;     /* field labels, uppercase 700 */
  --t-body:16px;      --lh-body:24px;      /* inputs and values */
  --t-help:14px;      --lh-help:20px;      /* helper text */

  --tap:44px;
  --bar-h:60px;
  /* actual rendered height of the tab bar, measured at runtime - hardcoding it
     left the action bar overlapping the nav by the border width */
  --nav-h:62px;

  --t-fast:120ms;
  --t-mid:180ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- base ---------- */
/* This app commits to a single light appearance - it is read outdoors in
   daylight, where a dark screen washes out. color-scheme:light matters as much
   as the tokens: without it a phone in dark mode renders the native date and
   time pickers, selects and scrollbars dark inside a light interface. */
:root{color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.018em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{flex:none;display:block}

:focus-visible{outline:2.5px solid var(--amber-mid);outline-offset:2px;border-radius:6px}

/* ---------- app bar ---------- */
.appbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.appbar-in{
  max-width:900px;margin:0 auto;
  padding:var(--s2) var(--s4);
  display:flex;align-items:center;gap:var(--s2);min-height:56px;
}
.appbar-in .brandmark + .brand{margin-left:2px}
.iconbtn{
  width:var(--tap);height:var(--tap);flex:none;
  display:grid;place-items:center;
  border:0;background:transparent;color:var(--ink);border-radius:var(--r-sm);
  cursor:pointer;margin-left:calc(var(--s3) * -1);
  transition:background var(--t-fast) var(--ease);
}
.iconbtn:hover{background:var(--card-2)}
.iconbtn:active{background:var(--line-soft)}
.brandmark{
  flex:none;display:grid;place-items:center;color:var(--on-chrome);
  width:26px;height:26px;
}
.brandmark .mark{display:block}
.brand{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.brand b{
  font-family:var(--f-display);font-weight:700;font-size:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand span{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

main{
  max-width:900px;margin:0 auto;
  padding:var(--s5) var(--s4);
  padding-bottom:calc(var(--bar-h) + var(--s7) + env(safe-area-inset-bottom));
}

/* ---------- bottom navigation ----------
   Five destinations, icon plus label. This is the spine of the app: it is
   the same on every screen so there is never a question of where you are. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar-in{
  max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
}
.tab{
  border:0;background:transparent;cursor:pointer;
  min-height:var(--bar-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-3);padding:var(--s2) 2px;
  transition:color var(--t-fast) var(--ease);
}
.tab span{
  font-size:10.5px;font-weight:500;letter-spacing:.01em;
  font-family:var(--f-body);
}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"] span{font-weight:600}
.tab:active{color:var(--ink)}
.tab .dot{
  width:4px;height:4px;border-radius:50%;background:transparent;margin-top:-1px;
}
.tab[aria-current="page"] .dot{background:var(--amber-mid)}

/* ---------- home ---------- */
.hero{margin-bottom:var(--s5)}
.hero .eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:var(--s2);
}
.hero h1{font-size:clamp(26px,6.5vw,36px);font-weight:800;line-height:1.05}
.hero p{color:var(--ink-2);margin-top:var(--s2);font-size:15px}

.bigaction{
  width:100%;border:0;border-radius:var(--r-lg);cursor:pointer;
  background:var(--ink);color:var(--paper);
  padding:var(--s5) var(--s4);margin-bottom:var(--s4);
  display:flex;align-items:center;gap:var(--s3);text-align:left;
  box-shadow:var(--shadow-2);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.bigaction:active{transform:scale(.985)}
.bigaction .ic{color:var(--paper)}
.bigaction b{display:block;font-family:var(--f-display);font-size:20px;font-weight:700}
/* Derived from the same token as the button's own text, so it follows the
   theme on its own instead of needing a rule per theme state. */
.bigaction small{
  display:block;font-size:13px;margin-top:1px;
  color:color-mix(in srgb, var(--paper) 62%, transparent);
}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.tile{
  display:flex;flex-direction:column;gap:var(--s2);text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4);cursor:pointer;min-height:96px;
  box-shadow:var(--shadow-1);
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tile:hover{border-color:var(--ink-3)}
.tile:active{transform:scale(.985)}
.tile .ic{color:var(--ink-3)}
.tile b{font-family:var(--f-display);font-size:15px;font-weight:700;margin-top:auto}
.tile span{font-size:12.5px;color:var(--ink-3);line-height:1.35}

.statrow{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);margin-top:var(--s4);overflow:hidden;
}
.stat{padding:var(--s3) var(--s4);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--f-display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.3}

/* ---------- screen heading ---------- */
.screenhead{margin-bottom:var(--s5)}
.screenhead .eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:var(--s2);
}
.screenhead h2{font-size:clamp(21px,5vw,28px);font-weight:700;line-height:1.12}
.screenhead p{color:var(--ink-2);margin-top:var(--s2);font-size:14.5px;max-width:60ch}

/* ---------- form sections ----------
   The long treatment form is cut into five plain-language groups. You can
   see how much is left at a glance instead of scrolling into fog. */
.fgroup{margin-bottom:var(--s5)}
.fgroup > .ghead{
  display:flex;align-items:center;gap:var(--s2);
  margin-bottom:var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.fgroup > .ghead .ic{color:var(--ink-3)}
.fgroup > .ghead h3{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--f-mono);color:var(--ink-2);
}
.fgroup > .ghead .count{
  margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
}


/* Numbered step badge on each form section. Numbers are only honest when the
   content really is a sequence - filling a treatment record is one, so they
   tell you how far through you are. (Idea taken from Google Stitch.) */
.gnum{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--amber);color:var(--on-amber);
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:11px;font-weight:600;line-height:1;
}
.fgroup > .ghead h3{flex:1}

/* Marks a record as frozen as it was on the day */
.snap{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px;background:var(--card-2);color:var(--ink-2);
}

/* ---------- fields ---------- */
.field{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-bottom:var(--s2);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field.auto{border-left:3px solid var(--amber-mid)}
.field.bad{border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-soft)}
.field > label,.field .lab{
  display:block;font-family:var(--f-body);
  font-size:var(--t-label);line-height:var(--lh-label);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:var(--s2);
}
.field .autotag{
  position:absolute;right:var(--s3);top:var(--s3);
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);padding:3px 6px;border-radius:5px;
}
.field input[type=text],.field input[type=number],.field input[type=date],
.field input[type=time],.field input[type=email],.field input[type=tel],
.field select,.field textarea{
  width:100%;min-height:52px;
  background:var(--card);border:2px solid var(--line-strong);
  border-radius:var(--r-sm);padding:0 var(--s3);
  font-size:var(--t-body);line-height:var(--lh-body);
  /* 16px minimum or iOS zooms the page when the field is focused */
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea{padding:var(--s3)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);outline:none;
}
.fgroup .field input,.fgroup .field select,.fgroup .field textarea{background:var(--sunk)}
.field textarea{min-height:88px;resize:vertical;font-family:inherit;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s6);
}
.field .hint{
  font-size:var(--t-help);line-height:var(--lh-help);
  color:var(--ink-3);margin-top:var(--s2);
}
.field .hint.bad{color:var(--clay)}
.field .val{font-size:15px;font-weight:500}
.field .val small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-2);margin-top:2px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.grid2 .field{margin-bottom:0}
/* Grid and flex children default to min-width:auto, so an input with a wide
   intrinsic minimum (date and time pickers especially) pushes the row past
   the viewport and the whole page scrolls sideways. */
.grid2 > *,.qtyrow > *{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%}
/* Inputs must stay at 16px or iOS zooms the page on focus, and two of them
   side by side cannot show a full date on a 375px phone. Stack instead of
   truncating - a clipped date is worse than a taller form. */
@media (max-width:419px){.grid2{grid-template-columns:1fr;gap:var(--s2)}.grid2 .field{margin-bottom:var(--s2)}}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{
  min-height:var(--tap);display:inline-flex;align-items:center;
  border:1px solid var(--line);background:var(--sunk);border-radius:var(--r-xl);
  padding:0 var(--s4);font-size:14.5px;cursor:pointer;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chip:hover{border-color:var(--ink-3)}
.chip:active{transform:scale(.96)}
.chip.sel{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.chip.ok.sel{background:var(--pine);border-color:var(--pine);color:#fff}

/* ---------- buttons ---------- */
.btnrow{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.btn{
  min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);
  padding:0 var(--s4);cursor:pointer;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.btn.danger-solid{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:600}
.btn.danger:hover{border-color:var(--clay);color:var(--clay)}
.btn.wide{flex:1;min-width:120px}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}

/* ---------- sticky save bar ----------
   The primary action never scrolls out of reach on a form this long. */
.actionbar{
  position:fixed;left:0;right:0;z-index:45;
  bottom:var(--nav-h);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-3);
  padding:var(--s3) var(--s4);
}
.actionbar-in{max-width:900px;margin:0 auto;display:flex;gap:var(--s2);align-items:center}
.actionbar .btn{min-height:50px}
.actionbar .meta{
  flex:1;min-width:0;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  line-height:1.3;
}
/* The action bar sits ABOVE the navigation, never instead of it. Hiding the
   tab bar on a screen whose action is secondary (print, export) stranded you
   with no way back. */
body.has-actionbar main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}

/* ---------- messages ---------- */
.warn,.okmsg{
  display:flex;gap:var(--s3);align-items:flex-start;
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-bottom:var(--s3);font-size:14px;
}
.warn{border:1px solid var(--clay);background:var(--clay-soft)}
.warn .ic{color:var(--clay);margin-top:2px}
.okmsg{border:1px solid var(--pine);background:var(--pine-soft)}
.okmsg .ic{color:var(--pine);margin-top:2px}
.warn b,.okmsg b{font-family:var(--f-display)}
.warn ul{margin:var(--s2) 0 0;padding-left:18px}
.warn li{margin-bottom:2px}
.warn a{color:var(--clay);text-decoration:underline;cursor:pointer}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column;gap:var(--s2)}
.item{
  display:flex;gap:var(--s3);align-items:center;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);cursor:pointer;min-height:64px;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.item:hover{border-color:var(--ink-3)}
.item:active{transform:scale(.99)}
.item > .ic:first-child{color:var(--ink-3)}
.item .body{flex:1;min-width:0}
.item .t{font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.item .s{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.item .r{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);text-align:right;white-space:nowrap}
.item .chev{color:var(--ink-3);opacity:.6}

.empty{
  border:1px dashed var(--line);border-radius:var(--r-md);
  padding:var(--s6) var(--s4);text-align:center;color:var(--ink-3);font-size:14.5px;
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
}
.empty .ic{color:var(--ink-3);opacity:.55}
.empty b{display:block;font-family:var(--f-display);color:var(--ink-2);font-size:15px}

.pill{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;background:var(--card-2);color:var(--ink-2);
}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.pine{background:var(--pine-soft);color:var(--pine)}
.pill.clay{background:var(--clay-soft);color:var(--clay)}

/* ---------- product lines ---------- */
.pline{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4);margin-bottom:var(--s3);background:var(--card);
}
.pline-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3)}
.pline-head .n{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.linkbtn{
  background:none;border:0;color:var(--clay);cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  min-height:32px;padding:0 var(--s1);
}
.linkbtn:hover{text-decoration:underline}
.qtyrow{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:var(--s2)}
.quickamts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.quickamts button{
  /* These get tapped with cold or gloved hands on a driveway - they are the
     last place to shave a few pixels. 44px minimum, same as everything else. */
  min-height:var(--tap);min-width:52px;
  border:1px solid var(--line-soft);background:var(--sunk);border-radius:var(--r-sm);
  padding:0 var(--s3);font-family:var(--f-mono);font-size:13px;cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.quickamts button:hover{border-color:var(--ink-3)}
.quickamts button:active{transform:scale(.95)}


/* Set a missing unit weight without leaving the job. Having to abandon a
   half-filled treatment, go to Products, edit, and come back was the wrong
   answer to a 10-second question. */
.wset{
  margin-top:var(--s2);padding:var(--s3);
  background:var(--amber-soft);border-left:3px solid var(--amber);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.wset .q{
  display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:var(--s2);
}
.wset .row{display:flex;gap:var(--s2);align-items:center}
.wset input{
  flex:1;min-width:0;min-height:var(--tap);
  background:var(--card);border:2px solid var(--line-strong);
  border-radius:var(--r-sm);padding:0 var(--s3);font-size:16px;
}
.wset .btn{min-height:var(--tap);white-space:nowrap}
.wset .quick{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.wset .quick button{
  min-height:38px;padding:0 var(--s3);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);
  font-family:var(--f-mono);font-size:13px;cursor:pointer;
}
.wset .quick button:hover{border-color:var(--amber);color:var(--amber)}
.wset .src{display:block;font-size:12px;color:var(--ink-2);margin-top:var(--s2)}
.wknown{
  margin-top:var(--s2);font-size:13px;color:var(--ink-2);
  display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;
}
.wknown b{color:var(--ink)}

/* ---------- record ---------- */
.record{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.record-h{padding:var(--s5) var(--s4);border-bottom:1px solid var(--line);background:var(--card-2)}
.record-h h2{font-size:20px;font-weight:700}
.record-h .meta{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:var(--s1)}
.rsec{padding:var(--s4);border-bottom:1px solid var(--line-soft)}
.rsec:last-child{border-bottom:0}
.rsec .lab{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s1);
}
.rsec .v{font-size:15px;overflow-wrap:anywhere}
.rsec .v small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4)}
.ptable{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ptable th{
  text-align:left;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:0 var(--s3) var(--s2) 0;
}
.ptable td{padding:var(--s2) var(--s3) var(--s2) 0;border-top:1px solid var(--line-soft);vertical-align:top}
.ptable td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- annual ---------- */
.yearpick{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s4);flex-wrap:wrap}
.totals{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  overflow:hidden;box-shadow:var(--shadow-1);
}
.totals .th{
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;background:var(--card-2);
}
.totals .th b{font-family:var(--f-display);font-size:15px;font-weight:700}
.totals .th span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.trow{
  display:grid;grid-template-columns:1fr auto;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--line-soft);
}
.trow:last-child{border-bottom:0}
.trow .n{font-size:15px;font-weight:600}
.trow .ai{display:block;font-size:12px;color:var(--ink-3);font-family:var(--f-mono);margin-top:2px}
.trow .raw{display:block;font-size:12.5px;color:var(--ink-2);margin-top:var(--s1)}
.trow .amt{
  font-family:var(--f-mono);font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
}
.trow .amt em{font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:400}
.trow .flag{
  grid-column:1/-1;margin-top:var(--s2);font-size:13px;color:var(--clay);
  background:var(--clay-soft);border-radius:var(--r-sm);padding:var(--s2) var(--s3);
  display:flex;gap:var(--s2);align-items:flex-start;
}
.trow .flag .ic{margin-top:1px;flex:none}




/* favourite toggle - sits on a product row without opening it */
.starbtn{
  width:var(--tap);height:var(--tap);flex:none;display:grid;place-items:center;
  border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;
  color:var(--ink-3);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.starbtn:hover{background:var(--card-2)}
.starbtn.on{color:var(--amber)}

/* a product row with its pin: the row must flex, not claim 100% width, or the
   star gets pushed outside it */
.prow{display:flex;align-items:stretch}
.prow .item{
  flex:1;min-width:0;width:auto;
  border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;
}
.prow .starbtn{
  border:1px solid var(--line);border-left:0;
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--card);
  /* height:auto so it stretches to the row instead of leaving a 44px stub
     against a two-line product name; min-width keeps the tap area honest */
  height:auto;min-height:var(--tap);min-width:var(--tap);width:auto;
}
.prow:hover .item,.prow:hover .starbtn{border-color:var(--ink-3)}

/* the product row on the treatment form opens the picker */
.pickbtn{
  width:100%;min-height:56px;display:flex;align-items:center;gap:var(--s3);
  background:var(--sunk);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);cursor:pointer;text-align:left;
  transition:border-color var(--t-fast) var(--ease);
}
.pickbtn:hover{border-color:var(--ink-3)}
.pickbtn:active{transform:scale(.99)}
.pickbtn .pv{flex:1;min-width:0}
.pickbtn .pn{display:block;font-size:15px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.pickbtn .pp{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;overflow-wrap:anywhere}
.pickbtn .ic{color:var(--ink-3)}

/* ---------- product picker ----------
   Your own products sit at the top because they are what you reach for; the
   full Health Canada list is one search away underneath, so a product you have
   never used before never blocks a job. Picking one carries its real PCP
   number with it. */
.picker{
  position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  background:var(--paper);
  transform:translateY(100%);transition:transform var(--t-mid) var(--ease);
}
.picker.in{transform:none}
.picker-top{
  background:var(--chrome);color:var(--on-chrome);
  padding:var(--s3) var(--s4);padding-top:calc(var(--s3) + env(safe-area-inset-top));
  display:flex;align-items:center;gap:var(--s3);
}
.picker-top b{font-family:var(--f-display);font-size:16px;flex:1}
.picker-top .iconbtn{color:var(--on-chrome);margin:0}
.picker-search{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--card)}
.picker-search input{
  width:100%;min-height:var(--tap);background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:var(--s3);font-size:16px;
}
.picker-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:var(--s3) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom))}
.picker-sec{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:var(--s4) 0 var(--s2);
}
.picker-sec:first-child{margin-top:0}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;z-index:80;
  bottom:calc(var(--bar-h) + var(--s4) + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:var(--s2);
  max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-xl);padding:var(--s3) var(--s5);
  font-size:14px;font-weight:500;box-shadow:var(--shadow-2);
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.toast.in{opacity:1;transform:translate(-50%,0)}
.toast .ic{color:var(--pine)}
.toast.warn .ic{color:var(--clay)}

/* ---------- sheet ---------- */
.scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(9,14,26,0);
  display:flex;align-items:flex-end;justify-content:center;
  transition:background var(--t-mid) var(--ease);
}
.scrim.in{background:rgba(9,14,26,.55)}
.sheet{
  width:100%;max-width:460px;
  background:var(--card);color:var(--ink);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s3) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform var(--t-mid) var(--ease);
  box-shadow:0 -18px 40px -20px rgba(0,0,0,.5);
}
.scrim.in .sheet{transform:none}
.grabber{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto var(--s4)}
.sheet h3{font-size:19px;font-weight:700;margin-bottom:var(--s2)}
.sheet p{font-size:14.5px;color:var(--ink-2);margin-bottom:var(--s4)}
.sheet-actions{display:flex;gap:var(--s2)}
@media (min-width:520px){
  .scrim{align-items:center}
  .sheet{border-radius:var(--r-lg);transform:translateY(12px) scale(.98);padding-bottom:var(--s5)}
  .scrim.in .sheet{transform:none}
  .grabber{display:none}
}

/* ---------- skeleton ---------- */
.skel-wrap{display:flex;flex-direction:column;gap:var(--s2)}
.skel{
  height:64px;border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 50%,var(--card) 75%);
  background-size:220% 100%;animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- larger screens ----------
   Below 1024 this is a phone app: bottom tab bar, one column. At 1024 and up
   the navigation moves to a left rail, which is what a desktop expects - a bar
   pinned to the bottom of a big monitor is a phone app someone stretched. */
@media (min-width:760px) and (max-width:1023px){
  .tabbar-in{max-width:520px}
  .tiles{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:1024px){
  :root{--rail:232px}

  /* navigation becomes a fixed left rail */
  .tabbar{
    top:0;right:auto;width:var(--rail);
    border-top:0;border-right:1px solid var(--line);
    padding-bottom:0;display:flex;flex-direction:column;
  }
  .tabbar-in{
    grid-template-columns:1fr;max-width:none;
    padding:calc(56px + var(--s5)) var(--s3) var(--s3);
    gap:2px;
  }
  .tab{
    flex-direction:row;justify-content:flex-start;align-items:center;
    gap:var(--s3);min-height:46px;padding:0 var(--s3);
    border-radius:var(--r-sm);position:relative;
  }
  .tab span{font-size:14.5px}
  .tab:hover{background:color-mix(in srgb, var(--on-chrome) 10%, transparent)}
  .tab[aria-current="page"]{background:color-mix(in srgb, var(--on-chrome) 14%, transparent)}
  /* the active marker becomes a rail, not a dot under a label */
  .tab .dot{
    position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:3px;height:0;border-radius:2px;transition:height var(--t-fast) var(--ease);
  }
  .tab[aria-current="page"] .dot{height:22px}

  .appbar{padding-left:var(--rail)}
  main{
    margin-left:var(--rail);max-width:none;
    padding:var(--s6) var(--s6) var(--s7);
  }
  main > *{max-width:820px}
  .actionbar{left:var(--rail);bottom:0;padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
  .actionbar-in{max-width:820px;margin:0}
  body.has-actionbar main{padding-bottom:calc(84px + var(--s6))}

  .tiles{grid-template-columns:repeat(4,1fr)}
  .picker{left:var(--rail)}

  /* room to breathe: paired fields, wider record grid */
  .rgrid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}

/* very wide: keep reading measure sane and centre the working column */
@media (min-width:1500px){
  main{padding-left:var(--s7)}
  main > *{margin-left:auto;margin-right:auto}
  .actionbar-in{margin:0 auto}
}


/* ==========================================================================
   Direction overrides: black chrome, and the form as a document
   ========================================================================== */

/* --- chrome: the app is framed top and bottom in printed black --- */
.appbar{
  background:var(--chrome);border-bottom:0;color:var(--on-chrome);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.appbar .brand b{color:var(--on-chrome)}
.appbar .brand span{color:color-mix(in srgb, var(--on-chrome) 58%, transparent)}
.iconbtn{color:var(--on-chrome)}
.iconbtn:hover{background:color-mix(in srgb, var(--on-chrome) 14%, transparent)}
.iconbtn:active{background:color-mix(in srgb, var(--on-chrome) 22%, transparent)}

.tabbar{
  background:var(--chrome);border-top:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.tab{color:color-mix(in srgb, var(--on-chrome) 55%, transparent)}
.tab[aria-current="page"],.tab:active{color:var(--on-chrome)}
.tab[aria-current="page"] .dot{background:var(--amber)}

/* --- Each section is its own card, floating on the working ground with a
       warm border, generous padding and a small lift. Fields inside are
       separate blocks, not ruled rows. Structure and proportions follow the
       Google Stitch generation; the palette and the words are ours. --- */
.fgroup{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s4);
  margin-bottom:var(--s3);
  box-shadow:var(--shadow-1);
  overflow:visible;
}
.fgroup > .ghead{
  margin:0 0 var(--s4);padding:0;border:0;background:transparent;
  display:flex;align-items:center;gap:var(--s2);
}
.fgroup > .ghead h3{
  font-family:var(--f-display);
  font-size:var(--t-section);line-height:var(--lh-section);font-weight:600;
  letter-spacing:-.008em;text-transform:none;color:var(--ink);
}
.fgroup > .ghead .count{
  font-family:var(--f-mono);font-size:11px;color:var(--ink-3);margin-left:auto;
}

/* fields inside a card are plain blocks */
.fgroup .field{
  background:transparent;border:0;border-radius:0;
  padding:0;margin:0 0 var(--s4);
}
.fgroup .field:last-child{margin-bottom:0}
.fgroup .grid2{gap:var(--s3);margin-bottom:var(--s4)}
.fgroup .grid2:last-child{margin-bottom:0}
.fgroup .grid2 .field{margin-bottom:0}
.fgroup > .btnrow{margin:var(--s4) 0 0;padding:0}

/* an auto-filled field is marked by a warm inset panel plus the rail, so the
   marker survives losing the row border */
/* The rail alone marks an auto-filled field. A tinted panel behind it looked
   fine on one row and became a wash of pink where three ran together. */
.fgroup .field.auto{
  background:transparent;
  border-left:3px solid var(--amber);
  padding:0 0 0 var(--s3);
  position:relative;
}
/* sit the AUTO badge on the label line, not on top of the input */
.fgroup .field.auto .autotag{top:0;right:0}
.fgroup .field.bad{
  background:var(--clay-soft);border-left:3px solid var(--clay);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s3);
}

/* product lines: an inset sub-card, the way Stitch nests a detail block */
.fgroup .pline{
  background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:var(--s3);margin:0 0 var(--s3);
}
.fgroup .pline:last-of-type{margin-bottom:0}
.fgroup .pline .pline-head{padding:0;margin-bottom:var(--s3)}
.fgroup .pline .field{margin-bottom:var(--s3)}
.fgroup .pline .field:last-child{margin-bottom:0}

/* --- the primary action carries the accent, and nothing else does --- */
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.btn.primary:hover{
  background:color-mix(in srgb, var(--amber) 88%, var(--ink));
  border-color:color-mix(in srgb, var(--amber) 88%, var(--ink));
}
.bigaction{background:var(--amber);color:var(--on-amber)}
.bigaction .ic{color:var(--on-amber)}
.bigaction small{color:color-mix(in srgb, var(--on-amber) 72%, transparent)}
.bigaction:active{background:color-mix(in srgb, var(--amber) 88%, var(--ink))}

/* the registration number is the one number that matters on a label */
.item .s.mono{letter-spacing:.02em}

/* ---------- print ---------- */
@media print{
  :root{
    --paper:#fff;--card:#fff;--card-2:#fff;--sunk:#fff;--ink:#000;--ink-2:#333;--ink-3:#555;
    --line:#999;--line-soft:#ccc;--amber:#000;--amber-mid:#000;--pine:#000;--clay:#000;
    --shadow-1:none;--shadow-2:none;--shadow-3:none;
  }
  .appbar,.tabbar,.actionbar,.btnrow,.noprint,.toast{display:none !important}
  body{font-size:11pt}
  main{padding:0;max-width:none}
  .record{border:1px solid #000;border-radius:0}
  .ptable{min-width:0}
  @page{margin:15mm}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}