/* Lewis Structure Workshop: the workbench (wood frame + blueprint mat holding the Lewis builder and, after Check, the
 * 3D model) and the side panel (blueprint card + the order's questions) in the practice shell's stage. Colours use
 * --tlg-* tokens so dark mode works; the wood frame and blueprint card keep their own colours in both themes. */
.lsw { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 404px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "bench a" "bench b"; column-gap: 12px; row-gap: 8px; padding: 10px 12px; color: var(--tlg-text); }
.lsw-side--a { grid-area: a; }
.lsw-side--b { grid-area: b; }
.lsw-bench { grid-area: bench; }
.lsw-bench { position: relative; min-width: 0; min-height: 0; padding: 12px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 100%) 0 0 / 46px 100%, linear-gradient(180deg, #b9824f, #8d5c33);
  box-shadow: inset 0 0 0 2px #6f4425, inset 0 6px 14px rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .25); }
.lsw-mat { position: relative; height: 100%; padding: 8px 12px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(var(--tlg-grid-line, rgba(31, 95, 139, .12)) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--tlg-grid-line, rgba(31, 95, 139, .12)) 1px, transparent 1px) 0 0 / 24px 24px, var(--tlg-surface);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .12);
  --plw-bond: var(--tlg-text); --plw-guide: var(--tlg-text-muted, #6b7280); }
.lsw-mat .plw-bin { padding-top: 6px; border-top: 2px dashed var(--tlg-border); }

/* the 3D model over the mat */
.lsw-3d { position: absolute; inset: 0; z-index: 3; background: inherit; }
.lsw-3d[hidden] { display: none; }
.lsw3d { position: absolute; inset: 0; }
.lsw3d-canvas { display: block; cursor: grab; touch-action: none; outline: none; }
.lsw3d-canvas:active { cursor: grabbing; }
.lsw3d-canvas:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: -3px; }
.lsw3d-hint { position: absolute; left: 12px; bottom: 6px; margin: 0; font-size: 16px; color: var(--tlg-text-muted, var(--tlg-muted)); pointer-events: none; }
.lsw-viewbar { position: absolute; top: 8px; right: 10px; z-index: 4; display: flex; gap: 6px; }
.lsw-vbtn { font: inherit; font-size: 16px; font-weight: 700; padding: 6px 12px; min-height: 36px; border-radius: 999px; border: 2px solid var(--ps-accent, #1f5f8b);
  background: var(--tlg-surface); color: var(--tlg-text); cursor: pointer; }
.lsw-vbtn[aria-pressed="true"] { background: var(--ps-accent, #1f5f8b); color: #fff; }
.lsw-vbtn:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; }

/* side panel */
.lsw-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lsw-bp { position: relative; flex: none; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: baseline;
  padding: 8px 14px 10px; border-radius: 10px; color: #fff;
  background: linear-gradient(rgba(156, 195, 230, .28) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(156, 195, 230, .28) 1px, transparent 1px) 0 0 / 14px 14px, #1f5f8b;
  box-shadow: inset 0 0 0 2px #0f3a57; }
.lsw-bp-k { grid-column: 1 / -1; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.lsw-bp-f { font-size: 34px; font-weight: 800; line-height: 1.1; }
.lsw-bp-n { font-size: 18px; font-weight: 700; }
.lsw-bp-v { grid-column: 1 / -1; font-size: 16px; }
.lsw-q { flex: none; }
.lsw-q-h { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.lsw-chips { display: grid; gap: 6px; }
.lsw-chips--2 { grid-template-columns: 1fr 1fr; }
.lsw-chips--3 { grid-template-columns: 1fr 1fr 1fr; }
.lsw-chips--4 { grid-template-columns: repeat(4, 1fr); }
.lsw-chip { position: relative; display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 2px 10px; border-radius: 10px; border: 2px solid var(--tlg-border-strong);
  background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: 16px; font-weight: 600; text-align: left; line-height: 1.15; cursor: pointer; }
.lsw-chips--3 .lsw-chip, .lsw-chips--4 .lsw-chip { justify-content: center; text-align: center; padding: 2px 4px; }
.lsw-chip:hover:not(:disabled) { border-color: var(--ps-accent, #1f5f8b); }
.lsw-chip[aria-checked="true"] { background: var(--ps-accent, #1f5f8b); border-color: var(--ps-accent, #1f5f8b); color: #fff; }
.lsw-chip:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; }
.lsw-chip:disabled { cursor: default; }
.lsw-chip .lsw-icon { flex: none; margin-left: -6px; color: var(--tlg-text); }
.lsw-chip[aria-checked="true"] .lsw-icon { color: #fff; }
.lsw-chip.is-ok { box-shadow: 0 0 0 3px #1f9d55; }
.lsw-chip.is-bad { box-shadow: 0 0 0 3px #d03a2f; }
.lsw-chip-mark { position: absolute; right: -7px; top: -9px; font-style: normal; font-weight: 900; font-size: 16px; line-height: 22px; width: 22px; height: 22px; border-radius: 50%; text-align: center; }
.lsw-chip-mark:empty { display: none; }
.lsw-chip.is-ok .lsw-chip-mark { color: #fff; background: #1f9d55; }
.lsw-chip.is-bad .lsw-chip-mark { color: #fff; background: #d03a2f; }
/* AP shape list: 11 choices, no icons, tighter */
.lsw--ap .lsw-q--shape .lsw-chip { min-height: 36px; }
.lsw--ap .lsw-q--shape .lsw-icon { display: none; }
.lsw--ap.lsw--k-exception .lsw-q--angle .lsw-chip, .lsw--ap .lsw-q--angle .lsw-chip { min-height: 36px; }
.lsw-count { display: flex; align-items: center; gap: 6px; }
.lsw-step { width: 44px; height: 42px; border-radius: 10px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
.lsw-step:focus-visible, .lsw-count-in:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; }
.lsw-count-in { width: 80px; height: 42px; box-sizing: border-box; border-radius: 10px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text);
  font: inherit; font-size: 22px; font-weight: 800; text-align: center; }
.lsw-count-mark { font-size: 18px; font-weight: 900; }
.lsw-count-mark.is-ok { color: #1f9d55; }
.lsw-count-mark.is-bad { color: #d03a2f; }
.lsw-how { margin: auto 0 0; font-size: 16px; line-height: 1.35; color: var(--tlg-text-muted, var(--tlg-muted)); }
.lsw kbd { font: inherit; font-size: 16px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--tlg-border-strong); background: var(--tlg-surface-2); }
/* AP orders with many questions: the how-to line gives way */
.lsw--ap.lsw--k-exception .lsw-how, .lsw--ap.lsw--k-polarity .lsw-how, .lsw--ap.lsw--k-draw-shape .lsw-how, .lsw--ap.lsw--k-build-shape .lsw-how { display: none; }

/* Briefing worked example: CO₂ in three steps */
.lsw-ex { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; --plw-bond: var(--tlg-text); }
.lsw-ex-cell { margin: 0; padding: 6px; border-radius: 10px; background: var(--tlg-surface); border: 1px solid var(--tlg-border); }
.lsw-ex-cap { font-size: 16px; max-width: 232px; margin-top: 2px; }
.lsw-ex--narrow .lsw-ex-cap { max-width: 360px; }

/* the shell's assignment card lands bottom-right of the stage, where the side panel's questions end: move it to the
   foot of the customer column (as Free-Body Garage does) */
@media (min-width: 901px) {
  html.ps-locked:has(.lsw) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.lsw):has(.lga-card) .ps-side { padding-bottom: 84px; }
}
@media (max-width: 900px) {
  .lsw { position: static; grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "a" "bench" "b"; }
  .lsw-bench { min-height: 520px; }
}