/* Print Lab: built on the study kit (kit.css) so it reads as part of assembly. Peach case tint, like the downhill machine.
   Page chrome follows the hub (study/index.html): a white top bar, the app header, one white bench card. */
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--as-ink);color:#fff;border-radius:12px;padding:8px 14px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:var(--as-card);border:1px solid var(--as-line);border-radius:22px;padding:12px 14px 12px 18px;box-shadow:var(--as-shadow)}
.top .as-lock{display:inline-flex;align-items:baseline;margin-right:auto;text-decoration:none;border-radius:12px}
.top .as-word{font-size:26px}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{color:var(--as-ink);text-decoration:none;font:600 14px var(--as-font);padding:7px 12px;border-radius:999px}
.top nav a:hover{background:var(--as-mintsoft)}
.top nav a[aria-current="page"]{background:var(--acc-tint)}
h2{margin:0;font:600 clamp(22px,2.6vw,28px)/1.12 var(--as-display);color:var(--as-ink);letter-spacing:-.01em}
h3{margin:0;font:600 18px/1.2 var(--as-display);color:var(--as-ink)}

/* steps as tabs (kit .step pills) */
.pl-steps{flex-wrap:wrap}
.step[aria-selected="true"]{background:var(--acc-tint);border-color:var(--acc-line);color:var(--as-ink)}
.step[aria-selected="true"] .n{background:rgba(255,255,255,.95);color:var(--acc-deep)}

