/* ============================================================
   Codebrief — Atlas (Living Architecture Map) visuals
   Shared by the homepage Features showcase (React) and the
   dedicated /atlas page (static HTML). Built only on DS tokens.

   Colour semantics are load-bearing and must be preserved:
     blue   = structure / the product
     gold   = citations · captured intent · evidence
     orange = potential divergence (calm caution, never red)
     green  = a recorded decision / success
     cool gray = code surfaces (set apart from the warm paper)
   ============================================================ */

/* ---- Atlas brand placements (hero + showcase eyebrow lockups) ---- */
.atlas-hero__brand { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.atlas-hero__tag { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--citation); display: inline-flex; align-items: center; gap: 8px; }
.atlas-hero__tag::before { content: ""; width: 18px; height: 1px; background: currentcolor; opacity: .5; }
.atlas-show__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.atlas-show__brandtag { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--citation); padding-left: var(--space-3); border-left: 1px solid var(--border-default); }
/* on small screens the tag may wrap below the lockup — drop the divider so it
   reads as a clean eyebrow rather than a stray vertical bar */
@media (max-width: 480px) { .atlas-show__brandtag { padding-left: 0; border-left: 0; } }

/* ---- Showcase layout (homepage: copy + stacked visual) ---- */
.atlas-show { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.atlas-show__visual { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.atlas-show__trust { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-tertiary); }
.atlas-show__trust svg { flex: none; margin-top: 2px; color: var(--citation); width: 16px; height: 16px; }
.atlas-show__cta { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
@media (max-width: 920px) { .atlas-show { grid-template-columns: 1fr; } }

/* ---- Four-pillar list (homepage copy column) -------------- */
.atlas-pills { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.atlas-pill { display: flex; gap: var(--space-3); align-items: flex-start; }
.atlas-pill__ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.atlas-pill__ic svg { width: 18px; height: 18px; }
.atlas-pill__t { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 2px; letter-spacing: -0.01em; }
.atlas-pill__d { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; }
/* per-pillar semantic tint */
.atlas-pill--structure .atlas-pill__ic { background: var(--primary-soft);   color: var(--primary);        border: 1px solid var(--primary-soft-border); }
.atlas-pill--decisions .atlas-pill__ic { background: var(--success-soft);   color: var(--success);        border: 1px solid var(--success-border); }
.atlas-pill--open      .atlas-pill__ic { background: var(--citation-soft);  color: var(--citation-hover); border: 1px solid var(--citation-border); }
.atlas-pill--drift     .atlas-pill__ic { background: var(--warning-soft);   color: var(--warning);        border: 1px solid var(--warning-border); }

/* ---- The map stage (framed canvas, echoes .demo chrome) --- */
.atlas-stage { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.atlas-stage__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--surface-app); }
.atlas-stage__title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-serif); font-size: var(--text-base); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--text-primary); }
.atlas-stage__title svg { width: 16px; height: 16px; color: var(--primary); }
.atlas-stage__toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 4px var(--space-3); }
.atlas-stage__toggle .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success); }

.atlas-canvas { position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 280px; background-color: var(--surface-app); background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px); background-size: 18px 18px; background-position: -1px -1px; }
.atlas-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.atlas-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.atlas-edge--flow { stroke: var(--primary); stroke-width: 2; stroke-dasharray: 5 5; }
.atlas-edge__label { fill: var(--text-muted); font-family: var(--font-ui); font-size: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .atlas-edge--flow { animation: atlas-flow 1.1s linear infinite; }
}
@keyframes atlas-flow { to { stroke-dashoffset: -20; } }

/* ---- A map node: 3px evidence-class left border + chip ---- */
.atlas-node { position: absolute; transform: translate(-50%, -50%); width: clamp(146px, 38%, 198px); box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border-default); border-left-width: 3px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.atlas-node__head { display: flex; align-items: center; gap: var(--space-2); }
.atlas-node__ic { width: 24px; height: 24px; flex: none; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.atlas-node__ic svg { width: 14px; height: 14px; }
.atlas-node__title { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* evidence chip — code evidence (gray, mono file count) */
.atlas-node__chip { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-family: var(--font-code); font-size: var(--text-2xs); color: var(--text-tertiary); background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 2px 6px; }
.atlas-node__chip svg { width: 11px; height: 11px; opacity: .8; }
/* provenance pill — intent evidence (gold, session) */
.atlas-node__pill { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--citation-hover); background: var(--citation-soft); border: 1px solid var(--citation-border); border-radius: var(--radius-pill); padding: 2px var(--space-2); }
.atlas-node__pill svg { width: 11px; height: 11px; }
.atlas-node__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* confidence badge */
.atlas-conf { font-family: var(--font-ui); font-size: 9px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; border-radius: var(--radius-xs); padding: 2px 5px; }
.atlas-conf--high { background: var(--citation-soft); color: var(--citation); }
.atlas-conf--medium { background: var(--primary-soft); color: var(--primary); }
.atlas-conf--low { background: var(--surface-sunken); color: var(--text-secondary); }
/* evidence-class accents */
.atlas-node--structure { border-left-color: var(--primary); }
.atlas-node--structure .atlas-node__ic { background: var(--primary-soft); color: var(--primary); }
.atlas-node--decision { border-left-color: var(--success); }
.atlas-node--decision .atlas-node__ic { background: var(--success-soft); color: var(--success); }
.atlas-node--gap { border-left-color: var(--citation); }
.atlas-node--gap .atlas-node__ic { background: var(--citation-soft); color: var(--citation-hover); }
.atlas-node--sel { border-color: var(--primary); border-left-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-md); }

