/* Macro Overview layout — arranges the SPECULANTURA design-system classes and tokens
 * (vendor/speculantura-ds) as in the design "Macro Overview.dc.html": desktop
 * (full sidebar), tablet (72 px icon rail) and mobile (top bar and drawer).
 * Only tokens are used; no new colours, fonts or sizes. */

body { margin: 0; background: var(--color-canvas); }
a { color: var(--color-accent-quiet); }
a:hover { color: var(--color-text-1); }
.mo-boot { padding: var(--space-6); font-family: var(--font-ui); color: var(--color-text-2); }

.mo-app { min-height: 100vh; font-family: var(--font-ui); color: var(--color-text-1); }
.mo-row { display: flex; align-items: flex-start; gap: var(--space-6); }
.mo-app[data-layout="desktop"] .mo-row { padding: var(--space-6) 28px var(--space-6) var(--space-6); }
.mo-app[data-layout="tablet"] .mo-row { padding: var(--space-5); }
.mo-app[data-layout="mobile"] .mo-row { flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.mo-nav { flex: none; display: flex; align-self: flex-start; position: sticky; top: var(--size-sidebar-inset); }
.mo-nav .sp-sidebar { position: relative; top: 0; height: calc(100vh - var(--size-sidebar-inset) * 2);
  max-height: calc(100vh - var(--size-sidebar-inset) * 2); overflow-y: auto; }
.mo-main { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: var(--space-6); }
.mo-app[data-layout="mobile"] .mo-main { gap: var(--space-4); }

.mo-topbar { position: sticky; top: 0; z-index: 2; height: var(--size-topbar); display: flex; align-items: center;
  gap: var(--space-2); padding: 0 var(--space-2); background: var(--color-surface-base);
  border-bottom: 1px solid var(--color-border-subtle); }
.mo-topbar__title { flex: 1; min-width: 0; margin-left: var(--space-1); }

.mo-grid { display: grid; gap: var(--space-4); align-items: start; }
.mo-regime { display: grid; gap: var(--space-6) var(--space-10); align-items: start; }
.mo-app[data-layout="desktop"] .mo-regime { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.mo-app[data-layout="tablet"] .mo-regime { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.mo-app[data-layout="mobile"] .mo-regime { grid-template-columns: minmax(0, 1fr); }
.mo-cs { display: grid; gap: var(--space-4) var(--space-8); align-items: start; padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mo-cat, .mo-reviews { display: grid; gap: var(--space-4); align-items: stretch; }
.mo-cat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mo-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mo-app[data-layout="mobile"] .mo-cs,
.mo-app[data-layout="mobile"] .mo-cat,
.mo-app[data-layout="mobile"] .mo-reviews { grid-template-columns: minmax(0, 1fr); }

.mo-link { display: inline-flex; align-items: center; min-height: var(--size-control-compact); padding: 0; border: 0;
  background: transparent; font-family: var(--font-ui); font-size: var(--text-label-nav-size); font-weight: 500;
  color: var(--color-accent-quiet); cursor: pointer; text-align: left; }
.mo-link:hover:not(:disabled) { color: var(--color-text-1); text-decoration: underline; }
.mo-link:disabled { color: var(--color-text-3); cursor: default; }
.mo-app[data-layout="mobile"] .mo-link { min-height: var(--size-control-touch); }

.mo-row-btn { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-height: var(--size-control-touch);
  padding: var(--space-3) var(--space-4); border: 0; border-top: 1px solid var(--color-divider); background: transparent;
  font: inherit; color: var(--color-text-1); text-align: left; cursor: pointer; }
.mo-row-btn:hover { background: var(--color-hover-overlay); }
.mo-row-btn[aria-current="true"] { background: var(--color-selected-row); }

.mo-table-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-row-dense);
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-divider); }
.mo-table-head { display: flex; align-items: center; gap: var(--space-3); height: var(--size-row-header);
  padding: 0 var(--space-4); background: var(--color-surface-subtle); border-top: 1px solid var(--color-divider);
  font-weight: 500; font-size: var(--text-table-header-size); line-height: var(--text-table-header-leading);
  color: var(--color-text-3); white-space: nowrap; }
.mo-cell-dense { font-size: var(--text-table-cell-dense-size); line-height: var(--text-table-cell-dense-leading); }
.mo-muted { color: var(--color-text-3); }
.mo-quiet { color: var(--color-text-2); }

.mo-popover { position: absolute; top: calc(100% + var(--space-2)); left: calc(var(--space-2) * -1); z-index: 30;
  width: 340px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); white-space: normal; }