/* the bench: 3D case on the left, the controls rail on the right */
.pl-play{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.pl-main{display:grid;gap:12px;min-width:0}
@media (min-width:1001px){.pl-main{position:sticky;top:12px}}
.pl-case{height:clamp(360px,62vh,600px);min-height:320px}
.pl-host{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.pl-host canvas{display:block;width:100%;height:100%;outline:none;touch-action:none;cursor:grab}
.pl-host canvas:active{cursor:grabbing}
.pl-host canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--as-focus)}
.pl-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;font:600 13px var(--as-font);color:var(--as-muted)}
.pl-fallback{position:absolute;inset:0;overflow:auto;background:#fff;padding:10px}
.pl-views{position:absolute;right:14px;top:14px;display:flex;gap:4px;background:rgba(255,255,255,.88);border-radius:999px;padding:4px;box-shadow:0 2px 0 rgba(27,36,82,.08);border:1px solid var(--as-line)}
.pl-views button{appearance:none;border:0;background:transparent;color:var(--as-ink);font:600 12.5px var(--as-font);border-radius:999px;padding:6px 11px;cursor:pointer}
.pl-views button:hover{background:var(--acc-soft)}
.pl-views button[aria-pressed="true"]{background:var(--as-ink);color:#fff}
.pl-hint{position:absolute;left:14px;bottom:12px;margin:0;font:600 10.5px var(--as-font);letter-spacing:.05em;text-transform:uppercase;color:var(--as-muted);background:rgba(255,255,255,.85);padding:4px 10px;border-radius:999px;pointer-events:none;transition:opacity .6s}
.pl-case.touched .pl-hint{opacity:0}
.pl-status{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font:500 13px var(--as-font);color:var(--as-muted)}
.pl-chips{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.pl-chips .chip b{font-weight:600}
.pl-fine{margin:0;font-size:12.5px;color:var(--as-muted);max-width:76ch}

/* controls rail */
.pl-rail{display:grid;gap:14px;background:var(--as-soft);border-radius:22px;padding:16px;min-width:0}
.pl-field{display:grid;gap:6px;min-width:0;border:0;margin:0;padding:0}
.pl-field:not(.pl-seg)>label:not(.pl-custom),.pl-lab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:600 12px var(--as-font);letter-spacing:.06em;text-transform:uppercase;color:var(--as-muted);padding:0}
.pl-field output{font:600 15px var(--as-display);letter-spacing:0;text-transform:none;color:var(--as-ink);font-variant-numeric:tabular-nums}
.pl-field small,.pl-switch small,.pl-seg small{font-size:12px;color:var(--as-muted);line-height:1.35}
.pl-field input[type=text],.pl-field input:not([type]),#modelName{font:600 16px var(--as-font);color:var(--as-ink);background:var(--as-card);border:1.5px solid var(--as-line2);border-radius:12px;padding:8px 12px;width:100%;min-width:0}
.pl-range{background:var(--as-card);border-radius:16px;padding:10px 12px;box-shadow:inset 0 0 0 1px var(--as-line)}
.pl-range input[type=range]{width:100%;margin:0}
.pl-swatches{display:contents}
.pl-sw{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--as-line);background:var(--as-card);color:var(--as-ink);border-radius:999px;padding:4px 10px 4px 4px;font:600 12.5px var(--as-font);cursor:pointer}
.pl-sw i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(34,42,85,.2)}
.pl-sw:hover{border-color:var(--acc-line)}
.pl-sw[aria-pressed="true"]{border-color:var(--as-ink);box-shadow:inset 0 0 0 1px var(--as-ink)}
.pl-colours{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pl-custom{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed var(--as-line2);background:var(--as-card);border-radius:999px;padding:3px 10px 3px 4px;font:600 12.5px var(--as-font);color:var(--as-text);cursor:pointer;width:max-content}
.pl-custom input{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.pl-custom input::-webkit-color-swatch-wrapper{padding:0}.pl-custom input::-webkit-color-swatch{border:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(34,42,85,.2)}.pl-custom input::-moz-color-swatch{border:0;border-radius:50%}
.pl-custom:focus-within{outline:3px solid var(--as-focus);outline-offset:2px}
.pl-seg{grid-template-columns:1fr 1fr}
.pl-seg legend{grid-column:1/-1;margin-bottom:6px}
.pl-seg label{position:relative;cursor:pointer;display:block}
.pl-seg input{position:absolute;opacity:0;width:1px;height:1px}
.pl-seg span{display:grid;gap:1px;text-transform:none;letter-spacing:0;border:1.5px solid var(--as-line);background:var(--as-card);border-radius:14px;padding:8px 10px;font:600 14px var(--as-font);color:var(--as-ink)}
.pl-seg input:checked+span{border-color:var(--as-ink);box-shadow:inset 0 0 0 1px var(--as-ink);background:var(--acc-soft)}
.pl-seg input:focus-visible+span{outline:3px solid var(--as-focus);outline-offset:2px}
.pl-switch{display:flex;gap:10px;align-items:flex-start;font:600 14px var(--as-font);color:var(--as-ink);cursor:pointer;background:var(--as-card);border-radius:16px;padding:10px 12px;box-shadow:inset 0 0 0 1px var(--as-line)}
.pl-switch input{width:20px;height:20px;accent-color:var(--as-ink);margin:1px 0 0;flex:none}
.pl-switch span{display:grid;gap:1px}
#bed{width:100%}
#resetModel{justify-self:start}

/* drawing */
.pl-drawbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.pl-drawbar p{margin:0;max-width:62ch;color:var(--as-text)}
.pl-acts{display:flex;flex-wrap:wrap;gap:8px}
.pl-sheetwrap{overflow-x:auto;border-radius:20px;background:var(--case-soft,var(--as-soft));padding:12px;box-shadow:inset 0 0 0 1px var(--as-line)}
.pl-sheet{min-width:620px;background:#fff;border-radius:10px;box-shadow:0 10px 26px -18px rgba(27,36,82,.45)}
.pl-sheet svg{display:block;width:100%;height:auto}

/* print files and pre-flight */
.pl-make{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.pl-files,.pl-check{display:grid;gap:10px;min-width:0}
.pl-file{appearance:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;text-align:left;border:1.5px solid var(--as-line);background:var(--as-card);border-radius:18px;padding:12px 14px;cursor:pointer;color:var(--as-text);font:500 13.5px/1.35 var(--as-font);transition:border-color .2s ease,background .2s ease,transform .12s ease}
.pl-file b{grid-row:1/3;display:grid;place-items:center;min-width:76px;height:44px;border-radius:12px;background:var(--as-ink);color:#fff;font:600 15px var(--as-display)}
.pl-file:nth-of-type(n+2) b{background:var(--acc-tint);color:var(--as-ink)}
.pl-file:hover{border-color:var(--acc-line);background:var(--acc-soft)}
.pl-file:active{transform:scale(.98)}
.pl-start dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:6px 0 8px}
.pl-start dl div{background:var(--as-soft);border-radius:12px;padding:8px 10px}
.pl-start dt{font:600 11px var(--as-font);letter-spacing:.06em;text-transform:uppercase;color:var(--as-muted)}
.pl-start dd{margin:2px 0 0;font:600 14px var(--as-font);color:var(--as-ink)}
.pl-start p{font-size:13px}
.pl-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pl-checks li{display:grid;gap:3px;border-radius:16px;padding:10px 14px;background:var(--as-soft)}
.pl-checks li.ok{background:var(--as-mintsoft)}
.pl-checks li.look{background:var(--as-sunsoft)}
.pl-checks b{display:flex;align-items:center;gap:8px;font:600 14.5px var(--as-font);color:var(--as-ink)}
.pl-checks li>span{font-size:13.5px;color:var(--as-text);padding-left:20px}
.pl-dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--as-mint)}
.pl-checks li.look .pl-dot{background:#D9A646}

/* learning section */
.pl-learn{display:grid;gap:14px;background:var(--as-card);border:1px solid var(--as-line);border-radius:32px;padding:clamp(16px,3vw,30px);box-shadow:var(--as-shadow)}
.pl-learn .lede{margin:-4px 0 0;max-width:70ch}
.pl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pl-card{position:relative;border-radius:22px;padding:16px 16px 18px;display:grid;gap:6px;align-content:start}
.pl-card p{margin:0;font-size:14px;color:var(--as-ink)}
.pl-card.mint{background:#E5F5EE}.pl-card.sky{background:#E6F1FB}.pl-card.lavender{background:#EFE8FA}
.pl-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;font:600 15px var(--as-display);color:var(--as-ink);box-shadow:inset 0 0 0 1.5px rgba(34,42,85,.16)}
.pl-kupu{margin:0;font-size:13px;color:var(--as-muted)}
.pl-kupu a,.pl-nzc a,footer a{color:var(--as-ink);text-decoration-color:var(--as-mint);text-decoration-thickness:2px;text-underline-offset:3px}
.pl-nzc p{font-size:14px}

@media (max-width:1000px){
 .pl-play{grid-template-columns:minmax(0,1fr)}
 .pl-case{height:clamp(300px,62vw,480px)}
 .pl-rail{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:start}
}
@media (max-width:820px){
 .pl-make{grid-template-columns:1fr}
 .pl-cards{grid-template-columns:1fr}
 .pl-chips{grid-template-columns:1fr 1fr}
 .pl-chips .chip:first-child{grid-column:1/-1}
}
@media (max-width:620px){
 .top nav{width:100%}.top nav a{padding:6px 10px}
 .pl-case{height:300px;min-height:280px}
 .pl-views{right:10px;top:10px}
 .pl-views button{padding:6px 9px}
 .pl-hint{display:none}
 .pl-rail{padding:12px}
 .pl-sheet{min-width:560px}
}
@media (prefers-reduced-motion:reduce){.pl-file,.pl-hint{transition:none}}

/* printing the drawing: only the sheet, at true scale on A4 landscape (everything else is removed from the flow) */
@page{size:A4 landscape;margin:0}
@media print{
 html,body{background:#fff!important;margin:0!important;padding:0!important}
 body>*:not(.wrap){display:none!important}
 .wrap{display:block;max-width:none;margin:0}
 .wrap>*:not(#workbench){display:none!important}
 #workbench{display:block;border:0;border-radius:0;box-shadow:none;overflow:visible}
 #workbench>*:not(#view-drawing){display:none!important}
 #view-drawing{display:block!important;padding:0}
 #view-drawing>*:not(.pl-sheetwrap){display:none!important}
 .pl-sheetwrap{padding:0;background:none;box-shadow:none;border-radius:0;overflow:hidden;width:297mm;height:210mm}
 #drawingSheet{min-width:0;width:297mm;height:210mm;box-shadow:none;border-radius:0}
 #drawingSheet svg{width:297mm;height:210mm}
}