@media (max-width: 480px) {
  .atlas-node { width: clamp(108px, 34%, 146px); padding: var(--space-2); }
  .atlas-node__title { font-size: var(--text-xs); }
}

/* ---- The drift finding card — "the receipts" ------------- */
.atlas-drift { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.atlas-drift__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.atlas-drift__file { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-code); font-size: var(--text-xs); color: var(--citation-hover); background: var(--citation-soft); border: 1px solid var(--citation-border); border-radius: var(--radius-xs); padding: 3px var(--space-2); }
.atlas-drift__file svg { width: 13px; height: 13px; }
.atlas-drift__code { margin: 0; background: var(--surface-code); border: 1px solid var(--code-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-family: var(--font-code); font-size: var(--text-xs); line-height: 1.7; color: var(--code-fg); overflow-x: auto; }
.atlas-drift__code .tok-kw { color: var(--code-keyword); } .atlas-drift__code .tok-str { color: var(--code-string); } .atlas-drift__code .tok-com { color: var(--code-comment); font-style: italic; } .atlas-drift__code .tok-fn { color: var(--code-fn); }
.atlas-drift__finding { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-secondary); margin: 0; }
.atlas-drift__finding b { color: var(--warning); font-weight: var(--weight-semibold); }
.atlas-drift__actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.atlas-drift__caption { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.atlas-drift__caption svg { width: 14px; height: 14px; color: var(--citation); flex: none; }

/* ---- Pillars grid (the /atlas page) ---------------------- */
.atlas-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: clamp(24px, 3vw, 40px); }
.atlas-pillar { padding: var(--space-6); height: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.atlas-pillar__ic { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.atlas-pillar__ic svg { width: 20px; height: 20px; }
.atlas-pillar__name { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; margin: 0; }
.atlas-pillar__claim { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-primary); margin: 0; }
.atlas-pillar__d { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; }
.atlas-pillar--structure .atlas-pillar__ic { background: var(--primary-soft);  color: var(--primary);        border: 1px solid var(--primary-soft-border); }
.atlas-pillar--decisions .atlas-pillar__ic { background: var(--success-soft);  color: var(--success);        border: 1px solid var(--success-border); }
.atlas-pillar--open      .atlas-pillar__ic { background: var(--citation-soft); color: var(--citation-hover); border: 1px solid var(--citation-border); }
.atlas-pillar--drift     .atlas-pillar__ic { background: var(--warning-soft);  color: var(--warning);        border: 1px solid var(--warning-border); }
@media (max-width: 720px) { .atlas-pillars { grid-template-columns: 1fr; } }

/* ---- Pro feature callout (models the in-product LockState) - */
.atlas-pro { max-width: 560px; margin: 0 auto; text-align: center; padding: clamp(32px, 4vw, 48px); }
.atlas-pro__ic { width: 52px; height: 52px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); background: var(--citation-soft); color: var(--citation); border: 1px solid var(--citation-border); }
.atlas-pro__ic svg { width: 24px; height: 24px; }
.atlas-pro__title { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: -0.015em; margin: 0; }
.atlas-pro__d { max-width: 46ch; margin: var(--space-4) auto 0; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.atlas-pro__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }

/* ---- Pricing: highlighted Atlas row + star icon ----------- */
.price__list li.is-atlas { background: var(--citation-soft); border: 1px solid var(--citation-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin: 0; align-items: center; }
.price__list li.is-atlas span { color: var(--text-primary) !important; font-weight: var(--weight-semibold); }
.price__list .st { color: var(--citation); }

/* ---- Features: 2-up supporting grid (glossary + brief) ---- */
.feat-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-left: auto; margin-right: auto; }
@media (max-width: 820px) { .feat-grid--two { grid-template-columns: 1fr; } }

/* ---- /atlas page: lead visual full-bleed within container - */
.atlas-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.atlas-lead__visual { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (max-width: 920px) { .atlas-lead { grid-template-columns: 1fr; } }

/* ---- Hero: copy + 3D constellation (the /atlas page) ------ */
.atlas-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
/* the copy column keeps .section-head; release its 64ch cap inside the grid */
.atlas-hero__grid .section-head { max-width: none; }
.atlas-hero__visual { position: relative; min-height: clamp(280px, 32vw, 380px); display: flex; align-items: center; justify-content: center; }
/* static SVG baseline (always present; hidden by JS once WebGL mounts) */
.atlas-hero__fallback { width: 100%; height: auto; max-width: 440px; }
/* WebGL canvas overlay (appended by atlas-hero.js); !important beats three's inline size */
.atlas-hero__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 920px) {
  .atlas-hero__grid { grid-template-columns: 1fr; }
  /* keep the base min-height (don't zero it) so an absolutely-positioned WebGL
     canvas can't collapse the column to 0 when it stacks; the static SVG also
     sits comfortably in this space */
  .atlas-hero__visual { margin-top: var(--space-6); max-width: 440px; }
}