/* Town app ("Virmond Hoje" by default). Rule: one verdict in words per card, the number right below,
 * at most one personality line (smaller, muted), then the source and the age of the data in the footer.
 * Functional tokens (ink, verdicts, crops, rain) come from the farm dashboard design spec and are city-independent.
 * Brand tokens (--brand, --accent, --flag-*, --motif-*, --bg) are overridden at runtime from city/city.<id>.json. */

/* ---------- tokens: light ("Dia", default) ---------- */
:root{
  --bg:#f4f3ee; --card:#ffffff; --ink:#0b1220; --muted:#3d4656;
  --line:#c4c8cf; --line-strong:#6b7480;
  --brand:#334155; --brand-ink:#ffffff; --brand-text:#334155;
  --accent:#334155; --accent-bg:#e5e9ef; --accent-ink:#ffffff;
  --flag-1:#334155; --flag-2:#94a3b8; --flag-3:#334155; --flag-4:#ffffff; --flag-5:#94a3b8;
  --motif-tree:#2b4a36; --motif-trunk:#9a6b43; --motif-badge:#ffffff;
  --rain:#1f66b8; --rain-bg:#dbe9f8;
  --up:#005ea8; --down:#b54200;
  --ok:#0b6b4a; --ok-bg:#d7efe5; --warn:#7a4a00; --warn-bg:#ffe8b0; --no:#c2410c; --no-bg:#fbe0dc;
  --soy:#13795b; --soy-ink:#0e5c45; --soy-bg:#dcefe7; --soy-letter:#ffffff;
  --corn:#f2b705; --corn-ink:#5c4400; --corn-bg:#fdf0c2; --corn-letter:#3a2a00; --corn-casing:#5c4400;
  --wheat:#9a3b12; --wheat-ink:#8a3410; --wheat-bg:#f7e1d6; --wheat-letter:#ffffff;
  --sun:#d99100; --cloud:#c9ced6; --cloud-edge:#6b7480;
  --past:#ecebe6; --skel-a:#ecebe6; --skel-b:#f7f6f2;
  color-scheme:light;
}
/* ---------- tokens: dark ("Noite", or "Seguir o celular" on a dark phone) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1311; --card:#18201c; --ink:#eef2ee; --muted:#b9c2bc;
    --line:#3a4540; --line-strong:#7d8a84;
    --brand:#1e293b; --brand-ink:#f2f5fa; --brand-text:#cbd5e1;
    --accent:#a5b4cc; --accent-bg:#232c3a; --accent-ink:#0e1311;
    --flag-1:#64748b; --flag-2:#94a3b8; --flag-3:#64748b; --flag-4:#e2e8f0; --flag-5:#94a3b8;
    --motif-tree:#2b4a36; --motif-trunk:#9a6b43; --motif-badge:#e8e4da;
    --rain:#6aaef2; --rain-bg:#16304d;
    --up:#6cb8f0; --down:#f4a261;
    --ok:#5fd3a6; --ok-bg:#123a2b; --warn:#f7c35a; --warn-bg:#3f300a; --no:#ff8a7a; --no-bg:#47201c;
    --soy:#4cc497; --soy-ink:#7fd8b3; --soy-bg:#173a2d; --soy-letter:#0b1220;
    --corn:#f5c518; --corn-ink:#f8d65a; --corn-bg:#3d3208; --corn-letter:#0b1220; --corn-casing:transparent;
    --wheat:#ee8a5a; --wheat-ink:#f4a37c; --wheat-bg:#45241a; --wheat-letter:#0b1220;
    --sun:#f5c518; --cloud:#5d6863; --cloud-edge:#9aa59f;
    --past:#222b26; --skel-a:#1f2823; --skel-b:#26302b;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1311; --card:#18201c; --ink:#eef2ee; --muted:#b9c2bc;
  --line:#3a4540; --line-strong:#7d8a84;
  --brand:#1e293b; --brand-ink:#f2f5fa; --brand-text:#cbd5e1;
  --accent:#a5b4cc; --accent-bg:#232c3a; --accent-ink:#0e1311;
  --flag-1:#64748b; --flag-2:#94a3b8; --flag-3:#64748b; --flag-4:#e2e8f0; --flag-5:#94a3b8;
  --motif-tree:#2b4a36; --motif-trunk:#9a6b43; --motif-badge:#e8e4da;
  --rain:#6aaef2; --rain-bg:#16304d;
  --up:#6cb8f0; --down:#f4a261;
  --ok:#5fd3a6; --ok-bg:#123a2b; --warn:#f7c35a; --warn-bg:#3f300a; --no:#ff8a7a; --no-bg:#47201c;
  --soy:#4cc497; --soy-ink:#7fd8b3; --soy-bg:#173a2d; --soy-letter:#0b1220;
  --corn:#f5c518; --corn-ink:#f8d65a; --corn-bg:#3d3208; --corn-letter:#0b1220; --corn-casing:transparent;
  --wheat:#ee8a5a; --wheat-ink:#f4a37c; --wheat-bg:#45241a; --wheat-letter:#0b1220;
  --sun:#f5c518; --cloud:#5d6863; --cloud-edge:#9aa59f;
  --past:#222b26; --skel-a:#1f2823; --skel-b:#26302b;
  color-scheme:dark;
}

/* ---------- base ---------- */
html{font-size:100%;-webkit-text-size-adjust:100%}
html[data-text-size="2"]{font-size:112.5%}
html[data-text-size="3"]{font-size:125%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  font-size:1.125rem;font-weight:500;line-height:1.5;
  padding-bottom:calc(72px + env(safe-area-inset-bottom) + 24px)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);font-weight:700}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none !important}
.sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:8px;top:-60px;background:var(--card);padding:12px 16px;border-radius:10px;z-index:50}
.skip-link:focus{top:8px}
svg{flex:none}

/* ---------- header: brand band, flag stripe on top, motif border at the bottom (never behind numbers) ---------- */
.site-header{background:var(--brand);color:var(--brand-ink);position:relative;
  border-top:5px solid transparent;
  border-image:linear-gradient(90deg,var(--flag-1) 0 20%,var(--flag-2) 20% 40%,var(--flag-3) 40% 60%,var(--flag-4) 60% 80%,var(--flag-5) 80% 100%) 1}
.site-header-inner{max-width:1120px;margin:0 auto;padding:12px 16px 4px;display:flex;align-items:center;gap:12px}
.logo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--motif-badge);flex:none}
.logo svg{width:36px;height:36px}
h1{font-size:1.25rem;font-weight:800;line-height:1.25;letter-spacing:.01em}
/* lambrequim: scalloped eave of the immigrant wooden houses, in the header colour, with a row of holes */
.site-header.border-lambrequim::after{content:"";display:block;height:16px;margin-bottom:-16px;position:relative;z-index:1;
  background:
    radial-gradient(circle at 10px 4px,var(--bg) 0 2.6px,transparent 3.1px) 0 0/20px 18px repeat-x,
    radial-gradient(circle at 10px 8px,var(--brand) 0 7px,transparent 7.6px) 0 0/20px 18px repeat-x,
    linear-gradient(var(--brand),var(--brand)) 0 0/100% 8px no-repeat}
/* plain border, for cities without a header motif */
.site-header.border-none::after{content:"";display:block;height:4px}
.net-warning{max-width:1120px;margin:22px auto 0;padding:10px 16px;background:var(--warn-bg);color:var(--warn);font-size:1rem;font-weight:700}

/* greeting (personality line of the day) */
.greeting{padding:28px 2px 14px}
.greeting-line{font-size:1.25rem;font-weight:800;line-height:1.3;color:var(--brand-text);text-wrap:balance}
.greeting-date{font-size:1rem;font-weight:600;color:var(--muted);margin-top:2px}

