/* ==========================================================================
   rates.css — the company-wide rate board
   One board serves every outlet, so there is no outlet picker here.
   The rate table is a real <table> on tablet/desktop and reflows into stacked
   cards below 768px, driven by data-label attributes on the numeric cells.
   ========================================================================== */

.rates-layout { padding-block: var(--space-6); }

/* --------------------------------------------------------------------------
   Board meta — scope of the rates + when they were last touched
   -------------------------------------------------------------------------- */

.rates-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--color-border);
}

.rates-meta__scope {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.rates-meta__scope a { font-weight: 600; }

.rates-meta__updated {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
}

.rates-meta__updated-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary-strong);
}

@media (min-width: 768px) {
  .rates-meta {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
  }
  .rates-meta__updated { text-align: right; align-items: flex-end; }
}

/* --------------------------------------------------------------------------
   Currency chip + tier label
   -------------------------------------------------------------------------- */

/* One line, always. A denomination that drops below the currency reads as a
   second row of the board rather than as a qualifier on the rate beside it, so
   the parts are kept on the baseline and the currency *name* is the only thing
   allowed to give up width (min-width:0 lets it shrink and wrap internally). */
.ccy {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
  min-width: 0;
}

.ccy__flag {
  flex: none;
  width: 1.5rem;
  height: 1.125rem;
  border-radius: 2px;
  object-fit: cover;
  /* Hairline keeps white-edged flags (JP, SG) from bleeding into the row. */
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.14);
  /* Pull the chip closer than the .ccy gap, so flag and code read as one unit. */
  margin-right: calc(var(--space-2) - var(--space-3));
}

.ccy__chip {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 3.75rem;
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-strong);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.ccy__name {
  font-weight: 600;
  color: var(--color-text);
  /* The only flexible part of the row: on a narrow phone the name folds to a
     second line instead of pushing the denomination chip off the baseline. */
  min-width: 0;
  overflow-wrap: break-word;
}

/* Denominations can be long ("500.200.100.50"), so the chip is a notch smaller
   and tighter than the currency code beside it — small enough to sit on the
   same line at every width, still legible as a badge. */
.ccy__unit {
  flex: none;
  white-space: nowrap;
  font-size: 0.6875rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-text);
  background: var(--yellow-100);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

.tier {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-2);
}

.tier__label {
  font-weight: 600;
  color: var(--color-text);
}

.tier__code {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.tier__desc {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Rate table — shared
   -------------------------------------------------------------------------- */

.rate-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.rate-table__caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

.rate-table thead th {
  background: var(--color-primary-strong);
  color: var(--color-text-invert);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: var(--space-3) var(--space-5);
  white-space: nowrap;
}

.rate-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Needs to out-specify `.rate-table thead th` above, or the column headings
   sit left while the figures under them sit right. */
.rate-table thead th.rate-table__num { text-align: right; }

.rate-table thead th.rate-table__ccy { width: 55%; }

.rate-table tbody th,
.rate-table tbody td {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
  font-weight: 400;
  text-align: left;
}

.rate-table tbody td.rate-table__num {
  text-align: right;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary-strong);
  white-space: nowrap;
}

.rate-group--tiered .rate-row--heading th {
  background: var(--color-primary-tint);
  padding-block: var(--space-3);
}

.rate-row--tier th { padding-left: var(--space-6); }

.rate-table--compact tbody th,
.rate-table--compact tbody td {
  padding: var(--space-3) var(--space-4);
}

/* The hero preview card is the narrowest place the board appears, and it is
   also the one with no currency name to absorb the squeeze. Everything in the
   currency cell tightens by a step so the denomination still shares the line
   with the code at the card's smallest sensible width. */
.rate-table--compact .ccy { gap: var(--space-2); }
.rate-table--compact .ccy__chip { min-width: 3.25rem; }
.rate-table--compact .ccy__unit { font-size: 0.625rem; padding-inline: var(--space-1); }
.rate-table--compact tbody td.rate-table__num { font-size: var(--text-base); }

/* --------------------------------------------------------------------------
   Rate table — stacked card layout below 768px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .rate-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* `caption` must be listed here too. Left as display:table-caption inside a
     display:block table it gets wrapped in an anonymous shrink-to-fit table
     box, which renders as a tall narrow column and pushes the page wider than
     the viewport. */
  .rate-table,
  .rate-table caption,
  .rate-table tbody,
  .rate-table tr,
  .rate-table tbody th,
  .rate-table tbody td {
    display: block;
    width: 100%;
  }

  .rate-table { max-width: 100%; }

  .rate-table tbody { border-top: 1px solid var(--color-border); }

  /* Must out-specify `.rate-table tr { display: block }` above, otherwise the
     buy and sell cells stack vertically instead of pairing side by side. */
  .rate-table tbody tr.rate-row {
    padding: var(--space-4) var(--space-5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: end;
  }

  .rate-row:not(:first-child) { border-top: 1px solid var(--color-border); }

  .rate-table tbody th,
  .rate-table tbody td {
    border-top: 0;
    padding: 0;
  }

  .rate-row > th { grid-column: 1 / -1; }

  .rate-table tbody tr.rate-row--heading {
    display: block;
    background: var(--color-primary-tint);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
  }

  .rate-row--tier { border-top: 1px solid var(--color-border); }
  .rate-row--tier th { padding-left: 0; }

  .tier { padding-left: 0; }

  .rate-table tbody td.rate-table__num {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .rate-table tbody td.rate-table__num::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
  }
}

/* --------------------------------------------------------------------------
   Disclaimer
   -------------------------------------------------------------------------- */

.rates-disclaimer {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--yellow-100);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink-700);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Row hover (Phase 3)
   --------------------------------------------------------------------------
   Deliberately a background wash only — no transform, no scale, no colour
   change on the figures themselves. Moving or restyling a rate as the pointer
   crosses it would read as the number being recalculated, which is exactly the
   wrong signal on a page whose entire job is to look settled. The wash tracks
   the eye across a wide row; it says nothing about the value.

   Only the leaf rows respond. The currency heading row of a tiered group is
   not a data row, so it stays put.
   -------------------------------------------------------------------------- */

@media (hover: hover) {
  .rate-table tbody tr.rate-row:not(.rate-row--heading) {
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .rate-table tbody tr.rate-row:not(.rate-row--heading):hover {
    background-color: var(--color-primary-tint);
  }
}

/* Keyboard parity: the row containing focus gets the same wash, so tabbing
   through the board is as legible as pointing at it. */
.rate-table tbody tr.rate-row:focus-within {
  background-color: var(--color-primary-tint);
}

/* The board arrives as one unit. Per-row staggering was rejected: rates
   appearing one after another looks like data still loading in. */
.js .rate-table-wrap.reveal { --rise: 10px; }