/* TiviGlass signed-in and utility surfaces (2026-11 redesign).

   Pages: /account, /reseller-portal, /admin (legibility only), /device-login,
   /stremio-connect, /partners, /reseller, /playlist-editor, /demo. Linked LAST
   in each page's lateCss (pages.config.js), after brand-poster-portal.css and
   the page's own sheet, and before tg.css.

   It only restyles. Every id, class and data attribute the portal scripts read
   is unchanged, nothing here hides an element a script shows, and nothing
   moves a control a test or a script finds by position. Status colours keep
   their meaning; amber is reserved for Premium. */

/* ===== Tokens ========================================================= */

/* The page ground under a short page (the sign-in card) is the site's ink, not
   the older shared html background. Same value as tg.css --tg-ink, which is
   declared on <body> and so cannot be read here. */
html[data-theme] {
    background-color: #070a1a;
}

/* tg.css maps the older shared tokens (--bg, --surface, --text, --accent,
   --bp-*) onto the --tg-* palette on <body>. brand-poster.css declares the same
   tokens on html[data-theme='dark'] body[data-brand='poster'] and
   body[data-page-category='marketing'], which is more specific, so on these
   pages the older violet-tinted palette won. This block restates tg.css's
   mapping at that specificity, after it in the cascade. */
html[data-theme] body[data-page] {
    --font-sans: var(--tg-font-body);
    --font-display: var(--tg-font-display);
    --bg: var(--tg-ink);
    --bg-deep: #05071a;
    --surface: var(--tg-surface-1);
    --surface-soft: var(--tg-surface-2);
    --surface-strong: var(--tg-surface-2);
    --surface-raised: var(--tg-surface-3);
    --text: var(--tg-text);
    --text-strong: #ffffff;
    --text-soft: var(--tg-text-soft);
    --text-faint: var(--tg-text-faint);
    --line: var(--tg-line);
    --line-strong: var(--tg-line-strong);
    --accent: #7d95ff;
    --accent-bright: #9aadff;
    --accent-ink: #ffffff;
    --accent-link: #9cb0ff;
    --accent-soft: var(--tg-blue-soft);
    --accent-strong: rgb(61 99 255 / 26%);
    --ring: rgb(89 220 255 / 45%);
    --focus-ring: 0 0 0 3px var(--ring);
    --success: var(--tg-success);
    --success-soft: var(--tg-success-soft);
    --success-line: rgb(58 210 159 / 40%);
    --warning: var(--tg-warning);
    --warning-soft: rgb(255 181 71 / 12%);
    --warning-line: rgb(255 181 71 / 40%);
    --error: var(--tg-error);
    --error-soft: var(--tg-error-soft);
    --error-line: rgb(255 107 107 / 45%);
    --live: var(--tg-live);
    --pro-soft: var(--tg-premium-soft);
    --portal-panel: var(--tg-surface-1);
    --portal-panel-soft: var(--tg-ink-2);

    --bp-violet: var(--tg-blue);
    --bp-violet-deep: #2f4fe0;
    --bp-on-violet: #ffffff;
    --bp-on-violet-soft: var(--tg-text-soft);
    --bp-on-violet-faint: var(--tg-text-faint);
    --bp-lilac: var(--tg-surface-2);
    --bp-lilac-ink: var(--tg-text);
    --bp-lilac-soft: var(--tg-text-soft);
    --bp-ink: var(--tg-ink);
    --bp-ink-panel: var(--tg-surface-1);
    --bp-ink-text: var(--tg-text);
    --bp-ink-soft: var(--tg-text-soft);
    --bp-ink-raised: var(--tg-surface-3);
    --bp-amber: var(--tg-premium);
    --bp-amber-ink: var(--tg-premium-ink);
    --bp-amber-soft: var(--tg-premium-soft);
    --bp-cta-bg: var(--tg-blue);
    --bp-cta-fg: #ffffff;
    --bp-cta-hover: var(--tg-blue-hover);
    --bp-card: var(--tg-surface-1);
    --bp-chip: var(--tg-surface-2);

    background: var(--tg-ink);
    color: var(--tg-text);
}

/* ===== Controls shared by every page here ============================== */

html[data-theme] body[data-page]:not([data-page='admin']) .btn {
    min-height: 44px;
    border-width: 1px;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

html[data-theme] body[data-page] .btn-primary {
    border-color: transparent;
    background: var(--tg-blue);
    color: #ffffff;
}

html[data-theme] body[data-page] .btn-primary:hover {
    border-color: transparent;
    background: var(--tg-blue-hover);
}

html[data-theme] body[data-page] :is(.btn-secondary, .btn-light) {
    border-color: var(--tg-line-strong);
    background: transparent;
    color: #ffffff;
}

html[data-theme] body[data-page] :is(.btn-secondary, .btn-light):hover {
    background: rgb(255 255 255 / 6%);
}

html[data-theme] body[data-page] .btn.danger-button,
html[data-theme] body[data-page] .btn-danger {
    border-color: var(--error-line);
    background: transparent;
    color: var(--tg-error);
}

html[data-theme] body[data-page] .btn.danger-button:hover,
html[data-theme] body[data-page] .btn-danger:hover {
    background: var(--tg-error-soft);
}

html[data-theme] body[data-page] .btn:focus-visible,
html[data-theme] body[data-page] a:focus-visible {
    outline: 2px solid var(--tg-focus);
    outline-offset: 3px;
}

/* Fields: a 48px rounded box on the ink, blue edge and focus ring when active.
   16px text so a phone never zooms into the field. */
html[data-theme] body[data-page] .field input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
html[data-theme] body[data-page] .field select,
html[data-theme] body[data-page] .field-input {
    min-height: 48px;
    padding-inline: 16px;
    border: 1px solid var(--tg-line-strong);
    border-radius: 12px;
    background-color: var(--tg-ink-2);
    color: #ffffff;
    font-size: 1rem;
}

/* Room for the drawn chevron (brand-poster-portal.css) so the text never runs
   under it. */
html[data-theme] body[data-page] .field select:not([multiple]) {
    padding-right: 44px;
    background-position:
        right 22px center,
        right 16px center;
    text-overflow: ellipsis;
}

html[data-theme] body[data-page] .field textarea {
    border: 1px solid var(--tg-line-strong);
    border-radius: 12px;
    background-color: var(--tg-ink-2);
    color: #ffffff;
    font-size: 1rem;
}

html[data-theme] body[data-page] :is(.field input, .field select, .field textarea, .field-input)::placeholder {
    color: var(--tg-text-faint);
    opacity: 1;
}

html[data-theme] body[data-page] .field input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']):focus,
html[data-theme] body[data-page] .field select:focus,
html[data-theme] body[data-page] .field textarea:focus,
html[data-theme] body[data-page] .field-input:focus {
    border-color: var(--tg-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgb(61 99 255 / 30%);
}

html[data-theme] body[data-page] .field input[aria-invalid='true'] {
    border-color: var(--tg-error);
}

html[data-theme] body[data-page] .field-password-toggle {
    right: 4px;
    bottom: 4px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--tg-text-soft);
}

html[data-theme] body[data-page] .field-password-toggle:hover {
    background: rgb(255 255 255 / 6%);
    color: #ffffff;
}

html[data-theme] body[data-page] :is(.field > span, .field > label, .field label, .field-label) {
    color: var(--tg-text);
    font-family: var(--tg-font-body);
    font-weight: 600;
}

html[data-theme] body[data-page] .field-hint {
    color: var(--tg-text-faint);
}

html[data-theme] body[data-page] :is(input[type='checkbox'], input[type='radio']) {
    width: 20px;
    height: 20px;
    accent-color: var(--tg-blue);
}

/* Segmented switches (Sign in / Create account, catalogue tabs): the site's
   .tg-tabs, with the chosen one raised rather than filled. */
html[data-theme] body[data-page] :is(.mode-switch, .catalog-tabs, .range-tabs, .portal-segmented, .pulse-tabs) {
    padding: 4px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-pill);
    background: var(--tg-ink-2);
}

