/* Facade "Smart TV" on the demo's own pages (FS-001, FS-002): the TV set around the builder's
   sign-in window preview, and the signed-in screen of the streaming service on the result page.
   The same composition on the core's real sign-in window comes from facade-smart-tv-signin.css.
   A TV sign-in screen is landscape and read from the sofa: the text on the left, one large QR code
   on the right — the way streaming apps lay it out. The set carries no vendor logo, only a standby
   light on the chin. */

.facade-tv,
.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-signin {
    /* The body of the set is dark in either site theme — a TV is a black object on any wall — and
       it gets a lighter rim, so it still separates from a dark stage. */
    --facade-tv-body: var(--veriqa-preview-dark-stage);
    --facade-tv-body-light: var(--veriqa-preview-dark-card);
    --facade-tv-rim: var(--veriqa-preview-dark-border);
    --facade-tv-led: var(--veriqa-color-accent);
    --facade-tv-glow: var(--veriqa-preview-accent, var(--veriqa-color-accent));
}

/* ── The set: body, chin with the standby light, stand ── */
.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-signin,
.facade-tv {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 38rem);
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-signin .veriqa-authcard,
.facade-tv-bezel {
    position: relative;
    width: 100%;
    border: 0;
    border-radius: 0.875rem;
    /* bezel (padding) + chin (the thicker bottom) */
    padding: 0.625rem 0.625rem 1.25rem;
    background:
        radial-gradient(circle at 50% calc(100% - 0.6rem), var(--facade-tv-led) 0 2px, transparent 3px),
        linear-gradient(180deg, var(--facade-tv-body-light), var(--facade-tv-body) 40%);
    box-shadow:
        0 0 0 1px var(--facade-tv-rim),
        inset 0 1px 0 color-mix(in srgb, var(--veriqa-preview-dark-fg) 12%, transparent),
        0 24px 40px -18px rgba(0, 0, 0, 0.55);
}

/* The honesty line of the other facades, under the stand; the reference facade has no wrapping. */
.veriqa-facade-tvhonesty {
    display: none;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-tvhonesty {
    display: block;
    margin-block-start: var(--veriqa-spacing-sm);
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-tvstand,
.facade-tv-stand {
    position: relative;
    display: block;
    width: 11rem;
    height: 1.75rem;
}

/* neck */
.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-tvstand::before,
.facade-tv-stand::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2.25rem;
    height: 1.125rem;
    transform: translateX(-50%);
    clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, var(--facade-tv-body), var(--facade-tv-body-light));
}

/* base plate */
.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-tvstand::after,
.facade-tv-stand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.125rem;
    height: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--facade-tv-body-light), var(--facade-tv-body));
    box-shadow: 0 0 0 1px var(--facade-tv-rim), 0 8px 14px -6px rgba(0, 0, 0, 0.5);
}

/* ── Builder: the sign-in window as the TV app screen ── */
/* The screen is a pseudo-element under the content, inside the bezel, so the card's children stay
   the grid items of the composition. */
