/* live.css — "See it work" (#live), owner: the LIVE builder (site-src/js/live). The conversation sheet (porcelain) and
   Alfred's drawer (glass) joined by a hairline light cable. Tokens and the latin-ext Geist come from base.css. */

/* the section breaks the page template: no eyebrow, an upright headline, the stage in the first screen, the lede as the
   caption of the tab bar */
.live { padding-top: clamp(52px, 4.4vw, 72px); }
.live-head .display-lg { max-width: none; font-size: clamp(34px, 4.1vw, 60px); line-height: 1.04; letter-spacing: -0.02em; }
.lv-hl { display: block; }
.live-stage { margin-top: clamp(28px, 3vw, 44px); min-height: 0; }

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

.lv {
  --lv-sheet: #fdfdfb;
  --lv-edge: linear-gradient(165deg, #fff 0%, rgba(255, 255, 255, 0) 35%, rgba(20, 20, 15, 0.1) 100%);
  --lv-edge-glass: linear-gradient(165deg, #fff 0%, rgba(255, 255, 255, 0.25) 40%, rgba(20, 20, 15, 0.12) 100%);
  --lv-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --lv-check: var(--ink-2); /* settled checks are ink; lapis is for what Alfred is doing right now */
  position: relative;
}

/* the scene's height is reserved before live.js builds it (measured per width band: tallest chapter with its card open; the
   still state under reduced motion), so nothing below #live moves; the drawer grows into this air when the card lands */
.lv-slot { position: relative; min-height: 628px; }
@media (max-width: 960px) { .lv-slot { min-height: 668px; } }
@media (max-width: 860px) { .lv-slot { min-height: 1164px; } }
@media (max-width: 560px) { .lv-slot { min-height: 1044px; } }
@media (max-width: 414px) { .lv-slot { min-height: 1060px; } }
@media (max-width: 374px) { .lv-slot { min-height: 1095px; } }
@media (max-width: 360px) { .lv-slot { min-height: 1117px; } }
@media (max-width: 340px) { .lv-slot { min-height: 1137px; } }
@media (prefers-reduced-motion: reduce) {
  .lv-slot { min-height: 631px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1199px) { .lv-slot { min-height: 673px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 960px) { .lv-slot { min-height: 733px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 860px) { .lv-slot { min-height: 1180px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 560px) { .lv-slot { min-height: 1202px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 414px) { .lv-slot { min-height: 1224px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 374px) { .lv-slot { min-height: 1298px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 340px) { .lv-slot { min-height: 1382px; } }

/* ---------- the scene ---------- */
.lv-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 528px) minmax(112px, 1fr) minmax(0, 452px);
  align-items: start;
}
.lv-cable {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* raised objects swing into place once (opacity + transform only; parallax uses the separate `translate`) */
.lv-obj {
  position: relative;
  opacity: 0;
  transition: opacity 700ms var(--lv-ease-soft), transform 1100ms var(--ease-out);
}
.lv-sheet { transform-origin: 0% 50%; transform: perspective(1600px) rotateY(9deg) translate3d(-12px, 22px, 0); }
.lv-drawer { transform-origin: 100% 50%; transform: perspective(1600px) rotateY(-16deg) translate3d(30px, 24px, 0); }
.lv.is-in .lv-obj { opacity: 1; transform: none; }
.lv.is-in .lv-drawer { transition-delay: 140ms; }

/* machined edge: 1 px specular line (top-left catches light, bottom-right falls into shade) — drawn with inset
   hairlines, no mask (a masked layer over moving content re-rasters on the GPU every frame) */
.lv-obj::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(20, 20, 15, 0.1), inset -1px 0 0 rgba(20, 20, 15, 0.05);
}

/* ---------- (a) the conversation sheet ---------- */
.lv-sheet {
  grid-column: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 628px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fefefd 0%, #fbfaf7 100%);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.05), 0 2px 6px -2px rgba(20, 20, 15, 0.05), 0 34px 64px -30px rgba(20, 20, 15, 0.24);
}
/* the head's hairline belongs to the sheet (constant while chapters cross-fade) */
.lv-sheet::after {
  content: "";
  position: absolute;
  inset: 76px 0 auto 0;
  height: 1px;
  background: var(--rule);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 3;
}
.lv-sh-layers { position: relative; flex: 1; min-height: 0; display: grid; }

/* chapters are stacked in one cell; only the active one shows (opacity + a small rise, no blur) */
.lv-layer {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 560ms var(--lv-ease-soft), transform 720ms var(--ease-out), visibility 0s linear 720ms;
}
.lv-layer.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 560ms var(--lv-ease-soft) 120ms, transform 720ms var(--ease-out) 120ms, visibility 0s;
}
.lv-layer.is-active.is-leaving { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }

.lv-sh-layer { display: flex; flex-direction: column; min-height: 0; }
.lv-sh-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 76px;
  padding: 0 24px 0 26px;
}
.lv-sh-who { flex: 1; min-width: 0; }
.lv-sh-name { margin: 0; font-size: 17px; line-height: 22px; font-weight: 550; letter-spacing: -0.015em; color: var(--ink); }
.lv-sh-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.lv-sh-state { position: relative; flex: none; width: 16px; height: 16px; }
.lv-sh-live {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--lapis);
  transition: transform 300ms var(--ease-out), opacity 200ms ease;
}
.lv-sh-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--lapis-ring);
}
.lv-sh-ok { position: absolute; inset: 0; width: 16px; height: 16px; color: var(--lv-check); opacity: 0; transform: scale(0.6); transition: opacity 260ms ease, transform 420ms var(--ease-out); }
.lv-sh-head[data-s="done"] .lv-sh-live { opacity: 0; transform: scale(0.4); }
.lv-sh-head[data-s="done"] .lv-sh-ok { opacity: 1; transform: none; }

/* the log starts under the head; once it outgrows the sheet, older messages slide up under a soft top fade
   (a gradient of the sheet's own colour laid over the log — no mask, so new messages never re-raster a masked layer) */
.lv-log {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.lv-log::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, #fefefd 0, rgba(254, 254, 253, 0) 100%);
  opacity: 0;
  transition: opacity 480ms ease;
}
.lv-log.is-over::before { opacity: 1; }
.lv-msgs { position: absolute; left: 0; right: 0; bottom: 0; min-height: 100%; display: flex; flex-direction: column; padding: 2px 24px 24px 26px; }

.lv-m { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 560ms var(--ease-out); }
.lv-m[data-on="1"] { grid-template-rows: 1fr; }
.lv-m-in { min-height: 0; overflow: hidden; }
.lv-m-body { display: flex; flex-direction: column; align-items: flex-start; padding-top: 16px; }
.lv-m[data-who="a"] .lv-m-body { align-items: flex-end; }

.lv-bub {
  max-width: 82%;
  padding: 10px 14px 11px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 21px;
  letter-spacing: -0.006em;
  color: var(--ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--lv-ease-soft) 110ms, transform 620ms var(--ease-out) 60ms;
}
.lv-m[data-on="1"] .lv-bub { opacity: 1; transform: none; }
/* candidate: on the sheet, drawn with hairlines */
.lv-m[data-who="c"] .lv-bub {
  border-bottom-left-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #fbfaf7);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 15, 0.12), inset 0 1px 0 #fff;
}
/* Alfred: the lapis language */
.lv-m[data-who="a"] .lv-bub {
  border-bottom-right-radius: 6px;
  background: rgba(36, 51, 232, 0.06);
  box-shadow: inset 0 0 0 1px rgba(36, 51, 232, 0.3);
}
.lv-bub-t { display: block; }

.lv-meta { margin: 6px 6px 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 420ms var(--lv-ease-soft) 260ms; }
.lv-meta b { font-weight: 600; color: var(--lapis); }
.lv-m[data-on="1"] .lv-meta { opacity: 1; }

/* the Critic on every reply: a small lapis mark — an arc while it reads (as Alfred writes), a tick once it passes */
.lv-meta-crit { display: inline-flex; align-items: center; white-space: nowrap; }
.lv-cm { position: relative; display: inline-block; flex: none; width: 12px; height: 12px; }
.lv-cm > svg { position: absolute; inset: 0; width: 12px; height: 12px; color: var(--lapis); }
.lv-cm-spin { opacity: 0; transition: opacity 160ms ease; }
.lv-cm-path { stroke-width: 2.2px; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 380ms var(--ease-out); }
[data-crit="checking"] .lv-cm-spin { opacity: 1; }
.lv-m--typing[data-on="1"] [data-crit="checking"] .lv-cm-spin { animation: lvSpin 0.9s linear infinite; }
[data-crit="done"] .lv-cm-path { stroke-dashoffset: 0; }
.lv-meta--typing { margin-top: 5px; }
.lv-m--typing[data-who="a"] .lv-m-body { padding-bottom: 2px; }

/* file chips: labels, not real files */
.lv-file {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 13px 9px 10px;
  border-radius: 11px;
  background: var(--lv-sheet);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 15, 0.1), 0 1px 2px rgba(20, 20, 15, 0.05);
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.lv-file-n { min-width: 0; overflow-wrap: anywhere; }
.lv-doc { flex: none; width: 17px; height: 17px; color: var(--ink-2); }
.lv-bub--file { padding: 0; }
.lv-bub--file .lv-file { margin: 0; padding: 11px 15px 11px 12px; background: none; box-shadow: none; }

/* typing: three dots (ink for the candidate, lapis for Alfred) — a live signal only while it is true */
.lv-m--typing .lv-bub { transition: opacity 200ms var(--lv-ease-soft), transform 420ms var(--ease-out); }
.lv-dots { display: inline-flex; gap: 4px; padding: 14px 15px 14px; }
/* (painted, not composited: a first composited animation of these dots stalled the GPU for ~80 ms on a cold cache) */
.lv-dots i { --lv-dot: 166, 164, 156; position: relative; top: 0; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--lv-dot), 0.35); }
.lv-m--typing[data-on="1"] .lv-dots i { animation: lvDot 1.15s ease-in-out infinite; }
.lv-dots i:nth-child(2) { animation-delay: 0.16s; }
.lv-dots i:nth-child(3) { animation-delay: 0.32s; }
.lv-m--typing[data-who="a"] .lv-dots i { --lv-dot: 36, 51, 232; }
@keyframes lvDot {
  0%, 64%, 100% { background-color: rgba(var(--lv-dot), 0.35); top: 0; }
  30% { background-color: rgba(var(--lv-dot), 1); top: -2px; }
}

