/*
 * lab.css - the Lab view of the site (wave 7, unit W2).
 *
 * Colours: only var(--...) tokens the site already declares in the :root
 * blocks of its style.css; not one colour literal here (a test reads this
 * file). Every class starts with .lab- so nothing here can restyle a screen
 * of the site. The only rules without the prefix sit under .lab-local: the
 * copy of the site's tab bar and masthead that local.html carries, which the
 * site never loads with this class on its body.
 *
 * Motion (decided on 12 October, canvas note "motion"): cards rise in
 * cascade on entry, bars fill, the gesture card breathes, pills pulse when
 * chosen, cards lift on hover, primary buttons carry the site's golden halo
 * (--neon-*) on hover, numbers count up (lab.js), the seal is the signature
 * moment. Everything stops under prefers-reduced-motion, at the end of this
 * file. Keyframes are named lab-* so they never replace the site's own
 * view-in or laboStamp: same curves, own names.
 */

/* --- the view --------------------------------------------------------- */

.lab [hidden] { display: none !important; }

/* In the site, .view is a grid whose implicit column takes the width of its
   content: the Lab's column may shrink to the screen (unit W7, seen by W6 on
   a phone), and every box of the view may be narrower than its content. */
.lab.view { grid-template-columns: minmax(0, 1fr); }

.lab {
  min-width: 0;
  max-width: 100%;
}

.lab {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

.lab *,
.lab *::before,
.lab *::after { box-sizing: border-box; }

.lab h1,
.lab h2,
.lab h3,
.lab p { margin: 0; }

.lab a { color: var(--accent-text); text-decoration: none; }
.lab a:hover { color: var(--text); }

.lab :focus-visible {
  outline: 2px solid var(--ring-accent-strong);
  outline-offset: 2px;
}

.lab h1[tabindex="-1"]:focus,
.lab h2[tabindex="-1"]:focus { outline: none; }

.lab button,
.lab input,
.lab select,
.lab textarea { font: inherit; color: inherit; }

.lab-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lab-shell {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: .875rem .875rem 0;
  min-height: calc(100vh - 9rem);
}

/* --- the rail: Protocol, Research, Proof ------------------------------- */

.lab-rail {
  flex: 1 1 200px;
  max-width: 236px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel) 0 0 var(--radius-panel);
  background: var(--glass-panel);
  font-size: .9375rem;
}

.lab-rail-group {
  padding: 16px 10px 4px;
  color: var(--text-muted);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lab-rail-group:first-child { padding-top: 6px; }

.lab-rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-soft);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.lab .lab-rail-link { color: var(--text-soft); }

.lab .lab-rail-link:hover {
  background: var(--glass-row);
  color: var(--text);
  transform: translateX(2px);
}

.lab .lab-rail-link[aria-current="page"] {
  border-color: var(--accent);
  background: var(--bg-raised);
  color: var(--text);
}

.lab-rail-link svg { flex: none; }

.lab-rail-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--wash-warn);
  color: var(--warn-text);
  font-size: .75rem;
}

.lab-rail-level {
  margin-top: auto;
  padding: 16px 10px 0;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.lab-rail-level-name {
  display: block;
  color: var(--accent-text);
}

.lab-main {
  flex: 999 1 560px;
  min-width: 0;
  padding: 26px 30px 40px;
  border: 1px solid var(--glass-border);
  border-left: 0;
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  background: var(--bg-sunken);
}

.lab-screen,
.lab-view-root { min-width: 0; }

/* --- building blocks --------------------------------------------------- */

.lab-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lab-top,
.lab-title-row,
.lab-section-head,
.lab-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.lab-title-row { align-items: flex-end; }
.lab-section-head { align-items: baseline; }

.lab-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: .8125rem;
}

.lab .lab-crumb a { color: var(--text-muted); }
.lab .lab-crumb a:hover { color: var(--text); }

.lab-hashchip {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .75rem;
}

.lab-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
}

.lab-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
}

.lab-chip-sm { padding: 2px 9px; }

