/* Labs' layer over estate.css (an unchanged copy of Open Data Recommender's, itself New OneDayBI.com's
   look vendored; S04). Classes lab-, custom properties --lab-. Text colour only ever comes from --ink,
   --ink-soft or navy: accents are never text (test/estate-css.test.mjs). Visual spec: the estate-redesign
   prototype, variant A. */

body { min-height: 100vh; background: var(--bg-page) no-repeat, var(--c-cream); }

/* ---------- chrome: what labs adds or does differently (D003: its own nav, no Personas, no button) ---------- */
.lab-property {
  flex-shrink: 0;
  padding: 6px 0 6px 18px;
  border-left: 1px solid var(--c-desk-edge);
  color: var(--ink);
  font: 700 15px/1.2 var(--font-head);
  text-decoration: none;
  white-space: nowrap;
}
.lab-property:hover,
.lab-property[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.lab-signout {
  margin-left: auto;
  padding: 8px 0;
  color: var(--ink);
  font: 700 15px/1.2 var(--font-head);
  text-decoration: underline;
  text-decoration-color: var(--c-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  white-space: nowrap;
}
@media (min-width: 768px) { .chrome-nav + .lab-signout { margin-left: 0; } }

.lab-subnav { margin-top: calc(var(--header-h) + var(--sunstrip-h)); border-bottom: 1px solid rgba(15, 23, 42, .08); }
.lab-subnav__inner { display: flex; align-items: center; gap: 4px 18px; overflow-x: auto; padding: 8px var(--gutter); font: 700 15px/1.2 var(--font-head); white-space: nowrap; }
.lab-subnav a { padding: 8px 0; color: var(--ink); text-decoration: none; }
.lab-subnav a:hover { text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lab-subnav__sep { flex: none; width: 1px; height: 20px; background: var(--c-desk-edge); }

@media (max-width: 767px) { .chrome-main--paper { padding-top: 0; } }
@media (min-width: 768px) { .lab-subnav { display: none; } }
@media (max-width: 479px) { .chrome-brand__word { display: none; } .lab-property { padding-left: 12px; } }

/* ---------- shared parts ---------- */
[data-accent='sme-catalogue'] { --lab-accent: #F59E0B; }
[data-accent='requirements-manager'] { --lab-accent: #C87092; }
[data-accent='geocoding'] { --lab-accent: #34B8EA; }
[data-accent] { --ui-card-accent: var(--lab-accent); --ui-dot: var(--lab-accent); }

.lab-lead { max-width: 62ch; margin-top: 16px; color: var(--ink-soft); font-size: 20px; line-height: 1.55; }
@media (max-width: 767px) { .lab-lead { font-size: 18px; } }
.lab-head { max-width: var(--container-prose); margin-bottom: 28px; }
.lab-h2s { margin-bottom: 16px; font: 700 clamp(24px, 2.2vw, 30px)/1.2 var(--font-head); }
.lab-h3s { margin: 20px 0 10px; font: 700 13px/1.3 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.lab-crumbs { margin-bottom: 18px; font: 700 15px/1.4 var(--font-head); color: var(--ink-soft); }
.lab-crumbs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.lab-status {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px;
  border: 1px solid var(--c-amber-dark); border-radius: 999px; background: var(--c-amber-tint);
  color: var(--c-navy-dark); font: 700 12px/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.lab-status--beta { border-color: var(--c-blue); background: #DBEAFE; }
.ui-eyebrow .lab-status { letter-spacing: .06em; }

.lab-bar { display: block; width: 100%; height: 8px; }
.lab-tally { display: grid; gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.lab-tally__row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 4px 12px; align-items: center; }
.lab-tally__name { grid-column: 1 / -1; font: 400 16px/1.3 var(--font-body); }
.lab-tally__row.is-current .lab-tally__name { font-weight: 700; }
.lab-tally__n { font: 700 15px/1 var(--font-head); text-align: right; }
.lab-comments { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lab-comment { padding: 12px 14px; border-left: 3px solid var(--c-desk-edge); background: var(--c-offwhite); border-radius: 0 8px 8px 0; }
.lab-comment p { margin: 0; }
.lab-comment__by { margin-top: 6px !important; color: var(--ink-soft); font-size: 14px; }
.lab-comment .lab-comment { margin-top: 10px; border-left-color: var(--c-amber); background: var(--c-paper); }
.lab-badge { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--c-navy-dark); color: var(--c-paper); font: 700 12px/1.5 var(--font-head); letter-spacing: .04em; }
.lab-waitlink { margin-top: 20px; }

.lab-frame { display: block; width: 100%; height: min(76vh, 820px); border: 0; background: #FFFFFF; }
.lab-bar-link { position: relative; z-index: 1; margin-left: auto; padding-left: 10px; background: #F1F5F9; color: var(--c-slate); font: 700 13px/1 var(--font-head); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 639px) { .ui-window__bar .ui-window__title { display: none; } }
.lab-desk-note { margin: 8px 0 10px; color: var(--ink-soft); font-size: 15px; }
.lab-caption { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }

.lab-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.lab-fieldset legend { margin-bottom: 10px; }
.lab-select { padding-right: 14px; }
.lab-noscript { padding: 16px clamp(18px, 3vw, 28px) 20px; font-size: 15px; }
.lab-empty { color: var(--ink-soft); }
.lab-form { min-width: 0; }
.forms-optional { color: var(--ink-soft); font-weight: 400; }
.forms-live:empty { display: none; }
/* The App-home waitlist with JavaScript off: /api/lead redirects to #waitlist-sent|check|failed (D023). */
.lab-waitnote { display: none; margin-bottom: 20px; }
.lab-waitnote:target { display: grid; }
#waitlist:has(#waitlist-sent:target) .lab-form { display: none; }

/* ---------- prose pages (privacy) ---------- */
.lab-prose table { width: 100%; font-size: 16px; }
.lab-prose th,
.lab-prose td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.lab-prose th { font: 700 14px/1.3 var(--font-head); }
.lab-prose code { padding: 1px 5px; border-radius: 4px; background: var(--c-offwhite); font: .9em/1.4 ui-monospace, Consolas, monospace; }
.lab-table-wrap { margin: 0 0 1em; overflow-x: auto; }
.lab-updated { margin-top: 32px; color: var(--ink-soft); font-size: 15px; }

/* ---------- pages: front page, App home, Concept page ---------- */
.lab-hero { padding-block: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 64px); }
.lab-hero--tight { padding-bottom: 28px; }
.lab-hero h1 { max-width: 20ch; }
.lab-jump { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
.lab-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lab-card { position: relative; min-height: 250px; }
.lab-card__h { margin-bottom: 8px; }
.lab-card__link { color: var(--ink); text-decoration: none; }
.lab-card__link::after { content: ''; position: absolute; inset: 0; border-radius: 6px; }
.lab-card__link:hover { text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lab-card__link:focus-visible { outline: none; box-shadow: none; }
.lab-card:focus-within { outline: 2px solid var(--focus-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--c-amber); }
.lab-card__p { color: var(--ink-soft); }
.lab-card__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 14px; color: var(--ink-soft); font-size: 15px; }
.lab-card__cta { margin-top: auto; padding-top: 18px; }
.lab-steps { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
.lab-step h3 { margin: 14px 0 8px; font-size: 20px; }
.lab-step p { margin: 0; color: var(--ink-soft); }
.lab-step__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-amber); color: var(--c-navy-dark); font: 900 18px/1 var(--font-display); }
.lab-options { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lab-option { position: relative; display: grid; gap: 4px; align-content: start; min-height: 0; text-decoration: none; }
.lab-option:hover { background: #FFFBEB; }
.lab-option__link { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.lab-option__link::after { content: ''; position: absolute; inset: 0; border-radius: 6px; }
.lab-option__link:focus-visible { outline: none; box-shadow: none; }
.lab-option:has(.lab-option__link:focus-visible) { outline: 2px solid var(--focus-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--c-amber); }
.lab-option__full { position: relative; z-index: 1; justify-self: start; margin-top: 8px; color: var(--ink); font: 700 14px/1.3 var(--font-head); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lab-voted { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--c-amber-tint); font-size: 16px; }
.lab-option.is-current { box-shadow: 0 0 0 2px var(--c-amber-dark), 0 14px 30px -14px rgba(120, 90, 50, .35); background: #FFFBEB; }
.lab-option__key { font: 900 28px/1 var(--font-display); }
.lab-option__name { font: 700 20px/1.25 var(--font-head); }
.lab-option__line { color: var(--ink-soft); font: 700 14px/1.3 var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.lab-option__desc { margin-top: 6px; color: var(--ink-soft); font-size: 16px; }
.lab-option__votes { margin-top: 8px; font: 700 15px/1.3 var(--font-head); }
.lab-try { padding-bottom: 48px; background: var(--c-cream); }
.lab-vote { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .lab-vote { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; } }
.lab-sticky { margin-top: 28px; }

/* ---------- the garage hero: top of the front page (D008) ---------- */
.lab-garage { --stage-h: clamp(540px, calc(100svh - var(--header-h) - var(--sunstrip-h)), 780px); position: relative; }
.lab-garage__stage { position: relative; height: var(--stage-h); overflow: hidden; background: linear-gradient(180deg, #EFE8DC 0, #EFE8DC 84%, #CFC6B6 84%, #D6D0C6 85.6%); }
.lab-garage__svg { position: absolute; right: 0; bottom: 0; width: auto; height: 100%; aspect-ratio: 1600 / 720; }
.lab-garage__copy { position: absolute; z-index: 2; top: 50%; left: var(--gutter); width: min(37vw, 500px); transform: translateY(-50%); }
.lab-garage__card {
  --ink: #0F172A; --ink-soft: #334155; --focus-ink: #0F172A;
  padding: 30px 32px 32px; border-radius: 18px; background: rgba(255, 255, 255, .94); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 24px 48px -24px rgba(120, 90, 50, .45);
}
.lab-garage__card .lab-crumbs { margin-bottom: 14px; font-size: 14px; }
.lab-garage__h { margin: 0 0 18px; font: 900 clamp(30px, 3.4vw, 52px)/1.03 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.lab-garage__p { max-width: 32em; color: var(--ink-soft); font-size: clamp(17px, 1.2vw, 19px); text-wrap: pretty; }
.lab-garage__jump { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }

/* "Pause the sparks": a checkbox, so it works with no JavaScript (WCAG 2.2.2) */
.lab-pause { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: inline-flex; }
.lab-pause__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lab-pause__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--c-navy-dark); font: 700 14px/1.2 var(--font-head); box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .5);
}
.lab-pause__input:hover + .lab-pause__chip { background: #FFFFFF; }
.lab-pause__tick { display: none; width: 18px; height: 18px; }
.lab-pause__input:checked + .lab-pause__chip .lab-pause__tick { display: block; }
.lab-pause__input:focus-visible + .lab-pause__chip { outline: 2px solid var(--focus-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--c-amber); }

@media (max-width: 1023px) {
  .lab-garage { --stage-h: 50svh; }
  .lab-garage__svg { right: auto; left: 50%; transform: translateX(-60%); }
  .lab-garage__copy { position: relative; top: auto; left: auto; width: auto; margin: -28px max(16px, calc((100% - 680px) / 2)) 0; transform: none; }
  .lab-garage__card { padding: 20px 18px 22px; border-radius: 14px; }
  .lab-garage__h { margin-bottom: 12px; font-size: clamp(25px, 7vw, 32px); }
  .lab-pause { top: 12px; right: auto; bottom: auto; left: 12px; }
}
@media (max-width: 767px) { .lab-garage { --stage-h: 44svh; } }

/* the still frame: what reduced motion (and a paused scene) shows. Each spark sits mid-flight. */
.lab-spark { transform: translate(var(--dx), var(--dy)); }
.lab-spark--1 { --dx: -60px; --dy: -70px; --ex: -95px; --ey: 40px; --t: .95s; --d: -.10s; }
.lab-spark--2 { --dx: -30px; --dy: -92px; --ex: -50px; --ey: 60px; --t: 1.10s; --d: -.55s; }
.lab-spark--3 { --dx: 22px; --dy: -82px; --ex: 36px; --ey: 70px; --t: 1.00s; --d: -.30s; }
.lab-spark--4 { --dx: 56px; --dy: -60px; --ex: 92px; --ey: 50px; --t: .90s; --d: -.70s; }
.lab-spark--5 { --dx: -86px; --dy: -40px; --ex: -140px; --ey: 60px; --t: 1.05s; --d: -.20s; }
.lab-spark--6 { --dx: 82px; --dy: -36px; --ex: 132px; --ey: 56px; --t: .95s; --d: -.85s; }
.lab-spark--7 { --dx: -14px; --dy: -112px; --ex: -26px; --ey: 30px; --t: 1.20s; --d: -.40s; }
.lab-spark--8 { --dx: 40px; --dy: -102px; --ex: 66px; --ey: 46px; --t: 1.15s; --d: -.95s; }
.lab-spark--9 { --dx: -112px; --dy: -20px; --ex: -172px; --ey: 70px; --t: .85s; --d: -.60s; }
.lab-spark--10 { --dx: 106px; --dy: -14px; --ex: 162px; --ey: 80px; --t: .90s; --d: -.15s; }
.lab-spark--11 { --dx: -50px; --dy: -30px; --ex: -82px; --ey: 48px; --t: .75s; --d: -.35s; }
.lab-spark--12 { --dx: 64px; --dy: -26px; --ex: 100px; --ey: 48px; --t: .80s; --d: -.50s; }
.lab-spark--13 { --dx: -6px; --dy: -62px; --ex: -10px; --ey: 48px; --t: .70s; --d: -.25s; }
.lab-spark--14 { --dx: 26px; --dy: -46px; --ex: 42px; --ey: 48px; --t: .78s; --d: -.65s; }
.lab-smoke { opacity: .25; transform: translate(var(--sx), -50px) scale(1.3); }
.lab-smoke--1 { --sx: -10px; --d: 0s; }
.lab-smoke--2 { --sx: 14px; --d: -2s; }

/* Motion only for people who have not asked for less; a checked "Pause the sparks" stops all of it */
@media (prefers-reduced-motion: no-preference) {
  .lab-garage .lab-burst { animation: lab-burst 4.2s linear infinite; }
  .lab-garage .lab-flicker { animation: lab-flicker .9s steps(1, end) infinite; }
  .lab-garage .lab-spark { animation: lab-spark var(--t) cubic-bezier(.2, .6, .4, 1) var(--d) infinite; }
  .lab-garage .lab-smoke { animation: lab-smoke 4s ease-out var(--d) infinite; }
  .lab-garage .lab-cursor { animation: lab-blink 1.1s steps(1, end) infinite; }
  .lab-garage .lab-led { animation: lab-blink 2.2s steps(1, end) infinite; }
  .lab-garage:has(.lab-pause__input:checked) * { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .lab-pause { display: none; } }
@keyframes lab-burst { 0%, 64% { opacity: 1; } 68%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes lab-flicker { 0% { opacity: 1; } 12% { opacity: .55; } 22% { opacity: 1; } 37% { opacity: .7; } 48% { opacity: 1; } 63% { opacity: .5; } 71% { opacity: .95; } 86% { opacity: .65; } }
@keyframes lab-spark {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)); opacity: 0; }
}
@keyframes lab-smoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 25% { opacity: .35; } 100% { transform: translate(var(--sx), -150px) scale(2); opacity: 0; } }
@keyframes lab-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }