/*
 * The channel UI.
 *
 * Written to survive on a television browser as well as a desktop one, which
 * rules out a few things a normal site would reach for: no CSS custom
 * properties (webOS 3 and Tizen 2017 cannot resolve a var(), and an
 * unresolvable one is an unstyled page rather than a slightly wrong one), no
 * grid, no :is()/:where(), no clamp(). Flexbox and transforms are the newest
 * things used here, and both go back to 2015.
 *
 * Per-channel colours are not here at all: they arrive as a small block of
 * literal declarations generated from the feed (see Theme::css) and loaded
 * after this file, so a channel's own palette always wins.
 */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #0A0A0A;
    color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { border: 0; }

.ott-app {
    position: relative;
    min-height: 100%;
    z-index: 0;
}

.ott-app > * { position: relative; z-index: 1; }

/* Screen-reader-only, for the labels a mouse user does not need. */
.ott-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------- header */

.ott-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 56px;
    z-index: 40;
    /* Near-opaque at the top, fading down so rows bleed softly under it —
       the same scrim the television header uses. */
    background-image: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.20) 100%);
}

.ott-nav-solid { background-image: none; }

.ott-brand {
    display: flex;
    align-items: center;
    height: 38px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ott-brand img { max-height: 38px; width: auto; display: block; }

.ott-tabs {
    display: flex;
    align-items: center;
}

.ott-tab {
    display: inline-block;
    padding: 5px 18px;
    margin-left: 4px;
    font-size: 15px;
    line-height: 22px;
    color: #B3B3B3;
    background-color: transparent;
    border: 0;
    border-radius: 22px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

/* The current section reads as brighter text, never as a pill: at most one
   pill — the focused one — is ever on screen, which is what stops the header
   looking like two things are selected at once. */
.ott-tab.is-active { color: #FFFFFF; font-weight: 600; }
.ott-tab:focus, .ott-tab:hover { background-color: #FFFFFF; color: #111111; outline: none; }

/* Icon-only tabs — search, account. Squarer padding so the pill around a
   glyph is a circle rather than a lozenge. */
.ott-tab-search,
.ott-tab-icon { padding: 5px 11px; }

.ott-tab-search svg,
.ott-tab-icon svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* ---------------------------------------------------------------- hero */

.ott-hero {
    position: relative;
    height: 30vh;
    min-height: 260px;
    overflow: hidden;
}

.ott-hero-backdrop {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 60%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* The image's own left edge is faded out, rather than being hidden under
       an opaque scrim. At 60% of a typical window that edge lands on a
       FRACTIONAL pixel (546.40625 at 1366 wide), and an image edge and the
       scrim above it antialias independently there — which showed as a
       hairline seam down the hero. Masked, the edge carries no colour at all,
       so there is nothing left to seam. The scrim below stays as the fallback
       for anything that cannot mask. */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 55%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 55%);
}

.ott-hero-scrim-h,
.ott-hero-scrim-v,
.ott-hero-scrim-top {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 60%;
    pointer-events: none;
}

.ott-hero-scrim-top {
    bottom: auto;
    height: 130px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,0) 100%);
}

.ott-hero-text {
    position: absolute;
    left: 56px;
    top: 40%;
    width: 52%;
    max-width: 760px;
}

.ott-hero-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ott-hero-desc {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.80);
    /* Two lines, like the television hero. The max-height is the fallback for
       browsers without line-clamp; both agree at this line-height. */
    max-height: 45px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ott-hero-meta {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255,255,255,.55);
}

.ott-hero-meta span + span:before { content: " · "; }

/* ---------------------------------------------------------------- rows */

.ott-rows { padding: 14px 0 64px 0; }

.ott-row { margin: 0 0 30px 0; }

.ott-row-title {
    margin: 0 0 12px 56px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
}

/* The strip scrolls sideways. Padding rather than margin on the ends so a
   focused card at either edge still has room to grow into. */
.ott-strip {
    display: flex;
    align-items: flex-start;
    padding: 10px 56px 18px 56px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ott-strip::-webkit-scrollbar { display: none; }

.ott-card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 320px;
    margin-right: 12px;
    background-color: #3D3D3D;
    border: 0;
    /* Square corners read as unfinished next to the panels elsewhere, which
       are 6-8px. Matched to those. */
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transform-origin: center center;
    transition: transform .14s ease, background-color .14s ease;
}

.ott-card:focus { outline: none; }

