:root {
  --bg: #0f1116;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --text: #e6e9ef;
  --muted: #8d95a5;
  --accent: #4c8dff;
  --good: #35c08a;
  --warn: #e8b339;
  --bad: #e2604a;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 14px; }
.mark {
  width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #7b5cff);
  font-weight: 700; letter-spacing: .5px;
}
h1 { margin: 0; font-size: 17px; font-weight: 650; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
nav { display: flex; gap: 6px; }
.tab {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: var(--text); background: var(--panel-2); border-color: var(--line); }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; padding: 16px 24px;
}
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.kpi .label { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.kpi .value { font-size: 22px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .value.accent { color: var(--accent); }
.kpi .value.good { color: var(--good); }

main { padding: 0 24px 32px; }
.view.hidden { display: none; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
input[type=search], select, input[type=text], textarea {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit;
}
input[type=search] { min-width: 280px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.chk { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.spacer { flex: 1; }
.muted { color: var(--muted); font-size: 12.5px; }

.split { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: start; }
.list-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-height: 68vh; overflow-y: auto; }

table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; background: var(--panel-2); text-align: left;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.sel { background: #1d2740; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); }
.pill.pan { color: var(--good); border-color: #1f5c45; background: #10261f; }
.pill.name_pin { color: var(--warn); border-color: #5c4a1f; background: #261f10; }
.pill.name_folio { color: var(--muted); }
.pill.multi { color: var(--accent); border-color: #234; background: #101a2b; }

.detail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; max-height: 68vh; overflow-y: auto; }
.detail .empty { color: var(--muted); padding: 40px 10px; text-align: center; }
.detail h2 { margin: 0 0 2px; font-size: 17px; }
.detail .meta { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.pos { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: var(--panel-2); }
.pos .top { display: flex; justify-content: space-between; gap: 10px; }
.pos .co { font-weight: 600; }
.pos .val { color: var(--good); font-variant-numeric: tabular-nums; }
.pos .row { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.evidence { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--accent); background: #121722; font-size: 12px; color: #b9c2d0; border-radius: 0 6px 6px 0; }
.evidence code { color: var(--accent); font-size: 11.5px; }

.case { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.case h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.case-row { display: flex; gap: 8px; margin-bottom: 8px; }
.case-row select, .case-row input { flex: 1; }
textarea { width: 100%; min-height: 62px; resize: vertical; }
button.primary {
  background: var(--accent); border: none; color: #fff; padding: 8px 16px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 550; margin-top: 8px;
}
button.primary:hover { filter: brightness(1.08); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.card h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.bar-row { display: grid; grid-template-columns: 1fr 60px 110px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.bar { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin-top: 5px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #7b5cff); }

/* --------------------------------------------------------- matching rules */
.rule-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rule-head h3 { margin:0; }
.card.rule-live { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.pill { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
        padding:2px 7px; border-radius:99px; border:1px solid var(--line);
        color:var(--muted); }
.pill.live { border-color:var(--accent); color:var(--accent); }
.rule-row { grid-template-columns:1fr 96px; }
.rule-note { margin:12px 0 14px; font-size:12.5px; min-height:52px; }
button.primary.danger { background:var(--bad); }
button.primary:disabled { opacity:.55; cursor:default; }

h2.sec { margin:34px 0 6px; font-size:15px; font-weight:600; }
.warnbar { border:1px solid var(--warn); background:rgba(230,170,60,.08);
           color:var(--fg); padding:11px 14px; border-radius:8px;
           margin:0 0 14px; font-size:13px; line-height:1.55; max-width:900px; }
.pill.ok  { border-color:var(--good); color:var(--good); }
.pill.bad { border-color:var(--bad);  color:var(--bad);  }
td.num.zero { color:var(--bad); }

.hidden { display: none !important; }

/* --------------------------------------------------------- extra columns */
th.xcol, td.xcol { display:none; }
body.wide-cols th.xcol, body.wide-cols td.xcol { display:table-cell; }
body.wide-cols .split { grid-template-columns:1fr; }
body.wide-cols .list-wrap { overflow-x:auto; max-height:none; }
body.wide-cols #investors { min-width:1650px; }
td.addr { max-width:280px; font-size:12px; color:var(--muted); }
#investors code { font-size:11.5px; color:var(--muted); }

/* ------------------------------------------------------- data-quality flag */
.flag { font-size:10px; letter-spacing:.04em; text-transform:uppercase;
        padding:1px 6px; border-radius:99px; margin-left:6px;
        border:1px solid var(--bad); color:var(--bad); white-space:nowrap; }
.flag.warn { border-color:var(--warn); color:var(--warn); }
.pill.claim-dividend { border-color:var(--warn); color:var(--warn); }
.pill.claim-shares { border-color:var(--good); color:var(--good); }
.pill.claim-mixed { border-color:var(--accent); color:var(--accent); }

/* ------------------------------------------------------- full person record */
.idtable { width:100%; border-collapse:collapse; margin:12px 0 18px;
           font-size:12.5px; }
.idtable th { text-align:left; width:150px; color:var(--muted); font-weight:500;
              padding:5px 10px 5px 0; vertical-align:top; }
.idtable td { padding:5px 0; color:var(--fg); word-break:break-word; }
.idtable tr + tr th, .idtable tr + tr td { border-top:1px solid var(--line); }

/* ------------------------------------------------------------------- team */
.newuser { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
           margin-bottom:16px; padding:12px; border:1px solid var(--line);
           border-radius:9px; background:var(--panel); }
.newuser input, .newuser select {
  background:var(--panel-2); border:1px solid var(--line); color:var(--fg);
  border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; }
.newuser select { max-width:340px; }
#team tr.inactive { opacity:.5; }
#team td button { margin-right:5px; }
.flag.ok { border-color:var(--good); color:var(--good); }

/* ================================================================ filters */
.filters { margin-bottom: 14px; }

.fbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fbar #search { flex:1; min-width:240px; max-width:420px; }
.fbar select { min-width:150px; }

.filters input, .filters select {
  background:var(--panel); border:1px solid var(--line); color:var(--fg);
  border-radius:7px; padding:7px 10px; font:inherit; font-size:13px;
  height:34px; box-sizing:border-box; }
.filters input:focus, .filters select:focus {
  outline:none; border-color:var(--accent); }

/* Chrome paints autofilled fields white, which turned one filter into a
   glaring light box on a dark page. Repaint it back. */
.filters input:-webkit-autofill,
.filters input:-webkit-autofill:hover,
.filters input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 40px var(--panel) inset;
  caret-color: var(--fg); }

.badge { background:var(--accent); color:#fff; border-radius:99px;
         padding:1px 7px; font-size:11px; margin-left:5px; font-weight:600; }
button.ghost.on { border-color:var(--accent); color:var(--accent); }

/* -------------------------------------------------------- applied filters */
.fchips { display:flex; gap:7px; flex-wrap:wrap; align-items:center;
          margin-top:10px; }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:12px;
        background:var(--panel-2); border:1px solid var(--line);
        border-radius:99px; padding:3px 5px 3px 10px; color:var(--muted); }
.chip strong { color:var(--fg); font-weight:600; }
.chip button { background:none; border:none; color:var(--muted); cursor:pointer;
               font-size:15px; line-height:1; padding:0 4px; border-radius:99px; }
.chip button:hover { color:var(--bad); }
button.linky { background:none; border:none; color:var(--accent);
               cursor:pointer; font:inherit; font-size:12px; }

/* ----------------------------------------------------------- filter panel */
.fpanel { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
          gap:18px 24px; margin-top:12px; padding:16px 18px;
          border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.fpanel section { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.fpanel h4 { margin:0 0 2px; font-size:10.5px; text-transform:uppercase;
             letter-spacing:.08em; color:var(--muted); font-weight:600; }
.fpanel .chk { font-size:12.5px; color:var(--muted); display:flex;
               align-items:center; gap:7px; height:26px; }
.fpanel .rng { display:flex; align-items:center; gap:6px; font-size:12.5px;
               color:var(--muted); }
.fpanel .rng input { width:100%; min-width:0; }
.fpanel button.ghost { height:34px; }

button.ghost, a.btnlink {
  background:var(--panel); border:1px solid var(--line); color:var(--fg);
  border-radius:7px; padding:0 12px; height:34px; font:inherit; font-size:12.5px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
button.ghost:hover, a.btnlink:hover { border-color:var(--accent); color:var(--accent); }

/* ================================================================= charts */
.chartgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr));
             gap:16px; margin-top:16px; }
.card.chart h3 { margin:0 0 10px; font-size:13.5px; }
.hbars { display:flex; flex-direction:column; gap:9px; }
.hbar { display:grid; grid-template-columns:150px 1fr 52px 86px; gap:9px;
        align-items:center; font-size:12.5px; }
.hbar .hl { color:var(--muted); overflow:hidden; text-overflow:ellipsis;
            white-space:nowrap; }
.hbar .ht { background:var(--panel-2); border-radius:99px; height:9px; overflow:hidden; }
.hbar .ht i { display:block; height:100%; border-radius:99px; }
.hbar .hn { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.hbar .hv { text-align:right; font-variant-numeric:tabular-nums; }
.donutwrap { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.legend { display:flex; flex-direction:column; gap:6px; font-size:12.5px; flex:1;
          min-width:150px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px;
            margin-right:7px; vertical-align:middle; }
.legend .muted { margin-left:5px; }

/* ------------------------------------------------------------ drill-down */
.bar-row.clickable, tr.clickable { cursor:pointer; }
.bar-row.clickable { border-radius:7px; padding:3px 6px; margin:0 -6px;
                     transition:background .12s; }
.bar-row.clickable:hover { background:var(--panel-2); }
#companies tr.clickable:hover td { background:var(--panel-2); }
.hint { font-size:11px; margin:-6px 0 12px; opacity:.7; }
.anhead { display:flex; justify-content:space-between; align-items:flex-start;
          gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.anhead h2 { margin:0; font-size:17px; }
.anactions { display:flex; gap:8px; align-items:center; }
#anTop tbody tr { cursor:pointer; }
#anTop tbody tr:hover td { background:var(--panel-2); }

/* --------------------------------------------------------- plain language */
.lede { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 14px;
        max-width:760px; }
h2.qtitle { font-size:18px; margin:0 0 8px; font-weight:600; }

/* =============================================================== overview */
.hero { padding:4px 0 12px; }
.hero .hnum { font-size:38px; font-weight:650; letter-spacing:-.02em;
              color:var(--accent); line-height:1.1; }
.hero .hsub { color:var(--muted); font-size:14px; margin-top:8px; max-width:640px;
              line-height:1.6; }
.hero .hsub strong { color:var(--fg); }

.seggrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
           gap:16px; align-items:start; }
.card.seg { display:flex; flex-direction:column; }
.card.seg h3 { margin:0 0 14px; font-size:13px; letter-spacing:.02em; }
.segrows { display:flex; flex-direction:column; gap:11px; }

/* label | count | value on one line, bar underneath as a thin rule */
.segrow { display:grid; grid-template-columns:1fr auto auto; gap:12px;
          align-items:baseline; padding:5px 7px; margin:0 -7px;
          border-radius:7px; }
.segrow .sl { font-size:13px; color:var(--fg); white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis; }
.segrow .sn { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.segrow .sv { font-size:13px; font-variant-numeric:tabular-nums; min-width:78px;
              text-align:right; }
.segrow .sbar { grid-column:1 / -1; height:4px; background:var(--panel-2);
                border-radius:99px; overflow:hidden; margin-top:5px; }
.segrow .sbar i { display:block; height:100%; border-radius:99px;
                  background:linear-gradient(90deg,var(--accent),#8b5cf6); }
.segrow.clickable:hover { background:var(--panel-2); }
.card.seg .more { font-size:11.5px; margin:12px 0 0; }

/* ------------------------------------------------------ full person record */
h4.dsec { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
          color:var(--muted); margin:18px 0 6px; font-weight:600; }
.idtable th { width:142px; }
.missing { color:var(--muted); opacity:.65; font-style:italic; font-size:12px; }
.completeness { display:flex; align-items:center; gap:10px; margin:12px 0 4px;
                font-size:11.5px; }
.completeness .cbar { flex:1; height:5px; background:var(--panel-2);
                      border-radius:99px; overflow:hidden; }
.completeness .cbar i { display:block; height:100%; border-radius:99px;
                        background:linear-gradient(90deg,var(--accent),#10b981); }
details.tech { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
details.tech summary { cursor:pointer; font-size:11.5px; color:var(--muted);
                       list-style:none; }
details.tech summary::before { content:"▸ "; }
details.tech[open] summary::before { content:"▾ "; }

/* ------------------------------------------------- cross-company spotlight */
.spotlight { display:flex; justify-content:space-between; align-items:center;
             gap:20px; flex-wrap:wrap; padding:16px 18px; margin:0 0 18px;
             border:1px solid var(--line); border-radius:10px;
             background:var(--panel); }
.spotlight.live { border-color:var(--accent);
                  background:linear-gradient(90deg, rgba(99,102,241,.09), transparent 70%); }
.spotlight h3 { margin:0; font-size:14.5px; }
.spotlight .lede { margin:0; max-width:640px; }

/* ------------------------------------------------------------ casework */
.chip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  padding:6px 11px; border-radius:99px; border:1px solid var(--line);
  background:var(--panel); color:var(--fg); cursor:pointer; }
.chip:hover { border-color:var(--accent); }
.chip.on { border-color:var(--accent); background:rgba(99,102,241,.12);
  color:var(--accent); }
.chip .x { opacity:.6; font-weight:600; }
.chip .n { opacity:.65; font-size:11.5px; }

.mini-ring { --pct:0; width:38px; height:38px; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--panel-2) 0);
  display:grid; place-items:center; }
.mini-ring b { width:29px; height:29px; border-radius:50%; background:var(--panel);
  display:grid; place-items:center; font-size:10.5px; font-weight:600; }

.wait-claimant { color:var(--warn); }
.wait-us       { color:var(--accent); font-weight:600; }
.wait-rta      { color:var(--muted); }
.idle-hot      { color:var(--bad); font-weight:600; }

.doc-row { display:flex; align-items:center; gap:9px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:13px; }
.doc-row:last-child { border-bottom:0; }
.doc-row .grow { flex:1; }
.doc-actions button { font-size:11.5px; padding:4px 9px; margin-left:4px; }

.tl { list-style:none; padding:0; margin:10px 0 0; }
.tl li { padding:7px 0 7px 14px; border-left:2px solid var(--line);
  font-size:12.5px; color:var(--muted); position:relative; }
.tl li b { color:var(--fg); font-weight:500; }
.tl li.staff { border-left-color:var(--accent); }
.tl li.hidden-from-claimant b::after { content:" · internal"; color:var(--muted);
  font-weight:400; font-size:11px; }

/* ------------------------------------------------------------ conversation */
.thread { max-height: 260px; overflow-y: auto; margin-bottom: 10px; }
.msg { padding: 9px 11px; border-radius: 9px; margin-bottom: 7px;
       background: var(--panel-2); font-size: 13px; }
.msg.staff { background: rgba(99,102,241,.10); }
.msg.internal { background: rgba(230,170,60,.10);
  border: 1px dashed rgba(230,170,60,.45); }
.msg-who { font-size: 11px; color: var(--muted); margin-bottom: 3px;
  display: flex; gap: 7px; align-items: center; }
.msgbox textarea { width: 100%; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px;
  font: inherit; font-size: 13px; resize: vertical; }

/* ------------------------------------------------------------ signed in as */
/* Who you are and how to stop being them. Neither was on screen before, which
   made it impossible to tell a masked read-only session from a full one. */
.whoami { display: flex; align-items: center; gap: 10px; margin-left: auto;
          padding-left: 16px; }
.whoami .name { font-size: 13px; line-height: 1.25; text-align: right; }
.whoami .name b { display: block; font-weight: 600; }
.whoami .name span { color: var(--muted); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; }
.whoami .avatar { width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; flex: none; }
.whoami .avatar.viewer { background: var(--warn); }
header { flex-wrap: wrap; }
