/* ============================================================
   Dealmaking OS — app shell + component library
   Brand: Del Real Commercial. Montserrat. Ocean primary.
   Requires fonts/ (Montserrat TTFs) at project root.
   ============================================================ */

@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }

:root{
  --ocean:#005175; --ocean-90:#19628a; --ocean-70:#4d83a3; --ocean-40:#b3cbd9; --ocean-15:#e0eaf1; --ocean-08:#eff4f8;
  --forest:#5d8170; --forest-08:#eef3f0;
  --terra:#c0563a; --terra-08:#fbefe9; --terra-15:#f6ddd3; --terra-dk:#9a4127;
  --sunray:#FBBE6D; --sunray-15:#fef3e0; --gold-dk:#b0801f;
  --ink:#0e1d27; --charcoal:#2a3a45; --slate:#5b6b76; --stone:#8a96a0; --fog:#c7ced3; --mist:#e6e9ec;
  --bone:#f4f1ec; --cream:#fbf8f3; --canvas:#f1f0ea; --white:#ffffff;
  --font:'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --shadow-1:0 1px 2px rgba(14,29,39,.05), 0 1px 3px rgba(14,29,39,.06);
  --shadow-2:0 4px 14px rgba(14,29,39,.08);
  --shadow-3:0 12px 34px rgba(14,29,39,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--canvas); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; font-size:14px; }
a{ color:inherit; text-decoration:none; }

/* ---------------- app shell ---------------- */
.app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

.side{ background:var(--ocean); color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side__brand{ padding:22px 22px 18px; }
.side__brand img{ height:30px; display:block; }
.side__brand .tag{ font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:12px; }
.side__nav{ padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.side__label{ font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.42);
  padding:14px 12px 6px; }
.side__sublabel{ font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3);
  padding:8px 12px 4px 12px; display:flex; align-items:center; gap:7px; }
