/* shared.css — the actual styling for the whole site.
   light by default, dark on toggle. no webfonts, no build step,
   everything hand-typed. trying to keep it under ~10kb.
   v4 was the plain/honest storefront pass, v5 bolted on the status
   box + the homemade badges (those live near the bottom). */
:root{
  --bg:#f6f1e7;
  --bg2:#efe8d9;
  --card:#fdfaf3;
  --line:#d9cfba;
  --line2:#b9ab8d;
  --dim:#8a7d63;
  --txt:#4a4232;
  --bright:#241e12;
  --acc:#c05621;          /* burnt amber */
  --acc2:#9a4118;
  --live:#3f7d3f;
  --flag:#b3361d;
  --shadow:3px 3px 0 var(--line);
  --shadow-h:4px 4px 0 var(--line2);
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
  --serif:Georgia,'Iowan Old Style',serif;
  --max:720px;
  --wide:1080px;
  --nav-h:60px;
  /* aliases left over from older versions. half of these are probably
     dead now but i pulled one out once and the donate page broke, so. */
  --sig:var(--acc);
  --tor:var(--acc);
  --panel:var(--card);
  --panel2:var(--bg2);
  --void:var(--bg);
  --heading:var(--bright);
  --amber:#b45309;
}
[data-theme=dark]{
  --bg:#171310;
  --bg2:#1f1a15;
  --card:#1c1712;
  --line:#352c21;
  --line2:#52432f;
  --dim:#94866c;
  --txt:#c4b69c;
  --bright:#f3ead8;
  --acc:#e8954a;
  --acc2:#f3b274;
  --live:#6cc06c;
  --flag:#e06a4d;
  --shadow:3px 3px 0 var(--line);
  --shadow-h:4px 4px 0 var(--line2);
  --amber:#d9a05b;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:15px;line-height:1.75;min-height:100vh;overflow-x:hidden;transition:background .2s,color .2s}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--acc);color:#fff}
[data-theme=dark] ::selection{color:var(--bg)}
/* keyboard focus ring \u2014 visible everywhere, matches the accent color, only shows
   for keyboard nav (not on mouse click) so it doesn't look messy day-to-day */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:1px}
.card:focus-visible,.gal-thumb:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.ss-input:focus-visible{outline:none} /* the search box already shows focus via its own bracket-color change */
.cursor::after{content:'\2588';color:var(--acc);animation:blink 1.1s steps(1) infinite;margin-left:.1em}
@keyframes blink{50%{opacity:0}}
.chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.chip.green{color:var(--live)}
.chip.red{color:var(--flag)}

