Spaces:
Sleeping
Sleeping
| @import "./tokens.css"; | |
| @import "./reset.css"; | |
| @import "./materials.css"; | |
| .app-shell { | |
| min-height: 100dvh; | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--bg); | |
| } | |
| .top-bar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| min-height: calc(var(--hit) + var(--safe-top)); | |
| padding: calc(0.5rem + var(--safe-top)) var(--pad) 0.75rem; | |
| background: rgba(235, 231, 224, 0.82); | |
| backdrop-filter: saturate(1.4) blur(12px); | |
| -webkit-backdrop-filter: saturate(1.4) blur(12px); | |
| border-bottom: 1px solid var(--separator); | |
| } | |
| .top-bar h1, | |
| .page-title { | |
| margin: 0; | |
| font-size: 28px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 1.1; | |
| } | |
| .page { | |
| flex: 1; | |
| width: min(40rem, 100%); | |
| margin: 0 auto; | |
| padding: 1.25rem var(--pad) calc(1.5rem + var(--safe-bottom) + var(--tab-h) + 0.75rem); | |
| } | |
| .home-page { | |
| gap: 16px; | |
| animation: card-in 180ms ease both; | |
| } | |
| .stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .field-label { | |
| display: block; | |
| margin-bottom: 0.4rem; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| .field-input, | |
| .field-textarea { | |
| width: 100%; | |
| min-height: var(--hit); | |
| padding: 0.85rem 1rem; | |
| border-radius: 16px; | |
| border: 1px solid var(--separator); | |
| background: var(--card); | |
| color: var(--text); | |
| } | |
| .field-textarea { | |
| min-height: 7rem; | |
| resize: vertical; | |
| line-height: 1.47; | |
| } | |
| .muted { color: var(--text-secondary); } | |
| .tertiary { color: var(--text-tertiary); } | |
| .error-text { color: var(--danger); font-size: 0.9rem; } | |
| .chip-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .chip { | |
| min-height: var(--hit); | |
| padding: 0 0.95rem; | |
| border-radius: 999px; | |
| border: 1px solid var(--separator); | |
| background: var(--card); | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| } | |
| .chip[aria-pressed="true"] { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .chip.result-worked[aria-pressed="true"] { | |
| border-color: var(--ok); | |
| background: var(--ok-bg); | |
| color: var(--ok); | |
| } | |
| .chip.result-partial[aria-pressed="true"] { | |
| border-color: var(--warn); | |
| background: var(--warn-bg); | |
| color: var(--warn); | |
| } | |
| .chip.result-failed[aria-pressed="true"] { | |
| border-color: var(--danger); | |
| background: var(--danger-bg); | |
| color: var(--danger); | |
| } | |
| .chip.result-pending[aria-pressed="true"] { | |
| border-color: var(--pending-border); | |
| background: var(--pending-bg); | |
| color: var(--accent); | |
| } | |
| .slider-wrap { | |
| display: grid; | |
| gap: 0.5rem; | |
| } | |
| .slider-wrap input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--accent); | |
| } | |
| .more-block { | |
| border-top: 1px solid var(--separator); | |
| padding-top: 1rem; | |
| } | |
| .login-page { | |
| min-height: 100dvh; | |
| display: grid; | |
| place-items: center; | |
| padding: var(--pad); | |
| padding-top: calc(var(--pad) + var(--safe-top)); | |
| padding-bottom: calc(var(--pad) + var(--safe-bottom)); | |
| background: var(--bg); | |
| } | |
| .login-card { | |
| width: min(22rem, 100%); | |
| padding: 1.5rem; | |
| } | |
| .login-card h1 { | |
| margin: 0 0 0.35rem; | |
| font-size: 32px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 1.1; | |
| } | |
| .toast-host { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: calc(0.75rem + var(--safe-top)); | |
| z-index: 50; | |
| display: flex; | |
| justify-content: center; | |
| pointer-events: none; | |
| padding: 0 var(--pad); | |
| } | |
| .toast { | |
| pointer-events: auto; | |
| max-width: 24rem; | |
| width: 100%; | |
| padding: 0.85rem 1rem; | |
| border-radius: 16px; | |
| background: var(--card); | |
| border: 1px solid var(--separator); | |
| box-shadow: var(--shadow); | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .toast.error { | |
| border-color: var(--danger); | |
| background: var(--danger-bg); | |
| } | |
| .pressable { | |
| touch-action: manipulation; | |
| -webkit-tap-highlight-color: transparent; | |
| transform-origin: center; | |
| cursor: pointer; | |
| transition: transform 0.12s ease; | |
| } | |
| .pressable:active { transform: scale(0.97); } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: var(--btn-h); | |
| padding: 0 1.25rem; | |
| border-radius: 999px; | |
| font-weight: 600; | |
| transition: transform 0.12s ease, box-shadow 0.16s ease; | |
| } | |
| .btn:disabled { | |
| opacity: 0.4; | |
| pointer-events: none; | |
| } | |
| .btn-primary { | |
| background: var(--ink); | |
| color: #fbf9f5; | |
| box-shadow: var(--shadow-2); | |
| } | |
| .btn-secondary { | |
| background: var(--card); | |
| border: 1px solid var(--separator); | |
| color: var(--text); | |
| box-shadow: var(--shadow-1); | |
| } | |
| .btn-destructive { | |
| background: var(--danger-bg); | |
| color: var(--danger); | |
| border: 1px solid rgba(168, 82, 62, 0.25); | |
| } | |
| .btn-plain { | |
| color: var(--text-secondary); | |
| min-height: var(--hit); | |
| padding: 0 0.35rem; | |
| justify-content: flex-start; | |
| font-weight: 500; | |
| } | |
| .btn-large { | |
| min-height: var(--btn-h); | |
| width: 100%; | |
| font-size: 1.0625rem; | |
| } | |
| /* —— Bottom nav + FAB —— */ | |
| .tab-bar { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 30; | |
| min-height: calc(var(--tab-h) + var(--safe-bottom)); | |
| padding-bottom: var(--safe-bottom); | |
| background: rgba(251, 249, 245, 0.9); | |
| backdrop-filter: saturate(1.4) blur(16px); | |
| -webkit-backdrop-filter: saturate(1.4) blur(16px); | |
| border-top: 1px solid var(--separator); | |
| } | |
| .tab-bar-inner { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 60px 1fr 1fr; | |
| align-items: stretch; | |
| min-height: var(--tab-h); | |
| padding: 0 0.35rem; | |
| } | |
| .tab-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.2rem; | |
| min-height: var(--tab-h); | |
| color: var(--text-tertiary); | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.01em; | |
| } | |
| .tab-item.active { | |
| color: var(--accent-ink); | |
| font-weight: 700; | |
| } | |
| .tab-item.active svg { | |
| color: var(--accent); | |
| } | |
| .tab-fab-slot { | |
| width: var(--fab-size); | |
| } | |
| .tab-fab { | |
| position: absolute; | |
| left: 50%; | |
| top: -12px; | |
| transform: translateX(-50%); | |
| width: var(--fab-size); | |
| height: var(--fab-size); | |
| border-radius: 999px; | |
| background: var(--ink); | |
| color: #fbf9f5; | |
| box-shadow: var(--shadow-3); | |
| border: 4px solid var(--bg); | |
| display: grid; | |
| place-items: center; | |
| } | |
| /* —— Home —— */ | |
| .home-greeting { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| } | |
| .greeting-title { | |
| margin: 0; | |
| font-size: 32px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 1.1; | |
| } | |
| .greeting-sub { | |
| margin: 0.35rem 0 0; | |
| color: var(--text-secondary); | |
| font-size: 15px; | |
| } | |
| .avatar-circle { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 999px; | |
| background: var(--accent-tint); | |
| color: var(--accent-ink); | |
| display: grid; | |
| place-items: center; | |
| font-weight: 700; | |
| font-size: 14px; | |
| flex-shrink: 0; | |
| } | |
| .week-calendar { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 0.35rem; | |
| } | |
| .week-cal-cell { | |
| display: grid; | |
| justify-items: center; | |
| gap: 0.25rem; | |
| padding: 0.55rem 0.2rem; | |
| border-radius: 16px; | |
| background: var(--card); | |
| border: 1px solid var(--separator); | |
| box-shadow: var(--shadow-1); | |
| } | |
| .week-cal-cell.filled { | |
| background: var(--accent-fill); | |
| border-color: var(--accent-tint); | |
| } | |
| .week-cal-cell.filled .week-cal-num { color: var(--accent-ink); } | |
| .week-cal-cell.today { | |
| background: var(--ink); | |
| border-color: var(--ink); | |
| box-shadow: var(--shadow-2); | |
| color: #fbf9f5; | |
| } | |
| .week-cal-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: inherit; | |
| opacity: 0.7; | |
| } | |
| .week-cal-cell.today .week-cal-label { opacity: 0.85; } | |
| .week-cal-num { | |
| font-size: 15px; | |
| font-weight: 700; | |
| } | |
| .week-cal-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 999px; | |
| background: transparent; | |
| border: 1px solid var(--separator); | |
| } | |
| .week-cal-cell.filled .week-cal-dot { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .week-cal-cell.today.filled .week-cal-dot, | |
| .week-cal-cell.today .week-cal-dot { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .pending-banner-card { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: center; | |
| gap: 0.75rem; | |
| min-height: 100px; | |
| padding: 0.75rem 1rem; | |
| border-radius: var(--radius); | |
| background: var(--pending-bg); | |
| border: 1.5px solid var(--pending-border); | |
| text-align: left; | |
| box-shadow: var(--shadow); | |
| } | |
| .pending-illu { | |
| width: 88px; | |
| height: auto; | |
| } | |
| .pending-copy { | |
| display: grid; | |
| gap: 0.15rem; | |
| } | |
| .pending-copy strong { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .pending-copy span { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .hero-score-card { | |
| display: grid; | |
| grid-template-columns: 1fr 38%; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 18px; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, var(--ink) 0%, #3a3833 100%); | |
| border-color: var(--ink); | |
| color: #fbf9f5; | |
| box-shadow: var(--shadow-3); | |
| } | |
| .hero-score-label { | |
| color: var(--accent-tint); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .hero-score-value { | |
| margin: 0.15rem 0; | |
| font-size: 54px; | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| line-height: 1; | |
| } | |
| .hero-score-sub { | |
| margin: 0; | |
| color: rgba(251, 249, 245, 0.7); | |
| font-size: 14px; | |
| } | |
| .hero-illu { | |
| width: 100%; | |
| height: auto; | |
| justify-self: end; | |
| } | |
| .week-progress-card { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 0.75rem; | |
| align-items: center; | |
| padding: 16px 18px; | |
| } | |
| .week-progress-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 0.75rem; | |
| margin-bottom: 0.45rem; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .week-progress-row strong { | |
| color: var(--text); | |
| font-size: 18px; | |
| } | |
| .progress-track { | |
| height: 8px; | |
| border-radius: 999px; | |
| background: var(--surface-secondary); | |
| overflow: hidden; | |
| margin-top: 0.35rem; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: inherit; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-ink)); | |
| } | |
| .scores-illu { | |
| width: 72px; | |
| height: auto; | |
| } | |
| .section-title { | |
| margin: 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .entry-list { | |
| display: grid; | |
| gap: 0.65rem; | |
| } | |
| .entry-row { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 0.75rem; | |
| align-items: start; | |
| padding: 16px; | |
| min-height: var(--hit); | |
| text-align: left; | |
| border-radius: var(--radius); | |
| background: var(--card); | |
| border: 1px solid var(--separator); | |
| box-shadow: var(--shadow); | |
| } | |
| .entry-row.pending-row { | |
| background: var(--pending-bg); | |
| border-color: var(--pending-border); | |
| } | |
| .entry-row-main { | |
| display: grid; | |
| gap: 0.25rem; | |
| min-width: 0; | |
| } | |
| .entry-preview { | |
| color: var(--text); | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| } | |
| .entry-row time { | |
| color: var(--text-tertiary); | |
| font-size: 13px; | |
| } | |
| .result-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| padding: 0.3rem 0.55rem; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| white-space: nowrap; | |
| } | |
| .result-chip.result-worked { background: var(--ok-bg); color: var(--ok); } | |
| .result-chip.result-partial { background: var(--warn-bg); color: var(--warn); } | |
| .result-chip.result-failed { background: var(--danger-bg); color: var(--danger); } | |
| .result-chip.result-pending { | |
| background: var(--pending-bg); | |
| color: var(--accent); | |
| border: 1px solid var(--pending-border); | |
| } | |
| .quick-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .quick-chip { | |
| min-height: 40px; | |
| padding: 0 1rem; | |
| border-radius: 999px; | |
| background: var(--surface-secondary); | |
| color: var(--text); | |
| font-weight: 500; | |
| font-size: 14px; | |
| } | |
| .search-field { | |
| position: relative; | |
| display: block; | |
| } | |
| .search-field svg { | |
| position: absolute; | |
| left: 0.9rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-tertiary); | |
| pointer-events: none; | |
| } | |
| .search-input { | |
| padding-left: 2.4rem; | |
| } | |
| .empty-state { | |
| padding: 2rem 1.25rem; | |
| text-align: center; | |
| display: grid; | |
| gap: 0.75rem; | |
| justify-items: center; | |
| } | |
| .detail-card, | |
| .form-card, | |
| .stats-card, | |
| .settings-card, | |
| .coach-result, | |
| .score-card { | |
| padding: 16px 18px; | |
| } | |
| .detail-snippet { | |
| margin: 0; | |
| font-size: 18px; | |
| font-weight: 600; | |
| line-height: 1.35; | |
| } | |
| .meta-grid { | |
| display: grid; | |
| gap: 0.75rem; | |
| } | |
| .section-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .linkish { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.15rem; | |
| color: var(--accent); | |
| font-weight: 600; | |
| font-size: 14px; | |
| background: none; | |
| border: none; | |
| padding: 0; | |
| } | |
| .pending-focus { | |
| border: 1.5px solid var(--pending-border); | |
| background: var(--pending-bg); | |
| } | |
| .resolve-snippet { | |
| padding: 1rem; | |
| } | |
| .resolve-activity { | |
| margin: 0 0 0.35rem; | |
| font-size: 13px; | |
| } | |
| .resolve-sticky { | |
| position: sticky; | |
| bottom: 0; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.25rem; | |
| background: linear-gradient(transparent, var(--card) 28%); | |
| } | |
| .sheet-tall { | |
| max-height: 85dvh ; | |
| } | |
| .gate-loading { | |
| min-height: 100dvh; | |
| display: grid; | |
| place-items: center; | |
| color: var(--text-secondary); | |
| background: var(--bg); | |
| } | |
| .top-action { | |
| margin-left: auto; | |
| min-width: var(--hit); | |
| min-height: var(--hit); | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .sheet-layer { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 100; | |
| } | |
| .sheet-scrim { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #202020; | |
| opacity: 0; | |
| } | |
| .sheet-panel { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| max-height: min(82dvh, 44rem); | |
| overflow: auto; | |
| padding-bottom: var(--safe-bottom); | |
| will-change: transform; | |
| } | |
| .sheet-handle-zone { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| display: grid; | |
| justify-items: center; | |
| gap: 0.45rem; | |
| padding: 0.5rem var(--pad) 0.75rem; | |
| background: inherit; | |
| touch-action: none; | |
| user-select: none; | |
| } | |
| .sheet-handle { | |
| width: 2.25rem; | |
| height: 0.3rem; | |
| border-radius: 99px; | |
| background: var(--text-tertiary); | |
| } | |
| .sheet-handle-zone h2 { | |
| margin: 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .sheet-content { | |
| padding: 0 var(--pad) 1.25rem; | |
| } | |
| .menu-list { display: grid; } | |
| .menu-row { | |
| min-height: 3.25rem; | |
| width: 100%; | |
| text-align: left; | |
| border-bottom: 1px solid var(--separator); | |
| color: var(--text); | |
| } | |
| .destructive-text { color: var(--danger); } | |
| .result-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| } | |
| .result-worked { color: var(--ok); } | |
| .result-partial { color: var(--warn); } | |
| .result-failed { color: var(--danger); } | |
| .result-pending { color: var(--accent); } | |
| .detail-card p, | |
| .coach-text { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| } | |
| .result-heading, | |
| .status-row, | |
| .score-card, | |
| .toggle-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 0.75rem; | |
| } | |
| .source-badge { | |
| padding: 0.2rem 0.55rem; | |
| border-radius: 99px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| } | |
| .source-badge.rules { background: var(--warn-bg); color: var(--warn); } | |
| .source-badge.model { background: var(--accent-tint); color: var(--accent-ink); } | |
| .flags { color: var(--text-tertiary); font-size: 0.68rem; text-align: right; } | |
| .pick-list { | |
| display: grid; | |
| overflow: hidden; | |
| border-radius: var(--radius); | |
| background: var(--surface-secondary); | |
| } | |
| .pick-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 0.75rem; | |
| min-height: 3rem; | |
| padding: 0.65rem 0.85rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--separator); | |
| } | |
| .pick-row span:last-child { white-space: nowrap; font-size: 0.75rem; } | |
| .disclaimer { font-size: 0.8rem; text-align: center; } | |
| .coach-input { min-height: 9rem; } | |
| .segment-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } | |
| .segment { | |
| min-width: var(--hit); | |
| min-height: var(--hit); | |
| padding: 0 0.75rem; | |
| border: 1px solid var(--separator); | |
| border-radius: 999px; | |
| color: var(--text-secondary); | |
| background: var(--card); | |
| } | |
| .segment[aria-pressed="true"] { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .toggle-row { min-height: var(--hit); } | |
| .toggle-row input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); } | |
| .score-card > div { display: grid; } | |
| .score-card strong, | |
| .score-readout { font-size: 1.5rem; font-weight: 700; } | |
| .stats-card { display: grid; gap: 0.85rem; } | |
| .outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } | |
| .outcome-grid div { display: grid; text-align: center; gap: 0.2rem; } | |
| .outcome-grid strong, | |
| .large-number { font-size: 1.5rem; } | |
| .stat-row { display: grid; gap: 0.35rem; } | |
| .stat-row > div:first-child { display: flex; justify-content: space-between; gap: 0.5rem; } | |
| .bar-track { | |
| height: 0.35rem; | |
| border-radius: 99px; | |
| background: var(--surface-secondary); | |
| overflow: hidden; | |
| } | |
| .bar-track span { | |
| display: block; | |
| height: 100%; | |
| border-radius: inherit; | |
| background: var(--accent); | |
| } | |
| .install-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.5rem; } | |
| /* Daily plain-English check-in */ | |
| .daily-header { justify-content: space-between; align-items: center; } | |
| .daily-date { font-size: 13px; color: var(--text-secondary); } | |
| .daily-points { font-size: 1.35rem; font-weight: 700; color: var(--accent-ink); } | |
| .tip-card { | |
| position: relative; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| padding: 12px 44px 12px 16px; | |
| border-radius: var(--radius); | |
| background: var(--accent-fill); | |
| border: 1px solid var(--accent-tint); | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .tip-card p { margin: 0; color: var(--text); } | |
| .indoors-nudge { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| padding-right: 16px; | |
| gap: 0.35rem; | |
| background: var(--accent-fill); | |
| color: var(--text); | |
| } | |
| .warning-chip { | |
| display: inline-block; | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| text-transform: uppercase; | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 6px; | |
| background: var(--accent-tint); | |
| color: var(--accent-ink); | |
| } | |
| .tip-dismiss { | |
| position: absolute; | |
| top: 6px; | |
| right: 6px; | |
| display: grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 999px; | |
| color: var(--text-secondary); | |
| } | |
| .choice-list { display: grid; gap: 0.5rem; } | |
| .choice-item { | |
| min-height: var(--hit); | |
| padding: 0.7rem 1rem; | |
| text-align: left; | |
| border: 1px solid var(--separator); | |
| border-radius: 14px; | |
| background: var(--card); | |
| color: var(--text-secondary); | |
| font-size: 15px; | |
| } | |
| .choice-item[aria-pressed="true"] { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .stepper-row { display: flex; align-items: center; gap: 1rem; } | |
| .stepper-btn { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 999px; | |
| border: 1px solid var(--separator); | |
| background: var(--card); | |
| font-size: 1.4rem; | |
| line-height: 1; | |
| } | |
| .stepper-btn[disabled] { opacity: 0.4; } | |
| .stepper-value { min-width: 2.5rem; text-align: center; font-size: 1.6rem; font-weight: 700; } | |
| .points-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } | |
| .points-breakdown li { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 0.75rem; | |
| font-size: 14px; | |
| } | |
| .points-breakdown li.missed { color: var(--text-tertiary); } | |
| .points-breakdown .points-pts { font-weight: 700; } | |
| .points-breakdown li.earned .points-pts { color: var(--ok); } | |
| .how-points { padding: 14px 18px; font-size: 14px; color: var(--text-secondary); } | |
| .how-points summary { cursor: pointer; font-weight: 600; color: var(--text); min-height: var(--hit); display: flex; align-items: center; } | |
| .how-points ul { margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; } | |
| .daily-sticky { | |
| position: sticky; | |
| bottom: 0; | |
| padding: 0.5rem 0 0.25rem; | |
| background: linear-gradient(to top, var(--bg) 70%, transparent); | |
| } | |
| /* —— Today's win (positive reinforcement) —— */ | |
| .win-card { | |
| background: var(--ok-bg); | |
| border-color: rgba(79, 122, 92, 0.2); | |
| } | |
| .win-banner { | |
| background: var(--ok-bg); | |
| border: 1px solid rgba(79, 122, 92, 0.2); | |
| box-shadow: var(--shadow-1); | |
| padding: 14px 18px; | |
| } | |
| .win-kicker { | |
| display: block; | |
| font-size: var(--fs-micro); | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--ok); | |
| margin-bottom: 0.2rem; | |
| } | |
| .win-text { | |
| margin: 0; | |
| font-size: var(--fs-body); | |
| font-weight: 600; | |
| color: var(--ink); | |
| line-height: 1.4; | |
| } | |
| /* —— Core-fast Daily: collapsible detail —— */ | |
| .core-hint { | |
| text-align: center; | |
| padding: 0 0.5rem; | |
| } | |
| .core-more { | |
| border: 1px solid var(--separator); | |
| border-radius: var(--radius); | |
| background: var(--surface-secondary); | |
| padding: 0; | |
| } | |
| .core-more > summary { | |
| cursor: pointer; | |
| list-style: none; | |
| min-height: var(--hit); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.35rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| padding: 0.85rem 1rem; | |
| } | |
| .core-more > summary::-webkit-details-marker { display: none; } | |
| .core-more > summary::before { | |
| content: "⌄"; | |
| font-size: 1.1rem; | |
| transition: transform 0.18s ease; | |
| } | |
| .core-more[open] > summary::before { transform: rotate(180deg); } | |
| .core-more[open] > summary { border-bottom: 1px solid var(--separator); } | |
| .core-more-body { | |
| padding: 1rem; | |
| gap: 1rem; | |
| } | |
| /* Plan timeline */ | |
| .plan-header { flex-wrap: wrap; gap: 0.5rem; } | |
| .plan-day-nav { display: flex; align-items: center; gap: 0.35rem; } | |
| .icon-btn { | |
| width: 44px; | |
| height: 44px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: 999px; | |
| color: var(--text); | |
| } | |
| .chip-btn { | |
| min-height: 36px; | |
| padding: 0 0.85rem; | |
| border-radius: 999px; | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| font-weight: 600; | |
| font-size: 13px; | |
| } | |
| .plan-meta-row { display: flex; justify-content: space-between; gap: 0.75rem; } | |
| .caption { font-size: 13px; color: var(--text-secondary); } | |
| .plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } | |
| .timeline-card { padding: 12px 8px 12px 0; overflow: hidden; } | |
| .timeline { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: 56px 1fr; | |
| } | |
| .timeline-gutter { position: relative; } | |
| .timeline-hour-label { | |
| position: absolute; | |
| right: 8px; | |
| transform: translateY(-50%); | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| } | |
| .timeline-canvas { position: relative; border-left: 1px solid var(--separator); } | |
| .timeline-hour-line { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: var(--separator); | |
| } | |
| .timeline-now { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--accent); | |
| z-index: 3; | |
| } | |
| .timeline-now-dot { | |
| position: absolute; | |
| left: -5px; | |
| top: -4px; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 999px; | |
| background: var(--accent); | |
| } | |
| .timeline-block { | |
| position: absolute; | |
| left: 8px; | |
| right: 8px; | |
| z-index: 2; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| justify-content: center; | |
| gap: 0.1rem; | |
| padding: 6px 10px; | |
| border-radius: 12px; | |
| border: 1px solid transparent; | |
| text-align: left; | |
| overflow: hidden; | |
| } | |
| .timeline-block strong { font-size: 13px; font-weight: 600; } | |
| .timeline-block span { font-size: 11px; opacity: 0.85; } | |
| .timeline-block.duty { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-tint); } | |
| .timeline-block.explore { background: var(--ok-bg); color: var(--ok); border-color: rgba(79, 122, 92, 0.2); } | |
| .timeline-block.restore { background: var(--danger-bg); color: var(--danger); border-color: rgba(168, 82, 62, 0.2); } | |
| .timeline-block.stabilize { background: var(--warn-bg); color: var(--warn); border-color: rgba(176, 126, 47, 0.2); } | |
| .timeline-block.flex { background: var(--surface-secondary); color: var(--text); border-color: var(--separator); } | |
| .timeline-block.p0 { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } | |
| .timeline-block.done { opacity: 0.55; } | |
| .timeline-block.skipped { opacity: 0.4; text-decoration: line-through; } | |
| .plan-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } | |
| .btn-secondary { | |
| min-height: var(--btn-h); | |
| width: 100%; | |
| border-radius: 999px; | |
| background: var(--card); | |
| border: 1px solid var(--separator); | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .meta-line { margin: 0; color: var(--text-secondary); font-size: 14px; } | |
| .empty-card { text-align: center; } | |
| @keyframes card-in { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .home-page, | |
| .surface-card, | |
| .entry-row, | |
| .pending-banner-card { | |
| animation: none ; | |
| transition: opacity 200ms ease; | |
| } | |
| .toast { | |
| transition: opacity 200ms ease; | |
| } | |
| } | |
| @media (prefers-reduced-transparency: reduce) { | |
| .sheet-scrim { background: rgba(32, 32, 32, 0.8); } | |
| } | |
| @media (prefers-contrast: more) { | |
| .tab-bar, | |
| .pending-banner-card, | |
| .segment, | |
| .entry-row { | |
| border-color: rgba(32, 32, 32, 0.35); | |
| } | |
| } | |