s with no card backgrounds and no vertical rhythm ("needs a margin"). Defined here once so the Email page (and any future Next-UI page) gets a consistent card surface. Among pages that load THIS stylesheet, only email_view uses these standalone tokens, so there is no collision (the Phoenix dashboard/health pages ship their own .card in a different stylesheet they load instead). */ .card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin: 0 0 16px; } .card:last-child { margin-bottom: 0; } .card > h1:first-child, .card > h2:first-child { margin-top: 0; } .muted { color: var(--muted); } .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(110, 168, 255, 0.12); border: 1px solid var(--line); color: var(--muted); font-size: 0.78rem; font-weight: 600; vertical-align: middle; } .btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); } .btn.secondary:hover { background: rgba(255, 255, 255, 0.05); } .table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .table th, .table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); } .table th { color: var(--muted); font-weight: 600; } .table tbody tr:last-child td { border-bottom: 0; } /* ABS-1973: generic sortable-table affordance, applied by sortable-tables.js to every in a table with a header row and 2+ body rows. Content- agnostic — targets any table's , not a specific table's class. */ th.sortable-th { cursor: pointer; user-select: none; position: relative; padding-right: 16px; } th.sortable-th:hover { color: var(--text); } th.sortable-th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } th.sortable-th::after { content: "\21C5"; position: absolute; right: 4px; opacity: 0.35; font-size: 0.85em; } th.sortable-th[data-sort-dir="asc"]::after { content: "\2191"; opacity: 1; color: var(--accent); } th.sortable-th[data-sort-dir="desc"]::after { content: "\2193"; opacity: 1; color: var(--accent); } /* Dashboard surface (AUR-1305 W4.2a) */ .dashboard-page { max-width: 1200px; margin: 0 auto; padding: 4px 20px 24px; } /* Email page: a touch more top breathing room than the dashboard hero pages. */ .email-page { padding-top: 16px; } .dashboard-hero { margin: 12px 0 16px; } .dashboard-hero-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .dashboard-hero-title { font-size: 28px; font-weight: 700; margin: 0; } .dashboard-tabs { border-bottom: 1px solid var(--line); margin-bottom: 20px; } .dashboard-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; } .dashboard-tab { display: inline-block; padding: 10px 16px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; } .dashboard-tab:hover { color: var(--text); } .dashboard-tab-active { color: var(--accent); border-bottom-color: var(--accent); } .dashboard-tab-content { padding: 8px 0; } .dashboard-placeholder { padding: 28px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); } .dashboard-placeholder h2 { margin: 0 0 8px 0; color: var(--text); font-size: 18px; } .dashboard-placeholder a { color: var(--accent); } /* Warming-up spinner + auto-reload affordances (ABS-1431) */ .dashboard-placeholder .warm-spinner { width: 28px; height: 28px; margin: 0 0 14px 0; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: aurora-warm-spin 0.8s linear infinite; } @keyframes aurora-warm-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .dashboard-placeholder .warm-spinner { animation-duration: 2.4s; } } .dashboard-placeholder .warm-stalled { display: none; margin-top: 12px; } .dashboard-placeholder .warm-refresh { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; } /* Dashboard home tab (AUR-1305 W4.2a) */ .home-tab { max-width: 800px; margin: 0 auto; } .home-greeting h2 { font-size: 24px; font-weight: 600; color: var(--text); margin: 0; } .home-date { font-size: 14px; color: var(--muted); margin: 4px 0 0 0; } .home-streaks { margin: 4px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; } .home-quote { margin: 20px 0; padding: 16px 20px; background: linear-gradient(180deg, rgba(110,168,255,0.10), rgba(110,168,255,0.04)); border: 1px solid rgba(110,168,255,0.16); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; } .home-quote blockquote { margin: 0; font-size: 15px; font-style: italic; color: var(--text); line-height: 1.5; } .home-quote cite { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); font-style: normal; } .home-focus-card { margin: 18px 0 18px 0; border-color: rgba(110,168,255,0.30); border-left: 4px solid var(--accent); background: linear-gradient(135deg, rgba(110,168,255,0.14), rgba(110,168,255,0.04) 34%, rgba(15, 23, 42, 0.08) 100%), var(--bg-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .home-focus-kicker { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .home-focus-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; } .home-focus-title { margin: 0; color: var(--text); font-size: 28px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; } .home-score { flex: 0 0 auto; min-width: 138px; min-height: 138px; padding: 12px; border: 1px solid rgba(110,168,255,0.18); border-radius: 999px; background: rgba(8, 15, 28, 0.36); text-align: center; display: grid; place-items: center; align-content: center; position: relative; } .home-score::before { content: ""; position: absolute; inset: 8px; border-radius: 999px; border: 6px solid rgba(255,255,255,0.08); } .home-score.score-band-high::before { border-color: rgba(34, 197, 94, 0.5); } .home-score.score-band-mid::before { border-color: rgba(245, 158, 11, 0.48); } .home-score.score-band-low::before { border-color: rgba(239, 68, 68, 0.52); } .home-score > * { position: relative; z-index: 1; } .home-score span { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; } .home-score strong { display: block; color: var(--text); font-size: 42px; line-height: 1; margin-top: 3px; } .home-score-breakdown { margin-top: 8px; text-align: left; } .home-score-breakdown summary { color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 600; } .home-score-breakdown ul { list-style: none; margin: 8px 0 0 0; padding: 0; display: grid; gap: 4px; } .home-score-breakdown li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; } .home-score-breakdown strong { font-size: 11px; } .home-score-breakdown .score-plus { color: var(--success); } .home-score-breakdown .score-minus { color: #f59e0b; } .home-recommendation { margin: 0 0 14px 0; color: var(--text); font-size: 14px; line-height: 1.45; } .home-recommendation strong { color: var(--accent-hover); } .home-recommendation br { line-height: 1.8; } .home-goal-status { margin: 0 0 14px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.025); } .home-goal-status h4, .home-focus-list h4 { margin: 0 0 7px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .home-goal-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 12px; } .home-strategic-context { margin: 0 0 14px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.025); } .home-strategic-context h4 { margin: 0 0 7px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .home-strategic-context dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin: 0; } .home-strategic-context dl > div { padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(110,168,255,0.16); background: rgba(110,168,255,0.08); } .home-strategic-context dt { color: var(--muted); font-size: 11px; margin: 0 0 2px 0; } .home-strategic-context dd { color: var(--text); font-size: 12px; line-height: 1.35; margin: 0; } .home-goal-signal { display: flex; gap: 6px; align-items: center; color: var(--text); font-size: 13px; padding: 8px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); } .home-goal-arrow { width: 16px; color: var(--muted); font-size: 10px; } .home-goal-signal.signal-up { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.16); } .home-goal-signal.signal-steady { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.16); } .home-goal-signal.signal-warn { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.18); } .home-goal-signal.signal-down, .home-goal-signal.signal-critical { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.18); } .home-goal-signal.signal-up .home-goal-arrow { color: var(--success); } .home-goal-signal.signal-steady .home-goal-arrow { color: var(--accent); } .home-goal-signal.signal-warn .home-goal-arrow { color: #e6c84d; } .home-goal-signal.signal-critical .home-goal-arrow { color: var(--danger); } .home-goal-signal.signal-down .home-goal-arrow { color: var(--danger); } .home-focus-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .home-focus-list ul { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.45; } .home-completed-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .home-completed-section h4 { margin: 0 0 8px 0; color: var(--success); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } .home-completed-list .home-task.done { opacity: 0.92; text-decoration: none; color: rgba(226, 232, 240, 0.92); } .home-completed-list .task-dot { color: var(--success); font-weight: 700; } .home-suggested-list .home-task.suggested .task-dot { color: var(--accent); font-weight: 700; } /* ABS-1435: mobile-only infographic elements — hidden at desktop widths. The focus-card "more" content stays visible on desktop; the toggle that collapses it only appears in the mobile media block. */ .home-kpi-strip { display: none; } .home-task-progress { display: none; } .home-focus-more-toggle { display: none; } .home-focus-more-label { display: none; } @media (max-width: 700px) { .home-focus-header { flex-direction: column; } .home-focus-title { font-size: 24px; } .home-score { width: 100%; min-height: auto; border-radius: 14px; text-align: left; place-items: start; } .home-score::before { inset: 6px; border-radius: 10px; } .home-score strong { font-size: 34px; } .home-focus-detail-grid { grid-template-columns: 1fr; } .home-strategic-context dl { grid-template-columns: 1fr; } } .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } } .home-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px; } .home-card-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .home-empty { color: var(--muted); font-size: 13px; margin: 0; } .home-task-list, .home-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .home-task { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); line-height: 1.4; } .home-task.done { opacity: 0.5; text-decoration: line-through; } .task-dot { flex-shrink: 0; width: 16px; text-align: center; } .home-task-summary { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .home-event { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 4px 0; flex-wrap: wrap; } .home-event-time { flex-shrink: 0; font-weight: 600; font-size: 12px; min-width: 50px; padding: 2px 6px; border-radius: 3px; border-left: 3px solid var(--accent); background: rgba(110,168,255,0.08); } .home-event-category { display: inline-flex; align-items: center; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); color: var(--muted); background: rgba(255,255,255,0.04); } .home-event-category.category-work { color: #8ab6ff; border-color: rgba(138,182,255,0.22); background: rgba(138,182,255,0.08); } .home-event-category.category-family { color: #7dd39c; border-color: rgba(125,211,156,0.22); background: rgba(125,211,156,0.08); } .home-event-category.category-personal { color: #f0c96e; border-color: rgba(240,201,110,0.2); background: rgba(240,201,110,0.08); } .home-event-title { color: var(--text); } .home-event-source { flex-shrink: 0; font-size: 11px; color: var(--muted); } .home-event-context .home-event-time, .calendar-event-context .calendar-event-time, .compass-event-context .compass-event-time { border-left-color: #d19000; background: rgba(209,144,0,0.12); } .home-event-source-context, .calendar-event-source-context, .compass-event-source-context, .planning-calendar-context { color: #9a6400; font-weight: 600; } /* Compass tab (AUR-1297). Day/Week/Quarter sit on top expanded; Mid/Long/Vision * collapse into

below so orientation context is one click away * without competing for attention. */ .compass-tab { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .compass-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .compass-overview-stat { background: #12151c; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .compass-overview-stat span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .compass-overview-stat strong { display: block; margin-top: 2px; color: var(--text); font-size: 14px; font-weight: 700; } @media (max-width: 720px) { .compass-overview { grid-template-columns: 1fr 1fr; } } .compass-purpose-bridge { padding: 14px 16px; border: 1px solid rgba(110,168,255,0.26); border-left: 4px solid var(--accent); border-radius: 8px; background: linear-gradient(135deg, rgba(110,168,255,0.10), rgba(102,209,158,0.04) 48%, rgba(15,17,21,0.02)), var(--bg-soft); } .compass-purpose-bridge header { margin-bottom: 10px; } .compass-purpose-bridge header span { display: block; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .compass-purpose-bridge h3 { margin: 2px 0 0 0; color: var(--text); font-size: 18px; } .compass-purpose-grid { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .compass-purpose-grid div { min-width: 0; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; background: rgba(255,255,255,0.025); } .compass-purpose-grid dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .compass-purpose-grid dd { margin: 2px 0 0 0; color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.3; } .compass-purpose-bridge p { margin: 10px 0 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } @media (max-width: 720px) { .compass-purpose-grid { grid-template-columns: 1fr 1fr; } } .compass-steering { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(110,168,255,0.28); border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(110,168,255,0.08); } .compass-steering strong { color: var(--text); font-size: 13px; white-space: nowrap; } .compass-steering span { color: var(--muted); font-size: 12px; text-align: right; } @media (max-width: 720px) { .compass-steering { align-items: flex-start; flex-direction: column; } .compass-steering span { text-align: left; } } .compass-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; } .compass-card[data-level="day"] { border-left: 3px solid var(--accent); } .compass-card[data-level="week"] { border-left: 3px solid var(--success); } .compass-card[data-level="quarter"] { border-left: 3px solid var(--accent-hover); } .compass-card-empty { opacity: 0.65; } /* AUR-1299: quarter KPI traffic-light dots */ .compass-kpi-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .compass-kpi-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--line); } .kpi-dot-green { background: var(--success); } .kpi-dot-yellow { background: #e8c25a; } .kpi-dot-red { background: var(--danger); } .kpi-dot-unknown { background: var(--line); } .compass-card-head { margin: 0 0 10px 0; } details.compass-card > summary.compass-card-head { cursor: pointer; margin: 0; list-style: none; } details.compass-card > summary.compass-card-head::-webkit-details-marker { display: none; } details.compass-card[open] > summary.compass-card-head { margin-bottom: 10px; } .compass-card-title { font-size: 16px; margin: 0; color: var(--text); } .compass-card-meta { font-size: 13px; color: var(--muted); margin: 2px 0 0 0; } .compass-card-meta-empty { font-style: italic; } .compass-source { color: var(--muted); opacity: 0.75; } .compass-card-body { color: var(--text); font-size: 14px; line-height: 1.55; } .compass-card-body h3 { font-size: 15px; margin: 14px 0 6px; color: var(--text); } .compass-card-body h4 { font-size: 14px; margin: 12px 0 4px; color: var(--text); } .compass-card-body h5 { font-size: 13px; margin: 10px 0 4px; color: var(--muted); } .compass-card-body p { margin: 6px 0; } .compass-card-body ul { margin: 6px 0; padding-left: 20px; } .compass-card-body li { margin: 2px 0; } .compass-card-body blockquote { margin: 8px 0; padding: 4px 12px; border-left: 2px solid var(--line); color: var(--muted); } .compass-card-body code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; background: rgba(110,168,255,0.10); padding: 1px 4px; border-radius: 3px; } .compass-empty { color: var(--muted); font-style: italic; margin: 0; } .compass-task-list, .compass-event-list { list-style: none; padding: 0; margin: 6px 0; } .compass-task { font-size: 14px; margin: 4px 0; color: var(--text); } .compass-task .task-dot { color: var(--muted); margin-right: 6px; } .compass-task.done { color: var(--muted); text-decoration: line-through; } .compass-task.done .task-dot { color: var(--success); } .compass-event { font-size: 13px; margin: 4px 0; color: var(--text); } .compass-event-source { font-size: 11px; color: var(--muted); margin-left: 6px; } .compass-event-time { display: inline-block; font-weight: 600; font-size: 12px; min-width: 50px; margin-right: 6px; padding: 1px 6px; border-radius: 3px; border-left: 3px solid var(--accent); background: rgba(110,168,255,0.08); } /* Shared tab-body chrome (AUR-1301). One header per tab; no in-page tab bar. */ .tab-header { margin: 12px 0 18px 0; } .tab-header h2 { font-size: 22px; font-weight: 700; margin: 0; color: var(--text); } .tab-header .tab-meta { font-size: 13px; color: var(--muted); margin: 4px 0 0 0; } .tab-header .tab-empty { font-size: 13px; color: var(--muted); margin: 4px 0 0 0; font-style: italic; } .tab-empty { color: var(--muted); font-style: italic; margin: 8px 0; } /* KPIs tab */ .kpi-status-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px 0; } .kpi-status-pill { background: #12151c; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .kpi-status-pill span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .kpi-status-pill strong { color: var(--text); font-size: 20px; line-height: 1.2; } .kpi-status-green { border-left: 3px solid var(--success); } .kpi-status-yellow { border-left: 3px solid #e6c84d; } .kpi-status-red { border-left: 3px solid var(--danger); } .kpi-status-unknown { border-left: 3px solid var(--muted); } .kpi-attention { background: #12151c; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px 0; } .kpi-attention h3 { margin: 0 0 8px 0; font-size: 14px; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; } .kpi-attention ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .kpi-attention-row { display: flex; justify-content: space-between; gap: 12px; border-left: 3px solid var(--line); padding: 4px 0 4px 10px; font-size: 13px; } .kpi-attention-row span { color: var(--text); } .kpi-attention-row strong { color: var(--muted); font-weight: 600; } .kpi-attention-red { border-left-color: var(--danger); } .kpi-attention-yellow { border-left-color: #e6c84d; } @media (max-width: 720px) { .kpi-status-summary { grid-template-columns: 1fr 1fr; } } .kpi-goal-briefing { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 14px 0; } .kpi-goal-briefing header { margin-bottom: 12px; } .kpi-goal-briefing h3 { margin: 0; color: var(--text); font-size: 16px; } .kpi-goal-briefing p { margin: 3px 0 0 0; color: var(--muted); font-size: 12px; } .kpi-goal-briefing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .kpi-brief-card { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,0.02); } .kpi-brief-red { border-left-color: var(--danger); } .kpi-brief-yellow { border-left-color: #e6c84d; } .kpi-brief-top { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; } .kpi-brief-light { line-height: 1; } .kpi-brief-action { color: var(--text) !important; font-size: 13px !important; margin-top: 8px !important; } .kpi-brief-meta { overflow-wrap: anywhere; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .kpi-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .kpi-traffic-band { display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 0 10px 0; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); font-size: 12px; font-weight: 700; } .kpi-traffic-symbol { line-height: 1; } .kpi-traffic-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kpi-traffic-green { color: var(--success); border-color: rgba(102,209,158,0.35); background: rgba(102,209,158,0.10); } .kpi-traffic-yellow { color: #e6c84d; border-color: rgba(230,200,77,0.38); background: rgba(230,200,77,0.10); } .kpi-traffic-red { color: var(--danger); border-color: rgba(255,107,107,0.38); background: rgba(255,107,107,0.10); } .kpi-traffic-grey, .kpi-traffic-unknown { color: var(--muted); border-color: var(--line); background: rgba(154,163,178,0.08); } .kpi-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .kpi-card-metric { font-size: 14px; margin: 0; color: var(--muted); font-weight: 500; } .kpi-card-value { font-size: 24px; font-weight: 700; color: var(--text); margin: 4px 0 10px 0; } .kpi-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 12px; color: var(--muted); } .kpi-card-meta dt, .kpi-card-meta dd { display: inline; margin: 0; } .kpi-card-meta dt { color: var(--muted); margin-right: 4px; opacity: 0.8; } .kpi-card-meta dd { color: var(--text); margin-right: 8px; } .kpi-progress { height: 14px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; position: relative; margin: 0 0 10px 0; background: rgba(154,163,178,0.08); } .kpi-progress-fill { display: block; height: 100%; min-width: 2px; } .kpi-progress-green { background: var(--success); } .kpi-progress-yellow { background: #e6c84d; } .kpi-progress-red { background: var(--danger); } .kpi-progress-grey, .kpi-progress-unknown { background: var(--muted); } .kpi-progress strong { position: absolute; inset: 0; text-align: center; line-height: 13px; font-size: 10px; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,0.8); } .kpi-light { font-size: 14px; line-height: 1; } .kpi-light-dot-green { color: var(--success); } .kpi-light-dot-yellow { color: #e6c84d; } .kpi-light-dot-red { color: var(--danger); } .kpi-light-dot-unknown { color: var(--muted); } .kpi-card.kpi-light-red { border-left: 3px solid var(--danger); } .kpi-card.kpi-light-yellow { border-left: 3px solid #e6c84d; } .kpi-card.kpi-light-green { border-left: 3px solid var(--success); } /* Health tab */ .health-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px 0; } .health-summary-card { background: #12151c; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .health-summary-card span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .health-summary-card strong { color: var(--text); font-size: 20px; line-height: 1.2; } .health-summary-card p { color: var(--muted); font-size: 12px; margin: 3px 0 0 0; overflow-wrap: anywhere; } .health-summary-danger { border-left: 3px solid var(--danger); } .health-summary-warning { border-left: 3px solid #e6c84d; } .health-summary-neutral { border-left: 3px solid var(--accent); } @media (max-width: 720px) { .health-summary { grid-template-columns: 1fr; } } /* ABS-1459: collapsible "click to fold out" panels — PT/doctor reports on top, heavy metrics table + charts demoted but one click away. */ .health-collapse { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 12px 0; background: var(--bg-muted, var(--bg)); } .health-collapse-summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--text); list-style: none; } .health-collapse-summary::-webkit-details-marker { display: none; } .health-collapse-summary::before { content: "\25B8 "; color: var(--muted); } .health-collapse[open] > .health-collapse-summary::before { content: "\25BE "; } .health-collapse-body { padding: 0 14px 14px 14px; } .health-pt-report .health-collapse-summary, .health-doctor-report .health-collapse-summary { color: var(--accent); } .health-goal-lights { margin: 0 0 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); } .health-goal-head { margin-bottom: 12px; } .health-goal-head h3 { margin: 0; color: var(--text); font-size: 16px; } .health-goal-head p { margin: 3px 0 0 0; color: var(--muted); font-size: 12px; } .health-goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .health-goal-card { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,0.02); } .health-goal-red { border-left-color: var(--danger); } .health-goal-yellow { border-left-color: #e6c84d; } .health-goal-green { border-left-color: var(--success); } .health-goal-card strong { display: block; color: var(--text); font-size: 13px; margin-top: 4px; } .health-goal-card p { color: var(--muted); font-size: 12px; margin: 3px 0 8px 0; } .health-goal-progress { height: 18px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; position: relative; background: rgba(154,163,178,0.08); } .health-goal-progress-fill { display: block; height: 100%; min-width: 2px; } .health-goal-progress-green { background: var(--success); } .health-goal-progress-yellow { background: #e6c84d; } .health-goal-progress-red { background: var(--danger); } .health-goal-progress-grey, .health-goal-progress-unknown { background: var(--muted); } .health-goal-progress em { position: absolute; inset: 0 auto 0 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 3px; background: var(--bg-soft); text-align: center; line-height: 16px; font-size: 12px; color: var(--text); font-style: normal; } .health-table { width: 100%; border-collapse: collapse; font-size: 14px; } .health-table th, .health-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); } .health-table th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .health-table tbody tr:hover { background: rgba(110,168,255,0.04); } /* Planning tab */ .planning-tab { max-width: 1280px; margin: 0 auto; } .planning-view-nav, .planning-week-nav { display: flex; gap: 8px; margin: -6px 0 14px 0; } .planning-week-nav { margin-top: 0; } .planning-view-link, .planning-week-link { padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--bg-soft); text-decoration: none; font-size: 12px; } .planning-view-link:hover, .planning-week-link:hover { color: var(--text); border-color: var(--accent); } .planning-view-link-active { color: var(--text); border-color: rgba(96, 165, 250, 0.6); background: rgba(96, 165, 250, 0.12); } .planning-diagnosis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px 0; } .planning-diag-card { background: #12151c; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .planning-diag-card span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .planning-diag-card strong { display: block; color: var(--text); font-size: 20px; margin-top: 2px; } .planning-diag-card p { color: var(--muted); font-size: 12px; margin: 3px 0 0 0; } .planning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .planning-section-title { color: var(--text); font-size: 16px; margin: 0 0 10px 0; } .planning-week-grid { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 10px; } .planning-day { min-height: 190px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .planning-day-workday { border-top: 3px solid var(--accent); } .planning-day-weekend { border-top: 3px solid var(--success); } .planning-day-public_holiday { border-top: 3px solid #e11d48; background: rgba(225, 29, 72, 0.08); } .planning-day-bridge_day, .planning-day-low_capacity { border-top: 3px solid #f59e0b; background: rgba(245, 158, 11, 0.08); } .planning-day-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .planning-day-head span { color: var(--text); font-weight: 700; font-size: 13px; } .planning-day-head strong { color: var(--muted); font-size: 12px; font-weight: 500; } .planning-capacity { display: inline-flex; align-items: center; max-width: 100%; min-height: 22px; margin: -2px 0 8px 0; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.3; } .planning-capacity-workday { color: var(--accent); border-color: rgba(96, 165, 250, 0.35); } .planning-capacity-weekend { color: var(--success); border-color: rgba(34, 197, 94, 0.35); } .planning-capacity-public_holiday { color: #fb7185; border-color: rgba(251, 113, 133, 0.45); } .planning-capacity-bridge_day, .planning-capacity-low_capacity { color: #fbbf24; border-color: rgba(251, 191, 36, 0.45); } .planning-day-empty { color: var(--muted); font-size: 12px; font-style: italic; margin: 0 0 8px 0; } .planning-annotations, .planning-events, .planning-action-list, .planning-project-list, .planning-task-list, .planning-risk-list, .planning-missing-list { list-style: none; padding: 0; margin: 0; } .planning-annotations { display: grid; gap: 4px; margin-bottom: 8px; } .planning-annotations li { border-left: 3px solid var(--accent); padding-left: 8px; color: var(--muted); font-size: 12px; } .planning-annotations strong { color: var(--text); } .planning-events { display: grid; gap: 5px; } .planning-events li { color: var(--text); font-size: 12px; border-top: 1px solid var(--line); padding-top: 5px; } .planning-events span { display: inline-block; min-width: 42px; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; } .planning-events em { color: var(--muted); font-style: normal; } .planning-events li.planning-event-context { border-left: 2px solid #d19000; padding-left: 6px; } .planning-side { display: grid; gap: 12px; } .planning-side-section, .planning-context-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .planning-side-section h3, .planning-context-card h4 { color: var(--text); font-size: 14px; margin: 0 0 8px 0; } .planning-action-list { display: grid; gap: 8px; } .planning-action { border-left: 3px solid var(--line); padding: 8px 9px; border-radius: 6px; background: rgba(255,255,255,0.025); } .planning-action-critical { border-left-color: #e11d48; } .planning-action-high { border-left-color: #f59e0b; } .planning-action-medium { border-left-color: var(--accent); } .planning-action-low { border-left-color: var(--muted); } .planning-action strong { display: block; color: var(--text); font-size: 12px; margin-bottom: 3px; } .planning-action span { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; } .planning-action p { color: var(--text); font-size: 12px; line-height: 1.4; margin: 5px 0 0 0; } .planning-action-form { margin: 8px 0 0 0; } .planning-action-btn { border: 1px solid var(--line); border-radius: 6px; background: rgba(96, 165, 250, 0.12); color: var(--accent); min-height: 28px; padding: 4px 9px; font-size: 12px; font-weight: 700; cursor: pointer; } .planning-action-btn:hover { border-color: var(--accent); background: rgba(96, 165, 250, 0.18); } .planning-project-list { display: grid; gap: 8px; } .planning-project { padding: 8px 0; border-top: 1px solid var(--line); } .planning-project:first-child { border-top: 0; padding-top: 0; } .planning-project strong { display: block; color: var(--text); font-size: 12px; } .planning-project span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; } .planning-task-list, .planning-risk-list, .planning-missing-list { display: grid; gap: 7px; } .planning-task-list li, .planning-risk-list li, .planning-missing-list li { color: var(--text); font-size: 12px; overflow-wrap: anywhere; } .planning-task-list span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .planning-risk { border-left: 3px solid var(--line); padding-left: 8px; } .planning-risk-red { border-left-color: var(--danger); } .planning-risk-yellow { border-left-color: #e6c84d; } .planning-quarter, .planning-month, .planning-today, .planning-commit-preview { background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 8px; padding: 14px; } .planning-quarter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .planning-quarter-week { min-height: 86px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; } .planning-quarter-week strong { display: block; color: var(--text); font-size: 12px; margin-bottom: 5px; } .planning-quarter-week span { color: var(--accent); font-size: 12px; font-weight: 700; } .planning-quarter-week p { color: var(--muted); font-size: 11px; line-height: 1.35; margin: 6px 0 0 0; } .planning-month-grid { display: grid; grid-template-columns: repeat(7, minmax(74px, 1fr)); gap: 7px; } .planning-month-day { min-height: 76px; background: var(--bg-soft); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 6px; padding: 7px; } .planning-month-day strong { color: var(--text); font-size: 13px; margin-right: 5px; } .planning-month-day span { color: var(--muted); font-size: 11px; } .planning-month-day p { color: var(--muted); font-size: 11px; line-height: 1.25; margin: 5px 0 0 0; } .planning-month-day em { color: var(--accent); display: block; font-size: 11px; font-style: normal; margin-top: 4px; } .planning-today-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px; } .planning-milestone-list { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .planning-milestone-list h3 { color: var(--text); font-size: 14px; margin: 0 0 8px 0; } .planning-milestone-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .planning-milestone-list li { color: var(--text); font-size: 12px; line-height: 1.35; } .planning-milestone-list strong { color: var(--text); margin-right: 6px; } .planning-milestone-list span { color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; margin-right: 6px; } .planning-commit-preview { margin-top: 14px; } .planning-commit-preview p { color: var(--muted); font-size: 12px; margin: 0 0 8px 0; } .planning-commit-preview code, .planning-preview-path { color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; } .planning-draft-editor { min-height: 360px; width: 100%; background: #0b0d12; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 11px; line-height: 1.45; margin: 0; padding: 10px; resize: vertical; white-space: pre-wrap; } .planning-commit-form { display: grid; gap: 10px; margin-top: 10px; } .planning-commit-form .planning-action-btn { justify-self: end; } .planning-year { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.025); padding: 14px; overflow-x: auto; } .planning-year-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; } .planning-year-head p { color: var(--muted); font-size: 12px; margin: 0; } .planning-year-months, .planning-year-row { display: grid; grid-template-columns: 180px repeat(12, minmax(82px, 1fr)); min-width: 1160px; } .planning-year-months { position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--line); } .planning-year-months span { color: var(--muted); font-size: 11px; font-weight: 700; padding: 8px 6px; text-transform: uppercase; } .planning-year-rows { display: grid; min-width: 1160px; } .planning-year-row { border-bottom: 1px solid var(--line); min-height: 92px; } .planning-year-row:last-child { border-bottom: 0; } .planning-year-project { padding: 12px 10px 12px 0; border-right: 1px solid var(--line); } .planning-year-project strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 4px; } .planning-year-project span { color: var(--muted); display: block; font-size: 11px; line-height: 1.35; } .planning-year-track { display: grid; grid-template-columns: repeat(12, minmax(82px, 1fr)); grid-column: 2 / -1; } .planning-year-cell { border-right: 1px solid rgba(255,255,255,0.06); min-height: 92px; padding: 8px 5px; } .planning-year-cell:nth-child(3n) { border-right-color: rgba(255,255,255,0.15); } .planning-year-milestone { border: 1px solid rgba(96, 165, 250, 0.35); border-left: 3px solid var(--accent); border-radius: 6px; background: rgba(96, 165, 250, 0.11); color: var(--text); padding: 6px 7px; min-height: 54px; overflow-wrap: anywhere; } .planning-year-milestone span { display: block; color: var(--muted); font-size: 10px; line-height: 1.2; margin-bottom: 4px; } .planning-year-milestone strong { color: var(--text); display: block; font-size: 11px; font-weight: 600; line-height: 1.25; } .planning-context-docs { margin-top: 18px; } .planning-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .planning-context-card header { margin-bottom: 8px; } .planning-context-card h4 { margin-bottom: 2px; } .planning-context-card header span { color: var(--muted); font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace; } .planning-context-missing { opacity: 0.7; } .planning-context-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .planning-context-sections > li > strong { color: var(--text); font-size: 13px; } .planning-context-sections ul { margin: 4px 0 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; } @media (max-width: 1550px) { .planning-layout { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .planning-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .planning-year-head { display: block; } } @media (max-width: 720px) { .planning-diagnosis { grid-template-columns: 1fr 1fr; } .planning-week-grid { grid-template-columns: 1fr; } .planning-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .planning-today-grid { grid-template-columns: 1fr; } } /* Tasks tab */ .tasks-section { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; } .tasks-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .tasks-section-head h3 { font-size: 15px; margin: 0; color: var(--text); } .tasks-section-count { font-size: 12px; color: var(--muted); } /* ABS-1436: per-section completion bar — mobile-only by default. */ .tasks-section-bar { display: none; } .tasks-tab { max-width: 800px; margin: 0 auto; padding: 0 16px; } .tasks-list { list-style: none; padding: 0; margin: 0; } .tasks-row { font-size: 14px; margin: 2px 0; color: var(--text); padding: 8px 12px; border-radius: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background-color 0.15s ease; } .tasks-list li.tasks-row:nth-child(even) { background-color: rgba(255, 255, 255, 0.01); } .tasks-row:hover { background-color: rgba(110, 168, 255, 0.05); } .tasks-list li.tasks-row:last-child { border-bottom: none; } .tasks-row .task-dot { color: var(--muted); margin-right: 6px; } .tasks-row.done { color: var(--muted); text-decoration: line-through; } .tasks-row.done .task-dot { color: var(--success); } /* Feedback tab */ .feedback-section { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; } .feedback-section-title { font-size: 15px; margin: 0 0 8px 0; color: var(--text); } .feedback-section-body { font-size: 14px; line-height: 1.55; color: var(--text); } .feedback-section-body p { margin: 6px 0; } .feedback-section-body ul { margin: 6px 0; padding-left: 20px; } /* Calendar tab */ .calendar-day { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; } .calendar-day-today { border-left: 3px solid var(--accent); } .calendar-day-head { margin-bottom: 6px; } .calendar-day-date { font-size: 14px; margin: 0; color: var(--text); } .calendar-events { list-style: none; padding: 0; margin: 0; } .calendar-event { font-size: 13px; margin: 4px 0; color: var(--text); } .calendar-event-time { display: inline-block; font-weight: 600; font-size: 12px; min-width: 56px; margin-right: 8px; padding: 1px 6px; border-radius: 3px; border-left: 3px solid var(--accent); background: rgba(110,168,255,0.08); } .calendar-event-source { font-size: 12px; color: var(--muted); margin-left: 6px; opacity: 1; } .calendar-event-source-context { opacity: 1; } /* Tasks: tag chips + filter bar (AUR-1302) */ .tasks-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 14px 0; font-size: 13px; } .tasks-filter { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--muted); background: var(--bg-soft); } .tasks-filter:hover { color: var(--text); border-color: var(--accent); } .tasks-filter-active { color: var(--text); border-color: var(--accent); background: rgba(110,168,255,0.10); } .tasks-tag-clear { margin-left: auto; color: var(--muted); text-decoration: none; font-size: 12px; } .tasks-tag-clear:hover { color: var(--danger); } .task-tags { margin-left: 6px; } .task-tag { display: inline-block; font-size: 11px; padding: 1px 6px; margin-left: 4px; border-radius: 3px; text-decoration: none; background: rgba(110,168,255,0.10); color: var(--accent); border: 1px solid rgba(110,168,255,0.25); font-family: ui-monospace, Menlo, Consolas, monospace; } .task-tag-track { background: rgba(102,209,158,0.10); color: var(--success); border-color: rgba(102,209,158,0.25); } .task-deadline { display: inline-block; font-size: 11px; margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: rgba(255,107,107,0.10); color: var(--danger); font-family: ui-monospace, Menlo, Consolas, monospace; } /* Calendar window selector (AUR-1302) */ .calendar-window-bar { display: flex; gap: 6px; margin: 0 0 14px 0; font-size: 13px; } .calendar-window { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--muted); background: var(--bg-soft); } .calendar-window:hover { color: var(--text); border-color: var(--accent); } .calendar-window-active { color: var(--text); border-color: var(--accent); background: rgba(110,168,255,0.10); } /* AUR-2801: calendar at-a-glance overviews (density waves + big-event bands) */ .calendar-views { display: flex; gap: 6px; margin: 0 0 16px 0; } .calendar-view { padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--muted); background: var(--bg-soft); font-size: 13px; } .calendar-view:hover { color: var(--text); border-color: var(--accent); } .calendar-view-active { color: var(--text); border-color: var(--accent); background: rgba(110,168,255,0.12); } .cal-ov-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px 0; } .cal-ov-head h3 { margin: 0; font-size: 18px; color: var(--text); } .cal-ov-nav { display: flex; gap: 6px; } /* density wave intensities (cyan, "wave" feel) */ .wave-0 { background: var(--bg-soft); } .wave-1 { background: rgba(34,211,238,0.14); } .wave-2 { background: rgba(34,211,238,0.30); } .wave-3 { background: rgba(34,211,238,0.52); } .wave-4 { background: rgba(34,211,238,0.78); } /* big-event kind colors */ .kind-work { background: #6366f1; } .kind-vacation{ background: #22c55e; } .kind-travel { background: #f59e0b; } .kind-holiday { background: #ef4444; } /* month view */ .cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .cal-month-head span { font-size: 11px; color: var(--muted); text-align: center; } .cal-month-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .cal-cell { position: relative; min-height: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; overflow: hidden; } .cal-cell-num { font-size: 12px; color: var(--text); } .cal-cell.cal-out { opacity: 0.35; } .cal-cell.cal-today { outline: 2px solid var(--accent); } .cal-cell-kinds { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-direction: column; gap: 2px; } .cal-kind-bar { height: 4px; border-radius: 2px; } /* year view (12 mini-months) */ .cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .cal-mini-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-mini-summary { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; min-height: 18px; } .cal-mini-kind { padding: 2px 6px; border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; color: #07120c; font-size: 10px; font-weight: 700; line-height: 1.25; } .cal-dot { display: block; aspect-ratio: 1 / 1; border-radius: 3px; border: 1px solid transparent; } .cal-dot.cal-out { opacity: 0.25; } .cal-dot.cal-today { outline: 1px solid var(--accent); } .cal-dot.cal-has-kind { border-width: 2px; } .cal-dot.kind-work { border-color: #6366f1; } .cal-dot.kind-vacation{ border-color: #22c55e; } .cal-dot.kind-travel { border-color: #f59e0b; } .cal-dot.kind-holiday { border-color: #ef4444; } /* years view (multi-year month grid) */ .cal-years { display: flex; flex-direction: column; gap: 10px; } .cal-years-row { display: flex; align-items: center; gap: 10px; } .cal-years-label { width: 44px; font-weight: 600; color: var(--text); font-size: 14px; } .cal-years-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; flex: 1; } .cal-ymonth { position: relative; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; display: flex; flex-direction: column; justify-content: space-between; } .cal-ymonth.cal-today { outline: 2px solid var(--accent); } .cal-ymonth-name { font-size: 11px; color: var(--text); } .cal-ymonth-kinds { display: flex; gap: 3px; flex-wrap: wrap; } .cal-kind-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } /* legend */ .cal-legend { display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; align-items: center; } .cal-legend-group { display: flex; align-items: center; gap: 6px; } .cal-legend-label { font-size: 12px; color: var(--muted); margin-right: 2px; } .cal-legend-wave { width: 18px; height: 12px; border-radius: 3px; } .cal-legend-kind { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); } /* Feedback history selector (AUR-1302) */ .feedback-history-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px 0; font-size: 12px; } .feedback-history { padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--muted); background: var(--bg-soft); font-family: ui-monospace, Menlo, Consolas, monospace; } .feedback-history:hover { color: var(--text); border-color: var(--accent); } .feedback-history-active { color: var(--text); border-color: var(--accent); background: rgba(110,168,255,0.10); } /* Health PT report section (AUR-1302) */ .health-pt-report { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-top: 18px; font-size: 14px; line-height: 1.55; } .health-pt-report h3 { font-size: 16px; margin: 12px 0 6px; color: var(--text); } .health-pt-report h4 { font-size: 14px; margin: 10px 0 4px; color: var(--text); } .health-pt-report ul { margin: 6px 0; padding-left: 20px; } .health-pt-report li { margin: 2px 0; } /* Task action buttons + add form (AUR-1302 task interactivity) */ .tasks-row { display: flex; align-items: center; gap: 8px; } .tasks-row .task-text { flex: 1; } .task-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0.6; } .tasks-row:hover .task-actions { opacity: 1; } .task-action-form { display: inline; margin: 0; padding: 0; } .task-action { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 1px 6px; border-radius: 3px; cursor: pointer; font-size: 11px; line-height: 1.2; } .task-action:hover { color: var(--text); border-color: var(--accent); } .task-action-done:hover { color: var(--success); border-color: var(--success); } .task-action-reopen:hover { color: var(--accent); border-color: var(--accent); } .task-add-form { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } .task-add-input { flex: 1; background: transparent; border: 1px solid var(--line); color: var(--text); padding: 4px 8px; border-radius: 4px; font-size: 13px; font-family: inherit; } .task-add-input:focus { border-color: var(--accent); outline: none; } .task-add-btn { background: rgba(110,168,255,0.10); border: 1px solid var(--accent); color: var(--accent); padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; } .task-add-btn:hover { background: rgba(110,168,255,0.18); } /* ABS-1802: mutation feedback stays beside the control that initiated it. htmx adds .htmx-request for the lifetime of the request and the returned fragment replaces only .tasks-tab, so the document never navigates. */ .task-save-state { color: var(--text-muted); font-size: 0.72rem; min-width: 4.75rem; text-align: right; } .task-save-busy { display: none; color: var(--accent); } .task-add-form.htmx-request .task-save-idle { display: none; } .task-add-form.htmx-request .task-save-busy { display: inline; } .task-action-form.htmx-request, .task-edit-form.htmx-request { opacity: 0.62; } .tasks-row, .tasks-section { transition: opacity 180ms ease, transform 220ms ease; } @media (prefers-reduced-motion: reduce) { .tasks-row, .tasks-section { transition: none; } ::view-transition-group(*) { animation-duration: 0.01ms; } } /* Doctor's report (parallel to PT report) */ .health-doctor-report { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--success); border-radius: 10px; padding: 16px 18px; margin-top: 18px; font-size: 14px; line-height: 1.55; } .health-doctor-report h3 { font-size: 16px; margin: 12px 0 6px; color: var(--text); } .health-doctor-report h4 { font-size: 14px; margin: 10px 0 4px; color: var(--text); } .health-doctor-report ul { margin: 6px 0; padding-left: 20px; } .health-doctor-report li { margin: 2px 0; } /* Task status markers (cancelled, delegated, migrated, blocked) */ .tasks-row.cancelled { color: var(--muted); text-decoration: line-through; opacity: 0.7; } .tasks-row.cancelled .task-dot { color: var(--danger); } .tasks-row.delegated { color: var(--text); } .tasks-row.delegated .task-dot { color: var(--accent); } .tasks-row.migrated { color: var(--muted); font-style: italic; } .tasks-row.migrated .task-dot { color: var(--accent-hover); } .tasks-row.blocked { color: var(--muted); } .tasks-row.blocked .task-dot { color: #e6c84d; font-weight: 700; } /* Task more-actions menu */ .task-more { display: inline; position: relative; margin-left: 4px; } .task-more > summary { list-style: none; cursor: pointer; } .task-more > summary::-webkit-details-marker { display: none; } .task-more-panel { position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 180px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); z-index: 10; } .task-more-group { margin: 0 0 6px 0; } .task-more-group:last-child { margin-bottom: 0; } .task-more-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; } .task-move-option, .task-mark-option { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 13px; font-family: inherit; } .task-move-option:hover, .task-mark-option:hover { background: rgba(110,168,255,0.10); color: var(--accent); } .task-move-current { display: block; color: var(--muted); padding: 4px 8px; font-size: 12px; font-style: italic; } /* Tasks section uses

; restore section-card chrome on summary */ details.tasks-section { display: block; } details.tasks-section > summary { list-style: none; cursor: pointer; } details.tasks-section > summary::-webkit-details-marker { display: none; } details.tasks-section > summary::before { content: "▾"; display: inline-block; margin-right: 6px; color: var(--muted); transition: transform 0.15s ease; } details.tasks-section:not([open]) > summary::before { transform: rotate(-90deg); } /* Calendar prev/next nav + day detail (AUR-1302) */ .calendar-nav-bar { display: flex; gap: 6px; margin: 0 0 14px 0; font-size: 13px; align-items: center; } .calendar-nav { padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--muted); background: var(--bg-soft); } .calendar-nav:hover { color: var(--text); border-color: var(--accent); } .calendar-nav-today { font-weight: 600; } .calendar-day-detail { background: var(--bg-soft); border: 1px solid var(--accent); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; } .calendar-day-detail-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .calendar-day-close { font-size: 12px; color: var(--muted); text-decoration: none; } .calendar-day-close:hover { color: var(--danger); } .calendar-day-link { color: inherit; text-decoration: none; } .calendar-day-link:hover { color: var(--accent); } .calendar-event-meta { margin-top: 4px; margin-left: 64px; font-size: 12px; color: var(--muted); } .calendar-event-loc { margin: 2px 0; } .calendar-event-desc { margin: 2px 0; opacity: 0.85; white-space: pre-line; } /* Health filters (AUR-1302) */ .health-filters { display: flex; gap: 16px; align-items: center; margin: 0 0 14px 0; flex-wrap: wrap; } .health-filter-form { display: flex; align-items: center; gap: 6px; margin: 0; } .health-filter-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .health-select { background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); padding: 4px 8px; border-radius: 4px; font-size: 13px; font-family: inherit; } .health-select:focus { border-color: var(--accent); outline: none; } .health-range-buttons { display: flex; gap: 4px; align-items: center; } .health-range-btn { padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--muted); background: var(--bg-soft); font-size: 12px; } .health-range-btn:hover { color: var(--text); border-color: var(--accent); } .health-range-btn-active { color: var(--text); border-color: var(--accent); background: rgba(110,168,255,0.10); } /* Calendar sync meta + refresh button (AUR-1302) */ .calendar-sync-meta { font-size: 12px; color: var(--muted); margin: 4px 0 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; } .calendar-refresh-form { display: inline; margin: 8px 0 0 0; } .calendar-refresh-btn { background: rgba(110,168,255,0.10); border: 1px solid var(--accent); color: var(--accent); padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: inherit; } .calendar-refresh-btn:hover { background: rgba(110,168,255,0.20); } /* KPI cards — visual polish (AUR-1304) */ .kpis-tab .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .kpis-tab .kpi-card { position: relative; padding: 18px 20px; background: linear-gradient(160deg, var(--bg-soft) 0%, #12151c 100%); border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,0.20); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .kpis-tab .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.30); border-color: rgba(110,168,255,0.35); } .kpis-tab .kpi-card-metric { font-size: 13px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .kpis-tab .kpi-card-value { font-size: 30px; font-weight: 700; color: var(--text); margin: 8px 0 12px 0; line-height: 1; } .kpis-tab .kpi-card-meta { font-size: 12px; } .kpi-sparkline { height: 48px; margin: 0 -4px 12px -4px; } .kpi-sparkline canvas { width: 100% !important; height: 100% !important; } /* Finance overview chart (AUR-1304) */ .kpi-finance-chart { background: linear-gradient(160deg, var(--bg-soft) 0%, #12151c 100%); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 0 0 20px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.20); } .kpi-finance-head { margin-bottom: 14px; } .kpi-finance-title { font-size: 18px; margin: 0; color: var(--text); font-weight: 700; } .kpi-finance-note { font-size: 12px; color: var(--muted); margin: 4px 0 0 0; } .kpi-finance-canvas-wrap { height: 280px; position: relative; } .kpi-finance-canvas-wrap canvas { width: 100% !important; height: 100% !important; } /* Lift the rest of the dashboard cards to the same polish level */ .compass-card, .tasks-section, .feedback-section, .calendar-day, .calendar-day-detail, .health-pt-report, .health-doctor-report { box-shadow: 0 2px 6px rgba(0,0,0,0.18); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .compass-card:hover, .tasks-section:hover, .feedback-section:hover, .calendar-day:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25); border-color: rgba(110,168,255,0.25); } /* Tab header polish */ .tab-header h2 { background: linear-gradient(135deg, var(--text) 0%, var(--muted) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Home tab cards */ .home-card { border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.20); } /* Health metric history charts (AUR-1304) */ .health-charts { margin-top: 20px; } .health-charts-title { font-size: 16px; margin: 0 0 12px 0; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; } .health-charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .health-chart-card { background: linear-gradient(160deg, var(--bg-soft) 0%, #12151c 100%); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .health-chart-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.30); border-color: rgba(110,168,255,0.35); } .health-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .health-chart-metric { font-size: 13px; margin: 0; color: var(--muted); font-weight: 500; } .health-chart-latest { font-size: 18px; color: var(--text); font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; } .health-chart-canvas-wrap { height: 160px; position: relative; } .health-chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; } /* AI chat surface (AUR-1303) */ .ai-page { display: grid; grid-template-columns: 280px 1fr; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 4px 20px 24px; } .ai-sidebar { background: linear-gradient(160deg, var(--bg-soft) 0%, #12151c 100%); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; height: fit-content; position: sticky; top: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); } .ai-sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .ai-sidebar-head h3 { font-size: 13px; margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } /* ABS-1669: the mobile sessions toggle is inert on desktop. */ .ai-sessions-toggle, .ai-sessions-label { display: none; } .ai-new-session-form { margin: 0; } .ai-new-session-btn { background: rgba(110,168,255,0.10); border: 1px solid var(--accent); color: var(--accent); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .ai-new-session-btn:hover { background: rgba(110,168,255,0.20); } .ai-session-list { list-style: none; padding: 0; margin: 0; } .ai-session-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 13px; } .ai-session-row:hover { background: rgba(110,168,255,0.05); } .ai-session-active { background: rgba(110,168,255,0.10); } .ai-session-link { flex: 1; color: var(--text); text-decoration: none; padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-session-link:hover { color: var(--accent); } .ai-session-active .ai-session-link { font-weight: 600; color: var(--accent); } .ai-session-kill-form { margin: 0; opacity: 0; transition: opacity 0.15s ease; } .ai-session-row:hover .ai-session-kill-form { opacity: 1; } .ai-session-kill-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1; } .ai-session-kill-btn:hover { color: var(--danger); } .ai-main { background: linear-gradient(160deg, var(--bg-soft) 0%, #12151c 100%); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; min-height: 70vh; box-shadow: 0 2px 6px rgba(0,0,0,0.18); } .ai-main-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .ai-session-title { font-size: 18px; margin: 0; color: var(--text); } .ai-rename { display: inline; } .ai-rename-summary { list-style: none; cursor: pointer; color: var(--muted); padding: 4px; } .ai-rename-summary::-webkit-details-marker { display: none; } .ai-rename-form { display: inline-flex; gap: 6px; margin-left: 6px; } .ai-rename-input { background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 4px 8px; border-radius: 4px; font-size: 13px; } .ai-rename-btn { background: rgba(110,168,255,0.10); border: 1px solid var(--accent); color: var(--accent); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .ai-empty { padding: 40px 0; text-align: center; } .ai-empty h2 { font-size: 24px; color: var(--text); margin: 0 0 8px 0; } .ai-empty p { color: var(--muted); margin: 0; } .ai-empty-hint { color: var(--muted); font-style: italic; padding: 16px 0; text-align: center; } .ai-message-list { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 8px 0; overflow-y: auto; } .ai-msg { padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.55; max-width: 80%; } .ai-msg-user { align-self: flex-end; background: rgba(110,168,255,0.10); border: 1px solid rgba(110,168,255,0.30); } .ai-msg-assistant { align-self: flex-start; background: rgba(102,209,158,0.06); border: 1px solid rgba(102,209,158,0.25); } .ai-msg-system { align-self: center; background: rgba(154,163,178,0.08); border: 1px solid var(--line); font-size: 12px; color: var(--muted); } .ai-msg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .ai-msg-time { font-family: ui-monospace, Menlo, Consolas, monospace; } .ai-msg-body p { margin: 4px 0; } .ai-msg-body ul { margin: 4px 0; padding-left: 20px; } /* ABS-1669: chat markdown must never widen the pane — code blocks wrap and scroll internally, long tokens/URLs break, media shrinks to fit. */ .ai-msg { min-width: 0; } .ai-msg-body { overflow-wrap: break-word; } .ai-msg-body pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .ai-msg-body code { overflow-wrap: anywhere; } .ai-msg-body img { max-width: 100%; height: auto; } .ai-msg-body table { display: block; max-width: 100%; overflow-x: auto; } /* ABS-1648: working indicator shown while a chat turn runs server-side. */ .ai-msg-working .ai-msg-body { display: flex; align-items: center; gap: 10px; } .ai-working-status { color: var(--muted); font-size: 13px; font-style: italic; } .ai-working-dots { display: inline-flex; gap: 4px; } .ai-working-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-working-pulse 1.2s ease-in-out infinite; } .ai-working-dots span:nth-child(2) { animation-delay: 0.2s; } .ai-working-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes ai-working-pulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } .ai-input-form { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; } .ai-picker-row { display: flex; flex: 0 1 420px; flex-wrap: wrap; gap: 8px; min-width: 260px; } .ai-picker { display: grid; flex: 1 1 150px; gap: 3px; min-width: 0; } .ai-picker-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .ai-picker-select, .ai-picker-text { width: 100%; min-height: 36px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 6px 8px; font-size: 13px; } .ai-picker-select:focus, .ai-picker-text:focus { border-color: var(--accent); outline: none; } .ai-input { flex: 1; min-width: 220px; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical; } .ai-input:focus { border-color: var(--accent); outline: none; } .ai-send-btn { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-hover) 100%); border: none; color: #0f1115; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; align-self: flex-end; } .ai-send-btn:hover { filter: brightness(1.1); } @media (max-width: 900px) { .ai-page { grid-template-columns: 1fr; } .ai-sidebar { position: static; } } /* ============================================================ */ /* AUR-1355: Strategy tab — calm-CTO programs.yaml view */ /* ============================================================ */ .strategy-tab .tab-subtitle { font-size: 13px; color: var(--muted); margin: 4px 0 12px 0; max-width: 720px; } .strategy-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px 0; } .strategy-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--muted); } .strategy-chip strong { color: var(--text); margin-right: 4px; font-weight: 700; } .strategy-focus { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 18px; margin: 0 0 24px 0; } .strategy-focus h3 { margin: 0 0 10px 0; font-size: 16px; color: var(--text); } .strategy-focus-list { list-style: none; padding: 0; margin: 0; } .strategy-focus-item { padding: 8px 0; border-bottom: 1px solid var(--line); } .strategy-focus-item:last-child { border-bottom: 0; } .strategy-focus-name { font-weight: 600; color: var(--text); font-size: 14px; } .strategy-focus-next { font-size: 13px; color: var(--muted); margin-top: 2px; padding-left: 8px; } .strategy-essentialism { margin: 10px 0 0 0; padding: 8px 12px; background: rgba(255, 200, 0, 0.08); border: 1px solid rgba(255, 200, 0, 0.3); border-radius: 8px; font-size: 13px; color: var(--text); } .strategy-program { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 0 0 16px 0; } .strategy-program-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .strategy-program-head h3 { margin: 0; font-size: 16px; color: var(--text); } .strategy-program-rank { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; } .strategy-rank-primary { border-left: 3px solid #4ade80; } .strategy-rank-secondary { border-left: 3px solid #60a5fa; } .strategy-rank-support { border-left: 3px solid #a78bfa; } .strategy-rank-life_infra { border-left: 3px solid #fbbf24; } .strategy-rank-timebox { border-left: 3px solid #fb923c; } .strategy-rank-deferred { border-left: 3px solid #94a3b8; } .strategy-rank-archive { border-left: 3px solid #475569; opacity: 0.55; } .strategy-program-intent { font-size: 13px; color: var(--muted); margin: 4px 0 12px 0; line-height: 1.45; max-width: 760px; } .strategy-section { margin: 12px 0 0 0; } .strategy-section h4 { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px 0; } .strategy-project-list { list-style: none; padding: 0; margin: 0; } .strategy-project { padding: 6px 0; border-bottom: 1px solid var(--line); } .strategy-project:last-child { border-bottom: 0; } .strategy-project-head { display: flex; align-items: baseline; gap: 6px; } .strategy-status-glyph { font-size: 14px; color: var(--muted); width: 14px; text-align: center; } .strategy-status-active .strategy-status-glyph { color: #4ade80; } .strategy-status-paused .strategy-status-glyph { color: #fbbf24; } .strategy-status-watch .strategy-status-glyph { color: #94a3b8; } .strategy-status-timebox .strategy-status-glyph { color: #fb923c; } .strategy-status-dead .strategy-status-glyph { color: #64748b; } .strategy-project-name { font-weight: 500; color: var(--text); font-size: 13px; } .strategy-project-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0 20px; } .strategy-meta-chip { font-size: 10px; background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; color: var(--muted); font-family: var(--font-mono, monospace); } .strategy-meta-wind-down { border-color: rgba(255, 200, 0, 0.3); color: var(--text); } .strategy-noise p { font-size: 12px; color: var(--muted); margin: 4px 0 0 0; line-height: 1.5; } .strategy-project-notes { margin: 4px 0 0 20px; font-size: 12px; } .strategy-project-notes summary { cursor: pointer; color: var(--muted); font-size: 11px; } .strategy-project-notes p { margin: 4px 0 0 0; color: var(--text); line-height: 1.5; max-width: 720px; } .strategy-source { margin-top: 24px; font-size: 12px; color: var(--muted); } /* ============================================================ */ /* AUR-1412: Purpose decision layer */ /* ============================================================ */ .purpose-tab { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .purpose-header { margin-bottom: 0; } .purpose-guidance { max-width: 760px; margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid rgba(110,168,255,0.68); border-radius: 0 8px 8px 0; background: rgba(110,168,255,0.08); color: var(--text); font-size: 14px; line-height: 1.45; } .purpose-grid { display: grid; gap: 12px; } .purpose-identity-grid, .purpose-values-grid, .purpose-beliefs-grid, .purpose-vision-grid, .purpose-opportunities-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .purpose-goals-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .purpose-card, .purpose-season-card, .purpose-section { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px; } .purpose-card h3, .purpose-season-card h3, .purpose-section h3 { margin: 0; color: var(--text); font-size: 17px; line-height: 1.25; } .purpose-card p, .purpose-season-thesis { margin: 8px 0 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .purpose-identity-card { border-left: 3px solid var(--accent); } .purpose-value-card { border-left: 3px solid var(--success); } .purpose-belief-card { border-left: 3px solid var(--belief-accent, #38bdf8); } .purpose-vision-card { border-left: 3px solid #f59e0b; } .purpose-goal-card { border-left: 3px solid #a78bfa; } .purpose-opportunity-card { border-left: 3px solid #fb923c; } .purpose-kicker { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-implication { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(102,209,158,0.18); border-radius: 8px; background: rgba(102,209,158,0.06); } .purpose-implication span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-implication strong { display: block; margin-top: 3px; color: var(--text); font-size: 13px; line-height: 1.45; } .purpose-belief-audit { padding: 16px; border: 1px solid rgba(251,191,36,0.22); border-left: 4px solid #fbbf24; border-radius: 8px; background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(110,168,255,0.05) 48%, rgba(255,255,255,0.02)), var(--bg-soft); } .purpose-belief-audit h3, .purpose-belief-card h3 { margin: 0; } .purpose-belief-audit p { margin: 8px 0 0; color: var(--text); font-size: 14px; line-height: 1.5; } .purpose-belief-audit-label { display: block; margin-top: 14px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-belief-audit-list { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .purpose-belief-audit-item { min-width: 0; padding: 11px; border: 1px solid var(--belief-border, rgba(255,255,255,0.07)); border-radius: 8px; background: var(--belief-bg, rgba(255,255,255,0.03)); } .purpose-belief-audit-item strong { display: block; margin-top: 7px; color: var(--text); font-size: 13px; line-height: 1.35; } .purpose-belief-audit-item p { margin-top: 6px; color: var(--muted); font-size: 12px; } .purpose-belief-card header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .purpose-belief-status { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--belief-border, rgba(255,255,255,0.08)); border-radius: 999px; color: var(--belief-accent, var(--accent)); background: var(--belief-bg, rgba(255,255,255,0.035)); font-size: 11px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-belief-meta { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.055); } .purpose-belief-meta span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-belief-meta p { margin: 4px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; } .purpose-belief-supported { --belief-accent: #66d19e; --belief-border: rgba(102,209,158,0.24); --belief-bg: rgba(102,209,158,0.07); } .purpose-belief-weakly-supported { --belief-accent: #fbbf24; --belief-border: rgba(251,191,36,0.24); --belief-bg: rgba(251,191,36,0.07); } .purpose-belief-untested { --belief-accent: #38bdf8; --belief-border: rgba(56,189,248,0.24); --belief-bg: rgba(56,189,248,0.07); } .purpose-belief-contradicted { --belief-accent: #f87171; --belief-border: rgba(248,113,113,0.24); --belief-bg: rgba(248,113,113,0.07); } .purpose-belief-core { --belief-accent: #a78bfa; --belief-border: rgba(167,139,250,0.24); --belief-bg: rgba(167,139,250,0.07); } .purpose-chip-row { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .purpose-chip-row > span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-chip { padding: 4px 8px; border: 1px solid rgba(110,168,255,0.18); border-radius: 999px; color: var(--text); background: rgba(110,168,255,0.08); font-size: 12px; } .purpose-season-card { border-left: 4px solid var(--accent); background: linear-gradient(135deg, rgba(110,168,255,0.12), rgba(102,209,158,0.04) 44%, rgba(15,17,21,0.02)), var(--bg-soft); } .purpose-season-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .purpose-season-badge { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgba(102,209,158,0.30); border-radius: 999px; color: var(--success); background: rgba(102,209,158,0.08); font-size: 12px; } .purpose-season-rule { margin-top: 14px; padding: 12px; border: 1px solid rgba(245,158,11,0.24); border-radius: 8px; background: rgba(245,158,11,0.06); } .purpose-season-rule span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-season-rule strong { display: block; margin-top: 4px; color: var(--text); font-size: 14px; line-height: 1.45; } .purpose-season-columns { margin-top: 14px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } .purpose-list-block { padding: 12px; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; background: rgba(255,255,255,0.025); } .purpose-list-block h4 { margin: 0 0 8px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .purpose-list-block ul { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.5; } .purpose-section h3 { margin-bottom: 12px; } .purpose-ratings { margin: 14px 0 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .purpose-ratings div { min-width: 0; padding: 7px; border-radius: 7px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); } .purpose-ratings dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .purpose-ratings dd { margin: 2px 0 0 0; color: var(--text); font-size: 12px; font-weight: 700; } /* ============================================================ */ /* AUR-1356/AUR-1412: surface nav (Purpose / Execution / */ /* Signals + AI / Settings) + contextual sub-row of tabs. */ /* ============================================================ */ .nav-surfaces .nav-surface { display: inline-block; padding: 9px 14px; margin-right: 4px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: 0.2px; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0; background: transparent; } .nav-surfaces .nav-surface:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); } .nav-surfaces .nav-surface.active { color: var(--text); background: var(--surface); border-color: var(--line); /* Pull the active surface down 1px so its bottom edge merges with the sub-row, visually anchoring the two as one continuous shape. */ position: relative; z-index: 2; margin-bottom: -1px; padding-bottom: 10px; } .nav-subrow { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .nav-subrow .nav-container { height: auto; min-height: 48px; padding: 0; } .nav-purpose-groups { width: 100%; display: flex; align-items: stretch; gap: 10px; min-width: 0; padding: 8px 0; } .nav-purpose-group { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; padding: 6px 10px 8px; border: 1px solid rgba(255,255,255,0.06); border-left-color: rgba(110,168,255,0.34); border-radius: 8px; background: rgba(255,255,255,0.025); } .nav-purpose-group-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; cursor: default; user-select: none; } .nav-purpose-group-label::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); opacity: 0.72; } .nav-subrow .nav-subtabs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px; } .nav-subrow .nav-purpose-links { gap: 4px; } .nav-subrow .nav-subtabs .nav-link { display: inline-block; padding: 6px 10px; font-size: 13px; color: var(--muted); text-decoration: none; border-radius: 6px; border: 1px solid transparent; } .nav-subrow .nav-subtabs .nav-link:hover { color: var(--text); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); } .nav-subrow .nav-subtabs .nav-link.active { color: var(--text); background: rgba(110,168,255,0.12); border-color: rgba(110,168,255,0.34); } /* BD outreach queue (ABS-1637). Layout classes, not inline styles, so the phone block below can restack them (ABS-1674 — media queries cannot override inline styles). Desktop reproduces the original row layout. */ .bd-item { border-left: 3px solid var(--accent); padding: 6px 12px; margin: 6px 0; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; } .bd-item-main { min-width: 0; } .bd-item-subject { font-weight: 700; } .bd-item-preview { font-size: 0.9rem; overflow-wrap: break-word; } .bd-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; align-items: flex-end; } .bd-action-row { display: flex; gap: 6px; align-items: center; } .bd-action-row .btn { flex: 0 0 auto; } .bd-status { flex: 0 0 auto; } .bd-status-approved { color: var(--success); font-weight: 700; } .bd-feedback-form { display: flex; gap: 4px; align-items: flex-start; flex-wrap: wrap; } .bd-feedback-input { width: 220px; font-size: 0.85rem; } .bd-feedback-btn { flex: 0 0 auto; } .bd-feedback-spin { flex-basis: 100%; font-size: 0.85rem; } /* AUR-1379: shared phone layout for every Next UI surface. */ @media (max-width: 640px) { /* ABS-1669: extend the ABS-1432 app-shell to phones — the page is exactly one viewport tall, nav pinned top, footer pinned bottom, and only .aurora-main scrolls. dvh tracks the browser chrome + on-screen keyboard, so the footer stays on screen. */ body { height: 100vh; height: 100dvh; overflow: hidden; } /* ABS-1434: collapse the inline nav into a slim, pinned top bar with a hamburger; the surfaces + sub-tabs move into the slide-out drawer. */ .aurora-nav { padding: 0; position: sticky; top: 0; z-index: 70; } .aurora-nav > .nav-container { align-items: center; flex-direction: row; gap: 10px; height: 52px; max-width: none; padding: 0 12px; } .nav-brand { display: flex; align-items: center; flex: 0 0 auto; } .nav-logo { font-size: 17px; } .nav-logo-mark { width: 24px; height: 24px; } /* Quick-capture stays in the top bar and takes the remaining width. */ .nav-capture-form { flex: 1 1 auto; min-width: 0; margin: 0; } .nav-capture-input { width: 100%; } /* The desktop inline surfaces + sub-row are replaced by the drawer. */ .nav-surfaces, .nav-subrow { display: none; } .nav-hamburger { display: inline-flex; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 9px 8px; background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } .nav-hamburger span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .aurora-nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .aurora-nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; } .aurora-nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-drawer-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 80; } .aurora-nav.nav-open .nav-drawer-overlay { opacity: 1; pointer-events: auto; } .nav-drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: min(82vw, 320px); background: var(--bg-soft); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform 0.22s ease; z-index: 90; overflow-y: auto; overscroll-behavior: contain; } .aurora-nav.nav-open .nav-drawer { transform: none; } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .nav-drawer-title { font-weight: 600; color: var(--text); } .nav-drawer-close { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; } .nav-drawer-body { padding: 8px 10px 20px; } .nav-drawer-section { padding: 6px 0; border-bottom: 1px solid var(--line); } .nav-drawer-section.nav-drawer-singles { border-bottom: none; display: flex; gap: 8px; padding-top: 12px; } .nav-drawer-surface { display: block; padding: 8px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .nav-drawer-links { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 2px 4px 6px; } .nav-drawer-link { display: block; min-height: 40px; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; } .nav-drawer-singles .nav-drawer-link { flex: 1 1 0; text-align: center; } .nav-drawer-link.active { color: var(--accent); border-color: rgba(110,168,255,0.5); background: rgba(110,168,255,0.12); } body.nav-drawer-lock { overflow: hidden; } .aurora-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .dashboard-page, .settings-content, .traces-page, .ai-page { width: 100%; max-width: 100%; padding: 12px 12px 20px; } .settings-header, .dashboard-hero, .tab-header { margin-top: 4px; margin-bottom: 14px; } .settings-header h1, .dashboard-hero-title, .tab-header h2 { font-size: 22px; line-height: 1.2; } .settings-card, .home-card, .compass-card, .kpi-goal-briefing, .kpi-card, .health-goal-lights, .health-pt-report, .health-doctor-report, .tasks-section, .feedback-section, .calendar-day, .calendar-day-detail, .strategy-focus, .strategy-program, .purpose-card, .purpose-season-card, .purpose-section, .compass-purpose-bridge, .planning-quarter, .planning-month, .planning-today, .planning-commit-preview, .planning-side-section, .planning-context-card { padding: 12px; overflow-wrap: anywhere; } .field-input, .btn, .health-select, .calendar-refresh-btn, .task-add-btn, .task-add-input, .planning-action-btn { width: 100%; min-height: 40px; } .settings-actions { display: grid; } .dashboard-tabs ul, .planning-view-nav, .planning-week-nav, .tasks-filter-bar, .calendar-window-bar, .calendar-nav-bar, .feedback-history-bar, .health-range-buttons, .strategy-summary { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dashboard-tabs ul::-webkit-scrollbar, .planning-view-nav::-webkit-scrollbar, .planning-week-nav::-webkit-scrollbar, .tasks-filter-bar::-webkit-scrollbar, .calendar-window-bar::-webkit-scrollbar, .calendar-nav-bar::-webkit-scrollbar, .feedback-history-bar::-webkit-scrollbar, .health-range-buttons::-webkit-scrollbar, .strategy-summary::-webkit-scrollbar { display: none; } .dashboard-tab, .planning-view-link, .planning-week-link, .tasks-filter, .calendar-window, .calendar-nav, .feedback-history, .health-range-btn, .strategy-chip { white-space: nowrap; } .home-grid, .kpi-goal-briefing-grid, .kpi-grid, .health-goal-grid, .health-charts-grid, .planning-context-grid, .purpose-identity-grid, .purpose-values-grid, .purpose-beliefs-grid, .purpose-vision-grid, .purpose-goals-grid, .purpose-opportunities-grid, .purpose-belief-audit-list, .purpose-season-columns { grid-template-columns: 1fr; } .compass-overview, .kpi-status-summary, .planning-diagnosis, .purpose-ratings { grid-template-columns: 1fr 1fr; } .health-summary { grid-template-columns: 1fr; } .health-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .health-filters, .health-filter-form { align-items: stretch; flex-direction: column; gap: 8px; } .planning-layout, .planning-week-grid, .planning-today-grid { grid-template-columns: 1fr; } .planning-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .planning-year { margin-inline: -12px; border-left: 0; border-right: 0; border-radius: 0; } .planning-year-months, .planning-year-row, .planning-year-rows { min-width: 980px; } .tasks-section-head, .calendar-day-detail-head, .strategy-program-head, .purpose-season-head, .planning-year-head, .ai-main-head, .health-chart-head { align-items: flex-start; flex-direction: column; gap: 6px; } .tasks-row { align-items: flex-start; flex-wrap: wrap; gap: 6px; } .tasks-row .task-text { flex-basis: calc(100% - 24px); min-width: 0; } .task-actions { width: 100%; flex-wrap: wrap; opacity: 1; } .task-action { min-height: 32px; padding: 4px 8px; } .task-more-panel { right: 0; max-width: calc(100vw - 36px); } .task-add-form { display: grid; grid-template-columns: 1fr; } .calendar-event { display: grid; grid-template-columns: minmax(56px, auto) minmax(0, 1fr); gap: 4px 8px; } .calendar-event-time { margin-right: 0; } .calendar-event-source { display: block; margin: 2px 0 0 0; } .calendar-event-meta { grid-column: 1 / -1; margin-left: 0; } .trace-row-head { align-items: flex-start; flex-direction: column; gap: 2px; } /* ABS-1669: the chat fits the viewport — the page grid fills the app-shell scroll area, the transcript scrolls inside the pane, and the composer stays on screen. Sessions collapse behind the pure-CSS toggle. */ .aurora-main-ai { display: flex; flex-direction: column; overflow: hidden; } .aurora-main-ai .ai-page { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } .ai-page { gap: 12px; } .ai-sidebar { position: static; padding: 8px 12px; } .ai-sidebar-title { display: none; } .ai-sessions-label { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; } .ai-session-list { display: none; } .ai-sessions-toggle:checked ~ .ai-session-list { display: block; max-height: 28dvh; overflow-y: auto; } .ai-sessions-toggle:checked ~ .ai-sidebar-head .ai-sessions-caret { display: inline-block; transform: rotate(180deg); } .ai-main { min-width: 0; min-height: 0; padding: 12px; overflow: hidden; } .ai-message-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .ai-msg { max-width: 100%; } .ai-input-form { display: grid; grid-template-columns: 1fr; gap: 8px; } /* Character + model side by side: one less composer row on screen. */ .ai-picker-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; } .ai-picker, .ai-input, .ai-send-btn { width: 100%; min-width: 0; } /* Prevent iOS Safari from zooming the visual viewport when the chat composer or picker receives focus. */ .ai-input, .ai-picker-select, .ai-picker-text { font-size: 16px; } .ai-rename-input { font-size: 16px; } .ai-send-btn { min-height: 42px; } .ai-rename, .ai-rename-form { width: 100%; } .ai-rename-form { display: grid; grid-template-columns: 1fr; margin: 6px 0 0 0; } /* ABS-1674: BD outreach items stack on phones — draft text full-width on top, then tap-sized actions. Kills the one-word-per-line crush and the off-screen redraft button in the captured viewport. */ .bd-item { flex-direction: column; gap: 8px; } .bd-actions { width: 100%; align-items: stretch; } .bd-action-row { flex-wrap: wrap; } .bd-action-row .btn { flex: 1 1 auto; min-height: 40px; } .bd-feedback-input { width: 100%; } .bd-feedback-btn { width: 100%; min-height: 40px; } /* ABS-1669: the footer is pinned inside the viewport by the app-shell, so keep it slim — version + user + logout on one row, quote below — and pad it into the iPhone home-indicator safe area. */ .aurora-footer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); } .footer-meta { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; } .footer-quote { order: 3; flex-basis: 100%; margin: 0; max-width: 100%; text-align: left; font-size: 11px; /* Wraps instead of the desktop single-line ellipsis (ABS-1498), but clamped to two lines now that the footer is always on screen. */ white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* Break the attribution onto its own line, so the quote is at least two lines (text, then "— Author, Source") on mobile. */ .footer-quote-author { display: block; } .footer-actions { margin-left: auto; } .footer-user { margin: 0; } .footer-logout { min-height: 36px; } } @media (max-width: 420px) { .compass-overview, .kpi-status-summary, .planning-diagnosis, .planning-month-grid { grid-template-columns: 1fr; } .dashboard-page, .settings-content, .traces-page, .ai-page { padding-inline: 10px; } .settings-card, .home-card, .compass-card, .tasks-section, .feedback-section, .calendar-day, .calendar-day-detail, .strategy-focus, .strategy-program, .purpose-belief-audit, .purpose-card, .purpose-season-card, .purpose-section, .compass-purpose-bridge { padding: 10px; } .purpose-ratings, .compass-purpose-grid { grid-template-columns: 1fr; } } /* Global Capture Input (AUR-Idea-Capture) */ .nav-capture-form { margin-left: 20px; display: flex; align-items: center; } .nav-capture-input { background: #090a0d; border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 12px; font-size: 13px; outline: none; width: 130px; transition: width 0.2s ease, border-color 0.2s ease; } .nav-capture-input:focus { border-color: var(--accent); width: 260px; } @media (max-width: 768px) { .nav-capture-form { margin-left: 0; margin-top: 8px; width: 100%; } .nav-capture-input { width: 100% !important; } } /* Ideas Station Board Styles (Kanban columns) */ .ideas-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 14px; } .ideas-column { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .ideas-column-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px 0; color: var(--text); font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 6px; } .ideas-column-count { font-size: 10px; background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 99px; color: var(--muted); } .ideas-column-cards { display: grid; gap: 8px; } .ideas-empty { color: var(--muted); font-size: 11px; font-style: italic; text-align: center; padding: 16px 0; border: 1px dashed var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.01); } .idea-card { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.15s ease, border-color 0.15s ease; } .idea-card:hover { transform: translateY(-2px); border-color: var(--accent); } .idea-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .idea-card-date { font-size: 9px; color: var(--muted); } .idea-card-badge { font-size: 8px; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 4px; border-radius: 3px; font-weight: 600; } .idea-card-badge.leverage { color: var(--success); background: rgba(102, 209, 158, 0.08); border: 1px solid rgba(102, 209, 158, 0.25); } .idea-card-title { margin: 0 0 8px 0; color: var(--text); font-size: 13px; line-height: 1.35; font-weight: 600; } .idea-card-fit { font-size: 10px; color: var(--muted); line-height: 1.3; margin-top: 3px; } .idea-card-fit strong { color: var(--text); font-weight: 500; } .idea-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.03); padding-top: 6px; } .idea-card-tag { font-size: 8px; color: var(--accent); background: rgba(110, 168, 255, 0.08); border: 1px solid rgba(110, 168, 255, 0.18); padding: 1px 4px; border-radius: 3px; text-transform: uppercase; } @media (max-width: 1200px) { .ideas-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .ideas-board { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ideas-board { grid-template-columns: 1fr; } } /* Idea Promote Dropdown Styles */ .idea-promote-dropdown { position: relative; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.03); padding-top: 6px; } .idea-promote-btn { background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 3px 8px; font-size: 10px; cursor: pointer; width: fit-content; list-style: none; font-weight: 500; outline: none; transition: background 0.15s ease, border-color 0.15s ease; } .idea-promote-btn:hover { background: var(--line); border-color: var(--accent); } .idea-promote-btn::-webkit-details-marker { display: none; } .idea-promote-form { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--bg-soft); border: 1px solid var(--accent); border-radius: 6px; padding: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); margin-top: 4px; display: grid; gap: 6px; } .idea-promote-row { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 6px; } .idea-promote-row label { font-size: 10px; color: var(--muted); } .idea-promote-row select { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 3px; font-size: 10px; outline: none; cursor: pointer; width: 100%; } .idea-promote-submit { background: var(--accent); color: var(--bg); border: none; border-radius: 4px; padding: 3px 8px; font-size: 10px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; width: 100%; margin-top: 3px; } .idea-promote-submit:hover { background: var(--accent-hover); } /* Idea Transition Styles */ .idea-transition-form { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.03); padding-top: 6px; } .idea-transition-submit { background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 3px 8px; font-size: 10px; cursor: pointer; width: 100%; font-weight: 500; outline: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .idea-transition-submit:hover { background: var(--line); border-color: var(--accent); color: var(--accent); } /* Focus Alignment Card Styles */ .alignment-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; } .alignment-title { margin: 0 0 6px 0; color: var(--text); font-size: 14px; font-weight: 600; } .alignment-question { color: var(--muted); font-size: 13px; font-style: italic; margin: 0 0 10px 0; line-height: 1.4; } .alignment-form { display: flex; gap: 10px; } .alignment-input { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 12px; font-size: 13px; outline: none; flex: 1; transition: border-color 0.15s ease; } .alignment-input:focus { border-color: var(--accent); } .alignment-submit { background: var(--accent); color: var(--bg); border: none; border-radius: 4px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .alignment-submit:hover { background: var(--accent-hover); } .alignment-locked { display: flex; align-items: center; gap: 8px; background: rgba(102, 209, 158, 0.05); border: 1px solid rgba(102, 209, 158, 0.18); border-radius: 6px; padding: 8px 12px; } .alignment-locked-icon { color: var(--success); font-weight: bold; font-size: 14px; } .alignment-locked-text { font-size: 13px; color: var(--text); } /* Ideas Fermentation Banner Styles */ .fermentation-banner { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .fermentation-content { display: flex; align-items: center; gap: 10px; } .fermentation-icon { font-size: 20px; } .fermentation-text { font-size: 13px; color: var(--text); line-height: 1.4; } .fermentation-kicker { color: var(--muted); font-weight: 500; } .fermentation-title { color: var(--accent); font-style: italic; } .fermentation-actions { display: flex; align-items: center; } .fermentation-action-form { display: flex; gap: 8px; } .fermentation-btn { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 5px 10px; font-size: 11px; cursor: pointer; font-weight: 500; outline: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .fermentation-btn.revisit:hover { border-color: var(--accent); color: var(--accent); } .fermentation-btn.sit:hover { border-color: var(--success); color: var(--success); } .fermentation-btn.archive:hover { border-color: var(--danger); color: var(--danger); } @media (max-width: 768px) { .fermentation-banner { flex-direction: column; align-items: stretch; gap: 10px; } .fermentation-action-form { width: 100%; } .fermentation-btn { flex: 1; text-align: center; } } /* Signals & Evidence Card Styles */ .signals-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; } .signals-identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 14px; } .signals-identity-item { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; } .signals-identity-label { font-size: 13px; font-weight: 500; color: var(--text-muted); } .signals-identity-badge { font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; } .signals-identity-badge.count-active { background: rgba(16, 185, 129, 0.15); color: var(--success); } .signals-identity-badge.count-inactive { background: rgba(107, 114, 128, 0.1); color: var(--text-muted); } .signals-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .signal-item { border-left: 3px solid; padding: 8px 12px; border-radius: 0 6px 6px 0; background: var(--bg-card); } .signal-item.warning { border-left-color: var(--danger); background: rgba(239, 68, 68, 0.05); } .signal-item.affirmation { border-left-color: var(--success); background: rgba(16, 185, 129, 0.05); } .signal-title { font-size: 13px; font-weight: 600; display: block; margin-bottom: 2px; } .signal-item.warning .signal-title { color: var(--danger); } .signal-item.affirmation .signal-title { color: var(--success); } .signal-text { font-size: 12px; line-height: 1.4; color: var(--text); margin: 0; } /* ABS-1435: Today tab mobile — less text, more infographics, tighter. Placed after all base rules so it overrides the 700px fallbacks above. */ @media (max-width: 640px) { .home-greeting h2 { font-size: 20px; } .home-date { font-size: 12px; margin-top: 2px; } .home-streaks { font-size: 11px; line-height: 1.3; margin: 3px 0 8px; } /* Goals at a glance: traffic-light count chips under the greeting. */ .home-kpi-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; } .kpi-strip-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: 12px; } .kpi-strip-item strong { color: var(--text); } .kpi-strip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .strip-green .kpi-strip-dot { background: var(--success); } .strip-yellow .kpi-strip-dot { background: #e6c84d; } .strip-red .kpi-strip-dot { background: var(--danger); } /* The day score becomes a compact conic-gradient progress ring driven by the --score variable set on the element. */ .home-focus-header { flex-direction: row; align-items: center; gap: 12px; } .home-focus-title { font-size: 19px; } .home-score { width: 86px; height: 86px; min-width: 86px; min-height: 86px; padding: 0; border: none; border-radius: 50%; text-align: center; place-items: center; align-content: center; background: radial-gradient(closest-side, var(--bg-soft) 73%, transparent 74% 100%), conic-gradient(var(--ring-color, rgba(110,168,255,0.85)) calc(var(--score, 0) * 1%), rgba(255,255,255,0.08) 0); } .home-score::before { content: none; } .home-score.score-band-high { --ring-color: rgba(34, 197, 94, 0.85); } .home-score.score-band-mid { --ring-color: rgba(245, 158, 11, 0.85); } .home-score.score-band-low { --ring-color: rgba(239, 68, 68, 0.85); } .home-score span { font-size: 9px; } .home-score strong { font-size: 26px; margin-top: 1px; } .home-score-breakdown { display: none; } .home-recommendation { font-size: 13px; margin-bottom: 10px; } /* Goal signals compress into pill chips. */ .home-goal-status { padding: 8px 10px; margin-bottom: 10px; } .home-goal-list { display: flex; flex-wrap: wrap; gap: 6px; } .home-goal-signal { font-size: 11px; padding: 4px 9px; border-radius: 999px; gap: 4px; } .home-goal-arrow { width: auto; font-size: 9px; } /* Verbose purpose context + why/done-when collapse behind a CSS toggle. */ .home-focus-more { display: none; } .home-focus-more-label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; cursor: pointer; } .home-focus-more-label::after { content: "▾"; } .home-focus-more-toggle:checked ~ .home-focus-more { display: block; margin-top: 10px; } .home-focus-more-toggle:checked ~ .home-focus-more-label::after { content: "▴"; } /* Task completion bar above the textual N/M summary. */ .home-task-progress { display: block; height: 8px; margin: 10px 0 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .home-task-progress-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--success)); } .home-task-summary { font-size: 11px; } /* Tighter task, schedule and quote rows. */ .home-task { font-size: 13px; } .home-event { gap: 6px; } .home-event-title { font-size: 13px; } .home-quote { margin: 12px 0; padding: 10px 14px; } .home-quote blockquote { font-size: 13px; } } /* ABS-1436: KPIs / Health / Tasks tabs mobile — less text, more infographics, tighter. Companion to the ABS-1435 Today block above. */ @media (max-width: 640px) { /* --- KPIs: keep lights, sparkline, progress; drop secondary prose. --- */ .kpi-goal-briefing header p, .kpi-brief-meta, .kpi-finance-note { display: none; } .kpi-goal-briefing header h3 { margin-bottom: 2px; } .kpi-brief-action { font-size: 12px; margin: 4px 0 0 0; } .kpi-card-metric { font-size: 13px; } .kpi-card-value { font-size: 20px; margin: 2px 0 8px 0; } .kpi-sparkline { height: 38px; margin-bottom: 8px; } .kpi-card-meta { font-size: 11px; gap: 4px 10px; } .kpi-status-pill { padding: 8px 10px; } .kpi-finance-canvas-wrap { height: 200px; } /* --- Health: summary as a compact 3-up scoreboard; tighter charts. --- */ .health-goal-head p, .health-summary-card p { display: none; } .health-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .health-summary-card { padding: 8px 6px; text-align: center; } .health-summary-card strong { font-size: 18px; } .health-summary-card span { font-size: 10px; } .health-goal-card { padding: 10px; } .health-chart-canvas-wrap { height: 140px; } .health-table { font-size: 12px; } /* --- Tasks: section completion bar; clamp proposal prose. --- */ .tasks-section-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .tasks-section-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--success)); } .tasks-proposed-head p { display: none; } .tasks-proposal-reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .task-text { font-size: 13px; } .tasks-focus-item { font-size: 13px; } } /* ABS-1437: Phase 3 — desktop keeps its layout but gains the Phase-2 infographics alongside the existing text, plus roomier charts on wide screens. */ @media (min-width: 641px) { /* Goals-at-a-glance strip joins the Today header on desktop. */ .home-kpi-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .kpi-strip-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: 12px; } .kpi-strip-item strong { color: var(--text); } .kpi-strip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .strip-green .kpi-strip-dot { background: var(--success); } .strip-yellow .kpi-strip-dot { background: #e6c84d; } .strip-red .kpi-strip-dot { background: var(--danger); } /* Task completion bars become permanent fixtures, not mobile-only. */ .home-task-progress { display: block; height: 8px; margin: 12px 0 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .home-task-progress-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--success)); } .tasks-section-head h3 { flex: 1; } .tasks-section-bar { display: inline-block; width: 140px; height: 6px; margin-left: 12px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .tasks-section-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--success)); } } @media (min-width: 1280px) { .kpi-finance-canvas-wrap { height: 340px; } .health-chart-canvas-wrap { height: 200px; } .health-charts-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } } /* ---- AUR-2848: chief-of-staff landing (Reality -> Season -> Tension -> * Decision -> Action -> Supporting). The four decision sections read as a * top-to-bottom brief; Supporting Signals is deliberately demoted. */ .home-reality, .home-season, .home-tension, .home-decision { margin: 14px 0; } .home-reality { border-left: 4px solid var(--accent); } .home-reality-list { list-style: none; margin: 8px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .home-reality-list li { position: relative; padding-left: 18px; color: var(--text); line-height: 1.4; } .home-reality-list li::before { content: "•"; position: absolute; left: 4px; color: var(--accent); } .home-season { border-left: 4px solid var(--success); } .home-season-name { margin: 6px 0 0 0; font-size: 20px; font-weight: 700; color: var(--text); } .home-season-rule { margin: 8px 0 0 0; color: var(--muted); line-height: 1.4; } .home-season-rule strong { color: var(--text); } .home-season-constraints { list-style: none; margin: 10px 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .home-season-constraints li { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } /* Tension uses an amber edge to create useful discomfort. */ .home-tension { border-left: 4px solid #f5b556; background: linear-gradient(135deg, rgba(245,181,86,0.10), rgba(245,181,86,0.02) 40%, transparent 100%), var(--bg-soft); } .home-tension-text { margin: 6px 0 0 0; font-size: 17px; line-height: 1.45; color: var(--text); } .home-decision { border-left: 4px solid var(--accent); } .home-decision-question { margin: 6px 0 0 0; font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.35; } .home-decision-by { margin: 10px 0 0 0; font-size: 13px; color: var(--muted); } .home-decision-by strong { color: var(--accent); } /* Supporting Signals — demoted block under the decisions. */ .home-supporting { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); } .home-supporting-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 12px 0 14px 0; } /* Identity evidence as cadence, not counts. */ .identity-cadence { margin-bottom: 14px; } .identity-cadence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; } .identity-cadence-item { display: flex; flex-direction: column; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 6px; padding: 8px 12px; } .identity-label { font-size: 13px; font-weight: 600; color: var(--text); } .identity-phrase { font-size: 12px; color: var(--muted); } .identity-cadence-item.tone-strong { border-left-color: var(--success); } .identity-cadence-item.tone-active { border-left-color: var(--accent); } .identity-cadence-item.tone-fading { border-left-color: #f5b556; } .identity-cadence-item.tone-dormant { border-left-color: var(--muted); } .today-goal { margin: 14px 0; padding: 18px 20px; border: 1px solid rgba(110,168,255,0.24); border-left: 5px solid var(--accent); border-radius: 8px; background: linear-gradient(135deg, rgba(110,168,255,0.13), rgba(34,197,94,0.06) 48%, rgba(255,255,255,0.02)), var(--bg-soft); } .today-goal-kicker { color: var(--accent-hover); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; } .today-goal h3 { margin: 7px 0 12px; color: var(--text); font-size: 30px; line-height: 1.12; overflow-wrap: anywhere; } .today-done-when { display: grid; gap: 8px; } .today-done-when > span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .today-done-when ul, .today-why ul, .today-assumptions ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; } .today-done-when li { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 14px; line-height: 1.35; } .today-done-when li span { color: var(--success); font-weight: 700; } .today-why, .today-actions, .today-assumptions, .brief-correction { margin: 12px 0; } .today-why li, .today-assumptions li { position: relative; padding-left: 16px; color: var(--text); font-size: 14px; line-height: 1.42; } .today-why li::before, .today-assumptions li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .today-actions-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--text); font-size: 15px; line-height: 1.35; } .today-actions-list li::marker { color: var(--accent-hover); font-weight: 700; } .today-all-tasks { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .today-all-tasks summary, .today-context-detail summary, .home-supporting-summary, .home-real-quote summary { cursor: pointer; color: var(--accent-hover); font-size: 13px; font-weight: 700; } .today-all-tasks .home-task-list { margin-top: 10px; } .today-context { margin: 14px 0; padding: 12px 0 2px; border-top: 1px solid var(--line); } .today-context > h3 { margin: 0 0 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } .today-context-detail { border-bottom: 1px solid var(--line); padding: 9px 0; } .today-context-detail > summary { display: flex; justify-content: space-between; gap: 12px; } .today-context-detail > summary::after, .home-supporting-summary::after { content: "+"; color: var(--muted); } .today-context-detail[open] > summary::after, .home-supporting[open] > .home-supporting-summary::after { content: "-"; } .today-context-detail > .home-card, .today-context-detail .home-card { margin-top: 10px; } .today-assumptions p { color: var(--muted); margin: 0 0 9px; font-size: 13px; } .brief-correction-types { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 7px; } .brief-correction-types legend { grid-column: 1 / -1; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .brief-correction-type { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,0.02); color: var(--text); font-size: 12px; } .brief-correction-type input { accent-color: var(--accent); } .brief-correction-label { display: block; margin-bottom: 7px; color: var(--text); font-size: 13px; font-weight: 700; } .brief-correction-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; } .brief-correction-input { width: 100%; min-height: 74px; resize: vertical; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); padding: 10px 12px; font: inherit; } .brief-correction-submit { border: 1px solid rgba(110,168,255,0.35); border-radius: 7px; background: var(--accent); color: #08111f; font-weight: 700; padding: 0 16px; cursor: pointer; } .home-supporting { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); } .home-supporting-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; } .home-supporting-summary::-webkit-details-marker { display: none; } .home-supporting-summary .home-supporting-title { margin: 0; color: var(--muted); } .home-supporting-summary .home-kpi-strip { margin: 0; flex: 1; justify-content: flex-end; } .home-supporting-body { margin-top: 14px; display: grid; gap: 14px; } .identity-alignment-summary ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .identity-alignment-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; color: var(--text); background: rgba(255,255,255,0.02); } .identity-alignment-item strong { color: var(--muted); } .identity-alignment-item.tone-strong strong, .identity-alignment-item.tone-active strong { color: var(--success); } .identity-alignment-item.tone-fading strong, .identity-alignment-item.tone-warning strong { color: #e6c84d; } .home-reflection, .home-real-quote { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.018); } .home-reflection h3 { margin: 0 0 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .home-reflection p, .home-real-quote blockquote { margin: 0; color: var(--text); font-size: 14px; line-height: 1.48; } .home-reflection dl { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 14px; } .home-reflection dl div { display: flex; gap: 5px; color: var(--muted); font-size: 11px; } .home-reflection dt { font-weight: 700; } .home-reflection dd { margin: 0; } .home-real-quote { color: var(--muted); } .home-real-quote summary { margin-bottom: 6px; } .home-real-quote cite { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; font-style: normal; } .home-real-quote a { color: var(--accent-hover); } @media (max-width: 640px) { .today-goal { padding: 14px; } .today-goal h3 { font-size: 23px; } .brief-correction-row { grid-template-columns: 1fr; } .brief-correction-submit { min-height: 40px; } .home-supporting-summary { align-items: flex-start; flex-direction: column; } .home-supporting-summary .home-kpi-strip { justify-content: flex-start; } .home-real-quote:not([open]) blockquote, .home-real-quote:not([open]) cite { display: none; } } /* ============================================================ ABS-1546: agency surfaces polish — Activity feed, home proposals strip, tappable Today's Actions, Set Direction editor, two-way Feedback. (ABS-1541..1545) ============================================================ */ /* Shared page header (Activity + Set Direction) */ .page-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; } .page-subtitle { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 16px 0; max-width: 72ch; } /* --- QW-1: Activity feed (decision ledger) --- */ .activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .activity-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 10px 12px; } .activity-row.activity-ok { border-left-color: var(--success); } .activity-row.activity-error { border-left-color: var(--danger); } .activity-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; min-width: 92px; } .activity-tool { font-weight: 600; color: var(--text); font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .activity-badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .activity-badge.ok { background: rgba(102,209,158,0.15); color: var(--success); } .activity-badge.error { background: rgba(255,107,107,0.15); color: var(--danger); } .activity-meta { color: var(--muted); font-size: 12px; margin-left: auto; } .activity-args { flex-basis: 100%; color: var(--muted); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #12151c; border-radius: 6px; padding: 6px 8px; word-break: break-word; } /* --- ABS-1638: memory-injection viewer (what Aurora remembered) --- */ .memory-injection-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px 0; font-size: 13px; } .memory-injection-table th, .memory-injection-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .memory-injection-table thead th { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .memory-injection-source { font-weight: 600; color: var(--text); white-space: nowrap; } .memory-injection-tokens { font-variant-numeric: tabular-nums; text-align: right; color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .memory-injection-preview { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; } .memory-injection-total td { font-weight: 700; color: var(--text); border-bottom: none; } .memory-injection-total .memory-injection-tokens, .memory-injection-total td:nth-child(2) { text-align: right; color: var(--text); } .memory-injection-truncated { color: var(--warning); font-size: 12px; margin: 0 0 10px 0; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: 6px; padding: 8px 10px; } /* --- ABS-1585/ABS-1713: one primary Home focus --- */ .home-on-track { display: grid; gap: 12px; margin: 18px 0; padding: 20px; background: linear-gradient(135deg, rgba(110,168,255,0.12), rgba(34,197,94,0.04)), var(--bg-soft); border: 1px solid rgba(110,168,255,0.28); border-left: 5px solid var(--accent); border-radius: 10px; } .home-on-track-head { display: flex; gap: 12px; align-items: flex-start; } .home-on-track-kicker { display: block; color: var(--accent-hover); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 6px; } .home-on-track-title { margin: 0; color: var(--text); font-size: 28px; line-height: 1.18; font-weight: 700; overflow-wrap: anywhere; } .home-on-track-source { margin: 5px 0 0 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .home-on-track-why { margin: 0; max-width: 72ch; color: var(--muted); font-size: 14px; line-height: 1.5; } .home-on-track-actions { display: flex; justify-content: flex-start; } .home-on-track-form { margin: 0; } .home-on-track-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #0f1115; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; } .home-on-track-button.secondary { background: transparent; color: var(--accent); border-color: var(--line); } .home-on-track-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .home-on-track-button.secondary:hover { background: rgba(110,168,255,0.10); color: var(--accent-hover); } .home-secondary { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.015); } .home-secondary-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 700; } .home-secondary-summary::marker { color: var(--accent); } .home-secondary-counts { color: var(--muted); font-size: 12px; font-weight: 500; text-align: right; } .home-secondary-body { padding: 2px 14px 14px; border-top: 1px solid var(--line); } .home-secondary-body > .home-streaks { margin: 12px 0; } .home-focus-completion ul { margin: 0; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.45; } @media (max-width: 640px) { .home-on-track { padding: 16px; } .home-on-track-title { font-size: 22px; } .home-secondary-summary { align-items: flex-start; flex-direction: column; } .home-secondary-counts { text-align: left; } } /* --- ABS-1586: actionable Sentinel nudges --- */ .home-sentinel-list { list-style: none; margin: 8px 0 0 0; padding: 0; display: grid; gap: 8px; } .home-sentinel-item { display: grid; gap: 7px; } .home-sentinel-item p { margin: 0; } .home-sentinel-actions { display: flex; flex-wrap: wrap; gap: 6px; } .home-sentinel-action { margin: 0; } .home-sentinel-action button { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: var(--bg-soft); color: var(--muted); font-size: 12px; cursor: pointer; } .home-sentinel-action button:hover { color: var(--text); border-color: var(--accent); } /* --- QW-2: home proposals strip --- */ .home-proposals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: rgba(110,168,255,0.08); border: 1px solid rgba(110,168,255,0.25); border-radius: 8px; padding: 10px 14px; margin: 12px 0; } .home-proposals-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .home-proposals-badge { background: var(--accent); color: #0f1115; font-weight: 700; font-size: 12px; min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; } .home-proposals-link { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; } .home-proposals-link:hover { color: var(--accent-hover); text-decoration: underline; } .home-proposals-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; flex-basis: 100%; } .home-proposal { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; font-size: 13px; color: var(--text); } .home-proposals-more { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 12px; } /* --- QW-3: tappable Today's Actions --- */ .today-action-item { display: flex; align-items: flex-start; gap: 8px; } .today-action-form { display: inline; margin: 0; } .today-action-done { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; transition: all 0.12s ease; } .today-action-done:hover { border-color: var(--success); background: rgba(102,209,158,0.15); color: var(--success); } .today-action-text { flex: 1; } /* --- CS-1: Set Direction editor --- */ .direction-targets { display: flex; gap: 6px; margin: 0 0 14px 0; flex-wrap: wrap; } .direction-target { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; } .direction-target:hover { color: var(--text); border-color: var(--accent); } .direction-target.active { background: rgba(110,168,255,0.15); border-color: var(--accent); color: var(--accent); } .direction-path { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; } .direction-path code { color: var(--text); background: #12151c; padding: 1px 6px; border-radius: 4px; } .direction-text { width: 100%; min-height: 320px; resize: vertical; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 13px; line-height: 1.55; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .direction-text:focus { outline: none; border-color: var(--accent); } .direction-actions { margin-top: 10px; } .direction-preview-btn, .direction-save { background: var(--accent); color: #0f1115; border: none; border-radius: 6px; padding: 8px 18px; font-weight: 600; font-size: 14px; cursor: pointer; } .direction-preview-btn:hover, .direction-save:hover { background: var(--accent-hover); } .direction-review { margin-top: 16px; } .direction-diff { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; } .direction-diff-title { font-size: 14px; font-weight: 600; margin: 0 0 10px 0; } .direction-diff-title code { color: var(--accent); } .direction-diff-body { margin: 0 0 12px 0; font-size: 13px; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; background: #12151c; border-radius: 6px; padding: 10px 12px; max-height: 360px; overflow: auto; } .diff-add { color: var(--success); display: block; } .diff-del { color: var(--danger); display: block; } .direction-confirm { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; } .direction-confirm-hint { color: var(--muted); font-size: 12px; } .direction-notice { background: #12151c; border: 1px dashed var(--line); border-radius: 8px; padding: 14px 16px; color: var(--muted); font-size: 13px; } /* --- QW-4: two-way Feedback --- */ .feedback-rate { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; } .feedback-rate h3 { margin: 0 0 4px 0; font-size: 15px; } .feedback-rate-hint { color: var(--muted); font-size: 13px; margin: 0 0 10px 0; } .feedback-rate-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .feedback-rate-text { flex: 1; min-width: 220px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 14px; padding: 8px 10px; } .feedback-rate-text:focus { outline: none; border-color: var(--accent); } .feedback-rate-actions { display: flex; gap: 8px; } .feedback-rate-up, .feedback-rate-down { border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--bg); color: var(--text); } .feedback-rate-up:hover { border-color: var(--success); background: rgba(102,209,158,0.15); } .feedback-rate-down:hover { border-color: var(--danger); background: rgba(255,107,107,0.15); } .feedback-mine { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; } .feedback-mine h3 { margin: 0 0 8px 0; font-size: 14px; } .feedback-mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .feedback-mine-row { font-size: 13px; color: var(--text); display: flex; gap: 8px; align-items: baseline; } .feedback-mine-target { color: var(--muted); font-size: 12px; } .feedback-mine-text { color: var(--text); } .feedback-ai { margin-top: 8px; } .feedback-ai h3 { font-size: 14px; margin: 0 0 8px 0; } /* --- ABS-1733: schedule-conflict alert on the landing page --- */ .home-conflicts { margin: 14px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(220, 130, 30, 0.45); background: rgba(220, 130, 30, 0.10); } .home-conflicts-head { font-size: 0.95rem; } .home-conflicts-list { list-style: none; margin: 8px 0 0 0; padding: 0; display: grid; gap: 6px; } .home-conflict-item { margin: 0; font-size: 0.9rem; opacity: 0.92; } /* Ambient Technology Intelligence tile (Home tab) */ .home-tech-intel { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.015); padding: 12px 14px; } .home-tech-intel-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text); } .home-tech-intel-item { margin: 4px 0; } .home-tech-intel-item > summary { cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.4; } .home-tech-intel-item > summary::marker { color: var(--accent); } .home-tech-intel-body { padding: 8px 0 4px 16px; font-size: 13px; } .home-tech-intel-body p { margin: 0 0 6px; } .home-tech-intel-reason { color: var(--muted); } .home-tech-intel-handling { font-weight: 600; } .home-tech-intel-badge { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; } .home-tech-intel-badge.is-security { background: rgba(220,60,60,0.18); color: #e07070; } .home-tech-intel-badge.is-urgent { background: rgba(220,160,40,0.18); color: #d9a441; } .home-tech-intel-source, .home-tech-intel-detail { font-size: 12px; color: var(--accent); margin-right: 12px; } /* --- Workout suggester (ABS-1913) ------------------------------------ */ .workout-page { max-width: 800px; margin: 0 auto; padding: 1rem 0 2rem; } .workout-page .workout-header { border-bottom: 2px solid #00d4aa; padding-bottom: 1rem; margin-bottom: 2rem; } .workout-page .workout-header h1 { margin: 0; color: #00d4aa; } .workout-page .workout-card { background: rgba(26, 26, 46, 0.75); border-left: 4px solid #00d4aa; padding: 1.5rem; margin: 2rem 0; } .workout-page .exercise { margin: 1rem 0; padding: 0.75rem; background: rgba(0, 212, 170, 0.05); border-radius: 4px; } .workout-page .workout-button { display: inline-block; padding: 0.75rem 1.5rem; background: #00d4aa; color: #12121c; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin: 0.5rem 0.5rem 0.5rem 0; } .workout-page .workout-button:hover:not([disabled]) { background: #00e6bb; } .workout-page .workout-button[disabled] { opacity: 0.55; cursor: not-allowed; } .workout-page .workout-button[disabled] { opacity: 0.55; cursor: not-allowed; } /* ABS-1976: "Try This" is a

styled as a .workout-button — drop the browser's default disclosure marker (its own "→" is the affordance). */ .workout-page .workout-alt-details > summary { list-style: none; } .workout-page .workout-alt-details > summary::-webkit-details-marker { display: none; } .workout-page .workout-alt-details > summary::marker { content: ""; } /* Weekly planning workspace (slice 1) */ .pw-page { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.4fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .pw-page { grid-template-columns: 1fr; } } .pw-chat { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.015); padding: 14px; display: flex; flex-direction: column; min-height: 60vh; } .pw-chat-head h2 { margin: 0 0 2px; font-size: 16px; } .pw-chat-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); } .pw-chat .ai-message-list { flex: 1; overflow-y: auto; max-height: 62vh; } .pw-calendar { min-width: 0; } .pw-calendar .calendar-tab { margin-top: 0; } /* Planning tab overhaul (ABS-1917) */ .planning-week-context { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: rgba(255,255,255,0.015); font-size: 13px; } .planning-week-context-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; } .planning-week-context ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; } .planning-stale-chip { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 0 5px; border-radius: 3px; background: rgba(220,160,40,0.18); color: #d9a441; } .planning-context-stale > strong { color: var(--muted); } .planning-primary-risk { margin-top: 20px; } .planning-primary-risk .planning-side-title { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .planning-primary-risk .planning-action { background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-left: 4px solid; padding: 12px 16px; border-radius: 8px; } .planning-risks > summary { cursor: pointer; font-size: 13px; } .planning-risks[open] > summary { margin-bottom: 8px; } /* Negotiating planning board (ABS-1915 slice 1+2) */ .pw-page-board { display: flex; flex-direction: column; gap: 14px; } .pb { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: rgba(255,255,255,0.015); } .pb.pb-busy { opacity: 0.55; pointer-events: none; } .pb-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .pb-toolbar h2 { margin: 0; font-size: 16px; flex: 1; } .pb-notice { font-size: 12px; color: var(--accent); } .pb-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-size: 13px; } .pb-suggest-lit { border-color: var(--accent); color: var(--accent); font-weight: 700; } .pb-questions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .pb-question { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px dashed var(--accent); border-radius: 6px; padding: 6px 10px; font-size: 13px; } .pb-question-text { font-weight: 600; margin-right: 6px; } .pb-chip { border: 1px solid var(--line); border-radius: 12px; padding: 1px 10px; background: transparent; color: var(--text); cursor: pointer; font-size: 12px; } .pb-chip:hover { border-color: var(--accent); } .pb-answer-form input { font-size: 12px; padding: 1px 8px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); } .pb-priorities h3 { margin: 0 0 6px; font-size: 13px; } .pb-priority-list { margin: 0 0 12px; padding-left: 1.4rem; } .pb-priority { margin-bottom: 4px; font-size: 13px; cursor: grab; } .pb-priority-text { margin-right: 8px; } .pb-why { display: inline-block; font-size: 11.5px; color: var(--muted); margin: 0 8px; } .pb-mini { border: none; background: transparent; color: var(--accent); cursor: pointer; font-size: 11.5px; padding: 0 4px; } .pb-main { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: start; } @media (max-width: 900px) { .pb-main { grid-template-columns: 1fr; } } .pb-pool { display: flex; flex-direction: column; gap: 8px; } .pb-lane { border: 1px solid var(--line); border-radius: 6px; padding: 8px; } .pb-lane h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .pb-card { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; font-size: 12.5px; cursor: grab; background: rgba(255,255,255,0.02); } .pb-origin { font-style: normal; font-size: 10px; margin-left: 6px; color: var(--accent); } .pb-add-form { display: flex; flex-direction: column; gap: 4px; } .pb-add-form input, .pb-add-form select { font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); } .pb-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; overflow-x: auto; } .pb-day { min-width: 108px; } .pb-day-head { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .pb-slot { border: 1px dashed transparent; border-radius: 6px; padding: 4px; min-height: 44px; margin-bottom: 4px; background: rgba(255,255,255,0.012); } .pb-slot.pb-over { border-color: var(--accent); } .pb-slot-label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .pb-fixed { font-size: 11.5px; padding: 3px 6px; border-radius: 4px; border-left: 3px solid var(--muted); background: rgba(255,255,255,0.03); margin: 3px 0; } .pb-fixed span { color: var(--muted); font-size: 10.5px; } .pb-placed { font-size: 12px; padding: 4px 6px; border-radius: 5px; border: 1.5px solid var(--accent); margin: 3px 0; cursor: grab; background: color-mix(in srgb, var(--accent) 12%, transparent); } .pb-placed.pb-proposed, .pb-priority.pb-proposed { border-style: dashed; background: transparent; } .pb-commit { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .pb-commit-btn { border-color: var(--accent); color: var(--accent); font-weight: 700; } .pb-empty { font-size: 11.5px; color: var(--muted); margin: 2px 0; } .pw-drawer { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; } .pw-drawer > summary { cursor: pointer; font-size: 13px; font-weight: 600; } .pw-drawer-body { margin-top: 10px; } .pw-drawer .ai-message-list { max-height: 40vh; overflow-y: auto; } /* Pointer-drag visuals for the planning board */ .pb-card, .pb-placed, .pb-priority { touch-action: none; user-select: none; } .pb-drag-clone { position: fixed; z-index: 1000; pointer-events: none; opacity: 0.85; transform: rotate(1.5deg); box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .pb-drag-source { opacity: 0.35; } /* Movable fixed events + plan-level moves */ .pb-fixed { cursor: grab; touch-action: none; user-select: none; } .pb-fixed.pb-moved { border-left-style: dashed; border-left-color: var(--accent); } .pb-moved-chip { font-style: normal; font-size: 9.5px; color: var(--accent); } /* ABS-2033: Address Book */ .address-book { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; } .address-book-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .address-book-head h1 { margin: 2px 0; font-size: clamp(28px, 4vw, 44px); } .address-book-kicker { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .address-book-summary { margin: 4px 0 0; color: var(--muted); } .address-book-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto; align-items: end; gap: 10px; margin-bottom: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .address-book-filters label, .contact-editor label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .04em; } .address-book-filters input, .contact-editor input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--text); background: var(--surface-2); } .address-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } .contact-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.12); } .contact-card-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .contact-avatar { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); font-size: 18px; font-weight: 750; } .contact-identity { min-width: 0; } .contact-identity h2 { margin: 0; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; } .contact-identity p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .contact-tags { display: grid; grid-template-columns: 88px 1fr; gap: 8px; margin-top: 12px; } .contact-tags-label { padding-top: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; } .contact-tag { display: inline-block; margin: 0 5px 5px 0; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 11px; } .contact-editor { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .contact-editor summary { cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 650; } .contact-editor form { display: grid; gap: 10px; margin-top: 10px; } .contact-editor-hint { margin: 0; color: var(--muted); font-size: 11px; } .address-book-empty { padding: 48px 20px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; color: var(--muted); } .address-book-empty h2 { color: var(--text); } .mailing-list-panel { margin-bottom: 22px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); } .mailing-list-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .mailing-list-panel h2, .mailing-list-panel p { margin: 2px 0; } .mailing-list-panel > header > p { color: var(--muted); font-size: 12px; } .mailing-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; } .mailing-group { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-2); text-decoration: none; } .mailing-group:hover { border-color: var(--accent); } .mailing-group strong { text-transform: capitalize; } .mailing-group span, .mailing-preview span { color: var(--muted); font-size: 11px; } .mailing-preview { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .mailing-preview h3, .mailing-preview h4 { margin: 0 0 6px; } .mailing-preview-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .mailing-preview ul { margin: 0; padding-left: 18px; font-size: 12px; } .mailing-membership-editor { padding-top: 10px; border-top: 1px dashed var(--line); } @media (max-width: 900px) { .address-book-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .address-book { width: min(100% - 20px, 1180px); padding-top: 20px; } .address-book-filters { grid-template-columns: 1fr; } .address-book-filters .btn { width: 100%; text-align: center; } .address-book-grid { grid-template-columns: minmax(0, 1fr); } .mailing-list-panel > header { display: block; } .mailing-preview-columns { grid-template-columns: 1fr; } } /* ABS-2095: calm shared chrome and current-day workspace. */ /* ABS-2104: Aurora's shared surfaces use one complete dark palette. Older domain views also carry dark surfaces; changing only the root to light mixed incompatible text and backgrounds. Keep OS light mode readable too. */ :root { color-scheme: dark; } body.has-shimmer .aurora-main { background: rgba(15, 17, 21, .94); } .aurora-nav { position: relative; z-index: 20; } .aurora-nav > .nav-container { gap: 20px; height: auto; min-height: 56px; } .nav-surfaces { flex-wrap: wrap; gap: 4px 12px; } .nav-surface { display: inline-flex; align-items: center; min-height: 44px; } .nav-global { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 18px; max-width: 1200px; margin: 0 auto; min-height: 44px; } .nav-global-link, .nav-capture > summary { color: var(--text); font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; } .nav-global-link:hover, .nav-capture > summary:hover { color: var(--accent); } .nav-capture { position: relative; } .nav-capture-form { position: absolute; z-index: 25; top: 100%; right: 0; display: grid; width: min(350px, calc(100vw - 32px)); padding: 16px; margin: 0; gap: 12px; background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px #0002; } .nav-capture-form textarea { display: block; min-width: 0; width: 100%; padding: 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; resize: vertical; } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .account-details { margin: 20px auto; padding: 0 16px; width: min(1200px, 100%); color: var(--muted); font-size: 0.875rem; } .account-details > summary { cursor: pointer; padding: 10px 0; } .account-details .aurora-footer { position: static; padding: 12px 0; background: var(--bg); } .account-details .footer-meta { gap: 12px; flex-wrap: wrap; } .footer-notification-slot:not(:empty) { margin: 8px auto; padding: 0 12px; } .footer-notification-slot:has(> .notification-center:empty) { margin: 0; padding: 0; } .today-workspace { max-width: 1040px; width: 100%; margin: 0 auto; font-size: 1rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; } .today-workspace h1, .today-workspace h2, .today-workspace h3, .today-workspace p { margin: 0; } .today-workspace h1 { font-size: 1.5rem; font-weight: 600; } .today-workspace h2 { font-size: 1.125rem; font-weight: 600; } .today-workspace h3 { font-size: 1rem; margin-top: 18px; } .today-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .today-heading time { color: var(--muted); font-size: 0.875rem; } .today-focus, .today-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--bg-soft); min-width: 0; } .today-focus { border-top: 3px solid var(--accent); } .today-outcome { font-size: 1rem; color: var(--muted); margin-bottom: 18px; } .today-kicker { font-size: 0.875rem; color: var(--muted); margin-bottom: 4px !important; } .today-next-title { font-size: 1.35rem; font-weight: 600; line-height: 1.35; } .today-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 8px; } .today-controls form { margin: 0; } #personal-activity .today-controls > label, #br-activity-evidence .today-controls > label { min-width: 0; max-width: 100%; } .today-button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-size: 1rem; font-weight: 600; cursor: pointer; max-width: 100%; } .today-button.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); } .today-button.secondary { background: var(--bg-soft); color: var(--text); } .today-button:hover { filter: brightness(1.1); } .today-evidence { border-top: 1px solid var(--line); margin-top: 18px; } .today-evidence > summary, .today-history > summary { cursor: pointer; padding: 12px 0; min-height: 44px; color: var(--accent); } .today-evidence-body { padding: 8px 0; } .today-evidence-body > p, .today-evidence-body > div { margin-top: 8px; } .today-original { white-space: pre-wrap; overflow-wrap: anywhere; } .today-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .today-priorities, .today-commitments { margin: 12px 0 0; padding-left: 22px; } .today-priority { padding: 8px 0; } .today-state, .today-muted { color: var(--muted); font-size: 0.875rem; } .today-commitments { list-style: none; padding: 0; } .today-commitments li { display: grid; grid-template-columns: 3.2rem minmax(0,1fr); gap: 12px; padding: 9px 0; } .today-time { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; } .today-card > p { margin-top: 12px; } .today-constraint { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--line); } .today-history { margin-top: 16px; padding-top: 4px; padding-bottom: 4px; } .today-history > div { padding-bottom: 12px; } .today-notice { margin: 0 0 12px !important; padding: 12px; border: 1px solid var(--warning); border-radius: 8px; background: var(--bg-soft); } .today-sources { padding-left: 20px; } .today-sources li { margin-bottom: 14px; } .today-sources a { color: var(--accent); } .today-sources dl, .today-metadata { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 12px; font-size: 0.875rem; } .today-sources dt, .today-metadata dt { color: var(--muted); } .today-sources dd, .today-metadata dd { margin: 0; } @media (max-width: 640px) { .aurora-nav > .nav-container { min-height: 48px; height: auto; padding: 0 12px; } .nav-global { gap: 4px 16px; justify-content: center; padding: 0 12px; } .nav-capture { position: static; } .nav-capture-form { left: 16px; right: auto; top: 100%; } .dashboard-page:has(.today-workspace) { padding: 16px 12px; } .today-heading { margin-bottom: 12px; } .today-focus, .today-card { padding: 16px; border-radius: 10px; } .today-outcome { margin-bottom: 14px; font-size: 0.9375rem; } .today-next-title { font-size: 1.2rem; } .today-columns { grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: 12px; } .today-controls { gap: 8px; } .today-button { padding: 9px 12px; } .today-evidence { margin-top: 14px; } .today-history { padding-top: 2px; padding-bottom: 2px; } .account-details .aurora-footer { padding-bottom: 12px; } .account-details .footer-meta { min-height: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } .today-later { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; } :root { --surface: var(--bg-soft); } .nav-drawer-link, .nav-subrow .nav-link { min-height: 44px; } /* Keep the board inside its page; the seven-day strip scrolls locally. */ .pb { min-width: 0; overflow-wrap: anywhere; } .pb-main { grid-template-columns: 220px minmax(0, 1fr); } .pb-main > * { min-width: 0; } @media (max-width: 900px) { .pb-main { grid-template-columns: minmax(0, 1fr); } } /* Accepted plan labels and source timestamps must wrap on narrow screens. */ .planning-source-notice, .planning-focus { min-width: 0; overflow-wrap: anywhere; } .pb-card > p, .pb-placed > p { margin: 0; } /* ABS-2125: Podcast Mode cue-card viewer */ .podcast { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; } .podcast-kicker { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .podcast-kicker a { color: inherit; text-decoration: none; } .podcast-summary { margin: 4px 0 0; color: var(--muted); font-size: 14px; } .podcast-empty { color: var(--muted); } .podcast-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; } .podcast-row a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; background: var(--panel); } .podcast-row a:hover { border-color: var(--accent); } .podcast-row-title { font-weight: 600; } .podcast-row-meta { color: var(--muted); font-size: 13px; white-space: nowrap; } .podcast-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--muted); } .podcast-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 26px; } .podcast-toc a { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; text-decoration: none; color: var(--muted); } .podcast-toc a:hover { color: inherit; border-color: var(--accent); } .podcast-toc-backup { opacity: .55; } .podcast-card { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .podcast-card h2 { margin: 0 0 10px; font-size: 17px; } .podcast-card-opening { border-left: 4px solid var(--accent); } .podcast-card-closing { border-left: 4px solid var(--accent); } .podcast-card-backup { opacity: .75; border-style: dashed; } .podcast-card-info { border-left: 4px solid var(--border); } .podcast-cues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cue { padding: 6px 10px; border-radius: 8px; font-size: 15px; line-height: 1.45; } .cue strong { margin-right: 4px; } .cue-key, .cue-hook { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; } .cue-takeaway, .cue-story { background: color-mix(in srgb, var(--accent) 7%, transparent); } .cue-transition { color: var(--muted); font-style: italic; } .cue-emphasis { font-weight: 600; }