/* css/modules/loop-ledger.css: the loop ledger beside the map (js/modules/loop-ledger.js) plus the scrub / replay / pause controls it wires
 * ([data-controls] in the zone figure). Tokens only; motion is transform / opacity; mobile-first at 375px; every control carries its states
 * (default, hover, focus-visible, active, disabled, loading, error, success as data-state on .ledger-estimate). */

/* ---- stops in travel order ---- */
.zone-stops { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.zone-stops .ledger-row { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: var(--space-3); }
.zone-stops .ledger-row::before { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.zone-stops .ledger-row.is-lit::before { opacity: 1; }
.zone-stop-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--color-gold-dim); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; transform: scale(0.92); transition: transform var(--dur-pop) var(--ease-out), opacity var(--dur-pop) var(--ease-out); }
.ledger-row.is-lit .zone-stop-n { background: var(--color-gold); border-color: var(--color-gold); color: var(--text-inverted); transform: scale(1); }
.zone-stops .ledger-row.is-next { background: var(--color-gold-bg); }
.zone-stops .ledger-row.is-next .zone-stop-n { border-color: var(--color-gold); color: var(--text-primary); }
.zone-stops .ledger-row.is-next .zone-stop-n::after { content: ""; position: absolute; inset: -6px; border-radius: var(--radius-full); border: 1px solid var(--color-gold); opacity: 0.5; }
.zone-stops .zone-stop-n { position: relative; }
.zone-stops .figure:empty::before { content: "\2014"; color: var(--text-muted); }
.zone-stops .figure { color: var(--text-secondary); font-size: var(--text-sm); }

/* ---- lap timer ---- */
.zone-laps { display: grid; gap: var(--space-3); padding: var(--space-4) 0; }
.zone-pace { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: var(--measure); }
.zone-pace .mono { color: var(--text-primary); font-weight: 600; }
.zone-laps .row .btn { min-width: 7.5rem; }
.zone-laps .btn:focus-visible, .zone-controls .btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* ---- the one player input ---- */
.ledger-estimate { display: grid; gap: var(--space-2); padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--border-subtle); }
.est-field { display: grid; gap: var(--space-2); }
.est-row { flex-wrap: nowrap; gap: var(--space-2); }
.est-row input, .est-row select { min-height: var(--tap); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-surface); color: var(--text-primary); font: inherit; padding: 0 var(--space-3); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.est-row input { width: 6ch; flex: 0 0 auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield; }
.est-row input::-webkit-outer-spin-button, .est-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-row select { flex: 1 1 auto; min-width: 0; }
.est-of { color: var(--text-muted); font-size: var(--text-sm); flex: 0 0 auto; }
.est-row input:hover, .est-row select:hover { border-color: var(--color-gold-dim); background: var(--bg-surface-elevated); }
.est-row input:focus-visible, .est-row select:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 1px; border-color: var(--color-gold); }
.est-row input:active, .est-row select:active { background: var(--bg-surface-active); }
.est-row input:disabled, .est-row select:disabled { opacity: 0.5; cursor: not-allowed; }
.est-row input[aria-invalid="true"] { border-color: var(--color-ruby); }
.ledger-estimate[data-state="loading"] .est-row { opacity: 0.6; }
.ledger-estimate[data-state="error"] .est-line { color: var(--color-ruby); }
.ledger-estimate[data-state="estimate"] .est-line { color: var(--text-primary); font-size: var(--text-sm); }
.ledger-estimate[data-state="estimate"] .est-row input { border-color: var(--color-gold-dim); }
.est-line { margin: 0; min-height: 1.5em; max-width: var(--measure); }
.est-line .est-total { color: var(--color-gold); font-weight: 600; }
.est-line:empty { display: none; }

/* ---- scrub / replay / pause (in the zone figure; shown once a loop is live) ---- */
.zone-controls { display: grid; gap: var(--space-3); padding: var(--space-3) 0; }
.zone-controls[hidden] { display: none; }
.zone-scrub { display: grid; gap: var(--space-1); }
.zone-scrub input[type="range"] { width: 100%; min-height: var(--tap); accent-color: var(--color-gold); background: transparent; cursor: pointer; }
.zone-scrub input[type="range"]:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: var(--radius-control); }
.zone-scrub input[type="range"]:disabled { opacity: 0.5; cursor: not-allowed; }
.zone-controls .btn[aria-pressed="true"] { border-color: var(--color-gold-dim); color: var(--text-primary); }

@media (min-width: 760px) {
  .zone-controls { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .ledger-estimate { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .zone-stop-n, .zone-stops .ledger-row::before { transition: none; transform: none; }
}