/* =============================================================
   PRICING CARDS — the membership plan cards and their cadence
   switch, shared by the storefront (shop/browse.php) and the
   dashboard (dashboard/membership.php).

   It lives in its own sheet because those two pages load no
   stylesheet in common but tokens.css and chrome.css: the shop
   does not load portal.css and the dashboard does not load
   shop.css. Defining it in either one meant the other carried a
   copy, and the copy is what drifts.

   Every colour here is a token, so the same rules render in each
   page's own palette without a single value being restated: the
   three head tints follow --amber, --base and --teal, which the
   dashboard and the storefront each resolve for themselves.

   Load AFTER tokens.css and before the host page's own sheet.
   ============================================================= */

/* The cadence switch — only rendered when the catalogue actually prices its
   plans more than one way, so this is never a control over a choice of one. */
.pricing-toggle {
  display: flex; gap: 4px; width: fit-content; margin: 0 auto 32px; padding: 4px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 999px;
  max-width: 100%; overflow-x: auto;
}
.pricing-toggle__btn {
  font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap;
  padding: 9px 18px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text2); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pricing-toggle__btn:hover { color: var(--text); }
.pricing-toggle__btn.is-active { background: var(--bg2); color: var(--text); box-shadow: var(--shadow-card); }
@media (prefers-reduced-motion: reduce) { .pricing-toggle__btn { transition: none; } }

.pricing-grid {
  display: grid; gap: 20px; list-style: none; margin: 0 auto; padding: 0;
  max-width: 78rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
/* The bug this fixes: [hidden]'s UA rule is an attribute selector, one step
   below a class in specificity, so .pricing-grid's own `display: grid`
   above was winning and every period panel stayed visible at once regardless
   of which toggle button was active. Named explicitly rather than reached for
   !important, so a probe reading the sheet can still see what beats what. */
.pricing-grid[hidden] { display: none; }

/* A pricing card: a tinted band carries the plan's name and price — the one
   thing a buyer compares across cards at a glance — over the card's plain
   ground for everything read second. Three tints cycle by position (--amber,
   --base and the ledger's third identity colour, the one credit-grant amounts
   already use), so three or more plans stay visually distinct without a
   fourth colour being invented for a fourth plan. */
.pricing-card {
  /* A host page may pin something to the card's own corner — the dashboard
     flags its recommended tier that way. */
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--rl);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.pricing-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: var(--amber-l); }
@media (prefers-reduced-motion: reduce) { .pricing-card { transition: none; } .pricing-card:hover { transform: none; } }

.pricing-card__head { padding: 26px 30px; background: var(--amber-bg); }
.pricing-card:nth-child(3n+2) .pricing-card__head { background: var(--base-bg); }
.pricing-card:nth-child(3n) .pricing-card__head { background: var(--teal-bg); }

.pricing-card__head h3 {
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .09em;
  margin: 0 0 12px; color: var(--amber-d);
}
.pricing-card:nth-child(3n+2) .pricing-card__head h3 { color: var(--base-d); }
.pricing-card:nth-child(3n) .pricing-card__head h3 { color: var(--teal-d); }

.pricing-card__price { margin: 0; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--amber-d); }
.pricing-card:nth-child(3n+2) .pricing-card__price { color: var(--base-d); }
.pricing-card:nth-child(3n) .pricing-card__price { color: var(--teal-d); }
.pricing-card__price span { font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: .8125rem; opacity: .7; margin-inline-start: 6px; }

/* A member's price to move up to this plan, under its list price. The
   breakdown lines say where the difference comes from. */
.pricing-card__upgrade { margin: 12px 0 0; font-size: .875rem; font-weight: 600; color: var(--text); }
/* The shop front loads this file but not portal.css, whose rule this repeats:
   a member's own or lower plan's button is a label, not a link. */
.pricing-card__cta.is-inert { cursor: default; opacity: .6; }
.pricing-card__upgrade small { display: block; margin-top: 3px; font-weight: 400; font-size: .75rem; color: var(--text2); }

.pricing-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 30px 30px; }
.pricing-card__desc { color: var(--text2); font-size: .875rem; margin: 0 0 20px; }

.pricing-card__benefits {
  list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px;
  font-size: .875rem; color: var(--text2);
}
.pricing-card__benefits li { position: relative; padding-inline-start: 24px; }
.pricing-card__benefits li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--amber-bg); color: var(--amber);
  font-weight: 700; font-size: .625rem; line-height: 1;
}
/* An upsell ("Get PrizeX with the Yearly plan") is not something this card
   includes, so it must not wear the included tick. */
.pricing-card__benefits li.pricing-card__upsell::before {
  content: '+'; background: transparent; color: var(--text2);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* The CTA is whichever button class the host page already has — .shop-cta on
   the storefront, .btn-primary in the dashboard — so a buyer meets the button
   they learned on that page rather than a third one invented here. This sheet
   only pins it to the foot of the card and makes it fill the width. */
.pricing-card__cta { margin-top: auto; }