/* The skin pages (/skins/<slug>, web/scripts/skins.mjs), after tokens.css and site.css. Fingerprinted as skin.<hash>.css
   by web/scripts/landing-page.mjs, so the pages carry no inline <style>.

   The page (owner, 2026-10-08): the name and its numbers, the seed box (web/landing/seedbox.js), then the tiers as a
   grid, a row per pattern and a cell per tier, then the landing's hero as the foot (web/scripts/skin-hero.mjs, its rules
   web/landing/hero.css, which the catalogue pages share). Quiet:
   Inter, one grey for secondary text, a hairline between rows, white only on the seed marked and on the one button.
   A tier is marked by its family gem with a small numeral at its bottom right, in the text colour (white on black);
   there are no coloured numbers or squares. Under 47.5rem the grid stacks: the pattern, then each cell with its tier
   label. Brand tokens only, so the light theme follows. */

h2 { margin: 3rem 0 0.5rem; font-size: 1.375rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.025em; }
.crumbs { margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--tf-faint); }
.crumbs a { color: var(--tf-muted); text-decoration: none; }
.crumbs a:hover { color: var(--tf-fg); text-decoration: underline; text-underline-offset: 3px; }

/* The top: the title, its numbers, the guide, the seed box; the skin's picture beside them. */
.sk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; }
.sk-main { flex: 1 1 30rem; min-width: 0; }
.sk-main h1 { margin: 0 0 0.75rem; font-size: 2.25rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.025em; }
.sk-img { flex: 1 1 16rem; max-width: 28rem; }
.sk-img img { display: block; width: 100%; height: auto; }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; margin: 0; }
.stats { margin: 0; color: var(--tf-muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.chip, .phases a { color: var(--tf-accent-text); font-size: 0.9375rem; text-decoration: none; }
.chip:hover, .phases a:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide, .by { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--tf-faint); }
.guide a, .by a { color: var(--tf-text); text-underline-offset: 3px; text-decoration-color: var(--tf-line-heavy); }
.guide a:hover, .by a:hover { color: var(--tf-fg); }
.phases { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 2.5rem 0 0; }

/* The family gem with its tier number. */
.mk { position: relative; display: inline-flex; flex: none; margin-right: 0.55rem; }
.mk--2 { margin-right: 0.9rem; }
.mk img { display: block; }
.mk b { position: absolute; left: calc(100% - 0.15rem); bottom: -0.1rem; color: var(--tf-fg); font-size: 0.75rem; font-weight: 700; line-height: 1; }

/* The seed box: the seed and the float side by side, "Inspect in game" and "On Steam" under them, then what the seed
   grades (below 40rem no Inspect in game: steam:// does nothing on a phone). */
.seedbox { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1.75rem; }
.seedbox label { color: var(--tf-muted); font-size: 0.875rem; }
.seedbox .in { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; max-width: 100%; }
.seedbox input { width: 8.75rem; max-width: 100%; height: 3.25rem; padding: 0 1rem; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius); background: var(--tf-ink-raised); color: var(--tf-fg); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.seedbox .fl { width: 11rem; }
.seedbox input::placeholder { color: var(--tf-faint); font-size: 1rem; font-weight: 400; }
.seedbox input:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 1px; }
.ig { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; font-size: 0.875rem; color: var(--tf-muted); }
.igg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; }
.ig a { color: var(--tf-accent-text); text-decoration: none; }
.ig a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ig a[aria-disabled="true"], .ig a[aria-disabled="true"]:hover { color: var(--tf-faint); text-decoration: none; cursor: default; }
.res { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; padding-top: 0.2rem; }
.hits { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.hl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; color: var(--tf-fg); font-size: 1.0625rem; }
.hl .mk { margin-right: 0.6rem; }
.hl .mk--2 { margin-right: 0.95rem; }
.hl .rk, .hl .no { color: var(--tf-muted); }
.sl { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; font-size: 0.875rem; color: var(--tf-muted); }
.sl[hidden] { display: none; }
.sl a { color: var(--tf-accent-text); text-decoration: none; }
.sl a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sl a[hidden] { display: none; }

/* The grid: a row per pattern (its name, its seeds, its guide when the skin has several), a cell per tier. With
   data-cols on the grid every pattern's levels are Tier 1, 2, 3 in that order, so one header names the columns and the
   cells keep to them; without it each cell names its own tier and the cells wrap. */
