/* HIIT Builder: a training log, not a landing page.
   Flat black, hairline rules, square corners. One signal colour (neon), used for "go" and for what's selected. */
:root {
  --bg: #0b0c0b; --bg2: #101110; --line: #232522; --line2: #33362f;
  --fg: #e9ebe4; --dim: #8b9086; --dim2: #5c6158;
  --neon: #c6ff3d; --neon-ink: #0b0c0b;
  --work: var(--neon); --rest: #8fa6bd; --ready: #ffb000;
  --fig: #e9ebe4; --fig-far: #5a5f56; --fig-hl: var(--neon);
  --face: #0b0c0b; --cheek: rgba(255, 105, 140, .55); --sweat: #6cc4ff;
  --go-hover: #dbff7d; --scrim: rgba(5,6,5,.82); --fig-shadow: rgba(0,0,0,.7);
  --prop: #1c1e1b; --prop-edge: #3a3e36; --prop-top: #2c2f29;
  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --top-h: 52px;   /* header height; two rows on phones */
  color-scheme: dark;
}
/* Pink: the light alternative. Same layout, softer edges. Chosen with the header swatch (theme.js). */
:root[data-theme="pink"] {
  --bg: #fff6f8; --bg2: #ffecf1; --line: #f6dde5; --line2: #ecc6d3;
  --fg: #2b1a21; --dim: #7a5864; --dim2: #9c7f8a;
  --neon: #cc2f69; --neon-ink: #ffffff;
  --rest: #5f7f9f; --ready: #b45309;
  --fig: #3b2530; --fig-far: #dcbfcb; --fig-hl: var(--neon);
  --face: #fff6f8; --cheek: rgba(255, 130, 170, .7); --sweat: #8fd3ff;
  --go-hover: #e0457b; --scrim: rgba(60,25,40,.35); --fig-shadow: rgba(110,40,70,.16);
  --prop: #f3dbe3; --prop-edge: #ddb4c3; --prop-top: #f9e7ed;
  color-scheme: light;
}
:root[data-theme="pink"] .go, :root[data-theme="pink"] .ctl, :root[data-theme="pink"] .seg { border-radius: 999px; }
:root[data-theme="pink"] .seg button { border-radius: 999px; }
:root[data-theme="pink"] .mark i { border-radius: 50%; }
:root[data-theme="pink"] .sheet-box { border-radius: 18px; }
:root[data-theme="pink"] .tabs a.on::after { border-radius: 2px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 var(--sans); min-height: 100vh; min-height: 100dvh; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; }
::selection { background: var(--neon); color: var(--neon-ink); }

/* type helpers */
.lbl, .hint, .kicker, .note, #timingLine, #progress, #stats, .kbd, figcaption { font-family: var(--mono); }

/* ---------- controls ---------- */
.go { border: 0; border-radius: 2px; background: var(--neon); color: var(--neon-ink); font: 800 1rem/1 var(--sans); font-stretch: 75%;
  text-transform: uppercase; letter-spacing: .06em; padding: 14px 30px; transition: background .12s; }
.go:hover { background: var(--go-hover); }
.go:active { transform: translateY(1px); }
.go:disabled { background: var(--line2); color: var(--dim); cursor: default; transform: none; }
.go.wide { width: 100%; padding: 16px; font-size: 1.1rem; }
.ctl { border: 1px solid var(--line2); border-radius: 2px; background: none; padding: 10px 16px; font: 500 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg); }
.ctl:hover { border-color: var(--fg); }
.ctl.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.txt { border: 0; background: none; padding: 4px 0; font: 500 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.txt:hover { color: var(--fg); }
.txt:disabled { opacity: .35; cursor: default; }

.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 2px; }
.seg button { border: 0; background: none; padding: 7px 12px; font: 500 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.seg button + button { border-left: 1px solid var(--line2); }
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--fg); color: var(--bg); }

