/* ============================================================================ POWER DIALER DESIGN SYSTEM — core.css Reset, base surface, typography helpers, focus, scrollbars. Load order: tokens.css → core.css → components.css → motion.css ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--surface-base); color: var(--ink-1); font: var(--text-body); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Theme swap: surfaces crossfade so flipping light/dark doesn't flash-cut. */ transition: background-color var(--t-panel) var(--ease), color var(--t-panel) var(--ease); } /* The dialer is one fixed viewport with no page scroll. Apply .app-viewport to in the rep dialer; the owner panel may scroll normally. */ .app-viewport { height: 100vh; height: 100dvh; overflow: hidden; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } button:disabled { cursor: default; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--accent-wash); color: var(--ink-1); } hr { border: 0; border-top: 1px solid var(--hairline); margin: calc(var(--u) * 4) 0; } /* --------------------------------------------------------------------------- TYPOGRAPHY HELPERS Names get the only display-scale type in the product. Nothing else exceeds 19px. No italics. Numbers a human reads aloud are always mono. --------------------------------------------------------------------------- */ .t-display { font: var(--text-display); letter-spacing: var(--track-display); } .t-title { font: var(--text-title); letter-spacing: -.02em; } .t-body { font: var(--text-body); } .t-row { font: var(--text-row); } .t-label { font: var(--text-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); } .t-label-mono { font-family: var(--font-num); font-size: 10px; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); } .t-mono { font: var(--text-mono); letter-spacing: .01em; } .t-mono-s { font: var(--text-mono-s); } .t-timer { font: var(--text-timer); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .t-ink-1 { color: var(--ink-1); } .t-ink-2 { color: var(--ink-2); } .t-ink-3 { color: var(--ink-3); } /* Tabular numerals wherever digits change in place (timers, counters), so the layout never wobbles while a number ticks. */ .tnum { font-variant-numeric: tabular-nums; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --------------------------------------------------------------------------- FOCUS — 1.5px inset accent ring inside the existing shadow. Never an outer glow. Keyboard only (:focus-visible). --------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Raised/sunk controls keep their elevation and gain the ring inside it. Components re-declare this with their own shadow stack; this is the fallback for anything unstyled. */ /* --------------------------------------------------------------------------- SCROLLBARS — thin, surface-tinted, invisible until useful. --------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: var(--r-full); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--ink-4); background-clip: padding-box; } /* --------------------------------------------------------------------------- LAYOUT PRIMITIVES — hairline panes, not cards. --------------------------------------------------------------------------- */ .pane { background: var(--surface-base); min-width: 0; } .pane + .pane { border-left: 1px solid var(--hairline); } .pane-header { height: 34px; display: flex; align-items: center; gap: var(--pad); padding: 0 var(--gutter); border-bottom: 1px solid var(--hairline-soft); flex: none; } .pane-scroll { overflow-y: auto; min-height: 0; } /* The app shell — the one big raised surface everything sits in. */ .shell { border-radius: var(--r-shell); background: var(--surface-base); box-shadow: var(--shadow-raise-2); overflow: hidden; } .row-flex { display: flex; align-items: center; gap: var(--pad); } .stack { display: flex; flex-direction: column; gap: var(--pad); } .spacer { flex: 1; } /* --------------------------------------------------------------------------- REDUCED MOTION — every animation collapses to an instant state swap. Opacity fades are kept at near-zero duration so nothing pops harshly. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }