/* ----------------------------------------------------------------------
   Untamed public site stylesheet. Standalone — the public pages load ONLY this
   file (no bootstrap/theme/kendo), so everything the templates reference
   is defined here. YouTube-inspired: flat white canvas, fixed top bar,
   collapsible left navigation, big 16:9 media cards, watch-page layout.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   Equinox — the brand display face, self-hosted. Only ~6.8KB because the source
   site subsets it: full basic Latin, digits and common punctuation are present,
   but a few editorial glyphs are NOT (em dash, ellipsis, pound sign) and fall
   back per-glyph to Poppins. That is the intended behaviour, not a bug.

   niveau-grotesk is deliberately absent here: it is an Adobe Fonts face whose
   licence forbids self-hosting, so it is linked from Typekit in _Layout.cshtml.
   ---------------------------------------------------------------------- */
@font-face {
    font-family: "equinox";
    src: url("/assets/fonts/equinox.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    /* Paint the fallback immediately rather than blocking, then swap Equinox in. */
    font-display: swap;
}

:root {
    --untamed-canvas: #ffffff;          /* page background */
    --untamed-bg: #f9f9f9;              /* inset fills: search field, pills, bubbles */
    --untamed-surface: #ffffff;         /* floating surfaces: menus, dialogs, cards */
    --untamed-border: #e5e5e5;
    --untamed-hover: rgba(16, 23, 43, .05);
    --untamed-text: #10172b;
    --untamed-text-muted: #707376;
    --untamed-text-faint: #a5a6aa;
    --untamed-accent: #2c6485;
    --untamed-accent-hover: #23313f;
    --untamed-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --untamed-font-meta: "DM Sans", "Poppins", system-ui, sans-serif;
    /* Licensed faces, each with a free fallback. When the licensed face is unavailable the
       browser just uses the next family in the stack; _Layout.cshtml logs it to the console
       so a missing font reads as a problem rather than as a design choice. */
    --untamed-font-display: "equinox", "Poppins", system-ui, sans-serif;
    --untamed-font-logo: "niveau-grotesk", "Poppins", system-ui, sans-serif;
    --untamed-breaking: #ef0101;
    --untamed-up: #107c10;
    --untamed-down: #d13438;
    --untamed-radius: 12px;
    --untamed-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --untamed-shadow-hover: 0 4px 10px rgba(16, 24, 40, .10), 0 2px 4px rgba(16, 24, 40, .08);
    --untamed-header-height: 100px;
    --untamed-nav-width: 240px;
    --untamed-nav-mini: 72px;
    /* Centered content column shared by the body and the masthead rows, so the logo, search and
       section nav line up with the page body. --untamed-gutter is the left/right inset a full-width row
       needs for its content to sit in that column (floors at --untamed-shell-pad on narrow screens). */
    --untamed-shell-max: 1600px;
    --untamed-shell-pad: 24px;
    --untamed-gutter: max(var(--untamed-shell-pad), calc(50% - var(--untamed-shell-max) / 2 + var(--untamed-shell-pad)));
}

/* ---- reset-ish base ---- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.site-body {
    margin: 0;
    background: var(--untamed-canvas);
    color: var(--untamed-text);
    font-family: var(--untamed-font-body);
    font-size: 15px;
    line-height: 1.45;
    transition: background-color .2s ease, color .2s ease;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, p, figure {
    margin: 0;
}

button {
    font: inherit;
    cursor: pointer;
}

/* .pin-visually-hidden is PinCore's own name for this same pattern (Cart/Index.cshtml) — aliased
   onto one definition rather than duplicated in the commerce block at the end of this file. */
.visually-hidden,
.pin-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- top bar (fixed, YouTube-style three-zone header) ---- */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--untamed-header-height);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: var(--untamed-canvas);
}

.topbar__start {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar__burger {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--untamed-text);
}

.topbar__burger:hover {
    background: var(--untamed-hover);
}

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 4px;
}

.site-logo__img {
    height: 28px;
    width: auto;
    display: block;
}

/* Blue wordmark on the light theme; the white wordmark on dark. */
.site-logo__img--white {
    display: none;
}

[data-color-mode="dark"] .site-logo__img--blue {
    display: none;
}

[data-color-mode="dark"] .site-logo__img--white {
    display: block;
}

/* centered search: rounded input with the attached button segment */
.site-search {
    flex: 1;
    max-width: 560px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    background: var(--untamed-canvas);
    border: 1px solid var(--untamed-border);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.site-search:focus-within {
    border-color: var(--untamed-accent);
    box-shadow: 0 0 0 2px rgba(34, 63, 119, .15);
}

.site-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 6px 0 16px;
    font: inherit;
    color: var(--untamed-text);
    outline: none;
}

.site-search__btn {
    border: 0;
    border-left: 1px solid var(--untamed-border);
    background: var(--untamed-bg);
    color: var(--untamed-text-muted);
    padding: 0 18px;
    display: flex;
    align-items: center;
}

.site-search__btn:hover {
    color: var(--untamed-text);
}

.topbar__end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.theme-toggle {
    border: 0;
    background: transparent;
    color: var(--untamed-text-muted);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 0;
    transition: color .15s ease, background-color .15s ease;
}

.theme-toggle:hover {
    color: var(--untamed-text);
    background: var(--untamed-hover);
}

/* The header basket link: same round icon button as the theme toggle beside it. */
.header-cart {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--untamed-text-muted);
    line-height: 0;
    transition: color .15s ease, background-color .15s ease;
}

.header-cart:hover {
    color: var(--untamed-text);
    background: var(--untamed-hover);
}

/* Phone-only search icon (shown in the ≤640px masthead block); the same round button as the cart. */
.site-search-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--untamed-text-muted);
    line-height: 0;
    transition: color .15s ease, background-color .15s ease;
}

.site-search-toggle:hover,
.site-search-toggle[aria-expanded="true"] {
    color: var(--untamed-text);
    background: var(--untamed-hover);
}

.theme-toggle__icon {
    width: 18px;
    height: 18px;
}

/* Moon shows in light mode (tap to go dark); sun shows in dark mode (tap to go light). */
.theme-toggle__icon--sun {
    display: none;
}

[data-color-mode="dark"] .theme-toggle__icon--moon {
    display: none;
}

[data-color-mode="dark"] .theme-toggle__icon--sun {
    display: inline;
}

/* YouTube-style outlined sign-in chip (header + sidebar) */
.signin-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--untamed-border);
    border-radius: 18px;
    background: transparent;
    color: var(--untamed-accent);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.signin-link:hover {
    background: rgba(34, 63, 119, .08);
    border-color: transparent;
}

[data-color-mode="dark"] .signin-link:hover {
    background: rgba(77, 171, 247, .15);
}

/* ---- account menu (header avatar dropdown) ---- */

.account-menu {
    position: relative;
    flex-shrink: 0;
}

.account-menu__btn {
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    line-height: 0;
}

.account-menu.is-open .account-menu__btn,
.account-menu__btn:hover {
    border-color: var(--untamed-accent);
}

.account-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.account-menu__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.account-menu__dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    padding: 6px 0;
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    box-shadow: var(--untamed-shadow-hover);
    z-index: 50;
}

.account-menu.is-open .account-menu__dropdown {
    display: block;
}

.account-menu__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--untamed-border);
    margin-bottom: 6px;
}

.account-menu__name {
    font-size: 14px;
    font-weight: 600;
}

.account-menu__email {
    font-size: 12px;
    color: var(--untamed-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-menu__link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 13.5px;
    color: var(--untamed-text);
}

.account-menu__link:hover {
    background: var(--untamed-bg);
    color: var(--untamed-accent);
}

/* Icons match the left navigation's feather strokes: faint at rest, item color on hover. */
.account-menu__icon {
    flex: 0 0 auto;
    color: var(--untamed-text-faint);
}

.account-menu__link:hover .account-menu__icon {
    color: inherit;
}

/* Small separator above Sign out. */
.account-menu__divider {
    border-top: 1px solid var(--untamed-border);
    margin: 6px 10px;
}

.account-menu__signout {
    color: var(--untamed-text-muted);
}

/* ---- left navigation (fixed rail: expanded / mini / drawer) ---- */

.sidenav {
    position: fixed;
    top: var(--untamed-header-height);
    bottom: 0;
    left: 0;
    width: var(--untamed-nav-width);
    z-index: 35;
    padding: 12px;
    background: var(--untamed-canvas);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.sidenav__section {
    display: flex;
    flex-direction: column;
}

.sidenav__heading {
    padding: 6px 12px 4px;
    font-size: 15px;
    font-weight: 700;
}

.sidenav__item {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--untamed-text);
    white-space: nowrap;
    overflow: hidden;
}

.sidenav__item:hover {
    background: var(--untamed-hover);
}

.sidenav__item.is-active {
    background: var(--untamed-bg);
    font-weight: 600;
}

.sidenav__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.sidenav__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsible category group: children stay hidden until the chevron (or an active path) opens it. */
.sidenav__row {
    display: flex;
    align-items: center;
}

.sidenav__row .sidenav__item {
    flex: 1;
    min-width: 0;
}

.sidenav__expand {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--untamed-text-muted);
}

.sidenav__expand:hover {
    background: var(--untamed-hover);
    color: var(--untamed-text);
}

.sidenav__expand svg {
    transition: transform .15s ease;
}

.sidenav__group.is-open .sidenav__expand svg {
    transform: rotate(180deg);
}

.sidenav__children {
    display: none;
    flex-direction: column;
}

.sidenav__group.is-open .sidenav__children {
    display: flex;
}

.sidenav__child {
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0 12px 0 56px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--untamed-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidenav__child:hover {
    background: var(--untamed-hover);
    color: var(--untamed-text);
}

.sidenav__child.is-active {
    background: var(--untamed-bg);
    color: var(--untamed-text);
    font-weight: 600;
}

.sidenav__divider {
    height: 1px;
    margin: 12px 4px;
    background: var(--untamed-border);
}

.sidenav__signin {
    padding: 4px 12px 8px;
}

.sidenav__signin-text {
    font-size: 13px;
    color: var(--untamed-text-muted);
    margin-bottom: 12px;
}

.sidenav__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 4px 12px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--untamed-text-faint);
}

.sidenav__footer a:hover {
    color: var(--untamed-text);
}

.sidenav__copyright {
    width: 100%;
    font-weight: 400;
    margin-top: 4px;
}

.sidenav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 34;
    background: rgba(0, 0, 0, .5);
}

/* ---- page shell: full-width, centered content column (NYT/WaPo style) ---- */

.shell {
    /* No left rail anymore — navigation lives in the top masthead + mega-panel. */
}

.shell__main {
    padding: 24px var(--untamed-shell-pad);
    min-height: calc(100vh - var(--untamed-header-height));
    /* Editorial centered column: fills the viewport until ~1600px, then centers. The masthead rows
       use --untamed-gutter to line their content up with this same column. */
    max-width: var(--untamed-shell-max);
    margin: 0 auto;
}

/* ---- simple shell (error pages: no rail, centered column) ---- */

.simple-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 16px;
}

/* ---- river heading (category landing pages, search) ---- */

.river-heading {
    margin-bottom: 20px;
}

.river-heading__title {
    /* Equinox where the brand uses its display face - section titles. Falls back to Poppins. */
    font-family: var(--untamed-font-display);
    font-size: 26px;
    font-weight: 700;
}

.river-heading__description {
    margin-top: 4px;
    color: var(--untamed-text-muted);
}

/* ---- YouTube-style card grid ---- */

.card-river {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 36px 16px;
}

.yt-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.yt-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: var(--untamed-bg);
}

.yt-card__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

.yt-card__thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--untamed-accent), var(--untamed-accent-hover));
    color: rgba(255, 255, 255, .85);
    font-size: 56px;
    font-weight: 700;
}

.yt-card__thumb-fallback--sm {
    font-size: 28px;
}

.yt-card__badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

.yt-card__details {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.yt-card__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--untamed-accent);
}

.yt-card__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.yt-card__avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.yt-card__info {
    flex: 1;
    min-width: 0;
}

.yt-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--untamed-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.yt-card__titlelink:hover .yt-card__title {
    color: var(--untamed-accent);
}

.yt-card__channel {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.yt-card__channel-link {
    font-size: 13.5px;
    color: var(--untamed-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yt-card__channel-link:hover {
    color: var(--untamed-text);
}

.yt-card__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 1px;
    font-size: 13px;
    color: var(--untamed-text-muted);
}

.yt-card__dot {
    color: var(--untamed-text-faint);
}

.yt-card__engage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--untamed-text-muted);
    white-space: nowrap;
}

a.yt-card__engage:hover {
    color: var(--untamed-accent);
}

/* ---- composed river blocks (category layout templates) ---- */

.river-blocks {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 44px;
}

/* generic duration/play badge on any block thumbnail */
.media-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

/* -- hero + headline stack -- */

.block-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 20px 36px;
    align-items: start;
}

.block-hero__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: var(--untamed-bg);
}

.block-hero__media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.block-hero__title {
    font-family: var(--untamed-font-display);
    margin-top: 14px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.block-hero__titlelink:hover .block-hero__title {
    color: var(--untamed-accent);
}

.block-hero__title .chip {
    position: relative;
    top: -4px;
    margin-right: 8px;
}

.block-hero__summary {
    margin-top: 8px;
    color: var(--untamed-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.block-hero__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--untamed-text-muted);
}

.block-hero__category {
    font-weight: 600;
    color: var(--untamed-accent);
}

.block-hero__stack {
    display: flex;
    flex-direction: column;
}

.block-hero__stack .headline-link {
    padding: 12px 0;
}

.block-hero__stack .headline-link:first-child {
    padding-top: 0;
}

.block-hero__stack .headline-link + .headline-link {
    border-top: 1px solid var(--untamed-border);
}

/* -- headline links (hero stack + headline list) -- */

.headline-link {
    display: block;
    min-width: 0;
}

.headline-link__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--untamed-text);
}

.headline-link:hover .headline-link__title {
    color: var(--untamed-accent);
}

.headline-link__play {
    color: var(--untamed-accent);
    margin-right: 2px;
}

.headline-link__duration {
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--untamed-text-muted);
    white-space: nowrap;
}

.headline-link__meta {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--untamed-text-faint);
}

.headline-link .chip {
    margin-right: 6px;
    vertical-align: 2px;
}

/* -- headline list block: responsive text columns -- */

.block-headlines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 44px;
    border-top: 1px solid var(--untamed-border);
}

.block-headlines .headline-link {
    padding: 12px 0;
    border-bottom: 1px solid var(--untamed-border);
}

/* -- feature pair: two half-width big cards -- */

.block-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.feature-card {
    min-width: 0;
}

.feature-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: var(--untamed-bg);
}

