/* assets/chooser.css · the plan chooser on /pricing (owner, 30 Oct 2026: "build a plan-chooser tool that guides visitors to
   the best membership"). Five questions, one at a time, then one membership (Free, Pro, Max or Infinite), for one person or a
   team with seats, and its Apply button. assets/chooser.js runs it; without JS the card is a plain list of links.
   Light mode (membership). A white card with a shadow and no border on the ghost ground. No magenta here: the page's one
   magenta action is the Pro card's Apply. Focus is the purple ring. Reduced motion: no fades. */

.pp-chooser-sec{ background:var(--pp-ghost, #F8F8FA); padding-block:8px 24px; scroll-margin-top:84px; }
@media (min-width:1024px){ .pp-chooser-sec{ padding-block:16px 32px; } }

.chooser{ display:grid; gap:20px; padding:20px; border-radius:24px; background:#fff; box-shadow:var(--pp-shadow, 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06)); }
.chooser__head{ display:grid; gap:8px; align-content:start; }
.chooser__head .t-eyebrow{ margin:0; }
.chooser__title{ margin:0; }
.chooser__lead{ margin:0; color:var(--pp-muted, #4A4A68); max-width:34rem; }
.chooser__body{ display:grid; gap:16px; align-content:start; min-width:0; }
@media (min-width:600px){ .chooser{ padding:28px; } }
@media (min-width:1024px){
  .chooser{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px 48px; padding:32px 40px; align-items:center; }
  .chooser[data-state="flow"], .chooser[data-state="result"]{ align-items:start; }
}

/* without JS: a plain list of links, one per membership, with who it is for */
.chooser__links{ display:grid; margin:0; padding:0; list-style:none; }
.chooser__links li + li{ border-top:1px solid var(--pp-hair, #E4E4EB); }
.chooser__links a{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:10px 0; text-decoration:none; color:var(--pp-ink, #000); }
.chooser__links a span{ font-size:14px; line-height:1.45; color:var(--pp-muted, #4A4A68); }
.chooser__links a b{ flex:none; font:600 16px/1.2 var(--pp-sans, 'IBM Plex Sans', sans-serif); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.chooser__links a:hover span{ color:var(--pp-ink, #000); }

.chooser__start{ justify-self:start; }
@media (min-width:1024px){ .chooser__start{ justify-self:end; } }
.chooser__start svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* the flow: a count, a bar, and one question at a time */
.chooser__flow{ display:grid; gap:16px; }
.chooser__flow[hidden], .chooser__result[hidden], .chooser__q[hidden], .chooser__seats[hidden], .chooser__links[hidden], .chooser__start[hidden]{ display:none; }
.chooser__bar{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }
.chooser__bar .t-meta{ color:var(--pp-muted, #4A4A68); white-space:nowrap; }
.chooser__track{ position:relative; height:4px; border-radius:999px; background:var(--pp-hair, #E4E4EB); overflow:hidden; }
.chooser__fill{ position:absolute; inset-block:0; inset-inline-start:0; width:var(--p, 20%); border-radius:inherit; background:var(--pp-purple, #3B06D4);
  transition:width var(--dur-base, 320ms) var(--ease-standard, cubic-bezier(.2,0,0,1)); }
.chooser__q{ display:grid; gap:12px; min-width:0; margin:0; padding:0; border:0; animation:chooser-in var(--dur-quick, 200ms) var(--ease-standard, ease); }
.chooser__legend{ float:inline-start; width:100%; margin:0 0 12px; padding:0; }   /* float lets the legend sit in the grid flow like a heading */
.chooser__legend:focus{ outline:none; }
.chooser__legend:focus-visible{ outline:3px solid var(--pp-focus, #3B06D4); outline-offset:2px; border-radius:8px; }
.chooser__opts{ clear:both; display:flex; flex-wrap:wrap; gap:8px; }
.chooser__opt{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:0; border-radius:999px; background:var(--pp-ghost, #F8F8FA);
  font:500 15px/1.3 var(--pp-sans, 'IBM Plex Sans', sans-serif); color:var(--pp-ink, #000); text-align:start; cursor:pointer;
  transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease), color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.chooser__opt:hover{ background:#EDEDF2; }
.chooser__opt[aria-pressed="true"]{ background:var(--pp-ink, #000); color:#fff; }
.pp .chooser__opt:focus-visible{ outline:3px solid var(--pp-focus, #3B06D4); outline-offset:2px; border-radius:999px; }

.chooser__seats{ display:grid; gap:8px; padding:16px; border-radius:12px; background:var(--pp-ghost, #F8F8FA); }
.chooser__seats .t-meta{ color:var(--pp-muted, #4A4A68); }
.chooser__seats .t-small{ margin:0; color:var(--pp-muted, #4A4A68); }
.chooser__seatrow{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.chooser__n{ width:96px; height:48px; padding:0 12px; border:0; border-radius:8px; background:#fff; box-shadow:var(--pp-shadow, 0 1px 2px rgba(0,0,0,.06));
  font:600 20px/1 var(--pp-sans, 'IBM Plex Sans', sans-serif); font-variant-numeric:tabular-nums; color:var(--pp-ink, #000); text-align:center; }
.chooser__n:focus-visible{ outline:3px solid var(--pp-focus, #3B06D4); outline-offset:2px; }

.chooser__nav{ display:flex; }
.chooser__back{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:600 14px/1.2 var(--pp-sans, 'IBM Plex Sans', sans-serif); color:var(--pp-ink, #000); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.chooser__back[hidden]{ display:none; }
.chooser__back svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[dir="rtl"] .chooser__nav .chooser__back svg{ transform:scaleX(-1); }
[dir="rtl"] .chooser__start svg, [dir="rtl"] .chooser__result [data-r-card] svg{ transform:scaleX(-1); }

/* the result: one membership, who it is for, the price (per seat and the total for a team) and its Apply button */
.chooser__result{ display:grid; gap:12px; justify-items:start; animation:chooser-in var(--dur-base, 320ms) var(--ease-standard, ease); }
.chooser__result:focus{ outline:none; }
.chooser__result .t-eyebrow{ margin:0; }
.chooser__name{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:0; }
.chooser__who{ color:var(--pp-muted, #4A4A68); }
.chooser__why{ margin:0; max-width:40rem; color:var(--pp-muted, #4A4A68); }
.chooser__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0; }
.chooser__price > span{ color:var(--pp-muted, #4A4A68); }
:lang(ar) .chooser__price b{ font-family:var(--font-ar); letter-spacing:0; }
.chooser__total{ margin:0; }
.chooser__total b{ color:var(--pp-ink, #000); font-variant-numeric:tabular-nums; }
.chooser__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin-top:4px; }
.chooser__live{ margin:0; padding:12px 16px; border-radius:12px; background:var(--pp-ghost, #F8F8FA); color:var(--pp-ink, #000); }
.chooser__live a{ font-weight:600; text-underline-offset:3px; }

@keyframes chooser-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .chooser__q, .chooser__result{ animation:none; }
  .chooser__fill, .chooser__opt{ transition:none; }
}