/* The printable workout log (T64 stream D). Two parts: the instrument on the
   tool page (site tokens, both themes) and the sheet itself, which is paper.
   Paper does not change with the theme, so the sheet has its own five
   colours: the light theme's materials on screen, black on white in print. */

.wl, .wl-sp {
  --wl-paper: #FBF8F2;
  --wl-ink: #1A1714;
  --wl-dim: #6B645B;
  --wl-faint: #B3A999;
  --wl-tint: rgba(26, 23, 20, .05);
}
.wl-sp {
  --wl-paper: #fff;
  --wl-ink: #111;
  --wl-dim: #555;
  --wl-faint: #9b9b9b;
  --wl-tint: rgba(0, 0, 0, .055);
}

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

/* ------------------------------------------------------------ the page */
.wl-grid { display: grid; gap: 28px; }
.wl-grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .wl-grid {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-areas: "form pv" "do pv" "ed pv";
    grid-template-rows: auto auto 1fr;
    column-gap: 56px;
    align-items: start;
  }
  .wl-form { grid-area: form; }
  .wl-do { grid-area: do; }
  .wl-preview { grid-area: pv; }
  .wl-editor { grid-area: ed; }
  .wl.is-live .wl-preview { position: sticky; top: 76px; }
  .wl.is-live .wl-paper { width: min(100%, calc((100vh - 190px) * 210 / 297)); }
  .wl.is-live[data-paper="letter"] .wl-paper { width: min(100%, calc((100vh - 190px) * 8.5 / 11)); }
}

/* controls: a plain GET form; radios drawn as a segmented track */
.wl-form { display: grid; gap: 18px; }
.wl-f { min-width: 0; margin: 0; padding: 0; border: 0; }
.wl-f > legend, .wl-f > .overline { display: block; margin: 0 0 8px; padding: 0; }
.wl-pair { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.wl-chip { display: inline-flex; align-items: center; text-decoration: none; }
.wl-chip[aria-current] { background: var(--chalk); color: var(--on-chalk); }
.wl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--iron-raised); }
.wl-seg label { position: relative; display: block; }
.wl-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wl-seg span { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--r-button); color: var(--chalk-dim); font: 700 18px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; transition: background-color 160ms ease, color 160ms ease; }
.wl-seg input:checked + span { background: var(--chalk); color: var(--on-chalk); }
.wl-seg input:focus-visible + span { outline: 2px solid var(--chalk); outline-offset: 3px; }
.wl-form > .btn { justify-self: start; }

.wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wl-do .tool-note { max-width: 46em; }

/* the sheet on screen */
.wl-pv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.wl-tabs { margin-bottom: 14px; }
.wl-tab { display: inline-flex; align-items: center; gap: 8px; }
.wl-tab-n { font: 700 18px/1 var(--f-display); opacity: .55; }
.wl-pages { display: grid; gap: 20px; justify-items: center; }
.wl-paper { position: relative; width: 100%; aspect-ratio: 210 / 297; border-radius: 3px; outline: 1px solid var(--hairline); background: var(--wl-paper); color: var(--wl-ink); }
.wl-paper[hidden] { display: none; }
.wl-paper .wl-sheet { position: absolute; inset: 4.714% 6.667% 6.061%; }
.wl[data-paper="letter"] .wl-paper { aspect-ratio: 8.5 / 11; }
.wl[data-paper="letter"] .wl-paper .wl-sheet { inset: 5.011% 6.485% 6.442%; }
@keyframes wl-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wl-arrive { animation: wl-arrive 240ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .wl-arrive { animation: none; }
  .wl-seg span { transition: none; }
}

/* the editor */
.wl-editor .hint { margin-top: 6px; max-width: 40em; }
.wl-ed-day { display: grid; gap: 6px; margin: 18px 0 14px; }
.wl-lab { font-size: 13px; font-weight: 600; color: var(--chalk-dim); }
.wl-editor .input { min-height: 44px; padding: 0 10px; }
.wl-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.wl-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) 44px 44px;
  grid-template-areas: "n name name name name rm" "n sets reps rest up down";
  gap: 8px 6px; align-items: end;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.wl-row-n { grid-area: n; align-self: start; padding-top: 12px; font: 700 20px/1 var(--f-display); color: var(--chalk-dim); }
