/* shared/portal-rates.css — Carmen's rate card.
   Step 4, 26 Aug 2026.

   EVERY CONTROL SELECTOR IS QUALIFIED, and that is not style. A bare class is
   (0,1,0) and loses to `.hds button:not(.ds-btn)` at (0,2,1), so a size written
   as a bare class NEVER APPLIES. That trap was hit thirteen times on this
   project and twelve of them were found on 25 Aug by the guard in
   test/design-system.test.js. `.hds .x:not(.ds-btn)` is (0,3,0) and wins
   outright rather than relying on which stylesheet happens to load last. */

.rc { display: flex; flex-direction: column; gap: var(--sp-5); }

.rc .rc-h { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-head); }
.rc-lede { color: var(--t2); line-height: var(--lh-body); }
.rc-p { color: var(--t2); line-height: var(--lh-body); margin-bottom: var(--sp-4); }

.rc-block {
  background: var(--card); border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

/* ── One amount, with its unit beside it ─────────────────────────────────── */

.rc-cell { display: flex; flex-direction: column; gap: var(--sp-2); }
.rc-cell__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rc-cell__cur { font-size: var(--fs-body); font-weight: 700; }
.rc-cell__amt { min-height: 48px; max-width: 8em; }
.rc-cell__unit { min-height: 48px; flex: 1 1 9em; }
.rc-cell__hrs { min-height: 48px; max-width: 6em; }
.rc-cell__cov { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ── The dates she ticks ─────────────────────────────────────────────────── */

.rc-dates { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-3) 0; }
.rc-date {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bd-strong); border-radius: var(--r-md);
  font-size: var(--fs-body);
}
.hds .rc-date__x:not(.ds-btn) { min-height: 48px; }

/* ── The disclosures ─────────────────────────────────────────────────────── */

.rc-more {
  background: var(--card); border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
}
/* 56px, the primary target. A disclosure summary is the control she reaches for
   when she needs a night or a weekend rate, and it is the whole way in. */
.rc-more > summary {
  cursor: pointer; min-height: 56px; display: flex; align-items: center;
  font-size: var(--fs-body); font-weight: 700; color: var(--brand);
}
.rc-more > *:not(summary) { margin-top: var(--sp-4); }

/* ── What it comes to, in her words ──────────────────────────────────────── */

.rc-sum { background: var(--hero); border: 2px solid var(--hero-edge); }
.rc-sum, .rc-sum * { color: var(--t1); }
.rc .rc-sum__h { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); }
.rc-sum__list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); }
.rc-sum__list dt { font-size: var(--fs-min); font-weight: 700; }
.rc-sum__list dd { font-size: var(--fs-body); }

/* A refusal she can act on, never a wall of red. */
.rc-err { color: var(--danger, var(--t1)); font-weight: 700; line-height: var(--lh-body); }

/* The label the select needs and the eye does not. */
.rc-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}