/* R11 concept A — "Control Room" (research/erp-r11/concept-a/notes.md). Every rule is scoped under html[data-concept="a"]. * Graphite chrome (sidebar, tab bar, demo strip: dark in both themes), crisp near-white content in light, a true dark * mode, ONE electric signal blue, semantic green / amber / red used sparingly. Geist for text, Geist Mono for figures. * Elevation: e0 flat page · e1 cards (hairline + 1 px shadow) · e2 popovers, sheets, toasts. Radii 6 / 8 / 12 / 16. */ /* R11.2: Geist and Geist Mono arrive from Google Fonts (swap). Until then these local faces stand in with Geist's metrics * (measured in Chromium: Geist ascent 1.01 em, descent .29 em, width per weight vs Arial / Arial Bold: 400 +2.1 %, 500 +4.4 %, 600 ±0, 700 +2.2 %; Geist Mono advances * match Courier New / Menlo), so the swap moves nothing on Home (qa/r10-foundation.browser.cjs CLS ≤ 0.0005). */ @font-face { font-family: "Geist Fallback"; font-weight: 100 449; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); size-adjust: 102.1%; ascent-override: 98.9%; descent-override: 28.4%; line-gap-override: 0%; } @font-face { font-family: "Geist Fallback"; font-weight: 450 549; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); size-adjust: 104.4%; ascent-override: 96.7%; descent-override: 27.8%; line-gap-override: 0%; } @font-face { font-family: "Geist Fallback"; font-weight: 550 649; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 100.0%; ascent-override: 101.0%; descent-override: 29.0%; line-gap-override: 0%; } @font-face { font-family: "Geist Fallback"; font-weight: 650 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 102.2%; ascent-override: 98.8%; descent-override: 28.4%; line-gap-override: 0%; } @font-face { font-family: "Geist Mono Fallback"; src: local("Menlo"), local("Courier New"), local("CourierNewPSMT"), local("Roboto Mono"); size-adjust: 100%; ascent-override: 101%; descent-override: 29%; line-gap-override: 0%; } /* ------------------------------------------------------------------ tokens: light */ html[data-concept="a"] { color-scheme: light; --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #ECEEF2; --surface-3: #F7F8FA; --ink: #0A0C10; --ink-2: #343A46; --ink-3: #5A6170; --line: #E3E6EB; --line-strong: #8B93A1; --brand: #3451F5; --logo-bg: #3451F5; --logo-ink: #FFFFFF; --nav: #0B0D12; --nav-2: #12151C; --nav-ink: #F1F3F6; --nav-ink-2: #A3AAB8; --nav-mark: #FFFFFF; --nav-active: rgba(255, 255, 255, .08); --nav-veil: rgba(255, 255, 255, .06); --nav-line: rgba(255, 255, 255, .08); --nav-focus: #8FA2FF; --accent: #3451F5; --accent-hover: #2843DD; --on-accent: #FFFFFF; --accent-text: #2649D9; --accent-soft: #EEF1FF; --info: #2649D9; --info-strong: #3451F5; --info-soft: #EEF1FF; --on-info: #FFFFFF; --ok: #0F7B4B; --ok-soft: #E6F5EC; --warn: #9A5B00; --warn-soft: #FFF3DE; --warn-bar: #D9900F; --danger: #C8322B; --danger-strong: #C8322B; --danger-hover: #A92822; --danger-soft: #FDECEA; --on-danger: #FFFFFF; --neutral: #3A404C; --neutral-soft: #ECEEF2; --badge-warn-bg: #F5B544; --badge-warn-ink: #241500; --focus: #3451F5; --bar-sales: #3451F5; --bar-exp: #D9900F; --shadow-1: 0 1px 2px rgba(10, 12, 16, .05), 0 0 0 1px rgba(10, 12, 16, .02); --shadow-2: 0 24px 48px -12px rgba(10, 12, 16, .22), 0 4px 12px rgba(10, 12, 16, .08), 0 0 0 1px rgba(10, 12, 16, .06); --shadow-up: 0 -8px 24px rgba(10, 12, 16, .12); --backdrop: rgba(5, 6, 10, .52); --toast-bg: #0B0D12; --toast-ink: #F1F3F6; --toast-ic-ok: #3DD68C; --toast-ic-warn: #F5B544; --toast-ic-danger: #FF7A72; --toast-ic-info: #8FA2FF; --fab-bg: #0B0D12; --fab-ink: #F1F3F6; --fab-line: rgba(255, 255, 255, .14); --fab-hover: #1A1E27; --hero: #0B0D12; --hero-deep: #05060A; --hero-ink: #FFFFFF; --hero-ink-2: #C3C9D4; --ledge: transparent; --ledge-danger: transparent; --stone-1: #F1F2F5; --stone-2: #E3E6EB; --stone-3: #C5CAD3; --stone-ink: #5A6170; --strata: transparent; --r-plate: 6px; --r-input: 8px; --r-card: 12px; --r-sheet: 16px; --font: "Geist", Roboto, "Geist Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* R9: Roboto straight after the brand face (Android) */ --font-cond: var(--font); --font-mono: "Geist Mono", "Geist Mono Fallback", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-display: var(--font); --t-hero: 600 34px/40px var(--font); --t-title: 600 26px/32px var(--font); --t-page-title: 600 26px/32px var(--font); --t-display: 600 40px/44px var(--font); --t-h2-display: 600 18px/24px var(--font); --fs-hero: 100%; --fs-title: 100%; --fs-display: 100%; --t-h2: 600 18px/24px var(--font); --t-h3: 500 16px/22px var(--font); --t-meta: 400 14px/20px var(--font); --t-label: 500 12px/16px var(--font); --t-key: 500 28px/32px var(--font-mono); /* concept-only tokens */ --ca-chrome: #0B0D12; --ca-chrome-2: #151821; --ca-chrome-3: #1C2029; --ca-chrome-line: rgba(255, 255, 255, .08); --ca-chrome-ink: #F1F3F6; --ca-chrome-ink-2: #A3AAB8; --ca-chrome-accent: #8FA2FF; --ca-b2: #0EA5A4; --ca-b2-text: #0B7473; --ca-grid: #EDEFF3; --ca-axis: #6B7280; --ca-live: #16A34A; --ca-glow: rgba(52, 81, 245, .14); } @media (min-width: 720px) { html[data-concept="a"] { --t-hero: 600 38px/44px var(--font); --topbar-h: 60px; } } /* ------------------------------------------------------------------ tokens: dark (system and the switch) */ @media (prefers-color-scheme: dark) { html[data-concept="a"]:not([data-theme="light"]) { color-scheme: dark; --bg: #07080B; --surface: #0F1116; --surface-2: #181B22; --surface-3: #12141A; --ink: #EDEFF3; --ink-2: #B9BFCA; --ink-3: #8F97A5; --line: #22262E; --line-strong: #5C6473; --brand: #3D5BFF; --logo-bg: #3D5BFF; --accent: #3D5BFF; --accent-hover: #3451F5; --on-accent: #FFFFFF; --accent-text: #8FA2FF; --accent-soft: #161C38; --info: #8FA2FF; --info-strong: #3D5BFF; --info-soft: #161C38; --ok: #3DD68C; --ok-soft: #0E2A1D; --warn: #F5B544; --warn-soft: #2C2210; --warn-bar: #F5B544; --danger: #FF7A72; --danger-strong: #D2382F; --danger-hover: #B42E26; --danger-soft: #331513; --neutral: #B9BFCA; --neutral-soft: #1C2029; --focus: #8FA2FF; --bar-sales: #5B77FF; --bar-exp: #F5B544; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .02); --shadow-2: 0 24px 56px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07); --shadow-up: 0 -8px 24px rgba(0, 0, 0, .5); --backdrop: rgba(0, 0, 0, .66); --toast-bg: #EDEFF3; --toast-ink: #0A0C10; --toast-ic-ok: #0F7B4B; --toast-ic-warn: #9A5B00; --toast-ic-danger: #C8322B; --toast-ic-info: #2649D9; --stone-1: #151821; --stone-2: #1C2029; --stone-3: #2A2F3A; --stone-ink: #8F97A5; --ca-chrome: #050608; --ca-chrome-2: #0F1116; --ca-chrome-3: #181B22; --ca-chrome-line: rgba(255, 255, 255, .07); --ca-b2: #2DD4BF; --ca-b2-text: #5EEAD4; --ca-grid: #1A1D24; --ca-axis: #8F97A5; --ca-live: #3DD68C; --ca-glow: rgba(61, 91, 255, .22); } } html[data-concept="a"][data-theme="dark"] { color-scheme: dark; --bg: #07080B; --surface: #0F1116; --surface-2: #181B22; --surface-3: #12141A; --ink: #EDEFF3; --ink-2: #B9BFCA; --ink-3: #8F97A5; --line: #22262E; --line-strong: #5C6473; --brand: #3D5BFF; --logo-bg: #3D5BFF; --accent: #3D5BFF; --accent-hover: #3451F5; --on-accent: #FFFFFF; --accent-text: #8FA2FF; --accent-soft: #161C38; --info: #8FA2FF; --info-strong: #3D5BFF; --info-soft: #161C38; --ok: #3DD68C; --ok-soft: #0E2A1D; --warn: #F5B544; --warn-soft: #2C2210; --warn-bar: #F5B544; --danger: #FF7A72; --danger-strong: #D2382F; --danger-hover: #B42E26; --danger-soft: #331513; --neutral: #B9BFCA; --neutral-soft: #1C2029; --focus: #8FA2FF; --bar-sales: #5B77FF; --bar-exp: #F5B544; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .02); --shadow-2: 0 24px 56px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07); --shadow-up: 0 -8px 24px rgba(0, 0, 0, .5); --backdrop: rgba(0, 0, 0, .66); --toast-bg: #EDEFF3; --toast-ink: #0A0C10; --toast-ic-ok: #0F7B4B; --toast-ic-warn: #9A5B00; --toast-ic-danger: #C8322B; --toast-ic-info: #2649D9; --stone-1: #151821; --stone-2: #1C2029; --stone-3: #2A2F3A; --stone-ink: #8F97A5; --ca-chrome: #050608; --ca-chrome-2: #0F1116; --ca-chrome-3: #181B22; --ca-chrome-line: rgba(255, 255, 255, .07); --ca-b2: #2DD4BF; --ca-b2-text: #5EEAD4; --ca-grid: #1A1D24; --ca-axis: #8F97A5; --ca-live: #3DD68C; --ca-glow: rgba(61, 91, 255, .22); } /* ------------------------------------------------------------------ R11.2: the page modules' colours, as tokens * (qa/r5-contrast.cjs --check allows colour literals in this file only). Fixed whites and shades for the graphite chrome * and elevation; the report legend swatches (drawn on the graphite chart key); the expense category palette. */ html[data-concept="a"] { --ca-white: #FFFFFF; --ca-white-06: rgba(255, 255, 255, .06); --ca-white-08: rgba(255, 255, 255, .08); --ca-white-18: rgba(255, 255, 255, .18); --ca-shade-04: rgba(10, 12, 16, .04); --ca-shade-08: rgba(10, 12, 16, .08); --ca-shade-18: rgba(10, 12, 16, .18); --ca-shade-20: rgba(10, 12, 16, .2); --ca-shade-30: rgba(10, 12, 16, .3); --ca-halo: rgba(61, 91, 255, .38); --ca-accent-shadow: rgba(52, 81, 245, .5); --ca-accent-shadow-strong: rgba(52, 81, 245, .55); --ca-sw-accent: #8FA2FF; --ca-sw-warn: #F5B544; --ca-sw-b2: #2DD4BF; --ca-sw-ok: #3DD68C; --ca-sw-bad: #FF7A72; --ca-sw-flat: #8F97A5; } html[data-concept="a"] { --xa-c1: #3451F5; --xa-c2: #0B7F7E; --xa-c3: #7C3AED; --xa-c4: #B76E00; --xa-c5: #D2410F; --xa-c6: #15803D; --xa-c7: #BE2A9C; --xa-c8: #5A6170; --xa-c9: #8A4B14; --xa-c10: #0E7490; } @media (prefers-color-scheme: dark) { html[data-concept="a"]:not([data-theme="light"]) { --xa-c1: #7D93FF; --xa-c2: #2DD4C9; --xa-c3: #B79CFF; --xa-c4: #F5B544; --xa-c5: #FF8A5B; --xa-c6: #4ADE80; --xa-c7: #F07AD8; --xa-c8: #A3AAB8; --xa-c9: #D9A066; --xa-c10: #5BC8E8; } } html[data-concept="a"][data-theme="dark"] { --xa-c1: #7D93FF; --xa-c2: #2DD4C9; --xa-c3: #B79CFF; --xa-c4: #F5B544; --xa-c5: #FF8A5B; --xa-c6: #4ADE80; --xa-c7: #F07AD8; --xa-c8: #A3AAB8; --xa-c9: #D9A066; --xa-c10: #5BC8E8; } /* R11.2: the number roll's ghost (Q.ca.settle): laid over the figure, which keeps its final text and is only unpainted */ html[data-concept="a"] .ca-ghost { position: absolute; z-index: 1; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; pointer-events: none; } html[data-concept="a"] .ca-counting { opacity: 0 !important; } /* unpainted, still read by a screen reader */ html.no-motion .ca-ghost { display: none; } html.no-motion .ca-counting { opacity: 1 !important; } /* ------------------------------------------------------------------ base type */ html[data-concept="a"] body { font-feature-settings: "ss01", "cv11"; letter-spacing: -.003em; } html[data-concept="a"] .num, html[data-concept="a"] .mono { font-variant-numeric: tabular-nums; } html[data-concept="a"] .page-title { letter-spacing: -.025em; } html[data-concept="a"] :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* R11.2: keypad keys and tabs keep app.css's inset ring (a ring outside them is clipped by their neighbours) */ html[data-concept="a"] :is(.kpad__key, .tabs__btn):focus-visible { outline-offset: -3px; } html[data-concept="a"] [tabindex="-1"]:focus { outline: none; } /* ------------------------------------------------------------------ chrome: demo strip, sidebar, top bar, tab bar */ html[data-concept="a"] .demo-strip { background: var(--ca-chrome); color: var(--ca-chrome-ink-2); border-bottom: 1px solid var(--ca-chrome-line); font-size: 12px; } html[data-concept="a"] .demo-strip .ic { color: var(--ca-chrome-ink-2); } html[data-concept="a"] body::before { background: var(--ca-chrome); } /* R11 sidebar — the "instrument rail" (research/erp-r11/sidebar/SPEC.md). Tokens are global so the tooltip, the * workspace and account popovers (appended to ) share them. Rail = html.sb-is-rail, set by core (sbApply). */ html[data-concept="a"] { --sb-bg: #0B0D12; --sb-card: #12151C; --sb-field: #151821; --sb-field-hover: #1A1E27; --sb-hover: rgba(255, 255, 255, .04); --sb-press: rgba(255, 255, 255, .06); --sb-active: #1C2029; --sb-pop: #1C2029; --sb-kbd: rgba(255, 255, 255, .06); --sb-line-soft: rgba(255, 255, 255, .06); --sb-line: rgba(255, 255, 255, .08); --sb-line-strong: rgba(255, 255, 255, .12); --sb-ink: #F1F3F6; --sb-ink-2: #A3AAB8; --sb-ink-3: #8A93A3; --sb-accent: #3451F5; --sb-accent-hover: #2843DD; --sb-accent-on-dark: #8FA2FF; --sb-focus: #8FA2FF; --sb-danger: #FF7A72; --sb-live: #3DD68C; --sb-kbd-on: rgba(0, 0, 0, .2); --sb-shadow-pop: 0 16px 32px -8px rgba(5, 6, 10, .55), 0 0 0 1px rgba(255, 255, 255, .08); --sb-shadow-over: 0 24px 48px -12px rgba(5, 6, 10, .5); --sb-tab-pill: rgba(143, 162, 255, .16); --sb-tab-ink: #9AA1AE; } @media (prefers-color-scheme: dark) { html[data-concept="a"]:not([data-theme="light"]) { --sb-bg: #050608; --sb-card: #0F1116; } } html[data-concept="a"][data-theme="dark"] { --sb-bg: #050608; --sb-card: #0F1116; } @media (min-width: 720px) { html[data-concept="a"] { --sb-w: 64px; } html[data-concept="a"] .shell { grid-template-columns: var(--sb-w) minmax(0, 1fr); } html[data-concept="a"] .sidebar { position: relative; z-index: 42; background: var(--sb-bg); border-right: 0; color: var(--sb-ink); } html[data-concept="a"] .sidebar__in { position: sticky; top: 0; height: calc(100dvh - var(--sb-cut, 0px)); overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; padding: 12px; background: var(--sb-bg); } html[data-concept="a"] .sidebar .ic { stroke-width: 1.75; } html[data-concept="a"] .sidebar :focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sb-focus); } html[data-concept="a"] .sidebar button { -webkit-tap-highlight-color: transparent; } /* the L-frame: no hairline, two 12 px corner masks tuck the content into the graphite (the one gradient, a mask) */ html[data-concept="a"] .sb-cap { position: fixed; left: var(--sb-w); width: 12px; height: 12px; z-index: 41; pointer-events: none; } html[data-concept="a"] .sb-cap--t { top: var(--sb-cut, 0px); background: radial-gradient(circle at 100% 100%, transparent 11.5px, var(--sb-bg) 12px); } html[data-concept="a"] .sb-cap--b { bottom: 0; background: radial-gradient(circle at 100% 0%, transparent 11.5px, var(--sb-bg) 12px); } /* top band: workspace + collapse, Jump, Record (never shrinks) */ html[data-concept="a"] .sb-top { flex: none; display: flex; flex-direction: column; } html[data-concept="a"] .sb-top > *, html[data-concept="a"] .sb-foot > * { flex-shrink: 0; } html[data-concept="a"] .sb-ws { display: flex; align-items: center; gap: 4px; } html[data-concept="a"] .sidebar .brand.sb-ws__btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 192px; height: 44px; margin: 0; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--sb-ink); text-align: left; min-width: 0; transition: background-color 120ms var(--ease-out); } html[data-concept="a"] .sidebar .brand__mark { width: 28px; height: 28px; border-radius: 8px; overflow: hidden; flex: none; } html[data-concept="a"] .sidebar .brand__mark .logo { width: 28px; height: 28px; box-shadow: none; border-radius: 8px; } html[data-concept="a"] .sidebar .brand__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: normal; } html[data-concept="a"] .sidebar .brand__name { font: 600 14px/18px var(--font); letter-spacing: -.01em; color: var(--sb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .sidebar .brand__app { font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; color: var(--sb-ink-3); } html[data-concept="a"] .sb-ws__sel { color: var(--sb-ink-3); flex: none; } html[data-concept="a"] .sb-collapse { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sb-ink-3); transition: background-color 120ms var(--ease-out); } html[data-concept="a"] .sb-jump, html[data-concept="a"] .sb-rec { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; border: 0; border-radius: 8px; text-align: left; transition: background-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), transform 140ms var(--ease-out); } html[data-concept="a"] .sb-jump { margin-top: 12px; padding: 0 8px 0 10px; background: var(--sb-field); box-shadow: inset 0 0 0 1px var(--sb-line); color: var(--sb-ink-3); font: 400 13px/18px var(--font); } html[data-concept="a"] .sb-jump__t, html[data-concept="a"] .sb-rec__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .sb-rec { margin-top: 8px; padding: 0 8px 0 10px; background: var(--sb-accent); color: var(--ca-white); font: 600 13px/18px var(--font); box-shadow: none; } html[data-concept="a"] .sb-rec .ic { color: var(--ca-white); } html[data-concept="a"] .sb-rec:focus-visible { box-shadow: inset 0 0 0 2px var(--ca-white), 0 0 0 2px var(--sb-focus); } html[data-concept="a"] .sb-kbd { display: inline-grid; place-items: center; box-sizing: border-box; height: 20px; min-width: 20px; padding: 0 5px; border-radius: 6px; background: var(--sb-kbd); color: var(--sb-ink-2); font: 500 11px/16px var(--font-mono); flex: none; } html[data-concept="a"] .sb-kbd--on { background: var(--sb-kbd-on); color: var(--ca-white); } /* nav band: the only part that scrolls; a hairline on an edge it is scrolled away from */ html[data-concept="a"] .sb-band { flex: 1 1 auto; min-height: 0; margin-top: 16px; overflow-y: auto; overscroll-behavior: contain; border-block: 1px solid transparent; scrollbar-width: thin; scrollbar-color: var(--sb-line-strong) transparent; } html[data-concept="a"] .sb-band.is-top-hidden { border-top-color: var(--sb-line); } html[data-concept="a"] .sb-band.is-bot-hidden { border-bottom-color: var(--sb-line); } html[data-concept="a"] .sb-sent { display: block; height: 1px; margin-bottom: -1px; } html[data-concept="a"] .nav { position: relative; } html[data-concept="a"] .sidebar .nav__group { position: static; width: auto; height: 20px; overflow: visible; clip: auto; display: flex; align-items: center; margin: 12px 0 4px; padding: 0 11px; font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; color: var(--sb-ink-3); } html[data-concept="a"] .sidebar .nav__group:first-of-type { margin-top: 0; } html[data-concept="a"] .sidebar .nav ul { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; } html[data-concept="a"] .sidebar .nav ul + .nav__group + ul { margin-top: 0; padding-top: 0; border-top: 0; } html[data-concept="a"] .sidebar .nav__item { position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px; height: 32px; min-height: 32px; box-sizing: border-box; padding: 0 8px 0 11px; border-radius: 8px; color: var(--sb-ink-2); font: 500 14px/20px var(--font); text-align: left; text-decoration: none; transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 140ms var(--ease-out); } html[data-concept="a"] .sidebar .nav__item .ic { width: 18px; height: 18px; color: var(--sb-ink-3); flex: none; } html[data-concept="a"] .sidebar .nav__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .sidebar .nav__item[aria-current="page"] { background: var(--sb-active); box-shadow: inset 0 0 0 1px var(--sb-line); color: var(--ca-white); font-weight: 500; transition: none; } html[data-concept="a"] .sidebar .nav__item[aria-current="page"] .ic { color: var(--sb-accent-on-dark); } html[data-concept="a"] .sidebar .nav__item[aria-current="page"]:focus-visible { box-shadow: inset 0 0 0 2px var(--sb-focus); } html[data-concept="a"] .nav__item[aria-current="page"]::before, html[data-concept="a"] .nav__glide::before { content: none; display: none; } html[data-concept="a"] .nav__glide { background: var(--sb-active); box-shadow: inset 0 0 0 1px var(--sb-line); border-radius: 8px; } html[data-concept="a"] .nav.is-gliding .nav__item[aria-current="page"] { background: transparent; box-shadow: none; } html[data-concept="a"] .sidebar .nav__item:active { background: var(--sb-press); color: var(--sb-ink); transform: scale(.98); transition-duration: 90ms; } html[data-concept="a"] .sidebar .nav .nav__badge { position: static; margin-left: auto; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--sb-ink-2); font: 600 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; } html[data-concept="a"] .sidebar .nav .nav__badge.is-danger { display: inline-flex; align-items: center; gap: 6px; color: var(--sb-danger); } html[data-concept="a"] .sidebar .nav .nav__badge.is-danger::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sb-danger); } html[data-concept="a"] .sidebar .nav__dot { margin-left: auto; margin-right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--sb-danger); flex: none; } /* foot band: the Day readout, then the account (never shrinks) */ html[data-concept="a"] .sb-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; } html[data-concept="a"] .sb-day { background: var(--sb-card); box-shadow: inset 0 0 0 1px var(--sb-line-soft); border-radius: 12px; padding: 12px; } html[data-concept="a"].sb--short .sidebar .sb-day { display: none; } html[data-concept="a"] .sb-acct .userchip { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; min-height: 44px; padding: 0 8px; box-sizing: border-box; border: 0; border-radius: 8px; background: transparent; color: var(--sb-ink); text-align: left; transition: background-color 120ms var(--ease-out); } html[data-concept="a"] .sb-acct .avatar { width: 28px; height: 28px; background: var(--sb-active); box-shadow: inset 0 0 0 1px var(--sb-line-strong); color: var(--sb-ink); font: 500 12px/16px var(--font-mono); } html[data-concept="a"] .sb-acct .userchip__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: normal; } html[data-concept="a"] .sb-acct .userchip__name { font: 500 13px/18px var(--font); color: var(--sb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .sb-acct .userchip__role { font: 400 12px/16px var(--font); color: var(--sb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .sb-acct .userchip__chev { display: inline-block; color: var(--sb-ink-3); flex: none; } /* compact height (< 820 px): tighter gaps, one status line (core) */ html[data-concept="a"].sb--compact .sb-jump { margin-top: 8px; } html[data-concept="a"].sb--compact .sb-band { margin-top: 12px; } html[data-concept="a"].sb--compact .sidebar .nav__group { margin-top: 8px; } html[data-concept="a"].sb--compact .sidebar .nav__group:first-of-type { margin-top: 0; } html[data-concept="a"].sb--compact .sidebar .sb-day__st { margin-top: 8px; padding-top: 8px; } /* the demo pill leaves the sidebar foot */ } @media (min-width: 1024px) { html[data-concept="a"] { --sb-w: 248px; } html[data-concept="a"].sb-is-rail { --sb-w: 64px; } } /* the 720–1023 overlay: the expanded sidebar over the content, no reflow, no scrim */ @media (min-width: 720px) and (max-width: 1023px) { html[data-concept="a"].sb-overlay .sidebar__in { position: fixed; left: 0; top: var(--sb-cut, 0px); width: 248px; z-index: 60; box-shadow: var(--sb-shadow-over); } } /* the rail (64 px): icons only, at the same x as in the expanded column; the words stay for screen readers */ @media (min-width: 720px) { html[data-concept="a"].sb-is-rail .sb-ws { flex-direction: column; align-items: center; gap: 4px; } html[data-concept="a"].sb-is-rail .sidebar .brand.sb-ws__btn { width: 40px; height: 40px; padding: 0; justify-content: center; } html[data-concept="a"].sb-is-rail :is(.sidebar .brand__text, .sb-jump__t, .sb-rec__t, .sidebar .nav__label, .sb-acct .userchip__text) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html[data-concept="a"].sb-is-rail :is(.sb-ws__sel, .sidebar .sb-kbd, .sb-acct .userchip__chev) { display: none; } html[data-concept="a"].sb-is-rail .sb-collapse { width: 40px; height: 32px; } html[data-concept="a"].sb-is-rail :is(.sb-jump, .sb-rec) { width: 40px; height: 40px; padding: 0; justify-content: center; } html[data-concept="a"].sb-is-rail :is(.sb-jump, .sb-rec) .ic { width: 18px; height: 18px; } html[data-concept="a"].sb-is-rail .sb-jump { margin-top: 12px; } html[data-concept="a"].sb-is-rail .sb-band { margin-top: 16px; scrollbar-width: none; } html[data-concept="a"].sb-is-rail .sidebar .nav__group { display: none; } html[data-concept="a"].sb-is-rail .sidebar .nav ul + .nav__group + ul { position: relative; margin-top: 8px; padding-top: 9px; } html[data-concept="a"].sb-is-rail .sidebar .nav ul + .nav__group + ul::before { content: ""; position: absolute; top: 0; left: 8px; width: 24px; height: 1px; background: var(--sb-line); } html[data-concept="a"].sb-is-rail .sidebar .nav__item { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; } html[data-concept="a"].sb-is-rail .sidebar .nav .nav__badge { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--sb-ink); color: var(--sb-bg); font-size: 0; text-align: center; } html[data-concept="a"].sb-is-rail .sidebar .nav .nav__badge::after { content: attr(data-short); font: 600 11px/16px var(--font-mono); } html[data-concept="a"].sb-is-rail .sidebar .nav .nav__badge.is-danger { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 6px; right: 6px; background: var(--sb-danger); } html[data-concept="a"].sb-is-rail .sidebar .nav .nav__badge.is-danger::before, html[data-concept="a"].sb-is-rail .sidebar .nav .nav__badge.is-danger::after { content: none; } html[data-concept="a"].sb-is-rail .sidebar .nav__dot { position: absolute; top: 6px; right: 6px; margin: 0; width: 8px; height: 8px; } html[data-concept="a"].sb-is-rail .sidebar .sb-day { display: none; } html[data-concept="a"].sb-is-rail .sb-foot { align-items: flex-start; } html[data-concept="a"].sb-is-rail .sb-acct .userchip { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; } } @media (min-width: 720px) and (hover: hover) { html[data-concept="a"] .sidebar .nav__item:hover:not([aria-current="page"]) { background: var(--sb-hover); color: var(--sb-ink); } html[data-concept="a"] .sidebar .nav__item:hover .ic { color: var(--sb-ink-2); } html[data-concept="a"] .sidebar .nav__item[aria-current="page"]:hover .ic { color: var(--sb-accent-on-dark); } html[data-concept="a"] :is(.sidebar .brand.sb-ws__btn, .sb-collapse, .sb-acct .userchip):hover { background: var(--sb-hover); } html[data-concept="a"] .sb-collapse:hover { color: var(--sb-ink-2); } html[data-concept="a"] .sb-jump:hover { background: var(--sb-field-hover); box-shadow: inset 0 0 0 1px var(--sb-line-strong); } html[data-concept="a"] .sb-rec:hover { background: var(--sb-accent-hover); } html[data-concept="a"] .sb-day__fig:hover, html[data-concept="a"] .sb-st:hover { background: var(--sb-hover); } html[data-concept="a"] .sb-st:hover .sb-st__go { opacity: 1; } } html[data-concept="a"] :is(.sb-jump, .sb-rec, .sb-collapse, .sb-acct .userchip, .sidebar .brand.sb-ws__btn):active { transform: scale(.98); transition-duration: 90ms; } /* the Day readout (dark in the sidebar; .sb-day--light in the phone More sheet) */ html[data-concept="a"] .sb-day__top { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 12px/16px var(--font); color: var(--sb-ink-2); } html[data-concept="a"] .sb-day__live { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-live); flex: none; } html[data-concept="a"] .sb-day__date { flex: 1; min-width: 0; } html[data-concept="a"] .sb-day__clock { font: 400 12px/16px var(--font-mono); color: var(--sb-ink-3); } html[data-concept="a"] .sb-day__fig { display: grid; margin: 4px -6px 0; padding: 2px 6px; border-radius: 8px; color: inherit; text-decoration: none; transition: background-color 120ms var(--ease-out); } html[data-concept="a"] .sb-day__v { font: 600 20px/24px var(--font-mono); letter-spacing: -.01em; color: var(--sb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-concept="a"] .sb-day__l { margin-top: 2px; font: 400 12px/16px var(--font); color: var(--sb-ink-3); } html[data-concept="a"] .sb-day__m { font: 400 12px/16px var(--font); color: var(--sb-ink-2); } html[data-concept="a"] .sb-day__st { display: grid; gap: 2px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--sb-line-soft); list-style: none; } html[data-concept="a"] .sb-st { display: flex; align-items: center; gap: 8px; width: calc(100% + 12px); height: 28px; margin: 0 -6px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--sb-ink-2); font: 500 12px/16px var(--font); text-align: left; transition: background-color 120ms var(--ease-out); } html[data-concept="a"] .sb-st__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-ink-3); flex: none; } html[data-concept="a"] .sb-st--danger .sb-st__dot { background: var(--sb-danger); } html[data-concept="a"] .sb-st--accent .sb-st__dot { background: var(--sb-accent-on-dark); } html[data-concept="a"] .sb-st__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .sb-st__go { opacity: 0; color: var(--sb-ink-3); flex: none; } html[data-concept="a"] .sb-st:focus-visible .sb-st__go { opacity: 1; } html[data-concept="a"] .sb-day--light { margin: 0 0 var(--s-5); padding: 16px; border-radius: 12px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); } html[data-concept="a"] .sb-day--light .sb-day__top { color: var(--ink-2); } html[data-concept="a"] .sb-day--light .sb-day__live { background: var(--ok); } html[data-concept="a"] .sb-day--light .sb-day__clock, html[data-concept="a"] .sb-day--light .sb-day__l { color: var(--ink-3); } html[data-concept="a"] .sb-day--light .sb-day__fig { margin: 6px -8px 0; padding: 6px 8px; min-height: var(--tap); } html[data-concept="a"] .sb-day--light .sb-day__v { font-size: 24px; line-height: 28px; color: var(--ink); } html[data-concept="a"] .sb-day--light .sb-day__m { color: var(--ink-2); } html[data-concept="a"] .sb-day--light .sb-day__st { gap: 0; border-top-color: var(--line); } html[data-concept="a"] .sb-day--light .sb-st { height: auto; min-height: var(--tap); margin: 0 -8px; width: calc(100% + 16px); padding: 0 8px; color: var(--ink); font-size: 14px; line-height: 20px; } html[data-concept="a"] .sb-day--light .sb-st + .sb-st, html[data-concept="a"] .sb-day--light li + li { border-top: 1px solid var(--line); } html[data-concept="a"] .sb-day--light .sb-st__dot { background: var(--ink-3); } html[data-concept="a"] .sb-day--light .sb-st--danger .sb-st__dot { background: var(--danger); } html[data-concept="a"] .sb-day--light .sb-st--accent .sb-st__dot { background: var(--accent); } html[data-concept="a"] .sb-day--light .sb-st__go { opacity: 1; color: var(--ink-3); } /* rail tooltip, and the dark popovers anchored to the sidebar (workspace menu, account) */ html[data-concept="a"] .sb-tip { position: fixed; z-index: 95; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; background: var(--sb-pop); box-shadow: inset 0 0 0 1px var(--sb-line), 0 8px 16px -8px rgba(5, 6, 10, .5); color: var(--sb-ink); font: 500 12px/16px var(--font); animation: q-fade 120ms var(--ease-out) both; } html[data-concept="a"] .sb-tip__n { font: 600 12px/16px var(--font-mono); color: var(--sb-ink-2); } html[data-concept="a"] .sb-tip .sb-kbd { display: inline-grid; place-items: center; height: 20px; min-width: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; background: var(--sb-kbd); color: var(--sb-ink-2); font: 500 11px/16px var(--font-mono); } html[data-concept="a"] .popover--chrome { width: 264px; padding: 6px; border: 0; border-radius: 12px; background: var(--sb-pop); color: var(--sb-ink); box-shadow: var(--sb-shadow-pop); transform-origin: top left; } html[data-concept="a"] .popover--acct { transform-origin: bottom left; width: 280px; } html[data-concept="a"] .popover--chrome .popover__head { padding: 8px 8px 10px; border-bottom: 1px solid var(--sb-line); margin-bottom: 6px; justify-content: flex-start; } html[data-concept="a"] .popover--chrome .popover__title { font: 600 14px/20px var(--font); color: var(--sb-ink); } html[data-concept="a"] .popover--chrome :is(.muted, .sb-pop__sub, .userlist__role, .popover__section) { color: var(--sb-ink-3); font-size: 12px; line-height: 16px; } html[data-concept="a"] .popover--chrome .popover__section { padding: 6px 8px 4px; letter-spacing: 0; text-transform: none; font-weight: 500; } html[data-concept="a"] .popover--chrome .brand__mark { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex: none; } html[data-concept="a"] .popover--chrome .avatar { background: var(--sb-field); box-shadow: inset 0 0 0 1px var(--sb-line-strong); color: var(--sb-ink); } html[data-concept="a"] .popover--chrome .userlist__btn { color: var(--sb-ink); background: transparent; border-radius: 8px; } html[data-concept="a"] .popover--chrome .userlist__name { color: var(--sb-ink); } html[data-concept="a"] .popover--chrome .userlist__check { color: var(--sb-accent-on-dark); } html[data-concept="a"] .popover--chrome .userlist__btn[aria-pressed="true"] { background: var(--sb-press); } html[data-concept="a"] .popover--chrome .popover__foot { border-top: 1px solid var(--sb-line); margin-top: 6px; padding: 6px 0 0; } html[data-concept="a"] .popover--chrome .popover__foot .btn { background: transparent; color: var(--sb-ink); border: 1px solid var(--sb-line-strong); box-shadow: none; } html[data-concept="a"] .popover--chrome :focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sb-focus); } html[data-concept="a"] .sb-menu { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } html[data-concept="a"] .sb-menu__it { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--sb-ink); font: 500 13px/18px var(--font); text-align: left; } html[data-concept="a"] .sb-menu__it > span:first-of-type { flex: 1; } html[data-concept="a"] .sb-menu__it .ic { color: var(--sb-ink-3); } html[data-concept="a"] .sb-menu__note { font: 500 12px/16px var(--font); color: var(--sb-ink-3); } @media (hover: hover) { html[data-concept="a"] .popover--chrome :is(.userlist__btn, .sb-menu__it):hover { background: var(--sb-press); } html[data-concept="a"] .popover--chrome .popover__foot .btn:hover { background: var(--sb-hover); } } @media (max-width: 719px) { html[data-concept="a"] .sb-cap, html[data-concept="a"] .sb-tip { display: none; } } /* the Jump palette (§7): a light command sheet */ html[data-concept="a"] .modal--jump { width: min(560px, calc(100vw - 32px)); border-radius: 16px; } @media (min-width: 720px) { html[data-concept="a"] .modal-root:has(.modal--jump) { align-items: flex-start; padding-top: 18vh; } html[data-concept="a"] .modal--jump { margin-top: 0; max-height: 64vh; } } html[data-concept="a"] .modal--jump .modal__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; } html[data-concept="a"] .modal--jump .modal__body { padding: 8px; } html[data-concept="a"] .jump__field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; color: var(--ink-3); } html[data-concept="a"] .jump__input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--ink); font: 400 16px/22px var(--font); outline: none; } html[data-concept="a"] .jump__input::placeholder { color: var(--ink-3); } html[data-concept="a"] .jump__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 46vh; overflow-y: auto; } html[data-concept="a"] .jump__opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink); font: 500 14px/20px var(--font); cursor: pointer; } html[data-concept="a"] .jump__opt .ic { color: var(--ink-3); flex: none; } html[data-concept="a"] .jump__opt.is-sel { background: var(--surface-2); } html[data-concept="a"] .jump__opt.is-sel .ic { color: var(--accent-text); } html[data-concept="a"] .jump__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .jump__k { font: 400 12px/16px var(--font); color: var(--ink-3); } html[data-concept="a"] .jump__enter { display: inline-grid; place-items: center; height: 20px; min-width: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 500 11px/16px var(--font-mono); visibility: hidden; } html[data-concept="a"] .jump__opt.is-sel .jump__enter { visibility: visible; } html[data-concept="a"] .jump__empty { padding: 16px 10px; color: var(--ink-3); font: 400 14px/20px var(--font); } @media (max-width: 719px) { html[data-concept="a"] .jump__opt { min-height: var(--tap); } } html.no-motion .sb-tip, html.no-motion .popover--chrome { animation: none !important; } html.no-motion :is(.sidebar .nav__item, .sb-jump, .sb-rec, .sb-collapse, .sb-st, .sb-day__fig, .sb-acct .userchip, .sidebar .brand.sb-ws__btn) { transition: none !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html[data-concept="a"] :is(.sidebar .nav__item, .sb-jump, .sb-rec, .sb-collapse, .sb-st) { transition: none; transform: none !important; } } html[data-concept="a"] .topbar { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); } html[data-concept="a"] .topbar__page { font: 500 14px/20px var(--font); color: var(--ink-2); } html[data-concept="a"] .topbar__page::before { content: "Gulwathe / "; color: var(--ink-3); white-space: pre; } html[data-concept="a"] .topbar__branch { border-radius: 8px; min-height: 36px; font-size: 13px; } html[data-concept="a"] .bell__count { background: var(--danger-strong); font-family: var(--font-mono); font-size: 11px; font-weight: 600; border-color: var(--surface); } html[data-concept="a"] .avatar { background: var(--ca-chrome); color: #FFFFFF; font-family: var(--font-mono); font-weight: 500; font-size: 13px; } html[data-concept="a"] .userchip { border-radius: 10px; } html[data-concept="a"] .viewas { border-radius: 10px; } html[data-concept="a"] .viewas button, html[data-concept="a"] .viewas__btn { border-radius: 8px; } /* phone tab bar: graphite in both themes (R11 sidebar §8.1: the sidebar's language; no glow bar, an 8 px-radius pill) */ html[data-concept="a"] .tabbar { background: var(--sb-bg); border-top: 1px solid var(--sb-line); box-shadow: none; } html[data-concept="a"] .tabbar__item { position: relative; color: var(--sb-tab-ink); font: 500 12px/16px var(--font); } html[data-concept="a"] .tabbar__item .ic { stroke-width: 1.75; padding: 3px 17px; border-radius: 8px; } html[data-concept="a"] .tabbar__item[aria-current="page"] { color: var(--ca-white); font-weight: 500; } html[data-concept="a"] .tabbar__item[aria-current="page"] .ic { background: var(--sb-tab-pill); color: var(--sb-accent-on-dark); stroke-width: 1.75; } /* R11.2: the spec drops the glowing full-width bar; R5's non-colour cue (a visible ≥ 3 px mark at ≥ 3:1) stays, as a short quiet 3 × 20 px mark with no glow, so the current tab never relies on the faint pill tint alone */ html[data-concept="a"] .tabbar__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; inset-inline: calc(50% - 10px) auto; width: 20px; height: 3px; border-radius: 0 0 2px 2px; background: var(--sb-accent-on-dark); box-shadow: none; } html[data-concept="a"] .tabbar__plus { border-color: var(--sb-bg); background: var(--accent); box-shadow: 0 4px 12px rgba(52, 81, 245, .35); } html[data-concept="a"] .tabbar__plus-label { color: #C3C9D4; } html[data-concept="a"] .tabbar .nav__badge { top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--sb-ink); color: var(--sb-bg); font: 600 11px/16px var(--font-mono); box-shadow: none; text-align: center; } html[data-concept="a"] .tabbar__item.has-dot::after { content: ""; position: absolute; top: 6px; left: calc(50% + 9px); width: 8px; height: 8px; border-radius: 50%; background: var(--sb-danger); box-shadow: 0 0 0 2px var(--sb-bg); } /* the More sheet: the phone twin of the sidebar (§8.2) */ html[data-concept="a"] .more__acct { margin-bottom: var(--s-4); } html[data-concept="a"] .more__acct .lrow__title { font: 600 17px/22px var(--font); } html[data-concept="a"] .more__acct .lrow__meta { font: 400 14px/20px var(--font); color: var(--ink-3); } html[data-concept="a"] .more__acct .avatar { width: 40px; height: 40px; } html[data-concept="a"] .morelist .glist__label { font: 600 13px/18px var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); } html[data-concept="a"] .morelist--flat .glist__group:first-child .glist__label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html[data-concept="a"] .morelist .lrow { min-height: 52px; } html[data-concept="a"] .morelist .lrow__title { font: 500 16px/22px var(--font); } html[data-concept="a"] .morelist .lrow__lead .ic { color: var(--ink-3); } html[data-concept="a"] .more__n { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-mono); color: var(--ink-2); } html[data-concept="a"] .more__n--danger { color: var(--danger); } html[data-concept="a"] .more__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); } /* ------------------------------------------------------------------ shared components */ html[data-concept="a"] .page-head { margin-bottom: var(--s-5); } html[data-concept="a"] .page-sub { color: var(--ink-3); font-size: 14px; } html[data-concept="a"] .card, html[data-concept="a"] .glist__box, html[data-concept="a"] .kpi, html[data-concept="a"] .entry-card, html[data-concept="a"] .tbl-wrap { border-color: var(--line); box-shadow: var(--shadow-1); } html[data-concept="a"] .glist__label, html[data-concept="a"] .popover__section { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; color: var(--ink-3); } html[data-concept="a"] .lrow { min-height: 56px; } html[data-concept="a"] .lrow--2 { min-height: 64px; } html[data-concept="a"] .lrow__title { font: 500 15px/20px var(--font); } html[data-concept="a"] .lrow__meta, html[data-concept="a"] .lrow__vsub { font-size: 13px; line-height: 18px; } html[data-concept="a"] .lrow__value { font: 500 15px/20px var(--font-mono); letter-spacing: -.01em; } html[data-concept="a"] button.lrow:active, html[data-concept="a"] .lrow__main:active { transform: none; background: var(--surface-3); } /* buttons: 8 px radius, no ledge, crisp inner highlight on the primary */ html[data-concept="a"] .btn { border-radius: var(--r-input); font: 500 15px/20px var(--font); letter-spacing: -.005em; } html[data-concept="a"] .btn--primary::before, html[data-concept="a"] .btn--danger::before { display: none; } html[data-concept="a"] .btn--primary { background: var(--accent); box-shadow: 0 1px 2px rgba(10, 12, 16, .2), inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px color-mix(in srgb, var(--accent) 80%, #000); } html[data-concept="a"] .btn--danger { box-shadow: 0 1px 2px rgba(10, 12, 16, .2), inset 0 1px 0 rgba(255, 255, 255, .16); } html[data-concept="a"] .btn--primary:active:not(:disabled), html[data-concept="a"] .btn--danger:active:not(:disabled) { transform: scale(.97); } html[data-concept="a"] .btn--secondary { border-color: var(--line); box-shadow: var(--shadow-1); } html[data-concept="a"] .btn--sm { min-height: 36px; font-size: 14px; } @media (pointer: coarse), (max-width: 719px) { html[data-concept="a"] .btn--sm { min-height: var(--tap); } } /* R11.2: the touch floor (UX-03, 48 px) */ @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .btn--primary:hover:not(:disabled) { background: var(--accent-hover); } html[data-concept="a"] .btn--secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--line-strong); } } html[data-concept="a"] .icon-btn { border-radius: var(--r-input); } /* chips, pills, filter pills, segmented */ html[data-concept="a"] .chip, html[data-concept="a"] .fpill { border-radius: var(--r-input); } html[data-concept="a"] .fpill { min-height: 40px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); font: 500 14px/20px var(--font); } @media (pointer: coarse), (max-width: 719px) { html[data-concept="a"] .fpill { min-height: var(--tap); } } html[data-concept="a"] .seg { border-radius: 10px; background: var(--surface-2); padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--line); } /* R11.2: the presenter stage (Desktop / Phone switch) sits on the graphite --nav: keep its veiled track, so the light * label of the unselected option stays readable (was #F1F3F6 on #ECEEF2, 1.04:1) */ html[data-concept="a"] .pstage .seg { background: var(--nav-veil); box-shadow: inset 0 0 0 1px var(--nav-line); } html[data-concept="a"] .seg__btn { border-radius: 7px; font: 500 14px/20px var(--font); padding: 0 var(--s-3); } :where(html[data-concept="a"]) .seg__btn { min-height: 34px; } /* R11.2: same low weight as the touch rule below, so a phone gets the touch size */ @media (pointer: coarse), (max-width: 719px) { :where(html[data-concept="a"]) .seg__btn { min-height: var(--tap); } } /* low specificity: a module's own floor wins */ html[data-concept="a"] .seg__thumb { border-radius: 7px; box-shadow: 0 1px 2px rgba(10, 12, 16, .12), 0 0 0 1px var(--line); } html[data-concept="a"] .seg__btn[aria-checked="true"] { box-shadow: 0 1px 2px rgba(10, 12, 16, .12), 0 0 0 1px var(--line); } html[data-concept="a"] .seg.has-thumb > .seg__btn[aria-checked="true"] { box-shadow: none; } html[data-concept="a"] .seg__btn[aria-checked="true"]::before { width: 6px; height: 6px; } html[data-concept="a"] .seg--lg, html[data-concept="a"] .seg--lg .seg__btn, html[data-concept="a"] .seg--lg > .seg__thumb { border-radius: 10px; } html[data-concept="a"] .tabs__btn[aria-selected="true"] { color: var(--ink); } html[data-concept="a"] .badge, html[data-concept="a"] .pill, html[data-concept="a"] .tag { border-radius: 6px; } html[data-concept="a"] .pill { font-size: 12px; font-weight: 500; } /* tables: mono figures, quiet heads */ html[data-concept="a"] .table th { background: var(--surface-3); font: 500 11px/16px var(--font-mono); letter-spacing: .08em; color: var(--ink-3); } html[data-concept="a"] .table td { font-size: 14px; height: 48px; } html[data-concept="a"] .table td.num, html[data-concept="a"] .table .ta-right { font-family: var(--font-mono); letter-spacing: -.01em; } @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .table tr.is-clickable:hover td { background: var(--surface-3); } } /* forms */ html[data-concept="a"] .input { border-radius: var(--r-input); border-color: var(--line); box-shadow: var(--shadow-1); } html[data-concept="a"] .input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ca-glow); outline: none; } html[data-concept="a"] .field__label { font: 500 13px/18px var(--font); color: var(--ink-2); } /* sheets, popovers, toasts */ html[data-concept="a"] .modal { border-radius: var(--r-sheet); } html[data-concept="a"] .modal__head { border-bottom-color: var(--line); } html[data-concept="a"] .modal__title { font: 600 18px/24px var(--font); letter-spacing: -.015em; } html[data-concept="a"] .modal__foot { background: var(--surface-3); border-top-color: var(--line); border-radius: 0 0 var(--r-sheet) var(--r-sheet); } html[data-concept="a"] .modal-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } html[data-concept="a"] .popover { border-radius: var(--r-card); border-color: var(--line); } html[data-concept="a"] .toast { border-radius: 10px; font-size: 15px; } @media (max-width: 719px) { html[data-concept="a"] .modal__foot { border-radius: 0; } } /* plates (number plates stay plates, a touch finer) */ html[data-concept="a"] .plate { font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em; border-radius: 4px; } /* the Ask AI field */ html[data-concept="a"] .ai-entry { border-radius: 10px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); min-height: 44px; } html[data-concept="a"] .ai-entry__go { border-radius: 7px; width: 32px; height: 32px; } html[data-concept="a"] .ai-entry__k { font-weight: 600; } /* ================================================================== HOME (Q.concepts.a) */ html[data-concept="a"] .ca-home { max-width: 1440px; margin-inline: auto; display: grid; gap: var(--s-4); } html[data-concept="a"] .ca-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } html[data-concept="a"] .ca-tone--accent { color: var(--accent); background-color: var(--accent); } html[data-concept="a"] .ca-tone--b2 { color: var(--ca-b2); background-color: var(--ca-b2); } html[data-concept="a"] .ca-tone--ok { color: var(--ok); background-color: var(--ok); } html[data-concept="a"] .ca-tone--warn { color: var(--warn-bar); background-color: var(--warn-bar); } html[data-concept="a"] .ca-tone--bad { color: var(--danger); background-color: var(--danger); } html[data-concept="a"] .ca-tone--flat { color: var(--line-strong); background-color: var(--line-strong); } html[data-concept="a"] svg.ca-spark, html[data-concept="a"] svg .ca-tone--accent, html[data-concept="a"] svg.ca-gauge__svg { background: none; } /* R11.2: a tone on an SVG shape colours its stroke/fill only: no background-color, so a figure over a red gauge arc is * not read as sitting on red (axe color-contrast) */ html[data-concept="a"] svg [class*="ca-tone--"] { background: none; } html[data-concept="a"] svg[class*="ca-tone"] { background: none; } /* head: eyebrow with the live pulse, the greeting, filters; the AI field under it */ html[data-concept="a"] .ca-head { display: grid; gap: var(--s-3) var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: end; padding-top: var(--s-1); } html[data-concept="a"] .ca-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 6px; } html[data-concept="a"] .ca-title { font: 600 26px/32px var(--font); letter-spacing: -.03em; } html[data-concept="a"] .ca-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; } html[data-concept="a"] .ca-filters .dash-view, html[data-concept="a"] .ca-filters .seg { margin: 0; } html[data-concept="a"] .ca-ai { margin: 0; } @media (min-width: 900px) { html[data-concept="a"] .ca-head { grid-template-columns: minmax(0, 1fr) auto; } html[data-concept="a"] .ca-head__r { justify-self: end; } html[data-concept="a"] .ca-ai { grid-column: 1 / -1; } html[data-concept="a"] .ca-title { font-size: 30px; line-height: 36px; } } @media (min-width: 1500px) { html[data-concept="a"] .ca-head { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) auto; } html[data-concept="a"] .ca-ai { grid-column: 2; grid-row: 1; align-self: end; } html[data-concept="a"] .ca-head__r { grid-column: 3; grid-row: 1; } } /* the live pulse */ html[data-concept="a"] .ca-pulse { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ca-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-live) 18%, transparent); } html[data-concept="a"] .ca-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ca-live); animation: ca-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes ca-ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(2.6); opacity: 0; } } html[data-concept="a"].no-motion .ca-pulse::after { animation: none; display: none; } /* cards */ html[data-concept="a"] .ca-card, html[data-concept="a"] .ca-kpi { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); } html[data-concept="a"] .ca-card { padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; } html[data-concept="a"] .ca-card__head { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; flex-wrap: wrap; } html[data-concept="a"] .ca-card__title { font: 600 15px/20px var(--font); letter-spacing: -.01em; } html[data-concept="a"] .ca-card__sub { font: 500 12px/16px var(--font-mono); color: var(--ink-3); letter-spacing: .02em; } html[data-concept="a"] .ca-card__tools { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2); } html[data-concept="a"] .ca-card__foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: var(--s-1) var(--s-2); } html[data-concept="a"] .ca-foot { font-size: 12px; line-height: 16px; color: var(--ink-3); } html[data-concept="a"] .ca-sub { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: var(--s-1); } html[data-concept="a"] .ca-sub span { text-transform: none; letter-spacing: 0; } html[data-concept="a"] .ca-empty { color: var(--ink-3); font-size: 14px; } html[data-concept="a"] .ca-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-input); background: transparent; color: var(--accent-text); font: 500 14px/20px var(--font); } @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ca-link:hover { background: var(--accent-soft); } } html[data-concept="a"] .ca-chip { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 6px; font: 500 12px/1 var(--font-mono); letter-spacing: -.01em; white-space: nowrap; border: 0; } html[data-concept="a"] .ca-chip--ok { background: var(--ok-soft); color: var(--ok); } html[data-concept="a"] .ca-chip--bad { background: var(--danger-soft); color: var(--danger); } html[data-concept="a"] .ca-chip--warn { background: var(--warn-soft); color: var(--warn); } html[data-concept="a"] .ca-chip--flat { background: var(--surface-2); color: var(--ink-2); } html[data-concept="a"] .ca-chip--btn { cursor: pointer; position: relative; } html[data-concept="a"] .ca-chip--btn::after { content: ""; position: absolute; inset: -11px -6px; } html[data-concept="a"] .ca-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; font: 500 11px/1 var(--font); white-space: nowrap; background: var(--surface-2); color: var(--ink-2); } html[data-concept="a"] .ca-tag--ok { background: var(--ok-soft); color: var(--ok); } html[data-concept="a"] .ca-tag--warn { background: var(--warn-soft); color: var(--warn); } html[data-concept="a"] .ca-tag--bad { background: var(--danger-soft); color: var(--danger); } /* KPI strip */ html[data-concept="a"] .ca-kpis { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-concept="a"] .ca-kpi { padding: 14px var(--s-4) 0; display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px; overflow: hidden; min-height: 148px; } html[data-concept="a"] .ca-kpi--lead { grid-column: 1 / -1; } html[data-concept="a"] .ca-kpi__head { display: flex; align-items: center; gap: var(--s-2); min-height: 24px; } html[data-concept="a"] .ca-kpi__label { font: 500 13px/18px var(--font); color: var(--ink-2); flex: 1; min-width: 0; } html[data-concept="a"] .ca-kpi__head .ph__info { width: 28px; height: 28px; margin: -4px 0; color: var(--ink-3); position: relative; z-index: 2; } html[data-concept="a"] .ca-kpi__head .ph__info::after { content: ""; position: absolute; inset: -8px; } html[data-concept="a"] .ca-kpi__head .ph__info .ic { width: 18px; height: 18px; } html[data-concept="a"] .ca-kpi__head .ca-chip { position: relative; z-index: 2; } /* R11.2: the figure is never cut. Each rule sets the size it wants as --kv; the figure takes that size or, when the card * is narrower (a tablet, the Ask AI panel open), the size at which its --ch characters (set by kpi()) fit the card: * Geist Mono advances ≤ .6 em a character. The card is an inline-size container, so 100cqi is its content width. */ html[data-concept="a"] .ca-kpi { container-type: inline-size; } html[data-concept="a"] .ca-kpi__value { font: 500 24px/30px var(--font-mono); --kv: 24px; font-size: min(var(--kv), calc(100cqi / (var(--ch, 13) * .6))); letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: clip; } html[data-concept="a"] .ca-kpi--lead .ca-kpi__value { --kv: 34px; line-height: 40px; } html[data-concept="a"] .ca-kpi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 16px; color: var(--ink-3); } html[data-concept="a"] .ca-kpi__meta > span { min-width: 0; } html[data-concept="a"] .ca-kpi__vs { color: var(--ink-3); } html[data-concept="a"] .ca-kpi__spark { align-self: end; margin: 6px calc(-1 * var(--s-4)) 0; height: 40px; } html[data-concept="a"] .ca-kpi__spark .ca-spark { display: block; width: 100%; height: 40px; } html[data-concept="a"] .ca-spark { overflow: visible; } html[data-concept="a"] .ca-spark__line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; } html[data-concept="a"] .ca-kpi .ca-split { align-self: end; } html[data-concept="a"] .ca-split { display: flex; gap: 3px; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 10px; } html[data-concept="a"] .ca-split i { display: block; min-width: 4px; border-radius: 2px; } html[data-concept="a"] .ca-split__k { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); font-size: 12px; line-height: 16px; color: var(--ink-3); padding: 8px 0 14px; } html[data-concept="a"] .ca-split__k i, html[data-concept="a"] .ca-trend__legend i, html[data-concept="a"] .ca-tip__sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; } html[data-concept="a"] .ca-kpi.is-link { cursor: pointer; } html[data-concept="a"] .ca-kpi__go { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; border-radius: inherit; } html[data-concept="a"] .ca-kpi__go:focus-visible { outline-offset: -2px; } @media (min-width: 560px) { html[data-concept="a"] .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { html[data-concept="a"] .ca-kpis { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); } html[data-concept="a"] .ca-kpis--4 { grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); } html[data-concept="a"] .ca-kpis--3 { grid-template-columns: 1.35fr repeat(2, minmax(0, 1fr)); } html[data-concept="a"] .ca-kpi--lead { grid-column: auto; } html[data-concept="a"] .ca-kpi--lead .ca-kpi__value { --kv: 30px; line-height: 36px; } html[data-concept="a"] .ca-kpi__value { --kv: 22px; line-height: 30px; } html[data-concept="a"] .ca-kpi__head { flex-wrap: wrap; } } @media (min-width: 1280px) { html[data-concept="a"] .ca-kpi--lead .ca-kpi__value { --kv: 32px; line-height: 38px; } } /* R11.2: five figures in one row need about 1,000 px. Narrower (a tablet up to 1279 px, or any desktop with the Ask AI * panel open) the lead figure takes its own row and the others share the rest; with the panel open the grid below is * one column too, so no card is squeezed under the panel. */ @media (min-width: 900px) and (max-width: 1279px) { html[data-concept="a"] .ca-kpis:not(.ca-kpis--3):not(.ca-kpis--4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } html[data-concept="a"] .ca-kpis:not(.ca-kpis--3):not(.ca-kpis--4) > .ca-kpi--lead { grid-column: 1 / -1; min-height: 0; } } @media (min-width: 1024px) { html[data-concept="a"].has-ai-panel .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-concept="a"].has-ai-panel .ca-kpis > .ca-kpi--lead { grid-column: 1 / -1; min-height: 0; } html[data-concept="a"].has-ai-panel .ca-grid { grid-template-columns: minmax(0, 1fr); } } /* the lead KPI: a quiet glow from the accent so it reads first */ html[data-concept="a"] .ca-kpi--lead { background: radial-gradient(120% 140% at 0% 0%, var(--ca-glow), transparent 55%), var(--surface); } @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ca-kpi, html[data-concept="a"] .ca-card { transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out); } html[data-concept="a"] .ca-kpi:hover { border-color: color-mix(in srgb, var(--line-strong) 45%, var(--line)); box-shadow: 0 8px 24px -10px rgba(10, 12, 16, .18), var(--shadow-1); transform: translateY(-1px); } } /* the grid: main column + side column on a wide screen; one stack on a phone */ html[data-concept="a"] .ca-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; } html[data-concept="a"] .ca-col { display: grid; gap: var(--s-4); min-width: 0; align-content: start; } @media (min-width: 1100px) { html[data-concept="a"] .ca-grid { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); } } /* trend */ html[data-concept="a"] .ca-trend { gap: var(--s-2); } html[data-concept="a"] .ca-trend .seg__btn { min-height: 30px; padding: 0 10px; font: 500 12px/16px var(--font-mono); } @media (pointer: coarse), (max-width: 719px) { html[data-concept="a"] .ca-trend .seg__btn { min-height: var(--tap); min-width: var(--tap); } } /* R11.2: a full touch target */ html[data-concept="a"] .ca-trend .seg__btn[aria-checked="true"]::before { display: none; } html[data-concept="a"] .ca-trend__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); padding-bottom: var(--s-2); } html[data-concept="a"] .ca-stat { min-width: 0; } html[data-concept="a"] .ca-stat--lead { grid-column: 1 / -1; } html[data-concept="a"] .ca-stat__k { font: 500 12px/16px var(--font); color: var(--ink-3); } html[data-concept="a"] .ca-stat__v { font: 500 18px/26px var(--font-mono); letter-spacing: -.03em; white-space: nowrap; } html[data-concept="a"] .ca-stat--lead .ca-stat__v { font-size: 28px; line-height: 36px; } html[data-concept="a"] .ca-stat__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); } @media (min-width: 640px) { html[data-concept="a"] .ca-trend__stats { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } html[data-concept="a"] .ca-stat--lead { grid-column: auto; } html[data-concept="a"] .ca-stat:not(.ca-stat--lead) { border-left: 1px solid var(--line); padding-left: var(--s-4); } } html[data-concept="a"] .ca-trend__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); font-size: 12px; color: var(--ink-2); } html[data-concept="a"] .ca-trend__legend .ca-dash { height: 2px; width: 12px; vertical-align: 3px; border-radius: 1px; } html[data-concept="a"] .ca-trend__hint { margin-left: auto; color: var(--ink-3); } html[data-concept="a"] .ca-trend__plot { position: relative; min-height: 196px; margin: 0 calc(-1 * var(--s-2)); border-radius: var(--r-input); touch-action: pan-y; cursor: crosshair; } html[data-concept="a"] .ca-trend__plot:focus-visible { outline-offset: 2px; } html[data-concept="a"] .ca-trend__svg { display: block; overflow: visible; } html[data-concept="a"] .ca-grid line.ca-grid, html[data-concept="a"] line.ca-grid { stroke: var(--ca-grid); stroke-width: 1; } html[data-concept="a"] line.ca-grid--base { stroke: var(--line); } html[data-concept="a"] .ca-axis { font: 500 11px/1 var(--font-mono); fill: var(--ca-axis); letter-spacing: -.01em; } html[data-concept="a"] .ca-axis.is-today { fill: var(--accent-text); } html[data-concept="a"] .ca-stop-a { stop-color: var(--accent); stop-opacity: .26; } html[data-concept="a"] .ca-stop-b { stop-color: var(--accent); stop-opacity: 0; } html[data-concept="a"] .ca-trend__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } html[data-concept="a"] .ca-trend__line--partial { stroke-dasharray: 3 4; } html[data-concept="a"] .ca-trend__exp { fill: none; stroke: var(--warn-bar); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .9; } html[data-concept="a"] .ca-trend__now { fill: var(--surface); stroke: var(--accent); stroke-width: 2; } html[data-concept="a"] .ca-x__v { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; } html[data-concept="a"] .ca-x__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; } html[data-concept="a"] .ca-x__dot--exp { fill: var(--warn-bar); } html[data-concept="a"] .ca-tip { position: absolute; left: 0; top: 0; z-index: 3; min-width: 184px; padding: 10px 12px; pointer-events: none; background: var(--ca-chrome); color: var(--ca-chrome-ink); border-radius: 10px; box-shadow: 0 16px 32px -8px rgba(5, 6, 10, .45), 0 0 0 1px rgba(255, 255, 255, .06); } html[data-concept="a"] .ca-tip__d { font: 500 12px/16px var(--font); color: var(--ca-chrome-ink-2); margin-bottom: 6px; } html[data-concept="a"] .ca-tip__r { display: flex; justify-content: space-between; gap: var(--s-4); font-size: 13px; line-height: 20px; } html[data-concept="a"] .ca-tip__k { color: var(--ca-chrome-ink-2); white-space: nowrap; } html[data-concept="a"] .ca-tip__v { font-family: var(--font-mono); letter-spacing: -.02em; white-space: nowrap; } html[data-concept="a"] .ca-tip .ca-tone--accent { background: #8FA2FF; } /* Action required (Q.dash.needs inside a card) */ html[data-concept="a"] .ca-needs { padding: var(--s-4) var(--s-4) var(--s-2); } html[data-concept="a"] .ca-needs .dash-needs, html[data-concept="a"] .ca-needs .attn { margin: 0; padding: 0; border: 0; background: none; display: grid; gap: var(--s-2); } html[data-concept="a"] .ca-needs .dash__h2 { font: 600 15px/20px var(--font); letter-spacing: -.01em; margin: 0 0 var(--s-1); } html[data-concept="a"] .ca-needs .glist { gap: var(--s-3); } html[data-concept="a"] .ca-needs .glist__label { padding-inline: 0; margin-bottom: var(--s-1); } html[data-concept="a"] .ca-needs .glist__box { border: 0; box-shadow: none; border-radius: 0; background: transparent; overflow: visible; } html[data-concept="a"] .ca-needs .glist__box > li + li::before { inset-inline: 0; background: var(--line); } html[data-concept="a"] .ca-needs .lrow.attn__item { min-height: 52px; padding: 6px var(--s-2); margin-inline: calc(-1 * var(--s-2)); width: calc(100% + var(--s-4)); border-radius: var(--r-input); } html[data-concept="a"] .ca-needs .lrow__title { font: 500 14px/20px var(--font); -webkit-line-clamp: 1; } html[data-concept="a"] .ca-needs .lrow__meta { font-size: 12px; line-height: 16px; } html[data-concept="a"] .ca-needs .lrow__vsub { font: 500 13px/18px var(--font); color: var(--accent-text); } html[data-concept="a"] .ca-needs .dash-needs__more { justify-self: start; min-height: 44px; font-size: 14px; } html[data-concept="a"] .ca-needs .attn__none { padding: var(--s-2) 0 var(--s-3); } html[data-concept="a"] .ca-needs .glist__group:has(.glist__label .ic) .glist__label .ic { width: 14px; height: 14px; } @media (min-width: 720px) { html[data-concept="a"] .ca-needs .glist__group { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-3); align-items: start; } html[data-concept="a"] .ca-needs .glist__label { padding-top: 18px; } } /* branches */ html[data-concept="a"] .ca-br__list { display: grid; gap: 0; margin: 0; padding: 0; } html[data-concept="a"] .ca-br { padding: var(--s-3) 0; display: grid; gap: 6px; } html[data-concept="a"] .ca-br + .ca-br { border-top: 1px solid var(--line); } html[data-concept="a"] .ca-br:first-child { padding-top: 0; } html[data-concept="a"] .ca-br__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } html[data-concept="a"] .ca-br__name { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; margin: -10px 0 -10px -8px; padding: 0 8px; border: 0; border-radius: var(--r-input); background: transparent; font: 600 15px/20px var(--font); color: var(--ink); } html[data-concept="a"] .ca-br__name .ic { color: var(--ink-3); } @media (pointer: coarse), (max-width: 719px) { html[data-concept="a"] .ca-br__name { min-height: var(--tap); margin-block: -12px; } } /* R11.2: the touch floor, same layout (the extra 4 px sits in the negative margin) */ @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ca-br__name:hover { background: var(--surface-3); } } html[data-concept="a"] .ca-br__sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } html[data-concept="a"] .ca-br__share { font-size: 12px; color: var(--ink-3); } html[data-concept="a"] .ca-br__fig { font-size: 22px; line-height: 28px; font-weight: 500; white-space: nowrap; } /* R11.2: "KES" never parts from its figure */ html[data-concept="a"] .ca-br__bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } html[data-concept="a"] .ca-br__bar i { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; } html[data-concept="a"] .ca-br__kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin: 4px 0 0; } html[data-concept="a"] .ca-br__kv dt { font-size: 11px; line-height: 14px; color: var(--ink-3); } html[data-concept="a"] .ca-br__kv dd { margin: 0; font: 500 13px/20px var(--font-mono); letter-spacing: -.02em; white-space: nowrap; } html[data-concept="a"] .ca-br__m { margin-left: 4px; color: var(--ink-3); font-size: 11px; } html[data-concept="a"] .ca-br__exp { border: 0; padding: 0; background: none; color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-text) 35%, transparent); text-underline-offset: 3px; font: inherit; position: relative; } html[data-concept="a"] .ca-br__exp::after { content: ""; position: absolute; inset: -12px -18px; } /* R11.2: a 44 px hit area even for a lone "0" */ html[data-concept="a"] .ca-br__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } html[data-concept="a"] .ca-br__spark { flex: 1; max-width: 160px; height: 24px; } html[data-concept="a"] .ca-br__spark .ca-spark { display: block; width: 100%; height: 24px; } html[data-concept="a"] .ca-br__spark .ca-spark__area { display: none; } html[data-concept="a"] .ca-br__spark .ca-spark__line { stroke-width: 1.5; } /* commissions */ html[data-concept="a"] .ca-comm__hero { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } html[data-concept="a"] .ca-comm__fig { font-size: 26px; line-height: 32px; font-weight: 500; } html[data-concept="a"] .ca-payday { flex: none; display: grid; justify-items: center; text-align: center; min-width: 92px; padding: 8px 10px; border-radius: 10px; background: var(--ca-chrome); color: var(--ca-chrome-ink); } html[data-concept="a"] .ca-payday__n { font-size: 26px; line-height: 30px; font-weight: 500; color: #FFFFFF; } html[data-concept="a"] .ca-payday__t { font-size: 11px; line-height: 14px; color: var(--ca-chrome-ink-2); } html[data-concept="a"] .ca-payday__d { font: 500 11px/14px var(--font-mono); color: var(--ca-chrome-accent); margin-top: 2px; } html[data-concept="a"] .ca-cm__list { display: grid; margin: 0; padding: 0; } html[data-concept="a"] .ca-cm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: 10px 0; border-top: 1px solid var(--line); } html[data-concept="a"] .ca-cm__n { font: 500 14px/20px var(--font); } html[data-concept="a"] .ca-cm__m { font-size: 12px; line-height: 16px; color: var(--ink-3); } html[data-concept="a"] .ca-cm__r { display: grid; justify-items: end; gap: 2px; } html[data-concept="a"] .ca-cm__v { font-size: 14px; line-height: 20px; } html[data-concept="a"] .ca-cm__bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 4px; } html[data-concept="a"] .ca-cm__bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: 0 50%; } /* fuel gauges and stock */ html[data-concept="a"] .ca-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--s-2); } html[data-concept="a"] .ca-gauge { display: grid; justify-items: center; gap: 2px; padding: var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-3); color: var(--ink); text-align: center; font: inherit; } @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ca-gauge:hover { border-color: var(--line-strong); } } html[data-concept="a"] .ca-gauge:active { transform: scale(.97); } html[data-concept="a"] .ca-gauge__dial { position: relative; width: 112px; height: 62px; } html[data-concept="a"] .ca-gauge__svg { display: block; width: 112px; height: 62px; overflow: visible; } html[data-concept="a"] .ca-gauge__track { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; } html[data-concept="a"] .ca-gauge__fill { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; } html[data-concept="a"] .ca-gauge__low { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .55; } html[data-concept="a"] .ca-gauge__pct { position: absolute; left: 0; right: 0; bottom: -2px; font-size: 18px; line-height: 22px; font-weight: 500; } html[data-concept="a"] .ca-gauge__n { font: 600 13px/18px var(--font); margin-top: 6px; } html[data-concept="a"] .ca-gauge__l { font-size: 13px; line-height: 18px; margin-bottom: 4px; } html[data-concept="a"] .ca-gauge__l span { color: var(--ink-3); } html[data-concept="a"] .ca-gauges--one { grid-template-columns: minmax(0, 1fr); } html[data-concept="a"] .ca-stk__list { display: grid; margin: 0; padding: 0; } html[data-concept="a"] .ca-stk { width: 100%; display: grid; grid-template-columns: minmax(84px, 1fr) minmax(56px, 1.2fr) auto auto; align-items: center; gap: var(--s-3); min-height: 44px; padding: 4px var(--s-2); margin-inline: calc(-1 * var(--s-2)); width: calc(100% + var(--s-4)); border: 0; border-radius: var(--r-input); background: transparent; color: var(--ink); text-align: left; font: inherit; } html[data-concept="a"] .ca-stk__list li + li .ca-stk { box-shadow: 0 -1px 0 var(--line); border-radius: 0; } @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ca-stk:hover { background: var(--surface-3); } } html[data-concept="a"] .ca-stk__n { font: 500 13px/16px var(--font); display: grid; } html[data-concept="a"] .ca-stk__b { font-size: 11px; color: var(--ink-3); font-weight: 400; } html[data-concept="a"] .ca-stk__bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface-2); } html[data-concept="a"] .ca-stk__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } html[data-concept="a"] .ca-stk__bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .5; border-radius: 1px; } html[data-concept="a"] .ca-stk__q { font-size: 13px; text-align: right; white-space: nowrap; } /* live activity */ html[data-concept="a"] .ca-livetag { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); } html[data-concept="a"] .ca-ev__list { display: grid; margin: 0 calc(-1 * var(--s-2)); padding: 0; position: relative; } html[data-concept="a"] .ca-ev__list::before { content: ""; position: absolute; left: calc(var(--s-2) + 4px); top: 22px; bottom: 22px; width: 1px; background: var(--line); } html[data-concept="a"] .ca-ev__b { width: 100%; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 52px; padding: 6px var(--s-2); border: 0; border-radius: var(--r-input); background: transparent; color: var(--ink); text-align: left; font: inherit; } @media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ca-ev__b:hover { background: var(--surface-3); } } html[data-concept="a"] .ca-ev__dot { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); } html[data-concept="a"] .ca-ev__dot.is-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ca-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; } html[data-concept="a"].no-motion .ca-ev__dot.is-live::after { display: none; } html[data-concept="a"] .ca-ev__body { display: grid; gap: 1px; min-width: 0; } html[data-concept="a"] .ca-ev__t { font: 500 14px/20px var(--font); display: flex; align-items: center; gap: var(--s-2); min-width: 0; white-space: nowrap; } html[data-concept="a"] .ca-ev__t .plate { font-size: 11px; line-height: 16px; padding: 0 5px; } html[data-concept="a"] .ca-ev__m { font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-concept="a"] .ca-ev__end { display: grid; justify-items: end; gap: 1px; } html[data-concept="a"] .ca-ev__v { font-size: 13px; line-height: 20px; } html[data-concept="a"] .ca-ev__a { font: 400 11px/16px var(--font-mono); color: var(--ink-3); white-space: nowrap; } /* top trucks */ html[data-concept="a"] .ca-tt__list { display: grid; margin: 0; padding: 0; gap: 2px; } html[data-concept="a"] .ca-tt { display: grid; grid-template-columns: 18px auto minmax(40px, 1fr) auto; grid-template-areas: "r p bar v" "r p bar m"; align-items: center; gap: 0 var(--s-3); padding: 8px 0; } html[data-concept="a"] .ca-tt + .ca-tt { border-top: 1px solid var(--line); } html[data-concept="a"] .ca-tt__r { grid-area: r; font-size: 12px; color: var(--ink-3); } html[data-concept="a"] .ca-tt__p { grid-area: p; } html[data-concept="a"] .ca-tt__p .plate { font-size: 12px; } html[data-concept="a"] .ca-tt__bar { grid-area: bar; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } html[data-concept="a"] .ca-tt__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); transform-origin: 0 50%; } html[data-concept="a"] .ca-tt__v { grid-area: v; font-size: 13px; text-align: right; } html[data-concept="a"] .ca-tt__m { grid-area: m; font-size: 11px; color: var(--ink-3); text-align: right; white-space: nowrap; } /* manager */ html[data-concept="a"] .ca-actions { display: grid; gap: var(--s-3); } html[data-concept="a"] .ca-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; } html[data-concept="a"] .ca-tile { display: grid; grid-template-columns: auto; justify-items: start; align-content: space-between; gap: var(--s-3); min-height: 116px; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); text-align: left; font: inherit; box-shadow: var(--shadow-1); transition: transform var(--d-press) var(--ease-out), box-shadow 200ms var(--ease-out); } html[data-concept="a"] .ca-tile:active { transform: scale(.97); } html[data-concept="a"] .ca-tile__ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); } html[data-concept="a"] .ca-tile__t { font: 600 16px/20px var(--font); letter-spacing: -.01em; } html[data-concept="a"] .ca-tile__s { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: -10px; } html[data-concept="a"] .ca-tile--primary { background: radial-gradient(140% 120% at 100% 0%, #3D5BFF 0%, transparent 60%), var(--ca-chrome); color: #FFFFFF; border-color: transparent; } html[data-concept="a"] .ca-tile--primary .ca-tile__ic { background: rgba(255, 255, 255, .12); color: #FFFFFF; } html[data-concept="a"] .ca-tile--primary .ca-tile__s { color: #C3C9D4; } html[data-concept="a"] .ca-eod { display: grid; gap: var(--s-2); } html[data-concept="a"] .ca-eod .dash-eod { border-radius: var(--r-card); box-shadow: var(--shadow-1); } html[data-concept="a"] .ca-delivery { justify-self: start; } html[data-concept="a"] .ca-mact .dash-activity { display: grid; gap: var(--s-2); } html[data-concept="a"] .ca-mact .dash__h2, html[data-concept="a"] .ca-await .dash__h2 { font: 600 15px/20px var(--font); margin: 0; } html[data-concept="a"] .ca-mact .glist__box { border: 0; box-shadow: none; background: transparent; margin-inline: calc(-1 * var(--s-4)); border-radius: 0; } html[data-concept="a"] .ca-mact .lrow__title { font-size: 14px; } @media (min-width: 900px) { html[data-concept="a"] .ca-actions { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; } html[data-concept="a"] .ca-eod { align-content: start; } } /* motion: staggered reveal on the first look this session (≤ 300 ms), number roll (JS), chart draw (JS) */ html[data-concept="a"] .ca-enter .ca-kpi, html[data-concept="a"] .ca-enter .ca-card { animation: ca-rise 280ms var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 10) * 24ms); } html[data-concept="a"] .ca-enter .ca-br__bar i, html[data-concept="a"] .ca-enter .ca-cm__bar i, html[data-concept="a"] .ca-enter .ca-tt__bar i { animation: ca-grow 600ms var(--ease-out) both; animation-delay: 220ms; } html[data-concept="a"] .ca-enter .ca-gauge__fill { animation: ca-gauge 900ms var(--ease-out) both; animation-delay: 200ms; } @keyframes ca-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes ca-grow { from { transform: scaleX(0); } to { transform: none; } } @keyframes ca-gauge { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } } html[data-concept="a"].no-motion .ca-enter *, html[data-concept="a"].no-motion .ca-kpi, html[data-concept="a"].no-motion .ca-card { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { html[data-concept="a"] .ca-pulse::after, html[data-concept="a"] .ca-ev__dot.is-live::after { animation: none; } } /* hide the R10 pieces the concept replaces if any other screen draws them */ html[data-concept="a"] .dash-hero__strata { display: none; } html[data-concept="a"] .dash-hero { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-1); } /* ------------------------------------------------------------------ round 2 fixes (phone density, chart legibility) */ html[data-concept="a"] .ca-axis--y { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; } @media (max-width: 719px) { html[data-concept="a"] .demo-strip { flex-wrap: nowrap; gap: 6px; font-size: 11px; min-height: 32px; padding-block: calc(2px + var(--safe-top)) 2px; } html[data-concept="a"] .demo-strip > .ic { display: none; } html[data-concept="a"] .demo-strip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } html[data-concept="a"] .ca-kpi__value { --kv: 18px; line-height: 26px; letter-spacing: -.045em; } html[data-concept="a"] .ca-kpi--lead .ca-kpi__value { --kv: 32px; line-height: 38px; } html[data-concept="a"] .ca-kpi { min-height: 140px; padding-inline: 14px; } html[data-concept="a"] .ca-kpi__spark { margin-inline: -14px; } html[data-concept="a"] .ca-needs .lrow__title { -webkit-line-clamp: 2; } html[data-concept="a"] .ca-stk { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n q t" "bar bar bar"; row-gap: 6px; padding-block: 8px; } html[data-concept="a"] .ca-stk__n { grid-area: n; display: flex; align-items: baseline; gap: 6px; } html[data-concept="a"] .ca-stk__bar { grid-area: bar; } html[data-concept="a"] .ca-stk__q { grid-area: q; } html[data-concept="a"] .ca-stk > .ca-tag { grid-area: t; } html[data-concept="a"] .ca-gauges { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); } html[data-concept="a"] .ca-br__kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ round 3: module coherence */ html[data-concept="a"] .stepper__chip, html[data-concept="a"] .stepper__btn { border-radius: var(--r-input); } html[data-concept="a"] .stepper__chip { border-color: var(--line); box-shadow: var(--shadow-1); } html[data-concept="a"] .stats__value, html[data-concept="a"] .totals dd, html[data-concept="a"] .totals .totals__value, html[data-concept="a"] .abar__total, html[data-concept="a"] .kpi__value { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.03em; } html[data-concept="a"] .stats__label, html[data-concept="a"] .totals dt { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; } html[data-concept="a"] .ca-payday { box-shadow: inset 0 0 0 1px var(--ca-chrome-line), 0 8px 20px -10px rgba(5, 6, 10, .5); } html[data-concept="a"] .ca-kpi:not(:has(.ca-kpi__spark)) { min-height: 0; padding-bottom: 14px; } html[data-concept="a"] .ca-kpi:has(.ca-split) { padding-bottom: 0; } /* R11 sidebar round 2: the account menu at the sidebar's scale (13/14 px rows, 36 px avatars) */ html[data-concept="a"] .popover--chrome .userlist__btn { min-height: 44px; padding: 6px 8px; gap: 10px; } html[data-concept="a"] .popover--chrome .userlist__name { font: 500 14px/20px var(--font); } html[data-concept="a"] .popover--chrome .userlist .avatar { width: 32px; height: 32px; font-size: 12px; } html[data-concept="a"] .popover--chrome .popover__head .avatar--lg { width: 40px; height: 40px; font-size: 14px; } /* R11.2 final: the phone / touch floor is var(--tap) = 48 px (restored from 44). Hit areas grown in place, layout unchanged. */ @media (pointer: coarse), (max-width: 719px) { html[data-concept="a"] .ca-chip--btn::after { inset: -13px -6px; } html[data-concept="a"] .ca-kpi__head .ph__info::after { inset: -10px; } html[data-concept="a"] .ca-br__exp::after { inset: -14px -20px; } html[data-concept="a"] :is(.ca-link, .ca-needs .dash-needs__more).ca-link, html[data-concept="a"] .ca-needs .dash-needs__more.dash-needs__more, html[data-concept="a"] .ca-link.ca-link { min-height: var(--tap); } html[data-concept="a"] .st-jump__b.st-jump__b { min-height: var(--tap); } html[data-concept="a"] .exp-sum__morebtn.exp-sum__morebtn { min-height: var(--tap); } } /* R11.2 final: a KPI card already clips (overflow hidden); paint containment also keeps its first-look roll and rise out of the page's scrollable overflow (r8-verify caught a 29 px transient overflow on Sales 1280 while the cards rose in) */ /* R11 sidebar §6, round 2: bottom-right the Demo pill covered the sticky Save bars (Commissions day, entry forms) and page content; it now sits in the graphite demo strip it belongs to (top right, scrolls away with the strip). Same element, class and action; Presenter tools is also in the workspace menu. */ @media (min-width: 720px) { html[data-concept="a"] .demo-fab { position: absolute; top: 2px; right: 12px; left: auto; bottom: auto; min-height: 28px; height: 28px; padding: 0 10px; gap: 6px; background: var(--sb-field); border: 0; box-shadow: inset 0 0 0 1px var(--sb-line-strong); color: var(--sb-ink); font: 500 12px/16px var(--font); border-radius: 8px; z-index: 46; } html[data-concept="a"] .demo-fab .ic { width: 12px; height: 12px; color: var(--sb-ink-2); } } @media (min-width: 720px) and (hover: hover) { html[data-concept="a"] .demo-fab:hover { background: var(--sb-field-hover); } } /* R11.2 final: a segmented thumb never paints or scrolls outside its own track. Returning from a task screen, the Sales branch switch's thumb was briefly placed from the task layout's geometry and widened the page by 29 px (r8-verify) */ html[data-concept="a"] .seg.has-thumb { overflow: clip; overflow-clip-margin: 4px; } html[data-concept="a"] .seg.has-thumb .seg__btn:focus-visible { outline-offset: -3px; } /* the ring sits inside the clipped track, like the tabs and keypad keys */ /* phone top bar: the account is the avatar alone (svg.ic's display out-ranked the chip's hidden chevron) */ @media (max-width: 719px) { html[data-concept="a"] .topbar .userchip svg.userchip__chev { display: none; } }