/* Shared styling for the utility website — calculator pages.
   Themed: light by default, dark via OS preference (auto), or forced by data-theme.
   Compact: smaller base font, tighter spacing. */

/* ---------- Light (default) ---------- */
:root{
  --bg:#f6f7fb; --panel:#ffffff; --panel2:#eef1f6; --panel3:#e6eaf1; --line:#d7dde7;
  --text:#1c2430; --muted:#5b6472; --accent:#2f6fed; --accent2:#15803d;
  --warn:#b45309; --bad:#dc2626; --purple:#7c3aed; --gold:#b58900;
  --tldr-a:#eef3ff; --tldr-b:#e2eaff;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
}
/* ---------- Dark: follow OS preference (auto) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1117; --panel:#171a23; --panel2:#1e222e; --panel3:#232a39; --line:#2a2f3d;
    --text:#e8eaf0; --muted:#9aa3b2; --accent:#4f8cff; --accent2:#22c55e;
    --warn:#f59e0b; --bad:#ef4444; --purple:#8b5cf6; --gold:#eab308;
    --tldr-a:#14213c; --tldr-b:#1a2a47;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.3);
  }
}
/* ---------- Forced manual overrides ---------- */
html[data-theme="light"]{
  --bg:#f6f7fb; --panel:#ffffff; --panel2:#eef1f6; --panel3:#e6eaf1; --line:#d7dde7;
  --text:#1c2430; --muted:#5b6472; --accent:#2f6fed; --accent2:#15803d;
  --warn:#b45309; --bad:#dc2626; --purple:#7c3aed; --gold:#b58900;
  --tldr-a:#eef3ff; --tldr-b:#e2eaff;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
}
html[data-theme="dark"]{
  --bg:#0f1117; --panel:#171a23; --panel2:#1e222e; --panel3:#232a39; --line:#2a2f3d;
  --text:#e8eaf0; --muted:#9aa3b2; --accent:#4f8cff; --accent2:#22c55e;
  --warn:#f59e0b; --bad:#ef4444; --purple:#8b5cf6; --gold:#eab308;
  --tldr-a:#14213c; --tldr-b:#1a2a47;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.3);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px; background:var(--bg); color:var(--text); line-height:1.5; padding:0; transition:background .2s ease,color .2s ease;}
a{color:var(--accent); transition:color .15s ease;}
.wrap{max-width:980px; margin:0 auto; padding:0 20px;}

/* header / nav */
.topbar{background:var(--panel2); border-bottom:1px solid var(--line); padding:9px 0; position:sticky; top:0; z-index:10;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.brand{display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:15px; color:var(--text); text-decoration:none; letter-spacing:-.3px;}
.brand .logo{width:22px; height:22px; border-radius:5px; object-fit:cover; display:block;}
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.nav a{color:var(--muted); text-decoration:none; font-size:12.5px; padding:5px 9px; border-radius:6px; border:1px solid transparent;}
.nav a:hover{color:var(--text); background:var(--panel3);}
.nav a.on{color:var(--accent); border-color:var(--accent); background:rgba(79,140,255,.12);}

/* theme switch (segmented control injected by assets/theme.js) */
.theme-switch{display:inline-flex; align-items:center; gap:2px; margin-left:6px; padding-left:6px; border-left:1px solid var(--line); background:var(--panel3); border-radius:7px; padding:2px;}
.theme-switch .ts{border:0; background:transparent; color:var(--muted); font-size:11px; font-weight:700; line-height:1; padding:4px 8px; border-radius:5px; cursor:pointer; font-family:inherit;}
.theme-switch .ts:hover{color:var(--text);}
.theme-switch .ts.on{background:var(--accent); color:#fff;}

main{padding:22px 0 56px;}
.hero{display:flex; align-items:center; gap:18px;}
.hero-logo{width:72px; height:72px; border-radius:16px; flex:none; object-fit:cover;}
h1{font-size:24px; font-weight:800; letter-spacing:-.5px; line-height:1.18; margin:6px 0 4px;}
.page-sub{color:var(--muted); font-size:14px; margin:0 0 14px;}
.updated{color:var(--muted); font-size:11.5px; margin-bottom:18px;}
.updated b{color:var(--text);}

/* TL;DR verdict box at top */
.tldr{background:linear-gradient(135deg,var(--tldr-a) 0%,var(--tldr-b) 100%); border:1px solid var(--accent); border-left:5px solid var(--accent); border-radius:11px; padding:14px 16px; margin:14px 0 20px; box-shadow:var(--shadow);}
.tldr .tag{font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); font-weight:800;}
.tldr .verdict{font-size:18px; font-weight:800; color:var(--text); margin-top:4px; line-height:1.32;}
.tldr .detail{color:var(--muted); font-size:12.5px; margin-top:6px;}
.share{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.share button{background:var(--panel3); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:6px 11px; font-size:12px; cursor:pointer; font-family:inherit;}
.share button:hover{border-color:var(--accent); color:var(--accent);}

/* social share buttons (injected by assets/share.js) */
.share-links{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:14px 0 6px;}
.share-links .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-right:2px; font-weight:700;}
.sbtn{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--panel2); color:var(--muted); cursor:pointer; padding:0; transition:transform .12s ease,color .15s ease,background .15s ease,border-color .15s ease;}
.sbtn svg{width:15px; height:15px; fill:currentColor;}
.sbtn:hover{transform:translateY(-1px);}
.sbtn.facebook:hover{background:#1877f2; border-color:#1877f2; color:#fff;}
.sbtn.x:hover{background:#111111; border-color:#111111; color:#fff;}
.sbtn.whatsapp:hover{background:#25d366; border-color:#25d366; color:#fff;}
.sbtn.linkedin:hover{background:#0a66c2; border-color:#0a66c2; color:#fff;}
.sbtn.bluesky:hover{background:#0085ff; border-color:#0085ff; color:#fff;}
.sbtn.copy{width:auto; border-radius:7px; padding:0 11px; gap:6px; font-size:12px; font-weight:600; font-family:inherit;}
.sbtn.copy svg{width:13px; height:13px;}
.sbtn.copy span{line-height:1;}
.sbtn.done{border-color:var(--accent2); color:var(--accent2);}

/* form */
.field label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px;}
.field input,.field select{background:var(--panel3); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:7px 10px; width:100%; font-size:13.5px; font-family:inherit;}
.field input:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,140,255,.15);}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:11px 16px;}
@media(max-width:700px){.grid{grid-template-columns:1fr;}}
.inputrow{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:12px 0; box-shadow:var(--shadow);}
.inputrow h3{font-size:13.5px; margin-bottom:11px; color:var(--text);}

/* results */
.results{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:14px 0 8px;}
.res{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:13px 14px; box-shadow:var(--shadow);}
.res .big{font-size:22px; font-weight:800; color:var(--accent); line-height:1.1;}
.res .big.g{color:var(--accent2);} .res .big.b{color:var(--bad);} .res .big.w{color:var(--warn);}
.res .lbl{color:var(--muted); font-size:11.5px; margin-top:3px;}
.res .note{color:var(--muted); font-size:11px; margin-top:6px;}

/* chart */
.chartbox{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; margin:12px 0; box-shadow:var(--shadow);}
.chart{width:100%; height:340px;}
.chart.sm{height:260px;}
.chartcap{color:var(--muted); font-size:12px; margin:5px 4px 2px;}

/* editorial */
.editorial{max-width:800px; margin:26px 0;}
.editorial h2{font-size:18px; font-weight:700; margin:20px 0 8px; color:var(--text); padding-bottom:6px; border-bottom:2px solid var(--line);}
.editorial h3{font-size:15px; font-weight:700; margin:16px 0 6px; color:var(--accent);}
.editorial p{margin:8px 0 12px;}
.editorial ul{padding-left:20px; margin:8px 0;}
.editorial li{margin:6px 0;}

/* FAQ */
.faq summary{font-weight:700; color:var(--text); cursor:pointer; padding:8px 0; border-bottom:1px solid var(--line);}
.faq details summary{list-style:none;}
.faq details summary::-webkit-details-marker{display:none;}
.faq details[open] summary{color:var(--accent);}
.faq .a{padding:8px 0 12px; color:var(--muted); font-size:13.5px;}

/* ad slots */
.ad-slot{background:repeating-linear-gradient(45deg,var(--panel2),var(--panel2) 12px,var(--panel3) 12px,var(--panel3) 24px); border:1px dashed var(--line); border-radius:9px; text-align:center; color:var(--muted); font-size:11.5px; letter-spacing:.5px; padding:16px 12px; margin:18px 0;}
.ad-slot.inline{padding:12px; margin:12px 0;}
.affiliate{border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin:12px 0; background:var(--panel2);}
.affiliate h4{font-size:13.5px; margin-bottom:6px; color:var(--text);}
.affiliate .lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:6px;}
.affiliate a{color:var(--accent); font-weight:700; text-decoration:underline;}

/* callout / assumptions */
.callout{border-left:4px solid var(--accent); background:var(--panel); padding:12px 14px; border-radius:0 9px 9px 0; margin:12px 0;}
.callout.warn{border-color:var(--warn);}
.callout h4{font-size:14px; margin-bottom:5px; color:var(--text);}
.callout p{margin:3px 0;}
.assumptions{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:12px 14px; margin:12px 0; font-size:12.5px; color:var(--muted);}
.assumptions b{color:var(--text);}
.assumptions ul{padding-left:18px; margin:6px 0;}
.assumptions li{margin:4px 0;}

/* more tools / internal links */
.more-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:22px 0 6px; padding-top:16px; border-top:1px solid var(--line);}
.more-tools span{font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:700; margin-right:4px;}
.more-tools a{font-size:12.5px; color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:4px 10px; border-radius:6px; background:var(--panel2);}
.more-tools a:hover{color:var(--accent); border-color:var(--accent);}

/* breadcrumbs + footer */
.crumbs{font-size:11.5px; color:var(--muted); margin-bottom:12px;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{margin:0 6px;}
.footer{margin-top:36px; padding:18px 0 44px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; text-align:center;}
.footer a{color:var(--muted);}