.lab-mono { font-family: var(--font-mono); }
.lab-small { font-size: .8125rem; }
.lab-muted { color: var(--text-muted); }
.lab-soft { color: var(--text-soft); }
.lab-strong { color: var(--text); font-weight: 600; }
.lab-accent-ink { color: var(--accent-text); }
.lab-up-ink { color: var(--up); }
.lab-warn-ink { color: var(--warn-text); }
.lab-read { line-height: 1.6; }
.lab-grow { flex: 1 1 auto; }

.lab-eyebrow {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lab-display {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.5px;
}

.lab-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.5px;
}

.lab-h2 { font-size: 1.125rem; font-weight: 700; }

.lab-lead { color: var(--text-soft); font-size: 1rem; }
.lab-sub { margin-top: 4px; max-width: 62rem; }
.lab-hint { color: var(--text-muted); font-size: .84375rem; }

.lab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background: var(--glass-panel);
  color: var(--text);
}

.lab-panel-pad { gap: 14px; padding: 26px 28px; }
.lab-panel-mid { padding: 20px 24px; }
.lab-panel-sm { gap: 9px; padding: 18px 20px; font-size: .875rem; }

.lab-raised {
  border-color: var(--border);
  background: var(--bg-raised);
}

.lab-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.lab-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}

.lab-split-main {
  flex: 999 1 520px;
  min-width: 0;
}

.lab-split-side {
  flex: 1 1 260px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lab-stack { display: flex; flex-direction: column; gap: 10px; }
.lab-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.lab-stack-lg { display: flex; flex-direction: column; gap: 18px; }

.lab-rows { display: flex; flex-direction: column; gap: 9px; }

.lab-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .9375rem;
}

.lab-row > :last-child { text-align: right; }

.lab-panel-sm .lab-row { font-size: .875rem; }

.lab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.lab-actions-ruled {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.lab-link-small { font-size: .84375rem; }

.lab-footer-note {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8125rem;
}

/* --- badges ------------------------------------------------------------- */

.lab-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--wash-accent);
  color: var(--accent-text);
  font-size: .8125rem;
}

.lab-badge-up { background: var(--wash-up); color: var(--up); }
.lab-badge-warn { background: var(--wash-warn); color: var(--warn-text); }
.lab-badge-accent { background: var(--wash-accent); color: var(--accent-text); }

.lab-status {
  padding: 1px 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-text);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lab-status-weakened { border-color: var(--warn); color: var(--warn-text); }
.lab-status-draft { border-color: var(--border-strong); color: var(--text-soft); }
.lab-status-invalidated,
.lab-status-abandoned { border-color: var(--border-strong); color: var(--text-muted); }

/* --- buttons: the site's .jeu-btn shapes, the planche's pills ----------- */

.lab .lab-btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.lab .lab-btn-primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: var(--on-accent);
  box-shadow: 0 8px 20px var(--shadow-accent);
}

/* The site's golden halo (style.css .neon, decision of Erwann 2026-08-21):
   never at rest, only under hover or press, a shadow and never an ink. */
.lab .lab-btn-primary:hover,
.lab .lab-btn-primary:focus-visible {
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--shadow-accent),
              0 0 0 1px var(--neon-mid),
              0 0 0 2px var(--neon-rim),
              0 0 14px 2px var(--neon-mid),
              0 0 30px 6px var(--neon-soft);
}

.lab .lab-btn-primary:active { transform: translateY(1px); }

.lab .lab-btn-primary:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.lab .lab-btn-outline {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
}

.lab .lab-btn-outline:hover {
  transform: translateY(-1px);
  border-color: var(--text-soft);
  background: var(--glass-row);
  color: var(--text);
}

.lab .lab-btn-sm {
  min-height: 44px;
  padding: 8px 16px;
  font-size: .90625rem;
}

.lab .lab-btn-icon { min-width: 52px; padding: 12px 16px; }

/* --- cards that lift --------------------------------------------------- */

.lab-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.lab a.lab-card { color: var(--text); }

.lab .lab-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 30px var(--bg-sunken);
  color: var(--text);
}

/* --- gauges ------------------------------------------------------------- */

.lab-gauges { display: flex; flex-direction: column; gap: 14px; }

