/* The workshop: a run of levels above, a 3D bench with a notebook beside it.
   The tokens, type and plain controls come from record.css; this file only
   lays out the workshop. Same register as the diagrams: blueprint line work
   on paper, no glow. Ticks and correct answers use verdigris, the site's
   status colour; everything that asks to be touched uses copper. */

.ws-head{ max-width:var(--measure) }
.ws-about{ max-width:var(--measure); margin:.75rem 0 0; font-family:var(--mono); font-size:.8125rem; line-height:1.5; color:var(--ink-soft) }

/* ------------------------------------------------------------- the map */

.ws-map{
  display:flex; gap:.5rem; overflow-x:auto; margin:1.25rem 0 1rem; padding-bottom:.25rem;
  scrollbar-width:thin;
}
.ws-tile{
  flex:0 0 auto; min-width:9.5rem; text-align:left; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; line-height:1.35; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--rule);
  padding:.5rem .7rem .55rem;
}
.ws-tile b{ display:block; font-weight:600; letter-spacing:.06em; color:var(--copper) }
.ws-tile span{ display:block; font-family:var(--serif); font-size:.95rem }
.ws-tile i{ display:block; font-style:normal; color:var(--copper); letter-spacing:.1em; min-height:1em }
.ws-tile:hover:not(:disabled){ border-color:var(--copper) }
.ws-tile[aria-current]{ border-color:var(--ink); border-top-color:var(--copper) }
.ws-tile:disabled{ cursor:default; color:var(--ink-soft); border-style:dashed; opacity:.75 }
.ws-tile:disabled b{ color:var(--ink-soft) }
.ws-tile:focus-visible{ outline:2px solid var(--copper); outline-offset:2px }

/* -------------------------------------------------- bench and notebook */

.ws{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(17rem,1fr);
  margin:0 0 2.5rem; border:1px solid var(--rule);
}
@media (max-width:900px){ .ws{ grid-template-columns:1fr } }

.ws-stage{ position:relative; background:var(--paper); min-width:0 }
.ws-canvas{ position:relative; width:100%; aspect-ratio:4 / 3.1; overflow:hidden; touch-action:none }
.ws-canvas canvas{ display:block; width:100% !important; height:100% !important; outline:none }
@media (max-width:640px){ .ws-canvas{ aspect-ratio:1 / .9 } }

.ws-hint{
  position:absolute; left:.85rem; top:.6rem; margin:0; pointer-events:none;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}

/* labels the 3D scene places over the canvas */
.ws-tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; line-height:1.2;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; pointer-events:none;
}
.ws-tag.a,.ws-tag.b{ font-weight:600; font-size:.78rem; color:var(--paper); padding:.1rem .35rem }
.ws-tag.a{ background:var(--blueprint) }
.ws-tag.b{ background:var(--copper) }
.ws-tag.pole{ font-weight:600; font-size:.8rem; color:var(--ink) }
.ws-tag.point{ font-size:1.35rem; color:var(--copper); letter-spacing:0 }
.ws-tag.point span{ display:inline-block }
.ws-tag.point.turn span{ font-size:1.6rem; animation:ws-spin 1.8s linear infinite }
@keyframes ws-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .ws-tag.point.turn span{ animation:none } }

.ws-panel{
  background:var(--paper-sunk); border-left:1px solid var(--rule);
  padding:1.1rem 1.2rem 1.3rem; font-family:var(--mono); font-size:.8125rem; color:var(--ink); min-width:0;
}
@media (max-width:900px){ .ws-panel{ border-left:0; border-top:1px solid var(--rule) } }

.ws-level{ margin:0; font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--copper) }
.ws-title{ margin:.15rem 0 .6rem; font-family:var(--serif); font-size:1.45rem; line-height:1.2 }
.ws-say{ margin:0 0 1rem; font-family:var(--serif); font-size:1.0625rem; line-height:1.45; min-height:3em }

.ws-label{
  display:block; margin:0 0 .3rem; font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* the checklist: what is done, what is now, what is still to come */
.ws-steps{ list-style:none; margin:0 0 1.1rem; padding:0; counter-reset:step }
.ws-steps li{
  position:relative; padding:.12rem 0 .12rem 1.6rem; color:var(--ink-soft); font-size:.75rem; line-height:1.4;
}
.ws-steps li::before{
  content:""; position:absolute; left:0; top:.28rem; width:.8rem; height:.8rem;
  border:1px solid var(--rule); background:var(--paper);
}
.ws-steps li.now{ color:var(--ink); font-weight:600 }
.ws-steps li.now::before{ border-color:var(--copper); background:var(--copper) }
.ws-steps li.done{ color:var(--ink) }
.ws-steps li.done::before{ content:"✓"; border-color:var(--verdigris); background:var(--verdigris); color:var(--paper); font-size:.6rem; line-height:.8rem; text-align:center }
.ws-steps li.tick::before{ animation:ws-pop .35s cubic-bezier(.2,.9,.3,1.5) }
@keyframes ws-pop{ from{ transform:scale(2) } to{ transform:scale(1) } }

/* the prediction questions */
.ws-quiz{ margin:0 0 1.1rem; padding:.9rem; background:var(--paper); border:1px solid var(--ink) }
.ws-q{ margin:0 0 .7rem; font-family:var(--serif); font-size:1.02rem; line-height:1.4 }
.ws-option{
  display:block; width:100%; margin:0 0 .4rem; padding:.55rem .7rem; text-align:left; cursor:pointer;
  font-family:var(--serif); font-size:.98rem; line-height:1.35; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule);
}
.ws-option:hover:not(:disabled){ border-color:var(--copper) }
.ws-option:focus-visible{ outline:2px solid var(--copper); outline-offset:2px }
.ws-option.right{ border:2px solid var(--verdigris); font-weight:600 }
.ws-option.right::after{ content:"  ✓ right"; font-family:var(--mono); font-size:.7rem; color:var(--verdigris); letter-spacing:.06em }
.ws-option.wrong{ color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--copper) }
.ws-option:disabled{ cursor:default }
.ws-why{ margin:.5rem 0 0; font-family:var(--serif); font-size:.95rem; line-height:1.45; color:var(--copper) }
.ws-why.right{ color:var(--ink) }

