/* ColorHub Gym: stations, previews, adjust drills, afterimage, results.
   Same "Museum editorial" rules as app.css: no card boxes, hairlines, serif names, mono captions.
   Size rule: every drill swatch is at least 25vw wide (small patches look less colorful). */

/* ---------- level ladder: 20 hairline steps ---------- */
.ladder{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;height:3px}
.ladder i{background:var(--rule)}
.ladder i.on{background:var(--ink)}
.ladder.blank{background:none}
.ladder.big{height:5px;gap:3px;margin:16px 0 22px}

/* ---------- station previews (art, not drills) ---------- */
.sa{position:relative;display:grid;width:100%;aspect-ratio:4/3;gap:2px;overflow:hidden;border-radius:2px}
.sa i{background:var(--c);min-width:0}
.sa-grid{grid-template-columns:repeat(3,1fr)}
.sa-grid i.odd{animation:gyOdd 2.4s ease-in-out infinite}
@keyframes gyOdd{50%{transform:scale(.86)}}
.sa-pair{grid-template-columns:1fr 1fr;gap:0}
.sa-strip{grid-template-columns:repeat(6,1fr);gap:1px}
.sa-strip i.odd{animation:gySwap 2.6s var(--ease) infinite}
.sa-strip i.l{--dir:1}.sa-strip i.r{--dir:-1}
@keyframes gySwap{0%,35%{transform:none}55%,85%{transform:translateX(calc(var(--dir) * 100%))}100%{transform:none}}
.sa-ground{display:grid;place-items:center;background:var(--g)}
.sa-ground b{height:56%;aspect-ratio:1;background:var(--c)}
.sa-ground b.disc{border-radius:50%;height:66%}
.sa-two{grid-template-rows:1fr 1fr;gap:0}
.sa-two>span{display:grid;place-items:center;background:var(--g)}
.sa-two b{height:58%;aspect-ratio:1;background:var(--c)}
.sa-mem{grid-template-columns:repeat(5,1fr);grid-template-rows:2fr 1fr;gap:2px}
.sa-mem i.big{grid-column:1/-1}
.sa-after{place-items:center;background:#77746D}
.sa-after b{height:58%;aspect-ratio:1;border-radius:50%;background:var(--c);grid-area:1/1}
.sa-after svg{grid-area:1/1;height:76%;aspect-ratio:1;overflow:visible;transform:rotate(-90deg)}
.sa-after circle{fill:none;stroke:#F3F1EC;stroke-width:2.5;stroke-dasharray:100;stroke-dashoffset:30;animation:gyRing 6s linear infinite}
@keyframes gyRing{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---------- gym home: suggested station ---------- */
.sg-card{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left;margin-top:34px;padding:16px 0 0;border-top:1px solid var(--rule-2)}
.sg-top{display:flex;justify-content:space-between;gap:12px}
.sg-top .eyebrow:first-child{color:var(--ink)}
.sg-card .sa{aspect-ratio:2/1;margin-top:2px}
.sg-name{font:400 44px/.95 var(--serif);letter-spacing:-.03em;margin-top:6px}
.sg-what{color:var(--soft);font-size:14.5px}
.sg-lv{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sg-lv>span:last-child{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--faint)}
.sg-go{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:60px;margin-top:4px;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.sg-go b{font:400 28px/1 var(--serif);font-weight:400}
.sg-go span{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft)}
.sg-go svg{width:20px;height:20px}
.sg-card:active .sg-go{opacity:.6}

/* ---------- gym home: station tiles ---------- */
.gs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;margin-top:18px}
.gs-tile{display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left;transition:opacity .25s,transform .4s var(--spring)}
.gs-tile:active{transform:scale(.97);opacity:.8}
.gs-name{font:400 23px/1.02 var(--serif);letter-spacing:-.01em;margin-top:4px;min-height:2.04em}
.gs-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:20px}
.gs-meta>span{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink)}
.gs-meta .spark{width:56px;height:18px;color:var(--soft)}
.gs-best{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--faint)}

