/* Reusable "screen" layout (see /elements/includes/screen.cfm).
   Top 2/3: a 9-slice TV frame whose centre cell is the only thing that scrolls.
   Bottom 1/3: a swappable "machine" panel, centred, clipping its sides on narrow
   screens. No page scroll. On a tall phone the frame is naturally portrait. */

html:has(body.screen),
body.screen {
    height: 100%;
    margin: 0;
    overflow: hidden;                 /* nothing scrolls except the TV centre cell */
}

/* --- Top 2/3: the 9-slice TV frame --- */
.tv {
    position: fixed;
    top: 120px;                          /* reserved header space (for a nav) */
    bottom: calc(33.333svh + 40px);      /* machine (1/3) + 40px gap above it */
    left: 50%;
    transform: translateX(-50%);
    width: min(1440px, 100vw - 40px);    /* max 1440; shrinks below, keeping >=20px each side */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    grid-template-rows: 60px 1fr 60px;
    background-color: #F2F8FF;
}
.tv__corner { background-repeat: no-repeat; background-size: 60px 60px; }
.tv__corner--tl { background-image: url('/images/television/corner-top-left.png'); }
.tv__corner--tr { background-image: url('/images/television/corner-top-right.png'); }
.tv__corner--bl { background-image: url('/images/television/corner-bottom-left.png'); }
.tv__corner--br { background-image: url('/images/television/corner-bottom-right.png'); }
.tv__edge--top    { background: url('/images/television/edge-top.png')    repeat-x; background-size: 60px 60px; }
.tv__edge--bottom { background: url('/images/television/edge-bottom.png') repeat-x; background-size: 60px 60px; }
.tv__edge--left   { background: url('/images/television/edge-left.png')   repeat-y; background-size: 60px 60px; }
.tv__edge--right  { background: url('/images/television/edge-right.png')  repeat-y; background-size: 60px 60px; }

.tv__center {
    min-height: 0;                    /* let the grid cell shrink so it can scroll */
    overflow-y: auto;                 /* the ONLY scroll on the page */
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* --- In-frame content (shared by every screen page) --- */
.tv__center h1 {
    color: #0000ff;                   /* Bangers comes from base.css */
    margin: 0 0 .75rem;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1;
}
.tv__center h2 {
    color: #0000ff;
    margin: 1.75rem 0 .5rem;
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    line-height: 1.1;
}
.tv__center p  { margin: 0 0 1rem; line-height: 1.5; }
.tv__center ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.tv__center li { margin: 0 0 .5rem; line-height: 1.5; }
.tv__center a  { color: #0000ff; }
.tv__center code {
    font-size: .9em;
    background: #e6eefc;
    padding: .05em .35em;
    border-radius: 3px;
}
.tv__updated,
.legal__updated { color: #4a5568; font-size: .95rem; margin: 0 0 1.5rem; }

.ck-table {
    width: 100%;
    border-collapse: collapse;
    margin: .25rem 0 1rem;
    font-size: .95rem;
}
.ck-table th,
.ck-table td {
    text-align: left;
    vertical-align: top;
    padding: .5rem .6rem;
    border-bottom: 1px solid #cdd9ec;
}
.ck-table th { font-weight: 700; }

/* --- Bottom 1/3: the swappable machine --- */
.machine {
    position: fixed;
    inset: auto 0 0 0;                /* pinned to the bottom, full width */
    height: 33.333svh;
    overflow: hidden;                 /* clip the machine's sides */
    pointer-events: none;             /* art only for now; interactive parts opt back in */
}
.machine__art {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;                     /* fill the 1/3 height; sides clip, centre stays put */
    width: auto;
}

/* Phones: slim the frame from 60px to 40px so the content gets more room. */
@media (max-width: 640px) {
    .tv {
        grid-template-columns: 20px 1fr 20px;
        grid-template-rows: 20px 1fr 20px;
    }
    .tv__corner,
    .tv__edge--top,
    .tv__edge--bottom,
    .tv__edge--left,
    .tv__edge--right {
        background-size: 20px 20px;
    }

    /* Stack the cookie table into labelled cards (no horizontal scroll). */
    .ck-table thead { display: none; }
    .ck-table tr {
        display: block;
        border: 1px solid #cdd9ec;
        border-radius: 6px;
        padding: .5rem .75rem;
        margin-bottom: .75rem;
    }
    .ck-table td {
        display: flex;
        gap: .6rem;
        border: 0;
        padding: .2rem 0;
    }
    .ck-table td::before { flex: 0 0 5rem; font-weight: 700; color: #4a5568; }
    .ck-table td:nth-child(1)::before { content: "Cookie"; }
    .ck-table td:nth-child(2)::before { content: "Purpose"; }
    .ck-table td:nth-child(3)::before { content: "Set by"; }
    .ck-table td:nth-child(4)::before { content: "Expires"; }
}