/* economic-calendar.css
   Interactive calendar controls, events table, mobile cards.
   Uses --market-* variables from market-portal.css (dark/gold palette).
   Scoped to .ec-* to avoid bleeding into other page sections.
*/

/* ── Date navigation controls ────────────────────────────────────────────── */

.ec-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  margin: 1.25rem 0 0.6rem;
}

.ec-date-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.ec-btn-nav {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(216, 177, 90, 0.28);
  background: rgba(216, 177, 90, 0.07);
  color: var(--market-gold, #d8b15a);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.14s, border-color 0.14s;
  flex-shrink: 0;
}

.ec-btn-nav:hover,
.ec-btn-nav:focus-visible {
  background: rgba(216, 177, 90, 0.16);
  border-color: rgba(216, 177, 90, 0.55);
  outline: none;
}

.ec-btn-quick {
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
  color: var(--market-soft, #c9d2ca);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  line-height: 1.4;
}

.ec-btn-quick:hover,
.ec-btn-quick:focus-visible {
  background: rgba(216, 177, 90, 0.11);
  border-color: rgba(216, 177, 90, 0.38);
  color: var(--market-gold, #d8b15a);
  outline: none;
}

.ec-btn-quick.ec-active {
  background: rgba(216, 177, 90, 0.16);
  border-color: rgba(216, 177, 90, 0.5);
  color: var(--market-gold-bright, #f2d27b);
}

.ec-date-input {
  height: 1.95rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: var(--market-text, #f4f7f1);
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
  max-width: 9rem;
}

.ec-date-input:focus {
  border-color: rgba(216, 177, 90, 0.48);
  background: rgba(255, 255, 255, 0.08);
}

.ec-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.65) sepia(0.8) saturate(2) hue-rotate(12deg);
  cursor: pointer;
  opacity: 0.8;
}

/* ── Filters ─────────────────────────────────────────────────────────────── */

.ec-filters {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.ec-select {
  height: 1.95rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(12, 15, 19, 0.92);
  color: var(--market-soft, #c9d2ca);
  font-size: 0.79rem;
  cursor: pointer;
  outline: none;
  min-width: 7rem;
}

.ec-select:focus {
  border-color: rgba(216, 177, 90, 0.48);
}

.ec-search {
  height: 1.95rem;
  padding: 0 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
  color: var(--market-text, #f4f7f1);
  font-size: 0.79rem;
  outline: none;
  min-width: 10rem;
}

.ec-search::placeholder {
  color: var(--market-muted, #8d978f);
}

.ec-search:focus {
  border-color: rgba(216, 177, 90, 0.48);
  background: rgba(255, 255, 255, 0.075);
}

/* ── Status bar ──────────────────────────────────────────────────────────── */

.ec-status-bar {
  font-size: 0.74rem;
  color: var(--market-muted, #8d978f);
  margin: 0 0 0.65rem;
  min-height: 1.1em;
  line-height: 1.4;
}

.ec-status-bar.ec-status-live     { color: #7dff8c; }
.ec-status-bar.ec-status-cache    { color: var(--market-gold, #d8b15a); }
.ec-status-bar.ec-status-degraded { color: var(--market-red, #ff7878); }

/* ── Table wrapper ───────────────────────────────────────────────────────── */

.ec-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  margin: 0;
}

/* ── Desktop table ───────────────────────────────────────────────────────── */

.ec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 580px;
}

.ec-table thead tr {
  background: rgba(216, 177, 90, 0.06);
}

.ec-table th {
  padding: 0.55rem 0.85rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--market-muted, #8d978f);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.ec-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  vertical-align: middle;
  color: var(--market-text, #f4f7f1);
}

.ec-table tbody tr.ec-row {
  cursor: pointer;
  transition: background 0.11s;
}

.ec-table tbody tr.ec-row:hover {
  background: rgba(216, 177, 90, 0.045);
}

.ec-table tbody tr.ec-row.ec-row-expanded {
  background: rgba(216, 177, 90, 0.075);
}

.ec-table tbody tr.ec-row:last-child td {
  border-bottom: none;
}

/* ── Table cell classes ──────────────────────────────────────────────────── */

.ec-col-time {
  white-space: nowrap;
  color: var(--market-soft, #c9d2ca);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.ec-col-country {
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--market-soft, #c9d2ca);
}

.ec-col-event strong {
  display: block;
  color: var(--market-text, #f4f7f1);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.35;
}

.ec-col-event small {
  display: block;
  color: var(--market-muted, #8d978f);
  font-size: 0.73rem;
  margin-top: 0.1rem;
}

.ec-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  white-space: nowrap;
  color: var(--market-soft, #c9d2ca);
}

.ec-col-num.ec-val-hot  { color: var(--market-red, #ff7878);  font-weight: 700; }
.ec-col-num.ec-val-soft { color: var(--market-green, #7dff8c); font-weight: 700; }
.ec-col-num.ec-val-set  { color: var(--market-text, #f4f7f1);  font-weight: 600; }

/* ── Impact badges ───────────────────────────────────────────────────────── */

.ec-badge {
  display: inline-block;
  padding: 0.17rem 0.48rem;
  border-radius: 4px;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ec-badge-high   { background: rgba(255, 120, 120, 0.15); color: var(--market-red, #ff7878);  border: 1px solid rgba(255, 120, 120, 0.28); }
.ec-badge-medium { background: rgba(216, 177, 90, 0.14);  color: var(--market-gold, #d8b15a); border: 1px solid rgba(216, 177, 90, 0.28); }
.ec-badge-low    { background: rgba(125, 255, 140, 0.09); color: var(--market-green, #7dff8c);border: 1px solid rgba(125, 255, 140, 0.2); }

/* investing.com-style impact meter: three bars, filled by importance. */
.ec-impact-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-inline-end: 6px;
  height: 12px;
  vertical-align: middle;
}
.ec-impact-bar {
  display: inline-block;
  width: 3px;
  background: rgba(180, 196, 210, 0.22);
  border-radius: 1px;
}
.ec-impact-bar:nth-child(1) { height: 5px; }
.ec-impact-bar:nth-child(2) { height: 8px; }
.ec-impact-bar:nth-child(3) { height: 11px; }
.ec-impact-bar.is-on { background: var(--market-red, #ff7878); }
/* Filled bars take the row's importance colour. */
td:has(.ec-badge-medium) .ec-impact-bar.is-on { background: var(--market-gold, #d8b15a); }
td:has(.ec-badge-low) .ec-impact-bar.is-on { background: var(--market-green, #7dff8c); }

/* Country flag before the code. */
.ec-flag {
  font-size: 1.05rem;
  margin-inline-end: 6px;
  line-height: 1;
  vertical-align: middle;
}
.ec-country-code { vertical-align: middle; }
.ec-badge-estimated {
  display: inline-block;
  padding: 0.1rem 0.38rem;
  border-radius: 4px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(216, 177, 90, 0.1);
  color: var(--market-gold, #d8b15a);
  border: 1px solid rgba(216, 177, 90, 0.28);
  margin-left: 0.3rem;
  vertical-align: middle;
}
[dir="rtl"] .ec-badge-estimated { margin-left: 0; margin-right: 0.3rem; }

/* ── Schedule-estimate notice (dark theme) ───────────────────────────────── */

.ec-schedule-notice {
  font-size: 0.82rem;
  color: var(--market-soft, #c9d2ca);
  background: rgba(216, 177, 90, 0.07);
  border: 1px solid rgba(216, 177, 90, 0.3);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

/* ── Pending (not yet released) numeric value ────────────────────────────── */

.ec-col-num-pending {
  font-size: 0.75rem;
  color: var(--market-muted, #8d978f);
  font-style: italic;
}

/* ── Date-estimate sub-label ─────────────────────────────────────────────── */

.ec-date-estimate {
  display: block;
  font-size: 0.7rem;
  color: var(--market-muted, #8d978f);
  margin-top: 0.1rem;
}

/* ── Expandable detail panel (table row) ─────────────────────────────────── */

tr.ec-detail-row td {
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(216, 177, 90, 0.025);
}

.ec-detail-inner {
  padding: 0.85rem 1.05rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.55rem 1.5rem;
  font-size: 0.82rem;
}

.ec-detail-inner dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--market-muted, #8d978f);
  margin-bottom: 0.18rem;
}

.ec-detail-inner dd {
  margin: 0 0 0.3rem;
  color: var(--market-text, #f4f7f1);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.ec-detail-assets {
  grid-column: 1 / -1;
}

.ec-asset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.ec-asset-tag {
  display: inline-block;
  padding: 0.14rem 0.44rem;
  border-radius: 4px;
  background: rgba(216, 177, 90, 0.09);
  color: var(--market-gold, #d8b15a);
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(216, 177, 90, 0.2);
}

.ec-detail-disclaimer {
  grid-column: 1 / -1;
  font-size: 0.73rem;
  color: var(--market-muted, #8d978f);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.55rem;
  margin-top: 0.2rem;
  font-style: italic;
}

/* ── Empty / loading ─────────────────────────────────────────────────────── */

.ec-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--market-muted, #8d978f);
  font-size: 0.88rem;
}

.ec-empty-state strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: var(--market-gold, #d8b15a);
}

/* ── Mobile cards (≤ 639px) ──────────────────────────────────────────────── */

@media (max-width: 639px) {
  .ec-table { display: none; }
  .ec-cards  { display: flex; flex-direction: column; gap: 0.55rem; }

  .ec-card {
    background: rgba(17, 21, 27, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.13s;
  }

  .ec-card:hover,
  .ec-card.ec-card-expanded {
    border-color: rgba(216, 177, 90, 0.32);
  }

  .ec-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .ec-card-event strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--market-text, #f4f7f1);
    line-height: 1.35;
  }

  .ec-card-event small {
    display: block;
    font-size: 0.73rem;
    color: var(--market-muted, #8d978f);
    margin-top: 0.1rem;
  }

  .ec-card-time {
    font-size: 0.76rem;
    color: var(--market-soft, #c9d2ca);
    font-variant-numeric: tabular-nums;
    margin-top: 0.4rem;
  }

  .ec-card-nums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.45rem;
  }

  .ec-card-num-cell { text-align: center; }

  .ec-card-num-label {
    display: block;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--market-muted, #8d978f);
    margin-bottom: 0.12rem;
  }

  .ec-card-num-val {
    display: block;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--market-text, #f4f7f1);
  }

  .ec-card-detail {
    display: none;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: var(--market-soft, #c9d2ca);
  }

  .ec-card.ec-card-expanded .ec-card-detail { display: block; }

  .ec-card-assets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
  }

  .ec-card-disclaimer {
    margin-top: 0.5rem;
    font-size: 0.71rem;
    color: var(--market-muted, #8d978f);
    font-style: italic;
  }

  .ec-controls { flex-direction: column; align-items: flex-start; }
  .ec-filters  { margin-inline-start: 0; }
  .ec-search   { min-width: 0; width: 100%; }
  .ec-table-wrap { border-radius: 0; border-left: none; border-right: none; }
}

@media (min-width: 640px) {
  .ec-cards { display: none; }
}

/* ── RTL overrides ───────────────────────────────────────────────────────── */

[dir="rtl"] .ec-filters        { margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] .ec-table th,
[dir="rtl"] .ec-table td        { text-align: right; }
[dir="rtl"] .ec-col-num         { text-align: left; }
[dir="rtl"] .ec-detail-inner    { direction: rtl; }
[dir="rtl"] .ec-card-num-cell   { text-align: center; }

/* ── Holiday badge ───────────────────────────────────────────────────────── */

.ec-badge-holiday {
  background: rgba(148, 163, 184, 0.1);
  color: var(--market-muted, #8d978f);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

/* ── Freshness badges ────────────────────────────────────────────────────── */
/* Subtle inline labels: due-soon / releasing / released.                     */
/* Intentionally smaller and lighter than impact badges.                      */

.ec-freshness {
  display: inline-block;
  padding: 0.08rem 0.32rem;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-inline-start: 0.3rem;
  vertical-align: middle;
}

.ec-freshness-due-soon  { background: rgba(216,177,90,0.12);  color: var(--market-gold,  #d8b15a); border: 1px solid rgba(216,177,90,0.25);  }
.ec-freshness-releasing { background: rgba(255,160,80,0.11);  color: #e8a040;                      border: 1px solid rgba(255,160,80,0.24);  }
.ec-freshness-released  { background: rgba(125,255,140,0.09); color: var(--market-green, #7dff8c); border: 1px solid rgba(125,255,140,0.2); }

/* ── Refresh button ──────────────────────────────────────────────────────── */

.ec-btn-refresh {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  color: var(--market-soft, #c9d2ca);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  margin-inline-start: auto;
}

.ec-btn-refresh:hover:not(:disabled),
.ec-btn-refresh:focus-visible {
  background: rgba(216, 177, 90, 0.11);
  border-color: rgba(216, 177, 90, 0.38);
  color: var(--market-gold, #d8b15a);
  outline: none;
}

.ec-btn-refresh:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Date group headers (week view) ──────────────────────────────────────── */

.ec-date-group-row { pointer-events: none; }

.ec-date-group-cell {
  padding: 0.55rem 0.85rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--market-gold, #d8b15a);
  background: rgba(216, 177, 90, 0.04);
  border-bottom: 1px solid rgba(216, 177, 90, 0.14);
}

.ec-date-group-header {
  padding: 0.5rem 0.9rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--market-gold, #d8b15a);
  border-bottom: 1px solid rgba(216, 177, 90, 0.14);
  margin-top: 0.4rem;
}

/* ── Intelligence detail panel ───────────────────────────────────────────── */

.ec-detail-intelligence {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.55rem;
  margin-top: 0.2rem;
}

.ec-detail-intelligence dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.35rem 1.2rem;
}

.ec-surprise-hot    { color: var(--market-red,   #ff7878); font-weight: 600; }
.ec-surprise-soft   { color: var(--market-green, #7dff8c); font-weight: 600; }
.ec-surprise-inline { color: var(--market-soft,  #c9d2ca); }

/* ── Empty state hint ────────────────────────────────────────────────────── */

.ec-empty-hint {
  font-size: 0.79rem;
  color: var(--market-muted, #8d978f);
  margin-top: 0.35rem;
}

/* ── Calendar loading paragraph ──────────────────────────────────────────── */

.calendar-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--market-muted, #8d978f);
  font-size: 0.88rem;
  font-style: italic;
}

/* ── External calendar fallback widget ───────────────────────────────────── */

.ec-priority-notice {
  font-size: 0.82rem;
  color: var(--market-muted, #8d978f);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.ec-external-frame-wrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
  margin-top: 0;
}

.ec-external-frame-wrap iframe {
  display: block;
  width: 100%;
  min-height: 580px;
  border: none;
}

.ec-external-disclaimer {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--market-muted, #8d978f);
  font-style: italic;
}

@media (max-width: 700px) {
  .ec-external-frame-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ec-external-frame-wrap iframe {
    min-height: 420px;
    min-width: 480px;
  }
}

/* ── Data-source notices (dark theme) ───────────────────────────────────── */

.ec-stale-cache-notice {
  font-size: 0.82rem;
  color: var(--market-soft, #c9d2ca);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.ec-external-notice {
  font-size: 0.85rem;
  color: var(--market-soft, #c9d2ca);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* ── Volatility labels ───────────────────────────────────────────────────── */

.ec-volatility {
  display: inline-block;
  padding: 0.1rem 0.38rem;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-inline-start: 0.3rem;
  vertical-align: middle;
}

.ec-volatility-high   { background: rgba(255,120,120,0.1); color: var(--market-red,   #ff7878); border: 1px solid rgba(255,120,120,0.22); }
.ec-volatility-medium { background: rgba(216,177,90,0.09); color: var(--market-gold,  #d8b15a); border: 1px solid rgba(216,177,90,0.2);  }
.ec-volatility-low    { background: rgba(125,255,140,0.07);color: var(--market-green, #7dff8c); border: 1px solid rgba(125,255,140,0.18);}

/* ── Release state badges (upcoming / live / released) ───────────────────── */

.ec-release-state {
  display: inline-block;
  padding: 0.08rem 0.32rem;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-inline-start: 0.3rem;
  vertical-align: middle;
}

.ec-release-upcoming { background: rgba(148,163,184,0.09); color: #94a3b8;                      border: 1px solid rgba(148,163,184,0.2);  }
.ec-release-live     { background: rgba(255,160,80,0.11);  color: #e8a040;                      border: 1px solid rgba(255,160,80,0.24);  }
.ec-release-released { background: rgba(125,255,140,0.09); color: var(--market-green, #7dff8c); border: 1px solid rgba(125,255,140,0.2); }

/* ── Pre-release countdown timer ─────────────────────────────────────────── */

.ec-countdown {
  display: inline-block;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--market-gold, #d8b15a);
  font-weight: 600;
  margin-inline-start: 0.3rem;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

/* ── Most Important Today section ────────────────────────────────────────── */

.ec-top-events {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(216, 177, 90, 0.13);
}

.ec-top-events-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--market-gold, #d8b15a);
  margin-bottom: 0.65rem;
}

.ec-top-events-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.ec-top-event-card {
  flex: 1 1 260px;
  max-width: 380px;
  background: rgba(216, 177, 90, 0.035);
  border: 1px solid rgba(216, 177, 90, 0.14);
  border-radius: 8px;
  padding: 0.75rem 0.9rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ec-top-event-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ec-top-event-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--market-text, #f4f7f1);
  flex: 1 1 auto;
}

.ec-top-event-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.ec-top-event-time {
  font-size: 0.76rem;
  color: var(--market-soft, #c9d2ca);
  font-variant-numeric: tabular-nums;
}

.ec-top-event-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ec-top-event-impact {
  font-size: 0.76rem;
  color: var(--market-muted, #8d978f);
  line-height: 1.5;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.4rem;
}

/* ── Detail panel: interpretation & historical note ──────────────────────── */

.ec-detail-interpretation,
.ec-detail-history {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.55rem;
  margin-top: 0.2rem;
}

.ec-detail-interpretation dt,
.ec-detail-history dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--market-muted, #8d978f);
  margin-bottom: 0.18rem;
}

.ec-interpretation-text,
.ec-history-text {
  font-size: 0.81rem;
  color: var(--market-soft, #c9d2ca);
  line-height: 1.55;
  margin: 0;
}

.ec-history-text {
  color: var(--market-muted, #8d978f);
  font-style: italic;
}

/* ── Filter toggle buttons (Gold Events / Fed Events) ────────────────────── */

.ec-btn-filter-toggle {
  border-style: dashed;
}

.ec-btn-filter-toggle.ec-active {
  border-style: solid;
  background: rgba(216, 177, 90, 0.14);
  border-color: rgba(216, 177, 90, 0.45);
  color: var(--market-gold-bright, #f2d27b);
}

/* ── Mobile additions ────────────────────────────────────────────────────── */

@media (max-width: 639px) {
  .ec-date-group-header { margin-top: 0.6rem; }
  .ec-btn-refresh       { margin-inline-start: 0; }
  .ec-top-events-list   { flex-direction: column; }
  .ec-top-event-card    { max-width: 100%; }
}

/* ── Phase 103: institutional economic-intelligence surfacing ──────────────
   Dark-theme only. Surfaces release-state, forecast basis, surprise and
   revision from data/intelligence/economic-intelligence.json. A historical
   proxy is styled distinctly from a real consensus so it can never be mistaken
   for one. No trading-signal colours, no light backgrounds. */
.ec-state-badge {
  display: inline-block;
  margin-inline-start: 0.4rem;
  margin-top: 0.25rem;
  padding: 0.08rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(226, 232, 240, 0.85);
  vertical-align: middle;
}
.ec-state-scheduled { border-color: rgba(148, 163, 184, 0.35); color: rgba(203, 213, 225, 0.85); }
.ec-state-awaiting  { border-color: rgba(216, 177, 90, 0.45); color: rgba(226, 191, 120, 0.95); background: rgba(216, 177, 90, 0.08); }
.ec-state-released,
.ec-state-parsed    { border-color: rgba(110, 231, 216, 0.45); color: rgba(150, 235, 220, 0.95); background: rgba(110, 231, 216, 0.08); }
.ec-state-revised   { border-color: rgba(167, 139, 250, 0.45); color: rgba(196, 181, 253, 0.95); background: rgba(167, 139, 250, 0.08); }
.ec-state-delayed   { border-color: rgba(248, 150, 100, 0.45); color: rgba(251, 175, 130, 0.95); background: rgba(248, 150, 100, 0.08); }
.ec-state-archived  { border-color: rgba(100, 116, 139, 0.35); color: rgba(148, 163, 184, 0.7); }

/* Forecast basis — consensus vs proxy vs unavailable (visually distinct). */
.ec-fc-consensus   { color: rgba(150, 235, 220, 0.95); font-weight: 600; }
.ec-fc-proxy       { color: rgba(226, 191, 120, 0.95); font-weight: 600; font-style: italic; }
.ec-fc-unavailable { color: rgba(148, 163, 184, 0.7); font-style: italic; }

/* Surprise rendering. */
.ec-surprise-hot     { color: rgba(251, 146, 110, 0.95); font-weight: 600; }
.ec-surprise-soft    { color: rgba(110, 200, 231, 0.95); font-weight: 600; }
.ec-surprise-inline  { color: rgba(203, 213, 225, 0.85); }
.ec-surprise-proxy   { color: rgba(226, 191, 120, 0.9); font-style: italic; opacity: 0.92; }
.ec-surprise-await   { color: rgba(148, 163, 184, 0.7); font-style: italic; }
.ec-macro-read       { color: rgba(203, 213, 225, 0.82); line-height: 1.5; }

[dir="rtl"] .ec-state-badge { margin-inline-start: 0; margin-inline-end: 0.4rem; }

/* ── Phase 104: global acquisition-method badges (dark theme) ────────────── */
.ec-acq-badge {
  display: inline-block;
  margin-inline-start: 0.4rem;
  margin-top: 0.25rem;
  padding: 0.08rem 0.5rem;
  font-size: 0.64rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  vertical-align: middle;
}
.ec-acq-official  { border-color: rgba(110, 231, 216, 0.4); color: rgba(150, 235, 220, 0.92); background: rgba(110, 231, 216, 0.06); }
.ec-acq-recurring { border-color: rgba(148, 163, 184, 0.35); color: rgba(203, 213, 225, 0.8); font-style: italic; }
[dir="rtl"] .ec-acq-badge { margin-inline-start: 0; margin-inline-end: 0.4rem; }

/* ── Phase 105: macro reaction intelligence (dark theme, non-signal) ──────── */
.ec-rx-confirmed { color: rgba(150, 235, 220, 0.95); font-weight: 600; }
.ec-rx-rejected  { color: rgba(251, 146, 110, 0.92); font-weight: 600; }
.ec-rx-fading    { color: rgba(226, 191, 120, 0.92); font-style: italic; }
.ec-rx-mixed     { color: rgba(203, 213, 225, 0.85); }
.ec-rx-await     { color: rgba(148, 163, 184, 0.7); font-style: italic; }

/* ── Phase 106: liquidity & regime context (dark theme, non-signal) ───────── */
.ec-regime-state { color: rgba(150, 235, 220, 0.92); font-weight: 600; }