/* Type scale: 12 small · 15 body · 20 titles · 32 big numbers · 48 the splash.
   Chart axis and month labels are 11; inputs stay at 16 so iPhones do not zoom in on them.
   Keep new text to these sizes. */
:root {
  --acc: var(--mu);
  --bg: #f6f5f1;
  --card: #fff;
  --tx: #1d1d1b;
  --mu: #6b6a64;
  --bd: #e3e1d9;
  --bench: #d9534f;
  --dead: #2b7a78;
  --squat: #d98e04;
  /* lift colours as text: same hue, dark enough to read on white (OKLCH lightness 0.55) */
  --bench-ink: #c23e3c;
  --dead-ink: #2b7a78;
  --squat-ink: #9d6501;
  /* page tint while viewing the other person: each colour's hue, very light (OKLCH 0.93) */
  --tint-bench: #ffd9d4;
  --tint-dead: #d5eeed;
  --tint-squat: #ffe3c2;
  --tint-vol: #dae7ff;
  /* text on a profile colour (the Me | Bro switch) */
  --on-bench: #fff;
  --on-dead: #fff;
  --on-squat: #141413;
  --on-vol: #fff;
  --vol: #4a5fc1;
  --b1: #2c3a8a;
  --b3: #a9b5ea;
  --good: #3f9a4f;
  --rbg: #1f3328;
  --rbd: #1f3328;
  --rtx: #f3f6f1;
  --rbtn: #2a4436;
  --rring: #36523f;
  --m1: #b8615e;
  --m2: #3d8784;
  --m3: #a9781e;
  --m4: #8c8a83;
  --m5: #bdbbb4;
  --m6: #a8a69f;
  --m7: #d0cec8;
  --t-iron: #6b717b;
  --t-bronze: #a8673a;
  --t-silver: #858b96;
  --t-gold: #94790f;
  --push: #c4506e;
  --pull: #2e7fa8;
  --t-plat: #2b968d;
  --t-dia: #7660d4;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141413;
    --card: #1e1e1c;
    --tx: #efeee8;
    --mu: #9a988f;
    --bd: #2f2e2a;
    --bench: #ef7b77;
    --dead: #5cc0bd;
    --squat: #f0b440;
    --bench-ink: var(--bench);
    --dead-ink: var(--dead);
    --squat-ink: var(--squat);
    /* dark tints: a hint above the dark background (OKLCH 0.205), colour kept very faint */
    --tint-bench: #201312;
    --tint-dead: #0d1a19;
    --tint-squat: #1c160b;
    --tint-vol: #141621;
    --on-bench: #141413;
    --on-dead: #141413;
    --on-squat: #141413;
    --on-vol: #141413;
    --vol: #8d9cf0;
    --b1: #c5cdfa;
    --b3: #4d5a9e;
    --good: #6cc47c;
    --rbg: #16271d;
    --rbd: #2c4a37;
    --rtx: #eef3ee;
    --rbtn: #1f3528;
    --rring: #2a4434;
    --m1: #d99a97;
    --m2: #7fb8b5;
    --m3: #d6b071;
    --m4: #b8b5ad;
    --m5: #7d7b75;
    --m6: #97958e;
    --m7: #64625d;
  --t-iron: #8f959e;
  --t-bronze: #c98a5a;
  --t-silver: #c3c7cf;
  --t-gold: #e6cf6e;
  --push: #e8879f;
  --pull: #5fb0d6;
  --t-plat: #9fe3dc;
  --t-dia: #b9a7ff;
  }
}
:root[data-theme="dark"] {
  --bg: #141413;
  --card: #1e1e1c;
  --tx: #efeee8;
  --mu: #9a988f;
  --bd: #2f2e2a;
  --bench: #ef7b77;
  --dead: #5cc0bd;
  --squat: #f0b440;
  --bench-ink: var(--bench);
  --dead-ink: var(--dead);
  --squat-ink: var(--squat);
  --tint-bench: #201312;
  --tint-dead: #0d1a19;
  --tint-squat: #1c160b;
  --tint-vol: #141621;
  --on-bench: #141413;
  --on-dead: #141413;
  --on-squat: #141413;
  --on-vol: #141413;
  --vol: #8d9cf0;
  --b1: #c5cdfa;
  --b3: #4d5a9e;
  --good: #6cc47c;
  --rbg: #16271d;
  --rbd: #2c4a37;
  --rtx: #eef3ee;
  --rbtn: #1f3528;
  --rring: #2a4434;
  --m1: #d99a97;
  --m2: #7fb8b5;
  --m3: #d6b071;
  --m4: #b8b5ad;
  --m5: #7d7b75;
  --m6: #97958e;
  --m7: #64625d;
  --t-iron: #8f959e;
  --t-bronze: #c98a5a;
  --t-silver: #c3c7cf;
  --t-gold: #e6cf6e;
  --push: #e8879f;
  --pull: #5fb0d6;
  --t-plat: #9fe3dc;
  --t-dia: #b9a7ff;
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font:
    15px/1.5 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
main {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}
h1 {
  font-size: 32px;
  margin: 0 0 4px;
}
p.sub {
  color: var(--mu);
  margin: 0 0 20px;
}
.totop::after {
  content: "";
  position: absolute;
  inset: -9px;
}
.totop {
  position: fixed;
  right: max(22px, env(safe-area-inset-right, 0px));
  bottom: max(40px, calc(var(--sab) + 24px));
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--tx);
  color: var(--bg);
  border: 1px solid var(--tx);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0.2s;
}
.totop.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (max-width: 560px) {
  .totop {
    right: auto;
    left: 50%;
    margin-left: -20px;
    bottom: max(28px, calc(var(--sab) + 16px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .totop {
    transition: none;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--bd);
}
.top > div + div {
  height: 39px;
}
.sec {
  font-size: 20px;
  margin: 32px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--bd);
}
.sec.first {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.k,
.card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px;
}
.k b {
  display: block;
  font-size: 32px;
}
.k span {
  color: var(--mu);
  font-size: 12px;
}
.k i {
  font-style: normal;
  font-size: 12px;
}
.card {
  margin-bottom: 18px;
}
.card h2 {
  font-size: 15px;
  margin: 0 0 8px;
}
.card p {
  margin: 0 0 10px;
  color: var(--mu);
  font-size: 12px;
}
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
button {
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  border-radius: 20px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
button.on {
  background: var(--tx);
  color: var(--bg);
}
.priv {
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 16px;
}
.priv[hidden] {
  display: none;
}
.priv h1 {
  font-size: 20px;
  margin: 0 0 8px;
}
.priv p {
  color: var(--mu);
  margin: 0 0 16px;
}
.ld {
  text-align: center;
}
html.thfade body,
html.thfade .priv,
html.thfade .priv * {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    fill 0.35s ease;
}
.priv.ld {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 24px;
  padding-bottom: 24px;
}
/* golden-ratio placement: the free space splits 0.382 above, 0.618 below */
.priv.ld::before {
  content: "";
  flex: 0.2 1 0;
}
.priv.ld::after {
  content: "";
  flex: 0.8 1 0;
}
.ld .brand {
  margin: 0 0 34px;
}
.ld .bn {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ld.em .brand {
  margin-bottom: 22px;
}
.ld.em h1 {
  font-size: 20px;
}
.ld .brand h1 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.ld .brand p {
  margin: 8px 0 0;
  font-size: 20px;
  color: var(--mu);
  font-style: italic;
}
.ld .ldt {
  margin: 0;
  font-size: 15px;
  color: var(--mu);
}
.ld svg {
  display: block;
  margin: 0 auto 22px;
  width: 270px;
  max-width: 80%;
}
.ld.em h1 {
  font-size: 32px;
}
.ld.em p {
  font-size: 15px;
}
.em .imp-row {
  justify-content: center;
}
.em .imp-out {
  text-align: center;
}
.em .imp-out.warn {
  border-left: 0;
  padding-left: 0;
}
.imp-go,
.imp-cancel {
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  border-radius: 20px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.imp-go:disabled {
  opacity: 0.45;
  cursor: default;
}
.em p {
  max-width: 420px;
  margin: 0 auto 18px;
}
.ld .pl {
  transform-box: fill-box;
  opacity: 0;
  transform: translateX(var(--dx));
}
.ld .pl.l {
  --dx: -22px;
  --ov: 1.5px;
}
.ld .pl.r {
  --dx: 22px;
  --ov: -1.5px;
}
.ld .p1 {
  fill: var(--bench);
}
.ld .p2 {
  fill: var(--dead);
}
.ld .p3 {
  fill: var(--squat);
}
/* Loading: an empty bar that breathes while the data loads. When everything is ready the
   plates slide on, biggest first, and the app fades in. */
.ld .bar {
  animation: ldb 1.3s ease-in-out infinite alternate;
}
@keyframes ldb {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.ld.ld-go .bar {
  animation: none;
}
/* the plates snap on quickly, biggest first, each knocking a hair past its spot before it settles.
   The bar itself never moves. The full bar then stays up a moment so "Bar loaded" can be read.
   Tapping the screen skips straight to the app. */
.ld.ld-go .pl {
  animation: ldin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.ld.ld-go .p2 {
  animation-delay: 0.12s;
}
.ld.ld-go .p3 {
  animation-delay: 0.24s;
}
@keyframes ldin {
  0% {
    opacity: 0;
    transform: translateX(var(--dx));
  }
  45% {
    opacity: 1;
  }
  72% {
    transform: translateX(var(--ov));
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* while the app is built underneath, the loading screen covers it */
.priv.ld-over {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  /* cover the whole window, however wide; the content stays in the middle column */
  max-width: none;
  margin: 0;
  padding-left: max(16px, calc((100% - 528px) / 2));
  padding-right: max(16px, calc((100% - 528px) / 2));
  transition: opacity 0.3s ease-out;
}
.priv.ld-out {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ld .bar {
    animation: none;
  }
}
.rowx {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0 0 0 auto;
  border: 0;
  background: none;
  color: var(--mu);
  line-height: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rowx:hover {
  color: var(--tx);
  background: var(--bd);
}
.imp {
  margin-top: 14px;
}
.imp.pv > .imp-row {
  display: none;
}
.imp.pv .imp-out {
  margin-top: 0;
}
.imp-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.imp-btn {
  display: inline-block;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.imp-del {
  border: 0;
  background: none;
  color: var(--mu);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 5px 6px;
}
.imp-del:hover {
  color: var(--tx);
}
.imp-conf {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--bd);
  border-radius: 20px;
  background: var(--bg);
  color: var(--tx);
  width: 120px;
}
.imp-out {
  margin-top: 10px;
}
.imp-out.warn {
  border-left: 3px solid var(--tx);
  padding-left: 10px;
}
#prt th {
  border-bottom: 2px solid var(--c, var(--bd));
}
.tabs button[data-c="bench"] {
  --c: var(--bench);
}
.tabs button[data-c="dead"] {
  --c: var(--dead);
}
.tabs button[data-c="squat"] {
  --c: var(--squat);
}
.tabs button[data-c]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--c);
}
.tabs button[data-c].on {
  background: color-mix(in srgb, var(--c) 24%, var(--bg));
  color: var(--tx);
  border-color: var(--c);
}
.up {
  color: var(--good);
}
.dn {
  color: var(--mu);
}
.ins {
  margin: 0 0 16px;
  padding-left: 18px;
}
.ins li {
  margin: 6px 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th,
td {
  text-align: left;
  padding: 5px 6px;
  border-bottom: 1px solid var(--bd);
}
th {
  color: var(--mu);
  font-weight: 500;
}
.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.scroll {
  overflow-x: auto;
}
dialog {
  max-width: 640px;
  width: calc(100% - 32px);
  max-height: 80vh;
  overflow: auto;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--card);
  color: var(--tx);
  padding: 16px;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
/* a sheet gets focus back when a sheet on top of it closes; the sheet itself never needs a focus ring
   (the buttons inside keep theirs) */
dialog:focus,
dialog:focus-visible {
  outline: none;
}
dialog {
  overscroll-behavior: contain;
}
html {
  scrollbar-gutter: stable;
}
@media (hover: hover) and (pointer: fine) {
  html {
    height: 100%;
    overflow: hidden;
    scrollbar-gutter: auto;
  }
  body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 54px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}
html:has(dialog[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}
.dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dh h2 {
  margin: 0;
  font-size: 20px;
}
.pg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.pc {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card .pc {
  background: var(--bg);
}
.note {
  font-size: 12px;
  color: var(--mu);
}
.bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bd);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
}
input[type="number"] {
  width: 90px;
  margin-left: 6px;
  padding: 4px 6px;
  border: 1px solid var(--bd);
  border-radius: 6px;
  background: var(--bg);
  color: var(--tx);
  font: inherit;
}
.nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bd);
}
.nav a {
  color: var(--mu);
  text-decoration: none;
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
}
details.sect {
  margin: 0;
}
summary.sec {
  cursor: pointer;
  list-style: none;
}
summary.sec::-webkit-details-marker {
  display: none;
}
summary.sec::before {
  content: "▸ ";
}
details[open] > summary.sec::before {
  content: "▾ ";
}
.nw {
  border-left: 4px solid var(--mu);
}
.bg {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}
.pc.fl {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--c) 8%, var(--card));
  border-color: color-mix(in srgb, var(--c) 22%, var(--bd));
}
.pc.fl > * {
  position: relative;
  z-index: 1;
}
.pc.fl > .fill {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--p);
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--c) 6%, transparent),
    color-mix(in srgb, var(--c) 26%, transparent)
  );
}
.pc.fl.fh > .fill {
  top: 0;
  right: auto;
  height: auto;
  width: var(--p);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c) 6%, transparent),
    color-mix(in srgb, var(--c) 26%, transparent)
  );
}
#expb,
#datab {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#theme {
  box-sizing: border-box;
  position: relative;
  width: 56px;
  height: 32px;
  padding: 0;
  border-radius: 16px;
  background: var(--bd);
  border: 1px solid var(--mu);
}
#knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 13px; /* pill corners, so it stretches cleanly when it flips */
  background: var(--tx);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s;
}
#theme[aria-checked="true"] #knob {
  transform: translateX(24px);
}
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 560px) {
  .grid4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.k {
  min-height: 86px;
}
.dc {
  display: flow-root;
}
.dc::before {
  content: "";
  display: block;
  height: 16px;
}
details.sect > summary.sec {
  margin-bottom: 0;
}
.nav a.on {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.nav a.has::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-left: 6px;
  vertical-align: 1px;
}
.lg-ban {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 10px 14px;
  margin: -6px 0 18px;
  font-size: 15px;
}
.lg {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#logv > .lg {
  margin-bottom: 28px;
}
.lg h2 {
  font-size: 20px;
  margin: 0;
}
.lg .card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lg .note {
  font-size: 12px;
}
.lg-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg-k {
  font-size: 12px;
  font-weight: 600;
  color: var(--mu);
}
.lg-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}
.lg-it > .lg-btns {
  flex: none;
}
.lg-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--mu);
  font-size: 15px;
  line-height: 1.3;
}
.lg-hint b {
  color: var(--tx);
}
.lg-hint > span {
  flex: 1;
  min-width: 0;
}
.lg-hint.go {
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  background: color-mix(in srgb, var(--good) 10%, var(--card));
  color: var(--good);
}
.lg-hint .lg-use {
  flex: none;
}
.lg-prow {
  display: flex;
  gap: 6px;
  overflow: hidden;
}
.lg-prow.all {
  flex-wrap: wrap;
}
.lg-pchip {
  flex: none;
  max-width: 70%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bg);
  color: var(--tx);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 11px;
  cursor: pointer;
}
.lg-pchip .lg-dot {
  width: 8px;
  height: 8px;
}
.lg-ptx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.lg-pn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-psub {
  display: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--mu);
  white-space: nowrap;
}
.lg-prow.rich .lg-psub {
  display: block;
}
.lg-prow.fill .lg-pchip {
  flex: 1 1 auto;
}
.lg-prow.rich .lg-pchip {
  justify-content: flex-start;
}
.lg-prow.fill .lg-pmore {
  flex: none;
  justify-content: center;
}
.lg-pmore {
  flex: none;
  color: var(--mu);
  font-weight: 500;
}
.lg-pdots {
  display: flex;
  gap: 3px;
  flex: none;
}
.pr-dh {
  align-items: center;
  gap: 8px;
}
.pr-dh h2 {
  flex: 1;
  text-align: center;
  margin: 0;
}
.pr-dh .imp-go {
  padding: 6px 16px;
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  font-weight: 600;
}
.pr-copied {
  color: var(--good);
  border-color: var(--good);
}
.pr-card,
.pr-ex {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--bg);
  padding: 10px 12px;
  margin-top: 10px;
}
.pr-hd {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pr-hd b {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.pr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.pr-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.pr-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pr-st {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pr-sp {
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--card);
}
.pr-sp button {
  width: 36px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 20px;
  padding: 0;
  cursor: pointer;
}
.pr-sp button:disabled {
  opacity: 0.35;
  cursor: default;
}
.pr-sp span {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pr-addb {
  margin-top: 12px;
  width: 100%;
}
.pr-addbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.pr-pick {
  gap: 10px;
}
.lg-meta:has(.lg-mnw) {
  row-gap: 0;
}
.lg-mnw {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lg-mdots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 1px;
}
.lg-mdots .lg-dot {
  margin: 0;
}
.lg-hd {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lg-hd h2 {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lg-tt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-ib {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: -8px;
  border: 0;
  background: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tx);
}
.lg-ib:hover {
  background: var(--bd);
}
.lg-big {
  height: 52px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--tx);
  background: var(--tx);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.lg-big:disabled {
  opacity: 0.4;
  cursor: default;
}
.lg-sec {
  min-height: 48px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--bd);
  background: var(--card);
  color: var(--tx);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0 12px;
}
.lg-dash {
  border-style: dashed;
  border-color: var(--mu);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lg-link {
  align-self: center;
  border: 0;
  background: none;
  color: var(--mu);
  text-decoration: underline;
  font: inherit;
  font-size: 15px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 8px;
}
.lg-link:hover {
  color: var(--tx);
}
.lg-pill {
  flex: none;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  border-radius: 20px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lg-name {
  display: flex;
  align-items: center;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg);
  height: 50px;
  overflow: hidden;
}
.lg-name:focus-within {
  border-color: var(--tx);
}
.lg-name input {
  border: 0;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 16px;
  height: 100%;
  outline: none;
  min-width: 0;
  padding: 0;
}
#lgnum {
  width: 3.2ch;
  padding-left: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-sizing: content-box;
}
.lg-name span {
  font-weight: 600;
  font-size: 20px;
  padding: 0 8px 0 1px;
}
#lgname {
  flex: 1;
  padding-right: 12px;
}
.lg-list {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
}
.lg-flat {
  border: 0;
  border-radius: 0;
  background: none;
}
.lg-it {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 14px;
  border: 0;
  border-bottom: 1px solid var(--bd);
  border-radius: 0;
  background: var(--card);
  color: var(--tx);
  font: inherit;
  text-align: left;
}
.lg-flat .lg-it {
  padding: 6px 0;
  background: none;
}
button.lg-it {
  cursor: pointer;
}
button.lg-it:hover {
  background: color-mix(in srgb, var(--bd) 35%, var(--card));
}
.lg-it:last-child {
  border-bottom: 0;
}
.lg-it > div {
  flex: 1;
  min-width: 0;
}
.lg-it .note {
  line-height: 1.3;
}
.lg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lg-plus {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--bd);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lg-dot {
  flex: none;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bd);
}
.lg-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--card);
  padding: 0 12px;
}
.lg-search:focus-within {
  border-color: var(--tx);
}
.lg-search input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--tx);
  outline: none;
}
.lg-g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.lg-g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lg-q {
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: var(--card);
  color: var(--tx);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  cursor: pointer;
}
.lg-tile {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 86px;
  text-align: left;
  font: inherit;
  color: var(--tx);
  cursor: pointer;
}
.lg-tile b {
  font-size: 20px;
}
.lg-tile span {
  font-size: 12px;
  color: var(--mu);
}
.lg-tile.wide {
  grid-column: 1/-1;
  min-height: 54px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.lg-q:hover,
.lg-tile:hover {
  border-color: var(--mu);
}
.lg-chip {
  flex: none;
  font-size: 12px;
  color: var(--mu);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 2px 10px;
}
.lg-hint {
  flex-direction: row !important;
  align-items: center;
}
.lg-hint > div {
  flex: 1;
  min-width: 0;
}
.lg-use {
  flex: none;
  height: 38px;
  border-radius: 20px;
  border: 1px solid var(--tx);
  background: var(--tx);
  color: var(--bg);
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.lg-set {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px 0 14px;
  border-bottom: 1px solid var(--bd);
  font-variant-numeric: tabular-nums;
}
.lg-set:last-child {
  border-bottom: 0;
}
/* tap a logged set to edit it */
.lg-tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lg-tap:active {
  background: color-mix(in srgb, var(--tx) 6%, transparent);
}
.lg-set.on {
  background: color-mix(in srgb, var(--tx) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--tx);
}
.lg-edit {
  border-color: var(--tx) !important;
}
.lg-edit .lg-g2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
}
.lg-edit .lg-g2 .lg-sec {
  margin: 0;
  height: 100%;
}
.lg-set > span:first-child {
  font-weight: 600;
}
.lg-set.wu {
  color: var(--mu);
}
.lg-sh {
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mu);
}
.lg-x {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--mu);
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lg-x:hover {
  background: var(--bd);
  color: var(--tx);
}
.lg-ed {
  background: var(--card);
  border: 2px solid var(--tx);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lg-seg {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 2px;
}
.lg-seg button {
  white-space: nowrap;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--mu);
  padding: 5px 12px;
  font-size: 12px;
}
.lg-seg button.on {
  background: var(--tx);
  color: var(--bg);
}
.lg-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lg-step button {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  font-size: 32px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.lg-step input {
  flex: 1;
  min-width: 0;
  height: 52px;
  text-align: center;
  font: inherit;
  font-size: 32px;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.lg-step input:focus {
  outline: 2px solid var(--bd);
}
.lg-ex {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px;
  font: inherit;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}
.lg-ex > div {
  flex: 1;
  min-width: 0;
}
.lg-ex:hover {
  border-color: var(--mu);
}
.lg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.lg-chips span {
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.lg-title {
  font: inherit;
  font-size: 32px;
  font-weight: 700;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  color: var(--tx);
  padding: 2px 0;
  width: 100%;
  outline: none;
  border-radius: 0;
}
.lg-title:focus,
.lg-title:hover {
  border-bottom-color: var(--mu);
}
main {
  max-width: 720px;
  padding-bottom: calc(132px + var(--sab));
}
@media (hover: hover) and (pointer: fine) {
  main {
    padding-bottom: 68px;
  }
}
.top {
  margin: 0;
  padding: 0;
  border: 0;
  height: 0;
  overflow: hidden;
}
main {
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}
.top > div + div {
  height: auto;
}
.hd-t {
  flex: 1;
  min-width: 0;
}
.hd-t h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hd-t #fresh {
  display: none;
}
.who {
  flex: none;
  display: flex;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 2px;
}
.who button {
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--mu);
  padding: 6px 13px;
  font-size: 12px;
}
.who button.on {
  background: var(--tx);
  color: var(--bg);
}
body.other .who button.on {
  background: var(--tc, var(--vol));
  color: var(--tcx, var(--card));
}
.hd-ib {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bd);
  background: var(--card);
  color: var(--tx);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.viewban {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--vol) 13%, var(--card));
  border: 1px solid color-mix(in srgb, var(--vol) 40%, var(--bd));
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  margin: 0 0 14px;
}
.viewban span {
  flex: 1;
}
.viewban button {
  border: 0;
  background: none;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
  text-decoration: underline;
}
details.sect > summary.sec {
  display: none;
}
.dc::before {
  height: 0;
}
.cgchips {
  display: flex;
  gap: 6px;
  margin: 0 -16px 14px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  --fl: 0px;
  --fr: 40px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fl),
    #000 calc(100% - var(--fr)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fl),
    #000 calc(100% - var(--fr)),
    transparent
  );
}
.cgchips::-webkit-scrollbar {
  display: none;
}
.cgchips button {
  flex: none;
  padding: 7px 14px;
  font-size: 12px;
  background: var(--card);
}
.cx .cxc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.cx-tk {
  display: flex;
  flex-direction: column;
}
.cx-tk b {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}
.cx-l {
  font-size: 12px;
}
.cx-seg.cx-lc {
  display: flex;
  align-self: stretch;
}
.cx-seg.cx-lc button {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .cx-seg.cx-lc button {
    gap: 4px;
    padding: 5px 4px;
    font-size: 12px;
  }
}
.cx-lc .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.tdot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.tdot,
.cx-lc .dot.all,
.tabs button[data-c="all"]::before {
  background: conic-gradient(
    var(--bench) 0 120deg,
    var(--dead) 0 240deg,
    var(--squat) 0
  );
}
.tabs button[data-c="all"] {
  --c: var(--tx);
}
.cx-ch {
  display: flex;
  gap: 6px;
  height: 220px;
}
.cx-ax {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mu);
  padding-bottom: 20px;
  text-align: right;
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}
.cx-plot {
  position: relative;
  flex: 1;
  display: flex;
  gap: 3px;
  border-bottom: 1px solid var(--bd);
  padding-bottom: 20px;
  margin-bottom: -1px;
}
.cx-plot {
  --h: 200px;
}
.cx-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  position: relative;
  height: 100%;
}
.cx-stk {
  width: min(28px, 80%);
  display: flex;
  flex-direction: column-reverse;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  opacity: 0.6;
}
.cx-stk i {
  display: block;
  width: 100%;
}
.cx-col.on .cx-stk {
  opacity: 1;
  outline: 2px solid var(--tx);
  outline-offset: 2px;
}
/* an empty month or week: the selection is a plain line on the baseline, not an outline around nothing */
.cx-col.on .cx-stk.z {
  height: 3px !important;
  outline: 0;
  border-radius: 2px;
  background: var(--tx);
}
.cx-ml {
  position: absolute;
  bottom: -19px;
  font-size: 11px;
  color: var(--mu);
}
.cx-col.on .cx-ml {
  color: var(--tx);
  font-weight: 700;
}
.cx-tg {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}
/* the dashes are drawn here, 6 px on and 4 px off, so a gap around a PR ring can take whole dashes only */
.cx-tg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px);
}
/* with PR rings on the line it is drawn in pieces instead, each ending on a whole dash */
.cx-tg.cut::before {
  display: none;
}
.cx-tg i {
  position: absolute;
  top: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px);
}
.cx-tg span {
  position: absolute;
  left: 0;
  bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  background: var(--card);
  padding: 0 4px;
  color: var(--ci, var(--c));
}
.cx-plot .cx-col {
  height: calc(100% + 0px);
}
.cx-plot > .cx-col .cx-stk {
  max-height: 100%;
}
.cx-ro {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
}
.cx-seg {
  display: flex;
  gap: 2px;
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 18px;
  padding: 2px;
}
.cx-seg button {
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--mu);
  padding: 5px 12px;
}
.cx-seg button.on {
  background: var(--tx);
  color: var(--bg);
}
.cx-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 0;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: none;
  color: var(--tx);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.cx-wk {
  display: grid;
  grid-template-columns: 40px repeat(7, minmax(0, 1fr)) 20px;
  align-items: center;
  justify-items: center;
  gap: 4px;
  font-size: 11px;
}
.cx-wk > span:first-child {
  justify-self: start;
}
.cx-wk i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bd);
  box-sizing: border-box;
}
.cx-wk i.on {
  border: 0;
  background-origin: border-box;
}
.cx-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--mu);
}
.cx-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cx-key i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cx-wk i.td {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--tx);
}
.cx-wk b {
  justify-self: end;
  font-size: 12px;
}
.cx-wh span {
  color: var(--mu);
}
.cx-plot .cx-col.on {
  background: none;
  color: inherit;
}
.cx-wks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cgchips button.on {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(54px + var(--sab));
  box-sizing: border-box;
  padding: 0 max(4px, env(safe-area-inset-right, 0px))
    var(--sab) max(4px, env(safe-area-inset-left, 0px));
  background: var(--card);
  border-top: 0;
  box-shadow: 0 -1px 0 var(--bd);
  transform: translateZ(0);
}
.tabbar button {
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mu);
  font-size: 12px;
  padding: 9px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
}
.tabbar button.on {
  color: var(--tx);
  font-weight: 600;
}
.tabbar .tb-log {
  color: var(--tx);
  font-weight: 700;
  font-size: 12px;
  padding-top: 0;
}
.tb-big {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 62px;
  height: 62px;
  margin-top: -24px;
  border-radius: 50%;
  background: var(--tx);
  color: var(--bg);
  border: 7px solid var(--card);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.tabbar .tb-log.on .tb-big {
  box-shadow:
    0 0 0 3.5px var(--tx),
    0 4px 12px rgba(0, 0, 0, 0.22);
}
.tb-log.has .tb-big::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--good);
  border: 2px solid var(--card);
}
.tabbar button > span:not(.tb-big) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.tabbar button:not(.tb-log) {
  position: relative;
  justify-content: center;
  padding: 0 0 4px;
}
.tabbar button:not(.tb-log) > svg {
  width: 28px;
  height: 28px;
}
.tabbar button.on:not(.tb-log)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3.5px;
  height: 3.5px;
  margin-left: -1.75px;
  border-radius: 50%;
  background: var(--tx);
}
.tabbar .tb-log {
  justify-content: flex-start;
}
.tabbar .tb-big {
  /* 7px ring keeps the same 64px light disc as before, so the icon sits where it did */
  width: 78px;
  height: 78px;
  margin-top: -33px;
}
.tabbar .tb-big svg {
  width: 32px;
  height: 32px;
}
.tabbar button:focus-visible {
  outline: 2px solid var(--tx);
  outline-offset: -2px;
}
.contbar {
  position: fixed;
  z-index: 19;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--sab) + 94px);
  max-width: 696px;
  margin: 0 auto;
  height: 52px;
  box-sizing: border-box;
  border: 0;
  border-radius: 14px;
  background: var(--tx);
  color: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 15px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.contbar .cdot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
}
.contbar .ct {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.totop {
  bottom: calc(var(--sab) + 148px) !important;
  left: auto !important;
  right: max(16px, env(safe-area-inset-right, 0px)) !important;
  margin-left: 0 !important;
}
dialog.sheet {
  margin: auto auto 0;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  box-sizing: border-box;
  border: 0;
  border-radius: 20px 20px 0 0;
  padding: 10px 20px calc(24px + var(--sab));
}
.sheet[open] {
  animation: shIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet[open]::backdrop {
  animation: bdIn 0.3s ease-out;
}
.sheet.closing::backdrop {
  animation: bdOut 0.22s ease-in forwards;
}
@keyframes shIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes bdIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bdOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sheet[open],
  .sheet[open]::backdrop,
  .sheet.closing::backdrop {
    animation: none;
  }
}
.sheet .grab,
.sheet .dh {
  touch-action: none;
  cursor: grab;
}
.grab {
  display: block;
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--bd);
  margin: 0 auto 10px;
}
.cl-d {
  font-size: 15px;
  margin: 14px 0 4px;
  color: var(--mu);
  font-weight: 600;
}
.cl-d:first-child {
  margin-top: 0;
}
.cl-l {
  margin: 0 0 4px;
}
.cl-l li {
  font-size: 15px;
}
.newdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  margin-left: 4px;
  vertical-align: 1px;
}
.newdot[hidden] {
  display: none;
}
#menu #newb,
#prof #newb,
#prof #exb {
  width: 100%;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--tx);
  border: 0;
  border-bottom: 1px solid var(--bd);
  display: flex;
  padding: 6px 2px;
}
/* ---------- Profile: you and your Bro, then Training and Settings groups ---------- */
.pf-card {
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.pf-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
.pf-link {
  position: absolute;
  top: 40px;
  left: calc(25% + 48px);
  right: calc(25% + 48px);
  height: 4px;
  border-radius: 2px;
  background: var(--bd);
}
.pf-p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 12px;
  color: var(--tx);
  font: inherit;
}
.pf-n {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  max-width: 100%;
}
.pf-n b {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-av {
  position: relative;
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: #141413;
}
.pf-av img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pf-av.pf-ph {
  padding: 3px;
  box-sizing: border-box;
}
.pf-av.pf-ph img {
  border: 2.5px solid var(--card);
  box-sizing: border-box;
}
.pf-xl {
  width: 112px;
  height: 112px;
  font-size: 46px;
}
.pf-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tx);
  color: var(--bg);
  border: 3px solid var(--card);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pfpair .who {
  display: flex;
}
#pfpair .who button {
  flex: 1;
}
.pf-gl {
  font-size: 12px;
  font-weight: 400;
  color: var(--mu);
  margin: 16px 4px 6px;
}
.pf-c {
  padding: 4px 16px;
}
.pf-c > .mrow:last-child {
  border-bottom: 0 !important;
}
#menuwho {
  text-align: center;
  margin: 14px 8px 0 !important;
}
.pf-save {
  height: 36px;
  border-radius: 18px;
  border: 0;
  background: var(--tx);
  color: var(--bg);
  font-weight: 600;
  font-size: 15px;
  padding: 0 16px;
}
.pf-save:disabled {
  opacity: 0.6;
}
.pf-ed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}
.pf-pb {
  display: flex;
  gap: 8px;
}
.pf-pb button {
  height: 34px;
  border-radius: 17px;
  font-size: 15px;
  padding: 0 14px;
}
.pf-pb button[hidden] {
  display: none;
}
#pfrm {
  color: var(--mu);
}
.pf-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-fld {
  display: flex;
  align-items: center;
  height: 48px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg);
  padding: 0 12px;
  gap: 8px;
}
.pf-fld input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 16px;
}
.pf-fld:focus-within {
  border-color: var(--tx);
}
.pf-cl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.pf-sw {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.pf-sw button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  padding: 0;
}
.pf-sw button.on {
  outline: 2px solid var(--tx);
  outline-offset: 2px;
}
.pf-err {
  color: var(--bench-ink);
  text-align: center;
  margin: 12px 0 0;
}
.pf-err[hidden] {
  display: none;
}
/* the crop screen fills the whole screen */
dialog.crop {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: #000;
  color: #efeee8;
  display: none;
  flex-direction: column;
}
dialog.crop[open] {
  display: flex;
}
.crop::backdrop {
  background: #000;
}
.cr-hd {
  flex: none;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) 16px 0;
}
.cr-hd b {
  font-size: 20px;
}
.cr-hd .pf-save {
  background: #efeee8;
  color: #141413;
}
.cr-tx {
  border: 0;
  background: none;
  color: #efeee8;
  font-size: 15px;
  padding: 8px 0;
}
.cr-st {
  position: relative;
  flex: 1;
  min-height: 240px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.cr-st img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  max-width: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.cr-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #efeee8;
  box-sizing: border-box;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  pointer-events: none;
}
.cr-tip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-size: 12px;
  white-space: nowrap;
  background: rgba(20, 20, 19, 0.75);
  border-radius: 14px;
  padding: 4px 12px;
  pointer-events: none;
}
.cr-ft {
  flex: none;
  padding: 18px 24px calc(22px + var(--sab));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cr-z {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9a988f;
}
.cr-z input {
  flex: 1;
  accent-color: #efeee8;
  height: 28px;
}
.cr-pv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cr-pv canvas {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  outline: 1px solid #2f2e2a;
}
.cr-pv .note {
  max-width: 190px;
  line-height: 1.3;
}
.ex-q {
  margin: 0 0 10px;
}
.ex-add {
  margin-bottom: 4px;
}
.ex-g {
  font-size: 12px;
  color: var(--mu);
  font-weight: 600;
  margin: 16px 0 4px;
}
.ex-r {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  border-bottom: 1px solid var(--bd);
}
.ex-n {
  flex: 1;
  min-width: 0;
  font-size: 15px;
}
.ex-del {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 0;
}
.ex-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd);
}
.ex-form input,
.ex-form select {
  font: inherit;
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg);
  color: var(--tx);
}
.ex-msg {
  margin: 0 0 8px;
  color: var(--tx);
}
.mrow {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--bd);
  border-radius: 0;
  background: none;
  color: var(--tx);
  padding: 6px 2px;
  font-size: 15px;
  text-align: left;
}
.mic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mt b {
  font-weight: 600;
}
#menu #datab,
#menu #expb,
#prof #datab,
#prof #expb {
  width: 100%;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--tx);
  border: 0;
  border-bottom: 1px solid var(--bd);
  display: flex;
  padding: 6px 2px;
}
.lg-lock {
  align-items: center;
  text-align: center;
  padding: 28px 18px !important;
}
.lg-lock .lg-eye {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vol) 15%, var(--card));
  color: var(--vol);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-rest {
  background: var(--rbg);
  color: var(--rtx);
  border: 1px solid var(--rbd);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lg-rest .rsub {
  font-size: 12px;
  opacity: 0.75;
}
.lg-rest .rbody {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lg-rest .ring {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
}
.lg-rest .rbg {
  stroke: var(--rring);
}
.lg-rest .rfg {
  stroke: var(--good);
  transition: stroke-dashoffset 0.25s linear;
}
.lg-rest .rnum {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.lg-rest .rnum b {
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}
.lg-rest .rnum span {
  font-size: 12px;
  opacity: 0.7;
}
.lg-rest .rbtns {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-rest .rbtns button {
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--rring);
  background: var(--rbtn);
  color: var(--rtx);
  padding: 0 10px;
}
.lg-rest .rbtns .rskip {
  background: var(--rtx);
  color: var(--rbg);
  border-color: var(--rtx);
}
.lg-rest .rlink {
  align-self: flex-start;
  border: 0;
  background: none;
  color: var(--rtx);
  opacity: 0.85;
  text-decoration: underline;
  font-size: 12px;
  padding: 4px 0;
}
.lg-rest.done #rlab::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 7px;
  vertical-align: 1px;
}
.lg-ready {
  flex-direction: row !important;
  align-items: center;
}
.lg-ready > div {
  flex: 1;
  min-width: 0;
}
.lg-ready .lg-link {
  align-self: center;
  padding: 8px;
}
.contbar .cprog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: color-mix(in srgb, var(--bg) 22%, var(--tx));
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.contbar .cprog i {
  display: block;
  height: 100%;
  background: var(--good);
}
.contbar {
  overflow: hidden;
}
.rset-v {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
}
.rset-v b {
  flex: 1;
  text-align: center;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rstep {
  flex: none;
  width: 58px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  font-size: 15px;
  font-weight: 600;
  padding: 0;
}
.rchips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.rchips button {
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  background: var(--card);
  font-variant-numeric: tabular-nums;
}
.rchips button.on {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  font-weight: 600;
}
#restdlg .dh {
  align-items: flex-start;
}
#restdlg .lg-big {
  height: 52px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--tx);
  background: var(--tx);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
}
#restdlg .lg-link {
  border: 0;
  background: none;
  color: var(--mu);
  text-decoration: underline;
  font-size: 15px;
}
.lg-last {
  gap: 4px !important;
}
.lg-last .lg-chips {
  margin-top: 0;
}
.lg-last .lg-chips span.wu {
  color: var(--mu);
}
.lg-last .lg-chips span.nx {
  border-color: var(--tx);
  font-weight: 600;
}
.lg-scr.on {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  --fl: 0px;
  --fr: 14px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fl),
    #000 calc(100% - var(--fr)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fl),
    #000 calc(100% - var(--fr)),
    transparent 100%
  );
}
.lg-scr.on::-webkit-scrollbar {
  display: none;
}
.lg-scr.on .lg-five {
  display: flex;
}
.lg-scr.on .lg-five > span {
  flex: 0 0 calc((100% - 16px) / 5);
  scroll-snap-align: start;
}
.lg-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.lg-five span {
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 2px 1px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.lg-five i {
  font-style: normal;
}
@media (max-width: 360px) {
  .lg-five {
    gap: 3px;
  }
  .lg-five span {
    line-height: 1.3;
    padding: 3px 1px;
  }
  .lg-five i {
    display: block;
  }
}
.lg-five span.wu {
  color: var(--mu);
  border-style: dashed;
}
.lg-five span.nx {
  border-color: var(--tx);
  font-weight: 600;
}
#tg.pg {
  display: block;
  margin-bottom: 0;
}
#kpis2.grid4 {
  display: block;
  margin-bottom: 6px;
}
.tgc {
  display: flex;
  flex-direction: column;
}
.tgc > .lg-row {
  margin-bottom: 4px;
}
.tgr {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--bd));
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 5%, var(--card));
  color: var(--tx);
  font: inherit;
  padding: 10px 12px;
  margin-top: 8px;
}
.tgr > .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  /* drawn full width and scaled, so the fill glides on the graphics chip */
  width: 100%;
  transform-origin: left;
  transform: scaleX(clamp(0, var(--w, 0), 1));
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .tgr > .fill {
    transition: none;
  }
}
button.tgr {
  cursor: pointer;
}
button.tgr:hover .tgn {
  text-decoration: underline;
}
.tgr .tgn {
  font-weight: 700;
  color: var(--ci, var(--c));
}
.tgr .tgn.tgl {
  color: var(--tx);
}
.ldot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--c);
}
.tgr .tgv b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.lf-list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 7px;
  margin-top: 8px;
}
.lf {
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 1px 10px;
  padding: 9px 12px;
  margin-top: 0;
}
.lf .lf-s {
  text-align: right;
  white-space: nowrap;
}
.lf .lf-at {
  grid-column: 1/-1;
}
.lf .tgv {
  text-align: right;
  white-space: nowrap;
}
.lf-hd {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lf-ed {
  width: 32px;
  height: 32px;
}
#tadlg {
  position: fixed;
  margin: 8px auto auto;
  top: 0;
  max-height: calc(100dvh - 16px);
  overscroll-behavior: contain;
}
.ta-hd {
  position: sticky;
  top: -16px;
  background: var(--card);
  margin: -16px -16px 6px;
  padding: 14px 16px 10px;
  z-index: 1;
  gap: 8px;
}
.ta-hd h2 {
  font-size: 20px;
}
.ta-bt {
  display: flex;
  gap: 6px;
  flex: none;
}
.ta-bt button {
  padding: 6px 14px;
  font-size: 15px;
}
.ta-bt .imp-go {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  font-weight: 600;
}
.ta-r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--bd);
}
.ta-r label {
  font-weight: 700;
  display: flex;
  align-items: center;
}
.ta-r input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  font-size: 16px;
  padding: 6px 10px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg);
  color: var(--tx);
  text-align: right;
}
.ta-r .ta-i {
  grid-column: 1/-1;
}
.ta-use {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--tx);
  text-decoration: underline;
  cursor: pointer;
}
.pl-nudge {
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: color-mix(in srgb, var(--c) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--bd));
  font-size: 15px;
}
.pl-c h2 {
  margin-bottom: 2px;
}
.pl-sub {
  margin: 0 0 6px;
}
.pl-l {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid var(--bd);
}
.pl-l:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.pl-ln {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.pl-ln b {
  font-size: 15px;
}
.pl-lab {
  font-size: 12px;
  color: var(--mu);
  margin-left: 8px;
}
.pl-pill {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  padding: 1px 9px;
  background: var(--bg);
  border: 1px solid var(--bd);
  color: var(--mu);
  white-space: nowrap;
}
.pl-pill.ok {
  background: color-mix(in srgb, var(--good) 16%, var(--card));
  border-color: transparent;
  color: var(--good);
}
.pl-do {
  font-size: 15px;
  line-height: 1.5;
}
.pl-b {
  color: var(--tx);
  font-weight: 600;
}
.pl-a {
  display: flex;
  gap: 2px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
  padding: 5px 0;
}
.pl-a .ldot {
  flex: none;
  transform: translateY(-1px);
}
.tgr.tgt > .fill {
  background: color-mix(in srgb, var(--tx) 11%, transparent);
}
.tgr.tgt {
  border-color: var(--bd);
  background: var(--card);
}
.tgr .bar {
  grid-column: 1/-1;
  height: 7px;
  margin-top: 2px;
}
.tgr .bar i {
  background: var(--c);
}
.wkc .wkd {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 8px;
}
.wkd span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--mu);
}
.wkd i {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bd);
  box-sizing: border-box;
}
.wkd .on i {
  border: 0;
  background-origin: border-box;
}
.wkd .td {
  color: var(--tx);
  font-weight: 700;
}
.wkd .td i {
  border-color: var(--tx);
}
.wkd .on.td i {
  border: 0;
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--tx);
}
#wkc .card,
#prc .card {
  margin-bottom: 14px;
}
.prr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--bd);
}
.prc > .lg-row {
  margin-bottom: 4px;
}
.prr .tgn {
  font-weight: 700;
}
.prr.old .prago {
  color: var(--tx);
  font-weight: 700;
}
.prr .prv,
.prr .prago {
  text-align: right;
  white-space: nowrap;
}
.prr.old .prago::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  margin-left: 6px;
  vertical-align: 1px;
}
.prr b {
  font-variant-numeric: tabular-nums;
}
.pr-hd {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pr-seg button {
  font-size: 12px;
  padding: 4px 10px;
}
/* a toggle's pill sliding to the new choice (segSlide in core.js) */
.sl {
  position: relative;
}
.sl .seg-pill {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  pointer-events: none;
  /* position and width are animated frame by frame in segSlide (core.js); only the colours fade here */
  transition:
    background-color 0.32s,
    border-color 0.32s;
}
.sl button {
  position: relative;
  z-index: 1;
}
.sl button.sl-x {
  background: transparent !important;
  transition: color 0.32s;
}
.sl.pre .seg-pill,
.sl.pre button {
  transition: none;
}
/* Strength chart, switching lift: bars fall, then rise one after another */
.cx-stk {
  transform-origin: 50% 100%;
}
.cx-fall .cx-stk {
  transform: scaleY(0);
  transition: transform 0.18s cubic-bezier(0.5, 0, 0.9, 0.5);
}
.cx-fall .cx-pr,
.cx-fall .cx-tg {
  opacity: 0;
  transition: opacity 0.12s;
}
.cx-rise .cx-stk {
  animation: cx-up 0.42s cubic-bezier(0.3, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.cx-rise .cx-pr,
.cx-rise .cx-tg {
  animation: cx-in 0.25s ease-out both;
  animation-delay: 0.36s;
}
@keyframes cx-up {
  from {
    transform: scaleY(0);
  }
}
@keyframes cx-in {
  from {
    opacity: 0;
  }
}
.lf-fd .note {
  animation: lf-fd 0.36s ease-out;
}
@keyframes lf-fd {
  from {
    opacity: 0.25;
  }
}
.pr-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0 2px;
}
.pr-sec b {
  font-size: 15px;
}
.prr .pr-at {
  grid-column: 1/-1;
}
.prr.prt .tgn {
  font-weight: 700;
}
.prr.prt {
  border-top: 1px dashed var(--bd);
}
.wdone {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  color: var(--tx);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0px);
}
/* a long summary scrolls; its parts keep their full height instead of being squeezed to fit the screen */
.wdone > * {
  flex-shrink: 0;
}
.dn-hd {
  position: relative;
  overflow: hidden;
  background: var(--tx);
  color: var(--bg);
  padding: 22px max(20px, env(safe-area-inset-right, 0px)) 26px
    max(20px, env(safe-area-inset-left, 0px));
}
.dn-conf {
  position: absolute;
  right: -40px;
  top: -10px;
  width: 390px;
  height: 150px;
}
.dn-meta {
  position: relative;
  font-size: 12px;
  opacity: 0.75;
}
.dn-h {
  position: relative;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 6px;
  text-wrap: balance;
}
.dn-sub {
  position: relative;
  font-size: 15px;
  opacity: 0.9;
  margin-top: 6px;
  max-width: 320px;
}
.dn-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 0
    max(16px, env(safe-area-inset-left, 0px));
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}
.dn-body .card {
  margin: 0;
}
.dn-pr {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--bd));
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 6%, var(--card));
  padding: 12px 14px;
}
.dn-pr > .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.dn-pr .dn-t {
  color: color-mix(in srgb, var(--c) 75%, var(--tx));
}
.dn-pr .dn-v b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.dn-st {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dn-st > div {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dn-st b {
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dn-fun {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
}
.dn-fun svg {
  flex: none;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dn-wk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px !important;
}
.dn-wk b {
  white-space: nowrap;
}
.dn-dots {
  display: flex;
  gap: 4px;
  flex: none;
}
.dn-dots span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bd);
  box-sizing: border-box;
}
.dn-dots .on {
  background: var(--good);
  border-color: var(--good);
}
.dn-ex {
  padding: 6px 14px !important;
}
.dn-ex > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--bd);
  font-size: 15px;
}
.dn-ex > div:first-child {
  border-top: 0;
}
.dn-ex .note {
  text-align: right;
}
.dn-ft {
  margin-top: auto;
  padding: 16px max(16px, env(safe-area-inset-right, 0px))
    calc(24px + var(--sab))
    max(16px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.dn-ft .lg-big {
  height: 54px;
  font-size: 20px;
  font-weight: 700;
}
#menu .who,
#prof .who {
  flex: none;
}
.tabbar .tb-more {
  color: var(--mu);
}
.lg-btns {
  flex: none;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#lglist .lg-it {
  min-height: 52px;
}
.lg-okl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mu);
}
.lg-cmp {
  display: flex;
  gap: 8px;
}
.lg-cmp > div {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lg-sel {
  border: 2px solid var(--tx) !important;
}
.lg-msg {
  font-size: 12px;
  color: var(--mu);
  text-align: center;
}
.lg-msg.warn {
  color: var(--tx);
  font-weight: 600;
}
.lg-search input:focus-visible {
  outline: none;
}
.lg button:focus-visible,
.lg input:not(#lgq):not(#lgcx):focus-visible,
.lg-ban button:focus-visible {
  outline: 2px solid var(--tx);
  outline-offset: 2px;
}

/* keep hidden things hidden, whatever their display style */
[hidden]:not([hidden="until-found" i]) {
  display: none !important;
}

/* switching tabs: the new page slides in from the side its tab is on */
main {
  overflow-x: clip;
}
@keyframes tinR {
  from {
    opacity: 0;
    transform: translateX(34px);
  }
}
@keyframes tinL {
  from {
    opacity: 0;
    transform: translateX(-34px);
  }
}
/* the same length and curve as the tab marker's move (main.js sets --tdur per tab change) */
.tin-r {
  animation: tinR var(--tdur, 0.4s) cubic-bezier(0.65, 0, 0.35, 1);
}
.tin-l {
  animation: tinL var(--tdur, 0.4s) cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .tin-r,
  .tin-l {
    animation: none;
  }
}

/* ---------- Charts: five views (Strength, Training, Balance, Exercise, History) ---------- */
.cgchips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  margin: 0 0 14px;
  padding: 3px;
  overflow: visible;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 20px;
  -webkit-mask-image: none;
  mask-image: none;
}
.cgchips button {
  min-width: 0;
  height: 34px;
  padding: 0 2px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--mu);
  font-size: 12px;
  white-space: nowrap;
}
.cgchips button.on {
  background: var(--tx);
  color: var(--bg);
  font-weight: 600;
}
.cx-col .cx-pr {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--c, var(--tx));
  background: var(--card);
  margin-bottom: 10px;
  /* a ring of card colour around the dot, so a target line passing behind it stops short */
  box-shadow: 0 0 0 3px var(--card);
  flex: none;
  position: relative;
  z-index: 2;
}
.bl-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 4px;
}
.bl-r {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  min-height: 28px;
}
.bl-r b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bl-bar {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: var(--bd);
}
.bl-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
}
.bl-bar u {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--tx);
}
.bl-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}
.bl-pp {
  display: flex;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}
