/* looks.css - the Looks. Each one is a set of colours/shapes on top of app.css, chosen by <html data-look="...">.
   "superfox" = no overrides (the page exactly as it was). */
.look-opt .set-desc{display:block;font-size:12px;color:var(--faint);font-weight:400;margin-top:2px}
.look-opt.on .look-tick,.look-opt.on{color:var(--accent)}

/* ---- the glass family: frosted cards, gradient backdrop, floating tab bar ---- */
html[data-look="superfox2"],html[data-look="foxglass"],html[data-look="blackoutglass"]{
  --surface:rgba(255,255,255,.07);--surface-2:rgba(255,255,255,.12);--line:rgba(255,255,255,.14);--radius:18px;--on-accent:#fff}
html[data-look="superfox2"]{--bg:#0C1430;--accent:#4A7BFF;--accent2:#8AB6FF;--bgglow:rgba(74,123,255,.38)}
html[data-look="foxglass"]{--bg:#0A1830;--accent:#2BB7C4;--accent2:#7FE0E8;--bgglow:rgba(43,183,196,.34)}
html[data-look="blackoutglass"]{--bg:#070A1C;--accent:#7B3FF2;--accent2:#2D8CFF;--bgglow:rgba(123,63,242,.40)}
html[data-look="superfox2"] body,html[data-look="foxglass"] body,html[data-look="blackoutglass"] body{
  background:radial-gradient(120% 60% at 50% -8%,var(--bgglow),transparent 70%),linear-gradient(180deg,var(--bg),var(--bg)) fixed}
html[data-look="superfox2"] .card,html[data-look="foxglass"] .card,html[data-look="blackoutglass"] .card,
html[data-look="superfox2"] .svc-tile,html[data-look="foxglass"] .svc-tile,html[data-look="blackoutglass"] .svc-tile,
html[data-look="superfox2"] .install,html[data-look="foxglass"] .install,html[data-look="blackoutglass"] .install,
html[data-look="superfox2"] .btn-quiet,html[data-look="foxglass"] .btn-quiet,html[data-look="blackoutglass"] .btn-quiet,
html[data-look="superfox2"] .field input,html[data-look="foxglass"] .field input,html[data-look="blackoutglass"] .field input{
  border:1px solid var(--line);box-shadow:0 8px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}
html[data-look="superfox2"] .topbar,html[data-look="foxglass"] .topbar,html[data-look="blackoutglass"] .topbar{
  background:rgba(255,255,255,.05);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
html[data-look="superfox2"] .tabbar,html[data-look="foxglass"] .tabbar,html[data-look="blackoutglass"] .tabbar{
  left:12px;right:12px;bottom:calc(10px + var(--safe-b));border:1px solid var(--line);border-radius:30px;
  background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.65)}
html[data-look="superfox2"] .btn,html[data-look="foxglass"] .btn,html[data-look="blackoutglass"] .btn{border-radius:26px}
html[data-look="superfox2"] .btn-primary,html[data-look="foxglass"] .btn-primary,html[data-look="blackoutglass"] .btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 26px -10px var(--accent)}
html[data-look="superfox2"] .gate-logo,html[data-look="foxglass"] .gate-logo,html[data-look="blackoutglass"] .gate-logo{box-shadow:0 18px 60px -14px var(--accent)}

/* ---- TiviFox: flat, tidy, TiviMate colours ---- */
html[data-look="tivifox"]{--bg:#12363B;--accent:#7F9CAE;--accent2:#A9C3D2;--on-accent:#0B1E21;--surface:#174248;--surface-2:#1F5159;--line:#2A6069;--radius:6px}
html[data-look="tivifox"] .btn,html[data-look="tivifox"] .field input,html[data-look="tivifox"] .svc-tile,html[data-look="tivifox"] .card{border-radius:6px}
html[data-look="tivifox"] .tabbar{background:#0E2B2F;border-top:1px solid var(--line);backdrop-filter:none}
html[data-look="tivifox"] .topbar{background:#0E2B2F;backdrop-filter:none;border-bottom:1px solid var(--line)}

/* ---- SlyFox: deep blue-black with gold ---- */
html[data-look="slyfox"]{--bg:#0B1020;--accent:#E9B949;--accent2:#F5D98A;--on-accent:#1A1303;--surface:#141B33;--surface-2:#1B2442;--line:#2B3558;--radius:10px}
html[data-look="slyfox"] body{background:linear-gradient(180deg,#0B1020,#0F1630 60%,#0B1020) fixed}
html[data-look="slyfox"] .btn-primary{background:linear-gradient(135deg,#E9B949,#F5D98A)}
html[data-look="slyfox"] .tabbar,html[data-look="slyfox"] .topbar{border-color:rgba(233,185,73,.35)}

/* ---- PortalTV (Smarters style): flat blue ---- */
html[data-look="smarters"]{--bg:#121826;--accent:#3B82F6;--accent2:#60A5FA;--on-accent:#fff;--surface:#1A2236;--surface-2:#222D47;--line:#2B3858;--radius:8px}
html[data-look="smarters"] .tabbar{background:#0E1422;backdrop-filter:none}
html[data-look="smarters"] .topbar{background:#0E1422;backdrop-filter:none}

/* the More tab's rows: small grey line under the title, not beside it */
.kv .set-desc{display:block;font-size:12px;color:var(--faint);font-weight:400;margin-top:2px}

/* ---- channel lists: long channel names stack onto 2 lines; a long "on now" title scrolls slowly so it can be read ---- */
.ch-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.ch-now.mq{text-overflow:clip}
.ch-now .mq-in{display:inline-block;white-space:nowrap;animation:mq var(--mqd,8s) linear infinite alternate}
@keyframes mq{0%,14%{transform:translateX(0)}86%,100%{transform:translateX(calc(-1 * var(--mq,0px)))}}

/* ============================================================================================
   TiviFox / BlackoutGlass "TV layout": same idea as the native Player (a phone turned sideways, or
   a TV/wide browser, gets a left icon rail instead of the phone's bottom tab bar) - the "stage 1"
   rail look, not the full widened groups-pane (that needs its own per-section work later).
   Pure CSS re-layout of the SAME markup shell() already renders, so every page gets it for free.
   Driven by html.tv-rail (set in looks.js) rather than a plain @media query: a phone with its own
   rotation lock switched off never reports (orientation:landscape) at all no matter how it's held,
   so looks.js also offers a manual switch (the TV icon in the top bar) that sets the same class. */
html.tv-rail[data-look="tivifox"] .shell,
html.tv-rail[data-look="blackoutglass"] .shell {
  padding-bottom: 0;
  padding-left: calc(78px + env(safe-area-inset-left, 0px));
}
html.tv-rail[data-look="tivifox"] .tabbar,
html.tv-rail[data-look="blackoutglass"] .tabbar {
  left: 0; right: auto; bottom: 0; top: 0;
  width: calc(78px + env(safe-area-inset-left, 0px));
  height: 100%;
  padding: calc(var(--safe-t) + 14px) 0 14px;
  padding-left: env(safe-area-inset-left, 0px);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  border-top: 0; border-right: 1px solid var(--line);
}
html.tv-rail[data-look="blackoutglass"] .tabbar { border-right-color: rgba(255,255,255,.14) }
html.tv-rail[data-look="tivifox"] .tab,
html.tv-rail[data-look="blackoutglass"] .tab {
  flex-direction: column; justify-content: center; gap: 4px;
  height: 68px; flex: none; border-radius: 0;
}
html.tv-rail[data-look="tivifox"] .tab span,
html.tv-rail[data-look="blackoutglass"] .tab span { font-size: 10px }
html.tv-rail[data-look="tivifox"] .tab svg,
html.tv-rail[data-look="blackoutglass"] .tab svg { width: 22px; height: 22px }
/* the topbar stays a normal sticky header inside the now-narrower content column, so Back/title/account still work unchanged */

/* the manual TV-layout switch itself, shown in the top bar for tivifox/blackoutglass only (see looks.js) */
.tvrail-toggle { opacity: .75 }
.tvrail-toggle[aria-pressed="true"] { opacity: 1; color: var(--accent) }