/* Layout and view styles for the Notino six-market dashboard.
   Colours only through design-system tokens (--nt-*). Corners: 2 px controls, 4 px cards, 0-1 px data marks. */
html, body { margin: 0; background: var(--nt-page); }
body { min-height: 100vh; }
[hidden] { display: none !important; }
.page { max-width: var(--nt-content-max, 1600px); margin: 0 auto; padding: var(--nt-space-6) var(--nt-gutter-mobile) var(--nt-space-8); }
.page--foot { padding-top: 0; }
@media (min-width: 768px) { .page { padding-left: var(--nt-gutter); padding-right: var(--nt-gutter); } }
.page:focus { outline: none; }
.skip { position: absolute; left: var(--nt-space-2); top: -60px; z-index: 30; font: inherit; font-size: var(--nt-text-small); background: var(--nt-card); color: var(--nt-ink); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-xs); padding: var(--nt-space-2) var(--nt-space-3); }
.skip:focus { top: var(--nt-space-2); }
@media (max-width: 960px) { .nt-appbar__meta { display: none; } }
@media (max-width: 640px) { .nt-appbar { gap: var(--nt-space-3); } .nt-appbar__product { font-size: var(--nt-text-caption); } }

/* ---------- Navigation: tabs from 1180 px, a Menu button with a grid of views below ---------- */
.nav { background: var(--nt-card); border-bottom: 1px solid var(--nt-line); position: sticky; top: 0; z-index: 10; }
.nav__in { max-width: var(--nt-content-max, 1600px); margin: 0 auto; display: flex; align-items: center; gap: var(--nt-space-3); padding: 0 var(--nt-gutter-mobile); min-height: 48px; }
@media (min-width: 768px) { .nav__in { padding: 0 var(--nt-gutter); } }
.nav__tabs { display: none; gap: var(--nt-space-1); flex-wrap: wrap; }
.tab { font: inherit; font-size: var(--nt-text-small); color: var(--nt-ink-2); background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--nt-space-3) var(--nt-space-3) calc(var(--nt-space-3) - 2px); min-height: 48px; white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--nt-ink); }
.tab[aria-current="page"] { color: var(--nt-ink); border-bottom-color: var(--nt-ink); font-weight: var(--nt-weight-medium); }
.nav__menu { display: inline-flex; align-items: center; gap: var(--nt-space-2); font: inherit; font-size: var(--nt-text-small); font-weight: var(--nt-weight-medium); color: var(--nt-ink); background: var(--nt-card); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-xs); min-height: 36px; padding: 0 var(--nt-space-3); cursor: pointer; }
.nav__menu[aria-expanded="true"] { background: var(--nt-soft); border-color: var(--nt-ink); }
.nav__burger, .nav__burger::before, .nav__burger::after { display: block; width: 14px; height: 2px; background: currentColor; }
.nav__burger { position: relative; }
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; }
.nav__burger::before { top: -5px; }
.nav__burger::after { top: 5px; }
.nav__current { font-size: var(--nt-text-small); font-weight: var(--nt-weight-medium); color: var(--nt-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1180px) { .nav__tabs { display: flex; } .nav__menu, .nav__current, .nav__sheet { display: none !important; } }
.nav__sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--nt-card); border-bottom: 1px solid var(--nt-line); box-shadow: var(--nt-shadow-pop); max-height: calc(100vh - 120px); overflow-y: auto; }
.sheet { max-width: var(--nt-content-max, 1600px); margin: 0 auto; padding: var(--nt-space-3) var(--nt-gutter-mobile) var(--nt-space-4); display: grid; gap: var(--nt-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sheet__b { display: grid; gap: 2px; text-align: left; font: inherit; color: var(--nt-ink); background: var(--nt-card); border: 1px solid var(--nt-line); border-radius: var(--nt-radius-xs); padding: var(--nt-space-2) var(--nt-space-3); cursor: pointer; min-height: 48px; }
.sheet__b:hover { background: var(--nt-soft); }
.sheet__b[aria-current="page"] { background: var(--nt-soft); border-color: var(--nt-ink); box-shadow: inset 0 0 0 1px var(--nt-ink); }
.sheet__l { font-size: var(--nt-text-small); font-weight: var(--nt-weight-medium); }
.sheet__q { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-muted); }

/* ---------- View head: the question, then the answer in one sentence ---------- */
.vhead { display: grid; gap: var(--nt-space-2); margin-bottom: var(--nt-space-5); }
.vhead__kicker { margin: 0; font-size: var(--nt-text-label); line-height: var(--nt-text-label-lh); font-weight: var(--nt-weight-medium); color: var(--nt-muted); }
.vhead .nt-h2 { max-width: 40ch; }
.vhead__lead { max-width: 78ch; color: var(--nt-ink); }
.vhead__lead b { font-weight: var(--nt-weight-regular); }
@media (max-width: 640px) { .vhead .nt-h2 { font-size: var(--nt-text-h3); line-height: 1.25; } .vhead__lead { font-size: var(--nt-text-body); line-height: var(--nt-text-body-lh); } }

.controls { display: flex; flex-wrap: wrap; gap: var(--nt-space-3) var(--nt-space-6); align-items: flex-end; margin-bottom: var(--nt-space-4); }
.ctl { display: grid; gap: var(--nt-space-1); min-width: 0; max-width: 100%; }
.ctl__label { font-size: var(--nt-text-label); line-height: var(--nt-text-label-lh); font-weight: var(--nt-weight-medium); color: var(--nt-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--nt-space-2); }
.nt-segmented button:disabled { color: var(--nt-muted); opacity: .55; cursor: not-allowed; }
.nt-segmented button:not([aria-pressed="true"]):not(:disabled):hover { color: var(--nt-ink); }
@media (max-width: 560px) { .nt-market-chip__name { display: none; } .nt-market-chip { min-width: 44px; justify-content: center; } }

.grid { display: grid; gap: var(--nt-space-4); margin-bottom: var(--nt-space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.grid--main { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .grid--main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.grid > * { min-width: 0; }
.stack { display: grid; gap: var(--nt-space-4); }
.stack > .grid { margin-bottom: 0; }
.section-title { margin: var(--nt-space-8) 0 var(--nt-space-4); }
.stack > .section-title { margin: var(--nt-space-4) 0 0; }

/* ---------- Panels with provenance ---------- */
.panel { display: flex; flex-direction: column; margin-bottom: var(--nt-space-4); scroll-margin-top: 64px; }
.grid > .panel, .stack > .panel { margin-bottom: 0; }
.panel__head { margin-bottom: var(--nt-space-4); display: grid; gap: var(--nt-space-1); }
.panel__head .nt-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-2); }
.panel__sub { margin: 0; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-muted); max-width: 90ch; }
.src { margin-top: auto; padding-top: var(--nt-space-3); border-top: 1px solid var(--nt-line); }
.panel > .src { margin-top: var(--nt-space-4); }
.src > span + span::before { content: none; }
#ad-like, #ad-emotions, #ad-action, #ad-open, #ad-comp, #ad-statements, #ad-barriers { scroll-margin-top: 64px; }
#ad-like:focus, #ad-emotions:focus, #ad-action:focus, #ad-open:focus, #ad-comp:focus, #ad-statements:focus, #ad-barriers:focus { outline: none; }

.note { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-ink-2); margin: 0 0 var(--nt-space-4); }
.panel .note { margin: var(--nt-space-3) 0 0; }
.hint { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-muted); margin: var(--nt-space-2) 0 var(--nt-space-5); }
.muted { color: var(--nt-muted); }
.linkbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 24px; text-align: left; }
.insights { display: grid; gap: var(--nt-space-3); margin: 0; padding: 0; list-style: none; }
.insights li { font-size: var(--nt-text-body); line-height: var(--nt-text-body-lh); color: var(--nt-ink); padding-left: var(--nt-space-5); position: relative; }
.insights li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--nt-ink); }
.insights b { font-weight: var(--nt-weight-medium); }

/* ---------- Market tiles (one KPI strip, tiles split by hairlines) ---------- */
.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles .nt-kpi:nth-child(2) { border-top: 0; } .tiles .nt-kpi:nth-child(even) { border-left: 1px solid var(--nt-line); } }
.mtile { font: inherit; color: inherit; text-align: left; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; gap: var(--nt-space-1); }
.mtile:hover { background: var(--nt-soft); }
.mtile:focus-visible { outline-offset: -2px; }
.mtile__head { display: flex; justify-content: space-between; align-items: center; gap: var(--nt-space-2); margin-bottom: var(--nt-space-2); flex-wrap: wrap; }
.mtile__name { font-size: var(--nt-text-small); color: var(--nt-ink); }
.mtile__cc { font-weight: var(--nt-weight-medium); }
.mtile__rank { font-size: var(--nt-text-small); color: var(--nt-ink-2); }
.mtile__sub { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-ink-2); }
.mtile__meta { display: flex; flex-wrap: wrap; gap: 0 var(--nt-space-3); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-muted); margin-top: var(--nt-space-1); }
@media (max-width: 640px) { .mtile { padding: var(--nt-space-3); } .mtile .nt-kpi__value { font-size: var(--nt-text-kpi-sm); line-height: var(--nt-text-kpi-sm-lh); } }

/* ---------- Legends ---------- */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-2) var(--nt-space-3); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-ink-2); margin: 0 0 var(--nt-space-3); }
.panel > .legend:last-child, .lk + .legend, .sb + .legend, .bf + .legend, .db + .legend, .pb + .legend, .fc + .legend { margin: var(--nt-space-3) 0 0; }
.legend__gap { color: var(--nt-muted); }
.ramp { display: inline-flex; gap: 1px; }
.ramp i { width: 16px; height: 10px; display: inline-block; }
.key { display: inline-flex; align-items: center; gap: var(--nt-space-1); }
.key i { width: 12px; height: 12px; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px var(--nt-line); }

