/* ===========================================================================
   absoluteworkout — visual system
   ---------------------------------------------------------------------------
   Warm blush cream ground with a dot lattice, vermilion primary, butter
   secondary, deep navy ink, and hard offset shadows with no blur. Anton
   condensed caps for display, Inter for everything else.

   Two rules worth knowing before editing:

   1. VERMILION IS UI CHROME, NOT DATA. The volume chart uses --series and
      --series-met (two steps of one blue hue) so a chart colour can never be
      confused with an accent. Status good vs critical sit at dE 4.1 under
      deuteranopia, so no verdict in this app is carried by colour alone — the
      marker position and the text label say it.
   2. INPUTS ARE 16px. Below that, iOS Safari zooms the page on focus. You tap
      ~19 fields in a session; 14px means 19 involuntary zooms.
   =========================================================================== */

/* Self-hosted so the app makes no third-party requests and works offline.
   Latin subsets only — 59KB for both. */
@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground + ink */
  --cream: #fdf2ea;
  --card: #fff9f4;
  --white: #ffffff;
  --ink: #1f2124;
  --ink-2: #6b6d72;
  --ink-3: #a3a5aa;

  /* accents — chrome only */
  --verm: #ef4a1f;
  --butter: #fbd96b;
  --navy: #2b2c6b;
  --lav: #ccd0f2;

  /* the dot lattice */
  --dot: #e9b493;

  /* data layer — one hue, two steps. Never an accent colour. */
  --series: #2f6fa8;
  --series-met: #6fa3cf;

  /* status. Icon + label always; never colour alone. */
  --critical: #d03b3b;

  --line: rgba(43, 44, 107, 0.16);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 5px 5px 0 var(--lav);
  --shadow-sm: 3px 3px 0 var(--lav);

  --display: Anton, 'Arial Narrow', sans-serif;
  --body: InterVar, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--cream);
  /* the lattice — fixed so it reads as paper the app sits on, not wallpaper
     that scrolls with the content */
  background-image: radial-gradient(circle, var(--dot) 1.15px, transparent 1.15px);
  background-size: 21px 21px;
  background-position: 6px 6px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; }
h2, h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1px; }
h2 { font-size: 27px; }
h3 { font-size: 17px; }
button { font: inherit; color: inherit; }
a { color: var(--verm); }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------- App bar ---------- */

header.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 50px;
  padding-left: max(15px, env(safe-area-inset-left));
  padding-right: max(15px, env(safe-area-inset-right));
  background: var(--white);
  border-bottom: 2px solid var(--navy);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--display);
  font-size: 19px;
  text-transform: uppercase;
  color: var(--verm);
}
.wordmark .mark { color: var(--verm); }
.wordmark .mark b { font-weight: 400; color: var(--navy); }
.wordmark .sep { display: none; }        /* the two-tone wordmark carries it */
.wordmark .tag {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--navy);
  background: var(--butter);
  border: 2px solid var(--navy);
  border-radius: 6px;
  padding: 2px 7px;
  box-shadow: var(--shadow-sm);
}

.appbar-actions { display: flex; align-items: center; gap: 9px; }

.icon-link, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--butter);
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.1s;
}
.icon-link:hover, .icon-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--lav); }
.icon-link:active, .icon-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.icon-link svg, .icon-btn svg { width: 15px; height: 15px; display: block; }

/* Sync state on the cloud chip. Colour is chrome here, not data — and state is
   never colour alone: the dialog it opens spells the state out in words. */
.icon-btn { position: relative; }
.sync-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  background: var(--ink-3);           /* signed out */
}
.sync-dot.on { background: var(--verm); }        /* signed in */
.sync-dot.busy { animation: sync-pulse 1s ease-in-out infinite; }
.sync-dot.err { background: var(--critical); }
@keyframes sync-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .sync-dot.busy { animation: none; } }

/* ---------- Tabs ---------- */