html[data-theme] body[data-page] :is(.mode-switch-button, .catalog-tab, .range-tabs button, .portal-segmented button, .pulse-tabs button) {
    min-height: 44px;
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: 0.95rem;
    font-weight: 600;
}

html[data-theme] body[data-page] :is(.mode-switch-button, .catalog-tab, .range-tabs button, .portal-segmented button, .pulse-tabs button).is-active {
    background: var(--tg-surface-3);
    box-shadow: 0 1px 0 rgb(255 255 255 / 8%) inset;
    color: #ffffff;
}

/* Status messages: one shape, colour carries the meaning, and the text always
   stays readable white-on-ink rather than coloured-on-colour. account-portal.js
   sets an .is-* class; the reseller portal and the phone setup pages set only
   data-kind, so both are read. */
html[data-theme] body[data-page] .status-banner {
    padding: 12px 16px;
    border: 1px solid var(--tg-line-strong);
    border-left: 3px solid var(--tg-blue);
    border-radius: 12px;
    background: var(--tg-surface-2);
    color: var(--tg-text);
    line-height: 1.5;
}

html[data-theme] body[data-page] .status-banner:is(.is-success, [data-kind='success']) {
    border-color: var(--success-line);
    border-left-color: var(--tg-success);
    background: var(--tg-success-soft);
}

html[data-theme] body[data-page] .status-banner:is(.is-warning, [data-kind='warning']) {
    border-color: var(--warning-line);
    border-left-color: var(--tg-warning);
    background: var(--warning-soft);
}

html[data-theme] body[data-page] .status-banner:is(.is-error, [data-kind='error'], [data-kind='danger']) {
    border-color: var(--error-line);
    border-left-color: var(--tg-error);
    background: var(--tg-error-soft);
}

html[data-theme] body[data-page] .status-banner a {
    color: #ffffff;
}

/* Small labels above titles: plain words in the app's soft blue. */
html[data-theme] body[data-page] :is(.utility-form-kicker, .summary-eyebrow, .tg-nav-head-label) {
    color: #c6d1ff;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

html[data-theme] body[data-page] :is(.section-title, .console-view-title, .utility-form-title, .tg-dialog-head :is(h2, h3)) {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 700;
}

html[data-theme] body[data-page] :is(.section-copy, .console-view-copy, .utility-form-copy, .summary-description) {
    color: var(--tg-text-soft);
}

html[data-theme] body[data-page] .skip-link:focus {
    z-index: 200;
    background: var(--tg-blue);
    color: #ffffff;
}

/* The guest top bar (account and reseller sign-in, phone setup pages): the
   site header's translucent ink. */
html[data-theme] body[data-page] .utility-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--tg-line);
    background: rgb(7 10 26 / 88%);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
}

html[data-theme] body[data-page] .utility-topbar-row {
    min-height: 64px;
}

html[data-theme] body[data-page] .utility-topbar .btn-ghost {
    min-height: 44px;
    color: var(--tg-text-soft);
}

html[data-theme] body[data-page] .utility-topbar .btn-ghost:hover {
    color: #ffffff;
}

/* ===== Sign in, sign up, reset, two-factor ============================ */

/* One calm card in the middle of the screen, a little above centre, with the
   first field above the fold on a phone. Width suits a form, not a page. */
html[data-theme] body[data-page='account']:not(.is-app-shell) .entry-form,
html[data-theme] body[data-page='reseller-portal']:not(.is-app-shell) .entry-form {
    width: min(100%, 460px);
    margin: clamp(16px, 6vh, 64px) auto 0;
    padding: clamp(22px, 4vw, 36px);
    gap: 16px;
}

html[data-theme] body[data-page='reseller-portal']:not(.is-app-shell) .entry-form {
    width: min(100%, 560px);
}

html[data-theme] body[data-page='account']:not(.is-app-shell) .utility-form-title,
html[data-theme] body[data-page='reseller-portal']:not(.is-app-shell) .utility-form-title {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) .utility-form-copy,
html[data-theme] body[data-page='reseller-portal']:not(.is-app-shell) .utility-form-copy {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) :is(.auth-shell, .auth-form) {
    gap: 12px;
}

html[data-theme] body[data-page='account'] .auth-shell .field input,
html[data-theme] body[data-page='account']:not(.is-app-shell) .auth-shell .btn {
    min-height: 48px;
}

html[data-theme] body[data-page='account'] .auth-shell .field :is(label, span) {
    font-size: 0.9rem;
}

html[data-theme] body[data-page='account'] .auth-provider-buttons {
    gap: 8px;
}

html[data-theme] body[data-page] .btn-social {
    min-height: 48px;
    border: 1px solid var(--tg-line-strong);
    background: var(--tg-surface-2);
    color: #ffffff;
}

html[data-theme] body[data-page] .btn-social:hover {
    border-color: rgb(255 255 255 / 24%);
    background: var(--tg-surface-3);
}

html[data-theme] body[data-page] .social-auth-divider {
    color: var(--tg-text-faint);
}

html[data-theme] body[data-page] .social-auth-divider span {
    background: var(--tg-surface-1);
}

/* "Forgot password?" is a 44px target, not a sliver of underlined text. */
html[data-theme] body[data-page='account'] .auth-options #passwordSetupLinkButton {
    min-height: 44px;
    padding: 0 4px;
    color: var(--accent-link);
    font-family: var(--tg-font-body);
    font-weight: 600;
}

html[data-theme] body[data-page='account'] .auth-options .remember-field {
    min-height: 44px;
    align-items: center;
}

html[data-theme] body[data-page='account'] .auth-legal {
    color: var(--tg-text-faint);
    font-size: 0.8rem;
}

html[data-theme] body[data-page='account'] .auth-legal a,
html[data-theme] body[data-page='account'] .consent-copy a {
    color: var(--tg-text-soft);
}

/* Reset code: a large, spaced code field like the TV's pairing screen. */
html[data-theme] body[data-page='account'] #recoveryCodeInput {
    font-family: var(--tg-font-display);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2em;
    text-align: center;
}

/* Partner sign-up and website-password gate: plain sections of the card. */
html[data-theme] body[data-page]:not(.is-app-shell) .auth-shell > .summary-card {
    display: grid;
    gap: 12px;
}

html[data-theme] body[data-page] :is(.remember-field, .consent-field) {
    color: var(--tg-text-soft);
}

html[data-theme] body[data-page] :is(.help-card, .legal-card) {
    border: 1px solid var(--tg-line);
    background: var(--tg-ink-2);
    color: var(--tg-text-soft);
}

html[data-theme] body[data-page] .portal-beta-banner {
    border: 1px solid rgb(61 99 255 / 35%);
    border-radius: var(--tg-radius);
    background: var(--tg-blue-soft);
    color: var(--tg-text);
}

html[data-theme] body[data-page] .portal-beta-banner :is(p, strong) {
    color: var(--tg-text);
}

html[data-theme] body[data-page] .portal-beta-banner a {
    color: #c6d1ff;
}

/* ===== Signed-in frame ================================================ */

html[data-theme] body[data-page].is-app-shell .portal-appbar {
    border-bottom: 1px solid var(--tg-line);
    background: rgb(7 10 26 / 92%);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
}

html[data-theme] body[data-page].is-app-shell .portal-bell {
    width: 44px;
    height: 44px;
    border: 1px solid var(--tg-line-strong);
    border-radius: 12px;
    background: transparent;
    color: #ffffff;
}

html[data-theme] body[data-page].is-app-shell .portal-bell:hover {
    background: rgb(255 255 255 / 6%);
}

/* Section titles in the sidebar read as quiet headings, the links as rows. */
html[data-theme] body[data-page].is-app-shell :is(.tg-nav-group-label, .tg-nav-head-label) {
    color: var(--tg-text-faint);
    font-family: var(--tg-font-display);
    font-size: 0.8rem;
    font-weight: 600;
}

html[data-theme] body[data-page].is-app-shell .tg-nav-link {
    font-family: var(--tg-font-display);
}

html[data-theme] body[data-page].is-app-shell .tg-console-main {
    background: var(--tg-ink);
}

/* Phone and tablet: workspace-ui.js swaps the sidebar for a Menu bar. The
   button reads as a menu control and the current section sits beside it. */
@media (max-width: 1024px) {
    html[data-theme] body[data-page].is-app-shell .workspace-ready .workspace-nav-bar {
        gap: 12px;
        padding: 10px var(--tg-gutter);
        border-bottom: 1px solid var(--tg-line);
        background: rgb(11 15 36 / 96%);
    }

    html[data-theme] body[data-page].is-app-shell .workspace-ready .workspace-nav-bar .btn {
        min-height: 44px;
        padding-inline: 18px;
    }

    html[data-theme] body[data-page].is-app-shell .workspace-route-label {
        color: #ffffff;
        font-family: var(--tg-font-display);
        font-size: 1rem;
        font-weight: 600;
    }

    html[data-theme] body[data-page].is-app-shell .workspace-ready.is-nav-open .tg-console-nav {
        border-bottom: 1px solid var(--tg-line);
        border-radius: 0 0 var(--tg-radius) var(--tg-radius);
        background: var(--tg-ink-2);
        box-shadow: var(--tg-shadow-lift);
    }

    html[data-theme] body[data-page].is-app-shell .workspace-ready .tg-nav-link {
        min-height: 48px;
    }
}

/* ===== Signed-in content ============================================== */

html[data-theme] body[data-page].is-app-shell :is(.portal-view-stat-label, .summary-label, .detail-label) {
    color: var(--tg-text-faint);
}

html[data-theme] body[data-page].is-app-shell :is(.portal-view-stat-value, .summary-value, .dash-tile-value) {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 700;
}

html[data-theme] body[data-page].is-app-shell :is(.portal-view-stat-note, .dash-meta) {
    color: var(--tg-text-soft);
}

/* Tables: a quiet header row, rows separated by a fine line. They scroll
   inside their own box when wider than the screen (.table-wrap). */
html[data-theme] body[data-page] :is(.portal-table, .table-wrap table) :is(th, td) {
    border-bottom-color: var(--tg-line);
}

html[data-theme] body[data-page] :is(.portal-table, .table-wrap table) thead th {
    background: var(--tg-ink-2);
    color: var(--tg-text-faint);
    font-family: var(--tg-font-display);
    font-weight: 600;
}

html[data-theme] body[data-page] :is(.table-empty-cell, .reseller-empty, .portal-empty-copy) {
    color: var(--tg-text-faint);
}

/* Loading placeholders: a slow shimmer on the surface tone (account-portal.css
   owns the keyframes; reduced motion stops it via tg.css). */
html[data-theme] body[data-page] :is(.skeleton, .portal-skeleton) {
    background-color: var(--tg-surface-2);
}