/* ---------- Heatmap tables (scroll inside the panel; first column pinned) ---------- */
.heat-wrap { margin: 0 calc(-1 * var(--nt-space-2)); padding: 0 var(--nt-space-2); }
.nt-table-wrap:focus-visible { outline: 2px solid var(--nt-focus); outline-offset: 2px; }
.heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.heat thead th { font-weight: var(--nt-weight-medium); color: var(--nt-ink-2); text-align: center; padding: var(--nt-space-1) var(--nt-space-1) var(--nt-space-2); vertical-align: bottom; white-space: nowrap; }
.heat th.corner { text-align: left; font-weight: var(--nt-weight-regular); color: var(--nt-muted); font-size: var(--nt-text-caption); white-space: normal; }
.heat tbody th { text-align: left; font-weight: var(--nt-weight-regular); color: var(--nt-ink); min-width: 190px; max-width: 360px; padding: var(--nt-space-1) var(--nt-space-3) var(--nt-space-1) 0; vertical-align: middle; position: sticky; left: 0; background: var(--nt-card); z-index: 1; }
.heat td { text-align: center; padding: var(--nt-space-2) var(--nt-space-1); font-variant-numeric: tabular-nums; font-weight: var(--nt-weight-medium); min-width: 64px; border-radius: 1px; white-space: nowrap; }
.heat td small { display: block; font-weight: var(--nt-weight-regular); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
.heat td.na { background: var(--nt-soft); color: var(--nt-muted); font-weight: var(--nt-weight-regular); }
.heat td.plain { background: var(--nt-soft); color: var(--nt-ink); }
.heat .sub { display: block; font-weight: var(--nt-weight-regular); color: var(--nt-muted); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
.heat .sm { display: none; }
.heat th button { font: inherit; color: inherit; background: none; border: 0; padding: var(--nt-space-1); cursor: pointer; border-radius: var(--nt-radius-xs); min-height: 32px; }
.heat th button:hover { background: var(--nt-soft); }
.heat th[aria-sort="descending"] button { box-shadow: inset 0 -2px 0 var(--nt-ink); }
.heat .is-notino { color: var(--nt-ink); box-shadow: inset 0 -2px 0 var(--nt-data-notino); padding-bottom: 2px; }
.rev-note { display: block; color: var(--nt-muted); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
@media (max-width: 720px) {
  .heat .lg { display: none; } .heat .sm { display: inline; }
  .heat tbody th { min-width: 132px; max-width: 168px; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
  .heat td { min-width: 46px; padding: var(--nt-space-2) 2px; font-size: var(--nt-text-caption); }
}

/* ---------- Plain tables ---------- */
.nt-table tbody th { text-align: left; font-weight: var(--nt-weight-regular); padding: var(--nt-space-2) var(--nt-space-3); border-bottom: 1px solid var(--nt-line); position: static; background: transparent; white-space: normal; color: var(--nt-ink); }
.nt-table tr[data-entity="notino"] th { background: var(--nt-accent-tint); font-weight: var(--nt-weight-medium); box-shadow: inset 3px 0 0 var(--nt-data-notino); }
.nt-table tr.is-cur th, .nt-table tr.is-cur td { background: var(--nt-soft); }
.nt-table td { white-space: nowrap; }
.nt-table .conv { color: var(--nt-ink-2); }
.nt-table th.conv { white-space: normal; min-width: 88px; }
.ft th.num { white-space: normal; min-width: 76px; vertical-align: bottom; }
.kt td:nth-child(4) { white-space: normal; }

/* ---------- Ranked lists ---------- */
.rank { gap: var(--nt-space-3); }
.nt-rank__bar { display: block; }
.nt-rank__name .nt-tag { margin-left: var(--nt-space-1); font-weight: var(--nt-weight-regular); }
.minis { display: grid; gap: var(--nt-space-5) var(--nt-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.minis--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mini { min-width: 0; }
.mini__t { margin: 0 0 var(--nt-space-2); font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); font-weight: var(--nt-weight-medium); }
.mini .nt-rank__name { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }

/* ---------- Market bars ---------- */
.mbars { display: grid; gap: var(--nt-space-2); }
.mbar { display: grid; grid-template-columns: 88px minmax(0, 1fr) 96px; gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.mbar__track { height: 14px; background: var(--nt-soft); }
.mbar__fill { display: block; height: 100%; background: var(--nt-data-other); }
.mbar.is-sel .mbar__fill { background: var(--nt-ink); }
.mbar.is-sel .mbar__name { font-weight: var(--nt-weight-medium); }
.mbar__val { font-weight: var(--nt-weight-medium); text-align: right; white-space: nowrap; }
.mbar__val small { display: block; font-weight: var(--nt-weight-regular); color: var(--nt-muted); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }

/* ---------- Diverging Likert bars ---------- */
.lk { display: grid; gap: var(--nt-space-2); }
.lk__row { display: grid; grid-template-columns: 124px minmax(0, 1fr) 96px; gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.lk__label small, .sb__label small, .bf__label small { display: block; color: var(--nt-muted); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
.lk__track { position: relative; height: 28px; }
.lk__track--na, .sb__track--na { display: flex; align-items: center; justify-content: center; color: var(--nt-muted); font-size: var(--nt-text-caption); }
.lk__seg { position: absolute; z-index: 1; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: var(--nt-text-caption); font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; }
.lk__zero { position: absolute; z-index: 0; left: 50%; top: -5px; bottom: -5px; width: 1px; background: var(--nt-ink); }
.lk__end, .sb__end, .bf__end { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--nt-ink-2); }
.lk__end b, .sb__end b { color: var(--nt-ink); font-weight: var(--nt-weight-medium); }
.lk__head, .sb__head, .bf__head { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-muted); }
.lk__dir { display: flex; justify-content: space-between; }
.lk__ticks { position: relative; height: 16px; font-size: var(--nt-text-caption); color: var(--nt-muted); }
.lk__ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 560px) { .lk__seg, .sb__seg { font-size: 0; } .lk__row { grid-template-columns: 78px minmax(0, 1fr) 76px; gap: var(--nt-space-2); } .lk__ticks span:nth-child(2), .lk__ticks span:nth-child(4) { display: none; } }

/* ---------- 100 % stacked bars ---------- */
.sb { display: grid; gap: var(--nt-space-2); }
.sb__row { display: grid; grid-template-columns: 124px minmax(0, 1fr) 64px; gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.sb__track { display: flex; height: 28px; overflow: hidden; background: var(--nt-soft); }
.sb__seg { display: flex; align-items: center; justify-content: center; font-size: var(--nt-text-caption); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; white-space: nowrap; }
@media (max-width: 560px) { .sb__row { grid-template-columns: 78px minmax(0, 1fr) 48px; gap: var(--nt-space-2); } }

/* ---------- Butterfly (emotions) ---------- */
.bf { display: grid; gap: var(--nt-space-2); }
.bf__row { display: grid; grid-template-columns: 124px minmax(0, 1fr) minmax(0, 1fr) 52px; align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); column-gap: 0; }
.bf__label { padding-right: var(--nt-space-3); }
.bf__h { padding-left: var(--nt-space-2); }
.bf__h--neg { text-align: right; padding: 0 var(--nt-space-2) 0 0; }
.bf__half { display: flex; align-items: center; gap: var(--nt-space-1); min-height: 24px; border-left: 1px solid var(--nt-ink); }
.bf__half--neg { justify-content: flex-end; border-left: 0; }
.bf__bar { display: block; height: 18px; }
.bf__bar--neg { background: var(--nt-data-violine); }
.bf__bar--pos { background: var(--nt-data-chameleon); }
.bf__val { font-size: var(--nt-text-caption); font-variant-numeric: tabular-nums; color: var(--nt-ink-2); white-space: nowrap; }
.bf__na { color: var(--nt-muted); font-size: var(--nt-text-caption); padding-left: var(--nt-space-2); }
.bf__end { padding-left: var(--nt-space-2); color: var(--nt-ink); font-weight: var(--nt-weight-medium); }
.bf__head .bf__half, .bf__head .bf__h { border: 0; }
@media (max-width: 560px) { .bf__row { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr) 44px; } }

/* ---------- Dumbbell (clients vs non-clients) ---------- */
.db { display: grid; gap: var(--nt-space-2); }
.db__row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1.4fr) 84px; gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
.db__label { color: var(--nt-ink); }
.db__track { position: relative; height: 22px; }
.db__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--nt-line); }
.db__line { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); background: var(--nt-ink-2); }
.db__dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--nt-card); }
.db__dot--a { background: var(--nt-data-sky); }
.db__dot--b { background: var(--nt-data-other); }
.db__diff { text-align: right; font-variant-numeric: tabular-nums; color: var(--nt-muted); white-space: nowrap; }
.db__diff small { display: block; }
.db__diff.is-sig { color: var(--nt-ink); font-weight: var(--nt-weight-medium); }
.db__diff.is-sig small { font-weight: var(--nt-weight-regular); color: var(--nt-ink-2); }
.db__na { display: flex; align-items: center; color: var(--nt-muted); background: none; }
.db__ticks { position: relative; height: 16px; color: var(--nt-muted); }
.db__ticks span { position: absolute; transform: translateX(-50%); }
.db__ticks span:first-child { transform: none; }
.db__ticks span:last-child { transform: translateX(-100%); }

/* ---------- Paired bars (Notino vs competitor ads) ---------- */
.pb { display: grid; gap: var(--nt-space-3); }
.pb__row { display: grid; grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.6fr); gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
.pb__bars { display: grid; gap: 3px; }
.pb__line { display: flex; align-items: center; gap: var(--nt-space-2); }
.pb__fill { display: block; height: 11px; flex: none; }
.pb__fill--a { background: var(--nt-data-notino); }
.pb__fill--b { background: var(--nt-data-other); }
.pb__line { max-width: calc(100% - 40px); }
.pb__val { font-variant-numeric: tabular-nums; color: var(--nt-ink-2); white-space: nowrap; }

/* ---------- Funnel chart ---------- */
.fc { display: grid; gap: var(--nt-space-4); }
.fc__stage { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.fc__bars { display: grid; gap: 3px; }
.fc__line { display: flex; align-items: center; gap: var(--nt-space-2); max-width: calc(100% - 40px); }
.fc__fill { display: block; height: 12px; flex: none; }
.fc__val { font-size: var(--nt-text-caption); font-variant-numeric: tabular-nums; color: var(--nt-ink-2); white-space: nowrap; }
@media (max-width: 560px) { .fc__stage { grid-template-columns: 96px minmax(0, 1fr); gap: var(--nt-space-2); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); } }

/* ---------- Scatter ---------- */
.scatter { margin: 0 0 var(--nt-space-4); }
.scatter svg { width: 100%; height: auto; display: block; font-family: var(--nt-font-sans); }
.scatter .gl { stroke: var(--nt-line); stroke-width: 1; }
.scatter .axis { stroke: var(--nt-line-strong); stroke-width: 1; }
.scatter .tick { fill: var(--nt-muted); font-size: 12px; }
.scatter .alabel { fill: var(--nt-ink-2); font-size: 12px; }
.scatter .pt circle { fill: var(--nt-data-other); }
.scatter .pt text { fill: var(--nt-ink-2); font-size: 13px; }
.scatter .pt.is-sel circle { fill: var(--nt-ink); }
.scatter .pt.is-sel text { fill: var(--nt-ink); font-weight: 500; }

