/* plan.js — the school's own bill: what it pays AiduEd, when it renews, and
 * every invoice. Read by a principal or a bursar, so this is deliberately quiet:
 * no gradients, no pulsing, no red until a plan has genuinely ended.
 *
 * Phone and desktop share one markup tree; `.plan-page.is-m` is set by
 * renderMobile, so the phone layout does not depend on a viewport guess (the app
 * decides what a phone is — see js/mobile.js), and the width query below is only
 * a backstop for a narrow desktop window.
 */

.plan-page { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }

/* ---- the notice band ------------------------------------------------------
   Three tones and no more. `notice` is the ordinary "your renewal is coming"
   state and must read as information; `warn` is a payment that failed; `bad` is
   reserved for a plan that has actually ended. */
.plan-notice { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius);
  background: var(--panel); padding: 12px 14px; }
.plan-notice.tone-notice { border-left-color: var(--brand); }
.plan-notice.tone-warn   { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
.plan-notice.tone-bad    { border-left-color: var(--bad);  background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }

/* ---- the plan itself ------------------------------------------------------ */
.plan-headline { margin: 10px 0 0; font-size: 16px; line-height: 1.45; }
.plan-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan-fact-v { font-weight: 700; margin-top: 2px; }

/* ---- the quote ------------------------------------------------------------
   The same block in the upgrade window and in the renewal panel, because they
   are the same number and a school must never be shown two of them. */
.plan-quote { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 10px 0; font-size: 13px; }
.plan-quote-total { justify-content: space-between; gap: 8px; border-top: 1px solid var(--line);
  margin-top: 6px; padding-top: 6px; font-size: 15px; }
.plan-renew-body { margin-top: 4px; }
.plan-actions { gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ---- payments + invoices -------------------------------------------------- */
.plan-payments { margin-top: 10px; }
/* A money table must never push the page sideways — it scrolls inside itself. */
.plan-tablewrap { overflow-x: auto; }
.plan-tablewrap table.data { min-width: 640px; }
.plan-paylist { display: flex; flex-direction: column; gap: 8px; }
.plan-payrow { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--panel-2); }
.plan-payrow.is-dim { opacity: .68; }
.plan-foot { gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- the upgrade panel drawn in place of a gated page ---------------------
   These class names have been in plan.js since tier gating shipped and had no
   styles at all, so the upsell rendered as a bare stack of text. */
.plan-upgrade { max-width: 520px; margin: 40px auto; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 28px 24px; box-shadow: var(--shadow); }
.plan-lock-badge { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.plan-upgrade h2 { margin: 0 0 4px; font-size: 19px; }
.plan-perks { list-style: none; margin: 14px 0 18px; padding: 0; text-align: left; display: inline-block; }
.plan-perks li { margin: 5px 0; font-size: 13px; color: var(--ink-soft); }

/* ---- phone ----------------------------------------------------------------
   One column, full-width actions, and the facts in two columns rather than one
   so a bursar can still take the whole plan in at a glance. */
.plan-page.is-m { gap: 12px; }
.plan-page.is-m .plan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.plan-page.is-m .plan-headline { font-size: 15px; }
.plan-page.is-m .plan-actions { flex-direction: column; align-items: stretch; }
.plan-page.is-m .plan-actions .btn { width: 100%; justify-content: center; }
.plan-page.is-m .plan-foot { flex-direction: column; align-items: stretch; }
.plan-page.is-m .plan-foot .btn { width: 100%; justify-content: center; }
.plan-page.is-m .plan-upgrade { margin: 16px auto; padding: 20px 16px; }

@media (max-width: 560px) {
  .plan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-actions { flex-direction: column; align-items: stretch; }
  .plan-actions .btn { width: 100%; justify-content: center; }
}