:root{
  /* iOS System Colors (HIG) — light */
  --ios-red:#FF3B30;
  --ios-orange:#FF9500;
  --ios-yellow:#FFCC00;
  --ios-green:#34C759;
  --ios-teal:#5AC8FA;
  --ios-blue:#007AFF;
  --ios-indigo:#5856D6;
  --ios-purple:#AF52DE;
  --ios-pink:#FF2D55;

  --ios-gray1:#8E8E93;
  --ios-gray2:#AEAEB2;
  --ios-gray3:#C7C7CC;
  --ios-gray4:#D1D1D6;
  --ios-gray5:#E5E5EA;
  --ios-gray6:#F2F2F7;

  /* Base neutrals (needed for backgrounds/text) */
  --ios-white:#FFFFFF;
  --ios-black:#000000;

  /* App semantic tokens (ONLY derived from iOS tokens above) */
  --bg: var(--ios-gray6);
  --panel: var(--ios-white);
  --panel2: var(--ios-gray6);
  --text: var(--ios-black);
  --muted: var(--ios-gray1);
  --border: var(--ios-gray4);
  --border2: var(--ios-gray3);
  --accent: var(--ios-blue);
  --danger: var(--ios-red);
  --success: var(--ios-green);
  --shadow:0 12px 30px rgba(0,0,0,.10);
  --ghost-border: var(--ios-gray3);
  --sb-track: var(--ios-gray6);
  --sb-thumb: var(--ios-gray3);
  --sb-thumb-hover: var(--ios-gray2);
  --radius:18px;  /* cards */
  --radius2:14px; /* controls */
  --radius-pill:999px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark){
  :root{
    /* iOS System Colors (HIG) — dark */
    --ios-red:#FF453A;
    --ios-orange:#FF9F0A;
    --ios-yellow:#FFD60A;
    --ios-green:#30D158;
    --ios-teal:#64D2FF;
    --ios-blue:#0A84FF;
    --ios-indigo:#5E5CE6;
    --ios-purple:#BF5AF2;
    --ios-pink:#FF2D55;

    --ios-gray1:#8E8E93;
    --ios-gray2:#636366;
    --ios-gray3:#48484A;
    --ios-gray4:#3A3A3C;
    --ios-gray5:#2C2C2E;
    --ios-gray6:#1C1C1E;

    --ios-white:#FFFFFF;
    --ios-black:#000000;

    /* App semantic tokens (ONLY derived from iOS tokens above) */
    --bg: var(--ios-black);
    --panel: var(--ios-gray6);
    --panel2: var(--ios-gray5);
    --text: var(--ios-white);
    --muted: var(--ios-gray1);
    --border: var(--ios-gray5);
    --border2: var(--ios-gray4);
    --accent: var(--ios-blue);
    --danger: var(--ios-red);
    --success: var(--ios-green);
    --shadow:0 10px 30px rgba(0,0,0,.50);
    --ghost-border: var(--ios-gray3);
    --sb-track: var(--ios-black);
    --sb-thumb: var(--ios-gray4);
    --sb-thumb-hover: var(--ios-gray3);
  }
}

