/* Shared visual language for field, shared-record and public tool pages.
   All visual overrides are screen-only: existing print reports stay intact. */
/* One token set for every field page (#266). The pages carry no palette
   of their own: they read these names, so a colour changes in one place.
   The role names match the console's (app.html); the older names below
   them point at a role, for the rules that still use them. The set holds
   in print as well, so a printed lot report keeps its lines and tones.
   The front door and the sign-in page read the same set (#267). */
html:has(.field-page),html[data-theme]:has(.field-page),
html[data-theme]:has(body.public-home),html[data-theme]:has(body.public-auth) {
  --bg:#f7f9f3; --surface:#fff; --surface-2:#eef3e7; --surface-3:#e0ead8; --tint:#f8faf4;
  --text:#1b3b2c; --text-2:#43594d; --text-3:#5b6c5f; --text-4:#88978b;
  --line:#dde6d7; --line-strong:#c7d4c1; --line-3:#a9bf9f; --line-dash:#b6c7ab;
  --brand:#2b5f41; --brand-strong:#204b32; --on-brand:#fff; --good-soft:#eaf2e1; --good-line:#d5e2c9;
  --warn:#8b631d; --warn-soft:#fbf1d8; --bad:#ac4438; --bad-soft:#faece8;
  --info:#3b5a8c; --accent:#836123; --focus:#6c934b;
  --sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --serif:var(--sans);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --shadow-1:0 2px 5px #193d2410; --shadow-2:0 12px 35px #193d2410;
  /* Older names, until no field page uses them. */
  --paper:var(--bg); --paper-2:var(--surface-2); --paper-3:var(--surface-3); --card:var(--surface);
  --ink:var(--text); --ink-2:var(--text-2); --ink-3:var(--text-3); --ink-4:var(--text-4);
  --rule:var(--line); --rule-2:var(--line-strong); --rule-3:var(--line-3);
  --emerald:var(--brand); --emerald-2:var(--brand-strong); --green:var(--brand); --cta:var(--brand); --cta-2:var(--brand-strong);
  --on-emerald:var(--on-brand); --emerald-soft:var(--good-soft); --soft:var(--good-soft);
  --amber:var(--warn); --amber-soft:var(--warn-soft); --crimson:var(--bad); --crimson-soft:var(--bad-soft); --red:var(--bad);
  --grat:transparent;
  color-scheme:light;
}
/* Dark, for the four phone pages. theme.js resolves the reader's choice
   (or the phone's, when they made none) to data-theme, as it does in the
   console. The other field pages (dossier, upload check, tools) stay
   light until they are on this set. */
