/* The homepage's own CSS. Load after bundle.css. Tokens only: no new colours, radii, shadows or fonts
   (START-HERE.md). The responsive fixes at the end belong in bundle.css (BoardHero, SiteHeader, Tile)
   once the design system takes them. */

/* ── type helpers ───────────────────────────────────── */
.fl-p code, .fl-case code { font: 400 0.9em/1 var(--font-mono); color: inherit; }
.fl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── product tiles: the whole tile is the link, like a FileRow ── */
.fl-product { position: relative; transition: border-color var(--duration-fast) var(--ease-standard); }
.fl-product:hover { border-color: var(--muted); }
.fl-product .fl-h3 a { color: inherit; text-decoration: none; }
.fl-product .fl-h3 a::after { content: ""; position: absolute; inset: 0; }
.fl-product__url { margin-top: auto; padding-top: var(--space-8); font: 400 13px/1.3 var(--font-mono); color: var(--muted); }

/* A case reads like test output: the problem is the failing test, the product is the fix. */
.fl-case { margin: 0; color: var(--muted); max-width: var(--size-measure); }
.fl-case--fail { color: var(--fg); font-weight: 500; }
.fl-case__label { margin-right: var(--space-8); font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ── about ──────────────────────────────────────────── */
.fl-about { max-width: var(--size-measure); }
.fl-sign { margin: var(--space-20) 0 0; font: 500 13px/1.3 var(--font-mono); color: var(--fg); }

/* ── theme switch glyphs (shown on phones, where the words don't fit) ── */
.fl-seg__glyph { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── responsive ─────────────────────────────────────── */

/* The copy column is 600px, not 540px, so "Frustration-driven" holds one line at 64px. */
.fl-hero__copy { max-width: 600px; }

/* Board hero, side by side from 961px: the cells shrink with the window, so the board never reaches
   the words. */
@media (min-width: 961px) {
  .fl-hero--board { min-height: 520px; padding-block: 72px 88px; }
  .fl-board {
    --reach: min(var(--space-96), max(var(--space-24), (100vw - var(--size-container)) / 2 + var(--space-24)));
    --cell: clamp(28px, (min(100vw, var(--size-container)) - 2 * var(--space-24) + var(--reach) - 600px - var(--space-40) - var(--space-48)) / 9, 56px);
    position: absolute; top: calc(-1 * var(--space-96)); right: calc(-1 * var(--reach)); width: auto; margin: 0;
    grid-template-columns: repeat(9, var(--cell)); grid-auto-rows: var(--cell);
  }
  .fl-board > i:not([class]) { aspect-ratio: auto; }
  .fl-board__logo frustrated-logo { --fl-size: min(150px, 3 * var(--cell) - 12px); }
}

/* Board hero, stacked up to 960px: a full-width strip under the words, instead of a 552px block against
   the right edge. Same 72 cells and the same pieces: 18 × 4 on tablets, 12 × 6 on phones. */
@media (max-width: 960px) {
  .fl-board { width: 100%; margin: var(--space-40) 0 0; grid-template-columns: repeat(18, minmax(0, 1fr)); }
  .fl-board > .is-ink { grid-area: 1 / 2 / span 4 / span 3; }
  .fl-board > .is-fume { grid-area: 1 / 7 / span 3 / span 1; }
  .fl-board > .is-line { grid-area: 1 / 16 / span 2 / span 2; }
  .fl-board__logo { grid-area: 2 / 11 / span 3 / span 3; }
  .fl-board__logo frustrated-logo { --fl-size: min(150px, (100vw - 2 * var(--space-24)) / 7.5); }
}

/* Header: keep the theme switch at every width. The header button goes instead;
   the nav's Products link does the same job. */
@media (max-width: 860px) {
  .fl-header .fl-seg { display: inline-flex; }
  .fl-header__end .fl-btn { display: none; }
}

/* bundle.css's 2-up .fl-tiles rule at 860px also catches .fl-tiles--3, leaving an orphan tile. Keep it 3-up. */
@media (max-width: 860px) {
  .fl-tiles.fl-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cards and rule tiles go one up before their text gets cramped. */
@media (max-width: 720px) {
  .fl-duo, .fl-tiles.fl-tiles--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .fl-header__bar { column-gap: var(--space-12); }
  .fl-header__end { display: flex; }
  .fl-seg button { display: grid; place-items: center; padding: 7px var(--space-8); }
  .fl-seg__glyph { display: block; }
  .fl-seg__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fl-board { gap: var(--space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fl-board > .is-ink { grid-area: 2 / 2 / span 4 / span 3; }
  .fl-board > .is-fume { grid-area: 1 / 6 / span 3 / span 1; }
  .fl-board > .is-line { grid-area: 1 / 11 / span 2 / span 2; }
  .fl-board__logo { grid-area: 3 / 8 / span 3 / span 3; }
  .fl-board__logo frustrated-logo { --fl-size: calc((100vw - 2 * var(--space-16)) / 5); }
}

@media (max-width: 374px) {
  .fl-brand { font-size: 15px; gap: var(--space-10); }
}
/* At 320px the wordmark and the switch can't share a row: show the mark alone (its label still names it). */
@media (max-width: 349px) {
  .fl-brand { font-size: 0; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-product { transition: none; }
}