/* Market rate card, rate chart dialog and rate alerts (js/market.js).
   Every class starts with mk-. Only the site tokens of css/style.css are used (colours, radii, spacing, type, motion), so this file can be
   merged into style.css as it is. Green and red come from --good and --bad. */

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

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-btn); background: transparent; color: var(--ink); text-decoration: none;
  font: 500 15px/1.2 var(--font-text); white-space: nowrap; cursor: pointer;
  transition: background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease), color var(--m-out) var(--ease), transform var(--m-press) var(--ease);
}
.mk-btn:active { transform: translateY(1px); }
.mk-btn--primary { background: var(--action); color: var(--action-ink); }
.mk-btn--ghost { border-color: var(--line-strong); }
.mk-btn--sm { padding: 0 var(--s-4); font-size: 14px; }
.mk-btn[disabled] { opacity: .5; cursor: default; }

.mk-iconbtn {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color var(--m-out) var(--ease), transform var(--m-press) var(--ease);
}
.mk-iconbtn:active { transform: scale(.96); }

.mk-chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); min-height: 30px; }
.mk-chip-row:empty { min-height: 0; margin-top: 0; }
.mk-chip-row.is-loading { min-height: 30px; margin-top: var(--s-3); }
.mk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; font: 500 14px/1.3 var(--font-text); font-variant-numeric: tabular-nums; }
.mk-mark { flex: none; }
.mk-chip--up { background: color-mix(in oklab, var(--good) 12%, var(--bg)); color: var(--good); }
.mk-chip--down { background: color-mix(in oklab, var(--bad) 11%, var(--bg)); color: var(--bad); }
.mk-chip--flat { background: var(--surface); color: var(--ink); }

/* the rate line: "1 EUR = 655,957 FCFA" */
.mk-rate { margin: 0; font: var(--display-weight) 28px/1.12 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; text-wrap: balance; }
.mk-rate-from { color: var(--muted); }
.mk-rate-num { font-weight: 600; }

