/* Referral demo, round 4 (BRIEF-v4.md): the live orb and its composition, the real ATS dashboard, the AI credits chip and
 * popover, the dashboard card, the Two-sided dialog, Spotlight's progress card and the back office header.
 * Dashboard sizes follow wt-brand-fe (AtsDashboard.tsx, DashboardHero.tsx, stat-card.tsx, section-card.tsx,
 * AiCreditsHeaderChip.tsx); Tailwind rem = the compact root here, as in the app. */

/* ---- the live orb's entrance (reskin/ai/demo/caiDemo.css .cai-orb) */
.cai-orb { flex: none; line-height: 0; }
.cai-orb canvas { display: block; overflow: visible; opacity: 0; transform: scale(0.82); transition: opacity 220ms ease-out, transform 480ms cubic-bezier(0.16, 1, 0.3, 1); }
.cai-orb[data-in] canvas { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cai-orb canvas { transition: none; } }

/* =============================================================== composition: orb + vacancy + shortlist + interview */
.oc { position: relative; flex: none; }
.oc-stage { position: absolute; left: 0; top: 0; width: 760px; height: 640px; transform-origin: 0 0; font-size: 13px; }
.oc-flow { position: absolute; inset: 0; width: 760px; height: 640px; }
.oc-flow path { stroke: rgba(48, 78, 255, 0.32); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.oc-flow circle { fill: #fff; stroke: rgba(48, 78, 255, 0.45); stroke-width: 1.5; }
.oc-orb { position: absolute; left: 230px; top: 220px; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--primary); }
.oc-orb-host { width: 200px; height: 200px; }
.oc-cap { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(48, 78, 255, 0.16); box-shadow: 0 6px 16px -10px rgba(0, 6, 37, 0.28); font-size: 12px; font-weight: 500; color: var(--ats-title); white-space: nowrap; }
.oc-cap i { width: 6px; height: 6px; border-radius: 9px; background: var(--primary); opacity: 0.5; }
.oc.reading .oc-cap i { opacity: 1; animation: ocPulse 1.2s ease-in-out infinite; }
@keyframes ocPulse { 50% { opacity: 0.35; } }
.oc-card { position: absolute; background: #fff; border: 1px solid rgba(16, 17, 25, 0.08); border-radius: 14px; box-shadow: 0 26px 52px -26px rgba(0, 6, 37, 0.32), 0 2px 6px rgba(0, 6, 37, 0.05); color: var(--fg); }
.oc-vac { left: 14px; top: 30px; width: 372px; padding: 16px 18px; transform: rotate(-2.5deg); }
.oc-list { left: 470px; top: 150px; width: 282px; padding: 13px 0 4px; transform: rotate(2deg); }
.oc-slot { left: 118px; top: 486px; width: 300px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; transform: rotate(-1.5deg); }
.oc-vh { display: flex; align-items: flex-start; gap: 11px; }
.oc-vh > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-vh b, .oc-slot b { font-size: 14px; font-weight: 600; color: var(--ats-title); }
.oc-vh small, .oc-n small, .oc-slot small, .oc-lh small { font-size: 11.5px; color: var(--muted-fg); }
.oc-vh .sp { margin-top: 2px; }
.oc-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--tint); color: var(--primary); }
.oc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.oc-stats div { display: flex; flex-direction: column; padding-left: 12px; border-left: 1px solid var(--hair); }
.oc-stats div:first-child { padding-left: 0; border-left: 0; }
.oc-stats b { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ats-title); font-variant-numeric: tabular-nums; }
.oc-stats small { font-size: 11.5px; color: var(--muted-fg); }
.oc-lh { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 9px; border-bottom: 1px solid var(--hair); }
.oc-lh b { font-size: 13.5px; font-weight: 600; color: var(--ats-title); }
.oc-r { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--hair); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.oc-r:last-child { border-bottom: 0; }
.oc-r.pend { opacity: 0; transform: translateY(6px); }
.oc-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: hsl(var(--h) 75% 93%); color: hsl(var(--h) 45% 32%); font-size: 10.5px; font-weight: 600; }
.oc-n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.oc-n b { font-size: 13px; font-weight: 600; }
.oc-n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-m { flex: none; height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 6px; background: var(--tint); color: var(--primary); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-slot > div { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.oc-cal { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 44px; border-radius: 9px; border: 1px solid var(--line); line-height: 1; }
.oc-cal small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); font-weight: 600; }
.oc-cal b { margin-top: 2px; font-family: var(--font-display); font-size: 17px; }
.oc-ok { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--green-wash); color: var(--green); }
@media (prefers-reduced-motion: reduce) { .oc-r { transition: none; } .oc.reading .oc-cap i { animation: none; } }

