/* ============ Stone Tec — portal.css (client & staff portals) ============ */
body.portal{background:var(--paper-2)}

/* top bar */
.pbar{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--line)}
.pbar-in{max-width:1200px;margin:0 auto;padding:16px 28px;display:flex;
  align-items:center;justify-content:space-between}
.pbar .brand{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--paper)}
.pbar .brand b{color:var(--gold-2)}
.pbar-right{display:flex;align-items:center;gap:22px}
.pbar-right a,.pbar-right button{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(245,241,234,.85);background:none;border:0;cursor:pointer}
.pbar-right a:hover,.pbar-right button:hover{color:var(--gold-2)}
.ptag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);
  border:1px solid var(--gold-2);border-radius:40px;padding:4px 12px}

/* login gate */
.gate{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login{width:100%;max-width:420px;background:#fff;border-radius:8px;padding:40px;
  box-shadow:0 40px 90px -50px rgba(20,17,14,.5);text-align:center}
.login .lk{font-family:var(--serif);font-size:1.9rem;margin:6px 0 4px}
.login .ls{color:var(--stone-d);font-size:.92rem;margin-bottom:26px}
.login .field{width:100%;padding:13px 15px;border:1px solid var(--line-d);border-radius:4px;
  font-family:var(--sans);font-size:1rem;margin-bottom:12px;text-align:left}
.login .field:focus{outline:none;border-color:var(--gold)}
.login .btn{width:100%;justify-content:center;margin-top:6px}
.login .demo{margin-top:18px;font-size:.78rem;color:var(--stone);letter-spacing:.02em}
.login .demo b{color:var(--gold);font-weight:600}

/* portal body */
.pwrap{max-width:1200px;margin:0 auto;padding:38px 28px 90px}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:28px}
.phead h1{font-family:var(--serif);font-size:2.2rem}
.phead .sub{color:var(--stone-d);margin-top:4px}
.hidden{display:none}

/* cards */
.pcard{background:#fff;border:1px solid var(--line-d);border-radius:8px;padding:26px;
  box-shadow:0 20px 50px -45px rgba(20,17,14,.5)}
.pgrid{display:grid;gap:18px}
.pgrid.c2{grid-template-columns:1.5fr 1fr}
.pgrid.c3{grid-template-columns:repeat(3,1fr)}
.pcard h3{font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.02em;margin-bottom:14px}
.pcard .eyebrow{margin-bottom:6px}

/* ===== CLIENT: status stepper ===== */
.projhero{position:relative;border-radius:8px;overflow:hidden;min-height:220px;color:var(--paper);
  display:flex;align-items:flex-end;margin-bottom:22px}
.projhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.projhero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(20,17,14,.9),rgba(20,17,14,.15))}
.projhero .ph-body{padding:26px}
.projhero .ph-body .cat{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.projhero .ph-body h2{font-family:var(--serif);font-size:1.9rem;color:var(--paper);margin-top:4px}

.stepper{display:flex;gap:0;margin:8px 0 4px;counter-reset:s}
.stepper .st{flex:1;text-align:center;position:relative;padding-top:30px}
.stepper .st::before{content:"";position:absolute;top:11px;left:0;right:0;height:2px;background:var(--paper-2)}
.stepper .st:first-child::before{left:50%}
.stepper .st:last-child::before{right:50%}
.stepper .st .dot{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:18px;height:18px;
  border-radius:50%;background:#fff;border:2px solid var(--paper-2);z-index:2}
.stepper .st.done::before,.stepper .st.cur::before{background:var(--gold)}
.stepper .st.done .dot{background:var(--gold);border-color:var(--gold)}
.stepper .st.cur .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(136,24,26,.25)}
.stepper .st .lbl{font-size:.76rem;letter-spacing:.03em;color:var(--stone-d)}
.stepper .st.cur .lbl,.stepper .st.done .lbl{color:var(--ink);font-weight:600}
.progress-line{height:8px;background:var(--paper-2);border-radius:8px;overflow:hidden;margin-top:16px}
.progress-line i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2))}

.timeline{list-style:none}
.timeline li{position:relative;padding:0 0 20px 24px;border-left:2px solid var(--paper-2)}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--stone)}
.timeline li.done::before{background:var(--gold);border-color:var(--gold)}
.timeline li.cur::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(136,24,26,.25)}
.timeline .tl-d{font-size:.75rem;color:var(--stone);letter-spacing:.04em}
.timeline .tl-t{font-weight:600;margin:2px 0}
.timeline .tl-x{font-size:.9rem;color:var(--stone-d)}

.filelist,.msglist{list-style:none}
.filelist li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-d);font-size:.92rem}
.filelist li:last-child{border-bottom:0}
.filelist .fi{width:34px;height:34px;border-radius:5px;background:var(--paper-2);display:flex;
  align-items:center;justify-content:center;color:var(--gold);font-size:.7rem;font-weight:700;flex-shrink:0}
