:root {
  /* The brief's palette. Maroon is the page; the content stays on light cards, which is
     how the printed brief uses it — a table of sixty rows on maroon is unreadable. */
  --maroon: #5c1a1a;
  --maroon-deep: #431010;
  --gold: #f0c04a;
  --gold-dark: #b8860b;
  --parchment: #fdf8e8;
  --ink: #1c1c1c;
  --muted: #6b6b6b;
  /* --muted is tuned for --card (5.0:1) and reads 2.4:1 on the new --maroon ground — too
     low for the .note/.stamp/.page-of text that sits directly on the page rather than on
     a card. A second, lighter tone for exactly that case, measured at 6.7:1 on --maroon
     and 8.2:1 on --maroon-deep. */
  --muted-on-maroon: #cbb98f;
  --line: #e2d6b8;
  --bg: #5c1a1a;
  --card: #fdf8e8;
  /* The brief's own --up, #128a3c, measures 4.18:1 on --card — short of 4.5:1. Darkened
     to clear it at 5.13:1; --down already clears 5.29:1 unchanged. */
  --up: #0e7a34;
  --down: #c62828;
  /* --gold-dark on --card is fine as a border (3.06:1 clears the 3:1 non-text bar the
     preset/pager borders need) but fails as 15px/700 text at 3.06:1 — short of 4.5:1. A
     second, darker tone for exactly that text use, measured at 5.26:1 on --card, the same
     fix Task 16 applied to --up. */
  --gold-ink: #8a6008;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  /* No color here: the page ground is now maroon, and --ink is a near-black tuned for
     the light cards. Every element that sits on a card sets --ink itself; nothing sits
     on the bare page without its own color. */
  font: 15px/1.6 "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: #0b5cad; text-decoration: none; }
a:hover { text-decoration: underline; }

header.masthead { background: var(--maroon-deep); color: #fff; }
.masthead .inner { max-width: 1100px; margin: 0 auto; padding: 0.9rem 1rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.masthead .brand { font-size: 1.25rem; font-weight: 700; color: var(--gold); }
.masthead .tagline { color: #cfcfcf; font-size: 0.9rem; }

nav.tabs { background: var(--gold); }
nav.tabs .inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; display: flex; gap: 0.25rem; flex-wrap: wrap; }
nav.tabs a { color: var(--ink); padding: 0.6rem 0.9rem; font-weight: 600; }
nav.tabs a:hover { background: rgba(0, 0, 0, 0.08); text-decoration: none; }

/* No background: the maroon page shows through between the cards below. */
main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

h2.section {
  background: var(--maroon);
  color: var(--gold);
  margin: 1.75rem 0 0.75rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 600;
}
h2.section:first-child { margin-top: 0; }

/* A sub-heading for a block within a section — the GTA mirrors' own grouping — that still
   sits directly on the maroon page rather than inside a card. */
h3.mirror-heading { color: var(--gold); font-size: 0.95rem; font-weight: 600; margin: 1.25rem 0 0.35rem; }

.note { color: var(--muted-on-maroon); font-size: 0.9rem; margin: 0.25rem 0 1rem; }

/* The headline card: the two figures a customer came for, and nothing between them. */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.quote {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.quote h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.quote dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 0; }
.quote dt { color: var(--muted); }
.quote dd { margin: 0; text-align: right; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quote .unit { color: var(--muted); font-size: 0.85rem; font-weight: 400; }

.change { font-variant-numeric: tabular-nums; font-weight: 600; }
.change.up { color: var(--up); }
.change.down { color: var(--down); }
.change.flat { color: var(--muted); }

/* Sits on the page, not a card, so it takes the lighter muted tone; its own link (the
   chart page's "ดูเป็นตาราง") would otherwise be the link blue at 1.9:1 on maroon. */
.stamp { color: var(--muted-on-maroon); font-size: 0.9rem; margin-top: 0.75rem; }
.stamp a { color: var(--gold); }

/* The brief's own top line — sits on the maroon page, not a card, above even the quote grid. */
.brief-date { color: var(--gold); font-weight: 600; margin: 0 0 0.15rem; }
/* What the page is, under the date. On the maroon ground, so it takes the lighter muted
   tone rather than --muted, which reads 2.4:1 there. */
.brief-claim { color: var(--muted-on-maroon); font-size: 0.95rem; margin: 0 0 1rem; }

/* The headline banner and its summary line, read straight from market_brief. A red card on
   the printed original; kept on --card here so an empty day's em dash stays legible rather
   than sitting on bare maroon. */
.banner { background: var(--card); border-left: 6px solid var(--down); border-radius: 6px; padding: 0.85rem 1.1rem; margin: 0 0 1.25rem; }
.banner-headline { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.banner-summary { margin: 0; color: var(--muted); }

/* The goldspot hero: the one figure the page is built around, with futures beside it at a
   plainly smaller scale — beside, never in place of, because spot and futures are never
   fallbacks for one another. */
.hero { background: var(--card); border-radius: 8px; padding: 1.1rem 1.25rem; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem 2.5rem; }
.hero-label, .hero-aside-label { display: block; color: var(--muted); font-size: 0.9rem; }
.hero-value { font-size: 2.4rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 0.6rem; }
.hero-aside-value { font-size: 1.4rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 0.5rem; }

/* ตัวเลขสำคัญ: a row of small cards rather than a table, because each figure carries its own
   unit and move and a nine-column table would need a horizontal scroll to read any of them. */
.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.8rem; }
.tile-label { display: block; color: var(--muted); font-size: 0.8rem; }
.tile-value { display: block; font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0.15rem 0 0.2rem; }

/* สาเหตุหลัก and โซ่เหตุผล: both numbered lists on a card, .chain's arrow marking that each
   line follows from the one before it rather than standing on its own like a reason does. */
.reasons, .chain { background: var(--card); color: var(--ink); border-radius: 8px; margin: 0 0 1.25rem; padding: 0.85rem 1.1rem 0.85rem 2.1rem; }
.reasons li, .chain li { margin: 0.3rem 0; }
.chain { list-style: none; padding-left: 1.1rem; }
.chain li:not(:first-child)::before { content: "↓ "; color: var(--gold-ink); font-weight: 700; }

/*
 * The range and instrument pickers. Links, not a form: a chosen view is a URL, so it can be
 * shared and linked to from the world board.
 */
.filters { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.preset {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.2;
}
.preset:hover { border-color: var(--gold-dark); text-decoration: none; }
.preset.current { background: var(--gold); border-color: var(--gold-dark); font-weight: 600; }
.presets.instruments .preset { font-size: 0.85rem; }

.pager { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 2rem; flex-wrap: wrap; }
.page {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
.page:hover { border-color: var(--gold-dark); text-decoration: none; }
/* Both sit on the page, not a card: .page.disabled's background is transparent by design
   (it is the one page link that is not a button), and .page-of is bare text beside it. */
.page.disabled { color: var(--muted-on-maroon); background: transparent; border-style: dashed; }
.page-of { color: var(--muted-on-maroon); font-size: 0.9rem; }

td.links a { margin-right: 0.6rem; white-space: nowrap; }

/*
 * The candlestick chart. Its hover readout is CSS only — the page's CSP is
 * default-src 'none' and there is no script anywhere on this site, so every candle
 * carries its own readout and the hovered one is the only visible one.
 */
.candles { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.candles .grid { stroke: var(--line); stroke-width: 1; }
.candles .axis { fill: var(--muted); font-size: 11px; }
.candles .wick { stroke-width: 1; }
.candles .rising .wick, .candles .rising .body { stroke: var(--up); fill: var(--up); }
.candles .falling .wick, .candles .falling .body { stroke: var(--down); fill: var(--down); }
.candles .hit { fill: transparent; }
.candles .crosshair,
.candles .readout { visibility: hidden; }
.candles .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.candles .readout-bg { fill: var(--card); stroke: var(--line); rx: 6; }
.candles .readout-line { fill: var(--ink); font-size: 12px; }
.candles .candle:hover .crosshair,
.candles .candle:hover .readout { visibility: visible; }

.scroll-x { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--card); color: var(--ink); }
caption { text-align: left; padding: 0.5rem 0; color: var(--muted); }
th, td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { background: #fff6dd; color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--gold); }
tbody tr:nth-child(odd) { background: #fafafa; }
td.num { font-variant-numeric: tabular-nums; }

/* A figure that moved since the last refresh.
 *
 * Red fading to nothing over two seconds: long enough to catch the eye of someone already
 * looking at the page, short enough that a reader arriving afterwards is not told a stale
 * story about which price is "new". The animation is the whole signal — the figure itself
 * is not recoloured, because a price is not good or bad for having changed.
 *
 * Nothing flashes on first load; the script only marks a value it has seen before. */
@keyframes changed-fade {
  from { background-color: #f6c6c6; }
  to   { background-color: transparent; }
}
.changed { animation: changed-fade 2s ease-out; }

/* Someone who asked their system not to animate gets the mark as a flat tint instead of a
   fade — the information is the point, the motion is not. It is brief because the script
   takes the class off after the same two seconds, not because anything here ends it: with
   animation: none there is no animation to finish, and this tint sat on the figure until
   the next refresh replaced the node. Windows turns this setting on for anyone who turned
   Windows animations off, so it is not a rare path. */
@media (prefers-reduced-motion: reduce) {
  .changed { animation: none; background-color: #f6c6c6; }
}

/* The best price on each side. Weight and a tinted ground rather than colour alone: --up
   and --down already carry meaning on this page, and a reader who cannot separate them
   would have no way to read a third colour either. The tint is light enough that --ink
   keeps its contrast on it. */
td.num.best { font-weight: 700; background: #fff1c9; }

/* When each source was read: quieter than the prices, because it qualifies the row rather
   than competing with it. */
td.when { color: var(--muted); font-variant-numeric: tabular-nums; }

.empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 8px; padding: 1.25rem; text-align: center; }

footer.foot { border-top: 1px solid var(--line); background: var(--card); }
footer.foot .inner { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 640px) {
  .quote dd { font-size: 1.15rem; }
  main { padding: 1rem 0.75rem 2rem; }
}