/* ============================================================
   Torah Tech Lab: hub and lesson styles. torahtech.co/lab
   Load after shared.css and tt-brand.css.

   Every lesson is written as one complete page. The rules that
   show one step at a time all sit under html.lab-on, a class
   lab.js adds only after it has fully loaded. If the script
   fails, nothing here hides anything.
   ============================================================ */

/* Fallbacks sized to match the web fonts, so text doesn't rewrap when they load. */
@font-face { font-family: 'Lab Body Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 104.9%; }
@font-face { font-family: 'Lab Display Fallback'; src: local('Arial Bold'), local('Arial'); font-weight: 700; size-adjust: 100.8%; }

:root {
  --tt-font-body: 'Open Sans', 'Lab Body Fallback', Arial, sans-serif;
  --tt-font-display: 'Space Grotesk', 'Lab Display Fallback', system-ui, sans-serif;
  --lab-ink: #1d2940;
  --lab-right: #067a68;
  --lab-right-bg: #e4f8f4;
  --lab-wrong: #b3322b;
  --lab-wrong-bg: #fdeeec;
  --lab-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --lab-grid: linear-gradient(rgba(123,224,236,.09) 1px, transparent 1px),
              linear-gradient(90deg, rgba(123,224,236,.09) 1px, transparent 1px);
}

#shared-header { min-height: 66px; }
@media (min-width: 900px) { #shared-header { min-height: 71px; } }
body { margin: 0; background: var(--tt-surface-2); font-family: var(--tt-font-body); }

/* Graph paper over the house hero */
.lab-hero { padding: 40px 20px 76px; }
.lab-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--lab-grid);
  background-size: 28px 28px;
  pointer-events: none;
}
.lab-hero .tt-hero-inner { z-index: 1; }
.lab-hero-title {
  font-family: var(--tt-font-display);
  font-size: clamp(44px, 11vw, 84px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.02;
  margin: 16px 0 14px;
}
.lab-hero h1.lab-hero-title { font-size: clamp(44px, 11vw, 84px); letter-spacing: -2px; line-height: 1.02; margin: 16px 0 14px; }
.lab-lesson-hero { padding: 26px 20px 28px; }
.lab-lesson-hero h1 { font-size: clamp(26px, 6vw, 42px); font-weight: 700; letter-spacing: -.8px; margin: 12px 0 10px; }
.lab-lesson-hero .tt-hero-lede { font-size: 15.5px; line-height: 1.5; }
.lab-lesson-hero .lab-hero-meta { margin-top: 12px; font-size: 13px; gap: 4px 14px; }
.lab-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--tt-ice);
}

/* ── Hub ─────────────────────────────────────────────────── */
.lab-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px 56px; }
.lab-cats {
  position: relative;
  z-index: 2;
  margin-top: -44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lab-cat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow-card);
  color: var(--lab-ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.lab-cat:hover { transform: translateY(-4px); box-shadow: var(--tt-shadow-lift); border-color: var(--tt-blue-light); }
.lab-cat:active { transform: translateY(-1px); }
.lab-cat:focus-visible { outline: 3px solid var(--tt-navy); outline-offset: 3px; }
.lab-cat-icon { color: var(--tt-navy); margin-bottom: 4px; }
.lab-cat-name { font-family: var(--tt-font-display); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--tt-navy); }
.lab-cat-line { font-size: 13.5px; line-height: 1.35; color: var(--tt-ink-soft); }
.lab-cat-count { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--tt-ink-muted); }
.lab-cat[aria-current="true"] { background: var(--tt-grad-deep); border-color: transparent; }
.lab-cat[aria-current="true"] .lab-cat-icon,
.lab-cat[aria-current="true"] .lab-cat-count { color: var(--tt-ice); }
.lab-cat[aria-current="true"] .lab-cat-name { color: #fff; }
.lab-cat[aria-current="true"] .lab-cat-line { color: rgba(255,255,255,.9); }

.lab-panels { margin-top: 26px; scroll-margin-top: calc(var(--lab-header, 66px) + 10px); }
.lab-panel { padding: 8px 0 26px; scroll-margin-top: calc(var(--lab-header, 66px) + 10px); }
.lab-panel .tt-h2 { margin-bottom: 6px; }
.lab-panel .tt-h2:focus { outline: none; }
.lab-panel-lede { margin: 0 0 16px; max-width: 680px; color: var(--tt-ink-soft); font-size: 16px; line-height: 1.55; }
html.lab-hub-on .lab-panel { display: none; }
html.lab-hub-on .lab-panel.is-active { display: block; animation: labIn .2s ease; }

.lab-news {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--tt-line-strong);
}
.lab-news h2 {
  font-family: var(--tt-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tt-navy);
  margin: 0 0 12px;
}
.lab-news ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lab-news a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-sm);
  color: var(--tt-ink-soft);
  text-decoration: none;
  line-height: 1.45;
  font-size: 14.5px;
  transition: border-color .18s ease, transform .18s ease;
}
.lab-news a:hover { border-color: var(--tt-blue-light); transform: translateY(-2px); }
.lab-news a:active { transform: none; background: var(--tt-surface-2); }
.lab-news b { display: block; color: var(--tt-navy); font-family: var(--tt-font-display); font-weight: 600; }

