/* ==========================================================================
   Glow · Paywall sheet (.pw) — Atelier frame 5 + DESIGN.md amendment 10.
   Rendered inside .sheet.sheet--invert: tokens.css remaps every colour token there
   (black sheet / white ink in the white theme, paper sheet / ink in the black one),
   so this file only reads tokens — it never names a colour and never knows the theme.
   The kicker «ПОДПИСКА — 30 ДНЕЙ» and the close button live in the sheet's own top
   line (core.js hoists the kicker), so .pw starts with the title.
   ========================================================================== */

.pw {
  position: relative;
  color: var(--ink);
  padding-bottom: var(--sp-1);
}

/* Text painted straight into an opaque layer (the sheet, the filled button) gets subpixel (ClearType)
   antialiasing on Windows — coloured fringes wherever the greyscale filter of amendment 11 does not apply
   (touch-only Windows, headless screenshots). A transparent layer of its own keeps these labels grey.
   (.pw__kicker is the kicker core.js lifts into the sheet's top line.) */
.pw__kicker,
.pw__buy-idle,
.pw__buy-busy { will-change: transform; }

/* ---------- title: «Glow Premium» — the serif speaks */

.pw__title {
  margin-top: 2px;
  font: var(--fw-serif-display) var(--fs-title-xl)/.94 var(--serif);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
  color: var(--ink);
}
.pw__title em { font-style: italic; letter-spacing: -.035em; }
@media (max-width: 383.98px) { .pw__title { font-weight: var(--fw-serif-title); } }   /* < 48 px → 340 (A.3), like .page-title */

/* ---------- price: strong rule, the numeral, the star on its middle line, the terms */

.pw__price,
.pw__status {
  position: relative;
  margin-top: clamp(18px, 5.2vw, 24px);
  border-bottom: var(--hair) solid var(--rule-2);
}
.pw__price::before,
.pw__status::before {                        /* the strong rule — drawn across on open */
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  border-top: var(--hair) solid var(--rule);
  transform-origin: 0 50%;
}

.pw__price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  align-items: last baseline;               /* the terms stand on the numeral's baseline */
  column-gap: clamp(14px, 4.8vw, 22px);
  padding: clamp(20px, 5.8vw, 26px) 0 clamp(18px, 5vw, 22px);
}
.pw__num {
  font: var(--fw-serif-display) var(--fs-hero)/var(--lh-hero) var(--serif);
  letter-spacing: var(--tr-hero);
  font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap;                       /* a numeral, not a title */
  color: var(--ink);
}
.pw__amount { display: inline-block; }
.pw__star {
  display: inline-block;
  width: .24em; height: .24em;
  margin-left: .11em;                        /* also pays back the numeral's negative tracking */
  vertical-align: .235em;                    /* centred on the figures' middle line — never a superscript */
  fill: currentColor; stroke: none;
  overflow: visible;
}

.pw__per { display: grid; gap: 7px; min-width: 0; }
.pw__term { font: var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--sans); color: var(--ink); }
.pw__day {
  display: flex; align-items: center; gap: 5px;
  font: var(--fw-regular) var(--fs-note)/var(--lh-ui) var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-3);
}
.pw__approx {                                /* «≈» drawn: neither family has the glyph */
  width: 10px; height: 8px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: square;   /* square ends, like every icon */
}

/* ---------- Premium already active: the same sheet, a status instead of the price */

.pw__status { padding: 18px 0 20px; }
.pw__date {
  margin-top: var(--sp-3);
  font: var(--fw-serif-title) var(--fs-num-l)/1 var(--serif);
  letter-spacing: var(--tr-title);
  color: var(--ink);
}

/* ---------- features I–IV */

.pw__list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);   /* the same column as .gate__list: the paywall opens over a gate */
  align-items: baseline;
  padding: 12px 0 13px;
  border-bottom: var(--hair) solid var(--rule-2);
  font: var(--fw-regular) var(--fs-body)/1.42 var(--sans);
  color: var(--ink);
}
.pw__list li:last-child { border-bottom: 0; }   /* the footer's hairline closes the list */
.pw__rn {
  font: var(--fw-serif-text) var(--fs-body)/1 var(--serif);
  letter-spacing: .04em;
  font-variant-numeric: lining-nums;
  color: var(--ink-3);
}

/* ---------- action + fine print: pinned in .sheet__foot (amendment 23)
   On short Telegram viewports (iPhone SE 375 × 590, Android 360 × 560) only the body scrolls; the button and the
   auto-renew terms stay on screen. The body then fades out under the same 40 px mask as .sheet--split —
   paywall.js sets .is-clipped only while it really scrolls (the last row has 41 px of padding below its text,
   so at the end of the scroll nothing is faded). On tall screens nothing scrolls and nothing fades: the action
   simply sits under the footer's hairline. */

.pw--foot { padding-bottom: 0; }
.sheet__body:has(> .pw.is-clipped) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.pw__buy-idle { display: inline-flex; align-items: center; }
.pw__buy-star {
  width: 12px; height: 12px; flex: none;
  margin-left: .5em;
  position: relative; top: -1.5px;          /* optical: centre on the caps, not on the line box */
  fill: currentColor; stroke: none;
}

/* Loading: the label becomes «ОТКРЫВАЮ ОПЛАТУ»; components.css keeps the ink fill and runs the 1 px bar
   (.btn.is-busy::before, 11 px from the bottom). The label lifts 3 px so label + bar read as one group. */
.pw__buy-busy {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding-bottom: 6px;
}
.pw__buy.is-busy .pw__buy-idle { visibility: hidden; }
.pw__buy.is-busy .pw__buy-busy { display: flex; }
.pw__buy.is-busy { cursor: progress; }

.pw__fine {
  margin: 14px auto 0;
  max-width: 31em;
  text-align: center;
  text-wrap: balance;
  font: var(--fw-regular) clamp(var(--fs-note), 3.6vw, var(--fs-body-s))/1.5 var(--sans);
  color: var(--ink-3);
}

/* ---------- motion: the rule draws, the numeral rises out of its slot, the rows follow */

.pw [data-pw-in] {
  animation: pw-rise var(--d-enter) var(--e-out) both;
  animation-delay: calc(80ms + var(--i, 0) * var(--stagger));
}
@keyframes pw-rise { from { opacity: 0; transform: translateY(var(--rise)); } }

.pw__price::before,
.pw__status::before { animation: pw-draw 760ms var(--e-out) 90ms both; }   /* cuts across as the sheet lands */
@keyframes pw-draw { from { transform: scaleX(0); } }

.pw__amount { animation: pw-slot 880ms var(--e-out) 170ms both; }
@keyframes pw-slot {
  from { transform: translateY(.8em); clip-path: inset(-.8em -.3em .8em -.3em); }
  to { transform: none; clip-path: inset(-.1em -.3em -.1em -.3em); }
}
.pw__star { animation: pw-pop 520ms var(--e-out) 560ms both; }
@keyframes pw-pop { from { opacity: 0; transform: scale(.4); } }

@media (prefers-reduced-motion: reduce) {
  .pw [data-pw-in],
  .pw__amount,
  .pw__star,
  .pw__price::before,
  .pw__status::before { animation: none !important; }
}

/* ---------- narrow phones (< 375 px, gutter 20 px) */

@media (max-width: 374.98px) {
  .pw__list li { font-size: 14.5px; }
  .pw__term { font-size: var(--fs-body-s); }
}