.mo-planned { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2);
  padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }

.mo-drawer { position: fixed; inset: 0; z-index: 50; }
.mo-drawer__scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: var(--color-scrim); cursor: pointer; }
.mo-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: calc(100% - var(--space-12)); display: flex;
  background: var(--color-surface-base); box-shadow: var(--shadow-3); }
.mo-drawer__panel .sp-sidebar { position: relative; top: 0; width: 100%; height: 100%; max-height: none;
  border-radius: 0; border: 0; --size-nav-item: var(--size-control-touch); }
.mo-drawer__close { position: absolute; top: var(--space-2); right: var(--space-2); }

.mo-detail.sp-dialog--drawer { width: min(1040px, calc(100vw - var(--space-12))); }
@media (max-width: 767px) { .mo-detail.sp-dialog--drawer { width: 100%; } }
.mo-kv { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 0 var(--space-4); }
.mo-kv > div, .mo-stats > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider); min-width: 0; }
.mo-kv dd, .mo-stats dd { margin: 0; }
.mo-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.mo-recent { width: 100%; border-collapse: collapse; }
.mo-recent th, .mo-recent td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--color-divider);
  text-align: left; vertical-align: top; }
.mo-recent th { font-weight: 500; font-size: var(--text-table-header-size); color: var(--color-text-3); }
.mo-surface-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.mo-subtle-box { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5);
  background: var(--color-surface-subtle); border-radius: var(--radius-md); }
/* Signed deviation colours (SurpriseState.signColour): green above the forecast, red below — the direction of
   actual − forecast only. On light surfaces the status colours are mixed 15% toward the text colour so they keep
   at least 4.5:1 on high-impact, hovered or selected calendar rows; the graphite card uses its own variants. */
:root { --dev-above: color-mix(in srgb, var(--color-positive) 85%, var(--color-text-1));
  --dev-below: color-mix(in srgb, var(--color-risk) 85%, var(--color-text-1)); }
.surface-focus { --dev-above: var(--color-positive); --dev-below: var(--color-risk); }
/* Overview: the event's own actual − forecast beside its actual and forecast. */
.mo-dev { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--space-1) var(--space-8); }
.mo-dev dd { margin: 0; }
.mo-app[data-layout="mobile"] .mo-dev { gap: var(--space-1) var(--space-5); }
/* Surprise tab: the graphite summary card (.surface-focus re-themes every token inside it, including the
   readable green / red variants). Histogram, tables and notes stay on the light surface. */
.sp-summary { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: var(--space-5) var(--space-6);
  background: var(--color-surface-base); color: var(--color-text-1); border-radius: var(--radius-md); }
.sp-summary__top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5) var(--space-8); }
.sp-summary__lead { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sp-summary__stats { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mo-app[data-layout="mobile"] .sp-summary { padding: var(--space-4); }
.mo-detail:focus, .mo-drawer__panel:focus, .mo-meter:focus { outline: none; }
/* The design's tab strip bleeds 4px each side for focus rings; give the scrolling body room for it. */
.mo-detail .sp-dialog__body { padding: 0 var(--space-1); margin: 0 calc(var(--space-1) * -1); }

/* ---- Economic Calendar (design "Economic Calendar.dc.html": CalendarWorkspace, mobile frame, DateRangePicker) */
.ec-main { gap: var(--space-4); }
.mo-app[data-page="calendar"][data-layout="mobile"] .mo-main { padding: var(--space-4); gap: var(--space-4); }
.ec-count { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-5); height: var(--space-5);
  padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--color-accent); color: var(--color-text-inverse);
  font-size: var(--text-caption-size); }
.ec-rangebar { position: relative; z-index: 4; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.ec-rangeline { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; }
.ec-popover { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 30; width: 320px; padding: var(--space-4);
  background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.mo-app[data-layout="tablet"] .ec-popover { left: auto; right: 0; }

.ec-focus { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6);
  padding: var(--padding-card-y) var(--padding-card-x); border-radius: var(--radius-lg); }
.ec-focus__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); max-width: 260px;
  padding-left: var(--space-6); border-left: 1px solid var(--color-divider); text-align: right; }
