/* The plan card (P276, src/studio/plan/card.ts), compact in the account menu (P763, frame JHUCE). It is the extension's toolbar card (chord-lens popup.css, `.plan-card`), value for value. Colours with no Studio
   token (the card's grounds, its tile tints, the cancelled strip's amber) are written here. The card is dark in both
   themes, as the extension's is: its own color-scheme picks the dark side of every token inside it. */

/* The plan doesn't apply to this caller yet (not enforced, billing closed, D197): no card, as with the plan's badge. */
html:not([data-plans='on']) .plan-card { display: none; }

/* The palette, on the badge too: the account menu draws it alone, beside the name. */
.plan-card, .pc-badge {
  --pc-pink: #ff4d6d;
  --pc-pink-light: #ff8fa3;
  --pc-violet: #a78bfa;
  --pc-violet-light: #c4b5fd;
  --pc-teal: #2dd4bf;
  --pc-teal-light: #5eead4;
  --pc-gold: #f5c66b;
}
.plan-card {
  --pc-ground: linear-gradient(180deg, #1c1016, #121215);
  --pc-edge: linear-gradient(180deg, rgb(255 107 133 / 40%), var(--st-line) 70%);
  --pc-glow: rgb(255 45 85 / 10%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--st-radius-card, 16px);
  background: var(--pc-ground) padding-box, var(--pc-edge) border-box;
  box-shadow: 0 0 24px var(--pc-glow), inset 0 1px 0 rgb(255 255 255 / 5%);
  color: var(--st-text);
  color-scheme: dark;
  font: 500 13px/1.3 var(--st-font);
  text-align: start;
}
.plan-card[data-tier='premium'] {
  --pc-ground: radial-gradient(45% 45% at 100% 0%, rgb(255 143 163 / 14%), transparent), linear-gradient(180deg, #210f18, #121215);
  --pc-edge: linear-gradient(237deg, rgb(255 143 163 / 60%), rgb(167 139 250 / 33%) 40%, var(--st-line) 85%);
  --pc-glow: rgb(255 107 133 / 12%);
}
.plan-card[data-tier='pro'] {
  --pc-ground: radial-gradient(45% 45% at 100% 0%, rgb(245 198 107 / 15%), transparent), linear-gradient(180deg, #22180c, #121215);
  --pc-edge: linear-gradient(237deg, rgb(245 198 107 / 60%), rgb(255 107 133 / 40%) 50%, var(--st-line) 85%);
  --pc-glow: rgb(245 198 107 / 12%);
}

/* A press on an icon is a press on its link (the account menu closes on the link it hears). */
.pc-icon { flex: none; width: 12px; height: 12px; pointer-events: none; }

/* The badge at the left, the date at the right. */
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pc-badge--free { background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); color: var(--st-text-dim); }
.pc-badge--premium {
  padding-inline: 10px;
  background: linear-gradient(to left, var(--pc-pink-light), var(--pc-violet-light));
  box-shadow: 0 2px 10px rgb(255 143 163 / 30%);
  color: #2a0a16;
  font-weight: 800;
}
.pc-badge--pro {
  padding-inline: 10px;
  background: linear-gradient(to left, var(--pc-gold), #ffb089 55%, var(--pc-pink-light));
  box-shadow: 0 2px 10px rgb(245 198 107 / 30%);
  color: #2a1606;
  font-weight: 800;
}
.pc-when { color: var(--st-text-faint); font-size: 11px; font-weight: 400; white-space: nowrap; }
.pc-upcoming { margin: 0; color: var(--st-text-faint); font-size: 11px; font-weight: 400; line-height: 1.35; }
.pc-headline { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }

/* A cancelled plan's strip under the badge: amber, the one warning on the card, with Resume in the card's own ink.
   Tight (6 / 8px) so "Plan cancelled · ends Nov 16 · Resume" fits the menu's card on one line. */
.pc-cancelled {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgb(251 191 36 / 10%);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pc-cancelled .pc-icon { width: 13px; height: 13px; }
/* A change set for renewal (P293): the cancelled strip's shape in the card's quiet ink, since it is news, not a warning. */
.pc-scheduled { background: rgb(255 255 255 / 6%); color: var(--st-text-dim); }
.pc-resume { margin-inline-start: auto; color: var(--st-text); text-decoration: none; }
.pc-resume:hover { text-decoration: underline; }
/* A failing renewal's strip (P284), drawn instead of the cancelled one: rose, two lines, no press of its own (Update card is the card's). */
.pc-failed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #f8717140;
  border-radius: 8px;
  background: #f871711f;
  font-size: 12px;
}
.pc-failed p { margin: 0; }
.pc-failed__head { display: flex; align-items: center; gap: 8px; color: #f87171; font-weight: 600; }
.pc-failed__head .pc-icon { width: 13px; height: 13px; }
.pc-failed__detail { color: #fecaca; line-height: 1.4; }
/* A no-card trial that ended (P691): the failed strip's shape in the card's quiet ink, as news, not a warning. */
.pc-ended { border-color: rgb(255 255 255 / 10%); background: rgb(255 255 255 / 6%); }
.pc-ended .pc-failed__head { color: var(--st-text); }
.pc-ended .pc-failed__detail { color: var(--st-text-dim); }

/* A row: the feature's tinted square, its name, and its answer at the right. */
.pc-metered { display: flex; flex-direction: column; gap: 8px; }
.pc-row { display: flex; align-items: center; gap: 8px; }
.pc-label { flex: 1; min-width: 0; }
.pc-tile { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.pc-tile--pink { background: rgb(255 77 109 / 12%); color: var(--pc-pink); }
.pc-tile--violet { background: rgb(167 139 250 / 12%); color: var(--pc-violet); }
.pc-tile--teal { background: rgb(45 212 191 / 12%); color: var(--pc-teal); }
/* "4 of 20 left", "12 · Unlimited": the count in the row's weight, the rest muted. */
.pc-value { color: var(--st-text-faint); font-size: 11px; font-weight: 400; white-space: nowrap; }
.pc-value b { color: var(--st-text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pc-meter { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--st-line); }
.pc-meter__left { display: block; width: calc(var(--left) * 100%); height: 100%; border-radius: 3px; background: var(--pc-fill); }
.pc-meter--pink { --pc-fill: linear-gradient(to left, var(--pc-pink), var(--pc-pink-light)); }
.pc-meter--violet { --pc-fill: linear-gradient(to left, #8b5cf6, var(--pc-violet-light)); }
.pc-meter--teal { --pc-fill: linear-gradient(to left, #14b8a6, var(--pc-teal-light)); }
/* Free's daily splits, a pill each, lit for each one still to use (the extension's popup.css). */
.pc-pills { display: flex; gap: 6px; }
.pc-pill { flex: 1; height: 6px; border-radius: 3px; background: var(--st-line); }
.pc-pill[data-lit="true"] { background: linear-gradient(to left, #14b8a6, var(--pc-teal-light)); box-shadow: 0 0 6px rgb(45 212 191 / 25%); }

/* The card's one press, a different weight on each plan: Free's pink Upgrade is the hottest thing on the card,
   Premium's Upgrade to Pro is an outline in Pro's gold, and Pro's Manage plan is a quiet button. */
.pc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--st-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s;
}
.pc-btn:hover { filter: brightness(1.12); }
.pc-btn:active { filter: brightness(0.95); }
:is(.pc-btn, .pc-resume):focus-visible { outline: 2px solid var(--st-text); outline-offset: 2px; }
.pc-btn--upgrade {
  gap: 8px;
  height: 38px;
  background: linear-gradient(86deg, transparent 32%, rgb(255 255 255 / 25%) 43%, transparent 50%), linear-gradient(180deg, var(--st-accent-hi, #ff4468), #e11d48);
  box-shadow: 0 6px 18px rgb(255 45 85 / 35%), inset 0 1px 0 rgb(255 255 255 / 25%), inset 0 0 0 1px var(--st-accent-edge, #ff6b85);
  color: #fff;
  font-size: 13.5px;
}
.pc-btn--upgrade .pc-icon { width: 14px; height: 14px; }
/* The ground is opaque (the card's own, lifted) so the gradient edge shows round the button, not through it. */
.pc-btn--gopro {
  height: 36px;
  border: 1px solid transparent;
  background: linear-gradient(#1a171c, #1a171c) padding-box, linear-gradient(to left, rgb(245 198 107 / 60%), rgb(255 143 163 / 60%)) border-box;
}
.pc-btn--gopro .pc-icon { width: 13px; height: 13px; color: var(--pc-gold); }
.pc-btn--manage { gap: 6px; height: 34px; background: rgb(255 255 255 / 4%); box-shadow: inset 0 0 0 1px rgb(245 198 107 / 30%); }
.pc-btn--manage .pc-icon { width: 14px; height: 14px; color: var(--st-text-faint); }
.pc-btn--fix { height: 36px; background: #f871711a; box-shadow: inset 0 0 0 1px #f8717180; }
.pc-btn--fix .pc-icon { width: 13px; height: 13px; color: #fecaca; }