/* the referred company's page, round 4 */
.ivs-eb { margin-bottom: -0.75rem; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.66); }
.ivs-offer b { white-space: nowrap; }
.ivs-r { padding: 0.5rem; }
.iv-split { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); }
.pair2.with-orb { gap: 0.875rem; }
.p2-orb { display: block; color: var(--primary); }

/* =============================================================== the real ATS dashboard */
.adb { display: flex; flex-direction: column; gap: 1.5rem; }
.dbh { overflow: hidden; border-radius: 0.75rem; border: 1px solid var(--line); background: var(--card); }
.dbh-cover { position: relative; height: clamp(9rem, 13.8vw, 15rem); overflow: hidden; background:
	repeating-radial-gradient(circle at 88% 50%, rgba(120, 150, 255, 0.2) 0 1px, transparent 1.5px 7px),
	radial-gradient(48% 120% at 88% 50%, rgba(48, 78, 255, 0.28), transparent 70%),
	linear-gradient(100deg, #040814 0%, #050c26 55%, #0a1650 100%); }
.dbh-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 18, 60, 0.32)); }
.dbh-art { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); color: rgba(150, 175, 255, 0.5); }
.dbh-art svg { width: clamp(6.5rem, 3rem + 7vw, 12rem); height: auto; filter: drop-shadow(0 0 14px rgba(48, 78, 255, 0.5)); }
.dbh-art svg path { fill: rgba(5, 12, 38, 0.55); stroke: currentColor; stroke-width: 4; }
.dbh-art { color: rgba(140, 170, 255, 0.85); }
.dbh-row { display: flex; align-items: flex-end; gap: 1.25rem; padding: 0 1.5rem 1.25rem; }
.dbh-logo { position: relative; z-index: 1; flex: none; display: grid; place-items: center; height: 6rem; min-width: 6rem; margin-top: -3.5rem; padding: 0.5rem 0.875rem; border-radius: 1rem; background: #fff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.dbh-logo img { height: 1.625rem; width: auto; }
.dbh-t { flex: 1; min-width: 0; padding-top: 1rem; }
.dbh-t h2 { font-family: var(--font-display); font-size: 1.875rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.dbh-t p { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--muted-fg); }
.dbh-t p i { width: 0.5rem; height: 0.5rem; border-radius: 99px; background: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
.dbh-a { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.125rem; }
.dbh-a .btn { gap: 0.375rem; }
.stc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.stc { padding: 1.25rem; border-radius: 0.75rem; }
.stc-l { display: flex; align-items: center; gap: 0.625rem; font-size: var(--text-sm); color: var(--muted-fg); }
.stc-i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.375rem; }
.stc > b { display: block; margin-top: 1rem; font-size: 1.875rem; font-weight: 500; line-height: 1; color: var(--fg); }
.stc small { display: block; margin-top: 0.5rem; font-size: var(--text-xs); color: var(--muted-fg); }
.stc.ac-blue { background: rgba(239, 246, 255, 0.6); border-color: #dbeafe; } .stc.ac-blue .stc-i { background: rgba(219, 234, 254, 0.7); color: #2563eb; }
.stc.ac-emerald { background: rgba(236, 253, 245, 0.6); border-color: #d1fae5; } .stc.ac-emerald .stc-i { background: rgba(209, 250, 229, 0.7); color: #059669; }
.stc.ac-violet { background: rgba(245, 243, 255, 0.6); border-color: #ede9fe; } .stc.ac-violet .stc-i { background: rgba(237, 233, 254, 0.7); color: #7c3aed; }
.stc.ac-amber { background: rgba(255, 251, 235, 0.6); border-color: #fef3c7; } .stc.ac-amber .stc-i { background: rgba(254, 243, 199, 0.7); color: #d97706; }
.adb-g { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.adb-side { display: flex; flex-direction: column; gap: 1.5rem; }
.adb-side .sc-iv { flex: 1; }
/* SectionCard */
.sc { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 0.75rem; }
.sc.flush { padding: 0; }
.sc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sc.flush > .sc-h { padding: 1.5rem 1.5rem 1rem; }
.sc-t { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sc-t h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.sc-b { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.4375rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.sc-b.tn-blue { background: #dbeafe; color: #1d4ed8; } .sc-b.tn-violet { background: #ede9fe; color: #6d28d9; } .sc-b.tn-amber { background: #fef3c7; color: #b45309; }
.sc-link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.375rem; border-radius: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--primary); white-space: nowrap; }
.sc-link:hover { background: var(--tint); }
.sc-d { margin-top: 0.25rem; font-size: var(--text-sm); color: var(--muted-fg); }
.sc-apps .ac { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin-top: 1rem; }
.ac svg { width: 100%; height: auto; display: block; font-size: 11px; }
.ac svg text { fill: var(--muted-fg); font-family: var(--font-sans); }
.ac-g { stroke: var(--hair); stroke-dasharray: 3 3; }
.ac-l polyline { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ac-leg { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; margin-top: 0.875rem; padding-left: 2.5rem; font-size: var(--text-xs); color: var(--muted-fg); }
.ac-leg li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ac-leg i { width: 0.4375rem; height: 0.4375rem; border-radius: 99px; }
.pp-seg { margin: 1.25rem 0 1rem; }
.sgt { display: inline-flex; gap: 2px; padding: 3px; border-radius: 0.625rem; background: var(--muted); }
.sgt button { height: 1.875rem; padding: 0 0.875rem; border-radius: 0.5rem; font-size: var(--text-sm); color: var(--muted-fg); }
.sgt button[aria-selected='true'] { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--line); }
.pp { display: flex; flex-direction: column; gap: 1.0625rem; }
.pp p { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--fg); }
.pp p span { display: inline-flex; align-items: center; gap: 0.5rem; }
.pp p span i { width: 0.4375rem; height: 0.4375rem; border-radius: 99px; }
.pp p b { font-weight: 500; }
.pp-t { display: block; height: 0.5rem; margin-top: 0.5rem; border-radius: 99px; background: var(--muted); overflow: hidden; }
.pp-t i { display: block; height: 100%; border-radius: 99px; }
.aj > li { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 1.5rem; border-top: 1px solid var(--line); }
.aj-top { display: flex; align-items: flex-start; gap: 0.75rem; }
.aj-ic { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; background: rgba(48, 78, 255, 0.1); color: var(--primary); }
.aj-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.aj-t b { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.aj-t small { font-size: var(--text-xs); color: var(--muted-fg); }
.aj-top .sp { margin-top: 0.375rem; }
.aj-top .btn-icon { margin-top: 0.125rem; }
.aj-st { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.aj-st span { display: flex; flex-direction: column; align-items: center; padding: 0.3125rem 0; border-radius: 0.375rem; background: var(--subtle); line-height: 1.2; }
.aj-st b { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: var(--text-xs); font-weight: 600; color: var(--fg); }
.aj-st b i { width: 0.375rem; height: 0.375rem; border-radius: 99px; }
.aj-st small { font-size: 0.6875rem; color: var(--muted-fg); }
.sc-seg { padding: 0.625rem 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dr > li { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.5rem 1.5rem; border-top: 1px solid var(--line); }
.sc-iv .dr > li:first-child { border-top: 0; }
.dr-av { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 99px; background: var(--muted); color: var(--muted-fg); font-size: var(--text-xs); font-weight: 500; }
.dr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.dr-t b { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.dr-t small { font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-d { flex: none; font-size: var(--text-xs); color: var(--muted-fg); }
.sp.tn-violet { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; } .sp.tn-violet i { background: #8b5cf6; }
html.rf .cs-actions { gap: 0.5rem; }
html.rf .cs-actions .btn { height: 2.25rem; }
.cs-badge.fixed { background: #fff; color: var(--navy); }

/* ---- the dashboard card (5c): a SectionCard like Candidate pipeline */
.db-refc { padding: 1.25rem 1.5rem; }
.db-refc .refc-b { display: flex; align-items: center; gap: 0.875rem; margin-top: 0.75rem; }
.refc-orb { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.75rem; background: var(--tint); color: var(--primary); }
.refc-orb-h { display: block; }
.refc-t { flex: 1; min-width: 0; }
.refc-hl { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.refc-sub { margin-top: 0.125rem; font-size: var(--text-xs); line-height: 1.45; color: var(--muted-fg); }
.refc-cp { display: inline-flex; align-items: center; gap: 0.3125rem; margin-left: 0.25rem; vertical-align: baseline; font-size: var(--text-xs); font-weight: 500; color: var(--primary); }
.refc-cp:hover { color: var(--primary-ink); }
.refc-cp.copied { color: var(--green); }

/* =============================================================== the AI credits chip and its popover */
.aichip { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem 0 0.5rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 0.8125rem; font-weight: 500; line-height: 1; color: var(--fg); white-space: nowrap; transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out; }
.aichip:hover, .aichip[aria-expanded='true'] { border-color: rgba(48, 78, 255, 0.25); background: rgba(48, 78, 255, 0.04); }
.aichip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(48, 78, 255, 0.3); }
.aichip-mk { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 99px; background: rgba(48, 78, 255, 0.08); color: var(--primary); }
.aichip-mk svg { width: 0.75rem; height: auto; }
.aichip-hint { margin-left: 0.125rem; padding-left: 0.5rem; border-left: 1px solid var(--line); color: var(--primary); font-weight: 600; }
.aichip.low { border-color: #fde68a; background: #fffbeb; color: #78350f; }
.aichip.low .aichip-mk { background: #fef3c7; color: #b45309; }
.cpop { position: fixed; z-index: 85; width: min(26rem, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(0, 6, 37, 0.28), 0 2px 8px rgba(0, 6, 37, 0.06); overflow: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 160ms var(--ease), transform 220ms var(--ease); }
.cpop.open { opacity: 1; transform: none; }
/* round 5: one left edge (1.5rem) for every row, one order: balance > meaning > tabs > offer > line > link > timing > links */
.cpop-top { padding: 1.25rem 1.5rem 1.125rem; background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, #fff), color-mix(in oklab, var(--primary) 2.5%, #fff)); border-bottom: 1px solid var(--line); }
.cpop-bal { display: flex; align-items: center; gap: 0.625rem; color: var(--ats-title); }
.cpop-bal b { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; }
.cpop-bal > span:last-child { align-self: flex-end; padding-bottom: 0.25rem; font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); }
.cpop-mk { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 99px; background: rgba(48, 78, 255, 0.1); color: var(--primary); }
.cpop-mk svg { width: 1.125rem; height: auto; }
.cpop-sub { margin-top: 0.5rem; font-size: var(--text-xs); color: var(--muted-fg); }
.cpop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 1rem 1.5rem 0; padding: 3px; border-radius: 0.625rem; background: var(--muted); }
.cpop-tabs button { height: 2rem; padding: 0 0.75rem; border-radius: 0.5rem; font-size: var(--text-sm); font-weight: 500; color: var(--muted-fg); transition: background-color 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease); }
.cpop-tabs button:hover { color: var(--fg); }
.cpop-tabs button[aria-selected='true'] { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--line); }
.cpop-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cpop-p { padding: 1.125rem 1.5rem 1.125rem; }
.cpop-offer { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ats-title); }
.cpop-line { margin-top: 0.25rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); }
.cpop-link { margin-top: 0.875rem; height: 2.75rem; padding: 0 0.25rem 0 0.875rem; }
.cpop-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: var(--text-sm); color: var(--fg); }
.cpop-link .btn { height: 2.125rem; padding: 0 0.75rem; font-size: var(--text-sm); }
.cpop-fine { margin-bottom: 0.25rem; font-size: var(--text-xs); color: var(--muted-fg); }
.cpop-when { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.625rem; font-size: var(--text-xs); line-height: 1.45; color: var(--muted-fg); }
.cpop-when .ic { flex: none; margin-top: 1px; }
.cpop-ft { display: flex; align-items: center; gap: 0.625rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--hair); font-size: var(--text-sm); }
.cpop-ft .lnk { font-size: var(--text-sm); color: var(--fg-2); font-weight: 500; }
.cpop-ft .lnk:hover { color: var(--primary); }
.cpop-packs li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--hair); }
.cpop-packs li > span:nth-child(2) { flex: 1; display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--text-sm); }
.cpop-packs b { font-weight: 600; color: var(--fg); }
.cpop-packs small { color: var(--muted-fg); font-size: var(--text-xs); }
.cpop-pk { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: var(--subtle); color: var(--fg-2); }
.cpop-low { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-top: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 10px; background: var(--tint); font-size: var(--text-sm); line-height: 1.4; color: var(--ats-title); text-align: left; transition: background-color 140ms var(--ease); }
.cpop-low span { flex: 1; }
.cpop-low .ic { color: var(--primary); flex: none; }
.cpop-low:hover { background: var(--tint-2); }

/* =============================================================== the Two-sided dialog (5d) */
.dlg.d-two { width: min(57rem, 100%); display: grid; grid-template-columns: 19.5rem minmax(0, 1fr); overflow: hidden; }
.dt-art { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0.5rem 0 0.5rem 0.5rem; border-radius: 12px; padding: 1.25rem 1.25rem 1.25rem; color: #fff; overflow: hidden; isolation: isolate;
	background: radial-gradient(70% 45% at 50% 34%, rgba(48, 78, 255, 0.42), transparent 72%), linear-gradient(180deg, #0b1653 0%, #060d35 100%); }
.dt-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(60% 45% at 50% 34%, #000, transparent); mask-image: radial-gradient(60% 45% at 50% 34%, #000, transparent); }
.dt-name { align-self: flex-start; display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.625rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: var(--text-xs); font-weight: 500; color: rgba(255, 255, 255, 0.86); }
.dt-orb { margin: auto 0; padding: 1.25rem 0; color: #fff; box-sizing: content-box; }
.dt-tiles { display: grid; gap: 0.625rem; width: 100%; }
.dt-tile { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
.dt-tile small { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.66); }
.dt-tile b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.dt-tile span { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.6); }
.dt-main { position: relative; display: flex; flex-direction: column; padding: 2rem 2rem 1.375rem; min-width: 0; }
.dt-main h2 { padding-right: 2.5rem; font-family: var(--font-display); font-size: 2.125rem; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; color: var(--ats-title); text-wrap: balance; }
.dt-sub { margin-top: 0.625rem; font-size: 1rem; line-height: 1.55; color: var(--muted-fg); }
.dt-link { margin-top: 1.25rem; height: 2.875rem; padding: 0 0.25rem 0 0.875rem; }
.dt-link > .ic { color: var(--muted-fg); flex: none; }
.dt-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: var(--text-sm); color: var(--fg); }
.dt-link .btn { height: 2.25rem; }
.dt-or { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-size: var(--text-xs); color: var(--muted-fg); }
.dt-or b { margin-left: 0.25rem; color: var(--fg); }
.dt-or .cpy-i { width: 1.625rem; height: 1.625rem; }
.dt-main .f-inv { margin-top: 0.875rem; }
.dt-main h3 { margin-top: 1.375rem; font-size: var(--text-sm); font-weight: 600; color: var(--ats-title); }
.dt-how { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.625rem; }
.dt-how li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--text-sm); line-height: 1.45; color: var(--fg-2); }
.dt-how li > span { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: -0.125rem; border-radius: 8px; background: var(--tint); color: var(--primary); }
.dt-how b { font-weight: 600; color: var(--ats-title); }
.dt-prog { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.dt-prog p { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); color: var(--fg-2); }
.dt-track { position: relative; display: block; height: 0.375rem; margin-top: 0.5rem; border-radius: 99px; background: var(--muted); }
.dt-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--primary); }
.dt-track b { position: absolute; top: 50%; width: 2px; height: 0.625rem; transform: translate(-50%, -50%); border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
.dt-stats { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.875rem; font-size: var(--text-xs); color: var(--muted-fg); }
.dt-stats b { color: var(--fg); font-weight: 600; }
.dt-all { margin-left: auto; display: inline-flex; align-items: center; gap: 0.125rem; font-size: var(--text-xs); font-weight: 500; color: var(--primary); }
.dt-terms { margin-top: 0.75rem; text-align: center; }
.dt-terms .lnk { font-size: var(--text-xs); color: var(--muted-fg); text-decoration: underline; text-underline-offset: 3px; }
.dt-main > .dlg-x { top: 1rem; right: 1rem; }
@media (max-width: 1023px) {
	.dt-art { margin: 0.5rem 0.5rem 0; }
	.dlg.d-two { grid-template-columns: minmax(0, 1fr); width: min(36rem, 100%); }
	.dt-art { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; }
	.dt-name { display: none; }
	.dt-orb { margin: 0; }
	.dt-tiles { grid-template-columns: 1fr 1fr; flex: 1; margin-top: 0; min-width: 14rem; }
	.dt-tile { padding: 0.5rem 0.75rem; }
	.dt-tile b { font-size: 1.125rem; }
	.dt-tile span { display: none; }
}

/* =============================================================== Spotlight's progress card, round 5 */
.c-prog { padding: 1.5rem 1.75rem 1.75rem; container-type: inline-size; container-name: prog; }
.cp-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cp-h h3 { font-family: var(--font-display); font-size: 1.0667rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ats-title); }
/* ring > next milestone > ledger, one row; the ledger keeps a hairline on its left like a flat panel's divider */
/* the ledger is capped so its values stay near their labels on very wide cards; spare width goes between the columns */
.pr-b { display: grid; grid-template-columns: 22rem fit-content(28rem) minmax(20rem, 30rem); justify-content: space-between; align-items: center; gap: 0 3rem; margin-top: 0.5rem; }
.pr-ring { position: relative; width: 22rem; }
.pr-ring > svg { display: block; width: 100%; height: auto; overflow: visible; }
.rg-s { fill: none; stroke-width: 12; stroke-linecap: butt; }
.rg-s.rest { stroke: var(--muted); }
.rg-s.way { stroke: color-mix(in oklab, var(--primary) 26%, #fff); }
.rg-s.done { stroke: var(--primary); }
.rg-n circle { fill: #fff; stroke: #c9cbd6; stroke-width: 2; }
.rg-n .rg-c { font-family: var(--font-sans); font-size: 11px; font-weight: 600; fill: var(--muted-fg); font-variant-numeric: tabular-nums; }
.rg-n .rg-l { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; fill: var(--muted-fg); font-variant-numeric: tabular-nums; }
.rg-n.done circle { fill: var(--primary); stroke: #fff; stroke-width: 2.5; }
.rg-n.done .rg-c { fill: #fff; }
.rg-n.done .rg-l { fill: var(--primary); }
.rg-n.next circle { stroke: var(--primary); stroke-width: 2; }
.rg-n.next .rg-c, .rg-n.next .rg-l { fill: var(--ats-title); }
.pr-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pr-c b { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--ats-title); }
.pr-c span { margin-top: 0.375rem; max-width: 7.5rem; font-size: var(--text-sm); line-height: 1.3; color: var(--muted-fg); }
.pr-next { min-width: 0; }
.pr-k { font-size: var(--text-sm); font-weight: 600; color: var(--primary); }
.pr-h { margin-top: 0.5rem; max-width: 28rem; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.18; font-weight: 600; letter-spacing: -0.022em; color: var(--ats-title); text-wrap: balance; }
.pr-h .tnum { white-space: nowrap; }
.pr-p { margin-top: 0.625rem; max-width: 28rem; text-wrap: pretty; font-size: 0.9375rem; line-height: 1.55; color: var(--muted-fg); }
.pr-led { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-left: 3rem; border-left: 1px solid var(--hair); }
.pr-led > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1.125rem 0; border-bottom: 1px solid var(--hair); }
.pr-led > div:last-child { border-bottom: 0; }
.pr-led dt { display: grid; grid-template-columns: auto 1fr; column-gap: 0.625rem; align-items: center; font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.pr-led dt small { grid-column: 2; margin-top: 0.1875rem; font-size: var(--text-xs); font-weight: 400; color: var(--muted-fg); }
.pr-led .sw { width: 0.625rem; height: 0.625rem; border-radius: 3px; }
.pr-led .sw.way { background: color-mix(in oklab, var(--primary) 26%, #fff); }
.pr-led .sw.done { background: var(--primary); }
.pr-led dd { margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--ats-title); white-space: nowrap; }
.pr-led dd.nil { color: var(--muted-fg); font-weight: 500; }
/* a narrower card: the ring stays left, the milestone and the ledger stack beside it */
/* three columns need ~80rem (ring 22 + milestone 28 + ledger 20 + gaps); below that the milestone headline got squeezed to four lines */
@container prog (max-width: 80rem) {
	.pr-b { grid-template-columns: 18rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 2.5rem; }
	.pr-ring { width: 18rem; grid-row: 1 / span 2; }
	.pr-next { align-self: end; }
	.pr-h { font-size: 1.5rem; max-width: none; }
	.pr-led { align-self: start; margin-top: 1rem; padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
	.pr-led > div { padding: 0.875rem 0; }
}
@container prog (max-width: 34rem) {
	.pr-b { grid-template-columns: minmax(0, 1fr); }
	.pr-ring { grid-row: auto; margin: 0 auto; }
	.pr-next { margin-top: 1rem; }
}

/* =============================================================== narrower windows */
@media (max-width: 1400px) {
	.dbh-t h2 { font-size: 1.5rem; }
}
@media (max-width: 1200px) {
	.stc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.adb-g { grid-template-columns: minmax(0, 1fr); }
}