/* ============================================================
   mirage / hub.css
   Port of mylittlechart/hub.css — same class names & layout,
   mirage amber/blue dark token set replacing --mlc-* vars.
   ============================================================ */

/* ---------- Alias bridge: map mlc slot names → mirage tokens ---------- */
:root {
  /* foreground alpha ladder (mlc uses cream tints; mirage uses grey-blue tints) */
  --hub-fg-0:   var(--fg-0);                        /* #F4F4F5 */
  --hub-fg-1:   var(--fg-1);                        /* #D7D8DB */
  --hub-fg-4:   var(--fg-2);                        /* #878B91 */
  --hub-fg-5:   var(--fg-3);                        /* #555860 */
  --hub-fg-6:   rgba(135,139,145,0.50);
  --hub-fg-7:   rgba(135,139,145,0.28);
  --hub-fg-8:   rgba(255,255,255,0.05);
  --hub-fg-9:   rgba(255,255,255,0.06);             /* card grid gap / rule lines */

  /* accent */
  --hub-gold:       var(--accent);                  /* #FBB26A */
  --hub-gold-40:    var(--accent-border);           /* rgba(251,178,106,0.30) */

  /* surfaces — mirage's own dark-neutral ladder, NOT mlc navy */
  --hub-card-bg:      var(--surface);          /* #14151A */
  --hub-card-hover:   var(--surface-raised);   /* #1C1D23 */

  /* fonts */
  --hub-font-sans: var(--font-sans);
  --hub-font-mono: var(--font-mono);
  --hub-font-display: var(--font-display);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--hub-font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* Hide scrollbar chrome — content still scrolls */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- Atmosphere ---------- */
.atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* mirage uses a flat amber corner wash, not mlc's soft blur glows */
.atmosphere::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%,
    rgba(251,178,106,0.05) 0%, transparent 50%);
}
.atmosphere::after { display: none; }
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

.wrap { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 40px; }

/* ---------- Header ---------- */
header.hub-head {
  position: relative; z-index: 2;
  padding: 36px 0 30px;
  border-bottom: 1px solid var(--hub-fg-9);
}
.head-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
h1.hub-title {
  margin: 0;
  font-family: var(--hub-font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--hub-fg-0);
  padding: 0;
  overflow: visible;
  display: inline-flex;
  align-items: baseline;
}
h1.hub-title .mark { color: var(--hub-fg-0); text-decoration: none; transition: opacity .15s; }
h1.hub-title .mark:hover { opacity: .7; }
h1.hub-title .slash { color: var(--hub-fg-7); font-weight: 200; margin: 0 0.1em; }
h1.hub-title .accent {
  color: var(--accent);
  font-weight: 500;
  display: inline-block;
  padding-right: 0.08em;
}
h1.hub-title .up {
  margin-left: 12px;
  font-family: var(--hub-font-mono); font-weight: 600; font-size: 0.7em;
  color: var(--hub-gold); text-decoration: none;
  align-self: center; vertical-align: baseline; letter-spacing: 0; line-height: 1;
  transition: color .15s, opacity .15s, transform .15s;
}
h1.hub-title .up:hover { opacity: .7; transform: translateX(-3px); }

.head-meta {
  font-family: var(--hub-font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--hub-fg-5);
  line-height: 1;
  text-transform: uppercase;
}
.head-meta .z3-home {
  display: inline-block;
  font-family: var(--hub-font-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em; line-height: 1.25;
  text-decoration: none; text-transform: lowercase;
  color: var(--hub-fg-0);
  transition: opacity .15s;
}
.head-meta .z3-home:hover { opacity: .8; }
.head-meta .z3-home b {
  color: var(--accent);
  font-weight: 500;
}

/* ---------- Section labels ---------- */
.section { padding: 56px 0 24px; position: relative; z-index: 2; }
.section-label {
  display: flex; align-items: baseline; gap: 20px;
  margin: 0 0 28px;
  font-family: var(--hub-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hub-fg-5);
}
.section-label .tag  { color: var(--hub-gold); font-weight: 700; }
.section-label .rule { flex: 1; height: 1px; background: var(--hub-fg-9); }
.section-label .note { color: var(--hub-fg-6); font-weight: 400; }
.section-label .count { color: var(--hub-fg-5); font-family: var(--hub-font-mono); }

/* ---------- Card grid ---------- */
/* separate cards — no shared opaque slot behind them; empty trailing
   space stays transparent, cards are individual bordered containers */
.cards {
  display: grid;
  gap: 14px;
}
.cards.two   { grid-template-columns: repeat(2, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.four  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
  .cards.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cards.two, .cards.three, .cards.four { grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */
.card {
  background: var(--hub-card-bg);
  display: flex; flex-direction: column;
  position: relative;
  transition: background .25s, border-color .25s;
  cursor: pointer;
  min-height: 0;
  border: 1px solid var(--hub-fg-9);
  border-radius: var(--radius);
  overflow: hidden;
}
.card:hover { background: var(--hub-card-hover); border-color: var(--hub-gold-40); }
.card:hover .card-arrow { color: var(--hub-gold); transform: translateX(4px); }
.card:hover .preview-frame { border-color: var(--hub-gold-40); }

.card-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  background: var(--bg-0);
  overflow: hidden;
  border-bottom: 1px solid var(--hub-fg-9);
}
.card-preview.wide { aspect-ratio: 24 / 10; }
.card-preview.tall { aspect-ratio: 4 / 3; }

.preview-frame {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background: transparent;
  transition: border-color .25s;
  pointer-events: none;
}
iframe.preview-frame { background: var(--bg-0); pointer-events: none; width: 100%; height: 100%; }

/* Scale wrapper for full-size pages rendered inside cards */
.preview-scale {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  pointer-events: none;
}
.preview-scale iframe {
  border: 0;
  display: block;
  background: var(--bg-0);
}

/* Interactive-preview wrapper — takes pointer events */
.preview-interactive {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
.preview-interactive iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}

/* ---------- Card body pieces ---------- */
.card-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 6px;
  font-family: var(--hub-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hub-fg-6);
}
.card-meta .idx  { color: var(--hub-fg-5); }
.card-meta .kind { color: var(--hub-gold); }

.card-body { padding: 4px 18px 14px; flex: 1 1 auto; }
.card-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--hub-fg-0);
  margin: 0 0 8px;
}
.card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hub-fg-4);
  margin: 0 0 4px;
}
.card-tags {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--hub-font-mono);
  font-size: 10px;
  color: var(--hub-fg-5);
  letter-spacing: 0.06em;
  margin-top: 10px;
}
.card-tags span::before { content: '·'; color: var(--hub-fg-7); margin-right: 6px; }
.card-tags span:first-child::before { display: none; }