/* ---------- Lists, definitions, in-page jumps ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--nt-space-5); }
.split .nt-label { margin: 0 0 var(--nt-space-2); }
.kv { font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); margin: 0; padding-left: var(--nt-space-5); display: grid; gap: var(--nt-space-2); }
.kv li { padding-left: var(--nt-space-1); }
.kv li > span { display: inline; }
.kv__v { font-weight: var(--nt-weight-medium); margin-left: var(--nt-space-2); white-space: nowrap; }
.kv--plain { padding-left: var(--nt-space-4); }
.defs { margin: 0; display: grid; grid-template-columns: minmax(140px, 0.6fr) minmax(0, 1.4fr); gap: var(--nt-space-2) var(--nt-space-4); font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.defs dt { font-weight: var(--nt-weight-medium); }
.defs dd { margin: 0; color: var(--nt-ink-2); }
@media (max-width: 560px) { .defs { grid-template-columns: 1fr; } .defs dd { margin-bottom: var(--nt-space-2); } }
.jump { display: flex; flex-wrap: wrap; gap: var(--nt-space-2); margin: 0 0 var(--nt-space-5); }
.jump__b { font: inherit; font-size: var(--nt-text-caption); color: var(--nt-ink); background: var(--nt-card); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-xs); min-height: 28px; padding: 0 var(--nt-space-3); cursor: pointer; }
.jump__b:hover { background: var(--nt-soft); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Details tables, narrow charts, phone hints ---------- */
.dt { margin-top: var(--nt-space-3); font-size: var(--nt-text-small); }
.dt summary { cursor: pointer; color: var(--nt-ink); text-decoration: underline; text-underline-offset: 2px; min-height: 24px; display: inline-flex; align-items: center; }
.dt .nt-table-wrap { margin-top: var(--nt-space-2); }
.dt .nt-table th.num { white-space: normal; min-width: 72px; vertical-align: bottom; }
.narrow { max-width: 960px; }
.swipe { display: none; margin: 0 0 var(--nt-space-1); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-ink-2); text-align: right; align-items: center; justify-content: flex-end; gap: 4px; }
.swipe.is-on { display: flex; }

/* Strong Pink means only Notino in this dashboard (brief): selection and keyboard focus are black/white, not pink. */
.nt-market-chip[aria-pressed="true"] { background: var(--nt-soft); border-color: var(--nt-ink); box-shadow: inset 0 0 0 1px var(--nt-ink); }
.nt-market-chip[aria-pressed="true"] .nt-market-chip__name { color: var(--nt-ink); }
.nt-root :focus-visible { outline-color: var(--nt-ink); }

/* ---------- Market flags: 4:3 tiles, sharp corners, a 1 px edge so white stripes hold on white and black surfaces ---------- */
.flag { display: inline-block; flex: none; border-radius: 0; outline: 1px solid rgb(0 0 0 / .16); outline-offset: -1px; object-fit: cover; }
.flag--sm { width: 16px; height: 12px; vertical-align: -1px; margin-right: 6px; }
.flag--lg { width: 20px; height: 15px; vertical-align: -2px; margin-right: 8px; }
:root[data-theme="dark"] .flag { outline-color: rgb(255 255 255 / .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flag { outline-color: rgb(255 255 255 / .22); } }
.fl { white-space: nowrap; }
.nt-market-chip .flag { margin-right: 0; }
.mtile__name .flag { margin-right: 6px; }
/* table headers: flag centred above the market name or code */
.heat thead .flag, .nt-table thead .flag { display: block; margin: 0 auto 4px; }
.nt-table thead th.num .flag { margin: 0 0 4px auto; }
.scatter .fedge { fill: none; stroke: rgb(0 0 0 / .16); stroke-width: 1; }
:root[data-theme="dark"] .scatter .fedge { stroke: rgb(255 255 255 / .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scatter .fedge { stroke: rgb(255 255 255 / .22); } }

/* ---------- Significance marks, small bases ---------- */
.sig { display: inline-block; margin-left: 3px; font-size: 12px; line-height: 1; vertical-align: 1px; }
.sig--strong { font-weight: var(--nt-weight-medium); }
.sig--up { color: var(--nt-up); }
.sig--down { color: var(--nt-down); }
.heat td .sig { color: inherit; }
.heat td .sig--up, .heat td .sig--down { text-shadow: none; }
.heat td small.smalln { color: inherit; opacity: .85; font-style: normal; }
.nt-table td.is-sig { color: var(--nt-ink); font-weight: var(--nt-weight-medium); }
.bench td .sig { color: var(--nt-down); }
.nt-rank__value .sig { font-size: .7em; }

/* ---------- Storyboard: timeline and frames ---------- */
.sb-video { display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: var(--nt-inverse); margin: 0 0 var(--nt-space-4); }
.tl { margin: 0 0 var(--nt-space-3); }
.tl__beats { position: relative; height: 28px; background: var(--nt-soft); }
.tl__beat { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 var(--nt-space-2); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: #000000; background: var(--nt-brand-light-sky-blue); border-right: 2px solid var(--nt-card); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl__beat:nth-child(2) { background: var(--nt-brand-light-nude); }
.tl__beat:nth-child(3) { background: var(--nt-brand-chameleon-skin); }
.tl__beat:nth-child(4) { background: var(--nt-brand-yellow-dragon); }
.tl__ticks { position: relative; height: 16px; font-size: var(--nt-text-caption); color: var(--nt-muted); }
.tl__ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tl__ticks span:first-child { transform: none; }
.tl__ticks span:last-child { transform: translateX(-100%); }
.sbgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--nt-space-2); margin: 0 0 var(--nt-space-5); }
@media (max-width: 900px) { .sbgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl__beats { height: 40px; } .tl__beat { font-size: var(--nt-text-caption); padding: 0 2px; white-space: normal; line-height: 1.15; } }
.sbf { margin: 0; }
.sbf img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sbf figcaption { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-ink-2); margin-top: var(--nt-space-1); }
.sbf figcaption b { font-weight: var(--nt-weight-medium); color: var(--nt-ink); margin-right: 2px; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }

/* ====================================================================== 9.5 release: icons, context, decisions, accessibility, print */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Icons: lucide outline, stroke 1.5, currentColor; decorative (a text label always sits next to them) */
.ic { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 6px; }
.ic--16 { width: 16px; height: 16px; }
.ic--20 { width: 20px; height: 20px; vertical-align: -4px; }
.ic--28 { width: 28px; height: 28px; }
.checks .ic, .ctx__v .ic, .panel__ic .ic, .gloss .ic, .term .ic, .abtn--t .ic, .verdict .ic { margin-right: 0; }

/* Skip links, app bar actions */
.skips .skip + .skip:focus { left: 180px; }
.nt-appbar :focus-visible { outline-color: var(--nt-on-inverse); }
.actions { display: flex; align-items: center; gap: var(--nt-space-2); }
.abtn { display: inline-flex; align-items: center; gap: 0; font: inherit; font-size: var(--nt-text-caption); color: var(--nt-on-inverse); background: transparent; border: 1px solid var(--nt-grey-600); border-radius: var(--nt-radius-xs); min-height: 32px; padding: 0 var(--nt-space-2); cursor: pointer; }
.abtn:hover { border-color: var(--nt-on-inverse); }
.abtn .ic { margin-right: 6px; }
.abtn--t { min-width: 32px; justify-content: center; padding: 0 6px; }
.abtn--t .ic { margin: 0; }
.themes { display: inline-flex; gap: 2px; }
.abtn[aria-checked="true"] { background: var(--nt-on-inverse); color: var(--nt-inverse); border-color: var(--nt-on-inverse); }
.share { position: relative; }
.share__m { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; display: grid; background: var(--nt-card); color: var(--nt-ink); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-sm); box-shadow: var(--nt-shadow-pop); padding: var(--nt-space-1); }
.share__i { display: flex; align-items: center; font: inherit; font-size: var(--nt-text-small); color: var(--nt-ink); background: none; border: 0; text-align: left; padding: var(--nt-space-2) var(--nt-space-3); min-height: 40px; border-radius: var(--nt-radius-xs); cursor: pointer; }
.share__i:hover, .share__i:focus-visible { background: var(--nt-soft); }
@media (max-width: 640px) { .abtn > span:not(.vh) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .abtn .ic { margin: 0; } }

/* Navigation: agenda sections and icons */
.nav__tabs { align-items: center; }
.tab { display: inline-flex; align-items: center; padding-left: var(--nt-space-2); padding-right: var(--nt-space-2); }
.tab .ic { margin-right: 6px; color: var(--nt-muted); }
.tab[aria-current="page"] .ic { color: var(--nt-ink); }
.nav__sec { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 2px 0 var(--nt-space-3); border-radius: 50%; background: var(--nt-soft); color: var(--nt-ink-2); font-size: var(--nt-text-caption); font-weight: var(--nt-weight-medium); flex: none; }
.sheet__sec { grid-column: 1 / -1; font-size: var(--nt-text-label); font-weight: var(--nt-weight-medium); color: var(--nt-muted); margin-top: var(--nt-space-2); }
.sheet__b { grid-template-columns: auto 1fr; column-gap: var(--nt-space-2); align-items: start; }
.sheet__b .ic { grid-row: 1 / span 2; margin-top: 2px; }
.nav__current { display: inline-flex; align-items: center; }

