/* Signal by Teracomb — dark navigation rail + light reading surface, taken from the executive UI deck.
   Single deliberate look (the deck), so no dark-mode variant. */
:root {
  color-scheme: light;
  /* colour */
  --rail: #232426;
  --rail-2: #3a3b3e;
  --rail-text: #d5d6d3;
  --rail-muted: #a9aaa6;
  --bg: #f3f4f5;
  --card: #ffffff;
  --ink: #1e1f21;
  --grey: #5a5b57;
  --mid: #7d7e7a;
  --light: #c9cac7;
  --line: #e3e4e2;
  --blue: #0dafd8;          /* Teracomb blue: fills, active states */
  --blue-text: #0a7fa0;     /* readable blue for small text */
  --deep: #075e78;
  --tint: #ddf3fa;
  --on-blue: #0e1416;       /* dark text on blue fills */
  --pos-bg: #e3f2e7; --pos: #2e7d45;
  --warn-bg: #fcebd2; --warn: #94570a;
  --quiet-bg: #f8e1e1; --quiet: #a33a3a;
  /* type */
  --font: Inter, "Helvetica Neue", Arial, sans-serif;
  /* layout */
  --rail-w: 280px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 22, 24, .06), 0 2px 8px rgba(20, 22, 24, .04);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100%; }
.topbar { display: none; }

.rail {
  background: var(--rail); color: var(--rail-text);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 36px 24px 28px max(24px, env(safe-area-inset-left, 0px));
}
.rail-head { display: flex; align-items: center; justify-content: space-between; }
.rail-logo { width: 214px; height: auto; }
.rail-close { display: none; }
.by { margin-top: 18px; font-weight: 700; font-size: 16px; color: #ecedea; }
.tagline { margin-top: 4px; font-size: 13.5px; line-height: 1.3; color: var(--rail-muted); max-width: 230px; }
.rail-label { margin-top: 34px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9a9b97; }

.cat { position: relative; margin-top: 10px; }
.cat-btn {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; background: var(--card); color: var(--ink); text-align: left;
  border: 2.5px solid var(--blue); border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 700; font-size: 16px; line-height: 1.2;
}
.cat-chev { font-size: 22px; display: inline-flex; transition: transform .15s; }
.cat-btn[aria-expanded="true"] .cat-chev { transform: rotate(180deg); }
.cat-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 6px; background: var(--card); color: var(--ink);
  border: 1px solid var(--light); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.cat-opt { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.cat-opt:hover, .cat-opt[aria-selected="true"] { background: var(--tint); }
.cat-opt b { display: block; font-size: 15px; }
.cat-opt span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mid); }
.cat-opt.cat-soon span { color: var(--deep); font-weight: 700; }

.nav { margin-top: 26px; display: flex; flex-direction: column; gap: 6px; }
.nav a {
  display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 16px;
  border-radius: var(--radius-sm); color: var(--rail-text); text-decoration: none; font-size: 16px; white-space: nowrap;
}
.nav a svg { font-size: 22px; color: #b9bab6; }
.nav a:hover { background: var(--rail-2); }
.nav a[aria-current="page"] { background: var(--blue); color: var(--on-blue); font-weight: 700; }
.nav a[aria-current="page"] svg { color: var(--on-blue); }

.site-btn {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px;
  background: var(--rail-2); border: 1px solid #5a5b5e; border-radius: var(--radius-sm);
  color: #fff; font-weight: 700; font-size: 17px; text-decoration: none;
}
.site-btn:hover { background: #46474a; }
.ext svg { font-size: 20px; }
.rail > .site-btn { margin-top: 40px; }
.rail .nav + .site-btn { margin-top: auto; }

/* ---------- main ---------- */
.main {
  min-width: 0; display: flex; flex-direction: column;
  padding-block: 40px 22px;
  padding-left: max(44px, env(safe-area-inset-left, 0px));
  padding-right: max(44px, env(safe-area-inset-right, 0px));
}
.main:focus { outline: none; }
.view { width: 100%; max-width: 1120px; flex: 1; }
.foot { max-width: 1120px; margin-top: 26px; font-size: 13px; color: var(--mid); }

.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.head-text { min-width: 0; }
.eyebrow-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-text); }
.cat-pill { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--deep); border: 1.5px solid var(--blue); border-radius: 8px; padding: 5px 14px; background: #f7fcfe; }
.title { margin-top: 6px; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
.badge { background: var(--rail); color: #fff; border-radius: 12px; padding: 12px 18px 10px; text-align: center; min-width: 200px; }
.badge small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rail-muted); }
.badge strong { display: block; font-size: 36px; line-height: 1.15; font-weight: 700; white-space: nowrap; }
.badge.text strong { font-size: 26px; }
.lede { grid-column: 1 / -1; display: flex; gap: 14px; margin-top: 14px; max-width: 920px; }
.lede svg { font-size: 26px; color: var(--deep); margin-top: 1px; }
.lede p { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--grey); }

