:root,
html.dark {
  --background: #181e25;
  --foreground: #f1f5f9;
  --surface: #1b222c;
  --surface-strong: #141a22;
  --surface-soft: #283342;
  --border: #3b4758;
  --border-strong: #64748b;
  --muted: #a6b3c4;
  --secondary: #d7e0ec;
  --accent: #bef264;
  --accent-text: #142006;
  --accent-soft: #26351e;
  --success-bg: #142e26;
  --success-text: #86efac;
  --success-border: #3e8065;
  --warning-bg: #33291a;
  --warning-text: #fcd34d;
  --warning-border: #9d7b35;
  --error-bg: #351f28;
  --error-text: #fda4af;
  --error-border: #a35a69;
  --category-bg: #203f54;
  --category-text: #c8e6f7;
  --category-border: #6aa6cb;
  --nav-background: rgba(17, 21, 27, 0.97);
  --card-edge: #060d08;
  --card-shadow: #060d08;
  --search-accent: #49405f;
  --action-blue: #314f71;
  --action-red: #633c43;
  --accent-label: #c3dfa1;
  color-scheme: dark;
}

html.light {
  --background: #ffffff;
  --foreground: #242620;
  --surface: #fffefd;
  --surface-strong: #f6f6ef;
  --surface-soft: #eeeee3;
  --border: #c9ccbf;
  --border-strong: #777d6d;
  --muted: #64665b;
  --secondary: #454a3e;
  --accent: #d7ed9c;
  --accent-text: #242620;
  --accent-soft: #edf3dd;
  --success-bg: #ecfdf5;
  --success-text: #166534;
  --success-border: #86cda0;
  --warning-bg: #f7efca;
  --warning-text: #854d0e;
  --warning-border: #d6aa44;
  --error-bg: #fff1f2;
  --error-text: #9f1239;
  --error-border: #f0a3b3;
  --category-bg: #e5f2fb;
  --category-text: #275875;
  --category-border: #88bedf;
  --nav-background: rgba(255, 255, 255, 0.97);
  --card-edge: #242620;
  --card-shadow: #242620;
  --search-accent: #ded5f4;
  --action-blue: #d0eaf5;
  --action-red: #f5d8df;
  --accent-label: #4f681f;
  color-scheme: light;
}



html, body { background: var(--background); color: var(--foreground); }

