/* /specs/: the site, by the numbers. Big numbers on soft tiles, a dark live strip, white cards with thin
   charts. Filled in by specs.js. Mobile first: phone styles here, bigger screens in the blocks at the bottom. */

/* ---------- the hero ---------- */
.sp-hero { padding-bottom: 26px; gap: 16px; }
.sp-hero h1 { font-size: clamp(44px, calc((100vw - 40px) / 7.2), 104px); }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: -6px; font-size: 15px; color: var(--ink); }
.lobby-hero .sp-stamp { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--muted); }

/* ---------- shared bits ---------- */
.sp-wrap { max-width: 1160px; margin: 12px auto 0; padding: 0 16px; }
.sp-label { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--muted); }
.sp-big { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 11vw, 64px); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-small { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--muted); min-height: 1.35em; }
.sp-h { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.sp-h-out { margin: 30px 0 12px; font-size: clamp(30px, 8vw, 40px); }
.sp-sub { margin: 6px 0 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.sp-gap { margin-top: 20px; }
.sp-card { position: relative; min-width: 0; background: var(--white); border: 2px solid #E3E3E1; border-radius: 20px; padding: 18px 16px 18px; }
.sp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sp-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: var(--paper); border-radius: 16px; padding: 14px 14px 14px; }
.sp-stat b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-stat span { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.sp-stat .sp-label { color: var(--muted); }
.sp-stat small { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.sp-stat .sp-page { color: var(--ink); font-size: 15px; font-weight: 800; }
.sp-stat .sp-page a, .sp-table a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sp-fine { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- the big numbers ---------- */
.sp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--paper); border-radius: 20px; padding: 16px 14px 16px; }

/* ---------- right now: the dark strip ---------- */
.sp-live { background: var(--ink); color: var(--white); border-radius: 20px; padding: 18px 16px 18px; }
.sp-live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.sp-live .sp-h { color: var(--white); }
.sp-more { color: var(--white); font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); }
.sp-more:hover { text-decoration-color: var(--white); }
.sp-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin-top: 16px; }
.sp-live-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-live .sp-label, .sp-live .sp-small { color: #C9CED6; }
.sp-live-note { margin: 12px 0 0; font-size: 13px; color: #C9CED6; }
.sp-live-note:empty { display: none; }
.sp-big.is-tick { animation: sptick .9s ease; }
@keyframes sptick { 0% { color: var(--gold); transform: translateY(-3px); } 100% { color: inherit; transform: none; } }

/* ---------- the code: one stacked bar, then a row per language ---------- */
.sp-stack { display: flex; gap: 2px; height: 22px; margin: 18px 0 6px; touch-action: pan-y; }
.sp-seg { display: block; min-width: 3px; border-radius: 4px; transition: opacity .15s ease; cursor: default; }
.sp-stack:hover .sp-seg:not(.is-hover) { opacity: .45; }
.sp-langs { list-style: none; margin: 8px 0 0; padding: 0; }
.sp-lang { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sp-lang:last-child { border-bottom: 0; }
.sp-swatch { width: 14px; height: 14px; border-radius: 4px; }
.sp-lang-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-lang-name b { font-size: 17px; font-weight: 800; }
.sp-lang-name small, .sp-lang-n small { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.sp-lang-n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sp-lang-n b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sp-mini { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: var(--paper); border-radius: 14px; padding: 12px 10px; }
.sp-mini b { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.sp-mini-n { font-size: 16px; font-weight: 800; line-height: 1.2; }
.sp-mini small { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); }

/* ---------- the games ---------- */
.sp-games { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-games li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sp-games img { width: 44px; height: 44px; border-radius: 12px; display: block; }
.sp-game a { color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 22px; letter-spacing: .03em; line-height: 1; }
.sp-game a:hover { text-decoration: underline; }
.sp-track { display: block; height: 10px; margin-top: 6px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.sp-track i { display: block; height: 100%; width: var(--w, 0%); background: var(--c, var(--ink)); border-radius: 999px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.sp-right { text-align: right; min-width: 64px; }
.sp-right b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-right span { font-size: 12px; font-weight: 700; color: var(--muted); }
.sp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }

/* ---------- every page, weighed: the skyline ---------- */
.sp-sky-wrap { position: relative; margin-top: 14px; padding-top: 22px; }
.sp-sky-top { position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.sp-sky { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 170px; border-bottom: 2px solid var(--ink); touch-action: pan-y; }
.sp-sky::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed #C9C6BE; pointer-events: none; }
.sp-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.sp-col i { display: block; width: 100%; height: var(--h, 0%); background: var(--ink); border-radius: 4px 4px 0 0; transition: background-color .15s ease; }
.sp-col.is-hover i { background: var(--blue); }
.sp-three { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }

/* the same numbers as a table, for anyone who'd rather read than hover */
.sp-table { margin-top: 14px; }
.sp-table summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(21, 24, 29, .3); }
.sp-table summary:hover { text-decoration-color: var(--ink); }
.sp-scroll { overflow-x: auto; margin-top: 6px; }
.sp-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table th, .sp-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.sp-table th { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- links ---------- */
.sp-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.sp-check { position: relative; margin: 14px 0 0; padding-left: 30px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.sp-check::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--right-dark, #3E7D39); color: var(--white); font-size: 13px; line-height: 22px; text-align: center; }
.sp-bars { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: baseline; font-size: 15px; }
.sp-bars .sp-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bars .sp-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-bars .sp-track { grid-column: 1 / -1; height: 8px; margin: 0; }

/* ---------- every colour ---------- */
.sp-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 3px; margin-top: 16px; touch-action: pan-y; }
.sp-mosaic i { display: block; aspect-ratio: 1 / 1; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(21, 24, 29, .1); transition: transform .12s ease; }
.sp-mosaic i.is-hover { transform: scale(1.35); position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }

/* ---------- fun facts ---------- */
.sp-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sp-fact { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--paper); border-radius: 20px; padding: 18px 16px; }
.sp-fact b { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 12vw, 58px); line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-fact p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.45; color: #3A3F47; text-wrap: pretty; }
.sp-emoji b { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 58px; }
.sp-fact .sp-emoji-row { display: flex; flex-wrap: wrap; gap: 8px; font-size: 26px; line-height: 1; }

/* ---------- the zero club ---------- */
.sp-zero { background: var(--white); border: 2px solid var(--ink); border-radius: 20px; padding: 18px 16px; }
.sp-zeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 16px; }
.sp-zeros div { display: flex; flex-direction: column; gap: 4px; }
.sp-zeros b { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 1; }
.sp-zeros span { font-size: 15px; font-weight: 700; color: var(--muted); }

/* ---------- how it's built ---------- */
.sp-built { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.sp-built li { font-size: 16px; line-height: 1.5; color: #3A3F47; text-wrap: pretty; }
.sp-built li::marker { color: var(--ink); }
.sp-built b { color: var(--ink); font-weight: 800; }
.specs-page main { padding-bottom: 36px; }

/* ---------- the tooltip ---------- */
.sp-tip {
  position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none; max-width: calc(100vw - 16px);
  padding: 7px 11px; border-radius: 10px; background: var(--ink); color: var(--white);
  font: 700 13px/1.3 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .12s ease;
}
.sp-tip.is-on { opacity: 1; }

/* ---------- bigger screens ---------- */
@media (min-width: 641px) {
  .sp-wrap { padding: 0 20px; margin-top: 14px; }
  .sp-tile { padding: 20px 22px 22px; border-radius: 24px; }
  .sp-label { font-size: 14px; }
  .sp-card, .sp-live, .sp-zero { border-radius: 24px; padding: 22px 22px 22px; }
  .sp-h { font-size: 28px; }
  .sp-live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-sky { height: 210px; }
  .sp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sp-zeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-zeros b { font-size: 80px; }
}
@media (min-width: 960px) {
  .sp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .sp-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .sp-links .sp-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
  .sp-mosaic { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 4px; }
  .sp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-big.is-tick { animation: none; }
  .sp-track i, .sp-col i, .sp-mosaic i, .sp-seg { transition: none; }
}