/* ==========================================================================
   Economic calendar — DS v3 (replaces css/pages/economic-calendar.css)
   Contract: every #ec-* id and the classes created by js/economic-calendar.js.
   Tokens: css/ds/tokens.css (light + html.dark-theme). RTL first.
   Sections: 1 shell · 2 movers · 3 week strip · 4 chips + toolbar · 5 filters
             6 table · 7 inline detail · 8 sidebar · 9 dialog · 10 states · 11 mobile
   ========================================================================== */
.ec-page { --ec-row-h: 56px; padding-bottom: var(--ds-sp-14, 56px); color: var(--ds-text); font-family: var(--ds-font, inherit); }
.ec-page *, .ec-page *::before, .ec-page *::after { box-sizing: border-box; }
.ec-page button { font: inherit; color: inherit; }
.ec-hero { margin-bottom: var(--ds-sp-6, 24px); }
.ec-shell { display: grid; gap: var(--ds-sp-6, 24px); }
.ec-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ec-page :focus-visible { outline: 2px solid var(--ds-focus, var(--ds-primary)); outline-offset: 2px; }
.ec-flag-wrap { display: inline-flex; width: 20px; height: 14px; flex: none; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--ds-line) inset; }
.ec-flag-svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-flag-wrap .ec-flag-svg[stroke] { color: var(--ds-text-2); padding: 1px; }
.ec-icon { flex: none; }

/* Importance: three rising bars — shape + colour (colour-blind safe) */
.ec-imp { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; vertical-align: middle; }
.ec-imp i { width: 3px; border-radius: 1px; background: var(--ds-line-strong); }
.ec-imp i:nth-child(1) { height: 5px; } .ec-imp i:nth-child(2) { height: 8px; } .ec-imp i:nth-child(3) { height: 12px; }
.ec-imp-low i:nth-child(1) { background: var(--ds-imp-low); }
.ec-imp-medium i:nth-child(-n+2) { background: var(--ds-imp-mid); }
.ec-imp-high i { background: var(--ds-imp-high); }
.ec-imp-holiday i { height: 3px !important; background: var(--ds-text-3); border-radius: 50%; width: 3px; }
.ec-imp-unknown i { background: transparent; box-shadow: 0 0 0 1px var(--ds-line-strong) inset; }

/* Shared small buttons */
.ec-row-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--ds-r-sm); border: 0; background: transparent;
  color: var(--ds-text-3); cursor: pointer; text-decoration: none; transition: background-color var(--ds-dur-1), color var(--ds-dur-1); }
.ec-row-btn:hover { background: var(--ds-surface-2); color: var(--ds-text); }
.ec-save.ec-saved { color: var(--ds-gold); }
.ec-btn-primary, .ec-btn-secondary, .ec-btn-apply, .ec-btn-reset, .ec-btn-more, .ec-retry-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ds-h-sm, 36px); padding: 0 16px;
  border-radius: var(--ds-r-md); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); cursor: pointer; text-decoration: none;
  border: 1px solid var(--ds-line); background: var(--ds-surface-1); color: var(--ds-text); transition: var(--ds-t-hover); }
.ec-btn-secondary:hover, .ec-btn-reset:hover, .ec-btn-more:hover, .ec-retry-btn:hover { background: var(--ds-surface-2); border-color: var(--ds-line-strong); }
.ec-btn-primary, .ec-btn-apply { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-text-on-primary, #fff); }
.ec-btn-primary:hover, .ec-btn-apply:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); transform: translateY(var(--ds-lift-1));
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ds-primary) 70%, transparent); } /* item 33: was split with a 2nd layer in unify.css */
.ec-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ---- 2. Market movers ---------------------------------------------------- */
.ec-market-movers { display: grid; gap: var(--ds-sp-3, 12px); scroll-margin-top: 110px; }
.ec-movers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ec-movers-title-wrap { display: inline-flex; align-items: center; gap: 8px; }
.ec-movers-fire-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--ds-r-sm); background: var(--ds-danger-soft); color: var(--ds-danger); }
.ec-movers-title { margin: 0; font-size: var(--ds-fs-h4, 1.125rem); font-weight: var(--ds-fw-black); }
.ec-movers-legend { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ec-pulse-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-danger) 22%, transparent); animation: ec-pulse 2s ease-in-out infinite; }
@keyframes ec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.ec-movers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-sp-3, 12px); }
.ec-mover-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--ds-r-lg);
  background: var(--ds-surface-1); border: 1px solid var(--ds-line); overflow: hidden; transition: border-color var(--ds-dur-2), transform var(--ds-dur-2) var(--ds-ease-out); }
