/* Moves tab (BAB-0049). Builds on ../style.css (cards, buttons, header) and ../face/face.css (the three-column tab layout); only what this page adds is here. */
:root { --ok: #17703C; --ok-bg: #E4F4EA; --bad-bg: #FBE6E6; --bad-line: #E7B3B3; }
.ico { color: var(--accent); }
.btn .ico { flex: none; }
.btn.main .ico { color: #fff; }
a.btn, .step a { text-decoration: none; }
.step a { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 -14px; padding: 0 14px; color: inherit; border-radius: var(--r-btn); }
.step a:hover { background: var(--raised); }
.chip.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); font-weight: 600; }
.chip.good { background: var(--ok-bg); border-color: #A9D9B8; color: var(--ok); font-weight: 600; }
.help.bad, .bad { color: var(--bad); font-weight: 600; }
.help b { color: var(--ink); }
.soft { color: var(--ink2); font-weight: 400; }
.card.inner { background: #FAFBFC; }

/* three columns: moves, the bot and its timeline, files + face + pose */
.mgrid { grid-template-columns: var(--mside) minmax(0, 1fr) var(--mside); }
@media (min-width: 901px) { :root { --mside: 330px; } }
@media (min-width: 901px) and (max-width: 1500px) { :root { --mside: 290px; } }
@media (min-width: 901px) and (max-width: 1250px) { :root { --mside: 262px; } }
@media (min-width: 901px) and (max-width: 1100px) { :root { --mside: 240px; } }

/* the list of moves */
.grp { margin: 14px 0 6px; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink2); }
.mvlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
.mvsel { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; min-height: 56px; padding: 6px 10px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-btn); cursor: pointer; font-size: 14px; }
.mvsel:hover { background: var(--raised); }
.mvsel[aria-pressed="true"] { border-color: var(--accent); background: #E3F1F5; }
.mvsel b { font-size: 14px; order: 1; }
.mvsel small { order: 3; font-size: 14px; line-height: 1.25; color: var(--ink2); overflow-wrap: anywhere; }
.mvsel .mood { order: 2; font-size: 14px; color: var(--accent); font-weight: 600; text-transform: capitalize; }
.mv.grey .mvsel { background: var(--raised); border-style: dashed; }
.mv.grey .mvsel b { color: var(--ink2); }
.mvplay { align-self: stretch; padding: 4px 10px; }
.mvplay .ico { width: 22px; height: 22px; }

/* the bot */
.mview { flex: none; height: clamp(240px, 36vh, 420px); min-height: 0; border-radius: 12px; overflow: hidden; }
.view .btn.reset { position: absolute; left: 12px; top: 12px; box-shadow: 0 1px 4px rgba(20,23,23,.18); z-index: 3; }
.readout { position: absolute; left: 12px; top: 66px; margin: 0; padding: 4px 10px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 600; z-index: 3; pointer-events: none; }
.tipped { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); margin: 0; padding: 8px 14px; max-width: min(520px, calc(100% - 200px)); background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad); border-radius: 10px; font-size: 14px; font-weight: 600; text-align: center; z-index: 3; }
.empty.start { pointer-events: auto; max-width: min(460px, 88%); display: grid; gap: 8px; padding: 16px 18px; top: 46%; z-index: 4; }
.empty.start .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.empty.start .btn { flex: 1 1 150px; }
.loading { z-index: 5; }

.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.transport .btn.main { flex: 0 1 auto; min-width: 120px; max-width: 100%; overflow-wrap: anywhere; }
.scrub { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; font-size: 14px; font-weight: 600; }
.scrub input { flex: 1; min-width: 80px; }
.leanrow { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 6px 12px; background: #FAFBFC; border: 1px solid var(--line); border-radius: 10px; }
.lean { margin: 0; font-size: 14px; }
.lean b.ok { color: var(--ok); }
.lean b.bad { color: var(--bad); }
.lean.soft { color: var(--ink2); }

/* the timeline */
.tl { padding: 12px 14px; display: grid; gap: 8px; }
.tlhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tlhead h3 { margin: 0; font-size: 18px; }
.tlact { display: flex; flex-wrap: wrap; gap: 6px; }
.mvmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 12px; align-items: end; }
.mvmeta .help { grid-column: 1 / -1; }
.mvmeta input[type="text"] { width: 100%; min-height: 44px; padding: 0 10px; border: 2px solid var(--line); border-radius: var(--r-btn); background: var(--card); font-size: 14px; }
.plan { margin: 0; padding: 8px 10px; background: var(--ok-bg); border: 1px solid #A9D9B8; border-radius: 10px; font-size: 14px; }
.trk { border-top: 1px solid var(--line); padding: 8px 0 2px; min-width: 0; }
.trk:first-child { border-top: 0; }
.trk.off { opacity: 0.85; }
.trkhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.trkhead b { font-size: 16px; }
.trkhead .soft { font-size: 14px; flex: 1 1 160px; }
.strip { display: block; width: 100%; height: auto; touch-action: none; }
.strip .plot { fill: #fff; stroke: var(--line); }
.strip .grid { stroke: #EEF1F5; }
.strip .zero { stroke: #B8C0CC; }
.strip .cap { stroke: #D6A64A; stroke-dasharray: 5 4; }
.strip .ax { font: 14px system-ui, sans-serif; fill: var(--ink2); }
.strip .written { fill: none; stroke: #9AA3B2; stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.strip .played { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.strip .playhead { stroke: #FF6A00; stroke-width: 2; }
.kf { cursor: grab; outline: none; }
.kf .hit { fill: transparent; }
.kf .dot { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.kf.on .dot { fill: var(--accent); stroke: #fff; }
.kf:focus-visible .hit { stroke: var(--accent); stroke-width: 2; fill: rgba(11,107,128,.12); }
.tnote { margin: 2px 0 6px; }
.addtrack .row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
select { font-size: 14px; }
.kfpanel { border-top: 1px solid var(--line); padding-top: 8px; }
.kfpanel h3 { margin: 0 0 6px; }
.kfgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.kfgrid input[type="number"], .rec input[type="number"] { width: 100%; min-height: 44px; padding: 0 10px; border: 2px solid var(--line); border-radius: var(--r-btn); background: var(--card); font-size: 14px; }
.acts4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin-top: 8px; }

/* right column */
.facebox { padding: 8px 4px; }
.tplrow .btn { flex: 1 1 100px; }
.jt { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 8px; }
.jrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.jrow input[type="range"] { width: 100%; min-height: 44px; }
.jv { min-width: 4ch; text-align: right; font-weight: 700; font-size: 16px; color: var(--ink); }
.acts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rec { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; display: grid; gap: 6px; }
.problems p { margin: 0 0 4px; }

/* phone and small tablet: the bot first, then the moves, then files */
@media (max-width: 900px) {
  .mgrid { display: flex; flex-direction: column; }
  .mview { height: clamp(260px, 44vh, 420px); }
  #stage { order: 1; } #p-list { order: 2; } #p-right { order: 3; }
  .top .chip { flex: 1 1 100%; justify-content: center; text-align: center; }
  .mvsel { min-height: 64px; }
}
@media (max-width: 520px) {
  .tlact .btn { flex: 1 1 120px; }
  .readout { top: 12px; left: auto; right: 12px; }
  .tipped { max-width: calc(100% - 24px); top: 66px; left: 12px; right: 12px; transform: none; }
  .transport .btn.main { flex: 1 1 100%; }
}

@media (min-width: 901px) and (max-width: 1100px) { .mvplay .pt { display: none; } .mvplay { min-width: 44px; padding: 4px 8px; } }