/* ==========================================================================
   TKA Sagittal Plane Balancing — module styles
   Scoped under .tkasb so nothing leaks into the host platform.
   Retheme from OrthoAnimate by overriding the --tka-* custom properties.
   ========================================================================== */

/* --- OrthoAnimate tool-page shell --- */
.tool-lede{max-width:52rem;color:var(--muted);font-size:1rem;}
/* The workspace is a comparison task: two knee drawings side by side plus a control rail.
   It benefits from width in a way prose does not, so it is allowed past the shared 1240px
   `--shell` used by the site's text pages — capped at 1600px so the two figures stay a
   comfortable scanning distance apart on a very wide display rather than drifting to the
   far edges. The surrounding hero, Start Here and evidence sections keep `--shell`, so the
   module reads as the same page, just with a wider working area. */
/* Three columns need more room than the two-row layout did: at 1600px a 2560px display
   still rendered the same 384/720/432 tracks and left 480px unused on each side. 1920px
   keeps a comfortable measure in the side columns while letting the centre figure grow. */
.tka-page{max-width:min(1920px, calc(100vw - 48px));margin:0 auto;padding:1rem 16px 2rem;}

/* --- module --- */
.tkasb{--tka-ink:var(--ink);--tka-muted:var(--muted);--tka-line:var(--line);--tka-accent:var(--blue);--tka-wash:var(--wash);
 --tka-tight:var(--red);--tka-tight-w:#FBEDEC;--tka-bal:var(--verified);--tka-bal-w:#EAF6EF;--tka-loose:var(--teal);--tka-loose-w:#E7F3F1;
 --tka-card:var(--surface);--tka-sans:var(--sans);--tka-mono:var(--mono);
 color:var(--tka-ink);font-family:var(--tka-sans);line-height:1.5;box-sizing:border-box;}
.tkasb *,.tkasb *::before,.tkasb *::after{box-sizing:inherit;}
.tkasb h2{font-family:var(--tka-sans);font-size:17px;font-weight:600;margin:0 0 3px;}
.tkasb h3{font-family:var(--tka-sans);font-size:18px;font-weight:600;margin:0 0 6px;}
.tkasb .hint{color:var(--tka-muted);font-size:13px;margin:0 0 10px;}
.tkasb a{color:var(--tka-accent);text-underline-offset:2px;}
.tkasb .title-row,.tkasb .name-row{display:flex;align-items:center;gap:6px;}
.tkasb .title-row{margin-bottom:4px;}
.tkasb .title-row h2{margin:0;}
.tkasb .info-tip{display:inline-block;position:relative;line-height:1;flex:0 0 auto;}
.tkasb .info-tip>summary{list-style:none;width:24px;height:24px;border:1px solid var(--tka-line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--tka-wash);color:var(--tka-accent);font-family:var(--tka-serif,serif);font-size:13px;font-style:italic;font-weight:700;cursor:pointer;user-select:none;}
.tkasb .info-tip>summary::-webkit-details-marker{display:none;}
.tkasb .info-tip>summary:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
.tkasb .info-tip[open]>summary{background:var(--tka-accent);border-color:var(--tka-accent);color:#fff;}
.tkasb .info-card{position:absolute;z-index:40;top:calc(100% + 7px);left:0;width:min(310px,calc(100vw - 48px));padding:11px 12px;border:1px solid var(--tka-line);border-radius:10px;background:var(--tka-card);box-shadow:0 12px 30px rgba(22,32,43,.2);color:var(--tka-ink);font-family:var(--tka-sans);font-size:12px;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.45;text-align:left;text-transform:none;}
/* A closed tooltip still occupied layout space over the controls beneath it, which
   obscured their WCAG 2.2 target area. Only render it while its details is open. */
.tkasb .info-tip:not([open]) .info-card{display:none;}
.tkasb .info-card strong{display:block;margin-bottom:4px;font-size:12.5px;}
.tkasb .info-card p{margin:0;}
.tkasb .info-tip-button{align-self:center;}
.tkasb .lbl{font-family:var(--tka-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tka-muted);margin:0 0 6px;}
.tkasb .card{background:var(--tka-card);border:1px solid var(--tka-line);border-radius:14px;padding:14px 16px;}
.tkasb .block{margin-top:12px;}
.tkasb .bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;margin-bottom:12px;}
.tkasb .seg{display:inline-flex;background:var(--tka-wash);border:1px solid var(--tka-line);border-radius:999px;padding:3px;}
.tkasb .seg button{border:0;background:transparent;font:inherit;font-weight:600;font-size:13px;color:var(--tka-muted);padding:6px 14px;border-radius:999px;cursor:pointer;}
.tkasb .seg button.on{background:var(--tka-accent);color:#fff;}
.tkasb .seg button{min-height:44px;}
/* Visible keyboard focus on every interactive control (WCAG 2.4.7) */
.tkasb .seg button:focus-visible,.tkasb .arw:focus-visible,.tkasb .btn:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
/* Start here — compact orientation: one first action, ≤3 objectives, status, links */
.tkasb .starthere{background:var(--tka-wash);border:1px solid var(--tka-line);border-left:3px solid var(--tka-accent);border-radius:12px;padding:12px 16px;margin:0 0 16px;}
.tkasb .starthere-title{font-size:15px;margin:0 0 4px;}
.tkasb .starthere-do{font-size:14px;margin:0 0 8px;color:var(--tka-ink);}
.tkasb .starthere-objectives{margin:0 0 9px;padding-left:19px;font-size:13px;color:var(--tka-muted);}
.tkasb .starthere-objectives li{margin:2px 0;}
.tkasb .starthere-meta{margin:0 0 9px;font-size:12px;color:var(--tka-muted);}
.tkasb .status-chip{display:inline-block;font-family:var(--tka-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--tka-accent);border-radius:999px;padding:2px 8px;margin-right:5px;}
.tkasb .starthere-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font-size:12.5px;color:var(--tka-muted);}
.tkasb .walk-launch{padding:6px 13px;font-size:12.5px;}

/* Advanced disclosure — secondary controls kept reachable but out of the default view */
.tkasb .advanced{border:1px solid var(--tka-line);border-radius:10px;background:var(--tka-wash);margin-top:12px;}
.tkasb .advanced>summary{cursor:pointer;padding:8px 11px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--tka-ink);border-radius:10px;}
.tkasb .advanced>summary span{font-weight:400;color:var(--tka-muted);}
.tkasb .advanced>summary:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
.tkasb .advanced[open]>summary{border-bottom:1px solid var(--tka-line);border-radius:10px 10px 0 0;}
.tkasb .advanced .steppers{padding:10px 11px;}

