/* Green2US — shared styles. Tokens first; light is default, dark via
   prefers-color-scheme or the header toggle (html[data-theme]). */
:root {
  color-scheme: light;
  --ground: #F5F4EF;
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --seg: #EEEDE6;
  --ink: #16181D;
  --ink-2: #4F5158;
  --muted: #6F706B;
  --faint: #9A9A96;
  --line: #E3E1DA;
  --line-2: #EDEBE5;
  --control-line: #D6D3CA;
  --brand: #1D5B45;
  --brand-hover: #123D2E;
  --brand-ink: #FFFFFF;
  --brand-tint: #E3EFE8;
  --up: #0B6B2C;
  --up-bg: #E6F2E9;
  --down: #A61B1B;
  --down-bg: #FBEAEA;
  --warn: #7A4B00;
  --warn-bg: #FDF1DC;
  --grid: #E8E6DF;
  --axis: #C3C2B7;
  --crosshair: #898781;
  /* one color per country, everywhere */
  --c-row: #2A78D6;
  --c-cn: #EB6834;
  --c-in: #1BAF7A;
  --c-mx: #EDA100;
  --c-ph: #E87BA4;
  --shadow: 0 1px 2px rgba(22, 24, 29, 0.12);
  --font-sans: "IBM Plex Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Noto Serif SC", "Noto Sans SC", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0F1110; --surface: #1A1C1B; --surface-2: #202321; --seg: #262A28;
    --ink: #F2F1EC; --ink-2: #C3C2B7; --muted: #9C9D97; --faint: #7D7E79;
    --line: #2E322F; --line-2: #262A28; --control-line: #3A3F3B;
    --brand: #3E9C74; --brand-hover: #56B38B; --brand-ink: #0F1110; --brand-tint: #1D3329;
    --up: #4CC274; --up-bg: #173222; --down: #F07C7C; --down-bg: #3A1D1D;
    --warn: #F3C46B; --warn-bg: #3A2E14;
    --grid: #2C2C2A; --axis: #383835; --crosshair: #898781;
    --c-row: #3987E5; --c-cn: #D95926; --c-in: #199E70; --c-mx: #C98500; --c-ph: #D55181;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F1110; --surface: #1A1C1B; --surface-2: #202321; --seg: #262A28;
  --ink: #F2F1EC; --ink-2: #C3C2B7; --muted: #9C9D97; --faint: #7D7E79;
  --line: #2E322F; --line-2: #262A28; --control-line: #3A3F3B;
  --brand: #3E9C74; --brand-hover: #56B38B; --brand-ink: #0F1110; --brand-tint: #1D3329;
  --up: #4CC274; --up-bg: #173222; --down: #F07C7C; --down-bg: #3A1D1D;
  --warn: #F3C46B; --warn-bg: #3A2E14;
  --grid: #2C2C2A; --axis: #383835; --crosshair: #898781;
  --c-row: #3987E5; --c-cn: #D95926; --c-in: #199E70; --c-mx: #C98500; --c-ph: #D55181;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.45;
}
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.site-header {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.site-header .inner {
  max-width: 1440px; margin: 0 auto; height: 64px; padding: 0 64px;
  display: flex; align-items: center; gap: 40px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-name { font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.main-nav { display: flex; gap: 28px; flex-grow: 1; height: 100%; }
.main-nav a {
  display: flex; align-items: center; font-size: 15px; font-weight: 500; text-decoration: none;
  color: var(--ink-2); border-bottom: 2px solid transparent; padding-top: 2px;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }
.header-tools { display: flex; align-items: center; gap: 12px; }
.lang-toggle { display: flex; padding: 3px; gap: 2px; background: var(--seg); border-radius: 8px; }
.lang-toggle button {
  height: 30px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.icon-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }

/* ---------- layout ---------- */
.container { max-width: 1440px; margin: 0 auto; padding: 40px 64px 48px; display: flex; flex-direction: column; gap: 24px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head .titles { display: flex; flex-direction: column; gap: 8px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.page-title { font-family: var(--font-serif); font-size: 44px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--ink-2); }
.chip-sample { padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 500; }
.head-actions { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field-label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.select, .input {
  height: 44px; padding: 0 12px; border: 1px solid var(--control-line); border-radius: 8px;
  background: var(--surface); font-size: 15px; min-width: 0;
}
.input.mono { font-family: var(--font-mono); }
.btn {
  height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px;
  border: 1px solid var(--control-line); border-radius: 8px; background: var(--surface);
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.btn:hover { color: var(--ink); border-color: var(--faint); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card-pad { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.card h2, .card-title { font-size: 17px; font-weight: 600; }
.card-sub { font-size: 13px; color: var(--ink-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.site-footer { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.notice {
  padding: 12px 16px; border-radius: 10px; background: var(--warn-bg); color: var(--warn);
  font-size: 13.5px; line-height: 1.5;
}

/* segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--seg); border-radius: 9px; }
.seg button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--control-line); background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); color: var(--ink); font-weight: 600; }
.chip .sw { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; }
.chip[aria-pressed="true"] .sw { border: 0; }
.chip.solid[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip.cat { border-radius: 8px; color: var(--ink); background: var(--surface); }
.chip.cat[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.chip.cat .check { display: none; }
.chip.cat[aria-pressed="true"] .check { display: inline; }

/* status pills + deltas */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill-cur { background: var(--brand-tint); color: var(--brand); }
.pill-u { background: var(--seg); color: var(--ink-2); font-weight: 500; }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.delta svg { width: 10px; height: 10px; }
.delta.up { background: var(--up-bg); color: var(--up); }
.delta.down { background: var(--down-bg); color: var(--down); }
.delta.flat { color: var(--faint); font-weight: 400; padding: 0; }

/* ---------- bulletin ---------- */
.board-toolbar { padding: 16px 20px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.board-help { flex: 1 1 260px; font-size: 13px; color: var(--ink-2); }
.bulletin-table { width: 100%; border-collapse: collapse; }
.bulletin-table thead tr { background: var(--surface-2); }
.bulletin-table th[scope="col"] {
  text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-2);
}
.bulletin-table th[scope="col"]:first-child { padding-left: 20px; width: 260px; }
.bulletin-table tbody tr { border-top: 1px solid var(--line-2); }
.bulletin-table th[scope="row"] { text-align: left; padding: 12px 20px; font-weight: 400; }
.bulletin-table td { padding: 12px 16px; vertical-align: middle; }
.cat-code { font-weight: 600; font-size: 15px; }
.cat-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cell .mono { font-size: 14px; }
.board-legend {
  padding: 12px 20px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--line-2); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
.board-legend .up { color: var(--up); display: inline-flex; gap: 4px; align-items: center; }
.board-legend .down { color: var(--down); display: inline-flex; gap: 4px; align-items: center; }
.board-legend .spacer { flex-grow: 1; }
.board-mobile { display: none; }
.m-country { padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.m-country .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.m-row { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-2); }
.m-row .left { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.m-row .right .mono { font-size: 16px; font-weight: 500; }
.m-row .cmp { font-size: 12px; color: var(--muted); }
.quick-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.quick-form .field { flex: 1 1 140px; }
.movers { display: flex; flex-direction: column; }
.mover { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; }
.mover .code { font-weight: 600; min-width: 64px; }
.mover .country { color: var(--ink-2); flex-grow: 1; min-width: 0; }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* ---------- history ---------- */
.filters { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.filters .grow { flex-grow: 1; }
.filter-block { display: flex; flex-direction: column; gap: 8px; }
.history-grid { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; align-items: start; }
.history-main, .history-aside { display: flex; flex-direction: column; gap: 16px; }
.chart-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.chart-head > div:first-child { flex: 1 1 280px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 2px; display: inline-block; }
.chart-block { display: flex; flex-direction: column; gap: 4px; }
.chart-block + .chart-block { padding-top: 10px; border-top: 1px solid var(--line-2); }
.chart-block h3 { font-size: 14px; font-weight: 600; }
.chart-box { position: relative; height: 360px; }
.chart-box.wait { height: 250px; }
.measure-tabs { display: none; gap: 18px; border-bottom: 1px solid var(--line-2); }
.measure-tabs button {
  height: 40px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-size: 14.5px; color: var(--ink-2); cursor: pointer;
}
.measure-tabs button[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--ink); font-weight: 600; }
.chart-note { font-size: 12px; color: var(--muted); }
.table-toggle {
  height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; font-weight: 500; cursor: pointer; width: 100%;
}
.table-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.data-table-wrap { max-height: 480px; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th, .data-table td { padding: 8px 12px; text-align: left; border-top: 1px solid var(--line-2); white-space: nowrap; }
.data-table thead th { position: sticky; top: 0; background: var(--surface-2); font-size: 12px; color: var(--ink-2); font-weight: 600; border-top: 0; }
.summary-group-title { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); padding-top: 6px; }
.summary-item { padding: 12px 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.summary-item .name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.summary-item .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 12.5px; color: var(--ink-2); }
.summary-grid b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 2px; }
.summary-grid b.up { color: var(--up); font-weight: 600; }
.summary-grid b.down { color: var(--down); font-weight: 600; }
.row-actions { display: flex; gap: 10px; }
.row-actions .btn { flex: 1; height: 40px; }

/* ---------- checker ---------- */
.checker-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.status-card { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.status-line { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; }
.status-line svg { flex-shrink: 0; }
.status-line.ok { color: var(--up); }
.status-line.wait { color: var(--ink); }
.status-line.na { color: var(--ink-2); }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 12.5px; color: var(--ink-2); }
.kv b { display: block; font-size: 15px; color: var(--ink); font-weight: 500; margin-top: 2px; }
.estimate-big { font-family: var(--font-serif); font-size: 32px; font-weight: 600; }

/* ---------- guide ---------- */
.prose { max-width: 820px; display: flex; flex-direction: column; gap: 14px; font-size: 15.5px; line-height: 1.65; }
.prose h2 { font-family: var(--font-serif); font-size: 26px; margin-top: 12px; }
.prose p { margin: 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line-2); vertical-align: top; }
.prose ul { margin: 0; padding-left: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .history-grid { grid-template-columns: minmax(0, 1fr); }
  .checker-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .site-header .inner { padding: 0 16px; height: 56px; gap: 10px; }
  .brand-name { font-size: 20px; flex-grow: 1; }
  .brand { flex-grow: 1; }
  .main-nav {
    display: none; position: absolute; top: 56px; left: 0; right: 0; height: auto;
    flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .main-nav a[aria-current="page"] { border-bottom-color: var(--line-2); color: var(--brand); }
  .menu-btn { display: flex; }
  .lang-toggle button { min-width: 38px; }
  #theme-btn { display: none; }
  .container { padding: 24px 16px 32px; gap: 16px; }
  .page-title { font-size: 30px; }
  .head-actions { width: 100%; }
  .head-actions .field { flex-grow: 1; }
  .board-desktop { display: none; }
  .board-mobile { display: block; }
  .board-toolbar { padding: 12px; gap: 8px; }
  .board-toolbar .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .board-toolbar .seg button { height: 40px; font-size: 15px; }
  .board-help { font-size: 12.5px; }
  .board-legend { padding: 12px 16px; gap: 12px; }
  .grid-2, .status-grid { grid-template-columns: minmax(0, 1fr); }
  .card-pad { padding: 16px; }
  .filters { gap: 12px; }
  .filters .grow { display: none; }
  .measure-tabs { display: flex; }
  .history-main[data-measure="cut"] .wait-card { display: none; }
  .history-main[data-measure="wait"] .cut-card { display: none; }
  .chart-box { height: 220px; }
  .chart-box.wait { height: 220px; }
  .checker-form { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}