/* =====================================================================
   SiteTech · TV Hidden Menu Codes
   Tokens from the SiteTech Design System (tokens.css). Dark, squared-off,
   lime reserved for SiteTech accent/active. Each brand page sets --b
   (its brand hue) on <body>; everything brand-tinted reads --b, so the
   six pages share one layout and differ only in hue.
   Two color channels: brand hue = WHERE you are; status colors = RISK
   (always paired with a word).
   ===================================================================== */
:root{
  color-scheme:dark;
  --st-black:#242424; --st-dark:#2e2e2e; --st-mid:#373737;
  --st-app-bg:#131517; --st-surface:#1c1e21; --st-surface-2:#242628; --st-surface-3:#2c2f32; --st-surface-4:#363a3d;
  --st-text:#eef0f2; --st-gray-lt:#9a9a9a; --st-app-gray-lt:#868c94;
  --st-line:rgba(255,255,255,0.07); --st-line-2:rgba(255,255,255,0.13);
  --st-lime:#a8c820; --st-lime-lt:#c8e840; --st-lime-dim:rgba(168,200,32,0.10);
  --st-red:#e05555; --st-red-dim:rgba(224,85,85,0.12);
  --st-orange:#e07c30; --st-orange-dim:rgba(224,124,48,0.12);
  --st-green:#4caf7d; --st-green-dim:rgba(76,175,125,0.12);
  --st-shadow-card:0 3px 12px rgba(0,0,0,0.45);
  /* TV-brand hues: chosen to sit apart from lime and the three risk colors */
  --lg:#ff5fa2; --roku:#a77bff; --samsung:#4f8dff; --sony:#c3ccd9; --tcl:#2fc4cf; --vizio:#e8c547;
  --display:"Barlow Condensed","Helvetica Neue","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --quote:Georgia,"Times New Roman",serif;
  --nav-h:60px;
  --b:var(--st-lime);
}
body[data-brand="lg"]{--b:var(--lg)}
body[data-brand="roku"]{--b:var(--roku)}
body[data-brand="samsung"]{--b:var(--samsung)}
body[data-brand="sony"]{--b:var(--sony)}
body[data-brand="tcl"]{--b:var(--tcl)}
body[data-brand="vizio"]{--b:var(--vizio)}