/* Guided walkthrough — spotlights the real workspace */
.tkasb .walk[hidden]{display:none;}
/* The dimming is drawn ENTIRELY by the ring's 9999px spread shadow, which leaves the
   highlighted element as a genuine cutout. This layer therefore paints nothing — it only
   catches pointer events outside the card. It previously carried the same 44% wash, which
   sat on top of the cutout and dimmed the very element the step was pointing at, so there
   was no spotlight: just a ring drawn over uniformly darkened content. */
.tkasb .walk-scrim{position:fixed;inset:0;background:transparent;z-index:60;}
/* Without a ring (a step whose target is missing) nothing would dim at all, so fall back
   to the wash on the scrim itself. */
.tkasb .walk:has(.walk-ring[style*="display: none"]) .walk-scrim{background:rgba(22,32,43,.44);}
.tkasb .walk-ring{position:fixed;z-index:61;border:3px solid var(--tka-accent);border-radius:12px;box-shadow:0 0 0 9999px rgba(22,32,43,.44);pointer-events:none;transition:all .18s ease;}
.tkasb .walk-card{position:fixed;z-index:62;width:min(340px,calc(100vw - 28px));max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;background:var(--tka-card);border:1px solid var(--tka-line);border-radius:12px;box-shadow:0 16px 40px rgba(22,32,43,.28);padding:13px 15px;}
.tkasb .walk-card:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
.tkasb .walk-count{font-family:var(--tka-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tka-muted);margin:0 0 3px;}
.tkasb .walk-title{font-size:15px;margin:0 0 5px;}
.tkasb .walk-body{font-size:13.5px;margin:0 0 6px;color:var(--tka-ink);}
.tkasb .walk-take{font-size:12.5px;margin:0;color:var(--tka-muted);border-left:2px solid var(--tka-line);padding-left:9px;}
.tkasb .walk-take:empty{display:none;}
.tkasb .walk-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.tkasb .walk-actions .walk-ghost{margin-left:auto;background:transparent;border-color:transparent;color:var(--tka-muted);}
.tkasb .walk-actions .walk-ghost+.walk-ghost{margin-left:0;}
@media(prefers-reduced-motion:reduce){.tkasb .walk-ring{transition:none;}}

/* ================= Responsive learning workspace (module-standard §8) =================
   This is a COMPARISON / BALANCING task, so the standard's prescribed patterns are:
     • Wide      — extension and flexion knees plus their controls in one visual field.
     • Compact   — comparison preserved; controls move to a narrower rail.
     • Focused   — keep the minimum meaningful comparison (both knees + result strip)
                   persistently visible; the matrix, assessment and controls move into a
                   bottom sheet with tabs. Status text never sits over the anatomy.
   Breakpoints are content-driven: the comparison needs ~330px per knee plus a control
   rail (~980px) for wide, and two knees stay legible down to ~600px for compact.       */

/* While the full-screen workspace is open the page behind it must not scroll: a stray
   scroll would move the document under a fixed overlay and lose the learner's place. */
html.tka-fw-lock,html.tka-fw-lock body{overflow:hidden;}

/* ---- Focused workspace: entry action ----
   Shown only in focused mode with JavaScript available. It describes the destination
   rather than the help system, and the guided tour is offered second (§8). */
.tkasb .fw-enter{display:none;flex-direction:column;gap:8px;margin:0 0 14px;
  padding:13px 15px;background:var(--tka-wash);border:1px solid var(--tka-line);
  border-left:3px solid var(--tka-accent);border-radius:12px;}
