/* The month demo (#month on the landing; behaviour in landing-demo.js).

   The page's one dark band, in both themes. Every other band alternates white
   and a pale blue-grey a few steps apart, which is calm but leaves the page
   without a single moment of contrast; the product window is the thing worth
   stopping on, so it gets the deep ground and everything else stays as it is.

   The window inside is the app's own surface — white in light, the app's
   navy in dark — so it reads as a screen laid on the band, not as more band.

   Selectors are prefixed with the page because the band layer in landing.css
   resets every `.lp-section` at (0,1,0); (0,2,1) is enough to own this one
   without touching the cascade anywhere else. */

body[data-page="landing"] .lp-demo {
  --demo-ground: #0d1534;
  --demo-surface: #ffffff;
  --demo-surface-2: #f6f8fe;
  --demo-chrome: #eef2fb;
  --demo-line: rgba(17, 33, 74, 0.09);
  --demo-line-strong: rgba(17, 33, 74, 0.16);
  --demo-text: #11214a;
  --demo-muted: rgba(17, 33, 74, 0.64);
  --demo-quiet: rgba(17, 33, 74, 0.44);
  --demo-accent: #3f66d8;
  --demo-accent-tint: rgba(84, 125, 235, 0.1);
  --demo-success: #1f9e7c;
  --demo-success-tint: rgba(47, 196, 157, 0.12);
  --demo-success-line: rgba(47, 196, 157, 0.38);
  --demo-amber: #a8741a;
  --demo-amber-tint: rgba(217, 161, 60, 0.14);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60rem 26rem at 18% 0%, rgba(84, 125, 235, 0.28), transparent 70%),
    radial-gradient(50rem 30rem at 92% 100%, rgba(63, 102, 216, 0.22), transparent 72%),
    var(--demo-ground);
  color: rgba(233, 237, 252, 0.92);
}

:root[data-theme="dark"] body[data-page="landing"] .lp-demo {
  --demo-ground: #080c20;
  --demo-surface: #161c3e;
  --demo-surface-2: #121838;
  --demo-chrome: #10163a;
  --demo-line: rgba(156, 189, 252, 0.1);
  --demo-line-strong: rgba(156, 189, 252, 0.2);
  --demo-text: #e9edfc;
  --demo-muted: rgba(233, 237, 252, 0.7);
  --demo-quiet: rgba(233, 237, 252, 0.46);
  --demo-accent: #9cbdfc;
  --demo-accent-tint: rgba(118, 158, 244, 0.14);
  --demo-success: #5fd9b6;
  --demo-success-tint: rgba(47, 196, 157, 0.14);
  --demo-success-line: rgba(95, 217, 182, 0.34);
  --demo-amber: #e7b65e;
  --demo-amber-tint: rgba(217, 161, 60, 0.16);
}

/* The hero's dotted ribbon, not a texture of its own — and not the hero
   repeated. Tried and dropped on 2026-10-08: a square grid (a second visual
   language), the ribbon in the top-right corner (the hero again), the ribbon
   magnified (each dot a blot). What stayed: one stream that enters low on the
   left, passes under the product window and leaves high on the right, so the
   window seems to float on it. Two halves, each centred on one edge of the
   window (the content box is 70rem, so the edges sit at 50% ± 35rem): the
   right half is the left one mirrored. At the closing band's scale, never
   the hero's or larger.

   The span stays level with the band and decides where dots may show — only
   the window's height, clear of the heading above and the lane text below;
   its two pseudo-elements carry the halves. Same image and screen blend as
   the hero. The closing band carries the ribbon bottom-left (landing.css). */
.lp-demo__wave {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 24%, #000 38%, #000 72%, transparent 84%);
  mask-image: linear-gradient(to bottom, transparent 24%, #000 38%, #000 72%, transparent 84%);
}

.lp-demo__wave::before,
.lp-demo__wave::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-wave-image);
  background-repeat: no-repeat;
  background-size: clamp(32rem, 54vw, 52rem) auto;
  mix-blend-mode: screen;
  opacity: 0.34;
}

/* Left half: enters low. */
.lp-demo__wave::after {
  background-position: calc(50% - 35rem) 78%;
  transform: rotate(-8deg);
}

/* Right half: the mirror image, leaving high. */
.lp-demo__wave::before {
  background-position: calc(50% - 35rem) 40%;
  transform: scaleX(-1) rotate(8deg);
}