/* cross-page transitions (Chromium/Safari 18+; ignored elsewhere) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
.nav{view-transition-name:nav}

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 72px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
body{margin:0;background:var(--st-app-bg);color:var(--st-text);font:400 16px/1.6 var(--body);-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}
.gut{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;text-wrap:balance;margin:0;letter-spacing:.02em}
p{margin:0}
a{color:var(--b)}
code{font:13px var(--mono);background:var(--st-surface-3);padding:1px 5px}
.eyebrow{font:700 .72rem/1.3 var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--b)}
:focus-visible{outline:2px solid var(--st-lime);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--st-lime);color:#111;padding:8px 12px;font:700 .8rem var(--display);text-transform:uppercase;letter-spacing:.1em}
.skip:focus{left:12px}

/* ---------- global nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:var(--st-black);border-bottom:1px solid var(--st-line);padding-top:env(safe-area-inset-top,0px)}
.nav .gut{height:var(--nav-h);display:flex;align-items:center;gap:18px}
.home{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--st-text);flex:none}
.home img{height:34px;width:auto}
.home span{font:800 .95rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;border-left:1px solid var(--st-line-2);padding-left:12px}
.home span em{font-style:normal;color:var(--st-lime)}
.tabs{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;align-self:stretch}
.tabs::-webkit-scrollbar{display:none}
.tab{--c:var(--st-lime);display:flex;align-items:center;gap:8px;padding:0 14px;text-decoration:none;color:var(--st-gray-lt);font:700 .86rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.tab i{width:9px;height:9px;background:var(--c);flex:none}
.tab:hover{color:var(--st-text);background:var(--st-surface)}
.tab[aria-current="page"]{color:var(--c);border-bottom-color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
@media (max-width:760px){
  .nav .gut{flex-wrap:wrap;height:auto;padding-top:8px;gap:6px}
  .home span{display:none}
  .tabs{margin-left:0;width:100%;height:42px}
  .tab{padding:0 11px;font-size:.8rem}
  :root{--nav-h:96px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--st-black);border-bottom:1px solid var(--st-line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--b) 6%,transparent) 0 1px,transparent 1px 80px),
             repeating-linear-gradient(90deg,color-mix(in srgb,var(--b) 6%,transparent) 0 1px,transparent 1px 80px)}
.hero::after{content:"";position:absolute;width:820px;height:820px;right:-260px;top:-400px;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--b) 14%,transparent) 0%,transparent 65%)}
.hero .gut{position:relative;z-index:1;padding-block:30px 34px;display:grid;gap:16px}
.crumbs{font:500 12px var(--mono);color:var(--st-app-gray-lt);display:flex;gap:8px;align-items:center}
.crumbs a{color:var(--st-gray-lt);text-decoration:none}
.crumbs a:hover{color:var(--st-text)}
.hero h1{font-weight:900;font-size:clamp(2.6rem,7vw,5rem);line-height:.92}
.hero h1 em{font-style:normal;color:var(--b)}
.lede{max-width:76ch;color:var(--st-gray-lt);font-weight:300;line-height:1.85}
.tagline{font:italic 400 14px/1.35 var(--quote);color:var(--st-gray-lt)}
.tagline b{color:var(--st-lime);font-weight:400}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stat{background:color-mix(in srgb,var(--st-surface) 85%,transparent);border:1px solid var(--st-line);border-top:2px solid var(--b);padding:10px 16px;min-width:110px}
.stat b{display:block;font:800 1.9rem/1 var(--display);color:var(--st-text)}
.stat span{font:700 .68rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--st-app-gray-lt)}
.stat.s b{color:var(--st-green)}.stat.c b{color:var(--st-orange)}.stat.d b{color:var(--st-red)}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--st-gray-lt)}
.legend .lbl{font:700 .72rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--st-app-gray-lt)}
.alarm{background:var(--st-red-dim);border-top:2px solid var(--st-red);padding:14px 18px;display:grid;gap:4px;max-width:100ch}
.alarm strong{font:800 .95rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--st-red)}
.alarm p{font-weight:300}

/* ---------- filter bar ---------- */
.bar{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:15;background:var(--st-surface);border-bottom:2px solid var(--b)}
.bar .gut{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding-block:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{--c:var(--b);font:700 .8rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--st-line-2);background:var(--st-surface-2);color:var(--st-text);cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:border-color .15s,background .15s;text-decoration:none}
.chip i{width:8px;height:8px;background:var(--c)}
.chip:hover{border-color:var(--c)}
.chip[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,var(--st-surface-2));color:var(--c)}
.bar input{flex:1 1 220px;min-width:0;font:400 15px var(--body);padding:9px 12px;border:1px solid var(--st-line-2);background:var(--st-app-bg);color:var(--st-text);border-radius:0}
.bar input::placeholder{color:var(--st-app-gray-lt)}
.count{font:500 12px var(--mono);color:var(--st-app-gray-lt);white-space:nowrap}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start;padding-block:28px 56px}
.rail{position:sticky;top:calc(var(--nav-h) + 76px);max-height:calc(100vh - var(--nav-h) - 96px);overflow-y:auto;display:grid;gap:2px;font-size:14px;padding-right:6px;scrollbar-width:thin}
.rail .rh{font:800 .78rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--st-app-gray-lt);padding:4px 8px 6px}
.rail a{display:flex;gap:8px;align-items:baseline;padding:5px 8px;color:var(--st-gray-lt);text-decoration:none;line-height:1.3;border-left:2px solid transparent}
.rail a:hover{background:var(--st-surface-2);color:var(--st-text)}
.rail a.on{border-left-color:var(--b);color:var(--st-text);background:var(--st-surface)}
.rail a b{width:7px;height:7px;border-radius:999px;flex:none;transform:translateY(-1px)}
.rail a.pl{color:var(--b);font:700 .76rem var(--display);letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.rail a.top{color:var(--b);font:700 .76rem var(--display);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:940px){.layout{grid-template-columns:minmax(0,1fr)}.rail{display:none}}
main{min-width:0;display:grid;gap:22px}

/* ---------- risk ---------- */
.risk{font:700 .7rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;white-space:nowrap;display:inline-block;border:1px solid currentColor}
.r-s{color:var(--st-green);background:var(--st-green-dim)}
.r-c{color:var(--st-orange);background:var(--st-orange-dim)}
.r-d{color:var(--st-red);background:var(--st-red-dim)}
.r-x{color:var(--st-app-gray-lt);border-style:dashed}
.dot-s{background:var(--st-green)}.dot-c{background:var(--st-orange)}.dot-d{background:var(--st-red)}.dot-x{background:var(--st-app-gray-lt)}

/* ---------- keycaps ---------- */
.seq{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
kbd{font:500 12.5px/1.25 var(--mono);background:var(--st-text);color:var(--st-app-bg);padding:4px 9px;border-bottom:3px solid #8e939d;white-space:nowrap}
.arr{color:var(--st-app-gray-lt);font-size:12px}
.snote{font-size:13.5px;color:var(--st-gray-lt);font-style:italic}

/* ---------- tables ---------- */
.tbl{overflow-x:auto;background:var(--st-surface);border:1px solid var(--st-line)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--st-line)}
th{font:700 .72rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--st-app-gray-lt);background:var(--st-surface-2)}
tbody tr:last-child td{border-bottom:0}
.qref table{min-width:700px}
.qref td.mn a{color:var(--st-text);font-weight:600;text-decoration:none}
.qref td.mn a:hover{color:var(--b)}
.qref .alt{font-size:12.5px;color:var(--st-app-gray-lt);margin-top:4px}
.st{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--st-app-gray-lt);white-space:nowrap}
.btag{--c:var(--b);display:inline-flex;align-items:center;gap:7px;font:800 .82rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--c);text-decoration:none;white-space:nowrap}
.btag i{width:9px;height:9px;background:var(--c)}

