/* preview.css -- page CSS for preview.qmd (the homepage redesign preview).
 *
 * Every selector is scoped under .irw-home so nothing here reaches another
 * page. Referenced from preview.qmd's own `css:` frontmatter, not added to the
 * theme in _quarto.yml, for the same reason.
 *
 * Fonts: Fredoka (display) and Nunito (body) only, the two faces the existing
 * homepage hero already loads in components/_hero_playful.qmd -- this file
 * adds no face the site did not already fetch. Code and table cells use the
 * theme's own monospace stack (--bs-font-monospace), not a loaded mono face.
 *
 * Colours are the logo kit's, with the two rules the kit imposes: purple
 * #8352ff and pink #ff4d8d are fills and borders only, never text, and link
 * and label text uses the darker #5a2fd6 instead. No hard drop shadows (the
 * playful hero's offset shadows are deliberately not carried over here).
 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@500;600;700;800&display=swap');

.irw-home, .irw-home * { box-sizing: border-box; }

.irw-home {
  --cream: #fff3e2;
  --cream-2: #fffaf2;
  --ink: #1c1c22;
  --body: #3c3a44;
  --muted: #55535f;
  --faint: #8a8478;
  --purple: #8352ff;
  --purple-text: #5a2fd6;
  --pink: #ff4d8d;
  --rule: #eadbc4;
  --card-border: #e3d3ba;
  --table-border: #ece2d2;

  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  border-radius: 16px;
  overflow-x: hidden;
  margin-bottom: 2rem;
}

.irw-home a { color: var(--purple-text); }
.irw-home a:hover { color: #3d1aa8; }

/* Cosmo gives h2 a bottom rule site-wide; it reads as a stray line across the
   cream here, so it is cleared for this page's headings only. */
.irw-home h1, .irw-home h2, .irw-home h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.irw-home code, .irw-home .mono {
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ---------- Hero ---------- */

.irw-home .hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px clamp(16px, 4vw, 40px) 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: center;
}

.irw-home .hero-copy { display: flex; flex-direction: column; gap: 20px; }

.irw-home .eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.irw-home .hero-copy h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.irw-home .subhead {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--body);
}

