/* q51-q55 shared styles (QM). Page palette: --ink #20242b, --muted #656d79, --blue #2557a7, --line #e4e7ec, --soft #f6f8fb. */
#training .eyebrow{font-size:12px}
/* nothing on the footage: plug.js's centre icon and transparent hit area are removed; the video itself toggles */
#training .plug-big,#training .plug-hit{display:none!important}
#training .plug-stage video{border-radius:8px}

/* live clock (Q14) */
#training .qm-clock{display:block;font-size:72px;line-height:.86;font-weight:640;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);transition:color .35s;white-space:nowrap}
#training .plug.is-criterion .qm-clock{color:var(--blue)}
#training .qm-sub{margin:0;font-size:15px;line-height:1.35;color:var(--muted)}
#training .plug.is-criterion .qm-sub{color:var(--blue);font-weight:600}
#training .qm-status{margin:0;font-size:14px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
#training .qm-status b{color:var(--ink);font-weight:640}
#training .qm-status [data-q="phase"]{color:var(--ink);font-weight:600}
#training .plug.is-criterion .qm-status .qm-k,#training .plug.is-criterion .qm-status .qm-k b{color:var(--blue)}

/* play / pause */
#training .qm-toggle{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;padding:0;color:var(--ink);cursor:pointer}
#training .qm-toggle:hover{border-color:#c7ced8;background:var(--soft)}
#training .qm-toggle svg{width:14px;height:14px;fill:currentColor}
#training .qm-toggle:focus-visible,#training .qm-btn:focus-visible{outline:3px solid #668fd1;outline-offset:2px}

/* result buttons (Q09) */
#training .qm-btns{display:flex;flex-wrap:wrap;gap:8px}
#training .qm-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.3;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
#training .qm-btn:hover{border-color:#b9c3d3;background:var(--soft)}
#training .qm-btn b{color:var(--blue);font-weight:640;font-variant-numeric:tabular-nums}
#training .qm-btn svg{width:12px;height:12px;fill:currentColor}
#training .qm-primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
#training .qm-primary:hover{background:#1f4b91;border-color:#1f4b91}

/* to-scale trial bar */
#training .qm-tl{--qm-gap:3px;--qm-ggap:8px;position:relative;user-select:none;-webkit-user-select:none}
#training .qm-tiles{position:relative;display:flex;height:24px;touch-action:none;outline:none;cursor:pointer}
#training .qm-tiles:focus-visible{outline:3px solid #668fd1;outline-offset:4px;border-radius:4px}
#training .qm-tl .plug-tile{flex:none;margin-right:var(--qm-gap);border-radius:2px}
#training .qm-tl .plug-tile.is-g1{margin-right:var(--qm-ggap)}
#training .qm-tl .plug-tile:last-child{margin-right:0}
#training .qm-tl.is-axis .plug-tile{position:absolute;top:0;bottom:0;margin:0}
#training .qm-tl .plug-tile.is-done.is-warmup::after{width:3px;height:3px;margin:-1.5px 0 0 -1.5px}
#training .qm-phases{position:relative;height:28px;margin-top:4px}
#training .qm-ph{position:absolute;top:0;height:6px;border:1.5px solid #c3cad4;border-top:0;border-radius:0 0 3px 3px}
#training .qm-ph em{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap}
#training .qm-ph-warm em{left:0;transform:none}
#training .qm-ph-streak em{left:auto;right:0;transform:none}
#training .qm-tl.is-criterion .qm-ph-streak{border-color:var(--blue)}
#training .qm-tl.is-criterion .qm-ph-streak em{color:var(--blue);font-weight:600}
#training .qm-legend{display:flex;flex-wrap:nowrap;align-items:center;gap:6px 16px;margin-top:4px;font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap}
#training .qm-legend>span{display:inline-flex;align-items:center;gap:6px}
#training .qm-legend em{font-style:normal}
#training .qm-legend .s{display:none}
#training .qm-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--line);position:relative}
#training .qm-legend .lg-warm{background:#e9ecf0;border-color:#e9ecf0}
#training .qm-legend .lg-warm::after{content:"";position:absolute;left:4px;top:4px;width:3px;height:3px;border-radius:50%;background:#9aa3af}
#training .qm-legend .lg-fail{background:#f3f5f8;border-color:#c3cad4}
#training .qm-legend .lg-success{background:var(--blue);border-color:var(--blue)}
#training .qm-legend .qm-scale{margin-left:auto}

