/* jump-rope — styles.css */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* must outrank every class rule below */

:root {
  --bg: #0e1118; --bg2: #161b26; --bg3: #1d2431; --line: #2b3446;
  --fg: #e8edf6; --dim: #9aa7bd; --accent: #ef5a37; --accent2: #4fb0ff;
  --ok: #57d38c; --warn: #f2c14e;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.6 var(--font);
  -webkit-text-size-adjust: 100%; }
main { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 30; background: var(--accent); color: #fff;
  padding: 8px 12px; border-radius: 6px; }

.top { max-width: 1040px; margin: 0 auto; padding: 22px 16px 8px; }
.top h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); letter-spacing: -0.02em; }
.top .tag { margin: 4px 0 0; color: var(--dim); font: 400 15px/1.4 var(--font); letter-spacing: 0;
  padding: 0; border: 0; border-radius: 0; white-space: normal; }  /* not the provenance pill */

.stage { margin: 0 0 6px; }
.modebar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.mode { background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; font: 600 14px var(--font); cursor: pointer; }
.mode span { display: block; font-weight: 400; font-size: 12px; color: var(--dim); }
.mode[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.mode[aria-pressed="true"] span { color: #ffe8e0; }

.canvas-wrap { position: relative; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: #0b0e14; }
#view { display: block; width: 100%; height: min(62vh, 560px); touch-action: none; }
.hud { position: absolute; inset: 10px 12px auto 12px; pointer-events: none; }
.hud-row { display: flex; gap: 18px; flex-wrap: wrap; }
.stat { background: rgba(12,16,24,.62); border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 11px; min-width: 76px; }
.stat b { display: block; font: 700 24px/1.1 var(--mono); }
.stat i { font-style: normal; font-size: 11px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .07em; }
.call { margin: 10px 0 0; font: 600 19px var(--font); text-shadow: 0 2px 8px #000; }
.note { margin: 2px 0 0; font-size: 13px; color: var(--warn); min-height: 1.2em;
  text-shadow: 0 2px 8px #000; }
.glfail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #0b0e14; color: var(--warn); padding: 20px; text-align: center; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.controls button { background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 14px; font: 600 14px var(--font); cursor: pointer; }
.controls button.primary { background: var(--accent2); border-color: var(--accent2); color: #05131f; }
.controls button:hover { border-color: var(--accent2); }
.keys { color: var(--dim); font-size: 13px; }
kbd { background: var(--bg3); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font: 600 12px var(--mono); }
.result { margin: 12px 0 0; padding: 12px 14px; background: var(--bg2);
  border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 9px; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 0;
  border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dim);
  padding: 9px 12px; font: 600 14px var(--font); cursor: pointer; }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

.panel { padding: 18px 0 0; }
.panel h2 { font-size: 24px; margin: 6px 0 12px; }
.panel h3 { font-size: 18px; margin: 26px 0 8px; color: var(--accent2); }
.panel p, .panel li { color: #cfd8e8; }
.panel q { color: var(--fg); font-style: italic; }
.panel code { font: 13px var(--mono); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; }
.panel a { color: var(--accent2); }
ul.keys-list, ul.rules, ul.gaps { padding-left: 20px; }
ul.rules li, ul.gaps li { margin: 7px 0; }

table.data { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 14px;
  display: block; overflow-x: auto; }
table.data caption { text-align: left; color: var(--dim); font-size: 13px; padding: 0 0 6px; }
table.data th, table.data td { border: 1px solid var(--line); padding: 6px 9px; text-align: left;
  vertical-align: top; }
table.data th { background: var(--bg2); font-size: 13px; }
table.prov td:first-child { white-space: nowrap; }
.tally { background: var(--bg2); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font-size: 14px; }

.tag { font: 700 11px/1.5 var(--mono); letter-spacing: .04em; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--line); white-space: nowrap; }
.t-DOCUMENTED { background: #12301f; color: #7fe0a6; border-color: #23543a; }
.t-MEASURED { background: #12283f; color: #79bdf5; border-color: #234a6e; }
.t-DERIVED { background: #2b2340; color: #bda6f0; border-color: #46386a; }
.t-CALIBRATED { background: #3a3016; color: #e8c774; border-color: #64512a; }
.t-RECONSTRUCTED { background: #3b2018; color: #f0a389; border-color: #67382b; }
.t-qualified { background: #2a2f38; color: #b9c6db; border-color: #414c5e; }

.labrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.labrow button { background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; font: 600 14px var(--font); cursor: pointer; }
.labout { background: #0b0e14; border: 1px solid var(--line); border-radius: 9px; padding: 12px;
  font: 12.5px/1.55 var(--mono); color: #cfe0f5; overflow-x: auto; white-space: pre; margin: 0; }

.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 18px 16px 40px;
  max-width: 1040px; margin-left: auto; margin-right: auto; color: var(--dim); font-size: 13px; }
.small { font-size: 12.5px; color: var(--dim); }

@media (max-width: 640px) {
  #view { height: 46vh; }
  .stat b { font-size: 19px; }
  .stat { min-width: 62px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Touch pad: shown only where the primary pointer is coarse (phones, tablets). */
.pad { display: none; gap: 8px; margin: 10px 0 0; }
.pad-btn { flex: 1 1 0; min-width: 0; min-height: 64px; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px; font: 700 16px var(--font);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer; }
.pad-btn:active, .pad-btn[data-hit] { background: var(--accent2); border-color: var(--accent2); color: #05131f; }
@media (pointer: coarse) { .pad { display: flex; } .keys { display: none; } }