/* oilivetrader.com — bright, plain-Hindi, evidence-first.
   Body is set in a sans (easier on phones); display keeps the serif for character.
   Loss red / gain green are semantic and never decorative. */

:root{
  --paper:#FFFFFF;
  --surface:#F2F7FC;
  --sunk:#E7EFF7;
  --ink:#141E29;
  --muted:#4F6070;
  --faint:#7D8D9C;
  --rule:#DCE6EF;
  --accent:#0E6FCB;
  --accent-ink:#0A56A0;
  --accent-soft:#E1EEFB;
  --warm:#C77A12;
  --warm-soft:#FDF1DD;
  --loss:#C5341C;
  --loss-soft:#FCE9E5;
  --ok:#12795A;
  --ok-soft:#E1F3EC;
  --shadow:0 1px 2px rgba(20,30,41,.05), 0 6px 20px rgba(20,30,41,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1620;
    --surface:#17212D;
    --sunk:#1D2937;
    --ink:#E9EFF5;
    --muted:#A3B2C0;
    --faint:#7A8896;
    --rule:#26333F;
    --accent:#5CACF2;
    --accent-ink:#8CC5F7;
    --accent-soft:#122536;
    --warm:#E9AF5B;
    --warm-soft:#2A2113;
    --loss:#F0836A;
    --loss-soft:#2C1A16;
    --ok:#5FC59D;
    --ok-soft:#12271F;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1620;
  --surface:#17212D;
  --sunk:#1D2937;
  --ink:#E9EFF5;
  --muted:#A3B2C0;
  --faint:#7A8896;
  --rule:#26333F;
  --accent:#5CACF2;
  --accent-ink:#8CC5F7;
  --accent-soft:#122536;
  --warm:#E9AF5B;
  --warm-soft:#2A2113;
  --loss:#F0836A;
  --loss-soft:#2C1A16;
  --ok:#5FC59D;
  --ok-soft:#12271F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--accent);color:#fff;padding:.7rem 1rem;
}
.skip:focus{left:0}

.wrap{
  max-width:46rem;
  margin:0 auto;
  padding:0 clamp(1.1rem,4vw,2rem) 4rem;
}

/* ================= header / nav ================= */
.site-head{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  margin-bottom:2.6rem;
}
.site-head .bar{
  max-width:60rem;margin:0 auto;
  padding:.75rem clamp(1.1rem,4vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.95rem;letter-spacing:.01em;font-weight:500;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.brand span{color:var(--accent)}

.site-nav{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{
  font-size:.9rem;font-weight:500;color:var(--muted);text-decoration:none;
  padding:.45rem .6rem;border-radius:7px;line-height:1.3;
}
.site-nav a:hover{color:var(--accent);background:var(--accent-soft)}
.site-nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);font-weight:600}
.site-nav a.cta{
  color:#fff;background:var(--accent);font-weight:600;
}
.site-nav a.cta:hover{background:var(--accent-ink);color:#fff}

/* keep the bar on one line at every width */
.site-nav{flex-wrap:nowrap}
.site-head .bar{flex-wrap:nowrap}
.site-nav a,.menu > summary{white-space:nowrap}
@media (max-width:33rem){
  .site-nav a.plain{display:none}          /* होम / डेमो live in the menu on small screens */
  .site-nav a.cta{padding:.45rem .75rem;font-size:.86rem}
  .menu > summary{font-size:.86rem}
  .brand{font-size:.88rem}
}

/* full menu, no JS */
.menu{position:relative}
.menu > summary{
  list-style:none;cursor:pointer;
  font-size:.9rem;font-weight:500;color:var(--muted);
  padding:.45rem .6rem;border-radius:7px;
  display:flex;align-items:center;gap:.35rem;
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::after{content:"▾";font-size:.75rem}
.menu[open] > summary{color:var(--accent);background:var(--accent-soft)}
.menu > summary:hover{color:var(--accent);background:var(--accent-soft)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + .5rem);
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--shadow);
  padding:.9rem;width:min(21rem,calc(100vw - 2rem));
  display:flex;flex-direction:column;gap:.9rem;
  max-height:min(74vh,34rem);overflow-y:auto;
}
.menu-group{display:flex;flex-direction:column;gap:.1rem}
.menu-group b{
  font-family:"IBM Plex Mono",monospace;
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:500;padding:.3rem .55rem;
}
.menu-panel a{
  font-size:.9rem;color:var(--ink);text-decoration:none;
  padding:.5rem .55rem;border-radius:7px;line-height:1.45;
}
.menu-panel a:hover{background:var(--accent-soft);color:var(--accent)}
.menu-panel a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* ================= type ================= */
h1{
  font-family:"Tiro Devanagari Hindi",Georgia,serif;
  font-size:clamp(1.95rem,5.4vw,2.85rem);
  line-height:1.3;font-weight:400;
  margin:0;text-wrap:balance;letter-spacing:-.005em;
}
h2{
  font-family:"Tiro Devanagari Hindi",Georgia,serif;
  font-size:clamp(1.35rem,3.6vw,1.7rem);
  line-height:1.42;font-weight:400;margin:0;text-wrap:balance;
}
h3{font-size:1.02rem;font-weight:600;margin:0;line-height:1.5}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}
strong{font-weight:600}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.standfirst{font-size:1.12rem;line-height:1.8;color:var(--muted)}
.lede{font-size:1.06rem}

/* ================= rhythm ================= */
article,.stack{display:flex;flex-direction:column;gap:2.4rem}
section{display:flex;flex-direction:column;gap:1rem}
.tight{gap:.7rem}
.article-head{display:flex;flex-direction:column;gap:.9rem}
.meta{
  display:flex;flex-wrap:wrap;gap:.35rem .95rem;
  padding-top:.85rem;border-top:1px solid var(--rule);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.69rem;letter-spacing:.04em;color:var(--faint);
}

/* ================= callouts ================= */
.verdict{
  background:var(--loss-soft);
  border:1px solid var(--rule);border-left:4px solid var(--loss);
  border-radius:12px;padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.verdict .fig{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(1.65rem,5vw,2.25rem);line-height:1.12;
  color:var(--loss);font-variant-numeric:tabular-nums;font-weight:500;
}
.verdict p{font-size:.96rem;line-height:1.75;color:var(--muted)}

.note{
  background:var(--accent-soft);
  border:1px solid var(--rule);border-left:4px solid var(--accent);
  border-radius:12px;padding:1.15rem 1.3rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.note p{font-size:.95rem;line-height:1.8;color:var(--muted)}
.note strong{color:var(--ink)}
.formula{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.85rem;line-height:1.6;color:var(--ink);
  overflow-x:auto;white-space:nowrap;padding-bottom:.3rem;
}

/* ================= stats ================= */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:1rem;
}
.stat{
  display:flex;flex-direction:column;gap:.2rem;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;padding:1rem 1.05rem;
}
.stat .n{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:1.65rem;line-height:1.15;font-variant-numeric:tabular-nums;
  color:var(--accent);font-weight:500;
}
.stat .n.bad{color:var(--loss)}
.stat .l{font-size:.79rem;line-height:1.55;color:var(--muted)}

/* ================= tables ================= */
.scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
table{
  border-collapse:collapse;width:100%;min-width:23rem;
  font-size:.88rem;line-height:1.65;
}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:500;background:var(--surface);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface)}
td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
td.bad{color:var(--loss)}
tbody tr.total td{background:var(--sunk);font-weight:600}
caption{
  caption-side:bottom;text-align:left;padding:.75rem .9rem;
  font-size:.78rem;color:var(--faint);line-height:1.65;
  border-top:1px solid var(--rule);background:var(--surface);
}