.rpe-info { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--muted); font-size: 18px; }
.rpe-blocks { display: flex; gap: 5px; }
.rpe-feeling { position: relative; width: fit-content; max-width: 100%; }
.rpe-pixel-frame { padding: 4px; background: var(--surface-soft); clip-path: polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px)); }
.rpe-pixel-inner { padding: 8px; background: var(--surface); }
.rpe-block { flex: 1; min-width: 0; height: 20px; background: var(--surface-soft); clip-path: polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px)); }
.rpe-filled.rpe-level-1 { background: light-dark(#2487ff, #429aff); }
.rpe-filled.rpe-level-2 { background: light-dark(#16b3de, #29c5eb); }
.rpe-filled.rpe-level-3 { background: light-dark(#10c6aa, #22d8b9); }
.rpe-filled.rpe-level-4 { background: light-dark(#51d450, #6ee16c); }
.rpe-filled.rpe-level-5 { background: light-dark(#badb26, #c9e637); }
.rpe-filled.rpe-level-6 { background: light-dark(#f4d52b, #ffe144); }
.rpe-filled.rpe-level-7 { background: light-dark(#ffae29, #ffbb42); }
.rpe-filled.rpe-level-8 { background: light-dark(#ff802e, #ff9246); }
.rpe-filled.rpe-level-9 { background: light-dark(#fa5739, #ff6b4c); }
.rpe-filled.rpe-level-10 { background: light-dark(#ef3046, #ff485c); }
.workout-rpe-dialog { position: fixed; inset: 0; margin: auto; width: min(360px, calc(100% - 40px)); max-height: calc(100svh - 40px); overflow-y: auto; border: 2px solid var(--card-edge); border-radius: 12px; box-shadow: 3px 3px 0 var(--card-shadow); padding: 22px; background: var(--surface); color: var(--foreground); text-align: left; }
.workout-rpe-dialog::backdrop { background: #0009; }
body { font-family: Arial, Helvetica, sans-serif; transition: background-color 180ms ease, color 180ms ease; padding-top: max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px)); padding-left: max(var(--app-safe-left, 0px), env(safe-area-inset-left, 0px)); padding-right: max(var(--app-safe-right, 0px), env(safe-area-inset-right, 0px)); }

/* Shared utility colours keep every screen in sync with the selected theme. */
.bg-neutral-950 { background-color: var(--surface-strong) !important; }
.bg-neutral-900 { background-color: var(--surface) !important; }
.bg-neutral-800 { background-color: var(--surface-soft) !important; }
.border-neutral-900, .border-neutral-800, .border-neutral-700 { border-color: var(--border) !important; }
.border-neutral-600 { border-color: var(--border-strong) !important; }
.text-white, .text-neutral-100, .text-neutral-200 { color: var(--foreground) !important; }
.text-neutral-300 { color: var(--secondary) !important; }
.text-neutral-400, .text-neutral-500, .text-neutral-600 { color: var(--muted) !important; }
.bg-white { background-color: var(--accent) !important; }
.text-black { color: var(--accent-text) !important; }
.border-white { border-color: var(--accent) !important; }

input, select, textarea { color: var(--foreground); caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--foreground); outline-offset: 3px;
}
.result-inputs input, .result-inputs textarea { scroll-margin-block: 100px; }
.result-task-heading, .result-comment-heading { list-style: none; cursor: pointer; }
.result-task-heading::-webkit-details-marker, .result-comment-heading::-webkit-details-marker { display: none; }
.result-task-chevron, .result-comment-chevron { transform: rotate(-45deg); }
.result-task[open] > .result-task-heading .result-task-chevron,
.result-comment[open] > .result-comment-heading .result-comment-chevron { transform: rotate(45deg); }
.result-task-body input[type="number"] { min-height: 44px; padding: 10px 12px; font-size: 16px; border-radius: 12px; }
.result-set-table { border-collapse: collapse; }
.result-set-table th, .result-set-table td { padding: 4px; min-width: 0; }
.result-set-table th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 500; }
.result-set-table td input[type="number"] { padding: 10px 8px; }
.result-task-heading { scroll-margin-block: 100px; }

.compact-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--accent); color: var(--accent-text); font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; vertical-align: middle; }
.compact-action:disabled { opacity: 0.45; cursor: not-allowed; }
.compact-action.result-keyboard-action { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.compact-action.test-filter-action:not([aria-pressed="true"]) { background: var(--surface); color: var(--secondary); border-color: var(--border); }
.compact-action.clear-input-action { background: #b91c1c; color: #fff; border-color: transparent; }
.compact-action.clear-input-action:hover:not(:disabled) { background: #991b1b; }
.today-save-action { background: #2563eb; color: #fff; }
.today-save-action:hover:not(:disabled) { background: #1d4ed8; }
.profile-editor { margin: auto; width: min(380px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow-y: auto; border: 2px solid var(--card-edge); border-radius: 12px; box-shadow: 3px 3px 0 var(--card-shadow); padding: 20px; background: var(--surface); color: var(--foreground); }
.profile-editor input:not([type="checkbox"]):not([type="radio"]) {
  border: 2px solid var(--card-edge) !important; border-radius: 8px;
  background: var(--surface); box-shadow: 2px 2px 0 var(--card-shadow);
}
.profile-editor::backdrop { background: #0009; }
.profile-editor-title:focus { outline: none; box-shadow: none; }
dialog:focus, dialog:focus-visible { outline: none; }
.exercise-video-dialog { margin: auto; width: min(480px, calc(100% - 32px)); max-height: calc(100svh - var(--app-safe-top, 0px) - var(--app-safe-bottom, 0px) - 32px); overflow-y: auto; padding: 20px; border: 2px solid var(--card-edge); border-radius: 12px; box-shadow: 3px 3px 0 var(--card-shadow); background: var(--surface); color: var(--foreground); }
.exercise-video-dialog::backdrop { background: #0009; }
.exercise-video-close:focus-visible { outline: none; }
.exercise-video-player { display: block; width: 100%; max-height: 55svh; background: #090a0c; border-radius: 8px; }
.profile-avatar { border-radius: 8px; background: var(--surface); box-shadow: 2px 2px 0 var(--card-shadow); }
.profile-avatar-edit { border: 2px solid var(--card-edge); border-radius: 8px; }
.profile-avatar-pencil {
  border: 1px solid #242620; border-radius: 5px;
  background: #ffffff; color: #242620;
  box-shadow: .25px .25px 0 #242620;
}
.compact-action .loading-runner { width: 22px; height: 22px; }
.compact-action.video-upload-progress { overflow: hidden; min-width: 220px; background: var(--surface); color: var(--foreground); border-color: var(--accent-label); opacity: 1; }
.video-upload-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: .3; transition: width .2s ease; pointer-events: none; }
.video-upload-progress-label { position: relative; z-index: 1; }
.score-card-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
.score-card-actions:has(> .compact-action:nth-child(3)) { grid-template-columns: 1.2fr 1fr .8fr; }
.score-card-actions > .compact-action { min-width: 0; width: 100%; padding: 4px; }
.score-card-actions > .score-copy-action { padding: 2px 4px; font-size: 11px; line-height: 12px; }
@media (max-width: 360px) {
  .score-card-actions { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) !important; }
}
.score-field-order { display: flex; align-items: center; gap: 8px; width: 100%; }
.score-field-order > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.score-field-order > button:last-child { margin-left: auto; }
.exercise-category-filter { position: relative; }
.exercise-category-label { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 7px; border-left: 3px solid var(--category-border); border-radius: 6px; background: var(--category-bg); color: var(--category-text); font-size: 11px; line-height: 16px; font-weight: 400; overflow-wrap: anywhere; }
.exercise-category-filter > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px; border: 2px solid var(--card-edge); border-radius: 8px; box-shadow: 2px 2px 0 var(--card-shadow); background: var(--surface); list-style: none; }
.exercise-category-filter > summary::-webkit-details-marker { display: none; }
.exercise-category-filter > summary[aria-disabled="true"] { opacity: .45; }
.exercise-category-options { position: absolute; inset: calc(100% + 8px) 0 auto; z-index: 20; max-height: 280px; overflow-y: auto; padding: 6px; border: 2px solid var(--card-edge); border-radius: 8px; box-shadow: 3px 3px 0 var(--card-shadow); background: var(--surface); }
.exercise-category-options > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px; text-align: left; border-radius: 5px; color: var(--foreground); }
.exercise-category-options > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.workout-danger-zone { padding: 20px; border: 2px solid var(--card-edge); border-radius: 12px; box-shadow: 4px 4px 0 var(--card-shadow); background: #c85b61; color: #fff; }
.workout-publication-actions { display: grid; grid-template-columns: 1.2fr 1fr 1.55fr; align-items: center; gap: 8px; }
.workout-publication-actions > .compact-action { min-width: 0; width: 100%; height: 32px; margin: 0; padding: 2px 4px; white-space: normal; text-align: center; font-size: 11px; line-height: 12px; }
.compact-action.field-create-action { background: #2563eb; color: #fff; }
.compact-action.field-create-action:hover:not(:disabled) { background: #1d4ed8; }
.compact-action.field-create-action:focus-visible { outline-color: #60a5fa; }
.compact-action.field-cancel-action { background: #b45353; color: #fff; }
.compact-action.field-cancel-action:hover:not(:disabled) { background: #9f3f3f; }
.compact-action.field-cancel-action:focus-visible { outline-color: #fca5a5; }
.new-admin-form { padding: 20px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.new-admin-form input:not([type="checkbox"]), .new-admin-form textarea, .new-admin-form select { border-radius: 16px; font-weight: 400; }
.new-admin-form .notice-warning, .new-admin-form .notice-error { border-radius: 16px; line-height: 1.6; }
.new-admin-section { background: var(--surface-strong); }
.calendar-draft-marker { background: var(--warning-border); }
.calendar-selected-date {
  border: 2px solid var(--card-edge) !important; border-radius: 7px !important;
  background: var(--action-blue) !important; color: var(--foreground) !important;
  box-shadow: 1px 1px 0 var(--card-shadow);
}
.calendar-status {
  position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 14px; height: 14px; border: 1.5px solid var(--card-edge); border-radius: 3px;
  background: light-dark(#fffefd, #e8eef4); color: #242620;
  box-shadow: .25px .25px 0 var(--card-shadow);
}
.calendar-status-partial { background: linear-gradient(90deg, var(--accent) 50%, light-dark(#fffefd, #e8eef4) 50%); }
.calendar-status-complete { background: var(--accent); color: var(--accent-text); }
.calendar-status-complete::after { content: ""; position: absolute; left: 3px; top: 1px; width: 4px; height: 7px; border: solid currentColor; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }
.calendar-admin-marker { border: 1.5px solid var(--card-edge); border-radius: 2px; box-shadow: .25px .25px 0 var(--card-shadow); }
.new-admin-form details > summary { padding-block: 8px; font-weight: 600; }
.new-admin-actions .compact-action { min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 20px; border-radius: 14px; }
.new-admin-actions .field-cancel-action { grid-column: 1 / -1; }
@media (pointer: coarse) {
  button.compact-action::before { content: ""; position: absolute; inset: -6px 0; }
}

.bottom-nav { padding-bottom: max(var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)); padding-left: max(var(--app-safe-left, 0px), env(safe-area-inset-left, 0px)); padding-right: max(var(--app-safe-right, 0px), env(safe-area-inset-right, 0px)); background: var(--nav-background); border-color: var(--border); }
main.min-h-screen.pb-28 { padding-bottom: calc(7rem + max(var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px))); }
.bottom-nav-active { color: var(--accent); }
.bottom-nav-inactive { color: var(--muted); }
html[data-result-keyboard] .bottom-nav { display: none; }

.test-post-preview blockquote { border-left: 3px solid var(--accent); margin: 12px 0; padding: 4px 12px; }
.test-post-preview a { color: #3b82f6; text-decoration: underline; }
.text-red-300, .text-red-400 { color: var(--error-text) !important; }
.bg-red-950\/30, .bg-red-950\/10 { background-color: var(--error-bg) !important; }
.border-red-900, .border-red-900\/60, .border-red-950\/70 { border-color: var(--error-border) !important; }
.bg-amber-950\/20 { background-color: var(--warning-bg) !important; }
.border-amber-700\/40 { border-color: var(--warning-border) !important; }
.text-amber-300, .text-amber-200 { color: var(--warning-text) !important; }
.bg-emerald-950\/40 { background-color: var(--success-bg) !important; }
.text-emerald-300 { color: var(--success-text) !important; }

.leaderboard-me { border-color: var(--accent); background: var(--accent-soft); color: var(--foreground); }
.leaderboard-me-place { background: var(--accent); color: var(--accent-text); }
.leaderboard-me-badge { background: var(--surface-soft); color: var(--secondary); }
.leaderboard-me-muted { color: var(--muted); }

/* Shared card style: crisp outlines, small solid shadows and quiet interiors. */
.app-card,
.result-task,
.new-admin-form,
.new-admin-section,
main :is(div, section, article, button).rounded-3xl.border.bg-neutral-900 {
  border: 2px solid var(--card-edge) !important;
  border-radius: 12px;
  background-color: var(--surface) !important;
  box-shadow: 4px 4px 0 var(--card-shadow);
}
.app-card { margin-right: 4px; }
.today-workout-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 16px;
}
.today-workout-title {
  position: relative;
  min-height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-bottom: 14px;
  background-color: #fff !important;
  background-image: url("/images/workout-default.jpg");
  background-size: cover;
  background-position: center bottom;
}
.today-workout-photo {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-size: cover;
  background-position: center bottom;
  pointer-events: none;
}
.today-workout-name {
  position: relative;
  margin-left: 8px;
  max-width: calc(100% - 16px);
  margin-bottom: -14px;
  padding: 3px 8px;
  border: 2px solid var(--card-edge);
  border-radius: 8px;
  background: #c8f522;
  color: #192006;
  box-shadow: 1px 1px 0 var(--card-shadow);
  text-align: center;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-save-info { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; color: var(--foreground); }
.today-save-info > span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--card-edge); border-radius: 5px; background: var(--surface); box-shadow: 1px 1px 0 var(--card-shadow); font-size: 15px; font-weight: 700; }
.today-save-info[aria-expanded="true"] > span { background: var(--action-blue); }
.external-action-link { display: inline-flex; align-items: stretch; gap: 8px; max-width: 100%; color: var(--foreground); text-decoration: none; }
.external-action-link .external-action-icon { align-self: stretch; min-height: 44px; padding: 0 6px; flex-shrink: 0; }
.external-action-arrow { position: relative; display: inline-block; width: 16px; height: 16px; }
.external-action-arrow::before { content: ""; position: absolute; width: 18px; height: 3px; left: -1px; top: 7px; background: currentColor; transform: rotate(-45deg); }
.external-action-arrow::after { content: ""; position: absolute; width: 10px; height: 10px; top: 0; right: 0; border-top: 3px solid currentColor; border-right: 3px solid currentColor; }
.external-action-link:active .compact-action { transform: translate(2px, 2px); box-shadow: none; }
.new-admin-section.border-white { outline: none; border-color: var(--card-edge) !important; }
.new-admin-section { box-shadow: 3px 3px 0 var(--card-shadow); }
.workout-date-tile {
  border: 2px solid var(--card-edge);
  border-radius: 8px;
  background-color: var(--action-blue) !important;
}
.leaderboard-row { box-shadow: 2px 2px 0 var(--card-shadow); }
.leaderboard-metric-row { display: flex; align-items: flex-start; gap: 10px; }
main .leaderboard-metric-picker.group.rounded-2xl.border.bg-neutral-900 { border-radius: 8px; box-shadow: 2px 2px 0 var(--card-shadow); }
.leaderboard-metric-picker > summary { min-height: 44px; }
.leaderboard-task-info { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border: 2px solid var(--card-edge); border-radius: 8px; box-shadow: 2px 2px 0 var(--card-shadow); background: var(--warning-bg); color: var(--foreground); font-size: 19px; font-weight: 700; }
.leaderboard-task-dialog { width: min(360px, calc(100% - 32px)); padding: 18px; }
.leaderboard-row.leaderboard-current { background-color: var(--action-blue) !important; }
.leaderboard-workout-choice {
  border: 2px solid var(--card-edge) !important; border-radius: 10px;
  background-color: var(--surface) !important; box-shadow: 2px 2px 0 var(--card-shadow) !important;
}
.leaderboard-workout-choice[aria-pressed="true"] { background-color: var(--action-blue) !important; }
main details.group.rounded-2xl.border.bg-neutral-900,
main button.rounded-2xl.border.bg-neutral-900 {
  border: 2px solid var(--card-edge) !important;
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--card-shadow);
}
.result-task-body { border-radius: 0 0 10px 10px; }
.workout-notes-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; list-style: none; cursor: pointer; }
.workout-notes-heading::-webkit-details-marker { display: none; }
.workout-notes-chevron { flex-shrink: 0; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.workout-notes[open] > .workout-notes-heading .workout-notes-chevron { transform: rotate(225deg); }
.admin-summary, .test-post-preview.border { border-radius: 6px; box-shadow: none; }
.admin-summary { background: var(--surface-soft) !important; border-color: var(--border) !important; }
.test-post-preview.border { background: var(--surface) !important; }
.status-label { border-radius: 5px; box-shadow: none; }
.new-admin-form input:not([type="checkbox"]), .new-admin-form textarea, .new-admin-form select { border-radius: 8px; }
:is(.admin-fields, .profile-setup-fields) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="search"]):not([type="hidden"]):not([type="range"]), textarea, select) {
  border: 2px solid var(--card-edge) !important; border-radius: 8px;
  background-color: var(--surface) !important; box-shadow: 2px 2px 0 var(--card-shadow);
  color: var(--foreground); font-size: 16px;
}
.admin-fields :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--error-border) !important; }
.compact-action.profile-continue { min-height: 52px; padding: 12px 16px; font-size: 16px; }
.compact-action.admin-start-action { min-height: 52px; padding: 12px 16px; font-size: 16px; }
.new-admin-form .notice-warning, .new-admin-form .notice-error { border-radius: 8px; }
.new-admin-actions .compact-action { border-radius: 8px; }
.compact-action,
.today-save-action {
  border: 2px solid var(--card-edge);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--card-shadow);
}
:is(button, a).compact-action:active:not(:disabled),
button.today-save-action:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.compact-action.field-create-action,
.compact-action.field-create-action:hover:not(:disabled),
.today-save-action,
.today-save-action:hover:not(:disabled) { background: var(--action-blue); color: var(--foreground); }
.compact-action.field-cancel-action,
.compact-action.field-cancel-action:hover:not(:disabled),
.compact-action.clear-input-action,
.compact-action.clear-input-action:hover:not(:disabled) { background: var(--action-red); color: var(--foreground); border-color: var(--card-edge); }
.compact-action.field-create-action:focus-visible,
.compact-action.field-cancel-action:focus-visible { outline-color: var(--foreground); }
.text-accent { color: var(--accent-label); }
.bottom-nav { border-top: 2px solid var(--card-edge); background: var(--surface); }
.bottom-nav button { min-width: 0; padding: 8px 3px; border: 1px solid transparent; border-radius: 6px; }
.bottom-nav-active { background: var(--accent); color: var(--accent-text); font-weight: 700; border-color: var(--card-edge) !important; box-shadow: 2px 2px 0 var(--card-shadow); }
.app-search-field {
  display: flex; align-items: stretch; min-width: 0; width: calc(100% - 3px);
  border: 2px solid var(--card-edge); border-radius: 8px;
  background: var(--surface); box-shadow: 3px 3px 0 var(--card-shadow);
}
.app-search-icon {
  display: grid; place-items: center; flex: 0 0 43px; min-height: 44px;
  border-right: 2px solid var(--card-edge); border-radius: 6px 0 0 6px;
  background: var(--search-accent); color: var(--foreground);
}
.app-search-input {
  appearance: none; -webkit-appearance: none;
  flex: 1; width: 100%; min-width: 0; margin: 0; padding: 11px 12px;
  border: 0; border-radius: 0 6px 6px 0; background: var(--surface);
  color: var(--foreground); font-size: 16px; font-weight: 400;
}
.app-search-input::-webkit-search-cancel-button { appearance: none; }
.app-search-clear { flex: 0 0 40px; border-radius: 0 6px 6px 0; color: var(--muted); font-size: 22px; background: var(--surface); }
.app-search-clear:disabled { opacity: .45; }
.personal-section-note { min-inline-size: 0; max-inline-size: 100%; }
input:is([type="date"], [type="datetime-local"]) { display: block; box-sizing: border-box; min-width: 0; max-width: 100%; appearance: none; -webkit-appearance: none; }
input:is([type="date"], [type="datetime-local"])::-webkit-date-and-time-value { min-width: 0; text-align: left; }
input:is([type="date"], [type="datetime-local"])::-webkit-datetime-edit { min-width: 0; padding: 0; }
.personal-section-note > label { min-width: 0; max-width: 100%; }
.clearable-field { position: relative; }
.clearable-field > :is(input, textarea) { padding-right: 48px !important; }
.clearable-field > textarea { overflow-y: hidden; resize: none; }
.clearable-field-button {
  position: absolute; top: 10px; right: 4px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; background: transparent;
  color: var(--muted); font-size: 24px; line-height: 1; border-radius: 6px;
}
.clearable-field-button:focus-visible { outline: 2px solid var(--foreground); }
.clearable-field-button:disabled { opacity: .45; }
.strength-pilot-table th { padding: 8px 2px; font-size: 11px; font-weight: 400; color: var(--muted); }
.strength-pilot-table td { padding: 8px 3px; border-top: 1px solid var(--border); }
.strength-pilot-table td input:not([type="checkbox"]) { padding: 9px 3px !important; text-align: center; }
.app-search-field:focus-within { outline: 2px solid var(--accent-label); outline-offset: 3px; }

/* Native inputs retain keyboard and form behaviour with shared visual states. */
input:is([type="checkbox"], [type="radio"]) {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-block;
  flex-shrink: 0; width: 20px; height: 20px; min-width: 20px; margin: 0;
  border: 2px solid var(--card-edge); border-radius: 4px;
  background: var(--surface); box-shadow: 2px 2px 0 var(--card-shadow);
  vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }
input:is([type="checkbox"], [type="radio"]):checked,
input[type="checkbox"]:indeterminate { background: var(--accent); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 10px;
  border: solid var(--accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent-text);
}
input[type="checkbox"]:indeterminate::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: var(--accent-text); transform: none; border: 0;
}
input:is([type="checkbox"], [type="radio"]):disabled { opacity: .45; cursor: not-allowed; }
input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }
.app-choice,
.compact-action.test-filter-action {
  border: 2px solid var(--card-edge) !important; border-radius: 8px !important;
  background-color: var(--surface) !important; color: var(--foreground) !important;
  box-shadow: 2px 2px 0 var(--card-shadow) !important;
}
.app-choice[aria-pressed="true"],
.compact-action.test-filter-action[aria-pressed="true"] { background-color: var(--accent) !important; color: var(--accent-text) !important; }
.app-choice:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none !important; }
.app-choice:disabled { opacity: .45; cursor: not-allowed; }
.app-picker-option { border-radius: 6px; box-shadow: none; }
.app-picker-option[aria-pressed="true"] { background-color: var(--action-blue) !important; color: var(--foreground) !important; }
/* Text entry has lighter depth than buttons and one neutral focus border. */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.app-search-input), textarea, select) {
  border: 1px solid var(--border-strong) !important; border-radius: 8px !important;
  box-shadow: .5px .5px 0 var(--card-shadow) !important;
}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.app-search-input), textarea, select):focus {
  outline: none !important; outline-offset: 0; border-color: var(--foreground) !important;
  box-shadow: inset 0 0 0 1px var(--foreground), .5px .5px 0 var(--card-shadow) !important;
}
.app-search-field { box-shadow: .5px .5px 0 var(--card-shadow); }
.app-search-field:focus-within { outline: none; border-color: var(--foreground); }
.app-search-field .app-search-input:focus {
  outline: none !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.app-search-input), textarea, select)[aria-invalid="true"] { border-color: var(--error-border) !important; }
/* Exactly three notification variants. Layout and typography are shared on every screen. */
.notice-warning { --notice-bg: var(--warning-bg); --notice-text: var(--warning-text); --notice-border: var(--warning-border); }
.notice-error { --notice-bg: var(--error-bg); --notice-text: var(--error-text); --notice-border: var(--error-border); }
.notice-success { --notice-bg: var(--success-bg); --notice-text: var(--success-text); --notice-border: var(--success-border); }
:is(.notice-warning, .notice-error, .notice-success) {
  display: block; min-width: 0; padding: 12px 14px !important;
  border: 0 !important; border-left: 4px solid var(--notice-border) !important;
  border-radius: 6px !important; box-shadow: none !important;
  background: var(--notice-bg) !important; color: var(--notice-text) !important;
  font-size: 14px !important; font-weight: 400; line-height: 1.5 !important;
  overflow-wrap: anywhere;
}
:is(.notice-warning, .notice-error, .notice-success)[hidden] { display: none !important; }
:is(.notice-warning, .notice-error, .notice-success) :is(p, h2, h3, h4, li, small),
:is(.notice-warning, .notice-error, .notice-success) .text-neutral-300,
:is(.notice-warning, .notice-error, .notice-success) .text-neutral-400,
:is(.notice-warning, .notice-error, .notice-success) .text-neutral-500,
:is(.notice-warning, .notice-error, .notice-success) :is(.text-amber-300, .text-red-400) { color: inherit !important; }
@media (forced-colors: active) {
  input:is([type="checkbox"], [type="radio"]) { appearance: auto; -webkit-appearance: auto; box-shadow: none; }
  input:is([type="checkbox"], [type="radio"])::after { display: none; }
}

/* Welcome stays dark independently of the training interface theme. */
html:has(.welcome-screen), html:has(.welcome-screen) body { background: #090a0c; }
.welcome-screen { position: relative; isolation: isolate; min-height: calc(100svh - max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px))); display: flex; flex-direction: column; padding: 36px 24px max(24px, var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)); color: #fff; background: #090a0c; }
.welcome-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.28) 40%, rgba(0,0,0,.88)), url('/welcome.jpeg') center 45% / cover no-repeat; }
.welcome-brand { font-size: 13px; font-weight: 700; letter-spacing: .32em; text-align: center; }
.welcome-greeting { margin: auto 0; padding: 72px 0; text-align: center; text-shadow: 0 2px 20px #0008; }
.welcome-greeting h1 { font-size: clamp(30px, 8vw, 44px); font-weight: 700; line-height: 1.15; margin: 12px 0 16px; overflow-wrap: anywhere; }
.welcome-greeting p { color: #ffffffc9; font-size: 15px; }
.welcome-greeting .welcome-eyebrow { font-size: 10px; letter-spacing: .22em; }
.welcome-actions { width: 100%; max-width: 440px; margin: 0 auto; }
.welcome-screen .welcome-enter { width: 100%; min-height: 56px; border-radius: 18px; background: #bef264; color: #142006; font-weight: 650; display: flex; align-items: center; justify-content: center; gap: 10px; }
.welcome-enter:disabled { cursor: wait; }
.welcome-actions > :is(.notice-warning, .notice-error, .notice-success), .welcome-invite-block { margin-bottom: 16px; }
.welcome-invite-title-row { display: flex; align-items: center; gap: 4px; padding-left: 12px; }
.welcome-invite-title-row > p { min-width: 0; font-size: 14px; line-height: 24px; overflow-wrap: anywhere; }
.welcome-invite-info { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; color: #d4dce8; }
.welcome-invite-info > span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 50%; font-size: 15px; font-weight: 600; }
.welcome-invite-block .welcome-join { display: block; min-height: 44px; padding: 9px 12px; border-radius: 10px; background: #2563eb; color: #fff; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.welcome-invite-block .welcome-join:hover { background: #1d4ed8; }
.welcome-invite-block .welcome-join:focus-visible { outline-color: #93c5fd; }
.welcome-invite-block .welcome-invite-hint { margin-top: 10px; padding: 0 12px; font-size: 12px; line-height: 18px; }
.welcome-invite-dialog { position: fixed; inset: 0; margin: auto; width: min(342px, calc(100% - 48px)); max-height: calc(100svh - 48px); overflow-y: auto; border: 0; border-radius: 18px; padding: 22px; background: #1b222c; color: #f1f5f9; text-align: left; }
.welcome-invite-dialog::backdrop { background: #000b; }
.welcome-invite-dialog h2 { margin-bottom: 12px; font-size: 18px; font-weight: 600; }
.welcome-invite-dialog p { margin-bottom: 12px; color: #d7e0ec; font-size: 14px; line-height: 21px; }
.welcome-invite-dialog button { width: 100%; min-height: 44px; margin-top: 4px; border-radius: 10px; background: #283342; color: #fff; font-size: 14px; font-weight: 600; }
.welcome-footnote { color: #c5ceda; font-size: 11px; text-align: center; margin-top: 14px; }
.runner-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; vertical-align: middle; }
.theme-toggle { position: relative; background: var(--surface) !important; color: var(--foreground) !important; }
.theme-toggle-auto { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 700; line-height: 12px; }
.theme-toggle:has(.theme-toggle-auto) > svg { transform: translateY(-4px); }
.runner-loading > span:first-child { min-width: 0; }
.welcome-spinner { width: 18px; height: 18px; border: 2px solid #14200640; border-top-color: #142006; border-radius: 50%; animation: spin 1s linear infinite; }
.welcome-opening-spinner { width: 40px; height: 40px; border-width: 3px; border-color: #ffffff30; border-top-color: #bef264; }
.loading-runner { display: inline-block; flex-shrink: 0; width: 32px; height: 32px; background: url('/mndsh1ft-runner-v15.webp') center / contain no-repeat; image-rendering: pixelated; }
.loading-runner-large { width: 96px; height: 96px; }
.entry-loading { box-sizing: border-box; min-height: calc(100svh - max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px))); display: grid; place-items: center; padding: 24px 24px max(24px, var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)); }
.entry-loading-content { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.entry-loading-brand { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: 5px; text-align: center; }
.entry-loading-subtitle { margin: 8px 0 0; font-size: 12px; letter-spacing: 2px; color: var(--muted); }
.entry-loading-drawing { position: relative; width: 244px; max-width: 100%; height: 168px; margin: 38px 0 28px; }
.app-card.entry-loading-sheet { position: absolute; inset: 10px 30px 20px; padding: 16px; transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--card-shadow); }
.entry-loading-sheet-heading { width: 58px; height: 8px; margin-bottom: 16px; border-radius: 2px; background: var(--accent); }
.entry-loading-sheet-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.entry-loading-check { display: grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--card-edge); border-radius: 4px; background: var(--accent); color: var(--accent-text); font: 700 11px Arial; }
.entry-loading-line { width: 85px; max-width: 100%; height: 5px; border-radius: 2px; background: var(--muted); opacity: .4; }
.entry-loading-sheet-row:nth-child(3) .entry-loading-line { width: 66px; }
.entry-loading-sheet-row:nth-child(4) .entry-loading-line { width: 77px; }
.compact-action.entry-loading-status { box-sizing: border-box; max-width: 100%; min-height: 48px; padding: 7px 13px; gap: 9px; font-size: 14px; line-height: 1.4; text-align: center; background: #df292f; color: #fff; box-shadow: 1px 1px 0 var(--card-shadow); }
.entry-loading-status .loading-runner { width: 30px; height: 30px; }
.entry-loading-status > span:first-child { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .loading-runner { background-image: url('/mndsh1ft-runner-v15-frames.png'); background-size: 400% 400%; background-position: left top; }
}

@keyframes spin { to { transform: rotate(360deg); } }
.result-task-status { display: inline-block; margin-top: 2px; padding: 3px 6px; border: 0; border-left: 3px solid var(--status-border); border-radius: 6px; font-size: 10px; line-height: 1.3; font-weight: 400; white-space: nowrap; }
.result-task-status-empty { --status-border: var(--warning-border); background: var(--warning-bg); color: var(--warning-text); }
.result-task-status-done { --status-border: var(--success-border); background: var(--success-bg); color: var(--success-text); }
.result-task-status-dirty { --status-border: var(--error-border); background: var(--error-bg); color: var(--error-text); }
.today-deadline-status { width: fit-content; max-width: 100%; padding: 4px 7px; border-left: 3px solid var(--error-border); border-radius: 6px; background: var(--error-bg); color: var(--error-text); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.today-deadline-status[hidden] { display: none !important; }
.today-deadline-dialog { margin: auto; width: min(300px, calc(100% - 40px)); padding: 16px; border: 2px solid var(--foreground); border-radius: 14px; background: var(--background); color: var(--foreground); box-shadow: 3px 3px 0 var(--card-shadow); }
.today-deadline-dialog::backdrop { background: #0006; }
.today-deadline-dialog .today-deadline-status { width: 100%; margin: 0; }
.today-deadline-close { display: block; width: fit-content; min-width: 0; min-height: 24px; margin: 10px 0 0 auto; padding: 3px 8px; border: 2px solid var(--card-edge); border-radius: 6px; background: var(--accent); color: var(--accent-text); font-size: 11px; line-height: 16px; box-shadow: 2px 2px 0 var(--card-shadow); }
.today-progress-summary .today-save-info { width: 21px; height: 21px; min-width: 21px; min-height: 21px; padding: 0; border-radius: 5px; font-size: 11px; line-height: 1; }
.today-progress-summary .today-save-info > span { width: 19px; height: 19px; font-size: 11px; }
.today-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.today-refresh { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 21px; height: 21px; margin-left: auto; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--foreground); cursor: pointer; }
.today-refresh::before { content: ""; position: absolute; width: 44px; height: 44px; }
.today-refresh > span { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border: 1px solid var(--card-edge); border-radius: 5px; background: var(--surface); box-shadow: 1px 1px 0 var(--card-shadow); }
.today-refresh:active:not(:disabled) > span { transform: translate(1px, 1px); box-shadow: none; }
.today-refresh:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.today-refresh:disabled { opacity: .4; cursor: default; }
.today-refresh[aria-busy="true"] svg { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .today-refresh[aria-busy="true"] svg { animation: none; } }

.workout-photo-preview { height: 90px; border: 2px solid var(--card-edge); border-radius: 10px; background-color: #fff; background-image: url("/images/workout-default.jpg"); background-size: cover; background-position: center bottom; }

.workout-photo-crop { display: block; width: 100%; aspect-ratio: 3.2; border: 2px solid var(--card-edge); border-radius: 10px; background: #fff; touch-action: none; cursor: grab; }

/* One application picker on desktop and mobile; options live in the top layer. */
.app-select { position: relative; display: block; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.app-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: .5px .5px 0 var(--card-shadow); background: var(--surface); color: var(--foreground); font: inherit; font-size: 16px; text-align: left; }
.app-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-select-arrow { flex-shrink: 0; font-size: 20px; line-height: 1; }
.app-select-trigger:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.app-select-trigger:disabled { opacity: .45; cursor: not-allowed; }
.app-select-menu { position: fixed; inset: auto; margin: 0; padding: 6px; overflow: auto; overscroll-behavior: contain; border: 2px solid var(--card-edge); border-radius: 12px; box-shadow: 4px 4px 0 var(--card-shadow); background: var(--surface); color: var(--foreground); z-index: 1000; }
.app-select-menu[data-fallback="true"] { display: block; }
.app-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px; border-radius: 6px; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.app-select-option[aria-selected="true"] { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.app-select-option-active:not([aria-selected="true"]) { background: var(--action-blue); color: var(--foreground); }
.app-select-option[aria-disabled="true"] { opacity: .45; }
.app-select-search { position: sticky; top: 0; display: block; width: 100%; margin: 0 0 6px; padding: 10px; background: var(--surface); color: var(--foreground); font-size: 16px; }
.app-select-empty { padding: 10px; color: var(--muted); font-size: 14px; }
.workout-photo-crop:active { cursor: grabbing; }
.photo-crop-controls { display: grid; gap: 10px; font-size: 12px; }
.photo-crop-controls label { display: grid; gap: 4px; }
.photo-crop-controls input { width: 100%; accent-color: #91ba14; }

.rpe-block.rpe-range { background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--surface) 4px 7px); }
.embedded-payment-dialog { width: min(480px, 100vw); padding: 0; border: 0; }
.embedded-payment-frame { width: 100%; height: min(65svh, 600px); min-height: 280px; }