/* RM crop yields: the list and each RM's page */
:root {
  color-scheme: light dark;
  --paper: #f7f5ee; --surface: #ffffff; --surface-2: #eee9dc;
  --ink: #17231e; --muted: #5a665f; --forest: #173f32; --forest-2: #245b49;
  --wheat: #d8ae4d; --wheat-soft: #f3e4bb; --line: #d8d8cd;
  --good: #2f765b; --alert: #9b6229; --on-forest: #f8f4e7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111814; --surface: #18221d; --surface-2: #222e27;
    --ink: #f3f1e8; --muted: #b4c0b7; --forest: #acd2be; --forest-2: #84b39d;
    --wheat: #e0b858; --wheat-soft: #4a3d1e; --line: #34433a;
    --good: #7dc3a0; --alert: #e2ab6d; --on-forest: #0e1613;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Outfit", system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
a { color: var(--forest-2); }
.wrap { width: min(920px, calc(100% - 32px)); margin: 0 auto; }
h1, h2 { font-family: "Instrument Serif", Georgia, serif; line-height: 1.12; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(30px, 4.6vw, 42px); margin: 14px 0 0; }
h2 { font-size: 25px; margin: 40px 0 10px; }
.lede { font-size: 19px; color: var(--muted); margin: 14px 0 0; }
.crumbs, .small { font-size: 14px; }
.muted { color: var(--muted); }
.rm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 12px; }
th, td { padding: 9px 12px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
thead th { background: var(--forest); color: var(--on-forest); border-top: 0; font-weight: 600; font-size: 13px; }
td small { color: var(--muted); }
.rm-crop { margin-top: 10px; }
.rm-chart { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; }
.rm-chart .grid { stroke: var(--line); stroke-width: 1; }
.rm-chart .ax { fill: var(--muted); font: 12px "Outfit", system-ui, sans-serif; }
.rm-chart .mine { fill: none; stroke: var(--forest-2); stroke-width: 2.2; }
.rm-chart .mid { fill: none; stroke: var(--wheat); stroke-width: 1.6; stroke-dasharray: 4 3; }
.rm-chart .dot { fill: var(--forest-2); }
.rm-key { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.rm-key span { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; }
.k-mine { background: var(--forest-2); }
.k-mid { background: repeating-linear-gradient(90deg, var(--wheat) 0 4px, transparent 4px 7px); }
.rm-find { margin: 18px 0 0; }
.rm-find input { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.note { background: var(--wheat-soft); border-radius: 12px; padding: 14px 18px; font-size: 15px; margin: 22px 0; }
.cta { background: var(--forest); color: var(--on-forest); border-radius: 16px; padding: 22px 24px; margin: 36px 0; }
.cta h2 { color: inherit; margin-top: 0; }
.cta p { opacity: .92; }
.cta a.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; background: var(--wheat); color: #2f2716; border-radius: 9px; text-decoration: none; font-weight: 700; }
.sources { font-size: 14px; color: var(--muted); }