/* ============================================================
   styles.css — all styling for the prototype

   Contents, in order:
     1. Design tokens (:root variables) and base resets
     2. ENTRY SCREEN     top nav, header, AI banner, left nav
     3. SETTINGS LAYOUT  sidebar, search, icon rail, nav drawer
     4. MAIN AREA        page content, controls, tables, cards
        - shared controls (toggle, checkbox, radio-card, btn)
        - preview images, lightbox, thumbnails
        - page-specific tables (team members, doc visibility,
          select profiles, grant access)
        - overlays (gear popover, client preview, toast)

   Colors come from the design tokens below — prefer var(--x)
   over new hex values when adding styles.
============================================================ */

:root{
  --teal:#0e606b; --teal-dark:#0a4f58; --teal-text:#14646d; --teal-bright:#0d7a87;
  --pill-bg:#eefafa; --pill-border:#2a8a96;
  --ink:#1f2a2e; --grey:#5f6b70; --grey-light:#8a9499;
  --line:#e3e7e8; --rail-bg:#f1f2f3; --drawer-bg:#fafbfb;
  --red:#c7115c; --red-bg:#fdf4f3; --info-bg:#e1f1f3; --info-border:#117c96;
  --pink-bg:#fff7fa; --pink-border:#c7115c;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:"Segoe UI","Open Sans","Helvetica Neue",Arial,sans-serif; color:var(--ink); font-size:15px; background:#fff; overflow:hidden; display:flex; flex-direction:column;}
button{font-family:inherit;}
::placeholder{color:#9aa4a8;}

/* ============ ENTRY SCREEN (recreated Engage overview) ============
   Static except the Project Settings button in the left nav. */
#entry{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; background:#fff; font-family:"Noto Sans","Segoe UI",sans-serif;}

/* Global Nav (#globalNav) — the one nav shared by every screen */
.en-nav{background:#0b0b0b; height:44px; display:flex; align-items:center; padding:0 16px; flex:none; font-family:"Noto Sans","Segoe UI",sans-serif;}
.en-nav-logo{height:30px;}
.en-nav-links{display:flex; align-items:center; gap:4px; margin-left:auto;}
.en-link{color:#fff; font-size:14px; line-height:20px; padding:4px 10px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
.en-link i{font-size:11px;}
.en-link.active{color:#4ee0f1; font-weight:600;}
.en-nav-ico{color:#fff; padding:4px 7px; font-size:14px; cursor:pointer;}
.en-logout{border:1px solid #4ee0f1; color:#fff; font-size:13px; letter-spacing:.4px; padding:5px 12px; border-radius:4px; margin-left:8px; cursor:pointer;}

/* Engagement Header */
.en-header{display:flex; align-items:stretch; border-bottom:1px solid #dfdddd; background:#fff; flex:none; min-height:76px;}
.en-uplogo{width:170px; flex:none; margin:8px 12px; border:1.5px dashed #b9c2c5; border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10.5px; color:#585656; text-align:center; padding:6px;}
.en-uplogo i{font-size:16px; color:#8a9499;}
.en-uplogo-s{font-size:9px; color:#8a9499;}
.en-company{display:flex; align-items:center; padding:0 24px 0 12px; font-size:16px; color:#212121; white-space:nowrap;}
.en-meta{border-left:1px solid #dfdddd; padding:12px 24px; min-width:300px; display:flex; flex-direction:column; justify-content:center; gap:2px;}
.en-meta-top{font-size:12.5px; color:#585656; line-height:18px;}
.en-meta-title{font-size:15px; color:#0c5769; font-weight:600; line-height:22px; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.en-meta-title i{font-size:12px;}
.en-stat{border-left:1px solid #dfdddd; padding:12px 20px; display:flex; flex-direction:column; justify-content:center; gap:2px; white-space:nowrap;}
.en-stat .k{font-size:12.5px; line-height:18px; color:#585656;}
.en-stat .v{font-size:15px; line-height:22px; color:#212121;}
.en-statistics{border-left:1px solid #dfdddd; border-right:1px solid #dfdddd; padding:12px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#0c5769; font-weight:600; font-size:14px; white-space:nowrap;}
.en-actions{display:flex; align-items:center; gap:8px; padding:0 16px; margin-left:auto; flex-wrap:nowrap;}
.en-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #959392; background:#fff; border-radius:4px; padding:0 12px; height:38px; font-size:14px; color:#0c5769; font-weight:600; cursor:pointer; white-space:nowrap;}
.en-btn.sq{width:38px; padding:0; color:#212121;}
.en-btn.sq i{font-size:15px;}
.en-btn-insight{text-decoration:underline;}

/* AI Summary Banner (collapsible; band matches product screenshots).
   The strip surrounds the banner with the gray page background on all
   four sides, then a sliver of white before the tab content starts. */
.en-ai-strip{background:#f9f9f9; padding:12px 16px; margin-bottom:0; flex:none;}
.en-ai{background:#f6f4ff; border:1px solid #6500ad; border-radius:6px; display:flex; flex-direction:column; flex:none;}
.en-ai-head{display:flex; align-items:center; gap:8px; padding:9px 14px; cursor:pointer;}
.en-ai-t{font-size:13.5px; color:#6500ad; font-weight:700;}
.en-ai-dot{color:#6500ad;}
.en-ai-refresh{font-size:13px; color:#6500ad; font-style:italic;}
.en-ai-chev{margin-left:auto; color:#6500ad; font-size:13px;}
.en-aiband{padding:2px 14px 12px 14px; font-family:"Noto Sans","Segoe UI",sans-serif;}
.en-aiband-grid{display:flex; gap:20px; align-items:flex-start;}
.en-aiband-rows{flex:1; min-width:0; display:flex; flex-direction:column; gap:9px;}
.en-airow{display:flex; align-items:stretch; gap:14px;}
.en-airow-tag{flex:none; width:172px; background:#6500ad; color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; padding:5px 12px; border-radius:2px;}
.en-airow-txt{font-size:13.5px; color:#212121; display:flex; align-items:center;}
.en-aifocus{flex:none; width:230px; border-radius:4px; overflow:hidden; background:#f4ebfb;}
.en-aifocus-h{background:#6500ad; color:#fff; font-size:14px; font-weight:700; padding:10px 14px;}
.en-aifocus-b{padding:14px; font-size:13px; color:#212121; min-height:64px;}
.en-aidisclaimer{border-top:1px solid #e6dced; margin-top:12px; padding-top:9px; font-size:12.5px; color:#585656; display:flex; align-items:center; gap:7px;}

/* Body: left nav + dashboard */
.en-body{flex:1; display:flex; align-items:stretch; min-height:0;}
.en-side{width:160px; flex:none; background:#f9f9f9; border-right:1px solid #dfdddd; display:flex; flex-direction:column; padding-top:24px;}
.en-side-item{padding:12px 14px; font-size:13.5px; color:#212121; border-bottom:1px solid #efeeee; cursor:pointer;}
.en-side-item:hover{background:#f1f3f3;}
.en-side-item b{font-weight:600;}
.en-side-item.active{background:#fff; border-left:4px solid #0c5769; padding-left:10px; font-weight:600;}
.en-setup-btn{margin:28px 10px 20px 10px; border:1px solid #0a5c6f; background:#fff; border-radius:6px; padding:8px 10px; font-size:13.5px; color:#0c5769; font-weight:600; cursor:pointer; font-family:inherit; transition:background-color .15s ease;}
.en-setup-btn:hover{background:#e6f4f7;}
.en-appsetup-btn{margin-top:0;}   /* sits directly under the Settings button */
.en-clientlogo{width:170px; flex:none; margin:8px 12px; display:flex; align-items:center; justify-content:center;}

.en-main{flex:1; min-width:0; padding:18px 24px 40px 24px;}
/* record page main hosting the shared client-preview tab pages (cpj-*) */
.en-main-cpj{padding:0; display:flex; flex-direction:column; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:14px; color:#212121; background:#fff;}
.en-main-cpj .cpj-content{flex:none;}
.en-tabs{display:flex; gap:8px; border-bottom:1px solid #dfdddd; margin-bottom:22px;}
.en-tab{font-size:14px; color:#212121; padding:8px 14px 10px 14px; border-bottom:3px solid transparent; cursor:pointer;}
.en-tab.on{border-bottom-color:#0c5769; font-weight:600;}

.en-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1420px;}
.en-card{border:1px solid #dfdddd; border-radius:6px; background:#fff; overflow:hidden;}
.en-card-h{background:#f5f5f5; border-bottom:1px solid #dfdddd; padding:11px 16px; font-size:14.5px; color:#212121; display:flex; align-items:center; justify-content:space-between;}
.en-card-b{padding:18px 20px;}

/* Pipeline funnel */
.en-funnel{display:flex; flex-direction:column; gap:3px;}
.en-frow{display:grid; grid-template-columns:180px 1fr; align-items:center; gap:14px;}
.en-frow .fl{font-size:13.5px; color:#212121; display:inline-flex; align-items:center; gap:6px;}
.en-frow .fl i{color:#585656; font-size:12px;}
.en-frow .fb{display:block; justify-self:center; height:29px; line-height:29px; text-align:center; font-size:14px; color:#0b2a66; clip-path:polygon(0 0, 100% 0, 96% 100%, 4% 100%);}

/* Status empty state */
.en-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:180px; font-size:13.5px; color:#212121;}
.en-ghost{border:1px solid #0a5c6f; color:#0c5769; background:#fff; border-radius:4px; padding:7px 14px; font-size:13.5px; font-weight:600; cursor:default;}

/* Interviews */
.en-int-lbl{font-size:13.5px; color:#212121; margin-bottom:8px;}
.en-int-row{display:flex; gap:16px;}
.en-int-box{flex:1; background:#cfe3f8; border-radius:3px; height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:13.5px; color:#212121;}
.en-int-box.lt{background:#e9f2fc;}
.en-int-box b{font-size:16px;}
.en-int-box i{font-size:15px;}

/* Reasons for Decline */
.en-hashpct{display:inline-flex; border:1px solid #dfdddd; border-radius:3px; overflow:hidden; font-size:12.5px;}
.en-hashpct span{padding:3px 16px; background:#fff; color:#212121; cursor:pointer;}
.en-hashpct span.on{background:#0c5769; color:#fff;}
.en-declines{display:flex; gap:24px; justify-content:space-around; flex-wrap:wrap;}
.en-donut-col{display:flex; flex-direction:column; align-items:center; gap:12px; padding:6px 0;}
.en-donut-t{font-size:14px; font-weight:600; color:#212121;}
.en-donut{position:relative; width:132px; height:132px; border-radius:50%;}
.en-donut-hole{position:absolute; inset:26px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.en-donut-hole b{font-size:20px; color:#212121;}
.en-donut-hole span{font-size:11.5px; color:#585656;}
.en-dnum{position:absolute; font-size:11.5px; color:#212121;}
.en-legend{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; max-width:240px; font-size:11.5px; color:#212121;}
.en-legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px;}
.en-legend span{display:inline-flex; align-items:center;}

/* Footer (global: #globalFooter is the only footer, pinned to the
   viewport bottom by the body's flex column) */
.en-footer{background:#0b0b0b; color:#fff; padding:9px 20px; display:flex; align-items:center; justify-content:space-between; flex:none; margin-top:auto;}
.en-foot-l{font-size:12px; line-height:20px;}
.en-foot-links{display:flex; gap:22px; font-size:11.5px; color:#d7d7d7;}
.en-foot-r{display:flex; gap:18px; font-size:15px;}

/* ============ HOME SCREEN (SuperApp landing, Figma node 5-681) ============
   Design tokens from the Figma file:
     Gray-500 #212121  Gray-400 #585656  Gray-300 #959392  Gray-200 #dfdddd
     Gray-100 #efefef  Gray-bg #f9f9f9   Green-300 #00a3b8 (+#00b2c7 links) */
#home{flex:1; min-height:0; display:flex; flex-direction:column; background:#f9f9f9; font-family:"Noto Sans","Segoe UI",sans-serif;}
.hm-chev{width:14px; height:14px; flex:none;}

/* Body: main + meetings sidebar */
.hm-body{flex:1; display:flex; align-items:stretch; min-height:0;}
.hm-main{flex:1; min-width:0; overflow-y:auto; background:#f9f9f9;}

/* Welcome header row */
.hm-welcome{display:flex; align-items:center; gap:24px; padding:24px 24px 16px 24px;}
.hm-welcome h1{font-size:24px; line-height:32px; font-weight:300; color:#212121; white-space:nowrap; margin:0;}
.hm-filter{flex:1; min-width:0; display:flex; justify-content:flex-end;}
.hm-engsel{background:#fff; border:1px solid #959392; border-radius:4px; height:36px; padding:0 10px; display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#212121; cursor:default; white-space:nowrap; margin-right:8px; font-family:inherit;}
.hm-search{flex:1; max-width:260px; min-width:0; background:#fff; border:1px solid #959392; border-radius:4px; height:36px; padding:0 10px; display:flex; align-items:center; gap:8px;}
.hm-search:focus-within{border-color:#0c5769;}
.hm-search img{flex:none; display:block;}
.hm-search input{height:100%; padding:0;}
.hm-search input{border:none; outline:none; flex:1; min-width:0; font-family:inherit; font-size:16px; line-height:24px; color:#212121; background:transparent;}
.hm-search input::placeholder{color:#959392;}

/* Content column */
.hm-content{display:flex; flex-direction:column; gap:16px; padding:0 24px 24px 24px;}
.hm-card{background:#fff; border:1px solid #dfdddd; border-radius:4px;}
.hm-engcard{padding:24px; display:flex; flex-direction:column; gap:16px;}
.hm-card-title{display:flex; align-items:center;}
.hm-card-title.pad{padding:16px 16px 0 16px;}
.hm-card-title .t{flex:1; min-width:0; font-size:20px; line-height:24px; color:#000;}
.hm-viewall{color:#0d7a87; font-size:16px; line-height:20px; font-weight:600; text-decoration:underline; padding:8px; cursor:pointer; white-space:nowrap;}

/* Engagement groups: left title + right column set (header and rows share
   .hm-cols so the columns stay aligned) */
.hm-group{display:flex; flex-direction:column;}
.hm-ghead{display:flex; align-items:center; gap:16px; padding:16px 16px 8px 16px;}
.hm-ghead-sp{padding:0 16px 8px 8px; gap:24px;}
.hm-glabel{flex:1; min-width:0; font-size:16px; line-height:24px; font-weight:600; color:#000;}
.hm-cols{flex:1; min-width:360px; display:flex; align-items:center; gap:8px;}
.hm-col{flex:1; min-width:32px; text-align:center; font-size:14px; line-height:24px; color:#585656;}
.hm-col.two{min-width:86px; line-height:24px;}
.hm-col.pub{min-width:66px;}
.hm-col.hd-hl{background:#efefef; padding:8px 0;}
.hm-col.hd-hl.dk{color:#212121;}
.hm-rows{display:flex; flex-direction:column; gap:8px;}
.hm-row{background:#fff; border:1px solid #dfdddd; border-radius:8px; padding:8px 16px; display:flex; align-items:center; gap:16px;}
.hm-row.tall{padding:16px;}
.hm-rtitle{flex:1; min-width:0; font-size:16px; line-height:24px; color:#212121; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hm-rtitle b{font-weight:700;}
.hm-projlink{font-weight:700; text-decoration:underline; color:#0c5769; background:#eefafa; padding:2px 6px; border-radius:3px; cursor:pointer;}
.hm-col.cell{font-size:16px; color:#212121;}
.hm-col.cell.b{font-weight:600;}
.hm-col.cell.hl{background:#efefef; padding:8px 0; font-weight:600;}
.hm-check{width:19px; height:21px; display:block; margin:0 auto;}

/* Documents / Analytics & Insights cards */
.hm-bottom{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;}
.hm-doccard{flex:1; min-width:400px; padding-bottom:16px;}
.hm-doclist{padding:16px;}
.hm-docrow{border-top:1px solid #dfdddd; border-bottom:1px solid #dfdddd; padding:8px 16px; height:52px; display:flex; align-items:center; gap:16px;}
.hm-docrow .nm{flex:1; min-width:0; font-size:16px; line-height:24px; color:#000;}
.hm-dl{color:#0d7a87; font-size:16px; cursor:pointer;}

/* Upcoming Meetings sidebar */
.hm-side{width:30.9%; min-width:340px; flex:none; background:#fff; border-left:1px solid #dfdddd; padding:24px; display:flex; flex-direction:column; min-height:0;}
.hm-side-head{flex:none; border-bottom:1px solid #dfdddd; padding-bottom:16px; display:flex; flex-direction:column; gap:12px;}
.hm-side-title{font-size:16px; line-height:24px; font-weight:600; color:#000;}
.hm-toggle{display:flex; border-radius:4px; overflow:hidden;}
.hm-tg,.hm-tg.on{border-radius:0;}
.hm-tg{flex:1; min-width:0; height:40px; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:24px; color:#212121; background:#fff; border:1px solid #959392; cursor:pointer;}
.hm-tg.on{background:#0e606b; color:#fff; font-weight:600; border:1px solid #0e606b;}
.hm-meetings{flex:1; min-height:0; overflow-y:auto; padding:16px 1px 24px 1px; display:flex; flex-direction:column; gap:16px;}
.hm-meet{border:1px solid #dfdddd; border-radius:8px; overflow:hidden; flex:none;}
.hm-meet-h{background:#e5f5f7; padding:8px 16px; font-size:14px; line-height:24px; font-weight:600; color:#585656;}
.hm-meet-b{background:#fff; padding:16px; font-size:14px; line-height:24px; color:#000;}
.hm-meet-b .who{color:#0d7a87;}
.hm-meet-b .loc{margin-top:8px; display:flex; align-items:center; gap:8px;}
.hm-locdot{width:11px; height:14px; flex:none;}

/* ============ PERSON PROFILE (Figma 8-751) ============ */
#profile{display:none; flex:1; min-height:0; overflow-y:auto; flex-direction:column; background:#fff; font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121;}
.pf-topbar{flex:none; display:flex; align-items:center; justify-content:space-between; padding:12px 24px 8px 16px;}
.pf-back{color:#0c5769; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px;}
.pf-back:hover{text-decoration:underline;}
.pf-topmeta{font-size:13px; color:#585656; display:inline-flex; align-items:center; gap:10px;}
.pf-final{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#212121; cursor:pointer;}
.pf-final input{accent-color:#0c5769;}
/* no min-height:0 here: the page scrolls as a whole, so the body must keep
   its natural height or the footer paints over the overflowing content */
.pf-body{flex:1; display:flex; align-items:flex-start; gap:20px; padding:0 16px 28px 16px;}
.pf-rail{flex:none; width:264px; display:flex; flex-direction:column; gap:10px;}
.pf-select{border:1px solid #959392; border-radius:4px; background:#fff; padding:8px 12px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; cursor:pointer;}
.pf-select i{margin-left:auto; font-size:12px;}
.pf-badge{background:#0c5769; color:#fff; border-radius:3px; font-size:12px; padding:1px 7px;}
.pf-cards{display:flex; flex-direction:column; gap:10px;}
.pf-card{position:relative; border:1px solid #dfdddd; border-radius:6px; background:#fff; padding:10px 26px 10px 12px; cursor:pointer;}
.pf-card:hover{background:#f6f8f8;}
.pf-card.sel{border:2px solid #0c5769; padding:9px 25px 9px 11px;}
.pf-card-ck{position:absolute; top:9px; right:9px; font-size:12px; color:#0c5769;}
.pf-card-n{font-size:13.5px; font-weight:700; margin-bottom:2px;}
.pf-card-r{font-size:12.5px; line-height:17px; color:#212121;}
.pf-card-c{font-size:12.5px; line-height:17px; color:#212121; margin-top:2px;}
.pf-main{flex:1; min-width:0;}

/* header card */
.pf-header{border:1px solid #b9dde3; background:#fbfeff; border-radius:6px; padding:14px 18px 18px 18px;}
.pf-head-row1{display:flex; align-items:flex-start; justify-content:space-between;}
.pf-chip{border:1px solid #9fd4dc; background:#eefafa; color:#212121; border-radius:4px; padding:6px 12px; font-size:13.5px;}
.pf-hdrbtns{display:inline-flex; gap:8px;}
.pf-sqbtn{width:38px; height:34px; border:1px solid #9fc7cd; border-radius:4px; background:#fff; color:#0c5769; display:inline-flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer;}
.pf-sqbtn:hover{background:#eefafa;}
.pf-head-row2{display:flex; align-items:flex-start; gap:44px; margin:10px 0 18px 0;}
.pf-name{font-size:21px; color:#212121;}
.pf-name-icons{display:flex; gap:6px; margin-top:7px;}
.pf-mini{width:19px; height:19px; border-radius:3px; background:#e8eef0; color:#3d565c; display:inline-flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer;}
.pf-mini-li{background:#0a66c2; color:#fff;}
.pf-rank{display:flex; flex-direction:column; gap:2px; font-size:13.5px;}
.pf-rank b{font-size:15px;}
/* header dropdowns (Ranking, Status) — same look as the rail's select boxes */
.pf-dd-wrap{display:flex; flex-direction:column; gap:4px; font-size:13.5px;}
.pf-dd{position:relative; display:inline-flex; align-items:center; border:1px solid #959392; border-radius:4px; background:#fff; height:34px; min-width:96px;}
.pf-dd-sel{appearance:none; -webkit-appearance:none; border:none; background:transparent; font:600 13.5px "Noto Sans","Segoe UI",sans-serif; color:#212121; padding:0 30px 0 12px; height:32px; cursor:pointer; outline:none; max-width:260px;}
.pf-dd i{position:absolute; right:10px; font-size:12px; pointer-events:none; color:#212121;}
.pf-dd-lbl{color:#585656;}
.pf-status{display:flex; flex-direction:column; gap:6px;}
/* Interview Feedback tab: the project's interview questions in order */
.pf-fb-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; font-size:13.5px;}
.pf-fb-meta b{font-size:15px;}
.pf-fb-row{border:1px solid #dfe3e4; border-radius:8px; padding:14px 18px; margin-bottom:12px;}
.pf-fb-q{font-size:14px; line-height:20px; margin-bottom:10px;}
.pf-fb-n{color:#585656; margin-right:4px;}
.pf-fb-scores{display:flex; gap:8px;}
.pf-fb-score{width:38px; height:34px; border:1px solid #959392; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; background:#fff;}
.pf-fb-score:hover{background:#eef4f5;}
.pf-fb-score.on{background:#0c5769; border-color:#0c5769; color:#fff; font-weight:600;}
.pf-fb-text{width:100%; border:1px solid #b9c2c5; border-radius:4px; padding:8px 10px; font:14px/20px "Noto Sans","Segoe UI",sans-serif; resize:vertical; box-sizing:border-box;}
.pf-fb-empty{color:#585656; font-size:14px; padding:16px 0;}
.pf-rate{display:flex; flex-direction:column; gap:3px; font-size:14.5px;}
.pf-status .cpj-status-lbl{font-size:14.5px; margin-top:5px;}
.pf-infocols{display:flex; gap:26px; align-items:flex-start;}
.pf-infocol{flex:1; min-width:0;}
.pf-infocol-h{font-size:12.5px; color:#585656; margin-bottom:6px;}
.pf-kv{font-size:13px; line-height:20px;}
.pf-kv b{font-weight:700;}
.pf-seemore{color:#0c5769; font-weight:700; cursor:pointer;}
.pf-pen{color:#0c5769; font-size:13px; cursor:pointer;}

/* two content columns */
.pf-columns{display:flex; gap:28px; align-items:flex-start; margin-top:20px;}
.pf-left{flex:1; min-width:0;}
.pf-right{flex:1.45; min-width:0;}
/* 3-column layout (Select Candidate Profile Layout): Education /
   Qualifications / Languages get their own middle column */
.pf-columns.cols3{gap:0;}
.pf-mid{flex:1; min-width:0; border-left:1px solid #e3e7e8; padding-left:26px; margin-left:28px;}
.pf-columns.cols3 .pf-right{border-left:1px solid #e3e7e8; padding-left:26px; margin-left:28px;}

/* ---- profiles rail ⇄ top person nav (employee page + client preview) ---- */
.prof-rail-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:2px;}
.prof-rail-title{font-weight:600; font-size:15px;}
.prof-rail-lbl{font-size:12.5px; color:#585656; margin:6px 0 2px 0;}
.prof-railbtn{width:28px; height:28px; border:1px solid #c9d1d5; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#0c5769; background:#fff; flex:none; font-size:13px;}
.prof-railbtn:hover{border-color:var(--teal);}
.prof-expand{margin:4px 12px 0 0; align-self:flex-start; position:sticky; top:48px;}
.prof-topnav-center{display:flex; align-items:center; gap:10px; font-size:14px; color:#212121;}
.prof-topnav-name{color:#0c5769;}
.prof-topnav-arrow{cursor:pointer; color:#0c5769; padding:2px 6px;}
.prof-topnav-arrow:hover{color:var(--teal);}
/* the profile's navigation banner: a self-contained bar above the content,
   unaffected by the profiles rail opening or closing */
.cpp-topnav{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #e9ecec; margin-bottom:16px; background:#fff;}
.pf-sec-h{font-size:16.5px; color:#0f3a42; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e3e7e8; padding-bottom:7px; margin:22px 0 12px 0;}
.pf-sec-h:first-child{margin-top:0;}
.pf-sec-h .pf-pen{margin-left:auto;}
.pf-sec-note{font-size:12px; font-style:italic; color:#585656; font-weight:400;}
.pf-exp{display:flex; flex-direction:column; gap:14px;}
.pf-exp-row{display:flex; gap:18px; font-size:13.5px; line-height:19px;}
.pf-exp-when{flex:none; width:118px; font-weight:700;}
.pf-tabs{display:flex; gap:24px; border-bottom:1px solid #e3e7e8; margin-bottom:16px;}
.pf-tab{padding:6px 2px 10px 2px; font-size:14px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.pf-tab.on{color:#0c5769; font-weight:700; border-bottom-color:#0c5769;}
.pf-comments{font-size:13.5px; line-height:22px;}

/* evaluation criteria chart */
.pf-chart{margin-top:4px;}
.pf-chart-row{display:flex; align-items:center; gap:14px; margin-bottom:4px;}
.pf-chart-lbl{flex:none; width:130px; font-size:12.5px; line-height:17px; text-align:left;}
.pf-chart-plot{flex:1; position:relative; display:flex; flex-direction:column; gap:5px; padding:7px 0;
  background-image:linear-gradient(to right, #e3e7e8 1px, transparent 1px); background-size:25% 100%;
  border-right:1px solid #e3e7e8;}
.pf-chart-axis .pf-chart-plot{background:none; border-right:none; padding:0; flex-direction:row; justify-content:space-between; font-size:12px; color:#585656; transform:translateX(-3px);}
.pf-bar{height:20px;}
.pf-bar-me{background:#3b4fd8;}
.pf-bar-ideal{background:#d9d9d9;}
.pf-chart-legend{display:flex; gap:26px; margin:10px 0 0 144px; font-size:12px;}
.pf-chart-legend span{display:inline-flex; align-items:center; gap:7px;}
.pf-lg{width:26px; height:12px; display:inline-block;}
.pf-lg-me{background:#3b4fd8;}
.pf-lg-ideal{background:#d9d9d9;}

/* highlights editor */
.pf-hl-h{align-items:center;}
.pf-hl-btns{margin-left:auto; display:inline-flex; gap:8px;}
.pf-btn-regen{background:#6500ad; color:#fff; border-radius:4px; padding:6px 12px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
.pf-btn-cancel{border:1px solid #0c5769; color:#0c5769; background:#fff; border-radius:4px; padding:6px 14px; font-size:13.5px; font-weight:600; cursor:pointer;}
.pf-btn-save{background:#0c5769; color:#fff; border-radius:4px; padding:6px 16px; font-size:13.5px; font-weight:700; cursor:pointer;}
.pf-editor{border:1px solid #959392; border-radius:4px; overflow:hidden;}
.pf-editor-bar{display:flex; align-items:center; gap:4px; padding:7px 9px; border-bottom:1px solid #dfdddd; background:#fff;}
.pf-tool{width:29px; height:27px; border:1px solid #c9cfd1; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; color:#212121; cursor:pointer;}
.pf-tool:hover{background:#f1f4f5;}
.pf-fontsize{margin-left:8px; border:1px solid #c9cfd1; border-radius:3px; padding:4px 10px; font-size:13px; display:inline-flex; align-items:center; gap:22px; cursor:pointer;}
.pf-editor-text{padding:12px 14px; font-size:14.5px; line-height:23px; min-height:120px; outline:none;}
.pf-refresh{margin-top:10px; font-size:12.5px; color:#585656; display:flex; align-items:center; gap:6px;}

/* ============ CANDIDATE DOSSIER (templatized docx reader) ============ */
#dossier{display:none; flex:1; min-height:0; overflow-y:auto; flex-direction:column; background:#fff; font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121;}
.pf-dossierbtn{height:34px; border:1px solid #9fc7cd; border-radius:4px; background:#fff; color:#0c5769; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px; padding:0 12px; cursor:pointer;}
.pf-dossierbtn:hover{background:#eefafa;}
.ds-role{font-size:15px; color:#0c5769; font-weight:600; margin-top:4px;}
.ds-doc{margin-top:20px; padding-bottom:30px;}
.ds-sec-h{font-size:17px; color:#0f3a42; font-weight:600; border-bottom:1px solid #e3e7e8; padding-bottom:7px; margin:26px 0 14px 0;}
.ds-doc .ds-sec-h:first-child{margin-top:0;}
.ds-p{font-size:13.5px; line-height:21px; margin:0 0 10px 0;}
.ds-ul{margin:0 0 6px 22px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; line-height:21px;}
.ds-ol{margin:0 0 0 18px; display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:19px;}
.ds-table{width:100%; border-collapse:collapse; font-size:13px; line-height:19px;}
.ds-table th, .ds-table td{border:1px solid #dfe3e4; padding:9px 12px; vertical-align:top; text-align:left;}
.ds-table thead th{background:#f1f6f7; color:#0f3a42; font-weight:700; font-size:13px;}
.ds-kv th{background:#f1f6f7; color:#0f3a42; width:14%; white-space:nowrap; font-weight:700;}
.ds-kv td{width:36%;}
.ds-clientview td{width:auto;}
/* Overall assessment: the most important section — blue highlight */
.ds-assess th{background:#cfe0f7 !important; color:#123b8a;}
.ds-assess td{background:#e3eefc;}
.ds-badge{display:inline-block; border-radius:10px; padding:3px 10px; font-size:12px; font-weight:700; white-space:nowrap;}
.ds-badge-strong{background:#e2f3e8; color:#1c6b3c;}
.ds-badge-partial{background:#fdf1dc; color:#8a5a00;}
.ds-badge-risk{background:#fdeaea; color:#b3261e;}
.ds-probes{display:flex; flex-direction:column; gap:14px;}
.ds-probe{border:1px solid #dfe3e4; border-radius:6px; padding:14px 16px;}
.ds-probe-t{font-size:14px; font-weight:700; color:#0f3a42; margin-bottom:6px;}
.ds-probe-q{font-size:13px; line-height:20px; color:#38474c; background:#f6f9fa; border-left:3px solid #0c5769; padding:8px 12px; margin-top:8px;}

/* ---- sticky chrome on profile + dossier pages: the back bar pins right
        under the global nav, and the candidate rail pins under it ---- */
.pf-topbar{position:sticky; top:0; background:#fff; z-index:20;}
.pf-rail{position:sticky; top:40px; align-self:flex-start; max-height:calc(100vh - 88px); overflow-y:auto; background:#fff;}
.pf-meta-row{display:flex; justify-content:flex-end; align-items:center; gap:10px; font-size:13px; color:#585656; padding:0 0 8px 0;}
.pf-meta-row .pf-final{font-size:13px;}
.pf-hdr-right{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.ds-hdr-meta{font-size:12.5px; color:#585656; display:inline-flex; align-items:center; gap:12px; white-space:nowrap;}
.ds-hdr-meta .pf-final{font-size:12.5px;}

/* ---- dossier print preview (mirrors the source Word document) ---- */
#dossierPrint{display:none; position:fixed; inset:0; z-index:220; background:#525659; flex-direction:column;}
#dossierPrint.open{display:flex;}
.dsp-bar{flex:none; background:#323639; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:10px 18px;}
.dsp-bar-t{font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:9px;}
.dsp-bar-btns{display:inline-flex; gap:10px;}
.dsp-print{background:#0c5769; color:#fff; border:none; border-radius:4px; padding:8px 16px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px;}
.dsp-print:hover{background:#0a4a5a;}
.dsp-close{background:transparent; color:#fff; border:1px solid #8a9096; border-radius:4px; padding:8px 14px; font-size:13.5px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px;}
.dsp-close:hover{background:#43484c;}
.dsp-scroll{flex:1; overflow-y:auto; padding:26px 16px 40px 16px;}
/* the white "sheet": US Letter proportions, 1in margins */
.dsp-page{background:#fff; width:100%; max-width:816px; margin:0 auto; padding:48px 72px 72px 72px; box-shadow:0 3px 18px rgba(0,0,0,.45);}
.dsp-runhead{display:flex; justify-content:space-between; gap:16px; font-family:Calibri,"Segoe UI",sans-serif; font-size:10pt; color:#444; border-bottom:1px solid #bfbfbf; padding-bottom:6px; margin-bottom:26px;}
.dsp-doc{font-family:Calibri,"Segoe UI",sans-serif; font-size:11pt; line-height:1.35; color:#000;}
.dsp-doc p{margin:0 0 10px 0;}
.dsp-h1{font-family:Cambria,Georgia,serif; font-size:14pt; font-weight:700; color:#365f91; margin:22px 0 8px 0;}
.dsp-doc .dsp-h1:first-child{margin-top:0;}
.dsp-ul{margin:0 0 10px 24px; display:flex; flex-direction:column; gap:8px;}
.dsp-ol{margin:0 0 0 18px; display:flex; flex-direction:column; gap:4px;}
.dsp-table{width:100%; border-collapse:collapse; margin:0 0 12px 0; font-size:10.5pt; line-height:1.3;}
.dsp-table td{border:1px solid #7f7f7f; padding:6px 9px; vertical-align:top;}
.dsp-table .dsp-k{font-weight:700; background:#f2f2f2; white-space:normal;}
.dsp-assess td{background:#dbe5f1;}
.dsp-assess .dsp-k{background:#c6d6ec;}

/* printing: only the dossier document, as a plain white page flow */
@media print{
  body{overflow:visible !important; display:block !important;}
  body > *{display:none !important;}
  #dossierPrint.open{display:block !important; position:static; background:#fff;}
  .dsp-bar{display:none !important;}
  .dsp-scroll{overflow:visible; padding:0;}
  .dsp-page{box-shadow:none; max-width:none; padding:0; margin:0;}
  .dsp-table tr{page-break-inside:avoid;}
  .dsp-h1{page-break-after:avoid;}
  /* Download Engagement Details: print only the document pages (Save as PDF) */
  #cpDoc.open{display:block !important; position:static; background:#fff; padding:0;}
  .cpdoc-modal{width:auto; height:auto; box-shadow:none; border-radius:0; overflow:visible; display:block;}
  .cpdoc-head,.cpdoc-tools,.cpdoc-pager{display:none !important;}
  .cpdoc-viewer{overflow:visible; background:#fff; padding:0;}
  .cpdoc-page{box-shadow:none; margin:0 auto; page-break-after:always; min-height:0;}
  .cpdoc-page:last-child{page-break-after:auto;}
}

/* ============ MINI PROGRAMS (app grid + Document Generation App) ============ */
/* the launcher sits next to the R monogram, sized like part of the logo */
.en-nav-grid{font-size:26px; padding:4px 12px; margin-left:2px; display:inline-flex; align-items:center;}
.en-nav-grid:hover{color:#4ee0f1;}
#appGrid{display:none; position:fixed; top:48px; left:56px; z-index:180; background:#fff; border:1px solid #dfdddd; border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.22); padding:14px; width:250px; font-family:"Noto Sans","Segoe UI",sans-serif;}
#appGrid.open{display:block;}
.ag-title{font-size:12.5px; font-weight:700; color:#585656; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;}
.ag-tile{display:flex; align-items:center; gap:12px; border:1px solid #dfdddd; border-radius:6px; padding:12px; cursor:pointer;}
.ag-tile:hover{background:#eefafa; border-color:#9fc7cd;}
.ag-tile-ico{width:38px; height:38px; border-radius:8px; background:#0c5769; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex:none;}
.ag-tile-ico-v2{background:#6c2bd9;}
.ag-tile-t{font-size:13.5px; font-weight:600; color:#212121; line-height:18px;}
.ag-tile-sub{display:block; font-size:11.5px; font-weight:400; color:#585656;}
.ag-tile + .ag-tile{margin-top:10px;}

#docGen{display:none; position:fixed; inset:0; z-index:150; background:#f4f6f7; flex-direction:column; font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121;}
#docGen.open{display:flex;}
.dg-bar{flex:none; background:#0c5769; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:10px 18px;}
.dg-bar-t{font-size:15px; font-weight:700; display:inline-flex; align-items:center; gap:10px;}
.dg-bar-sub{font-size:12px; font-weight:400; opacity:.75; margin-left:4px;}
.dg-bar-close{background:transparent; border:1px solid rgba(255,255,255,.55); color:#fff; border-radius:4px; padding:7px 13px; font-size:13px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px;}
.dg-bar-close:hover{background:rgba(255,255,255,.12);}
.dg-body{flex:1; display:flex; min-height:0;}

/* left: AI chat */
.dg-chat{flex:none; width:460px; background:#fff; border-right:1px solid #dfdddd; display:flex; flex-direction:column; min-height:0;}
.dg-messages{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px;}
.dg-msg{max-width:92%; border-radius:10px; padding:10px 13px; font-size:13.5px; line-height:20px;}
.dg-bot{align-self:flex-start; background:#f1f6f7; border:1px solid #dde8ea; border-top-left-radius:2px;}
.dg-user{align-self:flex-end; background:#0c5769; color:#fff; border-top-right-radius:2px;}
.dg-btnrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.dg-btn{border:1px solid #0c5769; color:#0c5769; background:#fff; border-radius:16px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;}
.dg-btn:hover{background:#eefafa;}
.dg-btn-primary{background:#0c5769; color:#fff;}
.dg-btn-primary:hover{background:#0a4a5a;}
.dg-tablewrap{overflow-x:auto; margin-top:10px; background:#fff; border-radius:6px; border:1px solid #dde8ea;}
.dg-table{width:100%; border-collapse:collapse; font-size:12px; line-height:16px;}
.dg-table th{background:#f7fafa; text-align:left; padding:7px 9px; border-bottom:1px solid #dde8ea; font-weight:700; white-space:nowrap;}
.dg-table td{padding:7px 9px; border-bottom:1px solid #eef3f4; vertical-align:top;}
.dg-table tr:last-child td{border-bottom:none;}
.dg-name{color:#0c5769; font-weight:700; text-decoration:underline; cursor:pointer; white-space:nowrap;}
.dg-hl{color:#585656; max-width:170px;}
.dg-yes{color:#1c6b3c; font-weight:700;}
.dg-no{color:#b3261e; font-weight:700;}
.dg-inputrow{flex:none; display:flex; gap:9px; padding:12px 14px; border-top:1px solid #dfdddd; background:#fff;}
.dg-inputrow input{flex:1; min-width:0; border:1px solid #959392; border-radius:20px; padding:9px 16px; font-size:14px; font-family:inherit; outline:none;}
.dg-inputrow input:focus{border-color:#0c5769;}
.dg-send{width:40px; height:40px; border-radius:50%; border:none; background:#0c5769; color:#fff; font-size:15px; cursor:pointer; flex:none;}
.dg-send:hover{background:#0a4a5a;}

/* right: document preview */
.dg-preview{flex:1; min-width:0; overflow-y:auto; padding:22px;}
.dg-preview-empty{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#8a9499; font-size:14.5px;}
.dg-preview-empty i{font-size:44px;}
.dg-sheet{background:#fff; border:1px solid #dfdddd; border-radius:6px; max-width:900px; margin:0 auto; padding:34px 40px 44px 40px; box-shadow:0 2px 10px rgba(0,0,0,.08);}
.dg-edits{background:#fdf6e3; border:1px solid #ecd9a0; border-radius:5px; padding:10px 14px; font-size:12.5px; margin:12px 0 4px 0;}
.dg-edits ul{margin:6px 0 0 18px;}

/* ---- Mini Program 2: Candidate Dossier App (purple theme) ---- */
#cdApp{display:none; position:fixed; inset:0; z-index:150; background:#f4f2fa; flex-direction:column; font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121;}
#cdApp.open{display:flex;}
.cda-bar{flex:none; background:#6c2bd9; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:11px 18px;}
.cda-bar-t{font-size:15px; font-weight:700; display:inline-flex; align-items:center; gap:10px;}
.cda-bar-btns{display:inline-flex; gap:10px; align-items:center;}
.cda-newbtn{background:#fff; color:#6c2bd9; border:none; border-radius:4px; padding:8px 14px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;}
.cda-newbtn:hover{background:#efe6fc;}
.cda-x{background:transparent; border:none; color:#fff; font-size:17px; cursor:pointer; padding:6px 8px;}
.cda-body{flex:1; min-height:0; overflow-y:auto; display:flex; gap:18px; padding:20px; align-items:flex-start;}
.cda-panel{flex:1; min-width:0; background:#fff; border:1px solid #e2dcf0; border-radius:8px; padding:16px;}
.cda-panel-h{font-size:14.5px; font-weight:700; margin-bottom:12px;}
/* search box: bordered wrapper with the icon INSIDE, input borderless */
.cda-search{display:flex; align-items:center; gap:9px; border:1px solid #c9c2da; border-radius:6px; background:#fff; padding:0 12px; height:38px; margin-bottom:12px;}
.cda-search:focus-within{border-color:#6c2bd9;}
.cda-search i{color:#8a8499; font-size:13px; flex:none;}
.cda-search input{flex:1; min-width:0; border:none; outline:none; font-size:13.5px; font-family:inherit; background:transparent; height:100%; padding:0;}
.cda-table{width:100%; border-collapse:collapse; font-size:13px;}
.cda-table th{text-align:left; padding:8px 10px; border-bottom:1px solid #e2dcf0; color:#585656; font-size:12.5px; white-space:nowrap;}
.cda-table td{padding:9px 10px; border-bottom:1px solid #f0edf7; vertical-align:middle;}
.cda-link{color:#4b1fa6; font-weight:700; text-decoration:underline; cursor:pointer;}
.cda-status.ok{color:#1c6b3c; font-weight:700;}
.cda-status.hold{color:#8a5a00; font-weight:700;}
.cda-avatar{display:inline-flex; width:24px; height:24px; border-radius:50%; background:#e5dcf6; color:#4b1fa6; font-size:10.5px; font-weight:700; align-items:center; justify-content:center; margin-right:8px; flex:none;}
.cda-paging{display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:12.5px; color:#585656;}
.cda-pages{display:inline-flex; gap:9px; align-items:center;}
.cda-pages b{background:#6c2bd9; color:#fff; border-radius:4px; padding:2px 8px;}
.cda-projlist{flex:none; width:230px;}
.cda-projitem{padding:9px 12px; border:1px solid #ece7f6; border-radius:6px; margin-bottom:8px; font-size:13px; font-weight:700; color:#4b1fa6; cursor:pointer;}
.cda-projitem:hover{background:#f6f2fd;}
.cda-projitem.sel{background:#efe6fc; border-color:#c9aef2;}
.cda-projitem.cda-more{color:#8a8499; font-weight:400; cursor:default;}
.cda-peoplepanel{flex:1;}
.cda-projhead{font-size:14.5px; margin-bottom:14px;}
.cda-toolrow{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.cda-peoplecount{font-size:13.5px; font-weight:700; white-space:nowrap;}
.cda-search-inline{flex:1; margin-bottom:0; max-width:330px;}
.cda-stages{border:1px solid #c9c2da; border-radius:6px; padding:8px 12px; font-size:13px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:9px;}
.cda-export{border:1px solid #6c2bd9; color:#6c2bd9; border-radius:6px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; margin-left:auto;}
.cda-export:hover{background:#f6f2fd;}
.cda-people td{font-size:12.5px;}
.cda-stagedot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px;}
.cda-purple{background:#6c2bd9;} .cda-blue{background:#2f7de0;} .cda-amber{background:#f2a33c;} .cda-gray{background:#9aa4a8;}
.cda-ck{color:#1c6b3c;}
.cda-actbtn{border:1px solid #6c2bd9; color:#6c2bd9; border-radius:6px; padding:6px 11px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;}
.cda-actbtn:hover{background:#efe6fc;}
.cda-empty{padding:60px 20px; text-align:center; color:#585656; font-size:14px;}
.cda-bar-sep{opacity:.6; font-weight:400;}
.cda-personcell{display:flex; align-items:center;}
.cda-personcell > span{min-width:0;}
.cda-personsub{display:block; font-size:11.5px; color:#585656; font-weight:400; line-height:15px;}

/* V2 (purple) skin for the Document Generation chat overlay */
.dg-v2 .dg-bar{background:#6c2bd9;}
.dg-v2 .dg-user{background:#6c2bd9;}
.dg-v2 .dg-send{background:#6c2bd9;}
.dg-v2 .dg-send:hover{background:#571fb4;}
.dg-v2 .dg-btn{border-color:#6c2bd9; color:#6c2bd9;}
.dg-v2 .dg-btn:hover{background:#f3ecfd;}
.dg-v2 .dg-btn-primary{background:#6c2bd9; color:#fff;}
.dg-v2 .dg-btn-primary:hover{background:#571fb4;}
.dg-v2 .dg-inputrow input:focus{border-color:#6c2bd9;}
.dg-v2 .dg-bot{background:#f6f2fd; border-color:#e5dcf6;}
.dg-v2 .dg-name{color:#4b1fa6;}

/* published dossier rows inside an opened Documents accordion */
.cpj-acc-open{border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; background:#f6fafb;}
.cpj-acc-body{border:1px solid #dfe3e4; border-top:none; border-radius:0 0 6px 6px; padding:10px 16px; margin-bottom:12px;}

/* ============ SETTINGS LAYOUT ============ */
#settings{display:none; flex:1; min-height:0;}
#settings.active{display:flex;}
.sidebar{width:311px; flex:none; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--drawer-bg);}
.side-header{background:#0c5769; color:#fff; height:56px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; box-sizing:border-box;}
.side-header .side-header-title{display:flex; align-items:center; gap:10px; width:229px; cursor:pointer;}
.side-header .side-header-title:hover{opacity:.85;}
.side-header .apptitle{font-family:"Noto Sans","Segoe UI",sans-serif; font-weight:600; font-size:16px; line-height:24px;}
.side-header .gear{cursor:pointer; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:4px; padding:3px; box-sizing:border-box;}
.side-search{padding:12px 16px; background:#f9f9f9; position:relative;}
.side-search .searchwrap, .dv-filter .searchwrap{display:flex; align-items:center; gap:8px; border:1px solid #767676; border-radius:4px; padding:8px; background:#fff; height:40px; box-sizing:border-box;}
.side-search .search-ico, .dv-filter .search-ico{display:flex; align-items:center; justify-content:center; flex:none; width:20px; height:24px;}
.side-search .searchwrap input, .dv-filter .searchwrap input{border:none; outline:none; flex:1; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:16px; line-height:24px; color:#212121; background:transparent; height:24px; padding:0; border-radius:0;}
.side-search .searchwrap input::placeholder, .dv-filter .searchwrap input::placeholder{color:#212121;}
.dv-filter .searchwrap{width:240px;}
/* search dropdown */
#searchResults{
  display:none; position:absolute; top:calc(100% - 4px); left:10px; right:-260px; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(10,50,56,.18);
  max-height:420px; overflow:auto;
}
#searchResults.open{display:block;}
.sr-item{display:block; width:100%; border:none; background:#fff; text-align:left; padding:10px 14px; cursor:pointer; border-bottom:1px solid #f0f3f3; font-family:inherit;}
.sr-item:last-child{border-bottom:none;}
.sr-item:hover,.sr-item.hot{background:var(--pill-bg);}
.sr-crumb{font-size:11.5px; color:var(--grey-light); margin-bottom:2px;}
.sr-title{font-size:14px; font-weight:600; color:var(--teal-text);}
.sr-desc{font-size:12.5px; color:var(--grey); margin-top:2px;}
.sr-snippet{font-size:12.5px; color:var(--grey); margin-top:3px; font-style:italic;}
.sr-empty{padding:14px; font-size:13px; color:var(--grey);}
mark{background:#ffe89a; color:inherit; border-radius:2px; padding:0 1px;}

.side-body{flex:1; display:flex; min-height:0;}
.icon-rail{width:56px; flex:none; background:#f1f3f4; padding-top:20px; display:flex; flex-direction:column; align-items:center; gap:12px;}
.rail-btn{width:36px; height:36px; border-radius:4px; border:1px solid transparent; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:6px; box-sizing:border-box; color:#767676;}
.rail-btn svg{width:24px; height:24px;}
.rail-btn.active{border-color:#0c5769; background:#f1fafb; color:#0c5769;}
.rail-btn:hover{background:#e6ebec;}

.drawer{flex:1; overflow-y:auto; display:flex; flex-direction:column; font-family:"Noto Sans","Segoe UI",sans-serif;}
.drawer .section-header{padding:20px 16px; border-bottom:1px solid #e2e6ee; display:flex; flex-direction:column; gap:4px; flex:none;}
.drawer h2{color:#0c5769; font-size:18px; font-weight:600; line-height:24px;}
.drawer .sec-desc{color:#212121; font-size:14px; line-height:20px;}
.drawer .section-body{padding:20px 16px 24px 16px; display:flex; flex-direction:column; gap:14px; flex:1;}
.collapse-all{text-align:right;}
.collapse-all a{font-size:14px; font-weight:600; color:#212121; cursor:pointer; text-decoration:none;}
.collapse-all a:hover{color:#0c5769;}
#navGroups{display:flex; flex-direction:column; gap:20px;}
.navgroup{display:flex; flex-direction:column;}
.navgroup.open{gap:12px;}
.navgroup-h{width:100%; border:none; background:transparent; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; padding:0; text-align:left; font-family:inherit;}
.navgroup-h:hover{background:transparent;}
.navgroup-h:focus-visible{outline:2px solid #00a3b8; outline-offset:1px;}
.navgroup-h .gt{font-weight:600; font-size:14px; line-height:20px; color:#585656;}
.navgroup.current .navgroup-h .gt{color:#0c5769;}   /* only the group holding the active page is teal */
.navgroup-h .chev{transition:transform .15s; color:#585656; display:flex; align-items:center; justify-content:center; width:16px; flex:none;}
.navgroup.current .navgroup-h .chev{color:#0c5769;}   /* chevron follows the header's color, teal only when current */
.navgroup.open .navgroup-h .chev{transform:rotate(180deg);}
.navgroup-items{display:none; padding:0;}
.navgroup.open .navgroup-items{display:flex; flex-direction:column; gap:8px;}
.navitem{width:100%; border:none; background:transparent; text-align:left; padding:8px 12px; margin:0; font-size:14px; color:#212121; cursor:pointer; border:1px solid transparent; border-radius:6px; line-height:20px; font-family:inherit; display:flex; align-items:flex-start; gap:8px;}
/* completion check: every item carries a quiet line-style circle check on the
   right rail; it fills in teal once the page is marked done. 16px slot,
   centered on the first 20px text line. */
.navitem .navitem-check{color:#b9c2c5; flex:none; font-size:14px; width:16px; height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.navitem .navitem-check:hover{color:#0c5769;}
.navitem .navitem-check.is-done{color:#0c5769;}
.navitem:hover{background:#eef3f4;}
.navitem.active{background:#f1fafb; border-color:#094b5a; box-shadow:0 0 2px 0 #00a3b8; color:#212121;}
.side-footer{flex:none; height:56px; padding:0 16px; display:flex; align-items:center; justify-content:flex-end; border-top:1px solid #dfdddd; background:#f9f9f9;}
.side-footer a{color:#0a5c6f; font-family:"Noto Sans","Segoe UI",sans-serif; font-weight:600; font-size:16px; line-height:24px; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.side-footer a:hover{opacity:.8;}

/* ============ MAIN AREA ============ */
.main{flex:1; overflow-y:auto; background:#fff;}
/* generous bottom padding so the floating "Mark as done" pill (fixed
   26px from the viewport bottom) never sits flush against the last
   element on long pages — without it, hovering a thumbnail near the end
   of a page like Set Up Overview Charts overlaps the pill's hit area */
.main-inner{padding:24px 36px 140px 36px; max-width:1280px;}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:8px;}
/* breadcrumbs — deliberately quiet: ancestors only, regular weight */
.crumbs{font-family:"Noto Sans",sans-serif; font-size:14px; font-weight:400; color:#8a9499; line-height:20px; padding-top:12px;}
.crumbs span.sep{margin:0 8px; color:#b9c2c5;}
.crumbs .crumb-link{color:#0c5769; text-decoration:none; cursor:pointer;}
.crumbs .crumb-link:hover{text-decoration:underline;}
.crumbs .crumb-static{color:#585656;}
/* floating sticky button — fixed to the viewport's top right so it stays
   visible while the settings page scrolls (same pattern as the "Mark as
   done" pill). Sits below overlays: clientPreview is z-index 100. */
/* pinned to the top right of the screen so it stays in reach while scrolling */
.btn-preview-client{
  position:fixed; top:14px; right:34px; z-index:50;
  border:1px solid #0a5c6f; background:#fff; border-radius:8px; padding:12px 16px; cursor:pointer; text-align:left;
  display:flex; gap:8px; align-items:flex-start; font-family:"Noto Sans","Segoe UI",sans-serif;
  box-shadow:0 4px 14px rgba(10,50,56,.18);
}
/* Settings is a takeover: the platform's global nav is hidden while it is open */
body:has(#settings.active) #globalNav{display:none;}
.btn-preview-client:hover{border-color:#0c5769; background:#f0f4f4; box-shadow:0 6px 18px rgba(10,50,56,.26);}
.btn-preview-client .btn-preview-icon{flex:none; width:20px; height:20px; margin-top:0;}
.btn-preview-client .btn-preview-text{display:flex; flex-direction:column; gap:2px;}
.btn-preview-client .t{font-weight:600; color:#0c5769; font-size:16px; line-height:20px;}
.btn-preview-client .s{font-size:14px; color:#585656; line-height:20px;}

.page-header{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.page-title{font-family:"Noto Sans",sans-serif; font-size:20px; font-weight:400; line-height:24px; color:#000; margin:0;}
.page-description{font-family:"Noto Sans",sans-serif; font-size:18px; font-weight:400; line-height:24px; color:#585656; margin:0;}
.sec-h{font-family:"Noto Sans",sans-serif; font-size:16px; font-weight:600; line-height:24px; color:#000; margin:30px 0 10px 0;}
.sec-hd{display:flex; flex-direction:column; gap:4px; margin:30px 0 10px 0;}
.sec-hd .sec-h{margin:0;}
.sec-hd .sec-desc{font-family:"Noto Sans",sans-serif; font-size:14px; font-weight:400; line-height:24px; color:#585656;}
.body-text{font-size:15px; line-height:1.55; max-width:760px; margin-bottom:10px;}
.body-text i{color:#333;}
.redpill{display:inline-block; border:1.5px solid var(--red); color:var(--red); font-weight:600; border-radius:8px; padding:10px 16px; margin:6px 0 14px 0; font-size:14.5px;}
.banner{display:flex; gap:8px; align-items:center; border:1px solid var(--info-border); background:var(--info-bg); border-radius:8px; padding:16px; margin:16px 0; font-family:"Noto Sans",sans-serif; font-size:14px; font-weight:400; line-height:24px; color:#212121; min-height:60px; box-sizing:border-box;}   /* full content width — same as the settings cards */
.banner b{font-weight:700;}
.banner.pink{border-color:var(--pink-border); background:var(--pink-bg);}
.banner .ic{flex:none; color:var(--info-border);}
.banner.pink .ic{color:var(--red);}
.warnbox{border:1px solid #c9ced0; border-radius:8px; padding:1.5rem; margin:10px 0; max-width:860px; background:#fbfbfb;}
.warnbox .wt{font-weight:700; display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.warnbox .wd{color:var(--grey); font-size:14px;}

/* parent project summary card (Import Project Data) */
.parent-card{background:#f1fafb; border:1px solid #dfdddd; border-radius:8px; padding:1.5rem; margin:10px 0; max-width:860px; display:flex; flex-direction:column; gap:4px;}
.parent-card .pc-row{display:flex; gap:6px; align-items:baseline;}
.parent-card .pc-row .k{color:#585656; font-size:14px; line-height:24px;}
.parent-card .pc-row .v{color:#212121; font-size:16px; line-height:24px; font-weight:600;}
.parent-card .pc-link{display:inline-flex; gap:8px; align-items:center; margin-top:10px; color:#0c5769; font-weight:600; font-size:16px; line-height:24px; cursor:pointer; text-decoration:none;}
.parent-card .pc-link:hover{text-decoration:underline;}

/* mark-as-done — quiet floating checkbox pill, bottom-right of every page.
   Deliberately secondary weight: completion is a state, not a page action. */
#markDone{position:fixed; right:36px; bottom:26px; z-index:90;}
.done-pill{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #959392; border-radius:20px; padding:8px 16px; box-shadow:0 2px 10px rgba(10,60,68,.15); cursor:pointer; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:14px; line-height:20px; color:#212121;}
.done-pill:hover{border-color:#0c5769;}
.done-pill input{accent-color:var(--teal); width:16px; height:16px; margin:0; cursor:pointer; flex:none;}
.done-pill.is-done{border-color:#0c5769; color:#0c5769;}

.rednote{border:1.5px solid var(--red); background:var(--red-bg); border-radius:8px; padding:12px 16px; margin:16px 0; font-size:14px; max-width:860px;}
a.fauxlink{color:var(--teal-text); font-weight:600; text-decoration:underline; cursor:pointer;}
.learn-line{margin-top:34px; font-weight:700; color:var(--teal-text); font-size:15px;}

/* controls */
/* switch sizing per Figma (Engage Designs): 36x20 track, 16px knob, 2px inset */
.toggle{position:relative; display:inline-block; width:36px; height:20px; flex:none; cursor:pointer;}
.toggle input{opacity:0; width:0; height:0;}
.toggle .tk{position:absolute; inset:0; background:#c4cbce; border-radius:20px; transition:.15s;}
.toggle .tk::before{content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.2);}
.toggle input:checked + .tk{background:var(--teal);}
.toggle input:checked + .tk::before{left:18px;}
.ctl-row{display:flex; gap:8px; align-items:flex-start; margin:16px 0; cursor:pointer;}
.ctl-row .toggle{margin-top:2px;}   /* centers the 20px switch on the 24px first text line */
.ctl-row .lbl{font-family:"Noto Sans",sans-serif; font-size:15px; line-height:24px; color:#212121;}
.ctl-row .lbl .sub{display:block; color:#585656; font-size:14px; line-height:24px; margin-top:4px; max-width:640px;}
/* toggle row with content below the label (datapairs, inputs, …) */
.toggle-group{margin:16px 0;}
.toggle-group .ctl-row{margin:0;}
.ctl-below{margin:8px 0 0 44px;}   /* 36px switch + 8px gap — lines up with the label text */
.ck{display:flex; gap:9px; align-items:flex-start; margin:9px 0; font-size:15px; cursor:pointer; line-height:1.35;}
.ck input{accent-color:var(--teal); width:17px; height:17px; margin-top:1px; flex:none; cursor:pointer;}
.ck .note{display:block; color:var(--grey); font-size:13.5px; margin-top:2px;}
.indent1{margin-left:26px;}
/* children that follow a toggle row as a sibling block line up like the
   Display Current Residence reference: 44px to the switch's label text
   (.ctl-below) + the 26px indent, with the same 8px gap under the label */
.ctl-row + .indent1{margin-left:70px; margin-top:-8px;}
.radio-line{display:flex; gap:9px; align-items:center; margin:6px 0; font-size:15px; cursor:pointer;}
.radio-line input{accent-color:var(--teal); width:17px; height:17px; margin:0; cursor:pointer;}
.indent2{margin-left:52px;}
.ck-inline{display:inline-flex; margin-right:22px;}
.radio-card{border:1.5px solid #ccd2d4; border-radius:10px; padding:1.5rem; margin:14px 0; display:flex; gap:26px; cursor:pointer; align-items:flex-start;}   /* full width, matching .hiw-card */
.radio-card:hover{border-color:var(--teal-bright);}
.radio-card.sel{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal);}
.radio-card input{accent-color:var(--teal); width:18px; height:18px; margin-top:3px; flex:none;}
.radio-card .rc-main{flex:1; min-width:0;}
.radio-card .rc-title{font-weight:600; font-size:15.5px;}
.radio-card .rc-desc{color:var(--grey); font-size:13.5px; margin-top:5px; line-height:1.5; max-width:480px;}
/* sized to its own content and anchored to the card's right edge, matching
   the Higiko card thumbnail. The old fixed 46% column left each image
   floating with ~300px of dead space beside it. Size comes from .thumb. */
.radio-card .rc-preview{flex:none;}
.radio-card .rc-preview .thumb{margin:0;}

input[type=text], input[type=number]{border:1px solid #b9c2c5; border-radius:5px; padding:9px 12px; font-size:14.5px; font-family:inherit; outline-color:var(--teal);}
/* search boxes carry the border on their WRAPPER — the inner input must
   stay borderless (the generic rule above would double-border them) */
.hm-search input[type=text], .cda-search input[type=text]{border:none; border-radius:0; padding:0; outline:none; background:transparent;}
.hm-search input[type=text]{font-size:16px;}
.cda-search input[type=text]{font-size:13.5px;}
.btn{border:1px solid #c4cbce; background:#f1f3f3; color:#555; border-radius:5px; padding:9px 18px; font-size:14px; cursor:pointer;}
.btn:hover{background:#e8ebeb;}
.btn.primary-outline{background:#fff; border:1.5px solid var(--teal); color:var(--teal-text); font-weight:600; border-radius:6px; display:inline-flex; align-items:center; gap:7px;}
.btn.primary-outline:hover{background:var(--pill-bg);}
.btn[disabled]{opacity:.55; cursor:not-allowed;}

/* Design-system buttons (Figma: GH Copilot Connect) — used on Create Custom Parameters screens.
   States follow the Figma component: default / hover / focus / pressed / disabled. */
.btn-secondary{
  display:inline-flex; align-items:center; gap:8px; min-width:28px; padding:2px 6px;
  background:#fff; border:1px solid #0a5c6f; border-radius:4px;
  font-family:"Noto Sans","Segoe UI",sans-serif; font-size:16px; line-height:24px; color:#0a5c6f;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-secondary:hover{background:#e6f4f7; border-color:#094b5a; color:#0c5769;}
.btn-secondary:focus-visible{background:#b8d3d9; border-color:#0c5769; color:#0c5769; outline:none; box-shadow:0 0 2px #00a3b8;}
.btn-secondary:active{background:#094b5a; border-color:#094b5a; color:#fff;}
.btn-secondary[disabled]{background:#fff; border-color:#5f6368; color:#5f6368; cursor:not-allowed;}
.btn-secondary i{font-size:16px;}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:28px; padding:2px 6px;
  background:#0c5769; border:1px solid transparent; border-radius:6px;
  font-family:"Noto Sans","Segoe UI",sans-serif; font-size:14px; font-weight:600; line-height:24px; color:#fff;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{background:#e6f4f7; color:#0c5769;}
.btn-primary:focus-visible{background:#0c5769; border-color:#0c7186; color:#fff; outline:none; box-shadow:0 0 2px #00a3b8;}
.btn-primary:active{background:#094b5a; color:#fff;}
.btn-primary[disabled]{background:#efefef; color:#5f6368; font-weight:400; cursor:not-allowed;}
select{border:1px solid #b9c2c5; border-radius:5px 0 0 5px; padding:9px 8px; font-size:14.5px; color:var(--teal-text); font-weight:600; font-family:inherit; background:#fff;}
/* fused scope-dropdown + search control (Copy Project Settings):
   one bordered container — select segment | divider | search segment.
   Only the segment that holds focus tints teal; the two halves are
   independent controls that happen to share a border. */
.search-combo{display:flex; align-items:center; max-width:700px; height:40px; background:#fff; border:1px solid #767676; border-radius:4px;}
.search-combo .sc-select{position:relative; display:inline-flex; align-items:center; gap:8px; height:100%; padding:0 12px; cursor:pointer; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:16px; line-height:24px; color:#0c5769; white-space:nowrap; border-radius:3px 0 0 3px; transition:background-color .15s;}
.search-combo .sc-select:focus-within{background:#f1fafb;}
.search-combo .sc-select select{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer;}
.search-combo .sc-chev{display:flex; color:#0c5769; font-size:13px;}
.search-combo .sc-div{width:1px; align-self:stretch; background:#dfdddd;}
.search-combo .sc-search{flex:1; display:flex; align-items:center; height:100%; border-radius:0 3px 3px 0; transition:background-color .15s;}
.search-combo .sc-search:focus-within{background:#f1fafb;}
.search-combo .search-ico{display:flex; align-items:center; justify-content:center; flex:none; width:20px; height:24px; margin-left:10px;}
.search-combo input{border:none; outline:none; flex:1; padding:0 12px 0 8px; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:16px; line-height:24px; color:#212121; background:transparent;}
.search-combo input::placeholder{color:#767676;}
/* engagement typeahead results */
.search-combo{position:relative;}
.eng-results{display:none; position:absolute; top:calc(100% + 2px); left:0; right:0; background:#fff; border:1px solid #dfdddd; border-radius:4px; box-shadow:0 10px 30px rgba(10,50,56,.2); max-height:320px; overflow-y:auto; z-index:60;}
.eng-results.open{display:block;}
.eng-item{position:relative; padding:10px 44px 10px 14px; border-bottom:1px solid #f0f2f3; cursor:pointer; font-family:"Noto Sans","Segoe UI",sans-serif;}
.eng-item:last-child{border-bottom:none;}
.eng-l1{font-size:14.5px; font-weight:600; color:#0c5769; line-height:20px;}
.eng-l2{font-size:13.5px; color:#212121; line-height:19px;}
.eng-item:hover{background:#212121;}
.eng-item:hover .eng-l1, .eng-item:hover .eng-l2{color:#fff;}
.eng-item.unavailable{cursor:default;}
.eng-item.unavailable .eng-l1, .eng-item.unavailable .eng-l2{color:#8a9499;}
.eng-item.unavailable:hover{background:#8f8f8f;}
.eng-item.unavailable:hover .eng-l1, .eng-item.unavailable:hover .eng-l2{color:#fff;}
.eng-info{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#767676; font-size:15px;}
.eng-item.unavailable:hover .eng-info{color:#fff;}
.eng-empty{padding:12px 14px; font-size:13.5px; color:var(--grey);}
/* incompatibility tooltip — floats over the control, as in the reference */
.eng-tip{display:none; position:absolute; top:5px; left:210px; z-index:70; background:#fff; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.28); padding:8px 12px; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:13.5px; color:#212121; white-space:nowrap; pointer-events:none;}
.eng-tip.show{display:block;}
/* copy result summary — shown once settings have been applied */
.copy-result{background:#eef6fe; border:1px solid #dfdddd; border-radius:10px; padding:20px; margin-top:10px; max-width:700px; font-family:"Noto Sans","Segoe UI",sans-serif;}
.copy-result .cr-cols{display:flex; gap:48px; flex-wrap:wrap;}
.copy-result .cr-col{flex:1; min-width:240px;}
.cr-h{font-size:14px; font-weight:600; color:#212121; line-height:20px; margin-bottom:10px;}
.cr-list{display:flex; flex-direction:column; gap:7px;}
.cr-item{display:flex; gap:9px; align-items:center; font-size:14px; line-height:20px; color:#212121;}
.cr-item.ok i{color:#1da750; font-size:15px;}
.cr-item.skip i{color:#8a9499; font-size:15px;}
.cr-item.skip{color:#585656;}

.previewimg{border:1px solid #dfe3e4; border-radius:4px; width:auto; max-width:100%; height:auto; max-height:100px; display:block; box-shadow:0 1px 6px rgba(0,0,0,.08); cursor:zoom-in; transition:box-shadow .15s;}
.previewimg:hover{box-shadow:0 3px 14px rgba(10,60,68,.25);}
.thumb{display:inline-block; margin:12px 0; cursor:pointer;}
/* one thumbnail size everywhere on the site — capped on both axes so a
   thumbnail never drives the height of whatever contains it, and so
   screenshots with different aspect ratios still line up in a column */
.thumb img{border:1px solid #dfe3e4; border-radius:8px; width:auto; height:auto; max-height:80px; max-width:140px; display:block; box-shadow:0 1px 6px rgba(0,0,0,.08); transition:box-shadow .15s;}
.thumb img:hover{box-shadow:0 3px 14px rgba(10,60,68,.25);}

/* image skeleton loader — shimmer + reserved size until the image arrives,
   so the layout doesn't jump while pages load (class added in app.js) */
.img-loading{background:#eceff1 linear-gradient(90deg,#eceff1 25%,#f6f8f9 50%,#eceff1 75%); background-size:400% 100%; animation:imgskel 1.2s ease-in-out infinite;}
@keyframes imgskel{0%{background-position:100% 0}100%{background-position:-100% 0}}
.thumb img.img-loading{width:140px; height:80px;}
.previewimg.img-loading{width:178px; height:100px;}
.thumb .thumb-label{font-size:13px; color:#0c5769; margin-top:6px;}

/* How it Works card */
.hiw-card{background:#eef6fe; border:1px solid #e8e8e8; border-radius:8px; padding:1.5rem; margin:20px 0 16px 0;}
.hiw-card .sec-h{margin:0 0 8px 0;}
.hiw-card .sec-desc{font-family:"Noto Sans",sans-serif; font-size:14px; font-weight:400; line-height:20px; color:#585656; margin:0;}
.hiw-card .thumb{margin:24px 0 0 0;}
.hiw-card .thumb .thumb-label{text-align:left;}
/* .hiw-side: text and hover-to-preview share one line — heading + text in the
   left column, thumb in the right — instead of the thumb stacking below */
.hiw-card.hiw-side{display:grid; grid-template-columns:1fr auto; column-gap:32px;}
.hiw-card.hiw-side .thumb{grid-column:2; grid-row:1 / span 2; align-self:center; margin:0;}

/* "Higiko" card — bordered container for a settings section, with its
   preview thumbnail sitting in its own column at the top right instead of
   its own 50/50 column, so the thumbnail visually reads as part of the
   section instead of a disconnected block far off to the side. Flexbox
   (not absolute positioning) so the card always grows to contain whichever
   is taller, the body or the thumbnail — a short body no longer lets the
   thumbnail poke out past the card's bottom edge. */
.higiko{display:flex; flex-direction:row-reverse; gap:24px; align-items:flex-start; border:1px solid #dfdddd; border-radius:8px; padding:1.5rem; margin-top:20px;}
.higiko .card-body{flex:1; min-width:0; text-align:left;}
/* wrapper for any table that can't shrink below its own min-width (nowrap
   cells, an explicit min-width). Without it the table bursts through the
   right edge of whatever card contains it once the window narrows; with it
   the table scrolls inside its own container and the card stays intact. */
.table-scroll{overflow-x:auto; max-width:100%;}
/* generic two-column layout for a card body — e.g. Print Pages, where the
   toggle list is long enough to want splitting side by side */
.card-cols{display:flex; gap:48px; align-items:flex-start;}
.card-cols > div{flex:1; min-width:0;}
/* tighter row spacing for dense toggle lists — scoped opt-in so it doesn't
   affect toggleRow's normal 16px/24px rhythm used everywhere else */
.tight-toggles .ctl-row{margin:8px 0;}
.tight-toggles .ctl-row .lbl{line-height:20px;}
.tight-toggles hr.hr-soft{margin:10px 0;}
/* toggle row paired with its own inline thumbnail, side by side */
.row-thumb{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
/* only the row's own toggle loses its margin — toggles nested deeper inside
   (e.g. in a .nest block) keep their normal 16px spacing */
.row-thumb > .ctl-row, .row-thumb > .toggle-group{flex:1; min-width:0; margin:0;}
.row-thumb .thumb{flex:none; margin:0;}
/* the title is always the card-body's first element — zero its top margin
   so its top edge lines up with the thumbnail's top:24px instead of
   sec-h/sec-hd's usual 30px, which is meant for spacing after other content */
.higiko .card-body > .sec-hd, .higiko .card-body > .sec-h{margin-top:0;}
.higiko .card-thumb{flex:none; margin:0;}
.higiko .card-thumb .thumb{margin:0;}
/* side-by-side lists inside a How it Works card (e.g. copied vs not-copied settings) */
.hiw-card .hiw-lists{display:flex; gap:64px; margin-top:12px; flex-wrap:wrap;}
.hiw-card .hiw-list-h{font-weight:600; color:#212121; margin-bottom:6px;}
.hiw-card .hiw-lists ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:2px;}
/* access-level explainer columns (Grant Access) — each headed by a demo of
   the actual None/Restricted/Full control with that level selected */
.hiw-card .hiw-access{display:flex; gap:32px; margin-top:14px; flex-wrap:wrap; align-items:flex-start;}
.hiw-card .hiw-access-col{flex:1; min-width:230px; display:flex; flex-direction:column; gap:8px;}
.hiw-card .hiw-access ul{margin:4px 0 0 0; padding-left:18px; display:flex; flex-direction:column; gap:2px;}
.seg-ctrl.seg-demo{pointer-events:none; align-self:flex-start; background:#fff;}

/* gear popover (Project Settings) */
#gearPop{
  display:none; position:fixed; top:0; left:311px; width:376px; z-index:80;
  background:#fff; border:1px solid var(--line); border-top:none;
  box-shadow:6px 8px 28px rgba(10,50,56,.18); border-radius:0 0 10px 10px;
}
#gearPop.open{display:block;}
.gp-head{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line);}
.gp-head .gp-t{font-size:15.5px; font-weight:600; color:var(--ink);}
.gp-close{border:none; background:none; cursor:pointer; color:var(--teal-text); display:flex; padding:4px;}
.gp-close:hover{opacity:.7;}
.gp-body{padding:8px 18px 16px 18px;}
.gp-retake{display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--teal-text); cursor:pointer;}
.gp-retake:hover{text-decoration:underline;}
/* the walkthrough's gear step opens the popover: above the scrim, display-only */
#gearPop.walk-lift{z-index:401; pointer-events:none;}

/* lightbox */
#lightbox{display:none; position:fixed; inset:0; background:rgba(8,22,25,.85); z-index:300; align-items:center; justify-content:center; padding:34px; cursor:zoom-out; pointer-events:none;}
#lightbox.open{display:flex; animation:lbFade .2s ease-out;}
#lightbox.open img{animation:lbZoom .2s ease-out;}
@keyframes lbFade{from{opacity:0}}
@keyframes lbZoom{from{opacity:0; transform:scale(.96)}}
#lightbox img{max-width:94vw; max-height:90vh; height:auto; border-radius:8px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.5); pointer-events:none;}
#lightbox .lb-close{position:fixed; top:16px; right:20px; background:#fff; border:none; border-radius:8px; padding:8px 16px; font-weight:700; color:var(--teal-text); cursor:pointer; font-size:14px; pointer-events:auto;}
.pv-cap{font-size:15px; margin:18px 0 8px 0; color:var(--ink);}
/* preview image + controls always share one row:
   controls column is a fixed width on every page, image flexes into the rest */
.split{display:flex; gap:40px; align-items:flex-start; margin-top:8px; flex-wrap:nowrap;}
.split .col-l{flex:0 1 530px; min-width:0;}
.split .col-r{flex:1 1 0; min-width:0;}
/* datapair spacing/sizing per Figma: 48px between pairs, 14/24 key over 16/24 value, no extra gap */
.datapair{display:flex; gap:48px; margin:0;}
.datapair .dp .k{color:var(--grey); font-size:14px; line-height:24px;}
.datapair .dp .v{font-size:16px; line-height:24px; margin-top:0;}
.hr-soft{border:none; border-top:1px solid var(--line); margin:12px 0;}
.charcount{font-size:12px; color:var(--grey); text-align:right; margin-top:4px;}
.hint-teal{color:#0c5769; font-weight:600; font-size:16px; line-height:24px; margin:8px 0 12px 0;}
.hint-teal a{text-decoration:underline;}

/* list rows (subtabs / groups) */
.rowlist{max-width:640px;}
.rowitem{display:flex; align-items:center; gap:12px; padding:9px 0;}
.rowitem input[type=checkbox]{accent-color:var(--teal); width:17px; height:17px; flex:none;}
.rowitem .rname{flex:1; border:none; border-bottom:1px solid #9aa4a8; font-size:15px; padding:4px 2px; outline:none; background:transparent; border-radius:0;}
.rowitem .ric{color:#4a565b; cursor:grab; display:flex; align-items:center;}
.rowitem .rdel{border:1.5px solid var(--teal); border-radius:6px; background:#fff; color:var(--teal); width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.rowitem .rdel:hover{background:var(--pill-bg);}
.rowitem .rlock{color:#6a767b; display:flex; width:30px; justify-content:center; align-items:center;}
.rowitem.dragging{opacity:.45;}
.rowitem.drop-target{box-shadow:0 -2px 0 0 var(--teal);}
.row-actions{display:flex; justify-content:space-between; align-items:center; margin:10px 0 4px 0; max-width:640px;}
/* Customization pages: the "Add New … / Save" row sits directly under the
   How-it-works card, so give it breathing room from the card above and the
   list (or criteria cards) below. */
.hiw-card + .row-actions{margin:30px 0 20px 0;}

/* child controls under a "Display …" toggle: aligned with the toggle's label
   text (36px switch + 8px gap), matching the Display Current Residence
   pattern — and NOT part of the generic parent<->child checkbox sync
   (wireControls), so the toggle keeps its own state independent of them */
.nest{margin-left:44px;}
/* inert while the section's toggle is off */
.nest-off{opacity:.45; pointer-events:none;}
/* a section row inside a card: content left, its thumbnail top-right */
.rt-main{flex:1; min-width:0;}
/* two hover-to-preview thumbnails side by side at a row's end */
.thumb-pair{display:flex; gap:14px; flex:none; align-items:flex-start;}
.thumb-pair .thumb{margin:0;}

/* nested card inside a settings card (e.g. Header Details > Subsections):
   its own border, a title, the tabs underneath, and a secondary title
   naming the open subsection above that tab's toggles */
.subcard{border:1px solid #dfdddd; border-radius:8px; padding:1.25rem 1.5rem 1.5rem; margin:16px 0;}
.subcard > .sec-h{margin:0 0 12px 0;}
.subcard .subtle-tabs{margin:12px 0 16px 0; max-width:none;}   /* the tab strip runs the full width of the card */
.subcard .grouplbl{margin:0 0 2px 0;}
/* open tab's body: toggles on the left, the subsection's thumbnail top-right */
.subcard-tabbody{display:flex; gap:28px; align-items:flex-start;}
.subcard-tabmain{flex:1; min-width:0;}
.subcard-tabbody > .thumb{flex:none; margin:0;}
.subtle-tabs{display:flex; gap:28px; border-bottom:1px solid var(--line); margin:30px 0 16px 0; max-width:760px;}
.subtle-tab{padding:8px 2px; font-size:14.5px; cursor:pointer; border-bottom:3px solid transparent; color:var(--grey);}
.subtle-tab.on{border-bottom-color:var(--teal); color:var(--ink); font-weight:600;}

.two-col{display:flex; gap:70px; flex-wrap:wrap;}
.two-col > div{min-width:320px;}
.grouplbl{font-weight:700; font-size:15px; margin-bottom:4px;}
.groupsub{color:#0c5769; font-size:14px; margin-bottom:8px;}

/* print chips preview */
.chips{display:inline-flex; gap:8px; align-items:center; background:#fbfbfb; border:1px solid #eee; padding:8px 10px; border-radius:6px;}
.chip{border:1.5px solid var(--teal); color:var(--ink); border-radius:6px; padding:6px 12px; font-size:13.5px; background:#fff;}
.chip.icon{padding:6px 8px; color:var(--teal); display:flex;}

/* evaluation criteria cards */
.ec-card{border:1px solid #dfe3e4; border-radius:10px; padding:18px 22px; margin:16px 0; max-width:1180px; box-shadow:0 1px 4px rgba(0,0,0,.05);}
.ec-namewrap{position:relative;}
.ec-name{width:100%; border:none; border-bottom:1px solid #c4cbce; background:#f1f2f3; font-size:15.5px; padding:8px 12px; outline-color:var(--teal); border-radius:3px 3px 0 0; font-family:inherit;}
.ec-descrow{display:flex; gap:18px; align-items:center; margin-top:18px;}
.ec-descwrap{flex:1;}
.ec-scorerow{display:flex; gap:26px; align-items:center; margin-top:18px; flex-wrap:wrap;}
.ec-scorelbl{font-weight:600; font-size:15px;}
.ec-scores{display:flex; min-width:420px; max-width:560px; flex:1;}
.ec-scores .ec-score{flex:1; text-align:center; padding:9px 0; font-size:15px; cursor:pointer; background:#cfe4f9; border-right:1px solid rgba(255,255,255,.6); user-select:none;}
.ec-scores .ec-score:first-child{border-radius:5px 0 0 5px;}
.ec-scores .ec-score:last-child{border-radius:0 5px 5px 0; border-right:none;}
.ec-scores .ec-score:hover{background:#b7d7f4;}
.ec-scores .ec-score.sel{background:var(--teal); color:#fff; font-weight:700;}
.ec-scores.na .ec-score{background:transparent; cursor:default; color:var(--ink);}
.ec-scores.na .ec-score:hover{background:transparent;}

/* team members print table */
.tm-table{border-collapse:collapse; margin-top:14px; min-width:640px; max-width:900px; width:70%;}
.tm-table th{text-align:left; font-weight:400; color:var(--grey); font-size:13.5px; padding:8px 14px 8px 2px; border-bottom:1px solid var(--line);}
.tm-table td{padding:10px 14px 10px 2px; border-bottom:1px solid #eef1f2; font-size:14.5px;}
.tm-table td:last-child{width:120px;}

/* doc visibility per profile table */
.dv-table{border-collapse:separate; border-spacing:0; margin-top:14px; width:100%; max-width:1100px;}
.dv-table th{font-weight:400; color:var(--grey); font-size:13px; padding:8px 6px; border-bottom:1px solid var(--line); border-top:1px solid var(--line); vertical-align:top; text-align:center; line-height:1.3;}
.dv-table th:first-child,.dv-table th:nth-child(2),.dv-table th:nth-child(3),.dv-table th:nth-child(4){text-align:left;}
.dv-table td{padding:10px 6px; border-bottom:1px solid #eef1f2; font-size:14px; text-align:center; vertical-align:middle;}
.dv-table td:first-child{text-align:left; font-weight:400;}
.dv-table td:nth-child(2){text-align:center; color:var(--grey); font-size:12px; text-transform:uppercase;}
.dv-table td:nth-child(3),.dv-table td:nth-child(4){text-align:left; color:var(--grey); font-size:13px;}
.dv-table .dv-hdr-ck{display:flex; flex-direction:column; align-items:center; gap:6px;}
.dv-table input[type="checkbox"]{width:18px; height:18px; accent-color:var(--teal);}
/* JS-managed fixed clone (see initStickyHeaders in app.js) — position:sticky
   on <th>/<thead> doesn't stick in any tested browser once the table sits in
   a scrolling ancestor, so the header row is cloned into a fixed bar that's
   shown only while the real header is scrolled out of view. */
.sticky-thead-clone,.sticky-thead-clone th{background:#fff;}
.sticky-thead-clone{box-shadow:0 2px 8px rgba(0,0,0,.12);}
.dv-filter{display:flex; gap:8px; align-items:flex-end; margin-bottom:16px;}
/* filter-bar controls share one 40px height (matching the search bar) */
.dv-filter .sel-drop .sel-input, .dv-filter .btn-sort{height:40px;}

/* select dropdown component */
.sel-drop{display:inline-flex; flex-direction:column; align-items:stretch; gap:4px;}
.sel-drop .sel-label{font-size:14px; line-height:24px; color:#000;}
.sel-drop .sel-input{position:relative; display:flex; align-items:center; gap:8px; height:36px; min-width:160px; padding:0 10px; background:#fff; border:1px solid #959392; border-radius:4px; cursor:pointer; font-family:"Noto Sans",sans-serif; font-size:16px; line-height:24px; color:#212121;}
.sel-drop .sel-input .sel-placeholder{color:#6b7280;}
.sel-drop .sel-input .sel-text{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sel-drop .sel-input .sel-chev{flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:#959392;}
.sel-drop .sel-input select{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; font-size:16px;}

/* sort button component */
.btn-sort{display:inline-flex; align-items:center; gap:8px; height:36px; min-width:36px; padding:0 8px; background:#fff; border:1px solid #959392; border-radius:4px; cursor:pointer; font-family:"Noto Sans",sans-serif; font-size:16px; line-height:24px; color:#212121;}
.btn-sort:hover{background:#f5f5f5;}
.btn-sort .sort-ico{color:#0c5769; font-size:18px;}
.btn-sort .sort-chev{color:#959392; font-size:14px;}

/* search button component */
/* multi-select dropdown — selectDrop look, opens a checkbox list */
.msel .sel-input{position:relative;}
.msel-pop{display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:100%; background:#fff; border:1px solid #959392; border-radius:4px; box-shadow:0 6px 18px rgba(10,50,56,.15); padding:6px 0; z-index:40;}
.msel.open .msel-pop{display:block;}
.msel-item{display:flex; gap:8px; align-items:center; padding:6px 12px; font-size:14px; cursor:pointer; white-space:nowrap;}
.msel-item:hover{background:#eef6f8;}
.msel-item input{accent-color:var(--teal); width:16px; height:16px; margin:0;}
/* selection count chip + clear controls */
.msel-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid #959392; border-radius:12px; padding:0 4px 0 10px; font-size:14px; line-height:22px; color:#212121; background:#fff;}
.msel-chip .msel-chip-x{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; color:#585656; font-size:12px;}
.msel-chip .msel-chip-x:hover{background:#eee;}
.msel-clear{display:none; width:20px; height:20px; align-items:center; justify-content:center; color:#585656; cursor:pointer; flex:none;}
.msel-clear:hover{color:#212121;}

/* sort dropdown menu */
.sort-drop{position:relative; display:inline-flex;}
.sort-pop{display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:200px; max-height:264px; overflow-y:auto; background:#fff; border-radius:8px; box-shadow:0 8px 24px rgba(10,50,56,.25); z-index:40;}
.sort-drop.open .sort-pop{display:block;}
.sort-opt{display:block; width:100%; border:none; background:#fff; text-align:left; padding:12px 16px; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:15px; line-height:20px; color:#0c5769; cursor:pointer;}
.sort-opt:hover{background:#eef6f8;}
.sort-opt.on{background:#0c5769; color:#fff;}

/* select profiles table */
/* ---- first-open walkthrough: scrim + spotlight + feature card ---- */
#walkthrough .walk-scrim{position:fixed; inset:0; background:rgba(33,33,33,.45); z-index:400;}
/* spotlighted UI is display-only during the tour: raised above the scrim but
   not clickable, so Next / Skip are the only ways forward */
.walk-spot{position:relative; z-index:401; box-shadow:0 0 0 5px rgba(255,255,255,.92), 0 6px 22px rgba(0,0,0,.3); border-radius:8px; pointer-events:none;}
.walk-card{position:fixed; z-index:402; width:374px; background:#fff; border:1.5px solid var(--teal); border-radius:10px; padding:22px 24px 18px 24px; box-shadow:0 10px 34px rgba(0,0,0,.28); font-family:"Noto Sans",sans-serif;}
.walk-title{font-weight:700; font-size:17px; color:#212121;}
.walk-feature{color:#0c5769; font-weight:700; font-size:16.5px; margin:18px 0 8px 0;}
/* the welcome heading only opens step 1; later cards lead with the feature */
.walk-card .walk-feature:first-child{margin-top:0;}
.walk-text{font-size:14.5px; line-height:22px; color:#212121;}
.walk-foot{display:flex; justify-content:space-between; align-items:center; margin-top:22px;}
.walk-count{color:#585656; font-size:13.5px;}
.walk-btn{background:#0e606b; color:#fff; padding:8px 16px; border-radius:6px; cursor:pointer; font-size:14.5px; font-weight:600; display:inline-flex; gap:8px; align-items:center;}
.walk-btn:hover{background:#0c5460;}
.walk-skip{text-align:right; margin-top:10px;}
.walk-skip a{color:#585656; font-size:13px; cursor:pointer;}
.walk-skip a:hover{text-decoration:underline; color:#212121;}
.walk-actions{display:inline-flex; align-items:center; gap:16px;}
.walk-back{color:#0c5769; font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; gap:6px; align-items:center;}
.walk-back:hover{text-decoration:underline;}
/* Retake sits with Exit Setup in the sidebar footer */

/* out-of-service settings page: sidebar item muted and inert, page body
   covered by a frosted overlay that blocks interaction */
.navitem.locked{opacity:.45; pointer-events:none; padding-left:34px;}
.page-locked{position:relative;}
.page-locked-cover{position:absolute; inset:0; background:rgba(255,255,255,.62); backdrop-filter:blur(1.5px); z-index:5; cursor:not-allowed;}

/* Profile-Level Visibility tables: the page around them stays put — the rows
   scroll inside the wrap while the header row (and its column toggles) stays
   pinned on top. Sized so the whole wrap fits the viewport below the filter
   bar; on short windows the 320px floor applies and the page scrolls again. */
.pv-tablewrap{overflow:auto; max-height:max(320px, calc(100vh - 580px)); margin-top:14px;}
.pv-tablewrap .sp-table,.pv-tablewrap .dv-table{margin-top:0;}
.pv-tablewrap thead th{position:sticky; top:0; background:#fff; z-index:2;}
.sp-table{border-collapse:separate; border-spacing:0; margin-top:14px; width:100%; max-width:900px;}
.sp-table th{font-weight:400; color:var(--grey); font-size:13px; padding:8px 10px; border-bottom:1px solid var(--line); border-top:1px solid var(--line); vertical-align:bottom; text-align:left;}
.sp-table td{padding:12px 10px; border-bottom:1px solid #eef1f2; font-size:14px; vertical-align:middle;}
.sp-table td:nth-child(2){color:var(--grey); font-size:12px; text-transform:uppercase;}
.sp-table td:nth-child(3),.sp-table td:nth-child(4){color:var(--grey); font-size:13px;}
.sp-table th.sp-toggle-col,.sp-table td.sp-toggle-col{text-align:center;}
.sp-table .sp-hdr-toggle{display:flex; flex-direction:column; align-items:center; gap:4px;}
.sp-table .toggle{display:inline-block;}

/* grant access table */
/* grant access table — row spec from Figma: 12px vertical padding, #dfdddd
   row borders, 16/24 #212121 text, 12px gaps between cells */
.ga-table{border-collapse:collapse; margin-top:14px; width:100%; max-width:1100px;}
.ga-table th{font-weight:400; color:var(--grey); font-size:13px; padding:8px 12px; border-bottom:1px solid #dfdddd; vertical-align:bottom; text-align:left; white-space:nowrap;}
.ga-table th:first-child{padding-left:16px;}
.ga-table td{padding:12px; border-bottom:1px solid #dfdddd; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:16px; line-height:24px; color:#212121; vertical-align:middle; white-space:nowrap;}
.ga-table td:first-child{padding-left:16px;}
.ga-table td.ga-email{max-width:180px; overflow:hidden; text-overflow:ellipsis;}
.ga-table td.ga-role{max-width:50px;}
.ga-table td.ga-access-text{text-align:left;}
.ga-table .btn-secondary{font-size:14px;}   /* Send Invitation */
/* table lock — overlay that blocks interaction until the project is published */
.table-lock{position:relative; max-width:1100px;}
.table-lock-overlay{position:absolute; inset:0; background:rgba(255,255,255,.55); z-index:5; cursor:not-allowed;}
/* sortable column header */
.th-sort{cursor:pointer; user-select:none;}
.th-sort:hover{color:#212121;}
.th-sort .th-sort-ico{margin-left:4px; color:#00a3b8;}
/* segmented control — 28px segments, #959392 borders, teal active fill */
.seg-ctrl{display:inline-flex; border:1px solid #959392; border-radius:4px; overflow:hidden;}
.seg-ctrl button{border:none; background:#fff; height:28px; padding:0 6px; min-width:52px; font-size:14px; font-family:"Noto Sans","Segoe UI",sans-serif; cursor:pointer; color:#212121; border-right:1px solid #959392; line-height:20px; transition:background-color .15s ease, color .15s ease;}
.seg-ctrl button:last-child{border-right:none;}
.seg-ctrl button:hover{background:#f0f0f0;}
.seg-ctrl button.seg-active{background:#0c5769; color:#fff; font-weight:600;}
.seg-ctrl.seg-disabled button{opacity:.5; pointer-events:none;}
/* registration email preview modal (Grant Access > Send Invitation) */
#inviteModal, #unpublishModal{display:none; position:fixed; inset:0; background:rgba(8,22,25,.5); z-index:150; align-items:flex-start; justify-content:center; padding:40px 20px; overflow:auto;}
#inviteModal.open, #unpublishModal.open{display:flex;}
.im-card{background:#fff; border-radius:12px; max-width:680px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,.35); font-family:"Noto Sans","Segoe UI",sans-serif; animation:lbZoom .2s ease-out;}
.im-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line);}
.im-title{display:flex; align-items:center; gap:12px; font-size:19px; font-weight:600; color:#212121;}
.im-close{border:none; background:none; cursor:pointer; color:#0c7186; font-size:18px; padding:4px; display:flex;}
.im-close:hover{opacity:.7;}
.im-body{padding:20px 24px 24px 24px;}
.im-meta{display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:15px; color:#212121;}
.im-meta .k{display:inline-block; width:72px; color:#212121;}
.im-hero{background:linear-gradient(115deg,#e9e7e3 0%,#f7f6f4 45%,#d9d7d3 100%); border-radius:2px; height:170px; display:flex; align-items:center; padding:0 28px;}
.im-logo{display:inline-flex; align-items:center; gap:10px; color:#1d1d1b;}
.im-mark{font-size:44px; font-weight:700; line-height:1; font-family:Georgia,"Times New Roman",serif;}
.im-logotype{font-size:15px; line-height:17px; font-weight:600; letter-spacing:.2px;}
.im-logotype .im-assoc{display:block; font-size:8px; font-weight:700; letter-spacing:2px; margin-top:2px;}
.im-logo-sm .im-mark{font-size:26px;}
.im-logo-sm .im-logotype{font-size:10px; line-height:11px;}
.im-logo-sm .im-assoc{font-size:6px; letter-spacing:1.2px; margin-top:1px;}
.im-text{font-size:14.5px; line-height:1.55; color:#212121; margin-top:18px;}
.im-text p{margin:0 0 14px 0;}
.im-text ol{margin:0 0 14px 0; padding-left:20px; display:flex; flex-direction:column; gap:6px;}
.im-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; background:#e9e9e9; padding:14px 18px; margin-top:6px;}
.im-conf{font-size:12.5px; color:#3a3a3a;}
.im-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.im-actions .btn-secondary, .im-actions .btn-primary, .im-actions .btn-danger{padding:8px 18px; font-size:16px;}
/* welcome card (Settings cover v2) — full-width, sits under the page title
   above Project Information. Dismissible via .wh-close; see
   dismissWelcomeCard() in app.js — the dismissal is session-only. */
.wh-card{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; background:#f1fafb; border:1px solid #0c5769; border-radius:10px; padding:18px 48px 18px 26px; width:100%; max-width:1100px; box-sizing:border-box;}
.wh-card .wh-card-text{flex:1 1 240px; min-width:0;}
.wh-title{font-size:18px; font-weight:600; line-height:24px; color:#0c5769;}
.wh-sub{font-size:14px; line-height:20px; color:#585656; margin-top:4px;}
.wh-card .wh-cta{flex:none; margin-top:0; padding:8px 16px; font-size:14px; white-space:nowrap;}
.wh-close{position:absolute; top:8px; right:8px; border:none; background:none; cursor:pointer; color:#585656; padding:4px; display:flex; border-radius:4px; font-size:13px;}
.wh-close:hover{color:#0c5769; background:rgba(12,87,105,.08);}
.welcome-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; max-width:1100px; margin-top:22px;}
.wc-card{background:#fff; border:1px solid #dfdddd; border-radius:10px; padding:22px; text-align:left; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-family:"Noto Sans","Segoe UI",sans-serif; transition:border-color .15s ease, box-shadow .15s ease;}
.wc-card:hover{border-color:#0c5769; box-shadow:0 4px 14px rgba(10,60,68,.12);}
.wc-ico{width:44px; height:44px; border-radius:10px; background:#f1fafb; color:#0c5769; display:flex; align-items:center; justify-content:center;}
.wc-ico svg{width:24px; height:24px;}
.wc-title{font-size:16px; font-weight:600; color:#212121;}
.wc-desc{font-size:14px; line-height:20px; color:#585656;}
/* facts band — compact read-only project reference (Tamako, condensed) */
.facts-band{border:1px solid #dfdddd; border-radius:10px; background:#fff; padding:16px 20px 24px 20px; max-width:1100px; margin-top:22px; font-family:"Noto Sans","Segoe UI",sans-serif;}
.facts-title{font-size:16px; font-weight:600; line-height:24px; color:#212121; margin-bottom:2px;}
.facts-band .ed-table{margin-top:10px;}
.facts-links{display:flex; gap:32px; margin-top:14px; flex-wrap:wrap;}
.facts-link{display:inline-flex; align-items:center; gap:8px; color:#0c5769; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none;}
.facts-link:hover{text-decoration:underline;}
.facts-link .facts-chev{transition:transform .15s; font-size:12px;}
.facts-link.open .facts-chev{transform:rotate(180deg);}
.facts-team{margin-top:18px; padding-top:16px; border-top:1px solid #eef1f2;}

/* engagement details — read-only project facts (Project Setup page).
   Same row spec as the Figma engagement-details table. */
.ed-table{border-collapse:collapse; width:100%; max-width:1100px; margin-top:4px;}
.ed-table th{font-weight:400; color:#585656; font-size:14px; line-height:24px; text-align:left; padding:0 16px 12px 16px; white-space:nowrap;}
.ed-table td{font-family:"Noto Sans","Segoe UI",sans-serif; font-size:16px; line-height:24px; color:#212121; padding:12px 16px; border-top:1px solid #dfdddd; border-bottom:1px solid #dfdddd; white-space:nowrap;}

/* project team table (Project Settings cover page) */
.team-table{border-collapse:collapse; width:100%; max-width:640px;}
.team-table th{text-align:left; font-weight:400; color:#585656; font-size:13.5px; padding:0 10px 8px 2px; border-bottom:1px solid #dfdddd;}
.team-table td{padding:9px 10px 9px 2px; border-bottom:1px solid #eef1f2; font-size:14.5px; color:#212121;}

/* unpublish confirmation */
.um-card{max-width:460px;}
.um-body{padding:20px 24px 24px 24px; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:16px; line-height:24px; color:#212121;}
.um-body p{margin:0 0 16px 0;}
/* danger button — destructive confirmations */
.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:28px; padding:2px 6px;
  background:#c7115c; border:1px solid transparent; border-radius:6px;
  font-family:"Noto Sans","Segoe UI",sans-serif; font-size:14px; font-weight:600; line-height:24px; color:#fff;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-danger:hover{background:#a80e4e;}
.btn-danger:active{background:#8f0b42;}
.btn-danger:focus-visible{border-color:#e0447f; outline:none; box-shadow:0 0 2px #c7115c;}

.placeholder-box{border:1.5px dashed #b9c2c5; border-radius:10px; padding:26px 28px; color:var(--grey); max-width:860px; margin-top:22px; background:#fcfdfd;}
.placeholder-box b{color:var(--ink);}

/* client preview — full screen takeover */
#clientPreview{display:none; position:fixed; inset:0; z-index:100; background:#fff; flex-direction:column;}
#clientPreview.open{display:flex;}
.cp-bar{flex:none; height:46px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 18px;}
.cp-bar .cp-title{display:flex; align-items:center; gap:11px; font-size:15.5px; font-weight:600;}
.cp-exit{display:flex; align-items:center; gap:9px; color:#fff; font-size:14px; font-weight:600; cursor:pointer; background:none; border:none; padding:6px 4px;}
.cp-exit:hover{opacity:.82;}
.cp-content{flex:1; overflow:auto; background:#eef0f1;}
.cp-content img{display:block; width:100%; height:auto;}
#cpHtml{display:none; background:#fff; min-height:100%;}

/* ============ CLIENT PROFILE PREVIEW (cpp-) ============
   HTML mock of the client-facing Person Profile page, rendered by
   js/clientProfilePreview.js inside the Preview as Client takeover.
   Elements carry data-setting hooks for the upcoming settings wiring. */
.cpp{font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121; font-size:14px; background:#fff; min-height:100%; display:flex; flex-direction:column;}
.cpp-layout{flex:1; display:flex; align-items:flex-start; min-height:0; min-width:1240px;}

/* left rail: candidate list */
.cpp-rail{flex:none; width:250px; padding:14px 14px 20px 18px; max-height:calc(100vh - 46px - 44px); overflow-y:auto; position:sticky; top:0; background:#f2f2f2;}
.cpp-rail .prof-rail-lbl{margin:10px 0 8px 0;}
.cpp-rail .pf-select{margin-bottom:10px; background:#fff;}
.cpp-card.former{background:#e7e7e7;}
/* rail filter popovers: group options + role checkboxes with Apply */
.cpp-drop-pop{background:#fff; border:1px solid #dfe3e4; border-radius:8px; padding:8px; margin:-2px 0 12px 0; box-shadow:0 4px 14px rgba(0,0,0,.10);}
.cpp-drop-opt{padding:10px 12px; color:#0c5769; cursor:pointer; border-radius:4px; font-size:14.5px;}
.cpp-drop-opt:hover{background:#eef6f7;}
.cpp-drop-opt.sel{background:#0e606b; color:#fff;}
.cpp-role-opt{display:flex; gap:9px; align-items:center; padding:7px 6px; font-size:14.5px; cursor:pointer;}
.cpp-role-opt input{accent-color:var(--teal); width:16px; height:16px;}
.cpp-drop-apply{display:flex; justify-content:flex-end; margin-top:10px;}
.cpp-apply-btn{background:#0e606b; color:#fff; padding:7px 18px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:600;}
.cpp-card{border:1px solid #dfe3e4; border-radius:6px; padding:10px 12px; margin-bottom:12px; background:#fff; cursor:default;}
.cpp-card.sel{border:1.5px solid #0c5769; box-shadow:0 1px 5px rgba(12,87,105,.18);}
.cpp-card-name{font-weight:700; font-size:14px; line-height:19px; margin-bottom:2px;}
.cpp-card-line{font-size:13px; line-height:18px; color:#3f4a4e;}

/* main column */
.cpp-main{flex:1; min-width:0; padding:14px 18px 40px 12px;}

/* profile header card */
.cpp-header{background:#f4fafb; border:1px solid #d9e8ea; border-radius:6px; padding:14px 18px 16px 18px;}
/* fixed slots: name | ranking | rating | status | actions — a hidden block
   leaves an empty slot, so nothing on the top row ever shifts */
.cpp-hd-top{display:grid; grid-template-columns:minmax(0,1.2fr) 1fr 1fr 1fr auto; align-items:start; gap:24px;}
.cpp-hd-left{min-width:0;}
.cpp-chip{display:inline-block; border:1px solid #7fb4bc; background:#fff; color:#0c5769; font-weight:600; font-size:13px; border-radius:6px; padding:5px 14px; margin-bottom:14px;}
.cpp-name{font-size:22px; line-height:28px; color:#1f3a52; font-weight:400;}
.cpp-docrow{display:flex; align-items:center; gap:6px; margin-top:7px;}
.cpp-docbar{display:inline-flex; align-items:center; gap:6px;}
.cpp-docimg{height:22px; width:auto; display:block;}
.cpp-doc{display:inline-flex; align-items:flex-end; gap:1px; border:1px solid #b9c2c5; border-radius:3px; background:#fff; color:#3f4a4e; font-size:12px; padding:2px 4px; min-width:20px; height:20px; justify-content:center;}
.cpp-doc.dark{background:#212121; border-color:#212121; color:#fff;}
.cpp-doc-t{font-size:7px; font-weight:700; line-height:9px;}
/* LinkedIn: a solid 1:1 icon — blue tile, white glyph, no outline */
.cpp-doc.cpp-li{width:22px; height:22px; min-width:0; padding:0; border:none; border-radius:4px; background:#0a66c2; color:#fff; font-size:13px; display:inline-flex; align-items:center; justify-content:center;}
.cpp-hd-block{flex:1; min-width:0; padding-top:34px;}
.cpp-rank{font-size:16px; font-weight:700; line-height:20px;}
.cpp-hd-caption{font-size:14.5px; color:#212121; margin-top:8px;}
.cpp-stars{color:#e8a33d; font-size:17px; letter-spacing:4px;}
.cpp-ms-dots{display:flex; align-items:center;}
.cpp-ms-dot{width:15px; height:15px; border-radius:50%; border:1.6px solid #c2cbce; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none;}
.cpp-ms-dot.done{background:#0c5769; border-color:#0c5769; color:#fff; font-size:8px;}
.cpp-ms-line{width:8px; height:1.6px; background:#c2cbce; flex:none;}
.cpp-ms-lbl{font-size:14.5px; margin-top:8px; color:#212121;}
.cpp-pipe{padding:0 8px; color:#8a9499;}
.cpp-link{color:#0c5769; text-decoration:underline; cursor:pointer;}
.cpp-hd-actions{flex:none; display:flex; gap:10px;}
.cpp-icobtn{width:38px; height:38px; border:1px solid #7fb4bc; background:#fff; border-radius:6px; color:#0c5769; font-size:16px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}

/* header info columns */
.cpp-hd-info{display:flex; margin-top:18px;}
.cpp-info-col{flex:1; min-width:0; padding:0 18px;}
.cpp-info-col:first-child{padding-left:0;}
.cpp-info-col + .cpp-info-col{border-left:1px solid #dde8ea;}
.cpp-info-lbl{font-size:12.5px; color:#6b7478; margin-bottom:6px;}
.cpp-info-row{font-size:13.5px; line-height:20px; color:#212121;}
.cpp-info-row b{font-weight:700;}

/* body: two columns */
.cpp-body{display:flex; align-items:flex-start; margin-top:22px; gap:0;}
.cpp-col-left{flex:1; min-width:0; padding-right:28px;}
.cpp-col-right{flex:1.1; min-width:0; border-left:1px solid #e3e7e8; padding-left:26px;}
/* 3-column client layout: Education / Qualifications / Languages in the middle */
.cpp-col-mid{flex:1; min-width:0; border-left:1px solid #e3e7e8; padding-left:26px; padding-right:28px;}
.cpp-body.cols3 .cpp-col-right{flex:1.3;}

/* left column sections */
.cpp-sec-title{font-size:17px; color:#0c5769; padding-bottom:8px; border-bottom:1px solid #dfe3e4; margin-bottom:2px;}
.cpp-sec-note{font-size:12.5px; color:#5f6b70; font-style:italic;}
.cpp-section{margin-bottom:26px;}
.cpp-entry{display:flex; padding:14px 0 4px 4px;}
.cpp-years{flex:none; width:200px; font-weight:700; font-size:14.5px;}
.cpp-entry-main{flex:1; min-width:0; font-size:14.5px; line-height:21px;}
.cpp-entry-main b{font-weight:700;}
.cpp-role{margin-top:2px;}
.cpp-lang{padding:14px 0 4px 4px; font-size:14.5px;}

/* right column tabs */
.cpp-tabs{display:flex; gap:34px; border-bottom:1px solid #dfe3e4; margin-bottom:20px;}
.cpp-tab{padding:6px 2px 10px 2px; font-size:15px; color:#212121; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.cpp-tab .cpp-tab-ct{font-size:12.5px;}
.cpp-tab.on{color:#0c5769; font-weight:600; border-bottom-color:#0c5769;}
.cpp-empty{color:#5f6b70; font-size:14px; padding:8px 0 30px 2px;}
.cpp-eval-sec{margin-bottom:30px;}
.cpp-bullets{margin:14px 0 0 22px; font-size:14.5px; line-height:24px;}
.cpp-para{margin-top:14px; font-size:14.5px; line-height:22px;}

/* ============ CLIENT PROJECT PREVIEW (cpj-) ============
   HTML mocks of the client-facing project pages (Overview, All
   Profiles, Prospects, Pipeline, Applicants, Sources, Interviews,
   Documents + Candidate Demographics band), rendered by
   js/clientProjectPreview.js inside the Preview as Client takeover.
   Reuses cpp- milestone dots / stars / link styles. */
.cpj{font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121; font-size:14px; background:#fff; min-height:100%; display:flex; flex-direction:column; min-width:1400px;}

/* top bar */
.cpj-topbar{flex:none; display:flex; align-items:center; gap:18px; padding:8px 16px; border-bottom:1px solid #dfdddd;}
.cpj-logo{display:flex; align-items:center; gap:6px; padding:0 16px 0 4px; min-height:34px; border-right:1px solid #efeeee;}   /* client logo (phClientLogo) */
.cpj-projname{font-size:15px;}
.cpj-projmeta{margin:0 auto; text-align:left; font-size:12px; color:#585656; line-height:18px;}
.cpj-projmeta a{font-size:13px; font-weight:600;}
.cpj-top-right{display:flex; align-items:center; gap:12px;}
/* Position Location uses the same component as the Start Date / position-title
   block (.cpj-projmeta): small grey label line, value line under it, left-aligned */
.cpj-posloc{margin:0; padding-right:10px; text-align:left;}
.cpj-posloc b{display:block; color:#212121; font-weight:400; font-size:13px; line-height:18px;}
/* fake client logo (XYZ Test Company) — client view top bar + project record header */
.xyz-logo{display:inline-flex; align-items:baseline; gap:1px; font-family:Georgia,"Times New Roman",serif; font-style:italic; color:#8a9499; line-height:1; user-select:none;}
.xyz-logo-x{font-size:21px; font-weight:700; letter-spacing:-1px;}
.xyz-logo-ltd{font-size:10px; font-weight:700;}
.xyz-logo-lg .xyz-logo-x{font-size:28px;}
.xyz-logo-lg .xyz-logo-ltd{font-size:13px;}
.cpj-statstoggle{color:#0c5769; font-weight:700; font-size:13.5px; text-align:center; cursor:pointer; padding:4px 10px; border-left:1px solid #efeeee; border-right:1px solid #efeeee;}
.cpj-statstoggle i{display:block; margin-top:2px;}
.cpj-btn{display:inline-flex; align-items:center; gap:7px; border:1px solid #959392; background:#fff; border-radius:4px; padding:0 12px; height:36px; font-size:13.5px; color:#0c5769; font-weight:600; cursor:pointer; white-space:nowrap;}
.cpj-btn-sq{width:36px; padding:0; justify-content:center; color:#212121;}
.cpj-btn-disabled{color:#9aa4a8; border-color:#d7dbdc; background:#f5f6f6;}

/* layout: left nav + content */
.cpj-layout{flex:1; display:flex; align-items:stretch; min-height:0;}
.cpj-nav{flex:none; width:112px; border-right:1px solid #dfdddd; padding-top:10px;}
.cpj-nav-item{padding:11px 10px; font-size:12.5px; line-height:17px; border-bottom:1px solid #f2f1f1; cursor:pointer; color:#212121;}
.cpj-nav-item b{font-weight:600;}
.cpj-nav-item.on{border-left:3px solid #0c5769; padding-left:7px; font-weight:600;}
.cpj-nav-item:hover{background:#f6f8f8;}
.cpj-content{flex:1; min-width:0; padding:16px 22px 60px 22px;}

/* page head + toolbar */
.cpj-pagehead{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px;}
.cpj-pagetitle{font-size:17px;}
.cpj-toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.cpj-ck{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; cursor:pointer;}
.cpj-ck input{accent-color:#0c5769;}
.cpj-filterbox{display:inline-flex; align-items:center; gap:8px; border:1px solid #b9c2c5; border-radius:4px; height:36px; padding:0 12px; color:#9aa4a8; font-size:13.5px; min-width:170px;}
.cpj-subtabs{display:flex; gap:26px; border-bottom:1px solid #e3e7e8; margin-bottom:0;}
.cpj-subtab{padding:6px 2px 9px 2px; font-size:13.5px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px;}
.cpj-subtab.on{color:#0c5769; font-weight:600; border-bottom-color:#0c5769;}
.cpj-subtab b{font-weight:600;}
.cpj-pagetitle-tabs{border-bottom:1px solid #e3e7e8; margin-bottom:18px;}

/* tables */
.cpj-tablewrap{overflow-x:auto;}
.cpj-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.cpj-table th{text-align:left; font-weight:400; color:#585656; font-size:12.5px; padding:10px 10px; border-bottom:1px solid #e3e7e8;}
.cpj-table td{vertical-align:top; padding:16px 10px 18px 10px; border-bottom:1px solid #eceeee; line-height:19px;}
.cpj-namelink{color:#0c5769; font-weight:700; text-decoration:underline; background:#eefafa; padding:2px 5px; border-radius:3px; cursor:pointer;}
.cpj-namestrong{font-weight:700;}
.cpj-namesub{margin-top:6px; color:#212121; font-size:13px; line-height:18px;}
.cpj-mini-icons{margin-top:8px; display:flex; gap:8px; align-items:center;}
.cpj-mini-ico{color:#3f4a4e; font-size:14px;}
.cpj-mini-li{color:#0a66c2; font-size:15px;}
.cpj-stars{font-size:14px; letter-spacing:2px;}
.cpj-status .cpj-status-lbl{margin-top:7px; font-size:13px;}
.cpj-seemore{color:#0c5769; font-weight:700; font-size:12.5px; text-align:right; margin-top:6px; cursor:pointer;}
.cpj-ul{margin-left:18px;}
.cpj-viewdoc{display:inline-flex; align-items:center; gap:7px; background:#eef4f5; border:1px solid #d5e2e4; border-radius:4px; padding:6px 12px; color:#0c5769; font-weight:600; cursor:pointer;}

/* overview cards */
.cpj-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1450px; margin-top:24px;}   /* breathing room under the Overview tab strip */
.cpj-ovsub-blank{min-height:420px; margin-top:24px;}   /* custom Overview subtab — blank page for now (clickable images to come) */
/* blank Overview subtab, RRA view: "Select Page Type" tool picker */
.cpj-ovsub-new{margin-top:24px; min-height:420px;}
.ovsb-title{font-size:15px; font-weight:600; color:#212121; margin-bottom:14px;}
.ovsb-grid{display:grid; grid-template-columns:repeat(auto-fill, 280px); gap:18px;}
.ovsb-card{background:#fff; border:1px solid #dfdddd; border-radius:8px; padding:26px 20px 22px; text-align:center; cursor:pointer; box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease;}
.ovsb-card:hover{border-color:#0c5769; box-shadow:0 4px 14px rgba(10,60,68,.12);}
.ovsb-ico{height:110px; display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:60px; margin-bottom:14px;}
.ovsb-t{font-size:16px; font-weight:600; color:#212121; margin-bottom:8px;}
.ovsb-d{font-size:13.5px; color:#585656; line-height:19px; max-width:250px; margin:0 auto;}
.cpj-card{border:1px solid #dfe3e4; border-radius:6px;}
.cpj-card-h{padding:11px 16px; border-bottom:1px solid #e8ebeb; font-size:14px; display:flex; align-items:center; justify-content:space-between;}
.cpj-funnel{padding:18px 20px;}
.cpj-funnel-row{display:flex; align-items:center; margin-bottom:5px;}
.cpj-funnel-lbl{flex:none; width:160px; font-size:13px;}
.cpj-funnel-barzone{flex:1; display:flex; justify-content:center;}
.cpj-funnel-bar{height:26px; display:flex; align-items:center; justify-content:center; font-size:13px; clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%);}
.cpj-statusbars{padding:16px 20px;}
.cpj-sb-row{display:flex; align-items:center; gap:12px; margin-bottom:11px;}
.cpj-sb-bar{background:#bcdcf8; border-radius:3px; height:26px; display:flex; align-items:center; padding:0 10px; font-size:12.5px; white-space:nowrap;}
.cpj-sb-plain{font-size:12.5px; flex:1;}
.cpj-sb-n{margin-left:auto; font-size:13px;}
.cpj-int-group{padding:0 20px; font-size:13px; margin-top:16px;}
.cpj-int-tiles{display:flex; gap:14px; padding:10px 20px;}
.cpj-int-tile{flex:1; background:#dbeafc; border-radius:5px; height:56px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px;}
.cpj-int-tile b{font-size:16px;}
.cpj-hashpct{display:inline-flex; border:1px solid #d0d5d6; border-radius:4px; overflow:hidden; font-size:12px;}
.cpj-hashpct span{padding:3px 12px; cursor:pointer;}
.cpj-hashpct span.on{background:#0c5769; color:#fff;}
.cpj-decline{display:flex; gap:20px; padding:18px 20px; justify-content:space-around;}
.cpj-decline-col{text-align:center;}

/* donuts */
.cpj-donut-title{font-size:13.5px; font-weight:600; text-align:center; margin-bottom:12px;}
.cpj-donut{width:120px; height:120px; border-radius:50%; margin:0 auto; position:relative; background:#e8eaec;}
.cpj-donut-empty{background:#e8eaec;}
.cpj-donut-hole{position:absolute; inset:24px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.cpj-donut-hole b{font-size:17px;}
.cpj-donut-hole span{font-size:11px; color:#585656;}
.cpj-donut-legend{margin-top:12px; display:flex; flex-wrap:wrap; gap:5px 12px; justify-content:center; font-size:10.5px; color:#212121; max-width:210px;}
.cpj-donut-legend > span{display:inline-flex; align-items:center; gap:5px;}
.cpj-dot{width:9px; height:9px; border-radius:50%; display:inline-block;}

/* statistics band */
.cpj-statsband{flex:none; border-bottom:2px solid #0c5769; padding:12px 16px 18px 16px;}
.cpj-statshead{font-size:15px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between;}
.cpj-donuts{display:flex; gap:14px; align-items:flex-start; overflow-x:auto;}
.cpj-donutcard{flex:none; width:230px; border:1px solid #dfe3e4; border-radius:4px; padding:14px 10px;}

/* interviews */
.cpj-int-controls{display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:13.5px;}
.cpj-seg{display:inline-flex; border:1px solid #0c5769; border-radius:4px; overflow:hidden;}
.cpj-seg span{padding:8px 18px; font-size:13.5px; cursor:pointer;}
.cpj-seg span.on{background:#0c5769; color:#fff; font-weight:600;}
.toggle.on-static{width:34px; height:19px; background:#0c5769; border-radius:10px; display:inline-flex; align-items:center; justify-content:flex-end; padding:2px;}
.toggle.on-static .tk-static{width:15px; height:15px; background:#fff; border-radius:50%; display:block;}
.cpj-int-filters{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.cpj-datebox{display:inline-flex; align-items:center; gap:10px; border:1px solid #b9c2c5; border-radius:4px; height:36px; padding:0 12px; font-size:13.5px;}
.cpj-matrixwrap{border-top:1px solid #e3e7e8;}
.cpj-matrix{min-width:1500px;}
.cpj-ivrowmeta{margin-top:9px; font-size:12px; color:#585656;}
.cpj-ivchip{display:flex; gap:8px; align-items:flex-start;}
.cpj-ivn{flex:none; display:inline-flex; align-items:center; gap:4px; font-size:12.5px; border-right:1px solid #e3e7e8; padding-right:8px;}
.cpj-ivmeta{font-size:12px; line-height:17px; color:#585656;}
.cpj-ivmeta b{color:#212121; font-weight:600;}

/* documents */
.cpj-doc-h{font-size:15px; font-weight:700; margin-bottom:2px;}
.cpj-doc-sub{font-size:13px; color:#585656; margin-bottom:14px;}
.cpj-doccards{display:flex; gap:16px; margin-bottom:20px;}
.cpj-doccard{display:flex; align-items:center; gap:12px; border:1px solid #dfe3e4; border-radius:6px; padding:14px 16px; min-width:270px; font-size:16px; color:#3f4a4e;}
.cpj-doccard-t{display:flex; flex-direction:column; gap:3px; font-size:13.5px;}
.cpj-doccard-t span{color:#585656; font-size:12.5px;}
.cpj-dl{margin-left:auto; color:#0c5769; cursor:pointer;}
.cpj-acc{border:1px solid #dfe3e4; border-radius:6px; padding:15px 18px; margin-bottom:12px; font-size:13.5px; display:flex; align-items:center; gap:12px; cursor:pointer;}
.cpj-acc-plus{color:#0c5769; font-size:17px; font-weight:600;}
.cpj-acc b{font-weight:600;}
.cpj-acc-chev{margin-left:auto; color:#3f4a4e;}
.cpj-directup{border:1px solid #dfe3e4; border-radius:4px; padding:14px 14px 4px 14px; margin-top:18px;}
.cpj-directup legend{font-size:12.5px; font-weight:700; padding:0 6px;}

/* ---- list-limit warning modal (Customization "Add New …" caps) ---- */
#limitModal{display:none; position:fixed; inset:0; z-index:210; background:rgba(33,33,33,.5); align-items:flex-start; justify-content:center; padding-top:16vh;}
#limitModal.open{display:flex;}
.lm-box{background:#fff; border-radius:10px; width:min(480px, 92vw); box-shadow:0 12px 40px rgba(0,0,0,.3); font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121;}
.lm-head{display:flex; align-items:center; gap:10px; padding:16px 18px 12px 18px; border-bottom:1px solid #e3e7e8; font-size:16.5px; font-weight:700;}
.lm-head i{font-size:18px;}
.lm-x{margin-left:auto; border:none; background:none; font-size:22px; line-height:1; cursor:pointer; color:#0c5769; padding:0 2px;}
.lm-body{padding:16px 18px 26px 18px; font-size:14.5px;}
.lm-foot{display:flex; justify-content:flex-end; padding:0 18px 16px 18px;}
.lm-foot .btn-primary{min-width:64px;}

/* ---- "Download Engagement Details" — Status Update document viewer (client print button) ---- */
#cpDoc{display:none; position:fixed; inset:0; z-index:120; background:rgba(33,33,33,.45); align-items:flex-start; justify-content:center; padding:12px 0;}
#cpDoc.open{display:flex;}
.cpdoc-modal{width:min(1440px, 96vw); height:calc(100vh - 24px); background:#fff; border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; font-family:"Noto Sans","Segoe UI",sans-serif; color:#212121;}
.cpdoc-head{flex:none; display:flex; align-items:center; justify-content:space-between; padding:14px 18px 10px 18px; font-size:15px; font-weight:600;}
.cpdoc-x{border:none; background:none; font-size:24px; line-height:1; cursor:pointer; color:#212121; padding:0 4px;}
.cpdoc-tools{flex:none; display:flex; align-items:center; gap:18px; padding:8px 18px; border-top:1px solid #e3e7e8; border-bottom:1px solid #e3e7e8; font-size:15px; color:#3f4a4e; background:#fafbfb;}
.cpdoc-tools i{cursor:pointer;}
.cpdoc-sep{width:1px; height:20px; background:#d7dbdc;}
.cpdoc-zoom{font-size:12.5px; display:inline-flex; align-items:center; gap:4px; border:1px solid #d7dbdc; border-radius:3px; padding:2px 6px; background:#fff;}
.cpdoc-tools-r{margin-left:auto; display:inline-flex; gap:18px; align-items:center;}
.cpdoc-viewer{flex:1; overflow:auto; background:#e9ebec; padding:18px 0 30px 0;}
.cpdoc-page{width:780px; min-height:600px; background:#fff; margin:0 auto 14px auto; box-shadow:0 1px 4px rgba(0,0,0,.18); padding:34px 36px 28px 36px; position:relative; box-sizing:border-box;}
.cpdoc-cover{min-height:600px; display:flex; flex-direction:column;}
.cpdoc-cover-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:90px;}
.cpdoc-r{width:48px; height:48px; border:3px solid #111; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font:800 30px/1 Georgia,"Times New Roman",serif; color:#111;}
.cpdoc-clientlogo{font:italic 700 15px Georgia,"Times New Roman",serif; color:#3f4a4e; letter-spacing:.5px;}
.cpdoc-title{font:400 40px/1.1 Georgia,"Times New Roman",serif; margin-bottom:22px;}
.cpdoc-sub{font-size:15px; margin-bottom:30px;}
.cpdoc-prep{font-size:10.5px; line-height:16px; margin-bottom:84px;}
.cpdoc-disc{font-size:8.5px; font-style:italic; color:#3f4a4e; margin-bottom:auto;}
.cpdoc-foot{display:flex; align-items:flex-end; justify-content:space-between; font-size:9px; margin-top:60px;}
.cpdoc-rra{font:700 9px/10px "Noto Sans",sans-serif; text-align:left;}
.cpdoc-rra small{font-weight:400; font-size:6px; letter-spacing:.5px;}
.cpdoc-ovpage{padding-top:26px;}
.cpdoc-h2{font:400 19px/1.2 Georgia,"Times New Roman",serif; border-bottom:1.5px solid #212121; padding-bottom:6px; margin-bottom:16px;}
.cpdoc-cpj{min-width:0; min-height:0; display:block; font-size:11px;}     /* scaled-down copy of the client's overview cards */
.cpdoc-cpj .cpj-cards{margin-top:0; gap:14px; max-width:none;}
.cpdoc-cpj .cpj-card-h{font-size:12px; padding:8px 12px;}
.cpdoc-cpj .cpj-funnel{padding:12px 14px;}
.cpdoc-cpj .cpj-funnel-lbl{width:120px; font-size:10.5px;}
.cpdoc-cpj .cpj-funnel-bar{height:20px; font-size:10.5px;}
.cpdoc-cpj .cpj-statusbars{padding:12px 14px;}
.cpdoc-cpj .cpj-sb-bar,.cpdoc-cpj .cpj-sb-plain,.cpdoc-cpj .cpj-sb-n{font-size:10.5px;}
.cpdoc-cpj .cpj-sb-bar{height:20px;}
.cpdoc-cpj .cpj-int-group{font-size:11px; padding:0 14px;}
.cpdoc-cpj .cpj-int-tiles{padding:8px 14px;}
.cpdoc-cpj .cpj-int-tile{height:44px; font-size:11px;}
.cpdoc-cpj .cpj-int-tile b{font-size:13px;}
.cpdoc-cpj .cpj-decline{padding:12px 14px;}
.cpdoc-cpj .cpj-donut{width:90px; height:90px;}
.cpdoc-cpj .cpj-donut-hole{inset:18px;}
.cpdoc-cpj .cpj-donut-title{font-size:11px;}
.cpdoc-cpj .cpj-donut-legend{font-size:9px;}
.cpdoc-empty{color:#585656; font-size:12px; padding:10px 0;}
.cpdoc-pager{flex:none; text-align:center; padding:8px; font-size:12.5px; color:#3f4a4e; border-top:1px solid #e3e7e8; display:flex; gap:14px; justify-content:center; align-items:center;}
/* Set Cover Team Members: while "Display default members in Print" is on,
   the per-person toggles are read-only */
.toggle.tm-locked{opacity:.45; pointer-events:none;}
/* search navigation: a keyword found inside an input's value flashes the field */
.search-flash-input{outline:2px solid #f2c14e !important; outline-offset:2px; background:#fff8e3 !important;}

/* evaluation criteria bar chart (0–4 scale) */
.cpp-chart{margin-top:16px;}
.cpp-axis{display:flex; margin-bottom:6px;}
.cpp-axis > span{flex:none; width:118px;}
.cpp-axis-track{flex:1; position:relative; height:16px; border-bottom:1px solid #e3e7e8;}
.cpp-axis-n{position:absolute; top:0; font-size:12px; color:#3f4a4e; transform:translateX(-50%);}
.cpp-axis-n:nth-child(1){left:0; transform:none;}
.cpp-axis-n:nth-child(2){left:25%;}
.cpp-axis-n:nth-child(3){left:50%;}
.cpp-axis-n:nth-child(4){left:75%;}
.cpp-axis-n:nth-child(5){left:100%; transform:translateX(-100%);}
.cpp-chart-row{display:flex; align-items:center; margin-bottom:14px;}
.cpp-chart-lbl{flex:none; width:118px; font-size:12px; line-height:16px; color:#212121; padding-right:10px;}
.cpp-chart-track{flex:1; position:relative; padding:2px 0;
  background:linear-gradient(to right, #e6e9ea 1px, transparent 1px) repeat-x;
  background-size:25% 100%; box-shadow:inset -1px 0 0 #e6e9ea;}
.cpp-bar-cand{height:17px; background:#2f5cd6; margin-bottom:3px;}
.cpp-bar-ideal{height:11px; background:#d5d7d8;}
.cpp-legend{display:flex; gap:26px; margin-top:18px; font-size:12px; color:#212121;}
.cpp-legend > span{display:inline-flex; align-items:center; gap:7px;}
.cpp-sw{width:26px; height:12px; display:inline-block;}
.cpp-sw-cand{background:#2f5cd6;}
.cpp-sw-ideal{background:#d5d7d8;}
/* Evaluation Criteria chart variants (Display Chart As) */
.cpp-legend-center{justify-content:center;}
.cpp-radar{display:block; width:100%; max-width:480px; height:auto; margin:6px auto 10px;}
.cpp-radar-lbl{font-size:13px; fill:#212121; font-family:"Noto Sans",sans-serif;}
.cpp-radar-tick{font-size:11px; fill:#585656; font-family:"Noto Sans",sans-serif;}
.cpp-harvey{margin-top:12px; max-width:560px;}
.cpp-harvey-row{display:flex; align-items:center;}
.cpp-harvey-lbl{flex:1; min-width:0; font-size:14px; color:#212121; padding:9px 0;}
.cpp-harvey-head .cpp-harvey-col{font-weight:700; font-size:14.5px; color:#1f2a2e; padding:8px 0;}
.cpp-harvey-col{flex:none; width:96px; display:flex; align-items:center; justify-content:center; align-self:stretch; padding:5px 0;}
.cpp-harvey-col.cand{background:#eef4fb;}
.cpp-ball{width:34px; height:34px; border-radius:50%; display:block;}

/* success toast (RRA design system) — top-right, slides in from the top */
#successToasts{position:fixed; top:20px; right:20px; z-index:400; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.toast-success{display:flex; align-items:center; gap:8px; background:#c8f3d7; border:2px solid #23d160; border-radius:8px; padding:16px; width:378px; max-width:calc(100vw - 40px); box-sizing:border-box; font-family:"Noto Sans","Segoe UI",sans-serif; font-size:14px; line-height:16px; color:#212121; box-shadow:0 6px 18px rgba(10,50,56,.15); animation:toastIn .25s ease-out;}
.toast-success.leaving{animation:toastOut .2s ease-in forwards;}
@keyframes toastIn{from{transform:translateY(-24px); opacity:0;}}
@keyframes toastOut{to{transform:translateY(-16px); opacity:0;}}
.toast-success .ts-ico{flex:none; display:flex; font-size:18px; color:#212121;}
.toast-success .ts-msg{flex:1;}
.toast-success .ts-close{flex:none; background:#fff; border:none; border-radius:4px; min-width:28px; height:28px; padding:2px 6px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#212121; font-size:14px;}
.toast-success .ts-close:hover{background:#f0f0f0;}

/* toast */
#toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:#123b41; color:#fff; padding:11px 22px; border-radius:8px; font-size:14px; opacity:0; transition:.25s; z-index:200; pointer-events:none;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* publish card */

.flash-hl{animation:flashbg 2.4s ease-out;}
@keyframes flashbg{0%{background:#fff3bf;}100%{background:transparent;}}