/* The site's navigation (SPEC 66, nav.py): the left column, its icon strip and drawer, the + Create menu, the phone bar
   and search, and the bigger video grid. <body data-nav-view> says how the column shows (an inline script in base.html
   sets it before the first paint; static/nav.js keeps it right as the window changes):
     full    the whole column beside the page (wide screens, unless the viewer shrank it)
     mini    a strip of icons beside the page (smaller laptops, or a wide screen the viewer shrank it on)
     hidden  no column; ☰ opens it as a drawer over the page (phones, tablets, and pages that set nav_mode "drawer")
   and <body data-drawer-open> while the drawer is open. Colours come from style.css's tokens, so both themes follow. */

:root { --nav-w: 240px; --nav-mini-w: 72px; --topbar-h: 60px; --tabbar-h: 56px; }

/* The top bar ------------------------------------------------------------- */
.topbar { gap: 12px; padding: 0 16px 0 12px; }
.nav-toggle { flex: none; }
.brand-stream {                     /* NoRepTV+STREAM's word after the logo (once that tier is sold) */
  margin-left: -4px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.06em;
  color: var(--text);
}
.search .search-back, .search-open { display: none; }
.create-menu { position: relative; }
.btn-create { gap: 6px; padding: 0 14px 0 10px; list-style: none; }
.btn-create::-webkit-details-marker { display: none; }
.create-menu[open] .btn-create { background: var(--hover); }
.create-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 240px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.create-pop a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 8px; }
.create-pop a:hover { background: var(--surface-2); }
.create-pop a .icon { flex: none; }
.create-pop small, .create-sheet-links small { display: block; color: var(--text-3); font-size: 12px; }

