/* RFSX SAR page additions (keeps main theme from rfsx.css) */

/* Hint to the browser that this page is dark themed so native controls render with good contrast. */
html{ color-scheme: dark; }

/* Page-specific tweaks */
body.rfsx-sar-page .rfsx-title{ letter-spacing:.4px; }

/* Filters */
.sar-filters{
  /* Search + Brand + Model */
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr);
}
.sar-filters select{ min-width: 180px; }
.sar-clear{
  appearance:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.sar-clear:hover{ background:rgba(255,255,255,0.06); }

/*
  Native <select> popups (Chrome/desktop + some mobile UIs) often render with a light background.
  Our selects use light text, so force option text to dark for readability.
  We keep the collapsed select value using the normal --text color.
*/
.sar-filters select,
.rfsx-filters-mobile select{
  color: var(--text) !important;
}

.sar-filters select option,
.sar-filters select optgroup,
.rfsx-filters-mobile select option,
.rfsx-filters-mobile select optgroup{
  background: #ffffff !important;
  color: #0b0b0c !important;
}

.sar-hint{
  margin-top:10px;
  color:var(--muted);
  font-size:0.95rem;
}

/* Center content wrapper */
.rfsx-sar-content{
  padding: 14px;
}

.rfsx-sar-content, .rfsx-sar-content *{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Intro */
.sar-intro h2{
  margin: 0 0 6px;
  font-size: 1.2rem;
}
.sar-intro p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.45;
}
.sar-intro-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .sar-intro-grid{ grid-template-columns: 1fr 1fr; }
}
.sar-intro-card{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  padding:14px;
}
.sar-intro-title{
  font-weight:900;
  margin-bottom:6px;
}
.sar-intro-text{ color:var(--muted); line-height:1.45; }

/* Loading / errors */
.sar-loading{
  color:var(--muted);
  padding: 12px;
}
.sar-error{
  border:1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: #fecaca;
  border-radius: 16px;
  padding: 12px 14px;
}

/* Phone card */
.sar-phone{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  border-radius: 18px;
  overflow: hidden;
}

.sar-phone-head{
  display:flex;
  gap:14px;
  padding: 14px;
  align-items:flex-start;
}
.sar-phone-img{
  width: 84px;
  height: 112px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.2);
  object-fit: cover;
  flex: 0 0 auto;
}
.sar-phone-title{
  font-weight: 950;
  font-size: 1.2rem;
  line-height: 1.15;
}
.sar-phone-sub{
  margin-top:6px;
  color: var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:0.95rem;
}

