/* ==========================================================================
   "Can I afford to live where I teach?" — page-specific bits
   Loaded ONLY by /playground/afford/, after calstrs.css and worth.css, which
   supply the calculator pieces and the whole map/card/list layout (the w-*
   classes). This file adds the four rent-share bands and the card details.

   Every colour is a main.css token or a mix of them. Light mode only, like
   worth.css. Amber TEXT uses --amber-text; --amber is graphics-only.
   ========================================================================== */

@layer components {

  /* the four bands: emerald (comfortable) → amber → deep amber (ouch) */
  :root {
    --b-ok:    var(--emerald);
    --b-fine:  color-mix(in oklab, var(--emerald-soft), var(--emerald-bright) 45%);
    --b-tight: color-mix(in oklab, var(--amber-soft), var(--amber) 50%);
    --b-ouch:  color-mix(in oklab, var(--amber), var(--ink) 35%);
  }

  /* ── controls: the bedroom picker ─────────────────────────────────── */
  .a-beds { display: flex; width: 100%; }
  .a-beds .seg { flex: 1 1 0; padding: 8px 6px; min-height: 40px; }

  /* ── map legend: four labelled swatches ───────────────────────────── */
  .a-bands {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 10px;
    font-size: .8125rem; color: var(--ink-soft);
  }
  .a-bands div { display: grid; gap: 4px; min-width: 0; }
  .a-bands i { display: block; height: 12px; border-radius: 3px; }
  .a-bands b { color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: .75rem; display: block; }
  @media (max-width: 560px) {
    .a-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* phones: let the result bar wrap to a second line instead of cutting off */
    .w-bar { white-space: normal; }
  }

  /* ── card ─────────────────────────────────────────────────────────── */
  .a-figrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
  .a-pill {
    display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
    padding: 3px 10px; border-radius: 999px; color: var(--ink);
  }
  .a-pill.a-ok   { background: var(--b-ok); color: #fff; }
  .a-pill.a-fine { background: var(--b-fine); }
  .a-pill.a-tight { background: var(--b-tight); }
  .a-pill.a-ouch { background: var(--b-ouch); color: #fff; }
  dl.a-pts dd small { font-family: var(--sans); font-weight: 400; color: var(--ink-soft); margin-left: 2px; }
  dl.a-pts .a-left { padding-top: 6px; border-top: 1px solid var(--rule-soft); }
  dl.a-pts dt.a-left { color: var(--ink); font-weight: 700; }
  dl.a-pts dt.a-left span { display: block; font-weight: 400; color: var(--ink-soft); }
  .a-worth { font-size: var(--fs-small); justify-self: start; }

  /* ── "What the colors mean" ───────────────────────────────────────── */
  .calc-prose .a-bandlist { list-style: none; padding: 0; }
  .a-bandlist li { display: flex; gap: 10px; align-items: baseline; }
  .a-sw { flex: none; width: 14px; height: 14px; border-radius: 3px; transform: translateY(2px); }
}