/* Design tokens and page chrome shared by every page. Light is the default; dark follows the
   operating system unless the viewer chose a theme ([data-theme] on <html>, set by
   theme-init.js). Chart colours are chosen by job (P07-T59) and validated with the dataviz
   palette checker against the card surface in both modes (results in tasks/P07-T59.md):
   meaning — supply blue, use/demand orange, stocks green, price violet, history grey; ramps —
   stronger and softer steps of a meaning hue for components; polarity — pos/neg around a grey
   zero; identity — cat-1…cat-4 in one fixed order. */
:root {
  color-scheme: light;
  --k-page: #f5f7f7;
  --k-surface: #ffffff;
  --k-surface-2: #fafbfb;
  --k-well: #eceef0;
  --k-hair: rgb(0 0 0 / 8%);
  --k-hair-strong: rgb(0 0 0 / 14%);
  --k-ink: #1d1d1f;
  --k-ink-2: #545b63;
  --k-muted: #69717a;
  --k-grid: #eceef1;
  --k-axis: #c3c8ce;
  --k-past: #c1c7cd;
  --k-past-ink: #69717a;
  --k-supply-strong: #1157a4;
  --k-supply: #2a78d6;
  --k-supply-2: #86b6ef;
  --k-demand-deep: #953307;
  --k-demand-strong: #c04c1b;
  --k-demand: #eb6834;
  --k-demand-2: #f29a6e;
  /* Stocks: #0b766a read as grey (OKLCH chroma 0.089 < 0.10); this step keeps the hue. */
  --k-stocks: #018673;
  --k-stocks-2: #86bdb4;
  /* Price and market data: the accent (also identity slot 1). */
  --k-price: #4a3aa7;
  /* Polarity pair: surplus, inflow, net purchase, increase vs deficit, outflow, net sale,
     decrease — the site's blue/orange pair — and a neutral zero. */
  --k-pos: var(--k-supply);
  --k-neg: var(--k-demand);
  --k-zero: #9aa1a9;
  /* Identity (regions, countries), fixed order; at most four series in one chart. */
  --k-cat-1: #4a3aa7;
  --k-cat-2: #1baf7a;
  --k-cat-3: #eda100;
  --k-cat-4: #e87ba4;
  /* World map ramps (P07-T50): five steps that darken (light) or brighten (dark) with the value;
     adjacent steps and "no data" (hueless grey) differ by at least 6.6 OKLab ΔE in both themes. */
  --k-map-s1: #c4daf5;
  --k-map-s2: #86b3ec;
  --k-map-s3: #4a8fe0;
  --k-map-s4: #2566bd;
  --k-map-s5: #163f75;
  --k-map-d1: #fcd8c5;
  --k-map-d2: #f5a57d;
  --k-map-d3: #ea7440;
  --k-map-d4: #c24f1e;
  --k-map-d5: #83340f;
  --k-map-none: #eceef1;
  /* Zero in a diverging map (net trade balanced): neutral, distinct from no data. */
  --k-map-zero: #9aa1a9;
  /* Near-normal rainfall (P07-T53): the neutral middle of the dry-to-wet scale, apart from no
     data and from both first steps (checked with the dataviz validator, all pairs). */
  --k-map-near: #b0b5bc;
  --k-accent: #0b766a;
  --k-on-accent: #ffffff;
  --k-warn: #7a5200;
  --k-warn-soft: #fff3d6;
  --k-focus-ring: #0b766a;
  --k-tooltip: #1d1d1f;
  --k-tooltip-ink: #ffffff;
  /* Liquid Glass control layer (P07-T57): translucent chrome that floats over the data (top
     bar, AI window, evidence drawer, menus). The tint keeps text at ≥ 4.5:1 over the busiest
     content; the material turns opaque without backdrop-filter, with reduced transparency and
     with more contrast (end of this file). Cards, tables, charts and numbers stay solid. */
  --k-glass: color-mix(in srgb, var(--k-surface) 80%, transparent);
  --k-glass-strong: color-mix(in srgb, var(--k-surface) 90%, transparent);
  --k-glass-line: rgb(0 0 0 / 8%);
  --k-glass-edge: rgb(255 255 255 / 80%);
  --k-glass-shade: rgb(0 0 0 / 4%);
  --k-glass-shadow: 0 12px 32px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 5%);
  --k-glass-filter: blur(24px) saturate(180%);
  /* A segmented control inside glass: a faint recess and a raised, solid "lens" (no glass on
     glass). */
  --k-recess: rgb(0 0 0 / 5.5%);
  --k-recess-shade: rgb(0 0 0 / 6%);
  --k-lens: #ffffff;
  --k-lens-edge: rgb(255 255 255 / 95%);
  --k-lens-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 3px 10px rgb(0 0 0 / 6%);
  --k-hover: rgb(0 0 0 / 5%);
  --k-scrim: rgb(18 24 30 / 28%);
  --k-bubble: color-mix(in srgb, var(--k-accent) 11%, var(--k-surface));
  --k-pill: color-mix(in srgb, var(--k-accent) 9%, var(--k-surface));
  --k-danger: #c42b2b;
  --k-on-danger: #ffffff;
  --k-topbar-h: 56px;
  --k-assistant-w: 440px;
  --k-font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI",
    "Microsoft YaHei", sans-serif;
  --k-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --k-page: #171b20;
  --k-surface: #1e2328;
  --k-surface-2: #22282e;
  --k-well: #282e35;
  --k-hair: rgb(255 255 255 / 8%);
  --k-hair-strong: rgb(255 255 255 / 14%);
  --k-ink: #f1f4f7;
  --k-ink-2: #b5c0cb;
  --k-muted: #919ca8;
  --k-grid: #272d34;
  --k-axis: #3c4550;
  --k-past: #4d5764;
  --k-past-ink: #919ca8;
  --k-supply-strong: #75aef5;
  --k-supply: #3987e5;
  --k-supply-2: #2a5f9e;
  --k-demand-deep: #f6b294;
  --k-demand-strong: #f18154;
  --k-demand: #d95926;
  --k-demand-2: #a9461f;
  --k-stocks: #1aa08c;
  --k-stocks-2: #1b6b61;
  --k-price: #9085e9;
  --k-pos: var(--k-supply);
  --k-neg: var(--k-demand);
  --k-zero: #707985;
  --k-cat-1: #9085e9;
  --k-cat-2: #199e70;
  --k-cat-3: #c98500;
  --k-cat-4: #d55181;
  --k-map-s1: #173c6b;
  --k-map-s2: #1f5594;
  --k-map-s3: #2f72c4;
  --k-map-s4: #5b9cec;
  --k-map-s5: #a9cdf6;
  --k-map-d1: #58250f;
  --k-map-d2: #86361a;
  --k-map-d3: #b84d22;
  --k-map-d4: #e8743f;
  --k-map-d5: #f7b08c;
  --k-map-none: #30363d;
  --k-map-zero: #707985;
  --k-map-near: #8b939d;
  --k-accent: #1aa08c;
  --k-on-accent: #06231f;
  --k-warn: #f0c265;
  --k-warn-soft: #3a2f16;
  --k-focus-ring: #4fd1bd;
  --k-tooltip: #f1f4f7;
  --k-tooltip-ink: #171b20;
  --k-glass: color-mix(in srgb, var(--k-surface) 80%, transparent);
  --k-glass-strong: color-mix(in srgb, var(--k-surface) 90%, transparent);
  --k-glass-line: rgb(255 255 255 / 9%);
  --k-glass-edge: rgb(255 255 255 / 9%);
  --k-glass-shade: rgb(0 0 0 / 30%);
  --k-glass-shadow: 0 14px 40px rgb(0 0 0 / 42%), 0 2px 6px rgb(0 0 0 / 28%);
  --k-recess: rgb(0 0 0 / 24%);
  --k-recess-shade: rgb(0 0 0 / 30%);
  --k-lens: #353c44;
  --k-lens-edge: rgb(255 255 255 / 12%);
  --k-lens-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 3px 10px rgb(0 0 0 / 24%);
  --k-hover: rgb(255 255 255 / 7%);
  --k-scrim: rgb(0 0 0 / 55%);
  --k-bubble: color-mix(in srgb, var(--k-accent) 20%, var(--k-surface));
  --k-pill: var(--k-surface);
  --k-danger: #ff7070;
  --k-on-danger: #2b0a0a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --k-page: #171b20;
    --k-surface: #1e2328;
    --k-surface-2: #22282e;
    --k-well: #282e35;
    --k-hair: rgb(255 255 255 / 8%);
    --k-hair-strong: rgb(255 255 255 / 14%);
    --k-ink: #f1f4f7;
    --k-ink-2: #b5c0cb;
    --k-muted: #919ca8;
    --k-grid: #272d34;
    --k-axis: #3c4550;
    --k-past: #4d5764;
    --k-past-ink: #919ca8;
    --k-supply-strong: #75aef5;
    --k-supply: #3987e5;
    --k-supply-2: #2a5f9e;
    --k-demand-deep: #f6b294;
    --k-demand-strong: #f18154;
    --k-demand: #d95926;
    --k-demand-2: #a9461f;
    --k-stocks: #1aa08c;
    --k-stocks-2: #1b6b61;
    --k-price: #9085e9;
    --k-pos: var(--k-supply);
    --k-neg: var(--k-demand);
    --k-zero: #707985;
    --k-cat-1: #9085e9;
    --k-cat-2: #199e70;
    --k-cat-3: #c98500;
    --k-cat-4: #d55181;
    --k-map-s1: #173c6b;
    --k-map-s2: #1f5594;
    --k-map-s3: #2f72c4;
    --k-map-s4: #5b9cec;
    --k-map-s5: #a9cdf6;
    --k-map-d1: #58250f;
    --k-map-d2: #86361a;
    --k-map-d3: #b84d22;
    --k-map-d4: #e8743f;
    --k-map-d5: #f7b08c;
    --k-map-none: #30363d;
    --k-map-zero: #707985;
    --k-map-near: #8b939d;
    --k-accent: #1aa08c;
    --k-on-accent: #06231f;
    --k-warn: #f0c265;
    --k-warn-soft: #3a2f16;
    --k-focus-ring: #4fd1bd;
    --k-tooltip: #f1f4f7;
    --k-tooltip-ink: #171b20;
    --k-glass: color-mix(in srgb, var(--k-surface) 80%, transparent);
    --k-glass-strong: color-mix(in srgb, var(--k-surface) 90%, transparent);
    --k-glass-line: rgb(255 255 255 / 9%);
    --k-glass-edge: rgb(255 255 255 / 9%);
    --k-glass-shade: rgb(0 0 0 / 30%);
    --k-glass-shadow: 0 14px 40px rgb(0 0 0 / 42%), 0 2px 6px rgb(0 0 0 / 28%);
    --k-recess: rgb(0 0 0 / 24%);
    --k-recess-shade: rgb(0 0 0 / 30%);
    --k-lens: #353c44;
    --k-lens-edge: rgb(255 255 255 / 12%);
    --k-lens-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 3px 10px rgb(0 0 0 / 24%);
    --k-hover: rgb(255 255 255 / 7%);
    --k-scrim: rgb(0 0 0 / 55%);
    --k-bubble: color-mix(in srgb, var(--k-accent) 20%, var(--k-surface));
    --k-pill: var(--k-surface);
    --k-danger: #ff7070;
    --k-on-danger: #2b0a0a;
  }
}

