/* ============================================================================
   Orbit Axis — the Atlas
   ----------------------------------------------------------------------------
   The reference library, and now a primary destination. It explains the symbols
   that are already on screen everywhere else, which makes it the one page the
   whole app links into.

   Nothing decorative competes with the words, because the words are the product
   here. Cards are hairline-on-surface, glyphs are text, and the only colour is
   the one accent.

   WIDTH DISCIPLINE, same as compatibility.css and for the same scars: every grid
   child declares min-width: 0, every track is minmax(0, 1fr), and any
   author-length token wraps with overflow-wrap. 375px is a contract.

   GLYPH PRESENTATION. Astrological glyphs are ordinary Unicode, and several of
   them ("♈", "♌", "☉") have emoji presentations that macOS and iOS prefer by
   default — which rendered Zodiac Signs as a purple gradient tile in an
   interface that allows exactly one accent colour. `font-variant-emoji: text`
   asks for the text presentation; the variation selector in the content module
   would be the other half of the fix if a browser ignores it.
   ========================================================================== */

/* The glyph font stack itself is in components.css, applied to every glyph the
   app draws. Only the Atlas-specific sizing lives here. */
.atlas-card__glyph,
.atlas-category-card__glyph,
.atlas-entry__glyph,
.atlas-chip__glyph { color: var(--color-secondary); }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────
   Plain links, wrapping freely — a crumb trail must never force the page wider
   or truncate the one entry name the person came for. */
.atlas-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs) var(--space-xs);
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  color: var(--color-muted);
  margin-block-end: var(--space-xxs);
  overflow-wrap: anywhere;
}
.atlas-crumbs[hidden] { display: none; }
/* Crumbs and backlinks are inline navigation rather than buttons, so the
   44px rule does not apply — but WCAG's 24px minimum does, and at 0.8125rem
   the bare line box came in at 21. The padding buys the difference without
   changing where the text sits.
   Colour is left to the global `a` rule in base.css rather than set again
   here; the local override predated that rule and named a token the design
   system has since replaced. */
.atlas-crumbs a {
  text-underline-offset: 0.2em;
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
}
.atlas-crumbs__sep { opacity: 0.6; }

/* An empty live region must take no space. Left at a fixed min-height it opened
   a 20px hole under every Atlas heading, on every view, for a message that is
   usually absent. */
.atlas-status {
  color: var(--color-muted);
  font-size: var(--type-caption);
  overflow-wrap: anywhere;
}
.atlas-status:empty { display: none; }

/* The Atlas root owns the rhythm between its blocks, so search, results, and
   the category shelf cannot end up flush against each other depending on which
   of them rendered.

   --space-lg, NOT --space-xl. The workspace panel around this uses lg (24px),
   so xl (32px) made the Atlas the one surface with its own rhythm — visible as
   a void between the search field and "Browse the library" that appears
   nowhere else in the app. One scale, one page. */
#atlas-root { display: grid; gap: var(--space-lg); align-content: start; }
#atlas-root > *:empty { display: none; }

/* ── Search ─────────────────────────────────────────────────────────────── */
.atlas-search { display: grid; gap: var(--space-xs); }
.atlas-search__label {
  font-size: var(--type-fine);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
.atlas-search .o-input {
  inline-size: 100%;
  min-width: 0;
  max-inline-size: 34rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-ghost);
}

/* ── Category grid (home) ───────────────────────────────────────────────── */
.atlas-block { display: grid; gap: var(--space-sm); min-width: 0; }

.atlas-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-sm);
}

.atlas-category-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "glyph name" "glyph count" "desc desc";
  column-gap: var(--space-sm);
  align-items: center;
  min-width: 0;
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}
.atlas-category-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-elevated); }
.atlas-category-card:active { transform: scale(0.99); }
.atlas-category-card:focus-visible { box-shadow: var(--focus-ring); }

