/* =====================================================================
   yourtimes.app · price cards + billing toggle (Design 8 Oct 2026)
   Markup: cs_platform/pricing_ui.py (server) · cabinet app.js (same classes) · behaviour: static/js/billing-toggle.js
   Works on every surface by reading that surface's own tokens (first one defined wins):
     pay-first demo bar --pf-*  ·  cabinet / checkout_pf --cs-*  ·  landing --ink/--paper  ·  demo + legacy checkout --ink/--bg
   Night/dark comes for free: the tokens swap, so "selected = ink fill + paper text" becomes paper fill + ink text.
   No shadows, no gradients, radius 0. Numbers use tabular figures and both billing variants share one grid cell,
   so a swap never moves the layout.
   ===================================================================== */
.pc, .bill-tg {
  --pc-ink: var(--pf-ink, var(--cs-text, var(--ink, #111111)));
  --pc-paper: var(--pf-bg, var(--cs-bg, var(--paper, var(--bg, #FBFAF7))));
  --pc-muted: var(--pf-quiet, var(--cs-hint, var(--ink-3, var(--muted, #5E5B56))));
  --pc-f-text: var(--pf-f-text, var(--cs-font-text, var(--f-text, 'Source Serif 4', 'Noto Naskh Arabic', Georgia, serif)));
  --pc-f-ui: var(--pf-f-ui, var(--cs-font-sans, var(--f-ui, 'Inter Tight', 'Noto Naskh Arabic', 'Helvetica Neue', Arial, sans-serif)));
  --pc-red: #D6391F;
  /* the "−21%" part of the Yearly label, per state (Design AA, 8 Oct 2026; test_pricing_1008.Contrast):
     Paper unselected #D6391F on #FBFAF7 · Paper selected #E2573D on ink #111 · Night unselected #E2573D on #17140F ·
     Night selected #A52A15 on the paper-coloured fill #EAE4D8 */
  --pc-save-off: #D6391F;
  --pc-save-on: #E2573D;
}
:root[data-theme="dark"] .bill-tg, :root[data-theme="night"] .bill-tg { --pc-save-off: #E2573D; --pc-save-on: #A52A15; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bill-tg { --pc-save-off: #E2573D; --pc-save-on: #A52A15; }
}

/* ---------- toggle: two attached buttons (role=radiogroup / radio + aria-checked) ---------- */
.bill-tg { display: inline-flex; align-items: stretch; padding: 0; margin: 0 0 26px; border: 1px solid var(--pc-ink); border-radius: 0; background: transparent; }
.bill-tg[hidden] { display: none !important; }
.bill-tg button { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 0; background: transparent; color: var(--pc-ink); font: 600 15px/1 var(--pc-f-ui); cursor: pointer; box-shadow: none; white-space: nowrap; }
.bill-tg button + button { border-inline-start: 1px solid var(--pc-ink); }
.bill-tg button[aria-checked="true"] { background: var(--pc-ink); color: var(--pc-paper); }
.bill-tg button:focus-visible { outline: 2px solid var(--pc-red); outline-offset: 2px; }
.bill-tg .bill-save { padding: 0; border: 0; border-radius: 0; background: none; color: var(--pc-save-off); font: 600 13px/1 var(--pc-f-ui); letter-spacing: 0; text-transform: none; }
.bill-tg button[aria-checked="true"] .bill-save { color: var(--pc-save-on); }

/* ---------- card: line 1 big setup, line 2 "then $x/month", fine print ---------- */
.pc { --pc-big: 52px; }
.pc-swap { display: grid; }
.pc-v { grid-area: 1 / 1; min-width: 0; }
.pc-ghost { visibility: hidden; pointer-events: none; }   /* billing-toggle.js: the other billing(s), same cell = reserved size */
.pc .pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.pc .pc-big { font-size: var(--pc-big); line-height: 1; font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; }
.pc .pc-then { margin: 8px 0 0; font: 400 16px/1.35 var(--pc-f-text); color: var(--pc-ink); }
.pc .pc-label { font: 400 18px/1 var(--pc-f-text); }
.pc .pc-then .pc-setup { display: block; }
.pc .pc-then b { font-weight: 700; box-shadow: none; color: inherit; }
.pc .pc-then .pc-note { display: block; margin-top: 2px; font: 400 13px/1.4 var(--pc-f-ui); color: var(--pc-muted); }   /* Design 8 Oct 12:26: small, own line */
.pc .pc-fine { margin: 6px 0 0; font: 400 13px/1.4 var(--pc-f-ui); color: var(--pc-muted); }
.pc .num, .pc .pc-num { font-variant-numeric: tabular-nums lining-nums; unicode-bidi: isolate; }
@media (max-width: 400px) { .pc { --pc-big: 44px; } .bill-tg button { padding: 0 12px; } }

/* ---------- demo upsell price row (cs_platform/site_home/demo_features.price_row) ---------- */
.up-price { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule, currentColor); }
.up-price h3 { margin: 0 0 14px; }
.up-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 32px; }
.up-price-plan h4 { margin: 0 0 8px; font: 700 18px/1.2 var(--pc-f-ui, inherit); }
.up-price .pc { --pc-big: 40px; }