@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #14130d;
  --bg-2: #1a1912;
  --surface: #1f1e16;
  --surface-2: #26241b;
  --text: #ece9dd;
  --muted: #a6a395;
  --dim: #74715f;
  --accent: #e0a93c;
  --accent-2: #f0c46a;
  --green: #7cc04a;
  --red: #df5f55;
  --border: #322f22;
  --border-2: #3f3b2b;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@view-transition { navigation: auto; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(224,169,60,.06), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: the page fills at least the viewport, main grows to take
     the slack, so the footer sits at the bottom on short pages. Flexbox
     accounts for the header height automatically (no vh math needed). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--accent-2); }

.container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 2.75rem 1.25rem 4rem;
  flex: 1 0 auto; /* grow to push the footer down */
  animation: pageIn .4s var(--ease) both;
}

@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  background: rgba(20,19,13,.8);
  backdrop-filter: saturate(140%) blur(10px);
}
.brand { color: var(--text); font-weight: 500; font-size: 1.02rem; letter-spacing: -.01em; }
.brand .accent { color: var(--accent); }
.brand:hover { color: var(--text); }
.navlinks { display: flex; align-items: center; gap: 1.25rem; font-size: .85rem; }
.navlinks a:not(.btn) { color: var(--muted); }
.navlinks a:not(.btn):hover { color: var(--accent); }
.inline { display: inline; }
.linklike { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; transition: color .15s var(--ease); }
.linklike:hover { color: var(--accent); }

/* Typography */
h1 { font-size: 2rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.12; }
h2 { font-size: 1.18rem; font-weight: 500; margin-bottom: .75rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 500; }
.lead { font-size: 1.12rem; color: var(--muted); margin: 1.25rem 0 2rem; max-width: 48ch; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.hint { color: var(--dim); font-size: .8rem; font-weight: 400; }

/* Buttons */
.btn {
  display: inline-block; background: linear-gradient(180deg, #f5cd66, #edba4c);
  color: #14110a; padding: .62rem 1.15rem; border: none; border-radius: var(--radius);
  font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(224,169,60,.16);
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn:hover { color: #14110a; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 22px rgba(224,169,60,.26); }
.btn:active { transform: translateY(0); filter: brightness(.96); }
.btn-sm { padding: .38rem .8rem; font-size: .82rem; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1.05rem; }

/* Hero / landing */
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 6vw, 3rem); animation: rise .5s var(--ease) both; }
.hero .lead { animation: rise .5s .08s var(--ease) both; }
.hero .btn-lg { animation: rise .5s .16s var(--ease) both; }
.hero .small { animation: rise .5s .24s var(--ease) both; margin-top: 1rem; }
.steps { margin: 1rem 0 0 1.1rem; display: flex; flex-direction: column; gap: .6rem; color: var(--muted); }
.steps strong { color: var(--text); font-weight: 500; }
.how { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }

/* Credibility strip */
.about { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.about p { color: var(--muted); max-width: 58ch; margin-bottom: 1.5rem; }
.about p strong { color: var(--text); font-weight: 500; }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-bottom: 1.25rem; }
.proof li { display: flex; flex-direction: column; gap: .2rem; }
.proof-stat { font-size: 1.35rem; font-weight: 600; color: var(--accent); letter-spacing: -.01em; }
.proof-label { font-size: .82rem; color: var(--muted); max-width: 24ch; }
.about-link { font-size: .9rem; }

/* Forms */
.form-narrow { max-width: 26rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
.stack label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
input, textarea {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: inherit; padding: .6rem .7rem; border-radius: var(--radius); width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,169,60,.14); }
textarea { resize: vertical; }

.flash {
  background: rgba(223,95,85,.12); border: 1px solid var(--red);
  color: #f0b3ae; padding: .7rem .9rem; border-radius: var(--radius); margin-bottom: 1.5rem;
  animation: fadeInUp .3s var(--ease) both;
}

/* Page head */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }

/* Project list */
.project-list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.project-row {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
  background: var(--surface); transition: transform .14s var(--ease), border-color .14s var(--ease), box-shadow .2s var(--ease);
}
.project-row:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: var(--shadow); }
.project-row > a { display: flex; align-items: center; gap: .75rem; color: var(--text); }
.project-name { font-weight: 500; }
/* Admin cards (delivery/review) are list items that reuse .panel — render
   them as self-contained bordered cards, not top-border-only sections. */
.project-list > li.panel {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem; margin-top: 0; background: var(--surface);
}
.project-list > li.panel > h3 { margin-bottom: .5rem; }
.empty { margin-top: 2rem; }

