/* The tool pages: Purr, CSS Toolkit and Chata-gata (2026-10-31).
   Shorter than a case study on purpose, after daoho.dev's project pages:
   the name, one line, a short note, the way to try it, then the app itself.
   No chapters, no numbers. Tokens only (site-system.css, DESIGN-SYSTEM.md §7b);
   the buttons are the site's regular .tbtn. */
.tool-top, .tool-hero, .tool-shots, .tool-decisions, .tool-pager {
  --tool-muted: var(--ink-70, var(--muted));
  --tool-quiet: var(--ink-40, var(--muted));
  box-sizing: border-box; font-family: var(--face-sans);
}
.tool-label {
  margin: 0; font: 400 var(--type-label)/1.4 var(--face-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tool-muted);
}

/* ---- Top: name, one line, the note, how to try it ---------------------- */
/* No back link (user, 2026-10-31): the name is the first line, --page-top
   below the bar. */
.tool-top { padding-top: var(--page-top); }
.tool-top h1 {
  margin: 0;
  font: 600 var(--type-page-title)/1.05 var(--face-display); letter-spacing: -.025em;
}
.tool-tagline { margin: var(--space-2) 0 0; font: 400 var(--type-lead)/1.4 var(--face-sans); color: var(--tool-quiet); }
.tool-note { margin: var(--space-6) 0 0; max-width: 60ch; font-size: var(--type-lead); line-height: 1.55; }
.tool-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin: var(--space-6) 0 0; padding: 0; }
.tool-meta dt { font: 400 var(--type-label)/1.4 var(--face-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tool-muted); }
.tool-meta dd { margin: var(--space-1) 0 0; font-size: var(--type-small); line-height: 1.45; }
.tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---- The app: one wide picture, then a few screens with a line each ---- */
.tool-hero { margin: var(--section-y-tight) 0 0; }
.tool-shot { margin: 0; }
.tool-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm); outline: 1px solid var(--rule); outline-offset: -1px;
}
.tool-shot figcaption { margin-top: var(--space-3); max-width: 52ch; font-size: var(--type-small); line-height: 1.5; color: var(--tool-muted); }
.tool-shot figcaption strong { font-weight: 500; color: var(--ink); }
/* The live demo draws its desktop at up to 1280px wide; past that it would letterbox. */
.tool-demo { max-width: var(--demo-max); aspect-ratio: 16 / 9; margin-top: var(--space-7); overflow: hidden; border-radius: var(--radius-sm); }
.tool-demo iframe { display: block; width: 100%; height: 100%; border: 0; }
.tool-shots { padding-top: var(--section-y); }
.tool-shots-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); margin-top: var(--space-5); align-items: start; }

/* ---- Decisions: what the design chose, numbered by the order they matter -- */
.tool-decisions { padding-top: var(--section-y); }
.tool-decisions ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.tool-decisions h3 { margin: 0 0 var(--space-2); font: 600 var(--type-card-title)/1.2 var(--face-display); letter-spacing: -.02em; }
.tool-decisions li p { margin: 0; max-width: 52ch; font-size: var(--type-body); line-height: 1.55; color: var(--tool-muted); }

/* ---- Previous / next tool ---------------------------------------------- */
.tool-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  margin-top: var(--section-y); padding-top: var(--section-y-tight);
  border-top: 1px solid var(--rule);
}
.tool-pager a { display: block; color: inherit; text-decoration: none; }
.tool-pager a:last-child { text-align: right; }
.tool-pager strong { display: block; margin-top: var(--space-2); font: 600 var(--type-card-title)/1.15 var(--face-display); letter-spacing: -.02em; }
.tool-pager span:not(.tool-label) { display: block; margin-top: var(--space-1); font-size: var(--type-small); line-height: 1.45; color: var(--tool-muted); }
.tool-pager a:hover strong { color: var(--accent-text); }
.tool-pager a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: var(--space-1); border-radius: var(--radius-sm); }

@media (max-width: 760px) {
  .tool-shots-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .tool-decisions ol { grid-template-columns: 1fr; gap: var(--space-6); }
  .tool-pager { grid-template-columns: 1fr; }
  .tool-pager a:last-child { text-align: left; }
}