/* BannerMyst portal — design system. Light and dark are the same tokens redefined under [data-theme="dark"], so every component is written once. The theme is set on by a small inline script before paint, which avoids a flash of the wrong theme. */ :root { --brand-primary: #1d6fe0; --brand-accent: #0e2a55; --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f2f5f9; --border: #e1e7f0; --text: #14213d; --text-muted: #5a6579; /* WebMyst's own orange, darkened for light backgrounds — see .powered-by. */ --webmyst: #d03e17; --text-faint: #8a94a6; --good: #10893e; --good-bg: rgba(16, 137, 62, 0.1); --bad: #c0392b; --bad-bg: rgba(192, 57, 43, 0.1); --warn: #b26a00; --warn-bg: rgba(178, 106, 0, 0.12); --info-bg: rgba(29, 111, 224, 0.1); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --sidebar-w: 240px; --sidebar-w-collapsed: 64px; } [data-theme="dark"] { --bg: #0f1216; --surface: #171b21; --surface-2: #1e242c; --border: #2a313b; --text: #e8ecf2; --text-muted: #9aa5b4; /* The brand orange as given: on this background it reads at 5.6:1. */ --webmyst: #fe4c1c; --text-faint: #6c7788; --good: #3ddc84; --good-bg: rgba(61, 220, 132, 0.12); --bad: #ff6b5e; --bad-bg: rgba(255, 107, 94, 0.12); --warn: #ffc24b; --warn-bg: rgba(255, 194, 75, 0.14); --info-bg: rgba(29, 111, 224, 0.18); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } h2 { font-size: 16px; font-weight: 600; margin: 0; } /* ---------- Shell ---------- */ .shell { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--brand-accent); color: rgba(255, 255, 255, 0.72); display: flex; flex-direction: column; overflow: hidden; transition: width 0.18s ease; z-index: 40; } .sidebar-spacer { width: var(--sidebar-w); flex: none; transition: width 0.18s ease; } /* Collapsed: an icon rail that expands again on hover, so the labels are always one gesture away without the page reflowing. */ body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); } body.sidebar-collapsed .sidebar:hover { width: var(--sidebar-w); } body.sidebar-collapsed .sidebar-spacer { width: var(--sidebar-w-collapsed); } body.sidebar-collapsed .sidebar .label { opacity: 0; } body.sidebar-collapsed .sidebar:hover .label { opacity: 1; } .sidebar .label { transition: opacity 0.18s ease; white-space: nowrap; } /* The Collapse button lives inside the sidebar, so the pointer is still over the rail the instant it is clicked — and :hover would expand it straight back again, making the button look broken. This locks hover out until the pointer actually leaves; app.js drops the class on mouseleave. */ body.sidebar-collapsed.sidebar-hover-lock .sidebar:hover { width: var(--sidebar-w-collapsed); } body.sidebar-collapsed.sidebar-hover-lock .sidebar:hover .label { opacity: 0; } body.sidebar-collapsed.sidebar-hover-lock .sidebar:hover .sidebar-brand .brand-mark { display: block; } body.sidebar-collapsed.sidebar-hover-lock .sidebar:hover .sidebar-brand .brand-full { display: none; } /* The button says what it will do next, not what state you are in. */ .sidebar-toggle [data-collapse-icon="in"], .sidebar-toggle .label-expand { display: none; } body.sidebar-collapsed .sidebar-toggle [data-collapse-icon="in"] { display: block; } body.sidebar-collapsed .sidebar-toggle [data-collapse-icon="out"] { display: none; } body.sidebar-collapsed .sidebar-toggle .label-expand { display: inline; } body.sidebar-collapsed .sidebar-toggle .label-collapse { display: none; } .sidebar-brand { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; color: #fff; font-weight: 700; flex: none; } .sidebar-brand:hover { text-decoration: none; } .sidebar-brand img, .sidebar-brand svg { flex: none; object-fit: contain; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; flex: 1; } .sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: inherit; font-weight: 500; } .sidebar nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; } .sidebar nav a.active { background: var(--brand-primary); color: #fff; } .sidebar nav a svg { width: 20px; height: 20px; flex: none; } .sidebar-toggle { display: flex; align-items: center; gap: 12px; margin: 8px; padding: 10px 12px; background: none; border: 0; border-radius: var(--radius); color: inherit; font: inherit; cursor: pointer; text-align: left; } .sidebar-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .sidebar-toggle svg { width: 20px; height: 20px; flex: none; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .user { text-align: right; line-height: 1.25; } .topbar .user strong { display: block; font-size: 13px; } .topbar .user span { font-size: 12px; color: var(--text-muted); text-transform: capitalize; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px; font-weight: 600; } .content { padding: 24px; flex: 1; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-head p { margin: 4px 0 0; color: var(--text-muted); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card-head { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-body { padding: 18px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid.cols-5, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .grid.cols-5, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; } .stat .k { font-size: 12px; color: var(--text-muted); } .stat .v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; } .stat .h { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .stat .v.good { color: var(--good); } .stat .v.bad { color: var(--bad); } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; } th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); } th { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tfoot td { font-weight: 600; border-top: 2px solid var(--border); border-bottom: 0; background: var(--surface-2); } .empty { padding: 32px; text-align: center; color: var(--text-muted); } /* ---------- Forms ---------- */ label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; } input, select, textarea { width: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(29, 111, 224, 0.18); } input[type="color"] { padding: 2px; height: 36px; } .field { margin-bottom: 14px; } .field-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .field-row > .field { flex: 1; min-width: 160px; margin-bottom: 0; } .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font: inherit; font-weight: 500; border-radius: var(--radius); border: 1px solid transparent; background: var(--brand-primary); color: #fff; cursor: pointer; white-space: nowrap; } .btn:hover { filter: brightness(1.06); text-decoration: none; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn.outline { background: var(--surface); color: var(--text); border-color: var(--border); } .btn.outline:hover { background: var(--surface-2); } .btn.ghost { background: none; color: var(--text-muted); } .btn.ghost:hover { background: var(--surface-2); color: var(--text); } .btn.danger { background: var(--bad); } .btn.sm { padding: 5px 10px; font-size: 13px; } .btn svg { width: 16px; height: 16px; } /* ---------- Badges, flash ---------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-muted); } .badge.good { background: var(--good-bg); color: var(--good); } .badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.info { background: var(--info-bg); color: var(--brand-primary); } .flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid transparent; } .flash.success { background: var(--good-bg); color: var(--good); border-color: var(--good); } .flash.error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .right { text-align: right; } .nowrap { white-space: nowrap; } /* ---------- Auth ---------- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); } .auth-card { width: 100%; max-width: 380px; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; } .auth-brand svg { width: 56px; height: 56px; object-fit: contain; } .auth-brand img { object-fit: contain; } .auth-brand strong { font-size: 18px; color: var(--brand-accent); } [data-theme="dark"] .auth-brand strong { color: var(--text); } /* ---------- Powered by ---------- */ /* Quiet on purpose: present on every page of a client's account without competing with the brand the page exists to sell. The hairline above it is what makes it read as a footer rather than as a line that fell off the end of the page — which is exactly how it looked without one. The mark is WebMyst's, so its colour is fixed rather than taken from a theme token: it must not shift when a subscriber picks their own brand colours. #FE4C1C is the brand orange and is used as given on dark, where it reads at 5.6:1. On the light background it manages only 3.1:1, which is below AA for 12px text, so light mode uses the same hue darkened to the first shade that passes (4.5:1). Same colour, still unmistakably the brand, actually legible in both themes. */ /* Pinned to the bottom of the viewport, not to the bottom of the document, so it is on screen on a long list rather than only after scrolling to the end. sticky rather than fixed: a fixed footer would have to know how wide the sidebar is and be told again every time it collapses. Sticky stays inside the content column on its own, and settles into its natural place at the end of the page instead of overlapping the last row forever. The background is not decoration — content scrolls underneath this, and without it the two would be legible through each other. z-index sits below the sidebar's 40 so the collapsed rail still expands over it. */ .powered-by { position: sticky; bottom: 0; z-index: 20; background: var(--bg); padding: 16px 24px 20px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--text-muted); border-top: 1px solid var(--border); } .powered-by a { color: var(--webmyst); font-weight: 600; text-decoration: none; } .powered-by a:hover, .powered-by a:focus-visible { text-decoration: underline; } /* Under the sign-in card there is no page chrome to be divided from, so it drops the rule and takes more air instead — and nothing to stick to, since the card is centred in the viewport and never scrolls. */ .auth-card .powered-by { position: static; margin-top: 20px; padding: 0; background: none; border-top: 0; } /* ---------- Misc ---------- */ .icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn svg { width: 18px; height: 18px; } .error-page { display: grid; place-items: center; min-height: 60vh; text-align: center; gap: 8px; } .error-page .code { font-size: 48px; font-weight: 700; color: var(--text-faint); } /* ---------- Brand assets ---------- Three uploadable assets: a logo for light surfaces, one for dark, and a square favicon. Both logos are in the markup and CSS picks one, so the right image is on screen at first paint rather than after a script runs. */ .brand-logo { display: block; max-width: 100%; object-fit: contain; } .brand-logo.on-dark { display: none; } [data-theme="dark"] .brand-logo.on-light { display: none; } [data-theme="dark"] .brand-logo.on-dark { display: block; } /* The collapsed rail is 64px wide, where a horizontal lockup is unreadable, so it wears the favicon — the square cut of the same mark. */ .sidebar-brand .brand-mark { width: 34px; height: 34px; display: none; } /* The lockup is wide and may carry a tagline, so it is sized by height and allowed to take whatever width that implies, up to the rail. */ .sidebar-brand .brand-full { width: auto; height: auto; max-height: 34px; max-width: 176px; object-position: left center; } body.sidebar-collapsed .sidebar .sidebar-brand .brand-mark { display: block; } body.sidebar-collapsed .sidebar .sidebar-brand .brand-full { display: none; } body.sidebar-collapsed .sidebar:hover .sidebar-brand .brand-mark { display: none; } body.sidebar-collapsed .sidebar:hover .sidebar-brand .brand-full { display: block; } /* width:auto matters — a horizontal lockup must keep its aspect ratio, and any inherited fixed width crushes it. max-width keeps a very wide logo inside the 380px card. */ /* Both dimensions are maxima. A fixed height with a max-width lets the width clamp while the height stays put, and object-fit then letterboxes the image inside a box taller than itself — which is how a 4.8:1 wordmark ended up rendering 56px wide and 12px tall inside a 56px square. */ .auth-brand .brand-logo { width: auto; height: auto; max-height: 52px; max-width: 268px; } /* Settings: the three assets side by side, each on the surface it is meant for so a logo that vanishes on dark is obvious before it ships. */ .asset-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .asset-grid { grid-template-columns: 1fr; } } .asset-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .asset-card h3 { margin: 0; padding: 12px 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); } .asset-preview { display: grid; place-items: center; height: 108px; padding: 14px; } .asset-preview img { max-height: 72px; max-width: 100%; object-fit: contain; } .asset-preview.light { background: #ffffff; } .asset-preview.dark { background: #0e2a55; } .asset-preview.check { background-color: var(--surface-2); background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.16) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, 0.16) 75%), linear-gradient(45deg, rgba(128, 128, 128, 0.16) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, 0.16) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; } .asset-actions { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .asset-actions input[type="file"] { font-size: 12px; padding: 6px; } /* ---------- Table scrolling ---------- Wide tables scroll inside their own card rather than pushing the page sideways, which would take the sidebar and topbar with them. */ .table-scroll { overflow-x: auto; } .table-scroll table { min-width: 640px; } .clamp { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td.bad, .num.bad { color: var(--bad); } td.good { color: var(--good); } /* ---------- Kanban board ---------- */ .board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; } .board-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); } .board-col > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; } .board-drop { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; min-height: 60px; } .board-drop.over { outline: 2px dashed var(--brand-primary); outline-offset: -4px; border-radius: var(--radius); } .board-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: grab; } .board-card:active { cursor: grabbing; } .board-card.dragging { opacity: 0.45; } /* ---------- Timeline ---------- */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .timeline li:last-child { border-bottom: 0; } .timeline .faint { font-size: 12px; } /* ---------- Inline-editable table rows ---------- */ .line-items input, .line-items select { padding: 5px 7px; font-size: 13px; } .line-items td { padding: 6px 8px; vertical-align: middle; } .line-items td.num input { text-align: right; } .line-items th { white-space: nowrap; } /* ---------- Signing links ---------- Two links, presented as two clearly separate things. They are not interchangeable — one signs as the client, the other as the company — so the layout never puts them in a single "copy link" affordance. */ .link-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .link-row:first-child { padding-top: 0; } .link-row:last-child { border-bottom: 0; padding-bottom: 0; } .link-row h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; } .link-row .hint { margin: 0 0 6px; } .link-row code.link { display: block; max-width: 460px; font-size: 11.5px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; word-break: break-all; } .link-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .topbar a.user, .topbar a.avatar { color: inherit; text-decoration: none; } .topbar a.user:hover strong { color: var(--brand-primary); } .topbar a.avatar:hover { border-color: var(--brand-primary); color: var(--brand-primary); } /* ---------- Charts ---------- Two series on one scale, never two y-axes: revenue and profit are both money, so they share an axis; margin is a percentage and gets its own table below rather than a second axis on this chart. Blue and orange, because that pair stays distinguishable under every common form of colour blindness — the usual blue/green pairing does not. The legend is always present and the same figures appear in the table underneath, so identity never rests on colour alone. */ :root { --chart-1: #1d6fe0; --chart-2: #d97706; --chart-grid: #e1e7f0; } [data-theme="dark"] { --chart-1: #5b9bf5; --chart-2: #f0a03c; --chart-grid: #2a313b; } .legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; } .chart { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding-top: 8px; overflow-x: auto; } .chart-col { flex: 1; min-width: 44px; display: flex; flex-direction: column; height: 100%; } .chart-col .bars { flex: 1; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--chart-grid); } .chart .bar { flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; } /* A 2px gap of surface between adjacent fills keeps the pair legible when the two bars are close in height. */ .chart .bar + .bar { box-shadow: -2px 0 0 var(--surface); } .chart .bar.s1 { background: var(--chart-1); } .chart .bar.s2 { background: var(--chart-2); } .chart-label { padding-top: 7px; font-size: 11px; color: var(--text-muted); text-align: center; white-space: nowrap; } /* ---------- Platform console ---------- The agency layer above the accounts. It wears OUR mark, never a subscriber's, and the different chrome is the cue that you are above the accounts rather than inside one. */ body.console { background: var(--bg); } .console-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; padding: 0 24px; background: var(--brand-accent); color: #fff; } .console-brand { display: flex; align-items: center; gap: 12px; } .console-brand img { width: 30px; height: 30px; object-fit: contain; } .console-brand strong { display: block; font-size: 14px; line-height: 1.2; } .console-brand span { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .console-bar .user strong { color: #fff; } .console-bar .user span { color: rgba(255, 255, 255, 0.7); } .console-bar .icon-btn { color: rgba(255, 255, 255, 0.8); } .console-bar .icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .console-content { max-width: 1180px; margin: 0 auto; width: 100%; } /* The banner a super admin sees while inside someone's account, so it is never possible to forget whose data is on screen. */ .acting-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 24px; background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--border); font-size: 13px; } .acting-bar form { display: inline; } .acting-bar .btn { padding: 4px 10px; font-size: 12px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; } /* ---------- Permission grid ---------- */ .grant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; } @media (max-width: 900px) { .grant-grid { grid-template-columns: 1fr; } } .grant { display: flex; gap: 9px; align-items: flex-start; } .grant input { width: auto; margin-top: 3px; flex: none; } .grant label { font-weight: 500; margin: 0; } .grant .hint { margin: 2px 0 0; } .team-card { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; } .team-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .team-card .body { padding: 16px; } /* ---------- Row actions & choice cards ---------- */ .row-actions { display: inline-flex; gap: 6px; align-items: center; } .row-actions .btn.sm { padding: 4px 9px; } .choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 760px) { .choice { grid-template-columns: 1fr; } } .choice-option { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; font-weight: 400; } .choice-option:hover { background: var(--surface-2); } .choice-option input { width: auto; margin-top: 2px; flex: none; } .choice-option strong { display: block; font-size: 14px; } .choice-option small { color: var(--text-muted); } .choice-option:has(input:checked) { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(29, 111, 224, 0.14); }