/* Manual override (persists via localStorage) */
html[data-theme="light"]{
  /* Mirror the light iOS palette */
  --ios-red:#FF3B30;
  --ios-orange:#FF9500;
  --ios-yellow:#FFCC00;
  --ios-green:#34C759;
  --ios-teal:#5AC8FA;
  --ios-blue:#007AFF;
  --ios-indigo:#5856D6;
  --ios-purple:#AF52DE;
  --ios-pink:#FF2D55;

  --ios-gray1:#8E8E93;
  --ios-gray2:#AEAEB2;
  --ios-gray3:#C7C7CC;
  --ios-gray4:#D1D1D6;
  --ios-gray5:#E5E5EA;
  --ios-gray6:#F2F2F7;

  --ios-white:#FFFFFF;
  --ios-black:#000000;

  --bg: var(--ios-gray6);
  --panel: var(--ios-white);
  --panel2: var(--ios-gray6);
  --text: var(--ios-black);
  --muted: var(--ios-gray1);
  --border: var(--ios-gray4);
  --border2: var(--ios-gray3);
  --accent: var(--ios-blue);
  --danger: var(--ios-red);
  --success: var(--ios-green);
  --shadow:0 12px 30px rgba(0,0,0,.10);
  --ghost-border: var(--ios-gray3);
  --sb-track: var(--ios-gray6);
  --sb-thumb: var(--ios-gray3);
  --sb-thumb-hover: var(--ios-gray2);
}
html[data-theme="dark"]{
  /* Mirror the dark iOS palette */
  --ios-red:#FF453A;
  --ios-orange:#FF9F0A;
  --ios-yellow:#FFD60A;
  --ios-green:#30D158;
  --ios-teal:#64D2FF;
  --ios-blue:#0A84FF;
  --ios-indigo:#5E5CE6;
  --ios-purple:#BF5AF2;
  --ios-pink:#FF2D55;

  --ios-gray1:#8E8E93;
  --ios-gray2:#636366;
  --ios-gray3:#48484A;
  --ios-gray4:#3A3A3C;
  --ios-gray5:#2C2C2E;
  --ios-gray6:#1C1C1E;

  --ios-white:#FFFFFF;
  --ios-black:#000000;

  --bg: var(--ios-black);
  --panel: var(--ios-gray6);
  --panel2: var(--ios-gray5);
  --text: var(--ios-white);
  --muted: var(--ios-gray1);
  --border: var(--ios-gray5);
  --border2: var(--ios-gray4);
  --accent: var(--ios-blue);
  --danger: var(--ios-red);
  --success: var(--ios-green);
  --shadow:0 10px 30px rgba(0,0,0,.50);
  --ghost-border: var(--ios-gray3);
  --sb-track: var(--ios-black);
  --sb-thumb: var(--ios-gray4);
  --sb-thumb-hover: var(--ios-gray3);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  /* Prevent layout shift when the page scrollbar appears (Chrome/Windows). */
  scrollbar-gutter: stable;
  /* Firefox scrollbar colors */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  scrollbar-width: thin;
}

/* When the menu is open, drop the reserved gutter so we don't get a weird edge strip. */
html.menuOpen{ scrollbar-gutter: auto; }

/* Chrome/Edge (WebKit) scrollbar theming */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: var(--sb-track); }
*::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: 999px;
  border: 3px solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover{ background-color: var(--sb-thumb-hover); }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1000px 650px at 18% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(850px 520px at 112% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    radial-gradient(900px 700px at 45% 120%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
}

/* Form controls */
input[type="checkbox"]{ accent-color: var(--accent); }

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: calc(12px + var(--safe-top)) 0 12px;
  border-bottom:1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

.topbar__inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding-left: calc(14px + var(--safe-left));
  padding-right: calc(14px + var(--safe-right));
  display:grid;
  /* Use minmax(0, 1fr) so left/right columns don’t force the center off-center */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:12px;
}
.topbar__left{ justify-self:start; display:flex; align-items:center; min-width:0; }
.topbar__center{ justify-self:center; display:flex; align-items:center; }
.topbar__right{ justify-self:end; display:flex; gap:8px; align-items:center; min-width:0; }
.brand__title{ font-weight:750; letter-spacing:.2px; }
.wordmark{ font-weight:850; letter-spacing:-.2px; }
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  letter-spacing:.6px;
  font-weight:850;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border2);
  margin-left:8px;
  transform: translateY(-1px);
}
.badge--alpha{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border2));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.brand{ text-decoration:none; color:inherit; display:inline-flex; align-items:center; }
.brand--center{
  flex-direction:row;
  gap:0;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
}
.brand__logo{
  width:20px;
  height:20px;
  display:block;
  /* Make it feel like a purposeful app mark without affecting layout. */
  transform: scale(1.35);
  transform-origin: center;
  /* Match icon weight to the rest of the UI */
  stroke-width: 2.25px;
  color: var(--text);
}
.brand__logo *{ vector-effect: non-scaling-stroke; }
.brand__wordmark{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
}
.brand:hover{ opacity:.92; }

/* Screen-reader only */
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.app{ padding-bottom: calc(28px + var(--safe-bottom)); }
.container{ padding: 10px 14px 18px; max-width:1100px; margin:0 auto; }

/* Mobile: full-bleed (no container padding) */
@media (max-width: 720px){
  .container{ padding: 0; }
}

