/* app/set-billing.css — page-local styles for Billing.
   Prefix every selector `.e8-set-billing-`. Shared grammar lives in app/set-core.css and must not
   be duplicated here; if a page needs a new shared primitive, that is a core change, not a
   local override. Tokens only — no hex, no raw font sizes.

   THREE SHAPES LIVE HERE, and nothing else does.
     - the stat card      (three across, tinted glyph, faint corner wash)
     - the plan card      (carries its own segmented control, so it cannot be .e8-set-radiocard)
     - the total strip    (tinted full-bleed row inside the card, arithmetic left / total right)
   Every measurement they use is either a core variable (--set-card-pad-x, --set-row-pad-y,
   --set-line, --set-tint, --set-radius-card) or a --ui-* token, so this page cannot drift away
   from its neighbours by hardcoding a different padding or radius. The 36px/9px glyph box in
   particular is copied from .e8-set-glyph deliberately: mismatched icon boxes between pages is a
   named failure mode in the reference spec.

   TYPE. Money is the focal quantity on this page, so the plan price and the annual total use
   --ui-text-metric (28, numerals only — which is what they are). The three stat values carry
   mixed content ("None", a pill) and sit one step down at --ui-text-display.

   CASCADE. The two @media blocks are at the BOTTOM, after every rule they narrow. A conditional
   at-rule adds no specificity, so one written above its own base rule never applies. */

/* ---------- section heading with a glyph ------------------------------------------------------ */
.e8-set-billing-sectitle { display: inline-flex; align-items: center; gap: 8px; }
.e8-set-billing-sectitle .material-symbols-outlined { font-size: var(--ui-icon-md); color: var(--ui-accent); }

/* ---------- the three stat cards -------------------------------------------------------------- */
.e8-set-billing-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
/* Same 14px gap the core layer puts between two stacked cards in one section. */
.e8-set-billing-stats + .e8-set-card { margin-top: 14px; }

.e8-set-billing-stat {
  position: relative;
  overflow: hidden;
  padding: 16px var(--set-card-pad-x) 18px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-card);
  background: var(--ui-surface);
}
/* The faint corner wash. ::before is the first child in paint order, and the real children below
   are position:relative with auto z-index, so they paint over it without a z-index ladder. */
.e8-set-billing-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140px 110px at 100% 0%, var(--e8-set-billing-wash), transparent 70%);
}
.e8-set-billing-stat > * { position: relative; }

.e8-set-billing-stat.is-plan {
  --e8-set-billing-tint: color-mix(in srgb, var(--ui-accent) 13%, transparent);
  --e8-set-billing-line: color-mix(in srgb, var(--ui-accent) 26%, transparent);
  --e8-set-billing-ink: var(--ui-accent);
  --e8-set-billing-wash: color-mix(in srgb, var(--ui-accent) 8%, transparent);
}
.e8-set-billing-stat.is-seats {
  --e8-set-billing-tint: var(--ui-info-tint);
  --e8-set-billing-line: var(--ui-info-br);
  --e8-set-billing-ink: var(--ui-info);
  --e8-set-billing-wash: color-mix(in srgb, var(--ui-info) 9%, transparent);
}
.e8-set-billing-stat.is-status {
  --e8-set-billing-tint: var(--ui-warning-tint);
  --e8-set-billing-line: var(--ui-warning-br);
  --e8-set-billing-ink: var(--ui-warning);
  --e8-set-billing-wash: color-mix(in srgb, var(--ui-warning) 9%, transparent);
}

.e8-set-billing-stat-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 9px;
  border: 1px solid var(--e8-set-billing-line);
  background: var(--e8-set-billing-tint);
}
.e8-set-billing-stat-glyph .material-symbols-outlined {
  font-size: var(--ui-icon-md);
  color: var(--e8-set-billing-ink);
}
.e8-set-billing-stat-cap {
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-tertiary);
}
.e8-set-billing-stat-v {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-top: 3px;
  font-size: var(--ui-text-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.e8-set-billing-stat-sub {
  margin-top: 4px;
  font-size: var(--ui-text-sm);
  line-height: 1.45;
  color: var(--ui-text-secondary);
}

/* ---------- the two plan cards ----------------------------------------------------------------- */
.e8-set-billing-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px var(--set-card-pad-x);
}
.e8-set-billing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 15px 15px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-card);
  background: var(--ui-surface);
  transition: border-color 130ms ease, background 130ms ease;
}
.e8-set-billing-plan:hover { border-color: var(--ui-border-strong); }
/* AFTER :hover on purpose — equal specificity, so the later rule keeps the accent while hovered.

   Reference 2.5 wants a selected radio card to read as an accent EDGE of ~1.5px, not as a tint with
   a hairline. That edge is drawn as an inset outline rather than `border-width: 1.5px` because an
   outline sits outside layout: bumping the border would pull every line in the card 0.5px inward on
   selection and push it back out on deselection, so choosing a plan would visibly jiggle the other
   one. `outline-offset: -1.5px` lands the 1.5px band exactly over the 1px border it replaces, so
   there is no seam between the two and `getComputedStyle().outlineWidth` reports the real figure. */