/* 0-45 min tick ruler (Q10) */
#training .qm-ruler{margin:0}
#training .qm-rlab{position:relative;height:18px;font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap}
#training .qm-rlab b{font-weight:620}
#training .qm-rlab-e2r{position:absolute;left:0;bottom:0;color:var(--blue)}
#training .qm-rlab-sparse{position:absolute;right:0;bottom:0;text-align:right}
#training .qm-rlab-sparse b{color:#59616d}
#training .qm-rtrack{position:relative;height:6px;margin-top:6px;border-radius:3px;background:#eef1f5}
#training .qm-rrun{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--blue)}
#training .qm-rhead{position:absolute;top:-4px;width:2px;height:14px;margin-left:-1px;background:var(--ink);border-radius:1px;left:0}
#training .plug.is-criterion .qm-rhead{background:var(--blue)}
#training .qm-rsparse{position:absolute;top:-5px;width:3px;height:16px;margin-left:-3px;border-radius:1px;background:#9aa3ae}
#training .qm-rticks{position:relative;height:20px;margin-top:3px}
#training .qm-rt{position:absolute;top:0;width:1px;height:4px;background:#c7ced8}
#training .qm-rt.is-major{height:6px}
#training .qm-rt em{position:absolute;top:6px;left:0;transform:translateX(-50%);font-style:normal;font-size:12px;line-height:14px;color:#7b8492;font-variant-numeric:tabular-nums;white-space:nowrap}
#training .qm-rt:first-child em{transform:none}
#training .qm-rt:last-child em{transform:translateX(-100%)}
#training .qm-ruler figcaption{margin-top:2px;font-size:12px;color:var(--muted)}

