/* watchtower-directory.css — Directory / Roster (Dispatch - Roster.dc.html).
 * A live directory of who's on today + how to reach them, from /field/roster.
 * Split: grouped roster list (left) → contact detail card (right). Command roles
 * (the rail is dispatch+). Renders into the EOC shell content area; tokens from
 * watchtower.css. */

.wtr { display:flex; flex-direction:column; height:100%; overflow:hidden; background:var(--bg-0); color:var(--t-0); font-family:var(--sans); }
.wtr * { box-sizing:border-box; }
.wtr button { color:inherit; font-family:inherit; cursor:pointer; }

.wtr-chead { flex:0 0 auto; min-height:46px; display:flex; align-items:center; gap:9px; padding:10px 18px; border-bottom:1px solid var(--l-2); background:var(--bg-1); flex-wrap:wrap; }
.wtr-ti { font-family:var(--label); font-size:14px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; }
.wtr-sub { font-family:var(--label); font-size:9px; letter-spacing:0.13em; color:var(--gold); text-transform:uppercase; margin-top:2px; }
.wtr-search { margin-left:auto; background:var(--bg-2); border:1px solid var(--l-2); border-radius:6px; padding:7px 12px; color:var(--t-0); font-family:var(--sans); font-size:13px; min-width:220px; }

.wtr-split { flex:1; min-height:0; display:grid; grid-template-columns:1fr 380px; }
.wtr-lcol { min-height:0; overflow:auto; border-right:1px solid var(--l-2); }
.wtr-zhdr { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:9px; padding:9px 18px; background:var(--bg-1); border-bottom:1px solid var(--l-2); font-family:var(--label); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--t-2); }
.wtr-zhdr .c { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--t-3); }
.wtr-prow { display:grid; grid-template-columns:40px 1fr 120px 70px; gap:14px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--l-1); cursor:pointer; }
.wtr-prow.on { background:var(--bg-2); box-shadow:inset 3px 0 0 var(--sky); }
.wtr-av { width:38px; height:38px; border-radius:8px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:12px; flex:0 0 auto; background:color-mix(in oklab,var(--sky) 18%,var(--bg-2)); color:var(--sky); }
.wtr-pname { font-size:14px; font-weight:600; }
.wtr-prole { font-family:var(--mono); font-size:11px; color:var(--t-3); margin-top:2px; }
.wtr-pzone { font-family:var(--mono); font-size:11px; color:var(--t-2); }
.wtr-statc { display:flex; align-items:center; gap:7px; justify-content:flex-end; font-family:var(--label); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; }
.wtr-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--t-3); }
.wtr-dot.on { background:var(--green); box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 22%,transparent); }
.wtr-dot.standby { background:var(--gold); }
.wtr-st-on { color:var(--green); } .wtr-st-standby { color:var(--gold); } .wtr-st-off { color:var(--t-3); }

.wtr-rcol { min-height:0; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:13px; background:var(--bg-0); }
.wtr-card { background:var(--bg-1); border:1px solid var(--l-2); border-radius:9px; overflow:hidden; }
.wtr-detbody { padding:15px; display:flex; flex-direction:column; gap:14px; }
.wtr-bigid { display:flex; align-items:center; gap:13px; }
.wtr-bigid .wtr-av { width:54px; height:54px; border-radius:11px; font-size:17px; }
.wtr-ttl { font-family:var(--label); font-size:21px; letter-spacing:0.03em; line-height:1.05; }
.wtr-detsub { font-family:var(--mono); font-size:12px; color:var(--t-2); margin-top:4px; }
.wtr-metarow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wtr-meta { background:var(--bg-2); border:1px solid var(--l-2); border-radius:7px; padding:10px 12px; }
.wtr-k { font-family:var(--label); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--t-3); }
.wtr-v { font-size:14px; font-weight:600; margin-top:3px; font-family:var(--mono); }
.wtr-v.sky { color:var(--sky); } .wtr-v.green { color:var(--green); } .wtr-v.gold { color:var(--gold); }
.wtr-note { font-size:12.5px; color:var(--t-2); line-height:1.5; padding:11px 13px; background:var(--bg-2); border:1px solid var(--l-1); border-radius:7px; }
.wtr-empty { padding:40px 18px; text-align:center; color:var(--t-3); font-size:13px; }
.wtr-rcol .wtr-empty { margin-top:40px; }