.feature-card__media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.feature-card__title {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.feature-card__titlelink:hover .feature-card__title {
    color: var(--untamed-accent);
}

.feature-card__title .chip {
    position: relative;
    top: -2px;
    margin-right: 6px;
}

.feature-card__summary {
    margin-top: 6px;
    color: var(--untamed-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feature-card__meta {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--untamed-text-faint);
}

/* -- spotlight: one full-width banner, title overlaid on a gradient -- */

.block-spotlight__link {
    position: relative;
    display: block;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: var(--untamed-bg);
}

.block-spotlight__image {
    width: 100%;
    aspect-ratio: 21 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

.block-spotlight__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 96px 28px 24px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .82));
    color: #fff;
}

.block-spotlight__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.block-spotlight__category {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.block-spotlight__title {
    margin-top: 6px;
    max-width: 900px;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.15;
}

.block-spotlight__link:hover .block-spotlight__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.block-spotlight__title .chip {
    position: relative;
    top: -4px;
    margin-right: 8px;
}

.block-spotlight__summary {
    margin-top: 8px;
    max-width: 760px;
    color: rgba(255, 255, 255, .85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.block-spotlight .media-badge {
    top: 12px;
    right: 12px;
    bottom: auto;
}

/* -- video strip: inset band of compact video tiles -- */

.block-videos {
    padding: 20px;
    border-radius: var(--untamed-radius);
    background: var(--untamed-bg);
}

.block-videos__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 700;
}

.block-videos__header svg {
    color: var(--untamed-accent);
}

.block-videos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px 16px;
}

.video-tile {
    display: block;
    min-width: 0;
}

.video-tile__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--untamed-canvas);
}

.video-tile__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.video-tile__title {
    margin-top: 8px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--untamed-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-tile:hover .video-tile__title {
    color: var(--untamed-accent);
}

.video-tile__meta {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--untamed-text-faint);
}

/* ---- chips ---- */

.chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.chip--category {
    background: rgba(34, 63, 119, .08);
    color: var(--untamed-accent);
}

.chip--category:hover {
    background: rgba(34, 63, 119, .16);
}

.chip--breaking {
    background: var(--untamed-breaking);
    color: #fff;
}

/* LIVE marker in the watch page's stats row. Same red as chip--breaking and the EPG's
   is-live block, so "happening now" reads the same wherever it appears. */
.chip--live {
    background: var(--untamed-breaking);
    color: #fff;
}

[data-color-mode="dark"] .chip--category {
    background: rgba(77, 171, 247, .14);
}

/* ---- skeletons & feed status ---- */

.skeleton {
    background: linear-gradient(90deg, #eceff3 25%, #f6f8fa 45%, #eceff3 65%);
    background-size: 200% 100%;
    animation: untamed-shimmer 1.4s infinite;
    border-radius: 6px;
}

@keyframes untamed-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton--line {
    height: 12px;
    margin: 8px 0;
}

.skeleton--block {
    height: 64px;
    margin: 8px 0;
}

.skeleton--image {
    aspect-ratio: 16 / 9;
    border-radius: var(--untamed-radius);
}

.feed-sentinel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 36px 16px;
    margin-top: 36px;
}

.feed-sentinel[hidden] {
    display: none;
}

.skeleton-card {
    padding-bottom: 12px;
}

.skeleton-card .skeleton--line {
    margin: 10px 2px;
}

.feed-end {
    text-align: center;
    color: var(--untamed-text-faint);
    font-size: 13px;
    padding: 24px 0 8px;
}

/* ---- ads ---- */

.ad-placeholder {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 12px, #f4f5f7 12px, #f4f5f7 24px);
    border: 1px dashed var(--untamed-border);
    border-radius: var(--untamed-radius);
    color: var(--untamed-text-faint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* AdSense units are inline by default; block keeps them from collapsing the layout. */
ins.adsbygoogle {
    display: block;
    width: 100%;
}

/* In-river ad card: same footprint as a content card so the grid stays intact. */
.ad-card {
    min-height: 240px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    padding: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ---- search results page ---- */

.search-page__form {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    max-width: 560px;
}

.search-page__input {
    flex: 1;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--untamed-border);
    border-radius: 20px;
    background: var(--untamed-canvas);
    color: var(--untamed-text);
    font-size: 14px;
    outline: none;
}

.search-page__input:focus {
    border-color: var(--untamed-accent);
}

.search-page__btn {
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 20px;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.search-page__btn:hover {
    background: var(--untamed-accent-hover);
}

.search-page__notice {
    background: var(--untamed-bg);
    border-radius: var(--untamed-radius);
    color: var(--untamed-text-muted);
    padding: 28px 20px;
    text-align: center;
}

.search-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 0 8px;
    font-size: 14px;
}

.search-pager__link {
    color: var(--untamed-accent);
    font-weight: 600;
}

.search-pager__link:hover {
    color: var(--untamed-accent-hover);
    text-decoration: underline;
}

.search-pager__status {
    color: var(--untamed-text-faint);
}

/* ---- breaking banner (created by site.js, fixed under the header) ---- */

.breaking-banner {
    position: fixed;
    top: var(--untamed-header-height);
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--untamed-breaking);
    color: #fff;
    font-size: 13px;
    box-shadow: var(--untamed-shadow-hover);
}

.breaking-banner__label {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.breaking-banner__link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-weight: 600;
}

.breaking-banner__link:hover {
    text-decoration: underline;
}

.breaking-banner__dismiss {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    opacity: .85;
}

.breaking-banner__dismiss:hover {
    opacity: 1;
}

/* ---- live stream hero (home page) ---- */

.live-hero {
    max-width: 720px;
    margin: 0 auto 28px;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: var(--untamed-bg);
}

.live-hero__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.live-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--untamed-breaking);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 4px;
}

.live-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: live-hero-pulse 1.4s ease-in-out infinite;
}

@keyframes live-hero-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.live-hero__label {
    font-weight: 600;
    color: var(--untamed-text);
}

.live-hero__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.live-hero__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- shared action pills (like / share / comments) ---- */

.action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 18px;
    background: var(--untamed-bg);
    color: var(--untamed-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .12s ease;
}

.action-pill:hover {
    background: var(--untamed-border);
}

/* Read-only informational pill (e.g. reading time): no pointer, no hover feedback. */
.action-pill--static {
    cursor: default;
    color: var(--untamed-text-muted);
}

.action-pill--static:hover {
    background: var(--untamed-bg);
}

.action-pill__icon {
    flex-shrink: 0;
}

.action-pill--like .action-pill__icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.action-pill--like.is-liked {
    color: var(--untamed-accent);
}

.action-pill--like.is-liked .action-pill__icon {
    fill: currentColor;
    stroke: none;
}

/* ---- watch page (video) ---- */

.preview-banner {
    background: #b91c1c;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: .5rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.watch {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1750px;
    margin: 0 auto;
}

.watch__primary {
    flex: 1;
    min-width: 0;
}

.watch__secondary {
    flex: 0 0 400px;
    min-width: 0;
}

.watch__player {
    margin-bottom: 12px;
}

.watch__video,
.watch__embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--untamed-radius);
    background: #000;
    display: block;
}

.watch__unavailable {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--untamed-radius);
    background: var(--untamed-bg);
    color: var(--untamed-text-faint);
}

/* Shown in place of the player between a broadcast ending and its recording being ready. Holds the
   same 16/9 box as the video so the page does not reflow when the VOD arrives. Dark ground rather
   than the page background: this replaces a player, and should still read as one. */
.watch__offline {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    border-radius: var(--untamed-radius);
    background: #0d1420;
}

.watch__offline-icon {
    color: rgba(255, 255, 255, .45);
}

.watch__offline-title {
    margin: 0;
    color: #fff;
    font-family: var(--untamed-font-display), var(--untamed-font-body), system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.watch__offline-text {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
}

.watch__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}

.watch__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 14px;
}

.watch__channel {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.watch__channel-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--untamed-accent);
}

.watch__channel-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.watch__channel-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.watch__channel-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.watch__channel-name {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watch__channel-sub {
    font-size: 12.5px;
    color: var(--untamed-text-muted);
}

.watch__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* description box: gray rounded panel with bold stats line, clamped text, ...more */
.watch__desc {
    background: var(--untamed-bg);
    border-radius: var(--untamed-radius);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 24px;
}

.watch__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-weight: 600;
}

.watch__desc-text {
    margin-top: 6px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.watch__desc.is-expanded .watch__desc-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.watch__desc-toggle {
    border: 0;
    background: none;
    padding: 6px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--untamed-text);
}

.watch__desc-toggle:hover {
    color: var(--untamed-accent);
}

.watch__source-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--untamed-accent);
}

.watch__source-link:hover {
    text-decoration: underline;
}

/* video facade (click-to-load third-party embed) */
.video-facade {
    position: relative;
    display: block;
    width: 100%;
    /* Its own height, matching .watch__video and .watch__embed. It used to have none: the only thing
       giving this button a size was the poster <img> inside it, and .video-facade__play is
       position:absolute so it contributes nothing. A video with an embed url but no artwork yet -
       which is every video somebody has just created and pasted a YouTube link into - therefore
       rendered a 0x0 button. Invisible, unclickable, and indistinguishable from a page with no
       player on it at all. */
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: #000;
}

.video-facade__poster {
    width: 100%;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: .9;
}

.video-facade__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(34, 63, 119, .92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease;
}

.video-facade:hover .video-facade__play {
    transform: scale(1.08);
    background: var(--untamed-accent-hover);
}

/* ---- compact related rail (watch page "Up next") ---- */

.related-rail__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.related-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-card {
    display: flex;
    gap: 10px;
    border-radius: 10px;
    min-width: 0;
}

.mini-card__thumb {
    position: relative;
    flex-shrink: 0;
    width: 168px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--untamed-bg);
}

.mini-card__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.mini-card__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 2px;
}

.mini-card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--untamed-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-card:hover .mini-card__title {
    color: var(--untamed-accent);
}

.mini-card__channel,
.mini-card__stats {
    font-size: 12.5px;
    color: var(--untamed-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- content pages (article / gallery): centered reading column ---- */

.content-page {
    max-width: 860px;
    margin: 0 auto;
}

.content-page__header {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.content-page__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.content-page__title {
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.2;
    font-weight: 700;
}

.content-page__subtitle {
    font-size: 17px;
    color: var(--untamed-text-muted);
}

.content-page__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--untamed-text-faint);
}

.content-page__dot {
    color: var(--untamed-text-faint);
}

.content-page__source,
.content-page__authors {
    font-weight: 600;
    color: var(--untamed-text-muted);
}

.content-page__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.content-page__hero {
    margin: 0 0 18px;
}

.content-page__hero img {
    width: 100%;
    height: auto;
    border-radius: var(--untamed-radius);
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    background: var(--untamed-bg);
}

.source-logo {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* article body — styles sanitized ingested/authored HTML */

.article-page__body {
    font-size: 17px;
    line-height: 1.65;
}

.article-page__body p {
    margin: 0 0 1em;
}

.article-page__body h2,
.article-page__body h3 {
    margin: 1.4em 0 .5em;
    line-height: 1.3;
}

.article-page__body img {
    border-radius: 8px;
    margin: 1em 0;
    height: auto;
}

/* An editor-embedded player (ContentSanitizer's editorial profile). Full column width at 16/9 so the
   box is reserved before metadata loads, black behind a letterboxed file. */
.article-page__body video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1em 0;
    border-radius: 8px;
    background: #000;
}

.article-page__body a {
    color: var(--untamed-accent);
    text-decoration: underline;
}

.article-page__body blockquote {
    margin: 1em 0;
    padding: .5em 1.2em;
    border-left: 3px solid var(--untamed-accent);
    color: var(--untamed-text-muted);
}

.article-page__body ul,
.article-page__body ol {
    padding-left: 1.4em;
    margin: 0 0 1em;
}

.article-page__body--summary {
    color: var(--untamed-text-muted);
}

/* tag chips (article/video pages → /tags/{slug}) */

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.tag-chips__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--untamed-hover);
    color: var(--untamed-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.tag-chips__chip:hover {
    background: var(--untamed-border);
    color: var(--untamed-text);
}

/* attribution / link-out */

.link-out {
    margin-top: 20px;
}

.link-out__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--untamed-accent);
    color: #fff;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 18px;
    transition: background .15s ease;
}

.link-out__button:hover {
    background: var(--untamed-accent-hover);
}

.link-out__credit {
    font-size: 13px;
    color: var(--untamed-text-muted);
    text-decoration: underline;
}

.link-out__credit:hover {
    color: var(--untamed-accent);
}

/* gallery page */

.gallery {
    margin-bottom: 16px;
}

.gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: var(--untamed-radius);
    scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar {
    display: none;
}

.gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.gallery__slide img {
    width: 100%;
    aspect-ratio: 3 / 2;
    -o-object-fit: cover;
       object-fit: cover;
    background: var(--untamed-bg);
}

.gallery__caption {
    padding: 8px 4px 0;
    font-size: 13px;
    color: var(--untamed-text-muted);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.gallery__credit {
    color: var(--untamed-text-faint);
    white-space: nowrap;
}

.gallery__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}

.gallery__btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--untamed-border);
    background: var(--untamed-surface);
    color: var(--untamed-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}

.gallery__btn:hover {
    background: var(--untamed-bg);
}

.gallery__counter {
    font-size: 13px;
    color: var(--untamed-text-muted);
    min-width: 56px;
    text-align: center;
}

.video-page__summary,
.gallery-page__summary {
    font-size: 16px;
    line-height: 1.6;
    color: var(--untamed-text-muted);
}

/* related stories under articles/galleries */

.related-stories {
    max-width: 860px;
    margin: 32px auto 0;
}

.related-stories__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.related-stories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px 16px;
}

/* ---- generic card surface (settings/auth panels) ---- */

.card {
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
}

/* ---- shared form + button styles (auth, account settings) ---- */

.btn {
    /* niveau-grotesk on buttons, as the brand does. Falls back to Poppins when Adobe Fonts
       does not serve this origin - see the console warning in _Layout.cshtml. */
    font-family: var(--untamed-font-logo);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid var(--untamed-border);
    border-radius: 999px;
    background: var(--untamed-surface);
    color: var(--untamed-text);
    font-size: 14px;
    font-weight: 600;
}

.btn:hover {
    border-color: var(--untamed-accent);
    color: var(--untamed-accent);
}

.btn--primary {
    border-color: var(--untamed-accent);
    background: var(--untamed-accent);
    color: #fff;
}

.btn--primary:hover {
    background: var(--untamed-accent-hover);
    border-color: var(--untamed-accent-hover);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    border-color: var(--untamed-border);
    color: var(--untamed-text);
}

.btn--ghost:hover {
    border-color: var(--untamed-accent);
    color: var(--untamed-accent);
}