.ec-focus--mobile { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); text-align: left; }
.ec-focus .mo-link { align-self: flex-start; }

.ec-filterbar { position: sticky; top: 0; z-index: 3; flex: none; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); }
.ec-filterbar__tags { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); overflow-x: auto; }
.ec-divider { flex: none; width: 1px; height: var(--space-5); background: var(--color-border-strong); }

.ec-thead { display: flex; align-items: center; height: var(--size-row-header); background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); font-weight: 500;
  font-size: var(--text-table-header-size); line-height: var(--text-table-header-leading); color: var(--color-text-3); white-space: nowrap; }
.ec-row { display: flex; align-items: center; width: 100%; min-height: var(--size-row-dense); padding: 0; border: 0;
  border-bottom: 1px solid var(--color-divider); background: transparent; text-align: left; font-family: var(--font-ui);
  font-size: var(--text-table-cell-dense-size); line-height: var(--text-table-cell-dense-leading); color: var(--color-text-1);
  white-space: nowrap; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard); }
.ec-row:hover { background: var(--color-hover-overlay); }
.ec-row[data-next="true"] { box-shadow: inset 2px 0 0 var(--color-accent); }
.ec-row[aria-expanded="true"] { background: var(--color-selected-row); box-shadow: inset 2px 0 0 var(--color-accent); border-bottom: 0; }
.ec-c { flex: none; padding: 0 var(--space-3); }
.ec-c--time, .ec-c--cur { width: 64px; font-size: var(--text-data-size); }
/* Currency column: an optional country flag (flags.js) before the code; wider so both fit. */
.ec-c--cur { width: 76px; display: flex; align-items: center; gap: 6px; }
.ec-mcur { display: inline-flex; align-items: center; gap: 4px; }
.ec-flag { flex: none; display: inline-flex; justify-content: center; width: 18px; font-size: 14px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ec-mcur .ec-flag:empty { display: none; }
.ec-c--imp { width: 104px; display: flex; align-items: center; }
/* Impact colours in calendar rows and mobile cards only; words, stroke count and shape are unchanged and low
 * impact keeps the design system's styling. The impact tokens (high #A8473F, medium #80600F) give only about
 * 4.4:1 as text on a selected released row, so the labels use darker shades of the same hues (at least
 * 4.7:1 on every row state); the medium strokes use a clearer goldenrod. The high marker keeps its token. */
.ec-row, .ec-mrow { --ec-impact-medium-mark: #B8860B; --ec-impact-medium-text: #7D5A00; --ec-impact-high-text: #963B34; }
.ec-row .sp-impact--2 .sp-impact__bar--on, .ec-mrow .sp-impact--2 .sp-impact__bar--on { background: var(--ec-impact-medium-mark); }
.ec-row .sp-impact--2 > span:not(.sp-impact__bars), .ec-mrow .sp-impact--2 > span:not(.sp-impact__bars) { color: var(--ec-impact-medium-text); }
.ec-row .sp-impact--3 > span:not(.sp-impact__bars), .ec-mrow .sp-impact--3 > span:not(.sp-impact__bars) { color: var(--ec-impact-high-text); }
/* High impact: the marker and label in one compact light-red badge (the design token --color-risk-tint, 8 % of
 * the risk red; translucent, so a released or upcoming row still shows through it). With the tint the label
 * uses #963B34 (at least 4.8:1 on every row state). In table rows the badge reaches 6 px into the cell padding
 * so the three strokes stay in line with other rows' markers; mobile cards keep their separator gap. */
.ec-row .sp-impact--3, .ec-mrow .sp-impact--3 { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-risk-tint); }
.ec-row .sp-impact--3 { margin-left: -6px; }
.ec-c--event { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ec-c--num { text-align: right; font-size: var(--text-data-size); overflow: hidden; text-overflow: ellipsis; }
.ec-c--actual { width: 104px; }
.ec-c--forecast, .ec-c--prev { width: 96px; }
.ec-c--surprise { width: 128px; }
.ec-c--status { width: 140px; font-size: var(--text-caption-size); }
.ec-c--chev { width: 40px; padding: 0; display: flex; justify-content: center; color: var(--color-text-3); }
.ec-group { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4);
  background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-divider); font-weight: 500;
  font-size: var(--text-body-size); line-height: var(--text-body-leading); color: var(--color-text-1); }
