@import url('colori.css');

:root {
    color-scheme: light dark;
    --bg-blend: hard-light;
    --bg-image: url('/images/Colori-Background.svg');
    --tier-pro-bg: rgba(255, 240, 220, 0.85);
    --section-danger-bg: rgba(255,0,0,0.05);
    --prores-logo: url('/images/apple-prores-logo.png');
    --section-danger-border: rgba(255,0,0, 0.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-blend: unset;
        --tier-pro-bg: rgba(60, 35, 15, 0.85);
        --section-danger-bg: rgba(255,0,0,0.05);
        --prores-logo: url('/images/apple-prores-logo-black.png');
        --section-danger-border: rgba(255, 0, 0, 0.1);
    }
}

body {
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-size: 100vw auto;
    background-position: 40vw -52vw;
    background-attachment: fixed;
    background-blend-mode: var(--bg-blend);
}

    /* Danger variant — red colour, plus extra top margin so the heading reads as
   a clear separator before the destructive section. Margin exceeds the 36px
   bottom margin of the preceding section so collapsing margins settle on the
   larger value. */
    .section-heading--danger {
        color: var(--error);
        margin-top: 64px;
        opacity: 0.65;
    }

   
    /* Slight red tint for sections containing destructive actions */
    .section--danger {
        background-color: var(--section-danger-bg);
        border-color: var(--section-danger-border);
    }
        /* Row labels inside a danger section pick up the error colour so the
   destructive action reads as red across label, button, and tint. */
        .section--danger .detail-row__label {
            color: var(--error);
            /* Smoothly transition the colour when it's overridden (e.g. the
       Delete Account label switching to the default text colour as the
       PRO-block explainer expands underneath). */
            transition: color 0.35s ease;
        }
        /* When the PRO-block is open, drop the danger-red on the Delete Account
   label so it reads as informational rather than alarming. Scoped to the
   delete-confirm row so sibling rows in the danger section (e.g. Cancel
   Subscription) keep their red labels. */
        .section--danger:has(.delete-pro-block-wrap.is-open) .delete-confirm-row .detail-row__label {
            color: var(--text-color);
        }
        /* All action cells in the danger section pin to column 3 so they line up
   regardless of how many cells each row has. Without this, the Delete row
   (which has a hidden field cell in column 2) would put its action in
   column 3, while sibling rows with only a label + action would put theirs
   in column 2, breaking the visual alignment of the buttons. Pinning to
   column 3 also stops the Delete button from shifting right when its field
   cell appears during the confirmation flow. */
        .section--danger .detail-row__action {
            grid-column: 3;
        }
    /* Field cell: input on top with a small hint slot beneath it. Hidden via
   the [hidden] attribute (display: none) when not confirming, so it
   collapses out of column 2 entirely. */
    .delete-confirm-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .delete-confirm-input {
        box-sizing: border-box;
        height: 36px;
        width: 200px;
        padding: 0 12px;
        border: 1px solid var(--input-border);
        border-radius: 8px;
        background-color: var(--input-bg);
        color: var(--text-color);
        font-family: inherit;
        font-size: 14px;
        outline: none;
    }

        .delete-confirm-input:focus {
            border-color: var(--input-border-focus);
        }

    .delete-confirm-hint {
        font-size: 12px;
        color: var(--error);
    }
    /* Help text revealed after the user clicks Reset — sits below the row,
   aligned with the section's left padding. Wrapping the paragraph in a grid
   container whose template-rows we transition from 0fr to 1fr is the cleanest
   way to animate between "collapsed" and "auto" height without measuring. */
    .reset-password-help-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s ease;
    }

        .reset-password-help-wrap.is-open {
            grid-template-rows: 1fr;
        }
    /* Inner clipping container — the grid item.
   `overflow: hidden` both clips overflow to the row track's height and
   establishes a block formatting context so the paragraph's margin-top is
   contained (rather than escaping via margin-collapse) and animates with the
   reveal. `min-height: 0` lets the grid track actually shrink to 0 — without
   this, the default `min-height: auto` would pin the row to the content's
   intrinsic size and the wrap would always reserve that space. */
    .reset-password-help-inner {
        overflow: hidden;
        min-height: 0;
    }

    .reset-password-help {
        /* Spacing above the help text lives *inside* the clipped inner wrapper
       (as margin, not padding) so it collapses to 0 when closed. Padding on
       a border-box element can't shrink below its declared value, which is
       why the previous structure left ~14px of stray space even when the
       wrap was closed. */
        margin: 14px 0 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-muted);
        max-width: 540px;
    }
    /* Delete-account PRO-block explainer — same collapsible-grid pattern as the
   reset password help, shown when a PRO user clicks Delete. Text colour
   picks up the error red so it reads as a block on the destructive action. */
    .delete-pro-block-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s ease;
    }

        .delete-pro-block-wrap.is-open {
            grid-template-rows: 1fr;
        }

    .delete-pro-block-inner {
        overflow: hidden;
        min-height: 0;
    }

    .delete-pro-block {
        margin: 6px 0 0;
        font-size: 14px;
        line-height: 1.5;
        /* Default text colour rather than the danger red — the explainer is only
       ever revealed when the wrap opens, and the user wanted both the label
       and this copy to read in the default colour at that point. */
        color: var(--text-color);
        max-width: 540px;
    }
    /* ── Profile section ──────────────────────────────────────────────────────── */

    .profile-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        text-align: center;
    }

    .profile-avatar {
        width: 126px;
        height: 126px;
        border-radius: 50%;
        background-color: var(--accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 54px;
        font-weight: 600;
        text-transform: uppercase;
        flex-shrink: 0;
        user-select: none;
        /* Perfect vertical centering of the initials: trim the font's half-leading
       (the asymmetric ascent/descent space inside the line-box) so flex centers
       the cap-height block itself rather than the full em-box. Without this,
       caps appear slightly above the geometric center. */
        line-height: 1;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
    }

    .profile-details {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .profile-name-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
        /* Lock row height so switching to the input doesn't grow the section.
       Matches the line-height of the displayed name (24px * 1.2). */
        min-height: 29px;
    }

    .profile-name-action {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .profile-name-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .profile-name {
        font-size: 24px;
        font-weight: 600;
        margin: 0;
        line-height: 1.2;
    }

    .profile-name-input {
        /* Slightly smaller and non-bold while editing */
        font-size: 18px;
        font-weight: 400;
        /* Match displayed name height exactly so the row — and therefore the
       section — stays the same size when entering edit mode. */
        box-sizing: border-box;
        height: 29px;
        padding: 0 14px;
        border: 1px solid var(--input-border);
        border-radius: 8px;
        background-color: var(--input-bg);
        color: var(--text-color);
        font-family: inherit;
        min-width: 0;
        width: 200px;
        max-width: 100%;
        outline: none;
        text-align: center;
    }

        .profile-name-input:focus {
            border-color: var(--input-border-focus);
        }

    .profile-email {
        color: var(--text-muted);
        font-size: 15px;
    }
    /* ── Detail rows (subscription / billing) ─────────────────────────────────── */

    .detail-grid {
        display: grid;
        grid-template-columns: 1fr auto auto;
    }
    /* Each row is itself a subgrid spanning all columns, so the border-top is one
   continuous line across the whole section. */
    .detail-row {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        column-gap: 24px;
        align-items: center;
    }
        /* Adds vertical spacing only between adjacent rows — the first row gets no
   extra padding, so the section's own padding still controls the gap from the
   top of the card to the first row. Matches the 32px gap the previous
   `padding: 16px 0` per-row rule produced (16px bottom + 16px top). */
        .detail-row + .detail-row {
            padding-top: 30px;
        }
        /* A hint (e.g. upgrade-pending or cancellation-scheduled note) breaks the
   adjacency above, so the row that follows it needs the same top padding
   repeated here to keep the gap consistent. */
        .subscription-hint + .detail-row {
            padding-top: 30px;
        }

    .detail-row__label {
        font-size: 16px;
        font-weight: 600;
    }

    .detail-row__value {
        font-size: 16px;
        color: var(--text-muted);
        text-align: center;
    }
    /* Pin the value to column 3 instead of letting it auto-place into column 2.
   Used when the row has no action button on its own (e.g. the Subscription
   "PRO" badge) so the value lines up horizontally with action buttons on
   sibling rows. */
    .detail-row__value--right {
        grid-column: 3;
    }

    .detail-row__action {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        /* Spacing between adjacent buttons (e.g. Delete + Cancel on the
       Delete Account row); no effect when there's only one child. */
        gap: 8px;
        grid-column: 3;
    }
    /* Danger modifier — swaps the orange accent for the error red. Designed to be
   applied alongside .btn--secondary so the outlined shape (transparent fill,
   1px border, border-compensated padding) is inherited; this rule just
   recolors. On hover the button fills solid red with white text, mirroring the
   secondary button's hover behavior. */
    .btn--danger {
        color: var(--error);
        border-color: var(--error);
    }

        .btn--danger:hover,
        .btn--danger:focus-visible {
            background-color: var(--error);
            color: #fff;
            border-color: var(--error);
        }
    /* ── Pricing tiers (Upgrade page) ─────────────────────────────────────────── */
    /* Small disclaimer that sits beneath the tier-grid on the Upgrade page. */
    .upgrade-disclaimer {
        margin: -12px auto 0;
        font-size: 13px;
        color: var(--text-muted);
        text-align: center;
    }

    .tier-grid {
        /* Flex (rather than grid) for the most predictable equal-height,
       top-aligned behavior across browsers. */
        display: flex;
        align-items: stretch;
        gap: 24px;
        /* ~90% of the previous 900px width */
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Tier reuses the .section glass-card styling; we just need to override the
   single-column width constraints and become equal-width flex children. */
    .section.tier {
        /* Equal width regardless of content, with min-width: 0 so long content
       can't push the tier wider than its flex share. */
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
        /* Smoothly transition border/shadow for tier hover states */
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .tier__title {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text-color);
        margin: 0;
        margin-bottom: 20px;
    }

    .tier__price {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 36px;
        font-weight: 600;
        margin: 0;
        line-height: 1.1;
    }

    .tier__price-meta {
        /* Currency code + frequency — visually subordinate to the amount */
        font-size: 14px;
        font-weight: 400;
        opacity: 0.5;
    }

    .tier__tagline {
        color: var(--text-muted);
        font-size: 15px;
        margin: 0;
    }

    .tier__cta {
        /* Full-width CTA inside the tier (.btn stretches as a flex child) */
        margin-top: 6px;
    }

    .tier__features {
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 15px;
    }

        .tier__features li {
            display: flex;
            align-items: center;
            gap: 10px;
            line-height: 1.5;
        }
    /* Icon slot has a fixed width so the text columns of every row line up,
   even when an icon is missing (e.g. the placeholder for ProRes). */
    /* Per-icon size override — drop this class on the icon span when a
   particular glyph needs to render bigger than the default 20px. */
    .tier__feature-icon--lg {
        transform: scale(1.8);
        transform-origin: center right;
    }
    /* Apple ProRes logo — wordmark, rendered via background-image rather than a
   text glyph. The URL is a theme-switched CSS variable so the black-on-light
   / white-on-dark variant resolves automatically. */
    .tier__feature-icon--prores {
        height: 14px;
        background-image: var(--prores-logo);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        /* Override the base .tier__feature-icon font sizing/opacity so the line
       box collapses to the image's height and the wordmark reads clearly. */
        transform: scale(1.3);
        transform-origin: center right;
    }

    .tier__feature-icon {
        flex-shrink: 0;
        width: 38px;
        font-size: 20px !important;
        /* Material Symbols variable font: font-weight maps to the `wght` axis */
        font-weight: 100 !important;
        /* Lock the FILL axis on in CSS too, so the icon renders solid even if a
       browser falls back to a different variable instance of the font. */
        font-variation-settings: 'FILL' 1;
        line-height: 1;
        color: var(--text-color);
        text-align: right;
    }
    /* ── PRO tier — subtle orange tint + hover affordance ─────────────────────── */

    .tier--pro {
        background-color: var(--tier-pro-bg);
        /* Positioning context + rounded clip for the shimmer overlay below */
        position: relative;
        overflow: hidden;
        /*border-color: rgb(255, 250, 240);*/
        /*box-shadow: 0 0 100px rgba(255, 128, 40, 0.2);*/
    }
        /* Diagonal white shimmer overlay — parked off-screen to the left by default
   and swept across by the keyframes when the Upgrade CTA is hovered.

   The pseudo-element extends 50% past each side of the card so the diagonal
   band's slanted top and bottom tails fit cleanly within it. Without this
   horizontal overhang, the band's lower-left tail is clipped by the pseudo's
   own left edge, which becomes visible as a sharp cut near the end of the
   sweep. (Parent's overflow: hidden still clips the pseudo to the card's
   rounded corners.) */
        .tier--pro::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -50%;
            right: -50%;
            background: linear-gradient( 115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60% );
            transform: translateX(-100%);
            pointer-events: none;
            z-index: 0;
        }
        /* Lift the card's content above the shimmer overlay */
        .tier--pro > * {
            position: relative;
            z-index: 1;
        }
        /* When the user hovers the "Upgrade to PRO" CTA inside the PRO tier, the
   whole card lights up: soft outer glow + a one-shot shimmer sweep. */
        .tier--pro:has(.tier__cta:hover) {
            /*border-color: var(--accent);*/
            box-shadow: 0 0 20px rgba(255, 128, 40, 0.3);
        }

            .tier--pro:has(.tier__cta:hover)::before {
                /* `forwards` holds the gradient at its off-screen-right end position so it
       doesn't visibly snap back when the hover ends — the next hover will
       restart the animation from -100%. */
                animation: tier-shimmer 1.0s ease forwards;
            }

    @keyframes tier-shimmer {
        from {
            transform: translateX(-50%);
        }

        to {
            transform: translateX(100%);
        }
    }
    
    /* ── Payment page (/account/payment) ──────────────────────────────────────── */
    /* Single-panel layout for the Paddle default-payment-link page. The Paddle
   overlay covers the page almost immediately, so this panel is only really
   seen in the moment before the overlay opens, and again if the visitor
   dismisses it — it exists to state what's happening and offer a way back in.
   Reuses the .section glass card; only the internal layout is defined here. */
    .payment-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        text-align: center;
    }

    .payment-panel__status {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        color: var(--text-muted);
        /* Matches the measure used by the other explanatory copy in this file
       (.reset-password-help, .subscription-hint). */
        max-width: 540px;
    }
    /* Unlike .tier__cta this button isn't the page's primary action — it's a
   re-entry point after the overlay is dismissed — so it sizes to its content
   rather than stretching. The centering and the non-stretch both come from
   the panel's `align-items: center`; this rule only adds the spacing. */
    .payment-panel__cta {
        margin-top: 6px;
    }

    /* ── Feedback messages ────────────────────────────────────────────────────── */

    .field-error {
        color: var(--error);
        font-size: 13px;
        display: block;
        margin-top: 6px;
    }

    .saved-banner {
        color: var(--success);
        font-size: 14px;
        margin-bottom: 16px;
    }
    /* Note shown under the Subscription row while IsUpgrading — spans every
   column of the detail-grid rather than sitting inside a single subgrid row.
   Matches .reset-password-help's type styling. */
    .subscription-hint {
        grid-column: 1 / -1;
        margin: 14px 0 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-muted);
        max-width: 540px;
    }
    /* ── Utilities ────────────────────────────────────────────────────────────── */

    [hidden] {
        display: none !important;
    }