.body { margin-top: 32px; display: grid; gap: 22px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; min-width: 0; }
.card.dark { background: var(--rail); border-color: var(--rail); color: #fff; }
.card h2 { font-size: 20px; line-height: 1.25; }
.card-label { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.card.dark .card-label { color: var(--blue); }
.muted { color: var(--mid); }
.small { font-size: 13.5px; }
.num { font-variant-numeric: tabular-nums; }

.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--tint); color: var(--deep); font-variant-numeric: tabular-nums; }
.chip.flat { background: #ededeb; color: var(--grey); }
.chip.sq { border-radius: 6px; min-width: 88px; }
.chip.pos { background: var(--pos-bg); color: var(--pos); }
.status { display: inline-flex; justify-content: center; min-width: 120px; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.status.Escalating { background: var(--pos-bg); color: var(--pos); }
.status.Watch { background: var(--warn-bg); color: var(--warn); }
.status.Quiet { background: var(--quiet-bg); color: var(--quiet); }

.dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dots li { position: relative; padding-left: 26px; }
.dots li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }

/* ---------- about ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step { position: relative; display: flex; flex-direction: column; gap: 18px; }
.step + .step::before { content: ""; position: absolute; left: -22px; top: 50%; width: 16px; height: 16px; border-right: 2.5px solid var(--mid); border-top: 2.5px solid var(--mid); transform: translateY(-50%) rotate(45deg) scale(.7); }
.step-top { display: flex; gap: 16px; align-items: flex-start; }
.icon-dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--deep); font-size: 28px; flex: none; }
.card.dark .icon-dot { background: var(--blue); color: var(--on-blue); }
.step-tag { font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--blue-text); }
.card.dark .step-tag { color: var(--blue); }
.step h3 { font-size: 19px; line-height: 1.2; margin-top: 2px; }
.step p { font-size: 15px; color: var(--grey); }
.card.dark p { color: #d5d6d3; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.two h2 { margin-bottom: 14px; }

/* ---------- overview ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kpi { padding: 18px 20px; }
.kpi .k { font-size: 15px; font-weight: 700; color: var(--mid); }
.kpi .v { font-size: 38px; line-height: 1.15; font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.kpi .s { font-size: 15px; color: var(--grey); }
.kpi .s.up { color: var(--blue-text); font-weight: 700; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rank-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend { display: flex; gap: 16px; font-size: 14px; color: var(--grey); }
.legend i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.rank { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 4px; }
.rank li { display: grid; grid-template-columns: 26px 150px minmax(0, 1fr) 72px; align-items: center; gap: 12px; min-height: 32px; }
.rank .r { color: var(--mid); font-weight: 700; text-align: right; }
.rank .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank li:first-child .n { font-weight: 700; }
.bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar i { height: 18px; background: var(--light); flex: none; }
.bar i.up { background: var(--blue); }
.bar b { font-variant-numeric: tabular-nums; }
.rank .c { justify-self: end; }
.why h2 { margin: 14px 0 16px; font-size: 19px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.why .note { margin-top: 18px; color: var(--deep); font-size: 15px; }

/* ---------- drivers ---------- */
.drivers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
.pick table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pick th { text-align: left; font-size: 15px; font-weight: 700; color: var(--grey); padding: 8px 10px; border-bottom: 1.5px solid var(--line); }
.pick th.rt, .pick td.rt { text-align: right; }
.pick td { padding: 0; }
.pick tr.sel td { background: #e4f4fa; }
.pick td button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px; cursor: pointer; font-size: 17px; }
.pick td button:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.pick tr:hover td { background: #f1f8fb; }
.pick tr.sel button { font-weight: 700; }
.pick .sc { font-weight: 700; font-variant-numeric: tabular-nums; }
.pick .d { color: var(--blue-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pick .d.flat { color: var(--mid); font-weight: 400; }
.detail-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.detail-top .big { font-size: 38px; font-weight: 700; line-height: 1.1; }
.detail-top .chip { font-size: 18px; padding: 8px 20px; border-radius: 6px; }
.detail h2 { margin-top: 8px; font-size: 22px; }
.fam { width: 100%; border-collapse: collapse; margin-top: 12px; }
.fam td { padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.fam td:first-child { font-weight: 700; }
.fam td.w { color: var(--grey); text-align: right; width: 60px; font-variant-numeric: tabular-nums; }
.fam td.dd { text-align: right; width: 110px; }
.fam .chip { min-width: 88px; border-radius: 4px; }
.cont { margin-top: 16px; color: var(--deep); font-weight: 700; }

/* ---------- trends ---------- */
.trend-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(220px, 1fr); gap: 22px; align-items: start; }
.chart { margin-top: 10px; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); font-size: 13px; fill: var(--grey); }
.chart .axis { fill: var(--mid); }
.chart .grid { stroke: #ebeceb; stroke-width: 1; }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 14px; color: var(--grey); margin-top: 6px; }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key i { width: 20px; height: 3px; border-radius: 2px; position: relative; }
.key i::after { content: ""; position: absolute; left: 6px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; }
.moves { list-style: none; padding: 0; margin: 10px 0 0; }
.moves li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.moves li:last-child { border-bottom: 0; }
.moves b { font-size: 17px; }
.moves .mv { font-size: 26px; font-weight: 700; color: var(--mid); font-variant-numeric: tabular-nums; }
.moves .mv.hot { font-size: 34px; color: var(--blue-text); }

/* ---------- breakout ---------- */
.bk { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bk-side { display: grid; gap: 22px; }
.alerts-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.alerts-head h2 { font-size: 24px; }
.alert { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: #fbfbfb; }
.alert-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.alert h3 { font-size: 19px; }
.alert p { margin-top: 8px; color: var(--grey); }
.alert small { display: block; margin-top: 2px; color: var(--mid); font-size: 13px; }
.screen { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.screen h3 { font-size: 19px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.stats b { display: block; font-size: 38px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats span { font-size: 14px; font-weight: 700; color: var(--grey); }
.stats div:first-child span { color: var(--blue-text); }
.legend-rows { display: grid; gap: 12px; margin-top: 16px; }
.legend-rows div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 14px; color: var(--grey); }
.bk-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--deep); font-weight: 700; font-size: 14.5px; }

/* ---------- method ---------- */
.method { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mcard { display: flex; flex-direction: column; gap: 12px; }
.mcard-top { display: flex; justify-content: space-between; align-items: flex-start; }
.mcard .icon-dot { width: 50px; height: 50px; font-size: 24px; }
.mcard .n { font-size: 26px; font-weight: 700; color: var(--light); }
.mcard h3 { font-size: 18px; }
.mcard p { color: var(--grey); font-size: 15px; }
.weights { list-style: none; padding: 0; margin: 14px 0 0; }
.weights li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #3c3d40; font-weight: 700; font-size: 15px; }
.weights li span:last-child { color: var(--blue); font-variant-numeric: tabular-nums; }
.dark-sub { margin-top: 20px; }
.dark-sub p { margin-top: 6px; font-size: 14.5px; }

/* ---------- coming soon ---------- */
.soon { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.soon .def { font-size: 22px; line-height: 1.3; font-weight: 700; margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.soon h3 { margin: 18px 0 12px; font-size: 18px; }
.soon-panel { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.soon-panel .icon-dot { width: 64px; height: 64px; font-size: 30px; }
.soon-panel h2 { font-size: 34px; margin-top: 8px; }
.soon-panel .criteria { margin-top: 18px; padding-top: 16px; border-top: 1px solid #3c3d40; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .bk, .method, .soon, .trend-grid { grid-template-columns: minmax(0, 1fr); }
  .drivers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .topbar {
    display: flex; align-items: center; gap: 14px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: var(--rail); color: #fff;
    padding-block: 10px;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 25; background: var(--rail); }
  .topbar-logo { width: 140px; height: auto; }
  .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; border-radius: 8px; }
  .rail {
    position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100%;
    transform: translateX(-102%); transition: transform .2s ease;
    padding-top: max(24px, env(safe-area-inset-top, 0px)); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
  .rail.open { transform: none; }
  .rail-close { display: grid; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(10, 12, 14, .5); }
  .main { padding-block: 26px 18px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 720px) {
  .head { grid-template-columns: minmax(0, 1fr); }
  .badge { justify-self: start; min-width: 0; display: flex; align-items: baseline; gap: 12px; padding: 8px 14px; }
  .badge strong { font-size: 24px; }
  .badge.text strong { font-size: 20px; }
  .lede p { font-size: 17px; }
  .steps, .two, .mgrid { grid-template-columns: minmax(0, 1fr); }
  .step + .step::before { display: none; }
  .kpi .v { font-size: 30px; }
  .rank li { grid-template-columns: 20px 104px minmax(0, 1fr) 54px; gap: 8px; font-size: 15px; }
  .rank .chip { min-width: 0; padding: 3px 8px; font-size: 13px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .legend-rows div { grid-template-columns: 104px minmax(0, 1fr); }
  .status { min-width: 104px; }
}
@media (max-width: 420px) {
  .main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .kpis { gap: 12px; }
  .kpi { padding: 14px; }
  .kpi .v { font-size: 26px; }
  .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Verified published-source details; collapsed until requested */
.sources { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; font-size:14px; }
.sources summary { color:var(--deep); font-weight:700; cursor:pointer; }
.source-row { border-top:1px solid var(--line); padding:9px 0; display:grid; gap:3px; }
.source-row:first-of-type { margin-top:12px; }
.source-row span, .source-row p { color:var(--grey); }
.source-row a { color:var(--blue-text); }
.historical { margin-top:24px; border-top:1px solid var(--line); padding-top:14px; }
.historical h3 { font-size:16px; color:var(--grey); }
.historical .alert { opacity:.9; }
@media (max-width: 420px) {
  .rank li { grid-template-columns: 16px 92px minmax(0,1fr) 36px; gap:5px; font-size:13px; }
  .rank .chip { padding:2px 5px; font-size:11px; }
  .pick table { table-layout:fixed; }
  .pick th, .pick td button { padding:8px 3px; font-size:14px; }
  .pick th:first-child { width:52%; }
  .pick th:nth-child(2) { width:24%; }
  .pick th:nth-child(3) { width:24%; }
}
@media (max-width: 420px) {
  .fam { table-layout: fixed; }
  .fam td { font-size: 13px; }
  .fam td.w { width: 44px; }
  .fam td.dd { width: 58px; }
  .fam .chip { min-width: 48px; padding: 4px 3px; }
}


/* Approved Signal enquiry form: the single contact CTA navigates here. */
.enquiry-label { display:block; margin:18px 0; font-size:14px; font-weight:600; }
.enquiry-label input, .enquiry-label textarea, .enquiry-label select {
  display:block; width:100%; max-width:100%; box-sizing:border-box;
  margin-top:8px; padding:12px 14px; border:1px solid #cbd1d3;
  border-radius:8px; background:white; color:#171b1d;
  font-family:inherit; font-size:15px; line-height:1.5;
}
.enquiry-label input:focus, .enquiry-label textarea:focus,
.enquiry-label select:focus {outline:2px solid #0dafd8; outline-offset:2px;}
.enquiry-submit {
  display:inline-flex; width:auto; border:0; padding:12px 20px;
  font-family:inherit; font-size:15px; cursor:pointer;
  background:#171b1d; color:white; border-radius:8px;
}


/* Signal Drivers MVP: retain fixed family weights; show qualitative
   comparative-evidence shifts alongside. All labels remain visible without colour. */
.driver-main { margin: 22px 0 24px; padding: 16px 18px; background: #f6f9f9;
  border: 1px solid #dce5e6; border-left: 5px solid #7d929b; border-radius: 8px; }
.driver-main--up { border-left-color: #18845f; background: #f4faf7; }
.driver-main--down { border-left-color: #b44b4b; background: #fdf7f6; }
.driver-main-kicker { font-size: 12px; letter-spacing: .075em; text-transform: uppercase;
  color: #58696d; font-weight: 750; }
.driver-main-name { display: flex; align-items: center; gap: 11px; margin-top: 6px;
  font-size: 22px; line-height: 1.35; font-weight: 750; color: #17232a; }
.driver-main p { color: #4c5c61; font-size: 14px; line-height: 1.5; margin-top: 6px; }
.driver-main .driver-counter { color: #8d4a44; font-weight: 650; }
.driver-fam-head { display: flex; flex-wrap: wrap; gap: 5px 12px;
  align-items: baseline; justify-content: space-between; }
.driver-fam-head h2 { font-size: 20px; }
.driver-fam-head p { margin: 0; }
.driver-table { table-layout: auto; margin-top: 12px; width: 100%; }
.driver-table th { font-size: 12px; color: #5b6971; font-weight: 650; text-align: left;
  border-bottom: 1px solid #cdd9da; padding: 8px 4px; }
.driver-table th.w { text-align: right; }
.driver-table th:last-child { text-align: right; }
.driver-table td { vertical-align: middle; }
.driver-table td.driver-family { font-weight: 650; }
.driver-table td.driver-cal { text-align: right; min-width: 125px; }
.driver-light { display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 7px; font-size: 12px; font-weight: 720; white-space: nowrap; }
.driver-light--up { color: #147450; }
.driver-light--down { color: #a83e38; }
.driver-light--flat { color: #996d25; }
.driver-light--limited { color: #61727b; }
.driver-dot { display: inline-block; width: 11px; height: 11px; flex: 0 0 11px;
  background: #899ba2; border-radius: 50%; vertical-align: middle; }
.driver-light--up .driver-dot, .driver-dot--up, .driver-main--up .driver-dot { background: #168a5b; }
.driver-light--down .driver-dot, .driver-dot--down, .driver-main--down .driver-dot { background: #b64d45; }
.driver-light--flat .driver-dot, .driver-dot--flat { background: #bd8a36; }
.driver-light--limited .driver-dot, .driver-dot--limited { background: #829199; }
.driver-legend { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 7px 16px;
  font-size: 11.5px; font-weight: 650; color: #67767b; }
.driver-legend span { display: inline-flex; gap: 5px; align-items: center; }
.driver-legend .driver-dot { width: 8px; height: 8px; flex-basis: 8px; }
.driver-method { margin-top: 14px; line-height: 1.5; }
@media (max-width: 520px) {
  .driver-main { padding: 13px; }
  .driver-main-name { font-size: 19px; }
  .driver-table th, .driver-table td { font-size: 11.5px; }
  .driver-table td.driver-family { width: 43%; }
  .driver-table td.driver-cal { min-width: 92px; }
  .driver-light { gap: 5px; font-size: 10px; }
  .driver-light .driver-dot { width: 9px; height: 9px; flex-basis: 9px; }
  .driver-table td.w { width: 37px; }
}

/* November 2026 buyer MVP enhancements. All status meaning is also in text. */

/* Three user-approved driver colours, no red */
.driver-light--strong { color:#176d4f; }
.driver-light--positive { color:#985d0b; }
.driver-light--neutral { color:#616d73; }
.driver-light--strong .driver-dot, .driver-main--strong .driver-dot { background:#16865d; }
.driver-light--positive .driver-dot, .driver-main--positive .driver-dot { background:#db982c; }
.driver-light--neutral .driver-dot, .driver-main--neutral .driver-dot { background:#87949a; }
.driver-main--strong { border-left-color:#16865d;background:#f4fbf6; }
.driver-main--positive { border-left-color:#db982c;background:#fffaf0; }
.driver-main--neutral { border-left-color:#87949a;background:#f6f8f9; }
.driver-table td.driver-cal { min-width:172px; }
.driver-light { white-space:normal; text-align:right; }
.driver-main-name { font-size:20px; }
.driver-method { line-height:1.55; }
@media(max-width:520px) {
  .driver-table td.driver-cal { min-width:104px; }
  .driver-light { font-size:10.5px; line-height:1.35; }
}

/* Breakout always shows monitored population, including zero-alert weeks */
.bk-meaning { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.bk-meaning h3 { font-size:19px; font-weight:750; }
.bk-meaning p { margin-top:9px; font-size:15px; line-height:1.55; color:var(--grey); }
.bk-coverage { margin-top:22px; }
.bk-coverage-title { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.bk-coverage-title h2 { font-size:25px; margin-top:4px; }
.bk-coverage-stat { font-size:15px; font-weight:800; border:1px solid #cddde1;
  background:#f3fafb; border-radius:999px; padding:8px 15px; white-space:nowrap; }
.bk-brand-list { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:20px; }
.bk-brand { border:1px solid #d5dee0; border-radius:5px; padding:8px 12px;
  background:#f8fafb; color:#263b40; font-weight:620; font-size:14px; }
.bk-coverage-foot { margin-top:20px; padding-top:13px; border-top:1px solid var(--line); }

/* The analytical Case Study is one globally featured, evidence-linked case,
   deliberately chosen instead of a generic per-category score echo. */
.case-rich { display:grid; gap:22px; }
.case-hero { background:#f8fbfc; border-top:4px solid #0b9ec4; }
.case-hero h2 { max-width:900px; font-size:clamp(25px,3vw,37px); line-height:1.17; margin:9px 0 13px; }
.case-lead { color:#42525a; line-height:1.65; font-size:17px; max-width:970px; }
.case-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-top:25px; }
.case-kpis>div { padding:16px; border:1px solid #d9e4e5; background:#fff; border-radius:8px; }
.case-kpi-value { display:block; font-size:clamp(21px,2.5vw,32px); font-weight:800; letter-spacing:-.04em; line-height:1.15; font-variant-numeric:tabular-nums; }
.case-kpis>div>span:last-child { display:block; margin-top:8px; color:#65737a; font-size:12px; font-weight:650; }
.case-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:22px; align-items:start; }
.case-grid h2,.case-rich>.card h2 { margin-top:5px; font-size:23px; }
.case-comparison { width:100%; border-collapse:collapse; margin-top:18px; font-variant-numeric:tabular-nums; }
.case-comparison th { font-size:12px; text-align:left; color:#65737a; border-bottom:1.5px solid #bac9ce; padding:10px 5px; }
.case-comparison td { padding:12px 5px; border-bottom:1px solid #e6e9ea; font-size:15px; }
.case-comparison .rt { text-align:right; }
.case-subject { background:#e9f6f9; font-weight:800; }
.case-grid .small.muted { margin-top:13px; font-size:13px; line-height:1.5; }
.case-insights { display:grid; gap:18px; margin-top:18px; }
.case-insight { display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; }
.case-insight-number { color:#007e9e; font-size:17px; font-weight:850; }
.case-insight h3 { font-size:16px; font-weight:750; }
.case-insight p { margin-top:5px; font-size:14px; line-height:1.55; color:#5c6c72; }
.case-family-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:17px; }
.case-family-item { border:1px solid #dce4e5; border-radius:7px; padding:18px; background:#fcfdfd; }
.case-family-item>div { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.case-family-item h3 { font-size:17px; }
.case-family-item p { margin-top:11px; font-size:14px; line-height:1.55; color:#56666c; }
.case-family-band { border-radius:5px; font-weight:700; padding:6px 8px; font-size:11px; }
.case-band-strong { background:#e5f5ec; color:#176d4f; }
.case-band-positive { background:#fff2d8; color:#995e0a; }
.case-band-grey { background:#edf1f2; color:#56636b; }
.case-evidence-list { margin-top:17px; display:grid; }
.case-evidence { display:grid; grid-template-columns:85px minmax(0,1fr); gap:14px; padding:17px 0; border-top:1px solid #e0e6e7; }
.case-date { font-size:13px; font-weight:800; color:#007fa1; }
.case-evidence .card-label { margin:0 0 5px; }
.case-evidence h3 { font-size:17px; font-weight:750; }
.case-evidence p:not(.card-label) { margin:7px 0; font-size:14px; line-height:1.6; color:#53636a; }
.case-evidence a { font-weight:700; color:var(--blue-text); text-decoration:underline; font-size:14px; }
.case-conclusion { border-top:4px solid #0b9ec4; }
.case-conclusion>p:not(.card-label) { margin-top:14px; color:#44565d; line-height:1.68; font-size:16px; }
.case-conclusion>.case-limit { border-top:1px solid #e4e8e9; padding-top:12px; font-size:13px !important; }

/* FAQ grouped, searchable by scanning question headings, accessible details */
.faq-layout { display:grid; grid-template-columns:minmax(210px,.65fr) minmax(0,2fr); gap:22px; align-items:start; }
.faq-side { position:sticky; top:16px; }
.faq-side nav { display:grid; gap:6px; margin:13px 0 17px; }
.faq-side nav a { border-radius:5px; padding:9px 10px; font-weight:650; color:#1b5265; text-decoration:none; font-size:14px; }
.faq-side nav a:hover,.faq-side nav a:focus-visible { background:#e8f7fa; }
.faq-side p a { color:#146b87; }
.faq-groups { display:grid; gap:16px; }
.faq-section-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid #dce5e7; }
.faq-section-head h2 { font-size:21px; }
.faq-number { font-weight:900; font-size:14px; color:#008fb2; }
.faq-count { margin-left:auto; font-size:12px; color:#67757b; font-weight:650; }
.faq-entry { border-bottom:1px solid #e5e9ea; }
.faq-entry:last-child { border-bottom:0; }
.faq-entry summary { list-style:none; cursor:pointer; font-weight:740; color:#26363c; padding:16px 22px 16px 0;
  position:relative; font-size:15px; line-height:1.42; }
.faq-entry summary::-webkit-details-marker { display:none; }
.faq-entry summary::after { content:"+"; position:absolute;right:2px;top:13px; font-size:22px; font-weight:450; color:#11748e; }
.faq-entry[open] summary::after { content:"−"; }
.faq-entry summary:focus-visible { outline:2px solid #0da6ce;outline-offset:3px; }
.faq-entry>p { padding:0 20px 18px 0; margin:0; font-size:14px; color:#4d5d64; line-height:1.65; }
@media(max-width:1000px) {
  .case-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-grid { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  .faq-layout { grid-template-columns:1fr; }
  .faq-side { position:static; }
  .faq-side nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-family-grid { grid-template-columns:1fr; }
}
@media(max-width:420px) {
  .case-kpis { gap:9px; }
  .case-kpis>div { padding:12px; }
  .case-kpi-value { font-size:21px; }
  .case-evidence { grid-template-columns:70px minmax(0,1fr); gap:9px; }
  .case-evidence h3 { font-size:15px; }
  .faq-side nav { grid-template-columns:1fr; }
  .bk-brand-list { gap:6px; }
  .bk-brand { font-size:12.5px; padding:6px 8px; }
}


/* 10 Nov high-priority improvements. Three driver lights remain unchanged. */
.driver-negative { border-left:4px solid #586b77; background:#f2f5f6;
  border-radius:6px; padding:13px 15px; margin:16px 0; }
.driver-negative h3 {font-size:19px; margin:5px 0 7px; color:#334854;}
.driver-negative p:not(.card-label) {color:#4e616c; line-height:1.55;font-size:14px;}
.chip--down {color:#725633 !important;background:#f4eadb !important;}
.chip--up {color:#165b70; background:#e6f4f8;}
.rank .bar i.down {background:#ae8855;}
.rank-head .legend {flex-wrap:wrap;gap:5px 12px;}
.rank-head .legend span {white-space:nowrap;font-size:12px;}
.rank-head .legend i.ref-key {width:2px;height:15px;vertical-align:-3px;margin-right:9px;
  background:#47545d;box-shadow:1px 0 #fff;}
.rank .bar-with-ref {position:relative;min-width:0;}
.rank .bar-with-ref .ref-marker {position:absolute;top:3px;bottom:3px;z-index:2;
  background:#42515a;width:2px;pointer-events:none;opacity:.95;}
.ref-note {margin-top:13px;line-height:1.5;}
.next-release-line {padding:8px 12px;margin:0 0 17px;border-left:3px solid #1291b3;background:#f4fafb;}
.case-picker {display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:2px;}
.case-picker button {padding:12px 17px;border:1px solid #c8d9dd;border-radius:7px;background:#fff;
  color:#34515b;font-size:14px;font-weight:760;cursor:pointer;}
.case-picker button.active {background:#143f4e;color:white;border-color:#143f4e;}
.case-picker button:focus-visible {outline:3px solid #12a5cf;outline-offset:3px;}
.case-hero--decline {border-top-color:#b48b45;}
.case-evidence a:hover {text-decoration:underline;}
/* Three distinct roles, explicitly showing which mean enters index centring. */
.bt-explainer {margin-top:20px;}
.bt-explainer h2,.bt-detail-grid h2 {font-size:24px; margin:6px 0 13px;}
.bt-explainer>p:not(.card-label) {max-width:940px;line-height:1.65;color:#52666e;}
.bt-flow {margin:22px 0;display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);
  align-items:stretch;gap:10px;}
.bt-stage {display:flex;gap:12px;background:#f6fafb;border:1px solid #d4e2e6;border-radius:9px;padding:18px;}
.bt-stage-count {font-size:20px;font-weight:850;color:#0089ab;}
.bt-stage h3 {font-size:18px;margin:0 0 6px;line-height:1.3;}
.bt-stage b {font-size:13px;color:#27677a;display:block;line-height:1.4;}
.bt-stage p {font-size:13px;line-height:1.5;color:#5c6b72;margin-top:8px;}
.bt-arrow {align-self:center;justify-self:center;color:#1281a2;font-weight:900;font-size:24px;}
.bt-detail-grid {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.85fr);gap:20px;margin-top:20px;}
.bt-steps {padding-left:22px;margin:18px 0 0;}
.bt-steps li {padding:0 0 13px 5px;font-size:14px;line-height:1.65;color:#516067;}
.bt-steps li strong {color:#182f37;}
.bt-formula {border:1px solid #bed5dd;background:#eef7f9;padding:17px 19px;border-radius:8px;
  margin-top:14px;}
.bt-formula>div {font-size:clamp(16px,2.15vw,25px);font-weight:800;letter-spacing:-.025em;
  color:#143f4e;margin:8px 0;overflow-wrap:anywhere;}
.bt-formula p {font-size:13px;color:#466371;line-height:1.5;}
.alert-sources {margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.alert-source {display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:720;
  color:#156b86 !important;text-decoration:underline !important;}
.alert-source-date {font-size:12px;color:#5f6c73;}
@media(max-width:1000px) {
  .bt-flow {grid-template-columns:1fr;gap:9px;}
  .bt-arrow {transform:rotate(90deg);font-size:18px;}
  .bt-detail-grid {grid-template-columns:1fr;}
}
@media(max-width:520px) {
  .case-picker button {flex:1;padding:9px 8px;font-size:12px;}
  .rank-head .legend span {font-size:11px;}
  .bt-stage {padding:13px;}
  .bt-formula {padding:13px;}
}


/* 10 Nov layout hotfix: the historical .method 2fr/1fr grid compressed the
   three Bradley–Terry stages into its narrow right column on wide screens.
   New method sections are all full-width rows, regardless of viewport. */
.body.method {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.body.method > .mgrid,
.body.method > .bt-explainer,
.body.method > .bt-detail-grid {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.bt-flow {
  min-width: 0;
  width: 100%;
}
.bt-stage {
  min-width: 0;
  box-sizing: border-box;
}
.bt-stage > div:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}
/* Use one stage per row before text becomes too compressed. */
@media (max-width: 1400px) {
  .bt-flow { grid-template-columns: minmax(0, 1fr); }
  .bt-arrow { transform: rotate(90deg); font-size: 18px; }
}


/* Negative comparative evidence remains text-only; the agreed green/orange/grey
   positive-driver indicators are deliberately not extended to a fourth light. */
.driver-weak-note {
  display:block;
  margin:5px 0 0 0;
  color:#52616b;
  font-size:12.5px;
  font-weight:750;
  line-height:1.4;
}