nav.tabs {
  position: sticky;
  top: 50px;
  z-index: 40;
  display: flex;
  background: var(--white);
  border-bottom: 2px solid var(--navy);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
nav.tabs button {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 4px 10px;
  background: none;
  border: none;
  border-right: 1px solid var(--line);
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
nav.tabs button:last-child { border-right: none; }
nav.tabs button:hover { background: var(--cream); }
nav.tabs button[aria-selected="true"] { background: var(--verm); color: var(--white); }

/* ---------- Layout ---------- */

main {
  max-width: 940px;
  margin: 0 auto;
  padding-top: 16px;
  padding-left: max(15px, env(safe-area-inset-left));
  padding-right: max(15px, env(safe-area-inset-right));
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.view[hidden] { display: none; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.section-label {
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--navy);
}

.card {
  background: var(--card);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 14px;
}

.empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--ink-2);
  background: var(--card);
  border: 2px dashed var(--navy);
  border-radius: var(--radius);
}
.empty .hint { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- Chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.chip:hover { background: var(--cream); }
.chip[aria-pressed="true"] { background: var(--verm); border-color: var(--navy); color: var(--white); }
.chip[aria-pressed="true"] .badge { background: var(--white); color: var(--verm); border-color: var(--white); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--butter);
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 17px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.12s;
}
.btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--lav); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn.primary { background: var(--butter); }
.btn.danger { background: var(--white); color: var(--critical); border-color: var(--critical); box-shadow: 3px 3px 0 rgba(208, 59, 59, 0.25); }
.btn.sm { padding: 7px 12px; font-size: 11.5px; }

.btn.add-exercise {
  width: 100%;
  padding: 13px;
  background: var(--butter);
}

/* ---------- Form fields ---------- */

/* 16px is not a style choice: iOS Safari zooms the page when focusing an input
   under 16px, and a session means ~19 taps. */
.field,
.sets-grid input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.field::placeholder, .sets-grid input::placeholder { color: var(--ink-3); font-weight: 500; }
.sets-grid input { text-align: center; }


/* ---------- Exercise / prescription rows ---------- */

.block + .block { margin-top: 16px; }
.block-name {
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--navy);
}

.ex {
  background: var(--card);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ex + .ex { margin-top: 13px; }

.ex-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 11px;
  padding: 12px 13px;
}
/* Was an inline style on four call sites, which silently outranked the mobile
   basis override below. */
.ex-titles { flex: 1 1 auto; min-width: 0; }
.ex-name {
  font-family: var(--display);
  font-size: 16.5px;
  line-height: 1.06;
  text-transform: uppercase;
}
.ex-sub { margin-top: 3px; font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.ex-pres { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.ex-pres .sets { font-family: var(--display); font-size: 14px; color: var(--verm); letter-spacing: 0.3px; }
.ex-pres .rest { font-size: 11px; color: var(--ink-2); }

.cues {
  margin: 0;
  padding: 0 13px 12px 30px;
  color: var(--ink);
  font-size: 12.5px;
}
.cues li { margin: 3px 0; }

.note { padding: 8px 13px 12px; font-size: 12.5px; color: var(--ink-2); }

.support-tag { font-size: 11px; color: var(--ink-3); font-weight: 500; }

/* A hard execution stop, not general advice. Butter + border + icon, never
   colour alone. */
.limit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 13px 0;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--butter);
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
}

.demo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--verm);
  text-decoration: none;
}
.demo-link:hover { text-decoration: underline; }

/* ---------- Exercise art ---------- */

.ex-icons { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.icon-eq-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  overflow: hidden;
}
.icon-eq { width: 24px; height: 24px; flex: 0 0 auto; color: var(--navy); }

/* Sized to the source 3:2 so there's no crop — a wide illustration squeezed
   into a square is an unreadable patch. */
.ex-photo {
  flex: 0 0 auto;
  width: 88px;
  height: 60px;
  padding: 0;
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--cream);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.1s;
}
.ex-photo:hover { transform: translate(-1px, -1px); }
.ex-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-photo.static { display: inline-flex; width: 58px; height: 40px; cursor: default; }
.ex-photo.static:hover { transform: none; }

/* ---------- Set logger ---------- */