/* ---------- section heads / brand notes ---------- */
.sh{display:grid;gap:6px;margin-bottom:12px}
.sh h2{font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);line-height:.92}
.sh p{color:var(--st-gray-lt);font-weight:300;max-width:80ch}
.bnote{background:var(--st-surface);border:1px solid var(--st-line);border-left:3px solid var(--b);padding:14px 18px;display:grid;gap:8px;font-size:15px;color:var(--st-gray-lt);font-weight:300}
.bnote b{color:var(--st-text);font-weight:600}
.bnote ul{margin:0;padding-left:20px;display:grid;gap:3px}
.bwarn{background:var(--st-red-dim);border-top:2px solid var(--st-red);padding:12px 16px;font-size:15px;display:grid;gap:6px;font-weight:300}
.bwarn strong{font:800 .9rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--st-red)}
.bwarn ul{margin:0;padding-left:20px;display:grid;gap:3px}
.plat{font-weight:800;font-size:1.6rem;color:var(--b);border-bottom:1px solid var(--st-line-2);padding-bottom:6px;margin-top:14px}
.howto{background:var(--st-surface);border:1px solid var(--st-line);padding:12px 16px;font-size:15px;font-weight:300;color:var(--st-gray-lt)}
.howto b{color:var(--st-text);font-weight:600}
.howto ul{margin:6px 0 0;padding-left:20px;display:grid;gap:3px}

/* ---------- menu card ---------- */
article.menu{background:var(--st-surface);border:1px solid var(--st-line);border-top:3px solid var(--b);min-width:0}
article.menu:target{box-shadow:0 0 0 1px var(--b),var(--st-shadow-card)}
.mh{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:14px 18px 10px;border-bottom:1px solid var(--st-line)}
.mh h3{font-weight:800;font-size:1.35rem;line-height:1.1;flex:1 1 220px;min-width:0}
.mh .perma{color:var(--st-app-gray-lt);text-decoration:none;font:500 13px var(--mono);opacity:0;transition:opacity .15s}
.mh:hover .perma,.perma:focus-visible{opacity:1}
.mbody{padding:14px 18px 18px;display:grid;gap:12px}
.msub{color:var(--st-gray-lt);font-weight:300;max-width:84ch}
.codes{display:grid;gap:10px;background:var(--st-surface-2);padding:12px 14px;border-left:2px solid var(--b)}
.code{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;align-items:start}
.code .lbl{font:700 .7rem/2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--st-app-gray-lt)}
.code .lbl.unv{color:var(--st-orange)}
.code .cn{grid-column:2;font-size:13.5px;color:var(--st-gray-lt);font-weight:300}
@media (max-width:560px){.code{grid-template-columns:minmax(0,1fr)}.code .cn{grid-column:1}}
.steps{margin:0;padding-left:22px;display:grid;gap:4px;max-width:86ch;font-weight:300}
.mnote{font-size:14.5px;color:var(--st-gray-lt);max-width:88ch;font-weight:300}
.callout{padding:10px 14px;font-size:14.5px;font-weight:300}
.callout.warn{background:var(--st-orange-dim);border-top:2px solid var(--st-orange)}
.callout.bad{background:var(--st-red-dim);border-top:2px solid var(--st-red)}
.callout b{font-weight:600}
.items{background:transparent}
.items table{min-width:540px}
.items td{font-weight:300}
.items td.k{font:500 13px/1.45 var(--mono);width:30%;min-width:150px;overflow-wrap:anywhere}
.items td.rk{width:1%;text-align:right}
.items tr.grp td{background:var(--st-surface-2);font:700 .74rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--b);padding:8px 12px}
.items tr.row:hover td{background:rgba(255,255,255,0.02)}
mark{background:color-mix(in srgb,var(--b) 30%,transparent);color:inherit;padding:0 1px}
.empty{color:var(--st-gray-lt);padding:20px 0}
details.src{background:var(--st-surface);border:1px solid var(--st-line);padding:12px 16px;font-size:14px;color:var(--st-gray-lt)}
details.src summary{cursor:pointer;font:700 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--b)}
details.src ol{margin:10px 0 0;padding-left:20px;display:grid;gap:4px}
details.src a{color:var(--st-gray-lt);word-break:break-word}
details.src a:hover{color:var(--b)}