/* Dialogs (change email, change password, confirmations). */
html[data-theme] body[data-page] :is(.tg-dialog, .portal-dialog)::backdrop {
    background: rgb(3 5 14 / 72%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

html[data-theme] body[data-page] .tg-dialog-head p {
    color: var(--tg-text-soft);
}

/* The danger zone (Delete account) keeps its red edge. */
html[data-theme] body[data-page='account'] .customer-account-view .account-panel--danger {
    border-color: var(--error-line);
}

/* Phones: the four-up summaries become two-up rather than four full-width
   cards, so a section's numbers fit on one screen. Long-copy tiles (the
   overview dashboard) stay one per row. */
@media (max-width: 620px) {
    html[data-theme] body[data-page].is-app-shell .portal-view-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    html[data-theme] body[data-page].is-app-shell .portal-view-stat {
        padding: 16px;
        border: 1px solid var(--tg-line);
    }

    html[data-theme] body[data-page].is-app-shell .portal-view-stat:last-child {
        border-bottom: 1px solid var(--tg-line);
    }

    html[data-theme] body[data-page].is-app-shell .portal-appbar-actions .btn {
        min-height: 44px;
    }

    html[data-theme] body[data-page='account'] .portal-overview-actions,
    html[data-theme] body[data-page='account'] .portal-overview-actions .btn {
        width: 100%;
    }
}

/* ===== Reseller portal ================================================ */

html[data-theme] body[data-page='reseller-portal'] .reseller-metric-label {
    color: var(--tg-text-faint);
}

html[data-theme] body[data-page='reseller-portal'] .reseller-metric-value {
    color: #ffffff;
}

/* Credit packs: quiet tiles, the recommended one edged in blue. */
html[data-theme] body[data-page='reseller-portal'] .reseller-pack {
    border: 1px solid var(--tg-line);
    background: var(--tg-ink-2);
}

html[data-theme] body[data-page='reseller-portal'] .reseller-pack.is-highlight {
    border-color: rgb(61 99 255 / 45%);
    background: linear-gradient(180deg, rgb(61 99 255 / 14%), rgb(61 99 255 / 4%)), var(--tg-ink-2);
}

html[data-theme] body[data-page='reseller-portal'] .reseller-product-option {
    border: 1px solid var(--tg-line-strong);
    background: var(--tg-ink-2);
}

html[data-theme] body[data-page='reseller-portal'] .reseller-product-option.is-selected {
    border-color: var(--tg-blue);
    background: linear-gradient(180deg, rgb(61 99 255 / 14%), rgb(61 99 255 / 6%)), var(--tg-ink-2);
    box-shadow: 0 0 0 1px var(--tg-blue) inset;
}

/* The reseller shortcuts never widen the page (reseller-portal.css makes them
   a two-by-two grid on a phone). */
@media (max-width: 900px) {
    html[data-theme] body[data-page='reseller-portal'] .partner-workspace-nav {
        max-width: 100%;
    }
}

/* ===== Phone setup pages: /device-login and /stremio-connect ========= */

html[data-theme] :is(body[data-page='device-login'], body[data-page='stremio-connect']) .entry-form {
    width: min(100%, 480px);
    margin-inline: auto;
}

/* One question per screen: the heading block and the code step are centred. */
html[data-theme] body.utility-page[data-page='device-login'] :is(.utility-form-kicker, .utility-form-title, .utility-form-copy, .lookup-form) {
    text-align: center;
}

/* Steps: a row of dots at the foot of the card, the current one wide and named
   underneath. The TV's first-run screen draws the same row. Small enough to stay
   on screen in every stage, so nothing hides it. */
html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    order: 1;
    padding: 0 0 24px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-step,
html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-step[data-state='current'] {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tg-text-faint);
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-bubble {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tg-line-strong);
    font-size: 0;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-step[data-state='done'] .stepper-bubble {
    background: var(--tg-blue);
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-step[data-state='current'] .stepper-bubble {
    width: 22px;
    background: var(--tg-blue);
}

/* Every step keeps its name for screen readers; only the current one is drawn. */
html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-step[data-state='current'] .stepper-label {
    inset: auto 0 0;
    width: auto;
    height: auto;
    clip-path: none;
    font-size: 0.8125rem;
    text-align: center;
}

/* The pairing and setup codes: large, spaced, unmistakable. */
html[data-theme] body.utility-page:is([data-page='device-login'], [data-page='stremio-connect']) .code-input input {
    min-height: 56px;
    border-color: var(--tg-line-strong);
    background: var(--tg-ink-2);
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.22em;
}

html[data-theme] body.utility-page[data-page='device-login'] .summary-card {
    border: 1px solid var(--tg-line);
    background: var(--tg-ink-2);
}

html[data-theme] body.utility-page[data-page='device-login'] .summary-device {
    color: #ffffff;
}

html[data-theme] body.utility-page:is([data-page='device-login'], [data-page='stremio-connect']) .text-button {
    color: #c6d1ff;
}

html[data-theme] body.utility-page:is([data-page='device-login'], [data-page='stremio-connect']) .entry-form > .success-card {
    border: 1px solid var(--success-line);
    background: var(--tg-success-soft);
}

html[data-theme] body.utility-page:is([data-page='device-login'], [data-page='stremio-connect']) .entry-form > .success-card .success-icon {
    background: var(--tg-success);
    color: var(--tg-ink);
}

html[data-theme] body.utility-page:is([data-page='device-login'], [data-page='stremio-connect']) .entry-form > .success-card h2 {
    color: #ffffff;
}

html[data-theme] body.utility-page:is([data-page='device-login'], [data-page='stremio-connect']) .entry-form > .help-card {
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-ink-2);
}

html[data-theme] body.utility-page:is([data-page='device-login'], [data-page='stremio-connect']) .utility-form-title {
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* With the plan step open the whole finish fits one phone screen: the "Return to your TV" card
   shrinks to a single row, and the status line (which repeats it) and the code help (the code has
   already worked) step aside. */
html[data-plan-offer='open'] body.utility-page[data-page='device-login'] .entry-form > .success-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 12px;
    align-items: center;
    padding: 10px 14px;
    text-align: start;
}

html[data-plan-offer='open'] body.utility-page[data-page='device-login'] .entry-form > .success-card .success-icon {
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px;
    margin: 0;
}

html[data-plan-offer='open'] body.utility-page[data-page='device-login'] .entry-form > .success-card .success-icon svg {
    width: 18px;
    height: 18px;
}

html[data-plan-offer='open'] body.utility-page[data-page='device-login'] .entry-form > .success-card h2 {
    margin: 0;
    font-size: 1rem;
}

html[data-plan-offer='open'] body.utility-page[data-page='device-login'] .entry-form > .success-card p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

html[data-plan-offer='open'] body.utility-page[data-page='device-login'] :is(#statusBanner, .help-card, .utility-form-kicker) {
    display: none;
}

/* Each step fits one phone screen where it can. Past the code step the code help is no use (the
   code has worked) and the kicker repeats the heading; the sign-in password hint says only what
   its label says. On a phone the card also packs tighter. Creating an account still scrolls on a
   small phone: its consent text is shown in full. */
html:is([data-setup-stage='email'], [data-setup-stage='done']) body.utility-page[data-page='device-login'] :is(.help-card, .utility-form-kicker) {
    display: none;
}

html[data-theme] body.utility-page[data-page='device-login'] .auth-form:has(.mode-switch-button.is-active[data-intent='sign_in']) #passwordHint {
    display: none;
}

/* The finish with a plan to choose is headed by "Choose a plan"; "Sign in" above it is kept for
   screen readers and focus only. */
html[data-plan-offer='open'] body.utility-page[data-page='device-login'] .utility-form-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 600px) {
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster']:not(.is-app-shell) .entry-form {
        gap: 12px;
        margin-top: 4px;
        padding: 14px 18px;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .utility-form-title {
        font-size: 1.6rem;
    }

    html[data-theme] body.utility-page[data-page='device-login'] :is(.utility-shell, .utility-grid) {
        margin-bottom: 0;
        padding-bottom: 8px;
    }
}

/* Sign in and Create account: one heading, one main button. The two-tab switch is a quiet line
   under the form that offers the other mode, the email-code route is a link beside it, the TV is
   one row with its own Change link, and the consent is plain text beside its tick box. */