@media (max-width:600px){
  #training .qm-clock{font-size:44px}
  #training .qm-tl{--qm-gap:2px;--qm-ggap:5px}
  #training .qm-tiles{height:20px}
  #training .qm-legend{gap:4px 10px}
  #training .qm-legend .l{display:none}
  #training .qm-legend .s{display:inline}
  #training .qm-btn{font-size:13px;padding:7px 13px}
  #training .qm-status{font-size:13px}
  #training .qm-rlab{font-size:12px}
}
@media (prefers-reduced-motion:reduce){#training .qm-clock{transition:none}}
/* stage · trial · in a row (Q14 meta) */
#training .qm-meta{display:flex;gap:28px;margin:0;padding:14px 0 0;border-top:1px solid var(--line)}
#training .qm-meta dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 3px}
#training .qm-meta dd{margin:0;font-size:17px;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
#training .qm-meta b{font-weight:640}
#training .plug.is-criterion .qm-meta .qm-k dd{color:var(--blue)}
@media (max-width:600px){
  #training .qm-meta{gap:20px;padding-top:10px}
  #training .qm-meta dd{font-size:15px}
  #training .qm-tl .plug-tile.is-done.is-warmup::after{display:none}
  #training .qm-legend{gap:4px 8px}
}

/* q53 clock with reference */
#training .q53-top{display:grid;grid-template-columns:minmax(0,64fr) minmax(0,32fr);gap:4%;align-items:stretch}
#training .q53-media{min-width:0}
#training .q53-side{min-width:0;display:flex;flex-direction:column;justify-content:space-between}
#training .q53-clockrow{display:flex;align-items:center;justify-content:flex-start;gap:18px}
#training .q53-clock .qm-clock{font-size:76px}
#training .q53-clock .qm-sub{margin-top:12px;font-size:16px}
#training .q53-clock .qm-status{margin-top:6px}
#training .q53-btns .qm-btns{flex-direction:column;align-items:stretch;gap:10px}
#training .q53-btns .qm-btn{justify-content:center;padding:10px 16px}
#training .q53-bar{margin-top:32px}
/* the pair of bars */
#training .q53-pair{margin:0;padding:16px 0 0;border-top:1px solid var(--line)}
#training .q53-pair figcaption{font-size:14px;color:var(--muted);margin:0 0 14px}
#training .q53-row,#training .q53-axis{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px}
#training .q53-row+.q53-row{margin-top:14px}
#training .q53-name{font-size:13px;color:var(--muted);white-space:nowrap}
#training .is-e2r .q53-name{color:var(--ink);font-weight:620}
#training .q53-track{position:relative;height:18px;margin-right:52px}
#training .q53-track i,#training .q53-track s{position:absolute;left:0;top:0;bottom:0;border-radius:0 3px 3px 0}
#training .is-sparse .q53-track i{background:#c9ced6}
#training .is-e2r .q53-track s{background:#e3e9f3;text-decoration:none}
#training .is-e2r .q53-track i{background:var(--blue);width:0}
#training .q53-track em{position:absolute;top:50%;transform:translateY(-50%);padding-left:7px;font-style:normal;font-size:13px;font-weight:620;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#training .is-e2r .q53-track em{color:var(--blue)}
#training .q53-axis{margin-top:8px}
#training .q53-ticks{position:relative;height:20px;margin-right:52px;border-top:1px solid #d5dae1}
#training .q53-ticks span{position:absolute;top:3px;transform:translateX(-50%);font-size:12px;color:#7b8492;font-variant-numeric:tabular-nums;white-space:nowrap}
#training .q53-ticks span:first-child{transform:none}
#training .q53-ticks span:last-child{transform:translateX(-24%)}
@media (max-width:900px){
  #training .q53{display:flex;flex-direction:column}
  #training .q53-top,#training .q53-side,#training .q53-upper{display:contents}
  #training .q53-media{order:1}
  #training .q53-clock{order:2;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;margin-top:16px}
  #training .q53-clockrow{grid-row:1 / span 2;gap:10px;justify-content:flex-start}
  #training .q53-clock .qm-clock{font-size:44px}
  #training .q53-clock .qm-sub{margin:0;font-size:13px;align-self:end}
  #training .q53-clock .qm-status{margin:2px 0 0;font-size:13px;align-self:start}
  #training .q53-btns{order:3;margin-top:16px}
  #training .q53-btns .qm-btns{flex-direction:row;flex-wrap:wrap;gap:8px}
  #training .q53-bar{order:4;margin-top:22px}
  #training .q53-pair{order:5;margin-top:18px}
}
@media (max-width:600px){
  #training .q53-clock{grid-template-columns:1fr}
  #training .q53-clockrow{grid-row:auto}
  #training .q53-clock .qm-sub{margin-top:8px}
  #training .q53-row,#training .q53-axis{grid-template-columns:96px minmax(0,1fr);gap:8px}
}

/* 11-01 polish: labelled stats, streak cells, quieter bar */
#training .q53-clock .qm-clock{font-variant-numeric:tabular-nums}
#training .q53-stats{display:flex;gap:28px;margin:14px 0 0}
#training .q53-stats div{min-width:0}
#training .q53-stats dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#training .q53-stats dd{margin:2px 0 0;font-size:15px;color:var(--ink);white-space:nowrap}
#training .q53-streak{padding:16px 0 18px;border-top:1px solid var(--line)}
#training .q53-streak-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px;font-size:14px;color:var(--muted)}
#training .q53-streak-head b{font-size:20px;font-weight:620;color:var(--ink);font-variant-numeric:tabular-nums}
#training .q53-streak.is-full .q53-streak-head b{color:var(--blue)}
#training .q53-cells{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
#training .q53-cells i{height:22px;border-radius:4px;background:#eef1f5;border:1px solid #dfe4ea;transition:background .25s,border-color .25s}
#training .q53-cells i.is-on{background:var(--blue);border-color:var(--blue)}
#training .q53-bar .qm-legend>span:not(.qm-scale){display:none}
#training .q53-bar .plug-tile.is-warmup::after{display:none}
@media (max-width:900px){
  #training .q53-stats{order:2;margin-top:10px}
  #training .q53-streak{order:3;margin-top:14px;padding:12px 0 0}
  #training .q53-cells i{height:16px}
}
@media (prefers-reduced-motion:reduce){#training .q53-cells i{transition:none}}
#training .q53-note{margin:10px 0 0;font-size:12px;color:var(--muted)}

#training .section-head .q53-intro{max-width:760px;margin-inline:auto;font-size:17px;line-height:1.65;text-wrap:pretty}
@media (max-width:600px){#training .section-head .q53-intro{font-size:15px;text-align:left}}
#training .q53-bar .qm-ph-warm em,#training .q53-bar .qm-ph-streak em{left:50%;right:auto;transform:translateX(-50%)}