/* t2m-tier-badge.css — the ONE tier badge for the whole site (docs/EDUCATOR_TIER_PLAN.md §11).
 *
 * Three badges, one per tier that unlocks something: Member, Premium, Educator. Guest has none —
 * anything without a badge is open to everyone. Each badge = icon + word + colour, never colour
 * alone (greyscale print, colour-blind readers). It is shown only where the viewer LACKS the tier
 * (the badge is the lock), except on pricing/marketing pages, which explain the plans.
 *
 * Used by the React component `frontend/components/common/TierBadge.tsx` and by iframe apps through
 * `/shared/t2m-tier-badge.js`; both emit the same markup:
 *   <span|button class="t2m-tier-badge t2m-tier-badge--{regular|premium|educator} [t2m-tier-badge--inline]">
 *     <svg class="t2m-tier-badge__icon" …/> <span class="t2m-tier-badge__label">Premium</span>
 *   </span|button>
 * Linked once in frontend/src/app/layout.tsx; iframe pages link it themselves.
 */
:root {
    --t2m-tier-member: #475569;   /* slate */
    --t2m-tier-premium: #00796b;  /* teal (brand), darkened for 4.5:1 on white text */
    --t2m-tier-educator: #4338ca; /* indigo */
    --t2m-tier-on: #ffffff;
    /* The focus ring's inner band (between the badge and its tier-coloured outer band). */
    --t2m-tier-focus-inner: #ffffff;
}

/* Dark mode, the site's way (ThemeContext / theme-listener.js toggle `html.dark`; the dashboard
 * also sets `body.dark-mode`): light tints with dark words, so the badge stands out on the dark
 * surfaces. Words on fill: member 12:1, premium 7.3:1, educator 9:1 (WCAG AA 4.5:1). */
html.dark,
body.dark-mode {
    --t2m-tier-member: #cbd5e1;   /* slate-300 */
    --t2m-tier-premium: #4db6ac;  /* the brand's light teal (--t2m-accent-secondary-light) */
    --t2m-tier-educator: #a5b4fc; /* indigo-300 */
    --t2m-tier-on: #0f172a;
    --t2m-tier-focus-inner: #0f172a;
}

.t2m-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.55em;
    border: 0;
    border-radius: 999px;
    background: var(--t2m-tier-badge-bg, var(--t2m-tier-premium));
    color: var(--t2m-tier-on);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
}

.t2m-tier-badge--regular { --t2m-tier-badge-bg: var(--t2m-tier-member); }
.t2m-tier-badge--premium { --t2m-tier-badge-bg: var(--t2m-tier-premium); }
.t2m-tier-badge--educator { --t2m-tier-badge-bg: var(--t2m-tier-educator); }

/* inline: next to a button or label, sized to the surrounding text */
.t2m-tier-badge--inline {
    font-size: 0.8em;
    padding: 0.1em 0.45em;
}

.t2m-tier-badge__icon {
    width: 1em;
    height: 1em;
    flex: none;
}

/* A badge that is a button opens the right next step (sign up / pricing for that tier). */
button.t2m-tier-badge {
    cursor: pointer;
    min-height: 24px;
}
button.t2m-tier-badge:hover { filter: brightness(1.1); }
/* Two bands, so the ring is >= 3:1 on ANY page behind it (WCAG 2.4.11 / technique C40): an inner
 * band in the opposite tone to the badge, an outer band in the tier colour. Light pages see the dark
 * outer band (5.3:1+ on white); dark pages see the white inner band (light tokens: 8.8:1+ on the site's
 * dark surfaces #182233 / #394b68) or the light outer band (dark tokens: 3.6:1+ on the same).
 * Measured 2026-10-11. A single band in the tier colour was 2.0:1 on #182233 (indigo). */
button.t2m-tier-badge:focus-visible {
    outline: 2px solid var(--t2m-tier-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--t2m-tier-badge-bg);
}

@media (hover: none) {
    /* Touch: a tappable badge is at least a 44 px target (CSS_STANDARDS). */
    button.t2m-tier-badge { min-height: 44px; padding-inline: 0.8em; }
}

/* Teachers print in greyscale: keep the word, drop the fill (READING_PRINT_STANDARDS). */
@media print {
    .t2m-tier-badge {
        background: none;
        color: #000;
        border: 1px solid #000;
    }
}