/* GTM Engine Check. Product register, light paper page; the terminal is the
   one concentrated dark terminal element on the surface (visual law section 5). */

html, body { height: 100%; }
body { display: flex; flex-direction: column; }

.page {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px clamp(12px, 3vw, 32px) 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box;
}

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
}
header.site .wordmark { height: 26px; display: block; }
.subbrand {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}

.hero { margin-bottom: 16px; }
.hero-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.promise {
  font-size: clamp(26px, 4.6vw, 44px);
  margin: 0;
  max-width: 24ch;
}
/* The time signal, pulled out of the headline so the title stays one line:
   a small chrome/data label, not a competing second headline. */
.time-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  background: var(--hair);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  white-space: nowrap;
}
/* The fund's thesis: why GTM is the variable that decides the outcome, not
   product or tech. Sits between the promise and the tool's own mechanics
   (.lede), giving the reader the stakes before the how-to. */
.why-block {
  border-top: 1px solid var(--hair);
  padding-top: 10px;
  margin-bottom: 14px;
}
.why-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  margin-bottom: 8px;
}
/* Same size/leading as .lede below: these two paragraphs read as one
   continuous voice (stakes, then mechanics), so they must match exactly. */
.why-copy {
  font-size: var(--text-base);
  line-height: 1.55;
  margin: 0;
}
.lede {
  font-size: var(--text-base);
  line-height: 1.55;
  margin: 0 0 16px;
}
.steps {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.steps li {
  font-size: var(--text-sm);
  line-height: 1.5;
  padding-top: 4px;
}
.step-n {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-right: 8px;
}
.step-t {
  font-weight: 600;
}

/* Authority strip: the named operators the interview draws its methodology
   from. Each card carries the approved short-form bio (built + now, from
   pods/brand/foundation/06-gtm-operator-bios.md / Marv landing v19), not an
   invented summary -- the facts are the credibility, nothing here sells them. */
.operators-block {
  padding-top: 4px;
  margin-bottom: 12px;
}
.operators-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.operators-row li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.operator-photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: none;
  filter: grayscale(1) contrast(1.05);
}
.operator-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.operator-namerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.operator-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}
.operator-role {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  line-height: 1.5;
}
.operator-bio {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-muted);
  margin: 0 0 4px;
}
.operator-link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg);
  text-decoration: underline;
  width: fit-content;
}

/* ---- The terminal ------------------------------------------------------- */
.terminal {
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 420px;
  max-height: 78vh;
  overflow: hidden;
  scroll-margin-top: 16px;
}

/* Embedded on badideas.fund/gtm-engine-check: the parent page writes the
   hero/why/steps/operators copy natively, so only the terminal itself
   should render here, edge to edge, filling whatever height the iframe
   was given (badideas-deck-reviewer's static/index.html does the same
   is-framed dance for the same reason). */
.is-framed .hero,
.is-framed .operators-block {
  display: none;
}
.is-framed body {
  background: #000000;
}
.is-framed .page {
  max-width: none;
  padding: 0;
}
.is-framed .terminal {
  border-radius: 0;
  max-height: none;
}
.term-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair);
  flex: none;
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: #262626; }
.term-title {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.term-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  flex: none;
}
/* Inline terminal-style progress: sits between the title and the meta text in
   the chrome row itself. Stepped blocky fill, sharp corners (the loader
   idiom earns them). Fills the row's remaining space when visible. */
.term-progress {
  flex: 1;
  height: 6px;
  min-width: 40px;
  margin: 0 16px;
  background: #141414;
  overflow: hidden;
}
.term-progress-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(90deg, var(--fg) 0 6px, transparent 6px 9px);
  transition: width 500ms linear;
}

.term-body {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.term-lines { white-space: pre-wrap; overflow-wrap: break-word; }
.tl { min-height: 1em; }
.tl-title { font-weight: 700; letter-spacing: 0.08em; }
.tl-muted, .tl-feedback { color: var(--fg-muted); }
.tl-question { font-weight: 700; }
.tl-kv { color: var(--fg-soft); }
.tl-verdict { color: var(--fg-soft); }
.tl-constraint { font-weight: 700; }
.tl-cta { font-weight: 700; }
.tl a { color: inherit; }
.tl-in { color: var(--fg-muted); }

/* Options: tappable inline choices in terminal style. */
.term-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; }
.opt {
  font-family: var(--font-mono);
  font-size: 14px;
  background: transparent;
  color: var(--fg);
  border: 0;
  background: #141414;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
}
.opt:hover, .opt:focus-visible { background: #232323; outline: none; }
.opt .k { color: var(--fg-muted); margin-right: 6px; }
/* The interviewer's most probable answer: inverted fill, one strong highlight. */
.opt--likely { background: var(--fg); color: var(--bg); font-weight: 700; }
.opt--likely .k { color: #4D4D4D; }
.opt--likely:hover, .opt--likely:focus-visible { background: #E4E4E0; }
.opt-file { font-weight: 700; }

/* Input row */
.term-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  margin: 0;
}
.prompt-char { color: var(--fg-muted); flex: none; }
.term-input {
  font-family: var(--font-mono);
  font-size: 16px; /* 16px+ prevents iOS zoom-on-focus */
  background: transparent;
  color: var(--fg);
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  caret-color: var(--fg);
}
.term-input::placeholder { color: #4D4D4D; }

.cursor {
  width: 9px; height: 18px;
  background: var(--fg);
  flex: none;
  animation: blink 1.1s steps(1) infinite;
}
.term-input:focus ~ .cursor { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* Live status line: a small blinking block on the left (same convention as
   the cursor above, and the same idea this chat itself uses to show a turn
   is in progress), so waiting reads as active, not stalled. */
.tl-status { display: flex; align-items: baseline; gap: 9px; }
.status-dot {
  width: 8px; height: 8px;
  background: var(--fg-muted);
  flex: none;
  align-self: center;
  animation: blink 0.9s steps(1) infinite;
}

.hidden { display: none !important; }

@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .step-n { font-size: var(--text-sm); }
  .lede { font-size: 15px; margin-bottom: 14px; }
  .why-block { padding-top: 12px; margin-bottom: 16px; }
  .why-copy { font-size: 15px; }
  .operators-block { padding-top: 12px; margin-bottom: 16px; }
  .operators-row { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
}

@media (max-width: 560px) {
  .page { padding-top: 12px; }
  header.site { padding-bottom: 14px; }
  header.site .wordmark { height: 20px; }
  .hero { margin-bottom: 10px; }
  .promise { margin-bottom: 10px; }
  .lede { margin-bottom: 14px; }
  .steps { margin-bottom: 10px; }
  .steps li { padding-top: 8px; font-size: 13px; }
  .operators-block { padding-top: 8px; margin-bottom: 8px; }
  .operators-row { gap: 10px; }
  .operator-photo { width: 40px; height: 40px; }
  .operator-bio, .operator-link { display: none; } /* name + role + face is enough at this width */
  .terminal { min-height: 340px; max-height: none; flex: 1; }
  .term-body { font-size: 13px; padding: 12px; }
}