/* ============================================================================= ORBIT DASHBOARD — signed-in app stylesheet Self-hosted (no CDN) so the strict CSP (style-src 'self'; script-src 'self') holds. No inline styles/scripts anywhere in the templates; all motion is CSS. Tokens: EIGHT themeable base colors drive a derived layer via color-mix(); a tenant can also pick fonts (--font-sans/--font-mono), corner radius (--r-sm/md/lg), surface ([data-surface]), density ([data-density]) and button emphasis ([data-btn]). Per-tenant overrides arrive from /theme.css + the data-* attrs on ; this file holds the DEFAULTS + every rule block. ============================================================================= */ /* ── Self-hosted fonts (latin subset, woff2) ─────────────────────────────── */ @font-face { font-family: 'Bricolage Grotesque'; src: url('/static/fonts/bricolage-grotesque-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; font-style: normal; } @font-face { font-family: 'Space Grotesk'; src: url('/static/fonts/space-grotesk-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; font-style: normal; } @font-face { font-family: 'Sora'; src: url('/static/fonts/sora-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; font-style: normal; } @font-face { font-family: 'Inter'; src: url('/static/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; font-style: normal; } @font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; font-style: normal; } @font-face { font-family: 'Spline Sans Mono'; src: url('/static/fonts/spline-sans-mono-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; font-style: normal; } @font-face { font-family: 'IBM Plex Mono'; src: url('/static/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: 'IBM Plex Mono'; src: url('/static/fonts/ibm-plex-mono-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; } /* ── 1) Eight themeable base tokens (defaults; /theme.css overrides per tenant) */ :root { --purple: #0e7c86; /* Primary - actions, active nav, focus ring (deep teal) */ --glow: #3aa6ae; /* Accent glow - rare lighter-teal highlight */ --cyan: #2c7e8c; /* Secondary - running / in-progress state */ --bg: #fcfcfd; /* Page background (off-white, faint cool tint) */ --bg-side: #f4f6f9; /* Sidebar / inset surfaces (recessed) */ --card: #ffffff; /* Card surface (raised) */ --text: #161820; /* Primary text (near-black, faint cool) ~15:1 on --bg */ --muted: #586072; /* Secondary text ~6:1 on --card */ } /* ── 2) Derived color layer — computed from the eight, never themed directly ── */ :root { --border: color-mix(in oklab, var(--text), transparent 88%); --border-strong: color-mix(in oklab, var(--text), transparent 74%); --hover: color-mix(in oklab, var(--card), var(--text) 8%); --active: color-mix(in oklab, var(--card), var(--text) 15%); --accent-text: color-mix(in oklab, var(--purple), var(--text) 38%); --accent-soft: color-mix(in oklab, var(--purple), transparent 84%); --ring: color-mix(in oklab, var(--purple), white 16%); --on-accent: #ffffff; /* Semantic - muted, readable status colors (not full saturation), kept independent of the accent so red/amber/green stay legible in light mode. */ --ok: #1e7a4d; --warn: #8a6300; --danger: #b23b33; --ok-soft: color-mix(in oklab, var(--ok), transparent 86%); --warn-soft: color-mix(in oklab, var(--warn), transparent 86%); --danger-soft: color-mix(in oklab, var(--danger), transparent 86%); /* Glass MATERIAL — only ever over real content (header, modal, sheet, toast). */ --glass: color-mix(in oklab, var(--card), transparent 22%); --glass-side: color-mix(in oklab, var(--bg-side), transparent 28%); --glass-blur: 22px; } /* ── 3) Radii, elevation, type, motion, spacing ──────────────────────────── */ :root { --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-full: 999px; --shadow-1: 0 1px 2px rgb(20 24 32 / 0.06); --shadow-2: 0 8px 24px -8px rgb(20 24 32 / 0.12); --shadow-3: 0 24px 64px -16px rgb(20 24 32 / 0.18); --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; --fs-display: clamp(2.25rem, 1.6rem + 2.2vw, 3rem); --fs-h1: clamp(1.6rem, 1.35rem + 1.1vw, 2rem); --fs-h2: 1.3125rem; --fs-body: 0.9375rem; --fs-sm: 0.8125rem; --fs-mono: 0.75rem; --motion-scale: 1; --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --ease-exit: cubic-bezier(0.4, 0, 0.6, 1); --dur-1: calc(120ms * var(--motion-scale)); --dur-2: calc(200ms * var(--motion-scale)); --dur-3: calc(280ms * var(--motion-scale)); --dur-exit: calc(150ms * var(--motion-scale)); --tap: 44px; /* minimum touch target */ --space-card: 20px; /* density-driven (see [data-density="compact"]) */ --space-gap: 16px; --space-section: 30px; --nav-pad-y: 10px; } /* ── Motion keyframes ────────────────────────────────────────────────────── */ @keyframes orbit-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes orbit-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes orbit-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.98); } } @keyframes orbit-scrim-in { from { opacity: 0; } to { opacity: 1; } } @keyframes orbit-toast-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes orbit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } } @keyframes orbit-ping { 0% { transform: scale(1); opacity: 0.55; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes orbit-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Base ────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; line-height: 1.5; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; } .sidebar { width: clamp(208px, 20vw, 240px); flex-shrink: 0; background: var(--bg-side); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 14px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Sticky GLASS header — the one place glass is load-bearing chrome. */ .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 4vw, 32px); background: var(--glass-side); border-bottom: 1px solid var(--border); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); } .topbar h1 { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem); font-weight: 700; letter-spacing: -0.01em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar .spacer { flex: 1; } .topbar .avatar, .topbar .badge { flex-shrink: 0; } .content { padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 28px) 64px; max-width: 1080px; width: 100%; margin-inline: auto; animation: orbit-fade-up var(--dur-3) var(--ease-glide); } /* ── Brand mark + wordmark (solid; no gradient-text slop) ─────────────────── */ .brand { display: flex; align-items: center; gap: 9px; margin: 2px 8px 24px; } .brand .mark { width: 24px; height: 24px; flex-shrink: 0; color: var(--purple); } .wordmark { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .wordmark .suffix { color: var(--muted); font-weight: 600; } /* ── Nav: tinted fill + 3px rounded left rail + accent-tinted icon ────────── */ .nav { display: flex; flex-direction: column; gap: 3px; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: var(--tap); padding: var(--nav-pad-y) 12px; border-radius: var(--r-sm); color: var(--muted); font-size: 13.5px; font-weight: 600; transition: background var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft); } .nav-item .ic { width: 18px; height: 18px; flex-shrink: 0; } .nav-item:hover { background: var(--hover); color: var(--text); } .nav-item.active { background: var(--active); color: var(--text); } .nav-item.active::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: var(--r-full); background: var(--purple); } .nav-item.active .ic { color: var(--accent-text); } .side-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--border); } .side-foot .who { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .side-foot .sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .logout-form { margin: 10px 0 0; } .logout-btn { font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; width: 100%; font-family: inherit; transition: color var(--dur-1) var(--ease-soft), border-color var(--dur-1) var(--ease-soft); } .logout-btn:hover { color: var(--text); border-color: var(--border-strong); } /* ── Avatar + badge ──────────────────────────────────────────────────────── */ .avatar { width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--on-accent); background: var(--purple); } .badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 9px; border-radius: var(--r-full); color: var(--accent-text); border: 1px solid var(--border-strong); background: var(--accent-soft); } /* ── Page headings ───────────────────────────────────────────────────────── */ .welcome { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; overflow-wrap: anywhere; } .lede { color: var(--muted); margin: 0 0 var(--space-section); max-width: 70ch; } .section-head { display: flex; align-items: baseline; gap: 12px; margin: var(--space-section) 0 14px; flex-wrap: wrap; } .section-head h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; margin: 0; } .section-head .count { color: var(--muted); font-size: 13px; } .section-head .link { margin-left: auto; font-size: 13px; color: var(--accent-text); font-weight: 600; } .section-head .link:hover { color: var(--text); } /* ── Stat cards (mono tabular value) ─────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-gap); } .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; } .stat .label { font-size: 12px; color: var(--muted); margin: 0 0 10px; } .stat .value { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .stat .trend { font-size: 12px; margin: 6px 0 0; display: flex; align-items: center; gap: 5px; color: var(--muted); } .stat .trend.up { color: var(--ok); } .stat .trend .ic { width: 13px; height: 13px; } /* ── Cards / system cards ────────────────────────────────────────────────── */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-gap); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-gap); } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-card); display: flex; flex-direction: column; gap: 12px; transition: transform var(--dur-1) var(--ease-soft), box-shadow var(--dur-1) var(--ease-soft), border-color var(--dur-1) var(--ease-soft); } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--border-strong); } .card .row { display: flex; align-items: center; gap: 12px; } .card .row > div { min-width: 0; } .card h3 { font-size: 15px; font-weight: 700; margin: 0; } .card .tagline { color: var(--muted); font-size: 13px; margin: 2px 0 0; overflow-wrap: anywhere; } .card .desc { color: var(--muted); font-size: 13px; margin: 0; flex: 1; line-height: 1.5; overflow-wrap: anywhere; } .card .foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; } .card .foot .spacer { flex: 1; } .card .price { font-size: 14px; font-weight: 700; } .card .price .unit { color: var(--muted); font-weight: 500; font-size: 12px; } .card.coming-soon { opacity: 0.62; } /* Icon tile — derivable accent tint, NOT a hardcoded gradient. */ .tile { width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0; display: grid; place-items: center; font-size: 17px; font-weight: 800; } .tile .ic { width: 22px; height: 22px; } .tile-1 { color: var(--purple); background: color-mix(in oklab, var(--purple), transparent 84%); } .tile-2 { color: var(--cyan); background: color-mix(in oklab, var(--cyan), transparent 84%); } .tile-3 { color: var(--glow); background: color-mix(in oklab, var(--glow), transparent 82%); } .tile-4 { color: var(--ok); background: var(--ok-soft); } .tile-5 { color: var(--accent-text); background: color-mix(in oklab, var(--purple), transparent 88%); } /* ── Featured active-system card ─────────────────────────────────────────── */ .featured { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; } .featured .meta { flex: 1; min-width: 220px; } .featured .head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; } .featured h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .featured .desc { color: var(--muted); font-size: 14px; margin: 0 0 16px; max-width: 56ch; } .metrics { display: flex; gap: 28px; flex-wrap: wrap; } .metric .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 600; } .metric .k { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── System list rows ────────────────────────────────────────────────────── */ .rows { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px; } .srow { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: var(--r-sm); transition: background var(--dur-1) var(--ease-soft); } .srow:hover { background: var(--hover); } .srow + .srow { border-top: 1px solid var(--border); } .srow .tile { width: 36px; height: 36px; } .srow .tile .ic { width: 19px; height: 19px; } .srow .body { flex: 1; min-width: 0; } .srow .body h4 { font-size: 14px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srow .body p { font-size: 12px; color: var(--muted); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srow .metric-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; min-width: 64px; text-align: right; flex-shrink: 0; } /* ── Status pills (mixed back to brand) ──────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid transparent; } .pill .ic { width: 12px; height: 12px; } .pill .dot { width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; flex-shrink: 0; } .pill-active { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok), transparent 70%); } .pill-running { color: var(--cyan); background: color-mix(in oklab, var(--cyan), transparent 86%); border-color: color-mix(in oklab, var(--cyan), transparent 70%); } .pill-attention { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn), transparent 66%); } .pill-error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger), transparent 64%); } .pill-preview { color: var(--accent-text); background: var(--accent-soft); border-color: var(--border-strong); } .pill-soon { color: var(--muted); background: var(--hover); border-color: var(--border); } .pill-running .dot, .pill-active .dot { position: relative; } .pill-running .dot::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-full); background: currentColor; animation: orbit-ping 1.8s var(--ease-soft) infinite; } /* ── Buttons (default = solid; [data-btn] swaps the primary emphasis) ─────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; color: var(--on-accent); background: var(--purple); transition: transform var(--dur-1) var(--ease-soft), filter var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft); } .btn .ic { width: 16px; height: 16px; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(0.96); } .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-ghost:hover { background: var(--hover); filter: none; } .btn-danger { background: var(--danger); color: var(--on-accent); } .btn-icon { padding: 9px; min-width: 40px; } .btn-disabled, .btn:disabled { background: var(--hover); color: var(--muted); cursor: not-allowed; border-color: var(--border); } .btn-disabled:hover { filter: none; transform: none; } .btn-block { width: 100%; } /* Primary-emphasis variants — exclude ghost/danger/disabled so they keep identity. */ [data-btn="soft"] .btn:not(.btn-ghost):not(.btn-danger):not(.btn-disabled):not(:disabled) { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } [data-btn="outline"] .btn:not(.btn-ghost):not(.btn-danger):not(.btn-disabled):not(:disabled) { background: transparent; color: var(--accent-text); border-color: var(--purple); } /* ── Tabs (sliding underline) ────────────────────────────────────────────── */ .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: 0 0 18px; } .tab { font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: none; padding: 10px 12px; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-2) var(--ease-glide), border-color var(--dur-2) var(--ease-glide); } .tab:hover { color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--purple); } .tab.soon { color: var(--muted); opacity: 0.6; cursor: not-allowed; } /* ── Form fields ─────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); } .field .label { font-weight: 600; } .input { width: 100%; min-height: var(--tap); font-family: inherit; font-size: 15px; background: color-mix(in oklab, var(--bg), var(--text) 4%); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 12px; transition: border-color var(--dur-1) var(--ease-soft), box-shadow var(--dur-1) var(--ease-soft); } .input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--accent-soft); } .field.error .input { border-color: var(--danger); } .field .msg { font-size: 12px; color: var(--danger); display: flex; align-items: center; gap: 6px; } .field .msg .ic { width: 14px; height: 14px; flex-shrink: 0; } /* ── Health meter (dial SVG; geometry computed in the macro, not inline CSS) ─ */ .meter { display: inline-grid; place-items: center; position: relative; } .meter svg { display: block; } .meter .track { fill: none; stroke: var(--border); } .meter .arc { fill: none; stroke: var(--purple); stroke-linecap: round; transition: stroke-dashoffset var(--dur-3) var(--ease-glide); } .meter.warn .arc { stroke: var(--warn); } .meter.attention .arc { stroke: var(--warn); } .meter .center { position: absolute; text-align: center; } .meter .center .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; } .meter .center .cap { font-size: 10px; color: var(--muted); text-transform: lowercase; } /* Linear bar meter (rows / quota). */ .bar { height: 8px; border-radius: var(--r-full); background: color-mix(in oklab, var(--text), transparent 88%); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--purple); border-radius: inherit; transform-origin: left; animation: orbit-bar-grow var(--dur-3) var(--ease-glide); } .bar.warn > span { background: var(--warn); } /* ── Overlays: modal + scrim + toast (frosted glass over real content) ───── */ .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(6, 4, 12, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: orbit-scrim-in var(--dur-2) var(--ease-soft); display: grid; place-items: center; padding: 24px; } /* `display:grid` above outranks the UA [hidden] rule, so hidden scrims would stay visible — restore hide-when-hidden with a higher-specificity selector. */ .scrim[hidden] { display: none; } .modal { width: 440px; max-width: 100%; background: var(--glass); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 26px; backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); animation: orbit-modal-in var(--dur-3) var(--ease-glide); } .modal h3 { margin: 0 0 8px; font-size: 1.1875rem; font-weight: 700; } .modal p { margin: 0 0 18px; color: var(--muted); font-size: 14px; } .modal .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(92vw, 380px); display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--bg-side); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); animation: orbit-toast-in var(--dur-3) var(--ease-glide); } .toast .ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--ok); } /* ── Skeletons (layout-matched pulse, never a spinner) ───────────────────── */ .skeleton { background: color-mix(in oklab, var(--text), transparent 90%); border-radius: 6px; animation: orbit-pulse 1.5s var(--ease-soft) infinite; } .skeleton.line { height: 14px; margin-bottom: 8px; } .skeleton.value { height: 26px; width: 70%; margin-bottom: 8px; } .skeleton.dial { width: 110px; height: 110px; border-radius: var(--r-full); } /* ── Empty + error states ────────────────────────────────────────────────── */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; } .empty .badge-ic { width: 74px; height: 74px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 18px; } .empty .badge-ic .ic { width: 34px; height: 34px; } .empty h2 { font-size: 1.3125rem; font-weight: 700; margin: 0 0 8px; } .empty p { color: var(--muted); margin: 0 0 20px; max-width: 44ch; line-height: 1.6; } .empty .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .banner { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; padding: 11px 13px; border-radius: var(--r-sm); margin: 0 0 16px; background: var(--danger-soft); border: 1px solid color-mix(in oklab, var(--danger), transparent 64%); color: var(--text); } .banner .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--danger); } .banner.notice { background: var(--accent-soft); border-color: var(--border-strong); } .banner.notice .ic { color: var(--accent-text); } /* ── Settings: sectioned shell ───────────────────────────────────────────── */ .settings-shell { display: flex; gap: 28px; align-items: flex-start; } .settings-nav { width: clamp(160px, 22%, 196px); flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 88px; } .settings-nav a { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--muted); } .settings-nav a:hover { background: var(--hover); color: var(--text); } .settings-nav a.active { background: var(--active); color: var(--text); font-weight: 600; } .settings-nav a.soon { color: var(--muted); } .settings-nav .soon-tag { margin-left: auto; font-size: 10px; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-full); padding: 1px 6px; } .settings-body { flex: 1; min-width: 0; } /* Appearance editor: controls + sticky live preview */ .appearance { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: start; } .appearance .preview { position: sticky; top: 96px; } .settings-group { margin-bottom: 22px; } .settings-group h3 { font-size: 12px; color: var(--muted); margin: 0 0 10px; font-weight: 650; } .color-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; } .color-row:hover { border-color: var(--border-strong); } .color-row .cr-label { flex: 1; font-size: 14px; min-width: 0; } .color-row .cr-hex { font-size: 12px; color: var(--muted); min-width: 70px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .color-row input[type="color"] { width: 48px; height: 40px; padding: 0; cursor: pointer; flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); } .opt-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); } .opt-row .cr-label { flex: 1; font-size: 14px; } .opt-row select { font-family: inherit; font-size: 13px; color: var(--text); background: var(--bg-side); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px 10px; min-height: 40px; cursor: pointer; min-width: 150px; } .seg { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; } .seg legend { font-size: 14px; padding: 0 4px; color: var(--text); } .seg .opts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .seg label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; } .seg input[type="radio"] { accent-color: var(--purple); } .seg label:has(input:checked) { color: var(--text); border-color: var(--purple); background: var(--accent-soft); } .preview-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .preview-card h4 { margin: 0 0 14px; font-size: 13px; color: var(--muted); font-weight: 650; } .preview-swatches { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .preview-swatches span { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--border); } .sw-purple { background: var(--purple); } .sw-glow { background: var(--glow); } .sw-cyan { background: var(--cyan); } .sw-bg { background: var(--bg); } .sw-bg-side { background: var(--bg-side); } .sw-card { background: var(--card); } .sw-text { background: var(--text); } .sw-muted { background: var(--muted); } .preview-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .settings-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; } /* ── Surface variants (default .card = bordered) ─────────────────────────── */ [data-surface="flat"] .card, [data-surface="flat"] .stat, [data-surface="flat"] .featured, [data-surface="flat"] .rows { border-color: transparent; } [data-surface="glassy"] .card, [data-surface="glassy"] .stat, [data-surface="glassy"] .featured, [data-surface="glassy"] .rows { background: var(--glass); border-color: var(--border-strong); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { [data-surface="glassy"] .card, [data-surface="glassy"] .stat, [data-surface="glassy"] .featured, [data-surface="glassy"] .rows { backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } } /* ── Density variant ─────────────────────────────────────────────────────── */ [data-density="compact"] { --space-card: 14px; --space-gap: 11px; --space-section: 22px; --nav-pad-y: 7px; } [data-density="compact"] .stat { padding: 13px; } [data-density="compact"] .featured { padding: 18px; gap: 18px; } [data-density="compact"] .srow { padding: 10px 12px; } /* ── Auth pages (no sidebar) ─────────────────────────────────────────────── */ .auth-body { display: grid; place-items: center; min-height: 100vh; padding: clamp(16px, 5vw, 48px); } .auth-shell { width: 100%; max-width: 420px; } .auth-brand { display: flex; align-items: center; gap: 9px; justify-content: center; margin: 0 0 20px; } .auth-brand .mark { width: 26px; height: 26px; color: var(--purple); } .auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(24px, 5vw, 36px); animation: orbit-fade-up var(--dur-3) var(--ease-glide); } .auth-h1 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; } .auth-sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-form .btn { margin-top: 4px; } .auth-foot { font-size: 13px; color: var(--muted); margin: 14px 0 0; text-align: center; } .auth-foot a { color: var(--accent-text); font-weight: 600; } /* ── Responsive: collapse the sidebar to icon-only, then to a top bar ────── */ @media (max-width: 1040px) { .sidebar { width: 68px; padding: 18px 10px; align-items: center; } .brand .wordmark, .nav-item span:not(.ic-wrap), .side-foot .who, .side-foot .sub { display: none; } .brand { justify-content: center; margin-inline: 0; } .nav-item { justify-content: center; padding-inline: 0; } .nav-item.active::before { left: -7px; } .side-foot { padding: 12px 0 0; } .logout-btn { padding: 7px; } } @media (max-width: 760px) { .layout { flex-direction: column; } .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px clamp(12px, 4vw, 18px); } .brand { margin: 0 6px 0 0; } .brand .wordmark { display: inline; } .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; } .nav-item { min-height: 38px; } .nav-item span:not(.ic-wrap) { display: inline; } .nav-item.active::before { display: none; } .nav-item.active { box-shadow: inset 0 -2px 0 var(--purple); } .side-foot { margin: 0 0 0 auto; padding: 0; border-top: none; display: flex; align-items: center; gap: 10px; } .side-foot .who { display: block; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-foot .sub { display: none; } .logout-form { margin: 0; } .logout-btn { width: auto; } .stat-row { grid-template-columns: repeat(2, 1fr); } .appearance { grid-template-columns: 1fr; } .appearance .preview { position: static; } .settings-shell { flex-direction: column; } .settings-nav { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; top: auto; } .settings-nav .soon-tag { display: none; } } @media (max-width: 460px) { .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; } .metrics { gap: 18px; } } /* ── Two-factor (Security settings + verify page) ─────────────────────────── */ .mfa-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-card); box-shadow: var(--shadow-1); max-width: 640px; } .mfa-card h3 { font-size: var(--fs-h2); margin: 0 0 6px; } .mfa-card > p { margin: 0 0 16px; } .mfa-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .mfa-enroll { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin: 4px 0 18px; } .qr-frame { background: #fff; border-radius: var(--r-md); padding: 12px; line-height: 0; width: clamp(160px, 40vw, 208px); } .qr-frame svg { display: block; width: 100%; height: auto; } .mfa-manual { flex: 1 1 180px; min-width: 160px; } .secret-key { display: inline-block; margin-top: 6px; padding: 8px 12px; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.08em; word-break: break-all; background: var(--bg-side); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); } .code-input { font-family: var(--font-mono); letter-spacing: 0.3em; } .mfa-confirm { max-width: 320px; } .recovery-codes { list-style: none; margin: 4px 0 18px; padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; background: var(--bg-side); border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); } .recovery-codes li { letter-spacing: 0.06em; } .mfa-actions { display: flex; flex-direction: column; gap: 14px; } .mfa-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .mfa-inline .input { flex: 1 1 200px; min-width: 160px; } .btn-danger { background: var(--danger-soft); color: var(--text); border: 1px solid color-mix(in oklab, var(--danger), transparent 55%); } .btn-danger:hover { background: color-mix(in oklab, var(--danger), transparent 70%); } @media (max-width: 560px) { .recovery-codes { grid-template-columns: 1fr; } } /* ── Billing (plan cards) ─────────────────────────────────────────────────── */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; max-width: 640px; } .plan-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-card); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 8px; } .plan-card.current { border-color: var(--border-strong); background: var(--accent-soft); } .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .plan-head h3 { font-size: var(--fs-h2); margin: 0; } .plan-systems { color: var(--muted); margin: 0 0 12px; } .plan-card .btn { margin-top: auto; } /* ── Billing: build-your-plan module selector ─────────────────────────────── */ .bill-builder { max-width: 640px; margin-top: 18px; } .bill-cadence { border: 0; padding: 0; margin: 0 0 16px; } .bill-cadence legend { padding: 0; margin: 0 0 6px; color: var(--muted); } .bill-cadence label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; cursor: pointer; } .bill-builder > .plan-card { max-width: none; margin-bottom: 16px; } .plan-blurb { margin: 0; font-size: 0.9rem; } .pick-toggle { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; cursor: pointer; font-weight: 600; } .plan-card.disabled { opacity: 0.55; } .plan-card.disabled .pick-toggle { cursor: not-allowed; font-weight: 400; } .plan-card.selected { border-color: var(--border-strong); background: var(--accent-soft); } .bill-summary { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 14px; max-width: 640px; } .bill-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; } .bill-summary-row strong { font-size: var(--fs-h2); } .bill-nudge { margin: 8px 0 0; } .bill-topups { margin-top: 18px; } .bill-topups .plan-systems { margin-bottom: 12px; } .topup-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } /* ── Credentials (vault) ──────────────────────────────────────────────────── */ .mfa-card + .mfa-card { margin-top: 18px; } .cred-form { display: flex; flex-direction: column; gap: 14px; } .cred-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .cred-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-side); border: 1px solid var(--border); border-radius: var(--r-md); } .cred-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cred-name { font-weight: 600; word-break: break-all; } .cred-sub { color: var(--muted); font-size: var(--fs-sm); } .cred-del { flex: 0 0 auto; } /* ── Account (profile + GDPR export/erasure) ──────────────────────────────── */ .acct-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 4px 0 0; } .acct-grid dt { color: var(--muted); } .acct-grid dd { margin: 0; word-break: break-all; } .danger-zone { border-color: color-mix(in oklab, var(--danger), transparent 55%); } /* ============================================================================= IA components - hubs sidebar, Agents roster, Approvals, CRM pipeline. Class-only (CSP forbids inline style); spacing is baked in so templates need no style attributes. ============================================================================= */ /* Base icon size so NO glyph ever balloons to the SVG replaced-element default (300x150) when used in a context that doesn't size it. Every context rule above is more specific and still wins; this is purely a safety floor. */ .ic { width: 16px; height: 16px; flex-shrink: 0; } .lock { width: 13px; height: 13px; flex-shrink: 0; } .chev { width: 15px; height: 15px; flex-shrink: 0; } /* ── Sidebar: hub groups (collapsible) ───────────────────────────────────── */ .nav-divider { height: 1px; background: var(--border); margin: 12px 4px; } .nav-section-label { font-size: 11px; color: var(--muted); margin: 14px 12px 6px; font-weight: 650; } .nav-group { display: flex; flex-direction: column; } .nav-group-head { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: var(--nav-pad-y) 12px; border-radius: var(--r-sm); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; background: none; border: none; font-family: inherit; width: 100%; text-align: left; transition: background var(--dur-1) var(--ease-soft); } .nav-group-head:hover { background: var(--hover); } .nav-group-head .ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); } .nav-group-head .lbl { flex: 1; } .nav-group-head .lock { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; } .nav-group-head .chev { width: 15px; height: 15px; color: var(--muted); transition: transform var(--dur-2) var(--ease-glide); flex-shrink: 0; } .nav-group.open .nav-group-head .chev { transform: rotate(90deg); } .nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-glide); } .nav-group.open .nav-sub { grid-template-rows: 1fr; } .nav-sub-inner { overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding-left: 30px; } .nav-sub a { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 5px 10px; border-radius: var(--r-sm); color: var(--muted); font-size: 13px; font-weight: 500; transition: background var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft); } .nav-sub a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; flex-shrink: 0; } .nav-sub a:hover { background: var(--hover); color: var(--text); } .nav-sub a.active { color: var(--text); background: var(--active); } /* ── Chips (system tags) ─────────────────────────────────────────────────── */ .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chips.gap-top { margin-top: 9px; } .chip { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--hover); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px 9px; } .chip.accent { color: var(--accent-text); background: var(--accent-soft); border-color: var(--border-strong); } /* ── Page toolbar (title + actions) ──────────────────────────────────────── */ .toolbar { display: flex; gap: 12px; align-items: flex-end; margin: 0 0 18px; flex-wrap: wrap; } .toolbar .grow { flex: 1; min-width: 200px; } .toolbar .welcome { margin-bottom: 2px; } .toolbar .lede { margin: 0; } /* ── Agents roster ───────────────────────────────────────────────────────── */ .agent-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: var(--r-md); transition: background var(--dur-1) var(--ease-soft); } .agent-row:hover { background: var(--hover); } .agent-row + .agent-row { border-top: 1px solid var(--border); } .agent-av { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; } .agent-av .ic { width: 22px; height: 22px; } .agent-main { flex: 1; min-width: 0; } .agent-main .name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .agent-main .scope { font-size: 12px; color: var(--accent-text); font-weight: 600; } .agent-main .act { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .agent-side { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; flex-shrink: 0; } .inline-form { display: inline-flex; margin: 0; } .rowmenu { position: relative; } .rowmenu > summary { list-style: none; cursor: pointer; } .rowmenu > summary::-webkit-details-marker { display: none; } .rowmenu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 232px; padding: 13px; text-align: left; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); } .rowmenu-pop .warn { font-size: 12.5px; color: var(--muted); margin: 0 0 11px; line-height: 1.45; } /* ── Activity feed ───────────────────────────────────────────────────────── */ .feed { padding-left: 2px; } .feed-item { display: flex; gap: 13px; padding: 11px 4px; } .feed-item + .feed-item { border-top: 1px solid var(--border); } .feed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--purple); margin-top: 5px; flex-shrink: 0; } .feed-dot.cyan { background: var(--cyan); } .feed-dot.ok { background: var(--ok); } .feed-dot.warn { background: var(--warn); } .feed-body { flex: 1; min-width: 0; } .feed-body .t { font-size: 13.5px; } .feed-body .t b { font-weight: 700; } .feed-body .m { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .feed-by { color: var(--accent-text); font-weight: 600; } .feed-empty { font-size: 13px; color: var(--muted); padding: 14px 4px; line-height: 1.55; } /* ── Two-column grid + panels ────────────────────────────────────────────── */ .cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-gap); align-items: start; } .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; } .panel-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .panel-head h3 { font-size: 14px; font-weight: 700; margin: 0; } .panel-head .link { margin-left: auto; font-size: 12px; color: var(--accent-text); font-weight: 600; cursor: pointer; } .panel-head .num { font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--purple); border-radius: var(--r-full); padding: 1px 8px; } .panel .rows.bare { background: transparent; padding: 0; border: none; } .panel .btn.gap-top { margin-top: 14px; } /* ── Approvals queue ─────────────────────────────────────────────────────── */ .queue-item { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px; } .queue-item + .queue-item { border-top: 1px solid var(--border); } .queue-ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; } .queue-ic .ic { width: 18px; height: 18px; } .queue-body { flex: 1; min-width: 0; } .queue-body .qt { font-size: 14px; font-weight: 600; } .queue-body .qm { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; } .queue-body .qmeta { font-size: 11px; color: var(--accent-text); font-weight: 600; margin-top: 6px; } .queue-actions { display: flex; gap: 8px; flex-shrink: 0; } .btn-sm { min-height: 32px; padding: 6px 12px; font-size: 12px; } /* ── CRM pipeline board ──────────────────────────────────────────────────── */ .pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; } .pipe-col { background: var(--bg-side); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; } .pipe-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-size: 12px; font-weight: 700; } .pipe-col-head .n { margin-left: auto; color: var(--muted); font-family: var(--font-mono); } .pipe-col-head .seg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); } .seg-dot.s-sourced { background: var(--muted); } .seg-dot.s-contacted { background: var(--cyan); } .seg-dot.s-replied { background: var(--warn); } .seg-dot.s-meeting { background: var(--ok); } .contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color var(--dur-1), transform var(--dur-1); } .contact-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .contact-card .cn { font-size: 13px; font-weight: 600; } .contact-card .cc { font-size: 12px; color: var(--muted); margin-top: 1px; } .contact-card .csrc { font-size: 10px; color: var(--accent-text); font-weight: 600; margin-top: 7px; } /* ── System workspace (4-tab shell) ──────────────────────────────────────── */ .tile-lg { width: 46px; height: 46px; } .tile-lg .ic { width: 24px; height: 24px; } .featured.workspace-head { margin-bottom: 18px; } [data-pane][hidden] { display: none; } .banner.gap-top { margin-top: 18px; } /* ── Hire modal: role picker ─────────────────────────────────────────────── */ .modal.wide { width: 560px; } .role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; } .role-opt { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color var(--dur-1); } .role-opt:hover { border-color: var(--border-strong); } .role-opt.sel { border-color: var(--purple); background: var(--accent-soft); } .role-opt .rn { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; } .role-opt .rn .lock { width: 12px; height: 12px; color: var(--warn); } .role-opt .rd { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; } .modal .field + .field { margin-top: 12px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .pipeline { grid-template-columns: 1fr 1fr; } .role-grid { grid-template-columns: 1fr; } }