/* ---------- drills ---------- */
.dr-why{color:var(--faint);font-size:13px;line-height:1.4;margin-top:10px;max-width:46ch;text-wrap:pretty}
.station .grid{width:min(100%,52dvh)}
.station .grid .tile{min-width:25vw}
/* color memory */
.mem{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.mem-chip{width:min(72%,42dvh);aspect-ratio:1;background:var(--c);border-radius:3px;transition:opacity .25s}
.mem-chip.gone{opacity:0}
.mem-bar{display:block;width:min(72%,42dvh);height:2px;background:var(--ink);transform-origin:left}
.mem-bar.go{transition:transform var(--t,2s) linear;transform:scaleX(0)}
.mem-bar.gone{opacity:0}
.mem-opts{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}
.mem-opts .tile{grid-column:span 2;min-width:25vw}
.mem-opts.n5 .tile:nth-child(4){grid-column:2/4}.mem-opts.n5 .tile:nth-child(5){grid-column:4/6}
/* 3 in a row; 7 and 9 as a 3x3 grid (the 7th centered) */
.mem-opts.n3,.mem-opts.n7,.mem-opts.n9{grid-template-columns:repeat(3,1fr)}
.mem-opts.n3 .tile,.mem-opts.n7 .tile,.mem-opts.n9 .tile{grid-column:auto;aspect-ratio:1}
.mem-opts.n7 .tile:nth-child(7){grid-column:2}
.mem-up{color:var(--ink)}
.drill-order .sorter{max-height:560px}

/* adjust stations: a colored field, a slider, a lock button */
.gy-col{display:flex;flex-direction:column;gap:14px;width:100%;height:100%}
.gy-field{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:var(--g);border-radius:3px;transition:background .45s}
.gy-patch{display:grid;grid-template-columns:1fr 1fr;width:42%;min-width:25vw;aspect-ratio:1}
.gy-patch i{background:var(--c);transition:background .45s}
.gy-disc{width:50%;min-width:25vw;aspect-ratio:1;border-radius:50%;background:var(--c);transition:background .45s}
.gy-two{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px}
.gy-two .gy-field{flex:1}
.gy-sq{height:64%;min-height:25vw;aspect-ratio:1;background:var(--c)}
.gy-sq.gy-patch{width:auto;background:none}
.gy-tags{position:absolute;left:12px;right:12px;bottom:10px;display:none;justify-content:space-between;font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none}
.gy-tags.one{justify-content:flex-start}
.gy-tags[data-ink="dark"]{color:rgba(20,19,17,.72)}.gy-tags[data-ink="light"]{color:rgba(255,255,255,.82)}
.rev .gy-tags{display:flex}
.gy-sl{display:flex;flex-direction:column;gap:6px;flex:none}
.gy-sl span{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft)}
.gy-sl input{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;background:transparent;touch-action:none}
.gy-sl input::-webkit-slider-runnable-track{height:2px;background:var(--rule-2)}
.gy-sl input::-moz-range-track{height:2px;background:var(--rule-2)}
.gy-sl input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-14px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.gy-sl input::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--ink);border:0}
.gy-sl input:disabled{opacity:.35}
.gy-rev{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.gy-rev .note{font-size:13.5px;line-height:1.4;text-wrap:pretty}
.drill-neutral .drill-foot,.drill-vanish .drill-foot,.drill-match .drill-foot{min-height:62px}

/* afterimage */
.af-timer i{animation:none}
.af-timer.go i{animation:drain 20s linear both}
.af-field{position:relative;width:100%;height:100%;max-height:520px;display:grid;place-items:center;background:#77746D;border-radius:3px;transition:background .15s}
.af-dot{position:relative;width:min(58%,40dvh);min-width:25vw;aspect-ratio:1;border-radius:50%;background:var(--c)}
.af-dot svg{position:absolute;inset:-12%;width:124%;height:124%;overflow:visible;transform:rotate(-90deg)}
.af-dot circle{fill:none;stroke:#F3F1EC;stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.af-field.go circle{transition:stroke-dashoffset 20s linear;stroke-dashoffset:0;opacity:1}
.af-x{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;pointer-events:none}
.af-x::before,.af-x::after{content:"";position:absolute;background:#141311}
.af-x::before{left:7px;top:0;width:2px;height:16px}.af-x::after{top:7px;left:0;height:2px;width:16px}
.af-field.white{background:#F6F5F1}
.af-field.white .af-dot{visibility:hidden}
.af-opts{position:absolute;inset:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;animation:fade .5s var(--ease) both}
.af-opts .tile{aspect-ratio:auto;min-width:25vw;box-shadow:inset 0 0 0 1px rgba(20,19,17,.08)}
.af-end{width:100%}
.drill-after .drill-foot{min-height:62px}

/* ---------- results ---------- */
.gr-lv{display:flex;align-items:baseline;gap:12px;font:400 76px/.9 var(--serif);letter-spacing:-.03em}
.gr-lv span{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft)}
.gr-lv s{color:var(--faint);text-decoration:none;font-size:48px}
.gr-lv i{font-style:normal;color:var(--faint);font-size:32px}
.gym-res .lede{margin-bottom:6px}
.gym-res .gr-fine{margin:0 0 22px}
.af-field.asked .af-x{display:none}
/* the score, and the plain-words line under it (DESIGN-SYSTEM §3/§4: serif carries the hierarchy) */
.gy-score{display:flex;align-items:baseline;gap:10px;margin:4px 0 14px}
.gy-score b{font:400 44px/1 var(--serif);letter-spacing:-.02em}
.gy-score span{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft)}
.gym-res .gy-weak+.fine{margin-top:-6px;margin-bottom:20px}
/* every miss, side by side: a short scrolling strip, swatches judged on the neutral booth grey
   (DESIGN-SYSTEM §3 "Surround"), feedback as a 3px ring outside the swatch, never over it */
.gy-miss-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:14px calc(-1 * var(--g)) 4px;padding:2px var(--g) 8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.gy-miss{flex:0 0 150px;scroll-snap-align:start;background:#5F5F5F;border-radius:3px;padding:14px 12px 12px}
.gy-miss-pair{display:flex;gap:10px}
.gy-miss-sw{position:relative;flex:1;min-width:0;aspect-ratio:1;border-radius:4px;background:var(--c)}
.gy-miss-sw.bad{outline:3px solid var(--bad);outline-offset:3px}
.gy-miss-sw.good{outline:3px solid var(--good);outline-offset:3px}
.gy-miss-sw b{position:absolute;left:-3px;right:-3px;bottom:-19px;text-align:center;font:500 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.gy-miss-meta{display:flex;flex-direction:column;gap:3px;margin-top:24px}
.gy-miss-meta b{font:500 15px/1 var(--mono);color:#fff}
.gy-miss-meta small{font-size:13px;opacity:.75}
.gy-miss-meta span{font-size:13px;color:rgba(255,255,255,.72);text-wrap:pretty}
/* your trend: the compact session chart, reused from the "Your eye" page */
.eye-chart{display:block;width:100%}
.eye-ends{display:flex;justify-content:space-between;margin-top:4px;font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--soft)}
.eye-ends b{color:var(--ink);font-weight:500}

/* ======================================================================
   Training engine (js/gym-engine.js): shelves, your-eye profile, check-in, confidence, tips, squint
   ====================================================================== */
.gs-meta em{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--faint);font-style:normal}
.gs-best{line-height:1.45}
.gs-tile.locked .sa{filter:grayscale(1) brightness(.7);opacity:.32}
.gs-tile.locked .gs-name{color:var(--soft)}
.gs-tile.locked .gs-meta>span{color:var(--faint)}
/* applied previews */
.sa-sq{display:block;background:#1b1a17}
.sa-sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sa-sq b{position:absolute;width:13px;height:13px;margin:-6.5px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.sa-mix{grid-template-columns:repeat(3,1fr);gap:2px}
.sa-mix>span{display:grid;min-width:0}
.mx-pair,.mx-two{grid-template-rows:1fr 1fr}
.mx-pair i,.mx-two i{background:var(--c)}
.mx-ground{place-items:center;background:var(--g)}
.mx-ground b{width:46%;aspect-ratio:1;background:var(--c)}
.mx-ground b.disc{border-radius:50%;width:56%}
.mx-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px}
.mx-grid i{background:var(--c)}
/* check-in card: the three stations side by side */
.ci-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:2px}
.sg-card .ci-strip .sa{aspect-ratio:1;margin:0}
/* your eye, compact */
.ey-prof{display:block;width:100%;text-align:left}
.ey-prof .sec-head{display:flex}
.ey-prof .sec-head svg{width:12px;height:12px;vertical-align:-2px}
.ey-rows{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.ey-row{display:grid;grid-template-columns:minmax(0,1.25fr) 2fr 22px;align-items:center;gap:10px}
.ey-row span{font:500 13px/1.2 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ey-row i{height:5px;background:linear-gradient(var(--ink),var(--ink)) 0 0/var(--w) 100% no-repeat,var(--rule)}
.ey-row b{font:500 13px/1 var(--mono);text-align:right}
.ey-line{display:block;font:400 19px/1.2 var(--serif);margin-top:14px;text-wrap:pretty}
.ey-line+.ey-line{margin-top:6px}
.ey-empty{display:block;color:var(--soft);font-size:14px;margin-top:12px}
.ey-foot{display:block;font:500 13px/1.4 var(--mono);letter-spacing:0;text-transform:none;color:var(--faint);margin-top:12px}
.ey-prof:active{opacity:.7}
/* drill chrome: time limit bar, confidence, intro */
.gy-clock{height:2px;margin-top:10px;background:var(--rule);visibility:hidden}
.gy-clock i{display:block;height:100%;background:var(--ink);transform-origin:left}
.gy-clock.on{visibility:visible}
.gy-clock.on i{animation:drain var(--t,5s) linear both}
.tile.picked,.half.picked{outline:2px solid var(--ink);outline-offset:3px}
.gy-conf{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:10px;width:100%;animation:fade .25s var(--ease) both}
.gy-conf span{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft)}
.gy-conf button{min-height:52px;border:1px solid var(--rule-2);border-radius:2px;font:400 24px/1 var(--serif);color:var(--ink)}
.gy-conf button:active{background:rgba(236,232,223,.08)}
.gy-skip{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft);padding:12px 0 12px 12px}
.gy-intro .dr-why.show{color:var(--ink);font-size:15px;animation:fade .4s var(--ease) both}
.gy-ipanel{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left}
.gy-ipanel .note{font-size:13.5px;line-height:1.4}
.gy-ipanel .gy-aim{color:var(--ink);font:400 19px/1.2 var(--serif)}
.drill.gy-intro .drill-foot{min-height:150px}
/* results: unlock news, weak zone, one tip */
.gy-news{font-size:14px;color:var(--soft);margin:-8px 0 14px}
.gy-news b{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:#E8C66B;margin-right:6px}
.gy-weak{font:400 21px/1.15 var(--serif);margin:0 0 14px}
.gy-tip{border-left:2px solid var(--ink);padding:2px 0 2px 14px;margin:0 0 6px}
.gy-fixwhat{font:500 13px/1.4 var(--mono)!important;letter-spacing:0;text-transform:none;color:var(--soft);margin-top:10px!important}
.gy-tip p:nth-child(2){font-size:15px;line-height:1.45;margin-top:6px;text-wrap:pretty}
.gym-res .btn small{margin-left:auto;margin-right:2px}
/* adjust stations: the dials resize the square and the disc */
.gy-patch{width:var(--sz,42%)}
.gy-disc{width:var(--sz,50%)}
/* squint: a painting with marked spots */
.sq-box{width:100%;height:100%;display:grid;place-items:center;min-height:0}
.sq-img{position:relative;width:100%;height:100%}
.sq-img img{display:block;width:100%;height:100%;border-radius:2px;user-select:none;-webkit-user-select:none;transition:filter .35s var(--ease)}
.sq-img.blur img{filter:blur(6px)}
.sq-dot{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(0,0,0,.6)}
.sq-dot::before{content:"";position:absolute;inset:-12px}
.sq-dot b{position:absolute;left:15px;top:-17px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:none;place-items:center;background:#F3F1EC;color:#141311;font:600 13px/1 var(--mono)}
.sq-dot.on b,.sq-dot.rev b{display:grid}
.sq-dot.rev.good{border-color:var(--good)}.sq-dot.rev.good b{background:var(--good)}
.sq-dot.rev.bad{border-color:var(--bad)}.sq-dot.rev.bad b{background:var(--bad)}
.gy-hold{width:100%;min-height:52px;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft);touch-action:none;user-select:none;-webkit-user-select:none}
.gy-hold:active{color:var(--ink)}
.drill-squint .drill-foot{min-height:70px}
/* progress page: check-in charts and calibration */
.eye-cap{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--faint);margin-top:16px}
.ci-wrap{position:relative;margin-top:6px}
.ci-chart{height:96px;margin-top:0}
.ci-grid{stroke:var(--rule);stroke-width:1}
.ci-dots{position:absolute;inset:0;pointer-events:none}
.ci-dots span{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--ink)}
.ci-dots b{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);font:500 13px/1 var(--mono);color:var(--ink)}
.eye-chart.compact{height:64px}
.eye-sec .sec-head{gap:12px}
.eye-sec .sec-head span{text-align:right;white-space:nowrap}
.eye-cal{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.eye-cal div{display:grid;grid-template-columns:70px 1fr 38px;align-items:center;gap:10px;font-size:13px;color:var(--soft)}
.eye-cal i{height:10px;background:linear-gradient(var(--ink),var(--ink)) 0 0/var(--w) 100% no-repeat,var(--rule)}
.eye-cal b{text-align:right;font-size:13px;color:var(--ink);font-weight:500}

/* lighter/darker reveal: labels on the swatches, the pair in grey, one tip */
.pairq .half{position:relative}
.pq-lab{position:absolute;left:12px;bottom:12px;display:flex;align-items:baseline;gap:8px;padding:7px 10px 6px;background:#F3F0E8;color:#141311;border-radius:2px;text-align:left;animation:fade .3s both;z-index:2;opacity:1}
.pq-lab b{font:400 22px/1 var(--serif)}
.pq-lab em{font:500 13px/1 var(--mono);letter-spacing:.1em;font-style:normal;opacity:.8}
.pq-rev{display:flex;flex-direction:column;gap:10px}
.pq-grey{display:flex;align-items:center;gap:8px}
.pq-grey span{font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--soft);margin-right:4px}
.pq-grey i{flex:1;height:34px;background:var(--c);border-radius:2px;position:relative}
.pq-grey em{position:absolute;left:8px;top:50%;transform:translateY(-50%);font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#F3F0E8;mix-blend-mode:difference}