/* ============================================================
   NxtAtlas AI — the public pages.

   Two pages load this: /download.html and /share.html. Both are
   pages people land on rather than tools they work in, and both
   are seen by strangers, so they are built on the same small
   vocabulary as nxtatlas.com — ink, one brass accent, hairlines,
   generous space, nothing decorative that does not earn its place.

   These two pages deliberately do NOT load styles.css or
   redesign.css. They have no application chrome to inherit, and
   those two files carry a blue-and-violet bubble treatment with
   !important on it that fights the brand. Everything they need is
   below: a reset, the primitives, and a transcript that matches
   the chat screen's own markup (.msg / .bubble / .msg-body).

   Loads after css/atlas.css and uses only its tokens — a literal
   colour here would break one of the two themes.
   ============================================================ */

:root {
  --ap-edge:    clamp(20px, 5vw, 40px);
  --ap-max:     1120px;
  --ap-read:    760px;              /* a comfortable measure for a transcript */
  --ap-section: clamp(56px, 9vh, 104px);
  --ap-ease:    cubic-bezier(.22, 1, .36, 1);
  --ap-fast:    .24s;
  --ap-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   1. BASE
   No shared reset is loaded on these pages, so it lives here.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* one soft warm halo, and a barely-there lift at the top of the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 55% at 74% -8%, var(--accent-soft), transparent 62%),
    linear-gradient(180deg, var(--bg-sidebar), var(--bg) 44%);
}

header, main, footer { position: relative; z-index: 1; }

h1, h2, h3 { margin: 0; line-height: 1.1; }   /* family + tracking come from atlas.css */
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); letter-spacing: -0.02em; }
p  { margin: 0; }
a  { color: inherit; }

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

/* ============================================================
   2. PRIMITIVES
   ============================================================ */
.ap-shell {
  width: 100%;
  max-width: var(--ap-max);
  margin-inline: auto;
  padding-inline: var(--ap-edge);
}
.ap-shell-read { max-width: calc(var(--ap-read) + var(--ap-edge) * 2); }

.ap-section { padding-block: var(--ap-section); }

.ap-lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* a short brass hairline, then the label */
.ap-eyebrow { display: flex; align-items: center; gap: 12px; }
.ap-eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--atlas-brass-soft);
}

.ap-lede {
  color: var(--text-muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  max-width: 58ch;
}

.ap-note {
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---------- buttons ----------
   transform is left alone: data-a-magnetic writes to it directly and a
   transition on the same property turns the lean into a lag. */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  transition: background var(--ap-fast) ease, border-color var(--ap-fast) ease,
              color var(--ap-fast) ease;
}
.ap-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.ap-btn svg { flex: none; }

.ap-btn-brass {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.ap-btn-brass:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }

.ap-btn-ghost { border-color: transparent; padding-inline: 6px; color: var(--text-muted); }
.ap-btn-ghost:hover { background: transparent; color: var(--accent); }

/* ---------- status chip: static, never pulsing ---------- */
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-soft);
}
.ap-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.ap-chip-live { color: var(--accent); }
.ap-chip-live::before { background: var(--accent); }

/* ============================================================
   3. HEADER + FOOTER
   The same two pieces of furniture on both pages.
   ============================================================ */
.ap-head {
  padding-block: 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);                                     /* fallback first: an
     opaque bar is correct everywhere; the translucent one only improves it */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.ap-head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ap-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.ap-mark img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  transition: transform .5s var(--ap-ease);
}
.ap-mark:hover img { transform: rotate(-8deg) scale(1.06); }
.ap-mark .atlas-wm { font-size: 13px; }

.ap-head-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.ap-head-nav .ap-btn { padding: 9px 18px; font-size: 13.5px; }

.ap-foot { padding-block: 28px 40px; }
.ap-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.ap-foot .atlas-wm { font-size: 11.5px; color: var(--text-soft); }
.ap-foot-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.ap-foot-nav a { text-decoration: none; transition: color var(--ap-fast) ease; }
.ap-foot-nav a:hover { color: var(--accent); }

/* ============================================================
   4. DOWNLOAD PAGE
   ============================================================ */
.ap-hero { padding-block: clamp(56px, 10vh, 108px) clamp(34px, 5vh, 56px); }
.ap-hero h1 { margin-top: 20px; max-width: 20ch; }
.ap-hero .ap-lede { margin-top: 20px; }

/* the honest headline about availability, stated once, up top */
.ap-hero-state {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.4;
  max-width: 100%;
}
.ap-hero-state .ap-chip::before { flex: none; }

/* ---------- the two builds ----------
   no bottom padding of its own: the next section's own top padding is the
   gap, and two of them stacked is twice the air the rhythm asks for */