.lab-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lab-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow-card);
  color: var(--lab-ink);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lab-card:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow-lift); border-color: var(--tt-blue-light); }
.lab-card:active { transform: translateY(-2px); }
.lab-card:focus-visible, .lab-news a:focus-visible { outline: 3px solid var(--tt-navy); outline-offset: 3px; }
.lab-card h3 {
  font-family: var(--tt-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.25;
  color: var(--tt-navy);
  margin: 0;
}
.lab-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tt-ink-soft); }
.lab-card-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-ink-muted);
}
.lab-card-status { color: var(--lab-right); animation: labIn .3s ease; }

.lab-soon { list-style: none; margin: 8px 0 0; padding: 0; columns: 1; }
.lab-soon li {
  break-inside: avoid;
  padding: 9px 0 9px 22px;
  position: relative;
  border-bottom: 1px solid var(--tt-line);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tt-ink-soft);
}
.lab-soon li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--tt-line-strong);
}
.lab-soon-label {
  margin: 18px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tt-ink-muted);
}

/* ── Lesson: one complete page by default ────────────────── */
.lab-bench { max-width: 680px; margin: 0 auto; padding: 8px 14px 36px; }
.lab-steps { list-style: none; margin: 0; padding: 0; }
.lab-step {
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow-card);
  padding: 18px 17px;
  margin-bottom: 18px;
  color: var(--lab-ink);
  font-size: 16px;
  line-height: 1.56;
}
.lab-step h2 {
  font-family: var(--tt-font-display);
  font-size: clamp(23px, 5.4vw, 29px);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
  color: var(--tt-navy);
  margin: 6px 0 10px;
}
.lab-step h2:focus { outline: none; }
.lab-step h3 {
  font-family: var(--tt-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--tt-navy);
  margin: 18px 0 6px;
}
.lab-step p { margin: 0 0 10px; }
.lab-step ul, .lab-step ol { margin: 0 0 12px; padding-left: 22px; }
.lab-step li { margin-bottom: 5px; }
.lab-step a { color: var(--tt-navy); text-underline-offset: 2px; }
.lab-step a:hover { color: #0b2d78; }
.lab-step code { font-family: var(--lab-mono); font-size: .9em; background: var(--tt-surface-2); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.lab-src { font-size: 13px; white-space: nowrap; color: var(--tt-ink-muted) !important; }
.lab-tag {
  display: inline-block;
  font-family: var(--tt-font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tt-navy);
  background: #e8effb;
  border-radius: var(--tt-pill);
  padding: 4px 11px;
}
.lab-tag.is-now { background: #dcf7fa; color: #06525c; }
.lab-tag.is-try { background: var(--tt-navy); color: #fff; }
.lab-tag.is-make { background: #0C2350; color: var(--tt-ice); }
.lab-dated { font-size: 13.5px; color: var(--tt-ink-muted); margin: -4px 0 12px; }
.lab-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tt-ink-soft);
  border-left: 3px solid var(--tt-blue-light);
  padding: 2px 0 2px 12px;
  margin: 12px 0;
}
.lab-fig { margin: 16px 0; }
.lab-fig svg { display: block; width: 100%; height: auto; }
.lab-fig figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--tt-ink-soft); }

.lab-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.lab-table th { font-family: var(--tt-font-display); font-size: 13px; color: var(--tt-navy); text-align: right; padding: 6px 8px; border-bottom: 2px solid var(--tt-line-strong); }
.lab-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--tt-line); }
.lab-table th:first-child, .lab-table td:first-child { text-align: left; padding-left: 0; }
.lab-code {
  margin: 10px 0 14px;
  padding: 12px 14px;
  max-width: 100%;
  overflow-x: auto;
  background: var(--tt-hero-navy);
  color: #eaf3ff;
  border-radius: 10px;
  font: 13px/1.5 var(--lab-mono);
  tab-size: 4;
}
.lab-code:focus-visible { outline: 3px solid var(--tt-navy); outline-offset: 2px; }