.btn--sm {
    padding: 5px 12px;
    font-size: 13px;
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    flex: 1;
}

.form-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

.form-field__input {
    padding: 9px 12px;
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    background: var(--untamed-bg);
    color: var(--untamed-text);
    font: inherit;
}

.form-field__input:focus {
    outline: 2px solid var(--untamed-accent);
    outline-offset: -1px;
}

.form-field__hint {
    font-size: 12.5px;
    color: var(--untamed-text-faint);
}

.form-field__labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.form-field__link {
    font-size: 13px;
    color: var(--untamed-accent);
}

.form-field__link:hover {
    text-decoration: underline;
}

.form-field__error {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--untamed-breaking);
}

/* Password reveal — eye toggle floated over the right edge of a password field (site.js). */
.pw-reveal {
    position: relative;
    display: block;
}

.pw-reveal__input {
    width: 100%;
    padding-right: 42px; /* leave room for the toggle so text never runs under it */
}

.pw-reveal__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--untamed-text-faint);
}

.pw-reveal__toggle:hover {
    color: var(--untamed-text);
}

.pw-reveal__toggle:focus-visible {
    outline: 2px solid var(--untamed-accent);
    outline-offset: -2px;
    color: var(--untamed-text);
}

.form-row {
    display: flex;
    gap: 14px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    cursor: pointer;
}

/* ---- auth pages (sign in / register) ---- */

.auth-card {
    max-width: 460px;
    margin: 24px auto;
    padding: 28px;
}

.auth-card__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.auth-card__lead {
    font-size: 14px;
    color: var(--untamed-text-muted);
    margin-bottom: 20px;
}

.auth-form__submit {
    width: 100%;
    justify-content: center;
}

.auth-card__alt {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--untamed-border);
    font-size: 14px;
    color: var(--untamed-text-muted);
    text-align: center;
}

.auth-card__alt-link {
    color: var(--untamed-accent);
    font-weight: 600;
}

.auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--untamed-border);
    border-radius: 999px;
    background: var(--untamed-surface);
    color: var(--untamed-text);
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

.auth-google:hover {
    border-color: var(--untamed-accent);
    background: var(--untamed-bg);
}

.auth-google__icon {
    display: inline-flex;
    align-items: center;
}

.auth-google__badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--untamed-accent);
    border-radius: 999px;
    padding: 2px 8px;
}

.auth-hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--untamed-text-muted);
    text-align: center;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--untamed-text-faint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--untamed-border);
}

/* ---- account settings ---- */

.account-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 16px;
}

.account-heading__title {
    font-size: 22px;
    font-weight: 700;
}

.account-heading__link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--untamed-accent);
}

.account-card {
    padding: 22px 24px;
    margin-bottom: 16px;
}

.account-card__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.account-card__actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.account-card__actions .btn--primary:only-child {
    margin-left: auto;
}

.avatar-editor {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.avatar-editor__preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 1px solid var(--untamed-border);
    flex-shrink: 0;
}

.avatar-editor__controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.avatar-editor__crop {
    max-height: 320px;
    overflow: hidden;
    margin-bottom: 14px;
    border-radius: 8px;
}

.avatar-editor__crop img {
    display: block;
    max-width: 100%;
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    margin-bottom: 20px;
}

.profile-card__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 1px solid var(--untamed-border);
    flex-shrink: 0;
}

.profile-card__identity {
    flex: 1;
    min-width: 0;
}

.profile-card__name {
    font-size: 20px;
    font-weight: 700;
}

.profile-card__email {
    font-size: 13.5px;
    color: var(--untamed-text-muted);
}

.profile-card__since {
    font-size: 12.5px;
    color: var(--untamed-text-faint);
    margin-top: 2px;
}

.profile-card__edit {
    flex-shrink: 0;
}

/* ---- dashboard pages (History / Liked / Your Profile) ---- */

.dashboard {
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-main {
    min-width: 0;
}

.dashboard-header {
    margin-bottom: 20px;
}

.dashboard-header__title {
    font-size: 26px;
    font-weight: 700;
}

.dashboard-header__lead {
    margin-top: 4px;
    color: var(--untamed-text-muted);
}

.dashboard-empty {
    background: var(--untamed-bg);
    border-radius: var(--untamed-radius);
    padding: 40px 24px;
    text-align: center;
    color: var(--untamed-text-muted);
}

.dashboard-empty .btn {
    margin-top: 14px;
}

/* Date header between days on the History list; spans the whole grid row. */
.dash-river {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px 16px;
}

.dash-day {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--untamed-text-faint);
    padding: 10px 0 2px;
    border-bottom: 1px solid var(--untamed-border);
}

.dash-item {
    position: relative;
    min-width: 0;
}

/* Watch-progress bar under a history card. */
.dash-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--untamed-border);
    margin-top: 8px;
    overflow: hidden;
}

.dash-progress > span {
    display: block;
    height: 100%;
    background: var(--untamed-accent);
}

.dash-progress--done > span {
    background: var(--untamed-up);
}

/* Unlike button pinned on the Liked list thumbnails. */
.dash-unlike {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
}

.dash-unlike:hover {
    background: rgba(0, 0, 0, .75);
}

/* ---- server-message toasts ---- */

.toast-stack {
    position: fixed;
    top: calc(var(--untamed-header-height) + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
    width: min(480px, calc(100vw - 32px));
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-left: 4px solid var(--untamed-accent);
    box-shadow: var(--untamed-shadow-hover);
    font-size: 14px;
}

.toast--success {
    border-left-color: var(--untamed-up);
}

.toast--error,
.toast--warning {
    border-left-color: var(--untamed-breaking);
}

.toast__text {
    flex: 1;
}

.toast__close {
    border: 0;
    background: none;
    color: var(--untamed-text-faint);
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
}

.toast__close:hover {
    color: var(--untamed-text);
}

/* ---- auth prompt modal (anonymous like / engagement) ---- */

body.auth-modal-open {
    overflow: hidden;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-modal[hidden] {
    display: none;
}

.auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .55);
}

.auth-modal__dialog {
    position: relative;
    background: var(--untamed-surface);
    color: var(--untamed-text);
    border-radius: var(--untamed-radius);
    box-shadow: var(--untamed-shadow-hover);
    width: 100%;
    max-width: 380px;
    padding: 28px 24px 24px;
    text-align: center;
}

.auth-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--untamed-text-faint);
}

.auth-modal__close:hover {
    color: var(--untamed-text);
}

.auth-modal__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.auth-modal__text {
    color: var(--untamed-text-muted);
    margin-bottom: 18px;
}

.auth-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-modal__actions .btn {
    justify-content: center;
    width: 100%;
}

/* ----------------------------------------------------------------------
   Comments (Facebook-style thread) on content pages.
   ---------------------------------------------------------------------- */

.comments-mount {
    max-width: 860px;
    margin-top: 8px;
}


/* The episode's chat, under the description on the watch page. The panel brings its own styling
   (.lv-chat); this only gives it a home in the main column and a height, since .lv-chat is built to
   fill the home page's side rail and has no intrinsic one. */
.watch__chat {
    margin-bottom: 24px;
}

.watch__chat .lv-chat {
    height: 520px;
}

.watch__chat-note {
    margin-top: 8px;
}
.watch .comments-mount {
    max-width: none;
}

.comments__loading {
    color: var(--untamed-text-faint);
    font-size: 14px;
    padding: 8px 0;
}

.comments__head {
    margin-bottom: 14px;
}

.comments__title {
    font-size: 17px;
    font-weight: 700;
}

.comments__signin {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--untamed-accent);
    font-weight: 600;
    font-size: 14px;
}

/* ---- composer (top-level + reply) ---- */

.cmt-composer {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.cmt-composer--reply {
    margin: 8px 0 4px;
}

.cmt-composer__field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: var(--untamed-bg);
    border: 1px solid var(--untamed-border);
    border-radius: 18px;
    padding: 6px 6px 6px 14px;
}

.cmt-composer__input {
    flex: 1;
    border: 0;
    background: none;
    resize: none;
    outline: none;
    color: var(--untamed-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    max-height: 200px;
    padding: 4px 0;
}

.cmt-composer__submit {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--untamed-accent);
}

.cmt-composer__submit:hover {
    background: var(--untamed-border);
}

/* ---- a comment ---- */

.cmt {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
}

.cmt__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    flex-shrink: 0;
    background: var(--untamed-border);
}

.cmt__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.cmt__main {
    flex: 1;
    min-width: 0;
}

.cmt__bubblewrap {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 100%;
}

.cmt__bubble {
    background: var(--untamed-bg);
    border-radius: 16px;
    padding: 8px 12px;
    min-width: 0;
}

.cmt__author {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text);
}

.cmt__body {
    font-size: 14px;
    line-height: 1.4;
    color: var(--untamed-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* like count pill hanging off the bubble bottom-right, Facebook-style */
.cmt__likepill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: flex-end;
    margin-bottom: -4px;
    padding: 1px 6px 1px 5px;
    border-radius: 999px;
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    box-shadow: var(--untamed-shadow);
    font-size: 11px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

.cmt__likepill svg {
    color: var(--untamed-accent);
}

.cmt__likepill.is-empty {
    display: none;
}

/* moderator-removed placeholder */
.cmt__avatar--removed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--untamed-bg);
    color: var(--untamed-text-faint);
}

.cmt__bubble--removed {
    background: transparent;
    border: 1px dashed var(--untamed-border);
}

.cmt__body--removed {
    color: var(--untamed-text-faint);
    font-style: italic;
}

/* the ⋯ menu */
.cmt__menu {
    position: relative;
    align-self: center;
    opacity: 0;
    transition: opacity .1s ease;
}

.cmt__bubblewrap:hover .cmt__menu,
.cmt__menu.is-open {
    opacity: 1;
}

.cmt__menubtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--untamed-text-faint);
}

.cmt__menubtn:hover {
    background: var(--untamed-bg);
}

.cmt__menupop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 120px;
    padding: 4px 0;
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    box-shadow: var(--untamed-shadow-hover);
    z-index: 20;
}

.cmt__menu.is-open .cmt__menupop {
    display: block;
}

.cmt__menupop button {
    display: block;
    width: 100%;
    padding: 7px 14px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 13.5px;
    color: var(--untamed-text);
}

.cmt__menupop button:hover {
    background: var(--untamed-bg);
    color: var(--untamed-accent);
}

/* actions row: Like · Reply · time · Edited */
.cmt__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px 0;
    font-size: 12px;
    color: var(--untamed-text-faint);
}

.cmt__action {
    border: 0;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--untamed-text-muted);
}

.cmt__action:hover {
    text-decoration: underline;
}

.cmt__action--like.is-liked {
    color: var(--untamed-accent);
}

.cmt__time {
    font-weight: 400;
}

.cmt__edited {
    font-weight: 400;
    font-style: italic;
}

/* replies indent under their parent */
.cmt__replies {
    margin-left: 20px;
    padding-left: 12px;
    border-left: 2px solid var(--untamed-border);
}

.cmt--reply .cmt__avatar {
    width: 28px;
    height: 28px;
}

.cmt__more-replies,
.comments__more {
    margin: 10px 0 0;
    border: 0;
    background: none;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--untamed-text-muted);
}

.cmt__more-replies {
    margin-left: 32px;
}

.cmt__more-replies:hover,
.comments__more:hover {
    text-decoration: underline;
    color: var(--untamed-accent);
}

/* inline edit */
.cmt-edit {
    margin-top: 4px;
}

.cmt-edit .cmt-composer__input {
    width: 100%;
    background: var(--untamed-bg);
    border: 1px solid var(--untamed-border);
    border-radius: 12px;
    padding: 8px 12px;
}

.cmt-edit__actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* ---- save-to-playlist dialog ---- */

.save-modal__dialog {
    text-align: left;
    max-width: 340px;
}

.save-modal__dialog .auth-modal__title {
    text-align: left;
    font-size: 17px;
}

.save-modal__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 12px 0;
    max-height: 280px;
    overflow-y: auto;
}

.save-modal__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.save-modal__row:hover {
    background: var(--untamed-bg);
}

.save-modal__row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--untamed-accent);
}

.save-modal__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.save-modal__hint {
    font-size: 12px;
}

.save-modal__create {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--untamed-border);
}

.save-modal__create input {
    flex: 1;
}

/* ---- shows index tiles ---- */

.showtile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px 16px;
}

.showtile__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: var(--untamed-bg);
}

.showtile__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.showtile__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--untamed-accent), var(--untamed-accent-hover));
    color: rgba(255, 255, 255, .85);
    font-size: 44px;
    font-weight: 700;
}

.showtile__live {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* schedule state chips — upgraded client-side from the neutral "On the schedule" */
.showtile__live.is-live {
    background: #d7141a;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.showtile__live.is-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: showtile-live-pulse 1.6s ease-in-out infinite;
}

.showtile__live.is-next {
    background: #175cd3;
}

.showtile__live.is-soon {
    background: rgba(0, 0, 0, .72);
}

@keyframes showtile-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* =====================================================================
   Global Fox-style masthead (shared partial _SiteHeader; on every page)
   ===================================================================== */
.site-masthead {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--untamed-canvas);
}

/* (a) black sister-site bar */
.globalnav {
    height: 33px;
    background: #333;
    display: flex;
    align-items: center;
    padding: 0 var(--untamed-gutter);
}

.globalnav__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.globalnav__inner::-webkit-scrollbar { display: none; }

.globalnav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    white-space: nowrap;
}

.globalnav__item + .globalnav__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: #555;
}

.globalnav__logo {
    height: 18px;
    width: auto;
    filter: grayscale(1) brightness(1.7) opacity(.72);
    transition: filter .15s ease;
}

.globalnav__item:hover .globalnav__logo,
.globalnav__item:focus-visible .globalnav__logo { filter: none; }

.globalnav__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9aa0a6;
    transition: color .15s ease;
}

.globalnav__item:hover .globalnav__label,
.globalnav__item:focus-visible .globalnav__label { color: #fff; }

/* (b) blue divider rule */
.site-masthead__rule {
    height: 3px;
    background: #1a5fb4;
}

/* (c) logo + trending + tools row */
.site-masthead__main {
    height: 64px;
    /* Three columns so the search sits in the true center of the page regardless of how wide the
       left (logo + trending) or right (tools) groups are. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 var(--untamed-gutter);
    background: var(--untamed-canvas);
    border-bottom: 1px solid var(--untamed-border);
}

.site-masthead__left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0; /* let the trending strip truncate instead of pushing the search off-center */
}

.site-masthead__burger {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--untamed-text);
}

.site-masthead__burger:hover { background: var(--untamed-hover); }

.site-masthead__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-masthead__logo-img {
    height: 42px;
    width: auto;
    display: block;
}

