/* Bitácora — "iron ledger" look on top of Pico 2.1 (phone first, one hand).
   Tokens first, then Pico variables mapped onto them, then components per screen.
   Contrast: every text/background pair below is >= 4.5:1 in both themes. */

/* --- fonts (self-hosted, see static/VENDOR.md) ------------------------------------------- */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("vendor/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("vendor/fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens ------------------------------------------------------------------------------- */

:root {
  --tap-min: 44px;
  --font-display: "Barlow Condensed", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-card: 16px;
  --radius-control: 10px;
  --radius-big: 12px;

  /* light */
  --bg: #f4f2ed;
  --surface: #ffffff;
  --ink: #16181d;
  --ink-hover: #2e313a;
  --on-ink: #ffffff;
  --text-2: #3f4450;
  --muted: #5b606b;
  --line: #e2dfd8;
  --line-strong: #cfcbc2;
  --field-border: #8e897f; /* >= 3:1 on surface and ground (WCAG 1.4.11) */
  --divider: #eeebe5;
  --fill: #ecebe7;
  --fill-2: #e9e6df;
  --focus-ring: #1d3fb8;

  --panel-bg: #16181d;
  --panel-fg: #ffffff;
  --panel-muted: #c9cdd6;
  --panel-cta-bg: #ffffff;
  --panel-cta-fg: #16181d;
  --live-dot: #f59e0b;

  --prog-fg: #1d3fb8;
  --prog-bg: #e6edfd;
  --reg-fg: #8a2e0c;
  --reg-bg: #fcebdd;
  --match-fg: #3f4450;
  --match-bg: #ecebe7;
  --neutral-fg: #4a4f5a;
  --neutral-bg: #ecebe7;
  --pr-fg: #6b4e00;
  --pr-bg: #fbf0cc;
  --danger: #a3260f;
  --danger-hover: #8a1f0b;
  --on-danger: #ffffff;
  --check-bg: #16181d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --surface: #1a1d23;
    --ink: #f2f0eb;
    --ink-hover: #d9d6cf;
    --on-ink: #16181d;
    --text-2: #c9cdd6;
    --muted: #a3a8b3;
    --line: #2c3038;
    --line-strong: #444a55;
    --field-border: #6b717d;
    --divider: #24272e;
    --fill: #262a31;
    --fill-2: #22252b;
    --focus-ring: #8fa8f5;

    --panel-bg: #262a31;
    --panel-fg: #f2f0eb;
    --panel-muted: #c9cdd6;
    --panel-cta-bg: #f2f0eb;
    --panel-cta-fg: #16181d;
    --live-dot: #fbbf24;

    --prog-fg: #b9c8ff;
    --prog-bg: #1f2b57;
    --reg-fg: #ffbe9e;
    --reg-bg: #4a2414;
    --match-fg: #d5d8df;
    --match-bg: #2c3038;
    --neutral-fg: #c2c6cf;
    --neutral-bg: #262a31;
    --pr-fg: #f5d67a;
    --pr-bg: #3b300e;
    --danger: #ff9f8f;
    --danger-hover: #ffb8ab;
    --on-danger: #16181d;
    --check-bg: #3d5bd9;
  }
}

/* --- Pico variables mapped to the tokens ------------------------------------------------- */

:root:not([data-theme]) {
  --pico-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pico-border-radius: var(--radius-control);
  --pico-form-element-spacing-vertical: 0.625rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
}

