/* prism — "Operator Console" design language. Instrument-grade: Geist type, refined cool neutrals + one sharp electric-blue accent, layered depth, tight radius, subtle motion. Light + dark via [data-theme] on . Token NAMES are stable (kept from the prior theme) so every tool inherits the refresh; only values evolved. New tokens added at the end of each block. */ /* Self-hosted Geist (OFL) — variable, covers all weights. CSP-safe (font-src 'self'). */ @font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Accent (constant across themes — functional) */ --brand: #2f63ff; --brand-hover: #1f4fe0; --brand-link: #2452d6; /* Light theme (default) */ --bg: #eef1f5; --bg-elev: #f4f6f9; --surface: #ffffff; --surface-2: #f4f6f9; --surface-hover: #eff2f7; --border: #e3e7ee; --border-strong: #d2d8e2; --text: #0b0d12; --text-muted: #5a6373; --accent: var(--brand); --accent-soft: rgba(47, 99, 255, 0.10); --accent-press: #1f4fe0; --accent-ring: rgba(47, 99, 255, 0.28); --grid-line: rgba(11, 13, 18, 0.030); /* Semantic (unified status colors used by .badge + tool states) */ --ok: #0a8a4d; --ok-soft: rgba(10, 138, 77, 0.12); --warn: #b4760a; --warn-soft: rgba(180, 118, 10, 0.14); --bad: #d23b3b; --bad-soft: rgba(210, 59, 59, 0.12); --shadow-1: 0 1px 2px rgba(11, 13, 18, 0.05), 0 1px 1px rgba(11, 13, 18, 0.04); --shadow-card: 0 1px 2px rgba(11, 13, 18, 0.04), 0 10px 26px -12px rgba(11, 13, 18, 0.20); --shadow-pop: 0 8px 16px -6px rgba(11, 13, 18, 0.18), 0 24px 48px -16px rgba(11, 13, 18, 0.30); --radius: 11px; --radius-sm: 8px; --pill: 999px; --font: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* Spacing scale (4px base) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; /* Motion tokens — shared durations + easings (mirror anim.js defaults) */ --motion-fast: 0.16s; --motion-base: 0.26s; --motion-slow: 0.38s; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); } [data-theme="dark"] { --bg: #080a0e; --bg-elev: #14171d; --surface: #14171d; --surface-2: #1a1e26; --surface-hover: #1e232c; --border: #262b34; --border-strong: #353b46; --text: #f3f5f9; --text-muted: #99a2b2; --brand: #5d86ff; --brand-hover: #4a72f5; --brand-link: #82a2ff; --accent-soft: rgba(93, 134, 255, 0.16); --accent-press: #4a72f5; --accent-ring: rgba(93, 134, 255, 0.40); --grid-line: rgba(255, 255, 255, 0.028); --ok: #2fc07e; --ok-soft: rgba(47, 192, 126, 0.16); --warn: #e0a23a; --warn-soft: rgba(224, 162, 58, 0.16); --bad: #f2685f; --bad-soft: rgba(242, 104, 95, 0.16); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7); --shadow-pop: 0 12px 28px -8px rgba(0, 0, 0, 0.6), 0 30px 60px -20px rgba(0, 0, 0, 0.8); } * { box-sizing: border-box; } [hidden] { display: none !important; } /* the hidden attribute must win over display rules */ html, body { height: 100%; } /* Global reduced-motion guard — neutralize all animation/transition for users who request it. Progressive enhancement: UI stays fully functional. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Accessible keyboard focus ring (reuses brand accent) */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Skip-to-content link: visually hidden until keyboard-focused, then pinned top-left above the topbar. Pure CSS (CSP-safe), zero visual impact otherwise. */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; padding: 9px 14px; background: var(--brand); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-sm); transition: top var(--motion-fast) var(--ease-out); } .skip-link:focus { top: 8px; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; letter-spacing: -0.006em; background-color: var(--bg); /* Atmosphere: a soft accent wash + a faint instrument grid for depth. */ background-image: radial-gradient(1100px 560px at 82% -12%, var(--accent-soft), transparent 60%), linear-gradient(var(--grid-line, rgba(11,13,18,.030)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line, rgba(11,13,18,.030)) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; } /* Page-load entrance — subtle rise + light stagger across panels and the hero. CSP-safe (pure CSS, no JS) and applies to JS-inserted panels too. The global reduced-motion guard neutralizes it automatically. */ /* Flash-free navigation between staff pages via cross-document View Transitions. Each sub-page is a full document load, so without this the WHOLE shell (Prism logo + top bar) repaints on every click — the "whole screen flashes" jitter. With it, the browser holds the old frame and cross-fades to the new one (no blank repaint), and the shell — top bar + footer — is given a stable view-transition-name so it HOLDS IN PLACE instead of repainting; only the page content cross-fades. Support: Chromium + Safari 18+. Other browsers (e.g. Firefox) fall back to a normal navigation — no worse than before. prefers-reduced-motion is honoured automatically (the instant swap stays; the cross-fade animation drops). */ @view-transition { navigation: auto; } .topbar { view-transition-name: prism-topbar; } .footer { view-transition-name: prism-footer; } ::view-transition-group(root) { animation-duration: 0.18s; } /* ── Topbar ── */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .brand-mark { display: block; border-radius: 8px; } .brand-word { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .topbar-right { display: flex; align-items: center; gap: 8px; } /* ── Breadcrumb (wayfinding under the topbar) ── */ .breadcrumb { width: 100%; max-width: 1080px; margin: 0 auto; padding: 14px 28px 0; } .breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; font-size: 0.85rem; } .breadcrumb-item { display: inline-flex; align-items: center; gap: 4px; } .breadcrumb-link { color: var(--text-muted); text-decoration: none; border-radius: 6px; padding: 2px 6px; transition: color 0.15s ease, background 0.15s ease; } .breadcrumb-link:hover { color: var(--brand-link); background: var(--accent-soft); } .breadcrumb-sep { color: var(--text-muted); opacity: 0.55; } .breadcrumb-cur { color: var(--text); font-weight: 600; padding: 2px 6px; } .role-chip { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; padding: 2px 9px; border-radius: var(--pill); color: var(--brand-link); background: var(--accent-soft); border: 1px solid transparent; white-space: nowrap; } [data-theme="dark"] .role-chip { color: #9db8ff; } /* ── Theme toggle ── */ .icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .icon-btn:hover { color: var(--text); background: var(--surface-hover); } .icon-sun { display: none; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* ── Staff account menu ── */ .account-menu { position: relative; display: inline-flex; } .account-menu-trigger { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; max-width: 260px; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--pill); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .account-menu-trigger:hover, .account-menu.is-open .account-menu-trigger { background: var(--surface-hover); border-color: var(--brand); } .account-menu-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .account-menu-avatar { flex: none; color: var(--brand-link); } .account-trigger-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 620; } .account-menu-chevron { flex: none; color: var(--text-muted); transition: transform var(--motion-fast) var(--ease-out); } .account-menu.is-open .account-menu-chevron { transform: rotate(180deg); } .account-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(320px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); color: var(--text); } .account-menu-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 12px; } .account-menu-name { max-width: 100%; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.3; } .account-menu-email { max-width: 100%; overflow-wrap: anywhere; color: var(--text-muted); font-size: .82rem; line-height: 1.35; } .account-menu-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .account-menu-item { display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; padding: 9px 10px; border-radius: 7px; color: var(--text); font-size: .9rem; font-weight: 540; text-decoration: none; transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); } .account-menu-item:hover, .account-menu-item:focus-visible { background: var(--surface-hover); color: var(--brand-link); } .account-menu-item:focus-visible { outline: 2px solid var(--brand-link); outline-offset: -2px; } .account-menu-item.is-current { color: var(--brand-link); background: var(--accent-soft); } .account-menu-item > svg { flex: none; } .account-menu-external { margin-left: auto; color: var(--text-muted); } .account-menu-separator { height: 1px; margin: 6px 4px; background: var(--border); } .account-menu-signout { color: var(--bad); } .account-menu-signout:hover, .account-menu-signout:focus-visible { color: var(--bad); background: var(--bad-soft); } /* ── Buttons (Coinbase pill) ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 540; letter-spacing: 0.005em; padding: 9px 16px; border-radius: var(--pill); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform .06s var(--ease-out); } .btn:active { transform: translateY(1px) scale(.985); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .btn-primary:hover { background: var(--accent-press); box-shadow: var(--shadow-card); } .btn-ghost { color: var(--text); border-color: var(--border-strong); background: var(--surface); } .btn-danger { background: var(--bad); color: #fff; border-color: transparent; } .btn-danger:hover { background: color-mix(in srgb, var(--bad) 86%, #000); } .btn-danger[disabled], .btn[disabled] { opacity: .45; cursor: not-allowed; } /* Super-admin destructive panel — visually set apart from the review controls. */ .cb-danger { border-color: #e7b9a8; background: #fdf3f0; } .cb-danger h2 { color: #912018; } .cb-danger-input { max-width: 220px; } .btn-ghost:hover { background: var(--surface-hover); } /* ── Content ── */ .content { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 48px 28px 64px; } .hero { margin-bottom: 36px; } .hero h1 { font-size: 1.95rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 6px; } .hero-sub { color: var(--text-muted); margin: 0; font-size: 1rem; } .muted { color: var(--text-muted); } /* ── Tool grid ── */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .tool-card { display: flex; gap: 16px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); text-decoration: none; color: var(--text); position: relative; overflow: hidden; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .tool-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand); opacity: 0; transition: opacity 0.18s ease; } .tool-card:not(.is-disabled):hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-pop); } .tool-card:not(.is-disabled):hover::before { opacity: 1; } .tool-card.is-disabled { opacity: 0.6; cursor: default; } .tool-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: var(--brand); background: var(--accent-soft); } .tool-body { min-width: 0; } .tool-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .tool-head h3 { font-size: 1.05rem; font-weight: 650; margin: 0; } .tool-body p { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.45; } .badge { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: var(--pill); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); } /* ── Brand sections ── */ .brand-section { margin-bottom: 34px; } .brand-section:last-child { margin-bottom: 0; } .brand-heading { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .badge-shared { color: var(--brand-link); background: var(--accent-soft); border-color: transparent; } [data-theme="dark"] .badge-shared { color: #9db8ff; } /* ── Empty / error ── */ .empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-elev); } .empty p { margin: 6px 0; } /* ── What's New ── Content-first release timeline. Filtering is server-rendered; JS only adds a subtle entrance, so links/content remain complete under strict CSP or no JS. */ .content:has(.wn-hero) { max-width: 920px; } .wn-hero { max-width: 720px; margin-bottom: 24px; } .wn-eyebrow { margin: 0 0 8px; color: var(--brand-link); font-size: .72rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; } .wn-hero h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.035em; } .wn-lead { margin: 0; max-width: 62ch; color: var(--text-muted); font-size: 1rem; line-height: 1.6; } .wn-access { margin: 14px 0 0; color: var(--text-muted); font-size: .84rem; } .wn-access strong { color: var(--text); } .wn-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .wn-filter { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px; border: 1px solid var(--border-strong); border-radius: var(--pill); background: var(--surface); color: var(--text-muted); font-size: .86rem; font-weight: 650; text-decoration: none; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .06s ease; } .wn-filter:hover { color: var(--text); border-color: var(--brand); background: var(--surface-hover); } .wn-filter:active { transform: translateY(1px); } .wn-filter.is-active { color: #fff; border-color: var(--brand); background: var(--brand); box-shadow: var(--shadow-1); } .wn-count { margin: 18px 0 14px; color: var(--text-muted); font-size: .82rem; font-weight: 650; } .wn-timeline { position: relative; } .wn-timeline::before { content: ''; position: absolute; top: 16px; bottom: 24px; left: 7px; width: 2px; background: var(--border); } .wn-release { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 18px; padding-bottom: 18px; } .wn-marker { position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 24px; border: 4px solid var(--bg); border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .wn-card { min-width: 0; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); } .wn-card h2 { margin: 10px 0 8px; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.012em; } .wn-card ul { margin: 0; padding-left: 20px; color: var(--text-muted); } .wn-card li { margin: 5px 0; padding-left: 2px; } .wn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--text-muted); font-size: .76rem; } .wn-scope, .wn-type { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: var(--pill); font-size: .66rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; } .wn-scope { color: var(--brand-link); background: var(--accent-soft); } .wn-type-new { color: #087443; background: rgba(5, 150, 105, .12); } .wn-type-improvement { color: #8a5a00; background: rgba(245, 158, 11, .13); } .wn-type-fix { color: #2459a9; background: rgba(37, 99, 235, .11); } .wn-type-security { color: #a8321e; background: rgba(212, 56, 13, .11); } [data-theme="dark"] .wn-type-new { color: #7ee2ad; } [data-theme="dark"] .wn-type-improvement { color: #ffd18c; } [data-theme="dark"] .wn-type-fix { color: #9fc0ff; } [data-theme="dark"] .wn-type-security { color: #ffaaa0; } .wn-version { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); } .wn-meta time { white-space: nowrap; } .error-page { text-align: center; padding: 80px 20px; } .error-code { font-size: 4.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); line-height: 1; } .error-page h1 { font-size: 1.5rem; margin: 10px 0 8px; } .error-actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; } /* ── Footer ── */ .footer { border-top: 1px solid var(--border); padding: 18px 28px; color: var(--text-muted); font-size: 0.82rem; text-align: center; display: flex; gap: 10px; align-items: center; justify-content: center; } .footer-version { font: inherit; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: var(--pill); background: var(--surface-2); color: var(--text-muted); border: 1px solid transparent; cursor: pointer; } .footer-version:hover { color: var(--text); border-color: var(--border); } .footer-version:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* Tool-versions modal (footer version → click). */ .version-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .version-modal[hidden] { display: none; } .version-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); } .version-modal-card { position: relative; width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 22px 24px; } .version-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .version-modal-title { margin: 0; font-size: 1.05rem; } .version-modal-build { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-muted); } .version-modal-x { font: inherit; font-size: 1.4rem; line-height: 1; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0 4px; } .version-modal-x:hover { color: var(--text); } .version-modal-sub { margin: 10px 0 14px; font-size: 0.85rem; color: var(--text-muted); } .version-modal-table { width: 100%; border-collapse: collapse; } .version-modal-table th, .version-modal-table td { text-align: left; padding: 8px 0; font-size: 0.9rem; border-bottom: 1px solid var(--border); } .version-modal-table th { color: var(--text-muted); font-weight: 600; } .version-modal-table th.num, .version-modal-table td.num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Admin: tabs + integrations ── */ /* Platform settings sub-tabs (progressive enhancement). No-JS: nav hidden, all panels show (scroll). With JS (.js-tabs): pill nav + only the active panel shown. */ .admin-subtabs { display: none; gap: 6px; flex-wrap: wrap; margin: 4px 0 20px; } .js-tabs .admin-subtabs { display: flex; } .admin-subtab { padding: 8px 16px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .admin-subtab:hover { color: var(--text); border-color: var(--text-muted); } .admin-subtab.is-active { color: var(--text); border-color: var(--accent); background: var(--surface-2); } .js-tabs .subtab-panel { display: none; } .js-tabs .subtab-panel.is-active { display: block; } /* Group label above a cluster of related admin panels (legacy / no-JS grouping). */ .admin-group-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--text-muted); margin: 26px 0 12px; } .admin-subhead { font-size: 0.95rem; font-weight: 650; margin: 22px 0 10px; } /* Content-sized admin table (auto layout) — headers sit snug over their values, unlike the fixed-layout .audit-table tuned for the audit log's specific columns. */ .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { text-align: left; padding: 8px 16px 8px 0; font-size: 0.9rem; line-height: 1.4; border-bottom: 1px solid var(--border); } .admin-table th { color: var(--text-muted); font-weight: 600; } .admin-table th:last-child, .admin-table td:last-child { padding-right: 0; } .admin-table th.num, .admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .admin-tabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--border); } .admin-tab { padding: 9px 14px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .admin-tab:hover { color: var(--text); } .admin-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); } .warn-banner { padding: 12px 16px; margin-bottom: 18px; border-radius: var(--radius-sm); font-size: 0.88rem; color: #8a5a00; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); } [data-theme="dark"] .warn-banner { color: #ffd9a8; } /* ── Notification outbox (admin) ──────────────────────────────────────────── */ /* Secondary sub-nav (Preferences | Outbox) beneath the main .admin-tabs — a lighter pill treatment so it reads as a sub-level, not a peer of the top tab bar. */ .obx-subnav { display: flex; gap: 6px; margin: 2px 0 18px; } .obx-subnav a { padding: 5px 12px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .obx-subnav a:hover { color: var(--text); border-color: var(--text-muted); } .obx-subnav a[aria-current="page"] { color: #fff; background: var(--brand); border-color: var(--brand); } /* Filter row — one horizontal line, label beside control, actions pinned right. */ .obx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; } .obx-filters .obx-field { display: inline-flex; align-items: center; gap: 6px; } .obx-filters .obx-field > span { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .obx-filters .input { margin: 0; width: auto; } .obx-filters select.input { min-width: 130px; } .obx-filters .obx-actions { margin-left: auto; display: inline-flex; gap: 8px; } /* Explicit "Redirected" indicator — replaces the cryptic bare ↪ address. */ .badge-redirect { background: var(--accent-soft); color: var(--brand-link); } /* Fixed layout via so long recipients/errors can't shove Actions off-screen. */ .obx-table { table-layout: fixed; } .obx-table th.obx-nowrap, .obx-table td.obx-nowrap { white-space: nowrap; } .obx-table td.obx-detail { max-width: 0; } /* fixed-layout: cell obeys its colgroup width */ .obx-table .obx-ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obx-table td.obx-actions { white-space: nowrap; } .search-status.is-ok { color: #0a7d33; } [data-theme="dark"] .search-status.is-ok { color: #7ee29a; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .panel-head h2 { margin: 0; font-size: 1.05rem; font-weight: 650; } .secret-table { width: 100%; border-collapse: collapse; } .secret-table td { padding: 14px 0; border-bottom: 1px solid var(--border); vertical-align: middle; } .secret-table tr:last-child td { border-bottom: none; } .secret-meta code { font-size: 0.78rem; color: var(--text-muted); } .source-chip { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 2px 9px; border-radius: var(--pill); border: 1px solid transparent; } .source-db { color: #0a7d33; background: rgba(16, 185, 129, 0.14); } .source-env { color: #8a5a00; background: rgba(245, 158, 11, 0.14); } .source-unset { color: var(--text-muted); background: var(--surface-2); } [data-theme="dark"] .source-db { color: #7ee29a; } [data-theme="dark"] .source-env { color: #ffd9a8; } .secret-set { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .secret-input { width: 240px; max-width: 42vw; padding: 8px 12px; font-size: 0.85rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; } .secret-input:focus { border-color: var(--brand); } /* Masked/plain current-value preview under the source chip. */ .secret-current { margin-top: 4px; font-family: var(--mono, monospace); font-size: 0.78rem; word-break: break-all; } /* Secret inputs get an inline show/hide toggle so the value isn't masked while typing. */ .secret-reveal-wrap { display: inline-flex; align-items: center; gap: 4px; } .secret-reveal { padding: 4px 8px; line-height: 1; opacity: 0.6; } .secret-reveal.is-on { opacity: 1; } /* ── Shared Help drawer (window.prismHelp) — consistent help UI across all tools ── */ .prism-help-root { position: fixed; inset: 0; z-index: 1000; } .prism-help-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.2s ease; } .prism-help-panel { position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 92vw; background: var(--bg-elev, #fff); box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.2s ease; } .prism-help-root.is-open .prism-help-backdrop { opacity: 1; } .prism-help-root.is-open .prism-help-panel { transform: translateX(0); } .prism-help-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .prism-help-head h2 { margin: 0; font-size: 1.05rem; } .prism-help-intro { padding: 12px 20px 0; margin: 0; color: var(--text-muted); font-size: 0.85rem; } .prism-help-search { margin: 12px 20px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 0.85rem; outline: none; } .prism-help-search:focus { border-color: var(--brand); } .prism-help-body { overflow-y: auto; padding: 0 20px 24px; flex: 1; } .prism-help-body details { border-bottom: 1px solid var(--border); } .prism-help-body summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 0.9rem; list-style: revert; } .prism-help-section { padding: 0 0 12px; font-size: 0.85rem; line-height: 1.55; color: var(--text); } .prism-help-section p { margin: 6px 0; } .prism-help-section ul { margin: 6px 0; padding-left: 20px; } .prism-help-section li { margin: 4px 0; } .prism-help-section code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.82em; } @media (max-width: 560px) { .prism-help-panel { width: 100vw; } } /* ── Admin: users & roles ── */ .admin-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom: 20px; } .admin-panel h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 16px; } /* Settings page: each section (Notifications, …) sits under a divider. */ .settings-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .settings-group > h2 { margin-bottom: 6px; } .settings-group h3 { font-size: 0.92rem; font-weight: 650; margin: 18px 0 10px; color: var(--text-muted); } .search-row input { width: 100%; padding: 12px 15px; font-size: 0.95rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; } .search-row input:focus { border-color: var(--brand); } .search-status { margin: 10px 2px 0; font-size: 0.85rem; } .search-status.is-error { color: #d4380d; } [data-theme="dark"] .search-status.is-error { color: #ff9a9a; } /* Non-color status cues (R8): leading glyph so state isn't conveyed by color alone. Scoped to the admin status containers toggled by setStatus(); inherits color. */ #search-status.is-error::before, #integrations-status.is-error::before { content: "\26A0\00A0"; } #search-status.is-ok::before, #integrations-status.is-ok::before { content: "\2713\00A0"; } .search-results { list-style: none; margin: 14px 0 0; padding: 0; } .result-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--bg-elev); } .result-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .role-checks { display: flex; gap: 8px 12px; flex-wrap: wrap; } .role-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text); cursor: pointer; user-select: none; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--pill); background: var(--surface); } .role-check:hover { border-color: var(--brand); } .role-check input { accent-color: var(--brand); cursor: pointer; } .cell-name { font-weight: 600; font-size: 0.92rem; } .cell-email { font-size: 0.82rem; } .assign-table { width: 100%; border-collapse: collapse; } .assign-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 0 10px; border-bottom: 1px solid var(--border); } .assign-table td { padding: 14px 0; border-bottom: 1px solid var(--border); vertical-align: top; } .assign-table tr:last-child td { border-bottom: none; } /* The consultants table's own cell-date rule is scoped to [data-consultant-table], so the Users & roles last-login column needs its own: a bare yyyy-mm-dd otherwise wraps mid-date when the roles column is wide. */ .assign-table td.cell-date { white-space: nowrap; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .role-chip.removable { display: inline-flex; align-items: center; gap: 6px; padding-right: 5px; } /* Apps & roles table: readable inter-column gutter (the base table runs columns flush) + body-cell text scaled to match .cell-name rather than raw body font. */ .apps-table th, .apps-table td { padding-right: 28px; } .apps-table th:last-child, .apps-table td:last-child { padding-right: 0; } /* Keep headers and app names on one line, but let first-column body text (app descriptions) wrap — a nowrap on the whole td forces the table wider than the panel and pushes the trailing columns outside the card. */ .apps-table th:first-child, .apps-table td:first-child .cell-name { white-space: nowrap; } .cell-text { font-size: 0.9rem; color: var(--text); line-height: 1.45; } /* ── Audit log: filter grid + readable table ──────────────────────────────── */ /* Filter controls on a responsive grid so they share one rhythm instead of a mix of full-width inputs and shrink-wrapped native selects. */ .audit-filters { margin-bottom: 18px; } .audit-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .audit-filter-grid > .span-all { grid-column: 1 / -1; } .audit-filter-grid input, .audit-filter-grid select { width: 100%; box-sizing: border-box; padding: 11px 13px; font-family: var(--font); font-size: 0.9rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color var(--motion-fast) var(--ease-out); appearance: none; } .audit-filter-grid input:focus, .audit-filter-grid select:focus { border-color: var(--brand); } /* Native select chevron (appearance:none removes the default) */ .audit-filter-grid .select-wrap { position: relative; } .audit-filter-grid .select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); pointer-events: none; } .audit-filter-grid select { padding-right: 32px; } /* Multi-select popover (native

