/* ============================================================
   StudyHub Plus — plan cards and the sidebar upgrade card
   ------------------------------------------------------------
   No price is written in this file or in the markup. Every
   amount shown comes from /api/payments/catalog, which is the
   server's authoritative source, so a price can never drift
   between the screen and what is actually charged.
   ============================================================ */

/* ── Sidebar card ─────────────────────────────────────────── */
.nav-upgrade-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 10px 12px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--card-bg));
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.nav-upgrade-card:hover { border-color: var(--accent-primary); transform: translateY(-1px); }
.nav-upgrade-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
.nav-upgrade-icon {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 15px;
    color: #fff;
    background: var(--accent-surface, var(--accent-primary));
}
.nav-upgrade-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.nav-upgrade-text strong { font-size: 13.5px; font-weight: 750; color: var(--text-primary); }
.nav-upgrade-text span { font-size: 11.5px; color: var(--text-secondary); }
.sidebar.collapsed .nav-upgrade-card { display: none; }

/* ── Plan screen ──────────────────────────────────────────── */
#plus .plus-banner {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 16px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid rgba(245, 158, 11, .3);
    background: rgba(245, 158, 11, .1);
    color: #B45309;
}
[data-theme="dark"] #plus .plus-banner { color: #FBBF24; }
#plus .plus-banner.is-shown { display: flex; }

#plus .plus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: 20px;
    align-items: start;
}
#plus .plus-loading { color: var(--text-secondary); font-size: 14px; }

#plus .plus-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 26px;
    box-shadow: var(--glass-shadow);
}
#plus .plus-card.is-current { border-color: var(--accent-primary); }
#plus .plus-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#plus .plus-card h3 {
    font-size: 19px; font-weight: 800; letter-spacing: -.5px;
    color: var(--text-primary); margin: 0;
}
#plus .plus-current-pill {
    font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 24%, transparent);
}
#plus .plus-price {
    display: flex; align-items: baseline; gap: 6px;
    margin: 16px 0 4px;
    font-size: 34px; font-weight: 800; letter-spacing: -1.4px;
    color: var(--text-primary);
}
#plus .plus-price small { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0; }
#plus .plus-renewal { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 18px; }

#plus .plus-features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
#plus .plus-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; }
#plus .plus-feature i { flex: none; margin-top: 3px; font-size: 12px; }
/* Three honest states, never blurred together. */
#plus .plus-feature.is-working { color: var(--text-primary); }
#plus .plus-feature.is-working i { color: var(--success-color); }
#plus .plus-feature.is-preview { color: var(--text-secondary); }
#plus .plus-feature.is-preview i { color: var(--warning-color); }
#plus .plus-feature.is-unavailable { color: var(--text-secondary); }
#plus .plus-feature.is-unavailable i { color: var(--text-secondary); opacity: .7; }
#plus .plus-feature-tag {
    margin-left: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; opacity: .85;
}

#plus .plus-cta {
    margin-top: auto;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 20px;
    border-radius: 13px;
    border: 1px solid var(--accent-surface, var(--accent-primary));
    background: var(--accent-surface, var(--accent-primary));
    color: #fff;
    font: inherit; font-size: 14.5px; font-weight: 700;
    cursor: pointer;
    transition: transform .14s ease, filter .14s ease;
}
#plus .plus-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
#plus .plus-cta:disabled { opacity: .55; cursor: not-allowed; transform: none; }
#plus .plus-cta.is-secondary {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

#plus .plus-note {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed var(--border-color);
    background: var(--bg-color);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
}
#plus .plus-note strong { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
    .nav-upgrade-card:hover, #plus .plus-cta:hover { transform: none; }
}

/* Shown when the signed-in workspace has no plan of its own — a teacher
   account, for instance. Replaces two dead buttons with an explanation. */
#plus .plus-role-note {
    margin-bottom: 20px;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, var(--border-color));
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--card-bg));
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.65;
}
#plus .plus-role-note strong { font-weight: 750; }

