/* palette + faces reused from sanctumx-storefront/index.html :root */
  :root {
    --pool:   #111C18;
    --deep:   #0C1512;
    --panel:  #16251E;
    --line:   #23372B;
    --jade:   #2DD5B7;
    --border: #71CEAD;
    --moss:   #63B07A;
    --parch:  #E6D8BA;
    --bone:   #F6F5DD;
    --gold:   #E5C736;
    --sand:   #D7C995;
    --muted:  #7E9488;
    --faint:  #53685B;
    --red:    #FF5345;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--pool); color: var(--parch);
    font-family: var(--sans); font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  ::selection { background: rgba(45,213,183,.25); color: var(--bone); }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
  .mono { font-family: var(--mono); }

  header { border-bottom: 1px solid var(--line); background: var(--deep); }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0; }
  .mark { font-family: var(--mono); font-size: 16px; color: var(--bone); letter-spacing: .04em; }
  .mark b { color: var(--jade); font-weight: 500; }
  .badge {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  }
  .badge i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); margin-right: 6px; vertical-align: 1px; font-style: normal; }

  main { padding: 20px 0 8px; }
  section { margin-bottom: 22px; }
  h2 {
    font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--jade); margin-bottom: 10px;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  h2 small { color: var(--faint); letter-spacing: .06em; text-transform: none; font-size: 12px; }

  /* ---------- stat cards ---------- */
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    padding: 12px 13px; min-width: 0;
  }
  .card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .card .v { font-family: var(--mono); font-size: 26px; line-height: 1.2; color: var(--bone); margin-top: 6px; overflow-wrap: anywhere; }
  .card .v.sm { font-size: 17px; line-height: 1.35; }
  .card .v em { font-style: normal; color: var(--jade); }
  .card .v .sep { color: var(--faint); }
  .card .s { font-size: 12.5px; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
  .card .s b { color: var(--sand); font-weight: 500; }
  .card.off .v { color: var(--faint); font-size: 16px; }
  .card.wide { grid-column: 1 / -1; }

  /* ---------- panels + tables ---------- */
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  table { width: 100%; border-collapse: collapse; }
  th {
    font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--deep);
  }
  td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
  tr:last-child td { border-bottom: 0; }
  td.num, th.num { font-family: var(--mono); text-align: right; white-space: nowrap; }
  td.id { font-family: var(--mono); color: var(--sand); white-space: nowrap; }
  td .sub { display: block; font-size: 12.5px; color: var(--muted); }
  .dash { color: var(--faint); }

  .pill {
    display: inline-block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
    padding: 2px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; line-height: 1.5;
  }
  .p-doing  { color: var(--jade); border-color: rgba(45,213,183,.45); background: rgba(45,213,183,.08); }
  /* target-list statuses: five distinct, calm styles */
  .p-target { color: #072820; border-color: var(--jade); background: var(--jade); }
  .p-sent   { color: var(--moss); border-color: rgba(99,176,122,.55); background: rgba(99,176,122,.12); }
  .p-done, .p-answered{ color: var(--moss); border-color: rgba(99,176,122,.45); background: rgba(99,176,122,.08); }
  .p-todo, .p-open    { color: var(--sand); border-color: rgba(215,201,149,.4); background: rgba(215,201,149,.06); }
  .p-muted  { color: var(--muted); border-color: var(--line); background: transparent; }
  .p-parked { color: var(--faint); border-color: var(--faint); border-style: dashed; background: transparent; }
  .p-watch  { color: var(--sand); border-color: rgba(215,201,149,.5); background: rgba(215,201,149,.07); }
  .p-file   { color: var(--muted); border-color: var(--line); background: transparent; }
  .p-normal { color: var(--sand); border-color: rgba(215,201,149,.4); background: transparent; }
  .p-low    { color: var(--muted); border-color: var(--line); background: transparent; }
  .p-high   { color: var(--gold); border-color: rgba(229,199,54,.5); background: rgba(229,199,54,.07); }
  .p-urgent { color: var(--red); border-color: rgba(255,83,69,.5); background: rgba(255,83,69,.07); }
  .variant { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 6px; }

  .empty { padding: 14px 13px; border-bottom: 1px solid var(--line); }
  .empty p { color: var(--parch); }
  .empty .s { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
  .empty code, .note code { font-family: var(--mono); font-size: 12px; color: var(--sand); overflow-wrap: anywhere; }
  .more { padding: 10px 12px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); background: var(--deep); }
  .note { font-size: 12.5px; color: var(--faint); margin-top: 8px; }

  /* deliverables strip */
  .strip { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .deliv { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--jade); border-radius: 8px; padding: 10px 12px; min-width: 0; }
  .deliv .d { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
  .deliv .t { color: var(--bone); margin-top: 2px; }
  .deliv .x { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

  footer { border-top: 1px solid var(--line); padding: 18px 0 30px; margin-top: 10px; }
  footer p { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  footer .vow { color: var(--sand); margin-top: 6px; font-size: 13px; }
  footer .vow::before { content: "\2014\00a0"; color: var(--faint); }


  table.compact td { padding: 9px 12px; }
  table.compact td:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .tname { color: var(--parch); }
  .card .v.tri { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 24px; }
  .card .v.tri small { font-size: 11.5px; color: var(--muted); margin-left: 4px; letter-spacing: .04em; }


  /* ---------- target list (static, built by build.py) ---------- */
  .tg-head { padding: 12px 13px; border-bottom: 1px solid var(--line); }
  .tg-count { font-family: var(--mono); font-size: 13px; color: var(--bone); }
  .tg-count .sep { color: var(--faint); }
  .tg-src { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
  .tg-src code { font-family: var(--mono); font-size: 12px; color: var(--sand); overflow-wrap: anywhere; }
  table.tg { table-layout: fixed; }
  table.tg td { font-size: 14px; }
  table.tg .rk { font-family: var(--mono); color: var(--faint); }
  table.tg .nm b { font-weight: 500; color: var(--bone); }
  table.tg .deal-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  table.tg .none { color: var(--faint); }
  .tier { font-family: var(--mono); font-size: 12px; color: var(--sand); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
  .m-only { display: none; }
  details.more-rows { border-top: 1px solid var(--line); }
  details.more-rows > summary, details.seed > summary {
    list-style: none; cursor: pointer; padding: 11px 13px; font-family: var(--mono); font-size: 13px;
    color: var(--jade); background: var(--deep); user-select: none;
  }
  details > summary::-webkit-details-marker { display: none; }
  details > summary::before { content: "\25B8\00a0\00a0"; color: var(--faint); }
  details[open] > summary::before { content: "\25BE\00a0\00a0"; }
  details.more-rows > summary:hover, details.seed > summary:hover { color: var(--border); }
  details.more-rows > summary:focus-visible, details.seed > summary:focus-visible { outline: 2px solid var(--jade); outline-offset: -2px; }
  details.more-rows[open] > summary { border-bottom: 1px solid var(--line); }
  details.more-rows .when-open { display: none; }
  details.more-rows[open] .when-open { display: inline; }
  details.more-rows[open] .when-closed { display: none; }
  details.seed { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  details.seed > summary { background: transparent; color: var(--muted); }
  .seed-list { list-style: none; border-top: 1px solid var(--line); }
  .seed-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 13px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .seed-list li:last-child { border-bottom: 0; }
  .seed-list .sn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .seed-list .ss { font-family: var(--mono); color: var(--bone); }
  .seed-note { font-size: 12px; color: var(--faint); padding: 8px 13px; border-top: 1px solid var(--line); }

  /* ---------- narrow: tables become stacked cards ---------- */
  @media (max-width: 719px) {
    table.stack thead { display: none; }
    table.stack, table.stack tbody, table.stack td { display: block; width: 100%; }
    table.stack tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
    table.stack tr:last-child { border-bottom: 0; }
    table.stack td { border: 0; padding: 3px 0; text-align: left; white-space: normal; display: flex; gap: 10px; }
    table.stack td::before {
      content: attr(data-label); flex: 0 0 96px;
      font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
      color: var(--faint); padding-top: 2px;
    }
    table.stack td > .cell { min-width: 0; flex: 1; }
    table.stack td.num { font-family: var(--mono); }
    table.stack td.lead { font-size: 15.5px; color: var(--bone); }
    table.stack td.lead::before, table.stack td.inl::before { display: none; }
    table.stack td.lead { width: auto; flex: 1 1 auto; }
    table.stack td.inl { width: auto; flex: 0 0 auto; }
    table.stack td.inl.grow { flex: 1 1 0; color: var(--bone); }
    table.stack td.inl.end { order: -1; margin-left: auto; }
    table.stack td.id { order: -3; }
    table.stack td.id + td.inl:not(.grow) { order: -2; }
    /* target rows: rank + name + score, then status/tier, then labelled firm / deal / intro */
    table.tg colgroup, table.tg thead { display: none; }
    table.tg, table.tg tbody { display: block; width: 100%; }
    table.tg tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
    table.tg td { display: flex; gap: 10px; width: 100%; border: 0; padding: 2px 0; }
    table.tg td::before {
      content: attr(data-label); flex: 0 0 64px;
      font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-top: 2px;
    }
    table.tg td > .cell { min-width: 0; flex: 1; }
    table.tg td.rk, table.tg td.nm, table.tg td.sc { width: auto; }
    table.tg td.rk::before, table.tg td.nm::before, table.tg td.sc::before { display: none; }
    table.tg td.rk { flex: 0 0 auto; font-size: 12px; order: -3; }
    table.tg td.nm { order: -2; }
    table.tg td.sc { order: -1; }
    table.tg td.nm { flex: 1 1 0; min-width: 0; font-size: 15px; }
    table.tg td.sc { flex: 0 0 auto; font-size: 15px; color: var(--bone); }
    table.tg td.st, table.tg td.ti { display: none; }
    table.tg .m-only { display: flex; gap: 8px; align-items: center; margin: 4px 0 2px; }
    table.tg .deal-d { display: none; }

  }
  @media (min-width: 720px) {
    .wrap { padding: 0 28px; }
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .card.wide { grid-column: span 2; }
    .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
    td .cell { display: block; }
    table.tg td.sc { font-size: 15px; color: var(--bone); }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* column widths (moved from inline style attrs for CSP) */
.tg col:nth-child(1){width:4%}
.tg col:nth-child(2){width:18%}
.tg col:nth-child(3){width:14%}
.tg col:nth-child(4){width:22%}
.tg col:nth-child(5){width:6%}
.tg col:nth-child(6){width:9%}
.tg col:nth-child(7){width:5%}
.tg col:nth-child(8){width:22%}

/* ---- login + sign-out (invest.sanctumx.ai) ---- */
.login-wrap{display:flex;justify-content:center;padding-top:8vh;padding-bottom:12vh}
.panel.login{width:100%;max-width:380px;padding:28px 26px 26px}
.panel.login h2{margin-top:0}
.login form{display:flex;flex-direction:column;gap:6px}
.login label{font-size:13px;opacity:.8;margin-top:10px}
.login input{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:8px;padding:10px 12px;opacity:.95}
.login input:focus{outline:2px solid #c99a3b;outline-offset:1px}
.login button,.logout button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid #c99a3b;background:#c99a3b;color:#1a1408;font-weight:600}
.login button{margin-top:18px;padding:11px 14px}
.logout{margin:0}
.logout button{padding:5px 12px;font-size:13px;background:transparent;color:inherit}
/* keep header aligned with content (.bar's padding was overriding .wrap's side padding) */
.wrap.bar{padding:14px 16px}
@media (min-width: 720px){ .wrap.bar{padding:14px 28px} }