.bl-pp span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  min-width: 0;
  white-space: nowrap;
}
.bl-pp span + span {
  justify-content: flex-end;
}
.bl-rb {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  margin-top: 6px;
}
.bl-key {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--mu);
}
.bl-key i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.cx-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--bg);
  padding: 4px 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.cx-pick .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.cx-pt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.cx-pt b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-pick select {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
  font-size: 16px;
}
.cx-pick:focus-within {
  outline: 2px solid var(--tx);
  outline-offset: 2px;
}
.cx-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 6px;
}
.cx-ls {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--bd);
  font-size: 15px;
}
.cx-ls i {
  display: inline-block;
  font-style: normal;
  font-size: 12px;
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 1px 6px;
  margin: 0 4px 4px 0;
  background: var(--bg);
}
table.yt {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 6px;
}
.yt th {
  font-size: 12px;
  color: var(--mu);
  font-weight: 500;
  text-align: right;
  padding: 0 0 6px;
  white-space: nowrap;
}
.yt th .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
}
.yt td {
  text-align: right;
  padding: 7px 0;
  border-top: 1px solid var(--bd);
}
.yt th:first-child,
.yt td:first-child {
  text-align: left;
}
.yt tr.now td {
  font-weight: 700;
}
.yt-pb {
  display: inline-block;
  margin: -2px -7px;
  padding: 2px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent);
}
.yt-wrap {
  position: relative;
}
.yt-1 {
  position: relative;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.yt-1::before {
  content: '';
  position: absolute;
  inset: -10px -8px -10px -22px;
}
.yt th:nth-child(n + 3),
.yt td:nth-child(n + 3) {
  padding-left: 18px;
}
.yt-dot {
  position: absolute;
  left: -13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--mu);
}
.yt-1:has(.yt-pb) .yt-dot {
  left: -18px;
}
.yt-1[aria-expanded='true'] .yt-dot {
  background: var(--tx);
}
.yt-pop {
  position: absolute;
  z-index: 3;
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--tx);
  color: var(--bg);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.yt tr.yt-gap td {
  color: var(--mu);
  font-size: 12px;
}
.yt th:last-child,
.yt td:last-child {
  padding-right: 7px;
}
.cx-two .cx-tk b {
  font-size: 32px;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .cgchips button {
    font-size: 12px;
    padding: 0;
  }
  table.yt {
    font-size: 12px;
  }
  .yt th {
    font-size: 11px;
  }
  .yt th .dot {
    display: none;
  }
}

