diff --git a/CLAUDE.md b/CLAUDE.md
index 8bef4da..8fcefec 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -221,7 +221,7 @@ Arrows show who imports whom (generated from the code on 2026-09-15).
 | `main.py` | Command-line signal report (`--detail`, `--json`, `--panel`) | pair_signals, signal_aggregator, agent_panel, violent_watch, app_config | dashboard_publisher (formatting helpers) |
 | `telegram_bot.py` | Owner-locked bot: candle-close scan loops, alerts, breach monitor, heads-ups, `/scan /status /news /autoscan /cache /clearcache /help /start` | pair_signals, signal_aggregator, providers, agent_panel, violent_watch, news_engine, llm_client, signal_log, app_config | nobody (a top-level process) |
 | `dashboard_publisher.py` | Static web publisher daemon; writes JSON + HTML into the Apache folder. Its own process with its own news caches and its own DeepSeek daily cap. Never writes `signals.db` or `newsdata.db`: `main()` calls `app_config.set_db_writes_for_process(False)`, a process-wide switch every SQLite writer honours (owner decision 2026-09-17; the bot is the single writer because the dashboard is not always running) | pair_signals, providers, main, agent_panel, violent_watch, news_engine, app_config | nobody. Hard rule: never imports and is never imported by `telegram_bot` (test-enforced) |
-| `static/dashboard.html`, `.css`, `.js` | The public dashboard page (reads `snapshot.json` / `news.json`) | | copied by the publisher |
+| `static/dashboard.html`, `.css`, `.js` | The public dashboard page (reads `snapshot.json` / `news.json`). Bootstrap 5 + jQuery + Chart.js + Font Awesome straight from a CDN, no build step; M5/M15/H1/H4 each get a card in one column grid, with a diverging Chart.js bar chart for direction and one per card for the indicator votes | | copied by the publisher |
 | `static/news_summary.php` | The one dynamic endpoint: on-demand DeepSeek summary for a clicked headline, whitelist-gated against `news.json`, own fail-closed daily cap, key read from `/etc/gold-dashboard/deepseek.key` (never repo config) | | installed by the publisher |
 | `docs/user_guide.html`, `docs/beginner_guide.html` | Human guides. Keep them in sync with signal behaviour. There are no PDF builds | | |
 
diff --git a/static/dashboard.css b/static/dashboard.css
index 7c6a226..d03758d 100644
--- a/static/dashboard.css
+++ b/static/dashboard.css
@@ -1,351 +1,709 @@
 /* Gold Desk — XAU/USD dashboard styles
  *
- * Builds on Bootstrap 5.3 color modes (data-bs-theme). Only app-specific
- * tokens and components live here; layout, typography, tables, badges,
- * cards, alerts, modals, etc. come from Bootstrap.
+ * Bootstrap 5.3 supplies layout, cards, tables, badges, alerts, modals and
+ * the form switch; this file supplies the desk: the token set, the sticky
+ * ticker bar, the direction board, the four timeframe instruments and the
+ * chart surfaces Chart.js draws onto.
+ *
+ * Colour notes
+ *   Dark only (owner decision 2026-08-16): dark ground, white text, red and
+ *   green reserved for direction.
+ *   --up / --down are the CHART mark colours: a diverging pair validated on
+ *   this surface (lightness band, chroma floor, colour-vision separation,
+ *   contrast). --up-text / --down-text are the lighter steps of the same two
+ *   hues, used wherever the colour has to work as text. Direction is never
+ *   colour alone — an arrow icon and the word BUY or SELL ride with it.
  */
 
 :root {
-  --xau-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --xau-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, Menlo, monospace;
-  --xau-gold: #f5b301;
+  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, Menlo, monospace;
+
+  --desk-bg: #0c0f13;
+  --panel: #12161c;
+  --panel-2: #171d25;
+  --rule: rgba(255, 255, 255, 0.10);
+  --rule-soft: rgba(255, 255, 255, 0.06);
+
+  --gold: #f5b301;
+  --gold-wash: rgba(245, 179, 1, 0.12);
+
+  --up: #0d9f7a;
+  --down: #e8503a;
+  --flat: #6b7a8d;
+  --up-text: #2fd6a3;
+  --down-text: #ff7d66;
+  --up-wash: rgba(13, 159, 122, 0.16);
+  --down-wash: rgba(232, 80, 58, 0.16);
+
+  --grid: rgba(255, 255, 255, 0.07);
+  --zero: rgba(255, 255, 255, 0.30);
+  --axis: rgba(255, 255, 255, 0.64);
 }
 
-/* Forced dark theme (owner decision 2026-08-16): dark background, pure
- * white text (no gray), vivid red/green for data accents. Loaded after
- * Bootstrap so these overrides win. */
 [data-bs-theme="dark"] {
-  --bs-body-bg: #0a0e14;
-  --bs-secondary-bg: #111823;
-  --bs-tertiary-bg: #0e141d;
+  --bs-body-bg: var(--desk-bg);
   --bs-body-color: #ffffff;
   --bs-emphasis-color: #ffffff;
   --bs-heading-color: #ffffff;
   --bs-secondary-color: rgba(255, 255, 255, 0.92);
-  --bs-tertiary-color: rgba(255, 255, 255, 0.8);
-  --bs-border-color: rgba(255, 255, 255, 0.14);
-  --bs-card-bg: #0e141d;
-  --bs-card-border-color: rgba(255, 255, 255, 0.12);
-  --bs-modal-bg: #0e141d;
-  --bs-success: #22c55e;
-  --bs-success-rgb: 34, 197, 94;
-  --bs-success-text-emphasis: #4ade80;
-  --bs-success-bg-subtle: rgba(34, 197, 94, 0.16);
-  --bs-success-border-subtle: rgba(34, 197, 94, 0.45);
-  --bs-danger: #ef4444;
-  --bs-danger-rgb: 239, 68, 68;
-  --bs-danger-text-emphasis: #f87171;
-  --bs-danger-bg-subtle: rgba(239, 68, 68, 0.16);
-  --bs-danger-border-subtle: rgba(239, 68, 68, 0.45);
+  --bs-tertiary-color: rgba(255, 255, 255, 0.78);
+  --bs-secondary-bg: var(--panel-2);
+  --bs-tertiary-bg: var(--panel-2);
+  --bs-border-color: var(--rule);
+  --bs-card-bg: var(--panel);
+  --bs-card-border-color: var(--rule);
+  --bs-modal-bg: var(--panel);
+  --bs-border-radius: 0.5rem;
+  --bs-primary: var(--gold);
+  --bs-primary-rgb: 245, 179, 1;
+  --bs-success: #0d9f7a;
+  --bs-success-rgb: 13, 159, 122;
+  --bs-success-text-emphasis: var(--up-text);
+  --bs-success-bg-subtle: var(--up-wash);
+  --bs-success-border-subtle: rgba(13, 159, 122, 0.45);
+  --bs-danger: #e8503a;
+  --bs-danger-rgb: 232, 80, 58;
+  --bs-danger-text-emphasis: var(--down-text);
+  --bs-danger-bg-subtle: var(--down-wash);
+  --bs-danger-border-subtle: rgba(232, 80, 58, 0.45);
+  --bs-warning: #e9a23b;
+  --bs-warning-rgb: 233, 162, 59;
+  --bs-link-color: var(--gold);
+  --bs-link-hover-color: #ffca3f;
 }
 
 html, body {
-  font-family: var(--xau-font-sans);
-  letter-spacing: -0.005em;
+  background: var(--desk-bg);
+  color: #fff;
+  font-family: var(--sans);
+  font-size: 0.9375rem;
   -webkit-font-smoothing: antialiased;
-  background-color: var(--bs-body-bg);
-  color: var(--bs-body-color);
 }
 
-.num, .xau-price, .xau-symbol {
-  font-family: var(--xau-font-mono);
+h1, h2, h3, h4, h5 { font-weight: 600; }
+
+.num {
+  font-family: var(--mono);
   font-variant-numeric: tabular-nums;
+  font-feature-settings: "zero" 1;
 }
 
-.xau-symbol {
-  font-size: 0.95rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--xau-gold);
+.up { color: var(--up-text); }
+.down { color: var(--down-text); }
+.flat { color: rgba(255, 255, 255, 0.72); }
+
+.sig-buy { --edge: var(--up); --edge-text: var(--up-text); --edge-wash: var(--up-wash); }
+.sig-sell { --edge: var(--down); --edge-text: var(--down-text); --edge-wash: var(--down-wash); }
+.sig-neutral { --edge: var(--flat); --edge-text: rgba(255, 255, 255, 0.8); --edge-wash: rgba(255, 255, 255, 0.05); }
+
+.desk-shell {
+  width: 100%;
+  max-width: 1560px;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 
-.xau-price {
+/* ── ticker bar ────────────────────────────────────────────────── */
+.desk-bar {
+  background: rgba(12, 15, 19, 0.94);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--rule);
+  padding: 0.55rem 0;
+}
+
+.desk-mark { color: var(--gold); font-size: 1rem; }
+
+.desk-symbol {
+  font-family: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--gold);
+  font-size: 0.9rem;
+}
+
+.desk-price {
+  font-size: 1.6rem;
+  font-weight: 600;
   line-height: 1;
-  color: #ffffff;
 }
 
+.desk-rail { display: flex; gap: 0.4rem; flex-wrap: wrap; }
+
+.rail-chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  border: 1px solid var(--rule);
+  border-left: 2px solid var(--edge, var(--flat));
+  border-radius: 0.3rem;
+  background: var(--panel);
+  color: #fff;
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  padding: 0.2rem 0.45rem;
+}
+
+.rail-chip:hover { background: var(--panel-2); }
+.rail-chip .rail-tf { font-weight: 600; }
+.rail-chip .rail-score { color: var(--edge-text); }
+
+.desk-status {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+
+.desk-meta { white-space: nowrap; }
+.desk-meta i { opacity: 0.55; margin-right: 0.25rem; }
+.desk-meta.is-stale { color: var(--bs-warning); font-weight: 600; }
+
 .live-dot {
   display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
-  background: var(--bs-success);
-  margin-right: 5px;
+  background: var(--up-text);
+  margin-right: 0.4rem;
   animation: pulse 2.4s ease-in-out infinite;
 }
 
-.live-dot.closed {
-  background: var(--bs-warning);
-  animation: none;
+.live-dot.closed { background: var(--bs-warning); animation: none; }
+
+@keyframes pulse { 50% { opacity: 0.3; } }
+
+/* ── direction board ───────────────────────────────────────────── */
+.board {
+  background: var(--panel);
+  border: 1px solid var(--rule);
+  border-radius: 0.6rem;
+  overflow: hidden;
 }
 
-@keyframes pulse {
-  50% { opacity: 0.35; }
+.board-read {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1.6rem;
+  border-right: 1px solid var(--rule);
 }
 
-/* signal-coloured accents */
-.sig-buy   { --xau-signal: var(--bs-success); }
-.sig-sell  { --xau-signal: var(--bs-danger); }
-.sig-neutral { --xau-signal: var(--bs-secondary); }
-
-.border-signal {
-  border-left: 3px solid var(--xau-signal, var(--bs-secondary)) !important;
+.board-headline {
+  font-size: clamp(1.5rem, 2.4vw, 2rem);
+  font-weight: 600;
+  line-height: 1.15;
+  margin-bottom: 0.5rem;
+  max-width: 22ch;
 }
 
-.text-signal {
-  color: var(--xau-signal, var(--bs-secondary)) !important;
+.board-sub {
+  color: var(--bs-secondary-color);
+  max-width: 46ch;
+  margin-bottom: 1.1rem;
 }
 
+.board-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-top: auto;
+  border-top: 1px solid var(--rule);
+  padding-top: 0.9rem;
+}
+
+.board-stats .k {
+  display: block;
+  font-size: 0.72rem;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 0.15rem;
+}
+
+.board-stats .v { font-size: 1.05rem; font-weight: 600; }
+.board-stats .v small { font-weight: 400; font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); }
+
+.board-plot { padding: 1.5rem 1.6rem; }
+
+.plot-title { font-size: 0.95rem; margin-bottom: 0.75rem; }
+
+.plot-note {
+  font-size: 0.78rem;
+  color: rgba(255, 255, 255, 0.72);
+  margin: 0.6rem 0 0;
+  max-width: 62ch;
+}
+
+.chart-wrap { position: relative; }
+.chart-direction { height: 190px; }
+.chart-ind { height: 158px; margin-bottom: 0.9rem; }
+.chart-tone { height: 58px; }
+
+/* ── news voice inside the board ───────────────────────────────── */
+.board-news {
+  border-left: 2px solid var(--gold);
+  padding-left: 0.85rem;
+  margin-bottom: 1.2rem;
+}
+
+.context-text {
+  margin: 0 0 0.5rem;
+  color: var(--bs-secondary-color);
+  font-size: 0.85rem;
+  max-width: 60ch;
+}
+
+.context-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.3rem;
+  border: 1px solid var(--rule);
+  background: var(--panel-2);
+  color: var(--bs-secondary-color);
+  white-space: nowrap;
+}
+
+.chip i { opacity: 0.7; }
+.chip .num { font-weight: 600; }
+.chip-up { border-color: rgba(13, 159, 122, 0.45); background: var(--up-wash); color: var(--up-text); }
+.chip-down { border-color: rgba(232, 80, 58, 0.45); background: var(--down-wash); color: var(--down-text); }
+.chip-warn { border-color: rgba(233, 162, 59, 0.5); background: rgba(233, 162, 59, 0.14); color: #ffc46b; }
+.chip-gold { border-color: rgba(245, 179, 1, 0.5); background: var(--gold-wash); color: var(--gold); }
+
+/* ── section headings ──────────────────────────────────────────── */
+.sec-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin-bottom: 0.85rem;
+}
+
+.sec-title { font-size: 1.05rem; margin: 0; }
+.sec-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }
+
+/* ── timeframe instruments ─────────────────────────────────────── */
+.tf-card {
+  height: 100%;
+  overflow: hidden;
+  background: var(--panel);
+  scroll-margin-top: 5.5rem;
+}
+
+.tf-card.is-target { outline: 2px solid var(--gold); outline-offset: 1px; }
+
+.tf-card .card-body { padding: 0.95rem 1.05rem 0.6rem; }
+
+.tf-edge { height: 3px; background: var(--edge, var(--flat)); }
+
+.tf-head { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.55rem; }
+
 .tf-name {
-  font-family: var(--xau-font-mono);
-  font-weight: 700;
+  font-family: var(--mono);
   font-size: 1.1rem;
-  color: var(--bs-primary);
-  letter-spacing: 0.05em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  margin: 0;
+  color: var(--gold);
 }
 
-.tf-selector {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
+.tf-long { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }
 
-.tf-select {
-  min-width: 0;
-  padding: 0.7rem 0.8rem;
-  border: 1px solid var(--bs-border-color);
-  border-radius: var(--bs-border-radius);
-  background: var(--bs-tertiary-bg);
-  color: var(--bs-body-color);
-  text-align: left;
-  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
-}
+.tf-clock { font-size: 0.75rem; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
+.tf-clock i { opacity: 0.55; margin-right: 0.2rem; }
 
-.tf-select:hover {
-  border-color: rgba(var(--bs-primary-rgb), 0.65);
-}
-
-.tf-select[aria-pressed="true"] {
-  border-color: var(--xau-gold);
-  background: rgba(245, 179, 1, 0.09);
-  box-shadow: inset 0 0 0 1px rgba(245, 179, 1, 0.16);
-}
-
-.tf-select .tf-name {
-  font-size: 1rem;
-}
-
-.workspace-card {
-  overflow: hidden;
-}
-
-.workspace-signal {
-  font-family: var(--xau-font-mono);
-  font-size: clamp(1.55rem, 3vw, 2.35rem);
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  line-height: 1;
-}
-
-.workspace-meta {
-  min-width: 0;
-}
-
-.workspace-reasons > div + div {
-  margin-top: 0.35rem;
-}
-
-/* score bar: zero-centered diverging with midpoint tick */
-.scorebar {
+.tf-signal {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
+  font-size: 1.35rem;
+  font-weight: 600;
+  line-height: 1.1;
+  color: var(--edge-text, #fff);
 }
 
-.scorebar .gauge-container {
+.tf-signal .fa-solid { font-size: 1.05rem; }
+
+.grade {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  font-weight: 600;
+  padding: 0.1rem 0.4rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--rule);
+  color: rgba(255, 255, 255, 0.85);
+  align-self: center;
+}
+
+.grade.grade-high { border-color: rgba(245, 179, 1, 0.55); background: var(--gold-wash); color: var(--gold); }
+
+.tf-action {
+  font-size: 0.82rem;
+  color: var(--bs-secondary-color);
+  margin: 0.35rem 0 0.8rem;
+  min-height: 1.1rem;
+}
+
+.tf-readouts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 0.8rem;
+}
+
+.readout-k { display: block; font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); }
+.readout-v { font-size: 1.15rem; font-weight: 600; }
+
+.meter {
   position: relative;
-  flex: 1;
-  min-width: 60px;
-  height: 10px;
-  border-radius: 5px;
-  background: var(--bs-secondary-bg);
+  display: block;
+  height: 5px;
+  margin-top: 0.35rem;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.08);
   overflow: hidden;
 }
 
-.scorebar .gauge-container::after {
+.meter::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
-  width: 2px;
-  background: var(--bs-secondary);
-  transform: translateX(-1px);
+  width: 1px;
+  background: var(--zero);
 }
 
-.scorebar .fill {
+.meter i {
   position: absolute;
   top: 0;
   bottom: 0;
-  border-radius: 4px;
-  width: var(--score-width);
+  border-radius: 3px;
   transition: width 0.25s ease;
 }
 
-.scorebar .fill.pos {
-  left: 50%;
-  background: var(--bs-success);
-}
+.meter i.pos { left: 50%; background: var(--up); }
+.meter i.neg { right: 50%; background: var(--down); }
 
-.scorebar .fill.neg {
-  right: 50%;
-  background: var(--bs-danger);
-}
+.meter-linear::after { display: none; }
+.meter-linear i { left: 0; background: rgba(255, 255, 255, 0.55); }
 
-.scorebar .val {
-  width: 58px;
-  text-align: right;
-  font-size: 0.95rem;
-  font-weight: 500;
-}
+.tf-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.9rem; }
+.tf-chips .chip { font-size: 0.72rem; padding: 0.15rem 0.4rem; }
 
-.scorebar .lbl {
-  font-size: 0.8rem;
-  color: var(--bs-secondary);
-  width: 44px;
-}
-
-/* rail chips in hero */
-.rail-chip {
-  border: 1px solid var(--bs-border-color);
-  border-radius: var(--bs-border-radius);
-  background: var(--bs-tertiary-bg);
-  color: var(--bs-body-color);
-  font-family: var(--xau-font-mono);
-  font-size: 0.9rem;
-  line-height: 1.3;
-  padding: 0.3rem 0.5rem;
-}
-
-.rail-chip:hover, .rail-chip[aria-current="true"] {
-  border-color: var(--xau-gold);
-}
-
-.rail-chip:focus-visible, .tf-select:focus-visible, .wire-item:focus-visible,
-.cal-event:focus-visible {
-  outline: 2px solid var(--xau-gold);
-  outline-offset: 2px;
-}
-
-/* detail dialog sections */
-.d-stat .k {
-  display: block;
-  font-size: 0.7rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--bs-secondary);
+.tf-sub {
+  font-size: 0.78rem;
   font-weight: 600;
+  color: rgba(255, 255, 255, 0.82);
+  margin-bottom: 0.4rem;
 }
 
-.d-stat .v {
-  font-size: 1.15rem;
-  font-weight: 600;
+/* trade plan */
+.plan {
+  border: 1px solid var(--rule);
+  border-left: 2px solid var(--edge, var(--flat));
+  border-radius: 0.4rem;
+  background: var(--panel-2);
+  padding: 0.6rem 0.7rem;
 }
 
-.d-table {
-  font-size: 0.9rem;
-}
-
-.detail-table {
-  overflow-x: auto;
-}
-
-.d-table .ind-k {
-  font-family: var(--xau-font-mono);
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.wbar {
-  display: block;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--bs-secondary-bg);
-  margin-top: 3px;
-}
-
-.wbar > i {
-  display: block;
-  height: 100%;
-  border-radius: 2px;
-  background: var(--bs-primary);
-}
-
-/* news */
-.wire-item {
+.plan-head {
   display: flex;
-  width: 100%;
-  border: 0;
-  border-radius: var(--bs-border-radius);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  text-align: start;
+  align-items: baseline;
+  gap: 0.4rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--edge-text);
+  margin-bottom: 0.5rem;
 }
 
-.wire-item:hover {
-  background: rgba(var(--bs-primary-rgb), 0.08);
+.plan-strategy {
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.7);
 }
 
+.plan-rr { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; color: rgba(255, 255, 255, 0.85); }
+
+/* Two columns in a card, four across the wider dialog — never three,
+   which would strand Target 2 on a row of its own. */
+.plan-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem 1.25rem;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .d-sec .plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+.plan-grid > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
+.plan-grid dt { font-size: 0.75rem; font-weight: 400; color: rgba(255, 255, 255, 0.75); }
+.plan-grid dt i { width: 0.9rem; opacity: 0.65; margin-right: 0.3rem; }
+.plan-grid dd { margin: 0; font-family: var(--mono); font-size: 0.85rem; font-weight: 500; }
+
+.plan-trail {
+  margin-top: 0.5rem;
+  padding-top: 0.45rem;
+  border-top: 1px solid var(--rule-soft);
+  font-size: 0.74rem;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.plan-empty {
+  border-left-color: var(--rule);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 0.8rem;
+}
+
+.tf-flags { margin-top: 0.7rem; display: grid; gap: 0.25rem; font-size: 0.76rem; }
+.tf-flags i { width: 0.9rem; margin-right: 0.25rem; }
+.tf-flags .flag-warn { color: #ffc46b; }
+.tf-flags .flag-watch { color: var(--gold); font-weight: 500; }
+
+.tf-card .card-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  background: transparent;
+  border-top: 1px solid var(--rule-soft);
+  padding: 0.5rem 1.05rem;
+}
+
+.tf-scanned { margin-left: auto; font-size: 0.72rem; color: rgba(255, 255, 255, 0.68); }
+
+.btn-desk {
+  border: 1px solid var(--rule);
+  color: #fff;
+  background: var(--panel-2);
+  font-size: 0.78rem;
+}
+
+.btn-desk:hover { border-color: var(--gold); color: var(--gold); background: var(--panel-2); }
+.btn-desk i { margin-right: 0.3rem; opacity: 0.8; }
+
+.tf-empty {
+  padding: 1.6rem 0.4rem 2rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 0.85rem;
+}
+
+.tf-empty i { display: block; font-size: 1.4rem; opacity: 0.5; margin-bottom: 0.5rem; }
+
+/* ── calendar + wire ───────────────────────────────────────────── */
+.card-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin-bottom: 0.8rem;
+}
+
+.card-title { font-size: 0.95rem; margin: 0; }
+.card-title i { color: var(--gold); margin-right: 0.45rem; }
+.card-note { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }
+
+.form-check-label { font-size: 0.78rem; }
+.form-switch .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
+.form-check-input:focus { box-shadow: none; border-color: var(--gold); }
+
+/* The calendar fills whatever height the row settles on, then scrolls. */
+.card-body:has(.cal-scroll) { display: flex; flex-direction: column; }
+.cal-scroll { flex: 1 1 auto; max-height: 30rem; overflow-y: auto; }
+
+.cal-table { font-size: 0.82rem; margin-bottom: 0; }
+.cal-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--panel);
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+  border-bottom: 1px solid var(--rule);
+}
+
+.cal-table td { border-color: var(--rule-soft); }
+.cal-table .empty { text-align: center; padding: 1.2rem 0; color: rgba(255, 255, 255, 0.7); }
+.cal-day td { padding-top: 0.7rem; font-size: 0.75rem; font-weight: 600; color: var(--gold); }
+.cal-past { color: rgba(255, 255, 255, 0.55); }
+.cal-next td { background: rgba(245, 179, 1, 0.06); }
+.cal-next td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
+
 .cal-event {
   display: block;
   width: 100%;
   padding: 0;
   border: 0;
-  background: transparent;
+  background: none;
   color: inherit;
-  text-align: inherit;
+  text-align: left;
 }
 
-.cal-event:hover {
-  color: var(--bs-primary);
-  text-decoration: underline;
+.cal-event:hover { color: var(--gold); text-decoration: underline; }
+
+.impact {
+  display: inline-block;
+  font-size: 0.68rem;
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--rule);
 }
 
+.impact-high { border-color: rgba(232, 80, 58, 0.5); background: var(--down-wash); color: var(--down-text); }
+.impact-medium { border-color: rgba(233, 162, 59, 0.5); background: rgba(233, 162, 59, 0.14); color: #ffc46b; }
+.impact-low { color: rgba(255, 255, 255, 0.7); }
+
+.tone { margin-bottom: 0.8rem; }
+
+.tone-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  font-size: 0.74rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.tone-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
+
+.tone-key {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+.wire-item {
+  display: flex;
+  gap: 0.5rem;
+  align-items: baseline;
+  width: 100%;
+  padding: 0.3rem 0.35rem;
+  border: 0;
+  border-radius: 0.3rem;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+button.wire-item:hover { background: rgba(255, 255, 255, 0.05); }
+
 .wire-score {
-  font-family: var(--xau-font-mono);
-  font-size: 0.85rem;
-  font-weight: 700;
-  padding: 2px 7px;
-  border-radius: 5px;
+  font-family: var(--mono);
+  font-size: 0.74rem;
+  font-weight: 600;
+  padding: 0.05rem 0.35rem;
+  border-radius: 0.25rem;
   white-space: nowrap;
+  min-width: 2.7rem;
+  text-align: center;
 }
 
-/* calendar highlight for next upcoming event */
-.cal-next-up td:first-child {
-  box-shadow: inset 4px 0 0 var(--bs-primary);
-  padding-left: 0.75rem !important;
+.wire-score.pos { background: var(--up-wash); color: var(--up-text); }
+.wire-score.neg { background: var(--down-wash); color: var(--down-text); }
+.wire-score.zero { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); }
+
+.wire-text { flex: 1 1 auto; font-size: 0.82rem; }
+.wire-src { font-size: 0.72rem; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
+
+.wire-more { font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); cursor: pointer; padding: 0.35rem; }
+
+/* ── modals ────────────────────────────────────────────────────── */
+.modal-sub { font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); }
+.modal-sub .num { margin-right: 0.4rem; }
+
+.d-sec { margin-bottom: 1.4rem; }
+
+.d-sec > h6 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  margin-bottom: 0.6rem;
+}
+
+.d-sec > h6 i { color: var(--gold); }
+
+.d-rule { flex: 1 1 auto; height: 1px; background: var(--rule); }
+
+.d-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; }
+
+.d-tile {
+  border: 1px solid var(--rule);
+  border-radius: 0.35rem;
+  background: var(--panel-2);
+  padding: 0.45rem 0.55rem;
+}
+
+.d-tile .k { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); }
+.d-tile .v { font-size: 1.02rem; font-weight: 600; }
+
+.d-table { font-size: 0.82rem; }
+.d-table .ind-k { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
+.d-table td, .d-table th { border-color: var(--rule-soft); }
+.detail-scroll { overflow-x: auto; }
+
+.wbar { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); margin-top: 3px; }
+.wbar > i { display: block; height: 100%; border-radius: 2px; background: var(--gold); }
+
+.d-sec details {
+  border: 1px solid var(--rule);
+  border-radius: 0.4rem;
+  padding: 0.5rem 0.65rem;
+  margin-bottom: 0.5rem;
+}
+
+.d-sec summary { cursor: pointer; font-size: 0.85rem; }
+.d-sec summary > * { margin-right: 0.4rem; }
+
+.reasons { display: grid; gap: 0.25rem; font-size: 0.82rem; }
+.reasons i { width: 1rem; margin-right: 0.3rem; }
+.reason-group { font-size: 0.76rem; color: rgba(255, 255, 255, 0.72); margin: 0.6rem 0 0.25rem; }
+
+.desk-foot {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--rule);
+  font-size: 0.78rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.desk-foot i { color: rgba(255, 255, 255, 0.5); margin-right: 0.35rem; }
+
+/* ── focus, motion, small screens ──────────────────────────────── */
+.rail-chip:focus-visible,
+.wire-item:focus-visible,
+.cal-event:focus-visible,
+.btn-desk:focus-visible,
+.form-check-input:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--gold);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
 }
 
