/* Momentum — minimal design system (blue accent, dark by default, light theme via [data-theme="light"] on ; see the toggle in the top bar) Contents: 1. tokens (:root, light theme) & global element styles 2. top bar, nav, drawer, layout 3. shared components: progress ring, buttons, cards, inputs, empty states, dialogs (+ confirm), toasts, loading states 4. features: dashboard, habits (+ heatmap), study (+ charts), journal, notes, calendar, tasks, files/drive 5. motion (list rise, completion pops, chart growth, hover lift), theme toggle, reduced-motion override, responsive breakpoints */ :root { color-scheme: dark; --bg: #0b0b0d; --surface: #141416; --surface-2: #1c1c21; --border: #27272d; --border-soft: #1e1e23; --text: #ededf0; --muted: #8a8a95; --faint: #5c5c66; --accent: #3b82f6; --accent-hi: #60a5fa; --accent-ink: #041022; /* text on blue */ --accent-soft: rgba(59, 130, 246, 0.16); --danger: #ef4444; --warn: #f59e0b; --shadow-color: rgba(0, 0, 0, 0.5); --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --gutter: 22px; --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right); } [data-theme="light"] { color-scheme: light; --bg: #f6f6f8; --surface: #ffffff; --surface-2: #ececf0; --border: #d8d8e0; --border-soft: #e6e6ec; --text: #17171c; --muted: #63636e; --faint: #9c9ca6; --accent: #2563eb; /* deeper blue for contrast on light */ --accent-hi: #1d4ed8; /* hover darkens instead of lightening */ --accent-ink: #ffffff; --accent-soft: rgba(37, 99, 235, 0.10); --danger: #dc2626; --warn: #b45309; --shadow-color: rgba(23, 23, 40, 0.16); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); } html { scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } a { color: inherit; text-decoration: none; } .muted { color: var(--muted); } .small { font-size: 0.82rem; } .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- top bar */ .topbar { display: flex; align-items: center; gap: 18px; padding: 12px max(var(--gutter), var(--sal)) 12px max(var(--gutter), var(--sar)); padding-top: calc(12px + var(--sat)); border-bottom: 1px solid var(--border-soft); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); position: sticky; top: 0; z-index: 30; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 1.06rem; letter-spacing: -0.02em; } .brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--accent-ink); background: var(--accent); } .brand-mark svg { width: 18px; height: 18px; } .nav-desktop { display: flex; gap: 2px; margin-left: auto; } .nav-desktop a { position: relative; padding: 8px 13px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 0.9rem; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .nav-desktop a:hover { color: var(--text); } .nav-desktop a.active { color: var(--text); } .nav-desktop a.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--accent); animation: nav-underline 0.28s var(--ease); } @keyframes nav-underline { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } .nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: var(--radius-sm); align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; } .nav-toggle:active { transform: scale(0.94); } /* ---------------------------------------------------------------- drawer */ .drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.24s var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .drawer-backdrop.show { opacity: 1; } .drawer { position: fixed; top: 0; right: 0; z-index: 50; height: 100dvh; width: min(78vw, 300px); padding: calc(16px + var(--sat)) max(18px, var(--sar)) calc(18px + var(--sab)) 18px; background: var(--surface); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.26s var(--ease); display: flex; flex-direction: column; gap: 8px; } .drawer.open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .drawer-title { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); } .drawer-nav { display: flex; flex-direction: column; gap: 2px; } .drawer-nav a { display: flex; align-items: center; gap: 13px; padding: 13px 12px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; font-size: 1rem; } .drawer-nav a:hover { background: var(--surface-2); color: var(--text); } .drawer-nav a.active { color: var(--text); background: var(--accent-soft); } .drawer-nav a.active .icon { color: var(--accent); } /* ---------------------------------------------------------------- layout */ main { max-width: 760px; margin: 0 auto; padding: 30px max(var(--gutter), var(--sal)) calc(90px + var(--sab)) max(var(--gutter), var(--sar)); animation: page-in 0.34s var(--ease); } @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .page-head h1 { margin: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.03em; } .page-head .muted { margin: 3px 0 0; } h1, h2, h3 { letter-spacing: -0.02em; } .subhead { margin: 34px 0 12px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); } .subhead.flush { margin-top: 0; } .section-hint { color: var(--muted); margin: 0 0 14px; font-size: 0.9rem; } /* ---------------------------------------------------------------- progress ring */ @property --pct { syntax: ""; inherits: false; initial-value: 0; } .progress-ring { --pct: 0; width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-2) 0); box-shadow: 0 0 30px -6px color-mix(in srgb, var(--accent) 35%, transparent); transition: --pct 0.7s var(--ease), background 0.6s var(--ease); } .progress-ring span { width: 48px; height: 48px; background: var(--bg); border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- buttons */ .btn { font: inherit; font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.06s var(--ease); } .btn:hover { border-color: var(--faint); } .btn:active { transform: scale(0.97); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); } .btn.ghost { background: transparent; } .btn.ghost:hover { background: var(--surface); } .btn.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--border)); } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); } .icon-btn { padding: 7px; } .icon-btn .icon { width: 16px; height: 16px; } /* ---------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="light"] .card { box-shadow: 0 1px 2px rgba(23, 23, 40, 0.05); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .card-head h3 { margin: 0; font-size: 1rem; } .card-link { color: var(--muted); font-size: 0.82rem; display: inline-flex; align-items: center; gap: 4px; } .card-link:hover { color: var(--accent); } /* ---------------------------------------------------------------- inputs */ input[type="text"], input[type="number"], input[type="date"], input[type="time"], textarea, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } textarea { width: 100%; resize: vertical; line-height: 1.55; } select { -webkit-appearance: none; appearance: none; padding-right: 12px; } code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 0.85em; } .error-banner { background: color-mix(in srgb, var(--danger) 15%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--border)); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; } /* ---------------------------------------------------------------- empty state */ .empty { text-align: center; padding: 60px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .empty.small { padding: 38px 20px; } .empty-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; color: var(--faint); margin-bottom: 6px; } .empty-icon .icon { width: 30px; height: 30px; } .empty h2 { margin: 6px 0; font-size: 1.15rem; } /* ---------------------------------------------------------------- dashboard */ .dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; } .study-widget { display: flex; align-items: center; gap: 16px; } .big-stat { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .small-btn { padding: 6px 12px; font-size: 0.82rem; margin-top: 8px; } /* ---------------------------------------------------------------- habits */ .habit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .muted-list { opacity: 0.68; } .habit-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s var(--ease), transform 0.06s var(--ease); } .habit-row.done { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); } .habit-row.done .habit-name { color: var(--muted); text-decoration: line-through; } .check { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--c, var(--accent)); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background 0.15s var(--ease); } .check svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.12s; } .check[data-off] { opacity: 0.5; } .habit-row.done .check { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); } .habit-row.done .check svg { opacity: 1; } .check:hover { background: color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); } .habit-main { flex: 1; min-width: 0; } .habit-name { font-weight: 600; font-size: 1.01rem; } .habit-desc { margin: 2px 0 0; font-size: 0.86rem; color: var(--muted); } .habit-meta { margin: 2px 0 0; font-size: 0.78rem; } .streak { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; } .streak .icon { width: 16px; height: 16px; color: var(--accent); } .streak-num { min-width: 12px; text-align: right; } /* ---------------------------------------------------------------- manage habits */ .manage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .manage-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .manage-main { flex: 1; min-width: 0; } .manage-main .muted { margin: 1px 0 0; font-size: 0.84rem; } .archived-row { opacity: 0.6; } .row-actions { display: flex; gap: 8px; } .row-actions form { margin: 0; } .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .dot.big { width: 16px; height: 16px; } .detail-title { display: flex; align-items: center; gap: 12px; } /* ---------------------------------------------------------------- dialogs */ .dialog { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); padding: 24px; width: min(460px, calc(100vw - 28px)); box-shadow: 0 20px 60px var(--shadow-color); } .dialog[open] { animation: dialog-in 0.2s var(--ease); } @keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } .dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); } .dialog h2 { margin: 0 0 16px; } .field { display: block; margin-bottom: 16px; } .field > span { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; } .field input[type="text"] { width: 100%; } .field select { width: 100%; } .color-picker { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { cursor: pointer; } .swatch input { position: absolute; opacity: 0; } .swatch span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid transparent; transition: transform 0.1s; } .swatch input:checked + span { border-color: var(--text); transform: scale(1.12); } .presets { display: flex; gap: 6px; margin-bottom: 10px; } .chip { font: inherit; font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; } .chip:hover { color: var(--text); border-color: var(--faint); } .weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; } .day input { position: absolute; opacity: 0; } .day span { display: grid; place-items: center; min-width: 44px; padding: 8px 4px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); font-size: 0.8rem; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .day input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 22px 0 0; padding: 0; } .time-row { display: flex; gap: 10px; } .time-row .field { flex: 1; } .dialog[open]::backdrop { animation: backdrop-in 0.24s var(--ease); } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } .dialog.confirm { width: min(380px, calc(100vw - 28px)); } .dialog.confirm h2 { font-size: 1.1rem; margin-bottom: 8px; } .confirm-msg { margin: 0; line-height: 1.5; } /* ---------------------------------------------------------------- toasts */ .toasts { position: fixed; bottom: calc(18px + var(--sab)); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(420px, calc(100vw - 24px)); } .toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 999px; max-width: 100%; background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 12px 34px var(--shadow-color); font-size: 0.9rem; font-weight: 500; animation: toast-in 0.3s var(--ease); } .toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); } .toast.success { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .toast.error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .toast-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast-action { font: inherit; font-weight: 700; font-size: 0.84rem; color: var(--accent-hi); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 6px; flex-shrink: 0; } .toast-action:hover { color: var(--accent); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- loading states */ .btn.loading { pointer-events: none; opacity: 0.7; } .btn.loading::after { content: ""; width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(1turn); } } .check.busy { opacity: 0.55; } .unsaved-hint { display: inline-flex; align-items: center; gap: 6px; } .unsaved-hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* ---------------------------------------------------------------- habit detail + heatmap */ .back { color: var(--muted); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; } .back:hover { color: var(--text); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 12px; text-align: center; } .stat-num { display: inline-flex; align-items: center; gap: 5px; justify-content: center; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-num .icon { width: 18px; height: 18px; color: var(--accent); } .stat-label { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 4px; } .heatmap-wrap { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; } .heatmap-days { display: flex; flex-direction: column; gap: 3px; } .heatmap-days span { height: 15px; font-size: 0.62rem; color: var(--muted); display: grid; place-items: center; } .heatmap { display: flex; gap: 3px; } .hm-week { display: flex; flex-direction: column; gap: 3px; } .hm-cell { width: 15px; height: 15px; border-radius: 4px; background: var(--surface-2); border: 1px solid transparent; padding: 0; cursor: pointer; transition: transform 0.08s; } .hm-cell:hover:not(:disabled) { transform: scale(1.25); outline: 1px solid var(--faint); } .hm-cell.done { background: var(--c, var(--accent)); } .hm-cell.sched { border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--border)); background: transparent; } .hm-cell.future { opacity: 0.25; cursor: default; } /* ---------------------------------------------------------------- study */ .goal-form { display: flex; gap: 6px; align-items: center; } .goal-form input { width: 66px; } .study-form { display: flex; flex-wrap: wrap; gap: 8px; } .study-form input[type="text"] { flex: 1 1 140px; } .study-form input[name="minutes"] { width: 100px; flex: 0 0 auto; } .bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bar-row { display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: 10px; } .bar-label { font-size: 0.9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { background: var(--surface-2); border-radius: 999px; height: 12px; overflow: hidden; } .bar-fill { height: 100%; background: var(--accent); border-radius: 999px; } .bar-val { text-align: right; font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; } .session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .session-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; } .session-main { flex: 1; min-width: 0; } .session-subject { font-weight: 600; } .session-main p { margin: 1px 0 0; } .session-mins { font-weight: 700; font-variant-numeric: tabular-nums; } /* study charts */ .chart-card { margin-bottom: 12px; } .year-nav { display: flex; align-items: center; gap: 6px; } .year-nav h3 { margin: 0; font-size: 1.15rem; min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; } .year-nav .disabled { opacity: 0.3; pointer-events: none; } .year-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.84rem; color: var(--muted); } .year-stats strong { color: var(--text); font-variant-numeric: tabular-nums; } .chart-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 18px 0 8px; color: var(--muted); } .chart-scroll { overflow-x: auto; padding-bottom: 4px; } .chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; position: relative; border-bottom: 1px solid var(--border); } .chart.daily { height: 120px; margin-bottom: 20px; } .bar-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; min-width: 10px; } .bar { width: 78%; min-height: 2px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); transition: background 0.12s, height 0.5s var(--ease); } .bar-col:hover .bar { background: var(--accent); } .bar.cur { background: var(--accent); } .bar.future { background: var(--surface-2); } .chart.daily .bar { width: 60%; border-radius: 5px 5px 0 0; } .bar-x { position: absolute; bottom: -18px; font-size: 0.68rem; color: var(--muted); } .goal-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--accent) 65%, transparent); z-index: 1; pointer-events: none; } .goal-line.subtle { border-top-color: var(--border); } .goal-line span { position: absolute; right: 0; top: 2px; font-size: 0.66rem; color: var(--muted); background: var(--surface); padding: 0 4px; border-radius: 4px; } .chart-x { display: flex; gap: 3px; margin-top: 6px; } .chart-x span { flex: 1 1 0; text-align: center; font-size: 0.66rem; color: var(--muted); min-width: 10px; } /* ---------------------------------------------------------------- journal */ .journal-editor { display: flex; flex-direction: column; gap: 14px; } .mood-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .mood-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); } .mood-dots { display: inline-flex; align-items: center; gap: 10px; } .mood-end { font-size: 0.74rem; color: var(--faint); } .mood-dot { cursor: pointer; line-height: 0; } .mood-dot input { position: absolute; opacity: 0; width: 0; height: 0; } .mood-dot .dot-fill { display: block; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--faint); background: transparent; transition: all 0.14s var(--ease); } .mood-dot:hover .dot-fill { border-color: var(--accent); } .mood-dot.sel .dot-fill { background: var(--accent); border-color: var(--accent); transform: scale(1.18); box-shadow: 0 0 0 4px var(--accent-soft); } .mood-clear { background: none; border: none; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; } .mood-clear:hover { color: var(--text); } .editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .journal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .journal-row a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .journal-row a:hover { border-color: var(--faint); } .journal-row.current a { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .mood-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; color: var(--accent-ink); background: var(--accent); font-variant-numeric: tabular-nums; } .mood-num.none { background: var(--surface-2); color: var(--faint); } .j-day { font-weight: 600; font-variant-numeric: tabular-nums; } .j-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; } /* ---------------------------------------------------------------- notes */ .note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .note-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-height: 120px; transition: border-color 0.15s var(--ease), transform 0.08s var(--ease); } .note-card:hover { border-color: var(--faint); } .note-card.pinned { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); } .note-card h3 { margin: 0 0 6px; font-size: 1rem; padding-right: 26px; } .note-body { font-size: 0.86rem; margin: 0 0 8px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .note-date { margin: 0; } .pin-form { position: absolute; top: 10px; right: 10px; margin: 0; } .pin-btn { background: none; border: none; cursor: pointer; color: var(--faint); padding: 2px; line-height: 0; } .pin-btn:hover { color: var(--accent); } .pin-btn.on { color: var(--accent); } .note-editor { display: flex; flex-direction: column; gap: 12px; } .note-title-input { width: 100%; font-size: 1.3rem; font-weight: 700; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; letter-spacing: -0.02em; } .note-title-input:focus { outline: none; border-color: var(--border); background: var(--bg); } .note-footer-actions { display: flex; gap: 10px; margin-top: 16px; } .note-footer-actions form { margin: 0; } .left-actions, .right-actions { display: flex; gap: 10px; align-items: center; } /* ---------------------------------------------------------------- calendar */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .cal-nav { display: flex; align-items: center; gap: 8px; } .cal-range { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.02em; min-width: 168px; text-align: center; font-variant-numeric: tabular-nums; } .cal-week { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .cal-day { display: grid; grid-template-columns: 68px 1fr; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); } .cal-day:last-child { border-bottom: none; } .cal-day.is-today { background: var(--accent-soft); } .cal-date { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 2px; gap: 1px; } .cal-wd { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .cal-num { font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; } .cal-day.is-today .cal-wd { color: var(--accent); } .cal-day.is-today .cal-num { color: var(--accent); } .cal-events { display: flex; flex-direction: column; gap: 6px; min-width: 0; justify-content: center; } .cal-none { font-size: 0.86rem; } .cal-event { display: flex; align-items: flex-start; gap: 10px; position: relative; background: var(--surface-2); border-radius: 9px; padding: 8px 10px; } .cal-event .ev-time { flex: 0 0 auto; padding-top: 1px; } .cal-event .ev-body { flex: 1; min-width: 0; } .cal-event .icon-btn { flex: 0 0 auto; padding: 3px; color: var(--muted); opacity: 0; } .cal-event:hover .icon-btn { opacity: 0.8; } .cal-event .icon-btn:hover { color: var(--text); } .cal-event form { margin: 0; } .ev-time { font-size: 0.74rem; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ev-title { font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; } .ev-body { display: flex; flex-direction: column; gap: 1px; } .ev-body .muted { display: inline-flex; align-items: center; gap: 3px; } /* dashboard mini agenda (Today card) */ .agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .agenda.mini { gap: 4px; } .agenda.mini li { display: flex; gap: 8px; font-size: 0.85rem; align-items: baseline; } /* ---------------------------------------------------------------- tasks */ .task-add { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .task-add-title { flex: 1 1 220px; } .tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .tab { padding: 8px 14px; color: var(--muted); font-size: 0.9rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; } .tab:hover { color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--accent); } .tab-count { font-size: 0.72rem; background: var(--surface-2); color: var(--muted); padding: 1px 7px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; } .tab.active .tab-count { background: var(--accent); color: var(--accent-ink); } .task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .task-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-left: 3px solid var(--border); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.15s var(--ease); } .task-row.prio-3 { border-left-color: var(--danger); } .task-row.prio-2 { border-left-color: var(--accent); } .task-row.prio-1 { border-left-color: var(--border); } .task-row.done { opacity: 0.5; } .task-row.done .task-title { text-decoration: line-through; color: var(--muted); } .task-row.leaving { opacity: 0; transform: translateX(12px); max-height: 0 !important; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; /* cancels the list's flex gap */ border-top-width: 0; border-bottom-width: 0; overflow: hidden; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), max-height 0.26s var(--ease) 0.08s, padding 0.26s var(--ease) 0.08s, margin 0.26s var(--ease) 0.08s, border-width 0.26s var(--ease) 0.08s; } .task-check { width: 26px; height: 26px; border-color: var(--faint); } .task-check svg { stroke: var(--accent-ink); } .task-row.done .task-check { background: var(--accent); border-color: var(--accent); } .task-row.done .task-check svg { opacity: 1; } .task-main { flex: 1; min-width: 0; } .task-title { font-weight: 500; } .task-notes { margin: 2px 0 0; font-size: 0.84rem; } .task-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .due-badge { font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .due-badge.today { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 72%, var(--text)); } .due-badge.soon { color: var(--text); } .due-badge.overdue { background: color-mix(in srgb, var(--danger) 18%, transparent); color: color-mix(in srgb, var(--danger) 65%, var(--text)); } .prio-flag { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border); } .prio-3 .prio-flag { background: var(--danger); } .prio-2 .prio-flag { background: var(--accent); } .task-actions { display: flex; gap: 2px; } .task-actions form { margin: 0; } .task-actions .icon-btn { color: var(--muted); opacity: 0.6; } .task-row:hover .task-actions .icon-btn { opacity: 1; } .task-actions .icon-btn:hover { color: var(--text); } .today-tasks { margin-bottom: 26px; } /* horizon-subdivided task lists */ .horizon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } .horizon-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; min-width: 0; } .horizon-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .horizon-head h3 { margin: 0; font-size: 1.02rem; } .task-add.compact { display: block; margin-bottom: 14px; } .task-add.compact .task-add-title { width: 100%; margin-bottom: 6px; } .task-add-row { display: flex; gap: 6px; flex-wrap: wrap; } .task-add-row input[type="date"] { flex: 1 1 120px; min-width: 108px; } .task-add-row select { flex: 1 1 76px; } .task-add-row .btn { flex: 0 0 auto; } .horizon-col .task-list { gap: 6px; } .horizon-empty { padding: 8px 2px; } .horizon-col .task-row { background: var(--bg); flex-wrap: wrap; align-items: flex-start; padding: 10px 12px; } .horizon-col .task-check { margin-top: 1px; } .horizon-col .task-main { flex: 1 1 auto; } .horizon-col .task-meta { flex: 1 1 100%; justify-content: flex-end; padding-left: 38px; } .horizon-tag { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .done-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 16px 0 8px; color: var(--muted); } .done-list .task-row { opacity: 0.6; } /* ---------------------------------------------------------------- motion */ @media (prefers-reduced-motion: no-preference) { .habit-list .habit-row, .task-list .task-row, .note-grid .note-card, .session-list .session-row { animation: rise 0.34s var(--ease) both; } .habit-list .habit-row:nth-child(2), .task-list .task-row:nth-child(2) { animation-delay: 0.03s; } .habit-list .habit-row:nth-child(3), .task-list .task-row:nth-child(3) { animation-delay: 0.06s; } .habit-list .habit-row:nth-child(4), .task-list .task-row:nth-child(4) { animation-delay: 0.09s; } .habit-list .habit-row:nth-child(n+5), .task-list .task-row:nth-child(n+5) { animation-delay: 0.12s; } /* chart bars grow from the baseline, staggered by --i (set per bar in study.html) */ .chart .bar { transform-origin: bottom; animation: bar-grow 0.5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 14ms); } .bar-track .bar-fill { transform-origin: left; animation: fill-grow 0.6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); } } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes bar-grow { from { transform: scaleY(0); } } @keyframes fill-grow { from { transform: scaleX(0); } } /* completion feedback: pop the checkbox / heatmap cell that was just marked done */ @keyframes check-pop { 45% { transform: scale(1.25); } } .check.just-done, .hm-cell.just-done { animation: check-pop 0.3s var(--ease); } .hm-cell.just-done { position: relative; z-index: 1; } /* streak flame pulses when the streak grows */ @keyframes streak-bump { 40% { transform: scale(1.45); } } .streak.bump .icon { animation: streak-bump 0.5s var(--ease); } /* hover lift for card-like links */ @media (hover: hover) { .note-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--shadow-color); } .dash-cards .card { transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); } .dash-cards .card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--shadow-color); } } /* ---------------------------------------------------------------- theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease), transform 0.06s var(--ease); } .theme-toggle:hover { color: var(--text); background: var(--surface-2); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline-flex; } .theme-toggle span { display: inline-flex; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---------------------------------------------------------------- responsive */ @media (max-width: 760px) { .nav-desktop { display: none; } .nav-toggle { display: inline-flex; margin-left: 0; } .theme-toggle { margin-left: auto; } .topbar { gap: 12px; } } @media (max-width: 900px) { .horizon-grid { grid-template-columns: 1fr; } } /* Files (Microsoft 365 / Teams) */ .tabs { display: flex; gap: 4px; } .tab { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 550; color: var(--muted); } .tab:hover { color: var(--text); background: var(--surface); } .tab.active { color: var(--accent-ink); background: var(--accent); } .search-form { display: flex; align-items: center; gap: 6px; } .search-form input[type="search"] { width: 190px; max-width: 44vw; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; } .search-form input[type="search"]:focus { outline: none; border-color: var(--faint); } .crumbs { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.9rem; } .crumbs a { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); } .crumbs a:hover { color: var(--text); } .crumb-here { color: var(--text); font-weight: 600; } .file-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .file-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); } .file-row:last-child { border-bottom: none; } .file-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); } .file-ic { display: inline-grid; place-items: center; color: var(--muted); flex: 0 0 auto; } .file-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .file-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.file-name:hover { color: var(--accent); } .file-actions { display: flex; gap: 4px; flex: 0 0 auto; } .file-actions .icon-btn { color: var(--muted); } .file-actions .icon-btn:hover { color: var(--text); } .empty-line { padding: 22px 14px; margin: 0; text-align: center; } /* Device-code connect page */ .device-connect { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 22px; max-width: 560px; } .device-steps { margin: 14px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; line-height: 1.5; } .device-code { margin-top: 8px; display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-hi); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--radius-sm); padding: 8px 16px; user-select: all; } .waiting-line { display: inline-flex; align-items: center; gap: 5px; margin: 16px 0 18px; } @media (max-width: 640px) { :root { --gutter: 16px; } .page-head h1 { font-size: 1.5rem; } .dash-cards { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .bar-row { grid-template-columns: 92px 1fr 52px; } .cal-range { min-width: 0; font-size: 0.98rem; } .cal-day { grid-template-columns: 56px 1fr; gap: 10px; padding: 11px 12px; } .row-actions { flex-wrap: wrap; } .dialog { width: calc(100vw - 20px); border-radius: 16px 16px 20px 20px; } } /* Account / profile page */ .profile-card { max-width: 560px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 22px 22px 24px; } .profile-id { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--accent); flex: none; } .profile-email { font-weight: 650; font-size: 1.05rem; word-break: break-all; } .profile-meta { display: grid; gap: 2px; margin: 18px 0 4px; } .profile-meta > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); } .profile-meta dt { color: var(--muted); margin: 0; } .profile-meta dd { margin: 0; text-align: right; word-break: break-all; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .profile-sub { font-size: 0.95rem; margin: 22px 0 10px; } .profile-conn { display: grid; gap: 10px; } .conn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); } .conn-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; } .badge.on { font-size: 0.8rem; font-weight: 600; color: #10b981; background: color-mix(in srgb, #10b981 14%, transparent); padding: 4px 10px; border-radius: 999px; } .btn-sm { padding: 5px 12px; font-size: 0.85rem; } .profile-logout { margin-top: 24px; } .profile-logout .btn { display: inline-flex; align-items: center; gap: 7px; }