/* Roster | web styles. Look carried from the demo (BR-54): DCF palette, navy header with a green rule,
   Roster wordmark with the NorthPointe swoosh, agency emblem in the header, left rail. Pipes as separators. */
:root{
  --page:#eaf0f6; --surface:#fbfcfe; --ink-1:#10203a; --ink-2:#43546b; --ink-3:#77869a;
  --grid:#d6e0eb; --ring:rgba(16,32,58,.10);
  --blue:#1f6fb2; --blue-strong:#185a92; --navy:#1b3a6b; --green:#5aa63a; --good-text:#2f6f1f;
  --wash-blue:rgba(31,111,178,.09); --critical:#c0362c; --yellow:#f5c518;
  --np-blue:#3d93d1; --dcf-navy:#1b3a6b; --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(16,32,58,.05),0 6px 18px rgba(16,32,58,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--page);color:var(--ink-1);font:14.5px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;flex-direction:column}
a{color:inherit}

/* ---------- Header ---------- */
.topbar{
  --ink-1:#f2f6fc; --ink-3:#93a7c4; --np-blue:#7cc4f0; --dcf-navy:#ffffff;
  display:flex;align-items:center;gap:14px;padding:9px 18px;background:var(--navy);color:var(--ink-1);
  border-bottom:3px solid var(--green);flex-shrink:0;
}
.topbar .spacer{flex:1}
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;line-height:1;text-decoration:none;user-select:none}
.brand .roster{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink-1);position:relative}
.brand .roster::after{content:'';position:absolute;left:1px;right:1px;bottom:-3px;height:2px;border-radius:2px;opacity:.8;
  background:linear-gradient(90deg,transparent,var(--np-blue) 22%,var(--np-blue) 78%,transparent)}
.brand .by{font-family:Georgia,serif;font-style:italic;font-size:12px;color:var(--ink-3)}
.brand .np-logo{height:27px;width:auto;display:block;transform:translateY(15.9%)}
.np-logo .npl-text{fill:var(--ink-1)}
.agency-brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.agency-brand .agency-logo{height:42px;width:auto;display:block;background:#fff;border-radius:6px;padding:3px 8px}
.agency-brand.has-logo .dcf-emblem,.agency-brand.has-logo .dcf-word{display:none}
.agency-brand .dcf-emblem{height:38px;width:auto;display:block;background:#fff;border-radius:6px;padding:3px 4px}
.agency-brand .dcf-word{display:flex;flex-direction:column;line-height:1.06}
.agency-brand .dcf-w1{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--dcf-navy);text-transform:uppercase}
.agency-brand .dcf-w2{font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--dcf-navy);text-transform:uppercase}
.who{font-size:13px;white-space:nowrap}
.staging{font:700 11px system-ui;letter-spacing:.06em;color:#1d2733;background:var(--yellow);padding:3px 8px;border-radius:4px}
button{font:inherit;border:0;border-radius:var(--radius-sm);padding:7px 14px;background:var(--blue);color:#fff;cursor:pointer}
button:disabled{opacity:.6;cursor:default}
button.link{background:transparent;color:#fff;text-decoration:underline;padding:4px 6px;white-space:nowrap}

/* ---------- Layout and rail ---------- */
.body-wrap{display:flex;flex:1;min-height:0}
.sidebar{width:244px;flex-shrink:0;background:#e1eaf4;border-right:1px solid #cbd8e7;padding:14px 10px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-2);
  text-decoration:none;font-weight:500;margin-bottom:1px}
.nav-item:hover{background:rgba(90,166,58,.16)}
.nav-item.active{background:rgba(90,166,58,.16);color:var(--good-text);font-weight:650}
.nav-item .ico{width:17px;text-align:center;opacity:.85}
.nav-item .count{margin-left:auto;font-size:11px;font-weight:700;background:var(--critical);color:#fff;border-radius:20px;padding:0 6px;min-width:17px;text-align:center}
.nav-item.later{color:var(--ink-3)}
.nav-item .tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border:1px solid #cbd8e7;border-radius:10px;padding:0 6px}
.role-note{margin:14px 10px 4px;font-size:11.5px;color:var(--ink-3);line-height:1.5;border-top:1px solid #cbd8e7;padding-top:10px}
.main{flex:1;overflow-y:auto;padding:22px 26px 60px;min-width:0}

/* ---------- Content ---------- */
.page-head{margin-bottom:16px}
h1{font-size:22px;margin:0 0 2px}h2{font-size:16px;margin:0 0 8px}
.card{background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.card.narrow{max-width:900px;margin:10px auto}
.muted{color:var(--ink-2)}.error{color:var(--critical);font-weight:600}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.row label{font-weight:600}
input{font:inherit;padding:7px 10px;border:1px solid var(--grid);border-radius:var(--radius-sm);min-width:220px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:6px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--grid);vertical-align:top}
th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
.facts{display:flex;gap:8px 34px;flex-wrap:wrap}
.fact .k{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fact .v{font-size:14.5px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.tile{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius);padding:14px 16px;text-decoration:none;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--blue)}
.tile .k{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.tile .v{font-size:28px;font-weight:700;color:var(--navy)}

/* ---------- Narrow screens: rail becomes a scrolling strip under the header ---------- */
@media (max-width:900px){
  .agency-brand .dcf-word{display:none}
}
@media (max-width:720px){
  .topbar{flex-wrap:wrap;gap:8px 12px;padding:8px 16px}
  .topbar .spacer{display:none}
  .who{order:5;width:100%;font-size:12px;opacity:.9}
  .body-wrap{flex-direction:column}
  .sidebar{width:auto;display:flex;overflow-x:auto;padding:6px 10px;border-right:0;border-bottom:1px solid #cbd8e7}
  .nav-item{white-space:nowrap;margin:0 2px}
  .nav-item.later,.role-note{display:none}
  .main{padding:16px 16px 48px}
  .people th:nth-child(2),.people td:nth-child(2){display:none}
}