/* ============================================================================
   The RATE CARD, <RateCard/>. Served at _content/MeninGate.Rates/rates.css -
   link it once in the host's head.

   Stefaan 2026-11-02: "Take them by the hand and bring them to Wonderland. We
   willen verkopen en we willen zorgen dat de klant zich daarbij goed voelt,
   dat alles duidelijk is." So the amount is the biggest thing on the row, the
   arrangement stands beside it in words, and the whole row is the control -
   measured at 390 px, because that is where Staff Planning taught us a card
   either works with a thumb or does not work at all.

   No bold as decoration (ui-typography-no-bold); the amount may carry weight,
   because the amount IS the message.

   THEMING. Every colour here is a --mgr-* token with a fallback, so a host
   either passes nothing and gets the platform default, or redefines the token
   on .mg-rate (or on :root) and the card follows its own app's tint. That is
   the one place style lives (styles-live-in-the-shared-layer); the cobalt
   below is the default, not a decision each app makes again.
   ========================================================================== */
.mg-rate {
    --mgr-card:        var(--mgr-card-bg, #ffffff);
    --mgr-line:        var(--mgr-border, #e6e1d8);
    --mgr-ink-soft:    var(--mgr-ink-2, #4a5b60);
    --mgr-ink-muted:   var(--mgr-ink-3, #7a8c90);
    --mgr-accent:      var(--mgr-tint, #3b6fc1);
    --mgr-accent-deep: var(--mgr-tint-deep, #1b3a68);
    --mgr-accent-soft: var(--mgr-tint-soft, #e9effb);
    --mgr-gold:        var(--mgr-highlight, #f0d98a);
    --mgr-gold-soft:   var(--mgr-highlight-soft, #fdf8ec);
    --mgr-gain:        var(--mgr-positive, #2e7d52);

    background: var(--mgr-card);
    border: 1px solid var(--mgr-line);
    border-radius: 1rem;
    padding: .9rem 1rem 1.1rem;
    margin: 0;
    min-width: 0;
}

.mg-rate__legend { font-size: .95rem; color: var(--mgr-accent-deep); padding: 0 .35rem; }
.mg-rate__hint { margin: .1rem 0 .9rem; font-size: .85rem; color: var(--mgr-ink-soft); }

/* Agreed rates: the one framed paragraph on the card, because it explains why
   there are suddenly two numbers per row. */
.mg-rate__personal {
    margin: 0 0 .5rem;
    padding: .55rem .7rem;
    border-left: 3px solid var(--mgr-gold);
    background: var(--mgr-gold-soft);
    font-size: .9rem;
    color: var(--mgr-ink-soft);
}
.mg-rate__window { margin: 0 0 .8rem; font-size: .85rem; color: var(--mgr-ink-muted); }

.mg-rate__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

.mg-rate__pick {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name amounts" "cta amounts";
    gap: .15rem .9rem;
    align-items: center;
    text-align: left;
    padding: .7rem .85rem;
    border: 1px solid var(--mgr-line);
    border-radius: .7rem;
    background: var(--mgr-card);
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.mg-rate__pick:hover { border-color: var(--mgr-accent); background: var(--mgr-accent-soft); }
.mg-rate__row--chosen .mg-rate__pick { border-color: var(--mgr-accent); background: var(--mgr-accent-soft); }
.mg-rate__row--quiet .mg-rate__pick { cursor: default; color: var(--mgr-ink-muted); }
.mg-rate__row--quiet .mg-rate__pick:hover { border-color: var(--mgr-line); background: var(--mgr-card); }

/* A read-only card (no OnPick): the row is a block, not a button - nothing
   hovers, nothing suggests a click that does nothing. */
.mg-rate__pick--flat { cursor: default; }
.mg-rate__pick--flat:hover { border-color: var(--mgr-line); background: var(--mgr-card); }

.mg-rate__name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mg-rate__badge {
    font-size: .72rem; padding: .08rem .4rem; border-radius: .6rem;
    background: var(--mgr-gold); color: var(--mgr-accent-deep);
}
.mg-rate__advantage { font-size: .78rem; color: var(--mgr-accent-deep); }

.mg-rate__amounts { grid-area: amounts; text-align: right; display: grid; gap: .1rem; }
.mg-rate__was { display: block; font-size: .78rem; color: var(--mgr-ink-muted); }
.mg-rate__was-label { margin-right: .3rem; }
.mg-rate__now-label { font-size: .78rem; color: var(--mgr-ink-soft); margin-right: .3rem; }
.mg-rate__total { font-size: 1.25rem; }
.mg-rate__unit { font-size: .76rem; color: var(--mgr-ink-muted); margin-left: .3rem; }
.mg-rate__per { font-size: .82rem; color: var(--mgr-ink-soft); }
/* The gain is the only green on the card: what he wins, not what he pays. */
.mg-rate__saving { font-size: .82rem; color: var(--mgr-gain); }

.mg-rate__cta { grid-area: cta; font-size: .8rem; color: var(--mgr-accent); }
.mg-rate__row--chosen .mg-rate__cta { color: var(--mgr-accent-deep); }
.mg-rate__row--quiet .mg-rate__cta { visibility: hidden; }

/* A sentence instead of a number - a missing rate must never read as a cheap stay. */
.mg-rate__sentence { grid-area: amounts; font-size: .85rem; color: var(--mgr-ink-soft); max-width: 22rem; }
.mg-rate__vat { margin: .6rem 0 0; font-size: .78rem; color: var(--mgr-ink-muted); }

/* On a phone the amount sits BELOW the arrangement, not beside it: side by side
   390 px gets too narrow and the number breaks in half. */
@media (max-width: 30rem) {
    .mg-rate__pick { grid-template-columns: 1fr; grid-template-areas: "name" "amounts" "cta"; }
    .mg-rate__amounts, .mg-rate__sentence { text-align: left; }
}