.site-masthead__logo-img--white { display: none; }

[data-color-mode="dark"] .site-masthead__logo-img--blue { display: none; }
[data-color-mode="dark"] .site-masthead__logo-img--white { display: block; }

/* trending strip — its own full-width row below the section bar */
.site-trending {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    height: 34px;
    padding: 0 var(--untamed-gutter);
    background: var(--untamed-canvas);
    border-bottom: 1px solid var(--untamed-border);
}

.site-trending__label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--untamed-breaking);
}

.site-trending__items {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .28s ease;
}

/* JS toggles this to cross-fade when the visible set of headlines pages over */
.site-trending__items.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .site-trending__items { transition: none; }
}

.site-trending__item {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* alternate red / blue across items */
.site-trending__item:nth-child(odd) { color: #c20017; }
.site-trending__item:nth-child(even) { color: #0052bd; }
.site-trending__item:hover { text-decoration: underline; }

/* thin vertical divider between items — not after the last one */
.site-trending__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--untamed-border);
}

/* the last item that currently fits on screen (JS-managed) never shows a trailing divider */
.site-trending__item.is-trailing::after { display: none; }

/* right-aligned tools: search / theme / account */
.site-masthead__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end; /* right column: hug the right edge */
    flex-shrink: 0;
}

/* Middle grid column: the search, centered on the page. */
.site-masthead .site-search {
    justify-self: center;
    width: 360px;
    max-width: 100%;
}

@media (max-width: 900px) {
    .site-trending { display: none; }
    .site-masthead .site-search { width: 280px; }
}

@media (max-width: 640px) {
    /* Match the body's tighter mobile gutter so the masthead stays aligned with it. */
    :root { --untamed-shell-pad: 12px; }
    .globalnav { display: none; }
    /* There is no room for the search between the logo and the tools at phone width (it squeezed
       to nothing, its button under Sign In), so it collapses behind the search icon and opens as a
       full-width second row. The first row keeps the 57px bar height. */
    .site-masthead__main {
        height: auto;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: 57px;
        gap: 0 10px;
    }
    .site-masthead__logo-img { height: 32px; }
    .site-masthead__tools { gap: 6px; grid-column: 3; grid-row: 1; }
    .site-search-toggle { display: inline-flex; }
    .site-masthead .site-search { display: none; }
    .site-masthead .site-search.is-open {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 0 0 10px;
    }
    /* Hide the masthead theme toggle on mobile — it lives in the account menu there. */
    .theme-toggle { display: none; }
}

/* ===== (d) section nav bar + All-Sections mega-panel ===== */
.site-nav {
    display: flex;
    align-items: stretch;
    height: 46px;
    padding: 0 var(--untamed-gutter);
    background: var(--untamed-canvas);
    border-bottom: 1px solid var(--untamed-border);
}

/* The "All Sections" mega trigger — leads the bar, divided from the section links. */
.site-nav__all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--untamed-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-right: 1px solid var(--untamed-border);
}

.site-nav__all:hover { background: var(--untamed-hover); }
.site-nav__all[aria-expanded="true"] { background: var(--untamed-hover); }

.site-nav__links {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 6px;
}

.site-nav__links::-webkit-scrollbar { display: none; }

.site-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--untamed-text);
    border-bottom: 3px solid transparent;
}

.site-nav__link:hover { color: var(--untamed-accent); }

.site-nav__link.is-active {
    color: var(--untamed-accent);
    border-bottom-color: var(--untamed-accent);
}

/* Mobile: navigate via the hamburger/mega only — hide the inline section links. Placed after the
   base .site-nav__links rule so the display:none wins the source-order cascade. */
@media (max-width: 640px) {
    .site-nav__links { display: none; }
    .site-nav__all { border-right: 0; }
}

/* Sub-category bar: the selected section's children, shown under the section nav on category pages. */
.site-subnav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 40px;
    padding: 0 var(--untamed-gutter);
    background: var(--untamed-bg);
    border-bottom: 1px solid var(--untamed-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.site-subnav::-webkit-scrollbar { display: none; }

.site-subnav__link {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text-muted);
    border-bottom: 2px solid transparent;
}

.site-subnav__link:hover { color: var(--untamed-accent); }

.site-subnav__link.is-active {
    color: var(--untamed-accent);
    border-bottom-color: var(--untamed-accent);
}

/* Floating staff admin toolbar — injected by site.js only for Admin/ContentCreator, never in the
   server HTML. Pinned to the lower centre of the viewport, floating above the page content. */
.admin-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 24px);
    padding: 8px 12px;
    background: #1a5fb4;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-bar::-webkit-scrollbar { display: none; }

.admin-bar__label {
    flex-shrink: 0;
    padding-left: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .85;
}

.admin-bar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1a5fb4;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.admin-bar__btn:hover { background: #eaf1fb; }

/* Mega-panel: drops below the (sticky) masthead on desktop; full-screen sheet on mobile. */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 210;
    background: var(--untamed-canvas);
    border-bottom: 1px solid var(--untamed-border);
    box-shadow: var(--untamed-shadow-hover);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.mega__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 24px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px 28px;
}

.mega__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mega__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--untamed-text-muted);
}

.mega__heading--link {
    color: var(--untamed-text);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}

.mega__heading--link:hover,
.mega__heading--link.is-active { color: var(--untamed-accent); }

.mega__heading-icon { flex-shrink: 0; color: var(--untamed-text-muted); }

.mega__link {
    padding: 5px 0;
    font-size: 14px;
    color: var(--untamed-text-muted);
}

.mega__link:hover { color: var(--untamed-accent); }
.mega__link.is-active { color: var(--untamed-accent); font-weight: 600; }

.mega__signin-text {
    font-size: 13px;
    color: var(--untamed-text-muted);
    margin: 2px 0 10px;
}

/* Horizontal rule inside a mega column (separates Browse's Home link from the You menu). */
.mega__divider {
    height: 1px;
    margin: 12px 0;
    background: var(--untamed-border);
}

/* Below the masthead (z-index 200) — the mega-panel lives INSIDE the masthead's stacking context,
   so the backdrop must sit under the whole header or it would paint over the panel and swallow
   clicks. It dims the page content (which is below it); the header + open panel stay above it. */
.mega-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, .4);
}

/* Page scroll is locked while the mega-panel is open (the backdrop owns the page). */
body.mega-open { overflow: hidden; }

@media (max-width: 900px) {
    /* Full-screen sheet: the mega covers the viewport below the masthead-height bar. */
    .mega {
        position: fixed;
        top: 0;
        bottom: 0;
        max-height: none;
        padding-top: 8px;
    }

    .mega__inner { grid-template-columns: 1fr 1fr; padding: 16px; }
}

@media (max-width: 560px) {
    .mega__inner { grid-template-columns: 1fr; }
}

/* ===== configurable ad banners (home slots) ===== */
.ad-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 18px 0;
}

.ad-banner__link { display: block; max-width: 100%; }

.ad-banner__img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--untamed-radius);
}

.ad-banner__tag,
.ad-banner--placeholder span {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--untamed-text-faint);
}

.ad-banner--placeholder {
    width: 100%;
    min-height: 90px;
    justify-content: center;
    border: 1px dashed var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
}

/* ===== home page dark mode (best-effort; light theme unchanged) ===== */
[data-color-mode="dark"] .lp-body { background: var(--untamed-canvas); color: var(--untamed-text); }
[data-color-mode="dark"] .lp-hero,
[data-color-mode="dark"] .lp { background: transparent; }
[data-color-mode="dark"] .lp-tabs { border-bottom-color: var(--untamed-border); }
[data-color-mode="dark"] .lp-tab { color: var(--untamed-text-muted); }
[data-color-mode="dark"] .lp-tab.is-active { color: var(--untamed-text); }

/* .lp-epg used to be the last selector in this group and has been dropped FROM the group — its base
   rule reads ground and border from tokens now, so dark follows on its own. The other four still
   need this: their base rules carry light literals. */
[data-color-mode="dark"] .lp-side__card,
[data-color-mode="dark"] .lp-engage,
[data-color-mode="dark"] .lp-showcard,
[data-color-mode="dark"] .lp-reads__item {
    background: var(--untamed-surface);
    border-color: var(--untamed-border);
}

[data-color-mode="dark"] .lp-sec__title,
[data-color-mode="dark"] .lp-epg__title,
[data-color-mode="dark"] .lp-onair__title,
[data-color-mode="dark"] .lp-topnews__headline,
[data-color-mode="dark"] .lp-showcard__title,
[data-color-mode="dark"] .lp-topnews__label {
    color: var(--untamed-text);
}

[data-color-mode="dark"] .lp-byl,
[data-color-mode="dark"] .lp-epg__hour,
[data-color-mode="dark"] .lp-sec__all,
[data-color-mode="dark"] .lp-topnews__all,
[data-color-mode="dark"] .lp-epg__current {
    color: var(--untamed-text-muted);
}

/* The .lp-epg__block dark overrides that used to sit here are gone: the base rules take their
   colours from tokens now, so dark mode follows automatically and there is nothing left to
   restate. Only the "Watching …" pair below still needs a dark-scoped rule. */
[data-color-mode="dark"] .lp-epg__hour { border-left-color: var(--untamed-border); }
[data-color-mode="dark"] .lp-engage__watching { color: var(--untamed-text-muted); }
[data-color-mode="dark"] .lp-engage__watching strong { color: var(--untamed-text); }

[data-color-mode="dark"] .lp-pill {
    background: var(--untamed-bg);
    border-color: var(--untamed-border);
    color: var(--untamed-text);
}

[data-color-mode="dark"] .lp-foot {
    background: var(--untamed-bg);
    border-color: var(--untamed-border);
    color: var(--untamed-text-muted);
}

.showtile__title {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--untamed-text);
}

.showtile:hover .showtile__title {
    color: var(--untamed-accent);
}

.showtile__host {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--untamed-text-muted);
}

/* ---- show landing page ---- */

/* YouTube-channel style header: banner, then an identity row (avatar + title + stats). */
.showpage__hero {
    position: relative;
    border-radius: var(--untamed-radius);
    overflow: hidden;
    background: var(--untamed-bg);
}

/* A blurred copy of the banner fills the letterbox either side of it on wide screens. */
.showpage__hero::before {
    content: "";
    position: absolute;
    inset: -40px;
    background: var(--showpage-banner, none) center / cover no-repeat;
    filter: blur(32px) brightness(0.55);
}

/* Banners are authored 16:9. Cropping one to a short strip (object-fit: cover under a max-height)
   cut the title off, and showing it full width made it ~870px tall on desktop. So the box follows
   16:9 up to a height cap and contain scales the whole image into it; on phones the cap never
   binds and the image fills the box edge to edge. */
.showpage__banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 400px;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
}

.showpage__hero--plain {
    background: linear-gradient(135deg, var(--untamed-accent), var(--untamed-accent-hover));
    min-height: 120px;
}

.showpage__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 18px 0 20px;
}

.showpage__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--untamed-border);
    background: var(--untamed-bg);
}

.showpage__identity-text {
    min-width: 0;
}

.showpage__title {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--untamed-text);
}

.showpage__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    color: var(--untamed-text-muted);
}

.showpage__stat strong {
    color: var(--untamed-text);
    font-weight: 700;
}

.showpage__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--untamed-text-muted);
}

.showpage__host {
    font-weight: 600;
}

.showpage__airchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--untamed-bg);
    border: 1px solid var(--untamed-border);
    font-size: 12px;
    font-weight: 600;
}

.showpage__description {
    max-width: 860px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--untamed-text-muted);
    margin-bottom: 18px;
    white-space: pre-line;
}

/* Subscribe control (YouTube-style pill + notification/unsubscribe menu). */
.showpage__subscribe {
    position: relative;
    margin-bottom: 28px;
}

.btn-subscribe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: var(--untamed-text);
    color: var(--untamed-canvas);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    transition: opacity .15s ease, background .15s ease;
}

.btn-subscribe:hover {
    opacity: .85;
}

.btn-subscribe.is-subscribed {
    background: var(--untamed-bg);
    color: var(--untamed-text);
    border: 1px solid var(--untamed-border);
}

.btn-subscribe.is-subscribed:hover {
    background: var(--untamed-hover);
    opacity: 1;
}

.btn-subscribe__caret {
    margin-left: -2px;
}

.subscribe-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 220px;
    padding: 6px;
    background: var(--untamed-canvas);
    border: 1px solid var(--untamed-border);
    border-radius: 12px;
    box-shadow: var(--untamed-shadow-hover);
}

.subscribe-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: none;
    color: var(--untamed-text);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
}

.subscribe-menu__item:hover {
    background: var(--untamed-hover);
}

.subscribe-menu__item.is-active {
    font-weight: 700;
}

.subscribe-menu__item.is-active::after {
    content: "✓";
    margin-left: auto;
    color: var(--untamed-accent);
}

.subscribe-menu__item--danger {
    color: var(--untamed-breaking);
}

.subscribe-menu__sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--untamed-border);
}

/* Reused subscribe control (content pages + subscriptions list) — drop the show-page margin. */
.watch__bar .showpage__subscribe,
.content-page__actions .showpage__subscribe,
.subs-row .showpage__subscribe {
    margin-bottom: 0;
}

/* ---- Subscriptions page ---- */

.dashboard-header--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.subs-toggle.is-active {
    background: var(--untamed-hover);
}

.subs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 900px;
}

.subs-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 8px;
    border-bottom: 1px solid var(--untamed-border);
}

.subs-row__avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--untamed-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subs-row__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

.subs-row__avatar-fallback {
    font-size: 26px;
    font-weight: 700;
    color: var(--untamed-text-muted);
}

.subs-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.subs-row__title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--untamed-text);
}

.subs-row__title:hover {
    text-decoration: underline;
}

.subs-row__stat {
    margin-top: 2px;
    font-size: 13px;
    color: var(--untamed-text-muted);
}

.subs-row__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--untamed-text-muted);
}

.subs-row__desc:hover {
    color: var(--untamed-text);
}

.subs-row__action {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .subs-row {
        flex-wrap: wrap;
    }

    .subs-row__avatar {
        width: 52px;
        height: 52px;
    }

    .subs-row__action {
        width: 100%;
    }
}

.showpage__episodes-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

@media (max-width: 560px) {
    .showpage__identity {
        gap: 12px;
    }

    .showpage__avatar {
        width: 56px;
        height: 56px;
    }
}

/* ---- playlists dashboard ---- */

.playlist-create {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin-bottom: 20px;
}

.playlist-create__input {
    flex: 1;
}

.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.playlist-card {
    padding: 14px 16px;
}

.playlist-card__main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.playlist-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--untamed-bg);
    color: var(--untamed-accent);
    flex-shrink: 0;
}

