/* ===================================================================== PPE Monitor — design system (white-first enterprise) Tokens on :root are the LIGHT theme. swaps them. Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32. ===================================================================== */ :root { --font: "Inter", "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; --bg: #f4f5f7; --card: #ffffff; --card2: #f8f9fb; --line: #e5e7eb; --line2: #d1d5db; --fg: #0f1419; --fg2: #374151; --dim: #6b7280; --dim2: #9ca3af; --ok: #16a34a; --ok-fg: #15803d; --ok-bg: #f0fdf4; --ok-line: #bbf7d0; --warn: #d97706; --warn-fg: #b45309; --warn-bg: #fffbeb; --warn-line: #fde68a; --bad: #dc2626; --bad-fg: #b91c1c; --bad-bg: #fef2f2; --bad-line: #fecaca; --acc: #2563eb; --acc-fg: #1d4ed8; --acc-bg: #eff6ff; --acc-line: #bfdbfe; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --shadow-lg: 0 24px 60px -24px rgba(16,24,40,.35); --r: 12px; --r-sm: 8px; --nav-h: 60px; --focus: 0 0 0 3px var(--acc-line); --logo-fg: #2e2e38; /* EY charcoal on white */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --t-fast: .15s; --t: .24s; --t-slow: .4s; /* aliases kept for page-level styles */ --panel: var(--card); --panel2: var(--card2); --panel3: var(--line); --acc-soft: var(--acc-bg); --ok-soft: var(--ok-bg); --bad-soft: var(--bad-bg); --warn-soft: var(--warn-bg); --teal: #0d9488; --pink: #db2777; --violet: #7c3aed; --log-bg: #0f1115; --radius: var(--r); --radius-sm: var(--r-sm); --topbar-h: var(--nav-h); --gap: 16px; } :root[data-theme="dark"] { --bg: #0e1014; --card: #15181e; --card2: #1a1e26; --line: #262b35; --line2: #343b48; --fg: #eceff3; --fg2: #c4cad3; --dim: #8b94a3; --dim2: #5f6878; --ok: #34c26b; --ok-fg: #5ad48a; --ok-bg: rgba(52,194,107,.10); --ok-line: rgba(52,194,107,.35); --warn: #f0a83c; --warn-fg: #f5bc62; --warn-bg: rgba(240,168,60,.10); --warn-line: rgba(240,168,60,.35); --bad: #f04e45; --bad-fg: #ff7a72; --bad-bg: rgba(240,78,69,.10); --bad-line: rgba(240,78,69,.38); --acc: #5aa2ff; --acc-fg: #86bbff; --acc-bg: rgba(90,162,255,.12); --acc-line: rgba(90,162,255,.35); --logo-fg: #ffffff; --shadow: 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7); --focus: 0 0 0 3px rgba(90,162,255,.35); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font: 13px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--acc-fg); } b, strong { font-weight: 600; } h1, h2, h3, h4, p { margin: 0; } code, kbd, .mono { font-family: var(--mono); } code { background: var(--card2); border: 1px solid var(--line); padding: 0 5px; border-radius: 4px; font-size: 11.5px; color: var(--fg2); } kbd { display: inline-block; min-width: 20px; text-align: center; background: var(--card); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: 11px; line-height: 17px; color: var(--fg2); } [hidden] { display: none !important; } .num { font-variant-numeric: tabular-nums; } .muted { color: var(--dim); } .small { font-size: 12px; } .xs { font-size: 11px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .spacer { flex: 1; } .stack > * + * { margin-top: 16px; } svg.ic { width: 1em; height: 1em; flex: 0 0 auto; } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; transition: box-shadow var(--t-fast) var(--ease); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- motion ---------- */ @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes popin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 10px transparent; } } @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 var(--pulse, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes slide-r { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } @keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } } @keyframes flash-bg { 0% { background-color: var(--acc-bg); } 100% { background-color: transparent; } } /* colours cross-fade when the theme flips, without animating layout */ body, .card, .nav, .seg, .navtabs, .sheet, .drawer, .modal, .btn, .chip, .input, .callout, .preset, .ppe, .step, .overall, .toast, pre.log, .badge, .pill { transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .btn:active:not(:disabled) { transform: scale(.97); transition-duration: .06s; } .card, .preset, .ev, .step, .ppe { will-change: auto; } .reveal { animation: rise .45s var(--ease-out); } .pop { animation: pop .35s var(--ease-spring); } .panel-in { animation: scale-in .28s var(--ease-out); } .recording-bar { background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%); background-size: 180% 100%; animation: shimmer 1.4s linear infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } } /* ---------- top navigation ---------- */ .nav, .topbar { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 16px; padding: 0 24px; min-width: 0; background: var(--card); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.15; letter-spacing: -.01em; flex: 0 0 auto; white-space: nowrap; } .brand .mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--acc); flex: 0 0 auto; } .brand .ey { height: 30px; width: auto; flex: 0 0 auto; display: block; transition: opacity var(--t) var(--ease); } .brand:hover .ey { opacity: .85; } .brand .bsep { width: 1px; height: 24px; background: var(--line2); flex: 0 0 auto; } .brand .btxt { display: flex; flex-direction: column; justify-content: center; white-space: nowrap; } .brand .mark svg { width: 17px; height: 17px; } .brand small { display: block; font-weight: 500; color: var(--dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; } .nav .sep, .topbar .sep { width: 1px; height: 24px; background: var(--line); } .nav .meta, .topbar .stats { display: flex; gap: 16px; font-size: 12px; color: var(--dim); white-space: nowrap; min-width: 0; overflow: hidden; } .nav .meta b, .topbar .stats b { color: var(--fg); font-weight: 600; font-family: var(--mono); font-size: 12px; } .nav .right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .seg, .topbar nav { display: flex; gap: 2px; background: var(--bg); padding: 3px; border-radius: 9px; border: 1px solid var(--line); } .seg a, .topbar nav a { color: var(--dim); text-decoration: none; padding: 5px 14px; border-radius: 7px; font-weight: 600; font-size: 12.5px; transition: color .15s, background .15s; } .seg a:hover, .topbar nav a:hover { color: var(--fg); } .seg a.on, .topbar nav a.on { color: var(--fg); background: var(--card); box-shadow: var(--shadow); } .topbar nav { margin-left: auto; } @media (max-width: 1200px) { .nav .meta, .topbar .stats, .nav .sep, .topbar .sep { display: none; } } @media (max-width: 1080px) { .brand small { display: none; } } /* ---------- status pill (nav) ---------- */ .pill, .status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--line2); background: var(--card2); color: var(--dim); transition: color .25s, background .25s, border-color .25s; } .pill svg, .status svg { width: 13px; height: 13px; } .pill .dot, .status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill.ok, .status.ok { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-line); } .pill.bad, .status.bad { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-line); } .pill.warn, .status.warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-line); } .pill.acc, .status.acc { color: var(--acc-fg); background: var(--acc-bg); border-color: var(--acc-line); } .pill.changed { animation: status-pulse .7s ease-out; } .pill.ok.changed { --pulse: var(--ok-line); } .pill.bad.changed { --pulse: var(--bad-line); } .pill.warn.changed { --pulse: var(--warn-line); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; color: var(--fg); background: var(--card); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px; min-height: 34px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; } .btn svg { width: 14px; height: 14px; flex: 0 0 auto; } .btn:hover:not(:disabled) { background: var(--card2); border-color: var(--dim2); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; } .btn.primary:hover:not(:disabled) { background: var(--acc-fg); border-color: var(--acc-fg); } .btn.danger { color: var(--bad-fg); border-color: var(--bad-line); background: var(--bad-bg); } .btn.danger:hover:not(:disabled) { background: var(--bad-line); border-color: var(--bad); } .btn.ghost { background: transparent; border-color: transparent; color: var(--fg2); } .btn.ghost:hover:not(:disabled) { background: var(--card2); border-color: var(--line); } .btn.link { background: none; border: none; color: var(--acc-fg); padding: 4px 2px; min-height: 0; font-weight: 600; } .btn.link:hover:not(:disabled) { text-decoration: underline; background: none; } .btn.sm { padding: 6px 10px; min-height: 30px; font-size: 12px; } .btn.icon { padding: 0; width: 34px; } .btn.sm.icon { width: 30px; } .btn.on { border-color: var(--acc-line); background: var(--acc-bg); color: var(--acc-fg); } .btn.rec-on { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-fg); } .btn .spinner { width: 13px; height: 13px; } /* ---------- inputs ---------- */ .input, select.input { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line2); border-radius: 7px; padding: 6px 8px; font-size: 12.5px; min-height: 32px; } .input.mono { font-family: var(--mono); } .input:focus { outline: none; border-color: var(--acc); box-shadow: var(--focus); } .input.w60 { width: 64px; } .field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); font-weight: 500; } .field .input { font-family: var(--mono); } /* ---------- chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--card2); color: var(--fg2); white-space: nowrap; line-height: 1.35; font-variant-numeric: tabular-nums; } .chip svg { width: 12px; height: 12px; } .chip .n { font-family: var(--mono); font-size: 11px; color: var(--dim); } .chip.ok { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-line); } .chip.bad { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-line); } .chip.warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-line); } .chip.acc { color: var(--acc-fg); background: var(--acc-bg); border-color: var(--acc-line); } .chip.dim { color: var(--dim); } .chip.xs { padding: 2px 7px; font-size: 11px; } .chip.filter { cursor: pointer; background: var(--card); transition: background .15s, border-color .15s; } .chip.filter:hover { border-color: var(--dim2); } .chip.filter.on { background: var(--fg); color: var(--card); border-color: var(--fg); } /* ---------- cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s; } .card:hover { border-color: var(--line2); } .card { animation: rise .4s var(--ease-out); } .card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 46px; } .card-h h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 7px; } .card-h h2 svg { width: 14px; height: 14px; } .card-h .aside { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); } .card-b { padding: 16px; } .card-b + .card-b { border-top: 1px solid var(--line); } /* ---------- notes / callouts / empty ---------- */ .callout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card2); color: var(--fg2); font-size: 12.5px; line-height: 1.5; } .callout svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--dim); } .callout.info { background: var(--acc-bg); border-color: var(--acc-line); } .callout.info svg { color: var(--acc); } .callout.warn { background: var(--warn-bg); border-color: var(--warn-line); } .callout.warn svg { color: var(--warn); } .callout.bad { background: var(--bad-bg); border-color: var(--bad-line); } .callout.bad svg { color: var(--bad); } .callout.ok { background: var(--ok-bg); border-color: var(--ok-line); } .callout.ok svg { color: var(--ok); } .callout b { color: var(--fg); } .empty { text-align: center; color: var(--dim); padding: 24px 12px; font-size: 12.5px; } .empty .eic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; background: var(--card2); border: 1px solid var(--line); color: var(--dim); } .empty .eic.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } .empty .eic svg { width: 17px; height: 17px; } .empty h4 { color: var(--fg); font-size: 13px; margin-bottom: 2px; } .empty > svg { width: 34px; height: 34px; opacity: .45; margin: 0 auto 8px; display: block; } pre.log { background: #0f1115; color: #c9d1dc; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; overflow: auto; max-height: 200px; font-size: 11.5px; font-family: var(--mono); line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin: 0; } /* ---------- bars & rings ---------- */ .bar { position: relative; height: 6px; background: var(--line); border-radius: 999px; overflow: visible; } .bar > i { display: block; height: 100%; width: 0; max-width: 100%; background: var(--acc); border-radius: 999px; transition: width .6s var(--ease-out), background-color var(--t) var(--ease); } .bar.ok > i { background: var(--ok); } .bar.bad > i { background: var(--bad); } .bar.warn > i { background: var(--warn); } .bar.thin { height: 4px; } .bar .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--dim2); border-radius: 1px; } .bar .mark::after { content: attr(data-l); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--dim); font-family: var(--mono); margin-top: 3px; } .ring { width: 48px; height: 48px; flex: 0 0 auto; } .ring circle { fill: none; stroke-width: 5; } .ring .track { stroke: var(--line); } .ring .fill { stroke: var(--acc); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear, stroke var(--t) var(--ease); } .ring.ok .fill { stroke: var(--ok); } .ring.bad .fill { stroke: var(--bad); } .ring.warn .fill { stroke: var(--warn); } /* ---------- key/value ---------- */ .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12.5px; align-items: baseline; } .kv .k { color: var(--dim); font-size: 12px; } .kv .v { font-family: var(--mono); color: var(--fg); } /* ---------- tooltips ---------- */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: var(--fg); color: var(--card); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 60; } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; } /* ---------- toasts ---------- */ .toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 300; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; pointer-events: auto; background: var(--card); border: 1px solid var(--line2); box-shadow: var(--shadow-lg); font-size: 12.5px; font-weight: 500; animation: popin .2s ease; max-width: 400px; color: var(--fg); } .toast svg { width: 15px; height: 15px; flex: 0 0 auto; } .toast.ok svg { color: var(--ok); } .toast.bad svg { color: var(--bad); } .toast.info svg { color: var(--acc); } .toast.out { opacity: 0; transform: translateY(6px); transition: all .25s; } /* ---------- modal ---------- */ .modal-bg { position: fixed; inset: 0; background: rgba(15,20,25,.45); display: grid; place-items: center; z-index: 200; animation: fade .15s; padding: 16px; } .modal { width: min(460px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 20px 22px; animation: popin .18s ease; } .modal h3 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .modal h3 svg { width: 17px; height: 17px; color: var(--dim); } .modal p { color: var(--fg2); line-height: 1.55; margin-bottom: 16px; } .modal .actions { display: flex; justify-content: flex-end; gap: 8px; } .modal.wide { width: min(1100px, 100%); padding: 8px; } .modal.wide img { width: 100%; border-radius: 8px; display: block; } .modal.wide .cap { display: flex; align-items: center; gap: 10px; padding: 8px 6px 2px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); } .modal.list { width: min(760px, 100%); padding: 0; max-height: calc(100vh - 32px); display: flex; flex-direction: column; } .modal.list .card-h { flex: 0 0 auto; } .modal.list .body { overflow: auto; padding: 4px 8px 8px; } /* ---------- drawer ---------- */ .drawer-bg { position: fixed; inset: 0; background: rgba(15,20,25,.35); z-index: 190; animation: fade .15s; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: var(--card); border-left: 1px solid var(--line); z-index: 195; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; } .drawer.open { transform: none; } .drawer .d-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .drawer .d-h h3 { font-size: 14px; font-weight: 600; } .drawer .d-b { overflow: auto; padding: 4px 16px 24px; } .drawer section { padding: 16px 0; border-bottom: 1px solid var(--line); } .drawer section:last-child { border-bottom: none; } .drawer section h4 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .drawer .kv { row-gap: 8px; } .radio { display: flex; flex-direction: column; gap: 6px; } .radio label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12.5px; } .radio label:has(input:checked) { border-color: var(--acc-line); background: var(--acc-bg); } .radio label input { margin: 3px 0 0; } .radio label small { display: block; color: var(--dim); } /* ---------- misc ---------- */ .spinner { width: 14px; height: 14px; border: 2px solid var(--line2); border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; } .tag { font-family: var(--mono); font-size: 11px; color: var(--dim); } .dots { display: inline-flex; gap: 3px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); } .dots i.ok { background: var(--ok); } .dots i.missing { background: var(--bad); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; animation: blink 1.8s infinite; } .shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 12.5px; align-items: center; color: var(--fg2); }