/* ── Usage meter ─────────────────────────────────────────────────── */
.usage-meter {
    background: var(--surface, var(--card-bg));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.usage-meter-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.usage-meter-plan { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.usage-meter-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.usage-meter-track {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
}
.usage-meter-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    transition: width .6s cubic-bezier(.22,.8,.3,1);
}
.usage-meter-fill.is-low  { background: linear-gradient(90deg, #B45309, #F59E0B); }
.usage-meter-fill.is-spent{ background: linear-gradient(90deg, #991B1B, #EF4444); }
.usage-meter-note { margin: 9px 0 0; font-size: 12.5px; color: var(--text-secondary); }

/* ── Secure checkout hand-off ────────────────────────────────────── */
.gw-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: color-mix(in srgb, #0A1120 72%, transparent);
    backdrop-filter: blur(6px);
    animation: gw-fade .25s ease-out;
}
@keyframes gw-fade { from { opacity: 0 } to { opacity: 1 } }

.gw-card {
    width: min(420px, 100%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px 26px 22px;
    text-align: center;
    box-shadow: 0 24px 70px -20px rgba(8,15,35,.5);
    animation: gw-rise .35s cubic-bezier(.22,.8,.3,1);
}
@keyframes gw-rise { from { transform: translateY(14px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }

.gw-shield { position: relative; width: 74px; height: 74px; margin: 0 auto 16px; }
.gw-shield-svg { width: 100%; height: 100%; overflow: visible; }
.gw-shield-body {
    fill: color-mix(in srgb, #2563EB 12%, transparent);
    stroke: #2563EB; stroke-width: 2.5; stroke-linejoin: round;
    stroke-dasharray: 200; stroke-dashoffset: 200;
    animation: gw-draw 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes gw-draw { to { stroke-dashoffset: 0 } }
.gw-shield-tick {
    fill: none; stroke: #2563EB; stroke-width: 4;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 40;
    opacity: 0;
}
/* The tick only completes once the hand-off actually succeeds. */
.gw-overlay.is-ready .gw-shield-tick { opacity: 1; animation: gw-draw .45s ease-out forwards; }
.gw-overlay.is-ready .gw-shield-body { stroke: #047857; fill: color-mix(in srgb, #047857 12%, transparent); }
.gw-overlay.is-ready .gw-shield-tick { stroke: #047857; }

.gw-pulse {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, #2563EB 40%, transparent);
    animation: gw-ping 1.8s ease-out infinite;
}
@keyframes gw-ping {
    0%   { transform: scale(.82); opacity: .8 }
    70%  { transform: scale(1.18); opacity: 0 }
    100% { opacity: 0 }
}
.gw-overlay.is-ready .gw-pulse { animation: none; opacity: 0; }

.gw-card h2 { font-size: 19px; font-weight: 800; color: var(--text-primary); margin: 0 0 4px; }
.gw-plan { font-size: 14px; font-weight: 700; color: var(--accent-primary); margin: 0 0 18px; }

.gw-steps { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.gw-steps li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; padding: 7px 0;
    color: var(--text-secondary);
    opacity: .45;
    transition: opacity .3s ease, color .3s ease;
}
.gw-steps li.is-active { opacity: 1; color: var(--text-primary); font-weight: 600; }
.gw-steps li.is-done   { opacity: 1; color: var(--text-secondary); }
.gw-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: color-mix(in srgb, var(--text-secondary) 40%, transparent);
    transition: background .3s ease, box-shadow .3s ease;
}
.gw-steps li.is-active .gw-dot {
    background: #2563EB;
    box-shadow: 0 0 0 4px color-mix(in srgb, #2563EB 20%, transparent);
    animation: gw-throb 1s ease-in-out infinite;
}
.gw-steps li.is-done .gw-dot { background: #047857; }
@keyframes gw-throb { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #2563EB 8%, transparent) } }

.gw-track {
    height: 4px; border-radius: 999px; overflow: hidden; margin-bottom: 16px;
    background: color-mix(in srgb, var(--text-secondary) 16%, transparent);
}
.gw-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    transition: width .5s cubic-bezier(.22,.8,.3,1);
}
.gw-overlay.is-ready .gw-fill { background: linear-gradient(90deg, #047857, #34D399); }

.gw-foot { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 6px; }
.gw-error { font-size: 12.5px; color: #B91C1C; margin: 8px 0 0; min-height: 1em; }
[data-theme="dark"] .gw-error { color: #FCA5A5; }
.gw-cancel {
    margin-top: 10px; background: none; border: 0;
    color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.gw-cancel:hover { color: var(--text-primary); text-decoration: underline; }

/* Someone who prefers less motion still gets the states, just not the motion. */
@media (prefers-reduced-motion: reduce) {
    .gw-overlay, .gw-card, .gw-shield-body, .gw-shield-tick, .gw-pulse,
    .gw-steps li .gw-dot, .gw-fill, .usage-meter-fill { animation: none !important; transition: none !important; }
    .gw-shield-body, .gw-shield-tick { stroke-dashoffset: 0; }
}

/* What a plan actually grants, stated next to the price rather than buried
   inside a feature sentence. */
.plus-grant {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; margin: 2px 0 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}
.plus-grant-main { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.plus-grant-sub  { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.plus-free-note {
    margin: 0 0 14px; font-size: 13px; line-height: 1.55;
    color: var(--text-secondary);
}