.weekbar{
  border-bottom:1px solid var(--border);
  padding: 10px 0;
}
.weekbar__inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding-left: calc(14px + var(--safe-left));
  padding-right: calc(14px + var(--safe-right));
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* Tablet: add light padding + align header/weekbar gutters */
@media (min-width: 721px) and (max-width: 899px){
  .container{ padding: .5rem; }
  .topbar__inner{ padding: 0 .5rem; }
  .weekbar__inner{ padding: 0 .5rem; }
}
.weekbar__left{ display:flex; align-items:center; gap:10px; min-width:0; flex: 1 1 auto; }
.weekbar__right{ display:flex; align-items:center; gap:10px; justify-content:flex-end; flex: 0 0 auto; }
.weekbar__hint{ display:none; }
.cyclePick{ display:flex; align-items:center; gap:6px; }
.cyclePick{ flex: 1 1 0; min-width: 0; }
.weekPick{ display:flex; align-items:center; gap:6px; }
.weekPick{ flex: 1 1 0; min-width: 0; justify-content:flex-end; }

/* Tablet: stack weekbar into two rows to avoid cramped layout */
@media (max-width: 900px){
  .weekbar__inner{ flex-direction:column; align-items:stretch; }
  .weekbar__left{ width:100%; justify-content:space-between; }
  .weekbar__right{ width:100%; justify-content:space-between; }
}

@media (max-width: 520px){
  .weekbar__inner{ flex-direction:column; align-items:stretch; }
  .weekbar__left{ width:100%; flex-direction:column; align-items:stretch; }
  .weekbar__right{ width:100%; justify-content:space-between; }
  .cyclePick{ justify-content:space-between; width:100%; }
  .weekPick{ justify-content:space-between; width:100%; }
}

/* Small mobile (down to 320px): tighter spacing + stack controls to avoid overflow */
@media (max-width: 360px){
  .topbar{ padding: calc(10px + var(--safe-top)) 0 10px; }
  .topbar__inner{
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
    gap:10px;
  }
  .topbar__right{ gap:6px; }
  .badge{ margin-left:6px; padding:2px 7px; }
  .ico{ width:18px; height:18px; }
  .iconBtn--header{ padding:8px 9px; }

  .container{ padding: 10px calc(10px + var(--safe-right)) 18px calc(10px + var(--safe-left)); }
  .weekbar{ padding: 10px 0; }
  .weekbar__inner{
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
    gap:10px;
  }
  .weekbar__right{ flex-direction:column; align-items:stretch; gap:8px; }

  .dd__btn{ padding:8px 10px; }
  .dd--compact .dd__btn{ padding:7px 10px; }

  details.day > summary{ padding: 10px 10px; }
  .day__body{ padding: 10px 10px 10px; }
  .day__summary{ gap:8px; }
  .day__summaryKey{ font-size:10px; }
  .day__summaryVal{ font-size:11px; }

  .rowGrid{ gap:10px; }
  .field{ gap:5px; }
  .input, .select{ padding:8px 9px; }

  /* At the smallest widths, stack action button pairs vertically */
  .rowActions{ grid-template-columns: 1fr; }
  .dayFooter--actions{ display:block; }
  .actionBtn{ min-height: 40px; }

  /* Keep buttons stable at 320px: short text only */
  .actionBtn{
    white-space: nowrap;
    padding:9px 10px;
    font-size: 13px;
  }
}

