/* Sift — built on the Roam kit tokens (--rk-*) so every Roam look applies. */
:root{
  --s-flag:var(--rk-bad); --s-watch:var(--rk-warn); --s-ok:var(--rk-ok);
  --s-gap:clamp(12px,2.6vw,20px);
}
*{box-sizing:border-box}
html.rk body{max-width:1040px; margin:0 auto; padding:0 16px 48px}
.skip{position:absolute; left:-999px}
.skip:focus{left:16px; top:8px; z-index:9; background:var(--rk-acc); color:var(--rk-acc-ink); padding:.5em .8em}
h2{font:600 1.02rem/1.25 var(--rk-display); letter-spacing:.01em; margin:0 0 .5rem}
h3{font:600 .86rem/1.3 var(--rk-display); letter-spacing:.02em; margin:1.2rem 0 .5rem; color:var(--rk-dim)}
p{margin:.4rem 0}
a{color:var(--rk-acc)}
.lede{color:var(--rk-dim); margin:0 0 .8rem}
.rk-sheet{margin:0 0 var(--s-gap)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.linkish{background:none; border:0; padding:0; color:var(--rk-acc); font:inherit; text-decoration:underline; cursor:pointer}
input[type=search],input[type=text],textarea{
  width:100%; flex:1 1 220px; min-width:0; font:500 1rem/1.4 var(--rk-body); color:var(--rk-txt);
  background:var(--rk-panel2); border:1px solid var(--rk-rail); border-radius:var(--rk-radius); padding:.8em .9em;
}
textarea{font-family:var(--rk-mono); font-size:.9rem}
input:focus,textarea:focus{border-color:var(--rk-acc); outline:none}

/* ---------- top ---------- */
.top{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:22px 0 14px}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--rk-txt)}
.brand .name{font:700 1.6rem/1 var(--rk-display); letter-spacing:-.01em}
.mark{display:grid; gap:3px; width:24px}
.mark i{display:block; height:4px; background:var(--rk-acc)}
.mark i:nth-child(2){width:70%; opacity:.75}
.mark i:nth-child(3){width:40%; opacity:.5}
.tag{margin:0; color:var(--rk-dim); font-size:.92rem}
.conn .dot{width:.55em; height:.55em; background:var(--rk-ok); display:inline-block; transform:rotate(45deg)}
.conn b{font-family:var(--rk-mono)}
@media (max-width:640px){ .top{grid-template-columns:1fr auto} .tag{grid-column:1/-1; order:3} }

.net{font-size:.9rem; color:var(--rk-dim)}
.net b{color:var(--rk-txt)}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:2px; margin:0 0 var(--s-gap); overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--rk-rail)}
.tabs button{
  flex:0 0 auto; background:none; border:0; color:var(--rk-dim); cursor:pointer;
  font:600 .72rem/1 var(--rk-display); letter-spacing:.04em; text-transform:uppercase; padding:1rem 1rem .9rem;
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:color var(--rk-t) var(--rk-ease)
}
.tabs button[aria-selected=true]{color:var(--rk-txt); border-bottom-color:var(--rk-acc)}
.tabs button:hover{color:var(--rk-txt)}
.tabs .n:not(:empty){font-family:var(--rk-mono); color:var(--rk-acc)}
.tabs .n:not(:empty)::before{content:"("}.tabs .n:not(:empty)::after{content:")"}

/* ---------- scanner ---------- */
.ways{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px}
.ways label.rk-btn{cursor:pointer}
.lookup .rk-label{display:block; margin:0 0 6px}
.status{min-height:1.4em; color:var(--rk-dim); margin:.8rem 0 0; font-size:.92rem}
.status.err{color:var(--s-flag)}
.viewport{position:relative; margin:0 0 16px; background:#000; aspect-ratio:4/3; max-height:58vh; overflow:hidden;
  clip-path:polygon(var(--rk-cut) 0,100% 0,100% calc(100% - var(--rk-cut)),calc(100% - var(--rk-cut)) 100%,0 100%,0 var(--rk-cut));
  border-radius:var(--rk-radius)}