/* --- nav: fixed top bar + the mobile drawer --- */
#site-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:500;
  background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)} /* slightly see-through, stuff scrolls under it */
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--wide);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.nav-logo{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--bright)}
.nav-logo b{color:var(--acc);font-weight:700}
.nav-right{display:flex;align-items:center;gap:1.25rem}
.nav-links{display:flex;align-items:center;gap:1.25rem}
.nav-links a{font-size:.88rem;color:var(--dim);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--bright)}
.nav-links a.nav-donate{background:var(--acc);color:#fff;padding:.4rem 1rem;border-radius:2px;border:2px solid var(--bright);font-weight:700}
.nav-links a.nav-donate:hover{background:var(--acc2);color:#fff}
.theme-toggle{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;line-height:1;color:var(--dim);padding:.3rem .1rem;transition:color .2s;white-space:nowrap}
.theme-toggle:hover{color:var(--bright)}
.text-mode-toggle{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;line-height:1;color:var(--dim);padding:.3rem .1rem;transition:color .2s;white-space:nowrap}
.text-mode-toggle:hover{color:var(--bright)}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:22px;padding:4px 0}
.nav-toggle span{display:block;height:1.5px;background:var(--bright);transition:transform .3s,opacity .3s;transform-origin:left center}
.nav-toggle.open span:nth-child(1){transform:rotate(38deg) translateY(-1px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-38deg) translateY(1px)}
.nav-drawer{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:499;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:1.5rem clamp(1rem,4vw,2.5rem);flex-direction:column;gap:1.2rem}
.nav-drawer.open{display:flex}
.nav-drawer a{font-size:1.05rem;color:var(--bright)}
.nav-drawer a.nav-donate{background:var(--acc);color:#fff;padding:.5rem 1.1rem;border-radius:6px;align-self:flex-start;font-weight:600}

/* --- layout / page scaffolding --- */
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.section{padding-block:clamp(2rem,5vw,3.25rem)}
.page-head{padding-top:calc(var(--nav-h) + clamp(1.75rem,4vw,2.75rem));padding-bottom:0}
.page-head h1{font-size:clamp(1.5rem,3.5vw,2rem);color:var(--bright);font-weight:700;letter-spacing:-.01em;margin-bottom:.5rem}
.page-head h1 b{color:var(--acc);font-weight:700}
.page-head p{font-size:.95rem;max-width:60ch;color:var(--dim)}
.page-head p a{color:var(--acc)}
.sec-label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.sec-label h2,.sec-label span:first-child{font-size:1rem;font-weight:700;color:var(--bright);border-bottom:3px solid var(--acc);padding-bottom:.15rem}
.sec-label .count{font-size:.8rem;color:var(--dim)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;
  padding:.55rem 1.2rem;border-radius:2px;border:2px solid var(--bright);color:var(--bright);
  box-shadow:var(--shadow);transition:all .15s}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}

/* --- the card grid. basically the whole site is cards --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem}
.card{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--bright);
  border-radius:2px;overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
a.card:hover{box-shadow:var(--shadow-h);transform:translate(-1px,-1px)}
.card-img{position:relative;aspect-ratio:1/1;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img::after{content:attr(data-letter);font-family:var(--mono);font-size:3.2rem;font-weight:700;color:var(--line2)}
.card-img{border-bottom:2px solid var(--bright)}
.card-img.has-img::after{content:none}
.card-body{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem 1.1rem;flex:1}
.card-meta{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.card-meta b{color:var(--acc);font-weight:400}
.card-title{font-size:1rem;font-weight:650;color:var(--bright);line-height:1.4}
a.card:hover .card-title{color:var(--acc)}
.card-x{font-size:.84rem;color:var(--dim);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* extra bits only the software cards use — sha row, dl button, changelog */
.card-rows{display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;color:var(--dim)}
.card-rows b{color:var(--txt);font-weight:400}
.card-rows .k{color:var(--acc);display:inline-block;width:5.5em}
.card-sha{display:flex;align-items:center;gap:.4rem;min-width:0}
.card-sha code{font-size:.62rem;color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sha-copy{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:.15rem .5rem;transition:all .2s}
.sha-copy:hover,.sha-copy.done{color:var(--acc);border-color:var(--acc)}
.card .sw-dl{display:flex;justify-content:center;margin-top:.85rem;font-size:.85rem;font-weight:700;
  padding:.55rem;border-radius:2px;border:2px solid var(--bright);background:var(--acc);color:#fff;transition:background .15s}
.card .sw-dl:hover{background:var(--acc2)}
details.sw-log{margin-top:.6rem}
details.sw-log summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
details.sw-log summary::before{content:'+ ';color:var(--acc)}
details.sw-log[open] summary::before{content:'\2212 '}
details.sw-log summary::-webkit-details-marker{display:none}
details.sw-log ul{margin-top:.4rem;font-size:.78rem;color:var(--txt);line-height:1.9}
details.sw-log li::before{content:'\2022 ';color:var(--acc)}

/* --- article / post pages --- */
.article-wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);
  padding-top:calc(var(--nav-h) + clamp(1.75rem,5vw,3rem));padding-bottom:clamp(3rem,7vw,5rem)}
.back-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--dim);margin-bottom:2rem;transition:color .2s}
.back-link::before{content:'\2190'}
.back-link:hover{color:var(--acc)}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;margin-bottom:.9rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim)}
.article-title{font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1.18;letter-spacing:-.015em;color:var(--bright);font-weight:750;margin-bottom:.8rem}
.article-subtitle{font-size:1.05rem;color:var(--dim);margin-bottom:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid var(--line)}
.article-body{font-family:var(--mono);font-size:.95rem;line-height:1.85;color:var(--txt)}
.article-body p{margin-bottom:1.4rem}
.article-body h2{font-family:var(--mono);font-size:clamp(1.2rem,2.4vw,1.45rem);font-weight:700;color:var(--bright);margin:2.5rem 0 .9rem}
.article-body h3{font-family:var(--mono);font-size:1.08rem;font-weight:700;color:var(--bright);margin:1.9rem 0 .7rem}
.article-body a{color:var(--acc);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 40%,transparent);text-underline-offset:3px;word-break:break-word}
.article-body a:hover{text-decoration-color:var(--acc)}
.article-body ul,.article-body ol{margin:0 0 1.4rem 1.25rem}
.article-body ul li{list-style:disc;margin-bottom:.45rem}
.article-body ol li{list-style:decimal;margin-bottom:.45rem}
.article-body img,.article-body video,.article-body iframe{margin:1.75rem 0;border-radius:8px;border:1px solid var(--line);width:100%}
.article-body blockquote{border-left:3px solid var(--acc);padding:.2rem 0 .2rem 1.3rem;margin-block:2rem;color:var(--bright);font-style:italic}
.article-body code{font-family:var(--mono);font-size:.85em;color:var(--acc2);background:var(--bg2);padding:.1em .35em;border-radius:4px}
.article-body pre{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:1rem;overflow-x:auto;margin-bottom:1.4rem}
.article-body pre code{background:none;padding:0;color:var(--txt)}
.article-divider{width:44px;height:2px;background:var(--line2);margin-block:2.5rem}
.article-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:.5rem}