.check { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; cursor: pointer; user-select: none; }
.check input { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid var(--dim); border-radius: 1px; display: grid; place-items: center; cursor: pointer; flex: none; }
.check input:checked { background: var(--neon); border-color: var(--neon); }
.check input:checked::after { content: ''; width: 6px; height: 3px; border: solid var(--neon-ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }

input[type=number], input[type=search], textarea { background: var(--bg); border: 1px solid var(--line2); border-radius: 2px; padding: 8px 10px; }
input[type=search] { min-width: 0; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line2); border-radius: 2px; }
.stepper button { border: 0; background: none; width: 30px; color: var(--dim); }
.stepper button:hover { color: var(--neon); }
.stepper input { border: 0; width: 40px; text-align: center; padding: 7px 0; font: 700 .95rem var(--mono); -moz-appearance: textfield; background: none; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stepper span { font: .72rem var(--mono); color: var(--dim); align-self: center; padding-right: 4px; white-space: nowrap; }

/* ---------- header ---------- */
/* logo and tabs on the left, utilities on the right; the edges line up with the page content (1248px wide) */
.top { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: grid; grid-template-columns: auto auto 1fr; align-items: stretch;
  padding: 0 max(16px, calc((100% - 1248px) / 2)); background: var(--bg); border-bottom: 1px solid var(--line); }
.mark { display: flex; align-items: center; margin: 0; font: 800 1rem/1 var(--sans); font-stretch: 68%; letter-spacing: .08em; }
.mark a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark i { width: 10px; height: 10px; background: var(--neon); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabs { display: flex; gap: 28px; margin-left: 44px; }
.tabs a { position: relative; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--dim); font: 700 .95rem/1 var(--sans); font-stretch: 80%; text-transform: uppercase; letter-spacing: .06em; }
.tabs a span { font: 500 .66rem var(--mono); color: var(--dim2); }
.tabs a:hover { color: var(--fg); }
.tabs a.on { color: var(--fg); }
.tabs .tab-sep { align-self: center; width: 1px; height: 16px; background: var(--line2); margin: 0 -6px; }
.tabs a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--neon); }
.tabs .live { width: 6px; height: 6px; background: var(--neon); display: none; }
body.running .tabs .live { display: block; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.readout { justify-self: end; align-self: center; font: 500 .74rem var(--mono); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.readout b { color: var(--fg); font-weight: 700; }
/* right side of the header: workout readout (app only), feedback, theme */
.top-end { justify-self: end; align-self: center; display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-end .readout { margin-right: 8px; }
@media (max-width: 1100px) { .top-end .readout { display: none; } }   /* the workout panel shows the same numbers */
.fb-link { display: flex; align-items: center; height: 26px; padding: 0 11px; border: 1px solid var(--line2); border-radius: 999px; text-decoration: none; color: var(--dim);
  font: 500 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.fb-link:hover, .fb-link[aria-current] { border-color: var(--neon); color: var(--fg); }
/* theme switch: a pill that previews and names the theme you'd switch to */
.theme-btn { display: flex; align-items: center; gap: 7px; height: 26px; padding: 3px 11px 3px 3px;
  border: 1px solid var(--line2); border-radius: 999px; background: none; color: var(--dim);
  font: 500 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.theme-btn i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line2); background: linear-gradient(135deg, #fff6f8 50%, #cc2f69 50%); }
:root[data-theme="pink"] .theme-btn i { background: linear-gradient(135deg, #0b0c0b 50%, #c6ff3d 50%); }
.theme-btn:hover { border-color: var(--neon); color: var(--fg); }

/* ---------- build ---------- */
.view { max-width: 1280px; margin: 0 auto; padding: 0 16px 64px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 40px; align-items: start; }
.main-col { min-width: 0; }

.builder { padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.sentence { margin: 0; font: 700 clamp(1.7rem, 3.4vw, 2.7rem)/1.3 var(--sans); font-stretch: 78%; letter-spacing: -.005em; color: var(--dim); max-width: 860px; }
.pick { position: relative; display: inline-block; }
.pick-btn { border: 0; border-bottom: 2px solid var(--neon); border-radius: 0; color: var(--fg); font: inherit; letter-spacing: inherit; white-space: nowrap;
  padding: 0 .55em 0 .05em; margin: 0 .05em; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23c6ff3d'/%3E%3C/svg%3E") no-repeat right .08em center / .32em; }
:root[data-theme="pink"] .pick-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23cc2f69'/%3E%3C/svg%3E"); }
.pick-btn:hover, .pick-btn[aria-expanded=true] { color: var(--neon); }
.pick-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; margin: 0; padding: 4px 0; list-style: none;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 2px; outline: 0; white-space: nowrap; }
.pick-list li { display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 14px; font: 600 1rem/1.2 var(--sans); font-stretch: 85%;
  letter-spacing: 0; color: var(--dim); cursor: pointer; }
.pick-list li::before { content: ''; width: 6px; height: 6px; flex: none; }
.pick-list li[aria-selected=true] { color: var(--fg); }
.pick-list li[aria-selected=true]::before { background: var(--neon); }
.pick-list li.on { background: var(--line); color: var(--fg); }
.pick-list li[aria-disabled] { color: var(--dim2); cursor: default; }
.build-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 24px; }
.hint { color: var(--dim); font-size: .78rem; max-width: 560px; line-height: 1.5; }
.hint b { color: var(--fg); font-weight: 500; }
#smartInfo { font: .78rem var(--mono); color: var(--ready); margin-top: 10px; }
#smartInfo:empty { display: none; }
#smartInfo .txt { display: inline; padding: 0 0 0 6px; color: var(--fg); text-decoration: underline; }

.fine { margin-top: 22px; }
.fine summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.fine summary::-webkit-details-marker { display: none; }
.fine summary::before { content: '+'; width: 14px; text-align: center; color: var(--neon); font-size: .95rem; }
.fine[open] summary::before { content: '−'; }
.fine summary:hover { color: var(--fg); }
.fine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 28px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line2); }
.field { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.field > label:not(.check), .lbl { font: 500 .68rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim2); }
.field p { margin: 0; color: var(--dim2); font-size: .8rem; line-height: 1.4; }
.field p a { color: var(--neon); }
.field .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* library */
.library { padding-top: 6px; }
.lib-tools { position: sticky; top: var(--top-h); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.cats { display: flex; gap: 18px; flex-wrap: wrap; margin-right: auto; }
.cats button { border: 0; background: none; padding: 6px 0; font: 700 .9rem/1 var(--sans); font-stretch: 80%; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); position: relative; }
.cats button sup { font: 500 .62rem var(--mono); color: var(--dim2); margin-left: 3px; letter-spacing: 0; }
.cats button:hover { color: var(--fg); }
.cats button.on { color: var(--fg); }
.cats button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 2px; background: var(--neon); }
.lib-tools input[type=search] { width: 150px; font-size: .85rem; padding: 6px 10px; }
.cat h3 { margin: 34px 0 0; font: 800 1.6rem/1 var(--sans); font-stretch: 70%; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: baseline; gap: 12px; }
.cat h3 small { font: 500 .7rem var(--mono); color: var(--dim2); letter-spacing: .04em; }
.sub h4 { margin: 18px 0 8px; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.move { position: relative; background: var(--bg); padding: 4px 6px 10px; cursor: pointer; text-align: left; outline-offset: -2px; }
.move:hover { background: var(--bg2); }
.move .fig { width: 100%; height: auto; display: block; aspect-ratio: 100 / 86; }
.move span { display: block; font-size: .8rem; line-height: 1.25; min-height: 2.5em; padding: 0 4px; color: var(--dim); }
.move:hover span, .move.sel span { color: var(--fg); }
.move .badge { position: absolute; top: 0; left: 0; min-width: 24px; height: 22px; padding: 0 6px; background: var(--neon); color: var(--neon-ink); font: 700 .72rem/22px var(--mono); text-align: center; font-style: normal; display: none; }
.move .info { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 1px solid transparent; border-radius: 2px; background: none; color: var(--dim2); font: 700 .72rem/20px var(--mono); padding: 0; opacity: 0; }
.move:hover .info, .move .info:focus-visible { opacity: 1; border-color: var(--line2); }
.move .info:hover { color: var(--neon); border-color: var(--neon); }
.move.sel { box-shadow: inset 0 0 0 1px var(--neon); }
.move.sel .badge { display: block; }
.cat[hidden], .sub[hidden], .move[hidden] { display: none; }
.empty-lib { color: var(--dim); padding: 40px 0; font: .85rem var(--mono); }
@media (hover: none) { .move .info { opacity: 1; } }

/* workout sheet */
#panel { position: sticky; top: var(--top-h); max-height: calc(100vh - var(--top-h)); display: flex; flex-direction: column; padding: 32px 0 20px 28px; border-left: 1px solid var(--line); }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h2 { font: 800 1.6rem/1 var(--sans); font-stretch: 70%; text-transform: uppercase; letter-spacing: .02em; }
.sheet-acts { display: flex; gap: 14px; }
.figs3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figs3 div { padding: 10px 0 9px; }
.figs3 div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.figs3 b { display: block; font: 700 1.5rem/1 var(--mono); letter-spacing: -.02em; }
.figs3 span { font: 500 .64rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim2); }
#flow { padding: 12px 0 6px; }
.profile { display: block; width: 100%; height: 46px; overflow: visible; }
.profile .ax { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.profile .fl { fill: var(--line); }
.profile .ln { fill: none; stroke: var(--neon); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.flowtxt { display: flex; justify-content: space-between; gap: 8px; font: .64rem var(--mono); color: var(--dim2); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.flowtxt b { color: var(--dim); font-weight: 500; }
.flowtxt i { display: inline-block; width: 10px; height: 6px; background: var(--line); margin-right: 5px; vertical-align: 0; }

#sel { list-style: none; margin: 4px 0 0; padding: 0; overflow: auto; flex: 1 1 auto; min-height: 60px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
#sel li { display: grid; grid-template-columns: 14px 26px 1fr auto auto; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; position: relative; background: var(--bg); }
#sel li .grip { cursor: grab; color: var(--dim2); touch-action: none; user-select: none; font: .8rem/1 var(--mono); letter-spacing: -2px; }
#sel li .n { font: .74rem var(--mono); color: var(--dim2); }
#sel li .t { min-width: 0; line-height: 1.25; cursor: pointer; }
#sel li .t:hover { color: var(--neon); }
#sel li .t em { font: normal .62rem var(--mono); color: var(--dim2); margin-left: 6px; letter-spacing: .04em; text-transform: uppercase; }
/* effort meter (here and on the static pages): three rising bars, filled up to the move's effort */
.eff { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; white-space: nowrap; vertical-align: -1px; }
.eff i { width: 4px; border-radius: 1px; background: var(--line2); }
.eff i:nth-child(1) { height: 5px; } .eff i:nth-child(2) { height: 8px; } .eff i:nth-child(3) { height: 12px; }
.eff.e1 i:nth-child(1), .eff.e2 i:nth-child(-n+2), .eff.e3 i { background: var(--neon); }
.eff em { min-width: 3.9em; margin-left: 7px; font: 500 .62rem/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); align-self: center; }
.eff.e3 em { color: var(--fg); }
#sel li .acts { display: flex; align-items: center; }
#sel li .acts button { border: 0; background: none; color: var(--dim2); width: 24px; height: 24px; font: .8rem/1 var(--mono); padding: 0; }
#sel li .acts button:hover { color: var(--neon); }
#sel li.div { display: flex; align-items: center; gap: 10px; padding: 12px 0 4px; border-bottom: 0; font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim2); background: none; }
#sel li.div::after { content: ''; flex: 1; border-top: 1px dashed var(--line2); }
#sel li.dragging { background: var(--bg2); outline: 1px solid var(--neon); z-index: 2; }
#sel li.flash .t { animation: flash 1s; }
@keyframes flash { 0%, 40% { color: var(--neon); } }
#empty { color: var(--dim); font: .8rem/1.5 var(--mono); padding: 18px 0; }
#bUse { margin-top: 16px; }
.foot-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.foot-row { gap: 12px; }
.foot-acts { display: flex; gap: 14px; flex: none; white-space: nowrap; }
#timingLine { font-size: .7rem; color: var(--dim2); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .main-col { display: contents; }
  .builder { order: 1; } #panel { order: 2; } .library { order: 3; }
  #panel { position: static; max-height: none; border-left: 0; padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
  #sel { overflow: visible; }
}
@media (max-width: 960px) {
  .top { grid-template-columns: auto 1fr auto; }
  .readout { display: none; }
  .tabs { margin-left: 32px; }
  .top-end { margin-left: 18px; }
  .tabs a span, .theme-btn .tm { display: none; }
  .tabs { gap: 20px; }
}
/* phones: two rows. Logo, feedback and theme on top; the four tabs spread across the full width below. */
@media (max-width: 620px) {
  :root { --top-h: 92px; }
  .top { grid-template-columns: 1fr auto; grid-template-rows: 50px 42px; }
  .mark { grid-row: 1; grid-column: 1; }
  .top-end { grid-row: 1; grid-column: 2; margin-left: 0; gap: 8px; }
  .tabs { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; gap: 0; margin-left: 0; border-top: 1px solid var(--line); }
  .tabs a { flex: 1; justify-content: center; font-size: .82rem; }
  .tabs a span { display: none; }
  .tabs .tab-sep { flex: none; margin: 0; }
  .builder { padding-top: 26px; }
  .sentence { font-size: 1.75rem; line-height: 1.35; }
  .build-row .go { width: 100%; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .move span { font-size: .74rem; }
  .cats { gap: 14px; width: 100%; }
  .lib-tools input[type=search] { flex: 1 1 100%; width: auto; }
  .lib-tools { position: static; }   /* four wrapped rows is too much to pin on a phone */
  .cats button.on::after { bottom: 0; }
}
@media (max-width: 360px) {
  .fb-link, .theme-btn { padding-right: 8px; }
  .fb-link { padding-left: 8px; }
}
@media (min-width: 621px) and (max-width: 760px) {
  .mark a { font-size: 0; gap: 0; }
  .mark i { width: 12px; height: 12px; }
}

/* ---------- move detail ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.sheet-box { width: min(780px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--bg); border: 1px solid var(--line2); padding: 22px; }
.sheet-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kicker { margin: 0 0 6px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim2); }
.sheet-h h2 { font: 800 2rem/1 var(--sans); font-stretch: 70%; text-transform: uppercase; letter-spacing: .01em; }
.tags { margin: 10px 0 0; font: .72rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.tags b { color: var(--neon); font-weight: 500; }
.views2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 18px 0 14px; }
.orbit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orbit label { font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.orbit input { flex: 1; min-width: 120px; accent-color: var(--neon); }
.orbit .go { padding: 11px 18px; font-size: .9rem; margin-left: auto; }
@media (max-width: 560px) { .views2 { grid-template-columns: 1fr; } }

/* ---------- figure stage: a motion-capture floor grid ---------- */
.views2 figure, .t-figs figure { margin: 0; position: relative; background-color: var(--bg);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center bottom; }
.views2 figure::after, .t-figs figure::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, transparent 35%, var(--bg) 85%); pointer-events: none; }
.views2 svg, .t-figs svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
figcaption { position: absolute; z-index: 2; top: 10px; left: 12px; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.fig { overflow: visible; }
.fig .gl { stroke: var(--line2); stroke-width: .5; }
.fig .shadow { fill: var(--fig-shadow); }
.fig line { stroke: var(--fig); stroke-linecap: round; }
.fig .ua { stroke-width: 4.4; } .fig .la { stroke-width: 3.8; }
.fig .th { stroke-width: 5.8; } .fig .sh { stroke-width: 4.6; } .fig .ft { stroke-width: 3.2; }
.fig .tb { fill: var(--fig); stroke: var(--fig); stroke-width: 2.6; stroke-linejoin: round; }
.fig .nk { stroke-width: 3.4; }
.fig .hd { fill: var(--fig); }
/* limbs on the side turned away blend toward --fig-far by --far (0-1, set per limb by figures.js) */
.fig [style*="--far"] line { stroke: color-mix(in srgb, var(--fig-far) calc(var(--far) * 100%), var(--fig)); }
.fig .hl line { stroke: color-mix(in srgb, var(--fig-far) calc(var(--far, 0) * 40%), var(--fig-hl)); }
/* face (figures.js draws the shapes; see faceFor) */
.fig .face path { fill: none; stroke: var(--face); stroke-width: .62; stroke-linecap: round; stroke-linejoin: round; }
.fig .face .fill { fill: var(--face); stroke: none; }
.fig .face .grit { fill-rule: evenodd; }
.fig .face .cheek { fill: var(--cheek); stroke: none; }
.fig .face .sweat { fill: var(--sweat); stroke: none; }
.fig .pb { fill: var(--prop); stroke: var(--prop-edge); stroke-width: .6; stroke-linejoin: round; }
.fig .pt { fill: var(--prop-top); }

/* ---------- train ---------- */
body[data-view="timer"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body[data-view="timer"] #timerView {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--top-h));
  min-height: calc(100dvh - var(--top-h));
  padding-top: 22px;
  padding-bottom: 24px;
}
body[data-view="timer"] #timerView .settings {
  margin-top: auto;
}

.fs-hidden {
  display: none !important;
}
.t-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.phase { display: inline-flex; align-items: center; gap: 10px; font: 700 .8rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--dim); }
.phase::before { content: ''; width: 10px; height: 10px; background: currentColor; }
body.work .phase { color: var(--work); } body.rest .phase { color: var(--rest); } body.ready .phase { color: var(--ready); } body.done .phase { color: var(--neon); }
#progress { font-size: .78rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.t-grid { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 36px; align-items: center; padding: 26px 0; }
#time { font: 800 clamp(7rem, 19vw, 15rem)/.82 var(--sans); font-stretch: 62%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
body.work #time { color: var(--work); }
.tbar { height: 4px; background: var(--line); margin: 18px 0 8px; }
.tbar i { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(0); }
body.work .tbar i { background: var(--work); } body.rest .tbar i { background: var(--rest); } body.ready .tbar i { background: var(--ready); }
#timeSub { font: .74rem var(--mono); color: var(--dim2); text-transform: uppercase; letter-spacing: .08em; min-height: 1.2em; }
#current { margin-top: 22px; font: 800 clamp(1.8rem, 4vw, 2.8rem)/1.02 var(--sans); font-stretch: 72%; text-transform: uppercase; letter-spacing: .01em; min-height: 2.04em; }
#next { margin-top: 14px; font: .78rem/1.5 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; min-height: 3em; }
#next b { display: block; font: 700 1.1rem var(--sans); font-stretch: 85%; color: var(--fg); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.t-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); transition: opacity .3s; }
.t-figs figure { transition: opacity .3s; }
.t-figs.resting figure + figure { opacity: .5; }
#bar { display: flex; gap: 2px; margin: 4px 0 10px; }
#bar i { flex: 1; height: 8px; cursor: pointer; background: var(--line); overflow: hidden; }
#bar i:hover { background: var(--line2); }
#bar i.cur { box-shadow: 0 0 0 1px var(--fg); }
#bar i b { display: block; height: 100%; width: 0; background: var(--dim); }
body.work #bar i b { background: var(--work); }
#tip { position: fixed; display: none; z-index: 60; background: var(--fg); color: var(--bg); font: .74rem var(--mono); padding: 4px 8px; pointer-events: none; white-space: nowrap; }
#stats { font-size: .72rem; color: var(--dim2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 22px; }
.controls { display: flex; align-items: center; gap: 10px; }
.controls #start { min-width: 200px; padding: 18px 30px; font-size: 1.2rem; }
.controls .ctl { padding: 17px 20px; }
.vol-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; max-width: 380px; }
.vol-lbl { display: inline-flex; align-items: center; gap: 6px; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); cursor: pointer; white-space: nowrap; }
.vol-ico { flex-shrink: 0; color: var(--dim); }
.vol-bar input[type=range] { flex: 1; accent-color: var(--neon); cursor: pointer; height: 6px; border-radius: 3px; background: var(--line2); }
.vol-val { font: 500 .74rem var(--mono); color: var(--dim); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.kbd { color: var(--dim2); font-size: .68rem; margin-top: 14px; text-transform: uppercase; letter-spacing: .05em; }
.settings { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 18px; }
.settings summary { font: 600 .92rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--dim); padding: 10px 0; }
.settings summary::before { font-size: 1.25rem; width: 18px; }
.settings summary:hover { color: var(--fg); }
.settings .field input { width: 100%; }
.note { color: var(--dim2); font-size: .74rem; margin: 20px 0 0; }
.settings textarea { width: 100%; height: 220px; margin-top: 8px; font: 13px/1.55 var(--mono); }
.share-box { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line2); }
.share-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.share-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.share-acts .ctl { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; }
.share-status { font: 500 .74rem var(--mono); color: var(--neon); margin-top: 10px; min-height: 1.2em; word-break: break-all; }
.share-text-box { margin-top: 14px; background: var(--bg2); border: 1px solid var(--line); padding: 12px 14px; }
.share-text-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.share-text-bar .lbl { margin-right: auto; }
.share-text-box textarea { width: 100%; height: 160px; font: 13px/1.55 var(--mono); background: var(--bg); border: 1px solid var(--line2); color: var(--fg); padding: 10px; resize: vertical; margin-top: 0; }
@media (max-width: 820px) {
  .t-grid { grid-template-columns: 1fr; gap: 20px; padding-top: 18px; }
  #time { font-size: clamp(6rem, 34vw, 11rem); }
  .controls #start { flex: 1; min-width: 0; }
  .kbd { display: none; }
  .vol-bar { max-width: 100%; margin: 12px 0 16px; }
}
@media (max-width: 620px) { #fs { display: none; } }

footer .foot-nav { display: flex; gap: 20px; flex-wrap: wrap; width: 100%; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px dashed var(--line2); }
footer .foot-nav a { color: var(--dim); text-decoration: none; }
footer .foot-nav a:hover { color: var(--neon); }
footer { max-width: 1280px; margin: 0 auto; padding: 18px 16px 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: .68rem var(--mono); color: var(--dim2); text-transform: uppercase; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* crawlable blurb under the builder */
.about { max-width: 720px; margin: 56px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--dim); font-size: .9rem; line-height: 1.55; }
.about h2 { margin: 0 0 8px; color: var(--fg); font: 800 1.05rem/1.1 var(--sans); font-stretch: 75%; text-transform: uppercase; letter-spacing: .03em; }
.about p { margin: 0 0 8px; }
.about a { color: var(--dim); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.about a:hover { color: var(--neon); }


/* ---------- touch screens: 44px targets, no iOS focus-zoom, Start always reachable ---------- */
@media (pointer: coarse) {
  input[type=number], input[type=search], textarea, select,
  .stepper input, .lib-tools input[type=search], .settings textarea { font-size: 16px; }
  .fb-link, .theme-btn { height: 36px; }
  .txt { padding: 12px 0; }
  .ctl { min-height: 44px; }
  .seg button { padding: 14px 14px; }
  .stepper button { width: 44px; min-height: 44px; }
  .stepper input { width: 48px; padding: 12px 0; }
  .cats button { padding: 13px 0; }
  .lib-tools input[type=search] { min-height: 44px; }
  .check { min-height: 44px; }
  #useSug { display: inline-block; padding: 12px 4px; margin: -12px 0; }
  .check input { width: 22px; height: 22px; }
  .fine summary { padding: 14px 0; }
  .pick-list li { padding: 13px 18px 13px 14px; }
  #sel li .acts button { width: 40px; height: 44px; }
  #sel li .grip { padding: 12px 8px; margin: -12px -8px; }
  .move .info { width: 28px; height: 28px; line-height: 26px; }
  .move .info::after { content: ''; position: absolute; inset: -8px; }
  .foot-acts .txt, .sheet-acts .txt { padding: 14px 4px; }
  footer .foot-nav a { padding: 10px 0; }
  .mark a { min-height: 44px; }
}
@media (max-width: 820px) {
  /* the timer's controls stay pinned to the bottom of the screen while you scroll the figures */
  .controls { position: sticky; bottom: 0; z-index: 10; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line); }
  .controls .ctl { padding: 17px 16px; }
}

[hidden],
#timerView[hidden],
#build[hidden],
.fs-hidden {
  display: none !important;
}

/* ==========================================================================
   FULLSCREEN WORKOUT MODE (Desktop, TV, presentation: centered, spacious, no navbar, no scroll)
   Valid across Chrome, Firefox, and Safari (standard :fullscreen and .is-fullscreen)
   ========================================================================== */

:fullscreen .top,
html.is-fullscreen .top,
body.is-fullscreen .top,
body.is-fullscreen header.top {
  display: none !important;
}

:fullscreen footer,
html.is-fullscreen footer,
body.is-fullscreen footer {
  display: none !important;
}

:fullscreen body[data-view="timer"],
html.is-fullscreen body[data-view="timer"],
body.is-fullscreen[data-view="timer"] {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

:fullscreen body[data-view="timer"] #timerView,
html.is-fullscreen body[data-view="timer"] #timerView,
body.is-fullscreen[data-view="timer"] #timerView,
html.is-fullscreen #timerView:not([hidden]),
body.is-fullscreen #timerView:not([hidden]) {
  flex: 1 1 100vh !important;
  width: 95vw !important;
  max-width: 1720px !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  box-sizing: border-box !important;
  padding: clamp(14px, 2vh, 26px) clamp(24px, 3vw, 56px) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

:fullscreen #timerView .t-head,
html.is-fullscreen #timerView .t-head,
body.is-fullscreen #timerView .t-head {
  flex-shrink: 0 !important;
  padding-bottom: clamp(6px, 1vh, 12px) !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
:fullscreen #timerView .phase,
html.is-fullscreen #timerView .phase,
body.is-fullscreen #timerView .phase {
  font-size: clamp(1.05rem, 1.8vh, 1.35rem) !important;
}
:fullscreen #timerView #progress,
html.is-fullscreen #timerView #progress,
body.is-fullscreen #timerView #progress {
  font-size: clamp(1rem, 1.7vh, 1.3rem) !important;
}