/* ---------- tabs (bottom bar) ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:72px;
  color:var(--muted);text-decoration:none;font-size:0.875rem;font-weight:700;line-height:1.2}
.tab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current="page"]{color:var(--accent)}
.tab[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:4px;border-radius:0 0 4px 4px;background:var(--accent)}
.tab[aria-current="page"] svg{stroke-width:2.6}

/* ---------- screens and cards ---------- */
main{max-width:1120px;margin:0 auto;padding:4px 16px 0}
.screen-title{font-size:1.375rem;font-weight:800;line-height:1.25;margin:26px 0 12px}
.home-grid{display:grid;gap:12px;align-items:start}
.home-grid > *{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.screen > .card + .card,.screen > .card + .sources{margin-top:12px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.card-title{font-size:1.125rem;font-weight:800;line-height:1.25}
.title-sub{display:block;font-size:1rem;font-weight:600;color:var(--muted)}
.verdict{font-size:1.375rem;font-weight:800;line-height:1.25;margin:4px 0 6px;text-wrap:balance}
.reason{font-size:1rem;color:var(--muted);line-height:1.4}
.sub{font-size:1rem;color:var(--muted);line-height:1.4;margin-top:4px}
.sources{font-size:1rem;color:var(--muted);line-height:1.4;margin:12px 2px 0;max-width:34em}
.footer-note{font-size:1rem;color:var(--muted);line-height:1.4;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.footer-note.stale{border-top:0;background:var(--warn-bg);color:var(--warn);font-weight:700;padding:10px 12px;border-radius:10px}
.footer-note.error{border-top:0;background:var(--no-bg);color:var(--no);font-weight:700;padding:10px 12px;border-radius:10px}
.skeleton{border-radius:10px;background:linear-gradient(90deg,var(--skel-a),var(--skel-b),var(--skel-a));background-size:200% 100%;
  animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}
.failure p{font-size:1.125rem;font-weight:700;margin:4px 0 12px}

/* personality line: data first, then this, smaller and muted, one per card */
.quip{display:flex;gap:8px;align-items:flex-start;font-size:1rem;font-weight:600;color:var(--muted);line-height:1.4;margin:6px 0 4px;max-width:34em}
.quip::before{content:"";flex:none;width:4px;align-self:stretch;min-height:1.2em;border-radius:2px;background:var(--flag-2)}

/* verdict chips: always icon + word */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;min-height:32px;border-radius:999px;
  font-size:1rem;font-weight:800;line-height:1.2;white-space:nowrap;border:1.5px solid transparent}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.chip.no{background:var(--no-bg);color:var(--no);border-color:var(--no)}
.chip.neutral{background:var(--bg);color:var(--muted);border-color:var(--line)}
.chip.info{background:var(--rain-bg);color:var(--rain)}
.chip .dot{width:10px;height:10px;border-radius:50%;background:currentColor}

/* crop letter badge */
.badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;font-size:1rem;font-weight:800;line-height:1;flex:none}
.badge.soy{background:var(--soy);color:var(--soy-letter)}
.badge.corn{background:var(--corn);color:var(--corn-letter)}
.badge.wheat{background:var(--wheat);color:var(--wheat-letter)}
.crop-name.soy{color:var(--soy-ink)} .crop-name.corn{color:var(--corn-ink)} .crop-name.wheat{color:var(--wheat-ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 18px;border-radius:12px;
  border:2px solid var(--line-strong);background:var(--card);font-size:1.125rem;font-weight:800}
.btn-large{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:8px 16px;border-radius:14px;
  border:2px solid var(--accent);background:var(--accent);font-size:1.125rem;font-weight:800;color:var(--accent-ink)}
.btn-large svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.share-msg{font-size:1rem;font-weight:700;color:var(--ok);min-height:0}
.share-msg:empty{display:none}
.actions{display:grid;gap:12px}
.link-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:1.125rem;font-weight:700}
.link-row svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.link-row span:nth-child(2){flex:1}
.chevron{font-size:1.75rem;line-height:1;color:var(--muted);font-weight:500}

/* details: one level only, with a visible chevron */
details.disclosure{border-top:1px solid var(--line);margin-top:8px}
details.disclosure > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;font-size:1.125rem;font-weight:800;color:var(--accent);cursor:pointer}
details.disclosure > summary::-webkit-details-marker{display:none}
details.disclosure > summary::after{content:"";width:10px;height:10px;margin-left:auto;margin-right:6px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
details.disclosure[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* ---------- Weather ---------- */
.now-strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 12px;margin:2px 0 10px;border-radius:12px;background:var(--accent-bg)}
.now-strip .now-label{font-size:1rem;font-weight:800;color:var(--ink)}
.now-strip .now-temp{font-size:1.75rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.now-strip .now-detail{font-size:1rem;font-weight:600;color:var(--muted)}
.hints{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:8px}
.hint{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:1.125rem;font-weight:700;line-height:1.35}
.hint svg{width:26px;height:26px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hint.rain svg{color:var(--rain)} .hint.wind svg{color:var(--muted)} .hint.frost svg{color:var(--rain)} .hint.storm svg{color:var(--warn)}
.hint.harvest svg{color:var(--wheat-ink)} .hint.plant svg{color:var(--soy-ink)}
.hint a{display:inline-flex;align-items:center;min-height:48px;font-size:1rem}
.days{list-style:none;margin:8px 0 0;padding:0}
.day-item{border-bottom:1px solid var(--line)}
.day-item:last-child{border-bottom:0}
/* the whole day row is a button that opens the day detail */
.day{display:grid;grid-template-columns:5rem 34px minmax(0,1fr) auto 18px;gap:4px 10px;align-items:center;width:100%;
  min-height:60px;padding:8px 4px 8px 10px;position:relative;border:0;background:transparent;text-align:left;color:var(--ink);font-weight:500}
.day[aria-expanded="true"]{background:var(--bg);border-radius:12px 12px 0 0}
.day.today::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--accent)}
.day .day-name{font-size:1.125rem;font-weight:800;line-height:1.15;white-space:nowrap}
.day .day-name small{display:block;font-size:1rem;font-weight:600;color:var(--muted)}
.day .ic{width:34px;height:34px}
.day .rain-col{min-width:0}
.day .mm{display:flex;align-items:baseline;gap:4px;font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--rain);font-variant-numeric:tabular-nums;white-space:nowrap}
.day .mm small{font-size:1rem;font-weight:700}
.day.dry .mm{color:var(--muted);font-size:1.125rem}
.bar{display:block;height:6px;border-radius:3px;background:var(--rain-bg);margin:4px 0 2px;overflow:hidden;max-width:9rem}
.bar i{display:block;height:100%;background:var(--rain);border-radius:3px}
.day .prob{display:block;font-size:1rem;color:var(--muted);line-height:1.2}
.day .temps{text-align:right;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.day .temps b{display:block;font-size:1.125rem;font-weight:800}
.day .temps span{font-size:1rem;color:var(--muted);font-weight:600}
.day .open-mark{width:10px;height:10px;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(45deg);margin-top:-6px;transition:transform .15s}
.day[aria-expanded="true"] .open-mark{transform:rotate(-135deg);margin-top:6px}
.day .other-model{grid-column:2 / -1;font-size:1rem;color:var(--muted);line-height:1.3}
.day .other-model b{color:var(--ink)}
.days-tip{font-size:1rem;color:var(--muted);margin-top:6px}
.hours-chart{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;align-items:end;height:150px;margin:6px 0 4px}
.hour-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.hour-bar .val{font-size:0.875rem;font-weight:700;color:var(--rain);line-height:1.1;margin-bottom:2px;writing-mode:vertical-rl;transform:rotate(180deg)}
.hour-bar .track{width:100%;flex:1;display:flex;align-items:flex-end;background:var(--rain-bg);border-radius:3px 3px 0 0}
.hour-bar .track i{display:block;width:100%;background:var(--rain);border-radius:3px 3px 0 0}
.hour-bar .lbl{font-size:0.875rem;font-weight:700;color:var(--muted);height:1.2em;line-height:1.2;margin-top:3px;white-space:nowrap}

/* day detail (inline, under the row) */
.day-detail{padding:4px 10px 14px;background:var(--bg);border-radius:0 0 12px 12px;margin-bottom:8px}
.day-detail h4{font-size:1rem;font-weight:800;margin:12px 0 6px}
.dd-totals{display:grid;gap:4px;font-size:1rem;line-height:1.35}
.dd-totals b{font-variant-numeric:tabular-nums}
.dd-disagree{font-size:1rem;font-weight:700;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:8px 10px;margin-top:8px}
.dd-note{font-size:1rem;color:var(--muted);line-height:1.4;margin-top:6px}
.periods{width:100%;border-collapse:collapse;font-size:1rem;font-variant-numeric:tabular-nums;background:var(--card);border-radius:10px;overflow:hidden;table-layout:fixed}
.periods th,.periods td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.periods thead th{white-space:normal;overflow-wrap:anywhere;font-weight:800;vertical-align:bottom}
.periods th:first-child{width:38%;text-align:left;font-weight:700}
.periods tr:last-child th,.periods tr:last-child td{border-bottom:0}
.periods th small{display:block;font-size:0.875rem;font-weight:600;color:var(--muted)}
.periods td.has-rain{color:var(--rain);font-weight:800}
.periods td.none{color:var(--muted);font-weight:500}
.dd-sources{margin-top:10px}
.hourly{width:100%;border-collapse:collapse;font-size:1rem;font-variant-numeric:tabular-nums;background:var(--card);border-radius:10px;overflow:hidden}
.hourly caption{text-align:left;font-size:1rem;color:var(--muted);padding:0 0 6px}
.hourly th,.hourly td{padding:4px 4px;text-align:right;white-space:nowrap;line-height:1.25}
.hourly thead th{font-size:0.875rem;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.hourly th[scope="row"]{text-align:left;font-weight:700}
.hourly tr.period-row th{text-align:left;font-size:0.875rem;font-weight:800;color:var(--muted);padding-top:10px;border-bottom:1px solid var(--line)}
.hourly td.bar-cell{width:28%;min-width:32px;padding-right:2px}
.hourly .hbar{display:block;min-width:28px;height:14px;border-radius:3px;background:var(--rain-bg);overflow:hidden}
.hourly .hbar i{display:block;height:100%;background:var(--rain)}
.hourly td.mm{color:var(--rain);font-weight:800}
.hourly td.mm.zero{color:var(--muted);font-weight:500}
.hourly td.wind{color:var(--ink)}

/* info (i) button and its panel */
.head-right{display:inline-flex;align-items:center;gap:8px}
.info-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--line-strong);background:var(--card);color:var(--accent);
  font:800 1.25rem/1 Georgia,"Times New Roman",serif;font-style:italic;flex:none}
