/* ════════════════════════════════════════════
   ECONOMIC CALENDAR
   ════════════════════════════════════════════ */

/* filter bar */
.ec-filter-bar {
  padding: 5px 8px 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ec-filter-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ec-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ec-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.1s, border-color 0.1s;
}
.ec-chip-on {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(245, 166, 35, 0.08);
}
.ec-chip-off {
  color: #444;
  border-color: #2a2a2a;
  background: transparent;
}
.ec-chip-on:hover  { background: rgba(245, 166, 35, 0.18); }
.ec-chip-off:hover { border-color: #555; color: #666; }
.ec-chip-flag {
  width: 14px;
  vertical-align: middle;
}
.ec-chip-off .ec-chip-flag { opacity: 0.25; }

/* day event count badge */
.ec-day-count {
  font-size: 10px;
  color: var(--accent);
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 8px;
  padding: 0 5px;
  line-height: 15px;
}

/* nav bar */
.ec-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ec-nav-btn {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: color 0.1s, border-color 0.1s;
  user-select: none;
}
.ec-nav-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ec-week-label {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: bold;
  min-width: 180px;
  text-align: center;
}

.ec-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px;
}

.ec-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ec-day-group {
  margin-bottom: 4px;
}

.ec-day-cards {
  display: flex;
  flex-direction: column;
}

.ec-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 6px 18px;
  border-bottom: 1px solid #1a1a1a;
  transition: background 0.1s;
}
.ec-card:hover {
  background: var(--hover);
}

.ec-flag {
  width: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}

.ec-empty-day {
  padding: 6px 18px;
  color: #333;
  font-size: 11px;
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────
   Phase 6c — cards
   Stacked-item lists for news (headlines, news_feed) and event-grouped
   calendar (economic_calendar). Editorial-calm: Inter, hairlines, hover lift.
   Placed after legacy .headline-* / .news-* / .ec-* rules so cascade applies.
   ──────────────────────────────────────────────────────────────────────── */

.fl-card-list {
    display: flex;
    flex-direction: column;
}

.fl-card-item {
    padding: 9px 0;
    border-bottom: 1px solid #1A1A1A;
    transition: background 80ms ease-out;
    text-decoration: none;
    color: inherit;
    display: block;
}

.fl-card-item:hover {
    background: var(--elevated);
    text-decoration: none;
}

.fl-card-item:last-child {
    border-bottom: none;
}

.fl-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 10.5px;
    color: #888;
}

.fl-card-source {
    color: #888;
}

.fl-card-time {
    color: #777;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.fl-card-title {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    color: #E0E0E0;
    font-weight: 400;
}

.fl-card-day {
    color: #777;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 0 6px;
    border-bottom: 1px solid #1A1A1A;
    margin-bottom: 6px;
}

/* Today's day separator highlights in ambre (preserves pre-6c .ec-today behavior) */
.fl-card-day.ec-today {
    color: #F5A623;
    border-bottom-color: #F5A623;
}

.fl-cat-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

/* Event comparison block (economic_calendar) */
.fl-event-comparison {
    display: flex;
    gap: 24px;
    padding-left: 22px;
    margin-top: 4px;
}

.fl-event-pair {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fl-event-pair .label {
    font-size: 9px;
    color: #555;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fl-event-pair .val {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Event variant: title slightly bolder than news */
.fl-card-item.ec-card .fl-card-title {
    font-weight: 500;
}

/* Urgency tint for earnings_calendar Days-away ≤ 14 */
.fl-num-urgent {
    color: #F5A623;
}

/* calendar_panel tabs — typography aligned with .wl-tab */
.cal-tab {
    font-family: Inter, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #888;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 80ms ease-out, border-color 80ms ease-out;
}

.cal-tab:hover {
    color: #cfcfcf;
}

.cal-tab-active {
    color: #E0E0E0;
    border-bottom-color: #F5A623;
}

/* ── Compare button (watchlist rows) — send ticker to Performance Comparator ── */
.wl-compare-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 2px;
}

/* Icône mini-courbe montante, dessinée via masque SVG.
   background-color pilote la couleur (transition possible, contrairement à un <img>). */
.wl-compare-ico {
  width: 15px;
  height: 15px;
  background-color: #5f5f66;            /* repos : toujours visible, gris discret */
  transition: background-color 0.12s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M2%2011l3.5-4%202.5%202.5L13%204%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M10.5%204H13v2.5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M2%2011l3.5-4%202.5%202.5L13%204%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M10.5%204H13v2.5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* survol de la ligne : icône en ambre ; survol direct du bouton : ambre interactif */
.wl-data-row:hover .wl-compare-ico { background-color: var(--accent); }
.wl-compare-btn:hover .wl-compare-ico { background-color: var(--accent-interactive); }

/* Infobulle maison — s'ouvre VERS LA GAUCHE de l'icône.
   (.wl-table-container a overflow-y:auto / overflow-x:hidden : ouvrir à gauche
   évite le rognage vertical du haut et reste dans les bornes horizontales.) */
.wl-compare-tip {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 11px;
  line-height: 1.3;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 60;
}
/* petite flèche pointant vers l'icône (côté droit de la bulle) */
.wl-compare-tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--elevated);
}
.wl-compare-btn:hover .wl-compare-tip { opacity: 1; }