.e8-set-billing-plan.is-on {
  border-color: var(--ui-accent);
  outline: 1.5px solid var(--ui-accent);
  outline-offset: -1.5px;
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface));
}

/* The real radio. Stretched over the whole card so the card is the click target, and first in the
   DOM so it is also first in the tab order. The segmented control is lifted above it below. */
.e8-set-billing-plan-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: var(--set-radius-card);
  background: transparent;
  cursor: pointer;
}
.e8-set-billing-plan-hit:focus-visible { border-radius: var(--set-radius-card); }

.e8-set-billing-plan-top {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.e8-set-billing-plan-name {
  flex: 1;
  min-width: 0;
  font-size: var(--ui-text-md);
  font-weight: 600;
  color: var(--ui-text);
}
/* Empty circle → filled accent circle with a white check. The glyph is always rendered and only
   fades in, so selecting a plan cannot shift the row by a pixel. */
.e8-set-billing-plan-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface);
}
.e8-set-billing-plan-mark .material-symbols-outlined {
  font-size: var(--ui-icon-xs);
  color: var(--ui-accent-text);
  opacity: 0;
}
.e8-set-billing-plan.is-on .e8-set-billing-plan-mark {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}
.e8-set-billing-plan.is-on .e8-set-billing-plan-mark .material-symbols-outlined { opacity: 1; }

.e8-set-billing-plan-desc {
  margin: 4px 0 0;
  font-size: var(--ui-text-base);
  line-height: 1.45;
  color: var(--ui-text-secondary);
}
.e8-set-billing-plan-seg {
  position: relative;
  z-index: 2;
  margin-top: 12px;
}
.e8-set-billing-plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.e8-set-billing-plan-amt {
  font-size: var(--ui-text-metric);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.e8-set-billing-plan-unit {
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
}
.e8-set-billing-plan-sub {
  margin-top: 3px;
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
  font-variant-numeric: tabular-nums;
}
.e8-set-billing-plan-save { margin-top: 10px; }

/* ---------- seat count -------------------------------------------------------------------------- */
.e8-set-billing-req {
  color: var(--ui-danger);
  font-weight: 500;
}
.e8-set-billing-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--ui-text-base);
  line-height: 1.45;
  color: var(--ui-warning);
}
.e8-set-billing-note .material-symbols-outlined {
  flex: none;
  font-size: var(--ui-icon-xs);
}

/* ---------- annual total + call to action --------------------------------------------------------
   Both are direct children of the card, so the core layer already draws the inset hairline above
   them. They only supply the tint, the padding rhythm and the two-column split. */
.e8-set-billing-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: var(--set-row-pad-y) var(--set-card-pad-x);
  background: var(--set-tint);
}
.e8-set-billing-total-l {
  flex: 1;
  min-width: 0;
}
.e8-set-billing-total-cap {
  font-size: var(--ui-text-md);
  font-weight: 600;
  color: var(--ui-text);
}
.e8-set-billing-total-math {
  margin-top: 2px;
  font-size: var(--ui-text-base);
  line-height: 1.45;
  color: var(--ui-text-secondary);
  font-variant-numeric: tabular-nums;
}
.e8-set-billing-total-r {
  flex: none;
  text-align: right;
}
.e8-set-billing-total-v {
  font-size: var(--ui-text-metric);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.e8-set-billing-total-sub {
  margin-top: 2px;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-secondary);
  font-variant-numeric: tabular-nums;
}

.e8-set-billing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: var(--set-row-pad-y) var(--set-card-pad-x);
}
.e8-set-billing-cta-txt {
  flex: 1;
  min-width: 220px;
  font-size: var(--ui-text-base);
  line-height: 1.45;
  color: var(--ui-text-secondary);
}
.e8-set-billing-cta-act {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- narrow -------------------------------------------------------------------------------
   Both blocks sit after every rule they override. 840 and 640 are the only breakpoints on this
   surface; 840 is where the settings rail becomes a drawer, so the content column actually gets
   WIDER there and only the plan pair needs to give way at 640. */
@media (max-width: 640px) {
  .e8-set-billing-stats { grid-template-columns: minmax(0, 1fr); }
  .e8-set-billing-plans { grid-template-columns: minmax(0, 1fr); }
  .e8-set-billing-total { flex-direction: column; align-items: flex-start; }
  .e8-set-billing-total-r { text-align: left; }
  .e8-set-billing-cta-act { width: 100%; }
  .e8-set-billing-cta-act .e8-set-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .e8-set-billing-plan { transition: none; }
}