:fullscreen #timerView .t-grid,
html.is-fullscreen #timerView .t-grid,
body.is-fullscreen #timerView .t-grid {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(560px, 1.35fr) !important;
  gap: clamp(36px, 4.5vw, 84px) !important;
  align-items: center !important;
  padding: clamp(8px, 1.5vh, 20px) 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

:fullscreen #timerView #time,
html.is-fullscreen #timerView #time,
body.is-fullscreen #timerView #time {
  font-size: clamp(8.5rem, 19vh, 17rem) !important;
  line-height: 0.8 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  font-stretch: 62% !important;
  font-variant-numeric: tabular-nums !important;
}
:fullscreen #timerView .tbar,
html.is-fullscreen #timerView .tbar,
body.is-fullscreen #timerView .tbar {
  height: clamp(6px, 1vh, 9px) !important;
  margin: clamp(14px, 2vh, 22px) 0 clamp(8px, 1.2vh, 14px) !important;
}
:fullscreen #timerView #timeSub,
html.is-fullscreen #timerView #timeSub,
body.is-fullscreen #timerView #timeSub {
  font-size: clamp(.85rem, 1.3vh, 1.05rem) !important;
}
:fullscreen #timerView #current,
html.is-fullscreen #timerView #current,
body.is-fullscreen #timerView #current {
  font-size: clamp(2.4rem, 5.2vh, 4.4rem) !important;
  font-weight: 800 !important;
  font-stretch: 75% !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  margin-top: clamp(14px, 2vh, 24px) !important;
  min-height: auto !important;
}
:fullscreen #timerView #next,
html.is-fullscreen #timerView #next,
body.is-fullscreen #timerView #next {
  font-size: clamp(1rem, 1.7vh, 1.3rem) !important;
  margin-top: clamp(10px, 1.5vh, 18px) !important;
  min-height: auto !important;
}
:fullscreen #timerView #next b,
html.is-fullscreen #timerView #next b,
body.is-fullscreen #timerView #next b {
  font-size: clamp(1.35rem, 2.4vh, 1.95rem) !important;
  margin-top: 4px !important;
}