.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-signin .veriqa-authcard {
    /* The text column is split in three only on the last row, so the spinner, the status and the
       timer sit side by side there instead of spreading over the whole column. */
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
        "brand brand  brand qr"
        "title title  title qr"
        "instr instr  instr qr"
        "tabs  tabs   tabs  qr"
        "spin  status timer qr";
    align-items: start;
    column-gap: 0;
    row-gap: 0.5rem;
    max-width: none;
    aspect-ratio: 16 / 10;
    text-align: start;
    isolation: isolate;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-facade-signin .veriqa-authcard::before {
    content: "";
    position: absolute;
    inset: 0.625rem 0.625rem 1.25rem;
    z-index: -1;
    border-radius: 0.25rem;
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--facade-tv-glow) 22%, transparent), transparent 55%),
        var(--veriqa-card-bg);
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard > * {
    margin: 0;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-brand {
    grid-area: brand;
    justify-self: start;
    padding: 1.25rem 0 0 1.5rem;
    font-size: var(--veriqa-font-size-sm);
    color: var(--veriqa-card-muted);
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-title {
    grid-area: title;
    padding-inline-start: 1.5rem;
    font-size: 1.375rem;
    line-height: 1.2;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-instruction {
    grid-area: instr;
    padding-inline-start: 1.5rem;
    font-size: var(--veriqa-font-size-xs);
}

/* Channels become a row of pills instead of a bar of tabs: on a TV they say where the question
   arrives rather than being a control reached with the remote. */
.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-tabs {
    grid-area: tabs;
    justify-content: flex-start;
    gap: 0.375rem;
    width: auto;
    margin: 0.375rem 0 0 1.5rem;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-tab {
    flex: 0 0 auto;
    min-height: 1.75rem;
    padding: 0 0.625rem;
    border: 1px solid var(--veriqa-card-border);
    border-radius: 999px;
    font-size: var(--veriqa-font-size-2xs);
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-tab.is-active {
    border-color: var(--veriqa-card-fg);
    box-shadow: none;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-panels {
    grid-area: qr;
    align-self: center;
    width: auto;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
}

/* The QR code is the way in, and it is read from across the room: it is large. A button that would
   open the messenger on the TV itself has nowhere to lead. */
.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-cta {
    display: none;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-qr-frame {
    width: 9.5rem;
    height: 9.5rem;
    border: 0;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-email {
    width: 11rem;
}

/* Waiting: the spinner, the status and the timer read as one line at the bottom of the text column */
.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-spinner,
.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-status,
.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-countdown {
    align-self: end;
    margin-block-end: 1.5rem;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-spinner {
    grid-area: spin;
    width: 1rem;
    height: 1rem;
    margin-inline-start: 1.5rem;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-status {
    grid-area: status;
    margin-inline-start: 0.625rem;
}

.veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-countdown {
    grid-area: timer;
    justify-self: start;
    margin-inline-start: 0.625rem;
}

/* ── Result: the streaming service, signed in ── */
.facade-tv-screen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--veriqa-spacing-lg);
    aspect-ratio: 16 / 9;
    padding: var(--veriqa-spacing-lg);
    border-radius: 0.25rem;
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--facade-tv-glow) 22%, transparent), transparent 55%),
        var(--veriqa-preview-dark-card);
    color: var(--veriqa-preview-dark-fg);
}

.facade-tv-profile {
    display: flex;
    align-items: center;
    gap: var(--veriqa-spacing-md);
}

.facade-tv-avatar {
    width: 3.5rem;
    height: 3.5rem;
    margin-inline-end: 0;
}

.facade-tv-hello {
    margin: 0;
    font-size: var(--veriqa-font-size-xl);
    line-height: 1.15;
}

.facade-tv-service {
    margin: var(--veriqa-spacing-xs) 0 0;
    font-size: var(--veriqa-font-size-sm);
    color: var(--veriqa-preview-dark-muted);
}

.facade-tv-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--veriqa-spacing-sm);
}

.facade-tv-tile {
    aspect-ratio: 16 / 9;
    border-radius: var(--veriqa-radius-sm);
    background: color-mix(in srgb, var(--veriqa-preview-dark-fg) 10%, transparent);
}

/* The first tile is "the one in focus" — the way a TV home screen marks where the remote is. */
.facade-tv-tile:first-child {
    outline: 2px solid color-mix(in srgb, var(--veriqa-preview-dark-fg) 80%, transparent);
    outline-offset: 2px;
}

.facade-tv-account {
    width: 100%;
    margin-block-start: var(--veriqa-spacing-md);
    border: 1px solid var(--veriqa-color-border);
    border-radius: var(--veriqa-radius-md);
    background: var(--veriqa-color-bg-secondary);
}

.facade-tv-account summary {
    padding: var(--veriqa-spacing-sm) var(--veriqa-spacing-md);
    font-size: var(--veriqa-font-size-sm);
    font-weight: var(--veriqa-font-weight-medium);
    cursor: pointer;
}

.facade-tv-account .veriqa-claims-list {
    padding: 0 var(--veriqa-spacing-md) var(--veriqa-spacing-sm);
}

/* ── Narrow screens: the landscape composition does not fit, the screen stacks ── */
@media (max-width: 40rem) {
    .veriqa-builder[data-facade="smart-tv"] .veriqa-facade-signin .veriqa-authcard {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "brand brand  brand"
            "title title  title"
            "instr instr  instr"
            "tabs  tabs   tabs"
            "qr    qr     qr"
            "spin  status timer";
        aspect-ratio: auto;
    }

    .veriqa-builder[data-facade="smart-tv"] .veriqa-authcard-panels {
        justify-self: center;
        padding: 0.5rem 0;
    }

    .facade-tv-screen {
        aspect-ratio: auto;
        padding: var(--veriqa-spacing-md);
    }

    .facade-tv-hello {
        font-size: var(--veriqa-font-size-lg);
    }
}