/* the seal: when the approval reaches the conversation, one lapis light runs once around the sheet's edge */
@property --lv-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lv-seal {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, #fefefd 0%, #fbfaf7 100%) padding-box,
    conic-gradient(from var(--lv-a) at 50% 50%, rgba(36, 51, 232, 0) 0deg, rgba(36, 51, 232, 0) 280deg, rgba(36, 51, 232, 0.25) 318deg, rgba(36, 51, 232, 0.95) 352deg, rgba(36, 51, 232, 0) 360deg) border-box;
  opacity: 0;
}
.lv-sheet.is-sealed .lv-seal { animation: lvSeal 1700ms cubic-bezier(0.45, 0, 0.25, 1) both; }
@keyframes lvSeal {
  0% { --lv-a: 40deg; opacity: 0; }
  10% { opacity: 1; }
  78% { opacity: 1; }
  100% { --lv-a: 400deg; opacity: 0; }
}

/* the socket on the sheet's edge where the cable is plugged in */
.lv-port {
  position: absolute;
  z-index: 6;
  right: 0;
  top: 130px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(50%, -50%);
  background: linear-gradient(180deg, #ffffff, #f1f0ec);
  box-shadow: 0 0 0 1px rgba(20, 20, 15, 0.16), 0 2px 4px -1px rgba(20, 20, 15, 0.18), inset 0 1px 0 #fff;
}
.lv-port i {
  position: absolute;
  inset: 4.5px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: background-color 180ms ease, box-shadow 280ms ease;
}
.lv-port.is-lit i { background: var(--lapis); box-shadow: 0 0 0 3px rgba(36, 51, 232, 0.16); }

/* ---------- the cable ---------- */
.lv-c-shadow { fill: none; stroke: rgba(20, 20, 15, 0.05); stroke-width: 6; stroke-linecap: round; }
.lv-c-line { fill: none; stroke: rgba(20, 20, 15, 0.34); stroke-width: 1; }
.lv-c-hi { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 0.7; }
.lv-c-line, .lv-c-hi, .lv-c-shadow { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-io) 380ms; }
.lv.is-in .lv-c-line, .lv.is-in .lv-c-hi, .lv.is-in .lv-c-shadow { stroke-dashoffset: 0; }
.lv-s-glow { fill: none; stroke: var(--lapis); stroke-width: 7; stroke-linecap: round; opacity: 0.16; }
.lv-s-wake { fill: none; stroke: rgba(36, 51, 232, 0.2); stroke-width: 1; transition: opacity 120ms linear; }
.lv-s-tail { fill: none; stroke: var(--lapis); stroke-linecap: round; }
.lv-s-tail1 { stroke-width: 1.3; opacity: 0.2; }
.lv-s-tail2 { stroke-width: 1.6; opacity: 0.42; }
.lv-s-tail3 { stroke-width: 2; opacity: 0.9; }
.lv-s-halo { fill: var(--lapis); fill-opacity: 0.12; }
.lv-s-head { fill: var(--lapis); }
.lv-s-core { fill: #ffffff; opacity: 0.95; }

/* a fine pointillé field behind the glass: crisp around the drawer, frosted under it */
.lv-field {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(239, 238, 234, 0) 52%, rgba(239, 238, 234, 0.6) 74%, #efeeea 100%),
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27%3E%3Ccircle cx=%277%27 cy=%277%27 r=%271%27 fill=%27%2314140f%27 fill-opacity=%27.26%27/%3E%3C/svg%3E");
  background-size: 100% 100%, 14px 14px;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
  opacity: 0;
  transition: opacity 1200ms var(--lv-ease-soft) 300ms;
}
.lv.is-in .lv-field { opacity: 1; }

/* ---------- (b) Alfred's drawer (glass) ---------- */
.lv-drawer {
  grid-column: 3;
  grid-row: 1;
  z-index: 3;
  margin-top: 76px;
  padding: 24px 28px 24px;
  overflow: hidden; /* the card is revealed by the pane's own edge while its slot opens */
  border-radius: 26px;
  /* glass: a cool, clear pane — specular sheen from the top-left, a little thickness at the foot */
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.12) 36%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(248, 249, 252, 0.94) 0%, rgba(241, 242, 247, 0.97) 100%);
  box-shadow:
    0 2px 4px rgba(20, 20, 15, 0.05),
    0 32px 64px -24px rgba(20, 20, 15, 0.22),
    0 80px 120px -40px rgba(20, 20, 15, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(20, 20, 15, 0.05),
    inset 0 -40px 60px -50px rgba(20, 20, 15, 0.1);
}
.lv-drawer::before { background: var(--lv-edge-glass); }
.lv-dr-head { display: flex; align-items: center; gap: 14px; }
.lv-presence { position: relative; flex: none; width: 36px; height: 36px; }
/* the cable seen through the glass: from the pane's edge into Alfred */
.lv-presence::before {
  content: "";
  position: absolute;
  right: calc(100% - 4px);
  top: 50%;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(20, 20, 15, 0.18), rgba(20, 20, 15, 0.05));
}
.lv-colony { position: relative; display: block; width: 36px; height: 36px; }
.lv-presence-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--lapis); opacity: 0; pointer-events: none; }
.lv-presence.is-landed .lv-presence-ring { animation: lvLand 900ms var(--ease-out) both; }
@keyframes lvLand {
  0% { opacity: 0.55; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.9); }
}
.lv-dr-id { min-width: 0; }
.lv-kicker { margin: 0; font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.lv-dr-title { margin: 3px 0 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }
.lv-dr-layers { display: grid; }

/* "Writes in — Polish": the language the candidate writes in, read from the first message */
.lv-lang {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 20px;
  margin: 8px 0 0 50px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 380ms var(--lv-ease-soft), transform 520ms var(--ease-out);
}
.lv-lang-v { color: var(--lapis); font-weight: 550; }
.lv-lang-v::before { content: "—"; margin-right: 8px; color: var(--ink-3); font-weight: 400; }
.lv-lang[data-on="1"] { opacity: 1; transform: none; }

/* the ledger: hairline rows; the status glyph sits in Alfred's column (under the colony), labels align with the title */
.lv-ledger { list-style: none; margin: 18px 0 0; padding: 0; }
.lv-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, max-content) minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  min-height: 48px;
  padding: 12px 0;
}
.lv-row > .lv-g { justify-self: center; }
.lv-row::before, .lv-row:last-child::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--rule);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.lv-row:last-child::after { inset: auto 0 0 0; }
.lv-row--critic { margin-top: 10px; }
.lv-row--critic::before { background: var(--rule-2); }
/* while a row is being checked, a lapis light runs along its hairline */
.lv-sweep { position: absolute; inset: 0 0 auto 0; height: 1px; overflow: hidden; pointer-events: none; }
.lv-sweep::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: linear-gradient(90deg, rgba(36, 51, 232, 0), rgba(36, 51, 232, 0.85) 78%, rgba(36, 51, 232, 0));
  transform: translateX(-100%);
  opacity: 0;
}
.lv-row[data-s="checking"] .lv-sweep::after { opacity: 1; animation: lvSweep 900ms var(--ease-io) infinite; }
@keyframes lvSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(265%); }
}
.lv-t { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.003em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.lv-k { font-size: 14px; line-height: 20px; color: var(--ink-3); transition: color 300ms ease; white-space: nowrap; }
.lv-v { position: relative; min-width: 0; text-align: right; font-size: 14.5px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.lv-v::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--ink-5);
  transition: opacity 200ms ease;
}
.lv-v-t { display: inline-block; opacity: 0; transform: translateY(3px); transition: opacity 380ms var(--lv-ease-soft), transform 520ms var(--ease-out); }
.lv-row[data-s="checking"] .lv-k, .lv-row[data-s="done"] .lv-k { color: var(--ink-2); }
.lv-row[data-s="done"] .lv-v::after { opacity: 0; }
.lv-row[data-s="done"] .lv-v-t { opacity: 1; transform: none; }

