/* The upgrade page: the plans, seen from inside the app.

   It is a full-screen overlay rather than a tab, because it is somewhere you
   go from a question ("what would Pro give me?") and come back from, not one
   of the four places the app lives. The z-index sits with #whatsnew: above the
   app and the nav bar, below a confirmation.

   The cards deliberately echo .plan on the front door — same border, same
   bullet, same amber for the one that is yours — so that a person who read
   the plans before signing up recognises them afterwards. They are not the
   same rules, because the front door's are laid out on a marketing page and
   these are in a dialog that has to scroll on a phone. */
#upgrade{position:fixed;inset:0;background:rgba(var(--scrim-ink),.55);z-index:72;
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:20px;padding-top:calc(20px + var(--sat));padding-bottom:calc(20px + var(--sab));}
#upgrade.show{display:flex;}

.up-box{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;padding:20px;max-width:34rem;width:100%;margin:auto 0;
  box-shadow:0 18px 40px rgba(var(--scrim-ink),.28);}
.up-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.up-box h2{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0;line-height:1.3;}
.up-sub{font-size:12.5px;color:var(--ink-soft);margin:4px 0 16px;line-height:1.5;}

.up-plans{display:grid;gap:12px;}
@media(min-width:560px){.up-plans{grid-template-columns:repeat(3,1fr);}}
.up-plan{border:1px solid var(--line);border-radius:14px;padding:15px;
  background:var(--tint);display:flex;flex-direction:column;}
/* The plan you are on is the one you are looking for on this page. */
.up-current{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);}
.up-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--ink);}
.up-line{font-size:12.5px;color:var(--ink-soft);margin:3px 0 8px;line-height:1.45;}

/* A price is the thing the eye goes to, so it is the largest text on the card
   — except when there is no price yet, where the same slot says so quietly
   rather than shouting an absence. */
.up-price{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;
  color:var(--ink);margin-bottom:2px;}
.up-year{font-size:11.5px;color:var(--ink-soft);margin-bottom:8px;}
.up-soon{font-size:12.5px;font-weight:400;color:var(--ink-soft);margin-bottom:8px;}

.up-plan ul{list-style:none;padding:0;margin:8px 0 13px;flex:1;}
.up-plan li{font-size:12.5px;line-height:1.5;color:var(--ink);padding-left:16px;
  position:relative;margin-bottom:6px;}
.up-plan li:before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--amber);}
.up-plan .btn:disabled{cursor:default;}

.up-note{font-size:11.5px;color:var(--ink-soft);line-height:1.55;margin:14px 0 0;}