/* styles.css - hand-written, no framework, no external font. */
:root {
  --ink: #12180f; --paper: #f4f2ea; --panel: rgba(16, 22, 14, 0.92);
  --line: #3b4a34; --accent: #b8d26a; --warn: #e0a33c; --bad: #d9584a;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #20301f; color: var(--paper);
  font: 15px/1.55 var(--font); overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 12px;
  background: linear-gradient(180deg, rgba(10,14,8,0.72), rgba(10,14,8,0));
  pointer-events: none;
}
#topbar h1 {
  margin: 0; font-size: 19px; letter-spacing: 0.055em; text-transform: uppercase;
  font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.bar-right { display: flex; gap: 8px; pointer-events: auto; }

button {
  font: inherit; font-size: 13px; color: var(--paper); cursor: pointer;
  background: rgba(20, 28, 16, 0.78); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 13px;
}
button:hover { background: rgba(40, 56, 32, 0.92); border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); color: #16200f; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: #c9e17c; }

#hud {
  position: fixed; left: 12px; bottom: 12px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 8px; max-width: min(760px, calc(100vw - 24px));
  pointer-events: none;
}
.hud-block {
  background: rgba(10, 16, 8, 0.66); border: 1px solid rgba(120, 150, 96, 0.30);
  border-radius: 9px; padding: 7px 11px; min-width: 92px;
}
.hud-block.wide { min-width: 250px; flex: 1 1 250px; }
.hud-k { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.62; }
.hud-v { font: 600 21px/1.15 var(--mono); }
.hud-s { font-size: 11px; opacity: 0.74; font-family: var(--mono); }
.stride-gauge {
  position: relative; height: 10px; margin: 5px 0 3px;
  background: linear-gradient(90deg, rgba(217,88,74,.5), rgba(184,210,106,.65) 50%, rgba(217,88,74,.5));
  border-radius: 5px; overflow: hidden;
}
.stride-mark {
  position: absolute; left: calc(50% - 3px); top: 0; width: 6px; height: 10px;
  background: var(--paper); border-radius: 3px; transition: transform 90ms linear;
}
.stride-mark.good { background: var(--paper); }
.stride-mark.fair { background: var(--warn); }
.stride-mark.poor { background: var(--bad); }

.flash {
  position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 6;
  font-weight: 600; letter-spacing: 0.02em; color: var(--warn);
  text-shadow: 0 2px 10px rgba(0,0,0,0.85); pointer-events: none; text-align: center;
}

.panel {
  position: fixed; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px)); max-height: min(86vh, 820px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 22px 70px rgba(0,0,0,0.6);
}
/* `hidden` must actually hide: any class rule that sets display would beat it, and an invisible
   panel that still swallows clicks is the classic symptom. */
.panel[hidden] { display: none !important; }
.panel.modal { width: min(760px, calc(100vw - 28px)); }
.panel h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: 0.02em; }
.panel h3 { margin: 20px 0 7px; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.panel p, .panel li { font-size: 13.5px; }
.panel ul { padding-left: 20px; margin: 8px 0; }
.panel li { margin: 5px 0; }
.panel code { font-family: var(--mono); font-size: 12.5px; background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 4px; }
.close { position: absolute; top: 10px; right: 12px; font-size: 20px; line-height: 1; padding: 3px 9px; }

.field { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 13px; }
.field span { min-width: 62px; opacity: 0.75; }
select {
  font: inherit; font-size: 13px; flex: 1; min-width: 0; width: 100%; color: var(--paper);
  background: rgba(20, 28, 16, 0.9); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 9px;
}
.facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 12px 0; font-size: 13px; }
.facts dt { opacity: 0.66; }
.facts dd { margin: 0; font-family: var(--mono); }
.keys { font-size: 12px; opacity: 0.78; }
.keys b { font-family: var(--mono); color: var(--accent); font-weight: 600; }
.row { display: flex; gap: 10px; margin-top: 14px; }