.info-btn[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.info-pop{background:var(--accent-bg);border-radius:12px;padding:10px 14px;margin:0 0 10px;font-size:1rem;line-height:1.45}
.info-pop p + p{margin-top:8px}

/* source line under the weather verdict */
.source-line{font-size:1rem;font-weight:700;color:var(--muted);line-height:1.35;margin:-2px 0 6px}

/* price strip under the weather verdict */
.price-strip{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;align-items:center;min-height:48px;margin:6px 0 4px;padding:8px 10px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);text-decoration:none;font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}
.price-strip .ps-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.price-strip .badge{width:22px;height:22px;font-size:0.875rem}
.price-strip .up,.price-strip .down{font-size:0.875rem}

/* ---------- Spraying ---------- */
.spray-day + .spray-day{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.spray-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 5 columns: on a 360 to 400px phone every hour cell is at least 48px wide */
.hour-strip{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:6px;margin-top:10px}
.hour-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;min-width:48px;padding:4px 0;border-radius:10px;
  border:1.5px solid transparent;background:var(--bg);font-variant-numeric:tabular-nums}
.hour-cell .hour{font-size:1rem;font-weight:700;line-height:1.2}
.hour-cell .sign{font-size:1.25rem;font-weight:800;line-height:1.1}
.hour-cell.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.hour-cell.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.hour-cell.no{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.hour-cell.past,.hour-cell.no-data{background:var(--past);color:var(--muted);border-color:transparent}
.hour-cell.past .sign,.hour-cell.no-data .sign{font-size:0.875rem;font-weight:700}
.hour-cell.past .hour{text-decoration:line-through}
.hour-cell[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:1px}
.hour-readout{min-height:1.5em;margin-top:8px;font-size:1rem;font-weight:600;line-height:1.4}
.hour-readout.tap-hint{color:var(--muted);font-weight:500}

/* ---------- Price of the day ---------- */
.price-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.price-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;min-height:72px;padding:12px;border-radius:12px;
  border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.price-row .badge{grid-row:1}
.price-row .name{font-size:1.125rem;font-weight:800;line-height:1.2}
.price-row .price{font-size:1.5rem;font-weight:800;line-height:1.1;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-row .price small{font-size:1rem;font-weight:600;color:var(--muted);margin-left:2px}
.price-row .change,.price-row .verdict-line{grid-column:2 / -1;font-size:1rem;line-height:1.35}
.price-row .verdict-line{font-weight:700}
.up{color:var(--up)} .down{color:var(--down)} .same{color:var(--muted)}
.price-list{container-type:inline-size}
@container (max-width: 340px){
  .price-row{grid-template-columns:auto minmax(0,1fr)}
  .price-row .price{grid-column:2;text-align:left}
}

/* ---------- Measured rain ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.trio > div{background:var(--bg);border-radius:12px;padding:10px 8px;min-width:0}
.trio .label{font-size:1rem;font-weight:700;color:var(--muted);line-height:1.2}
.trio .value{font-size:1.5rem;font-weight:800;color:var(--rain);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.trio .value small{font-size:1rem;font-weight:700}
.trio .note{font-size:0.875rem;font-weight:600;color:var(--muted);line-height:1.2}
.station-now{margin-top:12px;font-size:1rem;font-weight:600;line-height:1.4}

/* ---------- segmented controls ---------- */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line-strong)}
.seg button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 8px;border:0;border-radius:10px;background:transparent;
  font-size:1rem;font-weight:800;color:var(--ink);line-height:1.15;text-align:center}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg-crop button{min-height:56px;font-size:1.125rem}
