/* ==========================================================================
   POST RE GROUP × T ROCK — Client Portal (demo)
   Extras layer on top of assets/app.css. Reuses all tokens + portal chrome;
   adds the client-facing components: login, priority picker, photo dropzone,
   status stepper, before/after, capital-program meter, service cards.
   Direction: calm, warm, obvious — a "no-brainer" portal. Bigger tap targets,
   one clear primary action per screen.
   ========================================================================== */

:root {
  /* Client brand — Post Real Estate Group navy (from their logo #1C355E).
     The T Rock signal-orange stays the action accent. */
  --client:   #1c355e;   /* Post RE Group navy */
  --client-2: #33578a;
  --client-ink:#0f1f38;
  --paper-warm: #f8f7f3;
}

body.portal { background-color: var(--paper); }

/* Slightly warmer, roomier cards for a client audience */
.portal .card { border-radius: 10px; }
.portal .pcontent, .portal .pmain .phead { max-width: 1180px; }

/* ---------- client brand mark in the dark portal bar ---------- */
.pbar .clientmark {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--client-2), var(--client-ink));
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 17px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16);
}
.pbar .pbsub { font-family: var(--mono); font-size: 9.5px; letter-spacing:.16em; text-transform:uppercase; color:#9aa0a8; margin-top:3px; }
.pw { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:#8b9097; white-space:nowrap; padding-left:16px; }
.pw b { color:#fff; font-weight:700; }
.pw .trmini { width:22px; height:22px; border-radius:5px; background:#000 url('img/trock-logo.png') center/132% no-repeat; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); flex-shrink:0; }

/* ---- real Post RE Group logo on a white chip (reads on the dark bar) ---- */
.pbar .pbrand { gap:12px; }
.postlogo { display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:7px; padding:5px 10px; height:40px; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.postlogo img { height:30px; width:auto; display:block; }
.pbtag { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#9aa0a8; padding-left:12px; border-left:1px solid #2e3137; }

/* role switcher pill in the bar */
.roleswitch { display:flex; align-items:center; gap:0; background:#111316; border:1px solid #2e3137; border-radius:999px; padding:3px; }
.roleswitch a { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:#9aa0a8; padding:5px 11px; border-radius:999px; }
.roleswitch a.active { background:var(--accent); color:#fff; }

/* ============================ LOGIN ============================ */
.login-wrap {
  min-height:100vh; display:grid; grid-template-columns: 1.05fr .95fr;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(31,108,96,.16), transparent 55%),
    linear-gradient(180deg, #10161a, #0b0e11);
  color:#e7e9ec;
}
@media (max-width:900px){ .login-wrap{ grid-template-columns:1fr; } .login-aside{ display:none; } }

.login-aside { position:relative; padding:56px 54px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.login-aside::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:30px 30px; mask-image:radial-gradient(70% 60% at 30% 30%,#000,transparent); }
.login-aside .lockup { position:relative; display:flex; align-items:center; gap:14px; }
.login-aside .lockup .clientmark { width:44px; height:44px; font-size:22px; border-radius:10px; }
.login-aside .lockup .nm { font-family:var(--display); font-weight:800; font-size:19px; color:#fff; letter-spacing:.01em; }
.login-aside .lockup .sub { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#7f9b95; margin-top:3px; }
.login-aside .pitch { position:relative; max-width:440px; }
.login-aside .pitch .eyebrow { color:var(--client-2); }
.login-aside .pitch h1 { font-family:var(--display); font-weight:800; font-size:34px; line-height:1.08; color:#fff; margin:12px 0 14px; letter-spacing:-.02em; }
.login-aside .pitch p { color:#a9b2b0; font-size:14.5px; line-height:1.6; }
.login-aside .kpis { position:relative; display:flex; gap:34px; }
.login-aside .kpis .v { font-family:var(--display); font-weight:800; font-size:26px; color:#fff; font-variant-numeric:tabular-nums; }
.login-aside .kpis .k { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7f9b95; margin-top:2px; }
.login-aside .powered { position:relative; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:#8b9097; }
.login-aside .powered .trmini { width:22px; height:22px; border-radius:5px; background:#000 url('img/trock-logo.png') center/132% no-repeat; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.login-aside .postlogo { height:60px; padding:10px 18px; }
.login-aside .postlogo img { height:40px; }
.login-aside .powered b { color:#fff; }

.login-panel { background:var(--paper); color:var(--ink); padding:48px 46px; display:flex; flex-direction:column; justify-content:center; }
.login-panel .head h2 { font-family:var(--display); font-size:23px; letter-spacing:-.01em; }
.login-panel .head p { color:var(--ink-2); font-size:13.5px; margin:6px 0 0; }
.rolecards { display:flex; flex-direction:column; gap:14px; margin-top:26px; max-width:440px; }
.rolecard {
  display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 18px;
  box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s, transform .1s;
}
.rolecard:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.rolecard .av { width:48px; height:48px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:16px; }
.rolecard .av.pm { background:var(--steel); }
.rolecard .av.rm { background:var(--client-2); }
.rolecard .who .nm { font-family:var(--display); font-weight:700; font-size:15.5px; }
.rolecard .who .rl { font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.rolecard .who .scope { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-3); margin-top:5px; }
.rolecard .go { margin-left:auto; color:var(--accent); font-weight:700; font-size:20px; }
.login-panel .demo-note { margin-top:24px; max-width:440px; font-size:11.5px; color:var(--ink-3); font-family:var(--mono); letter-spacing:.02em; }

/* ============================ PORTAL HOME hero strip ============================ */
.welcome { padding:24px 0 0; }
.welcome .eyebrow { color:var(--accent); }
.welcome h1 { font-size:26px; margin:5px 0 6px; }

/* big obvious primary CTA */
.btn.xl { padding:13px 20px; font-size:14px; border-radius:9px; font-weight:700; }
.btn.block { width:100%; justify-content:center; }
.cta-card {
  background:linear-gradient(135deg, #17191c, #23262c); color:#fff; border:none; border-radius:12px;
  padding:20px 22px; display:flex; align-items:center; gap:18px; box-shadow:var(--shadow);
}
.cta-card .txt { flex:1; }
.cta-card .txt h3 { color:#fff; font-size:16px; }
.cta-card .txt p { color:#b9bdc4; font-size:12.5px; margin:4px 0 0; }
.cta-card .btn.pri { box-shadow:0 8px 22px -10px rgba(226,87,31,.9); }

/* ============================ SERVICE REQUEST rows ============================ */
.req { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line-2); }
.req:last-child { border-bottom:0; }
.req:hover { background:var(--paper-2); }
.req .cat { width:42px; height:42px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; font-size:19px; background:var(--paper-2); border:1px solid var(--line-2); }
.req .meta { min-width:0; flex:1; }
.req .meta .t { font-weight:600; }
.req .meta .s { font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:2px; }
.req .right { margin-left:auto; display:flex; align-items:center; gap:12px; white-space:nowrap; }
.req .amt { font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }

/* priority dots */
.pri-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.pri-dot.emergency { background:var(--neg); box-shadow:0 0 0 3px var(--neg-bg); }
.pri-dot.urgent { background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg); }
.pri-dot.standard { background:var(--steel); box-shadow:0 0 0 3px var(--info-bg); }

/* ============================ PRIORITY PICKER (segmented) ============================ */
.prio { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.prio label {
  border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; cursor:pointer; background:var(--card);
  display:flex; flex-direction:column; gap:3px; transition:border-color .12s, background .12s;
}
.prio label:hover { border-color:var(--ink-3); }
.prio input { position:absolute; opacity:0; pointer-events:none; }
.prio .lab { font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.prio .sub { font-size:11.5px; color:var(--ink-3); }
.prio input:checked + .lab + .sub { color:var(--ink-2); }
.prio label:has(input:checked) { border-color:var(--accent); background:#fff6f2; box-shadow:inset 0 0 0 1px var(--accent); }
.prio label.emergency:has(input:checked){ border-color:var(--neg); background:var(--neg-bg); box-shadow:inset 0 0 0 1px var(--neg); }

/* category chips picker */
.catpick { display:flex; flex-wrap:wrap; gap:8px; }
.catpick label { cursor:pointer; }
.catpick input { position:absolute; opacity:0; pointer-events:none; }
.catpick .c {
  display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); border-radius:999px;
  padding:8px 13px; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--card); transition:.12s;
}
.catpick label:has(input:checked) .c { border-color:var(--accent); color:var(--accent-ink); background:#fff6f2; }

/* ============================ PHOTO DROPZONE + GRID ============================ */
.dz {
  border:2px dashed var(--line); border-radius:12px; padding:26px; text-align:center; cursor:pointer;
  background:var(--paper-2); transition:border-color .15s, background .15s;
}
.dz:hover, .dz.drag { border-color:var(--accent); background:#fff6f2; }
.dz .ic { font-size:26px; }
.dz .big { font-weight:700; margin-top:6px; }
.dz .small { font-size:11.5px; color:var(--ink-3); margin-top:3px; }

.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.photo {
  position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; border:1px solid var(--line-2);
  display:flex; align-items:flex-end; color:#fff; font-size:11px;
  background-size:cover; background-position:center;
}
/* labeled placeholder "photos" — textured gradients standing in for real jobsite images */
.photo.ph { background:linear-gradient(135deg,#5b6b74,#38434a); }
.photo.ph.damage { background:linear-gradient(135deg,#8a5a3c,#5f3a28); }
.photo.ph.roof { background:linear-gradient(135deg,#4d5a63,#2c353b); }
.photo.ph.water { background:linear-gradient(135deg,#3f6d84,#274653); }
.photo.ph.before { background:linear-gradient(135deg,#7d4b3a,#4a2c22); }
.photo.ph.after { background:linear-gradient(135deg,#356a54,#20463a); }
.photo.ph.lot { background:linear-gradient(135deg,#57606a,#333a41); }
.photo.ph::before { content:"⛰"; position:absolute; inset:0; display:grid; place-items:center; font-size:30px; opacity:.22; }
.photo.ph.water::before{ content:"💧"; } .photo.ph.roof::before{ content:"🏚"; }
.photo.ph.before::before{ content:"⚠"; } .photo.ph.after::before{ content:"✓"; }
.photo.ph.lot::before{ content:"🅿"; }
.photo .cap { position:relative; width:100%; padding:6px 8px; background:linear-gradient(transparent,rgba(0,0,0,.6)); font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; }
.photo .tag { position:absolute; top:6px; left:6px; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.5); padding:2px 6px; border-radius:4px; }
.photo .x { position:absolute; top:5px; right:6px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; font-size:11px; cursor:pointer; }

/* ============================ ESTIMATE / turnaround ============================ */
.sla { display:inline-flex; align-items:center; gap:7px; background:var(--pos-bg); color:var(--pos); border-radius:999px; padding:6px 12px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.02em; }
.sla .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.est-total { display:flex; align-items:baseline; justify-content:space-between; padding:14px 16px; border-top:2px solid var(--ink); background:var(--paper-2); border-radius:0 0 10px 10px; }
.est-total .big { font-family:var(--display); font-weight:800; font-size:26px; font-variant-numeric:tabular-nums; }

/* ============================ E-SIGN ============================ */
.sign-pad {
  border:1.5px solid var(--line); border-radius:10px; background:
    repeating-linear-gradient(0deg, transparent, transparent 30px, var(--line-2) 30px, var(--line-2) 31px);
  height:96px; position:relative; display:grid; place-items:center; overflow:hidden;
}
.sign-pad .sig { font-family:'Segoe Script','Brush Script MT',cursive; font-size:34px; color:var(--ink); transform:rotate(-3deg); opacity:0; transition:opacity .4s; }
.sign-pad.signed .sig { opacity:1; }
.sign-pad .hint { position:absolute; bottom:8px; left:14px; font-family:var(--mono); font-size:10px; color:var(--ink-3); }

/* ============================ STATUS STEPPER ============================ */
.stepper { display:flex; flex-direction:column; gap:0; }
.step { display:flex; gap:14px; position:relative; padding-bottom:20px; }
.step:last-child { padding-bottom:0; }
.step::before { content:""; position:absolute; left:13px; top:26px; bottom:-4px; width:2px; background:var(--line); }
.step:last-child::before { display:none; }
.step .dot { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:13px; z-index:1;
  background:var(--card); border:2px solid var(--line); color:var(--ink-3); }
.step.done .dot { background:var(--pos); border-color:var(--pos); color:#fff; }
.step.current .dot { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 4px #fff6f2; }
.step.done::before { background:var(--pos); }
.step .body { padding-top:3px; }
.step .t { font-weight:700; font-size:13.5px; }
.step.todo .t { color:var(--ink-3); font-weight:600; }
.step .when { font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:2px; }
.step .detail { font-size:12.5px; color:var(--ink-2); margin-top:4px; }

/* ============================ BEFORE / AFTER ============================ */
.ba { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ba .photo { aspect-ratio:16/11; }
.ba .lbl { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }

/* warranty / doc line reuse .doc; add a warranty seal */
.seal { display:inline-flex; align-items:center; gap:9px; border:1px dashed var(--pos); background:var(--pos-bg); color:var(--pos); border-radius:10px; padding:11px 14px; }
.seal .ic { font-size:20px; }
.seal .t { font-weight:700; color:var(--ink); font-size:13px; }
.seal .s { font-family:var(--mono); font-size:11px; }

/* ============================ CAPITAL PROGRAM METER ============================ */
.capbar { height:16px; border-radius:8px; overflow:hidden; display:flex; background:var(--line-2); }
.capbar > i { display:block; height:100%; }
.capbar .committed { background:var(--pos); }
.capbar .inprog { background:var(--accent); }
.capbar .planned { background:var(--steel); opacity:.5; }
.caplegend { display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; font-size:12px; }
.caplegend span { display:flex; align-items:center; gap:7px; color:var(--ink-2); }
.caplegend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.caplegend i.committed{ background:var(--pos);} .caplegend i.inprog{ background:var(--accent);} .caplegend i.planned{ background:var(--steel); opacity:.5;}

/* mini bar chart for reporting */
.hbars { display:flex; flex-direction:column; gap:11px; }
.hbar { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:12px; font-size:12.5px; }
.hbar .track { height:12px; border-radius:6px; background:var(--line-2); overflow:hidden; }
.hbar .track > i { display:block; height:100%; background:var(--accent); }
.hbar .track > i.svc { background:var(--steel); }
.hbar .val { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; }

/* property tiles for RM overview */
.prop { display:flex; align-items:center; gap:13px; padding:13px 14px; border-bottom:1px solid var(--line-2); cursor:pointer; }
.prop:last-child{ border-bottom:0; } .prop:hover{ background:var(--paper-2); }
.prop .thumb { width:46px; height:46px; border-radius:9px; flex-shrink:0; background:linear-gradient(135deg,var(--client-2),var(--client-ink)); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:16px; }
.prop .nm { font-weight:600; }
.prop .loc { font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:2px; }

/* utility */
.split { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.stack-sm > * + * { margin-top:10px; }
.hr { height:1px; background:var(--line); border:0; margin:16px 0; }
.kv { display:grid; grid-template-columns:1fr auto; gap:8px 16px; font-size:13px; }
.kv .k { color:var(--ink-2); } .kv .v { font-family:var(--mono); text-align:right; font-weight:600; }
.pill-amt { font-family:var(--display); font-weight:800; font-size:19px; font-variant-numeric:tabular-nums; }
.muted-note { font-size:12px; color:var(--ink-3); }

/* ============================================================
   CLICKABILITY — cards, rows and line items are all interactive
   ============================================================ */
[data-open]{ cursor:pointer; }
.card[data-open]{ transition:border-color .15s, box-shadow .15s, transform .1s; }
.card[data-open]:hover{ border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.stat[data-open]:hover{ box-shadow:var(--shadow-lg); }
.table tbody tr[data-open], .table tbody tr.rowlink{ cursor:pointer; }
.table tbody tr[data-open]:hover td{ background:#fff6f2; }
tr.rowlink:hover td{ background:#fff6f2; }
.doc:hover .btn.sm{ border-color:var(--accent); }

/* ============================================================
   MOBILE — the demo will be opened on phones as well as desktop
   ============================================================ */
@media (max-width: 860px){
  /* header collapses to two rows: [logo … role · avatar] then [nav] */
  body.portal .pbar{ height:auto; min-height:0; flex-wrap:wrap; padding:8px 12px; gap:10px; align-items:center; }
  .pbar .pbrand{ padding-right:0; border-right:0; gap:10px; }
  .postlogo{ height:34px; padding:4px 8px; } .postlogo img{ height:24px; }
  .pbtag{ display:none; }
  .pw{ display:none; }                 /* "powered by" text hidden on phone (still on login + footer) */
  .roleswitch{ margin-left:auto; }
  .puser{ padding-left:8px; border-left:0; gap:8px; }
  .puser > div:last-child{ display:none; }   /* keep the avatar, drop the name text */
  .pnav{ order:9; flex-basis:100%; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
         border-top:1px solid #2e3137; padding-top:6px; gap:2px; }
  .pnav a{ padding:8px 11px; white-space:nowrap; flex:0 0 auto; }

  .scope-banner{ font-size:12px; }
  .pcontent{ padding:16px 16px 60px; }
  .pmain .phead{ padding:18px 16px 0; }
  .welcome h1, .phead h1{ font-size:21px; }

  /* tables scroll horizontally instead of squishing */
  .card .bd > .table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* stacking */
  .cta-card{ flex-direction:column; align-items:flex-start; gap:12px; }
  .cta-card .btn{ width:100%; justify-content:center; }
  .req .right{ gap:8px; }
  .req .amt{ font-size:12px; }
}

@media (max-width: 900px){
  /* login stacks: compact branded header above the role cards (don't hide branding on phone) */
  .login-wrap{ grid-template-columns:1fr; }
  .login-aside{ display:flex; padding:26px 22px 20px; gap:16px; }
  .login-aside .kpis{ display:none; }
  .login-aside .pitch h1{ font-size:23px; margin:8px 0; }
  .login-aside .pitch p{ font-size:13px; }
  .login-panel{ padding:26px 22px 44px; }
}

@media (max-width: 560px){
  .hbar{ grid-template-columns:96px 1fr auto; gap:8px; font-size:11.5px; }
  .prio{ grid-template-columns:1fr; }
  .catpick .c{ font-size:12px; padding:7px 11px; }
  .est-total .big{ font-size:22px; }
  .pill-amt{ font-size:17px; }
  .rolecard{ padding:14px; }
  .rolecard .av{ width:42px; height:42px; }
  .grid.g4 .stat .v{ font-size:22px; }
}

@media (max-width: 480px){
  .ba{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:1fr 1fr; }
  .split{ gap:14px; }
}

/* ==========================================================================
   POST THEME — re-skin to match the Post Real Estate Group brand
   Deep navy + warm ivory · engraved serif display · brass hairline accents.
   Overrides the base "job-site" tokens; loads last so it wins.
   ========================================================================== */
body.portal, .login-wrap {
  /* surfaces — warm ivory instead of cool paper */
  --paper:#f4efe4; --paper-2:#ece4d5; --card:#fffdf8;
  --ink:#182a45; --ink-2:#465a74; --ink-3:#8b93a1;
  --line:#e3dbc9; --line-2:#ede6d7;
  /* navy is the brand + primary action; brass is the refined accent */
  --accent:#1c355e; --accent-ink:#12243f;
  --brass:#b0894c; --brass-2:#c8a662;
  --hi:#c8a662; --steel:#2f4a6b;
  /* muted, warm semantics that sit on cream */
  --pos:#3f7a5a; --pos-bg:#e7efe6; --neg:#a8443b; --neg-bg:#f4e7e3;
  --warn:#a9843e; --warn-bg:#f3ead4; --info:#2f4a6b; --info-bg:#e7ecf3;
  --shadow:0 1px 2px rgba(24,42,69,.05), 0 12px 30px -16px rgba(24,42,69,.20);
  --shadow-lg:0 34px 66px -30px rgba(20,34,58,.42);
  --radius:9px; --radius-sm:5px;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
}
body.portal{ background-image:none; background-color:var(--paper); font-family:var(--sans); }

/* headings: engraved serif, tighter */
body.portal h1, body.portal h2, body.portal h3, body.portal h4, .display{ font-family:var(--display); letter-spacing:-.01em; }
body.portal h1, .display{ font-weight:600; }
/* eyebrows & small labels: classic letter-spaced sans, not techy mono */
.eyebrow, .stat .k, .pbsub, .pbtag, .nav .group{ font-family:var(--sans); font-weight:600; }
.welcome .eyebrow, .phead .eyebrow{ color:var(--brass); }
/* keep tabular figures for money/ids but let the big stat numbers be serif */
.stat .v{ font-family:var(--display); font-weight:600; }

/* remove the industrial corner-tick registration marks */
.tick::before, .tick::after{ display:none !important; }

/* ---- navy header (matches the logo) ---- */
.pbar{ background:linear-gradient(180deg,#204066,#1a3255); border-bottom:1px solid #12253f;
       box-shadow:0 1px 0 rgba(200,166,98,.45), 0 8px 24px -16px rgba(0,0,0,.5); }
.pbar .pbrand{ border-right-color:rgba(255,255,255,.12); }
.pbtag{ color:rgba(255,255,255,.68); border-left-color:rgba(255,255,255,.16); }
.pw{ color:rgba(255,255,255,.5); } .pw b{ color:#fff; }
.pnav a{ color:rgba(255,255,255,.72); }
.pnav a:hover{ color:#fff; }
.pnav a.active{ color:#fff; border-bottom-color:var(--brass-2); }
.pnav a .ct{ background:var(--brass); color:#17233b; }
.puser{ border-left-color:rgba(255,255,255,.14); }
.puser .co{ color:#fff; } .puser .nm{ color:rgba(255,255,255,.6); }
.roleswitch{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }
.roleswitch a{ color:rgba(255,255,255,.66); }
.roleswitch a.active{ background:var(--brass-2); color:#17233b; }
.postlogo{ box-shadow:0 1px 3px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.5) inset; }

/* scope banner: ivory with navy lock */
.scope-banner{ background:linear-gradient(#faf6ee,#f4efe4); border-bottom:1px solid var(--line); }
.scope-banner .lock{ background:var(--accent); }

/* cards & sections */
.portal .card{ border-radius:12px; border-color:var(--line); }
.psec h2{ font-weight:600; }
.psec .ln{ background:linear-gradient(90deg,var(--line),transparent); }

/* primary CTA: solid navy, quiet shadow (no orange glow) */
.btn.pri{ background:var(--accent); border-color:var(--accent-ink); }
.btn.pri:hover{ background:var(--accent-ink); }
.cta-card .btn.pri{ background:var(--brass-2); border-color:var(--brass); color:#182a45; box-shadow:0 10px 24px -14px rgba(0,0,0,.55); }
.cta-card .btn.pri:hover{ background:#d6b877; border-color:var(--brass); }
.btn.dark{ background:var(--accent); border-color:var(--accent-ink); }

/* navy hero CTA strip with a brass hairline */
.cta-card{ background:linear-gradient(135deg,#203f66,#16294510); background-color:#1b3358;
           box-shadow:0 1px 0 rgba(200,166,98,.4) inset, var(--shadow); }
.cta-card .txt h3{ font-family:var(--display); font-weight:600; }

/* soft navy tints replace the old orange hovers/selections */
.table tbody tr[data-open]:hover td, tr.rowlink:hover td{ background:#eff2f7; }
.prio label:has(input:checked){ border-color:var(--accent); background:#eef2f7; box-shadow:inset 0 0 0 1px var(--accent); }
.catpick label:has(input:checked) .c{ border-color:var(--accent); color:var(--accent-ink); background:#eef2f7; }
.dz:hover, .dz.drag{ border-color:var(--accent); background:#f4f1e9; }
.step.current .dot{ box-shadow:0 0 0 4px #eef2f7; }
.rolecard:hover, .card[data-open]:hover{ border-color:var(--accent); }

/* login: navy + ivory, serif headline */
.login-wrap{ background:radial-gradient(1100px 720px at 12% -10%, rgba(200,166,98,.12), transparent 55%), linear-gradient(160deg,#1d3a61,#0f1f38); }
.login-aside .pitch .eyebrow{ color:var(--brass-2); }
.login-aside .pitch h1{ font-family:var(--display); font-weight:600; }
.login-aside .kpis .v{ font-family:var(--display); font-weight:600; color:#f6f1e6; }
.login-aside .kpis .k, .login-aside .lockup .sub{ color:#9fb0c4; }
.login-aside .pitch p{ color:#b7c2d0; }
.rolecard .av.pm{ background:#2f4a6b; } .rolecard .av.rm{ background:#33578a; }
.rolecard .who .nm{ font-family:var(--display); font-weight:600; }
.rolecard .go{ color:var(--accent); }
.login-panel .head h2{ font-family:var(--display); font-weight:600; }
.login-panel .head .eyebrow{ color:var(--brass) !important; }

/* number/amount emphasis stays serif for a moneyed feel */
.pill-amt, .est-total .big{ font-family:var(--display); font-weight:600; }
.sla{ background:var(--info-bg); color:var(--steel); }

/* capital job progress rows (regional reporting) */
.jobrow{ display:grid; grid-template-columns:1.5fr 1.15fr auto; gap:18px; align-items:center; padding:15px 16px; border-bottom:1px solid var(--line-2); }
.jobrow:last-child{ border-bottom:0; }
.jobrow:hover{ background:#eff2f7; }
.jobrow .t{ font-weight:600; }
.jobrow .s{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px; }
.jobrow .pct{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:var(--ink-2); margin-bottom:5px; font-variant-numeric:tabular-nums; }
.jobrow .pct b{ font-family:var(--display); font-size:14px; color:var(--ink); }
.jobrow .right{ text-align:right; white-space:nowrap; }
.jobrow .right .tgt{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:6px; }
.hbar[href]{ cursor:pointer; text-decoration:none; color:inherit; border-radius:6px; padding:3px 6px; margin:-3px -6px; }
.hbar[href]:hover{ background:#eff2f7; }
@media (max-width:720px){
  .jobrow{ grid-template-columns:1fr; gap:9px; }
  .jobrow .right{ text-align:left; display:flex; gap:12px; align-items:center; }
  .jobrow .right .tgt{ margin-top:0; }
}