.ec-mover-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--ds-imp-high); }
.ec-mover-card:hover { border-color: var(--ds-line-strong); transform: translateY(-2px); }
.ec-mover-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ec-mover-curr { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-black); }
.ec-mover-badge-hot { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--ds-r-pill);
  background: var(--ds-danger-soft); color: var(--ds-danger); font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); }
.ec-mover-title { margin: 0; font-size: var(--ds-fs-body, 1rem); font-weight: var(--ds-fw-black); line-height: 1.6; text-align: start; }
.ec-mover-time { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ec-mover-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ec-mover-stat-item { display: flex; justify-content: space-between; gap: 6px; padding: 7px 10px; border-radius: var(--ds-r-sm); background: var(--ds-surface-2); font-size: var(--ds-fs-xs); }
.ec-mover-stat-item .lbl { color: var(--ds-text-2); }
.ec-mover-stat-item .val { font-weight: var(--ds-fw-bold); direction: ltr; font-variant-numeric: tabular-nums; }
.ec-mover-chart-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: var(--ds-r-md);
  border: 1px solid var(--ds-line); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-link, var(--ds-primary)); text-decoration: none; }
.ec-mover-chart-btn:hover { background: var(--ds-primary-soft); border-color: transparent; }
.ec-mover-skeleton, .ec-mover-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px;
  border-radius: var(--ds-r-lg); border: 1px dashed var(--ds-line); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

/* ---- 1b. Layout ------------------------------------------------------------ */
.ec-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--ds-sp-6, 24px); align-items: start; }
.ec-main { display: grid; gap: var(--ds-sp-3, 12px); min-width: 0; }

/* ---- 3. Week strip --------------------------------------------------------- */
.ec-week { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.ec-week-arrow { display: grid; place-items: center; width: 32px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line); background: var(--ds-surface-1); color: var(--ds-text-2); cursor: pointer; }
.ec-week-arrow:hover { color: var(--ds-text); border-color: var(--ds-line-strong); }
.ec-week-days { display: grid; grid-template-columns: repeat(7, minmax(6.25rem, 1fr)); gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.ec-week-days::-webkit-scrollbar { display: none; }
.ec-day { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line); background: var(--ds-surface-1);
  text-align: start; cursor: pointer; scroll-snap-align: start; transition: background-color var(--ds-dur-1), border-color var(--ds-dur-1); }
.ec-day:hover { border-color: var(--ds-line-strong); }
.ec-day[aria-pressed="true"] { background: var(--ds-surface-2); }
.ec-day[aria-current="date"] { box-shadow: 0 0 0 2px var(--ds-primary) inset; }
.ec-day-name { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-black); }
.ec-day-date { font-size: var(--ds-fs-2xs); color: var(--ds-text-2); }
.ec-day-counts { display: flex; gap: 8px; margin-top: 2px; font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-2); min-height: 14px; }
.ec-day-count { display: inline-flex; align-items: center; gap: 3px; }
.ec-day-count.is-zero { opacity: .45; }
.ec-day-skel { width: 70%; height: 10px; border-radius: 4px; background: var(--ds-surface-2); }

/* ---- 4. Chips + toolbar ---------------------------------------------------- */
.ec-smart-presets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.ec-smart-presets::-webkit-scrollbar { display: none; }
.ec-smart-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 14px; border-radius: var(--ds-r-pill);
  border: 1px solid var(--ds-line); background: var(--ds-surface-1); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); cursor: pointer;
  transition: background-color var(--ds-dur-1), color var(--ds-dur-1), border-color var(--ds-dur-1); }
