/* The homepage: a governed agent on the left, your account and its telemetry
 * on the right, and nothing else.
 *
 * The two halves are one argument — the terminal shows a tool call stopping for
 * approval, the pane shows the audit row that decision wrote. Putting them on
 * separate pages was the old design, and it meant nobody ever saw both. */

.home-split {
  display: grid;
  /* Asymmetric: the terminal is the argument, the pane is its receipt. The
     pane's content caps out well below its share anyway. */
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--sp-space-5);
  /* The site header is `position: fixed`, so it reserves no space — this is the
     one rule that owns the hero's geometry. `reset.css` also puts a
     `padding-top` on `main`, and `.home-split` *is* the `<main>`, so declaring
     the same property here replaces it rather than stacking with it. `dvh`
     rather than `vh` because mobile browsers retract their chrome mid-scroll,
     and `vh` measures the wrong one. `box-sizing: border-box` is global, so the
     padding sits inside the viewport height. */
  height: 100dvh;
  padding-top: var(--sp-header-height);
  padding-inline: var(--sp-space-6);
  /* The scroll cue is absolutely positioned against this box, so the panes have
     to stop above it — otherwise they run underneath the one thing telling you
     there is more page. Enough for the cue plus its own offset. */
  padding-block-end: var(--sp-space-7);
  min-height: 0;
  /* The body owns the field now. */
  background: none;
}

.home-split-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding-block: var(--sp-space-5);
  overflow-y: auto;
}

/* Both halves are one sheet of glass, so they need one top edge and one bottom
   edge. The terminal already fills its column; this is the account card doing
   the same. Its content stays where it is — top-aligned in a tall card reads as
   deliberate, content distributed down the height does not. */
.home-split-pane--profile .auth-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.home-split-pane--profile .auth-pane .pane {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── the terminal, filling its half ─────────────────────────────────────── */

/* pi-terminal.css sizes the widget for a centred band inside a marketing
   section. Here it is the surface, so the width cap and the fixed body height
   both have to go — the body takes the slack instead. */
.home-split-pane--terminal .pi-terminal {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
}

.home-split-pane--terminal .pi-terminal .terminal {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* `.pi-body-wrap` is the flex child of `.terminal`; `.terminal-body` sits inside
   it. Sizing only the inner element left the wrapper at `flex: 0 1 auto`, so it
   grew to the full height of the transcript, overflowed the shell, and pushed
   the composer out through `overflow: hidden` — the input was in the DOM and
   simply off-screen. The wrapper has to be the flexible one. */
.home-split-pane--terminal .pi-terminal .pi-body-wrap {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.home-split-pane--terminal .pi-terminal .terminal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.home-split-pane--terminal .pi-approvals:not(:empty) {
  flex: none;
  max-height: 40%;
  overflow-y: auto;
}

/* Everything below the transcript is chrome and must never be what shrinks. */
.home-split-pane--terminal .pi-composer,
.home-split-pane--terminal .pi-hint,
.home-split-pane--terminal .pi-palette,
.home-split-pane--terminal .pi-gate {
  flex: none;
}

/* ── narrow ─────────────────────────────────────────────────────────────── */

/* Below the split threshold the two halves stack, terminal first: it is the
   thing worth looking at, and the pane reads as its caption. Each keeps enough
   height to be usable rather than each getting an unreadable sliver. */
@media (max-width: 900px) {
  .home-split {
    /* minmax(0, 1fr), never bare 1fr: a bare 1fr's implicit minimum is
       min-content, and the widest row inside the terminal (meters, approval
       internals) would size the column past the viewport — the transcript then
       renders wider than the screen and is clipped at the pane's edge. */
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    padding-inline: var(--sp-space-3);
    padding-block-end: var(--sp-space-6);
  }

  .home-split-pane {
    min-height: 70dvh;
    overflow: visible;
    padding-block: var(--sp-space-3);
  }

  .home-split-pane--terminal .pi-terminal .terminal-body {
    min-height: 320px;
  }
}