.sets-grid {
  display: grid;
  grid-template-columns: 18px 1fr 1fr 42px minmax(60px, auto);
  gap: 7px;
  align-items: center;
  padding: 0 13px 12px;
}
.sets-grid .col-label {
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sets-grid .col-label.prev { text-align: right; }
.sets-grid .idx {
  font-family: var(--display);
  font-size: 12.5px;
  color: var(--navy);
  text-align: center;
}
.prev-set {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.set-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--ink-3);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--lav);
  transition: transform 0.1s, box-shadow 0.1s, background 0.12s;
}
.set-done:hover { background: var(--cream); }
.set-done[aria-pressed="true"] {
  background: var(--verm);
  color: var(--white);
  box-shadow: 2px 2px 0 var(--navy);
  transform: translate(1px, 1px);
}
.set-done svg { width: 16px; height: 16px; }

/* A logged set recedes so the eye lands on what's still to do. */
.sets-grid input.logged { background: var(--cream); color: var(--ink-2); }

/* ---------- Tappable exercise name ---------- */

/* block, not inline-flex: as a flex container a name that wraps to two lines is
   a single item, so the dot lands to the right of the whole block instead of
   after the last word. */
.ex-name.tappable-name {
  display: block;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.ex-name.tappable-name:hover { color: var(--verm); }
.name-tail { white-space: nowrap; }
.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: var(--ink-3);
  font-family: var(--body);
  font-style: italic;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 5px;
  vertical-align: 2px;
}
.ex-name.tappable-name:hover .info-dot { color: var(--verm); }

.ex-tools { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--lav);
  transition: transform 0.1s, box-shadow 0.1s, background 0.12s;
}
.tool-btn:hover { background: var(--butter); }
.tool-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.tool-btn.danger { color: var(--critical); border-color: var(--critical); }

/* ---------- Stat tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 11px; }
.tile {
  padding: 12px 13px;
  background: var(--card);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--lav);
}
.tile .label {
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tile .value {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.05;
  margin-top: 4px;
  color: var(--verm);
}
.tile .unit { font-size: 14px; color: var(--ink-2); margin-left: 3px; }
.tile .sub { margin-top: 3px; font-size: 11px; color: var(--ink-2); }
.tile-more { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--verm); }

.tile.tappable { text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform 0.1s, box-shadow 0.1s; }
.tile.tappable:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--lav); }

/* ---------- Volume rows ---------- */

/* Bar is what you did; the marker is what the plan prescribes. One hue, two
   steps — never an accent, so a chart value can't be read as a status. */
.vol-row {
  display: grid;
  grid-template-columns: 96px 1fr 92px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.vol-name { font-size: 12.5px; font-weight: 600; }

.vol-track {
  position: relative;
  height: 16px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 8px;
  overflow: hidden;
}
.vol-bar { position: relative; height: 100%; background: var(--series); min-width: 2px; }
.vol-bar.met { background: var(--series-met); }
.vol-target {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2.5px;
  margin-left: -1.25px;
  background: var(--navy);
}
.vol-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vol-meta .sets { font-weight: 700; color: var(--ink); }
.vol-meta .state { font-size: 11px; }

/* ---------- Weekly trend ---------- */

.trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 96px;
  padding-top: 6px;
  border-bottom: 2px solid var(--navy);
}
.trend-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.trend-bar {
  background: var(--series);
  border: 2px solid var(--navy);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: filter 0.12s;
}
.trend-col:hover .trend-bar { filter: brightness(1.15); }
.trend-bar.zero { background: var(--cream); }
.trend-axis { display: flex; gap: 3px; margin-top: 5px; }
.trend-axis span {
  flex: 1 1 0;
  min-width: 0;
  font-size: 9.5px;
  color: var(--ink-2);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Tables ---------- */

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left;
  padding: 7px 8px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}
table.data td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
table.data td.name { color: var(--ink); font-weight: 600; font-variant-numeric: normal; }
table.data tr:last-child td { border-bottom: none; }

/* ---------- Library ---------- */

.lib-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .lib-grid { grid-template-columns: 1fr 1fr; } }

.lib-list { display: flex; flex-direction: column; gap: 6px; }
.lib-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.lib-item:hover { background: var(--cream); }
.lib-item[aria-pressed="true"] { background: var(--butter); }
.lib-item .n { font-size: 13px; font-weight: 600; }
.lib-item .m { font-size: 11px; color: var(--ink-2); }

.muscle-figure {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  background: var(--cream);
  overflow: hidden;
  cursor: zoom-in;
}
.muscle-figure img { width: 100%; height: auto; display: block; }

