/* Mobile-first: base rules below target small screens; min-width media
   queries near the bottom progressively enhance for tablet/desktop, using the
   standard 2026 content breakpoint scale (640/768/1024/1280).
   Palette/font/dark-mode mechanism are shared with the agriwiki sibling
   project (agriwiki is the reference design system) - see agriwiki's
   public/assets/style.css for the canonical token set. Container width
   (--maxw) also matches agriwiki now; see generate-pages.js for which pages
   use the full-width .wrap vs. the reading-width .wrap-narrow. */
:root {
  color-scheme: light;
  --bg: #f4f6f0;
  --surface: #ffffff;
  --surface-2: #fafbf7;
  --text: #1a2416;
  --text-secondary: #5c6656;
  --border: #e3e8db;
  --accent: #43803a;
  --accent-dark: #2c5d25;
  --radius: 10px;
  --shadow-1: 0 1px 2px rgba(26, 36, 22, .05), 0 2px 8px rgba(26, 36, 22, .06);
  --shadow-2: 0 4px 16px rgba(26, 36, 22, .10);
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --maxw: 1280px;
  --wrap-pad: var(--space-4);
  --section-pad: var(--space-4);
  --hero-pad: var(--space-4);
  /* Fluid heading size: scales smoothly with viewport instead of jumping at a
     single breakpoint, so it also keeps growing gently through the new
     1024/1280 tiers below rather than plateauing early. */
  --h1-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  --chart-height: 260px;
  font-family: "Noto Sans", "Noto Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Manual toggle (see .theme-toggle script in layout.js) wins over the system
   preference; @media below is only the fallback when no choice was saved yet -
   same dark-mode mechanism as agriwiki. */
:root[data-theme="dark"] {
  --bg: #12150f;
  --surface: #1a1e16;
  --surface-2: #1f241b;
  --text: #e8ecdf;
  --text-secondary: #949c85;
  --border: #2f3829;
  --accent: #6fb961;
  --accent-dark: #9ed692;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .32);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .40);
  color-scheme: dark;
}
/* Contrast ratios verified: text/text-secondary/accent-dark all clear WCAG AA
   against both bg and surface here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12150f;
    --surface: #1a1e16;
    --surface-2: #1f241b;
    --text: #e8ecdf;
    --text-secondary: #949c85;
    --border: #2f3829;
    --accent: #6fb961;
    --accent-dark: #9ed692;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .32);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .40);
    color-scheme: dark;
  }
}

/* Self-hosted Noto Sans (SIL OFL 1.1, see fonts/OFL-NotoSans.txt) - same font
   file as agriwiki, kept in sync so the two sibling sites share one typographic
   voice instead of agrimarkets falling back to the plain system stack. "Noto
   Fallback" is a local-Arial stand-in with Noto's own ascent/descent metrics,
   so the fallback already reserves the right line-box height and swapping in
   the real webfont causes minimal layout shift. */
@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/notosans-var.woff2") format("woff2-variations"), url("/fonts/notosans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Fallback";
  src: local("Arial");
  ascent-override: 106.9%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}

* { box-sizing: border-box; }

/* Screen-reader/crawler-only heading text - standard clip pattern (not
   display:none, which assistive tech and some crawlers ignore entirely).
   Used on the chart section's heading: visible section headings elsewhere
   already give the page a full outline, but the chart section itself had
   none, going straight from the H1 to "Learn more" - a purely visual fix
   isn't warranted here since the page doesn't need another on-screen
   heading right above the chart it already introduces. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* Reading-width container for text-heavy pages (commodity detail, education
   articles, 404) - the header/footer/homepage stay at the full --maxw, but a
   line of chart controls or prose stretched across 1280px would be harder to
   scan, not easier, so these pages cap at a comfortable measure instead. */
.wrap-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

a { color: var(--accent-dark); }

h1, h2, h3 { line-height: 1.2; }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* Shared "agri." wordmark: fixed colors, not the --accent* tokens above, so the
   mark reads identically in agrimarkets and agriwiki regardless of each site's
   own (re-themed) palette or dark/light mode. */
.logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: #365c2c;
  text-decoration: none;
}
.logo::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .35em;
  vertical-align: -0.15em;
  background: #4a7c3c;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.05 8.05c-2.73 2.73-2.73 7.15-.02 9.88 1.47-3.4 4.09-6.24 7.36-7.93-2.77 2.34-4.71 5.61-5.39 9.32 2.6 1.23 5.8.78 7.95-1.37C19.43 14.47 20 4 20 4S9.53 4.57 6.05 8.05z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.05 8.05c-2.73 2.73-2.73 7.15-.02 9.88 1.47-3.4 4.09-6.24 7.36-7.93-2.77 2.34-4.71 5.61-5.39 9.32 2.6 1.23 5.8.78 7.95-1.37C19.43 14.47 20 4 20 4S9.53 4.57 6.05 8.05z"/></svg>') center / contain no-repeat;
}
.logo span { color: #c98a2c; }

/* Hamburger below 640px: a <details>/<summary> (same zero-JS disclosure
   pattern as .lang-switch below - and for the same CSP reason, see
   languageSwitcher's comment in build/layout.js), not a JS-driven menu. At
   640px+ the panel is forced visible regardless of [open] state and laid
   out as a normal horizontal row - the standard CSS-only technique for a
   <details>-based responsive nav. Previously the nav links, language
   switcher and theme toggle all wrapped onto their own row directly in the
   header on narrow screens: with 4 nav links + language picker + theme
   toggle that's up to 6 wrapped items, pushing the sticky header to 2-3
   rows tall and eating a large, permanent chunk of a small phone's
   viewport while scrolling. */
.menu-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--text);
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle:hover { background: var(--surface-2); }
.mobile-nav[open] .menu-toggle { background: var(--surface-2); }

.mobile-nav nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4);
  box-shadow: var(--shadow-2);
}
.site-header nav a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  padding: var(--space-3);
  border-radius: 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.site-header nav a:hover { color: var(--accent-dark); background: var(--surface-2); }

/* Native <details>/<summary> dropdown - see languageSwitcher in
   build/layout.js for why this isn't a <select> (CSP blocks the inline
   onchange a <select> would need). position:relative here + absolute menu
   below keeps it from pushing the rest of the header nav around when open. */
.lang-switch { position: relative; font-size: 0.9rem; align-self: flex-start; }
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { color: var(--accent-dark); border-color: var(--accent); }
.lang-switch[open] summary { color: var(--text); border-color: var(--accent); }
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: var(--space-2);
}
.lang-switch-menu a, .lang-switch-menu span {
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}
.lang-switch-menu a:hover { background: var(--surface-2); color: var(--accent-dark); }
.lang-switch-menu [aria-current] { color: var(--accent-dark); font-weight: 600; }

/* 44px minimum touch target (Apple HIG / WCAG 2.5.5) - was 28px, well under
   it; the icon itself stays visually the same size via the SVG's own
   width/height, only the clickable button area grows. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }

.hero {
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
  padding: var(--hero-pad) 0;
  text-align: center;
}

/* Own clamp (not --h1-size, shared with main h1/.prose h1) and a wider
   max-width than before - at typical desktop widths --h1-size was already
   maxed out at 2.5rem inside a 640px column, reading as oversized text in a
   narrow strip against the page's 1280px container everywhere else. */
.hero h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); max-width: 840px; margin: 0 auto var(--space-4); }
/* One dense, fact-forward sentence - no separate link row underneath it
   (removed the .hero-links pill nav that used to live here): the sticky
   header nav already links to every section below, so a second set of
   links to the exact same anchors was pure duplication, not a second
   navigation option - see NN/G on duplicate links diluting attention
   across choices instead of helping (nngroup.com/articles/duplicate-links). */
.hero p { max-width: 640px; margin: 0 auto; color: var(--text-secondary); }

/* Elevated "real feature" sections (Price Dashboard, Learn) - shadow instead of
   a hard border reads as a modern, lighter card rather than a boxed panel. */
main section {
  margin: var(--space-6) 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--section-pad);
}