:root:not([data-theme]) {
  --pico-background-color: var(--bg);
  --pico-color: var(--ink);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--divider);
  --pico-h1-color: var(--ink);
  --pico-h2-color: var(--ink);
  --pico-h3-color: var(--ink);
  --pico-h4-color: var(--ink);
  --pico-primary: var(--ink);
  --pico-primary-background: var(--ink);
  --pico-primary-border: var(--ink);
  --pico-primary-underline: var(--line-strong);
  --pico-primary-hover: var(--text-2);
  --pico-primary-hover-background: var(--ink-hover);
  --pico-primary-hover-border: var(--ink-hover);
  --pico-primary-hover-underline: var(--text-2);
  --pico-primary-focus: color-mix(in srgb, var(--focus-ring) 45%, transparent);
  --pico-primary-inverse: var(--on-ink);
  --pico-secondary: var(--text-2);
  --pico-secondary-background: var(--surface);
  --pico-secondary-border: var(--line-strong);
  --pico-secondary-underline: var(--line-strong);
  --pico-secondary-hover: var(--ink);
  --pico-secondary-hover-background: var(--fill);
  --pico-secondary-hover-border: var(--line-strong);
  --pico-secondary-hover-underline: var(--ink);
  --pico-secondary-focus: color-mix(in srgb, var(--focus-ring) 45%, transparent);
  --pico-secondary-inverse: var(--ink);
  --pico-card-background-color: var(--surface);
  --pico-card-border-color: var(--line);
  --pico-card-sectioning-background-color: var(--surface);
  --pico-card-box-shadow: none;
  --pico-form-element-background-color: var(--surface);
  --pico-form-element-selected-background-color: var(--fill);
  --pico-form-element-border-color: var(--field-border);
  --pico-form-element-color: var(--ink);
  --pico-form-element-placeholder-color: var(--muted);
  --pico-form-element-active-background-color: var(--surface);
  --pico-form-element-active-border-color: var(--ink);
  --pico-form-element-focus-color: color-mix(in srgb, var(--focus-ring) 45%, transparent);
  --pico-form-element-invalid-border-color: var(--reg-fg);
  --pico-form-element-invalid-active-border-color: var(--reg-fg);
  --pico-switch-background-color: var(--line-strong);
  --pico-switch-checked-background-color: var(--check-bg);
  --pico-switch-color: #ffffff;
  --pico-accordion-border-color: var(--divider);
  --pico-accordion-active-summary-color: var(--ink);
  --pico-accordion-close-summary-color: var(--ink);
  --pico-accordion-open-summary-color: var(--text-2);
  --pico-del-color: var(--reg-fg);
  --pico-ins-color: var(--prog-fg);
  --pico-text-selection-color: color-mix(in srgb, var(--focus-ring) 25%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-switch-background-color: #4a505b;
    --pico-switch-color: #f2f0eb;
  }
}

/* --- base -------------------------------------------------------------------------------- */

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
}

main.container {
  flex: 1;
  padding-block: 0.5rem 2rem;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
}

/* Every interactive control is at least a 44 px tap target. */
button,
[role="button"],
input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select,
a.button {
  min-height: var(--tap-min);
}

button,
[role="button"],
[type="submit"] {
  font-weight: 600;
  border-radius: var(--radius-control);
}

/* Focus is always visible, never colour only. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

label,
legend {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

input:not([type="checkbox"], [type="radio"]),
select,
textarea {
  font-size: 1rem;
}

input[type="checkbox"]:not([role="switch"]):checked {
  --pico-background-color: var(--check-bg);
  --pico-border-color: var(--check-bg);
}

small,
.help {
  color: var(--muted);
}

.help {
  font-size: 0.875rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Cards: white surfaces with a hairline border on the warm ground. */
article,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 1rem;
  margin: 0 0 1rem;
}

.panel-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.panel-list > li {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--divider);
}

.panel-list > li:last-child {
  border-bottom: 0;
}

.section-label,
.workout-kicker {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.5rem 0.25rem 0.625rem;
}

.workout-kicker {
  margin: 0 0 0.375rem;
}

.home-primary,
.save-set {
  width: 100%;
  min-height: 3.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-big);
}