body[data-page="landing"] .lp-demo__header {
  margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem);
}

/* Arrived at by anchor, the band must clear the sticky header the way #lanes does. */
body[data-page="landing"] #month {
  scroll-margin-top: calc(var(--site-header-h) + 1rem);
}

body[data-page="landing"] .lp-demo__title {
  color: #ffffff;
}

body[data-page="landing"] .lp-demo__subtitle {
  color: rgba(233, 237, 252, 0.72);
}

/* --- The window ----------------------------------------------------------- */

.lp-demo__window {
  position: relative;
  border-radius: 16px;
  background: var(--demo-surface);
  color: var(--demo-text);
  box-shadow:
    0 0 0 1px rgba(156, 189, 252, 0.16),
    0 2px 6px rgba(2, 6, 24, 0.2),
    0 40px 90px -20px rgba(2, 6, 24, 0.7);
  overflow: hidden;
  font-family: var(--font-body);
}

.lp-demo__chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 2.6rem;
  padding: 0 0.6rem 0 1rem;
  background: var(--demo-chrome);
  border-bottom: 1px solid var(--demo-line);
}

.lp-demo__dots {
  display: inline-flex;
  gap: 0.4rem;
}

.lp-demo__dots i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--demo-line-strong);
}

.lp-demo__address {
  min-width: 14rem;
  padding: 0.28rem 1rem;
  border-radius: 999px;
  background: var(--demo-surface);
  border: 1px solid var(--demo-line);
  font-size: 0.74rem;
  color: var(--demo-quiet);
  text-align: center;
}

.lp-demo__toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.8rem;
  padding: 0 0.7rem;
  border: 1px solid var(--demo-line-strong);
  border-radius: 999px;
  background: var(--demo-surface);
  color: var(--demo-muted);
  font: 600 0.72rem/1 var(--font-controls);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lp-demo__toggle:hover {
  color: var(--demo-text);
  border-color: var(--demo-accent);
}

.lp-demo__toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* A 1.8rem pill is a mouse target; the invisible halo under it is the touch
   one. The pseudo-element hit-tests as part of the button at 44px tall
   without the pill gaining a pixel. */
.lp-demo__toggle {
  position: relative;
}
.lp-demo__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: max(100%, 44px);
}

.lp-demo__toggle-icon {
  fill: currentColor;
}

.lp-demo__toggle-icon--play,
.lp-demo__toggle-label--play,
.lp-demo__window.is-paused .lp-demo__toggle-icon--pause,
.lp-demo__window.is-paused .lp-demo__toggle-label--pause {
  display: none;
}

.lp-demo__window.is-paused .lp-demo__toggle-icon--play,
.lp-demo__window.is-paused .lp-demo__toggle-label--play {
  display: inline;
}

/* Without the script there is nothing to pause. */
.lp-demo__window:not([data-live]) .lp-demo__toggle {
  visibility: hidden;
}

.lp-demo__screen {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
}

/* --- Clients -------------------------------------------------------------- */

.lp-demo__clients {
  padding: 1.4rem 0.9rem;
  background: var(--demo-surface-2);
  border-right: 1px solid var(--demo-line);
}

.lp-demo__label {
  display: block;
  font: 600 0.66rem/1.3 var(--font-controls);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--demo-quiet);
}

.lp-demo__clients .lp-demo__label {
  padding: 0 0.6rem 0.7rem;
}

.lp-demo__client-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.lp-demo__client {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
}

.lp-demo__client.is-current {
  background: var(--demo-surface);
  box-shadow: 0 0 0 1px var(--demo-line), 0 1px 3px rgba(17, 33, 74, 0.06);
}

.lp-demo__client-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--demo-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-demo__client-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--demo-quiet);
}

.lp-demo__client-state::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--demo-line-strong);
}

.lp-demo__client-state--done {
  color: var(--demo-success);
}

.lp-demo__client-state--done::before {
  background: var(--demo-success);
}

.lp-demo__client-state--busy {
  color: var(--demo-accent);
}

.lp-demo__client-state--busy::before {
  background: var(--demo-accent);
  animation: lp-demo-pulse 1.6s ease-in-out infinite;
}

/* A lane's client says „няма файл", „в процес" or „има файл", one at a time.
   Without the script the documents lane is shown finished, so its client has
   a file and the other two do not. */
