/* Styles of the ECB data tool (public/js/modules/ecb). Loaded after css/app.css. */

/* Choices: a bar of controls, chips for the usual series */
.ecb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 0 1rem; }
.ecb-toolbar label { color: var(--slate); font-size: var(--step--1); font-weight: 600; }
.ecb-toolbar input[type=date], .ecb-toolbar select { width: auto; min-height: 2.4rem; }
.ecb-toolbar #ecb-key { flex: 1 1 18rem; width: auto; max-width: 34rem; min-height: 2.4rem; }
.ecb-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ecb-status { margin: -0.4rem 0 0.8rem; min-height: 1.2em; }
.ecb-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem 1.5rem; margin: 0 0 1.1rem;
  padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); }
.ecb-preset-label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.ecb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.3rem 0.85rem; font: inherit;
  font-size: var(--step--1); cursor: pointer; }
.chip:hover { border-color: var(--teal, #71b0aa); }
.chip[aria-pressed='true'] { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

/* Converter */
.ecb-convert-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.ecb-convert-row .field { margin: 0; min-width: 13rem; flex: 1 1 13rem; }
.ecb-convert-row .ecb-amount { flex: 0 1 11rem; min-width: 9rem; }
.ecb-convert-row .ecb-amount input { font-variant-numeric: tabular-nums; text-align: right; }
.ecb-swap { min-height: 2.5rem; min-width: 2.75rem; font-size: 1.15rem; padding: 0 0.6rem; margin-bottom: 1px; }
.ecb-result { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.ecb-result p { margin: 0.2rem 0; }
.ecb-result-main { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ecb-result-main strong { font-family: var(--font-head); font-size: 1.7rem; color: var(--green); }

/* Rates and series */
.ecb-currency-name { font-size: var(--step--1); }
.ecb-change { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--slate); }
.ecb-change.up { color: var(--green); }
.ecb-change.down { color: #b0432e; }
.ecb-key { margin: -0.4rem 0 0.9rem; overflow-wrap: anywhere; }
.ecb-note { font-size: var(--step--1); margin-top: 0.75rem; }
.ecb-page .figure-tiles { margin-bottom: 0.9rem; }