/* Piru · Effect Estimator — scoped styling for the public estimator page.
 * Rides on /css/yamero.css (tokens) + /piru/issue.css (cover chrome) + /piru/myths/myths.css
 * (.rx-card / .rx-slider / .rx-pick / .rx-readout / .rx-foot). This file only adds the
 * four-lens grid and the estimator's own bits.
 * GOTCHA (see myths/README.md): issue.css redefines --ink to near-black. Light body text is
 * var(--paper, #f2e7ef) — never var(--ink). */

.ee-main{max-width:1080px;margin:0 auto;padding:8px 26px 40px}
/* centered column, matching the approved myth cards (.myth-head) — the eyebrow rules and the title
   are designed centered, so the intro reads as a cover rather than a left-aligned article opener */
.ee-head{margin:34px auto 26px;max-width:70ch}
.ee-head .cover-title{font-size:clamp(30px,6vw,50px);line-height:1.05;margin:12px 0 16px}
.ee-head .cover-sub{max-width:62ch;margin:0 0 14px}

/* the "this is a model" standing notice — never let this page read as guidance */
.ee-caveat{
  border-left:2px solid var(--lilac);
  background:oklch(77.3% 0.113 301.5 / 0.06);
  padding:13px 16px;margin:18px auto 0;border-radius:0 10px 10px 0;
  font:14px/1.6 var(--f-mono);color:var(--ink-soft);max-width:64ch;text-align:left;
}
.ee-caveat b{color:var(--lilac);font-weight:600}

/* controls */
.ee-controls{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px;margin:0 0 20px}
.ee-ctl-label{font:700 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 10px}
.ee-ctl-label:not(:first-child){margin-top:20px}
.ee-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px}
.ee-pick button{background:var(--raise);border:1px solid var(--line);color:var(--ink-soft);padding:10px 13px;border-radius:11px;cursor:pointer;text-align:left;display:block;transition:border-color .15s,background .15s}
.ee-pick button .n{display:block;font:600 14.5px/1.2 var(--f-mono)}
.ee-pick button .s{display:block;font:400 11px/1.3 var(--f-mono);color:var(--ink-dim);margin-top:4px}
.ee-pick button:hover{border-color:var(--pink-hot)}
.ee-pick button.on{background:var(--pink-hot);color:var(--void);border-color:var(--pink-hot)}
.ee-pick button.on .s{color:oklch(13.8% 0.021 300.1 / .66)}
.ee-route{display:flex;gap:9px;flex-wrap:wrap}
.ee-route button{background:var(--raise);border:1px solid var(--line);color:var(--ink-soft);padding:9px 18px;border-radius:11px;font:600 13.5px/1.15 var(--f-mono);cursor:pointer;transition:border-color .15s,background .15s}
.ee-route button:hover{border-color:var(--cyan);color:var(--cyan)}
.ee-route button.on{background:var(--cyan);color:var(--void);border-color:var(--cyan)}

/* four-lens grid */
.ee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:15px;margin:0 0 22px}
.ee-lens{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 16px 12px;
  box-shadow:0 0 50px -22px var(--pink-glow), inset 0 1px 0 oklch(100% 0 0 / 0.03)}
.ee-lens-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ee-lens-name{font:700 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.ee-lens-hint{font:11px/1 var(--f-mono);color:var(--ink-dim)}
.ee-lens-read{font:14px/1.3 var(--f-mono);color:var(--ink-dim);margin:9px 0 4px}
.ee-lens-read b{font:700 21px/1.2 var(--f-mono);letter-spacing:-.01em}
.ee-canvas{width:100%;height:168px;display:block}
.ee-lens-blurb{font:13px/1.5 var(--f-frag);color:var(--ink-dim);margin:8px 0 0}

#meta{font:12px var(--f-mono);color:var(--ink-dim);letter-spacing:.05em;margin:0 2px 12px}

/* narrative readout — reuses the myths .rx-readout look */
.ee-readout{font:19px/1.55 var(--f-frag);color:var(--paper,oklch(93.9% 0.016 335.1));margin:4px 2px 0;min-height:104px}
.ee-readout b{color:var(--pink-hot);font-weight:600}
.ee-readout i{color:var(--ink-soft);font-style:italic}
.ee-readout .crash{color:oklch(66.3% 0.224 28.3);font-weight:500}

@media(max-width:620px){
  .ee-main{padding:8px 18px 32px}
  .ee-grid{grid-template-columns:1fr}
  .ee-lens-read b{font-size:19px}
  /* the inherited .rx-slider is a single row with two fixed-width ends; at phone widths that
     squeezes the mg readout off the edge. Give the label its own line instead. */
  .ee-controls .rx-slider{flex-wrap:wrap;gap:8px 12px}
  .ee-controls .rx-slider label{min-width:100%}
  .ee-controls .rx-slider .val{min-width:76px}
}