/* ---- Tokens ---- */ :root { /* Dark palette (default) */ --bg: #0a0e14; --bg-elev: #11161f; --bg-card: #161c27; --bg-hover: #1d2533; --border: #232b3a; --border-strong: #2f3a4d; --text: #e6ecf3; --text-muted: #8a93a3; --text-dim: #5b6577; --accent: #00ff88; /* recovery green */ --accent-warm: #ffb347; /* moderate */ --accent-hot: #ff3358; /* hard / strain */ --accent-cool: #4d9eff; /* sleep / hr */ --shadow: 0 4px 24px rgba(0,0,0,0.4); --radius: 12px; --radius-sm: 8px; --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; --mono: 'SF Mono', Monaco, Consolas, monospace; } /* Light palette. Activated by the theme manager via . Only the surface + text tokens flip; accents stay so charts, status badges, and the recovery green keep their identity. Accents do get a small darken so they sit better against a near-white background. */ [data-theme="light"] { --bg: #f6f7fa; --bg-elev: #ffffff; --bg-card: #ffffff; --bg-hover: #eef0f5; --border: #dde1ea; --border-strong: #c2c8d6; --text: #15192a; --text-muted: #5b6477; --text-dim: #8b93a4; --accent: #00b269; /* recovery green, deeper for contrast on white */ --accent-warm: #e08a00; --accent-hot: #d8214a; --accent-cool: #2c7bd6; --shadow: 0 4px 24px rgba(20, 30, 60, 0.08); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; } button { font-family: inherit; } a { color: inherit; text-decoration: none; } /* ---- Layout ---- */ #app { display: grid; grid-template-columns: 260px 1fr; height: 100vh; } .sidebar { background: var(--bg-elev); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } .main { overflow-y: auto; padding: 32px 48px; } /* ---- Sidebar ---- */ .brand { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border-bottom: 1px solid var(--border); } .brand-icon { width: 36px; height: 36px; border-radius: 8px; } .brand-name { font-weight: 700; letter-spacing: -0.01em; font-size: 16px; } .brand-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; } .nav-link:hover { background: var(--bg-hover); color: var(--text); } .nav-link.active { background: var(--bg-hover); color: var(--text); } .nav-icon { width: 16px; text-align: center; opacity: 0.6; } .nav-section { padding: 16px 8px 8px; } .nav-section-header { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .icon-btn:hover { border-color: var(--border-strong); color: var(--text); } .category-list { display: flex; flex-direction: column; gap: 1px; } .category-link { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 13px; position: relative; } .category-link:hover { background: var(--bg-hover); color: var(--text); } .category-link.active { background: var(--bg-hover); color: var(--text); } .category-emoji { width: 16px; text-align: center; } .emoji-trigger { cursor: pointer; border-radius: 4px; padding: 1px 2px; transition: background 100ms ease, transform 100ms ease; } .emoji-trigger:hover { background: var(--bg); transform: scale(1.15); } .category-count { margin-left: auto; font-size: 11px; color: var(--text-dim); background: var(--bg); padding: 1px 6px; border-radius: 10px; } .category-delete { margin-left: auto; font-size: 16px; line-height: 1; color: var(--text-dim); padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity 100ms ease, background 100ms ease, color 100ms ease; } /* If a count badge is also present, push the × to sit just after it. */ .category-count + .category-delete { margin-left: 6px; } .category-link:hover .category-delete, .category-link:focus-within .category-delete { opacity: 1; } .category-delete:hover { background: var(--accent-hot, #c33); color: #fff; } .sidebar-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .provider-status { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); flex: 1; } /* Theme toggle: sun in dark mode, moon in light mode (icon = "what you'll get after clicking"). Set by app.js syncThemeToggleIcon. */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .provider-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .provider-row .ok { color: var(--accent); } .provider-row .stale { color: var(--accent-warm); } .provider-row-right { display: inline-flex; align-items: center; gap: 6px; } .provider-sync-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .provider-sync-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); } .provider-sync-btn:disabled { opacity: 0.5; cursor: default; } .provider-sync-btn.spinning { animation: provider-spin 0.9s linear infinite; } @keyframes provider-spin { to { transform: rotate(360deg); } } /* ---- Cards ---- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .card h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .card .big { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .card .small { font-size: 13px; color: var(--text-muted); margin-top: 4px; } /* ---- Today view ---- */ .page-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; } .page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .page-date { color: var(--text-muted); font-size: 13px; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; } .recovery-bar { height: 6px; background: var(--bg); border-radius: 3px; margin-top: 12px; overflow: hidden; } .recovery-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; } .section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 32px 0 12px; } /* ---- Activity rows ---- */ .sync-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); } .sync-footer-rows { display: flex; flex-direction: column; gap: 8px; } .sync-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); } .sync-name { text-transform: uppercase; letter-spacing: 0.05em; min-width: 60px; } .sync-detail { flex: 1; } .sync-ok { color: var(--text-muted); } .sync-muted { color: var(--text-dim); } .sync-error { color: var(--accent-hot); } .sync-button { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; cursor: pointer; } .sync-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .sync-button:disabled { opacity: 0.6; cursor: default; } .activity-list { display: flex; flex-direction: column; gap: 8px; } .activity-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center; color: inherit; text-decoration: none; } .activity-row-link { display: contents; color: inherit; text-decoration: none; } .activity-row:has(.activity-children) { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .activity-row:has(.activity-children) .activity-row-link { display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center; } .activity-children { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; } .activity-child { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); text-decoration: none; padding: 2px 0; } .activity-child:hover { color: var(--text); } .activity-child-stat { font-family: var(--mono); } .activity-icon { width: 32px; height: 32px; background: var(--bg-hover); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .activity-meta { display: flex; flex-direction: column; } .activity-name { font-weight: 500; } .activity-detail { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .activity-detail span + span { margin-left: 12px; } .activity-stat { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--text-muted); } .activity-stat .big { font-size: 16px; color: var(--text); display: block; } .source-badge { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 8px; } .source-strava { background: rgba(252, 76, 2, 0.15); color: #fc8d4d; } .source-whoop { background: rgba(0, 255, 136, 0.13); color: var(--accent); } /* ---- Trends / charts ---- */ .chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } .chart-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .chart-card-title { font-size: 14px; font-weight: 600; } .chart-card-sub { font-size: 12px; color: var(--text-muted); } .chart-wrap { position: relative; height: 200px; } .range-tabs { display: flex; gap: 4px; } .range-tab { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; } .range-tab.active { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); } .sport-table { width: 100%; border-collapse: collapse; } .sport-table th, .sport-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; } .sport-table th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; } .sport-table td.num { font-family: var(--mono); text-align: right; } /* ---- Segments ---- */ .segment-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; } .segment-search { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; min-width: 200px; flex: 1; } .segment-search:focus { outline: none; border-color: var(--accent); } .segment-order-select { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; cursor: pointer; } .segment-row { text-decoration: none; color: inherit; transition: border-color 0.15s; } .segment-row:hover { border-color: var(--border-strong); } .segment-star { color: var(--accent-warm); margin-right: 4px; } .climb-badge { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 179, 71, 0.15); color: var(--accent-warm); margin-left: 8px; text-transform: uppercase; letter-spacing: 0.04em; } .segment-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-bottom: 8px; } .segment-stat-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; } .segment-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 4px; } .segment-stat-value { font-size: 18px; font-weight: 600; font-family: var(--mono); } .segment-strava-link { font-size: 12px; color: #fc8d4d; text-decoration: none; border: 1px solid rgba(252, 76, 2, 0.4); padding: 6px 10px; border-radius: var(--radius-sm); } .segment-strava-link:hover { background: rgba(252, 76, 2, 0.1); } .back-link { font-size: 12px; color: var(--text-muted); text-decoration: none; display: inline-block; margin-bottom: 6px; } .back-link:hover { color: var(--text); } .pr-badge { color: var(--accent-warm); font-size: 18px; } /* ---- Activity detail ---- */ .hr-zone-bar { display: flex; height: 22px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); } .hr-zone { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(0, 0, 0, 0.7); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; } .hr-zone-z1 { background: #4d9eff; } .hr-zone-z2 { background: #00ff88; } .hr-zone-z3 { background: #ffb347; } .hr-zone-z4 { background: #ff7a45; } .hr-zone-z5 { background: #ff3358; } .activity-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; } .activity-table { width: 100%; border-collapse: collapse; font-size: 13px; } .activity-table th, .activity-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-family: var(--mono); white-space: nowrap; } .activity-table th { font-family: var(--font); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 600; } .activity-table tbody tr:last-child td { border-bottom: none; } .activity-table-clickable tbody tr { cursor: pointer; } .activity-table-clickable tbody tr:hover td { background: var(--bg-hover); } .activity-segment-name { font-family: var(--font); white-space: normal; } /* ---- Gameplan ---- */ .gameplan-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: calc(100vh - 0px); margin: -32px -48px; } .thread-list-pane { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-elev); } .thread-list-header { padding: 20px 20px 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .thread-list-header h2 { margin: 0; font-size: 18px; } .thread-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .thread-card { padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; } .thread-card:hover { background: var(--bg-hover); } .thread-card.active { background: var(--bg-card); border-color: var(--border); } .thread-card-title { font-weight: 500; margin-bottom: 4px; } .thread-card-meta { font-size: 11px; color: var(--text-dim); display: flex; gap: 10px; } .thread-pin { color: var(--accent-warm); } .chat-pane { display: flex; flex-direction: column; height: 100%; } .chat-header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .chat-title { font-weight: 600; } .chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; } .message { max-width: 720px; min-width: 0; overflow-wrap: anywhere; } .message.user { align-self: flex-end; background: var(--accent-cool); color: white; padding: 10px 16px; border-radius: 14px 14px 2px 14px; } .message.assistant { color: var(--text); white-space: pre-wrap; line-height: 1.6; } .message.assistant strong { color: var(--text); } /* Once swapped to rendered markdown after the stream ends (or for messages loaded from history), drop pre-wrap so block-level markdown elements render normally. Streamed-but-not-yet-rendered text still uses pre-wrap so progressive deltas keep their newlines visible. */ .message.assistant.md-rendered { white-space: normal; } .message.assistant .md-segment > *:first-child { margin-top: 0; } .message.assistant .md-segment > *:last-child { margin-bottom: 0; } .message.assistant p { margin: 0 0 10px; } .message.assistant ul, .message.assistant ol { margin: 0 0 10px; padding-left: 22px; } .message.assistant li { margin: 3px 0; } .message.assistant li > p { margin: 0; } .message.assistant h1, .message.assistant h2, .message.assistant h3, .message.assistant h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 14px 0 6px; } .message.assistant h1 { font-size: 18px; } .message.assistant h2 { font-size: 16px; } .message.assistant h3 { font-size: 15px; } .message.assistant h4 { font-size: 14px; } .message.assistant em { font-style: italic; } .message.assistant a { color: var(--accent-cool); text-decoration: underline; } .message.assistant code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12px; } .message.assistant pre { background: var(--bg); padding: 10px 12px; border-radius: 6px; overflow-x: auto; margin: 0 0 10px; } .message.assistant pre code { background: transparent; padding: 0; font-size: 12px; } .message.assistant blockquote { border-left: 2px solid var(--border-strong); padding-left: 10px; color: var(--text-muted); margin: 0 0 10px; } .message.assistant table { border-collapse: collapse; margin: 0 0 12px; display: block; overflow-x: auto; } .message.assistant th, .message.assistant td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; font-size: 13px; } .message.assistant th { background: var(--bg); font-weight: 600; } .message.assistant hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; } /* Tool-call indicators: rendered inline inside an assistant message */ .tool-call { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; padding: 4px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); white-space: pre-wrap; max-width: 100%; min-width: 0; overflow-wrap: anywhere; } .tool-call.pending .tool-call-icon { color: var(--accent-warm); animation: spin 1.2s linear infinite; } .tool-call.ok .tool-call-icon { color: var(--accent); } .tool-call.err .tool-call-icon { color: var(--accent-hot); } .tool-call-name { color: var(--text); font-weight: 600; } .tool-call-args { opacity: 0.7; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .tool-call-summary { color: var(--text-dim); } @keyframes spin { to { transform: rotate(360deg); } } .chat-input-wrap { padding: 16px 24px 24px; border-top: 1px solid var(--border); } .chat-input-box { display: flex; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; } .chat-input { flex: 1; background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 14px; resize: none; padding: 8px; outline: none; max-height: 200px; } .chat-send { background: var(--accent); border: none; color: var(--bg); font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; } .chat-send:disabled { opacity: 0.5; cursor: not-allowed; } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state h3 { margin: 0 0 8px; color: var(--text); font-weight: 600; } .empty-state .btn { margin-top: 16px; } .btn { background: var(--accent); color: var(--bg); border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 13px; } .btn.secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); } .connect-card { background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 24px; text-align: center; } .connect-card h3 { margin: 0 0 8px; } .loading { padding: 40px; color: var(--text-muted); } /* ---- Sidebar gameplan sublist ---- */ .gameplan-sublist { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 28px; /* indent under the parent sport */ border-left: 1px solid var(--border); margin: 0 12px 6px 18px; } .gameplan-sublink { padding: 5px 10px; border-radius: 6px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .gameplan-sublink:hover { background: var(--bg-hover); color: var(--text); } .gameplan-sublink.active { background: var(--bg-hover); color: var(--text); font-weight: 500; } /* Name takes the available width and ellipsises long titles; the × on the right stays visible. min-width:0 is the flex-child trick that lets overflow:hidden actually clip. */ .gameplan-sublink-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mirror .category-delete — hidden on desktop until hover/focus, always slightly visible on touch (no hover). */ .gameplan-delete { font-size: 14px; line-height: 1; color: var(--text-dim); padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity 100ms ease, background 100ms ease, color 100ms ease; flex-shrink: 0; } .gameplan-sublink:hover .gameplan-delete, .gameplan-sublink:focus-within .gameplan-delete { opacity: 1; } .gameplan-delete:hover { background: var(--accent-hot); color: #fff; } /* ---- Sport view: gameplan list cards ---- */ .gameplan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .gameplan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s, transform 0.05s; } .gameplan-card:hover { border-color: var(--border-strong); } .gameplan-card:active { transform: scale(0.99); } .gameplan-card-title { font-weight: 600; font-size: 15px; } .gameplan-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gameplan-card-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; } /* ---- Gameplan doc page ---- */ .gameplan-doc-page { display: flex; flex-direction: column; height: 100%; margin: -32px -48px; } .gameplan-doc-header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .gameplan-doc-title-wrap { flex: 1; min-width: 0; } .gameplan-doc-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gameplan-doc-actions { display: flex; align-items: center; gap: 10px; } .gameplan-save-indicator { font-size: 12px; color: var(--text-dim); font-family: var(--mono); min-width: 60px; text-align: right; } /* Tab strip — only Document is enabled in PR A. */ .gameplan-tabs { display: flex; gap: 4px; padding: 8px 24px 0; border-bottom: 1px solid var(--border); } .gameplan-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 10px 14px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 0; } .gameplan-tab:hover:not(.disabled) { color: var(--text); } .gameplan-tab.active { color: var(--text); border-bottom-color: var(--accent); } .gameplan-tab.disabled { cursor: not-allowed; opacity: 0.4; } .gameplan-doc-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; } /* Editor — the workout-logging primary surface */ .gameplan-editor { flex: 1; width: 100%; background: var(--bg); color: var(--text); border: none; outline: none; resize: none; padding: 20px 24px; font-family: var(--mono); font-size: 16px; /* 16px to keep iOS Safari from auto-zooming */ line-height: 1.55; white-space: pre; /* don't wrap mid-table-row */ overflow: auto; -webkit-overflow-scrolling: touch; } .gameplan-editor::placeholder { color: var(--text-dim); } /* Read mode — rendered markdown */ .gameplan-rendered { flex: 1; overflow-y: auto; padding: 20px 24px 60px; font-size: 15px; line-height: 1.6; -webkit-overflow-scrolling: touch; } .gameplan-rendered h1, .gameplan-rendered h2, .gameplan-rendered h3 { letter-spacing: -0.01em; } .gameplan-rendered h1 { font-size: 24px; margin: 24px 0 12px; } .gameplan-rendered h2 { font-size: 19px; margin: 22px 0 10px; } .gameplan-rendered h3 { font-size: 16px; margin: 18px 0 8px; } .gameplan-rendered p { margin: 0 0 12px; } .gameplan-rendered ul, .gameplan-rendered ol { margin: 0 0 12px; padding-left: 24px; } .gameplan-rendered li { margin: 4px 0; } .gameplan-rendered a { color: var(--accent-cool); text-decoration: underline; } .gameplan-rendered code { background: var(--bg-card); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 13px; } .gameplan-rendered pre { background: var(--bg-card); padding: 12px 14px; border-radius: 6px; overflow-x: auto; } .gameplan-rendered pre code { background: transparent; padding: 0; } .gameplan-rendered blockquote { border-left: 3px solid var(--border-strong); padding-left: 12px; color: var(--text-muted); margin: 0 0 12px; } .gameplan-rendered table { border-collapse: collapse; margin: 0 0 16px; width: auto; display: block; overflow-x: auto; } .gameplan-rendered th, .gameplan-rendered td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; font-size: 14px; } .gameplan-rendered th { background: var(--bg-card); font-weight: 600; } .gameplan-rendered hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; } .gameplan-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); } .gameplan-fallback { white-space: pre-wrap; font-family: var(--mono); font-size: 14px; margin: 0; } /* ---- Gameplan activities tab ---- */ .gameplan-activities { flex: 1; overflow-y: auto; padding: 20px 24px 40px; -webkit-overflow-scrolling: touch; } .activities-section { margin-bottom: 28px; } .activities-section .section-title { margin: 0 0 10px; } .empty-state-inline { padding: 14px 16px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); } .activity-action { display: flex; align-items: center; } .activity-action .btn, .activity-action .btn.secondary { font-size: 12px; padding: 6px 10px; white-space: nowrap; } /* ---- Activities tab: search + sport filter + show-more ---- */ .activities-controls { display: flex; gap: 8px; margin: 0 0 12px; } .activities-search { flex: 1; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-size: 13px; outline: none; } .activities-search:focus { border-color: var(--accent); } .activities-sport-filter { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; outline: none; } .activities-sport-filter:focus { border-color: var(--accent); } .activities-more { display: block; margin: 14px auto 0; font-size: 12px; } /* Small sport tag in each row's name line, between the source badge and the activity name. Helps disambiguate runs vs trail-runs vs rides. */ .sport-tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; margin-right: 6px; vertical-align: 2px; } /* ---- Gameplan chat (inside the gameplan view) ---- */ .gameplan-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; } .gameplan-chat .chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; -webkit-overflow-scrolling: touch; } .gameplan-chat .chat-input-wrap { border-top: 1px solid var(--border); padding: 12px 24px; display: flex; flex-direction: column; gap: 6px; } .ephemeral-toggle { font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; align-self: flex-end; } .ephemeral-toggle input { margin: 0; } /* Chat attachment thumbnails (above the input) */ .chat-attachments { display: none; } .chat-attachments.has-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; } .chat-attachment-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); } .chat-attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .chat-attachment-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; padding: 0; } .chat-attachment-remove:hover { background: var(--accent-hot); } /* Attach button next to the chat input */ .chat-attach { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; padding: 0 10px; cursor: pointer; font-size: 16px; align-self: flex-end; height: 36px; } .chat-attach:hover { color: var(--text); border-color: var(--border-strong); } /* Inline thumbnails inside the user-message bubble */ .message .message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .message .message-attachments img { max-width: 160px; max-height: 160px; border-radius: 6px; display: block; object-fit: cover; } /* ---- Modal ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } .modal { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal h2 { margin: 0 0 14px; font-size: 18px; letter-spacing: -0.01em; } .modal-label { display: block; margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .modal-input { width: 100%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; font-size: 14px; outline: none; } .modal-input:focus { border-color: var(--accent); } .modal-input.error { border-color: var(--accent-hot); } textarea.modal-input { resize: vertical; min-height: 60px; font-size: 14px; } .modal-hint { font-size: 11px; color: var(--text-dim); margin: 12px 0 4px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* ---- Add-sport modal: emoji button + name input on one row ---- */ .sport-name-row { display: flex; align-items: stretch; gap: 10px; } .sport-icon-btn { width: 48px; flex: 0 0 48px; font-size: 24px; line-height: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: inherit; transition: border-color 100ms ease, background 100ms ease; } .sport-icon-btn:hover { border-color: var(--accent); background: var(--bg-hover); } .sport-name-row .modal-input { flex: 1; } /* ---- Emoji picker modal ---- */ .emoji-modal-overlay { z-index: 110; } /* above the add-sport modal when stacked */ .emoji-modal { background: transparent; padding: 0; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .app-emoji-picker { display: block; width: min(360px, 92vw); height: min(420px, 70vh); /* emoji-picker-element exposes these CSS custom properties for theming. */ --background: var(--bg-elev); --border-color: var(--border); --indicator-color: var(--accent); --input-border-color: var(--border); --input-font-color: var(--text); --input-placeholder-color: var(--text-dim); --button-active-background: var(--bg-hover); --button-hover-background: var(--bg-hover); --category-emoji-padding: 4px; } /* ---- Mobile header (hidden on desktop) ---- */ .mobile-header { display: none; } .sidebar-backdrop { display: none; } /* ---- Mobile ---- */ @media (max-width: 720px) { /* App becomes a column: header on top, main below; sidebar overlays. */ #app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } /* Top bar */ .mobile-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; flex: 0 0 auto; } .hamburger { width: 40px; height: 40px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0; } .hamburger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; } .mobile-brand { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .mobile-brand span { color: var(--text-muted); font-weight: 500; } /* Sidebar slides in from the left */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 86vw; z-index: 50; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } body.sidebar-open .sidebar { transform: translateX(0); } .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; z-index: 40; } body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } body.sidebar-open { overflow: hidden; } /* Main fills the remaining height */ .main { padding: 20px 16px; padding-bottom: max(20px, env(safe-area-inset-bottom)); flex: 1 1 auto; min-height: 0; } /* Bigger tap targets in the drawer */ .nav-link { padding: 12px; font-size: 15px; } .category-link { padding: 12px; font-size: 14px; } .icon-btn { width: 32px; height: 32px; } /* Touch devices have no hover — keep the delete affordances visible. */ .category-delete { opacity: 0.6; padding: 6px 10px; } .gameplan-delete { opacity: 0.6; padding: 6px 10px; font-size: 16px; } /* Page header stacks */ .page-header { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 20px; } .page-title { font-size: 24px; } /* Tighter cards / single-column metrics */ .metrics-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .card { padding: 16px; } .card .big { font-size: 28px; } /* Activity rows: drop the right-hand stat to a second row */ .activity-row { grid-template-columns: 32px 1fr; grid-template-rows: auto auto; row-gap: 8px; padding: 12px 14px; } .activity-stat { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 6px; } .activity-stat .big { display: inline; } .activity-action { grid-column: 1 / -1; justify-content: flex-end; } .activity-row:has(.activity-children) .activity-row-link { grid-template-columns: 32px 1fr; grid-template-rows: auto auto; row-gap: 8px; } /* Stack the activities-tab search + filter on small screens */ .activities-controls { flex-direction: column; gap: 8px; } .activities-sport-filter { width: 100%; } /* Chart cards */ .chart-card { padding: 16px; } .chart-card-header { flex-direction: column; align-items: flex-start; gap: 8px; } .chart-wrap { height: 180px; } /* Sport table: scroll horizontally rather than wrap */ .sport-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sport-table { min-width: 480px; } /* ---- Gameplan: stack with back button ---- */ /* main is a flex item filling remaining height; gameplan-layout fills main. */ .gameplan-layout { grid-template-columns: 1fr; margin: -20px -16px; margin-bottom: calc(-1 * max(20px, env(safe-area-inset-bottom))); height: 100%; } .thread-list-pane { border-right: none; } .chat-pane { display: none; } body.chat-open .thread-list-pane { display: none; } body.chat-open .chat-pane { display: flex; } .chat-back { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; margin-right: 10px; } .chat-header { padding: 12px 16px; gap: 8px; } .chat-messages { padding: 16px; } .message { max-width: 100%; } .chat-input-wrap { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* 16px on iOS prevents the auto-zoom-on-focus */ .chat-input { font-size: 16px; } /* ---- Gameplan doc page (mobile) ---- */ .gameplan-doc-page { margin: -20px -16px; margin-bottom: calc(-1 * max(20px, env(safe-area-inset-bottom))); height: 100%; } .gameplan-doc-header { padding: 12px 16px; gap: 8px; } .gameplan-doc-title { font-size: 16px; } .gameplan-tabs { padding: 6px 16px 0; } .gameplan-tab { padding: 8px 12px; font-size: 12px; } .gameplan-editor { padding: 16px; line-height: 1.5; } .gameplan-rendered { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); } .gameplan-list { grid-template-columns: 1fr; gap: 10px; } /* Sublist gets a bit tighter on mobile */ .gameplan-sublist { padding-left: 24px; margin-left: 14px; } .gameplan-sublink { padding: 8px 10px; font-size: 13px; } } /* Desktop: hide the mobile-only back button */ .chat-back { display: none; } @media (max-width: 720px) { .chat-back { display: inline-flex; align-items: center; } } /* ---- Profile page ---- */ .profile-page { max-width: 760px; } .profile-card { display: flex; flex-direction: column; gap: 4px; } .profile-help { margin: 0 0 4px; color: var(--text-muted); font-size: 13px; line-height: 1.5; } .profile-about { min-height: 240px; font-family: var(--mono); line-height: 1.5; } .profile-actions { display: flex; justify-content: flex-end; margin-top: 16px; } .profile-status { color: var(--text-muted); font-size: 12px; } /* ---- Nutrition section ---- */ .nutrition-header { margin: 32px 0 12px; } .nutrition-heading { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: var(--text); } .nutrition-form-card, .nutrition-list-card { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .nutrition-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .nutrition-file-input { display: none; } .nutrition-preview { max-width: 220px; max-height: 220px; border-radius: 6px; border: 1px solid var(--border); display: block; } .nutrition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; } .nutrition-field { display: flex; flex-direction: column; gap: 2px; } .nutrition-field .modal-label { margin: 0 0 2px; } .nutrition-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; } .nutrition-status { flex: 1; font-size: 12px; color: var(--text-muted); } .nutrition-status[data-kind="error"] { color: var(--accent-hot); } .nutrition-list { display: flex; flex-direction: column; gap: 8px; } .nutrition-item { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .nutrition-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .nutrition-item-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .nutrition-item-name { font-weight: 600; color: var(--text); } .nutrition-item-brand { color: var(--text-muted); font-size: 13px; } .nutrition-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; } .nutrition-item-actions { display: flex; gap: 4px; } .nutrition-item-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); } .nutrition-item-macros { color: var(--text); } @media (max-width: 720px) { .nutrition-grid { grid-template-columns: 1fr; } .nutrition-preview { max-width: 100%; } } /* ---- Generic danger button (Finish Session, etc.) ---- */ .btn.danger { background: var(--accent-hot); color: #fff; } .btn.danger:hover { background: #ff4a6c; } /* ---- Template picker in the new-gameplan modal ---- */ .template-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; } .template-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; text-align: left; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; transition: border-color 0.12s ease, background 0.12s ease; } .template-card:hover { border-color: var(--border-strong); } .template-card.selected { border-color: var(--accent); background: rgba(0, 255, 136, 0.05); } .template-card-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; } .template-card-icon { font-size: 18px; } .template-card-label { letter-spacing: -0.005em; } .template-card-hint { font-size: 12px; color: var(--text-muted); line-height: 1.45; } /* ---- Fitness tracker view ---- */ /* Outer = the scroll container. Parent .gameplan-doc-body is flex+overflow-hidden, so we own scrolling here, and the inner is what gets max-width + centering. */ .fitness-tracker { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ft-inner { padding: 16px 24px 80px; max-width: 760px; margin: 0 auto; } .ft-header { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; margin-bottom: 20px; } .ft-date-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ft-date { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .ft-status-row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-dim); } .ft-status.in-progress { color: var(--accent-warm); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .ft-save-indicator { color: var(--text-dim); } /* Sessions button in the FT header — opens the timeline drawer. */ .ft-timeline-btn { white-space: nowrap; padding: 6px 12px; font-size: 12px; } .ft-new-btn { white-space: nowrap; } .ft-header-actions { display: flex; gap: 6px; align-items: center; } .ft-delete-session-btn { padding: 6px 10px; font-size: 14px; line-height: 1; color: var(--text-muted); } .ft-delete-session-btn:hover { color: var(--accent-hot); border-color: var(--accent-hot); } .ft-start-btn { margin-top: 12px; } /* Exercise list */ .ft-exercise-list { display: flex; flex-direction: column; gap: 12px; } .ft-ex-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .ft-ex-header { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } /* Horizontal cluster of ↑ ↓ × on the right of the header. Compact so the reorder controls don't dominate the card the way a vertical stack did. */ .ft-ex-actions { display: inline-flex; gap: 4px; align-items: center; } /* Read mode = name + (optional target) on one row, target gets a pill chip. */ .ft-ex-header.read { display: flex; align-items: baseline; gap: 10px; } .ft-ex-name { font-weight: 600; font-size: 15px; letter-spacing: -0.005em; } /* Edit mode: name + target inline. Name input gets the room; target stays compact and right-aligned so a quick glance lands on the workout, not the target hint. */ .ft-ex-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .ft-ex-name-input { background: transparent; border: 1px solid transparent; border-bottom: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 600; padding: 4px 6px; border-radius: 6px; min-width: 0; flex: 1; font-family: inherit; } .ft-ex-name-input:focus { outline: none; border-color: var(--accent); background: var(--bg-hover); } .ft-ex-target { font-size: 12px; color: var(--text-muted); font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; } .ft-ex-target-input { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); font-family: var(--mono); font-size: 12px; padding: 4px 8px; border-radius: 6px; width: 72px; text-align: center; flex: 0 0 auto; } .ft-ex-target-input:focus { outline: none; border-color: var(--accent); color: var(--text); } .ft-mini-btn { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .ft-mini-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); } .ft-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ft-mini-btn.ft-delete-btn:hover { background: var(--accent-hot); color: #fff; border-color: var(--accent-hot); } /* Sets row */ .ft-sets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ft-set-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 10px; font-family: var(--mono); font-size: 13px; color: var(--text); } .ft-set-pill.read { padding: 6px 12px; gap: 8px; } .ft-set-num { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .ft-set-pill.read .ft-set-num { font-size: 11px; } /* Set number is now a button in edit mode — tap to expand the reps input for that set. Looks the same as the old span by default; the .tappable modifier (added when reps input is hidden) lights up subtly so the user knows it does something. */ .ft-set-num-btn { background: transparent; border: none; color: var(--text-dim); font-family: var(--mono); font-size: 11px; padding: 0 2px; cursor: default; line-height: 1; } .ft-set-num-btn.tappable { cursor: pointer; color: var(--text-muted); border-bottom: 1px dashed var(--border-strong); } .ft-set-num-btn.tappable:hover { color: var(--text); border-bottom-color: var(--accent); } .ft-set-val { font-size: 14px; } .ft-set-input { background: var(--bg-hover); border: 1px solid transparent; color: var(--text); font-family: var(--mono); font-size: 14px; width: 56px; padding: 4px 6px; border-radius: 6px; text-align: center; } .ft-set-input.ft-r { width: 44px; } .ft-set-input:focus { outline: none; border-color: var(--accent); background: var(--bg); } .ft-set-x { color: var(--text-dim); font-size: 12px; } .ft-remove-set-btn { width: 22px; height: 22px; font-size: 16px; } .ft-add-set-btn { width: 30px; height: 30px; font-size: 16px; } /* Add-exercise input + popover */ .ft-add-wrap { margin-top: 16px; position: relative; } .ft-add-input { width: 100%; background: var(--bg-card); border: 1px dashed var(--border-strong); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; } .ft-add-input:focus { outline: none; border-color: var(--accent); border-style: solid; } .ft-autocomplete { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); max-height: 280px; overflow-y: auto; z-index: 20; display: flex; flex-direction: column; } .ft-autocomplete:empty { display: none; } .ft-autocomplete-item { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); text-align: left; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; font: inherit; } .ft-autocomplete-item:last-child { border-bottom: none; } .ft-autocomplete-item:hover { background: var(--bg-hover); } .ft-autocomplete-name { flex: 1; font-size: 14px; } .ft-autocomplete-target { font-family: var(--mono); font-size: 12px; color: var(--text-muted); } .ft-autocomplete-new .ft-autocomplete-icon { color: var(--accent); font-weight: 600; font-size: 14px; } .ft-footer { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ft-finish-btn { flex: 1; max-width: 320px; padding: 14px 24px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .ft-cancel-btn { padding: 10px 14px; font-size: 12px; color: var(--text-muted); } .ft-cancel-btn:hover { color: var(--accent-hot); border-color: var(--accent-hot); } /* Fuel schedule stub */ .ft-stub { padding: 40px 24px; max-width: 560px; margin: 0 auto; text-align: center; color: var(--text-muted); } .ft-stub h3 { color: var(--text); margin: 0 0 12px; font-size: 18px; } .ft-stub p { margin: 0 0 12px; line-height: 1.5; } /* Mobile tweaks: the date block + button stack vertically, sets stay horizontal but scrollable if they overflow. */ @media (max-width: 720px) { .ft-inner { padding: 12px 16px 80px; } .ft-header { grid-template-columns: 1fr; gap: 8px; } .ft-session-picker { max-width: 100%; } .ft-new-btn { width: 100%; } .ft-ex-name-input { font-size: 16px; } /* >=16px dodges iOS auto-zoom */ .ft-ex-target-input { font-size: 14px; width: 64px; } .ft-set-input { font-size: 16px; } .ft-add-input { font-size: 16px; } .ft-footer { flex-direction: row; } .ft-cancel-btn { font-size: 11px; padding: 8px 10px; } } /* ---- Sessions timeline drawer ---- */ .ft-timeline-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; justify-content: flex-end; z-index: 60; animation: ft-timeline-fade 120ms ease-out; } @keyframes ft-timeline-fade { from { opacity: 0; } to { opacity: 1; } } .ft-timeline-panel { width: 360px; max-width: 92vw; height: 100%; background: var(--bg-elev); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: var(--shadow); animation: ft-timeline-slide 180ms cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes ft-timeline-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .ft-timeline-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .ft-timeline-title { font-weight: 600; font-size: 15px; letter-spacing: -0.005em; } .ft-timeline-close { background: transparent; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .ft-timeline-close:hover { color: var(--text); background: var(--bg-hover); } .ft-timeline-list { flex: 1; overflow-y: auto; padding: 8px 0 24px; -webkit-overflow-scrolling: touch; } .ft-timeline-month { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 18px 6px; } .ft-timeline-entry { background: transparent; border: none; width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 10px 18px; cursor: pointer; font: inherit; color: var(--text); position: relative; } .ft-timeline-entry:hover { background: var(--bg-hover); } .ft-timeline-entry.active { background: var(--bg-hover); } .ft-timeline-entry.active::before { /* Left accent bar for the currently-loaded session — like the APAI timeline. */ content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; } .ft-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border-strong); margin-top: 6px; flex-shrink: 0; } .ft-timeline-entry.active .ft-timeline-dot { border-color: var(--accent); background: var(--accent); } .ft-timeline-entry.in-progress .ft-timeline-dot { border-color: var(--accent-warm); } .ft-timeline-entry-body { min-width: 0; } .ft-timeline-date-row { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); margin-bottom: 2px; } .ft-timeline-day { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .ft-timeline-dow { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .ft-timeline-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 4px; margin-left: auto; } .ft-timeline-tag.in-progress { color: var(--accent-warm); background: rgba(255, 179, 71, 0.15); } .ft-timeline-summary { font-size: 12px; color: var(--text-muted); } /* Body scroll lock while open — fixed-position drawer otherwise allows the underlying page to scroll behind it on mobile. */ body.ft-timeline-open { overflow: hidden; } @media (max-width: 720px) { .ft-timeline-panel { width: 100%; max-width: 100%; } }