/* ================= cards ================= */
.pieces{display:flex;flex-direction:column;gap:.7rem}
.piece{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.05rem 1.15rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  text-decoration:none;color:inherit;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.piece:hover{border-color:var(--accent);background:var(--surface);transform:translateY(-1px)}
.piece:hover h3{color:var(--accent)}
.piece .k{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.piece h3{font-family:"Tiro Devanagari Hindi",Georgia,serif;font-weight:400;font-size:1.14rem;line-height:1.4}
.piece p{font-size:.87rem;line-height:1.7;color:var(--muted)}
.piece.soon{opacity:.55;pointer-events:none}

/* ================= faq ================= */
.faq{display:flex;flex-direction:column;gap:.5rem}
.faq details{
  border:1px solid var(--rule);border-radius:12px;background:var(--paper);
  padding:0 1.1rem;
}
.faq details[open]{background:var(--surface)}
.faq summary{
  padding:.95rem 0;cursor:pointer;font-weight:600;font-size:.98rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:1.1rem}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:1rem;font-size:.94rem;line-height:1.85;color:var(--muted)}

/* ================= calculator ================= */
.calc{
  display:flex;flex-direction:column;gap:1.3rem;
  border:1px solid var(--rule);border-radius:14px;
  padding:1.4rem 1.35rem;background:var(--surface);box-shadow:var(--shadow);
}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.55}
.field .hint{font-size:.8rem;color:var(--faint);line-height:1.6}
.field input{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:1.05rem;padding:.75rem .85rem;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:9px;
  width:100%;font-variant-numeric:tabular-nums;
}
.field input:focus{border-color:var(--accent)}
.calc button{
  font-family:inherit;font-size:1rem;font-weight:600;
  padding:.85rem 1.2rem;cursor:pointer;border:none;border-radius:9px;
  background:var(--accent);color:#fff;
}
.calc button:hover{background:var(--accent-ink)}
.privacy{
  background:var(--ok-soft);border:1px solid var(--rule);border-left:4px solid var(--ok);
  border-radius:12px;padding:1rem 1.15rem;
  font-size:.85rem;line-height:1.75;color:var(--muted);
}
.privacy strong{color:var(--ok)}
#result,#out{display:none;flex-direction:column;gap:2.4rem}
#result.show{display:flex}
.err{color:var(--loss);font-size:.9rem;font-weight:500}
.share{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.share a,.share button{
  font-family:inherit;font-size:.9rem;font-weight:600;text-decoration:none;
  padding:.65rem 1.05rem;border:1px solid var(--rule);border-radius:9px;
  background:var(--paper);color:var(--ink);cursor:pointer;
}
.share a:hover,.share button:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}

/* ================= disclaimer ================= */
.disclaimer{
  border:1px solid var(--rule);border-radius:12px;background:var(--surface);
  padding:1.15rem 1.3rem;
  font-size:.82rem;line-height:1.8;color:var(--muted);
  display:flex;flex-direction:column;gap:.55rem;
}
.disclaimer .eyebrow{color:var(--faint)}

article > footer{
  border-top:1px solid var(--rule);
  margin-top:.5rem;padding-top:1.1rem;
  font-size:.79rem;line-height:1.75;color:var(--faint);
  display:flex;flex-direction:column;gap:.45rem;
}
article > footer a{color:var(--muted)}

/* ================= site footer ================= */
.site-foot{
  border-top:1px solid var(--rule);
  background:var(--surface);
  margin-top:3rem;padding:2.4rem 0 3rem;
}
.site-foot .inner{
  max-width:46rem;margin:0 auto;
  padding:0 clamp(1.1rem,4vw,2rem);
  display:flex;flex-direction:column;gap:1.8rem;
}
.foot-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.6rem;
}
.foot-col{display:flex;flex-direction:column;gap:.1rem}
.foot-col b{
  font-family:"IBM Plex Mono",monospace;
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:.35rem;
}
.foot-col a{
  font-size:.87rem;color:var(--muted);text-decoration:none;
  padding:.3rem 0;line-height:1.5;
}
.foot-col a:hover{color:var(--accent)}
.foot-col a[aria-current="page"]{color:var(--accent);font-weight:600}
.foot-note{
  border-top:1px solid var(--rule);padding-top:1.3rem;
  font-size:.79rem;line-height:1.75;color:var(--faint);
  display:flex;flex-direction:column;gap:.5rem;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}