/* Context bar: sticky under the navigation; what is shown, how many tests, intervals, reset */
.ctx { position: static; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-2) var(--nt-space-4); background: color-mix(in srgb, var(--nt-page) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--nt-line); margin: calc(-1 * var(--nt-space-6)) calc(-1 * var(--nt-gutter-mobile)) var(--nt-space-5); padding: var(--nt-space-2) var(--nt-gutter-mobile); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-ink-2); }
@media (min-width: 768px) { .ctx { margin-left: calc(-1 * var(--nt-gutter)); margin-right: calc(-1 * var(--nt-gutter)); padding-left: var(--nt-gutter); padding-right: var(--nt-gutter); } }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .ctx { background: var(--nt-page); } }
.ctx__v { display: inline-flex; align-items: center; gap: var(--nt-space-2); color: var(--nt-ink); }
.ctx__v b { font-weight: var(--nt-weight-medium); }
.ctx__v .ic { margin: 0; }
.ctx__f { color: var(--nt-ink-2); }
.ctx__t { display: inline-flex; align-items: center; }
.ctx__a { display: inline-flex; flex-wrap: wrap; gap: var(--nt-space-2); margin-left: auto; }
.ctx__b { display: inline-flex; align-items: center; font: inherit; font-size: var(--nt-text-caption); color: var(--nt-ink); background: var(--nt-card); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-xs); min-height: 32px; padding: 0 var(--nt-space-2); cursor: pointer; }
.ctx__b[aria-pressed="true"] { background: var(--nt-soft); border-color: var(--nt-ink); }
.ctx__b:hover { background: var(--nt-soft); }

/* Filters: a row on desktop, a one-line summary on phones */
.filters { margin-bottom: var(--nt-space-4); }
.filters__s { display: none; list-style: none; align-items: center; gap: var(--nt-space-2); min-height: 44px; padding: 0 var(--nt-space-3); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-xs); background: var(--nt-card); color: var(--nt-ink); font-size: var(--nt-text-small); cursor: pointer; }
.filters__s::-webkit-details-marker { display: none; }
.filters__l { font-weight: var(--nt-weight-medium); }
.filters__now { color: var(--nt-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.filters__chev { margin-left: auto; transition: transform .15s; }
.filters[open] .filters__chev { transform: rotate(180deg); }
.filters > .controls { margin-bottom: 0; }
@media (max-width: 640px) {
  .filters__s { display: flex; }
  .filters[open] > .controls { margin-top: var(--nt-space-3); }
  .nt-segmented button, .nt-market-chip { min-height: 44px; }
}
@media (min-width: 641px) { .filters > summary { display: none; } }
.ctl__why { font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-muted); display: inline-flex; align-items: center; max-width: 60ch; }
/* Segmented controls and chips as radio groups (same look as the design system's pressed state) */
.nt-segmented button { display: inline-flex; align-items: center; }
.nt-segmented button[aria-checked="true"] { background: var(--nt-card); color: var(--nt-ink); font-weight: var(--nt-weight-medium); box-shadow: var(--nt-shadow-card); }
.nt-segmented button[aria-disabled="true"] { color: var(--nt-muted); opacity: .55; cursor: not-allowed; }
.nt-segmented button:not([aria-checked="true"]):not([aria-disabled="true"]):hover { color: var(--nt-ink); }
.nt-market-chip[aria-checked="true"] { background: var(--nt-soft); border-color: var(--nt-ink); box-shadow: inset 0 0 0 1px var(--nt-ink); }
.nt-market-chip[aria-checked="true"] .nt-market-chip__name { color: var(--nt-ink); }

/* View head */
.vhead__kicker { display: flex; align-items: center; gap: var(--nt-space-2); }
.vhead__kicker .ic { margin: 0; color: var(--nt-ink); }
.vhead__sec { color: var(--nt-muted); }
.vhead .nt-h2 { max-width: 78ch; }
.panel__head .nt-card-title { flex-wrap: nowrap; align-items: flex-start; }
.panel__ic { display: inline-flex; flex: none; margin-top: 1px; }
.panel__ic .ic { margin: 0; }
.panel__t { flex: 1; min-width: 0; }
.gloss, .term { font: inherit; color: var(--nt-ink-2); background: none; border: 0; padding: 2px; cursor: help; border-radius: var(--nt-radius-xs); display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; justify-content: center; }
.gloss .ic, .term .ic { margin: 0; }
.gloss:hover, .term:hover { color: var(--nt-ink); background: var(--nt-soft); }
.term { text-decoration: underline dotted; text-underline-offset: 3px; }
.term__i { margin-left: 2px; }

/* "What it means" strip and the Overview band */
.means { display: flex; gap: var(--nt-space-2); align-items: flex-start; margin: var(--nt-space-4) 0 0; padding: var(--nt-space-3); background: var(--nt-brand-yellow-dragon); color: #000000; border-radius: var(--nt-radius-xs); font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.means .ic { margin: 2px 0 0; }
.means b { font-weight: var(--nt-weight-medium); }
.means .linkbtn { color: #000000; }
.band { background: var(--nt-brand-light-nude); color: #000000; border-radius: var(--nt-radius-sm); padding: var(--nt-space-5); margin: 0 0 var(--nt-space-5); }
.band__head { display: grid; gap: var(--nt-space-2); justify-items: start; margin-bottom: var(--nt-space-4); }
.band__head .nt-h3 { margin: 0; color: #000000; }
.band__sub { margin: 0; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: #2B2B2B; }
.band .insights li { color: #000000; padding-left: 0; }
.band .linkbtn { color: #000000; font-weight: var(--nt-weight-medium); }
.insights li.has-ic { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--nt-space-3); padding-left: 0; }
.insights li.has-ic::before { content: none; }
.insights__i { margin: 2px 0 0; }
.ins__more { margin-top: var(--nt-space-1); font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.ins__more > summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; display: inline-flex; align-items: center; }
.ins__more > p { margin: var(--nt-space-1) 0 0; max-width: 72ch; }
.band .nt-tag-black .ic { margin-right: 4px; }

/* Verdicts and decision tables */
.verdict { display: inline-flex; align-items: center; gap: 4px; font-size: var(--nt-text-caption); font-weight: var(--nt-weight-medium); padding: 2px 8px 2px 6px; border-radius: var(--nt-radius-xs); white-space: nowrap; border: 1px solid currentColor; }
.verdict .ic { margin: 0; }
.verdict--works { color: var(--nt-up); }
.verdict--mixed { color: var(--nt-ink-2); }
.verdict--weak { color: var(--nt-down); }
.dec td { vertical-align: top; }
.dec td small { display: block; color: var(--nt-muted); font-size: var(--nt-text-caption); white-space: normal; max-width: 160px; margin-left: auto; }
.dec td .is-sig { font-weight: var(--nt-weight-medium); color: var(--nt-ink); }
.dec__say { font-size: var(--nt-text-caption); color: var(--nt-ink-2); }
.dec__note { display: block; margin-top: 2px; font-size: var(--nt-text-caption); color: var(--nt-ink-2); }
.verdict__b { font-weight: var(--nt-weight-regular, 400); }
.dec td:last-child { white-space: normal; }
.colbtn { font: inherit; color: inherit; background: none; border: 0; padding: var(--nt-space-1); cursor: pointer; border-radius: var(--nt-radius-xs); min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
.colbtn:hover { background: var(--nt-soft); }
.mtile__v { color: var(--nt-ink-2); }
.nt-tag-black .ic, .nt-tag .ic { margin-right: 4px; vertical-align: -3px; }
.nt-kpi__label .ic { margin-right: 4px; }

/* Market brief */
.brief { display: grid; gap: var(--nt-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); margin-bottom: var(--nt-space-4); }
.brief__card { margin: 0; }
.bk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--nt-space-3); padding: var(--nt-space-2) 0; border-bottom: 1px solid var(--nt-line); font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.bk__l { color: var(--nt-ink-2); display: inline-flex; align-items: center; }
.bk__v { text-align: right; font-weight: var(--nt-weight-medium); font-variant-numeric: tabular-nums; color: var(--nt-ink); }
.bk__v small { font-weight: var(--nt-weight-regular); color: var(--nt-muted); }
.bk__s { grid-column: 1 / -1; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-muted); }
.brief__more { margin: var(--nt-space-3) 0 0; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.brief__verdict { display: flex; align-items: center; gap: var(--nt-space-2); margin: 0 0 var(--nt-space-3); font-size: var(--nt-text-small); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nt-space-2); font-size: var(--nt-text-small); }
.checks li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--nt-space-2); align-items: center; }
.checks .ic { margin: 0; }
.checks .is-pass .ic { color: var(--nt-up); }
.checks .is-fail .ic { color: var(--nt-down); }
.checks b { font-weight: var(--nt-weight-medium); font-variant-numeric: tabular-nums; }

/* Creative summary above the storyboard */
.cs { list-style: none; margin: 0 0 var(--nt-space-4); padding: 0; display: grid; gap: var(--nt-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cs li { display: grid; grid-template-columns: 24px 1fr; gap: var(--nt-space-2); font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); padding: var(--nt-space-3); background: var(--nt-soft); border-radius: var(--nt-radius-xs); }
.cs .ic { margin: 2px 0 0; }
.cs b { font-weight: var(--nt-weight-medium); }

/* Paired benchmark dumbbell, range dots, funnel gap chart, size x ownership */
.bd, .rd, .fg, .ss { display: grid; gap: var(--nt-space-2); }
.bd__row, .rd__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); min-height: 40px; }
.bd__label small { display: block; color: var(--nt-muted); font-size: var(--nt-text-caption); }
.bd__track, .rd__track, .fg__track { position: relative; height: 28px; }
.bd__track::before, .rd__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--nt-line); }
.bd__line { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); background: var(--nt-ink-2); }
.bd__dot, .rd__dot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--nt-card); }
.bd__dot--a { background: var(--nt-data-notino); }
.bd__dot--b { background: var(--nt-data-other); }
.bd__v { position: absolute; top: -6px; transform: translateX(-50%); font-size: var(--nt-text-caption); line-height: 1; color: var(--nt-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd__v--a { top: auto; bottom: -8px; color: var(--nt-ink); }
.bd__gap { text-align: right; font-variant-numeric: tabular-nums; color: var(--nt-ink-2); }
.bd__gap small { display: block; font-size: var(--nt-text-caption); color: var(--nt-muted); }
.bd__gap.is-sig { color: var(--nt-ink); font-weight: var(--nt-weight-medium); }
.bd__gap.is-sig small { font-weight: var(--nt-weight-regular); }
.bd__axis, .rd__axis, .fg__axis { min-height: 0; }
.bd__ticks { position: relative; height: 16px; font-size: var(--nt-text-caption); color: var(--nt-muted); }
.bd__ticks span { position: absolute; transform: translateX(-50%); }
.bd__ticks span:first-child { transform: none; }
.bd__gaph { text-align: right; font-size: var(--nt-text-caption); color: var(--nt-muted); }
.rd__ci { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: var(--nt-line-strong); border-radius: 2px; }
.rd__link { position: absolute; top: 50%; height: 1px; border-top: 1px dashed var(--nt-ink-2); }
.rd__dot--raw { background: var(--nt-card); box-shadow: inset 0 0 0 2px var(--nt-ink-2); width: 12px; height: 12px; }
.rd__dot--adj { background: var(--nt-ink); }
.rd__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--nt-ink-2); white-space: nowrap; }
.rd__v b { color: var(--nt-ink); font-weight: var(--nt-weight-medium); }
.key__ring { background: var(--nt-card) !important; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--nt-ink-2) !important; }
.fg__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 110px; gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); min-height: 36px; }
.fg__track { background: var(--nt-soft); height: 22px; }
.fg__bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--nt-data-notino); }
.fg__tick { position: absolute; top: -4px; bottom: -4px; width: 3px; transform: translateX(-50%); background: var(--nt-ink); }
.fg__tick--rival { background: var(--nt-card); box-shadow: inset 0 0 0 1px var(--nt-ink); width: 5px; }
.fg__v { text-align: right; font-variant-numeric: tabular-nums; }
.fg__v b { font-weight: var(--nt-weight-medium); color: var(--nt-ink); }
.fg__v small { display: block; font-size: var(--nt-text-caption); color: var(--nt-muted); }
.key__tick { width: 3px !important; height: 14px !important; background: var(--nt-ink) !important; box-shadow: none !important; }
.key__tick--rival { width: 5px !important; background: var(--nt-card) !important; box-shadow: inset 0 0 0 1px var(--nt-ink) !important; }
.ss__row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 72px; gap: var(--nt-space-3); align-items: center; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); }
.ss__head { font-size: var(--nt-text-caption); color: var(--nt-muted); align-items: end; }
.ss__label { display: inline-flex; align-items: flex-start; }
.ss__label .ic { margin-top: 2px; }
.ss__cell { display: flex; align-items: center; gap: var(--nt-space-2); }
.ss__bar { display: block; height: 14px; background: var(--nt-data-notino); flex: none; }
.ss__bar--size { background: var(--nt-data-other); }
.ss__v, .ss__rank { font-variant-numeric: tabular-nums; color: var(--nt-ink-2); white-space: nowrap; font-size: var(--nt-text-caption); }
@media (max-width: 640px) {
  .bd__row, .rd__row { grid-template-columns: 76px minmax(0, 1fr) 84px; gap: var(--nt-space-2); }
  .fg__row { grid-template-columns: 96px minmax(0, 1fr) 76px; gap: var(--nt-space-2); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
  .ss__row { grid-template-columns: 1fr 1fr; }
  .ss__label { grid-column: 1 / -1; }
  .ss__head span:first-child { display: none; }
  .ss__rank { grid-column: 1 / -1; }
}

/* Bar-in-cell heatmaps (rankings within a panel): a neutral bar instead of the blue fill */
.heat--bar td.barcell { position: relative; background: var(--nt-soft); text-align: left; padding: var(--nt-space-2) var(--nt-space-2); color: var(--nt-ink); min-width: 72px; }
.barcell__bar { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--nt-data-sky) 35%, var(--nt-card)); }
.barcell--rev .barcell__bar { background: color-mix(in srgb, var(--nt-grey-600) 40%, var(--nt-card)); }
.barcell__v { position: relative; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .barcell__bar { background: var(--nt-seq-3); } .barcell--rev .barcell__bar { background: var(--nt-grey-300); } }
.heat tr.grp th { padding: var(--nt-space-3) 0 var(--nt-space-1); font-weight: var(--nt-weight-medium); color: var(--nt-ink); position: static; background: none; }

