/* recovery.gymworkoutspinner.com: what this page adds to /shared/site.css */

/* The hero: the headline beside the fade instrument, on a pale band that
   continues the header's blue */
.hero {
  padding: 56px 0 48px;
  background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.hero h1 { margin-top: 0; }
@media (max-width: 860px) {
  .hero { padding: 36px 0 8px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

.instrument { margin: 0; }
.instrument svg { width: 100%; height: auto; overflow: visible; }
.instrument-controls { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; margin-top: 12px; }
.instrument-controls .readout { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--step-1); line-height: 1.3; }
.instrument figcaption { margin-top: 10px; }
@media (max-width: 480px) { .instrument-controls { grid-template-columns: 1fr; } }

/* Chart parts (drawn by recovery.js) */
.zone-red { fill: var(--red); }
.zone-amber { fill: var(--amber); }
.zone-green { fill: var(--green); }
.zone { opacity: 0.16; }
.zone.is-current { opacity: 0.32; }
.curve { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.axis line { stroke: var(--line); stroke-width: 1; }
.axis text { fill: var(--ink-soft); font: 500 17px/1 var(--font-body); }
.zone-label { fill: var(--ink-soft); font: 600 21px/1 var(--font-display); letter-spacing: 0.02em; }
.marker-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 4; }
.marker-dot { stroke: var(--paper); stroke-width: 4; }
.marker-dot.red { fill: var(--red); }
.marker-dot.amber { fill: var(--amber); }
.marker-dot.green { fill: var(--green); }

/* The colour key, set as one line of three on wide screens */
.legend { display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 40px 0 0; width: fit-content; max-width: 100%; padding: 18px 0; border-block: 1px solid var(--line); }
.legend p { margin: 0; }
.legend .status { margin-right: 0.35em; }

.steps { margin-top: 8px; }

.try { margin-top: 72px; }
.calculator input[type="number"] { width: 4.6em; }
.calculator td, .calculator th { padding-right: 12px; }
.calculator tbody th { font-weight: 600; color: var(--ink); font-size: var(--step-0); }

/* On a phone each group's row stacks: its name, then the four numbers, then
   the results, each with its column's name (data-label, set by recovery.js) */
@media (max-width: 640px) {
  .try .table-scroll { overflow: visible; }
  .calculator thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .calculator, .calculator tbody { display: block; }
  .calculator tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .calculator tbody th { grid-column: 1 / -1; padding: 0; border: 0; font: 600 var(--step-2)/1 var(--font-display); }
  .calculator td { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; text-align: left; }
  .calculator td::before { content: attr(data-label); font-size: var(--step--1); color: var(--ink-soft); }
  .calculator td.score, .calculator td.left { grid-column: span 1; }
  .calculator td.colour { grid-column: span 2; }
  .calculator input[type="number"] { width: 100%; }
}