/* Founder Terminal. Styles from badideas-gtm-engine-check public/styles.css (the tools terminal), with the additions at the end. */

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; }
}

/* ---- Founder Terminal additions ----------------------------------------- */
.tagline { font-size: var(--text-base); line-height: 1.55; margin: 0 0 16px; max-width: 70ch; }
.tl-q { color: var(--fg); font-weight: 700; margin-top: 14px; }
.tl-q::before { content: '> '; color: var(--fg-muted); }
.tl-a { margin-top: 6px; }
.tl-a .cite { color: var(--fg-muted); text-decoration: none; font-size: 0.86em; vertical-align: 0.1em; }
.tl-a .cite:hover { color: var(--fg); text-decoration: underline; }
.tl-sources { margin-top: 8px; color: var(--fg-muted); font-size: 12.5px; }
.tl-sources a { color: var(--fg-soft); }
.tl-sources .src-date { color: var(--fg-muted); }
.tl-ask { margin-top: 10px; color: var(--fg-muted); }
.tl-ok { color: var(--fg-soft); }
.tl-welcome-title { font-weight: 700; letter-spacing: 0.08em; }
.term-options .opt.starter { white-space: normal; max-width: 100%; }
@media (max-width: 560px) {
  .term-options .opt { padding: 10px 12px; font-size: 13px; }
}
/* Embedded: the terminal fills the iframe exactly and scrolls its own transcript,
   so new lines and the feedback buttons stay in view. */
.is-framed body { overflow: hidden; }
.is-framed .page { height: 100vh; }
.is-framed .terminal { min-height: 0; }
/* Embedded and not yet used: the terminal is only as tall as its contents, and the page
   embedding it sizes the iframe to match. The first question removes is-compact. */
.is-framed.is-compact .page { height: auto; }
.is-framed.is-compact .terminal { flex: none; }
.is-framed.is-compact .term-body { flex: none; overflow: visible; }