/* ==========================================================================
   site.css — shared styles for the EasyAnalysis site (landing + doc pages).
   Self-contained: no CDN, no webfonts. Theme-aware (light/dark).
   ========================================================================== */
:root{
  --paper:#0F1310; --panel:#171C17; --sunk:#131813; --tint:#1D2A1E; --bar:#1B3A1D;
  --ink:#E8EDE4; --bark:#93A08C; --line:#2A322A;
  --forest:#5FBF62; --canopy:#7ED481; --onbrand:#08120A; --sky:#6FA8D6; --earth:#C79A5B;
  --mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1080px;
}
@media (prefers-color-scheme: light){
  :root{ --paper:#F7F8F4; --panel:#FFFFFF; --sunk:#EEF1EA; --tint:#E7F0E7; --bar:#2E7D32;
         --ink:#10150F; --bark:#5C6657; --line:#DCE1D6;
         --forest:#2E7D32; --canopy:#3E9B44; --onbrand:#FFFFFF; }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);line-height:1.55;
     -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
a{color:var(--canopy);}

/* nav */
nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
    background:color-mix(in srgb,var(--paper) 82%,transparent);border-bottom:1px solid var(--line);}
nav .wrap{display:flex;align-items:center;gap:14px;height:56px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px;color:var(--ink);text-decoration:none;}
.brand .mk{width:26px;height:26px;border-radius:7px;background:var(--forest);display:grid;place-items:center;}
.brand .mk svg{width:15px;height:15px;fill:var(--onbrand);}
nav .links{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
nav .links a{color:var(--bark);text-decoration:none;font-size:13.5px;padding:7px 11px;border-radius:7px;}
nav .links a:hover,nav .links a.on{color:var(--ink);background:var(--tint);}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:10px 18px;
     font:600 14px var(--ui);text-decoration:none;cursor:pointer;border:1px solid var(--line);
     background:var(--panel);color:var(--ink);}
.btn:hover{border-color:var(--canopy);}
.btn.go{background:var(--forest);border-color:var(--forest);color:var(--onbrand);}
.btn.sm{padding:7px 13px;font-size:13px;}

/* headings + sections */
section{padding:64px 0;border-bottom:1px solid var(--line);}
.eyebrow{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--forest);margin-bottom:12px;}
h1{font-size:clamp(28px,4.4vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:680;margin:0 0 16px;text-wrap:balance;}
h2{font-size:clamp(21px,3vw,30px);letter-spacing:-.02em;font-weight:660;margin:0 0 12px;text-wrap:balance;}
h3{font-size:16px;font-weight:640;margin:0 0 8px;}
.sub{color:var(--bark);max-width:64ch;margin:0 0 30px;font-size:15.5px;}

/* cards / grids */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.card{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:20px;}
.card p{margin:0;color:var(--bark);font-size:13.8px;}
.card .ic{width:34px;height:34px;border-radius:9px;background:var(--tint);display:grid;place-items:center;margin-bottom:13px;}
.card .ic svg{width:17px;height:17px;stroke:var(--canopy);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* numbered how-to steps */
.how{display:flex;flex-direction:column;gap:14px;counter-reset:s;}
.how .step{display:grid;grid-template-columns:34px 1fr;gap:15px;border:1px solid var(--line);
           border-radius:12px;background:var(--panel);padding:17px 18px;}
.how .step .n{width:28px;height:28px;border-radius:50%;background:var(--forest);color:var(--onbrand);
              display:grid;place-items:center;font:700 13px var(--mono);}
.how .step h3{margin:2px 0 6px;}
.how .step p{margin:0;color:var(--bark);font-size:14px;}
.how .step p + p{margin-top:8px;}

/* code block */
.code{border:1px solid var(--line);border-radius:11px;background:var(--sunk);overflow:hidden;margin:14px 0;}
.code .top{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line);
           font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bark);}
.code .top .copy{margin-left:auto;border:1px solid var(--line);background:var(--panel);color:var(--bark);
                 border-radius:6px;padding:4px 10px;font:600 10.5px var(--mono);cursor:pointer;}
.code .top .copy:hover{border-color:var(--canopy);color:var(--ink);}
.code pre{margin:0;padding:15px 14px;overflow-x:auto;font:13px/1.6 var(--mono);color:var(--ink);}
.code pre .c{color:var(--bark);}
code{font-family:var(--mono);font-size:.92em;background:var(--tint);padding:1px 6px;border-radius:5px;}

/* doc layout with a side index */
.doc{display:grid;grid-template-columns:216px 1fr;gap:34px;padding:44px 0;}
@media (max-width:820px){ .doc{grid-template-columns:1fr;} .doc aside{position:static !important;} }
.doc aside{position:sticky;top:76px;align-self:start;}
.doc aside .t{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bark);margin-bottom:10px;}
.doc aside a{display:block;color:var(--bark);text-decoration:none;font-size:13.5px;padding:6px 10px;border-radius:7px;}
.doc aside a:hover{background:var(--tint);color:var(--ink);}
.doc article > section{border:0;padding:0 0 42px;}
.doc article h2{scroll-margin-top:78px;}
.doc p{color:var(--bark);max-width:70ch;}
.doc article strong{color:var(--ink);}
.doc ul,.doc ol{color:var(--bark);max-width:70ch;padding-left:20px;}
.doc li{margin-bottom:7px;}
.doc li strong{color:var(--ink);}

table{border-collapse:collapse;width:100%;margin:14px 0;font-size:13.8px;}
th,td{border-bottom:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top;}
th{color:var(--bark);font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;}
td{color:var(--bark);} td strong{color:var(--ink);}

.callout{border:1px solid var(--line);border-left:2px solid var(--forest);background:var(--sunk);
         border-radius:9px;padding:13px 15px;margin:16px 0;color:var(--bark);font-size:14px;max-width:70ch;}
.callout strong{color:var(--ink);}

footer{padding:36px 0 52px;color:var(--bark);font-size:13px;}
footer .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
footer a{color:var(--bark);}