.atlas-category-card__glyph {
  grid-area: glyph;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 1.375rem;
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.atlas-category-card__name {
  grid-area: name;
  font-weight: var(--weight-semibold);
  font-size: var(--type-body);
  letter-spacing: var(--track-body);
  color: var(--color-primary);
  overflow-wrap: anywhere;
}
.atlas-category-card__count { grid-area: count; font-size: var(--type-caption); color: var(--color-muted); }
.atlas-category-card__desc {
  grid-area: desc;
  margin-block-start: var(--space-xs);
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  line-height: var(--lead-body);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* ── Entry cards (category pages, search results, featured) ─────────────── */
.atlas-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-sm);
}

.atlas-card {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  min-width: 0;
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  min-block-size: 44px;
  transition: border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}
.atlas-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-elevated); }
.atlas-card:active { transform: scale(0.99); }
.atlas-card:focus-visible { box-shadow: var(--focus-ring); }

.atlas-card__glyph { font-size: 1.25rem; line-height: 1.35; flex: none; }
.atlas-card__body { min-width: 0; display: block; }
.atlas-card__title {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--type-body);
  letter-spacing: var(--track-body);
  color: var(--color-primary);
  overflow-wrap: anywhere;
}
.atlas-card__kind {
  display: block;
  font-size: var(--type-fine);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  margin-block: 2px var(--space-xxs);
}
.atlas-card__summary {
  display: block;
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  line-height: var(--lead-body);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* ── Category page ──────────────────────────────────────────────────────── */
.atlas-category-desc { max-inline-size: 44rem; line-height: var(--lead-body); }

/* ── Entry page ─────────────────────────────────────────────────────────── */
.atlas-entry { max-inline-size: 46rem; display: grid; gap: var(--space-lg); }

.atlas-entry__head { display: flex; gap: var(--space-md); align-items: flex-start; min-width: 0; }
.atlas-entry__glyph { font-size: 2rem; line-height: 1.2; flex: none; }
.atlas-entry__summary {
  margin: 0;
  font-size: var(--type-lead-airy);
  font-weight: var(--weight-light);
  line-height: var(--lead-airy);
  color: var(--color-secondary);
  overflow-wrap: anywhere;
}

.atlas-two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 44rem) {
  .atlas-two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.atlas-list { margin: var(--space-xs) 0 0; padding-inline-start: 1.1rem; line-height: 1.65; overflow-wrap: anywhere; }

/* Dev Update 3.1 — completed entries and combinations.
   Prose sections run as prose rather than as cards: an entry that stacks
   eleven cards reads as a filing cabinet, and the reading width is what makes
   the long sections finishable. */
.atlas-prose { max-inline-size: 40rem; }
.atlas-prose p {
  margin-block: 0.55rem 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* Reflection prompts are questions, not instructions. The marker change is
   deliberately not the only signal — the section heading and the caption above
   the list both say what they are, so nothing depends on seeing the glyph. */
.atlas-list--prompts { list-style: "? " outside; }
.atlas-list--prompts li { padding-inline-start: 0.15rem; }

.atlas-reflect .u-meta { margin-block: 0.3rem 0; }

/* A combination shows several glyphs in one slot; they stay decorative and the
   composed sentence beside them carries every name in text. */
.atlas-combination .atlas-entry__glyph {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 1.6rem;
}

.atlas-chip-list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.atlas-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  /* 44px, measured rather than assumed. An earlier value was 2.35rem, whose
     comment claimed ≥44px while the browser rendered 40. Dev Update 3.1 leans
     on chips much harder — related symbols, combination links, worked
     examples — so the number is stated literally and not derived from a
     font-relative unit. */
  padding: var(--space-xs) var(--space-md);
  min-block-size: 44px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  overflow-wrap: anywhere;
}
a.atlas-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
a.atlas-chip:active { transform: scale(var(--press-scale)); }
a.atlas-chip:focus-visible { box-shadow: var(--focus-ring); }
.atlas-chip--static { color: var(--color-muted); }

/* Both disclosure summaries carry the same rule. The methodology summary once
   lagged the Advanced one and sat at a 22px line box — under WCAG 2.5.8's 24px
   minimum, and found at 768px during hosted acceptance rather than at 375px
   where wrapping happened to hide it. Both now clear 44px, which satisfies the
   AAA target rather than merely the AA floor. */
.atlas-advanced summary,
.atlas-method summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
  display: flex; align-items: center;
  min-height: 44px;
}
.atlas-advanced summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.atlas-advanced__body p { line-height: var(--lead-body); }

