/* Subscription (Phase 6): the Support sheet (support.css) and Team helpers (team.css), plus plan cards and feature lists. */
.sub-stack,.sub-current,.sub-plans,.sub-capabilities,.sub-invoices,.sub-actions{display:flex;flex-direction:column;gap:10px}
.sub-current{padding:14px;border-radius:14px;background:var(--bg-3,#f1f5f9)}
.sub-current h3{margin:0;font-size:1.15rem}
.sub-line{margin:0;font-weight:600}
.sub-warn{color:#92400e}
.sub-readonly{margin:0;padding:10px 12px;border-radius:12px;background:#fef3c7;color:#92400e;line-height:1.5}
.sub-status--trialing,.sub-status--active{background:#dcfce7;color:#166534}
.sub-status--past_due{background:#fef3c7;color:#92400e}
.sub-status--restricted,.sub-status--canceled,.sub-status--expired,.sub-status--inactive,.sub-status--none{background:#e5e7eb;color:#374151}
.sub-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sub-plan{flex-direction:column;align-items:stretch;cursor:default}
.sub-plan--current{border-color:var(--primary,#2563eb);box-shadow:0 0 0 1px var(--primary,#2563eb) inset}
.sub-plan .btn{min-height:44px}
.sub-features,.sub-feature-list{margin:4px 0 0;padding-inline-start:18px;line-height:1.6}
.sub-feature-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 12px}
.sub-no{color:var(--text-dim,#64748b)}
.sub-action-status:empty{display:none}
.sub-legal{text-align:center}
body.dark-mode .sub-readonly{background:#451a03;color:#fde68a}
body.dark-mode .sub-status--trialing,body.dark-mode .sub-status--active{background:#14532d;color:#dcfce7}
/* Phase 7: plan chooser */
.sub-toggle{display:flex;flex-wrap:wrap;gap:8px}
.sub-toggle .btn{min-height:44px;flex:1 1 140px}
.sub-plan{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;cursor:pointer;min-height:96px}
.sub-price{font-weight:800}
.sub-module{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px dashed var(--border,#cbd5e1);border-radius:14px;cursor:pointer;min-height:44px}
.sub-module input{width:22px;height:22px;flex:none;margin-top:2px}
.sub-extras{display:flex;flex-direction:column;gap:8px}
.sub-stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.sub-qty{width:88px;min-height:44px;box-sizing:border-box}
.sub-total{margin:6px 0 0;font-size:1.05rem}
.sub-total strong{font-size:1.3rem}
.sub-fair{text-align:center}
/* Phase 7: first-run onboarding card (dashboard) */
.onboarding-card{display:flex;flex-direction:column;gap:10px;margin:10px 12px;padding:16px;border-radius:16px}
.onboarding-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.onboarding-head h2{margin:0;font-size:1.1rem;flex:1 1 auto}
.onboarding-progress{font-weight:700;color:var(--text-dim,#64748b)}
.onboarding-hide,.onboarding-go{min-height:44px}
.onboarding-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.onboarding-step{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:48px}
.onboarding-check{width:26px;height:26px;border-radius:50%;border:2px solid var(--border,#cbd5e1);display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:none}
.onboarding-step.is-done .onboarding-check{background:#16a34a;border-color:#16a34a;color:#fff}
.onboarding-label{flex:1 1 160px;font-weight:600}
.onboarding-step.is-done .onboarding-label{color:var(--text-dim,#64748b);text-decoration:line-through}
.onboarding-done{color:#16a34a;font-weight:700}
.onboarding-optional{margin:0;color:var(--text-dim,#64748b);font-size:.92rem}
.onboarding-link{border:0;background:none;padding:6px 2px;min-height:44px;color:var(--primary,#2563eb);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}

/* ==========================================================================
   The plans as a page, not a dialog
   ==========================================================================
   Choosing a plan is a deliberate errand, not an interruption: the page fills the application, keeps the owner
   signed in and in their store, and hands them back to the screen they left when it closes. */
.sub-page { background: var(--bg-1, #f8fafc); align-items: stretch; padding: 0; }
.sub-page .support-sheet {
  max-width: min(1080px, 100%); width: 100%; max-height: 100dvh; margin-inline: auto;
  border-radius: 0; box-shadow: none; background: var(--bg-1, #f8fafc);
}
@media (min-width: 768px) {
  .sub-page { align-items: stretch; padding: 0; }
  .sub-page .support-sheet { max-height: 100dvh; border-radius: 0; box-shadow: none; padding-inline: clamp(16px, 3vw, 44px); }
}
/* a desktop page reads at desktop size */
@media (min-width: 1024px) {
  .sub-page .support-sheet { font-size: 16.5px; }
  .sub-page .support-section, .sub-page h2 { font-size: clamp(19px, 1.6vw, 24px); }
  .sub-page .sub-price, .sub-page .sub-plan-price { font-size: clamp(22px, 2vw, 30px); }
}

/* The choice the owner made on the plans page, and the invitation to try first. */
.sub-selection { padding: 16px 18px; border: 1px solid var(--pf-line, #e2e8f0); border-radius: 14px; background: var(--bg-2, #fff); }
.sub-choice-list { margin: 8px 0 10px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
.sub-choice-total { margin: 0; font-size: 18px; font-weight: 800; }
.sub-choice-total strong { font-variant-numeric: tabular-nums; }
.sub-choice-note { margin-top: 8px; }
.sub-trial {
  padding: 18px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(214, 158, 46, .45); background: linear-gradient(135deg, #fff8e6 0%, #fdf1cf 100%);
}
.sub-trial h3 { color: #6b4d09; margin-top: 0; }
.sub-trial-btn {
  background: linear-gradient(135deg, #f6c343 0%, #e9a712 100%); color: #b3130f; font-weight: 900;
  border: 1px solid rgba(168, 118, 6, .45); min-height: 48px; padding-inline: 24px;
}
.sub-trial-btn:hover { background: linear-gradient(135deg, #f8cd5c 0%, #f0b525 100%); }
body.dark-mode .sub-trial { background: linear-gradient(135deg, #3a2f13 0%, #2b2410 100%); }
body.dark-mode .sub-trial h3, body.dark-mode .sub-trial .support-muted { color: #f4e3b5; }

/* The plans board: the decision the owner came to make, at the top of the page.
   How long, which add-ons, what that costs, and one button that opens the provider's own checkout. */
.sub-plans-board{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--border,#cbd5e1);border-radius:16px;background:var(--bg-2,#fff)}
.sub-plans-board .sub-months .btn{font-weight:800}
.sub-core{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--border,#cbd5e1);border-radius:14px}
.sub-core .sub-price{font-size:1.25rem;font-weight:900;font-variant-numeric:tabular-nums}
.sub-addon.is-on{border-style:solid;border-color:var(--primary,#0876df)}
.sub-addon input:disabled{cursor:not-allowed}
.sub-total-amount{font-variant-numeric:tabular-nums}
.sub-buy{min-height:48px;width:100%;font-weight:900}