/* SVG body-map fallback, used only when a muscle has no image. */
.bodymap { display: block; }
.bodymap .bm-outline { fill: var(--white); stroke: var(--navy); stroke-width: 1.5; }
.bodymap .r-on { fill: var(--verm); }
.bodymap .r-sec { fill: var(--verm); opacity: 0.35; }
.bodymap-pair { display: inline-flex; gap: 6px; align-items: flex-start; }
.bodymap-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 2px solid var(--navy);
}

/* ---------- Banners ---------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 2px solid var(--navy);
  font-size: 12.5px;
}
.banner.warn { background: var(--butter); color: var(--navy); }
.banner.info { background: var(--lav); color: var(--navy); }
.banner .icon { flex: 0 0 auto; font-weight: 700; }
.banner ul { margin: 6px 0 0; padding-left: 18px; }
.banner code { background: rgba(255, 255, 255, 0.5); padding: 0 3px; border-radius: 3px; }

/* ---------- Dialogs ---------- */

/* Viewport units, not `calc(100% - Npx)`: for an element in the top layer the
   percentage basis is unreliable and once collapsed a dialog to the width of
   its close button. */
dialog {
  width: min(460px, calc(100vw - 28px));
  padding: 17px 18px calc(18px + env(safe-area-inset-bottom));
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--lav);
}
dialog::backdrop { background: rgba(43, 44, 107, 0.35); backdrop-filter: blur(2px); }
dialog h3 { margin-bottom: 7px; }
dialog p { margin: 0 0 14px; font-size: 13px; color: var(--ink-2); }
dialog textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  resize: vertical;
}
dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
/* When the row wraps on a phone, ragged right-aligned orphans look broken —
   let the buttons share each row instead. */
@media (max-width: 560px) {
  dialog .dialog-actions .btn { flex: 1 1 auto; }
}

#photo-dialog { width: min(760px, calc(100vw - 24px)); padding: 0; border: none; background: transparent; box-shadow: none; }
#photo-dialog img { width: 100%; height: auto; display: block; border: 2px solid var(--navy); border-radius: var(--radius); }
#photo-dialog figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-family: var(--display);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--ink);
}
#photo-dialog .src { font-family: var(--body); font-size: 11px; font-weight: 400; text-transform: none; color: var(--ink-2); }

/* The flex layout MUST be scoped to [open]: a closed <dialog> is display:none
   via the UA stylesheet, and an unconditional display would defeat it — which
   once left the picker rendered on every page. */
#picker-dialog { width: min(520px, calc(100vw - 24px)); max-height: 82vh; }
#picker-dialog[open] { display: flex; flex-direction: column; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
#picker-dialog [data-role="body"] { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.picker-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.picker-item:hover { background: var(--butter); }
.pi-text { display: flex; flex-direction: column; min-width: 0; }
.pi-name { font-size: 14px; font-weight: 600; }
.pi-meta { font-size: 11px; color: var(--ink-2); }

#exercise-dialog { width: min(520px, calc(100vw - 24px)); max-height: 86vh; overflow-y: auto; }
.detail-photo {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background: var(--cream);
}

/* ---------- Session footer ---------- */


/* ---------- Phones ---------- */

@media (max-width: 560px) {
  h2 { font-size: 24px; }

  /* The exercise header is icons | name | prescription. Below ~560px the name
     column gets squeezed enough to wrap mid-word and interleave with the
     prescription, so stack instead. */
  .ex-head { flex-wrap: wrap; }
  /* Basis 0, not auto: on auto the name column's hypothetical size plus the photo
     and the swap button overflow the row on longer names, so the button wrapped
     onto row 2 on some cards and not others. Basis 0 keeps row 1 fixed. */
  .ex-titles { flex-basis: 0; }
  .ex-pres { flex: 1 1 100%; order: 3; display: flex; align-items: baseline; gap: 10px; margin-top: 2px; text-align: left; }
  .ex-pres .rest { order: 2; }

  .sets-grid { grid-template-columns: 16px 1fr 1fr 38px minmax(52px, auto); gap: 6px; }
  .vol-row { grid-template-columns: 84px 1fr 84px; }

  .card > .spread { flex-wrap: wrap; }
  .card > .spread > .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}