.filelist .meta{color:var(--stone);font-size:.78rem;margin-left:auto}
.msglist li{padding:12px 0;border-bottom:1px solid var(--line-d)}
.msglist li:last-child{border-bottom:0}
.msglist .who{font-weight:600;font-size:.9rem}
.msglist .when{font-size:.74rem;color:var(--stone);margin-left:8px}
.msglist .txt{font-size:.9rem;color:var(--stone-d);margin-top:3px}

.photostrip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.photostrip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}

.kpi{display:flex;gap:16px;flex-wrap:wrap}
.kpi .k{flex:1;min-width:120px}
.kpi .kn{font-family:var(--serif);font-size:2rem;color:var(--gold)}
.kpi .kl{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}

/* ===== STAFF: preso hub + leads ===== */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px}
.deckcard{position:relative;min-height:280px;border-radius:8px;overflow:hidden;cursor:pointer;color:var(--paper);
  display:flex;align-items:flex-end;text-align:left}
.deckcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.8s var(--ease);z-index:-2}
.deckcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(20,17,14,.92),rgba(20,17,14,.2) 70%)}
.deckcard:hover img{transform:scale(1.06)}
.deckcard .dc{padding:26px}
.deckcard .dc .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.deckcard .dc h3{font-family:var(--serif);font-size:1.7rem;color:var(--paper);margin:6px 0 4px}
.deckcard .dc p{font-size:.86rem;color:rgba(245,241,234,.8)}
.deckcard .play{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(245,241,234,.15);display:flex;align-items:center;justify-content:center;font-size:1rem}

.leadstable{width:100%;border-collapse:collapse;font-size:.88rem}
.leadstable th,.leadstable td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-d)}
.leadstable th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.leadstable tr:hover td{background:var(--paper-2)}
.badge{display:inline-block;padding:3px 10px;border-radius:40px;font-size:.72rem;font-weight:600}
.badge.commercial{background:#e9eef3;color:#2a4a68}
.badge.residential{background:#f3ece0;color:#7a5a25}
.empty{color:var(--stone);font-size:.9rem;padding:18px 0}

/* ===== DECK VIEWER (fullscreen) ===== */
.deck{position:fixed;inset:0;z-index:120;background:var(--ink);display:none;flex-direction:column}
.deck.open{display:flex}
.deck-top{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;color:var(--paper);
  border-bottom:1px solid var(--line)}
.deck-top .dt-title{font-family:var(--serif);font-size:1.2rem}
.deck-top .dt-count{font-size:.8rem;color:var(--stone)}
.deck-close{background:none;border:0;color:var(--paper);font-size:1.8rem;cursor:pointer;line-height:1}
.slide{flex:1;display:none;position:relative;overflow:hidden}
.slide.on{display:flex}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,14,.9) 0%,rgba(20,17,14,.5) 45%,rgba(20,17,14,.2) 100%)}
.slide-body{position:relative;z-index:2;max-width:640px;align-self:center;padding:0 6vw;color:var(--paper)}
.slide-body .sk{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.slide-body h2{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.4rem);margin:14px 0 16px;line-height:1.05}
.slide-body p{font-size:1.15rem;color:rgba(245,241,234,.9)}
.slide-body ul{margin:14px 0 0;padding-left:0;list-style:none}
.slide-body li{font-size:1.1rem;padding:7px 0 7px 26px;position:relative;color:rgba(245,241,234,.92)}
.slide-body li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:2px;background:var(--gold-2)}
.slide-title{align-items:center;justify-content:center;text-align:center}
.slide-title .slide-body{text-align:center;max-width:820px}
.deck-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
  color:var(--paper);border-top:1px solid var(--line)}
.deck-dots{display:flex;gap:7px}
.deck-dots i{width:8px;height:8px;border-radius:50%;background:rgba(245,241,234,.3);cursor:pointer}
.deck-dots i.on{background:var(--gold-2);width:22px;border-radius:4px}
.deck-btn{background:rgba(245,241,234,.12);border:0;color:var(--paper);padding:11px 22px;border-radius:3px;
  cursor:pointer;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.deck-btn:hover{background:var(--gold);color:var(--paper)}
.deck-btn[disabled]{opacity:.35;cursor:default}
.deck-btn.gold{background:var(--gold);color:var(--paper)}

@media(max-width:820px){
  .pgrid.c2,.pgrid.c3,.hub{grid-template-columns:1fr}
  .stepper .st .lbl{font-size:.66rem}
  .photostrip{grid-template-columns:repeat(4,1fr)}
  .leadstable .hide-sm{display:none}
}