/* switching between you and Bro with the data already here: a short fade instead of the loading screen */
html.swout main,
html.swout #priv {
  opacity: 0;
  transition: opacity 0.14s ease-in;
}

/* Opened from the iPhone home screen, Brotastic sits inside Claude's frame, which reports no safe area,
   so the tab bar would run under the home indicator. --sab adds that room back (class set in boot.js). */
:root {
  --sab: env(safe-area-inset-bottom, 0px);
}
html.hs {
  --sab: max(env(safe-area-inset-bottom, 0px), 24px);
}

/* ---------- rest timer: a slim bar while it runs, a small button to start it ---------- */
.lg-rbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 6px 6px 12px;
  box-sizing: border-box;
  border-radius: 14px;
  background: var(--rbg);
  color: var(--rtx);
  border: 1px solid var(--rbd);
}
.lg-rbar .rb-ic {
  display: flex;
  opacity: 0.8;
}
.lg-rbar .rb-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lg-rbar .rb-t b {
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lg-rbar .rb-pg {
  height: 4px;
  border-radius: 2px;
  background: var(--rring);
  overflow: hidden;
}
.lg-rbar .rb-pg i {
  display: block;
  height: 100%;
  background: var(--good);
  width: 100%;
  transform-origin: left;
  transform: scaleX(clamp(0, var(--w, 0), 1));
  transition: transform 0.25s linear;
}
.lg-rbar button {
  height: 40px;
  min-width: 46px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--rbd);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.lg-rbar .rb-x {
  background: var(--rtx);
  color: var(--rbg);
  border-color: transparent;
}
.lg-rbar.done .rb-t b {
  font-size: 15px;
}
.lg-rbar.done .rb-pg {
  display: none;
}
.lg-rstart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lg-rgo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--bd);
  background: var(--card);
  color: var(--tx);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.lg-rgo svg {
  color: var(--good);
}
.ra-row {
  border-bottom: 0;
  margin: 6px 0 4px;
}
.ra-sw {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  padding: 0;
  border-radius: 15px;
  border: 1px solid var(--mu);
  background: var(--bd);
  transition: background-color 0.2s;
}
.ra-sw span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tx);
  transition: transform 0.2s;
}
.ra-sw.on {
  background: var(--good);
  border-color: var(--good);
}
.ra-sw.on span {
  transform: translateX(22px);
  background: #fff;
}

.ra-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}

/* ---------- Achievements ---------- */
.ac-card,
.ac-tr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--tx);
  padding: 14px 16px;
  cursor: pointer;
}
.ac-card > .note,
.ac-tr > .note {
  font-size: 12px;
}
.ac-th {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ac-th > svg {
  color: var(--mu);
  flex: none;
}
.ac-tn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ac-tn .note {
  font-size: 12px;
}
.ac-lv {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: var(--t-gold);
  border: 1.5px solid var(--t-gold);
  background: color-mix(in srgb, var(--t-gold) 15%, transparent);
}
.ac-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-gold);
  margin-left: 6px;
  vertical-align: 2px;
}
.ac-dot[hidden] {
  display: none;
}
.ac-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--bd);
  overflow: hidden;
}
.ac-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--t-gold);
  /* slid in from the left rather than widened, so its rounded end keeps its shape */
  width: 100%;
  transform: translateX(calc((clamp(0, var(--w, 0), 1) - 1) * 100%));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ac-bar-l {
  height: 10px;
  border-radius: 5px;
}
.ac-bar-l i {
  background: var(--good);
}
.ac-row {
  display: flex;
  justify-content: space-between;
}
.ac-b {
  position: relative;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-b > span {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
  border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  box-sizing: border-box;
}
.ac-b0 > span {
  color: var(--mu);
  border-color: var(--bd);
  background: transparent;
}
.ac-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ac-ring circle {
  fill: none;
  stroke: var(--bd);
  stroke-width: 3;
}
.ac-ring .ac-rp {
  stroke: var(--good);
  stroke-linecap: round;
  stroke-dasharray: 153.9;
}
.ac-b:has(.ac-ring) > span {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}
.ac-new {
  font-size: 12px;
  font-weight: 700;
  color: var(--card);
  background: var(--t-gold);
  border-radius: 8px;
  padding: 1px 6px;
  vertical-align: 2px;
}
.ac-seg {
  align-self: stretch;
  margin: 2px 0 14px;
}
.ac-seg button {
  flex: 1;
  font: inherit;
  font-size: 12px;
}
.ac-sh .dh .note {
  margin-left: auto;
  margin-right: 12px;
}
#acl {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ac-pips,
.ac-labs {
  display: flex;
  gap: 4px;
}
.ac-pip {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bd);
  overflow: hidden;
}
.ac-pip.on {
  background: var(--c);
}
.ac-pip i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c);
  transform: translateX(calc((clamp(0, var(--w, 0), 1) - 1) * 100%));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ac-labs {
  margin-top: -6px;
}
.ac-labs span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--mu);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-labs span[style] {
  opacity: 1;
}
.ac-cu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--t-gold) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-gold) 40%, transparent);
  font-size: 12px;
}
.ac-past {
  padding: 4px 16px;
}
.ac-py {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bd);
}
.ac-py:last-child {
  border-bottom: 0;
}
.ac-py b {
  width: 40px;
  flex: none;
}
.ac-mds {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.ac-md {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  max-width: 96px;
  white-space: nowrap;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c);
  border-radius: 10px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--c) 13%, transparent);
}
.ac-ft {
  font-size: 12px;
  text-align: center;
  margin: 0;
}
.ac-hid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ac-hg {
  margin: 6px 4px -2px;
}
.ac-h {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 6px 10px;
  line-height: 1.3;
  font: inherit;
  font-size: 12px;
  color: var(--tx);
}
#acl button.ac-h {
  cursor: pointer;
  color: var(--tx);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--t-gold) 45%, var(--bd));
  border-radius: 12px;
}
.ac-h .ac-new {
  position: absolute;
  top: 6px;
  right: 6px;
}
.ac-h .note {
  font-size: 12px;
}
.ac-h:not(.on) {
  opacity: 0.7;
}
.ac-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin: 4px 0 16px;
}
.ac-hero > b {
  font-size: 20px;
  line-height: 1.3;
}
.ac-hero > .note {
  max-width: 300px;
  font-size: 12px;
}
.ac-chip {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border-radius: 10px;
  padding: 2px 9px;
}
.ac-pv {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ac-pv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ac-pv .note {
  font-size: 12px;
}
.ac-lad {
  list-style: none;
  margin: 0;
  padding: 4px 16px;
}
.ac-lad li {
  display: grid;
  grid-template-columns: 12px 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 12px;
  color: var(--mu);
}
.ac-lad li:last-child {
  border-bottom: 0;
}
.ac-lad li.on,
.ac-lad li.nx {
  color: var(--tx);
}
.ac-lad li.on b {
  color: var(--c);
}
.ac-ld {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--bd);
  box-sizing: border-box;
}
.ac-lad li.on .ac-ld {
  background: var(--c);
  border-color: var(--c);
}
.ac-lad li.nx .ac-ld {
  border-color: var(--c);
}
.ac-lad .note {
  font-size: 12px;
  text-align: right;
}
.ac-card,
.ac-tr,
.ac-past,
.ac-h,
.ac-lad {
  margin: 0;
}
.ac-md svg {
  flex: none;
}
/* the list keeps one height, so the All-time | Season | Hidden switch stays put */
#acdlg {
  height: 85vh;
  height: 85dvh;
}
/* the sheet's handle and title row stay at the top while its content scrolls,
   so you can always drag the sheet down to close it */
.sheet > .grab:has(+ .dh) {
  display: none;
}
.sheet > .grab + .dh {
  position: sticky;
  top: -10px;
  z-index: 5;
  background: inherit;
  margin: -10px -20px 10px;
  padding: 25px 20px 10px;
}
.sheet > .grab + .dh::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: var(--bd);
}

/* ---------- Seasonal challenges: the strip on Goals, the teaser, the sheet ---------- */
.chs:empty {
  display: none;
}
.ch-strip,
.ch-tease {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  color: var(--tx);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--bd));
  cursor: pointer;
}
.ch-tease {
  background: transparent;
  border: 1px dashed var(--bd);
  color: var(--mu);
}
.ch-strip > svg,
.ch-tease > svg {
  flex: none;
  color: var(--mu);
}
.ch-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
}
.ch-tease .ch-ic {
  width: 34px;
  height: 34px;
  color: var(--mu);
  background: var(--card);
}
.ch-tt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ch-tt > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-tease .ch-tt b {
  color: var(--tx);
}
.ch-rings {
  display: flex;
  gap: 3px;
  flex: none;
}
.ch-ring svg {
  display: block;
}
.ch-ring circle {
  fill: none;
  stroke: var(--bd);
  stroke-width: 3;
}
.ch-ring .ch-rp {
  stroke-linecap: round;
  stroke-dasharray: 75.4;
  transform: rotate(-90deg);
  transform-origin: 15px 15px;
}
.ch-strip .ch-ic {
  width: 36px;
  height: 36px;
}
@media (max-width: 360px) {
  .ch-rings .ch-ring:nth-child(n + 4) {
    display: none;
  }
}
.ch-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 4px;
}
.ch-chip {
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent);
}
.ch-pick {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 12px -20px 0;
  padding: 0 20px 2px;
  scrollbar-width: none;
}
.ch-pick::-webkit-scrollbar {
  display: none;
}
.ch-pick button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--mu);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 5px 11px 5px 9px;
}
.ch-pick button svg {
  color: var(--c);
}
.ch-pick button.on {
  color: var(--tx);
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.ch-sg {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 0 10px;
}
.ch-sg b {
  font-size: 15px;
}
.ch-cal {
  display: grid;
  gap: 6px;
}
.ch-cell,
.ch-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  color: var(--mu);
}
.ch-cell small,
.ch-slot small {
  font-size: 11px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-cell > svg,
.ch-slot > span {
  width: 42px;
  height: 42px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch-slot > span {
  border-radius: 50%;
  border: 1.5px dashed var(--bd);
}
.ch-slot.on {
  color: var(--tx);
}
.ch-slot.on > span {
  border: 0;
  color: var(--t);
  background: color-mix(in srgb, var(--t) 14%, transparent);
}
.ch-cell.on {
  color: var(--c);
}
.ch-cell.on > svg {
  background: color-mix(in srgb, var(--c) 15%, transparent);
}
.ch-cell.miss > svg,
.ch-cell.fut > svg,
.ch-cell.mk > svg {
  background: var(--bg);
  opacity: 0.6;
}
.ch-cell.fut > svg,
.ch-cell.mk > svg {
  border: 1.5px dashed var(--bd);
  opacity: 1;
  color: var(--bd);
}
.ch-cell.td {
  color: var(--tx);
  font-weight: 700;
}
.ch-cell.td > svg {
  border: 2px solid var(--tx);
}
/* numbered doors: the whole cell is the door */
.ch-cell.num {
  aspect-ratio: 1;
  border-radius: 9px;
  font-size: 15px;
  background: var(--card);
  border: 1px solid var(--bd);
}
.ch-cell.num small {
  font-size: 11px;
  font-weight: 400;
}
.ch-cell.num.on {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  border-color: var(--good);
  color: var(--good);
}
.ch-cell.num.miss {
  background: var(--bg);
  border-color: var(--bg);
  opacity: 0.7;
}
.ch-cell.num.td {
  border: 2px solid var(--tx);
}
.ch-cell.num.mk {
  border-style: dashed;
  border-color: var(--c);
  color: var(--c);
}
.ch-cell.num > svg {
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  opacity: 1;
  color: inherit;
  aspect-ratio: auto;
}
.ch-tray {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--bd);
}
.ch-bun {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd);
  border: 1.5px dashed var(--bd);
  box-sizing: border-box;
}
.ch-bun svg {
  width: 78%;
  height: 78%;
}
.ch-bun.on {
  border: 0;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent);
}
.ch-cap {
  margin: 10px 0 8px;
}
.ch-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--bd);
}
.ch-ci {
  grid-row: span 3;
  align-self: start;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 15%, transparent);
}
.ch-row b {
  font-size: 15px;
}
.ch-v {
  text-align: right;
  white-space: nowrap;
}
.ch-ok {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--good);
  font-weight: 700;
}
.ch-pg {
  grid-column: 2 / 4;
  height: 6px;
  border-radius: 3px;
  background: var(--bd);
  overflow: hidden;
}
.ch-pg i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: var(--k);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ch-pg i.in {
  transform: translateX(calc((clamp(0, var(--w, 0), 1) - 1) * 100%));
}
@media (prefers-reduced-motion: reduce) {
  .ch-pg i {
    transition: none;
  }
}
.ch-n {
  grid-column: 2 / 4;
}
.ch-rew {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--bd);
  font-size: 12px;
  color: var(--mu);
}
.ch-rew svg {
  flex: none;
  color: var(--t-gold);
}
.ch-rew.won {
  color: var(--tx);
  border-color: color-mix(in srgb, var(--t-gold) 50%, var(--bd));
}

/* ---------- Testing (testers only) ---------- */
.dv-on,
.dv-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: 1px;
  color: var(--bg);
  background: var(--vol);
}
.dv-sw {
  flex: none;
  box-sizing: border-box;
  position: relative;
  width: 56px;
  height: 32px;
  padding: 0;
  margin-left: auto;
  border-radius: 16px;
  background: var(--bd);
  border: 1px solid var(--mu);
}
.dv-sw span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tx);
  transition: transform 0.2s;
}
.dv-sw[aria-checked="true"] {
  background: var(--good);
  border-color: var(--good);
}
.dv-sw[aria-checked="true"] span {
  transform: translateX(24px);
}
#devdlg .mrow .mt {
  flex: 1;
  min-width: 0;
}
.dv-date {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dv-date input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
}
.dv-date .imp-cancel {
  margin: 0;
}
.dv-jump {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin: 10px 0 8px;
}
.dv-jump button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--tx);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 8px 12px;
}
.dv-jump button:not(.dv-pre)::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  align-self: center;
  flex: none;
}
.dv-jump button:not(.dv-pre) {
  justify-content: flex-start;
}
.dv-jump button:not(.dv-pre) small {
  margin-left: auto;
}
.dv-jump button small {
  font-size: 12px;
  color: var(--mu);
}
.dv-jump .dv-pre {
  font-size: 12px;
  color: var(--mu);
}
.ch-strip,
.ch-tease {
  position: relative;
}
.dv-corner {
  position: absolute;
  top: -9px;
  left: 12px;
  margin: 0;
}
.ch-strip:has(.dv-corner),
.ch-tease:has(.dv-corner) {
  margin-top: 10px;
}

/* ---------- design check, 11 Nov: tap areas, pressed state, line breaks, big numbers ---------- */
/* small controls keep their look but get a hit area of at least 44 px */
:is(.cx-seg button, .who button, .hd-ib, .lg-ib, .lg-pill, .cgchips button, #theme) {
  position: relative;
}
:is(.cx-seg button, .who button, .hd-ib, .lg-ib, .lg-pill, .cgchips button, #theme)::after {
  content: "";
  position: absolute;
  top: min(0px, calc((100% - 44px) / 2));
  bottom: min(0px, calc((100% - 44px) / 2));
  left: min(0px, calc((100% - 44px) / 2));
  right: min(0px, calc((100% - 44px) / 2));
}
/* every tap gets an answer: a short dim while pressed */
html {
  -webkit-tap-highlight-color: transparent;
}
:is(button, a[href], summary, [role="button"]):not(:disabled):active {
  opacity: 0.6;
}
/* buttons that float over the page (Log, back to top, continue) would show the page through them when dimmed,
   so they stay solid and press in instead */
.tabbar button.tb-log:not(:disabled):active,
button.totop:not(:disabled):active,
button.contbar:not(:disabled):active {
  opacity: 1;
}
.tabbar .tb-big,
.contbar {
  transition: transform 0.12s ease-out;
}
.tabbar button.tb-log:not(:disabled):active .tb-big {
  transform: translateZ(0) scale(0.92);
}
.tabbar button.tb-log:not(:disabled):active .tb-big svg,
button.contbar:not(:disabled):active .cgo {
  opacity: 0.7;
}
button.totop.show:not(:disabled):active,
button.contbar:not(:disabled):active {
  transform: scale(0.95);
}
@media (prefers-reduced-motion: reduce) {
  .tabbar .tb-big,
  .contbar {
    transition: none;
  }
}
/* no lone word on the last line; headings break evenly */
p,
.note,
li {
  text-wrap: pretty;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
/* big type sits a touch tighter */
h1,
.k b,
.bg,
.lg-title,
.dn-h,
.cx-tk b,
.ld .bn,
.ld .brand h1 {
  letter-spacing: -0.02em;
}
/* the History pop-up grows out of the cell that was tapped */
.yt-pop {
  transform-origin: 100% 0;
  animation: yt-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes yt-in {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .yt-pop {
    animation: none;
  }
}

/* any element whose --c is a lift colour also gets the readable text shade */
[style*="--c:var(--bench)"] {
  --ci: var(--bench-ink);
}
[style*="--c:var(--dead)"] {
  --ci: var(--dead-ink);
}
[style*="--c:var(--squat)"] {
  --ci: var(--squat-ink);
}

/* ---------- viewing the other person: the page behind the cards takes a wash of their colour ---------- */
body.other {
  background: var(--bg);
}
/* the tint sits on a layer pinned to the screen, so the whole gradient is always in view
   (iPhone ignores a fixed page background and would stretch it over the full page).
   Its colours are plain values worked out ahead, so it looks the same on older phones. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(165deg, var(--t1, var(--tint-vol)), var(--t2, var(--tint-vol)));
  opacity: 0;
  transition: opacity 0.45s ease;
}
/* the tint fades in when you switch to the other person, and out when you switch back
   (while the Me | Bro switch slides); after the reload it starts in place, without a fade */
body.tinted::before {
  opacity: 1;
}
html.tint-now body::before {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  body::before {
    transition: none;
  }
}
/* cards and the tab bar keep the theme's own colours; only the page behind them is tinted */

/* trial switch in Edit profile: tint your own pages in your colour */
.pf-otg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.pf-sw2 {
  box-sizing: border-box;
  position: relative;
  width: 48px;
  height: 28px;
  padding: 0;
  border-radius: 14px;
  background: var(--bd);
  border: 1px solid var(--mu);
}
.pf-sw2::after {
  content: "";
  position: absolute;
  inset: -8px -2px;
}
.pf-sw2 span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--tx);
  transition: transform 0.2s;
}
.pf-sw2[aria-checked="true"] {
  background: var(--good);
  border-color: var(--good);
}
.pf-sw2[aria-checked="true"] span {
  transform: translateX(20px);
  background: #fff;
}