a[role="button"] {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Secondary and outline buttons: white with a warm grey border, ink text. */
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary {
  --pico-background-color: var(--surface);
  --pico-color: var(--ink);
  --pico-border-color: var(--line-strong);
}

:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is(:hover, :active, :focus) {
  --pico-background-color: var(--fill);
  --pico-color: var(--ink);
  --pico-border-color: var(--line-strong);
}

/* Destructive actions: text says what happens; colour only reinforces it. */
:is(button, [type="submit"], [role="button"]).danger {
  --pico-background-color: var(--danger);
  --pico-border-color: var(--danger);
  --pico-color: var(--on-danger);
}

:is(button, [type="submit"], [role="button"]).danger:is(:hover, :active, :focus) {
  --pico-background-color: var(--danger-hover);
  --pico-border-color: var(--danger-hover);
  --pico-color: var(--on-danger);
}

:is(button, [type="submit"], [role="button"]).outline.secondary.danger,
:is(button, [type="submit"], [role="button"]).outline.secondary.danger:is(:hover, :active, :focus) {
  --pico-background-color: var(--surface);
  --pico-border-color: var(--danger);
  --pico-color: var(--danger);
}

.form-error {
  border-left: 4px solid var(--reg-fg);
  border-radius: var(--radius-control);
  padding: 0.625rem 0.875rem;
  margin-bottom: 1rem;
  background: var(--reg-bg);
  color: var(--reg-fg);
  font-weight: 600;
}

details > summary {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}

details > summary::after {
  margin-inline-start: auto;
}

/* --- chips, verdicts, record badges ------------------------------------------------------- */

.chip,
.verdict,
.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.3rem 0.625rem;
  border: 0;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  background: var(--fill);
  color: var(--text-2);
}

.verdict-progressed { background: var(--prog-bg); color: var(--prog-fg); }
.verdict-regressed { background: var(--reg-bg); color: var(--reg-fg); }
.verdict-matched { background: var(--match-bg); color: var(--match-fg); }
.verdict-no_baseline,
.verdict-not_comparable { background: var(--neutral-bg); color: var(--neutral-fg); }

.pr-badge {
  gap: 0.3rem;
  background: var(--pr-bg);
  color: var(--pr-fg);
}

/* --- app header -------------------------------------------------------------------------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.75rem 0.25rem;
}

.app-header .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.app-nav form {
  margin: 0 0 0 0.375rem;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-big);
  color: var(--ink);
}

.icon-link:hover {
  background: var(--fill);
  color: var(--ink);
}

.app-header .header-logout {
  margin: 0;
  width: auto;
  padding: 0 0.875rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

/* --- auth and error pages ---------------------------------------------------------------- */

.auth-card {
  max-width: 26rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.25rem;
}

.auth-card form,
.auth-card button {
  margin-bottom: 0;
}

.auth-card h1 {
  font-size: 2.25rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
}

.error-page {
  text-align: center;
  padding-top: 3rem;
}

.error-page .error-code {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.error-page h1 {
  font-size: 2rem;
}

.error-page p {
  color: var(--text-2);
}

/* --- home (SPEC §7.2) -------------------------------------------------------------------- */

.home-greeting {
  font-size: 2.75rem;
  margin: 0.5rem 0.25rem 1.25rem;
}

.resume-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.125rem;
  margin-bottom: 0.5rem;
  border-radius: 18px;
  background: var(--panel-bg);
  color: var(--panel-fg);
  text-decoration: none;
}

.resume-card:hover,
.resume-card:focus-visible {
  color: var(--panel-fg);
}

.resume-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--panel-muted);
}

.live-dot {
  fill: var(--live-dot);
}

.resume-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem;
}

.resume-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.resume-title {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.resume-meta {
  font-size: 0.875rem;
  color: var(--panel-muted);
}

.resume-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  min-height: var(--tap-min);
  padding: 0 0.875rem 0 1rem;
  border-radius: var(--radius-big);
  background: var(--panel-cta-bg);
  color: var(--panel-cta-fg);
  font-weight: 700;
}

.start-form {
  padding: 0.875rem;
}

/* Stacked on phones so the focus select shows its full text (longer in Spanish). */
.start-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 576px) {
  .start-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
  }
}

.start-form .home-primary {
  margin-bottom: 0;
}

.recent-workout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.recent-main {
  flex: 1;
  min-width: 0;
}

