/* ============================================================ Design tokens — "Electric" palette Change these and the rest of the app follows. Dark mode = same vars, overridden by [data-theme="dark"] below. ============================================================ */ :root { /* Surfaces */ --bg: #f8fafc; /* page background */ --surface: #ffffff; /* cards / panels */ --surface-alt: #f1f5f9; /* table headers, secondary panels */ --border: #e2e8f0; /* hairline dividers */ --border-strong: #cbd5e1; /* input borders, stronger lines */ /* Text */ --text: #0f172a; /* primary text */ --text-muted: #475569; /* secondary / helper */ --text-subtle: #94a3b8; /* placeholders, very quiet */ --text-on-accent:#ffffff; /* readable on the accent button */ /* Semantic */ --accent: #2563eb; /* primary action (Electric blue) */ --accent-hover: #1d4ed8; --success: #16a34a; /* sent / done */ --warning: #d97706; /* partial / careful */ --danger: #dc2626; /* delete / refute */ /* Shape + motion */ --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); /* Header (was hard-coded slate) */ --header-bg: #0f172a; --header-text: #ffffff; --footer-bg: #1e293b; } /* Dark mode — same variable names, different values. Activated by adding data-theme="dark" to . */ [data-theme="dark"] { --bg: #0b0e14; --surface: #161b22; --surface-alt: #1e242e; --border: #27303d; --border-strong: #3a4555; --text: #f1f5f9; --text-muted: #94a3b8; --text-subtle: #64748b; --text-on-accent:#ffffff; --accent: #3b82f6; /* slightly brighter blue, reads better on dark */ --accent-hover: #60a5fa; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --header-bg: #050810; --header-text: #f1f5f9; --footer-bg: #050810; } /* Smooth transitions when toggling theme */ html { transition: background-color 0.18s ease, color 0.18s ease; } body, .card, .button { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: var(--text); background-color: var(--bg); } /* Layout Structure */ header { background-color: var(--header-bg); color: var(--header-text); padding: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } main { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; min-height: calc(100vh - 200px); } /* Override for Today's Task page - make it MUCH wider */ main:has(.todays-task-container) { max-width: 90%; } footer { background-color: var(--footer-bg); color: var(--header-text); text-align: center; padding: 1.5rem; margin-top: 3rem; } /* Navigation */ nav { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; } .nav-brand a { color: white; text-decoration: none; font-size: 1.5rem; font-weight: bold; } .nav-links { display: flex; gap: 1rem; align-items: center; } .nav-links span { color: #ecf0f1; } .nav-links a { color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 20px; transition: background-color 0.3s; } .nav-links a:hover { background-color: #34495e; } /* Phone-only nav pieces (see the bottom-bar media query further down). */ .nav-home, .nav-user-icon, .nav-admin-menu { display: none; } /* Flash Messages */ .flash { padding: 1rem; margin-bottom: 1rem; border-radius: 20px; font-weight: 500; } .flash.notice { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; } .flash.alert { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } /* Buttons and Links — one rule, every element renders the same */ .button, input[type="submit"], button { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; background-color: var(--accent); color: var(--text-on-accent); text-decoration: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.2; transition: background-color 0.18s ease; } .button:hover, input[type="submit"]:hover, button:hover { background-color: var(--accent-hover); text-decoration: none; } /* Variants */ .button-secondary { background-color: transparent; color: var(--text); border: 1px solid var(--border-strong); } .button-secondary:hover { background-color: var(--surface-alt); } .button-danger { background-color: var(--danger); } .button-danger:hover { background-color: var(--danger); opacity: 0.9; } /* Size modifier */ .button-small { padding: 0.35rem 0.85rem; font-size: 0.9rem; } /* button_to wraps in a form — make the wrapper invisible to layout */ form.button_to { display: inline-flex; margin: 0; } a { color: #3498db; text-decoration: none; } a:hover { text-decoration: underline; } /* Typography */ h1 { color: #2c3e50; margin-bottom: 1rem; font-size: 2rem; } h2 { color: #34495e; margin-bottom: 0.75rem; font-size: 1.5rem; } p { margin-bottom: 1rem; } /* Forms - Login/Signup Only */ .sessions form, .users form { background-color: var(--surface); padding: 2rem; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 500px; margin: 2rem auto; } .sessions form div, .users form div { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text); } input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="date"], select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 20px; font-size: 1rem; transition: border-color 0.3s; } input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .sessions form input[type="submit"], .users form input[type="submit"] { width: 100%; margin-top: 1rem; } /* Form Error Messages */ .field_with_errors { display: inline; } .field_with_errors input { border-color: #e74c3c; } form .error { color: #e74c3c; background-color: #fadbd8; padding: 1rem; border-radius: 20px; margin-bottom: 1.5rem; border: 1px solid #e74c3c; } form .error h2 { color: #c0392b; font-size: 1.1rem; margin-bottom: 0.5rem; } form .error ul { margin-left: 1.5rem; } form .error li { margin-bottom: 0.25rem; } /* Textareas */ textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 20px; font-size: 1rem; min-height: 100px; font-family: inherit; } textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } /* Training Cycle Actions */ .training-cycle-actions form { background: none; padding: 0; margin: 0; box-shadow: none; max-width: none; display: inline; } .training-cycle-actions a, .training-cycle-actions button { margin-right: 0.75rem; } /* Today's Task Page */ .todays-task-container { max-width: 1100px; margin: 2rem auto; } .todays-task-container form { background: none; padding: 0; margin: 0; box-shadow: none; max-width: none; } .todays-task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; background: var(--surface); padding: 2rem; border-radius: 20px; margin: 0 auto; } .task-column { min-width: 0; padding-left: 1rem; } .task-column h2 { font-size: 1.1rem; margin-bottom: 0.75rem; border-bottom: 2px solid #3498db; padding-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-column textarea { min-height: 80px; font-size: 0.85rem; } .task-planned { margin-bottom: 0.75rem; font-size: 0.85rem; } .task-planned strong { display: block; margin-bottom: 0.25rem; } .activity-planned.is-completed strong, .activity-planned.is-completed > label > div > div { text-decoration: line-through; text-decoration-color: var(--text-muted); /* Keep full text color — strikethrough is the signal, not dimming */ } /* Actual data styling - red text/border for differentiation from planned */ .task-actual, .actual-data { color: #e74c3c; } .task-column textarea[id$="_actual"] { border-color: #e74c3c; color: #e74c3c; } .task-column textarea[id$="_actual"]:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); } .task-column textarea[id$="_actual"]::placeholder { color: #e8a9a2; } /* Responsive — stack columns on narrow screens */ @media (max-width: 700px) { .todays-task-grid { grid-template-columns: 1fr; } } /* Button row for forms — buttons size to content, not stretched */ .form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } /* Drag-to-reorder activity items */ .activity-item { cursor: grab; } .activity-item:active { cursor: grabbing; } /* The "ghost" — semi-transparent placeholder shown where the item will land */ .sortable-ghost { opacity: 0.4; background: #ecf0f1 !important; } /* Don't make form inputs themselves grab — only the surrounding card */ .activity-item input, .activity-item select, .activity-item textarea, .activity-item button { cursor: auto; } /* ============================================================ Card — reusable surface utility. Use anywhere we want the "white panel with subtle shadow" look. Replaces the inline `background: white; padding: 1.5rem; border-radius: 20px;` pattern that's sprinkled across views. ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; } /* Form inputs adopt the palette too */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="url"], select, textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font: inherit; font-size: 0.95rem; } /* A date input is a native control: left to itself it sizes to its value rather than filling the row, and on iOS it sits at a different height from the text fields beside it. Stripping the native appearance lets it take the same box as every other field in the form. */ input[type="date"] { -webkit-appearance: none; appearance: none; width: 100%; /* Matches a text input: padding both sides plus one line of text. */ min-height: calc(1.5em + 1rem + 2px); } /* iOS keeps the value in a shadow element with its own alignment and spacing, so the text drifts off the baseline the other fields share. */ input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; line-height: 1.5; } /* Keep the picker icon at the trailing edge rather than tight against the value. */ input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: auto; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="url"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Link color */ a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Heading tightening */ h1, h2, h3, h4 { color: var(--text); } h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: 1.25rem; font-weight: 700; } h3 { font-size: 1.05rem; font-weight: 600; } /* Mute the old "white panel" inline patterns when dark mode is on so they don't stay stark-white in the dark theme. Acts as a safety net while we migrate inline styles to .card class. */ [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background-color:white"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #ffffff"], [data-theme="dark"] [style*="background-color: #fff"] { background: var(--surface) !important; color: var(--text); border: 1px solid var(--border); } [data-theme="dark"] [style*="color: #666"], [data-theme="dark"] [style*="color: #888"], [data-theme="dark"] [style*="color: #7f8c8d"], [data-theme="dark"] [style*="color: #95a5a6"] { color: var(--text-muted) !important; } /* Light gray surface-alt fills */ [data-theme="dark"] [style*="background: #f8f9fa"], [data-theme="dark"] [style*="background: #ecf0f1"], [data-theme="dark"] [style*="background: #f5f5f5"] { background: var(--surface-alt) !important; color: var(--text); } /* Tables specifically — they have multiple white cells + headers */ [data-theme="dark"] table { color: var(--text); } [data-theme="dark"] table thead { background: var(--surface-alt) !important; } [data-theme="dark"] table td, [data-theme="dark"] table th { border-color: var(--border) !important; } /* Form inputs in dark mode — even with inline backgrounds, surface them */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="url"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border-strong) !important; } /* --- Phone layout: bottom tab bar ------------------------------------ */ /* Covers Safari, the home-screen PWA, and the Hotwire Native shell alike. */ @media (max-width: 700px) { /* Pin the nav to the bottom of the viewport (behind the iPhone home bar). */ header { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom)); z-index: 100; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); } /* No top bar any more: clear the status bar, and leave room above the fixed nav. */ main { margin-top: 0; padding-top: calc(1rem + env(safe-area-inset-top)); padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } /* Compact tab row: no brand, Home link instead, spread items evenly. */ header .nav-brand, header .nav-admin, header .nav-user-name { display: none; } header .nav-home, header .nav-user-icon, .nav-admin-menu { display: inline; } header nav { padding: 0; max-width: 100%; } header .nav-links { width: 100%; justify-content: space-around; gap: 0.25rem; } /* Four labelled tabs plus the menu button have to share a phone width, so the labels are tightened and kept on one line rather than wrapping. */ header .nav-links a { padding: 0.35rem 0.25rem; font-size: 0.72rem; white-space: nowrap; } header .nav-user-menu > summary { padding: 0.35rem 0.4rem !important; } /* Signed out, the only nav items are Log In and Sign Up, which the page itself already offers. Hiding the bar leaves one centred action. */ body:not(.signed-in) header { display: none; } body:not(.signed-in) main { padding-bottom: 1rem; } /* Open the account menu UPWARD from the bottom bar. */ header .nav-user-menu > div { top: auto !important; bottom: calc(100% + 0.25rem) !important; } } /* ───────────────────────────────────────────────────────────── Training-plan drag-and-drop builder Phase 1: shell styling only (setup form + placeholders) ───────────────────────────────────────────────────────────── */ .builder-setup { background: var(--surface); padding: 1rem; border-radius: 12px; margin-bottom: 1rem; } .builder-setup__row { margin-bottom: 0.75rem; } .builder-setup__row:last-child { margin-bottom: 0; } .builder-setup__row--inline { display: flex; gap: 1rem; flex-wrap: wrap; } .builder-setup label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; } .builder-setup label span { font-size: 0.85rem; color: var(--text-muted); } .builder-setup input { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; min-width: 12rem; } .builder-grid-placeholder, .builder-library-placeholder, .builder-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; } .builder-actions .button--muted { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .builder-save { padding: 0.55rem 1.2rem; background: #27ae60; color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 0.95rem; cursor: pointer; } .builder-save:disabled { opacity: 0.6; cursor: default; } .builder-setup__note { margin: 0.75rem 0 0 0; padding: 0.5rem 0.75rem; background: var(--surface-alt); border-left: 3px solid var(--accent); border-radius: 4px; color: var(--text-muted); font-size: 0.85rem; } .builder-error { margin-top: 0.75rem; padding: 0.6rem 0.9rem; background: rgba(231, 76, 60, 0.15); border: 1px solid #e74c3c; border-radius: 6px; color: var(--text); font-size: 0.9rem; } .builder-error[hidden] { display: none; } /* ── Week bar ───────────────────────────────────────────── */ .builder-week-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; margin-bottom: 0.75rem; } .builder-week-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; } .builder-week-tab { padding: 0.4rem 0.9rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; font-weight: 600; font-size: 0.9rem; cursor: pointer; } .builder-week-tab--active { background: #3498db; border-color: #3498db; color: #fff; } /* ── Copy chooser ───────────────────────────────────────── */ .builder-copy-chooser { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.9rem; } .builder-copy-chooser__label { font-weight: 600; color: var(--text-muted); } .builder-copy-chooser__radio { display: inline-flex; align-items: center; gap: 0.35rem; } .builder-copy-chooser__count { width: 3.5rem; padding: 0.2rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; } .builder-copy-chooser__apply { padding: 0.35rem 0.9rem; background: #2c3e50; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; } /* ── Grid ───────────────────────────────────────────────── */ .builder-grid { display: block; overflow-x: auto; /* scroll horizontally on narrow screens */ background: var(--surface); border-radius: 12px; padding: 0.5rem; margin-bottom: 1rem; } .builder-grid__row { display: grid; grid-template-columns: 8rem repeat(7, minmax(9rem, 1fr)); gap: 0.3rem; } .builder-grid__row + .builder-grid__row { margin-top: 0.25rem; } .builder-grid__row--header .builder-grid__day-header { padding: 0.35rem 0.5rem; text-align: center; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; line-height: 1.1; } .builder-grid__day-name { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .builder-grid__day-date { font-size: 0.72rem; font-weight: 500; color: var(--text-subtle); } .builder-grid__row--header .builder-grid__day-header:hover .builder-grid__day-name { color: var(--text); } .builder-grid__row--header .builder-grid__day-header:hover { border-color: var(--border); } .builder-grid__row--header .builder-grid__day-header--selected { background: rgba(52, 152, 219, 0.15); border-color: #3498db; } .builder-grid__day-header--selected .builder-grid__day-name, .builder-grid__day-header--selected .builder-grid__day-date { color: #3498db; } .builder-grid__row--header .builder-grid__day-header--today { background: rgba(37, 99, 235, 0.12); border-color: var(--accent); } .builder-grid__day-header--today .builder-grid__day-name { color: var(--accent); } .builder-grid__day-header--today .builder-grid__day-date { color: var(--accent); font-weight: 700; } .builder-grid__corner { /* Empty top-left cell above the row labels. */ } .builder-grid__row-label { display: flex; align-items: center; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.85rem; background: var(--surface-alt); color: var(--text); border-radius: 6px; } .builder-grid__cell { min-height: 4rem; padding: 0.5rem; background: var(--surface-alt); border: 1px dashed var(--border); border-radius: 6px; display: flex; flex-direction: column; gap: 0.4rem; } .builder-grid__cell--empty { align-items: center; justify-content: center; } /* Highlight for a whole column when its day is selected for swap. */ .builder-grid__cell--selected { background: rgba(52, 152, 219, 0.08); border-color: #3498db; border-style: solid; } .builder-grid__empty-hint { color: var(--text-subtle); font-size: 0.75rem; font-style: italic; } .builder-tile { position: relative; padding: 0.35rem 1.6rem 0.35rem 0.55rem; /* right pad reserved for × */ background: #eaf4fb; border: 1px solid #3498db; border-radius: 6px; font-size: 0.78rem; font-weight: 600; color: #2c3e50; display: flex; flex-direction: column; gap: 0.1rem; cursor: grab; user-select: none; transition: transform 0.08s ease, box-shadow 0.08s ease; } .builder-tile:hover { box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2); transform: translateY(-1px); } .builder-tile:active { cursor: grabbing; transform: none; } .builder-tile__title { line-height: 1.15; } .builder-tile__meta { font-size: 0.68rem; font-weight: 500; color: var(--text-muted); } /* Compact × pinned to the right so it never overlaps the body copy. */ .builder-tile__remove { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; padding: 0; border: none; background: rgba(0,0,0,0.06); color: var(--text-muted); font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .builder-tile__remove:hover { background: #e74c3c; color: #fff; } /* Editing state — takes over the whole cell width visually. */ .builder-tile--editing { cursor: default; padding: 0.5rem; background: var(--surface); border: 2px solid #f39c12; gap: 0.4rem; } .builder-tile--editing:active { cursor: default; } .builder-tile__fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem; } .builder-tile__field { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .builder-tile__field input { padding: 0.25rem 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; text-transform: none; letter-spacing: normal; min-width: 0; /* prevent 3-col grid overflow on narrow screens */ } .builder-tile__actions { display: flex; gap: 0.3rem; justify-content: flex-end; } .builder-tile__actions button { padding: 0.25rem 0.7rem; font-size: 0.75rem; font-weight: 600; border-radius: 4px; border: none; cursor: pointer; } .builder-tile__save { background: #27ae60; color: #fff; } .builder-tile__cancel { background: transparent; color: var(--text-muted); border: 1px solid var(--border) !important; } /* SortableJS drag helpers — ghost = placeholder in the source, chosen = tile under the pointer while dragging. */ .builder-tile.sortable-ghost, .builder-library__tile.sortable-ghost { opacity: 0.35; } .builder-tile.sortable-chosen, .builder-library__tile.sortable-chosen { box-shadow: 0 4px 10px rgba(0,0,0,0.15); } /* Drop target highlight while a drag is over it. Sortable adds a generic class we can target. */ .builder-grid__cell.sortable-drag-hover, .builder-grid__cell.sortable-drag { background: rgba(52, 152, 219, 0.08); border-color: #3498db; } /* ── Exercise library ────────────────────────────────────── */ .builder-library { background: var(--surface); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; color: var(--text); } .builder-library__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .builder-library__header h3 { margin: 0; font-size: 1rem; } .builder-library__manage { font-size: 0.85rem; color: var(--text-muted); text-decoration: none; } .builder-library__manage:hover { color: var(--text); text-decoration: underline; } .builder-library__header-actions { display: flex; align-items: center; gap: 0.75rem; } .builder-library__new-btn { padding: 0.35rem 0.75rem; background: transparent; color: var(--text); border: 1px dashed var(--border-strong); border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .builder-library__new-btn:hover { border-color: var(--accent); color: var(--accent); } /* Inline "add new exercise" form. */ .builder-new-exercise { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .builder-new-exercise[hidden] { display: none; } .builder-new-exercise__row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .builder-new-exercise__col { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 5rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .builder-new-exercise__col--name { flex: 3; min-width: 12rem; } .builder-new-exercise__col input, .builder-new-exercise__col select { padding: 0.35rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 0.9rem; font-weight: 500; color: var(--text); background: var(--surface); text-transform: none; letter-spacing: normal; } .builder-new-exercise__actions { display: flex; gap: 0.4rem; justify-content: flex-end; } .builder-new-exercise__save { padding: 0.35rem 0.9rem; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .builder-new-exercise__cancel { padding: 0.35rem 0.9rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .builder-new-exercise__error { padding: 0.4rem 0.7rem; background: rgba(231, 76, 60, 0.15); border: 1px solid #e74c3c; border-radius: 4px; color: var(--text); font-size: 0.85rem; } .builder-new-exercise__error[hidden] { display: none; } .builder-library__groups { display: flex; flex-direction: column; gap: 0.5rem; } .builder-library__group { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; background: var(--surface-alt); } .builder-library__group summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text); list-style: none; display: flex; align-items: center; gap: 0.5rem; } .builder-library__group summary::-webkit-details-marker { display: none; } .builder-library__group summary::before { content: "▸"; font-size: 0.75rem; color: var(--text-muted); transition: transform 0.15s ease; } .builder-library__group[open] summary::before { transform: rotate(90deg); } .builder-library__count { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; } .builder-library__tiles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } .builder-library__tile { padding: 0.35rem 0.7rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: var(--text); cursor: grab; /* hint DnD coming in Phase 4 */ user-select: none; } .builder-library__tile:hover { border-color: #3498db; color: #3498db; } .builder-library__tile:active { cursor: grabbing; } /* ── Protocols ─────────────────────────────────────────── */ .builder-protocols { background: var(--surface); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; color: var(--text); } .builder-protocols__header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; } .builder-protocols__header h3 { margin: 0; font-size: 1rem; } .builder-protocols__hint { font-size: 0.75rem; color: var(--text-muted); font-style: italic; } .builder-protocols__groups { display: flex; flex-direction: column; gap: 0.5rem; } .builder-protocols__group { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; background: var(--surface-alt); } .builder-protocols__group summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text); list-style: none; display: flex; align-items: center; gap: 0.5rem; } .builder-protocols__group summary::-webkit-details-marker { display: none; } .builder-protocols__group summary::before { content: "▸"; font-size: 0.75rem; color: var(--text-muted); transition: transform 0.15s ease; } .builder-protocols__group[open] summary::before { transform: rotate(90deg); } .builder-protocols__count { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; } .builder-protocols__tiles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } .builder-protocols__tile { padding: 0.35rem 0.75rem; background: rgba(155, 89, 182, 0.08); border: 1px solid #9b59b6; border-radius: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text); cursor: grab; user-select: none; } .builder-protocols__tile:hover { background: rgba(155, 89, 182, 0.16); } .builder-protocols__tile:active { cursor: grabbing; } /* Highlight when held (matches library tile-held style but purple). */ .builder-protocols__tile.builder-library__tile--held { background: #f39c12; border-color: #f39c12; color: #fff; box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.25); } /* ── Groupings ─────────────────────────────────────────── */ .builder-groups { background: var(--surface); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; color: var(--text); } .builder-groups__header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; } .builder-groups__header h3 { margin: 0; font-size: 1rem; } .builder-groups__hint { font-size: 0.75rem; color: var(--text-muted); font-style: italic; } .builder-groups__list { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 1rem; /* small so Sortable has something to hover */ margin-bottom: 0.75rem; } /* Group tile — a single, larger tile representing multiple exercises. */ .builder-group-tile { position: relative; padding: 0.55rem 2rem 0.55rem 0.75rem; background: rgba(155, 89, 182, 0.12); /* purple to distinguish from library/tiles */ border: 1px solid #9b59b6; border-radius: 8px; color: var(--text); cursor: grab; user-select: none; min-width: 8rem; } .builder-group-tile:active { cursor: grabbing; } .builder-group-tile__name { font-weight: 600; font-size: 0.85rem; line-height: 1.15; } .builder-group-tile__count { font-size: 0.7rem; color: var(--text-muted); } .builder-group-tile__remove { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; padding: 0; border: none; background: rgba(0,0,0,0.06); color: var(--text-muted); font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .builder-group-tile__remove:hover { background: #e74c3c; color: #fff; } .builder-group-tile--held { background: #f39c12; border-color: #f39c12; color: #fff; box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.25); } .builder-group-tile--held .builder-group-tile__count { color: rgba(255,255,255,0.85); } /* + New grouping button */ .builder-groups__new { padding: 0.4rem 0.8rem; background: transparent; color: var(--text); border: 1px dashed var(--border-strong); border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .builder-groups__new:hover { border-color: #9b59b6; color: #9b59b6; } /* Draft form */ .builder-group-draft { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; } .builder-group-draft__name { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .builder-group-draft__name input { padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 0.9rem; font-weight: 500; color: var(--text); background: var(--surface); text-transform: none; letter-spacing: normal; } .builder-group-draft__label { font-size: 0.8rem; color: var(--text-muted); } .builder-group-draft__zone { min-height: 3rem; padding: 0.5rem; background: var(--surface); border: 2px dashed var(--border-strong); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .builder-group-draft__zone--empty { justify-content: center; } .builder-group-draft__empty-hint { color: var(--text-subtle); font-style: italic; font-size: 0.85rem; } .builder-group-draft__chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.4rem 0.25rem 0.6rem; background: rgba(155, 89, 182, 0.1); border: 1px solid #9b59b6; border-radius: 999px; font-size: 0.8rem; color: var(--text); } .builder-group-draft__chip-remove { width: 1.05rem; height: 1.05rem; padding: 0; border: none; background: transparent; color: var(--text-muted); font-size: 0.85rem; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 999px; } .builder-group-draft__chip-remove:hover { background: #e74c3c; color: #fff; } .builder-group-draft__actions { display: flex; justify-content: flex-end; gap: 0.4rem; } .builder-group-draft__save { padding: 0.35rem 0.9rem; background: #9b59b6; color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .builder-group-draft__cancel { padding: 0.35rem 0.9rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; } /* Highlighted state when the tile is "held" for click-and-paste. */ .builder-library__tile--held { background: #f39c12; border-color: #f39c12; color: #fff; box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.25); } .builder-library__tile--held:hover { color: #fff; border-color: #f39c12; } /* Sticky banner shown while a tile is held. */ .builder-hold-banner { position: sticky; top: 0.5rem; z-index: 5; background: #f39c12; color: #fff; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } /* `display: flex` above beats the `hidden` attribute's default, so make hidden explicit. */ .builder-hold-banner[hidden] { display: none; } /* Top-of-grid toolbar (undo + swap chooser). */ .builder-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .builder-undo { padding: 0.35rem 0.85rem; background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .builder-undo:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .builder-undo:disabled { opacity: 0.4; cursor: default; } /* Swap-days toolbar — appears above the grid when day columns are selected. */ .builder-swap-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.4rem 0.8rem; margin-bottom: 0.5rem; background: rgba(52, 152, 219, 0.1); border: 1px solid #3498db; border-radius: 8px; font-size: 0.85rem; color: var(--text); } .builder-swap-tools[hidden] { display: none; } .builder-swap-tools__label { color: var(--text-muted); } .builder-swap-tools__hint { color: var(--text-muted); font-style: italic; font-size: 0.8rem; } .builder-swap-tools__swap { padding: 0.3rem 0.9rem; background: #3498db; color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .builder-swap-tools__delete { padding: 0.3rem 0.9rem; background: var(--danger); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .builder-swap-tools__delete:hover { filter: brightness(1.08); } .builder-swap-tools__clear { padding: 0.3rem 0.7rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; cursor: pointer; margin-left: auto; } .builder-hold-banner__clear { width: 1.5rem; height: 1.5rem; padding: 0; border: none; border-radius: 999px; background: rgba(255,255,255,0.25); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; } .builder-hold-banner__clear:hover { background: rgba(255,255,255,0.45); } .builder-hold-banner kbd { background: rgba(255,255,255,0.25); padding: 0.05rem 0.4rem; border-radius: 4px; font-family: inherit; font-size: 0.8rem; } /* While holding, cells hint that they're click-to-drop targets. */ .builder--holding .builder-grid__cell { cursor: copy; border-color: #f39c12; background: rgba(243, 156, 18, 0.06); } .builder--holding .builder-grid__cell:hover { background: rgba(243, 156, 18, 0.16); } /* ============================================================ Training-cycle overview (show page) ============================================================ */ .cycle-header { background: var(--surface); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); color: var(--text); } .cycle-header__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .cycle-header__title { margin: 0 0 0.25rem 0; font-size: 1.5rem; line-height: 1.15; } .cycle-header__dates { margin: 0; color: var(--text-muted); font-size: 0.9rem; } .cycle-header__badges { display: flex; align-items: center; gap: 0.75rem; } .cycle-header__edit { padding: 0.35rem 0.9rem; background: transparent; border: 1px solid var(--border-strong); border-radius: 6px; text-decoration: none; color: var(--text); font-size: 0.85rem; font-weight: 600; } .cycle-header__edit:hover { border-color: var(--accent); color: var(--accent); } .cycle-badge { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .cycle-badge--active { background: var(--success); color: #fff; } .cycle-badge--upcoming { background: var(--accent); color: #fff; } .cycle-badge--completed { background: var(--text-subtle); color: #fff; } /* Progress bar */ .cycle-progress__bar { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; } .cycle-progress__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); border-radius: 999px; transition: width 0.4s ease; } .cycle-progress__stats { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 0.9rem; color: var(--text-muted); } .cycle-progress__stats strong { color: var(--text); } .cycle-progress__compliance { color: var(--success); font-weight: 600; } .cycle-header__today { display: inline-block; margin-top: 0.85rem; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; } .cycle-header__today:hover { background: var(--accent-hover); } /* ── Cards (goals, etc.) ────────────────────────────────── */ .cycle-card { background: var(--surface); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; color: var(--text); box-shadow: var(--shadow); } .cycle-card__title { margin: 0 0 1rem 0; font-size: 1.05rem; } .cycle-goals { padding-left: 1.25rem; margin: 0 0 1rem 0; } .cycle-goals li { margin-bottom: 0.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .cycle-empty { color: var(--text-muted); margin: 0; } .cycle-add-goal summary { cursor: pointer; display: inline-block; padding: 0.5rem 0.85rem; background: var(--accent); color: #fff; border-radius: 6px; list-style: none; font-size: 0.9rem; font-weight: 600; } .cycle-add-goal summary::-webkit-details-marker { display: none; } .cycle-add-goal__form { margin-top: 0.75rem; } .cycle-add-goal__row { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; } .cycle-add-goal__col { display: flex; flex-direction: column; gap: 0.2rem; } .cycle-add-goal__col--wide { flex: 4; min-width: 12rem; } .cycle-add-goal__col { flex: 1; min-width: 6rem; } .cycle-add-goal__col input { padding: 0.5rem; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--text); } /* ── Week groups ────────────────────────────────────────── */ .cycle-weeks { display: flex; flex-direction: column; gap: 0.75rem; } .cycle-week { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .cycle-week__header { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; cursor: pointer; color: var(--text); background: var(--surface); list-style: none; border-bottom: 1px solid transparent; } .cycle-week__header::-webkit-details-marker { display: none; } .cycle-week__header::before { content: "▸"; color: var(--text-muted); font-size: 0.8rem; transition: transform 0.15s ease; } .cycle-week[open] .cycle-week__header::before { transform: rotate(90deg); } .cycle-week[open] .cycle-week__header { border-bottom-color: var(--border); } .cycle-week__header--active { background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), transparent 60%); } .cycle-week__num { font-weight: 700; font-size: 1rem; } .cycle-week__dates { color: var(--text-muted); font-size: 0.85rem; } .cycle-week__summary { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; } .cycle-week__avg { color: var(--success); font-weight: 700; } .cycle-week__body { overflow-x: auto; } /* ── Table ──────────────────────────────────────────────── */ .cycle-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: var(--text); } .cycle-table th { padding: 0.6rem 0.75rem; text-align: left; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--surface-alt); border-bottom: 1px solid var(--border); } .cycle-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; } .cycle-table__st { width: 2rem; text-align: center; } .cycle-table__date { width: 6rem; font-weight: 600; white-space: nowrap; } .cycle-table__actions { width: 3rem; text-align: right; white-space: nowrap; } .cycle-table__col--warmup { border-left: 3px solid #f39c12; } .cycle-table__col--on { border-left: 3px solid #3498db; } .cycle-table__col--off { border-left: 3px solid #9b59b6; } .cycle-table__col--body { border-left: 3px solid #16a34a; } /* Row status states */ .cycle-row--all_done td { opacity: 0.6; } .cycle-row--rest td { color: var(--text-muted); } .cycle-row--today { background: rgba(37, 99, 235, 0.06); } .cycle-row--today td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .cycle-status { display: inline-block; min-width: 1rem; font-weight: 700; font-size: 0.9rem; } .cycle-status--done { color: var(--success); } .cycle-status--skipped { color: var(--text-subtle); } .cycle-status--today { color: var(--accent); } .cycle-status--rest { font-size: 0.85rem; } .cycle-today-tag { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; background: var(--accent); color: #fff; border-radius: 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; } .cycle-rest { text-align: center; color: var(--text-muted); font-style: italic; } /* ── Activity summary chips inside a cell ───────────────── */ .cycle-activity { margin-bottom: 0.35rem; } .cycle-activity:last-child { margin-bottom: 0; } .cycle-activity__title { font-weight: 600; line-height: 1.15; } .cycle-activity__check { color: var(--success); margin-right: 0.15rem; } .cycle-activity--done .cycle-activity__title { text-decoration: line-through; color: var(--text-muted); } .cycle-activity__meta { color: var(--text-muted); font-size: 0.75rem; } /* ============================================================ Stats tab ============================================================ */ .stats-subtitle { margin: 0 0 1.5rem 0; color: var(--text-muted); } .stats-empty { background: var(--surface); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; color: var(--text-muted); box-shadow: var(--shadow); } .stats-empty p { margin: 0 0 1rem 0; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .stats-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem 1.25rem; text-align: center; color: var(--text); box-shadow: var(--shadow); border-top: 4px solid var(--accent); } .stats-card__label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .stats-card__number { font-size: 2.75rem; font-weight: 800; line-height: 1; color: var(--text); margin-bottom: 0.35rem; } .stats-card__sub { font-size: 0.8rem; color: var(--text-muted); } /* Shared gym-filter chip (Stats + Tracking pages). */ .gym-filter { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 1rem; box-shadow: var(--shadow-sm); } .gym-filter__label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin: 0; } .gym-filter__select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 0.85rem; font-weight: 500; cursor: pointer; max-width: 14rem; } .stats-section-label { margin: 1.5rem 0 0.75rem 0; font-size: 1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .stats-empty-row { margin: 0 0 0.5rem 0; padding: 0.75rem 1rem; background: var(--surface); border-radius: var(--radius-sm); color: var(--text-muted); font-style: italic; box-shadow: var(--shadow); } /* Stat card as a link — indicate clickability without changing the layout. */ .stats-card--link { text-decoration: none; color: inherit; transition: transform 0.08s ease, box-shadow 0.08s ease; cursor: pointer; } .stats-card--link:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08); border-top-color: var(--success); } /* Pyramid row hover — subtle background shift so it's obviously clickable. */ .pyramid-row:hover { background: rgba(52, 152, 219, 0.06); } /* --- Climb tags: angle / hold type / style ---------------------------- */ .tag-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; } .tag-picker__option { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.9rem; cursor: pointer; user-select: none; } .tag-picker__option:has(:checked) { background: var(--accent); border-color: var(--accent); color: #fff; } .tag-picker__option input { margin: 0; } .climb-tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.35rem; vertical-align: middle; } .climb-tag { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font-size: 0.75rem; } /* --- Auth screens: log in + sign up ----------------------------------- */ .auth { display: flex; justify-content: center; padding-block: 2rem; } .auth-card { width: 100%; max-width: 22rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem 1.5rem; box-shadow: var(--shadow); } .auth-title { margin: 0 0 1.25rem; text-align: center; font-size: 1.5rem; } .auth-form { display: flex; flex-direction: column; gap: 1rem; /* Beat the legacy .sessions/.users form rules, which centre and pad again. */ background: none; padding: 0; margin: 0; box-shadow: none; max-width: none; } .auth-field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; } .auth-field label { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .auth-field input { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 1rem; } /* The only checkbox row here; centred so it lines up under the fields. */ .auth-remember { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); cursor: pointer; } .auth-remember input { width: auto; margin: 0; } .auth-submit { width: 100%; margin: 0; padding: 0.7rem 1rem; font-size: 1rem; font-weight: 600; } /* Secondary action: smaller, quieter, and always under the primary one. */ .auth-alt { margin: 1.25rem 0 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); } .auth-alt__link { color: var(--accent); font-weight: 600; text-decoration: none; } .auth-alt__link:hover { text-decoration: underline; } .auth-errors { margin-bottom: 1rem; padding: 0.6rem 0.8rem; border: 1px solid #e74c3c; border-radius: 8px; background: rgba(231, 76, 60, 0.12); font-size: 0.85rem; } .auth-errors ul { margin: 0; padding-left: 1.1rem; } /* --- Calendar month grid ---------------------------------------------- */ /* The month and the day drawer sat in a hard-coded two-column grid with no breakpoint, so on a phone each day cell was about 20px wide and effectively untappable. Stacking gives the grid the full width and puts the drawer directly under the day you tapped. */ .calendar-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 900px) { .calendar-layout { grid-template-columns: 1fr; } } .calendar-dow, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .calendar-dow { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; text-align: center; } .calendar-day { display: block; min-height: 60px; padding: 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-decoration: none; /* Removes the 300ms tap delay some mobile browsers still apply. */ touch-action: manipulation; -webkit-tap-highlight-color: rgba(37, 99, 235, 0.2); } .calendar-day:active { background: var(--surface-alt); } .calendar-day--outside { opacity: 0.4; } .calendar-day--today { outline: 2px solid var(--accent); } .calendar-day__num { font-weight: 600; font-size: 0.85rem; } .calendar-day__marks { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; } @media (max-width: 700px) { .calendar-dow, .calendar-grid { gap: 3px; } /* Still a comfortable tap target once the grid has the full width. */ .calendar-day { min-height: 3rem; padding: 0.3rem 0.2rem; } .calendar-day__num { font-size: 0.8rem; } } /* --- Per-section add-exercise control --------------------------------- */ .task-column__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .task-column__head h2 { margin: 0; } .add-activity { position: relative; } /* A plus sign, not a sentence: the section it sits in already says what it adds, and the type is taken from that section. */ .add-activity__toggle { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; list-style: none; user-select: none; touch-action: manipulation; } .add-activity__toggle::-webkit-details-marker { display: none; } .add-activity__toggle:hover { background: var(--surface-alt); } .add-activity[open] .add-activity__toggle { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .add-activity__fields { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); } .add-activity__row { display: flex; gap: 0.4rem; } .add-activity__input { width: 100%; min-width: 0; padding: 0.4rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 0.9rem; } .add-activity__submit { width: 100%; } /* --- Style breakdown: one donut per group + send rates ----------------- */ /* Series colours are the first three categorical slots, validated against both surfaces for colour-vision separation. Identity is never colour alone: every slice is named in the legend beside it. */ .style-groups { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .style-groups { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; } } :root[data-theme="dark"] .style-groups { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; } .style-group { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; } .style-group__title { margin: 0 0 0.85rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .style-group__empty { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .style-split { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .style-donut { flex: none; width: 6.5rem; height: 6.5rem; /* The ring starts at 12 o'clock and fills clockwise. */ transform: rotate(-90deg); } .style-donut__track, .style-donut__seg { fill: none; stroke-width: 13; } .style-donut__track { stroke: var(--surface-alt); } /* One colour per tag slot, keyed to the tag rather than to draw order, so the donut and the legend can never disagree about which colour is which. */ .style-donut__seg.style-series--1 { stroke: var(--series-1); } .style-donut__seg.style-series--2 { stroke: var(--series-2); } .style-donut__seg.style-series--3 { stroke: var(--series-3); } .style-legend__swatch.style-series--1 { background: var(--series-1); } .style-legend__swatch.style-series--2 { background: var(--series-2); } .style-legend__swatch.style-series--3 { background: var(--series-3); } /* Counter-rotates the label so the ring can start at the top. */ .style-donut__total { transform: rotate(90deg); transform-origin: 50% 50%; fill: var(--text); font-size: 19px; font-weight: 700; } .style-legend { flex: 1 1 11rem; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .style-legend__row { display: grid; grid-template-columns: 0.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.4rem; font-size: 0.8rem; } .style-legend__row--none { opacity: 0.5; } .style-legend__swatch { width: 0.6rem; height: 0.6rem; border-radius: 3px; align-self: center; } .style-legend__name { color: var(--text); font-weight: 600; overflow-wrap: anywhere; } .style-legend__share { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } /* Send rate sits on its own line so the share column stays aligned. */ .style-legend__rate { grid-column: 2 / -1; color: var(--text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .style-legend__count { color: var(--text-subtle); } /* --- Calendar: view switcher, week strip, day detail ------------------- */ .calendar-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .calendar-bar__title { margin: 0; } .calendar-views { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-alt); } .calendar-views__opt { padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; touch-action: manipulation; } .calendar-views__opt--on { background: var(--accent); color: var(--text-on-accent); } /* Week: seven columns on a desktop, stacked rows once that would squeeze the text, which is the mistake the month grid made before. */ .calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; } @media (max-width: 900px) { .calendar-week { grid-template-columns: 1fr; } } .calendar-week__day { display: flex; flex-direction: column; gap: 0.4rem; min-height: 7rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .calendar-week__day--today { outline: 2px solid var(--accent); } .calendar-week__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; } .calendar-week__date { display: flex; align-items: baseline; gap: 0.35rem; color: var(--text); text-decoration: none; } .calendar-week__dow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .calendar-week__num { font-size: 1.05rem; font-weight: 700; } .calendar-week__tag { font-size: 0.68rem; padding: 0 0.4rem; border-radius: 999px; background: var(--text-muted); color: var(--surface); } .calendar-week__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; } .calendar-week__item { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.78rem; line-height: 1.3; } .calendar-week__grade { font-weight: 700; font-variant-numeric: tabular-nums; } .calendar-week__check, .calendar-week__sent { color: var(--text-muted); } /* Titles vary wildly in length; let them wrap rather than widen the column. */ .calendar-week__name { min-width: 0; overflow-wrap: anywhere; color: var(--text-muted); } .calendar-week__item--activity .calendar-week__name { color: var(--text); } .calendar-week__empty { margin: 0; color: var(--text-subtle); } /* Day: one date, so nothing has to be abbreviated. */ .calendar-detail { padding: 1.25rem; } .calendar-detail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .calendar-detail__title { margin: 0; font-size: 1.25rem; } .calendar-detail__section + .calendar-detail__section { margin-top: 1.5rem; } .calendar-detail__label { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .calendar-detail__quiet { margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.9rem; } .calendar-detail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .calendar-detail__row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--border); } .calendar-detail__check, .calendar-detail__grade { flex: none; min-width: 2.25rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .calendar-detail__meta { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: anywhere; } /* --- Attached media list on the climb form ---------------------------- */ .media-hint { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--text-muted); } .media-existing { margin: 0.6rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; } .media-existing legend { padding: 0 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .media-existing__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.85rem; font-weight: 400; cursor: pointer; } .media-existing__row input { width: auto; margin: 0; } .media-existing__name { overflow-wrap: anywhere; } .media-existing__size { margin-left: auto; color: var(--text-subtle); font-variant-numeric: tabular-nums; } .auth-intro { margin: -0.5rem 0 1rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); }