/* Five plans (Free, Mini, Lite, Pro, Max) on the home page, the pricing page
   and the account page. Linked after app.css and pages.css. */

.plan.mini .plan-top { background: var(--coral-soft); }
.plan.max .plan-top { background: var(--text); color: var(--bg); }
.plan.max .plan-top .muted { color: inherit; opacity: 0.85; }

/* Pricing table: six columns never squeeze on a phone. The table scrolls
   inside its card and the row names stay put while it does. */
.table-card .ptable.plans5 { min-width: 720px; }
.ptable.plans5 th:first-child, .ptable.plans5 td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
}
.ptable.plans5 th.max { color: var(--text); }
.swipe-hint { display: none; margin: 0 0 8px; }
@media (max-width: 760px) {
  .table-card .ptable.plans5 { min-width: 640px; }
  .swipe-hint { display: block; }
}

/* The claim under the pricing title. */
.price-claim { font-weight: 800; margin-top: 10px; }

/* ---------- Plan cards: five in a row (_plan_cards.html) ---------- */
/* Every card spans two rows of a subgrid, so the coloured tops share one height
   and the lists start on one line, whatever a top carries (Free has no "Opens soon"). */
.plan-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; align-items: stretch; padding-top: 18px; }
.plan-grid > .plan { grid-row: span 2; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 0; position: relative; }
.plan-grid .plan-top { padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 2px; }
.plan-grid .plan .price { font-size: 2rem; }
.plan-top h3 { gap: 8px; flex-wrap: wrap; }
.plan-top .status { font-weight: 800; font-size: 0.85rem; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.plan-top .status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.plan-top .status.open i { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px var(--ok-soft); }
.plan-top .per-month { font-size: 0.85rem; font-weight: 700; opacity: 0.8; }
.plan-grid .plan-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.plan-grid .plan ul { flex: 1; align-content: start; }
.plan-grid .plan li { font-size: 0.92rem; }
.plan-grid .plan li span:last-child { text-align: right; }
.plan-cta { display: grid; gap: 8px; }
.plan-cta .btn { width: 100%; }
.plan-cta .note { font-size: 0.8rem; color: var(--muted); font-weight: 700; text-align: center; }

/* Pro: the recommended card, raised with `translate` so Motion's `transform` composes with it. */
.plan.pro { box-shadow: 0 0 0 2px var(--primary), 0 18px 44px color-mix(in srgb, var(--primary) 30%, transparent); }
.plan-grid .plan.pro { translate: 0 -14px; }
.badge.popular { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .badge.popular { background: var(--primary-fg); color: var(--primary); }
/* Dark mode: white text on the light Pro header was ~2.6:1; --primary-fg is the readable ink. */
[data-theme="dark"] .plan.pro .plan-top { color: var(--primary-fg); }

/* Sold out and the waitlist (_sold_out.html), inside the card */
.plan .sold-out { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.plan .sold-out p { margin: 0; }
/* dimmed, but still ≥ 4.5:1 on every header in both themes (0.55 was ~3:1, QA) */
.plan.soldout .plan-top .price { opacity: 0.75; }
.plan.pro.soldout .plan-top .price { opacity: 0.9; }
/* the header's Sold out badge: a solid pill, ≥ 4.5:1 on every header (QA B11) */
.plan-top .badge-crashed { color: #b42323; background: #ffe3e3; }
[data-theme="dark"] .plan-top .badge-crashed { color: #ffb0b0; background: var(--danger-soft); }
[data-theme="dark"] .plan.max .plan-top .badge-crashed,
[data-theme="dark"] .plan.pro .plan-top .badge-crashed { color: #b42323; background: #ffe3e3; }

/* Narrow cards: long button labels and the waitlist text wrap inside the card. */
.plan-grid .plan-body > * { min-width: 0; }
.plan-grid .plan-cta .btn, .plan-grid .sold-out .btn { white-space: normal; height: auto; min-height: 44px; padding: 10px 14px; line-height: 1.2; text-align: center; }
/* five a row: some labels take two lines there, so every card button gets the
   two-line height and a row of buttons lines up (QA consistency pass) */
@media (min-width: 1081px) { .plan-grid .plan-cta .btn, .plan-grid .sold-out .btn { min-height: 62px; } }

/* three a row: the raised Pro card keeps a gap to the card above it (QA B10) */
@media (max-width: 1080px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 720px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .plan-grid .plan.pro { translate: none; order: -1; }
}

/* Pricing table: the Pro column carries the accent too. */
.ptable th.pro, .ptable td.pro { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.ptable th.pro .badge { margin-left: 6px; vertical-align: middle; }

/* ---------- Pool diagram (_pool_diagram.html) ---------- */
/* Calm: no tooltip, no dimming. Hovering a bot only lightens that bar; every
   share is written in the bar and in the legend, so nothing depends on hover. */
.pool-demo { max-width: 860px; margin: 0 auto; }
.pool-account { position: relative; border: 2px dashed color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: var(--r-xl); background: var(--surface); padding: 28px 28px 22px; box-shadow: var(--shadow-sm); }
.pool-account-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 22px; }
.pool-account-head h3 { font-size: 1.15rem; }
.pool-account-head .amounts { font-family: var(--mono); font-weight: 600; font-size: 0.92rem; color: var(--muted); }
.pool-track { --gap: 10px; display: flex; gap: var(--gap); height: 96px; }
.pool-seg { position: relative; flex: 0 0 auto; width: calc((100% - 3 * var(--gap)) * var(--f)); border-radius: var(--r-md); border: 0; padding: 0; font: inherit; color: var(--primary-fg); cursor: default; transform-origin: left center; text-align: left; }
.pool-seg.bot { background: var(--primary); }
.pool-seg.bot:nth-child(2) { background: color-mix(in srgb, var(--primary) 82%, var(--mint)); }
.pool-seg.bot:nth-child(3) { background: color-mix(in srgb, var(--primary) 64%, var(--mint)); }
.pool-seg .seg-label { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; line-height: 1.15; }
.pool-seg .seg-label b { font-size: 1.05rem; font-weight: 800; }
.pool-seg .seg-label span { font-weight: 700; font-size: 0.9rem; }
.pool-seg.bot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
.pool-seg.free { flex: 1 1 auto; color: var(--muted); border: 2px dashed var(--border); background: transparent; overflow: hidden; }
.pool-seg.free .free-fill { position: absolute; inset: 0; background: var(--primary-soft); opacity: 0.45; }
.pool-seg.free .seg-label { color: var(--muted); }
.pool-seg.free .seg-label b { color: var(--text); }
.pool-scale { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.pool-caption { margin-top: 22px; text-align: center; font-weight: 800; font-size: 1.05rem; }
.pool-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 12px; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.pool-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; background: var(--primary); }
.pool-legend i.b2 { background: color-mix(in srgb, var(--primary) 82%, var(--mint)); }
.pool-legend i.b3 { background: color-mix(in srgb, var(--primary) 64%, var(--mint)); }
.pool-legend i.free { background: transparent; box-shadow: inset 0 0 0 2px var(--border); }
@media (hover: hover) and (pointer: fine) { .pool-seg.bot:hover::after { opacity: 0.14; } }
@media (max-width: 600px) {
  .pool-account { padding: 18px 14px 16px; }
  .pool-track { --gap: 6px; height: 84px; }
  .pool-seg.free .seg-label span { display: none; }
  .pool-seg .seg-label { padding: 10px 8px; }
  .pool-seg .seg-label b { font-size: 0.86rem; }
  .pool-seg .seg-label span { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) { .pool-seg.bot::after { transition: none; } }