@layer tokens, base, components, utilities;

@layer tokens {
    :root {
        --sdp-burgundy: #2a0a0e;
        --sdp-red: #e30613;
        --sdp-red-deep: #b80510;
        --sdp-amber: #f0a020;
        --sdp-gold: #f5c518;
        --sdp-ink: #0c0406;
        --sdp-text: #f7f3f0;
        --sdp-text-secondary: rgba(247, 243, 240, 0.78);
        --sdp-text-muted: rgba(247, 243, 240, 0.55);
        --sdp-line: rgba(255, 255, 255, 0.14);
        --sdp-surface: rgba(54, 11, 11, 0.64);
        --sdp-field-bg: #ffffff;
        --sdp-field-text: #1a1012;
        --sdp-field-placeholder: rgba(26, 16, 18, 0.42);
        --sdp-blur: 8px;
        --sdp-radius: 14px;
        --sdp-radius-sm: 8px;
        --sdp-control-h: 2.625em;
        --sdp-max: 26.5rem;
        --sdp-font: "Manrope", "Segoe UI", system-ui, sans-serif;
        --sdp-display: "Syne", "Manrope", system-ui, sans-serif;
        --sdp-text-scale: clamp(0.8125rem, 0.7rem + 0.6vw, 0.9375rem);
    }
}

@layer base {
    html {
        color-scheme: dark;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: clip;
    }

    .sdp-app {
        min-block-size: 100vh;
        max-inline-size: 100%;
        margin: 0;
        overflow-x: clip;
        color: var(--sdp-text);
        font-family: var(--sdp-font);
        font-size: var(--sdp-text-scale);
        font-weight: 400;
        line-height: 1.45;
        background: var(--sdp-ink);
    }

    .sdp-app :where(a, button, input, label, select, textarea) {
        font: inherit;
    }

    .sdp-atmosphere {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        background: var(--sdp-burgundy);
    }

    .sdp-atmosphere__stage {
        position: absolute;
        inset: -4%;
        background-color: var(--sdp-burgundy);
        background-size: cover;
        background-position: center 28%;
        background-repeat: no-repeat;
        opacity: 0;
        will-change: opacity, transform;
        transition: opacity 0.35s ease;
    }

    .sdp-atmosphere__stage.is-active {
        z-index: 1;
    }

    .sdp-atmosphere__stage[data-stage="0"] {
        opacity: 1;
    }

    .sdp-atmosphere__shade {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(8, 2, 4, 0.04) 0%,
            rgba(8, 2, 4, 0.1) 55%,
            rgba(8, 2, 4, 0.18) 100%
        );
    }

    .sdp-atmosphere__trail {
        position: absolute;
        inset: 0;
        z-index: 3;
        background: linear-gradient(
            115deg,
            transparent 0%,
            rgba(240, 160, 32, 0.05) 42%,
            transparent 58%,
            rgba(227, 6, 19, 0.06) 78%,
            transparent 100%
        );
        mix-blend-mode: screen;
        opacity: 0.7;
        animation: sdp-trail 14s ease-in-out infinite alternate;
    }

    @keyframes sdp-trail {
        from { transform: translate3d(-2%, 0, 0) scale(1.02); opacity: 0.45; }
        to { transform: translate3d(2%, 1%, 0) scale(1.05); opacity: 0.8; }
    }

    .sdp-page {
        position: relative;
        z-index: 1;
        inline-size: min(100%, calc(var(--sdp-max) + 2.5rem));
        margin-inline: auto;
        padding: 3.25rem 1.15rem 2.75rem;
        padding-block-start: max(3.25rem, env(safe-area-inset-top, 0px));
        padding-block-end: max(2.75rem, env(safe-area-inset-bottom, 0px));
    }
}