.card-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--hub-fg-9);
  font-family: var(--hub-font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hub-fg-5);
}
.card-path { color: var(--hub-fg-4); }
.card-path .sep { color: var(--hub-fg-7); margin: 0 4px; }
.card-arrow {
  color: var(--hub-fg-5);
  font-size: 14px;
  transition: color .25s, transform .25s;
}

/* ---------- Footer ---------- */
.hub-foot {
  padding: 80px 0 60px;
  border-top: 1px solid var(--hub-fg-9);
  margin-top: 56px;
  font-family: var(--hub-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hub-fg-5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.hub-foot a:hover { color: var(--hub-gold); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  header.hub-head { padding: 18px 0 14px; }
  h1.hub-title { font-size: 24px !important; }
  h1.hub-title .up { font-size: 0.7em; margin-left: 0; }
  .head-meta { text-align: left; }
  .head-meta .z3-home { font-size: 24px; }
  .cards.two, .cards.three, .cards.four { grid-template-columns: 1fr; }
  .section-label { font-size: 9px; flex-wrap: wrap; gap: 10px; }
  .card-preview { aspect-ratio: 16 / 10; }
  .card-title { font-size: 22px; }
  .hub-foot { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 9px; padding: 32px 0 30px; }
}

/* ---------- Bundle teaser ---------- */
.bundle-teaser {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 8px; padding: 8px;
  background: var(--bg-0);
}
.bt-cell {
  position: relative;
  flex: 1 1 0; min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--hub-fg-9);
}
.bundle-teaser .preview-scale { position: absolute; top: 0; left: 0; transform-origin: top left; }
.bundle-teaser .preview-scale iframe { pointer-events: none; border: 0; display: block; }

/* ---------- Design-system themed grid (design.html) ---------- */
/* 4-col grid; span-2 cards fill left columns; align-items:start so each card
   is exactly as tall as its content — no empty black space stretching cards */
.cards.ds {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  align-items: start;
}
.card.s2 { grid-column: span 2; }

@media (max-width: 1200px) {
  .cards.ds { grid-template-columns: repeat(2, 1fr); }
  .card.s2  { grid-column: span 2; }
}
@media (max-width: 900px) {
  .cards.ds { grid-template-columns: 1fr; }
  .card.s2  { grid-column: span 1; }
}

/* Tiled preview: replaces static aspect-ratio with fixed height + inner grid */
.card-preview.tiles {
  aspect-ratio: auto;
  display: grid;
  gap: 4px;
  padding: 6px;
  background: var(--bg-0);
  /* no fixed height here — variants below set it */
}
/* 2×2 grid — Brand, Typography, Components */
.card-preview.tiles.g4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
  height: 340px;
}
/* 1-col × 3 rows — Palette */
.card-preview.tiles.g3 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  height: 360px;
}
/* single tile — Foundations */
.card-preview.tiles.g1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 200px;
}

/* Each tile: a clickable anchor that wraps a scaled iframe */
a.bt-tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--hub-fg-9);
  background: var(--bg-0);
  transition: border-color .2s;
  min-height: 0;
}
a.bt-tile:hover { border-color: var(--hub-gold-40); }

/* Tile caption — subtle mono label, bottom-left */
a.bt-tile .tile-label {
  position: absolute;
  bottom: 4px;
  left: 6px;
  z-index: 10;
  font-family: var(--hub-font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(135,139,145,0.55);
  pointer-events: none;
  white-space: nowrap;
  background: rgba(10,10,14,0.55);
  padding: 1px 4px;
  border-radius: 3px;
}

/* theme card: non-link div, hover on tiles not on card itself */
div.card { cursor: default; }
div.card:hover { background: var(--hub-card-bg); border-color: var(--hub-fg-9); }
/* NB: the hub page scrollbar is intentionally hidden (see html,body rule above);
   do NOT re-add a global html{scrollbar-width:thin} here — it leaks a default
   bar on mobile. Iframed content pages theme their own scrollbars. */