.ec-inline { padding: var(--space-3) var(--space-4) var(--space-4); background: var(--color-selected-row);
  box-shadow: inset 2px 0 0 var(--color-accent); border-bottom: 1px solid var(--color-divider); }
.ec-inline__box { padding: var(--space-6) 28px; background: var(--color-surface-reading); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); }
.mo-app[data-layout="tablet"] .ec-inline { padding: var(--space-3) var(--space-3) var(--space-4); }
.mo-app[data-layout="tablet"] .ec-inline__box { padding: var(--space-5) var(--space-6); }
.ec-more { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider); }
.ec-skeleton { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.ec-skeleton__row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }

/* mobile */
.ec-mobile { gap: var(--space-4); }
.ec-mcontrols { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 calc(var(--space-4) * -1); }
.ec-mcontrols > .ec-rangeline { padding: 0 var(--space-4); }
.ec-hscroll { display: flex; align-items: center; gap: var(--space-2); overflow-x: auto; padding: 0 var(--space-4); }
.ec-mrow { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-height: var(--size-control-touch);
  padding: var(--padding-row-card-y) var(--space-4); border: 0; border-bottom: 1px solid var(--color-divider); background: transparent;
  text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ec-mrow:hover { background: var(--color-hover-overlay); }
.ec-mrow[aria-current="true"] { background: var(--color-selected-row); box-shadow: inset 2px 0 0 var(--color-accent); }
.ec-mrow__vals { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading); color: var(--color-text-2); }
.mo-app[data-layout="mobile"] .ec-group { padding: var(--space-2) var(--space-4); }

.ec-sheet { position: fixed; inset: 0; z-index: 55; }
.ec-sheet__scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--color-scrim); cursor: pointer; }
.ec-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100vh - var(--space-12)); display: flex;
  flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-5); background: var(--color-surface-elevated);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-3); }
.ec-sheet__panel:focus { outline: none; }
.ec-sheet__handle { align-self: center; width: var(--space-10); height: var(--space-1); border-radius: var(--radius-xs); background: var(--color-border-strong); }
.ec-sheet__body { min-height: 0; overflow-y: auto; }
.ec-sheet__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.ec-optlist { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.ec-optlist__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-control-touch); padding: var(--space-2) var(--space-1);
  border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ec-optlist__item:hover { background: var(--color-hover-overlay); }

.ec-mdetail { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--color-surface-elevated); }
.ec-mdetail:focus { outline: none; }
.ec-mdetail__head { position: sticky; top: 0; z-index: 2; height: var(--size-topbar); display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2); background: var(--color-surface-elevated); border-bottom: 1px solid var(--color-border-subtle); }

/* filters */
.ec-filter-dialog { width: min(560px, calc(100vw - var(--space-8))); }
.ec-filter-dialog:focus { outline: none; }
.ec-filters { display: flex; flex-direction: column; gap: var(--space-5); }
.ec-facet { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ec-facet__title { display: flex; align-items: baseline; padding: 0; color: var(--color-text-1); }
.ec-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); }
.ec-checks--scroll { max-height: 220px; overflow-y: auto; padding: var(--space-1) 0; }
.mo-app[data-layout="mobile"] .ec-checks, .ec-sheet .ec-checks { grid-template-columns: minmax(0, 1fr); }

/* date range picker */
.ec-picker { display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-ui); color: var(--color-text-1); }
.ec-picker__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ec-picker__field { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-0-5); padding: var(--space-1) var(--space-3);
  background: var(--color-surface-base); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit;
  color: inherit; text-align: left; cursor: pointer; }
.ec-picker__grid { display: grid; justify-content: center; row-gap: var(--space-0-5); }
.ec-picker__wd { display: flex; align-items: center; justify-content: center; height: var(--space-6); }
.ec-day { padding: 0; border: 0; font-family: var(--font-data); font-size: var(--text-data-size); font-variant-numeric: tabular-nums lining-nums; cursor: pointer; }
.ec-day:hover { outline: 1px solid var(--color-border-strong); }
.ec-picker__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider); }
.ec-sheet .sp-check { min-height: var(--size-control-touch); align-items: center; }

