/* OrgFoundry SPA stylesheet -- extracted from orgfoundry-live.html */
/* Extracted to allow removal of style-src unsafe-inline from CSP      */


  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap');

  :root {
    --font-sans: 'IBM Plex Sans', Arial, sans-serif;
    --navy: #062B49; --navy-deep: #021A2E; --navy-ink: #01172A; --orange: #FF5A00;
    /* A3 / UI_DEBT P1.e - WCAG AA (1.4.3) token sweep: grays + r-med darkened to
       >=4.5:1 on white; --orange-text is an AA-safe orange for TEXT/links on light
       (brand --orange #FF5A00 retained for fills/accents; orange buttons already
       use dark var(--navy-ink) text = 4.63:1, which passes). */
    --orange-bright: #FF6A13; --orange-text: #D14900; --yellow: var(--orange); --yellow-dim: #B13D00; --yellow-bg: #FFF1E8;
    --black: var(--navy-deep); --charcoal: #0B2A45; --steel: #163A59;
    --iron: #5E7181; --slate: #6A7783; --mist: #D5DEE6;
    --muted-text: #536879; --subtle-text: #637786;
    --nav-text: #EAF2F8; --nav-muted: #B8C7D3;
    --smoke: #DCE3E8; --paper: #F7F9FB; --white: #FFFFFF;
    --r-high: #C62828; --r-high-bg: #FFEBEE;
    --r-med: #C54500;  --r-med-bg:  #FFF3E0;
    --r-low: #2E7D32;  --r-low-bg:  #E8F5E9;
    --tools: var(--orange); --ind: #0D5B89; --corp: #647883;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
    --radius: 10px;
    --transition: .15s cubic-bezier(.4,0,.2,1);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--smoke); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--mist); }

  body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--black);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ── NAV ───────────────────────────────────────────────────────────────── */
  #nav {
    background: linear-gradient(180deg, #082F4E 0%, var(--navy-deep) 100%);
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 2px solid var(--orange-bright);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
  }
  #nav .logo { display: flex; align-items: center; gap: 10px; margin-right: 12px; min-width: max-content; }
  #nav .logo-icon {
    width: 34px; height: 34px;
    background: var(--white);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
  }
  #nav .logo-icon img { width: 100%; height: 100%; display: block; }
  #nav .logo-name { font-weight: 800; color: var(--white); font-size: 16px; letter-spacing: 0; line-height: 1; }
  .brand-org { color: var(--white); }
  .brand-foundry { color: var(--orange-bright); }
  #nav .logo-sub {
    font-family: var(--font-sans);
    font-size: 8px; color: var(--nav-muted);
    background: rgba(255,255,255,.1);
    padding: 2px 7px; border-radius: 4px;
    letter-spacing: .08em; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.18);
  }
  .tabs { display: flex; gap: 1px; }
  .tab {
    padding: 5px 11px;
    border-radius: 6px; border: none; cursor: pointer;
    font-weight: 700; font-size: 10px;
    font-family: var(--font-sans);
    letter-spacing: .06em;
    background: transparent; color: var(--nav-muted);
    transition: all var(--transition);
    text-transform: uppercase;
  }
  .tab:hover { color: var(--white); background: rgba(255,255,255,.12); }
  .tab.active { background: var(--orange-bright); color: var(--navy-ink); }
  .roles {
    margin-left: auto;
    display: flex; gap: 2px;
    background: rgba(255,255,255,.08);
    border-radius: 8px; padding: 3px;
    border: 1px solid rgba(255,255,255,.14);
  }
  .role-btn {
    padding: 4px 11px; border-radius: 5px; border: none; cursor: pointer;
    font-weight: 800; font-size: 9px;
    font-family: var(--font-sans);
    background: transparent; color: var(--nav-muted);
    transition: all var(--transition);
    letter-spacing: .05em;
  }
  .role-btn:hover { color: var(--white); }
  .role-btn.active-role { background: var(--orange-bright); color: var(--navy-ink); }

  /* ── TOOLBAR ───────────────────────────────────────────────────────────── */
  /* Single-row instrument panel. The previous wrap-to-two-rows behavior was
     a symptom of every feature mounting its own pill into the share group;
     after the step-4 More menu refactor the toolbar holds only the high-
     frequency controls and fits on one row. Softer background and reduced
     padding keep the bar visually attached to the dark nav above rather
     than competing with the analytics canvas below. */
  #toolbar {
    background: #F8F9FB;
    padding: 5px 14px;
    display: flex; gap: 6px; align-items: center;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--smoke);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
  }
  .toolbar-group { display: flex; gap: 4px; align-items: center; }
  .toolbar-sep { width: 1px; height: 18px; background: #ECEEF1; margin: 0 4px; flex-shrink: 0; }
  .tb-spacer { flex: 1 1 auto; min-width: 16px; }
  #toolbar input, #toolbar select {
    padding: 5px 10px;
    border: 1.5px solid var(--smoke); border-radius: 6px;
    font-size: 11px; font-family: 'IBM Plex Sans', sans-serif;
    color: var(--steel); background: var(--paper);
    transition: border-color var(--transition);
    outline: none;
  }
  #toolbar input:focus, #toolbar select:focus { border-color: var(--yellow); background: var(--white); }
  #toolbar input { width: 200px; }

  .btn {
    padding: 5px 11px; border-radius: 6px; border: none;
    cursor: pointer; font-weight: 700; font-size: 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    transition: all var(--transition);
    white-space: nowrap;
  }
  .btn:hover { filter: brightness(0.94); }
  .btn-yellow { background: var(--yellow); color: var(--black); }
  .btn-outline {
    background: var(--white); color: var(--steel);
    border: 1.5px solid var(--smoke) !important;
  }
  .btn-outline:hover { border-color: var(--mist) !important; color: var(--black); }

  /* ── LAYOUT ────────────────────────────────────────────────────────────── */
  #workspace { flex: 1; display: flex; overflow: hidden; min-height: 0; position: relative; }

  #scenario-sidebar {
    width: 220px;
    background: #111; border-right: 1px solid #1E1E1E;
    display: flex; flex-direction: column;
    overflow: hidden; flex-shrink: 0;
  }
  #scenario-sidebar h3 {
    padding: 13px 15px 9px;
    color: var(--yellow); font-size: 10px; font-weight: 800;
    border-bottom: 1px solid #1E1E1E;
    font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .1em;
    text-transform: uppercase;
  }
  .sc-item {
    padding: 9px 14px; border-bottom: 1px solid #191919;
    cursor: pointer; transition: background var(--transition);
  }
  .sc-item:hover, .sc-item.active { background: #1C1C00; }
  .sc-item .sc-name { font-size: 11px; font-weight: 700; color: var(--mist); line-height: 1.3; }
  .sc-item.active .sc-name { color: var(--yellow); }
  .sc-status { font-family: 'IBM Plex Sans', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .07em; }
  .sc-desc { font-size: 9px; color: var(--iron); line-height: 1.4; margin-top: 2px; }
  .sc-new-btn { width:100%; background:#1A1A00; color:var(--yellow); border:1px solid rgba(255,90,0,.2) !important; font-family:'IBM Plex Sans',sans-serif; font-size:11px; padding:9px 0; letter-spacing:.05em; transition:all var(--transition); }
  .sc-new-btn:hover { background:#222200; border-color:rgba(255,90,0,.4) !important; }

  /* ── ORG CHART ─────────────────────────────────────────────────────────── */
  #org-view { flex: 1; overflow: hidden; background-color: #F7F6F1; background-image: radial-gradient(circle, #C8C8C0 1px, transparent 1px); background-size: 24px 24px; min-height: 0; }
  #org-canvas { padding: 0; min-width: max-content; user-select: none; -webkit-user-select: none; position: relative; }
  #org-tree-inner { position: relative; }
  .org-node-wrap { position: absolute; z-index: 1; }
  .org-connector-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }

  @keyframes nodeIn { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:none; } }
  /* ── ORG NODES ─────────────────────────────────────────────────────────── */
  .org-node {
    border-radius: 12px;
    cursor: pointer;
    animation: nodeIn .2s ease both;
    background: var(--white);
    border: 1.5px solid #E2E2DF;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    position: relative; user-select: none;
    overflow: hidden;
  }
  /* Layout: compact */
  .layout-compact .org-node { min-width: 158px; max-width: 192px; padding: 0; }
  /* Layout: standard */
  .layout-standard .org-node { min-width: 178px; max-width: 216px; padding: 0; }
  /* Layout: detailed */
  .layout-detailed .org-node { min-width: 220px; max-width: 280px; padding: 0; }

  /* Detailed-card metric rows (label/value pattern, OrgVue-style) */
  .org-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 9.5px;
    padding: 3px 0;
    border-top: 1px solid #F0F0EE;
    line-height: 1.4;
  }
  .org-metric-row:first-of-type { border-top: 0; padding-top: 4px; }
  .org-metric-lbl {
    color: #888;
    font-weight: 500;
    letter-spacing: 0.01em;
    flex-shrink: 0;
    margin-right: 8px;
  }
  .org-metric-val {
    color: #1A1A1A;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .org-node:hover { box-shadow: 0 4px 14px rgba(0,0,0,.11); transform: translateY(-1px); border-color: rgba(0,0,0,.15); }
  .org-node.selected {
    background: var(--charcoal); border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255,90,0,.2), 0 4px 14px rgba(0,0,0,.2);
    transform: translateY(-1px);
  }
  .org-node.dragging { opacity: .3; cursor: grabbing; transform: none; }
  #import-dropzone.dz-over  { border-color: #FF5A00 !important; background: rgba(255,90,0,.05) !important; }
  .org-node.drag-over-valid  { border-color: #66BB6A !important; box-shadow: 0 0 0 3px rgba(102,187,106,.2) !important; background: #F1F8F1 !important; transform: none; }
  .org-node.drag-over-invalid{ border-color: #EF5350 !important; box-shadow: 0 0 0 3px rgba(239,83,80,.2)  !important; transform: none; }
  .org-node.vacant   { background: #FBF8EF; border-style: solid !important; border-color: rgba(245,127,23,.45) !important; }
  .org-node.proposed { background: #FFFEF0; border-color: rgba(255,90,0,.4) !important; }

  /* Node inner layout */
  .node-seg-bar  { height: 4px; width: 100%; border-radius: 0; flex-shrink: 0; }
  .node-body     { padding: 10px 12px 10px 12px; display: flex; flex-direction: column; gap: 0; }
  .layout-compact  .node-body { padding: 8px 10px; }
  .layout-detailed .node-body { padding: 12px 14px; }

  /* Avatar row */
  .node-avatar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .layout-compact .node-avatar-row { gap: 6px; margin-bottom: 5px; }
  .node-meta { min-width: 0; flex: 1; }

  /* Name + code */
  .node-name  { font-size: 11px; font-weight: 700; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
  .node-code  { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; color: var(--muted-text); letter-spacing: .05em; margin-top: 1px; }
  .org-node.selected .node-name  { color: var(--yellow); }
  .org-node.selected .node-code  { color: #888; }

  /* Title */
  .node-title { font-size: 10px; font-weight: 600; color: var(--slate); line-height: 1.4; margin-bottom: 5px; }
  .layout-compact .node-title  { font-size: 9.5px; margin-bottom: 4px; }
  .layout-detailed .node-title { font-size: 11px; }
  .org-node.selected .node-title { color: var(--smoke); }

  /* Pills row */
  .node-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; align-items: center; }
  .node-pill  { font-family: 'IBM Plex Sans', sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .04em;
                padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
  .pill-grade    { background: #F3E5F5; color: #6A1B9A; }
  .pill-segment  { background: #E3F2FD; color: #1565C0; }
  .pill-location { background: #F1F8E9; color: #2E7D32; }
  .pill-span     { background: #252525; color: #fff; }
  .pill-span.over  { background: #7B1FA2; }
  .pill-vacant   { background: #FFF3E0; color: #E65100; border: 1px dashed #FFCC80; }

  /* Salary */
  .node-salary { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; color: #555; font-weight: 700; }
  .node-flc    { font-size: 9px; color: #9575CD; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; }
  .org-node.selected .node-salary { color: var(--smoke); }

  /* Risk */
  .risk-fill  { height: 100%; border-radius: 3px; transition: width .4s; }

  .span-badge { position: absolute; top: -8px; left: 14px; color: #fff; border-radius: 8px; padding: 1px 6px; font-size: 7.5px; font-weight: 800; font-family: 'IBM Plex Sans', sans-serif; box-shadow: var(--shadow-sm); }

  /* Tag (legacy compat) */
  .tag { font-size: 8px; background: var(--paper); color: var(--slate); border-radius: 4px; padding: 1px 5px; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: .03em; }
  .node-tags { display: flex; gap: 3px; flex-wrap: wrap; }

  /* Photo / avatar */
  .node-photo-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
  .node-photo-wrap:hover::after { content: '📷'; position: absolute; inset: 0; background: rgba(0,0,0,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }
  .node-photo { border-radius: 50%; object-fit: cover; display: block; }
  .avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex-shrink: 0; font-family: 'IBM Plex Sans', sans-serif; cursor: pointer; }
  .node-person { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }

  /* Layout buttons */
  .layout-btn { padding: 3px 9px; border: 1.5px solid var(--smoke); border-radius: 6px; background: var(--white); font-size: 10px; font-weight: 700; color: var(--slate); cursor: pointer; transition: all .15s; font-family: 'IBM Plex Sans', sans-serif; }
  .layout-btn.active { background: var(--black); color: var(--yellow); border-color: var(--black); }
  .layout-btn:not(.active):hover { border-color: var(--yellow); color: var(--yellow); }

  /* Field pills in bar */
  .field-pill { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:10px; font-size:9px; font-weight:700; font-family:'IBM Plex Sans',sans-serif; letter-spacing:.04em; background:var(--black); color:var(--yellow); cursor:pointer; }
  .field-pill:hover { opacity:.75; }

  /* Drag ghost */
  #drag-ghost { position: fixed; pointer-events: none; z-index: 9999; opacity: .92; background: var(--charcoal); border: 2px solid var(--yellow); border-radius: 10px; padding: 8px 12px; color: var(--yellow); font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; font-size: 11px; min-width: 120px; box-shadow: var(--shadow-lg); display: none; }

  /* Node display toggles */
  #node-display-bar { padding: 5px 16px; background: var(--paper); border-bottom: 1px solid #EBEBEB; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; flex-shrink: 0; position: relative; z-index: 10; }
  .nd-label { font-size: 8.5px; color: var(--muted-text); font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-right: 4px; }
  .nd-hint { margin-left:auto; font-size:9px; color:var(--muted-text); font-family:'IBM Plex Sans',sans-serif; letter-spacing:.03em; opacity:.82; }
  .node-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; border: 1.5px solid var(--smoke); background: var(--white); color: var(--muted-text); font-size: 9px; font-weight: 700; font-family: 'IBM Plex Sans', sans-serif; cursor: pointer; transition: all var(--transition); letter-spacing: .04em; user-select: none; }
  .node-toggle:hover { border-color: var(--mist); color: var(--steel); }
  .node-toggle.active { background: var(--black); border-color: var(--yellow); color: var(--yellow); }
  .node-toggle-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

  /* Aggregate popover */
  #agg-popover {
    position: fixed; z-index: 500; pointer-events: none;
    background: var(--charcoal); border: 1px solid #333; border-radius: 12px;
    padding: 12px 16px; min-width: 200px; box-shadow: var(--shadow-lg);
    font-family: 'IBM Plex Sans', sans-serif; display: none;
    animation: popIn .1s ease;
  }
  @keyframes popIn { from { opacity:0; transform:scale(.96) translateY(-4px); } to { opacity:1; transform:none; } }
  .agg-title { font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; font-weight: 800; color: var(--yellow); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #2E2E2E; }
  .agg-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
  .agg-label { font-size: 10px; color: var(--iron); }
  .agg-val { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 800; color: var(--smoke); }
  .agg-sub { font-size: 9px; color: var(--iron); margin-top: 6px; padding-top: 5px; border-top: 1px solid #2A2A2A; line-height: 1.5; }

  /* ── GRID ──────────────────────────────────────────────────────────────── */
  #grid-view { flex: 1; overflow: auto; }
  #grid-view table { width: 100%; border-collapse: collapse; font-size: 11px; }
  #grid-view thead th { background: var(--black); color: var(--nav-muted); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: 9px 11px; text-align: center; border-right: 1px solid rgba(255,255,255,.18); position: sticky; top: 0; white-space: nowrap; }
  #grid-view thead th:last-child { border-right: 0; }
  #grid-view tbody tr { border-bottom: 1px solid #EFEFEF; cursor: pointer; transition: background var(--transition); }
  #grid-view tbody tr:hover { background: var(--yellow-bg) !important; }
  #grid-view tbody tr.sel-row { background: var(--yellow-bg) !important; }
  /* Hierarchy change-request rows (dark theme) - replaces inline onmouseover/onmouseout (PH3.4-a) */
  .hier-req-row:hover { background: #1a2332; }
  /* Scenario workspace plan rows (inline bg on the row needs !important to override) */
  .sw-plan-row:hover { background: var(--yellow-bg) !important; }
  /* New-position salary suggestion cards + saved-report rows - replaces inline hover (PH3.4-f) */
  .np-suggestion-card:hover { border-color: var(--yellow) !important; }
  /* IN-10 §2 - New Position "kind" segmented control (Human | ✦ AI Agent) + agent helper */
  .np-kind-toggle { display:flex; border:1.5px solid var(--smoke); border-radius:8px; overflow:hidden; }
  .np-kind-btn { flex:1; padding:7px 10px; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.02em; background:var(--white); color:var(--muted-text); border:0; cursor:pointer; transition:background var(--transition), color var(--transition); }
  .np-kind-btn + .np-kind-btn { border-left:1.5px solid var(--smoke); }
  .np-kind-btn.is-active { background:var(--navy); color:var(--white); }
  .np-kind-btn#np-kind-agent.is-active { background:var(--yellow-bg); color:var(--orange-text); box-shadow: inset 0 0 0 1.5px var(--orange); }
  .np-help { font-size:9px; color:var(--muted-text); margin-top:4px; line-height:1.4; }
  .np-na-note { font-size:11px; color:var(--muted-text); padding:8px 0; }
  /* Disabled context-menu item (e.g. "Add AI Agent reporting here" on an agent seat - R2). */
  .ctx-item-disabled { opacity:.45; cursor:not-allowed; }
  .saved-report-row:hover { background: var(--paper); }
  /* Org chart collapse/expand toggle - replaces inline onmouseenter/onmouseleave (PH3.4-f2) */
  .org-collapse-btn:hover { border-color: #333 !important; color: #111 !important; }
  #grid-view tbody td { padding: 7px 11px; border-right: 1px solid #F0F0F0; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
  /* Short-entry columns center their values (tagged .gc in renderGrid); long
     free-text columns (title, dept, incumbent, location) stay left-aligned. */
  #grid-view tbody td.gc { text-align: center; }
  .status-badge { padding: 2px 7px; border-radius: 20px; font-size: 8.5px; font-weight: 800; font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .04em; }

  /* ── SPANS ─────────────────────────────────────────────────────────────── */
  #spans-view { flex: 1; overflow-y: auto; padding: 24px; background: var(--paper); }
  .section-head { font-weight: 800; font-size: 17px; color: var(--black); letter-spacing: -.02em; margin-bottom: 4px; }
  .section-sub { font-size: 11px; color: var(--slate); margin-bottom: 18px; }
  .kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
  .kpi-card { background: var(--white); border: 1.5px solid var(--smoke); border-radius: 10px; padding: 13px 15px; box-shadow: var(--shadow-sm); }
  .kpi-card .label { font-size: 8.5px; color: var(--muted-text); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
  .kpi-card .value { font-family: 'IBM Plex Sans', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-top: 2px; }
  .kpi-card .sub { font-size: 9px; color: var(--muted-text); margin-top: 3px; }
  .card { background: var(--white); border: 1.5px solid var(--smoke); border-radius: 10px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
  .card-head { background: var(--black); padding: 10px 16px; font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 800; color: var(--yellow); text-transform: uppercase; letter-spacing: .1em; }
  .bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 16px; }
  .bar-label { font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; color: var(--slate); width: 24px; }
  .bar-track { flex: 1; height: 16px; background: var(--paper); border-radius: 4px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1); }
  .bar-count { font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; color: var(--slate); width: 64px; }
  .spans-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .spans-table th { padding: 7px 12px; text-align: left; color: var(--muted-text); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid var(--smoke); background: var(--paper); }
  .spans-table td { padding: 8px 12px; border-bottom: 1px solid var(--smoke); }

  /* ── HEADCOUNT ─────────────────────────────────────────────────────────── */
  #hc-view { flex: 1; display: flex; overflow: hidden; }
  #hc-list { width: 400px; border-right: 1.5px solid var(--smoke); overflow-y: auto; background: var(--paper); flex-shrink: 0; }
  #hc-list-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--smoke); background: var(--white); position: sticky; top: 0; z-index: 5; }
  #hc-list-head h3 { font-weight: 800; color: var(--black); font-size: 14px; }
  #hc-list-head p { font-size: 10px; color: var(--muted-text); margin-top: 2px; }
  .hc-item { padding: 12px 18px; border-bottom: 1px solid var(--smoke); cursor: pointer; background: var(--white); transition: background var(--transition); }
  .hc-item:hover, .hc-item.active { background: var(--yellow-bg); }
  .hc-item-title { font-weight: 700; font-size: 12px; color: var(--black); margin-bottom: 2px; }
  .hc-item-meta { font-size: 10px; color: var(--muted-text); margin-bottom: 5px; }
  .progress-track { height: 3px; background: var(--smoke); border-radius: 3px; overflow: hidden; }
  .progress-fill { height: 100%; border-radius: 3px; transition: width .4s; }
  #hc-detail { flex: 1; overflow-y: auto; padding: 26px; }
  .approval-pipeline { display: flex; gap: 0; margin-bottom: 18px; background: var(--paper); border-radius: 8px; overflow: hidden; border: 1.5px solid var(--smoke); }
  .pipeline-stage { flex: 1; padding: 9px 0; text-align: center; border-right: 1px solid var(--smoke); }
  .pipeline-stage:last-child { border-right: none; }
  .pipeline-stage .ps-name { font-size: 10px; font-weight: 800; font-family: 'IBM Plex Sans', sans-serif; }
  .pipeline-stage .ps-sub { font-size: 9px; font-family: 'IBM Plex Sans', sans-serif; }
  .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
  .detail-card { background: var(--paper); border: 1.5px solid var(--smoke); border-radius: 8px; padding: 10px 12px; }
  .detail-card .dc-label { font-size: 8.5px; color: var(--muted-text); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
  .detail-card .dc-value { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 800; color: var(--black); margin-top: 3px; }

  /* ── DETAIL PANEL ──────────────────────────────────────────────────────── */
  #detail-panel { width: 300px; background: var(--white); border-left: 1.5px solid var(--smoke); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
  #detail-panel.hidden { display: none; }
  .dp-head { background: var(--black); padding: 14px 16px 12px; }
  .dp-code { font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; color: rgba(255,90,0,.7); letter-spacing: .08em; text-transform: uppercase; }
  .dp-title { font-size: 14px; font-weight: 800; color: var(--white); line-height: 1.25; margin-top: 3px; }
  .dp-body { flex: 1; overflow-y: auto; padding: 14px; }
  .dp-section { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; padding-bottom: 4px; border-bottom-width: 2px; border-bottom-style: solid; margin-bottom: 8px; margin-top: 4px; }
  .dp-field label { display: block; font-size: 8.5px; font-weight: 700; color: var(--muted-text); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 3px; }
  .dp-field input, .dp-field textarea, .dp-field select { width: 100%; padding: 6px 9px; border: 1.5px solid var(--smoke); border-radius: 6px; font-size: 11px; font-family: 'IBM Plex Sans', sans-serif; color: var(--black); background: var(--white); transition: border-color var(--transition); outline: none; }
  .dp-field input:focus, .dp-field textarea:focus, .dp-field select:focus { border-color: var(--yellow); }
  .dp-field input:disabled, .dp-field textarea:disabled, .dp-field select:disabled { background: var(--paper); color: var(--muted-text); }
  .dp-field { margin-bottom: 9px; }
  .dp-footer { padding: 12px 14px; border-top: 1px solid var(--smoke); display: flex; gap: 6px; }
  .rm-item { text-align: center; }
  .rm-val { font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; font-weight: 800; }
  .rm-lbl { font-size: 7.5px; color: var(--muted-text); text-transform: uppercase; letter-spacing: .09em; }

  /* ── MODALS ────────────────────────────────────────────────────────────── */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
  .modal-overlay.hidden { display: none; }
  .modal { background: var(--white); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
  .modal-head { background: var(--black); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .modal-head h2 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; color: var(--yellow); font-size: 14px; letter-spacing: .06em; }
  .modal-close { background: none; border: none; color: var(--iron); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; transition: color var(--transition); }
  .modal-close:hover { color: var(--white); }
  .modal-body { padding: 20px; overflow-y: auto; flex: 1; }
  .modal-foot { padding: 14px 20px; border-top: 1px solid var(--smoke); display: flex; gap: 8px; justify-content: flex-end; background: var(--paper); flex-shrink: 0; }

  /* ── ADMIN CONSOLE (routed view) ─────────────────────────────────────── */
  .admin-view .admin-page-inner { max-width: 1400px; padding: 24px; }
  .admin-page-body {
    display: grid; grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px; align-items: start;
  }
  .admin-page-sidebar {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0;
    padding: 8px 0;
    border-right: 1px solid var(--smoke);
    padding-right: 16px;
  }
  .admin-page-tab {
    text-align: left; padding: 9px 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11.5px; font-weight: 700; color: var(--iron);
    background: none; border: 1px solid transparent;
    border-radius: 7px; cursor: pointer;
    letter-spacing: .02em;
    transition: background .12s, color .12s, border-color .12s;
  }
  .admin-page-tab:hover { background: var(--yellow-bg); color: var(--black); }
  .admin-page-tab.active { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
  .admin-page-content > section[data-admin-section] { display: none; }
  .admin-page-content > section[data-admin-section].admin-section-active { display: block; }
  /* Visibility gating fixes for the routed admin page. Without these the
     .hidden class added by applyPlatformVisibility() and the section
     selection state would be ignored. */
  .admin-page-tab.platform-admin-only.hidden,
  .admin-page-content > section.platform-admin-only.hidden { display: none !important; }
  /* Hide org-chart chrome on the admin route. switchView() in summary.js
     toggles body.in-admin-view; these rules strip the toolbar, filter chips,
     scenario context bar, the scenarios sidebar, and the HRBP workflow guide
     panel (which is otherwise pinned by inline display:flex from
     hrbp-guide.js - !important wins). */
  body.in-admin-view #toolbar,
  body.in-admin-view #scenario-context-bar,
  body.in-admin-view #scenario-sidebar,
  body.in-admin-view #hrbp-guide-panel { display: none !important; }
  /* Position toolbar is tied to the global #search/#filter-* inputs that only
     the position-list views read (Org Chart, Spreadsheet, Spans & Layers). The
     Workbench (dashboard) and Hierarchy cockpit render their own UI, so the
     toolbar is inert chrome there and stays hidden. switchView() in summary.js
     toggles in-poslist-view. */
  body:not(.in-poslist-view) #toolbar { display: none !important; }
  /* The view-control group - zoom and the ⊙ View popover (titled "Org chart
     view": node layout, fields, card color, cost basis, collapse, display) -
     only affects the org-chart canvas. It is inert chrome on the other
     Organize views (Spreadsheet, Spans & Layers, Hierarchy, Workbench), so
     scope it (and its leading separator) to the Org Chart alone. switchView()
     toggles body.in-orgchart-view. The data filters, + Position and ⋯ More
     stay, since the Spreadsheet and Spans read the #filter-* inputs. */
  body:not(.in-orgchart-view) .tb-group-view,
  body:not(.in-orgchart-view) #toolbar .tb-sep-view { display: none !important; }
  /* PowerPoint export renders one slide per org-chart layer, so it only makes
     sense on the Org Chart. The other ⋯ More exports (CSV, summary, print)
     apply to any position-list view and stay; scope just the PPTX item to the
     Org Chart. switchView() toggles body.in-orgchart-view. */
  body:not(.in-orgchart-view) #toolbar-more-menu .toolbar-more-item-orgchart-only { display: none !important; }
  .admin-console-section { background: var(--white); border: 1.5px solid var(--smoke); border-radius: 8px; padding: 20px; }
  .admin-console-section h3 { margin: 0 0 12px; font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 800; color: var(--black); text-transform: uppercase; letter-spacing: .08em; }
  .admin-console-section label.dp-field { display: block; font-size: 8.5px; font-weight: 700; color: var(--muted-text); text-transform: uppercase; letter-spacing: .09em; }
  .admin-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .admin-field-wide { grid-column: 1 / -1; }
  .admin-warning { grid-column: 1 / -1; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #F8D7A1; border-radius: 8px; background: #FFF8E8; color: #7A4A05; font-size: 11px; line-height: 1.45; }
  .admin-console-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
  /* 2-column grid for the feature catalog - 25 features render at half the
     vertical scroll. gap:1px over a smoke-colored container background
     creates the inter-cell grid lines without per-row border management. */
  .admin-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--smoke); border-radius: 8px; max-height: 480px; overflow: auto; background: var(--smoke); }
  .admin-feature-row { background: var(--paper); display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; }
  .admin-feature-row input { margin-top: 2px; }
  .admin-feature-name { font-size: 12px; font-weight: 800; color: var(--black); }
  .admin-feature-description { font-size: 10.5px; color: var(--slate); line-height: 1.35; margin-top: 2px; }
  .admin-feature-tier { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; font-weight: 800; color: var(--yellow-dim); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
  .admin-role-policy-section { margin-top: 16px; }
  .admin-static-field { margin-top: 5px; min-height: 34px; border: 1px solid var(--smoke); border-radius: 7px; background: var(--paper); color: var(--black); font-size: 12px; font-weight: 800; padding: 9px 10px; text-transform: none; letter-spacing: 0; }
  /* Permissions + Modules go side-by-side once the editor pane is wide
     enough (~720px), otherwise they stack. auto-fit keeps the narrow
     fallback that prevented the original chip-overlap issue. */
  .admin-policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
  .admin-policy-subhead { font-size: 9px; font-weight: 800; color: var(--muted-text); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
  .admin-policy-checks { border: 1px solid var(--smoke); border-radius: 8px; padding: 10px; max-height: clamp(320px, calc(100vh - 320px), 720px); overflow: auto; background: var(--paper); }
  .admin-policy-check { justify-content: flex-start; line-height: 1.25; min-width: 0; }
  .admin-policy-check > span { min-width: 0; overflow-wrap: anywhere; }
  /* Permissions: small variable-width chip set - wrap horizontally instead
     of using a fixed 3-col grid that clips short words. */
  #admin-role-policy-perms.admin-checkbox-grid {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
  }
  /* Modules: many items, similar widths - auto-fit grid that picks the
     column count from the available width instead of forcing 3. */
  #admin-role-policy-features.admin-checkbox-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .admin-audit-section { margin-top: 16px; }
  .admin-audit-list { display: grid; gap: 8px; max-height: 180px; overflow: auto; }
  .admin-audit-item { border: 1px solid var(--smoke); border-radius: 6px; padding: 9px 10px; background: var(--paper); }
  .admin-audit-action { font-size: 11px; font-weight: 800; color: var(--black); }
  .admin-audit-meta { font-size: 9.5px; color: var(--slate); margin-top: 2px; }
  .admin-console-status { min-height: 18px; margin-top: 12px; font-size: 11px; color: var(--slate); }
  .admin-only.hidden { display: none !important; }
  /* HRBP Guide button is only relevant to HR practitioners running
     divestiture workflows. Hidden for managers, finance, exec, etc. */
  .hrbp-guide-btn.hrbp-hidden { display: none !important; }
  .admin-users-section { margin-top: 16px; }
  .admin-users-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.55fr); gap: 20px; align-items: start; }
  .admin-user-list, .admin-grant-list { display: grid; gap: 8px; max-height: clamp(420px, calc(100vh - 300px), 820px); overflow: auto; padding-right: 4px; }
  .admin-grant-list { max-height: clamp(220px, calc(100vh - 540px), 420px); }
  .admin-schema-section .admin-user-list { max-height: clamp(420px, calc(100vh - 300px), 820px); }
  .admin-user-item, .admin-grant-item { width: 100%; text-align: left; border: 1px solid var(--smoke); border-radius: 7px; padding: 10px 12px; background: var(--paper); color: var(--black); cursor: pointer; transition: border-color .15s, background .15s, opacity .15s; }
  .admin-user-item:hover, .admin-user-item.selected { border-color: var(--orange); background: #FFF4EC; }
  .admin-user-name, .admin-grant-name { font-size: 11.5px; font-weight: 800; color: var(--black); display: flex; align-items: center; gap: 8px; }
  .admin-user-name-text { min-width: 0; word-break: break-word; }
  .admin-user-meta, .admin-grant-meta { font-size: 9.5px; color: var(--slate); margin-top: 3px; line-height: 1.35; }
  /* Brand-compatible active/inactive treatment for the Users & Access list:
     active users get an orange left accent on a white card; inactive users
     are dimmed to recede visually. Scoped to .admin-users-section so the
     schema-fields and role-policy lists that share .admin-user-item are
     unaffected. */
  .admin-users-section .admin-user-item { border-left-width: 3px; padding-left: 11px; }
  .admin-users-section .admin-user-item.is-active { background: var(--white); border-left-color: var(--orange); }
  .admin-users-section .admin-user-item.is-active:hover,
  .admin-users-section .admin-user-item.is-active.selected { background: #FFF4EC; }
  .admin-users-section .admin-user-item.is-inactive { opacity: .62; }
  .admin-users-section .admin-user-item.is-inactive:hover,
  .admin-users-section .admin-user-item.is-inactive.selected { opacity: 1; }
  .admin-user-status { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; margin-left: auto; }
  .admin-user-status.is-active { background: var(--yellow-bg); color: var(--yellow-dim); border: 1px solid rgba(255,90,0,.3); }
  .admin-user-status.is-inactive { background: var(--smoke); color: var(--muted-text); border: 1px solid var(--mist); }
  .admin-checkbox-row { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted-text); }
  .admin-checkbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin-top: 10px; font-size: 10.5px; color: var(--muted-text); }
  .admin-checkbox-grid label { display: inline-flex; align-items: center; gap: 6px; }
  .admin-grant-editor { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--smoke); }
  .admin-grant-delete { margin-left: auto; border: 1px solid rgba(179,38,30,.25); background: #FFF5F5; color: #B3261E; border-radius: 5px; font-size: 9px; font-weight: 800; padding: 3px 6px; cursor: pointer; }

  /* ── TOAST ─────────────────────────────────────────────────────────────── */
  #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 9px 18px; border-radius: 20px; font-weight: 700; font-size: 11px; box-shadow: var(--shadow-md); z-index: 9999; display: none; transition: opacity .2s; cursor: pointer; }

  /* ── MISC ──────────────────────────────────────────────────────────────── */
  .tag-inline { display: inline-flex; gap: 4px; flex-wrap: wrap; }
  .pill { font-size: 8px; border-radius: 4px; padding: 2px 7px; font-weight: 800; font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .04em; }
  .note-box { background: var(--yellow-bg); border: 1.5px solid rgba(255,90,0,.4); border-radius: 10px; padding: 12px 15px; font-size: 11px; color: #5D4500; line-height: 1.6; margin-top: 4px; }

  .guardrail-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .guardrail-row label { font-size: 10px; color: var(--mist); width: 110px; }
  .guardrail-row input { padding: 5px 8px; background: #1A1A1A; border: 1.5px solid #333; border-radius: 5px; color: var(--smoke); font-size: 11px; font-family: 'IBM Plex Sans', sans-serif; width: 100px; outline: none; }
  .guardrail-row input:focus { border-color: var(--yellow); }
  .guardrail-breach { background: var(--r-high-bg); border-left: 3px solid var(--r-high); padding: 5px 10px; border-radius: 0 5px 5px 0; font-size: 10px; color: var(--r-high); font-weight: 700; }

  .collapse-btn {
    position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--white); border: 2px solid #C8C8C8;
    cursor: pointer; font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    color: var(--slate); z-index: 20;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    line-height: 1; user-select: none;
  }
  .collapse-btn:hover { border-color: var(--yellow); color: var(--yellow); background: var(--black); box-shadow: 0 2px 10px rgba(255,90,0,.35); }
  .collapse-btn.is-collapsed { background: var(--black); border-color: var(--yellow); color: var(--yellow); box-shadow: 0 2px 8px rgba(255,90,0,.3); }
  /* Collapsed node gets a faint yellow glow on the card */
  .org-node-wrap.is-collapsed > .org-node { box-shadow: 0 0 0 2px rgba(255,90,0,.4), 0 4px 16px rgba(0,0,0,.10); }
  /* Collapsed badge under the card */
  .collapsed-badge {
    position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
    background: var(--black); color: var(--yellow);
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 9px;
    letter-spacing: .06em; white-space: nowrap;
    padding: 2px 8px; border-radius: 10px;
    border: 1px solid rgba(255,90,0,.3);
    pointer-events: none; z-index: 15;
  }
  .org-node-wrap { position: absolute; z-index: 1; }

  .cost-toggle { display: flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--paper); border: 1.5px solid var(--smoke); border-radius: 6px; cursor: pointer; font-size: 10px; color: var(--steel); font-weight: 700; user-select: none; transition: all var(--transition); }
  .cost-toggle:hover { border-color: var(--mist); }
  .cost-toggle.fl-on { background: #E8EAF6; border-color: #7986CB; color: #283593; }
  .toggle-switch { width: 26px; height: 14px; background: var(--smoke); border-radius: 7px; position: relative; transition: background .2s; }
  .cost-toggle.fl-on .toggle-switch { background: #7986CB; }
  .toggle-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: white; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
  .cost-toggle.fl-on .toggle-knob { left: 14px; }

  .zoom-controls { display: flex; gap: 2px; }
  .zoom-btn { width: 26px; height: 26px; border: 1.5px solid var(--smoke); background: var(--paper); border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; color: var(--steel); transition: all var(--transition); }
  .zoom-btn:hover { border-color: var(--yellow); color: var(--black); background: var(--white); }
  #org-view { transform-origin: top left; }
  #org-canvas { flex:1; padding:0; user-select: none; -webkit-user-select: none; }
  #org-tree-inner { position: relative; user-select: none; -webkit-user-select: none; }

  .salary-suggestion { border: 1.5px solid var(--smoke); border-radius: 8px; padding: 8px 11px; cursor: pointer; transition: all var(--transition); background: var(--white); }
  .salary-suggestion:hover { border-color: var(--yellow); background: var(--yellow-bg); }
  .salary-suggestion.active { border-color: var(--yellow); background: var(--yellow-bg); }
  .ss-label { font-size: 8.5px; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--iron); margin-bottom: 2px; }
  .ss-value { font-family: 'IBM Plex Sans', sans-serif; font-size: 20px; font-weight: 800; color: var(--black); }
  .ss-meta  { font-size: 9px; color: var(--muted-text); margin-top: 1px; }

  .cost-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 10px; }
  .cost-table th { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--iron); text-align: left; padding: 4px 0; border-bottom: 1.5px solid var(--smoke); }
  .cost-table td { padding: 5px 0; border-bottom: 1px solid #F0F0F0; color: var(--steel); vertical-align: middle; }
  .cost-table td.num { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 13px; text-align: right; color: var(--black); }
  .cost-table td.pct { font-size: 9px; color: var(--muted-text); text-align: right; padding-right: 6px; }
  .cost-table tr.total td { border-top: 2px solid var(--black); border-bottom: none; font-weight: 800; color: var(--black); padding-top: 7px; }
  .cost-table tr.total td.num { font-size: 15px; }
  .cost-table tr.flc-row td { background: var(--yellow-bg); }
  .cost-table tr.flc-row td.num { color: var(--yellow-dim); }
  .cost-table .comp-pct-input { width: 52px; padding: 2px 5px; border: 1.5px solid var(--smoke); border-radius: 4px; font-size: 10px; font-family: 'IBM Plex Sans', sans-serif; text-align: right; outline: none; }
  .cost-table .comp-pct-input:focus { border-color: var(--yellow); }

  .dp-tab-row { display: flex; gap: 0; border-bottom: 1.5px solid var(--smoke); margin-bottom: 12px; }
  .dp-tab { padding: 6px 13px; font-size: 10px; font-weight: 700; font-family: 'IBM Plex Sans', sans-serif; cursor: pointer; border-bottom: 2px solid transparent; color: var(--iron); letter-spacing: .04em; background: none; border-top: none; border-left: none; border-right: none; transition: all var(--transition); }
  .dp-tab:hover { color: var(--black); }
  .dp-tab.active { color: var(--black); border-bottom-color: var(--yellow); }

  .flc-row-preview { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #222; }
  .flc-row-preview.total { border-bottom: none; border-top: 1.5px solid #444; padding-top: 5px; margin-top: 2px; }

  .ent-menu-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 16px; font-size: 11px; font-weight: 700; color: var(--mist);
    cursor: pointer; transition: background .1s, color .1s;
    font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .04em;
    background: none; border: none;
  }
  .ent-menu-item:hover { background: #222; color: var(--yellow); }
  .ent-menu-item:focus-visible {
    outline: 2.5px solid var(--yellow); outline-offset: -2px;
    background: #1A1A00; color: var(--yellow);
  }
  .ent-menu-item.ent-active { color: var(--yellow); background: #1A1A00; }

  /* ── ZOOM FLOAT PANEL ──────────────────────────────────────────────────── */
  #zoom-float-wrap { position: relative; display: inline-block; }
  #zoom-float {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    z-index: 800;
    background: var(--white); border: 1.5px solid var(--smoke);
    border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.13);
    padding: 10px 14px; display: flex; flex-direction: column; gap: 8px;
    min-width: 180px; user-select: none;
    transition: opacity .2s, transform .2s;
  }
  #zoom-float.hidden { display: none; }
  #zoom-float:not(.hidden) { opacity: 1; }
  .zf-header { font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; font-weight: 800;
    color: var(--muted-text); text-transform: uppercase; letter-spacing: .1em;
    display: flex; align-items: center; justify-content: space-between; }
  .zf-pct { font-family: 'IBM Plex Sans', sans-serif; font-size: 22px; font-weight: 800;
    color: var(--black); letter-spacing: -.02em; text-align: center; line-height: 1; }
  .zf-slider { width: 100%; accent-color: var(--yellow); cursor: pointer; }
  .zf-btns { display: flex; gap: 4px; }
  .zf-btn { flex: 1; padding: 5px 0; border: 1.5px solid var(--smoke); border-radius: 6px;
    background: var(--paper); font-size: 10px; font-weight: 700; font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer; color: var(--steel); transition: all .12s; }
  .zf-btn:hover { border-color: var(--yellow); color: var(--black); background: var(--white); }
  .zf-btn.zf-fit { background: var(--black); color: var(--yellow); border-color: var(--black); }
  #zoom-float-toggle {
    position: fixed; bottom: 22px; right: 22px; z-index: 801;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--black); border: 2px solid var(--yellow);
    color: var(--yellow); font-size: 14px; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transition: all .15s;
  }
  #zoom-float-toggle:hover { background: var(--yellow); color: var(--black); }


  /* ── FIELD PICKER ────────────────────────────────────────────────────── */
  #field-picker-wrap { position: relative; display: inline-block; }
  #field-picker-panel {
    position: absolute; top: calc(100% + 6px); left: 0;
    z-index: 900; background: var(--white); border: 1.5px solid var(--smoke);
    border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.13);
    padding: 10px 12px; min-width: 210px; user-select: none;
    transition: opacity .15s, transform .15s;
  }
  #field-picker-panel.hidden { opacity: 0; pointer-events: none; transform: translateY(6px); }
  .fp-section { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; font-weight: 800;
    color: var(--muted-text); text-transform: uppercase; letter-spacing: .1em; margin: 8px 0 4px; }
  .fp-section:first-child { margin-top: 0; }
  .fp-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer;
    border-radius: 6px; transition: background .1s; }
  .fp-row:hover { background: var(--paper); }
  .fp-check { width: 14px; height: 14px; border: 1.5px solid var(--smoke); border-radius: 3px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: all .12s; font-size: 9px; color: transparent; }
  .fp-row.active .fp-check { background: var(--black); border-color: var(--black); color: var(--yellow); }
  .fp-label { font-size: 11px; font-weight: 600; color: var(--slate); flex: 1; }
  .fp-row.active .fp-label { color: var(--black); }
  .field-pill { display: flex; align-items: center; gap: 3px; background: var(--black); color: var(--yellow);
    border-radius: 5px; padding: 2px 6px 2px 7px; font-size: 9px; font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .04em; cursor: default; }
  .field-pill-x { background: none; border: none; color: rgba(255,90,0,.5); cursor: pointer;
    font-size: 11px; line-height: 1; padding: 0; margin-left: 1px; }
  .field-pill-x:hover { color: var(--yellow); }
  /* Lighter pills inside the View popover so they don't compete with the active layout button */
  #field-pills .field-pill {
    background: var(--paper); color: var(--steel);
    border: 1px solid var(--smoke);
    padding: 2px 4px 2px 8px;
  }
  #field-pills .field-pill-x { color: var(--slate); opacity: .65; }
  #field-pills .field-pill-x:hover { color: var(--orange); opacity: 1; }
  /* ── VIEW VISIBILITY - beats all ID-level CSS rules ────────────────────── */
  .hidden-view { display: none !important; }

  /* ── ENTERPRISE VIEW SHARED ──────────────────────────────────────────── */
  .ev-view {
    flex: 1; overflow-y: auto; background: var(--paper);
    min-height: 0;
  }
  .ev-inner { padding: 24px; max-width: 1400px; margin: 0 auto; }
  .ev-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
  }
  .ev-page-title { font-size: 20px; font-weight: 800; color: var(--black);
    letter-spacing: -.02em; line-height: 1.2; }
  .ev-page-sub { font-size: 11px; color: var(--muted-text); margin-top: 3px; }
  .ev-card { background: var(--white); border: 1.5px solid var(--smoke);
    border-radius: 12px; overflow: hidden; margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05); }
  .ev-card-head { background: var(--black); padding: 10px 16px;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 10px;
    font-weight: 800; color: var(--yellow); text-transform: uppercase;
    letter-spacing: .1em; display: flex; align-items: center;
    justify-content: space-between; gap: 8px; }
  .ev-card-body { padding: 16px; }
  .ev-kpi-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  .ev-kpi { background: var(--white); border: 1.5px solid var(--smoke);
    border-radius: 10px; padding: 12px 16px; flex: 1; min-width: 130px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04); }
  .ev-kpi-val { font-family: 'IBM Plex Sans', sans-serif;
    font-size: 28px; font-weight: 800; color: var(--black);
    letter-spacing: -.02em; line-height: 1; }
  .ev-kpi-lbl { font-size: 8.5px; font-weight: 700; color: var(--muted-text);
    text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
  .ev-kpi-sub { font-size: 10px; color: var(--slate); margin-top: 4px; }
  .ev-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .ev-table th { background: var(--black); color: var(--nav-muted); font-size: 8.5px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    padding: 9px 12px; text-align: left; border-right: 1px solid #292929;
    white-space: nowrap; position: sticky; top: 0; }
  .ev-table td { padding: 8px 12px; border-bottom: 1px solid #F0F0F0;
    border-right: 1px solid #F7F7F7; }
  .ev-table tr:hover td { background: var(--yellow-bg); }
  .ev-badge { font-family: 'IBM Plex Sans', sans-serif; font-size: 8px;
    font-weight: 800; padding: 2px 7px; border-radius: 10px; letter-spacing: .04em;
    white-space: nowrap; }
  .ev-badge-green  { background: #E8F5E9; color: #2E7D32; }
  .ev-badge-yellow { background: var(--yellow-bg); color: #7D5A00; }
  .ev-badge-orange { background: #FFF3E0; color: #E65100; }
  .ev-badge-red    { background: #FFEBEE; color: #C62828; }
  .ev-badge-blue   { background: #E3F2FD; color: #1565C0; }
  .ev-badge-purple { background: #F3E5F5; color: #6A1B9A; }
  .ev-badge-grey   { background: var(--paper); color: var(--slate); border: 1px solid var(--smoke); }
  .ev-tabs { display: flex; border-bottom: 2px solid var(--smoke);
    margin-bottom: 20px; gap: 0; }
  .ev-tab { padding: 8px 16px; font-size: 11px; font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif; cursor: pointer;
    border-bottom: 2px solid transparent; color: var(--iron); letter-spacing: .04em;
    background: none; border-top: none; border-left: none; border-right: none;
    margin-bottom: -2px; transition: all .15s; }
  .ev-tab:hover { color: var(--black); }
  .ev-tab.active { color: var(--black); border-bottom-color: var(--yellow); }
  .ev-empty { padding: 48px; text-align: center; color: var(--muted-text);
    font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .ev-empty-icon { font-size: 36px; opacity: .4; }
  .ev-form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    margin-bottom: 14px; }
  .ev-form-row label { font-size: 8.5px; font-weight: 700; color: var(--muted-text);
    text-transform: uppercase; letter-spacing: .09em; display: block; margin-bottom: 4px; }
  .ev-form-row input, .ev-form-row select, .ev-form-row textarea {
    padding: 6px 10px; border: 1.5px solid var(--smoke); border-radius: 7px;
    font-size: 11px; font-family: 'IBM Plex Sans', sans-serif; color: var(--steel);
    background: var(--white); outline: none; transition: border-color .15s; }
  .ev-form-row input:focus, .ev-form-row select:focus { border-color: var(--yellow); }
  .ev-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ev-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

  /* ── FOUNDRY & TOOLS SHARED (filter bars · inputs · sections · meta) ───── */
  .ev-filterbar { display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 16px; }
  .ev-filterbar .ev-spacer { flex: 1; }
  .ev-input, .ev-select, .ev-textarea {
    padding: 6px 10px; border: 1.5px solid var(--smoke); border-radius: 7px;
    font-size: 12px; font-family: 'IBM Plex Sans', sans-serif;
    color: var(--steel); background: var(--white);
    outline: none; transition: border-color var(--transition); box-sizing: border-box; }
  .ev-input:focus, .ev-select:focus, .ev-textarea:focus { border-color: var(--yellow); }
  .ev-textarea { resize: vertical; }
  .ev-form-label { display: block; font-size: 9px; font-weight: 700;
    color: var(--muted-text); text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 4px; font-family: 'IBM Plex Sans', sans-serif; }
  .ev-req { color: var(--r-high); }
  .ev-section { background: var(--white); border: 1.5px solid var(--smoke);
    border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
    box-shadow: var(--shadow-sm); }
  .ev-meta-grid { display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1px; background: var(--smoke); border: 1.5px solid var(--smoke);
    border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
  .ev-meta-cell { background: var(--white); padding: 10px 14px; }
  .ev-meta-label { font-size: 9px; font-weight: 700; color: var(--muted-text);
    text-transform: uppercase; letter-spacing: .09em; margin-bottom: 3px; }
  .ev-meta-value { font-size: 12px; color: var(--black); }

  /* ── SUCCESSION SPECIFIC ─────────────────────────────────────────────── */
  .slate-card {
    border: 1.5px solid var(--smoke); border-radius: 10px;
    overflow: hidden; margin-bottom: 10px; background: var(--white);
    transition: box-shadow .15s;
  }
  .slate-card:hover { box-shadow: var(--shadow-md); }
  .slate-head { padding: 10px 14px; display: flex; align-items: center;
    justify-content: space-between; background: var(--paper);
    border-bottom: 1px solid var(--smoke); }
  .slate-pos-title { font-weight: 800; font-size: 12px; color: var(--black); }
  .slate-pos-meta { font-size: 10px; color: var(--slate); margin-top: 1px; }
  .slate-candidate { display: flex; align-items: center; gap: 12px;
    padding: 8px 14px; border-bottom: 1px solid #F5F5F5; }
  .slate-candidate:last-child { border-bottom: none; }
  .slate-rank { font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px; font-weight: 800; color: var(--smoke); width: 20px; }
  .slate-name { font-weight: 700; font-size: 11px; color: var(--black); }
  .slate-meta { font-size: 10px; color: var(--slate); }
  .coverage-ring { position: relative; width: 90px; height: 90px; }
  .coverage-ring svg { transform: rotate(-90deg); }
  .coverage-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; }

  /* ── COMPENSATION SPECIFIC ──────────────────────────────────────────── */
  .band-bar-wrap { position: relative; height: 20px; background: var(--paper);
    border-radius: 4px; overflow: visible; min-width: 200px; }
  .band-p25-75 { position: absolute; height: 100%; border-radius: 4px;
    background: rgba(66,165,245,.2); border: 1px solid rgba(66,165,245,.4); }
  .band-midline { position: absolute; width: 2px; height: 100%;
    background: #42A5F5; border-radius: 2px; }
  .band-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%;
    top: 50%; transform: translateY(-50%); z-index: 2; }
  .compa-bar { height: 6px; border-radius: 3px; background: var(--smoke); position: relative; overflow: visible; }
  .compa-fill { height: 100%; border-radius: 3px; transition: width .4s; }
  .compa-marker { position: absolute; top: -4px; width: 2px; height: 14px;
    background: #EF5350; border-radius: 2px; transform: translateX(-50%); }

  /* ── REPORTS SPECIFIC ────────────────────────────────────────────────── */
  .filter-chip { display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; background: var(--black); color: var(--yellow);
    border-radius: 20px; font-size: 10px; font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .04em; }
  .filter-chip button { background: none; border: none; color: currentColor;
    cursor: pointer; font-size: 12px; line-height: 1; padding: 0; opacity: .7; }
  .filter-chip button:hover { opacity: 1; }
  .col-pill { display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border: 1.5px solid var(--smoke); border-radius: 20px;
    font-size: 10px; font-weight: 700; cursor: pointer; user-select: none;
    transition: all .12s; background: var(--white); color: var(--slate); }
  .col-pill.active { background: var(--yellow-bg); color: var(--orange-text); border-color: var(--orange); }
  .col-pill.active::before { content: '\2713'; font-weight: 800; }
  .col-pill:hover { border-color: var(--yellow); }
  #report-results { overflow-x: auto; }

  /* ── HRIS SPECIFIC ──────────────────────────────────────────────────── */
  .hris-config-card { border: 1.5px solid var(--smoke); border-radius: 10px;
    padding: 14px 16px; background: var(--white); margin-bottom: 10px;
    display: flex; align-items: center; gap: 14px; transition: box-shadow .15s; }
  .hris-config-card:hover { box-shadow: var(--shadow-md); }
  .hris-sys-icon { width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0; background: var(--paper); }
  .hris-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .log-row-ok  { color: #2E7D32; }
  .log-row-err { color: #C62828; }
  .log-row-run { color: #1565C0; }

  /* ── ORG TOOLS SPECIFIC ──────────────────────────────────────────────── */
  .snap-card { border: 1.5px solid var(--smoke); border-radius: 10px;
    padding: 14px 16px; background: var(--white); margin-bottom: 8px;
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    transition: all .15s; }
  .snap-card:hover { border-color: var(--yellow); background: var(--yellow-bg); }
  .acting-row { display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid #F0F0F0; }
  .acting-row:last-child { border-bottom: none; }
  .bulk-action-btn { display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 16px 14px; border: 1.5px solid var(--smoke);
    border-radius: 10px; cursor: pointer; text-align: center;
    transition: all .15s; background: var(--white); }
  .bulk-action-btn:hover { border-color: var(--yellow); background: var(--yellow-bg); }
  .bulk-action-btn .ba-icon { font-size: 22px; }
  .bulk-action-btn .ba-label { font-size: 10px; font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif; color: var(--black); letter-spacing: .04em; }
  .bulk-action-btn .ba-desc { font-size: 9px; color: var(--slate); line-height: 1.4; }

  /* analytics sub-charts */
  .wf-bar-h { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
  .wf-bar-h-label { font-size: 11px; color: var(--slate); min-width: 120px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wf-bar-h-track { flex: 1; height: 14px; background: var(--paper);
    border-radius: 3px; overflow: hidden; }
  .wf-bar-h-fill { height: 100%; border-radius: 3px;
    transition: width .5s cubic-bezier(.4,0,.2,1); }
  .wf-bar-h-val { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
    font-weight: 700; color: var(--black); min-width: 36px; text-align: right; }

  @media print {
    #nav, #toolbar, #scenario-sidebar, #detail-panel, #toast, .no-print { display: none !important; }
    body { overflow: visible; height: auto; }
    #workspace { overflow: visible; height: auto; flex-wrap: wrap; }
    /* Only expand views that are currently active (not .hidden-view).
       The previous rule used `display: block !important` on all named views,
       which overrode .hidden-view and caused every view to render simultaneously
       in static/PDF renderers (WeasyPrint, Puppeteer PDF, browser print preview). */
    #org-view:not(.hidden-view),
    #grid-view:not(.hidden-view),
    #spans-view:not(.hidden-view),
    #hc-view:not(.hidden-view),
    #analytics-view:not(.hidden-view) { overflow: visible; height: auto; display: block !important; page-break-after: always; }
  }

  /* ── LOGIN OVERLAY ─────────────────────────────────────────────────────── */
  #login-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--navy-deep); display: flex; align-items: center; justify-content: center; }
  #login-box { background: #06233D; border: 1.5px solid rgba(255,255,255,.16); border-radius: 16px; padding: 38px 40px; width: 380px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  .lb-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
  .lb-icon { width: 62px; height: 62px; background: var(--white); border: 1px solid rgba(255,255,255,.72); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 3px; flex-shrink: 0; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
  .lb-icon img { width: 100%; height: 100%; display: block; }
  .lb-title { font-family: var(--font-sans); font-weight: 800; font-size: 27px; color: var(--white); letter-spacing: 0; line-height: 1; }
  .lb-sub { font-size: 11px; color: var(--nav-muted); font-family: var(--font-sans); letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; }
  #login-box label { font-size: 9px; font-weight: 700; color: var(--nav-muted); text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 5px; }
  #login-box input { width: 100%; padding: 10px 13px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.22); background: var(--navy-deep); color: var(--white); font-size: 13px; font-family: var(--font-sans); outline: none; box-sizing: border-box; transition: border-color var(--transition), box-shadow var(--transition); }
  #login-box input:focus { border-color: var(--orange-bright); box-shadow: 0 0 0 3px rgba(255,106,19,.18); }
  .login-step { display: flex; flex-direction: column; gap: 16px; }
  .login-step.hidden, .login-loading.hidden, .login-password-panel.hidden, .login-email-link-panel.hidden, .login-secondary-btn.hidden, .lb-or.hidden { display: none; }
  #login-next-btn, #login-btn { width: 100%; padding: 12px; border-radius: 9px; border: none; cursor: pointer; background: var(--orange-bright); color: var(--navy-ink); font-weight: 800; font-size: 13px; font-family: var(--font-sans); transition: opacity var(--transition), transform var(--transition); }
  #login-next-btn:hover, #login-btn:hover { opacity: .9; transform: translateY(-1px); }
  #login-next-btn:disabled, #login-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
  .login-method-head { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
  .login-back-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: var(--white); cursor: pointer; font-size: 28px; line-height: 24px; font-family: var(--font-sans); display: flex; align-items: center; justify-content: center; padding-bottom: 3px; transition: border-color var(--transition), background var(--transition), transform var(--transition); }
  .login-back-btn:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.08); transform: translateX(-1px); }
  .login-identity-label { color: var(--nav-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .login-identity-email { color: var(--white); font-size: 15px; font-weight: 800; overflow-wrap: anywhere; margin-top: 2px; }
  .login-secondary-btn { width: 100%; padding: 12px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.24); cursor: pointer; background: transparent; color: var(--white); font-weight: 800; font-size: 13px; font-family: var(--font-sans); transition: border-color var(--transition), background var(--transition), transform var(--transition); }
  .login-secondary-btn:hover { border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.05); transform: translateY(-1px); }
  .login-secondary-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
  .login-email-link-panel { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid rgba(255,255,255,.16); border-radius: 8px; padding: 12px; background: rgba(255,255,255,.04); }
  .login-email-link-title { color: var(--white); font-size: 14px; font-weight: 800; }
  .login-email-link-copy { color: var(--nav-muted); font-size: 12px; line-height: 1.45; }
  .login-email-code-row { color: var(--white); font-size: 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
  .login-email-code-row strong { font-size: 16px; letter-spacing: .12em; }
  .login-password-panel { display: flex; flex-direction: column; gap: 14px; }
  .login-loading { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 10px 4px; text-align: center; }
  .login-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--orange-bright); animation: loginSpin .8s linear infinite; }
  .login-loading-title { color: var(--white); font-size: 15px; font-weight: 800; line-height: 1.2; }
  .login-loading-copy { color: var(--nav-muted); font-size: 11px; line-height: 1.45; max-width: 260px; }
  .login-auth-return #login-step-identifier,
  .login-auth-return #login-step-methods,
  .login-auth-return #login-password-panel,
  .login-auth-return #login-email-link-panel { display: none; }
  .login-auth-return #login-loading { display: flex; }
  @keyframes loginSpin { to { transform: rotate(360deg); } }
  .sso-login-btn { width: 100%; padding: 12px; border-radius: 9px; border: 1.5px solid rgba(255,106,19,.85); cursor: pointer; background: var(--orange-bright); color: var(--navy-ink); font-weight: 800; font-size: 13px; font-family: var(--font-sans); transition: opacity var(--transition), transform var(--transition), border-color var(--transition); }
  .sso-login-btn:hover { opacity: .95; transform: translateY(-1px); border-color: var(--white); }
  .sso-login-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
    #login-error { font-size: 11px; color: #EF9A9A; text-align: center; min-height: 14px; }
    #login-error:not(:empty) { text-align: left; color: #FFD7D7; background: rgba(239,83,80,.12);
      border: 1.5px solid rgba(239,83,80,.34); border-radius: 8px; padding: 10px 12px;
      line-height: 1.45; font-weight: 700; }
    #login-error.login-access-denied:not(:empty) { color: #F7FAFC; background: rgba(255,90,0,.14);
      border-color: rgba(255,90,0,.42); box-shadow: 0 10px 24px rgba(0,0,0,.16); }
    #login-error.login-access-denied:not(:empty)::before { content: "You don't have access";
      display: block; color: #FFB38A; font-family: 'IBM Plex Sans', sans-serif; font-size: 10px;
      font-weight: 800; letter-spacing: .08em; line-height: 1.2; margin-bottom: 4px; text-transform: uppercase; }
  .lb-or { display: flex; align-items: center; gap: 10px; color: var(--nav-muted); font-size: 10px; }
  .lb-or::before, .lb-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.16); }
  /* Quiet help line at the bottom of the methods step - gives password-only
     tenants (no SSO/email-link) a visible escape hatch when they can't sign
     in, without committing to self-service password reset UI. */
  .login-help-note { color: var(--nav-muted); font-size: 11px; text-align: center; margin-top: 4px; line-height: 1.45; }


  /* ── UI FIXES / RESPONSIVE PATCH ─────────────────────────────────────── */
  html, body { min-width: 0; }
  body { overflow: hidden; }
  /* Nav may wrap on narrow viewports. The toolbar is intentionally
     single-row on desktop (see #toolbar { flex-wrap: nowrap } above) - the
     narrow-screen wrap behavior is restored inside the ≤1180px media query
     where vertical space is the right trade. */
  #nav { flex-wrap: wrap; row-gap: 8px; align-items: center; height: auto; }
  /* Legacy .tabs sizing - scoped away from nav-v2-chapters, which sizes to
     content. The legacy `flex: 1 1 420px` clipped the v2 tabs container so
     its last chapter overlapped the right-side affordances. */
  #nav .tabs:not(.nav-v2-chapters), #nav .roles { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  #nav .tabs:not(.nav-v2-chapters) { flex: 1 1 420px; }
  #nav .roles { flex: 0 1 auto; }
  #toolbar .toolbar-group { min-width: 0; }
  #toolbar input { min-width: 180px; max-width: 100%; }
  #workspace > div { min-width: 0; }
  #scenario-sidebar, #hc-list, #detail-panel { min-width: 0; }
  #detail-panel { width: 360px; max-width: min(420px, 100vw); box-shadow: -10px 0 30px rgba(0,0,0,.06); }
  #grid-view, #spans-view, #analytics-view, #hc-detail { min-width: 0; }
  #grid-view table, .spans-table { min-width: 920px; }
  #hc-detail, #analytics-view, #spans-view, #grid-view { overflow: auto; }
  .modal { width: min(92vw, 760px) !important; max-width: 92vw; max-height: min(88vh, 960px); display: flex; flex-direction: column; }
  .modal-body { max-height: calc(88vh - 116px); }
  .modal-foot { flex-shrink: 0; }
  #org-canvas { min-width: 0; }

  @media (max-width: 1400px) {
    #detail-panel { width: 330px; }
    #scenario-sidebar { width: 200px; }
    #toolbar input { width: 170px; }
    .layout-standard .org-node { min-width: 160px; max-width: 196px; }
  }

  @media (max-width: 1180px) {
    #nav { padding: 10px 14px; }
    /* Narrow viewports: let the toolbar wrap so groups don't get clipped.
       The desktop single-row constraint is intentional at wider widths. */
    #toolbar { padding: 8px 14px; flex-wrap: wrap; row-gap: 8px; }
    #toolbar .toolbar-group { flex-wrap: wrap; }
    .tb-spacer { display: none; }
    #workspace { flex-wrap: wrap; }
    #scenario-sidebar { width: 100%; max-height: 146px; border-right: none; border-bottom: 1px solid #1E1E1E; }
    #scenarios-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; }
    #scenarios-list .sc-item { min-width: 220px; border: 1px solid #1E1E1E; border-radius: 10px; }
    #sc-live { margin: 10px 12px 0; border: 1px solid #1E1E1E; border-radius: 10px; }
    #workspace > #org-view,
    #workspace > #grid-view,
    #workspace > #spans-view,
    #workspace > #succession-view,
    #workspace > #compensation-view,
    #workspace > #reports-view,
    #workspace > #hris-view,
    #workspace > #orgtools-view,
    #workspace > #hc-view,
    #workspace > #analytics-view { flex: 1 1 calc(100% - 360px); }
    #detail-panel { order: 99; width: 100%; max-width: 100%; border-left: none; border-top: 1.5px solid var(--smoke); max-height: 44vh; }
    #hc-list { width: 320px; }
  }

  @media (max-width: 920px) {
    body { height: auto; min-height: 100vh; overflow: auto; }
    #nav .logo-sub { display: none; }
    #nav .tabs, #nav .roles { width: 100%; }
    #toolbar .toolbar-sep { display: none; }
    #toolbar .toolbar-group, #toolbar .toolbar-group:last-child { width: 100%; justify-content: flex-start; }
    #toolbar input, #toolbar select { flex: 1 1 180px; width: auto; }
    #workspace { display: block; overflow: visible; }
    #scenario-sidebar { max-height: none; }
    #org-view, #grid-view, #spans-view, #hc-view, #analytics-view { min-height: 60vh; }
    #hc-view { flex-direction: column; }
    #hc-list { width: 100%; border-right: none; border-bottom: 1px solid var(--smoke); }
    #detail-panel.hidden { display: none; }
    #detail-panel { position: fixed; right: 0; top: 0; bottom: 0; width: min(100vw, 420px); max-height: 100vh; z-index: 1100; border-top: none; border-left: 1.5px solid var(--smoke); box-shadow: -18px 0 34px rgba(0,0,0,.15); }
    #detail-panel::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.24); right: min(100vw, 420px); pointer-events: none; }
    #detail-panel.hidden::before { display: none; }
    .modal { width: min(96vw, 760px) !important; max-width: 96vw; }
    .modal-body { padding: 16px; }
    .admin-fields-grid, .admin-users-layout, .admin-checkbox-grid, .admin-policy-grid { grid-template-columns: 1fr; }
    .admin-page-body { grid-template-columns: 1fr; gap: 16px; }
    .admin-page-sidebar { position: static; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--smoke); padding: 0 0 12px; }
    /* On narrow screens, collapse the 2-column feature grid back to a single column */
    .admin-feature-list { grid-template-columns: 1fr; }
    .admin-feature-row { grid-template-columns: 20px minmax(0, 1fr); }
    .admin-feature-tier { grid-column: 2; }
  }

  @media (max-width: 640px) {
    #nav, #toolbar { padding-left: 12px; padding-right: 12px; }
    .tab, .role-btn, .btn, .node-toggle { min-height: 34px; }
    .tab { flex: 1 1 calc(50% - 4px); justify-content: center; }
    #nav .tabs { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
    #nav .roles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
    #toolbar input, #toolbar select, #toolbar .btn, .zoom-controls { width: 100%; }
    .zoom-controls { justify-content: stretch; }
    .zoom-btn { flex: 1 1 auto; width: auto; }
    #node-display-bar { padding: 8px 12px; }
    .nd-hint { display: none; }
    .layout-compact .org-node { min-width: 140px; }
    .node-title { font-size: 10px; }
    .node-name { font-size: 9.5px; }
    #detail-panel { width: 100vw; }
    #detail-panel::before { display: none; }
    #scenarios-list .sc-item, #sc-live { min-width: 190px; }
    .modal-body[style*='grid-template-columns'] { display: block !important; }
    .modal-body[style*='grid-template-columns'] > div + div { margin-top: 18px; }
  }

  /* ── FORECAST CHART ────────────────────────────────────────────────────── */
  .forecast-wrap { padding: 12px 16px 16px; overflow-x: auto; }
  .forecast-bar-group { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
  .forecast-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 52px; max-width: 80px; }
  .forecast-bar-val { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 700; color: var(--black); white-space: nowrap; }
  .forecast-bar { width: 100%; border-radius: 4px 4px 0 0; transition: height .4s cubic-bezier(.4,0,.2,1); }
  .forecast-bar-label { font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; color: var(--muted-text); font-weight: 700; letter-spacing: .04em; }

  /* ── WORKFORCE SEGMENTATION ───────────────────────────────────────────── */
  .seg-tag { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:10px; font-family:'IBM Plex Sans',sans-serif; font-size:8px; font-weight:800; letter-spacing:.05em; cursor:pointer; transition:all var(--transition); }
  .seg-tag.strategic  { background:#E8F5E9; color:#2E7D32; border:1px solid #A5D6A7; }
  .seg-tag.core       { background:#E3F2FD; color:#1565C0; border:1px solid #90CAF9; }
  .seg-tag.transitional { background:#FFF3E0; color:#E65100; border:1px solid #FFCC80; }
  .seg-tag.eliminate  { background:#FFEBEE; color:#C62828; border:1px solid #EF9A9A; }
  .seg-tag.unset      { background:var(--paper); color:var(--muted-text); border:1px solid var(--smoke); }

  /* ── WHAT-IF PANEL ────────────────────────────────────────────────────── */

  /* ── SCENARIO DIFF ────────────────────────────────────────────────────── */
  .diff-add { background:#E8F5E9; }
  .diff-remove { background:#FFEBEE; text-decoration:line-through; opacity:.7; }
  .diff-move  { background:#E3F2FD; }
  .diff-badge { font-size:8px; font-weight:800; font-family:'IBM Plex Sans',sans-serif; padding:1px 6px; border-radius:8px; letter-spacing:.04em; }

  /* ── WATERFALL CHART ──────────────────────────────────────────────────── */
  .wf-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; min-width:60px; }
  .wf-bar-val { font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:700; white-space:nowrap; }
  .wf-bar     { width:32px; border-radius:3px 3px 0 0; transition:height .4s ease; }
  .wf-bar-lbl { font-family:'IBM Plex Sans',sans-serif; font-size:8.5px; color:var(--muted-text); font-weight:700; text-align:center; line-height:1.3; }
  .wf-connector { width:100%; height:2px; border-top:1.5px dashed #D0D0D0; margin-top:auto; }

  /* ── ORG TEMPLATES MODAL ──────────────────────────────────────────────── */
  .tpl-card { border:2px solid var(--smoke); border-radius:10px; padding:14px; cursor:pointer; transition:all var(--transition); }
  .tpl-card:hover { border-color:var(--yellow); background:var(--yellow-bg); }
  .tpl-card h4 { font-weight:800; font-size:13px; margin-bottom:4px; }
  .tpl-card p  { font-size:10px; color:var(--slate); line-height:1.5; }
  .tpl-thumb { font-size:26px; margin-bottom:8px; }

  /* ── SPAN OPTIMIZER ───────────────────────────────────────────────────── */
  .opt-row { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid var(--smoke); }
  .opt-row:last-child { border-bottom:none; }
  .opt-badge { font-family:'IBM Plex Sans',sans-serif; font-size:8px; font-weight:800; padding:2px 7px; border-radius:8px; letter-spacing:.05em; flex-shrink:0; margin-top:2px; }
  .opt-action { font-size:11px; color:var(--black); line-height:1.5; flex:1; }
  .opt-impact { font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:800; color:#2E7D32; flex-shrink:0; }

  /* ── SUBTREE SELECTION ──────────────────────────────────────────────────── */
  .org-node.subtree-selected {
    border-color: #42A5F5 !important;
    box-shadow: 0 0 0 3px rgba(66,165,245,.25), 0 2px 10px rgba(0,0,0,.1) !important;
    background: #EFF8FF !important;
  }
  .org-node.subtree-root {
    border-color: #1565C0 !important;
    box-shadow: 0 0 0 4px rgba(21,101,192,.3), 0 2px 10px rgba(0,0,0,.12) !important;
    background: #E3F2FD !important;
  }
  .org-node.long-press-pending {
    animation: longPressRing 0.6s ease forwards;
  }
  @keyframes longPressRing {
    0%   { box-shadow: 0 0 0 0 rgba(21,101,192,.5); }
    100% { box-shadow: 0 0 0 10px rgba(21,101,192,.0); border-color: #1565C0; }
  }
  .org-node-wrap.subtree-dragging { opacity: 0.7; }

  /* Subtree count badge on drag ghost */
  #drag-ghost .ghost-count {
    display: inline-block; background: #42A5F5; color: #fff; border-radius: 10px;
    padding: 0 6px; font-size: 9px; margin-left: 6px; font-weight: 800;
  }

  /* ── DROP ACTION MENU ───────────────────────────────────────────────────── */
  #drop-action-overlay {
    position: fixed; inset: 0; z-index: 8000;
    background: rgba(15,15,20,.55); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
  }
  #drop-action-overlay.dam-visible {
    display: flex;
  }
  #drop-action-menu {
    background: #fff; border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
    width: 420px; overflow: hidden;
    animation: menuPop .2s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes menuPop { from{transform:scale(.88) translateY(12px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
  #drop-action-menu .dam-head {
    background: var(--black); padding: 18px 20px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
  }
  #drop-action-menu .dam-head-text {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: 13px; color: #fff; line-height: 1.2;
  }
  #drop-action-menu .dam-head-text strong {
    color: var(--yellow);
  }
  #drop-action-menu .dam-sub {
    font-size: 11px; color: #aaa; margin-top: 3px; font-weight: 400;
  }
  #drop-action-menu .dam-close {
    background: rgba(255,255,255,.1); border: none; border-radius: 50%;
    width: 26px; height: 26px; color: #aaa; cursor: pointer;
    font-size: 14px; line-height: 26px; text-align: center; flex-shrink: 0;
    margin-left: 12px; margin-top: -2px; transition: background .12s, color .12s;
  }
  #drop-action-menu .dam-close:hover { background: rgba(255,255,255,.2); color: #fff; }
  .dam-options { padding: 8px 10px; display: flex; flex-direction: column; gap: 0; }
  .dam-option {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 6px; border-radius: 0;
    cursor: pointer; transition: background .12s;
    border: none; border-bottom: 1px solid #F0F0F0;
    background: transparent;
  }
  .dam-option:last-child { border-bottom: none; }
  .dam-option:hover { background: #F7F7F7; border-radius: 10px; }
  .dam-option:hover + .dam-option { border-top-color: transparent; }
  .dam-option:active { background: #F0F0F0; }
  .dam-option.dam-disabled { opacity: .35; pointer-events: none; }
  .dam-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
  }
  .dam-text { flex: 1; min-width: 0; }
  .dam-text h4 { font-size: 13px; font-weight: 800; color: var(--black); margin: 0 0 4px; }
  .dam-text p  { font-size: 11.5px; color: var(--slate); margin: 0; line-height: 1.55; }
  .dam-text .dam-tag {
    display: inline-block; font-size: 9px; font-weight: 800;
    font-family: 'IBM Plex Sans', sans-serif;
    padding: 2px 8px; border-radius: 20px; margin-top: 6px; letter-spacing: .05em;
  }
  .dam-cancel { padding: 4px 10px 10px; }
  .dam-cancel button {
    width: 100%; background: var(--paper); border: none; border-radius: 10px;
    padding: 10px; font-size: 11px; font-weight: 700; color: var(--slate);
    cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
    transition: background .12s, color .12s;
  }
  .dam-cancel button:hover { background: #EBEBEB; color: var(--black); }

  /* Subtree mode indicator strip */
  #subtree-mode-bar {
    background: #1565C0; color: #fff; padding: 5px 16px;
    font-size: 10px; font-weight: 700; font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: .06em; display: none; align-items: center; gap: 10px; flex-shrink: 0;
  }
  #subtree-mode-bar.visible { display: flex; }
  #subtree-mode-bar button {
    background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4);
    color: #fff; border-radius: 5px; padding: 2px 9px; font-size: 9px; font-weight: 700;
    cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .05em;
  }

  /* ── CONTEXT MENU ───────────────────────────────────────────────────────── */
  #ctx-menu, #ctx-canvas-menu {
    position: fixed; z-index: 9500;
    background: var(--white); border: 1.5px solid #E0E0E0;
    border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
    min-width: 224px;
    /* Short viewports: the menu scrolls as a whole rather than overflowing
       off-screen (openCtxMenu pins it inside the viewport). */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: ctxPop .12s cubic-bezier(.34,1.56,.64,1) both;
    user-select: none;
  }
  #ctx-disposition-items {
    max-height: 160px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ctx-item.ctx-item-active { background: var(--paper); font-weight: 700; }
  @keyframes ctxPop { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }

  .ctx-header {
    padding: 9px 13px 7px;
    border-bottom: 1px solid #F0F0F0;
    background: var(--black);
  }
  .ctx-header .ctx-name { font-size: 11px; font-weight: 800; color: var(--yellow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ctx-header .ctx-sub  { font-size: 9px; color: #888; font-family: 'IBM Plex Sans', sans-serif; margin-top: 2px; }

  .ctx-group { padding: 4px 0; border-bottom: 1px solid #F0F0F0; }
  .ctx-group:last-child { border-bottom: none; }
  .ctx-group-label {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 8px; font-weight: 800;
    color: var(--muted-text); text-transform: uppercase; letter-spacing: .1em;
    padding: 4px 13px 2px;
  }

  .ctx-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 13px; cursor: pointer; transition: background .1s;
    font-size: 11px; font-weight: 600; color: var(--black);
  }
  .ctx-item:hover { background: var(--paper); }
  .ctx-item.ctx-danger:hover { background: #FFF5F5; color: #C62828; }
  .ctx-item.ctx-disabled { opacity: .4; pointer-events: none; }
  .ctx-item .ctx-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
  .ctx-item .ctx-label { flex: 1; }
  .ctx-item .ctx-key { font-size: 9px; color: var(--muted-text); font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; white-space: nowrap; }

  /* Move-to submenu */
  #ctx-moveto-sub {
    position: fixed; z-index: 9600;
    background: var(--white); border: 1.5px solid #E0E0E0;
    border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.16);
    min-width: 200px; max-height: 260px; overflow-y: auto;
    animation: ctxPop .1s ease both;
  }
  .ctx-sub-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px;
    font-size: 10px; color: var(--black); cursor: pointer; transition: background .1s;
  }
  .ctx-sub-item:hover { background: var(--paper); }
  .ctx-sub-item .csi-code { font-family: 'IBM Plex Sans', sans-serif; font-size: 8.5px; color: var(--muted-text); }


  /* ── ORG CHART MULTI-SELECT (org/multiselect.js) ────────────────────────── */
  .org-node.ms-selected {
    border-color: #FF5A00 !important;
    box-shadow: 0 0 0 2.5px rgba(255,90,0,.55), 0 4px 14px rgba(0,0,0,.12);
  }
  #ms-pill {
    position: fixed; z-index: 8800;
    transform: translateX(-50%);
    display: none; align-items: center; gap: 10px;
    background: var(--black); color: #fff;
    border-radius: 20px; padding: 7px 9px 7px 14px;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    user-select: none;
  }
  #ms-pill .msp-count { color: var(--yellow); white-space: nowrap; }
  #ms-pill .msp-hint { color: #aaa; font-weight: 600; font-size: 10px; white-space: nowrap; }
  #ms-pill .msp-x {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.12); border: none; color: #fff;
    cursor: pointer; font-size: 11px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  #ms-pill .msp-x:hover { background: rgba(255,255,255,.25); }
  #ms-marquee {
    position: fixed; z-index: 8900;
    border: 1.5px dashed #FF5A00;
    background: rgba(255,90,0,.07);
    border-radius: 3px;
    pointer-events: none;
  }
  #ctx-menu-bulk {
    position: fixed; z-index: 9500;
    background: var(--white); border: 1.5px solid #E0E0E0;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
    min-width: 252px;
    max-height: calc(100vh - 16px); overflow-y: auto;
    animation: ctxPop .12s cubic-bezier(.34,1.56,.64,1) both;
    user-select: none;
  }
  #ctx-menu-bulk .ms-section-body { background: var(--paper); border-top: 1px solid #F0F0F0; }
  .ms-form-note {
    font-size: 9px; color: var(--muted-text); padding: 6px 13px 0;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
  }
  .ms-inline-form { display: flex; gap: 6px; padding: 7px 13px 9px; align-items: center; }
  .ms-inline-form select, .ms-inline-form input {
    font-size: 11px; padding: 4px 6px; border: 1px solid #D8D8D2; border-radius: 6px;
    background: var(--white); min-width: 0;
  }
  .ms-inline-form input { flex: 1; }
  .ms-apply-btn {
    font-size: 10px; font-weight: 800; padding: 5px 11px; border-radius: 6px;
    border: none; background: var(--black); color: var(--yellow); cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .03em; flex-shrink: 0;
  }
  .ms-apply-btn:hover { filter: brightness(1.25); }
  .ms-apply-btn.ms-apply-danger { background: #C62828; color: #fff; }
  .ms-status-list { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }
  .ms-status-list .ctx-item { padding: 5px 13px; }
  .org-node.ms-marquee-hit {
    box-shadow: 0 0 0 2.5px rgba(255,90,0,.30), 0 4px 14px rgba(0,0,0,.10);
  }

  /* ── SUBTREE SUMMARY MODAL ──────────────────────────────────────────────── */
  .stm-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .stm-kpi { background:var(--paper); border:1.5px solid var(--smoke); border-radius:10px; padding:11px 14px; }
  .stm-kpi-val { font-family:'IBM Plex Sans',sans-serif; font-size:26px; font-weight:800; color:var(--black); line-height:1; margin-bottom:2px; }
  .stm-kpi-lbl { font-size:9px; font-weight:700; color:var(--muted-text); text-transform:uppercase; letter-spacing:.08em; }
  .stm-kpi-sub { font-size:9px; color:var(--iron); margin-top:2px; }
  .stm-section { background:var(--white); border:1.5px solid var(--smoke); border-radius:10px; overflow:hidden; }
  .stm-section-hd { background:var(--black); padding:8px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:700; color:var(--yellow); text-transform:uppercase; letter-spacing:.08em; }
  .stm-section-body { padding:14px 16px; }
  .stm-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--paper); font-size:11px; }
  .stm-row:last-child { border-bottom:none; }
  .stm-row-lbl { color:var(--slate); }
  .stm-row-val { font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:13px; color:var(--black); }
  .stm-bar-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
  .stm-bar { flex:1; height:6px; background:var(--smoke); border-radius:3px; }
  .stm-bar-fill { height:100%; border-radius:3px; }
  .stm-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .stm-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
  /* Node inline strip */
  .node-summary-strip { background:linear-gradient(135deg,#F7F6F1 0%,#EFEEDD 100%); border:1px solid #E0DED4; border-radius:0 0 10px 10px; padding:6px 10px; display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:-1px; }
  .nss-item { font-size:9px; font-family:'IBM Plex Sans',sans-serif; color:var(--slate); display:flex; flex-direction:column; align-items:center; gap:1px; min-width:36px; }
  .nss-val { font-weight:800; font-size:11px; color:var(--black); }
  .nss-lbl { font-size:8px; color:var(--mist); text-transform:uppercase; letter-spacing:.06em; }
  /* Org-level summary bar */
  #org-summary-bar { display:none; background:var(--black); border-bottom:1.5px solid rgba(255,90,0,.2); padding:8px 20px; }
  #org-summary-bar.visible { display:flex; gap:0; align-items:stretch; }
  .osb-item { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 18px; border-right:1px solid rgba(255,255,255,.08); gap:1px; }
  .osb-item:last-child { border-right:none; margin-left:auto; }
  .osb-val { font-family:'IBM Plex Sans',sans-serif; font-size:18px; font-weight:800; color:var(--white); }
  .osb-lbl { font-size:8px; font-weight:700; color:var(--muted-text); text-transform:uppercase; letter-spacing:.08em; }

  /* ── CARD OVERRIDE POPOVER ──────────────────────────────────────────────── */
  #card-override-pop { position: fixed; z-index: 9800; background: var(--white); border: 1.5px solid #E0E0E0; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); width: 240px; display: none; }
  .cop-head { background: var(--black); padding: 8px 12px; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: space-between; }
  .cop-title { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 10px; color: var(--yellow); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .cop-body { padding: 10px 12px; display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
  .cop-group-label { font-size: 9px; font-weight: 700; color: var(--muted-text); text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 2px; font-family: 'IBM Plex Sans', sans-serif; }
  .cop-group-label:first-child { margin-top: 0; }
  .cop-field-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--slate); padding: 3px 0; cursor: pointer; user-select: none; width: 100%; }
  .cop-field-row input { cursor: pointer; flex-shrink: 0; }
  .cop-footer { padding: 8px 12px; border-top: 1px solid var(--smoke); display: flex; gap: 6px; justify-content: flex-end; }

  /* ── PHASE 5 UX: ACCESSIBILITY & POLISH ────────────────────────────────── */

  /* Screen-reader-only utility */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* Skip-to-content link */
  #skip-to-content { position:fixed; top:-100px; left:16px; z-index:99999; background:var(--yellow); color:var(--black); font-weight:800; font-size:12px; padding:8px 16px; border-radius:6px; text-decoration:none; transition:top .15s; }
  #skip-to-content:focus { top:8px; }

  /* Universal focus ring */
  :focus-visible { outline:2.5px solid var(--yellow) !important; outline-offset:2px !important; }
  #nav :focus-visible, #scenario-context-bar :focus-visible, #scenario-sidebar :focus-visible { outline-color:#fff !important; outline-width:2px !important; }
  :focus:not(:focus-visible) { outline:none; }

  /* Non-color severity prefix icons */
  .sev-critical::before { content:'● '; }
  .sev-warning::before  { content:'▲ '; }
  .sev-info::before     { content:'○ '; }

  /* Progressive disclosure: detail panel section toggle */
  .dp-section-toggle { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:0; background:none; border:none; width:100%; text-align:left; }
  .dp-section-toggle .dp-section { margin-bottom:0; border-bottom:none; padding-bottom:0; }
  .dp-section-toggle-icon { font-size:10px; color:var(--mist); flex-shrink:0; transition:transform .2s; }
  .dp-section-toggle.collapsed .dp-section-toggle-icon { transform:rotate(-90deg); }
  .dp-section-collapsible.collapsed { display:none; }

  /* Spacing improvements */
  .dp-body .dp-section { margin-top:14px; }
  .dp-body .dp-section:first-child { margin-top:4px; }
  .sc-item { padding:10px 14px; }

  /* ── GUIDE PANEL: COLLAPSED STRIP STATE ────────────────────────────────── */
  /* When collapsed to 44px the panel header becomes transparent so it doesn't
     read as a persistent dark band. Only the expand button is visible. */
  #hrbp-guide-panel.guide-collapsed {
    background: transparent !important;
    border-left: none !important;
    box-shadow: none !important;
    /* Collapsed, the panel is a 220px-wide transparent box still pinned over
       the right edge (base .u-sidepanel keeps width/position/z-index). Without
       this it silently swallows clicks on whatever sits underneath - e.g. the
       detail panel's close (X) / Edit buttons. Let clicks pass through; only
       the visible expand tab below re-enables pointer events. */
    pointer-events: none !important;
  }
  #hrbp-guide-panel.guide-collapsed > div:first-child {
    background: transparent !important;
    padding: 8px 4px !important;
    display: flex; align-items: center; justify-content: flex-start;
  }
  #hrbp-guide-panel.guide-collapsed #hrbp-guide-collapse {
    color: rgba(0,0,0,.4) !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    border-radius: 6px 0 0 6px !important;
    padding: 6px 5px !important; font-size: 11px !important;
    width: 28px; display: flex; align-items: center; justify-content: center;
    box-shadow: -2px 2px 6px rgba(0,0,0,.1);
    /* Re-enable clicks on the one visible control (the container is
       pointer-events:none above so the rest passes through). */
    pointer-events: auto !important;
  }
  #hrbp-guide-panel.guide-collapsed #hrbp-guide-collapse:hover {
    color: var(--black) !important; background: #fff !important;
  }
  #hrbp-guide-panel.guide-collapsed #hrbp-guide-close,
  #hrbp-guide-panel.guide-collapsed > div:first-child > div { display: none !important; }

  /* ── PHASE 3 UX: SCOPE CONTEXT STRIP ───────────────────────────────────── */
  /* Shown above the canvas only when a segment/status/search filter is active.
     Prevents users from mistaking a filtered view for the complete org. */
  #scope-context-strip {
    display: none; /* shown by Phase 3 JS when any filter is active */
    align-items: center; gap: 10px;
    padding: 5px 14px;
    background: #EFF6FF;
    border-bottom: 1px solid rgba(59,130,246,.2);
    flex-shrink: 0;
    font-size: 10px; color: #1E40AF;
    font-weight: 600;
  }
  #scope-context-strip.visible { display: flex; }
  .scs-icon { font-size: 12px; flex-shrink: 0; }
  .scs-text { flex: 1; line-height: 1.5; }
  .scs-text strong { font-weight: 800; }
  .scs-dismiss {
    background: none; border: none; color: #93C5FD; cursor: pointer;
    font-size: 12px; line-height: 1; padding: 0; flex-shrink: 0;
  }
  .scs-dismiss:hover { color: #1E40AF; }

  /* ── PHASE 3 UX: ANCESTOR HIGHLIGHTING ─────────────────────────────────── */
  /* When a node is selected, its ancestor chain gets a subtle left-border
     accent so the reporting path is visible in the chart. */
  .org-node.ancestor-path {
    border-left: 3px solid rgba(255,90,0,.5) !important;
    border-color: rgba(255,90,0,.35) !important;
    box-shadow: 0 0 0 1.5px rgba(255,90,0,.2), 0 2px 8px rgba(0,0,0,.07) !important;
  }

  /* ── PHASE 3 UX: CANVAS EMPTY STATE ────────────────────────────────────── */
  /* Replaces bare text with an actionable explanation. */
  .canvas-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 40px; text-align: center;
    max-width: 400px; margin: 0 auto;
  }
  .ces-icon { font-size: 36px; opacity: .25; margin-bottom: 16px; }
  .ces-title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
  .ces-body { font-size: 12px; color: var(--slate); line-height: 1.7; margin-bottom: 16px; }
  .ces-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

  /* ── PHASE 3 UX: DETAIL PANEL BREADCRUMB ───────────────────────────────── */
  /* Reporting chain shown in detail panel head, just below position title. */
  .dp-breadcrumb {
    margin-top: 6px;
    font-size: 9px; color: rgba(255,255,255,.45);
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: .04em; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dp-breadcrumb span { color: rgba(255,90,0,.5); margin: 0 3px; }
  .dp-breadcrumb strong { color: rgba(255,255,255,.7); }

  /* ── PHASE 1 UX: SCENARIO CONTEXT BAR ──────────────────────────────────── */
  /* Shown when the user is editing a scenario (not Live Org).
     Gives an unambiguous "you are in a sandbox" signal at all times. */
  #scenario-context-bar {
    display: none; /* shown by JS when scenario is active */
    align-items: center; gap: 10px;
    padding: 5px 18px;
    background: linear-gradient(90deg, #1C1200 0%, #1A1800 100%);
    border-bottom: 1.5px solid rgba(255,90,0,.25);
    flex-shrink: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
  }
  #scenario-context-bar.visible { display: flex; }
  .scb-badge {
    background: rgba(255,90,0,.12); border: 1px solid rgba(255,90,0,.3);
    border-radius: 4px; padding: 2px 8px;
    color: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; white-space: nowrap;
  }
  .scb-badge.draft  { border-color: rgba(255,90,0,.3); color: var(--yellow); }
  .scb-badge.review { background: rgba(255,140,0,.12); border-color: rgba(255,140,0,.4); color: #FF8A65; }
  .scb-badge.approved { background: rgba(105,240,174,.1); border-color: rgba(105,240,174,.3); color: #69F0AE; }
  .scb-name { color: #fff; font-size: 11px; font-weight: 800; }
  .scb-divider { width: 1px; height: 12px; background: rgba(255,255,255,.12); flex-shrink: 0; }
  .scb-stat { color: rgba(255,255,255,.55); font-size: 9.5px; white-space: nowrap; }
  .scb-stat strong { color: rgba(255,255,255,.85); }
  .scb-issues { color: #FF8A65; font-size: 9.5px; cursor: pointer; white-space: nowrap; }
  .scb-issues:hover { color: #FFCC80; }
  .scb-exit {
    margin-left: auto; padding: 3px 10px;
    background: transparent; border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px; color: rgba(255,255,255,.5); font-size: 9px; font-weight: 700;
    cursor: pointer; letter-spacing: .05em; font-family: 'IBM Plex Sans', sans-serif;
    transition: all var(--transition);
  }
  .scb-exit:hover { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.9); }

  /* ── PHASE 1 UX: VIEW POPOVER (replaces node-display-bar as 4th bar) ─────── */
  #view-popover-wrap { position: relative; display: inline-block; }
  #view-popover {
    /* Right-anchored: the ⊙ View button lives at the right end of the toolbar,
       so opening leftward keeps the panel inside the viewport. Left-anchoring
       (left:0) pushed it off the right edge, clipping the Grade field,
       Fully-loaded cost basis and Expand-all controls. */
    position: absolute; top: calc(100% + 6px); right: 0; left: auto;
    z-index: 900; background: var(--white); border: 1px solid var(--smoke);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(2,27,46,.14);
    padding: 14px 16px 16px; min-width: 264px; max-width: 300px; user-select: none;
    transition: opacity .15s, transform .15s;
  }
  #view-popover.hidden { opacity: 0; pointer-events: none; transform: translateY(6px); }
  /* Each labelled group is a vertical stack; whitespace (not hairlines) does
     the grouping so the panel reads calmer and less crowded. */
  .vp-group { display: flex; flex-direction: column; gap: 7px; }
  .vp-group + .vp-group { margin-top: 14px; }
  .vp-section {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; font-weight: 800;
    color: var(--muted-text); text-transform: uppercase; letter-spacing: .09em;
    margin: 0;
  }
  .vp-row { display: flex; gap: 3px; flex-wrap: wrap; }
  /* Segmented control (Node layout): joined, equal-width buttons */
  .vp-seg { gap: 0; flex-wrap: nowrap; }
  .vp-seg .layout-btn { flex: 1; border-radius: 0; border-left-width: 0; }
  .vp-seg .layout-btn:first-child { border-radius: 6px 0 0 6px; border-left-width: 1.5px; }
  .vp-seg .layout-btn:last-child  { border-radius: 0 6px 6px 0; }
  /* Fully-loaded cost-basis flag on the ⊙ View button - shown (hidden class
     removed by syncCostBasisUI) whenever the loaded basis is active, so the
     basis driving every cost total on the canvas is never invisible state
     inside the closed popover. Indigo matches the basis' former toggle. */
  #view-fl-flag { color: #283593; background: #E8EAF6; border: 1px solid #7986CB; border-radius: 8px; padding: 0 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; vertical-align: 1px; }
  /* .hidden is component-scoped in this stylesheet (no global utility) - see
     #zoom-float.hidden / #view-popover.hidden above. */
  #view-fl-flag.hidden { display: none; }
  /* Equal-width action pair (Collapse all / Expand all) */
  .vp-row-2 { gap: 6px; flex-wrap: nowrap; }
  .vp-row-2 > .zoom-btn { flex: 1; }
  #field-picker-btn:hover, #field-picker-btn:focus-visible {
    border-color: var(--yellow) !important;
  }
  /* Popover title (sits above the first section) */
  .vp-title {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 11.5px; font-weight: 700;
    color: var(--black); letter-spacing: .02em;
    padding-bottom: 9px; margin-bottom: 14px;
    border-bottom: 1px solid var(--smoke);
  }
  /* Section header row: label + inline help icon or text action */
  .vp-section-row { display: flex; align-items: center; gap: 5px; margin: 0; }
  .vp-section-row .vp-section { margin: 0; }
  /* Inline text action inside a section header (e.g. "Edit colors…") */
  .vp-link {
    margin-left: auto; background: none; border: none; padding: 0;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 700;
    color: var(--orange-text); cursor: pointer; letter-spacing: .01em;
  }
  .vp-link:hover, .vp-link:focus-visible { color: var(--orange); text-decoration: underline; outline: none; }
  .vp-help {
    font-size: 11px; color: var(--mist); cursor: help; line-height: 1;
    transition: color .12s;
  }
  .vp-help:hover, .vp-help:focus-visible { color: var(--slate); outline: none; }
  /* Inline row: label + select (used by "Visible levels") */
  .vp-row-inline { align-items: center; gap: 8px; }
  .vp-row-label { font-size: 10px; font-weight: 600; color: var(--slate); }
  .vp-select {
    font-size: 10px; font-family: 'IBM Plex Sans', sans-serif;
    padding: 3px 6px; border: 1.5px solid var(--smoke); border-radius: 6px;
    background: var(--white); color: var(--steel); cursor: pointer; flex: 1;
  }
  .vp-select:focus { outline: none; border-color: var(--orange); }
  /* Display switches */
  .vp-switch-list { display: flex; flex-direction: column; gap: 4px; }
  .vp-switch-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px; cursor: pointer; border-radius: 6px;
    transition: background .1s;
  }
  .vp-switch-row:hover { background: var(--paper); }
  .vp-switch-text { font-size: 11px; font-weight: 600; color: var(--steel); }
  .vp-switch { position: relative; width: 30px; height: 17px; flex-shrink: 0; }
  .vp-switch input {
    position: absolute; inset: 0; opacity: 0; margin: 0;
    cursor: pointer; z-index: 1; width: 100%; height: 100%;
  }
  .vp-switch-track {
    position: absolute; inset: 0; background: var(--mist);
    border-radius: 9px; transition: background .15s;
  }
  .vp-switch-track::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px; background: var(--white);
    border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.18);
    transition: transform .15s;
  }
  .vp-switch input:checked ~ .vp-switch-track { background: var(--orange); }
  .vp-switch input:checked ~ .vp-switch-track::before { transform: translateX(13px); }
  .vp-switch input:focus-visible ~ .vp-switch-track {
    box-shadow: 0 0 0 2px var(--yellow-bg);
  }
  /* ── EXPORT MENU ─────────────────────────────────────────────────────────── */
  .export-menu-item {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; text-align: left;
    padding: 9px 14px; font-size: 11px; font-family: 'IBM Plex Sans', sans-serif;
    color: var(--black); background: none; border: none;
    border-top: 1px solid var(--smoke); cursor: pointer;
    transition: background .1s;
  }
  .export-menu-item:first-of-type { border-top: none; }
  .export-menu-item:hover, .export-menu-item:focus-visible { background: var(--paper); }
  .export-menu-item:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
  .export-menu-sub { font-size: 9.5px; color: var(--muted-text); font-weight: 400; }

  /* ── PHASE 1 UX: HIDE ORIGINAL NODE DISPLAY BAR (content moved to popover) ─ */
  /* The DOM element is kept for JS compatibility - its controls still work.
     Only the visual bar is hidden. */
  #node-display-bar { display: none !important; }

  /* ── PHASE 1 UX: TOOLBAR ACTION GROUPS ─────────────────────────────────── */
  /* Visual group separators within the toolbar to reduce cognitive overload. */
  .tb-group-primary { display: flex; gap: 4px; align-items: center; }
  .tb-group-view    { display: flex; gap: 3px; align-items: center; }
  /* .tb-group-more - overflow menu host for secondary actions (Import,
     Compare, Export, HRBP Guide). The popover positions itself absolutely
     relative to this wrapper. */
  .tb-group-more    { display: flex; gap: 4px; align-items: center; position: relative; }
  .zoom-compact { display: flex; gap: 2px; align-items: center; }

  /* ── TOOLBAR "More" overflow menu ──────────────────────────────────────── */
  /* Visible state is class-toggled by toggleToolbarMore (events.js). Reuses
     the same positioning idiom as the legacy #export-menu so it lands under
     the More button against the right edge of the toolbar. */
  .toolbar-more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--white);
    border: 1px solid var(--smoke);
    border-radius: 10px;
    min-width: 240px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 4px 0;
  }
  .toolbar-more-menu.open { display: block; }
  .toolbar-more-section-label {
    padding: 8px 14px 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-text);
    border-top: 1px solid var(--smoke);
    margin-top: 4px;
  }
  .toolbar-more-section-label:first-child { border-top: none; margin-top: 0; }
  .toolbar-more-divider {
    height: 1px;
    background: var(--smoke);
    margin: 4px 0;
  }
  .toolbar-more-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 11px;
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--black);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
  }
  .toolbar-more-item:hover,
  .toolbar-more-item:focus-visible {
    background: var(--paper);
  }
  .toolbar-more-item:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: -2px;
  }
  .toolbar-more-item-label {
    font-weight: 600;
    color: var(--black);
  }
  .toolbar-more-item-sub {
    font-size: 9.5px;
    color: var(--muted-text);
    font-weight: 400;
  }

  /* ── PHASE 1 UX: SCENARIO SIDEBAR ENHANCEMENTS ──────────────────────────── */
  /* Larger, clearer state indicators in the scenario list. */
  .sc-state-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
  .sc-state-badge {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 8px; font-weight: 800;
    letter-spacing: .07em; padding: 1px 6px; border-radius: 3px; text-transform: uppercase;
  }
  .sc-state-badge.draft    { background: rgba(255,90,0,.15); color: var(--yellow); border: 1px solid rgba(255,90,0,.25); }
  .sc-state-badge.review   { background: rgba(255,140,0,.15); color: #FF8A65; border: 1px solid rgba(255,140,0,.25); }
  .sc-state-badge.approved { background: rgba(105,240,174,.1); color: #69F0AE; border: 1px solid rgba(105,240,174,.2); }
  .sc-change-count { font-size: 8.5px; color: var(--iron); margin-top: 2px; }
  .sc-change-count .sc-issues { color: #FF8A65; font-weight: 700; }

  /* ── PHASE 1 UX: ROLE IDENTITY FRAMING ─────────────────────────────────── */
  /* The role switcher now reads as "Viewing as [role]" rather than a mode toggle. */
  /* Right-side affordance. The auto-margin now lives on .cmdk-nav-btn so the
     search button and this wrap stay grouped on the right with a single gap
     between them. */
  #role-context-wrap {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.08); border-radius: 8px; padding: 3px 10px 3px 8px;
    border: 1px solid rgba(255,255,255,.16);
  }
  .role-context-label {
    font-size: 8px; color: var(--nav-muted); font-family: var(--font-sans);
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  }
  /* Keep .roles class for fallback compat but hide it when #role-context-wrap is present */
  #nav .roles { display: none; }
  /* Below ~1360px the "Viewing as" label is the cheapest thing to drop so
     the role buttons fit on the same row as the chapter nav and the search
     button. The role buttons themselves remain labelled. */
  @media (max-width: 1360px) {
    #role-context-wrap .role-context-label { display: none; }
  }

  /* ── Identity card (Google-style avatar + menu) ────────────────────────── */
  /* When the user is signed in via live mode, adapters/live-api.js swaps
     #role-context-wrap into "identity-card" mode: it drops the pill chrome
     and renders an avatar button + popover menu. Sign-out and Account &
     sessions live behind the avatar. */
  #role-context-wrap.identity-card-wrap {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 0;
  }
  .identity-avatar-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.22);
    background: linear-gradient(135deg, #FF6A13 0%, #B13D00 100%);
    color: var(--navy-ink);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
    user-select: none;
  }
  .identity-avatar-btn:hover {
    border-color: rgba(255,255,255,.45);
    box-shadow: 0 0 0 3px rgba(255,90,0,.18);
  }
  .identity-avatar-btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
  }
  .identity-avatar-btn[aria-expanded="true"] {
    box-shadow: 0 0 0 3px rgba(255,90,0,.28);
    transform: translateY(0);
  }
  .identity-avatar-initials {
    line-height: 1;
    pointer-events: none;
  }

  .identity-menu {
    position: fixed;
    top: 0; left: 0;
    min-width: 280px;
    background: linear-gradient(180deg, #0F1419 0%, #06080B 100%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    z-index: 1100;
    color: var(--nav-text);
    font-family: var(--font-sans);
    overflow: hidden;
    animation: identityMenuIn .14s ease-out;
  }
  .identity-menu.hidden { display: none; }
  @keyframes identityMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .identity-menu::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: var(--orange-bright);
  }
  .identity-menu-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 16px 12px;
  }
  .identity-menu-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6A13 0%, #B13D00 100%);
    color: var(--navy-ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    flex-shrink: 0;
  }
  .identity-menu-heading {
    min-width: 0;
    flex: 1;
  }
  .identity-menu-name {
    font-weight: 700; font-size: 13px; color: var(--white);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .identity-menu-email {
    font-size: 11px; color: var(--nav-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 2px;
  }
  .identity-menu-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 16px 14px;
  }
  .identity-menu-role-pill {
    font-size: 9px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    background: rgba(255,90,0,.15);
    color: var(--orange-bright);
    border: 1px solid rgba(255,90,0,.28);
    padding: 3px 8px; border-radius: 4px;
  }
  .identity-menu-scope {
    font-size: 10px;
    color: var(--nav-muted);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    padding: 3px 8px; border-radius: 4px;
  }
  .identity-menu-divider {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 0 6px;
  }
  .identity-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: calc(100% - 12px);
    margin: 4px 6px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.82);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background .1s ease, color .1s ease;
  }
  .identity-menu-item:hover {
    background: rgba(255,255,255,.08);
    color: var(--white);
  }
  .identity-menu-item:focus-visible {
    outline: 2px solid var(--orange-bright);
    outline-offset: -2px;
    background: rgba(255,255,255,.08);
    color: var(--white);
  }
  .identity-menu-item:last-child { margin-bottom: 8px; }
  .identity-menu-item-icon {
    width: 18px; text-align: center;
    color: var(--nav-muted);
    font-size: 13px;
  }
  .identity-menu-item-danger { color: #FF8A65; }
  .identity-menu-item-danger:hover {
    background: rgba(229,57,53,.14);
    color: #FFB199;
  }
  .identity-menu-item-danger .identity-menu-item-icon { color: #FF8A65; }

  /* ── PHASE 1 UX: ENTERPRISE NAV VISIBILITY ──────────────────────────────── */
  /* Rename "Enterprise" tab to list its contents so users don't need to click to discover. */
  #enterprise-tab-label { display: flex; align-items: center; gap: 3px; }
  .ent-pill {
    font-size: 7.5px; background: rgba(255,90,0,.12); color: var(--yellow);
    border: 1px solid rgba(255,90,0,.2); border-radius: 3px;
    padding: 0 4px; font-weight: 800; letter-spacing: .05em; font-family: 'IBM Plex Sans', sans-serif;
    white-space: nowrap;
  }

/* === Utility classes extracted from inline style= attributes === */
/* 12x */ .u-hidden { display:none }
/* UI write-perm gate. body.perm-no-write is toggled by syncWritePermVisibility
   in api/helpers.js after /api/auth/me resolves. Covers dynamically-injected
   write-action buttons without needing to re-run the sync on every DOM update. */
.perm-no-write [data-perm="write"] { display: none !important }
/* 9x */ .u-input-full { padding:5px 8px;border:1.5px solid var(--smoke);border-radius:6px;font-size:11px;font-family:'IBM Plex Sans',sans-serif;width:100% }
/* 6x */ .u-label-sm { font-size:10px;font-weight:700;color:var(--mist);text-transform:uppercase;letter-spacing:.07em }
/* 5x */ .u-input-sm { padding:6px 10px;border:1.5px solid var(--smoke);border-radius:7px;font-size:11px;font-family:'IBM Plex Sans',sans-serif }
/* 5x */ .u-flex1 { flex:1 }
/* 5x */ .u-field-label { font-size:10px;font-weight:700;color:var(--iron);display:block;margin-bottom:4px }
/* 4x */ .u-btn-xs { font-size:9px;width:auto;padding:0 8px }
/* 4x */ .u-text-sm-mist { font-size:10px;color:var(--mist) }
/* 4x */ .u-textarea-full { width:100%;margin-top:4px;padding:7px 10px;border:1.5px solid var(--smoke);
                     border-radius:6px;font-size:11px;font-family:'IBM Plex Sans',sans-serif;background:var(--paper) }
/* 3x */ .u-relative { position:relative }
/* 3x */ .u-bold { font-weight:700 }
/* 3x */ .u-label-micro { font-size:8.5px;font-weight:700;color:var(--mist);text-transform:uppercase;letter-spacing:.09em;display:block;margin-bottom:4px }
/* 3x */ .u-text-red { color:#EF5350;font-weight:700 }
/* 3x */ .u-grid2-10 { display:grid;grid-template-columns:1fr 1fr;gap:0 10px }
/* 3x */ .u-mb-4 { margin-bottom:4px }
/* 3x */ .u-p-20 { padding:20px }
/* 3x */ .u-border-iron { border:1px solid #333;color:var(--mist) }
/* 3x */ .u-input-12 { width:100%;padding:7px 10px;border:1.5px solid var(--smoke);border-radius:6px;font-size:12px }
/* 2x */ .u-text-aqua { color:#80DEEA }
/* 2x */ .u-check-row { display:flex;align-items:center;gap:8px;cursor:pointer;font-size:10px;color:var(--steel) }
/* 2x */ .u-ml-auto { margin-left:auto }
/* 2x */ .u-mb-14 { margin-bottom:14px }
/* 2x */ .u-flex-wrap8 { display:flex;gap:8px;flex-wrap:wrap }
/* 2x */ .u-scroll-300 { max-height:300px;overflow-y:auto }
/* 2x */ .u-w-660 { width:660px }
/* 2x */ .u-section-label { font-family:'IBM Plex Sans',sans-serif;font-size:9px;font-weight:700;color:var(--iron);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px }
/* 2x */ .u-text-mist { color:var(--mist) }
/* 2x */ .u-list-row { font-size:11px;padding:5px 0;color:var(--slate) }
/* 2x */ .u-text-muted { font-weight:400;color:var(--mist) }
/* 2x */ .u-flex-between { display:flex;align-items:center;justify-content:space-between }
/* 2x */ .u-w-480 { width:480px }
/* 2x */ .u-textarea-2 { width:100%;margin-top:4px;padding:7px 10px;border:1.5px solid var(--smoke);
                     border-radius:6px;font-size:12px;font-family:'IBM Plex Sans',sans-serif;
                     background:var(--paper);color:var(--black);box-sizing:border-box }
/* 2x */ .u-input-area { width:100%;padding:7px 10px;border:1.5px solid var(--smoke);border-radius:6px;
                     font-size:12px;font-family:'IBM Plex Sans',sans-serif;box-sizing:border-box }

/* === Single-use utility classes -- extracted from inline style= attributes === */
/* PH3.5-a: the login-overlay duplicate utility class was deleted - #login-overlay
   (inset:0 + var(--navy-deep)) already covers that element, and ID specificity
   always won the cascade anyway. */
.u-flex-gap4 { display:flex;align-items:center;gap:4px }
.u-text-micro-dim { font-size:8px;opacity:.7 }
.u-entmenu-pop { display:none;position:absolute;top:calc(100% + 4px);left:0;background:var(--charcoal);border:1px solid #333;border-radius:10px;min-width:180px;z-index:600;box-shadow:0 8px 24px rgba(0,0,0,.3);overflow:hidden }
.u-entmenu-roles { display:flex;background:transparent;border:none;padding:0 }
.u-bg-orange { background:#FF5A00 }
.u-live-dot { width:7px;height:7px;background:var(--yellow);border-radius:50%;flex-shrink:0 }
.u-live-label { font-family:'IBM Plex Sans',sans-serif;font-size:9.5px;font-weight:800;color:var(--yellow);letter-spacing:.1em;white-space:nowrap }
.u-text-green { color:#69F0AE }
.u-text-amber { color:#FFD740 }
.u-text-yellow { color:var(--yellow) }
.u-text-pink { color:#F48FB1 }
.u-meta-label { font-size:9px;color:rgba(255,255,255,.55);font-family:'IBM Plex Sans',sans-serif; letter-spacing:.07em;font-weight:700;text-transform:uppercase }
.u-meta-sub { color:rgba(255,255,255,.55);font-size:9px;margin-left:4px }
.u-redline-btn { display:none;margin-left:8px;padding:3px 10px;font-size:9px;font-weight:800; font-family:'IBM Plex Sans',sans-serif;letter-spacing:.06em; background:rgba(239,83,80,.15);border:1px solid rgba(239,83,80,.35); border-radius:4px;color:#EF9A9A;cursor:pointer;white-space:nowrap }
.u-flex-gap5 { display:flex;gap:5px;flex-wrap:wrap }
.u-tb-zoom-input { width:42px;font-size:9px;font-family:'IBM Plex Sans',sans-serif;font-weight:700 }
.u-icon-btn { background:none;border:none;color:var(--mist);cursor:pointer;font-size:14px;line-height:1 }
.u-tb-hint { font-size:9px;color:var(--mist);font-family:'IBM Plex Sans',sans-serif;letter-spacing:.04em;line-height:1.5 }
.u-btn-9 { font-size:9px;padding:0 8px;width:auto }
.u-text-10 { font-size:10px }
.u-gap3-wrap { gap:3px;flex-wrap:wrap }
.u-mt-5 { margin-top:5px }
.u-chip-btn { padding:3px 9px;border:1.5px solid var(--smoke);border-radius:6px;background:var(--white);font-size:10px;font-weight:700;color:var(--slate);cursor:pointer;transition:all .15s;font-family:'IBM Plex Sans',sans-serif }
.u-select-sm { font-size:10px;font-family:'IBM Plex Sans',sans-serif;padding:3px 6px;border:1.5px solid var(--smoke);border-radius:6px;background:var(--white);color:var(--steel);cursor:pointer }
.u-flex-col6 { flex-direction:column;gap:6px }
.u-text-muted-9 { font-size:9px;color:var(--muted-text);line-height:1.6 }
.u-text-dashed { font-size:10px;border-style:dashed;color:#6A6A6A }
.u-view-pop { display:none;position:absolute;right:0;top:110%;background:var(--white);border:1.5px solid var(--smoke);border-radius:10px;min-width:210px;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.1);overflow:hidden }
.u-pop-head { padding:8px 14px 4px;font-size:8.5px;font-weight:700;color:var(--muted-text);text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--smoke) }
.u-text-purple { font-weight:700;color:#9575CD }
.u-text-iron-9 { margin-top:2px;color:var(--iron);font-size:9px }
.u-pop-section { padding:8px 12px 4px;border-top:1px solid #1A1A00 }
.u-flex-between-mb5 { display:flex;align-items:center;justify-content:space-between;margin-bottom:5px }
.u-pop-label { font-size:8.5px;font-weight:800;color:rgba(255,106,19,.82); text-transform:uppercase;letter-spacing:.09em }
.u-link-btn { background:none;border:none;font-size:9px;color:var(--nav-muted);cursor:pointer;padding:0 }
.u-text-italic { font-size:10px;color:var(--nav-muted);font-style:italic }
.u-sidebar-foot { padding:10px 12px;border-top:1px solid #1E1E1E;margin-top:auto }
.u-new-scenario-btn { width:100%;padding:8px 0;background:transparent;border:1.5px dashed #435568;border-radius:7px;color:var(--nav-muted);font-weight:700;font-size:10px;font-family:'IBM Plex Sans',sans-serif;letter-spacing:.06em;cursor:pointer;transition:all .15s }
.u-flex-gap4-mt6 { display:flex;gap:4px;margin-top:6px }
.u-flex-scroll { flex:1;overflow:auto;min-height:0;position:relative }
.u-hidden-force { display:none !important }
.u-flex-gap3 { display:flex;gap:3px }
.u-label-9 { padding:4px 12px 2px;font-size:9px;color:var(--muted-text) }
.u-w-520 { width:520px }
.u-note-12 { margin-top:12px;font-size:11px;color:var(--slate) }
.u-text-white { color:#fff }
.u-bg-green-50 { background:#E8F5E9 }
.u-badge-green { background:#E8F5E9;color:#2E7D32 }
.u-bg-orange-50 { background:#FFF3E0 }
.u-badge-orange { background:#FFF3E0;color:#E65100 }
.u-bg-blue-50 { background:#E3F2FD }
.u-badge-blue { background:#E3F2FD;color:#1565C0 }
.u-ml4-dim { margin-left:4px;opacity:.7 }
.u-flex-scroll-2 { flex:1;overflow:auto }
.u-scroll-pane { flex:1;overflow-y:auto;padding:24px;background:var(--paper) }
.u-py-8 { padding:8px 0 }
.u-minh-120 { min-height:120px }
.u-mt-0 { margin-top:0 }
.u-flex-clip { flex:1;overflow:hidden }
.u-empty-state { display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted-text);font-size:13px }
.u-scroll-pane-2 { flex:1;overflow-y:auto;background:var(--paper);min-height:0 }
.u-page-wrap { padding:24px;max-width:1400px;margin:0 auto }
.u-card { background:var(--white);border:1.5px solid var(--smoke);border-radius:10px;overflow:hidden;margin-bottom:20px }
.u-error-banner { display:none;margin-bottom:12px;padding:8px 12px; background:rgba(239,83,80,.07);border:1px solid rgba(239,83,80,.2);border-radius:6px; font-size:11px;color:#EF9A9A }
.u-text-gray-9 { font-weight:400;color:#999;font-size:9px }
.u-flex-gap8 { display:flex;gap:8px }
.u-items-start { align-items:start }
.u-flex-wrap6 { display:flex;flex-wrap:wrap;gap:6px }
.u-close-btn { background:none;border:none;color:var(--yellow);font-size:18px;cursor:pointer;line-height:1 }
.u-flex-col8 { display:flex;flex-direction:column;gap:8px }
.u-flex-end10 { display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end }
.u-text-gray-9b { color:#999;font-weight:400;font-size:9px }
.u-scroll-600 { max-height:600px;overflow:auto }
.u-flex-between-start { display:flex;justify-content:space-between;align-items:flex-start }
.u-text-20 { font-size:20px;padding:0;margin-left:8px }
.u-flex-wrap-mt8 { margin-top:8px;display:flex;gap:5px;flex-wrap:wrap }
.u-grid2-24 { display:grid;grid-template-columns:1fr 1fr;gap:0 24px }
.u-flex-col-mb12 { display:flex;flex-direction:column;gap:6px;margin-bottom:12px }
.u-tag { font-size:9px;font-family:'IBM Plex Sans',sans-serif;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--paper);color:var(--muted-text) }
.u-debug-box { background:#111;border-radius:8px;padding:10px 12px;font-size:10px;display:none }
.u-border-smoke { border:1px solid var(--smoke);color:var(--steel) }
.u-dropzone { border:2px dashed #444;border-radius:10px;padding:36px 20px;text-align:center; cursor:pointer;transition:border-color .15s,background .15s }
.u-icon-28 { font-size:28px;margin-bottom:8px }
.u-title-13 { font-size:13px;font-weight:700;color:var(--paper);margin-bottom:4px }
.u-hint-10 { margin-top:10px;font-size:11px;color:var(--mist);min-height:18px }
.u-section-top { margin-top:16px;border-top:1px solid #222;padding-top:12px }
.u-flex-between-mb8 { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px }
.u-label-10 { font-size:10px;font-weight:800;color:var(--mist);text-transform:uppercase;letter-spacing:.08em }
.u-link-btn-2 { background:none;border:none;color:var(--mist);font-size:10px;cursor:pointer;padding:0 }
.u-text-italic-2 { font-size:11px;color:#444;font-style:italic }
.u-info-banner { display:none;margin-bottom:10px;padding:7px 12px; background:rgba(66,165,245,.07);border:1px solid rgba(66,165,245,.2);border-radius:6px; align-items:center;gap:8px }
.u-info-text { font-size:11px;color:#64B5F6;flex:1 }
.u-text-mb12 { font-size:11px;color:var(--mist);margin-bottom:12px }
.u-subtitle { font-size:11px;font-weight:700;color:var(--paper);margin-bottom:6px }
.u-scroll-x-220 { overflow-x:auto;max-height:220px;overflow-y:auto }
.u-scroll-x-160 { margin-top:14px;overflow-x:auto;max-height:160px;overflow-y:auto }
.u-hint-8 { margin-top:8px;font-size:11px;color:var(--mist);min-height:18px }
.u-empty-center { display:none;text-align:center;padding:24px 0 }
.u-icon-36 { font-size:36px;margin-bottom:8px }
.u-text-13 { font-size:13px;color:var(--paper) }
.u-text-left { text-align:left }
.u-form-head { font-size:11px;font-weight:700;color:var(--mist); margin-bottom:14px;padding:6px 10px;background:#0D0D0D;border-radius:5px }
.u-grid2-12 { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.u-col-span-rel { grid-column:1/-1;position:relative }
.u-autocomplete-pop { display:none;position:absolute;left:0;right:0;top:100%;z-index:200; background:var(--paper);border:1.5px solid var(--smoke);border-top:none; border-radius:0 0 6px 6px;max-height:180px;overflow-y:auto; box-shadow:0 4px 12px rgba(0,0,0,.25) }
.u-col-span { grid-column:1/-1 }
.u-error-line { min-height:18px;font-size:11px;color:var(--r-high);margin-top:8px }
.u-form-head-2 { font-size:10px;font-weight:700;color:var(--mist);margin-bottom:14px; padding:6px 10px;background:#0D0D0D;border-radius:5px }
.u-flex-col10 { display:flex;flex-direction:column;gap:10px }
.u-text-red-2 { color:#EF5350 }
.u-flex-gap10 { display:flex;gap:10px }
.u-line-16 { font-size:11px;min-height:16px }
.u-modal-wide { width:min(96vw,1100px);max-height:90vh;display:flex;flex-direction:column }
.u-modal-body { overflow-x:auto;overflow-y:auto;flex:1;padding:0 }
.u-w-500 { width:500px }
.u-text-mb14 { color:var(--mist);font-size:11px;margin-bottom:14px }
.u-section-top-2 { margin-top:18px;border-top:1px solid #2A2A2A;padding-top:14px }
.u-flex-baseline { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px }
.u-stat-label { font-size:9px;color:var(--yellow-dim);font-family:'IBM Plex Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em }
.u-text-iron { font-size:9px;color:var(--iron) }
.u-table { width:100%;border-collapse:collapse;font-size:11px }
.u-th-left { text-align:left;font-family:'IBM Plex Sans',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--iron);padding:4px 0;border-bottom:1.5px solid #333 }
.u-th-right { text-align:right;font-family:'IBM Plex Sans',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--iron);padding:4px 8px;border-bottom:1.5px solid #333 }
.u-th-right-2 { text-align:right;font-family:'IBM Plex Sans',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--iron);padding:4px 0;border-bottom:1.5px solid #333 }
.u-text-iron-mt8 { font-size:9px;color:var(--iron);margin-top:8px;line-height:1.5 }
.u-stat-box { margin-top:16px;padding:10px 12px;background:#1A1A1A;border-radius:8px }
.u-stat-box-label { font-size:9px;color:var(--iron);font-family:'IBM Plex Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px }
.u-sidepanel { position:fixed;right:0;top:48px;bottom:0; width:220px;background:#fff;border-left:1.5px solid #E0E0E0;z-index:1200; display:none;flex-direction:column;overflow:hidden;box-shadow:-8px 0 24px rgba(0,0,0,.08) }
.u-sidepanel-head { background:#141414;padding:12px 14px 10px;flex-shrink:0 }
.u-sidepanel-kicker { font-family:'IBM Plex Sans',sans-serif;font-size:9px;font-weight:800; color:rgba(255,90,0,.7);letter-spacing:.1em;text-transform:uppercase }
.u-sidepanel-title { font-size:13px;font-weight:800;color:#fff;margin-top:2px;line-height:1.2 }
.u-sidepanel-close { background:none;border:none;color:rgba(255,255,255,.5); font-size:20px;cursor:pointer;line-height:1;padding:0 }
.u-sidepanel-back { background:none;border:none;color:rgba(255,255,255,.4);font-size:13px; cursor:pointer;line-height:1;padding:0;margin-right:6px }
.u-sidepanel-sub { font-size:10px;color:rgba(255,255,255,.4);margin-top:5px }
.u-sidepanel-body { flex:1;overflow-y:auto;padding:12px }
.u-sidepanel-foot { padding:10px 14px;border-top:1px solid #E0E0E0;flex-shrink:0 }
.u-sidepanel-check { display:flex;align-items:center;gap:8px;font-size:10px;color:#6A6A6A;cursor:pointer }
.u-cursor-pointer { cursor:pointer }
.u-fs-overlay { display:none;position:fixed;top:0;right:0;width:100%;height:100%; background:rgba(255,255,255,0.98);z-index:1000;overflow:auto;padding:1.5rem;box-sizing:border-box }
.u-fs-wrap { max-width:1200px;margin:0 auto }
.u-fs-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem }
.u-fs-title { margin:0;font-size:1.2rem }
.u-fs-close { background:#e74c3c;color:#fff;border:none;border-radius:4px; padding:6px 14px;cursor:pointer;font-size:0.85rem }

/* Hover styles extracted from onmouseenter/onmouseleave inline handlers */
button.btn-ghost-hover:hover { border-color: var(--yellow); color: var(--yellow); }

/* HC Elimination Modal - semantic class names */
.hc-elim-modal-box {max-width:480px}
.hc-elim-modal-body {padding:20px}
.hc-elim-pos-label {margin:0 0 16px;font-weight:600;color:var(--black)}
.hc-elim-label {display:block;font-size:12px;font-weight:700;color:var(--slate);margin-bottom:4px}
.hc-elim-required-star {color:var(--red)}
.hc-elim-textarea {width:100%;box-sizing:border-box;padding:8px;border:1.5px solid var(--smoke);border-radius:6px;font-size:13px;resize:vertical;font-family:inherit}
.hc-elim-inline-error {display:none;color:var(--red);font-size:12px;margin-top:4px}
.hc-elim-actions {display:flex;gap:8px;margin-top:16px;justify-content:flex-end}

/* ── Sprint 10A: AI-readiness badges ─────────────────────────────────────────
 * Styles for badges rendered directly on org chart nodes (_buildAiBadgeSlot in
 * render.js) and for the AI status pills in the position detail panel
 * (panels_ai.js).  All selectors are inert when ORGFORGE_AI_ENABLED is false
 * because the badge slot elements are never injected into the DOM.
 * -------------------------------------------------------------------------- */

/* Badge slot container - absolutely positioned at bottom-left of each card.
 * The card root div (compact / standard / detailed) already has
 * position:relative, so this anchors correctly without layout impact. */
.ai-node-badge-slot {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 5;
  pointer-events: none;
  line-height: 1;
}

/* Node badge - base pill styles */
.ai-node-badge {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 800;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Node badge - execution_mode colour themes */
.ai-badge-human            { background-color:#E8F5E9; color:#2E7D32; border:1px solid #A5D6A7; }
.ai-badge-hybrid           { background-color:#E3F2FD; color:#1565C0; border:1px solid #90CAF9; }
.ai-badge-automated        { background-color:#F3E5F5; color:#6A1B9A; border:1px solid #CE93D8; }
.ai-badge-agent-supervised { background-color:#FFF8E1; color:#E65100; border:1px solid #FFD54F; }
.ai-badge-unknown          { background-color:#F5F5F5; color:#757575; border:1px solid #E0E0E0; }

/* ── IN-10 M1 (thin slice): AI Agent seat (D13 visual grammar) ───────────────
 * entity_kind='ai_agent' nodes get a dashed --orange card + a ✦ glyph marker.
 * Dashed border + ✦ + warm tint distinguish an agent seat from a human at a
 * glance; the ✦ is decorative (meaning is carried by the detail-panel text).
 * Agents are excluded from vacancy styling (D6) - agent-seat wins. */
.org-node.agent-seat {
  border: 1.5px dashed var(--orange, #FF5A00) !important;
  background: var(--yellow-bg, #FFF1E8);
}
.org-node.agent-seat::after {
  content: '\2726';                /* ✦ */
  position: absolute;
  top: 3px;
  right: 6px;
  color: var(--orange, #FF5A00);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* Detail-panel AI status pill - base */
.ai-status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Detail-panel status pill - execution_mode colour themes */
.ai-status-human            { background-color:#C8E6C9; color:#1B5E20; border:1.5px solid #81C784; }
.ai-status-hybrid           { background-color:#BBDEFB; color:#0D47A1; border:1.5px solid #64B5F6; }
.ai-status-automated        { background-color:#E1BEE7; color:#4A148C; border:1.5px solid #BA68C8; }
.ai-status-agent-supervised { background-color:#FFE0B2; color:#BF360C; border:1.5px solid #FFAB40; }
.ai-status-unknown          { background-color:#EEEEEE; color:#616161; border:1.5px solid #BDBDBD; }

@media (forced-colors: active) {
  .ai-node-badge, .ai-status-pill { forced-color-adjust: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-node-badge, .ai-status-pill { box-shadow: none; }
}

/* ─── Import modal: type picker + progress card ─────────────────────────────
   Lives in step 1 of #import-modal. The picker chooses which canonical
   schema the dropped file maps to (positions / headcount / contingent);
   the progress card replaces the cycling "Parsing… / Inferring…" stub with
   a real stage timeline, elapsed timer, and cancel button while the upload
   request is in flight.
*/
.import-type-picker { margin-bottom: 14px; }
.import-type-picker-label {
  font-size: 10px; font-weight: 800; color: var(--iron);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px;
}
.import-type-picker-row { display: flex; gap: 6px; }
.import-type-btn {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 9px 11px; background: var(--paper);
  border: 1.5px solid var(--smoke); border-radius: 7px;
  font-family: 'IBM Plex Sans', sans-serif; cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
  text-align: left;
}
.import-type-btn:hover { background: var(--white); border-color: var(--slate); }
.import-type-btn.is-active {
  background: var(--yellow-bg); border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow-bg);
}
.import-type-btn-title {
  font-size: 12px; font-weight: 700; color: var(--ink, #1A1A1A);
}
.import-type-btn.is-active .import-type-btn-title { color: var(--yellow-dim); }
.import-type-btn-sub {
  font-size: 9.5px; color: var(--slate); letter-spacing: .01em;
}

/* Progress card shown while the upload XHR is in flight. */
.import-progress-card {
  margin-top: 8px; padding: 11px 13px; background: var(--paper);
  border: 1.5px solid var(--smoke); border-radius: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.import-progress-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 9px;
}
.import-progress-title { min-width: 0; flex: 1; }
.import-progress-title strong {
  display: block; font-size: 12px; color: var(--ink, #1A1A1A);
  font-weight: 700; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.import-progress-meta {
  font-size: 10px; color: var(--iron); margin-top: 1px; display: block;
}
.import-progress-controls {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.import-progress-elapsed {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--iron); font-variant-numeric: tabular-nums;
}
.import-cancel-btn, .import-retry-btn {
  padding: 4px 10px; background: transparent;
  border: 1px solid var(--smoke); border-radius: 5px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 700;
  color: var(--iron); cursor: pointer; letter-spacing: .03em;
}
.import-cancel-btn:hover { border-color: var(--r-high); color: var(--r-high); }
.import-retry-btn {
  border-color: var(--yellow); color: var(--yellow-dim); background: var(--yellow-bg);
}
.import-retry-btn:hover { background: var(--yellow); color: var(--white); }

.import-progress-stages {
  display: flex; gap: 0; margin: 12px 0 8px;
  align-items: stretch; position: relative;
}
.import-progress-stages::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 7px;
  height: 1.5px; background: var(--smoke); z-index: 0;
}
.import-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; position: relative; z-index: 1;
}
.import-stage-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--smoke);
  transition: background .25s, border-color .25s, box-shadow .25s;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--white); font-weight: 800;
}
.import-stage-name {
  font-size: 9.5px; color: var(--slate); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; text-align: center;
}
.import-stage.is-done .import-stage-dot {
  background: var(--r-low); border-color: var(--r-low);
}
.import-stage.is-done .import-stage-dot::after {
  content: '\2713';
}
.import-stage.is-done .import-stage-name { color: var(--r-low); }
.import-stage.is-active .import-stage-dot {
  background: var(--yellow); border-color: var(--yellow);
  box-shadow: 0 0 0 4px var(--yellow-bg);
  animation: import-stage-pulse 1.4s ease-in-out infinite;
}
.import-stage.is-active .import-stage-name { color: var(--yellow-dim); }
.import-stage.is-error .import-stage-dot {
  background: var(--r-high); border-color: var(--r-high);
}
.import-stage.is-error .import-stage-dot::after { content: '\00d7'; }
.import-stage.is-error .import-stage-name { color: var(--r-high); }
@keyframes import-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--yellow-bg); }
  50%      { box-shadow: 0 0 0 7px var(--yellow-bg); }
}
@media (prefers-reduced-motion: reduce) {
  .import-stage.is-active .import-stage-dot { animation: none; }
}

.import-progress-track {
  height: 4px; background: var(--smoke); border-radius: 4px;
  overflow: hidden; margin: 4px 0;
}
.import-progress-fill {
  height: 100%; background: var(--yellow); border-radius: 4px;
  transition: width .25s ease-out;
}
.import-progress-fill.is-indeterminate {
  width: 30% !important;
  background: linear-gradient(90deg,
    var(--yellow-bg) 0%, var(--yellow) 50%, var(--yellow-bg) 100%);
  animation: import-indeterminate 1.4s ease-in-out infinite;
}
@keyframes import-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@media (prefers-reduced-motion: reduce) {
  .import-progress-fill.is-indeterminate {
    width: 100% !important; animation: none;
    background: var(--yellow);
  }
}

.import-progress-detail {
  font-size: 11px; color: var(--iron); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.import-progress-hint {
  font-size: 10px; color: var(--slate); margin-top: 4px; font-style: italic;
}
.import-progress-error {
  margin-top: 10px; padding: 8px 11px;
  background: var(--r-high-bg); border: 1px solid var(--r-high);
  border-radius: 6px; font-size: 11px; color: var(--r-high);
  line-height: 1.45;
}
.import-progress-error strong { font-weight: 800; }
.import-progress-error .import-progress-error-detail {
  display: block; margin-top: 3px; font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--iron); word-break: break-word;
}