/* Prospect Hub reframe — styles lifted verbatim from the signed-off wireframe (docs/Hub_Reframe_Wireframe.html) */
:root{
    --bg:#eef2f6; --surface:#ffffff; --surface-2:#f6f9fb; --ink:#16232e; --ink-soft:#5b6b78;
    --line:#e0e7ee; --line-strong:#cdd8e2; --rail:#0b2d4d; --rail-ink:#cfdbe8; --rail-ink-dim:#7f9bb8;
    --rail-active:#12456e; --accent:#0b5ea8; --accent-ink:#fff; --accent-soft:#e8f1fa;
    --hot:#c0392b; --warm:#c9791b; --watch:#4f7ea3; --cold:#93a0ab;
    --good:#1a7a3c; --good-soft:#eaf7ef; --amber-soft:#fdf3e3; --danger-soft:#fdeef0; --danger:#b23a3a;
    --shadow:0 1px 2px rgba(16,32,45,.06),0 6px 20px rgba(16,32,45,.08);
    --r:10px; --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0d1620; --surface:#16212d; --surface-2:#121b25; --ink:#e7eef4; --ink-soft:#9fb1be;
      --line:#25333f; --line-strong:#33475680; --rail:#0a1826; --rail-ink:#c3d3e2; --rail-ink-dim:#6f8aa6;
      --rail-active:#14324e; --accent:#4c9be6; --accent-ink:#06121e; --accent-soft:#13314c;
      --hot:#e05a4c; --warm:#d9962f; --watch:#6fa3c7; --cold:#8090a0;
      --good:#4bbb72; --good-soft:#12331f; --amber-soft:#33260f; --danger-soft:#331717; --danger:#e07070;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);}
  }
  :root[data-theme="dark"]{ --bg:#0d1620; --surface:#16212d; --surface-2:#121b25; --ink:#e7eef4; --ink-soft:#9fb1be;
    --line:#25333f; --rail:#0a1826; --rail-ink:#c3d3e2; --rail-ink-dim:#6f8aa6; --rail-active:#14324e;
    --accent:#4c9be6; --accent-ink:#06121e; --accent-soft:#13314c; --hot:#e05a4c; --warm:#d9962f;
    --watch:#6fa3c7; --cold:#8090a0; --good:#4bbb72; --good-soft:#12331f; --amber-soft:#33260f;
    --danger-soft:#331717; --danger:#e07070; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);}
  :root[data-theme="light"]{ --bg:#eef2f6; --surface:#fff; --surface-2:#f6f9fb; --ink:#16232e; --ink-soft:#5b6b78;
    --line:#e0e7ee; --rail:#0b2d4d; --rail-ink:#cfdbe8; --rail-ink-dim:#7f9bb8; --rail-active:#12456e;
    --accent:#0b5ea8; --accent-ink:#fff; --accent-soft:#e8f1fa; --hot:#c0392b; --warm:#c9791b; --watch:#4f7ea3;
    --cold:#93a0ab; --good:#1a7a3c; --good-soft:#eaf7ef; --amber-soft:#fdf3e3; --danger-soft:#fdeef0;
    --danger:#b23a3a; --shadow:0 1px 2px rgba(16,32,45,.06),0 6px 20px rgba(16,32,45,.08);}

  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
    font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
  .app{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
  button{font-family:inherit;cursor:pointer}
  .num{font-variant-numeric:tabular-nums}

  /* ── LEFT RAIL ── */
  .rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;padding:14px 0;
    position:sticky;top:0;height:100vh}
  .brand{font-weight:700;font-size:15px;color:#fff;padding:2px 18px 14px;letter-spacing:.2px}
  .brand span{color:var(--rail-ink-dim);font-weight:600}
  .rail .grp{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--rail-ink-dim);padding:14px 18px 6px}
  .navitem{display:flex;align-items:center;gap:11px;padding:9px 18px;color:var(--rail-ink);background:none;border:0;
    width:100%;text-align:left;font-size:13.5px;border-left:3px solid transparent}
  .navitem[hidden]{display:none}  /* [hidden] must beat display:flex — hide manager tabs from reps */
  .navitem .ic{width:16px;text-align:center;opacity:.85}
  .navitem .ct{margin-left:auto;font-size:11px;font-weight:700;background:var(--hot);color:#fff;border-radius:9px;padding:1px 7px}
  .navitem:hover{background:#ffffff10}
  .navitem.on{background:var(--rail-active);color:#fff;border-left-color:var(--accent);font-weight:600}
  .rail .who{padding:12px 18px 2px;font-size:11.5px;color:var(--rail-ink-dim);border-top:1px solid #ffffff14}
  .railfoot{margin-top:auto;padding:12px 14px 2px;display:flex;flex-direction:column;gap:6px}
  .rbchip{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:#ffffff0d;
    border:1px solid #ffffff1f;color:var(--rail-ink);border-radius:8px;padding:7px 11px;font-size:12.5px}
  .rbchip:hover{background:#ffffff1a;border-color:#ffffff33}
  .rbchip .ic{width:15px;text-align:center;opacity:.9}
  .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--surface);
    padding:10px 16px;border-radius:9px;font-size:13px;box-shadow:0 8px 28px rgba(0,0,0,.28);opacity:0;
    pointer-events:none;transition:opacity .18s,transform .18s;z-index:40;max-width:80vw}
  .toast.show{opacity:1;transform:translate(-50%,0)}
  @media (prefers-reduced-motion:reduce){.toast{transition:none}}

  /* ── MAIN ── */
  .main{min-width:0;display:flex;flex-direction:column}
  .topbar{display:flex;align-items:center;gap:14px;padding:16px 22px 12px;border-bottom:1px solid var(--line);
    background:var(--surface);position:sticky;top:0;z-index:5}
  .topbar h1{font-size:18px;margin:0;letter-spacing:-.2px}
  .topbar .desc{font-size:12.5px;color:var(--ink-soft);margin-top:1px}
  .spacer{margin-left:auto}
  .tbtn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:8px;
    padding:6px 11px;font-size:12.5px}
  .tbtn:hover{border-color:var(--accent)}
  .tbtn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}

  .content{display:grid;grid-template-columns:238px 1fr;gap:0;min-height:0;flex:1}
  .content.nofilters{grid-template-columns:1fr}

  /* ── FILTER SIDEBAR ── */
  .filters{border-right:1px solid var(--line);padding:16px 16px 40px;background:var(--surface-2);overflow:auto}
  .filters h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:18px 0 8px}
  .filters h3:first-child{margin-top:2px}
  .terr{background:var(--amber-soft);border:1px solid #d9a94e60;border-radius:8px;padding:9px 11px;font-size:12px;color:var(--ink)}
  .terr b{color:var(--warm)}
  .chipset{display:flex;flex-wrap:wrap;gap:6px}
  .fchip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:20px;
    padding:4px 11px;font-size:12px}
  .fchip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .frow{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:6px 0;color:var(--ink)}
  .frow input[type=range]{flex:1;accent-color:var(--accent)}
  .fcheck{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:5px 0}

  /* multi-select dropdown */
  .msel{position:relative;margin:2px 0}
  .mbtn{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:var(--surface);
    border:1px solid var(--line-strong);color:var(--ink);border-radius:8px;padding:7px 10px;font-size:12.5px}
  .mbtn:hover{border-color:var(--accent)}
  .mbtn .cap{color:var(--ink-soft)}
  .mbtn .cnt{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
  .mbtn .car{margin-left:auto;color:var(--ink-soft);font-size:10px}
  .msel.open .mbtn{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
  .mpop{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);
    border:1px solid var(--line-strong);border-radius:9px;box-shadow:var(--shadow);z-index:8;
    padding:6px;max-height:230px;overflow:auto}
  .msel.open .mpop{display:block}
  .mpop label{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-size:12.5px;cursor:pointer}
  .mpop label:hover{background:var(--surface-2)}
  .mpop input{accent-color:var(--accent)}

  /* sort control */
  .sortrow{display:flex;align-items:center;gap:8px;margin-left:auto}
  .sortrow .lb{font-size:11.5px;color:var(--ink-soft)}
  .sortsel{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);border-radius:8px;
    padding:6px 26px 6px 10px;font-size:12.5px;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
    background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .sortsel:hover{border-color:var(--accent)}
  .geosel{width:100%}
  .cityin{display:none;width:100%;margin-top:6px;background:var(--surface);border:1px solid var(--line-strong);
    color:var(--ink);border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:inherit}
  .cityin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
  .geowrap.city .cityin{display:block}
  .geohint{font-size:11px;color:var(--ink-soft);margin-top:5px}

  /* ── LIST ── */
  .list{padding:14px 20px 60px;overflow:auto}
  .surfbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .sftab{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--ink);display:flex;gap:8px;align-items:center}
  .sftab .n{font-weight:700;font-variant-numeric:tabular-nums}
  .sftab.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  .sftab.act.on{border-color:var(--good);box-shadow:inset 0 0 0 1px var(--good)}
  .sfhint{font-size:11.5px;color:var(--ink-soft);margin-left:auto}

  .row{display:grid;grid-template-columns:60px 1fr auto;gap:16px;align-items:center;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
  .row:hover{border-color:var(--accent)}
  .row.click{cursor:pointer}
  .tier{border-radius:9px;padding:8px 0;text-align:center;color:#fff;font-weight:800;font-size:16px;line-height:1;font-variant-numeric:tabular-nums}
  .tier .lbl{display:block;font-size:8.5px;font-weight:700;letter-spacing:.5px;opacity:.92;margin-top:3px}
  .t-hot{background:var(--hot)} .t-warm{background:var(--warm)} .t-watch{background:var(--watch)} .t-cold{background:var(--cold)}
  .rname{font-weight:700;font-size:14.5px;letter-spacing:-.1px}
  .rmeta{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .rwhy{font-size:12.5px;color:var(--ink);margin-top:6px}
  .rwhy .k{color:var(--accent);font-weight:600}
  .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
  .bdg{font-size:11px;border-radius:20px;padding:2px 9px;border:1px solid var(--line-strong);color:var(--ink-soft);background:var(--surface-2)}
  .bdg.nd{color:var(--danger);border-color:#d0808040;background:var(--danger-soft)}
  .bdg.own{color:var(--accent);border-color:#6aa5da55;background:var(--accent-soft)}
  .bdg.fam{color:var(--good);border-color:#57a97a55;background:var(--good-soft)}
  .bdg.mw{color:#7a51b0;border-color:#a982d955;background:#7a51b012}
  .bdg.gf{color:#2a6fb0;border-color:#6aa5da55;background:var(--accent-soft)}
  .bdg.life{color:#0d7a72;border-color:#3aa89f55;background:#0d7a7212;font-weight:600}
  .bdg.life.build{color:#b06a12;border-color:#d99a4e55;background:var(--amber-soft)}
  .racts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .rbtn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:7px;padding:5px 12px;font-size:12px;white-space:nowrap}
  .rbtn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
  .rbtn:hover{border-color:var(--accent)}

  /* worklist (My Work) */
  .wk{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:var(--surface);
    border:1px solid var(--line);border-left:4px solid var(--hot);border-radius:var(--r);padding:12px 15px;margin-bottom:10px;box-shadow:var(--shadow)}
  .wk.due{border-left-color:var(--warm)} .wk.warm{border-left-color:var(--watch)}
  .wk .act{font-size:13px;color:var(--ink);margin-top:5px}
  .wk .act b{color:var(--accent)}
  .duechip{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--danger-soft);color:var(--danger)}
  .duechip.soon{background:var(--amber-soft);color:var(--warm)}

  .placeholder{padding:60px 20px;text-align:center;color:var(--ink-soft)}
  .placeholder .big{font-size:34px;opacity:.4}
  .placeholder h2{color:var(--ink);margin:10px 0 4px;font-size:17px}

  /* ── DETAIL DRAWER ── */
  .scrim{position:fixed;inset:0;background:#0a141e66;opacity:0;pointer-events:none;transition:opacity .18s;z-index:20}
  .scrim.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100vh;width:390px;max-width:92vw;background:var(--surface);
    border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(10,20,30,.18);transform:translateX(100%);
    transition:transform .22s ease;z-index:21;display:flex;flex-direction:column}
  .drawer.open{transform:none}
  @media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}
  .dhead{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
  .dhead h2{margin:0;font-size:17px}
  .dhead .loc{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
  .dhead .close{position:absolute;top:12px;right:14px;border:0;background:none;color:var(--ink-soft);font-size:22px;line-height:1}
  .dbody{padding:14px 18px 40px;overflow:auto}
  .buckets{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:6px 0 12px}
  .bk{border:1px solid var(--line);border-radius:9px;padding:10px 6px;text-align:center;background:var(--surface-2)}
  .bk .v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
  .bk .v.nd{font-size:12px;color:var(--danger);font-weight:700}
  .bk .l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);margin-top:3px}
  .dsect{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:16px 0 6px;font-weight:700}
  .trace{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--ink)}
  .trace div{padding:3px 0;border-bottom:1px dashed var(--line)} .trace div:last-child{border:0}
  .trace .k{color:var(--accent);font-weight:600}
  .kv{font-size:12.5px;color:var(--ink);padding:3px 0}
  .kv .k{color:var(--ink-soft)}
  .fbrow{display:flex;gap:8px;margin-top:6px}
  .fbtn{flex:1;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:8px;font-size:12.5px;color:var(--ink)}
  .fbtn.up{border-color:#57a97a80;color:var(--good)} .fbtn.dn{border-color:#d0808080;color:var(--danger)}
  .sectlist{display:flex;flex-wrap:wrap;gap:6px}
  .sectlist .s{font-size:11.5px;border:1px solid var(--line);border-radius:7px;padding:4px 9px;color:var(--ink-soft);background:var(--surface-2)}

  /* region-note overlay */
  body.notes .note-pin{display:inline-flex}
  .note-pin{display:none;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
    background:var(--accent);color:#fff;font-size:10px;font-weight:700;margin-left:7px;vertical-align:middle;flex:none}
  .notebar{display:none;background:var(--accent-soft);border-bottom:1px solid var(--line);
    padding:10px 22px;font-size:12.5px;color:var(--ink)}
  body.notes .notebar{display:block}
  .notebar b{color:var(--accent)}

  @media (max-width:760px){
    .app{grid-template-columns:1fr}
    .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:8px}
    .rail .grp,.rail .who,.railfoot{display:none}
    .brand{width:100%;padding:6px 10px 8px}
    .navitem{width:auto;border-left:0;border-bottom:3px solid transparent;padding:8px 10px}
    .navitem.on{border-left:0;border-bottom-color:var(--accent)}
    .content,.content.nofilters{grid-template-columns:1fr}
    .filters{border-right:0;border-bottom:1px solid var(--line)}
  }