/* Experivio: Experiment Guide (Designer step 7). Uses the app tokens (--pri, --card, --line, ...) so light and dark modes follow. */
.gwrap h2{margin-bottom:4px}
.gwrap h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:clamp(1.02rem,.3vw + .95rem,1.15rem)}
.gwrap h3 .ic{color:var(--pri)}
.gsec{margin-top:clamp(18px,2vw,28px);padding-top:clamp(14px,1.5vw,20px);border-top:1px solid var(--line)}
.small{font-size:.85rem}
.grec{margin:12px 0;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 10%,var(--card)),color-mix(in srgb,var(--pri2) 8%,var(--card)));border:1px solid var(--line)}
.gk{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pri)}
.gtitle{margin:2px 0 6px;font-size:1.1rem;font-weight:750;overflow-wrap:anywhere}
.gdl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:8px 0 0;font-size:.93rem}
.gdl dt{font-weight:700;color:var(--mut)}.gdl dd{margin:0;overflow-wrap:anywhere}
@container main (max-width:460px){.gdl{grid-template-columns:minmax(0,1fr)}.gdl dd{margin-bottom:6px}}
.gneeds{margin:12px 0;padding:14px 16px;border-radius:14px;border:2px solid var(--pri);background:var(--card)}
.gneeds h3{margin-bottom:4px}.gneeds ul{margin:8px 0 0;padding-left:18px;display:grid;gap:10px}
.gneeds li .btn{margin:6px 0 0}
.gstart{margin-top:12px}
.gstatus{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0}
.gq{margin:10px 0;padding:10px 14px;border-radius:12px;background:var(--soft)}.gq ul{margin:4px 0 0}
.ghaz{margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--warn);color:var(--wink);border:2px solid color-mix(in srgb,var(--wink) 40%,transparent)}
.ghaz h3{color:inherit}.ghaz h3 .ic{color:inherit}.ghaz ul{margin:6px 0;padding-left:18px}
.gsup{display:flex;align-items:flex-start;gap:10px;margin-top:10px;font-weight:700;cursor:pointer}
.gsafe{display:flex;align-items:flex-start;gap:6px;color:var(--mut);font-size:.92rem;margin:6px 0}
.gjump{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.gready{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gready li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px 10px;border-radius:10px;background:var(--soft)}
.gready li.no{background:var(--warn);color:var(--wink)}
.lnkbtn2{background:none;border:0;padding:6px 2px;min-height:40px;color:var(--pri);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gready li.no .lnkbtn2{color:inherit}
.gprep{list-style:none;margin:0;padding:0;display:grid;gap:4px}.gprep label{display:flex;align-items:center;gap:10px;min-height:40px;margin:0;font-weight:600}
/* materials */
.gmeter{max-width:28rem;margin-bottom:10px}.gmeter .bar i{transition:width .45s ease}
.gcat{margin-top:12px}.gcat h4{margin:0 0 6px;font-size:1rem}
.gmlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gmat{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.gmat.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.gmtop{display:grid;grid-template-columns:auto minmax(0,1fr) 6.5rem minmax(8rem,10rem);gap:8px;align-items:center}
.gmtop input,.gmtop select{min-height:40px;margin:0}.gmtop input[type=checkbox]{min-height:24px;height:24px;width:24px}
@container main (max-width:620px){.gmtop{grid-template-columns:auto minmax(0,1fr)}.gmtop .gmqty{grid-column:2}.gmtop select{grid-column:2}}
.gmname{font-weight:700}
.gmp{margin:6px 0 0;font-size:.92rem;overflow-wrap:anywhere}
.gmd{margin-top:4px}.gmd summary{font-size:.92rem;min-height:40px}
.gmgrid{display:grid;grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);gap:6px 10px;align-items:center;margin:6px 0}
.gmgrid label{margin:0;font-size:.88rem;color:var(--mut)}.gmgrid input,.gmgrid select{margin:0;min-height:40px}
@container main (max-width:560px){.gmgrid{grid-template-columns:minmax(0,1fr)}.gmgrid label{margin-top:4px}}
.galt{margin-top:8px}
/* diagram */
.gdia{width:100%;max-width:760px;height:auto;display:block;margin:6px 0}
.gdia.big{max-width:none}
.gd-box{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.gd-box.gd-change{stroke:var(--pri);fill:color-mix(in srgb,var(--pri) 10%,var(--card))}
.gd-box.gd-measure{stroke:var(--pri2);fill:color-mix(in srgb,var(--pri2) 10%,var(--card))}
.gd-box.gd-control{stroke:var(--ok);fill:color-mix(in srgb,var(--ok) 8%,var(--card));stroke-dasharray:5 4}
.gd-h{font:700 13px system-ui,sans-serif;fill:var(--ink)}.gd-h.gd-change{fill:var(--pri)}.gd-h.gd-measure{fill:var(--pri2)}.gd-h.gd-control{fill:var(--ok)}
.gd-t{font:12px system-ui,sans-serif;fill:var(--ink)}
.gd-arrow{fill:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#gdiadlg{width:min(60rem,calc(100vw - 24px))}
/* procedure */
.gprog{display:flex;flex-wrap:wrap;gap:6px 16px;font-weight:700;font-size:.92rem;color:var(--mut);margin:4px 0 10px}
.gphase{margin-top:14px}
.gph{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:1.02rem}
.gphk{display:inline-grid;place-content:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:800;font-size:14px;flex:none}
.gsteps{list-style:none;margin:0;padding:0;position:relative}
.gsteps::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line)}
.gstep{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:0 0 12px}
.gnum{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-content:center;background:var(--card);border:2px solid var(--pri);color:var(--pri);font-weight:800;font-size:14px}
.gstep.done .gnum{background:var(--ok);border-color:var(--ok);color:#fff}
.gbody{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--sh)}
.gstep.locked .gbody{background:var(--soft)}
.gbody h4{margin:0 0 4px;font-size:1rem;overflow-wrap:anywhere}
.gbody p{margin:4px 0;overflow-wrap:anywhere}
.gtag{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:99px;background:var(--soft);color:var(--mut);font-size:12px;font-weight:700;vertical-align:1px}
.gmats{display:flex;flex-wrap:wrap;gap:4px}
.gcheck{font-size:.93rem}.gcheck .ic{color:var(--ok);vertical-align:-2px;margin-right:4px}
.glock{display:flex;gap:8px;align-items:flex-start;color:var(--wink);background:var(--warn);padding:8px 10px;border-radius:10px;font-size:.93rem}
.gctl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.gctl .btn{margin:0;min-height:40px;padding:6px 12px;font-size:.9rem}
.gmv{display:inline-flex;gap:4px}.gmv .btn{padding:6px 8px}
.gchk{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px}.gchk label{display:flex;align-items:center;gap:8px;margin:0;min-height:40px;font-size:.92rem;font-weight:600;cursor:pointer}
.gnote{margin-top:2px}.gnote summary{font-size:.9rem;min-height:36px}.gnote textarea{min-height:64px}
.gbody input,.gbody textarea{margin-top:2px}
/* "More detailed" panel: grows open over ~450 ms; the text is in the page immediately */
.gdet{display:grid;grid-template-rows:1fr;margin-top:10px;animation:gopen .45s cubic-bezier(.22,1,.36,1) both}
.gdet>.gdin{min-height:0;overflow:hidden;padding:12px 14px;border-radius:12px;background:var(--soft);border-left:4px solid var(--pri)}
@keyframes gopen{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
.gdsec{margin-bottom:10px}.gdsec h5{margin:0 0 2px;font-size:.95rem;color:var(--pri)}.gdsec p,.gdsec ol,.gdsec ul{margin:2px 0}.gdsec ol,.gdsec ul{padding-left:20px}
.gex{padding:8px 10px;border-radius:10px;background:var(--card)}
.gexrow{margin:8px 0}.gexrow .btn{margin:0;min-height:40px;font-size:.88rem}
.gask{margin:8px 0}.gask label{margin:0 0 4px}.gask .row{flex-wrap:nowrap}.gask input{flex:1;min-width:0;margin:0;min-height:40px}.gask .btn{margin:0}
.gless{margin-top:6px!important}
/* data table + troubleshooting */
.gtform{margin-bottom:8px}
.gtprev{margin:6px 0 10px}.gtab td{height:28px;min-width:64px}.gtab th small{font-weight:500;color:var(--mut)}
.gtr{border:1px solid var(--line);border-radius:12px;padding:2px 12px;margin-bottom:6px;background:var(--card)}.gtr[open]{padding-bottom:10px}
.gfoot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.gdet{animation:none}.gmeter .bar i{transition:none}}
:root[data-motion="off"] .gdet{animation:none}
/* printing the guide: only the clean printable copy is shown */
#gprint{display:none}
@media print{html.printing-guide body>*:not(#gprint){display:none!important}html.printing-guide #gprint{display:block;color:#111;background:#fff;font:12pt/1.45 system-ui,sans-serif}html.printing-guide #gprint table{border-collapse:collapse;width:100%}html.printing-guide #gprint th,html.printing-guide #gprint td{border:1px solid #888;padding:4px 6px;text-align:left;vertical-align:top}}