.irw-home .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.irw-home .btn-solid,
.irw-home .btn-ghost {
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.irw-home .btn-solid {
  background: var(--ink);
  color: var(--cream);
  padding: 13px 25px;
  border: 2px solid var(--ink);
}
.irw-home .btn-solid:hover { background: #33313c; color: var(--cream); }

.irw-home .btn-ghost {
  color: var(--ink);
  padding: 13px 25px;
  border: 2px solid var(--ink);
}
.irw-home .btn-ghost:hover { background: rgba(28, 28, 34, 0.06); color: var(--ink); }

/* ---------- Specimen card ---------- */

.irw-home .specimen {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.irw-home .spec-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.irw-home .spec-pos {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.irw-home .spec-chip {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--purple-text);
  border: 1.5px solid var(--purple);
  border-radius: 999px;
  padding: 3px 10px;
}

.irw-home .spec-fake {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--cream);
  border: 1px dashed var(--card-border);
  border-radius: 999px;
  padding: 2px 9px;
}

.irw-home .spec-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.irw-home .spec-head h2 { font-size: 20px; line-height: 1.25; }

.irw-home .spec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.irw-home .spec-meta .spec-name { color: var(--ink); font-weight: 500; }

/* The grid scrolls inside the card rather than widening it: at 375px a
   five-column conjoint specimen does not fit, and the 72px floor keeps the
   cells readable instead of crushing them. */
.irw-home .spec-grid-wrap {
  border: 1px solid var(--table-border);
  border-radius: 10px;
  overflow-x: auto;
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
}

.irw-home .spec-row {
  display: grid;
  gap: 8px;
  padding: 6px 14px;
  white-space: nowrap;
}
.irw-home .spec-row > span { overflow: hidden; text-overflow: ellipsis; }

.irw-home .spec-row.head {
  background: #faf5ec;
  color: var(--muted);
  border-bottom: 1px solid var(--table-border);
}
.irw-home .spec-row.alt { background: #fdfaf5; }

.irw-home .spec-more {
  padding: 6px 14px;
  color: var(--faint);
  background: #fdfaf5;
}

.irw-home .spec-fetch { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* A quiet control, not a second call to action: the buttons below it are the
   card's actions, and this only uncovers a line of code. */
.irw-home .spec-code-toggle {
  font-family: 'Nunito', system-ui, sans-serif;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--purple-text);
}
.irw-home .spec-code-toggle:hover { border-color: var(--purple); }

.irw-home .spec-code[hidden] { display: none; }

.irw-home .spec-code {
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  padding: 11px 15px;
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13.5px;
  overflow-x: auto;
  white-space: nowrap;
  align-self: stretch;
}

.irw-home .spec-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.irw-home .spec-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.irw-home .spec-pill {
  font-family: 'Nunito', system-ui, sans-serif;
  cursor: pointer;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 800;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.irw-home .spec-pill[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.irw-home .spec-pill:disabled { opacity: 0.4; cursor: default; }

.irw-home .spec-next {
  font-family: 'Nunito', system-ui, sans-serif;
  cursor: pointer;
  background: var(--ink);
  color: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 17px;
  font-size: 14px;
  font-weight: 800;
}
/* A family with a single specimen has nothing to advance to. */
.irw-home .spec-next:disabled { opacity: 0.35; cursor: default; }

.irw-home .spec-page { font-size: 13px; font-weight: 700; }

/* ---------- Families ---------- */

.irw-home .families {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--cream-2);
}

.irw-home .families-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px clamp(16px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.irw-home .section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}
.irw-home .section-head h2 { font-size: clamp(26px, 3vw, 32px); }
/* The heading links to the families table on the overview page. It is styled as
   a heading, not as a link, so the section keeps its weight. */
.irw-home .section-head h2 a { color: inherit; text-decoration: none; }
.irw-home .section-head h2 a:hover { color: var(--purple-text); text-decoration: underline; }
.irw-home .section-head .totals {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

.irw-home .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
  /* Not stretch: the core cell is taller than the rest because simsyn sits
     under it, and stretching would blow the other five into tall empty boxes. */
  align-items: start;
}

.irw-home .tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px;
}
.irw-home .tile:hover { border-color: var(--purple); color: var(--ink); }

.irw-home .tile-count {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
}
.irw-home .tile-name { font-weight: 800; }
.irw-home .tile-desc { font-size: 14px; color: var(--muted); line-height: 1.4; }

/* A family with a nested sub-entry (core, which simsyn sits under) occupies one
   grid cell holding both. The rule and indent mark the sub-entry as
   subordinate rather than a sixth family. */
.irw-home .tile-group { display: flex; flex-direction: column; gap: 8px; }
.irw-home .tile-group > .tile { flex: 1 1 auto; }

.irw-home .tile-sub {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 14px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--card-border);
  text-decoration: none;
  color: var(--muted);
}
.irw-home .tile-sub:hover { border-left-color: var(--purple); color: var(--muted); }
.irw-home .tile-sub-name { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.irw-home .tile-sub-desc { font-size: 13px; line-height: 1.35; }

.irw-home .tile.next {
  background: transparent;
  border: 1.5px dashed #a59d90;
  color: var(--muted);
}
.irw-home .tile.next:hover { border-color: var(--pink); }
.irw-home .tile.next .tile-name { color: var(--ink); }

/* ---------- Workflow ---------- */

.irw-home .workflow {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px clamp(16px, 4vw, 40px) 52px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.irw-home .workflow-head { display: flex; flex-direction: column; gap: 9px; max-width: 720px; }
.irw-home .workflow-head h2 { font-size: clamp(27px, 3.2vw, 34px); line-height: 1.15; }
.irw-home .workflow-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); }

.irw-home .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
}

/* The step cards are <li>, not links: they describe the workflow rather than
   navigate, so there is no hover state here. */
.irw-home .step {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 18px 17px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--ink);
}

.irw-home .step-n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--purple);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  flex-shrink: 0;
}

.irw-home .step-name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 18px; }
.irw-home .step-desc { font-size: 15px; line-height: 1.45; color: var(--body); }
/* margin-top:auto pins the call to the bottom of the card, so the six calls
   line up across a row whose cards have different amounts of text. */
.irw-home .step-call { font-size: 12.5px; color: var(--muted); word-break: break-all; margin-top: auto; }

.irw-home .step.contribute { background: var(--cream-2); border: 1.5px dashed var(--pink); }
.irw-home .step.contribute .step-n { background: var(--pink); color: var(--ink); }

.irw-home .loop-note { margin: 0; font-size: 14px; font-weight: 700; color: #6b6560; }

/* ---------- Prose below the new sections ---------- */

.irw-home-prose { max-width: 820px; margin: 0 auto; }

/* ---------- Narrow screens ---------- */

@media (max-width: 575px) {
  .irw-home { border-radius: 0; }
  .irw-home .hero { padding: 36px 16px 32px; gap: 32px; }
  .irw-home .specimen { padding: 18px 16px; }
  .irw-home .families-inner { padding: 36px 16px; }
  .irw-home .workflow { padding: 40px 16px 36px; }
  .irw-home .btn-solid, .irw-home .btn-ghost { flex: 1 1 100%; text-align: center; }
}