/* ---------- prev / next ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.pager a{--c:var(--st-lime);display:grid;gap:4px;padding:16px 18px;background:var(--st-surface);border:1px solid var(--st-line);border-top:3px solid var(--c);text-decoration:none;color:var(--st-text);transition:background .15s,transform .15s}
.pager a:hover{background:var(--st-surface-2);transform:translateY(-2px)}
.pager a.next{text-align:right}
.pager small{font:700 .7rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--st-app-gray-lt)}
.pager strong{font:800 1.5rem/1 var(--display);text-transform:uppercase;color:var(--c)}
.pager span{font-size:13px;color:var(--st-gray-lt);font-weight:300}

/* ---------- index: brand grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{--c:var(--st-lime);position:relative;display:grid;gap:12px;align-content:start;padding:20px;background:var(--st-surface);border:1px solid var(--st-line);border-top:4px solid var(--c);text-decoration:none;color:var(--st-text);overflow:hidden;transition:transform .18s,background .18s,box-shadow .18s}
.card::after{content:"";position:absolute;width:260px;height:260px;right:-110px;top:-140px;background:radial-gradient(circle,color-mix(in srgb,var(--c) 18%,transparent),transparent 65%);pointer-events:none}
.card:hover{transform:translateY(-3px);background:var(--st-surface-2);box-shadow:var(--st-shadow-card)}
.card .eyebrow{color:var(--c)}
.card h3{font-weight:900;font-size:2.3rem;line-height:.9}
.card h3 span{color:var(--c)}
.card p{color:var(--st-gray-lt);font-weight:300;font-size:14.5px}
.card .nums{display:flex;gap:18px;font:500 12px var(--mono);color:var(--st-app-gray-lt)}
.card .nums b{font:800 1.25rem var(--display);color:var(--st-text);margin-right:4px}
.riskbar{display:flex;height:6px;background:var(--st-surface-3)}
.riskbar i{display:block}
.card .go{font:700 .78rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.card .first{display:grid;gap:6px;background:var(--st-surface-2);padding:10px 12px}
.card .first small{font:700 .66rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--st-app-gray-lt)}

/* index: search results */
.results{display:grid;gap:8px}
.res{--c:var(--st-lime);display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline;padding:12px 14px;background:var(--st-surface);border:1px solid var(--st-line);border-left:3px solid var(--c);text-decoration:none;color:var(--st-text)}
.res:hover{background:var(--st-surface-2)}
.res .t{font-weight:600}
.res .d{grid-column:2 / 4;font-size:14px;color:var(--st-gray-lt);font-weight:300}
.res .k{font:500 13px var(--mono);color:var(--st-text)}
@media (max-width:560px){.res{grid-template-columns:1fr auto}.res .btag{grid-column:1 / 3}.res .d{grid-column:1 / 3}}

/* ---------- footer ---------- */
footer{background:var(--st-black);border-top:1px solid var(--st-line)}
footer .gut{padding-block:26px 40px;display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
footer img{height:44px;width:auto}
footer .ct{display:grid;gap:3px;font:500 13px var(--mono);color:var(--st-gray-lt)}
footer .ct a{color:var(--st-gray-lt);text-decoration:none}
footer .ct a:hover{color:var(--st-lime)}
footer .ct b{font:800 1rem var(--display);letter-spacing:.06em;color:var(--st-lime)}
footer .fine{flex-basis:100%;font-size:13px;color:var(--st-app-gray-lt);font-weight:300;max-width:100ch}

@media print{
  .nav,.bar,.rail,.pager,.skip{display:none!important}
  body{background:#fff;color:#000}
  .layout{display:block}
  article.menu{break-inside:avoid;border-color:#ccc}
}

/* grid containers must not grow to a wide table's min-width */
main,#menus,#bintro,#browse,#searchOut,.results,.qref,section{min-width:0}
main,#menus,#bintro,#browse,.results{grid-template-columns:minmax(0,1fr)}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}

/* compact sticky filter bar on phones: one scrolling chip row + search */
@media (max-width:760px){
  .bar .gut{gap:8px;padding-block:8px}
  .bar .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .bar .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;padding:8px 10px}
  .bar input{flex-basis:100%}
  .count{display:none}
  html{scroll-padding-top:calc(var(--nav-h) + 110px)}
  .hero .gut{padding-block:22px 26px}
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left}
}
@media (max-width:760px){
  .tab{padding:0 7px;gap:5px;font-size:.74rem;letter-spacing:.06em;flex:1 0 auto;justify-content:center}
  .tab i{width:7px;height:7px}
}