table.results, table.numbers { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
table.results th, table.results td, table.numbers th, table.numbers td {
  text-align: left; padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
table.results th, table.numbers th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
table.results td:nth-child(3), table.results td:nth-child(4),
table.numbers td:nth-child(2), table.numbers td:nth-child(3) { font-family: var(--mono); }
table.results tr:first-child td { color: var(--accent); }
/* elimination reasons carry unbreakable tokens such as 217.1.1 - let them wrap on phones */
table.results td:nth-child(3), table.results td:nth-child(4) { white-space: nowrap; }
table.results td:nth-child(5) { font-size: 11.5px; opacity: 0.85; overflow-wrap: anywhere; }
table.results td:nth-child(2) { overflow-wrap: break-word; }
@media (max-width: 400px) {
  table.results th, table.results td { padding: 5px 4px; }
  #panel-result { padding: 16px 12px; }
}
.tally { background: rgba(184, 210, 106, 0.10); border-left: 3px solid var(--accent); padding: 9px 12px; border-radius: 0 7px 7px 0; }
.sources li { font-size: 12.5px; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: #20301f; z-index: 20; }

/* Touch pad: shown only while riding on a touch device.  The HUD moves to the top on touch
   devices so the pad and the HUD never share the bottom of the screen. */
#pad {
  display: none; position: fixed; z-index: 6; left: 0; right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 0 10px; justify-content: space-between; align-items: flex-end; pointer-events: none;
}
body.touch.riding #pad { display: flex; }
.pad-group { display: grid; grid-template-columns: 58px 58px; gap: 8px; pointer-events: auto; }
#pad button {
  width: 58px; height: 52px; padding: 0; font-size: 15px; font-weight: 600;
  background: rgba(10, 16, 8, 0.62); border-color: rgba(184, 210, 106, 0.45);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#pad button.pad-wide { grid-column: 1 / span 2; width: auto; height: 40px; font-size: 13px; }
#pad button.held { background: rgba(184, 210, 106, 0.85); color: #16200f; }
body.touch #hud { top: 58px; bottom: auto; }
body.touch .flash { top: auto; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 640px) {
  #hud { gap: 6px; left: 8px; right: 8px; bottom: 8px; }
  .hud-block { padding: 5px 8px; min-width: 74px; }
  .hud-v { font-size: 17px; }
  .hud-block.wide { min-width: 100%; }
  #topbar h1 { font-size: 15px; }
  .bar-right button { white-space: nowrap; padding: 6px 10px; }
}
/* compact two-row HUD on touch phones, portrait (narrow) or landscape (short) */
@media (max-width: 640px), (max-height: 500px) {
  /* compact two-row HUD: clock / penalties / next, then gait / stride gauge */
  body.touch #hud { top: 72px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  body.touch .hud-block { padding: 4px 7px; min-width: 0; grid-column: span 2; }
  body.touch .hud-block.wide { min-width: 0; grid-column: span 3; }
  body.touch .hud-k { font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.touch .hud-v { font-size: 15px; }
  body.touch .hud-s { font-size: 10px; }
  body.touch .hud-block:nth-child(2) .hud-s, body.touch .hud-block:nth-child(3) .hud-s,
  body.touch .hud-block.wide .hud-s + .hud-s, body.touch .stride-gauge + .hud-s { display: none; }
}
@media (max-height: 500px) and (min-width: 641px) {
  body.touch #hud { top: 56px; right: auto; width: min(440px, calc(100vw - 280px)); }
  body.touch .flash { bottom: auto; top: 64px; left: auto; right: 12px; transform: none; max-width: 40vw; }
}
@media (prefers-reduced-motion: reduce) { .stride-mark { transition: none; } }
/* short (landscape phone) screens: compact panels, and the action row stays in view */
@media (max-height: 500px) {
  .panel { padding: 12px 16px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); top: 50%; }
  .panel h2 { font-size: 17px; margin-bottom: 6px; }
  .facts { grid-template-columns: auto 1fr auto 1fr; margin: 6px 0; }
  .field { margin: 6px 0; }
  .keys { margin: 6px 0; }
  .panel .row { position: sticky; bottom: -12px; margin: 8px -16px -12px; padding: 8px 16px 12px; background: rgb(16, 22, 14); }
}