/* ==========================================================================
   COMPONENTS · BILLING — the membership certificate and the ledger of what a
   member pays for. Honest about money and the exit: the price is plain, the
   renewal date printed, and Cancel is as findable as Subscribe — no trap, no
   guilt. A membership reads as a filed certificate of access (leaf sheet, ruled
   head, a status register); a lapsed one offers a plain Reactivate. Composes
   op-btn, op-order (for the one-off purchase ledger), op-callout (the portal).
   New (clean-room p-library); harvest candidate. ITCSS: 06-components.
   ========================================================================== */

.op-subs { display: grid; gap: var(--space-md); }

/* — A membership certificate — */
.op-sub {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  padding: var(--space-md);
}
/* A lapsed / cancelled certificate sits flat and quieter — still present, never hidden */
.op-sub--lapsed { box-shadow: none; background: var(--surface); }

.op-sub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}
.op-sub__name {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}
.op-sub__kind {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.2em;
}

/* The status register — furniture, not a score. Active reads ink; ending reads
   the warning ochre (caution, candour), never the rubric, never a band glow. */
.op-sub__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.op-sub__status::before {
  content: "";
  inline-size: 0.6em;
  block-size: 0.6em;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-seal);
  flex: none;
}
.op-sub__status--active::before { background: currentColor; }
.op-sub__status--ending { color: var(--warning); }
.op-sub__status--lapsed { color: var(--text-muted); }

/* The body: the plan terms, set as a ledger of facts */
.op-sub__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  padding-block: var(--space-md);
}
.op-sub__term { display: grid; gap: var(--space-3xs); }
.op-sub__term-label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-sub__term-value {
  font-family: var(--font-data);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  line-height: 1.1;
}
.op-sub__term-value small {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.op-sub__desc {
  flex-basis: 100%;
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}

/* The actions row: the exit kept plain and findable beside the quiet manage link */
.op-sub__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}
.op-sub__actions .op-sub__spacer { margin-left: auto; }
/* the honest note that cancelling keeps paid access — candour, not friction */
.op-sub__keepnote {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  max-width: 40ch;
}

/* — The Stripe portal seam: a calm, plain path out to invoices/receipts — */
.op-portal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}
.op-portal__text {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 40rem) {
  .op-sub__body { gap: var(--space-md) var(--space-lg); }
  .op-sub__actions .op-sub__spacer { margin-left: 0; flex-basis: 100%; }
}