/* ---------------------------------------------------------------- the card */
.mk-card { container: mk / inline-size; position: relative; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.mk-card[hidden] { display: none; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) var(--s-2) 0; }
.mk-title { margin: 0; font: 500 14px/1.3 var(--font-text); font-stretch: normal; letter-spacing: 0; color: var(--muted); }
.mk-main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.mk-figure { flex: 1 1 100%; min-width: 0; }
.mk-sparkbox { flex: 1 1 100%; min-width: 0; cursor: pointer; }
.mk-spark { position: relative; height: 56px; border-radius: var(--r-sm); transition: background-color var(--m-out) var(--ease); }
.mk-spark-svg { display: block; width: 100%; height: 56px; overflow: visible; }
.mk-spark-cap { display: flex; justify-content: space-between; gap: var(--s-2); margin: 6px 0 0; font: 400 12px/1.4 var(--font-text); color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-spark-pct { font-weight: 500; }
.mk-spark-pct--up { color: var(--good); } .mk-spark-pct--down { color: var(--bad); }
.mk-meta { margin: var(--s-3) 0 0; font: 400 13px/1.5 var(--font-text); color: var(--muted); }
.mk-peg { margin: var(--s-2) 0 0; font: 400 14px/1.5 var(--font-text); color: var(--muted); }
.mk-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.mk-alert-btn { gap: 10px; }
.mk-alert-count { font: 400 13px/1.4 var(--font-text); color: var(--muted); }
.mk-alert-count:empty { display: none; }

/* a wide card puts the sparkline beside the rate; a narrow one (phones, small columns) stacks it underneath */
@container mk (min-width: 440px) {
  .mk-rate { font-size: clamp(28px, 6.6cqi, 36px); }
  .mk-figure { flex: 1 1 0; }
  .mk-sparkbox { flex: 0 0 150px; }
}

/* ---------------------------------------------------------------- the strip: two pills beside the payout pills of the comparator
   (the host sizes them: it tries the full strip, then the compact one, and gives up when neither fits) */
.mk-strip { display: flex; align-items: stretch; gap: var(--s-3); flex: none; margin-left: auto; min-width: 0; }
.mk-strip[hidden] { display: none; }
.mk-sp {
  display: inline-flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 22px 8px 26px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink);
  font-family: var(--font-text); text-align: left; white-space: nowrap; cursor: pointer;
  transition: background-color var(--m-out) var(--ease), transform var(--m-press) var(--ease);
}
.mk-sp:active { transform: translateY(1px); }
.mk-sp-txt { display: grid; gap: 3px; min-width: 0; }
.mk-sp-rate { font: var(--display-weight) 19px/1.1 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.mk-sp-chg { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px/1.1 var(--font-text); font-variant-numeric: tabular-nums; }
.mk-sp-chg--up { color: var(--good); } .mk-sp-chg--down { color: var(--bad); } .mk-sp-chg--flat { color: var(--muted); }
.mk-sp-spark { display: block; flex: none; width: 112px; height: 36px; }
.mk-sp-spark .mk-spark-svg { width: 100%; height: 100%; }
.mk-sp-spark .mk-skel { display: block; }
.mk-sp .mk-skel { background: color-mix(in oklab, var(--surface) 82%, var(--ink)); }
.mk-skel--chg { display: block; width: 96px; height: 13px; border-radius: 999px; }
.mk-sp-exp { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; }
.mk-sp--alert { gap: 10px; padding: 8px 24px 8px 20px; font: 500 16px/1 var(--font-text); }
.mk-sp-bell { position: relative; display: inline-grid; }
.mk-sp-badge { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--action); color: var(--action-ink); font: 600 11px/16px var(--font-text); text-align: center; }
.mk-sp-badge:empty { display: none; }
/* the compact strip: a shorter chart, no expand mark, the bell alone (its label stays for screen readers); the mini strip drops the chart too */
.mk-strip--compact .mk-sp--rate { gap: 12px; padding: 8px 18px 8px 22px; }
.mk-strip--compact .mk-sp-spark { width: 72px; }
.mk-strip--mini .mk-sp-spark { display: none; }
.mk-strip--compact .mk-sp-exp { display: none; }
.mk-strip--compact .mk-sp--alert { width: 64px; padding: 0; justify-content: center; }
.mk-strip--compact .mk-sp-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the picture: lines, areas, dots */
.mk-area { stroke: none; }
.mk-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mk-line--up { stroke: var(--good); } .mk-line--down { stroke: var(--bad); } .mk-line--flat { stroke: var(--muted); }
.mk-stop--up { stop-color: var(--good); } .mk-stop--down { stop-color: var(--bad); } .mk-stop--flat { stop-color: var(--muted); }
.mk-halo { opacity: .16; }
.mk-gap { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.1 6; opacity: .85; }
.mk-gap--up { stroke: var(--good); } .mk-gap--down { stroke: var(--bad); } .mk-gap--flat { stroke: var(--muted); }
.mk-halo--up { fill: var(--good); } .mk-halo--down { fill: var(--bad); } .mk-halo--flat { fill: var(--muted); }
.mk-dot { stroke: var(--bg); stroke-width: 2; }
.mk-dot--up { fill: var(--good); } .mk-dot--down { fill: var(--bad); } .mk-dot--flat { fill: var(--muted); }

/* loading: a quiet block where the chart will be (it shimmers three times, then holds still) */
.mk-skel { height: 100%; border-radius: var(--r-sm); background: var(--surface); }
.mk-skel--cap { height: 12px; margin-top: 8px; border-radius: 999px; }
.mk-skel--chart { height: 220px; border-radius: var(--r-md); }

/* ---------------------------------------------------------------- the dialog */
.mk-dialog {
  width: min(760px, calc(100vw - 32px)); max-width: none; max-height: 92vh; max-height: min(92dvh, 880px); padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 var(--font-text); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgb(10 10 10 / .55);
}
.mk-dialog[open] { display: flex; flex-direction: column; }
/* the dim layer cannot read the site's custom properties in every browser, so it is the ink colour written out */
.mk-dialog::backdrop { background: rgb(10 10 10 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:has(.mk-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }

.mk-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-3); }
.mk-d-heading { min-width: 0; }
.mk-d-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; font: 500 18px/1.3 var(--font-text); font-stretch: normal; letter-spacing: -0.01em; }
.mk-d-pair { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; background: var(--surface); font: 500 15px/1.5 var(--font-text); }
.mk-d-names { margin: 4px 0 0; font: 400 13px/1.4 var(--font-text); color: var(--muted); }
.mk-d-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 var(--s-5) var(--s-5); }

.mk-d-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.mk-d-figure { min-width: 0; }
.mk-d-rate { font-size: clamp(26px, 4.6vw, 36px); }
.mk-d-range { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-2) 0 0; font: 400 14px/1.4 var(--font-text); color: var(--muted); }
.mk-d-range:empty { display: none; }
.mk-d-range strong { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

.mk-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface); }
.mk-tabs[hidden] { display: none; }
.mk-tab {
  min-width: 64px; min-height: 44px; padding: 0 var(--s-4); border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 15px/1 var(--font-text); white-space: nowrap; cursor: pointer; transition: background-color var(--m-out) var(--ease), color var(--m-out) var(--ease);
}
.mk-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }

