/* End user computing page: figure text and shapes, the two tools, and the related work pill */

/* ---------- figure text and shapes ---------- */
.motion-svg .eu-lyt{font-size:12.5px;font-weight:600;fill:var(--ink);text-anchor:middle}
.eu-ly{stroke-width:1.5}
.eu-ly.o{fill:#FFF7ED;stroke:#FDBA74}
.eu-ly.p{fill:#F5F3FF;stroke:#C4B5FD}
.eu-ly.c{fill:var(--cyan-tint);stroke:var(--cyan)}
.eu-ly.s{fill:var(--surface-2);stroke:var(--line-strong)}
.eu-msg .ln{stroke:var(--subtle);stroke-width:1.75}
.eu-ah{fill:var(--subtle)}
.motion-svg .eu-rowt{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:start}
.motion-svg .eu-rowt.mut{font-weight:500;fill:var(--subtle)}
.eu-stop{fill:var(--line-strong)}
.eu-knob{stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 1px 2px rgba(15,23,42,.25))}
.eu-k0{fill:var(--blue)}
.eu-k1{fill:var(--purple)}
.eu-k2{fill:var(--cyan-strong)}
.motion-svg .eu-side{font-family:var(--font-mono);font-size:12px;fill:var(--muted);text-anchor:start}
.eu-bd{fill:#CBD5E1}
.eu-bl{fill:var(--orange)}
.eu-bg{fill:var(--cyan)}
.motion-svg .eu-ax{font-family:var(--font-mono);font-size:11px;fill:var(--subtle);text-anchor:start}
.motion-svg .eu-ax.mid{text-anchor:middle}
.eu-barbg{fill:#F8FAFC;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:5 5}
.eu-seg{stroke:#fff;stroke-width:1.5}
.eu-seg.s{fill:#94A3B8}
.eu-seg.t{fill:var(--teal)}
.eu-seg.o{fill:var(--orange)}
.eu-seg.r{fill:#E11D48}
.eu-seg.n{fill:var(--navy)}
.motion-svg .eu-segt{font-size:12px;font-weight:700;fill:#fff;text-anchor:middle}
.motion-svg .eu-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .eu-mono.o{fill:var(--orange-strong)}

/* hero: the setup bar fills while the animation runs */
.hero-art .eu-hbar{fill:rgba(255,255,255,.12)}
.hero-art .eu-hfill{fill:var(--orange);transform-box:fill-box;transform-origin:left center;transform:scaleX(.62)}
.hero-art.is-running .eu-hfill{animation:eu-fill 4.6s ease-in-out infinite}
@keyframes eu-fill{0%{transform:scaleX(.05)}80%,100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hero-art .eu-hfill{animation:none!important}}

/* ---------- page furniture ---------- */
.eu-small{font-size:.9rem;color:var(--muted);margin:12px 0 0;max-width:80ch}
.eu-box{padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.eu-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.eu-two > *{min-width:0}
.table-wrap .eu-narrow{min-width:0}
.cfg{margin:12px 0 0;padding:16px 18px;background:var(--navy);color:#E2E8F0;border-radius:var(--radius);overflow:auto;font-size:.82rem;line-height:1.65}
.cfg code{font-size:inherit;background:none;color:inherit;padding:0}
main kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--surface);font-size:.82em;color:var(--ink)}
.tag-rel{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--orange-border);border-radius:999px;font:600 .68rem/1.6 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-strong);vertical-align:middle}

/* ---------- tools ---------- */
.eu-tool{margin-top:30px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.eu-tool h3{font-size:var(--fs-h4);margin:0 0 4px}
.eu-tool .eu-small{margin-top:0}
.eu-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:16px;align-items:start}
.eu-tool-grid > *{min-width:0}
.eu-in{display:grid;gap:12px;align-content:start;margin:0}
.eu-q{margin:0;padding:10px 12px 12px;border:1px solid var(--line);border-radius:12px;display:grid;gap:6px}
.eu-q legend{padding:0 6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.eu-q label{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;color:var(--text);cursor:pointer}
.eu-q input{margin-top:3px;accent-color:var(--orange)}
.eu-row{display:grid;grid-template-columns:150px minmax(0,1fr) 86px;gap:10px;align-items:center;font-size:.88rem}
.eu-row label{font-weight:600;color:var(--ink)}
.eu-row input[type=range]{width:100%;accent-color:var(--orange)}
.eu-row output{font-family:var(--font-mono);font-size:.84rem;color:var(--teal-strong);text-align:right}
.eu-out{display:grid;gap:14px;align-content:start}
.eu-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:.92rem}
.eu-dl dt{color:var(--muted);font-weight:600}
.eu-dl dd{margin:0;color:var(--ink)}
.eu-box .eu-dl dd{color:var(--text)}
#eu-cost .eu-dl dd{font-family:var(--font-mono);font-weight:600;font-size:.9rem}
.eu-verdict{margin:0;padding:12px 14px;border-radius:12px;font-size:.92rem;border:1px solid var(--line)}
.eu-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.eu-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.eu-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.no-js .eu-in input{pointer-events:none}

@media (max-width:860px){
  .eu-tool-grid,.eu-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .eu-tool{padding:16px 14px}
  .eu-row{grid-template-columns:minmax(0,1fr) 80px;gap:4px 10px}
  .eu-row label{grid-column:1 / -1}
  .eu-dl{grid-template-columns:minmax(0,1fr)}
  .eu-dl dt{margin-top:4px}
}