:fullscreen #timerView .t-figs,
html.is-fullscreen #timerView .t-figs,
body.is-fullscreen #timerView .t-figs {
  width: 100% !important;
  height: clamp(380px, 54vh, 660px) !important;
  max-height: 56vh !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  background: var(--line) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
:fullscreen #timerView .t-figs figure,
html.is-fullscreen #timerView .t-figs figure,
body.is-fullscreen #timerView .t-figs figure {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
:fullscreen #timerView .t-figs svg,
html.is-fullscreen #timerView .t-figs svg,
body.is-fullscreen #timerView .t-figs svg {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  transform: scale(1.32) !important;
  transform-origin: center 65% !important;
  display: block !important;
}
:fullscreen #timerView .t-figs figcaption,
html.is-fullscreen #timerView .t-figs figcaption,
body.is-fullscreen #timerView .t-figs figcaption {
  font-size: clamp(.85rem, 1.4vh, 1.05rem) !important;
  padding: 10px 14px !important;
}

:fullscreen #timerView #bar,
html.is-fullscreen #timerView #bar,
body.is-fullscreen #timerView #bar {
  flex-shrink: 0 !important;
  height: clamp(10px, 1.4vh, 14px) !important;
  margin: clamp(8px, 1.4vh, 14px) 0 clamp(4px, 0.8vh, 8px) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