.ws-panel button:not(.ws-option),.ws-done button{
  font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer; padding:.5rem .85rem;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink);
}
.ws-panel button:not(.ws-option):hover,.ws-done button:hover{ background:var(--copper); border-color:var(--copper) }
.ws-panel button:focus-visible,.ws-done button:focus-visible{ outline:2px solid var(--copper); outline-offset:2px }
.ws-done button.ghost{ color:var(--ink); background:transparent }
.ws-done button.ghost:hover{ color:var(--paper) }
.ws-next{ margin-top:.6rem }

/* instruments: a strip under the bench, the chart beside the readings */
.ws-instruments{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:.7rem 1.4rem; align-items:start;
  padding:.85rem 1rem 1rem; border-top:1px solid var(--rule); background:var(--paper-sunk);
  font-family:var(--mono); font-size:.8125rem;
}
.ws-instruments .ws-chart{ grid-row:span 3 }
@media (max-width:520px){ .ws-instruments{ grid-template-columns:1fr } .ws-instruments .ws-chart{ grid-row:auto } }
.ws-chart svg{ display:block; width:100%; height:auto; background:var(--paper); border:1px solid var(--rule) }
.ws-value{ margin:0 0 .25rem }
.ws-bar{ height:.5rem; border:1px solid var(--ink); background:var(--paper) }
.ws-bar span{ display:block; height:100%; width:0; background:var(--ink) }

/* ------------------------------------------------------ stamps and done */

.ws-stamps{ position:absolute; inset:0 0 auto; z-index:2; padding-top:1.4rem; pointer-events:none; display:grid; justify-items:center }
.ws-stamp{
  grid-area:1 / 1; max-width:80%; padding:.55rem 1rem .6rem; text-align:center;
  background:rgba(250,248,244,.92); border:2px solid var(--copper); outline:1px solid var(--copper); outline-offset:3px;
  font-family:var(--mono); color:var(--copper); transform:rotate(-6deg);
  animation:ws-stamp .4s cubic-bezier(.2,.9,.3,1.3) both; transition:opacity .5s, transform .5s;
}
.ws-stamp b{ display:block; font-size:1.15rem; letter-spacing:.18em; text-transform:uppercase }
.ws-stamp span{ display:block; margin-top:.15rem; font-size:.8rem; letter-spacing:.04em }
.ws-stamp.out{ opacity:0; transform:rotate(-6deg) translateY(-1.5rem) }
@keyframes ws-stamp{ from{ opacity:0; transform:rotate(-6deg) scale(2.2) } to{ opacity:1; transform:rotate(-6deg) scale(1) } }

.ws-done{
  position:absolute; inset:1rem; z-index:3; margin:auto; height:max-content; max-height:calc(100% - 2rem); overflow:auto;
  max-width:31rem; padding:1.4rem 1.5rem; background:var(--paper); border:1px solid var(--ink);
  box-shadow:0 0 0 .5rem rgba(250,248,244,.85);
}
.ws-done h2{ margin:.2rem 0 .6rem; font-size:1.35rem }
.ws-done > p{ margin:0 0 .9rem; font-size:1rem; line-height:1.5 }
.ws-stars{ font-family:var(--mono); font-size:1.6rem; letter-spacing:.2em; color:var(--copper); margin:0 }
.ws-record{ font-family:var(--mono); font-size:.78rem; line-height:1.55; color:var(--ink-soft); border-top:1px solid var(--rule); padding-top:.7rem }
.ws-record p{ margin:0 }
.ws-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem }
.ws-granted{
  float:right; margin:0 0 .5rem .8rem; padding:.3rem .6rem .35rem;
  border:2px solid var(--copper); outline:1px solid var(--copper); outline-offset:3px;
  font-family:var(--mono); font-weight:600; font-size:.9rem; letter-spacing:.16em;
  text-transform:uppercase; text-align:center; line-height:1.15; color:var(--copper);
  transform:rotate(-8deg); animation:ws-stamp-8 .45s cubic-bezier(.2,.9,.3,1.3) both;
}
.ws-granted span{ display:block; font-size:.58rem; letter-spacing:.1em; font-weight:400 }
@keyframes ws-stamp-8{ from{ opacity:0; transform:rotate(-8deg) scale(2.2) } to{ opacity:1; transform:rotate(-8deg) scale(1) } }
@media (prefers-reduced-motion:reduce){ .ws-stamp,.ws-granted,.ws-steps li.tick::before{ animation:none } }

/* --------------------------------------------------------- the notebook */

.ws-notebook{ max-width:var(--measure); margin:0 0 3rem }
.ws-notebook ol{ list-style:none; margin:0; padding:0 }
.ws-notebook li{ border-top:1px solid var(--rule); padding:.9rem 0 }
.ws-notebook b{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--copper) }
.ws-notebook p{ margin:.3rem 0 0; font-size:1.0625rem; line-height:1.5 }