.playlist-card__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.playlist-card__main:hover .playlist-card__name {
    color: var(--untamed-accent);
}

.playlist-card__count {
    display: block;
    font-size: 12.5px;
    color: var(--untamed-text-muted);
}

.playlist-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.playlist-rename summary {
    list-style: none;
    cursor: pointer;
}

.playlist-rename summary::-webkit-details-marker {
    display: none;
}

.playlist-rename__form {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* ----------------------------------------------------------------------
   Live homepage (design handoff "2b — Program Guide"). Standalone page with
   its own masthead; light-only by design. Tokens straight from the handoff:
   blue #175cd3, live red #e5484d, ink #141a21, secondary #5b6672, muted
   #8b97a5, panel #f6f8fa, borders #dfe4ea/#e6eaef/#eceff3/#f2f5f8.
   EPG scale: 96px = 1 hour, block height 80px.
   ---------------------------------------------------------------------- */

body.lp-body {
    background: #fff;
    color: #141a21;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* The standalone homepage renders its own masthead (.lp-mast), not the shell's fixed topbar,
       so drop the body top-padding that exists only to clear that topbar — otherwise it shows as
       an empty ~56px band at the top. (body.lp-body matches the same specificity as body.site-body
       and comes later, so it wins.) */
    padding-top: 0;
}

.lp {
    /* Pinned left like the shows page; the shell's 2450px cap governs overall width. */
    max-width: none;
    margin: 0;
}

.lp-byl {
    font-size: 11.5px;
    color: #8b97a5;
    line-height: 1.35;
}

.lp-kick {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #175cd3;
    margin-top: 10px;
}

@keyframes lp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.lp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5484d;
    animation: lp-pulse 1.4s ease-in-out infinite;
}

/* ---- masthead ---- */

.lp-mast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 16px;
}

.lp-logo img {
    height: 34px;
    width: auto;
    display: block;
}

.lp-mast__tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f1f4f7;
    border: 1px solid #e6eaef;
    border-radius: 8px;
    width: 210px;
}

.lp-search input {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 12.5px;
    color: #141a21;
    width: 100%;
}

.lp-search input::-moz-placeholder {
    color: #9aa5b1;
}

.lp-search input::placeholder {
    color: #9aa5b1;
}

.lp-subscribe {
    padding: 8px 16px;
    background: #175cd3;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.lp-subscribe:hover {
    background: #0f3f96;
}

/* ---- category tabs ---- */

.lp-tabs {
    display: flex;
    gap: 2px;
    padding: 0 26px;
    border-top: 1px solid #eceff3;
    border-bottom: 1px solid #eceff3;
}

.lp-tab {
    padding: 12px 14px;
    font-size: 13.5px;
    color: #5b6672;
}

.lp-tab.is-active {
    font-weight: 600;
    color: #141a21;
    box-shadow: inset 0 -2px 0 #175cd3;
}

.lp-tab:hover {
    color: #141a21;
}

/* ---- hero: player + side column ---- */

.lp-hero {
    display: grid;
    /* YouTube watch proportions: video:chat = 1555:558 with a 16px gutter. The columns scale
       proportionally with the window; the hero stops growing once the video hits 1555px
       (1555 + 16 + 558 + the 60px side padding) and stays pinned left. The chat keeps a
       usability floor on narrow screens; below 900px the hero stacks (media query below). */
    grid-template-columns: minmax(0, 1555fr) minmax(260px, 558fr);
    gap: 16px;
    padding: 24px 30px;
    max-width: 2189px;
}

.lp-player {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #0d1420;
}

.lp-player__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lp-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(13, 20, 32, .72);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
}

.lp-player__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    pointer-events: none;
}

/* "· 1.2K watching" inside the LIVE pill: the pill's size, not its tracked-out caps. */
.lp-live-pill__watching {
    font-weight: 600;
    letter-spacing: 0;
    opacity: .9;
}

.lp-live-pill__watching::before {
    content: "·";
    margin-right: 6px;
}

.lp-player__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, .18);
    pointer-events: none;
}

.lp-player__progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: #e5484d;
    transition: width 1s linear;
}

/* Home live player inner wrapper — fills the aspect box in normal flow; site.js
   pins it to the corner (see the shared sticky-player rules below). */
.lp-player__inner {
    position: absolute;
    inset: 0;
}

/* Off-air state, shown in place of the player when the channel has no stream url. Fills the same
   16/9 box so the hero layout is identical whether or not Untamed is broadcasting. */
.lp-player__offair {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
}

/* The `hidden` attribute has to beat the rule above, and on its own it does not: [hidden] is a UA
   rule of the same specificity as .lp-player__offair, so the author rule wins on order and the card
   renders over the player from first paint — which is what the "starting soon" text stuck over a
   playing stream was. Matching the specificity is the fix. */
.lp-player__offair[hidden] {
    display: none;
}

.lp-player__offair-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .62);
}

.lp-player__offair-text {
    margin: 0;
    max-width: 34ch;
    color: #fff;
    font-size: 15px;
}

/* ---- sticky mini-player: pinned bottom-right once the video scrolls off-screen ----
   Shared by the home live player (.lp-player) and the watch page (.watch__player).
   The host stays in flow (JS reserves its height) so the page never jumps and the
   iframe is never re-parented; only the inner media wrapper is pinned. */
[data-sticky-player].is-floating [data-sticky-media] {
    position: fixed;
    /* inset shorthand resets top/left to auto so the home player's normal inset:0
       doesn't over-constrain the pinned box (which would stick it top-left). */
    inset: auto 20px 20px auto;
    width: 360px;
    max-width: 62vw;
    aspect-ratio: 16 / 9;
    height: auto;
    z-index: 1000;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
    animation: sticky-player-in .2s ease-out;
}

[data-sticky-player].is-floating [data-sticky-media] > iframe,
[data-sticky-player].is-floating [data-sticky-media] > video,
[data-sticky-player].is-floating [data-sticky-media] > .watch__video,
[data-sticky-player].is-floating [data-sticky-media] > .watch__embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

@keyframes sticky-player-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sticky-player__controls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    gap: 6px;
    z-index: 3;
}

[data-sticky-player].is-floating [data-sticky-media] .sticky-player__controls {
    display: flex;
}

.sticky-player__btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 20, 32, .72);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.sticky-player__btn:hover {
    background: rgba(13, 20, 32, .96);
}

@media (max-width: 640px) {
    [data-sticky-player].is-floating [data-sticky-media] {
        width: 220px;
        inset: auto 12px 12px auto;
    }
}

.lp-side {
    position: relative;
}

.lp-side__card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6eaef;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.lp-onair {
    padding: 16px 16px 14px;
}

.lp-onair__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    color: #e5484d;
}

.lp-onair__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    color: #141a21;
    margin-top: 7px;
}

.lp-onair .lp-byl {
    margin-top: 4px;
}

.lp-topnews {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eceff3;
    padding: 13px 16px 14px;
    min-height: 0;
}

.lp-topnews__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.lp-topnews__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8b97a5;
}

.lp-topnews__all {
    font-size: 11.5px;
    font-weight: 600;
    color: #175cd3;
}

.lp-topnews__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.lp-topnews__item {
    display: flex;
    gap: 10px;
    padding: 7px 0;
}

.lp-topnews__item + .lp-topnews__item {
    border-top: 1px solid #f2f5f8;
}

.lp-topnews__rank {
    font-size: 12px;
    font-weight: 700;
    color: #175cd3;
    width: 11px;
    flex-shrink: 0;
}

.lp-topnews__headline {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #141a21;
    line-height: 1.28;
}

.lp-topnews__body .lp-byl {
    display: block;
    margin-top: 3px;
}

.lp-topnews__item:hover .lp-topnews__headline {
    color: #175cd3;
}

/* ---- live engagement bar ---- */

/* The on-air strip and the schedule below it are ONE panel in two halves, and this is the top half:
   it rounds at the top and deliberately carries no bottom border, because the schedule's own top
   border is the divider between them.

   They are siblings in the markup, not nested, so before this they met as two separate boxes — a
   square-cornered strip sitting on a fully rounded panel, which cut a notch out of each side at the
   join and left the strip's own top corners hard.

   padding-top was also 0, which left the ON AIR / UP NEXT label hard against the top edge. */
.lp-engage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 30px 20px;
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-bottom: 0;
    border-radius: var(--untamed-radius) var(--untamed-radius) 0 0;
}

.lp-engage__watching {
    margin-right: auto;
    font-size: 13px;
    color: #5b6672;
}

.lp-engage__watching strong {
    color: #141a21;
}

.lp-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #e6eaef;
    background: #fff;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    color: #5b6672;
    cursor: pointer;
}

.lp-pill:hover {
    border-color: #cfe0fb;
    color: #141a21;
}

/* The .lp-pill--like / .lp-pill__heart halves of these rules are gone with the on-air strip's like
   button. Episode cards keep theirs — a like there means the episode it sits on. */
.lp-cardaction--like svg {
    fill: none;
    stroke: currentColor;
}

.lp-cardaction--like.is-liked {
    color: var(--untamed-breaking);
}

.lp-cardaction--like.is-liked svg {
    fill: var(--untamed-breaking);
    stroke: var(--untamed-breaking);
}

.lp-share {
    position: relative;
}

.lp-share__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 172px;
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(20, 26, 33, .14);
    padding: 5px;
    z-index: 60;
}

.lp-share__menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #141a21;
    padding: 9px 11px;
    border-radius: 7px;
}

.lp-share__menu button:hover {
    background: #f1f4f7;
}

/* ---- EPG ---- */

/* A rounded panel like every other section, and deliberately a DIFFERENT ground from the programme
   blocks inside it. Both used var(--untamed-surface), so a block was distinguishable from the strip
   only by its 1px border — which is most of why the schedule was hard to read. The strip is the
   inset fill now and the blocks stay the raised surface, so they read as cards sitting in a well. */
.lp-epg {
    padding: 20px 30px;
    background: var(--untamed-bg);
    border: 1px solid var(--untamed-border);

    /* Bottom corners only. This is the lower half of the panel .lp-engage opens — its top edge is
       the divider between the two, so rounding it here would notch the strip sitting on it. */
    border-radius: 0 0 var(--untamed-radius) var(--untamed-radius);
}

.lp-epg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.lp-epg__title {
    font-size: 15px;
    font-weight: 700;
    color: #141a21;
}

.lp-epg__days {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}

.lp-epg__nav {
    border: 0;
    background: none;
    color: #175cd3;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.lp-epg__current {
    font-weight: 700;
    color: #141a21;
}

.lp-epg__carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.lp-epg__arrow {
    flex: 0 0 auto;
    align-self: center;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--untamed-border);
    background: var(--untamed-surface);
    color: var(--untamed-text);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.lp-epg__arrow:hover:not(:disabled) {
    background: #175cd3;
    border-color: #175cd3;
    color: #fff;
    box-shadow: 0 3px 10px rgba(23, 92, 211, .35);
}

.lp-epg__arrow:disabled {
    opacity: .3;
    cursor: default;
    box-shadow: none;
}

.lp-epg__arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}

