/* Hire Bellatrix — web app styles. Brand from the original workspace: midnight navy, Bellatrix blue, violet, cyan. */
:root {
  --navy: #07143D; --navy-2: #0D1F52; --navy-3: #16296A;
  --blue: #1675FF; --blue-d: #145FC8; --violet: #6334E6; --cyan: #16DDF5;
  --ink: #0F1B3D; --ink-2: #44506B; --muted: #6B7690; --line: #E3E8F2; --line-2: #EEF2F8;
  --bg: #F4F7FC; --card: #FFFFFF; --soft-blue: #EAF2FF;
  --green: #087A56; --green-bg: #E6F7EF; --amber: #9A5B00; --amber-bg: #FFF4DE; --red: #B42318; --red-bg: #FDECEA;
  --gray-bg: #EEF1F6;
  --radius: 14px; --shadow: 0 1px 2px rgba(15,27,61,.06), 0 4px 14px rgba(15,27,61,.05);
  --grad: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg);
       -webkit-font-smoothing: antialiased; }
a { color: var(--blue-d); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; letter-spacing: -.01em; }
h3 { font-size: 13px; margin: 0 0 8px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.muted { color: var(--muted); } .small { font-size: 12px; } .nowrap { white-space: nowrap; }
.right { text-align: right; } .center { text-align: center; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: radial-gradient(circle at 20% -10%, rgba(99,52,230,.35), transparent 40%), var(--navy); color: #C9D5F5;
        padding: 18px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; color: #fff; }
.brand img { width: 34px; height: 38px; object-fit: contain; }
.brand .word { line-height: 1; } .brand .w1 { font-size: 10px; letter-spacing: .34em; color: #9FB3E8; font-weight: 700; }
.brand .w2 { font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: #C9D5F5; font-weight: 550; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav a.on { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(22,117,255,.35); }
.nav .ico { width: 18px; text-align: center; opacity: .9; }
/* Sidebar groups (Rishi 2026-10-19: compact, under categories) */
.nav { gap: 1px; } .nav a { padding: 7px 11px; font-size: 13.5px; }
.nav-grp { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.nav-h { padding: 0 11px 3px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(201,213,245,.5); }
.nav .badge { margin-left: auto; background: var(--cyan); color: var(--navy); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 0 7px; }
.side .me { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.side .me b { color: #fff; display: block; font-size: 13px; } .side .me form { margin-top: 8px; }
.side .me button { background: transparent; border: 1px solid rgba(255,255,255,.18); color: #C9D5F5; border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; background: rgba(244,247,252,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
       padding: 12px 28px; display: flex; align-items: center; gap: 16px; }
.search { position: relative; flex: 1; max-width: 560px; }
.search input[type=search] { width: 100%; padding: 10px 14px 10px 36px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; }
.search input:focus { outline: 2px solid rgba(22,117,255,.25); border-color: var(--blue); }
.search .glass { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; z-index: 1; }
.search-results { position: absolute; top: 46px; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px;
                  box-shadow: 0 16px 40px rgba(15,27,61,.14); overflow: hidden; }
.search-results:empty { display: none; }
.search-results .grp { padding: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.search-results a { display: block; padding: 8px 14px; color: var(--ink); } .search-results a:hover { background: var(--soft-blue); text-decoration: none; }
.content { padding: 24px 28px 48px; max-width: 1480px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin-top: 4px; }

/* ---------- cards / grid ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stat .label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat .value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; }
.stat .hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.stat.hero { background: radial-gradient(circle at 90% 0%, rgba(22,221,245,.25), transparent 45%), linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
             color: #fff; border: 0; } .stat.hero .label, .stat.hero .hint { color: #A9BCEB; }
.list { display: flex; flex-direction: column; } .list > * + * { border-top: 1px solid var(--line-2); }
.row-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.row-item .grow { flex: 1; min-width: 0; } .row-item .title { font-weight: 650; } .row-item .meta { color: var(--muted); font-size: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- job cards ---------- */
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.job { display: block; color: var(--ink); transition: transform .08s ease, box-shadow .12s ease; }
.job:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(15,27,61,.10); border-color: #C9D8F5; }
.job .client { color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.job .title { font-size: 16px; font-weight: 750; margin: 2px 0 12px; letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.funnel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.funnel div { background: var(--line-2); border-radius: 8px; padding: 6px 4px; text-align: center; }
.funnel b { display: block; font-size: 15px; } .funnel span { font-size: 10px; color: var(--muted); }
.funnel div.hot { background: var(--soft-blue); } .funnel div.hot b { color: var(--blue-d); }

/* ---------- pills / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.pill.reach_out { background: var(--green-bg); color: var(--green); } .pill.verify_first { background: var(--soft-blue); color: var(--blue-d); }
.pill.hold { background: var(--amber-bg); color: var(--amber); } .pill.skip, .pill.not_assessed, .pill.in_process { background: var(--gray-bg); color: var(--muted); }
.pill.status-active { background: var(--green-bg); color: var(--green); } .pill.status-paused { background: var(--amber-bg); color: var(--amber); }
.pill.status-closed, .pill.status-archived { background: var(--gray-bg); color: var(--muted); }
.vchip { margin-top: 4px; font-size: 11.5px; color: var(--blue-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.pill.stage { background: #F1ECFF; color: #4B23B8; } .pill.dnc { background: var(--red-bg); color: var(--red); }
.score { display: inline-flex; min-width: 38px; justify-content: center; border-radius: 9px; padding: 3px 7px; font-weight: 800; font-size: 13px; }
.score.strong { background: linear-gradient(135deg, #FFD65C, #F5A524); color: #3D2600; box-shadow: 0 2px 8px rgba(245,165,36,.35); }
.score.good { background: #12B76A; color: #fff; }
.score.ok { background: var(--soft-blue); color: var(--blue-d); } .score.risky, .score.none { background: var(--gray-bg); color: var(--muted); }

/* ---------- buttons / forms ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px;
       padding: 8px 13px; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: #BCCBEB; text-decoration: none; }
.btn.primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(22,117,255,.25); }
.btn.small { padding: 5px 10px; font-size: 12px; }
select, input[type=text], input[type=search], input[type=number], input[type=email], input[type=password], textarea {
  font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--ink); }
.seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg a { padding: 6px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 600; }
.seg a.on { background: var(--navy); color: #fff; } .seg a:hover { text-decoration: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 11px; font-weight: 600; font-size: 12px; cursor: pointer; color: var(--ink-2); }
.chip input { display: none; } .chip:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip .n { opacity: .7; margin-left: 4px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--ink-2); font-weight: 650; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--blue-d); border-color: var(--blue); } .tabs a:hover { text-decoration: none; color: var(--ink); }

/* ---------- table ---------- */
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700;
             padding: 10px 12px; background: #FAFBFE; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: #F7FAFF; }
table.t tr.sel td { background: var(--soft-blue); }
.person .name { font-weight: 700; } .person .sub { color: var(--muted); font-size: 12px; max-width: 420px; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 10px 12px; color: var(--muted); }

/* ---------- side panel ---------- */
.panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 100vw); background: #fff; z-index: 50;
         box-shadow: -18px 0 50px rgba(15,27,61,.18); overflow-y: auto; transform: translateX(100%); transition: transform .16s ease; }
.panel.open { transform: none; }
.panel-top { position: sticky; top: 0; z-index: 2; background: #fff; }
.panel-head { background: #fff; border-bottom: 1px solid var(--line); padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; }
.panel-head .x { margin-left: auto; border: 0; background: var(--line-2); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 16px; }
.panel-body { padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scores div { border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.scores b { display: block; font-size: 22px; } .scores span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }
.crit { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 4px 0; }
.crit .s { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.s-S { background: var(--green-bg); color: var(--green); } .s-P { background: var(--soft-blue); color: var(--blue-d); }
.s-U { background: var(--gray-bg); color: var(--muted); } .s-C { background: var(--red-bg); color: var(--red); }
.note { border-radius: 10px; padding: 10px 12px; font-size: 13px; } .note.ok { background: var(--green-bg); color: var(--green); }
.note.err { background: var(--red-bg); color: var(--red); } .note.info { background: var(--soft-blue); color: var(--blue-d); }
.note.gate-warn { background: var(--amber-bg); color: var(--amber); }   /* 🛡️ audience gate notes (_gate.html) */
.stage-form { display: flex; gap: 8px; flex-wrap: wrap; } .stage-form select { flex: 1; min-width: 180px; }
.scrim { position: fixed; inset: 0; background: rgba(7,20,61,.25); z-index: 40; display: none; } .scrim.open { display: block; }

/* ---------- kanban ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: #EDF1F8; border-radius: 14px; padding: 10px; min-height: 260px; display: flex; flex-direction: column; gap: 8px; }
.col-head { display: flex; justify-content: space-between; font-weight: 750; font-size: 13px; padding: 2px 4px 6px; }
.col-head .n { background: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; }
.col.over { outline: 2px dashed var(--blue); background: var(--soft-blue); }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 10px; cursor: grab; box-shadow: 0 1px 2px rgba(15,27,61,.05); }
.kcard:active { cursor: grabbing; } .kcard .name { font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.kcard .sub { color: var(--muted); font-size: 12px; margin-top: 2px; } .kcard.dragging { opacity: .5; }

/* ---------- pipeline grid ---------- */
table.grid-t td.cell { text-align: center; font-weight: 700; } table.grid-t td.cell.zero { color: #C3CADB; font-weight: 500; }
table.grid-t td.cell a { display: block; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px;
         background: radial-gradient(circle at 15% 10%, rgba(22,117,255,.18), transparent 40%), radial-gradient(circle at 85% 90%, rgba(99,52,230,.18), transparent 40%), var(--bg); }
.login .box { width: min(420px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: 0 24px 60px rgba(15,27,61,.12); }
.login img { width: 100%; max-width: 280px; display: block; margin: 0 auto 18px; }
.login label { display: block; font-weight: 600; margin: 14px 0 6px; } .login input { width: 100%; }
.login .btn { width: 100%; justify-content: center; margin-top: 20px; padding: 11px; }

.empty { text-align: center; color: var(--muted); padding: 36px 12px; }
.loading { opacity: .55; transition: opacity .1s; }
.htmx-request.loading, .htmx-request .loading { opacity: .5; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: sticky; top: 0; height: auto; z-index: 30; flex-direction: row; align-items: center; padding: 8px 10px; gap: 8px; overflow-x: auto; }
  .brand { padding: 0 4px; } .brand .word { display: none; }
  .side { flex-wrap: wrap; overflow-x: visible; }
  .nav-grp { display: contents; } .nav-h { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; flex: 1; } .nav a { padding: 6px 9px; white-space: nowrap; font-size: 13px; }
  .nav .lbl-long { display: inline; } .nav a.hide-sm { display: none; }
  .side .me { display: none; }
  .top { position: static; padding: 10px 14px; } .content { padding: 16px 14px 40px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3, .g2 { grid-template-columns: 1fr; }
  .jobs { grid-template-columns: minmax(0, 1fr); } .hide-sm { display: none; }
  .funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-head h1 { font-size: 21px; }
  .board { grid-auto-columns: minmax(220px, 80vw); }
  .stat .value { font-size: 24px; }
}

/* ---------- full profile panel ---------- */
.panel-nav { background: #fff; display: flex; gap: 2px; padding: 6px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.panel-nav a { padding: 6px 10px; border-radius: 8px; font-weight: 650; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.panel-nav a:hover { background: var(--soft-blue); text-decoration: none; color: var(--blue-d); }
.sec { border-top: 1px solid var(--line-2); padding-top: 14px; scroll-margin-top: 150px; }
.sec > h3 { margin-bottom: 10px; }
.lbl { font-weight: 700; font-size: 12px; color: var(--ink-2); margin: 12px 0 4px; display: flex; align-items: center; gap: 8px; }
.quote { background: #F7F9FD; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.quote.pre { white-space: pre-wrap; max-height: 420px; overflow: auto; }
ul.tight { margin: 4px 0; padding-left: 18px; } ul.tight li { margin: 2px 0; }
.scores.four { grid-template-columns: repeat(4, 1fr); }
.reach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reach-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; position: relative; padding-left: 24px; }
.reach-item .dot { position: absolute; left: 10px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #C3CADB; }
.reach-item .dot.on { background: #12B76A; } .reach-item .dot.warn { background: #F79009; }
.bar { height: 8px; background: var(--line-2); border-radius: 999px; overflow: hidden; margin: 2px 0 6px; }
.bar span { display: block; height: 100%; background: var(--grad); } .bar.violet span { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.warn-text { color: var(--amber); }
.job-line { padding: 8px 0; border-bottom: 1px dashed var(--line-2); } .job-line:last-of-type { border-bottom: 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); margin-top: 3px; }
@media (max-width: 900px) { .reach-grid { grid-template-columns: 1fr; } .scores.four { grid-template-columns: repeat(2, 1fr); } .sec { scroll-margin-top: 220px; } }

/* ---------- live search card ---------- */
.card.live { border-color: #C9D8F5; background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%); }
.live-title { font-size: 18px; font-weight: 800; margin: 6px 0 4px; display: flex; align-items: center; gap: 8px; }
.live-icon { font-size: 22px; animation: bx-pulse 1.6s ease-in-out infinite; }
@keyframes bx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.rec { border-top: 1px solid var(--line-2); padding: 10px 0; } .rec:first-of-type { border-top: 0; }

/* candidate selection + bulk bar + report builder */
.selcol { width: 34px; padding-right: 0 !important; }
.selcol input { width: 17px; height: 17px; cursor: pointer; }
.bulkbar { position: sticky; bottom: 12px; z-index: 20; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
           background: var(--navy); color: #fff; border-radius: var(--radius); padding: 10px 14px; box-shadow: 0 8px 24px rgba(7,20,61,.25); }
.bulkbar[hidden] { display: none; }
.bulkbar select { min-width: 160px; }
.bulkbar .btn:not(.primary) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff;
         padding: 10px 16px; border-radius: 10px; max-width: min(92vw, 640px); box-shadow: var(--shadow); }
label.opt { display: block; padding: 6px 0; cursor: pointer; }
.ex-filters { margin-top: 8px; transition: opacity .15s; } .ex-filters.dim { opacity: .4; pointer-events: none; }
.ex-filters .lbl, #export-form .lbl { margin-top: 12px; }
.chip.internal-only.off { opacity: .35; text-decoration: line-through; }
.sticky-card { position: sticky; top: 16px; }
@media (max-width: 900px) { .sticky-card { position: static; } .bulkbar { bottom: 8px; } }

/* ---------- talent pool: add people + insights ---------- */
.add-people { margin-bottom: 16px; border-color: #C9D8F5; background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%); }
.add-people:not([open]) { display: none; }
.add-people summary { font-weight: 800; font-size: 16px; cursor: pointer; list-style: none; }
.add-people summary::-webkit-details-marker { display: none; }
.add-people textarea { width: 100%; resize: vertical; }
.add-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.add-grid input[type=file] { width: 100%; padding: 10px; border: 1px dashed #BCCBEB; border-radius: 10px; background: #fff; margin-bottom: 4px; }
.import-preview { margin-top: 14px; }
.pill.added { background: #E8FBFE; color: #0B6E7C; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.legend { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-left: 6px; }
.sw.search { background: var(--blue); } .sw.team { background: var(--cyan); } .sw.line { background: var(--violet); height: 3px; vertical-align: 2px; }
svg.growth { width: 100%; height: auto; display: block; margin-top: 6px; }
svg.growth .axis { stroke: var(--line); } svg.growth .b-search { fill: var(--blue); opacity: .85; } svg.growth .b-team { fill: var(--cyan); }
svg.growth .total { fill: none; stroke: var(--violet); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
svg.growth .dot { fill: var(--violet); stroke: #fff; stroke-width: 2; }
svg.growth .tick { font-size: 11px; fill: var(--muted); text-anchor: middle; } svg.growth .val { font-size: 11px; font-weight: 700; fill: var(--ink-2); text-anchor: middle; }
.feed { display: flex; flex-direction: column; gap: 10px; }
.feed-item { display: flex; gap: 10px; align-items: flex-start; min-width: 0; } .feed-item > div { min-width: 0; }
.feed-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px;
            background: var(--soft-blue); color: var(--blue-d); }
.feed-ico.import { background: #E8FBFE; color: #0B6E7C; }
.niches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 6px; }
.niche { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line);
         color: var(--ink); overflow: hidden; isolation: isolate; font-weight: 600; font-size: 13px; }
.niche::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #EAF2FF, #F1ECFF); z-index: -1; }
.niche:hover { border-color: #BCCBEB; text-decoration: none; } .niche b { color: var(--blue-d); }
.kv-bar { display: flex; justify-content: space-between; font-size: 13px; margin-top: 6px; }
.stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line-2); margin: 4px 0 12px; }
.s-fresh { background: var(--green); } .s-aging { background: #E0A100; } .s-stale { background: var(--red); } .s-link_only { background: #C3CADB; }
.stack-legend { display: grid; gap: 6px; font-size: 13px; } .stack-legend em { color: var(--muted); font-style: normal; font-size: 12px; margin-left: 4px; }
.stack-legend .sw { margin: 0 6px 0 0; }
.learn ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); } .learn b { color: var(--ink); }
@media (max-width: 900px) { .add-grid { grid-template-columns: 1fr; } }
.feed-item > div { flex: 1; } .feed-item .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-sum { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.growth-sum b { display: block; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
@media (max-width: 900px) { .grid.g2 { grid-template-columns: minmax(0, 1fr); } }

/* ================= look & feel v8 (2026-10-09): icons, avatars, colour by meaning, new dashboard. CSS only, no extra requests ================= */
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i.b { stroke: none; } .i.big { width: 30px; height: 30px; display: block; margin: 0 auto 8px; opacity: .45; }
.nav .ico { width: 20px; display: inline-grid; place-items: center; } .nav .ico .i { width: 18px; height: 18px; }
.nav a { transition: background .12s ease, color .12s ease; } .nav a:hover .i { transform: translateX(1px); }
.search .glass .i { width: 16px; height: 16px; display: block; }
.btn .i { width: 15px; height: 15px; } .pill .i { width: 13px; height: 13px; }

/* avatars: initials on a colour picked from the name */
.av { --h: 220; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-weight: 750; font-size: 12px;
      letter-spacing: .02em; background: hsl(var(--h) 80% 93%); color: hsl(var(--h) 55% 32%); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 85%); }
.av.sm { width: 22px; height: 22px; font-size: 9.5px; } .av.lg { width: 48px; height: 48px; font-size: 17px; }
.av.logo { width: 22px; height: 22px; border-radius: 7px; font-size: 9.5px; margin-right: 8px; vertical-align: middle; }
.side .me { gap: 10px; align-items: flex-start; } @media (min-width: 901px) { .side .me { display: flex; } } .av.me-av { background: var(--grad); color: #fff; box-shadow: none; }
.pwrap { display: flex; align-items: center; gap: 10px; min-width: 0; } .pmain { min-width: 0; }
.kwho { display: flex; align-items: center; gap: 7px; min-width: 0; }
a.li, span.li { display: inline-flex; vertical-align: -2px; opacity: .9; cursor: pointer; } a.li:hover, span.li:hover { opacity: 1; transform: scale(1.1); }
a.li .i, span.li .i { width: 16px; height: 16px; }

/* stages: one colour each, used on pills, kanban columns and job funnels */
[class*="st-"] { --sc: #98A2B3; --sb: #EEF1F6; --sf: #56607A; }
.st-contacted { --sc: #1675FF; --sb: #EAF2FF; --sf: #145FC8; } .st-replied { --sc: #0BA5BE; --sb: #E3FAFD; --sf: #0B6E7C; }
.st-submitted { --sc: #6334E6; --sb: #F1ECFF; --sf: #4B23B8; } .st-client-interview, .st-interviewing { --sc: #F5A524; --sb: #FFF4DE; --sf: #9A5B00; }
.st-offer { --sc: #E0457B; --sb: #FDEBF3; --sf: #A3195B; } .st-on-hold { --sc: #F79009; --sb: #FFF1E6; --sf: #B54708; }
.st-hired { --sc: #12B76A; --sb: #E6F7EF; --sf: #087A56; }
.st-client-rejected, .st-rejected, .st-not-interested { --sc: #F04438; --sb: #FDECEA; --sf: #B42318; }
.pill.stage[class*="st-"] { background: var(--sb); color: var(--sf); }
.pill.stage[class*="st-"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc); }
.col[class*="st-"] { border-top: 3px solid var(--sc); } .col-head .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); margin-right: 7px; }
.funnel div.hot[class*="st-"] { background: var(--sb); box-shadow: inset 0 -2px 0 var(--sc); } .funnel div.hot[class*="st-"] b { color: var(--sf); }
.job-foot { margin-top: 10px; display: flex; align-items: center; gap: 5px; }
.job .client { display: flex; align-items: center; }

/* page titles get their menu icon */
.ph-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; margin-right: 10px; vertical-align: -6px;
          background: linear-gradient(135deg, #EAF2FF, #F1ECFF); color: var(--violet); box-shadow: inset 0 0 0 1px #DCE4F7; }
.ph-ico .i { width: 18px; height: 18px; }
.sec-h { display: flex; align-items: center; gap: 8px; } .sec-h .i { color: var(--violet); }
.empty .i.big + div { margin-top: 2px; }

/* dashboard hero */
.hero-band { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px; margin-bottom: 16px; color: #fff; isolation: isolate;
  background: radial-gradient(circle at 85% 20%, rgba(22,221,245,.22), transparent 38%), radial-gradient(circle at 10% 120%, rgba(99,52,230,.55), transparent 50%),
              linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); box-shadow: 0 18px 40px rgba(7,20,61,.22); }
.hero-text { position: relative; z-index: 1; max-width: 620px; }
.hero-date { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8FA6E0; }
.hero-band h1 { font-size: 30px; margin: 4px 0 6px; letter-spacing: -.03em; }
.hero-sub { color: #C9D5F5; font-size: 15px; } .hero-sub b { color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn.glow { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--navy); border: 0; font-weight: 750; box-shadow: 0 8px 22px rgba(22,221,245,.35); }
.btn.glow:hover { filter: brightness(1.05); }
.btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); } .btn.ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
svg.orion { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); height: 118%; width: auto; z-index: 0; opacity: .95; }
.orion .lines path { stroke: rgba(160,190,255,.28); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.orion .stars circle { fill: #DCE6FF; } .orion .dust circle { fill: rgba(220,230,255,.5); }
.orion .bx { fill: #fff; } .orion .bx-glow { fill: rgba(22,221,245,.28); animation: bx-glow 3.2s ease-in-out infinite; transform-origin: 212px 42px; }
.orion .bx-l { fill: #8FE9F7; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.orion .tw { animation: twinkle 2.8s ease-in-out infinite; } .orion .d2 { animation-delay: .9s; } .orion .d3 { animation-delay: 1.8s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bx-glow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.45); opacity: .4; } }

/* stat tiles with a coloured icon */
.stat { position: relative; overflow: hidden; color: var(--ink); transition: transform .1s ease, box-shadow .12s ease; }
a.stat:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(15,27,61,.10); }
.stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tc); }
.stat-ico { float: right; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tb); color: var(--tc); }
.stat-ico .i { width: 20px; height: 20px; }
.t-cyan { --tc: #0BA5BE; --tb: #E3FAFD; } .t-violet { --tc: #6334E6; --tb: #F1ECFF; } .t-blue { --tc: #1675FF; --tb: #EAF2FF; } .t-amber { --tc: #E08A00; --tb: #FFF4DE; }

/* feed icons */
.feed-ico .i { width: 15px; height: 15px; } .feed-ico.ok { background: var(--green-bg); color: var(--green); }
.feed-ico.bad { background: var(--red-bg); color: var(--red); } .feed-ico.run { background: var(--soft-blue); color: var(--blue-d); }
.row-item .pos { color: var(--green); font-weight: 700; }
.row-item { border-radius: 10px; transition: background .1s ease; } a.row-item:hover { background: #F7FAFF; }

@media (max-width: 900px) {
  .hero-band { padding: 20px 18px; border-radius: 16px; } .hero-band h1 { font-size: 24px; } .hero-sub { font-size: 14px; }
  svg.orion { right: -60px; opacity: .45; }
  .stat-ico { width: 30px; height: 30px; border-radius: 9px; } .stat-ico .i { width: 16px; height: 16px; }
  .ph-ico { width: 30px; height: 30px; margin-right: 8px; vertical-align: -5px; }
  .nav .ico .i { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .orion .tw, .orion .bx-glow, .live-icon, .qhud.bump { animation: none !important; } }
.stat .value.sm { font-size: 22px; line-height: 1.25; } .row-item .meta b.pos { white-space: nowrap; }
.feed-ico[class*="st-"] { background: var(--sb); color: var(--sf); }
.funnel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 900px) {   /* phone: the menu is one swipeable row instead of a wall of links */
  .side { flex-wrap: nowrap; overflow: hidden; padding: 8px 10px; }
  .nav-grp { display: contents; } .nav-h { display: none; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .nav::-webkit-scrollbar { display: none; } .nav a { flex: none; }
  .brand img { width: 28px; height: 30px; } .stat .value.sm { font-size: 18px; }
}

/* ================= brand motion v9 (2026-10-09): star sky, shooting stars, count-up, gold shimmer, orbit loader. CSS + tiny JS ================= */
/* 1. drifting star sky behind the menu */
.side { isolation: isolate; overflow: hidden; }
.side::before, .side::after { content: ""; position: absolute; inset: -50% 0 0 0; z-index: -1; pointer-events: none; background-repeat: repeat; }
.side::before { background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 190px 150px, #BFF6FD, transparent), radial-gradient(1px 1px at 60px 200px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 160px 260px, #fff, transparent), radial-gradient(1.2px 1.2px at 90px 330px, rgba(200,215,255,.9), transparent);
  background-size: 232px 360px; opacity: .55; animation: sky-drift 90s linear infinite; }
.side::after { background-image: radial-gradient(1px 1px at 40px 110px, #fff, transparent), radial-gradient(1.6px 1.6px at 200px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 190px, rgba(255,255,255,.8), transparent), radial-gradient(1.4px 1.4px at 10px 290px, #CFC2FF, transparent);
  background-size: 232px 300px; opacity: .8; animation: sky-drift 55s linear infinite, sky-twinkle 4s ease-in-out infinite; }
@keyframes sky-drift { from { transform: translateY(0); } to { transform: translateY(33.33%); } }
@keyframes sky-twinkle { 0%, 100% { opacity: .8; } 50% { opacity: .35; } }
.nav a.on { position: relative; animation: nav-glow 3.5s ease-in-out infinite; }
.nav a.on::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px rgba(22,221,245,.9), 0 0 14px 4px rgba(22,221,245,.45); }
@keyframes nav-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(22,117,255,.35); } 50% { box-shadow: 0 6px 26px rgba(22,221,245,.55); } }
.nav a.on:has(.badge)::after { display: none; }

/* 2. shooting star (fired by app.js on wins) */
.bx-shoot { position: fixed; z-index: 90; pointer-events: none; width: 160px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(22,221,245,.8) 70%, #fff); filter: drop-shadow(0 0 6px rgba(22,221,245,.9));
  transform: rotate(-24deg); animation: bx-shoot 1.1s cubic-bezier(.3,.6,.4,1) forwards; }
.bx-shoot::after { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 4px rgba(22,221,245,.9), 0 0 24px 8px rgba(99,52,230,.5); }
@keyframes bx-shoot { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 1; } 100% { opacity: 0; translate: -70vw 32vw; } }
.bx-spark { position: fixed; z-index: 90; pointer-events: none; width: 8px; height: 8px; box-shadow: 0 0 8px var(--c, #FFD65C); border-radius: 50%; background: var(--c, #FFD65C);
  animation: bx-spark .9s ease-out forwards; }
@keyframes bx-spark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

/* 3. login: Orion draws itself, Bellatrix lights last, then the sign-in box rises */
.login.sky { background: radial-gradient(circle at 70% 20%, rgba(22,221,245,.16), transparent 40%), radial-gradient(circle at 15% 90%, rgba(99,52,230,.45), transparent 50%),
  linear-gradient(160deg, #050E2E 0%, var(--navy) 50%, var(--navy-3) 100%); position: relative; overflow: hidden; }
.login.sky::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 30px 40px, #fff, transparent),
  radial-gradient(1px 1px at 140px 120px, rgba(255,255,255,.7), transparent), radial-gradient(1.4px 1.4px at 220px 60px, #BFF6FD, transparent),
  radial-gradient(1px 1px at 90px 210px, #fff, transparent), radial-gradient(1px 1px at 260px 240px, rgba(255,255,255,.6), transparent);
  background-size: 300px 280px; opacity: .6; animation: sky-twinkle 5s ease-in-out infinite; }
svg.login-orion { position: absolute; width: min(760px, 120vw); left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .9; }
.login-orion .ln { fill: none; stroke: rgba(160,190,255,.45); stroke-width: 1.2; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.6s ease-out forwards; }
.login-orion .st { fill: #DCE6FF; opacity: 0; animation: pop .5s ease-out forwards; }
.login-orion .bx { fill: #fff; opacity: 0; animation: pop .6s ease-out 1.9s forwards; }
.login-orion .bxg { fill: rgba(22,221,245,.35); opacity: 0; transform-origin: 740px 150px; animation: pop .6s ease-out 1.9s forwards, bx-glow 3.2s ease-in-out 2.5s infinite; }
.login-orion .bxl { fill: #8FE9F7; font: 700 13px Inter, sans-serif; letter-spacing: .12em; opacity: 0; animation: pop .6s ease-out 2.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.login.sky .box { position: relative; z-index: 1; animation: rise .7s cubic-bezier(.2,.8,.2,1) .5s both; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.login-orion .st, .login-orion .bx { transform-box: fill-box; transform-origin: center; }

/* 5. gold shimmer on 90+ */
.score.strong { background: linear-gradient(110deg, #F5A524 0%, #FFD65C 35%, #FFF3C4 50%, #FFD65C 65%, #F5A524 100%); background-size: 250% 100%;
  animation: shimmer 3.2s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }

/* 6. orbit loader + top progress line while a page or list loads (shows only if it takes > 150 ms) */
.bx-busy { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), var(--violet), transparent); background-size: 50% 100%; background-repeat: no-repeat;
  animation: busy-line 1.1s ease-in-out infinite; }
.bx-orbit { position: fixed; right: 18px; top: 14px; z-index: 100; width: 26px; height: 26px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s;
  border: 1.5px dashed rgba(99,52,230,.35); animation: orbit 1s linear infinite; }
.bx-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; margin-left: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 8px 2px rgba(22,221,245,.8); }
html.busy .bx-busy, html.busy .bx-orbit { opacity: 1; transition-delay: .15s; }
html.busy .loading-target, html.busy #candidate-table { opacity: .6; transition: opacity .15s .15s; }
@keyframes busy-line { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .bx-orbit { top: auto; bottom: 18px; } }

@media (prefers-reduced-motion: reduce) {
  .side::before, .side::after, .nav a.on, .score.strong, .login.sky::before, .login-orion .bxg { animation: none !important; }
  .bx-shoot, .bx-spark { display: none !important; }
  .login-orion .ln { animation: none; stroke-dashoffset: 0; } .login-orion .st, .login-orion .bx, .login-orion .bxl, .login.sky .box { animation: none; opacity: 1; }
}
.login-orion .ln { stroke: rgba(170,200,255,.6); stroke-width: 1.6; }
.bx-shoot { height: 3px; width: 220px; }
@media (max-width: 900px) {
  .nav a.on::after { display: none; }
  .login.sky { align-content: start; padding-top: 200px; }
  svg.login-orion { width: 135vw; top: 0; transform: translateX(-50%); }
}

/* Bellatrix speaks + tonight's sky (2026-10-09) */
.bella-say { display: none; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 14px; max-width: 560px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(143,233,247,.25); color: #fff; font-size: 14px; font-weight: 550; line-height: 1.4; }
.bella-say.on { display: flex; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.bella-say small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8FE9F7; font-weight: 800; }
.bs-star { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #07143D;
  background: radial-gradient(circle at 35% 35%, #fff, #8FE9F7 45%, #16DDF5); box-shadow: 0 0 12px rgba(22,221,245,.8); animation: bx-breathe 3s ease-in-out infinite; }
@keyframes bx-breathe { 0%, 100% { box-shadow: 0 0 8px rgba(22,221,245,.6); } 50% { box-shadow: 0 0 18px rgba(22,221,245,1); } }
.bella-say.light { background: linear-gradient(135deg, #EAF2FF, #F1ECFF); border-color: #DCE4F7; color: var(--ink); }
.bella-say.light small { color: var(--violet); }
.card.tonight { display: flex; gap: 20px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
  background: radial-gradient(circle at 15% 50%, rgba(22,221,245,.10), transparent 40%), var(--card); }
.qs-art { flex: none; width: 220px; height: 220px; border-radius: 18px; display: grid; place-items: center;
  background: radial-gradient(circle at 70% 20%, rgba(22,221,245,.22), transparent 45%), linear-gradient(150deg, #07143D, #16296A); }
.qs-txt { flex: 1; min-width: 240px; } .qs-line { font-weight: 700; color: var(--violet) !important; }
@media (max-width: 900px) { .qs-art { width: 100%; height: 200px; } .bella-say { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .bs-star, .bella-say.on { animation: none; } }

/* ================= home mission control (2026-10-09): weekly goal rings + client mission tracks ================= */
.goals-band { margin: 0 0 16px; padding: 16px 18px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.ring { position: relative; text-align: center; animation: rise .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; }
.ring svg { width: 100%; max-width: 116px; display: block; margin: 0 auto; transform: rotate(-90deg); }
.ring .trk, .m-ring .trk { fill: none; stroke: var(--line-2); stroke-width: 7; }
.ring .val { fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 213.6;
  animation: ring-fill 1.4s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0ms) + 200ms) both; }
.ring:nth-child(1) .val { stroke: #1675FF; } .ring:nth-child(2) .val { stroke: #0BA5BE; } .ring:nth-child(3) .val { stroke: #6334E6; }
.ring:nth-child(4) .val { stroke: #F5A524; } .ring:nth-child(5) .val { stroke: #12B76A; }
.ring.met .val { stroke: #F5A524; filter: drop-shadow(0 0 5px rgba(245,165,36,.7)); }
.ring.over .face { display: inline-block; animation: ringover 1.6s ease-in-out infinite; } @keyframes ringover { 50% { transform: scale(1.3) rotate(12deg); } }
.ring.over .ring-mid small { color: #B26A00; font-weight: 750; }
@media (prefers-reduced-motion: reduce) { .ring.over .face { animation: none; } }
.ring.met svg { animation: met-pulse 2.4s ease-in-out infinite; }
@keyframes ring-fill { from { stroke-dashoffset: 213.6; } }
@keyframes met-pulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 10px rgba(255,214,92,.9)); } }
.ring-mid { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; max-width: 116px; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05; }
.ring-mid .face { font-size: 17px; } .ring-mid b { font-size: 22px; letter-spacing: -.02em; } .ring-mid small { color: var(--muted); font-size: 11px; }
.ring-lbl { margin-top: 6px; font-weight: 700; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ring-lbl .i { color: var(--violet); width: 14px; height: 14px; display: none; } .ring-lbl span { color: var(--muted); font-weight: 500; font-size: 11px; }
.ring.met .ring-lbl::after { content: "Goal hit!"; font-size: 10.5px; font-weight: 800; color: #B26A00; background: #FFF4DE; border-radius: 999px; padding: 1px 8px; margin-top: 3px; }
.rings-day { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 60%; }
.rings-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rings-compact.rings-day { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
.rings-compact .ring svg, .rings-compact .ring-mid { max-width: 84px; }
.rings-compact .ring-mid .face { font-size: 13px; } .rings-compact .ring-mid b { font-size: 18px; } .rings-compact .ring-mid small { font-size: 10px; }
.rings-compact .ring-lbl { font-size: 12px; } .rings-compact .ring.met .ring-lbl::after { display: none; }
.sk-start { margin-top: 12px; } .sk-start .btn { width: 100%; justify-content: center; font-size: 15px; }
/* Dashboard layout (Rishi 2026-10-19: organised, same pieces): numbers → progress → goals + team → missions → feeds */
.dash-pair { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin: 0 0 18px; }
.dash-pair.solo { grid-template-columns: minmax(0, 1fr); }
.dash-pair > .goals-band, .dash-pair > .sky-home { margin: 0; }
.dash-sec { margin: 0 0 18px; } .stat-row { margin: 0 0 16px; }
.missions.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.missions.mgrid > .mcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-bottom { align-items: start; } .dash-bottom > .card { min-width: 0; }
@media (max-width: 900px) { .dash-pair, .missions.mgrid { grid-template-columns: minmax(0, 1fr); }
  .missions.mgrid { display: flex; flex-direction: column; } .missions.mgrid > .mcol { display: contents; } }
/* ✦ Company progress: a navy constellation, one star per step (Rishi 2026-10-19) */
.pv { position: relative; overflow: hidden; margin: 0 0 16px; padding: 18px 18px 20px; border-radius: 18px; color: #fff; box-shadow: var(--shadow);
  background: radial-gradient(circle at 88% 0%, rgba(22,221,245,.25), transparent 55%), radial-gradient(circle at 8% 100%, rgba(99,52,230,.38), transparent 55%),
              linear-gradient(135deg, #0B1640 0%, #1B2B6B 100%); }
.pv-dust { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; opacity: .55; pointer-events: none; }
.pv-dust .tw { animation: pv-twinkle 3.2s ease-in-out infinite; }
.pv-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pv-head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .01em; color: #fff; }
.pv-head span { color: rgba(255,255,255,.62); font-size: 12px; }
.pv-row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pv-row::before { content: ""; position: absolute; left: 8%; right: 8%; top: 34px; height: 2px; border-radius: 2px; opacity: .7;
  background: linear-gradient(90deg, rgba(22,221,245,.85), rgba(99,52,230,.85) 60%, rgba(245,165,36,.75)); }
.pv-step { position: relative; text-align: center; animation: rise .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; }
.pv-orb { position: relative; z-index: 1; width: var(--s); height: var(--s); margin: calc((68px - var(--s)) / 2) auto; border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--s) * .42);
  background: radial-gradient(circle at 35% 30%, #fff 0, #9BE8FF 18%, #1675FF 62%, #0B1640 100%); box-shadow: 0 0 18px rgba(22,221,245,.65); }
.pv-step.lit .pv-orb { animation: pv-glow 3.4s ease-in-out calc(var(--d, 0ms) + 600ms) infinite; }
.pv-step:not(.lit) .pv-orb { background: rgba(255,255,255,.06); box-shadow: none; border: 1.5px dashed rgba(255,255,255,.35); }
.pv-step:not(.lit) .pv-orb span { filter: grayscale(1); opacity: .55; }
.pv-step.gold .pv-orb { background: radial-gradient(circle at 35% 30%, #fff 0, #FFE08A 20%, #F5A524 62%, #5B3A00 100%); box-shadow: 0 0 24px rgba(255,214,92,.9); }
.pv-step b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pv-step:not(.lit) b { color: rgba(255,255,255,.45); }
.pv-l { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.pv-wk { display: inline-block; margin-top: 7px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.72); }
.pv-wk.up { background: rgba(18,183,106,.25); color: #7CF3B5; }
.pv-last { margin-top: 3px; font-size: 10.5px; color: rgba(255,255,255,.5); }
.pv-conv { position: absolute; z-index: 2; left: -4px; top: 25px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: #9BE8FF; background: #0E1B4D; border: 1px solid rgba(155,232,255,.45); }
@keyframes pv-glow { 50% { box-shadow: 0 0 30px rgba(22,221,245,.95); } }
@keyframes pv-twinkle { 50% { opacity: .2; } }
@media (max-width: 640px) {   /* phone: a vertical star path, one row per step */
  .pv { padding: 16px 14px 14px; }
  .pv-row { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 10px; }
  .pv-row::before { left: 21px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(22,221,245,.85), rgba(99,52,230,.85) 60%, rgba(245,165,36,.75)); }
  .pv-step { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "orb l num" "orb wk last";
    column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 10px 0; }
  .pv-step + .pv-step { border-top: 1px solid rgba(255,255,255,.08); }
  .pv-orb { grid-area: orb; width: 42px; height: 42px; margin: 0; font-size: 18px; }
  .pv-step b { grid-area: num; font-size: 24px; text-align: right; }
  .pv-l { grid-area: l; font-size: 14px; }
  .pv-wk { grid-area: wk; justify-self: start; margin: 0; }
  .pv-last { grid-area: last; margin: 0; text-align: right; }
  .pv-conv { left: 21px; right: auto; top: 0; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) { .pv-step, .pv-step.lit .pv-orb, .pv-dust .tw { animation: none; } }
/* 💼 positions + 🎯 clients: two small glowing star-bars under The Hunt (Rishi 2026-10-19) */
.pvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: -4px 0 18px; }
.pvs-card { position: relative; overflow: hidden; display: block; padding: 14px 16px 12px; border-radius: 16px; color: #fff; box-shadow: var(--shadow);
  background: radial-gradient(circle at 100% 0%, rgba(22,221,245,.2), transparent 55%), linear-gradient(135deg, #0B1640 0%, #1B2B6B 100%);
  animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
a.pvs-card:hover { text-decoration: none; filter: brightness(1.08); }
.pvs-top { display: flex; align-items: center; gap: 12px; }
.pvs-ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: radial-gradient(circle at 35% 30%, #fff 0, #9BE8FF 18%, #1675FF 62%, #0B1640 100%); box-shadow: 0 0 16px rgba(22,221,245,.6); }
.pvs-big { flex: 1; min-width: 0; line-height: 1.1; } .pvs-big b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-right: 6px; }
.pvs-big span { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.82); }
.pvs-note { font-size: 11.5px; font-weight: 650; color: #9BE8FF; text-align: right; line-height: 1.35; }
.pvs-bar { display: flex; gap: 3px; height: 10px; margin: 12px 0 8px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.08); }
.pvs-bar i { position: relative; flex: none; width: var(--w); min-width: 6px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c), #fff 40%)); box-shadow: 0 0 10px var(--c);
  transform-origin: left; animation: pvs-grow .9s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; }
.pvs-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%); animation: pvs-shine 3.6s ease-in-out calc(var(--d, 0ms) + 1s) infinite; }
.pvs-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: rgba(255,255,255,.72); }
.pvs-legend span { display: inline-flex; align-items: center; gap: 5px; } .pvs-legend b { color: #fff; }
.pvs-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.pvs-empty { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.6); }
@keyframes pvs-grow { from { transform: scaleX(0); } }
@keyframes pvs-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (max-width: 640px) { .pvs { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .pvs-card, .pvs-bar i, .pvs-bar i::after { animation: none; } }

.goals-week-h { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.goal-edit { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.goal-edit[hidden] { display: none; } .goal-edit label { font-size: 12px; font-weight: 650; display: flex; flex-direction: column; gap: 3px; }
.goal-edit input { width: 90px; }

.missions { display: flex; flex-direction: column; gap: 14px; }
.mission-client { padding: 14px 16px; animation: rise .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; }
.mc-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; } .mc-head b { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-right: 8px; }
.mission { display: block; color: var(--ink); padding: 12px 10px; margin: 0 -10px; border-radius: 12px; transition: background .12s ease; }
.mission + .mission { border-top: 1px solid var(--line-2); } .mission:hover { background: #F7FAFF; text-decoration: none; }
.m-top { display: flex; align-items: center; gap: 12px; }
.m-ring { position: relative; flex: none; width: 46px; height: 46px; } .m-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.m-ring .trk { stroke-width: 4.5; } .m-ring .val { fill: none; stroke: var(--violet); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 113.1; animation: mring-fill 1.3s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes mring-fill { from { stroke-dashoffset: 113.1; } }
.m-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--violet); }
.m-title { flex: 1; min-width: 0; } .m-title > b { font-size: 15px; letter-spacing: -.01em; }
.m-next { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .m-next b { color: var(--ink-2); }
.mood { flex: none; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.mood.hot { background: #FFF1E6; color: #B54708; } .mood.warm { background: var(--soft-blue); color: var(--blue-d); } .mood.quiet { background: var(--gray-bg); color: var(--muted); }
.m-week { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--green); }

/* the journey: a line that fills to where the role stands, a comet on the frontier */
.journey { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 12px; }
.j-line { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 7px; height: 3px; border-radius: 3px; background: var(--line-2); }
.j-line i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; width: calc(var(--f) / 6 * 100%);
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet)); animation: j-grow 1.4s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes j-grow { from { width: 0; } }
.j-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.j-dot { width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 2px solid var(--line); position: relative; z-index: 1; }
.j-step.lit .j-dot { border-color: var(--blue); background: var(--soft-blue); animation: pop .4s ease-out calc(.2s + var(--i) * .16s) both; }
.j-step.front .j-dot { background: radial-gradient(circle, #fff 30%, var(--cyan) 70%); border-color: #fff; box-shadow: 0 0 0 3px rgba(22,221,245,.35), 0 0 14px 3px rgba(22,221,245,.7); }
.j-step.front .j-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(22,221,245,.6); animation: comet 1.8s ease-out infinite; }
@keyframes comet { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.j-step:last-child.lit .j-dot { background: linear-gradient(135deg, #FFD65C, #F5A524); border-color: #F5A524; }
.j-step b { font-size: 13px; margin-top: 3px; } .j-step:not(.lit) b { color: #B6BFD3; }
.j-step small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 900px) {
  .rings { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .rings-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 6px; } .rings-compact.rings-day { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rings-compact .ring-mid b { font-size: 15px; } .rings-compact .ring-lbl { font-size: 10.5px; } .rings-compact .ring-lbl span { font-size: 9.5px; } .rings-day { max-width: none; } .ring-mid b { font-size: 19px; }
  .mission { position: relative; } .mood { position: absolute; right: 10px; top: 10px; font-size: 10.5px; padding: 2px 7px; }
  .m-top { align-items: flex-start; } .m-title > b { display: block; padding-right: 74px; }
  .j-step small { font-size: 9px; } .j-step b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring, .ring .val, .ring.met svg, .m-ring .val, .mission-client, .j-line i, .j-step.lit .j-dot, .j-step.front .j-dot::after { animation: none !important; }
}

/* 🧙 The Wizard was here (2026-10-10) */
.wiz-card { background: radial-gradient(circle at 100% 0%, rgba(99,52,230,.10), transparent 50%), var(--card, #fff); border-color: #DCD2F7; }
.wiz-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.wiz-hat { font-size: 30px; line-height: 1; animation: wizbob 4s ease-in-out infinite; }
@keyframes wizbob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
.wiz-ico { flex: none; width: 28px; text-align: center; font-size: 16px; }
.wiz-row { align-items: flex-start; }
.wiz-sign { margin-top: 6px; font-style: italic; }
.wiz-form { margin: 10px 0 0; }
.wiz-strip { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; font-size: 13px;
  background: linear-gradient(135deg, #F3EEFF, #EEF4FF); border: 1px solid #DCD2F7; color: #3A2477; }
.wiz-strip .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wiz-hat { animation: none; } }
/* 🌌 Today's Constellation home card (2026-10-13) */
.sky-home { display: block; margin-bottom: 14px; color: var(--ink); } a.sky-home:hover { text-decoration: none; }
.sky-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.sky-dots span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--gray-bg); filter: grayscale(.8); opacity: .6; }
.sky-dots span.on { background: radial-gradient(circle, #FFF3B8 0%, #FFD54A 75%); filter: none; opacity: 1; }
.sky-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; color: var(--ink); } .sky-row + .sky-row { border-top: 1px solid var(--line-2); }
.sky-row:hover { text-decoration: none; } .sky-who { flex: 1; min-width: 0; }
.sky-num { text-align: right; white-space: nowrap; } .sky-num b { font-size: 18px; } .sky-num small { color: var(--muted); margin-left: 2px; }

/* ---------- celebration: someone moved to Offer or Hired (app.js "celebrate") ---------- */
.yay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
       background: radial-gradient(circle at 50% 40%, rgba(7,20,61,.55), rgba(7,20,61,.82)); animation: yay-fade .25s ease-out; cursor: pointer; }
.yay canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.yay-card { position: relative; width: min(420px, 100%); text-align: center; color: #fff; border-radius: 22px; padding: 30px 22px 24px;
            background: var(--yay-bg); box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18);
            animation: yay-pop .55s cubic-bezier(.2,1.6,.4,1); }
.yay-offer { --yay-bg: linear-gradient(140deg, #E0457B 0%, #6334E6 100%); }
.yay-hired { --yay-bg: linear-gradient(140deg, #F5B300 0%, #12B76A 55%, #087A56 100%); }
.yay-badge { font-size: 64px; line-height: 1; display: inline-block; animation: yay-bounce 1.2s ease-in-out infinite; }
.yay-title { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 4px; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
.yay-who { font-size: 18px; font-weight: 700; } .yay-role { font-size: 13px; opacity: .9; margin-top: 2px; }
.yay-line { margin-top: 14px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.18); border-radius: 999px;
            display: inline-block; padding: 7px 14px; }
.yay-tap { margin-top: 14px; font-size: 11px; opacity: .7; }
.yay.out { animation: yay-fade .3s ease-in reverse forwards; }
@keyframes yay-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yay-pop { from { transform: scale(.4) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes yay-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .yay, .yay-card, .yay-badge { animation: none; } }

/* Sidebar fits any screen height (Rishi 2026-10-19: "can't drag the menu, can't find logout"): the link list scrolls,
   brand + Sign out stay put. Phone: Sign out is the last chip of the swipeable row. */
@media (min-width: 901px) {
  .side { overflow: hidden; }
  .side .brand, .side .me { flex: none; }
  .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
         scrollbar-color: rgba(255,255,255,.18) transparent; margin-right: -6px; padding-right: 6px; }
  .nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }
  .nav-out { display: none; }
}
@media (max-width: 900px) {
  .nav-out { flex: none; display: flex; } .nav-out button { background: transparent; border: 1px solid rgba(255,255,255,.18);
    color: #C9D5F5; border-radius: 10px; padding: 6px 9px; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
}

/* ================= calm constellation v10 (2026-10-19, docs/DESIGN_VIBE.md): same brand, quieter + smoother.
   Rishi: "subtle + more motion", then "don't take away the fun game part — that's our culture": polish + motion AROUND the game;
   orbs, sparkle, bounces, gold shimmer, Quest glow stay exactly as they were. ================= */
:root { --bx-ease: cubic-bezier(.2,.8,.2,1); --bx-fast: 160ms; --bx-mid: 260ms;
        --shadow: 0 1px 2px rgba(15,27,61,.04), 0 2px 8px rgba(15,27,61,.04);
        --grad: linear-gradient(135deg, #1A6EF0 0%, #4B3FD9 100%); }
h1 { font-weight: 700; letter-spacing: -.025em; } h2 { font-weight: 650; }
h3 { font-weight: 650; font-size: 11.5px; letter-spacing: .08em; }
.job .title, .add-people summary { font-weight: 700; }

/* surfaces: hairlines, gentle lift on hover */
.card, .table-wrap, .kcard, .btn, .chip, .seg a, .tabs a, .nav a, .search input, select, input, textarea, .panel-nav a, table.t td {
  transition: background-color var(--bx-fast) ease, border-color var(--bx-fast) ease, color var(--bx-fast) ease,
              box-shadow var(--bx-mid) var(--bx-ease), transform var(--bx-mid) var(--bx-ease); }
.job:hover, a.card:hover, .kcard:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 12px 28px -8px rgba(15,27,61,.14); }
.kcard:active { transform: scale(.985); }
.btn:active, .chip:active, .seg a:active { transform: scale(.97); transition-duration: 80ms; }
.btn.primary { box-shadow: 0 1px 2px rgba(15,27,61,.08), 0 4px 12px -4px rgba(26,110,240,.45); }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 1px 2px rgba(15,27,61,.08), 0 8px 18px -6px rgba(26,110,240,.55); }
.search input:focus, select:focus, input:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,117,255,.14); }

/* sidebar: soft glass for the active link + a cyan edge instead of a glowing gradient pill */
.nav a.on { background: rgba(255,255,255,.09); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); animation: none; }
.nav a.on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--blue)); box-shadow: 0 0 8px rgba(22,221,245,.6); animation: bx-edge .35s var(--bx-ease) both; }
.nav a.on::after { width: 4px; height: 4px; margin-top: -2px; box-shadow: 0 0 6px 1px rgba(22,221,245,.7); opacity: .8; }
.nav a:hover { transform: translateX(2px); } .nav a.on:hover { transform: none; }
@keyframes bx-edge { from { transform: scaleY(0); opacity: 0; } }
/* slow aurora behind the star sky (opacity-only drift, 24 s) */
.side { background: radial-gradient(120% 60% at 10% -10%, rgba(99,52,230,.28), transparent 55%),
                    radial-gradient(90% 50% at 110% 110%, rgba(22,221,245,.10), transparent 60%), var(--navy); }
.side::after { animation: sky-drift 55s linear infinite, sky-twinkle 7s ease-in-out infinite; }
.brand img { transition: transform .6s var(--bx-ease), filter .6s ease; }
.brand:hover img { transform: rotate(-8deg) scale(1.04); filter: drop-shadow(0 0 8px rgba(22,221,245,.55)); }

/* tabs: underline grows in */
.tabs a { position: relative; border-bottom-color: transparent !important; }
.tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--blue);
  transform: scaleX(0); transition: transform var(--bx-mid) var(--bx-ease); }
.tabs a.on::after { transform: scaleX(1); } .tabs a:hover::after { transform: scaleX(.4); } .tabs a.on:hover::after { transform: scaleX(1); }

/* page entrance: blocks rise in with a short stagger (backwards fill only, so nothing stays transformed) */
html.bx-enter .content > *, html.bx-enter .content > .grid > *, html.bx-enter .jobs > *, html.bx-enter .page-head { animation: bx-in .45s var(--bx-ease) backwards; }
html.bx-enter .content > :nth-child(2), html.bx-enter .grid > :nth-child(2), html.bx-enter .jobs > :nth-child(2) { animation-delay: 40ms; }
html.bx-enter .content > :nth-child(3), html.bx-enter .grid > :nth-child(3), html.bx-enter .jobs > :nth-child(3) { animation-delay: 80ms; }
html.bx-enter .content > :nth-child(4), html.bx-enter .grid > :nth-child(4), html.bx-enter .jobs > :nth-child(4) { animation-delay: 120ms; }
html.bx-enter .content > :nth-child(5), html.bx-enter .grid > :nth-child(5), html.bx-enter .jobs > :nth-child(5) { animation-delay: 160ms; }
html.bx-enter .content > :nth-child(n+6), html.bx-enter .grid > :nth-child(n+6), html.bx-enter .jobs > :nth-child(n+6) { animation-delay: 200ms; }
@keyframes bx-in { from { opacity: 0; transform: translateY(8px); } }
/* swapped-in lists / panels fade softly; table rows cascade */
.bx-swap-in { animation: bx-fade .28s var(--bx-ease) backwards; }
@keyframes bx-fade { from { opacity: 0; transform: translateY(4px); } }
html.bx-enter table.t tbody tr { animation: bx-fade .3s var(--bx-ease) backwards; }
html.bx-enter table.t tbody tr:nth-child(2) { animation-delay: 15ms; } table.t tbody tr:nth-child(3) { animation-delay: 30ms; }
html.bx-enter table.t tbody tr:nth-child(4) { animation-delay: 45ms; } table.t tbody tr:nth-child(5) { animation-delay: 60ms; }
html.bx-enter table.t tbody tr:nth-child(n+6) { animation-delay: 75ms; }
/* reveal-on-scroll for cards further down (app.js adds .bx-reveal, then .bx-seen) */
.bx-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--bx-ease), transform .5s var(--bx-ease); }
.bx-reveal.bx-seen { opacity: 1; transform: none; }

/* side panel + scrim: smoother slide, fading scrim */
.panel { transition: transform .32s var(--bx-ease), box-shadow .32s ease; box-shadow: none; }
.panel.open { box-shadow: -24px 0 60px -12px rgba(15,27,61,.22); }
.scrim { display: block; opacity: 0; visibility: hidden; backdrop-filter: blur(2px); transition: opacity .25s ease, visibility 0s linear .25s; }
.scrim.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.search-results { animation: bx-fade .18s var(--bx-ease); transform-origin: top; }

/* the top bar picks up a hairline of starlight */
.top { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(22,221,245,.55), rgba(99,52,230,.45), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: bx-scan 9s ease-in-out infinite; opacity: .7; }
@keyframes bx-scan { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@media (max-width: 900px) { .top::after { display: none; } }

/* v10 motion graphics that carry meaning (Rishi: "motion graphics in all the other places — show progress, not spinning"):
   everything plays ONCE on page open and lands on the real value. */
/* progress bars fill from 0 to their real width */
html.bx-enter .bar span, .bx-swap-in .bar span, .panel.bx-pop .bar span { transform-origin: left; animation: bx-fill .9s var(--bx-ease) .15s backwards; }
@keyframes bx-fill { from { transform: scaleX(0); } }
/* job-card funnel: steps light up left → right like candidates flowing through, busy steps get a soft flash */
html.bx-enter .funnel div { animation: bx-in .4s var(--bx-ease) backwards; }
html.bx-enter .funnel div:nth-child(1) { animation-delay: 180ms; }
html.bx-enter .funnel div:nth-child(2) { animation-delay: 240ms; }
html.bx-enter .funnel div:nth-child(3) { animation-delay: 300ms; }
html.bx-enter .funnel div:nth-child(4) { animation-delay: 360ms; }
html.bx-enter .funnel div:nth-child(5) { animation-delay: 420ms; }
html.bx-enter .funnel div:nth-child(6) { animation-delay: 480ms; }
html.bx-enter .funnel div:nth-child(7) { animation-delay: 540ms; }
html.bx-enter .funnel div.hot { animation: bx-in .4s var(--bx-ease) backwards, bx-flash 1.2s ease-out .7s; }
@keyframes bx-flash { 30% { box-shadow: 0 0 0 3px rgba(22,117,255,.25); } }
/* The Hunt: the line draws itself across the steps, the conversion % pills land after it passes */
html.bx-enter .pv-row::before { transform-origin: left; animation: bx-fill 1.4s var(--bx-ease) .2s backwards; }
html.bx-enter .pv-conv { animation: bx-opac .4s ease-out calc(var(--d, 0ms) + 500ms) backwards; }
@keyframes bx-opac { from { opacity: 0; } }
/* side panel: sections slide in one after another; score boxes pop */
.panel.bx-pop .panel-body > * { animation: bx-fade .35s var(--bx-ease) backwards; }
.panel.bx-pop .panel-body > :nth-child(2) { animation-delay: 40ms; } .panel.bx-pop .panel-body > :nth-child(3) { animation-delay: 80ms; }
.panel.bx-pop .panel-body > :nth-child(4) { animation-delay: 120ms; } .panel.bx-pop .panel-body > :nth-child(n+5) { animation-delay: 160ms; }
.panel.bx-pop .scores div { animation: bx-pop .45s cubic-bezier(.3,1.5,.5,1) .15s backwards; }
@keyframes bx-pop { from { transform: scale(.85); opacity: 0; } }
/* kanban cards drop into their columns; badges pop once */
html.bx-enter .kcard { animation: bx-fade .35s var(--bx-ease) backwards; }
html.bx-enter .col:nth-child(2) .kcard { animation-delay: 40ms; } html.bx-enter .col:nth-child(3) .kcard { animation-delay: 80ms; }
html.bx-enter .col:nth-child(4) .kcard { animation-delay: 120ms; } html.bx-enter .col:nth-child(n+5) .kcard { animation-delay: 160ms; }
html.bx-enter .nav .badge, html.bx-enter .pill.reach_out { animation: bx-pop .5s cubic-bezier(.3,1.5,.5,1) .4s backwards; }
/* button ripple from where you tap */
.btn { position: relative; overflow: hidden; }
.bx-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: currentColor; opacity: .22;
  animation: bx-ripple .55s ease-out forwards; }
@keyframes bx-ripple { to { transform: scale(2.6); opacity: 0; } }
/* toasts slide up */
.toast { animation: bx-toast .35s var(--bx-ease); }
@keyframes bx-toast { from { opacity: 0; transform: translate(-50%, 14px); } }
/* a just-moved kanban card glows once where it landed */
.kcard.bx-landed { animation: bx-flash 1.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .content > *, .content > .grid > *, .jobs > *, .page-head, .bx-swap-in, table.t tbody tr, .search-results,
  .nav a.on::before, .top::after, .bar span, .funnel div, .pv-row::before, .pv-conv, .panel-body > *, .scores div, .kcard,
  .nav .badge, .pill.reach_out, .toast, .bx-ripple { animation: none !important; }
  .bx-reveal { opacity: 1; transform: none; transition: none; }
  .job:hover, a.card:hover, .kcard:hover, .nav a:hover { transform: none; }
}

/* ================= v11 refresh (Rishi 2026-10-25, plan: claude.ai/artifact/TvGSpZXeqLM9gUSXuufz7K): refined Inter, calm 9-item
   menu, top tools (Quest · owl · bell · you), Bellatrix button, sky moments. Fun stays; only the work chrome gets quieter. ================= */
:root { --radius: 12px; }
body { font-optical-sizing: auto; }
h1, .page-head h1 { font-weight: 700; letter-spacing: -.032em; }
h2 { letter-spacing: -.022em; }
table, .stat .value, .badge, .tb-dot, .funnel, .pill, .kpi, .num { font-variant-numeric: tabular-nums; }

/* sidebar: dimmer text so the page leads; no group labels, just quiet gaps; sub-items under their parent */
.nav-h { display: none; }
.nav-grp { margin-top: 10px; padding-top: 10px; }
.nav a { color: #A3B1D9; font-weight: 520; }
.nav a:hover, .nav a.open { color: #fff; }
.nav a.sub { display: none; padding: 5px 11px 5px 39px; font-size: 13px; color: #8492BE; font-weight: 500; }
.nav a.sub.show { display: flex; }
.nav a.sub.on { color: #fff; background: rgba(255,255,255,.07); }
.nav a.sub::after { display: none; }
.nav a .badge { font-variant-numeric: tabular-nums; }
/* the logo star twinkles only when something new is waiting (replies, notifications) */
.brand { position: relative; }
.side.has-new .brand::after { content: ""; position: absolute; left: 33px; top: 1px; width: 9px; height: 9px; pointer-events: none;
  background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #16DDF5); animation: bx-logo-tw 2.4s ease-in-out infinite; }
@keyframes bx-logo-tw { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }

/* top bar: static starlight hairline (no endless scan), tools on the right */
.top::after { animation: none; background-size: 100% 100%; opacity: .45; }
.top-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.tb-btn { position: relative; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); transition: transform var(--bx-fast) var(--bx-ease), border-color var(--bx-fast), color var(--bx-fast); }
.tb-btn:hover, .tb-btn.on { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.tb-btn:hover { transform: translateY(-1px); }
.tb-btn .i { width: 18px; height: 18px; }
.tb-emo { font-size: 17px; line-height: 1; }
.tb-dot { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blue);
  color: #fff; font: 700 10.5px/14px Inter, sans-serif; text-align: center; border: 2px solid var(--bg); }
.me-menu { position: relative; }
.me-menu summary { list-style: none; cursor: pointer; border-radius: 50%; display: block; }
.me-menu summary::-webkit-details-marker { display: none; }
.me-menu summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.me-menu .me-av { width: 36px; height: 36px; font-size: 13px; }
.me-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; z-index: 45; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px -10px rgba(15,27,61,.22); padding: 6px; animation: bx-fade .16s var(--bx-ease); }
.me-pop a, .me-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--ink); font: 500 14px Inter, sans-serif;
  background: none; border: 0; cursor: pointer; }
.me-pop a:hover, .me-pop button:hover { background: var(--soft-blue); text-decoration: none; }
.me-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-who b { display: block; font-size: 14px; } .me-who span { font-size: 12px; color: var(--muted); }
.me-pop form { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

/* Bellatrix: Ask Bellatrix lives in a round button, bottom right */
.bella-fab { position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%; display: block; background: radial-gradient(circle at 60% 35%, #1B2A78, #070B24 72%);
  border: 1px solid rgba(91,227,245,.45); box-shadow: 0 0 0 4px rgba(91,227,245,.10), 0 12px 30px -6px rgba(7,20,61,.55);
  transition: transform .22s var(--bx-ease), box-shadow .22s ease, opacity .2s; }
.bella-fab:hover, .bella-fab:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 5px rgba(91,227,245,.18), 0 16px 34px -6px rgba(7,20,61,.6); outline: none; }
.bella-fab > svg { width: 100%; height: 100%; display: block; clip-path: circle(50%); }
.bella-fab::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #2BD38F; border: 2px solid #070B24; }
.bella-tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--navy); color: #fff; font: 600 12.5px Inter, sans-serif; padding: 6px 11px; border-radius: 999px; transition: opacity .15s, transform .15s var(--bx-ease); }
.bella-fab:hover .bella-tip, .bella-fab:focus-visible .bella-tip { opacity: 1; transform: translate(0, -50%); }
body:has(.panel.open) .bella-fab { opacity: 0; pointer-events: none; }
.bella .bl-eye, .bella .bl-star { transform-box: fill-box; transform-origin: center; }
.bella .bl-eye { animation: bl-blink 6s infinite; }
.bella .bl-star { animation: bl-tw 3.4s ease-in-out infinite; }
.bella .bl-dust circle { animation: bl-dust 5s ease-in-out infinite; } .bella .bl-dust circle:nth-child(2n) { animation-delay: -2.5s; } .bella .bl-dust circle:nth-child(3n) { animation-delay: -1.2s; }
@keyframes bl-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes bl-tw { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(12deg); } }
@keyframes bl-dust { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* page switch: a quick cross-fade (browser View Transitions; whole-page swaps only, app.js skips the rest) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; animation-timing-function: cubic-bezier(.2,0,0,1); }
.side { view-transition-name: bx-side; }
::view-transition-group(bx-side) { animation: none; }
::view-transition-old(bx-side) { display: none; } ::view-transition-new(bx-side) { animation: none; }

@media (max-width: 900px) {
  .nav-grp { margin: 0; padding: 0; }
  .nav a.sub { padding: 6px 9px; font-size: 12.5px; opacity: .85; }
  .top { gap: 8px; } .top-tools { gap: 6px; }
  .tb-btn, .me-menu .me-av { width: 34px; height: 34px; }
  .qhud { padding-inline: 9px; }
  .bella-fab { width: 52px; height: 52px; }
  .bx-orbit { bottom: 86px; }
  .side.has-new .brand::after { left: 22px; top: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .side.has-new .brand::after, .bella .bl-eye, .bella .bl-star, .bella .bl-dust circle { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* Orb Pop now opens from Quest (Rishi 2026-10-25) */
.qpop-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; color: var(--ink); }
.qpop-link:hover { text-decoration: none; }
.qpop-link b { display: block; } .qpop-orb { font-size: 26px; line-height: 1; }
.qpop-go { margin-left: auto; font-weight: 700; color: var(--blue-d); white-space: nowrap; }
/* phone: the tools keep one row, search gets the full width below them */
@media (max-width: 900px) {
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top-tools { order: 1; width: 100%; justify-content: flex-end; }
  .top-tools .qhud { margin-right: auto; }
  .top .search { order: 2; flex: 1 1 100%; max-width: none; }
}
.bella-fab .bella path[stroke^="url"] { stroke-width: 2.6; }

/* ✦ Bellatrix News (Rishi 2026-10-25): a slim night strip under the Home tiles; names glide past (transform only), pause on touch */
.bxn { display: flex; align-items: stretch; margin: 14px 0; border-radius: 14px; overflow: hidden; color: #E6ECFF;
  background: radial-gradient(120% 220% at 0% 0%, rgba(99,52,230,.55), transparent 55%), linear-gradient(90deg, #0B1640, #07143D 60%, #0B2257);
  border: 1px solid rgba(91,227,245,.22); box-shadow: 0 10px 26px -14px rgba(7,20,61,.55); }
.bxn-tag { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #9FB3E8; border-right: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.bxn-tag b { color: #5BE3F5; font-weight: 800; }
.bxn-star { color: #fff; font-size: 14px; text-shadow: 0 0 8px #16DDF5; animation: bx-logo-tw 2.4s ease-in-out infinite; display: inline-block; }
.bxn-view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.bxn-track { display: flex; width: max-content; animation: bxn-run var(--bxn-s, 30s) linear infinite; }
.bxn:hover .bxn-track, .bxn:focus-within .bxn-track, .bxn:active .bxn-track { animation-play-state: paused; }
.bxn-set { display: flex; align-items: center; flex: none; min-width: 100cqw; padding-right: 28px; gap: 28px; }
.bxn-view { container-type: inline-size; }
.bxn-item { display: inline-flex; align-items: center; gap: 6px; padding: 11px 0; color: #E6ECFF; font-size: 14px; white-space: nowrap; text-decoration: none; }
.bxn-item:hover { text-decoration: none; color: #fff; }
.bxn-item b { color: #FFD65C; font-weight: 700; }
.bxn-item.done b { color: #7EF0C0; }
.bxn-when { margin-left: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(91,227,245,.14); color: #8FEAF7; }
.bxn-sep { color: rgba(159,179,232,.55); font-size: 11px; }
@keyframes bxn-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .bxn-tag { padding: 0 10px; font-size: 0; gap: 0; } .bxn-tag .bxn-star { font-size: 16px; }
  .bxn-item { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .bxn-track { animation: none; } .bxn-star { animation: none; }
  .bxn-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .bxn-set[aria-hidden] { display: none; }
}

/* ================= 💬 Ask Bellatrix v11 (Rishi 2026-10-25): chat box from the Bellatrix button + its own page; newest on top ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the conversation (shared) */
.kc-thread { display: grid; gap: 14px; }
.kc-x { display: grid; gap: 8px; animation: bx-fade .3s var(--bx-ease) backwards; }
.kc-x + .kc-x { padding-top: 14px; border-top: 1px dashed var(--line); }
.kc-me { display: grid; justify-items: end; gap: 3px; }
.kc-bot { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.kc-b { border-radius: 16px; padding: 10px 13px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; max-width: 100%; }
.kc-txt { white-space: pre-wrap; }
.kc-b.me { background: linear-gradient(135deg, #1A2D7A, #0B1640); color: #fff; border-bottom-right-radius: 5px; max-width: 88%; }
.kc-bot .kc-b { background: #fff; border: 1px solid var(--line); border-top-left-radius: 5px; box-shadow: 0 1px 2px rgba(15,27,61,.04); }
.kc-b.bank { box-shadow: inset 3px 0 0 var(--green); } .kc-b.suggestion { box-shadow: inset 3px 0 0 #F5A524; }
.kc-b.unknown { box-shadow: inset 3px 0 0 var(--red); } .kc-b.rishi { box-shadow: inset 3px 0 0 var(--violet); background: #F7F3FF; }
.kc-b.kc-wait { color: var(--ink-2); background: #F7F9FD; }
.kc-tag { display: block; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; margin-bottom: 4px; white-space: normal; }
.t-bank { color: var(--green); } .t-suggestion { color: var(--amber); } .t-unknown { color: var(--red); } .t-r { color: var(--violet); }
.kc-time { font-size: 11px; color: var(--muted); }
.kc-src { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: normal; }
.kc-esc { margin-top: 8px; white-space: normal; }
.kc-mini { font: 600 12.5px Inter, sans-serif; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.kc-mini.hot, .kc-mini:hover { border-color: var(--violet); color: var(--violet); }
.kc-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; flex: none;
  background: radial-gradient(circle at 60% 35%, #2A3FA0, #070B24 75%); box-shadow: 0 0 0 2px rgba(91,227,245,.25); }
.kc-av.r { background: var(--grad); font: 700 12px Inter, sans-serif; }
.kc-av.live { animation: kc-pulse 1.6s ease-in-out infinite; }
@keyframes kc-pulse { 50% { box-shadow: 0 0 0 5px rgba(91,227,245,.15); } }
.kc-dots { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.kc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: kc-dot 1s ease-in-out infinite; }
.kc-dots i:nth-child(2) { animation-delay: .15s; } .kc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes kc-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.kc-hello { background: linear-gradient(135deg, #F3F6FF, #F7F3FF); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.kc-hello p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.kc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-chip { font: 500 13px Inter, sans-serif; text-align: left; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.kc-chip:hover { border-color: var(--blue); color: var(--blue-d); }
.kc-error { background: var(--red-bg); color: var(--red); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; }
/* the typing box */
.kc-ask { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 8px 14px; display: grid; gap: 8px;
  transition: border-color var(--bx-fast), box-shadow var(--bx-fast); }
.kc-ask:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,117,255,.12); }
.kc-ask textarea { border: 0; outline: 0; resize: none; font: 15px/1.45 Inter, sans-serif; color: var(--ink); background: transparent; min-height: 24px; max-height: 160px; padding: 2px 0; width: 100%; box-shadow: none; }
.kc-ask textarea:focus { box-shadow: none; }
.kc-ask-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kc-to { display: inline-flex; background: var(--gray-bg); border-radius: 999px; padding: 2px; }
.kc-to input { position: absolute; opacity: 0; pointer-events: none; }
.kc-to label { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.kc-to input:checked + label { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,27,61,.12); }
.kc-to input:focus-visible + label { outline: 2px solid var(--blue); }
.kc-send { border: 0; border-radius: 999px; padding: 8px 15px; font: 700 13.5px Inter, sans-serif; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 6px 14px -6px rgba(22,117,255,.6); transition: transform .12s var(--bx-ease); }
.kc-send:hover { transform: translateY(-1px); } .kc-send:active { transform: scale(.96); }

/* the chat box (drawer) */
.bd { position: fixed; inset: 0; z-index: 85; pointer-events: none; }   /* above Quest toasts (80) + Bella Care (70-73) while open */
.bd-scrim { position: absolute; inset: 0; background: rgba(7,20,61,.28); opacity: 0; transition: opacity .25s ease; }
.bd-box { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--bg); display: flex; flex-direction: column;
  transform: translateX(104%); transition: transform .32s var(--bx-ease); box-shadow: -24px 0 60px -14px rgba(7,20,61,.35); }
.bd.open { pointer-events: auto; } .bd.open .bd-scrim { opacity: 1; } .bd.open .bd-box { transform: none; }
.bd-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; color: #fff; flex: none;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  background: radial-gradient(120% 160% at 0% 0%, rgba(99,52,230,.55), transparent 55%), linear-gradient(90deg, #0B1640, #07143D); }
.bd-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; background: radial-gradient(circle at 60% 35%, #1B2A78, #070B24 72%);
  box-shadow: 0 0 0 2px rgba(91,227,245,.35); }
.bd-face svg { width: 100%; height: 100%; display: block; }
.bd-who { flex: 1; min-width: 0; display: grid; } .bd-who b { font-size: 16px; letter-spacing: -.01em; }
.bd-who small { font-size: 12px; color: #A9B6DC; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-ok, .bd-live { width: 7px; height: 7px; border-radius: 50%; background: #2BD38F; flex: none; }
.bd-live { background: var(--cyan); animation: kc-dot 1s ease-in-out infinite; }
.bd-btn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #C9D5F5; background: rgba(255,255,255,.08);
  border: 0; font-size: 16px; cursor: pointer; text-decoration: none; flex: none; }
.bd-btn:hover { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }
.bd-ask { padding: 12px 12px 0; flex: none; }
.bd-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 18px; }
.bd-foot { flex: none; font-size: 11.5px; color: var(--muted); padding: 8px 14px; border-top: 1px solid var(--line);
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
html.bd-lock { overflow: hidden; } html.bd-lock .bella-fab { opacity: 0; pointer-events: none; }
html.bd-lock .qtoasts, html.bd-lock .bc-orb, html.bd-lock .bc-card { visibility: hidden; }   /* game + care wait while you chat */
@media (max-width: 640px) { .bd-box { width: 100vw; } }

/* the page */
.kp-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 18px 24px; border-radius: 18px; color: #E6ECFF; margin-bottom: 16px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(99,52,230,.55), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(22,117,255,.25), transparent 60%), #07143D; }
.kp-face { width: 150px; height: 150px; display: block; } .kp-face svg { width: 100%; height: 100%; display: block; }
.kp-eb { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.kp-intro h1 { color: #fff; font-size: 26px; margin: 4px 0 6px; }
.kp-intro p { margin: 0; color: #B9C6EE; max-width: 60ch; font-size: 14.5px; }
.kp-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kp-legend span { font-size: 12px; font-weight: 650; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px 10px; }
.kp-legend .t-bank { color: #7EF0C0; } .kp-legend .t-suggestion { color: #FFD27A; } .kp-legend .t-unknown { color: #FF9C94; } .kp-legend .t-r { color: #C8B6FF; }
.kp-flash { background: var(--soft-blue); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-weight: 600; }
.kp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.kp-chat { display: grid; gap: 14px; min-width: 0; }
.kp-side { display: grid; gap: 14px; }
.kp-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kp-card h2 { font-size: 15px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.kp-n { font-size: 11px; font-weight: 700; background: var(--soft-blue); color: var(--blue-d); border-radius: 999px; padding: 1px 7px; }
.kp-it { padding: 10px 0; } .kp-it + .kp-it { border-top: 1px solid var(--line-2); }
.kp-who { font-size: 12px; color: var(--muted); } .kp-qq { font-weight: 650; margin: 3px 0 6px; white-space: pre-wrap; }
.kp-bot { font-size: 13px; color: var(--ink-2); background: var(--gray-bg); border-radius: 10px; padding: 8px; margin-bottom: 6px; white-space: pre-wrap; }
.kp-inbox textarea { width: 100%; min-height: 60px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font: inherit; box-sizing: border-box; }
.kp-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.kp-know details { border-top: 1px solid var(--line-2); padding: 8px 0; } .kp-know details:first-of-type { border-top: 0; }
.kp-know summary { font-weight: 650; cursor: pointer; font-size: 14px; }
.kp-know ul { margin: 8px 0 4px; padding-left: 20px; font-size: 13.5px; } .kp-know li { margin: 5px 0; }
.kp-know h4 { margin: 10px 0 2px; font-size: 12.5px; color: var(--ink-2); }
.kp-team ul { margin: 6px 0 0; padding-left: 18px; } .kp-team li { font-size: 13px; margin: 6px 0; }
@media (max-width: 1100px) { .kp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .kp-hero { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .kp-face { width: 84px; height: 84px; } .kp-intro h1 { font-size: 20px; } .kp-intro p { display: none; }   /* phone: chat starts higher */
}
@media (prefers-reduced-motion: reduce) { .kc-x, .kc-av.live, .kc-dots i, .bd-live { animation: none; } .bd-box, .bd-scrim { transition: none; } }

/* Hunt circles open the Pipeline filtered to their stage (Rishi 2026-10-25) */
a.pv-step, a.hm-step { display: block; color: inherit; text-decoration: none; cursor: pointer; }