/* next-plan.css (2026-10-27): the one upgrade card (next-plan.js), on the workspace's own tokens (next-v7.css). One quiet lock, plain
   words, the two ways on. No tint, no edge bar, no shadow: a plan stop is a state of the account, not an error. Phone rules last. */

/* ---------- the card in a page ---------- */
#view .plan-card { display: flex; gap: 16px; align-items: flex-start; padding: 24px; }
.plan-ic { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--v6-fill); color: var(--v6-ink-3); }
.plan-ic svg { width: 18px; height: 18px; }
#view .plan-card .plan-tx { min-width: 0; max-width: 620px; }
#view .plan-card h2 { margin: 6px 0 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--v6-ink); }
#view .plan-card p { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--v6-ink-2); }
#view .plan-card p.plan-who { color: var(--v6-ink-3); }
.plan-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plan-keep { margin: 12px 0 0 !important; font-size: 12px !important; line-height: 18px !important; color: var(--v6-ink-4) !important; }

/* ---------- the line under a free page's title ---------- */
#view .plan-strip { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--v6-line); border-radius: 10px; background: var(--v6-surface, #fff); }
#view .plan-strip .plan-ic { width: 28px; height: 28px; border-radius: 8px; }
#view .plan-strip .plan-ic svg { width: 15px; height: 15px; }
#view .plan-strip p { flex: 1 1 auto; margin: 0; font-size: 13px; line-height: 20px; color: var(--v6-ink-3); }
#view .plan-strip p b { font-weight: 600; color: var(--v6-ink); }
#view .plan-strip .link { flex: none; font-size: 13px; font-weight: 500; white-space: nowrap; }

/* ---------- the dialog when a paid button is pressed ---------- */
.plan-dlg-b { display: flex; gap: 14px; align-items: flex-start; }
.plan-dlg-b p { margin: 0; font-size: 14px; line-height: 21px; color: var(--v6-ink-2); }
.plan-dlg-b p + p { margin-top: 8px; }

/* ---------- the free plan's Upgrade row in the sidebar (next-plan.js V.planNavRow) ----------
   It is a .setup row inside #navSetup, so the Finish setup row's own rules size it; these only give it its icon and its accent word. */
#navSetup .v9plan .v9plan-ic { width: 16px; height: 16px; flex: none; color: var(--k-nav-icon, var(--gray-500)); }
#navSetup .v9plan .setup-h span.v9plan-go { color: var(--accent); font-weight: var(--w-medium, 500); }
#navSetup .v9plan:hover .setup-h span.v9plan-go { text-decoration: underline; text-underline-offset: 2px; }
.shell.mini #navSetup .v9plan .setup-h b, .shell.mini #navSetup .v9plan .setup-h span.v9plan-go { display: none; }

/* ---------- phone ---------- */
@media (max-width: 699px) {
  #view .plan-card { padding: 18px 16px; gap: 12px; }
  #view .plan-strip { align-items: flex-start; flex-wrap: wrap; }
  #view .plan-strip p { flex-basis: calc(100% - 44px); }
  #view .plan-strip .link { margin-left: 40px; min-height: 44px; display: inline-flex; align-items: center; }
  .plan-acts .btn { min-height: 44px; }
}