/* The seed checker of /check: web/scripts/skins.mjs writes the markup, web/landing/checker.js fills it. Linked
   as /checker.<hash>.css (web/scripts/landing-page.mjs), so the page's one inline <style> (the skin pages')
   and its pinned hash stay as they are. Controls, the seed and how many lists grade it, then one row per list
   (tier dot, verdict, who, the tier's share of the 1,001 seeds) that opens in place to its ladder; below,
   every list as a card. Colours are the brand tokens (/tokens.css); a rung's colour is its place in its own
   list: 1 red, 2 amber, 3 green, 4 blue, lower grey. Plain controls under plain labels, the seed in mono, every
   list as a row between hairlines, every list again as a column. */

.sc {
  --sc-t5: #6b6b6b;
  margin-top: 2rem;
  color: var(--tf-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.sc [hidden] { display: none !important; }
:where(.sc) button, :where(.sc) input { font: inherit; }
.sc .t1 { --tc: var(--tf-tier-1); }
.sc .t2 { --tc: var(--tf-tier-2); }
.sc .t3 { --tc: var(--tf-tier-3); }
.sc .t4 { --tc: var(--tf-tier-4); }
.sc .t5 { --tc: var(--sc-t5); }

/* The controls: the skin, the seed between its steps, the nearest graded seeds. */
.sc-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; }
.sc-fld { position: relative; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.sc-fld--skin { flex: 0 1 320px; }
.sc-fld > label, .sc-lbl { color: var(--tf-muted); font-size: 0.8125rem; line-height: 1.4; }
.sc-sel, .sc-seed, .sc-step, .sc-nav { height: 2.75rem; margin: 0; border: 1px solid var(--tf-line-strong); background-color: transparent; color: var(--tf-fg); }
.sc-sel { width: 100%; padding: 0 38px 0 0.875rem; border-radius: var(--tf-radius-sm); font-size: 0.9375rem; font-weight: 500; text-overflow: ellipsis; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tf-muted) 50%), linear-gradient(135deg, var(--tf-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.sc-sel:focus { cursor: text; }
.sc-sel::placeholder { color: var(--tf-faint); opacity: 1; }
.sc-seedbox, .sc-navs { display: flex; }
.sc-navs { gap: 0.375rem; min-height: 2.75rem; }
.sc-seed { width: 5.25rem; padding: 0 6px; border-radius: 0; font-family: var(--tf-font-mono); font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.sc-seed::placeholder { color: var(--tf-faint); font-size: 12px; font-weight: 400; opacity: 1; }
.sc-step { width: 2.75rem; padding: 0; color: var(--tf-text); font-size: 1.125rem; cursor: pointer; }
.sc-step--down { border-right: 0; border-radius: var(--tf-radius-sm) 0 0 var(--tf-radius-sm); }
.sc-step--up { border-left: 0; border-radius: 0 var(--tf-radius-sm) var(--tf-radius-sm) 0; }
.sc-nav { padding: 0 0.75rem; border-radius: var(--tf-radius-sm); color: var(--tf-text); font: 500 0.8125rem/1 var(--tf-font-mono); white-space: nowrap; cursor: pointer; }
.sc-step:hover, .sc-nav:hover, .sc-sel:hover { background-color: var(--tf-ink-raised); border-color: var(--tf-line-heavy); color: var(--tf-fg); }
.sc-step:active, .sc-nav:active { background-color: var(--tf-ink-hover); }
.sc-sel:focus-visible, .sc-seed:focus-visible { position: relative; z-index: 1; outline: none; border-color: var(--tf-accent); box-shadow: 0 0 0 1px var(--tf-accent); }
.sc-step:focus-visible, .sc-nav:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--tf-accent-text); outline-offset: 2px; }
/* A seed past 1000: a red edge, no sentence. */
.sc-seed[aria-invalid="true"] { position: relative; z-index: 1; border-color: var(--tf-red); box-shadow: 0 0 0 1px var(--tf-red); }

/* The skin picker's list, under its box. */
.sc-list { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; max-height: 18rem; margin: 0.25rem 0 0; padding: 0.25rem; overflow-y: auto; list-style: none; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius); background: var(--tf-pane); }
.sc-list li { padding: 0.35rem 0.6rem; border-radius: var(--tf-radius-sm); color: var(--tf-text); font-size: 0.875rem; line-height: 1.4; cursor: pointer; }
.sc-list li:hover, .sc-list li.is-active { background: var(--tf-ink-hover); color: var(--tf-fg); }
.sc-list li[aria-selected="true"] { color: var(--tf-fg); font-weight: 600; }
.sc-list .sc-none { color: var(--tf-faint); cursor: default; }
.sc-list .sc-none:hover { background: none; color: var(--tf-faint); }

/* The seed and how many lists grade it. */
.sc-res { min-height: 24rem; transition: opacity 150ms ease; }
.sc-res.is-stale { opacity: 0.35; }
.sc-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-top: 2rem; }
.sc-num { margin: 0; color: var(--tf-fg); font-family: var(--tf-font-mono); font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-num span { color: var(--tf-faint); }
.sc-count { margin: 0; padding: 0; color: var(--tf-fg); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.sc-msg { margin: 18px 0 0; color: var(--tf-faint); font-size: 0.875rem; }
.sc-msg button { margin: 0; padding: 0; border: 0; background: none; color: var(--tf-accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The rail: one row per list between hairlines, under a strong rule, grouped by pattern and phase, each opening
   in place. */
.sc-dot { grid-area: dot; flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 1px; background: var(--tc); }
.sc-dot--off { background: transparent; box-shadow: inset 0 0 0 1px var(--tf-line-heavy); }
.sc-rail { margin-top: 1.25rem; overflow: hidden; border-top: 1px solid var(--tf-line-heavy); border-bottom: 1px solid var(--tf-line-strong); }
.sc-rail > * + * { border-top: 1px solid var(--tf-line); }
.sc-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 1rem 0 0.25rem; }
.sc-gh + .sc-item { border-top: 0; }
.sc-gh-n { color: var(--tf-muted); font-size: 0.875rem; font-weight: 600; }
.sc-gh-c { color: var(--tf-faint); font-size: 0.8125rem; }
.sc-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 196px 12px; grid-template-areas: 'dot txt sz chev'; align-items: center; gap: 1rem; width: 100%; min-height: 3rem; margin: 0; padding: 0.4rem 0.75rem 0.4rem 0.25rem; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.sc-row:hover { background: var(--tf-ink-raised); }
.sc-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tf-accent-text); }
.sc-row[aria-expanded="true"] { background: var(--tf-ink-raised); }
.sc-txt { grid-area: txt; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; gap: 2px 20px; min-width: 0; }
.sc-v { overflow: hidden; color: var(--tf-fg); font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.sc-v--none { color: var(--tf-faint); font-weight: 500; }
.sc-who { overflow: hidden; color: var(--tf-muted); font-size: 0.875rem; white-space: nowrap; text-overflow: ellipsis; }
.sc-who i { margin-left: 8px; color: var(--tf-faint); font-style: normal; font-size: 0.8125rem; }
.sc-row--none .sc-who { color: var(--tf-faint); }
/* A tier's size: its share of the 1,001 seeds as a 2 px bar, then count and share. */
.sc-sz { grid-area: sz; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; }
.sc-sz-b { position: relative; height: 2px; overflow: hidden; background: var(--tf-line-strong); }
.sc-sz-b span { position: absolute; top: 0; bottom: 0; left: 0; min-width: 2px; background: var(--tc); }
.sc-sz-n { color: var(--tf-muted); font-size: 0.8125rem; line-height: 1.5; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sc-chev { grid-area: chev; justify-self: end; width: 7px; height: 7px; border-right: 1.75px solid var(--tf-faint); border-bottom: 1.75px solid var(--tf-faint); transform: rotate(-45deg); }
.sc-row:hover .sc-chev { border-color: var(--tf-fg); }
.sc-row[aria-expanded="true"] .sc-chev { transform: rotate(45deg); border-color: var(--tf-fg); }
.sc-det { padding: 0.25rem 0.75rem 1.25rem 2.75rem; background: var(--tf-ink-raised); }
.sc-det-t { margin: 0 0 10px; color: var(--tf-faint); font-size: 0.8125rem; }

/* A ladder: one line per rung, the seed's rung lit, Not graded last. */
.sc-lad { margin: 0; padding: 0; list-style: none; }
.sc-lad li { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 34px; color: var(--tf-faint); font-size: 14px; }
.sc-lad li::before { content: ''; align-self: stretch; margin: 6px 0; background: color-mix(in srgb, var(--tc) 30%, transparent); }
.sc-lad li.sc-ng { margin-top: 6px; border-top: 1px solid var(--tf-line-strong); }
.sc-lad li.sc-ng::before { background: var(--tf-line-strong); }
.sc-lad li.is-on { color: var(--tf-fg); font-weight: 600; }
.sc-lad li.is-on::before { background: var(--tc); }
.sc-lad li.sc-ng.is-on::before { background: var(--sc-t5); box-shadow: none; }
.sc-lad-l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sc-lad-n { color: var(--tf-faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-lad li.is-on .sc-lad-n { color: var(--tf-text); }
.sc-det .sc-lad { max-width: 460px; }
.sc-cred { margin: 16px 0 0; color: var(--tf-faint); font-size: 0.8125rem; }
.sc-cred a, .sc-card-f a, .sc-links a { color: var(--tf-accent-text); text-decoration: none; }
.sc-cred a:hover, .sc-card-f a:hover, .sc-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Under the rail: the share link and CSFloat's search for the seed. */
.sc-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 1rem 0 0; padding: 0; color: var(--tf-faint); font-size: 0.8125rem; }
.sc-links span { color: var(--tf-faint); }

/* Every list, in columns. */
.sc-all { margin-top: 4rem; }
.sc-all-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin: 0; padding-bottom: 0.5rem; }
.sc-all-h h2 { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; color: var(--tf-fg); font-size: 1.125rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.02em; }
.sc-all-h h2 span { color: var(--tf-faint); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }
.sc-all-h .chip { margin-left: auto; }
.sc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; }
.sc-card { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.25rem 0 1rem; }
.sc-card-h b, .sc-card-h span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sc-card-h b { color: var(--tf-fg); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.015em; }
.sc-card-h span { color: var(--tf-faint); font-size: 0.8125rem; }
.sc-card .sc-lad li { height: 28px; font-size: 13.5px; }
.sc-card .sc-lad li::before { margin: 5px 0; }
.sc-card-f { margin-top: auto; font-size: 0.8125rem; }
.sc-card-f a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Two columns. */
@media (max-width: 900px) {
  .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: the skin field has its own row, rows stack their tier size under the verdict, one card per row; text
   from 14 px where it is read, 16 px in the fields so iOS does not zoom, tap targets from 40 px. */
@media (max-width: 600px) {
  .sc-fld--skin { flex-basis: 100%; }
  .sc-fld > label, .sc-lbl { font-size: 0.875rem; }
  .sc-sel { font-size: 1rem; }
  .sc-list li { padding: 0.65rem 0.6rem; }
  .sc-num { font-size: 1.75rem; }
  .sc-row { grid-template-columns: 10px minmax(0, 1fr) 12px; grid-template-areas: 'dot txt chev' '. sz .'; gap: 0.25rem 0.875rem; padding: 0.6rem 0.25rem; }
  .sc-row > .sc-dot { align-self: start; margin-top: 0.45rem; }
  .sc-txt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sc-sz { grid-template-columns: 64px auto; justify-content: start; margin-top: 3px; }
  .sc-sz-n { font-size: 0.8125rem; text-align: left; }
  .sc-lad-n, .sc-gh-c { font-size: 0.8125rem; }
  .sc-det { padding: 0.25rem 0.25rem 1.25rem 1.75rem; }
  .sc-cred, .sc-links, .sc-card-f { font-size: 0.875rem; }
  .sc-cred a, .sc-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .sc-cards { grid-template-columns: minmax(0, 1fr); }
  .sc-card { padding: 1.25rem 0 0.75rem; }
  .sc-card-f a { padding: 10px 0; line-height: 20px; }
}