/* Beacon Admin — visual system Brand-aligned (Beacon red) but its own dashboard identity. Typeface: Lexend Deca (UI) + Spline Sans Mono (figures/IDs). */ /* stylelint-disable no-descending-specificity -- The flagged pairs (e.g. `.topbar-logo img` vs `.sidebar-brand .brand img`) target different elements, so source order does not affect the cascade. Reordering them purely to satisfy the linter would hurt readability. */ :root { --bg: #f4f6f9; --panel: #fff; --panel-2: #fafbfc; --ink: #14161d; --ink-soft: #5c6273; /* Darkened 2026-08-12: #8a90a2 on --panel measured 3.19:1, and almost every use of this is .tiny at 12px, where AA wants 4.5:1. This is 4.83:1. */ --ink-faint: #6b7280; --line: #e7eaf1; --line-soft: #eef1f6; --brand: #ef233c; --brand-ink: #c10e26; --brand-bg: #fdecee; --good: #0f9d6b; --good-bg: #e6f6ef; --warn: #b06a00; --warn-bg: #fbf0dc; --bad: #d92d20; --bad-bg: #fdeceb; /* Red for TEXT on --bad-bg. --bad itself is only 4.23:1 there, and the confirm button is 13px semibold, which is not large text. This is 4.81:1. */ --bad-ink: #c9291d; --info: #2c5ce6; --info-bg: #e9effd; --neutral: #6b7280; --neutral-bg: #eef0f4; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgb(17 20 28 / 4%), 0 6px 20px rgb(17 20 28 / 5%); --shadow-lift: 0 4px 10px rgb(17 20 28 / 6%), 0 16px 40px rgb(17 20 28 / 10%); --sidebar-w: 250px; /* "Solid" surface for high-emphasis chips/buttons/avatars. Kept separate from --ink so it can invert independently in dark mode (where --ink is light). */ --solid: #14161d; --solid-ink: #fff; --solid-hover: #000; color-scheme: light; } /* ── Dark theme ─────────────────────────────────────────────────────────── Everything is variable-driven, so the dark scheme is almost entirely a re-mapping of the palette. Applied via (server- rendered from the signed-in admin's saved preference, so no flash). */ [data-theme="dark"] { --bg: #0e1014; --panel: #16191f; --panel-2: #1c2028; --ink: #e7e9f0; --ink-soft: #a6acbd; /* Lightened for the same reason: #727b8e on --panel measured 4.14:1, this is 5.70:1 (5.29:1 on --panel-2, which is the worst case it sits on). */ --ink-faint: #8a93a6; --line: #2a2f3a; --line-soft: #20242c; --brand: #ff4d61; --brand-ink: #ff8a97; --brand-bg: #2d151a; --good: #34d399; --good-bg: #0f2a20; --warn: #e0a23a; --warn-bg: #2c2310; --bad: #f4796d; --bad-bg: #2f1714; /* Already 6.22:1 on the dark tint — no adjustment needed. */ --bad-ink: #f4796d; --info: #6f9bff; --info-bg: #16213a; --neutral: #99a0af; --neutral-bg: #262b34; --solid: #e7e9f0; --solid-ink: #14161d; --solid-hover: #fff; --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 6px 20px rgb(0 0 0 / 30%); --shadow-lift: 0 6px 14px rgb(0 0 0 / 40%), 0 18px 44px rgb(0 0 0 / 50%); color-scheme: dark; } /* The few spots with literal colours need a dark-mode value. */ [data-theme="dark"] .topbar { background: rgb(14 16 20 / 82%); } [data-theme="dark"] .login-wrap { background: radial-gradient(1200px 500px at 50% -10%, #1b2230 0%, var(--bg) 60%); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Lexend Deca", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } .material-symbols-outlined { font-variation-settings: "opsz" 20, "wght" 400, "GRAD" 0, "FILL" 0; vertical-align: middle; } .mono { font-family: "Spline Sans Mono", ui-monospace, monospace; } /* ── App shell ───────────────────────────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 40; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 22px 14px; } .sidebar-brand .brand img { height: 26px; display: block; } .brand-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); background: var(--brand-bg); padding: 3px 8px; border-radius: 999px; } .nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 500; transition: background 0.15s, color 0.15s; } .nav-item .material-symbols-outlined { font-size: 21px; } .nav-item:hover { background: var(--line-soft); color: var(--ink); } .nav-item.active { background: var(--brand-bg); color: var(--brand-ink); font-weight: 600; } .nav-item.active .material-symbols-outlined { font-variation-settings: "FILL" 1; } .sidebar-foot { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--solid); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; } .who-text { display: flex; flex-direction: column; min-width: 0; } .who-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who-email { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logout { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--ink-soft); } .logout:hover { background: var(--bad-bg); color: var(--bad); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; background: rgb(244 246 249 / 82%); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 14px 26px; } .topbar-titles { min-width: 0; } .topbar-titles h1 { font-size: 21px; /* The detail-page title (an entity name) lives here; the full, untruncated name is always shown in the page body, so truncate it in the bar to keep a single-line header next to the search box even for long multilingual names. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-titles .sub { margin: 1px 0 0; color: var(--ink-soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-logo { display: none; margin-left: auto; } .topbar-logo img { height: 22px; } .hamburger { display: none; cursor: pointer; width: 40px; height: 40px; border-radius: var(--radius-sm); place-items: center; color: var(--ink); } .hamburger:hover { background: var(--line-soft); } .content { padding: 26px; max-width: 2100px; width: 100%; } .appfoot { margin-top: auto; padding: 16px 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; color: var(--ink-faint); font-size: 12px; } .nav-toggle-state, .scrim { display: none; } /* ── KPI cards ───────────────────────────────────────────────────────────── */ .kpi-grid { display: grid; gap: 14px; /* auto-fit (not auto-fill) so a short row of cards stretches to use the full width on large monitors instead of leaving empty tracks. */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 22px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .kpi-label { color: var(--ink-soft); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; } .kpi-label .material-symbols-outlined { font-size: 18px; color: var(--ink-faint); } .kpi-value { font-size: 30px; font-weight: 600; margin-top: 6px; letter-spacing: -0.02em; font-family: "Spline Sans Mono", monospace; } .kpi-foot { font-size: 12px; color: var(--ink-faint); margin-top: 4px; } .kpi-foot b { color: var(--ink-soft); font-weight: 600; } .kpi.accent::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); } /* ── Sections & panels ───────────────────────────────────────────────────── */ .section { margin-bottom: 26px; } /* A section sitting on its own below the two-column detail layout — the columns end at different heights, so it needs its own clearance above the heading. */ .section-standalone { margin-top: 30px; } /* Stacked blocks inside a panel (property setup): each one after the first gets its own rule + breathing space, without every block hard-coding the divider. */ .setup-block + .setup-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .setup-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; } .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .section-head h2 { font-size: 16px; } .section-head .hint { color: var(--ink-faint); font-size: 12.5px; } .section-head .spacer { flex: 1; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .panel-pad { padding: 18px 20px; } .panel + .panel { margin-top: 14px; } .cols { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; align-items: start; } .cols-even { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; } /* ── Pills / badges ──────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; opacity: 0.9; } .pill-good { color: var(--good); background: var(--good-bg); } .pill-warn { color: var(--warn); background: var(--warn-bg); } .pill-bad { color: var(--bad); background: var(--bad-bg); } .pill-info { color: var(--info); background: var(--info-bg); } .pill-neutral { color: var(--neutral); background: var(--neutral-bg); } .pill.plain::before { display: none; } /* ── Tables (responsive → stacked cards on mobile) ───────────────────────── */ .table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); /* Wide tables scroll horizontally inside the card instead of being clipped. */ overflow: auto; } table.rtable { width: 100%; border-collapse: collapse; font-size: 14px; } .rtable thead th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel-2); } .rtable tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .rtable tbody tr:last-child td { border-bottom: none; } .rtable tbody tr { transition: background 0.12s; } .rtable tbody tr:hover { background: var(--panel-2); } .rtable tr.clickable { cursor: pointer; } .rtable .num { font-family: "Spline Sans Mono", monospace; } .rtable .muted { color: var(--ink-faint); } .rtable .strong { font-weight: 600; } .cellstack { display: flex; flex-direction: column; line-height: 1.3; } .cellstack small { color: var(--ink-faint); font-size: 12px; } .entity { display: flex; align-items: center; gap: 11px; min-width: 0; } .entity .avatar.sq { border-radius: 9px; background: var(--brand-bg); color: var(--brand-ink); } .entity .avatar.co { border-radius: 9px; background: var(--info-bg); color: var(--info); } .entity-text { min-width: 0; } .entity-text .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entity-text .sb { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Toolbar: search + filter chips */ .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .search { position: relative; flex: 1; min-width: 200px; max-width: 380px; } .search .material-symbols-outlined { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 20px; } .search input { width: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--panel); color: var(--ink); } .search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); } .chips { display: flex; gap: 7px; flex-wrap: wrap; } .chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; } .chip:hover { border-color: var(--ink-faint); } .chip.active { background: var(--solid); color: #fff; border-color: var(--ink); } .chip .n { opacity: 0.6; margin-left: 4px; } .count-note { color: var(--ink-faint); font-size: 12.5px; } /* ── Detail page bits ────────────────────────────────────────────────────── */ .crumbs { display: flex; align-items: center; gap: 6px; color: var(--ink-faint); font-size: 13px; margin-bottom: 14px; } .crumbs a:hover { color: var(--brand); } .crumbs .material-symbols-outlined { font-size: 16px; } .detail-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .detail-head .big-avatar { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; font-weight: 600; background: var(--brand-bg); color: var(--brand-ink); flex: 0 0 auto; } .detail-head .big-avatar.co { background: var(--info-bg); color: var(--info); } .detail-head .dh-text h1 { font-size: 24px; overflow-wrap: anywhere; } .detail-head .dh-text .meta { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; } .detail-head .dh-actions { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .fact { background: var(--panel); padding: 14px 16px; } .fact .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; } .fact .v { font-size: 15px; margin-top: 4px; font-weight: 500; overflow-wrap: anywhere; } .fact .v.lg { font-size: 18px; } .dl { display: grid; grid-template-columns: 150px 1fr; gap: 0; } .dl dt { color: var(--ink-soft); font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .dl dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .dl dt:last-of-type, .dl dd:last-of-type { border-bottom: none; } /* Onboarding stepper */ .steps { display: flex; flex-direction: column; gap: 0; } .step { display: flex; gap: 13px; align-items: flex-start; position: relative; padding-bottom: 16px; } .step:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line); } .step .dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line-soft); color: var(--ink-faint); z-index: 1; } .step.done .dot { background: var(--good); color: #fff; } .step.done:not(:last-child)::before { background: var(--good); } .step .material-symbols-outlined { font-size: 17px; } .step .step-text .t { font-weight: 600; font-size: 14px; } .step .step-text .d { font-size: 12.5px; color: var(--ink-faint); } .step.pending .step-text .t { color: var(--ink-faint); font-weight: 500; } /* Progress bar */ .progress { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--good); border-radius: 999px; } .progress.warn > i { background: var(--warn); } .progress.bad > i { background: var(--bad); } /* Mini meters for KPI breakdowns */ .meter { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line-soft); } .meter > span { display: block; height: 100%; } .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); } .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } .empty { text-align: center; padding: 50px 20px; color: var(--ink-faint); } .empty .material-symbols-outlined { font-size: 40px; opacity: 0.5; display: block; margin: 0 auto 8px; } .notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; background: var(--info-bg); color: var(--info); } .notice.warn { background: var(--warn-bg); color: var(--warn); } .notice .material-symbols-outlined { font-size: 19px; } /* Breathing "online now" indicator */ .online-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: 0 0 auto; position: relative; } .online-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgb(15 157 107 / 55%); animation: breathe 1.9s ease-out infinite; } @keyframes breathe { 70% { box-shadow: 0 0 0 7px rgb(15 157 107 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(15 157 107 / 0%); } } /* Online badge anchored to an avatar's corner */ .avatar.wrap, .big-avatar.wrap { position: relative; overflow: visible; } .avatar .online-badge, .big-avatar .online-badge { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--good); border: 2px solid var(--panel); } .big-avatar .online-badge { width: 14px; height: 14px; } .avatar .online-badge::after, .big-avatar .online-badge::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 0 rgb(15 157 107 / 55%); animation: breathe 1.9s ease-out infinite; } .entity .nm .online-dot { margin-left: 6px; vertical-align: middle; } .linkish { color: var(--brand-ink); font-weight: 600; } .linkish:hover { text-decoration: underline; } .tiny { font-size: 12px; color: var(--ink-faint); } /* ── Login ───────────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 500px at 50% -10%, #fff 0%, var(--bg) 60%); } .login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lift); padding: 32px 30px; } .login-card .logo { height: 30px; display: block; margin-bottom: 4px; } .login-card .tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); background: var(--brand-bg); padding: 3px 9px; border-radius: 999px; margin-bottom: 20px; } .login-card h1 { font-size: 20px; margin-bottom: 4px; } .login-card p.lede { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 22px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .field input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; } .field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: none; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn:hover { background: var(--brand-ink); } .form-error { background: var(--bad-bg); color: var(--bad); padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; } .login-foot { text-align: center; margin-top: 18px; color: var(--ink-faint); font-size: 12px; } /* Anonymous (unbranded) login — neutral accent so the page reveals nothing. */ .login-anon .login-card h1 { margin-top: 4px; } .login-anon .btn { background: var(--solid); } .login-anon .btn:hover { background: var(--solid-hover); } .login-anon .field input:focus { border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgb(20 22 29 / 8%); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (width <= 980px) { .cols, .cols-even { /* minmax(0,1fr) — NOT 1fr — so a single column can shrink below its content's min-content (e.g. a row with a fixed-width nowrap status pill) instead of forcing horizontal page overflow on phones. */ grid-template-columns: minmax(0, 1fr); } } @media (width <= 860px) { .sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow-lift); } .nav-toggle-state:checked ~ .app .sidebar { transform: translateX(0); } .nav-toggle-state:checked ~ .app .scrim { display: block; position: fixed; inset: 0; background: rgb(17 20 28 / 40%); z-index: 35; } .hamburger { display: grid; } .topbar-logo { display: block; } .topbar-titles h1 { font-size: 18px; } .content { padding: 18px 16px; } .topbar { padding: 12px 16px; flex-wrap: wrap; } /* Global search drops to its own full-width row under the title on phones. */ .topsearch { order: 5; flex-basis: 100%; margin-left: 0; } /* Stacked-card tables */ .rtable, .rtable thead, .rtable tbody, .rtable th, .rtable td, .rtable tr { display: block; } .rtable thead { display: none; } .rtable tbody tr { padding: 12px 14px; border-bottom: 8px solid var(--bg); } .rtable tbody td { border: none; padding: 5px 0; display: flex; justify-content: space-between; gap: 14px; align-items: center; } .rtable tbody td::before { content: attr(data-label); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; flex: 0 0 auto; } .rtable tbody td.primary { padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); } .rtable tbody td.primary::before { display: none; } .rtable tbody td.primary .entity { width: 100%; } .dl { grid-template-columns: 1fr; } .dl dt { padding-bottom: 0; border: none; } .dl dd { padding-top: 2px; } .detail-head .dh-actions { margin-left: 0; width: 100%; } } @media (width <= 460px) { .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi-value { font-size: 24px; } } /* ── Expansion components (notes, timeline, funnel, health) ───────────────── */ .factors { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; } .factor { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); } .factor .material-symbols-outlined { font-size: 18px; } /* Timeline */ .tl { display: flex; flex-direction: column; } .tl-row { display: flex; gap: 12px; position: relative; padding-bottom: 14px; } .tl-row:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); } .tl-dot { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; background: var(--line-soft); color: var(--ink-faint); z-index: 1; } .tl-dot .material-symbols-outlined { font-size: 16px; } .tl-dot.tone-good { background: var(--good-bg); color: var(--good); } .tl-dot.tone-info { background: var(--info-bg); color: var(--info); } .tl-dot.tone-warn { background: var(--warn-bg); color: var(--warn); } .tl-dot.tone-bad { background: var(--bad-bg); color: var(--bad); } .tl-label { font-size: 13.5px; font-weight: 500; } /* Funnel */ .funnel { display: flex; flex-direction: column; gap: 9px; } .funnel-row { display: grid; grid-template-columns: 160px 1fr 130px; align-items: center; gap: 12px; } .funnel-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); } .funnel-track { background: var(--line-soft); border-radius: 8px; overflow: hidden; } .funnel-bar { background: linear-gradient(90deg, var(--brand), var(--brand-ink)); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; min-width: 28px; display: flex; justify-content: flex-end; } .funnel-pct { text-align: right; } /* Notes + owner */ .note-form { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; } .note-form textarea { flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; resize: vertical; } .note-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); } .btn-sm { display: inline-flex; align-items: center; gap: 5px; border: none; background: var(--solid); color: #fff; border-radius: var(--radius-sm); padding: 8px 14px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; } .btn-sm:hover { background: var(--solid-hover); } /* Secondary choice in a set of buttons (the PMS provider / environment pickers) — the unselected options recede so the current one reads as chosen. */ .btn-sm.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .btn-sm.ghost:hover { background: var(--panel-soft, transparent); color: var(--ink); border-color: var(--ink-soft); } .note { border-top: 1px solid var(--line-soft); padding: 9px 0; } .note-body { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; } .note-meta { margin-top: 3px; } .link-btn { border: none; background: none; color: var(--bad); cursor: pointer; font: inherit; font-size: 12px; padding: 0 0 0 4px; } .link-btn:hover { text-decoration: underline; } .owner-form select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; background: var(--panel); max-width: 260px; } .flash { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } .cohort-table td.num, .cohort-table th.num { text-align: right; font-family: "Spline Sans Mono", monospace; } /* Pipeline board */ .board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .board-col { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; } .board-col-head { padding: 11px 12px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); } .board-col-head .n { margin-left: auto; color: var(--ink-faint); } .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; } .dot.tone-good { background: var(--good); } .dot.tone-warn { background: var(--warn); } .dot.tone-bad { background: var(--bad); } .dot.tone-info { background: var(--info); } .dot.tone-neutral { background: var(--neutral); } .board-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; /* A busy stage can hold hundreds of accounts — scroll the column instead of running the whole board off the page. */ max-height: 640px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .board-col-body::-webkit-scrollbar { width: 8px; } .board-col-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; } .board-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; box-shadow: var(--shadow); } .board-card:hover { box-shadow: var(--shadow-lift); } .board-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .board-card-top .nm { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-card-foot { margin-top: 5px; display: flex; gap: 5px; } @media (width <= 980px) { .board { grid-template-columns: 1fr 1fr; } } @media (width <= 560px) { .board { grid-template-columns: 1fr; } } /* System / audit rows */ .integrity-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line-soft); } .integrity-row:first-child { border-top: 0; } .integrity-row .material-symbols-outlined { font-size: 20px; } .integrity-label { flex: 1; font-size: 13.5px; } .audit-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line-soft); } .audit-row:first-child { border-top: 0; } .audit-row .material-symbols-outlined { font-size: 19px; color: var(--ink-soft); margin-top: 1px; } .audit-text { min-width: 0; flex: 1; font-size: 13px; } .audit-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; } .audit-tag .material-symbols-outlined { font-size: 17px; color: var(--ink-faint); } /* List badges: internal notes count + admin owner chip */ .note-badge { display: inline-flex; align-items: center; gap: 3px; margin: 5px 0 0 51px; font-size: 11.5px; color: var(--ink-faint); } .note-badge .material-symbols-outlined { font-size: 15px; } .owner-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--brand, var(--info)); font-size: 11.5px; } .owner-chip .material-symbols-outlined { font-size: 14px; } /* Write-action forms (extend trial, resend invite, requeue email, force scrape) */ .act-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .act-form { display: inline-flex; align-items: center; gap: 7px; } .act-form .btn-sm { display: inline-flex; align-items: center; gap: 5px; } .act-form .btn-sm .material-symbols-outlined { font-size: 16px; } .trial-form input[type="number"] { width: 66px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; } .trial-form label, .rename-form label, .nights-form label { color: var(--ink-soft); } /* Rename / night-length sit in the narrow detail rail, so they wrap rather than overflow it — the text field shrinks instead of pushing the button out. */ .rename-form, .nights-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rename-form input[type="text"] { flex: 1 1 150px; min-width: 0; } /* Fixed-height, scrollable lists for busy account detail pages. .table-wrap.scroll-y → tables (sticky header stays put while rows scroll). .scrollbox → non-table lists (timeline, access list, etc.). */ .table-wrap.scroll-y { max-height: 440px; } .table-wrap.scroll-y thead th { position: sticky; top: 0; z-index: 2; } .scrollbox { max-height: 420px; overflow-y: auto; } .table-wrap, .scrollbox { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .table-wrap::-webkit-scrollbar, .scrollbox::-webkit-scrollbar { width: 9px; height: 9px; } .table-wrap::-webkit-scrollbar-thumb, .scrollbox::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; } .table-wrap::-webkit-scrollbar-thumb:hover, .scrollbox::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } /* Tracked competitor URLs (property page) */ .url-list { display: flex; flex-direction: column; } .url-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); /* wrap only exists so the "edit" panel (.url-edit[open]) can drop to its own full-width line; the name/open/edit stay on one line otherwise. */ flex-wrap: wrap; } .url-row:first-child { border-top: 0; } /* The name block fills the row and truncates, so the actions stay pinned to the right edge on a single line for any name length. flex-basis MUST be 0 (the `flex:1` shorthand): with flex-wrap on, line-breaking uses the basis, so a non-zero basis would let a long name grab its own line and push "open" down. */ .url-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } /* Every line of the name block truncates rather than pushing the row wider. */ .url-text > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .url-name { font-size: 13.5px; font-weight: 500; } .url-host { color: var(--ink-faint); } /* Row actions ("open", "edit") never grow or shrink away from the right edge. */ .url-row > a.linkish, .url-row > .url-edit { flex: 0 0 auto; } /* Create/move forms (Stage-2 admin write UIs) */ .btn-sm .material-symbols-outlined { font-size: 16px; } .create-page .btn { width: auto; padding: 11px 22px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-soft); } .form-grid label.span2 { grid-column: 1 / -1; } .form-grid input, .form-grid select, .move-form select, .rename-form input[type="text"], .nights-form select, .create-row input, .create-row select, .copy-box input, .hotel-row input { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px; } .form-grid input:focus, .form-grid select:focus, .hotel-row input:focus, .rename-form input[type="text"]:focus, .nights-form select:focus, .move-form select:focus { outline: none; border-color: var(--brand); } .create-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .create-row input { flex: 1 1 140px; min-width: 0; } .move-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* The target-company select shrinks (rather than overflowing) on narrow screens — selects otherwise hold their longest option's width. */ .move-form select { flex: 1 1 auto; min-width: 0; } .hotel-row { display: grid; grid-template-columns: 70px 1fr 1fr 1.6fr auto; gap: 8px; align-items: center; margin-bottom: 8px; } .hotel-row .radio-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-faint); } .copy-box { display: flex; gap: 8px; margin-top: 8px; } .copy-box input { flex: 1; font-family: "Spline Sans Mono", monospace; font-size: 12px; } @media (width <= 700px) { .form-grid { grid-template-columns: 1fr; } .hotel-row { grid-template-columns: 1fr; } } /* Tracked-URL editor (A12) */ .url-edit > summary, .url-add > summary { cursor: pointer; list-style: none; color: var(--info); } .url-edit > summary::-webkit-details-marker, .url-add > summary::-webkit-details-marker { display: none; } .url-edit[open] { flex: 1 1 100%; margin-top: 8px; } .url-edit-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .url-edit-form { display: flex; gap: 6px; align-items: center; } .url-edit-form input { flex: 1; min-width: 0; } .url-add > summary { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--solid); color: #fff; font-size: 13px; font-weight: 600; } .link-btn.danger { color: var(--bad); } /* A count that belongs to the heading rather than buried in the hint text. */ .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--ink-soft); font-size: 11.5px; font-weight: 600; } /* ── The PMS credentials table ─────────────────────────────────────────────── Scoped to this one table rather than every .rtable: fixed column widths are right here (the row changes height when a confirmation opens, and elastic columns re-flowed the whole table when it did) and wrong for the list pages, whose content varies far more. */ .rtable.pms-table { table-layout: fixed; } .rtable.pms-table thead th:nth-child(1) { width: 29%; } .rtable.pms-table thead th:nth-child(2) { width: 9%; } .rtable.pms-table thead th:nth-child(3) { width: 21%; } .rtable.pms-table thead th:nth-child(4) { width: 14%; } .rtable.pms-table thead th:nth-child(5) { width: 17%; } .rtable th.col-action { width: 10%; min-width: 104px; text-align: right; white-space: nowrap; } /* Every row top-aligns, not just an expanded one. Two-line cells (name over reference, date over "checked …") then start on the same line as the pill beside them. */ .rtable.pms-table tbody td { vertical-align: top; } .rtable.pms-table tbody td:last-child { text-align: right; } /* A reference is long, opaque and fixed-width — let it clip rather than force the column wider than the name above it. */ .rtable.pms-table tbody td .mono { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Flexing the itself breaks its border rendering, so these get an inner wrapper. Named tag rather than chip: .chip is already the clickable filter control on the list pages, and reusing the name restyled those. */ .tag-row { display: flex; flex-wrap: wrap; gap: 5px; } .tag { padding: 2px 7px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel-2); color: var(--ink-soft); font-size: 11.5px; font-weight: 500; } /* The table and the panel below it are one card. */ .pms-card > .table-wrap { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .pms-card > .panel.pms-manage { margin-top: 0; border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; } /* Adding a credential and the explanation of what that means share that panel. */ .pms-manage-note { max-width: 70ch; margin: 0; } .pms-help { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line-soft); } .pms-help > summary { cursor: pointer; color: var(--ink-soft); font-size: 12px; font-weight: 600; list-style: none; } .pms-help > summary::marker, .pms-help > summary::-webkit-details-marker { display: none; } .pms-help > summary::after { content: "›"; display: inline-block; margin-left: 6px; transition: transform 0.15s ease; } .pms-help[open] > summary::after { transform: rotate(90deg); } .pms-help .pms-manage-note { margin-top: 8px; } /* The toggle says what it will do next, and the + turns into an x. */ .url-add > summary .lbl-open, .url-add[open] > summary .lbl-closed { display: none; } .url-add[open] > summary .lbl-open { display: inline; } .url-add > summary .material-symbols-outlined { transition: transform 0.15s ease; } .url-add[open] > summary .material-symbols-outlined { transform: rotate(45deg); } /* ── Add a PMS credential ──────────────────────────────────────────────────── One provider at a time. The two feeds take entirely different fields, and showing both at once made the panel read as one long form with a duplicate submit button in the middle of it. The switch is a pair of radios styled as a segmented control, with :has() hiding the other form — no JS, and because the radios sit OUTSIDE both forms they are never submitted and the hidden form's required fields never block the visible one. */ .pms-pick { position: absolute; opacity: 0; pointer-events: none; } .pms-provider { display: inline-flex; margin: 2px 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .pms-provider label { padding: 7px 18px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; } .pms-provider label + label { border-left: 1px solid var(--line); } .pms-add-body:has(.pms-pick.mews:checked) [data-provider="stayntouch"], .pms-add-body:has(.pms-pick.snt:checked) [data-provider="mews"] { display: none; } .pms-add-body:has(.pms-pick.mews:checked) label[for="pmsPickMews"], .pms-add-body:has(.pms-pick.snt:checked) label[for="pmsPickSnt"] { background: var(--solid); color: var(--solid-ink); } /* Labelled rather than placeholder-only: a placeholder disappears the moment something is typed, and two long opaque tokens side by side are impossible to tell apart afterwards. */ .pms-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; } .pms-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; } .pms-field > span:first-child { font-size: 12px; font-weight: 600; color: var(--ink-soft); } .pms-field input { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px; } .pms-field input:focus { border-color: var(--info); outline: none; } /* Never pre-ticked, and never silent about it: the wan refuses a credential that declares no product, because assuming "both" is what once had Explorer reporting itself as connected while every call it made was denied. */ .pms-serves { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 15px 0 14px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel-2); } .pms-serves > span:first-child { font-size: 12px; font-weight: 600; color: var(--ink-soft); } .pms-serves label { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; } .pms-foot { margin-top: 10px; } /* ── Typed confirmation ────────────────────────────────────────────────────── For an action a mis-click must not be able to do. The button starts disabled and only arms once the word is typed exactly (admin.js). In the credentials table it is ANCHORED to the row's action cell rather than laid out inside it: in flow it made the row three hundred pixels tall and pushed the rest of the row about. Floating above, the row does not change height at all. Note the trade that buys. An absolutely-positioned box is clipped by any ancestor that scrolls, so that table gives up its .scroll-y cap (and with it the sticky header). Fine while a company has a handful of credentials — the page scrolls instead. If that stops being true the fix is a top-layer popover, not putting the box back in the flow. */ .pms-card .table-wrap.scroll-y { max-height: none; overflow: visible; } .rtable.pms-table td:last-child .url-edit { position: relative; } .confirm-type { display: grid; gap: 8px; width: 320px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); text-align: left; } .rtable.pms-table .confirm-type { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; margin: 0; box-shadow: var(--shadow-lift); } .confirm-type > * { min-width: 0; } .confirm-type input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; } /* Tinted rather than filled. --bad is a light red in dark mode, so a solid button with white text on it fails contrast in the one place that most needs reading clearly. */ .confirm-type button[type="submit"] { width: 100%; border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-bg); color: var(--bad-ink); font-weight: 600; } .confirm-type button[type="submit"]:hover:not([disabled]) { background: color-mix(in srgb, var(--bad) 16%, var(--bad-bg)); } .confirm-type button[disabled] { opacity: 0.45; cursor: not-allowed; } .confirm-type .confirm-word { font-weight: 600; } /* Destructive intent on hover, without shouting before it is hovered. */ .rtable.pms-table .url-edit > summary:hover { border-color: var(--bad-bg); background: var(--bad-bg); color: var(--bad); } /* ── Global quick-search (top bar) ───────────────────────────────────────── */ .topsearch { position: relative; margin-left: auto; flex: 0 1 360px; min-width: 0; } .topsearch > .material-symbols-outlined { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 20px; pointer-events: none; } .topsearch input { width: 100%; padding: 9px 12px 9px 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 14px; background: var(--panel); color: var(--ink); } .topsearch input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); } .topsearch-panel { position: absolute; top: calc(100% + 6px); right: 0; left: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 6px; max-height: min(70vh, 520px); overflow-y: auto; z-index: 60; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .ts-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); padding: 9px 10px 4px; } .ts-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); } .ts-item:hover, .ts-item.active { background: var(--line-soft); } .ts-item .avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; } .ts-item .avatar.sq { border-radius: 9px; background: var(--brand-bg); color: var(--brand-ink); } .ts-item .avatar.co { border-radius: 9px; background: var(--info-bg); color: var(--info); } .ts-item-text { min-width: 0; } .ts-item .nm { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-item .sb { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-empty { padding: 18px 12px; text-align: center; color: var(--ink-faint); font-size: 13px; } /* ══ UI/UX pass: large screens, styled native controls, overflow safety ════ */ /* Use the width on large monitors instead of stranding a narrow column in grey. Roomier gutters keep content off the edges at 2k/4k. */ @media (width >= 1700px) { .content { padding: 32px 40px; } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } /* Detail-page layout: wide data tables in the main column, narrow context (owner / notes / lifecycle) in a sticky rail beside them. Single column on tablet/phone; splits once there's room for both. */ .detail-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; } .detail-main { min-width: 0; } .detail-main > .section:last-child, .detail-rail > .section:last-child { margin-bottom: 0; } @media (width >= 1080px) { .detail-cols { /* Rail held to a readable width so the main column gets the rest of a 2k display rather than the rail ballooning. */ grid-template-columns: minmax(0, 1fr) clamp(300px, 26%, 420px); } .detail-rail { position: sticky; top: 86px; } } /* On a detail page the right-hand rail (owner / notes / health) is short while the main column is long — pin it so it follows the scroll instead of leaving a tall blank gap beside the timeline and tables. */ @media (width >= 981px) { .cols > :last-child { position: sticky; top: 86px; align-self: start; } } /* Forms read better at a fixed measure than stretched across a 2k display. */ .create-page .panel { max-width: 960px; } /* Single-entity detail pages (company / property / user) hold focused, mostly narrow content. Rather than stretch a key-value list across a 2k monitor (the "sea of blank space" effect), give them a comfortable centred measure. List, board and dashboard pages keep the full width for scanning. */ .content:has(.detail-head), .page-narrow { max-width: 1820px; margin-inline: auto; } /* ── Custom chevron is an SVG with a baked-in stroke colour; swap it for a lighter one in dark mode so it stays visible on the dark field. */ [data-theme="dark"] .form-grid select, [data-theme="dark"] .owner-form select, [data-theme="dark"] .move-form select, [data-theme="dark"] .nights-form select, [data-theme="dark"] .create-row select, [data-theme="dark"] select.styled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a6acbd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* In dark mode the Beacon wordmark would be near-invisible (dark on dark), so render it solid white. brightness(0)=all black, invert(1)=all white. */ [data-theme="dark"] .sidebar-brand .brand img, [data-theme="dark"] .topbar-logo img { filter: brightness(0) invert(1); } /* Funnel rows stack the label above the bar on small screens — the fixed 160px + 130px side columns overflow at ~320–360px otherwise. */ @media (width <= 560px) { .funnel-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .funnel-label { grid-column: 1 / -1; } }