.tkasb .fw-enter p{margin:0;font-size:13px;color:var(--tka-muted);}
.tkasb .fw-enter-btn{min-height:44px;padding:11px 18px;border:0;border-radius:999px;
  background:var(--tka-accent);color:#fff;font:700 15px/1 var(--tka-sans);cursor:pointer;}
.tkasb .fw-enter-btn:focus-visible{outline:3px solid var(--tka-accent);outline-offset:3px;}

/* ---- Focused workspace: contextual bar (distinct from the global site header) ---- */
.tkasb .fw-bar{position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;align-items:center;gap:10px;
  padding:7px 12px;background:var(--tka-ink);color:#fff;
  border-top:1px solid var(--tka-line);box-shadow:0 -4px 16px rgba(22,32,43,.10);}
.tkasb .fw-bar[hidden]{display:none;}
.tkasb .fw-bar-gaps{flex:1;min-width:0;font:600 12px/1.3 var(--tka-mono);color:#fff;text-align:center;}
.tkasb .fw-bar-btn{min-height:44px;min-width:44px;padding:9px 18px;border:0;border-radius:999px;
  background:var(--tka-accent);color:#fff;font:700 13.5px/1 var(--tka-sans);cursor:pointer;}
.tkasb .fw-bar-btn:focus-visible{outline:3px solid var(--tka-accent);outline-offset:3px;}
/* Tour launcher inside the workspace. Start Here is hidden once the workspace opens, so
   without this the guided tour is unreachable on a phone. */
.tkasb .fw-tour{flex:0 0 auto;min-width:44px;min-height:44px;padding:8px 13px;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;background:transparent;
  color:#fff;font:600 12.5px/1 var(--tka-sans);cursor:pointer;}
.tkasb .fw-tour:focus-visible{outline:3px solid #fff;outline-offset:2px;}
/* Explicit route back to the module page, alongside browser Back (§8). */
.tkasb .fw-exit{flex:0 0 auto;min-width:44px;min-height:44px;padding:8px 12px;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;background:transparent;
  color:#fff;font:600 12.5px/1 var(--tka-sans);cursor:pointer;}
.tkasb .fw-exit:focus-visible{outline:3px solid #fff;outline-offset:2px;}

/* ---- Focused workspace: controls sheet ---- */
.tkasb .fw-sheet{position:fixed;inset:0;z-index:57;}
.tkasb .fw-sheet[hidden]{display:none;}
.tkasb .fw-sheet-scrim{position:absolute;inset:0;background:rgba(22,32,43,.38);}
.tkasb .fw-sheet-panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  max-height:min(76dvh,640px);background:var(--tka-card);border-top-left-radius:16px;border-top-right-radius:16px;
  box-shadow:0 -10px 34px rgba(22,32,43,.3);padding-bottom:env(safe-area-inset-bottom,0px);}
.tkasb .fw-sheet-panel:focus-visible{outline:3px solid var(--tka-accent);outline-offset:-3px;}
.tkasb .fw-sheet-head{display:flex;align-items:center;gap:10px;padding:12px 14px 6px;}
.tkasb .fw-sheet-title{margin:0;font-size:15px;font-weight:700;}
.tkasb .fw-sheet-x{margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--tka-line);
  border-radius:50%;background:var(--tka-wash);color:var(--tka-ink);font-size:14px;cursor:pointer;}
.tkasb .fw-sheet-x:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
.tkasb .fw-tabs{display:flex;gap:6px;padding:0 14px 8px;border-bottom:1px solid var(--tka-line);}
.tkasb .fw-tabs button{flex:1;min-height:44px;border:0;border-radius:9px 9px 0 0;background:transparent;
  color:var(--tka-muted);font:600 13px/1.2 var(--tka-sans);cursor:pointer;}
.tkasb .fw-tabs button[aria-selected="true"]{background:var(--tka-wash);color:var(--tka-accent);
  box-shadow:inset 0 -2px 0 var(--tka-accent);}
.tkasb .fw-tabs button:focus-visible{outline:3px solid var(--tka-accent);outline-offset:-3px;}
.tkasb .fw-sheet-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 18px;}
.tkasb .fw-dock{position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;
  grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--tka-ink);box-shadow:0 -4px 16px rgba(22,32,43,.2);}
.tkasb .fw-dock[hidden]{display:none;}
.tkasb .fw-dock button{display:grid;grid-template-rows:18px auto;place-items:center;min-width:0;min-height:58px;
  padding:7px 3px;border:0;background:transparent;color:#dfe6f0;font:600 11px/1.2 var(--tka-sans);cursor:pointer;}
.tkasb .fw-dock button>span{color:#9ec2f5;font:800 15px/1 var(--tka-mono);}
.tkasb .fw-dock button.is-active{color:#fff;background:rgba(158,194,245,.16);}
.tkasb .fw-dock button.is-active>span{color:#fff;}

/* ---- Focused workspace (phone portrait, or any viewport too small to coexist) ----
   Previously the focused surfaces (bar, dock, sheet) floated over a page that still
   flowed normally: hero, Start Here, disclaimer and the full dashboard stacked above a
   `position:sticky` figure, so on a 390x844 phone the knee did not appear until y=1093
   and the page ran 3.1 viewports tall. module-standard.md forbids presenting the wide
   workspace as a compressed vertical stack below Start Here when a focused experience
   exists. The workspace is now a genuine full-screen view entered from one action:
   `.fw-on` takes the module root out of the document flow and sizes it to the visual
   viewport, so nothing scrolls above the model. The surrounding page is untouched and
   remains the no-JavaScript fallback. */
@media(max-width:599px), (max-width:950px) and (max-height:520px){
  /* The focused entry lives in the `.fw-enter` card below Start Here, which also explains
     what entering does. The shared Start Here action would duplicate it verbatim — two
     identical "Open interactive workspace" buttons a few hundred pixels apart — so it
     stays hidden here and `--enter-action` is deliberately NOT set. It is set only where a
     module has no such card of its own (see module-patterns.css). */
  /* --- entry state: the page keeps its ordinary flow; only the entry action is shown --- */
  .tkasb.fw-on .dash{grid-template-areas:"diagram";gap:10px;}
  .tkasb.fw-on .dash>.a-matrix,.tkasb.fw-on .dash>.a-assess,.tkasb.fw-on .dash>.a-controls{display:none;}
  .tkasb .fw-sheet-body>.a-matrix,.tkasb .fw-sheet-body>.a-assess,.tkasb .fw-sheet-body>.a-controls{display:block;}

  /* With JS available the stacked dashboard is not shown at all: the learner gets the
     entry action, and the workspace replaces the page when it is taken. Without JS the
     `fw-js` class is never added, so every section stays reachable by scrolling. */
  .tkasb.fw-js .dash{display:none;}
  .tkasb.fw-js .fw-enter{display:flex;}

  /* --- active state: full-screen workspace --- */
  .tkasb.fw-on{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
    background:var(--tka-card);overflow:hidden;
    padding-top:env(safe-area-inset-top,0px);}
  /* Three declarations here are load-bearing, each fixing a way the figure escaped its
     row. `grid-template-areas:"diagram"` collapses the base four-row template to the one
     row the workspace shows. `grid-template-rows:minmax(0,1fr)` stops that row sizing to
     content. `align-items:stretch` overrides the base `start`, which sized the item to
     its content regardless of the row — a 390px-tall landscape phone drew a 610px
     figure. All three are required; any one alone still overflows. */
  .tkasb.fw-on .dash{display:grid;flex:1 1 auto;min-height:0;margin:0;
    grid-template-areas:"diagram";grid-template-rows:minmax(0,1fr);
    align-items:stretch;}
  .tkasb.fw-on .dash>.a-diagram{min-height:0;overflow:hidden;}
  .tkasb.fw-on .tka-page{padding:0;}
  /* Everything that is not the workspace is removed from the view while it is open —
     not merely scrolled past. */
  .tkasb.fw-on .bar,.tkasb.fw-on .module-start,.tkasb.fw-on .module-evidence,
  .tkasb.fw-on .fw-enter{display:none;}

  .tkasb.fw-on .a-diagram{margin:0;padding:6px 10px 8px;border:0;border-radius:0;
    display:flex;flex-direction:column;min-height:0;flex:1 1 auto;background:var(--tka-card);}
  .tkasb.fw-on .a-diagram>h2,.tkasb.fw-on .a-diagram>.hint{display:none;} /* named by the bar */
  .tkasb.fw-on .a-diagram .figs-wrap{flex:1 1 auto;min-height:0;display:flex;}
  .tkasb.fw-on .a-diagram .figs{min-height:0;align-items:stretch;flex:1 1 auto;}
  .tkasb.fw-on .a-diagram .fig{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
  /* The figure takes the space the page chrome used to occupy: it is bounded by the
     flex row rather than a fixed svh, so it grows on a tall phone and stays legible at
     200% zoom on a short one. */
  .tkasb.fw-on .a-diagram .figs svg{width:100%;height:100%;flex:1 1 auto;min-height:0;}
  .tkasb.fw-on .a-diagram .rd{margin-top:auto;flex:0 0 auto;} /* read-outs on one baseline */
  .tkasb.fw-on .a-diagram .diag,.tkasb.fw-on .a-diagram .note{display:none;} /* in the bar */
  .tkasb.fw-on .quicks{flex:0 0 auto;}

  /* Fixed chrome inside the workspace. Bar sits above the dock; both respect the inset. */
  .tkasb.fw-on .fw-bar{display:flex;bottom:calc(58px + env(safe-area-inset-bottom,0px));}
  .tkasb.fw-on .fw-dock{display:grid;}
  /* Reserve the bar + dock height so the figure is never underlapped by them. */
  .tkasb.fw-on .dash{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
}
/* At 200% zoom / very short viewports the figure must still be interpretable: the
   read-outs and quick levers give up space before the drawing does. */
@media(max-width:950px) and (max-height:520px){
  .tkasb .fw-sheet-panel{max-height:min(86dvh,520px);}
  .tkasb.fw-on .quicks{max-height:78px;overflow:auto;}
}
@media(prefers-reduced-motion:reduce){.tkasb .fw-sheet-panel{transition:none!important;}}
.tkasb details.assume{font-size:12.5px;color:var(--tka-muted);border-left:3px solid var(--tka-line);padding:2px 0 2px 10px;margin:0 0 14px;}
.tkasb details.assume summary{cursor:pointer;font-weight:600;color:var(--tka-ink);}
.tkasb details.assume b{color:var(--tka-ink);}
.tkasb .evidence-assume{margin:14px 0!important;scroll-margin-top:90px;}
.tkasb .assume-body{margin-top:6px;}
/* Responsive dashboard. The lateral-knee diagram is the centrepiece: on wide
   screens it spans two columns with the matrix and assessment beneath it and the
   controls alongside; collapses to two then one column on smaller screens. */
.tkasb .dash{display:grid;gap:16px;align-items:start;
  grid-template-columns:1fr;
  grid-template-areas:"diagram" "matrix" "assess" "controls";}
.tkasb .a-diagram{grid-area:diagram;} .tkasb .a-matrix{grid-area:matrix;}
.tkasb .a-assess{grid-area:assess;} .tkasb .a-controls{grid-area:controls;}
.tkasb .assess-card .assess{margin-top:0;border-top:0;padding-top:0;}
/* Small laptop: diagram stacked over matrix + assessment, controls right.
   Starts at 1024px — below that the dedicated compact workspace above owns the layout,
   and this rule previously overrode it because it is declared later at equal
   specificity, which is why a 768px tablet was still receiving the desktop grid. */
@media(min-width:1024px) and (max-width:1159px){
  .tkasb .dash{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    grid-template-areas:"diagram controls" "matrix controls" "assess controls";}
}
/* On a short desktop window the wide layout has to fit the figure, the control rail, the
   gap matrix and the assessment on one screen. The two hint paragraphs above the drawing
   cost 77px and restate what the figure and the direct-interaction affordances already
   show, so they collapse into the existing "How to use" disclosure below 1000px of height
   rather than shrinking the teaching graphic further. The direct-interaction hint is the
   one that names the keyboard equivalent, so it is kept for assistive technology by being
   moved, not removed. */
@media(min-width:1024px) and (max-height:999px){
  .tkasb .a-diagram>.hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
  .tkasb .a-diagram{position:relative;}
  .tkasb .a-diagram>h2{margin-bottom:6px;}
}

/* Widescreen desktop: interpretation left, model centre, controls right.
   The model is flanked by what explains it and what changes it, so the learner's eye moves
   result -> model -> lever without leaving the row. DOM order is assessment, matrix,
   diagram, controls (see index.njk), which matches this arrangement left-to-right, so the
   reading order a keyboard or screen-reader user gets is the order they see. `restoreSections`
   re-asserts that sequence after the phone sheet returns a section — without it a returning
   node lands last and the two orders drift apart silently.

   Assessment sits above the matrix: it is the live interpretation of the current plan and
   changes as the learner works, while the matrix is a lookup consulted occasionally
   (§8 information priority puts result and interpretation above extended teaching content).
   The side columns scroll independently so a long assessment or control list can never push
   the model off screen. */
@media(min-width:1160px){
  /* The centre track is sized so the two drawings, at the height budget, fill it — a wider
     track would only reintroduce the letterbox this release removed. */
  .tkasb .dash{grid-template-columns:minmax(260px,0.85fr) minmax(0,1.4fr) minmax(280px,0.95fr);
    grid-template-areas:"assess diagram controls" "matrix diagram controls";
    grid-template-rows:auto 1fr;align-items:start;}
  .tkasb .dash>.a-diagram{grid-area:diagram;}
  .tkasb .dash>.a-assess{grid-area:assess;}
  .tkasb .dash>.a-matrix{grid-area:matrix;}
  .tkasb .dash>.a-controls{grid-area:controls;}
  /* Each side column is bounded to the viewport and scrolls on its own, so neither can
     lengthen the row and push the model below the fold. */
  .tkasb .dash>.a-assess,.tkasb .dash>.a-matrix,.tkasb .dash>.a-controls{
    max-height:calc(100svh - 120px);overflow:auto;overscroll-behavior:contain;}
}

/* ---- Compact workspace: dedicated tablet layout (module-standard §8) ----
   Declared after the base and desktop grids so it wins at equal specificity.
   768-1023px previously fell between the focused rules and the desktop grid, so a
   portrait tablet received the desktop two-column grid with only touch sizing applied:
   a 745px figure beside a 1330px control column, which scrolled the model out of view
   while it was being adjusted. The compact workspace instead sizes the figure to the
   viewport and gives the controls a persistent rail beside it that scrolls on its own,
   so the act and observe halves of the loop stay in one visual field without a sheet.
   The second query covers a touch tablet in landscape (1024-1366, coarse pointer),
   which has the same problem; a mouse-driven laptop at those widths keeps the desktop
   grid, so layout and input capability stay independent. */
@media(min-width:600px) and (max-width:1023px) and (min-height:560px),
      (min-width:1024px) and (max-width:1366px) and (min-height:560px) and (pointer:coarse){
  /* The workspace is one viewport-tall scrolling region. The figure and the control rail
     are both `sticky` inside it, so the rail's own content scrolls past while the figure
     stays in place — the act and observe halves of the loop stay in one visual field
     without a sheet. Keeping the shell itself the scroller, rather than bounding each
     item to a fixed grid row, leaves the drawing free to size to its own aspect ratio;
     pinning the rows collapsed it to 0px on a landscape tablet. */
  .tkasb .cw-shell{display:grid;gap:12px;align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(268px,.62fr);
    grid-template-areas:"diagram controls" "matrix controls" "assess controls";
    height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;}
  .tkasb .cw-shell>.a-diagram{grid-area:diagram;position:sticky;top:0;z-index:2;
    background:var(--tka-card);}
  .tkasb .cw-shell>.a-matrix{grid-area:matrix;}
  .tkasb .cw-shell>.a-assess{grid-area:assess;}
  /* The rail scrolls on its own so reaching a deep control never moves the figure. */
  .tkasb .cw-shell>.a-controls{grid-area:controls;position:sticky;top:0;
    max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
    scrollbar-gutter:stable;}
  /* The compact rail is 268px at its floor, narrower than the base 300px stepper
     track. Let that track shrink to the rail instead of widening the grid and pushing
     its arrow targets beyond the viewport. */
  .tkasb .cw-shell>.a-controls .steppers{grid-template-columns:minmax(0,1fr);}
  /* Cap the drawing so the figure card cannot fill the viewport on its own and push the
     matrix and assessment out of the scrolling region entirely. */
  .tkasb .cw-shell .a-diagram .figs svg{width:100%;height:auto;max-height:42svh;}
}
.tkasb .matrix-sec h2{margin-bottom:6px;}
.tkasb .mtxgrid{margin-top:2px;}
.tkasb .axis-x{font-family:var(--tka-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tka-accent);text-align:center;padding-left:52px;margin-bottom:4px;}
.tkasb .mtxrow{display:flex;align-items:stretch;gap:5px;}
.tkasb .axis-y{font-family:var(--tka-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tka-accent);writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;padding-top:24px;}
.tkasb .mtx{flex:1;min-width:0;display:grid;grid-template-columns:48px 1fr 1fr 1fr;gap:6px;}
.tkasb .corner{}
.tkasb .colhead,.tkasb .rowhead{font-size:11.5px;font-weight:600;color:var(--tka-muted);display:flex;align-items:center;justify-content:center;text-align:center;}
.tkasb .cell{border:1.5px solid var(--tka-line);background:var(--tka-card);border-radius:9px;min-height:46px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;transition:transform .12s,box-shadow .12s,border-color .12s;}
.tkasb .cell:hover{transform:translateY(-2px);box-shadow:0 5px 13px rgba(22,32,43,.12);}
.tkasb .cell:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
.tkasb .cell.sel{border-color:var(--tka-accent);box-shadow:0 0 0 3px var(--tka-wash);}
.tkasb .dots{display:flex;gap:5px;} .tkasb .dot{width:10px;height:10px;border-radius:50%;}
.tkasb .tag{font-size:10.5px;color:var(--tka-muted);font-weight:600;}
.tkasb .cell.bal{background:var(--tka-bal-w);border-color:#BFE3CD;}
.tkasb .cell.bal .chk{font-size:20px;color:var(--tka-bal);line-height:1;} .tkasb .cell.bal .tag{color:var(--tka-bal);}
.tkasb .diag{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap;}
.tkasb .chip{border-radius:999px;padding:4px 12px;font-family:var(--tka-mono);font-weight:700;font-size:12px;}
/* With the letterbox gone the drawings no longer fill the card, so the reclaimed width is
   spent on the drawings themselves: `--tka-fig-h` grows until either the vertical budget or
   the available width is used up, whichever binds first. `min()` picks the binding one, so
   a tall narrow window stays height-limited and a wide short one becomes width-limited
   instead of leaving a 344px gap between the two knees. 0.67 is the combined aspect ratio
   of the two viewBoxes (300+316 units wide over 478 tall) plus the gap. */
/* `aspect-ratio` lets the browser resolve what a percentage-of-own-height cannot: the row
   is given the vertical budget as a max height and an aspect ratio matching the two
   viewBoxes side by side (300+316 units over 478), so it shrinks on a narrow window and
   stops growing once the drawings would exceed the height budget. Both children then fill
   that height, which keeps their scale identical. */
/* Height is the single driver (see `.fig svg`), so this row only has to centre the pair and
   stop them stretching. Sizing the row itself — by aspect-ratio or a percentage of its own
   height — creates a circular dependency the browser resolves by collapsing the drawings. */
.tkasb .figs{display:flex;gap:clamp(16px,4vw,64px);justify-content:center;margin-top:4px;
  flex-wrap:nowrap;align-items:flex-start;}
/* The drawings previously carried `max-width:310px`, so they stayed exactly 310px wide at
   every viewport — the teaching graphic the module exists for never grew, however much
   space its container had.

   They are now sized from their own aspect ratio instead of a fixed width. The artwork is
   tall and narrow (300x478 and 316x478), so a column wider than height x ratio cannot be
   filled: `xMidYMid meet` letterboxes the drawing and centres it, which is where the empty
   space in the figure panel came from — each 469px column was drawing a ~314px knee with
   ~78px of blank margin on either side. Capping the column at the width the drawing can
   actually use collapses that gap, and `justify-content:center` on `.figs` keeps the pair
   together in the middle of the card rather than drifting apart. */
/* Both views MUST render at the same px-per-unit or the two knees appear at different
   sizes side by side, which would misrepresent the anatomy. They share one drawn height
   and let width follow from each view's own aspect ratio, so the scale is identical and
   neither column is wider than its drawing can fill. */
.tkasb .fig{flex:0 1 auto;min-width:0;text-align:center;}
.tkasb .fig .cap{font-family:var(--tka-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tka-muted);margin-bottom:2px;}
/* Bound by height as well as width. The artwork is tall and narrow (roughly 300x478), so
   letting it take the full column width on a wide display produced a 748px drawing that
   pushed everything below it off screen.

   The cap is deliberately conservative: on the wide layout the figure shares the first grid
   row with the control rail, and the gap matrix and assessment sit in the row beneath. At
   56svh the figure alone filled the viewport and left those two cards 150-214px below the
   fold on a 900px screen — the learner had to scroll away from the model to read the very
   interpretation the model produces. 42svh keeps the figure, the rail, the matrix and the
   assessment on one screen at 900px and above, which is the whole point of the wide
   layout. Shorter viewports fall to the compact/focused workspaces, which own their own
   sizing.

   The cap is expressed as "viewport minus what everything else needs" rather than a fixed
   svh fraction. A fixed 42svh left the figure 31px short of its budget at 1080p and 240px
   short at 1440p — the taller the display, the more it wasted, which is the opposite of
   what a wide desktop should do. `--tka-fig-reserve` is the measured cost of the rest of
   the wide layout: the figure card's own chrome (caption, read-outs, quick levers, status
   line) plus the taller of the gap matrix / assessment row, plus the grid gap. */
/* The reserve is smaller on short windows because the hint paragraphs are clipped there
   (see the short-desktop rule below), so the figure card's own chrome costs ~75px less.
   Without this split, one fixed value either overflowed 1080p or needlessly shrank the
   drawing at 900p. */
.tkasb{--tka-fig-reserve:580px;}
@media(max-height:999px){ .tkasb{--tka-fig-reserve:520px;} }
/* In the three-column desktop layout the matrix and assessment sit BESIDE the model rather
   than below it, so the figure no longer has to leave room for a second grid row. It gets
   the viewport minus its own card chrome, which is what lets the drawings grow on a large
   display instead of stalling at the height a two-row layout needed. */
@media(min-width:1160px){ .tkasb{--tka-fig-reserve:320px;} }
/* Height is the driver and width follows from the viewBox, so both views share one scale
   and each column shrinks to exactly the width its drawing needs — no letterbox. */
/* Height drives; width follows from each viewBox. Identical height => identical scale in
   both views, and each SVG box ends up exactly as wide as its own drawing, so there is no
   letterbox to leave blank margin inside the panel. */
.tkasb .fig svg{height:max(300px, calc(100svh - var(--tka-fig-reserve)));
  width:auto;max-width:100%;display:block;margin-inline:auto;}
.tkasb .rd{font-family:var(--tka-mono);font-size:13px;font-weight:700;margin-top:2px;}
.tkasb .note{font-size:12px;color:var(--tka-muted);text-align:center;margin-top:8px;font-family:var(--tka-mono);}
.tkasb .grp{display:flex;align-items:baseline;gap:8px;font-family:var(--tka-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tka-accent);margin:8px 0 5px;}
.tkasb .grp span{letter-spacing:0;text-transform:none;font-size:11.5px;color:var(--tka-muted);}
/* A stepper row is a label plus a control block that is ~150px wide (two 44px arrows and
   the value between them). 215px was never enough for both, but at the old 431px rail the
   grid only ever produced one column so the shortfall never showed. Widening the page in
   v0.12.0 made a second column fit and the labels immediately ran under their steppers.
   The track floor is now sized from the control it must actually sit beside. */
.tkasb .steppers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:6px 12px;}
.tkasb .steppers>*{min-width:0;}
.tkasb .stp{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--tka-line);border-radius:10px;padding:5px 6px 5px 10px;background:#FCFDFE;}
/* `min-width:0` lets the label column shrink, but nothing made its CONTENTS shrink with it,
   so long labels ("Distal femoral", "PCL recession") overflowed their box and painted over
   the stepper. Wrapping keeps them inside the column at any rail width. */
.tkasb .stp>div:first-child{min-width:0;flex:1 1 auto;overflow-wrap:anywhere;}
.tkasb .stp .name{overflow-wrap:anywhere;}
.tkasb .stp .eff{overflow-wrap:anywhere;}
.tkasb .stp .name{font-weight:600;font-size:12.5px;line-height:1.15;}
.tkasb .stp .eff{display:block;font-size:10px;color:var(--tka-muted);line-height:1.2;}
.tkasb .stepper{display:inline-flex;align-items:center;gap:2px;background:var(--tka-wash);border-radius:9px;padding:2px;flex:0 0 auto;}
.tkasb .arw{width:44px;height:44px;border:0;border-radius:7px;background:#fff;color:var(--tka-accent);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.tkasb .arw:hover:not(:disabled){background:var(--tka-accent);color:#fff;}
.tkasb .arw:disabled{opacity:.32;cursor:not-allowed;color:var(--tka-muted);}
.tkasb .stpval{min-width:70px;text-align:center;font-family:var(--tka-mono);font-weight:700;font-size:12.5px;line-height:1.15;}
.tkasb .stpval-main,.tkasb .stpval-sub{display:block;}
.tkasb .stpval-sub:empty{display:none;}
.tkasb .stpval.detailed{min-width:112px;padding:1px 3px;}
.tkasb .stpval-sub{margin-top:2px;color:var(--tka-muted);font-family:var(--tka-sans);font-size:9.5px;font-weight:500;white-space:nowrap;}
/* When the control rail narrows, stack the label and arrow rows. This override must remain
   after the base `.stp` declaration above; otherwise equal specificity returns the compact
   layout to `align-items:center` and a 10px gap by declaration order. */
@media(min-width:600px) and (max-width:1199px){
  .tkasb .stp{flex-direction:column;align-items:stretch;gap:6px;}
  .tkasb .stp>div:first-child{min-width:0;}
  .tkasb .stepper{justify-content:space-between;}
  .tkasb .stpval,.tkasb .stpval.detailed{min-width:0;flex:1 1 auto;padding-inline:6px;}
  .tkasb .arw{flex:0 0 auto;}
}
.tkasb .stp.fx .stpval{color:var(--tka-loose);}
.tkasb .stp.fx .stpval-sub{color:var(--tka-muted);}
.tkasb .stp.aug{background:#FFFDF7;border-color:#EBDFC2;}
.tkasb .stp.aug .stpval{color:#6F5713;}  /* ≥4.5:1 on the stepper wash (WCAG 1.4.3) */
.tkasb .cons{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--tka-line);border-radius:11px;padding:8px 10px;background:#FCFDFE;grid-column:1;}
.tkasb .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.tkasb .btn{border:1.5px solid var(--tka-line);background:var(--tka-card);border-radius:9px;font:inherit;font-weight:600;font-size:13.5px;min-height:44px;padding:10px 16px;cursor:pointer;color:var(--tka-ink);}
.tkasb .btn:hover{border-color:var(--tka-accent);color:var(--tka-accent);}
.tkasb .btn.pri{background:var(--tka-accent);color:#fff;border-color:var(--tka-accent);}
.tkasb .assess{margin-top:16px;border-top:1px solid var(--tka-line);padding-top:12px;}
.tkasb .states{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.tkasb .pill{border-radius:999px;padding:3px 10px;font-family:var(--tka-mono);font-weight:600;font-size:11.5px;}
.tkasb ol.sol{margin:6px 0 0;padding-left:20px;} .tkasb ol.sol li{margin:5px 0;font-size:14px;}
.tkasb .decision-evidence{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--tka-line);color:var(--tka-muted);font-size:11.5px;}
.tkasb .qstep{font-family:var(--tka-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tka-accent);margin-bottom:6px;}
.tkasb .qstep.ok{color:var(--tka-bal);}
.tkasb .qbad{color:var(--tka-tight);font-size:13.5px;margin:6px 0 0;font-weight:600;}
.tkasb ul.qlist{margin:6px 0 0;padding-left:20px;} .tkasb ul.qlist li{margin:5px 0;font-size:14px;}
.tkasb .quizhint{font-size:12.5px;color:var(--tka-accent);font-weight:600;margin:0 0 8px;}
.tkasb .cite{color:var(--tka-muted);font-size:12px;margin-top:18px;border-top:1px solid var(--tka-line);padding-top:12px;}
.tkasb .references{margin-top:14px;scroll-margin-top:90px;}
.tkasb .references>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:17px;font-weight:600;color:var(--tka-ink);}
.tkasb .references>summary::-webkit-details-marker{display:none;}
.tkasb .references>summary::after{content:'+';display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--tka-wash);color:var(--tka-accent);font-size:19px;line-height:1;flex:0 0 auto;}
.tkasb .references[open]>summary::after{content:'−';}
.tkasb .references>summary:focus-visible{outline:3px solid var(--tka-accent);outline-offset:4px;border-radius:4px;}
.tkasb .references>summary span{margin-left:auto;color:var(--tka-muted);font-family:var(--tka-mono);font-size:10.5px;font-weight:500;}
.tkasb .references-body{padding-top:12px;}
.tkasb .references ol{columns:2;column-gap:34px;margin:0;padding-left:22px;}
.tkasb .references li{break-inside:avoid;margin:0 0 8px;padding-left:2px;color:var(--tka-muted);font-size:11.5px;line-height:1.45;scroll-margin-top:90px;}
.tkasb .references i{color:var(--tka-ink);}
@media(max-width:700px){.tkasb .references ol{columns:1;}.tkasb .info-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 32px));}}
@media(prefers-reduced-motion:reduce){.tkasb *{transition:none!important;}}

/* ==== Focused-workspace polish (declared last so it wins over the base control rules) ====
   The standard prefers 44x44 touch targets where practical, and warns against dense,
   visually repetitive control panels on a phone. */
@media(max-width:599px), (max-width:950px) and (max-height:520px){
  .tkasb .arw{width:44px;height:44px;font-size:17px;border-radius:9px;}
  .tkasb .info-tip>summary{width:44px;height:44px;font-size:15px;}
  .tkasb .btn,.tkasb .seg button,.tkasb .fw-tabs button{min-height:44px;}
  .tkasb .cell{min-height:56px;}
  /* Density: drop the per-row effect text and group hints — both are taught in the
     assessment and Model assumptions, so repeating them on every row is noise. */
  /* One scannable line per control: name on the left, stepper on the right. */
  .tkasb .stp{display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    gap:10px;padding:6px 10px;}
  .tkasb .stp>div:first-child{flex:1 1 auto;min-width:0;}
  .tkasb .stp .eff{display:none;}
  .tkasb .stp .name{font-size:14px;}
  .tkasb .stepper{flex:0 0 auto;}
  /* The femoral-size row carries a second line ("64 mm A/P · templated") that crowded the
     decrement arrow below its target size. Let the value shrink and wrap instead. */
  .tkasb .stpval,.tkasb .stpval.detailed{min-width:0;max-width:104px;font-size:13.5px;padding-inline:4px;}
  .tkasb .stpval-sub{font-size:10.5px;white-space:normal;line-height:1.15;}
  .tkasb .stp .name-row{flex-wrap:wrap;}
  .tkasb .grp{margin-top:14px;}
  .tkasb .grp span{display:none;}
  /* Tooltips are centred on phones already; keep them clear of the sheet edges. */
  .tkasb .fw-sheet-body .info-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}
}

/* ===== Direct model interaction (module-standard §8) =====
   The SVG geometry itself is selectable in BOTH views. Selection is drawn on the shape's
   own outline using weight + dash pattern, never colour alone. */
.tkasb .pick{cursor:pointer;}
.tkasb .pick>*{transition:filter .12s;}
@media(prefers-reduced-motion:reduce){.tkasb .pick>*{transition:none;}}
.tkasb .pick:hover>*{filter:brightness(1.06) drop-shadow(0 0 2px var(--tka-accent));}
.tkasb .pick.on path,.tkasb .pick.on g>path,.tkasb .pick.on rect{
  stroke:var(--tka-accent)!important;stroke-width:3.4!important;
  stroke-dasharray:7 3.5;paint-order:stroke fill;}
.tkasb .pick:focus{outline:none;}
.tkasb .pick:focus-visible path,.tkasb .pick:focus-visible rect{
  stroke:var(--tka-accent)!important;stroke-width:3.4!important;stroke-dasharray:none;}
.tkasb .direct-hint{margin-bottom:8px;}

/* Contextual popup — overlays the model, anchored beside the selected part */
.tkasb .figs-wrap{position:relative;}
.tkasb .ctx{position:absolute;z-index:30;width:max-content;min-width:186px;max-width:230px;
  padding:9px 10px;border:1px solid var(--tka-accent);border-radius:11px;
  background:var(--tka-card);box-shadow:0 10px 26px rgba(22,32,43,.24);}
.tkasb .ctx[hidden]{display:none;}
.tkasb .ctx-head{display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.tkasb .ctx-name{font-weight:700;font-size:12.5px;line-height:1.2;}
.tkasb .ctx-x{margin-left:auto;width:44px;height:44px;flex:0 0 auto;border:1px solid var(--tka-line);
  border-radius:50%;background:var(--tka-wash);color:var(--tka-ink);font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.tkasb .ctx-x:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
.tkasb .ctx-actions{display:flex;align-items:center;gap:8px;}
.tkasb .ctx-btn{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--tka-line);
  border-radius:10px;background:var(--tka-card);color:var(--tka-accent);
  font:700 20px/1 var(--tka-sans);cursor:pointer;}
.tkasb .ctx-btn:hover:not(:disabled){background:var(--tka-accent);color:#fff;border-color:var(--tka-accent);}
.tkasb .ctx-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--tka-muted);}
.tkasb .ctx-btn:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}
.tkasb .ctx-val{flex:1;text-align:center;font-family:var(--tka-mono);font-weight:700;
  font-size:13px;color:var(--tka-ink);}
.tkasb .ctx-step{margin:7px 0 0;font-size:11px;color:var(--tka-muted);}
.tkasb .ctx-why{margin:6px 0 0;font-size:11.5px;color:var(--tka-tight);}

/* ==== Phone fixes for direct interaction and the walkthrough ==== */
@media(max-width:599px), (max-width:950px) and (max-height:520px){
  /* The popup must not swamp or cover the model. Collapse it to a single compact row:
     name on top, then −/value/+ inline. No step note (it is in the assessment). */
  .tkasb .ctx{min-width:0;max-width:min(190px,calc(100% - 12px));padding:7px 8px;}
  .tkasb .ctx-head{margin-bottom:5px;}
  .tkasb .ctx-name{font-size:11.5px;}
  .tkasb .ctx-x{width:34px;height:34px;}
  .tkasb .ctx-btn{width:38px;height:38px;font-size:18px;}
  .tkasb .ctx-val{font-size:12px;}
  .tkasb .ctx-step{display:none;}
  .tkasb .ctx-why{font-size:10.5px;margin-top:5px;}

  /* The walkthrough card was 340x285 on a 390px screen — it covered the workspace it is
     meant to be pointing at. Dock it to the bottom, above the contextual bar, and size
     it to the viewport so the highlighted control stays visible above it. */
  .tkasb .walk-card{left:8px!important;right:8px!important;width:auto!important;
    top:auto!important;bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;
    max-height:min(42svh,calc(100dvh - 84px));overflow:auto;padding:11px 13px;}
  /* Two situations put the ring in the bottom half of the screen, where the card docks:
     an open controls sheet, and — inside the full-screen workspace — the gap read-outs,
     which sit at the foot of the figure. In both the card must dock to the TOP instead.
     The read-out case is new in v0.12.0: when the figure was a sticky panel on a scrolling
     page the placement code could scroll the target clear of the card, but the workspace
     does not scroll, so the correction was a no-op and the card covered the very numbers
     step 1 and step 3 ask the learner to read. `data-tour-dock` is set by tourRender from
     the step's own declaration, so this is decided by the step rather than guessed from
     geometry. */
  .tkasb .fw-sheet:not([hidden])~.walk .walk-card,
  .tkasb .walk[data-tour-dock="top"] .walk-card{
    bottom:auto!important;top:calc(8px + env(safe-area-inset-top,0px))!important;
    max-height:34svh;}
  .tkasb .walk-title{font-size:14px;}
  .tkasb .walk-body{font-size:13px;}
  .tkasb .walk-take{font-size:11.5px;}
  .tkasb .walk-actions{gap:6px;margin-top:9px;}
  .tkasb .walk-actions .btn{min-width:44px;min-height:44px;padding:9px 12px;font-size:12.5px;touch-action:manipulation;}
}

/* ===== Ghost augment slots + quick levers ===== */
/* An empty augment position: the shape a 5 mm augment would fill. Dashed and faint so it
   reads as an invitation, not as anatomy — and selectable so the lever lives on the model. */
.tkasb .hits .ghost,.tkasb .pick .ghost,.tkasb rect.ghost,.tkasb path.ghost{
  fill:none;stroke:var(--tka-muted);stroke-width:1.4;stroke-dasharray:4 3;opacity:.5;}
.tkasb .pick:hover .ghost{opacity:.95;stroke:var(--tka-accent);}
.tkasb .pick.on .ghost{opacity:1;stroke:var(--tka-accent);stroke-width:2.6;}
.tkasb .ctx-add{flex:1;min-height:44px;padding:0 12px;border:1px solid var(--tka-accent);
  border-radius:10px;background:var(--tka-accent);color:#fff;
  font:700 13px/1 var(--tka-sans);cursor:pointer;}
.tkasb .ctx-add:hover{background:var(--tka-accent);filter:brightness(1.08);}
.tkasb .ctx-add:focus-visible{outline:3px solid var(--tka-accent);outline-offset:2px;}

/* Quick levers with no drawn referent (constraint, PCL), kept beside the model */
.tkasb .quicks{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:10px;}
.tkasb .quicks:empty{display:none;}
.tkasb .quick{display:flex;align-items:center;gap:8px;}
.tkasb .quick-lbl{font-family:var(--tka-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tka-muted);}
.tkasb .quick-stepper{display:flex;align-items:center;gap:7px;}
.tkasb .quick-val{font-family:var(--tka-mono);font-size:12px;font-weight:700;color:var(--tka-ink);}
/* PCL recession is a named one-way action, not a stepper: it only ever releases, so a bare
   arrow glyph read as a media "play" control rather than "release one grade". It carries a
   verb, and states plainly when there is nothing left to release. */
.tkasb .quick-act{min-height:32px;padding:5px 11px;font-size:12px;font-weight:650;
  border-radius:8px;white-space:nowrap;}
@media (pointer: coarse), (hover: none){ .tkasb .quick-act{min-height:44px;padding:9px 14px;} }
@media(max-width:599px), (max-width:950px) and (max-height:520px){
  .tkasb .quicks{gap:8px 12px;margin-top:8px;}
  .tkasb .quick-val{font-size:11.5px;}
}

/* ================= Input capability (module-standard §8) =================
   Input capability is determined INDEPENDENTLY of workspace size: a wide tablet uses the
   wide layout but still needs touch-first targets, and a narrow desktop window keeps a
   precise pointer. Width is never used as a proxy for input method. These rules are keyed
   on capability alone, so they apply at every breakpoint. */
@media (pointer: coarse), (hover: none){
  .tkasb .arw{width:44px;height:44px;font-size:17px;border-radius:9px;}
  .tkasb .info-tip>summary{width:44px;height:44px;font-size:15px;}
  .tkasb .btn,.tkasb .seg button,.tkasb .fw-tabs button,.tkasb .ctx-add{min-height:44px;}
  .tkasb .ctx-btn{width:44px;height:44px;}
  .tkasb .ctx-x,.tkasb .fw-sheet-x{width:44px;height:44px;}
  .tkasb .cell{min-height:56px;}
  .tkasb .advanced>summary{min-height:44px;display:flex;align-items:center;}
  .tkasb .walk-actions .btn{min-height:44px;}
  /* comfortable separation so enlarged neighbours cannot be mis-tapped */
  .tkasb .stepper{gap:10px;}
  .tkasb .quicks{gap:10px 16px;}
}
/* Hover must never be the only route to discover or explain a control. Where hover adds a
   preview, give coarse-pointer users the same affordance persistently instead. */
@media (hover: none){
  .tkasb .pick .ghost{opacity:.75;stroke-dasharray:4 3;}   /* ghost slots read as tappable */
  .tkasb .cell:hover{transform:none;box-shadow:none;}      /* no hover-only lift */
}
/* Info markers sit inside the flow of a label, so growing the visible mark to 44px would
   break that line box. Keep the 24px mark and grow only the HIT region, via a transparent
   border inside a border-box — total 44x44, painted circle still 24x24. */
.tkasb .info-tip>summary{box-sizing:border-box;width:44px;height:44px;
  border:10px solid transparent;background-clip:padding-box;}