.mk-d-chart { margin-top: var(--s-5); }
.mk-d-msg { margin: var(--s-3) 0; color: var(--muted); font-size: 15px; }
.mk-chart { position: relative; }
.mk-plot { position: relative; border-radius: var(--r-md); cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.mk-plot:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.mk-plot-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-grid { stroke: var(--line); stroke-width: 1; }
.mk-grid--base { stroke: var(--line-strong); }
.mk-ylab, .mk-xlab { font: 400 12px var(--font-text); fill: var(--muted); font-variant-numeric: tabular-nums; }
.mk-guide { stroke: var(--ink); stroke-opacity: .4; stroke-dasharray: 3 4; visibility: hidden; pointer-events: none; }
.mk-guide.is-on { visibility: visible; }
.mk-spot { fill: var(--bg); stroke-width: 2.5; visibility: hidden; pointer-events: none; }
.mk-spot.is-on { visibility: visible; }
.mk-spot--up { stroke: var(--good); } .mk-spot--down { stroke: var(--bad); } .mk-spot--flat { stroke: var(--muted); }
.mk-tip {
  position: absolute; z-index: 2; left: 0; top: 0; display: grid; gap: 1px; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--bg); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -10px rgb(10 10 10 / .6);
}
.mk-tip[hidden] { display: none; }
.mk-tip-date { font: 400 12px/1.3 var(--font-text); opacity: .8; }
.mk-tip-val { font: 600 15px/1.3 var(--font-text); }

.mk-source { margin: var(--s-4) 0 0; font: 400 13px/1.5 var(--font-text); color: var(--muted); }
.mk-d-peg { display: flex; align-items: flex-start; gap: var(--s-3); margin: var(--s-5) 0 0; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); font: 400 15px/1.5 var(--font-text); }
.mk-d-peg svg { margin-top: 2px; color: var(--good); }