.recent-title {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.recent-title:hover {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}

.recent-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.recent-badges {
  margin: 0.375rem 0 0;
}

.recent-badges .pr-badge {
  font-size: 0.8125rem;
  padding: 0.125rem 0.5rem;
}

.recent-repeat {
  margin: 0;
  flex-shrink: 0;
}

.recent-repeat button {
  margin: 0;
  width: auto;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}

.recent-empty {
  color: var(--text-2);
}

/* --- workout head (live, detail, edit) --------------------------------------------------- */

.workout-head {
  margin: 0.5rem 0.25rem 1rem;
}

.workout-head h1,
.picker-head h1,
.workout-kicker + h1 {
  margin-top: 0;
  margin-bottom: 0.375rem;
}

.workout-meta {
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.workout-details {
  margin: 0.25rem 0 0;
  border: 0;
}

.workout-details > summary {
  display: inline-flex;
  width: auto;
  gap: 0.5rem;
  padding: 0 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

.workout-details > summary::after {
  margin: 0;
  float: none;
}

.workout-details[open] > summary {
  margin-bottom: 0.75rem;
}

.workout-details > form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1rem;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--tap-min);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

.workout-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0;
  margin: 0 0 0.75rem;
}

.workout-tags li {
  list-style: none;
  margin: 0;
}

.entry-notes {
  white-space: pre-line;
  font-size: 0.9375rem;
  color: var(--text-2);
}

/* --- entry cards (SPEC §7.3) ------------------------------------------------------------- */

.entries {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.entries-empty {
  color: var(--text-2);
  margin: 0;
}

.entry-card {
  margin: 0;
  padding: 1rem;
}

.entry-head {
  margin: 0 0 0.75rem;
  padding: 0;
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.entry-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.entry-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.entry-focus {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: right;
}

.entry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* "Last time · same focus" */
.baseline {
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.875rem 0.75rem;
  border: 0;
  border-radius: var(--radius-big);
  background: var(--bg);
}

.baseline[open] > summary {
  margin-bottom: 0.25rem;
}

.baseline > summary {
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.baseline > summary .baseline-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.baseline > summary .baseline-date {
  margin-inline-start: auto;
  white-space: nowrap;
}

.baseline:not([open]) {
  padding-bottom: 0.25rem;
}

.baseline-sets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.baseline-sets > li {
  list-style: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-2);
}

.baseline-sets .kind,
.set-line .kind {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
}

/* Logged sets and ghost rows */
.set-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.25rem;
}

.set-list > li {
  list-style: none;
  margin: 0;
  padding-block: 0.25rem;
  border-bottom: 1px solid var(--divider);
}

.set-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.set-summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
  min-height: 3.25rem;
  flex: 1;
  min-width: 0;
}

.set-pos {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
}

.set-line {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.set-extras {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--muted);
}

.set-list > li.ghost-row {
  border-bottom-style: dashed;
}

.ghost-row .set-line {
  color: var(--muted);
  font-weight: 600;
}

.set-edit {
  margin: 0;
  border: 0;
}

.set-edit > summary {
  justify-content: center;
  width: var(--tap-min);
  min-width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-control);
  color: var(--muted);
}

.set-edit > summary::after {
  display: none;
}

.set-edit > summary:hover {
  background: var(--fill);
  color: var(--ink);
}

.set-edit[open] {
  flex-basis: 100%;
  padding-block: 0.25rem 0.75rem;
}

.set-edit[open] > summary {
  margin-inline-start: auto;
  background: var(--fill);
  color: var(--ink);
}

.set-edit form {
  margin: 0.5rem 0 0.75rem;
  padding: 0.875rem;
  border-radius: 14px;
  background: var(--bg);
}

.set-edit form + form {
  margin: 0;
  padding: 0;
  background: none;
}

.set-edit form + form button {
  width: 100%;
  margin: 0;
}

/* New-set form: the ink-outlined box where the thumb lives. */
.set-form {
  margin: 0.75rem 0 0;
  padding: 0.875rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
}

.set-form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.set-form-head span {
  font-size: 0.8125rem;
  color: var(--muted);
}

.field {
  min-width: 0;
}

.field > label {
  margin-bottom: 0.375rem;
}

.set-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.75rem;
}

/* Big ± steppers: 56 px input between two 44 px buttons, one bordered group. */
.stepper {
  display: grid;
  grid-template-columns: var(--tap-min) minmax(0, 1fr) var(--tap-min);
  align-items: stretch;
  margin-bottom: 0.875rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-big);
  overflow: hidden;
  background: var(--surface);
}

