/* 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); }

.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; }
}