/* A focused card lifts above its neighbours instead of being clipped by
   them — z-index alone is not enough once the strip is scrollable. */
.ott-card:focus, .ott-card:hover, .ott-card.is-focused { z-index: 5; }

.ott-card-art {
    /* A span, so a card stays one <a> with no block elements inside it — but
       an inline box ignores height, which is the whole point of this one. */
    display: block;
    position: relative;
    height: 180px;
    width: 100%;
    /* Only the top pair — the bottom of the artwork meets the info panel. */
    border-radius: 8px 8px 0 0;
    background-color: #1A1A1A;
    /* Two layers: the artwork, then the placeholder behind it. The second
       pair of values is the placeholder's — centred and small, so a missing
       thumbnail reads as "no artwork" rather than as a stretched icon. */
    background-position: center, center;
    background-size: cover, auto 38%;
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
}

/* The artwork fades into the panel below it instead of stopping at a ruled
   line. The gradient's colours are per-channel (the card colour, and the
   highlight it fills with on focus), so they come from Theme::css. */
.ott-card-art:after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 38px;
    pointer-events: none;
    z-index: 1;
}

/* Above the fade: a resume bar under it would be washed out, and a badge
   sits at the other end but is given a layer for the same reason. */
.ott-card-resume { z-index: 2; }
.ott-badge { z-index: 2; }

.ott-card-info { display: block; padding: 8px 10px 10px; }

