/* * Score popover — shared style for the click-to-edit Health/Results * dot used on Weekly Ledger, All Clients, and AM detail. * * The popover is portaled to via position:fixed so it never * gets clipped by any table-wrapper overflow:auto. Editorial mode * flattens corners + fills via the rules at the bottom. */ .score-popover { position: fixed; z-index: 100000; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); padding: 6px; min-width: 160px; animation: spFadeIn 0.12s ease-out both; } @keyframes spFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .score-popover .sp-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 0.78rem; color: var(--ink-body); transition: background 0.1s; } .score-popover .sp-opt:hover { background: var(--accent-ghost); color: var(--accent); } .score-popover .sp-opt.is-current { background: var(--accent-ghost); color: var(--accent); font-weight: 600; } .score-popover .sp-opt .sp-chip { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; font-weight: 700; flex-shrink: 0; } .score-popover .sp-chip.score-val-0 { background: var(--surface-0); color: var(--ink-muted); border: 1px solid var(--border-subtle); } .score-popover .sp-chip.score-val-1 { background: var(--status-danger); color: var(--opt-white, #fff); } .score-popover .sp-chip.score-val-2 { background: var(--status-warning); color: var(--accent-ink, #000); } .score-popover .sp-chip.score-val-3 { background: var(--accent); color: var(--accent-ink, #000); } .score-popover .sp-chip.score-val-4 { background: var(--status-success); color: var(--opt-white, #fff); } /* Pending-save state for auto-save popovers */ .score-popover .sp-saving { text-align: center; padding: 6px; font-size: 0.7rem; color: var(--ink-faint); } /* Score dot click affordance — applies wherever .score-dot.is-clickable is set (All Clients, AM detail, Weekly Ledger). */ .score-dot.is-clickable { cursor: pointer; transition: filter 0.12s, transform 0.12s, box-shadow 0.12s; } .score-dot.is-clickable:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .score-dot.is-clickable[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* Editorial polish */ html[data-design-mode="editorial"] .score-popover { background: #fbfaf6 !important; border: 1px solid #d9d4c4 !important; border-radius: 2px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important; } html[data-design-mode="editorial"] .score-popover .sp-opt { border-radius: 2px !important; } html[data-design-mode="editorial"] .score-popover .sp-chip { border-radius: 2px !important; } /* Editorial chip palette intentionally inherits the canonical --status-* tokens defined in editorial-overlay.css — those tokens already retune for cream-paper contrast. Hardcoding hex here would break that contract: a future palette tweak wouldn't propagate. Removed 2026-04-29 (tick-5 KAREN finding). */