/* Lumi assessor portal: night sidebar, warm paper, lantern amber. Raised cards and soft depth (Lumi Portal v2 design). */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/geist-var.woff2) format('woff2') }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/geist-mono-var.woff2) format('woff2') }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-400.woff2) format('woff2') }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-400-italic.woff2) format('woff2') }
:root {
  --bg: #f4f2ee; --text: #16181d; --muted: #6b6f76; --faint: #8c8f99; --zero: #b4b1a9;
  --line: #e8e6e0; --line-2: #efede8; --sunk: #f6f4ef; --field: #fbfaf7; --field-line: #e1ded6;
  --amber: #f2a93b; --amber-ink: #9a6300; --violet: #7c6ef0; --violet-soft: #eeecfd; --violet-ink: #4b3fb0;
  --good: #3f6b2e; --good-soft: #e9f2e3; --good-dot: #5e8a4a; --warn: #7a4e00; --warn-soft: #fcf1dc; --warn-dot: #e0961f;
  --crit: #9b2c1f; --crit-soft: #fbe9e6; --crit-dot: #d2503d; --live: #17795f; --live-soft: #e0f3ec;
  --clin: var(--violet-ink); --clin-soft: var(--violet-soft); --rule: var(--line); --rule-2: var(--line-2);
  --raise: inset 0 1px 0 #fff, 0 1px 2px rgba(24, 22, 48, .05), 0 10px 24px -10px rgba(24, 22, 48, .12), 0 30px 60px -30px rgba(24, 22, 48, .18);
  --raise-sm: inset 0 1px 0 #fff, 0 1px 2px rgba(24, 22, 48, .08), 0 4px 10px -4px rgba(24, 22, 48, .12);
  --f: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace; --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --night: linear-gradient(180deg, #1c1e33 0%, #121320 60%, #0e0f18 100%);
  --radius: 18px;
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; color: var(--text); font: 15px/1.5 var(--f); -webkit-font-smoothing: antialiased;
  background: radial-gradient(900px 500px at 85% -10%, rgba(124, 110, 240, .14), transparent 60%), radial-gradient(700px 420px at 30% 0%, rgba(242, 169, 59, .12), transparent 60%), var(--bg) no-repeat; background-color: var(--bg) }
a { color: var(--text); text-underline-offset: 3px }
a:hover { color: var(--amber-ink) }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100 }
.skip:focus { left: 8px }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted) }
[hidden] { display: none !important }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@keyframes float { 50% { transform: translateY(-10px) } }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } }
@keyframes fade { from { opacity: 0 } }
@keyframes pulse { 50% { opacity: .35 } }

/* ---------- Lumi, the lantern character (drawn by lumi.js) ---------- */
.lumi3d { display: block; width: 100%; height: 100%; overflow: visible }
.lumi-mini { display: block; flex: none; width: 34px; height: 44px; margin: -6px 0 -4px }
.lumi-slot { position: absolute; display: block; width: 230px; height: 276px; pointer-events: auto; z-index: 1 }
.lumi-slot .lumi3d { filter: drop-shadow(0 18px 30px rgba(242, 169, 59, .28)) }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh }
.side { background: var(--night); color: #e9e7e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px 14px;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05), 8px 0 30px -12px rgba(14, 15, 24, .4); z-index: 20 }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 22px; color: #fff; text-decoration: none }
.brand:hover { color: #fff }
.brand b { font: 400 26px/1 var(--serif); display: block; color: #fff; letter-spacing: .005em }
.brand small { display: block; color: #8c8f99; font-size: 11px; margin-top: 3px; letter-spacing: .02em }
.nav { display: grid; gap: 2px }
.nav h6 { margin: 20px 10px 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6a6d77; font-weight: 500 }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: #b4b6bd; text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s, color .15s }
.nav a svg { width: 18px; height: 18px; opacity: .85; flex: none }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff }
.nav a[aria-current="page"] { color: #ffd18a; background: linear-gradient(180deg, rgba(255, 203, 107, .18), rgba(255, 203, 107, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 203, 107, .18), 0 6px 16px -8px rgba(242, 169, 59, .5) }
.nav .count { margin-left: auto; background: linear-gradient(180deg, #ffcb6b, #e8941c); color: #3a2400; border-radius: 99px; font-size: 11px; font-weight: 600; padding: 0 7px; line-height: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px -1px rgba(232, 148, 28, .5) }
.side-foot { margin-top: auto; padding-top: 18px }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .06) }
.me .who { flex: 1; min-width: 0 }
.me b { display: block; color: #fff; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.me small { color: #8c8f99; font-size: 12px }
.me small a { color: #b4b6bd }
.me small a:hover { color: #ffd18a }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, #3a3f66, #1a1c2e); color: #ffcb6b; display: grid; place-items: center; font-weight: 600; font-size: 12.5px; flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .3) }
.iconbtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; color: #8c8f99; cursor: pointer; flex: none }
.iconbtn:hover { background: rgba(255, 255, 255, .08); color: #fff }
.iconbtn svg { width: 17px; height: 17px }
.main { min-width: 0; display: flex; flex-direction: column }
.topbar { height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 40px; border-bottom: 1px solid var(--line); background: rgba(244, 242, 238, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 15 }
.topbar .menu { display: none; border: 0; background: none; padding: 6px; margin-left: -6px; cursor: pointer; color: var(--text) }
.bc { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.bc b { color: var(--text); font-weight: 500 }
.bc span { margin: 0 7px; color: var(--zero) }
.tb-r { margin-left: auto; display: flex; align-items: center; gap: 10px }
.testpill { display: inline-flex; align-items: center; gap: 7px; background: var(--warn-soft); border: 1px solid #f3ddb0; color: var(--warn); font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 99px; white-space: nowrap; cursor: help }
.testpill i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); box-shadow: 0 0 0 3px rgba(224, 150, 31, .18) }
.tsearch { position: relative; display: flex; align-items: center }
.tsearch svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--faint); pointer-events: none }
.tsearch input { width: 240px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 12px 0 33px; font-size: 13.5px; box-shadow: var(--raise-sm) }
.tsearch input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 110, 240, .2) }
.page { padding: 40px 40px 64px; max-width: 1280px; width: 100%; margin: 0 auto; animation: rise .35s ease-out }
.page.wide { max-width: none }
.ph { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px }
.ph h1 { margin: 0; font: 400 48px/1.05 var(--serif); letter-spacing: -.01em }
.ph h1 .chip { font-family: var(--f); vertical-align: middle; position: relative; top: -6px }
.ph .sub { color: var(--muted); margin: 8px 0 0; font-size: 15px }
.ph .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px }
.crumbs a { color: var(--muted); text-decoration: none }
.crumbs a:hover { color: var(--amber-ink); text-decoration: underline }

/* ---------- Dashboard hero and stat tiles ---------- */
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 40px 44px; margin-bottom: 26px; color: #fff; isolation: isolate;
  background: radial-gradient(600px 300px at 90% 120%, rgba(124, 110, 240, .55), transparent 60%), radial-gradient(500px 260px at 70% -30%, rgba(242, 169, 59, .35), transparent 60%), linear-gradient(135deg, #23264a 0%, #16182c 55%, #0f1020 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 4px rgba(14, 15, 24, .1), 0 24px 50px -18px rgba(22, 24, 44, .55), 0 50px 90px -40px rgba(60, 50, 140, .45) }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 36px 36px;
  transform: perspective(500px) rotateX(55deg) translateY(45%) scale(2); transform-origin: bottom; mask-image: linear-gradient(to top, #000 10%, transparent 75%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%) }
.hero .txt { position: relative; max-width: 620px }
.hero .date { font: 400 12px/1 var(--mono); color: #b9b6e8; letter-spacing: .06em; text-transform: uppercase }
.hero h1 { font: 400 56px/1.02 var(--serif); margin: 14px 0 12px; letter-spacing: -.01em; color: #fff }
.hero h1 i { color: #ffcb6b }
.hero p { color: #c8c6de; margin: 0 0 24px; font-size: 15.5px; max-width: 52ch }
.hero .acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.hero .acts .link { color: #d8d6ee; font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 6px }
.hero .acts .link:hover { color: #ffd18a }
.hero .lumi-slot { right: 7%; top: 50%; margin-top: -146px }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 26px }
.tile { display: block; text-decoration: none; color: var(--text); border-radius: var(--radius); padding: 22px; background: linear-gradient(180deg, #fff, #f8f6f2); border: 1px solid rgba(24, 22, 48, .07); box-shadow: var(--raise);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s }
a.tile:hover { transform: translateY(-4px) perspective(800px) rotateX(3deg); color: var(--text); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(24, 22, 48, .06), 0 18px 34px -12px rgba(24, 22, 48, .2), 0 40px 70px -30px rgba(24, 22, 48, .25) }
.tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.tile .k { font-size: 13px; color: var(--muted); font-weight: 500 }
.tile .v { font: 400 52px/1 var(--serif); margin: 12px 0 6px; letter-spacing: -.01em }
.tile .v.zero { color: var(--zero) }
.tile .s { font-size: 12.5px; color: var(--faint) }
.tile.hot { background: linear-gradient(160deg, #ffe7b3 0%, #ffc96a 45%, #f0a12c 100%); border-color: rgba(180, 101, 10, .25); color: #3a2400;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(180, 101, 10, .18), 0 10px 24px -8px rgba(240, 161, 44, .55), 0 30px 60px -30px rgba(180, 101, 10, .5) }
.tile.hot .k, .tile.hot .s { color: #6e4300 }
.tile.hot:hover { color: #3a2400 }

/* ---------- Building blocks ---------- */
.card { background: #fff; border: 1px solid rgba(24, 22, 48, .07); border-radius: var(--radius); box-shadow: var(--raise) }
.card > h2, .card > header { margin: 0; padding: 18px 20px 0; font-size: 15px; font-weight: 600 }
.card > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.card > header h2 { margin: 0; font-size: 15px; font-weight: 600 }
.card > header .r { margin-left: auto }
.card .body { padding: 14px 20px 20px }
.grid { display: grid; gap: 18px }
.grid > * { min-width: 0 }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start }
.stat { padding: 20px 22px }
.stat .k { color: var(--muted); font-size: 13px; font-weight: 500 }
.stat .v { font: 400 44px/1 var(--serif); margin-top: 10px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(24, 22, 48, .1); background: linear-gradient(180deg, #fff, #f7f5f1); color: var(--text); padding: 8px 15px;
  border-radius: 10px; font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; line-height: 1.3; white-space: nowrap; box-shadow: var(--raise-sm); transition: transform .15s, box-shadow .15s, background .15s }
.btn:hover { color: var(--text); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(24, 22, 48, .08), 0 8px 16px -6px rgba(24, 22, 48, .18) }
.btn:active { transform: none }
.btn.primary { background: linear-gradient(180deg, #3a3f66, #1a1c2e); border-color: #1a1c2e; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 6px 16px -4px rgba(40, 36, 90, .45) }
.btn.primary:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 10px 22px -6px rgba(40, 36, 90, .55) }
.btn.amber { background: linear-gradient(180deg, #ffd587, #f0a12c); border-color: #d98a17; color: #3a2400; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(150, 80, 0, .25), 0 8px 22px -6px rgba(242, 169, 59, .7) }
.btn.amber:hover { color: #3a2400; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(150, 80, 0, .25), 0 12px 28px -6px rgba(242, 169, 59, .85) }
.btn.glass { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); backdrop-filter: blur(6px) }
.btn.glass:hover { color: #fff; background: rgba(255, 255, 255, .16) }
.btn.go { background: linear-gradient(180deg, #4fa07a, #24734f); border-color: #1f6646; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 6px 16px -4px rgba(31, 102, 70, .45) }
.btn.go:hover { color: #fff }
.btn.danger { color: var(--crit); border-color: #f0cbc4 }
.btn.danger:hover { color: var(--crit) }
.btn.danger.solid { background: linear-gradient(180deg, #df6450, #b23a2a); color: #fff; border-color: #a33424; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px -4px rgba(178, 58, 42, .45) }
.btn.danger.solid:hover { color: #fff }
.btn.ghost { border-color: transparent; background: none; box-shadow: none }
.btn.ghost:hover { background: rgba(24, 22, 48, .05); transform: none; box-shadow: none }
.btn.sm { padding: 5px 11px; font-size: 13px; border-radius: 8px }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none }
.btn svg { width: 16px; height: 16px; flex: none }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 20px; background: #f1efea; color: var(--muted); white-space: nowrap; line-height: 1.4 }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none }
.chip.live { background: var(--live-soft); color: var(--live) }
.chip.live i { background: #1fa37d; box-shadow: 0 0 0 3px rgba(31, 163, 125, .2); animation: pulse 1.6s infinite }
.chip.planned { background: var(--violet-soft); color: var(--violet-ink) }
.chip.planned i { background: var(--violet) }
.chip.done { background: var(--good-soft); color: var(--good) }
.chip.done i { background: var(--good-dot) }
.chip.warn { background: var(--warn-soft); color: var(--warn) }
.chip.warn i { background: var(--warn-dot) }
.chip.crit { background: var(--crit-soft); color: var(--crit) }
.chip.crit i { background: var(--crit-dot) }
.chip.signed { background: linear-gradient(180deg, #2c2f52, #1c1e33); color: #ffd18a }
.chip.signed i { background: #ffcb6b; box-shadow: 0 0 6px rgba(255, 203, 107, .7) }
.muted { color: var(--muted) }
.small { font-size: 13px }
.mono { font-family: var(--mono) }
.code-chip { font: 500 11.5px/1 var(--mono); background: #f3f2ee; color: #4d5058; border-radius: 5px; padding: 3px 6px; white-space: nowrap; letter-spacing: .02em }
.kid { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; font-weight: 600; font-size: 13px; color: #24461a;
  background: linear-gradient(145deg, #d9f0cf, #9fd08a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(36, 70, 26, .12), 0 3px 8px -3px rgba(36, 70, 26, .35) }
.kid.k1 { color: #4a2a00; background: linear-gradient(145deg, #ffe6b8, #f7bf63); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 70, 0, .14), 0 3px 8px -3px rgba(150, 90, 0, .4) }
.kid.k2 { color: #2e2a6e; background: linear-gradient(145deg, #e3e0ff, #b3abf5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(46, 42, 110, .12), 0 3px 8px -3px rgba(70, 60, 170, .35) }
.kid.k3 { color: #0f4b4a; background: linear-gradient(145deg, #d3f1ee, #8fd3cc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(15, 75, 74, .12), 0 3px 8px -3px rgba(15, 100, 95, .35) }
.kid.k4 { color: #6b1f33; background: linear-gradient(145deg, #ffe0e6, #f3a7b8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(107, 31, 51, .12), 0 3px 8px -3px rgba(160, 50, 80, .35) }
.empty { color: var(--muted); padding: 22px 18px; text-align: center; font-size: 14px; background: var(--sunk); border: 1px solid #ece9e2; border-radius: 14px; box-shadow: inset 0 2px 6px rgba(24, 22, 48, .06); margin: 6px 20px 16px }
.tablewrap > .empty, .card > .empty { margin: 18px 20px }
.notice { border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--violet-soft); color: #2f2770; border: 1px solid #dcd8fb }
.notice.warn { background: var(--warn-soft); color: #5e3c00; border-color: #f3ddb0 }
.notice.crit { background: var(--crit-soft); color: #7d221c; border-color: #f3cdc6 }
.notice.good { background: var(--good-soft); color: #2d5020; border-color: #cfe3c4 }

/* ---------- Tables and lists ---------- */
.tablewrap { overflow-x: auto }
table.t { width: 100%; border-collapse: collapse; font-size: 14px }
table.t th { text-align: left; font-weight: 500; color: var(--faint); font-size: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line-2); white-space: nowrap; background: #fbfaf7 }
table.t td { padding: 14px 20px; border-bottom: 1px solid var(--line-2); vertical-align: middle }
table.t td.nw { white-space: nowrap }
table.t tr:last-child td { border-bottom: 0 }
table.t tr.click { cursor: pointer }
table.t tr.click:hover td { background: #fbfaf7 }
table.t td b a { color: var(--text); text-decoration: none; font-weight: 500 }
table.t td b a:hover { color: var(--amber-ink) }
table.t .who { display: flex; align-items: center; gap: 12px; min-width: 180px }
table.t td.chev { width: 36px; padding-left: 0; color: #c4c1b8; text-align: right }
table.t tr.click:hover td.chev { color: var(--amber-ink) }
table.t td.chev svg { width: 16px; height: 16px; display: block; margin-left: auto; transition: transform .15s }
table.t tr.click:hover td.chev svg { transform: translateX(2px) }
.card:has(> .tablewrap > table.t) { overflow: hidden }
.list { list-style: none; margin: 0; padding: 0 }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line-2) }
.list li:first-child { border-top: 0 }
.list li .grow { flex: 1; min-width: 0 }
.list li .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500 }
.list li a.row { display: contents; color: inherit; text-decoration: none }
.list li:has(a.row):hover { background: #fbfaf7 }
.list li.empty { display: block; border: 1px solid #ece9e2; margin: 6px 20px 16px }
.feed { position: relative; padding: 4px 0 }
.feed li { font-size: 13.5px; align-items: flex-start; border-top: 0; padding: 9px 20px 9px 46px; position: relative }
.feed li:not(.empty)::before { content: ''; position: absolute; left: 22px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--amber); box-shadow: 0 0 0 3px rgba(242, 169, 59, .15) }
.feed li:not(.empty)::after { content: ''; position: absolute; left: 27px; top: 29px; bottom: -9px; width: 1px; background: var(--line) }
.feed li:last-child::after { display: none }
.feed li:nth-child(3n+2)::before { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 110, 240, .15) }
.feed li:nth-child(3n+3)::before { border-color: var(--good-dot); box-shadow: 0 0 0 3px rgba(94, 138, 74, .15) }
.feed time { color: var(--faint); font: 400 11.5px/1.9 var(--mono); white-space: nowrap; min-width: 84px; order: 2; text-align: right }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line-2) }
.toolbar .search { flex: 1; min-width: 200px; max-width: 420px }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px }
.fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px }
.fg.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.fg .full { grid-column: 1 / -1 }
label.f { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; color: #2c2f38 }
label.f small { font-weight: 400; color: var(--faint) }
input.i, select.i, textarea.i { width: 100%; min-height: 38px; border: 1px solid var(--field-line); background: var(--field); border-radius: 10px; padding: 8px 12px; font-size: 15px; font-weight: 400;
  box-shadow: inset 0 1px 2px rgba(24, 22, 48, .05); transition: border-color .15s, box-shadow .15s, background .15s }
input.i:hover, select.i:hover, textarea.i:hover { border-color: #d3cfc5 }
textarea.i { min-height: 96px; resize: vertical; line-height: 1.5 }
input.i:focus, select.i:focus, textarea.i:focus { outline: none; background: #fff; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 110, 240, .2) }
input.i[readonly], textarea.i[readonly], input.i:disabled, select.i:disabled { background: var(--sunk); color: var(--muted) }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #3a3f66; flex: none }
.check.switch { align-items: center; gap: 9px; user-select: none; color: var(--muted); font-weight: 500 }
.check.switch input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 99px; background: #e2dfd7; position: relative; cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(24, 22, 48, .2); transition: background .2s }
.check.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, #fff, #f3f1ec); box-shadow: 0 1px 3px rgba(24, 22, 48, .3); transition: transform .2s }
.check.switch input:checked { background: linear-gradient(180deg, #3a3f66, #1a1c2e) }
.check.switch input:checked::after { transform: translateX(14px) }
fieldset.fs { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px 18px; margin: 0; background: linear-gradient(180deg, #fff, #fcfbf9) }
fieldset.fs legend { font-weight: 600; font-size: 14px; padding: 0 6px }
.formacts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.err { color: var(--crit); font-size: 14px; font-weight: 500; min-height: 1em; margin: 0 }
.isles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.isle { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: pointer; background: #fff; box-shadow: var(--raise-sm); transition: border-color .15s, background .15s, transform .15s }
.isle:hover { transform: translateY(-1px) }
.isle input { margin-top: 3px; accent-color: #3a3f66; width: 17px; height: 17px; flex: none }
.isle b { display: block; font-size: 14px; font-weight: 500 }
.isle small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px }
.isle:has(input:checked) { border-color: #e9c47e; background: linear-gradient(180deg, #fffaf0, #fff3dc); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(242, 169, 59, .25), 0 6px 14px -8px rgba(242, 169, 59, .6) }
.isle:has(input:disabled) { cursor: default; transform: none }
.dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: 14px }
.dl dt { color: var(--faint) }
.dl dd { margin: 0; overflow-wrap: anywhere }
.people { display: grid; gap: 10px }
.person { display: flex; align-items: center; gap: 10px }
.person b { display: block; font-weight: 500; font-size: 14px }
.person small { color: var(--faint); font-size: 12.5px }
.person .avatar { width: 32px; height: 32px; font-size: 12px }

/* ---------- Sign-in ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr) }
.auth-art { position: relative; overflow: hidden; isolation: isolate; color: #e9e7e1; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  background: radial-gradient(700px 420px at 85% 110%, rgba(124, 110, 240, .55), transparent 60%), radial-gradient(600px 340px at 60% -20%, rgba(242, 169, 59, .32), transparent 60%), linear-gradient(135deg, #23264a 0%, #16182c 55%, #0f1020 100%) }
.auth-art::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 40px 40px;
  transform: perspective(600px) rotateX(58deg) translateY(40%) scale(2.2); transform-origin: bottom; mask-image: linear-gradient(to top, #000 10%, transparent 70%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%) }
.auth-art .brand { padding: 0 }
.auth-art h1 { font: 400 clamp(36px, 4.4vw, 60px)/1.04 var(--serif); margin: 0 0 16px; max-width: 13ch; letter-spacing: -.01em; color: #fff }
.auth-art h1 i { color: #ffcb6b }
.auth-art p { color: #c8c6de; max-width: 44ch; margin: 0 }
.auth-art .lumi-slot { right: 8%; top: 22%; width: 260px; height: 312px }
.auth-art .foot { color: #8f8cb8; font-size: 13px }
.auth-art .foot b { color: #c8c6de; font-family: var(--mono); font-weight: 400 }
.auth-form { display: grid; place-items: center; padding: 40px 24px }
.auth-form .box { width: 100%; max-width: 400px; background: #fff; border-radius: 22px; padding: 34px 32px 28px; box-shadow: var(--raise); border: 1px solid rgba(24, 22, 48, .07) }
.auth-form h2 { font: 400 38px/1.05 var(--serif); margin: 0 0 8px }
.auth-form .muted { margin: 0 0 22px }
.auth-form .btn.primary { width: 100%; padding: 11px; font-size: 15px }
.auth-form .btn.ghost { width: 100% }
.auth-foot { margin: 22px 0 0; font-size: 13px; color: var(--muted) }

/* ---------- Assessment ---------- */
.ahead { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); margin-top: 12px }
.ahead > span { display: inline-flex; gap: 6px; align-items: center }
.ph h1 .code-chip { font-size: 13px; vertical-align: middle; position: relative; top: -8px; margin-left: 4px; background: #fff; border: 1px solid var(--line); padding: 4px 7px }
.ph .sub .code-chip { background: #fff; border: 1px solid var(--line) }
.frame { width: 100%; border: 1px solid rgba(24, 22, 48, .08); border-radius: var(--radius); background: #fff; display: block; box-shadow: var(--raise) }
.frame.monitor { height: max(640px, calc(100vh - 290px)) }
.frame.report { height: max(720px, calc(100vh - 250px)) }
.ctrl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 18px }
.ctrl .sep { width: 1px; height: 24px; background: var(--line) }
.tgl { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 5px 13px 5px 6px; background: linear-gradient(180deg, #fff, #f7f5f1); cursor: pointer; font-weight: 500; font-size: 13.5px; box-shadow: var(--raise-sm) }
.tgl .pip { width: 30px; height: 18px; border-radius: 99px; background: #e2dfd7; position: relative; transition: background .2s; box-shadow: inset 0 1px 3px rgba(24, 22, 48, .2) }
.tgl .pip::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(24, 22, 48, .3); transition: transform .2s }
.tgl[aria-pressed="true"] .pip { background: linear-gradient(180deg, #3a3f66, #1a1c2e) }
.tgl[aria-pressed="true"] .pip::after { transform: translateX(12px) }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #c8c5bd; display: inline-block; flex: none }
.dot.on { background: #1fa37d; box-shadow: 0 0 0 4px rgba(31, 163, 125, .18) }
.dot.off { background: var(--crit-dot); box-shadow: 0 0 0 4px rgba(210, 80, 61, .15) }
.pair { text-align: center; padding: 28px 20px 30px; display: grid; gap: 10px; justify-items: center }
.pair .code { font: 500 clamp(30px, 3.4vw, 46px)/1 var(--mono); letter-spacing: .14em; white-space: nowrap; color: #1c1e33; border-radius: 16px; padding: 20px 26px 18px 34px;
  background: linear-gradient(180deg, #fffaf0, #fff0d2); border: 1px solid #f0d49a; box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(180, 101, 10, .1), 0 12px 28px -12px rgba(242, 169, 59, .6) }
.pair .url { font-size: 18px }
.pair .url b { font-family: var(--mono); font-weight: 500 }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 8px 0 0; text-align: left; display: grid; gap: 9px; max-width: 520px }
.steps li { counter-increment: s; display: flex; gap: 10px; font-size: 14px }
.steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #3a3f66, #1a1c2e); color: #ffcb6b; font: 500 11.5px/1 var(--mono); display: grid; place-items: center; flex: none }
.flow { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); background: #e9e6df; border-radius: 12px; padding: 4px;
  box-shadow: inset 0 2px 4px rgba(24, 22, 48, .08), inset 0 -1px 0 #fff }
.flow span { padding: 5px 7px; border-radius: 9px; flex: 1 1 auto; text-align: center; white-space: nowrap; font-size: 12px }
.flow span.past { color: var(--good) }
.flow span.on { background: #fff; color: var(--text); font-weight: 600; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24, 22, 48, .1), 0 4px 10px -3px rgba(24, 22, 48, .15) }
.review textarea.i { min-height: 120px }
.saved { font: 400 11.5px/1 var(--mono); color: var(--faint) }
.tabs { display: inline-flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; max-width: 100%; background: #e9e6df; border-radius: 12px; padding: 4px;
  box-shadow: inset 0 2px 4px rgba(24, 22, 48, .08), inset 0 -1px 0 #fff }
.tabs a { padding: 7px 14px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; border-radius: 9px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; transition: color .15s, background .15s }
.tabs a:hover { color: var(--text); background: rgba(255, 255, 255, .45) }
.tabs a[aria-current="page"] { background: #fff; color: var(--text); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24, 22, 48, .1), 0 4px 10px -3px rgba(24, 22, 48, .15) }
.tabs a .n { font: 400 11.5px/1 var(--mono); color: var(--faint) }
.tabs a[aria-current="page"] .n { color: var(--amber-ink) }

/* ---------- Modal and toasts ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(14, 15, 24, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; z-index: 50; animation: fade .15s }
.modal { background: #fff; border-radius: 22px; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 26px 26px 22px; border: 1px solid rgba(24, 22, 48, .07);
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px -20px rgba(14, 15, 24, .5), 0 10px 24px -10px rgba(14, 15, 24, .3); animation: rise .2s ease-out }
.modal h3 { margin: 0 0 8px; font: 400 30px/1.1 var(--serif) }
.modal p { margin: 0 0 14px; color: #4d5058 }
.modal .formacts { margin-top: 18px }
.secret { font: 500 22px/1.2 var(--mono); background: var(--sunk); border: 1px solid #ece9e2; border-radius: 12px; padding: 14px; text-align: center; letter-spacing: .06em; user-select: all; box-shadow: inset 0 2px 6px rgba(24, 22, 48, .06) }
#toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 60 }
.toast { background: linear-gradient(180deg, #2a2d4c, #16182c); color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 14px; max-width: 360px; animation: rise .2s ease-out;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px -10px rgba(14, 15, 24, .55) }
.toast.err { background: linear-gradient(180deg, #c84a37, #9b2c1f) }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .tsearch { display: none } }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr } .split > aside.review { position: static !important } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .hero .lumi-slot { right: 1%; width: 190px; height: 228px; margin-top: -120px } .hero .txt { max-width: 56% } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr }
  .side { position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 40; transform: translateX(-100%); transition: transform .22s; box-shadow: none; visibility: hidden }
  .shell.nav-open .side { visibility: visible }
  .shell.nav-open .side { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .35) }
  .shell.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(14, 15, 24, .4); z-index: 30 }
  .topbar { padding: 0 16px; gap: 10px; height: 56px }
  .topbar .menu { display: block }
  .page { padding: 24px 16px 50px }
  .ph { margin-bottom: 20px }
  .ph h1 { font-size: 38px }
  .hero { padding: 28px 24px; border-radius: 20px }
  .hero h1 { font-size: 42px }
  .hero .lumi-slot { width: 120px; height: 144px; right: 8px; top: 14px; margin-top: 0 }
  .hero .txt { max-width: none }
  .hero h1 { padding-right: 96px }
  .g2, .g3, .fg, .fg.three, .split { grid-template-columns: minmax(0, 1fr) !important }
  .auth { grid-template-columns: 1fr }
  .auth-art { padding: 28px 24px; min-height: 260px }
  .auth-art .lumi-slot { width: 120px; height: 144px; top: 14px; right: 14px }
  .dl { grid-template-columns: 1fr; gap: 2px 0 }
  .dl dd { margin-bottom: 8px }
}
@media (max-width: 560px) {
  .testpill span:not(.vh) { display: none }
  .flow span { flex: 1 1 40% }
  .testpill { padding: 6px 8px }
  .g4 { grid-template-columns: 1fr 1fr }
  .tiles, .tiles.t3 { grid-template-columns: 1fr 1fr; gap: 12px }
  .tile { padding: 16px } .tile .v { font-size: 40px }
  .ph h1 { font-size: 32px } .hero h1 { font-size: 34px }
  .auth-form .box { padding: 26px 20px 22px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  a.tile:hover, .btn:hover, .isle:hover { transform: none }
}
@media print { .side, .topbar, .ph .acts, .ctrl { display: none !important } .shell { display: block } body { background: #fff } .card, .frame { box-shadow: none } }

/* Data-quality light: icon + word, reasons on hover */
.ql { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: help; margin-right: 6px }
.ql svg { width: 15px; height: 15px; flex: none }
.ql.good { color: var(--good) } .ql.fair { color: var(--warn) } .ql.caution { color: var(--crit) }

/* Demo label: always visible on made-up records */
.chip.demo { background: #fff3c4; color: #6a4a00; border: 1px dashed #c99a1e; font-weight: 600; letter-spacing: .04em; font-size: 11px; padding: 2px 8px; vertical-align: middle }

/* Charts (charts.js): shared tooltip and trend tiles */
.lc-tip { position: fixed; z-index: 200; display: none; max-width: 280px; padding: 8px 10px; border-radius: 10px; background: #1c1e33; color: #f4f2ee; font-size: 12.5px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .25) }
.lc-trend { display: block; width: 100%; height: auto; overflow: visible }
.lc-trend text { font-family: var(--f) }
.prog > header .r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.plegend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted) }
.plegend .pt { width: 9px; height: 9px; border-radius: 50%; background: #2a78d6; display: inline-block; margin-left: 6px }
.plegend .pt.hollow { background: #fff; box-shadow: inset 0 0 0 2px #2a78d6 }
.pgroup { border-top: 1px solid var(--line-2); padding: 10px 0 4px }
.pgroup:first-child { border-top: 0; padding-top: 0 }
.pgroup > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0 10px }
.pgroup > summary .muted { font-weight: 400; margin-left: 6px }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px }
.ptile { margin: 0; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); min-width: 0 }
.ptile figcaption { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 4px }
.ptile figcaption b { font-weight: 600; min-width: 0 }
.ptile .now { margin-left: auto; font-family: var(--mono); font-size: 13px; white-space: nowrap }
.ptile .pfoot { display: grid; gap: 2px; margin-top: 4px }
.xp { font-size: 10.5px; font-weight: 500; color: var(--violet-ink); background: var(--violet-soft); border-radius: 10px; padding: 1px 7px; white-space: nowrap }
.delta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: #2c2f38; flex-wrap: wrap }
.delta svg { width: 12px; height: 12px; flex: none }
.delta small { font-weight: 400; color: var(--muted); font-size: 12px }
.delta small::before { content: "\00B7\0020" }

/* Compare two sessions */
.cmp-pick .body { display: flex; align-items: end; gap: 14px; flex-wrap: wrap }
.cmp-pick label.f { flex: 1 1 260px }
.cmp-pick .vs { padding-bottom: 10px; color: var(--muted); font-size: 18px }
table.ctab th[scope=row] { font-weight: 500; color: #2c2f38; font-size: 13.5px; background: none; white-space: normal; text-align: left; padding: 11px 20px; border-bottom: 1px solid var(--line-2); vertical-align: middle }
table.ctab th[scope=row] small { display: block; font-weight: 400; color: var(--faint); font-size: 12px }
table.ctab td.num, table.ctab th.num { font-family: var(--mono); font-size: 13px; white-space: nowrap }
table.ctab tr.grp th { background: var(--sunk); color: var(--text); font-weight: 600; font-size: 12.5px; padding: 9px 20px }
table.ctab td, table.ctab th[scope=row] { padding-top: 10px; padding-bottom: 10px }
.dstat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; cursor: help }
.dstat svg { width: 12px; height: 12px; flex: none }
.dstat.flagged { color: #a5481c } .dstat.not-flagged { color: var(--good) } .dstat.not-measured { color: var(--faint); font-weight: 400 }
.obs-col h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600 }
.obs-col h4 + .olist { margin-bottom: 14px }
.olist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px }
.olist li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.45 }
.olist li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 50% }
.olist li.str::before { background: var(--good-dot) }
.olist li.flag::before { background: none; border: 2px solid #a5481c; width: 6px; height: 6px; transform: rotate(45deg); border-radius: 1px }
.olist li.inf::before { background: var(--zero) }
@media (max-width: 900px) { .cmp.g2 { grid-template-columns: 1fr } }

/* Questionnaires */
.modal.wide { max-width: 760px }
.qcard > header .r { display: flex; gap: 8px; flex-wrap: wrap }
.qcard .list li { align-items: flex-start; flex-wrap: wrap }
.qcard .list li .grow b { white-space: normal }
.qacts { display: flex; gap: 6px; flex-wrap: wrap }
.qstrip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.qstrip span { display: grid; min-width: 64px; padding: 5px 8px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line-2); line-height: 1.25; cursor: help }
.qstrip small { color: var(--faint); font-size: 11px }
.qstrip b { font: 500 13px var(--mono); color: var(--text) }
.qstrip i { font-style: normal; font-size: 11px; font-weight: 600; color: #a5481c }
.qstrip span.hi { background: #fdf0e8; border-color: #f0cdb9 }
.qlink { font: 13px var(--mono); background: var(--sunk); border: 1px solid #ece9e2; border-radius: 10px; padding: 10px 12px; word-break: break-all; user-select: all }
table.qans td { font-size: 14px; padding: 9px 16px }
table.qans tr.grp th { padding: 9px 16px }
.qmean { float: right; font-weight: 400; color: var(--muted) }
.qmean b { color: #a5481c }
.qedit { margin: 14px 0 0; padding: 0 0 0 26px; display: grid; gap: 8px }
.qedit li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 36px; gap: 8px; align-items: center }
.qedit li::marker { color: var(--faint); font-size: 13px }
.qedit .iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted) }
@media (max-width: 640px) { .qedit li { grid-template-columns: minmax(0, 1fr) 36px } .qedit li select { grid-column: 1 / -1 } }
.qedit .iconbtn:hover { background: var(--crit-soft); color: var(--crit) }

/* Insights */
.plegend i.rl { width: 16px; height: 2px; background: #898781; border-radius: 2px; display: inline-block; margin-left: 6px }
.plegend i.rb { width: 14px; height: 8px; background: #2a78d6; border-radius: 4px; display: inline-block; margin-left: 6px }
.plegend i.rm { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #52514e; display: inline-block; margin-left: 6px }
.plegend i.rbd { width: 14px; height: 12px; background: rgba(42, 120, 214, .14); border-radius: 3px; display: inline-block; margin-left: 6px }
.lc-range, .lc-strip { width: 100%; height: auto; display: block }
.stripwrap { overflow-x: auto }
.stripwrap .lc-strip { min-width: 520px }
.cfilters { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 16px 20px; align-items: end }
.cfilters #creset { align-self: center; justify-self: start; padding-bottom: 8px }
label.f.sm { font-size: 12.5px; gap: 4px; color: var(--muted) }
label.f.sm .i { min-height: 34px; font-size: 14px; padding: 6px 10px }
label.f.inl { display: inline-flex; align-items: center; gap: 8px }
label.f.inl select.i { width: auto; max-width: 260px }
.tiles.t4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) }
.tile .qmix { display: grid; gap: 6px; margin-top: 14px; font-size: 13.5px; color: var(--muted) }
.tile .qmix span { display: flex; align-items: center; gap: 7px }
.tile .qmix svg { width: 15px; height: 15px; flex: none }
.tile .qmix b { font: 500 14px var(--mono); color: var(--text); min-width: 22px }
table.t td.num, table.t th.num { text-align: right; font-family: var(--mono); font-size: 13px }
table.t th.num { font-family: inherit; font-size: 12px }
table.t td.zero { color: var(--zero) }
table.t td.num .chip { font-family: var(--f); margin-left: 4px }
table.rtab th[scope="row"] { font-weight: 500; color: var(--text); font-size: 13.5px; background: none; white-space: normal; padding: 10px 20px }
table.rtab td { padding: 10px 20px }
.attn li { cursor: pointer }
.attn li:hover { background: #fbfaf7 }
.attn .chip { flex: none; min-width: 150px }
.attn .grow b { white-space: normal }
@media (max-width: 640px) { .attn li { flex-wrap: wrap } .attn .chip { min-width: 0 } .cfilters { grid-template-columns: 1fr 1fr } label.f.inl { display: grid } label.f.inl select.i { max-width: 100% } }
.attn li > svg { width: 16px; height: 16px; flex: none; color: #c4c1b8; transition: transform .15s }
.attn li:hover > svg { color: var(--amber-ink); transform: translateX(2px) }
.ptile figcaption { flex-wrap: wrap; row-gap: 2px }
.ptile figcaption b { flex: 1 1 55% }
table.ctab2 td:first-child { min-width: 170px }

/* EHCP draft */
.ehcp { max-width: 980px }
.ehcp-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px }
.ehcp-acts .r { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
.esec { margin-bottom: 16px }
.esec header h2 .muted { font-weight: 400; margin-right: 4px }
.esec header .r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.esec .etext { min-height: 180px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap }
.elatest { margin-top: 10px; font-size: 13px }
.elatest summary { cursor: pointer; color: var(--muted) }
.elatest pre { white-space: pre-wrap; font: 13px/1.5 var(--f); background: var(--sunk); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; max-height: 320px; overflow: auto }