.ott-card-title {
    display: block;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ott-card-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255,255,255,.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badges sit on the artwork: what a card is, before you read its name. */
.ott-badge {
    display: block;
    position: absolute;
    top: 8px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 2px;
    line-height: 16px;
}

.ott-badge-live  { left: 8px; background-color: #FF3144; color: #FFFFFF; }
.ott-badge-lock  { right: 8px; background-color: rgba(0,0,0,.72); color: #FFFFFF; }
.ott-badge-soon  { left: 8px; background-color: rgba(0,0,0,.72); color: #FFFFFF; }
.ott-badge-eps   { right: 8px; background-color: rgba(0,0,0,.72); color: #FFFFFF; }

/* Resume bar, drawn from what this browser remembers watching. */
.ott-card-resume {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background-color: rgba(255,255,255,.25);
}

.ott-card-resume i {
    display: block;
    width: 0;
    height: 100%;
    background-color: #FFAA3F;
}

/* ------------------------------------------------------------ big slider */

.ott-row-slider .ott-strip { padding-bottom: 24px; }

.ott-row-slider .ott-card { width: 640px; }
.ott-row-slider .ott-card-art { height: 360px; }
.ott-row-slider .ott-card-title { font-size: 18px; }

/* -------------------------------------------------------------- pages */

.ott-page {
    padding: 104px 56px 64px;
    max-width: 1180px;
}

.ott-page-wide { max-width: none; }

/* Content that follows a hero: the hero already provides the top margin, so
   the page's own header clearance would double it.
   Two classes deep on purpose — the responsive block further down restates
   .ott-page's padding, and an equally specific rule there would win on order
   alone. */
.ott-page.ott-page-flush { padding-top: 28px; }

.ott-page h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 700;
}

.ott-page .lead {
    margin: 0 0 28px;
    font-size: 15px;
    color: rgba(255,255,255,.66);
}

.ott-panel {
    background-color: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    padding: 22px 24px;
    margin-bottom: 18px;
}

.ott-panel h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
}

.ott-muted { color: rgba(255,255,255,.60); }
.ott-small { font-size: 13px; }

.ott-alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 18px;
    background-color: rgba(255,49,68,.14);
    border: 1px solid rgba(255,49,68,.45);
    font-size: 14px;
}

.ott-alert-ok {
    background-color: rgba(60,200,120,.14);
    border-color: rgba(60,200,120,.45);
}

.ott-btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 3px;
    background-color: transparent;
    color: #FFFFFF;
    cursor: pointer;
    text-align: center;
}

.ott-btn:focus, .ott-btn:hover { border-color: #FFFFFF; outline: none; }
.ott-btn + .ott-btn { margin-left: 10px; }
.ott-btn-primary { background-color: #FFAA3F; border-color: #FFAA3F; color: #111111; }
.ott-btn-block { display: block; width: 100%; }

.ott-field {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    color: #FFFFFF;
    background-color: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 3px;
}

.ott-field:focus { outline: none; border-color: #FFFFFF; }

/* ------------------------------------------------------------ title page */

.ott-title-hero {
    position: relative;
    min-height: 420px;
    padding: 132px 56px 40px;
    background-position: center 20%;
    background-size: cover;
}

.ott-title-hero:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(to top, rgba(0,0,0,.96) 8%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.75) 100%);
}

.ott-title-hero > * { position: relative; }

.ott-title-hero h1 { margin: 0 0 10px; font-size: 40px; font-weight: 700; }

.ott-title-meta {
    font-size: 13px;
    color: rgba(255,255,255,.62);
    margin-bottom: 14px;
}

.ott-title-meta span + span:before { content: " · "; }

.ott-title-desc {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    margin-bottom: 22px;
}

.ott-season { margin: 0 0 26px; }
.ott-season h3 { margin: 0 0 12px 56px; font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* --------------------------------------------------------------- player */

.ott-watching { background-color: #000000; overflow: hidden; }

.ott-player {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
}

.ott-player video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    object-fit: contain;
}

.ott-player-logo {
    position: absolute;
    max-height: 46px;
    max-width: 180px;
    z-index: 20;
    opacity: .9;
    pointer-events: none;
}

.ott-logo-top-right    { top: 24px; right: 32px; }
.ott-logo-top-left     { top: 24px; left: 32px; }
.ott-logo-bottom-right { bottom: 120px; right: 32px; }
.ott-logo-bottom-left  { bottom: 120px; left: 32px; }

/* Everything that fades with the controls. Kept as one layer so the title,
   the bar and the buttons can never be half-visible. */
.ott-controls {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 90px 48px 28px;
    /* Strong early, then fading. Content is often bright — a white studio
       shot leaves white icons on pale grey if the scrim only gets dark at the
       very bottom edge. */
    background-image: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,0) 100%);
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
    z-index: 30;
    opacity: 1;
    transition: opacity .25s ease;
}

.ott-controls.is-hidden { opacity: 0; pointer-events: none; }

.ott-player.is-idle { cursor: none; }

.ott-controls-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ott-controls-sub {
    font-size: 13px;
    color: rgba(255,255,255,.62);
    margin-bottom: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ott-progress {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.ott-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: rgba(255,255,255,.34);
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0,0,0,.5);
}

.ott-progress-buffer {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: rgba(255,255,255,.35);
    border-radius: 2px;
    width: 0;
}

.ott-progress-played {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: #FFAA3F;
    border-radius: 2px;
    width: 0;
}

.ott-progress-handle {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background-color: #FFAA3F;
    left: 0;
}

/* Ad breaks marked on the bar, so a viewer can see one coming. */
.ott-progress-cue {
    position: absolute;
    top: 0; bottom: 0;
    width: 3px;
    margin-left: -1px;
    background-color: rgba(255,220,80,.9);
}

.ott-controls-bar {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.ott-ctl {
    background: transparent;
    border: 0;
    padding: 8px;
    margin-right: 10px;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
}

.ott-ctl svg {
    width: 26px; height: 26px;
    fill: currentColor;
    display: block;
    /* The icons are shapes, not text, so the scrim's text-shadow does not
       reach them. */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
.ott-ctl:focus, .ott-ctl:hover { background-color: rgba(255,255,255,.18); outline: none; }
.ott-ctl-big svg { width: 34px; height: 34px; }

.ott-time {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.85);
    margin-left: 6px;
}

.ott-spacer { flex: 1 1 auto; }

/* Loading and errors sit above the video and below the controls. */
.ott-player-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(0,0,0,.72);
    z-index: 25;
}

.ott-player-overlay img { max-width: 260px; max-height: 160px; margin-bottom: 20px; }
.ott-player-overlay p { margin: 0; font-size: 16px; color: rgba(255,255,255,.85); }
.ott-player-overlay.is-hidden { display: none; }

.ott-spinner {
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: ott-spin .9s linear infinite;
}

@keyframes ott-spin { to { transform: rotate(360deg); } }

/* The ad layer: same video element, different chrome. Controls are hidden
   while an ad runs, because seeking past one is not a thing a viewer may do. */
.ott-ad-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 48px;
    background-image: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 60%, rgba(0,0,0,0) 100%);
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    z-index: 35;
    font-size: 14px;
}

.ott-ad-bar.is-hidden { display: none; }
.ott-ad-count { color: rgba(255,255,255,.85); }
.ott-ad-learn { margin-left: 16px; text-decoration: underline; }
.ott-ad-skip {
    margin-left: auto;
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(0,0,0,.5);
    color: #FFFFFF;
    cursor: pointer;
}
.ott-ad-skip[disabled] { opacity: .55; cursor: default; }