.stepper:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 45%, transparent);
}

.stepper .step-btn {
  --pico-background-color: var(--bg);
  --pico-border-color: transparent;
  --pico-color: var(--ink);
  margin: 0;
  height: 3.5rem;
  min-height: 3.5rem;
  width: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 1.375rem;
  font-weight: 500;
}

.stepper .step-btn:is(:hover, :active, :focus) {
  --pico-background-color: var(--fill);
  --pico-color: var(--ink);
}

.stepper .step-btn:focus-visible {
  outline-offset: -3px;
}

.stepper input,
.big-field input {
  margin: 0;
  height: 3.5rem;
  min-height: 3.5rem;
  padding: 0 0.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
}

.stepper input {
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.stepper input:focus {
  box-shadow: none;
}

.big-field input {
  margin-bottom: 0.875rem;
  border-radius: var(--radius-big);
  font-size: 1.5rem;
}

.stepper input::placeholder,
.big-field input::placeholder {
  color: var(--muted);
  opacity: 1;
  font-weight: 600;
}

/* Set kind: radio buttons drawn as a segmented control (same name="kind" values). */
.segmented {
  margin: 0 0 0.875rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.segmented > legend {
  padding: 0;
  margin-bottom: 0.375rem;
}

.seg-track {
  --seg-min: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--seg-min)), 1fr));
  gap: 4px;
  padding: 4px;
  margin: 0;
  border-radius: var(--radius-big);
  background: var(--fill-2);
  position: relative;
}

:lang(es) .seg-track {
  --seg-min: 7rem;
}

:lang(es) .segmented .seg-label:nth-of-type(odd):last-of-type {
  grid-column: 1 / -1;
}

/* Beat Pico's [type=radio] ~ label(:not(:last-of-type)) inline-block + end margin. */
.segmented .seg-track .seg-label {
  margin: 0;
}

.seg-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.seg-track .seg-label,
.seg-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  margin: 0;
  padding: 0.25rem 4px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  hyphens: auto;
}

.seg-link {
  font-size: 0.875rem;
  padding-inline: 0.375rem;
}

.seg-label:hover,
.seg-link:hover {
  background: var(--surface);
  color: var(--ink);
}

.seg-input:checked + .seg-label,
.seg-link[aria-current="page"] {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.seg-input:focus-visible + .seg-label {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* "More" (cluster, rest) as a dashed pill, RPE next to the submit. */
.set-more {
  margin: 0 0 0.875rem;
  border: 0;
}

.set-more > summary {
  display: inline-flex;
  width: auto;
  padding: 0 0.875rem;
  gap: 0.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  color: var(--text-2);
}

.set-more > summary::after {
  margin: 0;
  float: none;
}

.set-more[open] > summary {
  margin-bottom: 0.625rem;
  border-style: solid;
}

.set-submit {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: end;
  gap: 0.625rem;
}

.set-submit input {
  margin: 0;
  height: 3.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  border-radius: var(--radius-big);
}

.set-submit .save-set {
  margin: 0;
  height: 3.5rem;
  min-height: 3.5rem;
}

.set-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.75rem;
}

.set-form,
.set-edit form {
  margin-bottom: 0;
}

/* Exercise options */
.entry-options {
  margin: 0.75rem 0 0;
  padding-top: 0.25rem;
  border-top: 1px solid var(--divider);
  border-bottom: 0;
}

.entry-options > summary {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
}

.entry-options[open] > summary {
  margin-bottom: 0.5rem;
}

.entry-options form > button {
  width: 100%;
}

.entry-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.entry-actions form,
.entry-options form {
  margin-bottom: 0.75rem;
}

.entry-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.entry-actions button,
.delete-entry {
  width: 100%;
  margin: 0;
}

/* Read-only cards (summary): a little tighter. */
.entry-card.is-readonly .set-summary {
  min-height: 2.75rem;
}

.entry-card.is-readonly .set-line {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-2);
}

.entry-card.is-readonly .set-list > li:last-child {
  border-bottom: 0;
}

.entry-card.is-readonly .baseline {
  margin-bottom: 0.25rem;
}