.grid { margin-top: 3rem; }
h2 + .grid { margin-top: 0.75rem; }
.gr { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); border-top: 1px solid var(--tf-line); }
.gr.gh { border-top: 0; }
.gl { min-width: 0; padding: 1rem 1rem 1rem 0; }
.pn { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.pn img { display: block; flex: none; }
.pc { margin-top: 0.125rem; color: var(--tf-faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.gc { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); min-width: 0; }
.grid[data-cols] .gc { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.grid[data-cols="1"] { --cols: 1; }
.grid[data-cols="2"] { --cols: 2; }
.grid[data-cols="3"] { --cols: 3; }
.grid[data-cols="4"] { --cols: 4; }
.grid[data-cols="5"] { --cols: 5; }
.gh .gc span { padding: 0.625rem 1rem; color: var(--tf-fg); font-size: 0.875rem; font-weight: 600; }
.cell { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 1rem; border-left: 1px solid var(--tf-line); }
.cell.span { grid-column: 1 / -1; }
.cell.hit { background: var(--tf-ink-raised); }
.cl { display: flex; align-items: center; color: var(--tf-fg); font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
/* The tier label is the column's header on a desktop (kept for a screen reader), and a label that only repeats the
   pattern's name is never shown. */
.grid[data-cols] .cell:not(.span) .cl, .cl--x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nt { margin-top: -0.35rem; color: var(--tf-muted); font-size: 0.8125rem; line-height: 1.4; }
.bf { color: var(--tf-faint); }
/* Seeds in even columns, so a list reads as a table and not as a line of text. */
.seeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.125rem 0.5rem; font-size: 0.9375rem; line-height: 1.5rem; font-variant-numeric: tabular-nums; }
.seeds a { justify-self: start; margin: 0 -0.3rem; padding: 0 0.3rem; border-radius: var(--tf-radius-sm); color: var(--tf-text); text-decoration: none; }
.seeds a:hover { color: var(--tf-fg); text-decoration: underline; text-underline-offset: 3px; }
.seeds a.hit, .seeds a.hit:hover { background: var(--tf-fg); color: var(--tf-ink); text-decoration: none; }
/* A tier of more than 100 seeds starts folded. */
.fold summary { display: flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; color: var(--tf-muted); font-size: 0.8125rem; list-style: none; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "\25B8"; }
.fold[open] summary::after { content: "\25BE"; }
.fold .seeds { margin-top: 0.5rem; }
.vw { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; color: var(--tf-faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.vw a { color: var(--tf-accent-text); text-decoration: none; }
.vw a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Under 47.5rem the grid stacks: the pattern, then each cell with its tier label. */
@media (max-width: 47.5rem) {
  .grid { margin-top: 2.5rem; }
  .gr { grid-template-columns: minmax(0, 1fr); }
  .gh { display: none; }
  .gl { padding: 1.25rem 0 0.5rem; }
  .gc, .grid[data-cols] .gc { grid-template-columns: minmax(0, 1fr); }
  .cell { margin-inline: -0.75rem; padding: 0.75rem; border-left: 0; }
  .cell + .cell { border-top: 1px solid var(--tf-line); }
  .grid[data-cols] .cell:not(.span) .cl { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .cl--x { position: absolute; }
}

/* Under 40rem: no steam:// link. */
@media (max-width: 40rem) {
  .ig .ing, .ig .igg { display: none; }
}

/* Phones: text from 14 px, taps from 40 px high. */
@media (max-width: 35rem) {
  .sk-main h1 { font-size: 1.875rem; }
  .crumbs, .stats, .guide, .by, .pc, .nt, .vw, .sl, .ig, .fold summary { font-size: 0.875rem; }
  .crumbs a, .guide a, .by a { display: inline-block; padding: 0.6rem 0; }
  .chip, .phases a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .sk-img { flex-basis: 12rem; max-width: 18rem; }
  .seeds { gap: 0 0.25rem; font-size: 1rem; line-height: 1; }
  .seeds a { display: inline-flex; align-items: center; min-height: 2.5rem; margin: 0; padding: 0 0.4rem; }
  .vw a, .sl a, .ig a { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .fold summary { min-height: 2.5rem; }
}