-/* reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .live-dot { animation: none; }
-  .scorebar .fill { transition: none; }
-  * { transition: none !important; }
+  *, *::before, *::after { transition: none !important; }
+}
+
+@media (max-width: 991.98px) {
+  .board-read { border-right: 0; border-bottom: 1px solid var(--rule); }
+  .board-read, .board-plot { padding: 1.15rem 1.15rem; }
 }
 
 @media (max-width: 575.98px) {
-  .tf-selector {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .workspace-card .card-body {
-    padding: 1rem;
-  }
-
-  .rail-chip {
-    flex: 1 1 calc(50% - 0.5rem);
-  }
+  .desk-price { font-size: 1.35rem; }
+  .desk-status { gap: 0.6rem; font-size: 0.75rem; }
+  .board-stats { grid-template-columns: 1fr; gap: 0.5rem; }
+  .desk-shell { padding: 0 0.75rem; }
 }
diff --git a/static/dashboard.html b/static/dashboard.html
index a5285f1..66b69e4 100644
--- a/static/dashboard.html
+++ b/static/dashboard.html
@@ -8,142 +8,168 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" crossorigin="anonymous">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
 <link rel="stylesheet" href="dashboard.css">
 </head>
 <body>
 
-<div class="container-fluid container-xl py-4">
-
-  <header class="card mb-3" id="hero">
-    <div class="card-body d-flex align-items-center flex-wrap gap-3">
-      <div>
-        <h1 class="xau-symbol mb-1"><i class="bi bi-coin me-1"></i>XAU/USD</h1>
-        <div class="display-5 fw-semibold xau-price" id="hero-price">—</div>
-      </div>
-      <div class="d-flex flex-wrap gap-2" id="hero-rail" aria-label="Select timeframe"></div>
-      <div class="ms-auto text-end">
-        <div id="hero-status" role="status"><span class="live-dot"></span>…</div>
-        <div class="small text-secondary"><i class="bi bi-hourglass-split me-1"></i>M5 close in <span class="num" id="hero-cd">--:--</span></div>
-        <div class="small text-secondary" id="hero-updated">updated —</div>
-      </div>
+<header class="desk-bar sticky-top">
+  <div class="desk-shell d-flex align-items-center flex-wrap gap-3">
+    <div class="d-flex align-items-baseline gap-2">
+      <i class="fa-solid fa-coins desk-mark" aria-hidden="true"></i>
+      <span class="desk-symbol">XAU/USD</span>
+      <span class="desk-price num" id="bar-price">—</span>
+    </div>
+    <nav class="desk-rail" id="bar-rail" aria-label="Jump to a timeframe"></nav>
+    <div class="desk-status ms-auto">
+      <span id="bar-market"><span class="live-dot"></span>Connecting</span>
+      <span class="desk-meta"><i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
+        5-minute close <span class="num" id="bar-cd">--:--</span></span>
+      <span class="desk-meta" id="bar-updated">waiting for data</span>
     </div>
-  </header>
-
-  <div class="alert alert-warning d-none" id="banner-closed" role="alert">
-    <i class="bi bi-moon-fill me-2"></i>Market closed (weekend) — showing Friday's last state. Calendar and news stay live.
   </div>
-  <div class="alert alert-danger d-none" id="banner-fail" role="alert"></div>
+</header>
+
+<main class="desk-shell pb-5">
+
+  <div class="alert alert-warning d-none mt-3" id="banner-closed" role="alert">
+    <i class="fa-solid fa-moon me-2" aria-hidden="true"></i>
+    Gold is closed for the weekend. The cards below hold Friday's last reading; news and the calendar keep updating.
+  </div>
+  <div class="alert alert-danger d-none mt-3" id="banner-fail" role="alert"></div>
   <div class="visually-hidden" id="dashboard-live" aria-live="polite"></div>
 
-  <main>
-    <section class="card mb-4 d-none" id="context" aria-label="Market context">
-      <div class="card-body d-flex flex-wrap gap-3 align-items-start">
-        <div class="flex-grow-1" id="ctx-blurb"><strong>Market context</strong></div>
-        <div class="d-flex flex-wrap gap-2" id="ctx-chips"></div>
+  <section class="board mt-3" aria-labelledby="board-heading">
+    <div class="row g-0">
+      <div class="col-lg-4 board-read">
+        <h1 class="board-headline" id="board-heading">Reading the market</h1>
+        <p class="board-sub" id="board-sub">Waiting for the first scan to finish.</p>
+        <div class="board-news d-none" id="context">
+          <p class="context-text" id="ctx-blurb"></p>
+          <div class="context-chips" id="ctx-chips"></div>
+        </div>
+        <div class="board-stats" id="board-stats"></div>
       </div>
-    </section>
+      <div class="col-lg-8 board-plot">
+        <h2 class="plot-title">Direction by timeframe</h2>
+        <div class="chart-wrap chart-direction">
+          <canvas id="chart-direction" role="img"
+                  aria-label="Direction score of each timeframe, from minus 100 selling to plus 100 buying"></canvas>
+        </div>
+        <p class="plot-note">Bars grow out of the centre line. Right is buying pressure, left is selling
+          pressure, and the full scale runs to 100 either way.</p>
+      </div>
+    </div>
+  </section>
 
-    <section class="mb-4" aria-labelledby="workspace-heading">
-      <h2 class="text-uppercase text-secondary small fw-bold mb-3 d-flex align-items-center gap-2" id="workspace-heading">
-        <i class="bi bi-crosshair text-primary"></i>
-        Signal workspace
-        <span class="fw-normal text-body-secondary" style="text-transform:none">— select a timeframe</span>
-      </h2>
-      <div id="tf-grid"></div>
-    </section>
+  <section class="mt-4" aria-labelledby="tf-heading">
+    <div class="sec-head">
+      <h2 class="sec-title" id="tf-heading">Four reads on one market</h2>
+      <span class="sec-note">Every card is an independent scan. They are allowed to disagree.</span>
+    </div>
+    <div class="row g-3 row-cols-1 row-cols-md-2 row-cols-xxl-4" id="tf-grid"></div>
+  </section>
 
-    <section aria-labelledby="fundamentals-heading">
-      <h2 class="text-uppercase text-secondary small fw-bold mb-3 mt-4 d-flex align-items-center gap-2" id="fundamentals-heading">
-        <i class="bi bi-globe2 text-primary"></i>Fundamentals
-      </h2>
-      <div class="row g-3">
-        <div class="col-lg-8">
-          <div class="card h-100">
-            <div class="card-body">
-              <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
-                <h3 class="h5 card-title mb-0"><i class="bi bi-calendar-event me-2 text-primary"></i>Economic calendar</h3>
-                <span class="text-secondary small" id="calendar-note">times local · USD events</span>
-                <div class="form-check form-switch ms-auto">
-                  <input class="form-check-input" type="checkbox" id="hi-only">
-                  <label class="form-check-label small" for="hi-only">high impact only</label>
-                </div>
-              </div>
-              <div class="table-responsive">
-                <table class="table table-sm">
-                  <thead>
-                    <tr>
-                      <th>Time</th>
-                      <th>Cur</th>
-                      <th>Impact</th>
-                      <th>Event</th>
-                      <th class="text-end">Fcst</th>
-                      <th class="text-end">Prev</th>
-                      <th class="text-end">Actual</th>
-                    </tr>
-                  </thead>
-                  <tbody id="cal-body"><tr><td colspan="7" class="text-secondary text-center py-3">Loading calendar…</td></tr></tbody>
-                </table>
+  <section class="mt-4" aria-labelledby="fund-heading">
+    <div class="sec-head">
+      <h2 class="sec-title" id="fund-heading">What else is moving gold</h2>
+      <span class="sec-note">Context only. None of it changes a signal.</span>
+    </div>
+    <div class="row g-3">
+      <div class="col-xl-7">
+        <div class="card h-100">
+          <div class="card-body">
+            <div class="card-head">
+              <h3 class="card-title"><i class="fa-solid fa-calendar-day" aria-hidden="true"></i>Economic calendar</h3>
+              <span class="card-note" id="calendar-note">loading</span>
+              <div class="form-check form-switch ms-auto mb-0">
+                <input class="form-check-input" type="checkbox" id="hi-only">
+                <label class="form-check-label" for="hi-only">High impact only</label>
               </div>
             </div>
-          </div>
-        </div>
-        <div class="col-lg-4">
-          <div class="card h-100">
-            <div class="card-body">
-              <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
-                <h3 class="h5 card-title mb-0"><i class="bi bi-newspaper me-2 text-primary"></i>Newswire</h3>
-                <span class="text-secondary small" id="wire-note"></span>
-              </div>
-              <div id="wire-total" class="d-none"></div>
-              <div id="wire"></div>
+            <div class="table-responsive cal-scroll">
+              <table class="table table-sm align-middle cal-table">
+                <thead>
+                  <tr>
+                    <th scope="col">Time</th>
+                    <th scope="col">Cur</th>
+                    <th scope="col">Impact</th>
+                    <th scope="col">Event</th>
+                    <th scope="col" class="text-end">Forecast</th>
+                    <th scope="col" class="text-end">Previous</th>
+                    <th scope="col" class="text-end">Actual</th>
+                  </tr>
+                </thead>
+                <tbody id="cal-body">
+                  <tr><td colspan="7" class="empty">Loading the calendar</td></tr>
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
       </div>
-    </section>
-  </main>
+      <div class="col-xl-5">
+        <div class="card h-100">
+          <div class="card-body">
+            <div class="card-head">
+              <h3 class="card-title"><i class="fa-solid fa-newspaper" aria-hidden="true"></i>Newswire</h3>
+              <span class="card-note ms-auto" id="wire-note"></span>
+            </div>
+            <div id="wire-tone" class="tone d-none">
+              <div class="chart-wrap chart-tone">
+                <canvas id="chart-tone" role="img" aria-label="Share of headlines leaning bullish, neutral or bearish for gold"></canvas>
+              </div>
+              <div class="tone-legend" id="tone-legend"></div>
+            </div>
+            <div id="wire"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-  <footer class="mt-4 pt-3 border-top text-secondary small">
-    <i class="bi bi-info-circle me-1"></i>
-    Signals are generated on closed candles only and refresh at candle boundaries
-    (M5/M15/H1/H4). Not financial advice — educational and research use only.
+  <footer class="desk-foot">
+    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+    Every signal is built from closed candles and refreshes when the next candle closes.
+    Educational and research use, not financial advice.
   </footer>
 
-</div>
+</main>
 
-<div class="modal fade" id="tf-detail" tabindex="-1" aria-labelledby="detail-title" aria-hidden="true">
+<div class="modal fade" id="tf-detail" tabindex="-1" aria-labelledby="detail-title">
   <div class="modal-dialog modal-xl modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
         <div>
-          <h5 class="modal-title mb-0" id="detail-title">—</h5>
-          <div class="small text-secondary">
+          <h5 class="modal-title" id="detail-title">Timeframe</h5>
+          <div class="modal-sub">
             <span class="num" id="detail-price">—</span>
             <span id="detail-sub"></span>
           </div>
         </div>
-        <button id="detail-close" type="button" class="btn-close" aria-label="Close detail view"></button>
+        <button id="detail-close" type="button" class="btn-close" aria-label="Close the full analysis"></button>
       </div>
       <div class="modal-body" id="detail-body"></div>
     </div>
   </div>
 </div>
 
-<div class="modal fade" id="news-detail" tabindex="-1" aria-labelledby="nd-title" aria-hidden="true">
+<div class="modal fade" id="news-detail" tabindex="-1" aria-labelledby="nd-title">
   <div class="modal-dialog modal-lg modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="nd-title">News detail</h5>
-        <button id="nd-close" type="button" class="btn-close" aria-label="Close news detail"></button>
+        <button id="nd-close" type="button" class="btn-close" aria-label="Close the news detail"></button>
       </div>
       <div class="modal-body" id="nd-body"></div>
     </div>
   </div>
 </div>
 
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js" crossorigin="anonymous"></script>
 <script src="dashboard.js"></script>
 </body>
 </html>
diff --git a/static/dashboard.js b/static/dashboard.js
index 4a0c101..ad71280 100644
--- a/static/dashboard.js
+++ b/static/dashboard.js
@@ -2,27 +2,44 @@
 /* Gold Desk — XAU/USD dashboard frontend
  *
  * Reads snapshot.json + news.json published by dashboard_publisher.py and
- * renders a responsive, keyboard-accessible dashboard. Uses Bootstrap 5 for
- * layout/components/modals and a small custom CSS file for app-specific
- * visuals (score bar, signal colours, mono fonts).
+ * renders the desk: a ticker bar, a direction board, one Bootstrap card per
+ * timeframe (M5, M15, H1, H4) in a responsive column grid, and the news and
+ * calendar context below it.
  *
- * This file is intentionally self-contained: it mirrors a few constants from
- * the Python signal pipeline so the HTML does not depend on telegram_bot.
+ * Stack: Bootstrap 5 for layout and components, jQuery for DOM work and
+ * polling, Chart.js for the direction charts, Font Awesome for icons. No
+ * build step — this file is served as-is.
+ *
+ * Refresh: one coordinated loop. A poll is scheduled for the next candle
+ * boundary the snapshot announces, with a 60 s fallback and a 15 s retry, and
+ * only the parts whose data changed are redrawn (charts are updated in place,
+ * never rebuilt, so nothing flashes). It mirrors a few constants from the
+ * Python signal pipeline so the page never depends on telegram_bot.
  */
 