/* Inline intervals ("Show intervals", always in print) */
.nt-root .cim { display: none; font-weight: var(--nt-weight-regular); font-size: var(--nt-text-caption); white-space: nowrap; }
.show-ci .nt-root .cim { display: block; }
.show-ci .nt-root .nt-rank__value .cim { display: inline; margin-left: 6px; }
@media (max-width: 560px) { .show-ci .nt-root .heat .cim { white-space: normal; } }

/* Tips: hover, focus and tap */
[data-tip] { cursor: help; }
td[data-tip]:focus-visible, li[data-tip]:focus-visible, [data-tip]:focus-visible { outline: 2px solid var(--nt-ink); outline-offset: -2px; }
.tipbox { position: absolute; z-index: 60; background: var(--nt-inverse); color: var(--nt-on-inverse); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); padding: var(--nt-space-2) var(--nt-space-3); border-radius: var(--nt-radius-xs); box-shadow: var(--nt-shadow-pop); pointer-events: none; }
:root[data-theme="dark"] .tipbox { background: #F2F2F2; color: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tipbox { background: #F2F2F2; color: #000000; } }

/* Scrolling tables: visible hint and a fade edge */
.nt-table-wrap.is-scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.nt-table-wrap.is-scroll:focus-within, .nt-table-wrap.is-scroll:hover { -webkit-mask-image: none; mask-image: none; }

/* Phones: heatmaps become cards (statement as a header, markets as a 3-column grid) */
@media (max-width: 560px) {
  .heat thead { display: none; }
  .heat, .heat tbody { display: block; }
  .heat tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-bottom: var(--nt-space-3); }
  .heat tbody th { grid-column: 1 / -1; position: static; min-width: 0; max-width: none; font-size: var(--nt-text-small); padding: 0 0 2px; }
  .heat td { min-width: 0; font-size: var(--nt-text-small); }
  .heat td::before { content: attr(data-label); display: block; font-size: var(--nt-text-caption); font-weight: var(--nt-weight-regular); opacity: .8; }
  .heat tr.grp { display: block; }
  .heat-wrap.is-scroll { -webkit-mask-image: none; mask-image: none; }
  .heat-wrap + .swipe, .swipe:has(+ .heat-wrap) { display: none; }
}

/* Small-base and significance marks; data weights 300/400/500 only */
.nt-table b, .heat b, .lk__end b, .kv__v { font-weight: var(--nt-weight-medium); }
.lk__seg { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.lk__seg--thin { font-size: 0; }
.bf__end.is-neg { color: var(--nt-down); }
.scatter .exp { stroke: var(--nt-ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.scatter .exp__t { fill: var(--nt-muted); font-size: 12px; }
.scatter .stem { stroke: var(--nt-ink-2); stroke-width: 1.5; }
.scatter .stem.is-sel { stroke: var(--nt-ink); stroke-width: 2.5; }
.scatter .pt text { font-size: 14px; }
@media (max-width: 640px) { .scatter .pt text { font-size: 22px; } .scatter .tick, .scatter .alabel, .scatter .exp__t { font-size: 18px; } }
.panel__sub, .note, .nt-source { color: var(--nt-ink-2); }

/* Confidential footer on every view */
.conf { display: flex; align-items: center; gap: 4px; margin-top: var(--nt-space-6); padding-top: var(--nt-space-3); border-top: 1px solid var(--nt-line); font-size: var(--nt-text-caption); color: var(--nt-ink-2); }

/* The Notino colour ramp tops out one step below the darkest indigo (brand: pastel-led, less heavy) */

/* Dark mode: a diverging ramp for a dark page (text 4.9:1 or more on every step) */
:root[data-theme="dark"] { --nt-div-1: #C9A6F0; --nt-div-2: #A784D0; --nt-div-3: #7A5E9E; --nt-div-4: #4E3F66; --nt-div-5: #2E2E2E; --nt-div-6: #3F4D2A; --nt-div-7: #62783A; --nt-div-8: #8FAA50; --nt-div-9: #B8D27A;
  --nt-div-text-1: #000000; --nt-div-text-2: #000000; --nt-div-text-3: #FFFFFF; --nt-div-text-4: #FFFFFF; --nt-div-text-5: #FFFFFF; --nt-div-text-6: #FFFFFF; --nt-div-text-7: #FFFFFF; --nt-div-text-8: #000000; --nt-div-text-9: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nt-div-1: #C9A6F0; --nt-div-2: #A784D0; --nt-div-3: #7A5E9E; --nt-div-4: #4E3F66; --nt-div-5: #2E2E2E; --nt-div-6: #3F4D2A; --nt-div-7: #62783A; --nt-div-8: #8FAA50; --nt-div-9: #B8D27A;
  --nt-div-text-1: #000000; --nt-div-text-2: #000000; --nt-div-text-3: #FFFFFF; --nt-div-text-4: #FFFFFF; --nt-div-text-5: #FFFFFF; --nt-div-text-6: #FFFFFF; --nt-div-text-7: #FFFFFF; --nt-div-text-8: #000000; --nt-div-text-9: #000000; } }
:root[data-theme="dark"] .lk__seg { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }

/* Print: chart marks kept, the context line printed, intervals inline, controls hidden */
@page { margin: 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .nav, .filters, .controls, .jump, .actions, .skips, .ctx__a, .tipbox, .swipe, .nt-appbar__meta, video { display: none !important; }
  .ctx { position: static; margin: 0 0 var(--nt-space-4); padding: 0 0 var(--nt-space-2); background: none; backdrop-filter: none; }
  .page { padding: 0; max-width: none; }
  .nt-panel, .band { box-shadow: none; }
  .brief__card, .bd__row, .fg__row, tr, .mtile, .means, .insights li { break-inside: avoid; box-shadow: none; }
  .nt-table-wrap { overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .nt-root .cim { display: block !important; }
  .heat-wrap { margin: 0; padding: 0; }
  .ctx__f::before { content: "Showing: "; }
}
.dec th[scope="row"] { min-width: 240px; }
.mtile__head { flex-wrap: nowrap; }
.mtile__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 640px) { .ctx__t { display: none; } .ctx__top { display: none; } .mtile__nm { display: none; } }
@media (max-width: 560px) {
  .dec--mk thead { display: none; }
  .dec--mk, .dec--mk tbody { display: block; }
  .dec--mk tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nt-space-2); padding: var(--nt-space-3) 0; border-bottom: 1px solid var(--nt-line); }
  .dec--mk tbody th { grid-column: 1 / -1; min-width: 0 !important; border: 0; padding: 0; font-weight: var(--nt-weight-medium); }
  .dec--mk td { border: 0; padding: 0; text-align: left; white-space: normal; }
  .dec--mk td::before { content: attr(data-label); display: block; font-size: var(--nt-text-caption); color: var(--nt-muted); }
  .dec--mk td small { margin-left: 0; }
  .dec--mk + .swipe, .swipe:has(+ .nt-table-wrap .dec--mk) { display: none !important; }
}
.scatter .lead { stroke: var(--nt-muted); stroke-width: 1; }
.scatter .pt text { paint-order: stroke; stroke: var(--nt-card); stroke-width: 4px; stroke-linejoin: round; }

/* ---------- round 2: agenda navigation, layout rhythm, collapsed detail, cross-references ---------- */
.nav__tabs { align-items: flex-end; gap: 0; }
.nav__grp { display: grid; padding: 4px var(--nt-space-2) 0; border-left: 1px solid var(--nt-line); }
.nav__grp:first-child { border-left: 0; padding-left: 0; }
.nav__cap { font-size: var(--nt-text-caption); line-height: 16px; color: var(--nt-muted); padding: 0 var(--nt-space-2); white-space: nowrap; }
.nav__grp--plain .nav__cap { visibility: hidden; }
.nav__row { display: flex; }
.nav__grp .tab { min-height: 40px; padding-top: var(--nt-space-2); }
.grid { align-items: start; }
.heat td small.rk1 { font-weight: var(--nt-weight-medium); }
.xref { display: flex; gap: var(--nt-space-3); align-items: flex-start; margin: 0; padding: var(--nt-space-4); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-sm); background: var(--nt-card); font-size: var(--nt-text-body); line-height: var(--nt-text-body-lh); }
.xref .ic { margin: 2px 0 0; }
.more { margin: var(--nt-space-2) 0 0; }
.more > summary { display: inline-flex; align-items: center; gap: var(--nt-space-2); list-style: none; cursor: pointer; font-size: var(--nt-text-small); font-weight: var(--nt-weight-medium); color: var(--nt-ink); min-height: 44px; padding: 0 var(--nt-space-4); border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-xs); background: var(--nt-card); margin-bottom: var(--nt-space-4); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .ic { margin: 0; transition: transform .15s; }
.more[open] > summary .ic { transform: rotate(180deg); }
.lever { display: inline-flex; align-items: flex-start; text-align: left; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); white-space: normal; }
.lever .ic { margin: 0 4px 0 0; flex: none; }
.dec--sl td small { display: block; }
.heat--bar td.barcell { min-width: 84px; }
@media print { .more > summary { display: none; } }