.seg-crop button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 3px var(--accent)}
.card .seg{margin-top:12px}
.day-detail .seg{background:var(--card)}
.chip-toggle{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin:10px 0 12px;padding:0 16px;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--card);font-size:1rem;font-weight:800}
.chip-toggle .box{width:22px;height:22px;border-radius:6px;border:2px solid var(--line-strong);display:grid;place-items:center}
.chip-toggle[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.chip-toggle[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
.chip-toggle[aria-pressed="true"] .box::after{content:"✓";color:var(--accent-ink);font-size:0.875rem;font-weight:800}

/* ---------- Prices: hero, chart, range, table ---------- */
.hero-label{font-size:1.125rem;font-weight:800;display:flex;align-items:center;gap:8px}
.hero-value{font-size:2.75rem;font-weight:800;line-height:1.05;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.hero-value small{font-size:1rem;font-weight:700;color:var(--muted);letter-spacing:0;margin-left:4px;white-space:nowrap}
@media (max-width:400px){html[data-text-size] .hero-value{font-size:2.25rem}}
.hero-change{display:grid;gap:2px;font-size:1rem;font-weight:700}
.readout{margin:14px 0 4px;font-size:1rem;font-weight:700;min-height:1.4em;font-variant-numeric:tabular-nums}
.chart{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .axis{font-size:14px;font-weight:700;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart .band.soy{fill:var(--soy-bg)} .chart .band.wheat{fill:var(--wheat-bg)}
.chart .line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart .line.soy{stroke:var(--soy)}
.chart .line.corn{stroke:var(--corn)}
.chart .casing{fill:none;stroke:var(--corn-casing);stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
.chart .line.wheat{stroke:var(--wheat);stroke-dasharray:8 4;stroke-linecap:butt}
.chart .end-text{font-size:14px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:4px}
.chart .end-letter{font-size:14px;font-weight:800}
.chart .marker-line{stroke:var(--ink);stroke-width:1.5}
.chart .point{stroke:var(--card);stroke-width:2.5}
.band-legend{font-size:1rem;color:var(--muted);margin-top:8px;line-height:1.5}
.band-legend .swatch{display:inline-block;width:16px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
.band-legend .swatch.soy{background:var(--soy-bg);border:1px solid var(--soy)}
.band-legend .swatch.wheat{background:var(--wheat-bg);border:1px solid var(--wheat)}
.band-legend span{display:inline-block;margin-right:12px}

.year-range{position:relative;margin:44px 6px 34px}
.year-range .track{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--bg),var(--rain-bg));border:1.5px solid var(--line-strong)}
.year-range .mark{position:absolute;top:-6px;width:4px;height:26px;margin-left:-2px;border-radius:2px;background:var(--ink)}
.year-range .label{position:absolute;font-size:1rem;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;transform:translateX(-50%)}
.year-range .label.above{bottom:22px}
.year-range .end{position:absolute;top:24px;font-size:1rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.year-range .end.min{left:0} .year-range .end.max{right:0}
.range-caption{font-size:1.125rem;font-weight:700;line-height:1.4}

.table-wrap{margin-top:8px}
.table-wrap.scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:1rem;font-variant-numeric:tabular-nums}
.data-table th,.data-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.data-table th:first-child,.data-table td:first-child{text-align:left}
.data-table th{font-weight:800;vertical-align:bottom}
.data-table th small{display:block;font-size:0.875rem;font-weight:600;color:var(--muted)}
.data-table tr.today td{font-weight:800;border-top:2px solid var(--line-strong);border-bottom:0}
.data-table .na{color:var(--muted)}

/* ---------- About ---------- */
.screen[data-screen="about"] .card + .card{margin-top:12px}
.about-card p + p{margin-top:8px}
.about-disclaimer{font-size:1.125rem;font-weight:800;line-height:1.35}
.sample{margin-top:12px;font-size:1.125rem}
.sample b{font-size:1.5rem;font-weight:800}
.sample small{font-size:1rem;color:var(--muted)}
.prose p{max-width:34em;margin-top:10px;line-height:1.5}
.prose a{overflow-wrap:anywhere;display:inline-flex;align-items:center;min-height:48px}

/* contact */
.contact-buttons{display:grid;gap:10px;margin-top:12px}
#about-cta{margin-top:12px}
.contact-btn{text-decoration:none}
.contact-btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- footer ---------- */
.site-footer{max-width:1120px;margin:28px auto 0;padding:16px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:1rem;line-height:1.4;border-top:1px solid var(--line)}
.site-footer svg{width:40px;height:40px;padding:4px;border-radius:10px;background:var(--motif-badge)}

/* ---------- wide screens ---------- */
@media (min-width:720px){
  .screen[data-screen="prices"],.screen[data-screen="about"]{max-width:760px;margin:0 auto}
}
@media (min-width:980px){
  body{padding-bottom:32px}
  .site-header-inner{padding:14px 24px 6px}
  .tabs{position:sticky;top:0;bottom:auto;display:flex;justify-content:center;gap:4px;background:var(--bg);border-top:0;border-bottom:1px solid var(--line);padding:18px 24px 0}
  .tab{flex-direction:row;height:56px;padding:0 22px;gap:10px;font-size:1rem}
  .tab svg{width:22px;height:22px}
  .tab[aria-current="page"]::before{top:auto;bottom:-1px;left:12px;right:12px;border-radius:4px 4px 0 0}
  main{padding:8px 24px 0}
  .greeting{padding-top:12px}
  .home-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:repeat(4,auto) 1fr;gap:16px}
  #card-weather{grid-column:1;grid-row:1 / -1}
  .home-grid > :not(#card-weather){grid-column:2}
}

/* large text or narrow screen: the day row splits in two lines (day, icon, temperatures / rain), so nothing overlaps */
.days{container-type:inline-size}
@container (max-width: 19rem){
  .day{grid-template-columns:minmax(0,1fr) 34px auto 18px;row-gap:2px}
  .day .day-name{grid-column:1;grid-row:1}
  .day .ic{grid-column:2;grid-row:1}
  .day .temps{grid-column:3;grid-row:1}
  .day .open-mark{grid-column:4;grid-row:1}
  .day .rain-col{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
  .day .rain-col .bar{flex:1 1 4rem;margin:0}
  .day .other-model{grid-column:1 / -1;grid-row:3}
}