; JS only enhances). Summary mirrors the input styling; the panel floats so it never reflows the grid. */ .multiselect { position: relative; } .multiselect > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; font-size: 0.9rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--motion-fast) var(--ease-out); } .multiselect > summary::-webkit-details-marker { display: none; } .multiselect > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); margin-top: -3px; flex: none; transition: transform var(--motion-fast) var(--ease-out); } .multiselect[open] > summary { border-color: var(--brand); } .multiselect[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; } .ms-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.72rem; font-weight: 650; color: #fff; background: var(--brand); border-radius: var(--pill); } .ms-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); } .ms-opt { display: flex; align-items: center; gap: 9px; padding: 8px 9px; font-size: 0.875rem; border-radius: 8px; cursor: pointer; } .ms-opt:hover { background: var(--surface-hover); } /* Restore the native checkbox — the grid-wide `appearance:none` (for text/select controls) also matches these nested inputs and would blank out the checkmark. */ .ms-opt input[type="checkbox"] { width: 16px; height: 16px; margin: 0; padding: 0; flex: none; -webkit-appearance: auto; appearance: auto; accent-color: var(--brand); } .audit-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; } .audit-export { margin: 0 0 16px; font-size: 0.85rem; color: var(--text-muted); } .audit-export a { color: var(--brand-link); } @media (max-width: 720px) { .audit-filter-grid { grid-template-columns: 1fr; } } /* Table: real inter-column gutters so long emails never collide with the next column. Fixed-ish widths keep the layout stable as values vary in length. */ .audit-table { table-layout: fixed; } .audit-table th, .audit-table td { padding-right: 28px; } .audit-table th:last-child, .audit-table td:last-child { padding-right: 0; } .audit-table td { font-size: 0.9rem; line-height: 1.45; } .audit-table .col-when { width: 12%; } .audit-table .col-when .when-rel { display: block; white-space: nowrap; color: var(--text); } .audit-table .col-when .when-abs { display: block; white-space: nowrap; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .audit-table .col-user { width: 24%; word-break: break-word; } .audit-table .col-tool { width: 15%; word-break: break-word; } .audit-table .col-action { width: 19%; } .audit-table .col-entity { width: 22%; word-break: break-all; color: var(--text-muted); } .audit-table .col-link { width: 8%; text-align: right; white-space: nowrap; } .audit-table .col-link a { color: var(--brand-link); } /* Clickable rows */ .audit-table tr.is-clickable { cursor: pointer; } .audit-table tbody tr.is-clickable:hover { background: var(--surface-hover); } /* Action badges — semantic color so the log scans fast. Subtle tints, not loud. */ .action-badge { display: inline-block; padding: 3px 8px; font-size: 0.8rem; border-radius: 6px; white-space: nowrap; } .badge-positive { background: rgba(0, 82, 255, 0.10); color: var(--brand-link); } .badge-warn { background: rgba(214, 122, 13, 0.12); color: #b3590a; } .badge-danger, .badge-negative { background: rgba(212, 56, 13, 0.10); color: #c0341a; } /* -negative: legacy alias used by JS/EJS */ .badge-neutral { background: var(--surface-2); color: var(--text-muted); } [data-theme="dark"] .badge-warn { color: #f0a868; } [data-theme="dark"] .badge-danger, [data-theme="dark"] .badge-negative { color: #ff9a8a; } /* "Needs attention" strip atop the Consultant Billing review queue */ .cb-attention-strip { display: flex; gap: 6px; align-items: center; cursor: pointer; padding: 8px 12px; margin: 8px 0 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-weight: 600; } .cb-attention-strip:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); } /* Active-filter chips */ .filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; } .filter-chips-label { font-size: 0.8rem; color: var(--text-muted); } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 0.82rem; color: var(--text); text-decoration: none; background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--pill); transition: border-color var(--motion-fast) var(--ease-out); } .filter-chip:hover { border-color: var(--brand); } .filter-chip-x { color: var(--text-muted); font-size: 1rem; line-height: 1; } /* Platform settings form */ .form-banner { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; margin: 0 0 16px; } .form-banner.is-ok { background: var(--accent-soft); color: var(--brand-link); } .form-banner.is-error { background: rgba(212, 56, 13, 0.10); color: #c0341a; } .settings-form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin-top: 8px; } .settings-form .field { display: flex; flex-direction: column; gap: 6px; } .settings-form .field-label { font-size: 0.85rem; font-weight: 600; color: var(--text); } .settings-form .field input[type="number"], .settings-form .field input[type="text"], .settings-form .field select { width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 0.95rem; font-family: var(--font); color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; } .settings-form .field input:focus, .settings-form .field select:focus { border-color: var(--brand); } .settings-form .field-check { flex-direction: row; align-items: center; gap: 9px; } .settings-form .field-check input { width: 16px; height: 16px; accent-color: var(--brand); } .settings-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; } /* Vertically-stacked action buttons (e.g. the Manager rail actions) — content-width, left-aligned, evenly spaced. */ .cb-btn-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .settings-meta { margin-top: 14px; font-size: 0.82rem; } /* AP invoice-ingestion (scan-to-prefill) — upload drop zone + candidate-review table. Parallel to the consultant portal's .cp-drop / .cp-review styling (kept in sync). */ .cb-drop { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 22px 16px; margin: 6px 0 10px; color: var(--text-muted); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out); } .cb-drop:hover, .cb-drop:focus-visible { border-color: var(--brand); background: var(--surface-hover); outline: none; } .cb-drop.is-over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); } .cb-file-list { display: flex; flex-direction: column; gap: 6px; } .cb-file-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; } .cb-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; } /* (The ingestion progress line's spacing lives with .cb-help below — it has to override it.) */ .cb-review-table th, .cb-review-table td { vertical-align: top; } .cb-review-flag > td { background: color-mix(in srgb, #f59e0b 12%, var(--surface)); } .cb-review-note > td { font-size: 0.8rem; padding-top: 2px; } .cb-review-warn { color: #92400e; } [data-theme="dark"] .cb-review-warn { color: #fbbf24; } /* Reusable per-entity audit trail (drill-down widget) */ .trail-list { list-style: none; margin: 8px 0 0; padding: 0; } .trail-item { border-bottom: 1px solid var(--border); } .trail-item:last-child { border-bottom: none; } .trail-link { display: flex; align-items: center; gap: 12px; padding: 10px 4px; text-decoration: none; color: var(--text); border-radius: 8px; transition: background var(--motion-fast) var(--ease-out); } .trail-link:hover { background: var(--surface-hover); } .trail-meta { font-size: 0.82rem; color: var(--text-muted); } /* Infinite-scroll sentinel */ #audit-sentinel { padding: 18px 0 4px; text-align: center; } .audit-loading { font-size: 0.85rem; color: var(--text-muted); } .audit-end { text-align: center; padding-top: 16px; } /* Status pill — positive (Live) vs neutral (everything else) on the .badge base. nowrap keeps "Coming soon" on one line in the narrow status column. */ .apps-table .badge { display: inline-block; white-space: nowrap; } .badge-live { color: #0a7d33; background: rgba(10, 125, 51, 0.10); border-color: transparent; } [data-theme="dark"] .badge-live { color: #7ee29a; background: rgba(126, 226, 154, 0.12); } .chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border: none; border-radius: 50%; cursor: pointer; font-size: 0.9rem; line-height: 1; color: var(--brand-link); background: rgba(0, 82, 255, 0.12); } .chip-x:hover { background: #d4380d; color: #fff; } .chip-x:disabled { opacity: 0.4; cursor: default; } /* ── Auth / login page ── */ .auth-topbar { display: flex; justify-content: flex-end; padding: 16px 20px; } .auth-wrap { flex: 1; display: grid; place-items: center; padding: 16px 20px 64px; } .auth-card { width: 100%; max-width: 400px; text-align: center; padding: 40px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); } .auth-mark { display: block; margin: 0 auto 22px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 82, 255, 0.28); } .auth-title { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; } .auth-sub { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin: 0 0 28px; } .ms-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px 18px; font-size: 0.95rem; font-weight: 600; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--pill); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease; } .ms-btn:hover { border-color: var(--brand); background: var(--surface-hover); } .ms-btn:active { transform: translateY(1px); } .auth-note { color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; margin: 24px 0 0; } .auth-footer { text-align: center; padding: 18px; color: var(--text-muted); font-size: 0.82rem; } /* ── AVD Reporter tool ── */ .avd-search-grid { display: grid; grid-template-columns: 1fr 160px 160px auto; gap: 14px; align-items: end; } .avd-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .avd-field input, #avd-group { width: 100%; padding: 9px 12px; font-size: 0.9rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; } .avd-field input:focus, #avd-group:focus { border-color: var(--brand); } .avd-field-btn .btn { width: 100%; } .avd-suggest-wrap { position: relative; } .avd-suggest { display: none; position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); max-height: 260px; overflow: auto; } .avd-suggest.open { display: block; } .avd-sug-item { padding: 9px 12px; font-size: 0.88rem; cursor: pointer; } .avd-sug-item:hover { background: var(--surface-hover); } .avd-log { list-style: none; margin: 0 0 20px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 200px; overflow: auto; font-size: 0.82rem; } .avd-log li { padding: 2px 0; color: var(--text-muted); } .avd-log-done { color: #0a7d33; } .avd-log-warn { color: #8a5a00; } .avd-log-err { color: #d4380d; } [data-theme="dark"] .avd-log-done { color: #7ee29a; } [data-theme="dark"] .avd-log-warn { color: #ffd9a8; } [data-theme="dark"] .avd-log-err { color: #ff9a9a; } /* Non-color status cues (R8): leading glyph on AVD log lines; inherits color. */ .avd-log-err::before { content: "\26A0\00A0"; } .avd-log-warn::before { content: "\26A0\00A0"; } .avd-log-done::before { content: "\2713\00A0"; } .avd-log-working { display: flex; align-items: center; gap: 8px; color: var(--brand-link); font-weight: 600; } .avd-log-spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: prism-spin 0.6s linear infinite; } @media (prefers-reduced-motion: reduce) { .avd-log-spinner { animation: none; } } .avd-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; } .sum-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 18px 20px; } .sum-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; } .sum-val { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 2px; } .sum-hint { font-size: 0.78rem; color: var(--text-muted); } .avd-results-head { flex-wrap: wrap; gap: 12px; } .avd-results-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .avd-group-label { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .avd-group-label select { padding: 6px 10px; border-radius: 8px; } .avd-group-label .dd { width: 170px; flex: 0 0 auto; } .avd-cols { position: relative; } .avd-cols-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 230px; padding: 14px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); } .avd-cols-pop label { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; padding: 4px 0; } .avd-preset-row { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .avd-preset-row .btn { flex: 1; } .avd-export { position: relative; display: inline-block; } .avd-export-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 6px; min-width: 130px; padding: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); } .avd-export-pop .btn { width: 100%; text-align: left; } .avd-empty { padding: 48px 20px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); } .avd-table-wrap { overflow-x: auto; } .avd-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .avd-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; } .avd-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .avd-table tbody tr:hover td { background: var(--bg-elev); } .av-pill { display: inline-block; padding: 2px 9px; border-radius: var(--pill); font-size: 0.72rem; font-weight: 600; background: var(--surface-2); } .av-active { color: #0a7d33; background: rgba(16,185,129,0.14); } .av-disc { color: #8a5a00; background: rgba(245,158,11,0.14); } .av-inactive { color: var(--text-muted); } .av-fail { color: #d4380d; background: rgba(212,56,13,0.12); } [data-theme="dark"] .av-active { color: #7ee29a; } [data-theme="dark"] .av-disc { color: #ffd9a8; } [data-theme="dark"] .av-fail { color: #ff9a9a; } .av-src { font-size: 0.72rem; color: var(--text-muted); } .avd-group td { background: var(--bg-elev); font-weight: 600; cursor: pointer; } .avd-gc { display: inline-block; width: 12px; color: var(--brand); } .avd-gcnt { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; margin-left: 6px; } /* a11y: keyboard-focusable suggestion highlight (combobox active option) */ .avd-sug-active { background: var(--accent-soft); } /* a11y: real