/* ============================================================
   全球大宗农产品期货产地天气看板 — 样式
   设计原则：克制、留白充足、数据为唯一"响亮"元素；
   亮/暗双模式；响应式（≥1025 三列 / 641–1024 双列 / ≤640 单列）。
   ============================================================ */

:root {
  /* 亮色表面与墨色 */
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #fbfbf9;
  --ink: #1a1a18;
  --ink-2: #52514e;
  --ink-3: #898781;
  --hairline: rgba(11, 11, 11, 0.10);

  /* 图表 */
  --chart-surface: #fcfcfb;
  --chart-grid: #e6e5df;
  --chart-axis: #c3c2b7;
  --chart-text: #2a2a28;
  --chart-text-mute: #898781;

  /* 序列色（颜色跟随实体；色盲安全的蓝/橙/绿三色，互不混淆） */
  --c-thisyear: #2563eb;   /* 今年：蓝 */
  --c-lastyear: #ea580c;   /* 去年：橙 */
  --c-avg: #16a34a;        /* 5年平均：绿 */
  --c-band: rgba(22, 163, 74, 0.14);  /* ±1σ带：跟随5年均(绿)低透明 */

  /* 语义色（异常提示，带图标+文字，不单靠颜色） */
  --sem-hot: #c0392b;
  --sem-cold: #2a6fb0;
  --sem-dry: #b9770e;
  --sem-wet: #1f7a8c;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
  --maxw: 1320px;
}

/* 暗色模式：手动切换 [data-theme="dark"]，或跟随系统(prefers-color-scheme)且未手动设亮色。
   手动优先级最高：[data-theme="light"] 即使系统暗色也保持亮色。 */
:root[data-theme="dark"] {
  --bg: #0d0d0c;
  --surface: #1a1a19;
  --surface-2: #20201e;
  --ink: #f3f2ee;
  --ink-2: #c3c2b7;
  --ink-3: #898781;
  --hairline: rgba(255, 255, 255, 0.10);

  --chart-surface: #1a1a19;
  --chart-grid: #2c2c2a;
  --chart-axis: #383835;
  --chart-text: #e8e7e1;
  --chart-text-mute: #898781;

  --c-thisyear: #5b9eff;   /* 今年：蓝（暗色调亮） */
  --c-lastyear: #fb923c;   /* 去年：橙 */
  --c-avg: #4ade80;        /* 5年平均：绿 */
  --c-band: rgba(74, 222, 128, 0.18);

  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0c;
    --surface: #1a1a19;
    --surface-2: #20201e;
    --ink: #f3f2ee;
    --ink-2: #c3c2b7;
    --ink-3: #898781;
    --hairline: rgba(255, 255, 255, 0.10);

    --chart-surface: #1a1a19;
    --chart-grid: #2c2c2a;
    --chart-axis: #383835;
    --chart-text: #e8e7e1;
    --chart-text-mute: #898781;

    --c-thisyear: #5b9eff;
    --c-lastyear: #fb923c;
    --c-avg: #4ade80;
    --c-band: rgba(74, 222, 128, 0.18);

    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.25);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-thisyear); }

/* ---------- 顶部栏 ---------- */
.topbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 20px 12px;
}
.topbar__title h1 {
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.topbar__subtitle {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
}
.topbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.control { display: flex; flex-direction: column; gap: 4px; }
.control__label { font-size: 11px; color: var(--ink-3); }
.control__select,
.control__unit,
.control__refresh {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.control__select:focus,
.control__unit:focus,
.control__refresh:focus,
.control__theme:focus { outline: 2px solid var(--c-thisyear); outline-offset: 1px; }
.control__unit { min-width: 48px; font-weight: 600; }
.control__theme {
  min-width: 44px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.control__refresh { display: inline-flex; align-items: center; gap: 6px; }
.refresh-icon { display: inline-block; transition: transform 0.5s; }
.control__refresh.spinning .refresh-icon { transform: rotate(360deg); }
.theme-icon { display: inline-block; transition: transform 0.3s; }
.topbar__updated { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---------- 看板 ---------- */
.board {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 20px 40px;
}
.loading-state, .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 20px;
  color: var(--ink-2);
}
.spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--hairline);
  border-top-color: var(--c-thisyear);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 分组 ---------- */
.group { margin-top: 28px; }
.group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  user-select: none;
}
.group__head:hover .group__toggle { color: var(--ink); }
.group__icon { font-size: 22px; }
.group__zh { font-size: 18px; font-weight: 700; }
.group__en { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.group__count { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.group__toggle { font-size: 14px; color: var(--ink-3); padding: 0 4px; }
.group__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.group__country {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 8px 0 -4px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.group__country::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--crop-color, var(--c-thisyear));
  border-radius: 2px;
}
.group__country:first-child { margin-top: 0; }
/* 折叠：隐藏网格 */
.group.collapsed .group__grid { display: none; }
.group.collapsed .group__head { margin-bottom: 0; }
@media (max-width: 1024px) { .group__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .group__grid { grid-template-columns: 1fr; } }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s;
}
.card.refreshing { opacity: 0.55; }
.card__stripe {
  height: 4px;
  background: var(--crop-color, var(--c-thisyear));
}
.card__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
}
.card__alert--hot  { background: rgba(192,57,43,0.10); color: var(--sem-hot); }
.card__alert--cold { background: rgba(42,111,176,0.10); color: var(--sem-cold); }
.card__alert--dry  { background: rgba(185,119,14,0.10); color: var(--sem-dry); }
.card__alert--wet  { background: rgba(31,122,140,0.10); color: var(--sem-wet); }

