/* Allocate Institute — Belief Partners brand + West Bridge console patterns */
:root{
  --navy:#0b2340;
  --navy2:#1a2c56;
  --blue:#206092;
  --blue2:#296695;
  --blue3:#3d739c;
  --dusty:#6f96af;
  --mist:#9ab3bf;
  --fog:#bdcbcc;
  --sage:#d8ded6;
  --cream:#faf5e3;
  --cream2:#f6f2e1;
  --cream3:#f7f3e1;
  --ink:#0b2340;
  --ink2:#3a4a5c;
  --ink3:#6f7d8c;
  --panel:#ffffff;
  --line:#d8ded6;
  --line2:#bdcbcc;
  --blue-soft:#e4eef4;
  --red:#A03D2E;
  --red-soft:#f6e9e5;
  --amber:#996f14;
  --amber-soft:#f6efdc;
  --good:#2e6b46;
  --good-soft:#e7f0ea;
  --side-w:228px;
  --empty:#e8f0f6;
  --preview:#f3efe4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:#fff var(--navy);scrollbar-width:thin}
body{font-family:"Roboto","Lato",-apple-system,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);font-size:13.5px;line-height:1.45}
.serif{font-family:"Prata",Georgia,serif}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== APP SHELL ===== */
#app{display:flex;min-height:100vh}
#side{width:var(--side-w);flex:0 0 var(--side-w);background:var(--navy);color:#e8eaee;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:10}
#side .brand{display:flex;align-items:center;gap:12px;padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
#side .brand .mark{display:block;width:34px;height:34px;flex:0 0 34px}
#side .brand .bt{min-width:0}
#side .brand .n{font-family:"Prata",Georgia,serif;font-size:13px;color:#ffffff;line-height:1.3}
#side .brand .s{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#c4d3de;font-weight:500;margin-top:4px}
#side nav{padding:10px;flex:1;overflow-y:auto}
.navlbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#6f96af;padding:12px 12px 5px}
.nav-it{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:6px;cursor:pointer;color:#c9ced7;font-size:12.5px;margin-bottom:1px;transition:background .12s;border:none;background:transparent;width:100%;text-align:left;font-family:inherit}
.nav-it:hover{background:rgba(255,255,255,.07)}
.nav-it.on{background:rgba(255,255,255,.13);color:#fff;font-weight:500}
.nav-it .num{font-size:10px;opacity:.55;width:16px;flex:0 0 16px}
#side .session{padding:13px 14px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:#9ab3bf}
#side .session b{color:#dfe4ec;font-weight:500}

#main{flex:1;min-width:0;display:flex;flex-direction:column}
#top{display:flex;align-items:center;gap:14px;padding:13px 26px;background:var(--panel);border-bottom:2px solid var(--fog);position:sticky;top:0;z-index:5;flex-wrap:wrap}
#top h1{font-family:"Prata",Georgia,serif;font-size:18px;font-weight:400;margin-right:auto;color:var(--navy)}
.chip{font-size:11px;color:var(--ink2);background:var(--cream2);border:1px solid var(--line2);border-radius:14px;padding:4px 11px}
.chip b{color:var(--blue)}
.chip.phase2{background:var(--preview);border-color:#e0d5b8;color:var(--amber)}
.chip.preview{background:var(--amber-soft);border-color:#e8d9a8;color:var(--amber)}
#content{padding:22px 26px 60px}
.view{display:none}
.view.on{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== KPI / PANELS ===== */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.kpis.c4{grid-template-columns:repeat(4,1fr)}
.kpis.c3{grid-template-columns:repeat(3,1fr)}
.kpis.c2{grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--blue);border-radius:2px;padding:14px 16px;position:relative}
.kpi .l{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3);font-weight:500}
.kpi .v{font-family:"Prata",Georgia,serif;font-size:22px;margin:6px 0 3px;color:var(--navy)}
.kpi .d{font-size:11.5px;color:var(--ink2)}
.up{color:var(--good);font-weight:600}.dn{color:var(--red);font-weight:600}.wr{color:var(--amber);font-weight:600}

.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:18px;margin-bottom:16px;position:relative}
.panelbox h3{font-family:"Prata",Georgia,serif;font-size:15px;font-weight:400;margin-bottom:2px;color:var(--navy)}
.panelbox .sub{font-size:11.5px;color:var(--ink3);margin-bottom:12px}
.panelbox .meta{position:absolute;top:18px;right:18px;text-align:right;font-size:9.5px;color:var(--ink3);line-height:1.5;max-width:200px}
.panelbox .meta b{color:var(--ink2);font-weight:500}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.cols>*,.cols3>*{min-width:0}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);text-align:left;padding:7px 9px;border-bottom:1.5px solid var(--blue);font-weight:700}
td{padding:8px 9px;border-bottom:1px solid #ebe8dc;vertical-align:middle;color:var(--ink2)}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{color:var(--ink)}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--blue-soft)}
tr.total td{background:#f3f0e6;font-weight:700;color:var(--ink);border-top:2px solid var(--line2)}
.twrap{overflow-x:auto}

/* ===== PILLS / TAGS / BARS ===== */
.pill{display:inline-block;font-size:10.5px;font-weight:700;border-radius:2px;padding:2px 9px;letter-spacing:.3px}
.pill.g{background:var(--blue-soft);color:var(--blue)}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.r{background:var(--red-soft);color:var(--red)}
.pill.a{background:var(--amber-soft);color:var(--amber)}
.pill.dim{background:#eef0f3;color:var(--ink3);font-weight:600}
.pill.empty{background:var(--empty);color:var(--blue);border:1px dashed var(--dusty)}
.bar-bg{background:#e8ebe6;border-radius:2px;height:7px;width:100%;overflow:hidden;min-width:70px}
.bar-bg.tall{height:15px}
.bar-fg{background:var(--blue);height:100%;border-radius:2px}
.bar-fg.r{background:var(--red)}
.bar-fg.a{background:var(--amber)}
.bar-fg.empty{background:transparent;border:1px dashed var(--dusty);box-sizing:border-box}

/* ===== ALERTS / NOTES / BTNS ===== */
.alert{display:flex;gap:10px;padding:10px 12px;border-radius:2px;margin-bottom:8px;font-size:12.5px;align-items:flex-start;border-left:3px solid transparent}
.alert.r{background:var(--red-soft);border-left-color:var(--red)}
.alert.a{background:var(--amber-soft);border-left-color:var(--amber)}
.alert.g{background:var(--blue-soft);border-left-color:var(--blue)}
.alert.ok{background:var(--good-soft);border-left-color:var(--good)}
.alert b{display:block;font-size:12.5px;color:var(--ink)}
.alert span{color:var(--ink2);font-size:11.8px}
.note{padding:9px 12px;border-radius:2px;font-size:11.5px;line-height:1.5;margin-top:10px}
.note.blue{background:var(--blue-soft);color:var(--blue)}
.note.amber{background:var(--amber-soft);color:var(--amber)}
.note.gray{background:#f0f1f4;color:var(--ink2)}

.btn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.4px;padding:8px 14px;border-radius:2px;border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--blue2)}
.btn.ghost{background:#fff;color:var(--blue)}
.btn.ghost:hover{background:var(--blue-soft)}
.btn.dim{background:#fff;border-color:var(--line2);color:var(--ink2)}
.btn.sm{padding:5px 10px;font-size:10.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.toggle{display:inline-flex;border:1px solid var(--line2);border-radius:3px;overflow:hidden;font-size:10px;font-weight:700;letter-spacing:.8px}
.toggle div{padding:3px 10px;cursor:pointer;color:var(--ink3);background:#fff}
.toggle div.on{background:var(--blue);color:#fff}
.chipbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fchip{font-size:11px;font-weight:500;letter-spacing:.4px;padding:5px 13px;border-radius:14px;border:1px solid var(--line2);background:#fff;color:var(--ink2);cursor:pointer}
.fchip.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ===== FORMS ===== */
.field{margin-bottom:12px}
.field label{display:block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:2px;font:inherit;background:#fff;color:var(--ink)
}
.field textarea{min-height:72px;resize:vertical}
.field .hint{font-size:11px;color:var(--ink3);margin-top:4px}
.slider-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:10px 0}
.slider-row input[type=range]{width:100%;accent-color:var(--blue)}
.entity{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:2px;margin-bottom:8px;background:#fff}
.entity .av{width:34px;height:34px;border-radius:2px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 34px}
.entity b{display:block;color:var(--ink);font-size:13px}
.entity span{font-size:11.5px;color:var(--ink2)}

/* ===== SLUGS (hero pattern) ===== */
.slug-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.slug{border:1.5px dashed var(--dusty);background:var(--empty);border-radius:2px;padding:14px 14px 12px;min-height:118px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.slug:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(32,96,146,.10)}
.slug.matched{border-style:solid;border-color:var(--amber);background:var(--amber-soft)}
.slug.reserved{border-style:solid;border-color:var(--blue);background:var(--blue-soft)}
.slug.committed{border-style:solid;border-color:var(--good);background:var(--good-soft)}
.slug .st{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--dusty)}
.slug.matched .st{color:var(--amber)}
.slug.reserved .st{color:var(--blue)}
.slug.committed .st{color:var(--good)}
.slug .nm{font-family:"Prata",Georgia,serif;font-size:15px;color:var(--navy)}
.slug .meta{font-size:11px;color:var(--ink2);line-height:1.45}
.slug .empty-mark{margin-top:auto;font-size:11px;font-weight:600;color:var(--blue);letter-spacing:.3px}

/* ===== AI / IPS ===== */
.clause{border:1px solid var(--line);border-radius:2px;padding:12px 14px;margin-bottom:10px;background:#fff;position:relative}
.clause:focus-within{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.clause .clabel{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
.clause .body{font-size:13px;color:var(--ink);line-height:1.55}
.clause .why{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink3);line-height:1.45}
.clause .why b{color:var(--ink2)}
.chat{display:flex;flex-direction:column;gap:10px}
.bubble{padding:10px 12px;border-radius:2px;max-width:92%;font-size:12.8px;line-height:1.5}
.bubble.ai{background:var(--blue-soft);color:var(--ink);align-self:flex-start;border-left:3px solid var(--blue)}
.bubble.user{background:#fff;border:1px solid var(--line);align-self:flex-end}

/* ===== DRAWERS / SPLITS ===== */
.drawer-panel{position:fixed;top:0;right:0;width:420px;height:100vh;background:#fff;border-left:1px solid var(--line2);box-shadow:-4px 0 24px rgba(11,35,64,.08);z-index:40;padding:20px 22px;overflow-y:auto;display:none}
.drawer-panel.on{display:block}
.drawer-panel h2{font-family:"Prata",Georgia,serif;font-size:18px;margin-bottom:4px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.state-rail{display:flex;gap:0;margin:12px 0 16px;flex-wrap:wrap}
.state-rail span{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line2);background:#fff;color:var(--ink3);margin-right:-1px}
.state-rail span.on{background:var(--blue);border-color:var(--blue);color:#fff}
.state-rail span.done{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}

/* ===== PROGRESS / WORKSHOP ===== */
.progress{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.progress .step{flex:1;min-width:90px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--fog);border-radius:2px}
.progress .step.on{border-top-color:var(--blue)}
.progress .step.done{border-top-color:var(--good)}
.progress .step .n{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);font-weight:600}
.progress .step .t{font-size:12px;font-weight:600;color:var(--ink);margin-top:3px}

.cohort-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.family-card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:14px 16px}
.family-card h4{font-family:"Prata",Georgia,serif;font-size:15px;margin-bottom:2px}
.family-card .sub{font-size:11.5px;color:var(--ink3);margin-bottom:10px}
.fam-bar{height:8px;background:#e8ebe6;border-radius:2px;overflow:hidden;margin:8px 0}
.fam-bar i{display:block;height:100%;background:var(--blue)}

/* ===== CALENDAR / LOAN ===== */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .d{padding:8px 4px;text-align:center;font-size:11px;border:1px solid var(--line);background:#fff;border-radius:2px;min-height:52px}
.cal .d.head{background:transparent;border:none;font-weight:700;color:var(--ink3);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;min-height:auto}
.cal .d.pay{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);font-weight:600}
.cal .d.muted{color:var(--ink3);background:var(--cream2)}

.asof{font-size:10.5px;color:var(--ink3)}
.asof b{color:var(--ink2);font-weight:500}
.banner-preview{background:var(--amber-soft);border:1px solid #e8d9a8;color:var(--amber);padding:8px 12px;border-radius:2px;font-size:12px;font-weight:600;margin-bottom:14px;letter-spacing:.3px}
.banner-phase2{background:var(--preview);border:1px solid #e0d5b8;color:#7a5c14;padding:8px 12px;border-radius:2px;font-size:12px;font-weight:600;margin-bottom:14px}

.hero-welcome{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.hero-welcome .big{background:var(--navy);color:#faf5e3;padding:28px 30px;border-radius:2px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.hero-welcome .big::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(32,96,146,.45),transparent 55%),radial-gradient(ellipse at 10% 90%,rgba(154,179,191,.2),transparent 50%)}
.hero-welcome .big>*{position:relative}
.hero-welcome .eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#9ab3bf;font-weight:600;margin-bottom:10px}
.hero-welcome h2{font-family:"Prata",Georgia,serif;font-size:28px;font-weight:400;line-height:1.2;margin-bottom:10px}
.hero-welcome p{font-size:13.5px;color:#bdcbcc;max-width:420px;line-height:1.55}

.rebucket{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.bucket{background:#fff;border:1px solid var(--line);padding:14px;border-radius:2px}
.bucket h4{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.bucket-item{padding:8px 0;border-bottom:1px dotted var(--line);display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.bucket-item:last-child{border-bottom:none}
.arrow{font-family:"Prata",Georgia,serif;font-size:28px;color:var(--blue);text-align:center}

.side-by{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.side-by>div{padding:16px;background:#fff}
.side-by>div+div{border-left:1px solid var(--line)}
.side-by h4{font-family:"Prata",Georgia,serif;font-size:14px;margin-bottom:8px}

.gallery-bar{display:flex;flex-direction:column;gap:4px;padding:10px 26px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1)}
.gallery-bar .g-row{display:flex;gap:8px;flex-wrap:nowrap;align-items:stretch}
.gallery-bar .g-row a{flex:1 1 0;text-align:center;white-space:nowrap}
.gallery-bar a{font-size:10.5px;color:#bdcbcc;text-decoration:none;padding:4px 8px;border-radius:2px}
.gallery-bar a:hover,.gallery-bar a.on{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.gallery-bar .lab{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#6f96af;padding:4px 8px;align-self:center}

@media (max-width:1100px){
  .kpis,.kpis.c4{grid-template-columns:repeat(2,1fr)}
  .hero-welcome,.cols,.split,.rebucket,.side-by{grid-template-columns:1fr}
  .rebucket .arrow{transform:rotate(90deg)}
  .side-by>div+div{border-left:none;border-top:1px solid var(--line)}
}
@media (max-width:800px){
  #app{flex-direction:column}
  #side{width:100%;height:auto;position:relative}
}

/* ===== SCROLLBAR: navy track (matches sidebar), white thumb ===== */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:#fff;border-radius:6px;border:3px solid var(--navy)}
::-webkit-scrollbar-thumb:hover{background:#e8eaee}
::-webkit-scrollbar-button{display:none}