/* Roadmap/"coming soon" sections (Market Report Aggregator, Price Alerts)
   deliberately get less visual weight than the working dashboard above them -
   a dashed outline and no shadow/fill reads as "planned", not "equally live". */
main section.section-plain {
  background: transparent;
  border: 1px dashed var(--border);
  box-shadow: none;
}

main h1 { font-size: var(--h1-size); }
main h2 { margin-top: 0; font-size: 1.15rem; }
.lead { color: var(--text-secondary); }
.hint { font-size: 0.85rem; color: var(--text-secondary); }

.stat-callout {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: 0.95rem;
}
.stat-callout strong { color: var(--accent-dark); }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
/* Each label+select is one flex item now (was two separate siblings in the
   same wrapping row), so a label can no longer end up on one wrapped line
   with its own select stranded on the next - a label and its control always
   wrap together as a pair. */
.control-group { display: flex; flex-direction: column; gap: 4px; }
.controls label { font-weight: 600; font-size: 0.85rem; }
.controls select {
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  /* 16px, not the old 0.9rem (~14.4px) - iOS Safari auto-zooms the whole
     page on focusing any form control smaller than 16px, select included,
     not just text inputs. Below 640px specifically (desktop doesn't have
     this problem and the smaller size read fine there). */
  font-size: 16px;
  max-width: 100%;
  min-height: 44px;
}
.controls select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67, 128, 58, .25);
}

@media (min-width: 640px) {
  .controls select { font-size: 0.9rem; min-height: auto; }
}

.chart-wrap { position: relative; height: var(--chart-height); }
.chart-wrap canvas { max-width: 100%; }

.unit-label { color: var(--text-secondary); font-size: 0.85rem; margin-top: var(--space-2); }

.source-list, .edu-list { list-style: none; padding: 0; margin: 0; }
.source-list li, .edu-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.source-list li:last-child, .edu-list li:last-child { border-bottom: none; }

.edu-list a { font-weight: 600; text-decoration: none; }
.edu-list a:hover { text-decoration: underline; }

.site-footer {
  padding: var(--space-6) 0 var(--space-8);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.back {
  display: inline-block;
  margin: var(--space-6) 0 var(--space-4);
  font-size: 0.9rem;
  text-decoration: none;
}

/* Fluid auto-fill grid instead of manually-picked column counts per
   breakpoint - column count falls out of how many 220px cards actually fit,
   so it scales smoothly all the way to the wide 1280px container. */
.commodity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.commodity-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.commodity-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.commodity-card h3 { margin: 0; font-size: 1rem; color: var(--accent-dark); }
.commodity-card .price { margin: 0; font-size: 0.85rem; color: var(--text-secondary); text-align: right; min-width: 0; }

/* Education articles - reading-width, not the full container (see .wrap-narrow) */
.prose { padding-bottom: var(--space-8); }
.prose h1 { font-size: var(--h1-size); }
.prose p { color: var(--text); max-width: 720px; }
.prose h2 { font-size: 1.1rem; margin-top: var(--space-6); color: var(--accent-dark); }

@media (min-width: 640px) {
  :root { --wrap-pad: var(--space-6); --section-pad: var(--space-6); --hero-pad: var(--space-6); --chart-height: 340px; }
  .logo { font-size: 1.25rem; }

  /* Force the <details> content visible regardless of [open] - the
     standard technique for a CSS-only responsive <details> nav - and lay
     it out as a normal row instead of the mobile dropdown panel. */
  .menu-toggle { display: none; }
  .mobile-nav nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .site-header nav a { font-size: 1rem; padding: var(--space-2) var(--space-2); min-height: auto; }
  .lang-switch { font-size: 0.85rem; }
}

@media (min-width: 768px) {
  /* Individual cards are comfortably wide again once the grid has settled
     into 3+ columns, so name/price can stack instead of sitting on one line. */
  .commodity-card { display: block; }
  .commodity-card .price { text-align: left; }
}

@media (min-width: 1024px) {
  :root { --section-pad: var(--space-8); --chart-height: 380px; }
}