/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PIN YAKO NI PRODUCT YAKO — the protection screen's styles.
   VERBATIM from sokoni-delivery-hub.css @ f996e80 (release/merchant-launch-rc). Class names are
   unchanged (.dh-py-*) so the markup recovered alongside it needs no edits, and so a later merge
   of the full delivery hub collides visibly rather than silently diverging.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── PIN YAKO NI PRODUCT YAKO ─────────────────────────────────────────────
   The buyer's protection, as one premium screen. Every colour reads from the SOKONI
   tokens (--sk-*) with a literal fallback, so this looks right on a page that loaded the
   design system AND on one that did not — the protection must never depend on a
   stylesheet arriving.
   ───────────────────────────────────────────────────────────────────────── */

.dh-py-screen {
  position: fixed; inset: 0; z-index: var(--sk-z-sheet, 100010);
  display: grid; place-items: center;
  padding: 20px 16px;
  overflow-y: auto;
  background: var(--sk-bg-scrim, rgba(5,15,5,.88));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: dhPyIn .22s ease-out;
}
@keyframes dhPyIn { from { opacity: 0; } to { opacity: 1; } }
/* Lightweight by design: one fade, no transforms on a full-screen element. A PWA on a
   mid-range Android should not drop frames showing a warning. */
@media (prefers-reduced-motion: reduce) { .dh-py-screen { animation: none; } }

.dh-py {
  width: 100%; max-width: 860px;
  margin: auto;
  padding: 26px 18px 22px;
  border-radius: 22px;
  background: var(--sk-bg-card, #111e11);
  border: 1px solid var(--sk-border-brand, rgba(113,255,0,.3));
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  color: var(--sk-text-primary, rgba(255,255,255,.95));
  text-align: center;
}
/* Rendered inline rather than as a screen (an order card), it drops the outer chrome. */
.dh-py-screen > .dh-py { margin: auto; }

/* THE LOCK. Large on purpose: this is the one screen where the security symbol is the
   subject rather than an ornament beside a heading. */
.dh-py-crest {
  width: 64px; height: 64px; margin: 0 auto 12px;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
  border-radius: 50%;
  background: var(--sk-green-dim, rgba(113,255,0,.15));
  border: 2px solid var(--sk-green-border, rgba(113,255,0,.35));
  box-shadow: var(--sk-green-glow, 0 0 24px rgba(113,255,0,.3));
}

.dh-py-slogan {
  margin: 0 0 18px;
  font-size: clamp(19px, 5.2vw, 28px);
  font-weight: 900; line-height: 1.15; letter-spacing: .005em;
  color: var(--sk-text-brand, #71ff00);
  text-wrap: balance;
}

/* ── THE OPEN BOOK ────────────────────────────────────────────────────────
   Two pages of ONE document. On a phone the pages stack and the seam turns horizontal —
   still a single bound object, never two loose cards, because a reader who takes them for
   two messages reads only the one in their language. */
.dh-py-book {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (min-width: 720px) {
  .dh-py-book { grid-template-columns: 1fr 1px 1fr; }
}

.dh-py-page {
  padding: 18px 16px 20px;
  color: #14210f;                       /* paper, not the shell's light-on-dark */
  min-width: 0;                         /* long words must wrap, not widen the grid */
}

/* The binding. A gradient rather than a flat rule, so it reads as a fold. */
.dh-py-seam {
  background: linear-gradient(180deg, rgba(20,33,15,.05), rgba(20,33,15,.22), rgba(20,33,15,.05));
  min-height: 1px;
}
@media (max-width: 719px) {
  .dh-py-seam {
    height: 1px;
    background: linear-gradient(90deg, rgba(20,33,15,.05), rgba(20,33,15,.22), rgba(20,33,15,.05));
  }
}

.dh-py-lang {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 11px;
  background: rgba(79,200,0,.14); color: #2f6b00;
  border: 1px solid rgba(79,200,0,.3);
}

.dh-py-lead { margin: 0 0 12px; font-size: 14.5px; font-weight: 800; line-height: 1.35; }

.dh-py-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dh-py-check {
  display: grid; grid-template-columns: 26px 1fr; gap: 9px;
  align-items: start; font-size: 13.5px; line-height: 1.42;
}
.dh-py-ico {
  width: 26px; height: 26px; display: grid; place-items: center;
  font-size: 14px; border-radius: 8px;
  background: rgba(20,33,15,.06);
}

.dh-py-warn {
  display: grid; grid-template-columns: 20px 1fr; gap: 9px;
  margin-top: 14px; padding: 12px;
  border-radius: 12px;
  background: rgba(224,72,61,.09);
  border: 1px solid rgba(224,72,61,.32);
  font-size: 13.5px; line-height: 1.45;
}
.dh-py-warn-ico { font-size: 15px; line-height: 1.3; }
.dh-py-warn b { display: block; }
.dh-py-warn-sub { display: block; margin-top: 4px; font-weight: 700; }

/* The half people forget: a buyer who thinks the code signs away their claim refuses to
   give it, and the delivery stalls at the door over a fear we created. */
.dh-py-rights {
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid rgba(20,33,15,.12);
  font-size: 11.5px; line-height: 1.5; color: #3d4a37;
}

/* ── THE ACTION ───────────────────────────────────────────────────────────
   .sk-btn / .sk-btn-primary come from sokoni-components.css. These rules only SIZE and
   PLACE it, plus a self-contained fallback for pages that never loaded the design system —
   a button that inherits nothing would render as unstyled text on exactly the screen that
   most needs to look trustworthy. */
/* SIZE AND PLACEMENT ONLY — the look is .sk-btn / .sk-btn-primary from
   sokoni-components.css, and this deliberately does NOT fight the platform mobile rules.

   Measured on a real page rather than assumed: sokoni-premium-v2.css sets .sk-btn-primary
   to 14px with 13px padding under 600px !important, and mobile.css gives every button a
   44px minimum target. An earlier revision here raised specificity to force 52px and lost
   anyway — and it was the wrong instinct: 44px IS the platform touch-target standard and
   meets the requirement, so overriding it for one screen would be the second button system
   this was told not to build. The desktop size still comes from below.

   white-space is the one genuine override: .sk-btn is nowrap, and a label carrying two
   languages must be allowed to wrap on a narrow phone rather than overflow. */
.dh-py .dh-py-ok {
  width: 100%; max-width: 420px; margin: 20px auto 0;
  min-height: 52px;
  font-size: 15px; font-weight: 800; letter-spacing: .03em;
  white-space: normal;
}
.dh-py .dh-py-ok:not(.sk-btn-primary),
.dh-py .dh-py-ok {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--sk-green, #71ff00), var(--sk-green-dark, #4fc800));
  color: var(--sk-text-inverse, #050f05);
  font-family: inherit;
}
.dh-py .dh-py-ok:active { transform: scale(.985); }
.dh-py .dh-py-ok:focus-visible {
  outline: 3px solid var(--sk-border-focus, rgba(113,255,0,.6)); outline-offset: 2px;
}

/* ── THE COMPACT FORM ─────────────────────────────────────────────────────
   Both languages still, because the badge is what survives an acknowledgement. */
.dh-py-badge {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; margin: 10px 0;
  border-radius: 13px;
  background: var(--sk-green-dim, rgba(113,255,0,.12));
  border: 1px solid var(--sk-green-border, rgba(113,255,0,.3));
}
.dh-py-badge-slogan { font-size: 13.5px; font-weight: 800; }
.dh-py-badge-sub { font-size: 11.5px; line-height: 1.45; opacity: .8; }