/* ---------------------------------------------------------------- the alerts */
.mk-alerts { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.mk-alerts-title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font: 500 18px/1.3 var(--font-text); font-stretch: normal; letter-spacing: -0.01em; }
.mk-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font: 400 16px/1.4 var(--font-text); }
.mk-field { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.mk-unit { font-weight: 500; }
.mk-input {
  width: 9.5em; max-width: 100%; height: 48px; padding: 0 var(--s-4); border: 1px solid color-mix(in oklab, var(--ink) 50%, transparent); border-radius: var(--r-btn); background: var(--bg); color: var(--ink);
  font: 600 18px/1 var(--font-display); font-variant-numeric: tabular-nums; transition: border-color var(--m-out) var(--ease), box-shadow var(--m-out) var(--ease);
}
.mk-input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-color: var(--action); }
.mk-input.is-invalid { border-color: var(--bad); }
.mk-input--wide { width: 100%; max-width: 420px; font: 400 16px/1 var(--font-text); }
.mk-quick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.mk-pill {
  min-width: 64px; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 15px/1 var(--font-text); cursor: pointer; transition: background-color var(--m-out) var(--ease), transform var(--m-press) var(--ease);
}
.mk-pill:active { transform: translateY(1px); }
.mk-pill[disabled] { opacity: .5; cursor: default; }
.mk-err { margin: 0; color: var(--bad); font: 500 14px/1.4 var(--font-text); }
.mk-err:not(:empty) { margin-top: var(--s-3); }
.mk-ok { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; color: var(--good); font: 500 14px/1.4 var(--font-text); }
.mk-ok:not(:empty) { margin-top: var(--s-3); }
.mk-ok svg { flex: none; margin-top: 1px; }
.mk-email { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.mk-email-label { font: 500 15px/1.3 var(--font-text); }
.mk-consent { margin: 0; font: 400 13px/1.5 var(--font-text); color: var(--muted); }
.mk-actions { margin-top: var(--s-4); }

.mk-lists { margin-top: var(--s-5); }
.mk-sub { margin: 0 0 var(--s-2); font: 500 14px/1.4 var(--font-text); font-stretch: normal; letter-spacing: 0; color: var(--muted); }
.mk-empty { margin: 0 0 var(--s-4); font-size: 14px; color: var(--muted); }
.mk-al-list { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.mk-al { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 2px 2px 2px var(--s-4); border-radius: var(--r-md); background: var(--surface); }
.mk-al.is-reached { background: color-mix(in oklab, var(--good) 9%, var(--surface)); }
.mk-al.is-reached .mk-al-now, .mk-al.is-reached .mk-al-route { color: var(--ink); }
.mk-al-body { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-3); min-width: 0; padding: var(--s-2) 0; font-variant-numeric: tabular-nums; }
.mk-al-route { display: inline-flex; align-items: center; gap: 4px; flex-basis: 100%; font-size: 13px; color: var(--muted); }
.mk-al-text { font-weight: 500; }
.mk-al-now { font-size: 14px; color: var(--muted); }
.mk-al-hit { padding: 1px 10px; border-radius: 999px; background: color-mix(in oklab, var(--good) 14%, var(--surface)); color: var(--good); font: 500 13px/1.5 var(--font-text); }
.mk-note { margin: var(--s-4) 0 0; font: 400 13px/1.5 var(--font-text); color: var(--muted); }

/* ---------------------------------------------------------------- the banner under the header */
.mk-banner { position: relative; background: color-mix(in oklab, var(--good) 10%, var(--bg)); color: var(--ink); border-bottom: 1px solid color-mix(in oklab, var(--good) 26%, transparent); }
.mk-banner[hidden] { display: none; }
.mk-banner-in { display: grid; gap: var(--s-2); width: min(100% - 2 * var(--gut, 24px), var(--container, 1280px)); margin-inline: auto; padding: var(--s-3) 0; }
.mk-banner-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.mk-banner-ico { display: inline-grid; color: var(--good); }
.mk-banner-text { flex: 1 1 280px; margin: 0; font: 500 15px/1.4 var(--font-text); }
.mk-banner-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mk-banner-more { margin: 0; font: 400 14px/1.4 var(--font-text); color: var(--ink); }

/* ---------------------------------------------------------------- hover (mouse only) */
@media (hover: hover) and (pointer: fine) {
  .mk-iconbtn:hover { background: var(--surface); }
  .mk-btn--ghost:hover, .mk-pill:hover { background: color-mix(in oklab, var(--bg) 92%, var(--ink)); }
  .mk-sp:hover { background: color-mix(in oklab, var(--surface) 86%, var(--ink)); }
  .mk-btn--primary:hover { background: color-mix(in oklab, var(--action) 86%, var(--ink)); }
  .mk-tab[aria-selected="false"]:hover { background: color-mix(in oklab, var(--surface) 82%, var(--ink)); }
  .mk-sparkbox:hover .mk-spark { background: color-mix(in oklab, var(--surface) 60%, transparent); }
  .mk-input:hover { border-color: color-mix(in oklab, var(--ink) 70%, transparent); }
}

/* ---------------------------------------------------------------- phones: the dialog becomes a sheet from the bottom */
@media (max-width: 639px) {
  .mk-dialog { width: 100vw; max-width: 100vw; max-height: 94vh; max-height: 94dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .mk-d-head { padding: var(--s-4) var(--s-4) var(--s-2); }
  .mk-d-scroll { padding: 0 var(--s-4) var(--s-5); scrollbar-gutter: auto; }
  .mk-d-top { align-items: stretch; }
  .mk-d-figure { flex: 1 1 100%; }
  .mk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mk-d-chart { margin-top: var(--s-4); }
  .mk-sentence { align-items: flex-start; }
  .mk-sentence-t { flex: 1 1 100%; }
  .mk-field { flex: 1 1 100%; }
  .mk-input { flex: 1 1 8em; min-width: 0; }
  .mk-banner-actions { width: 100%; }
}

/* ---------------------------------------------------------------- motion: the line draws in once, the sheet rises; nothing loops */
@keyframes mk-draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
@keyframes mk-fade { from { opacity: 0; } }
@keyframes mk-shimmer { to { background-position: -200% 0; } }
@keyframes mk-rise { from { transform: translateY(20px); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .is-draw .mk-line { stroke-dasharray: 1 2; animation: mk-draw 700ms var(--ease-enter) both; }
  .is-draw .mk-area { animation: mk-fade 500ms ease-out 350ms both; }
  .is-draw .mk-halo, .is-draw .mk-dot { animation: mk-fade 300ms ease-out 600ms both; }
  .mk-skel { background: linear-gradient(100deg, var(--surface) 35%, color-mix(in oklab, var(--surface) 50%, var(--bg)) 50%, var(--surface) 65%) 0 0 / 200% 100%; animation: mk-shimmer 1.4s linear 3; }
  .mk-dialog[open] { animation: mk-rise 260ms var(--ease-enter); }
  .mk-dialog[open]::backdrop { animation: mk-fade 200ms ease-out; }
}