.lab-gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 28px;
}

.lab-gauge-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .9375rem;
}

.lab-track {
  height: 6px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--glass-track);
  overflow: hidden;
}

.lab-fill {
  width: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
}

.lab-fill-grad { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }
.lab-fill-warn { background: var(--warn); }

.lab-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .84375rem;
}

/* --- tiles and big figures --------------------------------------------- */

.lab-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.lab-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-raised);
  color: var(--text);
}

.lab-figure {
  margin-top: 4px;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.5px;
}

.lab-figure-code { font-size: 1.625rem; letter-spacing: 0; }
.lab-figure-sm { font-size: 1.375rem; font-weight: 700; line-height: 1.3; }

/* --- theses touched today ---------------------------------------------- */

.lab-thesis-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
}

.lab-thesis-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.lab-thesis-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lab-grid-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-soft);
  font-size: .78125rem;
}

.lab-grid-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.lab-ico-met { color: var(--up); }
.lab-unmet { color: var(--text-muted); border-style: dashed; }
.lab-unmet .lab-ico-met { display: none; }

/* --- the gesture of the moment ----------------------------------------- */

.lab-now { border-color: var(--accent); }

.lab-later {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .875rem;
}

/* --- day one ------------------------------------------------------------ */

.lab-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.lab-day1-step {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .18s ease, transform .18s ease;
}

.lab .lab-day1-step { color: var(--text-soft); }

.lab .lab-day1-step:hover {
  background: var(--glass-row);
  color: var(--text);
  transform: translateX(3px);
}

.lab-step-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: .8125rem;
}

.lab-step-check { display: none; color: var(--up); }
.lab-step-text { flex: 1 1 auto; min-width: 0; }
.lab-step-arrow { display: none; flex: none; }

.lab-step-done .lab-step-mark { border-color: transparent; background: var(--wash-up); }
.lab-step-done .lab-step-check { display: block; }
.lab-step-done .lab-step-n { display: none; }
.lab-step-done .lab-step-title { text-decoration: line-through; }

.lab .lab-step-next .lab-day1-step {
  border-color: var(--accent);
  background: var(--wash-accent);
  color: var(--text);
}

.lab-step-next .lab-step-mark {
  border: 2px solid var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}

.lab-step-next .lab-step-title { font-weight: 600; }
.lab-step-next .lab-step-arrow { display: block; }

/* --- the two rituals --------------------------------------------------- */

.lab-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .78125rem;
}

.lab-key {
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: .75rem;
}

.lab-saved { font-size: .8125rem; }

.lab-form,
.lab-steps-area,
.lab-markets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lab-market { gap: 14px; }
.lab-market .lab-step { display: flex; flex-direction: column; gap: 10px; }

.lab-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.lab-fieldset.lab-panel { padding: 20px 24px; border: 1px solid var(--glass-border); }

.lab-legend {
  float: left;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  color: var(--text-soft);
  font-size: .875rem;
}

.lab-legend + * { clear: both; }

.lab-q {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.4px;
}

.lab-step-eyebrow {
  color: var(--accent-text);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lab-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lab-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: .9375rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.lab-pill:hover { border-color: var(--accent); color: var(--text); }
.lab-pill:active { transform: scale(.95); }
.lab-pill:focus-within { outline: 2px solid var(--ring-accent-strong); outline-offset: 2px; }

.lab-pill input,
.lab-seg-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.lab-pill.lab-on {
  border-color: var(--accent);
  background: var(--wash-accent);
  color: var(--text);
}

.lab-pill-dashed { border-style: dashed; }
.lab-pill-sm { font-size: .84375rem; }

.lab-chip-market { cursor: default; padding-right: 6px; }

.lab .lab-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.lab .lab-chip-x:hover { background: var(--glass-row-hover); color: var(--text); }

.lab-add-market {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lab-seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.lab-seg-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  padding: 9px 18px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.lab-seg-item + .lab-seg-item { border-left: 1px solid var(--border); }
.lab-seg-item:hover { background: var(--glass-row); color: var(--text); }
.lab-seg-item:focus-within { outline: 2px solid var(--ring-accent-strong); outline-offset: -3px; }

.lab-seg-item.lab-on {
  background: var(--wash-accent);
  color: var(--text);
  font-weight: 600;
}

.lab-seg-lg .lab-seg-item { min-width: 52px; font-size: 1rem; }

.lab-scale-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--text-soft);
  font-size: .875rem;
}