.atlas-facts {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-xxs) var(--space-md);
  margin: var(--space-sm) 0 0;
}
.atlas-facts div { display: contents; }
.atlas-facts dt { font-size: var(--type-caption); color: var(--color-muted); text-transform: capitalize; }
.atlas-facts dd { margin: 0; font-size: var(--type-caption); color: var(--color-primary); overflow-wrap: anywhere; }

.atlas-note {
  font-size: var(--type-caption);
  line-height: var(--lead-body);
  color: var(--color-muted);
  border-inline-start: 2px solid var(--color-border);
  padding-inline-start: var(--space-sm);
}

.atlas-backlinks { font-size: var(--type-caption); }
.atlas-backlinks a {
  text-underline-offset: 0.2em;
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;                /* WCAG 2.5.8 minimum, as above */
}

/* ── Empty / not-found ──────────────────────────────────────────────────── */
.atlas-empty {
  padding: var(--space-lg);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.atlas-empty p { margin: var(--space-xxs) 0; overflow-wrap: anywhere; }


.atlas-method summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.atlas-method__body { font-size: var(--type-caption); line-height: var(--lead-body); }
.atlas-method__body ul { padding-inline-start: 1.1rem; }

/* ── Contextual reference links on other surfaces ───────────────────────
   Quietly distinct: an underline offset, and the accent on hover. A linked
   symbol name must read as part of the same sentence, not as advertising. */
.atlas-ref {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
}
.atlas-ref:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.atlas-ref:focus-visible { box-shadow: var(--focus-ring); border-radius: 2px; }

/* A combination link is a whole sentence rather than a name inside one, so it
   gets its own line and a ≥44px target rather than borrowing the inline
   treatment above. */
.reading-card__atlas { margin: 0.35rem 0 0; font-size: 0.875rem; }
.atlas-ref--combination {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-block: 0.35rem;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .atlas-card, .atlas-category-card, .atlas-chip { transition: none; }
}

@media (forced-colors: active) {
  .atlas-card, .atlas-category-card, .atlas-chip { border: 1px solid CanvasText; }
}

/* The Atlas reference line under a compatibility factor. Styled here rather
   than in compatibility.css, so that file stays about compatibility. */
.compat-factor__refs {
  margin: var(--space-xxs) 0 0;
  font-size: var(--type-caption);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* ── Mobile: categories as reference rows ───────────────────────────────────
   A reference wants density: at 375px the carded grid showed barely three
   categories before the fold. As rows — glyph, name, count, a line of
   description, divided by hairlines — the whole reference fits in the first
   two screens and reads like the index it is. Desktop keeps the card grid. */
@media (max-width: 640px) {
  .atlas-category-grid { display: block; }
  .atlas-category-grid > * + * { border-top: var(--border-width) solid var(--color-border); }
  .atlas-category-card {
    grid-template-areas: "glyph name count" "glyph desc desc";
    grid-template-columns: auto minmax(0, 1fr) auto;
    border: 0; background: none; border-radius: 0;
    padding: var(--space-sm) 0;
    min-height: 44px;
  }
  .atlas-category-card:hover { background: none; border-color: transparent; }
  .atlas-category-card__glyph { font-size: 1.3rem; width: 36px; }
  .atlas-category-card__count { justify-self: end; }
}

/* "Good places to start" reads as a list on a phone, not a stack of cards —
   the same flat language as the category list directly above it. The grid
   collapses to one column at this width anyway, so the borders were drawing
   boxes around what was already a single file of rows. */
@media (max-width: 640px) {
  .atlas-card-grid { display: block; }
  .atlas-card {
    border: 0;
    border-radius: 0;
    background: none;
    padding: var(--space-md) 0;
  }
  .atlas-card + .atlas-card { border-top: var(--border-width) solid var(--color-border); }
  .atlas-card:hover { background: none; }
}