/* plan.css — plan UI: upgrade modal, device-only notice, expired banner,
   plan badge/meter, demo pill. Uses tokens.css variables; the dialog reuses
   the shared .modal base from menus-modals.css. */

/* upgrade modal internals (dialog base styles come from .modal) */
.plan-modal { max-width: 460px; padding: 22px; }
.plan-modal-sub { color: var(--muted, #5b616b); margin: 4px 0 12px; }
.plan-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.plan-compare th, .plan-compare td {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--border, #e2e5e9);
}
.plan-compare th:not(:first-child), .plan-compare td:not(:first-child) { text-align: center; }
.plan-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* prepaid pack buttons inside the upgrade modal (payments.js handles clicks) */
.plan-packs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px;
}
.plan-pack {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; cursor: pointer;
  font-weight: 600; font-size: 15px;
  color: var(--ink, #1c2024);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e5e9);
  border-radius: 10px;
}
.plan-pack span { font-weight: 400; font-size: 11px; color: var(--muted, #5b616b); }
.plan-pack:hover { border-color: var(--accent, #0e9488); }
.plan-pack.is-best { border-color: var(--accent, #0e9488); background: var(--accent-soft, #e6f4f3); }
@media (max-width: 560px) { .plan-packs { grid-template-columns: repeat(3, 1fr); } }

/* Discount display: struck MRP above the charged price, % saved below.
   All three are [hidden] when no offer is running, so the button collapses
   back to a plain price. plan.js fills these with textContent. */
.plan-mrp {
  font-weight: 400; font-size: 11px; text-decoration: line-through;
  color: var(--muted, #5b616b);
}
.plan-pack .plan-now { font-weight: 600; font-size: 15px; color: inherit; }
.plan-pack .plan-off {
  margin-top: 2px; padding: 1px 6px; border-radius: 999px;
  font-weight: 600; font-size: 10px;
  color: var(--accent, #0e9488); background: var(--accent-soft, #e6f4f3);
}
.plan-pack.is-best .plan-off { background: var(--panel, #fff); }
[data-theme="dark"] .plan-pack .plan-off {
  color: oklch(0.86 0.09 185); background: oklch(0.32 0.05 185);
}

/* Offer-code row */
.plan-coupon { display: flex; gap: 8px; margin-top: 12px; }
.plan-coupon input {
  flex: 1; min-width: 0; padding: 8px 10px;
  font-size: 13px; text-transform: uppercase;
  color: var(--ink, #1c2024);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e5e9);
  border-radius: 8px;
}
.plan-coupon input::placeholder { text-transform: none; color: var(--muted, #5b616b); }
.plan-coupon input:focus-visible { outline: 2px solid var(--accent, #0e9488); outline-offset: 1px; }
.plan-coupon button {
  padding: 8px 14px; cursor: pointer;
  font-weight: 600; font-size: 13px;
  color: var(--ink, #1c2024);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e5e9);
  border-radius: 8px;
}
.plan-coupon button:hover { border-color: var(--accent, #0e9488); }
.plan-coupon-msg { min-height: 16px; margin: 6px 0 0; font-size: 12px; color: var(--muted, #5b616b); }
.plan-coupon-msg.is-good { color: var(--accent, #0e9488); }
.plan-coupon-msg.is-bad { color: var(--danger, #c0392b); }
[data-theme="dark"] .plan-coupon-msg.is-good { color: oklch(0.86 0.09 185); }

/* ---- Plan panel: profile-menu button + the Settings → Profile "Plan" row ---- */
/* Paying users have nothing to buy: the amber "Upgrade" pill (menus-modals.css) turns
   into a calm accent chip that just states the plan. Loaded after menus-modals.css. */
.profile-upgrade.is-paid {
  color: var(--accent, #0e9488);
  background: var(--accent-soft, #e6f4f3);
  border-color: var(--accent, #0e9488);
}
[data-theme="dark"] .profile-upgrade.is-paid {
  color: oklch(0.86 0.09 185);
  background: oklch(0.32 0.05 185);
  border-color: oklch(0.5 0.07 185);
}

.plan-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--border, #e2e5e9);
  color: var(--muted, #5b616b);
}
.plan-badge.is-premium, .plan-badge.is-beta {
  color: var(--accent, #0e9488);
  background: var(--accent-soft, #e6f4f3);
  border-color: var(--accent, #0e9488);
}
.plan-badge.is-expired { color: oklch(0.22 0.03 75); background: var(--warn, #b45309); border-color: var(--warn, #b45309); }
.plan-status { font-size: 12px; color: var(--muted, #5b616b); }

/* The shared .acct-row-value truncates with an ellipsis (built for one-line values like an
   email). The plan line is a sentence — let it wrap instead of losing "· 31 days left". */
.acct-row-plan .acct-row-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.plan-meter { margin-top: 8px; }
.plan-meter-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border, #e2e5e9);
  overflow: hidden;
}
.plan-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #0e9488);
  transition: width var(--dur, .18s) var(--ease, ease);
}
.plan-meter-track.is-low .plan-meter-fill { background: var(--warn, #b45309); }
.plan-meter-note { margin: 5px 0 0; font-size: 11px; color: var(--faint, #8a8f98); }

/* one-time device-only data notice + expired banner — thin strips above the topbar */
.plan-notice, .plan-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 7px 14px; font-size: 13px; text-align: center;
}
.plan-notice { background: var(--accent-soft, #e6f4f3); color: var(--ink, #1c2024); }
.plan-notice button { background: none; border: 0; cursor: pointer; font-size: 13px; color: inherit; }
/* fixed near-black text — --warn is a medium/light orange in BOTH themes, but --ink
   flips to near-white in dark mode (unreadable on orange); never theme text tokens here */
.plan-banner { background: var(--warn, #b45309); color: oklch(0.22 0.03 75); }

/* "Freemium" chip — a status chip inside the profile dropdown head (was a topbar "Offline demo" pill) */
.demo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, #e2e5e9);
  background: var(--accent-soft, #e6f4f3);
  color: var(--ink, #1c2024); font-size: var(--fs-sm, 12.5px); cursor: pointer;
}
/* Tiny "Current plan" caption above the Freemium chip. */
.profile-menu-caption {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted, #6b7280);
}
/* Inside the profile dropdown it's a non-interactive status chip, not a button. */
.profile-menu-chip { cursor: default; margin-top: 2px; }
/* Guest: the "Go Premium" CTA matches the Freemium chip — equal width & height, centered. */
.profile-menu-chip,
.profile-upgrade.is-demo-cta { width: 132px; justify-content: center; white-space: nowrap; }
.profile-upgrade.is-demo-cta { padding-top: 4px; padding-bottom: 4px; }
/* Guest explainer under the Freemium chip. */
.profile-menu-note {
  max-width: 210px; margin: 4px 0 2px; text-align: center;
  font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--muted, #6b7280);
}
.plan-badge.is-demo { background: var(--accent-soft, #e6f4f3); color: var(--ink, #1c2024); }
.plan-notice-cta { font-weight: 600; }