:root {
  color-scheme: light;
  --ink: #151b20;
  --soft-ink: #293238;
  --muted: #778188;
  --faint: #aab1b5;
  --line: rgba(29, 36, 41, 0.11);
  --paper: #fbf7ef;
  --paper-deep: #f4ecde;
  --surface: rgba(255, 253, 248, 0.74);
  --accent: #7a5731;
  --accent-dark: #563918;
  --shadow: 0 28px 90px rgba(64, 45, 24, 0.10);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.82), transparent 32rem),
    linear-gradient(135deg, #fffaf1 0%, var(--paper) 46%, var(--paper-deep) 100%);
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 58px;
  padding: 10px 24px;
  background: rgba(251, 247, 239, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand span,
h1,
.title-input {
  font-family: Garamond, "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.045em;
}
.brand span { font-size: 1.42rem; line-height: 1; }
.surface-nav {
  justify-self: center;
  display: inline-flex;
  gap: 20px;
  color: var(--faint);
  font-size: 0.82rem;
}
.surface-nav span:first-child { color: var(--soft-ink); }
main { min-height: calc(100vh - 58px); }

h1 {
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.92;
  margin: 0;
}
h2 { margin-top: 0; }
button {
  border: 0;
  border-radius: 999px;
  padding: 10px 17px;
  font: inherit;
  font-weight: 650;
  color: white;
  background: var(--accent);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}
button:hover { background: var(--accent-dark); transform: translateY(-1px); }
button:disabled { opacity: 0.6; cursor: wait; transform: none; }
.link-button { background: transparent; color: var(--muted); padding: 0; }
.link-button:hover { background: transparent; color: var(--ink); transform: none; }
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: rgba(255,255,255,0.52);
}
textarea::placeholder, input::placeholder { color: var(--faint); }
label { display: grid; gap: 8px; color: var(--muted); font-size: 0.9rem; }
.error { color: #9f3b2f; font-weight: 700; }
.principle, .eyebrow {
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 760;
}

/* Entrance / auth */
.auth-card {
  width: min(980px, calc(100vw - 48px));
  margin: 4vh auto;
}
.piloto-lockup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  margin-bottom: 18px;
}
.piloto-lockup img { width: 124px; height: 124px; object-fit: contain; flex: 0 0 auto; }
.auth-card .piloto-lockup { margin-bottom: 12px; }
.auth-card .piloto-lockup img { width: 82px; height: 82px; }
.auth-card h1 { font-size: clamp(3.8rem, 7vw, 5.4rem); }
.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 14px;
}
.card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,0.42);
}
.auth-grid form { display: grid; gap: 12px; }
.card h2 { font-size: 1.35rem; margin-bottom: 8px; }

/* Home: boxless multi-terminal workspace. */
.terminal-workspace {
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 26px 0 56px;
  min-height: calc(100vh - 58px);
}
.terminal-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  overflow-x: auto;
}
.terminal-tab,
.terminal-new {
  flex: 0 0 auto;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--faint);
  font-size: 0.92rem;
  font-weight: 500;
}
.terminal-tab:hover,
.terminal-new:hover {
  background: transparent;
  color: var(--ink);
  transform: none;
}
.terminal-tab.active { color: var(--ink); }
.terminal-surface,
.assets-surface { display: none; }
.terminal-surface.active,
.assets-surface.active { display: block; }
.terminal-stream-form {
  display: grid;
  gap: 18px;
}
.terminal-stream-form textarea {
  min-height: 62vh;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  resize: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  line-height: 1.62;
  outline: none;
}
.terminal-stream-form textarea:focus { outline: none; }
.terminal-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--faint);
  font-size: 0.86rem;
}
.terminal-actions button {
  background: transparent;
  color: var(--accent-dark);
  padding: 0;
  border-radius: 0;
}
.terminal-actions button:hover {
  background: transparent;
  transform: none;
  text-decoration: underline;
}
.assets-search {
  width: min(620px, 100%);
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
}
.assets-list {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}
.asset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  color: var(--ink);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.96rem;
}
.asset-row small,
.empty-assets {
  color: var(--faint);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
}
.asset-row:hover span { text-decoration: underline; }
.quiet-openings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
  padding-top: 18px;
}
.quiet-openings a {
  color: var(--faint);
  text-decoration: none;
  font-size: 0.88rem;
}
.quiet-openings a:hover { color: var(--ink); }

/* Lines: the creative surface dominates. */
.lines-workspace {
  width: min(1060px, calc(100vw - 52px));
  margin: 0 auto;
  padding: 34px 0 170px;
}
.workspace-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 22px;
  margin-bottom: 14px;
}
.workspace-title-block { display: grid; gap: 0; }
.title-input {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: clamp(3.1rem, 7vw, 6.3rem);
  line-height: 0.94;
  outline: none;
}
.intent-input {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0 0;
  color: var(--muted);
  resize: vertical;
  outline: none;
}
.save-state {
  margin: 9px 0 0;
  color: var(--faint);
  font-size: 0.82rem;
}
.writing-surface {
  display: block;
  width: 100%;
  min-height: calc(100vh - 326px);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 30px 0 56px;
  resize: none;
  overflow: hidden;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.28rem, 2.2vw, 1.62rem);
  line-height: 1.76;
  color: var(--ink);
  outline: none;
}
.writing-surface:focus { outline: none; }

/* Pi as ambient capability, not app panel. */
.pi-command-layer {
  position: sticky;
  bottom: 18px;
  z-index: 5;
  margin-top: 18px;
  padding: 10px 0;
  background: rgba(251, 247, 239, 0.72);
  backdrop-filter: blur(16px);
}
.pi-command-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
#pi-message {
  min-height: 42px;
  border: 0;
  background: transparent;
  resize: none;
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
}
.pi-response-panel {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.pi-response-panel[hidden] { display: none; }
.pi-response {
  white-space: pre-wrap;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 14px 0;
  background: transparent;
  font-family: ui-serif, Georgia, serif;
  line-height: 1.58;
}
.pi-actions, .pi-derived-actions, .rep-generate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pi-actions button, .pi-derived-actions button, .rep-generate button {
  padding: 8px 12px;
  font-size: 0.85rem;
}
.pi-derived-actions span, .rep-generate span {
  margin-right: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.representation-strip {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
#representations {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}
#representations li { color: var(--muted); font-size: 0.88rem; }
#representations a { color: var(--accent-dark); }

@media (max-width: 780px) {
  .topbar { grid-template-columns: 1fr auto; min-height: 74px; padding: 12px 18px; }
  .surface-nav { display: none; }
  .brand img { width: 42px; height: 42px; }
  .brand span { font-size: 1.8rem; }
  .home, .auth-card, .lines-workspace { width: min(100vw - 32px, 1060px); }
  .home { padding-top: 6vh; }
  .piloto-lockup img { width: 88px; height: 88px; }
  .piloto-lockup { gap: 18px; }
  .auth-grid, .naked-form, .workspace-header, .pi-command-row { grid-template-columns: 1fr; }
  .lines-workspace { padding-bottom: 190px; }
}