/* Piru · myth cards — scoped interactive styling.
 * Rides on /css/yamero.css (tokens, heart field, masthead, ticker, colophon)
 * and /piru/issue.css (cover/section chrome). This file only styles the
 * interactive "dispensary" guts of each myth, in the house palette. */

.myth-main{max-width:760px;margin:0 auto;padding:8px 26px 40px}

/* intro — leans on issue.css .cover-eyebrow / .cover-title / .cover-sub,
   but the myth pages are single-column and a touch tighter */
.myth-head{margin:34px 0 26px}
.myth-head .cover-title{font-size:clamp(30px,6vw,46px);line-height:1.06;margin:12px 0 16px}
.myth-head .cover-sub{max-width:60ch;margin:0}

/* the interactive card — a framed prescription readout */
.rx-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 18px 14px;
  margin:0 0 22px;
  box-shadow:0 0 50px -20px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,0.03);
}
.rx-legend{display:flex;gap:16px 20px;justify-content:flex-end;flex-wrap:wrap;font:12px/1 var(--f-mono);color:var(--ink-dim);margin-bottom:8px}
.rx-legend span{display:inline-flex;align-items:center;gap:7px}
.rx-legend i{width:15px;height:3px;border-radius:2px;display:inline-block}
.rx-canvas{width:100%;display:block}

/* controls */
.rx-ctl{display:flex;flex-direction:column;gap:19px;margin:4px 2px 24px}
.rx-slider{display:flex;align-items:center;gap:16px}
.rx-slider label{font:13px var(--f-mono);color:var(--ink-soft);min-width:132px}
.rx-slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;background:var(--raise);outline:none;cursor:pointer;border:1px solid var(--line-soft)}
.rx-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--pink-hot);border:4px solid var(--base);box-shadow:0 0 0 1px var(--pink-hot),0 0 14px -2px var(--pink-hot);cursor:pointer}
.rx-slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--pink-hot);border:4px solid var(--base);cursor:pointer}
.rx-slider .val{font:16px var(--f-mono);font-weight:600;color:var(--pink-hot);min-width:96px;text-align:right;font-variant-numeric:tabular-nums}

/* segmented substance picker (grapefruit) */
.rx-pick{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 20px}
.rx-pick button{background:var(--raise);border:1px solid var(--line);color:var(--ink-soft);padding:9px 15px;border-radius:11px;font:600 14px/1.15 var(--f-mono);cursor:pointer;text-align:left}
.rx-pick button .s{display:block;font:400 11px/1 var(--f-mono);color:var(--ink-dim);margin-top:4px}
.rx-pick button.on{background:var(--pink-hot);color:var(--void);border-color:var(--pink-hot)}
.rx-pick button.on .s{color:rgba(10,7,16,.62)}

/* toggle switch (grapefruit) */
.rx-toggle{display:flex;align-items:center;gap:14px;margin:0 2px 22px;font:16px var(--f-mono);color:var(--ink-soft)}
.rx-switch{width:60px;height:32px;border-radius:999px;background:var(--raise);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .2s,border-color .2s;flex:none}
.rx-switch.on{background:var(--cyan);border-color:var(--cyan)}
.rx-switch b{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink-soft);transition:left .2s,background .2s}
.rx-switch.on b{left:31px;background:var(--void)}

/* clock (coffee) */
.rx-clock-row{display:flex;align-items:center;gap:22px;margin:6px 2px 22px;flex-wrap:wrap}
.rx-clock{width:118px;height:118px;flex:none;cursor:grab;touch-action:none}
.rx-clock:active{cursor:grabbing}
.rx-clock-read .t{font:700 30px var(--f-mono);color:var(--pink-hot);line-height:1.1}
.rx-clock-read .h{font:13px/1.5 var(--f-mono);color:var(--ink-dim);max-width:22ch;margin-top:4px}

/* tolerance layer bars */
.rx-bars{margin:2px 2px 24px}
.rx-lay{display:flex;align-items:center;gap:12px;margin:0 0 11px}
.rx-lay .ln{width:74px;font:600 14px var(--f-mono)}
.rx-lay .lt{flex:1;height:15px;border-radius:999px;background:var(--raise);overflow:hidden;border:1px solid var(--line-soft)}
.rx-lay .lt b{display:block;height:100%;border-radius:999px;transition:width .25s}
.rx-lay .lc{width:180px;font:12px var(--f-mono);color:var(--ink-dim);text-align:right}

/* the narrative readout — pharmacy serif */
/* NOTE: issue.css redefines --ink to near-black; use --paper (piru's cream body
   text) with a light fallback so the readout reads correctly with or without it. */
.rx-readout{font:20px/1.5 var(--f-frag);color:var(--paper,#f2e7ef);margin:6px 2px 0;min-height:100px}
.rx-readout b{color:var(--pink-hot);font-weight:600}
.rx-readout .c{color:var(--cyan)}
.rx-readout .l{color:var(--lilac)}
.rx-readout i{color:var(--ink-soft)}

/* footer nod back to the app */
.rx-foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);font:14px/1.65 var(--f-mono);color:var(--ink-dim)}
.rx-foot b{color:var(--ink-soft);font-weight:500}
.rx-foot a{color:var(--pink-hot);text-decoration:none;font-weight:500}
.rx-foot a:hover{text-decoration:underline}

/* back link */
.myth-back{display:inline-block;margin:6px 0 0;font:12px var(--f-mono);color:var(--ink-dim);text-decoration:none;letter-spacing:.06em}
.myth-back:hover{color:var(--cyan)}

/* gallery (index) */
.myth-grid{display:grid;gap:15px;margin:8px 0 10px}
a.gcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
a.gcard:hover{border-color:var(--pink-hot);transform:translateY(-2px);box-shadow:0 0 40px -18px var(--pink-glow)}
a.gcard .gtag{font:700 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;margin:0 0 9px;color:var(--pink-hot)}
a.gcard.g-cyan .gtag{color:var(--cyan)} a.gcard.g-lilac .gtag{color:var(--lilac)}
a.gcard h2{font:500 23px/1.2 var(--f-display,var(--serif));letter-spacing:-.01em;margin:0 0 7px;color:var(--paper,#f2e7ef)}
a.gcard p{font:15px/1.5 var(--f-frag);color:var(--ink-dim);margin:0}

/* "go deeper → playground" callout under the gallery */
.myths-deeper{text-align:center;margin:28px auto 2px;max-width:62ch;font:16px/1.6 var(--f-frag);color:var(--paper-dim,#ddc9d8)}
.myths-deeper a{color:var(--pink-hot);font-weight:500;border-bottom:1px solid rgba(255,95,166,.42);white-space:nowrap}
.myths-deeper a:hover{border-bottom-color:var(--pink-hot)}

@media(max-width:560px){
  .myth-main{padding:8px 18px 32px}
  .rx-slider label{min-width:104px}
  .rx-lay .lc{display:none}
}