/* P07-T60: an English or French page stays hidden until i18n.ts has applied its catalog (at most
   1.5 s, see theme-init.ts), so it never flashes the HTML's Chinese. Chinese pages are never marked. */
html[data-i18n-pending] body {
  visibility: hidden;
}

/* Base type and surface for pages built on this system (legacy pages keep their own). */
body.app-shell {
  font-family: var(--k-font);
  background: var(--k-page);
  color: var(--k-ink);
  -webkit-font-smoothing: antialiased;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--k-focus-ring);
  outline-offset: 2px;
}

/* Liquid Glass material (P07-T57), applied only to the control layer: `.k-glass` on the top bar,
   the AI window, the evidence drawer, menus and popovers; `.k-glass-strong` where body text sits
   on it. Each component sets its own radius. Opaque fallbacks are at the end of this file. */
.k-glass {
  background: var(--k-glass-fill, var(--k-glass));
  -webkit-backdrop-filter: var(--k-glass-filter);
  backdrop-filter: var(--k-glass-filter);
  border: 1px solid var(--k-glass-line);
  box-shadow:
    inset 0 1px 0 var(--k-glass-edge),
    inset 0 -1px 0 var(--k-glass-shade),
    var(--k-glass-shadow);
}
.k-glass-strong {
  --k-glass-fill: var(--k-glass-strong);
}