.lp-demo__client[data-client] .lp-demo__client-state--busy,
.lp-demo__client[data-client] .lp-demo__client-state--done,
.lp-demo__client[data-client].is-busy .lp-demo__client-state--none,
.lp-demo__client[data-client].is-done .lp-demo__client-state--none,
.lp-demo__client[data-client].is-done .lp-demo__client-state--busy {
  display: none;
}

.lp-demo__client[data-client].is-busy .lp-demo__client-state--busy,
.lp-demo__client[data-client].is-done .lp-demo__client-state--done {
  display: inline-flex;
}

.lp-demo__window:not([data-live]) .lp-demo__client[data-client="docs"] {
  background: var(--demo-surface);
  box-shadow: 0 0 0 1px var(--demo-line);
}

.lp-demo__window:not([data-live]) .lp-demo__client[data-client="docs"] .lp-demo__client-state--none {
  display: none;
}

.lp-demo__window:not([data-live]) .lp-demo__client[data-client="docs"] .lp-demo__client-state--done {
  display: inline-flex;
}

/* --- Main ------------------------------------------------------------------ */

/* One screen per lane, the current one shown. */
.lp-demo__main[data-lane-screen] {
  display: none;
}

.lp-demo__main[data-lane-screen].is-active,
.lp-demo__window:not([data-live]) .lp-demo__main[data-lane-screen="docs"] {
  display: flex;
}

.lp-demo__main {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  padding: 1.5rem 1.8rem 1.7rem;
}

.lp-demo__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.lp-demo__head-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.lp-demo__company {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--demo-text);
}

.lp-demo__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font: 600 0.74rem/1 var(--font-controls);
}

.lp-demo__pill--busy {
  background: var(--demo-accent-tint);
  color: var(--demo-accent);
}

.lp-demo__pill--busy i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  animation: lp-demo-pulse 1.6s ease-in-out infinite;
}

.lp-demo__pill--done {
  background: var(--demo-success-tint);
  color: var(--demo-success);
}

.lp-demo__pill svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-demo__pill--done,
.lp-demo__window.is-finished .lp-demo__pill--busy,
.lp-demo__window:not([data-live]) .lp-demo__pill--busy {
  display: none;
}

.lp-demo__window.is-finished .lp-demo__pill--done,
.lp-demo__window:not([data-live]) .lp-demo__pill--done {
  display: inline-flex;
}

/* Steps: five bars, each filling over its own stage. */
.lp-demo__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.lp-demo__step {
  --fill: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.lp-demo__step-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--demo-line);
  overflow: hidden;
}

.lp-demo__step-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--demo-accent);
  transform-origin: left center;
  transform: scaleX(var(--fill));
  transition: transform 0.12s linear, background-color 0.3s ease;
}

.lp-demo__step.is-done .lp-demo__step-bar i,
.lp-demo__window:not([data-live]) .lp-demo__step-bar i {
  background: var(--demo-success);
}

.lp-demo__step-name {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--demo-quiet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.lp-demo__step.is-done .lp-demo__step-name {
  color: var(--demo-muted);
}

.lp-demo__step.is-current .lp-demo__step-name {
  color: var(--demo-text);
  font-weight: 650;
}

.lp-demo__deadline {
  margin: 0;
}

.lp-demo__deadline span {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: var(--demo-surface-2);
  border: 1px solid var(--demo-line);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--demo-muted);
}

/* --- Stage panels ---------------------------------------------------------- */

/* One fixed height for all five, so the window never changes size under the
   reader's eye while the stages swap. Sized to the tallest (the documents). */
.lp-demo__stage {
  position: relative;
  height: 15.6rem;
  border-top: 1px solid var(--demo-line);
  padding-top: 0.2rem;
}

.lp-demo__panel {
  position: absolute;
  inset: 0.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.lp-demo__panel.is-active,
.lp-demo__window:not([data-live]) .lp-demo__panel[data-panel="5"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s, visibility 0s;
}

.lp-demo__panel-title {
  margin: 0.7rem 0 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--demo-text);
}

.lp-demo__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-demo__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.62rem 0.15rem;
  border-bottom: 1px solid var(--demo-line);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lp-demo__row:last-child {
  border-bottom: 0;
}