html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .summary-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 12px;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .summary-code {
    grid-column: 1;
    grid-row: 2;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #changeTvButton {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form > * {
    grid-column: 1 / -1;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form > #otpRequestButton {
    grid-column: 1;
    justify-self: start;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form > .mode-switch {
    grid-column: 2;
    order: 5;
    justify-self: end;
    display: flex;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form > #otpRequestButton.is-hidden + .mode-switch,
html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form > .mode-switch:only-child {
    grid-column: 1 / -1;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form > #otpRequestButton,
html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .mode-switch-button:not(.is-active) {
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: #c6d1ff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: start;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: normal;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .mode-switch-button:not(.is-active) {
    text-align: end;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .mode-switch-button:is(.is-active, .is-hidden) {
    display: none;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .mode-switch-button:not(.is-active)::before {
    display: inline-block;
    margin-inline-end: 0.3em;
    color: var(--tg-text-faint);
    font-weight: 400;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .mode-switch-button[data-intent='sign_up']:not(.is-active)::before {
    content: 'New here?';
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .mode-switch-button[data-intent='sign_in']:not(.is-active)::before {
    content: 'Have an account?';
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .consent-field {
    gap: 10px;
    align-items: start;
    padding: 0;
    border: 0;
    background: none;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .consent-field.is-hidden {
    display: none;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .consent-copy {
    font-size: 0.8125rem;
    line-height: 1.45;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .consent-copy strong {
    display: none;
}

/* The emailed code on the TV-linking page: one question. The notice above already says where
   the code went, so the email box, the consent (already given) and the TV row step aside, and
   the two ways out are links under the button. */
html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .entry-form:has(#otpShell:not(.is-hidden)) :is(#authForm, .summary-card) {
    display: none;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #otpShell {
    gap: 10px;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #otpShell .otp-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #otpShell .otp-actions > #otpVerifyButton {
    grid-column: 1 / -1;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #otpShell .otp-actions > :is(#otpResendButton, #otpPasswordButton) {
    width: auto;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #c6d1ff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #otpShell .otp-actions > #otpResendButton {
    justify-self: start;
}

html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #otpShell .otp-actions > #otpPasswordButton {
    justify-self: end;
}

/* Buying a plan: the card also sits closer to the header at every size. */
html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)):has(#portalPlanNote:not([hidden])) #mainContent {
    margin-top: 8px;
}

/* A very short window (about 600 to 660 tall, a small laptop with toolbars showing): boxes and
   buttons lose a few pixels each so the card still fits. Touch targets stay at 40px or more. */
@media (max-height: 660px) {
    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #mainContent {
        margin-top: 0;
        padding-block: 8px;
        gap: 8px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) :is(#authShell, #authForm) {
        gap: 8px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #authForm .field input,
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form .field input {
        min-height: 42px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #authForm #verifyButton,
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form #verifyButton {
        min-height: 44px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #authShell > .mode-switch .mode-switch-button:not(.is-active) {
        min-height: 40px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #authShell > .auth-legal {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) .portal-topbar .utility-form-copy {
        font-size: 0.875rem;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster']:not(.is-app-shell) .entry-form {
        gap: 8px;
        margin-top: 0;
        padding-block: 8px;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .utility-form-title {
        font-size: 1.4rem;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer {
        gap: 8px;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-card {
        min-height: 48px;
        padding-block: 6px;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-copy {
        font-size: 0.8125rem;
    }
}

/* Motion: each step's content settles in as it appears, the step dots slide, the plan cards
   arrive one after another and the tick draws itself. Nothing loops, and none of it runs for
   someone who has asked for reduced motion. */
@keyframes tg-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes tg-tick-pop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: none; }
}

@keyframes tg-tick-draw {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] :is(.lookup-form, .auth-form, .otp-shell, .summary-card, .success-card, .plan-offer, .consent-field, .status-banner):not(.is-hidden) {
        animation: tg-step-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form:not(.is-hidden) {
        animation-delay: 0.05s;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-card {
        animation: tg-step-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-card:nth-child(1) { animation-delay: 0.1s; }
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-card:nth-child(2) { animation-delay: 0.16s; }
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-card:nth-child(3) { animation-delay: 0.22s; }
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-card:nth-child(n + 4) { animation-delay: 0.28s; }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .plan-offer-card:active {
        transform: scale(0.985);
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .success-card:not(.is-hidden) .success-icon {
        animation: tg-tick-pop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .success-card:not(.is-hidden) .success-icon polyline {
        stroke-dasharray: 24;
        animation: tg-tick-draw 0.3s ease-out 0.34s both;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-bubble {
        transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease;
    }
}

/* Choose a plan, after linking: one question, a card per plan, tap a card to choose it. */
html[data-theme] body.utility-page[data-page='device-login'] .plan-offer {
    display: grid;
    gap: 12px;
    text-align: center;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer.is-hidden {
    display: none;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer h2 {
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-copy {
    margin: 0;
    color: var(--tg-text-faint);
    font-size: 0.9375rem;
    line-height: 1.5;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-list {
    display: grid;
    gap: 8px;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: baseline;
    min-height: 56px;
    padding: 9px 14px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius);
    background: var(--tg-ink-2);
    color: #ffffff;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-card:is(:hover, :focus-visible) {
    border-color: var(--tg-blue);
    background: var(--tg-blue-soft);
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-card:focus-visible {
    outline: 2px solid var(--tg-blue);
    outline-offset: 2px;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-card:disabled {
    opacity: 0.55;
    cursor: wait;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-name {
    font-weight: 600;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-price {
    font-family: var(--tg-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-terms {
    grid-column: 1 / -1;
    color: var(--tg-text-faint);
    font-size: 0.8125rem;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 16px;
}

html[data-theme] body.utility-page[data-page='device-login'] .plan-offer-actions .text-button {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== Welcome, once, straight after signing up (js/account-welcome.js) =====
   A full-screen layer over the account page: one question per screen, free already chosen. */
.tg-welcome {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow-y: auto;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgb(61 99 255 / 18%), transparent 60%),
        var(--tg-ink, #070912);
}

body.has-welcome {
    overflow: hidden;
}

/* The account page underneath is not drawn while the welcome is up. On a phone the console is
   wider than the screen, and a fixed layer follows that width, so the cards were cut off. */
body.has-welcome > :not(.tg-welcome) {
    display: none;
}

.tg-welcome-card {
    display: grid;
    gap: 12px;
    width: min(100%, 460px);
    text-align: center;
}

.tg-welcome-title {
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: clamp(1.75rem, 6vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    outline: none;
}

.tg-welcome-copy {
    margin: 0 0 6px;
    color: var(--tg-text-soft);
    font-size: 1rem;
    line-height: 1.5;
}

.tg-welcome-choices {
    display: grid;
    gap: 8px;
}

.tg-welcome-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: baseline;
    min-height: 60px;
    padding: 10px 16px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius);
    background: var(--tg-ink-2);
    color: #ffffff;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.tg-welcome-choice[aria-pressed='true'] {
    border-color: var(--tg-blue);
    background: var(--tg-blue-soft);
    box-shadow: 0 0 0 1px var(--tg-blue);
}

.tg-welcome-choice:focus-visible,
.tg-welcome-skip:focus-visible {
    outline: 2px solid var(--tg-blue);
    outline-offset: 2px;
}

.tg-welcome-choice-title {
    font-weight: 600;
}

.tg-welcome-choice-price {
    font-family: var(--tg-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tg-welcome-choice-detail {
    grid-column: 1 / -1;
    color: var(--tg-text-faint);
    font-size: 0.8125rem;
}

.tg-welcome-continue {
    margin-top: 6px;
}

.tg-welcome-note {
    margin: 0;
    color: var(--tg-text-faint);
    font-size: 0.8125rem;
}

.tg-welcome-skip {
    justify-self: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #c6d1ff;
    font: inherit;
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.tg-welcome-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.tg-welcome-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tg-line-strong);
}

.tg-welcome-dots .is-current {
    width: 22px;
    background: var(--tg-blue);
}

@media (prefers-reduced-motion: no-preference) {
    .tg-welcome-card > * {
        animation: tg-step-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .tg-welcome-card > :nth-child(2) { animation-delay: 0.05s; }
    .tg-welcome-card > :nth-child(3) { animation-delay: 0.1s; }
    .tg-welcome-card > :nth-child(n + 4) { animation-delay: 0.16s; }

    .tg-welcome-choice {
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }

    .tg-welcome-choice:active {
        transform: scale(0.985);
    }
}

/* ===== Partners (/partners) =========================================== */

.tg-portal-partners {
    padding-bottom: var(--tg-section);
}

.tg-portal-partners .tg-head {
    margin-bottom: var(--tg-space-5);
}

.tg-portal-partners .tg-steps {
    margin-top: var(--tg-space-5);
}

.tg-portal-partners #partnerStatus:empty {
    display: none;
}

.tg-portal-partners #partnerApp {
    margin-block: var(--tg-space-6);
}

.tg-portal-partners .tg-faq {
    margin-top: var(--tg-space-4);
}

/* ===== Reseller programme (/reseller) ================================ */

/* The two programme sales pages (/reseller and /affiliates) share this hero. */
.tg-portal-reseller-hero {
    padding-top: clamp(40px, 6vw, 88px);
}

/* "Already a reseller? Sign in": one quiet line under the single main button. */
.tg-portal-signin {
    margin: 0;
    color: var(--tg-text-soft);
}

.tg-portal-reseller-hero .tg-hero-title {
    font-size: clamp(2.3rem, 4vw + 0.8rem, 3.8rem);
}

/* The four-line operating model, as a quiet definition list in a card. */
.tg-portal-facts {
    display: grid;
    gap: 0;
    margin: 0;
}

.tg-portal-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--tg-space-4);
    padding: 14px 0;
    border-bottom: 1px solid var(--tg-line);
}

.tg-portal-facts > div:last-child {
    border-bottom: 0;
}

.tg-portal-facts dt {
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

.tg-portal-facts dd {
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-portal-statement {
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: clamp(1.5rem, 1.6vw + 1rem, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.tg-portal-statement span {
    color: var(--tg-text-soft);
}

.tg-portal-beta-note {
    flex-direction: column;
    gap: var(--tg-space-3);
    padding: clamp(18px, 2.4vw, 24px);
    font-size: var(--tg-size-body);
}

.tg-portal-beta-note .tg-ticks li {
    color: var(--tg-text-soft);
}

.tg-portal-beta-note .tg-ticks strong {
    color: #ffffff;
}

/* The credit price list on /reseller: pack cards, then what each activation uses. */
.tg-portal-packs {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.tg-portal-pack {
    gap: var(--tg-space-3);
}

.tg-portal-pack-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tg-space-2);
    min-height: 32px;
}

.tg-portal-pack .tg-plan-price {
    flex-wrap: wrap;
}

.tg-portal-pack .tg-ticks strong {
    color: #ffffff;
}

.tg-portal-costs {
    margin-top: var(--tg-space-6);
    align-items: center;
}

/* ===== Demonstration source (/demo) ================================== */

.tg-portal-doc {
    display: grid;
    gap: var(--tg-space-6);
}

.tg-portal-doc h2 {
    margin: 0 0 var(--tg-space-2);
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 1.25rem;
}

.tg-portal-doc p {
    margin: 0;
    color: var(--tg-text-soft);
}

/* ===== Playlist editor hero (/playlist-editor) ======================= */

.tg-portal-tool-hero {
    padding-top: clamp(40px, 6vw, 80px);
    padding-bottom: clamp(24px, 3vw, 40px);
}

.tg-portal-tool-hero .tg-hero-title {
    font-size: clamp(2.3rem, 4vw + 0.8rem, 3.6rem);
}

/* ===== Admin: legibility only ======================================== */

/* The staff console keeps its layout; these lines only keep text readable on
   the darker ground now that the older violet tints are gone. */
html[data-theme] body[data-page='admin'] :is(.admin-stat-label, .admin-pulse-label, .admin-substat-label) {
    color: var(--tg-text-soft);
}

html[data-theme] body[data-page='admin'] :is(.admin-stat-value, .admin-pulse-value) {
    color: #ffffff;
}

/* Phones: the overview's four explained tiles stay one per row, but compact. */
@media (max-width: 620px) {
    html[data-theme] body[data-brand='poster'].is-app-shell .dash-tile,
    html[data-theme] body[data-brand='poster'].is-app-shell .dash-tile:last-child {
        min-height: 0;
        padding: 18px 20px;
    }

    html[data-theme] body[data-brand='poster'].is-app-shell .dash-tile .summary-value {
        font-size: 2rem;
    }
}

/* Plan & payments: the description first, then the optional partner code as a
   compact field with its link underneath. */
html[data-theme] body[data-page='account'] .account-panel--billing .field-label {
    display: block;
    margin: 14px 0 6px;
    color: var(--tg-text);
    font-size: 0.9rem;
    font-weight: 600;
}

html[data-theme] body[data-page='account'] .account-panel--billing #partnerPromoCode {
    width: min(100%, 360px);
}

html[data-theme] body[data-page='account'] .account-panel--billing a[href='/partners'] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--tg-size-small);
}

/* The reseller sign-in's closing note is a footnote, not body copy. */
html[data-theme] body[data-page='reseller-portal']:not(.is-app-shell) #authForm .section-copy {
    margin: 4px 0 0;
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

/* The partners intro sits close under the header; .partner-page already pads it. */
.tg-portal-partners > .tg-section--tight {
    padding-top: 0;
}

/* Playlist editor: the workspace lines up with the hero above it, and its
   heading uses the site's section size rather than the older poster scale. */
html[data-theme] body[data-page='playlist-editor'] .checker-page .wrap-wide {
    width: min(var(--tg-wrap), 100% - 2 * var(--tg-gutter));
    margin-inline: auto;
    padding-inline: 0;
}

html[data-theme] body[data-page='playlist-editor'] .checker-workspace-heading h2 {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: var(--tg-size-h2);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

html[data-theme] body[data-page='playlist-editor'] .checker-workspace-heading .kicker {
    color: #c6d1ff;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

/* ===== The site's primary links in the portal bars ==================== */

/* /account and /reseller-portal draw their own top bars (no [data-site-header]
   slot), so they carry the shared header's four links themselves, looking like
   tg.css's `.site-nav .nav-links a`. The bars are as wide as the site header. */
html[data-theme] body[data-page]:not([data-page='admin']) .utility-topbar-row {
    width: min(var(--tg-wrap), 100% - 2 * var(--tg-gutter));
    margin-inline: auto;
    padding-inline: 0;
}

.tg-portal-sitenav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.tg-portal-sitenav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--tg-radius-pill);
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: 0.975rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--tg-dur-fast) var(--tg-ease),
        background-color var(--tg-dur-fast) var(--tg-ease);
}

.tg-portal-sitenav a:hover {
    background: rgb(255 255 255 / 5%);
    color: #ffffff;
}

/* Guest bar: brand on the left, the links (and the reseller page's own
   actions) on the right. */
html[data-theme] body[data-page] .utility-topbar .tg-portal-sitenav {
    margin-left: auto;
}

html[data-theme] body[data-page] .utility-topbar .tg-portal-sitenav + .utility-topbar-actions {
    margin-left: var(--tg-space-3);
}

/* Signed-in bar: the links follow the brand. The route label beside the brand
   repeats what the sidebar already highlights, so it gives way to them. */
html[data-theme] body[data-page] .portal-appbar .tg-portal-sitenav {
    margin-left: var(--tg-space-4);
}

/* The console menu's "TiviGlass" group (account.html) repeats these links for
   the widths where the bar has no room. Plain rows, no icon column. */
html[data-theme] body[data-page='account'] .tg-portal-site-group .tg-nav-link {
    grid-template-columns: minmax(0, 1fr);
    text-decoration: none;
}

@media (min-width: 1100px) {
    html[data-theme] body[data-page='account'] .tg-portal-site-group {
        display: none;
    }

    html[data-theme] body[data-page='account'] .portal-appbar :is(.portal-appbar-divider, .portal-appbar-product) {
        display: none;
    }
}

/* 1100 to 1399px: the bar keeps brand, links and actions; the signed-in email
   is already in the sidebar's profile row. */
@media (min-width: 1100px) and (max-width: 1399px) {
    html[data-theme] body[data-page='account'].is-app-shell .portal-appbar-account {
        display: none;
    }

    html[data-theme] body[data-page='account'].is-app-shell .portal-appbar-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 1099px) {
    html[data-theme] body[data-page='account'] .portal-appbar .tg-portal-sitenav {
        display: none;
    }
}

/* Reseller console: the links share the bar until it gets tight, then drop to
   their own scrolling row under it, so nothing is hidden. */
@media (max-width: 1279px) {
    html[data-theme] body[data-page='reseller-portal'].is-app-shell .portal-appbar-account {
        display: none;
    }

    html[data-theme] body[data-page='reseller-portal'].is-app-shell .portal-appbar-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 899px) {
    html[data-theme] body[data-page='reseller-portal'] .portal-appbar-branding {
        flex-wrap: wrap;
    }

    html[data-theme] body[data-page='reseller-portal'] .portal-appbar .tg-portal-sitenav {
        order: 9;
        flex: 1 0 100%;
        margin: 0 0 6px -14px;
    }
}

/* Guest bars on a phone: brand and actions on the first line, the links on a
   second, scrollable line rather than squeezed or hidden. */
@media (max-width: 720px) {
    html[data-theme] body[data-page] .utility-topbar-row {
        flex-wrap: wrap;
        row-gap: 0;
    }

    html[data-theme] body[data-page] .utility-topbar .tg-portal-sitenav {
        order: 9;
        flex: 1 0 100%;
        margin: 0 0 6px -14px;
    }

    html[data-theme] body[data-page] .utility-topbar .tg-portal-sitenav + .utility-topbar-actions {
        margin-left: auto;
    }
}

@media (max-width: 899px) {
    html[data-theme] body[data-page] :is(.utility-topbar, .portal-appbar) .tg-portal-sitenav {
        overflow-x: auto;
        scrollbar-width: none;
    }

    html[data-theme] body[data-page] :is(.utility-topbar, .portal-appbar) .tg-portal-sitenav::-webkit-scrollbar {
        display: none;
    }
}

/* ===== Account sign-in: the trial and the chosen plan ================= */

/* Sign in and Create account on /account: one question per screen.
   One heading, one line under it, the fields, one main button. The Sign in / Create account
   switch is a quiet line under the button offering the other mode. "Create account" is known by
   the confirm-password field account-portal.js reveals for it; that field itself is not drawn
   (the password box has a show button, and an empty confirm is already accepted), so it is only
   the signal. Browsers without :has() keep the old tabs and simply lose the trial note. */
html[data-theme] body[data-page='account']:not(.is-app-shell) main:has(#authShell:not(.is-hidden)) .portal-topbar {
    justify-content: center;
    text-align: center;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authForm #confirmPasswordField {
    display: none;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .mode-switch:not(.is-hidden) {
    order: 3;
    display: flex;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .mode-switch .mode-switch-button:is(.is-active, .is-hidden) {
    display: none;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .mode-switch .mode-switch-button:not(.is-active) {
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: #c6d1ff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .mode-switch .mode-switch-button:not(.is-active)::before {
    display: inline-block;
    margin-inline-end: 0.35em;
    color: var(--tg-text-faint);
    font-weight: 400;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .mode-switch .mode-switch-button[data-intent='sign_up']:not(.is-active)::before {
    content: 'New to TiviGlass?';
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .mode-switch .mode-switch-button[data-intent='sign_in']:not(.is-active)::before {
    content: 'Have an account?';
}

/* Buying a plan: the plan and its price in one slim row. The heading line already says what
   happens next, so the three numbered steps are not drawn. */
html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .tg-portal-order {
    padding: 10px 14px;
    gap: 2px;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .tg-portal-order :is(.tg-portal-order-label, .tg-portal-order-next) {
    display: none;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .tg-portal-order .tg-portal-order-plan:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
    margin: 0;
}

/* Social sign-in, when the deployment has providers switched on: one row of equal buttons and a
   slim "or use email" line, so the card still fits a phone screen with them. */
html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell .auth-provider-buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 8px;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell .btn-social {
    min-height: 44px;
    padding-inline: 6px;
    gap: 6px;
    font-size: 0.875rem;
    white-space: nowrap;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell .social-auth {
    gap: 8px;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell .social-auth-divider {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.2;
}

/* The security check (turnstile-client.js) draws nothing until the form is first used. It
   takes no room while it is empty, and it sits at the foot of the card, so when it does appear
   it lengthens the card instead of pushing the button down under someone's finger. */
html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .tg-turnstile {
    order: 6;
    margin: 0;
}

/* Empty, it is still a row of the card's grid, so it would add one gap of blank space at the
   foot. The negative margin takes that gap back; it stays in the page for the widget to draw in. */
html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .tg-turnstile:empty {
    min-height: 0;
    margin-top: -12px;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .tg-turnstile-hint {
    order: 7;
}

/* Buying a plan adds the plan row to the card, so at every size the card packs a little
   tighter to make room, and on a phone the plan row stands in for the line under the heading. */
html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)):has(#portalPlanNote:not([hidden])) :is(#mainContent, #authShell, #authForm) {
    gap: 10px;
}

@media (max-width: 600px), (max-height: 660px) {
    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)):has(#portalPlanNote:not([hidden])) .utility-form-copy {
        display: none;
    }
}

/* A short screen, phone or laptop (an iPhone SE is 375 by 667; a 13-inch laptop's browser window
   is often under 700 tall): the sign-in card still fits one screen. It sits closer to the header
   and packs a little tighter, and on a phone the header drops its row of site links. Only while
   signed out; the console is untouched. */
@media (max-height: 760px) {

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) .utility-shell {
        padding-bottom: 4px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #mainContent {
        margin-top: 4px;
        padding: 10px 18px;
        gap: 10px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) .utility-form-title {
        font-size: 1.5rem;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) .utility-form-copy {
        font-size: 0.9375rem;
        line-height: 1.35;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) :is(#authShell, #authForm) {
        gap: 10px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) .tg-portal-trial-note {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #authShell > .tg-turnstile:empty {
        margin-top: -10px;
    }

    /* Buying a plan: the plan row says what is being bought, so the line under the heading
       (which only says checkout is next) gives up its room to it. */
    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)):has(#portalPlanNote:not([hidden])) .utility-form-copy {
        display: none;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #authShell > .tg-portal-order {
        padding: 4px 12px;
        font-size: 0.875rem;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)):has(#portalPlanNote:not([hidden])) :is(#mainContent, #authShell, #authForm) {
        gap: 8px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)):has(#portalPlanNote:not([hidden])) #mainContent {
        padding-block: 8px;
    }

    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) #authShell .btn-social {
        min-height: 40px;
    }
}

@media (max-width: 600px) and (max-height: 760px) {
    html[data-theme] body[data-page='account']:not(.is-app-shell):has(#authShell:not(.is-hidden)) .tg-portal-sitenav {
        display: none;
    }
}

/* The TV-linking page on a short phone: Create account fits too. The password rule moves into
   the box's placeholder, the step dots lose their caption, and the card packs tighter. */
@media (max-height: 760px) {
    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster']:not(.is-app-shell) .entry-form {
        gap: 10px;
        margin-top: 2px;
        padding: 10px 18px;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .auth-form {
        gap: 10px;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] #passwordHint {
        display: none;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper {
        padding-bottom: 0;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .stepper-step[data-state='current'] .stepper-label {
        position: absolute;
        inset: auto;
        width: 1px;
        height: 1px;
        clip-path: inset(50%);
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] :is(.auth-form > #otpRequestButton, .mode-switch-button:not(.is-active)) {
        min-height: 36px;
    }

    html[data-theme] body.utility-page[data-page='device-login'][data-brand='poster'] .consent-copy {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* The consent and "Keep me signed in" are the same kind of row: same box, same text size. */
html[data-theme] body[data-page='account']:not(.is-app-shell) #authForm :is(.consent-field, .remember-field) {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875rem;
    line-height: 1.45;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authForm .consent-field.is-hidden {
    display: none;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authForm :is(.consent-field, .remember-field) input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
}

/* The emailed code (verifying a new account, or resetting a password): one question.
   "Verify your email" is the heading, so the page heading above it, the notice that repeats
   "check your email" and the plan row step aside; the two ways out are links under the button. */
html[data-theme] body[data-page='account']:not(.is-app-shell) main:has(#recoveryCodePanel:not(.is-hidden)) .portal-topbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

html[data-theme] body[data-page='account']:not(.is-app-shell) main:has(#recoveryCodePanel:not(.is-hidden)) :is(#statusBanner[data-kind='info'], #portalPlanNote) {
    display: none;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    text-align: center;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel > * {
    grid-column: 1 / -1;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel .section-title {
    margin: 0 0 6px;
    font-family: var(--tg-font-display);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel .section-copy {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel #recoveryCodeForm .field {
    text-align: start;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel > #recoveryCodeResend {
    grid-column: 1;
    justify-self: start;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel > #recoveryCodeBack {
    grid-column: 2;
    justify-self: end;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel > :is(#recoveryCodeResend, #recoveryCodeBack) {
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: #c6d1ff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    html[data-theme] body[data-page='account']:not(.is-app-shell) #recoveryCodePanel:not(.is-hidden) {
        animation: tg-step-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

/* What the 7-day trial gives, as one line under the button, only while creating an account.
   The heading copy already says "7 days of Premium free". */
.tg-portal-trial {
    display: none;
    order: 2;
}

#authShell:has(#authForm:not(.is-hidden) #confirmPasswordField:not(.is-hidden)) .tg-portal-trial {
    display: block;
}

/* Someone who chose a paid plan is buying, not trialling: the plan note wins. */
#authShell#authShell#authShell:has(#portalPlanNote:not([hidden])) .tg-portal-trial {
    display: none;
}

.tg-portal-trial-note {
    margin: 0;
    color: var(--tg-text-faint);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}

/* The tick box above the button is the agreement while creating an account, so the
   "By continuing" line under it would say it twice. */
html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell > .auth-legal {
    order: 4;
    margin: 0;
    text-align: center;
}

html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell:has(#authForm:not(.is-hidden) #confirmPasswordField:not(.is-hidden)) > .auth-legal {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    html[data-theme] body[data-page='account']:not(.is-app-shell) #authShell:not(.is-hidden) > :is(.auth-form, .social-auth, .tg-portal-order):not(.is-hidden),
    html[data-theme] body[data-page='account']:not(.is-app-shell) #authForm .consent-field:not(.is-hidden),
    #authShell:has(#authForm:not(.is-hidden) #confirmPasswordField:not(.is-hidden)) .tg-portal-trial {
        animation: tg-step-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

/* The plan picked on /pricing, its price and what happens next. */
.tg-portal-order {
    display: grid;
    gap: var(--tg-space-2);
    padding: 16px 18px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius);
    background: var(--tg-ink-2);
}

.tg-portal-order > * {
    margin: 0;
}

.tg-portal-order-label {
    color: var(--tg-text-faint);
    font-family: var(--tg-font-display);
    font-size: var(--tg-size-small);
    font-weight: 600;
}

.tg-portal-order-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.tg-portal-order-plan strong {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 1.15rem;
}

.tg-portal-order-plan span {
    color: var(--tg-text-soft);
}

.tg-portal-order-next {
    display: grid;
    gap: 4px;
    margin: 4px 0 0;
    padding-left: 1.25em;
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
}

/* The overview plan card's way to Manage billing and Cancel renewal. */
html[data-theme] body[data-page='account'] .portal-plan-card .tg-portal-billing-link {
    align-self: flex-start;
    margin-top: var(--tg-space-2);
}

/* ===== Reseller sign-in: who it is for ================================ */

.tg-portal-who {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-ink-2);
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
    line-height: 1.55;
}

.tg-portal-who a {
    color: #c6d1ff;
    font-weight: 600;
}