/* status glyph: pending ring · lapis arc while checking · ink check once settled */
.lv-g { position: relative; width: 16px; height: 16px; flex: none; }
.lv-g > * { position: absolute; inset: 0; }
.lv-g-ring { inset: 3.5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-4); transition: opacity 200ms ease; }
.lv-g-spin { width: 16px; height: 16px; color: var(--lapis); opacity: 0; transition: opacity 200ms ease; }
.lv-g-check { width: 16px; height: 16px; color: var(--lv-check); opacity: 0; transform: scale(0.55); transition: opacity 220ms ease, transform 460ms var(--ease-out); }
.lv-g-disc { fill-opacity: 0.09; }
.lv-g-tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms var(--ease-out) 120ms; }
.lv-g-pulse { border-radius: 50%; box-shadow: 0 0 0 1px var(--ink-4); opacity: 0; }
.lv-row--critic .lv-g-pulse { box-shadow: 0 0 0 1px var(--lapis); }
.lv-row[data-s="checking"] .lv-g-ring { opacity: 0; }
.lv-row[data-s="checking"] .lv-g-spin { opacity: 1; animation: lvSpin 0.9s linear infinite; }
.lv-row[data-s="done"] .lv-g-ring { opacity: 0; }
.lv-row[data-s="done"] .lv-g-check, .lv-g--done .lv-g-check { opacity: 1; transform: none; }
.lv-row[data-s="done"] .lv-g-tick, .lv-g--done .lv-g-tick { stroke-dashoffset: 0; }
.lv-g--done .lv-g-ring { opacity: 0; }
.lv-row[data-pulse="1"] .lv-g-pulse { animation: lvPulse 900ms var(--ease-out) both; }
.lv-row--critic[data-pulse="1"] .lv-g-pulse { animation-duration: 1300ms; }
@keyframes lvSpin { to { transform: rotate(360deg); } }
@keyframes lvPulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.7); }
}