+/* ── constants ────────────────────────────────────────────────── */
 const IND_ORDER = ["ema_trend", "rsi", "macd", "bollinger", "adx", "roc", "keltner", "divergence", "candlestick"];
 const IND_SHORT = {
   ema_trend: "EMA", rsi: "RSI", macd: "MACD", bollinger: "BB",
   adx: "ADX", roc: "ROC", keltner: "KC", divergence: "Div", candlestick: "Cndl"
 };
-const ARROW = { STRONG_BUY: "⇈", BUY: "↑", NEUTRAL: "→", SELL: "↓", STRONG_SELL: "⇊" };
+const IND_NAME = {
+  ema_trend: "EMA trend", rsi: "RSI", macd: "MACD", bollinger: "Bollinger bands",
+  adx: "ADX", roc: "Rate of change", keltner: "Keltner channel",
+  divergence: "Divergence", candlestick: "Candlestick pattern"
+};
+const VOTE = { STRONG_BUY: 2, BUY: 1, NEUTRAL: 0, SELL: -1, STRONG_SELL: -2 };
+const SIG_ICON = {
+  STRONG_BUY: "fa-angles-up", BUY: "fa-arrow-trend-up", NEUTRAL: "fa-arrows-left-right",
+  SELL: "fa-arrow-trend-down", STRONG_SELL: "fa-angles-down"
+};
 const TF_LABEL = { "5min": "M5", "15min": "M15", "1h": "H1", "4h": "H4" };
+const TF_LONG = { "5min": "5-minute", "15min": "15-minute", "1h": "1-hour", "4h": "4-hour" };
 const TF_ORDER = ["5min", "15min", "1h", "4h"];
 const TF_SECONDS = { "5min": 300, "15min": 900, "1h": 3600, "4h": 14400 };
 const FALLBACK_POLL_MS = 60000;
 const RETRY_MS = 15000;
 const HIGH_IMPACT_PREF = "goldDeskHighImpactOnly";