.lp-epg__scroller {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lp-epg__scroller::-webkit-scrollbar {
    display: none;
}

.lp-epg__inner {
    position: relative;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;

    /* Headroom for the playhead's knob, which is the whole reason this padding exists. The knob used
       to hang 6px ABOVE this box on top:-6px, and .lp-epg__scroller above is overflow-y:hidden —
       which it has to be, because overflow-x:auto forces the other axis to clip — so those 6px were
       cropped and the marker rendered with its top sliced off. The knob now sits inside the box and
       this is the room it sits in. An absolutely positioned child at top:0 aligns to the padding
       edge, so the playhead occupies this strip while the ruler starts below it. */
    padding-top: 10px;
}

.lp-epg__ruler {
    display: flex;
}

.lp-epg__hour {
    /* Must stay in sync with EPG_PX_PER_HOUR in site.js (ruler + track share one scale). */
    width: 150px;
    flex-shrink: 0;
    padding: 0 0 8px 8px;
    border-left: 1px solid var(--untamed-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

/* The hour the playhead is inside, marked by site.js on its 30s tick. A tinted band gives the red
   line something to sit against, so "now" is findable without hunting for a 2px rule. */
.lp-epg__hour.is-now {
    background: var(--untamed-hover);
    color: var(--untamed-text);
}

.lp-epg__track {
    position: relative;
    display: flex;
    height: 90px;
}

/* Tokens, not literals. The strip used to hardcode its own greys, blues and near-blacks, which
   is why it drifted off the palette and needed a whole separate [data-color-mode="dark"] block
   further up the file to be legible at night. On tokens it follows the brand and gets dark mode
   for free, like every other surface. */
.lp-epg__block {
    flex-shrink: 0;
    height: 90px;
    padding: 11px 14px;
    background: var(--untamed-surface);
    border-top: 1px solid var(--untamed-border);
    border-bottom: 1px solid var(--untamed-border);
    border-right: 1px solid var(--untamed-border);
    overflow: hidden;
    display: block;
    color: inherit;
    transition: box-shadow .12s ease, background-color .12s ease;
}

a.lp-epg__block:hover {
    background: var(--untamed-bg);
    box-shadow: inset 0 0 0 1px var(--untamed-accent);
}

/* The ends of each contiguous RUN of programmes round; the joins inside a run stay square, because
   there two blocks really do form one bar. A schedule with gaps renders each programme as a
   free-standing card, and a card rounded on one edge and square on the other reads as broken.

   site.js marks these, not :first-child/:last-child: the track also holds unclassed spacer and gap
   divs, so a block's DOM position among mixed siblings says nothing about whether it touches
   another block.

   Per-corner properties rather than the border-radius shorthand, so the two rules COMPOSE. A lone
   programme carries BOTH classes; with the shorthand the later rule would overwrite the earlier one
   and leave it rounded right, square left. */
.lp-epg__block.is-first {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 1px solid var(--untamed-border);
}

.lp-epg__block.is-last {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.lp-epg__block-time {
    font-size: 11px;
    color: var(--untamed-text-muted);
}

.lp-epg__block-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text);
    line-height: 1.15;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-epg__block-host {
    font-size: 11px;
    color: var(--untamed-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Deliberately sets no border-radius. Rounding belongs to the ends of the row (.is-first /
   .is-last) and has nothing to do with what is on air. This rule used to carry
   `border-radius: 8px 0 0 8px`, which ties with those two on specificity (0,2,0) and wins on
   source order — so the on-air programme was rounded on its left wherever it fell mid-row, and
   when it fell last it took the right end's rounding away with it. */
.lp-epg__block.is-live {
    background: var(--untamed-breaking);
    border-color: var(--untamed-breaking);
}

/* White at reduced opacity rather than a tint mixed for one background: the on-air colour is a
   token now, and a hardcoded pale blue (#cfe0fb, chosen when this block was blue) would be
   wrong against anything else it is ever set to. */
.lp-epg__block.is-live .lp-epg__block-time {
    color: rgba(255, 255, 255, .82);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lp-epg__block.is-live .lp-epg__block-time .lp-dot {
    background: #fff;
    width: 7px;
    height: 7px;
}

.lp-epg__block.is-live .lp-epg__block-title {
    color: #fff;
}

.lp-epg__block.is-live .lp-epg__block-host {
    color: rgba(255, 255, 255, .82);
}

.lp-epg__now {
    position: absolute;

    /* Zero, not -6px: .lp-epg__inner's padding-top is the knob's headroom now, so the whole
       playhead sits inside the scroller's clip box instead of half of it being cropped. */
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5484d;
    z-index: 5;
    pointer-events: none;
}

.lp-epg__now::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5484d;
}


/* ---- channel strip: the channels that are actually on air, above the player ----
   Only live channels appear, so this is usually one or two tiles and often none at all. It sits
   above .lp-hero and shares its width. */
.lp-channels {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    min-width: 0;
}

.lp-channels__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--untamed-text-faint);
}

/* Scrolls rather than wraps: a second row of tiles would push the player down the page, and the
   player is what someone came for. */
.lp-channels__strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

.lp-channels__strip::-webkit-scrollbar {
    display: none;
}

.lp-channel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    max-width: 220px;
    padding: 6px 12px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-bg);
    color: var(--untamed-text);
    text-decoration: none;
}

.lp-channel:hover {
    border-color: var(--untamed-accent);
}

.lp-channel.is-current {
    border-color: var(--untamed-accent);
    /* The accent at low alpha rather than a token: it has to read as "this one" against both the
       light and the dark palette, and colour-mix keeps it in step with the accent in either. */
    background: color-mix(in srgb, var(--untamed-accent) 14%, transparent);
}

.lp-channel__name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-channel__now {
    font-size: 11.5px;
    color: var(--untamed-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- guide: one row per channel ----
   .lp-epg__rows stacks the tracks; each track is still a flex row on the shared 150px/hour scale,
   so the single absolutely positioned .lp-epg__now spans all of them without being told how many
   there are. */
.lp-epg__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* The channel name, pinned while the hours scroll.
   position:sticky inside the horizontally scrolling .lp-epg__scroller, which is what keeps the
   labels readable at any scroll offset. z-index 6 puts it above .lp-epg__now (5) — the now-line
   crossing the label would read as a programme boundary that is not there. */
.lp-epg__gutter {
    position: sticky;
    left: 0;
    z-index: 6;
    flex: 0 0 var(--untamed-epg-gutter, 148px);
    width: var(--untamed-epg-gutter, 148px);
    display: flex;
    align-items: center;
    padding: 0 10px;
    /* Opaque, and a floating-surface token rather than the inset one: the hours scroll UNDER this,
       so anything translucent shows them through the channel name. */
    background: var(--untamed-surface);
    border-right: 1px solid var(--untamed-border);
}

/* The matching cell above the ruler, so the hour marks start where the blocks do.

   It still has to be OPAQUE — the hour cells scroll underneath it — but it must not look like a
   channel label. Given the gutter background it sat flush under the first row and the two read as
   one lighter column running up through the time axis, which is the channel bar bleeding into the
   hours. The panel background masks the hours while leaving the column starting at the first row,
   where it belongs. */
.lp-epg__gutter--head {
    background: var(--untamed-bg);
    border-right-color: transparent;
}

.lp-epg__gutter-link {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--untamed-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-epg__gutter-link:hover {
    color: var(--untamed-accent);
}

/* The row whose channel is in the player. Marked, not hidden: the point of the guide is to show
   what else is on. */
.lp-epg__track.is-featured .lp-epg__gutter {
    box-shadow: inset 3px 0 0 var(--untamed-accent);
}
.lp-epg__tznote {
    margin-top: 8px;
}

/* ---- section headers + shows & replays ---- */

.lp-sec__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 24px 30px 6px;
}

.lp-sec__title {
    font-size: 17px;
    font-weight: 700;
    color: #141a21;
}

.lp-sec__title--sm {
    font-size: 14px;
}

.lp-sec__all {
    font-size: 12.5px;
    font-weight: 600;
    color: #175cd3;
}

.lp-shows__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 10px 30px 6px;
}

/* Tiles are cards, on the same tokens as the schedule's programme blocks, so the two halves of the
   home page read as one system. Before this the tile had no ground, border or radius at all — only
   its thumbnail was rounded, and the "card" was really just an image with text under it. */
.lp-showcard {
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    padding: 10px;
}

.lp-showcard__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;

    /* Deliberately tighter than the card's radius. An inner corner nested inside an outer one has to
       be smaller by roughly the padding between them, or the two curves visibly fight. */
    border-radius: 8px;
    overflow: hidden;
    background: var(--untamed-canvas);
}

.lp-showcard__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.lp-showcard__chip {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(13, 20, 32, .75);
    color: #e6eaef;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
}

.lp-showcard__title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #141a21;
    margin-top: 6px;
}

.lp-showcard__title a:hover {
    color: #175cd3;
}

.lp-showcard__dek {
    font-size: 13px;
    line-height: 1.5;
    color: #5b6672;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-showcard__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 11px;
}

.lp-cardaction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #5b6672;
    cursor: pointer;
}

.lp-cardaction:hover {
    color: #141a21;
}

/* ---- latest reads ---- */

.lp-reads__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px 30px 24px;
}

.lp-read {
    display: flex;
    gap: 13px;
}

.lp-read__thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f4f7;
}

.lp-read__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.lp-read__headline {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--untamed-text);
    line-height: 1.28;
}

.lp-read:hover .lp-read__headline {
    color: #175cd3;
}

.lp-read__body .lp-byl {
    display: block;
    margin-top: 3px;
}

/* ---- conversation (restyle the shared comments module to the flat 2b look) ---- */

.lp-conv {
    padding: 20px 30px 24px;
    border-top: 1px solid #eceff3;
}

.lp-conv .comments-mount {
    max-width: none;
    margin-top: 0;
}

.lp-conv .comments__title {
    font-size: 15px;
    font-weight: 700;
}

.lp-conv .cmt-composer__field {
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 9px;
}

.lp-conv .cmt__bubble {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.lp-conv .cmt__author {
    font-size: 13.5px;
}

.lp-conv .cmt__body {
    font-size: 13.5px;
    color: #3a4653;
    margin-top: 2px;
}

.lp-conv .cmt {
    padding: 13px 0 0;
    margin-top: 0;
    border-top: 1px solid #f2f5f8;
}

.lp-conv .cmt--reply {
    border-top: 0;
}

.lp-conv .cmt__actions {
    padding-left: 0;
}

.lp-conv .cmt__avatar--fallback {
    background: #eaf1fc;
    color: #175cd3;
}

/* ---- footer ---- */

.lp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 30px;
    border-top: 1px solid #eceff3;
    font-size: 12px;
    color: #8b97a5;
}

.lp-foot__links {
    display: flex;
    gap: 16px;
}

.lp-foot__links a:hover {
    color: #175cd3;
}

/* ---- responsive ---- */

@media (max-width: 900px) {
    .lp-hero {
        grid-template-columns: 1fr;
    }

    .lp-side__card {
        position: static;
    }

    .lp-shows__grid,
    .lp-reads__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .lp-mast,
    .lp-hero,
    .lp-engage,
    .lp-epg,
    .lp-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lp-sec__head {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lp-shows__grid,
    .lp-reads__grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lp-search {
        width: 130px;
    }

    .lp-engage {
        flex-wrap: wrap;
    }

    .lp-engage__watching {
        width: 100%;
    }
}

/* ---- dark mode ---- */

[data-color-mode="dark"] {
    --untamed-canvas: #15161a;
    --untamed-bg: #0f1013;
    --untamed-surface: #1f2128;
    --untamed-border: #2a2d35;
    --untamed-hover: rgba(255, 255, 255, .08);
    --untamed-text: #bcc4d3;
    --untamed-text-muted: #a5a6aa;
    --untamed-text-faint: #6b7080;
    --untamed-accent: #8fbfdb;
    --untamed-accent-hover: #a8cfe4;
    --untamed-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .55);
    --untamed-shadow-hover: 0 4px 12px rgba(0, 0, 0, .6), 0 2px 5px rgba(0, 0, 0, .5);
}

/* Skeleton shimmer uses fixed light greys; give it dark-friendly stops under dark mode. */
[data-color-mode="dark"] .skeleton {
    background: linear-gradient(90deg, #24272e 25%, #2d313a 45%, #24272e 65%);
    background-size: 200% 100%;
}

/* ---- responsive ---- */

@media (max-width: 1350px) {
    .watch__secondary {
        flex-basis: 340px;
    }
}

@media (max-width: 1099.98px) {
    .watch {
        flex-direction: column;
    }

    /* .watch is align-items: flex-start, which in the column direction makes a child shrink-wrap
       to its content instead of filling the row. __secondary already said width: 100%; __primary
       did not, so below this breakpoint the player and everything under it rendered at their
       intrinsic width in a full-width column. */
    .watch__primary {
        width: 100%;
    }

    .watch__secondary {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 900px) {
    /* Composed blocks collapse to a single column: hero on top, headlines below. */
    .block-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .block-hero__stack .headline-link:first-child {
        padding-top: 12px;
        border-top: 1px solid var(--untamed-border);
    }

    .block-hero__title {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .profile-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .shell__main {
        padding: 16px 12px 24px;
    }

    .card-river,
    .feed-sentinel {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .river-blocks {
        gap: 32px;
        margin-bottom: 36px;
    }

    .block-features {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .block-videos {
        padding: 14px;
    }

    /* Spotlight: taller crop on phones so the overlaid title still has room to breathe. */
    .block-spotlight__image {
        aspect-ratio: 4 / 3;
    }

    .block-spotlight__overlay {
        padding: 64px 16px 16px;
    }

    .topbar {
        gap: 8px;
        padding: 0 8px;
    }

    .site-search {
        max-width: none;
    }

    .watch__bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .watch__actions {
        margin-left: 0;
    }

    .mini-card__thumb {
        width: 140px;
    }
}

/* ===== home top ad: shorter creative, tighter gap under the header ===== */
.lp-body .shell__main { padding-top: 10px; }

.ad-banner--hometop { margin: 0 0 12px; }

.ad-banner--hometop .ad-banner__img { max-height: 144px; }

.ad-banner--hometop.ad-banner--placeholder { min-height: 112px; }

/* ===== home: red Live Chat button (between On Air Now and Top News) ===== */
.lp-livechat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #c20017;
    color: #fff;
    font-weight: 800;
    letter-spacing: .02em;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    margin: 12px 0;
}

.lp-livechat-btn:hover { background: #a30013; color: #fff; }

/* ===== /live: player + live chat (YouTube-watch style main body) ===== */
.lv-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: stretch;
}

.lv-layout--nochat { grid-template-columns: minmax(0, 1fr); }

.lv-main { min-width: 0; }

.lv-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--untamed-radius);
    overflow: hidden;
}

.lv-player__frame { display: block; width: 100%; height: 100%; border: 0; }

.lv-player__badge { position: absolute; top: 10px; left: 10px; }

.lv-player__offline { display: flex; align-items: center; justify-content: center; height: 100%; }

.lv-title { font-size: 20px; font-weight: 800; margin: 12px 0 4px; }

.lv-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.lv-meta__actions { display: flex; align-items: center; gap: 8px; }

/* --- chat panel --- */
.lv-chat {
    position: relative; /* containing block for the emote panel */
    display: flex;
    flex-direction: column;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    overflow: hidden;
    min-height: 420px;
    max-height: calc(100vh - 140px);
}

.lv-chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--untamed-border);
    font-size: 14px;
    font-weight: 700;
}

