/*
 * "See your welcome on a TV" lead magnet (frontend#24).
 * Host's-notebook style (mockups/website-redesign/5-hosts-notebook.jpg).
 * Everything is scoped under .tvp so it drops into the current page and the
 * coming redesign without touching either.
 *
 * .tvs* is the Roku v3 home screen (bottom-pills layout) at 1920x1080 logical
 * pixels, copied from roku-player v3 (TopBar, HomeScreen, BottomPillsNav,
 * theme.brs) and scaled to fit with a CSS transform (see tv-preview.js).
 */

@font-face {
    font-family: 'TVP Quicksand';
    src: url('/tv-preview/fonts/quicksand-medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'TVP Quicksand';
    src: url('/tv-preview/fonts/quicksand-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

.tvp {
    --tvp-sand: #F6EFE6;
    --tvp-sand-deep: #EFE4D6;
    --tvp-ink: #1E1E2E;
    --tvp-ink-soft: #55556A;
    --tvp-orange: #F26B21;
    --tvp-orange-dark: #D95A14;
    --tvp-amber: #F5A524;
    --tvp-line: #E2D5C4;
    --tvp-green: #1E8A5A;
    --tvp-red: #B4361C;
    --tvp-head: 'Nunito', 'DM Sans', system-ui, sans-serif;
    --tvp-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tvp-script: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

    position: relative;
    scroll-margin-top: 72px; /* clears the fixed .ws-nav */
    padding: 5.5rem 2rem 6rem;
    background:
        radial-gradient(ellipse 60% 70% at 85% 30%, rgba(255, 214, 160, 0.45), transparent 70%),
        radial-gradient(ellipse 50% 60% at 5% 90%, rgba(245, 165, 36, 0.10), transparent 70%),
        var(--tvp-sand);
    color: var(--tvp-ink);
    font-family: var(--tvp-body);
    overflow: hidden;
}

.tvp *, .tvp *::before, .tvp *::after { box-sizing: border-box; }
.tvp [hidden] { display: none !important; }
.tvp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.tvp-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tvp-inner { max-width: 1200px; margin: 0 auto; }

.tvp-step {
    display: grid;
    align-items: center;
    gap: 3.5rem;
}
.tvp-step-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tvp-step-2 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.tvp-step-3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; }
.tvp-step-3 .tvp-h { font-size: clamp(2rem, 3.4vw, 2.75rem); }

/* ---------- step marker: circled number + handwritten label ---------- */
.tvp-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1rem;
}
.tvp-num {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 2.5px solid var(--tvp-amber);
    border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
    color: var(--tvp-orange);
    font: 600 1.6rem/1 var(--tvp-script);
    transform: rotate(-4deg);
}
.tvp-script {
    position: relative;
    color: var(--tvp-orange);
    font: 600 1.85rem/1 var(--tvp-script);
    transform: rotate(-5deg);
    padding-bottom: 0.25rem;
}
.tvp-script::after {
    content: '';
    position: absolute;
    left: -2px; right: -6px; bottom: -4px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5C30 2.5 62 2 98 3.5' fill='none' stroke='%23F5A524' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---------- type ---------- */
.tvp-h {
    margin: 0 0 1rem;
    font: 800 clamp(2.1rem, 4.4vw, 3.5rem)/1.08 var(--tvp-head);
    letter-spacing: -0.025em;
    color: var(--tvp-ink);
    outline: none;
}
.tvp-h-sm { font-size: clamp(1.7rem, 3vw, 2.35rem); }
.tvp-mark {
    padding-bottom: 0.1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C45 4.5 120 3 197 6.5' fill='none' stroke='%23F5A524' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M18 12.5C70 9 130 8.5 185 10' fill='none' stroke='%23F5A524' stroke-width='2.5' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.32em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.tvp-lead {
    margin: 0 0 1.75rem;
    max-width: 34rem;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--tvp-ink-soft);
}
.tvp-help {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--tvp-ink-soft);
}
.tvp-help strong { color: var(--tvp-ink); font-weight: 600; }

/* ---------- form ---------- */
.tvp-form {
    display: flex;
    gap: 0.75rem;
    max-width: 36rem;
}
.tvp-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.tvp-field-icon {
    position: absolute;
    left: 1rem; top: 50%;
    width: 1.2rem; height: 1.2rem;
    transform: translateY(-50%);
    color: #8A8396;
    pointer-events: none;
}
.tvp-field input {
    width: 100%;
    height: 3.5rem;
    padding: 0 1rem 0 2.9rem;
    border: 1.5px solid var(--tvp-line);
    border-radius: 12px;
    background: #fff;
    color: var(--tvp-ink);
    font: 500 1rem var(--tvp-body);
    box-shadow: 0 1px 2px rgba(30, 30, 46, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tvp-field input::placeholder { color: #A39CAB; }
.tvp-field input:focus {
    outline: none;
    border-color: var(--tvp-orange);
    box-shadow: 0 0 0 4px rgba(242, 107, 33, 0.18);
}
.tvp-field input[aria-invalid="true"] { border-color: var(--tvp-red); }
.tvp-field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 54, 28, 0.16); }
.tvp-field input[readonly] { background: #FBF8F4; }

.tvp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    min-width: 11rem;
    height: 3.5rem;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 12px;
    background: var(--tvp-orange);
    color: #fff;
    font: 800 1.1rem/1 var(--tvp-head);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(242, 107, 33, 0.7);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tvp-btn svg { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.tvp-btn:hover { background: var(--tvp-orange-dark); transform: translateY(-1px); }
.tvp-btn:focus-visible {
    outline: 3px solid var(--tvp-ink);
    outline-offset: 3px;
}
.tvp-btn:disabled { cursor: progress; opacity: 0.85; transform: none; }
.tvp-btn[aria-busy="true"] svg { animation: tvp-nudge 0.9s ease-in-out infinite; }
@keyframes tvp-nudge { 50% { transform: translateX(4px); } }
.tvp-btn-lg {
    height: auto;
    min-height: 3.75rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.2rem;
    line-height: 1.25;
    text-align: left;
}

.tvp-link {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--tvp-ink);
    font: 600 0.95rem var(--tvp-body);
    text-decoration: underline;
    text-decoration-color: var(--tvp-amber);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}
.tvp-link:hover { color: var(--tvp-orange-dark); }
.tvp-link:focus-visible { outline: 3px solid var(--tvp-orange); outline-offset: 3px; border-radius: 4px; }

/* Status line: always reserves one line so messages don't push the page around. */
.tvp-status {
    min-height: 1.5em;
    margin: 0.6rem 0 0;
    max-width: 36rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tvp-ink-soft);
}
.tvp-status.is-error { color: var(--tvp-red); font-weight: 500; }
.tvp-status.is-error::before { content: '⚠ '; }

/* Turnstile runs invisibly (interaction-only); it only takes space when it needs a click. */
.tvp-turnstile { max-width: 36rem; }
.tvp-turnstile:not(:empty) { margin-top: 0.6rem; }

/* ---------- handwritten notes ---------- */
.tvp-note {
    position: absolute;
    margin: 0;
    color: var(--tvp-ink);
    font: 600 1.6rem/1.05 var(--tvp-script);
    transform: rotate(-8deg);
    pointer-events: none;
}
.tvp-note::after {
    content: '';
    position: absolute;
    width: 3.4rem; height: 2.4rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' fill='none' stroke='%23F5A524' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M55 5C52 22 38 33 10 33'/%3E%3Cpath d='M19 25l-10 8 11 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tvp-note-tv { right: -1rem; top: -2.6rem; text-align: right; }
.tvp-note-tv::after { right: 0.8rem; top: 100%; }
.tvp-note-cta { position: relative; margin: 1.75rem 0 0 auto; width: max-content; text-align: right; transform: rotate(-6deg); }
.tvp-note-cta::after { left: -3.8rem; top: -0.6rem; transform: scaleY(-1) rotate(10deg); }

/* ---------- TV frame ---------- */
.tvp-visual { position: relative; padding: 1.5rem 3.5rem 0 0; }
.tvp-tv { margin: 0; position: relative; }
.tvp-tv-bezel {
    padding: 1.1%;
    border-radius: 10px;
    background: linear-gradient(180deg, #26262C, #0E0E11 30%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 30px 60px -25px rgba(30, 30, 46, 0.55),
        0 12px 24px -12px rgba(30, 30, 46, 0.35);
}
.tvp-tv-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: #1A1A26;
}
.tvp-tv-stand {
    position: relative;
    height: clamp(14px, 2.6vw, 30px);
    display: flex;
    justify-content: center;
}
.tvp-tv-stand::before {
    content: '';
    width: 7%;
    height: 70%;
    background: linear-gradient(90deg, #1A1A1F, #34343B 50%, #1A1A1F);
}
.tvp-tv-stand span {
    position: absolute;
    bottom: 0;
    left: 32%; right: 32%;
    height: 30%;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #3A3A42, #141418);
    box-shadow: 0 10px 18px -6px rgba(30, 30, 46, 0.45);
}

/* step 1 teaser screen */
.tvp-tv-teaser > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.9) brightness(0.55);
}
.tvp-teaser-box {
    position: absolute;
    inset: 9% 7%;
    display: grid;
    place-items: center;
    border: 3px dashed var(--tvp-amber);
    border-radius: 6px;
}
.tvp-teaser-box img { width: 56%; height: auto; }

/* ---------- step 2 card ---------- */
.tvp-found { position: relative; }
.tvp-card {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(30, 30, 46, 0.04), 0 22px 44px -22px rgba(30, 30, 46, 0.35);
    transform: rotate(-1.2deg);
}
.tvp-card-photo {
    aspect-ratio: 16 / 10;
    margin: 0.7rem 0.7rem 0;
    overflow: hidden;
    border-radius: 10px;
    background: var(--tvp-sand-deep);
}
.tvp-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tvp-card-photo.is-empty img { display: none; }
.tvp-card-photo.is-empty {
    background:
        url('/tv-preview/logo-mark.svg') no-repeat center / 28%,
        var(--tvp-sand-deep);
}
.tvp-card-body { padding: 1rem 1.25rem 1.25rem; }
.tvp-card-title {
    margin: 0;
    font: 800 1.35rem/1.25 var(--tvp-head);
    color: var(--tvp-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tvp-card-place { margin: 0.25rem 0 0; color: var(--tvp-ink-soft); min-height: 1.4em; }
.tvp-card-found {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    color: var(--tvp-green);
    font: 700 1.05rem var(--tvp-body);
}
.tvp-card-found svg { width: 1.6rem; height: 1.6rem; }

/* ---------- step 3 ---------- */
.tvp-result-tv { position: relative; }
.tvp-credit {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--tvp-ink-soft);
}
.tvp-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tvp-credit a:hover { color: var(--tvp-orange-dark); }
.tvp-credit a:focus-visible { outline: 2px solid var(--tvp-orange); outline-offset: 2px; border-radius: 2px; }
.tvp-step-3 .tvp-help { margin-top: 1rem; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .tvp { padding: 4rem 1.25rem 4.5rem; }
    .tvp-step-1, .tvp-step-2, .tvp-step-3 { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .tvp-visual { padding: 0; max-width: 34rem; }
    .tvp-note { display: none; }
    .tvp-found { max-width: 26rem; }
}
@media (max-width: 560px) {
    .tvp-form { flex-direction: column; }
    .tvp-btn { width: 100%; }
    .tvp-btn-lg { justify-content: space-between; padding: 0.9rem 1.25rem; font-size: 1.05rem; }
    .tvp-lead { font-size: 1.05rem; }
    .tvp-tv-bezel { border-radius: 6px; padding: 1.4%; }
}
@media (prefers-reduced-motion: reduce) {
    .tvp-btn, .tvp-field input { transition: none; }
    .tvp-btn[aria-busy="true"] svg { animation: none; }
}

/* =====================================================================
   Roku v3 home screen, 1920x1080 logical px (bottom-pills layout)
   ===================================================================== */
.tvs {
    position: absolute;
    left: 0; top: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    transform: scale(0.3);
    overflow: hidden;
    font-family: 'TVP Quicksand', 'Quicksand', 'Nunito', sans-serif;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.tvs > * { position: absolute; }
.tvs-bg { left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; }
/* AppShell scrim is #000000A6 (65%); lightened for the marketing preview so the area photo reads. */
.tvs-scrim { left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(0, 0, 0, 0.40); }
.tvs-bar { left: 0; width: 1920px; height: 100px; background: rgba(0, 0, 0, 0.70); }
.tvs svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* TopBar */
.tvs-top { top: 0; }
.tvs-top > * { position: absolute; }
.tvs-lockup { left: 40px; top: 24px; width: 358px; height: 52px; }
.tvs-centre {
    left: 960px; top: 50px;
    width: 880px;
    transform: translate(-50%, -50%);
    text-align: center;
}
.tvs-prop {
    font-size: 34px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tvs-guest { margin-top: 4px; font-size: 26px; color: #CCCCCC; white-space: nowrap; }
.tvs-right { left: 1420px; top: 0; width: 460px; height: 100px; }
.tvs-right > *, .tvs-weather > * { position: absolute; }
.tvs-weather { left: 0; top: 0; width: 240px; height: 100px; }
.tvs-wicon { left: 2px; top: 22px; width: 56px; height: 56px; stroke: none !important; }
.tvs-temp { left: 70px; top: 14px; font-size: 34px; font-weight: 700; white-space: nowrap; }
.tvs-cond { left: 70px; top: 56px; font-size: 26px; color: #CCCCCC; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tvs-divider { left: 230px; top: 26px; width: 1px; height: 48px; background: rgba(255, 255, 255, 0.2); }
.tvs-time { left: 270px; top: 14px; width: 190px; text-align: right; font-size: 34px; font-weight: 700; white-space: nowrap; }
.tvs-date { left: 270px; top: 56px; width: 190px; text-align: right; font-size: 26px; color: #CCCCCC; white-space: nowrap; }

/* HomeScreen panel: content rect x96 y124 w1728 h832. roku v3 HomeScreen.brs asks for a
   520px panel at -40; the 01-home.png reference shows a 430px panel centred, used here. */
.tvs-panel {
    left: 96px; top: 325px;
    width: 1728px; height: 430px;
    background: rgba(30, 30, 46, 0.92);
}
.tvs-panel::before {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 100%; height: 4px;
    background: rgba(245, 166, 35, 0.5);
}
.tvs-panel > * { position: absolute; }
.tvs-eyebrow { left: 56px; top: 44px; font-size: 28px; font-weight: 700; color: #F26B21; letter-spacing: 0.06em; }
.tvs-title {
    left: 56px; top: 82px;
    width: 1336px; height: 116px;
    font-size: 92px; font-weight: 700;
    line-height: 116px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tvs-message { left: 56px; top: 200px; width: 1336px; font-size: 32px; color: #CCCCCC; white-space: nowrap; }
.tvs-rule { left: 56px; top: 272px; width: 1336px; height: 1px; background: rgba(255, 255, 255, 0.2); }
.tvs-facts { left: 56px; top: 308px; width: 1336px; height: 90px; }
.tvs-fact { position: absolute; top: 0; width: 445px; height: 90px; }
.tvs-fact:nth-child(2) { left: 445px; }
.tvs-fact:nth-child(3) { left: 890px; }
.tvs-fact + .tvs-fact::before {
    content: '';
    position: absolute; left: -24px; top: 4px;
    width: 1px; height: 76px;
    background: rgba(255, 255, 255, 0.2);
}
.tvs-fact > * { position: absolute; }
.tvs-fact svg { left: 0; top: 18px; width: 44px; height: 44px; color: #CCCCCC; }
.tvs-fact-label { left: 64px; top: 0; font-size: 24px; color: #CCCCCC; white-space: nowrap; }
.tvs-fact-value { left: 64px; top: 34px; font-size: 34px; font-weight: 700; white-space: nowrap; }
/* The SVG carries its own 4-module quiet zone, so it fills the white tile. */
.tvs-qr { left: 1472px; top: 96px; width: 200px; height: 200px; background: #FFFFFF; }
.tvs-qr svg { display: block; width: 200px; height: 200px; stroke: none; }
.tvs-qr-caption { left: 1352px; top: 312px; width: 320px; text-align: center; font-size: 24px; color: #CCCCCC; white-space: nowrap; }

/* UI_Hint: right-aligned at the bottom of the content rect */
.tvs-hint {
    left: 96px; top: 922px; width: 1728px;
    text-align: right;
    font-size: 24px; color: #CCCCCC;
    white-space: pre;
}

/* BottomPillsNav: 100px bar at y980, six 287x70 pills from x60 with 15px gaps */
.tvs-nav { top: 980px; }
.tvs-pill {
    position: absolute;
    top: 15px;
    width: 287px; height: 70px;
    background: rgba(42, 42, 51, 0.8);
    color: #CCCCCC;
    border-radius: 4px;
}
.tvs-pill:nth-child(1) { left: 60px; }
.tvs-pill:nth-child(2) { left: 362px; }
.tvs-pill:nth-child(3) { left: 664px; }
.tvs-pill:nth-child(4) { left: 966px; }
.tvs-pill:nth-child(5) { left: 1268px; }
.tvs-pill:nth-child(6) { left: 1570px; }
.tvs-pill svg { position: absolute; left: 29px; top: 18px; width: 34px; height: 34px; }
.tvs-pill span {
    position: absolute;
    left: 66px; top: 0;
    width: 211px; height: 70px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 700;
    white-space: nowrap;
}
.tvs-pill.is-active {
    background: #F26B21;
    color: #FFFFFF;
    box-shadow: 0 0 0 4px #F5A623;
}
.tvs-pill.is-active .tvs-fill { fill: currentColor; stroke: none; }

/* ---------- enlarged QR ---------- */
/* Transparent button over the TV's QR tile: x1568 y421 200x200 of 1920x1080. */
.tvp-qr-zoom {
    position: absolute;
    left: 81.667%; top: 38.981%;
    width: 10.417%; height: 18.519%;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    cursor: zoom-in;
}
.tvp-qr-zoom:hover { box-shadow: 0 0 0 2px var(--tvp-amber); }
.tvp-qr-zoom:focus-visible { outline: 3px solid var(--tvp-orange); outline-offset: 2px; }

.tvp-dialog {
    margin: auto; /* common.css resets margins; the UA centres modal dialogs with margin:auto */
    width: min(26rem, calc(100vw - 1.5rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: var(--tvp-ink);
    box-shadow: 0 30px 70px -20px rgba(30, 30, 46, 0.55);
}
.tvp-dialog::backdrop { background: rgba(30, 30, 46, 0.6); }
.tvp-dialog-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 1.5rem;
    text-align: center;
}
.tvp-dialog-title {
    margin: 0 2.75rem 1.25rem; /* clear of the close button */
    font: 800 1.25rem/1.25 var(--tvp-head);
    text-wrap: balance;
}
.tvp-qr-big {
    display: block;
    width: min(340px, calc(100vw - 3.5rem));
    height: auto;
    aspect-ratio: 1;
}
.tvp-dialog .tvp-link { margin-top: 1rem; }
.tvp-dialog-close {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--tvp-sand);
    color: var(--tvp-ink);
    cursor: pointer;
}
.tvp-dialog-close svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tvp-dialog-close:hover { background: var(--tvp-sand-deep); }
.tvp-dialog-close:focus-visible { outline: 3px solid var(--tvp-orange); outline-offset: 2px; }
/* At phone widths the tile is ~35px; grow the tap target without moving it. */
.tvp-qr-zoom::before { content: ''; position: absolute; inset: -6px; }

/* ---------- preview page (/tv-preview/?preview=<id>) ---------- */
/* Holds roughly the result's height while the preview loads, so the page
   doesn't jump when it arrives. */
.tvp-step-loading {
    display: grid;
    place-items: center;
    min-height: clamp(280px, 38vw, 520px);
}
.tvp-step-loading .tvp-status { margin: 0; font-size: 1.05rem; }
.tvp-notice {
    max-width: 44rem;
    margin: 0 0 3rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--tvp-amber);
    border-radius: 12px;
    background: #FFFDF9;
    box-shadow: 0 12px 30px -20px rgba(30, 30, 46, 0.35);
}
.tvp-notice-title {
    margin: 0 0 0.35rem;
    font: 800 1.45rem/1.25 var(--tvp-head);
    color: var(--tvp-ink);
    outline: none;
}
.tvp-notice-text { margin: 0; color: var(--tvp-ink-soft); line-height: 1.55; }
.tvp-notice .tvp-btn { margin-top: 1rem; min-width: 0; }