.wl-e-name { grid-area: name; }
.wl-row [data-act="remove"] { grid-area: rm; }
.wl-row [data-act="up"] { grid-area: up; }
.wl-row [data-act="down"] { grid-area: down; }
.wl-e-f { display: grid; gap: 4px; min-width: 0; }
.wl-e-f > span { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--chalk-dim); }
.wl-e-f .input { width: 100%; }
.wl-ib { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-button); background: var(--iron-raised); color: var(--chalk); }
.wl-ib svg, #wl-add svg { width: 20px; height: 20px; }
.wl-ib path, #wl-add path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-ib[disabled] { opacity: .35; cursor: default; }
.wl-ed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; }
.wl-reset { padding: 0; border: 0; background: none; color: var(--chalk); text-decoration: underline; }
.wl-reset[hidden] { display: none; }
@media (min-width: 600px) {
  .wl-row { grid-template-columns: 22px minmax(0, 1fr) 76px 84px 96px 44px 44px 44px; grid-template-areas: "n name sets reps rest up down rm"; gap: 8px; }
}
@media (min-width: 1000px) {
  .wl-row { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) 44px 44px; grid-template-areas: "n name name name name rm" "n sets reps rest up down"; gap: 8px 6px; }
}
@media (min-width: 1280px) {
  .wl-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

.wl-split-line { margin-top: 1.7em; }

/* ----------------------------------------------------------- the paper
   Every length below is in em, and one em is 1/72 of the sheet's width, so
   the sheet is the same drawing at any size: a phone preview, A4, Letter. */
.wl-sheet { container-type: inline-size; }
.wl-sp .wl-sheet { height: 100%; }
.wl-in { position: relative; height: 100%; font-family: var(--f-body); font-size: 2.52mm; font-size: calc(100cqw / 72); line-height: 1.3; color: var(--wl-ink); font-variant-numeric: tabular-nums lining-nums; }
.wl-in p { margin: 0; }

.wl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; padding-bottom: 1.1em; border-bottom: .28em solid var(--wl-ink); }
.wl-head-l { min-width: 0; }
.wl-over { font-size: .95em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wl-dim); }
.wl-day { margin-top: .08em; font: 700 6.4em/.9 var(--f-display); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
.wl-day.wl-long { font-size: 3.5em; line-height: 1; }
.wl-cont .wl-day { font-size: 3em; line-height: 1; }
.wl-sum { margin-top: .7em; font-size: 1.1em; color: var(--wl-dim); }
.wl-fields { flex: none; display: grid; gap: .7em; width: 24em; }
.wl-field { display: flex; align-items: flex-end; gap: .6em; font-size: .95em; color: var(--wl-dim); }
.wl-field span { white-space: nowrap; }
.wl-field i { flex: 1; height: 1.5em; border-bottom: .08em solid var(--wl-ink); }

.wl-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.wl-table th, .wl-table td { padding: 0; font-weight: 400; text-align: left; }
.wl-table thead th { padding: .75em .6em .6em; vertical-align: bottom; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: .16em solid var(--wl-ink); }
.wl-table thead .wl-c-set { padding-inline: 0; text-align: center; letter-spacing: .04em; }
.wl-table thead .wl-c-rest { padding-inline: 0; text-align: center; }
.wl-c-set { width: 3em; }
.wl-c-rest { width: 4.4em; }
.wl-c-last { width: 6.8em; }
.wl-w1 .wl-c-wk { width: 24em; }
.wl-w2 .wl-c-wk { width: 16em; }
.wl-w3 .wl-c-wk { width: 12em; }
.wl-w4 .wl-c-wk { width: 10em; }
.wl-w5 .wl-c-wk { width: 8em; }
.wl-w6 .wl-c-wk { width: 6.7em; }
.wl-table thead .wl-c-wk, .wl-table thead .wl-c-last { border-left: .07em solid var(--wl-ink); }
.wl-wk { display: block; font: 700 1.5em/1 var(--f-display); letter-spacing: .03em; }
.wl-date { display: flex; align-items: flex-end; gap: .4em; margin: .45em 0 .55em; font-size: .85em; font-weight: 400; letter-spacing: .06em; color: var(--wl-dim); }
.wl-date i { flex: 1; height: 1.3em; border-bottom: .08em solid var(--wl-ink); }
.wl-bar { display: block; width: 100%; max-width: 9.5em; height: auto; overflow: visible; }
.wl-bar-rod, .wl-bar-end { fill: var(--wl-ink); }
.wl-bar-slot { fill: var(--wl-paper); stroke: var(--wl-ink); stroke-width: .55; }
.wl-bar-d { fill: var(--wl-dim); font: 600 4.4px/1 var(--f-body); letter-spacing: 0; }
.wl-w5 .wl-bar-d, .wl-w6 .wl-bar-d { display: none; } /* too small to read at that width; the first slot is Monday */

.wl-ex { border-bottom: .12em solid var(--wl-ink); }
.wl-name { position: relative; padding: .6em .6em .5em 2.8em !important; vertical-align: top; }
.wl-no { position: absolute; left: .5em; top: .52em; font: 700 1.6em/1 var(--f-display); color: var(--wl-dim); }
.wl-nm { display: block; font-size: 1.15em; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.wl-nm.wl-blank { height: 1.7em; margin-right: .4em; border-bottom: .07em solid var(--wl-ink); }
.wl-tg { display: block; margin-top: .22em; font: 700 1.7em/1 var(--f-display); letter-spacing: .02em; }
.wl-set { height: var(--wl-row, 2.3em); text-align: center !important; font-size: 1em; color: var(--wl-dim); border-top: .05em solid var(--wl-faint); }
.wl-rest { text-align: center !important; vertical-align: middle; font: 600 1.3em/1 var(--f-display) !important; letter-spacing: .02em; }
.wl-cell { height: var(--wl-row, 2.3em); text-align: center !important; border-top: .05em solid var(--wl-faint); border-left: .07em solid var(--wl-ink); }
.wl-cell b { position: relative; left: 6%; font-size: .95em; font-weight: 400; color: var(--wl-faint); }
.wl-cell.wl-last { background: var(--wl-tint); }
.wl-ex tr:first-child > .wl-set, .wl-ex tr:first-child > .wl-cell { border-top: 0; }

.wl-notes { margin-top: 1.1em; }
.wl-notes span, .wl-key-t { font-size: .95em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wl-dim); }
.wl-notes i { display: block; height: 2.3em; border-bottom: .07em solid var(--wl-ink); }
.wl-notes i:first-of-type { height: 1.6em; }

.wl-key { margin-top: 1.5em; }
.wl-key ul { display: grid; grid-template-columns: repeat(12, 1fr); margin: .55em 0 0; padding: 0; list-style: none; border-top: .12em solid var(--wl-ink); border-bottom: .07em solid var(--wl-ink); }
.wl-key li { padding: .5em .2em .45em; text-align: center; }
.wl-key li + li { border-left: .05em solid var(--wl-faint); }
.wl-key b { display: block; font: 700 1.5em/1 var(--f-display); }
.wl-key li span { display: block; margin-top: .25em; font-size: .8em; line-height: 1.2; }

.wl-foot { position: absolute; left: 0; right: 0; bottom: -3.45em; display: flex; justify-content: space-between; gap: 2em; font-size: 1.15em; font-weight: 600; line-height: 1; letter-spacing: .06em; color: var(--wl-dim); }
.wl-sp .wl-foot-site { visibility: hidden; } /* the sheet layout prints the site's line itself */

/* ---------------------------------------------------------------- print
   The Print button opens /sheet, which the sheet layout paints. This block
   is for a visitor who prints the tool page itself: the sheets alone, black
   on white, one page each, every day and not only the one on show. */
@media print {
  @page { margin: 14mm 14mm 12mm; }
  .tool-page:has(.wl) > :not(main), .tool-page:has(.wl) main > :not(.tool) { display: none !important; }
  .wl-form, .wl-do, .wl-editor, .wl-pv-head, .wl-tabs { display: none !important; }
  .tool-page:has(.wl), .tool-page:has(.wl) .tool { margin: 0; padding: 0; background: #fff; }
  .wl { max-width: none; padding: 0; --wl-paper: #fff; --wl-ink: #111; --wl-dim: #555; --wl-faint: #9b9b9b; --wl-tint: rgba(0, 0, 0, .055); }
  .wl-grid, .wl-pages { display: block; justify-items: normal; }
  html:has(.wl) { background: #fff; }
  .wl .wl-preview { position: static; }
  .wl .wl-paper, .wl .wl-paper[hidden] { display: block !important; position: static; width: auto !important; aspect-ratio: auto; outline: 0; border-radius: 0; background: #fff; break-after: page; animation: none; }
  .wl .wl-paper:last-child { break-after: auto; }
  .wl .wl-paper .wl-sheet { position: static; }
  .wl .wl-in { height: auto; }
  .wl .wl-foot { position: static; margin-top: 1.2em; }
  .wl * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}