.lab-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-soft);
  font-size: .875rem;
}

.lab-field-inline { display: inline-flex; }

.lab input[type="text"],
.lab select,
.lab textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
}

.lab textarea { resize: vertical; }

.lab input[type="text"]:focus,
.lab select:focus,
.lab textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring-accent);
  outline: none;
}

.lab-input-lg { font-size: 1.25rem; }

.lab-input-unit { display: flex; align-items: center; gap: 8px; }
.lab-unit { color: var(--text-soft); }

.lab .lab-select-sm { min-height: 40px; padding: 6px 10px; font-size: .875rem; }

.lab-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.lab-shot-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.lab-shot-form .lab-field { min-width: 140px; }

.lab-table-wrap { overflow-x: auto; }

.lab-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .90625rem;
}

.lab-table th {
  padding: 6px 8px;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}

.lab-table td {
  padding: 10px 8px;
  border-top: 1px solid var(--border);
}

.lab .lab-num { text-align: right; }

.lab-review { gap: 8px; color: var(--text-soft); font-size: .9375rem; }
.lab-review-block + .lab-review-block { padding-top: 8px; border-top: 1px solid var(--border); }

.lab-form-error {
  padding: 10px 14px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--wash-warn);
  color: var(--warn-text);
  font-size: .875rem;
}

/* The phone header and footer exist only in the one-question-per-screen
   mode; the desktop frame only outside it. lab.js sets .lab-is-phone. */
.lab-ritual:not(.lab-is-phone) .lab-phone-only { display: none !important; }
/* Unit N4: the slide of a screen (40px) stays inside the frame, so the page never
   scrolls sideways on a phone while it lands. clip, not hidden: the frame stays
   no scroll container, and the sticky footer keeps the page as its reference. */
.lab-is-phone { overflow-x: clip; }
.lab-is-phone .lab-desk-only { display: none !important; }
.lab-is-phone .lab-step:not(.lab-step-current) { display: none !important; }

.lab-is-phone .lab-market { display: contents; }

.lab-is-phone .lab-step,
.lab-is-phone .lab-step.lab-panel,
.lab-is-phone .lab-fieldset.lab-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 52vh;
  padding: 0;
  border: 0;
  background: none;
}

.lab-is-phone .lab-pills-stack { flex-direction: column; align-items: stretch; }
.lab-is-phone .lab-pills-stack .lab-pill { justify-content: center; min-height: 50px; font-size: 1rem; }
.lab-is-phone .lab-seg { display: flex; }
.lab-is-phone .lab-seg-item { flex: 1 1 0; min-height: 50px; font-size: 1.25rem; }
.lab-is-phone .lab-scale-row { flex-direction: column; align-items: stretch; }
.lab-is-phone input[type="text"],
.lab-is-phone select { min-height: 50px; font-size: 1.0625rem; }

.lab-phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lab .lab-phone-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--text-soft);
  font-size: .9375rem;
}

.lab .lab-phone-progress { height: 4px; margin-top: 0; border-radius: 2px; }
.lab-progress { height: 4px; transition: width .35s cubic-bezier(.2, .8, .2, 1); }

.lab-phone-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -18px;
  padding: 12px 18px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}

.lab-phone-foot .lab-btn { min-height: 52px; font-size: 1.0625rem; }

/* --- account rules ----------------------------------------------------- */

