/* =================================================================
ai-case-selection.css
=================================================================
AI-site colour overrides. Load AFTER case-selection.css.
Strategy:
- Scoped to .cx-root[data-site="ai"] (the JS sets this attribute
on the mount element), so this file is safe to load even on pages
that aren't the AI cases page — the selectors simply won't match.
- Swaps the periwinkle accent palette for the purple tokens used
throughout the AI-site (user-dashboard.css: #7c3aed / #8b5cf6).
- Overrides every HARDCODED peri rgba/hex value in the base CSS.
(CSS variables can't cover the linear-gradient progress bars.)
- Swaps the "done" checkbox from green to purple to match the
AI-site convention (user's legacy inline style used #7c4dff for
completion ticks; we use #7c3aed for consistency with the
dashboard elsewhere on this site).
================================================================= */
/* =======================================================
Palette — redefine the peri tokens as purple
======================================================= */
.cx-root[data-site="ai"] {
/* Primary purple — matches --sd-purple in user-dashboard.css */
--cx-peri: #7c3aed;
/* Pale violet — used for ring outlines, card-ring text, hover accents */
--cx-peri-ink: #c4b5fd;
/* Muted purple-grey — hero subtitle text etc. */
--cx-peri-mute: #8b7fa8;
/* Soft tint — chip backgrounds, "peri" priority column, result hover */
--cx-peri-soft: #f3f0ff;
/* List-row hover — base CSS had #e5ecf4 (powder blue). We move it into
the purple family so hover doesn't read as "blue" on an otherwise
purple-accented page. */
--cx-row-hover: #ede9fe;
/* Keep the generic var aliases in sync with the overrides above */
--peri: var(--cx-peri);
--peri-soft: var(--cx-peri-soft);
--peri-mute: var(--cx-peri-mute);
}
/* =======================================================
Hero — orb glow, subtitle bold text
=======================================================
The hero uses two hardcoded rgba peri values for the blurred
background orbs. We replace them with violet.
*/
.cx-root[data-site="ai"] .cx-hero::before {
background:
radial-gradient(700px 200px at 100% 0%, rgba(139, 92, 246, 0.32), transparent 60%),
radial-gradient(500px 160px at 0% 100%, rgba(196, 181, 253, 0.18), transparent 55%);
}
/* =======================================================
Buttons — ghost hover uses peri rgba
======================================================= */
.cx-root[data-site="ai"] .cx-btn-ghost:hover {
background: rgba(124, 58, 237, 0.14);
border-color: var(--cx-peri);
color: var(--cx-peri);
}
/* =======================================================
Active-filter chips — hardcoded peri rgba border
======================================================= */
.cx-root[data-site="ai"] .cx-chip {
border-color: rgba(124, 58, 237, 0.35);
}
.cx-root[data-site="ai"] .cx-chip:hover {
border-color: var(--cx-peri);
}
/* =======================================================
Progress bar gradient (LIST VIEW + DRAWER)
=======================================================
The base CSS paints the fill with a hardcoded peri → navy
gradient. We replace with a light-violet → deep-purple ramp
so the "story" of the bar stays the same (pale where you're
starting, rich where you're near done) but in AI colours.
Both selectors must be overridden — the list-view fill and
the drawer bar use separate rules pointing at the same hex.
*/
.cx-root[data-site="ai"] .cx-row:not(.open) .cx-row-track > span {
background-image: linear-gradient(90deg,
#a78bfa 0%,
#8b5cf6 45%,
#7c3aed 75%,
#5b21b6 100%
);
}
/* Drawer progress bar (lives on body, outside .cx-root — scope
to the [data-site="ai"] attribute we set on .cx-drawer-wrap). */
.cx-drawer-wrap[data-site="ai"] .cx-drawer-bar > span {
background-image: linear-gradient(90deg,
#a78bfa 0%,
#8b5cf6 45%,
#7c3aed 75%,
#5b21b6 100%
);
}
/* =======================================================
Completion checkbox — green → purple
=======================================================
The base site uses green (#4fbf67) to match the legacy SCA
site's fa-square-check. On AI, the user's existing inline
styles use purple for completion indicators — so we match.
*/
.cx-root[data-site="ai"] .cx-case-check.done {
background: #7c3aed;
border-color: #7c3aed;
}
.cx-root[data-site="ai"] .cx-case-check.done:hover {
background: #5b21b6;
border-color: #5b21b6;
}
/* Drawer version (outside .cx-root scope) */
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check.done {
background: #7c3aed;
border-color: #7c3aed;
}
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check.done:hover {
background: #5b21b6;
border-color: #5b21b6;
}
/* Since the checkbox is non-interactive on AI (completion comes
from finishing a consultation, not clicking), disable the hover
styling that implies interactivity. The ".done" version still
gets its purple background — but the empty checkbox stays visually
quiet rather than suggesting "click me". */
.cx-root[data-site="ai"] .cx-case-check {
cursor: default;
}
.cx-root[data-site="ai"] .cx-case-check:not(.done):hover {
border-color: var(--cx-rule-2); /* revert to default — no hover invitation */
}
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check {
cursor: default;
}
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check:not(.done):hover {
border-color: var(--cx-rule-2, #bfc8d9);
}
/* =======================================================
Priority view — "Keep going" (peri-tone) column border
=======================================================
The base CSS uses rgba(125, 168, 240, 0.3) for the border
of the partial-progress column. Swap to violet.
*/
.cx-root[data-site="ai"] .cx-prio-peri {
background: var(--cx-peri-soft);
border-color: rgba(124, 58, 237, 0.3);
}
/* =======================================================
Active "dark" surfaces — navy → dark purple
=======================================================
The base CSS uses var(--cx-ink) = #253551 for several active
states: open list-row header, selected segment-button, active
filter-button. On a purple-themed page those navy blocks stand
out like "this was designed somewhere else" — swap to a dark
purple so active states feel part of the palette.
Notes on colour choice:
#4c1d95 (Tailwind violet-900) is a recognised "dark purple"
that's clearly violet in hue (not the ambiguous blue-purple
that navy reads as), and has the same visual weight as the
old navy — so the UI hierarchy doesn't shift.
*/
/* List row when expanded/open */
.cx-root[data-site="ai"] .cx-row.open {
border-color: #4c1d95;
}
.cx-root[data-site="ai"] .cx-row.open .cx-row-head {
background: #4c1d95;
}
/* Track fill on the open row — base CSS makes it pale paper-3;
use light lavender instead for a purple-family accent. */
.cx-root[data-site="ai"] .cx-row.open .cx-row-track > span {
background: #c4b5fd;
}
/* Segment buttons (Clinical topics / Experience groups, List / Grid / Priority) */
.cx-root[data-site="ai"] .cx-seg button.on {
background: #4c1d95;
}
/* Icon inside the active segment button — base uses peri, but on
a dark-purple bg peri is too similar to the background. Bump to
the light-lavender accent so the icon pops. */
.cx-root[data-site="ai"] .cx-seg button.on .cx-ico {
color: #c4b5fd;
}
/* Filter button when it has active filters applied */
.cx-root[data-site="ai"] .cx-filterbtn.on {
background: #4c1d95;
border-color: #4c1d95;
}
.cx-root[data-site="ai"] .cx-filterbtn.on .cx-ico {
color: #c4b5fd;
}
/* =======================================================
Hero — eyebrow + italic mode accent
=======================================================
The eyebrow ("AI ROLE-PLAY") and the italic hero-mode word use
var(--cx-peri) by default. On the navy hero bg the saturated
peri reads muddy. Bump both to light lavender so they register
as proper brand accents on dark.
*/
.cx-root[data-site="ai"] .cx-hero .cx-eyebrow,
.cx-root[data-site="ai"] .cx-hero-mode {
color: #c4b5fd;
}
/* =======================================================
Priority view — full purple gradient
=======================================================
Four columns: white paper → pale lavender → muted medium purple
→ deep violet. This replaces the base site's navy-centric ramp
(peri → steel blue → navy) which felt disconnected on an
otherwise purple page.
Nearly there (col 3): #6b46c1 — Tailwind violet-600.
Deliberately muted rather than saturated: the previous
candidate #6d28d9 (violet-700) read "neon" — this is a
softer, more grown-up mid-purple.
Mastered (col 4): #2e1065 — deepest violet; completes the
gradient + keeps the "mastered is serious" feel the navy had.
*/
/* Col 3 — "Nearly there" (was steel blue #5d77a8) */
.cx-root[data-site="ai"] .cx-prio-steel {
background: #6b46c1;
border-color: #6b46c1;
}
/* Col 4 — "Mastered" (was navy var(--cx-ink)) */
.cx-root[data-site="ai"] .cx-prio-ink {
background: #2e1065;
border-color: #2e1065;
}
/* Progress-line fills on both dark columns — base uses peri, but
peri is darker than the col-3 bg. Use light lavender so the
line is always visible. */
.cx-root[data-site="ai"] .cx-prio-steel .cx-prio-line > span,
.cx-root[data-site="ai"] .cx-prio-ink .cx-prio-line > span {
background: #c4b5fd;
}
/* =======================================================
Grid card — "Complete" status pill on mastered topics
=======================================================
Base CSS paints the pill navy + peri text. Keep the idea but
swap navy for the new dark purple + brighten the text to the
lavender accent so the pill matches the rest of the active-state
palette.
*/
.cx-root[data-site="ai"] .cx-card-status.complete {
background: #4c1d95;
color: #c4b5fd;
}
/* =======================================================
Focus states — purple glow instead of peri glow
=======================================================
Matches the legacy inline style you had on the AI site:
box-shadow: 0 4px 12px rgba(124, 77, 255, 0.10)
*/
.cx-root[data-site="ai"] .cx-search:focus-within {
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
.cx-root[data-site="ai"] .cx-hero {
background: #1e1b4b;
}
/* =======================================================
Cohort difficulty meter + average score
=======================================================
Replaces the 1–3 ★ difficulty rating on the AI cases page.
Two-column block: a rising 5-bar signal meter with an
EASY/MEDIUM/HARD caption underneath, then the cohort average
score with an "avg · all users" caption underneath.
Data lives on each case as c.stats (from /api/case-stats).
The whole block is omitted from the DOM when attemptCount
is below the threshold, so nothing here is conditional on
classes — the renderer either inserts the block or doesn't.
*/
/* Two-column grid: number / meter on row 1, captions on row 2.
`grid-auto-flow: column` fills row1+row2 of column 1 first, then
column 2 — so the JS just appends children in [num, num-cap, meter,
meter-cap] order and the layout falls out automatically. With one
filter off, the grid collapses to a single column.
`align-items: end` pins each row 1 cell to its bottom, so the meter
(16px) and the number (~18px line-height) share a baseline. The
row-2 captions are then equal height and naturally line up. */
.cx-root[data-site="ai"] .cx-case-cohort {
display: inline-grid;
grid-auto-flow: column;
grid-template-rows: auto auto;
/* Fixed column width so every card matches: without this each grid
sizes its columns to its own content, and a card with "MEDIUM"
ends up wider than one with "EASY", which makes the meter and
caption drift left/right between rows. 60px comfortably fits
"ALL USERS" (the widest caption) at 9px mono and centers shorter
labels neatly. */
grid-auto-columns: 60px;
align-items: end;
column-gap: 8px;
row-gap: 2px;
white-space: nowrap;
}
/* --- Number block (now first in DOM order) --------------- */
.cx-root[data-site="ai"] .cx-case-cohort-num {
display: inline-flex;
align-items: baseline;
gap: 1px;
line-height: 1;
justify-self: center;
}
/* --- Meter ----------------------------------------------- */
.cx-root[data-site="ai"] .cx-case-cohort > .cx-case-diffmeter {
justify-self: center;
}
.cx-root[data-site="ai"] .cx-case-diffmeter {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
}
.cx-root[data-site="ai"] .cx-case-diffmeter > span {
width: 4px;
border-radius: 1px;
background: var(--cx-paper-3);
transition: background .2s ease;
}
/* Rising staircase — each bar slightly taller than the last. */
.cx-root[data-site="ai"] .cx-case-diffmeter > span:nth-child(1) { height: 5px; }
.cx-root[data-site="ai"] .cx-case-diffmeter > span:nth-child(2) { height: 8px; }
.cx-root[data-site="ai"] .cx-case-diffmeter > span:nth-child(3) { height: 11px; }
.cx-root[data-site="ai"] .cx-case-diffmeter > span:nth-child(4) { height: 14px; }
.cx-root[data-site="ai"] .cx-case-diffmeter > span:nth-child(5) { height: 16px; }
/* Filled segments — colour fades from light violet to deep purple
as more bars light up, so the bucket reads instantly even from
the corner of the eye. */
.cx-root[data-site="ai"] .cx-case-diffmeter[data-level="easy"] > span.on { background: #a78bfa; }
.cx-root[data-site="ai"] .cx-case-diffmeter[data-level="medium"] > span.on { background: var(--cx-peri); }
.cx-root[data-site="ai"] .cx-case-diffmeter[data-level="hard"] > span.on { background: #4c1d95; }
/* --- Right half: score readout ---------------------------- */
/* Number itself */
.cx-root[data-site="ai"] .cx-case-cohort-num > b {
font-family: "DM Serif Display", serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
line-height: 1;
color: var(--cx-muted);
}
.cx-root[data-site="ai"] .cx-case-cohort-pct {
font-family: "DM Serif Display", serif;
font-size: 11px;
color: var(--cx-muted);
line-height: 1;
}
/* Caption — single shared rule. Both captions sit on row 2 of the
grid, so they're already vertically aligned with each other. */
.cx-root[data-site="ai"] .cx-case-cohort-cap {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cx-muted);
line-height: 1;
text-align: center;
justify-self: center;
}
/* On hover (matching how the old stars darkened) keep colours
stable — the meter's data-derived intent matters more than a
hover treatment, and a colour swap on hover would suggest
interactivity. */
.cx-root[data-site="ai"] .cx-case:hover .cx-case-diffmeter > span.on {
filter: brightness(0.95);
}
/* Drawer reuses the case row, so cohort styling inherits cleanly.
Tighten the gap a touch since drawer cases are 2-up. */
.cx-drawer-wrap[data-site="ai"] .cx-case-cohort {
column-gap: 8px;
}
/* =================================================================
End ai-case-selection.css
================================================================= */