/* Custom dropdown (consistent across platforms) */
.dd{ width:100%; min-width:0; }
.dd__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius2);
  border:1px solid var(--border2);
  background: color-mix(in srgb, var(--panel2) 78%, transparent);
  color: var(--text);
  font-family: var(--mono);
  cursor:pointer;
  min-height: 44px;
}
.dd--compact .dd__btn{ padding:7px 10px; border-radius:var(--radius2); min-height: 44px; }
.dd__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dd__chev{ flex: 0 0 auto; opacity:.85; }
.dd__menu{
  position:absolute;
  z-index:2000;
  margin-top:8px;
  width:100%;
  border:1px solid var(--border);
  background: var(--panel);
  border-radius:12px;
  box-shadow: var(--shadow);
  padding:6px;
  max-height: 260px;
  overflow:auto;
}
.dd__opt{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  cursor:pointer;
}
.dd__opt:hover{ background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.dd__opt[aria-selected="true"]{
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.ddWrap{ position:relative; width:100%; min-width:0; }

.control{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.control__label{ color:var(--muted); }
.control--checkbox input{ transform: translateY(1px); }
.select--compact{ padding:7px 10px; border-radius:999px; width:auto; }
.input--compact{ padding:7px 10px; border-radius:999px; width: 180px; }

.btn{
  appearance:none;
  border:1px solid var(--border2);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color:var(--text);
  border-radius:var(--radius2);
  padding:8px 12px;
  font-weight:650;
  cursor:pointer;
  min-height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{
  border-color: color-mix(in srgb, var(--border2) 70%, transparent);
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.btn--primary{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn--primary:hover{ background: color-mix(in srgb, var(--accent) 22%, transparent); }
.btn--ghost{
  border-color: var(--ghost-border);
  background: transparent;
}
.btn--withIcon{ display:inline-flex; align-items:center; gap:8px; }
.btn--withIcon .ico{ width:18px; height:18px; }

.status{
  min-height:18px;
  font-size:12px;
  color:var(--muted);
  margin: 2px 0 10px;
}
.status--error{ color: var(--danger); }

.week{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Mobile: horizontally scroll day cards with center snap */
@media (max-width: 720px){
  /* Prevent iOS Safari focus-zoom by keeping form controls at >= 16px */
  .input, .select, .dd__btn, .dd__opt{ font-size: 16px; }

  .week{
    flex-direction:row;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0 calc(14px + var(--safe-right)) 6px calc(14px + var(--safe-left));
    scroll-padding: 0 calc(14px + var(--safe-right)) 0 calc(14px + var(--safe-left));
    align-items:flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .week::-webkit-scrollbar{ width:0; height:0; }
  .week > details.day{
    flex: 0 0 calc(100% - 28px);
    scroll-snap-align: center;
    min-width: 0; /* prevent content from widening the flex item */
  }
}

details.day{
  border:1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel) 86%, transparent));
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:visible; /* allow dropdown menus to escape card clipping */
  min-width:0; /* critical: allow internal content to shrink/ellipsis instead of widening card */
}
details.day > summary{
  cursor:pointer;
  padding: 12px 12px;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
}
details.day > summary::-webkit-details-marker{ display:none; }
.day__label{ font-weight:750; letter-spacing:.2px; white-space:nowrap; }
.day__head{ display:flex; flex-direction:column; gap:10px; min-width:0; width:100%; }
.day__headTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; width:100%; }
.day__titleLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.day__headActions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.dayDowDd{ width: 100px; }
.dayDowDd .dd__btn{ justify-content:center; }
.dayDowDd .dd__label{ text-align:center; }
.day__body{ padding: 12px 12px 12px; border-top:1px solid var(--border); }

.day__summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-left: 4px;
  min-width:0;
}
.day__summaryItem{ display:flex; gap:6px; align-items:baseline; }
.day__summaryKey{ font-size:11px; color: var(--muted); letter-spacing:.2px; }
.day__summaryVal{ font-size:12px; font-family: var(--mono); min-width:0; }

@media (max-width: 520px){
  /* Keep DAY + dropdown on one row (don’t stack) */
  .day__titleLeft{ flex-direction:row; align-items:center; gap:10px; }
  .dayDowDd{ width: 110px; max-width: none; }
}

/* Prevent snap-scroll reflow jitter: avoid flex-wrap line breaking on mobile */
@media (max-width: 720px){
  .day__summary{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap:6px 12px;
    width:100%;
    margin-left: 0;
    min-width:0;
  }
  .day__summaryItem{
    justify-content:space-between;
    min-width:0;
  }
  .day__summaryKey{ white-space:nowrap; }
  .day__summaryVal{
    white-space:nowrap;
    justify-self:end;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Iconify icons can flicker/disappear inside scroll-snap containers on iOS;
     use text-only on mobile for exercise action buttons. */
  /* (Now handled by inline SVG sprite; keep icons enabled.) */
}

/* Mobile drawer */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.40);
  display:flex;
  justify-content:flex-start;
  z-index:50;
}
.overlay[hidden]{ display:none; }
.drawer{
  width:min(420px, 92vw);
  height:100%;
  background: var(--panel);
  border-right:1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.drawerActions{
  display:flex;
  gap:10px;
}
.drawerActions__btn{
  width:100%;
  justify-content:flex-start;
  padding-left: 12px;
  padding-right: 12px;
}
.drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.drawer__title{ font-weight:800; letter-spacing:.2px; }
.drawer__body{
  color: var(--text);
  font-size: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
.drawer__bottom{
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.drawer__body p{ color:var(--muted); line-height:1.45; margin: 8px 0 0; }
.drawer__body ul{ margin: 8px 0 0; padding-left: 18px; color:var(--muted); }
.drawerSection{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--panel2) 65%, transparent);
  margin-bottom: 10px;
}
.drawerSection summary{ cursor:pointer; font-weight:700; }

/* Dialogs (share + app modal) */
.dialog{
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 16px;
  padding: 0;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  width: min(560px, calc(100vw - 28px));
  overflow: hidden;
}
.dialog::backdrop{
  background: color-mix(in srgb, var(--ios-black) 55%, transparent);
  backdrop-filter: blur(8px);
}
.dialog__panel{ display:flex; flex-direction:column; }
.dialog__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 16px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel2) 65%, transparent);
}
.dialog__title{ font-weight:850; letter-spacing:.2px; }
.dialog__body{
  padding: 16px 16px 16px;
}
.dialog__text{ margin: 0; color: var(--muted); line-height: 1.5; }
.dialog__dontShow{ margin-top: 14px; padding-bottom: 16px; }
.dialog__inputWrap{ margin-top: 14px; }
.dialog__help{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.dialog__actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding: 16px 16px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel2) 58%, transparent);
}
.dialog__actions .btn{ min-width: 92px; }