.ap-builds { padding-block: 0; }
.ap-build-grid {
  margin-top: 26px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.ap-build {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-elev), transparent 78%);
  transition: border-color var(--ap-fast) ease;
}
.ap-build:hover { border-color: var(--atlas-brass-soft); }
/* the pointer light — atlas-motion feeds --mx / --my */
.ap-build::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                              var(--accent-soft), transparent 70%);
  transition: opacity .32s ease;
}
.ap-build:hover::after { opacity: 1; }
.ap-build > * { position: relative; z-index: 1; }

.ap-build-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ap-build-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
}
.ap-build h3 { margin-top: -2px; }

/* requirements, as a definition list — the facts, nothing more */
.ap-specs { margin: 0; display: grid; gap: 10px; }
.ap-spec { display: flex; gap: 10px; align-items: baseline; }
.ap-spec dt {
  flex: none;
  width: 84px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ap-spec dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.ap-build-foot { margin-top: auto; padding-top: 4px; }

/* the state that ships in the HTML: no build, and no link that 404s */
.ap-build-wait {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--bg-hover);
}
.ap-build-wait strong { font-weight: 600; font-size: 14px; color: var(--text); }
.ap-build-wait span { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }

/* revealed only once a real binary has answered */
.ap-build-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ap-build-go .ap-btn { flex: 1 1 auto; }
.ap-build-size { font-size: 12.5px; color: var(--text-soft); }

/* ---------- what works today ---------- */
.ap-today h2 { margin-top: 18px; }
.ap-today .ap-lede { margin-top: 16px; }
.ap-surfaces {
  list-style: none;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ap-surface { position: relative; padding-top: 20px; }
.ap-surface::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--border);
}
.ap-surface h3 { margin-bottom: 8px; font-size: 1.05rem; }
.ap-surface p { color: var(--text-muted); font-size: 14.5px; line-height: 1.62; }
.ap-surface .ap-btn { margin-top: 14px; }

/* ============================================================
   5. SHARE PAGE
   Someone opened this to read a conversation. Everything here
   gets out of the way of the transcript.
   ============================================================ */
.ap-share { padding-block: clamp(38px, 6vh, 64px) 0; }

.ap-share-head { padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.ap-share-head h1 {
  margin-top: 16px;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.ap-share-meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--text-soft);
  font-size: 13px;
}
.ap-share-meta > * { display: inline-flex; align-items: center; gap: 8px; }
.ap-share-meta .ap-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

/* the model that answered, named exactly as the record names it */
.ap-model {
  font-family: var(--ap-mono);
  font-size: 11.5px;
  letter-spacing: 0;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--bg-elev);
  overflow-wrap: anywhere;
}

/* ---------- loading / unavailable ---------- */
.ap-state { padding: clamp(48px, 12vh, 96px) 0; text-align: center; }
.ap-state h2 { font-size: 1.25rem; margin-bottom: 10px; }
.ap-state p { color: var(--text-muted); font-size: 14.5px; max-width: 46ch; margin-inline: auto; }

.ap-skeleton { display: grid; gap: 14px; justify-items: center; }
.ap-skeleton span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-hover);
  animation: ap-pulse 1.5s ease-in-out infinite;
}
.ap-skeleton span:nth-child(1) { width: 180px; }
.ap-skeleton span:nth-child(2) { width: 260px; animation-delay: .12s; }
.ap-skeleton span:nth-child(3) { width: 120px; animation-delay: .24s; }
@keyframes ap-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* ============================================================
   6. THE TRANSCRIPT
   Same markup as the chat screen — .msg / .user-stack / .bubble /
   .msg-avatar / .msg-body.markdown — so a shared thread reads as
   the product it came from. Scoped to .ap-thread so none of it can
   leak if these rules ever meet the application's own stylesheet.
   ============================================================ */
.ap-thread {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-block: 30px;
}

.ap-thread .msg { display: flex; gap: 12px; }
.ap-thread .msg-user { justify-content: flex-end; }

.ap-thread .user-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 80%;
  min-width: 0;
}
.ap-thread .bubble {
  background: var(--bg-bubble);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ap-thread .msg-assistant { align-items: flex-start; }
.ap-thread .msg-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-hover);
}
.ap-thread .msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ap-thread .msg-body {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: normal;
}

/* images, on either side — every one arrives inside a .msg-images row */
.ap-thread .msg-images { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-thread .msg-user .msg-images { justify-content: flex-end; }
.ap-thread .msg-body .msg-images { margin-top: 12px; }
/* min() rather than a plain cap: on a narrow phone the column is the smaller
   of the two, and a fixed cap would push the image past the screen edge */
.ap-thread .msg-images img {
  max-width: min(240px, 100%);
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
}
.ap-thread .msg-assistant .msg-images img { max-width: min(320px, 100%); max-height: 320px; }
.ap-thread .msg-user .msg-images img { max-width: min(180px, 100%); max-height: 180px; }
/* a presigned image link outlives the page by an hour, so say so plainly */
.ap-thread .ap-img-gone {
  padding: 10px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-soft);
}