.ec-smart-chip:hover { color: var(--ds-text); border-color: var(--ds-line-strong); }
.ec-smart-chip.active { background: var(--ds-text); border-color: var(--ds-text); color: var(--ds-bg); }
.ec-smart-chip.active .ec-imp i { background: currentColor; }

.ec-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: var(--ds-r-lg);
  background: var(--ds-surface-1); border: 1px solid var(--ds-line); }
.ec-topbar-start, .ec-topbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ec-topbar-end { flex: 1 1 18rem; justify-content: flex-end; }
.ec-range-nav { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 2px; border-radius: var(--ds-r-md); background: var(--ds-surface-2); }
.ec-nav-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--ds-r-sm); border: 0; background: transparent; color: var(--ds-text-2); cursor: pointer; }
.ec-nav-btn:hover { background: var(--ds-surface-1); color: var(--ds-text); }
.ec-range-text { padding: 0 6px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); white-space: nowrap; }
.ec-time-pill, .ec-cal-switch, .ec-lang-switch { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--ds-r-md);
  background: var(--ds-surface-2); font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ec-clock { font-weight: var(--ds-fw-black); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ec-select-pill { border: 0; background: transparent; color: var(--ds-text); font: inherit; font-weight: var(--ds-fw-bold); cursor: pointer; }
.ec-time-pill .tf-custom-select, .ec-cal-switch .tf-custom-select, .ec-lang-switch .tf-custom-select { min-width: 0; }
.ec-time-pill .tf-custom-select-trigger, .ec-cal-switch .tf-custom-select-trigger, .ec-lang-switch .tf-custom-select-trigger {
  min-height: 0; padding: 0 2px; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); gap: 4px; color: var(--ds-text); }
.ec-time-pill .tf-custom-select-trigger:hover, .ec-cal-switch .tf-custom-select-trigger:hover, .ec-lang-switch .tf-custom-select-trigger:hover,
.ec-time-pill .tf-custom-select.is-open .tf-custom-select-trigger, .ec-cal-switch .tf-custom-select.is-open .tf-custom-select-trigger,
.ec-lang-switch .tf-custom-select.is-open .tf-custom-select-trigger { border: 0; box-shadow: none; background: transparent; }
/* p30 a11y: the bare triggers inside the toolbar pills had no visible keyboard focus - ring the pill instead */
.ec-time-pill:has(.tf-custom-select-trigger:focus-visible), .ec-cal-switch:has(.tf-custom-select-trigger:focus-visible),
.ec-lang-switch:has(.tf-custom-select-trigger:focus-visible) { box-shadow: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-primary); }
.ec-time-pill .tf-custom-select-trigger:focus-visible, .ec-cal-switch .tf-custom-select-trigger:focus-visible,
.ec-lang-switch .tf-custom-select-trigger:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; border-radius: 4px; }
.ec-search-wrap { position: relative; flex: 1 1 12rem; max-width: 20rem; }
.ec-search-icon { position: absolute; inset-inline-start: 11px; top: 50%; translate: 0 -50%; color: var(--ds-text-3); pointer-events: none; }
.ec-search-wrap input { width: 100%; height: 36px; padding: 0 34px 0 12px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line); background: var(--ds-bg);
  color: var(--ds-text); font: inherit; font-size: var(--ds-fs-sm); }
.ec-search-wrap input::placeholder { color: var(--ds-text-3); }
.ec-search-wrap input:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-soft); }
.ec-filter-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line);
  background: var(--ds-surface-1); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); cursor: pointer; }
.ec-filter-btn:hover, .ec-filter-btn[aria-expanded="true"] { border-color: var(--ds-line-strong); background: var(--ds-surface-2); }
.ec-badge-count { color: var(--ds-primary); font-weight: var(--ds-fw-black); }
.ec-action-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line);
  background: var(--ds-surface-1); color: var(--ds-text-2); cursor: pointer; }