.lab-chart { display: block; max-width: 100%; height: auto; }
.lab-chart-grid line { stroke: var(--chart-grid); }
.lab-chart-axis text { fill: var(--chart-text); font-size: 12px; }
.lab-chart-line text { font-size: 12px; }
.lab-chart-line line { stroke-dasharray: 4 4; }
.lab-chart-line-hwm line { stroke: var(--text-soft); }
.lab-chart-line-hwm text { fill: var(--text-soft); }
.lab-chart-line-daily line { stroke: var(--warn); }
.lab-chart-line-daily text { fill: var(--warn-text); }
.lab-chart-line-floor line { stroke: var(--down); }
.lab-chart-line-floor text { fill: var(--down); }
.lab-chart-equity { stroke: var(--accent); stroke-width: 2.5; }

.lab-sim {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
}

.lab-sim-fields {
  flex: 1 1 260px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  min-width: 0;
}

.lab .lab-sim-field input[type="text"] { width: 110px; }
.lab-sim-stop { flex: 1 1 220px; min-width: 0; }
.lab-sim-out { flex: 1 1 240px; font-size: .9375rem; }

/* the account shown, when the notebook declares several (unit W7, A11) */
.lab-account-menu { margin-top: 10px; max-width: 360px; }

/* a button of the boards with no route behind it yet (unit W7, A5 and A8):
   greyed, with "soon", inert; never hidden */
.lab .lab-soon,
.lab .lab-soon:hover {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.lab-soon-tag {
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.lab-hash,
.lab-mono { overflow-wrap: anywhere; }
.lab-form-panel { margin-top: 0; }

/* --- trades, in three layers (wave 10, unit Z2) ------------------------
   No colour of gain or loss on a layer (decision Q5): a layer is
   documented (accent), written after the close (pale, counted apart) or
   not written (dashed). The result of a trade keeps the text's own ink. */

.lab-doc { gap: 16px; }

.lab-doc-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 36px;
}

.lab-doc-tier {
  display: flex;
  flex: 0 1 260px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lab-doc-shares { flex: 1 1 320px; min-width: 0; gap: 10px; }

.lab-trade-item {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 16px 20px;
}

.lab-trade-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.lab-status-plain { border-color: var(--border-strong); color: var(--text-soft); }

.lab-layer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .8125rem;
}

.lab-layer-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-soft);
}

.lab-layer-written {
  border-color: var(--accent);
  background: var(--wash-accent);
  color: var(--text);
}

.lab-layer-after { opacity: .55; border-style: dotted; }
.lab-layer-missing { border-style: dashed; color: var(--text-muted); }

.lab-layer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.lab-layer-card { gap: 12px; min-width: 0; }

.lab-layer-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lab-written-after { opacity: .55; }

.lab-layer-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.lab-written {
  color: var(--accent-text);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lab-written-after .lab-written,
.lab-written-waiting .lab-written { color: var(--text-muted); }

.lab-coherence {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.lab input[type="datetime-local"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  color-scheme: dark;
}

.lab input[type="datetime-local"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring-accent);
  outline: none;
}

.lab-is-phone .lab-layer-grid { grid-template-columns: minmax(0, 1fr); }

/* --- the desk and the public page (wave 12, unit N3) ------------------
   Survival first and large. No colour of gain or loss anywhere here: a
   state is a word with a neutral mark (the accent for a line reached, a
   dashed border for what cannot be computed). */

.lab-survival { gap: 16px; }

.lab-survival-account {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lab-survival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.lab-survival-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-raised);
  color: var(--text);
}

.lab-survival-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 10px;
}

.lab-survival-figure {
  margin-top: 4px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.5px;
  overflow-wrap: anywhere;
}

.lab-survival-reached { border-color: var(--accent); box-shadow: 0 0 0 1px var(--ring-accent); }
.lab-survival-near { border-color: var(--border-strong); }
.lab-survival-missing { border-style: dashed; }
.lab-survival-missing .lab-survival-figure { font-size: 1.375rem; }

.lab-state {
  flex: none;
  padding: 1px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: .75rem;
  letter-spacing: .04em;
}

.lab-state-reached,
.lab-state-at_limit,
.lab-state-over { border-color: var(--accent); color: var(--accent-text); }

.lab-state-missing,
.lab-state-incomplete,
.lab-state-undeclared,
.lab-state-no_limit { border-style: dashed; color: var(--text-muted); }

.lab-group,
.lab-budget-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.lab-position {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-row);
  color: var(--text);
}