/* --- footer --- */
#site-footer{border-top:1px solid var(--line);padding-block:1.6rem;margin-top:2.5rem;background:var(--bg2)}
.footer-inner{display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;
  max-width:var(--wide);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.footer-copy{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--dim)}
.footer-copy b{color:var(--acc);font-weight:400}
.node-line{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--dim)}
.node-line b{color:var(--live);font-weight:400}
.node-line .p{color:var(--acc)}
.footer-top{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.footer-top:hover{color:var(--acc)}

@media(max-width:680px){.nav-links{display:none}.nav-toggle{display:flex}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* respect the os setting */

/* v5 stuff. added later so it lives down here instead of with the rest.
   status box + the little badges in the footer (used to be inline svg,
   switched to plain text spans so they actually scale with font-size). */
.status-box{display:inline-block;background:var(--card);border:2px solid var(--bright);border-radius:2px;
  box-shadow:var(--shadow);padding:.9rem 1.1rem;transform:rotate(-.5deg);margin-top:1.5rem} /* tilt is intentional, looks taped-on */
.status-box .sb-t{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);
  border-bottom:2px solid var(--line);padding-bottom:.35rem;margin-bottom:.5rem;font-weight:700}
.status-box ul{font-size:.74rem;line-height:2;color:var(--txt)}
.status-box li b{color:var(--bright);font-weight:700}
.status-box .ok{color:var(--live)}
.badges{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.badge{display:inline-flex;align-items:center;justify-content:center;height:31px;padding:0 .7rem;
  background:var(--card);border:2px solid var(--bright);
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;color:var(--bright)}
.badge.live{color:var(--live)}
.badge.acc{color:var(--acc)}
.tool-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem}

/* big screens (1800+) and ultrawide (2600+).
   TODO: ~1440 feels a touch cramped, never got round to a breakpoint there */
@media (min-width:1800px){
  :root{--wide:1480px;--max:880px}
  body{font-size:16px}
  .grid,.tool-strip{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem}
  .page-head{display:grid;grid-template-columns:1fr auto;column-gap:4rem;align-items:start}
  .page-head h1{grid-column:1}
  .page-head p{grid-column:1;max-width:70ch}
  .page-head .status-box{grid-column:2;grid-row:1/4;margin-top:.4rem}
  .about{max-width:75ch}
  .chan-grid{max-width:1100px;grid-template-columns:repeat(3,1fr)}
  .article-wrap{font-size:1.02em}
}
@media (min-width:2600px){
  :root{--wide:1780px;--max:960px}
  body{font-size:17.5px}
  .grid,.tool-strip{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.75rem}
  .card-img::after{font-size:4rem}
}
/* true ultrawide monitors and TVs. 1780px was still floating in a lot of
   black on a 34"+/3440px panel, let alone an actual TV, so give it more
   room and a bit more breathing space — doesn't touch anything below this */
@media (min-width:3440px){
  :root{--wide:2160px;--max:1100px}
  body{font-size:19px}
  .grid,.tool-strip{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:2rem}
  .card-img::after{font-size:4.5rem}
  .chan-grid{max-width:1320px}
}

/* v6 — the laptop shop + the little social icons up in the nav.
   tacked on at the end, same as v5 was. shop grid borrows .grid + .card. */

.shop-card{position:relative}
.shop-card .card-img{aspect-ratio:4/3}          /* laptops read better wide than square */
.shop-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.shop-price{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--acc);white-space:nowrap}
.shop-sub{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.15rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.shop-sub .grade{color:var(--live)}
.shop-status{color:var(--live)}
.shop-status.gone{color:var(--flag)}
.shop-specs{margin-top:.55rem;border-top:1px solid var(--line);padding-top:.5rem;
  font-family:var(--mono);font-size:.72rem;color:var(--txt);line-height:1.7}
.shop-priv{margin-top:.5rem;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sig)}
.shop-priv::before{content:'\2713\00a0'}
.shop-buy{display:flex;justify-content:center;margin-top:.85rem;font-size:.85rem;font-weight:700;
  padding:.55rem;border-radius:2px;border:2px solid var(--bright);background:var(--acc);color:#fff;transition:background .15s}
a.shop-card:hover .shop-buy{background:var(--acc2)}

/* sold ones stay in the grid, just greyed with a stamp slapped on */
.shop-card.sold{opacity:.62;filter:grayscale(.7)}
.shop-card.sold .shop-buy{background:var(--line2);border-color:var(--line2);color:var(--bright)}
.shop-stamp{position:absolute;top:.7rem;right:-.35rem;z-index:3;
  font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.18em;color:#fff;
  background:var(--flag);padding:.2rem .7rem;border:2px solid var(--bright);transform:rotate(6deg);box-shadow:var(--shadow)}

/* --- nav socials. deliberately tiny + dim, not meant to shout --- */
.nav-socials{display:flex;align-items:center;gap:.55rem}
.soc-ic{display:inline-flex;color:var(--dim);transition:color .15s,transform .15s}
.soc-ic:hover{color:var(--acc);transform:translateY(-1px)}
.soc-ic svg{width:15px;height:15px;display:block;fill:currentColor}
.drawer-socials{display:flex;gap:1.1rem;flex-wrap:wrap;padding-top:.2rem}
.drawer-socials .soc-ic svg{width:20px;height:20px}
@media(max-width:680px){.nav-socials{display:none}}   /* drawer carries them below 680, same as the links */

/* v7 — the per-listing product pages. woo-style layout, our paint. */
.product{max-width:1040px;margin:0 auto;padding:2rem 1.5rem 4rem}
.crumb{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:1.4rem}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--acc)}
.crumb span{color:var(--txt)}
.product-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:2.4rem;align-items:start}
@media(max-width:760px){.product-grid{grid-template-columns:1fr;gap:1.6rem}}
.gal-main{border:2px solid var(--bright);box-shadow:var(--shadow);background:var(--card);aspect-ratio:4/3;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.7rem}
.gal-thumb{padding:0;border:2px solid var(--line);background:var(--card);aspect-ratio:1;overflow:hidden;cursor:pointer;transition:border-color .15s}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{border-color:var(--acc)}
.gal-thumb.on{border-color:var(--bright)}
.summary .cat-line{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.5rem}
.product-title{font-size:1.9rem;line-height:1.15;color:var(--bright);font-weight:700;margin:0 0 .6rem}
.product-price{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--acc);margin-bottom:.55rem}
.product-sub{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.product-sub .grade{color:var(--live)}
.product-sub .shop-status.gone{color:var(--flag)}
.store-btns{display:flex;flex-direction:column;gap:.6rem;margin:1.1rem 0 .4rem}
.store-btn{display:flex;justify-content:center;font-weight:700;font-size:.9rem;padding:.7rem;border-radius:2px;
  border:2px solid var(--bright);background:var(--acc);color:#fff;transition:background .15s}
.store-btn:hover{background:var(--acc2)}
.store-btn.disabled{background:var(--line2);border-color:var(--line2);color:var(--bright);pointer-events:none}
.sku-line{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);padding-top:.8rem;margin-top:.5rem}
.product-tabs{margin-top:2.6rem}
.ptab-strip{display:flex;gap:.4rem;border-bottom:2px solid var(--line)}
.ptab{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--dim);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-2px;padding:.6rem .9rem;cursor:pointer}
.ptab:hover{color:var(--txt)}
.ptab.on{color:var(--bright);border-bottom-color:var(--acc)}
.ptab-panel{display:none;padding-top:1.4rem}
.ptab-panel.on{display:block}
.product-desc{font-size:.95rem;line-height:1.85;color:var(--txt);max-width:70ch}
.product-desc p{margin:0 0 1rem}
.spec-table{width:100%;max-width:560px;border-collapse:collapse;font-size:.9rem}
.spec-table th,.spec-table td{text-align:left;padding:.6rem .9rem;border:1px solid var(--line);vertical-align:top}
.spec-table th{width:34%;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt);background:var(--card);font-weight:700}
.spec-table td{color:var(--txt)}

