/* ═══════════════════════════════════════════════════════════════════════════ Daily Tracker — styles.css Mobile-first · Green accent · Adapts to system dark / light mode ═══════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ────────────────────────────────────────────────────── */ :root { /* Surfaces */ --clr-bg: #f8f9f8; --clr-surface: #ffffff; --clr-surface-2: #f0f5f0; --clr-border: #dde5dd; /* Text */ --clr-text: #1a211a; --clr-text-2: #5a6e5a; /* Accent — teal (from app icon) */ --clr-accent: #1ABEA5; --clr-accent-h: #17a691; /* hover / pressed */ --clr-accent-dim: #e0f7f4; --gradient-brand: linear-gradient(135deg, #1ABEA5 0%, #F4A800 100%); /* Feedback */ --clr-error: #c62828; --clr-error-bg: #fdecea; /* PIN key */ --clr-key-bg: #e5f5f3; --clr-key-bg-h: #c8ece8; --clr-key-text: #1a211a; /* Misc */ --radius-card: 20px; --radius-key: 50%; /* circular keys */ --shadow-card: 0 2px 16px rgba(0, 0, 0, .08); --transition: 0.15s ease; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --clr-bg: #0f1210; --clr-surface: #1a1f1a; --clr-surface-2: #222822; --clr-border: #2a342a; --clr-text: #e2ebe2; --clr-text-2: #7a967a; --clr-accent: #22D4B8; --clr-accent-h: #1fbfa9; --clr-accent-dim: #0d2e2a; --gradient-brand: linear-gradient(135deg, #1ABEA5 0%, #F4A800 100%); --clr-error: #ef5350; --clr-error-bg: #2c1515; --clr-key-bg: #0f2826; --clr-key-bg-h: #163d39; --clr-key-text: #e2ebe2; --shadow-card: 0 2px 20px rgba(0, 0, 0, .35); } } /* Explicit dark override (data-theme="dark" on ) */ :root[data-theme="dark"] { --clr-bg: #0f1210; --clr-surface: #1a1f1a; --clr-surface-2: #222822; --clr-border: #2a342a; --clr-text: #e2ebe2; --clr-text-2: #7a967a; --clr-accent: #22D4B8; --clr-accent-h: #1fbfa9; --clr-accent-dim: #0d2e2a; --gradient-brand: linear-gradient(135deg, #1ABEA5 0%, #F4A800 100%); --clr-error: #ef5350; --clr-error-bg: #2c1515; --clr-key-bg: #0f2826; --clr-key-bg-h: #163d39; --clr-key-text: #e2ebe2; --shadow-card: 0 2px 20px rgba(0, 0, 0, .35); } /* ── Reset / base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: "Outfit", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.5; background: var(--clr-bg); color: var(--clr-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent bounce-scroll from showing the bg color behind screens */ overscroll-behavior: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* no 300 ms delay on mobile */ } /* ── Screen layer ─────────────────────────────────────────────────────── */ .screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; /* Hidden by default — fade in/out */ opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .screen--active { opacity: 1; pointer-events: auto; } /* ── Center card (auth + loading) ─────────────────────────────────────── */ .center-card { width: 100%; max-width: 360px; background: linear-gradient( to bottom, var(--clr-accent-dim) 0%, var(--clr-surface) 180px ); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 40px 32px 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .center-card--narrow { max-width: 260px; padding: 40px 24px; } /* ── App logo / icon ──────────────────────────────────────────────────── */ .app-logo { color: var(--clr-accent); margin-bottom: 4px; } .app-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.3px; color: var(--clr-text); } .app-subtitle { font-size: 0.9rem; color: var(--clr-text-2); max-width: 260px; } /* ── Google sign-in button ────────────────────────────────────────────── */ .btn-google { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1.5px solid var(--clr-border); border-radius: 10px; background: var(--clr-surface); color: var(--clr-text); font-size: 0.95rem; font-weight: 500; width: 100%; justify-content: center; transition: background var(--transition), box-shadow var(--transition); margin-top: 6px; min-height: 44px; } .btn-google:hover, .btn-google:focus-visible { background: var(--clr-surface-2); box-shadow: 0 1px 6px rgba(0, 0, 0, .12); outline: none; } .btn-google:active { transform: scale(0.98); } .btn-google:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .google-g { flex-shrink: 0; } /* ── Auth note ────────────────────────────────────────────────────────── */ .auth-note { font-size: 0.85rem; color: var(--clr-text-2); line-height: 1.4; } /* ── Error message ────────────────────────────────────────────────────── */ .error-msg { font-size: 0.85rem; color: var(--clr-error); background: var(--clr-error-bg); border-radius: 8px; padding: 8px 12px; width: 100%; } .error-msg--center { text-align: center; min-height: 32px; /* reserve space so layout doesn't jump */ background: transparent; padding: 4px 0; } /* ── Loading spinner ──────────────────────────────────────────────────── */ .spinner { width: 40px; height: 40px; background: conic-gradient(from 0deg, #1ABEA5 0%, #F4A800 70%, transparent 70%); -webkit-mask: radial-gradient(farthest-side, transparent 84%, white 85%); mask: radial-gradient(farthest-side, transparent 84%, white 85%); border-radius: 50%; animation: spin 0.85s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-msg { font-size: 0.9rem; color: var(--clr-text-2); margin-top: 4px; } /* ── PIN card ─────────────────────────────────────────────────────────── */ .pin-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 0 0; } .pin-logo { color: var(--clr-accent); margin-bottom: 12px; } .pin-title { font-size: 1.3rem; font-weight: 700; color: var(--clr-text); margin-bottom: 4px; } .pin-subtitle { font-size: 0.88rem; color: var(--clr-text-2); margin-bottom: 28px; text-align: center; } /* ── PIN dots ─────────────────────────────────────────────────────────── */ .pin-dots { display: flex; gap: 18px; margin-bottom: 8px; } .pin-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--clr-accent); background: transparent; transition: background 0.12s ease, transform 0.1s ease; } .pin-dot--filled { background: var(--gradient-brand); transform: scale(1.15); } /* Bounce pop on habit check */ @keyframes habit-pop { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 60% { transform: scale(0.9); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Shake animation for wrong PIN */ @keyframes pin-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } } .pin-dots--shake { animation: pin-shake 0.5s ease; } /* ── PIN keypad ───────────────────────────────────────────────────────── */ .pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 280px; margin-top: 24px; } .pin-key { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; /* circular */ border-radius: var(--radius-key); background: var(--clr-key-bg); color: var(--clr-key-text); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; min-height: 44px; transition: background var(--transition), transform 0.1s ease, box-shadow var(--transition); user-select: none; -webkit-user-select: none; } .pin-key:hover { background: var(--clr-key-bg-h); } .pin-key:active { transform: scale(0.88); background: var(--clr-key-bg-h); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18); } .pin-key--phantom { background: transparent; pointer-events: none; } .pin-key--del { color: var(--clr-text-2); font-size: 1rem; } .pin-key--del:active { color: var(--clr-text); } /* ── Ghost / text button ──────────────────────────────────────────────── */ .btn-ghost { font-size: 0.85rem; color: var(--clr-text-2); padding: 10px 16px; border-radius: 8px; margin-top: 20px; transition: color var(--transition), background var(--transition); } .btn-ghost:hover, .btn-ghost:focus-visible { color: var(--clr-text); background: var(--clr-surface-2); outline: none; } /* ── Main app header ──────────────────────────────────────────────────── */ #screen-app { justify-content: flex-start; padding: 0; overflow-y: auto; } .app-header { position: sticky; top: 0; z-index: 10; width: 100%; display: none; align-items: center; gap: 10px; padding: 14px 16px 12px; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); /* Safe area top (iOS notch) */ padding-top: max(14px, env(safe-area-inset-top)); } .app-header__logo { color: var(--clr-accent); flex-shrink: 0; display: flex; } .app-header__title { font-weight: 700; font-size: 1rem; color: var(--clr-text); flex: 1; } .app-header__date { font-size: 0.8rem; color: var(--clr-text-2); white-space: nowrap; } /* ── Main app content ─────────────────────────────────────────────────── */ .app-main { width: 100%; max-width: 600px; margin: 0 auto; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); } /* ── Placeholder section cards (Phase 1 stub) ─────────────────────────── */ .placeholder-sections { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; } .placeholder-card { display: flex; align-items: center; gap: 14px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 16px; } .placeholder-icon { font-size: 1.4rem; color: var(--clr-accent); flex-shrink: 0; width: 36px; text-align: center; line-height: 1; } .placeholder-text { display: flex; flex-direction: column; gap: 2px; } .placeholder-text strong { font-size: 0.95rem; font-weight: 600; color: var(--clr-text); } .placeholder-text span { font-size: 0.8rem; color: var(--clr-text-2); } /* ── Focus ring (keyboard accessibility) ──────────────────────────────── */ :focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; } /* ── Responsive: wider screens get a max-width centered layout ────────── */ @media (min-width: 480px) { .pin-keypad { gap: 14px; } } @media (min-width: 600px) { .app-main { padding: 20px 24px; } html { font-size: 16px; } } /* ═══════════════════════════════════════════════════════════════════════════ App main layout — flex column so sections stack with consistent gap ═══════════════════════════════════════════════════════════════════════════ */ .app-main { display: flex; flex-direction: column; gap: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ Shared tracker section shell (used by all phase sections) ═══════════════════════════════════════════════════════════════════════════ */ .tracker-section { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 16px; overflow: hidden; margin: 0 0 15px 0; } /* Section header — title left, meta right */ .section-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 11px; border-bottom: 1px solid var(--clr-border); } .section-title { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 700; color: var(--clr-text); letter-spacing: 0.1px; } .section-title svg { color: var(--clr-accent); flex-shrink: 0; } /* Inline progress (text + bar) */ .section-progress { display: flex; align-items: center; gap: 8px; } .section-progress__text { font-size: 0.85rem; font-weight: 600; color: var(--clr-text-2); white-space: nowrap; min-width: 34px; text-align: right; } .progress-bar { width: 52px; height: 5px; background: var(--clr-border); border-radius: 3px; overflow: hidden; } .progress-bar__fill { height: 100%; background: var(--gradient-brand); border-radius: 3px; width: 0%; transition: width 0.35s ease; } /* Empty state inside sections */ .section-empty { padding: 20px 16px; font-size: 0.88rem; color: var(--clr-text-2); text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ Date navigator (shared, used by Habits and future sections) ═══════════════════════════════════════════════════════════════════════════ */ .date-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--clr-border); } .date-nav__btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--clr-text-2); transition: background var(--transition), color var(--transition); flex-shrink: 0; min-width: 44px; min-height: 44px; } .date-nav__btn:hover:not(:disabled), .date-nav__btn:focus-visible:not(:disabled) { background: var(--clr-surface-2); color: var(--clr-text); outline: none; } .date-nav__btn:active:not(:disabled) { background: var(--clr-accent-dim); } .date-nav__btn:disabled { opacity: 0.25; cursor: default; } .date-nav__label { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); text-align: center; flex: 1; } /* ═══════════════════════════════════════════════════════════════════════════ Habit Tracker section ═══════════════════════════════════════════════════════════════════════════ */ .habit-list { /* no extra padding — rows handle their own */ } /* Individual habit row — full-width tap target */ .habit-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--clr-border); transition: background var(--transition); min-height: 52px; /* comfortable tap target */ } .habit-row:last-child { border-bottom: none; } .habit-row:hover, .habit-row:focus-visible { background: var(--clr-surface-2); outline: none; } .habit-row:active { background: var(--clr-accent-dim); } /* ── Check circle ── */ .habit-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--clr-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; /* checkmark hidden when unchecked */ background: transparent; transition: background 0.2s ease, border-color 0.2s ease, color 0.15s ease, transform 0.15s ease; } /* Pop animation on check */ .habit-row--checked .habit-check { background: var(--gradient-brand); border-color: transparent; color: #fff; animation: habit-pop 0.35s ease both; } /* ── Name ── */ .habit-name { flex: 1; font-size: 0.95rem; font-weight: 500; color: var(--clr-text); transition: color var(--transition); line-height: 1.3; } .habit-row--checked .habit-name { color: var(--clr-text-2); /* muted when done */ } /* ── Streak badge ── */ .habit-streak { font-size: 0.85rem; color: var(--clr-text-2); white-space: nowrap; line-height: 1; } /* Single-day streak: just the number, muted */ .habit-streak--one { font-size: 0.82rem; color: var(--clr-border); font-weight: 500; } /* ── Period-progress badge ─────────────────────────────────────── */ .period-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 10px; font-size: 0.68rem; font-weight: 600; line-height: 1.6; background: var(--clr-surface-2); color: var(--clr-text-2); border: 1px solid var(--clr-border); margin-left: 4px; white-space: nowrap; letter-spacing: 0.01em; vertical-align: middle; } .period-badge--done { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); } /* ── Inline save status ── */ .save-status { display: flex; align-items: center; font-size: 0.82rem; padding: 5px 16px 7px; min-height: 26px; color: transparent; transition: color 0.3s ease; letter-spacing: 0.1px; } .save-status[data-status="pending"] { color: var(--clr-text-2); } .save-status[data-status="saving"] { color: var(--clr-accent); } .save-status[data-status="saved"] { color: var(--clr-accent); } .save-status[data-status="error"] { color: var(--clr-error); } /* ═══════════════════════════════════════════════════════════════════════════ Moderation Tracker section ═══════════════════════════════════════════════════════════════════════════ */ /* ── Substance row container ── */ .mod-list {} /* rows handle their own padding */ .mod-row { position: relative; } /* Divider between rows (not before the last child) */ .mod-row:not(:last-child) { border-bottom: 1px solid var(--clr-border); } /* Edit mode: subtle highlight */ .mod-row--editing { background: var(--clr-surface-2); } /* ── Display mode: substance row ── */ .mod-display { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; gap: 12px; } .mod-sub-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } /* Letter-in-circle badge */ .mod-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--clr-accent-dim); color: var(--clr-accent); font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; user-select: none; -webkit-user-select: none; } /* Alcohol gets a warm amber tint */ .mod-badge[data-sub-id="alcohol"] { background: #fef3c7; color: #d97706; } @media (prefers-color-scheme: dark) { .mod-badge[data-sub-id="alcohol"] { background: #2d1900; color: #f59e0b; } } .mod-sub-name { font-size: 0.95rem; font-weight: 500; color: var(--clr-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Logged: quantity + edit button */ .mod-logged { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .mod-quantity { font-size: 0.88rem; font-weight: 600; color: var(--clr-accent); white-space: nowrap; } .mod-edit-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--clr-text-2); transition: background var(--transition), color var(--transition); } .mod-edit-btn:hover, .mod-edit-btn:focus-visible { background: var(--clr-surface-2); color: var(--clr-text); outline: none; } /* Unlogged: "+ Log" pill button */ .mod-log-btn { display: flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: var(--clr-accent); border: 1.5px solid currentColor; transition: background var(--transition), color var(--transition); flex-shrink: 0; } .mod-log-btn:hover, .mod-log-btn:focus-visible { background: var(--clr-accent-dim); outline: none; } .mod-log-btn:active { background: var(--clr-accent); color: #fff; } /* Optional note line — indented to align with substance name */ .mod-note { font-size: 0.85rem; color: var(--clr-text-2); padding: 0 16px 12px 54px; /* 16px left-pad + 28px badge + 10px gap = 54px */ line-height: 1.4; } /* ── Edit form ── */ .mod-form { padding: 14px 16px 16px; } .mod-form-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } /* Destructive "Clear" button inside form header */ .mod-clear-btn { margin-left: auto; font-size: 0.85rem; font-weight: 500; color: var(--clr-error); padding: 4px 8px; border-radius: 6px; transition: background var(--transition); } .mod-clear-btn:hover, .mod-clear-btn:focus-visible { background: var(--clr-error-bg); outline: none; } /* Qty row: [−] [number input] [+] [unit input] */ .mod-form-qty-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .mod-stepper { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--clr-surface); border: 1.5px solid var(--clr-border); color: var(--clr-text); flex-shrink: 0; transition: background var(--transition), border-color var(--transition), color 0.1s; } .mod-stepper:hover, .mod-stepper:focus-visible { background: var(--clr-accent-dim); border-color: var(--clr-accent); outline: none; } .mod-stepper:active { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; } .mod-qty-input { width: 64px; text-align: center; font-size: 1.2rem; font-weight: 700; font-family: inherit; color: var(--clr-text); background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 10px; padding: 6px 4px; /* Hide browser spinners */ -moz-appearance: textfield; } .mod-qty-input::-webkit-outer-spin-button, .mod-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mod-qty-input:focus { outline: 2px solid var(--clr-accent); outline-offset: 1px; border-color: var(--clr-accent); } .mod-unit-input { flex: 1; font-size: 0.88rem; font-family: inherit; color: var(--clr-text-2); background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 10px; padding: 8px 10px; min-width: 0; } .mod-unit-input:focus { outline: 2px solid var(--clr-accent); outline-offset: 1px; border-color: var(--clr-accent); color: var(--clr-text); } .mod-note-input { width: 100%; font-size: 0.88rem; font-family: inherit; color: var(--clr-text); background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; display: block; } .mod-note-input::placeholder { color: var(--clr-text-2); opacity: 0.7; } .mod-note-input:focus { outline: 2px solid var(--clr-accent); outline-offset: 1px; border-color: var(--clr-accent); } /* Cancel + Save action row */ .mod-form-actions { display: flex; gap: 10px; } .mod-cancel-btn { flex: 1; padding: 10px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; font-family: inherit; color: var(--clr-text-2); background: var(--clr-surface); border: 1.5px solid var(--clr-border); transition: background var(--transition), color var(--transition); } .mod-cancel-btn:hover, .mod-cancel-btn:focus-visible { background: var(--clr-surface-2); color: var(--clr-text); outline: none; } .mod-save-btn { flex: 2; padding: 10px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; font-family: inherit; color: #fff; background: var(--clr-accent); transition: background var(--transition); } .mod-save-btn:hover, .mod-save-btn:focus-visible { background: var(--clr-accent-h); outline: none; } .mod-save-btn:active { background: var(--clr-accent-h); } /* ── Multi-entry list (below the display row) ── */ .mod-entry-list { padding: 4px 16px 10px 54px; /* aligns with substance name (54px = 16px + 28px badge + 10px gap) */ display: flex; flex-direction: column; gap: 6px; } .mod-entry-row { display: flex; align-items: center; gap: 8px; } .mod-entry-qty { font-size: 0.88rem; font-weight: 400; color: var(--clr-text); white-space: nowrap; } .mod-entry-time { font-size: 0.8rem; color: var(--clr-text-2); background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 20px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; } .mod-entry-note { font-size: 0.82rem; color: var(--clr-text-2); font-style: italic; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mod-del-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.85rem; color: var(--clr-text-2); background: transparent; border: none; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .mod-del-btn:hover, .mod-del-btn:focus-visible { background: var(--clr-error-bg, #ffebee); color: var(--clr-error); outline: none; } /* "+ Add" pill button — mirrors .mod-log-btn */ .mod-add-btn { display: flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: var(--clr-accent); border: 1.5px solid currentColor; transition: background var(--transition), color var(--transition); flex-shrink: 0; margin-top: 4px; align-self: flex-start; } .mod-add-btn:hover, .mod-add-btn:focus-visible { background: var(--clr-accent-dim); outline: none; } .mod-add-btn:active { background: var(--clr-accent); color: #fff; } /* Time row inside the entry form */ .mod-form-time-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .mod-time-label { font-size: 0.85rem; color: var(--clr-text-2); white-space: nowrap; flex-shrink: 0; } .mod-time-input { font-size: 0.88rem; font-family: inherit; color: var(--clr-text-2); background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 10px; padding: 8px 10px; min-width: 0; } .mod-time-input:focus { outline: 2px solid var(--clr-accent); outline-offset: 1px; border-color: var(--clr-accent); color: var(--clr-text); } /* Validation error state (applied to qty input) */ .input--error { border-color: var(--clr-error) !important; outline: 2px solid var(--clr-error-bg) !important; } /* ═══════════════════════════════════════════════════════════════════════════ Placeholder cards (future phases) ═══════════════════════════════════════════════════════════════════════════ */ .placeholder-card { display: flex; align-items: center; gap: 14px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 16px; padding: 15px 16px; opacity: 0.7; } .placeholder-icon { color: var(--clr-accent); flex-shrink: 0; display: flex; align-items: center; opacity: 0.6; } .placeholder-text { display: flex; flex-direction: column; gap: 2px; } .placeholder-text strong { font-size: 0.9rem; font-weight: 600; color: var(--clr-text); } .placeholder-text span { font-size: 0.78rem; color: var(--clr-text-2); } /* ═══════════════════════════════════════════════════════════════════════════ Symptom Log (Phase 4) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Section badge (entry count in header) ─────────────────────────────── */ .section-badge { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--clr-surface-2); color: var(--clr-text-2); white-space: nowrap; border: 1px solid var(--clr-border); } .section-badge:empty { display: none; } /* ── Ongoing issues strip ──────────────────────────────────────────────── */ .symp-issues-strip { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 4px; } .symp-issues-hdr { font-size: 0.7rem; font-weight: 700; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .symp-issue-chips { display: flex; flex-direction: column; gap: 6px; } .symp-issue-chip { display: flex; align-items: center; gap: 7px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 7px 10px; } .symp-issue-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .symp-issue-name { font-size: 0.84rem; font-weight: 500; color: var(--clr-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .symp-issue-dur { font-size: 0.72rem; color: var(--clr-text-2); flex-shrink: 0; } .symp-chip-log-btn, .symp-chip-resolve-btn { font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; border: 1.5px solid; cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .symp-chip-log-btn { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); } .symp-chip-log-btn:hover { background: var(--clr-accent); color: #fff; } .symp-chip-resolve-btn { background: transparent; color: var(--clr-text-2); border-color: var(--clr-border); } .symp-chip-resolve-btn:hover { color: var(--clr-accent); border-color: var(--clr-accent); } /* ── Entries container ─────────────────────────────────────────────────── */ .symp-entries { display: flex; flex-direction: column; gap: 8px; } /* ── Entry card ────────────────────────────────────────────────────────── */ .symp-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; } .symp-card-top { display: flex; align-items: center; gap: 7px; } .symp-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .symp-card-cat { font-size: 0.79rem; font-weight: 600; color: var(--clr-text-2); flex: 1; } .symp-sev-badge { font-size: 0.72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--sev-bg); color: var(--sev-clr); flex-shrink: 0; } .symp-card-time { font-size: 0.75rem; color: var(--clr-text-2); flex-shrink: 0; } .symp-card-actions { display: flex; gap: 3px; } .symp-edit-btn, .symp-del-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer; color: var(--clr-text-2); background: transparent; transition: background var(--transition), color var(--transition); } .symp-edit-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .symp-del-btn:hover { background: var(--clr-error-bg); color: var(--clr-error); } @media (prefers-color-scheme: dark) { .symp-del-btn:hover { background: #3b1a1a; } } .symp-card-desc { font-size: 0.875rem; color: var(--clr-text); line-height: 1.4; margin: 0; } .symp-card-issue-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 500; color: var(--cat-color, var(--clr-text-2)); background: var(--clr-surface-2); border: 1px solid var(--clr-border); padding: 2px 8px; border-radius: 999px; align-self: flex-start; } /* ── Entry form ────────────────────────────────────────────────────────── */ .symp-form { background: var(--clr-surface); border: 1px solid var(--clr-accent); border-radius: 14px; overflow: hidden; } .symp-form-inner { padding: 14px; display: flex; flex-direction: column; gap: 13px; } .symp-form-heading { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; font-weight: 600; color: var(--clr-text); } .symp-cancel-btn { font-size: 0.82rem; font-weight: 500; color: var(--clr-text-2); background: transparent; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background var(--transition); } .symp-cancel-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .symp-form-field { display: flex; flex-direction: column; gap: 6px; } .symp-form-label { font-size: 0.72rem; font-weight: 700; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.05em; } .symp-optional { font-weight: 400; text-transform: none; letter-spacing: 0; } /* Category pills */ .symp-form-cats { display: flex; flex-wrap: wrap; gap: 6px; } .symp-form-cat-btn { font-size: 0.8rem; font-weight: 500; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--cat-color, var(--clr-border)); color: var(--cat-color, var(--clr-text)); background: transparent; cursor: pointer; transition: background var(--transition), color var(--transition); } .symp-form-cat-btn:hover:not(.symp-form-cat-btn--active) { background: var(--clr-surface-2); } .symp-form-cat-btn--active { background: var(--cat-color, var(--clr-accent)); color: #fff; border-color: var(--cat-color, var(--clr-accent)); } /* Severity buttons */ .symp-form-sevs { display: flex; gap: 6px; } .symp-form-sev-btn { flex: 1; font-size: 0.875rem; font-weight: 700; padding: 7px 0; border-radius: 8px; border: 1.5px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .symp-form-sev-btn:hover:not(.symp-form-sev-btn--active) { background: var(--sev-bg, var(--clr-surface-2)); color: var(--sev-clr, var(--clr-text)); border-color: var(--sev-clr, var(--clr-border)); } .symp-form-sev-btn--active { background: var(--sev-bg); color: var(--sev-clr); border-color: var(--sev-clr); } /* Text inputs */ .symp-text-input { width: 100%; padding: 9px 11px; font-size: 0.875rem; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text); font-family: inherit; box-sizing: border-box; transition: border-color var(--transition); } .symp-text-input:focus { outline: none; border-color: var(--clr-accent); } .symp-time-input { width: 130px; } /* Issue dropdown */ .symp-form-select { width: 100%; padding: 9px 11px; font-size: 0.875rem; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text); font-family: inherit; cursor: pointer; box-sizing: border-box; transition: border-color var(--transition); } .symp-form-select:focus { outline: none; border-color: var(--clr-accent); } /* New issue title field */ .symp-new-issue-wrap[hidden] { display: none; } /* Form actions */ .symp-form-actions { display: flex; justify-content: flex-end; } .symp-save-btn { font-size: 0.875rem; font-weight: 600; padding: 9px 24px; border-radius: 9px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; transition: background var(--transition); } .symp-save-btn:hover { background: var(--clr-accent-h); } .symp-save-btn:active { background: var(--clr-accent-h); } /* ── Add button ────────────────────────────────────────────────────────── */ .symp-add-btn { width: 100%; padding: 11px; font-size: 0.875rem; font-weight: 600; color: var(--clr-accent); background: var(--clr-accent-dim); border: 1.5px dashed var(--clr-accent); border-radius: 12px; cursor: pointer; transition: background var(--transition); margin-top: 2px; } .symp-add-btn:hover { background: var(--clr-surface-2); } /* ═══════════════════════════════════════════════════════════════════════════ Medication Tracker (Phase 5) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Medication list container ─────────────────────────────────────────── */ .med-list { display: flex; flex-direction: column; gap: 6px; } /* ── Med row wrapper (holds row + optional edit form) ──────────────────── */ .med-row-wrap { display: flex; flex-direction: column; gap: 0; } /* ── Main medication row ───────────────────────────────────────────────── */ .med-row { display: flex; align-items: center; gap: 11px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; padding: 10px 12px; transition: border-color var(--transition), background var(--transition); } .med-row--taken { background: var(--clr-surface); border-color: var(--clr-border); } .med-row--editing { border-color: var(--clr-accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* ── Check / uncheck button ────────────────────────────────────────────── */ .med-check-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: 2px solid var(--clr-border); background: transparent; color: transparent; /* checkmark hidden when not taken */ cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); } .med-check-btn:hover:not(.med-check-btn--taken) { border-color: var(--clr-accent); color: var(--clr-accent); background: var(--clr-accent-dim); } .med-check-btn--taken { border-color: var(--clr-accent); background: var(--clr-accent-dim); color: var(--clr-accent); /* checkmark visible */ } /* ── Medication info block ─────────────────────────────────────────────── */ .med-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .med-name { font-size: 0.9rem; font-weight: 600; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .med-row--taken .med-name { color: var(--clr-text); } .med-meta { font-size: 0.76rem; color: var(--clr-text-2); } .med-taken-time { font-size: 0.76rem; font-weight: 600; color: var(--clr-accent); } /* ── Edit button (shown on taken rows) ─────────────────────────────────── */ .med-edit-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; border-radius: 8px; border: none; background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition); } .med-edit-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } /* ── Inline edit-record form ───────────────────────────────────────────── */ .med-edit-form { background: var(--clr-surface); border: 1px solid var(--clr-accent); border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } /* ── Shared form field + label ─────────────────────────────────────────── */ .med-form-field { display: flex; flex-direction: column; gap: 5px; } .med-form-label { font-size: 0.7rem; font-weight: 700; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.05em; } .med-form-optional { font-weight: 400; text-transform: none; letter-spacing: 0; } .med-form-input { width: 100%; padding: 8px 10px; font-size: 0.875rem; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text); font-family: inherit; box-sizing: border-box; transition: border-color var(--transition); } .med-form-input:focus { outline: none; border-color: var(--clr-accent); } .med-time-input { width: 130px; } /* ── Form action buttons ───────────────────────────────────────────────── */ .med-form-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .med-form-spacer { flex: 1; } .med-unmark-btn { font-size: 0.8rem; font-weight: 600; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition); } .med-unmark-btn:hover { color: var(--clr-error); border-color: var(--clr-error); background: var(--clr-error-bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .med-unmark-btn:hover { background: #3b1a1a; } } :root[data-theme="dark"] .med-unmark-btn:hover { background: #3b1a1a; } .med-archive-btn { font-size: 0.8rem; font-weight: 600; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition); } .med-archive-btn:hover { color: var(--clr-text); border-color: var(--clr-text-2); } .med-cancel-btn { font-size: 0.82rem; font-weight: 500; color: var(--clr-text-2); background: transparent; border: none; cursor: pointer; padding: 6px 10px; border-radius: 7px; transition: background var(--transition); } .med-cancel-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .med-record-save-btn { font-size: 0.875rem; font-weight: 600; padding: 7px 18px; border-radius: 8px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; transition: background var(--transition); } .med-record-save-btn:hover { background: var(--clr-accent-h); } .med-record-save-btn:active { background: var(--clr-accent-h); } /* ── Add-medication form ───────────────────────────────────────────────── */ .med-add-form { background: var(--clr-surface); border: 1px solid var(--clr-accent); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; } .med-add-form-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; font-weight: 600; color: var(--clr-text); } .med-add-cancel-btn { font-size: 0.82rem; font-weight: 500; color: var(--clr-text-2); background: transparent; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background var(--transition); } .med-add-cancel-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } /* Timing chip multi-select */ .med-timing-chips { display: flex; flex-wrap: wrap; gap: 6px; } .med-timing-chip { font-size: 0.8rem; font-weight: 500; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--clr-border); color: var(--clr-text-2); background: transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .med-timing-chip:hover:not(.med-timing-chip--active) { border-color: var(--clr-accent); color: var(--clr-accent); } .med-timing-chip--active { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); font-weight: 600; } .med-add-save-btn { align-self: flex-end; font-size: 0.875rem; font-weight: 600; padding: 9px 24px; border-radius: 9px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; transition: background var(--transition); } .med-add-save-btn:hover { background: var(--clr-accent-h); } .med-add-save-btn:active { background: var(--clr-accent-h); } /* ── Add button ────────────────────────────────────────────────────────── */ .med-add-btn { width: 100%; padding: 11px; font-size: 0.875rem; font-weight: 600; color: var(--clr-accent); background: var(--clr-accent-dim); border: 1.5px dashed var(--clr-accent); border-radius: 12px; cursor: pointer; transition: background var(--transition); margin-top: 2px; } .med-add-btn:hover { background: var(--clr-surface-2); } /* ═══════════════════════════════════════════════════════════════════════════ Symptom category manager ═══════════════════════════════════════════════════════════════════════════ */ /* Section header right-side cluster (badge + gear button) */ .section-header-right { display: flex; align-items: center; gap: 6px; } /* Gear toggle button */ .symp-cat-toggle-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--clr-text-2); cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .symp-cat-toggle-btn:hover, .symp-cat-toggle-btn[aria-expanded="true"] { background: var(--clr-accent-dim); color: var(--clr-accent); } /* Panel container */ .symp-cat-panel { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .symp-cat-panel[hidden] { display: none !important; } /* ── Quick symptom multiselect ─────────────────────────────────────────────── */ .symp-quick-symptoms { padding: 2px 0 10px; } .symp-quick-pills { display: flex; flex-wrap: wrap; gap: 7px; } .symp-quick-pill { padding: 5px 13px; border-radius: 999px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; } .symp-quick-pill:hover { border-color: var(--clr-accent); color: var(--clr-accent); } .symp-quick-pill--active { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; } .symp-quick-pill--active:hover { opacity: 0.88; } /* ─────────────────────────────────────────────────────────────────────────── */ .symp-cat-panel-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--clr-text); } .symp-cat-done-btn { font-size: 0.82rem; font-weight: 600; color: var(--clr-accent); background: transparent; border: none; cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: background var(--transition); } .symp-cat-done-btn:hover { background: var(--clr-accent-dim); } /* Category list */ .symp-cat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .symp-cat-item { display: flex; align-items: center; gap: 8px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 7px 10px; } .symp-cat-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .symp-cat-item-name { font-size: 0.85rem; font-weight: 500; color: var(--clr-text); flex: 1; } .symp-cat-name-input { flex: 1; font-size: 0.85rem; padding: 3px 7px; border: 1.5px solid var(--clr-accent); border-radius: 6px; background: var(--clr-surface); color: var(--clr-text); font-family: inherit; min-width: 0; } .symp-cat-name-input:focus { outline: none; } /* Icon buttons inside each category row */ .symp-cat-edit-btn, .symp-cat-del-btn, .symp-cat-save-btn, .symp-cat-item-cancel-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; border-radius: 6px; border: none; cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .symp-cat-edit-btn, .symp-cat-item-cancel-btn { background: transparent; color: var(--clr-text-2); } .symp-cat-edit-btn:hover, .symp-cat-item-cancel-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .symp-cat-del-btn { background: transparent; color: var(--clr-text-2); } .symp-cat-del-btn:hover { background: var(--clr-error-bg); color: var(--clr-error); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .symp-cat-del-btn:hover { background: #3b1a1a; } } :root[data-theme="dark"] .symp-cat-del-btn:hover { background: #3b1a1a; } .symp-cat-save-btn { background: var(--clr-accent-dim); color: var(--clr-accent); } .symp-cat-save-btn:hover { background: var(--clr-accent); color: #fff; } /* Add-category row */ .symp-cat-add-row { display: flex; gap: 6px; align-items: center; } .symp-cat-add-input { flex: 1; padding: 7px 10px; font-size: 0.85rem; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text); font-family: inherit; min-width: 0; transition: border-color var(--transition); } .symp-cat-add-input:focus { outline: none; border-color: var(--clr-accent); } .symp-cat-add-confirm-btn { font-size: 0.82rem; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; white-space: nowrap; transition: background var(--transition); } .symp-cat-add-confirm-btn:hover { background: var(--clr-accent-h); } /* ═══════════════════════════════════════════════════════════════════════════ Global date bar (shared across all sections) ═══════════════════════════════════════════════════════════════════════════ */ .app-date-bar { display: flex; align-items: center; gap: 8px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 8px 10px; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .app-date-bar__center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; } .app-date-label { font-size: 0.92rem; font-weight: 700; color: var(--clr-text); white-space: nowrap; } .app-cal-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition); } .app-cal-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } /* Invisible — only used to trigger the native date picker */ .app-date-picker-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; top: 100%; left: 50%; } .app-today-btn { font-size: 0.78rem; font-weight: 700; color: var(--clr-accent); background: var(--clr-accent-dim); border: 1.5px solid var(--clr-accent); border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); } .app-today-btn:hover { background: var(--clr-accent); color: #fff; } /* ── Reading habit row (expandable) ─────────────────────────────────────────── */ .habit-reading-wrapper { display: flex; flex-direction: column; } /* Override button padding/gap on the reading row since child buttons own it */ .habit-row--reading { padding: 0; gap: 0; cursor: default; /* row itself isn't clickable */ } /* Checkbox sub-button */ .habit-check-btn { background: none; border: none; cursor: pointer; padding: 13px 10px 13px 16px; display: flex; align-items: center; flex-shrink: 0; border-radius: 0; transition: opacity var(--transition); } .habit-check-btn:hover { opacity: 0.75; } /* Expand sub-button (name + chevron) */ .habit-expand-btn { flex: 1; display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 13px 16px 13px 6px; text-align: left; cursor: pointer; border-radius: 0; transition: background var(--transition); min-width: 0; } .habit-expand-btn:hover { background: var(--clr-surface-2); } /* Chevron icon */ .habit-chevron { margin-left: auto; flex-shrink: 0; color: var(--clr-text-2); transition: transform 0.2s ease; } .habit-chevron--open { transform: rotate(180deg); } /* Remove bottom border when panel is open (panel takes over visually) */ .habit-row--reading.habit-row--open { border-bottom: none; } /* Inline gym panel inside habits section */ .gym-habits-inline { border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); background: var(--clr-surface-2); padding: 14px; } .gym-panel { display: flex; flex-wrap: wrap; gap: 8px; } .gym-muscle-btn { padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .gym-muscle-btn:hover { border-color: var(--clr-accent); color: var(--clr-accent); } .gym-muscle-btn--active { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; } .gym-muscle-btn--active:hover { background: var(--clr-accent); color: #fff; opacity: 0.88; } /* ── Meditation: Calm app link ───────────────────────────────────────────── */ .habit-calm-btn { margin-left: auto; font-size: 1.1rem; text-decoration: none; padding: 3px 8px; border-radius: 8px; background: var(--clr-surface-2); color: var(--clr-text); line-height: 1; flex-shrink: 0; transition: background var(--transition); } .habit-calm-btn:hover, .habit-calm-btn:active { background: var(--clr-accent-dim); } /* Inline reading panel inside habits section */ .book-habits-inline { border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); background: var(--clr-surface-2); padding: 14px; } .book-habits-inline .book-daily { gap: 8px; } /* ── Reading Tracker ─────────────────────────────────────────────────────────── */ /* Library toggle button */ .book-library-btn { font-size: 0.78rem; font-weight: 600; color: var(--clr-accent); background: var(--clr-accent-dim); border: 1.5px solid var(--clr-accent); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); } .book-library-btn:hover { background: var(--clr-accent); color: #fff; } /* Library panel */ .book-library-panel { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 10px; padding: 14px; margin-bottom: 14px; } .book-lib-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .book-lib-title { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--clr-text); } .book-lib-done-btn { font-size: 0.78rem; font-weight: 600; color: var(--clr-text-2); background: transparent; border: 1.5px solid var(--clr-border); border-radius: 999px; padding: 3px 11px; cursor: pointer; } .book-lib-done-btn:hover { color: var(--clr-text); border-color: var(--clr-text-2); } /* Add book button */ .book-add-book-btn { display: block; width: 100%; text-align: left; font-size: 0.85rem; font-weight: 600; color: var(--clr-accent); background: transparent; border: 1.5px dashed var(--clr-accent); border-radius: 8px; padding: 10px 14px; margin-top: 12px; margin-bottom: 20px; cursor: pointer; transition: background var(--transition); } .book-add-book-btn:hover { background: var(--clr-accent-dim); } /* Book groups */ .book-group { margin-bottom: 16px; } .book-group-title { font-size: 1rem; font-weight: 700; color: var(--clr-text); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--clr-border); } /* Book cards */ .book-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; } .book-card-main { display: flex; gap: 12px; align-items: flex-start; } .book-card-info { flex: 1; min-width: 0; } .book-card-title { font-size: 0.9rem; font-weight: 700; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .book-card-author { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 1px; } .book-card-stats { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 3px; } .book-card-date { font-size: 0.72rem; color: var(--clr-text-2); margin-top: 2px; font-style: italic; } .book-card-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 56px; } .book-card-progress-bar { width: 52px; height: 6px; background: var(--clr-border); border-radius: 999px; overflow: hidden; } .book-card-progress-fill { height: 100%; background: var(--gradient-brand); border-radius: 999px; transition: width 0.3s ease; } .book-card-progress-pct { font-size: 0.7rem; font-weight: 700; color: var(--clr-accent); } .book-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; flex-basis: 100%; } .book-card-actions button { font-size: 0.75rem; padding: 3px 9px; border-radius: 6px; cursor: pointer; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); transition: background var(--transition), color var(--transition), border-color var(--transition); } .book-card-actions button:hover { color: var(--clr-text); border-color: var(--clr-text-2); } .book-card-finish-btn { color: var(--clr-accent) !important; border-color: var(--clr-accent) !important; } .book-card-finish-btn:hover { background: var(--clr-accent-dim) !important; } .book-card-del-btn:hover { color: var(--clr-error) !important; border-color: var(--clr-error) !important; } /* Finished books — cover grid */ .book-finished-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; } .book-finished-thumb { cursor: pointer; border-radius: 6px; overflow: hidden; border: 2px solid transparent; transition: border-color var(--transition), transform var(--transition); position: relative; aspect-ratio: 2 / 3; background: var(--clr-surface-2); display: flex; align-items: center; justify-content: center; } .book-finished-thumb:hover { border-color: var(--clr-accent); transform: translateY(-2px); } .book-finished-thumb--active { border-color: var(--clr-accent); } .book-finished-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .book-finished-thumb-label { font-size: 0.6rem; font-weight: 600; color: var(--clr-text-2); text-align: center; padding: 4px; line-height: 1.3; word-break: break-word; } .book-finished-detail { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; padding: 12px 14px; margin-top: 10px; } .book-finished-detail-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; } .book-finished-detail-cover { width: 52px; height: 78px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .book-finished-detail-title { font-size: 0.92rem; font-weight: 700; color: var(--clr-text); line-height: 1.3; } .book-finished-detail-author { font-size: 0.8rem; color: var(--clr-text-2); margin-top: 2px; } .book-finished-detail-meta { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 6px; line-height: 1.6; } .book-finished-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .book-finished-detail-actions button { font-size: 0.78rem; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition); } .book-finished-detail-actions button:hover { background: var(--clr-surface); color: var(--clr-text); } .book-finished-detail-del-btn:hover { color: var(--clr-error) !important; border-color: var(--clr-error) !important; } /* Shared form styles */ .book-add-form, .book-session-form { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; } .book-form-heading { font-size: 0.85rem; font-weight: 700; color: var(--clr-text); margin: 0 0 10px; } .book-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .book-form-label { font-size: 0.78rem; font-weight: 600; color: var(--clr-text-2); } .book-form-required { color: var(--clr-error); margin-left: 2px; } .book-form-optional { font-weight: 400; color: var(--clr-text-2); } .book-form-input { background: var(--clr-surface-2); border: 1.5px solid var(--clr-border); border-radius: 6px; padding: 7px 10px; font-size: 0.88rem; color: var(--clr-text); width: 100%; box-sizing: border-box; transition: border-color var(--transition); } .book-form-input:focus { outline: none; border-color: var(--clr-accent); } .book-narrow-input { width: 100px !important; } .book-form-select { background: var(--clr-surface-2); border: 1.5px solid var(--clr-border); border-radius: 6px; padding: 7px 10px; font-size: 0.88rem; color: var(--clr-text); width: 100%; box-sizing: border-box; } .book-form-row { display: flex; flex-wrap: wrap; gap: 10px; } .book-form-row .book-form-field { flex: 0 0 auto; } .book-form-status-actions { display: flex; gap: 8px; padding: 0 0 12px; } .book-form-status-actions .lib-detail-btn { flex: 1; } .book-form-actions { display: flex; gap: 8px; margin-top: 4px; } .book-form-cancel-btn { font-size: 0.82rem; padding: 6px 14px; border-radius: 6px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; } .book-form-cancel-btn:hover { color: var(--clr-text); } .book-form-save-btn { font-size: 0.82rem; padding: 6px 16px; border-radius: 6px; border: none; background: var(--clr-accent); color: #fff; font-weight: 700; cursor: pointer; transition: opacity var(--transition); } .book-form-save-btn:hover { opacity: 0.88; } /* Empty states */ .book-empty { font-size: 0.85rem; color: var(--clr-text-2); text-align: center; padding: 16px 0; } .book-empty-daily { font-size: 0.85rem; color: var(--clr-text-2); padding: 10px 0; } /* Daily section */ .book-daily { display: flex; flex-direction: column; gap: 10px; } /* Book selector */ .book-selector-wrap { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 10px; padding: 10px 14px; } .book-active-select { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 6px; padding: 5px 8px; font-size: 0.92rem; font-weight: 700; color: var(--clr-text); width: 100%; margin-bottom: 4px; } .book-sel-title { font-size: 0.95rem; font-weight: 700; color: var(--clr-text); } .book-sel-author { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 1px; } .book-sel-meta { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 4px; } .book-sel-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .book-sel-progress-bar { flex: 1; height: 6px; background: var(--clr-border); border-radius: 999px; overflow: hidden; } .book-sel-progress-fill { height: 100%; background: var(--gradient-brand); border-radius: 999px; transition: width 0.3s ease; } .book-sel-progress-text { font-size: 0.75rem; font-weight: 700; color: var(--clr-accent); white-space: nowrap; } /* Session history toggle */ .book-history-toggle { background: transparent; border: none; padding: 4px 0; font-size: 0.78rem; color: var(--clr-text-2); cursor: pointer; text-align: left; transition: color var(--transition); } .book-history-toggle:hover { color: var(--clr-text); } /* Session list */ .book-sessions-list { display: flex; flex-direction: column; gap: 6px; } .book-session-card { display: flex; align-items: flex-start; gap: 10px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; padding: 8px 10px; } .book-session-dot { width: 8px; height: 8px; background: var(--clr-accent); border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .book-session-body { flex: 1; min-width: 0; } .book-session-summary { font-size: 0.85rem; color: var(--clr-text); } .book-session-notes { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 3px; } .book-session-logged-at { font-size: 0.72rem; color: var(--clr-text-2); margin-top: 3px; opacity: 0.75; } .book-session-book-tag { display: inline-block; font-size: 0.72rem; background: var(--clr-accent-dim); color: var(--clr-accent); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; } .book-session-actions { display: flex; gap: 6px; flex-shrink: 0; } .book-sess-edit-btn, .book-sess-del-btn { font-size: 0.73rem; padding: 2px 8px; border-radius: 5px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; } .book-sess-edit-btn:hover { color: var(--clr-text); } .book-sess-del-btn:hover { color: var(--clr-error); border-color: var(--clr-error); } /* Action area */ .book-action-area { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .book-start-timer-btn, .book-log-manual-btn { flex: 1; min-width: 120px; padding: 10px 14px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition); } .book-start-timer-btn { background: var(--clr-accent); color: #fff; border: none; } .book-start-timer-btn:hover { opacity: 0.88; } .book-log-manual-btn { background: transparent; color: var(--clr-text); border: 1.5px solid var(--clr-border); } .book-log-manual-btn:hover { background: var(--clr-surface-2); } /* Timer bar */ .book-timer-running { display: flex; align-items: center; gap: 10px; background: var(--clr-accent-dim); border: 1.5px solid var(--clr-accent); border-radius: 10px; padding: 10px 14px; } .book-timer-icon { font-size: 1.2rem; } .book-timer-display { font-size: 1.15rem; font-weight: 800; color: var(--clr-accent); flex: 1; font-variant-numeric: tabular-nums; letter-spacing: 1px; } .book-timer-stop-btn { font-size: 0.82rem; font-weight: 700; padding: 6px 14px; border-radius: 6px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; } .book-timer-stop-btn:hover { opacity: 0.88; } .book-timer-pause-btn { font-size: 0.82rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 1.5px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text); cursor: pointer; transition: background var(--transition); } .book-timer-pause-btn:hover { background: var(--clr-surface-2); } .book-timer-running--paused { opacity: 0.75; } .book-timer-running--paused .book-timer-display { color: var(--clr-text-2); } /* ── Book search ─────────────────────────────────────────────────────────── */ .book-search-wrap { position: relative; } .book-search-input { padding-right: 90px; } .book-search-spinner { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--clr-text-2); white-space: nowrap; pointer-events: none; } /* Search error message */ .book-search-error { margin: 6px 0 4px; padding: 8px 10px; font-size: 0.82rem; color: var(--clr-error); background: color-mix(in srgb, var(--clr-error) 8%, transparent); border: 1px solid color-mix(in srgb, var(--clr-error) 25%, transparent); border-radius: 6px; } /* Search result list */ .book-search-results { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px; border: 1.5px solid var(--clr-border); border-radius: 10px; overflow: hidden; background: var(--clr-surface); } .book-search-result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-bottom: 1px solid var(--clr-border); cursor: pointer; text-align: left; transition: background var(--transition); } .book-search-result:last-child { border-bottom: none; } .book-search-result:hover { background: var(--clr-surface-2); } .book-result-cover { width: 44px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--clr-surface-2); } .book-result-cover--empty { border: 1.5px dashed var(--clr-border); display: flex; align-items: center; justify-content: center; } .book-result-info { flex: 1; min-width: 0; } .book-result-title { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); } .book-result-author { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 2px; } .book-result-pages { font-size: 0.72rem; color: var(--clr-text-2); margin-top: 2px; } /* Cover preview in form */ .book-cover-preview { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .book-cover-preview-img { width: 60px; height: 82px; object-fit: cover; border-radius: 5px; border: 1px solid var(--clr-border); flex-shrink: 0; } .book-cover-clear-btn { font-size: 0.75rem; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; align-self: center; } .book-cover-clear-btn:hover { color: var(--clr-error); border-color: var(--clr-error); } /* ── Cover art in library cards ──────────────────────────────────────────── */ .book-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } .book-card-cover { width: 52px; height: 74px; object-fit: cover; border-radius: 5px; border: 1px solid var(--clr-border); flex-shrink: 0; } /* book-card-main already exists; ensure it fills remaining space */ .book-card-main { flex: 1; min-width: 0; } /* ── Cover art in daily selector ─────────────────────────────────────────── */ .book-selector-wrap { display: flex; gap: 12px; align-items: flex-start; } .book-sel-cover { width: 54px; height: 76px; object-fit: cover; border-radius: 6px; border: 1px solid var(--clr-border); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .book-sel-info { flex: 1; min-width: 0; } /* ── Library Tab Redesign ────────────────────────────────────────────────── */ /* Header */ .lib-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--clr-border); padding: 20px; } .lib-title { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: var(--clr-text); line-height: 1; margin-bottom: 14px; } .lib-chips { display: flex; justify-content: space-between; flex-wrap: wrap; } .lib-chip { display: flex; flex-direction: column; align-items: center; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; padding: 8px 14px; min-width: 72px; } .lib-chip-val { font-size: 18px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; line-height: 1; } .lib-chip-lbl { font-size: 0.68rem; color: var(--clr-text-2); margin-top: 3px; font-weight: 500; letter-spacing: 0.2px; } /* Scrollable body */ .lib-body { display: flex; flex-direction: column; gap: 24px; padding: 20px 16px 40px; } /* Section label */ .lib-section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--clr-text-2); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--clr-border); display: flex; align-items: center; gap: 6px; } .lib-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--clr-accent-dim); color: var(--clr-accent); font-size: 0.68rem; font-weight: 700; border-radius: 9px; } /* Hero card */ .lib-hero-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); } .lib-hero-bar { height: 5px; background: var(--gradient-brand); } .lib-hero-body { display: flex; gap: 14px; padding: 16px; align-items: flex-start; } .lib-hero-cover { width: 88px; height: 128px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,0.35); flex-shrink: 0; background: var(--clr-surface-2); } .lib-hero-cover--empty { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; opacity: 0.35; } .lib-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .lib-hero-title { font-size: 1rem; font-weight: 800; color: var(--clr-text); line-height: 1.25; letter-spacing: -0.2px; } .lib-hero-author { font-size: 0.78rem; color: var(--clr-text-2); margin-top: -2px; } .lib-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .lib-hero-stat { background: var(--clr-surface-2); border-radius: 10px; padding: 8px 10px; } .lib-hero-stat-val { font-size: 1.05rem; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; line-height: 1; } .lib-hero-stat-lbl { font-size: 0.62rem; color: var(--clr-text-2); margin-top: 2px; } /* Hero progress bar */ .lib-hero-progress-wrap { padding: 0 16px 6px; } .lib-hero-progress-row { display: flex; align-items: center; gap: 8px; } .lib-hero-progress-bar { flex: 1; height: 6px; background: var(--clr-surface-2); border-radius: 3px; overflow: hidden; } .lib-hero-progress-fill { height: 100%; background: var(--gradient-brand); transition: width 0.3s ease; } .lib-hero-progress-pct { font-size: 0.72rem; font-weight: 700; color: var(--clr-accent); min-width: 30px; text-align: right; } /* Hero action buttons */ .lib-hero-actions { display: flex; gap: 8px; padding: 8px 16px 4px; } .lib-hero-status-actions { display: flex; gap: 8px; padding: 0 16px 16px; } .lib-hero-status-actions .lib-detail-btn { flex: 1; } .lib-btn-primary { flex: 1; background: var(--clr-accent); color: #0f1210; font-size: 0.85rem; font-weight: 700; border: none; border-radius: 10px; padding: 11px 12px; cursor: pointer; font-family: inherit; } .lib-btn-primary:active { opacity: 0.85; } .lib-btn-secondary { background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.85rem; font-weight: 600; border: 1px solid var(--clr-border); border-radius: 10px; padding: 11px 16px; cursor: pointer; font-family: inherit; } .lib-btn-secondary:active { background: var(--clr-border); } /* Hero timer bar */ .lib-hero-timer { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--clr-accent-dim); border-top: 1px solid var(--clr-border); } .lib-hero-timer--paused { opacity: 0.8; } .lib-hero-timer-ico { font-size: 1.1rem; } .lib-hero-timer-display { font-size: 1.1rem; font-weight: 800; color: var(--clr-accent); flex: 1; font-variant-numeric: tabular-nums; letter-spacing: 1px; } .lib-timer-btn { font-family: inherit; font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: none; } .lib-timer-btn--pause { background: var(--clr-surface); color: var(--clr-text); border: 1px solid var(--clr-border) !important; } .lib-timer-btn--stop { background: var(--clr-accent); color: #0f1210; } /* Swipe dots + hint */ .lib-swipe-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 4px; } .lib-swipe-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clr-border); transition: background 0.2s, width 0.2s; } .lib-swipe-dot--active { background: var(--clr-accent); width: 18px; border-radius: 3px; } .lib-swipe-hint { text-align: center; font-size: 0.68rem; color: var(--clr-text-2); margin-top: 2px; margin-bottom: 4px; } /* Add a Book button */ .lib-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 18px 13px; margin: 30px 0; border-radius: 12px; background: transparent; border: 1.5px dashed var(--clr-border); color: var(--clr-text-2); font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color var(--transition), color var(--transition); } .lib-add-btn:hover { border-color: var(--clr-accent); color: var(--clr-accent); } .lib-add-btn-plus { font-size: 1.1rem; } /* Cover grid (Finished / Paused) */ .lib-cover-section { display: flex; flex-direction: column; gap: 0; } .lib-cover-strip-wrap { overflow: hidden; border-radius: 14px; } .lib-cover-strip { display: flex; transition: transform 0.3s ease; } .lib-cover-page { min-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .lib-cover-thumb { aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--clr-surface-2); border: 1px solid var(--clr-border); transition: transform 0.15s ease, border-color 0.15s ease; } .lib-cover-thumb:active { transform: scale(0.95); } .lib-cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lib-cover-thumb--empty { cursor: default; opacity: 0; pointer-events: none; } .lib-cover-thumb-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; gap: 6px; } .lib-cover-thumb-ico { font-size: 1.4rem; opacity: 0.4; } .lib-cover-thumb-lbl { font-size: 0.58rem; font-weight: 700; color: var(--clr-text-2); line-height: 1.3; word-break: break-word; text-align: center; } /* Empty state */ .lib-empty { font-size: 0.85rem; color: var(--clr-text-2); padding: 10px 0; } /* Book form card */ .lib-book-form { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 16px; } /* Detail bottom sheet */ .lib-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 200; display: flex; align-items: flex-end; animation: lib-fade-in 0.2s ease; } @keyframes lib-fade-in { from { opacity: 0; } to { opacity: 1; } } .lib-detail-sheet { width: 100%; background: var(--clr-surface); border-radius: 20px 20px 0 0; border: 1px solid var(--clr-border); border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 24px); animation: lib-slide-up 0.28s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes lib-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .lib-detail-handle { width: 36px; height: 4px; background: var(--clr-border); border-radius: 2px; margin: 12px auto 0; } .lib-detail-header { display: flex; gap: 14px; padding: 16px 20px; align-items: flex-start; } .lib-detail-cover { width: 72px; height: 104px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.35); background: var(--clr-surface-2); flex-shrink: 0; } .lib-detail-cover--empty { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; opacity: 0.35; } .lib-detail-info { flex: 1; min-width: 0; } .lib-detail-title { font-size: 1.05rem; font-weight: 800; color: var(--clr-text); line-height: 1.25; margin-bottom: 3px; } .lib-detail-author { font-size: 0.8rem; color: var(--clr-text-2); margin-bottom: 6px; } .lib-detail-meta { font-size: 0.75rem; color: var(--clr-text-2); line-height: 1.6; } .lib-detail-body { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; } .lib-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .lib-detail-stat { background: var(--clr-surface-2); border-radius: 10px; padding: 10px; text-align: center; } .lib-detail-stat-val { font-size: 1.1rem; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; } .lib-detail-stat-lbl { font-size: 0.62rem; color: var(--clr-text-2); margin-top: 2px; } .lib-detail-divider { height: 1px; background: var(--clr-border); } .lib-detail-cover-update { display: flex; flex-direction: column; gap: 8px; } .lib-detail-cover-label { font-size: 0.78rem; font-weight: 600; color: var(--clr-text-2); } .lib-detail-cover-row { display: flex; gap: 8px; } .lib-detail-cover-input { flex: 1; background: var(--clr-surface-2); border: 1.5px solid var(--clr-border); border-radius: 10px; padding: 9px 12px; color: var(--clr-text); font-family: inherit; font-size: 0.82rem; transition: border-color var(--transition); } .lib-detail-cover-input:focus { outline: none; border-color: var(--clr-accent); } /* ── Book edit form cover section ──────────────────────────────────────────── */ .lib-form-cover-wrap { position: relative; display: inline-block; } .lib-form-cover-img { width: 88px; height: 128px; object-fit: cover; border-radius: 6px; display: block; } .lib-form-cover-remove { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .lib-form-cover-remove::after { content: ''; position: absolute; inset: -8px; } .lib-form-cover-empty { display: flex; align-items: center; gap: 8px; } .lib-form-cover-upload-btn { width: 110px; flex-shrink: 0; padding: 8px 0; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.85rem; font-family: inherit; cursor: pointer; text-align: center; } .lib-form-cover-url { flex: 1; min-width: 0; padding: 8px 10px; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.9rem; font-family: inherit; } .lib-form-cover-error { font-size: 0.8rem; color: var(--clr-error); margin-top: 4px; } .lib-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; } .lib-detail-btn { font-family: inherit; font-size: 0.78rem; font-weight: 600; padding: 8px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text); transition: background var(--transition), color var(--transition); } .lib-detail-btn:hover { background: var(--clr-surface); } .lib-detail-btn--accent { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); } .lib-detail-btn--accent:hover { opacity: 0.88; } .lib-detail-btn--danger { color: var(--clr-error); border-color: var(--clr-error); background: transparent; } .lib-detail-btn--danger:hover { background: var(--clr-error-bg); } .lib-detail-close-row { padding: 14px 20px 0; } .lib-detail-close-btn { font-family: inherit; font-size: 0.82rem; font-weight: 600; width: 100%; padding: 12px; border-radius: 12px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); color: var(--clr-text-2); cursor: pointer; } /* ── Detail sheet: reading log ───────────────────────────────────────────── */ .lib-detail-log-section { padding: 0; } .lib-detail-log-toggle { width: 100%; background: none; border: none; color: var(--clr-text-2); font-size: 0.85rem; text-align: left; padding: 6px 0; cursor: pointer; font-family: inherit; } .lib-detail-log-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .lib-detail-log-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--clr-text); padding: 4px 0; border-bottom: 1px solid var(--clr-border); } .lib-detail-log-row--past { color: var(--clr-text-2); } .lib-detail-log-row--empty { color: var(--clr-text-2); font-style: italic; border-bottom: none; } .lib-detail-log-date { color: var(--clr-text-2); min-width: 80px; } .lib-detail-log-dur { font-weight: 600; } .lib-detail-log-page { color: var(--clr-text-2); } .lib-detail-log-notes { width: 100%; color: var(--clr-text-2); font-style: italic; font-size: 0.78rem; } /* ── Detail sheet: status actions ────────────────────────────────────────── */ .lib-detail-status-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Detail sheet: reading history ──────────────────────────────────────── */ .lib-detail-history { margin-top: 4px; } .lib-detail-history-heading { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-text-2); margin-bottom: 8px; } .lib-detail-history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--clr-text); padding: 8px 0; border-bottom: 1px solid var(--clr-border); cursor: pointer; } .lib-detail-history-row:last-of-type { border-bottom: none; } .lib-detail-history-label { font-weight: 600; color: var(--clr-accent); min-width: 50px; } .lib-detail-history-range { color: var(--clr-text-2); font-size: 0.8rem; } .lib-detail-history-status { font-size: 0.78rem; color: var(--clr-text-2); background: var(--clr-surface-2); border-radius: 4px; padding: 1px 6px; } .lib-detail-history-meta { color: var(--clr-text-2); font-size: 0.8rem; } .lib-detail-history-chevron { margin-left: auto; color: var(--clr-text-2); font-size: 0.75rem; } .lib-detail-history-sessions-list { margin: 6px 0 10px 12px; display: flex; flex-direction: column; gap: 4px; } /* ── Health section (issue-based model) ──────────────────────────────────── */ /* Section group label */ .health-section { margin-bottom: 12px; } .health-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--clr-text-2); margin: 0 0 8px 2px; } /* Issue card */ .health-issue-card { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; transition: border-color var(--transition); } .health-issue-card--pending { border-left: 4px solid var(--clr-border); opacity: 0.85; } .health-issue-card--checked { border-left: 4px solid var(--clr-accent); } /* Card header row */ .health-issue-header { display: flex; align-items: center; gap: 10px; } .health-issue-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .health-issue-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .health-issue-name { font-size: 0.92rem; font-weight: 600; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .health-issue-cat { font-size: 0.76rem; color: var(--clr-text-2); } .health-issue-since { font-style: italic; color: var(--clr-text-2); } /* Severity badge */ .health-sev-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--sev-bg, var(--clr-surface-2)); color: var(--sev-clr, var(--clr-text)); flex-shrink: 0; white-space: nowrap; } .health-sev-label { font-weight: 400; font-size: 0.74rem; } .health-sev-badge--last { opacity: 0.75; font-size: 0.74rem; } /* Symptom chips (read-only display) */ .health-symp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .health-symp-chip { font-size: 0.74rem; padding: 2px 8px; background: var(--clr-surface-2); color: var(--clr-text-2); border-radius: 20px; border: 1px solid var(--clr-border); } /* Log note */ .health-log-note { font-size: 0.82rem; color: var(--clr-text-2); margin: 6px 0 0; font-style: italic; } /* Card action row */ .health-card-actions { display: flex; gap: 8px; margin-top: 10px; } .health-checkin-btn, .health-edit-btn, .health-resolve-btn, .health-delete-btn { font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .health-checkin-btn { background: var(--clr-accent); color: #fff; border: none; } .health-checkin-btn:hover { opacity: 0.88; } .health-edit-btn { background: transparent; color: var(--clr-text-2); border: 1.5px solid var(--clr-border); } .health-edit-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .health-resolve-btn { background: transparent; color: var(--clr-text-2); border: 1.5px solid var(--clr-border); margin-left: auto; } .health-resolve-btn:hover { color: var(--clr-accent); border-color: var(--clr-accent); } .health-delete-btn { background: transparent; color: var(--clr-text-2); border: 1.5px solid var(--clr-border); margin-left: auto; } .health-delete-btn:hover { color: var(--clr-error); border-color: var(--clr-error); } /* Add button — ghost variant (default) */ .health-add-btn { display: block; width: 100%; padding: 10px; margin-top: 4px; border: 1.5px dashed var(--clr-border); border-radius: 10px; background: transparent; color: var(--clr-text-2); font-size: 0.88rem; font-weight: 600; cursor: pointer; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition); } .health-add-btn:hover { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); } /* Add button — solid filled variant (e.g. "Log symptom") */ .health-add-btn--solid { background: var(--clr-accent); color: #fff; border: none; margin: 8px 16px; width: calc(100% - 32px); } .health-add-btn--solid:hover { background: var(--clr-accent); color: #fff; border-color: transparent; opacity: 0.88; } .health-add-btn--solid:active { opacity: 0.75; } /* ── Health forms ─────────────────────────────────────────────────────────── */ .health-form { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; } .health-form--checkin { border-left: 4px solid var(--clr-accent); } .health-form--edit { border-left: 4px solid var(--clr-text-2); } /* Form top row: title + cancel */ .health-form-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .health-form-title { font-size: 0.92rem; font-weight: 700; color: var(--clr-text); flex: 1; } .health-form-issue-label { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 0.92rem; font-weight: 700; color: var(--clr-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .health-cancel-btn { font-size: 0.78rem; padding: 4px 10px; border-radius: 7px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; flex-shrink: 0; } .health-cancel-btn:hover { color: var(--clr-text); background: var(--clr-surface-2); } /* Form field */ .health-form-field { margin-bottom: 12px; } .health-form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--clr-text-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .health-req { color: var(--clr-error); } .health-opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.76rem; } /* Text input */ .health-text-input { width: 100%; padding: 8px 10px; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.88rem; font-family: inherit; box-sizing: border-box; transition: border-color var(--transition); } .health-text-input:focus { outline: none; border-color: var(--clr-accent); } .health-text-input.input--error { border-color: var(--clr-error); } /* Category pills */ .health-form-cats { display: flex; flex-wrap: wrap; gap: 6px; } .health-form-cat { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .health-form-cat:hover:not(.health-form-cat--active) { background: var(--clr-surface-2); color: var(--clr-text); } .health-form-cat--active { background: var(--cat-color, var(--clr-accent)); color: #fff; border-color: var(--cat-color, var(--clr-accent)); } /* Symptom grid */ .health-symp-grid { display: flex; flex-wrap: wrap; gap: 6px; } .health-symp-btn { font-size: 0.78rem; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .health-symp-btn:hover:not(.health-symp-btn--active) { background: var(--clr-surface); color: var(--clr-text); border-color: var(--clr-text-2); } .health-symp-btn--active { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); font-weight: 600; } /* Severity buttons */ .health-form-sevs { display: flex; gap: 6px; flex-wrap: wrap; } .health-form-sev { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; padding: 6px 8px; border-radius: 8px; border: 1.5px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text-2); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .health-form-sev span { font-size: 0.62rem; font-weight: 400; } .health-form-sev:hover:not(.health-form-sev--active) { background: var(--sev-bg, var(--clr-surface)); color: var(--sev-clr, var(--clr-text)); border-color: var(--sev-clr, var(--clr-text-2)); } .health-form-sev--active { background: var(--sev-bg); color: var(--sev-clr); border-color: var(--sev-clr); } /* Ongoing checkbox row */ .health-ongoing-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; cursor: pointer; font-size: 0.85rem; color: var(--clr-text-2); } .health-ongoing-check { width: 16px; height: 16px; accent-color: var(--clr-accent); cursor: pointer; flex-shrink: 0; } /* Form action row */ .health-form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .health-form-actions--checkin { justify-content: space-between; } .health-save-btn { padding: 9px 20px; border-radius: 8px; border: none; background: var(--clr-accent); color: #fff; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background var(--transition); } .health-save-btn:hover { background: var(--clr-accent-h); } .health-save-keep { flex: 1; } .health-resolve-form-btn { padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .health-resolve-form-btn:hover { color: var(--clr-accent); border-color: var(--clr-accent); } /* ── Issue detail trigger (clickable header area on cards) ───────────────── */ .health-issue-detail-trigger { display: block; width: 100%; background: transparent; border: none; padding: 0; cursor: pointer; text-align: left; margin-bottom: 2px; } .health-issue-detail-trigger:hover .health-issue-name { color: var(--clr-accent); } .health-detail-chevron { flex-shrink: 0; color: var(--clr-text-2); opacity: 0.5; transition: opacity var(--transition); } .health-issue-detail-trigger:hover .health-detail-chevron { opacity: 1; } /* ── Detail view container ───────────────────────────────────────────────── */ .health-detail { } .health-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .health-detail-back { font-size: 0.82rem; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .health-detail-back:hover { background: var(--clr-surface-2); color: var(--clr-text); } .health-detail-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .health-detail-name { font-size: 1rem; font-weight: 700; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .health-detail-meta { font-size: 0.76rem; color: var(--clr-text-2); margin-top: 1px; } /* Edit issue button */ .health-detail-edit-btn { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 7px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; margin-bottom: 14px; transition: background var(--transition), color var(--transition); } .health-detail-edit-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } /* Edit form inside detail */ .health-detail-edit { background: var(--clr-surface-2); border: 1.5px solid var(--clr-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; } /* Detail category pills (same visual style as health-form-cat) */ .health-detail-cat { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .health-detail-cat:hover:not(.health-detail-cat--active) { background: var(--clr-surface); color: var(--clr-text); } .health-detail-cat--active { background: var(--cat-color, var(--clr-accent)); color: #fff; border-color: var(--cat-color, var(--clr-accent)); } /* Detail sections (chart, log history) */ .health-detail-section { margin-bottom: 18px; } /* Severity chart */ .health-chart-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 0 6px; -webkit-overflow-scrolling: touch; } .health-chart-svg { display: block; min-width: 100%; } /* Log history rows */ .health-detail-logs { display: flex; flex-direction: column; gap: 8px; } .health-detail-log-row { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 10px 12px; } .health-detail-log-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .health-detail-log-date { font-size: 0.82rem; font-weight: 600; color: var(--clr-text-2); flex: 1; } /* ── Issue detail history — grouped by day ───────────────────────────────── */ .symp-hist-day { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--clr-border); } .symp-hist-day:last-child { border-bottom: none; } .symp-hist-day-label { font-size: 0.8rem; font-weight: 600; color: var(--clr-text-2); min-width: 52px; padding-top: 4px; flex-shrink: 0; } .symp-hist-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .symp-hist-chip { display: flex; align-items: center; border: 1px solid var(--clr-border); border-radius: 8px; overflow: hidden; background: var(--clr-surface); } .symp-hist-chip-body { display: flex; align-items: center; gap: 5px; padding: 4px 8px; background: transparent; border: none; cursor: pointer; font-size: 0.8rem; color: var(--clr-text); transition: background var(--transition); } .symp-hist-chip-body:hover { background: var(--clr-surface-2); } .symp-hist-chip-cat { font-weight: 500; } .symp-hist-chip-time { font-size: 0.72rem; color: var(--clr-text-2); } .symp-hist-chip-del { padding: 4px 7px; border: none; border-left: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; font-size: 0.85rem; line-height: 1; transition: background var(--transition), color var(--transition); } .symp-hist-chip-del:hover { background: #ffebee; color: var(--clr-error); } /* ── Smart symptom grouping ──────────────────────────────────────────────── */ .health-symp-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-2); margin: 8px 0 5px; } .health-symp-group-label:first-child { margin-top: 0; } /* "From last time" pills get a subtle accent tint when unselected */ .health-symp-btn--prev:not(.health-symp-btn--active) { border-color: var(--clr-accent); color: var(--clr-accent); background: var(--clr-accent-dim); } /* ═══════════════════════════════════════════════════════════════════════════ Tab navigation — 3-tab layout (Today / Reports / Library) ═══════════════════════════════════════════════════════════════════════════ */ /* Keep #screen-app scrolling as before; tabs just toggle visibility. align-items: stretch so tabs fill full width (not center-collapsed). */ #screen-app { align-items: stretch; padding: 0; } /* Hidden tabs take up no space */ .tab-view { display: none; } /* Active tab: flex column (same as .app-main) */ .tab-view--active { display: flex; flex-direction: column; } /* Today tab inherits .app-main layout; bottom padding clears the bottom nav */ #tab-today { padding-bottom: max(80px, calc(65px + env(safe-area-inset-bottom))); } /* Library tab padding */ #tab-library { padding: 10px 20px; padding-bottom: max(80px, calc(65px + env(safe-area-inset-bottom))); } /* Reports tab: no top/side padding — period wrap and content handle their own */ #tab-reports { padding: 0; padding-bottom: max(80px, calc(65px + env(safe-area-inset-bottom))); } #reports-content { padding: 8px 16px 0; } /* ── Bottom navigation ───────────────────────────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: stretch; background: var(--clr-surface); border-top: 1px solid var(--clr-border); /* Safe-area bottom (iPhone home bar) */ padding-bottom: env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); } .bottom-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: none; color: var(--clr-text-2); font-size: 11px; font-weight: 500; padding: 6px 4px; transition: color var(--transition); } .bottom-nav-btn--active { color: var(--clr-accent); position: relative; } .bottom-nav-btn--active::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2.5px; background: var(--gradient-brand); border-radius: 0 0 3px 3px; } .bottom-nav-btn svg { width: 22px; height: 22px; } /* ═══════════════════════════════════════════════════════════════════════════ Reports tab ═══════════════════════════════════════════════════════════════════════════ */ /* Period selector: sticky wrapper (top set by JS = app-header height) */ #rpt-period-wrap { position: sticky; top: 0; z-index: 9; background: var(--clr-bg); padding: 0; border-bottom: none; } /* ── Reports hub header ──────────────────────────────────────────────────── */ .rpt-hub-header { display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top)) 20px 12px; background: var(--clr-bg); } .rpt-hub-title { font-family: var(--hub-font); font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--clr-text); margin: 0; } /* ── Period chips ────────────────────────────────────────────────────────── */ .rpt-chips-wrap { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; } .rpt-chip { font-family: var(--hub-font); font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text-2); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent; } .rpt-chip--active { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; } /* ── Summary stat row ────────────────────────────────────────────────────── */ .rpt-summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 16px; } .rpt-summary-stat { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; } .rpt-summary-stat__value { font-family: var(--hub-font); font-size: 18px; font-weight: 800; color: var(--clr-text); line-height: 1; } .rpt-summary-stat__label { font-size: 10px; color: var(--clr-text-2); text-align: center; line-height: 1.2; } /* ── Reports tile grid ───────────────────────────────────────────────────── */ .rpt-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; } .rpt-tile { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 14px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s; position: relative; } .rpt-tile:active { transform: scale(0.965); } .rpt-tile--wide { grid-column: 1 / -1; } .rpt-tile__bar { height: 5px; background: linear-gradient(90deg, var(--clr-accent), #F4A800); } .rpt-tile__inner { padding: 12px 14px 14px; } .rpt-tile__name { font-family: var(--hub-font); font-size: 13px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--clr-text-2); margin-bottom: 6px; } .rpt-tile__stats { display: flex; flex-direction: column; gap: 4px; } .rpt-tile__stat { display: flex; align-items: baseline; gap: 5px; } .rpt-tile__stat-value { font-family: var(--hub-font); font-size: 22px; font-weight: 800; color: var(--clr-text); line-height: 1; } .rpt-tile__stat-label { font-size: 11px; color: var(--clr-text-2); line-height: 1; } .rpt-tile__hint { font-size: 10px; color: var(--clr-text-2); opacity: 0.6; margin-top: 8px; } /* ── Reports panel (inline detail) ──────────────────────────────────────── */ .rpt-panel-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px; border-bottom: 1.5px solid var(--clr-border); } .rpt-panel-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-accent); cursor: pointer; flex-shrink: 0; font-size: 18px; line-height: 1; -webkit-tap-highlight-color: transparent; } .rpt-panel-title { font-family: var(--hub-font); font-size: 18px; font-weight: 800; color: var(--clr-text); flex: 1; } /* ── Insights tile and cards ─────────────────────────────────────────────── */ .rpt-insights-empty { text-align: center; padding: 24px 16px; color: var(--clr-text-2); font-size: 0.9rem; } .rpt-insights-empty-icon { font-size: 36px; display: block; margin-bottom: 8px; opacity: 0.4; } .rpt-insight-cards { display: flex; flex-direction: column; gap: 0; } .rpt-insight-card { padding: 14px 16px; border-bottom: 1.5px solid var(--clr-border); display: flex; flex-direction: column; gap: 3px; } .rpt-insight-card:last-child { border-bottom: none; } .rpt-insight-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .rpt-insight-card__icon { font-size: 18px; line-height: 1; } .rpt-insight-card__label { font-family: var(--hub-font); font-size: 13px; font-weight: 700; color: var(--clr-text); } .rpt-insight-card__value { font-size: 0.88rem; color: var(--clr-text); line-height: 1.4; } .rpt-insight-card__sub { font-size: 0.78rem; color: var(--clr-text-2); line-height: 1.3; } /* Tile preview for insights (wide tile summary) */ .rpt-tile--insights-preview { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 4px; } .rpt-tile--insights-preview-line { font-size: 11px; color: var(--clr-text-2); line-height: 1.4; } @media (max-width: 380px) { .rpt-summary-row { grid-template-columns: repeat(2, 1fr); } } .rpt-custom-picker[hidden] { display: none; } .rpt-custom-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 0 16px 12px; } .rpt-custom-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--clr-text-2); } .rpt-custom-label input[type="date"] { font-size: 13px; padding: 6px 8px; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text); } .rpt-custom-apply { font-family: var(--hub-font); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 20px; background: var(--clr-accent); color: #fff; border: none; cursor: pointer; } .rpt-custom-apply:active { opacity: 0.8; } /* Section cards */ .report-section { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 16px; overflow: hidden; margin: 0 16px 14px; } .report-section-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--clr-border); } .report-section-title { font-size: 0.95rem; font-weight: 700; color: var(--clr-text); display: flex; align-items: center; gap: 8px; } .report-section-body { padding: 12px 16px 16px; } /* ── Collapsible report sections ─────────────────────────────────────── */ .report-section-header--toggle { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; } .rpt-section-chevron { font-size: 0.7rem; color: var(--clr-text-2); transition: transform 0.2s ease; flex-shrink: 0; line-height: 1; } .rpt-section-chevron--closed { transform: rotate(-90deg); } .report-section--collapsed .report-section-header { border-bottom: none; } /* ── Health group: sub-sections ──────────────────────────────────────────── */ .report-section-group-body { /* transparent container — sub-sections provide their own dividers */ } .report-section.report-section--sub { border: none; border-top: 1px solid var(--clr-border); border-radius: 0; margin: 0; } /* Group header already has border-bottom; avoid doubling up on first sub */ .report-section-group-body > .report-section--sub:first-child { border-top: none; } .report-section.report-section--sub .report-section-header { padding: 10px 16px; } .report-section.report-section--sub .report-section-title { font-size: 0.88rem; font-weight: 600; } .report-section.report-section--sub.report-section--collapsed .report-section-header { border-bottom: none; } /* Section label */ .rpt-section-label { font-size: 0.78rem; color: var(--clr-text-2); margin-bottom: 6px; } /* ── Heatmap ─────────────────────────────────────────────────────────────── */ .rpt-heatmap { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 14px; } .rpt-heatmap-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); } .rpt-heatmap-cell--full { background: var(--clr-accent); border-color: var(--clr-accent); } .rpt-heatmap-cell--partial { background: #8bc34a; border-color: #8bc34a; } /* ── Habit completion bars ───────────────────────────────────────────────── */ .rpt-habit-bars { display: flex; flex-direction: column; } .rpt-habit-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--clr-border); } .rpt-habit-row:last-child { border-bottom: none; } .rpt-habit-name { font-size: 0.88rem; font-weight: 600; flex: 0 0 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rpt-bar-wrap { flex: 1; height: 8px; border-radius: 4px; background: var(--clr-surface-2); overflow: hidden; } .rpt-bar-fill { height: 100%; border-radius: 4px; background: var(--gradient-brand); transition: width 0.4s ease; } .rpt-pct-label { font-size: 0.8rem; font-weight: 600; color: var(--clr-text); min-width: 34px; text-align: right; } .rpt-streak-label { font-size: 0.75rem; color: var(--clr-text-2); min-width: 52px; text-align: right; } /* ── Stats grid (reading summary) ────────────────────────────────────────── */ .rpt-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .rpt-stats-grid--4col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 360px) { .rpt-stats-grid--4col { grid-template-columns: repeat(2, 1fr); } } .rpt-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: var(--clr-surface-2); border-radius: 10px; } .rpt-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--clr-accent); } .rpt-stat-label { font-size: 0.72rem; color: var(--clr-text-2); text-align: center; } /* ── Chart containers ────────────────────────────────────────────────────── */ .rpt-chart-wrap { width: 100%; height: 160px; position: relative; margin: 8px 0; } .rpt-chart-wrap canvas { width: 100% !important; height: 100% !important; } .rpt-chart-wrap--short { height: 120px; } .rpt-chart-wrap--tall { height: 200px; } /* ── Health issues ───────────────────────────────────────────────────────── */ .rpt-health-issue { padding: 12px 16px; border-bottom: 1px solid var(--clr-border); } .rpt-health-issue:last-child { border-bottom: none; } .rpt-issue-name { font-size: 0.9rem; font-weight: 600; color: var(--clr-text); display: flex; align-items: center; gap: 7px; } .rpt-resolved-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--clr-surface-2); color: var(--clr-text-2); border: 1px solid var(--clr-border); flex-shrink: 0; } .rpt-issue-meta { font-size: 0.78rem; color: var(--clr-text-2); display: flex; align-items: center; gap: 6px; margin: 3px 0 4px; } .rpt-issue-cat { background: var(--clr-accent-dim); color: var(--clr-accent); border-radius: 4px; padding: 1px 5px; font-size: 0.72rem; font-weight: 600; } /* ── Moderation stats ────────────────────────────────────────────────────── */ .rpt-mod-stats { margin-top: 6px; } .rpt-mod-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 0.85rem; border-bottom: 1px solid var(--clr-border); } .rpt-mod-stat-row:last-child { border-bottom: none; } .rpt-mod-name { font-weight: 600; color: var(--clr-text); } .rpt-mod-val { color: var(--clr-text-2); } /* ── Medications adherence ───────────────────────────────────────────────── */ .rpt-med-row { padding: 8px 0; border-bottom: 1px solid var(--clr-border); } .rpt-med-row:last-child { border-bottom: none; } .rpt-med-name { font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; } .rpt-med-dose { font-weight: 400; font-size: 0.82rem; color: var(--clr-text-2); } .rpt-med-adherence { display: flex; align-items: center; gap: 8px; } .rpt-adhere-pct { font-size: 0.82rem; font-weight: 600; min-width: 36px; } .rpt-adhere-detail { font-size: 0.78rem; color: var(--clr-text-2); } /* ── Reading book list ───────────────────────────────────────────────────── */ .rpt-books-in-period { margin-top: 8px; } .rpt-book-progress { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--clr-border); } .rpt-book-progress:last-child { border-bottom: none; } .rpt-book-cover { width: 28px; height: 40px; object-fit: cover; border-radius: 3px; flex-shrink: 0; } .rpt-book-info { flex: 1; } .rpt-book-title { font-size: 0.88rem; font-weight: 600; } .rpt-book-time { font-size: 0.78rem; color: var(--clr-text-2); } /* ── Empty state ─────────────────────────────────────────────────────────── */ .rpt-empty { text-align: center; padding: 18px 16px; color: var(--clr-text-2); font-size: 0.88rem; } /* ── Library tab: full-height panel without inline toggle ─────────────────── */ #tab-library-content { padding-bottom: 8px; } #tab-library-content .book-lib-header { position: sticky; top: 0; z-index: 5; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); } /* ── Mood & Energy ───────────────────────────────────────────────────────────── */ .mood-grid { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 6px; } .mood-row { display: flex; align-items: center; gap: 10px; } .mood-row__label { font-size: 0.85rem; font-weight: 600; color: var(--clr-text-2); width: 44px; flex-shrink: 0; } .mood-btns { display: flex; gap: 7px; flex: 1; } .mood-btn { width: 44px; height: 44px; border-radius: 4px; border: none; background: transparent; color: var(--clr-border); font-size: 1.5rem; font-weight: 400; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: color var(--transition); -webkit-tap-highlight-color: transparent; padding: 0; position: relative; line-height: 1; } .mood-btn--filled { color: var(--clr-accent); } .mood-btn--half { color: var(--clr-border); } .mood-btn--half::before { content: '★'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--clr-accent); clip-path: inset(0 50% 0 0); pointer-events: none; font-size: inherit; line-height: 1; } .mood-btn:active { opacity: 0.75; } .mood-row__value { font-size: 0.85rem; font-weight: 600; min-width: 60px; transition: color var(--transition); } /* ── Digestion / Bowel Tracker ──────────────────────────────────────────────── */ .bwl-list { padding: 4px 0 8px; } .bwl-row { border-bottom: 1px solid var(--clr-border); padding: 8px 16px; } .bwl-row:last-of-type { border-bottom: none; } .bwl-display { display: flex; align-items: center; gap: 10px; } .bwl-quality-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; background: var(--q-clr); color: #fff; font-size: 0.78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .bwl-meta { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .bwl-time { font-size: 0.8rem; color: var(--clr-text-2); flex-shrink: 0; } .bwl-note { font-size: 0.85rem; color: var(--clr-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bwl-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .bwl-edit-btn, .bwl-del-btn { padding: 3px 8px; border: 1px solid var(--clr-border); border-radius: 6px; background: transparent; color: var(--clr-text-2); font-size: 0.75rem; cursor: pointer; transition: background var(--transition), color var(--transition); } .bwl-edit-btn:hover, .bwl-del-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .bwl-add-btn { display: block; margin: 8px 16px 4px; padding: 6px 14px; border: 1px dashed var(--clr-accent); border-radius: 8px; background: transparent; color: var(--clr-accent); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background var(--transition); } .bwl-add-btn:hover { background: var(--clr-accent-dim); } /* ── Bowel form ── */ .bwl-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; } .bwl-form-quality-row { display: flex; gap: 6px; flex-wrap: wrap; } .bwl-quality-btn { flex: 1; min-width: 50px; padding: 6px 4px; border-radius: 16px; border: 2px solid var(--q-clr); background: transparent; color: var(--q-clr); font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); -webkit-tap-highlight-color: transparent; } .bwl-quality-btn--active { background: var(--q-clr); color: #fff; } .bwl-quality-btn--half { background: var(--q-clr); color: #fff; } .bwl-quality-btn:active { opacity: 0.75; } .bwl-form-fields { display: flex; gap: 8px; } .bwl-time-input { width: 110px; flex-shrink: 0; padding: 6px 8px; border: 1px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.85rem; font-family: inherit; } .bwl-notes-input { flex: 1; padding: 6px 10px; border: 1px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.85rem; font-family: inherit; } .bwl-time-input:focus, .bwl-notes-input:focus { outline: none; border-color: var(--clr-accent); } .bwl-time-input::placeholder, .bwl-notes-input::placeholder { color: var(--clr-text-2); } .bwl-form-actions { display: flex; justify-content: flex-end; gap: 8px; } .bwl-cancel-btn { padding: 7px 14px; border: 1px solid var(--clr-border); border-radius: 8px; background: transparent; color: var(--clr-text-2); font-size: 0.85rem; cursor: pointer; } .bwl-save-btn { padding: 7px 18px; border: none; border-radius: 8px; background: var(--clr-accent); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background var(--transition); } .bwl-save-btn:hover { background: var(--clr-accent-h); } /* ── Daily Note ──────────────────────────────────────────────────────────────── */ .note-wrap { padding: 6px 16px 12px; } .daily-note-area { width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid var(--clr-border); border-radius: 10px; background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.9rem; font-family: inherit; line-height: 1.5; resize: none; overflow: hidden; box-sizing: border-box; transition: border-color var(--transition); } .daily-note-area:focus { outline: none; border-color: var(--clr-accent); } .daily-note-area::placeholder { color: var(--clr-text-2); } /* ── Note Tags ───────────────────────────────────────────────────────────────── */ .note-tags-wrap { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; } .note-tag-pills { display: flex; flex-wrap: wrap; gap: 6px; } .note-tag { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 999px; color: var(--clr-text-2); cursor: pointer; font-size: 0.78rem; font-weight: 500; padding: 4px 12px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .note-tag:active { opacity: 0.75; } .note-tag--active { background: var(--clr-accent-dim); border-color: var(--clr-accent); color: var(--clr-accent); } .note-tag-add-row { display: flex; gap: 8px; } .note-tag-add-input { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-text); flex: 1; font-size: 0.85rem; padding: 5px 10px; } .note-tag-add-input:focus { border-color: var(--clr-accent); outline: none; } .note-tag-add-btn { background: var(--clr-accent); border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 0.82rem; font-weight: 600; padding: 5px 14px; white-space: nowrap; } .note-tag-add-btn:active { opacity: 0.8; } /* ── Conditions bar (weather + pollen, collapsible) ─────────────────────────── */ .conditions-bar { background: var(--clr-surface-2); border-bottom: 1px solid var(--clr-border); cursor: pointer; user-select: none; overflow: hidden; } .conditions-bar[hidden] { display: none; } .conditions-summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; flex-wrap: wrap; } .conditions-emoji { font-size: 1.1rem; line-height: 1; } .conditions-temp { font-size: 0.8rem; font-weight: 700; color: var(--clr-text); } .conditions-toggle { margin-left: auto; font-size: 0.75rem; color: var(--clr-text-2); flex-shrink: 0; } /* ── Expanded detail panel ───────────────────────────────────────────────────── */ .conditions-detail { padding: 0.5rem 1rem 0.6rem; border-top: 1px solid var(--clr-border); } .conditions-detail[hidden] { display: none; } .conditions-full-label { font-size: 0.8rem; font-weight: 600; color: var(--clr-text); margin-bottom: 0.5rem; } .conditions-metrics { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--clr-border); } .conditions-metric { display: flex; flex-direction: column; gap: 0.1rem; } .conditions-metric-val { font-size: 0.8rem; font-weight: 700; color: var(--clr-text); } .conditions-uv-label { font-style: normal; font-weight: 500; color: var(--clr-text-2); } .conditions-metric-label { font-size: 0.7rem; color: var(--clr-text-2); } .conditions-pollen { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem; } .pollen-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78rem; } .pollen-row-icon { font-size: 0.9rem; line-height: 1; flex-shrink: 0; } .pollen-species { color: var(--clr-text-2); } .pollen-species strong { font-weight: 600; } .conditions-no-pollen { font-size: 0.75rem; color: var(--clr-text-2); margin: 0.25rem 0 0; } /* ── Pollen level color modifiers ────────────────────────────────────────────── */ .pollen--low { color: var(--clr-text-2); } .pollen--moderate { color: #d4910b; } .pollen--high { color: #e05c00; } .pollen--very-high { color: var(--clr-error); } /* ── Pollen chips (collapsed summary row) ────────────────────────────────────── */ .pollen-chip { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 3px; line-height: 1.4; white-space: nowrap; } .pollen-chip.pollen--moderate { background: #fef3cd; color: #d4910b; } .pollen-chip.pollen--high { background: #ffe4cc; color: #e05c00; } .pollen-chip.pollen--very-high { background: #fde8e8; color: var(--clr-error); } @media (prefers-color-scheme: dark) { .pollen-chip.pollen--moderate { background: #3d2e08; color: #f0b429; } .pollen-chip.pollen--high { background: #3d1e08; color: #ff8c42; } .pollen-chip.pollen--very-high { background: #3d0808; color: var(--clr-error); } } /* ── AQI chips ───────────────────────────────────────────────────────────────── */ .aqi-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .aqi--good { background: #c8e6c9; color: #1b5e20; } .aqi--moderate { background: #fff9c4; color: #f57f17; } .aqi--sensitive { background: #ffe0b2; color: #e65100; } .aqi--unhealthy { background: #ffcccc; color: #b71c1c; } .aqi--very-unhealthy { background: #e1bee7; color: #4a148c; } .aqi--hazardous { background: #880e4f; color: #fff; } /* metric val — text color only, no background */ .aqi-metric-val.aqi--good { color: #2e7d32; } .aqi-metric-val.aqi--moderate { color: #f57f17; } .aqi-metric-val.aqi--sensitive { color: #e65100; } .aqi-metric-val.aqi--unhealthy { color: #b71c1c; } .aqi-metric-val.aqi--very-unhealthy { color: #6a1b9a; } .aqi-metric-val.aqi--hazardous { color: #880e4f; } @media (prefers-color-scheme: dark) { .aqi--good { background: #1b3a1e; color: #81c784; } .aqi--moderate { background: #3d3000; color: #ffd54f; } .aqi--sensitive { background: #3e1f00; color: #ffb74d; } .aqi--unhealthy { background: #3b0000; color: #ef9a9a; } .aqi--very-unhealthy { background: #2a0040; color: #ce93d8; } .aqi--hazardous { background: #560027; color: #f8bbd0; } .aqi-metric-val.aqi--good { color: #81c784; } .aqi-metric-val.aqi--moderate { color: #ffd54f; } .aqi-metric-val.aqi--sensitive { color: #ffb74d; } .aqi-metric-val.aqi--unhealthy { color: #ef9a9a; } .aqi-metric-val.aqi--very-unhealthy { color: #ce93d8; } .aqi-metric-val.aqi--hazardous { color: #f8bbd0; } } /* kept — reused for loading state */ .weather-emoji { font-size: 1.1rem; line-height: 1; } .weather-temp { font-size: 0.8rem; font-weight: 700; color: var(--clr-text); } .weather-fetching { font-size: 0.8rem; color: var(--clr-text-2); } /* ── Section collapse / expand ──────────────────────────────────────────────── */ .section-header { cursor: pointer; user-select: none; } .section-chevron { transition: transform 0.2s ease; flex-shrink: 0; color: var(--clr-text-2); } .tracker-section--collapsed .section-chevron { transform: rotate(-90deg); } .tracker-section--collapsed > *:not(.section-header) { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ Settings tab ═══════════════════════════════════════════════════════════════════════════ */ #tab-settings { padding-bottom: max(80px, calc(65px + env(safe-area-inset-bottom))); } /* Settings tab header */ .stg-tab-header { padding: 22px 20px 14px; padding-top: max(22px, env(safe-area-inset-top, 22px)); display: flex; align-items: center; justify-content: space-between; font-family: var(--hub-font); flex-shrink: 0; } .stg-tab-title { font-size: 28px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; font-family: var(--hub-font); line-height: 1; } .stg-version { font-size: 0.72rem; color: var(--clr-text-2); font-family: var(--hub-font); font-weight: 500; opacity: 0.7; margin-top: 3px; align-self: flex-end; } /* Settings content area */ #settings-content { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 0; } /* ── Section header (teal label + gradient rule) ─────────────────────────── */ .stg-section-header { display: flex; align-items: center; gap: 9px; margin: 22px 0 8px; } .stg-section-header:first-child { margin-top: 4px; } .stg-section-label { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-accent); white-space: nowrap; } .stg-section-rule { flex: 1; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, var(--clr-accent), #d4a017, transparent); opacity: 0.6; } /* ── Group block (cards share one border/radius container) ───────────────── */ .stg-group-block { border: 1px solid var(--clr-border); border-radius: 16px; overflow: hidden; } .stg-group-block .stg-card { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--clr-border); margin-bottom: 0; } .stg-group-block .stg-card:last-child { border-bottom: none; } .stg-group-block .stg-card::before { display: none; } /* Badge showing count (e.g. "5 active") on medications link card */ .stg-card-count { display: inline-block; font-size: 0.65rem; font-weight: 600; padding: 2px 7px; background: var(--clr-accent-dim); color: var(--clr-accent); border-radius: 10px; margin-right: 4px; } /* ── Card ──────────────────────────────────────────────────────────────────── */ .stg-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--hub-radius); overflow: hidden; } .stg-card::before { content: ''; display: block; height: 5px; flex-shrink: 0; background: linear-gradient(90deg, var(--hub-green) 0%, #82d4a8 50%, var(--hub-green) 100%); } .stg-card-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--clr-border); display: flex; align-items: center; gap: 8px; } .stg-card-title { flex: 1; font-size: 16px; font-weight: 800; color: var(--clr-text); font-family: var(--hub-font); letter-spacing: -0.1px; display: flex; align-items: center; gap: 7px; } /* ── Collapsible card toggle ─────────────────────────────────────────────── */ .stg-card-header--toggle { cursor: pointer; user-select: none; } .stg-card-chevron { font-size: 0.7rem; color: var(--clr-text-2); transition: transform 0.2s ease; flex-shrink: 0; line-height: 1; } .stg-card-chevron--open { transform: rotate(0deg); } .stg-card-chevron:not(.stg-card-chevron--open) { transform: rotate(-90deg); } .stg-card--collapsed .stg-card-header { border-bottom: none; } /* ── List (habits, substances) ───────────────────────────────────────────── */ .stg-list { padding: 2px 0; } .stg-item-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--clr-border); } .stg-item-row:last-child { border-bottom: none; } /* ── Habit wrap (name row + freq row together) ───────────────────────────── */ .stg-habit-wrap { border-bottom: 1px solid var(--clr-border); } .stg-habit-wrap:last-child { border-bottom: none; } .stg-habit-wrap .stg-item-row { border-bottom: none; padding-bottom: 4px; } /* ── Habit frequency + reminder config row ───────────────────────────────── */ .habit-freq-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; } .habit-freq-select { font-size: 0.78rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text); cursor: pointer; } .habit-freq-count, .habit-freq-days { width: 52px; font-size: 0.78rem; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text); text-align: center; } .habit-freq-label, .habit-freq-sep { font-size: 0.78rem; color: var(--clr-text-2); } .habit-reminder-toggle { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--clr-text-2); cursor: pointer; margin-left: auto; } .habit-reminder-toggle input[type="checkbox"] { accent-color: var(--clr-accent); cursor: pointer; } .habit-emoji-label { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--clr-text-2); margin-left: 8px; } .habit-emoji-input { width: 42px; text-align: center; font-size: 1rem; border: 1px solid var(--clr-border); border-radius: 6px; padding: 2px 4px; background: var(--clr-surface); color: var(--clr-text); } .stg-item-name { flex: 1; font-size: 0.9rem; color: var(--clr-text); font-weight: 500; } .stg-item-info { flex: 1; display: flex; flex-direction: column; gap: 1px; } .stg-item-meta { font-size: 0.75rem; color: var(--clr-text-2); } .stg-row-actions { display: flex; gap: 3px; align-items: center; flex-shrink: 0; } /* ── Icon buttons (up/down/delete) ───────────────────────────────────────── */ .stg-icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--clr-text-2); cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .stg-icon-btn:hover:not(:disabled) { background: var(--clr-surface-2); color: var(--clr-text); } .stg-icon-btn:disabled { opacity: 0.28; cursor: default; } .stg-icon-btn--danger:hover:not(:disabled) { background: var(--clr-error-bg); color: var(--clr-error); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stg-icon-btn--danger:hover:not(:disabled) { background: #3b1a1a; } } :root[data-theme="dark"] .stg-icon-btn--danger:hover:not(:disabled) { background: #3b1a1a; } /* ── Add row ─────────────────────────────────────────────────────────────── */ .stg-add-row { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--clr-border); flex-wrap: wrap; } .stg-text-input { flex: 1; min-width: 80px; padding: 7px 10px; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.88rem; font-family: inherit; transition: border-color var(--transition); } .stg-text-input:focus { outline: none; border-color: var(--clr-accent); } .stg-text-input::placeholder { color: var(--clr-text-2); } /* Shorter unit field in substance add row */ .stg-text-input--short { flex: 0 0 100px; min-width: 70px; } .stg-add-btn { padding: 7px 14px; border-radius: 8px; border: none; background: var(--clr-accent); color: #fff; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background var(--transition); } .stg-add-btn:hover { background: var(--clr-accent-h); } /* ── Category tags ───────────────────────────────────────────────────────── */ .stg-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px 10px; min-height: 48px; } .stg-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 11px; background: var(--clr-accent-dim); color: var(--clr-accent); border: 1.5px solid var(--clr-accent); border-radius: 999px; font-size: 0.82rem; font-weight: 600; } .stg-tag-remove { font-size: 1rem; line-height: 1; color: var(--clr-accent); padding: 0 1px; cursor: pointer; background: transparent; border: none; transition: color var(--transition); -webkit-tap-highlight-color: transparent; } .stg-tag-remove:hover { color: var(--clr-error); } /* ── Category section headings (symptom vs issue split) ─────────────────── */ .stg-cat-section { border-top: 1px solid var(--clr-border); } .stg-cat-section:first-of-type { border-top: none; } .stg-cat-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-2); padding: 10px 16px 4px; margin: 0; } /* ── Category manager section headings (in symptoms panel) ───────────────── */ .symp-cat-section { border-top: 1px solid var(--clr-border); padding-top: 6px; margin-top: 4px; } .symp-cat-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } .symp-cat-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-2); padding: 4px 12px 2px; margin: 0; } /* ── Preference rows (theme / temperature) ───────────────────────────────── */ .stg-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--clr-border); } .stg-pref-row:last-child { border-bottom: none; } .stg-pref-label { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); flex-shrink: 0; } .stg-group-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-2); margin: 12px 0 2px; } .stg-group-label:first-child { margin-top: 2px; } .stg-toggle-group { display: flex; gap: 4px; } .stg-toggle-btn { padding: 5px 11px; border-radius: 7px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .stg-toggle-btn:hover:not(.stg-toggle-btn--active) { background: var(--clr-surface-2); color: var(--clr-text); } .stg-toggle-btn--active { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); } /* ── Action rows (PIN / sign-out) ────────────────────────────────────────── */ .stg-action-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--clr-border); } .stg-action-row:last-child { border-bottom: none; } .stg-action-info { flex: 1; } .stg-action-title { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); } .stg-action-desc { font-size: 0.76rem; color: var(--clr-text-2); margin-top: 2px; } .stg-action-btn { padding: 7px 14px; border-radius: 8px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text); font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background var(--transition), color var(--transition), border-color var(--transition); } .stg-action-btn:hover { background: var(--clr-surface-2); } .stg-action-btn--danger { color: var(--clr-error); border-color: var(--clr-error); } .stg-action-btn--danger:hover { background: var(--clr-error-bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stg-action-btn--danger:hover { background: #3b1a1a; } } :root[data-theme="dark"] .stg-action-btn--danger:hover { background: #3b1a1a; } /* ── Empty state inside cards ────────────────────────────────────────────── */ .stg-empty { padding: 10px 16px; font-size: 0.85rem; color: var(--clr-text-2); font-style: italic; } /* ── Settings: Fitbit card ───────────────────────────────────────────────── */ .stg-fitbit-status { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 4px; } .stg-fitbit-synced { font-size: 0.85rem; color: var(--clr-text); } .stg-fitbit-fields { font-size: 0.78rem; color: var(--clr-text-2); } .stg-fitbit-error { display: flex; align-items: center; gap: 12px; padding: 10px 0 4px; flex-wrap: wrap; } .stg-fitbit-error-msg { font-size: 0.85rem; color: var(--clr-error); flex: 1; } /* ═══════════════════════════════════════════════════════════════════════════ Today progress ring (#today-ring-bar) ═══════════════════════════════════════════════════════════════════════════ */ .today-ring-bar { display: flex; align-items: center; gap: 16px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 14px 20px; } .ring-svg { flex-shrink: 0; /* Rotate so progress starts from top (12 o'clock) */ transform: rotate(-90deg); } .ring-track { fill: none; stroke: var(--clr-border); stroke-width: 6; } .ring-progress { fill: none; stroke: var(--clr-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; /* starts at 0% */ transition: stroke-dashoffset 0.4s ease; } .ring-text { display: flex; flex-direction: column; gap: 2px; } .ring-count { font-size: 1.5rem; font-weight: 700; color: var(--clr-text); line-height: 1; } .ring-label { font-size: 0.85rem; color: var(--clr-text-2); } /* ── Gratitudes section ──────────────────────────────────────────────────── */ .grat-list { display: flex; flex-direction: column; gap: 6px; padding: 0 0 4px 8px; } .grat-item { display: flex; align-items: flex-start; gap: 8px; } .grat-bullet { color: var(--clr-accent); font-size: 1.1rem; line-height: 1; flex-shrink: 0; margin-top: 5px; } .grat-input { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--clr-border); color: var(--clr-text); font-family: inherit; font-size: 0.9rem; line-height: 1.5; padding: 4px 2px; outline: none; transition: border-color var(--transition); resize: none; overflow: hidden; min-height: 1.5em; box-sizing: border-box; display: block; width: 100%; } .grat-input:focus { border-bottom-color: var(--clr-accent); } .grat-input::placeholder { color: var(--clr-text-2); } .grat-delete-btn { background: transparent; border: none; color: var(--clr-text-2); font-size: 1.1rem; line-height: 1; padding: 0 2px; cursor: pointer; flex-shrink: 0; margin-top: 4px; opacity: 0.45; transition: color var(--transition), opacity var(--transition); } .grat-delete-btn:hover { color: var(--clr-error); opacity: 1; } /* ── App header gear button ──────────────────────────────────────────────── */ .app-header__gear-btn { margin-left: auto; background: transparent; border: none; color: var(--clr-text-2); padding: 6px; border-radius: 6px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: color var(--transition), background var(--transition); } .app-header__gear-btn:hover { color: var(--clr-text); background: var(--clr-surface-2); } /* ── Health Log tab ──────────────────────────────────────────────────────── */ .hl-tab-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; border-bottom: 1px solid var(--clr-border); margin-bottom: 12px; } .hl-tab-title { font-size: 1.1rem; font-weight: 700; color: var(--clr-text); margin: 0; } .hl-group-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-2); padding: 0 16px; margin: 16px 0 6px; } .hl-issue-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--clr-border); transition: background var(--transition); } .hl-issue-row:hover { background: var(--clr-surface-2); } .hl-issue-row:last-child { border-bottom: none; } .hl-cat-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; background: var(--clr-accent-dim); color: var(--clr-accent); border-radius: 4px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; } .hl-issue-title { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--clr-text); } .hl-issue-meta { font-size: 0.75rem; color: var(--clr-text-2); text-align: right; flex-shrink: 0; } .hl-empty { padding: 32px 16px; text-align: center; color: var(--clr-text-2); font-size: 0.88rem; } .hl-detail { padding-bottom: 32px; } .hl-detail-back { display: flex; align-items: center; gap: 6px; padding: 12px 16px 8px; font-size: 0.85rem; font-weight: 600; color: var(--clr-accent); background: transparent; border: none; cursor: pointer; } .hl-detail-back:hover { opacity: 0.8; } .hl-detail-header { padding: 0 16px 12px; border-bottom: 1px solid var(--clr-border); } .hl-detail-title { font-size: 1.1rem; font-weight: 700; color: var(--clr-text); margin: 0 0 4px; } .hl-detail-sub { font-size: 0.8rem; color: var(--clr-text-2); margin-top: 2px; } .hl-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; } .hl-detail-actions button { font-size: 0.82rem; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition); } .hl-detail-actions button:hover { background: var(--clr-surface-2); color: var(--clr-text); } .hl-resolve-btn { color: var(--clr-accent) !important; border-color: var(--clr-accent) !important; } .hl-resolve-btn:hover { background: var(--clr-accent-dim) !important; } .hl-delete-btn:hover { color: var(--clr-error) !important; border-color: var(--clr-error) !important; } .hl-resolve-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; } .hl-resolve-date-input { font-family: inherit; font-size: 0.85rem; padding: 6px 8px; border: 1px solid var(--clr-border); border-radius: 6px; background: var(--clr-surface); color: var(--clr-text); } .hl-resolve-confirm-btn { font-size: 0.82rem; padding: 6px 12px; border-radius: 6px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; } .hl-resolve-cancel-btn { font-size: 0.82rem; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; } .hl-edit-form { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 10px; } .hl-edit-label { font-size: 0.78rem; font-weight: 600; color: var(--clr-text-2); display: block; margin-bottom: 3px; } .hl-edit-input, .hl-edit-select { width: 100%; font-family: inherit; font-size: 0.88rem; padding: 7px 10px; border: 1px solid var(--clr-border); border-radius: 6px; background: var(--clr-surface); color: var(--clr-text); box-sizing: border-box; } .hl-edit-actions { display: flex; gap: 8px; margin-top: 2px; } .hl-edit-save-btn { font-size: 0.82rem; padding: 6px 12px; border-radius: 6px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; } .hl-edit-cancel-btn { font-size: 0.82rem; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; } .hl-history-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-2); padding: 12px 16px 6px; border-top: 1px solid var(--clr-border); } .hl-symptom-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--clr-border); } .hl-symptom-row:last-child { border-bottom: none; } .hl-sev-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .hl-symptom-body { flex: 1; } .hl-symptom-date { font-size: 0.75rem; color: var(--clr-text-2); margin-bottom: 2px; } .hl-symptom-desc { font-size: 0.88rem; color: var(--clr-text); line-height: 1.4; } .hl-symptom-sev-label { font-size: 0.72rem; color: var(--clr-text-2); margin-top: 2px; } .hl-no-history { padding: 16px; color: var(--clr-text-2); font-size: 0.85rem; font-style: italic; } /* ── Health Log: shared section chrome ───────────────────────────────────── */ .hl-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hl-section-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-text-2); } .hl-section-add-btn { font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--clr-accent); background: transparent; color: var(--clr-accent); cursor: pointer; transition: background var(--transition), color var(--transition); } .hl-section-add-btn:hover { background: var(--clr-accent-dim); } /* Collapsible section toggle */ .hl-section-header--toggle { cursor: pointer; user-select: none; } .hl-section-header-right { display: flex; align-items: center; gap: 8px; } .hl-section-chevron { font-size: 0.7rem; color: var(--clr-text-2); transition: transform 0.2s ease; flex-shrink: 0; line-height: 1; } .hl-section--collapsed .hl-section-chevron { transform: rotate(-90deg); } .hl-section-icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition); } .hl-section-icon-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .hl-bp-section, .hl-dig-section, .hl-meds-section, .hl-issues-section { padding: 16px 16px 20px; border-bottom: 1px solid var(--clr-border); } .hl-issues-section { border-bottom: none; padding-bottom: 32px; } /* ── Health Log: Blood Pressure ──────────────────────────────────────────── */ .hl-bp-form { display: flex; flex-direction: column; gap: 10px; background: var(--clr-surface-2); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .hl-bp-form-row { display: flex; gap: 10px; flex-wrap: wrap; } .hl-bp-form-field { flex: 1; min-width: 100px; } .hl-bp-list {} .hl-bp-entry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--clr-border); } .hl-bp-entry:last-child { border-bottom: none; } .hl-bp-date { font-size: 0.82rem; color: var(--clr-text-2); white-space: nowrap; } .hl-bp-time { font-size: 0.8rem; color: var(--clr-text-2); white-space: nowrap; } .hl-bp-reading { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--clr-text); } .hl-bp-pulse { font-size: 0.82rem; color: var(--clr-text-2); } .hl-bp-notes { font-size: 0.82rem; color: var(--clr-text-2); flex: 1; } .hl-bp-ctx-badge { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; color: var(--ctx-clr); border: 1px solid var(--ctx-clr); white-space: nowrap; } .hl-bp-actions { display: flex; gap: 6px; margin-left: auto; } .hl-bp-edit-btn, .hl-bp-del-btn { font-size: 0.75rem; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .hl-bp-edit-btn:hover { color: var(--clr-text); background: var(--clr-surface-2); border-color: var(--clr-text-2); } .hl-bp-del-btn:hover { color: var(--clr-error); border-color: var(--clr-error); } /* ── Health Log: Digestion ───────────────────────────────────────────────── */ .hl-dig-summary { font-size: 0.82rem; color: var(--clr-text-2); margin-bottom: 10px; } .hl-dig-list { max-height: 185px; overflow-y: auto; scrollbar-width: thin; } .hl-dig-entry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--clr-border); } .hl-dig-entry:last-child { border-bottom: none; } .hl-dig-date { font-size: 0.82rem; color: var(--clr-text-2); white-space: nowrap; } .hl-dig-time { font-size: 0.8rem; color: var(--clr-text-2); white-space: nowrap; } .hl-dig-notes { font-size: 0.82rem; color: var(--clr-text-2); flex: 1; } .hl-dig-quality-chip { font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 20px; background: color-mix(in srgb, var(--q-clr) 15%, transparent); color: var(--q-clr); white-space: nowrap; } /* ── Health Log: Medications ─────────────────────────────────────────── */ .hl-med-dose-list { max-height: 220px; overflow-y: auto; } .hl-med-dose-entry { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; padding: 7px 0; border-bottom: 1px solid var(--clr-border); } .hl-med-dose-entry:last-child { border-bottom: none; } .hl-med-dose-name { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); display: flex; align-items: center; gap: 6px; } .hl-med-dose-chip { font-size: 0.72rem; font-weight: 500; padding: 2px 7px; border-radius: 10px; background: var(--clr-accent-dim); color: var(--clr-accent); } .hl-med-dose-when { font-size: 0.78rem; color: var(--clr-text-2); white-space: nowrap; } /* ── Vitals section ─────────────────────────────────────────────────────── */ /* Stats row */ .vitals-stats-row { display: flex; justify-content: space-around; padding: 12px 16px 8px; border-bottom: 1px solid var(--clr-border); margin-bottom: 4px; } .vitals-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; } .vitals-stat__ico { font-size: 18px; } .vitals-stat__val { font-size: 16px; font-weight: 700; color: var(--clr-text); line-height: 1.2; } .vitals-stat__lbl { font-size: 10px; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.04em; } /* Vitals bar rows */ .vitals-row { display: flex; align-items: center; gap: 12px; padding: 6px 16px; } .vitals-row + .vitals-row { padding-top: 2px; } .vitals-label { font-size: 0.7rem; font-weight: 700; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.05em; min-width: 36px; } .vitals-sleep-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .vitals-sleep-val { font-size: 0.9rem; font-weight: 700; color: var(--clr-accent); } .vitals-sleep-eff { font-size: 0.75rem; font-weight: 600; padding: 2px 6px; border-radius: 10px; } .vitals-sleep-eff--good { background: #e8f5e9; color: #2e7d32; } .vitals-sleep-eff--ok { background: #fff8e1; color: #f57f17; } .vitals-sleep-eff--low { background: #ffebee; color: #c62828; } @media (prefers-color-scheme: dark) { .vitals-sleep-eff--good { background: #1b3a1d; color: #81c784; } .vitals-sleep-eff--ok { background: #3e2723; color: #ffcc02; } .vitals-sleep-eff--low { background: #3e0000; color: #ef9a9a; } } .vitals-sleep-stages { display: flex; height: 6px; border-radius: 3px; overflow: hidden; width: 80px; background: var(--clr-border); } .vitals-sleep-seg--deep { background: #5c6bc0; } .vitals-sleep-seg--rem { background: #26a69a; } .vitals-sleep-seg--light { background: #78909c; } .vitals-sleep-seg--awake { background: #ef9a9a; } .vitals-sleep-stages-label { font-size: 0.72rem; color: var(--clr-text-2); } .vitals-chips-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .vitals-chip { font-size: 0.78rem; padding: 3px 9px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; color: var(--clr-text); } /* ── Symptom redesign: issues toggle button ──────────────────────────────── */ .symp-issues-toggle-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--clr-text-2); cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .symp-issues-toggle-btn:hover, .symp-issues-toggle-btn[aria-expanded="true"] { background: var(--clr-accent-dim); color: var(--clr-accent); } /* ── Issues management panel ─────────────────────────────────────────────── */ .symp-issues-panel { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .symp-issues-panel[hidden] { display: none !important; } .symp-issues-panel-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--clr-text); } /* Issue list row */ .symp-issue-list { display: flex; flex-direction: column; gap: 4px; } .symp-issue-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; } .symp-issue-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .symp-issue-row-name { font-size: 0.88rem; font-weight: 600; color: var(--clr-accent); background: transparent; border: none; padding: 0; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .symp-issue-row-name:hover { text-decoration: underline; } .symp-issue-row-cat { font-size: 0.74rem; color: var(--clr-text-2); } /* Remind-daily toggle */ .symp-remind-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; } .symp-remind-label { font-size: 0.74rem; color: var(--clr-text-2); } .symp-resolve-btn { font-size: 0.75rem; font-weight: 600; color: var(--clr-text-2); background: transparent; border: 1px solid var(--clr-border); border-radius: 6px; padding: 3px 8px; cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .symp-resolve-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .symp-resolved-tag { font-size: 0.72rem; color: var(--clr-text-2); font-style: italic; flex-shrink: 0; } .symp-iss-edit-btn, .symp-iss-del-btn { font-size: 0.72rem; font-weight: 600; background: transparent; border: 1px solid var(--clr-border); border-radius: 5px; padding: 2px 8px; cursor: pointer; flex-shrink: 0; transition: background var(--transition), color var(--transition); } .symp-iss-edit-btn { color: var(--clr-text-2); } .symp-iss-edit-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .symp-iss-del-btn { color: var(--clr-text-2); } .symp-iss-del-btn:hover { background: #ffebee; color: var(--clr-error); border-color: var(--clr-error); } .symp-issue-row--editing { flex-direction: column; align-items: stretch; } .symp-iss-edit-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; } .symp-new-issue-btn { margin-top: 4px; } /* ── Remind-daily prompt cards ───────────────────────────────────────────── */ .symp-prompt-card { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; } .symp-prompt-card--pending { border-left: 4px solid var(--clr-border); opacity: 0.9; } .symp-prompt-card--logged { border-left: 4px solid var(--clr-accent); } .symp-prompt-header { display: flex; align-items: center; gap: 10px; } .symp-prompt-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .symp-prompt-name { font-size: 0.9rem; font-weight: 600; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .symp-prompt-cat { font-size: 0.75rem; color: var(--clr-text-2); } .symp-prompt-desc { font-size: 0.82rem; color: var(--clr-text-2); margin-top: 5px; } .symp-prompt-log-btn { font-size: 0.8rem; font-weight: 600; color: var(--clr-accent); background: var(--clr-accent-dim); border: none; border-radius: 8px; padding: 5px 12px; cursor: pointer; margin-top: 8px; transition: opacity var(--transition); display: inline-block; } .symp-prompt-log-btn:hover { opacity: 0.82; } .symp-prompt-logged-actions { display: flex; gap: 8px; margin-top: 8px; } .symp-prompt-view-btn { font-size: 0.8rem; font-weight: 600; color: var(--clr-text-2); background: transparent; border: 1px solid var(--clr-border); border-radius: 6px; padding: 4px 12px; cursor: pointer; transition: background var(--transition), color var(--transition); } .symp-prompt-view-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .symp-prompt-add-btn { font-size: 0.9rem; font-weight: 700; color: var(--clr-accent); background: var(--clr-accent-dim); border: none; border-radius: 6px; padding: 4px 12px; cursor: pointer; transition: opacity var(--transition); } .symp-prompt-add-btn:hover { opacity: 0.82; } /* Symptom chips on Daily Check-in cards */ .symp-prompt-symptom-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .symp-prompt-symptom-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--clr-border); border-radius: 20px; background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.8rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .symp-prompt-symptom-chip:hover { background: var(--clr-accent-dim); border-color: var(--clr-accent); } /* ── Symptom card extras ─────────────────────────────────────────────────── */ .symp-card-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Issue link badge on symptom card */ .symp-issue-badge-row { margin-top: 6px; } .symp-issue-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 500; color: var(--badge-color, var(--clr-text-2)); background: transparent; border: 1.5px solid var(--badge-color, var(--clr-border)); border-radius: 999px; padding: 2px 9px; } /* Time badge on symptom card */ .symp-time-badge { font-size: 0.74rem; color: var(--clr-text-2); flex-shrink: 0; } /* Issue link dropdown row (dropdown + "+ New" button) */ .symp-issue-link-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .symp-issue-select { flex: 1 1 0; padding: 7px 10px; border: 1.5px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text); font-size: 0.88rem; cursor: pointer; appearance: auto; } .symp-new-issue-quick-btn { flex-shrink: 0; padding: 6px 10px; background: var(--clr-accent-dim); color: var(--clr-accent); border: 1.5px solid var(--clr-accent); border-radius: 8px; font-size: 0.80rem; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .symp-new-issue-quick-btn:active { opacity: 0.75; } /* "+ New Issue" button in health log Issues section header */ .hl-add-issue-btn { padding: 4px 10px; background: var(--clr-accent-dim); color: var(--clr-accent); border: 1.5px solid var(--clr-accent); border-radius: 6px; font-size: 0.78rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hl-add-issue-btn:active { opacity: 0.75; } /* ── Issues full-screen view ────────────────────────────────────────── */ .view-issues { position: fixed; inset: 0; z-index: 200; background: var(--clr-bg); display: flex; flex-direction: column; overflow: hidden; } .view-issues[hidden] { display: none !important; } .view-issues-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--clr-border); background: var(--clr-surface); flex-shrink: 0; } .view-issues-back-btn { display: flex; align-items: center; gap: 4px; font-size: 0.88rem; font-weight: 600; color: var(--clr-accent); background: transparent; border: none; cursor: pointer; padding: 4px 0; -webkit-tap-highlight-color: transparent; } .view-issues-title { font-size: 1rem; font-weight: 700; color: var(--clr-text); } .view-issues-content { flex: 1 1 0; overflow-y: auto; padding: 12px 0; } .symp-link-form { background: var(--clr-surface-2) !important; } /* Textarea for description */ .symp-desc-input { resize: vertical; min-height: 52px; width: 100%; box-sizing: border-box; } .symp-time-input { max-width: 140px; } /* Quick-add symptom row */ .symp-quick-add-row { display: flex; gap: 8px; margin: 4px 16px 0; align-items: center; } .symp-quick-input { flex: 1 1 0; padding: 9px 12px; border: 1.5px solid var(--clr-border); border-radius: 10px; background: var(--clr-surface); color: var(--clr-text); font-size: 0.88rem; font-family: inherit; } .symp-quick-input:focus { outline: none; border-color: var(--clr-accent); } .symp-quick-add-btn { flex-shrink: 0; padding: 9px 16px; background: var(--clr-accent); color: #fff; border: none; border-radius: 10px; font-size: 0.88rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; } .symp-quick-add-btn:active { opacity: 0.8; } .symp-detailed-btn { margin-top: 6px; font-size: 0.80rem; opacity: 0.75; } /* ── Issue detail view extras ────────────────────────────────────────────── */ .symp-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); margin: 10px 0; } .symp-detail-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .symp-detail-stat-val { font-size: 0.92rem; font-weight: 700; color: var(--clr-text); } .symp-detail-stat-lbl { font-size: 0.7rem; color: var(--clr-text-2); text-align: center; } /* ── Find related symptoms ───────────────────────────────────────────────── */ .symp-find-related { margin-top: 10px; } .symp-find-related-hint { font-size: 0.8rem; color: var(--clr-text-2); margin: 0 0 8px; font-style: italic; } .symp-find-related-list { display: flex; flex-direction: column; gap: 6px; } .symp-find-related-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; } .symp-find-related-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .symp-find-related-desc { font-size: 0.8rem; color: var(--clr-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .symp-assign-btn { font-size: 0.75rem; font-weight: 600; color: var(--clr-accent); background: var(--clr-accent-dim); border: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; flex-shrink: 0; transition: opacity var(--transition); } .symp-assign-btn:hover { opacity: 0.82; } /* ═══════════════════════════════════════════════════════════════════════ PRN (As-Needed) Medications ═══════════════════════════════════════════════════════════════════════ */ /* ── Sub-section label inside Health ──────────────────────────────── */ .prn-sublabel { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-2); padding: 12px 0 6px; border-top: 1px solid var(--clr-border); margin-top: 10px; } /* ── Dose card ─────────────────────────────────────────────────────── */ .prn-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: var(--clr-surface-2); margin-bottom: 6px; transition: background 0.2s; } .prn-card--cooling { background: rgba(255, 160, 0, 0.12); } .prn-card__info { flex: 1; min-width: 0; } .prn-card__name { font-size: 0.93rem; font-weight: 600; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prn-card__meta { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 2px; } .prn-card__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .prn-card__countdown { font-size: 0.82rem; font-weight: 600; color: #f59e0b; white-space: nowrap; } .prn-card__count { font-size: 0.78rem; color: var(--clr-text-2); white-space: nowrap; } .prn-card__del { background: none; border: none; cursor: pointer; color: var(--clr-text-2); padding: 2px 4px; border-radius: 4px; line-height: 1; opacity: 0.6; transition: opacity 0.15s; } .prn-card__del:hover { opacity: 1; color: var(--clr-error); } /* ── Log form ──────────────────────────────────────────────────────── */ .prn-log-form { background: var(--clr-surface-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; } .prn-log-form__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .prn-log-form__label { font-size: 0.8rem; color: var(--clr-text-2); min-width: 36px; } .prn-log-form__select { flex: 1; min-width: 120px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 6px; color: var(--clr-text); padding: 5px 8px; font-size: 0.88rem; font-family: inherit; } .prn-dose-chips { display: flex; flex-wrap: wrap; gap: 6px; } .prn-dose-chip { padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text-2); font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .prn-dose-chip--active { border-color: var(--clr-accent); color: var(--clr-accent); background: var(--clr-accent-dim); } .prn-log-form__note { width: 100%; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 6px; color: var(--clr-text); padding: 5px 8px; font-size: 0.88rem; font-family: inherit; resize: none; box-sizing: border-box; } .prn-log-form__note:focus { outline: none; border-color: var(--clr-accent); } .prn-log-form__warning { font-size: 0.78rem; color: #f59e0b; margin-bottom: 6px; } .prn-log-form__actions { display: flex; justify-content: flex-end; gap: 8px; } .prn-log-btn { padding: 6px 16px; border-radius: 6px; border: none; background: var(--clr-accent); color: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; } .prn-log-btn:disabled { opacity: 0.4; cursor: default; } .prn-cancel-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); font-size: 0.88rem; cursor: pointer; font-family: inherit; } /* ── Add dose button ───────────────────────────────────────────────── */ .prn-add-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1.5px dashed var(--clr-border); background: transparent; color: var(--clr-text-2); font-size: 0.88rem; cursor: pointer; font-family: inherit; margin-top: 4px; transition: border-color 0.15s, color 0.15s; } .prn-add-btn:hover { border-color: var(--clr-accent); color: var(--clr-accent); } /* ── Settings — PRN med list ───────────────────────────────────────── */ .prn-stg-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .prn-stg-tag { font-size: 0.75rem; padding: 2px 7px; border-radius: 10px; background: var(--clr-surface-2); color: var(--clr-text-2); } .prn-stg-tag--default { background: var(--clr-accent-dim); color: var(--clr-accent); } /* Add/edit form in settings */ .prn-stg-form { background: var(--clr-surface-2); border-radius: 8px; padding: 12px; margin-top: 8px; } .prn-stg-form__field { margin-bottom: 10px; } .prn-stg-form__label { display: block; font-size: 0.78rem; color: var(--clr-text-2); margin-bottom: 4px; } .prn-stg-form__input { width: 100%; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 6px; color: var(--clr-text); padding: 6px 8px; font-size: 0.88rem; font-family: inherit; box-sizing: border-box; } .prn-stg-form__input:focus { outline: none; border-color: var(--clr-accent); } .prn-stg-form__input--short { width: 80px; } .prn-stg-form__input--error { border-color: var(--clr-error); } /* Dose tag chip input area */ .prn-dose-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 6px; cursor: text; min-height: 36px; } .prn-dose-tags:focus-within { border-color: var(--clr-accent); } .prn-dose-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: var(--clr-accent-dim); color: var(--clr-accent); font-size: 0.8rem; } .prn-dose-tag__del { background: none; border: none; cursor: pointer; color: var(--clr-accent); padding: 0; font-size: 1rem; line-height: 1; opacity: 0.7; } .prn-dose-tag__del:hover { opacity: 1; } .prn-dose-tag-input { border: none; outline: none; background: transparent; color: var(--clr-text); font-size: 0.88rem; font-family: inherit; min-width: 80px; flex: 1; } .prn-dose-add-btn { height: 26px; padding: 0 10px; background: var(--clr-accent); color: #fff; border: none; border-radius: 6px; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; transition: opacity var(--transition); } .prn-dose-add-btn:hover { opacity: 0.85; } .prn-stg-form__row { display: flex; gap: 8px; align-items: center; } .prn-stg-form__unit { font-size: 0.82rem; color: var(--clr-text-2); } .prn-stg-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* ═══════════════════════════════════════════════════════════════════════════ Treatments tab ═══════════════════════════════════════════════════════════════════════════ */ #tab-treatments { padding-bottom: max(80px, calc(65px + env(safe-area-inset-bottom))); } /* ── Header ──────────────────────────────────────────────────────────────── */ .tx-tab-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; border-bottom: 1px solid var(--clr-border); } .tx-tab-title { font-size: 1.1rem; font-weight: 700; color: var(--clr-text); } .tx-add-btn { font-size: 0.82rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--clr-accent); background: transparent; color: var(--clr-accent); cursor: pointer; transition: background var(--transition), color var(--transition); } .tx-add-btn:hover { background: var(--clr-accent-dim); } /* ── List view ───────────────────────────────────────────────────────────── */ .tx-list { padding: 8px 0; } .tx-empty { padding: 24px 16px; color: var(--clr-text-2); font-size: 0.88rem; text-align: center; } .tx-list-item { padding: 12px 16px; border-bottom: 1px solid var(--clr-border); cursor: pointer; transition: background var(--transition); } .tx-list-item:last-child { border-bottom: none; } .tx-list-item:active { background: var(--clr-surface-2); } .tx-list-item__row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; } .tx-list-item__date { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); } .tx-list-item__time { font-size: 0.78rem; color: var(--clr-text-2); } .tx-list-item__med { font-size: 0.82rem; font-weight: 500; color: var(--clr-accent); margin-bottom: 2px; } .tx-list-item__intention { font-size: 0.78rem; color: var(--clr-text-2); font-style: italic; } /* ── Detail view ─────────────────────────────────────────────────────────── */ .tx-back-btn { display: inline-flex; align-items: center; gap: 4px; margin: 12px 16px 4px; font-size: 0.82rem; font-weight: 500; color: var(--clr-accent); background: none; border: none; cursor: pointer; padding: 4px 0; } .tx-detail { padding-bottom: 32px; } .tx-detail-header { padding: 12px 16px 10px; border-bottom: 1px solid var(--clr-border); } .tx-detail-title { font-size: 1.1rem; font-weight: 700; color: var(--clr-text); margin-bottom: 3px; } .tx-detail-sub { font-size: 0.82rem; color: var(--clr-text-2); } .tx-detail-section { padding: 14px 16px; border-bottom: 1px solid var(--clr-border); } .tx-detail-section:last-of-type { border-bottom: none; } .tx-section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-text-2); margin-bottom: 8px; } .tx-intention-text, .tx-notes-text { font-size: 0.9rem; color: var(--clr-text); line-height: 1.5; white-space: pre-wrap; } .tx-detail-actions { display: flex; gap: 10px; padding: 14px 16px 0; } .tx-edit-btn { font-size: 0.82rem; font-weight: 500; padding: 6px 14px; border-radius: 7px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .tx-edit-btn:hover { color: var(--clr-text); background: var(--clr-surface-2); border-color: var(--clr-text-2); } .tx-delete-btn { font-size: 0.82rem; font-weight: 500; padding: 6px 14px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--clr-error); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .tx-delete-btn:hover { border-color: var(--clr-error); background: var(--clr-surface-2); } .tx-end-session-btn { font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 7px; border: 1px solid #e65100; background: transparent; color: #e65100; cursor: pointer; transition: background var(--transition); } .tx-end-session-btn:hover { background: var(--clr-surface-2); } @media (prefers-color-scheme: dark) { .tx-end-session-btn { border-color: #ffb74d; color: #ffb74d; } } .tx-save-btn--bottom { display: block; width: 100%; margin-top: 20px; padding: 12px; font-size: 0.95rem; } /* Hub treatments row — End button */ .tx-hub-end-btn { margin-left: auto; margin-right: 8px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; border-radius: 4px; border: 1.5px solid #e65100; color: #e65100; background: transparent; cursor: pointer; white-space: nowrap; } @media (prefers-color-scheme: dark) { .tx-hub-end-btn { border-color: #ffb74d; color: #ffb74d; } } /* ── Hub: Treatments inline panel ───────────────────────────────────────── */ .hub-tx-inline-panel { background: var(--clr-surface-2); border-top: 1px solid var(--clr-border); padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; } .hub-tx-edit-btn { font-size: 0.75rem; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; white-space: nowrap; } .hub-tx-ghost-btn { font-size: 0.75rem; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; white-space: nowrap; } .hub-tx-ended-row { display: flex; align-items: center; gap: 10px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 10px 14px; } .hub-tx-notes-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 12px 14px; } /* Today card — End Session button row */ .tx-today-card__end-row { display: flex; justify-content: flex-end; margin-top: 8px; } .tx-today-card__end-btn { padding: 4px 14px; font-size: 0.8rem; font-weight: 600; border-radius: 6px; border: 1.5px solid #e65100; color: #e65100; background: transparent; cursor: pointer; } @media (prefers-color-scheme: dark) { .tx-today-card__end-btn { border-color: #ffb74d; color: #ffb74d; } } /* ── BP section within treatment detail ──────────────────────────────────── */ .tx-bp-groups { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .tx-bp-ctx-group { display: flex; flex-direction: column; gap: 4px; } .tx-bp-ctx-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tx-bp-ctx-empty { font-size: 0.8rem; color: var(--clr-text-2); padding-left: 4px; } .tx-bp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 5px 0 5px 4px; } .tx-bp-reading { font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--clr-text); } .tx-bp-pulse, .tx-bp-time, .tx-bp-date-label, .tx-bp-notes { font-size: 0.78rem; color: var(--clr-text-2); } .tx-bp-actions { display: flex; gap: 6px; margin-left: auto; } .tx-add-bp-btn { font-size: 0.82rem; font-weight: 500; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .tx-add-bp-btn:hover { color: var(--clr-accent); border-color: var(--clr-accent); background: var(--clr-accent-dim); } /* ── Inline BP form ──────────────────────────────────────────────────────── */ .tx-bp-form { background: var(--clr-surface-2); border-radius: 10px; padding: 14px; margin-top: 8px; } .tx-bp-form-row { display: flex; gap: 10px; flex-wrap: wrap; } .tx-bp-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* ── Add/edit treatment form ─────────────────────────────────────────────── */ .tx-form-wrap { padding-bottom: 32px; } .tx-form { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .tx-form-row { display: flex; gap: 10px; flex-wrap: wrap; } .tx-form-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 110px; } .tx-form-label { font-size: 0.75rem; font-weight: 600; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.05em; } .tx-form-textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text); font-size: 0.9rem; font-family: inherit; resize: vertical; transition: border-color var(--transition); box-sizing: border-box; } .tx-form-textarea:focus { outline: none; border-color: var(--clr-accent); } .tx-save-btn { font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 8px; border: none; background: var(--clr-accent); color: #fff; cursor: pointer; transition: opacity var(--transition); } .tx-save-btn:hover { opacity: 0.88; } .tx-no-meds-hint { font-size: 0.82rem; color: var(--clr-text-2); background: var(--clr-surface-2); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tx-link-btn { background: none; border: none; color: var(--clr-accent); font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; } /* ── Treatments: Today view ─────────────────────────────────────────────── */ .tx-today-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 16px; text-align: center; } .tx-today-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: background 0.15s; } .tx-today-card:active { background: var(--clr-surface-2); } .tx-today-card__row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .tx-today-card__time { font-weight: 600; font-size: 0.95rem; } .tx-today-card__duration { color: var(--clr-text-2); font-size: 0.85rem; } .tx-today-card__med { font-size: 0.9rem; color: var(--clr-text-2); margin-bottom: 2px; } .tx-today-card__intention{ font-size: 0.88rem; color: var(--clr-text-2); font-style: italic; margin-bottom: 2px; } .tx-today-card__bp { font-size: 0.85rem; color: var(--clr-text-2); } /* "In Progress" badge — shared between today card and detail header */ .tx-today-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .tx-today-badge--progress { background: #fff3e0; color: #e65100; } @media (prefers-color-scheme: dark) { .tx-today-badge--progress { background: #3e2000; color: #ffb74d; } } .tx-view-all-link { text-align: center; padding: 16px 0 8px; } .tx-add-btn--ghost { background: transparent; color: var(--clr-accent); border: 1px solid var(--clr-accent); } /* ── Treatments: Editable end time row ───────────────────────────────────── */ .tx-end-time-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--clr-border); cursor: pointer; } .tx-end-time-label { color: var(--clr-text-2); font-size: 0.9rem; } .tx-end-time-value { font-size: 0.9rem; } .tx-add-hint { color: var(--clr-accent); font-size: 0.85rem; } .tx-end-time-edit { padding: 10px 0; border-bottom: 1px solid var(--clr-border); } .tx-end-time-edit__actions { display: flex; gap: 8px; margin-top: 8px; } .tx-detail-header__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ── Treatments: BP phase rows ───────────────────────────────────────────── */ .tx-bp-phases { display: flex; flex-direction: column; gap: 2px; } .tx-bp-phase-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--clr-border); cursor: pointer; user-select: none; } .tx-bp-phase-label { font-weight: 600; font-size: 0.85rem; min-width: 110px; } .tx-bp-phase-value { flex: 1; font-size: 0.9rem; } .tx-bp-phase-time { color: var(--clr-text-2); font-size: 0.8rem; } .tx-bp-phase-add { flex: 1; color: var(--clr-accent); font-size: 0.85rem; } .tx-bp-phase-chevron { color: var(--clr-text-2); font-size: 0.75rem; margin-left: auto; } .tx-bp-phase-form { background: var(--clr-surface-2); border-radius: 8px; padding: 12px; margin: 4px 0 8px; } /* ── Treatments: BP delta summary ────────────────────────────────────────── */ .tx-bp-delta { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--clr-border); margin-top: 6px; } .tx-bp-delta-label { font-size: 0.8rem; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.05em; } .tx-bp-delta-values { font-size: 0.9rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tx-bp-delta-sep { color: var(--clr-text-2); } /* ── Treatments: optional label ──────────────────────────────────────────── */ .tx-optional { color: var(--clr-text-2); font-size: 0.8rem; font-weight: 400; } /* ── Hub: section row status label ──────────────────────────────────────── */ .hub-section-row__status { font-size: 0.78rem; color: var(--clr-text-2); margin-left: auto; margin-right: 6px; } .hub-section-row__status--progress { color: #e65100; } @media (prefers-color-scheme: dark) { .hub-section-row__status--progress { color: #ffb74d; } } /* ── Health Log: treatment badge on BP entries ───────────────────────────── */ .hl-bp-tx-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 10px; background: var(--clr-accent-dim); color: var(--clr-accent); letter-spacing: 0.03em; white-space: nowrap; } /* ── Medications Management Overlay ────────────────────────────────────────── */ .view-meds-manage { position: fixed; inset: 0; background: var(--clr-bg); z-index: 200; display: flex; flex-direction: column; overflow: hidden; } .view-meds-manage[hidden] { display: none; } .view-meds-manage-header { display: flex; align-items: center; justify-content: space-between; padding: max(18px, env(safe-area-inset-top, 18px)) 20px 14px; background: var(--clr-bg); flex-shrink: 0; } .view-meds-manage-back-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--clr-accent); font-size: 0.88rem; font-weight: 600; cursor: pointer; padding: 6px 0; min-width: 60px; } .view-meds-manage-title { font-family: var(--hub-font); font-size: 1.25rem; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; line-height: 1; } .view-meds-manage-add-btn { background: none; border: none; color: var(--clr-accent); font-family: var(--hub-font); font-size: 0.9rem; font-weight: 700; cursor: pointer; padding: 6px 0; min-width: 60px; text-align: right; } .view-meds-manage-content { flex: 1; overflow-y: auto; padding: 4px 12px 40px; } /* Med list rows (inside group-block containers) */ .mmg-med-row { padding: 12px 14px; border-bottom: 1px solid var(--clr-border); cursor: pointer; background: var(--clr-surface); } .mmg-med-row:last-child { border-bottom: none; } .mmg-med-row:active { background: var(--clr-surface-2); } .mmg-med-name { font-size: 0.95rem; font-weight: 600; color: var(--clr-text); margin-bottom: 4px; } .mmg-med-chips { display: flex; flex-wrap: wrap; gap: 5px; } .mmg-chip { font-size: 0.72rem; font-weight: 500; padding: 2px 8px; border-radius: 10px; background: var(--clr-surface-2); color: var(--clr-text-2); border: 1px solid var(--clr-border); } .mmg-empty { padding: 24px 16px; color: var(--clr-text-2); font-size: 0.88rem; text-align: center; } .mmg-archive-toggle { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; padding: 14px 0 8px; cursor: pointer; text-align: left; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-2); -webkit-tap-highlight-color: transparent; } .mmg-archive-toggle::after { content: ''; flex: 1; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, var(--clr-border), transparent); } .mmg-archive-toggle-chevron { font-size: 0.65rem; flex-shrink: 0; } .mmg-archived { opacity: 0.65; } /* Edit form */ .mmg-form { padding: 16px; } .mmg-form-back { background: none; border: none; color: var(--clr-accent); font-size: 0.88rem; font-weight: 600; cursor: pointer; padding: 0 0 12px; } .mmg-form-title { font-size: 1rem; font-weight: 700; color: var(--clr-text); margin: 0 0 16px; } .mmg-field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--clr-text-2); margin: 12px 0 4px; } .mmg-section-label { display: flex; align-items: center; gap: 9px; font-size: 0.63rem; font-weight: 700; color: var(--clr-accent); text-transform: uppercase; letter-spacing: 0.1em; margin: 20px 0 8px; } .mmg-section-label::after { content: ''; flex: 1; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, var(--clr-accent), #d4a017, transparent); opacity: 0.6; } .mmg-text-input { width: 100%; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-text); font-size: 0.9rem; padding: 8px 10px; box-sizing: border-box; } .mmg-text-input:focus { border-color: var(--clr-accent); outline: none; } .mmg-slot-label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--clr-text); padding: 6px 0; cursor: pointer; } .mmg-slot-dose-row { padding-left: 24px; margin-bottom: 8px; } .mmg-slot-dose-row--hidden { display: none; } .mmg-prn-fields { padding-left: 24px; } .mmg-form-actions { display: flex; align-items: center; margin-top: 24px; gap: 10px; } .mmg-save-btn { background: var(--clr-accent); color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; padding: 9px 20px; cursor: pointer; } .mmg-archive-btn { background: transparent; color: var(--clr-text-2); border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.85rem; padding: 8px 14px; cursor: pointer; } .mmg-pause-btn, .mmg-resume-btn { background: transparent; color: var(--clr-text-2); border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.85rem; padding: 8px 14px; cursor: pointer; } .mmg-delete-btn { background: transparent; color: var(--clr-error); border: 1px solid var(--clr-error); border-radius: 8px; font-size: 0.85rem; padding: 8px 14px; cursor: pointer; } .mmg-delete-confirm-btn { background: var(--clr-error); color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; padding: 9px 18px; cursor: pointer; } .mmg-btn-secondary { background: transparent; color: var(--clr-text-2); border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.9rem; padding: 9px 14px; cursor: pointer; } .mmg-delete-warn { background: #fff8e1; color: #7c5400; border: 1px solid #ffe082; border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; line-height: 1.4; margin-bottom: 0; } @media (prefers-color-scheme: dark) { .mmg-delete-warn { background: #2a2000; color: #ffd54f; border-color: #5a4500; } } .mmg-chip--paused { background: #fff8e1; color: #7c5400; border: 1px solid #ffe082; } @media (prefers-color-scheme: dark) { .mmg-chip--paused { background: #2a2000; color: #ffd54f; border-color: #5a4500; } } /* Grouped list — section-header style */ .mmg-group { margin-bottom: 0; } .mmg-group-header { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; padding: 16px 0 8px; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; } .mmg-group-label { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-accent); white-space: nowrap; } .mmg-group-rule { flex: 1; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, var(--clr-accent), #d4a017, transparent); opacity: 0.6; } .mmg-group-count { font-size: 0.7rem; color: var(--clr-accent); background: var(--clr-accent-dim); border: 1px solid var(--clr-accent); border-radius: 10px; padding: 1px 7px; opacity: 0.8; } .mmg-group-chevron { font-size: 0.65rem; color: var(--clr-text-2); flex-shrink: 0; } .mmg-group-body { border: 1px solid var(--clr-border); border-radius: 14px; overflow: hidden; margin-bottom: 4px; } /* Dose chip tag input */ .mmg-field-hint { font-size: 0.78rem; color: var(--clr-text-2); margin: 2px 0 8px; } .mmg-dose-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; min-height: 0; } .mmg-dose-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px; background: var(--clr-accent-dim); border: 1px solid var(--clr-accent); border-radius: 20px; font-size: 0.82rem; color: var(--clr-accent); font-weight: 500; } .mmg-dose-tag-del { background: none; border: none; color: var(--clr-accent); font-size: 1rem; line-height: 1; padding: 0; cursor: pointer; opacity: 0.7; } .mmg-dose-tag-del:hover { opacity: 1; } .mmg-dose-input-row { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } .mmg-dose-input-row .mmg-dose-input { flex: 1; margin: 0; } .mmg-dose-add-btn { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.85rem; padding: 8px 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .mmg-dose-add-btn:active { background: var(--clr-accent-dim); border-color: var(--clr-accent); } /* ── Today Tab: Medications Section ────────────────────────────────────────── */ .meds-empty { padding: 16px; font-size: 0.88rem; color: var(--clr-text-2); text-align: center; } .meds-config-link { background: none; border: none; color: var(--clr-accent); font-size: 0.88rem; cursor: pointer; padding: 0; text-decoration: underline; } /* Scheduled slot rows */ .meds-slot-row { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--clr-border); gap: 10px; } .meds-slot-row--empty { justify-content: center; } .meds-slot-log-btn { background: var(--clr-accent); color: #fff; border: none; border-radius: 20px; font-size: 0.88rem; font-weight: 600; padding: 8px 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .meds-slot-row--done { cursor: pointer; justify-content: space-between; } .meds-slot-row--done:active { background: var(--clr-surface-2); } /* Pending-log time-confirm row */ .meds-slot-row--pending { flex-wrap: wrap; gap: 8px; padding: 10px 16px; } .meds-slot-pending-label { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); flex-shrink: 0; } .meds-slot-pending-time { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-text); font-size: 0.88rem; padding: 5px 8px; flex-shrink: 0; } .meds-slot-pending-time:focus { border-color: var(--clr-accent); outline: none; } .meds-slot-confirm-btn { padding: 6px 16px; font-size: 0.85rem; } .meds-slot-cancel-btn { background: transparent; border: 1px solid var(--clr-border); border-radius: 16px; color: var(--clr-text-2); font-size: 0.82rem; padding: 6px 12px; cursor: pointer; } .meds-slot-done-label { font-size: 0.9rem; font-weight: 600; color: var(--clr-text); } .meds-slot-done-time { font-size: 0.85rem; color: var(--clr-accent); font-weight: 500; } /* Slot edit form */ .meds-slot-edit { padding: 12px 16px; border-bottom: 1px solid var(--clr-border); background: var(--clr-surface-2); } .meds-slot-edit-header { font-size: 0.85rem; font-weight: 700; color: var(--clr-text-2); margin-bottom: 10px; } .meds-edit-time-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .meds-edit-label { font-size: 0.8rem; font-weight: 600; color: var(--clr-text-2); min-width: 55px; } .meds-edit-time-input { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 6px; color: var(--clr-text); padding: 5px 8px; font-size: 0.88rem; } .meds-edit-med-list { margin-bottom: 8px; } .meds-edit-med-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--clr-border); } .meds-edit-med-check { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--clr-text); cursor: pointer; } .meds-edit-med-dose { font-size: 0.8rem; color: var(--clr-text-2); } .meds-edit-extra-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--clr-text); padding: 4px 0; } .meds-edit-extra-del { background: none; border: none; color: var(--clr-text-2); cursor: pointer; font-size: 0.85rem; } .meds-edit-add-extra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .meds-edit-extra-select, .meds-edit-extra-dose-input { flex: 1; min-width: 80px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 6px; color: var(--clr-text); font-size: 0.82rem; padding: 5px 8px; } .meds-edit-add-btn { background: var(--clr-accent); color: #fff; border: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; padding: 6px 12px; cursor: pointer; } /* ── Meds redesign: shared zone ── */ .meds-zone { border-bottom: 1px solid var(--clr-border); padding: 12px 16px; } .meds-zone:last-child { border-bottom: none; } .meds-zone-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-2); margin-bottom: 8px; } /* 2-column grid */ .meds-dose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .meds-dose-btn { padding: 10px 10px 9px; background: var(--clr-surface-2); border: 1.5px solid var(--clr-border); border-radius: 8px; color: var(--clr-text); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; min-width: 0; transition: border-color 0.15s, background 0.15s; } .meds-dose-btn:active { background: var(--clr-accent-dim); border-color: var(--clr-accent); } .meds-dose-btn-top { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; } .meds-dose-icon { font-size: 0.9rem; flex-shrink: 0; } .meds-dose-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meds-dose-count { font-size: 0.72rem; color: var(--clr-text-2); font-weight: 400; } .meds-dose-wrap { display: flex; align-items: stretch; gap: 0; border-radius: 12px; overflow: hidden; } .meds-dose-wrap .meds-dose-btn { flex: 1; border-radius: 0; /* wrapper handles border-radius */ border-right: 1px solid var(--clr-border); } .meds-dose-skip { background: var(--clr-surface-2); color: var(--clr-text-2); border: none; padding: 0 14px; font-size: 0.78rem; font-weight: 500; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; min-width: 52px; } .meds-dose-skip:active { background: var(--clr-error); color: #fff; } /* Inline time picker — spans both columns */ .meds-slot-picker { grid-column: span 2; background: var(--clr-accent-dim); border: 1.5px solid color-mix(in srgb, var(--clr-accent) 50%, transparent); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .meds-picker-icon { font-size: 0.95rem; flex-shrink: 0; } .meds-picker-name { font-size: 0.85rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meds-picker-time { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 6px; color: var(--clr-text); font-family: inherit; font-size: 0.85rem; padding: 5px 8px; width: 92px; flex-shrink: 0; } .meds-picker-ok { padding: 5px 14px; background: var(--clr-accent); border: none; border-radius: 6px; color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; flex-shrink: 0; } .meds-picker-cancel { background: none; border: none; color: var(--clr-text-2); font-size: 1rem; cursor: pointer; padding: 2px 4px; flex-shrink: 0; } .meds-all-done { grid-column: span 2; padding: 10px 14px; background: var(--clr-accent-dim); border: 1px solid color-mix(in srgb, var(--clr-accent) 30%, transparent); border-radius: 8px; color: var(--clr-text-2); font-size: 0.82rem; font-weight: 500; display: flex; align-items: center; gap: 8px; } .meds-all-done-check { color: var(--clr-accent); } /* ── Zone 2: PRN trigger ── */ .meds-prn-trigger { width: 100%; padding: 10px 14px; background: transparent; border: 1.5px dashed var(--clr-border); border-radius: 8px; color: var(--clr-text-2); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: border-color 0.15s, color 0.15s; } .meds-prn-trigger--open, .meds-prn-trigger:hover { border-style: solid; border-color: var(--clr-accent); color: var(--clr-text); } .meds-prn-plus { font-size: 1rem; color: var(--clr-accent); } .meds-prn-panel { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .meds-prn-quick { display: flex; flex-wrap: wrap; gap: 6px; } .meds-prn-chip { padding: 6px 12px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 20px; color: var(--clr-text); font-family: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; } .meds-prn-chip:active { background: var(--clr-accent-dim); border-color: var(--clr-accent); } .meds-prn-other { display: flex; gap: 8px; } .meds-prn-select { flex: 1; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-text); font-family: inherit; font-size: 0.82rem; padding: 7px 10px; } .meds-prn-log-btn { padding: 7px 14px; background: var(--clr-accent); border: none; border-radius: 8px; color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; } /* ── Paused Meds ── */ .meds-paused-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; } .meds-paused-item + .meds-paused-item { border-top: 1px solid var(--clr-border); } .meds-paused-name { font-size: 0.9rem; font-weight: 500; color: var(--clr-text); flex: 1; min-width: 0; } .meds-paused-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: #fff8e1; color: #7c5400; border: 1px solid #ffe082; border-radius: 4px; padding: 2px 6px; flex-shrink: 0; } @media (prefers-color-scheme: dark) { .meds-paused-badge { background: #2a2000; color: #ffd54f; border-color: #5a4500; } } /* ── Zone 3: Dosing Windows ── */ .meds-windows-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-2); margin-bottom: 8px; } .meds-window-card { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; transition: opacity 0.3s; } .meds-window-card + .meds-window-card { margin-top: 6px; } .meds-window-card--faded { opacity: 0.4; } .meds-window-top { display: flex; align-items: baseline; gap: 6px; } .meds-window-name { font-size: 0.9rem; font-weight: 600; } .meds-window-dose { font-size: 0.78rem; color: var(--clr-text-2); } .meds-window-count { font-size: 0.75rem; color: var(--clr-text-2); margin-left: auto; white-space: nowrap; } .meds-window-bar-wrap { height: 4px; background: var(--clr-border); border-radius: 2px; overflow: hidden; } .meds-window-bar { height: 100%; border-radius: 2px; background: var(--clr-ok, #66bb6a); transition: width 0.4s; } .meds-window-bar--error { background: var(--clr-error); } .meds-window-next { font-size: 0.78rem; color: var(--clr-text-2); } .meds-window-next--safe { color: var(--clr-accent); font-weight: 600; } .meds-window-next--error { color: var(--clr-error); font-weight: 600; } /* ── Zone 4: Logged Today ── */ .meds-logged-trigger { width: 100%; background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--clr-text); font-family: inherit; } .meds-logged-headline { font-size: 0.95rem; font-weight: 600; flex: 1; text-align: left; } .meds-logged-chevron { font-size: 0.75rem; color: var(--clr-text-2); transition: transform 0.2s; } .meds-logged-chevron--open { transform: rotate(180deg); } .meds-logged-list { margin-top: 10px; } .meds-log-group-time { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-2); padding: 8px 0 4px; } .meds-log-group-time:first-child { padding-top: 0; } .meds-log-entry { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--clr-surface-2); border-radius: 6px; margin-bottom: 2px; } .meds-log-name { flex: 1; font-size: 0.85rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meds-log-dose { font-size: 0.78rem; color: var(--clr-text-2); flex-shrink: 0; } .meds-log-badge { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 10px; background: var(--clr-accent-dim); color: var(--clr-accent); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .meds-log-badge--prn { background: color-mix(in srgb, #f57c00 15%, transparent); color: #f57c00; } .meds-log-badge--rem { background: color-mix(in srgb, #4fc3f7 13%, transparent); color: #4fc3f7; } .meds-log-edit { background: none; border: 1px solid var(--clr-border); border-radius: 5px; color: var(--clr-text-2); font-size: 0.72rem; padding: 3px 8px; cursor: pointer; font-family: inherit; flex-shrink: 0; } /* Row whose edit form is currently open — subtle left accent */ .meds-log-entry--editing { border-left: 2px solid var(--clr-accent); padding-left: 8px; } /* Wrapper that holds an edit form injected inline below an entry */ .meds-log-inline-edit { margin: 4px 0 6px; border-left: 2px solid var(--clr-accent); padding-left: 8px; } .meds-slot-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .meds-edit-cancel-btn { background: transparent; color: var(--clr-text-2); border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.88rem; padding: 7px 16px; cursor: pointer; } .meds-edit-save-btn { background: var(--clr-accent); color: #fff; border: none; border-radius: 8px; font-size: 0.88rem; font-weight: 600; padding: 7px 16px; cursor: pointer; } .meds-edit-delete-btn { background: transparent; color: var(--clr-error); border: 1px solid var(--clr-error); border-radius: 8px; font-size: 0.88rem; padding: 7px 16px; cursor: pointer; margin-right: auto; /* pushes Cancel + Save to the right */ } .meds-edit-delete-btn:active { background: color-mix(in srgb, var(--clr-error) 12%, transparent); } .meds-delete-confirm-label { font-size: 0.88rem; color: var(--clr-error); margin-right: auto; align-self: center; } /* PRN section */ .meds-prn-section { padding: 12px 16px 4px; border-bottom: 1px solid var(--clr-border); } .meds-prn-label { font-size: 0.75rem; font-weight: 700; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .meds-prn-quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; } .meds-prn-quick-btn { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 20px; color: var(--clr-text); font-size: 0.85rem; font-weight: 500; padding: 7px 14px; cursor: pointer; } .meds-prn-quick-btn:active { background: var(--clr-accent-dim); border-color: var(--clr-accent); } .meds-prn-other-select { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 20px; color: var(--clr-text-2); font-size: 0.82rem; padding: 6px 10px; } .meds-prn-dose-card { cursor: pointer; } /* Med Reminders section */ .meds-reminders-section { padding: 12px 16px; } .meds-reminders-label { font-size: 0.75rem; font-weight: 700; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .meds-reminder-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--clr-border); } .meds-reminder-row:last-child { border-bottom: none; } .meds-reminder-name { font-size: 0.9rem; font-weight: 600; color: var(--clr-text); } .meds-reminder-btn { background: var(--clr-accent); color: #fff; border: none; border-radius: 14px; font-size: 0.8rem; font-weight: 600; padding: 5px 14px; cursor: pointer; } .meds-reminder-row--done .meds-reminder-time { font-size: 0.85rem; color: var(--clr-accent); font-weight: 500; } .meds-reminder-undo { background: none; border: none; color: var(--clr-text-2); font-size: 0.8rem; cursor: pointer; text-decoration: underline; } /* Reminder: logged time button (tappable to edit) */ .meds-reminder-time-done { background: none; border: none; color: var(--clr-accent); font-size: 0.85rem; font-weight: 500; cursor: pointer; padding: 2px 0; text-decoration: underline dotted; } /* Reminder: editing row */ .meds-reminder-row--editing { flex-wrap: wrap; gap: 8px; align-items: center; } .meds-reminder-time-input { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-text); font-size: 0.85rem; padding: 5px 8px; } .meds-reminder-time-input:focus { border-color: var(--clr-accent); outline: none; } .meds-reminder-confirm-btn { background: var(--clr-accent); color: #fff; border: none; border-radius: 14px; font-size: 0.8rem; font-weight: 600; padding: 5px 12px; cursor: pointer; } .meds-reminder-cancel-edit { background: none; border: 1px solid var(--clr-border); border-radius: 14px; color: var(--clr-text-2); font-size: 0.78rem; padding: 4px 10px; cursor: pointer; } /* Health Log: Medications link in header */ .hl-meds-link-btn { display: flex; align-items: center; gap: 5px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-text-2); font-size: 0.82rem; font-weight: 600; padding: 6px 12px; cursor: pointer; } .hl-meds-link-btn:hover { border-color: var(--clr-accent); color: var(--clr-accent); } /* Settings: Medications link button */ .stg-link-btn { background: var(--clr-accent); color: #fff; border: none; border-radius: 8px; font-size: 0.88rem; font-weight: 600; padding: 9px 18px; cursor: pointer; margin-bottom: 8px; } /* ── Reconnect banner ────────────────────────────────────────────────────── */ .reconnect-banner[hidden] { display: none; } .reconnect-banner { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 4rem); left: 50%; transform: translateX(-50%); background: var(--clr-surface); border: 1px solid var(--clr-error); border-radius: 0.75rem; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 9999; font-size: 0.9rem; color: var(--clr-text); white-space: nowrap; } .reconnect-banner__btn { background: var(--clr-error); color: #fff; border: none; border-radius: 0.5rem; padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; } /* ── Conflict modal ──────────────────────────────────────────────────────── */ .conflict-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 24px; } .conflict-modal[hidden] { display: none; } .conflict-modal__card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 16px; padding: 24px; max-width: 340px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.25); } .conflict-modal__title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; color: var(--clr-text); } .conflict-modal__body { font-size: 0.88rem; color: var(--clr-text-2); line-height: 1.5; margin: 0 0 20px; } .conflict-modal__actions { display: flex; flex-direction: column; gap: 10px; } .conflict-modal__btn { border: none; border-radius: 10px; font-size: 0.92rem; font-weight: 600; padding: 12px 16px; cursor: pointer; width: 100%; } .conflict-modal__btn--reload { background: var(--clr-accent); color: #fff; } .conflict-modal__btn--force { background: var(--clr-surface-2); color: var(--clr-text-2); border: 1px solid var(--clr-border); } /* ═══════════════════════════════════════════════════════ HUB LAYOUT 2×2 bucket tile grid for the Today tab. Font: Outfit (loaded alongside Figtree). Complementary palette: sage green + warm amber. ═══════════════════════════════════════════════════════ */ /* ── Hub tokens (extend existing custom-property set) ── */ :root { --hub-green: #5eb88a; --hub-green-dim: rgba(94,184,138,0.13); --hub-green-bd: rgba(94,184,138,0.28); --hub-amber: #d4965a; --hub-amber-dim: rgba(212,150,90,0.12); --hub-amber-bd: rgba(212,150,90,0.26); --hub-font: 'Outfit', sans-serif; --hub-radius: 22px; --hub-tile-min-h: 205px; --hub-btn-h: 48px; --hub-slide-dur: 0.24s; } /* ── Outer wrapper ── */ /* The [hidden] attribute has low specificity — these overrides ensure it wins over the display:flex / display:block rules below. */ #hub-container[hidden], #accordion-wrapper[hidden] { display: none !important; } /* Hides sections not belonging to the currently open hub bucket */ .hub-bucket-hidden { display: none !important; } /* ── Bucket accordion back bar ── */ .hub-bucket-backbar { display: none; align-items: center; gap: 10px; padding: 12px 16px 11px; border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; background: var(--clr-bg); z-index: 50; font-family: var(--hub-font, 'Outfit', sans-serif); } .hub-bucket-back-btn { display: flex; align-items: center; gap: 2px; background: var(--hub-green-dim, rgba(94,184,138,0.13)); border: 1px solid var(--hub-green-bd, rgba(94,184,138,0.28)); border-radius: 20px; padding: 6px 14px 6px 10px; cursor: pointer; font-family: var(--hub-font, 'Outfit', sans-serif); font-size: 14px; font-weight: 600; color: var(--hub-green, #5eb88a); line-height: 1; white-space: nowrap; transition: background 0.15s; } .hub-bucket-back-btn:active { background: rgba(94,184,138,0.24); } .hub-bucket-back-chevron { font-size: 18px; font-weight: 800; line-height: 1; margin-top: -1px; } .hub-bucket-back-lbl { font-size: 13px; } .hub-bucket-title { font-size: 17px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; font-family: var(--hub-font, 'Outfit', sans-serif); } #hub-container { display: flex; flex-direction: column; flex: 1; position: relative; overflow: hidden; font-family: var(--hub-font); } /* ── Hub home (tile grid) ── */ #hub-home { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 20px 20px; overflow-y: auto; flex: 1; } /* ── Reminder banner ── */ .hub-reminder { display: flex; align-items: center; gap: 10px; margin: 6px 20px 0; padding: 9px 13px; background: var(--hub-amber-dim); border: 1px solid var(--hub-amber-bd); border-left: 3px solid var(--hub-amber); border-radius: 12px; font-family: var(--hub-font); } .hub-reminder__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hub-amber); flex-shrink: 0; animation: hub-blink 2.4s ease-in-out infinite; } @keyframes hub-blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.75); } } .hub-reminder__text { font-size: 13px; font-weight: 500; color: var(--hub-amber); line-height: 1.4; } .hub-reminder__check { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--hub-amber); background: transparent; color: var(--hub-amber); font-size: 14px; font-family: var(--hub-font); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; } .hub-reminder__check:active { background: var(--hub-amber); color: #000; } .hub-reminder__counter { font-size: 0.72rem; color: var(--clr-text-2); white-space: nowrap; flex-shrink: 0; order: 10; } /* For non-loggable banner items (no check button), push counter to the right */ .hub-reminder:not(:has(.hub-reminder__check)) .hub-reminder__counter { margin-left: auto; } /* ── Tile card ── */ .hub-tile { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--hub-radius); overflow: hidden; min-height: var(--hub-tile-min-h); display: flex; flex-direction: column; cursor: pointer; transition: transform 0.13s; font-family: var(--hub-font); -webkit-tap-highlight-color: transparent; margin-top: 20px; } .hub-tile:active { transform: scale(0.965); } .hub-tile__bar { height: 5px; flex-shrink: 0; background: linear-gradient(90deg, var(--hub-green) 0%, #82d4a8 50%, var(--hub-green) 100%); } .hub-tile__inner { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; } /* ── Tile header (name) ── */ .hub-tile__name { font-size: 22px; font-weight: 800; letter-spacing: -0.2px; color: var(--clr-text); line-height: 1; font-family: var(--hub-font); } /* ── Carousel (Routine streaks + Health stats) ── */ .hub-carousel { flex: 1; position: relative; overflow: hidden; min-height: 60px; } .hub-carousel__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; transition: opacity 0.38s ease, transform 0.38s ease; } .hub-carousel__slide.is-gone { opacity: 0; transform: translateY(7px); pointer-events: none; } /* streak content */ .hub-c-lbl { font-size: 13px; font-weight: 500; color: var(--clr-text-2); margin-bottom: 2px; } .hub-c-row { display: flex; align-items: baseline; gap: 5px; } .hub-c-num { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; color: var(--hub-amber); line-height: 1; } .hub-c-unit { font-size: 12px; color: var(--clr-text-2); font-weight: 400; opacity: 0.6; } .hub-c-fire { font-size: 17px; } .hub-c-none { font-size: 13px; font-weight: 500; color: var(--clr-text-2); opacity: 0.6; line-height: 1.4; } /* stat content (Health carousel) — same sizes */ .hub-s-ico { font-size: 17px; line-height: 1; margin-bottom: 2px; } .hub-s-val { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; color: var(--hub-amber); line-height: 1; } .hub-s-lbl { font-size: 12px; color: var(--clr-text-2); font-weight: 400; opacity: 0.6; margin-top: 2px; } /* ── Carousel dots ── */ .hub-dots { display: flex; gap: 5px; margin-top: 2px; } .hub-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--clr-border); transition: background 0.3s, transform 0.3s; cursor: pointer; } .hub-dot.is-on { background: var(--hub-amber); transform: scale(1.35); } /* ── Wellbeing rating display ── */ .hub-rating { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1px; } .hub-rating__lbl { font-size: 13px; font-weight: 500; color: var(--clr-text-2); margin-bottom: 2px; } .hub-rating__val { display: flex; align-items: baseline; gap: 6px; } .hub-rating__em { font-size: 22px; line-height: 1; } .hub-rating__word { font-size: 20px; font-weight: 800; color: var(--hub-green); letter-spacing: -1px; line-height: 1; } .hub-rating__sub { font-size: 12px; color: var(--clr-text-2); font-weight: 400; opacity: 0.6; margin-top: 2px; } /* ── Reflections streak ── */ .hub-streak { flex: 1; display: flex; align-items: center; gap: 6px; } .hub-streak__num { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; color: var(--hub-amber); line-height: 1; } .hub-streak__fire { font-size: 18px; } .hub-streak__lbl { font-size: 12px; color: var(--clr-text-2); font-weight: 400; opacity: 0.6; line-height: 1.35; } /* ── Log buttons — both types share same height ── */ .hub-log-simple, .hub-log-swipe { height: var(--hub-btn-h); flex-shrink: 0; background: var(--hub-green-dim); border: 1px solid var(--hub-green-bd); border-radius: 11px; -webkit-tap-highlight-color: transparent; transition: background 0.15s; font-family: var(--hub-font); } /* Simple log (Routine, Wellbeing) */ .hub-log-simple { display: flex; align-items: center; justify-content: center; cursor: pointer; } .hub-log-simple:active { background: rgba(94,184,138,0.24); } .hub-log-simple__lbl { font-size: 14px; font-weight: 600; color: var(--hub-green); line-height: 1; } /* Swipeable log (Health, Reflections) */ .hub-log-swipe { display: flex; align-items: center; padding: 0 4px; cursor: pointer; user-select: none; touch-action: pan-y; position: relative; } .hub-log-swipe:active { background: rgba(94,184,138,0.22); } .hub-chev { font-size: 13px; font-weight: 800; color: rgba(94,184,138,0.48); min-width: 32px; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; cursor: pointer; transition: color 0.15s, background 0.15s; } .hub-chev:hover { color: var(--hub-green); background: var(--hub-green-dim); } .hub-log-track { flex: 1; overflow: hidden; position: relative; height: 100%; display: flex; align-items: center; } .hub-log-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--hub-green); text-align: center; line-height: 1.25; transition: opacity 0.18s ease, transform 0.18s ease; } .hub-log-lbl.is-out-l { opacity:0; transform:translateX(-14px); } .hub-log-lbl.is-out-r { opacity:0; transform:translateX( 14px); } .hub-log-lbl.is-in { opacity:0; transform:translateY( 5px); } /* ── Bucket panel (slides in from right over hub-home) ── */ #hub-bucket-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--clr-bg); transform: translateX(100%); transition: transform var(--hub-slide-dur) ease; overflow-y: auto; z-index: 10; font-family: var(--hub-font); } #hub-bucket-panel.is-open { transform: translateX(0); } .hub-panel-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; background: var(--clr-bg); z-index: 1; } .hub-back-btn { font-family: var(--hub-font); font-size: 14px; font-weight: 600; color: var(--hub-green); background: none; border: none; cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 4px; } .hub-panel-title { font-family: var(--hub-font); font-size: 16px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; } /* Section rows inside bucket panel */ .hub-section-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--clr-border); cursor: pointer; transition: background 0.12s; } .hub-section-row:active { background: var(--clr-surface-2); } .hub-section-row__name { font-family: var(--hub-font); font-size: 15px; font-weight: 600; color: var(--clr-text); } .hub-section-row__status { font-size: 12px; font-weight: 500; color: var(--clr-text-2); margin-left: auto; margin-right: 8px; } .hub-section-row__arrow { font-size: 14px; color: var(--clr-text-2); opacity: 0.5; } /* ── Section overlay (full-screen from hub) ── */ .tracker-section.hub-section-active { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; overflow-y: auto; border-radius: 0 !important; border: none !important; background: var(--clr-bg); padding-bottom: env(safe-area-inset-bottom, 0); } /* Back button injected at top of active section */ .hub-section-back { display: flex; align-items: center; gap: 6px; padding: 12px 16px 8px; font-family: var(--hub-font); font-size: 14px; font-weight: 600; color: var(--hub-green); cursor: pointer; border-bottom: 1px solid var(--clr-border); background: var(--clr-bg); position: sticky; top: 0; z-index: 1; } /* ── Accordion wrapper as flex column (enables CSS order for bucket reordering) ── */ #accordion-wrapper { display: flex; flex-direction: column; } /* ── Hub header: greeting, avatar, weather chips ── */ #hub-header { padding: 22px 20px 18px; padding-top: max(22px, env(safe-area-inset-top, 22px)); flex-shrink: 0; font-family: var(--hub-font); } .hub-greeting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .hub-greeting-left { flex: 1; min-width: 0; } .hub-greeting-date { font-size: 30px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 4px; } .hub-greeting-msg { font-size: 16px; font-weight: 400; color: var(--clr-text-2); letter-spacing: 0.1px; line-height: 1.4; } .hub-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--hub-green); /* solid green fill */ border: none; color: #0f1210; /* dark text on green */ font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--hub-font); cursor: pointer; transition: opacity 0.15s; } .hub-avatar:active { opacity: 0.75; } .hub-weather-row { display: flex; flex-wrap: wrap; gap: 6px; } .hub-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); font-size: 12px; font-weight: 500; color: var(--clr-text-2); font-family: var(--hub-font); white-space: nowrap; } /* Hide conditions bar when hub is active (weather is shown in hub header instead) */ #conditions-bar.hub-hidden { display: none !important; } /* ── Hide native app chrome in hub mode ── */ .app-header.hub-hidden, .app-date-bar.hub-hidden { display: none !important; position: static !important; border: none !important; } /* ── Hub date row (swipeable, contains greeting + avatar) ── */ .hub-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; user-select: none; -webkit-user-select: none; touch-action: pan-y; } /* ── Hub weather cards — 3-column grid matching the mockup ── */ .hub-wx-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; } .hub-wx-card { display: flex; flex-direction: row; align-items: center; padding: 12px 5px; border-radius: 14px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); gap: 10px; font-family: var(--hub-font); min-width: 0; overflow: hidden; } .hub-wx-ico { font-size: 20px; line-height: 1; flex-shrink: 0; } .hub-wx-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .hub-wx-val { font-size: 15px; font-weight: 700; color: var(--clr-text); font-family: var(--hub-font); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-wx-val--green { color: var(--hub-green); } .hub-wx-val--amber { color: var(--hub-amber); } .hub-wx-val--red { color: var(--clr-error); } .hub-wx-lbl { font-size: 10px; color: var(--clr-text-2); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Hub weather detail panel ─────────────────────────────────────────────── */ /* Active card highlight */ .hub-wx-card--active { background: var(--clr-accent-dim); border-bottom: 2px solid var(--clr-accent); border-radius: 8px; } .hub-wx-card--active .hub-wx-lbl { color: var(--clr-accent); } /* Detail panel container */ .hub-wx-detail { background: var(--clr-surface-2); border-radius: 12px; padding: 12px; margin-top: 10px; } .hub-wx-detail[hidden] { display: none; } /* Metric rows */ .hub-wx-detail-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; gap: 8px; } .hub-wx-detail-row + .hub-wx-detail-row { border-top: 1px solid var(--clr-border); } .hub-wx-detail-label { font-size: 13px; color: var(--clr-text-2); display: flex; align-items: center; gap: 5px; } .hub-wx-detail-value { font-size: 13px; font-weight: 700; color: var(--clr-text); text-align: right; } /* Level badge pill */ .hub-wx-detail-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px; margin-left: 6px; } .hub-wx-detail-badge--green { color: var(--hub-green); background: color-mix(in srgb, var(--hub-green) 15%, transparent); } .hub-wx-detail-badge--amber { color: var(--hub-amber); background: color-mix(in srgb, var(--hub-amber) 15%, transparent); } .hub-wx-detail-badge--red { color: var(--clr-error); background: color-mix(in srgb, var(--clr-error) 15%, transparent); } /* Pollen group header */ .hub-wx-detail-group { font-size: 11px; font-weight: 600; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 0 3px; } .hub-wx-detail-group:first-child { padding-top: 0; } /* AQI advisory row */ .hub-wx-detail-advisory { flex: 1; } /* No-data fallback */ .hub-wx-no-data { font-size: 13px; color: var(--clr-text-2); text-align: center; padding: 8px 0; margin: 0; } /* ── Hub calendar picker button ── */ .hub-cal-btn { background: none; border: none; padding: 4px; margin-left: 4px; cursor: pointer; color: var(--clr-text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px; transition: color 0.15s, background 0.15s; position: relative; } .hub-cal-btn:hover, .hub-cal-btn:active { color: var(--clr-text); background: var(--clr-surface-2); } .hub-cal-btn svg { display: block; } /* ── Hub date-picker menu popover ── */ .hub-date-menu { position: fixed; z-index: 900; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18); min-width: 160px; font-family: var(--hub-font); opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity 0.14s ease, transform 0.14s ease; } .hub-date-menu--open { opacity: 1; transform: translateY(0) scale(1); } .hub-date-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; border-radius: 10px; font-family: var(--hub-font); font-size: 14px; font-weight: 500; color: var(--clr-text); cursor: pointer; transition: background 0.12s; } .hub-date-menu__item:hover, .hub-date-menu__item:active { background: var(--clr-surface-2); } .hub-date-menu__item--active { color: var(--hub-green); } .hub-date-menu__icon { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; } /* Bucket Detail Header */ .bucket-detail-header { padding: 1rem; border-bottom: 1px solid var(--clr-border); margin-bottom: 1rem; } .bucket-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .bucket-detail-back-btn { background: none; border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-accent); font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; cursor: pointer; margin-left: auto; align-self: flex-end; } .bucket-header-left { display: flex; flex-direction: column; gap: 2px; } .bucket-detail-name { font-size: 30px; font-weight: 900; color: var(--clr-accent); margin: 0; } .bucket-detail-date-label { font-size: 20px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.5px; line-height: 1.1; } .bucket-detail-date-label.today { color: var(--clr-text); } /* ═══════════════════════════════════════════════════════════════════════════ Tasks ═══════════════════════════════════════════════════════════════════════════ */ .tasks-daily-list { padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 6px; } .tasks-empty-row, .tasks-add-row-below { padding: 4px 0; } .tasks-add-link { background: transparent; border: none; color: var(--clr-accent); font-size: 0.88rem; font-weight: 600; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .tasks-add-link:hover { text-decoration: underline; } /* Row */ .tasks-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--clr-border); min-width: 0; } .tasks-row:last-of-type { border-bottom: none; } .tasks-row--done .tasks-text { text-decoration: line-through; color: var(--clr-text-2); opacity: 0.7; } .tasks-check { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--clr-accent); cursor: pointer; } .tasks-text { flex: 1; font-size: 0.92rem; line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tasks-cat-pill { flex-shrink: 0; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--clr-accent-dim); color: var(--clr-accent); white-space: nowrap; } .tasks-due { flex-shrink: 0; font-size: 0.78rem; color: var(--clr-text-2); white-space: nowrap; } .tasks-due--overdue { flex-shrink: 0; font-size: 0.78rem; color: var(--clr-error); font-weight: 600; white-space: nowrap; } .tasks-no-due { flex-shrink: 0; font-size: 0.75rem; color: var(--clr-text-2); opacity: 0.7; font-style: italic; } .tasks-completed-date { flex-shrink: 0; font-size: 0.75rem; color: var(--clr-text-2); white-space: nowrap; } .tasks-edit-btn { flex-shrink: 0; background: transparent; border: none; color: var(--clr-text-2); cursor: pointer; padding: 4px; border-radius: 6px; opacity: 0.6; transition: opacity var(--transition); -webkit-tap-highlight-color: transparent; } .tasks-edit-btn:hover { opacity: 1; } /* Form */ .tasks-form { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .tasks-form-title { font-weight: 600; font-size: 0.92rem; } .tasks-form-input { width: 100%; padding: 8px 10px; border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.92rem; font-family: inherit; background: var(--clr-surface); color: var(--clr-text); box-sizing: border-box; } .tasks-form-input:focus { outline: none; border-color: var(--clr-accent); } .tasks-form-cats { display: flex; flex-wrap: wrap; gap: 6px; } .tasks-form-cat-pill { font-size: 0.78rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); -webkit-tap-highlight-color: transparent; } .tasks-form-cat-pill--active { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); } .tasks-form-cat-add { font-style: italic; opacity: 0.8; } /* Due Date custom widget */ .tasks-due-field { display: flex; flex-direction: column; gap: 4px; } .tasks-due-label { font-size: 0.82rem; font-weight: 600; color: var(--clr-text-2); } .tasks-due-picker-wrap { position: relative; display: inline-block; } .tasks-due-input-hidden { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; top: 0; left: 0; } .tasks-due-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text-2); cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: border-color var(--transition), color var(--transition); } .tasks-due-trigger:hover { border-color: var(--clr-accent); color: var(--clr-accent); } .tasks-due-trigger--set { color: var(--clr-text); } .tasks-due-trigger-date { font-size: 0.85rem; font-weight: 500; } .tasks-form-notes { width: 100%; padding: 8px 10px; border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.88rem; font-family: inherit; background: var(--clr-surface); color: var(--clr-text); box-sizing: border-box; resize: vertical; } .tasks-form-notes:focus { outline: none; border-color: var(--clr-accent); } .tasks-form-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--clr-text-2); } .tasks-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; } .tasks-form-cancel { background: transparent; border: 1px solid var(--clr-border); border-radius: 8px; padding: 7px 14px; font-size: 0.88rem; font-family: inherit; color: var(--clr-text-2); cursor: pointer; } .tasks-form-cancel:hover { background: var(--clr-surface-2); } .tasks-form-save { background: var(--clr-accent); color: #fff; border: none; border-radius: 8px; padding: 7px 16px; font-size: 0.88rem; font-family: inherit; font-weight: 600; cursor: pointer; transition: background var(--transition); } .tasks-form-save:hover { background: var(--clr-accent-h); } .tasks-form-delete { background: transparent; border: 1px solid var(--clr-error); border-radius: 8px; padding: 7px 14px; font-size: 0.88rem; font-family: inherit; color: var(--clr-error); cursor: pointer; margin-right: auto; } .tasks-form-delete:hover { background: var(--clr-error-bg, rgba(198,40,40,0.08)); } /* Tasks Tab */ .tasks-tab-header { padding: 16px 16px 4px; } .tasks-tab-title { font-size: 1.1rem; font-weight: 700; margin: 0; } .tasks-search-row { padding: 8px 16px; } .tasks-search-input { width: 100%; padding: 8px 12px; border: 1px solid var(--clr-border); border-radius: 10px; font-size: 0.92rem; font-family: inherit; background: var(--clr-surface-2); color: var(--clr-text); box-sizing: border-box; } .tasks-search-input:focus { outline: none; border-color: var(--clr-accent); } .tasks-filter-row { display: flex; gap: 6px; padding: 4px 16px 8px; flex-wrap: wrap; } .tasks-filter-pill { font-size: 0.8rem; font-weight: 600; padding: 5px 13px; border-radius: 999px; border: 1.5px solid var(--clr-border); background: transparent; color: var(--clr-text-2); cursor: pointer; transition: background var(--transition), color var(--transition); -webkit-tap-highlight-color: transparent; } .tasks-filter-pill--active { background: var(--clr-accent-dim); color: var(--clr-accent); border-color: var(--clr-accent); } .tasks-new-btn { display: block; width: calc(100% - 32px); margin: 0 16px 12px; padding: 10px 0; background: var(--clr-accent); color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-family: inherit; font-weight: 600; cursor: pointer; transition: background var(--transition); } .tasks-new-btn:hover { background: var(--clr-accent-h); } .tasks-empty { padding: 32px 16px; text-align: center; color: var(--clr-text-2); font-size: 0.92rem; } /* Groups */ .tasks-group { margin-bottom: 4px; } .tasks-group-header { display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; background: var(--clr-surface-2); } .tasks-group-chevron { background: transparent; border: none; color: var(--clr-text-2); font-size: 0.9rem; cursor: pointer; padding: 0; flex-shrink: 0; } .tasks-group-label { flex: 1; font-weight: 600; font-size: 0.85rem; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.04em; } .tasks-group-count { font-size: 0.78rem; color: var(--clr-text-2); flex-shrink: 0; } .tasks-group-order-btns { display: flex; gap: 4px; } .tasks-order-btn { background: transparent; border: 1px solid var(--clr-border); border-radius: 6px; padding: 2px 6px; font-size: 0.78rem; cursor: pointer; color: var(--clr-text-2); transition: background var(--transition); -webkit-tap-highlight-color: transparent; } .tasks-order-btn:hover { background: var(--clr-surface-2); } .tasks-group .tasks-row { padding-left: 16px; padding-right: 16px; } .tasks-show-more { display: block; width: 100%; padding: 8px 16px; background: transparent; border: none; color: var(--clr-accent); font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; } .tasks-show-more:hover { text-decoration: underline; } .tasks-form--tab { margin: 12px 16px; } /* ─── Tasks Tab: Hub Grid Layout ──────────────────────────────────────────── */ /* Header */ .tasks-hub-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 20px 12px; padding-top: max(22px, env(safe-area-inset-top, 22px)); font-family: var(--hub-font); } .tasks-hub-header__left { display: flex; flex-direction: column; gap: 6px; } .tasks-hub-title { font-size: 28px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.3px; line-height: 1; font-family: var(--hub-font); margin: 0; } .tasks-hub-summary { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .tasks-hub-chip { font-size: 0.72rem; font-weight: 600; font-family: var(--hub-font); background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 20px; padding: 2px 9px; color: var(--clr-text-2); } .tasks-hub-chip--due { background: rgba(212,150,90,0.12); border-color: rgba(212,150,90,0.3); color: var(--hub-amber); } .tasks-hub-chip--empty { opacity: 0.6; } .tasks-hub-add-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--hub-green-dim); border: 1.5px solid var(--hub-green-bd); color: var(--hub-green); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform 0.12s, background 0.15s; -webkit-tap-highlight-color: transparent; } .tasks-hub-add-btn:active { transform: scale(0.88); } /* Search */ .tasks-hub-search-row { padding: 0 16px 14px; } .tasks-hub-search-wrap { position: relative; display: flex; align-items: center; } .tasks-hub-search-icon { position: absolute; left: 12px; color: var(--clr-text-2); pointer-events: none; opacity: 0.7; } .tasks-hub-search { width: 100%; padding: 10px 12px 10px 36px; border: 1.5px solid var(--clr-border); border-radius: 12px; background: var(--clr-surface); color: var(--clr-text); font-size: 0.88rem; font-family: var(--hub-font); appearance: none; -webkit-appearance: none; } .tasks-hub-search:focus { outline: none; border-color: var(--clr-accent); } /* Empty state */ .tasks-hub-empty { padding: 60px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .tasks-hub-empty-icon { font-size: 48px; opacity: 0.25; } .tasks-hub-empty-msg { color: var(--clr-text-2); font-size: 0.92rem; margin: 0; font-family: var(--hub-font); } .tasks-hub-empty-btn { background: var(--hub-green-dim); border: 1.5px solid var(--hub-green-bd); color: var(--hub-green); border-radius: 20px; padding: 9px 22px; font-size: 0.88rem; font-weight: 600; font-family: var(--hub-font); cursor: pointer; transition: background 0.15s; } /* Category tile grid */ .tasks-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 28px; } /* Individual tile */ .tasks-tile { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--hub-radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.13s; font-family: var(--hub-font); min-height: 160px; -webkit-tap-highlight-color: transparent; } .tasks-tile:active { transform: scale(0.965); } .tasks-tile__bar { height: 5px; flex-shrink: 0; background: linear-gradient(90deg, var(--hub-green) 0%, #82d4a8 50%, var(--hub-green) 100%); } .tasks-tile__bar--urgent { background: linear-gradient(90deg, var(--clr-error) 0%, #ef9a9a 50%, var(--clr-error) 100%); } .tasks-tile__bar--done { background: linear-gradient(90deg, var(--clr-text-2) 0%, transparent 100%); opacity: 0.25; } .tasks-tile__inner { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .tasks-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; } .tasks-tile__name { font-size: 15px; font-weight: 800; color: var(--clr-text); letter-spacing: -0.1px; line-height: 1.2; font-family: var(--hub-font); word-break: break-word; } .tasks-tile__count { font-size: 22px; font-weight: 800; letter-spacing: -1px; color: var(--hub-amber); line-height: 1; flex-shrink: 0; font-family: var(--hub-font); } .tasks-tile__count--urgent { color: var(--clr-error); } .tasks-tile__count--done { font-size: 15px; color: var(--hub-green); font-weight: 700; } /* Status badges on tile */ .tasks-tile__badge { display: inline-flex; align-items: center; font-size: 0.67rem; font-weight: 700; font-family: var(--hub-font); letter-spacing: 0.02em; border-radius: 6px; padding: 2px 6px; align-self: flex-start; } .tasks-tile__badge--urgent { background: rgba(198,40,40,0.1); color: var(--clr-error); border: 1px solid rgba(198,40,40,0.22); } .tasks-tile__badge--due { background: var(--hub-amber-dim); color: var(--hub-amber); border: 1px solid var(--hub-amber-bd); } .tasks-tile__badge--done { background: var(--hub-green-dim); color: var(--hub-green); border: 1px solid var(--hub-green-bd); } /* Task previews inside tile */ .tasks-tile__preview { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .tasks-tile__preview-item { display: flex; align-items: center; gap: 6px; } .tasks-tile__preview-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--clr-border); flex-shrink: 0; } .tasks-tile__preview-dot.is-overdue { background: var(--clr-error); } .tasks-tile__preview-text { font-size: 0.75rem; color: var(--clr-text-2); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--hub-font); } .tasks-tile__preview-more { font-size: 0.7rem; color: var(--clr-text-2); opacity: 0.55; font-style: italic; padding-left: 11px; font-family: var(--hub-font); } .tasks-tile__all-done { font-size: 0.75rem; color: var(--hub-green); font-style: italic; font-family: var(--hub-font); opacity: 0.8; } .tasks-tile__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .tasks-tile__done-label { font-size: 0.7rem; color: var(--clr-text-2); opacity: 0.55; font-family: var(--hub-font); } .tasks-tile__open-hint { font-size: 0.67rem; color: var(--clr-text-2); opacity: 0.45; font-style: italic; font-family: var(--hub-font); margin-left: auto; } /* ─── Category Panel ──────────────────────────────────────────────────────── */ .tasks-panel-header { display: flex; align-items: center; padding: 14px 16px 12px; padding-top: max(14px, env(safe-area-inset-top, 14px)); gap: 10px; font-family: var(--hub-font); border-bottom: 1px solid var(--clr-border); margin-bottom: 4px; } .tasks-panel-back { display: flex; align-items: center; gap: 2px; color: var(--clr-accent); font-size: 0.84rem; font-weight: 600; font-family: var(--hub-font); background: none; border: none; cursor: pointer; padding: 6px 4px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .tasks-panel-back-label { font-size: 0.84rem; } .tasks-panel-title { flex: 1; font-size: 18px; font-weight: 800; font-family: var(--hub-font); color: var(--clr-text); letter-spacing: -0.2px; text-align: center; margin: 0; } .tasks-panel-add-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--hub-green-dim); border: 1.5px solid var(--hub-green-bd); color: var(--hub-green); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform 0.12s; -webkit-tap-highlight-color: transparent; } .tasks-panel-add-btn:active { transform: scale(0.88); } /* Section label + rule (same pattern as settings/meds-manage) */ .tasks-panel-section-header { display: flex; align-items: center; gap: 9px; margin: 16px 20px 8px; } .tasks-panel-section-label { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-accent); white-space: nowrap; font-family: var(--hub-font); } .tasks-panel-section-rule { flex: 1; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, var(--clr-accent), #d4a017, transparent); } .tasks-panel-section-count { font-size: 0.72rem; font-weight: 700; background: var(--hub-green-dim); border: 1px solid var(--hub-green-bd); color: var(--hub-green); border-radius: 10px; padding: 1px 7px; font-family: var(--hub-font); } .tasks-panel-section-count--muted { background: var(--clr-surface-2); border-color: var(--clr-border); color: var(--clr-text-2); } /* Task list body container */ .tasks-panel-body { border: 1px solid var(--clr-border); border-radius: 14px; overflow: hidden; margin: 0 16px; } .tasks-panel-body--completed { opacity: 0.65; margin-top: 8px; } /* Individual task row */ .tasks-panel-row { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--clr-border); background: var(--clr-surface); transition: background 0.1s; } .tasks-panel-row:last-child { border-bottom: none; } .tasks-panel-row:active { background: var(--clr-surface-2); } .tasks-panel-row--done .tasks-panel-row__text { text-decoration: line-through; color: var(--clr-text-2); opacity: 0.55; } /* Circle checkbox */ .tasks-panel-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--clr-border); background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: transparent; transition: border-color 0.15s, background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; } .tasks-panel-check:hover { border-color: var(--hub-green); } .tasks-panel-check.is-done { background: var(--hub-green); border-color: var(--hub-green); color: #fff; } .tasks-panel-row__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tasks-panel-row__text { font-size: 0.92rem; font-weight: 500; color: var(--clr-text); font-family: var(--hub-font); line-height: 1.35; } .tasks-panel-row__due { font-size: 0.75rem; color: var(--clr-text-2); font-family: var(--hub-font); } .tasks-panel-row__due.is-overdue { color: var(--clr-error); font-weight: 600; } .tasks-panel-row__due.is-today { color: var(--hub-amber); font-weight: 600; } .tasks-panel-row__notes { font-size: 0.75rem; color: var(--clr-text-2); opacity: 0.7; font-style: italic; font-family: var(--hub-font); } .tasks-panel-edit { color: var(--clr-text-2); opacity: 0.45; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; } .tasks-panel-edit:hover { opacity: 1; color: var(--clr-accent); } /* Empty state in panel */ .tasks-panel-empty { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px; background: var(--clr-surface); } .tasks-panel-empty-text { font-size: 0.88rem; color: var(--clr-text-2); font-style: italic; } .tasks-panel-empty-add { font-size: 0.82rem; font-weight: 600; color: var(--hub-green); background: none; border: none; cursor: pointer; font-family: var(--hub-font); } /* Completed tasks toggle */ .tasks-completed-toggle { display: flex; align-items: center; gap: 8px; padding: 12px 20px; margin-top: 8px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; color: var(--clr-text-2); font-size: 0.82rem; font-weight: 600; font-family: var(--hub-font); -webkit-tap-highlight-color: transparent; } .tasks-completed-toggle:hover { color: var(--clr-text); } .tasks-completed-chevron { color: var(--clr-text-2); flex-shrink: 0; } /* Search results wrapper */ .tasks-search-results { padding-bottom: 24px; } /* Hub badge */ .hub-tile__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; background: var(--clr-accent); color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: 999px; line-height: 1; vertical-align: middle; } /* ── Supply Alert Banner ─────────────────────────────────────────────────── */ .supply-alert-banner { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; } .supply-alert-card { background: #fff8e1; border-left: 3px solid #f57f17; border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } @media (prefers-color-scheme: dark) { .supply-alert-card { background: #3a2a00; } } [data-theme="dark"] .supply-alert-card { background: #3a2a00; } [data-theme="light"] .supply-alert-card { background: #fff8e1; } .supply-alert-top { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--clr-text); } .supply-alert-icon { color: #f57f17; flex-shrink: 0; } .supply-alert-name { flex: 1; } .supply-alert-msg { color: var(--clr-text-2); font-weight: 400; font-size: 0.82rem; } .supply-alert-actions { display: flex; gap: 6px; flex-wrap: wrap; } .supply-alert-btn { flex: 1; min-width: 80px; padding: 6px 10px; border-radius: 6px; border: 1px solid #f57f17; background: transparent; color: #f57f17; font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .supply-alert-btn:hover { background: #f57f17; color: #fff; } .supply-alert-btn:disabled { opacity: 0.4; cursor: not-allowed; } .supply-alert-error { font-size: 0.78rem; color: var(--clr-error); margin-top: 2px; } /* ── Pill Box Fill View ───────────────────────────────────────────────────── */ .hl-meds-subtabs { display: flex; gap: 0; border-bottom: 1px solid var(--clr-border); margin-bottom: 12px; } .hl-meds-subtab { flex: 1; padding: 8px 4px; border: none; background: transparent; color: var(--clr-text-2); font-size: 0.85rem; font-weight: 500; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .hl-meds-subtab.active { color: var(--clr-accent); border-bottom-color: var(--clr-accent); font-weight: 600; } .hl-fillbox-group-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-2); padding: 10px 14px 4px; } .hl-fillbox-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); } .hl-fillbox-row.hl-fillbox-row--checked { opacity: 0.45; } .hl-fillbox-row.hl-fillbox-row--checked .hl-fillbox-name { text-decoration: line-through; } .hl-fillbox-check { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--clr-accent); cursor: pointer; } .hl-fillbox-info { flex: 1; min-width: 0; } .hl-fillbox-name { font-size: 0.9rem; font-weight: 500; color: var(--clr-text); } .hl-fillbox-dose { font-size: 0.78rem; color: var(--clr-text-2); margin-top: 1px; } /* Flag button — 18×18px icon inside a 44×44px tap target */ .hl-flag-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; border-radius: 8px; flex-shrink: 0; color: var(--clr-text-2); padding: 0; } .hl-flag-btn.hl-flag-btn--set-future { color: #f57f17; } .hl-flag-btn.hl-flag-btn--set-past { color: var(--clr-error); } .hl-flag-btn svg { width: 18px; height: 18px; } /* Supply chip on med row */ .hl-supply-chip { font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .hl-supply-chip--future { background: #fff3e0; color: #e65100; } .hl-supply-chip--past { background: #ffebee; color: var(--clr-error); } @media (prefers-color-scheme: dark) { .hl-supply-chip--future { background: #3a2000; color: #ffb74d; } .hl-supply-chip--past { background: #3b0000; color: #ef5350; } } [data-theme="dark"] .hl-supply-chip--future { background: #3a2000; color: #ffb74d; } [data-theme="dark"] .hl-supply-chip--past { background: #3b0000; color: #ef5350; } [data-theme="light"] .hl-supply-chip--future { background: #fff3e0; color: #e65100; } [data-theme="light"] .hl-supply-chip--past { background: #ffebee; color: var(--clr-error); } /* Inline date picker row */ .hl-picker-row { background: var(--clr-surface-2); border-bottom: 1px solid var(--clr-border); padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; color: var(--clr-text-2); } .hl-picker-row label { flex-shrink: 0; } .hl-picker-date-input { flex: 1; min-width: 130px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text); font-size: 0.85rem; font-family: inherit; } .hl-picker-save-btn, .hl-picker-clear-btn, .hl-picker-close-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text-2); font-size: 0.82rem; font-family: inherit; cursor: pointer; } .hl-picker-save-btn { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; font-weight: 600; }