.lab .lab-position { color: var(--text); }

.lab-desk-note {
  color: var(--text);
  font-family: var(--font-read);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* wave R (unit R3): the page as a visitor reads it, its texts from the catalogues */
.lab-proof-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-read);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.lab-proof-title { margin: 0; color: var(--text); font-size: 1.125rem; }
.lab-proof-text { margin: 0; }
.lab-proof-gap { margin-top: 8px; }

.lab-proof-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-soft);
}

.lab-proof-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.lab-undo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}

/* wave T (answer 13): the decisions written on a divergence candidate, a quiet
   list under it; a decision is a word, never a colour */
.lab-divergence-history {
  margin: 6px 0 0;
  padding-left: 20px;
  overflow-wrap: anywhere;
}

/* --- before the order and the mentor's reviews (wave 14, unit Q1) ----
   A warning quotes the student's rule: a quiet card with the accent on its
   edge, never a colour of gain or loss. The risk at the stop is a number in
   the ink of the text; "blocked" is a word on the accent's badge. The
   mentor's text reads in the reading font. */

.lab-preorder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 18px 24px;
  align-items: start;
}

.lab-preorder-warning {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--glass-row);
}

.lab-preorder-quote {
  color: var(--text);
  font-family: var(--font-read);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lab-preorder-risk {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-raised);
}

.lab-preorder-figure {
  color: var(--text);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.5px;
  overflow-wrap: anywhere;
}

.lab-preorder-figure.lab-muted { font-size: 1rem; font-weight: 400; letter-spacing: 0; }

.lab-preorder-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lab-preorder-check {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lab-comment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--glass-row);
}

.lab-comment-text {
  color: var(--text);
  font-family: var(--font-read);
  font-size: 1.0625rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lab-comment-request {
  max-height: 16rem;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-sunken);
  color: var(--text-soft);
  font-size: .8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .lab-preorder-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-preorder-figure { font-size: 1.875rem; }
}

/* --- the seal ---------------------------------------------------------- */

.lab-seal-page { max-width: 820px; }

.lab-seal {
  position: relative;
  min-height: 320px;
  border-color: var(--up);
}

.lab-seal-warn { border-color: var(--warn); }

.lab-splat {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--up);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.lab-seal-prev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lab-ink {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--up));
}

.lab-seal-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.lab-seal-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wash-up);
  color: var(--up);
}

.lab-seal-title { font-size: .9375rem; }

.lab-hash {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

.lab-seal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: auto;
}

.lab-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--up);
  border-radius: 10px;
  color: var(--up);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform-origin: center;
}

.lab-seal-warn .lab-stamp { border-color: var(--warn); color: var(--warn-text); }

.lab-code { font-size: 1.375rem; letter-spacing: .08em; }

.lab-seal-warn .lab-code-caption { color: var(--warn-text); }

.lab-seal-note {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
}

/* the sealed line in words (the reading itself, A7), and its companion */
.lab-seal-summary { color: var(--text); font-size: 1.0625rem; }
.lab-seal-companion { color: var(--text-muted); }

/* --- the one-time offer ------------------------------------------------ */

.lab-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 24px;
  border-top: 1px solid var(--glass-border);
  border-radius: 20px 20px 0 0;
  background: var(--bg-raised);
  box-shadow: 0 -10px 30px var(--scrim);
}

.lab-sheet-head { display: flex; align-items: center; gap: 12px; }

.lab-sheet-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: var(--on-accent);
}

.lab-sheet-actions { display: flex; gap: 10px; }

/* --- loading and errors ------------------------------------------------ */

.lab-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: .875rem;
}

.lab-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.lab-error-panel { padding: 26px 28px; max-width: 720px; }

/* --- motion ------------------------------------------------------------ */

@keyframes lab-view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes lab-bar-fill { from { width: 0; } }

@keyframes lab-breathe {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 8px var(--wash-accent); }
}