.ec-action-icon-btn:hover:not(:disabled) { color: var(--ds-text); border-color: var(--ds-line-strong); }
.ec-action-icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- 5. Filter drawer (TfUI .disclosure: chrome on the inner card) ---------- */
.ec-filter-inner { display: grid; gap: 16px; padding: 16px; border-radius: var(--ds-r-lg); border: 1px solid var(--ds-line); background: var(--ds-surface-1); }
.ec-main > #ec-filters:not(.is-open) { margin-top: calc(-1 * var(--ds-sp-3, 12px)); }
#ec-filters:not(.is-open) > .ec-filter-inner { padding-block: 0; border-width: 0; }
#ec-filters > .ec-filter-inner { transition: padding var(--ds-dur-2) var(--ds-ease-out); }
.ec-filter-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.ec-filter-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.ec-filter-title { display: block; margin-bottom: 8px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-black); color: var(--ds-text-2); }
.ec-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-chip-group .ec-check-item { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--ds-r-pill);
  border: 1px solid var(--ds-line); font-size: var(--ds-fs-xs); cursor: pointer; transition: background-color var(--ds-dur-1), border-color var(--ds-dur-1); }
.ec-chip-group .ec-check-item:hover { border-color: var(--ds-line-strong); }
.ec-chip-group .ec-check-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ec-chip-group .ec-check-item:has(input:checked) { background: var(--ds-primary-soft); border-color: var(--ds-primary); color: var(--ds-primary-ink, var(--ds-primary)); font-weight: var(--ds-fw-bold); }
.ec-chip-group .ec-check-item:has(input:focus-visible) { outline: 2px solid var(--ds-focus, var(--ds-primary)); outline-offset: 2px; }
.ec-chip-group .ec-flag-wrap { width: 16px; height: 11px; }
.ec-options-list { display: grid; gap: 8px; }
.ec-options-list .ec-check-item { display: flex; align-items: center; gap: 8px; font-size: var(--ds-fs-sm); cursor: pointer; }
.ec-options-list input { width: 16px; height: 16px; accent-color: var(--ds-primary); }
.ec-custom-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ds-line-soft); }
.ec-custom-dates .ec-filter-title { margin: 0; }
.ec-date-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ec-date-field { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ec-date-field input { height: 34px; padding: 0 8px; border-radius: var(--ds-r-sm); border: 1px solid var(--ds-line); background: var(--ds-bg); color: var(--ds-text); font: inherit; }
.ec-filter-actions { display: flex; justify-content: flex-end; }

/* ---- 10a. Notices ---------------------------------------------------------- */
.ec-status-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-radius: var(--ds-r-md); font-size: var(--ds-fs-sm);
  background: var(--ds-primary-soft); color: var(--ds-text); }
