/* The routine checker (T67 stream M). The figure is the page: a body of
   steel, filled pale to full by the sets each muscle gets. No colour scale.
   The one warm thing is the dashed outline of the muscle with the largest
   gap, and only while the figure is the live element (site.js decides). */

.rc, .rc-sp {
  /* the painter's mixes (body_map.dart): a body one step off the surface,
     untrained tissue a step off the body. Plain tokens first, for a browser
     without color-mix. */
  --rc-body: var(--iron-raised);
  --rc-body: color-mix(in srgb, var(--iron-raised) 80%, var(--steel));
  --rc-tissue: var(--steel);
  --rc-tissue: color-mix(in srgb, var(--steel) 68%, var(--steel-light));
  --rc-neck: var(--steel);
  --rc-neck: color-mix(in srgb, var(--rc-body) 40%, var(--rc-tissue));
  --rc-line: var(--steel-light);
}
:root[data-theme="light"] .rc {
  --rc-body: color-mix(in srgb, var(--iron-plate) 25%, var(--iron-raised));
  --rc-tissue: color-mix(in srgb, var(--iron-raised) 40%, var(--steel));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rc {
    --rc-body: color-mix(in srgb, var(--iron-plate) 25%, var(--iron-raised));
    --rc-tissue: color-mix(in srgb, var(--iron-raised) 40%, var(--steel));
  }
}

.js .rc-nojs, .no-js .rc-js { display: none !important; }

/* ------------------------------------------------------------ the page */
.rc-grid { display: grid; gap: 32px; }
.rc-grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .rc-grid {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    grid-template-areas: "body head" "body start" "body week" "body list";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 72px;
    align-items: start;
  }
  .rc-start { grid-area: start; }
  .rc-head { grid-area: head; }
  .rc-body { grid-area: body; position: sticky; top: 76px; }
  .rc-week { grid-area: week; }
  .rc-list { grid-area: list; }
}

/* where to start: links drawn as chips and as a segmented track */
.rc-start { display: grid; gap: 18px; }
.rc-f > .overline { display: block; margin: 0 0 8px; }
.rc-chip { display: inline-flex; align-items: center; text-decoration: none; }
.rc-chip[aria-current] { background: var(--chalk); color: var(--on-chalk); }
.rc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--iron-raised); }
.rc-seg a { display: grid; place-items: center; min-width: 40px; min-height: 44px; padding: 0 6px; border-radius: var(--r-button); color: var(--chalk-dim); font: 700 18px/1 var(--f-display); letter-spacing: .5px; text-decoration: none; }
.rc-seg a[aria-current] { background: var(--chalk); color: var(--on-chalk); }
@media (min-width: 400px) { .rc-seg a { min-width: 44px; } }

