/*
 * /product/quix-lab-tour/ (pages/product/quix-lab-tour.astro), this page only: the scroll
 * tour of a Quix Lab notebook (a demo for the team; remove with the page).
 *
 *   page        .qlt-fade--in / --out (the hero's black ↔ the canvas colour), .qlt (the tall
 *               #tour section) and its sticky .qlt-stage, .qlt-end (the closing heading over the plans),
 *               .qlt-video (the tutorial <dialog>s)
 *   text        .qlt-panel (right of the canvas on desktop, a bottom sheet on phones):
 *               .qlt-rail (chapter buttons), .qlt-ch (one article per chapter), .qlt-watch
 *   the mock    .qlt-app (aria-hidden): .qlt-canvas > .qlt-world (cells .qc, cables
 *               .qlt-cables) moved by js/quix-lab-tour.js; .qlt-chrome (the Quix Lab top
 *               bar .qtop, status bar, zoom widget); .qlt-scrim; .qlt-overlay (menus
 *               .qmenu, modals .qmodal, Explore .qex, the file chip, the cursor). Sizes are
 *               the real UI's CSS pixels (tokens from the marketing team's recreation,
 *               quixlab-powertrain-promo tools/kit.mjs), so a focused cell sits at 1-1.5x.
 *               No will-change on the world layer: Chrome would rasterise it once and blur
 *               the text when the camera zooms in.
 *
 * Without JS the section has no .is-live: the mock is hidden and the chapters read as a list.
 */

/* ── Page frame ──────────────────────────────────────────────────────────── */
.qlt-fade {
  height: 200px;
  background: linear-gradient(var(--fade-dir, to bottom),
    rgba(242, 242, 243, 0) 0%,
    rgba(242, 242, 243, 0.03) 10%,
    rgba(242, 242, 243, 0.16) 25%,
    rgba(242, 242, 243, 0.5) 50%,
    rgba(242, 242, 243, 0.84) 75%,
    rgba(242, 242, 243, 0.97) 90%,
    #F2F2F3 100%);
}
.qlt-fade--out { --fade-dir: to top; }

.qlt { position: relative; background: #F2F2F3; color: #18181B; }
.qlt-stage { position: relative; }

/* No JS: a plain list of the chapters */
.qlt:not(.is-live) .qlt-app { display: none; }
.qlt:not(.is-live) .qlt-panel { padding: 40px 24px 80px; }
.qlt:not(.is-live) .qlt-panel__in { max-width: 640px; margin: 0 auto; }
.qlt:not(.is-live) .qlt-rail { display: none; }
.qlt:not(.is-live) .qlt-chs { display: flex; flex-direction: column; gap: 64px; }

/* Live: the stage is pinned while the tall section scrolls past (height set by the script) */
.qlt.is-live { height: 1750vh; }
.qlt.is-live .qlt-stage {
  position: sticky;
  /* under the site-wide banner, which is pinned too (--announce-stick, css/nav.css) */
  top: var(--announce-stick, 0px);
  z-index: 102; /* above the site's fixed tram lines (css/layout.css, 101) */
  height: calc(100vh - var(--announce-stick, 0px));
  height: calc(100svh - var(--announce-stick, 0px));
  overflow: hidden;
}

/* ── The text panel ──────────────────────────────────────────────────────── */
/* Centred in the stage below the top bar; the text keeps the height of the longest chapter
   (js/quix-lab-tour.js), so the rail never moves */
.qlt.is-live .qlt-panel {
  position: absolute;
  top: 72px;
  bottom: 0;
  right: 0;
  width: 40%;
  z-index: 6;
  display: flex;
  align-items: center;
  align-items: safe center;
  padding: 6px 32px;
  pointer-events: none;
  /* a backstop: the text is never clipped, however short the screen (it scrolls; the
     padding keeps focus rings inside) */
  overflow: auto;
  scrollbar-width: none;
}
.qlt.is-live .qlt-panel::-webkit-scrollbar { display: none; }
.qlt-panel__in { width: 100%; max-width: 440px; margin: 0 auto; pointer-events: auto; }
.qlt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.qlt-rail { display: flex; flex-direction: column; gap: 2px; margin: 0 0 36px; }
.qlt-rail__b {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 26px;
  padding: 2px 0;
  color: #66666E;
  text-align: left;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.qlt-rail__b:hover { color: #000; }
.qlt-rail__b:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.qlt-rail__bar { position: relative; width: 32px; height: 2px; background: rgba(0, 0, 0, 0.14); flex: none; }
.qlt-rail__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #000; }
.qlt-rail__b.is-on { color: #000; }
.qlt-rail__b.is-on .qlt-rail__bar i { background: var(--orange); }
.qlt-rail__b.is-done { color: #3A3A3A; }
.qlt-rail__n { color: inherit; }
.qlt-rail__l { line-height: 1.3; }

.qlt-chs { display: grid; }
/* the chapters' slide (a few px) must not make the panel scrollable */
.qlt.is-live .qlt-chs { overflow: clip; overflow-clip-margin: 24px; }
.qlt-ch { grid-area: 1 / 1; min-width: 0; }
.qlt-ch__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  color: #3A3A3A;
  margin: 0 0 18px;
}
.qlt-ch__eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--orange); flex: none; }
/* Live, with the labelled rail beside it, the eyebrow would repeat the rail's active row:
   it is kept for screen readers only (and shown again where the rail is a segment bar) */
.qlt.is-live .qlt-ch__eyebrow { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qlt .qlt-ch__h {
  font: 500 clamp(30px, 2.8vw, 44px)/1.1 var(--font-sans);
  letter-spacing: -0.02em;
  color: #000;
  margin: 0 0 20px;
  text-wrap: balance;
}
.qlt .qlt-ch__h:focus { outline: none; }
.qlt .qlt-ch__h:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.qlt-ch__text { display: grid; }
.qlt-ch__body,
.qlt-ch__more { font: 400 17px/1.55 var(--font-sans); color: #2A2A2A; margin: 0 0 14px; text-wrap: pretty; }
.qlt-ch__more { color: #000; border-left: 2px solid var(--orange); padding-left: 14px; }
.qlt-watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  background: rgba(255, 255, 255, 0.55);
  color: #000;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  transition: border-color 0.2s, color 0.2s;
}
.qlt-watch:hover { border-color: var(--orange-dark); }
.qlt-watch:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.qlt-watch__icon { flex: none; }

/* Live: one chapter at a time. The outgoing one fades out and up (0.2 s), then the next
   comes in (visible at once, so focus can move to its heading, but transparent until the
   other has gone); its later lines come in as the tour reaches them, each taking the place
   of the one before (the body stays) */
.qlt.is-live .qlt-ch {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.qlt.is-live .qlt-ch.is-out { transform: translateY(-8px); }
.qlt.is-live .qlt-ch.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s ease 0.2s, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s, visibility 0s;
}
.qlt.is-live .qlt-ch__more {
  grid-area: 2 / 1;
  align-self: start;
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), max-height 0.5s ease, margin 0.5s ease;
}
.qlt.is-live .qlt-ch__more.is-on { max-height: 12em; margin-bottom: 14px; opacity: 1; transform: none; }
.qlt.is-live .qlt-ch__more.is-past { opacity: 0; transform: translateY(-6px); }
/* the script measures the tallest chapter with its lines in (js/quix-lab-tour.js layout) */
.qlt.is-measure .qlt-ch__more { max-height: none; margin-bottom: 14px; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .qlt.is-live .qlt-ch,
  .qlt.is-live .qlt-ch.is-on,
  .qlt.is-live .qlt-ch.is-out,
  .qlt.is-live .qlt-ch__more,
  .qlt.is-live .qlt-ch__more.is-past { transform: none; transition-duration: 0.01s; transition-delay: 0s; }
}

/* ── The mock: layers ────────────────────────────────────────────────────── */
.qlt-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #F2F2F3;
  font: 400 14px/1.3 var(--font-sans);
  color: #18181B;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}
.qlt-app svg { display: block; max-width: none; flex: none; }
.qlt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.qi { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qlt-canvas { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.qlt-world { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; }
.qlt-cables { position: absolute; left: 0; top: 0; overflow: visible; }
/* Cables are grey; the ones touching the selected cell are blue (as in the real UI) */
.qlt-cables path { fill: none; stroke: #B4B4BC; stroke-width: 2; stroke-linecap: round; }
.qlt-cables path.is-on { stroke: #3A9CC6; }
.qlt-cables path.qnote { stroke: #F08A24; stroke-dasharray: 5 4; stroke-linecap: butt; }
/* The text panel's backdrop: the canvas colour, so cells pass under the text and fade out
   just before it starts (the panel's text starts at 60 % + 32 px) */
.qlt-app::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, rgba(242, 242, 243, 0), rgba(242, 242, 243, 0.85) 11%, #F2F2F3 15%);
}
/* Bands of the canvas colour behind the top bar and the status bar: solid where the chrome
   sits, fading out toward the focus area, so cells passing under the chrome fade out instead
   of colliding with its text. They belong to the canvas, so the scrim greys them with it. */
.qlt-canvas::before,
.qlt-canvas::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none; }
.qlt-canvas::before { top: 0; height: 96px; background: linear-gradient(#F2F2F3 66%, rgba(242, 242, 243, 0)); }
.qlt-canvas::after { bottom: 0; height: 64px; background: linear-gradient(rgba(242, 242, 243, 0), #F2F2F3 47%); }
/* The chrome (top bar, status bar, zoom widget) stays above the scrim: a modal greys the
   canvas, never half of the top bar */
.qlt-chrome { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* The scrim greys the canvas only: it fades out where the text panel begins (desktop) */
.qlt-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(24, 24, 27, 0.2);
  opacity: 0;
  visibility: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 54%, transparent 64%);
  mask-image: linear-gradient(to right, #000 54%, transparent 64%);
}
.qlt-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.qlt-app .qmono { font-family: var(--font-mono); }
.qlt-app svg text { font-family: var(--font-mono); font-size: 10.5px; fill: #71717A; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.qtop { position: absolute; left: 24px; right: 24px; top: 18px; height: 50px; display: flex; align-items: center; justify-content: space-between; }
.qtop__left {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.qlogo {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(140deg, #8A4DF0 0%, #B23ACD 55%, #E0457F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qname { display: flex; flex-direction: column; line-height: 1; padding-right: 2px; }
.qname b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #18181B; }
.qname b span { background: linear-gradient(90deg, #A23CC8, #D6337F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qname small { font-size: 9.5px; font-weight: 500; letter-spacing: 0.17em; color: #71717A; margin-top: 3px; }
.qlive {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #BFE3C9;
  background: #EEF8F1;
  color: #2F7D46;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.qlive i { width: 7px; height: 7px; border-radius: 50%; background: #2F9E55; }
.qtop__file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 12px 0 16px;
  border-left: 1px solid #E4E4E7;
  font-size: 14px;
  color: #27272A;
}
.qtop__file .qi { color: #71717A; }
.qtop__ibs { display: flex; align-items: center; gap: 8px; }
.qtop__left .qib { width: 30px; height: 30px; border-radius: 7px; }
.qtop__add,
.qtop__run {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  font-size: 15px;
  color: #18181B;
  white-space: nowrap;
}
.qtop__add { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); font-weight: 600; }
.qtop__right { display: flex; align-items: center; gap: 8px; }
.qtop__right .qib { width: 44px; height: 44px; border: 1px solid #DCDCE0; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); color: #27272A; }
.qtop__right .qi { width: 21px; height: 21px; stroke-width: 1.9; }
.qtop__left .qib { border-color: #DCDCE0; color: #3F3F46; }
.qtop__left .qi { width: 18px; height: 18px; }
.qib.is-press { transform: scale(0.93); background: #F1F1F3; }
.qib--badge { position: relative; }
.qib--badge b {
  position: absolute;
  top: -8px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  border-radius: 10px;
  border: 2px solid #F2F2F3;
  background: #1F8A4C;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Status bar, coordinates, zoom widget */
.qbar { position: absolute; left: 16px; bottom: 12px; font-size: 12.5px; color: #8A8A92; white-space: nowrap; }
.qbar b { font-weight: 400; color: #3F3F46; }
.qbar .qbar__mem { color: #B7791F; }
.qbar i { font-style: normal; margin: 0 7px; color: #C4C4CA; }
.qcoords { position: absolute; right: 470px; bottom: 16px; font-size: 13px; color: #6B6B73; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the zoom pill runs under the round search button, as in the real UI */
.qzoom {
  position: absolute;
  right: 50px;
  bottom: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px 0 14px;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  font-size: 12px;
  color: #3F3F46;
}
.qzoom__z { display: flex; }
.qzoom__track { position: relative; width: 88px; height: 3px; border-radius: 2px; background: #D4D4D8; }
.qzoom__track i { position: absolute; top: -5px; left: 30%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #1769E0; }
.qzoom__pct { width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.qzoom__11 { font-size: 10px; font-weight: 700; }
.qzoom__sep { width: 1px; height: 22px; background: #E4E4E7; }
.qfab {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 7px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E4E4E7;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #27272A;
}

/* ── Shared controls ─────────────────────────────────────────────────────── */
.qib {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  color: #6B6B73;
}
.qib--play { color: #2E9B3E; }
.qib--on { color: #1769E0; border-color: #9CC0F5; background: #F3F7FE; }
.qib--ai { width: auto; padding: 0 9px; color: #1769E0; border-color: #BCD3F6; font-size: 12px; font-weight: 700; }
.qseg { display: inline-flex; flex: none; border: 1px solid #E4E4E7; border-radius: 8px; background: #fff; padding: 1px; }
.qseg i { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; color: #6B6B73; border-radius: 6px; }
.qseg i.on { background: #1769E0 linear-gradient(#1769E0, #1769E0); color: #fff; }
.qc__head .qseg i { width: 28px; height: 28px; }
.qc__head .qseg i.on { background: #EEF0F3; color: #3F3F46; }
.qbtn {
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
/* Solid fills on rounded boxes are painted as a one-colour gradient: under the camera's
   fractional scale Chrome drew a plain rounded fill with a light 1 px seam inside it (1x
   screens, ~1.5x zoom); a gradient fill is drawn without one */
.qbtn--purple { background: #7A2FE6 linear-gradient(#7A2FE6, #7A2FE6); }
.qbtn--blue { background: #1567D3 linear-gradient(#1567D3, #1567D3); }
.qbtn--ghost { background: #fff; color: #27272A; border: 1px solid #D4D4D8; font-weight: 500; }
.qbtn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.qbtn.is-press { transform: scale(0.93); filter: brightness(0.92); }
.qchk { position: relative; display: inline-block; width: 15px; height: 15px; flex: none; border: 1.5px solid #A1A1AA; border-radius: 4px; background: #fff; }
.qchk.on { background: #1769E0; border-color: #1769E0; }
.qchk.on::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.qcaret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em; background: #18181B; }
.qspin { color: #A1A1AA; }
.qpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  flex: none;
  padding: 0 7px;
  border: 1px solid #F2B6D4;
  border-radius: 6px;
  background: #fff;
  color: #9D1450;
  font-size: 11px;
  font-weight: 700;
}
.qpill--fix { color: #E0A82E; border-color: #F6E3AE; background: #FFFBEF; }
.qtag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 23px;
  flex: none;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  white-space: nowrap;
}
.qtag--folder { background: #F6A623 linear-gradient(#F6A623, #F6A623); color: #3A2400; }
.qtag--dec { background: #EEF5FC; color: #2571AC; }
.qtag--ai { background: #FCE4F1; color: #C2185B; }
.qtag--viz { background: #E4F4EA; color: #297C4E; }
.qtag--lake { background: #EEF4FC; color: #2571AC; }
.qtag--markup { background: #FFF0E3; color: #C2510C; }
.qtag--ds { background: #EEF0FB; color: #4B57C2; }
.qtag--measure { background: #E8F1FC; color: #2571AC; }

/* ── Cells ───────────────────────────────────────────────────────────────── */
.qc { position: absolute; opacity: 0; visibility: hidden; }
.qc__box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.qc--ai .qc__box { border-color: #F2B6D4; }
.qc.is-sel .qc__box { border-color: #1769E0; box-shadow: 0 0 0 1px #1769E0, 0 10px 28px rgba(23, 105, 224, 0.12); }
.qc.is-hot .qc__box { background: #F4F8FF; }
.qc__ring {
  position: absolute;
  inset: -2px;
  border: 2.5px solid #F5B800;
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.16), 0 0 26px rgba(245, 184, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.qc__grip { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, #E4E4E7 50%); }
.qc__head {
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid #EFEFF1;
  background: #fff;
}
.qc__name { font-size: 16px; font-weight: 500; color: #18181B; white-space: nowrap; }
.qc__sp { flex: 1; min-width: 4px; }
.qc__btns { display: flex; align-items: center; gap: 7px; }
.qc__head .qib { width: 34px; height: 34px; border-color: #D4D4D8; color: #52525B; }
.qc__head .qib--play { color: #2E9B3E; }
.qc__head .qib--on { border-color: #9CC0F5; color: #1769E0; }
.qc--folder .qc__btns { gap: 6px; }

/* Ports, on the selected cell only: the input (file icon) and the + output. The arrowhead
   shows where a cable lands: grey, blue when its cable is (it touches the selected cell) */
.qport {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #E4E4E7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  color: #52525B;
  opacity: 0;
}
.qc.is-sel .qport { opacity: 1; }
.qport--in { left: -49px; background: #FFF8EE; border-color: #F4D3A4; color: #E0892B; }
.qport--out { right: -49px; }
.qarrow {
  position: absolute;
  left: -14px;
  top: 50%;
  margin-top: -6px;
  border-left: 11px solid #B4B4BC;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  opacity: 0;
}
.qc.is-linked .qarrow { opacity: 1; }
.qc.is-in-on .qarrow { border-left-color: #3A9CC6; }

/* Folder */
.qselall { height: 36px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #EFEFF1; font-size: 13.5px; color: #52525B; }
.qfiles { flex: none; }
.qfile { height: 33px; display: none; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #F4F4F5; font-size: 14px; color: #27272A; }
.qfile.is-on { display: flex; }
.qfile__ico { color: #5B8DEF; }
.qfile--marker .qfile__ico { color: #A1A1AA; }
.qfile--marker .qfile__n { color: #52525B; }
.qfile__s { margin: 0 110px 0 auto; font-size: 11.5px; color: #71717A; }
.qup { display: none; grid-template-columns: 1fr auto; row-gap: 7px; padding: 10px 16px 9px; border-bottom: 1px solid #F0F0F2; }
.qup.is-on { display: grid; }
.qup__n { font-size: 13px; color: #27272A; }
.qup__p { font-size: 11px; color: #71717A; font-variant-numeric: tabular-nums; }
.qup__bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: #ECECEF; overflow: hidden; }
.qup__bar b { display: block; width: 0; height: 100%; background: #1769E0; }
.qdrop {
  flex: 1;
  margin: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #D4D4D8;
  border-radius: 10px;
  color: #71717A;
  font-size: 14px;
}
.qdrop.is-hot { border-color: #1769E0; background: rgba(23, 105, 224, 0.06); color: #1769E0; }
.qdrop.is-gone { display: none; }

/* Tables (decoder, dataset) */
.qvt { height: 48px; flex: none; display: flex; align-items: center; padding: 0 12px; background: #F0F0F1; border-bottom: 1px solid #E4E4E7; }
.qtw { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* as wide as its columns, so the header's fill and the row lines run the whole way when the
   decoder's close-up scrolls it sideways */
.qt { width: max-content; min-width: 100%; font: 400 13px/1 var(--font-mono); color: #27272A; white-space: nowrap; }
.qt__h,
.qt__r { display: flex; align-items: center; padding-left: 12px; }
.qt__h span,
.qt__r span { flex: none; padding-right: 10px; overflow: hidden; }
.qt__h { height: 34px; color: #52525B; font-weight: 500; background: #F4F4F5; border-bottom: 1px solid #E4E4E7; }
.qt__r { height: 28px; border-bottom: 1px solid #F4F4F5; opacity: 0; }
.qrunning { position: absolute; left: 16px; top: 48px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #71717A; }
.qhscroll { position: absolute; left: 8px; right: 22px; bottom: 5px; height: 7px; }
.qhscroll i { display: block; width: 32%; height: 100%; border-radius: 4px; background: #C7C7CC; }
.qvscroll { position: absolute; right: 6px; top: 38px; width: 6px; height: 34px; border-radius: 3px; background: #C7C7CC; }
.qfoot {
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid #EBEBEE;
  background: #F6F6F7;
  font-size: 12.5px;
  color: #6B6B73;
  font-variant-numeric: tabular-nums;
}
.qfoot__pg { display: inline-flex; align-items: center; gap: 9px; color: #6B6B73; }
.qfoot__pg > .qi { color: #A1A1AA; }
.qfoot__nx { display: inline-flex; padding: 3px 4px; border: 1px solid #D4D4D8; border-radius: 4px; color: #3F3F46; }
.qsum { height: 72px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-top: 1px solid #EBEBEE; background: #FCFCFD; }
.qsum__ico { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #EEF0FB; color: #6E7BD6; display: flex; align-items: center; justify-content: center; }
.qsum__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qsum__meta b { font-size: 15px; font-weight: 400; color: #18181B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsum__meta strong { font-weight: 700; }
.qsum__meta small { font-size: 13px; color: #71717A; white-space: nowrap; }

/* AI cells */
.qc--ai .qc__head { height: 58px; }
.qaibar {
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: #FDF2F8;
  border-bottom: 1px solid #F7D9E9;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}
.qaibar__lbl { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; color: #C2185B; font-weight: 700; letter-spacing: 0.08em; }
.qslider { position: relative; width: 52px; height: 6px; flex: none; border-radius: 3px; background: linear-gradient(90deg, #C2185B 50%, #F6C9DF 50%); }
.qslider i { position: absolute; left: 19px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: #C2185B; }
.qmed { color: #9D1450; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.qprompt { position: relative; flex: 1; min-height: 0; padding: 14px 16px; overflow: hidden; background: #fff; font: 400 14.5px/1.6 var(--font-mono); color: #18181B; }
.qprompt.is-sent { background: #EEEEEF; font-family: var(--font-sans); }
.qprompt__hint { position: absolute; left: 16px; bottom: 12px; font: 12.5px var(--font-sans); color: #8A8A92; }
.qc[data-cell="ai3"] .qprompt { flex: none; height: 82px; }
.qrunbar { position: relative; height: 4px; flex: none; margin: 0; overflow: hidden; background: #F7D6E6; opacity: 0; }
.qrunbar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, rgba(194, 24, 91, 0), #C2185B, rgba(194, 24, 91, 0)); }
.qstatus {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #FDF2F8;
  border-top: 1px solid #F7D9E9;
  font-size: 12.5px;
  color: #66666E;
  opacity: 0;
}
.qstatus__ico { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid #E4E4E7; border-radius: 6px; background: #fff; color: #A1A1AA; }
.qstatus__tag { padding: 2px 7px; border-radius: 5px; background: #FCE4F1; color: #C2185B; font-size: 11.5px; font-weight: 700; }
.qstatus__steps { margin-left: auto; padding: 2px 7px; border: 1px solid #F2B6D4; border-radius: 5px; background: #FCE4F1; color: #C2185B; font-size: 11.5px; font-weight: 700; opacity: 0; }
.qout { height: 72px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-top: 1px solid #F0E3EA; background: #fff; opacity: 0; }
.qout__ico { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #FCE4F1; color: #C2185B; display: flex; align-items: center; justify-content: center; }
.qout__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qout__meta b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qout__meta small { font-size: 13px; color: #71717A; }
.qsteps { flex: 1; min-height: 0; padding: 8px 16px; overflow: hidden; }
.qstep { height: 29px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #27272A; opacity: 0; white-space: nowrap; }
.qtick { width: 18px; height: 18px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #E4F4EA; color: #297C4E; }
.qstep--run { color: #71717A; }

/* Visualize */
.qvtool {
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-bottom: 1px solid #EFEFF1;
  font: 12px var(--font-mono);
  color: #71717A;
  white-space: nowrap;
}
.qvtool .qseg i { width: 27px; height: 25px; }
.qvtool__l { margin-left: 6px; }
.qsel {
  position: relative;
  min-width: 92px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 7px;
  border: 1px solid #D4D4D8;
  border-radius: 5px;
  background: #fff;
  color: #27272A;
}
.qsel.is-open { border-color: #1769E0; box-shadow: 0 0 0 2px rgba(23, 105, 224, 0.16); }
.qvtool__nav { display: inline-flex; align-items: center; gap: 10px; padding: 5px 8px; border: 1px solid #E4E4E7; border-radius: 6px; color: #52525B; }
.qchart { position: relative; flex: 1; min-height: 0; }
.qchart__svg { position: absolute; left: 12px; top: 4px; }
.qreadout { position: absolute; right: 14px; top: 8px; padding: 3px 7px; border: 1px solid #E4E4E7; border-radius: 5px; background: #fff; font: 11px var(--font-mono); color: #6B6B73; }
.qdd {
  position: absolute;
  left: -2px;
  top: 30px;
  z-index: 2;
  width: 150px;
  padding: 6px;
  border-radius: 8px;
  background: #6B6B70;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  font: 12px var(--font-sans);
  color: #fff;
  opacity: 0;
  visibility: hidden;
}
.qdd span { position: relative; display: flex; align-items: center; height: 22px; padding: 0 8px 0 22px; border-radius: 4px; }
.qdd span .qi { position: absolute; left: 6px; top: 5px; }
.qdd span.is-hi { background: #1769E0; }
.qmini { height: 32px; flex: none; margin: 0 12px; border: 2px solid #1769E0; border-radius: 4px; overflow: hidden; background: #fff; }
.qlegend { height: 28px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px; font-size: 11.5px; color: #52525B; }
.qlegend b { display: inline-block; width: 12px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }

/* Save to Lakehouse */
.qlk { flex: 1; min-height: 0; font: 12.5px var(--font-mono); color: #27272A; }
.qlk__h,
.qlk__r { display: grid; grid-template-columns: 88px 78px 92px 1fr; align-items: center; padding: 0 16px; }
.qlk__h { height: 34px; background: #F6F6F7; border-bottom: 1px solid #EBEBEE; color: #52525B; font-weight: 500; }
.qlk__r { height: 31px; display: none; border-bottom: 1px solid #F4F4F5; }
.qlk__r.is-on { display: grid; }
.qsaved { font-style: normal; padding: 2px 9px; border-radius: 999px; background: #E4F4EA; color: #297C4E; font: 600 11px var(--font-sans); }

/* Markup report */
.qmd { flex: 1; min-height: 0; padding: 20px 24px; overflow: hidden; background: #F8F8F9; }
.qmd__h { margin-bottom: 16px; font-size: 21px; font-weight: 700; line-height: 1.3; color: #18181B; opacity: 0; }
.qmd__li { position: relative; margin-bottom: 11px; padding-left: 18px; font-size: 15.5px; line-height: 1.5; color: #27272A; opacity: 0; }
.qmd__li::before { content: ''; position: absolute; left: 4px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #27272A; }

/* ── Menus ───────────────────────────────────────────────────────────────── */
.qmenu {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 14.5px;
  color: #27272A;
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
}
.qmenu--rel { width: 264px; }
.qmenu--add { width: 372px; font-size: 14px; }
.qmenu__i { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; border-radius: 7px; white-space: nowrap; }
.qmenu--add .qmenu__i { height: 31px; }
.qmenu__i .qi { color: #52525B; flex: none; }
.qmenu__i.is-hi { background: #EEEEF0; }
.qmenu__l { display: inline-flex; align-items: center; gap: 10px; }
.qmenu--rel .qmenu__l { flex: 1; }
.qmenu--rel .qalpha { margin-left: auto; }
.qmenu__r { margin-left: auto; font-size: 12.5px; color: #71717A; }
.qmenu__sep { height: 1px; margin: 6px; background: #E4E4E7; }
.qalpha {
  padding: 2px 5px;
  border: 1px solid #F3DA94;
  border-radius: 4px;
  background: #FFF6DA;
  color: #D29C1A;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.qmodal {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  color: #27272A;
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
}
.qmodal--run { width: 700px; }
.qmodal--nd { width: 920px; height: 580px; display: flex; flex-direction: column; }
/* fill modals take the modal area's height (js/quix-lab-tour.js layout) */
.qmodal--fill { display: flex; flex-direction: column; }
.qmodal--fill .qmodal__body { flex: 1; min-height: 0; }
.qmodal__head { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid #EBEBEE; font-size: 16px; font-weight: 600; color: #18181B; }
.qmodal__head .qi { color: #3F3F46; }
.qmodal__body { padding: 14px 20px 8px; overflow: hidden; }
/* A body too tall for the screen shows part of itself (js/quix-lab-tour.js layout): it fades
   at its edges (CROP_FADE in the script), so a line cut there reads as scrolled content */
.qmodal__body.is-cropped {
  -webkit-mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.qmodal__acts { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid #F0F0F2; }

/* Uploads folder (tutorial 1, 0:12) */
.qmodal--ud { width: 534px; border-radius: 10px; }
.qmodal__title { padding: 18px 20px 0; font-size: 16px; font-weight: 600; color: #18181B; }
.qmodal--ud .qmodal__body { padding: 12px 20px 16px; }
.qmodal--ud .qhint--ud { display: block; margin: 0 0 9px; font-size: 14px; line-height: 1.25; color: #6B6B73; }
.qmodal--ud .qfield--ud { height: 34px; padding: 0 11px; border: 2px solid #1769E0; border-radius: 5px; box-shadow: none; background: #fff; font: 14px var(--font-sans); }
.qselt { background: #B4D5FE; color: #18181B; }
.qmodal__band { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; background: #F4F4F5; border-top: 1px solid #E4E4E7; }
.qmodal__band .qbtn { height: 32px; font-size: 14px; }

/* Execution queue */
.qmodal--eq { width: 760px; }
.qmodal--eq .qmodal__body { padding: 14px 20px 0; }
.qeq__chips { display: flex; gap: 10px; margin-bottom: 18px; }
.qeq__chips span { padding: 4px 11px; border: 1px solid #D4D4D8; border-radius: 999px; font-size: 13.5px; color: #52525B; }
.qeq__chips b { font-weight: 600; color: #18181B; }
.qeq__th,
.qeq__tr { display: grid; grid-template-columns: 168px 76px 160px 86px 1fr; align-items: center; padding: 0 8px; }
.qeq__th { height: 28px; border-bottom: 1px solid #E4E4E7; font-size: 12.5px; color: #52525B; }
.qeq__tr { height: 38px; border-bottom: 1px solid #F0F0F2; font-size: 13px; color: #3F3F46; white-space: nowrap; }
.qeq__tr b { font-size: 14px; font-weight: 600; color: #18181B; }
.qeq__tr span:last-child { font-size: 12px; color: #6B6B73; }
.qeq__tr.is-hi { background: #F1F1F3; box-shadow: inset 3px 0 0 #1769E0; }
.qhint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; font-size: 12px; line-height: 1.45; color: #71717A; }
.qhint .qi { color: #A1A1AA; }
.qhint--lead { display: block; margin: 0 0 8px; font-size: 13px; color: #52525B; }
.qinput { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 13px; color: #71717A; }
.qinput b { color: #27272A; }
.qlab { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: #18181B; }
.qfield {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  border: 1px solid #D4D4D8;
  border-radius: 7px;
  background: #F7F7F8;
  font: 14px var(--font-mono);
  color: #18181B;
  white-space: nowrap;
}
.qfield--focus { border-color: #1769E0; box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.15); background: #fff; }
.qfield--sel { font-family: var(--font-sans); }
.qfield--ph { color: #A1A1AA; }
.qfield.is-off { opacity: 0.45; }
.qcarat { position: absolute; right: 12px; top: 50%; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #71717A; }
.qradios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qradio { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #E4E4E7; border-radius: 9px; }
.qradio b { display: block; font-size: 13.5px; font-weight: 500; color: #18181B; }
.qradio small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: #71717A; }
.qradio.is-on { border-color: #1769E0; box-shadow: 0 0 0 1px #1769E0; background: #F3F7FE; }
.qdot { display: inline-block; width: 14px; height: 14px; flex: none; margin-top: 2px; border: 1.5px solid #A1A1AA; border-radius: 50%; background: #fff; }
.qradio.is-on .qdot,
.qdot.on { border: 4.5px solid #1769E0; }
.qopts { display: flex; gap: 16px; font-size: 13.5px; }
.qopts span { display: inline-flex; align-items: center; gap: 6px; }
.qopts .qdot { margin-top: 0; }
.qcheck { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 500; }
.qhive { min-height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px dashed #D4D4D8; border-radius: 7px; font: 13px var(--font-mono); color: #A1A1AA; }
.qhive.is-set { border-style: solid; color: #18181B; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qchip2 { padding: 3px 9px; border: 1px solid #D4D4D8; border-radius: 999px; font: 12px var(--font-mono); color: #27272A; }
.qchip2.is-on { border-color: #1769E0; background: #1769E0; color: #fff; }

/* Run of mf4_decoder */
.qrun__top { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.qrun__top b { font-size: 16px; }
.qrun__top small { margin-left: -6px; color: #71717A; }
.qok { padding: 2px 9px; border-radius: 999px; background: #E4F4EA; color: #297C4E; font-size: 12px; font-style: normal; font-weight: 600; }
.qrun__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qrun__grid div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qrun__grid small { margin-top: 4px; font-size: 11.5px; color: #71717A; }
.qrun__grid b,
.qrun__grid span { font-size: 13px; }
.qrun__grid b { font-weight: 600; color: #18181B; overflow-wrap: anywhere; }
.qrun__grid--out { grid-template-columns: 1.3fr 0.7fr 0.7fr 1.3fr; }
.qrun__h { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: #18181B; }
.qrun__th,
.qrun__tr { display: grid; grid-template-columns: 116px 104px 52px 1fr 56px; align-items: center; gap: 8px; }
.qrun__th { padding-bottom: 6px; border-bottom: 1px solid #EBEBEE; font-size: 11.5px; color: #71717A; }
.qrun__tr { padding: 8px 0; border-bottom: 1px solid #EBEBEE; font-size: 13px; }
.qrun__from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #71717A; }
.qrun__view { height: 28px; margin-top: 14px; display: flex; align-items: center; justify-content: center; border: 1px solid #D4D4D8; border-radius: 6px; background: #F7F7F8; font-size: 12.5px; }

/* New Dataset */
.qnd__head { height: 60px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #EBEBEE; white-space: nowrap; }
.qnd__head > b { margin-right: 2px; font-size: 16px; font-weight: 600; }
.qnd__head .qfield { width: 190px; height: 30px; overflow: hidden; font-size: 11.5px; }
.qnd__head .qbtn { height: 30px; padding: 0 12px; font-size: 13px; }
.qnd__head > .qi { color: #3F3F46; }
.qtabs { display: inline-flex; overflow: hidden; border: 1px solid #D4D4D8; border-radius: 6px; font-size: 12.5px; }
.qtabs span { padding: 5px 10px; color: #3F3F46; }
.qtabs span.on { background: #1567D3; color: #fff; }
.qnd__body { flex: 1; min-height: 0; display: flex; }
.qnd__side { width: 310px; flex: none; padding: 10px 12px; overflow: hidden; border-right: 1px solid #EBEBEE; }
.qnd__sh { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11.5px; letter-spacing: 0.1em; color: #52525B; }
.qnd__sh .qib { width: 26px; height: 26px; }
.qnd__sh .qfield { width: 104px; height: 26px; font-size: 11.5px; }
.qnd__t { display: flex; align-items: center; gap: 8px; height: 33px; padding: 0 8px; border-radius: 6px; font-size: 13.5px; color: #27272A; }
.qnd__t .qi { color: #C8962C; }
.qnd__t small { margin-left: auto; font-size: 12px; color: #71717A; white-space: nowrap; }
.qnd__t.is-hi { background: #EEF4FE; box-shadow: inset 0 0 0 1px #BCD3F6; }
.qgreen { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: #2F9E55; vertical-align: 1px; }
.qnd__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qnd__prompt { height: 40%; flex: none; padding: 14px 16px; border-left: 3px solid #C2185B; background: #F4F4F5; font-size: 15px; color: #18181B; }
.qnd__bar { height: 52px; flex: none; display: flex; align-items: center; padding: 0 12px; border-top: 1px solid #EBEBEE; border-bottom: 1px solid #EBEBEE; }
.qpill--sql { height: 28px; padding: 0 12px; background: #FDF2F8; }
.qnd__main .qhint { padding: 6px 12px; }

/* Narrow modals (phones, small screens: js/quix-lab-tour.js layout): the same dialog near
   its real size, without the hint lines, its columns stacked */
.qmodal.is-narrow .qhint,
.qmodal.is-narrow .qinput,
.qmodal.is-narrow .qradio small { display: none; }
.qmodal.is-narrow .qhint--ud { display: block; }
.qmodal.is-narrow .qradios { grid-template-columns: 1fr; gap: 6px; }
.qmodal.is-narrow .qrun__grid { grid-template-columns: 1fr 1fr; }
/* the run's timing, narrow: the pod, how long it ran and when it finished (not Submitted,
   Waited, Run id, Started), so its inputs and output fit */
.qmodal--run.is-narrow .qrun__grid:not(.qrun__grid--out) > :nth-child(n+3),
.qmodal--run.is-narrow .qrun__grid:not(.qrun__grid--out) > :nth-child(2) > :nth-child(-n+2) { display: none; }
.qmodal.is-narrow .qrun__th,
.qmodal.is-narrow .qrun__tr { grid-template-columns: 1fr 1fr 52px; }
.qmodal.is-narrow .qrun__th > :nth-child(n+4),
.qmodal.is-narrow .qrun__tr > :nth-child(n+4) { display: none; }
.qmodal.is-narrow .qeq__chips { flex-wrap: wrap; gap: 6px; }
.qmodal.is-narrow .qeq__th,
.qmodal.is-narrow .qeq__tr { grid-template-columns: 1fr 50px 1fr; }
.qmodal.is-narrow .qeq__th > :nth-child(n+4),
.qmodal.is-narrow .qeq__tr > :nth-child(n+4) { display: none; }
/* New Dataset, narrow: the Tables list (its first few) above the prompt */
.qmodal--nd.is-narrow .qnd__body { flex-direction: column; }
.qmodal--nd.is-narrow .qnd__side { width: auto; padding: 8px 12px 6px; border-right: 0; border-bottom: 1px solid #EBEBEE; }
.qmodal--nd.is-narrow .qnd__sh { margin-bottom: 4px; }
.qmodal--nd.is-narrow .qnd__sh > :not(span:first-child),
.qmodal--nd.is-narrow .qnd__t:nth-child(n+6) { display: none; }
.qmodal--nd.is-narrow .qnd__main { flex: 1; min-height: 0; }
.qmodal--nd.is-narrow .qnd__prompt { height: auto; flex: 1 1 auto; min-height: 76px; }
.qmodal--nd.is-narrow .qnd__head .qfield,
.qmodal--nd.is-narrow .qnd__head .qpill,
.qmodal--nd.is-narrow .qnd__head .qbtn--ghost { display: none; }
.qmodal--nd.is-narrow .qnd__head { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
.qmodal--nd.is-narrow .qnd__head > b { flex: 1 0 70%; }
.qmodal--nd.is-narrow .qnd__head .qtabs { order: 3; }
.qmodal--nd.is-narrow .qnd__head .qc__sp { order: 4; }
.qmodal--nd.is-narrow .qnd__head .qbtn--blue { order: 5; }

/* ── Explore ─────────────────────────────────────────────────────────────── */
.qex {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
}
.qex__top { height: 46px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #EBEBEE; }
.qex__top b { font-size: 15px; font-weight: 600; }
.qex__top > i { font-style: normal; color: #71717A; }
.qex__top .qib { width: 28px; height: 28px; }
.qex__time { padding: 4px 8px; border: 1px solid #D4D4D8; border-radius: 6px; font: 12.5px var(--font-mono); }
.qex__body { flex: 1; min-height: 0; display: flex; }
.qex__side { width: 224px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-right: 1px solid #EBEBEE; font-size: 13px; }
.qex__tabs { display: inline-flex; align-self: flex-start; overflow: hidden; border: 1px solid #D4D4D8; border-radius: 6px; font: 11px var(--font-mono); letter-spacing: 0.08em; }
.qex__tabs span { padding: 5px 10px; color: #52525B; }
.qex__tabs span.on { background: #F1F1F3; color: #18181B; }
.qex__side .qfield { height: 30px; gap: 6px; background: #fff; font: 12.5px var(--font-sans); }
.qex__tree { display: flex; flex-direction: column; gap: 2px; }
.qex__n { display: flex; align-items: center; gap: 7px; height: 26px; white-space: nowrap; color: #27272A; }
.qex__n .qi { flex: none; color: #C8962C; }
.qex__n i { padding: 1px 6px; border-radius: 4px; background: #F1F1F3; font-size: 10.5px; font-style: normal; color: #71717A; }
.qex__n--2 { padding-left: 14px; }
.qex__n--3 { padding-left: 28px; }
.qex__n--4 { padding-left: 42px; }
.qsw { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 2px; }
.qex__foot { margin-top: auto; padding-top: 8px; border-top: 1px solid #EBEBEE; font-size: 11.5px; color: #71717A; }
.qex__foot b { font-weight: 500; color: #27272A; font-variant-numeric: tabular-nums; }
.qex__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; background: #FAFAFB; }
.qex__tool { flex: none; display: flex; align-items: center; gap: 10px; color: #52525B; }
.qtb { height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #D4D4D8; border-radius: 6px; background: #fff; font: 11px var(--font-mono); letter-spacing: 0.04em; color: #52525B; white-space: nowrap; }
.qtb.on { border-color: #9CC0F5; background: #E8F1FC; color: #1769E0; }
.qex__win { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E4E7; border-radius: 8px; }
.qex__wh { height: 40px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; overflow: hidden; border-bottom: 1px solid #F0F0F2; font: 11px var(--font-mono); color: #71717A; white-space: nowrap; }
.qex__sig { height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #E4E4E7; border-radius: 6px; font: 12.5px var(--font-sans); color: #18181B; }
.qex__agg { flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 3px 6px; border: 1px solid #F3DA94; border-radius: 4px; background: #FFF8E6; color: #A36B00; }
.qex__wh .qtb,
.qex__sig { flex: none; }
.qex__chart { position: relative; flex: 1; min-height: 0; }
.qex__chart svg { position: absolute; left: 0; top: 0; }
/* the window header drops what does not fit, least useful first (js layout) */
.qex.hide-agg .qex__agg,
.qex.hide-x .qtb--x,
.qex.hide-y .qtb--y { display: none; }
.qex.is-narrow .qex__side,
.qex.is-narrow .qex__agg,
.qex.is-narrow .qex__wh .qtb,
.qex.is-narrow .qex__tool .qtb:nth-last-child(-n+3),
.qex.is-narrow .qex__top .qex__time,
.qex.is-narrow .qex__top > i { display: none; }

/* ── File chip and cursor ────────────────────────────────────────────────── */
.qfchip {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  color: #1769E0;
  opacity: 0;
  visibility: hidden;
}
.qfchip span { display: flex; flex-direction: column; gap: 2px; }
.qfchip b { font: 600 13.5px var(--font-mono); color: #18181B; }
.qfchip small { font-size: 11.5px; color: #71717A; }
.qcur { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; visibility: hidden; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.qripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid rgba(23, 105, 224, 0.6);
  border-radius: 50%;
  background: rgba(23, 105, 224, 0.12);
  opacity: 0;
  visibility: hidden;
}

/* ── Closing band ────────────────────────────────────────────────────────── */
/* The closing (since 12 Nov 2026): the heading over the Quix Lab plans, in the apps pages' light
   zone (.app-light; the plans are components/QuixLabPlans + css/quixlab-pricing.css) */
.qlt-end { background: linear-gradient(#F2F2F3, #DADADA 240px); }   /* the canvas grey into the zone's */
.qlt-end__h { margin: 0 auto; padding: 120px 24px 0; }
.qlt-end > .qlp-pricing { padding-top: 56px; }

/* ── Tutorial dialogs ────────────────────────────────────────────────────── */
/* sized by the height too, so the close button above it stays on screen */
.qlt-video {
  width: min(1200px, 92vw, calc((100vh - 180px) * 1920 / 1172));
  width: min(1200px, 92vw, calc((100svh - 180px) * 1920 / 1172));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.qlt-video::backdrop { background: rgba(0, 0, 0, 0.85); }
.qlt-video__box { position: relative; }
.qlt-video__media { position: relative; aspect-ratio: 1920 / 1172; background: var(--black); }
.qlt-video__media video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.qlt-video__media video:not([controls]) { cursor: pointer; }
.qlt-video__player.is-fullscreen { display: flex; flex-direction: column; padding: 0 24px 10px; background: var(--black); }
.qlt-video__player.is-fullscreen .qlt-video__media { flex: 1; min-height: 0; aspect-ratio: auto; }
.qlt-video__close {
  position: absolute;
  top: -52px;
  right: -8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
}
.qlt-video__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ══ Responsive ═════════════════════════════════════════════════════════════ */
@media (max-width: 1320px) {
  .qtop__left .qtop__ibs { display: none; }
  .qtop__right .qib:nth-child(n+5) { display: none; }
  .qcoords { display: none; }
}
/* the stack button (the Execution queue, chapter 6) stays at every width */
@media (max-width: 1060px) {
  .qtop__right .qib:not(.qib--badge),
  .qtop__file { display: none; }
  .qbar { display: none; }
}

/* Short desktop screens and landscape phones: the rail in two columns, then (shorter still,
   or narrower than 761 px) a segment bar like on phones, and a headline sized by the height */
@media (min-width: 761px) and (max-height: 860px), (min-aspect-ratio: 1/1) and (max-width: 760px) {
  .qlt-rail { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; margin-bottom: 26px; }
  .qlt-rail__b { min-height: 24px; gap: 10px; }
  .qlt-rail__bar { width: 20px; }
  .qlt .qlt-ch__h { font-size: clamp(28px, min(2.8vw, 4.6vh), 44px); margin-bottom: 16px; }
  .qlt-ch__body,
  .qlt-ch__more { font-size: 16px; }
}
@media (min-width: 761px) and (max-height: 680px), (min-aspect-ratio: 1/1) and (max-width: 760px) {
  .qlt-rail { grid-template-columns: repeat(7, 1fr); column-gap: 4px; margin-bottom: 18px; }
  .qlt-rail__b { min-height: 22px; padding: 0; }
  .qlt-rail__bar { width: 100%; height: 3px; background: #8A8A92; }
  .qlt-rail__l { display: none; }
  /* the rail has no labels here: the eyebrow names the chapter */
  .qlt.is-live .qlt-ch__eyebrow { position: static; width: auto; height: auto; margin: 0 0 12px; overflow: visible; clip: auto; white-space: normal; font-size: 11px; }
}
/* Landscape phones (any width) and zoomed-in laptops, at most 620 px tall: the text stays
   beside the canvas (at least 300 px of it), one line at a time, sized like on phones; a
   compact top bar */
@media (min-width: 761px) and (max-height: 620px), (min-aspect-ratio: 1/1) and (max-height: 620px) {
  .qlt.is-live .qlt-panel { top: 56px; bottom: 4px; width: max(40%, 300px); padding: 6px 24px; }
  .qlt-app::after { width: calc(max(40%, 300px) + 5%); }
  .qlt-rail { margin-bottom: 12px; }
  .qlt .qlt-ch__h { margin-bottom: 10px; font-size: clamp(22px, 4.4vh, 26px); line-height: 1.15; }
  .qlt-ch__body,
  .qlt-ch__more,
  .qlt.is-live .qlt-ch__more.is-on,
  .qlt.is-measure .qlt-ch__more { margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
  .qlt-watch { margin-top: 2px; min-height: 36px; padding: 8px 14px; }
  .qlt.is-live .qlt-ch__text > * { grid-area: 1 / 1; align-self: start; }
  .qlt.is-live .qlt-ch__text > .qlt-ch__more { align-self: center; }
  .qlt.is-live .qlt-ch__body { transition: opacity 0.35s ease; }
  .qlt.is-live .qlt-ch__text > .is-past { opacity: 0; }

  .qtop { left: 12px; right: 12px; top: 10px; height: 44px; }
  .qtop__left { height: 44px; gap: 8px; padding: 0 8px; border-radius: 11px; }
  .qlogo { width: 28px; height: 28px; }
  .qtop__add { top: 2px; height: 40px; padding: 0 13px; font-size: 14px; }
  .qtop__run { height: 40px; padding: 0 13px; font-size: 14px; }
  .qtop__right .qib { width: 40px; height: 40px; }
  .qbar,
  .qcoords,
  .qzoom,
  .qfab,
  .qlt-canvas::after { display: none; }
  .qlt-canvas::before { height: 76px; }
}
/* The shortest landscape screens (phones on their side): tighter still, so a chapter and its
   tutorial link fit beside the canvas */
@media (min-aspect-ratio: 1/1) and (max-height: 420px) {
  .qlt-rail { margin-bottom: 10px; }
  .qlt.is-live .qlt-ch__eyebrow { margin-bottom: 8px; }
  .qlt .qlt-ch__h { margin-bottom: 8px; }
  .qlt-ch__body,
  .qlt-ch__more,
  .qlt.is-live .qlt-ch__more.is-on,
  .qlt.is-measure .qlt-ch__more { margin-bottom: 6px; font-size: 14px; line-height: 1.45; }
  .qlt-watch { min-height: 32px; padding: 6px 12px; white-space: nowrap; }
}

/* Portrait phones and tablets: the text becomes a bottom sheet; the canvas is the area above
   it. The same query as SHEET_MQ in js/quix-lab-tour.js. */
@media (max-width: 760px) and (max-aspect-ratio: 1/1), (max-width: 1100px) and (max-aspect-ratio: 10/11) {
  .qlt.is-live .qlt-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 56%;
    align-items: flex-start;
    padding: 12px 20px 18px;
    background: #F2F2F3;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
  }
  .qlt-panel__in { max-width: none; }
  .qlt-app::after { display: none; }
  .qlt-scrim { -webkit-mask-image: none; mask-image: none; }
  .qlt-rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 14px; }
  .qlt-rail__b { min-height: 22px; padding: 0; }
  .qlt-rail__bar { width: 100%; height: 3px; background: #8A8A92; }
  .qlt-rail__l { display: none; }
  .qlt.is-live .qlt-ch__eyebrow { position: static; width: auto; height: auto; margin: 0 0 10px; overflow: visible; clip: auto; white-space: normal; font-size: 11px; }
  .qlt .qlt-ch__h { margin-bottom: 10px; font-size: 24px; line-height: 1.15; }
  .qlt-ch__body,
  .qlt-ch__more,
  .qlt.is-live .qlt-ch__more.is-on,
  .qlt.is-measure .qlt-ch__more { margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
  .qlt-watch { margin-top: 4px; min-height: 36px; padding: 8px 14px; }
  /* One line of text at a time: a revealed line takes the place of the one before, centred
     in the room the body keeps (so the button below never moves within a chapter) */
  .qlt.is-live .qlt-ch__text > * { grid-area: 1 / 1; align-self: start; }
  .qlt.is-live .qlt-ch__text > .qlt-ch__more { align-self: center; }
  .qlt.is-live .qlt-ch__body { transition: opacity 0.35s ease; }
  .qlt.is-live .qlt-ch__text > .is-past { opacity: 0; }

  .qtop { left: 12px; right: 12px; top: 10px; height: 44px; justify-content: flex-start; gap: 8px; }
  .qtop__left { height: 44px; gap: 8px; padding: 0 8px; border-radius: 11px; }
  .qlogo { width: 28px; height: 28px; }
  .qname,
  .qtop__file,
  .qtop__left .qtop__ibs { display: none; }
  .qtop__add { position: static; transform: none; margin-left: auto; height: 40px; padding: 0 13px; font-size: 14px; }
  .qtop__run { height: 40px; padding: 0 13px; font-size: 14px; }
  .qtop__right .qib { width: 40px; height: 40px; }
  .qbar,
  .qcoords,
  .qzoom,
  .qfab,
  .qlt-canvas::after { display: none; }
  .qlt-canvas::before { height: 72px; }
}
/* portrait tablets: the sheet's text a little larger */
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 10/11) {
  .qlt .qlt-ch__h { font-size: 30px; }
  .qlt-ch__body,
  .qlt-ch__more,
  .qlt.is-live .qlt-ch__more.is-on,
  .qlt.is-measure .qlt-ch__more { font-size: 17px; }
  .qlt.is-live .qlt-panel { max-height: 46%; padding: 16px 32px 24px; }
}
/* narrow phones: the compact top bar, tighter, so the stack button still fits */
@media (max-width: 400px) {
  .qtop { left: 10px; right: 10px; gap: 6px; }
  .qtop__left { gap: 6px; padding: 0 7px; }
  .qtop__add,
  .qtop__run { gap: 6px; padding: 0 10px; }
  .qtop__right { gap: 6px; }
  .qtop__right .qib { width: 38px; }
}
/* the narrowest phones: Run All as its icon, so the stack button stays on the bar */
@media (max-width: 350px) {
  .qtop__runl { display: none; }
}
@media (max-width: 760px) {
  .qlt-end__h { padding: 80px 16px 0; }
  .qlt-end > .qlp-pricing { padding-top: 40px; }
}