/* ---------------------------------------------------------------
   The Trenches Lab demo. A tool pitch in six beats: the universe,
   the live feed, a coin page, what the verdict is built from, the
   share dialog, and the seam back to the universe.

   Everything is laid out at a fixed design size of 1440x900 inside
   .tl-fit, which is scaled to the frame width. The camera (.tl-cam)
   is the only thing that moves for the pushes. Flat and upright
   throughout: no perspective, no tilt. Transforms and opacity only.
   --------------------------------------------------------------- */
.demo[data-demo="trenches"] { background: var(--ink-0); }

.tl-fit {
  position: absolute; top: 0; left: 0; width: 1440px; height: 900px;
  transform-origin: 0 0; z-index: 1;
}
.tl-cam {
  position: absolute; top: 0; left: 0; width: 1440px; height: 900px;
  transform-origin: 0 0; background: var(--ink-0); overflow: hidden;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  font-weight: 400; color: var(--text-on-ink);
  -webkit-font-smoothing: antialiased;
}
.tl-cam *, .tl-fit * { box-sizing: border-box; }
.tl-cam p, .tl-cam h4 { margin: 0; }
.tl-cam svg { display: block; }

/* ---------- 1. the live universe ---------- */
.tl-uni {
  position: absolute; top: 0; left: 0; width: 1440px; height: 900px;
  display: block; max-width: none; object-fit: cover;
}
.tl-dim { position: absolute; inset: 0; background: var(--ink-0); opacity: 0; }

/* Galaxy callouts: a brass dot on the galaxy, a leader line, an ink
   chip with a brass rule. Placed in universe pixels by the script. */
.tl-co { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tl-co__dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); opacity: 0;
}
.tl-co__line {
  position: absolute; left: 0; top: -0.75px; height: 1.5px;
  background: var(--accent); transform-origin: 0 50%; opacity: 0;
}
.tl-chip {
  position: absolute; white-space: nowrap;
  background: rgba(7, 9, 12, 0.88); border-left: 2px solid var(--accent);
  border-radius: 2px; padding: 12px 20px 12px 17px; opacity: 0;
}
.tl-chip__n {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.1; letter-spacing: 0.18em; text-transform: uppercase;
}
.tl-chip__s { display: block; font-size: 15px; line-height: 1.3; color: var(--text-on-ink-muted); margin-top: 5px; }

/* ---------- 2. the status chip (stage space, never zoomed) ---------- */
.tl-status {
  position: absolute; right: 3.6%; top: 4.6%; z-index: 2;
  display: flex; align-items: center; gap: 0.75cqw;
  padding: 0.7cqw 1.15cqw 0.7cqw 0.95cqw; border-radius: 999px;
  background: rgba(7, 9, 12, 0.88); border: 1px solid var(--ink-line-strong);
  font-family: var(--font-mono); font-size: clamp(0.62rem, 1.25cqw, 0.9rem);
  line-height: 1; color: var(--text-on-ink); white-space: nowrap; opacity: 0;
}
.tl-status__dot { width: 0.55cqw; height: 0.55cqw; border-radius: 50%; background: var(--accent); flex: none; }
.tl-status__pulse {
  position: absolute; left: 0.95cqw; top: 50%; width: 0.55cqw; height: 0.55cqw;
  margin-top: -0.275cqw; border-radius: 50%; border: 1px solid var(--accent); opacity: 0;
}
.tl-status i { font-style: normal; color: var(--text-on-ink-faint); }
.tl-status b { font-weight: 400; color: var(--accent); }

/* ---------- 3. the coin page ---------- */
.tl-win {
  position: absolute; left: 220px; top: 70px; width: 1000px; height: 760px;
  overflow: hidden; border-radius: 8px; border: 1px solid var(--ink-line-strong);
  background: var(--ink-1); opacity: 0;
}
.tl-card {
  position: absolute; left: 0; top: 0; width: 1000px; height: 1736px;
  display: block; max-width: none; object-fit: fill;
}
/* Share button, in card percentages: CSS 168,762 156x44 in a 1440x2500 page. */
.tl-btn {
  position: absolute; left: 11.667%; top: 30.48%; width: 10.833%; height: 1.76%;
  border-radius: 6px; background: rgba(201, 168, 106, 0.5); opacity: 0; pointer-events: none;
}
.demo[data-demo="trenches"] .tl-ring {
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.12);
}

/* Verdict annotations, read at the 1.6x push, so a little smaller. */
.tl-an .tl-chip { padding: 7px 14px 7px 12px; }
.tl-an .tl-chip__n { font-size: 15px; letter-spacing: 0.14em; }
.tl-an .tl-chip__s { font-size: 12px; margin-top: 3px; }

/* ---------- 4. under the hood (an illustrative screen) ---------- */
.tl-hood {
  position: absolute; left: 0; top: 0; width: 1000px; height: 760px;
  padding: 44px 52px 40px; background: var(--ink-1);
  display: flex; flex-direction: column;
}
.tl-hood__k {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
}
.tl-hood__k span + span { color: var(--text-on-ink-muted); }
.tl-hood h4 {
  font-family: var(--font-display); font-size: 38px; font-weight: 300;
  letter-spacing: 0.04em; line-height: 1.15; margin-top: 10px;
}
.tl-hood__s { font-size: 18px; line-height: 1.5; color: var(--text-on-ink-muted); margin-top: 8px; max-width: 640px; }
.tl-rows { margin-top: 26px; border-top: 1px solid var(--ink-line); }
.tl-row {
  display: grid; grid-template-columns: 250px 1fr 340px 28px; align-items: center;
  gap: 24px; height: 80px; border-bottom: 1px solid var(--ink-line);
}
.tl-row__l { font-size: 20px; letter-spacing: 0.01em; }
.tl-row__bar { position: relative; height: 4px; border-radius: 2px; background: rgba(233, 230, 223, 0.12); overflow: hidden; }
.tl-row__bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.tl-row__n { font-family: var(--font-mono); font-size: 15px; line-height: 1.4; color: var(--text-on-ink-muted); }
.tl-row__ok { width: 28px; height: 28px; color: var(--accent); opacity: 0; }
.tl-row__ok svg { width: 28px; height: 28px; }

/* ---------- 5. the share dialog (fit space, above the camera) ---------- */
.tl-scrim { position: absolute; inset: 0; z-index: 2; background: var(--ink-0); opacity: 0; }
.tl-modal {
  position: absolute; left: 360px; top: 154px; width: 720px; height: 592px; z-index: 3;
  display: block; max-width: none; object-fit: fill; border-radius: 10px; opacity: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* ---------- narration ---------- */
.demo[data-demo="trenches"] .demo__caption {
  background: rgba(7, 9, 12, 0.88);
  border-left: 2px solid var(--accent);
  padding: 8px 14px 8px 12px;
  border-radius: 2px; line-height: 1.5;
}