.ec-status-banner[data-tone="error"] { background: var(--ds-warn-soft); }
.ec-feedback-text:empty { display: none; }
.ec-feedback-text { margin: 0; font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ec-notice { padding: 12px 16px; border-radius: var(--ds-r-md); background: var(--ds-warn-soft); }

/* ---- 6. Results table (one markup → desktop table / mobile two-line cards) -- */
.ec-results-panel { border-radius: var(--ds-r-lg); border: 1px solid var(--ds-line); background: var(--ds-surface-1); overflow: clip; }
.ec-table-container { overflow-x: auto; }
.ec-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); table-layout: fixed; }
.ec-table thead th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: var(--ds-surface-1); border-bottom: 1px solid var(--ds-line);
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-2); text-align: start; white-space: nowrap; }
.ec-table .th-time { width: 5.5rem; } .ec-table .th-currency { width: 5.5rem; } .ec-table .th-impact { width: 3.25rem; }
.ec-table .th-num { width: 5.75rem; text-align: end; } .ec-table .th-save { width: 4.75rem; }
.ec-table td { padding: 10px 12px; vertical-align: middle; }
.ec-day-row th { position: sticky; top: 37px; z-index: 1; padding: 9px 14px; background: var(--ds-surface-2); text-align: start;
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-black); color: var(--ds-text); border-top: 1px solid var(--ds-line-soft); }
.ec-day-today { margin-inline-start: 8px; padding: 1px 8px; border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-text-on-primary, #fff); font-size: var(--ds-fs-2xs); }
.ec-event { border-top: 1px solid var(--ds-line-soft); transition: background-color var(--ds-dur-1); }
.ec-day-row + .ec-event, .ec-now-row + .ec-event { border-top: 0; }
.ec-event:hover { background: color-mix(in srgb, var(--ds-surface-2) 70%, transparent); }
.ec-event--next { background: color-mix(in srgb, var(--ds-primary) 6%, transparent); }
.ec-event.is-open { background: var(--ds-surface-2); }
.ec-cell-time time { font-weight: var(--ds-fw-black); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-countdown { display: block; margin-top: 2px; font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-black); color: var(--ds-danger); white-space: nowrap; }
.ec-countdown.is-live { color: var(--ds-up-ink, #16a34a); }
.ec-curr-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-black); }
.ec-impact-cell { text-align: center; }
.ec-title-cell { min-width: 0; }
.ec-title-btn { display: block; max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: start; font-weight: var(--ds-fw-bold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-title-btn[dir="auto"] { unicode-bidi: plaintext; text-align: right; }
.ec-lang-en .ec-title-btn[dir="auto"] { text-align: left; }
.ec-title-btn:hover { color: var(--ds-link, var(--ds-primary)); }
.ec-title-en { display: block; margin-top: 1px; font-size: var(--ds-fs-2xs); color: var(--ds-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.ec-num-cell { text-align: end; direction: ltr; font-variant-numeric: tabular-nums; font-weight: var(--ds-fw-medium); white-space: nowrap; }
html[dir="rtl"] .ec-num-cell, .ec-page .ec-num-cell { text-align: left; }
.ec-num-cell.is-empty { color: var(--ds-text-3); }
.ec-num-better { color: var(--ds-up-ink); font-weight: var(--ds-fw-black); }
.ec-num-worse { color: var(--ds-down-ink); font-weight: var(--ds-fw-black); }
.ec-save-cell { white-space: nowrap; text-align: end; }
.ec-event--holiday { color: var(--ds-text-2); }
.ec-event--holiday .ec-title-btn { font-weight: var(--ds-fw-medium); }
.ec-event--holiday .ec-cell-time time { font-weight: var(--ds-fw-bold); color: var(--ds-text-2); }
/* «اکنون» line: 2px danger rule + badge (DS v3) */
.ec-now-row td { position: relative; height: 0; padding: 0 !important; border-top: 2px solid var(--ds-danger); }
.ec-now-badge { position: absolute; inset-inline-start: 10px; top: -11px; padding: 0 7px; border-radius: 4px; background: var(--ds-danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 20px; }
.ec-now-meta { position: absolute; inset-inline-start: 58px; top: -10px; padding: 0 6px; border-radius: 4px; background: var(--ds-surface-1); color: var(--ds-danger);
  font-size: 10px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.ec-pagination { display: flex; justify-content: center; padding: 12px; }
.ec-pagination:has(.ec-btn-more[hidden]) { display: none; }

/* ---- 7. Inline expanded detail -------------------------------------------- */
.ec-xp-row td { padding: 0 14px 14px; background: var(--ds-surface-2); }
.ec-xp { display: grid; gap: 10px; padding-top: 2px; animation: ec-xp-in var(--ds-dur-2) var(--ds-ease-out); }
@keyframes ec-xp-in { from { opacity: 0; translate: 0 -4px; } }
.ec-xp-kv { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ec-xp-kv div { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--ds-r-sm); background: var(--ds-surface-1); font-size: var(--ds-fs-2xs); color: var(--ds-text-2); }
.ec-xp-kv b { color: var(--ds-text); font-size: var(--ds-fs-sm); text-align: start; font-variant-numeric: tabular-nums; }
.ec-xp-note { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); line-height: 1.8; }
.ec-xp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-xp-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line);
  background: var(--ds-surface-1); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-text); cursor: pointer; text-decoration: none; }
.ec-xp-btn:hover:not(:disabled) { border-color: var(--ds-line-strong); }
.ec-xp-btn:disabled { opacity: .45; cursor: not-allowed; }
.ec-xp-btn--primary { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-text-on-primary, #fff); }
.ec-xp-btn--primary:hover { background: var(--ds-primary-hover) !important; }
.ec-xp-btn--ghost { border-color: transparent; background: transparent; color: var(--ds-link, var(--ds-primary)); }

/* ---- 10b. Loading / empty -------------------------------------------------- */
.ec-state-box { display: grid; justify-items: center; gap: 10px; padding: 48px 16px; color: var(--ds-text-2); font-size: var(--ds-fs-sm); text-align: center; }
.ec-state-box[hidden] { display: none; }
.ec-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ds-line); border-top-color: var(--ds-primary); animation: ec-spin .8s linear infinite; }
@keyframes ec-spin { to { rotate: 360deg; } }
.ec-empty-actions { display: flex; justify-content: center; padding-top: 4px; }
.ec-footer-note { display: grid; gap: 4px; padding-inline: 4px; }
.ec-disclaimer, .ec-last-update { margin: 0; font-size: var(--ds-fs-2xs); color: var(--ds-text-3); line-height: 1.8; }

/* ---- 8. Sidebar ------------------------------------------------------------ */
.ec-sidebar { display: grid; gap: var(--ds-sp-3, 12px); position: sticky; top: 100px; }
.ec-widget { padding: 14px; border-radius: var(--ds-r-lg); border: 1px solid var(--ds-line); background: var(--ds-surface-1); }
.ec-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ec-widget-title { margin: 0; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-black); }
.ec-event-counter { font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-2); padding: 2px 8px; border-radius: var(--ds-r-pill); background: var(--ds-surface-2); }
.ec-cal-month-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ec-month-heading { margin: 0; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); }
.ec-month-arrow { width: 28px; height: 28px; border-radius: var(--ds-r-sm); border: 0; background: transparent; color: var(--ds-text-2); font-size: 18px; cursor: pointer; }
.ec-month-arrow:hover:not(:disabled) { background: var(--ds-surface-2); color: var(--ds-text); }
.ec-month-arrow:disabled { opacity: .3; }
.ec-weekdays-row, .ec-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ec-weekdays-row span { font-size: var(--ds-fs-2xs); color: var(--ds-text-3); font-weight: var(--ds-fw-bold); padding: 4px 0; }
.ec-days-grid button { height: 32px; border: 0; border-radius: var(--ds-r-sm); background: transparent; font-size: var(--ds-fs-xs); cursor: pointer; font-variant-numeric: tabular-nums; }
.ec-days-grid button:hover { background: var(--ds-surface-2); }
.ec-days-grid button[aria-pressed="true"] { background: var(--ds-primary-soft); color: var(--ds-primary-ink, var(--ds-primary)); font-weight: var(--ds-fw-black); }
.ec-days-grid button[aria-current="date"] { box-shadow: 0 0 0 1.5px var(--ds-primary) inset; font-weight: var(--ds-fw-black); }
.ec-presets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ds-line-soft); }
.ec-presets-col { display: grid; gap: 6px; align-content: start; }
.ec-preset-link { height: 32px; border-radius: var(--ds-r-sm); border: 1px solid var(--ds-line); background: transparent; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); cursor: pointer; }
.ec-preset-link:hover { border-color: var(--ds-line-strong); }
.ec-preset-link[aria-pressed="true"] { background: var(--ds-text); border-color: var(--ds-text); color: var(--ds-bg); }
.ec-rates-list { display: grid; gap: 4px; }
.ec-rate-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 4.75rem; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: var(--ds-r-sm);
  background: transparent; cursor: pointer; text-align: start; direction: rtl; }