/* Top bar: brand, the one commodity switch, and page-level actions. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar.k-glass {
  border-width: 0 0 1px;
  box-shadow:
    inset 0 1px 0 var(--k-glass-edge),
    0 1px 0 var(--k-glass-shade),
    0 8px 24px -16px rgb(0 0 0 / 22%);
}
.topbar-inner {
  max-width: 1560px;
  margin: 0 auto;
  height: 56px;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.topbar a {
  text-decoration: none;
}
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--k-ink);
  justify-self: start;
}
.topbar .brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--k-accent);
  color: var(--k-on-accent);
  display: grid;
  place-items: center;
  font-family: var(--k-font);
  font-size: 14px;
  font-weight: 700;
}
/* The commodity switch sits inside the glass bar, so it is not glass itself: a faint recess
   (track) and a raised solid lens with a specular top edge for the selected segment. */
.topbar .commodities {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0;
  border: 0;
  border-radius: 11px;
  background: var(--k-recess);
  box-shadow: inset 0 1px 2px var(--k-recess-shade);
}
.topbar .commodities button {
  border: 0;
  border-radius: 8px;
  padding: 6px 18px;
  min-height: 32px;
  background: transparent;
  color: var(--k-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.topbar .commodities button span {
  display: none;
}
.topbar .commodities button:not([aria-pressed="true"]):hover {
  background: var(--k-hover);
}
.topbar .commodities button[aria-pressed="true"] {
  background: var(--k-lens);
  color: var(--k-ink);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 var(--k-lens-edge),
    inset 0 -1px 0 rgb(0 0 0 / 5%),
    var(--k-lens-shadow);
}
.topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--k-ink);
}
.topbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 3;
}
.topbar-actions a {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--k-ink-2);
}
.topbar-actions a:hover {
  background: var(--k-well);
  color: var(--k-ink);
}
/* Signed-in person and sign-out (P07-T43), added by session.ts. */
.topbar .account-link {
  max-width: 12em;
  overflow: hidden;
  color: var(--k-ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .sign-out {
  padding: 4px 10px;
  border: 1px solid var(--k-hair-strong);
  border-radius: 7px;
  background: transparent;
  color: var(--k-ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.topbar .sign-out:hover {
  color: var(--k-accent);
}

/* Interface language (P07-T60): 中文 / EN / FR, added by i18n.ts before the theme toggle. The
   commodity switch's recess and lens at a smaller size; each language named in itself. */
.topbar .lang-switch {
  display: inline-flex;
  flex: none;
  gap: 1px;
  padding: 2px;
  border-radius: 9px;
  background: var(--k-recess);
  box-shadow: inset 0 1px 2px var(--k-recess-shade);
}
.topbar .lang-switch button {
  min-width: 32px;
  min-height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--k-ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 28px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.topbar .lang-switch button:not([aria-pressed="true"]):hover {
  background: var(--k-hover);
  color: var(--k-ink);
}
.topbar .lang-switch button[aria-pressed="true"] {
  background: var(--k-lens);
  color: var(--k-ink);
  box-shadow:
    inset 0 1px 0 var(--k-lens-edge),
    inset 0 -1px 0 rgb(0 0 0 / 5%),
    var(--k-lens-shadow);
}
.topbar .lang-switch button:disabled {
  cursor: progress;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--k-ink-2);
  display: grid;
  place-items: center;
}
.theme-toggle:hover {
  background: var(--k-well);
  color: var(--k-ink);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-sun,
.theme-toggle[aria-pressed="true"] .icon-moon {
  display: none;
}
.theme-toggle[aria-pressed="true"] .icon-sun {
  display: block;
}
@media (max-width: 720px) {
  :root {
    --k-topbar-h: 54px;
  }
  .topbar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: auto;
    min-height: 53px;
    padding: 8px 16px;
    gap: 10px;
  }
  .topbar .brand-name {
    display: none;
  }
  .topbar .commodities {
    justify-self: stretch;
    justify-content: space-between;
  }
  .topbar .commodities button {
    padding: 6px 10px;
    flex: 1 1 0;
  }
  .topbar-actions a {
    display: none;
  }
}
/* Phones: brand and actions on one row, the four commodities across the full width below. */
@media (max-width: 480px) {
  .topbar-inner {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 8px;
  }
  .topbar .commodities {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .topbar-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .topbar .commodities button {
    white-space: nowrap;
  }
  .topbar .lang-switch button {
    min-width: 28px;
    padding: 0 5px;
    font-size: 11px;
  }
}

/* English and French (P07-T60): their commodity names and actions run longer than the Chinese.
   From 1180 px the actions keep one line and their column takes the room it needs (the brand
   column gives it up), so "Source status" / « Se déconnecter » never break and the person's name
   is not cut; below that the actions wrap as the Chinese ones do. */
@media (min-width: 1180px) {
  html:is([lang="en-GB"], [lang="fr-FR"]) .topbar-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  }
  html:is([lang="en-GB"], [lang="fr-FR"]) .topbar-actions {
    white-space: nowrap;
  }
}

/* AI analysis window (P07-T44; redesigned in P07-T57), mounted by assistant.ts on pages with the
   top bar. At ≥ 1280 px the page makes room for it; below it overlays; ≤ 640 px it is a
   full-screen sheet. */
.assistant-glyph {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.assistant-glyph-fill {
  fill: currentColor;
  stroke: none;
}
.assistant-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.topbar .assistant-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid color-mix(in srgb, var(--k-accent) 40%, transparent);
  border-radius: 999px;
  background: var(--k-pill);
  color: var(--k-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.topbar .assistant-open:hover {
  border-color: var(--k-accent);
}
.topbar .assistant-open[aria-expanded="true"] {
  border-color: transparent;
  background: var(--k-accent);
  color: var(--k-on-accent);
}
.assistant-open .assistant-glyph {
  width: 15px;
  height: 15px;
}
.assistant-open[data-unread]::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--k-danger);
  box-shadow: 0 0 0 2px var(--k-surface);
}

.assistant {
  position: fixed;
  z-index: 40;
  top: var(--k-topbar-h);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(var(--k-assistant-w), 100vw);
  color: var(--k-ink);
  font-family: var(--k-font);
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow:
    inset 1px 0 0 var(--k-glass-edge),
    -18px 0 48px -12px rgb(0 0 0 / 16%);
  animation: assistant-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.assistant[hidden],
.assistant [hidden] {
  display: none;
}
.assistant:focus {
  outline: none;
}
@keyframes assistant-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

.assistant-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 10px 8px 20px;
  border-bottom: 1px solid var(--k-hair);
}
.assistant-title {
  flex: 1;
  min-width: 0;
  margin-right: 6px;
}
.assistant-name {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.assistant-context {
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--k-ink-2);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-icon,
.assistant-reveal {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--k-ink-2);
  cursor: pointer;
}
.assistant-more .assistant-glyph {
  stroke-width: 2.8;
}
.assistant-icon:hover,
.assistant-icon[aria-expanded="true"],
.assistant-reveal:hover {
  background: var(--k-hover);
  color: var(--k-ink);
}

/* The "⋯" menu. */
.assistant-menu {
  position: absolute;
  top: calc(100% - 6px);
  right: 10px;
  z-index: 3;
  display: grid;
  gap: 1px;
  min-width: 236px;
  padding: 6px;
  border-radius: 14px;
  animation: assistant-pop 0.14s ease-out;
}
.assistant-menu[hidden] {
  display: none;
}
@keyframes assistant-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
.assistant-menu-label {
  margin: 4px 10px 3px 34px;
  color: var(--k-ink-2);
  font-size: 12px;
}
.assistant-menu-group {
  display: grid;
  gap: 1px;
}
.assistant-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--k-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.assistant-menu-item:hover,
.assistant-menu-item:focus-visible {
  background: color-mix(in srgb, var(--k-accent) 14%, transparent);
}
.assistant-menu-item:focus-visible {
  outline-offset: -2px;
}
.assistant-menu-item small {
  margin-left: auto;
  padding-left: 12px;
  color: var(--k-ink-2);
  font-size: 12px;
}
.assistant-menu-check {
  width: 16px;
  height: 16px;
  color: var(--k-accent);
  stroke-width: 2.2;
  visibility: hidden;
}
.assistant-menu-item[aria-checked="true"] .assistant-menu-check {
  visibility: visible;
}
.assistant-menu-rule {
  height: 1px;
  margin: 5px 8px;
  background: var(--k-hair);
}

/* Conversation. */
.assistant-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.assistant-log {
  flex: 1;
  min-height: 0;
  padding: 20px 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.assistant-turn + .assistant-turn {
  margin-top: 18px;
}
.assistant-question {
  display: flex;
  justify-content: flex-end;
}
.assistant-bubble {
  max-width: 85%;
  margin: 0;
  padding: 9px 14px;
  border-radius: 18px 18px 6px;
  background: var(--k-bubble);
  color: var(--k-ink);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.assistant-answer {
  color: var(--k-ink);
  font-size: 15px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.assistant-answer > :first-child {
  margin-top: 0;
}
.assistant-answer p {
  margin: 0 0 10px;
}
.assistant-answer h3 {
  margin: 18px 0 6px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
.assistant-answer h4 {
  margin: 14px 0 4px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
}
.assistant-answer ul,
.assistant-answer ol {
  margin: 0 0 10px;
  padding-left: 22px;
}
.assistant-answer li {
  margin: 3px 0;
  padding-left: 2px;
}
.assistant-answer li::marker {
  color: var(--k-ink-2);
}
.assistant-answer strong {
  font-weight: 650;
}
.assistant-actions {
  display: flex;
  gap: 2px;
  margin: 2px 0 0 -8px;
}
.assistant-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--k-ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.assistant-action:hover {
  background: var(--k-hover);
  color: var(--k-ink);
}
.assistant-action.is-done {
  color: var(--k-ink);
}
.assistant-action .assistant-glyph {
  width: 15px;
  height: 15px;
}

.assistant-thinking {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--k-ink-2);
  font-size: 14px;
  line-height: 1.7;
}
.assistant-thinking-text {
  background:
    linear-gradient(90deg, var(--k-ink-2) 0 35%, var(--k-ink) 50%, var(--k-ink-2) 65% 100%) 0 0 /
    300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: assistant-shimmer 1.6s linear infinite;
}
@keyframes assistant-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.assistant-elapsed {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.assistant-patience {
  flex-basis: 100%;
  font-size: 12px;
}

.assistant-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
}
.assistant-answer + .assistant-failure {
  margin-top: 2px;
}
.assistant-error {
  margin: 0;
  color: var(--k-warn);
  font-size: 13px;
  line-height: 1.55;
}
.assistant-retry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--k-hair-strong);
  border-radius: 999px;
  background: var(--k-surface);
  color: var(--k-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.assistant-retry:hover {
  border-color: color-mix(in srgb, var(--k-accent) 50%, transparent);
  color: var(--k-accent);
}
.assistant-retry .assistant-glyph {
  width: 14px;
  height: 14px;
}

/* Empty state: one sentence and a few fixed questions for this page. */
.assistant-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}
.assistant-empty-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--k-accent) 12%, transparent);
  color: var(--k-accent);
}
.assistant-empty-mark .assistant-glyph {
  width: 22px;
  height: 22px;
}
.assistant-empty-line {
  margin: 0;
  color: var(--k-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
.assistant-empty-label {
  margin: 8px 0 0;
  color: var(--k-ink-2);
  font-size: 12px;
}
.assistant-suggestions {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.assistant-suggestion {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--k-hair);
  border-radius: 14px;
  background: var(--k-surface);
  color: var(--k-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.assistant-suggestion:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--k-accent) 45%, transparent);
  background: color-mix(in srgb, var(--k-accent) 5%, var(--k-surface));
}
.assistant-suggestion:disabled {
  color: var(--k-muted);
  cursor: default;
}

.assistant-latest {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--k-hair-strong);
  border-radius: 999px;
  background: var(--k-surface);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
  color: var(--k-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transform: translateX(-50%);
}
.assistant-latest .assistant-glyph {
  width: 15px;
  height: 15px;
}

/* Composer: one rounded field that grows to about eight lines, the send arrow inside it. */
.assistant-form {
  display: grid;
  gap: 6px;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
}
.assistant-quota {
  margin: 0 6px;
  color: var(--k-ink-2);
  font-size: 12px;
}
.assistant-quota.is-blocked {
  color: var(--k-warn);
}
.assistant-field {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 5px 5px 5px 16px;
  border: 1px solid var(--k-hair-strong);
  border-radius: 22px;
  background: var(--k-surface);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.assistant-field:focus-within {
  border-color: color-mix(in srgb, var(--k-accent) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-accent) 16%, transparent);
}
.assistant-grow {
  display: grid;
  flex: 1;
  min-width: 0;
}
.assistant-grow > * {
  grid-area: 1 / 1;
  box-sizing: border-box;
  min-height: calc(1.5em + 12px);
  max-height: calc(8 * 1.5em + 12px);
  margin: 0;
  padding: 6px 0;
  border: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.assistant-mirror {
  overflow: hidden;
  visibility: hidden;
}
.assistant-input {
  width: 100%;
  overflow-y: auto;
  resize: none;
  background: transparent;
  color: var(--k-ink);
  outline: none;
}
.assistant-input::placeholder {
  color: var(--k-muted);
}
.assistant-send,
.assistant-stop {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--k-accent);
  color: var(--k-on-accent);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.assistant-send[hidden],
.assistant-stop[hidden] {
  display: none;
}
.assistant-send .assistant-glyph {
  stroke-width: 2.2;
}
.assistant-send:disabled {
  background: var(--k-well);
  color: var(--k-muted);
  cursor: default;
}
.assistant-stop {
  background: var(--k-ink);
  color: var(--k-surface);
}
.assistant-stop .assistant-glyph {
  fill: currentColor;
  stroke-width: 1;
}
.assistant-disclaimer {
  margin: 0 6px;
  color: var(--k-ink-2);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* Settings sheet: slides over the chat inside the window. */
.assistant-sheet {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: var(--k-surface);
  animation: assistant-sheet-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.assistant-sheet[hidden] {
  display: none;
}
@keyframes assistant-sheet-in {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}
.assistant-sheet-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 20px 8px 8px;
  border-bottom: 1px solid var(--k-hair);
}
.assistant-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--k-accent);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.assistant-back:hover {
  background: var(--k-hover);
}
.assistant-sheet-title {
  margin: 0 0 0 4px;
  font-size: 15px;
  font-weight: 650;
}
.assistant-settings {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.assistant-lede {
  margin: 0;
  color: var(--k-ink-2);
  font-size: 13px;
  line-height: 1.6;
}
.assistant-label {
  display: grid;
  gap: 6px;
  color: var(--k-ink);
  font-size: 13px;
  font-weight: 600;
}
.assistant-hint {
  color: var(--k-muted);
  font-size: 12px;
  font-weight: 400;
}
.assistant-settings input,
.assistant-settings select {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--k-hair-strong);
  border-radius: 10px;
  background: var(--k-surface-2);
  color: var(--k-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}
.assistant-settings input:focus-visible,
.assistant-settings select:focus-visible {
  border-color: color-mix(in srgb, var(--k-accent) 60%, transparent);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-accent) 16%, transparent);
}
.assistant-key,
.assistant-select {
  position: relative;
  display: block;
}
.assistant-select select {
  padding-right: 38px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.assistant-select .assistant-glyph {
  position: absolute;
  top: 11px;
  right: 12px;
  color: var(--k-ink-2);
  pointer-events: none;
}
.assistant-key input {
  padding-right: 44px;
}
.assistant-reveal {
  position: absolute;
  top: 4px;
  right: 4px;
}
.assistant-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.assistant-primary,
.assistant-secondary,
.assistant-destructive {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.assistant-primary {
  border: 0;
  background: var(--k-accent);
  color: var(--k-on-accent);
}
.assistant-secondary {
  border: 1px solid var(--k-hair-strong);
  background: transparent;
  color: var(--k-ink);
  font-weight: 500;
}
.assistant-secondary:hover {
  background: var(--k-hover);
}
.assistant-primary:disabled,
.assistant-secondary:disabled,
.assistant-destructive:disabled {
  cursor: progress;
  opacity: 0.7;
}
.assistant-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--k-ink-2);
  font-size: 13px;
  line-height: 1.5;
}
.assistant-danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--k-hair);
}
.assistant-danger[hidden] {
  display: none;
}
.assistant-destructive {
  border: 1px solid color-mix(in srgb, var(--k-danger) 45%, transparent);
  background: transparent;
  color: var(--k-danger);
}
.assistant-destructive.is-confirming {
  border-color: transparent;
  background: var(--k-danger);
  color: var(--k-on-danger);
}
.assistant-danger-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--k-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ≥ 1280 px: the page makes room instead of being covered. The body's right padding narrows
   (and re-centres) the content; the sticky top bar keeps the full width. */
@media (min-width: 1280px) {
  html.has-assistant body.app-shell {
    padding-right: var(--k-assistant-w);
  }
  html.has-assistant body.app-shell > .topbar {
    margin-right: calc(-1 * var(--k-assistant-w));
  }
  .assistant {
    box-shadow: inset 1px 0 0 var(--k-glass-edge);
  }
}
/* The pages' own breakpoints take the viewport as the content width. Docked, the content is the
   window's width narrower, so the landing views (1100 px) and the oil chart grid (1000 px) switch
   to their narrower layouts at the equivalent viewport widths. */
@media (min-width: 1280px) and (max-width: 1539.98px) {
  html.has-assistant .focus-hero,
  html.has-assistant .focus-pair,
  html.has-assistant .focus-pair.focus-pair-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  html.has-assistant .focus-headline {
    font-size: 38px;
  }
  html.has-assistant .focus-tiles.focus-tiles-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  html.has-assistant .oil-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html.has-assistant .oil-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }
}
/* Phones: a full-screen sheet with a one-line header; the composer stays above the keyboard. */
@media (max-width: 640px) {
  .assistant {
    top: 0;
    bottom: auto;
    width: 100vw;
    height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    border: 0;
    background: var(--k-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    animation-name: assistant-rise;
  }
  .assistant-head {
    min-height: 52px;
    padding-left: 16px;
  }
  .assistant-log {
    padding: 16px 16px 12px;
  }
  .assistant-form {
    padding-right: 10px;
    padding-left: 10px;
  }
  .assistant-grow > *,
  .assistant-settings input,
  .assistant-settings select {
    font-size: 16px;
  }
  .topbar .assistant-open {
    padding: 0 10px 0 8px;
  }
}
@keyframes assistant-rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

/* Evidence (数值依据) drawer: the same material, tinted to 95% so its legacy secondary text keeps
   ≥ 4.5:1 over the dimmed page. */
dialog#evidence::backdrop {
  background: var(--k-scrim, rgb(18 24 30 / 28%));
}
dialog#evidence.k-glass {
  --k-glass-fill: color-mix(in srgb, var(--k-surface) 95%, transparent);
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow:
    inset 1px 0 0 var(--k-glass-edge),
    -18px 0 48px -12px rgb(0 0 0 / 22%);
}