/* --------------------------------------------------------------- dialog */

.ott-dialog-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,.78);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ott-dialog-backdrop.is-hidden { display: none; }

.ott-dialog {
    width: 440px;
    max-width: 92%;
    background-color: #17181C;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    padding: 26px 28px;
    text-align: left;
}

.ott-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.ott-dialog p { margin: 0 0 20px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.5; }
.ott-dialog-actions { text-align: right; }

/* ------------------------------------------------------------- pairing */

.ott-pair-code {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: .18em;
    text-align: center;
    padding: 18px 0 8px;
    font-variant-numeric: tabular-nums;
}

.ott-pair-steps { padding-left: 20px; line-height: 1.9; color: rgba(255,255,255,.78); font-size: 14px; }

/* --------------------------------------------------------------- grids */

.ott-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}

.ott-grid .ott-card { margin: 0 6px 22px; }

/* ------------------------------------------------------------ responsive
   The card sizes a channel states are ten-foot sizes. Below tablet width the
   generated rules are overridden so two cards still fit side by side rather
   than one and a sliver of the next. */

@media (max-width: 1024px) {
    .ott-nav { padding: 0 24px; }
    .ott-row-title, .ott-season h3 { margin-left: 24px; }
    .ott-strip { padding-left: 24px; padding-right: 24px; }
    .ott-hero-text { left: 24px; width: 70%; }
    .ott-page, .ott-title-hero { padding-left: 24px; padding-right: 24px; }
    .ott-controls, .ott-ad-bar { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 720px) {
    .ott-nav { height: 56px; }
    .ott-hero { height: 34vh; min-height: 220px; }
    .ott-hero-backdrop, .ott-hero-scrim-h, .ott-hero-scrim-v, .ott-hero-scrim-top { width: 100%; }
    .ott-hero-text { width: calc(100% - 48px); top: auto; bottom: 18px; }
    .ott-hero-title { font-size: 24px; }
    .ott-page { padding-top: 84px; }
    .ott-title-hero { padding-top: 96px; min-height: 320px; }
    .ott-title-hero h1 { font-size: 28px; }

    /* Halve the stated card geometry rather than letting a 320px landscape
       card push everything off a phone. */
    .ott-row-landscape .ott-card { width: 232px !important; }
    .ott-row-landscape .ott-card-art { height: 131px !important; }
    .ott-row-portrait .ott-card { width: 124px !important; }
    .ott-row-portrait .ott-card-art { height: 186px !important; }
    .ott-row-slider .ott-card { width: 288px !important; }
    .ott-row-slider .ott-card-art { height: 162px !important; }

    /* Touch has no hover, so the zoom would only ever fire mid-tap. */
    .ott-card:hover { transform: none !important; }
}

/* A television is a keyboard-only device with a cursor that never appears.
   Focus has to be unmistakable there, so it is drawn rather than implied. */
@media (pointer: coarse), (hover: none) {
    .ott-card:focus, .ott-card.is-focused { box-shadow: 0 0 0 3px #FFFFFF; }
}

.ott-tv .ott-card:focus,
.ott-tv .ott-card.is-focused { box-shadow: 0 0 0 3px #FFFFFF; }

/* ------------------------------------------------------------------ epg */

.ott-epg { margin-top: 8px; }
.ott-epg h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }

.ott-epg-row {
    display: flex;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 14px;
}

.ott-epg-time {
    flex: 0 0 74px;
    color: rgba(255,255,255,.58);
    font-variant-numeric: tabular-nums;
}

.ott-epg-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ott-epg-row.is-live .ott-epg-title { font-weight: 600; }
.ott-epg-badge { position: static; margin-left: 12px; flex: 0 0 auto; }

/* A field for a short code: wide characters, spaced out, so a six-digit code
   is read back as six digits rather than as a number. */
.ott-code-field {
    text-align: center;
    font-size: 26px;
    letter-spacing: .38em;
    text-indent: .38em;
    font-variant-numeric: tabular-nums;
}

/* ========================================================== paywall
 *
 * The television app's subscribe screen, in a browser: a heading across the
 * top, two columns filling the width beneath it — what you can buy on the
 * left, where you stand on the right — and the way out along the bottom.
 *
 * The two columns are what stop this page being a narrow strip of text with
 * half the window empty beside it, which is what a max-width column looks like
 * on a television-shaped screen.
 */

.ott-paywall {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 104px 56px 40px;
}

.ott-paywall-head { margin-bottom: 26px; }

.ott-paywall-head h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
}

.ott-paywall-sub {
    margin: 8px 0 0;
    font-size: 17px;
    color: rgba(255,255,255,.62);
    max-width: 720px;
}

.ott-paywall-cols {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 40px;
}

.ott-paywall-plans {
    flex: 1 1 0;
    min-width: 0;
}

.ott-eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}

