/* Emonics Org Directory — design tokens shared with the portal
   (services/eos-portal/static/portal.css): same navy/orange/bg/border
   palette, same spacing scale, so this console reads as part of one
   product family rather than a bolted-on tool.

   2026-07-25 design pass: this is the surface the executive team opens on
   a laptop, so the directory is built as a set of calm, generously-spaced
   division panels rather than a dense admin tree — bigger type hierarchy,
   real avatars, and access/lineage state legible at a glance. */

:root {
  --navy: #1E2A5E;
  --navy-dark: #141b40;
  --navy-mid: #2c3a72;
  --navy-tint: rgba(30, 42, 94, 0.06);
  --navy-tint-2: rgba(30, 42, 94, 0.11);
  --orange: #E65F3C;
  --orange-dark: #c94d2d;
  --orange-tint: rgba(230, 95, 60, 0.12);
  --icon-bg: #FDF0EC;
  --ink: #1a1f36;
  --ink-soft: #3d4560;
  --muted: #6b7280;
  --muted-light: #98a0b0;
  --bg: #F4F5F9;
  --card: #ffffff;
  --border: #E5E8F0;
  --border-soft: #EEF0F6;
  --error: #b91c1c;
  --error-bg: #fef2f2;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --green: #15803d;
  --green-bg: #dcfce7;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.22);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }

/* ==================== login page ==================== */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

.login-card .logo { display: block; height: 40px; width: auto; margin: 0 auto var(--space-5); }

.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin: 0 0 var(--space-1);
}

.login-card .sub { text-align: center; color: var(--muted); margin: 0 0 var(--space-5); font-size: 13px; }

.login-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.02em;
}

.login-card input[type="email"],
.login-card input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.login-card input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12);
}

