/* =========================================================================
   Atlas — base.css
   Shared reset + palette-aware primitives (cover art, chips, depth badges,
   format pills, meta rows, entry grid). Site skeletons and card variants
   layer on top. All colours flow through --pal-* vars defined by
   assets/palettes/<name>.css.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pal-bg);
  color: var(--pal-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Cover art (CSS placeholder, deterministic per-entry via --h) ---------- */
.cover {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, hsla(var(--h,200), 85%, 70%, .9), transparent 55%),
    radial-gradient(circle at 85% 70%, hsla(calc(var(--h,200) + 50), 80%, 55%, .85), transparent 60%),
    linear-gradient(135deg, hsl(var(--h,200) 65% 40%), hsl(calc(var(--h,200) + 30) 55% 25%));
  isolation: isolate;
}
.cover::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(hsla(0,0%,100%,.06) 1px, transparent 1px),
    linear-gradient(90deg, hsla(0,0%,100%,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cover .mark {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-family: "Georgia", serif; font-weight: 700; font-style: italic;
  font-size: 28px; letter-spacing: -0.04em;
  color: hsla(0, 0%, 100%, .95);
  text-shadow: 0 2px 12px hsla(var(--h,200), 80%, 15%, .35);
}
.cover .mark.large { font-size: 52px; }
.cover .mark.tiny  { font-size: 18px; }
.cover.ratio  { aspect-ratio: 3/2; }
.cover.square { aspect-ratio: 1/1; }
.cover.wide   { aspect-ratio: 16/9; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.cover:has(.cover-img)::before { display: none; }

/* ---------- Chips ---------- */
.chip {
  display: inline-block;
  padding: 1px 7px; border-radius: 999px;
  font-size: 11px; line-height: 1.6;
  color: var(--pal-fg-muted);
  border: 1px solid var(--pal-border);
  background: transparent;
}
.chip::before { content: "#"; opacity: 0.5; margin-right: -2px; }
.chip.solid {
  background: var(--pal-accent); color: var(--pal-accent-fg);
  border-color: var(--pal-accent);
}
.chip.solid::before { opacity: 0; margin-right: 0; }

/* ---------- Depth badges (recon/survey/expedition are display labels for
   the ceo/standard/deep internal depths; skeletons translate via Liquid). */
.depth-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 3px;
  font: 700 9.5px/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.depth-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.depth-recon      { background: var(--d-recon-bg);      color: var(--d-recon); }
.depth-survey     { background: var(--d-survey-bg);     color: var(--d-survey); }
.depth-expedition { background: var(--d-expedition-bg); color: var(--d-expedition); }

/* ---------- Format pills ---------- */
.fmt-pill {
  display: inline-block;
  padding: 1px 6px; border-radius: 3px;
  font: 600 9.5px ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.fmt-md   { background: var(--fmt-md-bg);   color: var(--fmt-md); }
.fmt-html { background: var(--fmt-html-bg); color: var(--fmt-html); }

/* ---------- Angles badge (parent expedition cards) ----------
   Hardcoded colors so contrast is bulletproof across every palette
   (rust, paper, cartography, midnight, …). Lives in base.css so it
   loads on the home grid and detail pages alike. */
.angles-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 12px/1.3 ui-monospace, Menlo, monospace;
  background: #6d28d9;
  color: #ffffff;
  border: 1px solid #4c1d95;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.angles-chip::before {
  content: '⌥';
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Meta row ---------- */
.meta-row {
  display: flex; align-items: center; gap: 10px;
  color: var(--pal-fg-faint); font-size: 11.5px;
}
.meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.meta-row .mono { font-family: ui-monospace, Menlo, monospace; }

/* ---------- Entry grid (used by most site skeletons) ---------- */
.entry-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .entry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .entry-grid { grid-template-columns: 1fr; } }

/* ---------- Card primitives (shared across v1-v7; each variant's
   assets/cards/vN.css layers its own look on top.) ---------- */
.card {
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, border-color .15s ease;
  position: relative;
}
.card:hover { transform: translateY(-2px); border-color: var(--pal-accent); }
.card-link { display: flex; flex-direction: column; color: inherit; flex: 1; }
.card-cover {
  width: 100%; aspect-ratio: 3/2;
  background-color: color-mix(in srgb, var(--pal-accent) 18%, var(--pal-surface));
  background-size: cover; background-position: center;
  position: relative;
}
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-title { margin: 0; font-size: 13.5px; line-height: 1.3; letter-spacing: -0.01em; color: var(--pal-fg); font-weight: 600; }
.card-summary { margin: 0; color: var(--pal-fg-muted); font-size: 12px; line-height: 1.4; }
.card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-top: 4px; }
.meta-chip {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font: 500 10.5px/1.4 ui-monospace, Menlo, monospace;
  color: var(--pal-fg-muted); background: var(--pal-surface-tint);
  border: 1px solid var(--pal-border);
}

/* ---------- View badges (alternate-view shortcuts overlaid on cards) ----- */
.view-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.view-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 10px/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pal-accent);
  color: var(--pal-bg);
  text-decoration: none;
  border: 1px solid var(--pal-accent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--pal-fg) 18%, transparent);
  transition: transform .12s ease, filter .12s ease;
}
.view-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* On the index card: pin to the cover, below the card-top chip row
   (card-top is z:3 in v1 and lives at top:10px with ~26px chips). */
.card .view-badges {
  position: absolute;
  top: 46px; right: 10px;
  z-index: 4;
}

/* On the s5 featured (large) card: pin to the bottom-right of the cover.
   The cover has aspect-ratio 3/2 and full-width inside .s5-featured-card,
   so its height equals 2/3 of the card's inline size — the badge sits
   just above that line. */
.s5-featured-card > .view-badges {
  position: absolute;
  top: calc(100cqi * 2 / 3 - 36px);
  right: 14px;
  z-index: 4;
}
.s5-featured-card .view-badge { padding: 4px 11px; font-size: 11px; }