@layer components {
    .sdp-brand {
        display: flex;
        justify-content: center;
        margin-block-end: 1rem;
        animation: sdp-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .sdp-logo {
        display: block;
        inline-size: min(100%, 7.5rem);
        max-inline-size: 100%;
        block-size: auto;
        filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
    }

    .sdp-masthead {
        max-inline-size: var(--sdp-max);
        margin: 0 auto 1.1rem;
        text-align: center;
        animation: sdp-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    }

    .sdp-masthead__title {
        margin: 0 0 0.35em;
        font-family: var(--sdp-display);
        font-size: clamp(1.15em, 1em + 1.4vw, 1.45em);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.2;
        text-wrap: balance;
    }

    .sdp-masthead__lede {
        margin: 0;
        color: var(--sdp-text-secondary);
        font-size: 0.93em;
        text-wrap: pretty;
    }

    .sdp-surface {
        max-inline-size: var(--sdp-max);
        margin-inline: auto;
        padding: 1.25em 1.15em 1.35em;
        border: 1px solid var(--sdp-line);
        border-radius: var(--sdp-radius);
        background: var(--sdp-surface);
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        animation: sdp-rise 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .sdp-surface {
            backdrop-filter: blur(var(--sdp-blur));
            -webkit-backdrop-filter: blur(var(--sdp-blur));
        }
    }

    .sdp-panel__title {
        margin: 0 0 0.2em;
        font-family: var(--sdp-display);
        font-size: 1.12em;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .sdp-panel__copy {
        margin: 0 0 1.05em;
        color: var(--sdp-text-secondary);
        font-size: 0.87em;
    }

    .sdp-section {
        margin-block-end: 1.15em;
        padding-block-end: 0.15em;
    }

    .sdp-section:last-of-type {
        margin-block-end: 0;
    }

    .sdp-section__label {
        margin: 0 0 0.65em;
        color: var(--sdp-amber);
        font-size: 0.73em;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .sdp-field {
        display: grid;
        gap: 0.3em;
        margin-block-end: 0.7em;
    }

    .sdp-field:last-child {
        margin-block-end: 0;
    }

    .sdp-field--reveal {
        max-height: 0;
        margin-block-end: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-0.4em);
        transition:
            max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.22s ease,
            transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            margin-block-end 0.28s ease;
        pointer-events: none;
    }

    .sdp-field--reveal.is-open {
        max-height: 5.5em;
        margin-block-end: 0.7em;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .sdp-label {
        color: var(--sdp-text);
        font-size: 0.8em;
        font-weight: 600;
    }

    .sdp-hint {
        color: var(--sdp-text-muted);
        font-size: 0.77em;
    }

    .sdp-consent {
        margin: 0.85em 0 0;
        color: var(--sdp-text-muted);
        font-size: 0.77em;
        line-height: 1.45;
    }

    .sdp-consent a {
        color: var(--sdp-text);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

    .sdp-consent a:hover {
        color: #fff;
    }

    .sdp-consent a:focus-visible {
        outline: 2px solid var(--sdp-gold);
        outline-offset: 2px;
    }

    .sdp-input,
    .sdp-select {
        box-sizing: border-box;
        min-block-size: var(--sdp-control-h);
        inline-size: 100%;
        padding: 0.35em 0.75em;
        border: 1px solid transparent;
        border-radius: var(--sdp-radius-sm);
        background: var(--sdp-field-bg);
        color: var(--sdp-field-text);
        font-size: 1em;
        outline: none;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .sdp-select {
        appearance: none;
        background-image:
            linear-gradient(45deg, transparent 50%, #5a4548 50%),
            linear-gradient(135deg, #5a4548 50%, transparent 50%);
        background-position:
            calc(100% - 1.05em) calc(50% - 0.15em),
            calc(100% - 0.7em) calc(50% - 0.15em);
        background-size: 0.35em 0.35em, 0.35em 0.35em;
        background-repeat: no-repeat;
        padding-inline-end: 2em;
    }

    .sdp-input::placeholder {
        color: var(--sdp-field-placeholder);
    }

    .sdp-input:hover,
    .sdp-select:hover {
        border-color: rgba(240, 160, 32, 0.35);
    }

    .sdp-input:focus-visible,
    .sdp-select:focus-visible {
        border-color: var(--sdp-amber);
        box-shadow:
            0 0 0 3px rgba(240, 160, 32, 0.28),
            0 1px 0 rgba(0, 0, 0, 0.06);
        transform: translateY(-1px);
    }

    .sdp-input.is-invalid,
    .sdp-select.is-invalid {
        border-color: var(--sdp-red);
        box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.18);
    }

    /* intl-tel-input — white fields; opaque dark dropdown */
    .sdp-field .iti {
        display: block;
        inline-size: 100%;
        --iti-border-color: transparent;
        --iti-hover-color: rgba(26, 16, 18, 0.06);
        --iti-text-color: #1a1012;
        --iti-dialcode-color: rgba(26, 16, 18, 0.72);
        --iti-dropdown-bg: #1a080a;
        --iti-country-selector-bg: #ffffff;
        --iti-icon-color: rgba(26, 16, 18, 0.55);
        --iti-search-background-color: #140608;
        --iti-search-border-color: rgba(255, 255, 255, 0.12);
        --iti-search-placeholder-color: rgba(246, 242, 239, 0.35);
        --iti-search-text-color: #f6f2ef;
    }

    .sdp-field .iti__tel-input.sdp-input {
        inline-size: 100%;
    }

    .sdp-field .iti__selected-country {
        color: #1a1012;
    }

    .sdp-field .iti__selected-dial-code {
        color: rgba(26, 16, 18, 0.72);
    }

    .sdp-field .iti__selected-country-primary {
        background: #ffffff;
        border-radius: var(--sdp-radius-sm) 0 0 var(--sdp-radius-sm);
    }

    .sdp-field .iti__selected-country-primary:hover,
    .sdp-field .iti__selected-country-primary:focus {
        background: #f7f3f0;
    }

    .sdp-app .iti--fullscreen-popup,
    .sdp-app .iti--detached-country-selector {
        --iti-border-color: rgba(255, 255, 255, 0.12);
        --iti-hover-color: rgba(255, 255, 255, 0.08);
        --iti-text-color: #f6f2ef;
        --iti-dialcode-color: rgba(246, 242, 239, 0.55);
        --iti-dropdown-bg: #1a080a;
        --iti-country-selector-bg: #1a080a;
        --iti-icon-color: rgba(246, 242, 239, 0.65);
        --iti-search-background-color: #140608;
        --iti-search-border-color: rgba(255, 255, 255, 0.12);
        --iti-search-placeholder-color: rgba(246, 242, 239, 0.35);
        --iti-search-text-color: #f6f2ef;
        z-index: 40;
    }

    .sdp-app .iti__country-selector {
        background-color: #1a080a !important;
        background-image: none !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #f6f2ef;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
        opacity: 1;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .sdp-app .iti__search-input-wrapper {
        background-color: #140608;
    }

    .sdp-app .iti__search-input {
        background: #140608 !important;
        color: #f6f2ef;
        border: 0;
        outline: none;
    }

    .sdp-app .iti__search-input::placeholder {
        color: rgba(246, 242, 239, 0.35);
    }

    .sdp-app .iti__country {
        color: #f6f2ef;
    }

    .sdp-app .iti__country:hover,
    .sdp-app .iti__country.iti__highlight {
        background: rgba(240, 160, 32, 0.18);
    }

    .sdp-app .iti__dial-code {
        color: rgba(246, 242, 239, 0.55);
    }

    .sdp-app .iti__divider {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .sdp-field .sdp-input.iti__tel-input:focus-visible {
        border-color: var(--sdp-amber);
        box-shadow:
            0 0 0 3px rgba(240, 160, 32, 0.28),
            0 1px 0 rgba(0, 0, 0, 0.06);
    }

    .sdp-actions {
        display: grid;
        gap: 0.55em;
        margin-block-start: 1.15em;
    }

    .sdp-login-prompt {
        margin: 0;
        color: var(--sdp-text-muted);
        font-size: 0.87em;
        text-align: center;
    }

    .sdp-login-prompt a {
        color: var(--sdp-text);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

    .sdp-login-prompt a:hover {
        color: #fff;
    }

    .sdp-login-prompt a:focus-visible {
        outline: 2px solid var(--sdp-gold);
        outline-offset: 2px;
    }

    .sdp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-block-size: 2.75em;
        padding: 0.5em 1em;
        border: 1px solid transparent;
        border-radius: var(--sdp-radius-sm);
        color: #fff;
        font-size: 0.96em;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

    .sdp-btn:focus-visible {
        outline: 2px solid var(--sdp-gold);
        outline-offset: 2px;
    }

    .sdp-btn--primary {
        background: var(--sdp-red);
        box-shadow: 0 10px 28px rgba(227, 6, 19, 0.35);
    }

    .sdp-btn--primary:hover:not(:disabled) {
        background: var(--sdp-red-deep);
        transform: translateY(-1px);
        box-shadow: 0 14px 32px rgba(227, 6, 19, 0.42);
    }

    .sdp-btn--primary:active:not(:disabled) {
        transform: translateY(0);
    }

    .sdp-btn--ghost {
        border-color: var(--sdp-line);
        background: transparent;
        color: var(--sdp-text);
        font-weight: 600;
        box-shadow: none;
    }

    .sdp-btn--ghost:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.06);
    }

    .sdp-alert {
        margin-block-end: 0.85em;
        padding: 0.6em 0.75em;
        border: 1px solid color-mix(in srgb, var(--sdp-red) 40%, white);
        border-radius: var(--sdp-radius-sm);
        background: rgba(227, 6, 19, 0.18);
        color: var(--sdp-text);
        font-size: 0.87em;
    }

    .sdp-alert ul {
        margin: 0;
        padding-inline-start: 1rem;
    }

    .sdp-resume {
        max-inline-size: var(--sdp-max);
        margin: 1.25rem auto 0;
        padding-block-start: 1.15rem;
        border-block-start: 1px solid var(--sdp-line);
    }

    .sdp-home {
        text-align: center;
    }

    .sdp-masthead--home {
        margin-block-end: 2rem;
    }

    .sdp-home-menu {
        display: grid;
        gap: 0.9em;
        max-inline-size: min(22rem, 100%);
        margin-inline: auto;
        font-size: 1em;
        padding-block-start: 0.5em;
    }

    .sdp-btn--menu {
        min-block-size: 3.1em;
        border-radius: 12px;
        font-size: 1.05em;
        font-weight: 700;
        letter-spacing: 0.01em;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    }

    .sdp-btn--soon {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(92, 84, 80, 0.82);
        color: rgba(255, 255, 255, 0.92);
        font-weight: 700;
        cursor: default;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
        pointer-events: none;
        user-select: none;
    }

    .sdp-btn--menu[aria-disabled="true"].sdp-btn--primary {
        pointer-events: none;
        user-select: none;
        cursor: default;
    }

    .sdp-masthead__subtitle {
        margin: 0.15em 0 0;
        font-family: var(--sdp-display);
        font-size: 1.15em;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .sdp-masthead--programme {
        margin-block-end: 1.15em;
    }

    .sdp-programme {
        max-inline-size: var(--sdp-max);
        margin-inline: auto;
        font-size: 1em;
    }

    .sdp-programme-card {
        margin-block-end: 0.85em;
        padding: 1em 1.05em;
        border: 1px solid var(--sdp-line);
        border-radius: var(--sdp-radius);
        background: var(--sdp-surface);
        box-shadow:
            0 14px 36px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        text-align: center;
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .sdp-programme-card {
            backdrop-filter: blur(var(--sdp-blur));
            -webkit-backdrop-filter: blur(var(--sdp-blur));
        }
    }

    .sdp-programme-card__time {
        margin: 0 0 0.65em;
        color: var(--sdp-text);
        font-size: 1em;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: underline;
        text-underline-offset: 0.2em;
        text-decoration-thickness: 1px;
    }

    .sdp-programme-card__items {
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--sdp-text);
        font-size: 0.95em;
        font-weight: 500;
        line-height: 1.55;
        text-wrap: pretty;
    }

    .sdp-programme-card__items li + li {
        margin-block-start: 0.15em;
    }

    .sdp-home .sdp-qr-frame {
        margin-inline: auto;
        inline-size: min(11.5rem, 58vw);
    }

    .sdp-home .sdp-qr-target,
    .sdp-home .sdp-qr-frame :is(canvas, img, table) {
        inline-size: 100% !important;
        block-size: auto !important;
    }

    .sdp-home-hero {
        display: grid;
        justify-items: center;
        gap: 0.45rem;
        text-align: center;
    }

    .sdp-home-hero :is(h1, h2) {
        margin: 0.85em 0 0;
        font-family: var(--sdp-display);
        font-size: 1.2em;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .sdp-home-hero p,
    .sdp-home-meta,
    .sdp-home-meta a {
        margin: 0;
        color: var(--sdp-text-secondary);
        font-size: 0.87em;
        text-decoration: none;
    }

    .sdp-profile {
        margin: 0 0 0.25rem;
        padding: 0;
    }

    .sdp-topnav {
        position: relative;
        min-block-size: 1.5rem;
        margin-block-end: 0.35rem;
    }

    .sdp-back {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: 999px;
        color: #fff;
        text-decoration: none;
        transition: background 0.15s ease;
    }

    .sdp-back:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .sdp-back:focus-visible {
        outline: 2px solid var(--sdp-gold);
        outline-offset: 2px;
    }

    .sdp-back__icon {
        display: block;
        inline-size: 0.65rem;
        block-size: 0.65rem;
        border-inline-start: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        transform: rotate(45deg);
        margin-inline-start: 0.2rem;
    }

    .sdp-masthead--profile {
        margin-block-end: 1.35rem;
    }

    .sdp-profile-page {
        max-inline-size: var(--sdp-max);
        margin-inline: auto;
        text-align: center;
        font-size: 1em;
    }

    .sdp-profile-page__name {
        margin: 0 0 0.75em;
        font-family: var(--sdp-display);
        font-size: 1.28em;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.25;
        text-wrap: balance;
        padding-inline: 0.25em;
    }

    .sdp-profile-page__qr {
        display: flex;
        justify-content: center;
        margin-block-end: 1em;
    }

    .sdp-profile-page__qr .sdp-qr-frame {
        inline-size: min(12.5rem, 58vw);
        padding: 0.75em;
        border-radius: 12px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    }

    .sdp-profile-page__qr .sdp-qr-target,
    .sdp-profile-page__qr .sdp-qr-frame :is(canvas, img, table) {
        inline-size: 100% !important;
        block-size: auto !important;
    }

    .sdp-profile-card {
        margin-block-end: 1.15em;
        padding: 0.85em 0.95em;
        border: 1px solid var(--sdp-line);
        border-radius: var(--sdp-radius);
        background: var(--sdp-surface);
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        text-align: start;
        font-size: 1em;
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .sdp-profile-card {
            backdrop-filter: blur(var(--sdp-blur));
            -webkit-backdrop-filter: blur(var(--sdp-blur));
        }
    }

    .sdp-profile-card__list {
        margin: 0;
        padding: 0;
    }

    .sdp-profile-card__row {
        display: grid;
        grid-template-columns: 6.75em minmax(0, 1fr);
        column-gap: 0.35em;
        align-items: start;
        padding: 0.4em 0;
    }

    .sdp-profile-card__row + .sdp-profile-card__row {
        border-block-start: 0;
    }

    .sdp-profile-card__row dt {
        margin: 0;
        color: var(--sdp-text-secondary);
        font-size: 0.95em;
        font-weight: 500;
        line-height: 1.4;
    }

    .sdp-profile-card__row dd {
        margin: 0;
        min-inline-size: 0;
        color: var(--sdp-text);
        font-size: 0.95em;
        font-weight: 600;
        line-height: 1.4;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .sdp-profile-card__sep {
        margin-inline-end: 0.35em;
        color: var(--sdp-text-muted);
        font-weight: 500;
    }

    .sdp-profile-card__value--email {
        font-size: 0.9em;
        overflow-wrap: anywhere;
        word-break: break-all;
        hyphens: none;
    }

    .sdp-actions--profile {
        gap: 0.7em;
    }

    .sdp-actions--profile .sdp-btn {
        min-block-size: 2.85em;
        border-radius: 10px;
        font-size: 1em;
    }

    @media (max-width: 380px) {
        .sdp-app {
            font-size: clamp(0.78rem, 0.68rem + 0.7vw, 0.875rem);
        }

        .sdp-profile-card__row {
            grid-template-columns: 5.9em minmax(0, 1fr);
        }

        .sdp-profile-page__qr .sdp-qr-frame {
            inline-size: min(11.25rem, 56vw);
        }
    }

    .sdp-profile__row {
        display: grid;
        gap: 0.15em;
        padding: 0.65em 0;
        border-block-end: 1px solid var(--sdp-line);
    }

    .sdp-profile__row:last-child {
        border-block-end: 0;
    }

    .sdp-profile__row dt {
        margin: 0;
        color: var(--sdp-text-muted);
        font-size: 0.73em;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .sdp-profile__row dd {
        margin: 0;
        color: var(--sdp-text);
        font-size: 1em;
        font-weight: 500;
        word-break: break-word;
    }

    .sdp-qr-frame {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 0.75rem;
        border-radius: var(--sdp-radius-sm);
        color-scheme: light;
        forced-color-adjust: none;
    }

    .sdp-qr-frame :is(canvas, img, table) {
        background-color: #ffffff !important;
    }

    .sdp-empty {
        margin: 0;
        color: var(--sdp-text-secondary);
        text-align: center;
        font-size: 0.93em;
    }

    .sdp-guest-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        max-inline-size: var(--sdp-max);
        margin: 0 auto 1rem;
    }

    .sdp-guest-head .sdp-btn {
        min-inline-size: 4.5rem;
    }

    .sdp-guest-head__actions {
        display: flex;
        flex-shrink: 0;
        gap: 0.5rem;
    }

    .sdp-block + .sdp-block {
        margin-block-start: 1.1rem;
        padding-block-start: 1.1rem;
        border-block-start: 1px solid var(--sdp-line);
    }

    .sdp-actions--full {
        inline-size: 100%;
    }

    .sdp-masthead--flush {
        margin-block-end: 0;
        text-align: start;
    }

    @keyframes sdp-rise {
        from {
            opacity: 0;
            transform: translate3d(0, 1.25rem, 0);
        }
        55% {
            opacity: 1;
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}

@layer utilities {
    @media (pointer: coarse) {
        .sdp-input,
        .sdp-select,
        .sdp-btn {
            min-block-size: 2.75em;
        }
    }

    @media (max-width: 480px) {
        .sdp-page {
            padding: 2.75rem 1.05rem 1.85rem;
            padding-block-start: max(2.75rem, env(safe-area-inset-top, 0px));
            padding-block-end: max(1.85rem, env(safe-area-inset-bottom, 0px));
        }

        .sdp-surface {
            padding: 1.05rem 0.95rem 1.15rem;
        }

        .sdp-logo {
            inline-size: min(100%, 6.5rem);
        }
    }

    @media (max-width: 480px) {
        .sdp-app--home .sdp-page {
            padding-block-start: max(2.75rem, env(safe-area-inset-top, 0px));
            padding-block-end: max(1.5rem, env(safe-area-inset-bottom, 0px));
        }

        .sdp-app--home .sdp-brand {
            margin-block-end: 0.75rem;
        }

        .sdp-app--home .sdp-logo {
            inline-size: min(100%, 6rem);
        }

        .sdp-app--home .sdp-masthead {
            margin-block-end: 1.15rem;
        }

        .sdp-app--home .sdp-home {
            padding: 1.25rem 1.15rem 1.35rem;
        }

        .sdp-app--home .sdp-home-hero {
            gap: 0.4rem;
        }

        .sdp-app--home .sdp-home-hero :is(h1, h2) {
            margin-block-start: 0.9rem;
        }

        .sdp-app--home .sdp-home-meta + .sdp-home-meta {
            margin-block-start: 0.15rem;
        }

        .sdp-app--home .sdp-actions {
            margin-block-start: 1.15rem;
            gap: 0.55rem;
        }

        .sdp-app--home .sdp-home .sdp-qr-frame {
            inline-size: min(11.25rem, 54vw);
            padding: 0.7rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .sdp-app *,
        .sdp-app *::before,
        .sdp-app *::after {
            transition: none !important;
            animation: none !important;
        }

        .sdp-atmosphere__stage {
            transform: none !important;
        }

        .sdp-field--reveal {
            transform: none !important;
        }
    }

    @media (forced-colors: active) {
        .sdp-surface,
        .sdp-input,
        .sdp-select,
        .sdp-btn {
            border: 1px solid CanvasText;
            background: Canvas;
            color: CanvasText;
            backdrop-filter: none;
            box-shadow: none;
        }

        .sdp-btn--primary {
            outline: 2px solid Highlight;
        }
    }
}