-const TIMEFRAME_PREF = "goldDeskSelectedTimeframe";
 
 const LEVEL_LABEL = {
   ema_fast: "EMA fast", ema_medium: "EMA medium", ema_slow: "EMA slow", ema_trend: "EMA trend",
@@ -32,6 +49,7 @@ const LEVEL_LABEL = {
   swing_low_1: "Swing low 1", swing_low_2: "Swing low 2", swing_low_3: "Swing low 3"
 };
 
+/* ── state ────────────────────────────────────────────────────── */
 let snapshot = null, news = null;
 let clockOffset = 0;
 let lastPollOk = null;
@@ -40,7 +58,6 @@ let refetchTimer = null;
 let fallbackTimer = null;
 let pollInFlight = false;
 let pollQueued = false;
-let selectedTf = "5min";
 
 let detailTf = null;
 let ndState = null;
@@ -48,35 +65,39 @@ const aiMemo = new Map();
 const aiErr = new Map();
 const aiPending = new Set();
 
-let tfModal = null;
-let newsModal = null;
-let tfModalOpen = false;
-let newsModalOpen = false;
+let tfModal = null, newsModal = null;
+let tfModalOpen = false, newsModalOpen = false;
 
-const $ = id => document.getElementById(id);
+const charts = { direction: null, tone: null, ind: {} };
+const lastCells = {};
+let C = {};
+const REDUCED_MOTION = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
 /* ── helpers ──────────────────────────────────────────────────── */
 const esc = s => String(s ?? "").replace(/[&<>"']/g,
-  c => ({"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"}[c]));
+  c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
 
 const fmt$ = v => v == null ? "—" : Number(v).toLocaleString("en-US",
   { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 
-const sigClass = s => s?.includes("BUY") ? "buy" : s?.includes("SELL") ? "sell" : "neutral";
-const sigLabel = s => (s || "NEUTRAL").replace("_", " ");
+const signed = (v, dp = 2) => v == null ? "—" : (v >= 0 ? "+" : "") + Number(v).toFixed(dp);
+const sigClass = s => s && s.includes("BUY") ? "buy" : s && s.includes("SELL") ? "sell" : "neutral";
+const sigWord = s => ({ STRONG_BUY: "Strong buy", BUY: "Buy", NEUTRAL: "No signal", SELL: "Sell", STRONG_SELL: "Strong sell" }[s] || "No signal");
+const dirClass = s => "sig-" + sigClass(s);
+const toneClass = s => sigClass(s) === "buy" ? "up" : sigClass(s) === "sell" ? "down" : "flat";
 const nowServer = () => Date.now() / 1000 + clockOffset;
+const cssVar = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
 
 function localGet(key) {
-  try { return window.localStorage.getItem(key); } catch { return null; }
+  try { return window.localStorage.getItem(key); } catch (e) { return null; }
 }
 
 function localSet(key, value) {
-  try { window.localStorage.setItem(key, value); } catch { /* storage is optional */ }
+  try { window.localStorage.setItem(key, value); } catch (e) { /* storage is optional */ }
 }
 
 function announce(message) {
-  const live = $("dashboard-live");
-  if (live) live.textContent = message;
+  $("#dashboard-live").text(message);
 }
 
 function fmtCountdown(secs) {
@@ -96,247 +117,591 @@ function fmtAge(iso) {
   return `${Math.round(secs / 86400)}d ago`;
 }
 
-const signed = (v, dp = 2) => v == null ? "—" : (v >= 0 ? "+" : "") + Number(v).toFixed(dp);
-const badgeCls = s => s === "buy" ? "bg-success-subtle text-success-emphasis border-success-subtle"
-                 : s === "sell" ? "bg-danger-subtle text-danger-emphasis border-danger-subtle"
-                 : "bg-secondary-subtle text-secondary-emphasis border-secondary-subtle";
+const COUNT_WORD = ["No", "One", "Two", "Three", "Four"];
 
-/* ── theme ────────────────────────────────────────────────────── */
-// Dark theme is forced site-wide (owner decision 2026-08-16): dark
-// background, pure-white text, red/green data accents.
-document.documentElement.setAttribute("data-bs-theme", "dark");
+// The engine writes "STRONG BUY — High-quality setup, consider entry". The
+// card already shouts the signal, so keep only the part after the dash.
+function actionTail(action) {
+  if (!action) return "";
+  const cut = action.indexOf("—");
+  return cut === -1 ? action : action.slice(cut + 1).trim();
+}
 
-/* ── hero ─────────────────────────────────────────────────────── */
-function renderHero() {
+/* Dark only (owner decision 2026-08-16). */
+$("html").attr("data-bs-theme", "dark");
+
+/* ── chart layer ──────────────────────────────────────────────── */
+function loadColors() {
+  C = {
+    up: cssVar("--up"), down: cssVar("--down"), flat: cssVar("--flat"),
+    grid: cssVar("--grid"), zero: cssVar("--zero"), axis: cssVar("--axis"),
+    panel: cssVar("--panel"), gold: cssVar("--gold")
+  };
+}
+
+const markColor = v => v > 0 ? C.up : v < 0 ? C.down : C.flat;
+const endRadius = v => v < 0
+  ? { topLeft: 4, bottomLeft: 4, topRight: 0, bottomRight: 0 }
+  : { topRight: 4, bottomRight: 4, topLeft: 0, bottomLeft: 0 };
+
+function gridFor(zeroWidth) {
+  return {
+    color: ctx => ctx.tick.value === 0 ? C.zero : C.grid,
+    lineWidth: ctx => ctx.tick.value === 0 ? zeroWidth : 1,
+    drawTicks: false
+  };
+}
+
+function buildCharts() {
+  Chart.defaults.font.family = '"IBM Plex Sans", system-ui, sans-serif';
+  Chart.defaults.font.size = 11;
+  Chart.defaults.color = C.axis;
+  // Mutate the duration; replacing defaults.animation wholesale drops the
+  // interpolator Chart.js attaches to it and every draw throws.
+  if (REDUCED_MOTION) Chart.defaults.animation = false;
+  else Chart.defaults.animation.duration = 260;
+  Chart.defaults.plugins.tooltip.backgroundColor = "#1d242e";
+  Chart.defaults.plugins.tooltip.borderColor = "rgba(255,255,255,.16)";
+  Chart.defaults.plugins.tooltip.borderWidth = 1;
+  Chart.defaults.plugins.tooltip.titleColor = "#fff";
+  Chart.defaults.plugins.tooltip.bodyColor = "rgba(255,255,255,.9)";
+  Chart.defaults.plugins.tooltip.padding = 9;
+  Chart.defaults.plugins.tooltip.displayColors = false;
+
+  charts.direction = new Chart($("#chart-direction")[0].getContext("2d"), {
+    type: "bar",
+    data: {
+      labels: TF_ORDER.map(tf => TF_LABEL[tf]),
+      datasets: [{
+        data: [null, null, null, null],
+        backgroundColor: C.flat,
+        borderRadius: 4,
+        borderSkipped: false,
+        barThickness: 20,
+        maxBarThickness: 24
+      }]
+    },
+    options: {
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      layout: { padding: { top: 2, bottom: 2 } },
+      scales: {
+        x: {
+          min: -100, max: 100,
+          grid: gridFor(1.5),
+          border: { display: false },
+          ticks: {
+            stepSize: 50, color: C.axis, font: { family: '"IBM Plex Mono", monospace' },
+            callback: v => v > 0 ? "+" + v : String(v)
+          }
+        },
+        y: {
+          grid: { display: false },
+          border: { display: false },
+          ticks: { color: "#fff", font: { family: '"IBM Plex Mono", monospace', size: 13, weight: "600" } }
+        }
+      },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            title: items => TF_LONG[TF_ORDER[items[0].dataIndex]] + " scan",
+            label: item => {
+              const r = snapshot && snapshot.timeframes[TF_ORDER[item.dataIndex]] &&
+                snapshot.timeframes[TF_ORDER[item.dataIndex]].report;
+              const v = item.parsed.x;
+              return `${sigWord(r && r.signal)}, score ${signed(v, 1)}`;
+            }
+          }
+        }
+      }
+    }
+  });
+
+  charts.tone = new Chart($("#chart-tone")[0].getContext("2d"), {
+    type: "bar",
+    data: {
+      labels: [""],
+      datasets: [
+        { label: "Neutral", data: [0], backgroundColor: C.flat },
+        { label: "Bearish for gold", data: [0], backgroundColor: C.down },
+        { label: "Neutral ", data: [0], backgroundColor: C.flat },
+        { label: "Bullish for gold", data: [0], backgroundColor: C.up }
+      ].map(d => Object.assign(d, {
+        borderColor: C.panel, borderWidth: 2, borderSkipped: false,
+        barThickness: 16, borderRadius: 3
+      }))
+    },
+    options: {
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          stacked: true, min: -100, max: 100,
+          grid: gridFor(1.5),
+          border: { display: false },
+          ticks: { stepSize: 50, color: C.axis, callback: v => Math.abs(v) + "%" }
+        },
+        y: { stacked: true, grid: { display: false }, border: { display: false }, ticks: { display: false } }
+      },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            title: () => "Headline tone",
+            label: item => `${item.dataset.label.trim()}: ${Math.abs(item.parsed.x).toFixed(0)}%`
+          }
+        }
+      }
+    }
+  });
+}
+
+function indChart(tf) {
+  if (charts.ind[tf]) return charts.ind[tf];
+  const el = document.getElementById("ind-" + tf);
+  if (!el) return null;
+  charts.ind[tf] = new Chart(el.getContext("2d"), {
+    type: "bar",
+    data: {
+      labels: IND_ORDER.map(n => IND_SHORT[n]),
+      datasets: [{
+        data: IND_ORDER.map(() => 0),
+        backgroundColor: C.flat,
+        borderRadius: 3,
+        borderSkipped: false,
+        barThickness: 7
+      }]
+    },
+    options: {
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      layout: { padding: { right: 4 } },
+      scales: {
+        x: {
+          min: -2, max: 2,
+          grid: gridFor(1.5),
+          border: { display: false },
+          ticks: { display: false }
+        },
+        y: {
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            // An indicator with no reading is not a neutral vote: both draw
+            // no bar, so the dimmed label is what tells them apart.
+            color: ctx => (lastCells[tf] && lastCells[tf][ctx.index] && !lastCells[tf][ctx.index].present)
+              ? "rgba(255,255,255,.32)" : C.axis,
+            font: { family: '"IBM Plex Mono", monospace', size: 10 },
+            padding: 0
+          }
+        }
+      },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            title: items => IND_NAME[IND_ORDER[items[0].dataIndex]],
+            label: item => {
+              const cell = (lastCells[tf] || indCells(currentReport(tf)))[item.dataIndex];
+              if (!cell || !cell.present) return "No reading on this scan";
+              return `${sigWord(cell.sig)}, confidence ${Math.round(cell.conf)}%`;
+            }
+          }
+        }
+      }
+    }
+  });
+  return charts.ind[tf];
+}
+
+const currentReport = tf => (snapshot && snapshot.timeframes[tf] && snapshot.timeframes[tf].report) || null;
+
+function indCells(r) {
+  const src = (r && r.primary_analysis && r.primary_analysis.indicators) || (r && r.indicators) || {};
+  return IND_ORDER.map(name => {
+    const i = src[name];
+    if (!i) return { v: 0, present: false, sig: null, conf: null };
+    const conf = i.confidence == null ? 100 : i.confidence;
+    return { v: (VOTE[i.signal] || 0) * conf / 100, present: true, sig: i.signal, conf: conf };
+  });
+}
+
+function paint(chart, values, colors) {
+  if (!chart) return;
+  chart.data.datasets[0].data = values;
+  chart.data.datasets[0].backgroundColor = colors;
+  chart.data.datasets[0].borderRadius = values.map(endRadius);
+  // A canvas that was display:none when the chart was built measured 0×0
+  // and keeps drawing at that size; re-measure before every paint.
+  chart.resize();
+  chart.update(REDUCED_MOTION ? "none" : undefined);
+}
+
+function updateDirectionChart() {
+  const values = TF_ORDER.map(tf => {
+    const r = currentReport(tf);
+    return r && r.score != null ? r.score : null;
+  });
+  paint(charts.direction, values, values.map(markColor));
+}
+
+function updateIndChart(tf) {
+  const cells = indCells(currentReport(tf));
+  lastCells[tf] = cells;
+  paint(indChart(tf), cells.map(c => c.v), cells.map(c => markColor(c.v)));
+}
+
+function updateToneChart() {
+  const scored = ((news && news.headlines) || []).filter(h => typeof h.score === "number");
+  const box = $("#wire-tone");
+  if (!scored.length) { box.addClass("d-none"); return; }
+  box.removeClass("d-none");
+  const n = scored.length;
+  const up = scored.filter(h => h.score > 0.05).length;
+  const down = scored.filter(h => h.score < -0.05).length;
+  const flat = n - up - down;
+  const pct = k => k / n * 100;
+  const half = pct(flat) / 2;
+  charts.tone.data.datasets[0].data = [-half];
+  charts.tone.data.datasets[1].data = [-pct(down)];
+  charts.tone.data.datasets[2].data = [half];
+  charts.tone.data.datasets[3].data = [pct(up)];
+  charts.tone.resize();
+  charts.tone.update(REDUCED_MOTION ? "none" : undefined);
+
+  const key = (color, text) =>
+    `<span><i class="tone-key" style="background:${color}"></i>${esc(text)}</span>`;
+  $("#tone-legend").html(
+    key(C.up, `${up} bullish`) + key(C.flat, `${flat} neutral`) + key(C.down, `${down} bearish`) +
+    `<span class="ms-auto">${n} scored headlines</span>`);
+}
+
+/* ── ticker bar ───────────────────────────────────────────────── */
+function renderBar() {
   if (!snapshot) return;
   let price = null;
   for (const tf of TF_ORDER) {
-    const p = snapshot.timeframes[tf]?.report?.current_price;
-    if (p) { price = p; break; }
+    const r = currentReport(tf);
+    if (r && r.current_price) { price = r.current_price; break; }
   }
-  $("hero-price").textContent = price ? fmt$(price) : "—";
+  $("#bar-price").text(price ? fmt$(price) : "—");
 
-  $("hero-rail").innerHTML = TF_ORDER.map(tf => {
-    const r = snapshot.timeframes[tf]?.report;
-    const sig = r?.signal || null;
-    const cls = sigClass(sig);
-    const arrow = sig ? (ARROW[sig] || "→") : "·";
-    const score = r?.score != null ? r.score.toFixed(0) : "–";
-    const textColor = cls === "buy" ? "text-success" : cls === "sell" ? "text-danger" : "text-secondary";
-    return `<button type="button" class="rail-chip" data-select-tf="${tf}"
-      aria-current="${tf === selectedTf ? "true" : "false"}"
-      title="${esc(sigLabel(sig))} (score ${esc(score)}) — select ${TF_LABEL[tf]} workspace">
-      <span class="tf-name">${TF_LABEL[tf]}</span>
-      <span class="${textColor} fw-bold">${arrow}</span>
-      <span>${esc(score)}</span>
+  $("#bar-rail").html(TF_ORDER.map(tf => {
+    const r = currentReport(tf);
+    const sig = r ? r.signal : null;
+    const icon = sig ? SIG_ICON[sig] : "fa-hourglass-half";
+    const score = r && r.score != null ? signed(r.score, 0) : "–";
+    return `<button type="button" class="rail-chip ${dirClass(sig)}" data-goto-tf="${tf}"
+      title="${esc(TF_LONG[tf])} scan: ${esc(sigWord(sig))}. Jump to the card.">
+      <span class="rail-tf">${TF_LABEL[tf]}</span>
+      <i class="fa-solid ${icon} rail-score" aria-hidden="true"></i>
+      <span class="rail-score">${esc(score)}</span>
     </button>`;
-  }).join("");
+  }).join(""));
 
   const closed = snapshot.market_closed;
-  $("hero-status").innerHTML =
-    `<span class="live-dot${closed ? " closed" : ""}"></span>${closed ? "CLOSED" : "OPEN"}`;
-  $("banner-closed").classList.toggle("d-none", !closed);
+  $("#bar-market").html(`<span class="live-dot${closed ? " closed" : ""}"></span>${closed ? "Closed" : "Open"}`);
+  $("#banner-closed").toggleClass("d-none", !closed);
 }
 
-/* ── market context strip ─────────────────────────────────────── */
+/* ── direction board ──────────────────────────────────────────── */
+function eventRisk() {
+  let risk = "clear", desc = "Nothing scheduled that usually moves gold.";
+  if (snapshot) {
+    for (const tf of TF_ORDER) {
+      const r = currentReport(tf);
+      if (r && r.event_risk && r.event_risk !== "clear") {
+        risk = r.event_risk;
+        desc = r.event_description || desc;
+        break;
+      }
+      if (r && r.event_description) desc = r.event_description;
+    }
+  }
+  if (news && news.high_impact_warning) {
+    risk = "danger";
+    desc = news.warning_message || desc;
+  }
+  return { risk: risk, desc: desc };
+}
+
+function renderBoard() {
+  if (!snapshot) return;
+  const reads = TF_ORDER.map(tf => ({ tf: tf, r: currentReport(tf) })).filter(x => x.r);
+  if (!reads.length) {
+    $("#board-heading").text("Warming up");
+    $("#board-sub").text("No timeframe has finished a scan yet. The first reading lands at the next candle close.");
+    $("#board-stats").empty();
+    return;
+  }
+
+  const buys = reads.filter(x => sigClass(x.r.signal) === "buy");
+  const sells = reads.filter(x => sigClass(x.r.signal) === "sell");
+  const n = reads.length;
+  let headline;
+  if (buys.length && sells.length) headline = "The timeframes disagree";
+  else if (buys.length === n) headline = `All ${COUNT_WORD[n].toLowerCase()} timeframes read buy`;
+  else if (sells.length === n) headline = `All ${COUNT_WORD[n].toLowerCase()} timeframes read sell`;
+  else if (buys.length) headline = `${COUNT_WORD[buys.length]} of ${COUNT_WORD[n].toLowerCase()} timeframes read buy`;
+  else if (sells.length) headline = `${COUNT_WORD[sells.length]} of ${COUNT_WORD[n].toLowerCase()} timeframes read sell`;
+  else headline = "No clear direction";
+  $("#board-heading").text(headline);
+
+  const strongest = reads.slice().sort((a, b) => Math.abs(b.r.score || 0) - Math.abs(a.r.score || 0))[0];
+  const plans = reads.filter(x => x.r.trade_setup).length;
+  const mean = reads.reduce((a, x) => a + (x.r.score || 0), 0) / n;
+  const planLine = plans
+    ? (plans === 1 ? "One timeframe is carrying a trade plan." : `${COUNT_WORD[plans]} timeframes are carrying a trade plan.`)
+    : "No timeframe is carrying a trade plan right now.";
+  $("#board-sub").text(
+    `The ${TF_LONG[strongest.tf]} scan is the strongest read at ${signed(strongest.r.score, 0)}. ${planLine}`);
+
+  const ev = eventRisk();
+  const evWord = { clear: "Clear", elevated: "Elevated", danger: "High", high: "High" }[ev.risk] ||
+    ev.risk.charAt(0).toUpperCase() + ev.risk.slice(1);
+  const meanCls = mean > 5 ? "up" : mean < -5 ? "down" : "flat";
+  $("#board-stats").html(
+    `<div><span class="k">Average direction</span>
+       <span class="v num ${meanCls}">${signed(mean, 0)}</span> <small>of 100</small></div>
+     <div><span class="k">Trade plans live</span>
+       <span class="v num">${plans}</span> <small>of ${n} scans</small></div>
+     <div><span class="k">Event risk</span>
+       <span class="v ${ev.risk === "clear" ? "" : "text-warning"}">${esc(evWord)}</span></div>`);
+  $("#board-stats > div:last-child").attr("title", ev.desc);
+}
+
+/* ── the news voice on the board ──────────────────────────────── */
 function renderContext() {
   if (!news) return;
-  $("context").classList.remove("d-none");
-  $("ctx-blurb").innerHTML = news.llm_summary
-    ? `<strong>Market context:</strong> ${esc(news.llm_summary)}`
-    : `<strong>Market context:</strong> <span class="text-secondary">no summary available</span>`;
+  $("#context").removeClass("d-none");
+  $("#ctx-blurb").text(news.llm_summary || "No news summary for this hour.");
 
   let chips = "";
   for (const cur of ["XAU", "USD"]) {
-    const v = news.sentiment?.[cur];
+    const v = news.sentiment && news.sentiment[cur];
     if (v == null) continue;
-    const cls = v > 0.05 ? "text-bg-success" : v < -0.05 ? "text-bg-danger" : "text-bg-secondary";
-    chips += `<span class="badge ${cls}" title="Mean headline sentiment for ${cur} (−1…+1)">
-      ${cur} news <span class="num">${v >= 0 ? "+" : ""}${v.toFixed(2)}</span></span>`;
+    const cls = v > 0.05 ? "chip-up" : v < -0.05 ? "chip-down" : "";
+    chips += `<span class="chip ${cls}" title="Average tone of the ${cur} headlines, from −1 to +1. Context only — news never changes a signal.">
+      ${cur === "XAU" ? "Gold" : "Dollar"} news <span class="num">${signed(v, 2)}</span></span>`;
   }
-  let risk = "clear", riskDesc = "No significant events";
-  if (snapshot) {
-    for (const tf of TF_ORDER) {
-      const r = snapshot.timeframes[tf]?.report;
-      if (r?.event_risk && r.event_risk !== "clear") { risk = r.event_risk; riskDesc = r.event_description; break; }
-      if (r?.event_description) riskDesc = r.event_description;
-    }
-  }
-  if (news.high_impact_warning) { risk = "danger"; riskDesc = news.warning_message || riskDesc; }
-  const riskCls = risk === "clear" ? "text-bg-success"
-                : risk === "danger" ? "text-bg-danger"
-                : "text-bg-warning";
-  chips += `<span class="badge ${riskCls}" title="${esc(riskDesc)}">event risk: ${risk.toUpperCase()}</span>`;
-  $("ctx-chips").innerHTML = chips;
+  $("#ctx-chips").html(chips);
 }
 
 /* ── timeframe cards ──────────────────────────────────────────── */
-function scoreBar(label, score) {
-  const v = Math.max(-100, Math.min(100, score ?? 0));
-  const width = (Math.abs(v) / 2).toFixed(1);
-  return `<div class="scorebar">
-    <span class="lbl">${label}</span>
-    <div class="gauge-container" aria-hidden="true">
-      <i class="fill ${v >= 0 ? "pos" : "neg"}" style="--score-width:${width}%"></i>
-    </div>
-    <span class="val num ${v > 0 ? "text-success" : v < 0 ? "text-danger" : ""}">${v >= 0 ? "+" : ""}${v.toFixed(1)}</span>
+function cardShell(tf) {
+  return `<div class="col">
+    <article class="card tf-card sig-neutral" id="card-${tf}" aria-labelledby="name-${tf}">
+      <div class="tf-edge"></div>
+      <div class="card-body">
+        <div class="tf-head">
+          <h3 class="tf-name" id="name-${tf}">${TF_LABEL[tf]}</h3>
+          <span class="tf-long">${TF_LONG[tf]} candles</span>
+          <span class="chip chip-warn d-none" data-f="stale">
+            <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>scan failed</span>
+          <span class="tf-clock ms-auto"><i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
+            <span class="num" data-f="countdown" data-close="" data-interval="${TF_SECONDS[tf]}">--:--</span></span>
+        </div>
+        <div class="d-none" data-f="live">
+          <div class="tf-signal">
+            <i class="fa-solid fa-hourglass-half" data-f="icon" aria-hidden="true"></i>
+            <span data-f="signal">Warming up</span>
+            <span class="grade d-none" data-f="grade"></span>
+          </div>
+          <p class="tf-action" data-f="action"></p>
+          <div class="tf-readouts">
+            <div>
+              <span class="readout-k">Direction score</span>
+              <span class="readout-v num" data-f="score">—</span>
+              <span class="meter" aria-hidden="true"><i data-f="score-fill"></i></span>
+            </div>
+            <div>
+              <span class="readout-k">Confidence</span>
+              <span class="readout-v num" data-f="confidence">—</span>
+              <span class="meter meter-linear" aria-hidden="true"><i data-f="conf-fill"></i></span>
+            </div>
+          </div>
+          <div class="tf-chips" data-f="chips"></div>
+          <h4 class="tf-sub">What is driving it</h4>
+          <div class="chart-wrap chart-ind">
+            <canvas id="ind-${tf}" role="img"
+              aria-label="How each indicator voted on the ${TF_LONG[tf]} scan. The table in the full analysis carries the same numbers."></canvas>
+          </div>
+          <div data-f="plan"></div>
+          <div class="tf-flags" data-f="flags"></div>
+        </div>
+        <div class="tf-empty" data-f="empty">
+          <i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>Loading the latest scan.</div>
+      </div>
+      <div class="card-footer">
+        <button type="button" class="btn btn-sm btn-desk" data-open-detail="${tf}">
+          <i class="fa-solid fa-magnifying-glass-chart" aria-hidden="true"></i>Full analysis
+        </button>
+        <span class="tf-scanned" data-f="scanned"></span>
+      </div>
+    </article>
   </div>`;
 }
 
-function setupCard(ts) {
-  if (!ts) return "";
-  const dir = ts.direction === "BUY" ? "buy" : "sell";
-  const dirIcon = ts.direction === "BUY" ? "bi-arrow-up-circle-fill" : "bi-arrow-down-circle-fill";
+function buildCards() {
+  $("#tf-grid").html(TF_ORDER.map(cardShell).join(""));
+  TF_ORDER.forEach(tf => indChart(tf));
+}
+
+function planHTML(ts) {
+  if (!ts) {
+    return `<div class="plan plan-empty">
+      <i class="fa-regular fa-circle-xmark me-1" aria-hidden="true"></i>
+      No trade plan. The signal did not clear the gate that releases an entry, stop and target.</div>`;
+  }
+  const buy = ts.direction === "BUY";
   const trail = (ts.trail_arm_r != null && ts.trail_dist_r != null)
-    ? `arm ${ts.trail_arm_r}R · dist ${ts.trail_dist_r}R` : "platform default";
-  return `<div class="card border-signal sig-${dir} bg-body-tertiary">
-    <div class="card-body py-2 px-3">
-      <div class="d-flex align-items-baseline gap-2 mb-2">
-        <span class="fw-bold text-signal sig-${dir}"><i class="bi ${dirIcon} me-1"></i>${ts.direction}</span>
-        <span class="small text-secondary font-monospace">${esc(ts.strategy || "")}</span>
-        <span class="small text-secondary ms-auto font-monospace">R:R ${(+ts.risk_reward).toFixed(1)}</span>
-      </div>
-      <div class="table-responsive"><table class="table table-sm table-borderless mb-0">
-        <tbody><tr><td class="text-secondary"><i class="bi bi-box-arrow-in-right me-1"></i>Entry</td><td class="num">${fmt$(ts.entry)}</td>
-            <td class="text-secondary ps-4"><i class="bi bi-flag-fill me-1 text-success"></i>TP1</td><td class="num text-success">${fmt$(ts.take_profit_1)}</td></tr>
-        <tr><td class="text-secondary"><i class="bi bi-shield-x me-1 text-danger"></i>Stop</td><td class="num text-danger">${fmt$(ts.stop_loss)}</td>
-            <td class="text-secondary ps-4"><i class="bi bi-flag-fill me-1 text-success"></i>TP2</td><td class="num text-success">${fmt$(ts.take_profit_2)}</td></tr>
-        <tr><td class="text-secondary"><i class="bi bi-signpost-split me-1"></i>Trail</td><td class="num" colspan="3">${esc(trail)}</td></tr></tbody>
-      </table></div>
+    ? `Stop starts trailing at ${ts.trail_arm_r}R of profit and follows ${ts.trail_dist_r}R behind.`
+    : "Trailing uses the platform default.";
+  return `<div class="plan ${buy ? "sig-buy" : "sig-sell"}">
+    <div class="plan-head">
+      <i class="fa-solid ${buy ? "fa-arrow-trend-up" : "fa-arrow-trend-down"}" aria-hidden="true"></i>
+      ${buy ? "Buy plan" : "Sell plan"}
+      <span class="plan-strategy">${esc(ts.strategy || "")}</span>
+      <span class="plan-rr">${(+ts.risk_reward).toFixed(1)} to 1</span>
     </div>
+    <dl class="plan-grid">
+      <div><dt><i class="fa-solid fa-right-to-bracket" aria-hidden="true"></i>Entry</dt>
+        <dd>${fmt$(ts.entry)}</dd></div>
+      <div><dt><i class="fa-solid fa-shield-halved" aria-hidden="true"></i>Stop</dt>
+        <dd class="down">${fmt$(ts.stop_loss)}</dd></div>
+      <div><dt><i class="fa-solid fa-bullseye" aria-hidden="true"></i>Target 1</dt>
+        <dd class="up">${fmt$(ts.take_profit_1)}</dd></div>
+      <div><dt><i class="fa-solid fa-flag-checkered" aria-hidden="true"></i>Target 2</dt>
+        <dd class="up">${fmt$(ts.take_profit_2)}</dd></div>
+    </dl>
+    <div class="plan-trail">${esc(trail)}</div>
   </div>`;
 }
 
-function workspacePanel(tf) {
-  const entry = snapshot?.timeframes?.[tf] || {};
+function flagsHTML(r, limit) {
+  let out = "";
+  if (r.watch_line) {
+    out += `<div class="flag-watch"><i class="fa-solid fa-bolt" aria-hidden="true"></i>${esc(r.watch_line)}</div>`;
+  }
+  const warns = (r.warnings || []).slice(0, limit);
+  warns.forEach(w => {
+    out += `<div class="flag-warn"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>${esc(w)}</div>`;
+  });
+  const extra = (r.warnings || []).length - warns.length;
+  if (extra > 0) {
+    out += `<div class="flat">${extra} more note${extra > 1 ? "s" : ""} in the full analysis.</div>`;
+  }
+  return out;
+}
+
+function renderCard(tf) {
+  const entry = (snapshot && snapshot.timeframes[tf]) || {};
   const r = entry.report;
+  const $card = $("#card-" + tf);
+  const f = name => $card.find(`[data-f="${name}"]`);
+
+  f("countdown").attr("data-close", entry.next_close_epoch || "");
+  f("scanned").text(entry.scanned_at ? "scanned " + fmtAge(entry.scanned_at) : "");
+  f("stale").toggleClass("d-none", !(entry.status === "error" && r));
+
   if (!r) {
-    return `<article class="card workspace-card border-signal sig-neutral" id="workspace-panel" aria-labelledby="workspace-panel-heading">
-      <div class="card-body py-4 text-center text-secondary">
-        <h3 class="tf-name mb-2" id="workspace-panel-heading">${TF_LABEL[tf]}</h3>
-        ${entry.status === "error"
-          ? `<span class="badge text-bg-danger">SCAN UNAVAILABLE</span><div class="small mt-2">Showing again when the next scan succeeds.</div>`
-          : "Warming up — no completed scan for this timeframe yet."}
-      </div>
-    </article>`;
+    $card.removeClass("sig-buy sig-sell").addClass("sig-neutral");
+    f("live").addClass("d-none");
+    f("empty").removeClass("d-none").html(entry.status === "error"
+      ? `<i class="fa-solid fa-plug-circle-exclamation" aria-hidden="true"></i>
+         Scan unavailable. The card fills in again as soon as a scan succeeds.`
+      : `<i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
+         Warming up. The first reading lands at the next candle close.`);
+    return;
   }
 
-  const cls = sigClass(r.signal);
-  const textCls = cls === "buy" ? "text-success" : cls === "sell" ? "text-danger" : "text-secondary";
-  const qHi = r.quality === "A+" || r.quality === "A";
-  const pa = r.primary_analysis;
-  const meta = [r.market_regime, r.volatility_regime && r.volatility_regime + " volatility",
-    r.mtf_agreement ? "MTF aligned" : "MTF mixed"].filter(Boolean).join(" · ");
-  const facts = `<div class="row row-cols-2 row-cols-md-4 g-2 mt-1">
-    ${tile("Confidence", r.confidence != null ? Math.round(r.confidence) + "%" : "—")}
-    ${tile("Quality", esc(r.quality || "—"), qHi ? "text-primary" : "")}
-    ${tile("Event risk", esc((r.event_risk || "—").toUpperCase()), r.event_risk === "clear" ? "text-success" : r.event_risk ? "text-warning" : "")}
-    ${tile("MTF", r.mtf_agreement ? "aligned" : "mixed", r.mtf_agreement ? "text-success" : "")}
-  </div>`;
-  const setup = r.trade_setup
-    ? setupCard(r.trade_setup)
-    : `<div class="text-secondary small">No setup published. The signal has not cleared its setup gate.</div>`;
-  return `<article class="card workspace-card border-signal sig-${cls}" id="workspace-panel" aria-labelledby="workspace-panel-heading">
-    <div class="card-body p-3 p-lg-4">
-      <div class="row g-4">
-        <div class="col-lg-7 workspace-meta">
-          <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap mb-3">
-            <div>
-              <div class="d-flex align-items-center gap-2 flex-wrap mb-2">
-                <h3 class="tf-name mb-0" id="workspace-panel-heading">${TF_LABEL[tf]} signal</h3>
-                <span class="badge ${badgeCls(cls)}">${esc(sigLabel(r.signal))}</span>
-                ${r.quality ? `<span class="badge ${qHi ? "text-bg-primary" : "text-bg-secondary"}">quality ${esc(r.quality)}</span>` : ""}
-                ${entry.status === "error" ? `<span class="badge text-bg-danger">STALE</span>` : ""}
-              </div>
-              <div class="workspace-signal ${textCls}">${esc(r.action || sigLabel(r.signal))}</div>
-            </div>
-            <button type="button" class="btn btn-sm btn-outline-primary" data-open-detail="${tf}">
-              Full analysis <i class="bi bi-arrow-up-right ms-1"></i>
-            </button>
-          </div>
-          ${scoreBar("score", pa ? pa.composite_score : r.score)}
-          <div class="small text-secondary mt-2">${esc(meta)}</div>
-          ${facts}
-          <div class="workspace-reasons mt-3 pt-3 border-top">${listBlock(r) || "<div class=\"small text-secondary\">No supporting reasons recorded on this scan.</div>"}</div>
-          <div class="small text-secondary mt-3">${entry.scanned_at ? "scanned " + fmtAge(entry.scanned_at) : ""} · closes in <span class="num" data-close="${entry.next_close_epoch || ""}" data-interval="${TF_SECONDS[tf]}">--:--</span></div>
-        </div>
-        <div class="col-lg-5">
-          <div class="small text-uppercase text-secondary fw-bold mb-2">Trade plan</div>
-          ${setup}
-        </div>
-      </div>
-    </div>
-  </article>`;
+  f("live").removeClass("d-none");
+  f("empty").addClass("d-none");
+  $card.removeClass("sig-buy sig-sell sig-neutral").addClass(dirClass(r.signal));
+
+  f("icon").attr("class", "fa-solid " + (SIG_ICON[r.signal] || "fa-arrows-left-right"));
+  f("signal").text(sigWord(r.signal));
+  const highGrade = r.quality === "A+" || r.quality === "A";
+  f("grade").toggleClass("d-none", !r.quality).toggleClass("grade-high", !!highGrade)
+    .text(r.quality ? "grade " + r.quality : "");
+  f("action").text(entry.status === "error"
+    ? "Last good reading. The newest scan failed."
+    : actionTail(r.action));
+
+  const score = r.score == null ? 0 : r.score;
+  f("score").text(signed(r.score, 1))
+    .removeClass("up down flat").addClass(toneClass(r.signal));
+  f("score-fill").attr("class", score >= 0 ? "pos" : "neg")
+    .css("width", Math.min(50, Math.abs(score) / 2) + "%");
+  f("confidence").text(r.confidence == null ? "—" : Math.round(r.confidence) + "%");
+  f("conf-fill").css("width", Math.max(0, Math.min(100, r.confidence || 0)) + "%");
+
+  const chip = (icon, text, cls) =>
+    `<span class="chip ${cls || ""}"><i class="fa-solid ${icon}" aria-hidden="true"></i>${esc(text)}</span>`;
+  f("chips").html(
+    chip("fa-compass", r.market_regime || "regime unknown") +
+    chip("fa-wave-square", (r.volatility_regime || "unknown") + " volatility") +
+    chip(r.mtf_agreement ? "fa-layer-group" : "fa-shuffle",
+      r.mtf_agreement ? "timeframes agree" : "timeframes mixed",
+      r.mtf_agreement ? "chip-up" : "") +
+    (r.exhaustion_count ? chip("fa-battery-quarter", `${r.exhaustion_count} exhaustion signs`, "chip-warn") : ""));
+
+  f("plan").html(planHTML(r.trade_setup));
+  f("flags").html(flagsHTML(r, 2));
+  updateIndChart(tf);
 }
 
-function renderCards() {
-  if (!snapshot) return;
-  if (!TF_LABEL[selectedTf]) selectedTf = "5min";
-  const selector = TF_ORDER.map(tf => {
-    const entry = snapshot.timeframes[tf] || {};
-    const r = entry.report;
-    const cls = r ? sigClass(r.signal) : "neutral";
-    const arrow = r ? (ARROW[r.signal] || "→") : "·";
-    const score = r?.score != null ? signed(r.score, 0) : "—";
-    const signal = r ? sigLabel(r.signal) : entry.status === "error" ? "UNAVAILABLE" : "WARMING";
-    return `<button type="button" class="tf-select" data-select-tf="${tf}" aria-pressed="${tf === selectedTf}">
-      <span class="d-flex align-items-center justify-content-between gap-2">
-        <span class="tf-name">${TF_LABEL[tf]}</span>
-        <span class="${cls === "buy" ? "text-success" : cls === "sell" ? "text-danger" : "text-secondary"} fw-bold">${arrow}</span>
-      </span>
-      <span class="small ${cls === "buy" ? "text-success" : cls === "sell" ? "text-danger" : "text-secondary"}">${esc(signal)}</span>
-      <span class="small num float-end">${esc(score)}</span>
-    </button>`;
-  }).join("");
-  $("tf-grid").innerHTML = `<div class="tf-selector">${selector}</div>${workspacePanel(selectedTf)}`;
-  tick();
-}
-
-/* ── timeframe detail dialog ──────────────────────────────────── */
-const tile = (k, v, cls = "") =>
-  `<div class="col"><div class="card d-stat bg-body-tertiary h-100"><div class="card-body p-2">
-    <span class="k">${esc(k)}</span>
-    <span class="v ${cls}">${v}</span>
-  </div></div></div>`;
+/* ── full analysis dialog ─────────────────────────────────────── */
+const tile = (k, v, cls) =>
+  `<div class="d-tile"><span class="k">${esc(k)}</span><span class="v ${cls || ""}">${v}</span></div>`;
 
 const SEC_ICON = {
-  "At a glance": "bi-speedometer2",
-  "Trade setup": "bi-bullseye",
-  "Why this signal": "bi-lightbulb",
-  "Multi-timeframe confirmation": "bi-layers",
-  "News context": "bi-newspaper",
-  "AI panel (advisory)": "bi-robot",
-  "Scan detail": "bi-clock-history",
-  "Score": "bi-graph-up",
-  "From the source": "bi-quote",
-  "AI gold-impact summary": "bi-stars",
-  "Timing": "bi-alarm",
-  "Numbers": "bi-calculator"
+  "At a glance": "fa-gauge-high",
+  "Trade plan": "fa-bullseye",
+  "Why this signal": "fa-lightbulb",
+  "Agreement across timeframes": "fa-layer-group",
+  "News context": "fa-newspaper",
+  "AI estimate": "fa-robot",
+  "AI panel": "fa-robot",
+  "Scan detail": "fa-clock-rotate-left",
+  "Score": "fa-chart-simple",
+  "From the source": "fa-quote-left",
+  "AI gold-impact summary": "fa-wand-magic-sparkles",
+  "Timing": "fa-stopwatch",
+  "Numbers": "fa-calculator"
 };
-const sec = (title, html) => {
+
+function sec(title, html) {
   if (!html) return "";
-  const icon = SEC_ICON[title];
-  return `<section class="mb-4"><h6 class="text-uppercase text-secondary small fw-bold mb-2 d-flex align-items-center gap-2">${icon ? `<i class="bi ${icon} text-primary"></i>` : ""}<span>${esc(title)}</span><span class="flex-fill border-bottom"></span></h6>${html}</section>`;
-};
+  const icon = SEC_ICON[title] || "fa-circle-dot";
+  return `<section class="d-sec"><h6><i class="fa-solid ${icon}" aria-hidden="true"></i>
+    <span>${esc(title)}</span><span class="d-rule"></span></h6>${html}</section>`;
+}
 
 function indTable(src) {
   const rows = IND_ORDER.map(name => {
-    const i = src?.[name];
+    const i = src && src[name];
     const k = `<td class="ind-k">${IND_SHORT[name]}</td>`;
-    if (!i) return `<tr>${k}<td class="text-secondary">— absent</td>
-      <td class="num text-end">—</td><td class="num text-end">—</td><td class="num text-end">—</td>
-      <td class="text-secondary small">no signal this scan</td></tr>`;
+    if (!i) {
+      return `<tr>${k}<td class="flat">no reading</td><td class="num text-end">—</td>
+        <td class="num text-end">—</td><td class="num text-end">—</td>
+        <td class="flat">this indicator had nothing to say on this scan</td></tr>`;
+    }
     const w = i.weight == null ? null : +i.weight;
     return `<tr>${k}
-      <td class="fw-bold ${sigClass(i.signal) === "buy" ? "text-success" : sigClass(i.signal) === "sell" ? "text-danger" : "text-secondary"}">${esc(sigLabel(i.signal))}</td>
+      <td class="fw-semibold ${toneClass(i.signal)}">${esc(sigWord(i.signal))}</td>
       <td class="num text-end">${i.value != null ? (+i.value).toFixed(2) : "—"}</td>
       <td class="num text-end">${i.confidence != null ? Math.round(i.confidence) : "—"}</td>
       <td class="num text-end">${w != null ? w.toFixed(1) : "—"}${w != null
         ? `<i class="wbar"><i style="width:${Math.min(100, w / 2 * 100)}%"></i></i>` : ""}</td>
-      <td class="text-secondary small">${esc(i.description || "")}</td></tr>`;
+      <td class="flat">${esc(i.description || "")}</td></tr>`;
   }).join("");
-  return `<div class="detail-table"><table class="table table-sm d-table"><thead><tr>
-    <th>Indicator</th><th>Signal</th><th class="text-end">Value</th><th class="text-end">Conf</th>
+  return `<div class="detail-scroll"><table class="table table-sm d-table"><thead><tr>
+    <th>Indicator</th><th>Vote</th><th class="text-end">Value</th><th class="text-end">Conf</th>
     <th class="text-end">Weight</th><th>Reading</th></tr></thead><tbody>${rows}</tbody></table></div>`;
 }
 
@@ -350,165 +715,160 @@ function ladder(levels, price) {
   if (price != null) rows.push({ here: true, v: +price });
   rows.sort((a, b) => b.v - a.v);
   const body = rows.map(row => {
-    if (row.here) return `<tr class="table-primary fw-bold"><td><i class="bi bi-geo-alt-fill me-1"></i>current price</td>
-      <td class="num text-end">${fmt$(row.v)}</td><td class="num text-end">—</td><td class="small text-secondary">spot</td></tr>`;
+    if (row.here) {
+      return `<tr class="fw-semibold"><td><i class="fa-solid fa-location-dot me-1" aria-hidden="true"></i>price now</td>
+        <td class="num text-end">${fmt$(row.v)}</td><td class="num text-end">—</td><td class="flat">spot</td></tr>`;
+    }
+    // No red/green here: a level is not a direction, and spending the
+    // signal colours on it would make them mean two different things.
     const d = price != null ? row.v - price : null;
-    const cls = d == null ? "" : d > 0 ? "text-danger" : "text-success";
-    const icon = d == null ? "" : d > 0 ? "bi-arrow-up-short" : "bi-arrow-down-short";
     return `<tr>
-      <td class="text-secondary">${esc(row.label)}</td>
-      <td class="num text-end ${cls}">${fmt$(row.v)}</td>
-      <td class="num text-end ${cls}">${d == null ? "" : signed(d) + (atr ? ` · ${signed(d / atr, 2)} ATR` : "")}</td>
-      <td class="small ${cls}">${d == null ? "" : `<i class="bi ${icon}"></i>${d > 0 ? "resistance" : "support"}`}</td></tr>`;
+      <td class="flat">${esc(row.label)}</td>
+      <td class="num text-end">${fmt$(row.v)}</td>
+      <td class="num text-end flat">${d == null ? "" : signed(d) + (atr ? ` (${signed(d / atr, 2)} ATR)` : "")}</td>
+      <td class="flat">${d == null ? "" : (d > 0 ? "above price" : "below price")}</td></tr>`;
   }).join("");
-  return `<div class="detail-table"><table class="table table-sm ladder"><thead><tr><th>Level</th><th class="text-end">Price</th>
-    <th class="text-end">vs. spot</th><th>Role</th></tr></thead><tbody>${body}</tbody></table></div>`;
+  return `<div class="detail-scroll"><table class="table table-sm d-table"><thead><tr>
+    <th>Level</th><th class="text-end">Price</th><th class="text-end">Distance</th><th>Side</th>
+    </tr></thead><tbody>${body}</tbody></table></div>`;
 }
 
 function analysisBlock(a, price) {
   if (!a) return "";
-  const pats = a.pattern_signals?.length
-    ? `<div class="d-flex flex-wrap gap-1 mb-2">${a.pattern_signals.map(p =>
-        `<span class="badge text-bg-primary bg-opacity-10">${esc(p)}</span>`).join("")}</div>` : "";
+  const pats = a.pattern_signals && a.pattern_signals.length
+    ? `<div class="tf-chips mt-2">${a.pattern_signals.map(p => `<span class="chip">${esc(p)}</span>`).join("")}</div>`
+    : "";
   const atr = a.atr_context
-    ? `<div class="small text-secondary mb-2">${esc(a.atr_context.description ||
+    ? `<div class="flat small mt-2">${esc(a.atr_context.description ||
         "ATR " + (+a.atr_context.value).toFixed(2))}</div>` : "";
   const lv = ladder(a.key_levels, price);
   return indTable(a.indicators) + atr + pats +
-    (lv ? `<div class="small text-secondary fw-semibold mt-2 mb-1">Key levels</div>${lv}` : "");
+    (lv ? `<h6 class="tf-sub mt-3">Levels around the price</h6>${lv}` : "");
 }
 
-function listBlock(r) {
-  const group = (title, arr, cls, icon) => arr?.length
-    ? `<div class="small text-secondary fw-semibold mt-2 mb-1">${title} (${arr.length})</div>
-       <div class="small">${arr.map(t => `<div class="${cls}"><i class="bi ${icon} me-1"></i>${esc(t)}</div>`).join("")}</div>` : "";
-  // Violent-move watch: display-only advisory line, stamped post-hoc by
-  // the publisher. Empty unless the feature is enabled.
-  const watch = r.watch_line
-    ? `<div class="small text-warning fw-semibold mt-2">${esc(r.watch_line)}</div>`
+function reasonsBlock(r) {
+  const group = (title, arr, cls, icon) => arr && arr.length
+    ? `<div class="reason-group">${title} (${arr.length})</div><div class="reasons">${arr.map(t =>
+        `<div class="${cls}"><i class="fa-solid ${icon}" aria-hidden="true"></i>${esc(t)}</div>`).join("")}</div>`
     : "";
+  const watch = r.watch_line
+    ? `<div class="reasons"><div class="flag-watch">
+       <i class="fa-solid fa-bolt" aria-hidden="true"></i>${esc(r.watch_line)}</div></div>` : "";
   return watch
-       + group("Warnings", r.warnings, "text-warning", "bi-exclamation-triangle-fill")
-       + group("Bullish", r.bullish_reasons, "text-success", "bi-arrow-up-circle-fill")
-       + group("Bearish", r.bearish_reasons, "text-danger", "bi-arrow-down-circle-fill");
+    + group("Warnings", r.warnings, "flag-warn", "fa-triangle-exclamation")
+    + group("Bullish", r.bullish_reasons, "up", "fa-caret-up")
+    + group("Bearish", r.bearish_reasons, "down", "fa-caret-down");
 }
 
 function detailHTML(tf) {
-  const entry = snapshot?.timeframes?.[tf] || {};
+  const entry = (snapshot && snapshot.timeframes[tf]) || {};
   const r = entry.report;
-  if (!r) return `<div class="text-center text-secondary py-4">${entry.status === "error"
-    ? `Scan error — ${esc(entry.error || "unknown")}`
-    : "Warming up — no completed scan for this timeframe yet."}</div>`;
+  if (!r) {
+    return `<div class="tf-empty">${entry.status === "error"
+      ? "Scan unavailable. The page keeps the last good reading until a scan succeeds."
+      : "Warming up. No completed scan for this timeframe yet."}</div>`;
+  }
 
   const pa = r.primary_analysis;
   const price = r.current_price;
-  const cls = sigClass(r.signal);
-  const textCls = cls === "buy" ? "text-success" : cls === "sell" ? "text-danger" : "text-secondary";
-  const borderCls = cls === "buy" ? "border-start border-success border-4"
-                  : cls === "sell" ? "border-start border-danger border-4"
-                  : "border-start border-secondary border-4";
-
-  let out = `<div class="card ${borderCls} mb-3"><div class="card-body">
-    <div class="fw-bold fs-5 ${textCls}">${esc(r.action || sigLabel(r.signal))}</div>
-    ${r.news_description || r.event_description
-      ? `<div class="small text-secondary">${esc([r.event_description, r.news_description].filter(Boolean).join(" · "))}</div>`
-      : ""}
-  </div></div>`;
-
+  const cls = toneClass(r.signal);
   const ns = r.news_sentiment;
-  out += sec("At a glance", `<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-2">
-    ${tile("Signal", esc(sigLabel(r.signal)), textCls)}
-    ${tile("Score", signed(r.score, 1), textCls)}
+
+  let out = `<div class="plan ${dirClass(r.signal)} mb-4">
+    <div class="plan-head"><i class="fa-solid ${SIG_ICON[r.signal] || "fa-arrows-left-right"}" aria-hidden="true"></i>
+      ${esc(sigWord(r.signal))}</div>
+    <div class="flat">${esc(actionTail(r.action))}</div>
+    ${r.news_description || r.event_description
+      ? `<div class="plan-trail">${esc([r.event_description, r.news_description].filter(Boolean).join(" — "))}</div>`
+      : ""}
+  </div>`;
+
+  out += sec("At a glance", `<div class="d-tiles">
+    ${tile("Signal", esc(sigWord(r.signal)), cls)}
+    ${tile("Score", signed(r.score, 1), cls)}
     ${tile("Confidence", r.confidence != null ? Math.round(r.confidence) + "%" : "—")}
-    ${tile("Quality", esc(r.quality || "—"))}
+    ${tile("Grade", esc(r.quality || "—"))}
     ${tile("Regime", esc(r.market_regime || "—"))}
     ${tile("Volatility", esc(r.volatility_regime || "—"))}
-    ${tile("Event risk", esc((r.event_risk || "—").toUpperCase()),
-        r.event_risk === "clear" ? "text-success" : r.event_risk ? "text-warning" : "")}
-    ${tile("News sentiment", ns != null ? signed(ns, 2) : "—",
-        ns > 0.05 ? "text-success" : ns < -0.05 ? "text-danger" : "")}
-    ${tile("MTF", r.mtf_agreement ? "aligned" : "mixed", r.mtf_agreement ? "text-success" : "")}
-    ${tile("Primary score", signed(r.primary_score, 1), sigClass(r.primary_signal) === "buy" ? "text-success" : sigClass(r.primary_signal) === "sell" ? "text-danger" : "")}
-    ${tile("Exhaustion", esc(r.exhaustion_count ?? "—"), r.exhaustion_count ? "text-warning" : "")}
+    ${tile("Event risk", esc(r.event_risk || "—"), r.event_risk === "clear" ? "up" : r.event_risk ? "text-warning" : "")}
+    ${tile("News tone", ns != null ? signed(ns, 2) : "—", ns > 0.05 ? "up" : ns < -0.05 ? "down" : "")}
+    ${tile("Timeframes", r.mtf_agreement ? "agree" : "mixed", r.mtf_agreement ? "up" : "")}
+    ${tile("This timeframe alone", signed(r.primary_score, 1), toneClass(r.primary_signal))}
+    ${tile("Exhaustion signs", esc(r.exhaustion_count == null ? "—" : r.exhaustion_count), r.exhaustion_count ? "text-warning" : "")}
   </div>`);
 
-  out += sec("Trade setup", r.trade_setup
-    ? setupCard(r.trade_setup)
-    : `<div class="text-secondary small">No setup published for this timeframe — the engine only emits entry/stop/target once a signal clears its quality gate.</div>`);
-
-  out += sec("Why this signal", listBlock(r) || `<div class="text-secondary small">No reasons recorded on this scan.</div>`);
-
-  out += sec(`${TF_LABEL[tf]} indicators (primary)`,
+  out += sec("Trade plan", planHTML(r.trade_setup));
+  out += sec("Why this signal", reasonsBlock(r) || `<div class="flat">Nothing was recorded on this scan.</div>`);
+  out += sec(`${TF_LABEL[tf]} indicators`,
     analysisBlock(pa, price) || indTable(r.indicators) +
-      (r.key_levels ? `<div class="small text-secondary fw-semibold mt-2 mb-1">Key levels</div>${ladder(r.key_levels, price)}` : ""));
+      (r.key_levels ? `<h6 class="tf-sub mt-3">Levels around the price</h6>${ladder(r.key_levels, price)}` : ""));
 
   const mtf = Object.entries(r.mtf_signals || {});
   if (mtf.length) {
-    const chips = mtf.map(([k, sig]) => {
-      const s = r.mtf_scores?.[k];
-      const sc = sigClass(sig);
-      return `<span class="badge ${badgeCls(sc)}">${esc(TF_LABEL[k] || k)}
-        <span class="${sc === "buy" ? "text-success" : sc === "sell" ? "text-danger" : "text-secondary"}">${esc(sigLabel(sig))}</span>
+    const chips = mtf.map(pair => {
+      const s = r.mtf_scores && r.mtf_scores[pair[0]];
+      return `<span class="chip ${sigClass(pair[1]) === "buy" ? "chip-up" : sigClass(pair[1]) === "sell" ? "chip-down" : ""}">
+        ${esc(TF_LABEL[pair[0]] || pair[0])} ${esc(sigWord(pair[1]))}
         <span class="num">${s != null ? signed(s, 1) : ""}</span></span>`;
     }).join("");
     const confs = (r.confirmation_analyses || []).filter(Boolean).map(a => {
       const lbl = TF_LABEL[a.timeframe] || a.timeframe;
-      const sc = sigClass(a.composite_signal);
       return `<details data-dkey="conf-${esc(a.timeframe)}">
         <summary><strong>${esc(lbl)}</strong>
-          <span class="${sc === "buy" ? "text-success" : sc === "sell" ? "text-danger" : "text-secondary"} fw-bold">${esc(sigLabel(a.composite_signal))}</span>
-          <span class="text-secondary small">${signed(a.composite_score, 1)} · conf ${a.confidence != null ? Math.round(a.confidence) : "—"} · ${esc(a.market_regime || "")}</span></summary>
-        ${analysisBlock(a, price)}</details>`;
+          <span class="${toneClass(a.composite_signal)}">${esc(sigWord(a.composite_signal))}</span>
+          <span class="flat num">${signed(a.composite_score, 1)}</span>
+          <span class="flat">confidence ${a.confidence != null ? Math.round(a.confidence) : "—"}, ${esc(a.market_regime || "")}</span>
+        </summary>${analysisBlock(a, price)}</details>`;
     }).join("");
-    out += sec("Multi-timeframe confirmation",
-      `<div class="d-flex flex-wrap gap-2 align-items-center mb-2">${chips}
-        <span class="fw-bold ${r.mtf_agreement ? "text-success" : "text-secondary"}">${r.mtf_agreement ? "✓ aligned" : "✗ mixed"}</span></div>${confs}`);
+    out += sec("Agreement across timeframes",
+      `<div class="tf-chips">${chips}
+        <span class="chip ${r.mtf_agreement ? "chip-up" : ""}">
+          <i class="fa-solid ${r.mtf_agreement ? "fa-check" : "fa-xmark"}" aria-hidden="true"></i>
+          ${r.mtf_agreement ? "enough agreement" : "not enough agreement"}</span></div>${confs}`);
   }
 
   if (r.news_summary || r.news_description) {
-    out += sec("News context", `<div class="text-secondary small">
+    out += sec("News context", `<div class="flat">
       ${r.news_description ? `<strong>${esc(r.news_description)}</strong>${ns != null ? ` (${signed(ns, 2)})` : ""}<br>` : ""}
       ${esc(r.news_summary || "")}</div>`);
   }
 
   if (r.panel_verdict && r.panel_verdict_source === "mean") {
-    // v2 panel: a probability anchored to the setup class's base rate,
-    // one reason each way per persona. Advisory only; no verdict colour.
+    // v2 panel: a probability anchored to the base rate of this kind of
+    // setup. Advisory only — no gate reads it, so it gets no verdict colour.
     const base = (r.panel_context && r.panel_context.base_rate) || {};
-    const usual = base.win_rate != null ? ` (usual for this kind of setup: ${Math.round(base.win_rate)}%)` : "";
+    const usual = base.win_rate != null
+      ? ` Setups like this one have paid off about ${Math.round(base.win_rate)}% of the time.` : "";
     const takes = (r.panel_takes || []).map(t =>
       `<tr><td class="ind-k">${esc(t.persona)}</td>
         <td class="num text-end">${t.p_win != null ? Math.round(t.p_win) + "%" : "—"}</td>
-        <td class="small text-secondary">${esc(t.reason_for || "")}</td>
-        <td class="small text-secondary">${esc(t.reason_against || "")}</td></tr>`).join("");
-    out += sec("AI estimate (advisory, still being tested)", `<div class="text-secondary small mb-2">
-      About a <strong>${Math.round(r.panel_probability || 0)}%</strong> chance this trade pays off${esc(usual)}.<br>
+        <td class="flat">${esc(t.reason_for || "")}</td>
+        <td class="flat">${esc(t.reason_against || "")}</td></tr>`).join("");
+    out += sec("AI estimate", `<div class="flat mb-2">
+      About a <strong>${Math.round(r.panel_probability || 0)}%</strong> chance this trade pays off.${esc(usual)}
+      It is advisory and still being tested — nothing in the signal reads it.<br>
       ${esc(r.panel_rationale || "")}</div>
-      ${takes ? `<div class="detail-table"><table class="table table-sm d-table">
-        <thead><tr><th></th><th class="text-end">chance</th><th>for</th><th>against</th></tr></thead>
+      ${takes ? `<div class="detail-scroll"><table class="table table-sm d-table">
+        <thead><tr><th>Persona</th><th class="text-end">Chance</th><th>For</th><th>Against</th></tr></thead>
         <tbody>${takes}</tbody></table></div>` : ""}`);
   } else if (r.panel_verdict) {
-    const vcls = r.panel_verdict === "AGREE" ? "text-success"
-      : r.panel_verdict === "OPPOSE" ? "text-danger" : "text-secondary";
     const takes = (r.panel_takes || []).map(t =>
-      `<tr><td class="ind-k">${esc(t.persona)}</td>
-        <td>${esc(t.stance)}</td>
+      `<tr><td class="ind-k">${esc(t.persona)}</td><td>${esc(t.stance)}</td>
         <td class="num text-end">${t.confidence != null ? Math.round(t.confidence) : "—"}</td>
-        <td class="small text-secondary">${esc(t.note || "")}</td></tr>`).join("");
-    out += sec("AI panel (advisory)", `<div class="text-secondary small mb-2">
-      <strong class="${vcls}">${esc(r.panel_verdict)}</strong> ·
-      conf ${Math.round(r.panel_confidence || 0)}%<br>
+        <td class="flat">${esc(t.note || "")}</td></tr>`).join("");
+    out += sec("AI panel", `<div class="flat mb-2">
+      <strong>${esc(r.panel_verdict)}</strong>, confidence ${Math.round(r.panel_confidence || 0)}%<br>
       ${esc(r.panel_rationale || "")}</div>
-      ${takes ? `<div class="detail-table"><table class="table table-sm d-table"><tbody>${takes}</tbody></table></div>` : ""}`);
+      ${takes ? `<div class="detail-scroll"><table class="table table-sm d-table"><tbody>${takes}</tbody></table></div>` : ""}`);
   }
 
-  out += sec("Scan detail", `<div class="detail-table"><table class="table table-sm d-table"><tbody>
-    <tr><td class="ind-k">Instrument</td><td colspan="5">${esc(r.display_name || r.symbol || "—")}</td></tr>
-    <tr><td class="ind-k">Candle</td><td colspan="5" class="num">${esc(r.timestamp || "—")}</td></tr>
-    <tr><td class="ind-k">Scanned</td><td colspan="5">${esc(entry.scanned_at || "—")}
+  out += sec("Scan detail", `<div class="detail-scroll"><table class="table table-sm d-table"><tbody>
+    <tr><td class="ind-k">Instrument</td><td>${esc(r.display_name || r.symbol || "—")}</td></tr>
+    <tr><td class="ind-k">Candle</td><td class="num">${esc(r.timestamp || "—")}</td></tr>
+    <tr><td class="ind-k">Scanned</td><td>${esc(entry.scanned_at || "—")}
       (${fmtAge(entry.scanned_at)}${entry.scan_seconds ? `, took ${entry.scan_seconds}s` : ""})</td></tr>
-    <tr><td class="ind-k">Status</td><td colspan="5">${esc(entry.status || "—")}${entry.error
-      ? ` — <span class="text-danger">${esc(entry.error)}</span>
+    <tr><td class="ind-k">Status</td><td>${esc(entry.status || "—")}${entry.error
+      ? ` — <span class="down">${esc(entry.error)}</span>
           ${entry.error_at ? `(${fmtAge(entry.error_at)})` : ""}` : ""}</td></tr>
    </tbody></table></div>`);
   return out;
@@ -516,194 +876,169 @@ function detailHTML(tf) {
 
 function renderDetail() {
   if (!detailTf || !tfModalOpen) return;
-  const entry = snapshot?.timeframes?.[detailTf] || {};
+  const entry = (snapshot && snapshot.timeframes[detailTf]) || {};
   const r = entry.report;
-  const openKeys = new Set([...document.querySelectorAll("#detail-body details[open][data-dkey]")]
-    .map(d => d.dataset.dkey));
-  const scroll = $("detail-body").scrollTop;
+  const openKeys = $("#detail-body details[open][data-dkey]").map((i, el) => el.dataset.dkey).get();
+  const scroll = $("#detail-body").scrollTop();
 
-  $("detail-title").textContent = TF_LABEL[detailTf] || detailTf;
-  $("detail-price").textContent = r?.current_price ? fmt$(r.current_price) : "—";
-  $("detail-sub").innerHTML = `${snapshot?.symbol ? esc(snapshot.symbol) + " · " : ""}closes in
-    <span class="num" data-close="${entry.next_close_epoch || ""}" data-interval="${TF_SECONDS[detailTf]}">--:--</span>`;
-  $("detail-body").innerHTML = detailHTML(detailTf);
+  $("#detail-title").text(`${TF_LABEL[detailTf]} — ${TF_LONG[detailTf]} candles`);
+  $("#detail-price").text(r && r.current_price ? fmt$(r.current_price) : "—");
+  $("#detail-sub").html(`${snapshot && snapshot.symbol ? esc(snapshot.symbol) + ", " : ""}next close in
+    <span class="num" data-close="${entry.next_close_epoch || ""}" data-interval="${TF_SECONDS[detailTf]}">--:--</span>`);
+  $("#detail-body").html(detailHTML(detailTf));
 
-  document.querySelectorAll("#detail-body details[data-dkey]").forEach(d => {
-    if (openKeys.has(d.dataset.dkey)) d.open = true;
+  $("#detail-body details[data-dkey]").each((i, el) => {
+    if (openKeys.indexOf(el.dataset.dkey) !== -1) el.open = true;
   });
-  $("detail-body").scrollTop = scroll;
+  $("#detail-body").scrollTop(scroll);
   tick();
 }
 
 function openDetail(tf) {
   if (!TF_LABEL[tf]) return;
   detailTf = tf;
+  // Fill it before the fade finishes; shown.bs.modal renders again.
+  tfModalOpen = true;
   tfModal.show();
   renderDetail();
-  $("detail-body").scrollTop = 0;
-  $("detail-close").focus();
+  $("#detail-body").scrollTop(0);
+  $("#detail-close").trigger("focus");
 }
 
-$("detail-close")?.addEventListener("click", () => tfModal.hide());
-
 /* ── calendar ─────────────────────────────────────────────────── */
+const evKey = e => `${e.time}|${e.currency}|${e.event}`;
+const findHeadline = id => ((news && news.headlines) || []).find(h => h.id === id);
+const findEvent = key => ((news && news.events) || []).find(e => evKey(e) === key);
+
 function renderCalendar() {
-  const body = $("cal-body");
   if (!news) return;
   const zone = Intl.DateTimeFormat().resolvedOptions().timeZone || "local time";
-  $("calendar-note").textContent = `times local (${zone}) · USD events${news.generated_at ? " · updated " + fmtAge(news.generated_at) : ""}`;
-  const hiOnly = $("hi-only").checked;
-  let events = (news.events || []);
-  if (hiOnly) events = events.filter(e => e.impact === "high");
+  $("#calendar-note").text(`your time (${zone})` +
+    (news.generated_at ? `, updated ${fmtAge(news.generated_at)}` : ""));
+
+  let events = news.events || [];
+  if ($("#hi-only").prop("checked")) events = events.filter(e => e.impact === "high");
   if (!events.length) {
-    body.innerHTML = `<tr><td colspan="7" class="text-secondary text-center py-3">${
-      news.calendar_available ? "No matching events this week." : "Calendar unavailable — source could not be reached."}</td></tr>`;
+    $("#cal-body").html(`<tr><td colspan="7" class="empty">${news.calendar_available
+      ? "Nothing matches this filter." : "The calendar source could not be reached."}</td></tr>`);
     return;
   }
+
   const now = nowServer();
-  let nextUpMarked = false, lastDay = "", rows = "";
+  let nextMarked = false, lastDay = "", rows = "";
   for (const e of events) {
     const t = Date.parse(e.time) / 1000;
     const d = new Date(t * 1000);
-    const day = d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
+    const day = d.toLocaleDateString(undefined, { weekday: "long", month: "short", day: "numeric" });
     if (day !== lastDay) {
-      rows += `<tr class="table-group-divider"><td colspan="7" class="text-primary small fw-bold text-uppercase">${esc(day)}</td></tr>`;
+      rows += `<tr class="cal-day"><td colspan="7">${esc(day)}</td></tr>`;
       lastDay = day;
     }
     const past = t < now;
-    const nextUp = !past && !nextUpMarked && (nextUpMarked = true);
+    const next = !past && !nextMarked && (nextMarked = true);
     const time = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+    const impact = e.impact === "medium" ? "Med" : e.impact.charAt(0).toUpperCase() + e.impact.slice(1);
     const surp = e.surprise
-      ? `<span class="${e.surprise === "positive" ? "text-success" : e.surprise === "negative" ? "text-danger" : "text-secondary"}" title="actual ${e.surprise === "positive" ? "above" : e.surprise === "negative" ? "below" : "matches"} forecast (numeric only — not gold direction)">${e.surprise === "positive" ? "▲" : e.surprise === "negative" ? "▼" : "="}</span>` : "";
-    rows += `<tr class="${past ? "text-secondary" : ""}${nextUp ? " cal-next-up" : ""}">
+      ? `<i class="fa-solid ${e.surprise === "positive" ? "fa-caret-up up" : e.surprise === "negative" ? "fa-caret-down down" : "fa-minus flat"}"
+           title="The number came in ${e.surprise === "positive" ? "above" : e.surprise === "negative" ? "below" : "in line with"} forecast. That is the number, not gold's direction."></i>`
+      : "";
+    rows += `<tr class="${past ? "cal-past" : ""}${next ? " cal-next" : ""}">
       <td class="num text-nowrap">${esc(time)}</td>
-      <td class="text-secondary">${esc(e.currency)}</td>
-      <td><span class="badge ${e.impact === "high" ? "text-bg-danger" : e.impact === "medium" ? "text-bg-warning" : "text-bg-secondary"}">${e.impact === "medium" ? "Med" : e.impact.charAt(0).toUpperCase() + e.impact.slice(1)}</span></td>
+      <td class="flat">${esc(e.currency)}</td>
+      <td><span class="impact impact-${esc(e.impact)}">${esc(impact)}</span></td>
       <td><button type="button" class="cal-event" data-ev-key="${esc(evKey(e))}" aria-haspopup="dialog">${esc(e.event)}</button></td>
-      <td class="num text-end">${esc(e.forecast ?? "—")}</td>
-      <td class="num text-end">${esc(e.previous ?? "—")}</td>
-      <td class="num text-end">${esc(e.actual ?? "—")} ${surp}</td></tr>`;
+      <td class="num text-end">${esc(e.forecast == null ? "—" : e.forecast)}</td>
+      <td class="num text-end">${esc(e.previous == null ? "—" : e.previous)}</td>
+      <td class="num text-end">${esc(e.actual == null ? "—" : e.actual)} ${surp}</td></tr>`;
   }
-  body.innerHTML = rows;
+  $("#cal-body").html(rows);
 }
 
 /* ── newswire ─────────────────────────────────────────────────── */
-function renderWireTotal() {
-  const box = $("wire-total");
-  const scored = (news?.headlines || []).filter(h => typeof h.score === "number");
-  if (!scored.length) { box.classList.add("d-none"); return; }
-  box.classList.remove("d-none");
-
-  const sum = scored.reduce((a, h) => a + h.score, 0);
-  const mean = sum / scored.length;
-  const up = scored.filter(h => h.score > 0.05).length;
-  const dn = scored.filter(h => h.score < -0.05).length;
-  const cls = mean > 0.05 ? "text-success" : mean < -0.05 ? "text-danger" : "text-secondary";
-  const dir = mean > 0.05 ? "BULLISH" : mean < -0.05 ? "BEARISH" : "NEUTRAL";
-  const wrapCls = mean > 0.05 ? "bg-success-subtle border-success-subtle"
-                : mean < -0.05 ? "bg-danger-subtle border-danger-subtle"
-                : "bg-body-tertiary";
-
-  box.className = `card mb-3 ${wrapCls}`;
-  box.innerHTML = `<div class="card-body p-2">
-    <div class="d-flex align-items-baseline gap-2 flex-wrap">
-      <span class="small text-secondary text-uppercase fw-bold">Total news score</span>
-      <span class="display-6 fw-bold ${cls}">${signed(mean, 2)}</span>
-      <span class="fw-bold ${cls}">${dir}</span>
-      <span class="ms-auto text-end small text-secondary">${scored.length} headlines · sum ${signed(sum, 1)}<br>
-        ${up} bullish · ${dn} bearish</span>
-    </div>
-  </div>`;
-  box.title = `Mean sentiment of all ${scored.length} scored headlines (−1…+1). Sum ${signed(sum, 1)}. Only headlines from the last 4 hours that lean one way are published (neutral ones are removed before scoring).`;
-}
-
 function renderWire() {
   if (!news) return;
   const items = (news.headlines || []).slice(0, 40);
-  $("wire-note").textContent = news.generated_at ? `updated ${fmtAge(news.generated_at)}` : "";
-  renderWireTotal();
+  $("#wire-note").text(news.generated_at ? `updated ${fmtAge(news.generated_at)}` : "");
+  updateToneChart();
+
   if (!items.length) {
-    $("wire").innerHTML = `<div class="text-secondary small py-2">No gold or dollar headlines in the last 4 hours.</div>`;
+    $("#wire").html(`<div class="flat small py-2">No gold or dollar headlines in the last four hours.</div>`);
     return;
   }
   const item = h => {
     const s = h.score;
     const cls = s == null || Math.abs(s) < 0.05 ? "zero" : s > 0 ? "pos" : "neg";
-    const scoreCls = cls === "pos" ? "bg-success-subtle text-success"
-                   : cls === "neg" ? "bg-danger-subtle text-danger"
-                   : "bg-body-tertiary text-secondary";
-    const scoreTxt = s == null ? "·" : (s > 0 ? "+" : "") + s.toFixed(1);
+    const scoreTxt = s == null ? "·" : signed(s, 1);
     let host = "";
-    try { host = new URL(h.source).hostname.replace(/^www\./, ""); } catch {}
-    const content = `<span class="wire-score ${scoreCls}" title="Headline sentiment ${esc(String(s ?? "n/a"))} (−1…+1)${h.currencies?.length ? " · " + esc(h.currencies.join(", ")) : ""}">${scoreTxt}</span>
-       <span class="small text-secondary flex-fill">${esc(h.headline)}</span>
-       <span class="small text-secondary text-nowrap">${esc(h.publisher || host)}${h.timestamp ? " · " + fmtAge(h.timestamp) : ""}</span>`;
-    if (!h.id) return `<div class="wire-item gap-2 align-items-baseline py-1 px-1">${content}</div>`;
-    return `<button type="button" class="wire-item gap-2 align-items-baseline py-1 px-1" data-news-id="${h.id}" aria-haspopup="dialog">
-      ${content}
-    </button>`;
+    try { host = new URL(h.source).hostname.replace(/^www\./, ""); } catch (e) { /* not a url */ }
+    const body = `<span class="wire-score ${cls}"
+        title="Tone for gold, from −1 to +1${h.currencies && h.currencies.length ? ". Mentions " + esc(h.currencies.join(", ")) : ""}">${scoreTxt}</span>
+      <span class="wire-text">${esc(h.headline)}</span>
+      <span class="wire-src">${esc(h.publisher || host)}${h.timestamp ? ", " + fmtAge(h.timestamp) : ""}</span>`;
+    return h.id
+      ? `<button type="button" class="wire-item" data-news-id="${esc(h.id)}" aria-haspopup="dialog">${body}</button>`
+      : `<div class="wire-item">${body}</div>`;
   };
   const head = items.slice(0, 12).map(item).join("");
   const rest = items.slice(12);
-  const moreOpen = $("wire")?.querySelector("details.more")?.open ?? false;
-  $("wire").innerHTML = head + (rest.length
-    ? `<details class="more mt-1"${moreOpen ? " open" : ""}><summary class="small text-secondary">${rest.length} more headlines…</summary>
-       <div class="mt-1">${rest.map(item).join("")}</div></details>` : "");
+  const moreOpen = $("#wire details.more").prop("open") || false;
+  $("#wire").html(head + (rest.length
+    ? `<details class="more"${moreOpen ? " open" : ""}>
+         <summary class="wire-more">${rest.length} older headlines</summary>
+         <div>${rest.map(item).join("")}</div></details>` : ""));
 }
 
-/* ── news / calendar detail dialog ────────────────────────────── */
-const evKey = e => `${e.time}|${e.currency}|${e.event}`;
-const findHeadline = id => (news?.headlines || []).find(h => h.id === id);
-const findEvent = key => (news?.events || []).find(e => evKey(e) === key);
-
+/* ── news and event dialog ────────────────────────────────────── */
 const AI_ERR_MSG = {
-  unknown_id: "This headline has left the live feed — no summary available.",
-  cap_exceeded: "Daily AI budget reached — try again tomorrow.",
+  unknown_id: "This headline has left the live feed, so there is no summary for it.",
+  cap_exceeded: "The daily AI budget is used up. Try again tomorrow.",
   no_key: "AI summaries are not configured on this server."
 };
 
-async function fetchAiSummary(id) {
+function fetchAiSummary(id) {
   aiPending.add(id);
-  try {
-    const res = await fetch("news_summary.php?id=" + encodeURIComponent(id));
-    const data = await res.json().catch(() => null);
-    if (res.ok && data?.summary) aiMemo.set(id, data);
-    else aiErr.set(id, data?.error || `http_${res.status}`);
-  } catch {
-    aiErr.set(id, "network");
-  } finally {
-    aiPending.delete(id);
-    if (ndState?.kind === "wire" && ndState.id === id) renderNewsDlg();
-  }
+  $.ajax({ url: "news_summary.php", data: { id: id }, dataType: "json" })
+    .done(data => {
+      if (data && data.summary) aiMemo.set(id, data);
+      else aiErr.set(id, (data && data.error) || "empty");
+    })
+    .fail(jqXHR => {
+      const data = jqXHR.responseJSON;
+      aiErr.set(id, (data && data.error) || (jqXHR.status ? "http_" + jqXHR.status : "network"));
+    })
+    .always(() => {
+      aiPending.delete(id);
+      if (ndState && ndState.kind === "wire" && ndState.id === id) renderNewsDlg();
+    });
 }
 
 function scoreTiles(h) {
-  const cls = v => v > 0.05 ? "text-success" : v < -0.05 ? "text-danger" : "text-secondary";
-  let tiles = tile("Overall sentiment", signed(h.score, 2), cls(h.score));
-  const xau = h.score_by_currency?.XAU;
-  if (xau != null) tiles += tile("Gold (XAU) effect", signed(xau, 2), cls(xau));
-  for (const [cur, v] of Object.entries(h.score_by_currency || {})) {
-    if (cur !== "XAU") tiles += tile(cur, signed(v, 2), cls(v));
+  const cls = v => v > 0.05 ? "up" : v < -0.05 ? "down" : "";
+  let tiles = tile("Overall tone", signed(h.score, 2), cls(h.score));
+  const xau = h.score_by_currency && h.score_by_currency.XAU;
+  if (xau != null) tiles += tile("Effect on gold", signed(xau, 2), cls(xau));
+  for (const cur of Object.keys(h.score_by_currency || {})) {
+    if (cur !== "XAU") tiles += tile(cur, signed(h.score_by_currency[cur], 2), cls(h.score_by_currency[cur]));
   }
-  let out = `<div class="row row-cols-2 row-cols-md-3 g-2">${tiles}</div>`;
-  if (h.keywords?.length) {
-    out += `<div class="small text-secondary mt-2">Matched keywords: ${esc(h.keywords.join(", "))}</div>`;
+  let out = `<div class="d-tiles">${tiles}</div>`;
+  if (h.keywords && h.keywords.length) {
+    out += `<div class="flat small mt-2">Matched words: ${esc(h.keywords.join(", "))}</div>`;
   }
-  out += `<div class="small text-secondary">Scores range −1 (bearish) to +1 (bullish); the gold score flips monetary-policy keywords (hawkish = dollar-bullish, gold-bearish).</div>`;
+  out += `<div class="flat small mt-1">Scores run from −1 (bearish for gold) to +1 (bullish).
+    Rate talk is flipped: hawkish is good for the dollar and bad for gold.</div>`;
   return out;
 }
 
 function aiSection(id) {
   if (aiMemo.has(id)) {
     const m = aiMemo.get(id);
-    return `<div class="text-secondary small">${esc(m.summary)}</div>` + (m.generated_at
-      ? `<div class="small text-secondary">generated ${fmtAge(m.generated_at)}</div>` : "");
+    return `<div class="flat">${esc(m.summary)}</div>` +
+      (m.generated_at ? `<div class="flat small mt-1">written ${fmtAge(m.generated_at)}</div>` : "");
   }
-  if (aiPending.has(id)) return `<div class="text-secondary small">Generating gold-impact summary…</div>`;
   if (aiErr.has(id)) {
-    return `<div class="text-secondary small">${esc(AI_ERR_MSG[aiErr.get(id)] || "AI summary unavailable right now.")}</div>`;
+    return `<div class="flat">${esc(AI_ERR_MSG[aiErr.get(id)] || "The AI summary is unavailable right now.")}</div>`;
   }
-  return `<div class="text-secondary small">Generating gold-impact summary…</div>`;
+  return `<div class="flat"><i class="fa-solid fa-spinner fa-spin-pulse me-2" aria-hidden="true"></i>Writing a gold-impact summary…</div>`;
 }
 
 function wireDlgHTML() {
@@ -711,17 +1046,19 @@ function wireDlgHTML() {
   const h = fresh || ndState.snap;
   if (!h) return "";
   let host = "";
-  try { host = new URL(h.source).hostname.replace(/^www\./, ""); } catch {}
+  try { host = new URL(h.source).hostname.replace(/^www\./, ""); } catch (e) { /* not a url */ }
   const when = h.timestamp
-    ? `${new Date(h.timestamp).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })} · ${fmtAge(h.timestamp)}` : "";
-  let out = `<div class="fs-5 fw-semibold mb-1">${esc(h.headline)}</div>
-    <div class="small text-secondary mb-3">${esc(h.publisher || host)}${when ? " · " + when : ""}</div>`;
-  if (!fresh) out += `<div class="small text-secondary mb-2">No longer in the live feed — showing saved copy.</div>`;
+    ? `${new Date(h.timestamp).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}, ${fmtAge(h.timestamp)}`
+    : "";
+  let out = `<h4 class="h5">${esc(h.headline)}</h4>
+    <div class="flat small mb-3">${esc(h.publisher || host)}${when ? ", " + when : ""}</div>`;
+  if (!fresh) out += `<div class="flat small mb-2">This headline has dropped out of the live feed — showing the saved copy.</div>`;
   out += sec("Score", scoreTiles(h));
-  if (h.description) out += sec("From the source", `<div class="text-secondary small">${esc(h.description)}</div>`);
+  if (h.description) out += sec("From the source", `<div class="flat">${esc(h.description)}</div>`);
   out += sec("AI gold-impact summary", aiSection(ndState.id));
   if (h.link && /^https?:\/\//.test(h.link)) {
-    out += `<a class="btn btn-outline-primary" href="${esc(h.link)}" target="_blank" rel="noopener noreferrer">Read full article ↗</a>`;
+    out += `<a class="btn btn-sm btn-desk" href="${esc(h.link)}" target="_blank" rel="noopener noreferrer">
+      <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>Read the full article</a>`;
   }
   return out;
 }
@@ -732,63 +1069,69 @@ function calDlgHTML() {
   if (!e) return "";
   const t = Date.parse(e.time) / 1000;
   const when = new Date(e.time).toLocaleString(undefined, { dateStyle: "full", timeStyle: "short" });
-  const impact = `<span class="badge ${e.impact === "high" ? "text-bg-danger" : e.impact === "medium" ? "text-bg-warning" : "text-bg-secondary"}">${e.impact === "medium" ? "Med" : e.impact.charAt(0).toUpperCase() + e.impact.slice(1)}</span>`;
-  let out = `<div class="fs-5 fw-semibold mb-1">${esc(e.event)}</div>
-    <div class="small text-secondary mb-3">${esc(e.currency)} · ${when}</div>`;
-  const timing = t > nowServer()
-    ? `releases in <span class="num" data-close="${t}">--:--</span>`
-    : `released ${fmtAge(e.time)}`;
-  out += sec("Timing", `<div class="text-secondary small">${impact} impact · ${timing}</div>`);
-  const surpTxt = { positive: "actual above forecast", negative: "actual below forecast", inline: "actual matches forecast" }[e.surprise];
-  out += sec("Numbers", `<div class="row row-cols-3 g-2">${
-      tile("Forecast", esc(e.forecast ?? "—")) +
-      tile("Previous", esc(e.previous ?? "—")) +
-      tile("Actual", esc(e.actual ?? "—"), e.surprise === "positive" ? "text-success" : e.surprise === "negative" ? "text-danger" : "")
-    }</div>` + (surpTxt
-      ? `<div class="small text-secondary mt-2">${surpTxt} (numeric only — not gold direction)</div>` : ""));
+  const impact = e.impact === "medium" ? "Med" : e.impact.charAt(0).toUpperCase() + e.impact.slice(1);
+  let out = `<h4 class="h5">${esc(e.event)}</h4>
+    <div class="flat small mb-3">${esc(e.currency)}, ${esc(when)}</div>`;
+  out += sec("Timing", `<div class="flat">
+    <span class="impact impact-${esc(e.impact)}">${esc(impact)} impact</span>
+    ${t > nowServer()
+      ? ` releases in <span class="num" data-close="${t}">--:--</span>`
+      : ` released ${fmtAge(e.time)}`}</div>`);
+  const surpTxt = {
+    positive: "The number came in above forecast.",
+    negative: "The number came in below forecast.",
+    inline: "The number matched the forecast."
+  }[e.surprise];
+  out += sec("Numbers", `<div class="d-tiles">
+      ${tile("Forecast", esc(e.forecast == null ? "—" : e.forecast))}
+      ${tile("Previous", esc(e.previous == null ? "—" : e.previous))}
+      ${tile("Actual", esc(e.actual == null ? "—" : e.actual),
+        e.surprise === "positive" ? "up" : e.surprise === "negative" ? "down" : "")}
+    </div>${surpTxt ? `<div class="flat small mt-2">${surpTxt} That is about the number itself, not gold's direction.</div>` : ""}`);
   return out;
 }
 
 function renderNewsDlg() {
   if (!ndState || !newsModalOpen) return;
-  const scroll = $("nd-body").scrollTop;
-  $("nd-title").textContent = ndState.kind === "wire" ? "Newswire" : "Economic calendar";
-  $("nd-body").innerHTML = ndState.kind === "wire" ? wireDlgHTML() : calDlgHTML();
-  $("nd-body").scrollTop = scroll;
+  const scroll = $("#nd-body").scrollTop();
+  $("#nd-title").text(ndState.kind === "wire" ? "Headline" : "Calendar event");
+  $("#nd-body").html(ndState.kind === "wire" ? wireDlgHTML() : calDlgHTML());
+  $("#nd-body").scrollTop(scroll);
   tick();
 }
 
 function openNewsDetail(id) {
   const h = findHeadline(id);
   if (!h) return;
-  ndState = { kind: "wire", id, snap: h };
+  ndState = { kind: "wire", id: id, snap: h };
   aiErr.delete(id);
+  newsModalOpen = true;
   newsModal.show();
   if (!aiMemo.has(id) && !aiPending.has(id)) fetchAiSummary(id);
   renderNewsDlg();
-  $("nd-body").scrollTop = 0;
-  $("nd-close").focus();
+  $("#nd-body").scrollTop(0);
+  $("#nd-close").trigger("focus");
 }
 
 function openCalDetail(key) {
   const e = findEvent(key);
   if (!e) return;
-  ndState = { kind: "cal", key, snap: e };
+  ndState = { kind: "cal", key: key, snap: e };
+  newsModalOpen = true;
   newsModal.show();
   renderNewsDlg();
-  $("nd-body").scrollTop = 0;
-  $("nd-close").focus();
+  $("#nd-body").scrollTop(0);
+  $("#nd-close").trigger("focus");
 }
 
-$("nd-close")?.addEventListener("click", () => newsModal.hide());
-
 /* ── polling ──────────────────────────────────────────────────── */
-async function fetchJSON(name) {
-  const res = await fetch(name, { cache: "no-cache" });
-  if (!res.ok) throw new Error(`${name}: HTTP ${res.status}`);
-  const dateHdr = res.headers.get("Date");
-  const text = await res.text();
-  return { text, serverNow: dateHdr ? Date.parse(dateHdr) / 1000 : null };
+function fetchText(name) {
+  return $.ajax({ url: name, dataType: "text", cache: false })
+    .then((text, status, jqXHR) => {
+      const header = jqXHR.getResponseHeader("Date");
+      const parsed = header ? Date.parse(header) : NaN;
+      return { text: text, serverNow: isFinite(parsed) ? parsed / 1000 : null };
+    });
 }
 
 function tfFingerprint(entry) {
@@ -821,8 +1164,8 @@ function scheduleFallbackRefresh() {
 
 function scheduleBoundaryRefresh() {
   if (!snapshot) return;
-  const nextScan = Math.min(...TF_ORDER.map(tf =>
-    snapshot.timeframes[tf]?.next_scan_epoch || Infinity));
+  const nextScan = Math.min.apply(null, TF_ORDER.map(tf =>
+    (snapshot.timeframes[tf] && snapshot.timeframes[tf].next_scan_epoch) || Infinity));
   if (!isFinite(nextScan)) return;
   const delay = (nextScan - nowServer() + 2) * 1000;
   scheduleRefresh(delay > 0 ? delay : RETRY_MS);
@@ -835,63 +1178,64 @@ async function poll() {
   }
   pollInFlight = true;
   try {
-    const [snap, nw] = await Promise.all([
-      fetchJSON("snapshot.json"),
-      fetchJSON("news.json").catch(() => null)
+    const results = await Promise.all([
+      fetchText("snapshot.json"),
+      fetchText("news.json").catch(() => null)
     ]);
-    const priorSnapshot = snapshot;
+    const snap = results[0], nw = results[1];
+    const prior = snapshot;
     let snapChanged = false;
-    let selectedChanged = false;
-    let cardsChanged = false;
+    const changedTfs = [];
     let detailChanged = false;
+
     if (snap.text !== lastSnapText) {
       const incoming = JSON.parse(snap.text);
-      if (!priorSnapshot || incoming.server_time_epoch >= priorSnapshot.server_time_epoch) {
+      if (!prior || incoming.server_time_epoch >= prior.server_time_epoch) {
         snapChanged = true;
-        selectedChanged = tfFingerprint(priorSnapshot?.timeframes?.[selectedTf]) !==
-          tfFingerprint(incoming.timeframes?.[selectedTf]);
-        // renderCards() redraws the selector for EVERY timeframe, so it
-        // must react to any of them changing — not just the selected one.
-        // Gating it on selectedChanged left the other buttons showing a
-        // stale arrow/score (up to 4 h on H4) while renderHero's rail,
-        // which redraws unconditionally, already showed the new value.
-        cardsChanged = TF_ORDER.some(tf =>
-          tfFingerprint(priorSnapshot?.timeframes?.[tf]) !==
-          tfFingerprint(incoming.timeframes?.[tf]));
-        detailChanged = detailTf != null && tfFingerprint(priorSnapshot?.timeframes?.[detailTf]) !==
-          tfFingerprint(incoming.timeframes?.[detailTf]);
+        TF_ORDER.forEach(tf => {
+          if (tfFingerprint(prior && prior.timeframes[tf]) !== tfFingerprint(incoming.timeframes[tf])) {
+            changedTfs.push(tf);
+          }
+        });
+        detailChanged = detailTf != null && changedTfs.indexOf(detailTf) !== -1;
         snapshot = incoming;
         lastSnapText = snap.text;
       }
     }
     const newsChanged = nw != null && nw.text !== lastNewsText;
     if (newsChanged) { news = JSON.parse(nw.text); lastNewsText = nw.text; }
-    clockOffset = (snap.serverNow ?? snapshot.server_time_epoch) - Date.now() / 1000;
+    clockOffset = (snap.serverNow == null ? snapshot.server_time_epoch : snap.serverNow) - Date.now() / 1000;
     lastPollOk = new Date();
-    $("banner-fail").classList.add("d-none");
+    $("#banner-fail").addClass("d-none");
 
     if (snapChanged) {
-      renderHero();
-      if (cardsChanged) renderCards();
-      if (detailChanged) renderDetail();
-      if (selectedChanged) {
-        const signal = snapshot.timeframes[selectedTf]?.report?.signal;
-        if (signal) announce(`${TF_LABEL[selectedTf]} signal updated: ${sigLabel(signal)}.`);
+      renderBar();
+      if (changedTfs.length) {
+        changedTfs.forEach(renderCard);
+        updateDirectionChart();
+        const spoken = changedTfs
+          .map(tf => currentReport(tf) && `${TF_LABEL[tf]} now reads ${sigWord(currentReport(tf).signal).toLowerCase()}`)
+          .filter(Boolean);
+        if (spoken.length) announce(spoken.join(". ") + ".");
       }
+      if (detailChanged) renderDetail();
     }
     if (newsChanged) {
       renderCalendar();
       renderWire();
       renderNewsDlg();
     }
-    if (snapChanged || newsChanged) renderContext();
+    if (snapChanged || newsChanged) {
+      renderContext();
+      renderBoard();
+    }
     tick();
     scheduleBoundaryRefresh();
   } catch (err) {
-    const last = lastPollOk ? ` Last update ${lastPollOk.toLocaleTimeString()}.` : "";
-    const b = $("banner-fail");
-    b.textContent = `Dashboard data is temporarily unavailable.${last} Retrying…`;
-    b.classList.remove("d-none");
+    const last = lastPollOk ? ` The last update was at ${lastPollOk.toLocaleTimeString()}.` : "";
+    $("#banner-fail")
+      .text(`Can't reach the dashboard data.${last} Retrying every ${RETRY_MS / 1000} seconds.`)
+      .removeClass("d-none");
     scheduleRefresh(RETRY_MS);
   } finally {
     pollInFlight = false;
@@ -902,10 +1246,11 @@ async function poll() {
   }
 }
 
+/* ── one-second clock ─────────────────────────────────────────── */
 function tick() {
   if (!snapshot) return;
   const now = nowServer();
-  document.querySelectorAll("[data-close]").forEach(el => {
+  $("[data-close]").each((i, el) => {
     const t = parseFloat(el.dataset.close);
     if (!t) return;
     let secs = t - now;
@@ -915,66 +1260,56 @@ function tick() {
     }
     el.textContent = fmtCountdown(secs);
   });
-  const m5 = snapshot.timeframes["5min"]?.next_close_epoch;
+
+  const m5 = snapshot.timeframes["5min"] && snapshot.timeframes["5min"].next_close_epoch;
   if (m5) {
     let secs = m5 - now;
     if (secs < 0) secs = ((secs % TF_SECONDS["5min"]) + TF_SECONDS["5min"]) % TF_SECONDS["5min"];
-    $("hero-cd").textContent = fmtCountdown(secs);
+    $("#bar-cd").text(fmtCountdown(secs));
   }
+
   const pubEpoch = snapshot.server_time_epoch;
   if (pubEpoch) {
-    const age = now - pubEpoch;
-    const el = $("hero-updated");
-    const stale = !snapshot.market_closed && age > 900;
-    el.textContent = (stale ? "STALE — published " : "published ") +
-      fmtAge(new Date(pubEpoch * 1000).toISOString());
-    el.classList.toggle("text-warning", stale);
-    el.classList.toggle("fw-semibold", stale);
+    const stale = !snapshot.market_closed && (now - pubEpoch) > 900;
+    $("#bar-updated")
+      .text((stale ? "stale, published " : "published ") + fmtAge(new Date(pubEpoch * 1000).toISOString()))
+      .toggleClass("is-stale", stale);
   }
 }
 
 /* ── boot ─────────────────────────────────────────────────────── */
-document.addEventListener("DOMContentLoaded", () => {
-  tfModal = new bootstrap.Modal($("tf-detail"));
-  newsModal = new bootstrap.Modal($("news-detail"));
-  const storedTf = localGet(TIMEFRAME_PREF);
-  if (TF_LABEL[storedTf]) selectedTf = storedTf;
-  $("hi-only").checked = localGet(HIGH_IMPACT_PREF) === "true";
+$(function () {
+  loadColors();
+  buildCharts();
+  buildCards();
 
-  $("tf-detail")?.addEventListener("shown.bs.modal", () => { tfModalOpen = true; renderDetail(); });
-  $("tf-detail")?.addEventListener("hidden.bs.modal", () => { tfModalOpen = false; detailTf = null; });
-  $("news-detail")?.addEventListener("shown.bs.modal", () => { newsModalOpen = true; renderNewsDlg(); });
-  $("news-detail")?.addEventListener("hidden.bs.modal", () => { newsModalOpen = false; ndState = null; });
+  tfModal = new bootstrap.Modal(document.getElementById("tf-detail"));
+  newsModal = new bootstrap.Modal(document.getElementById("news-detail"));
+  $("#hi-only").prop("checked", localGet(HIGH_IMPACT_PREF) === "true");
 
-  const selectTf = tf => {
-    if (!TF_LABEL[tf]) return;
-    const changed = selectedTf !== tf;
-    selectedTf = tf;
-    localSet(TIMEFRAME_PREF, tf);
-    renderHero();
-    renderCards();
-    if (changed) announce(`${TF_LABEL[tf]} workspace selected.`);
-  };
-  $("hero-rail")?.addEventListener("click", e => {
-    const button = e.target.closest("[data-select-tf]");
-    if (button) selectTf(button.dataset.selectTf);
-  });
-  $("tf-grid")?.addEventListener("click", e => {
-    const detail = e.target.closest("[data-open-detail]");
-    if (detail) return openDetail(detail.dataset.openDetail);
-    const button = e.target.closest("[data-select-tf]");
-    if (button) selectTf(button.dataset.selectTf);
-  });
-  $("wire")?.addEventListener("click", e => {
-    const button = e.target.closest("[data-news-id]");
-    if (button) openNewsDetail(button.dataset.newsId);
-  });
-  $("cal-body")?.addEventListener("click", e => {
-    const button = e.target.closest("[data-ev-key]");
-    if (button) openCalDetail(button.dataset.evKey);
-  });
-  $("hi-only")?.addEventListener("change", () => {
-    localSet(HIGH_IMPACT_PREF, String($("hi-only").checked));
+  $("#tf-detail").on("shown.bs.modal", () => { tfModalOpen = true; renderDetail(); })
+    .on("hidden.bs.modal", () => { tfModalOpen = false; detailTf = null; });
+  $("#news-detail").on("shown.bs.modal", () => { newsModalOpen = true; renderNewsDlg(); })
+    .on("hidden.bs.modal", () => { newsModalOpen = false; ndState = null; });
+  $("#detail-close").on("click", () => tfModal.hide());
+  $("#nd-close").on("click", () => newsModal.hide());
+
+  $(document)
+    .on("click", "[data-goto-tf]", function () {
+      // .attr, not .data: jQuery's data() coerces values that look numeric.
+      const tf = $(this).attr("data-goto-tf");
+      const $card = $("#card-" + tf);
+      if (!$card.length) return;
+      $card[0].scrollIntoView({ behavior: REDUCED_MOTION ? "auto" : "smooth", block: "center" });
+      $card.addClass("is-target");
+      setTimeout(() => $card.removeClass("is-target"), 1400);
+    })
+    .on("click", "[data-open-detail]", function () { openDetail($(this).attr("data-open-detail")); })
+    .on("click", "[data-news-id]", function () { openNewsDetail($(this).attr("data-news-id")); })
+    .on("click", "[data-ev-key]", function () { openCalDetail($(this).attr("data-ev-key")); });
+
+  $("#hi-only").on("change", function () {
+    localSet(HIGH_IMPACT_PREF, String($(this).prop("checked")));
     renderCalendar();
   });
 
diff --git a/test_all.py b/test_all.py
index f326989..99b2c53 100644
--- a/test_all.py
+++ b/test_all.py
@@ -5496,18 +5496,45 @@ def _():
             ["dashboard.css", "dashboard.html", "dashboard.js", "news_summary.php"]  # all installed, no .tmp
 
 
-@test("dashboard: static UI uses CSS gauges and a coordinated refresh loop")
+@test("dashboard: static UI is Bootstrap + jQuery + Chart.js on a CDN")
 def _():
+    # The page is served as-is (no build step), so its four libraries are
+    # pinned <script>/<link> tags. Only jsdelivr and cdnjs are allowed.
+    import re
+    static_dir = os.path.join(os.path.dirname(__file__), "static")
+    with open(os.path.join(static_dir, "dashboard.html"), encoding="utf-8") as fh:
+        html = fh.read()
+    for needle in ("bootstrap@5.3", "bootstrap.bundle.min.js", "jquery@3.7",
+                   "chart.js@4.4", "font-awesome/6."):
+        assert needle in html, needle
+    assert "gauge.js" not in html          # no local charting script survives
+    from urllib.parse import urlsplit
+    for url in re.findall(r'(?:src|href)="(https?://[^"]+)"', html):
+        assert urlsplit(url).netloc in {
+            "cdn.jsdelivr.net", "cdnjs.cloudflare.com",
+            "fonts.googleapis.com", "fonts.gstatic.com"}, url
+
+
+@test("dashboard: one card and one chart per timeframe, coordinated refresh")
+def _():
+    import re
     static_dir = os.path.join(os.path.dirname(__file__), "static")
     with open(os.path.join(static_dir, "dashboard.html"), encoding="utf-8") as fh:
         html = fh.read()
     with open(os.path.join(static_dir, "dashboard.js"), encoding="utf-8") as fh:
         js = fh.read()
-    assert "chart.js" not in html.lower()
-    assert "gauge.js" not in html
+    # The four dashboard timeframes render as Bootstrap columns inside one
+    # row, each card carrying its own indicator canvas.
+    assert 'id="tf-grid"' in html and "row-cols-" in html
+    assert 'id="chart-direction"' in html and 'id="chart-tone"' in html
+    assert 'id="ind-${tf}"' in js and "cardShell" in js
+    assert [tf.value for tf in dpub.DASHBOARD_TFS] == \
+        re.search(r'const TF_ORDER = \[([^\]]+)\]', js).group(1) \
+          .replace('"', "").replace(" ", "").split(",")
+    # One coordinated refresh loop, never a polling interval.
     assert "setInterval(poll" not in js
     assert "FALLBACK_POLL_MS" in js and "pollInFlight" in js
-    assert "data-select-tf" in js and "localStorage" in js
+    assert "scheduleBoundaryRefresh" in js and "localStorage" in js
 
 
 @test("dashboard: publish is atomic and leaves no temp file")