.sar-phone-actions{
  padding: 0 14px 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.sar-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.sar-btn:hover{ background: rgba(255,255,255,0.06); }
.sar-btn.primary{
  background: rgba(255,255,255,0.08);
  border-color: rgba(96,165,250,0.28);
}

.sar-sep{ height:1px; background: var(--border); margin: 0 14px; }

.sar-metrics{
  padding: 14px;
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
@media (min-width: 720px){
  .sar-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .sar-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sar-metric{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  border-radius: 16px;
  padding: 12px 12px 10px;
}
.sar-metric-label{ color:var(--muted); font-size:0.85rem; }
.sar-metric-value{ font-weight:950; font-size:1.05rem; margin-top:4px; }
.sar-metric-meta{ color:var(--muted); font-size:0.85rem; margin-top:4px; }
.sar-good{ color: var(--good); }
.sar-warn{ color: #fbbf24; }
.sar-bad{ color: #fb7185; }

/* Specs accordion */
.sar-specs{
  padding: 14px;
}
.sar-specs h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.sar-accordion details{
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,0.02);
  margin-bottom:10px;
  overflow:hidden;
}
.sar-accordion summary{
  cursor:pointer;
  padding:12px 14px;
  font-weight:900;
  list-style:none;
}
.sar-accordion summary::-webkit-details-marker{ display:none; }
.sar-accordion details[open] summary{
  background: rgba(255,255,255,0.04);
}
.sar-spec-list{
  padding: 6px 14px 12px;
  margin:0;
  list-style:none;
}
.sar-spec-list li{
  padding: 8px 0;
  border-top:1px solid rgba(255,255,255,0.06);
}
.sar-spec-list li:first-child{ border-top:0; }
.sar-spec-k{ font-weight:800; }
.sar-spec-v{ color:var(--muted); margin-top:4px; }
.sar-spec-v a{ color: var(--primary); }

/* Sidebar widgets */
.sar-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.sar-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  text-decoration:none;
  font-weight:800;
}
.sar-chip:hover{ background: rgba(255,255,255,0.06); }

.sar-selected{ color: var(--muted); line-height:1.45; }
.sar-selected strong{ color: var(--text); }

.sar-about{ color: var(--muted); line-height:1.45; font-size:0.95rem; }

/* Mobile filters */
.sar-filters-mobile select{ width:100%; }



/* --- SAR intro CTA --- */
.sar-cta-row{
  margin: 14px 0 6px;
  display:flex;
  justify-content:flex-start;
}

.sar-cta-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 70%, white));
  color:#061018;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.sar-cta-btn:hover{ filter:brightness(1.04); }
.sar-cta-btn:active{ transform:translateY(1px); }

@keyframes sarPulse{
  0%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
  40%{ box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent); }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
}
.sar-filters.sar-pulse{
  border-radius:999px;
  animation:sarPulse 1.0s ease-out 1;
}

/* ===============================
   Children vs adult SAR GIF tabs
   =============================== */
.sar-cvsa{
  margin:14px 14px 16px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}
.sar-cvsa-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.sar-cvsa-title{ font-weight:900; }
.sar-cvsa-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.sar-cvsa-tab.active{
  border-color:rgba(255,176,32,.55);
  background:rgba(255,176,32,.10);
}
.sar-cvsa-media{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.96);
}
.sar-cvsa-link{ display:block; cursor:zoom-in; }
.sar-cvsa-img{ width:100%; display:block; }
.sar-cvsa-missing{
  padding:18px;
  text-align:center;
  color:var(--muted);
  background:rgba(0,0,0,.08);
}
.sar-cvsa-caption{
  margin-top:8px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.35;
}


/* ===============================
   Share block (match paper.php)
   =============================== */
.rfsx-sar-page .rfsx-share{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.rfsx-sar-page .rfsx-share a{
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.rfsx-sar-page .rfsx-share a:hover{
  text-decoration: underline;
}

.rfsx-sar-page .rfsx-share-copy{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}

.rfsx-sar-page .rfsx-share-copy:hover{
  background: rgba(255,255,255,0.09);
}


/* ===============================
   SAR usage tip module
   (Cellular-only vs Wi‑Fi + Cellular)
   =============================== */

/* THEME TOKENS (SCOPED) */
#sarUsage{
  /* Light (higher contrast) */
  --ink:    #0b1220;           /* primary text */
  --muted:  #334155;           /* slate-700, for subtle text only */
  --card:   #ffffff;
  --panel:  #f6f8fb;
  --border: #e6e9ef;
  --ring:   #0b6ea84d;
  --link:   #0b6ea8;           /* readable link in light */

  --thBg:   #0b0b0b;           /* table header bg */
  --hdrBg:  #0b0b0b;           /* banner bg above table */
  --capBg:  #111827;           /* small capsule bg */
  --pct:    #b45309;           /* amber-700 for % label on light */

  /* gradients for cells */
  --cellA:  #0e9f6e; --cellB:#047857;   /* green */
  --simA:   #ef4444; --simB:#991b1b;   /* red  */
}

/* Force dark tokens on RFSX pages (mel) so it matches the site theme */
body.rfsx-page #sarUsage{
  --ink:    #e6edf3;
  --muted:  #a9b4c3;
  --card:   #0f172a;
  --panel:  #111a2a;
  --border: #1f2937;
  --ring:   #ffd36f66;
  --link:   #ffb020;

  --thBg:   #141c2a;
  --hdrBg:  #162133;
  --capBg:  #1f2937;
  --pct:    #ffe08a;
}

