/* Akbro anatomy figures. Every class starts with ak-anat-. Mount: <div data-ak-anatomy="multiwall"></div>
   The script wraps the figure in .ak-anat-track (tall) > .ak-anat-pin (sticky) > .ak-anat-card. */
[data-ak-anatomy] {
  --ak-anat-ground: #ecedea;
  --ak-anat-card: #f6f6f4;
  --ak-anat-ink: #121313;
  --ak-anat-muted: #4a4e4c;
  --ak-anat-accent: #f86200;
  --ak-anat-rule: rgba(18, 19, 19, 0.12);
  --ak-anat-head-h: var(--ak-head, 72px);
  /* galvanised steel */
  --ak-anat-steel-lt: #f2f3f1;
  --ak-anat-steel-dk: #858b89;
  --ak-anat-steel-line: #2e3231;
  --ak-anat-hollow: #4b504f;
  /* bronze multiwall */
  --ak-anat-bronze-lt: #d9ae80;
  --ak-anat-bronze-dk: #5a3a1c;
  --ak-anat-bronze-line: #3a2411;
  --ak-anat-cell: #4b2f16;
  --ak-anat-film: #ffffff;
  /* breather tape, seal, shadow */
  --ak-anat-breather: #f3f1ea;
  --ak-anat-breather-dot: #a39e8f;
  --ak-anat-breather-line: #8d8778;
  --ak-anat-rubber: #2d302f;
  --ak-anat-halo: #5f645f;
  display: block;
  max-width: 100%;
  container-type: inline-size;
}
@media (max-width: 900px) {
  [data-ak-anatomy] { --ak-anat-head-h: var(--ak-head, 64px); }
}
/* on /range/ the department bar (59 px) also sticks under the header: pin below it */
.ak-wrap:has(> [data-ak-rangenav]) [data-ak-anatomy] { --ak-anat-sub: 59px; }
[data-ak-anatomy] { --ak-anat-top: calc(var(--ak-anat-head-h) + var(--ak-anat-sub, 0px)); }
/* hold the sticky box's height before the script mounts */
[data-ak-anatomy="multiwall"]:empty { min-height: calc(100svh - var(--ak-anat-top)); background: var(--ak-anat-card); }

/* ---------- scroll track ---------- */
.ak-anat-track { position: relative; height: 330svh; }
.ak-anat-pin {
  position: sticky;
  top: var(--ak-anat-top);
  height: calc(100svh - var(--ak-anat-top));
  display: flex;
  align-items: center;
  padding: 14px 0;
  box-sizing: border-box;
}
.ak-anat-flat { height: auto; }
.ak-anat-flat .ak-anat-pin { position: static; height: auto; padding: 0; }
@media (max-width: 700px) {
  .ak-anat-track { height: 250svh; }
  .ak-anat-pin { padding: 8px 0; }
  .ak-anat-flat { height: auto; }
}

/* ---------- card ---------- */
.ak-anat-card {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ak-anat-card);
  color: var(--ak-anat-ink);
  box-shadow: 0 0 0 1px var(--ak-anat-rule);
  border-radius: 4px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ak-anat-card *, .ak-anat-card *::before, .ak-anat-card *::after { box-sizing: border-box; }
.ak-anat-flat .ak-anat-card { max-height: none; }

.ak-anat-head {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  font-size: 13px;
  line-height: 1.2;
}
.ak-anat-fig { color: var(--ak-anat-ink); font-weight: 600; white-space: nowrap; }
.ak-anat-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ak-anat-muted); }

.ak-anat-stage { position: relative; flex: 0 1 auto; width: 100%; min-height: 140px; aspect-ratio: 16 / 9; touch-action: pan-y; }
.ak-anat-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }

.ak-anat-foot {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 10px 32px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--ak-anat-rule);
}
.ak-anat-nav { min-width: 0; }
.ak-anat-steps { display: flex; gap: 6px; }
.ak-anat-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 6px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--ak-anat-ground);
  color: var(--ak-anat-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ak-anat-btn:hover { background: #e2e3df; }
.ak-anat-btn[aria-current="step"], .ak-anat-btn[aria-pressed="true"] { background: var(--ak-anat-ink); color: var(--ak-anat-card); }
.ak-anat-btn:focus-visible { outline: 2px solid var(--ak-anat-accent); outline-offset: 2px; }
.ak-anat-num { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ak-anat-muted); }
.ak-anat-btn[aria-current="step"] .ak-anat-num, .ak-anat-btn[aria-pressed="true"] .ak-anat-num { color: var(--ak-anat-accent); }
.ak-anat-lbl { overflow: hidden; text-overflow: ellipsis; }
.ak-anat-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ak-anat-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.ak-anat-flat .ak-anat-bar { display: none; }
.ak-anat-hint { margin: 8px 0 0; color: var(--ak-anat-muted); font-size: 12.5px; line-height: 1.4; }
.ak-anat-readout { margin: 0; min-height: calc(3 * 1.45em); color: var(--ak-anat-muted); font-size: 15px; line-height: 1.45; }
.ak-anat-lead { color: var(--ak-anat-ink); font-weight: 600; }

/* ---------- drawing ---------- */
.ak-anat-svg path { vector-effect: non-scaling-stroke; }
.ak-anat-ln { stroke-width: 0.75px; stroke-linecap: round; stroke-linejoin: round; }
.ak-anat-thin { stroke-width: 0.45px; }
.ak-anat-seam { stroke-width: 0.5px; stroke-linejoin: round; }
.ak-anat-rib { stroke-width: 0.5px; stroke-opacity: 0.32; }
.ak-anat-weld { stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; }
.ak-anat-weld-hi { stroke-width: 0.8px; stroke-linecap: round; stroke-linejoin: round; }
.ak-anat-sheen { stroke-width: 1.2px; stroke-opacity: 0.8; }
.ak-anat-print { font-family: inherit; font-weight: 700; }
.ak-anat-uvfill { fill: var(--ak-anat-accent); fill-opacity: 0.05; }
.ak-anat-drops path { fill: var(--ak-anat-accent); }
/* the lesson in view takes the orange */
.ak-anat-tape { stroke: var(--ak-anat-breather-line); stroke: color-mix(in srgb, var(--ak-anat-accent) calc(var(--ak-anat-tapew, 0) * 100%), var(--ak-anat-breather-line)); stroke-width: 0.9px; }
.ak-anat-hole { stroke: var(--ak-anat-steel-line); stroke: color-mix(in srgb, var(--ak-anat-accent) calc(var(--ak-anat-screww, 0) * 100%), var(--ak-anat-steel-line)); stroke-width: 1.1px; }

@container (max-width: 760px) {
  .ak-anat-foot { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px 14px; }
  .ak-anat-readout { min-height: calc(3 * 1.45em); }
  .ak-anat-hint { display: none; }
}
@container (max-width: 560px) {
  .ak-anat-stage { aspect-ratio: 1 / 1; }
  .ak-anat-head { height: 40px; padding: 0 14px; font-size: 12.5px; }
  .ak-anat-foot { padding: 10px 12px 12px; }
  .ak-anat-steps { gap: 4px; }
  .ak-anat-btn { height: 38px; gap: 4px; padding: 0 3px; font-size: 12.5px; }
  .ak-anat-readout { font-size: 14px; min-height: calc(4 * 1.45em); }
}
@container (max-width: 400px) {
  .ak-anat-num { display: none; }
  .ak-anat-btn { font-size: 12px; }
}
@container (max-width: 340px) {
  .ak-anat-readout { min-height: calc(5 * 1.45em); }
}
@media (prefers-reduced-motion: reduce) {
  .ak-anat-card * { transition: none !important; }
}