/* Rows with nothing but a label and a tick: the tick keeps to the right edge. */
.lp-demo__rows--plain .lp-demo__row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.lp-demo__rows--compact .lp-demo__row {
  padding-block: 0.5rem;
}

.lp-demo__row--finding {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Not there yet: only once the script is running, so without it every row of
   the finished month is on screen. */
.lp-demo__window[data-live] [data-row]:not(.is-in) {
  opacity: 0;
  transform: translateY(4px);
}

.lp-demo__row-icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 1.65rem;
  border-radius: 6px;
  border: 1px solid var(--demo-line-strong);
  background: var(--demo-surface-2);
  font: 700 0.6rem/1 var(--font-controls);
  letter-spacing: 0.04em;
  color: var(--demo-muted);
}

.lp-demo__row-icon--pdf {
  color: #c2414c;
  border-color: rgba(224, 85, 97, 0.32);
  background: rgba(224, 85, 97, 0.07);
}

:root[data-theme="dark"] .lp-demo__row-icon--pdf {
  color: #f08a93;
}

.lp-demo__row-icon--doc svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.lp-demo__row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.lp-demo__row-main b {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--demo-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-demo__row-main small {
  font-size: 0.76rem;
  color: var(--demo-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-demo__row-meta {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--demo-muted);
  white-space: nowrap;
}

/* The tick: an empty ring that fills when the row is done. Drawn in CSS so
   there is nothing to load and nothing for the CSP to weigh. */
.lp-demo__tick {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid var(--demo-line-strong);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.lp-demo__tick::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.2rem;
  width: 0.26rem;
  height: 0.48rem;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.6, 1);
}

.lp-demo__row.is-done .lp-demo__tick,
.lp-demo__window:not([data-live]) .lp-demo__tick {
  background: var(--demo-success);
  border-color: var(--demo-success);
}

.lp-demo__row.is-done .lp-demo__tick::after,
.lp-demo__window:not([data-live]) .lp-demo__tick::after {
  transform: rotate(45deg) scale(1);
}

:root[data-theme="dark"] .lp-demo__tick::after {
  border-color: #0d1534;
}

/* Ledger findings: amber while they wait for the accountant, then settled.
   Amber, not red — nothing here is wrong in the file; it is a question the
   file is waiting on (see the severity rule in the app). */
.lp-demo__chip {
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font: 600 0.72rem/1 var(--font-controls);
  white-space: nowrap;
}

.lp-demo__chip--open {
  background: var(--demo-amber-tint);
  color: var(--demo-amber);
}

.lp-demo__chip--done {
  display: none;
  background: var(--demo-success-tint);
  color: var(--demo-success);
}

.lp-demo__row.is-done .lp-demo__chip--open,
.lp-demo__window:not([data-live]) .lp-demo__chip--open {
  display: none;
}

.lp-demo__row.is-done .lp-demo__chip--done,
.lp-demo__window:not([data-live]) .lp-demo__chip--done {
  display: inline-block;
}

/* Build progress */
.lp-demo__progress {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: auto;
  padding-bottom: 0.3rem;
}

.lp-demo__progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--demo-muted);
}

.lp-demo__progress-text b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--demo-text);
}

.lp-demo__bar {
  --fill: 1;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--demo-line);
  overflow: hidden;
}

.lp-demo__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--demo-accent);
  transform-origin: left center;
  transform: scaleX(var(--fill));
  transition: transform 0.12s linear;
}

/* Check tally */
.lp-demo__tally {
  display: flex;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lp-demo__tally-chip {
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: var(--demo-surface-2);
  border: 1px solid var(--demo-line);
  font: 600 0.74rem/1 var(--font-controls);
  color: var(--demo-muted);
}

/* The verdict, in the report's own shape (Verdict.tsx): the answer first. */
.lp-demo__verdict {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.8rem;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  background: var(--demo-success-tint);
  border: 1px solid var(--demo-success-line);
}

.lp-demo__verdict-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--demo-success);
}

.lp-demo__verdict-mark svg {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-theme="dark"] .lp-demo__verdict-mark svg {
  stroke: #0d1534;
}

.lp-demo__verdict-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.lp-demo__verdict-text b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--demo-text);
}

.lp-demo__verdict-text small {
  font-size: 0.8rem;
  color: var(--demo-muted);
}