/* ---------- tab marker: one dot that slides between tabs and wraps into the ring around Log (drawn by main.js) ---------- */
.tbd-svg {
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: calc(100% + 60px);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.tbd-p {
  fill: none;
  stroke: var(--tx);
  stroke-linecap: round;
}
/* the drawn marker replaces the CSS dot and ring */
.tabbar.tbd button.on:not(.tb-log)::after {
  display: none;
}
.tabbar.tbd .tb-log.on .tb-big {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

/* ---------- sliding switches: every option is as wide as the longest one, so the pill is the same size on each ---------- */
.cx-seg,
.lg-seg,
.who {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.cx-seg button,
.lg-seg button,
.who button {
  min-width: 0;
  text-align: center;
}
/* switches that span their row keep spanning it, still with equal options */
.cx-seg.cx-lc,
.ac-seg,
#pfpair .who {
  display: grid;
}

/* ---------- switching light and dark: a soft crossfade (main.js) ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
/* fallback for phones without view transitions: colours fade for a moment */
html.th-fade,
html.th-fade *,
html.th-fade *::before,
html.th-fade *::after {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease !important;
}

/* Target confetti (Log): a short shower and a small card when a set reaches a target */
.gp {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}
.gp-out {
  opacity: 0;
}
.gp-c {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: gpfall var(--t) cubic-bezier(0.25, 0.6, 0.45, 1) var(--d) forwards;
}
@keyframes gpfall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), 78vh, 0) rotate(var(--r));
  }
}
.gp-card {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  box-sizing: border-box;
  width: min(92%, 360px);
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, var(--bd));
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 16%, var(--card));
  color: var(--tx);
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  pointer-events: auto;
  animation: gpin 0.3s ease-out;
}
.gp-h {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--c) 75%, var(--tx));
}
.gp-t {
  color: color-mix(in srgb, var(--c) 75%, var(--tx));
}
.gp-v {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.gp-n {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--mu);
}
@keyframes gpin {
  from {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gp,
  .gp-card {
    animation: none;
    transition: none;
  }
}

/* Suggest a plan (Profile > Presets): six questions, then a plan with sets per week and its sources */
.pl-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.pl-sug {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.pl-n {
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-steps {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
}
.pl-steps i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--bd);
  transition: background 0.2s;
}
.pl-steps i.on {
  background: var(--tx);
}
.pl-q {
  margin: 4px 0 12px;
}
.pl-q h3 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pl-q .note {
  margin: 0;
  text-wrap: pretty;
}
.pl-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  background: var(--bg);
  color: var(--tx);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.pl-opt[aria-checked='true'] {
  border-color: var(--tx);
}
.pl-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.pl-rad {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.pl-opt[aria-checked='true'] .pl-rad {
  border-color: var(--tx);
}
.pl-opt[aria-checked='true'] .pl-rad::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tx);
}
.pl-box {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  border: 2px solid var(--bd);
  background: none;
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
}
.pl-opt[aria-checked='true'] .pl-box,
.pl-chk[aria-checked='true'] {
  background: var(--tx);
  border-color: var(--tx);
}
.pl-chk {
  cursor: pointer;
  position: relative;
}
.pl-chk::after {
  content: '';
  position: absolute;
  inset: -11px;
}
.pl-from {
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tx) 10%, transparent);
  font-size: 11px;
  font-weight: 700;
}
.pl-next {
  margin-top: 16px;
}
.pl-rot {
  margin: 0 0 4px;
}
.pl-rot b {
  color: var(--tx);
}
.pl-tag {
  margin-left: 4px;
  padding: 0 6px;
  border: 1px solid var(--c);
  border-radius: 8px;
  color: var(--c);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pl-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--bg);
}
.pl-row2,
.pl-why summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.pl-v {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 42px 30px;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  padding: 3px 0;
}
.pl-v b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-v .note {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--tx) 7%, transparent);
  overflow: hidden;
}
.pl-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--tx) 14%, transparent);
}
.pl-fill {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  background: var(--tx);
}
.pl-fill.off {
  background: var(--mu);
}
.pl-why summary {
  cursor: pointer;
  list-style: none;
  min-height: 28px;
}
.pl-why summary::-webkit-details-marker {
  display: none;
}
.pl-why ol {
  margin: 6px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pl-why li > .note {
  display: block;
  text-wrap: pretty;
}
.pl-ref {
  color: var(--tx);
  font-weight: 700;
  text-decoration: none;
}
.pl-srcs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}
.pl-cap {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pl-src {
  display: flex;
  gap: 10px;
  font-size: 13px;
}
.pl-src > .note {
  width: 14px;
  flex: none;
  font-weight: 700;
}
.pl-src a {
  color: var(--tx);
  font-weight: 600;
}
.pl-src div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Welcome (welcome.js): the first screen of a brand-new account, three ways in */
html.wl-open,
html.wl-open body {
  overflow: hidden;
}
.wl {
  position: fixed;
  inset: 0;
  z-index: 800;
  overflow-y: auto;
  background: var(--bg);
  color: var(--tx);
  display: flex;
  flex-direction: column;
  padding: calc(24px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  transition: opacity 0.22s ease-out;
}
.wl::before {
  content: '';
  flex: 0.25 1 0;
}
.wl::after {
  content: '';
  flex: 0.75 1 0;
}
.wl-out {
  opacity: 0;
}
.wl-in {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.wl .brand {
  margin: 0 0 18px;
}
.wl .bn {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.wl-bar {
  display: block;
  width: 216px;
  max-width: 70%;
  margin: 0 auto 22px;
}
.wl h1 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.wl-in > .note {
  margin: 0 auto 20px;
  max-width: 340px;
  font-size: 15px;
  text-wrap: pretty;
}
.wl-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.wl-o {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 12px 16px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--card);
  color: var(--tx);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease-out;
}
.wl-o:active {
  transform: scale(0.98);
}
.wl-main {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--bg);
}
.wl-ic {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wl-tx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wl-tx b {
  font-size: 16px;
}
.wl-tx span {
  font-size: 13px;
  opacity: 0.72;
}
.wl-card .note {
  margin: 4px 0 12px;
  text-wrap: pretty;
}
.wl-hide {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .wl,
  .wl-o {
    transition: none;
  }
}
/* Insights: the Why? link in the plan's header line opens the reasons and sources in a sheet */
.ins-wb {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--tx);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  position: relative;
}
.ins-wb::after {
  content: '';
  position: absolute;
  inset: -12px -8px;
}
.ins-ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ins-ol li > .note {
  display: block;
  text-wrap: pretty;
}
/* Import and export: the export card above the import */
.exp-c {
  margin: 0 0 14px;
}
.exp-c .note {
  margin: 4px 0 10px;
}
.exp-c .exp-m {
  margin: 8px 0 0;
}
.pl-health {
  margin-top: 10px;
}