/* TrackPriceDrops: one stylesheet, system fonts only. */
:root{color-scheme:light dark;--bg:#fff;--fg:#1a1a1a;--mut:#666;--line:#e3e3e0;--alt:#f7f7f5;--acc:#0b6b3a;--lo:#0b6b3a;--l9:#2a5db0;--wt:#8a5a00;--tip:#1a1a1a;--tipfg:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121212;--fg:#ececec;--mut:#a3a3a3;--line:#2c2c2c;--alt:#1a1a1a;--acc:#5fd08f;--lo:#5fd08f;--l9:#8db4ff;--wt:#f0c060;--tip:#ececec;--tipfg:#121212}}
:root[data-theme=dark]{--bg:#121212;--fg:#ececec;--mut:#a3a3a3;--line:#2c2c2c;--alt:#1a1a1a;--acc:#5fd08f;--lo:#5fd08f;--l9:#8db4ff;--wt:#f0c060;--tip:#ececec;--tipfg:#121212}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc)}
.top{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:18px;color:var(--fg);text-decoration:none;letter-spacing:-.02em}
.tag{color:var(--mut)}.upd{margin-left:auto;font-weight:600}
main{padding:0 16px;max-width:1440px;margin:0 auto}
h1{font-size:20px;margin:14px 0 4px}.intro,.disc,.fine{color:var(--mut);margin:4px 0}.fine{font-size:12px;margin:12px 0}
.crumbs{font-size:13px;margin-top:10px;color:var(--mut)}
.demo{background:var(--alt);border-left:3px solid var(--wt);padding:6px 10px}
.filters{margin:10px 0}.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tabs button,.bar button{font:inherit;padding:4px 10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:14px;cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.facets{display:flex;flex-wrap:wrap;gap:6px 18px}
.results{min-width:0}
/* Text columns may wrap so the numbers, date and button stay on screen */
#t th,#t td{padding:5px 6px}
/* Table view: product, config, condition and retailer wrap (long accessory names would otherwise push Updated and the button out of view); numbers stay on one line */
@media (min-width:900px){#t td:nth-child(-n+4){white-space:normal;overflow-wrap:break-word}#t td:nth-child(1){min-width:11em}#t td:nth-child(2){min-width:9em}}
@media (min-width:900px) and (max-width:1599px){#t{font-size:13px}#t th,#t td{padding:5px 4px}.go{padding:3px 8px;font-size:12px}}.results .bar{margin:0 0 8px}
/* Wide screens: filters in a left sidebar, one option per line, results to the right. Narrower screens fold the
   filters behind the Filters button so the table keeps the full width (a table down to 900px, cards below). */
@media (min-width:1100px){
.layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;align-items:start}
/* Light rule between the filter sidebar and the results; on the results so it runs the full table height */
.results{border-left:1px solid var(--line);padding-left:14px}
.layout.nof{display:block}.layout.nof .results{border-left:0;padding-left:0}
.facets{display:block;position:sticky;top:8px;max-height:calc(100vh - 16px);overflow-y:auto;padding-right:4px}
.facets fieldset{margin-bottom:12px}.facets legend{margin-bottom:2px}
.facets label{display:flex;gap:6px;align-items:flex-start;white-space:normal;margin:0;padding:4px 0;line-height:1.3;cursor:pointer}.facets input{margin:2px 0 0;flex:none}
}
@media (max-width:1099px){.results{margin-top:8px}.facets{display:none}.layout.fo .facets{display:flex;margin-bottom:8px}}
.ftog{display:none;font:inherit;font-weight:600;padding:5px 14px;border:1px solid var(--fg);background:var(--bg);color:var(--fg);border-radius:14px;cursor:pointer;margin-bottom:8px}
@media (max-width:1099px){.ftog{display:inline-block}}
@media (max-width:899px){.bar input,.bar select{font-size:16px}}
/* Below 900px the table becomes one card per price, four lines high: product, config, "condition · retailer" and
   Updated on the left; price, MSRP, % off and the button on the right */
@media (max-width:899px){
#t thead{display:none}
#t,#t tbody{display:block}
#t tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1px 0;padding:8px 6px;border-bottom:1px solid var(--line)}
#t td{display:block;border:0;padding:0;white-space:normal;min-width:0}
#t td:nth-child(1){grid-area:1/1/2/3;font-weight:600}
#t td:nth-child(2){grid-area:2/1/3/3}
#t td:nth-child(3){grid-area:3/1;color:var(--mut)}
#t td:nth-child(4){grid-area:3/2;color:var(--mut)}#t td:nth-child(4)::before{content:"\00a0\00b7\00a0"}
#t td:nth-child(8){grid-area:4/1/5/3;color:var(--mut);font-size:12px;align-self:end}#t td:nth-child(8)::before{content:"Updated "}
#t td:nth-child(5),#t td:nth-child(6),#t td:nth-child(7),#t td:nth-child(9){padding-left:12px}
#t td:nth-child(5){grid-area:1/3;font-size:16px}
#t td:nth-child(6){grid-area:2/3;color:var(--mut);font-size:12px}#t td:nth-child(6):not(:empty)::before{content:"MSRP "}
#t td:nth-child(7){grid-area:3/3;color:var(--lo);font-size:12px;font-weight:600}#t td:nth-child(7):not(:empty)::after{content:" off"}
#t td:nth-child(9){grid-area:4/3;align-self:end;text-align:right}
.go{padding:6px 12px}
.cw::after{left:auto;right:0;transform:none}
}
fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:600;font-size:12px;color:var(--mut);padding:0}
fieldset label{display:inline-block;margin-right:8px;white-space:nowrap}
.bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}
.bar select,.bar input{font:inherit}#count{color:var(--mut)}
.wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{position:sticky;top:0;background:var(--bg);font-size:12px;color:var(--mut)}
.sh{font:inherit;color:inherit;background:none;border:0;padding:4px 0;cursor:pointer}.sh:hover,.sh:focus-visible{color:var(--fg);text-decoration:underline}
th[aria-sort] .sh{color:var(--fg)}th[aria-sort=ascending] .sh::after{content:" \25B2";font-size:9px}th[aria-sort=descending] .sh::after{content:" \25BC";font-size:9px}
tbody tr:nth-child(even){background:var(--alt)}
tr.oos{opacity:.55}
.pr a{font-weight:700}
/* US convention: money and percentages right-aligned (Price, MSRP, % off), headers too */
#t th:nth-child(n+5):nth-child(-n+7),#t td:nth-child(n+5):nth-child(-n+7){text-align:right}.pr .cw{margin-right:2px}
.go{position:relative;display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:14px;background:var(--acc);color:var(--bg);font-weight:600;font-size:13px;text-decoration:none}.go::after{content:"\2197";font-size:11px}.go:hover,.go:focus-visible{filter:brightness(1.12);text-decoration:underline}
.skip{position:absolute;left:8px;top:-40px;z-index:20;background:var(--bg);color:var(--acc);padding:6px 10px;border:1px solid var(--acc);border-radius:6px}.skip:focus{top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.b{display:inline-block;font-weight:600;font-size:11px;padding:1px 6px;border-radius:9px;border:1px solid currentColor}
.lo{color:var(--lo)}.l9{color:var(--l9)}.wt{color:var(--wt)}.dc,.ed{color:var(--mut)}
.cw{position:relative;border:0;background:none;padding:0 2px;color:var(--acc);cursor:pointer;vertical-align:-2px}
.cw::after{content:attr(data-tip);display:none;position:absolute;z-index:5;left:50%;bottom:130%;transform:translateX(-50%);width:240px;white-space:normal;background:var(--tip);color:var(--tipfg);padding:6px 8px;border-radius:6px;font:12px/1.35 system-ui,sans-serif;text-align:left}
.cw:hover::after,.cw:focus::after,.cw.open::after{display:block}
.none{padding:12px 0;color:var(--mut)}
.searches{border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin:8px 0}
.searches ul{list-style:none;padding:0;margin:6px 0}.searches li{padding:3px 0}
.searches button{font:inherit;font-size:12px}
.browse{border-top:1px solid var(--line);margin-top:20px;padding-top:4px;font-size:14px}.browse h2{font-size:16px;margin:12px 0 4px}.browse h3{font-size:14px;margin:10px 0 2px}
.browse ul{margin:4px 0;padding-left:18px}.browse li{padding:2px 0}.browse p{margin:4px 0;line-height:1.7}
.foot{border-top:1px solid var(--line);margin-top:20px;padding:12px 16px;color:var(--mut);font-size:12px}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:var(--alt);border-top:1px solid var(--line);font-size:13px}
.consent p{margin:0;flex:1 1 280px;color:var(--mut)}
.c-opts{display:flex;flex-wrap:wrap;gap:4px 14px;flex-basis:100%;order:3}.c-opts label{white-space:nowrap}.gpc{color:var(--mut)}
.btns{display:flex;gap:6px}.btns button{font:inherit;padding:3px 12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;cursor:pointer}
.legal{max-width:720px}.legal h2{font-size:16px;margin-top:20px}
@media (max-width:640px){.upd{margin-left:0;width:100%}th,td{padding:5px 6px}}