/* v8 — software detail pages. same shell as the shop product pages,
   swap the price/gallery for a version line + sha block + one big dl btn */
.sw-ver{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:.6rem}
.sw-ver b{color:var(--acc);font-weight:400}
.sw-summary-sha{margin:1rem 0;padding:.8rem .9rem;background:var(--bg2);border:1px solid var(--line)}
.sw-summary-sha .k{color:var(--acc);display:inline-block;width:5.5em;font-family:var(--mono);font-size:.7rem}
.sw-summary-sha .card-sha{font-size:.7rem}
.sw-summary-sha .card-sha code{font-size:.66rem}
.sw-dl-big{display:flex;justify-content:center;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;
  padding:.85rem;border-radius:2px;border:2px solid var(--bright);background:var(--acc);color:#fff;
  margin:1.1rem 0 .4rem;transition:background .15s}
.sw-dl-big:hover{background:var(--acc2)}
.sw-icon{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--bg2);
  border:2px solid var(--bright);box-shadow:var(--shadow);overflow:hidden}
.sw-icon img{max-width:62%;max-height:62%;width:auto;height:auto;object-fit:contain}
.sw-icon.no-img{font-family:var(--mono);font-size:4rem;font-weight:700;color:var(--line2)}
.sw-log-list{font-size:.9rem;color:var(--txt);line-height:1.9}
.sw-log-list li{list-style:none;padding-left:1.3rem;position:relative;margin-bottom:.5rem}
.sw-log-list li::before{content:'\2022';color:var(--acc);position:absolute;left:.3rem}

/* dark-mode contrast fix \u2014 the dark theme's amber (--acc/--acc2) is lighter and
   more saturated than light mode's burnt-orange, so white button text that reads
   fine in light mode drops to ~2:1 contrast in dark mode (hover is worse, ~1.8:1).
   swap to the page's own dark bg color instead of white \u2014 reads as a clean
   cut-out against the amber and clears WCAG AA (7\u201310:1) at rest and on hover. */
[data-theme=dark] .nav-links a.nav-donate,
[data-theme=dark] .nav-links a.nav-donate:hover,
[data-theme=dark] .nav-drawer a.nav-donate,
[data-theme=dark] .btn.primary,
[data-theme=dark] .card .sw-dl,
[data-theme=dark] .card .sw-dl:hover,
[data-theme=dark] .shop-buy,
[data-theme=dark] a.shop-card:hover .shop-buy,
[data-theme=dark] .store-btn,
[data-theme=dark] .store-btn:hover,
[data-theme=dark] .sw-dl-big,
[data-theme=dark] .sw-dl-big:hover,
[data-theme=dark] .shop-stamp{color:var(--bg)}

/* print \u2014 strip the chrome, keep the words. nobody needs a dark amber
   page-head or a search box on paper, and printers hate solid dark backgrounds */
@media print{
  #site-nav,.nav-drawer,.theme-toggle,.text-mode-toggle,.nav-toggle,.site-search,
  .badges,.node-line,.footer-top,.back-link,.article-foot .footer-top,
  .sw-dl,.sw-dl-big,.sha-copy,.addr-copy,.store-btns,#channels,.see-all,
  .status-box{display:none!important}
  body{background:#fff!important;color:#111!important;font-size:11pt;line-height:1.5}
  .article-wrap,.wrap{max-width:100%!important;padding:0!important}
  .page-head{padding-top:0!important}
  .article-title,h1,h2,h3{color:#000!important}
  .article-body a,a{color:#000!important;text-decoration:underline!important}
  .article-body img{filter:grayscale(1);max-width:100%;page-break-inside:avoid}
  .article-body blockquote{border-left-color:#999!important;color:#222!important}
  .article-body code,.article-body pre{background:#f0f0f0!important;color:#000!important;border-color:#ccc!important}
  #site-footer{background:none!important;border-top:1px solid #ccc;margin-top:1rem}
  .footer-copy{color:#666!important}
  a[href]::after{content:' (' attr(href) ')';font-size:.8em;color:#666;font-weight:400}
  .back-link::after,.nav-logo::after{content:none}
}

/*USERTHEME:START*/

/*USERTHEME:END*/