/* syntheticandhuman.com — region.css: the price component's three states.

   A .px spot holds all four regions' figures, one [data-r] child each, in the
   order us, ca, uk, eu. region.js sets html.js-region as its last statement
   and html[data-region] once a region is known.

   1. No html.js-region (no script, or the script stopped): every spot lists
      all four figures, and the selector and the "Prices in" line stay hidden.
   2. html.js-region, no region yet: the lead spot's .px-hold (the element
      that carries it, one per page) gives way to the selector, and /pricing's H1 takes its .px-ask subject, "One price";
      every other spot keeps the list.
   3. html.js-region[data-region]: one figure per spot, the selector hidden,
      and the "Prices in" line naming the currency.

   Paints only through the page's palette tokens and states no colour of its
   own: check_region_prices holds it to that, which is what lets
   SAH_PAGE_STYLESHEET leave this file out of the palette checks. The inks and
   grounds used here are pairings SAH_SITE_PAIRS (/pricing) and
   SAH_INLINE_PAIRS (/) already measure; /partner maps them onto its own
   tokens. */

/* 1. the list: the default, and the fallback */
.px [data-r]+[data-r]::before{content:" · "}
/* The list wraps between figures, never inside one: its only spaces are the
   separators', and the "*" after a spot sits outside it. A spot in a nowrap
   cell (site.css, .ledger td:last-child) otherwise holds all four figures on
   one line, and /pricing scrolls sideways on a phone before a region is
   picked. One figure has no space to wrap at, so state 3 is unchanged. */
.px{white-space:normal}
.rpick,.rnow{display:none}
/* The H1's state-2 subject. .price-h .figure.px-ask outranks site.css's
   .price-h .figure{display:block} whichever sheet loads last. */
.price-h .figure.px-ask{display:none}
html:not(.js-region) .price-h .figure{font-size:clamp(30px,4.4vw,52px);line-height:1.1}

/* 2. the script ran and no region is picked yet. .px-hold, not the lead
   spot's parent through :has(): a browser without :has() drops the whole
   rule, and the figure's line stood there holding a lone "*". */
html.js-region:not([data-region]) .px-hold{display:none}
html.js-region:not([data-region]) .px-ask{display:block}
html.js-region:not([data-region]) .rpick{display:flex}

/* 3. a region is set */
html.js-region[data-region] [data-r]{display:none}
html.js-region[data-region] .px [data-r]::before{content:none}
html.js-region[data-region="us"] [data-r="us"],
html.js-region[data-region="ca"] [data-r="ca"],
html.js-region[data-region="uk"] [data-r="uk"],
html.js-region[data-region="eu"] [data-r="eu"]{display:inline}
html.js-region[data-region] .rnow{display:block}
/* syntheticandhuman.us: nginx sets region-lock with the US region, so
   nothing offers a change. */
html.js-region.region-lock .rnow{display:none}

/* the selector, the "Prices in" line, and the lines under the lead figure */
.rpick{flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.rpick__q{margin-right:4px;font-size:15px;font-weight:600;color:var(--ink-2)}
.rpick button{height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.rpick button:hover{border-color:var(--ink)}
.rnow{margin-top:12px;font-size:14px;color:var(--ink-3)}
.rnow button{padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.px-note{margin-top:8px;font-size:13px;color:var(--ink-3)}