/* Make dialogs feel less cramped on small screens */
@media (max-width: 520px){
  .dialog{ width: calc(100vw - 22px); border-radius: 14px; }
  .dialog__top, .dialog__body, .dialog__actions{ padding-left: 14px; padding-right: 14px; }
  .dialog__actions{ flex-direction:column-reverse; }
  .dialog__actions .btn{ width:100%; }
}

.btn--danger{
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.btn--danger:hover{ background: color-mix(in srgb, var(--danger) 18%, transparent); }

.btn--success{
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
.btn--success:hover{ background: color-mix(in srgb, var(--success) 18%, transparent); }

.rows{ display:flex; flex-direction:column; gap:2px; }

.row{
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.row:last-child{ border-bottom:none; }
.rowGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
/* Mobile: prioritize long-text fields */
.rowGrid .field--ex{ grid-column: 1 / -1; }
.rowGrid .field--mode{ grid-column: 1 / -1; }

/* Short numeric fields shouldn't feel "huge" on mobile */
.rowGrid .field--sets input,
.rowGrid .field--reps input,
.rowGrid .field--pct input,
.rowGrid .field--rpe input{
  text-align:center;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field{ min-width:0; }
.field label{
  font-size:11px;
  letter-spacing:.2px;
  color:var(--muted);
  line-height: 1.1;
  min-height: 12px;
  display:flex;
  align-items:flex-end;
}
.input, .select{
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid var(--border2);
  background: color-mix(in srgb, var(--panel2) 78%, transparent);
  color:var(--text);
  outline:none;
  font-family: var(--mono);
  min-width:0;
}
.select{
  cursor:pointer;
  padding-right: 34px; /* space for native arrow */
}
.select--compact{ padding-right: 32px; }
.select option{
  background: var(--panel);
  color: var(--text);
}

/* Hint to native controls for correct dropdown palette */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }
.input::placeholder{ color: color-mix(in srgb, var(--muted) 55%, transparent); }
.input:focus, .select:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.rowActions{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.actionBtn--subtle{
  border-color: color-mix(in srgb, var(--border2) 90%, transparent);
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
}
.iconBtn{
  border:1px solid var(--border2);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color:var(--text);
  border-radius:var(--radius2);
  padding:8px 10px;
  cursor:pointer;
  min-width: 44px;
  min-height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.iconBtn--x{
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border2));
  color: color-mix(in srgb, var(--danger) 55%, var(--muted));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 14px;
  padding: 8px 10px;
}
.iconBtn--x:hover{
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border2));
  color: color-mix(in srgb, var(--danger) 75%, var(--text));
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}

/* Delete buttons: small, always "danger" */
.iconBtn--dangerSm{
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border2));
  color: color-mix(in srgb, var(--danger) 60%, var(--muted));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.iconBtn--dangerSm:hover{
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border2));
  color: color-mix(in srgb, var(--danger) 80%, var(--text));
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}