/* A plan is one target: name, price, and what it is. Pressing anywhere on it
   buys it, so the whole card is the button rather than a button inside it. */
.ott-plan {
    display: block;
    width: 100%;
    text-align: left;
    padding: 20px 26px;
    margin: 0 0 14px;
    background-color: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.ott-plan:focus, .ott-plan:hover {
    outline: none;
    transform: translateY(-1px);
}

.ott-plan.is-inert { cursor: default; opacity: .72; }

.ott-plan-name {
    display: block;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
}

.ott-plan-price {
    display: block;
    margin-top: 4px;
    font-size: 19px;
    font-weight: 700;
}

.ott-plan-per,
.ott-plan-trial {
    font-size: 14px;
    font-weight: 400;
    opacity: .8;
}

.ott-plan-desc {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.60);
}

.ott-paywall-note {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,.45);
}

/* The status panel. Three bands so it is USED rather than filled from the
   top: the state at the top, what it is about in the middle, and the detail
   at the bottom. The middle takes the slack, so the panel looks composed
   whether it is holding a wide backdrop or a small logo. */
.ott-status {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 28px 28px;
    background-color: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
}

.ott-status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.10);
    flex: 0 0 auto;
}

.ott-status-badge svg { width: 24px; height: 24px; fill: currentColor; display: block; }

.ott-status-ok    .ott-status-badge { color: #33D17A; background-color: rgba(51,209,122,.14); }
.ott-status-info  .ott-status-badge { color: #4DA3FF; background-color: rgba(77,163,255,.14); }
.ott-status-warn  .ott-status-badge { color: #FFB414; background-color: rgba(255,180,20,.14); }
.ott-status-error .ott-status-badge { color: #FF6B6B; background-color: rgba(255,107,107,.14); }

.ott-status-title {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 700;
}

/* The middle band: the title's own artwork on a per-title gate, the channel's
   logo otherwise — the same picture the television panel shows. */
.ott-status-art {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 96px;
    margin: 18px 0;
}

.ott-status-art img {
    max-width: 74%;
    max-height: 190px;
    border-radius: 4px;
    display: block;
}

.ott-status-body {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    max-width: 380px;
}

.ott-status-foot {
    margin: 10px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,.48);
}

.ott-status-action { margin-top: 18px; }

.ott-paywall-foot {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 1024px) {
    .ott-paywall { padding-left: 24px; padding-right: 24px; }
    .ott-paywall-cols { gap: 24px; }
}

/* Below tablet the two columns become one: the plans first, because that is
   what the viewer came for, and the status beneath them. */
@media (max-width: 860px) {
    .ott-paywall { padding-top: 84px; min-height: 0; }
    .ott-paywall-cols { display: block; }
    .ott-status { margin-top: 26px; }
    .ott-status-art { min-height: 0; margin: 14px 0; }
    .ott-status-art img { max-height: 130px; }
    .ott-paywall-head h1 { font-size: 26px; }
    .ott-paywall-sub { font-size: 15px; }
}

/* ================================================== focused screens
 *
 * Signing in, confirming a purchase, the parental gate. One short task each,
 * so they are CENTRED rather than pinned to the left margin — a 500px column
 * against the left edge of a 1600px window reads as a page that failed to
 * finish loading, which is exactly what a browse screen must not look like
 * two clicks away.
 *
 * The channel's backdrop shows through, so these still look like the channel
 * rather than like a form.
 */

.ott-focus {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 104px 24px 56px;
}

.ott-focus-card {
    width: 100%;
    max-width: 440px;
}

/* Wider, for a screen carrying a table or a list of purchases. */
.ott-focus-wide .ott-focus-card { max-width: 760px; }

.ott-focus-mark {
    display: block;
    max-height: 44px;
    max-width: 190px;
    margin: 0 auto 22px;
}

.ott-focus-card h1 {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 700;
    text-align: center;
}

.ott-focus-card .lead {
    margin: 0 auto 24px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.62);
    text-align: center;
    max-width: 400px;
}

.ott-focus-wide .ott-focus-card h1,
.ott-focus-wide .ott-focus-card .lead { text-align: left; }
.ott-focus-wide .ott-focus-card .lead { margin-left: 0; max-width: none; }

.ott-focus-card .ott-panel { margin-bottom: 14px; }

.ott-focus-aside {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,.48);
    text-align: center;
}

.ott-focus-wide .ott-focus-aside { text-align: left; }

/* Secondary actions under a form: side by side, evenly weighted. */
.ott-focus-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ott-focus-actions .ott-btn { margin: 0; }
.ott-focus-actions form { margin: 0; }

/* On the wide variant everything reads left-to-right from the panel's own
   text, so its buttons line up with that rather than floating in the middle. */
.ott-focus-wide .ott-focus-actions { justify-content: flex-start; }

@media (max-width: 720px) {
    .ott-focus { padding-top: 84px; display: block; }
}

.ott-thanks-badge {
    margin: 0 auto 18px;
    color: #33D17A;
    background-color: rgba(51,209,122,.14);
}

/* A plain table, styled here rather than borrowed from Bootstrap — the TV
   ports drop Bootstrap entirely and this still has to read. */
.ott-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 6px;
}