/* Released events (actual published), and speeches and timed non-scalar events whose scheduled time has come
 * (S.rowTone): the design system's canvas neutral (--color-canvas, #EEECE7) — visibly darker than upcoming rows
 * on the card (--color-surface-base, #FAF9F6) and than the table header and date headings
 * (--color-surface-subtle, #F4F2ED). Text keeps its colours. Hover stacks its overlay on top; an
 * expanded/selected row stacks the selected overlay on top (darker still) and keeps the accent bar. The speech
 * and time-reached tones mean only that the time has come, not that anything happened or was published. */
.ec-row--released, .ec-mrow--released, .ec-row--speech-time, .ec-mrow--speech-time,
.ec-row--time-reached, .ec-mrow--time-reached { background-color: var(--color-canvas); }
.ec-row--released:hover, .ec-mrow--released:hover, .ec-row--speech-time:hover, .ec-mrow--speech-time:hover,
.ec-row--time-reached:hover, .ec-mrow--time-reached:hover {
  background-color: var(--color-canvas);
  background-image: linear-gradient(var(--color-hover-overlay), var(--color-hover-overlay)); }
.ec-row--released[aria-expanded="true"], .ec-mrow--released[aria-current="true"],
.ec-row--speech-time[aria-expanded="true"], .ec-mrow--speech-time[aria-current="true"],
.ec-row--time-reached[aria-expanded="true"], .ec-mrow--time-reached[aria-current="true"] {
  background-color: var(--color-canvas);
  background-image: linear-gradient(var(--color-selected-row), var(--color-selected-row)); }
/* A collapsed high-impact time-reached row keeps the hover overlay on top of the optional full-width
 * high-impact tint (--ec-impact-high-row, the same layering as released and speech-time rows); without that
 * tint the fallback layer is transparent and the hover is the one above. */
.ec-row--time-reached:has(.sp-impact--3):not([aria-expanded="true"]):hover,
.ec-mrow--time-reached:has(.sp-impact--3):not([aria-current="true"]):hover {
  background-image: linear-gradient(var(--color-hover-overlay), var(--color-hover-overlay)),
    linear-gradient(var(--ec-impact-high-row, transparent), var(--ec-impact-high-row, transparent)); }

/* High impact, collapsed: a light tint of the design system's risk red across the whole table row or mobile
 * card, as a background image over the row's own base colour (card, released or speech canvas), so released
 * rows stay darker than upcoming ones; hover stacks its overlay on top. 5 % rather than the 8 % of
 * --color-risk-tint: on a released row 8 % takes the muted text (#63666C) to 4.4:1, 5 % keeps it at 4.56:1
 * (4.23:1 on hover; 4.51:1 without the tint). The informative muted text of a tinted row or card (past
 * time, currency code, event note, previous value) therefore uses --color-text-2 (S.highImpactTint in
 * calendar.js; at least 5.24:1); placeholder dashes, separators and the chevron keep #63666C (at least
 * 4.23:1). The badge keeps its own
 * --color-risk-tint on top, so it still reads as a pill. An expanded row
 * (aria-expanded) or the card of the open event (aria-current) drops the tint and keeps the selected styling
 * and accent bar; the details panel is never tinted. The impact marker (.sp-impact--3) is the hook, so the
 * markup is unchanged. */
.ec-row, .ec-mrow { --ec-impact-high-row: color-mix(in srgb, var(--color-risk) 5%, transparent); }
.ec-row:has(.sp-impact--3):not([aria-expanded="true"]), .ec-mrow:has(.sp-impact--3):not([aria-current="true"]) {
  background-image: linear-gradient(var(--ec-impact-high-row), var(--ec-impact-high-row)); }
.ec-row--released:has(.sp-impact--3):not([aria-expanded="true"]):hover,
.ec-row--speech-time:has(.sp-impact--3):not([aria-expanded="true"]):hover,
.ec-mrow--released:has(.sp-impact--3):not([aria-current="true"]):hover,
.ec-mrow--speech-time:has(.sp-impact--3):not([aria-current="true"]):hover {
  background-image: linear-gradient(var(--color-hover-overlay), var(--color-hover-overlay)),
    linear-gradient(var(--ec-impact-high-row), var(--ec-impact-high-row)); }

/* G8 and «Усі валюти» shortcuts at the top of the currency filter. */
.ec-preset { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); }