:fullscreen #timerView #stats,
html.is-fullscreen #timerView #stats,
body.is-fullscreen #timerView #stats {
  flex-shrink: 0 !important;
  font-size: clamp(.85rem, 1.4vh, 1.05rem) !important;
  margin-bottom: clamp(10px, 1.6vh, 18px) !important;
  text-align: center !important;
  letter-spacing: .06em !important;
}

:fullscreen #timerView .controls,
html.is-fullscreen #timerView .controls,
body.is-fullscreen #timerView .controls {
  flex-shrink: 0 !important;
  justify-content: center !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
  margin-top: 0 !important;
  position: static !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
:fullscreen #timerView .controls #start,
html.is-fullscreen #timerView .controls #start,
body.is-fullscreen #timerView .controls #start {
  padding: clamp(18px, 2.5vh, 26px) clamp(44px, 3.8vw, 76px) !important;
  font-size: clamp(1.35rem, 2.4vh, 1.85rem) !important;
  min-width: clamp(240px, 18vw, 360px) !important;
  letter-spacing: .08em !important;
}
:fullscreen #timerView .controls .ctl,
html.is-fullscreen #timerView .controls .ctl,
body.is-fullscreen #timerView .controls .ctl {
  padding: clamp(16px, 2.2vh, 22px) clamp(22px, 2vw, 34px) !important;
  font-size: clamp(.95rem, 1.5vh, 1.15rem) !important;
  letter-spacing: .08em !important;
}