/* Opaque fallbacks: without backdrop-filter, with reduced transparency, with more contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-glass {
    background: var(--k-surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .k-glass {
    background: var(--k-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .k-glass,
  .topbar.k-glass,
  dialog#evidence.k-glass {
    background: var(--k-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--k-ink-2);
    box-shadow: none;
  }
  .topbar .commodities {
    box-shadow: inset 0 0 0 1px var(--k-ink-2);
  }
  .topbar .commodities button[aria-pressed="true"],
  .topbar .lang-switch button[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px var(--k-ink);
  }
  .topbar .lang-switch {
    box-shadow: inset 0 0 0 1px var(--k-ink-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .assistant,
  .assistant-menu,
  .assistant-sheet {
    animation: none;
  }
  .assistant-thinking-text {
    background: none;
    color: var(--k-ink-2);
    animation: none;
  }
  .topbar .commodities button,
  .topbar .lang-switch button,
  .topbar .assistant-open,
  .assistant-field,
  .assistant-suggestion,
  .assistant-send {
    transition: none;
  }
}

/* Phones in English and French (P07-T60): their actions row is wider than the Chinese one and would
   cover the brand. The AI button shows its spark only (its name stays for assistive technology,
   as the button's text) and sign-out keeps one line. */
@media (max-width: 480px) {
  html:is([lang="en-GB"], [lang="fr-FR"]) .topbar .assistant-open {
    padding: 0 9px;
  }
  html:is([lang="en-GB"], [lang="fr-FR"]) .topbar .assistant-open > span:not(.assistant-sr) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html:is([lang="en-GB"], [lang="fr-FR"]) .topbar .sign-out {
    white-space: nowrap;
  }
}