/* RMG shared style: the Studio skin (docs/design/skins/studio/, prompt 46), loaded after Purple and purple-overrides.css on every page. Look only: overrides the vendor theme, never edits it, and changes nothing a page shows or does. Light tokens on :root, dark on [data-theme="dark"] (set on by auth.js from the saved choice, else the system setting). Until auth.js runs, the media query below already follows the system, so a dark system never flashes light. Bootstrap's own --bs-* variables are mapped onto the tokens, so its tables, modals, borders and selects follow the theme too. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { --bg: #F3EEE7; --surface: #FFFDFA; --surface-2: #F8F3EC; --line: #E6DED3; --ink: #2B2622; --muted: #675D55; --control-line: #8F8478; /* form-field outline: 3.5:1 on --surface (WCAG 3:1 for controls) */ --teal: #0E6B66; --teal-ink: #FFFFFF; --teal-soft: #DCEEEA; --coral: #C4553A; --coral-soft: #FBE3D9; --coral-ink: #93391F; --sand: #F7E9CF; --sand-ink: #85570F; --sage: #E1EEDF; --sage-ink: #2F6A3A; --sky: #DDEBF5; --sky-ink: #215E87; --rose: #F8E1DE; --rose-ink: #A13C33; --good: #2D7A4B; --good-soft: #E2F1E6; --warn: #8A5806; --warn-soft: #FBEDD0; --bad: #B3362F; --bad-soft: #FBE2DF; --bar-track: #ECE4DA; --bar-good: #2D7A4B; --bar-mid: #A86E05; --bar-bad: #C2413A; --target-mark: #2B2622; --shadow: 0 1px 2px rgba(74, 52, 30, .06), 0 8px 24px -10px rgba(74, 52, 30, .16); --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, SFMono-Regular, Consolas, monospace; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1E1C1A; --surface: #282522; --surface-2: #302C28; --line: #3D3833; --ink: #F2ECE4; --muted: #BCB1A5; --control-line: #7D7369; --teal: #5FC4B8; --teal-ink: #0E201E; --teal-soft: #203A37; --coral: #F09A80; --coral-soft: #44281F; --coral-ink: #F6B19C; --sand: #3A3122; --sand-ink: #E9C47E; --sage: #263327; --sage-ink: #A2D4A7; --sky: #22303A; --sky-ink: #93C5E7; --rose: #3C2727; --rose-ink: #F0A99F; --good: #79D29E; --good-soft: #20342A; --warn: #EBC06A; --warn-soft: #3A3020; --bad: #F2897F; --bad-soft: #402523; --bar-track: #3B3631; --bar-good: #5BBF85; --bar-mid: #D9A441; --bar-bad: #E57368; --target-mark: #F2ECE4; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -12px rgba(0, 0, 0, .55); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #1E1C1A; --surface: #282522; --surface-2: #302C28; --line: #3D3833; --ink: #F2ECE4; --muted: #BCB1A5; --control-line: #7D7369; --teal: #5FC4B8; --teal-ink: #0E201E; --teal-soft: #203A37; --coral: #F09A80; --coral-soft: #44281F; --coral-ink: #F6B19C; --sand: #3A3122; --sand-ink: #E9C47E; --sage: #263327; --sage-ink: #A2D4A7; --sky: #22303A; --sky-ink: #93C5E7; --rose: #3C2727; --rose-ink: #F0A99F; --good: #79D29E; --good-soft: #20342A; --warn: #EBC06A; --warn-soft: #3A3020; --bad: #F2897F; --bad-soft: #402523; --bar-track: #3B3631; --bar-good: #5BBF85; --bar-mid: #D9A441; --bar-bad: #E57368; --target-mark: #F2ECE4; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -12px rgba(0, 0, 0, .55); color-scheme: dark; } /* Bootstrap 5.3 reads these; :root[...] outranks its own [data-bs-theme=dark]. */ :root, :root[data-theme] { --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-heading-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-border-radius: 12px; --bs-body-font-family: var(--font); } /* Type: Plus Jakarta Sans everywhere Purple set Ubuntu. Icon fonts keep their own. */ body, .navbar, .sidebar, .btn, .badge, .form-select, .form-control, .footer, input, select, textarea, button, .card .card-title, .card .card-description, .card .card-subtitle, .table thead th, .font-weight-bold, .font-weight-normal, .font-weight-light, .h6, .sidebar .nav .nav-item.active > .nav-link .menu-title, h1, h2, h3, h4, h5, h6 { font-family: var(--font); } code, kbd, pre, .mono { font-family: var(--mono); } code { color: var(--ink); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; } body { background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, strong, b { color: inherit; } a { color: var(--teal); } a:hover { color: var(--teal); filter: brightness(1.15); } .text-muted { color: var(--muted) !important; } .text-danger { color: var(--bad) !important; } .text-success { color: var(--good) !important; } /* Bootstrap's .btn:focus-visible sets outline 0; keep one visible ring everywhere. */ :focus-visible, .btn:focus-visible, .nav-link:focus-visible, .seg button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } small, .small { font-size: 14px; } /* Page */ .content-wrapper, .main-panel, .page-body-wrapper { background: var(--bg); } .content-wrapper { padding: 20px 24px 32px; } .page-header { margin: 4px 0 18px; } .page-title, .page-header .page-title { color: var(--ink); font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; } .grid-margin { margin-bottom: 18px; } /* Top bar: on the page background, like the mockup */ .navbar, .navbar .navbar-brand-wrapper { background: var(--bg); } .navbar { border-bottom: 0; box-shadow: none; } .navbar .navbar-brand-wrapper .navbar-brand { color: var(--ink); font-weight: 800; font-size: 17px; text-decoration: none; display: flex; align-items: center; gap: 10px; padding-left: 28px; } .navbar .navbar-brand-wrapper .navbar-brand:hover, .navbar .navbar-brand-wrapper .navbar-brand:focus { color: var(--ink); } .navbar .navbar-brand-wrapper .brand-logo-mini { padding-left: 0; justify-content: center; } .brand-mark { position: relative; width: 34px; height: 34px; border-radius: 11px; background: var(--teal); color: var(--teal-ink); display: inline-grid; place-items: center; font-size: 15px; line-height: 1; flex: none; } .brand-mark::after { content: ""; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--coral); border: 2px solid var(--bg); } .navbar .navbar-menu-wrapper { color: var(--muted); } .navbar .navbar-menu-wrapper .navbar-toggler { color: var(--ink); } .navbar .navbar-nav-right .nav-item > span { color: var(--muted); font-size: 14px; } .navbar .navbar-nav-right strong { color: var(--ink); font-weight: 600; } .navbar .btn { white-space: nowrap; } .navbar .navbar-nav-right .nav-item > span { display: block; line-height: 1.3; } /* Bootstrap's d-md-block (!important) beat [hidden], so an empty "Operator" label showed. */ #brand-fixed[hidden] { display: none !important; } /* Same fix for the d-flex rows in the Set password box (prompt 51). */ #pw-modal [hidden] { display: none !important; } @media (max-width: 1199px) { .navbar .theme-toggle .theme-label { display: none; } } /* Sidebar: a floating rounded card, pill links, teal-tint active item */ @media (min-width: 992px) { .sidebar { background: transparent; } .sidebar > .nav { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); margin: 6px 8px 24px 16px; padding: 12px 0 16px; } } @media (max-width: 991px) { .sidebar { background: var(--surface); box-shadow: var(--shadow); } .sidebar > .nav { margin-bottom: 24px; } } .sidebar .nav .nav-item { padding: 0 10px; } .sidebar .nav .nav-item .nav-link { color: var(--ink); padding: 8px 14px; margin: 2px 0; border-radius: 999px; min-height: 40px; } .sidebar .nav .nav-item .nav-link .menu-title { font-size: 14px; line-height: 20px; font-weight: 500; } .sidebar .nav .nav-item .nav-link i.menu-icon, .sidebar .nav .nav-item .nav-link i.menu-arrow { color: var(--muted); } .sidebar .nav .nav-item:hover, .sidebar .nav .nav-item.active { background: transparent; } .sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.nav-profile) > .nav-link, .sidebar .nav .nav-item .nav-link:hover { background: var(--surface-2); color: var(--ink); } .sidebar .nav .nav-item.active > .nav-link, .sidebar .nav:not(.sub-menu) > .nav-item.active:hover > .nav-link { background: var(--teal-soft); color: var(--teal); } .sidebar .nav .nav-item.active > .nav-link .menu-title, .sidebar .nav .nav-item.active > .nav-link i { color: var(--teal); font-weight: 700; } .sidebar .nav.sub-menu { padding: 0 0 4px 12px; } .sidebar .nav.sub-menu .nav-item { padding: 0; } .sidebar .nav.sub-menu .nav-item .nav-link { color: var(--ink); font-size: 14px; line-height: 20px; padding: 8px 12px 8px 28px; } .sidebar .nav.sub-menu .nav-item .nav-link:before { color: var(--muted); left: 12px; } .sidebar .nav.sub-menu .nav-item .nav-link.active { color: var(--teal); font-weight: 700; background: var(--teal-soft); } .sidebar .nav .nav-item.nav-section { padding: 14px 24px 4px; font-size: 14px; font-weight: 600; color: var(--muted); pointer-events: none; } .sidebar .nav .nav-item.nav-section:first-child { padding-top: 6px; } /* A heading shows only while at least one link under it is visible (links are permission-gated). */ #sidebar:not(:has(.nav-item[data-group="overview"]:not([hidden]))) .nav-section[data-group="overview"], #sidebar:not(:has(.nav-item[data-group="analytics"]:not([hidden]))) .nav-section[data-group="analytics"], #sidebar:not(:has(.nav-item[data-group="team"]:not([hidden]))) .nav-section[data-group="team"], #sidebar:not(:has(.nav-item[data-group="insights"]:not([hidden]))) .nav-section[data-group="insights"] { display: none; } /* The open Reports group is marked active by Purple's misc.js; keep the full tint for the page itself. */ .sidebar .nav .nav-item.active:has(.sub-menu) > .nav-link { background: var(--surface-2); color: var(--ink); } .sidebar .nav .nav-item.active:has(.sub-menu) > .nav-link .menu-title, .sidebar .nav .nav-item.active:has(.sub-menu) > .nav-link i { color: var(--ink); } /* Cards */ .card { border: 0; border-radius: 18px; box-shadow: var(--shadow); background: var(--surface); color: var(--ink); } .card .card-body { padding: 22px 24px; } .card .card-title { color: var(--ink); font-size: 18px; line-height: 1.3; font-weight: 700; text-transform: none; margin-bottom: 8px; } .card .card-description { color: var(--muted); font-size: 14px; line-height: 20px; margin-bottom: 16px; } .card .card { box-shadow: none; border: 1px solid var(--line); } .card[class*="c-"] .card-title > .mdi { color: var(--tint-ink); } .c-blue { --tint: var(--sky); --tint-ink: var(--sky-ink); } .c-teal { --tint: var(--sage); --tint-ink: var(--sage-ink); } .c-orange { --tint: var(--sand); --tint-ink: var(--sand-ink); } .c-violet { --tint: var(--rose); --tint-ink: var(--rose-ink); } .c-pink { --tint: var(--rose); --tint-ink: var(--rose-ink); } .c-slate { --tint: var(--surface-2); --tint-ink: var(--muted); } /* KPI tiles: each in its own soft tint, round icon */ .card.kpi { background: var(--tint, var(--sky)); box-shadow: none; } .card.kpi .card-body { padding: 18px 20px; } .card.kpi .card-title { font-size: 14px; font-weight: 600; color: var(--ink); } .card.kpi h2 { font-size: 30px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; } .kpi .kpi-top { display: flex; align-items: center; gap: 10px; } .kpi .chip { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-weight: 700; background: var(--surface); color: var(--tint-ink, var(--sky-ink)); } .kpi .label { font-size: 14px; color: var(--ink); font-weight: 600; } .kpi .value { font-size: 30px; line-height: 1.25; font-weight: 800; margin-top: 10px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .kpi .sub { font-size: 14px; color: var(--muted); margin-top: 4px; } /* Buttons: pills. Colour meaning kept: primary teal, success green, danger red, warning amber. */ .btn { font-weight: 600; font-size: 14px; border-radius: 999px; border: 1.5px solid var(--line); padding: 9px 18px; line-height: 1.3; } .btn-sm { font-size: 14px; padding: 6px 14px; } .btn-lg { font-size: 15px; padding: 12px 22px; } /* `.btn.` and :focus/:active: Purple paints gradient-button text #fff at (0,2,0)-(0,3,0). */ .btn.btn-gradient-primary, .btn.btn-gradient-success, .btn.btn-gradient-danger, .btn.btn-gradient-warning, .btn.btn-gradient-dark, .btn.btn-gradient-primary:not([disabled]):not(.disabled):active { background: var(--fill, var(--teal)); border: 1.5px solid var(--fill, var(--teal)); color: var(--teal-ink); } .btn.btn-gradient-success { --fill: var(--good); } .btn.btn-gradient-danger { --fill: var(--bad); } .btn.btn-gradient-warning { --fill: var(--warn); } .btn.btn-gradient-dark { --fill: var(--ink); } .btn.btn-gradient-primary:hover, .btn.btn-gradient-success:hover, .btn.btn-gradient-danger:hover, .btn.btn-gradient-warning:hover, .btn.btn-gradient-dark:hover, .btn.btn-gradient-primary:focus, .btn.btn-gradient-success:focus, .btn.btn-gradient-danger:focus, .btn.btn-gradient-warning:focus, .btn.btn-gradient-dark:focus { filter: brightness(1.08); opacity: 1; color: var(--teal-ink); } .btn.btn-gradient-dark, .btn.btn-gradient-dark:hover, .btn.btn-gradient-dark:focus { color: var(--surface); } .btn.btn-gradient-info, .btn.btn-gradient-info:not([disabled]):not(.disabled):active, .btn.btn-outline-primary { background: var(--surface); border: 1.5px solid var(--teal); color: var(--teal); } .btn.btn-gradient-info:hover, .btn.btn-gradient-info:focus, .btn.btn-outline-primary:hover { background: var(--teal-soft); opacity: 1; color: var(--teal); border-color: var(--teal); } .btn.btn-gradient-info.btn-gradient-danger, .btn.btn-gradient-info.btn-gradient-danger:hover { background: var(--bad); border-color: var(--bad); color: var(--teal-ink); } .btn-outline-secondary, .btn-light, .btn-outline-light { color: var(--ink); border-color: var(--line); background: var(--surface); } .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-light:hover { background: var(--surface-2); color: var(--ink); border-color: var(--muted); } .btn-outline-danger { color: var(--bad); border-color: var(--bad); background: var(--surface); } .btn-outline-danger:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } .btn-link { color: var(--teal); border-color: transparent; } /* Forms */ label, .form-label { font-size: 14px; font-weight: 600; color: var(--ink); } .form-control, .form-select, textarea.form-control, select.form-control, select.form-select { border: 1.5px solid var(--control-line); border-radius: 14px; color: var(--ink); background-color: var(--surface); font-size: 15px; font-weight: 500; min-height: 44px; } select.form-control, select.form-select { border-radius: 999px; padding-right: 36px; } .form-control-sm, .form-select-sm, select.form-select-sm { min-height: 36px; font-size: 14px; } .form-control-lg { min-height: 48px; } .form-control:focus, .form-select:focus, textarea.form-control:focus, select.form-control:focus, select.form-select:focus { border-color: var(--teal); background-color: var(--surface); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent); } .form-control::placeholder { color: var(--muted); opacity: .85; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); border-color: var(--line); } .form-control::file-selector-button { background: var(--surface-2); color: var(--ink); } input[type="date"] { color-scheme: inherit; } /* Purple hides the native box and draws .input-helper; recolour it and give it a focus ring. */ .form-check .form-check-label input[type=checkbox] + .input-helper:before, .form-check .form-check-label input[type=radio] + .input-helper:before { border-color: var(--control-line); } .form-check .form-check-label input[type=checkbox]:checked + .input-helper:before, .form-check .form-check-label input[type=radio]:checked + .input-helper:before { background: var(--teal); border-color: var(--teal); } .form-check .form-check-label input[type=checkbox] + .input-helper:after { color: var(--teal-ink); } .form-check .form-check-label input[type=radio] + .input-helper:after { background: var(--teal-ink); } .form-check .form-check-label input:focus-visible + .input-helper:before { outline: 2px solid var(--teal); outline-offset: 2px; } .form-check-input { border-color: var(--control-line); background-color: var(--surface); } .form-check-input:checked { background-color: var(--teal); border-color: var(--teal); } /* Tables: numbers right-aligned where the header carries .num */ .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; } .table thead th { background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 600; text-transform: none; border-bottom: 1px solid var(--line); padding: 12px 14px; line-height: 1.3; } .table thead th:first-child { border-top-left-radius: 12px; } .table thead th:last-child { border-top-right-radius: 12px; } .table td { padding: 12px 14px; border-color: var(--line); vertical-align: middle; font-size: 14px; line-height: 1.4; } .table-sm td, .table-sm thead th { padding: 8px 10px; } .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--surface-2); --bs-table-color-state: var(--ink); --bs-table-accent-bg: var(--surface-2); } .table-borderless td { border: 0; } /* Purple greys every cell of a .table-hover table (#808080: 3.9:1, under AA). */ .table-hover tbody tr:hover, .table-hover tbody td { color: var(--ink); } th.num { text-align: right; } table:has(> thead th.num:nth-child(1)) > tbody > tr > td:nth-child(1), table:has(> thead th.num:nth-child(2)) > tbody > tr > td:nth-child(2), table:has(> thead th.num:nth-child(3)) > tbody > tr > td:nth-child(3), table:has(> thead th.num:nth-child(4)) > tbody > tr > td:nth-child(4), table:has(> thead th.num:nth-child(5)) > tbody > tr > td:nth-child(5), table:has(> thead th.num:nth-child(6)) > tbody > tr > td:nth-child(6), table:has(> thead th.num:nth-child(7)) > tbody > tr > td:nth-child(7), table:has(> thead th.num:nth-child(8)) > tbody > tr > td:nth-child(8), table:has(> thead th.num:nth-child(9)) > tbody > tr > td:nth-child(9), table:has(> thead th.num:nth-child(10)) > tbody > tr > td:nth-child(10), table:has(> thead th.num:nth-child(11)) > tbody > tr > td:nth-child(11), table:has(> thead th.num:nth-child(12)) > tbody > tr > td:nth-child(12), table:has(> thead th.num:nth-child(13)) > tbody > tr > td:nth-child(13), table:has(> thead th.num:nth-child(14)) > tbody > tr > td:nth-child(14), table:has(> thead th.num:nth-child(15)) > tbody > tr > td:nth-child(15), table:has(> thead th.num:nth-child(16)) > tbody > tr > td:nth-child(16), table:has(> thead th.num:nth-child(17)) > tbody > tr > td:nth-child(17), table:has(> thead th.num:nth-child(18)) > tbody > tr > td:nth-child(18), table:has(> thead th.num:nth-child(19)) > tbody > tr > td:nth-child(19), table:has(> thead th.num:nth-child(20)) > tbody > tr > td:nth-child(20), table:has(> thead th.num:nth-child(21)) > tbody > tr > td:nth-child(21), table:has(> thead th.num:nth-child(22)) > tbody > tr > td:nth-child(22), table:has(> thead th.num:nth-child(23)) > tbody > tr > td:nth-child(23), table:has(> thead th.num:nth-child(24)) > tbody > tr > td:nth-child(24), table:has(> thead th.num:nth-child(25)) > tbody > tr > td:nth-child(25) { text-align: right; } table > tbody > tr > td[colspan] { text-align: left; } /* Badges as chips. Green/amber/red keep good/caution/bad; outline badges stay outlined. */ .badge { border-radius: 999px; font-size: 14px; font-weight: 600; padding: 3px 12px; line-height: 20px; border: 0; } .badge-gradient-success, .badge.b-ok { background: var(--good-soft); color: var(--good); } .badge-gradient-warning, .badge.b-warn { background: var(--warn-soft); color: var(--warn); } .badge-gradient-danger, .badge.b-bad { background: var(--bad-soft); color: var(--bad); } .badge-gradient-info, .badge.b-info { background: var(--sky); color: var(--sky-ink); } .badge-gradient-primary { background: var(--teal-soft); color: var(--teal); } .badge-gradient-dark { background: var(--ink); color: var(--surface); } .badge-outline-info, .badge-outline-primary, .badge-outline-warning { background: transparent; border: 1.5px solid currentColor; padding: 1.5px 10.5px; } .badge-outline-info { color: var(--sky-ink); } .badge-outline-primary { color: var(--teal); } .badge-outline-warning { color: var(--warn); } .badge.bg-secondary, .badge.bg-light, .badge.b-neutral { background: var(--surface-2) !important; color: var(--ink) !important; } .badge.bg-info { background: var(--sky) !important; color: var(--sky-ink) !important; } .badge.bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; } .badge.bg-dark { background: var(--ink) !important; color: var(--surface) !important; } .badge.b-care { background: var(--coral-soft); color: var(--coral-ink); } .status-up { color: var(--good); } .status-down { color: var(--bad); } .alert { border-radius: 14px; border: 0; font-size: 14px; line-height: 1.5; } .alert-warning { background: var(--warn-soft); color: var(--ink); } .alert-secondary { background: var(--surface-2); color: var(--ink); } .alert-danger { background: var(--bad-soft); color: var(--bad); } .alert-success { background: var(--good-soft); color: var(--good); } .alert-info { background: var(--sky); color: var(--sky-ink); } /* Modals */ .modal-content { background: var(--surface); color: var(--ink); border: 0; border-radius: 18px; box-shadow: var(--shadow); } .modal-header, .modal-footer { border-color: var(--line); } .modal-title { font-weight: 700; } /* Login */ .auth { background: var(--bg) !important; } .auth .auth-form-light { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); color: var(--ink); } .auth .brand-logo h3 { font-weight: 800; color: var(--ink); } /* Designed-screen components (Activity Board, prompt 43) */ .help { font-size: 14px; line-height: 20px; color: var(--muted); margin: 0; } .table-note { font-size: 14px; color: var(--muted); margin: 14px 0 0; max-width: 110ch; } .filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .seg { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: 999px; } .seg button { min-height: 36px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; font: 600 14px var(--font); line-height: 1; color: var(--muted); cursor: pointer; } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--teal); box-shadow: var(--shadow); } .seg button[aria-pressed="true"]::before { content: "\2713 "; } .legend { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink); margin: 4px 0 14px; } .bar-track { background: var(--bar-track); border-radius: 999px; height: 10px; position: relative; min-width: 90px; } .bar-fill { height: 10px; border-radius: 999px; background: var(--accent, var(--teal)); } .bar-target { position: absolute; top: -4px; width: 2px; height: 18px; border-radius: 2px; background: var(--target-mark); } .score-bad { --accent: var(--bar-bad); } .score-mid { --accent: var(--bar-mid); } .score-good { --accent: var(--bar-good); } .score-word { font-size: 14px; font-weight: 600; } .score-bad .score-word { color: var(--bad); } .score-mid .score-word { color: var(--warn); } .score-good .score-word { color: var(--good); } .rank { display: inline-grid; width: 30px; height: 30px; border-radius: 50%; place-items: center; font-weight: 700; background: var(--surface-2); font-variant-numeric: tabular-nums; } .rank.r1, .rank.r2, .rank.r3 { background: var(--coral-soft); color: var(--coral-ink); } .th-sort { all: unset; cursor: pointer; font: inherit; color: inherit; } .th-sort:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } tr.clickable { cursor: pointer; } tr.detail > td { background: var(--surface-2); white-space: normal; } /* Activity Board: #, Agent and Score % fixed on the left; the rest scrolls. */ .table-board th, .table-board td { white-space: nowrap; } .table-board th.stick, .table-board td.stick { position: sticky; z-index: 2; background: var(--surface); } .table-board th.stick { background: var(--surface-2); z-index: 3; } .table-board tbody tr:hover > td.stick { background: var(--surface-2); } .table-board .s1 { left: 0; min-width: 56px; width: 56px; } .table-board .s2 { left: 56px; min-width: 140px; width: 140px; } .table-board .s3 { left: 196px; min-width: 300px; width: 300px; } .table-board .stick-edge { box-shadow: 8px 0 10px -8px rgba(60, 40, 20, .18); } /* Pages with their own