:fullscreen #timerView .vol-bar,
html.is-fullscreen #timerView .vol-bar,
body.is-fullscreen #timerView .vol-bar {
  flex-shrink: 0 !important;
  margin: clamp(10px, 1.5vh, 16px) auto 0 !important;
  max-width: 480px !important;
  width: 100% !important;
  gap: 16px !important;
  justify-content: center !important;
}
:fullscreen #timerView .vol-lbl,
html.is-fullscreen #timerView .vol-lbl,
body.is-fullscreen #timerView .vol-lbl,
:fullscreen #timerView .vol-val,
html.is-fullscreen #timerView .vol-val,
body.is-fullscreen #timerView .vol-val {
  font-size: clamp(.85rem, 1.3vh, 1rem) !important;
}
:fullscreen #timerView .vol-bar input[type=range],
html.is-fullscreen #timerView .vol-bar input[type=range],
body.is-fullscreen #timerView .vol-bar input[type=range] {
  height: 8px !important;
}

:fullscreen #timerView .kbd,
html.is-fullscreen #timerView .kbd,
body.is-fullscreen #timerView .kbd {
  flex-shrink: 0 !important;
  text-align: center !important;
  margin-top: clamp(6px, 1vh, 10px) !important;
  font-size: clamp(.72rem, 1.1vh, .85rem) !important;
  letter-spacing: .06em !important;
}

:fullscreen #timerView .settings,
html.is-fullscreen #timerView .settings,
body.is-fullscreen #timerView .settings {
  flex-shrink: 0 !important;
  margin: clamp(10px, 1.5vh, 18px) auto 0 !important;
  padding-top: clamp(10px, 1.2vh, 14px) !important;
  width: 100% !important;
  max-width: 760px !important;
  border-top: 1px solid var(--line) !important;
}
:fullscreen #timerView .settings summary,
html.is-fullscreen #timerView .settings summary,
body.is-fullscreen #timerView .settings summary {
  font-size: clamp(1rem, 1.7vh, 1.25rem) !important;
  font-weight: 700 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: clamp(6px, 1vh, 10px) 0 !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
}
:fullscreen #timerView .settings summary::before,
html.is-fullscreen #timerView .settings summary::before,
body.is-fullscreen #timerView .settings summary::before {
  font-size: clamp(1.3rem, 2.2vh, 1.6rem) !important;
  width: 22px !important;
}
:fullscreen #timerView .settings[open],
html.is-fullscreen #timerView .settings[open],
body.is-fullscreen #timerView .settings[open] {
  max-height: 32vh !important;
  overflow-y: auto !important;
  padding-bottom: 12px !important;
}