:root {
  --bg: #131316;
  --fg: #e8e8e5;
  --muted: #9b9b97;
  --line: #2c2c31;
  --green: #2f7d4f;
  --green-dark: #4ade80;
  --red: #8b3a3a;
  --accent: #60a5fa;
  --danger: #f87171;
  --cell-off: #1d1d21;
  --card: #1c1c20;
  /* extra breathing room under the bottom nav. In a browser tab there's no home
     indicator, so keep it small; the installed PWA (standalone) has no browser
     chrome and a home indicator, so give it much more (added below). */
  --nav-pad-bottom: 0.7rem;
  color-scheme: dark;
}
@media (display-mode: standalone) {
  :root { --nav-pad-bottom: 2.1rem; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.75rem 1rem 4rem;
}

a { color: var(--accent); }
h1 { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.topbar-left { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
  font-size: 1.15rem;
}
/* back button: hidden in a normal browser tab (it has its own back), shown only
   when launched as an installed PWA (standalone) where there's no browser chrome */
.nav-back {
  display: none; background: none; border: none; color: var(--fg);
  font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0; margin: 0;
}
@media (display-mode: standalone) {
  .nav-back { display: inline-flex; align-items: center; }
}
nav { display: flex; gap: 1rem; align-items: center; }
.nav-top { gap: 1.5rem; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }

.inline { display: inline; }
.link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.link:hover { text-decoration: underline; }
.link.danger { color: var(--danger); }

.flash {
  list-style: none;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  background: #2a2412;
  border: 1px solid #5d4f1e;
  border-radius: 6px;
}
.flash li { padding: 0; }

.epigraph-bottom {
  margin: 2.5rem 0 0;
  padding: 0;
  font-style: italic;
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
}

.locked {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
}

/* User list (explore, followers, following) */
.user-list { list-style: none; padding: 0; margin: 1rem 0; }
.user-list li { margin-bottom: 0.5rem; }
.user-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
}
.user-card-text { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Avatars (uploaded photo or generated initial) ---------- */
.avatar { display: inline-block; line-height: 0; border-radius: 50%; overflow: hidden; flex: none; }
.avatar svg, .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 84px; height: 84px; }
.avatar-md { width: 38px; height: 38px; }
.avatar-xs { width: 26px; height: 26px; }
.avatar-story { width: 74px; height: 74px; }
.avatar-upload { cursor: pointer; touch-action: manipulation; }
.avatar-upload:hover { filter: brightness(1.15); }

/* Crop popup (square crop with zoom + drag, posts a 512px PNG) */
.crop-modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.65); padding: 1rem;
}
.crop-modal[hidden] { display: none; }
.crop-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem; max-width: 320px; width: 100%;
}
.crop-title { margin: 0 0 0.6rem; font-weight: 600; text-align: center; }
.crop-viewport {
  position: relative; width: 260px; height: 260px; margin: 0 auto;
  overflow: hidden; border-radius: 8px; background: #000;
  touch-action: none; cursor: grab; user-select: none;
}
.crop-viewport:active { cursor: grabbing; }
.crop-img { position: absolute; max-width: none; pointer-events: none; }
.crop-ring {
  position: absolute; inset: 0; pointer-events: none; border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) inset;
  -webkit-mask: radial-gradient(circle 130px at center, transparent 99%, #000 100%);
          mask: radial-gradient(circle 130px at center, transparent 99%, #000 100%);
}
.crop-zoom { width: 100%; margin: 0.8rem 0 0.2rem; }
.crop-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.crop-actions button { flex: 1; padding: 0.55rem 0; border-radius: 8px; cursor: pointer; font: inherit; }
.crop-cancel { background: none; border: 1px solid var(--line); color: var(--fg); }
.crop-save { background: var(--accent); border: 1px solid var(--accent); color: #10131a; font-weight: 600; }
.user-card:hover { border-color: var(--accent); }
.user-name { font-weight: 600; }
.user-name .lock { font-size: 0.8rem; margin-left: 0.25rem; }
.user-meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

/* Auth forms */
.auth-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 320px; }
.auth-form label { display: flex; flex-direction: column; font-size: 0.9rem; color: var(--muted); }
.auth-form input {
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  margin-top: 0.25rem;
}
.auth-form small { color: var(--muted); margin-top: 0.25rem; }
.auth-form button {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background: var(--accent);
  color: #10131a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Profile header */
.grid-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
/* location under the name, bio + actions on their own rows (Instagram-style) */
.profile-location { font-size: 0.85rem; color: var(--muted); }
.profile-bio { margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.4; white-space: pre-line; }
.profile-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* subtle "✎ Edit" pinned to the top-right of your own profile */
.profile-edit-top {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--muted); text-decoration: none; font-size: 0.9rem;
}
.profile-edit-top:hover { color: var(--fg); }
.edit-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grid-header h1 { margin: 0; font-size: 1.35rem; font-weight: 600; }
/* Instagram-ish header: big round photo, name + stats stacked and centered on it */
.name-row { display: inline-flex; align-items: center; gap: 0.9rem; min-width: 0; }
.name-col { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.name-col h1 { line-height: 1.2; }
.bio-stats { display: inline-flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.bio-stat { white-space: nowrap; }
.bio-input {
  width: 4.2rem; font-size: 0.8rem; padding: 0.15rem 0.4rem; text-align: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg);
  transition: background 0.2s, border-color 0.2s;
}
.bio-input.saved { background: #13301f; border-color: var(--green); }
.bio-input.error { background: #311619; border-color: var(--red); }
/* height shows as plain text like the bw stat; tap to reveal the input */
.height-edit { display: inline-flex; align-items: baseline; }
.height-display { cursor: pointer; }
.height-display:hover { color: var(--fg); text-decoration: underline dotted; text-underline-offset: 2px; }
.bio-stat.saved { color: var(--green-dark); }
.bio-stat.error { color: var(--red); }
/* followers / following, stacked under the name + stats, right of the avatar */
.profile-follows { display: inline-flex; gap: 0.45rem; align-items: baseline; font-size: 0.85rem; color: var(--muted); margin-top: 0.1rem; }
.profile-follows .meta-link { color: var(--muted); text-decoration: none; }
.profile-follows .meta-link:hover { color: var(--fg); }
.profile-follows strong { color: var(--fg); }
.profile-follows .dot { color: var(--line); }
.header-left { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.header-meta { font-size: 0.85rem; color: var(--muted); display: inline-flex; gap: 0.4rem; align-items: baseline; white-space: nowrap; }
.header-meta .dot { color: var(--line); }
.header-meta .meta-link { color: var(--muted); text-decoration: none; }
.header-meta .meta-link strong { color: var(--fg); }
.header-meta .meta-link:hover { color: var(--fg); }
.header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.profile-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
/* Instagram-style view tab bar: full-width, centered icons, active is underlined */
.view-tabs {
  display: flex; border-top: 1px solid var(--line); margin: 0.3rem 0 0.6rem;
}
.view-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0.7rem 0; color: var(--muted); text-decoration: none;
  border-top: 2px solid transparent; margin-top: -1px;
}
.view-tab.active { color: var(--fg); border-top-color: var(--fg); }
.view-tab:hover { color: var(--fg); }
.view-tab-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.profile-meta strong { color: var(--fg); }
.profile-meta .dot { color: var(--line); }
.profile-meta .meta-link { color: var(--muted); text-decoration: none; }
.profile-meta .meta-link:hover { color: var(--fg); }

/* headline 1RMs (bench / deadlift / squat) under the meta row; ~ = Epley estimate.
   For the owner the row hides behind a small "1RM" disclosure until a max is set. */
.maxes-row {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--muted); margin-bottom: 0.75rem;
}
.maxes-row { flex-wrap: nowrap; }
.maxes-label,
button.maxes-toggle {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
  text-decoration: none; flex-shrink: 0;
}
button.maxes-toggle:hover { color: var(--fg); }
.maxes-fields { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: nowrap; }
.maxes-fields[hidden] { display: none; }
@media (max-width: 480px) {
  .maxes-row { gap: 0.35rem; font-size: 0.75rem; }
  .maxes-fields { gap: 0.35rem; }
  .max-item { gap: 0.15rem; }
  .max-input { width: 2.5rem; font-size: 0.75rem; padding: 0.12rem 0.1rem; }
}
.max-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.max-name { color: var(--muted); }
.max-val { color: var(--fg); font-weight: 600; }
.max-input {
  width: 3.2rem; font-size: 0.8rem; padding: 0.15rem 0.25rem; text-align: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg);
  font-weight: 600;
  -moz-appearance: textfield;
  transition: background 0.2s, border-color 0.2s;
}
.max-input::-webkit-outer-spin-button,
.max-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.max-input.saved { background: #13301f; border-color: var(--green); }
.max-input.error { background: #311619; border-color: var(--red); }

.btn-follow {
  margin-left: 0.5rem;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #10131a;
  cursor: pointer;
  font-weight: 500;
}
.btn-follow:hover { opacity: 0.9; }
.btn-follow.active { background: var(--card); color: var(--accent); }
.btn-follow.active:hover { background: #3a191c; border-color: var(--danger); color: var(--danger); }
.btn-message { background: var(--card); color: var(--accent); text-decoration: none; display: inline-block; }

/* Self settings row (visibility + unit) */
.self-settings { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.vis-toggle, .unit-toggle {
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  white-space: nowrap;
}
.vis-toggle.vis-private   { color: var(--muted); }
.vis-toggle.vis-followers { color: #d9a548; border-color: #5d4f1e; background: #2a2412; }
.vis-toggle.vis-public    { color: #4ade80; border-color: #1e4d2e; background: #13301f; }
.vis-toggle:hover, .unit-toggle:hover { border-color: var(--accent); }
.unit-toggle { color: var(--fg); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }

/* Week / month nav */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
.month-nav a {
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  color: var(--fg);
}
.month-nav a:hover { background: var(--card); border: 1px solid var(--line); padding: calc(0.25rem - 1px) calc(0.6rem - 1px); }
.month-title { font-weight: 600; min-width: 0; text-align: center; }
/* week/month scroller: arrows hug the date range; W/M toggle pinned to the right */
.month-nav { position: relative; gap: 0.4rem; }
.month-scroll { display: inline-flex; align-items: center; gap: 0.45rem; }

.today-jump-row { text-align: center; margin: -0.5rem 0 1rem; }
.today-jump { font-size: 0.8rem; text-decoration: none; color: var(--muted); }
.today-jump:hover { color: var(--accent); }

.onboard {
  background: #2a2412;
  border: 1px dashed #5d4f1e;
  color: #d9b873;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

/* ---------- Logger (add panel) ---------- */
.logger {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem;
  margin-bottom: 1.25rem;
}
/* With JS the logger stays collapsed until "+ exercise" opens it. Hiding it from
   the first paint (via the html.js class) avoids a flash of the pills on load —
   without JS it renders as a normal no-JS fallback. */
html.js .logger { display: none; }
/* Open = a modal popup overlay (fixed), regardless of where the logger sits in the
   DOM. The html.js prefix keeps this winning over `.day-card .logger`. */
html.js .logger.logger-open {
  display: flex; position: fixed; inset: 0; z-index: 1100;
  /* top-anchored (not centered) so switching Lift/Cardio/Sport tabs — which changes
     the content height — doesn't make the popup jump vertically */
  align-items: flex-start; justify-content: center; padding: 6vh 1rem 1rem;
  background: rgba(0, 0, 0, 0.6); margin: 0; border: none;
}
.day-pick-wrap { display: inline-flex; align-items: center; gap: 0.35rem; }
.day-pick-label { color: var(--muted); font-size: 0.85rem; }
.day-pick {
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-family: inherit;
  color: var(--fg);
  cursor: pointer;
}

.presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.presets > form { display: contents; }
.chip {
  background: var(--card);
  color: var(--fg);
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}
.chip:hover { background: #232328; border-color: var(--accent); }

.logger-hint { font-size: 0.8rem; }

/* standalone "Rest day" pill (sits after the category dropdowns) */
.rest-pill-form { display: contents; }
.rest-pill { background: #232328; border-color: #3b3b42; color: #b0b0ba; font-weight: 600; }
.rest-pill:hover { background: #2b2b31; border-color: #4c4c55; }

/* Rest / Cardio entries render as plain markers (no sets/reps) */
.entry.marker { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; min-height: 1.6rem; }
.entry.marker + .entry, .entry + .entry.marker { border-top: 1px dashed var(--line); }
.marker-name { font-weight: 600; color: var(--muted); }
.entry.marker .entry-tools { margin-left: auto; }

/* The add-exercise picker box (the popup's inner panel) */
.preset-groups {
  display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: 82vh;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.ex-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line);
}
.ex-picker-title { font-weight: 600; }
.ex-picker-close { background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
/* Lift · Cardio · Sport tabs — the active one decides the A→Z list */
.ex-tabs { display: flex; border-bottom: 1px solid var(--line); }
.ex-tab {
  flex: 1; background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 0.6rem 0; font-size: 0.92rem; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ex-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.ex-search {
  margin: 0.6rem 0.8rem 0.4rem; padding: 0.5rem 0.7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
}
.ex-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.2rem 0.8rem 0.7rem; }
.ex-filter {
  flex: 0 0 auto; background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.ex-filter.active { background: var(--accent); border-color: var(--accent); color: #10131a; font-weight: 600; }
.ex-list { flex: 1; overflow-y: auto; padding: 0.2rem 0; }
.ex-row-wrap { display: flex; align-items: center; border-top: 1px solid var(--line); }
.ex-row-wrap:first-child { border-top: none; }
.ex-add-form { flex: 1; display: flex; }
.ex-row {
  flex: 1; display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start;
  background: none; border: none; cursor: pointer; color: var(--fg);
  padding: 0.6rem 0.9rem; text-align: left; font: inherit;
}
.ex-row:hover { background: rgba(255, 255, 255, 0.05); }
.ex-row-name { font-weight: 500; }
.ex-row-cat { font-size: 0.78rem; color: var(--muted); }
.ex-row-wrap .ex-del { padding: 0 0.8rem; font-size: 1.1rem; }
.ex-new { padding: 0.6rem 0.8rem; border-top: 1px solid var(--line); }
.ex-new > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; list-style: none; }
.ex-new > summary::-webkit-details-marker { display: none; }
.ex-new .add-ex-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

/* Body-part preset groups (legacy; unused by the picker) */
.preset-groups-legacy { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.preset-group { border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.preset-group[open] {
  border-radius: 12px;
  flex-basis: 100%;
  border-color: var(--accent);
  background: #1e1e23;
}
.preset-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
}
.preset-group > summary::-webkit-details-marker { display: none; }
.preset-group > summary:hover { color: var(--accent); }
.preset-group[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
.preset-group .presets { margin: 0.25rem 0.5rem 0.5rem; }

/* an exercise pill = "add to day" chip + a small "remove from library" × */
.ex-pill { display: inline-flex; align-items: center; gap: 1px; }
.ex-del-form { display: inline; }
.ex-del {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 0.95rem; line-height: 1; padding: 0 0.15rem;
}
.ex-del:hover { color: var(--danger); }

.add-ex-group .add-ex-form {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0.6rem 0.3rem;
}
.add-ex-form .name-input,
.add-ex-form .new-cat-input,
.cat-select {
  font-size: 1rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg);
}
/* category select + Add button on the first row; exercise name on its own row below */
.add-ex-form .name-input { flex: 1 1 100%; min-width: 8rem; order: 1; }
.cat-select { font-family: inherit; cursor: pointer; }
.add-ex-form button {
  padding: 0.45rem 1rem; background: var(--accent); color: #10131a;
  border: none; border-radius: 6px; cursor: pointer;
}
.add-ex-hint { font-size: 0.8rem; margin: 0 0.6rem 0.6rem; }

/* Routines: editable workout presets. The group reuses .preset-group chrome; each
   row is an "apply" chip plus a small ✎ that expands an inline editor. */
.routines-body { margin: 0.25rem 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.routine-row { display: flex; align-items: flex-start; gap: 0.3rem; flex-wrap: wrap; }
.routine-chip { font-weight: 600; }
.routine-chip:hover { background: #232328; border-color: var(--accent); }

/* the ✎ / ＋ toggles look like small ghost chips */
.routine-edit { display: inline-block; }
.routine-edit-toggle {
  cursor: pointer; list-style: none; user-select: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--muted); font-size: 0.85rem; padding: 0.35rem 0.6rem; white-space: nowrap;
}
.routine-edit-toggle::-webkit-details-marker { display: none; }
.routine-edit-toggle:hover { color: var(--accent); border-color: var(--accent); }
.routine-edit[open] > .routine-edit-toggle { color: var(--accent); border-color: var(--accent); }
.new-routine-toggle { color: var(--fg); }

/* expanded editor: full-width card under the row */
.routine-editor {
  flex-basis: 100%; margin-top: 0.4rem; padding: 0.55rem 0.6rem;
  border: 1px solid var(--line); border-radius: 10px; background: #1a1a1f;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.routine-meta-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.routine-meta-form .emoji-input {
  width: 3rem; text-align: center; font-size: 1rem; padding: 0.4rem 0.3rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg);
}
.routine-meta-form .name-input {
  flex: 1; min-width: 7rem; font-size: 1rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg);
}
.routine-meta-form button, .new-routine .routine-meta-form button {
  padding: 0.45rem 0.9rem; background: var(--accent); color: #10131a;
  border: none; border-radius: 6px; cursor: pointer;
}
.routine-items { margin: 0 !important; }
.chip-static { cursor: default; }
.chip-static:hover { background: var(--card); border-color: var(--line); }
.routine-empty { font-size: 0.85rem; }
.routine-add-form { margin: 0 !important; }
.routine-del-form { align-self: flex-start; }
.routine-del {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 0.8rem; padding: 0.2rem 0; text-decoration: underline;
}
.routine-del:hover { color: var(--danger); }
.new-routine { align-self: flex-start; }

.logger-actions { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }

.custom-add { margin-top: 0.25rem; }
.custom-add summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.25rem 0;
  list-style: none;
}
.custom-add summary:hover { color: var(--accent); }
.custom-add[open] summary { margin-bottom: 0.5rem; }
.add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.add-form input {
  font-size: 1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}
.emoji-input { width: 3rem; text-align: center; }
.name-input { flex: 1; min-width: 8rem; }
.add-form button {
  padding: 0.45rem 1rem;
  background: var(--accent);
  color: #10131a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* sets × reps @ weight cluster (shared by add form + editable entries) */
.scheme-inputs { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); }
.scheme-inputs input[type="number"] {
  width: 3.1rem;
  font-size: 0.95rem;
  padding: 0.35rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  text-align: center;
  color: var(--fg);
  -moz-appearance: textfield;
}
.scheme-inputs input[type="number"]::-webkit-outer-spin-button,
.scheme-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scheme-inputs .at { color: var(--muted); }
.scheme-inputs .unit { font-size: 0.8rem; color: var(--muted); text-transform: lowercase; }
.scheme-inputs input.saved { background: #13301f; border-color: var(--green); }
.scheme-inputs input { transition: background 0.2s, border-color 0.2s; }

/* ---------- Week (stacked, mobile-friendly) ---------- */
.adding-to { font-size: 0.85rem; color: var(--fg); }
.adding-to strong { color: var(--accent); }
.small-action { font-size: 0.8rem; }

.week { display: flex; flex-direction: column; gap: 0.6rem; }
.day-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}
/* (no special border for "today" — the "today" text badge already marks it) */
.day-card.is-rest { background: #17171a; }
/* logged a workout → pastel-green accent strip + faint green tint (mirrors the
   green "workout" cells in the month calendar); a logged rest day → pastel-blue */
.day-card.is-logged { background: #15241a; box-shadow: inset 3px 0 0 0 #b5e0c0; }
.day-card.is-rest-logged { background: #161c2b; box-shadow: inset 3px 0 0 0 #b9cdf0; }
.day-card.is-future { opacity: 0.75; }
.week.selectable .day-card { cursor: pointer; }
.day-card.is-selected { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.day-card.is-clip-source { box-shadow: 0 0 0 2px var(--green-dark); }

.day-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
/* "Sun Jul 5" as one baseline-aligned unit so the date doesn't sit higher than the day */
.day-title { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.day-name { font-weight: 700; }
.day-label { color: var(--muted); font-size: 0.9rem; }
.day-head .day-tags { margin: 0; }
.badge-today {
  font-size: 0.7rem; font-weight: 600; color: #10131a; background: var(--accent);
  border-radius: 999px; padding: 0.05rem 0.45rem; text-transform: uppercase; letter-spacing: 0.04em;
}
/* optional daily check-in (body weight + sleep): tiny inline inputs (self) /
   pill badges (visitors + feed) */
.bw-badge {
  font-size: 0.72rem; color: var(--green-dark); background: #13301f;
  border: 1px solid #1e4d2e; border-radius: 999px; padding: 0.05rem 0.45rem; white-space: nowrap;
}
.sleep-badge {
  font-size: 0.72rem; color: #8ab4f8; background: #172441;
  border: 1px solid #2a4570; border-radius: 999px; padding: 0.05rem 0.45rem; white-space: nowrap;
}
.ck-item { display: inline-flex; align-items: center; gap: 0.2rem; }
.ck-input {
  width: 2.6rem; font-size: 0.78rem; padding: 0.12rem 0.2rem; text-align: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg);
  -moz-appearance: textfield;
  transition: background 0.2s, border-color 0.2s;
}
.ck-input::-webkit-outer-spin-button,
.ck-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ck-input.saved { background: #13301f; border-color: var(--green); }
.ck-input.error { background: #311619; border-color: var(--red); }
.ck-suffix { font-size: 0.72rem; color: var(--muted); }
.ck-edit { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; row-gap: 0.5rem; }
.ck-ro { display: inline-flex; align-items: center; gap: 0.3rem; }
/* body-weight / sleep on their own row under the date */
.ck-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0 0.35rem; min-height: 1.2rem; flex-wrap: wrap; }

/* Your own days are always editable: show the bw/sleep inputs, hide the badges. */
.week.selectable .ck-ro { display: none; }

/* "+ exercise": reveals the pills/presets menu for that day (always available) */
.add-exercise-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 1px dashed var(--line); border-radius: 8px;
  color: var(--muted); padding: 0.4rem 0.85rem; font-weight: 600; cursor: pointer;
  font-size: 0.9rem;
}
.add-exercise-btn:hover { border-color: var(--accent); color: var(--fg); }
/* ＋ exercise and ⚡ presets share a row */
.day-log-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; margin: 0.5rem 0 0.2rem; }
/* collapsible sleep · bw row (hidden by default) */
.ck-details { margin: 0.15rem 0 0.35rem; }
.ck-toggle {
  display: inline-block; list-style: none; cursor: pointer;
  background: #232328; border-color: #3b3b42; color: var(--muted); font-weight: 600;
}
.ck-toggle::-webkit-details-marker { display: none; }
.ck-toggle::marker { content: ""; }
.ck-details[open] > .ck-toggle { margin-bottom: 0.35rem; }

/* per-exercise editor accordion: tap the summary row to open/close the editor */
.entry-acc + .entry-acc { border-top: 1px dashed var(--line); }
.entry-acc-ro {
  cursor: pointer;
  /* long-press starts a drag, so suppress the text selection / iOS copy callout */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* name on its own line, the weights/reps on a second line below it */
.entry-acc-ro .entry-ro { flex-direction: column; align-items: flex-start; gap: 0.05rem; }
.entry-acc.open > .entry-acc-ro .entry-name { font-weight: 600; }
/* while editing, the steppers show the values → hide the summary scheme line */
.entry-acc.open > .entry-acc-ro .entry-scheme { display: none; }
.entry-acc.dragging { opacity: 0.55; background: #1d2438; border-radius: 8px; }
/* swipe-left-to-delete: the row slides under your finger, tinting red past threshold */
.entry-acc-ro, .set-item { will-change: transform; }
.entry-acc-ro.swipe-armed, .set-item.swipe-armed { background: rgba(229, 72, 77, 0.28); border-radius: 6px; }
.entry-acc-edit { padding: 0.1rem 0 0.2rem; }
/* Delete sits at the right end of the editor's action row */
.entry-del { margin-left: auto; }
.day-actions { margin-left: auto; display: inline-flex; gap: 0.6rem; align-items: center; font-size: 0.8rem; }
.copy-btn, .paste-btn { font-size: 0.8rem; }
.paste-btn { color: var(--green-dark); font-weight: 600; }
.paste-form { display: none; }
body.has-clip .day-card:not(.is-clip-source) .paste-form { display: inline; }

.entries { display: flex; flex-direction: column; gap: 0.35rem; }

/* editable entry (self) — ✓✕ pinned top-right, sets/reps/weight steppers below */
.entry { padding: 0.2rem 0; position: relative; }
.entry + .entry { border-top: 1px dashed var(--line); }
.entry-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.drag-handle {
  cursor: grab; color: var(--muted); touch-action: none; user-select: none;
  font-size: 1rem; line-height: 1; flex-shrink: 0; padding: 0 0.1rem;
}
.drag-handle:active { cursor: grabbing; }
.entry .entry-name { flex: 0 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry.dragging { opacity: 0.55; background: #1d2438; border-radius: 8px; }
body.reordering, body.reordering * { user-select: none; }
.entry .scheme-inputs { gap: 0.2rem; }
.entry .scheme-inputs input[type="number"] { width: 1.8rem; font-size: 0.88rem; padding: 0.25rem 0.15rem; }
.entry .scheme-inputs input[data-field="weight"],
.entry .scheme-inputs input[data-field="distance"] { width: 2.2rem; }
.entry .scheme-inputs { flex-wrap: wrap; row-gap: 0.3rem; }
.entry .scheme-inputs input.saved { background: #13301f; border-color: var(--green); }
.entry .scheme-inputs input.error { background: #311619; border-color: var(--red); }
.del-form { flex-shrink: 0; margin-left: auto; }

/* stacked ± steppers for sets / reps / weight (roomy, thumb-friendly; only the
   selected day shows these, so the extra height costs nothing elsewhere) */
.entry .scheme-inputs.stepper-rows {
  display: flex; flex-direction: column; align-items: stretch;
  flex-wrap: nowrap; gap: 0.3rem; margin-top: 0.1rem;
}
/* each row: [label] [ − n + ] [action] — the − n + columns line up across rows
   (uniform: Sets/Reps/Weight; vary: each set's Reps/Weight) */
.stepper-row { display: flex; align-items: center; gap: 0.5rem; }
.stepper-label { width: 3.2rem; flex: none; color: var(--muted); font-size: 0.9rem; text-transform: none; }
.stepper-controls { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.step-btn {
  width: 2.4rem; height: 1.7rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--fg); font-size: 1.2rem; line-height: 1;
  cursor: pointer; touch-action: manipulation; user-select: none;
}
.step-btn:hover { border-color: var(--accent); }
.step-btn:active { background: var(--card); transform: translateY(1px); }
.entry .scheme-inputs.stepper-rows .stepper-controls input[type="number"] {
  width: 3.4rem; flex: none; text-align: center; height: 1.7rem;
  font-size: 1rem; padding: 0.15rem 0.2rem; box-sizing: border-box;
}
/* vary mode: one set per box (Reps + Weight steppers), a thin divider between */
.set-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.2rem; }
.set-item { display: flex; align-items: center; gap: 0.4rem; }
.set-item + .set-item { border-top: 1px dashed var(--line); padding-top: 0.4rem; }
.set-steppers { flex: 1; min-width: 0; }
.set-remove { flex: none; }
.set-remove .danger { font-size: 0.95rem; }
/* left-aligned action row (vary / + set / all same) */
.entry .set-actions { display: flex; gap: 0.9rem; font-size: 0.85rem; margin-top: 0.3rem; }
.entry .vary-btn { font-size: 0.85rem; }
.entry-tools { display: flex; align-items: center; gap: 0.3rem; }

.rest-row { display: flex; align-items: center; gap: 0.6rem; }
.rest-row .muted { font-size: 0.9rem; }

/* Read-only entry line (others' profiles + feed) */
.entry-ro {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; flex-wrap: wrap;
}
.entry-ro + .entry-ro { border-top: 1px dashed var(--line); }
.entry-emoji { font-size: 1.1rem; }
.entry-name { font-weight: 500; }
.entry-scheme { color: var(--muted); font-size: 0.9rem; }
.entry-scheme .at { opacity: 0.6; }
.entry-scheme .bw { font-style: italic; }

/* ---------- Feed ---------- */
.feed-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}
.feed-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.feed-user { font-weight: 600; text-decoration: none; }
.feed-user:hover { text-decoration: underline; }
.feed-date { color: var(--muted); font-size: 0.85rem; }
/* the ⋯ options menu (edit / delete), pinned top-right of your own posts */
.feed-menu { margin-left: auto; position: relative; }
.feed-menu-btn { background: none; border: 0; padding: 2px 4px; cursor: pointer; color: var(--muted); display: inline-flex; }
.feed-menu-btn:active { opacity: .6; }
.feed-dots { width: 22px; height: 22px; fill: currentColor; }
.feed-menu-pop {
  position: absolute; top: 100%; right: 0; z-index: 20; margin-top: 0.25rem;
  min-width: 8.5rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); overflow: hidden;
}
.feed-menu-pop[hidden] { display: none; }
.feed-menu-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.6rem 0.8rem; background: none; border: 0; cursor: pointer;
  color: var(--fg); font-size: 0.95rem; text-align: left; text-decoration: none;
}
.feed-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.feed-menu-item.danger { color: var(--danger); }
.fm-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
/* share button lives at the right end of the like row */
.feed-share {
  margin-left: auto; background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center;
}
.feed-share:active { opacity: .6; }
.feed-share-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feed-edit { font-size: 0.8rem; color: var(--accent); text-decoration: none; }
.feed-edit:hover { text-decoration: underline; }
.feed-del .link { color: var(--muted); font-size: 1.1rem; line-height: 1; }
.feed-del .link:hover { color: var(--danger); }

.feed-kind { display: block; font-weight: 600; margin: 0.2rem 0; }
.feed-caption { display: block; margin: 0.1rem 0 0.5rem; white-space: pre-wrap; color: var(--fg); }
/* day tags shown inline after a post's caption (or as the label when captionless) */
.feed-tag {
  display: inline-block; margin-right: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; border: 1px solid var(--tc);
  /* text is the tag color pulled toward white, so even black tags stay readable */
  color: color-mix(in srgb, var(--tc) 55%, #e8e8ee);
  background: color-mix(in srgb, var(--tc) 16%, transparent);
}

/* Two-card post: a horizontal scroll-snap carousel (photo ↔ workout).
   overscroll-behavior-x: none kills the edge rubber band — real iPhones fling
   the last card deep past the border otherwise (simulator/desktop never show it). */
.post-carousel {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  align-items: flex-start;  /* slides keep natural height; JS sets the container's */
  /* softer, longer height ease on settle — the like-row/caption below ride this
     as the card resizes, so this is what makes THEM glide instead of hop */
  transition: height 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0.3rem 0 0.4rem;
}
.post-carousel.no-anim { transition: none; }  /* while the scroll drives the height */
.post-carousel::-webkit-scrollbar { display: none; }
/* min-width:100% (not flex-basis 100%) avoids fractional slide widths that leave a
   1px sliver of the neighbouring slide after snapping */
.post-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
/* width/height attrs on the <img> reserve the exact box (no layout jump) */
.feed-photo { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--cell-off); }
.post-slide-workout { display: block; text-decoration: none; color: inherit; }
.workout-card {
  box-sizing: border-box;  /* natural height — the carousel resizes to the active slide */
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  /* top-anchored so the week strip sits in the same spot on every card */
  padding: 0.6rem 0.8rem; display: flex; flex-direction: column; justify-content: flex-start;
}
.carousel-dots { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.carousel-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background 0.15s; }
.carousel-dots .dot.is-active { background: var(--muted); }
.workout-dur {
  margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed var(--line);
  color: var(--muted); font-size: 0.85rem; font-weight: 600;
}

/* Workout session: Start button + the running bottom bar */
.start-workout {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--green); color: #fff; border: none; border-radius: 8px;
  padding: 0.45rem 0.95rem; font-weight: 700; cursor: pointer; margin: 0.1rem 0 0.5rem;
}
.start-workout:hover { filter: brightness(1.08); }
.session-bar {
  position: fixed; left: 0; right: 0; z-index: 55;
  bottom: calc(3.85rem + var(--nav-pad-bottom) + env(safe-area-inset-bottom, 0));  /* sits above the bottom nav */
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--green); color: #fff; padding: 0.55rem 0.9rem;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.45);
}
.session-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: session-pulse 1.4s ease-in-out infinite; }
@keyframes session-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.session-timer { font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 800; }
.session-label { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; }
.session-cancel {
  margin-left: auto; background: none; color: rgba(255, 255, 255, 0.9); border: none;
  padding: 0.45rem 0.5rem; font-weight: 600; cursor: pointer;
}
.session-end {
  background: rgba(0, 0, 0, 0.28); color: #fff; border: none;
  border-radius: 8px; padding: 0.45rem 0.9rem; font-weight: 700; cursor: pointer;
}
.session-end:hover { background: rgba(0, 0, 0, 0.42); }
body.session-active { padding-bottom: calc(6.55rem + var(--nav-pad-bottom) + env(safe-area-inset-bottom, 0)); }
/* setting display on these elements overrides the UA [hidden] rule, so restore it:
   the bar shows only after Start, the Start button hides during a session */
.session-bar[hidden], .start-workout[hidden] { display: none !important; }

/* the post you just shared briefly glows when the feed scrolls to it */
@keyframes just-posted-glow {
  0%   { box-shadow: 0 0 0 2px var(--accent); background: #1b2540; }
  100% { box-shadow: 0 0 0 0 transparent; background: var(--card); }
}
.feed-card.just-posted { animation: just-posted-glow 2.6s ease-out; }

/* ideas & feedback board */
.idea-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.8rem 0 1.4rem; }
.idea-form textarea {
  font-family: inherit; font-size: 1rem; padding: 0.6rem; resize: vertical;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg);
}
.idea-form button { align-self: flex-start; }
.idea-list { display: flex; flex-direction: column; gap: 0.6rem; }
.idea {
  display: flex; gap: 0.5rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 0.7rem 0.9rem;
}
.idea.dragging { opacity: 0.6; outline: 2px solid var(--accent); }
body.reordering { cursor: grabbing; user-select: none; }
.idea-main { flex: 1; min-width: 0; }
.idea-drag {
  flex: none; background: none; border: none; color: var(--muted); cursor: grab;
  font-size: 1.1rem; line-height: 1.2; padding: 0 0.1rem; touch-action: none;
}
.idea-drag:hover { color: var(--fg); }
.idea-body { margin: 0 0 0.35rem; white-space: pre-wrap; }
.idea-meta { margin: 0; font-size: 0.78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.idea-meta a { color: var(--muted); text-decoration: none; }
.idea-meta a:hover { color: var(--fg); }
.idea-meta .inline { display: inline; }
.idea-meta .link { font-size: 0.78rem; }
/* edit-in-place: pencil (and save/cancel while editing) in the top-right corner */
.idea-edit-controls { flex: none; display: flex; gap: 0.3rem; align-items: center; }
.idea-edit-controls button {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 0.1rem 0.2rem; border-radius: 6px;
}
.idea-edit-controls button:hover { color: var(--fg); background: var(--bg); }
.idea-save-btn { color: var(--green-dark) !important; }
.idea.editing .idea-body {
  outline: none; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--bg); padding: 0.4rem 0.5rem;
}
.idea-backlog-wrap { margin-top: 1.3rem; }
.idea-backlog-wrap > summary {
  cursor: pointer; color: var(--muted); font-size: 0.9rem; font-weight: 600;
  padding: 0.3rem 0; list-style-position: inside;
}
.idea-backlog-wrap > summary:hover { color: var(--fg); }
.idea-backlog-wrap[open] > summary { margin-bottom: 0.6rem; }
.idea-backlog-wrap .idea { opacity: 0.82; }
.idea.is-closed .idea-body { text-decoration: line-through; color: var(--muted); }
.idea-closed-wrap .idea { opacity: 0.7; }

/* logged-out feed banner */
.feed-guest {
  font-size: 0.9rem; color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem;
}

/* heart like (outline → red), with the count beside it */
.like-row { display: flex; align-items: center; gap: 0.25rem; margin: 0.3rem 0; }
.like-btn, .like-static { background: none; border: none; padding: 0; line-height: 0; display: inline-flex; }
.like-btn { cursor: pointer; }
.heart { width: 26px; height: 26px; fill: none; stroke: var(--muted); stroke-width: 2;
         transition: fill 0.15s, stroke 0.15s, transform 0.1s; }
.like-btn:hover .heart, .like-static:hover .heart { stroke: var(--fg); }
.like-btn.liked .heart { fill: var(--danger); stroke: var(--danger); }
.like-btn:active .heart { transform: scale(1.15); }
.like-count-btn {
  background: none; border: none; cursor: pointer; color: var(--fg);
  font-size: 0.9rem; font-weight: 600; font-family: inherit; padding: 0 0.2rem;
}
.like-count-btn:hover { text-decoration: underline; }

/* who-liked-it modal */
.likes-modal {
  position: fixed; inset: 0; z-index: 1000; padding: 1rem;
  background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center;
}
.likes-modal[hidden] { display: none; }  /* the `hidden` attr must win over display:flex */
.likes-modal-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  width: 100%; max-width: 340px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
}
.likes-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); font-weight: 600;
}
.likes-close { background: none; border: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.likes-modal-body { overflow-y: auto; padding: 0.4rem; }
.likes-empty { padding: 0.6rem 0.8rem; }
.likers { list-style: none; margin: 0; padding: 0; }
.likers .liker {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem;
  text-decoration: none; color: var(--fg); border-radius: 8px;
}
.likers .liker:hover { background: var(--bg); }

/* comments */
.comments { border-top: 1px solid var(--line); margin-top: 0.5rem; padding-top: 0.5rem; }
.comment { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; margin-bottom: 0.3rem; }
.comment-user { font-weight: 600; text-decoration: none; white-space: nowrap; }
.comment-user:hover { text-decoration: underline; }
.comment-body { flex: 1; min-width: 0; word-break: break-word; }
.comment-del-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0; }
.comment-del-btn:hover { color: var(--danger); }
.comment-form { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.comment-form input {
  flex: 1; min-width: 0; font-size: 0.9rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg);
}
.comment-form button {
  padding: 0.4rem 0.8rem; background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--accent); cursor: pointer;
}
.comment-form button:hover { border-color: var(--accent); }

/* "post" action on a day card */
/* "post 🐗" button at the bottom-right of a day; vanishes once the day is posted */
.day-post { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.day-post-btn {
  background: var(--accent); color: #10131a; border: none; border-radius: 999px;
  padding: 0.3rem 0.9rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.day-post-btn:hover { filter: brightness(1.08); }

.routine-del-form { display: inline-flex; align-items: center; }

/* congrats page after posting */
.congrats { max-width: 460px; margin: 1rem auto; text-align: center; }
.congrats-hog { font-size: 3.5rem; line-height: 1; }
.congrats-title { margin: 0.3rem 0 0.2rem; }
.congrats-sub { color: var(--muted); margin: 0 0 1.2rem; }
.congrats-form { display: flex; flex-direction: column; gap: 0.8rem; text-align: left; }
.congrats-photo { width: 100%; border-radius: 8px; }
.congrats-file {
  display: flex; flex-direction: column; gap: 0.3rem; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 8px; padding: 0.7rem; color: var(--accent);
}
.congrats-file input { font-size: 0.85rem; color: var(--muted); }
.congrats-caption { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.congrats-caption textarea {
  font-family: inherit; font-size: 1rem; padding: 0.5rem; resize: vertical;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg);
}
.congrats-skip { display: inline-block; margin-top: 1rem; color: var(--muted); }
.congrats-cap { margin: 0.5rem 0 1rem; }
.congrats-cta { display: inline-block; margin-top: 1.2rem; text-decoration: none; }

/* Instagram-style composer */
.compose { max-width: 460px; margin: 1rem auto; }
.compose-title { margin: 0 0 0.2rem; }
.compose-sub { color: var(--muted); margin: 0 0 1rem; }
.compose-form { display: flex; flex-direction: column; gap: 0.8rem; }
.compose-photo {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 170px; border: 1px dashed var(--line); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--card);
}
.compose-photo input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.compose-photo-ph {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  color: var(--muted); font-size: 1.6rem;
}
.compose-photo-ph span { font-size: 0.85rem; }
.compose-preview { width: 100%; display: block; }
.compose-spinner {
  display: none; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
.compose-photo.uploading .compose-spinner { display: block; }
.compose-form textarea {
  font-family: inherit; font-size: 1rem; padding: 0.6rem; resize: vertical;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg);
}
.compose-share { width: 100%; padding: 0.7rem; font-size: 1rem; }

/* confetti overlay on the congrats page */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }

/* ---------- Month ---------- */
.month-grid-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 4px;
  padding: 0 5px;   /* mirror .cal-scroll's inner padding so labels sit over columns */
}
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mcell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cell-off);
  border-radius: 6px;
  text-decoration: none;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.mcell.empty { background: transparent; pointer-events: none; }
/* Neutral defaults so your tag colors own the palette (they're the only hue):
   trained-but-untagged = near-white fill, rest = gray fill, nothing = empty. */
.mcell.workout { background: #eef0f3; color: #10131a; font-weight: 600; box-shadow: none; }
.mcell.workout .mday { color: #10131a; }
.mcell.rest { background: #6b6b76; color: #f0f0f3; font-weight: 600; }
/* a tagged day: primary tag fills the cell solid (bg set inline), dark text; extra
   tags show as dots. Clears the untagged ring if the day is also a workout. */
.mcell.has-tag { border-color: var(--tc); color: #10131a; font-weight: 600; box-shadow: none; }
.mcell.has-tag .mday { color: #10131a; }
.mcell-dots { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.mcell-dots i { width: 5px; height: 5px; border-radius: 50%; }
/* today: slightly larger than its neighbors (selection stays the double ring,
   so the two markers can't be confused) */
.mcell.today { transform: scale(1.08); z-index: 1; }
/* when selected, today drops its bump — a scaled cell also scales its ring,
   which pushed it past the pane's edge padding and clipped it */
.mcell.today.selected { transform: none; }
.mcell.future { opacity: 0.5; }
/* (no hover outline — the selection double-ring is the only marker) */
.mcell .mday { position: absolute; top: 3px; left: 5px; font-weight: 500; }
.mcell-event { position: absolute; bottom: 2px; right: 3px; font-size: 0.7rem; line-height: 1; }

/* ===== Workout events (Partiful-style) ===== */
.btn-primary {
  background: var(--accent); color: #10131a; border: none; border-radius: 6px;
  padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; font-size: 0.95rem;
}
.btn-primary:hover { filter: brightness(1.08); }
/* loading state: hide the label, show a spinner (Share/Save while posting) */
.btn-primary.loading { color: transparent; pointer-events: none; position: relative; }
.btn-primary.loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 1.05em; height: 1.05em;
  margin: -0.525em 0 0 -0.525em; border-radius: 50%;
  border: 2px solid rgba(16, 19, 26, 0.3); border-top-color: #10131a;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.danger-link { background: none; border: none; color: var(--danger); cursor: pointer; text-decoration: underline; font-size: 0.85rem; padding: 0; }
.page-title { margin: 0.2rem 0 1rem; }
.count { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.field-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.field-row label { flex: 1; min-width: 7rem; }

/* nav events link + unanswered-invite badge */
.nav-invites { position: relative; }
.nav-badge {
  display: inline-block; min-width: 1.1rem; text-align: center; margin-left: 0.15rem;
  background: var(--danger); color: #10131a; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; padding: 0 0.3rem; line-height: 1.3;
}

/* shared event form (plan-event + edit) */
.event-form { display: flex; flex-direction: column; gap: 0.6rem; }
.event-form label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--muted); gap: 0.2rem; }
.event-form input[type="text"], .event-form input[type="date"], .event-form select {
  font-size: 1rem; padding: 0.45rem 0.5rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); color: var(--fg); font-family: inherit;
}
/* nav icon items (emoji, no text) — uniform centered boxes so they line up with
   each other and the avatar regardless of each glyph's internal metrics. */
.nav-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; font-size: 1.15rem; line-height: 1; text-decoration: none;
}
/* Instagram-style line icons in the top bar (ideas · settings · notifications) */
.nav-ic { display: inline-flex; align-items: center; justify-content: center; height: 26px; text-decoration: none; position: relative; color: var(--fg); }
.nav-ic-svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-ic:hover { color: var(--accent); }
/* the eyes glyph renders high in its box; nudge it down to match the row */
.nav-feed { position: relative; top: 1.5px; }

/* notification bell + unread dot */
.nav-bell { position: relative; }
.nav-dot {
  position: absolute; top: 1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e5484d; border: 1.5px solid var(--bg);
}

/* notifications page */
.notif-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.notif {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); text-decoration: none; color: inherit;
}
.notif:hover { border-color: var(--accent); }
.notif-unread { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.notif-text { font-size: 0.92rem; line-height: 1.35; }
.notif-comment { color: var(--muted); }
.notif-when { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }

/* nav avatar (top-right) */
.nav-avatar { display: inline-flex; align-items: center; padding: 0; }
.nav-avatar .avatar { transition: outline 0.1s; }
.nav-avatar:hover .avatar { outline: 2px solid var(--accent); outline-offset: 1px; }

/* "Plan an event" card on the Events tab */
.plan-event-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 1.4rem; }
.plan-event-summary {
  cursor: pointer; list-style: none; padding: 0.7rem 0.9rem; font-weight: 600;
  user-select: none;
}
.plan-event-summary::-webkit-details-marker { display: none; }
.plan-event-summary:hover { color: var(--accent); }
.plan-event-card[open] > .plan-event-summary { border-bottom: 1px solid var(--line); }
.plan-event-form { margin: 0.8rem 0.9rem; }

/* event calendar on the Events tab — reuses .month-grid/.mcell chrome */
.ev-calendar { margin-bottom: 1.6rem; }
.ev-cell { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.ev-cell.has-ev { border-color: var(--accent); color: var(--fg); }
.ev-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.ev-cell.future { opacity: 0.85; }
a.ev-cell:hover { border-color: var(--accent); }
.ev-cell .mday { position: static; top: auto; left: auto; }
.ev-dots { display: flex; gap: 2px; margin-top: 2px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.ev-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--muted); }
.ev-dot.rel-hosting { background: var(--accent); }
.ev-dot.rel-going { background: #34c46a; }
.ev-dot.rel-maybe { background: #e0a83a; }
.ev-dot.rel-invited { background: var(--danger); }
.ev-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted); }
.ev-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* event page */
.event-card { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.event-host { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.9rem; margin: 0; }
.event-title { margin: 0; font-size: 1.8rem; }
.event-when { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; color: var(--fg); }
.event-past-tag, .event-today-tag {
  font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 600;
}
.event-today-tag { background: var(--accent); color: #10131a; }
.event-past-tag { background: var(--line); color: var(--muted); }
.event-note { margin: 0; color: var(--fg); }
.event-routine, .event-rsvp, .event-guests, .event-share, .event-owner {
  border-top: 1px solid var(--line); padding-top: 0.9rem;
}
.event-routine h2, .event-guests h2, .event-share h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.event-exlist { margin: 0.3rem 0 0.8rem; padding-left: 1.1rem; color: var(--fg); }
.event-exlist li { margin: 0.1rem 0; }
.log-event-btn { width: 100%; }

/* rsvp buttons */
.rsvp-prompt { margin: 0 0 0.5rem; font-weight: 600; }
.rsvp-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rsvp {
  flex: 1; min-width: 6rem; padding: 0.55rem 0.6rem; cursor: pointer; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); font-family: inherit;
}
.rsvp:hover { border-color: var(--accent); }
.rsvp.going.active { background: #1f7a44; border-color: #1f7a44; color: #eafff1; font-weight: 600; }
.rsvp.maybe.active { background: #8a6d1f; border-color: #8a6d1f; color: #fff7e3; font-weight: 600; }
.rsvp.no.active { background: #7a2f2f; border-color: #7a2f2f; color: #ffecec; font-weight: 600; }

/* guests */
.guest-avatars { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.guest { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 3.4rem; text-decoration: none; color: var(--muted); }
.guest-name { font-size: 0.72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-guests h3 { font-size: 0.9rem; color: var(--muted); margin: 0.8rem 0 0.4rem; }

/* share */
.share-row { display: flex; gap: 0.4rem; }
.share-url {
  flex: 1; font-size: 0.85rem; padding: 0.45rem 0.5rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); color: var(--muted);
}
.copy-link { padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; white-space: nowrap; }
.copy-link:hover { border-color: var(--accent); }

/* owner controls */
.owner-block { margin-bottom: 0.5rem; }
.owner-block > summary { cursor: pointer; padding: 0.4rem 0; color: var(--accent); }
.invite-form { display: flex; align-items: center; gap: 0.3rem; }
.invite-form .at-prefix { color: var(--muted); }
.invite-form input { flex: 1; font-size: 1rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
.invite-form button { padding: 0.45rem 0.9rem; background: var(--accent); color: #10131a; border: none; border-radius: 6px; cursor: pointer; }
.small { font-size: 0.8rem; }

@media (max-width: 600px) {
  .topbar { padding: 0.5rem 0.75rem; }
  nav { gap: 0.6rem; font-size: 0.9rem; }
  .entry-tools { gap: 0.2rem; }
  .scheme-inputs input[type="number"] { width: 2.7rem; }
  .month-title { min-width: 8rem; }
}

/* ===== Stories (Instagram-style) ===== */
.stories-row {
  display: flex; gap: 0.85rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.7rem;
  margin-bottom: 0.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stories-row::-webkit-scrollbar { display: none; }
.story { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; position: relative; }
.story-circle {
  background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%;
  display: inline-flex;
}
/* seen = grey ring, unseen = red ring (with a small gap like Instagram) */
.story-circle { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--line); }
.story.unseen .story-circle { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #e5484d; }
.story-add-btn {
  position: absolute; left: 50%; top: 60px; transform: translateX(13px);
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--accent); color: #10131a; font-size: 0.95rem; font-weight: 700;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.story-name {
  font-size: 0.72rem; color: var(--muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* full-screen viewer */
body.story-open { overflow: hidden; }
.story-viewer {
  position: fixed; inset: 0; z-index: 2000; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.story-viewer[hidden] { display: none; }
.story-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-segs {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; gap: 3px; padding: 8px 8px 0;
}
.story-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.story-seg.done { background: #fff; }
.story-seg i { display: block; height: 100%; width: 0; background: #fff; }
.story-topbar {
  position: absolute; top: 14px; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
}
.story-viewer-user { color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.story-close { background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.story-tap { position: absolute; top: 0; bottom: 0; width: 35%; background: none; border: none; cursor: pointer; z-index: 2; }
.story-tap-prev { left: 0; }
.story-tap-next { right: 0; width: 65%; }

/* ----- story viewer: caption + reply/heart bar + owner controls ----- */
.story-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 12px calc(2.6rem + env(safe-area-inset-bottom, 0)); }
.story-caption {
  color: #fff; font-size: 0.95rem; margin-bottom: 0.5rem; padding: 0.4rem 0.6rem;
  background: rgba(0,0,0,0.35); border-radius: 8px; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  max-height: 30vh; overflow-y: auto; white-space: pre-wrap; text-align: center;
}
.story-reply { display: flex; align-items: center; gap: 0.5rem; }
.story-reply input {
  flex: 1; min-width: 0; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; color: #fff; padding: 0.55rem 0.9rem; font-size: 0.95rem;
}
.story-reply input::placeholder { color: rgba(255,255,255,0.75); }
.story-heart {
  flex: none; background: none; border: none; color: #fff; font-size: 1.7rem; line-height: 1;
  cursor: pointer; opacity: 0.9; transition: transform 0.1s;
}
.story-heart.liked { color: #e5484d; }
.story-heart:active { transform: scale(1.2); }
.story-owner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
/* setting display above overrides the UA [hidden] rule, so restore it — the view
   count only belongs on your own story (JS toggles [hidden] via is_mine) */
.story-owner[hidden], .story-reply[hidden] { display: none; }
.story-owner-acts { display: flex; gap: 1rem; }
.story-owner .link { color: #fff; }
.story-seen {
  display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none;
  color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 0;
}
.story-seen-eye { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; }

/* viewers sheet (who saw your story) */
.svs { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; }
.svs[hidden] { display: none; }
.svs-box {
  width: 100%; max-height: 70vh; background: var(--card);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
}
.svs-head { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.svs-close { background: none; border: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.svs-body { overflow-y: auto; padding: 0.4rem; }
.svs-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; text-decoration: none; color: inherit; border-radius: 10px; }
.svs-row:hover { background: var(--bg); }
.svs-name { flex: 1; min-width: 0; font-weight: 500; }
.svs-heart { color: #e5484d; font-size: 1.05rem; }
.svs-empty { padding: 0.8rem; }
.story-owner .danger { color: #ff9b9b; }
.story-toast {
  position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 5;
  background: rgba(0,0,0,0.7); color: #fff; padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.9rem;
}
.story-toast[hidden] { display: none; }

/* ----- DM inbox + thread ----- */
.dm-inbox { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.6rem; }
.dm-thread {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.5rem; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.dm-thread:hover { background: var(--card); }
.dm-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.dm-thread-top { display: flex; justify-content: space-between; gap: 0.5rem; }
.dm-when { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.dm-preview { color: var(--muted); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-unread .dm-preview { color: var(--fg); font-weight: 600; }
.dm-badge {
  flex: none; background: #e5484d; color: #fff; border-radius: 999px; min-width: 1.2rem; text-align: center;
  font-size: 0.72rem; font-weight: 700; padding: 0 0.35rem; line-height: 1.4;
}

.dm-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.dm-back { text-decoration: none; font-size: 1.3rem; color: var(--fg); }
.dm-head-user { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: inherit; font-weight: 600; }
.dm-messages { display: flex; flex-direction: column; gap: 0.35rem; max-height: 62vh; overflow-y: auto; padding: 0.2rem 0; }
.dm-msg { display: flex; align-items: center; gap: 0.35rem; max-width: 82%; }
.dm-mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-theirs { align-self: flex-start; }
.dm-bubble {
  padding: 0.45rem 0.7rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.3rem; word-break: break-word;
}
.dm-mine .dm-bubble { background: #234; border-color: #2f4a6b; }
.dm-story-thumb { width: 90px; border-radius: 8px; display: block; }
.dm-like {
  background: none; border: none; color: var(--line); cursor: pointer; font-size: 0.95rem; padding: 0 0.15rem;
}
.dm-like.liked { color: #e5484d; }
.dm-compose { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.dm-compose input {
  flex: 1; min-width: 0; font-size: 0.95rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg);
}
.dm-compose button {
  padding: 0.45rem 1rem; background: var(--accent); color: #10131a; border: none; border-radius: 999px;
  font-weight: 600; cursor: pointer;
}

/* ===== Instagram-style bottom nav ===== */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--bg); border-top: 1px solid var(--line);
  min-height: 3.25rem; padding-top: 0.6rem;
  padding-bottom: calc(var(--nav-pad-bottom) + env(safe-area-inset-bottom, 0));  /* lift icons off the phone edge, IG-style; taller in the PWA */
}
.bnav {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; position: relative;
}
.bnav.active { color: var(--fg); }
.bnav:active { opacity: 0.6; }
.bnav-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bnav-avatar.active .avatar { outline: 2px solid var(--fg); outline-offset: 1px; }
.bnav .nav-dot { position: absolute; top: 0.7rem; right: calc(50% - 0.85rem); }
/* the prominent "+ new workout" button — its cell is flex:1 like every other nav
   item (so neighbours stay evenly centered); the accent pill lives in an inner span */
.bnav-add { flex: 1; background: none; border: none; cursor: pointer; padding: 0; }
.bnav-add-pill {
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
  width: 2.7rem; height: 1.9rem; border-radius: 9px;
  background: var(--accent); color: #10131a; font-size: 1.5rem; line-height: 1;
}
.bnav-add:active .bnav-add-pill { filter: brightness(0.9); }
/* leave room for the fixed bar (and the workout bar sits just above it) */
body { padding-bottom: calc(3.85rem + var(--nav-pad-bottom) + env(safe-area-inset-bottom, 0)); }

/* ===== DM new-message (search people) ===== */
.dm-title { display: flex; align-items: center; justify-content: space-between; }
.dm-title h1 { margin: 0; }
.dm-new-btn {
  font-size: 1.9rem; line-height: 1; text-decoration: none; color: var(--accent);
  width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.dm-new-btn:hover { background: var(--card); }
.dm-search {
  width: 100%; box-sizing: border-box; font-size: 1rem; padding: 0.55rem 0.9rem; margin: 0.5rem 0 0.8rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg);
}
.dm-people { display: flex; flex-direction: column; gap: 0.1rem; }
.dm-person { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem; border-radius: 10px; text-decoration: none; color: inherit; }
.dm-person:hover { background: var(--card); }
.dm-person[hidden] { display: none; }

/* ===== Instagram-style photo grid (profile "Grid" view) ===== */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.photo-cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cell-off); border-radius: 2px; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell:hover img { filter: brightness(0.85); }

/* notifications: clear-all + swipe-to-delete */
.notif-top { display: flex; justify-content: flex-end; margin-bottom: 0.4rem; }
.notif-clear { color: var(--muted); font-size: 0.85rem; }
.notif-clear:hover { color: var(--danger); }
.notif { will-change: transform; }
.notif.swipe-armed { background: rgba(229, 72, 77, 0.28); }

/* presets shown at the top of the day, above the workout name */
.day-presets { margin: 0; }
/* collapsed: just a "⚡ presets" pill; tapping it reveals the saved-preset chips */
.day-presets-toggle {
  display: inline-block; list-style: none; cursor: pointer;
  background: #2a2413; border: 1px solid #ca8a04; color: #fbbf24;
}
.day-presets-toggle::-webkit-details-marker { display: none; }
.day-presets-toggle::marker { content: ""; }
.day-presets[open] > .day-presets-toggle { margin-bottom: 0.35rem; }
.day-presets-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.day-presets .routine-chip { background: #2a2413; border-color: #ca8a04; color: #fbbf24; }

/* presets page */
.preset-page-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }
.preset-page-item { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 0.7rem 0.9rem; }
.preset-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.preset-page-name { font-weight: 600; }
.preset-page-exs { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; }

/* workout day name/label */
.day-label-input {
  width: 100%; box-sizing: border-box; margin: 0.15rem 0 0.3rem;
  font-size: 0.95rem; font-weight: 600; padding: 0.25rem 0.4rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--fg);
}
.day-label-input::placeholder { font-weight: 400; color: var(--muted); }
.day-label-input.saved { background: #13301f; border-color: var(--green); }
.day-label-ro { font-weight: 600; margin: 0.1rem 0 0.3rem; }
/* month calendar: workout name under the day number (kept tiny to fit the cell) */
.mcell-label {
  font-size: 0.55rem; line-height: 1.05; font-weight: 600; text-align: center;
  max-width: 100%; padding: 0 2px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ===== Tags: chips on a day card + the "＋ tag" input ===== */
.day-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.15rem 0 0.35rem; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--tc);
  /* text pulled toward white so even black tags stay readable */
  color: color-mix(in srgb, var(--tc) 55%, #e8e8ee);
  background: color-mix(in srgb, var(--tc) 16%, transparent);
}
.tag-x {
  background: none; border: 0; color: inherit; cursor: pointer; padding: 0;
  font-size: 0.95rem; line-height: 1; opacity: 0.7;
}
.tag-x:hover { opacity: 1; }
.day-tags.ro .tag-chip { padding: 0.12rem 0.55rem; }
.tag-add {
  background: none; border: 1px dashed var(--line); color: var(--muted);
  border-radius: 999px; padding: 0.12rem 0.55rem; font-size: 0.78rem; cursor: pointer;
}
.tag-add:hover { color: var(--accent); border-color: var(--accent); }
.tag-input {
  border: 1px solid var(--accent); border-radius: 999px; background: var(--bg); color: var(--fg);
  padding: 0.12rem 0.55rem; font-size: 0.78rem; width: 8rem;
}
/* tag manager on the presets page */
.tag-manage { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; }
.tag-row { display: flex; align-items: center; gap: 0.5rem; }
.tag-row input[type="color"] {
  width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto;
}
.tag-rename input {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg); padding: 0.35rem 0.5rem; font-size: 0.95rem; width: 10rem;
}
.tag-color-form { display: inline-flex; align-items: center; }
/* small icon-only action buttons (edit pencil / ✕ delete) */
.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center; padding: 0.25rem; font-size: 1rem; text-decoration: none;
}
.icon-btn:hover { color: var(--fg); }
.icon-btn.danger:hover { color: var(--danger); }

/* "＋ tag" picker: click an existing tag or type a new one */
/* the picker drops down below the row (absolute) so the "＋ tag" pill stays put */
.day-tags { position: relative; }
.tag-picker {
  position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 0.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  padding: 0.4rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); min-width: 12rem; max-width: 90vw;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.tag-pick-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag-pick {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  border-radius: 999px; padding: 0.12rem 0.55rem; font-size: 0.78rem; cursor: pointer;
}
.tag-pick:hover { border-color: var(--accent); color: var(--accent); }

/* month-view legend: color → tag name */
.month-key { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0.7rem 0 0.2rem; }
.mkey-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); }
.mkey-item i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* edit-profile form */
.edit-profile-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 440px; }
.ep-field { display: flex; flex-direction: column; gap: 0.3rem; }
.ep-label { font-size: 0.85rem; color: var(--muted); }
.ep-field input, .ep-field textarea {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); padding: 0.55rem 0.7rem; font: inherit; resize: vertical;
}
.ep-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; }

/* undo toast (swipe-delete) */
.undo-toast {
  position: fixed; left: 50%; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
  transform: translate(-50%, 1rem); z-index: 1200;
  display: flex; align-items: center; gap: 1rem;
  background: #26262c; color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.6rem 0.9rem; box-shadow: 0 6px 22px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s;
}
.undo-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.undo-btn { background: none; border: 0; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 0.95rem; }
.presets-h { margin-top: 1.5rem; }

/* presets page: create + edit */
.preset-new-form { display: flex; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.preset-new-form input {
  flex: 1; min-width: 0; font-size: 1rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
}
.preset-page-actions { display: inline-flex; align-items: center; gap: 0.8rem; }
.preset-rename {
  width: 100%; box-sizing: border-box; font-size: 1.15rem; font-weight: 600; margin: 0.4rem 0 0.8rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
}
.preset-rename.saved, .preset-item input.saved { background: #13301f; border-color: var(--green); }
.preset-items { display: flex; flex-direction: column; gap: 0.3rem; }
.preset-item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
}
.preset-item-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-item-fields { flex: none; color: var(--muted); }
.preset-item-fields input { width: 2.6rem; text-align: center; }
.preset-add-item { display: flex; gap: 0.35rem; margin-top: 0.7rem; flex-wrap: wrap; }
.preset-add-item input[type="text"] { flex: 1; min-width: 6rem; }
.preset-add-item input {
  font-size: 0.95rem; padding: 0.45rem 0.5rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--fg);
}
.preset-add-item input[type="number"] { width: 3rem; text-align: center; }
.preset-add-item button {
  padding: 0.45rem 0.9rem; background: var(--accent); color: #10131a; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;
}

/* Single-post permalink page */
.post-page { max-width: 480px; margin: 0 auto; }
/* "More from @user" grid on the permalink page */
.more-posts { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.more-posts-title { font-size: 0.95rem; font-weight: 600; color: var(--muted); margin: 0 0 0.7rem; }
.more-posts-title a { color: var(--fg); text-decoration: none; }
.more-posts-title a:hover { text-decoration: underline; }

/* ===== Month-view day popup: the day's full daily view in an iframe ===== */
.day-peek {
  position: fixed; inset: 0; z-index: 1000; padding: 0.6rem;
  background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center;
}
.day-peek[hidden] { display: none; }  /* the `hidden` attr must win over display:flex */
.day-peek-box {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; width: 100%; max-width: 460px;
  /* JS sizes the height to the workout's content (capped at 90vh); this is the
     loading default. max-height keeps a tall day scrollable. */
  height: 50vh; max-height: 90vh; overflow: hidden; transition: height 0.15s ease;
}
.day-peek-close {
  position: absolute; top: 0.35rem; right: 0.5rem; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0, 0, 0, 0.45);
  border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
/* while the add-exercise picker is open inside, the popup fills the screen so the
   picker is the same size as on the normal log page */
.day-peek.peek-full { padding: 0; }
.day-peek.peek-full .day-peek-box { height: 100dvh !important; max-width: 100%; border-radius: 0; }
.day-peek-frame { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity 0.15s; }
.day-peek-frame.loaded { opacity: 1; }
.day-peek-spin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.day-peek-spin[hidden] { display: none; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body.peek-open { overflow: hidden; }

/* ===== Embedded (chrome-stripped) day view rendered inside the popup iframe ===== */
body.embed { padding-bottom: 0; }
body.embed main { max-width: 100%; padding: 0.4rem 0.8rem 1.5rem; }
body.embed .grid-header, body.embed .maxes-row, body.embed .month-nav,
body.embed .epigraph-bottom, body.embed .view-tabs { display: none; }
/* inside the (full-screen) popup, the add-exercise picker fills the whole screen */
body.embed .logger.logger-open { padding: 0; }
body.embed .logger.logger-open .preset-groups {
  max-width: 100%; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0;
}

/* ===== Focused "new workout" page: hide the profile chrome, show a title + tabs ===== */
body.workout .grid-header, body.workout .view-tabs,
body.workout .epigraph-bottom, body.workout .today-jump-row { display: none; }
/* the cockpit shows the ‹ month › nav (it IS the month view now) */
/* session timer — a row inside today's card: after the actions, before the trackers */
.workout-bar { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
/* timer left, icon controls right — one row */
.workout-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.wtimer { font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 800; color: var(--green-dark); }
.wtimer.paused { color: var(--muted); }
/* icon buttons: ✕ cancel · ⏸/▶ pause-resume · ✓ finish */
.workout-timer-controls { display: flex; gap: 0.5rem; margin: 0; }
.wt-btn {
  width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); font-weight: 600; cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.wt-btn:active { filter: brightness(0.92); }
.wt-cancel { color: var(--danger); }
.wt-finish { background: var(--green); border-color: var(--green); color: #fff; }
/* stroke icons (same look as the nav SVGs); the pause button holds both glyphs */
.wt-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#wt-pause .ic-play { display: none; }
#wt-pause.is-paused .ic-play { display: block; }
#wt-pause.is-paused .ic-pause { display: none; }

/* ===== Settings ===== */
.settings-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.settings-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); text-decoration: none; color: var(--fg);
}
.settings-item:hover { border-color: var(--accent); }
.settings-item-name { font-weight: 600; }
.settings-item-arrow { color: var(--muted); font-size: 1.2rem; }
/* on/off switch */
.track-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; }
.toggle-switch {
  flex: 0 0 auto; width: 3.1rem; height: 1.7rem; border-radius: 999px; border: none; cursor: pointer;
  background: var(--line); position: relative; transition: background 0.15s; padding: 0;
}
.toggle-switch.on { background: var(--green); }
.toggle-knob {
  position: absolute; top: 50%; transform: translateY(-50%); left: 3px;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; transition: left 0.15s;
}
.toggle-switch.on .toggle-knob { left: calc(100% - 1.1rem - 3px); }
.track-note { margin-top: 0.4rem; }

/* ===== Per-exercise note (* toggle + text row) ===== */
.entry-name-wrap { display: inline-flex; align-items: baseline; gap: 0; }
.entry-note-toggle {
  background: none; border: none; cursor: pointer; padding: 0 0.35rem 0 0;
  color: var(--muted); font-weight: 700; font-size: 1.1rem; line-height: 1;
}
.entry-note-toggle.has-note { color: var(--accent); }

/* delete ✕ in the top-right corner of the name row — only while the exercise is
   expanded (tapped open); markers (Rest) show it since they can't expand */
.day-detail .entry-acc-ro { display: flex; align-items: flex-start; gap: 0.4rem; }
.day-detail .entry-acc-ro .entry-ro { flex: 1; min-width: 0; }
.dc-del-corner { flex-shrink: 0; display: none; }
.day-detail .entry-acc.open .dc-del-corner,
.day-detail .entry-acc.no-edit .dc-del-corner { display: block; }
.dc-del-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 0.95rem; padding: 0.1rem 0.15rem; line-height: 1; }
.day-detail .entry-acc-edit .entry-del { display: none; }  /* moved to the name row */
.entry-note-row { margin: 0.15rem 0 0.35rem; }
.entry-note-input {
  width: 100%; max-width: 22rem; padding: 0.4rem 0.6rem; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
}
.entry-note-input.saved { border-color: var(--green); }
.entry-note-input.error { border-color: var(--danger); }

/* ===== Custom trackable inputs in the day bar ===== */
.ck-bool { cursor: pointer; }
.ck-bool input { width: 1rem; height: 1rem; }
/* the 1–5 scale looks like the sleep/bw number pills: same size, no dropdown arrow —
   tap the number to open the native picker */
.track-scale {
  width: 2.6rem; font-size: 0.78rem; padding: 0.12rem 0.2rem; text-align: center; text-align-last: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.track-num.saved, .track-scale.saved { border-color: var(--green); }

/* ===== Tracking settings: custom trackables manager ===== */
.track-h { font-size: 1.05rem; margin: 1.4rem 0 0.6rem; }
.track-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.track-manage-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.track-manage-name { font-weight: 600; }
.track-manage-kind { color: var(--muted); font-size: 0.82rem; margin-left: auto; }
.track-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.track-add input[type="text"], .track-add select {
  font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--fg);
}
.track-add input[name="name"] { flex: 1 1 10rem; min-width: 8rem; }
/* Add panel: master list of trackables to pick from, then "create new" */
.track-add-panel { margin-top: 0.5rem; }
.track-add-btn { display: inline-block; list-style: none; cursor: pointer; }
.track-add-btn::-webkit-details-marker { display: none; }
.track-add-panel[open] > .track-add-btn { margin-bottom: 0.8rem; }
.track-catalog { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.track-cat-item { font-weight: 600; }

/* preset editor: default-tag selector */
.preset-tag-form { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.preset-tag-label { color: var(--muted); font-size: 0.9rem; }
.preset-tag-form select {
  font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--fg); cursor: pointer;
}

/* tag manager: drag handle to reorder */
.tag-drag { background: none; border: none; color: var(--muted); cursor: grab; font-size: 1.1rem; padding: 0 0.2rem; touch-action: none; }
.tag-row.dragging { opacity: 0.6; }

/* ===== Month view: master (grid) + detail (day workout) ===== */
.month-layout { display: block; }
.day-detail { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
@media (min-width: 761px) {
  /* minmax(0,1fr): grid items default to min-width:auto, so one long workout row
     would widen the panel column and shove the calendar around */
  .month-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
  .month-main, .day-detail { min-width: 0; }
  .day-detail { margin-top: 0; border-top: none; padding: 0 0 0 1.2rem; border-left: 1px solid var(--line); position: sticky; top: 0.5rem; }
}
/* selected day: double ring (dark gap + bright ring) reads on ANY cell color,
   plus a slight lift — no dimming, so the month's tag colors stay legible */
.mcell.selected {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #fff;
  z-index: 2;
}
/* the day card in the detail panel */
/* title + tags share the top row */
.dc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.dc-title { font-weight: 700; font-size: 1.05rem; }
.dc-head-tags { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.dc-tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.dc-entries { display: flex; flex-direction: column; }
.dc-entry { padding: 0.35rem 0; border-top: 1px dashed var(--line); }
.dc-entry:first-child { border-top: none; }
.dc-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.1rem; }
.dc-empty { padding: 0.5rem 0; }
/* trackers under the actions, set off by a thin divider; numbers at the earlier size */
.dc-track-bar { margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
/* plain-text tracker values on the read-only mirror */
.dc-track-ro { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.dc-track-item { font-weight: 600; font-size: 0.9rem; }
.dc-track-label { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.dc-track-bar .ck-input { font-size: 0.9rem; width: 3rem; }
.dc-track-bar .track-scale { font-size: 0.9rem; }
.dc-track-bar .ck-suffix { font-size: 0.8rem; }

/* weights sit inline after the name; the note box opens inline (grows to the end of
   the row, wrapping the weights to the next line if it doesn't fit) */
.day-detail .entry-acc-ro .entry-ro {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem;
}
.day-detail .entry-acc-ro .entry-scheme { color: var(--fg); }
.dc-note-inline { flex: 1 1 8rem; min-width: 6rem; display: inline-flex; }
.dc-note-inline[hidden] { display: none; }
.dc-note-inline input { width: 100%; font-size: 0.85rem; padding: 0.1rem 0.3rem; }

.dc-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 0.8rem; }
/* neutral solid pill — same shape/size as the preset pill, but color-neutral so
   green (presets) and blue (post) keep their meaning */
.dc-add {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--card); border: 1px solid #fff; border-radius: 999px; color: var(--fg);
  padding: 0.35rem 0.8rem; font-weight: 600; cursor: pointer; font-size: 0.85rem;
}
.dc-add:hover { border-color: var(--accent); }
/* match the preset pill's height to ＋ exercise (it inherited a larger font) */
.dc-actions .day-presets-toggle { display: inline-flex; align-items: center; font-size: 0.85rem; }
/* post to feed — blue, pushed to the far right of the actions row */
.dc-post-btn {
  margin-left: auto; align-self: center; white-space: nowrap; text-decoration: none;
  background: #2f7ff0; color: #fff; border: none; border-radius: 999px;
  padding: 0.35rem 0.95rem; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.dc-post-btn:hover { filter: brightness(1.1); }
/* presets open as a drop-UP overlay: the pill sits near the bottom of the page, so
   dropping down would run past the viewport with no way to scroll to it */
.dc-presets { position: relative; }
.dc-presets[open] > .day-presets-toggle { margin-bottom: 0; }
.dc-presets .day-presets-list {
  position: absolute; bottom: 100%; left: 0; z-index: 40; margin-bottom: 0.3rem;
  flex-direction: column; align-items: stretch; min-width: 9rem;
  max-height: 45vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.4rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
/* save-this-day-as-a-preset — compact ＋⚡ green pill (matches the presets button).
   Scoped to .day-detail to beat the .dc-save-preset link styling on the same button. */
.day-detail .dc-save-corner, .workout-card .dc-save-corner {
  margin-left: auto; flex-shrink: 0; align-self: center;
  background: #2a2413; border: 1px solid #ca8a04; border-radius: 999px;
  color: #fbbf24; cursor: pointer; text-decoration: none;
  font-size: 0.8rem; line-height: 1; padding: 0.22rem 0.55rem; white-space: nowrap;
}
.day-detail .dc-save-corner:hover, .workout-card .dc-save-corner:hover { filter: brightness(1.25); }

/* educate when there are no presets yet */
.dc-preset-hint { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.dc-preset-hint strong { color: var(--fg); }
.dc-save-preset {
  background: none; border: none; padding: 0; color: var(--accent); cursor: pointer;
  font: inherit; text-decoration: underline;
}


/* ===== Continuous calendar (Apple-style stacked months, internal scroll pane) ===== */
.cal-scroll {
  position: relative;               /* cells' offsetTop is measured against the pane */
  overflow-y: auto; overflow-x: hidden;  /* axis-locked: no horizontal wiggle */
  overscroll-behavior: contain;
  overflow-anchor: none;            /* we compensate scroll on prepend ourselves */
  max-height: min(78vw, 21rem);     /* no-JS fallback; JS pins to exactly 5 rows */
  scrollbar-width: none;
  padding: 5px 5px 0;               /* room for the ring + today bump at the edges */
}
.cal-scroll::-webkit-scrollbar { display: none; }
/* month seam: the month's abbreviation sits in the leading blank cells of its
   first row; spanning label/pad cells must not force the square cell ratio */
.mcell.mlabel, .cal-scroll .mcell.empty { aspect-ratio: auto; background: transparent; pointer-events: none; }
.mcell.mlabel {
  align-items: flex-start; justify-content: flex-start; padding: 4px 0 0 5px;
  font-weight: 800; font-size: 0.85rem; color: var(--fg); letter-spacing: 0.04em;
}
.mcell.mlabel-slim { padding: 0.4rem 0 0 5px; }
.cal-today-btn {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 0.75rem; padding: 0.15rem 0.6rem; cursor: pointer;
}
.cal-today-btn:hover { border-color: var(--accent); color: var(--fg); }

/* tags directly right of the like; share pinned to the far right */
.like-row-tags { margin-left: 0.2rem; display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.like-row .feed-share { margin-left: auto; }

/* ----- mini week strip on the feed workout card (month-view style) ----- */
.ws-labels { display: flex; gap: 4px; margin-bottom: 3px; justify-content: center; }
.ws-labels span { flex: 1; max-width: 2.3rem; text-align: center; font-size: 0.6rem; color: var(--muted); }
.ws-strip { display: flex; gap: 4px; justify-content: center; }
.ws-day {
  flex: 1; max-width: 2.3rem; aspect-ratio: 1 / 1; border: none; border-radius: 6px;
  background: var(--cell-off); color: var(--muted); font-size: 0.7rem; font-weight: 500;
  /* day number in the top-left corner, like the month view's cells */
  display: inline-flex; align-items: flex-start; justify-content: flex-start;
  padding: 3px 0 0 5px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.ws-day.trained { background: #eef0f3; color: #10131a; font-weight: 600; }  /* trained, untagged */
.ws-day[style] { color: #10131a; font-weight: 600; }      /* tag color set inline */
/* the day this card shows: a caret under its square + the same double ring the
   month calendar uses for selection (no dimming — all days keep full color) */
.ws-day { position: relative; }
.ws-day.selected::after {
  content: ""; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 6px solid var(--fg);
}
.ws-day.selected { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #fff; z-index: 1; }
.ws-key { margin: 0.35rem 0 0.55rem; }
.ws-body { margin-top: 1.05rem; }  /* air between the day squares and the date header */
.tag-name-fixed { color: var(--fg); font-size: 0.95rem; }
.tag-name-fixed .muted { font-size: 0.8rem; }

/* browse presets */
.presets-head-row { display: flex; align-items: center; gap: 0.7rem; }
.presets-head-row h1 { margin: 0; }
.browse-presets-btn { text-decoration: none; font-size: 0.85rem; }
.browse-by { color: var(--muted); font-weight: 400; font-size: 0.8rem; margin-left: 0.35rem; }
/* presets: inline editing (tap to open; name + tag pill on the row) */
/* left-packed (overrides preset-page-head's space-between): name, then tag right
   beside it — the edit-mode ✕ appearing can't shift them */
.preset-acc-head { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; justify-content: flex-start; }
.preset-acc-head .preset-del { margin-left: auto; }
.preset-rename-inline {
  flex: 1; min-width: 0; background: none; border: none; color: var(--fg);
  font: inherit; font-weight: 600; font-size: 1rem; padding: 0.15rem 0;
}
.preset-rename-inline:focus { outline: none; border-bottom: 1px solid var(--accent); }
.preset-tag-pill {
  -webkit-appearance: none; appearance: none; border: 1px dashed var(--line); border-radius: 999px;
  background: none; color: var(--muted); font: inherit; font-size: 0.8rem;
  padding: 0.12rem 0.55rem; cursor: pointer; max-width: 7.5rem;
}
/* tagged → look exactly like a normal tag chip (tinted wash, colored text+border) */
.preset-tag-pill.tagged {
  color: var(--tc); border: 1px solid var(--tc); font-weight: 600;
  background: color-mix(in srgb, var(--tc) 16%, transparent);
}
/* exercise ✕ hugs the name (left-packed row); the preset-delete ✕ stays far right */
.preset-ex-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.15rem; }
.preset-acc-body .dc-add { margin-top: 0.5rem; align-self: flex-start; }
/* presets: professional header row + pencil-gated editing */
.presets-actions { display: inline-flex; gap: 0.5rem; margin-left: auto; }
.preset-acc .edit-only { display: none; }
.preset-acc.editing .edit-only { display: inline-flex; }
.preset-rename-inline[readonly] { cursor: pointer; }
.preset-rename-inline:not([readonly]) { border-bottom: 1px solid var(--accent); }
.preset-pencil { color: var(--muted); }
.preset-acc.editing .preset-pencil { color: var(--accent); }
/* preset name hugs its text; tag pill directly beside it; pencil pushed right */
.preset-acc-head .preset-rename-inline { flex: 0 1 auto; width: auto; min-width: 1.5rem; max-width: 60%; }
.preset-acc-head .preset-pencil { margin-left: auto; }
/* preset tag chips: same UI as day tags; picker drops from the chip */
.preset-tags { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; }
/* breathing room under the Tags header; typography matches the cockpit entries */
.tag-manage { margin-top: 0.6rem; }
.preset-page-exs { font-size: 1rem; }
.preset-page-ex { font-weight: 500; }
.preset-rename-inline { font-weight: 500; }
/* the cockpit action pills: same fixed height (the ⚡ glyph inflated one of them) */
.dc-actions .dc-add, .dc-actions .day-presets-toggle {
  height: 2rem; box-sizing: border-box; display: inline-flex; align-items: center;
  padding-top: 0; padding-bottom: 0;
}
/* edit mode: give each exercise row extra height so the ✕s aren't adjacent tap targets */
.preset-acc.editing .preset-ex-row { padding: 0.45rem 0; border-top: 1px dashed var(--line); }
.preset-acc.editing .preset-ex-row:first-child { border-top: none; }
.preset-acc.editing .preset-ex-row .dc-del-btn { padding: 0.3rem 0.5rem; font-size: 1rem; }

.preset-acc-head .preset-del .icon-btn { color: var(--danger); }
/* preset tag is single-slot: once a chip is set, hide the ＋ tag button */
.preset-tags .tag-chip ~ .tag-add { display: none; }

/* very dark tag colors: flip the day number to light so it stays readable */
.mcell.dark-cell, .mcell.dark-cell .mday { color: #f0f0f3; }
.ws-day.dark-cell { color: #f0f0f3; }
/* explore: larger profile pictures */
.avatar-xl { width: 56px; height: 56px; }
/* read-only tracker item (workout time — the timer writes it, users don't) */
.ck-ro .ck-value { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* photo marker: a tiny dot in the cell's bottom-right (the day card shows the photo) */
.mcell-photo {
  position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
}
body.workout .mcell-photo { display: none; }  /* cockpit = strict logger */
/* profile day card: workout ↔ photo swipe */
.dc-carousel { margin: 0; }
.dc-carousel .post-slide { min-width: 100%; }
.dc-photo { max-height: 22rem; object-fit: contain; background: var(--bg); }
.dc-dots { margin-top: 0.4rem; }

/* long workout rows wrap inside the panel instead of widening it */
.day-detail .entry-ro, .day-detail .dc-entry { overflow-wrap: anywhere; }
/* photo slide: the post's social layer under the image */
.dc-post-slide .like-row { margin: 0.45rem 0 0.2rem; }
.dc-post-slide .comments { margin-top: 0.2rem; }
.track-bool { width: 3.3rem; }  /* fits "yes"/"no" */
/* admin rename pencil on picker rows */
.ex-admin-rename {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.85rem; padding: 0 0.5rem; flex-shrink: 0;
}
.ex-admin-rename:hover { color: var(--accent); }


/* tracker settings: rename input styled like plain text; drag row feedback */
.track-rename input {
  background: none; border: none; color: var(--fg); font: inherit; padding: 0.1rem 0;
  min-width: 0; width: 100%;
}
.track-rename { flex: 1; min-width: 0; }
.track-manage-row.dragging { opacity: 0.6; }