.side__sublabel::before{ content:""; width:5px; height:5px; border-radius:1px; background:var(--drc-sunray,#FBBE6D); opacity:.7; flex:0 0 auto; }
.navi{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; color:rgba(255,255,255,.78);
  font-size:13.5px; font-weight:600; letter-spacing:.01em; cursor:pointer; transition:background .15s, color .15s; }
.navi svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; flex:0 0 auto; }
.navi:hover{ background:rgba(255,255,255,.08); color:#fff; }
.navi.on{ background:rgba(255,255,255,.14); color:#fff; }
.navi .badge{ margin-left:auto; font-size:10px; font-weight:700; background:var(--sunray); color:var(--ink); border-radius:99px; padding:2px 7px; }
.navi__l{ flex:1; min-width:0; }
.navi__soon{ flex:0 0 auto; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sunray);
  border:1px dashed rgba(251,190,109,.55); border-radius:999px; padding:2px 7px; }
.navi__lock{ flex:0 0 auto; color:rgba(255,255,255,.5); display:flex; }
.navi__lock svg{ width:14px; height:14px; stroke:currentColor; stroke-width:1.9; fill:none; }
.navi__stages{ display:flex; flex-direction:column; gap:2px; margin:2px 0 2px; padding-left:8px;
  border-left:1px solid rgba(255,255,255,.12); margin-left:18px; }
.navi--sub{ padding:8px 10px; font-size:12px; font-weight:500; color:rgba(255,255,255,.62); }
.navi--sub:hover{ color:#fff; }
.navi--sub.on{ color:#fff; background:rgba(255,255,255,.1); }
.navi__gl{ width:18px; height:18px; flex:0 0 auto; border-radius:5px; background:rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; }
/* sidebar scrolls if the nav grows tall */
.side{ overflow:hidden; }
.side__nav{ overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-height:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }
.side__nav::-webkit-scrollbar{ width:7px; }
.side__nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:99px; }
.side__spacer{ display:none; }
.side__foot{ padding:14px 12px; border-top:1px solid rgba(255,255,255,.12); }
.uchip{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:10px; cursor:pointer; transition:background .15s; }
.uchip:hover{ background:rgba(255,255,255,.08); }
.uchip .av{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:var(--sunray); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.uchip .who{ min-width:0; flex:1; }
.uchip .who .n{ font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uchip .who .r{ font-size:10.5px; color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:capitalize; }
.uchip .out{ color:rgba(255,255,255,.55); }
.uchip .out svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none; }
.uchip .out:hover{ color:#fff; }

/* ---------------- main ---------------- */
.main{ min-width:0; display:flex; flex-direction:column; }
.top{ display:flex; align-items:center; gap:16px; padding:22px 34px; border-bottom:1px solid var(--mist); background:var(--cream); position:sticky; top:0; z-index:20; }
.top h1{ margin:0; font-size:21px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.top .crumb{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--slate); }
.top .crumb a:hover{ color:var(--ocean); }
.top .sub{ font-size:12.5px; color:var(--slate); margin-top:2px; }
.top__r{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.content{ padding:28px 34px 64px; max-width:1180px; width:100%; }

/* ---------------- buttons ---------------- */
.btn{ display:inline-flex; align-items:center; gap:8px; border:none; border-radius:10px; font-family:var(--font);
  font-size:13.5px; font-weight:600; letter-spacing:.01em; padding:10px 16px; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.btn svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }
.btn--primary{ background:var(--ocean); color:#fff; }
.btn--primary:hover{ background:var(--ocean-90); }
.btn--terra{ background:var(--terra); color:#fff; }
.btn--terra:hover{ background:var(--terra-dk); }
.btn--ghost{ background:var(--white); color:var(--ink); border:1px solid var(--mist); }
.btn--ghost:hover{ border-color:var(--ocean); color:var(--ocean); }
.btn--quiet{ background:transparent; color:var(--slate); padding:8px 12px; }
.btn--quiet:hover{ color:var(--ocean); background:var(--ocean-08); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn--sm{ padding:7px 12px; font-size:12.5px; }

/* ---------------- cards & surfaces ---------------- */
.card{ background:var(--white); border:1px solid var(--mist); border-radius:14px; box-shadow:var(--shadow-1); }
.panel{ background:var(--white); border:1px solid var(--mist); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow-1); }
.panel__h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.panel__h h3{ margin:0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); }
.panel__h .count{ font-size:11px; font-weight:700; color:var(--stone); }

/* ---------------- pills ---------------- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-radius:99px; padding:4px 10px; }
.pill .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill--gathering{ color:var(--gold-dk); background:var(--sunray-15); }
.pill--learn{ color:var(--ocean); background:var(--ocean-08); }
.pill--bov-ready{ color:var(--terra); background:var(--terra-08); }
.pill--final{ color:var(--forest); background:var(--forest-08); }
.pill--draft{ color:var(--terra); background:var(--terra-08); }
.pill--active{ color:var(--forest); background:var(--forest-08); }
.pill--invited{ color:var(--gold-dk); background:var(--sunray-15); }
.pill--admin{ color:var(--ocean); background:var(--ocean-08); }
.pill--agent{ color:var(--slate); background:var(--mist); }

/* ---------------- fields ---------------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.field input, .field select, .field textarea{ font-family:var(--font); font-size:14px; color:var(--ink);
  border:1px solid var(--mist); border-radius:10px; padding:11px 13px; background:var(--white); width:100%; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px var(--ocean-08); }
.field .hint{ font-size:11px; color:var(--stone); }

/* ---------------- avatar ---------------- */
.av{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ocean-15);
  color:var(--ocean); font-weight:700; font-size:12px; width:32px; height:32px; flex:0 0 auto; }
.av--terra{ background:var(--terra-08); color:var(--terra); }
.av--sun{ background:var(--sunray-15); color:var(--gold-dk); }

/* ---------------- modal ---------------- */
.ov{ position:fixed; inset:0; z-index:60; background:rgba(14,29,39,.42); display:none; align-items:center; justify-content:center; padding:24px; }
.ov.open{ display:flex; }
.modal{ background:var(--white); border-radius:16px; width:min(460px,96vw); box-shadow:var(--shadow-3); overflow:hidden; }
.modal__h{ padding:20px 24px 0; }
.modal__h .ey{ font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); }
.modal__h h2{ margin:3px 0 0; font-size:19px; font-weight:600; color:var(--ink); }
.modal__b{ padding:18px 24px; display:flex; flex-direction:column; gap:14px; }
.modal__f{ padding:16px 24px 22px; display:flex; gap:10px; justify-content:flex-end; }

/* ---------------- misc ---------------- */
.eyebrow{ font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ocean); }
.muted{ color:var(--slate); }
.empty{ text-align:center; padding:50px 20px; color:var(--slate); }
.empty svg{ width:34px; height:34px; stroke:var(--fog); stroke-width:1.6; fill:none; margin-bottom:12px; }
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--ink); color:#fff; font-size:13px; font-weight:600; padding:12px 20px; border-radius:11px; box-shadow:var(--shadow-3);
  transition:opacity .2s, transform .2s; z-index:90; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.divider{ height:1px; background:var(--mist); }

/* ---------------- mobile drawer ---------------- */
.os-burger{ display:none; position:fixed; top:13px; left:14px; z-index:75; width:42px; height:42px; border-radius:10px;
  background:var(--ocean); border:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-2); }
.os-burger svg{ width:22px; height:22px; stroke:#fff; stroke-width:2; fill:none; }
.os-scrim{ display:none; position:fixed; inset:0; background:rgba(14,29,39,.45); z-index:65; opacity:0; transition:opacity .2s; }
.os-scrim.show{ display:block; opacity:1; }
@media (max-width:820px){
  .app{ grid-template-columns:1fr; }
  .side{ position:fixed; top:0; left:0; height:100vh; width:268px; z-index:70; transform:translateX(-100%); transition:transform .26s var(--ease); }
  .side.side--open{ transform:none; box-shadow:var(--shadow-3); }
  .os-burger{ display:flex; }
  .top{ padding-left:68px; }
  .top h1{ font-size:18px; }
  .content{ padding:22px 18px 56px; }
}

/* ---------------- stat strip (shared) ---------------- */
.statline{ display:flex; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.statline .stat{ background:var(--white); border:1px solid var(--mist); border-radius:12px; padding:14px 18px; flex:1; min-width:120px; box-shadow:var(--shadow-1); }
.statline .stat .n{ font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.statline .stat .l{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-top:2px; }

/* ---------------- feedback widget ---------------- */
.navi .badge--soft{ background:rgba(255,255,255,.22); color:#fff; }
.fab-fb{ position:fixed; right:22px; bottom:22px; z-index:80; display:inline-flex; align-items:center; gap:9px;
  background:var(--ocean); color:#fff; border:none; border-radius:999px; padding:12px 18px; cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:.01em; box-shadow:var(--shadow-3); transition:background .15s; }
.fab-fb:hover{ background:var(--ocean-90); }
.fab-fb svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; }
@media (max-width:720px){ .fab-fb{ right:16px; bottom:16px; padding:13px; } .fab-fb span{ display:none; } }

.fb-seg{ display:flex; gap:8px; }
.fb-seg button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--font);
  background:var(--white); border:1px solid var(--mist); border-radius:11px; padding:13px 8px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--slate); transition:border-color .15s, background .15s, color .15s; }
.fb-seg button svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; }
.fb-seg button:hover{ border-color:var(--ocean-40); }
.fb-seg button.on{ border-color:var(--ocean); background:var(--ocean-08); color:var(--ocean); }
.fb-ctx{ font-size:11.5px; color:var(--stone); line-height:1.45; margin:0; }
.fb-ctx b{ color:var(--slate); font-weight:600; }