.card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
}
.card__crop-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.card__title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.card__place { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__region { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 产量占比：数值 + 视觉条 */
.card__share {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  gap: 3px;
  flex-shrink: 0;
}
.card__share-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.card__share-bar {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.card__share-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(var(--share, 0) * 1%);
  background: var(--crop-color, var(--c-thisyear));
  border-radius: 2px;
}
.card__time { font-size: 11px; color: var(--ink-3); }

/* 当前天气 */
.current {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 14px 12px;
}
.current__icon { font-size: 40px; line-height: 1; }
.current__temp {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
}
.current__desc { font-size: 14px; color: var(--ink-2); }
.current__meta {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 过去 7 天实测 + 未来 14 天预报 */
.forecast {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 10px 8px;
  background: var(--surface-2);
}
.past {
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
}
.past__label, .forecast__label {
  font-size: 11px;
  color: var(--ink-3);
  padding: 8px 10px 0;
}
.forecast--past {
  border-top: none;
  border-bottom: 1px solid var(--hairline);
}
/* 未来 14 天：横向滚动，每天定宽 */
.forecast--scroll {
  grid-template-columns: repeat(14, minmax(46px, 1fr));
  overflow-x: auto;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.forecast__day {
  text-align: center;
  padding: 4px 2px;
  font-size: 11px;
  min-width: 46px;
}
.forecast__wd { color: var(--ink-3); font-size: 10px; }
.forecast__icon { font-size: 18px; margin: 2px 0; }
.forecast__temp {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: 11px;
}
.forecast__temp .lo { color: var(--ink-3); }
.forecast__rain { color: var(--c-avg); font-size: 10px; font-variant-numeric: tabular-nums; }

/* 对比区 */
.compare { padding: 12px 14px; }
.compare__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.chart-wrap {
  position: relative;
  background: var(--chart-surface);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.chart-wrap:last-child { margin-bottom: 0; }
.chart { display: block; }

/* 图表序列色：用 class 驱动颜色，跨浏览器可靠。
   今年=蓝 / 去年=橙 / 5年均=绿，色盲安全且互不混淆。
   关键：线条(path)默认 fill:none，避免折线被填成色块；填充元素(rect/circle/带)按需 fill。
   注意 SVG 中 CSS 规则优先级高于 presentation attribute，故 fill 必须在此显式控制。 */
.chart .s-thisyear { stroke: var(--c-thisyear); fill: none; }
.chart .s-lastyear { stroke: var(--c-lastyear); fill: none; }
.chart .s-avg { stroke: var(--c-avg); fill: none; }
.chart .s-band { fill: var(--c-band); stroke: none; }
/* 实心填充（数据点/柱）：覆盖上面 fill:none */
.chart .s-fill-thisyear { fill: var(--c-thisyear); stroke: var(--c-thisyear); }
.chart .s-fill-lastyear { fill: var(--c-lastyear); stroke: var(--c-lastyear); }
.chart .s-fill-avg { fill: var(--c-avg); stroke: var(--c-avg); }
/* 今年预报段：半透明（区分实测/预报，同色） */
.chart .s-thisyear-forecast { stroke: var(--c-thisyear); fill: none; opacity: 0.55; }
.chart .s-lastyear-forecast { stroke: var(--c-lastyear); fill: none; opacity: 0.55; }
.chart .s-avg-soft { stroke: var(--c-avg); fill: none; opacity: 0.55; }
.chart .s-fill-thisyear-forecast { fill: var(--c-thisyear); stroke: var(--c-thisyear); opacity: 0.5; }
.chart .s-fill-avg-soft { fill: var(--c-avg); stroke: var(--c-avg); opacity: 0.55; }
/* 今天分界线：用坐标轴灰 */
.chart .s-today { stroke: var(--chart-axis); fill: none; }
/* 图表结构色：网格/轴/文字 */
.chart .s-grid { stroke: var(--chart-grid); fill: none; }
.chart .s-axis { stroke: var(--chart-axis); fill: none; }
.chart .s-textmute { fill: var(--chart-text-mute); stroke: none; }
.chart .s-text { fill: var(--chart-text); stroke: none; }
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--ink-3);
  font-size: 12px;
}
.chart-tip {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--shadow);
}
.chart-tip div + div { margin-top: 2px; }

.compare__footnote {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 8px;
}
.compare__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 32px 12px;
  color: var(--ink-3);
  font-size: 12px;
  background: var(--chart-surface);
  border-radius: var(--radius-sm);
}
.mini-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--hairline);
  border-top-color: var(--c-thisyear);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  display: inline-block;
}

/* 明细表 */
.details { border-top: 1px solid var(--hairline); }
.details__toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.details__toggle:hover { color: var(--ink); }
.details__panel { display: none; padding: 0 14px 12px; }
.details__panel.open { display: block; }
.details table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.details th, .details td {
  text-align: right;
  padding: 4px 6px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
}
.details th { color: var(--ink-3); font-weight: 600; }
.details th:first-child, .details td:first-child { text-align: left; }

/* 错误态（单卡片） */
.card__error {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-2);
}
.card__error button {
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}

/* ---------- 页脚 ---------- */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--ink-3);
}
.footer__note { margin-top: 6px; }

.noscript {
  max-width: var(--maxw);
  margin: 12px auto;
  padding: 14px 18px;
  background: rgba(192,57,43,0.08);
  color: var(--sem-hot);
  border-radius: var(--radius);
  font-size: 13px;
}

/* 卡片内图表/预报在窄屏横向可滚动 */
@media (max-width: 640px) {
  .forecast--past { grid-template-columns: repeat(7, minmax(42px, 1fr)); }
  .current__temp { font-size: 32px; }
}