.iconBtn--header{
  border-radius:var(--radius-pill);
  padding:9px 10px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}
.iconBtn--bare{
  border:none;
  background:transparent;
  padding:0;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--text);
}
.iconBtn--bare:hover{ opacity:.85; }
.iconBtn--bare:active{ transform: translateY(1px); }
.iconBtn--headerSm{
  border-radius:var(--radius2);
  padding:7px 8px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}
.iconBtn--primary{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.iconBtn--primary:hover{ background: color-mix(in srgb, var(--accent) 22%, transparent); }

.iconBtn--x .ico{ width:18px; height:18px; }
 
/* Inline SVG icons (sprite) */
.ico{
  width:20px;
  height:20px;
  display:inline-block;
  flex:0 0 auto;
  vertical-align:-0.15em;
  fill:none;
  stroke: currentColor;
}
.ico use{ pointer-events:none; }

.dayFooter{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}
.rowFooterRight{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.rowFooterHint{ font-size:12px; color: var(--muted); }

.dayFooter--actions{
  justify-content:flex-end;
  gap:10px;
}

.actionBtn{
  border:1px solid var(--border2);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--text);
  border-radius:var(--radius2);
  padding:7px 10px;
  font-family: var(--sans);
  font-weight: 750;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  white-space:nowrap;
  width:100%;
  justify-content:center;
  min-height: 44px;
}
.actionBtn .ico{ width:18px; height:18px; }
.actionBtn--add{
  border-color: color-mix(in srgb, var(--success) 40%, var(--border2));
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.actionBtn--add:hover{ background: color-mix(in srgb, var(--success) 16%, transparent); }
.actionBtn--delete{
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border2));
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.actionBtn--delete:hover{ background: color-mix(in srgb, var(--danger) 16%, transparent); }

@media (max-width: 720px){
  /* On mobile, the day footer has a single primary action (Add exercise) */
  .dayFooter--actions{ display:block; }
  .actionBtn{ padding:10px 10px; min-height: 42px; }
}

/* Hide desktop column headers on mobile; mobile uses per-field labels */
.colHeader{ display:none; }

/* Desktop: grid-like spreadsheet */
@media (min-width: 900px){
  .container{ padding: 14px 18px 26px; max-width:1100px; }
  /* inner wrappers handle max-width + padding on desktop */

  .day__body{ padding: 14px 14px 14px; }

  .rows{ gap:0; }
  .row{ padding:10px 6px; }
  .rowGrid{
    grid-template-columns:
      minmax(0, 2.1fr)         /* Exercise */
      minmax(0, 1.3fr)         /* Variation */
      72px                     /* Sets */
      72px                     /* Reps */
      96px                     /* Load */
      72px                     /* %1RM */
      72px                     /* RPE */
      96px;                    /* Rest */
    gap:10px;
  }

  .rowActions{
    grid-column: 1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }

  .rowGrid .field--ex{ grid-column: 1 / 2; }
  .rowGrid .field--mode{ grid-column: 2 / 3; }
  .rowGrid .field--sets{ grid-column: 3 / 4; }
  .rowGrid .field--reps{ grid-column: 4 / 5; }
  .rowGrid .field--load{ grid-column: 5 / 6; }
  .rowGrid .field--pct{ grid-column: 6 / 7; }
  .rowGrid .field--rpe{ grid-column: 7 / 8; }
  .rowGrid .field--rest{ grid-column: 8 / 9; }

  .rowActions{ margin-top:0; justify-content:flex-start; }

  .colHeader{
    display:grid;
    grid-template-columns:
      minmax(0, 2.1fr)
      minmax(0, 1.3fr)
      72px
      72px
      96px
      72px
      72px
      96px;
    gap:10px;
    padding: 0 10px 8px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.2px;
  }
  .colHeader div{ padding: 0 2px; }

  /* Desktop uses header row; hide repeated labels inside each input. */
  .field label{ display:none; }
}