/* ---------- round 3: sticky chrome, focus on pastels, touch targets, phone context ---------- */
.nt-root small { font-size: var(--nt-text-caption); }
.panel, .band, [id^="ad-"], .brief__card { scroll-margin-top: calc(var(--sticky-h, 64px) + 16px); }
@media (min-width: 768px) {
  .nav { position: relative; }   /* in the page flow, but still the anchor of the Menu sheet below it */
  .ctx { position: sticky; top: 0; }
  .jump { position: sticky; top: var(--ctx-h, 49px); z-index: 4; background: var(--nt-page); padding: var(--nt-space-2) 0; margin-bottom: var(--nt-space-4); }
}
@media (max-width: 767px) { .ctx { position: static; } }
@media (min-width: 1180px) and (max-width: 1399px) { .nav__grp .tab .ic { display: none; } .nav__grp .tab { padding-left: 6px; padding-right: 6px; } .nav__cap { padding: 0 6px; } }
.nav__ctx { display: none; }
@media (max-width: 1179px) { .nav__current { gap: 6px; } .nav__ctx { display: inline; font-weight: var(--nt-weight-regular); color: var(--nt-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .nav__ctx::before { content: "· "; } }
.fab-top { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--nt-line-strong); background: var(--nt-card); color: var(--nt-ink); box-shadow: var(--nt-shadow-pop); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fab-top .ic { margin: 0; }
@media (min-width: 768px) { .fab-top { display: none !important; } }
.band :focus-visible, .means :focus-visible, .tp :focus-visible { outline-color: #000000 !important; }
.tipbox { pointer-events: auto; }
@media (max-width: 640px) {
  .abtn, .ctx__b, .jump__b, .colbtn, .dt summary, .ins__more > summary, .share__i { min-height: 44px; }
  .abtn--t { min-width: 44px; }
  .gloss { min-width: 44px; min-height: 44px; }
}
.rob td { white-space: normal; }
.rob td .ic { margin-right: 4px; }
.heat td small.rkr { opacity: .8; }
.mtile__rank small { display: block; font-size: var(--nt-text-caption); color: var(--nt-muted); }
@media print { .screen-only, .fab-top { display: none !important; } .jump { position: static; } }

/* ---------- round 4: deck-matched callouts, scroll padding, calm bars, phone cards ---------- */
/* "What it means" boxes take the pastel of their agenda part, as the deck's panels take their section colour */
#view { --callout: var(--nt-brand-yellow-dragon); }
#view[data-sec="kpi"] { --callout: var(--nt-brand-light-sky-blue); }
#view[data-sec="cep"] { --callout: var(--nt-brand-chameleon-skin); }
#view[data-sec="ad"] { --callout: var(--nt-brand-light-nude); }
#view[data-sec="slogan"] { --callout: var(--nt-brand-pastel-violine); }
.means, .band, .tp { background: var(--callout); color: #000000; }
.tp { display: flex; gap: var(--nt-space-3); align-items: flex-start; margin: 0 0 var(--nt-space-5); padding: var(--nt-space-4); border-radius: var(--nt-radius-sm); font-size: var(--nt-text-body); line-height: var(--nt-text-body-lh); }
.tp .ic { margin: 2px 0 0; }
.tp b { font-weight: var(--nt-weight-medium); }
:root[data-theme="dark"] .means, :root[data-theme="dark"] .band, :root[data-theme="dark"] .tp { background: color-mix(in srgb, var(--callout) 20%, var(--nt-card)); color: var(--nt-ink); box-shadow: inset 3px 0 0 var(--callout); }
:root[data-theme="dark"] .band__head .nt-h3, :root[data-theme="dark"] .band .insights li, :root[data-theme="dark"] .band .linkbtn, :root[data-theme="dark"] .means .linkbtn { color: var(--nt-ink); }
:root[data-theme="dark"] .band__sub { color: var(--nt-ink-2); }
:root[data-theme="dark"] .band :focus-visible, :root[data-theme="dark"] .means :focus-visible, :root[data-theme="dark"] .tp :focus-visible { outline-color: var(--nt-ink) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .means, :root:not([data-theme="light"]) .band, :root:not([data-theme="light"]) .tp { background: color-mix(in srgb, var(--callout) 20%, var(--nt-card)); color: var(--nt-ink); box-shadow: inset 3px 0 0 var(--callout); }
  :root:not([data-theme="light"]) .band__head .nt-h3, :root:not([data-theme="light"]) .band .insights li, :root:not([data-theme="light"]) .band .linkbtn, :root:not([data-theme="light"]) .means .linkbtn { color: var(--nt-ink); }
  :root:not([data-theme="light"]) .band__sub { color: var(--nt-ink-2); }
  :root:not([data-theme="light"]) .band :focus-visible, :root:not([data-theme="light"]) .means :focus-visible, :root:not([data-theme="light"]) .tp :focus-visible { outline-color: var(--nt-ink) !important; }
}
/* focus lands below the sticky bars, and the floating Top button never covers the last row */
html { scroll-padding-top: calc(var(--sticky-h, 49px) + 16px); scroll-padding-bottom: 72px; }
@media (max-width: 767px) { .page { padding-bottom: 88px; } }
/* bars in cells: a thin ink line under the value instead of a lavender block */
.heat--bar td.barcell { background: var(--nt-soft); }
.heat--bar .barcell__bar { top: auto; bottom: 0; height: 4px; background: var(--nt-ink-2); }
.heat--bar .barcell--rev .barcell__bar { background: var(--nt-grey-400); }
/* Overview tiles: the name on its own line, the role tag under it */
.mtile__head { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
.mtile__name { white-space: normal; }
/* context appears once: in the menu bar below 1180 px, in the context bar above */
@media (max-width: 1179px) { .ctx__v { display: none; } .ctx { justify-content: flex-end; } }
@media (max-width: 640px) { .nav__menu { min-height: 44px; } .heat td small.rkr { display: none; } }
/* phones: the slogan verdict table as cards too */
@media (max-width: 560px) {
  .dec--sl thead { display: none; }
  .dec--sl, .dec--sl tbody { display: block; }
  .dec--sl tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nt-space-2); padding: var(--nt-space-3) 0; border-bottom: 1px solid var(--nt-line); }
  .dec--sl tbody th { grid-column: 1 / -1; border: 0; padding: 0; font-weight: var(--nt-weight-medium); }
  .dec--sl td { border: 0; padding: 0; text-align: left; white-space: normal; }
  .dec--sl td:last-child { grid-column: 1 / -1; }
  .dec--sl td::before { content: attr(data-label); display: block; font-size: var(--nt-text-caption); color: var(--nt-muted); }
  .dec--sl td small { margin-left: 0; }
  .swipe:has(+ .nt-table-wrap .dec--sl) { display: none !important; }
}
.deffctl { display: flex; flex-wrap: wrap; gap: var(--nt-space-2); align-items: center; margin: var(--nt-space-3) 0 0; font-size: var(--nt-text-small); }
.deffctl .ic { margin: 0; }

.sprite-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nt-skeleton--view { height: 240px; }
.expired { display: flex; gap: var(--nt-space-3); align-items: center; margin: 0 0 var(--nt-space-4); padding: var(--nt-space-3) var(--nt-space-4); border: 1px solid var(--nt-down); border-radius: var(--nt-radius-sm); color: var(--nt-ink); background: var(--nt-card); }
.expired .ic { margin: 0; color: var(--nt-down); }

/* ---------- round 5: reflow at tablet widths, phone context, hit areas, questions ---------- */
.nt-table-wrap { max-width: 100%; min-width: 0; }
@media (max-width: 899px) {
  .dec--sl thead { display: none; }
  .dec--sl, .dec--sl tbody { display: block; }
  .dec--sl tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nt-space-2); padding: var(--nt-space-3) 0; border-bottom: 1px solid var(--nt-line); }
  .dec--sl tbody th { grid-column: 1 / -1; border: 0; padding: 0; font-weight: var(--nt-weight-medium); }
  .dec--sl td { border: 0; padding: 0; text-align: left; white-space: normal; }
  .dec--sl td:last-child { grid-column: 1 / -1; }
  .dec--sl td::before { content: attr(data-label); display: block; font-size: var(--nt-text-caption); color: var(--nt-muted); }
  .dec--sl td small { margin-left: 0; }
  .swipe:has(+ .nt-table-wrap .dec--sl) { display: none !important; }
}
@media (max-width: 640px) {
  .nav__current { white-space: normal; flex-wrap: wrap; row-gap: 0; }
  .nav__ctx { white-space: normal; overflow: visible; text-overflow: clip; flex-basis: 100%; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
  .nav__ctx::before { content: none; }
  .filters__now { white-space: normal; }
  .linkbtn { position: relative; }
  .linkbtn::after { content: ""; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px; }
  .sb__seg { font-size: 0; }
}
.qs { margin: 0; padding-left: var(--nt-space-5); display: grid; gap: var(--nt-space-3); font-size: var(--nt-text-body); line-height: var(--nt-text-body-lh); }
.qs b { font-weight: var(--nt-weight-medium); }
.bk { grid-template-columns: minmax(150px, auto) minmax(0, 1fr); }
.bk__l { white-space: nowrap; }
:root[data-theme="dark"] .means, :root[data-theme="dark"] .band, :root[data-theme="dark"] .tp { background: color-mix(in srgb, var(--nt-ink) 6%, var(--nt-card)); box-shadow: inset 4px 0 0 var(--callout); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .means, :root:not([data-theme="light"]) .band, :root:not([data-theme="light"]) .tp { background: color-mix(in srgb, var(--nt-ink) 6%, var(--nt-card)); box-shadow: inset 4px 0 0 var(--callout); } }
/* visually hidden labels inside a scrolling table must be clipped by it, not stretch the page */
.nt-table-wrap { position: relative; }
@media (max-width: 420px) { .bk { grid-template-columns: minmax(0, 1fr); } .bk__l { white-space: normal; } .bk__v { text-align: left; } .bk__v small { white-space: normal; } }

/* Forced colours (Windows high contrast): data marks keep their colours, because the colour is the encoding and every
   value is also printed next to it; tracks, panels and callouts get a system-colour border; the white wordmark keeps its black plate. */
@media (forced-colors: active) {
  .barcell__bar, .bd__dot, .bd__line, .bf__bar, .db__dot, .db__line, .fc__fill, .fc__line, .fg__bar, .lk__seg, .mbar__fill, .pb__fill,
  .rd__ci, .rd__dot, .rd__link, .sb__seg, .ss__bar, .heat td, .key > i, .flag, .nt-tag-black { forced-color-adjust: none; }
  .bd__track, .db__track, .fg__track, .lk__track, .mbar__track, .rd__track, .sb__track { border: 1px solid CanvasText; }
  .panel, .means, .band, .tp, .verdict { border: 1px solid CanvasText; }
  .nt-appbar__logo { forced-color-adjust: none; background: #000000; border-radius: 2px; }
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
}

/* ---------- round 7: verdict badges in narrow cells, print fit, landscape phones, forced-colour selection ---------- */
/* The borderline qualifier stays inside its badge but takes its own line where the cell is narrow (phone cards, small cells). */
@media (max-width: 899px) {
  .dec .verdict { white-space: normal; flex-wrap: wrap; row-gap: 0; }
  .dec .verdict__b { flex-basis: 100%; padding-left: 20px; }
  .dec .verdict__sep { display: none; }
  .dec--mk td { min-width: 0; overflow-wrap: anywhere; }
}
/* Print and Save as PDF: landscape A4, tables fit the page width and wrap instead of overflowing. */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .nt-root .nt-table, .nt-root .heat, .nt-root .dec { width: 100% !important; table-layout: fixed; }
  .nt-root .dec th, .nt-root .dec td, .nt-root .heat th, .nt-root .heat td { white-space: normal !important; overflow-wrap: anywhere; font-size: 8.5pt; }
  .nt-root .dec th[scope="row"] { min-width: 0; width: 18%; }
  .nt-root .heat th[scope="row"] { width: 22%; }
  .nt-root .verdict { white-space: normal; flex-wrap: wrap; }
}
/* Landscape phones: only the context bar stays on screen. */
@media (max-height: 500px) and (orientation: landscape) { .jump { position: static !important; } .nav { position: relative; } }
/* Forced colours: the selected chip, radio and tab need more than a font weight. */
@media (forced-colors: active) {
  [role="radio"] { border: 1px solid ButtonText; }
  [role="radio"][aria-checked="true"], .tab[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; text-decoration: underline; }
}
/* the inline link's enlarged hit area must not reach the "How we know" summary below it */
.ins__more { margin-top: var(--nt-space-2); }
/* market cards: the big number stays on one line across cards, whatever sits under the rank */
.mtile .nt-kpi__row { align-items: flex-start; }
/* phones: the storyboard frames scroll sideways (with snap) instead of stacking ten frames */
@media (max-width: 560px) {
  .sbgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--nt-space-2); padding-bottom: var(--nt-space-2); }
  .sbgrid .sbf { flex: 0 0 72%; scroll-snap-align: start; }
}
@media print { .sbgrid { display: grid !important; overflow: visible !important; } }
@media (max-width: 560px) { .swipe--sb { display: flex; margin-top: var(--nt-space-5); } }
/* phones: each "What it means" point shows its headline; the sentence moves into the disclosure ("Read more") */
.ins__ph, .ins__sm { display: none; }
@media (max-width: 640px) {
  .insights .ins__rest, .ins__lg { display: none; }
  .ins__ph { display: block; }
  .ins__sm { display: inline; }
}
/* Christmas ad timeline: numbered beats with a key on narrow screens (labels no longer clip) */
.tl__n, .tl__key { display: none; }
@media (max-width: 899px) {
  .tl__l { display: none; }
  .tl__n { display: inline; font-weight: var(--nt-weight-medium); }
  .tl__beat { justify-content: center; }
  .tl__key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--nt-space-3); margin: var(--nt-space-2) 0 0; padding: 0; list-style: none; font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); color: var(--nt-ink-2); }
  .tl__key b { font-weight: var(--nt-weight-medium); color: var(--nt-ink); }
}
@media print { .tl__l { display: inline !important; } .tl__n, .tl__key { display: none !important; } }
/* print: the six market cards stay together on one page */
@media print { .nt-kpis.tiles { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .tiles .mtile { break-inside: avoid; } .nt-root .vhead p { margin-bottom: var(--nt-space-2); } }
.ins__more[open] .ins__sm--o, .ins__more:not([open]) .ins__sm--x { display: none !important; }
/* desktop verdict table: badges of one width, so the column reads as a grid */
@media (min-width: 900px) { .dec .verdict { min-width: 8.6em; justify-content: flex-start; } }
/* 320-360 px: "borderline" never breaks inside the word */
.dec .verdict, .dec .verdict__b { overflow-wrap: normal; word-break: normal; }
@media (max-width: 360px) { .dec .verdict__b { padding-left: 0; } .dec .verdict { padding-right: 4px; } }
/* print pagination: no stranded base lines or hints; headings stay with their content; closed "More detail" is named, not printed */
@media print {
  .hint, .swipe, .swipe--sb { display: none !important; }
  .nt-source, .src, .legend, .note, .means { break-before: avoid; page-break-before: avoid; }
  .panel__head, .nt-card-title, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .dec tbody tr, .heat tbody tr, .kv li, .insights li { break-inside: avoid; }
  .more:not([open]) > summary { display: block !important; border: 0; padding: 0; min-height: 0; margin: 0 0 var(--nt-space-3); font-weight: var(--nt-weight-regular); color: var(--nt-ink-2); }
  .more:not([open]) > summary .ic { display: none; }
  .more:not([open]) > summary::after { content: " (not printed: open it before printing to include it)"; }
  .more[open] > summary { display: none !important; }
}
/* phones: wide lever text in two columns; long-answer tables wrap instead of scrolling; small charts keep readable labels */
@media (max-width: 560px) {
  .dec--mk tbody tr.row--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbl--wrap th, .tbl--wrap td { white-space: normal !important; min-width: 0 !important; }
  .scatter .tick, .scatter .pt text { font-size: 20px; }
  .scatter .alabel { font-size: 18px; }
  .scatter .alabel[transform] { display: none; }   /* the y-axis is named in the panel's subtitle */
}
@media (max-width: 400px) { .bd__ticks span:nth-child(even):not(:last-child) { display: none; } .bd__gaph { display: none; } }
.more > summary > span { flex: 1 1 auto; min-width: 0; }
.more > summary .ic { flex: 0 0 auto; }
/* a lighter Overview callout: on wide screens "How we know" sits at the end of its point instead of on its own line */
@media (min-width: 641px) {
  .band .ins__more:not([open]) { display: inline; margin: 0 0 0 var(--nt-space-2); }
  .band .ins__more:not([open]) > summary { display: inline; min-height: 0; }
}
/* print: white paper, the storyboard in one piece, the confidential stamp and source line kept with the last content */
@media print {
  html, body, .nt-root, .page { background: #ffffff !important; }
  .sbgrid { break-inside: avoid; page-break-inside: avoid; }
  .conf, .page--foot, #view > :last-child { break-before: avoid; page-break-before: avoid; }
  .page--foot { margin-top: var(--nt-space-2) !important; padding-top: 0 !important; }
}
@media print {
  .ins__more:not([open]) { display: none !important; }
  .band__sub::after { content: " The evidence behind each point (“How we know”) is in the dashboard."; }
}
/* print: the confidential stamp at the top of page 1 instead of alone on a last page; storyboard in two rows of five */
.conf--top { display: none; }
@media print {
  .conf--top { display: flex !important; margin: 0 0 var(--nt-space-3); }
  footer.conf, .page--foot { display: none !important; }
  .sbgrid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
/* phones: the metric is named once above the market cards, not in every card */
.tiles__cap { display: none; }
@media (max-width: 640px) {
  .tiles__cap { display: flex; align-items: center; gap: var(--nt-space-2); margin: 0 0 var(--nt-space-2); font-size: var(--nt-text-small); color: var(--nt-ink-2); }
  .tiles .mtile .nt-kpi__label { display: none; }
}

/* print: always the light theme (paper is white), whatever the screen theme or the OS setting */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --nt-brand-black: #000000;
    --nt-brand-white: #FFFFFF;
    --nt-brand-strong-pink: #DC0069;
    --nt-brand-yellow-dragon: #F4DC7A;
    --nt-brand-chameleon-skin: #CCDBAA;
    --nt-brand-light-nude: #E8D1BA;
    --nt-brand-light-sky-blue: #B6C1ED;
    --nt-brand-pastel-violine: #CAADEB;
    --nt-brand-light-pink: #F49AC5;
    --nt-brand-light-coral: #FF9380;
    --nt-grey-900: #303030;
    --nt-grey-700: #474747;
    --nt-grey-600: #6B6B6B;
    --nt-grey-400: #ABABAB;
    --nt-grey-300: #BFBFBF;
    --nt-grey-200: #E1E1E1;
    --nt-grey-100: #F7F7F7;
    --nt-page: #F7F7F7;
    --nt-card: #FFFFFF;
    --nt-soft: #F2F2F2;
    --nt-side: #FFFFFF;
    --nt-inverse: #000000;
    --nt-on-inverse: #FFFFFF;
    --nt-ink: #000000;
    --nt-ink-2: #474747;
    --nt-muted: #6B6B6B;
    --nt-line: #E1E1E1;
    --nt-line-strong: #8C8C8C;
    --nt-card-border: #EBEBEB;
    --nt-accent: #DC0069;
    --nt-on-accent: #FFFFFF;
    --nt-accent-tint: #FDF0F6;
    --nt-up: #0E7650;
    --nt-down: #C2410C;
    --nt-prev: #858585;
    --nt-warn-bg: #F4DC7A;
    --nt-warn-ink: #000000;
    --nt-focus: #DC0069;
    --nt-skeleton: #E1E1E1;
    --nt-data-notino: #DC0069;
    --nt-data-sky: #3F57C0;
    --nt-data-chameleon: #7B9237;
    --nt-data-violine: #A27BCB;
    --nt-data-nude: #85562A;
    --nt-data-other: #8C8C8C;
    --nt-seq-1: #F0F3FF;
    --nt-seq-2: #D4DDFD;
    --nt-seq-3: #B5C1F5;
    --nt-seq-4: #8F9FEA;
    --nt-seq-5: #6D7DDA;
    --nt-seq-6: #505EBE;
    --nt-seq-7: #394393;
    --nt-seq-text-1: #000000;
    --nt-seq-text-2: #000000;
    --nt-seq-text-3: #000000;
    --nt-seq-text-4: #000000;
    --nt-seq-text-5: #000000;
    --nt-seq-text-6: #FFFFFF;
    --nt-seq-text-7: #FFFFFF;
    --nt-div-1: #673E8D;
    --nt-div-2: #8C66B2;
    --nt-div-3: #B198CD;
    --nt-div-4: #D7CBE6;
    --nt-div-5: #F2F2F2;
    --nt-div-6: #CBD7B3;
    --nt-div-7: #A0B56C;
    --nt-div-8: #7A9136;
    --nt-div-9: #516409;
    --nt-div-text-1: #FFFFFF;
    --nt-div-text-2: #000000;
    --nt-div-text-3: #000000;
    --nt-div-text-4: #000000;
    --nt-div-text-5: #000000;
    --nt-div-text-6: #000000;
    --nt-div-text-7: #000000;
    --nt-div-text-8: #000000;
    --nt-div-text-9: #FFFFFF;
    --nt-font-sans: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nt-weight-light: 300;
    --nt-weight-regular: 400;
    --nt-weight-medium: 500;
    --nt-weight-bold: 700;
    --nt-text-caption: 0.75rem;
    --nt-text-caption-lh: 1rem;
    --nt-text-caption-weight: 400;
    --nt-text-caption-tracking: 0em;
    --nt-text-label: 0.75rem;
    --nt-text-label-lh: 1rem;
    --nt-text-label-weight: 500;
    --nt-text-label-tracking: 0em;
    --nt-text-small: 0.875rem;
    --nt-text-small-lh: 1.25rem;
    --nt-text-small-weight: 400;
    --nt-text-small-tracking: 0em;
    --nt-text-body: 1rem;
    --nt-text-body-lh: 1.5rem;
    --nt-text-body-weight: 400;
    --nt-text-body-tracking: 0em;
    --nt-text-card-title: 1rem;
    --nt-text-card-title-lh: 1.25rem;
    --nt-text-card-title-weight: 500;
    --nt-text-card-title-tracking: 0em;
    --nt-text-lead: 1.25rem;
    --nt-text-lead-lh: 1.75rem;
    --nt-text-lead-weight: 300;
    --nt-text-lead-tracking: 0em;
    --nt-text-h3: 1.5rem;
    --nt-text-h3-lh: 1.5rem;
    --nt-text-h3-weight: 400;
    --nt-text-h3-tracking: -0.01em;
    --nt-text-h2: 2rem;
    --nt-text-h2-lh: 2rem;
    --nt-text-h2-weight: 400;
    --nt-text-h2-tracking: -0.015em;
    --nt-text-h1: 2.5rem;
    --nt-text-h1-lh: 2.5rem;
    --nt-text-h1-weight: 300;
    --nt-text-h1-tracking: -0.02em;
    --nt-text-display: 3.5rem;
    --nt-text-display-lh: 3.5rem;
    --nt-text-display-weight: 300;
    --nt-text-display-tracking: -0.02em;
    --nt-text-kpi: 2.25rem;
    --nt-text-kpi-lh: 2.25rem;
    --nt-text-kpi-weight: 400;
    --nt-text-kpi-tracking: -0.01em;
    --nt-text-kpi-sm: 1.5rem;
    --nt-text-kpi-sm-lh: 1.5rem;
    --nt-text-kpi-sm-weight: 400;
    --nt-text-kpi-sm-tracking: -0.01em;
    --nt-slide-footnote: 18px;
    --nt-slide-footnote-lh: 24px;
    --nt-slide-footnote-weight: 400;
    --nt-slide-footnote-tracking: 0em;
    --nt-slide-body: 28px;
    --nt-slide-body-lh: 40px;
    --nt-slide-body-weight: 400;
    --nt-slide-body-tracking: 0em;
    --nt-slide-body-lg: 36px;
    --nt-slide-body-lg-lh: 48px;
    --nt-slide-body-lg-weight: 300;
    --nt-slide-body-lg-tracking: 0em;
    --nt-slide-title: 56px;
    --nt-slide-title-lh: 56px;
    --nt-slide-title-weight: 400;
    --nt-slide-title-tracking: -0.015em;
    --nt-slide-display: 96px;
    --nt-slide-display-lh: 96px;
    --nt-slide-display-weight: 300;
    --nt-slide-display-tracking: -0.02em;
    --nt-slide-number: 160px;
    --nt-slide-number-lh: 160px;
    --nt-slide-number-weight: 300;
    --nt-slide-number-tracking: -0.03em;
    --nt-space-0: 0rem;
    --nt-space-1: 0.25rem;
    --nt-space-2: 0.5rem;
    --nt-space-3: 0.75rem;
    --nt-space-4: 1rem;
    --nt-space-5: 1.25rem;
    --nt-space-6: 1.5rem;
    --nt-space-8: 2rem;
    --nt-space-10: 2.5rem;
    --nt-space-12: 3rem;
    --nt-space-16: 4rem;
    --nt-space-24: 6rem;
    --nt-space-0_5: 0.125rem;
    --nt-radius-none: 0px;
    --nt-radius-xs: 2px;
    --nt-radius-sm: 4px;
    --nt-radius-md: 8px;
    --nt-radius-pill: 999px;
    --nt-shadow-card: 0 1px 2px rgb(71 71 71 / 0.06), 0 4px 8px rgb(71 71 71 / 0.10);
    --nt-shadow-card-hover: 0 1px 2px rgb(71 71 71 / 0.06), 0 6px 12px rgb(71 71 71 / 0.10);
    --nt-shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.06);
    --nt-dur-fast: 120ms;
    --nt-dur-base: 200ms;
    --nt-dur-slow: 320ms;
    --nt-ease: cubic-bezier(0.2, 0, 0, 1);
    --nt-appbar-h: 56px;
    --nt-content-max: 1600px;
    --nt-gutter: 24px;
    --nt-gutter-mobile: 16px;
    --nt-logo-appbar-w: 96px;
  }
}
/* the inline "How we know" never breaks inside its label */
.ins__more > summary { white-space: nowrap; }
/* phones: scatter labels at a readable size (viewBox units scale down about half at 375 px) */
@media (max-width: 400px) { .scatter .tick, .scatter .pt text { font-size: 24px; } .scatter .alabel { font-size: 21px; } }
/* print: the Overview's reading and its verdict table each stay on one page */
@media print { .nt-panel:has(> * .dec--mk), .nt-panel:has(.dec--mk) { break-inside: avoid; page-break-inside: avoid; } }
/* print: the verdict table is set tighter so it fits one landscape page */
@media print {
  .nt-root .dec--mk th, .nt-root .dec--mk td { padding: 3px 5px !important; font-size: 8pt; line-height: 1.25; }
  .nt-root .dec--mk small { font-size: 7pt; line-height: 1.2; }
  .nt-root .dec--mk .verdict { padding: 0 4px; font-size: 7.5pt; }
  .nt-root .dec--mk .lever { font-size: 7.5pt; }
}
/* the Views button in the sticky context bar: only where the Menu is the view switcher and the menu bar scrolls away */
.ctx__menu { display: none; }
@media (min-width: 768px) and (max-width: 1179px) { .ctx__menu { display: inline-flex; } }
@media print { .ctx__menu { display: none !important; } }

/* ---------- table alignment (alignCols in the shell): a numeric column whose header is much longer than its values is
   centred, so each value sits under the middle of its label; interval and adjusted-p lines go under the value ---------- */
.nt-table th.num.is-c, .nt-table td.num.is-c { text-align: center; }
.nt-table thead th.num.is-c .flag { margin: 0 auto 4px; }
.nt-table td.num small { display: block; font-weight: var(--nt-weight-regular); color: var(--nt-muted); font-size: var(--nt-text-caption); line-height: var(--nt-text-caption-lh); }
.nt-table td.num.is-c small { margin-left: auto; margin-right: auto; }
/* bar heatmaps sit in half-width panels: a narrower label column and cells, so all six markets fit without scrolling at 1440 px */
@media (min-width: 561px) {
  .heat--bar tbody th { min-width: 120px; }
  .heat--bar td.barcell { min-width: 72px; }
}
/* the funnel table sits beside the funnel chart in a half-width panel: tighter cells, so all columns fit from 1280 px up
   (narrower panels keep the sideways scroll and its hint) */
.nt-table.ft th, .nt-table.ft td { padding-left: var(--nt-space-2); padding-right: var(--nt-space-2); }
.nt-table.ft th.num { min-width: 60px; }