/* Learning labs, dimensional layer (tokens from assets/dimension.css).
 * Every lab gets a sculpture of its own subject (the emblem drawn by tools/lib/iso-art.mjs, in the lab's unit colour),
 * ceramic cards and keycap tabs around the work. The bench itself (the model, its controls, the games and every answer
 * area) is not touched: it stays flat and high-contrast. */
.lab-emblem,
.lab-card-icon {
  --tone-a-base: var(--accent);
}

/* ---- Lab page header ---- */
.lab-header {
  grid-template-columns: minmax(150px, 220px) 1fr;
  align-items: center;
}
.lab-emblem {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  padding: 6px;
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  background:
    radial-gradient(
      70% 80% at 50% 62%,
      color-mix(in srgb, var(--accent) 16%, var(--dm-card)),
      transparent 72%
    ),
    linear-gradient(180deg, var(--dm-card), var(--dm-paper));
  box-shadow: var(--dm-e2);
  font-size: 0;
}
.lab-emblem .iso {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 6px rgb(13 39 61 / 0.22));
}
.lab-header h1 {
  font-family: var(--dm-font-display);
  color: var(--dm-night);
}

/* ---- Step tabs: keycaps in a recessed tray ---- */
.tabs {
  gap: 6px;
  padding: 8px;
  background: color-mix(in srgb, var(--sky) 80%, #000);
  box-shadow: inset 0 2px 4px rgb(13 39 61 / 0.22);
}
.tabs button {
  border: 1px solid rgb(23 50 77 / 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--dm-card), #eef4f7);
  box-shadow:
    var(--dm-lit),
    0 3px 0 rgb(23 50 77 / 0.22);
  transition:
    transform 0.12s var(--dm-ease),
    box-shadow 0.12s var(--dm-ease);
}
.tabs button:hover {
  transform: translateY(-1px);
}
.tabs button[aria-selected="true"] {
  background: var(--dm-card);
  transform: translateY(2px);
  box-shadow:
    var(--dm-lit),
    0 1px 0 rgb(23 50 77 / 0.22),
    inset 0 -4px 0 var(--dm-brass);
}
.tab-step {
  box-shadow:
    var(--dm-lit),
    0 2px 0 rgb(23 50 77 / 0.25);
}

/* ---- Passport, toolbar and cards: ceramic ---- */
.toolbar,
.micro-hud {
  border-radius: var(--dm-radius);
  box-shadow: var(--dm-e1);
}
.lab-card {
  background: linear-gradient(180deg, var(--dm-card), var(--dm-paper));
  border-radius: var(--dm-radius);
  box-shadow: var(--dm-e1);
  transition:
    transform 0.22s var(--dm-ease),
    box-shadow 0.22s var(--dm-ease);
}
.lab-card:hover,
.lab-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--dm-e3);
}
.lab-card-icon {
  width: 128px;
  height: 86px;
  border: 1px solid var(--dm-line);
  border-radius: 14px;
  background:
    radial-gradient(
      70% 80% at 50% 62%,
      color-mix(in srgb, var(--accent) 16%, var(--dm-card)),
      transparent 72%
    ),
    linear-gradient(180deg, var(--dm-card), var(--dm-paper));
  box-shadow: var(--dm-e1);
  font-size: 0;
}
.lab-card-icon .iso {
  width: 100%;
  height: 100%;
  padding: 3px;
}
.lab-card .card-top {
  align-items: center;
  gap: 14px;
}

/* The card emblems are <use> instances of one sprite. A <use> shadow tree cannot see ancestors, so the lighting model of
   assets/dimension.css (lit top, body face, shaded face, derived from one --base) is repeated here without its .iso
   prefix. The faces are direct children of their solid, which keeps these selectors off everything else. */
.s {
  --base: var(--tone-a-base);
}
.s.b {
  --base: var(--tone-b-base);
}
.s.c {
  --base: var(--tone-c-base);
}
.s.d {
  --base: var(--tone-d-base);
}
.s.e {
  --base: var(--tone-e-base);
}
.s > .t {
  fill: color-mix(in srgb, var(--base) 56%, #fff);
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.s > .l {
  fill: var(--base);
  stroke: rgb(13 39 61 / 0.16);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.s > .r {
  fill: color-mix(in srgb, var(--base) 70%, var(--dm-night));
  stroke: rgb(13 39 61 / 0.2);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.s.flat {
  fill: var(--base);
}
.s > circle.t {
  stroke: none;
  fill: rgb(255 255 255 / 0.55);
}
.s > circle.l,
.s > circle.r {
  stroke: none;
}
polygon.shade {
  fill: var(--dm-night);
  fill-opacity: var(--o, 0.08);
}
.grid > polyline {
  fill: none;
  stroke: rgb(23 50 77 / 0.2);
  stroke-width: 0.45;
}
text.lab {
  fill: rgb(13 39 61 / 0.82);
  font-family: var(--dm-font-display);
  font-weight: 700;
}

@media (max-width: 900px) {
  .lab-header {
    grid-template-columns: minmax(120px, 160px) 1fr;
  }
}
@media (max-width: 600px) {
  .lab-header {
    grid-template-columns: 1fr;
  }
  .lab-emblem {
    width: min(100%, 220px);
    height: auto;
    font-size: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tabs button,
  .lab-card {
    transition: none;
  }
  .tabs button:hover,
  .lab-card:hover,
  .lab-card:focus-within {
    transform: none;
  }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .lab-emblem,
  .lab-card,
  .lab-card-icon,
  .tabs button,
  .toolbar,
  .micro-hud {
    box-shadow: none;
    border: 2px solid currentColor;
  }
}
@media print {
  .lab-emblem,
  .lab-card,
  .tabs button {
    box-shadow: none;
  }
}