/* The column --------------------------------------------------------------- */
.nav-column {
  position: fixed; z-index: 40; left: 0; top: var(--topbar-h); bottom: 0; width: var(--nav-w);
  display: flex; flex-direction: column; background: var(--bg);
}
.nav-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 24px;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.nav-scroll:hover { scrollbar-color: var(--line) transparent; }
.nav-drawer-head { display: none; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 12px; flex: none; }
.nav-section { padding: 8px 0; border-bottom: 1px solid var(--line); }
.nav-section:last-of-type { border-bottom: 0; }
.nav-heading {
  display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; padding: 6px 12px; border-radius: 10px;
  font-size: 16px; font-weight: 700; line-height: 1.3;
}
a.nav-heading:hover { background: var(--surface-2); }
.nav-heading .icon { color: var(--text-2); }
.nav-item {
  display: flex; align-items: center; gap: 22px; width: 100%; min-height: 40px; padding: 0 12px; border: 0;
  border-radius: 10px; background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer;
}
.nav-item:hover { background: var(--surface-2); }
.nav-item[aria-current="page"] { background: var(--surface-2); font-weight: 700; }
.nav-icon { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-label small { display: block; color: var(--text-3); font-size: 12px; font-weight: 400; }
.nav-plus { min-height: 48px; }
.nav-count {
  flex: none; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.nav-live-dot {
  position: absolute; right: -2px; top: -1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
}
.nav-subs { list-style: none; margin: 0; padding: 0; }
.nav-sub { gap: 22px; }
.nav-sub-live { flex: none; display: grid; place-items: center; color: var(--accent-text); }
.nav-sub-new { flex: none; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--focus); }
.nav-more .icon { transition: transform 0.15s; }
.nav-more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-note { padding: 6px 12px 10px; color: var(--text-2); font-size: 13px; }
.nav-signin { padding: 14px 12px; }
.nav-signin p { margin-bottom: 12px; font-size: 14px; }
.nav-footer { padding: 16px 12px 8px; color: var(--text-3); font-size: 12.5px; }
.nav-footer nav { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.nav-footer a { color: var(--text-2); font-weight: 600; }
.nav-footer a:hover { color: var(--text); }
.nav-mini-only { display: none; }

/* full: beside the page */
body[data-nav-view="full"] .app-shell { padding-left: var(--nav-w); }
/* mini: a strip of icons, each with a small label under it */
body[data-nav-view="mini"] .app-shell { padding-left: var(--nav-mini-w); }
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-column { width: var(--nav-mini-w); }
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-scroll { padding: 4px 2px; scrollbar-width: none; }
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-full-only { display: none; }
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-section-main { border: 0; }
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-mini-only { display: flex; }
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-section-main .nav-item {
  flex-direction: column; justify-content: center; gap: 6px; min-height: 74px; padding: 14px 0 12px;
  font-size: 10px; text-align: center;
}
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-section-main .nav-label {
  flex: none; width: 100%; padding: 0 1px; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em;
}
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-section-main .nav-item[aria-current="page"] { background: none; color: var(--accent-text); }
body[data-nav-view="mini"]:not([data-drawer-open]) .nav-section-main .nav-item:hover { background: var(--surface-2); }
/* hidden: a drawer over the page, opened by ☰ */
body[data-nav-view="hidden"] .nav-column {
  top: 0; z-index: 100; width: var(--nav-w); max-width: 86vw; box-shadow: var(--shadow);
  transform: translateX(-105%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
body[data-drawer-open] .nav-column {
  top: 0; z-index: 100; width: var(--nav-w); max-width: 86vw; box-shadow: var(--shadow);
  transform: none; visibility: visible; transition: transform 0.2s ease;
}
body[data-drawer-open] .nav-drawer-head { display: flex; }
body[data-drawer-open] .nav-mini-only { display: none; }
.nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
  body[data-nav-view] .nav-column { transition: none; }
}

/* The footer: only where the column isn't beside the page (its links are in the column there) */
body[data-nav-view="full"] .site-footer, body[data-nav-view="mini"] .site-footer { display: none; }

/* The bigger video grid: 3 a row on computers, 2 on tablets, 1 on phones */
.grid { grid-template-columns: minmax(0, 1fr); gap: 32px 16px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.live-grid .live-card-screen, .upcoming-grid .upcoming-thumb { width: 100%; }

/* The You page (phones) */
.you-page { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; }
.you-head { display: flex; align-items: center; gap: 16px; padding: 8px 4px; }
.you-who { display: grid; gap: 2px; min-width: 0; }
.you-who strong { font-size: 20px; }
.you-links { display: grid; padding: 8px; border-radius: 14px; background: var(--surface); }
.you-links a, .you-links button {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 48px; padding: 0 12px;
  border: 0; border-radius: 10px; background: none; color: var(--text); font-size: 15px; text-align: left; cursor: pointer;
}
.you-links a:hover, .you-links button:hover { background: var(--surface-2); }
.you-links form { margin: 0; }
.you-links small { display: block; color: var(--text-3); font-size: 12px; }

/* The phone bar ------------------------------------------------------------ */
.tabbar { display: none; }
.create-sheet {
  width: 100%; max-width: 520px; margin: auto auto 0; padding: 8px 8px calc(16px + env(safe-area-inset-bottom));
  border: 0; border-radius: 18px 18px 0 0; background: var(--surface); color: var(--text);
}
.create-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.create-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; }
.create-sheet-head h2 { font-size: 17px; }
.create-sheet-links a {
  display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 14px; border-radius: 12px; font-size: 16px;
}
.create-sheet-links a:hover { background: var(--surface-2); }
.create-sheet-links small { display: block; color: var(--text-3); font-size: 12px; }

/* The top bar is one row at every width (SPEC 66: search sits behind the magnifier on phones), so style.css's two-row
   phone header doesn't apply; Home's strip sticks right under it (--topbar-h) */
@media (max-width: 720px) {
  .topbar { flex-wrap: nowrap; height: var(--topbar-h); }
  .topbar .search { order: 0; flex-basis: auto; }
}
@media (max-width: 719px) {
  :root { --topbar-h: 56px; }
  .tabbar {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  }
  .tabbar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
    color: var(--text-2); font-size: 10.5px; font-weight: 600;
  }
  .tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the current tab (Comic Ink, 2026-10-27): its label red, bold and in capitals; it may run past its fifth of the bar
     (the neighbours' labels are centred and Create has none) rather than be cut to "SUBSCRIPTI…" */
  .tabbar-item[aria-current="page"] { color: var(--accent-text); font-weight: 800; }
  .tabbar-item[aria-current="page"] span {
    max-width: none; overflow: visible; text-transform: uppercase; letter-spacing: 0.02em; font-size: 9.5px;
  }
  .tabbar-create { display: grid; place-items: center; }
  .tabbar-create .icon { width: 40px; height: 40px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
  /* The top bar on phones: ☰, the logo, then search (an icon that opens it), the bell and you */
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar .search { display: none; }
  .search-open { display: grid; }
  .create-menu { display: none; }
  .brand .brand-logo { height: 26px; }
  body[data-search-open] .topbar > :not(.search) { display: none; }
  body[data-search-open] .topbar .search { display: flex; margin: 0; max-width: none; align-items: center; gap: 6px; }
  body[data-search-open] .search .search-back { display: grid; flex: none; border: 0; background: none; width: 40px; border-radius: 50%; }
}
/* The smallest phones: a smaller logo, and signed out just "Sign in", so the bar stays one row */
@media (max-width: 380px) {
  .brand .brand-logo { height: 24px; }
  .topbar .actions > .btn-outline { padding: 0 12px; }
  .topbar .actions > .btn-outline .icon { display: none; }
}

/* Home's OnRamp strip (SPEC 66): one line under the chips while a segment is waiting, running or under review */
.onramp-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 20px; padding: 10px 14px;
  border-radius: 12px; background: var(--surface); font-size: 14px; font-weight: 600;
}
.onramp-strip > .icon { flex: none; color: var(--star); }
.onramp-strip-leader { color: var(--text-2); }
.onramp-strip .link { margin-left: auto; }
@media (max-width: 719px) { .onramp-strip .link { margin-left: 0; } }
/* Monthly Wrapped's strip (SPEC 69): the same line, with × to hide it until next month */
.wrapped-strip { flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; padding-right: 6px; }  /* (× is 32 px: as tall as the OnRamp line) */
.wrapped-strip .onramp-strip-text { min-width: 0; }
.wrapped-strip form { flex: none; margin: 0; }
.wrapped-strip-hide { width: 32px; height: 32px; color: var(--text-2); }
@media (max-width: 719px) { .wrapped-strip { flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; } .wrapped-strip form { margin-left: auto; } }

/* Settings › Appearance (SPEC 66) */
.settings-appearance { margin-bottom: 20px; }
.settings-appearance + form > .settings-section:first-of-type { padding-top: 20px; border-top: 1px solid var(--line); }
.appearance-choices { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; padding: 0; border: 0; }

/* Hover previews (SPEC 66): the muted preview over a card's picture, faded in once it plays */
.thumb-preview {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.thumb-preview.is-playing { opacity: 1; }

/* The NoRepTV app on phones (SPEC 71, static/install.js): Home's card, the iPhone steps sheet, the /app page, the
   You page's link (never once NoRepTV is open from the Home Screen) and the notifications offer on the iPhone app */
.app-prompt {
  position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 90;
  max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.app-prompt-icon img { display: block; border-radius: 10px; }
.app-prompt-text { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.35; }
.app-prompt-text span { color: var(--text-2); }
.app-prompt-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.app-btn { height: 34px; padding: 0 14px; }
@media (max-width: 719px) { .app-prompt { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); } }
.app-sheet {
  width: min(440px, calc(100vw - 32px)); margin: auto; padding: 22px 20px 18px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--surface); color: var(--text);
}
.app-sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.app-sheet-title { margin: 0 0 14px; font-size: 19px; line-height: 1.25; }
.app-sheet form { display: flex; justify-content: flex-end; margin-top: 16px; }
.app-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.app-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; }
.app-step-n {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 14px;
}
.app-step-icon { display: inline-grid; place-items: center; vertical-align: -4px; width: 26px; height: 26px; margin: 0 2px;
  border-radius: 7px; background: var(--surface-2); color: #0a84ff; }
.app-nobr { white-space: nowrap; }
.app-inapp { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.45; }
.app-page { max-width: 620px; margin: 0 auto; padding: 8px 0 32px; }
.app-hero { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: 20px; }
.app-hero-icon { border-radius: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.app-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.05; }
.app-lead { margin: 0; max-width: 34em; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.app-installed { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 20px; font-weight: 700; }
.app-perks { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.app-perks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; font-size: 15px; line-height: 1.4; }
.app-perks .icon { color: var(--accent); }
.app-how-list { display: grid; gap: 16px; }
.app-how { padding: 18px 18px 16px; border-radius: 16px; background: var(--surface); }
.app-how-title { margin: 0 0 14px; font-size: 18px; }
.app-note { margin: 14px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.app-how .btn + .app-note { margin-top: 12px; }
.app-desktop { margin: 20px 0 0; text-align: center; color: var(--text-2); }
.app-push {
  position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); z-index: 90;
  max-width: 520px; margin: 0 auto; padding: 14px 14px 10px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.app-push-lead { margin: 0 0 4px; font-size: 14px; }
.app-push .bell-push { padding: 6px 0; border-top: 0; }
.app-push-later { display: flex; margin-left: auto; }
@media (display-mode: standalone) { .you-links .you-get-app { display: none; } }

/* iPhones (base.html's viewport-fit=cover, 2026-10-27: the owner saw the bottom cut off in the Home Screen app): the
   safe-area insets above are real only with it, so the phone bar clears the home indicator. Sideways, the page, the
   column and the phone bar also stay out of the notch. Everywhere else the insets are 0 and nothing moves. */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.nav-column { left: env(safe-area-inset-left, 0px); }
@media (max-width: 719px) {
  .tabbar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* The iPhone app from the Home Screen (SPEC 71 item 8, static/nav.js; 2026-10-29: the owner saw the phone bar ride up the
   screen with the page): after the keyboard closes, iOS 26 can leave what's on the screen out of step with the box
   position: fixed holds on to. nav.js measures how far and moves everything pinned to the screen back onto it, each with
   an inline `translate`; an open modal dialog's backdrop follows its dialog through --vv-backdrop (unset: none, as
   before). <html data-vv-keyboard>: the keyboard is up, so the phone bar hides and takes no taps. nav.js does neither
   outside the app, so a browser tab (and the app while iOS gets it right) is exactly as before. */
dialog::backdrop { translate: var(--vv-backdrop, none); }
html[data-vv-keyboard] .tabbar { visibility: hidden; }
/* No rubber band in the app (iOS can drag the fixed bars along with it, and the app has no pull to refresh to lose); a
   browser tab keeps its bounce and pull to refresh */
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* Touch screens (style.css's "Touch screens": a phone or a tablet, 2026-10-29): every target in the navigation at least
   44 x 44 px for a finger. The top bar's round buttons (☰, search, the bell, you) are 44 px squares that keep their 40 px
   of room (a -2 px margin each side), so the bar is still one row on a 320 px phone; the logo's link and the search box
   are 44 px tall; the column's rows, headings and links, the + Create menu's rows and a strip's × the same. */
@media (pointer: coarse) {
  .topbar .icon-btn, .topbar .account-menu > summary { margin-inline: -2px; }
  .brand { min-height: 44px; margin-block: -8px; }   /* (44 px whatever the logo's height: 28, 26 or 24 px) */
  .search input, .search button { height: 44px; }
  .nav-item, .nav-heading { min-height: 44px; }
  .nav-footer nav { gap: 0 6px; }
  .nav-footer a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .create-pop a { min-height: 44px; }
  .wrapped-strip-hide { margin-block: -6px; }
  .onramp-strip .link { padding-block: 13px; margin-block: -13px; }
}