.lv-chat__status.is-error { color: #c20017; }

.lv-chat__scroll { position: relative; flex: 1 1 auto; overflow-y: auto; }

.lv-chat__list { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }

.lv-msg {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 8px;
}

.lv-msg:hover { background: rgba(0, 0, 0, .04); }

.lv-msg__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    /* Brand navy — the same fallback color the profile page's initials avatar uses. */
    background: #223f77;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* The photo overlays the initials; a dead URL removes itself and the initials show through. */
.lv-msg__avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.lv-msg__content { min-width: 0; }

.lv-msg__meta { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 6px; }

.lv-msg__name { font-size: 12.5px; font-weight: 700; color: var(--untamed-text-faint); }

.lv-msg--mod .lv-msg__name { color: #0052BD; }

.lv-msg__badge {
    background: #0052BD;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 1px 4px;
    border-radius: 3px;
}

.lv-msg__time { font-size: 10.5px; color: var(--untamed-text-faint); }

.lv-msg__body { font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-wrap; }

.lv-msg__delete {
    position: absolute;
    top: 4px;
    right: 4px;
    border: 0;
    background: transparent;
    color: var(--untamed-text-faint);
    font-size: 14px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
}

.lv-msg:hover .lv-msg__delete { opacity: 1; }

.lv-msg__delete:hover { color: #c20017; background: rgba(194, 0, 23, .08); }

.lv-chat__jump[hidden] { display: none; }

.lv-chat__jump {
    position: sticky;
    bottom: 8px;
    display: block;
    margin: 0 auto;
    border: 0;
    background: #0052BD;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.lv-chat__composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--untamed-border);
}

.lv-chat__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--untamed-border);
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 13.5px;
    background: var(--untamed-canvas);
    color: var(--untamed-text);
}

.lv-chat__input:focus { outline: none; border-color: #0052BD; box-shadow: 0 0 0 2px rgba(0, 82, 189, .2); }

.lv-chat__send {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #c20017;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lv-chat__send:disabled { opacity: .45; cursor: default; }

.lv-chat__error { padding: 0 12px 8px; color: #c20017; }

/* ---- chat moderation: the locked composer, and the moderator's menu -------------------- */

/* Sits directly above the composer, so the explanation and the dead input read as one thing. */
.lv-chat__lock {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--untamed-border);
    background: rgba(194, 0, 23, .08);
    color: #c20017;
    font-size: .85rem;
}

.lv-chat__lock[hidden] { display: none; }

.lv-chat__lock svg { flex: none; }

.lv-chat--locked .lv-chat__input { cursor: not-allowed; opacity: .6; }

/* Names are only interactive for someone who can act on them. */
.lv-chat[data-moderator="1"] .lv-msg__name,
.lv-chat[data-moderator="1"] .lv-participant__name {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

/* Positioned per-target by the JS, and clipped by the panel's own overflow — which is why the
   JS clamps it back inside rather than letting it hang off the bottom edge. */
.lv-modmenu {
    position: absolute;
    width: 265px;
    max-width: calc(100% - 8px);
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
    z-index: 45;
    font-size: .85rem;
}

.lv-modmenu[hidden] { display: none; }

.lv-modmenu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--untamed-border);
}

.lv-modmenu__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lv-modmenu__close {
    flex: none;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
}

.lv-modmenu__section {
    padding: 8px 10px;
    border-bottom: 1px solid var(--untamed-border);
}

.lv-modmenu__section:last-of-type { border-bottom: 0; }

.lv-modmenu__label {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
}

.lv-modmenu__presets { display: flex; gap: 4px; margin-bottom: 6px; }

.lv-modmenu__preset {
    flex: 1;
    padding: 5px 0;
    border: 1px solid var(--untamed-border);
    border-radius: 6px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.lv-modmenu__preset:hover { background: var(--untamed-border); }

.lv-modmenu__row { display: flex; align-items: center; gap: 5px; }

.lv-modmenu__num {
    width: 52px;
    padding: 4px 6px;
    border: 1px solid var(--untamed-border);
    border-radius: 6px;
    background: var(--untamed-surface);
    color: inherit;
}

.lv-modmenu__unit { opacity: .7; }

.lv-modmenu__go {
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid var(--untamed-border);
    border-radius: 6px;
    background: none;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.lv-modmenu__go:hover { background: var(--untamed-border); }

.lv-modmenu__go--danger { border-color: #c20017; color: #c20017; }

.lv-modmenu__go--danger:hover { background: #c20017; color: #fff; }

.lv-modmenu__perm {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 5px 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: #c20017;
    cursor: pointer;
}

.lv-modmenu__perm:hover { border-color: #c20017; }

.lv-modmenu__reason {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid var(--untamed-border);
    border-radius: 6px;
    background: var(--untamed-surface);
    color: inherit;
}

.lv-modmenu__note { margin: 6px 0 0; font-size: .75rem; }

.lv-modmenu__error { padding: 0 10px 8px; color: #c20017; }

.lv-modmenu__error[hidden] { display: none; }

.lv-chat__signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-top: 1px solid var(--untamed-border);
}

.lv-signin-btn {
    background: #c20017;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 18px;
    text-decoration: none;
}

.lv-signin-btn:hover { background: #a30013; color: #fff; }

@media (max-width: 1000px) {
    .lv-layout { grid-template-columns: minmax(0, 1fr); }

    .lv-chat { min-height: 320px; max-height: 460px; }
}

/* live page dark mode */
[data-color-mode="dark"] .lv-msg:hover { background: rgba(255, 255, 255, .06); }

/* ===== live chat emotes: picker panel + :shortcode: autocomplete ===== */
.lv-chat__inputwrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.lv-chat__inputwrap .lv-chat__input {
    width: 100%;
    padding-left: 38px;
}

.lv-chat__emote-btn {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--untamed-text-faint);
    cursor: pointer;
    z-index: 1;
}

.lv-chat__emote-btn:hover,
.lv-chat__emote-btn[aria-expanded="true"] { color: var(--untamed-text); background: rgba(0, 0, 0, .06); }

/* --- the panel (opens above the composer) --- */
.lv-chat__emotes {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 320px;
    max-height: 55%;
    display: flex;
    flex-direction: column;
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    z-index: 30;
    overflow: hidden;
}

.lv-chat__emotes[hidden] { display: none; }

.lv-chat__emotes-top { padding: 8px 8px 6px; }

.lv-chat__emotes-search {
    width: 100%;
    border: 1px solid var(--untamed-border);
    border-radius: 15px;
    padding: 6px 12px;
    font-size: 13px;
    background: var(--untamed-canvas);
    color: var(--untamed-text);
}

.lv-chat__emotes-search:focus { outline: none; border-color: #0052BD; box-shadow: 0 0 0 2px rgba(0, 82, 189, .2); }

.lv-chat__emotes-tabs {
    display: flex;
    gap: 2px;
    padding: 0 8px 6px;
    border-bottom: 1px solid var(--untamed-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.lv-emote-tab {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 7px;
    cursor: pointer;
    opacity: .55;
}

.lv-emote-tab:hover { opacity: .85; background: rgba(0, 0, 0, .05); }

.lv-emote-tab.is-active { opacity: 1; background: rgba(0, 82, 189, .12); }

.lv-chat__emotes-scroll {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 8px 10px;
}

.lv-emote-head {
    position: sticky;
    top: 0;
    padding: 8px 2px 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10.5px !important;
    background: var(--untamed-surface);
    z-index: 1;
}

.lv-emote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 2px;
}

.lv-emote {
    border: 0;
    background: transparent;
    font-size: 21px;
    line-height: 1;
    padding: 5px 0;
    border-radius: 7px;
    cursor: pointer;
}

.lv-emote:hover { background: rgba(0, 0, 0, .07); }

.lv-emote-none { padding: 14px 4px; }

/* --- inline :shortcode: suggestions (above the input) --- */
.lv-chat__suggest {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .2);
    overflow: hidden;
    z-index: 31;
}

.lv-suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 7px 12px;
    cursor: pointer;
    text-align: left;
}

.lv-suggest__item:hover,
.lv-suggest__item.is-active { background: rgba(0, 82, 189, .1); }

.lv-suggest__emoji { font-size: 19px; line-height: 1; }

.lv-suggest__name { font-size: 12.5px; color: var(--untamed-text-faint); }

/* emotes dark mode */
[data-color-mode="dark"] .lv-chat__emote-btn:hover,
[data-color-mode="dark"] .lv-chat__emote-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }

[data-color-mode="dark"] .lv-emote-tab:hover { background: rgba(255, 255, 255, .08); }

[data-color-mode="dark"] .lv-emote:hover { background: rgba(255, 255, 255, .1); }

/* ===== home hero right rail: live chat <-> Top News (closable) ===== */
.lp-side__fill {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The chat card fills the player-height column. */
.lp-side__fill .lv-chat {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.lv-chat[hidden] { display: none; }

/* The Top News card participates in the fill column instead of self-positioning. */
.lp-side__fill .lp-side__card {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
}

.lp-side__card[hidden] { display: none !important; }

/* First (only) section in the news card: no divider, fill the card. */
.lp-side__card--news .lp-topnews {
    border-top: 0;
    flex: 1;
    min-height: 0;
}

/* The reopen button sits under the Top News area. */
.lp-side__fill .lp-livechat-btn {
    flex: 0 0 auto;
    width: 100%;
    border: 0;
    cursor: pointer;
    margin: 0;
}

.lp-livechat-btn[hidden] { display: none; }

/* Chat header: status + close X on the right. */
.lv-chat__head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lv-chat__close {
    border: 0;
    background: transparent;
    color: var(--untamed-text-faint);
    font-size: 18px;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 6px;
    cursor: pointer;
}

.lv-chat__close:hover { color: var(--untamed-text); background: rgba(0, 0, 0, .06); }

[data-color-mode="dark"] .lv-chat__close:hover { background: rgba(255, 255, 255, .1); }

/* ON AIR NOW under the player (the engage bar's left slot). */
.lp-engage__onair {
    margin-right: auto;
    min-width: 0;
}

.lp-engage__onair .lp-onair__title {
    font-size: 17px;
    margin-top: 3px;
}

@media (max-width: 900px) {
    /* Stacked hero: the rail flows in-line and the chat gets a fixed usable height. */
    .lp-side__fill {
        position: static;
    }

    .lp-side__fill .lv-chat {
        min-height: 320px;
        max-height: 440px;
    }

    /* Top News, by contrast, is a short list, not a scroller: stacked, it takes the height of its
       items. It used to share the chat's 320–440px cap, which clipped a phone's list mid-item (#8
       cut in half, 9–10 unreachable) because the list clips rather than scrolls. Uncapped, nothing
       overflows, so the JS trim hides nothing. */
    .lp-side__card--news .lp-topnews__list {
        justify-content: flex-start;
        overflow: visible;
    }
}

/* ===== live chat: show-transition divider ===== */
.lv-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
}

.lv-divider__line {
    flex: 1 1 auto;
    height: 0;
    border-top: 1px solid var(--untamed-border);
}

.lv-divider__label {
    flex: 0 1 auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--untamed-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

/* ===== chat header kebab menu (Participants / Timestamps) ===== */
.lv-chat__menuwrap { position: relative; display: inline-flex; }

.lv-chat__kebab {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--untamed-text-faint);
    padding: 3px 5px;
    border-radius: 6px;
    cursor: pointer;
}

.lv-chat__kebab:hover,
.lv-chat__kebab[aria-expanded="true"] { color: var(--untamed-text); background: rgba(0, 0, 0, .06); }

.lv-chat__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 215px;
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .2);
    padding: 5px;
    z-index: 40;
}

.lv-chat__menu[hidden] { display: none; }

.lv-chat__menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text);
    text-align: left;
}

.lv-chat__menu-item:hover { background: rgba(0, 0, 0, .05); }

.lv-chat__menu-item svg { flex: 0 0 auto; color: var(--untamed-text-faint); }

.lv-chat__menu-item > span:first-of-type { flex: 1 1 auto; }

/* iOS-like switch */
.lv-switch {
    flex: 0 0 auto;
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: #c7ccd4;
    transition: background .15s ease;
}

.lv-chat__menu-item[aria-checked="true"] .lv-switch { background: #0052BD; }

.lv-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: left .15s ease;
}

.lv-chat__menu-item[aria-checked="true"] .lv-switch__knob { left: 16px; }

/* ===== message timestamps (menu toggle): between avatar and content ===== */
.lv-msg__time {
    display: none;
    flex: 0 0 auto;
    padding-top: 3px;
    white-space: nowrap;
}

.lv-chat--timestamps .lv-msg__time { display: block; }

/* ===== participants overlay (on top of the chat) ===== */
.lv-chat__participants {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--untamed-surface);
    z-index: 35;
}

.lv-chat__participants[hidden] { display: none; }

.lv-chat__participants-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--untamed-border);
    font-size: 14px;
    font-weight: 700;
}

.lv-chat__back {
    display: flex;
    border: 0;
    background: transparent;
    color: var(--untamed-text-faint);
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.lv-chat__back:hover { color: var(--untamed-text); background: rgba(0, 0, 0, .06); }

.lv-chat__participants-list {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
}

.lv-participant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-radius: 8px;
}

.lv-participant:hover { background: rgba(0, 0, 0, .04); }

.lv-participant__name { font-size: 13.5px; font-weight: 600; }

.lv-chat__participants-none { padding: 12px 6px; }

/* dark mode */
[data-color-mode="dark"] .lv-chat__kebab:hover,
[data-color-mode="dark"] .lv-chat__kebab[aria-expanded="true"],
[data-color-mode="dark"] .lv-chat__back:hover { background: rgba(255, 255, 255, .1); }

[data-color-mode="dark"] .lv-chat__menu-item:hover { background: rgba(255, 255, 255, .08); }

[data-color-mode="dark"] .lv-participant:hover { background: rgba(255, 255, 255, .06); }

[data-color-mode="dark"] .lv-switch { background: #4a5260; }

/* ===== home chat visibility: CSS-driven, remembered pre-paint =====
   Default (chat offered): the chat shows; Top News + reopen button are hidden. When the visitor
   closed the chat, <html data-home-chat="closed"> (set by the head cookie script before first
   paint) flips the rail with no flash. When chat is not offered at all, the news simply shows. */
[data-home-side][data-chat-offered="1"] [data-topnews-card],
[data-home-side][data-chat-offered="1"] [data-chat-reopen] { display: none; }

html[data-home-chat="closed"] [data-home-side][data-chat-offered="1"] #live-chat { display: none; }

html[data-home-chat="closed"] [data-home-side][data-chat-offered="1"] [data-topnews-card] { display: flex; }

html[data-home-chat="closed"] [data-home-side][data-chat-offered="1"] [data-chat-reopen] { display: flex; }

/* ===== inline field validation (username availability on the settings page) ===== */
.form-field__error {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #c20017;
}

.form-field__input.is-invalid { border-color: #c20017; }

.form-field__input.is-invalid:focus { box-shadow: 0 0 0 2px rgba(194, 0, 23, .15); }

/* ---------------------------------------------------------------
   Contact form (/contact)
   --------------------------------------------------------------- */

.contact-form__field {
    margin-bottom: 18px;
}

.contact-form__field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--untamed-font-meta);
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text);
}

.contact-form__optional {
    font-weight: 400;
    color: var(--untamed-text-muted);
}

.contact-form__required {
    color: #e5484d;
    font-weight: 700;
}

.contact-form__legend {
    font-size: 13px;
    color: var(--untamed-text-muted);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;
    max-width: 560px;
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--untamed-text);
    background: var(--untamed-surface);
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--untamed-accent);
    box-shadow: 0 0 0 3px rgba(44, 100, 133, .18);
}

.contact-form__field textarea {
    resize: vertical;
    min-height: 160px;
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden inputs, and this one
   is meant to be found and filled in. Never shown to a person: it is aria-hidden and tabindex=-1
   in the markup, so neither a screen reader nor the keyboard can reach it. */
.contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- shop (storefront) ----
   Widened past .content-page's 860px reading measure: prose wants a narrow column, a product grid
   does not, and at 860px the tiles came out two-up with a lot of dead margin. */

.shop,
.shop-detail {
    max-width: 1100px;
}

.shop__intro {
    color: var(--untamed-text-muted);
    font-size: 17px;
}

.shop__search {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.shop__search-label {
    position: absolute;
    left: -9999px;
}

.shop__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--untamed-radius);
    border: 1px solid var(--untamed-border);
    background: var(--untamed-surface);
    color: inherit;
    font: inherit;
}

.shop__search-btn {
    padding: 10px 18px;
    border: 0;
    border-radius: var(--untamed-radius);
    background: var(--untamed-accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.shop__search-btn:hover {
    background: var(--untamed-accent-hover);
}

.shop__empty {
    color: var(--untamed-text-muted);
    padding: 28px 0;
}

.shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.shop-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.shop-card:hover {
    border-color: var(--untamed-accent);
    transform: translateY(-2px);
}

/* The image box. Square, with the photograph letterboxed (contain, not cover) on white: product
   shots are picked at 1:1 but not all of them are, and cropping a garment loses the part a shopper
   is looking at. A product with no image yet draws the lettered placeholder in the same box. */
.shop-card__art,
.shop-detail__art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}

.shop-card__art img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transition: transform .25s ease;
}

.shop-card:hover .shop-card__art img {
    transform: scale(1.03);
}

.shop-card__art--empty,
.shop-detail__art--empty {
    background: linear-gradient(140deg, rgba(34, 63, 119, .9), rgba(34, 63, 119, .55));
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: .02em;
}

.shop-card__body {
    display: grid;
    gap: 6px;
    padding: 12px 14px 14px;
}