@media screen {
  html[data-theme="dark"]:has(:is(.field-visit,.field-farmer,.field-lot,.field-supplier)) {
    --bg:#0d1310; --surface:#121b16; --surface-2:#16211b; --surface-3:#1d2b22; --tint:#16211b;
    --text:#e9e4d3; --text-2:#b4ad96; --text-3:#9aa391; --text-4:#5a6257;
    --line:#22302a; --line-strong:#2f3f36; --line-3:#3c5145; --line-dash:#3c5145;
    --brand:oklch(0.80 0.15 152); --brand-strong:oklch(0.88 0.15 158); --on-brand:#06170e;
    --good-soft:#18291f; --good-line:#2f3f36;
    --warn:oklch(0.82 0.12 74); --warn-soft:#2a2414; --bad:oklch(0.72 0.15 32); --bad-soft:#2e1a16;
    --info:oklch(0.72 0.12 265); --accent:#d3ac63; --focus:oklch(0.80 0.15 152);
    color-scheme:dark;
  }
}
@media screen {
  html:has(.field-page) { background:var(--bg); color:var(--text); }
  .field-page { background:var(--bg); background-image:none; color:var(--ink); font:15px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
  .field-page * { box-sizing:border-box; }
  .field-page a { color:var(--emerald); text-underline-offset:4px; }
  .field-page h1 { color:var(--ink); font:600 34px/1.15 var(--sans); letter-spacing:-1.25px; margin:0 0 14px; }
  .field-page h2 { color:var(--ink); font-family:var(--sans); letter-spacing:-.4px; }
  .field-page button,.field-page input,.field-page textarea,.field-page select { font-family:var(--sans); }
  .field-page :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
  .field-page input,.field-page select,.field-page textarea { color:var(--ink); border:1px solid var(--rule-2); background:var(--surface); border-radius:9px; padding:12px 13px; line-height:1.4; }
  .field-page input[type=checkbox],.field-page input[type=radio] { accent-color:var(--emerald); }
  .field-page input:focus,.field-page select:focus,.field-page textarea:focus { border-color:var(--emerald); outline:2px solid var(--focus); outline-offset:2px; }
  .field-page label { color:var(--ink-2); font:500 13px/1.5 var(--sans); text-transform:none; letter-spacing:0; }
  .field-page button { border-radius:9px; min-height:42px; font-weight:600; transition:background .15s,border-color .15s; }
  .field-page button:hover { border-color:var(--emerald); }
  .field-page button:not(:disabled):active { filter:brightness(.94); transform:translateY(1px); }
  .field-page button:disabled { opacity:.5; cursor:not-allowed; }
  .field-page .go,.field-page button.primary,.field-page .geo-act:not(.ghost),.field-page .widget .btn:not(.btn-secondary) { background:var(--emerald); color:var(--on-brand); border-color:var(--emerald); font-family:var(--sans); }
  .field-page .go:hover,.field-page button.primary:hover,.field-page .widget .btn:not(.btn-secondary):hover { background:var(--cta-2); }
  .field-page .hint,.field-page .small,.field-page .sub,.field-page .note { font-family:var(--sans); line-height:1.7; color:var(--ink-3); }
  .field-page .sub { font-size:14px; margin-bottom:25px; }
  .field-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 0 24px; margin:0 0 30px; border-bottom:1px solid var(--rule); }
  .field-brand { display:flex; gap:9px; align-items:center; text-decoration:none; font:700 20px/1 var(--sans); letter-spacing:-.7px; color:var(--ink)!important; }
  .field-brand img { border-radius:6px; }
  .field-header>span { font:500 10px/1.5 var(--sans); color:var(--ink-3); padding:5px 9px; border:1px solid var(--rule); border-radius:5px; background:var(--surface); }
  .field-page.field-farmer,.field-page.field-visit { max-width:640px; padding:28px 24px 75px; }
  .field-page.field-dossier { max-width:840px; padding:28px 24px 75px; }
  .field-page.field-lot,.field-page.field-upload { max-width:1040px; padding:28px 28px 75px; }
  .field-page .step { padding:24px; border:1px solid var(--rule); border-radius:13px; background:var(--surface); margin-bottom:16px; }
  .field-page .step h2 { font-size:17px; gap:12px; padding-bottom:10px; margin-bottom:12px; }
  .field-page .step h2 svg { background:var(--good-soft); border-radius:8px; padding:5px; width:36px; height:36px; }
  .field-page .step .row { padding-top:12px; padding-bottom:12px; }
  .field-page .owed { padding:27px; background:var(--good-soft); border:1px solid var(--good-line); border-radius:14px; margin:0 0 20px; }
  .field-page .owed .n { font-size:44px; letter-spacing:-1.6px; color:var(--emerald); margin:8px 0; }
  .field-page .owed .k { font-size:12px; }
  .field-page .stages { gap:7px; margin-bottom:20px; padding:5px; background:var(--surface-2); border-radius:11px; }
  .field-page .stages li { flex:1; }
  .field-page .stages button { border:0; font-size:12px; padding:10px; width:100%; border-radius:7px; background:transparent; }
  .field-page .stages button[aria-current=step] { background:var(--emerald); color:var(--on-brand); }
  .field-page .stage-nav { margin-top:18px; }
  .field-page .stage-nav button { font-size:13px; padding:13px; }
  .field-page .shot { padding:17px; border:1px dashed var(--line-dash); background:var(--tint); border-radius:10px; margin:12px 0; }
  .field-page .shot input { font-size:12px; padding:8px; }
  .field-page .ans { border-radius:9px; padding:13px 15px; background:var(--tint); }
  .field-page .answer { background:var(--surface); padding:24px; border-radius:12px; margin:20px 0; }
  .field-page .answer b.big { font:600 24px/1.3 var(--sans); letter-spacing:-.6px; }
  .field-page .bar { gap:10px; flex-wrap:wrap; margin-bottom:20px; }
  .field-page .bar button { font-size:12px; padding:10px 14px; background:var(--surface); }
  .field-page .bar button:first-child { background:var(--emerald); color:var(--on-brand); border-color:var(--emerald); }
  .field-page .scroll { border:1px solid var(--rule); border-radius:10px; margin:12px 0; background:var(--surface); }
  .field-page table { font-size:12px; border-spacing:0; }
  .field-page th,.field-page td { padding:12px 14px; border:0; border-bottom:1px solid var(--rule); line-height:1.5; }
  .field-page th { background:var(--surface-2); font:600 11px/1.5 var(--sans); }
  .field-page tr:last-child td { border-bottom:0; }
  .field-page figure { border-radius:10px; }
  .field-page figcaption { padding:11px 13px; font-size:11px; }
  .field-page .indep-notice { background:transparent; border:0; border-top:1px solid var(--rule); padding:20px 0 0; margin-top:30px; font:11px/1.7 var(--sans); }
  .field-page .legal-links { font:11px/2 var(--sans); }
  .field-page header:not(.field-header) { background:var(--bg); min-height:74px; padding:17px max(24px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--rule); gap:20px; }
  .field-page .brand { display:flex; align-items:center; gap:9px; text-decoration:none; font:700 21px/1 var(--sans); letter-spacing:-.8px; color:var(--ink); }
  .field-page .brand img { width:27px; height:27px; border-radius:6px; }
  .field-page .meta-link { font:500 11px/1.5 var(--sans); color:var(--ink-2); }
  .field-supplier main { max-width:780px; padding:0 24px; margin:45px auto; }
  .field-supplier .for-org { color:var(--emerald); font:600 11px/1.6 var(--sans); letter-spacing:.04em; margin-bottom:11px; }
  .field-supplier .lede { font-size:14px; line-height:1.8; color:var(--ink-3); }
  .field-supplier .card { padding:28px; background:var(--surface); border:1px solid var(--rule); border-radius:14px; }
  .field-supplier fieldset { padding:22px; margin-bottom:24px; border:1px solid var(--rule); border-radius:10px; }
  .field-supplier legend { font:600 14px/1.4 var(--sans); text-transform:none; letter-spacing:-.2px; color:var(--ink); padding:0 8px; }
  .field-supplier label { margin-top:16px; margin-bottom:8px; }
  .field-supplier .geo-big { padding:20px; background:var(--tint); border:1px solid var(--good-line); border-radius:10px; }
  .field-supplier .geo-big-t { font-size:16px; font-weight:600; }
  .field-supplier .geo-big-s { font-size:12px; margin-top:6px; }
  .field-supplier .geo-big[aria-pressed=true] { border-color:var(--emerald); box-shadow:inset 0 0 0 1px var(--emerald); }
  .field-supplier .geo-live { border-left-color:var(--emerald); border-radius:9px; }
  .field-supplier .geom-tab { text-transform:none; letter-spacing:0; font-size:11px; padding:10px; }
  .field-supplier .geom-tab.on { background:var(--emerald); color:var(--on-brand); border-color:var(--emerald); }
  .field-supplier button.primary { padding:13px 22px; font-size:14px; }
  .field-supplier .receipt,.field-supplier .ok-box { border-radius:10px; background:var(--good-soft); padding:20px; }
  .field-supplier .privacy-notice { border-radius:9px; background:var(--tint); }
  .field-supplier .privacy-notice>summary { padding:14px; font-size:12px; }
  .field-supplier .privacy-notice dl { padding:15px; gap:10px 16px; }
  .field-supplier .privacy-notice dt { font:500 11px/1.5 var(--sans); text-transform:none; }
  .field-supplier .state-msg:not(#state-form) { padding:30px; border:1px solid var(--rule); border-radius:14px; background:var(--surface); }
  .field-tools main { max-width:1120px; padding:42px 28px 70px; }
  .field-tools .lede { font-size:14px; color:var(--ink-3); line-height:1.8; }
  .field-eyebrow { font:600 11px/1.5 var(--sans); text-transform:uppercase; letter-spacing:.07em; color:var(--emerald); margin:0 0 12px; }
  .field-jumps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:25px 0; }
  .field-jumps a { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:17px; border:1px solid var(--rule); border-radius:9px; background:var(--surface); font-size:12px; font-weight:500; text-decoration:none; }
  .field-jumps a:hover { border-color:var(--emerald); background:var(--good-soft); }
  .field-tools .widget { border:1px solid var(--rule); background:var(--surface); border-radius:13px; padding:28px; margin:18px 0; gap:32px; scroll-margin-top:20px; }
  .field-tools .widget h2 { font-size:21px; margin-bottom:13px; }
  .field-tools .widget label { font:500 12px/1.5 var(--sans); text-transform:none; letter-spacing:0; margin-top:15px; }
  .field-tools .widget .why { line-height:1.8; font-size:12px; }
  .field-tools .widget .btn { border-radius:8px; padding:12px 15px; font-size:12px; margin-top:12px; }
  .field-tools .widget input,.field-tools .widget select,.field-tools .widget textarea { background:var(--tint); border-radius:8px; padding:11px; font-size:13px; }
  .field-tools .out { background:var(--tint); color:var(--ink); border:1px solid var(--rule); border-radius:9px; padding:18px; line-height:1.7; min-height:140px; }
  .field-tools .topstrap { background:var(--surface-2); border-color:var(--rule); color:var(--ink-2); font:11px/1.6 var(--sans); }
  .field-tools .topstrap strong,.field-tools .topstrap a { color:var(--emerald); }
  .field-upload #drop { padding:38px 24px; background:var(--surface); border:2px dashed var(--line-dash); border-radius:13px; font-size:14px; line-height:1.9; }
  .field-upload #drop:hover { background:var(--good-soft); border-color:var(--emerald); }
  .field-upload #env,.field-upload #results { padding:18px 22px; background:var(--surface); border:1px solid var(--rule); border-radius:10px; }
  .field-upload .row { padding:8px 0; font-size:12px; flex-wrap:wrap; }
  .field-upload .tag { font-size:10px; }
  .field-skip { position:absolute; left:16px; top:-70px; padding:12px 18px; background:var(--surface); border:1px solid var(--emerald); border-radius:8px; z-index:100; }
  .field-skip:focus { top:16px; }
}
@media screen and (max-width:700px) {
  .field-page h1 { font-size:28px; letter-spacing:-.9px; }
  .field-page.field-farmer,.field-page.field-visit,.field-page.field-dossier,.field-page.field-lot,.field-page.field-upload { padding:20px 18px 65px; }
  .field-header { padding-bottom:20px; margin-bottom:26px; }
  .field-page .step { padding:20px; }
  .field-page .step h2 { font-size:16px; }
  .field-page .row { gap:8px; }
  .field-page .stages button { font-size:12px; padding:8px; min-height:44px; }
  .field-page button { min-height:44px; }
  .field-page .bar button { flex:1; }
  .field-page .bar a { width:100%; }
  .field-page header:not(.field-header) { padding:16px 20px; flex-wrap:wrap; gap:15px; }
  .field-page .topbar .meta-link { margin-right:0; font-size:12px; }
  .field-brand,.field-page .brand { min-height:44px; }
  .field-page .meta-link,.field-page .bar a { display:inline-flex; align-items:center; min-height:44px; }
  .field-supplier main { margin:30px auto; padding:0 16px; }
  .field-supplier .card { padding:20px 15px; }
  .field-supplier fieldset { padding:16px 13px; }
  .field-supplier .geo-big { padding:17px; }
  .field-supplier .row-2 { grid-template-columns:1fr; }
  .field-tools main { padding:30px 18px 60px; }
  .field-tools .widget { grid-template-columns:1fr; padding:22px; gap:18px; }
  .field-jumps { grid-template-columns:1fr 1fr; }
  .field-jumps a { padding:14px; font-size:11px; }
  .field-upload table { display:block; overflow:auto; }
  .field-page input,.field-page select,.field-page textarea { font-size:16px; }
}
/* First paint while the page reads its record: grey bars keep the space
   the content will take, so the page does not jump when it arrives. */
@media screen {
  .field-page .field-loading .skel { display:block; height:12px; max-width:520px; border-radius:3px; background:var(--paper-3); margin:10px 0 0; }
  .field-page .field-loading .skel:nth-child(2n) { max-width:380px; }
}
@media screen and (prefers-reduced-motion:reduce) { .field-page * { transition:none!important; scroll-behavior:auto!important; } .field-page button:not(:disabled):active { transform:none; } }
@media print { .field-header,.field-skip,.field-jumps { display:none!important; } }
/* charts.css reads the role names above (--text, --surface, --brand ...). */
.field-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.field-page .viz { margin:14px 0; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
/* On a phone the margin axis is short, so it keeps its two end ticks
   rather than letting four labels run into each other. */
@media screen and (max-width:480px) {
  .field-page .viz { padding:12px; }
  .field-page .lot-margin-chart .viz-range-ticks span:not(:first-child):not(:last-child) { display:none; }
}
@media print { .field-page .viz { break-inside:avoid; } .field-page .viz-table { display:none; } }