.add-exercise {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  margin-bottom: 1.5rem;
  border: 2px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.add-exercise:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.finish .section-label {
  margin-top: 0;
}

.finish form {
  margin: 0;
}

.finish .home-primary {
  margin-bottom: 0;
}

.htmx-request [type="submit"] {
  opacity: 0.6;
}

/* Sticky finish bar: always in thumb reach on the live screen. */
.live-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.live-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.625rem;
}

.live-bar-status {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.live-bar-label {
  font-size: 0.8125rem;
  color: var(--muted);
}

.live-bar-value {
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.live-bar-finish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 3.5rem;
  padding: 0 1.5rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-big);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.live-bar-finish:hover {
  background: var(--fill);
  color: var(--ink);
}

/* --- picker ------------------------------------------------------------------------------ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--tap-min);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
}

.back-link:hover {
  color: var(--text-2);
}

.picker-head h1 {
  margin-top: 0.25rem;
}

.picker-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.picker-search input,
.picker-search button {
  margin: 0;
}

.picker-search button {
  padding-inline: 1rem;
}

.picker-list > li {
  padding: 0;
}

.picker-list form {
  margin: 0;
}

.picker-add {
  --pico-background-color: transparent;
  --pico-border-color: transparent;
  --pico-color: var(--ink);
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0;
  text-align: left;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.picker-add:is(:hover, :active, :focus) {
  --pico-background-color: var(--fill);
  --pico-border-color: transparent;
  --pico-color: var(--ink);
}

.picker-add .icon {
  color: var(--muted);
}

.picker-empty {
  color: var(--text-2);
}

/* --- workout detail / edit / delete (4.4) ------------------------------------------------ */

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.stat-tile,
.record {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.stat-tile dt {
  order: 2;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}

.stat-tile dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
}

.detail-actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.detail-actions a[role="button"] {
  margin: 0;
}

.edit-done {
  margin-bottom: 1rem;
}

.confirm-card h1 {
  font-size: 2rem;
}

.confirm-card form {
  margin-bottom: 0.75rem;
}

.confirm-card button {
  width: 100%;
  margin: 0;
}

/* --- exercise history (4.5) -------------------------------------------------------------- */

.focus-tabs {
  display: block;
  margin-bottom: 1rem;
}

.focus-tabs .seg-track {
  --seg-min: 6.5rem;
  list-style: none;
  margin: 0;
}

.focus-tabs li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.focus-tabs .seg-link {
  flex: 1;
}

.series-figure {
  position: relative;
  height: 260px;
  padding: 0.75rem;
  margin: 0 0 0.5rem;
}

.history-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}

.history-date {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  margin-inline-end: auto;
  font-weight: 600;
  color: var(--ink);
}

.history-head .verdict,
.history-head .chip {
  font-size: 0.8125rem;
}

.history-sets {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.record-list > li {
  list-style: none;
  margin: 0;
}

.record-label {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.record-value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.record-date {
  font-size: 0.75rem;
}

.exercise-manage {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.exercise-manage form {
  margin: 0;
}

.exercise-manage button {
  width: 100%;
  margin: 0;
}

/* --- catalog and exercise form (4.6) ----------------------------------------------------- */

.catalog-filters {
  margin-top: 1rem;
}

.catalog-filters button {
  width: 100%;
  margin-bottom: 0;
}

.catalog-archived {
  margin-top: 1.6rem;
}

.catalog-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}

.catalog-item > a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--tap-min);
  text-decoration: none;
  color: var(--ink);
}

.catalog-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.catalog-meta {
  color: var(--muted);
}

.catalog-item .chip {
  font-size: 0.8125rem;
}

.exercise-form .home-primary {
  margin-bottom: 0;
}

.muscle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.75rem;
}

.muscle-grid legend {
  grid-column: 1 / -1;
}

.muscle-grid label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap-min);
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink);
}

/* --- settings (4.7) ---------------------------------------------------------------------- */

.settings-section .section-label {
  margin-top: 0;
}

.settings-section form,
.settings-section form > button:last-child {
  margin-bottom: 0;
}

.settings-section form > button {
  width: 100%;
}

.set-pair > a[role="button"] {
  margin-bottom: 0;
}