/* the approval card: porcelain inside the glass; its slot opens when it lands and closes around it when it folds */
.lv-card-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 560ms var(--ease-out); }
.lv-card-slot[data-s="in"] { grid-template-rows: 1fr; }
.lv-card-room { min-height: 0; padding-top: 18px; }
.lv-card {
  display: grid;
  grid-template-rows: 1fr 0fr;
  border-radius: 14px;
  background: var(--lv-sheet);
  box-shadow: 0 0 0 1px rgba(20, 20, 15, 0.07), 0 1px 2px rgba(20, 20, 15, 0.06), 0 14px 30px -14px rgba(20, 20, 15, 0.26), inset 0 1px 0 #fff;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--lv-ease-soft) 160ms, transform 640ms var(--ease-out) 60ms, grid-template-rows 560ms var(--ease-out);
}
.lv-card[data-s="in"], .lv-card[data-s="done"] { opacity: 1; transform: none; }
.lv-card[data-s="done"] { grid-template-rows: 0fr 1fr; }
.lv-card-a, .lv-card-b { min-height: 0; overflow: hidden; }
.lv-card-a { transition: opacity 260ms ease; }
.lv-card[data-s="done"] .lv-card-a { opacity: 0; }
.lv-card-full { padding: 16px 18px 16px; }
.lv-card-q { margin: 0; font-size: 16px; line-height: 22px; font-weight: 550; letter-spacing: -0.014em; color: var(--ink); }
.lv-card-m { margin: 4px 0 0; font-size: 13.5px; line-height: 19px; color: var(--ink-3); text-wrap: pretty; }
.lv-card-acts { display: flex; gap: 8px; margin-top: 14px; }
.lv-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; line-height: 1; font-weight: 500; letter-spacing: -0.008em; white-space: nowrap; }
.lv-btn--ok {
  background: var(--lapis);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(20, 20, 15, 0.18);
  transition: transform 140ms var(--ease-out), background-color 140ms ease, box-shadow 220ms ease;
}
.lv-btn--ok.is-press { transform: scale(0.95); background: var(--lapis-hover); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(36, 51, 232, 0.16); }
.lv-btn--q { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.lv-card-done { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px 15px 16px; opacity: 0; transition: opacity 360ms var(--lv-ease-soft) 160ms; }
.lv-card[data-s="done"] .lv-card-done { opacity: 1; }
.lv-card-done > .lv-g { margin-top: 2px; }
.lv-card-done-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-card-done-t { font-size: 14.5px; line-height: 20px; font-weight: 550; letter-spacing: -0.012em; color: var(--ink); }
.lv-card-done-m { font-size: 13px; line-height: 18px; color: var(--ink-3); text-wrap: pretty; }
.lv-card-done .lv-t { line-height: 20px; }
.lv-card .lv-g--done .lv-g-check { opacity: 0; transform: scale(0.55); }
.lv-card .lv-g--done .lv-g-tick { stroke-dashoffset: 1; }
.lv-card[data-s="done"] .lv-g--done .lv-g-check { opacity: 1; transform: none; transition-delay: 180ms; }
.lv-card[data-s="done"] .lv-g--done .lv-g-tick { stroke-dashoffset: 0; transition-delay: 300ms; }

/* ---------- the tab bar: chapters with progress · the note · pause; the lede is its caption ---------- */
.lv-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: 44px;
  align-items: center;
  column-gap: 24px;
  margin-top: 40px;
}
.lv-tabs { grid-area: 1 / 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 0 30px; }
.lv-note { grid-area: 1 / 2; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-3); white-space: nowrap; }
.lv-pp { grid-area: 1 / 3; }
.lv-caption { margin: 14px 0 0; max-width: 38em; font-size: 16px; line-height: 1.55; color: var(--ink-2); letter-spacing: -0.003em; text-wrap: pretty; }
.lv-tab {
  position: relative;
  min-height: 44px;
  padding: 10px 0 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
  transition: color 160ms ease;
}
.lv-tab:hover { color: var(--ink-2); }
.lv-tab[aria-pressed="true"] { color: var(--ink); }
.lv-tab-track { position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 1px; background: var(--ink-5); overflow: hidden; }
.lv-tab-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--lapis); transform-origin: left center; transform: scaleX(0); }
.lv-tab.is-past .lv-tab-fill { background: var(--ink-4); }
.lv-pp {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #f4f3ef);
  color: var(--ink-2);
  box-shadow: 0 0 0 1px rgba(20, 20, 15, 0.13), 0 1px 2px rgba(20, 20, 15, 0.08), inset 0 1px 0 #fff;
  cursor: pointer;
  transition: color 140ms ease, transform 220ms var(--ease-out);
}
.lv-pp:hover { color: var(--ink); }
.lv-pp:active { transform: scale(0.92); }
.lv-pp svg { width: 16px; height: 16px; }
.lv-pp-play { display: none; }
.lv-pp.is-play .lv-pp-play { display: block; }
.lv-pp.is-play .lv-pp-pause { display: none; }
.lv-pp[hidden] { display: none; }

