/* AI Signals: change against the usual, drawn from the centre line. Up is gold, down is blue; neither is good or bad. */
:root { --sig-up: #E6CE8E; --sig-down: #7FA6E6; }
.ai-signals { display: block; }
.sig-row { display: grid; grid-template-columns: minmax(96px, 128px) 1fr 74px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.sig-row:first-child { border-top: 0; }
.sig-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.sig-name small { display: block; margin-top: 1px; color: var(--ink-soft); font-size: 11px; font-weight: 400; }
.sig-bar { position: relative; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.sig-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: rgba(255, 255, 255, .35); }
.sig-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.sig-fill.sig-up { left: 50%; background: var(--sig-up); }
.sig-fill.sig-down { right: 50%; background: var(--sig-down); }
.sig-fill.sig-flat { display: none; }
.sig-val { font-family: var(--font-display); font-size: 16px; text-align: right; white-space: nowrap; }
.sig-val.sig-up { color: var(--sig-up); }
.sig-val.sig-down { color: var(--sig-down); }
.sig-val.sig-flat { color: var(--ink-soft); }
.sig-foot { margin: 12px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.sig-foot a { color: var(--gold); }
@media (max-width: 420px) { .sig-row { grid-template-columns: minmax(84px, 108px) 1fr 66px; gap: 8px; } .sig-val { font-size: 15px; } }

/* ---- home: the Trends Index and AI Signals as two equal cards ---- */
.trends-duo { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.duo-card { display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 20px; border: 1px solid var(--line-strong); border-radius: 18px;
  background: linear-gradient(160deg, #241A4E 0%, #1a1236 60%, #150d2b 100%); box-shadow: inset 0 2px 0 rgba(230, 206, 142, .55); }
.duo-title { margin: 0; font-family: var(--font-display); font-size: 22px; color: var(--ink); text-align: left; }
.duo-sub { margin: 4px 0 14px; color: var(--ink-soft); font-size: 12.5px; text-align: left; }
.duo-link { margin-top: auto; padding-top: 14px; align-self: flex-start; color: var(--gold); font-size: 13.5px; font-weight: 700; }
.duo-link:hover { text-decoration: underline; }
.duo-card .ai-signals { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.duo-card .sig-foot { margin-top: 10px; }
/* the index card: gauge above a short list, one row of controls */
.duo-index .trends-toggle { margin: 0 0 8px; justify-content: flex-start; }
.duo-index .trends-board { max-width: none; margin: 0; grid-template-columns: 1fr; gap: 6px; justify-items: stretch; text-align: center; }
.duo-index .trends-gauge { max-width: 210px; width: 100%; margin: 0 auto; }
.duo-index .trends-list > :nth-child(n+5) { display: none; }
.duo-index .trends-row { padding: 6px 10px; grid-template-columns: 104px 1fr 30px 58px; gap: 10px; }
.duo-index .trends-note { display: none; }
@media (min-width: 1000px) { .duo-card { min-height: 478px; } }
@media (max-width: 999px) { .trends-duo { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 420px) { .duo-card { padding: 18px 16px 16px; } .duo-index .trends-row { grid-template-columns: 112px 1fr 28px 54px; gap: 8px; } }

/* ---- phone Squares view: a wide tile with the three biggest moves ---- */
@media (max-width: 760px) {
  .mh-signals { --a: #2a1f5a; --c: #e6ce8e; }
  .mh-pg .mh-tile.mh-signals { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 30px 14px 50px; }
  .mh-pg .mh-tile.mh-signals .mh-vis { display: block; flex: 1 1 auto; width: 100%; padding: 0; }
  .mh-signals .mh-sigbox { width: 100%; }
  .mh-signals .sig-row { grid-template-columns: minmax(78px, 104px) 1fr 62px; gap: 8px; padding: 4px 0; }
  .mh-signals .sig-name { font-size: 12.5px; }
  .mh-signals .sig-name small { display: none; }
  .mh-signals .sig-val { font-size: 14.5px; line-height: 1.2; }
  .mh-signals .sig-name { line-height: 1.2; }
}

/* ---- dashboard: one strip, the five rows side by side ---- */
#tile-signals .tile-body { flex: 1; }
#tile-signals .ai-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 22px; }
#tile-signals .sig-row { grid-template-columns: 1fr auto; grid-template-areas: "n v" "b b"; gap: 4px 8px; padding: 0; border-top: 0; align-items: baseline; }
#tile-signals .sig-name { grid-area: n; font-size: 12.5px; }
#tile-signals .sig-name small { display: none; }
#tile-signals .sig-bar { grid-area: b; height: 8px; }
#tile-signals .sig-val { grid-area: v; font-size: 14px; }
#tile-signals .sig-foot { display: none; }

/* dashboard grid: one more row for the Signals strip (overrides the areas in style.css so the shared stylesheet stays untouched) */
@media (min-width: 1101px) {
  #tile-signals { grid-area: signals; }
  .dash-grid { grid-template-areas:
      "news news brief brief"
      "trends trends youtube youtube"
      "radar radar countries countries"
      "mood mood radio radio"
      "pulse coverage archive github"
      "stocks stocks stocks stocks"
      "signals signals signals signals"; }
}
@media (min-width: 1360px) {
  .dash-grid { grid-template-areas:
      "news news brief brief trends trends"
      "news news brief brief youtube youtube"
      "radar radar countries countries pulse coverage"
      "archive github mood mood radio radio"
      "stocks stocks stocks stocks stocks stocks"
      "signals signals signals signals signals signals"; }
}
#tile-signals { --accent: #e6ce8e; }
.dash-grid #tile-signals { --accent: #e6ce8e; }

/* ---- phone "Live" view: a sticker with the three biggest moves ---- */
@media (max-width: 760px) {
  .sg-sig { cursor: pointer; background: var(--sg-panel); box-shadow: 5px 5px 0 var(--sg-gold); transform: none; }
  .sg-sig[hidden] { display: none; }
  .sg-sig .sg-st-lb { color: var(--sg-gold); margin-bottom: 4px; }
  .sg-sig .sig-row { grid-template-columns: minmax(78px, 112px) 1fr 66px; gap: 8px; padding: 7px 0; }
  .sg-sig .sig-name { font-size: 13px; color: #fbf3dc; }
  .sg-sig .sig-name small { display: none; }
  .sg-sig .sig-val { font-size: 15px; }
}

/* ---- dashboard header: switch between the dashboard and the TV mode ---- */
.view-switch { display: inline-flex; align-items: stretch; margin: 10px 0 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: rgba(20, 12, 38, .55); }
.view-switch .vs-title { display: flex; align-items: center; padding: 0 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.view-switch .vs-opt { display: flex; align-items: center; min-height: 36px; padding: 0 16px; border-left: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.view-switch .vs-opt:hover { color: var(--ink); background: rgba(233, 217, 168, .08); }
.view-switch .vs-opt.is-on { background: var(--gold); color: var(--bg); }
.view-switch .vs-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }