/* DiscCharger – shared site stylesheet */

/* ====== Theme variables ====== */
:root{
  /* Light */
  --bg:#faf9f7;
  --card:#ffffff;
  --text:#111;
  --muted:#4b4b4b;
  --line:rgba(0,0,0,.10);
  --shadow:0 18px 60px rgba(0,0,0,.12);
  --radius:22px;
  --accent:#1f6feb;
  --soft:#faf9f7;
  --btn:#ffffff;

  /* 490nm-ish glow */
  --uv1: rgba(0, 220, 255, .42);
  --uv2: rgba(0, 220, 255, .22);
  --uv3: rgba(0, 220, 255, .12);

  /* Section rhythm */
  --pad:18px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f16;
    --card:#0f1623;
    --text:#e6edf3;
    --muted:#aab3c0;
    --line:rgba(255,255,255,.08);
    --shadow:0 12px 34px rgba(0,0,0,.45);
    --accent:#6ea8ff;
    --soft:rgba(255,255,255,.04);
    --btn:rgba(255,255,255,.04);

    --uv1: rgba(0, 220, 255, .55);
    --uv2: rgba(0, 220, 255, .28);
    --uv3: rgba(0, 220, 255, .14);
  }
}

/* ====== Base ====== */
*{ box-sizing:border-box }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
}

.wrap{
  max-width:960px;
  margin:0 auto;
  padding:18px 16px 32px;
}

/* Optional: narrower pages (FAQ) */
.wrap.narrow{
  max-width:860px;
  padding:24px 16px 32px;
}

/* ====== Glow frame ====== */
.frame{
  position:relative;
  border-radius:28px;
  isolation:isolate;
}

@media (prefers-color-scheme: dark){
  .frame::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:36px;
    pointer-events:none;
    z-index:-1;
    box-shadow:
      0 0 18px  var(--uv1),
      0 0 55px  var(--uv2),
      0 0 120px var(--uv3);
    filter: blur(6px);
  }
}

/* ====== Main card ====== */
.main{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

@media (prefers-color-scheme: dark){
  .main{
    border-color: rgba(255,255,255,.06);
  }
}

/* ====== Links ====== */
.inline-link{
  color:inherit;
  border-bottom:1px dashed currentColor;
  text-decoration:none;
}

/* ====== Index: hero + thumbs ====== */
.media{
  padding:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 60%);
}

@media (prefers-color-scheme: dark){
  .media{
    background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%);
  }
}

.hero-img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  transition:opacity .45s ease;
  display:block;
}

@media (prefers-color-scheme: dark){
  .hero-img{
    border:1px solid rgba(255,255,255,.08);
  }
}

.hero-img.fade-out{ opacity:0 }

.thumbs{
  margin-top:12px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  cursor:grab;
  -webkit-overflow-scrolling: touch;
  padding-bottom:6px;
}

.thumbs::-webkit-scrollbar{ display:none }

.thumbs button{
  width:92px;
  height:64px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--btn);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
}

@media (prefers-color-scheme: dark){
  .thumbs button{
    border-color: rgba(255,255,255,.07);
  }
}

.thumbs button.active{
  border-color:rgba(31,111,235,.55);
  box-shadow:0 10px 28px rgba(31,111,235,.18);
}

@media (prefers-color-scheme: dark){
  .thumbs button.active{
    border-color:rgba(0,220,255,.45);
    box-shadow:0 10px 28px rgba(0,220,255,.16);
  }
}

.thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  display:block;
}

/* ====== Sections ====== */
.section{ padding:var(--pad); }
.section + .section{ border-top:1px solid var(--line); }

@media (prefers-color-scheme: dark){
  .section + .section{
    border-top:1px solid rgba(255,255,255,.06);
  }
}

h1{
  font-family:'Montserrat',system-ui;
  font-size:clamp(28px,4vw,44px);
  line-height:1.05;
  margin:0 0 12px;
}

.subtitle{
  display:block;
  font-size:.55em;
  color:var(--muted);
  margin-top:6px;
}

.lead,
.note,
.compare-list,
.ptext{
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}

.lead{ margin-bottom:14px; max-width:62ch; }
.note{ margin-bottom:0; max-width:62ch; }

.h2{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:rgba(0,0,0,.6);
  margin:0 0 10px;
}

@media (prefers-color-scheme: dark){
  .h2{ color:rgba(230,237,243,.70); }
}

.info{ max-width:70ch; }

/* ====== Compare block (index) ====== */
.compare{
  margin-top:16px;
  padding:14px;
  border-radius:18px;
  background:var(--soft);
  border:1px solid rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  .compare{
    border:1px solid rgba(255,255,255,.06);
  }
}

.compare h2{
  font-size:16px;
  margin:0 0 10px;
  color:var(--text);
}

.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media(max-width:700px){
  .compare-grid{ grid-template-columns:1fr }
}

.compare-card{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  .compare-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
  }
}

.compare-card h3{
  font-size:15px;
  margin:0 0 8px;
  color:var(--text);
}

.compare-list{ margin:0; padding-left:18px; }

/* ====== Contact rows ====== */
.row{
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.row:first-of-type{ border-top:0; padding-top:0; }

@media (prefers-color-scheme: dark){
  .row{ border-top:1px solid rgba(255,255,255,.08); }
}

.label{
  font-size:12px;
  color:rgba(0,0,0,.6);
  margin-bottom:2px;
}

@media (prefers-color-scheme: dark){
  .label{ color:rgba(230,237,243,.70); }
}

.value a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px dashed rgba(0,0,0,.3);
}

@media (prefers-color-scheme: dark){
  .value a{ border-bottom:1px dashed rgba(230,237,243,.30); }
}

/* ====== Buttons / CTAs ====== */
.cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  padding:11px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--btn);
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.btn.primary{
  background:rgba(31,111,235,.12);
  border-color:rgba(31,111,235,.45);
}

@media (prefers-color-scheme: dark){
  .btn{ border-color: rgba(255,255,255,.08); }
  .btn.primary{
    background:rgba(0,220,255,.10);
    border-color:rgba(0,220,255,.35);
  }
}

/* ====== Article pages ====== */
.page-header{
  padding:18px;
  border-bottom:1px solid var(--line);
}

@media (prefers-color-scheme: dark){
  .page-header{ border-bottom:1px solid rgba(255,255,255,.06); }
}

.page-header .meta{
  color:var(--muted);
  margin:0;
  max-width:80ch;
}

.article{ padding:18px; }
.article h2{ margin:22px 0 10px; font-size:18px; }
.article p, .article li{ color:var(--muted); }
.article ul{ padding-left:18px; }

.callout{
  margin:16px 0;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.03);
}

@media (prefers-color-scheme: dark){
  .callout{ background:rgba(255,255,255,.03); }
}

/* ====== FAQ accordion ====== */
.back{
  display:inline-block;
  margin-bottom:16px;
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  border-bottom:1px dashed rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark){
  .back{ border-bottom-color:rgba(230,237,243,.35); }
}

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }

summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
  position:relative;
  padding-right:22px;
}
summary::-webkit-details-marker{ display:none }

summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
  font-weight:400;
  color:var(--muted);
}
details[open] summary::after{ content:"–"; }

.answer{
  margin-top:10px;
  color:var(--muted);
  max-width:70ch;
}

/* ====== Footer ====== */
footer{
  margin-top:18px;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark){
  footer{ color:rgba(230,237,243,.55); }
}

/* Optional helpers */
footer.center{ text-align:center; }