@keyframes lab-check-pop {
  0% { opacity: 0; transform: scale(.4); }
  70% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes lab-pill-pulse {
  0% { box-shadow: 0 0 0 0 var(--ring-accent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

@keyframes lab-slide-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes lab-slide-back {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: none; }
}

@keyframes lab-saved-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes lab-row-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes lab-trace { to { stroke-dashoffset: 0; } }

@keyframes lab-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes lab-sheet-rise {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes lab-pulse-dot {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

/* the seal, in its reading order (Seal.dc.html) */
@keyframes lab-prev-fade {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes lab-ink-draw {
  from { width: 0; opacity: .4; }
  to { width: 100%; opacity: 1; }
}

@keyframes lab-hash-type {
  from { width: 0; }
  to { width: 32ch; }
}

@keyframes lab-link-snap {
  0% { opacity: 0; transform: scale(0) rotate(-40deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes lab-stamp {
  0% { opacity: 0; transform: scale(1.3) rotate(-6deg); }
  60% { opacity: 1; transform: scale(.96) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes lab-ink-splat {
  0% { opacity: .8; transform: scale(.9); }
  60% { opacity: .45; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes lab-code-in {
  from { opacity: 0; letter-spacing: .6em; }
  to { opacity: 1; letter-spacing: .08em; }
}

.lab-rise { animation: lab-view-in .5s ease-out both; }
.lab-d1 { animation-delay: .06s; }
.lab-d2 { animation-delay: .12s; }
.lab-d3 { animation-delay: .18s; }
.lab-d4 { animation-delay: .24s; }
.lab-d5 { animation-delay: .3s; }
.lab-d6 { animation-delay: .36s; }
.lab-d7 { animation-delay: .42s; }
.lab-d8 { animation-delay: .48s; }

.lab-bar { animation: lab-bar-fill 1s cubic-bezier(.2, .8, .2, 1) .35s both; }
.lab-bar-d2 { animation-delay: .42s; }
.lab-bar-d3 { animation-delay: .49s; }
.lab-bar-d4 { animation-delay: .56s; }
.lab-bar-d5 { animation-delay: .63s; }
.lab-bar-d6 { animation-delay: .7s; }

.lab-now { animation: lab-view-in .5s ease-out both, lab-breathe 3.2s ease-in-out 1s infinite; }
.lab-check { animation: lab-check-pop .45s ease-out both; }
.lab-pulse { animation: lab-pill-pulse .4s ease-out; }
.lab-slide { animation: lab-slide-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.lab-slide-back { animation: lab-slide-back .32s cubic-bezier(.2, .8, .2, 1) both; }
.lab-saved-blink { animation: lab-saved-in .6s ease-out both; }
.lab-row-in { animation: lab-row-in .5s ease-out .3s both; }
.lab-trace { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: lab-trace 1.6s ease-out .3s both; }
.lab-dash { animation: lab-fade-in .8s ease-out .9s both; }
.lab-sheet { animation: lab-sheet-rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.lab-loading-dot { animation: lab-pulse-dot 1s ease-in-out infinite; }
.lab-layer-written { animation: lab-check-pop .45s ease-out both; }

.lab-seal-prev { animation: lab-prev-fade .4s ease-out .2s both; }
.lab-ink { animation: lab-ink-draw .55s cubic-bezier(.2, .8, .2, 1) both; }
.lab-hash { width: 0; animation: lab-hash-type 1s steps(32, end) .45s both; }
.lab-seal-link { animation: lab-link-snap .5s cubic-bezier(.3, 1.5, .5, 1) 1.35s both; }
.lab-stamp { animation: lab-stamp .5s ease-out 1.7s both; }
.lab-splat { animation: lab-ink-splat .7s ease-out 1.7s both; }
.lab-code,
.lab-code-caption { animation: lab-code-in .5s ease-out 2.1s both; }
.lab-seal-note { animation: lab-fade-in .5s ease-out 2.3s both; }
.lab-seal-summary,
.lab-seal-companion { animation: lab-fade-in .5s ease-out 1.9s both; }

.lab-seal-still .lab-hash { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .lab *,
  .lab *::before,
  .lab *::after,
  .lab-local .tabbar-item,
  .lab-local .tabbar-item svg {
    animation: none !important;
    transition: none !important;
  }

  .lab .lab-hash { width: auto; }
  .lab .lab-splat { opacity: 0; }
  .lab .lab-card:hover,
  .lab .lab-btn:hover,
  .lab .lab-rail-link:hover,
  .lab .lab-day1-step:hover { transform: none; }
}

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 767.98px) {
  .lab-shell { flex-direction: column; flex-wrap: nowrap; margin: .5rem .5rem 0; }

  .lab-rail {
    flex: none;
    flex-direction: row;
    align-items: center;
    max-width: none;
    padding: 6px;
    overflow-x: auto;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }

  .lab-rail-group,
  .lab-rail-level { display: none; }

  .lab-rail-link { flex: none; padding: 8px 12px; }

  .lab-main {
    min-width: 0;
    padding: 18px 16px 32px;
    border-left: 1px solid var(--glass-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  }

  .lab-panel-pad,
  .lab-panel-mid { padding: 18px 16px; }

  .lab-display { font-size: 1.875rem; }
  .lab-title { font-size: 1.75rem; }
  .lab-split-side { max-width: none; }
  .lab-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .lab-survival-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-survival-figure { font-size: 1.875rem; }

  /* the rituals take the whole screen, as on the phone planches */
  .lab-phone-ritual .lab-rail { display: none; }
  .lab-phone-ritual .lab-main { border-top: 1px solid var(--glass-border); border-radius: var(--radius-panel); }
}

/* --- local.html only: the copy of the site's bar and masthead ----------
   Copied from the site's style.css (.tabbar, .tabbar-item, .masthead,
   .notice, .topline, .age), with six columns: Lab sits after Home. The
   site keeps its own rules; these never apply there. */

body.lab-local {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--scene);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.6 var(--font-ui);
}

.lab-local .tabbar {
  position: sticky;
  top: 0;
  z-index: 62;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 9rem));
  justify-content: center;
  gap: .25rem;
  padding: calc(.3rem + env(safe-area-inset-top)) .625rem .3rem;
  border-bottom: 1px solid var(--glass-border);
  background: var(--bg-raised);
}

.lab-local .tabbar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  min-height: 3rem;
  padding: .25rem .25rem .35rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.lab-local .tabbar-item:hover { background: var(--glass-row); color: var(--text); }

.lab-local .tabbar-item svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: .2rem .8rem;
  border-radius: 999px;
  transition: transform .18s ease;
}

.lab-local .tabbar-item:active svg { transform: scale(.88); }

.lab-local .tabbar-item[aria-pressed="true"] { color: var(--accent-text); font-weight: 700; }

.lab-local .tabbar-item[aria-pressed="true"] svg {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: var(--on-accent);
  box-shadow: 0 4px 12px var(--shadow-accent);
}

.lab-local .masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: .875rem .875rem 0;
  padding: .625rem .9375rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background: var(--bg-raised);
}

.lab-local .notice { margin: 0; color: var(--text-muted); font-size: .75rem; }
.lab-local .spacer { flex: 1; }

.lab-local .topline {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0;
  font-size: .8125rem;
}

.lab-local .topline-label {
  color: var(--text-muted);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lab-local .price { font-family: var(--font-mono); }
.lab-local .age { color: var(--up); font-size: .8125rem; }

.lab-local #lang-toggle,
.lab-local #lab-demo-level {
  min-height: 2.25rem;
  padding: 4px 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text-soft);
  font: inherit;
  font-size: .8125rem;
}

.lab-local .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lab-local .lab-elsewhere {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background: var(--glass-panel);
  color: var(--text-soft);
}

@media (max-width: 767.98px) {
  .lab-local .tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: .25rem; padding-right: .25rem; }
  .lab-local .tabbar-item svg { padding: .2rem .4rem; }
  .lab-local .masthead { margin: .5rem .5rem 0; }
}

/* Unit G8 (Iris F2): a figure and its unit stay on one line ("100 %", "30 days left"). */
.lab-gauge-row [data-slot=value],
.lab-survival-figure,
.lab-survival-item > .lab-small { white-space: nowrap; }