/* ---------------------------------------------------------- the figure */
.rc-head .tool-out { max-width: 18em; text-wrap: balance; }
.rc-head .tool-note { max-width: 44em; }
.rc-figs { display: flex; justify-content: center; gap: 4%; }
.rc-side { flex: 0 1 46%; max-width: 250px; margin: 0; text-align: center; }
.rc-side figcaption { margin-top: 8px; }
.rc-fig { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
@media (min-width: 1000px) {
  .rc-side { max-width: min(250px, calc((100vh - 330px) / 2)); min-width: 120px; }
}

.rc-sil-line { fill: none; stroke: var(--rc-line); stroke-width: 2.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rc-sil { fill: var(--rc-body); }
.rc-tissue path { fill: var(--rc-neck); }
.rc-hatch-bg { fill: var(--rc-tissue); }
.rc-hatch-line { fill: var(--chalk); fill-opacity: .62; }

.rc-m { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.rc-m path { fill: var(--rc-tissue); stroke: transparent; stroke-width: 1.6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill-opacity 220ms ease-out, stroke 220ms ease; }
.rc-m[data-l="1"] path { fill: var(--chalk); fill-opacity: .3; }
.rc-m[data-l="2"] path { fill: var(--chalk); fill-opacity: .62; }
.rc-m[data-l="3"] path { fill: var(--chalk); fill-opacity: 1; }
/* helper work only: stripes, at the same three strengths */
.rc-fig pattern[data-l="1"] .rc-hatch-line { fill-opacity: .3; }
.rc-fig pattern[data-l="2"] .rc-hatch-line { fill-opacity: .62; }
.rc-fig pattern[data-l="3"] .rc-hatch-line { fill-opacity: 1; }
.rc-fig[data-side="front"] .rc-m[data-h][data-l="1"] path { fill: url(#rc-hatch-front-1); fill-opacity: 1; }
.rc-fig[data-side="front"] .rc-m[data-h][data-l="2"] path { fill: url(#rc-hatch-front-2); fill-opacity: 1; }
.rc-fig[data-side="front"] .rc-m[data-h][data-l="3"] path { fill: url(#rc-hatch-front-3); fill-opacity: 1; }
.rc-fig[data-side="back"] .rc-m[data-h][data-l="1"] path { fill: url(#rc-hatch-back-1); fill-opacity: 1; }
.rc-fig[data-side="back"] .rc-m[data-h][data-l="2"] path { fill: url(#rc-hatch-back-2); fill-opacity: 1; }
.rc-fig[data-side="back"] .rc-m[data-h][data-l="3"] path { fill: url(#rc-hatch-back-3); fill-opacity: 1; }
/* the largest gap: the one warm outline, hugging every sliver of the group
   (a pale or empty fill already says "below the minimum") */
.ember-able .rc-m[data-top] path { stroke: var(--chalk); stroke-width: 1.8px; }
.ember-able.is-live .rc-m[data-top] path { stroke: var(--ember); }
/* picked or in focus: a firm outline round every sliver of the group */
.rc-m[data-sel] path, .rc-m:focus path { stroke: var(--chalk); stroke-width: 2.2px; }
.ember-able.is-live .rc-m[data-top][data-sel] path, .ember-able.is-live .rc-m[data-top]:focus path { stroke: var(--ember); }
.rc-m:active path { fill-opacity: .8; }

/* the fill arrives head to toe, once (the painter's wash: 900 ms in all) */
@keyframes rc-wash { from { fill-opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .rc-m:not([data-l="0"]) path { animation: rc-wash 405ms ease-out backwards; animation-delay: calc(var(--y, 0) * 495ms); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-m path, .rc-fill { transition: none !important; }
}

.rc-readout { margin: 16px auto 0; max-width: 420px; padding: 14px 16px 10px; border-radius: var(--r-surface); background: var(--iron-plate); }
.rc-readout[hidden] { display: none; }
.rc-ro-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-ro-name { font: 700 24px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }
.rc-ro-why { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--chalk-dim); }
.rc-readout .overline { margin-top: 10px; }
.rc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--chalk-dim); }
.rc-legend li { display: inline-flex; align-items: center; gap: 7px; }
.rc-sw { flex: none; width: 16px; height: 16px; border-radius: 4px; overflow: hidden; }
.rc-sw rect { fill: var(--rc-tissue); }
.rc-sw[data-l="1"] rect { fill: var(--chalk); fill-opacity: .3; }
.rc-sw[data-l="2"] rect { fill: var(--chalk); fill-opacity: .62; }
.rc-sw[data-l="3"] rect { fill: var(--chalk); }
.rc-sw[data-l="h"] rect { fill: url(#rc-hatch-front-2); }
.rc-sw[data-l="m"] rect { fill: var(--rc-tissue); stroke: var(--chalk); stroke-width: 6; transition: stroke 360ms ease; }
.ember-able.is-live .rc-sw[data-l="m"] rect { stroke: var(--ember); }
.rc-sw-bg { fill: var(--rc-body) !important; fill-opacity: 1 !important; stroke: none !important; }
.rc-body > .hint { margin-top: 10px; text-align: center; }
.rc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

/* --------------------------------------------------- muscle by muscle */
.rc-rows { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.rc-row { padding: 14px 0 12px; border-bottom: 1px solid var(--hairline); scroll-margin-top: 84px; }
.rc-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-name { position: relative; font-weight: 600; font-size: 16px; }
.rc-row[data-under] .rc-name::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 9px; border-radius: 50%; border: 1.5px dashed var(--chalk-dim); vertical-align: 0; }
.rc-row[data-top] .rc-name::after { border-color: var(--chalk); }
.rc-count { font: 700 26px/1 var(--f-display); letter-spacing: .3px; }
.rc-count .unit { font-size: 14px; color: var(--chalk-dim); letter-spacing: .5px; }
.rc-row[data-l="0"] .rc-count .num { color: var(--chalk-dim); }
.rc-track { position: relative; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--steel); }
.rc-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--chalk); transform-origin: 0 50%; transition: transform 260ms cubic-bezier(.2, .8, .2, 1); }
.rc-tick { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--steel-light); }
.rc-why { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--chalk-dim); }
.rc-row[data-under] .rc-why > span:first-child { color: var(--chalk); }
.rc-why .meta { flex: none; }
.rc-more summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--steel-light); list-style: none; }
.rc-more summary::-webkit-details-marker { display: none; }
.rc-more summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 9px; border-right: 2px solid var(--steel-icon); border-bottom: 2px solid var(--steel-icon); transform: rotate(45deg); }
.rc-more[open] summary::after { margin-top: 4px; transform: rotate(225deg); }
.rc-more-in { padding: 2px 0 8px; }
.rc-more-in .overline { margin-top: 8px; }
.rc-ex { margin: 6px 0 0; padding: 0; list-style: none; }
.rc-ex li { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14px; }
.rc-ex li span:last-child { flex: none; color: var(--chalk-dim); }
.rc-none { margin-top: 6px; font-size: 14px; color: var(--chalk-dim); }
.rc-row.is-picked { animation: rc-pick 900ms ease-out; }
@keyframes rc-pick { from { background: var(--iron-raised); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rc-row.is-picked { animation: none; } }

/* ------------------------------------------------------------ the week */
.rc-week .hint { margin-top: 6px; max-width: 40em; }
.rc-days { display: grid; gap: 18px; margin-top: 16px; }
@media (min-width: 600px) { .rc-days { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px 32px; } }
.rc-day-name { font: 700 20px/1.1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }
.rc-rows-ro { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.rc-rows-ro li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.rc-ex-name { font-weight: 600; }
.rc-ex-sets { color: var(--chalk-dim); }
.rc-ex-meta { grid-column: 1 / -1; }

/* the editor (drawn by the script) */
.rc-tabs { margin-top: 16px; }
.rc-tab { display: inline-flex; align-items: center; gap: 8px; }
.rc-tab-n { font: 700 18px/1 var(--f-display); opacity: .55; }
.rc-tab-add { background: transparent; border: 1px dashed var(--steel-light); color: var(--chalk-dim); }
.rc-day-ed { margin-top: 14px; padding: 16px; border-radius: var(--r-surface); background: var(--iron-plate); }
@media (min-width: 600px) { .rc-day-ed { padding: 20px 22px; } }
.rc-day-top { display: flex; align-items: center; gap: 10px; }
.rc-day-top .input { flex: 1 1 auto; min-width: 0; min-height: 48px; font-weight: 600; }
.rc-x { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--iron-raised); color: var(--chalk-dim); }
.rc-x svg { width: 16px; height: 16px; }
.rc-x svg path { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.rc-list-ed { margin: 10px 0 0; padding: 0; list-style: none; }
.rc-exrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.rc-exrow-text { min-width: 0; }
.rc-exrow-name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.rc-exrow-meta { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--chalk-dim); }
.rc-step { display: inline-flex; align-items: center; gap: 2px; }
.rc-step button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--iron-raised); color: var(--chalk); }
.rc-step button[disabled] { opacity: .4; }
.rc-step svg { width: 16px; height: 16px; }
.rc-step svg path { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.rc-step-n { min-width: 1.5em; text-align: center; font: 700 24px/1 var(--f-display); }
.rc-empty { padding: 14px 0 4px; font-size: 14px; color: var(--chalk-dim); }
@media (max-width: 420px) {
  .rc-exrow { grid-template-columns: minmax(0, 1fr) auto; }
  .rc-exrow-text { grid-column: 1 / -1; }
  .rc-exrow .rc-step { justify-self: start; }
}

.rc-find { position: relative; margin-top: 16px; }
.rc-find label { display: block; margin-bottom: 8px; }
.rc-find .input { min-height: 52px; }
.rc-find .hint { margin-top: 8px; }
.rc-results { margin: 6px 0 0; padding: 4px; list-style: none; border-radius: var(--r-button); border: 1px solid var(--hairline); background: var(--iron-raised); max-height: 336px; overflow-y: auto; overscroll-behavior: contain; }
.rc-results[hidden] { display: none; }
.rc-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; min-height: 48px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.rc-opt-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.rc-opt-meta { grid-column: 1; font-size: 12.5px; color: var(--chalk-dim); }
.rc-opt-g { grid-row: 1 / span 2; grid-column: 2; font: 700 15px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; color: var(--chalk-dim); }
.rc-opt[aria-selected="true"] { background: var(--chalk); color: var(--on-chalk); }
.rc-opt[aria-selected="true"] .rc-opt-meta, .rc-opt[aria-selected="true"] .rc-opt-g { color: inherit; opacity: .75; }
.rc-status { margin-top: 8px; font-size: 13px; color: var(--chalk-dim); min-height: 1.4em; }
.rc-day-foot { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; }
.rc-day-foot .link-row { font-size: 14px; background: none; border: 0; padding: 0; color: var(--chalk); text-decoration: underline; cursor: pointer; }

/* the tables and sources under the tool */
.rc-tbl td.num, .rc-tbl th { white-space: nowrap; }
.rc-sources { margin: 14px 0 0; padding-left: 1.25em; }
.rc-sources li { padding: 6px 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.rc-read { display: block; font-size: 13px; color: var(--chalk-dim); }

/* ------------------------------------------------------------ on paper */
.rc-sheet-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.rc-sheet-form .field { margin: 0; }
.rc-sheet-form .input { min-height: 44px; }
.rc-sp {
  --rc-body: #fff;
  --rc-tissue: #e6e6e6;
  --rc-neck: #f1f1f1;
  --rc-line: #111;
  --chalk: #111;
  --chalk-dim: #333;
}
.rc-sp-head { margin: 3mm 0 0; font: 700 15pt/1.15 var(--f-display); letter-spacing: .3px; }
.rc-sp-h { margin: 5mm 0 2mm; font: 600 8pt/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #444; }
.rc-sp-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm 5mm; }
.rc-sp-day-name { margin: 0 0 1mm; font: 700 11pt/1.1 var(--f-display); letter-spacing: .4px; text-transform: uppercase; }
.rc-sp-tbl { width: 100%; border-collapse: collapse; font-size: 8pt; line-height: 1.25; }
.rc-sp-tbl td, .rc-sp-tbl th { padding: .9mm 1mm .9mm 0; border-bottom: .2mm solid #999; text-align: left; vertical-align: top; }
.rc-sp-tbl th { font: 600 7pt/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #444; border-bottom-color: #111; }
.rc-sp-tbl tbody tr:first-child td { border-top: .3mm solid #111; }
.rc-sp-tbl thead + tbody tr:first-child td { border-top: 0; }
.rc-sp-main-m { color: #444; white-space: nowrap; }
.rc-sp-n { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.rc-sp-empty { color: #666; }
.rc-sp-count { display: grid; grid-template-columns: 76mm minmax(0, 1fr); gap: 6mm; align-items: start; }
.rc-sp-figs { display: flex; gap: 2mm; }
.rc-sp-figs .rc-fig { width: 37mm; }
.rc-sp-figs .rc-m path { animation: none; }
.rc-sp-muscles { font-size: 9pt; }
.rc-sp-muscles td, .rc-sp-muscles th { padding: 1.3mm 2mm 1.3mm 0; }
.rc-sp-muscles td:first-child { font-weight: 600; }
.rc-sp-miss td:last-child { font-weight: 600; }
.rc-sp-rule { margin: 5mm 0 0; font-size: 8pt; line-height: 1.4; color: #444; max-width: 150mm; }

@media print {
  /* the tool page itself, printed: the figure and the count, no controls */
  .tool-page .rc-start, .tool-page .rc-actions, .tool-page .rc-week .hint, .tool-page .rc-body > .hint { display: none !important; }
  .tool-page .rc-grid { display: block; }
  .tool-page .rc-body { position: static; }
  .tool-page .rc-m path { animation: none; }
}