.ec-rate-row:hover { background: var(--ds-surface-2); }
.ec-rate-row > .ec-flag-wrap { order: -2; } .ec-rate-row > .ec-rate-name { order: -1; }
.ec-rate-name { font-size: var(--ds-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-rate-badge { position: relative; display: block; height: 22px; border-radius: var(--ds-r-xs, 6px); background: var(--ds-surface-2); overflow: hidden; }
.ec-rate-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ds-primary-soft); }
.ec-rate-val { position: relative; display: block; padding: 0 6px; line-height: 22px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-black); text-align: left; font-variant-numeric: tabular-nums; }
.ec-rates-loading, .ec-rates-error { font-size: var(--ds-fs-xs); color: var(--ds-text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-rates-error-icon { color: var(--ds-warn); display: inline-flex; }
.ec-retry-btn { min-height: 28px; padding: 0 10px; font-size: var(--ds-fs-2xs); }
.ec-guide-list { display: grid; gap: 8px; }
.ec-guide-row { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 8px; font-size: var(--ds-fs-xs); }
.ec-guide-label { font-weight: var(--ds-fw-bold); white-space: nowrap; }
.ec-guide-desc { color: var(--ds-text-2); font-size: var(--ds-fs-2xs); }
.ec-next-content { display: grid; gap: 6px; font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ec-next-name { color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-black); line-height: 1.7; }
.ec-next-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.ec-next-curr { font-weight: var(--ds-fw-black); color: var(--ds-text); }
.ec-next-content .ec-countdown { display: inline-flex; width: fit-content; padding: 3px 10px; border-radius: var(--ds-r-pill); background: var(--ds-danger-soft); font-size: var(--ds-fs-xs); }

/* ---- 9. Dialog ------------------------------------------------------------- */
.ec-dialog { width: min(32rem, calc(100vw - 32px)); padding: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-r-xl, 22px); background: var(--ds-surface-1);
  color: var(--ds-text); box-shadow: var(--ds-shadow-3); }
.ec-dialog::backdrop { background: var(--ds-overlay, rgba(2, 6, 23, .55)); backdrop-filter: blur(3px); }
.ec-dialog[open] { animation: ec-dlg-in var(--ds-dur-3) var(--ds-ease-out); }
@keyframes ec-dlg-in { from { opacity: 0; scale: .97; } }
.ec-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; }
.ec-dialog-tag { font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); color: var(--ds-gold-ink, var(--ds-gold)); }
.ec-dialog-close { width: 34px; height: 34px; border-radius: var(--ds-r-sm); border: 0; background: var(--ds-surface-2); font-size: 20px; line-height: 1; cursor: pointer; }
.ec-dialog-title { margin: 6px 18px 0; font-size: var(--ds-fs-h4, 1.125rem); font-weight: var(--ds-fw-black); line-height: 1.6; }
.ec-dialog-body { padding: 12px 18px; }
.ec-detail-list { display: grid; grid-template-columns: auto 1fr; margin: 0; border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r-md); overflow: hidden; }
.ec-detail-list dt, .ec-detail-list dd { margin: 0; padding: 9px 12px; font-size: var(--ds-fs-sm); border-top: 1px solid var(--ds-line-soft); }
.ec-detail-list dt:first-of-type, .ec-detail-list dt:first-of-type + dd { border-top: 0; }
.ec-detail-list dt { color: var(--ds-text-2); background: var(--ds-surface-2); white-space: nowrap; }
.ec-detail-list dd { font-weight: var(--ds-fw-bold); display: flex; align-items: center; gap: 6px; }
.ec-dialog-body .ec-last-update { margin-top: 10px; }
.ec-dialog-footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.ec-dialog-footer > * { flex: 1 1 10rem; }