.shop-card__name {
    font-weight: 700;
    line-height: 1.3;
}

.shop-card__summary {
    font-size: 13px;
    color: var(--untamed-text-muted);
    line-height: 1.45;
}

.shop-card__prices,
.shop-detail__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.shop-card__price {
    font-weight: 700;
}

.shop-card__was,
.shop-detail__was {
    color: var(--untamed-text-muted);
    text-decoration: line-through;
    font-size: 13px;
}

.shop__paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    font-size: 14px;
    color: var(--untamed-text-muted);
}

.shop__paging a {
    padding: 8px 16px;
    border: 1px solid var(--untamed-border);
    border-radius: 999px;
    color: var(--untamed-text);
    font-weight: 600;
}

.shop__paging a:hover {
    border-color: var(--untamed-accent);
    color: var(--untamed-accent);
}

/* ---- shop: one product ---- */

.shop-detail__crumb {
    font-size: 13px;
    color: var(--untamed-text-muted);
    margin-bottom: 14px;
}

.shop-detail__crumb a {
    color: inherit;
}

.shop-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 760px) {
    .shop-detail__layout {
        grid-template-columns: 1fr;
    }
}

.shop-detail__art {
    border-radius: var(--untamed-radius);
    font-size: 96px;
}

/* The gallery: one large image and a strip of thumbnails. site.js (initProductGalleries) swaps the
   main image when a thumbnail is chosen; without script each thumbnail links to its full image. */
.product-gallery {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 16px;
}

.product-gallery__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: #fff;
    overflow: hidden;
}

.product-gallery__main {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-gallery__thumb {
    display: block;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--untamed-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.product-gallery__thumb:hover,
.product-gallery__thumb:focus-visible {
    border-color: var(--untamed-accent-hover);
}

.product-gallery__thumb.is-active {
    border-color: var(--untamed-accent);
}

@media (max-width: 760px) {
    .product-gallery {
        position: static;
    }
}

.shop-detail__info {
    display: grid;
    gap: 14px;
}

.shop-detail__title {
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.2;
    font-weight: 700;
}

.shop-detail__price {
    font-size: 24px;
    font-weight: 700;
}

.shop-detail__summary {
    color: var(--untamed-text-muted);
    line-height: 1.6;
}

.shop-detail__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.shop-detail__field {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

.shop-detail__field select,
.shop-detail__field input {
    padding: 10px 12px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    color: var(--untamed-text);
    font: inherit;
    font-weight: 400;
}

.shop-detail__field--qty input {
    width: 80px;
}

.shop-detail__add {
    padding: 11px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--untamed-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.shop-detail__add:hover {
    background: var(--untamed-accent-hover);
}

.shop-detail__cart-link {
    justify-self: start;
    font-size: 14px;
    font-weight: 600;
}

/* Shown after a successful add: what happened, and the two ways on from here. */
.shop-detail__added {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--untamed-border);
    border-left: 4px solid var(--untamed-accent);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    box-shadow: var(--untamed-shadow);
}

.shop-detail__added p {
    margin: 0;
    font-weight: 600;
}

.shop-detail__added-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shop-detail__added-actions a {
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.shop-detail__to-cart {
    border: 1px solid var(--untamed-border);
    color: var(--untamed-text);
}

.shop-detail__to-cart:hover {
    border-color: var(--untamed-accent);
    color: var(--untamed-accent);
}

.shop-detail__to-checkout {
    background: var(--untamed-accent);
    color: #fff;
}

.shop-detail__to-checkout:hover {
    background: var(--untamed-accent-hover);
    color: #fff;
}

/* role="status" — the reason an add-to-cart was refused (out of stock, no such option). */
.shop-detail__message {
    padding: 12px 14px;
    border: 1px solid var(--untamed-border);
    border-left: 4px solid var(--untamed-breaking);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    font-size: 14px;
}

.shop-detail__notice {
    padding: 12px 14px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    color: var(--untamed-text-muted);
    font-size: 14px;
}

.shop-detail__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    font-size: 13px;
    color: var(--untamed-text-muted);
    margin-top: 4px;
}

.shop-detail__meta dt {
    font-weight: 600;
}

/* ---------------------------------------------------------------
   PinCore commerce: cart, checkout, receipt (/cart, /checkout)

   PinCore ships these views (PinCore.Commerce.Web/Views/Cart, /Checkout) as bare semantic
   `pin-*` hooks — no Bootstrap, no styling opinions. This block gives them the same surfaces,
   spacing and type as the shop pages above, so basket and checkout stop reading like a
   different product.

   Two names below are `id` attributes in PinCore's markup, not classes, despite being named
   like the `pin-*` classes throughout: #pin-checkout-payment-element (the NMI mount) and
   #pin-checkout-note (the delivery-note textarea). They are selected as ids to match the real
   DOM.
   --------------------------------------------------------------- */

.pin-cart,
.pin-checkout,
.pin-receipt {
    max-width: 760px;
    margin: 0 auto;
}

.pin-cart h1,
.pin-checkout h1,
.pin-receipt h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.pin-checkout h2,
.pin-receipt h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 28px 0 12px;
}

/* ---- status messages ---- */

.pin-cart-message,
.pin-checkout-needs-address {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: var(--untamed-radius);
    background: var(--untamed-bg);
    color: var(--untamed-text-muted);
    font-size: 14px;
}

/* role="alert" in the markup — an error/attention message, so it gets the same left-accent
   treatment as .toast--error rather than the neutral status box above. */
.pin-checkout-message {
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--untamed-border);
    border-left: 4px solid var(--untamed-breaking);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    color: var(--untamed-text);
    font-size: 14px;
    box-shadow: var(--untamed-shadow);
}

.pin-cart-empty {
    padding: 40px 24px;
    margin-bottom: 12px;
    border-radius: var(--untamed-radius);
    background: var(--untamed-bg);
    color: var(--untamed-text-muted);
    text-align: center;
}

.pin-cart-continue {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid var(--untamed-border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--untamed-text);
}

.pin-cart-continue:hover {
    border-color: var(--untamed-accent);
    color: var(--untamed-accent);
}

/* ---- cart line table ---- */

.pin-cart-lines {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.pin-cart-lines th {
    padding: 0 10px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--untamed-text-faint);
    border-bottom: 1px solid var(--untamed-border);
}

.pin-cart-lines td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--untamed-border);
    font-size: 14px;
    vertical-align: middle;
}

.pin-cart-line-name {
    display: block;
    font-weight: 600;
    color: var(--untamed-text);
}

.pin-cart-line-variant {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--untamed-text-muted);
}

.pin-cart-quantity {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pin-cart-quantity input {
    width: 56px;
    padding: 6px 8px;
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    background: var(--untamed-bg);
    color: var(--untamed-text);
    font: inherit;
}

.pin-cart-quantity input:focus {
    outline: 2px solid var(--untamed-accent);
    outline-offset: -1px;
}

.pin-cart-quantity button {
    padding: 6px 12px;
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    background: var(--untamed-surface);
    color: var(--untamed-text);
    font-size: 12.5px;
    font-weight: 600;
}

.pin-cart-quantity button:hover {
    border-color: var(--untamed-accent);
    color: var(--untamed-accent);
}

.pin-cart-remove {
    border: 0;
    background: none;
    padding: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--untamed-text-faint);
}

.pin-cart-remove:hover {
    color: var(--untamed-breaking);
}

/* ---- discount / gift card codes ---- */

.pin-cart-code {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 380px;
    margin-bottom: 14px;
}

.pin-cart-code label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

.pin-cart-code input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    background: var(--untamed-surface);
    color: var(--untamed-text);
    font: inherit;
}

.pin-cart-code input:focus {
    outline: none;
    border-color: var(--untamed-accent);
    box-shadow: 0 0 0 3px rgba(44, 100, 133, .18);
}

.pin-cart-code button {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.pin-cart-code button:hover {
    background: var(--untamed-accent-hover);
}

.pin-cart-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.pin-cart-codes li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--untamed-hover);
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

.pin-cart-codes button {
    border: 0;
    background: none;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--untamed-text-faint);
}

.pin-cart-codes button:hover {
    color: var(--untamed-breaking);
}

/* ---- totals (cart, checkout, receipt) — dl laid out as a two-column grid so dt/dd pairs line
   up as label/amount rows regardless of how many rows a given quote has. ---- */

.pin-cart-totals,
.pin-checkout-totals,
.pin-receipt-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    margin: 0 0 8px;
    padding: 16px 18px;
    border-radius: var(--untamed-radius);
    background: var(--untamed-bg);
}

.pin-cart-totals dt,
.pin-checkout-totals dt,
.pin-receipt-totals dt {
    color: var(--untamed-text-muted);
}

.pin-cart-totals dd,
.pin-checkout-totals dd,
.pin-receipt-totals dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}

/* Grand-total row: more specific than the dt/dd rules above (which also match it) so it wins the
   cascade without needing !important. */
.pin-checkout-totals dt.pin-checkout-due,
.pin-checkout-totals dd.pin-checkout-due,
.pin-receipt-totals dt.pin-receipt-grand,
.pin-receipt-totals dd.pin-receipt-grand {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--untamed-border);
    font-size: 16px;
    font-weight: 700;
    color: var(--untamed-text);
}

.pin-cart-note {
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--untamed-text-faint);
}

.pin-cart-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.pin-cart-checkout {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pin-cart-checkout:hover {
    background: var(--untamed-accent-hover);
}

/* ---- checkout order summary ---- */

.pin-checkout-lines {
    display: flex;
    flex-direction: column;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--untamed-border);
}

.pin-checkout-lines li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--untamed-border);
    font-size: 14px;
}

.pin-checkout-line-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--untamed-text);
}

.pin-checkout-line-qty {
    flex-shrink: 0;
    color: var(--untamed-text-muted);
}

.pin-checkout-line-total {
    flex-shrink: 0;
    font-weight: 600;
}

/* ---- checkout payment form ---- */

.pin-checkout-pay {
    display: block;
    padding: 22px 24px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
}

/* NMI's hosted card fields (Collect.js, wired up in checkout.js) render into the three child divs
   below. This element itself only gets height and spacing — never overflow:hidden or a transform,
   either of which can clip or break an iframe-hosted field. Grid, not flex: the four children are
   appended in a fixed order (number, exp, cvv, error) by checkout.js with no wrapper element, so a
   2-column grid is what puts the number field on its own row and lets exp/cvv share the next one
   without needing extra markup PinCore/checkout.js don't provide. */
#pin-checkout-payment-element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 150px;
    margin-bottom: 18px;
    color: var(--untamed-text-muted);
    font-size: 14px;
}

#untamed-cc-number,
#untamed-cc-error {
    grid-column: 1 / -1;
}

#untamed-cc-number,
#untamed-cc-exp,
#untamed-cc-cvv {
    height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    background: var(--untamed-bg);
}

/* Collect.js's inline iframes fill their mount, but need an explicit size themselves too. */
#untamed-cc-number iframe,
#untamed-cc-exp iframe,
#untamed-cc-cvv iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

#untamed-cc-error {
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-breaking);
}

.pin-checkout-pay label[for="pin-checkout-note"] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

#pin-checkout-note {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 20px;
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    background: var(--untamed-surface);
    color: var(--untamed-text);
    font: inherit;
    resize: vertical;
}

#pin-checkout-note:focus {
    outline: none;
    border-color: var(--untamed-accent);
    box-shadow: 0 0 0 3px rgba(44, 100, 133, .18);
}

.pin-checkout-place {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.pin-checkout-place:hover {
    background: var(--untamed-accent-hover);
}

.pin-checkout-place:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---- checkout steps, address and delivery (PinCore's /checkout, /checkout/address and
   /checkout/delivery). pin-commerce.css lays these out; this gives them the site's surfaces. ---- */

.pin-address,
.pin-delivery {
    max-width: 760px;
    margin: 0 auto;
}

.pin-address h1,
.pin-delivery h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.pin-checkout-steps {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.pin-checkout-step {
    padding: 12px 14px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
    font-size: 14px;
    font-weight: 600;
}

.pin-checkout-step-done {
    color: var(--untamed-text-muted);
}

.pin-checkout-step-todo {
    border-left: 4px solid var(--untamed-accent);
}

.pin-checkout-not-ready,
.pin-address-hint,
.pin-delivery-destination,
.pin-delivery-none {
    color: var(--untamed-text-muted);
    font-size: 14px;
}

.pin-address-block {
    padding: 16px 18px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
}

.pin-address-block legend {
    padding: 0 6px;
    font-weight: 700;
}

.pin-address-field {
    font-size: 13px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

.pin-address-field input,
.pin-address-field select {
    padding: 9px 12px;
    border: 1px solid var(--untamed-border);
    border-radius: 8px;
    background: var(--untamed-bg);
    color: var(--untamed-text);
    font: inherit;
    font-weight: 400;
}

.pin-address-field input:focus,
.pin-address-field select:focus {
    outline: none;
    border-color: var(--untamed-accent);
    box-shadow: 0 0 0 3px rgba(44, 100, 133, .18);
}

.pin-address-errors {
    color: var(--untamed-breaking);
    font-size: 14px;
}

.pin-delivery-option {
    padding: 12px 14px;
    border: 1px solid var(--untamed-border);
    border-radius: var(--untamed-radius);
    background: var(--untamed-surface);
}

.pin-delivery-option:has(input:checked) {
    border-color: var(--untamed-accent);
}

.pin-delivery-name,
.pin-delivery-price {
    font-weight: 600;
}

.pin-address-submit,
.pin-delivery-submit {
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pin-address-submit:hover,
.pin-delivery-submit:hover {
    background: var(--untamed-accent-hover);
}

.pin-address-back,
.pin-delivery-back {
    font-size: 14px;
    font-weight: 600;
    color: var(--untamed-text-muted);
}

/* ---- receipt ---- */

.pin-receipt-number,
.pin-receipt-email {
    margin-bottom: 6px;
    color: var(--untamed-text-muted);
}

.pin-receipt-number strong {
    color: var(--untamed-text);
}

.pin-receipt-lines {
    display: flex;
    flex-direction: column;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--untamed-border);
}

.pin-receipt-lines li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--untamed-border);
    font-size: 14px;
}

.pin-receipt-line-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--untamed-text);
}

.pin-receipt-line-qty {
    flex-shrink: 0;
    color: var(--untamed-text-muted);
}

.pin-receipt-line-total {
    flex-shrink: 0;
    font-weight: 600;
}

.pin-receipt-continue {
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--untamed-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pin-receipt-continue:hover {
    background: var(--untamed-accent-hover);
}

@media (max-width: 640px) {
    .pin-cart-lines {
        display: block;
        overflow-x: auto;
    }

    .pin-cart-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pin-checkout-pay {
        padding: 18px;
    }
}