/* Recreated product surfaces.
 *
 * These are drawn in HTML and CSS, never screenshotted. That is the house film
 * rule (Video Studio: "live DOM recreation drawn in code, cued to the read —
 * never a screenshot, never a screen recording") and it buys four things here:
 * the surfaces stay sharp at any density, they reflow on a phone, they weigh
 * nothing, and there is no ledger tile to crop and no Sample data chip to
 * composite on afterwards, because both are authored.
 *
 * Every surface that shows a figure wears the chip. That is a disclosure, not
 * decoration: the chip is a Video Studio overlay in the films and it carries
 * the same job here.
 *
 * Recreated product UI keeps the app's real font (Inter). Fidelity to the real
 * app beats good type on these surfaces — see Video Studio TYPOGRAPHY.md.
 */

/* ====================================================================
   THE INVERSION — two states, both always visible
   ==================================================================== */

.inversion { display: grid; gap: var(--s-3); }

.inversion-label {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0;
  display: flex; align-items: center; gap: var(--s-2);
}

.inversion-turn {
  color: var(--accent);
  margin-top: var(--s-2);
}

/* The "before" state is deliberately quiet: present, legible, and clearly the
   thing being argued against rather than the thing being sold. */
.brief-before {
  box-shadow: none;
  border: 1px dashed var(--rule-strong);
  background: transparent;
  max-width: 460px;
}
.brief-before .brief-body { padding: var(--s-4); }
.brief-before .brief-empty {
  background: var(--card);
  border-style: solid;
}
.brief-blank {
  margin: var(--s-3) 0 0;
  font-family: var(--body);
  font-size: var(--t-micro);
  color: var(--muted);
}
.brief-tenant {
  font-family: var(--body);
  font-size: var(--t-micro);
  color: var(--muted);
}

/* ====================================================================
   THE RUN CARD — a scheduled run, and a ticket investigation
   ==================================================================== */

.run {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-doc);
  font-family: var(--app);
  overflow: hidden;
}
.band-dark .run { border-color: var(--rule-on-dark); box-shadow: var(--lift-dark); }

.run-head {
  display: grid; gap: 3px;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.band-dark .run-head { border-bottom-color: var(--rule-on-dark); }

.run-title {
  font-size: .95rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink);
}
.run-state {
  font-size: var(--t-micro); font-weight: 500; color: var(--muted);
}

.run-steps {
  list-style: none; margin: 0; padding: var(--s-4) var(--s-5);
  display: grid; gap: var(--s-3);
}

.run-step {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--s-3);
  align-items: start;
  font-size: .9rem; line-height: 1.45; color: var(--ink-soft);
}

.run-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); margin-top: 6px;
  box-shadow: 0 0 0 3px var(--ok-wash);
}

/* The one that says it could not confirm something. Being told what it does
   NOT know is the part that earns trust, so it is marked, not buried. */
.run-step-flag { color: var(--ink); }
.run-step-flag .run-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(217,119,6,.14); }

/* The last step is always the same shape: it stopped. */
.run-step-stop {
  color: var(--ink); font-weight: 600;
  padding-top: var(--s-3); border-top: 1px dashed var(--rule-strong);
  margin-top: var(--s-1);
}
.run-step-stop .run-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.run-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--rule);
}
.band-dark .run-foot { border-top-color: var(--rule-on-dark); }
.band-dark .sample-chip {
  background: rgba(238,242,249,.07); color: var(--muted-on-dark); border-color: var(--rule-on-dark);
}

.run-wait {
  font-family: var(--body);
  font-size: var(--t-micro); font-weight: 600; color: var(--accent);
}

/* ====================================================================
   SETUP — the answer to the flexibility trap, set apart from the section
   it closes because it is a rebuttal, not another paragraph
   ==================================================================== */

.setup {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 2px solid var(--ink);
  display: grid; gap: var(--s-4);
}
@media (min-width: 940px) {
  .setup {
    grid-template-columns: minmax(0, 24ch) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
}
.setup h3 { margin: 0; }
.setup-body p { color: var(--ink-soft); }
.setup-kicker {
  font-weight: 600;
  color: var(--ink);
}

/* ====================================================================
   PULL — one line per section allowed to be loud, set in the display face
   ==================================================================== */

.pull {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
  max-width: none;
}

/* ====================================================================
   THE CONTEXT STACK — mission, goal, season, records, and the question
   that comes out the bottom. Each layer steps in, joined to the one above.
   ==================================================================== */

.cstack {
  background: var(--paper-2);
  border-radius: var(--r-doc);
  padding: var(--s-5);
  font-family: var(--app);
  --step: 10px;
}
@media (min-width: 560px) { .cstack { padding: var(--s-6); --step: 22px; } }

.cstack-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.cstack-row {
  position: relative;
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-3);
  align-items: start;
  margin-left: calc(var(--i, 0) * var(--step));
  padding: var(--s-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-doc);
}
/* the joint to the layer above */
.cstack-row + .cstack-row::before {
  content: ""; position: absolute;
  left: calc(var(--s-4) + 8px - var(--step));
  top: calc(-1 * var(--s-3) - 1px);
  width: 1px; height: var(--s-3);
  background: var(--rule-strong);
}
.cstack-ico { color: var(--muted); margin-top: 2px; }
.cstack-k {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.cstack-v { display: block; font-size: .95rem; line-height: 1.4; color: var(--ink); }

.cstack-out { border-left: 3px solid var(--accent); }
.cstack-out .cstack-ico, .cstack-out .cstack-k { color: var(--accent); }
.cstack-out .cstack-v { font-weight: 600; }

.cstack-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-4);
}

