/* covering.css
   The four-level article on C(16,5,3) (/research/covering-number) and its
   Spanish first level (/es/cobertura). Depends only on tokens.css custom
   properties, so every colour follows the theme. Shared primitives
   (.doc-hero, .headline, .prose, .kpi-strip, .btn, .citation, .panel) come
   from the site sheets and are not restated here; this file only adds what
   the page has that no other page does: the level ladder, the figures, the
   tables and the puzzle. */

.cov { padding-bottom: var(--space-80); }
.cov .doc-hero { margin-bottom: 0; }

.cov-formal {
  margin-top: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.cov-kpis { margin-top: var(--space-32); }
.cov-kpis .kl { max-width: 18ch; }
.cov-byline {
  margin-top: var(--space-32);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── level ladder ───────────────────────────────────────────────────────── */
.cov-levels { margin-top: var(--space-48); scroll-margin-top: var(--space-80); }
.cov-levels-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-xs);
  letter-spacing: var(--tracking-heading);
  color: var(--fg);
}
.cov-levels-note { margin-top: var(--space-8); color: var(--fg-2); }
.cov-levels ol {
  list-style: none;
  margin: var(--space-24) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
}
.cov-levels li { min-width: 0; display: flex; }
.cov-levels ol a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cov-levels ol a:hover { border-color: var(--orange); }
.cov-level-num {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.cov-level-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  line-height: 1.2;
  overflow-wrap: break-word;
}
.cov-level-for { font-size: var(--text-caption); line-height: 1.4; color: var(--fg-3); }
.cov-levels-more {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  font-size: var(--text-caption);
}
.cov-levels-more a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .cov-levels ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cov-levels ol { grid-template-columns: minmax(0, 1fr); } }

/* ── one level ──────────────────────────────────────────────────────────── */
.cov-level {
  margin-top: var(--space-80);
  padding-top: var(--space-48);
  border-top: 1px solid var(--hair);
  scroll-margin-top: var(--space-48);
}
.cov-level-tag {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.cov-level > .headline { margin: var(--space-12) 0 var(--space-24); max-width: 24ch; }
.cov-level > .prose + .prose,
.cov-level > figure + .prose,
.cov-level > .cov-flow + .prose,
.cov-level > .cov-trust + .prose { margin-top: var(--space-32); }
.cov .prose h3 { scroll-margin-top: var(--space-48); }
.cov .prose h3:first-child { margin-top: 0; }
.cov .prose ul li::marker { color: var(--muted); }
.cov-lead { font-size: var(--text-subheading); color: var(--fg); }
.cov-theorem {
  padding: var(--space-16) var(--space-20);
  border-left: 3px solid var(--orange);
  background: var(--surface);
  color: var(--fg);
}
.cov-next {
  margin-top: var(--space-40);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
}
.cov-next a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
.cov-next a:first-child { color: var(--orange); }
.cov-next .icon { margin-left: var(--space-4); }

/* ── figures ────────────────────────────────────────────────────────────── */
.cov-figure { margin: var(--space-32) 0 0; max-width: 760px; }
.cov-figure figcaption {
  margin-top: var(--space-12);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--fg-3);
  max-width: 65ch;
}

/* Where the answer can be: ten cells from 56 to 65. Decorative; the legend
   under it carries the same facts in words. */
.cov-line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
}
.cov-line li {
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--fg);
}
.cov-line .is-out { color: var(--muted); text-decoration: line-through; background: var(--surface); }
.cov-line .is-ruled { color: var(--orange); text-decoration: line-through; border: 2px solid var(--orange); }
.cov-line .is-open { border: 2px solid var(--green); }
.cov-line .is-known { border: 2px solid var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
@media (max-width: 420px) { .cov-line li { font-size: 13px; min-height: 44px; } .cov-line { gap: 3px; } }

.cov-legend {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-24);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--fg-2);
}
.cov-legend li { display: flex; gap: var(--space-8); align-items: flex-start; min-width: 0; }
.cov-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 2px;
  border: 1px solid var(--hair-active);
  background: var(--surface);
}
.cov-swatch.is-ruled { border: 2px solid var(--orange); background: transparent; }
.cov-swatch.is-open { border: 2px solid var(--green); background: transparent; }
.cov-swatch.is-known { border: 2px solid var(--green); background: color-mix(in srgb, var(--green) 30%, transparent); }
@media (max-width: 640px) { .cov-legend { grid-template-columns: minmax(0, 1fr); } }

/* The excess graph of a 61-block covering: a five-edge star and a matching. */
.cov-svg { display: block; width: 100%; height: auto; }
.cov-star { max-width: 440px; }
.cov-star-edges line { stroke: var(--orange); stroke-width: 3; stroke-linecap: square; }
.cov-star-points circle { fill: var(--canvas); stroke: var(--fg); stroke-width: 2; }
.cov-star-points .is-hub { fill: var(--orange); stroke: var(--orange); }
.cov-star-label { fill: var(--on-signal); font-family: var(--font-mono); font-size: 18px; font-weight: 700; }