/* Tap-to-pay chain experiment and the path list */
.lab-path { list-style: none; margin: 8px 0 12px !important; padding: 0 !important; }
.lab-path li { position: relative; margin: 0; padding: 7px 12px; background: var(--tt-surface-2); border: 1px solid var(--tt-line); border-radius: 10px; font-size: 15px; line-height: 1.4; }
.lab-path li + li { margin-top: 14px; }
.lab-path li + li::before { content: ''; position: absolute; left: 20px; top: -15px; width: 2px; height: 14px; background: var(--tt-blue); }
.lab-seg-label { margin: 10px 0 6px !important; font-weight: 600; font-size: 14px; color: var(--tt-ice); }
.lab-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-tryit .lab-seg button { min-height: 42px; padding: 8px 14px; font-size: 14px; background: transparent; color: #eaf3ff; border: 1px solid rgba(123,224,236,.55); }
.lab-tryit .lab-seg button[aria-pressed="true"] { background: var(--tt-cyan); color: #06243a; border-color: var(--tt-cyan); }
.lab-chain { margin-top: 14px; }
.lab-chain-head { font-weight: 600; margin: 0 0 10px !important; }
.lab-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.12); }
.lab-bar span { display: block; transition: width .25s ease; }
.lab-bar .is-issuer { background: var(--tt-cyan); }
.lab-bar .is-network { background: #fff; }
.lab-bar .is-left { background: var(--tt-blue); }
.lab-chain-rows { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; }
.lab-chain-rows dt { font-weight: 700; margin-top: 8px; padding-left: 18px; position: relative; }
.lab-chain-rows dt::before { content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 3px; background: var(--tt-cyan); }
.lab-chain-rows dt.is-network::before { background: #fff; }
.lab-chain-rows dt.is-left::before { background: var(--tt-blue); }
.lab-chain-rows dd { margin: 1px 0 0 18px; color: #cfe3fa; }
.lab-chain-rows dd b { color: #fff; font-family: var(--lab-mono); }
.lab-chain-note { margin: 10px 0 0 !important; font-size: 13.5px; color: #cfe3fa; }

/* Shutdown results experiment */
.lab-bars { margin: 10px 0; display: grid; gap: 7px; }
.lab-barrow { display: grid; grid-template-columns: 1fr 66px; gap: 2px 8px; align-items: center; font-size: 13.5px; }
.lab-barname { grid-column: 1 / -1; color: #eaf3ff; }
.lab-bartrack { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.lab-barfill { display: block; height: 100%; border-radius: 5px; background: var(--tt-cyan); transition: width .25s ease; }
.lab-barval { font-family: var(--lab-mono); font-size: 12.5px; color: #fff; text-align: right; white-space: nowrap; }

/* Open the code without a script too: details works natively. */
.lab-codebox { margin: 0 0 12px; }
.lab-codebox summary { cursor: pointer; font-weight: 700; color: var(--tt-navy); padding: 8px 0; min-height: 28px; }
.lab-codebox summary:hover { color: #0b2d78; }

/* Questions. Without the script each option and its explanation just read as text. */
.lab-q {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--tt-radius-sm);
  background: #f2f6fd;
  border: 1px solid #dbe6f7;
}
.lab-q-text { font-family: var(--tt-font-display); font-weight: 600; font-size: 17.5px; line-height: 1.35; color: var(--tt-navy); margin: 0 0 12px !important; }
.lab-opts { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 9px; }
.lab-opts li { margin: 0; }
.lab-reveal { margin: 10px 0 0 !important; font-size: 15px; }
.lab-why { display: block; font-size: 14.5px; color: var(--tt-ink-soft); margin-top: 2px; }
.lab-opts li[data-right] .lab-opt-text { font-weight: 700; }
.lab-opt {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 40px 12px 15px;
  position: relative;
  background: #fff;
  border: 2px solid var(--tt-line-strong);
  border-radius: var(--tt-radius-sm);
  color: var(--lab-ink);
  font: 500 16px/1.4 var(--tt-font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.lab-opt:hover:not([disabled]) { border-color: var(--tt-blue); background: #f8fbff; transform: translateY(-1px); }
.lab-opt:active:not([disabled]) { transform: translateY(0); background: #eef4fd; }
.lab-opt:focus-visible { outline: 3px solid var(--tt-navy); outline-offset: 2px; }
.lab-opt[disabled] { cursor: default; color: var(--tt-ink-muted); }
.lab-opt::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 17px; }
.lab-opt.is-right { border-color: var(--lab-right); background: var(--lab-right-bg); color: #03493f; }
.lab-opt.is-right::after { content: '\2713'; color: var(--lab-right); }
.lab-opt.is-wrong { border-color: var(--lab-wrong); background: var(--lab-wrong-bg); color: #7c1d18; }
.lab-opt.is-wrong::after { content: '\2717'; color: var(--lab-wrong); }
.lab-feedback { margin-top: 12px; font-size: 15.5px; line-height: 1.55; animation: labIn .22s ease; }
.lab-feedback:empty { display: none; }
.lab-feedback p { margin: 0 0 8px; }
.lab-feedback b { font-family: var(--tt-font-display); }
.lab-feedback.is-right b { color: var(--lab-right); }
.lab-feedback.is-wrong b { color: var(--lab-wrong); }
.lab-retry {
  padding: 9px 18px;
  min-height: 42px;
  background: #fff;
  border: 2px solid var(--tt-navy);
  border-radius: var(--tt-pill);
  color: var(--tt-navy);
  font: 700 14.5px var(--tt-font-display);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lab-retry:hover { background: var(--tt-navy); color: #fff; }
.lab-retry:active { background: #0b2d78; color: #fff; }
.lab-retry:focus-visible { outline: 3px solid var(--tt-navy); outline-offset: 2px; }

/* Try it */
.lab-tryit {
  margin: 16px 0 4px;
  padding: 16px;
  border-radius: var(--tt-radius-sm);
  background: var(--tt-hero-navy);
  background-image: var(--lab-grid);
  background-size: 22px 22px;
  color: #eaf3ff;
  font-size: 15.5px;
  line-height: 1.5;
}
.lab-tryit label { display: block; font-weight: 600; font-size: 14px; color: var(--tt-ice); margin: 0 0 6px; }
.lab-tryit input, .lab-tryit textarea, .lab-tryit select {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(123,224,236,.45);
  background: #0e2452;
  color: #fff;
  font: 16px/1.4 var(--lab-mono);
}
.lab-tryit input:focus-visible, .lab-tryit textarea:focus-visible, .lab-tryit select:focus-visible { outline: 3px solid var(--tt-cyan); outline-offset: 1px; }
.lab-tryit button {
  min-height: 46px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--tt-pill);
  background: var(--tt-cyan);
  color: #06243a;
  font: 700 15px var(--tt-font-display);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lab-tryit button:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,200,220,.32); }
.lab-tryit button:active:not([disabled]) { transform: translateY(0); background: var(--tt-ice); }
.lab-tryit button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lab-tryit button[disabled] { opacity: .55; cursor: default; }
.lab-tryit button.is-quiet { background: transparent; color: var(--tt-ice); border: 1px solid rgba(123,224,236,.55); }
.lab-readout {
  font-family: var(--lab-mono);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  background: rgba(0,0,0,.28);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
}
.lab-readout b { color: var(--tt-ice); font-weight: 600; }
.lab-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.lab-tryit-fallback { margin: 0; color: #eaf3ff; }
html.lab-on .lab-tryit-fallback { display: none; }

/* Project */
.lab-project-facts { display: grid; gap: 10px; margin: 12px 0 14px; padding: 0; list-style: none !important; }
.lab-project-facts li { margin: 0; padding: 11px 14px; background: var(--tt-surface-2); border-radius: 10px; font-size: 15.5px; line-height: 1.5; }
.lab-project-facts b { display: block; font-family: var(--tt-font-display); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tt-navy); }

/* Finish */
.lab-next-card {
  display: block;
  margin: 14px 0;
  padding: 16px 18px;
  border-radius: var(--tt-radius-sm);
  background: var(--tt-grad-deep);
  color: #fff !important;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lab-next-card:hover { transform: translateY(-3px); box-shadow: var(--tt-shadow-lift); }
.lab-next-card:active { transform: translateY(-1px); }
.lab-next-card:focus-visible { outline: 3px solid var(--tt-navy); outline-offset: 3px; }
.lab-next-card span { display: block; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tt-ice); }
.lab-next-card b { font-family: var(--tt-font-display); font-size: 19px; line-height: 1.3; }
.lab-sources { margin-top: 16px; font-size: 14.5px; line-height: 1.5; border-top: 1px solid var(--tt-line); padding-top: 10px; }
.lab-sources summary { cursor: pointer; font-weight: 700; color: var(--tt-navy); padding: 6px 0; }
.lab-sources summary:hover { color: #0b2d78; }
.lab-sources ol { margin-top: 8px; }
.lab-checked { margin-top: 12px; font-size: 13.5px; color: var(--tt-ink-muted); }
.lab-noadvice { font-size: 14px; color: var(--tt-ink-soft); background: var(--tt-surface-2); border-radius: 10px; padding: 10px 13px; margin: 12px 0 0; }

/* ── Controls lab.js adds ────────────────────────────────── */
.lab-meter { position: sticky; top: var(--lab-header, 64px); z-index: 20; background: var(--tt-surface-2); padding: 10px 0 8px; margin-bottom: 4px; }
.lab-progress { display: flex; gap: 3px; }
.lab-progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--tt-line-strong); transition: background .25s ease; }
.lab-progress span.is-done { background: var(--tt-navy); }
.lab-progress span.is-now { background: var(--tt-cyan); box-shadow: 0 0 8px rgba(0,200,220,.65); }
.lab-count { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font: 600 13px var(--tt-font-display); color: var(--tt-ink-muted); }
.lab-restart { background: none; border: 0; padding: 4px 0 4px 8px; font: inherit; color: var(--tt-navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lab-restart:hover { color: #0b2d78; }
.lab-restart:focus-visible { outline: 2px solid var(--tt-navy); outline-offset: 2px; }
.lab-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.lab-back, .lab-next {
  min-height: 50px;
  border-radius: var(--tt-pill);
  font: 700 16px var(--tt-font-display);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, color .15s ease;
}
.lab-back { padding: 0 22px; background: transparent; border: 2px solid var(--tt-line-strong); color: var(--tt-navy); }
.lab-back:hover { border-color: var(--tt-navy); background: #fff; }
.lab-back:active { background: var(--tt-line); }
.lab-next { padding: 0 34px; margin-left: auto; border: 0; background: var(--tt-cyan); color: #06243a; box-shadow: 0 8px 22px rgba(0,200,220,.34); }
.lab-next:hover { transform: translateY(-2px); box-shadow: var(--tt-shadow-cyan); }
.lab-next:active { transform: translateY(0); background: var(--tt-ice); }
.lab-next[aria-disabled="true"] { background: var(--tt-line); color: var(--tt-ink-muted); box-shadow: none; transform: none; cursor: not-allowed; }
.lab-next.is-ready { animation: labReady .5s ease; }
.lab-back:focus-visible, .lab-next:focus-visible { outline: 3px solid var(--tt-navy); outline-offset: 3px; }
.lab-hint { min-height: 20px; margin: 8px 0 0; text-align: right; font-size: 14px; font-weight: 600; color: var(--lab-wrong); }

@keyframes labIn { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes labReady { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Keeps the first screen from jumping while lab.js loads. An inline script in each lesson's head sets this class and
   always clears it within 2.5 seconds, and lab.js clears it sooner. With scripts off the class never exists. */
html.lab-pending .lab-step:not(:first-child),
html.lab-pending .lab-q,
html.lab-pending .lab-band-end { display: none; }
html.lab-pending .lab-steps { margin-top: 53px; }

/* ── One step at a time, only once lab.js has loaded ─────── */
html.lab-on .lab-step { display: none; margin-bottom: 0; }
html.lab-on .lab-step.is-current { display: block; animation: labIn .24s ease; }
html.lab-on .lab-step:not(.is-asking) .lab-q { display: none; }
html.lab-on .lab-step.is-asking > *:not(.lab-q) { display: none; }
html.lab-on .lab-step.is-asking .lab-q { margin-top: 0; }
html.lab-on .lab-q-text:focus { outline: none; }
html.lab-on .lab-band-end { display: none; }
html.lab-on.lab-at-end .lab-band-end { display: block; }
html.lab-on.lab-past-first .lab-lesson-hero { padding: 16px 20px 18px; }
html.lab-on.lab-past-first .lab-lesson-hero .tt-eyebrow,
html.lab-on.lab-past-first .lab-lesson-hero .tt-hero-lede,
html.lab-on.lab-past-first .lab-lesson-hero .lab-hero-meta { display: none; }
html.lab-on.lab-past-first .lab-lesson-hero h1 { font-size: 17px; font-weight: 600; letter-spacing: 0; margin: 0; }
/* The floating WhatsApp button would sit on top of Next on a phone. */
@media (max-width: 700px) { html.lab-on .wa-widget { display: none; } }

/* ── Larger screens ──────────────────────────────────────── */
@media (min-width: 640px) {
  .lab-lesson-hero { padding: 44px 24px 48px; }
  .lab-soon { columns: 2; column-gap: 28px; }
  .lab-cats { gap: 12px; }
  .lab-cat { padding: 16px 18px; }
  .lab-news ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-step { padding: 32px 34px; }
  .lab-bench { padding-top: 28px; }
}
/* Eight tiles: two rows of four, or four rows of two. Three across would strand two on the last row. */
@media (min-width: 760px) {
  .lab-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .lab-news ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .lab-cat, .lab-card, .lab-opt, .lab-back, .lab-next, .lab-next-card, .lab-tryit button { transition: none; }
  .lab-cat:hover, .lab-card:hover, .lab-next:hover, .lab-next-card:hover, .lab-opt:hover:not([disabled]), .lab-tryit button:hover:not([disabled]) { transform: none; }
  html.lab-hub-on .lab-panel.is-active, html.lab-on .lab-step.is-current, .lab-feedback, .lab-next.is-ready, .lab-card-status { animation: none; }
}

@media print {
  html.lab-on .lab-step { display: block; }
  .lab-meter, .lab-nav, .lab-hint, .lab-tryit { display: none; }
}