.viewport video{width:100%; height:100%; object-fit:cover; display:block}
.reticle{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.reticle span{width:min(78%,420px); height:34%; border:2px solid var(--rk-acc); box-shadow:0 0 0 100vmax rgba(0,0,0,.38)}
.reticle span::after{content:""; display:block; height:2px; margin-top:calc(17% - 1px); background:var(--rk-acc); opacity:.8; animation:sweep 1.6s var(--rk-ease) infinite alternate}
@keyframes sweep{from{transform:translateY(-120%)}to{transform:translateY(1200%)}}
@media (prefers-reduced-motion:reduce){.reticle span::after{animation:none}}
.camctl{position:absolute; right:10px; bottom:10px; display:flex; gap:8px}
.ocr textarea{margin:.4rem 0 .8rem}

/* ---------- tier marks: shape and color, so color is never the only signal ---------- */
.ti{display:inline-block; width:.72em; height:.72em; margin-right:.4em; vertical-align:baseline; flex:0 0 auto}
.ti.ok{background:var(--s-ok); border-radius:50%}
.ti.watch{background:var(--s-watch); clip-path:polygon(50% 0,100% 100%,0 100%)}
.ti.flag{background:var(--s-flag)}
.ti.none{border:1.5px solid var(--rk-faint); border-radius:50%}

/* ---------- product ---------- */
.prod-head{display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start}
.prod-head img{width:96px; height:96px; object-fit:contain; background:#fff; border-radius:var(--rk-radius)}
.prod-head .noimg{width:96px; height:96px; display:grid; place-items:center; background:var(--rk-panel2); color:var(--rk-faint); font:600 .7rem var(--rk-mono)}
.prod-head h2{font-size:1.2rem; margin:0}
.prod-head .by{color:var(--rk-dim); margin:.2rem 0}
.prod-head .meta{font:500 .74rem/1.4 var(--rk-mono); color:var(--rk-faint)}
.acts{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.tally{display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 0 0; padding:12px 0 0; border-top:1px solid var(--rk-rail); font-size:.95rem}
.tally b{font-family:var(--rk-mono); margin-right:.3em}
.tally span{display:inline-flex; align-items:center; white-space:nowrap}
.alert{margin:14px 0 0; padding:12px 14px; border-left:4px solid var(--s-flag); background:color-mix(in srgb,var(--s-flag) 12%,transparent)}
.alert b{color:var(--s-flag)}
.good{border-left-color:var(--s-ok); background:color-mix(in srgb,var(--s-ok) 10%,transparent)}
.good b{color:var(--s-ok)}

.ings{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; padding:0; list-style:none}
.ing{display:inline-flex; align-items:center; gap:.1em; max-width:100%; text-align:left;
  font:500 .86rem/1.3 var(--rk-body); color:var(--rk-txt); background:var(--rk-panel2);
  border:1px solid var(--rk-rail); border-radius:var(--rk-radius); padding:.42em .65em; cursor:default}
button.ing{cursor:pointer}
button.ing:hover{border-color:var(--rk-acc)}
.ing.t-flag{border-color:color-mix(in srgb,var(--s-flag) 70%,transparent)}
.ing.t-watch{border-color:color-mix(in srgb,var(--s-watch) 60%,transparent)}
.ing .sug,.ing .alg{font:600 .62rem/1 var(--rk-mono); letter-spacing:.03em; padding:.25em .4em; margin-left:.45em; border:1px solid var(--rk-rail); color:var(--rk-dim); text-transform:uppercase}
.ing .alg{color:var(--s-flag); border-color:color-mix(in srgb,var(--s-flag) 60%,transparent)}
.ing .watchhit{outline:2px solid var(--s-flag)}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 var(--s-gap); align-items:start}
.nut{width:100%; border-collapse:collapse; font-size:.92rem}
.nut td{padding:.42em 0; border-bottom:1px solid var(--rk-rail)}
.nut td:last-child{text-align:right; font-family:var(--rk-mono)}
.nut .hint{color:var(--rk-faint); font-size:.8rem}
.score{display:flex; gap:12px; align-items:center; margin:.4rem 0}
.badge{display:inline-grid; place-items:center; min-width:2.2em; height:2.2em; padding:0 .4em; font:700 1rem/1 var(--rk-display); color:#111}
.ns-a{background:#1e8f4e;color:#fff}.ns-b{background:#7ac547}.ns-c{background:#f6c423}.ns-d{background:#ef7d1a}.ns-e{background:#e63e11;color:#fff}
.nova{background:var(--rk-panel2); color:var(--rk-txt); border:1px solid var(--rk-rail)}
.nova.n4{border-color:var(--s-flag); color:var(--s-flag)} .nova.n3{border-color:var(--s-watch); color:var(--s-watch)} .nova.n1,.nova.n2{border-color:var(--s-ok); color:var(--s-ok)}
.fine{font-size:.86rem; color:var(--rk-dim)}
.addlist{list-style:none; padding:0; margin:0}
.addlist li{display:flex; gap:.4em; align-items:baseline; padding:.4em 0; border-bottom:1px solid var(--rk-rail)}
.addlist button{background:none; border:0; color:var(--rk-txt); font:inherit; text-align:left; cursor:pointer; padding:0}
.addlist button:hover{color:var(--rk-acc)}
.addlist .e{font:500 .74rem var(--rk-mono); color:var(--rk-faint); margin-left:auto; white-space:nowrap}

.picks,.recalls,.hits{list-style:none; padding:0; margin:.6rem 0 0}
.picks li,.hits li{display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--rk-rail)}
.picks img,.hits img{width:56px; height:56px; object-fit:contain; background:#fff; border-radius:var(--rk-radius)}
.picks .why,.hits .why{font-size:.84rem; color:var(--rk-dim)}
.recalls li{padding:10px 0; border-bottom:1px solid var(--rk-rail)}
.recalls .cls{font:600 .7rem var(--rk-mono); color:var(--s-flag)}

/* ---------- guide ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:.7rem 0 0}
.chips button{display:inline-flex; align-items:center; font:600 .7rem/1 var(--rk-display); letter-spacing:.03em; padding:.7em .9em;
  color:var(--rk-dim); background:var(--rk-panel2); border:1px solid var(--rk-rail); border-radius:var(--rk-radius); cursor:pointer}
.chips button[aria-pressed=true]{color:var(--rk-acc-ink); background:var(--rk-acc); border-color:var(--rk-acc)}
.chips button[aria-pressed=true] .ti{outline:1px solid var(--rk-acc-ink)}
.glist{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.glist button{width:100%; height:100%; text-align:left; cursor:pointer; color:var(--rk-txt); font:inherit;
  background:var(--rk-panel); border:1px solid var(--rk-rail); border-radius:var(--rk-radius); padding:14px 16px}
.glist button:hover{border-color:var(--rk-acc)}
.glist .gn{display:flex; align-items:baseline; font-weight:700}
.glist .gk{font:500 .72rem var(--rk-mono); color:var(--rk-faint); margin:.25rem 0}
.glist .gw{font-size:.88rem; color:var(--rk-dim)}
.empty{color:var(--rk-dim); padding:1rem 0}

/* ---------- detail dialog ---------- */
dialog{position:fixed; inset:0; margin:auto; width:min(680px,calc(100vw - 24px)); height:fit-content; max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; color:var(--rk-txt);
  background:var(--rk-panel); border:1px solid var(--rk-rail); border-radius:var(--rk-radius); padding:1.6rem 1.5rem;
  clip-path:polygon(0 0,calc(100% - calc(var(--rk-cut) * 2)) 0,100% calc(var(--rk-cut) * 2),100% 100%,0 100%)}
dialog::backdrop{background:rgba(0,0,0,.6); backdrop-filter:blur(2px)}
dialog .x{position:absolute; top:.6rem; right:.8rem; background:none; border:0; color:var(--rk-dim); font-size:1.8rem; line-height:1; cursor:pointer}
.d-tier{display:inline-flex; align-items:center; font:600 .72rem var(--rk-mono); letter-spacing:.04em; text-transform:uppercase; padding:.4em .6em; border:1px solid currentColor; margin:0 0 .6rem}
.d-tier.flag{color:var(--s-flag)}.d-tier.watch{color:var(--s-watch)}.d-tier.ok{color:var(--s-ok)}.d-tier.none{color:var(--rk-dim)}
.d-h{font:700 1.25rem/1.2 var(--rk-display); color:var(--rk-txt); margin:0 0 .2rem; padding-right:2rem}
.d-k{font:500 .76rem var(--rk-mono); color:var(--rk-faint); margin:0 0 .8rem}
.d-sec{margin:1rem 0 0}
.d-sec h4{font:600 .7rem/1.2 var(--rk-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--rk-faint); margin:0 0 .35rem}
.d-sec ul{margin:0; padding-left:1.1rem}
.d-sec li{margin:.25rem 0}
.d-st{display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; font-size:.94rem}
.d-st dt{font:600 .74rem var(--rk-mono); color:var(--rk-dim); padding-top:.15rem}
.d-st dd{margin:0}
.d-src a{word-break:break-word}
.connlist{list-style:none; padding:0; margin:.5rem 0; font:500 .8rem/1.5 var(--rk-mono)}
.connlist li{padding:.45rem 0; border-bottom:1px solid var(--rk-rail); word-break:break-all}
.connlist .why{display:block; font-family:var(--rk-body); color:var(--rk-dim); word-break:normal}
.hosts{display:flex; flex-wrap:wrap; gap:6px; margin:.4rem 0}
.hosts span{font:500 .76rem var(--rk-mono); padding:.3em .55em; border:1px solid var(--rk-rail)}

/* ---------- compare ---------- */
.cmp{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-gap)}
.cmp .rk-sheet{margin:0}
.cmp img{width:72px; height:72px; object-fit:contain; background:#fff}
.cmp dl{display:grid; grid-template-columns:1fr auto; gap:.35rem .6rem; font-size:.9rem; margin:.8rem 0}
.cmp dt{color:var(--rk-dim)} .cmp dd{margin:0; font-family:var(--rk-mono); text-align:right}
.cmp .best{color:var(--s-ok); font-weight:700}

/* ---------- lists ---------- */
.watch{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:4px 14px}
.watch label,.switch{display:flex; gap:.6em; align-items:center; padding:.35em 0; cursor:pointer}
.watch input,.switch input{width:1.15em; height:1.15em; accent-color:var(--rk-acc)}
.watch .grp{grid-column:1/-1; font:600 .7rem var(--rk-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--rk-faint); margin:.6rem 0 0}

/* ---------- footer ---------- */
.foot{margin-top:32px; color:var(--rk-dim); font-size:.88rem}
.foot summary{cursor:pointer; font:600 .76rem var(--rk-display); letter-spacing:.03em; color:var(--rk-txt)}
.foot .how{margin:.6rem 0 1rem}
.credits{border-top:1px solid var(--rk-rail); padding-top:12px}
.spin{display:inline-block; width:1em; height:1em; border:2px solid var(--rk-rail); border-top-color:var(--rk-acc); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-.15em; margin-right:.4em}
@keyframes spin{to{transform:rotate(360deg)}}
@media print{.top .conn,.tabs,.scanner,.net,.acts,.foot details{display:none}}