:root {
  --brand: #1a5733; --brand-leaf: #5fa845; --cherry: #7a1f2b; --cherry-2: #9c2a3a; --ink: #1d1d1f; --muted: #5f6368; --line: #d9d9de;
  --bg: #f4f3f1; --card: #ffffff; --ok: #1e7b3a; --warn: #a15c00; --bad: #b3261e; --wa: #128c4a;
}
* { box-sizing: border-box; }
/* 2.0: anything the page hides stays hidden, whatever display a class gives it (.btn is inline-flex) */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--brand); color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.brand img { height: 36px; width: auto; display: block; }
.brand .app { font-size: 15px; color: #f2f1d9; border-left: 1px solid rgba(242,241,217,.45); padding-left: 10px; white-space: nowrap; }
.who { font-size: 13px; opacity: .85; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
main { max-width: 560px; margin: 0 auto; padding: 12px 16px 40px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 0 0 6px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.muted { color: var(--muted); margin: 0; }
.hint { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.error { color: var(--bad); font-weight: 600; }
.badge { font-size: 13px; padding: 3px 9px; border-radius: 999px; color: #fff; white-space: nowrap; }
.badge.grey { background: #8a8a8f; } .badge.ok { background: var(--ok); } .badge.warn { background: var(--warn); } .badge.bad { background: var(--bad); }
.field { display: block; font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.field input, .field select, .field textarea { display: block; width: 100%; margin-top: 4px; font: inherit; color: var(--ink);
  padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 46px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 12px; border: 1px solid var(--cherry); border-radius: 10px; overflow: hidden; }
.seg label { text-align: center; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 11px 6px; font-weight: 600; color: var(--cherry); }
.seg input:checked + span { background: var(--cherry); color: #fff; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; font: inherit; font-weight: 600;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; min-height: 46px; }
.btn.big { width: 100%; min-height: 54px; font-size: 18px; margin: 4px 0 10px; }
.btn.primary { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.btn.primary:disabled { opacity: .6; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn.small { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.photo img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 8px; margin: 0 0 10px; background: #eee; }
details { margin: 0 0 10px; }
summary { cursor: pointer; color: var(--cherry); font-weight: 600; padding: 6px 0 10px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.list li:first-child { border-top: 0; }
.list img, .list .noimg { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; background: #eee; }
.list .st { font-size: 13px; color: var(--muted); }
.list .st.ok { color: var(--ok); } .list .st.wait { color: var(--warn); } .list .st.bad { color: var(--bad); }
/* 1.7 and 1.8: three drop-downs (waiting, to share, done today); done today is a grid of small tiles */
.list li.sec { display: block; padding: 0; border-top: 1px solid var(--line); }
.list li.sec:first-child { border-top: 0; }
.sec summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; cursor: pointer; padding: 12px 2px; min-height: 44px; }
.sec summary::-webkit-details-marker { display: none; }
.sec summary span::before { content: '\25B8'; display: inline-block; width: 1.1em; color: var(--muted); }
.sec details[open] summary span::before { content: '\25BE'; }
.sec .body { padding: 0 0 8px; }
.sec .body .list li:first-child { border-top: 1px solid var(--line); }
.sec .none { font-size: 14px; padding: 0 0 6px 1.3em; }
.sec .day { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin: 8px 0; }
.tile { padding: 0; border: 2px solid transparent; border-radius: 8px; background: #eee; aspect-ratio: 1; overflow: hidden; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ok); }
.list .tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.tile.sel { border-color: var(--ok); }
.pick p { margin: 4px 0 6px; font-size: 15px; }
.banner { background: #fff4e5; border: 1px solid #f0c27a; color: #5a3b00; padding: 10px 12px; border-radius: 10px; margin: 0 0 12px; }
.banner a { color: inherit; font-weight: 600; }
.foot { text-align: center; color: var(--muted); font-size: 14px; }
.foot a { color: var(--cherry); }
button.badge { border: 0; font: inherit; font-size: 13px; cursor: pointer; }
.addrow { display: flex; gap: 6px; margin-top: 4px; }
.addrow input { flex: 1; min-width: 0; font: inherit; color: var(--ink); padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 46px; }
.btn.add { min-width: 46px; padding: 0 12px; font-size: 22px; line-height: 1; color: var(--cherry); }
.readings { font-size: 13px; color: var(--ink); margin-top: 4px; }
.readings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.readings .chip { border: 1px solid var(--line); background: #f7f6f4; color: var(--ink); font: inherit; font-size: 15px; padding: 4px 10px; border-radius: 999px; min-height: 34px; cursor: pointer; }
.readings .chip span { color: var(--cherry); font-weight: 600; margin-left: 2px; }
#gpsText small { color: var(--muted); }
/* 2.2: crop stage boxes (two columns of label and %), the stage total, and the variety-correction note */
.lbl { font-size: 14px; color: var(--muted); }
.stages { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 6px 0 0; }
.stage { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 15px; }
.stage input { width: 64px; flex: none; font: inherit; color: var(--ink); text-align: right; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 42px; }
.hint.good { color: var(--ok); } .hint.warnt { color: var(--warn); }
.hint.fix { color: var(--warn); margin-top: -4px; }
/* 2.3: the folded later stages */
details.later { margin: 6px 0 0; }
details.later summary { padding: 4px 0 6px; font-size: 15px; }
/* 2.4: each stage's % picked from a list; each problem picked shows as a chip with a cross; the newer-version line */
.stage select { width: 84px; flex: none; font: inherit; color: var(--ink); padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 42px; }
.chips { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 12px; }
.chips:empty { display: none; }
.chip { display: inline-block; padding: 7px 12px; border: 1px solid var(--cherry); border-radius: 999px; background: var(--cherry); color: #fff; font-size: 15px; }
/* 2.5: each problem as a row: its chip, a "how bad" list and a cross; the Rest button under the stage total */
.issue { display: flex; align-items: center; gap: 8px; }
.issue .chip { flex: 1; }
.issue select { width: 120px; flex: none; font: inherit; color: var(--ink); padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 42px; }
.issue .off { min-width: 42px; min-height: 42px; font-size: 20px; padding: 0; }
#stageRest { margin: -2px 0 8px; }
/* 2.6 (Jason: "crop stage % section is not a drop down section"): the stages fold away like More measurements */
details.stagebox summary .sumnote { font-weight: 400; color: var(--muted); font-size: 15px; margin-left: 4px; }
#sameLast { margin: 0 0 12px; }
.banner.info { background: #e8f3ec; border-color: #9cc9ab; color: #1a5733; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.banner.info[hidden] { display: none; }
/* 2.7: the red line when this version is below the lowest allowed (version.json "min") */
.banner.old { background: #fdecea; border-color: #e8a19b; color: #7a1712; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.banner.old[hidden] { display: none; }
/* 2.8: orchard records (block status, site services, hazards) */
.seg.three { grid-template-columns: 1fr 1fr 1fr; }
.seg.three span { padding: 11px 2px; font-size: 14px; }
#recBox > summary { font-size: 16px; }
.tasks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.task { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; align-items: center; font-size: 15px; }
.task select { font: inherit; min-height: 44px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.task .now { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin-top: -4px; }
.list.recs li { grid-template-columns: 1fr auto; }
.list.recs li a { color: var(--cherry); }
/* 2.9: the name on the phone, the Sun switch, the exotic pest button, colour scores, counts, the check before saving, the tick */
.topr { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
/* 2.9.1: the header keeps "Field capture" whole and clear of the Sun switch on every phone: the brand does not
   shrink, the name beside it gives way (ellipsis), and under 420 px "Field capture" goes on two short lines.
   In 2.9 the Sun switch sat over the end of "Field capture" at 320 to 412 px (found in the staff guide's walk). */
.brand { flex: 0 0 auto; }
@media (max-width: 420px) { .brand .app { white-space: normal; line-height: 1.1; font-size: 14px; max-width: 4.6em; } }
.whobox { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.whobox .who { max-width: 100%; }
.namebtn { border: 0; background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sunb { flex: none; border: 1px solid rgba(242,241,217,.6); background: transparent; color: #f2f1d9; font: inherit; font-size: 13px;
  font-weight: 600; border-radius: 999px; padding: 6px 10px; min-height: 36px; cursor: pointer; }
.sunb[aria-pressed="true"] { background: #f2f1d9; color: var(--brand); }
.namecard { border: 2px solid var(--brand); }
.btn.exo { background: #fff; border: 2px solid var(--bad); color: var(--bad); margin: 0 0 12px; }
.exobox { background: #fdecea; border: 2px solid var(--bad); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; color: #7a1712; }
.exobox p { margin: 0 0 6px; }
.exohead { font-weight: 700; font-size: 18px; }
.tel { color: var(--bad); font-weight: 700; font-size: 20px; white-space: nowrap; }
.exoline { color: #7a1712; font-weight: 600; }
.colours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px; }
.colours .btn { min-height: 46px; padding: 0; font-size: 18px; color: var(--cherry); }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.countbox { border-left: 3px solid var(--cherry); padding: 2px 0 0 10px; margin: 0 0 12px; }
.countbox .lbl { margin: 0 0 6px; }
.checkbox { background: #fff4e5; border: 1px solid #f0c27a; color: #5a3b00; border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.checkbox p { margin: 0 0 8px; }
.checkbox .btn { width: 100%; }
.store { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.store.bad { color: var(--warn); }
.tick { width: 72px; height: 72px; margin: 2px auto 6px; }
.tick svg, .tickpop svg { width: 100%; height: 100%; display: block; }
.tick circle, .tickpop circle { fill: var(--ok); }
.tick path, .tickpop path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
#done h2 { text-align: center; font-size: 20px; }
.tickpop { position: fixed; z-index: 20; left: 50%; top: 40%; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25)); animation: tickfade 1.4s ease-out forwards; }
.tickpop path, .tick path { animation: tickdraw .45s ease-out .1s both; }
@keyframes tickfade { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tickdraw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .tickpop, .tickpop path, .tick path { animation: none; } .tickpop { opacity: 1; } }
/* Sun (the live map's switch): the same colours, darker text, thicker lines and stronger edges */
html.sun { --ink: #000; --muted: #262b22; --line: #77725f; }
html.sun body { font-weight: 500; }
html.sun .card { border-width: 2px; }
html.sun .field input, html.sun .field select, html.sun .field textarea, html.sun .addrow input, html.sun .btn,
html.sun .stage select, html.sun .issue select, html.sun .task select { border-width: 2px; border-color: #4a463a; }
html.sun .hint, html.sun .list .st { color: #262b22; }
html.sun summary { color: #5c0f1a; }
/* 3.0: problems and hazards picked from pictures, crop stages with a picture, the language bar, jobs and the new records */
.pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.pic { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 6px 2px 5px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 13px;
  line-height: 1.15; text-align: center; cursor: pointer; min-height: 78px; }
.pic svg { width: 40px; height: 40px; flex: none; }
/* picked: solid cherry with white words and a tick, so it shows in sun; the drawing keeps a white tile so its colours still read */
.pic { position: relative; }
.pic svg { border-radius: 8px; }
.pic[aria-pressed="true"], .pic[aria-checked="true"] { border: 2px solid var(--cherry); background: var(--cherry); color: #fff; font-weight: 700; padding: 5px 1px 4px; }
.pic[aria-pressed="true"] svg, .pic[aria-checked="true"] svg { background: #fff; padding: 2px; width: 44px; height: 44px; }
.pic[aria-pressed="true"]::after, .pic[aria-checked="true"]::after { content: "\2713"; position: absolute; top: 2px; right: 4px; font-size: 22px; font-weight: 700; line-height: 1; color: #fff; }
.stage .sic { width: 30px; height: 30px; flex: none; margin-right: 2px; }  /* 30, not 22: a cold reader could not tell the bloom stages apart at 22 */
.stage > span { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.2; overflow-wrap: normal; hyphens: auto; }  /* no break inside a word (hardenin g) */
/* 3.0: the two columns may not grow past half the card, so the picture does not push the list off the side */
.stages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stage { gap: 4px; }
.stage select { width: 56px; padding: 8px 0 8px 4px; }
.langbar { margin: 0 0 12px; font-size: 15px; }
.langbar select { font: inherit; min-height: 40px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.langbar .banner { margin: 8px 0 0; }
.seg.three label:nth-child(n+4) span { border-top: 1px solid var(--cherry); }
.list.recs li.late { color: var(--bad); }
.list.recs li .due { font-weight: 600; }
.list.recs li.late .due { color: var(--bad); }
.field.chk { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; padding-top: 18px; }
.field.chk input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; }
#jobBox > summary, #recBox > summary { font-size: 16px; }
#mkJob { width: 100%; margin: 0 0 10px; }
html.sun .pic { border-width: 2px; border-color: #4a463a; }
html.sun .pic[aria-pressed="true"], html.sun .pic[aria-checked="true"] { border-color: #2c2c2c; border-width: 3px; background: #5c0f1a; }
@media (max-width: 372px) { .stages { grid-template-columns: minmax(0, 1fr); } .stage > span { font-size: 15px; } }
.lateline { display: block; font-size: 15px; margin: 4px 0 0 22px; }
/* 3.1: a long word in another language (German "Fallenzählung") wraps inside its tab or picture, where a column sized
   to the word pushed the last tabs out of the box and cut them off */
.seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg span, .pic span, button, summary { overflow-wrap: anywhere; hyphens: auto; }
/* 3.3: the fast fruit count */
.lbl-c { display: block; text-align: center; font-size: 14px; color: var(--muted); margin: 6px 0 4px; }
.stepper { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; align-items: center; margin: 0 0 12px; }
.stepper input { text-align: center; font-size: 26px; font-weight: 600; min-height: 54px; }
.btn.step { min-height: 54px; font-size: 28px; padding: 0; }
.bignum { width: 100%; text-align: center; font-size: 30px; font-weight: 600; min-height: 58px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.pad button { min-height: 52px; font-size: 22px; font-weight: 600; }
.prog { font-weight: 600; color: var(--brand); }
.stepper input, .bignum { display: block; width: 100%; font: inherit; color: var(--ink); padding: 6px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; box-sizing: border-box; }
.stepper input { font-size: 26px; font-weight: 600; }
.bignum { font-size: 30px; font-weight: 600; }
html.sun .stepper input, html.sun .bignum { border-width: 2px; border-color: #4a463a; }

/* 3.3.1: while Crop count is open the photo form and its Save button are hidden, so one Save shows */
body.counting #form, body.counting #done { display: none; }
body.counting #rError, body.counting #rDone { display: none; }   /* the message shows under the pad instead */

/* 3.3.2: the optional photo on a crop count */
.lphoto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 10px; }
.lphoto #lPhotoBtn, .lphoto #lNoteBtn { flex: 1 1 100px; white-space: nowrap; }
.lphoto .lopt { color: #444; font-weight: 600; }
.lphoto img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #ccc; }
/* 3.4 (12-11-2026): the seasonal crop count shows the count only */
body.counter #form, body.counter #done, body.counter #jobCard, body.counter #nameCard, body.counter #nameBtn,
body.counter #recBox > summary, body.counter #recBox .seg[aria-label="Kind of record"], body.counter #rByField, body.counter #rSave,
body.counter #exoBtn { display: none !important; }