/* Six moves, top to bottom. */
.cov-flow {
  list-style: none;
  margin: var(--space-32) 0 0;
  padding: 0;
  max-width: 65ch;
  counter-reset: cov-step;
}
.cov-flow li {
  position: relative;
  padding: 0 0 var(--space-24) var(--space-40);
  line-height: var(--leading-body);
  color: var(--fg-2);
  counter-increment: cov-step;
}
.cov-flow li::before {
  content: counter(cov-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--orange);
  border-radius: 50%;
  background: var(--canvas);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange);
}
.cov-flow li::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  border-left: 1px solid var(--hair-active);
}
.cov-flow li:last-child { padding-bottom: 0; }
.cov-flow li:last-child::after { display: none; }
.cov-flow li:last-child::before { background: var(--orange); color: var(--on-signal); }
.cov-flow strong { color: var(--fg); }
.cov-ref {
  display: inline-block;
  margin-left: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── tables ─────────────────────────────────────────────────────────────── */
.cov-table-figure { max-width: 860px; }
.cov-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
}
.cov-table-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cov-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.cov-table th,
.cov-table td {
  padding: 10px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--hair-faint);
}
.cov-table thead th {
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--fw-medium);
  background: var(--surface-strong);
}
.cov-table th[scope="row"] { text-align: left; color: var(--fg); font-weight: var(--fw-medium); white-space: normal; min-width: 14ch; }
.cov-table thead th:first-child { text-align: left; }
.cov-table tfoot th,
.cov-table tfoot td { color: var(--fg); font-weight: var(--fw-semibold); border-bottom: 0; border-top: 1px solid var(--hair); }
.cov-table tbody tr:last-child th,
.cov-table tbody tr:last-child td { border-bottom: 0; }

/* ── trust base ─────────────────────────────────────────────────────────── */
.cov-trust {
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-16);
  max-width: 980px;
}
.cov-trust-col {
  min-width: 0;
  padding: var(--space-24);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-2);
  line-height: var(--leading-body);
}
.cov-trust-col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: var(--fw-semibold);
}
.cov-trust-col h4 + * { margin-top: var(--space-12); }
.cov-trust-col p + h4 { margin-top: var(--space-24); }
.cov-trust-col ol { padding-left: var(--space-20); }
.cov-trust-col li + li { margin-top: var(--space-8); }
@media (max-width: 760px) { .cov-trust { grid-template-columns: minmax(0, 1fr); } }

.cov-paper-links { margin-top: var(--space-24); }
.cov .prose code { overflow-wrap: anywhere; }

/* ── the puzzle ─────────────────────────────────────────────────────────── */
.cover-puzzle {
  margin: var(--space-32) 0 0;
  max-width: 860px;
  padding: var(--space-24);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.cp-title {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-16);
}
.cp-fallback p { color: var(--fg-2); line-height: var(--leading-body); }
.cp-board {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--space-32);
  align-items: start;
}
.cp-stage { min-width: 0; }
.cp-controls { min-width: 0; }
.cp-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.cp-edge {
  stroke: var(--hair-active);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  transition: stroke var(--dur-fast) var(--ease-out), stroke-width var(--dur-fast) var(--ease-out);
}
.cp-edge.is-covered { stroke: var(--orange); stroke-width: 3; stroke-dasharray: none; }
.cp-edge.is-doubled { stroke: var(--yellow); stroke-width: 6; stroke-dasharray: none; }
.cp-dot { cursor: pointer; }
.cp-dot circle { fill: var(--canvas); stroke: var(--fg); stroke-width: 2; transition: fill var(--dur-fast) var(--ease-out); }
.cp-dot text {
  fill: var(--fg);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}
.cp-dot.is-picked circle { fill: var(--orange); stroke: var(--orange); }
.cp-dot.is-picked text { fill: var(--on-signal); }
.cp-hint { color: var(--fg); font-weight: var(--fw-medium); min-height: 1.6em; }
.cp-friends { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-12) 0 var(--space-16); }
.cp-friend {
  min-height: 44px;
  min-width: 64px;
  padding: 8px 14px;
  border: 1px solid var(--hair-active);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cp-friend:hover { border-color: var(--orange); }
.cp-friend[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--on-signal); }
.cp-friend:focus-visible,
.cp-remove:focus-visible,
.cp-actions .btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cp-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
/* A state the shared button sheet does not have. */
.cp-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cp-status {
  margin-top: var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--fg);
}
.cp-note { margin-top: var(--space-8); font-size: var(--text-caption); line-height: 1.6; color: var(--fg-2); }
.cp-photos {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cp-photos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  color: var(--fg-2);
  min-width: 0;
}
.cp-photos li span { min-width: 0; overflow-wrap: anywhere; }
.cp-remove {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
}
.cp-remove:hover { color: var(--fg); border-color: var(--fg-3); }
.cp-key {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  font-size: var(--text-micro);
  color: var(--fg-3);
}
.cp-key-item { display: inline-flex; align-items: center; gap: var(--space-8); white-space: nowrap; }
.cp-key-line { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--hair-active); }
.cp-key-line.is-covered { border-top: 3px solid var(--orange); }
.cp-key-line.is-doubled { border-top: 5px solid var(--yellow); }
@media (max-width: 720px) {
  .cp-board { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); }
  .cp-stage { max-width: 240px; margin: 0 auto; width: 100%; }
}
@media (max-width: 420px) { .cover-puzzle { padding: var(--space-16); } }
@media (prefers-reduced-motion: reduce) {
  .cp-edge, .cp-dot circle, .cp-friend, .cov-levels ol a { transition: none; }
}