/* Fallback when component is viewed outside your theme */
@media (prefers-color-scheme: dark){
  #sarUsage{
    --ink:#e6edf3; --muted:#a9b4c3; --card:#0f172a; --panel:#111a2a; --border:#1f2937; --ring:#ffd36f66; --link:#ffb020;
    --thBg:#141c2a; --hdrBg:#162133; --capBg:#1f2937; --pct:#ffe08a;
  }
}

/* Base & type */
#sarUsage{
  font: normal 16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--ink);
  margin:16px 0;
}
.sar-phone #sarUsage{
  /* Match the inset spacing used by the Children vs adult module */
  margin:14px 14px 16px;
}
#sarUsage a{ color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
#sarUsage .section-tag{
  background:#0b6ea8;color:#fff;border-radius:6px;padding:10px 14px;font-weight:900;
  letter-spacing:.3px;display:inline-block;box-shadow:0 8px 22px rgba(0,0,0,.10)
}
#sarUsage h1{font-size:clamp(20px,2.4vw,28px);line-height:1.25;margin:14px 0 6px;color:var(--ink);font-weight:1000}
#sarUsage h2{font-size:clamp(18px,2vw,22px);line-height:1.25;margin:0 0 10px;color:var(--ink);font-weight:900}
/* Body copy uses full-ink color for strong readability */
#sarUsage p{margin:10px 0;color:var(--ink)}
#sarUsage .muted{color:var(--muted)}
#sarUsage .card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  font-weight:900;color:var(--ink);display:inline-flex;align-items:center;gap:8px;
}

/* Table wrapper */
#sarUsage .table-wrap{
  margin-top:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);padding:10px
}

/* Remove horizontal scrollers: let table shrink fluidly */
#sarUsage .scroll-x{overflow:visible}

/* Table: fluid, wraps content, fits small screens */
#sarUsage table{
  border-collapse:collapse;width:100%;
  table-layout:fixed;
  word-wrap:break-word; overflow-wrap:anywhere;
}
#sarUsage th,#sarUsage td{
  padding:14px 12px;border-bottom:1px solid var(--border);text-align:center;color:var(--ink)
}
#sarUsage thead th{
  background:var(--thBg);color:#fff;text-transform:uppercase;letter-spacing:.4px
}

/* Header label above table */
#sarUsage .hdr{
  font-weight:900;text-align:left;padding:8px 12px;background:var(--hdrBg);color:#fff;border-radius:6px;
  display:inline-flex;align-items:center;gap:8px
}
#sarUsage .cap{
  padding:6px 10px;background:var(--capBg);color:#fff;border-radius:8px;display:inline-flex;align-items:center;gap:8px
}

/* Cell colorways */
#sarUsage .cellular{background:linear-gradient(180deg,var(--cellA),var(--cellB));color:#fff;font-weight:900;border-radius:8px}
#sarUsage .simul{   background:linear-gradient(180deg,var(--simA),var(--simB)); color:#fff;font-weight:900;border-radius:8px}
#sarUsage .diff{    background:var(--capBg);color:#fff;font-weight:900;border-radius:8px}

#sarUsage .rowlabel{display:block;font-weight:1000;letter-spacing:.2px}
#sarUsage .pct{display:block;font-weight:900;color:var(--pct)}

/* Note */
#sarUsage .note{font-size:14px;color:var(--muted);margin-top:8px}

/* Mobile tweaks */
@media (max-width:700px){
  #sarUsage th,#sarUsage td{padding:10px 8px}
  #sarUsage .rowlabel{font-size:.9rem}
  #sarUsage .pct{font-size:.95rem}
}
@media (max-width:480px){
  #sarUsage th,#sarUsage td{padding:8px 6px}
  #sarUsage h1{font-size:20px}
  #sarUsage h2{font-size:18px}
}