/* Billing surfaces. Shipped only when a Web Billing key was inlined at build
   time: the keyless output contains neither this file nor anything that links
   it. The pages borrow the corner, the fight card and the buttons from
   identity.css so they read as the same room. */
.premium-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px clamp(16px, 4vw, 40px) 64px;
}
.premium-corner {
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
}
.premium-corner .corner-card h1 {
  color: var(--corner-ink);
  margin: 0;
}
.premium-corner .corner-side {
  padding: 20px 24px 8px;
  min-width: 0;
}
.premium-corner .corner-side h2 {
  margin: 8px 0 4px;
}
.perk-card,
.plan-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.perk-card .bout,
.plan-list .bout {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.perk-card .bout-main span {
  color: var(--ink);
  font-size: 15px;
}
.plan-panel,
.plan-facts {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin: 0 0 40px;
}
.plan-list .bout {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: 64px;
}
.plan-list .featured {
  box-shadow: inset 3px 0 0 var(--bell);
}
.plan-price {
  font-family: "Inter Tight", system-ui, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  color: var(--ink);
}
.plan-list .button {
  min-height: 45px;
}
.plan-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}
.plan-loading,
.plan-outcome {
  color: var(--muted);
  margin: 8px 0;
}
.plan-error {
  border-left: 3px solid var(--ink);
  padding: 8px 12px;
  margin: 8px 0;
}
.plan-active {
  background: var(--corner);
  color: var(--corner-ink);
  padding: 18px 20px;
  margin: 8px 0 16px;
}
.plan-active a {
  color: var(--bell);
}
.access-code h3 {
  margin: 16px 0 4px;
}
.access-code-value {
  display: block;
  overflow-wrap: anywhere;
  border: 1px dashed var(--muted);
  background: var(--paper);
  padding: 12px;
  font-size: 14px;
}
.restore-panel {
  max-width: 640px;
}
.restore-label {
  display: block;
  font-weight: 700;
  margin-bottom: 16px;
}
.restore-input {
  display: block;
  width: 100%;
  min-height: 45px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 10px;
  margin-top: 6px;
  font-family: "Inter Tight", system-ui, Arial, sans-serif;
}
#restore-message {
  margin-top: 16px;
}
#restore-message p {
  margin: 0 0 8px;
}
.restore-ok,
.restore-warn {
  border-left: 3px solid var(--bell);
  padding: 8px 12px;
}
.restore-warn {
  border-left-color: var(--ink);
}
/* The lock inside the app shell, and on a locked public study page. */
.lock-corner {
  background: var(--corner);
  color: var(--corner-ink);
  padding: 20px 22px;
  margin: 24px 0;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.lock-corner .round-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--corner-muted);
  margin: 0;
}
.lock-corner p {
  margin: 0;
  max-width: 60ch;
}
.lock-corner .button.primary {
  background: var(--bell);
  color: var(--bell-ink);
  border-color: var(--bell);
}
.lock-study {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.lock-study .human-poster {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
}
.fight-card a.bout[data-locked="true"] .bout-meta {
  color: var(--ink);
}
.header-premium {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 8px;
  min-height: 45px;
  display: inline-flex;
  align-items: center;
}
.header-premium:hover,
.header-premium:focus-visible {
  text-decoration: underline;
}
@media (max-width: 800px) {
  .premium-corner,
  .lock-study {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-list .bout {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .plan-list .button {
    grid-column: 2;
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plan-list .button,
  .lock-corner .button {
    transition: none;
  }
}
@media (forced-colors: active) {
  .plan-active,
  .lock-corner,
  .access-code-value,
  .restore-ok,
  .restore-warn,
  .plan-error {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}
@media print {
  .plan-panel,
  .restore-panel {
    display: none;
  }
}
.program-card .lock-line {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.program-card .lock-line a {
  color: var(--ink);
  display: inline-block;
  padding: 10px 0;
  min-height: 45px;
}