/* ==========================================================================
   baseline — "drag to log" pad.
   A small web recreation of one interaction from the app, with sample data.
   Everything is scoped under .pb and sized in cqw against the screen itself,
   so it holds from 200px to 360px wide. Only transform and opacity animate,
   and only inside prefers-reduced-motion: no-preference.
   ========================================================================== */

.pb {
  --pb-bg: #0c0c0c;
  --pb-ink: #f4f1ea;
  --pb-mute: #92918c;
  --pb-dim: #8c8a84;
  --pb-hair: rgba(244, 241, 234, 0.18);
  --pb-ember: #ef6b33;
  --pb-up: #5cc46c;
  --pb-flat: #e0a62a;
  --pb-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --pb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 904 / 1964;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 13.8% / 6.35%;
  background: var(--pb-bg);
  color: var(--pb-ink);
  text-align: left;
}

/* Fallback picture, shown until the script builds the screen. */
.pb > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.pb *,
.pb *::before,
.pb *::after {
  box-sizing: border-box;
}

.pb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- the screen ---------- */

.pb-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 10.5cqw 4.6cqw 8.4cqw;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 2.4cqw),
    var(--pb-bg);
  font: 500 3.3cqw/1.2 var(--pb-mono);
  letter-spacing: 0.16em;
  word-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: uppercase;
  color: var(--pb-mute);
  -webkit-font-smoothing: antialiased;
}

/* ---------- top: volume ---------- */

.pb-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 1.2cqw 0 0.6cqw;
}

.pb-vol__k {
  display: block;
  font-size: max(2.9cqw, 6.5px);
  letter-spacing: 0.22em;
}

.pb-vol__k span {
  color: var(--pb-dim);
}

.pb-vol__v {
  display: block;
  margin-top: 1.5cqw;
  font-size: 4.3cqw;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--pb-mute);
}

.pb-vol__now {
  display: inline-block;
  font-weight: 700;
  color: var(--pb-ink);
  transform-origin: 0 60%;
}

.pb-tag {
  padding-top: 0.2cqw;
  font-size: max(2.6cqw, 6px);
  letter-spacing: 0.2em;
  color: var(--pb-dim);
}

/* ---------- exercise ---------- */

.pb-name {
  font: 900 7.3cqw/1.03 var(--pb-sans);
  letter-spacing: -0.035em;
  text-align: center;
  text-transform: uppercase;
  color: var(--pb-ink);
}

.pb-ui .pb-name {
  margin-top: 8cqw;
}

.pb-name span {
  display: block;
  white-space: nowrap;
}

.pb-ui .pb-kit {
  margin-top: 3.2cqw;
  font-size: max(3.1cqw, 6.5px);
  letter-spacing: 0.24em;
  text-align: center;
}

/* ---------- entry zone: the only part that takes the drag ---------- */

.pb-zone {
  position: relative;
  margin-top: 6.4cqw;
  padding: 3cqw 2cqw 2.4cqw;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.pb-zone.is-drag {
  cursor: grabbing;
}

.pb-zone.is-done {
  cursor: default;
  touch-action: auto;
}

.pb-zone:focus-visible {
  border-radius: 0;
  outline: max(2px, 0.55cqw) solid var(--pb-ink);
  outline-offset: 0.6cqw;
}

/* Four corner marks say "this area is the handle". */
.pb-zone__c {
  position: absolute;
  width: 3.2cqw;
  height: 3.2cqw;
  border: 0 solid var(--pb-dim);
  pointer-events: none;
}

.pb-zone__c--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.pb-zone__c--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.pb-zone__c--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.pb-zone__c--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.pb-zone:hover .pb-zone__c {
  border-color: var(--pb-mute);
}

.pb-zone.is-drag .pb-zone__c {
  border-color: var(--pb-ember);
}

.pb-zone.is-done .pb-zone__c {
  display: none;
}

/* ---------- block graph ---------- */

.pb-chart {
  position: relative;
}

.pb-graph {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pb-g-axis {
  stroke: var(--pb-hair);
  stroke-width: 2;
}

.pb-g-ref {
  fill: none;
  stroke: rgba(244, 241, 234, 0.2);
  stroke-width: 2;
  stroke-dasharray: 3 9;
}

.pb-g-last {
  fill: none;
  stroke: rgba(244, 241, 234, 0.58);
  stroke-width: 2.5;
  stroke-dasharray: 11 8;
}

.pb-g-blk {
  fill: var(--pb-ember);
  fill-opacity: 0.5;
  stroke: var(--pb-ember);
  stroke-width: 3;
}

.pb-g-blk.is-live {
  fill: var(--pb-ink);
  fill-opacity: 0.07;
}

.pb-g-dot {
  fill: var(--pb-ember);
  transform-box: fill-box;
  transform-origin: center;
}

.pb-g-t {
  font: 600 30px var(--pb-mono);
  letter-spacing: 0;
  fill: var(--pb-mute);
  paint-order: stroke;
  stroke: var(--pb-bg);
  stroke-width: 7px;
  stroke-linejoin: round;
}

.pb-g-t--kg {
  fill: var(--pb-ember);
}

.pb-g-t--kg.is-in {
  fill: var(--pb-ink);
  stroke-opacity: 0;
}

.pb-g-t--dim {
  font-size: 23px;
  letter-spacing: 0.14em;
  fill: var(--pb-dim);
}

.pb-g-t.is-live {
  fill: var(--pb-ember);
}

.pb-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  margin-top: 1.4cqw;
  font-size: max(2.9cqw, 6.5px);
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.pb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
}

.pb-legend i {
  display: block;
  width: 2.8cqw;
  height: 2.8cqw;
}

.pb-legend__last i {
  height: 0;
  border-top: 1px dashed var(--pb-mute);
}

.pb-legend__today i {
  background: var(--pb-ember);
}

.pb-legend__pct {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.pb-legend__pct.is-up {
  color: var(--pb-up);
}

/* The figure a logged set adds. Sits in the gap under the graph. */
.pb-plus {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.9cqw;
  font: 700 6cqw/1 var(--pb-mono);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--pb-up);
  opacity: 0;
  pointer-events: none;
}

.pb-plus.is-on {
  opacity: 1;
}

/* ---------- the entry: 50 kg × 6 ---------- */

.pb-entry {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 23cqw;
  margin-top: 8.2cqw;
}

.pb-entry::before {
  content: "";
  position: absolute;
  inset: -9cqw -2cqw -7cqw;
  background: radial-gradient(46% 50% at 50% 54%, rgba(239, 107, 51, 0.2), transparent 72%);
  opacity: 0;
  pointer-events: none;
}

.pb-zone.is-drag .pb-entry::before {
  opacity: 1;
}

.pb-row {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: baseline;
  font: 900 24cqw/1 var(--pb-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  text-transform: none;
  white-space: nowrap;
  color: var(--pb-ink);
  transform-origin: 50% 80%;
}

.pb-num {
  position: relative;
  display: inline-block;
}

.pb-num--reps {
  color: var(--pb-ember);
}

.pb-num__v {
  display: inline-flex;
  align-items: baseline;
}

/* Keyboard focus lands on the hidden slider; the number shows it. */
.pb-num.is-focus {
  outline: max(2px, 0.55cqw) solid var(--pb-ink);
  outline-offset: 0.6cqw;
}

.pb-num input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

/* "kg" keeps its place; a half kilo stacks above it, so the digits never shift sideways. */
.pb-unit {
  position: relative;
  display: inline-block;
  min-width: 9.6cqw;
  margin-left: 1.3cqw;
  font: 500 5.6cqw/1 var(--pb-sans);
  letter-spacing: 0;
  color: var(--pb-mute);
}

.pb-frac {
  position: absolute;
  left: -0.5cqw;
  bottom: 100%;
  margin-bottom: 1.5cqw;
  font: 900 9.4cqw/1 var(--pb-sans);
  letter-spacing: -0.03em;
  color: var(--pb-ink);
}

.pb-x {
  margin: 0 4.2cqw 0 1.4cqw;
  font: 400 5.4cqw/1 var(--pb-sans);
  letter-spacing: 0;
  color: var(--pb-dim);
  transform: translateY(-0.4cqw);
}

/* ---------- under the entry ---------- */

.pb-ui .pb-cmp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8cqw;
  margin-top: 3cqw;
  font-size: max(3.5cqw, 7px);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.pb-cmp svg {
  width: 2.9cqw;
  height: 2.9cqw;
  fill: currentColor;
}

.pb-cmp__d {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.pb-cmp[data-dir="up"] svg,
.pb-cmp[data-dir="up"] .pb-cmp__d {
  color: var(--pb-up);
}

.pb-cmp[data-dir="flat"] svg,
.pb-cmp[data-dir="flat"] .pb-cmp__d {
  color: var(--pb-flat);
}

.pb-cmp[data-dir="down"] svg,
.pb-cmp[data-dir="down"] .pb-cmp__d {
  color: var(--pb-ink);
}

.pb-ui .pb-set {
  align-self: center;
  margin-top: 5cqw;
  padding: 1.7cqw 2.8cqw 1.6cqw 3.2cqw;
  background: rgba(239, 107, 51, 0.13);
  font-size: max(3.3cqw, 7px);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--pb-ember);
}

.pb-set b {
  display: inline-block;
  font-weight: 500;
}

.pb-ui .pb-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  margin-top: 4.2cqw;
  font-size: max(3cqw, 6.5px);
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.pb-hint svg {
  width: 3.4cqw;
  height: 3.4cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}

.pb-hint__sep {
  margin: 0 0.6cqw;
  color: var(--pb-dim);
}

/* ---------- LOG SET ---------- */

.pb-log {
  display: block;
  width: 100%;
  min-height: max(15.6cqw, 44px);
  margin: auto 0 0;
  padding: 0 0 0 0.34em;
  border: 0;
  border-radius: 0;
  background: var(--pb-ember);
  font: 700 5.3cqw/1 var(--pb-mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #0c0c0c;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.pb-log:hover {
  background: #f47a45;
}

.pb-log:active {
  background: #d95d29;
}

.pb-log:focus-visible,
.pb-again:focus-visible {
  border-radius: 0;
  outline: max(2px, 0.55cqw) solid var(--pb-ink);
  outline-offset: max(2px, 0.7cqw);
}

/* ---------- session logged ---------- */

.pb-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
  padding-bottom: 9cqw;
  text-align: center;
}

.pb-done__k {
  font-size: max(3.3cqw, 7px);
  letter-spacing: 0.24em;
}

.pb-ui .pb-done__v {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2cqw;
  margin-top: 4.6cqw;
  font: 900 20cqw/1 var(--pb-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  text-transform: none;
  white-space: nowrap;
  color: var(--pb-ink);
}

/* Longer totals step down in size so the line always fits. */
.pb-ui .pb-done__v[data-len="4"] { font-size: 17cqw; }
.pb-ui .pb-done__v[data-len="5"] { font-size: 14cqw; }
.pb-ui .pb-done__v[data-len="6"] { font-size: 11.5cqw; }

/* The unit hangs to the right; an unseen twin on the left keeps the digits centred. */
.pb-done__v span,
.pb-done__v::before {
  font: 500 3.2cqw/1 var(--pb-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-mute);
}

.pb-done__v::before {
  content: "kg·rep";
  visibility: hidden;
}

.pb-ui .pb-done__c {
  margin-top: 3.4cqw;
  font-size: max(3.5cqw, 7px);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.pb-done__c b {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.pb-done__c[data-dir="up"] b {
  color: var(--pb-up);
}

.pb-done__c[data-dir="flat"] b {
  color: var(--pb-flat);
}

.pb-done__c[data-dir="down"] b {
  color: var(--pb-ink);
}

.pb-again {
  min-width: max(34cqw, 96px);
  min-height: max(12cqw, 44px);
  margin-top: 8cqw;
  padding: 0 4cqw 0 calc(4cqw + 0.24em);
  border: 1px solid rgba(244, 241, 234, 0.34);
  border-radius: 0;
  background: transparent;
  font: 500 3.4cqw/1 var(--pb-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pb-ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.pb-again:hover {
  border-color: var(--pb-ink);
}

.pb-again:active {
  background: rgba(244, 241, 234, 0.1);
}

/* Hidden means hidden, whatever display a part was given above. */
.pb-ui [hidden][hidden] {
  display: none;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* A step: the number slips a little the way the finger went, then settles. */
  .pb-num__v[data-tick="a"] { animation: pb-tick-a 170ms var(--pb-ease); }
  .pb-num__v[data-tick="b"] { animation: pb-tick-b 170ms var(--pb-ease); }

  @keyframes pb-tick-a {
    from { transform: translate(calc(var(--pb-tx, 0) * 1cqw), calc(var(--pb-ty, 0) * 1cqw)); opacity: 0.72; }
    to { transform: none; opacity: 1; }
  }

  @keyframes pb-tick-b {
    from { transform: translate(calc(var(--pb-tx, 0) * 1cqw), calc(var(--pb-ty, 0) * 1cqw)); opacity: 0.72; }
    to { transform: none; opacity: 1; }
  }

  .pb-entry::before {
    transition: opacity 260ms ease-out;
  }

  .pb-zone.is-drag .pb-g-dot {
    transform: scale(1.5);
  }

  .pb-g-dot {
    transition: transform 160ms var(--pb-ease);
  }

  /* The logged figure rises out of the gap and fades. */
  .pb-plus.is-on[data-pop="a"] { animation: pb-rise-a 1250ms var(--pb-ease) both; }
  .pb-plus.is-on[data-pop="b"] { animation: pb-rise-b 1250ms var(--pb-ease) both; }

  @keyframes pb-rise-a {
    0% { transform: translateY(5cqw); opacity: 0; }
    16% { opacity: 1; }
    62% { opacity: 1; }
    100% { transform: translateY(-9cqw); opacity: 0; }
  }

  @keyframes pb-rise-b {
    0% { transform: translateY(5cqw); opacity: 0; }
    16% { opacity: 1; }
    62% { opacity: 1; }
    100% { transform: translateY(-9cqw); opacity: 0; }
  }

  .pb-g-blk.is-new {
    animation: pb-set 520ms ease-out;
  }

  @keyframes pb-set {
    from { opacity: 0.25; }
    to { opacity: 1; }
  }

  .pb-vol__now[data-tick="a"],
  .pb-set b[data-tick="a"] { animation: pb-bump-a 320ms var(--pb-ease); }
  .pb-vol__now[data-tick="b"],
  .pb-set b[data-tick="b"] { animation: pb-bump-b 320ms var(--pb-ease); }

  @keyframes pb-bump-a {
    from { transform: translateY(1.4cqw); opacity: 0.2; }
    to { transform: none; opacity: 1; }
  }

  @keyframes pb-bump-b {
    from { transform: translateY(1.4cqw); opacity: 0.2; }
    to { transform: none; opacity: 1; }
  }

  .pb-done {
    animation: pb-in 520ms 220ms ease-out both;
  }

  @keyframes pb-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Before the first touch, the two arrows in the hint show their axis, three times. */
  .pb.is-seen:not(.is-used) .pb-hint__v { animation: pb-nudge-v 1500ms ease-in-out 500ms 3; }
  .pb.is-seen:not(.is-used) .pb-hint__h { animation: pb-nudge-h 1500ms ease-in-out 1250ms 3; }

  @keyframes pb-nudge-v {
    0%, 100% { transform: none; }
    30% { transform: translateY(-0.9cqw); }
    70% { transform: translateY(0.9cqw); }
  }

  @keyframes pb-nudge-h {
    0%, 100% { transform: none; }
    30% { transform: translateX(0.9cqw); }
    70% { transform: translateX(-0.9cqw); }
  }

  .pb-log {
    transition: transform 120ms var(--pb-ease);
  }

  .pb-log:active {
    transform: scale(0.985);
  }
}