.login-card input[name="code"] {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.login-card .row { margin-bottom: var(--space-4); }

.login-card button {
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease;
}
.login-card button:hover:not(:disabled) { background: var(--navy-dark); }
.login-card button:disabled { opacity: 0.6; cursor: default; }

.login-msg { text-align: center; color: var(--muted); font-size: 12px; margin: var(--space-2) 0 0; min-height: 16px; }

.login-footer { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; margin: var(--space-5) 0 0; }

/* ==================== app shell ==================== */

.app-header {
  background: var(--navy);
  border-bottom: 2px solid var(--orange);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  flex-wrap: wrap;
}

/* Logo sizing is evidence-based, not taste: a measured height ladder on this
   exact asset found the two-line lockup illegible at 26px, legible at 36px,
   crisp at 44px (finance window's finding, 2026-07-25). 36px is the chosen
   floor. Height-only + width:auto so the asset is never distorted, and
   flex:none so the brand -- a flex ITEM of the flex .app-header -- can never
   be shrunk back down by sibling pressure. */
/* The brand is a LINK home, matching the fleet nav pattern (see
   tech-team-calendar's assets/nav.js: brand-home anchor + an "All tools"
   button, both to https://eos.emonics.com). It was a bare <div> here --
   confirmed unclickable -- so the flagship was the one console you couldn't
   get home from.

   Asset: the CANONICAL light-background lockup in a white chip, per the
   portal/contracts treatment, and FINGERPRINTED (?v=<sha256[0:8]>).
   Fingerprinting is not decoration: assets/nav.js on the calendar console is
   served at a stable path with no cache-buster, and a browser holding a stale
   copy renders the old nav indefinitely while the server serves the new one --
   which is exactly what generated a false "the logo stopped linking home" bug
   report. tests/test_static_assets.py asserts the query matches the real file
   hash so it cannot silently drift. */
.app-header .brand { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.app-header .brand-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  transition: box-shadow .12s ease, transform .12s ease;
}
.app-header .brand:hover .brand-chip { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
.app-header .brand:focus-visible .brand-chip { outline: none; box-shadow: 0 0 0 3px var(--orange); }
.app-header .brand img { display: block; height: 36px; width: auto; }

.app-header .all-tools {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.app-header .all-tools:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.app-nav { display: flex; gap: 4px; }
.app-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.app-nav a.active, .app-nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.nav-count {
  background: var(--orange);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
/* An explicit `display` beats the [hidden] attribute's own UA rule, so
   without this a zero count renders as a literal "0" pill. */
.nav-count[hidden] { display: none; }

.app-search { margin-left: auto; }
.app-search input {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  width: 240px;
  font-family: inherit;
}
.app-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(230, 95, 60, 0.35); }

.app-account { display: flex; align-items: center; gap: var(--space-3); }
.app-account .email { color: rgba(255, 255, 255, 0.78); font-size: 13px; white-space: nowrap; }

.btn-ghost {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }

.app-main { max-width: 1240px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-7); }

.view { display: none; }
.view.active { display: block; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.page-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.page-title {
  font-size: 25px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
.page-sub { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 62ch; }

/* ==================== segmented control ==================== */

.segmented {
  display: inline-flex;
  background: #e9ecf3;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.seg {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.seg:hover:not(.active) { color: var(--ink); }
.seg.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

/* ==================== directory filter + legend ==================== */

.directory-filter { position: relative; margin-bottom: var(--space-4); }
.directory-filter input {
  width: 100%;
  padding: 13px 96px 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.directory-filter input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.1);
}
.filter-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #eef0f6;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.filter-clear:hover { background: #e2e6ef; color: var(--ink); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 0 var(--space-1) var(--space-5);
  font-size: 11.5px;
  color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }

.edge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.edge-team_roster { background: var(--navy); }
.edge-hr_fallback { background: #d97706; }
.edge-by_design   { background: #2563eb; }
.edge-no_line     { background: #dc2626; }
.edge-root        { background: var(--orange); }

/* ==================== division panels ==================== */

.division {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .16s ease;
}
.division.open { box-shadow: var(--shadow); }
.division.is-unmapped { border-color: #f0d9a8; }

.division-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  cursor: pointer;
  user-select: none;
  border-left: 4px solid var(--navy);
  transition: background .12s ease;
}
.division-head:hover { background: #fafbfd; }
.division.is-unmapped .division-head { border-left-color: #d99a2b; }

.chev {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-light);
  transition: transform .18s cubic-bezier(.4,0,.2,1), color .12s ease;
}
.chev svg { display: block; }
.open > .division-head .chev,
.open > .location-head .chev,
.node-row.open .chev { transform: rotate(90deg); color: var(--navy); }

.division-title {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.division-title .unmapped-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber);
  background: var(--amber-bg);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: var(--space-3);
  vertical-align: 2px;
}

.division-stats { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  background: #f4f6fa;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.stat b { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat.access-yes { background: var(--green-bg); color: #166534; }
.stat.access-yes b { color: #14532d; }
.stat.access-no { background: #f1f2f6; color: var(--muted); }
.stat.access-no b { color: var(--ink-soft); }
.stat.headcount { background: var(--navy-tint-2); color: var(--navy); }
.stat.headcount b { color: var(--navy); }

/* animated open/close — grid-template-rows interpolation keeps the
   division/location panels feeling smooth without a fixed max-height */
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.4,0,.2,1); }
.open > .collapsible { grid-template-rows: 1fr; }
.collapsible > .collapsible-inner { overflow: hidden; }

.division-body { padding: 0 var(--space-5) var(--space-4); border-top: 1px solid var(--border-soft); }

/* ==================== location groups ==================== */

.location { border-bottom: 1px solid var(--border-soft); }
.location:last-child { border-bottom: none; }

.location-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
  cursor: pointer;
  user-select: none;
}
.location-name {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}
.location.is-no-manager .location-name { color: var(--error); }
.location-stats { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.location-stats .stat { font-size: 11.5px; padding: 3px 10px; }

.location-body { padding-bottom: var(--space-3); }

/* ==================== person nodes ==================== */

.node { position: relative; }
.node-children {
  margin-left: 19px;
  padding-left: var(--space-4);
  border-left: 1.5px solid var(--border);
  display: none;
}
.node.open > .node-children { display: block; animation: fade-slide .16s ease both; }
@keyframes fade-slide { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

.node-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 10px 7px 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .1s ease;
}
.node-row:hover { background: #f5f7fb; }
.node-row .chev { width: 19px; height: 19px; }
.node-row.leaf .chev { visibility: hidden; }

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  background: var(--navy-tint-2);
  border: 1px solid rgba(30, 42, 94, 0.09);
  text-transform: uppercase;
}
.avatar.is-lead { background: var(--navy); color: #fff; border-color: var(--navy); }

.node-identity { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.node-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-row:hover .node-name { color: var(--navy); }
.node-title {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-tail { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.mini-chip {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2.5px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.mini-chip.static  { background: var(--navy); color: #fff; }
.mini-chip.dynamic { background: #fff; color: var(--navy-mid); border: 1px solid #c3cade; }
.mini-chip.exec    { background: var(--orange); color: #fff; }

.chip-more { font-size: 10px; color: var(--muted); font-weight: 600; }

.flag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2.5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.flag.no-access  { background: #f1f2f6; color: var(--muted); }
.flag.sensitive  { background: var(--orange-tint); color: var(--orange-dark); }
.flag.duplicate  { background: var(--amber-bg); color: var(--amber); }
.flag.flagged    { background: #e0e7ff; color: #3730a3; }
.flag.external   { background: #f4f6fa; color: var(--ink-soft); font-weight: 600; text-transform: none; letter-spacing: 0; }

.count-pill {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
  background: #eef0f5;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.node-row.match { background: rgba(230, 95, 60, 0.09); }
.node-row.match .node-name { color: var(--orange-dark); }

/* ==================== person detail ==================== */

.person-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  flex-wrap: wrap;
}
.person-hero .avatar-lg {
  width: 68px; height: 68px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  text-transform: uppercase;
}
.person-hero .hero-main { flex: 1; min-width: 240px; }
.person-hero h1 { font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 5px; letter-spacing: -0.015em; }
.person-hero .hero-title { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 var(--space-3); }
.person-hero .hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 12.5px; color: var(--muted); }
.person-hero .hero-meta .dot-sep { display: inline-flex; align-items: center; gap: 6px; }
.person-hero .hero-actions { display: flex; flex-direction: column; gap: var(--space-2); }

.hero-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-3); }

.badge-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 132px;
  background: #fbfcfe;
}
.badge-cell.on { border-color: #c3cade; background: #fff; }
.badge-cell .bc-module { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.badge-cell .bc-state { font-size: 11px; color: var(--muted); margin-top: 3px; }
.badge-cell.off { opacity: .55; }
.badge-cell .bc-kind {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px;
}
.badge-cell .bc-kind.static { background: var(--navy); color: #fff; }
.badge-cell .bc-kind.dynamic { background: #fff; color: var(--navy-mid); border: 1px solid #c3cade; }
.badge-cell .bc-kind.exec { background: var(--orange); color: #fff; }

/* ==================== review queue ==================== */

.proposal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  flex-wrap: wrap;
}
.proposal-main { flex: 1; min-width: 280px; }
.proposal-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.proposal-subject { font-size: 15.5px; font-weight: 700; color: var(--navy); text-decoration: none; }
.proposal-subject:hover { text-decoration: underline; }
.ptype {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; background: var(--navy-tint-2); color: var(--navy);
}
.pstatus { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; }
.pstatus.open { background: var(--amber-bg); color: var(--amber); }
.pstatus.approved { background: var(--green-bg); color: #166534; }
.pstatus.rejected { background: var(--error-bg); color: var(--error); }
.pstatus.applied { background: #e0e7ff; color: #3730a3; }

.proposal-detail { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 var(--space-2); }
.proposal-detail b { color: var(--ink); }
.proposal-note {
  font-size: 13px; color: var(--ink-soft); background: #f7f8fc;
  border-left: 3px solid var(--border); border-radius: 0 6px 6px 0;
  padding: 9px 13px; margin: var(--space-3) 0 0; white-space: pre-wrap;
}
.proposal-meta { font-size: 11.5px; color: var(--muted-light); margin-top: var(--space-3); }
.proposal-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.btn-approve {
  background: var(--green); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.btn-approve:hover { background: #126c33; }
.btn-reject {
  background: #fff; color: var(--error); border: 1px solid #fecaca; border-radius: var(--radius-sm);
  padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.btn-reject:hover { background: var(--error-bg); }

/* ==================== footer counts ==================== */

.footer-counts {
  margin-top: var(--space-6);
  border-top: 1px solid var(--border);
  padding: var(--space-4) 0 0;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}
.footer-counts b { color: var(--ink); }
.footer-counts .bad { color: var(--error); font-weight: 700; }
.footer-counts .ok { color: var(--green); font-weight: 700; }

/* ==================== cards ==================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.card h2 {
  margin: 0 0 var(--space-4);
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.card-actions { margin-left: auto; display: flex; gap: var(--space-2); }

.kv { display: grid; grid-template-columns: 160px 1fr; row-gap: var(--space-2); font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.kv .derived {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: #f1f2f6; padding: 2px 6px; border-radius: 4px; margin-left: 6px;
}

/* ==================== badges ==================== */

.badge {
  font-size: 10px;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
}
.badge-team_roster { background: #e0e7ff; color: #3730a3; }
.badge-hr_fallback { background: var(--amber-bg); color: #92400e; }
.badge-by_design   { background: #dbeafe; color: #1e40af; }
.badge-no_line     { background: var(--error-bg); color: var(--error); }
.badge-root        { background: var(--orange); color: #fff; }

/* ==================== tables ==================== */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; transition: background .1s ease; }
tr.clickable:hover { background: #f6f7fb; }

/* ==================== chain / gaps / search ==================== */

.chain-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13.5px; }
.chain-list .sep { color: var(--muted-light); font-size: 11.5px; }
.chain-list a { color: var(--navy); text-decoration: none; font-weight: 600; }
.chain-list a:hover { text-decoration: underline; }

.gap-group + .gap-group { margin-top: var(--space-6); }
.gap-group h3 {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gap-group .reason { color: var(--muted); }

.search-input-wrap { margin-bottom: var(--space-5); }
.search-input-wrap input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
}
.search-input-wrap input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.1); }

.empty-state { color: var(--muted); font-size: 13.5px; padding: var(--space-5) 0; }
.empty-panel {
  background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6); text-align: center; color: var(--muted); font-size: 13.5px;
}

/* ==================== buttons ==================== */

.btn-primary {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease;
}
.btn-primary:hover:not(:disabled) { background: var(--navy-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn-secondary:hover { background: #f6f7fb; border-color: #cbd2e0; }

.btn-small { padding: 6px 13px; font-size: 12.5px; border-radius: var(--radius-sm); }

/* ==================== pending-sync banner ==================== */

.pending-banner {
  background: var(--orange-tint);
  border: 1px solid rgba(230, 95, 60, 0.35);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--orange-dark);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.pending-banner .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  margin-top: 5px; flex-shrink: 0;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ==================== modals ==================== */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 27, 64, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 100;
}
.modal-overlay.open { display: flex; }

.modal-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.modal-card h2 { margin: 0 0 var(--space-2); color: var(--navy); font-size: 18.5px; letter-spacing: -0.01em; }
.modal-card .modal-sub { color: var(--muted); font-size: 13px; margin: 0 0 var(--space-5); }

.modal-card label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin: var(--space-4) 0 var(--space-2); }
.modal-card label .label-hint { color: var(--muted); font-weight: 500; text-transform: none; }

.modal-card select,
.modal-card input[type="text"],
.modal-text-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  background: #fff;
  color: var(--ink);
}
.modal-card select:focus,
.modal-card input[type="text"]:focus,
.modal-text-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12); }

.modal-picker-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: var(--space-2); }
.modal-picker-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 13px; cursor: pointer; border-bottom: 1px solid var(--border-soft);
}
.modal-picker-row:last-child { border-bottom: none; }
.modal-picker-row:hover { background: #f6f7fb; }
.modal-picker-row .name { font-weight: 600; font-size: 13.5px; }
.modal-picker-row .meta { font-size: 11.5px; color: var(--muted); }

.picked-row {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--navy-tint); border: 1px solid #c3cade; border-radius: var(--radius-sm);
  padding: 9px 13px; margin-top: var(--space-2); font-size: 13.5px; font-weight: 600; color: var(--navy);
}
.picked-row .clear-pick {
  margin-left: auto; background: none; border: none; color: var(--muted);
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600;
}

.modal-note-box {
  background: #f7f8fc; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 12px; color: var(--muted); margin-top: var(--space-4);
}

.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }

.chain-compare { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.chain-compare .chain-block { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.chain-compare .chain-block.new { border-color: var(--orange); background: var(--orange-tint); }
.chain-compare .chain-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-bottom: var(--space-2); }

.modal-card textarea {
  width: 100%; min-height: 74px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; resize: vertical;
}
.modal-card textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12); }

.modal-error { background: var(--error-bg); color: var(--error); border: 1px solid #fecaca; border-radius: var(--radius-sm); padding: var(--space-2) 10px; font-size: 13px; margin-top: var(--space-3); }

/* ==================== access control ==================== */

.access-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.access-tab {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.access-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.access-module-select { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.module-chip {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.module-chip.active { background: var(--orange-tint); border-color: var(--orange); color: var(--orange-dark); }

/* The matrix scrolls horizontally at EVERY width, not just on mobile.
   `.table-scroll` used to get overflow-x only inside the mobile media query,
   which was survivable at 10 module columns and is not at 17: on a desktop
   the extra columns simply compressed until the headers were unreadable.
   Columns carry their own min-width so the table sizes itself from the module
   count rather than from a hardcoded table width that would need editing
   every time the CHECK constraint gains a value. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.access-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.access-grid-table th:not(:first-child), .access-grid-table td:not(:first-child) { min-width: 56px; }

/* THE PERSON COLUMN IS PINNED. Safety, not polish: at 17 columns the matrix
   scrolls, and with the names scrolled away the screen becomes rows of
   anonymous checkboxes on the one page where a misplaced click revokes the
   wrong person's access. Caught in a screenshot of the first candidate, where
   scrolling to the new modules left no way to tell whose row was whose.
   Sticky cells must be opaque or the columns underneath show through. */
.access-grid-table th:first-child, .access-grid-table td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--card);
}
.access-grid-table thead th:first-child { z-index: 3; }
.access-grid-table th:first-child::after, .access-grid-table td:first-child::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: var(--border);
}
.access-grid-table th, .access-grid-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.access-grid-table th:first-child, .access-grid-table td:first-child { text-align: left; min-width: 180px; }
.access-grid-table th { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.access-grid-table .person-cell .name { font-weight: 600; color: var(--ink); display: block; }
.access-grid-table .person-cell .dept { font-size: 11.5px; color: var(--muted); }
/* The identity line -- employee code, work email, location. Rendered on
   EVERY row, never truncated with an ellipsis: a half-shown email is
   exactly as useless as no email when two rows share a name. */
.access-grid-table .person-cell .ident {
  display: block; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; word-break: break-word;
}

.access-checkbox {
  width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--border);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; font-size: 13px; color: #fff; transition: background .1s ease, border-color .1s ease;
}
.access-checkbox.granted { background: var(--navy); border-color: var(--navy); }
.access-checkbox.granted::after { content: "✓"; }

/* ---------------------------------------------------------------------------
   Stakes marker: registry-fallback-admitted people.
   These are people with no eos_mirror.employees (Airtable/HR) row. eos-portal
   admits them on the strength of an active module grant alone, so the rows in
   this grid ARE their platform access -- revoking the last one locks them out.
   Amber, not red: red already means "error" on this page (.modal-error), and
   these rows are not errors. They are ordinary rows that carry more weight.
   --------------------------------------------------------------------------- */
.access-grid-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: center; padding: 10px var(--space-4);
  border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted);
}
.access-grid-legend code {
  font-size: 11px; background: var(--navy-tint); color: var(--navy);
  padding: 1px 5px; border-radius: 4px;
}
.access-grid-legend .legend-count b { color: var(--ink); }
.access-grid-legend .legend-fallback {
  color: var(--amber); background: var(--amber-bg);
  padding: 3px 10px; border-radius: 999px; font-weight: 600; cursor: help;
}

/* OPAQUE, not an rgba tint: the first cell is sticky, and a translucent
   background would let the scrolling columns show through it. */
.access-grid-table tr.registry-fallback-row td { background: #FFFBEB; }
.access-grid-table tr.registry-fallback-row td:first-child {
  box-shadow: inset 3px 0 0 var(--amber);
}
/* On its own line. Inline, the chip landed between the name and the
   department and rendered as "⚠ PORTAL-CRITICAL HC Team" — the escalation and
   the department ran together into one unreadable string. */
.registry-fallback-mark {
  display: block; width: fit-content; margin: 3px 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--amber); background: var(--amber-bg);
  border: 1px solid rgba(180, 83, 9, 0.25);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap; cursor: help;
}

/* The specific checkbox whose revoke ends someone's platform access. Ringed
   so it is distinguishable from its neighbours at a glance, without changing
   the granted/not-granted reading of the tick itself. */
.access-checkbox.last-grant {
  box-shadow: 0 0 0 2px var(--amber-bg), 0 0 0 3.5px var(--amber);
}

.modal-warn {
  background: var(--amber-bg); color: #78350f; border: 1px solid rgba(180, 83, 9, 0.3);
  border-radius: var(--radius-sm); padding: 10px var(--space-3);
  font-size: 12.5px; line-height: 1.5; margin-top: var(--space-3);
}
.modal-warn b { color: #7c2d12; }
.modal-warn.severe {
  background: var(--error-bg); color: #7f1d1d; border-color: #fecaca;
}
.modal-warn.severe b { color: var(--error); }

.exec-full-access {
  font-size: 11px; font-weight: 700; color: var(--orange-dark); background: var(--orange-tint);
  padding: 4px 10px; border-radius: 999px; display: inline-block;
}

.grant-source-tag { font-size: 11.5px; color: var(--muted); }

/* ==================== responsive ==================== */

@media (max-width: 980px) {
  .app-main { max-width: 100%; }
  .division-stats { width: 100%; margin-left: 0; }
}

@media (max-width: 720px) {
  .app-header { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  /* Was 22px -- BELOW the 26px the height ladder measured as illegible, so the
     narrow breakpoint was shipping a worse lockup than the one that prompted
     the fix. Held at the same 36px floor; the header already wraps at this
     width, so the extra 14px costs no horizontal room. */
  .app-header .brand img { height: 36px; }
  .app-header .brand-chip { padding: 4px 8px; }
  .app-search { order: 3; width: 100%; margin-left: 0; }
  .app-search input { width: 100%; }
  .app-account .email { display: none; }
  .app-main { padding: var(--space-5) var(--space-4) var(--space-6); }
  .page-title { font-size: 20px; }
  .card { padding: var(--space-4); }
  .kv { grid-template-columns: 120px 1fr; }
  .division-head { padding: var(--space-4); gap: var(--space-3); }
  .division-title { font-size: 15.5px; }
  .division-body { padding: 0 var(--space-4) var(--space-3); }
  .person-hero { padding: var(--space-5); gap: var(--space-4); }
  .person-hero h1 { font-size: 20px; }
  .person-hero .hero-actions { width: 100%; }

  table:not(.no-collapse), table:not(.no-collapse) thead, table:not(.no-collapse) tbody, table:not(.no-collapse) tr { display: block; }
  table:not(.no-collapse) thead { display: none; }
  table:not(.no-collapse) tr { border-bottom: 1px solid var(--border); padding: var(--space-3) 0; }
  tr.clickable:hover { background: none; }
  table:not(.no-collapse) td { border: none; padding: 2px 0; display: flex; justify-content: space-between; gap: var(--space-3); }
  table:not(.no-collapse) td::before { content: attr(data-label); color: var(--muted); font-size: 11.5px; text-transform: uppercase; }

  /* The access grid is a real matrix (name x module), not a labeled field
     list -- collapsing it the same way would be unreadable. Let it scroll
     horizontally in its own container instead. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* No table-level min-width: the per-column min-widths above already size
     the matrix from however many modules the constraint carries. A fixed
     640px was set when there were 10 columns and would now UNDER-size the
     table, squashing 17 columns back into a narrower box than they need. */
  .footer-counts { gap: var(--space-3) var(--space-4); font-size: 12px; }
  .modal-card { padding: var(--space-5); }

  /* Person rows are a name + several small facts, not a labeled field
     list -- wrap rather than forcing one nowrap line off the screen, and
     trim indentation so depth doesn't eat the whole width. */
  .node-children { margin-left: 10px; padding-left: var(--space-2); }
  .node-row { flex-wrap: wrap; row-gap: 5px; }
  .node-tail { margin-left: 0; flex-basis: 100%; order: 10; padding-left: 42px; flex-wrap: wrap; }
  .proposal-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Employment facts (read-only) + the access panel --------------------
   No input, no control, no affordance that hints at editing: the spine owns
   every field here and org_hierarchy_write cannot write any of them. */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: 0; }
.fact { margin: 0; }
.fact dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.fact dd { margin: 0; font-size: 14px; color: var(--text); }
.fact dd.status-active { color: var(--ok, #15803d); font-weight: 600; }
.fact dd.status-terminated { color: var(--error, #b91c1c); font-weight: 600; }
.fine-print { font-size: 12px; color: var(--text-muted); margin-top: var(--space-3); line-height: 1.5; }
.revoke-row { margin-top: var(--space-3); }
.modal-fine-print { font-size: 12px; color: var(--text-muted); margin-top: var(--space-2); line-height: 1.5; }

/* Amber, not red: this box is a statement of fact the operator must read
   before committing, not an error. Red here would compete with .modal-error. */
.modal-note-warn { border-left: 3px solid #d97706; background: #fffbeb; }
.modal-note-warn strong { display: block; margin-bottom: 4px; }

/* The one destructive control in this console. Distinct from .btn-primary so
   it can never be clicked by muscle memory meant for a save button. */
.btn-danger { background: #b91c1c; color: #fff; border: 1px solid #991b1b; border-radius: var(--radius-sm); padding: var(--space-2) 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-danger:hover { background: #991b1b; }
.btn-danger:disabled { opacity: .6; cursor: default; }
.btn-danger.btn-small { padding: 6px 10px; font-size: 13px; }

/* ==========================================================================
   THE EMPLOYEE EDITOR (2026-09-02)
   ========================================================================== */

/* An editable fact reveals its Edit control on hover/focus, and ALWAYS shows
   it on touch — a control that only exists on hover does not exist on a
   phone. */
/* >>> THE DIVISION CELL WRAPPED ONE LETTER PER LINE. <<< (Art, 2026-09-04.)

   This rule was `display: flex` with the default `flex-wrap: nowrap`, and
   the Division cell has FOUR children -- value, provenance badge, Edit, and
   the "Inherited from <name>" sentence. `.fact-detail` sets `display: block`,
   which does nothing to a flex ITEM: the sentence sat on the same single row
   as the other three and the whole row was squeezed into one
   `minmax(180px, 1fr)` grid column.

   Measured on Abhishek Dhara's card at 1280 before this fix: the value "C2C"
   rendered 10px wide and 63px tall -- three letters stacked vertically,
   `overflow-wrap: anywhere` doing exactly what it was told inside a box with
   no room. The detail sentence: 67px wide, 86px tall.

   Two changes, both structural rather than cosmetic:
     * the row WRAPS, so a part that does not fit moves down instead of being
       crushed to a few pixels;
     * the detail sentence takes a full row of its own (`flex-basis: 100%`),
       which is what `display: block` was reaching for and could not express
       from inside a flex container.

   The badge and the Edit button never shrink -- they are fixed-size controls
   and shrinking them is what stole the width from the value. */
.fact-editable dd {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem .5rem; min-width: 0;
}
.fact-value { min-width: 0; overflow-wrap: anywhere; flex: 0 1 auto; }
.fact-editable dd > .fact-badge,
.fact-editable dd > .fact-edit { flex: 0 0 auto; }
/* Its own line by default -- never a fourth item competing for the value's
   width in a narrow column. */
.fact-editable dd > .fact-detail { flex: 1 0 100%; }

/* >>> AT 1280 ALL FOUR PARTS SHARE ONE LINE. <<<
   Art asked for "value, badge, Edit and help text on one line at 1280", and
   in a single `minmax(180px, 1fr)` column that is arithmetically impossible:
   the four parts measure ~335px and the column is 212px. So the Division
   cell SPANS TWO COLUMNS on a wide viewport, which gives it the width the
   sentence needs, and the detail goes back to sharing the row.

   Below this breakpoint the grid is one or two narrow columns and the
   wrapping rules above take over -- which is the sane behaviour at 390. */
@media (min-width: 1100px) {
  .fact-grid .fact-division { grid-column: span 2; }
  .fact-editable.fact-division dd > .fact-detail { flex: 0 1 auto; margin-top: 0; }
}
.fact-unset .fact-value { color: var(--muted, #8a8f98); font-style: italic; }

/* >>> AN EDIT CONTROL THAT IS INVISIBLE IS AN EDIT CONTROL THAT IS NOT
   OFFERED. <<< (Art's ruling, 2026-09-03.)

   This rule used to read `opacity: 0` with `.fact-editable:hover` bringing it
   back. The Department, Division and Title buttons WERE in the DOM and WERE
   wired to the editor -- they were painted transparent until the pointer
   happened to rest on that exact grid cell. Location and work mode looked
   like the only editable facts on the card because `.costing-line .fact-edit`
   (below) overrides the opacity to 1, so those two were the only two anybody
   could see. The block's own fine print promised five editable fields and the
   card appeared to offer two, and the defect reached the point where Art
   could not correct his own division on his own system.

   Reveal-on-hover is a discoverability failure before it is anything else,
   and it has no keyboard or touch story worth defending: :focus-visible only
   helps someone already tabbing through controls they cannot see. The button
   is now always visible and quiet -- muted until hover, never absent. */
.fact-edit {
  border: 1px solid var(--line, #d8dbe0);
  background: #fff; color: var(--ink, #1d2126);
  border-radius: 6px; padding: .1rem .45rem;
  font-size: .72rem; cursor: pointer; line-height: 1.5;
  opacity: .75; transition: opacity .12s ease, background .12s ease;
}
.fact-editable:hover .fact-edit,
.fact-edit:hover,
.fact-edit:focus-visible { opacity: 1; }
.fact-edit:hover { background: var(--tint, #f2f5f9); }

/* Division provenance, beside the value. */
.fact-badge {
  font-size: .68rem; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 999px; padding: .05rem .4rem; white-space: nowrap;
  border: 1px solid var(--line, #d8dbe0); color: var(--text-muted, #6b7280);
}
.fact-badge.badge-inherited { border-color: #c7d2fe; color: #4338ca; background: #eef2ff; }
.fact-badge.badge-set-here { border-color: #bbf7d0; color: #15803d; background: #f0fdf4; }
.fact-badge.badge-unresolved { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.fact-detail { display: block; font-size: .72rem; color: var(--text-muted, #6b7280); margin-top: 2px; }
.fact-inherited .fact-value { font-style: italic; }

.owned-note {
  font-size: .68rem; font-weight: 500; color: var(--muted, #8a8f98);
  text-transform: none; letter-spacing: 0;
}

/* --- two-source provenance ------------------------------------------------ */
.provenance-table { width: 100%; }
.provenance-table th:nth-child(2) { color: var(--muted, #8a8f98); }
.provenance-table tr.drift-prominent td { background: #fff5f5; font-weight: 600; }
.provenance-table tr.drift-info td { background: #fbfaf4; }
.drift-note-row td {
  font-size: .75rem; color: var(--muted, #6b7280);
  padding-top: 0; border-top: 0; font-weight: 400;
}
.drift-chip {
  display: inline-block; border-radius: 999px; padding: .05rem .4rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .02em; margin-left: .35rem;
  vertical-align: middle;
}
.drift-chip.prominent { background: #d92d20; color: #fff; }
.drift-chip.info { background: #eaecf0; color: #475467; }
.card-drift { border-left: 3px solid #d92d20; }

/* --- the ADP gateway badge ------------------------------------------------ */
.gateway-badge {
  display: block; border-radius: 8px; padding: .6rem .75rem; margin-bottom: .75rem;
  font-size: .8rem; border: 1px solid;
}
.gateway-badge strong { display: block; letter-spacing: .02em; }
.gateway-badge span { display: block; margin-top: .2rem; color: var(--muted, #475467); }
.gateway-badge.tone-neutral { background: #f8f9fb; border-color: #d8dbe0; }
.gateway-badge.tone-warn { background: #fffaeb; border-color: #f5c26b; }

/* --- the reported-terminated banner --------------------------------------- */
/* Prominent, and deliberately NOT red: red reads as "this person is gone",
   which is the one thing this banner must not claim. */
.annotation-banner {
  border: 1px solid #f5c26b; background: #fffaeb; border-radius: 8px;
  padding: .75rem .9rem; margin-bottom: 1rem;
}
.annotation-banner strong { font-size: .95rem; }
.ann-date {
  display: inline-block; margin-left: .5rem; font-size: .72rem; font-weight: 600;
  background: #fff; border: 1px solid #e4c07a; border-radius: 999px; padding: .05rem .45rem;
}
.ann-meta { font-size: .78rem; color: #6b5b2a; margin-top: .25rem; }
.ann-caveat { font-size: .75rem; color: #475467; margin-top: .4rem; line-height: 1.5; }

/* --- classification queue -------------------------------------------------- */
.classify-table td { vertical-align: top; }
.classify-table .blocked-row td { background: #fbfbfc; color: var(--muted, #6b7280); }
.inferred-from { display: block; font-size: .7rem; color: var(--muted, #8a8f98); }
.blocker { font-size: .76rem; color: #a15c07; }
.nav-count {
  display: inline-block; margin-left: .3rem; background: #d92d20; color: #fff;
  border-radius: 999px; font-size: .64rem; font-weight: 700; padding: 0 .35rem;
}

/* Wide tables must scroll inside their own container, never the page body. */
.classify-table, .provenance-table { display: table; }
@media (max-width: 900px) {
  #classify-root, .card:has(.provenance-table) { overflow-x: auto; }
}

/* PAST EMPLOYEES — DELETED 2026-10-06 (lane org-live).
   This section styled a disclosure block (.past-block / .past-toggle /
   .past-list / .past-person / .past-badge) that listed everyone who had left,
   at the bottom of each expanded group. The server no longer sends that list
   to anybody (Art 2026-10-06, R2), so there is nothing to style. The rules
   are deleted rather than left dead: a stylesheet that still knows how to
   lay the block out is half an invitation to put it back. The chain-break
   flag below is what replaced it on the screen. */

/* --- the two-line footer -------------------------------------------------- */
.footer-line { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; }
.footer-context {
  margin-top: .2rem; font-size: .72rem; color: var(--muted, #8a8f98);
}

/* ==========================================================================
   ADP GATEWAY — the red-flag section (2026-09-02)
   ========================================================================== */
/* Red because it is a compliance gap with an owner and an expected end state
   of zero. Distinct from the amber reported-terminated banner, which is a
   note that changes nothing. */
.gateway-alert {
  border: 1px solid #d92d20; border-left-width: 4px;
  background: #fff5f5; border-radius: 8px;
  padding: .75rem .9rem; margin-bottom: .9rem;
}
.gateway-alert-title {
  font-weight: 700; letter-spacing: .02em; color: #912018; font-size: .9rem;
}
.gateway-alert-note {
  margin: .3rem 0 .6rem; font-size: .78rem; color: #6b4a45; line-height: 1.5;
}
.gateway-alert-table, .table-scroll { overflow-x: auto; }
.gateway-alert table { width: 100%; font-size: .8rem; }
.gateway-alert thead th {
  text-align: left; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; color: #912018; border-bottom: 1px solid #f3c1bd;
}
.gateway-alert td { padding: .3rem .4rem; border-bottom: 1px solid #fbe3e1; }
.gateway-alert .muted { color: #98a2b3; font-style: italic; }

/* The exemption is stated quietly and separately. Rendering it inside the red
   band would make an exemption look like a violation. */
.gateway-footnote {
  margin: 0 0 .9rem; font-size: .72rem; color: var(--muted, #8a8f98);
}

/* ==========================================================================
   THE COSTING PAIR (§8) — location IS the cost center, work_mode IS the
   arrangement. An implied value must LOOK implied: costing reads this column
   and 216 of 280 active people have never had one recorded.
   ========================================================================== */
.costing-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .55rem .7rem; margin-bottom: .75rem;
  background: var(--tint, #f2f5f9); border-radius: 8px; font-size: .84rem;
}
.costing-part { display: inline-flex; align-items: center; gap: .4rem; }
.costing-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted, #8a8f98); font-weight: 700;
}
.costing-value { font-weight: 600; }
.costing-sep { color: var(--muted, #b0b6bf); }
.costing-note {
  margin: -.35rem 0 .75rem; font-size: .73rem; color: var(--muted, #6b7280);
  line-height: 1.5;
}
.costing-line .fact-edit { opacity: 1; }

/* IMPLIED styling — muted and marked, never presented as a recorded value. */
.wm-implied {
  color: var(--muted, #8a8f98); font-style: italic; font-weight: 500;
  border-bottom: 1px dotted currentColor; cursor: help;
}
.costing-chip {
  font-size: .68rem; color: var(--muted, #6b7280);
  background: var(--tint, #f2f5f9); border-radius: 999px;
  padding: .05rem .45rem; white-space: nowrap;
}
.work-mode-summary { font-size: .68rem; color: var(--muted, #8a8f98); white-space: nowrap; }
.wm-unset { color: #b54708; font-weight: 700; }

/* A manager who has LEFT is a broken chain, not a cross-group reference. */
.flag.chain-break { background: #fff5f5; color: #912018; border: 1px solid #f3c1bd; }

/* ==========================================================================
   THE FILTER BAR (§9) + THE LEADERSHIP LENS (§10)
   ========================================================================== */
.summary-strip {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
  padding: .5rem .7rem; margin-bottom: .6rem;
  background: #0f172a; color: #e2e8f0; border-radius: 8px; font-size: .76rem;
}
.summary-strip .strip-primary { font-size: .9rem; }
.summary-strip .strip-primary b { color: #fff; }
.summary-strip .strip-group { color: #cbd5e1; }
.summary-strip .strip-warn { color: #fbbf24; font-weight: 700; }
.summary-strip .strip-bad { color: #fca5a5; font-weight: 700; }

.filter-bar {
  border: 1px solid var(--line, #d8dbe0); border-radius: 8px;
  padding: .55rem .7rem; margin-bottom: .7rem; background: #fff;
}
.filter-bar-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.facet { min-width: 0; }
.facet-name {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted, #8a8f98); font-weight: 700; margin-bottom: .2rem;
}
.facet-values { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.facet-search {
  display: block; width: 100%; max-width: 180px; margin-bottom: .25rem;
  font-size: .72rem; padding: .15rem .35rem;
  border: 1px solid var(--line, #d8dbe0); border-radius: 5px;
}
.facet-value {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--line, #d8dbe0); background: #fff;
  border-radius: 999px; padding: .1rem .5rem;
  font-size: .73rem; cursor: pointer; color: var(--ink, #1d2126);
}
.facet-value:hover { background: var(--tint, #f2f5f9); }
.facet-value.on { background: #0f172a; color: #fff; border-color: #0f172a; }
.facet-value.on .facet-count { color: #cbd5e1; }
.facet-value.flag.on { background: #912018; border-color: #912018; }
.facet-count { font-size: .66rem; color: var(--muted, #8a8f98); }
.facet-more { font-size: .68rem; color: var(--muted, #8a8f98); }

.filter-active { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line, #d8dbe0); }
.active-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #eef2f7; border: 1px solid #cdd7e3; color: #1d2126;
  border-radius: 999px; padding: .1rem .5rem; font-size: .72rem; cursor: pointer;
}
.active-chip:hover { background: #e2e8f0; }
.chip-x { font-weight: 700; color: var(--muted, #8a8f98); }
.clear-all {
  background: none; border: 0; color: #912018; font-size: .72rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

@media (max-width: 760px) {
  .filter-bar-row { gap: .6rem; }
  .facet-search { max-width: 100%; }
}

/* ==========================================================================
   LIFECYCLE, COMPENSATION, APPRAISALS (§11)
   ========================================================================== */
.sub-head {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted, #8a8f98); font-weight: 700; margin: .9rem 0 .35rem;
}
.rt-list, .appraisal-list { list-style: none; margin: 0; padding: 0; }
.rt-list li { font-size: .8rem; padding: .25rem 0; border-bottom: 1px solid var(--line, #eef0f3); }
.rt-when { color: var(--muted, #8a8f98); font-size: .72rem; margin-right: .4rem; }
.rt-reason { color: var(--muted, #8a8f98); font-size: .72rem; margin-left: .4rem; }

/* Money gets a border, not a colour: it is sensitive, not alarming. */
.card-comp { border-left: 3px solid #0f172a; }
.ro-badge {
  background: #eaecf0; color: #475467; border-radius: 999px;
  padding: .05rem .45rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .03em; margin-left: .5rem; vertical-align: middle;
}
.comp-current {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .7rem; background: var(--tint, #f2f5f9); border-radius: 8px;
}
.comp-current-value { font-size: 1.05rem; font-weight: 700; }
.money { white-space: nowrap; }
.comp-period { margin-bottom: .6rem; }
.comp-period-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .78rem; font-weight: 700; padding: .2rem 0;
  border-bottom: 1px solid var(--line, #d8dbe0);
}
.comp-total { font-variant-numeric: tabular-nums; }
.line-type {
  display: inline-block; border-radius: 999px; padding: .02rem .4rem;
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  background: #eaecf0; color: #475467;
}
.line-type.incentive { background: #e6f4ea; color: #1e6c33; }
.line-type.bonus { background: #fff2e0; color: #9a5b00; }
.line-type.adjustment { background: #fdeaea; color: #912018; }
/* An engine line and a human line read very differently; the UI says which. */
.by-engine {
  font-size: .68rem; font-weight: 700; color: #475467;
  border: 1px dashed #cdd7e3; border-radius: 4px; padding: 0 .3rem;
}
.comp-add { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--line, #d8dbe0); }
.comp-add-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.comp-add-row input, .comp-add-row select {
  border: 1px solid var(--line, #d8dbe0); border-radius: 6px;
  padding: .2rem .4rem; font-size: .78rem;
}
.comp-add-row #comp-note { flex: 1 1 160px; min-width: 120px; }
.comp-add textarea { width: 100%; margin-top: .35rem; min-height: 60px; }

.appraisal-list li { padding: .45rem 0; border-bottom: 1px solid var(--line, #eef0f3); }
.appraisal-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; font-size: .8rem; }
.appraisal-note { font-size: .82rem; margin-top: .2rem; line-height: 1.5; white-space: pre-wrap; }

.dual-office .dual-link { margin-top: .3rem; font-size: .76rem; }

/* ==========================================================================
   THE EMAIL IS THE PERSON KEY (Art's ruling, 2026-09-02)
   ==========================================================================
   Names collide across 280+ people. The mailbox is how ADP, RingCentral and
   Microsoft identify somebody -- and how a human tells two Harsh Kumars
   apart. So it renders beside the name in every picker and disambiguation
   surface, never only as a fallback when the job title is missing. */
.picker-email, .cand-email, .row-email {
  display: block; font-size: .68rem; color: var(--muted, #8a8f98);
  overflow-wrap: anywhere;
}
.cand-email { display: inline-block; margin-left: .3rem; }

/* The reconcile band is NEUTRAL, not red: an unresolved identity is a
   question for a human, not a compliance failure by anybody. */
.reconcile-band {
  border: 1px solid #cdd7e3; border-left: 4px solid #64748b;
  background: #f8fafc; border-radius: 8px;
  padding: .7rem .85rem; margin-bottom: .9rem;
}
.reconcile-head strong { font-size: .86rem; color: #334155; letter-spacing: .01em; }
.reconcile-note {
  margin: .25rem 0 .55rem; font-size: .76rem; color: #475569; line-height: 1.5;
}
.reconcile-band table { width: 100%; font-size: .78rem; }
.reconcile-band thead th {
  text-align: left; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b; border-bottom: 1px solid #dbe2ea;
}
.reconcile-band td { padding: .3rem .4rem; border-bottom: 1px solid #eef2f6; }
.reconcile-band tr.resolved td { opacity: .68; }
.resolved-chip {
  background: #e6f4ea; color: #1e6c33; border-radius: 999px;
  padding: .02rem .4rem; font-size: .64rem; font-weight: 700;
}
.open-chip {
  background: #fff2e0; color: #9a5b00; border-radius: 999px;
  padding: .02rem .4rem; font-size: .64rem; font-weight: 700;
}

/* ==========================================================================
   MODULE ACCESS TILES — the grant door (§12)
   ==========================================================================
   Read-only for everyone but the editor circle, exactly as before. An exec's
   access is derived from their department and a dynamic entitlement from
   their role; neither is a grant row, so neither offers a button. */
.mod-grid {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.mod-tile {
  border: 1px solid var(--line, #d8dbe0); border-radius: 8px;
  padding: .45rem .55rem; background: #fff; min-width: 0;
}
.mod-tile.on { border-color: #bcd7c4; background: #f6fbf7; }
.mod-tile.off { background: #fbfbfc; }
.mod-name { font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.mod-state {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #8a8f98); margin-top: .1rem;
}
.mod-tile.on .mod-state { color: #1e6c33; }
.mod-by { font-size: .64rem; color: var(--muted, #8a8f98); margin-top: .15rem;
          overflow-wrap: anywhere; }
.mod-why { font-size: .64rem; color: var(--muted, #a0a6ae); margin-top: .3rem;
           font-style: italic; }
.mod-btn {
  margin-top: .35rem; width: 100%; cursor: pointer;
  border-radius: 6px; padding: .12rem .4rem; font-size: .7rem; font-weight: 600;
  border: 1px solid var(--line, #d8dbe0); background: #fff;
}
.mod-btn.grant { border-color: #1e6c33; color: #1e6c33; }
.mod-btn.grant:hover { background: #e6f4ea; }
.mod-btn.revoke { border-color: #d92d20; color: #912018; }
.mod-btn.revoke:hover { background: #fff5f5; }
.mod-btn:disabled { opacity: .55; cursor: default; }

.copy-add { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.copy-have { margin-top: .3rem; font-size: .72rem; }


/* The grant-confirm subject line: code · email · location, so the operator
   confirms a PERSON and not a mailbox. Added 2026-09-09 with the grid's
   identity line, for the same mis-grant. */
.access-module-table .name { font-weight: 600; color: var(--ink); display: block; }
.access-module-table .ident {
  display: block; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; word-break: break-word;
}

.modal-ident {
  margin: -4px 0 10px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; word-break: break-word;
}