/* Space Grotesk and Space Mono (OFL), one family: the grotesk was drawn
   from the mono. The words, headings included, are Grotesk. Numbers are
   Mono only where they stand in columns: the lift lines, the set boxes and
   the picker, last time, tallies, the history and the charts. There "Log
   Digits" swaps in just the digits (and × − –), so a line's words stay
   Grotesk; "Log Num", for places that hold nothing but numbers, takes
   their colons, slashes and signs too (points and commas stay Grotesk:
   a mono point opens a gap in "32.5"). Its files are cut down to those
   few characters. Sentences keep Grotesk's own figures. */
@font-face { font-family: "Log Grotesk"; src: url("fonts/SpaceGrotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Log Grotesk"; src: url("fonts/SpaceGrotesk-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Log Grotesk"; src: url("fonts/SpaceGrotesk-vietnamese.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* (Space Mono's own line metrics are taller than Grotesk's: a digit in a
   line never makes it taller) */
@font-face { font-family: "Log Digits"; src: url("fonts/SpaceMono-400-nums.woff2") format("woff2"); font-weight: 300 500; font-display: swap; unicode-range: U+0030-0039, U+00D7, U+2212, U+2013; ascent-override: 98.4%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Log Digits"; src: url("fonts/SpaceMono-700-nums.woff2") format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0030-0039, U+00D7, U+2212, U+2013; ascent-override: 98.4%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Log Num"; src: url("fonts/SpaceMono-400-nums.woff2") format("woff2"); font-weight: 300 500; font-display: swap; unicode-range: U+0030-0039, U+002B, U+002D, U+002F, U+003A, U+00D7, U+2212, U+2013; ascent-override: 98.4%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Log Num"; src: url("fonts/SpaceMono-700-nums.woff2") format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0030-0039, U+002B, U+002D, U+002F, U+003A, U+00D7, U+2212, U+2013; ascent-override: 98.4%; descent-override: 29.2%; line-gap-override: 0%; }

:root {
  --sans: "Log Grotesk", -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  --digits: "Log Digits", var(--sans);
  --num: "Log Num", var(--sans);
  /* the type scale: a title, a heading, the body, two smaller steps and a
     label. Weights 400, 500 and 700 only (Space Mono has 400 and 700). */
  --t-title: 2rem;
  --t-head: 1.25rem;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-meta: 0.8125rem;
  --t-label: 0.75rem;
  --r-s: 9px;
  --r: 14px;
  /* Clay & Sage: warm paper, a set done in steel blue, a set short of its
     reps in clay (the only thing that's clay), sage for what's to tap.
     Going down next time is the ink's quieter tone, told by its shape.
     (Each text colour 4.5:1 or more on paper and card; borders 3:1.) */
  --paper: #f2ede5;
  --card: #fbf8f2;
  --ink: #2a2420;
  --soft: #5c5249;
  --muted: #6c6258;
  --rule: #e2d9cc;
  --rule-strong: #8f8579;
  --done: #2f6382;
  --done-ink: #ffffff;
  --accent: #4d6b4f;
  --accent-ink: #ffffff;
  --short: #a94b24;
  --short-ink: #ffffff;
  --up: #2a2420;
  --up-ink: #ffffff;
  --down: #5c5249;
  --down-ink: #ffffff;
  --danger: #a8201a;
  --danger-ink: #ffffff;
  --field: rgba(42, 36, 32, 0.05);
  --tray-1: #5c5249;
  --tray-2: #6c6258;
  --tray-ink: #f2ede5;
  --tray-del: #a8201a;
  --tray-del-ink: #ffffff;
  --pop-shade: rgba(0, 0, 0, 0.16);
  --pop-rule: #e2d9cc;
  --cal-filter: none;
  color-scheme: light;
}
/* Night: the phone's dark mode (unless Light is chosen in the app), or
   Dark chosen in the app whatever the phone says */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1613;
    --card: #24201b;
    --ink: #f1e9df;
    --soft: #c2b6a8;
    --muted: #9c9184;
    --rule: #3a322c;
    --rule-strong: #7c7065;
    --done: #8fbad6;
    --done-ink: #1a1613;
    --accent: #a7c4a0;
    --accent-ink: #1a1613;
    --short: #d4703f;
    --short-ink: #1a1613;
    --up: #f1e9df;
    --up-ink: #1a1613;
    --down: #c2b6a8;
    --down-ink: #1a1613;
    --danger: #ff8a7a;
    --danger-ink: #1d0b08;
    --field: rgba(241, 233, 223, 0.06);
    --tray-1: #4a4038;
    --tray-2: #3a322c;
    --tray-ink: #f1e9df;
    --tray-del: #8f2a20;
    --tray-del-ink: #fbe9e5;
    --pop-shade: rgba(0, 0, 0, 0.55);
    --pop-rule: #7c7065;
    --cal-filter: invert(0.85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1a1613;
  --card: #24201b;
  --ink: #f1e9df;
  --soft: #c2b6a8;
  --muted: #9c9184;
  --rule: #3a322c;
  --rule-strong: #7c7065;
  --done: #8fbad6;
  --done-ink: #1a1613;
  --accent: #a7c4a0;
  --accent-ink: #1a1613;
  --short: #d4703f;
  --short-ink: #1a1613;
  --up: #f1e9df;
  --up-ink: #1a1613;
  --down: #c2b6a8;
  --down-ink: #1a1613;
  --danger: #ff8a7a;
  --danger-ink: #1d0b08;
  --field: rgba(241, 233, 223, 0.06);
  --tray-1: #4a4038;
  --tray-2: #3a322c;
  --tray-ink: #f1e9df;
  --tray-del: #8f2a20;
  --tray-del-ink: #fbe9e5;
  --pop-shade: rgba(0, 0, 0, 0.55);
  --pop-rule: #7c7065;
  --cal-filter: invert(0.85);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* (hidden means hidden, whatever a class says its display is) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.45 var(--sans);
  min-height: 100vh;
}
main {
  max-width: 34rem;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 16px 2.5rem;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
code { font: 0.92em var(--digits); color: var(--ink); background: var(--field); border-radius: 5px; padding: 0 0.2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* an icon in a sentence is the size of the words around it */
.lede svg, .help svg, .legend svg, .by svg { width: 1.05em; height: 1.05em; vertical-align: -0.17em; }

/* ---- Type: one title, one section label, small print ---- */
.h1, .mast h1, .datewrap h1, .dtitle, input.title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}
.h1 { margin: 0.5rem 0 0.25rem; }
/* section labels: lowercase in the note (it's the owner's), sentence case
   elsewhere, one style */
.h2, .note h2.sec, .exsheet h3, .flags-head, .lab.ask, legend, .metric h2 {
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.25;
  color: var(--soft);
}
.h2 { margin: 1.5rem 0 0.4rem; }
/* the one uppercase label */
.month, .kicker, .last .lk {
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}
.lede { color: var(--soft); font-size: var(--t-small); line-height: 1.5; margin: 0 0 1rem; max-width: 60ch; }
.help { color: var(--soft); font-size: var(--t-small); line-height: 1.5; max-width: 60ch; }
.help.small { font-size: var(--t-meta); }
.by { margin: 0 0 0.75rem; color: var(--soft); font-size: var(--t-meta); line-height: 1.35; }

/* ---- Top bar ---- */
.bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0;
  background: var(--paper);
}
.bar .grow { flex: 1; }
.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.iconbtn svg { width: 1.3rem; height: 1.3rem; }
.textbtn {
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
}
.textbtn.strong { font-weight: 700; }
/* (text buttons in a row start on the column's edge, keeping their height) */
.row-links, .foot, .homefoot, .adders { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.row-links .textbtn, .foot .textbtn, .homefoot .textbtn, .adders .textbtn { padding-inline: 0; }
.row-links { margin: 0.4rem 0 1.25rem; }

/* ---- Home: one sheet of paper ---- */
.mast { margin: 0.75rem 0 0.25rem; }
.mast h1 { display: flex; align-items: center; gap: 0.6rem; margin: 0; line-height: 1.05; }
.mast-mark { width: 3.3rem; height: 1rem; flex: none; }
.mast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mast .gear { color: var(--muted); }
.mast .gear:hover, .mast .gear:focus-visible { color: var(--ink); }
/* ---- Settings: a row of choices each, the one chosen in ink ---- */
.setting { margin: 0 0 1.5rem; }
.setting-k { margin: 0 0 0.35rem; font-weight: 700; }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg button { min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: 500 var(--t-small) var(--digits); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.setting .help { margin-top: 0.4rem; }
.setting-more { margin-top: 0.5rem; }
.unit-ask { margin: -0.75rem 0 1.5rem; padding: 0.8rem 1rem; border-radius: var(--r-s, 10px); background: var(--card); }
.unit-ask p { margin: 0 0 0.4rem; font-size: var(--t-small); }
.unit-ask .row-links { margin-bottom: 0; }
/* on home, under the nav rather than tucked under a setting */
.unit-ask.home-ask { margin: 0 0 1.5rem; }
.month { margin: 1.5rem 0 0; padding-bottom: 0.35rem; }
.month:first-of-type { margin-top: 0.5rem; }
.sessions { list-style: none; margin: 0; padding: 0; }
.swipe { position: relative; overflow: hidden; border-top: 1px solid var(--rule); background: var(--paper); }
.scard { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 0.5rem; padding: 0.65rem 2.75rem 0.7rem 0; }
.swipe.today .when .dw { color: var(--accent); font-weight: 700; }
.cardlink {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: grid;
}
/* the whole day answers to its date */
.cardlink::after { content: ""; position: absolute; inset: 0; }
.cardlink:focus-visible { outline: none; }
.cardlink:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.when { margin: 0; }
.when .dn { font-size: var(--t-head); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.when .dw { font-size: var(--t-meta); font-weight: 500; color: var(--soft); line-height: 1.2; }
.dbody { min-width: 0; }
.dmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0.1rem 0 0.2rem; }
.tally { color: var(--short); font: 400 var(--t-meta)/1.3 var(--num); }
.scard ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); line-height: 1.35; color: var(--ink); }
.scard li { display: grid; grid-template-columns: 1.15rem 1fr 1.15rem; gap: 0.35rem; align-items: start; padding: 0.08rem 0; }
.scard li .tx { font-family: var(--digits); min-width: 0; }
.scard li.cardio .tx { color: var(--soft); }
/* the accessories, ruled off from the main lifts */
.scard li.acc { border-top: 1px dashed var(--rule-strong); margin-top: 0.15rem; padding-top: 0.2rem; }
.scard .st svg, .scard .nx svg { display: block; width: 1.05rem; height: 1.05rem; margin-top: 0.12rem; }
.delta { font: 700 0.9em var(--num); color: var(--ink); }
.delta.same { font-weight: 400; color: var(--muted); font-family: var(--sans); }
.frac { font: 400 0.9em var(--num); color: var(--soft); white-space: nowrap; }
.frac b { color: var(--short); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.more-btn { margin-top: 0.75rem; }
.more-btn .sub { color: var(--soft); font-weight: 400; }
.homefoot { margin: 2rem 0 0; padding-top: 0.75rem; border-top: 1px dashed var(--rule); }
.homefoot .textbtn { color: var(--soft); font-size: var(--t-small); }

/* a first visit: an example note, ghosted */
.first .lede { margin-top: 0.75rem; }
.ghost { opacity: 0.55; border-top: 1px solid var(--rule); padding: 0.5rem 0 0.25rem; }
.ghost p { margin: 0; }
.glabel { font-size: var(--t-small); font-weight: 700; color: var(--soft); margin-top: 0.5rem !important; }
.gl { display: flex; align-items: center; gap: 0.4rem; font-family: var(--digits); padding: 0.15rem 0; }
.gl .gmark { margin-left: 0.2rem; }
.gn { width: 1.6rem; text-align: right; flex: none; margin-right: 0.3rem; font-size: var(--t-small); color: var(--muted); }
.gmark svg { width: 1.3rem; height: 1.3rem; vertical-align: -0.25em; margin-left: 0.4rem; }
.gsets { display: flex; gap: 0.375rem; padding: 0.1rem 0 0.35rem 2.3rem; }
.gsets i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1.6px solid var(--rule-strong); border-radius: var(--r-s); font: 700 1rem var(--num); font-style: normal; }
.gsets i.d { background: var(--done); border-color: var(--done); color: var(--done-ink); }

/* ---- Swipe a day for its actions ---- */
.tray {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  box-shadow: -6px 0 16px var(--pop-shade);
}
.tray.dragging { transition: none; }
.swipe.moving .tray, .swipe.open .tray { visibility: visible; }
.swipe.open .tray { transform: none; }
.swipe.moving .dots, .swipe.open .dots { visibility: hidden; }
.tray-date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tbtn {
  width: 4.75rem;
  border: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  font-size: var(--t-meta);
  font-weight: 700;
  cursor: pointer;
}
.tbtn svg { width: 1.4rem; height: 1.4rem; }
.tbtn.complete { background: var(--done); color: var(--done-ink); }
.tbtn.clear { background: var(--tray-1); color: var(--tray-ink); }
.tbtn.more { background: var(--tray-2); color: var(--tray-ink); }
.tbtn.delete { background: var(--tray-del); color: var(--tray-del-ink); }
.slide { position: relative; touch-action: pan-y; background: var(--paper); }
.dots {
  z-index: 1;
  position: absolute;
  top: 0.35rem;
  right: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.dots svg { width: 1.3rem; height: 1.3rem; }
.dots:hover, .dots:focus-visible { background: var(--field); color: var(--ink); }
/* a workout's lines, lifts and supersets: the same tray, one Delete. Laid
   out only while it moves (an idle row neither clips its picker nor widens
   the page) */
.swipe.row { border-top: 0; background: none; overflow: visible; }
.swipe.row.moving, .swipe.row.open { overflow: clip; }
/* shut, a row's Delete is out of sight but still there to tab to */
/* (inside its row while shut, not past its edge, and put there at once: a
   tray past the edge for a moment widens a phone's page for good) */
.swipe.row:not(.moving):not(.open) > .tray { visibility: visible; clip-path: inset(50%); transform: none; transition: none; }
.swipe.row > .tray { box-shadow: none; }
.swipe.row > .slide { background: var(--paper); }
/* (a row is one line tall: the button's icon and word sit side by side, small) */
.swipe.row .tbtn { width: auto; padding: 0 0.9rem; display: flex; align-items: center; gap: 0.35rem; font-size: var(--t-meta); }
.swipe.row .tbtn svg { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .tray { transition: none; } }

/* ---- The actions sheet ---- */
#sheet {
  border: 0;
  padding: 0;
  margin: auto auto calc(var(--random-nav-h, 0px) + 0.75rem);
  width: min(100% - 24px, 30rem);
  max-height: calc(100dvh - var(--random-nav-h, 0px) - 1.5rem);
  overflow: auto;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
#sheet::backdrop { background: rgba(0, 0, 0, 0.35); }
.sheet { display: grid; padding: 0.4rem 0; }
.sheet-title { margin: 0; padding: 0.6rem 1.1rem 0.5rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); }
.sheet-title small { font: 400 var(--t-meta)/1.6 var(--num); color: var(--soft); }
.sheet button, .sheet-date {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 0.8rem 1.1rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sheet button:hover, .sheet button:focus-visible, .sheet-date:hover { background: var(--field); }
/* each action's icon: small, muted, leading */
.sheet .mi { width: 1.15em; height: 1.15em; flex: none; color: var(--muted); }
.sheet .danger .mi { color: inherit; opacity: 0.7; }
.sheet-date { white-space: nowrap; }
.sheet-date input { margin-left: auto; min-width: 0; font: inherit; font-family: var(--num); text-align: right; color: var(--accent); background: none; border: 0; }
.sheet-date input::-webkit-calendar-picker-indicator { filter: var(--cal-filter); }
.sheet button.danger, .danger { color: var(--danger); }
.sheet-title:focus { outline: none; }
.sheet button > span small { display: block; font-weight: 400; font-size: var(--t-meta); color: var(--soft); }
.sheet .cancel { justify-content: center; font-weight: 700; color: var(--soft); border-top: 1px solid var(--rule); margin-top: 0.3rem; }

/* ---- A workout (the note) ---- */
.note { padding-top: 0.25rem; }
.datewrap { position: relative; display: inline-block; margin: 0.25rem 0 0.2rem; }
.datewrap h1, .dtitle {
  margin: 0;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
}
.dtitle { margin: 0.25rem 0 0.2rem; }
.datewrap input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.datewrap:focus-within h1 { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
h1[tabindex="-1"]:focus { outline: none; }
/* what's been worked: a caption under the date, one line */
.hit { margin: 0.4rem 0 0; font-size: var(--t-meta); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit:empty { display: none; }
.note h2.sec { margin: 1rem 0 0.15rem; }
.sec-note { margin-left: 0.4rem; font-weight: 400; font-size: var(--t-meta); color: var(--muted); }
ol.lines, ol.blocks, ol.items { margin: 0; padding: 0; list-style: none; }
ol.lines, ol.blocks { counter-reset: n; }
ol.items { counter-reset: m; }
ol.lines > li, ol.blocks > li { counter-increment: n; position: relative; }
ol.items > li { counter-increment: m; position: relative; }
ol.lines > li, ol.blocks > li:not(.ss), ol.items > li { padding-left: 2.1rem; }
ol.lines > li::before, ol.blocks > li:not(.ss)::before, ol.items > li::before {
  content: counter(n) ".";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.75rem;
  text-align: right;
  color: var(--muted);
  font: 400 var(--t-small)/1.45 var(--num);
}
/* superset lifts as a gym writes them: 1a, 1b */
ol.items > li::before { content: counter(n) counter(m, lower-alpha) "."; }
/* a superset is held together by a rule in the margin; the lift you're on
   by the accent */
ol.blocks > li.ss { position: relative; }
ol.blocks > li.ss::after, ol.blocks > li.current::after { content: ""; position: absolute; left: -0.6rem; top: 0.35rem; bottom: 0.5rem; width: 2px; border-radius: 1px; background: var(--rule-strong); }
ol.blocks > li.current::after { background: var(--accent); width: 3px; }
.sslabel { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0 0 2.1rem; font-size: var(--t-meta); font-weight: 700; color: var(--soft); }
.sslabel .add { margin: -0.6rem 0 -0.6rem auto; padding: 0.6rem 0 0.6rem 0.6rem; font-size: var(--t-small); }
.line { display: flex; align-items: flex-start; gap: 0.4rem; }
/* the field and its coloured copy share one cell, set alike to the pixel */
.ta { flex: 1; min-width: 0; display: grid; }
.line textarea, .ta .hl {
  grid-area: 1 / 1;
  min-width: 0;
  border: 0;
  font: inherit;
  font-family: var(--digits);
  padding: 0.15rem 0.3rem;
  margin: 0 0 0 -0.3rem;
  border-radius: 8px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  letter-spacing: normal;
}
.ta .hl { color: var(--ink); pointer-events: none; }
.line textarea {
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  resize: none;
  overflow: hidden;
  min-height: calc(1.45em + 0.3rem);
  field-sizing: content;
}
/* the x between numbers: quieter than the numbers it joins */
.x, .at, .conv { color: var(--muted); }
/* a lift field shows its @ only while it isn't being typed in */
.ta .pair { display: grid; }
.ta .pair > span { grid-area: 1 / 1; }
.ta:focus-within .pair .dsp, .ta:not(:focus-within) .pair .raw { visibility: hidden; }
.line textarea:focus { outline: none; background: var(--field); }
.line textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.line textarea::placeholder { color: var(--muted); }
.mark {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.4rem 0 -0.6rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mark svg { width: 1.6rem; height: 1.6rem; }
.adders { margin: 0 0 0 2.1rem; }
.adders .textbtn { font-size: var(--t-small); padding-block: 0.45rem; margin: -0.2rem 0; }
.legend { margin: 1.5rem 0 0; font-size: var(--t-meta); line-height: 1.5; color: var(--soft); max-width: 60ch; }
.foot { margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px dashed var(--rule); align-items: center; }
.wnote {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
  border: 0;
  border-left: 3px solid var(--rule);
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: var(--t-small);
  padding: 0.2rem 0.6rem;
  resize: none;
  field-sizing: content;
}
.wnote:focus { outline: none; border-left-color: var(--accent); }

/* ---- Sets under a lift ---- */
.under { position: relative; padding: 0.1rem 0 0.4rem; }
.under .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.sets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
/* 44px at the least: they're tapped mid-set */
.set {
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.4rem;
  border: 1.6px solid var(--rule-strong);
  border-radius: var(--r-s);
  background: var(--card);
  color: var(--ink);
  font: 700 1.125rem var(--num);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.set:active { transform: translateY(1px); }
.set small { font-size: 0.7em; font-weight: 400; opacity: 0.9; }
.set.done { background: var(--done); border-color: var(--done); color: var(--done-ink); }
.set.short { background: var(--short); border-color: var(--short); color: var(--short-ink); }
@media (prefers-reduced-motion: reduce) { .set { transition: none; } }
.set.open { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 360px) { .sets { gap: 0.3rem; } .set { min-width: 2.5rem; padding: 0 0.3rem; } }
.meta { flex: 1 0 auto; max-width: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.15rem 0.6rem; margin: 0; font-size: var(--t-meta); color: var(--soft); min-height: 1.6rem; }
.meta:has(.warn) { flex-wrap: wrap; }
.meta .warn { color: var(--danger); font-weight: 700; }
/* last time, stacked on purpose: a small date label over the scheme, narrow
   enough to sit beside the boxes; each line stays whole. A link to the
   lift's progress. */
.last { display: grid; min-width: 0; border: 0; background: none; padding: 0.2rem 0; margin: -0.2rem 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.last .lk { letter-spacing: 0.05em; }
.last .lk, .last .lv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.last .lv { font: 400 var(--t-small)/1.3 var(--num); color: var(--soft); }
.last .lv svg { width: 1em; height: 1em; vertical-align: -0.15em; margin-left: 0.3rem; }
.last:hover .lk, .last:focus-visible .lk { color: var(--accent); }
.exname {
  border: 0;
  background: none;
  padding: 0.35rem 0;
  font: inherit;
  font-weight: 500;
  color: var(--soft);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.exname.close, .exname.none { color: var(--muted); }
.suggest { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.1rem 0 0.45rem; }
.sug {
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: var(--t-meta);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.sug.mine { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.picker {
  position: absolute;
  left: -2.1rem;
  right: -0.3rem;
  top: calc(100% - 0.5rem);
  z-index: 4;
  display: grid;
  gap: 0.45rem;
  padding: 0.6rem;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--pop-rule);
  box-shadow: 0 10px 30px var(--pop-shade);
}
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--t-small); }
/* the set is the picker's heading: what everything under it changes */
.pk-head b { font-size: var(--t-head); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; padding-left: 0.15rem; }
.rep svg { width: 1.15rem; height: 1.15rem; vertical-align: middle; }
.pk-foot { display: flex; gap: 0.4rem; }
.rep.wide { flex: 1; }
.rep {
  min-width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--paper);
  color: var(--ink);
  font: 700 1rem var(--num);
  cursor: pointer;
}
.rep.wide { font-family: var(--sans); font-size: var(--t-small); }
.rep.on { background: var(--ink); color: var(--paper); }
/* weight and reps: a jump and a step either way, the number typed between */
.pk-step { display: flex; align-items: center; gap: 4px; }
.pk-k { flex: 1; min-width: 0; font: 400 var(--t-meta) var(--sans); color: var(--soft); padding-left: 0.15rem; }
.pk-step .rep { flex: none; min-width: 2.6rem; padding: 0 0.2rem; font-size: var(--t-small); }
.pk-num { width: 4.4rem; text-align: center; cursor: text; font: 700 1.05rem var(--num); }
.pk-num:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.rep.undo { padding: 0 0.6rem; font-weight: 400; color: var(--soft); }

/* ---- A finished workout: as it's shared ---- */
.flist { list-style: none; margin: 0; padding: 0; }
/* a lift stays on one line: where it and its sets don't fit side by side,
   the sets drop under it, still on the right, rather than the line breaking */
.flist li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.2rem 0.4rem; padding: 0.22rem 0; line-height: 1.35; }
.flist .fnum { flex: none; width: 1.8rem; }
.flist .ftx { flex: 0 0 auto; max-width: calc(100% - 2.4rem); }
.fend { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; min-height: 1.45rem; }
/* (the mark takes little room in the row; its tap reaches past it) */
.flist .mark { position: relative; width: 1.3rem; height: 1.45rem; margin: 0; }
.flist .mark::before { content: ""; position: absolute; inset: -0.65rem -0.6rem; }
.flist .mark svg { width: 1.2rem; height: 1.2rem; }
.ftag { margin: 0.4rem 0 0; }
.flist li.in-ss { position: relative; }
.flist li.in-ss::before { content: ""; position: absolute; left: -0.6rem; top: 0; bottom: 0; width: 2px; background: var(--rule-strong); }
.flist li.in-ss.first::before { top: 0.35rem; }
/* list numbers are scaffolding: quiet, a step smaller */
.fnum { font: 400 var(--t-small)/1.55 var(--num); color: var(--muted); text-align: right; padding-right: 0.2rem; }
.ftx { font-family: var(--digits); min-width: 0; }
/* a set as a small box with its reps, like the boxes ticked in the gym;
   a short one clay and underlined (not by colour alone); one not done
   (only an accessory's) an empty outline with its target */
.fsq { display: flex; gap: 2px; }
.fsq i { display: grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.25rem; border-radius: 5px; background: var(--done); color: var(--done-ink); font: 700 var(--t-meta) var(--num); font-style: normal; }
.fsq i.nd { background: none; box-shadow: inset 0 0 0 1.4px var(--rule-strong); color: var(--soft); }
.fsq i.short { background: var(--short); color: var(--short-ink); text-decoration: underline; text-underline-offset: 2px; }
.fnx svg { display: block; width: 1.15rem; height: 1.15rem; }
.fnote { margin: 0.6rem 0 0; padding-left: 0.6rem; border-left: 3px solid var(--rule); color: var(--soft); font-size: var(--t-small); }
.finished .foot { margin-top: 1.25rem; }

/* ---- The rest timer: in the workout's bar ---- */
.rest {
  position: fixed;
  top: calc(max(1rem, env(safe-area-inset-top)) + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: none;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: var(--card);
  color: var(--accent);
  font: 700 1rem var(--num);
  cursor: pointer;
}
body.inworkout .rest:not([hidden]) { display: block; }
.rest-k { font-family: var(--sans); font-weight: 500; color: var(--soft); margin-right: 0.3rem; }
/* at the rest target (Settings): filled with the accent */
.rest.due { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rest.due .rest-k { color: var(--accent-ink); }

/* ---- Lists, routines, forms ---- */
.kicker { margin: 0.25rem 0 0; }
input.title {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0.1rem 0;
  margin: 0 0 0.5rem;
  border-bottom: 4px solid var(--rule);
}
input.title:focus { outline: none; border-bottom-color: var(--accent); }
.tag {
  flex: none;
  white-space: nowrap;
  align-self: center;
  font-size: var(--t-label);
  font-weight: 700;
  color: var(--accent);
  background: var(--field);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.primary {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r);
  padding: 0.9rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.primary small { display: block; font-weight: 400; opacity: 0.85; font-size: var(--t-meta); }
.primary.quiet { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.primary.small { width: auto; flex: none; padding: 0.7rem 1.1rem; }
.foot .primary { margin-bottom: 0.5rem; }
.empty { background: var(--card); border-radius: var(--r); padding: 1.1rem 1rem; color: var(--soft); }
.empty p { margin: 0 0 0.6rem; }
.empty p:last-child { margin: 0; }
.newname { display: flex; gap: 0.5rem; }
.field {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  padding: 0.65rem 0.8rem;
}
.textbtn.inline { padding: 0.2rem 0; }
.linkbtn { border: 0; background: none; padding: 0.35rem 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; cursor: pointer; }
.filebtn { position: relative; overflow: hidden; display: inline-block; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.filebtn:focus-within { outline: 2px solid var(--accent); border-radius: 6px; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pitem {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  padding: 0.7rem 0.9rem;
  text-align: left;
  cursor: pointer;
}
.pitem .nm { font-weight: 700; }
.pitem .sub { color: var(--soft); font-size: var(--t-meta); font-family: var(--digits); }
.ghost-list { opacity: 0.55; }
.ghost-list .pitem { cursor: default; }
#pastq { width: 100%; margin-bottom: 0.6rem; }

/* ---- One exercise ---- */
.exsheet { background: var(--card); border-radius: var(--r); padding: 0.9rem 1rem 1rem; margin: 0.5rem 0 0.75rem; }
.why { margin: 0 0 0.35rem; font-size: var(--t-meta); color: var(--soft); }
.exh { margin: 0; font-size: var(--t-head); font-weight: 700; line-height: 1.15; }
.facts { margin: 0.2rem 0 0.75rem; color: var(--soft); font-size: var(--t-small); }
.facts::first-letter { text-transform: uppercase; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
/* the library's photos, toned to sit on the paper with the drawn marks */
.photos img, .nophoto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--field); }
.photos img { filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .photos img { filter: grayscale(1) brightness(0.85); mix-blend-mode: normal; } }
:root[data-theme="dark"] .photos img { filter: grayscale(1) brightness(0.85); mix-blend-mode: normal; }
.nophoto { display: grid; place-items: center; font-size: var(--t-meta); color: var(--soft); text-align: center; }
.exsheet h3 { margin: 0.85rem 0 0.35rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.chip { background: var(--field); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: var(--t-meta); }
.steps { margin: 0; padding-left: 1.3rem; color: var(--soft); font-size: var(--t-small); line-height: 1.5; }
.steps li { margin-bottom: 0.35rem; }
.moresteps summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: var(--t-small); padding: 0.3rem 0; }
.panel { background: var(--card); border-radius: var(--r); padding: 0.75rem; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.panel .plist { max-height: 26rem; overflow: auto; }
.panel .pitem { background: var(--paper); }
.lab { display: grid; gap: 0.3rem; font-size: var(--t-meta); color: var(--soft); }
fieldset { border: 0; margin: 0; padding: 0; }
legend { margin-bottom: 0.35rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.15rem 0.5rem; }
.check { display: flex; align-items: center; gap: 0.4rem; font-size: var(--t-small); padding: 0.3rem 0; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.credit { margin-top: 2rem; font-size: var(--t-meta); color: var(--soft); }

/* ---- Muscle balance: sets against ten a week ---- */
.balance { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.2rem; }
.balance li { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; align-items: center; gap: 0.5rem; font-size: var(--t-small); line-height: 1.3; }
.balance .meter { position: relative; height: 0.6rem; }
.balance .meter span { display: block; height: 100%; border-radius: 2px; background: var(--done); }
.balance .meter i { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 1px; background: var(--rule-strong); }
.balance .n { text-align: right; font-family: var(--num); color: var(--soft); }
.balance li.zero .mu, .balance li.zero .n { color: var(--muted); }

/* ---- Progress: WordGirl's stats, for lifts ---- */
.pgrid, .metrics { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.pgrid li.wide, .metric.wide { grid-column: 1 / -1; }
.pcell { display: flex; flex-direction: column; width: 100%; height: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.pcell .nm { font-size: var(--t-small); font-weight: 700; line-height: 1.2; }
.pcell .by, .metric .by { margin: 0.15rem 0 0.4rem; font-family: var(--digits); }
.pcell svg, .metric svg { margin-top: auto; }
.metric { display: flex; flex-direction: column; min-width: 0; }
.metric h2 { margin: 0; color: var(--ink); }
.fig { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.fig:focus { outline: none; }
.fig:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.fig .frame { stroke: var(--rule-strong); stroke-width: 1; }
/* the data is the darkest ink; a day picked, and bars of sets done, in the done blue */
.fig .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.fig .gapln { fill: none; stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.fig .dot { fill: var(--ink); }
/* a rough estimate (from a set of more than 10 reps): hollow */
.fig .dot.rough { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.fig .ring { fill: var(--card); stroke: var(--done); stroke-width: 2; }
.fig .bar { fill: var(--done); }
.fig .lab, .fig .tickl { fill: var(--soft); font: 400 11px var(--num); }
.fig .tickl { font-family: var(--sans); }
.lately { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.1rem; }
.lately li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.lately .when { font: 400 var(--t-meta) var(--num); color: var(--soft); }
table.hist { width: 100%; border-collapse: collapse; font-size: var(--t-small); margin-top: 0.5rem; }
table.hist th { text-align: left; color: var(--soft); font-weight: 500; font-size: var(--t-meta); padding: 0.3rem 0.25rem; }
table.hist td { padding: 0.45rem 0.25rem; border-top: 1px solid var(--rule); font-family: var(--digits); }
table.hist td:first-child .linkbtn { font-family: var(--num); white-space: nowrap; }
table.hist td svg { width: 1.05rem; height: 1.05rem; vertical-align: -0.18em; }
table.hist tr.link { cursor: pointer; }
table.hist tr.picked td { background: var(--field); }
table.hist td.reps { color: var(--short); font-weight: 700; font-family: var(--num); }

/* ---- Import ---- */
.paste {
  width: 100%;
  min-height: 14rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: 400 var(--t-small)/1.45 var(--digits);
  padding: 0.75rem;
  resize: vertical;
}
#how { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.mapping { background: var(--card); border-radius: 12px; padding: 0.6rem 0.8rem; }
.mapping summary { cursor: pointer; font-size: var(--t-small); color: var(--soft); }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.lab.inline { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lab.inline .field { flex: 0 1 auto; padding: 0.45rem 0.6rem; }
.lab.ask { color: var(--ink); }
.flags { background: var(--card); border-radius: 12px; padding: 0.6rem 0.8rem; margin: 0.5rem 0 0.9rem; border-left: 4px solid var(--short); }
.flags-head { margin: 0 0 0.4rem; color: var(--ink); }
.flag { padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.flag p { margin: 0 0 0.4rem; display: grid; gap: 0.1rem; }
.flag .ftext { font: 400 var(--t-small) var(--digits); overflow-wrap: anywhere; }
.flag .why { font-size: var(--t-meta); color: var(--soft); }
.fbtns { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.fbtns button { border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.35rem 0.85rem; font: inherit; font-size: var(--t-meta); cursor: pointer; }
.fbtns button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.found { margin: 0.75rem 0 0.4rem; color: var(--soft); font-size: var(--t-small); white-space: pre-line; }
.preview { margin: 0 0 1rem; max-height: 28rem; overflow: auto; border-radius: 12px; background: var(--card); }
.preview:empty { display: none; }
.preview details { border-top: 1px solid var(--rule); }
.preview details:first-child { border-top: 0; }
.preview summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; padding: 0.5rem 0.75rem; font-size: var(--t-small); cursor: pointer; }
.preview summary b { white-space: nowrap; }
.preview summary > span:last-child { margin-left: auto; color: var(--soft); text-align: right; }
.pv { padding: 0 0.75rem 0.6rem 1.25rem; font-size: var(--t-meta); }
.pv p { margin: 0.15rem 0; }
.pvc { color: var(--soft); }
.pvb.ss { border-left: 2px solid var(--rule-strong); padding-left: 0.5rem; margin: 0.3rem 0; }
.pvh { font-weight: 700; color: var(--soft); }
.pvh.pva { margin-top: 0.4rem; }
.pvl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; font-family: var(--digits); }
.pvs { color: var(--soft); font-family: var(--num); }
.fileis { align-self: center; color: var(--soft); font-size: var(--t-small); }
#how .check { text-transform: none; }

/* ---- Toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--random-nav-h, 0px) + 1rem);
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: var(--t-small);
  z-index: 5;
  max-width: calc(100vw - 32px);
}
.toast:empty { display: none; }

/* ---- Colours: the phone's, or light or dark ---- */
/* a row of its own at the foot, in the footer's words: the one chosen in
   ink and underlined */
.themes { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.themes-k { color: var(--soft); font-size: var(--t-small); }
.themes button { border: 0; background: none; color: var(--accent); font: 500 var(--t-small) var(--sans); min-height: 2.75rem; padding: 0; cursor: pointer; }
.themes button[aria-pressed="true"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Focus: one ring, everywhere ---- */
:where(button, summary, a, input, select, label.filebtn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.set.open:focus-visible { outline-color: var(--ink); }
/* (a field's own focus: a ring that forced colours keeps too) */
.line textarea:focus-visible, .wnote:focus, input.title:focus { outline: 2px solid transparent; outline-offset: -2px; }

/* ---- Forced colours (Windows High Contrast): what colour alone said ---- */
@media (forced-colors: active) {
  .set.done, .set.short, .seg button[aria-pressed="true"], .rest.due, .fsq i, .tbtn { forced-color-adjust: none; }
  .set.done, .set.short, .fsq i, .rest.due { background: Highlight; color: HighlightText; border-color: Highlight; }
  .set.short, .fsq i.short { text-decoration: underline; }
  .fsq i.nd { background: Canvas; color: CanvasText; box-shadow: inset 0 0 0 1.4px CanvasText; }
  .seg button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  /* the field's own text shows here: its coloured copy only keeps its room */
  .ta .hl { visibility: hidden; }
  .tbtn { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .line textarea:focus-visible, .wnote:focus, input.title:focus { outline-color: Highlight; }
}

/* ---- What it is: a quiet (i) beside last time ---- */
.info { flex: none; width: 2.2rem; height: 2.2rem; margin: -0.3rem 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.info svg { width: 1.15rem; height: 1.15rem; }
.info:hover { color: var(--ink); background: var(--field); }
.missed { font-size: var(--t-small); color: var(--soft); margin: 0.4rem 0; }
.missed b { color: var(--ink); font-weight: 500; }