/* Billing surfaces and the lock state. 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 rope band, the brass mark and the teal panel
   are the same chrome the player and the hero use. */

/* The rope band: two teal rope runs with the brass turnbuckle, as on the ring. */
.rope-band {
  height: 18px;
  margin: 0 0 22px;
  background:
    linear-gradient(var(--teal), var(--teal)) 0 3px / 100% 4px no-repeat,
    linear-gradient(var(--teal), var(--teal)) 0 11px / 100% 4px no-repeat;
  position: relative;
}
.rope-band::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: var(--brass);
  border-radius: 2px;
}

/* The lock note and its mark. Injected by app.mjs only when keyed. */
.lock-mark {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 2px;
  vertical-align: middle;
}
.lock-note {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  border-left: 4px solid var(--brass);
  padding: 8px 12px;
  background: var(--paper);
}
.lock-note a {
  color: var(--teal);
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.lock-note .lock-mark {
  margin-right: 8px;
}
.row-lock {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

/* The locked study: poster, name, tier and the first cue, then one sentence. */
.study-lock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
.study-lock figure {
  margin: 0;
  background: var(--stage-bg);
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: 14px;
}
.study-lock figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.study-lock figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}
.study-lock .lock-copy p.first-cue {
  font-size: 1.1rem;
  border-left: 4px solid var(--teal);
  padding-left: 12px;
}
.study-lock .lock-copy .button {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .study-lock {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    align-items: start;
  }
}

/* The billing pages. */
.bill-panel {
  background: var(--paper);
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 26px);
  margin: 0 0 18px;
}
.bill-panel h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}
.bill-panel h3 {
  margin: 20px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
}
.perk-list {
  margin: 0;
  padding-left: 1.1rem;
}
.perk-list li {
  margin: 7px 0;
  line-height: 1.55;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
  margin: 6px 0 16px;
}
.plan-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 18px;
  border-radius: var(--radius);
}
.plan-card.featured {
  border: 2px solid var(--brass);
}
.plan-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--heading);
  font-size: 1.1rem;
}
.plan-card-price {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 1.5rem;
  overflow-wrap: anywhere;
}
.plan-card-price small {
  font-size: 0.85rem;
  color: var(--muted);
}
.plan-card .button {
  min-height: 44px;
}
.plan-active {
  display: grid;
  gap: 8px;
  justify-items: start;
  border-left: 4px solid var(--brass);
  background: var(--stage-bg);
  padding: 15px 17px;
}
.plan-loading,
.plan-outcome {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.plan-error {
  margin: 0;
  border-left: 4px solid var(--accent);
  background: var(--stage-bg);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 0.9rem;
}
.access-code {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.access-code-value {
  display: block;
  overflow-wrap: anywhere;
  border: 1px dashed var(--muted);
  background: var(--bg);
  padding: 12px;
  font-family: var(--mono);
  font-size: 0.9rem;
}
.restore-panel {
  max-width: 640px;
}
.restore-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
#restore-code {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  padding: 10px;
  font-family: var(--mono);
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.restore-ok,
.restore-warn {
  border-left: 4px solid var(--teal);
  background: var(--stage-bg);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 0.9rem;
  margin: 14px 0 0;
}
.restore-warn {
  border-left-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .plan-card,
  .button {
    transition: none;
  }
}
@media (forced-colors: active) {
  .plan-card,
  .lock-mark,
  .access-code-value,
  .bill-panel {
    border: 1px solid CanvasText;
  }
  .plan-active,
  .restore-ok,
  .restore-warn,
  .plan-error,
  .lock-note {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}
@media print {
  .plan-grid,
  .restore-panel,
  .rope-band {
    display: none;
  }
}

/* Six links in the header once Premium joins them: let them wrap at phone
   width instead of running off the edge. */
body[data-theme="muaythai"] .site-header nav {
  flex-wrap: wrap;
  row-gap: 0;
  white-space: normal;
  overflow: visible;
}