/* ---------- markdown, as the chat renders it ---------- */
.ap-thread .markdown > * + * { margin-top: 12px; }
.ap-thread .markdown h1,
.ap-thread .markdown h2,
.ap-thread .markdown h3,
.ap-thread .markdown h4 {
  font-family: var(--atlas-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.ap-thread .markdown h1 { font-size: 21px; margin-top: 20px; }
.ap-thread .markdown h2 { font-size: 18px; margin-top: 18px; }
.ap-thread .markdown h3 { font-size: 16px; margin-top: 16px; }
.ap-thread .markdown h4 { font-size: 15px; margin-top: 14px; }
.ap-thread .markdown ul,
.ap-thread .markdown ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 5px; }
.ap-thread .markdown ul { list-style: disc; }
.ap-thread .markdown ol { list-style: decimal; }
.ap-thread .markdown li > p { display: inline; }
.ap-thread .markdown blockquote {
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--atlas-brass-soft);
  color: var(--text-muted);
}
.ap-thread .markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--atlas-brass-soft);
}
.ap-thread .markdown a:hover { text-decoration-color: var(--accent); }
.ap-thread .markdown strong { font-weight: 600; }
.ap-thread .markdown em { font-style: italic; }
.ap-thread .markdown hr { height: 1px; border: 0; background: var(--border); margin-block: 18px; }

.ap-thread .markdown code {
  font-family: var(--ap-mono);
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-code);
  border: 1px solid var(--border);
}
.ap-thread .markdown pre {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-code);
  overflow: hidden;
}
.ap-thread .markdown pre .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
}
.ap-thread .markdown pre .code-head .lang {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ap-thread .markdown pre .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: color var(--ap-fast) ease, border-color var(--ap-fast) ease;
}
.ap-thread .markdown pre .copy-btn:hover { color: var(--text); border-color: var(--border-strong); }
.ap-thread .markdown pre .copy-btn.is-copied { color: var(--success); border-color: var(--success); }
.ap-thread .markdown pre code {
  display: block;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre;
  overflow-x: auto;          /* a long line scrolls itself, never the page */
}

/* ---------- the quiet invitation under the transcript ---------- */
/* #root carries the outcome as is-loading / is-loaded / is-error. While there
   is no transcript the centred state block already owns the space above, so
   the invitation loses its extra gap. */
#root.is-loading .ap-invite,
#root.is-error .ap-invite { margin-top: 0; }

.ap-invite {
  margin-block: clamp(40px, 7vh, 72px) 0;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bg-elev), transparent 82%);
  text-align: center;
}
.ap-invite .ap-eyebrow { justify-content: center; }
.ap-invite h2 { margin-top: 14px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ap-invite .ap-lede { margin: 14px auto 0; }
.ap-invite-cta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ap-invite .ap-note { margin-top: 16px; }

/* ============================================================
   7. NARROW SCREENS — holds at 360px with no sideways scroll
   ============================================================ */
@media (max-width: 620px) {
  .ap-head-nav .ap-hide-sm { display: none; }
  .ap-hero h1 { max-width: none; }
  .ap-hero-state { border-radius: 14px; align-items: flex-start; }
  .ap-build { padding: 22px 18px 20px; }
  .ap-spec { flex-direction: column; gap: 2px; }
  .ap-spec dt { width: auto; }
  .ap-build-go { justify-content: center; }
  .ap-build-go .ap-btn { width: 100%; }
  .ap-build-size { width: 100%; text-align: center; }
  .ap-thread .user-stack { max-width: 92%; }
  .ap-foot-in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .ap-mark .atlas-wm { font-size: 12px; letter-spacing: 0.1em; }
  .ap-thread .msg { gap: 8px; }
}

/* ============================================================
   8. REDUCED MOTION
   atlas.css already unhides .a-reveal; this stops the rest.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ap-skeleton span { animation: none; }
  .ap-mark img { transition: none; }
  .ap-build::after { transition: none; }
}

/* the generation indicator, matching the chat screen */
.image-loader { position: relative; padding-left: 96px; min-height: 84px; }
.image-loader .image-loader-svg { display: none; }
.image-loader::before {
  content: ""; position: absolute; left: 6px; top: 50%;
  width: 64px; height: 64px; margin-top: -32px;
  background: url("/assets/atlas-icon-192.png") center / contain no-repeat;
}