.ott-table th,
.ott-table td {
    text-align: left;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    white-space: nowrap;
}

.ott-table th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}

.ott-table tr:last-child td { border-bottom: 0; }

/* ============================================================ parked
 *
 * A hostname that names no channel — the bare domain, or a name pointed here
 * before it was set up. Not an error page: it is the correct answer for those
 * names, and it is the first thing anyone sees at watch.ottflix.com, so it is
 * built to look deliberate rather than like something missing.
 */

.ott-parked {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px;
    overflow: hidden;
}

/* A wide, very low-contrast wash behind the card, so it sits in light rather
   than floating on flat black. */
.ott-parked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    margin: -450px 0 0 -450px;
    background: radial-gradient(circle,
                rgba(59,130,246,.10) 0%,
                rgba(59,130,246,.04) 35%,
                rgba(0,0,0,0) 70%);
    pointer-events: none;
}

.ott-parked-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 46px 56px 40px;
    border-radius: 18px;
    background-color: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.08);
    /* Depth first, glow second — the halo is what makes it feel lit, and it is
       kept well under half opacity so it reads as light rather than as neon. */
    box-shadow:
        0 30px 80px -28px rgba(0,0,0,.95),
        0 0 70px -18px rgba(59,130,246,.30);
    animation: ott-parked-breathe 7s ease-in-out infinite;
}

/* The lit edge. A gradient ring drawn as a masked border — a plain border
   cannot hold a gradient, and an outline would not follow the radius. */
.ott-parked-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg,
                rgba(59,130,246,.65) 0%,
                rgba(255,255,255,.10) 42%,
                rgba(139,92,246,.55) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.ott-parked-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 22px;
    border-radius: 13px;
    background: linear-gradient(140deg, #3B82F6 0%, #8B5CF6 100%);
    box-shadow: 0 8px 24px -8px rgba(59,130,246,.7);
}

.ott-parked-mark svg { width: 24px; height: 24px; fill: #FFFFFF; display: block; }

.ott-parked-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
}

.ott-parked-brand {
    display: inline-block;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0);
    padding-bottom: 2px;
    transition: border-color .18s ease, color .18s ease;
}

.ott-parked-brand:hover,
.ott-parked-brand:focus {
    color: #FFFFFF;
    border-bottom-color: rgba(255,255,255,.55);
    outline: none;
}

.ott-parked-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,.36);
}

@keyframes ott-parked-breathe {
    0%, 100% { box-shadow: 0 30px 80px -28px rgba(0,0,0,.95), 0 0 70px -18px rgba(59,130,246,.30); }
    50%      { box-shadow: 0 30px 80px -28px rgba(0,0,0,.95), 0 0 96px -14px rgba(59,130,246,.46); }
}

/* A slow pulse is atmosphere, not information — anyone who has asked for less
   motion loses nothing by having it still. */
@media (prefers-reduced-motion: reduce) {
    .ott-parked-card { animation: none; }
}

@media (max-width: 480px) {
    .ott-parked-card { padding: 38px 30px 32px; }
    .ott-parked-brand { font-size: 23px; }
}