/* tempo.css - Tempo to picture. The video and the timeline are the stage; hit points and settings sit in a rail. */
.tt-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px}
@media (min-width:1100px){.tt-layout{grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr)}.tt-out{grid-column:1/-1}}
.tt-layout h2{font-size:21px;margin:18px 0 10px}
.tt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.tt-file input{position:absolute;width:1px;height:1px;opacity:0}
.tt-file{position:relative;cursor:pointer}
.tt-file:focus-within .b{box-shadow:0 0 0 3px var(--study)}
#video{display:block;width:100%;max-height:52vh;background:#000;border-radius:var(--r1,14px);margin:10px 0}
#video:not([src]){display:none}
.tt-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.tt-read dt{color:var(--ink-3);font-size:14px;font-weight:600}.tt-read dd{margin:2px 0 0}
.tt-read input{width:100%;border:0;background:none;color:var(--ink);font:600 17px var(--f-mono);padding:0}
.tt-span{color:var(--ink-3);font-size:14px;margin-right:auto}
#timelineSvg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--surface);border:2px solid var(--rule);border-radius:var(--r1,14px)}
#timelineSvg rect{fill:var(--sunk);stroke:var(--rule-2)}
#timelineSvg line{stroke:var(--rule-2)}
#timelineSvg text{fill:var(--ink-2);font-family:var(--f-body)}
#timelineSvg circle{fill:var(--study);stroke:var(--surface);stroke-width:2}
#timelineSvg .knob{cursor:grab}
.tt-note{color:var(--ink-2);font-size:15px;margin:0 0 10px}
.hits{display:grid;gap:10px}
.hits .hit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px;padding:10px 0;border-bottom:2px solid var(--rule)}
.hits .hit .actions{grid-column:1/-1;display:flex;gap:8px}
.hits label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.hits input,.tt-grid input,.tt-grid select,.tt-paste textarea,.tt-export select{width:100%;font:500 16px var(--f-body);min-height:44px;padding:8px 10px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink)}
.hits .hint{font-size:13px;color:var(--ink-3);margin-top:2px}
.hits button{min-height:38px;padding:4px 12px;border-radius:10px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 14px var(--f-body);cursor:pointer}
.tt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.tt-grid label{display:grid;gap:4px;font-size:14px;font-weight:600;color:var(--ink-2)}
#fpsGroup{display:grid;gap:6px}#fpsGroup[hidden]{display:none}
.tt-paste{display:grid;gap:8px;margin:8px 0}.tt-paste label{font-size:14px;font-weight:600;color:var(--ink-2)}
.tt-adv{margin:12px 0}.tt-adv summary{cursor:pointer;font-weight:700;color:var(--study-ink);padding:6px 0}
.tt-export{display:grid;gap:10px;margin:8px 0;padding:12px 0;border-top:2px solid var(--rule)}
.tt-export label{display:grid;gap:4px;font-size:14px;font-weight:600}
.tt-status{position:sticky;top:8px;z-index:5;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--warn-bg,#fff4d6);color:var(--warn-ink,#6b4b00);font-weight:600}
.tt-status.ok{background:var(--study-tint);color:var(--study-ink)}
.results .muted,.results .error{color:var(--ink-2)}.results .error{color:var(--bad,#b8432f);font-weight:600}
.tempoCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px;border-top:2px solid var(--rule)}
.tempoCard{padding:12px 0;border-bottom:2px solid var(--rule)}
.tempoCard h3{margin:0;font-size:14px;color:var(--ink-3)}
.tempoCard .big{font:700 34px/1.1 var(--f-display);color:var(--ink);margin:4px 0}
.tempoCard-1 .big{color:var(--study-ink)}
.tempoCard .unit{font:600 15px var(--f-body);color:var(--ink-3)}
.tempoCard .kvs{display:grid;gap:2px;font-size:14.5px}.tempoCard .muted{color:var(--ink-3)}
.tt-block{margin:22px 0 0;overflow-x:auto}
.tt-block h3{font-size:17px;margin:0 0 8px}
.tt-block .hint{color:var(--ink-2);font-size:14.5px;margin:0 0 10px}
.tt-block .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px}
.tt-block .row3 label{font-size:13.5px;color:var(--ink-3);font-weight:600}
.tt-block .row3 input{width:100%;border:0;background:none;font:700 18px var(--f-body);color:var(--ink);padding:0}
.tt-block table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:14.5px}
.tt-block th{text-align:left;color:var(--ink-3);font-weight:600;padding:6px 8px;border-bottom:2px solid var(--rule)}
.tt-block td{padding:6px 8px;border-bottom:1px solid var(--rule)}