/* ---------- states ---------- */
.lv-instant, .lv-instant * { transition: none !important; animation: none !important; }
.lv.is-paused * { animation-play-state: paused !important; }
.lv.is-still .lv-obj, .lv.is-still .lv-layer, .lv.is-still .lv-c-line, .lv.is-still .lv-c-hi, .lv.is-still .lv-c-shadow { transition: none; }
/* the still state shows the whole conversation, nothing clipped (phones included) */
.lv.is-still .lv-sheet { height: auto; }
.lv.is-still .lv-log { overflow: visible; }
.lv.is-still .lv-log::before { display: none; }
.lv.is-still .lv-msgs { position: relative; inset: auto; }

@media (prefers-reduced-motion: reduce) {
  .lv *, .lv *::before, .lv *::after { transition: none !important; animation: none !important; }
}

/* ---------- widths ---------- */
@media (max-width: 1180px) {
  .lv-scene { grid-template-columns: minmax(0, 1.12fr) minmax(64px, 0.34fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .lv-scene { display: flex; flex-direction: column; align-items: stretch; gap: 84px; }
  .lv-sheet { height: 560px; }
  .lv-drawer { margin-top: 0; }
  .lv-port { right: auto; left: 72%; top: auto; bottom: 0; transform: translate(-50%, 50%); }
  .lv-field { display: none; }
  .lv-presence::before { right: auto; left: 50%; top: auto; bottom: calc(100% - 4px); width: 1px; height: 40px; background: linear-gradient(180deg, rgba(20, 20, 15, 0.22), rgba(20, 20, 15, 0.06)); }
  .lv-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px auto; column-gap: 16px; }
  .lv-note { grid-area: 2 / 1 / 3 / 3; justify-self: end; margin-top: 6px; }
  .lv-pp { grid-area: 1 / 2; }
}
@media (max-width: 640px) {
  .lv-tab-n { display: none; }
  .lv-tabs { gap: 0 24px; }
}
@media (max-width: 560px) {
  .lv-scene { gap: 72px; }
  .lv-sheet { height: 488px; border-radius: 22px; }
  .lv-sheet::after { inset: 68px 0 auto 0; }
  .lv-sh-head { height: 68px; padding: 0 18px 0 20px; }
  .lv-msgs { padding: 0 16px 18px 18px; }
  .lv-bub { max-width: 88%; font-size: 15px; line-height: 22px; }
  .lv-meta { font-size: 12.5px; }
  .lv-drawer { padding: 20px 20px 20px; border-radius: 22px; }
  .lv-dr-title { font-size: 32px; }
  .lv-ledger { margin-top: 14px; }
  .lv-row { min-height: 46px; padding: 11px 0; }
  .lv-card-room { padding-top: 14px; }
  .lv-card-full { padding: 14px 16px 15px; }
  .lv-v { font-size: 14px; }
  .lv-bar { margin-top: 32px; }
}