/* ==========================================================================
   SmartFinClub — "Today's Rates" dashboard.
   Self-contained: every rule is scoped under .sfc-rates and uses the site's
   existing :root tokens from styles.css, so nothing else on the page changes.
   ========================================================================== */

.sfc-rates { background: var(--bg, #f7f9f7); }
.sfc-rates .sfc-rates-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-3, .75rem);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--sp-6, 1.5rem);
}
.sfc-rates .sfc-rates-head h2 { margin: 0; }
.sfc-rates .sfc-rates-head p { margin: .25rem 0 0; color: var(--slate-600, #4b5b54); }
.sfc-rates .sfc-rates-head a { font-weight: 600; font-size: var(--fs-sm, .875rem); }

.sfc-rates-grid {
  display: grid; gap: var(--sp-5, 1.25rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .sfc-rates-grid { grid-template-columns: minmax(0, 1fr); } }

.sfc-card {
  position: relative;
  background: var(--white, #fff);
  border: 1px solid var(--slate-200, #e1e7e3);
  border-top: 4px solid var(--card-accent, var(--emerald));
  border-radius: var(--r-lg, 14px);
  padding: 1.1rem 1.1rem 1rem;
  display: flex; flex-direction: column; gap: .7rem;
  min-width: 0;
  min-height: 560px; /* reserved so the page does not jump while data loads */
}
.sfc-card--mortgage { --card-accent: var(--c4, #c08a2e); --card-ink: var(--warning-dark, #8c6321); }
.sfc-card--fx       { --card-accent: var(--info, #2e6fa3);  --card-ink: var(--info-dark, #1f4e73); }
.sfc-card--treasury { --card-accent: var(--emerald, #2e9468); --card-ink: var(--emerald-darker, #145c3d); }

.sfc-card-top { display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sfc-card-title {
  margin: 0; font-size: var(--fs-xs, .75rem); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--card-ink);
}
.sfc-select, .sfc-input {
  font: inherit; font-size: var(--fs-sm, .875rem); color: var(--navy, #0e1b2a);
  background: var(--white, #fff); border: 1px solid var(--slate-300, #c4d0ca);
  border-radius: 8px; padding: .45rem .5rem; min-height: 38px; min-width: 0;
}
.sfc-select:focus-visible, .sfc-input:focus-visible, .sfc-pill:focus-visible, .sfc-swap:focus-visible {
  outline: 2px solid var(--card-accent); outline-offset: 2px;
}

.sfc-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; min-height: 3rem; }
.sfc-now-value { font-size: 2.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--navy, #0e1b2a); font-variant-numeric: tabular-nums; }
.sfc-now-change { font-size: var(--fs-sm, .875rem); font-weight: 600; color: var(--slate, #33413c); }
.sfc-now-sub { width: 100%; font-size: var(--fs-sm, .875rem); color: var(--slate-600, #4b5b54); }

.sfc-fx-row { display: flex; gap: .4rem; align-items: center; }
.sfc-amount { width: 100%; font-weight: 600; font-size: var(--fs-base, 1rem); }
.sfc-fx-row .sfc-select { flex: 1 1 0; }
.sfc-swap {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--slate-300, #c4d0ca); background: var(--slate-100, #f1f4f2); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.sfc-swap svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.sfc-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.sfc-pill {
  font: inherit; font-size: .8125rem; cursor: pointer; line-height: 1;
  padding: .45rem .7rem; min-height: 32px; border-radius: 999px;
  border: 1px solid var(--slate-300, #c4d0ca); background: var(--white, #fff); color: var(--slate, #33413c);
}
.sfc-pill[aria-pressed="true"] { background: var(--navy, #0e1b2a); border-color: var(--navy, #0e1b2a); color: #fff; font-weight: 700; }

.sfc-chart { position: relative; }
.sfc-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.sfc-chart .sfc-line { fill: none; stroke: var(--card-accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.sfc-chart .sfc-area { fill: var(--card-accent); opacity: .1; }
.sfc-chart .sfc-grid { stroke: var(--slate-200, #e1e7e3); stroke-width: 1; }
.sfc-chart .sfc-axis { font-size: 10.5px; fill: var(--slate-500, #66766e); }
.sfc-chart .sfc-cross { stroke: var(--slate-400, #94a39b); stroke-width: 1; stroke-dasharray: 3 3; }
.sfc-chart .sfc-dot { fill: var(--card-accent); stroke: #fff; stroke-width: 2; }
.sfc-chart-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--slate-500, #66766e); margin-top: .2rem; }
.sfc-tip {
  position: absolute; top: 0; pointer-events: none; transform: translateX(-50%);
  background: var(--navy, #0e1b2a); color: #fff; font-size: .75rem; line-height: 1.3;
  padding: .3rem .5rem; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sfc-tip[hidden] { display: none; }

.sfc-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  background: var(--bg, #f7f9f7); border-radius: 10px; padding: .6rem .7rem;
}
.sfc-stats dt { font-size: .72rem; color: var(--slate-500, #66766e); }
.sfc-stats dd { margin: 0; font-size: .95rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

.sfc-note { font-size: .8125rem; color: var(--slate, #33413c); background: var(--emerald-tint, #eff8f3); border-radius: 8px; padding: .45rem .6rem; margin: 0; }
.sfc-source { font-size: .74rem; color: var(--slate-500, #66766e); margin: 0; line-height: 1.45; }
.sfc-link { font-weight: 600; font-size: var(--fs-sm, .875rem); margin-top: auto; }

.sfc-card[data-state="loading"] .sfc-now-value { color: var(--slate-300, #c4d0ca); }
.sfc-card[data-state="stale"] .sfc-now-value { color: var(--slate-500, #66766e); }
.sfc-alert { font-size: .8125rem; color: var(--warning-dark, #8c6321); background: var(--warning-light, #f6e9d2); border-radius: 8px; padding: .4rem .6rem; margin: 0; }
.sfc-alert[hidden] { display: none; }

.sfc-disclaimer { margin: var(--sp-5, 1.25rem) 0 0; font-size: .8125rem; color: var(--slate-600, #4b5b54); max-width: 90ch; }

.sfc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  .sfc-card { min-height: 0; }
  .sfc-now-value { font-size: 2rem; }
  .sfc-pill { min-height: 40px; padding-inline: .8rem; }
}

/* When a source is unreachable, show only the message, not empty controls. */
.sfc-card[data-state="error"] .sfc-pills,
.sfc-card[data-state="error"] .sfc-chart,
.sfc-card[data-state="error"] .sfc-stats,
.sfc-card[data-state="error"] .sfc-select,
.sfc-card[data-state="error"] .sfc-amount,
.sfc-card[data-state="error"] .sfc-fx-row,
.sfc-card[data-state="error"] .sfc-source,
.sfc-card[data-state="error"] .sfc-example,
.sfc-card[data-state="error"] .sfc-meta { display: none; }

/* Line the three cards up row by row (controls, range buttons, chart, stats,
   footer) so every chart starts at the same height, even though the currency
   card has an extra row of inputs. Uses CSS subgrid; browsers without it
   simply fall back to the normal stacked layout. */
.sfc-head, .sfc-value { display: flex; flex-direction: column; gap: .7rem; }
.sfc-foot { display: flex; flex-direction: column; gap: .7rem; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1001px) {
    .sfc-rates-grid { grid-auto-rows: auto; row-gap: 0; }
    .sfc-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 6; grid-template-rows: subgrid; row-gap: .7rem; min-height: 0; }
    .sfc-card > * { min-width: 0; }
    .sfc-head { justify-content: flex-start; }
    .sfc-foot { justify-content: flex-start; }
    .sfc-foot .sfc-link { margin-top: auto; }
  }
}

.sfc-example { margin: 0; font-size: var(--fs-sm, .875rem); line-height: 1.45; color: var(--slate, #33413c);
  background: var(--bg, #f7f9f7); border-radius: 10px; padding: .6rem .75rem; }
.sfc-example:empty { display: none; }

.sfc-select--wide { width: 100%; font-size: var(--fs-base, 1rem); min-height: 42px; }
.sfc-meta { margin: 0; font-size: .78rem; color: var(--slate-500, #66766e); }
.sfc-meta:empty { display: none; }