.lp-demo__files {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.lp-demo__file {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--demo-line-strong);
  background: var(--demo-surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--demo-text);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lp-demo__file > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-demo__handoff {
  margin: auto 0 0.3rem;
  font-size: 0.8rem;
  color: var(--demo-muted);
  transition: opacity 0.3s ease;
}

@keyframes lp-demo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- Lane tabs ------------------------------------------------------------- */

/* Three doors, one window. Laid on the dark band like the window is: a quiet
   glass card each, the chosen one lit. The bar along the bottom of the chosen
   tab is the time until the next lane; a lane the visitor picked stays, so it
   has none. */
.lp-demo__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.lp-demo__tab {
  --fill: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid rgba(156, 189, 252, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(233, 237, 252, 0.72);
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lp-demo__tab:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(156, 189, 252, 0.26);
}

.lp-demo__tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(156, 189, 252, 0.42);
  color: rgba(233, 237, 252, 0.86);
}

.lp-demo__tab:focus-visible {
  outline: 3px solid #9cbdfc;
  outline-offset: 2px;
}

.lp-demo__tab-eyebrow {
  font: 600 0.66rem/1.3 var(--font-controls);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(156, 189, 252, 0.7);
}

.lp-demo__tab[aria-selected="true"] .lp-demo__tab-eyebrow {
  color: #9cbdfc;
}

.lp-demo__tab-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.8);
}

.lp-demo__tab[aria-selected="true"] .lp-demo__tab-title {
  color: #ffffff;
}

.lp-demo__tab-copy {
  font-size: 0.82rem;
  line-height: 1.45;
}

.lp-demo__tab-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}

.lp-demo__tab-progress i {
  display: block;
  height: 100%;
  background: #9cbdfc;
  transform-origin: left center;
  transform: scaleX(var(--fill));
  transition: transform 0.12s linear;
}

/* --- What each lane does, under the window ------------------------------- */

.lp-demo__abouts {
  margin-top: 1.4rem;
}

.lp-demo__about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 2.5rem;
  align-items: start;
}

/* Without the script every lane's text stands, one under the other. */
.lp-demo__about + .lp-demo__about {
  margin-top: 1rem;
}

.lp-demo[data-live] .lp-demo__about:not(.is-active) {
  display: none;
}

.lp-demo[data-live] .lp-demo__about + .lp-demo__about {
  margin-top: 0;
}

.lp-demo__about-copy {
  margin: 0;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(233, 237, 252, 0.78);
}

.lp-demo__about-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.15rem 0 0;
}

body[data-page="landing"] .lp-demo .lp-lane__link {
  color: #b9d0ff;
}

body[data-page="landing"] .lp-demo .lp-lane__link:hover {
  color: #ffffff;
}

.lp-demo__caption {
  margin: 1.2rem 0 0;
  font-size: 0.78rem;
  color: rgba(233, 237, 252, 0.48);
}

/* --- Export and repair rows ----------------------------------------------- */

/* A label, a count, a tick. */
.lp-demo__rows--meta .lp-demo__row {
  grid-template-columns: minmax(0, 1fr) auto 1.15rem;
}

/* The client's own column, then the field it fills. */
.lp-demo__rows--map .lp-demo__row {
  grid-template-columns: minmax(0, 11rem) 1.2rem minmax(0, 1fr) auto;
  gap: 0.7rem;
}