/* Badges & status */
.badge {
  font-size: .72rem; padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--muted); white-space: nowrap;
}
.badge-preview_ready, .badge-delivered { color: var(--green); border-color: var(--green); }
.badge-rejected, .badge-failed { color: var(--red); border-color: var(--red); }
.badge-building, .badge-planning, .badge-screening, .badge-clarifying, .badge-needs_input, .badge-escalated, .badge-accepted { color: var(--accent); border-color: var(--accent); }

.statusbox {
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; background: var(--surface);
  transition: border-color .3s var(--ease);
}
.status-line { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.status-preview_ready, .status-delivered { border-color: var(--green); }
.status-accepted { border-color: var(--accent); }
.status-rejected, .status-failed { border-color: var(--red); }
.status-building, .status-planning, .status-screening, .status-clarifying { border-color: rgba(224,169,60,.4); }
.reason { color: var(--muted); margin-top: .4rem; }

.spinner {
  display: inline-block; width: .72rem; height: .72rem;
  border: 2px solid var(--dim); border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Panels */
.panel { border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 2rem; }
/* A section's intro/description text needs space before the content it
   introduces (lists, tables) — otherwise cards butt right against it. */
.panel > p { margin-bottom: 1.1rem; }
.panel > p:last-child { margin-bottom: 0; }
.panel > h2 + p, .panel > h3 + p { margin-top: -.25rem; }
.brief { color: var(--muted); }
.questions { margin: .75rem 0 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.questions li { color: var(--text); }
.plan, .log {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; white-space: pre-wrap; font-size: .85rem; overflow-x: auto; margin-top: .5rem;
}

/* Live build log */
.livelog { max-height: 18rem; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; }
.logline { animation: fadeInUp .25s var(--ease) both; color: var(--muted); }
.logline:last-child { color: var(--text); }

.asset-list { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.asset-list li { display: flex; align-items: baseline; gap: .6rem; }
.asset-name { color: var(--text); }
.upload-form { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; margin-bottom: .5rem; }
.upload-form input[type=file] {
  width: auto; flex: 1; min-width: 12rem;
  padding: .7rem .8rem; border: 1px dashed var(--border-2); border-radius: var(--radius);
  background: var(--bg-2); color: var(--muted); cursor: pointer;
}
.upload-form input[type=file]::file-selector-button {
  margin-right: .8rem; padding: .4rem .8rem; border: 1px solid var(--border-2);
  border-radius: var(--radius); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.upload-form input[type=file]::file-selector-button:hover { border-color: var(--accent); }

.iterations { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.iterations li { border-left: 2px solid var(--border-2); padding-left: .9rem; }
details summary { cursor: pointer; }

/* Admin */
.admin-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.inline-actions { display: flex; align-items: center; gap: .5rem; }
.inline-actions input { width: auto; }

.design-options { display: flex; flex-direction: column; gap: .5rem; }
label.design-option {
  display: flex; flex-direction: row; align-items: baseline; gap: .6rem;
  padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
}
label.design-option:hover { border-color: var(--accent); }
.design-option input { accent-color: var(--accent); width: auto; }
.design-options input[type="text"] { margin-left: 2rem; }

.review-shots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem; margin: .8rem 0;
}
.review-shots figure { margin: 0; }
.review-shots figcaption { margin-bottom: .25rem; font-family: monospace; }
.review-shot {
  display: block; width: 100%; height: 18rem; object-fit: cover; object-position: top;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2);
}
.review-thumb {
  width: 8rem; height: 5rem; object-fit: cover; object-position: top;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2);
}

.stat-row { list-style: none; display: flex; gap: 2rem; flex-wrap: wrap; }
.stat-row li { display: flex; flex-direction: column; gap: .15rem; }
.stat-num { font-size: 1.5rem; font-weight: 600; color: var(--text); line-height: 1; }

.oauth-buttons { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.btn-oauth {
  display: block; text-align: center; text-decoration: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-2);
  box-shadow: none;
}
/* Override the gold .btn:hover (dark text + gold glow) — wrong on a dark,
   bordered button. Keep text light, lift the surface, accent the border. */
.btn-oauth:hover {
  color: var(--text); background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.or-divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .85rem; margin: .4rem 0 1rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.password-login { margin-top: 1rem; }
.password-login summary { cursor: pointer; }
.password-login .stack { margin-top: .6rem; }

.table-scroll { overflow-x: auto; margin-top: 1rem; }
.builds-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.builds-table th, .builds-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.builds-table th { color: var(--muted); font-weight: 500; }

.foot { border-top: 1px solid var(--border); padding: 1.75rem 1.25rem; text-align: center; font-size: .8rem; flex-shrink: 0; }

/* HTMX swap transitions (gentle; avoids flicker on polled swaps) */
.htmx-indicator { opacity: 0; transition: opacity .2s var(--ease); }
.htmx-request .htmx-indicator { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}