/* ---- 11. Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .ec-layout { grid-template-columns: minmax(0, 1fr); }
  .ec-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .ec-movers-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 82%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .ec-movers-grid::-webkit-scrollbar { display: none; }
  .ec-mover-card { scroll-snap-align: start; }
  .ec-filter-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ec-shell { gap: var(--ds-sp-4, 16px); }
  .ec-movers-legend { display: none; }
  .ec-week { grid-template-columns: minmax(0, 1fr); }
  .ec-week-arrow { display: none; }
  .ec-week-days { grid-template-columns: repeat(7, 6rem); }
  .ec-topbar { padding: 6px; }
  .ec-topbar-start { width: 100%; }
  .ec-range-nav { flex: 1 1 100%; justify-content: space-between; }
  .ec-topbar-end { flex-basis: 100%; flex-wrap: nowrap; }
  .ec-search-wrap { max-width: none; flex: 1 1 6rem; }
  .ec-time-pill .ec-clock, .ec-time-pill > .ec-icon { display: none; }
  .ec-time-pill, .ec-cal-switch, .ec-lang-switch { padding: 0 8px; }
  .ec-filter-btn { padding: 0 10px; }
  .ec-sidebar { grid-template-columns: minmax(0, 1fr); }
  /* rows → two-line cards: line 1 time · title · actual ; line 2 currency · importance */
  .ec-table, .ec-table tbody { display: block; }
  .ec-table thead { display: none; }
  .ec-table tr { display: block; }
  .ec-event { display: grid !important; grid-template-columns: 3.5rem auto minmax(0, 1fr) auto; grid-template-areas: "t n n a" "t c i a"; column-gap: 10px; row-gap: 3px;
    padding: 10px 12px; align-items: center; }
  .ec-event > td { padding: 0; }
  .ec-cell-time { grid-area: t; align-self: start; }
  /* p31 (8.22): the live countdown used to sit under the clock in the 3.5rem time column with
     white-space:nowrap, so «≈ ۲ ساعت و ۱۵ دقیقه تا انتشار» ran over the title. Only on rows that HAVE
     a countdown, the time cell becomes display:contents and the countdown gets its own third row as a
     small tabular chip beneath currency · importance (320–430px safe). */
  .ec-event:has(.ec-countdown) { grid-template-areas: "t n n a" "t c i a" "t d d d"; }
  .ec-event:has(.ec-countdown) > .ec-cell-time { display: contents; }
  .ec-event:has(.ec-countdown) > .ec-cell-time > time { grid-area: t; align-self: start; }
  .ec-event .ec-cell-time > .ec-countdown { grid-area: d; justify-self: start; display: inline-flex; align-items: center; margin-top: 2px;
    padding: 2px 9px; border-radius: var(--ds-r-pill, 999px); background: var(--ds-danger-soft, hsl(0 84% 60% / .1));
    font-variant-numeric: tabular-nums; white-space: normal; line-height: 1.5; max-width: 100%; }
  .ec-event .ec-cell-time > .ec-countdown:empty { display: none; }
  .ec-event .ec-cell-time > .ec-countdown.is-live { background: hsl(142 71% 45% / .12); }
  .ec-title-cell { grid-area: n; }
  .ec-cell-currency { grid-area: c; }
  .ec-impact-cell { grid-area: i; justify-self: start; }
  .ec-num-cell { display: none; }
  .ec-num-cell:nth-child(5) { display: block; grid-area: a; align-self: center; font-size: var(--ds-fs-sm); }
  .ec-num-cell:nth-child(5).is-empty { visibility: hidden; }
  .ec-save-cell { display: none; }
  .ec-title-btn { white-space: normal; line-height: 1.6; }
  .ec-title-en { display: none; }
  .ec-day-row th { top: 0; display: block; }
  .ec-now-row td { display: block; }
  .ec-xp-row td { display: block; padding: 0 12px 12px; }
  .ec-xp-kv { display: grid; }
  .ec-xp-actions > * { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-page *, .ec-dialog { animation: none !important; transition: none !important; }
}

/* ---- phase 23 polish (both themes) ---- */
/* active chips/presets: brand primary instead of ink-black (light) / ink-white (dark) */
.ec-smart-chip.active, .ec-preset-link[aria-pressed="true"] { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; box-shadow: 0 8px 18px -12px hsl(199 89% 48% / .9); }
/* mover accent: a rounded bar inside the card instead of a full-height edge cut by the radius */
.ec-mover-card { overflow: hidden; }
.ec-mover-card::before { inset-block: 14px; width: 3px; border-radius: 3px; }
/* flags: white field so white-ground flags (JP, …) don't vanish on light surfaces */
.ec-flag-wrap { background: #fff; }
.ec-flag-wrap:has(.ec-flag-svg[stroke]) { background: transparent; }
html:not(.dark-theme) .ec-flag-wrap { box-shadow: 0 0 0 1px hsl(215 25% 80%) inset, 0 1px 2px hsl(215 30% 40% / .12); }