.lp-demo__col {
  justify-self: start;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: var(--demo-surface-2);
  border: 1px solid var(--demo-line-strong);
  font-size: 0.76rem;
  color: var(--demo-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* „goes into": a drawn connector, not a typed arrow. */
.lp-demo__maps {
  position: relative;
  height: 1px;
  background: var(--demo-line-strong);
}

.lp-demo__maps::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  border: solid var(--demo-line-strong);
  border-width: 0 1px 1px 0;
  width: 5px;
  height: 5px;
  transform: rotate(-45deg);
}

.lp-demo__rows--map b {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--demo-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-demo__panel-title--file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lp-demo__foot {
  margin: auto 0 0.3rem;
  font-size: 0.78rem;
  color: var(--demo-muted);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Severity counts, in the app's colours: red only for an error. */
.lp-demo__sev {
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  font: 600 0.72rem/1 var(--font-controls);
  white-space: nowrap;
}

.lp-demo__sev--error {
  background: rgba(224, 85, 97, 0.12);
  color: #c2414c;
}

.lp-demo__sev--warning {
  background: var(--demo-amber-tint);
  color: var(--demo-amber);
}

:root[data-theme="dark"] .lp-demo__sev--error {
  color: #f08a93;
}

.lp-demo__verdict--fail {
  margin-top: 0.7rem;
  padding-block: 0.7rem;
  background: rgba(224, 85, 97, 0.08);
  border-color: rgba(224, 85, 97, 0.32);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lp-demo__verdict--fail .lp-demo__verdict-mark {
  background: #e05561;
}

.lp-demo__verdict--fail .lp-demo__verdict-mark svg {
  stroke: #ffffff;
}

/* „Поправими тук" until the repair lands, then „Поправено". The one row the
   file cannot fix keeps its own chip and never ticks over. */
.lp-demo__chip--here {
  background: var(--demo-accent-tint);
  color: var(--demo-accent);
}

.lp-demo__row.is-done .lp-demo__chip--here,
.lp-demo__window:not([data-live]) .lp-demo__chip--here {
  display: none;
}

.lp-demo__chip--program {
  background: var(--demo-surface-2);
  border: 1px solid var(--demo-line-strong);
  color: var(--demo-muted);
}

.lp-demo__tally-chip--warning {
  background: var(--demo-amber-tint);
  border-color: transparent;
  color: var(--demo-amber);
}

/* Four two-line findings under a title: the repair panel sits tighter. */
[data-lane-screen="repair"] [data-panel="3"] .lp-demo__row {
  padding-block: 0.42rem;
}

/* --- Narrower windows ------------------------------------------------------ */

/* The client list is context, the month is the demo: it goes first — and
   early enough that five stage names still fit under five bars. */
@media (max-width: 1080px) {
  .lp-demo__screen {
    grid-template-columns: 1fr;
  }

  .lp-demo__clients {
    display: none;
  }

  .lp-demo__address {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .lp-demo__chrome {
    grid-template-columns: auto 1fr;
  }

  .lp-demo__address {
    display: none;
  }

  .lp-demo__main {
    padding: 1.1rem 1rem 1.2rem;
    gap: 0.9rem;
  }

  .lp-demo__company {
    font-size: 1.1rem;
  }

  /* Five names do not fit under five bars at phone width; the current one is
     the one that matters, and it gets the row to itself. */
  .lp-demo__steps {
    gap: 0.3rem;
    position: relative;
    padding-bottom: 1.25rem;
  }

  .lp-demo__step-name {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
  }

  .lp-demo__step.is-current .lp-demo__step-name,
  .lp-demo__window:not([data-live]) .lp-demo__step[data-step="5"] .lp-demo__step-name {
    opacity: 1;
  }

  .lp-demo__stage {
    height: 19.5rem;
  }

  .lp-demo__row {
    gap: 0.6rem;
  }

  .lp-demo__row-meta {
    display: none;
  }

  /* „Хронологичен регистър и оборотна ведомост" does not fit a phone's line,
     and an ellipsis would cut the half that names the second file. */
  .lp-demo__row-main b,
  .lp-demo__row-main small {
    white-space: normal;
  }

  .lp-demo__files {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .lp-demo__file {
    padding: 0.5rem 0.7rem;
  }
}

@media (max-width: 760px) {
  /* The three doors stack, each one line: the eyebrow and the title. */
  .lp-demo__tabs {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .lp-demo__tab {
    padding: 0.7rem 0.9rem 0.8rem;
  }

  .lp-demo__tab-copy {
    display: none;
  }

  .lp-demo__about {
    grid-template-columns: 1fr;
  }

  .lp-demo__rows--map .lp-demo__row {
    grid-template-columns: minmax(0, 1fr) 0.9rem minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-demo__panel,
  .lp-demo__panel.is-active,
  .lp-demo__row,
  .lp-demo__file,
  .lp-demo__tally,
  .lp-demo__handoff,
  .lp-demo__step-bar i,
  .lp-demo__bar i,
  .lp-demo__tab,
  .lp-demo__tab-progress i,
  .lp-demo__foot,
  .lp-demo__verdict--fail,
  .lp-demo__tick,
  .lp-demo__tick::after {
    transition: none;
  }

  .lp-demo__pill--busy i,
  .lp-demo__client-state--busy::before {
    animation: none;
  }
}