/* ====================================================================
   THE RECORD THREAD — what was said on a record, then what happened to it
   ==================================================================== */

.thread {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-doc);
  font-family: var(--app);
  overflow: hidden;
}

.thread-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.thread-title { font-size: .95rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.thread-tags { display: inline-flex; align-items: center; gap: var(--s-2); }
.thread-pill {
  font-size: .68rem; font-weight: 700; padding: 3px var(--s-3); border-radius: var(--r-pill);
  background: var(--ok-wash); color: var(--ok);
}
.thread-owner {
  font-size: .68rem; font-weight: 600; padding: 3px var(--s-3); border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); color: var(--ink-soft);
}

.thread-log { list-style: none; margin: 0; padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); }
.thread-log li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.thread-av {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 700;
  background: var(--paper-3); color: var(--ink-soft);
}
.thread-av-agent { border-radius: 7px; background: var(--accent); color: #fff; font-size: .62rem; font-weight: 800; }
.thread-who { margin: 0 0 2px; font-size: .85rem; color: var(--ink); }
.thread-who span { color: var(--muted); font-size: .75rem; margin-left: var(--s-2); }
.thread-say { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); max-width: none; }

.thread-trail { border-top: 1px solid var(--rule); }
.thread-trail .run-steps { padding-top: 0; }
.thread-label {
  margin: 0; padding: var(--s-4) var(--s-5) var(--s-3);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ====================================================================
   ONE SYSTEM — the guest and the house, in the same before and after
   shape as the hero: separate products above, one system below.
   ==================================================================== */

.sys { display: grid; gap: var(--s-3); font-family: var(--app); }

.sys-guest {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-doc);
  padding: var(--s-5);
}
.sys-ai {
  display: inline-flex;
  font-size: .78rem; font-weight: 700;
  padding: 4px var(--s-3); border-radius: var(--r-pill);
  background: var(--paper-3); color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.sys-apart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 560px) { .sys-apart { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sys-apart span {
  border: 1px solid var(--rule-strong); border-radius: var(--r-doc);
  padding: var(--s-3) var(--s-2); text-align: center;
  font-size: .85rem; color: var(--muted);
}

.sys-home {
  position: relative;
  background: var(--card);
  border-radius: var(--r-doc);
  box-shadow: var(--lift-2);
  padding: var(--s-5);
  overflow: hidden;
}
.sys-home::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--accent);
}
.sys-together { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 560px) { .sys-together { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sys-together span {
  background: var(--paper-2); border-radius: var(--r-doc);
  padding: var(--s-3) var(--s-2); text-align: center;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.sys-together .sys-agents { background: var(--accent); color: #fff; }

.sys-cap {
  margin: var(--s-4) 0 0;
  font-family: var(--body); font-size: var(--t-micro); color: var(--muted);
}

/* ====================================================================
   AFTER THE YES — the usual pipeline with its missing stage, then one
   that carries on past the close and flags the job that overstayed.
   ==================================================================== */

.lanes { display: grid; gap: var(--s-3); font-family: var(--app); }

.lanes-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-5);
}
.lanes-row li {
  position: relative;
  font-size: .82rem; font-weight: 600;
  padding: 6px var(--s-3); border-radius: var(--r-pill);
}
/* the arrow to the next stage */
.lanes-row li:not(:last-child)::after {
  content: "\203A"; position: absolute;
  right: calc(-1 * var(--s-5) + 6px); top: 50%; transform: translateY(-52%);
  font-size: 1rem; color: var(--muted);
}

.lanes-old li { border: 1px solid var(--rule-strong); color: var(--muted); }
.lanes-old .lanes-gap {
  border-style: dashed; border-color: var(--warn);
  color: var(--warn); font-style: italic;
}

.lanes-board {
  display: grid; gap: var(--s-4);
  background: var(--card);
  border-radius: var(--r-doc);
  box-shadow: var(--lift-2);
  padding: var(--s-5);
}
.lanes-new li { background: var(--paper-2); color: var(--ink); }
.lanes-new .lanes-flag {
  background: var(--accent-wash); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}

.lanes-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-doc);
  padding: var(--s-4);
}
.lanes-card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.lanes-card-title { font-size: .85rem; font-weight: 700; color: var(--ink); }
.lanes-pill {
  font-size: .68rem; font-weight: 700;
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  background: rgba(217, 119, 6, .12); color: var(--warn);
}
.lanes-card-q { font-size: .95rem; line-height: 1.45; color: var(--ink); margin: 0 0 var(--s-4); max-width: none; }

.lanes-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }