:root {
  color-scheme: light;

  --surface-base: #f3f6f8;
  --surface-raised: #ffffff;
  --surface-interactive: #edf2f4;
  --surface-interactive-hover: #e7f3f4;
  --surface-selected: #e8f5f4;
  --surface-overlay: rgba(23, 33, 27, 0.32);

  --border-default: #c8d3d8;
  --border-strong: #9cabb2;
  --border-focus: #087f8c;

  --text-primary: #15232b;
  --text-secondary: #455149;
  --text-muted: #586974;
  --text-on-accent: #ffffff;

  --action-primary: #087f8c;
  --action-primary-hover: #075f69;
  --focus-ring: rgba(22, 124, 128, 0.16);

  --status-success: #317a3f;
  --status-warning: #b46a19;
  --status-danger: #b13f35;

  --domain-role: #3156a3;
  --domain-task: #087f8c;
  --domain-knowledge: #4f7c45;
  --domain-requirement: #7b3f98;
  --domain-risk: #c23b3b;
  --graph-edge: #687d88;
  --graph-edge-soft: rgba(76, 98, 109, 0.62);
  --graph-label-bg: rgba(255, 255, 255, 0.88);
  --graph-label-border: rgba(216, 224, 218, 0.92);
  --graph-edge-gradient-start: #a998ff;
  --graph-edge-gradient-mid: #8fa8ff;
  --graph-edge-gradient-end: #7fc4dc;

  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.risk-editor-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
}

.risk-editor-form {
  min-width: 0;
}

.requirement-risks-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}

.requirement-risks-header,
.requirement-risk-title,
.requirement-risk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.requirement-risks-header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.requirement-risks-header h4,
.requirement-risk-item p {
  margin: 0;
}

.requirement-risks-list,
.admin-risk-registry {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.requirement-risk-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  min-width: 0;
}

.requirement-risk-item strong,
.requirement-risk-item p {
  overflow-wrap: anywhere;
}

.requirement-risk-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.admin-risk-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-risk-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-risk-filters input,
.admin-risk-filters select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .admin-risk-filters {
    grid-template-columns: 1fr;
  }

  .requirement-risks-header,
  .requirement-risk-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

.workspace-switcher {
  display: grid;
  width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
}

.workspace-switcher button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  text-align: left;
}

.workspace-switcher button:hover,
.workspace-switcher button:focus-visible {
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
}

.workspace-switcher button:focus-visible {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.workspace-switcher button.active {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.admin-workspace-switcher {
  width: auto;
  min-width: min(100%, 420px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-workspace-switcher button {
  text-align: center;
}

@media (max-width: 760px) {
  .admin-workspace-switcher {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
}

.manager-team-workspace {
  display: grid;
  min-width: 0;
  gap: 18px;
  padding: 24px 28px 36px;
}

.manager-team-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.manager-team-header h2,
.manager-team-header p,
.manager-section-heading h3,
.manager-member p {
  margin: 0;
}

.manager-team-header h2 {
  margin-top: 3px;
  font-size: 28px;
}

.manager-team-header > div > p:last-child {
  margin-top: 5px;
  color: var(--text-muted);
}

.manager-indirect-toggle {
  display: flex;
  min-width: 235px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  padding: 10px 12px;
  font-weight: 650;
}

.manager-indirect-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.manager-indirect-toggle i {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-interactive);
}

.manager-indirect-toggle i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 25%, transparent);
  content: "";
  transition: transform 150ms ease;
}

.manager-indirect-toggle input:checked + i {
  border-color: var(--border-focus);
  background: var(--action-primary);
}

.manager-indirect-toggle input:checked + i::after {
  transform: translateX(18px);
}

.manager-indirect-toggle input:focus-visible + i {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.manager-team-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(115px, 1fr));
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  overflow: hidden;
}

.manager-summary-metric {
  display: grid;
  min-width: 0;
  gap: 3px;
  border-right: 1px solid var(--border-default);
  padding: 14px;
}

.manager-summary-metric:last-child {
  border-right: 0;
}

.manager-summary-metric span,
.manager-summary-metric small,
.manager-member header span,
.manager-member-roles small,
.manager-attention-item small {
  color: var(--text-muted);
}

.manager-summary-metric strong {
  font-size: 24px;
}

.manager-summary-metric.ready strong { color: var(--status-success); }
.manager-summary-metric.partial strong { color: var(--status-warning); }
.manager-summary-metric.not-ready strong { color: var(--status-danger); }
.manager-summary-metric.not-assessed strong { color: var(--text-muted); }

.manager-team-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.manager-team-toolbar label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 650;
}

.manager-team-toolbar select {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  background: var(--surface-raised);
  color: var(--text-primary);
  padding: 0 10px;
}

.manager-team-filter-result {
  min-height: 40px;
  color: var(--text-muted);
  padding: 11px 0;
  white-space: nowrap;
}

.manager-team-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
  gap: 18px;
}

.manager-member-list,
.manager-attention,
.manager-attention-section,
.manager-attention-list,
.manager-member-roles {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.manager-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.manager-section-heading h3 {
  font-size: 16px;
}

.manager-section-heading > span {
  min-width: 28px;
  border-radius: 10px;
  background: var(--surface-interactive);
  padding: 2px 8px;
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
}

.manager-member {
  display: grid;
  min-width: 0;
  gap: 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  padding: 14px;
}

.manager-member header,
.manager-member header > div,
.manager-member-context {
  display: flex;
  min-width: 0;
  gap: 8px;
}

.manager-member header {
  align-items: center;
  justify-content: space-between;
}

.manager-member header > div {
  flex-direction: column;
}

.manager-member-context {
  flex-wrap: wrap;
}

.manager-member-context span {
  border-left: 2px solid var(--border-strong);
  background: var(--surface-interactive);
  padding: 5px 8px;
  font-size: 13px;
}

.manager-member-roles button {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  background: var(--surface-interactive);
  color: var(--text-primary);
  padding: 10px;
  text-align: left;
  white-space: normal;
}

.manager-member-roles button:hover,
.manager-member-roles button:focus-visible {
  border-color: var(--border-focus);
  background: var(--surface-interactive-hover);
}

.manager-member-roles button > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.manager-status {
  border-radius: 4px;
  background: var(--surface-interactive);
  padding: 5px 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.manager-status.ready { background: var(--surface-interactive); color: var(--status-success); }
.manager-status.partial { background: var(--surface-interactive); color: var(--status-warning); }
.manager-status.not-ready { background: var(--surface-interactive); color: var(--status-danger); }

.manager-attention {
  gap: 16px;
}

.manager-attention-section {
  border-top: 2px solid var(--border-default);
  padding-top: 10px;
}

.manager-attention-item {
  display: grid;
  min-width: 0;
  gap: 3px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-raised);
  padding: 9px 10px;
}

.manager-attention-item.warning { border-left-color: var(--border-strong); }
.manager-attention-item.danger { border-left-color: var(--border-strong); }

.manager-member *,
.manager-attention-item *,
.manager-team-error *,
.manager-team-empty {
  min-width: 0;
  overflow-wrap: anywhere;
}

.manager-team-empty,
.manager-team-loading,
.manager-team-error,
.manager-inline-empty {
  border: 1px dashed var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 18px;
}

.manager-team-error {
  color: var(--status-danger);
}

@media (max-width: 1180px) {
  .manager-team-summary {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .manager-summary-metric:nth-child(3) {
    border-right: 0;
  }

  .manager-summary-metric:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border-default);
  }
}

@media (max-width: 900px) {
  .manager-team-workspace {
    padding: 20px;
  }

  .manager-team-layout,
  .manager-team-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .manager-team-filter-result {
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 620px) {
  .manager-team-workspace {
    padding: 16px 12px 28px;
  }

  .manager-team-header,
  .manager-member header {
    align-items: stretch;
    flex-direction: column;
  }

  .manager-indirect-toggle {
    min-width: 0;
  }

  .manager-team-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manager-summary-metric,
  .manager-summary-metric:nth-child(3) {
    border-right: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
  }

  .manager-summary-metric:nth-child(even) {
    border-right: 0;
  }

  .manager-summary-metric:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .manager-member-roles button {
    grid-template-columns: minmax(0, 1fr);
  }

  .manager-status {
    width: fit-content;
    white-space: normal;
  }
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--surface-base);
  color: var(--text-primary);
}

button,
select {
  font: inherit;
}

button {
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):disabled {
  background: var(--surface-interactive);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea)[aria-invalid="true"] {
  border-color: var(--border-strong);
  box-shadow: inset 3px 0 0 var(--status-danger);
}

body.auth-required .app-shell {
  display: none;
}

body.password-change-required #loginScreen {
  display: none;
}

body:not(.auth-required) .login-screen {
  display: none;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px;
}

.login-panel {
  display: grid;
  width: min(420px, 100%);
  gap: 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--text-primary) 12%, transparent);
  padding: 28px;
}

.login-brand {
  margin-bottom: 4px;
}

.login-panel h2 {
  margin: 0;
  font-size: 24px;
}

.login-field {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.login-field input {
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  padding: 0 12px;
}

.login-field input:focus {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
}

.login-error {
  min-height: 18px;
  margin: 0;
  color: var(--status-danger);
  font-size: 13px;
}

.login-button,
.logout-button {
  border: 0;
  border-radius: 8px;
  background: var(--action-primary);
  color: var(--text-on-accent);
  cursor: pointer;
  font: inherit;
}

.login-button {
  min-height: 44px;
}

.login-button:hover,
.logout-button:hover {
  background: var(--action-primary-hover);
}

.login-link-button {
  justify-self: center;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-link-button:hover,
.login-link-button:focus-visible {
  color: var(--text-primary);
}

.logout-button {
  width: 100%;
  min-height: 38px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 100vh;
}

.login-status {
  min-height: 18px;
  margin: 0;
  color: var(--status-success);
  font-size: 13px;
}

.password-change-panel {
  gap: 14px;
}

.password-reset-panel {
  gap: 14px;
}

.password-change-user,
.password-policy-hint {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.password-change-user {
  color: var(--text-primary);
  font-weight: 700;
}

.password-change-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.password-change-actions .login-button,
.password-change-actions .secondary-button {
  min-height: 44px;
}

.mfa-auth-panel {
  width: min(540px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.mfa-auth-description,
.mfa-step-form p,
.mfa-recovery-step p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mfa-flow-body,
.mfa-step-form,
.mfa-recovery-step {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.mfa-step-actions,
.mfa-auth-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.mfa-auth-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.mfa-auth-actions .login-button,
.mfa-auth-actions .secondary-button {
  min-height: 44px;
}

.mfa-enrollment-layout {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.mfa-qr {
  display: grid;
  width: 184px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: #fff;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  padding: 6px;
  text-align: center;
}

.mfa-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mfa-enrollment-details {
  min-width: 0;
}

.mfa-enrollment-details > p:first-child {
  margin: 0 0 12px;
  color: var(--text-primary);
}

.mfa-manual-key {
  display: grid;
  gap: 5px;
}

.mfa-manual-key span {
  color: var(--text-muted);
  font-size: 12px;
}

.mfa-manual-key code {
  display: block;
  max-width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-interactive);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 9px 10px;
  user-select: all;
}

.mfa-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-interactive);
  list-style: none;
  padding: 12px;
}

.mfa-recovery-codes li,
.mfa-recovery-codes code {
  min-width: 0;
  color: var(--text-primary);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.mfa-recovery-confirmation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
}

.mfa-recovery-confirmation input {
  margin: 2px 0 0;
}

.login-field select {
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  padding: 0 12px;
}

.login-field select:focus {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
}

@media (max-width: 480px) {
  .login-screen {
    padding: 16px;
  }

  .login-panel {
    padding: 22px;
  }

  .password-change-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .mfa-auth-panel {
    max-height: calc(100dvh - 20px);
  }

  .mfa-enrollment-layout,
  .mfa-recovery-codes,
  .mfa-auth-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .mfa-qr {
    width: min(184px, 100%);
    justify-self: center;
  }

  .mfa-step-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mfa-step-actions button {
    width: 100%;
  }
}

.app-shell.admin-mode {
  height: 100dvh;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.app-shell.admin-mode > .workspace,
.app-shell.admin-mode > .sidebar {
  display: none;
}

.sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid var(--border-default);
  background: var(--surface-raised);
  overflow-x: hidden;
  padding: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--action-primary);
  color: var(--text-on-accent);
  font-weight: 800;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.panel h2,
.section-title h3,
.role-passport p {
  margin: 0;
}

.brand h1 {
  font-size: 21px;
}

.brand p {
  color: var(--text-muted);
  font-size: 13px;
}

.current-user {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 10px 12px;
}

.current-user strong {
  font-size: 13px;
}

.current-user span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}

#logoutButton {
  display: none;
}

.logout-icon-button,
.current-user-icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  place-items: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.logout-icon-button:hover,
.current-user-icon-button:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive-hover);
}

.logout-icon-button:active,
.current-user-icon-button:active {
  transform: translateY(1px);
}

.logout-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.admin-console-button {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--action-primary);
  color: var(--text-on-accent);
  cursor: pointer;
  font-weight: 750;
  padding: 11px 12px;
  text-align: center;
}

.admin-console-button:hover {
  filter: brightness(0.96);
}

.create-role-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  gap: 8px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  padding: 0 12px;
}

.create-role-button span {
  font-size: 20px;
  line-height: 1;
}

.create-role-button:hover {
  background: var(--surface-interactive-hover);
}

.graph-create-control {
  position: relative;
  margin-top: 8px;
  margin-bottom: 10px;
}

.add-graph-button {
  margin: 0;
  background: var(--action-primary-hover);
}

.graph-create-intent-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 100%;
  min-width: 210px;
  gap: 2px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--text-primary) 18%, transparent);
  padding: 5px;
}

.graph-create-intent-menu.hidden {
  display: none;
}

.graph-create-intent-menu button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  padding: 0 12px;
}

.graph-create-intent-menu button:hover,
.graph-create-intent-menu button:focus-visible {
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.panel,
.menu-group {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

.menu-group {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 10px;
}

.panel.compact {
  margin-top: auto;
}

.panel-heading,
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel h2,
.section-title h3 {
  font-size: 15px;
}

.panel-heading span,
.section-title span,
.eyebrow {
  color: var(--text-muted);
  font-size: 12px;
}

.item-list {
  display: grid;
  gap: 8px;
}

.item-list.collapsed {
  display: none;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px 2px 8px;
  text-align: left;
}

.menu-toggle span {
  font-size: 15px;
  font-weight: 750;
}

.menu-toggle b {
  border-radius: 999px;
  background: var(--surface-interactive);
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 8px;
}

.role-button,
.person-button {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  padding: 12px;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.role-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: stretch;
}

.current-user-menu {
  position: relative;
  min-width: 0;
}

.current-user-actions-menu {
  position: absolute;
  z-index: 14;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: min(260px, 100%);
  gap: 6px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 16%, transparent);
  padding: 8px;
}

.current-user-actions-menu[hidden] {
  display: none;
}

.current-user-actions-menu button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 8px 10px;
}

.current-user-actions-menu button:hover:not(:disabled),
.current-user-actions-menu button:focus-visible {
  background: var(--surface-interactive-hover);
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.current-user-actions-menu button:disabled {
  color: var(--text-muted);
  cursor: default;
}

.current-user-password-notice {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  padding: 2px 10px 8px;
}

.role-list-row .role-button {
  min-width: 0;
}

.person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: stretch;
}

.assign-role-button {
  display: grid;
  width: 38px;
  min-width: 38px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 20px;
  font-weight: 800;
  place-items: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.assign-role-button:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive-hover);
}

.assign-role-button:active {
  transform: translateY(1px);
}

.role-button:hover,
.role-button.active,
.person-button:hover,
.person-button.active {
  border-color: var(--border-focus);
  background: var(--surface-selected);
}

.role-button:active,
.person-button:active {
  transform: translateY(1px);
}

.role-button strong,
.person-button strong {
  display: block;
  min-width: 0;
  margin-bottom: 5px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.role-button span,
.person-button span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-description-popover {
  display: flex;
  min-width: 0;
}

.role-description-trigger {
  display: grid;
  width: 34px;
  min-width: 34px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  place-items: center;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.role-description-trigger:hover,
.role-description-trigger:focus-visible,
.role-description-popover.is-open .role-description-trigger {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.role-description-trigger:active {
  transform: translateY(1px);
}

.role-description-tooltip {
  position: fixed;
  z-index: 20;
  display: none;
  max-width: calc(100vw - 24px);
  max-height: min(52vh, 360px);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--text-primary) 18%, transparent);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  white-space: pre-line;
}

.role-description-popover.is-open .role-description-tooltip,
.role-description-popover:focus-within .role-description-tooltip {
  display: block;
}

.self-assessment-menu {
  gap: 10px;
}

.self-assessment-role {
  display: grid;
  gap: 9px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 11px;
}

.self-assessment-role-text {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.self-assessment-role-text strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.self-assessment-role-text span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.self-assessment-action {
  min-height: 36px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.self-assessment-action:hover {
  background: var(--surface-selected);
}

.self-assessment-empty {
  padding: 11px;
}

.role-assignment-form {
  display: grid;
  gap: 14px;
}

.role-assignment-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.role-assignment-context > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 11px;
}

.role-assignment-context span,
.role-assignment-context small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.role-assignment-context strong {
  color: var(--text-primary);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.role-assignment-account.unlinked {
  border-color: var(--border-strong);
  background: var(--surface-interactive);
}

.role-assignment-account select {
  min-width: 0;
  padding: 8px;
}

.role-assignment-replacement-note {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

.role-assignment-list {
  display: grid;
  max-height: min(54vh, 520px);
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}

.role-checkbox {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  cursor: pointer;
  padding: 11px;
}

.role-checkbox input {
  margin-top: 2px;
}

.role-checkbox span {
  display: grid;
  gap: 4px;
}

.role-checkbox strong {
  font-size: 14px;
}

.role-checkbox small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

select {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  padding: 11px;
}

.workspace {
  display: flex;
  min-width: 0;
  min-height: 100dvh;
  flex-direction: column;
}

.workspace:has(.graph-area.graph-only) {
  height: 100dvh;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised);
  padding: 20px 26px;
}

.topbar h2 {
  margin-top: 4px;
  font-size: 25px;
  line-height: 1.15;
}

.readiness {
  display: grid;
  min-width: 118px;
  gap: 3px;
  border-left: 1px solid var(--border-default);
  padding-left: 20px;
  text-align: right;
}

.readiness.hidden {
  display: none;
}

.readiness span {
  color: var(--text-muted);
  font-size: 12px;
}

.readiness strong {
  color: var(--text-primary);
  font-size: 28px;
}

.graph-area {
  position: relative;
  height: clamp(460px, 56dvh, 720px);
  min-height: 460px;
  margin: 10px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  border-radius: 6px;
  background: var(--surface-base);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-raised) 72%, transparent);
  isolation: isolate;
  overflow: hidden;
}

.graph-area::after {
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--border-default) 24%, transparent);
  border-radius: 3px;
  content: "";
  pointer-events: none;
}

#knowledgeGraph {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  cursor: default;
}

#knowledgeGraph.panning {
  cursor: grabbing;
}

.graph-layer-controls {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.graph-layer-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.graph-layer-toggle input {
  position: absolute;
  right: 0;
  z-index: 1;
  width: 34px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.graph-layer-toggle i {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-interactive);
  transition: background 140ms ease, border-color 140ms ease;
}

.graph-layer-toggle i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 28%, transparent);
  content: "";
  transition: transform 140ms ease;
}

.graph-layer-toggle input:checked + i {
  border-color: var(--border-focus);
  background: var(--action-primary);
}

.graph-layer-toggle input:checked + i::after {
  transform: translateX(14px);
}

.graph-layer-toggle input:focus-visible + i {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.graph-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.graph-tool-button {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-weight: 750;
  cursor: pointer;
}

.graph-tool-button:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

.graph-tool-reset {
  min-width: 54px;
  font-size: 12px;
}

.graph-zoom-range {
  width: 118px;
  accent-color: var(--text-primary);
  cursor: pointer;
}

.graph-tooltip {
  position: absolute;
  z-index: 4;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--text-primary) 18%, transparent);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
}

.graph-tooltip.hidden {
  display: none;
}

.graph-context-menu {
  position: absolute;
  z-index: 5;
  display: grid;
  min-width: 136px;
  gap: 2px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--text-primary) 18%, transparent);
  padding: 5px;
}

.graph-context-menu.hidden {
  display: none;
}

.graph-context-menu button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 0 10px;
}

.graph-context-menu button:hover:not(:disabled) {
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
}

.graph-context-menu button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.graph-context-menu .danger-context-action {
  color: var(--status-danger);
}

.graph-area.graph-only {
  flex: 1;
  height: auto;
  min-height: 0;
}

.graph-area.graph-only #knowledgeGraph {
  height: 100%;
}

.edge {
  stroke: var(--graph-edge);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.edge-requirements {
  stroke: color-mix(in srgb, var(--domain-requirement) 82%, var(--surface-raised));
  stroke-width: 2;
}

.current-user-icon-button span {
  margin: 0;
  color: currentColor;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
}

.edge-risks {
  stroke: color-mix(in srgb, var(--domain-risk) 84%, var(--surface-raised));
  stroke-dasharray: 4 3;
  stroke-width: 2;
}

.node circle {
  stroke: var(--surface-raised);
  stroke-width: 3;
  transition: filter 140ms ease, r 140ms ease, stroke 140ms ease;
}

.node {
  pointer-events: bounding-box;
}

.node text {
  fill: var(--text-primary);
  font-size: 10px;
  font-weight: 560;
  pointer-events: none;
}

.graph-node-label {
  letter-spacing: 0;
}

.node-label-box {
  fill: var(--graph-label-bg);
  stroke: var(--graph-label-border);
  stroke-width: 1;
}

.node-requirement .node-label-box {
  fill: color-mix(in srgb, var(--domain-requirement) 8%, var(--surface-raised));
  stroke: color-mix(in srgb, var(--domain-requirement) 42%, transparent);
}

.node-risk .node-label-box {
  fill: color-mix(in srgb, var(--domain-risk) 7%, var(--surface-raised));
  stroke: color-mix(in srgb, var(--domain-risk) 42%, transparent);
}

.node.compact-label text,
.node.compact-label .node-label-box {
  display: none;
}

.node.clickable {
  cursor: pointer;
}

.node.clickable circle {
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--text-primary) 18%, transparent));
}

.node.draggable {
  cursor: grab;
}

.node.dragging {
  cursor: grabbing;
}

.node.dragging circle {
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--text-primary) 24%, transparent));
  stroke: var(--surface-raised);
}

.details-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 0.9fr);
  grid-template-rows: max-content auto;
  align-content: start;
  gap: 1px;
  flex: 1;
  background: var(--surface-base);
}

.details-grid.hidden {
  display: none;
}

.person-navigation-shell {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  display: grid;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised);
  padding: 16px 18px 14px;
}

.person-navigation-copy {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  align-items: end;
  gap: 8px 24px;
}

.person-navigation-copy > div {
  display: grid;
  gap: 3px;
}

.person-navigation-copy span,
.person-legacy-navigation-copy span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.person-navigation-copy h3,
.person-navigation-copy p {
  margin: 0;
}

.person-navigation-copy h3 {
  font-size: 20px;
  line-height: 1.2;
}

.person-navigation-copy p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.person-primary-navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.person-primary-navigation button {
  position: relative;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  padding: 0 14px;
}

.person-primary-navigation button:hover {
  border-color: var(--border-strong);
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
}

.person-primary-navigation button.active {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.person-primary-navigation button.active::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--action-primary);
  content: "";
}

.person-primary-navigation button:focus-visible,
.person-section-tabs button:focus-visible {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.person-legacy-navigation {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px 18px;
  min-width: 0;
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.person-legacy-navigation[hidden] {
  display: none;
}

.person-legacy-navigation-copy {
  display: grid;
  gap: 2px;
}

.person-legacy-navigation-copy small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.person-section-tabs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.person-section-tabs button {
  flex: 0 0 auto;
  align-self: center;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 14px;
  white-space: nowrap;
}

.person-section-tabs button[hidden] {
  display: none;
}

.person-section-tabs button.active {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.readiness-view {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  background: var(--surface-base);
}

.person-panel-hidden {
  display: none !important;
}

.readiness-panel-hidden {
  display: none !important;
}

.person-readiness-overview {
  grid-column: 1 / -1;
  min-width: 0;
  background: var(--surface-raised);
  padding: 22px;
}

.person-readiness-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.person-readiness-overview-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.person-readiness-overview-header span:first-child {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.person-readiness-overview-header h3,
.person-readiness-overview-header p,
.person-readiness-roles-heading h4,
.person-readiness-roles-heading p {
  margin: 0;
}

.person-readiness-overview-header h3 {
  font-size: 20px;
  line-height: 1.25;
}

.person-readiness-overview-header p {
  max-width: 780px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.person-readiness-load-state {
  flex: 0 0 auto;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-interactive);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.person-readiness-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
  border-block: 1px solid var(--border-default);
}

.person-readiness-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
}

.person-readiness-summary > div + div {
  border-left: 1px solid var(--border-default);
}

.person-readiness-summary span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.person-readiness-summary strong {
  font-size: 24px;
  line-height: 1;
}

.person-readiness-attention {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-top: 14px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-interactive);
  padding: 10px 12px;
}

.person-readiness-attention strong {
  flex: 0 0 auto;
  font-size: 13px;
}

.person-readiness-attention span {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.person-readiness-attention.critical {
  border-left-color: var(--status-danger);
}

.person-readiness-attention.warning {
  border-left-color: var(--status-warning);
}

.person-readiness-attention.success {
  border-left-color: var(--status-success);
}

.person-readiness-roles {
  margin-top: 22px;
}

.person-readiness-roles-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
}

.person-readiness-roles-heading h4 {
  font-size: 16px;
}

.person-readiness-roles-heading p,
.person-readiness-roles-heading > span {
  color: var(--text-muted);
  font-size: 12px;
}

.person-readiness-role-list {
  border-top: 1px solid var(--border-strong);
}

.person-readiness-role {
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised);
}

.person-readiness-role-summary {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 28px minmax(0, 1.5fr) minmax(110px, 0.45fr) minmax(118px, 0.5fr) minmax(0, 0.9fr) 22px;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  padding: 12px 8px;
  text-align: left;
  white-space: normal;
}

.person-readiness-role-summary:hover:not(:disabled) {
  background: var(--surface-interactive-hover);
}

.person-readiness-role-summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.person-readiness-role-summary:disabled {
  cursor: default;
  opacity: 1;
}

.person-readiness-role-order {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
}

.person-readiness-role-identity,
.person-readiness-role-status,
.person-readiness-role-problems {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.person-readiness-role-identity > strong {
  display: block;
  max-width: 100%;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.person-readiness-role-identity small,
.person-readiness-role-problems small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.person-readiness-role-status b {
  display: block;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--surface-interactive);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 4px 7px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.person-readiness-role-status b.ready {
  color: var(--status-success);
}

.person-readiness-role-status b.not-ready,
.person-readiness-role-status b.at-risk {
  color: var(--status-danger);
}

.person-readiness-role-status b.partially-ready,
.person-readiness-role-status b.partial,
.person-readiness-role-status b.not-assessed {
  color: var(--status-warning);
}

.person-readiness-role-status > strong,
.person-readiness-role-problems > strong {
  display: block;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.person-readiness-role-primary-reason {
  display: block;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.person-readiness-role-disclosure {
  color: var(--text-muted);
  font-size: 20px;
  text-align: center;
  transition: transform 140ms ease;
}

.person-readiness-role.is-expanded {
  background: var(--surface-selected);
}

.person-readiness-role.is-expanded .person-readiness-role-primary-reason {
  display: none;
}

.person-readiness-role.is-expanded .person-readiness-role-disclosure {
  transform: rotate(180deg);
}

.person-readiness-role-detail {
  border-top: 1px solid var(--border-default);
  padding: 14px 16px 16px 48px;
}

.person-readiness-role-detail[hidden] {
  display: none;
}

.readiness-role-attention-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-interactive);
  padding: 9px 11px;
  white-space: normal;
}

.readiness-role-attention-line.critical {
  border-left-color: var(--status-danger);
}

.readiness-role-attention-line.warning {
  border-left-color: var(--status-warning);
}

.readiness-role-attention-line.success {
  border-left-color: var(--status-success);
}

.readiness-role-attention-line span {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.readiness-role-attention-line strong {
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.readiness-role-cause-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.readiness-role-cause-grid > section {
  min-width: 0;
  padding: 0 14px;
}

.readiness-role-cause-grid > section:first-child {
  padding-left: 0;
}

.readiness-role-cause-grid > section + section {
  border-left: 1px solid var(--border-default);
}

.readiness-role-cause-grid h6 {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.readiness-role-cause-grid ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.readiness-role-cause-grid li {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.readiness-role-cause-grid li strong {
  display: block;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.readiness-role-cause-grid li span,
.readiness-role-cause-grid small,
.readiness-role-cause-empty {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.readiness-role-cause-empty {
  margin: 0;
}

.readiness-role-drilldown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.readiness-role-drilldown > span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.readiness-role-drilldown > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.readiness-role-drilldown button,
.person-readiness-role-error button {
  min-height: 36px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--surface-interactive);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.readiness-role-drilldown button:hover,
.person-readiness-role-error button:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive-hover);
}

.readiness-role-drilldown button:focus-visible,
.person-readiness-role-error button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.person-readiness-role-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-default);
  color: var(--status-danger);
  padding: 10px 12px 10px 48px;
}

.readiness-graph-back {
  margin-left: auto;
}

.role-passport {
  grid-column: 1 / -1;
  grid-row: 2;
}

.assessment-panel,
.gap-panel {
  grid-row: 3;
}

.assessment-panel {
  grid-column: 1 / -1;
}

.gap-panel {
  grid-column: 1 / -1;
  grid-row: 4;
}

.role-passport,
.assessment-panel,
.gap-panel,
.readiness-summary-panel,
.readiness-deficits-panel,
.readiness-confirmations-panel,
.readiness-employee-risk-panel,
.readiness-interventions-panel,
.readiness-development-panel,
.readiness-decisions-panel,
.readiness-audit-panel {
  min-width: 0;
  background: var(--surface-raised);
  padding: 22px;
}

.readiness-summary-panel,
.readiness-deficits-panel,
.readiness-confirmations-panel,
.readiness-employee-risk-panel,
.readiness-decisions-panel,
.readiness-audit-panel {
  grid-column: 1 / -1;
}

.readiness-interventions-panel {
  grid-column: 1 / 7;
}

.readiness-development-panel {
  grid-column: 7 / -1;
}


.readiness-employee-risk-panel > .section-title > div {
  display: grid;
  gap: 3px;
}

.readiness-employee-risk-panel > .section-title p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.employee-risk-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.employee-risk-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--surface-interactive);
  padding: 10px 11px;
}

.employee-risk-summary span {
  color: var(--text-muted);
  font-size: 11px;
}

.employee-risk-summary strong {
  font-size: 14px;
}

.employee-risk-list {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.employee-risk-task,
.employee-risk-knowledge {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.employee-risk-task + .employee-risk-task {
  border-top: 1px solid var(--border-default);
  padding-top: 18px;
}

.employee-risk-task-title,
.employee-risk-knowledge-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.employee-risk-task-title span,
.employee-risk-knowledge-title span {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.employee-risk-task-title strong {
  font-size: 15px;
}

.employee-risk-knowledge {
  border-left: 2px solid var(--border-strong);
  padding-left: 12px;
}

.employee-risk-knowledge-title strong {
  font-size: 13px;
}

.employee-risk-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

.employee-risk-item {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-interactive);
  padding: 11px 12px;
}

.employee-risk-item.high,
.employee-risk-item.critical {
  border-left-color: var(--border-strong);
}

.employee-risk-item.low {
  border-left-color: var(--border-strong);
}

.employee-risk-item-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.employee-risk-item-heading button {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
}

.employee-risk-item-heading button:hover {
  color: var(--text-primary);
}

.employee-risk-level {
  color: var(--status-warning);
  white-space: nowrap;
}

.employee-risk-level.high,
.employee-risk-level.critical {
  color: var(--status-danger);
}

.employee-risk-level.low {
  color: var(--status-success);
}

.employee-risk-item p {
  margin: 0;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.employee-risk-context,
.employee-risk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--text-muted);
  font-size: 11px;
}

.employee-risk-context strong {
  color: var(--text-primary);
}

.role-passport {
  display: grid;
  gap: 0;
  padding-block: 14px;
}

.role-passport > .section-title > div {
  min-width: 0;
}

.role-passport > .section-title span {
  display: block;
  margin-top: 3px;
}

.role-passport:not(.expanded) > :is(p, .fact-grid) {
  display: none;
}

.role-passport.expanded {
  gap: 12px;
}

.role-passport.expanded .fact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.role-passport p {
  margin-top: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.fact-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.fact {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 12px;
}

.fact span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 12px;
}

.fact strong {
  font-size: 14px;
  line-height: 1.35;
}

.requirements,
.gaps,
.readiness-gap-list,
.confirmation-list,
.person-intervention-list,
.person-decision-list,
.development-path-list,
.audit-event-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.audit-event {
  min-width: 0;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 12px;
}

.audit-event-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.audit-event-title strong {
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.audit-event-title > span,
.audit-event-meta {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.audit-event-title > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.audit-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 7px;
}

.technical-details {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.technical-details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
}

.technical-details code {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.technical-details dl {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
}

.technical-details dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
}

.technical-details dt,
.technical-details dd {
  min-width: 0;
  margin: 0;
}

.technical-details dd code {
  margin-top: 0;
}

.admin-audit-workspace {
  min-width: 0;
}

.admin-audit-workspace .admin-section-header > div {
  min-width: 0;
}

.admin-audit-workspace .admin-section-header small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.readiness-summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr);
  gap: 12px;
  margin-top: 12px;
}

.readiness-score-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 13px 15px;
}

.readiness-score-card span,
.readiness-score-card small,
.readiness-facts span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.readiness-score-card strong {
  color: var(--text-primary);
  font-size: 34px;
  line-height: 1;
}

.readiness-score-card p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.readiness-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.readiness-facts div {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 10px 11px;
}

.readiness-facts strong {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.readiness-gap,
.confirmation {
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 13px;
  min-width: 0;
}

.readiness-gap.medium {
  border-left-color: var(--border-strong);
}

.confirmation {
  border-left-color: var(--border-strong);
  background: var(--surface-interactive);
}

.readiness-gap-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.readiness-gap-title strong,
.confirmation strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.readiness-gap-title span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--status-danger);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  white-space: nowrap;
}

.readiness-gap.medium .readiness-gap-title span {
  color: var(--status-warning);
}

.readiness-gap-meta {
  margin-top: 8px;
}

.readiness-gap-meta span {
  display: inline-block;
  border-radius: 999px;
  background: var(--surface-interactive-hover);
  color: var(--status-danger);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  padding: 4px 8px;
}

.readiness-gap.medium .readiness-gap-meta span {
  background: var(--surface-interactive-hover);
  color: var(--status-warning);
}

.readiness-gap-findings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.readiness-gap-findings span {
  max-width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-interactive);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: 5px 7px;
}

.readiness-chain {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.readiness-chain div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
}

.readiness-chain dt {
  color: var(--text-muted);
  font-size: 12px;
}

.readiness-chain dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.confirmation p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.gap-action-button {
  width: 100%;
  min-height: 36px;
  margin-top: 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.gap-action-button:hover {
  background: var(--surface-interactive-hover);
}

.person-intervention {
  min-width: 0;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 13px;
}

.person-intervention-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.person-intervention-title strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.person-intervention-title span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface-selected);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 750;
  padding: 4px 8px;
}

.person-intervention p {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.development-path-body {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.development-path-list {
  margin-top: 0;
}

.development-path-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 11px 13px;
}

.development-path-item > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-selected);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
}

.development-path-item div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.development-path-item strong,
.development-path-item small {
  overflow-wrap: anywhere;
}

.development-path-item small,
.development-path-item b {
  color: var(--text-muted);
  font-size: 12px;
}

.development-path-action {
  justify-self: start;
  min-height: 38px;
}

.person-decision {
  min-width: 0;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-focus);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 13px;
}

.person-decision-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.person-decision-title strong,
.person-decision p {
  overflow-wrap: anywhere;
}

.person-decision-title span {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
}

.person-decision p {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.assessment-requirement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-interactive);
  padding: 11px 12px;
}

.assessment-panel > .section-title {
  align-items: flex-start;
  gap: 12px;
}

.assessment-panel > .section-title > div:first-child {
  min-width: 0;
}

.assessment-source-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.assessment-source-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, auto) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  margin: 16px 0 8px;
}

.assessment-source-switch {
  grid-template-columns: repeat(2, minmax(126px, 1fr));
  align-self: start;
}

.assessment-source-switch button {
  min-height: 38px;
  white-space: normal;
}

.assessment-source-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  border-left: 1px solid var(--border-default);
}

.assessment-source-meta div {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 12px;
}

.assessment-source-meta span,
.assessment-evidence-preview span,
.assessment-detail-source span {
  color: var(--text-muted);
  font-size: 11px;
}

.assessment-source-meta strong,
.assessment-evidence-preview p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.assessment-source-meta strong {
  font-size: 12px;
}

.assessment-save-state {
  min-height: 20px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.assessment-save-state.error {
  color: var(--status-danger);
  font-weight: 700;
}

.assessment-requirement-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.assessment-requirement-copy > strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.assessment-evidence-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.assessment-evidence-preview p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.assessment-requirement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.assessment-requirement-meta span {
  white-space: nowrap;
}

.assessment-requirement-meta :is(.has-risk, .has-evidence) {
  color: var(--text-primary);
  font-weight: 750;
}

.assessment-requirement-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assessment-score-compact {
  grid-template-columns: repeat(4, 32px);
  gap: 4px;
}

.assessment-score-compact button {
  width: 32px;
  min-height: 32px;
  padding: 0;
}

.assessment-detail-button {
  min-height: 32px;
  padding-inline: 10px;
}

.assessment-detail-source {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 10px;
}

.assessment-detail-source strong,
.assessment-detail-source span {
  overflow-wrap: anywhere;
}

.assessment-gap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-interactive);
  padding: 10px 11px;
}

.assessment-gap-row.medium {
  border-left-color: var(--border-strong);
}

.assessment-gap-row > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.assessment-gap-row strong {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.assessment-gap-row span {
  color: var(--text-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.assessment-gap-row b {
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--status-danger);
  font-size: 11px;
  white-space: nowrap;
}

.gap-panel > .section-title > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gap-panel #openReadinessGapsButton {
  min-height: 30px;
  padding-inline: 9px;
}

.requirement {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 13px;
}

.requirement-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.requirement strong {
  font-size: 14px;
  line-height: 1.35;
}

.critical {
  color: var(--status-danger);
  font-size: 12px;
  white-space: nowrap;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.segmented button {
  min-height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}

.segmented button.active {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
  font-weight: 700;
}

.risk-evidence {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 12px;
}

.risk-evidence textarea {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 9px 10px;
  resize: vertical;
}

.risk-evidence textarea:focus {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
}

.gap {
  border-left: 4px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 13px;
}

.gap.medium {
  border-color: var(--border-strong);
}

.gap.resolved {
  border-color: var(--border-strong);
  background: var(--surface-selected);
}

.gap strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.gap p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.empty-state {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--text-muted);
  padding: 16px;
  line-height: 1.45;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--surface-overlay);
  padding: 20px;
  z-index: 10;
}

.modal-backdrop.hidden {
  display: none;
}

#rolePicker,
#roleCreateModal,
#knowledgeModal,
#requirementEditorModal,
#riskEditorModal,
#riskModal,
#assessmentRequirementModal,
#newRoleModal,
#interventionModal,
#decisionModal {
  z-index: 12;
}

#selfPasswordChangeModal,
#selfSecurityModal,
#adminPasswordResetModal,
#adminMfaResetModal {
  z-index: 16;
}

.password-action-modal {
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: calc(100dvh - 24px);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text-primary) 18%, transparent);
  padding: 20px;
  overflow: hidden;
}

.password-action-modal > .section-title {
  flex: 0 0 auto;
  padding-bottom: 12px;
}

.password-action-modal .section-title > div {
  min-width: 0;
}

.password-action-context {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.password-action-form {
  display: grid;
  min-width: 0;
  gap: 12px;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}

.password-action-form fieldset {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.password-session-warning,
.password-external-notice {
  margin: 0;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-interactive);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

.password-external-notice {
  border-left-color: var(--border-strong);
}

.mfa-security-modal {
  width: min(540px, 100%);
}

.mfa-security-modal > .mfa-flow-body {
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}

.mfa-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mfa-switch-row > div {
  min-width: 0;
}

.mfa-switch-row strong,
.mfa-switch-row span {
  display: block;
  overflow-wrap: anywhere;
}

.mfa-switch-row span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.mfa-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
}

.mfa-switch input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.mfa-switch i {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-interactive);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.mfa-switch i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-raised);
  content: "";
  transition: translate 0.16s ease, background 0.16s ease;
}

.mfa-switch input:checked + i {
  border-color: var(--border-focus);
  background: var(--surface-selected);
}

.mfa-switch input:checked + i::after {
  background: var(--action-primary);
  translate: 20px 0;
}

.mfa-switch input:focus-visible + i {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.mfa-switch input:disabled + i {
  cursor: not-allowed;
  opacity: 0.65;
}

.mfa-switch input:disabled {
  cursor: not-allowed;
}

.mfa-status-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border-default);
}

.mfa-status-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-default);
  padding: 10px 0;
}

.mfa-status-facts dt,
.mfa-status-facts dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mfa-status-facts dt {
  color: var(--text-muted);
}

.mfa-status-facts dd {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
}

.role-picker,
.requirement-modal,
.role-create-modal,
.knowledge-modal,
.requirement-editor-modal,
.risk-entity-modal,
.assessment-requirement-modal,
.intervention-modal,
.decision-modal {
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: calc(100dvh - 24px);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text-primary) 18%, transparent);
  padding: 20px;
  overflow: hidden;
}

.role-picker p,
.requirement-modal p {
  margin: 10px 0 16px;
  color: var(--text-muted);
  line-height: 1.45;
}

.requirement-modal {
  width: min(1080px, calc(100vw - 32px));
  --modal-accent: var(--domain-requirement);
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--border-strong);
}

.risk-entity-modal {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  --modal-accent: var(--domain-risk);
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--border-strong);
}

.risk-entity-modal > .section-title {
  flex: 0 0 auto;
}

.risk-modal-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: visible;
  padding: 12px 4px 2px 0;
}

.role-create-modal {
  display: flex;
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  --modal-accent: var(--action-primary);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text-primary) 20%, transparent);
  padding: 20px;
}

.knowledge-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  --modal-accent: var(--domain-knowledge);
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--border-strong);
}

.requirement-editor-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  --modal-accent: var(--domain-requirement);
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--border-strong);
}

.requirement-editor-modal.risk-editor-modal {
  --modal-accent: var(--domain-risk);
  border-color: var(--border-strong);
  border-top-color: var(--border-strong);
}

.assessment-requirement-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  --modal-accent: var(--domain-requirement);
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--border-strong);
}

.new-role-modal {
  display: flex;
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  --modal-accent: var(--domain-role);
  flex-direction: column;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text-primary) 20%, transparent);
  padding: 20px;
}

.new-role-modal > .section-title {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised);
  padding-bottom: 12px;
}

.new-role-modal > .section-title > div {
  display: grid;
  gap: 3px;
}

.new-role-modal > .section-title p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.new-role-modal-body {
  min-height: 0;
  padding-top: 14px;
}

.new-role-form {
  display: grid;
  gap: 14px;
}

.new-role-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.new-role-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.new-role-fields :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  padding: 9px 10px;
}

.new-role-fields :is(input, select) {
  min-height: 40px;
}

.new-role-fields textarea {
  resize: vertical;
}

.new-role-description-field {
  grid-column: 1 / -1;
}

.new-role-target {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.new-role-target legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 12px;
}

.new-role-target-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  cursor: pointer;
  padding: 10px 11px;
}

.new-role-target-option:has(input:checked) {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--domain-role);
}

.new-role-target-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.new-role-target-option strong {
  font-size: 13px;
}

.new-role-target-option small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.assessment-requirement-modal-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding-top: 14px;
}

.assessment-detail-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--surface-base);
  overflow: hidden;
}

.assessment-detail-context div {
  display: grid;
  gap: 4px;
  min-width: 0;
  background: var(--surface-interactive);
  padding: 10px 11px;
}

.assessment-detail-context span,
.assessment-detail-score > span {
  color: var(--text-muted);
  font-size: 12px;
}

.assessment-detail-context strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.assessment-detail-risks {
  display: grid;
  gap: 7px;
  margin: 0;
}

.assessment-detail-risks div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-interactive);
  padding: 9px 10px;
}

.assessment-detail-risks :is(dt, dd) {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.assessment-detail-risks dt {
  color: var(--text-muted);
}

.assessment-detail-score {
  display: grid;
  gap: 7px;
}

.modal-window-resizable {
  position: relative;
  min-width: min(360px, calc(100vw - 24px));
  min-height: 220px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  border-top: 5px solid var(--border-strong);
  box-shadow:
    0 20px 54px color-mix(in srgb, var(--text-primary) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--modal-accent, var(--action-primary)) 38%, transparent);
  overflow: auto;
  resize: both;
}

.modal-window-resizable::after {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    color-mix(in srgb, var(--modal-accent, var(--action-primary)) 84%, transparent) 3px 5px
  );
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
  pointer-events: none;
}

.modal-window-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.modal-window-handle :is(button, a, input, select, textarea) {
  cursor: pointer;
}

.modal-window-resizable.is-dragging,
.modal-window-resizable.is-dragging .modal-window-handle {
  cursor: grabbing;
}

.requirement-editor-modal > .section-title {
  flex: 0 0 auto;
  align-items: center;
  padding-bottom: 12px;
}

.requirement-editor-modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding: 12px 0 0;
}

.requirement-editor-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.requirement-form-scroll {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding-right: 3px;
}

.requirement-editor-form > .modal-actions {
  position: static;
  flex: 0 0 auto;
  margin-top: 10px;
  padding-bottom: 1px;
}

.requirement-form-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  min-width: 0;
  min-height: max-content;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-base);
  overflow: hidden;
}

.requirement-context-item {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  background: var(--surface-interactive);
  padding: 9px 10px;
}

.requirement-context-item span,
.requirement-form-fields label > span,
.admin-requirement-role-filter > span {
  color: var(--text-muted);
  font-size: 12px;
}

.requirement-context-item strong {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.requirement-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.requirement-form-fields label,
.admin-requirement-role-filter {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.requirement-wide-field {
  grid-column: 1 / -1;
}

.requirement-form-fields :is(input, textarea, select),
.admin-requirement-role-filter select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 10px;
}

.requirement-form-fields textarea {
  min-height: 78px;
  resize: vertical;
}

.requirement-form-fields :is(input, textarea, select):focus,
.admin-requirement-role-filter select:focus {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
}

.requirement-risk-context {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border-default);
  padding-top: 10px;
}

.requirement-risk-context-header,
.requirement-risk-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.requirement-risk-context-row {
  border-left: 3px solid var(--border-strong);
  background: var(--surface-interactive);
  padding: 7px 9px;
}

.requirement-risk-context-row :is(strong, span) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.requirement-risk-context-row span {
  color: var(--text-muted);
  font-size: 12px;
}

.knowledge-modal > .section-title {
  flex: 0 0 auto;
  align-items: center;
  padding-bottom: 12px;
}

.knowledge-modal-body {
  min-height: 0;
  overflow: visible;
  padding: 12px 3px 0 0;
}

.knowledge-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.knowledge-form-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-base);
  overflow: hidden;
}

.knowledge-context-item {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  background: var(--surface-interactive);
  padding: 9px 10px;
}

.knowledge-context-item span,
.knowledge-form-fields label > span,
.admin-knowledge-role-filter > span {
  color: var(--text-muted);
  font-size: 12px;
}

.knowledge-context-item strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.knowledge-form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.knowledge-form-fields label,
.admin-knowledge-role-filter {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.knowledge-description-field {
  grid-column: 1 / -1;
}

.knowledge-form-fields :is(input, textarea),
.admin-knowledge-role-filter select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 10px;
}

.knowledge-form-fields textarea {
  min-height: 82px;
  resize: vertical;
}

.knowledge-form-fields :is(input, textarea):focus,
.admin-knowledge-role-filter select:focus {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
}

.role-create-modal > .section-title {
  flex: 0 0 auto;
  align-items: flex-start;
  padding-bottom: 12px;
}

.role-create-modal-context {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.role-create-modal-body {
  min-height: 0;
  overflow: visible;
  padding: 16px 4px 0 0;
}

.role-create-modal-body :is(.admin-role-task-form, .admin-role-requirement-form, .admin-role-risk-form) {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.role-create-modal-body :is(.admin-role-task-form, .admin-role-requirement-form, .admin-role-risk-form) > h2 {
  display: none;
}

.intervention-modal,
.decision-modal {
  width: min(520px, 100%);
}

.role-picker > .section-title,
.requirement-modal > .section-title,
.role-create-modal > .section-title,
.knowledge-modal > .section-title,
.requirement-editor-modal > .section-title,
.assessment-requirement-modal > .section-title,
.intervention-modal > .section-title,
.decision-modal > .section-title {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  background: var(--surface-raised);
  padding-bottom: 12px;
}

.requirement-modal-body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  margin-top: 16px;
  min-width: 0;
  overflow: visible;
  padding-right: 4px;
}

.requirement-modal-body > * {
  min-width: 0;
  max-width: 100%;
}

.requirement-modal-body > :is(.knowledge-requirements-block, .requirement-risks-section, .modal-actions),
.risk-modal-body > :is(.requirement-risks-section, .modal-actions) {
  grid-column: 1 / -1;
}

.intervention-modal-body,
.decision-modal-body {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  overflow: auto;
  padding-right: 4px;
}

.decision-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.decision-context div {
  display: grid;
  min-width: 0;
  gap: 3px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 10px;
}

.decision-context span {
  color: var(--text-muted);
  font-size: 12px;
}

.decision-context strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.admin-console-screen {
  grid-column: 1 / -1;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--surface-base);
}

.admin-console-screen.hidden {
  display: none;
}

.admin-console {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface-base);
}

.admin-console-header {
  z-index: 5;
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised);
  padding: 10px 18px;
}

.admin-console-user {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-console-user span {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.admin-console-brand {
  min-width: 0;
}

.admin-console-brand strong {
  display: block;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.2;
}

.admin-console-global-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-console-user {
  max-width: 220px;
  padding-right: 4px;
  text-align: right;
}

.admin-console-current-user-menu {
  flex: 0 1 250px;
}

.admin-console-current-user-menu .current-user-actions-menu {
  width: min(280px, calc(100vw - 32px));
}

.admin-console-user-button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  padding: 5px 8px;
}

.admin-console-user-button:hover,
.admin-console-user-button:focus-visible {
  border-color: var(--border-default);
  background: var(--surface-interactive-hover);
}

.admin-console-user-button[aria-expanded="true"] {
  border-color: var(--border-focus);
  background: var(--surface-selected);
}

.admin-console-user-button:focus-visible {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-console-user-menu-icon {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 700;
}

.admin-console-user :is(strong, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-theme-choice {
  flex: 0 0 auto;
}

.admin-workspace-exit,
.admin-workspace-logout {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.admin-workspace-exit > span {
  font-size: 17px;
  line-height: 1;
}

.intervention-gap-context {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 12px;
}

.intervention-gap-context span,
.intervention-gap-context small {
  color: var(--text-muted);
  font-size: 12px;
}

.intervention-gap-context strong,
.intervention-gap-context small {
  overflow-wrap: anywhere;
}

.self-assessment-modal {
  display: flex;
  width: min(880px, 100%);
  max-height: min(84vh, 820px);
  flex-direction: column;
  gap: 16px;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text-primary) 18%, transparent);
  padding: 20px;
  overflow: hidden;
}

.self-assessment-body {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

.self-assessment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.self-assessment-summary div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 11px;
}

.self-assessment-summary span,
.self-assessment-completion span,
.self-assessment-risk-meta small {
  color: var(--text-muted);
  font-size: 12px;
}

.self-assessment-summary strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.self-assessment-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-interactive);
}

.self-assessment-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--action-primary);
}

.self-assessment-trust-note,
.self-assessment-progress-hint {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

.self-assessment-progress-hint {
  border-color: var(--border-default);
  background: var(--surface-interactive);
  color: var(--text-muted);
  font-weight: 600;
}

.self-assessment-completion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.self-assessment-completion span {
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 6px 10px;
}

.self-assessment-risk-list {
  display: grid;
  gap: 10px;
}

.self-assessment-risk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
  gap: 14px;
  align-items: start;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 13px;
}

.self-assessment-risk strong,
.self-assessment-risk p,
.self-assessment-risk-meta small {
  overflow-wrap: anywhere;
}

.self-assessment-risk p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.self-assessment-risk-meta {
  display: grid;
  gap: 5px;
  text-align: right;
}

.self-assessment-risk-meta span {
  color: var(--text-primary);
  font-weight: 800;
}

.self-assessment-risk-content {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.self-assessment-risk-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.self-assessment-risk-title span {
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-selected);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.self-assessment-risk-chain {
  display: grid;
  gap: 6px;
  margin: 0;
}

.self-assessment-risk-chain div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
}

.self-assessment-risk-chain dt,
.self-assessment-risk-chain dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.self-assessment-risk-chain dt {
  color: var(--text-muted);
  font-weight: 800;
}

.self-assessment-risk-chain dd {
  color: var(--text-primary);
}

.self-assessment-score-control {
  width: 100%;
}

.self-assessment-evidence {
  display: grid;
  gap: 6px;
}

.self-assessment-evidence textarea {
  min-height: 92px;
  resize: vertical;
  overflow-wrap: anywhere;
}

.self-assessment-risk-error {
  color: var(--status-danger);
  min-height: 16px;
  overflow-wrap: anywhere;
}

.self-assessment-gaps,
.self-assessment-gap-list {
  display: grid;
  gap: 10px;
}

.self-assessment-gap {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 11px;
}

.self-assessment-gap-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.self-assessment-gap-title span {
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-interactive-hover);
  color: var(--status-danger);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.self-assessment-gap strong,
.self-assessment-gap p,
.self-assessment-gap dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-console-body {
  display: grid;
  height: 100%;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-base);
  padding: 0;
}

.admin-user-list,
.admin-user-form,
.admin-user-section,
.admin-person-section,
.admin-person-list,
.admin-person-form,
.admin-user-person-section,
.admin-role-assignment-section,
.admin-link-list,
.admin-link-form,
.admin-console-side,
.admin-organization-section,
.admin-organization-persons,
.admin-organization-form,
.admin-role-catalog,
.admin-role-profile,
.admin-role-creation-slot,
.admin-role-task-list,
.admin-role-requirement-list,
.admin-role-risk-list,
.admin-org-reference-grid,
.admin-organization-person-list,
.admin-role-list,
.admin-reference-list,
.admin-console-main {
  display: grid;
  align-content: start;
  gap: 10px;
}

.admin-console-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-action-menu {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--border-default);
  background: var(--surface-raised);
  padding: 14px 10px 10px;
}

.admin-navigation-desktop {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.admin-navigation-compact {
  display: none;
}

.admin-area-item {
  width: 100%;
  min-height: 54px;
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  padding: 8px 10px;
  text-align: left;
}

.admin-area-item strong,
.admin-area-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-area-item strong {
  font-size: 13px;
}

.admin-area-item span {
  color: var(--text-muted);
  font-size: 11px;
}

.admin-knowledge-workspace,
.admin-knowledge-task-list,
.admin-knowledge-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.admin-knowledge-role-filter {
  max-width: 420px;
}

.admin-knowledge-task {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.knowledge-requirements-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.knowledge-requirements-block {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.knowledge-requirements-header h4 {
  margin: 0;
  font-size: 14px;
}

.knowledge-requirements-header span {
  min-width: 24px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 3px 6px;
  text-align: center;
}

.knowledge-requirements-list {
  display: grid;
  gap: 6px;
}

.knowledge-requirement-row {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
  border-left: 3px solid var(--border-strong);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: var(--surface-interactive);
  color: var(--text-primary);
  font: inherit;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.knowledge-requirement-row:hover,
.knowledge-requirement-row:focus-visible {
  background: var(--surface-interactive-hover);
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.knowledge-requirement-row strong,
.knowledge-requirement-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-requirement-workspace,
.admin-requirement-task-list,
.admin-requirement-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-requirement-role-filter {
  max-width: 420px;
}

.admin-requirement-task {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.knowledge-requirement-row strong {
  font-size: 13px;
}

.knowledge-requirement-row span {
  color: var(--text-muted);
  font-size: 12px;
}

.admin-area-item:hover {
  border-color: transparent;
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
}

.admin-area-item:focus-visible {
  border-color: var(--border-focus);
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-area-item.active {
  border-left-color: var(--border-focus);
  border-left-width: 3px;
  background: var(--surface-selected);
  color: var(--text-primary);
  font-weight: 700;
  padding-left: 8px;
}

.admin-overview {
  display: grid;
  gap: 12px;
}

.admin-console-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  overscroll-behavior: contain;
}

.admin-workspace-commandbar {
  z-index: 3;
  display: grid;
  min-width: 0;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised);
}

.admin-workspace-commandbar-main {
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px 8px;
}

.admin-workspace-heading {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-workspace-heading > small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workspace-heading h1 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workspace-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.admin-workspace-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.admin-workspace-actions button > span {
  font-size: 17px;
  line-height: 1;
}

.admin-section-tabs {
  display: flex;
  min-width: 0;
  gap: 2px;
  background: var(--surface-raised);
  padding: 0 16px;
}

.admin-section-tab {
  min-height: 38px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 7px 10px 6px;
  white-space: nowrap;
}

.admin-section-tab:hover {
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
}

.admin-section-tab:focus-visible {
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-section-tab.active {
  border-bottom-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.admin-workspace-content {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-content: start;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--surface-base);
  padding: 16px 18px 22px;
}

.admin-workspace-content > :is(
  .admin-user-form,
  .admin-person-form,
  .admin-role-form,
  .admin-link-form,
  .admin-organization-form,
  .admin-graph-workspace
) {
  border: 0;
  background: transparent;
  padding: 0;
}

.admin-workspace-content > :is(
  .admin-user-section,
  .admin-person-section,
  .admin-user-person-section,
  .admin-role-assignment-section,
  .admin-organization-section
) {
  border-top: 0;
  padding-top: 0;
}

.admin-workspace-content > :is(
  .admin-user-section,
  .admin-person-section,
  .admin-user-person-section,
  .admin-role-assignment-section,
  .admin-role-profile,
  .admin-audit-workspace,
  .admin-knowledge-workspace,
  .admin-requirement-workspace,
  .admin-risk-workspace
) > .admin-section-header:first-child,
.admin-workspace-content > :is(
  .admin-user-form,
  .admin-person-form,
  .admin-role-form,
  .admin-link-form,
  .admin-organization-form
) > h2:first-child {
  display: none;
}

.admin-console-main {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 901px) {
  .admin-console-main {
    position: sticky;
    top: 0;
    align-self: start;
  }
}

.admin-empty-workspace,
.admin-graph-workspace {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 14px;
}

.admin-empty-workspace span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.organization-structure-workspace { display: grid; min-width: 0; gap: 12px; }
.organization-structure-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 160px; gap: 10px; align-items: end; border-bottom: 1px solid var(--border-default); padding-bottom: 12px; }
.organization-structure-actions { display: flex; min-width: 0; justify-content: flex-end; }
.organization-structure-actions button { max-width: 100%; white-space: normal; }
.admin-workspace-content .organization-structure-toolbar > div:first-child { display: none; }
.organization-structure-toolbar > div,
.organization-structure-toolbar label,
.organization-structure-form label { display: grid; min-width: 0; gap: 5px; }
.organization-structure-toolbar h2,
.organization-unit-card h2,
.organization-person-context h2,
.organization-structure-form h2 { margin: 0; overflow-wrap: anywhere; font-size: 15px; }
.organization-structure-toolbar span,
.organization-structure-toolbar label,
.organization-structure-form label,
.organization-unit-card small,
.organization-person-context small { color: var(--text-muted); font-size: 12px; }
.organization-structure-toolbar :is(select, input),
.organization-structure-form :is(input, select, textarea) { width: 100%; min-width: 0; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-raised); color: var(--text-primary); font: inherit; padding: 9px 10px; }
.organization-structure-form textarea { resize: vertical; }
.organization-structure-grid { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 12px; min-width: 0; align-items: start; }
.organization-tree-panel,
.organization-unit-panel { min-width: 0; }
.organization-tree-panel { display: grid; gap: 10px; }
.organization-unit-panel,
.admin-position-detail-panel { border-left: 1px solid var(--border-default); padding-left: 12px; }
.organization-panel-heading,
.organization-member-toolbar,
.organization-archive-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.organization-member-toolbar > .admin-user-actions { flex-wrap: wrap; justify-content: flex-end; }
.organization-position-catalog-action { width: 100%; white-space: normal; }
.organization-tree,
.organization-tree ul { display: grid; gap: 3px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.organization-unit-card,
.organization-person-context,
.organization-structure-form { display: grid; min-width: 0; gap: 11px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-raised); padding: 12px; }
.organization-unit-card > header,
.organization-structure-form > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.organization-unit-card > header > div:first-child { min-width: 0; }
.organization-person-context > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.organization-person-context > header > div { min-width: 0; }
.organization-unit-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.organization-unit-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.organization-unit-facts span,
.organization-readonly-context span { display: grid; min-width: 0; gap: 3px; border-left: 2px solid var(--border-strong); background: var(--surface-interactive); padding: 8px 9px; }
.organization-unit-facts strong,
.organization-readonly-context strong { overflow-wrap: anywhere; font-size: 13px; }
.organization-unit-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border-default); }
.organization-unit-tabs button { min-width: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 12px; overflow-wrap: anywhere; padding: 9px 5px; }
.organization-unit-tabs button:hover,
.organization-unit-tabs button:focus-visible { background: var(--surface-interactive-hover); color: var(--text-primary); }
.organization-unit-tabs button.active { border-bottom-color: var(--border-focus); background: var(--surface-selected); color: var(--text-primary); font-weight: 700; }
.organization-member-list,
.organization-archive-list { display: grid; gap: 7px; }
.organization-archive-list article { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--border-default); border-radius: 7px; background: var(--surface-interactive); padding: 9px; }
.organization-archive-list article :is(strong, span, small) { display: block; min-width: 0; overflow-wrap: anywhere; }
.organization-archive-list article span,
.organization-archive-list article small { color: var(--text-muted); font-size: 12px; }
.organization-person-context dl { display: grid; gap: 1px; margin: 0; }
.organization-person-context dl div { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: 8px; border-bottom: 1px solid var(--border-default); padding: 7px 0; }
.organization-person-context :is(dt, dd) { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.organization-person-context dt { color: var(--text-muted); }
.organization-readonly-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.organization-manager-card { display: grid; min-width: 0; gap: 10px; border-top: 1px solid var(--border-default); padding-top: 11px; }
.organization-manager-card > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.organization-manager-card > header > div { min-width: 0; }
.organization-manager-card h3,
.organization-manager-confirmation h4 { margin: 0; color: var(--text-primary); font-size: 14px; overflow-wrap: anywhere; }
.organization-manager-summary { display: grid; min-width: 0; gap: 3px; border-left: 2px solid var(--border-strong); background: var(--surface-interactive); padding: 9px 10px; }
.organization-manager-summary :is(strong, span, small) { min-width: 0; overflow-wrap: anywhere; }
.organization-manager-summary span,
.organization-manager-summary small,
.organization-manager-empty,
.organization-manager-confirmation small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.organization-manager-empty,
.organization-manager-confirmation p { margin: 0; overflow-wrap: anywhere; }
.organization-manager-editor,
.organization-manager-confirmation { display: grid; min-width: 0; gap: 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-interactive); padding: 10px; }
.organization-manager-editor label,
.organization-manager-confirmation label { display: grid; min-width: 0; gap: 5px; color: var(--text-muted); font-size: 12px; }
.organization-manager-editor :is(input, select),
.organization-manager-confirmation input { width: 100%; min-width: 0; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-raised); color: var(--text-primary); font: inherit; padding: 9px 10px; }
.organization-manager-card .admin-user-actions,
.organization-manager-card .modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.admin-position-workspace,
.admin-position-list,
.admin-position-card,
.admin-position-form {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

.admin-position-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 300px) auto;
  align-items: end;
  gap: 12px;
}

.admin-workspace-content .admin-position-toolbar > div:first-child {
  display: none;
}

.admin-position-toolbar > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-position-toolbar > .admin-position-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-position-toolbar h2,
.admin-position-card h2,
.admin-position-form h2 {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.admin-position-toolbar > div > span,
.admin-position-toolbar label,
.admin-position-form label {
  color: var(--text-muted);
  font-size: 12px;
}

.admin-position-toolbar label,
.admin-position-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.admin-position-toolbar select,
.admin-position-form :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  padding: 9px 10px;
}

.admin-position-form textarea {
  min-height: 92px;
  line-height: 1.4;
  resize: vertical;
}

.admin-position-feedback:empty {
  display: none;
}

.admin-position-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  border-top: 1px solid var(--border-default);
  padding-top: 10px;
}

.admin-position-status-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 4px;
}

.admin-position-status-filter button {
  min-height: 38px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  white-space: nowrap;
}

.admin-position-status-filter button.active {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
  font-weight: 700;
}

.admin-position-status-filter span {
  margin-left: 4px;
}

.admin-position-layout {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.admin-position-catalog,
.admin-position-detail-panel {
  min-width: 0;
}

.admin-position-list {
  gap: 7px;
}

.knovis-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--surface-interactive);
  color: var(--text-primary);
}

.knovis-row:hover,
.knovis-row:focus-within,
.knovis-row.is-selected,
.knovis-row.is-menu-open {
  border-color: var(--border-focus);
}

.knovis-row:hover,
.knovis-row:focus-within {
  background: var(--surface-interactive-hover);
}

.knovis-row.is-selected,
.knovis-row.is-menu-open {
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.knovis-row-main {
  display: grid;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-radius: 6px 0 0 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
}

.knovis-row-main:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.knovis-row-main:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.knovis-row-main:disabled .knovis-row-title,
.knovis-row-main:disabled .knovis-row-secondary,
.knovis-row-main:disabled .knovis-row-status {
  color: var(--text-muted);
}

.knovis-row-heading {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  min-width: 0;
}

.knovis-row-selection-marker {
  width: 14px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  visibility: hidden;
}

.knovis-row.is-selected .knovis-row-selection-marker {
  visibility: visible;
}

.knovis-row-title,
.knovis-row-secondary {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.knovis-row-secondary,
.admin-position-card small {
  color: var(--text-muted);
  font-size: 11px;
}

.knovis-row-status,
.admin-position-status {
  align-self: start;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 6px;
  white-space: nowrap;
}

.knovis-row-status.active,
.knovis-row-status.mitigated,
.admin-position-status.active {
  border-color: var(--border-default);
  color: var(--status-success);
}

.knovis-row-status.inactive,
.knovis-row-status.dismissed,
.admin-position-status.inactive {
  border-color: var(--border-default);
  color: var(--status-warning);
}

.knovis-row-status.archived {
  color: var(--text-muted);
}

.knovis-row-status.locked,
.knovis-row-status.risk-active {
  color: var(--status-danger);
}

.knovis-row-menu {
  display: flex;
  align-items: center;
  padding: 7px 7px 7px 0;
}

.knovis-row-menu-trigger.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  font-size: 20px;
}

.knovis-row-menu-trigger[aria-expanded="true"] {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.knovis-row-menu-popover {
  position: fixed;
  z-index: 40;
  display: grid;
  width: max-content;
  min-width: 190px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  padding: 4px;
}

.knovis-row-menu-item {
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  text-align: left;
  white-space: normal;
}

.knovis-row-menu-item:hover,
.knovis-row-menu-item:focus-visible {
  background: var(--surface-interactive-hover);
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.knovis-row-menu-item.dangerous {
  color: var(--status-danger);
}

.knovis-row-menu-item:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.knovis-row-menu-separator {
  margin: 4px 6px;
  border-top: 1px solid var(--border-default);
}

.admin-position-card,
.admin-position-form {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 13px;
}

.admin-position-card > header,
.admin-position-form > header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-position-card > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-position-card dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.admin-position-card dl > div {
  display: grid;
  grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr);
  gap: 8px;
  border-bottom: 1px solid var(--border-default);
  padding: 8px 0;
}

.admin-position-card :is(dt, dd) {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.admin-position-card dt {
  color: var(--text-muted);
}

.admin-position-context {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-interactive);
  padding: 9px 10px;
}

.admin-position-context span {
  color: var(--text-muted);
  font-size: 11px;
}

.admin-position-context strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .organization-structure-grid { grid-template-columns: 210px minmax(0, 1fr); }
  .admin-position-layout { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); }
}

.graph-import-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.graph-import-panel:empty {
  display: none;
}

.graph-import-error strong {
  display: block;
  overflow-wrap: anywhere;
}

.graph-import-summary,
.graph-import-conflict,
.graph-import-success {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
}

.graph-import-success {
  color: var(--status-success);
}

.graph-import-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-section-header h2 {
  margin: 0;
  font-size: 15px;
}

.admin-section-header span {
  min-width: 28px;
  border-radius: 999px;
  background: var(--surface-interactive);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 3px 8px;
}

.admin-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-summary span {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding: 6px 8px;
}

.admin-summary strong {
  color: var(--text-primary);
  font-size: 13px;
}

.admin-list-search {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.admin-list-search input {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  padding: 10px;
}

.admin-empty-state {
  border: 1px dashed var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 12px;
}

.admin-user-section,
.admin-person-section,
.admin-user-person-section,
.admin-role-assignment-section,
.admin-organization-persons,
.admin-organization-section {
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.admin-organization-list,
.admin-organization-person-list,
.admin-person-list,
.admin-role-assignment-list,
.admin-role-list,
.admin-role-task-list,
.admin-role-requirement-list,
.admin-link-list {
  display: grid;
  gap: 8px;
}

.admin-organization-row,
.admin-reference-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 11px;
  min-width: 0;
}

:is(
  .admin-organization-row,
  .admin-reference-row
):is(:hover, :focus-within) {
  background: var(--surface-interactive-hover);
}

.admin-organization-row.active:is(:hover, :focus-within) {
  background: var(--surface-selected);
}

.admin-organization-row > *,
.admin-reference-row > * {
  min-width: 0;
}

.admin-organization-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-organization-row.active {
  border-color: var(--border-focus);
  border-left-width: 3px;
  background: var(--surface-selected);
  padding-left: 9px;
}

.admin-reference-row {
  grid-template-columns: 1fr;
}

.admin-role-create-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  padding: 6px 0 12px;
}

.admin-role-create-toolbar > strong {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: 13px;
}

.admin-role-create-actions {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.admin-role-create-actions .secondary-button {
  min-height: 34px;
}

.admin-role-create-actions .secondary-button.active {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.admin-role-creation-slot {
  grid-template-columns: minmax(280px, 620px);
}

.admin-role-task-group,
.admin-role-requirement-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-role-requirement-list {
  gap: 6px;
}

.admin-role-risk-list {
  gap: 5px;
  margin-top: 8px;
}

.admin-role-requirement-description {
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  padding: 0 10px;
}

.admin-link-availability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-link-availability {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 10px;
}

.admin-link-availability ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.admin-link-availability li {
  overflow-wrap: anywhere;
}

.knovis-row-main.organization-tree-node {
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  background: transparent;
  padding-left: calc(10px + var(--tree-depth) * 12px);
}

.knovis-row-main.organization-tree-node:is(:hover, :focus-visible, .active) {
  border: 0;
  background: transparent;
}

.admin-knowledge-row .knovis-row-main {
  padding-left: calc(10px + var(--knowledge-depth, 0) * 14px);
}

.admin-organization-row strong,
.admin-organization-row span,
.admin-organization-row small,
.admin-reference-row strong {
  display: block;
}

.admin-organization-row span,
.admin-organization-row small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.admin-org-reference-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-org-reference-grid section {
  display: grid;
  align-content: start;
  gap: 8px;
}

.admin-reference-row {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 10px;
}

.admin-reference-row strong {
  overflow-wrap: anywhere;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.admin-user-actions button,
.modal-actions button {
  max-width: 100%;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.admin-user-form,
.admin-person-form,
.admin-role-form,
.admin-role-task-form,
.admin-role-requirement-form,
.admin-role-risk-form,
.admin-link-form {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 14px;
}

.admin-user-password-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.admin-user-password-action > div {
  min-width: 0;
}

.admin-user-password-action strong,
.admin-user-password-action span {
  display: block;
  overflow-wrap: anywhere;
}

.admin-user-password-action span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.admin-user-password-action button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.admin-form-fields > label:has(textarea),
.admin-form-fields > .modal-fact,
.admin-form-fields > .admin-creation-context,
.admin-form-fields > .admin-risk-requirements {
  grid-column: 1 / -1;
}

.admin-form-fields:disabled {
  opacity: 0.72;
}

.admin-risk-requirements {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-height: 180px;
  overflow: auto;
  margin: 2px 0;
  padding: 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
}

.admin-risk-requirements legend {
  padding: 0 5px;
  font-size: 13px;
  font-weight: 650;
}

.admin-risk-requirements label {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
}

.admin-risk-requirements input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.admin-risk-requirements span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-creation-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  min-width: 0;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-raised);
  padding: 0 0 0 10px;
}

.admin-creation-context-item {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  border-left: 1px solid var(--border-default);
  padding: 9px 11px;
}

.admin-creation-context-item:first-child {
  border-left: 0;
}

.admin-creation-context-item span {
  color: var(--text-muted);
  font-size: 12px;
}

.admin-creation-context-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 14px;
}

.admin-organization-form {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  padding: 12px;
}

.admin-user-form h2,
.admin-person-form h2,
.admin-role-form h2,
.admin-role-task-form h2,
.admin-role-requirement-form h2,
.admin-role-risk-form h2,
.admin-link-form h2,
.admin-organization-form h2 {
  margin: 0;
  font-size: 15px;
}

.admin-user-form label,
.admin-person-form label,
.admin-role-form label,
.admin-role-task-form label,
.admin-role-requirement-form label,
.admin-role-risk-form label,
.admin-link-form label,
.admin-organization-form label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.admin-user-form input,
.admin-user-form select,
.admin-person-form input,
.admin-person-form select,
.admin-role-form input,
.admin-role-form select,
.admin-role-form textarea,
.admin-role-task-form input,
.admin-role-task-form select,
.admin-role-task-form textarea,
.admin-role-requirement-form input,
.admin-role-requirement-form select,
.admin-role-requirement-form textarea,
.admin-role-risk-form input,
.admin-role-risk-form select,
.admin-role-risk-form textarea,
.admin-link-form select,
.admin-organization-form input,
.admin-organization-form select,
.admin-organization-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  padding: 10px;
}

.required-mark {
  color: var(--status-danger);
  font-weight: 900;
}

.field-error {
  min-height: 15px;
  color: var(--status-danger);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.field-error:empty {
  display: none;
}

.form-success {
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--status-success);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 9px 11px;
}

.form-success:empty {
  display: none;
}

.admin-organization-form textarea {
  resize: vertical;
}

.modal-fact {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  min-width: 0;
  padding: 9px 10px;
}

.modal-fact-wide {
  grid-column: span 2;
}

.modal-fact span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 12px;
}

.modal-fact strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.4;
}

.modal-link-list {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.modal-entity-link-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.modal-entity-link {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-interactive);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding: 5px 8px;
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

.modal-entity-link:hover,
.modal-entity-link:focus-visible {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  outline: 2px solid var(--focus-ring);
}

.modal-entity-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 30;
  display: none;
  width: min(420px, calc(100vw - 40px));
  max-height: min(44vh, 260px);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--text-primary) 18%, transparent);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  pointer-events: none;
  white-space: pre-line;
}

.modal-fact .modal-entity-tooltip {
  display: none;
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.modal-entity-tooltip.is-visible,
.modal-fact .modal-entity-tooltip.is-visible {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .modal-fact .modal-entity-link:hover + .modal-entity-tooltip {
    display: block;
  }
}

.multiline-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.modal-actions {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--border-default);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 90%, transparent), var(--surface-raised) 34%);
  padding-top: 12px;
}

.secondary-button,
.primary-action-button,
.danger-button {
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  padding: 0 14px;
}

.secondary-button {
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.primary-action-button {
  border: 0;
  background: var(--action-primary);
  color: var(--text-on-accent);
}

.danger-button {
  border: 1px solid var(--border-default);
  background: var(--surface-interactive);
  color: var(--status-danger);
}

.secondary-button:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
}

.secondary-button:active:not(:disabled),
.danger-button:active:not(:disabled) {
  background: var(--surface-selected);
}

.primary-action-button:hover {
  background: var(--action-primary-hover);
}

.primary-action-button:active:not(:disabled) {
  background: var(--action-primary-hover);
}

.secondary-button:disabled,
.primary-action-button:disabled,
.danger-button:disabled {
  border-color: var(--border-default);
  background: var(--surface-interactive);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.danger-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-selected);
}

.edit-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.requirement-modal-body > .edit-form {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.requirement-modal-body > .edit-form > :is(.edit-form-summary, .edit-error, .modal-actions),
.requirement-modal-body > .edit-form > .edit-field:has(textarea),
.requirement-modal-body > .edit-form > .edit-field:has(.graph-role-link-list) {
  grid-column: 1 / -1;
}

.edit-form-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--text-primary);
  font-size: 13px;
  padding: 9px 10px;
}

.edit-form-summary span {
  color: var(--text-muted);
  white-space: nowrap;
}

.edit-field {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.edit-field input,
.edit-field select,
.edit-field textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 10px;
  resize: vertical;
}

.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
  border-color: var(--border-focus);
  outline: 3px solid var(--focus-ring);
}

.edit-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
}

.edit-error {
  min-height: 18px;
  margin: 0;
  color: var(--status-danger);
  font-size: 13px;
}

.delete-warning {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-interactive);
  color: var(--status-danger);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  padding: 10px;
}

.icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.icon-button:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive-hover);
  color: var(--text-primary);
}

.icon-button:active:not(:disabled) {
  background: var(--surface-selected);
}

@media (max-width: 1100px) {
  .admin-console-main,
  .admin-console-side {
    position: static;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  .readiness-view {
    grid-template-columns: 1fr;
  }

  .role-passport,
  .assessment-panel,
  .gap-panel,
  .readiness-summary-panel,
  .readiness-deficits-panel,
  .readiness-confirmations-panel,
  .readiness-employee-risk-panel,
  .readiness-interventions-panel,
  .readiness-development-panel,
  .readiness-decisions-panel,
  .readiness-audit-panel {
    grid-column: 1;
  }

  .assessment-panel {
    grid-row: 3;
  }

  .gap-panel {
    grid-row: 4;
  }

  .role-passport,
  .assessment-panel,
  .gap-panel,
  .readiness-summary-panel,
  .readiness-deficits-panel,
  .readiness-confirmations-panel,
  .readiness-employee-risk-panel,
  .readiness-interventions-panel,
  .readiness-development-panel,
  .readiness-decisions-panel {
    border-bottom: 1px solid var(--border-default);
  }

  .employee-risk-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .person-readiness-role-summary {
    grid-template-columns: 28px minmax(0, 1fr) minmax(118px, 0.4fr) 22px;
    grid-template-areas:
      "order identity status disclosure"
      ". reason problems .";
  }

  .person-readiness-role-order { grid-area: order; }
  .person-readiness-role-identity { grid-area: identity; }
  .person-readiness-role-status { grid-area: status; }
  .person-readiness-role-problems { grid-area: problems; }
  .person-readiness-role-primary-reason { grid-area: reason; }
  .person-readiness-role-disclosure { grid-area: disclosure; }
}

@media (max-width: 900px) {
  .requirement-modal-body,
  .risk-modal-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-fact-wide {
    grid-column: 1 / -1;
  }

  .admin-console-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-console-main {
    border-bottom: 1px solid var(--border-default);
    overflow: visible;
  }

  .admin-action-menu {
    height: auto;
    border-right: 0;
    padding: 10px 12px;
  }

  .admin-navigation-desktop {
    display: none;
  }

  .admin-navigation-compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: var(--text-muted);
    font-size: 12px;
  }

  .admin-navigation-compact > span {
    white-space: nowrap;
  }

  .admin-navigation-compact select {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-raised);
    color: var(--text-primary);
    font: inherit;
    padding: 0 34px 0 10px;
  }

  .admin-workspace-content {
    padding: 14px;
  }
}

@media (max-width: 760px) {
  .workspace:has(.graph-area.graph-only) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .graph-area,
  .graph-area.graph-only {
    height: 430px;
    min-height: 430px;
    margin: 8px 10px 12px;
  }

  .graph-layer-controls {
    right: 10px;
    left: 10px;
    justify-content: flex-start;
    gap: 18px;
  }

  .graph-toolbar {
    top: 66px;
    right: 10px;
  }

  .graph-zoom-range {
    width: min(92px, 24vw);
  }

  .modal-backdrop {
    padding: 10px;
    place-items: start center;
    overflow-y: auto;
  }

  .readiness-summary,
  .assessment-requirement-row {
    grid-template-columns: 1fr;
  }

  .employee-risk-summary,
  .employee-risk-items {
    grid-template-columns: 1fr;
  }

  .readiness-facts,
  .role-passport.expanded .fact-grid,
  .assessment-detail-context {
    grid-template-columns: 1fr;
  }

  .assessment-requirement-actions {
    align-items: stretch;
    justify-content: space-between;
  }

  .assessment-panel > .section-title,
  .assessment-source-toolbar {
    grid-template-columns: 1fr;
  }

  .assessment-panel > .section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .assessment-source-actions {
    justify-content: stretch;
  }

  .assessment-source-actions button {
    width: 100%;
  }

  .assessment-source-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-default);
    border-left: 0;
    padding-top: 10px;
  }

  .assessment-source-meta div {
    padding: 4px 8px;
  }

  .assessment-detail-button {
    flex: 1;
  }

  .assessment-detail-risks div {
    grid-template-columns: 1fr;
  }

  .new-role-fields,
  .new-role-target {
    grid-template-columns: 1fr;
  }

  .new-role-description-field,
  .new-role-target legend {
    grid-column: 1;
  }

  .modal-window-resizable {
    min-width: 0;
    min-height: 0;
    resize: none;
    translate: none !important;
  }

  .modal-window-resizable::after {
    display: none;
  }

  .modal-window-handle {
    cursor: default;
    touch-action: auto;
  }

  .requirement-modal-body,
  .risk-modal-body {
    grid-template-columns: 1fr;
  }

  .requirement-modal-body > .edit-form {
    grid-template-columns: 1fr;
  }

  .modal-fact-wide {
    grid-column: auto;
  }

  .modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .modal-actions button {
    width: 100%;
  }

  .password-action-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  .admin-user-password-action {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-user-password-action button {
    width: 100%;
  }

  .knowledge-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .requirement-editor-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .risk-entity-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .requirement-form-fields {
    grid-template-columns: 1fr;
  }

  .requirement-wide-field {
    grid-column: auto;
  }

  .requirement-form-context .requirement-context-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .knowledge-form-fields {
    grid-template-columns: 1fr;
  }

  .knowledge-form-context .knowledge-context-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .knowledge-description-field {
    grid-column: auto;
  }

  .requirement-risk-context-row {
    align-items: stretch;
    flex-direction: column;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    order: -1;
    border-left: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .panel.compact {
    margin-top: 0;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .readiness {
    border-left: 0;
    padding-left: 0;
    text-align: left;
  }

  .segmented {
    grid-template-columns: 1fr 1fr;
  }

  .segmented.assessment-score-compact {
    grid-template-columns: repeat(4, 32px);
  }

  .person-navigation-shell {
    gap: 10px;
    padding: 14px;
  }

  .person-navigation-copy,
  .person-legacy-navigation {
    grid-template-columns: minmax(0, 1fr);
  }

  .person-navigation-copy {
    align-items: start;
  }

  .person-primary-navigation,
  .person-section-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .person-primary-navigation {
    display: grid;
  }

  .person-primary-navigation button {
    min-height: 48px;
    padding-inline: 10px;
  }

  .person-readiness-overview {
    padding: 14px;
  }

  .person-readiness-overview-header,
  .person-readiness-attention,
  .person-readiness-roles-heading,
  .readiness-role-drilldown {
    align-items: stretch;
    flex-direction: column;
  }

  .person-readiness-load-state {
    width: max-content;
    max-width: 100%;
  }

  .person-readiness-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .person-readiness-summary > div {
    padding: 12px 10px;
  }

  .person-readiness-summary > div + div {
    border-left: 0;
  }

  .person-readiness-summary > div:nth-child(even) {
    border-left: 1px solid var(--border-default);
  }

  .person-readiness-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--border-default);
  }

  .person-readiness-role-summary {
    min-height: 0;
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    grid-template-areas:
      "order identity disclosure"
      ". status status"
      ". problems problems"
      ". reason reason";
    align-items: start;
    gap: 9px 8px;
    padding: 12px 4px;
  }

  .person-readiness-role-status,
  .person-readiness-role-problems {
    align-self: start;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }

  .person-readiness-role-primary-reason {
    font-size: 13px;
  }

  .person-readiness-role-detail {
    padding: 12px 4px 14px;
  }

  .readiness-role-attention-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .readiness-role-cause-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .readiness-role-cause-grid > section,
  .readiness-role-cause-grid > section:first-child {
    padding: 12px 0;
  }

  .readiness-role-cause-grid > section + section {
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }

  .readiness-role-drilldown > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .readiness-role-drilldown button {
    min-height: 44px;
  }

  .person-readiness-role-error {
    align-items: stretch;
    flex-direction: column;
    padding: 10px 4px 14px 34px;
  }

  .person-readiness-role-error button {
    min-height: 44px;
  }

  .readiness-graph-back {
    width: 100%;
    margin-left: 0;
  }

  .person-section-tabs {
    display: grid;
  }

  .person-section-tabs button {
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 7px 9px;
    white-space: normal;
  }

  .readiness-chain div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .readiness-gap-title {
    flex-direction: column;
  }

  .person-intervention-title {
    flex-direction: column;
  }

  .person-decision-title {
    flex-direction: column;
  }

  .development-path-item,
  .decision-context {
    grid-template-columns: 1fr;
  }

  .readiness-gap-title span,
  .readiness-gap-meta span {
    white-space: normal;
  }

  .role-assignment-context {
    grid-template-columns: 1fr;
  }

  .self-assessment-summary,
  .self-assessment-risk {
    grid-template-columns: 1fr;
  }

  .self-assessment-risk-meta {
    text-align: left;
  }

  .self-assessment-risk-chain div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .self-assessment-risk-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-console-header {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
  }

  .admin-console-brand strong {
    font-size: 18px;
  }

  .admin-console-global-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .admin-console-user {
    display: none;
  }

  .admin-workspace-exit {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .admin-theme-choice {
    grid-column: 1;
    grid-row: 2;
  }

  .admin-workspace-logout {
    grid-column: 2;
    grid-row: 2;
  }

  .admin-console-body {
    padding: 0;
  }

  .admin-workspace-commandbar {
    z-index: auto;
  }

  .admin-workspace-commandbar-main {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 8px;
  }

  .admin-workspace-heading > small {
    display: none;
  }

  .admin-workspace-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-workspace-actions button {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }

  .admin-section-tabs {
    flex-wrap: wrap;
    gap: 0 2px;
    padding: 0 10px;
  }

  .admin-section-tab {
    min-height: 36px;
    flex: 1 1 auto;
    padding-inline: 8px;
  }

  .admin-navigation-compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .admin-navigation-compact select {
    height: 44px;
  }

  .admin-org-reference-grid,
  .admin-link-availability-grid,
  .admin-organization-row,
  .role-list-row {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    justify-content: flex-start;
  }

  .knovis-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .knovis-row-heading {
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .knovis-row-status {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
  }

  .role-description-trigger {
    width: 100%;
    min-width: 0;
    min-height: 34px;
  }
}

button:disabled {
  border-color: var(--border-default);
  background: var(--surface-interactive);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .organization-structure-toolbar,
  .organization-structure-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-unit-panel,
  .admin-position-detail-panel {
    border-left: 0;
    padding-left: 0;
  }

  .organization-archive-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-member-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-member-toolbar > .admin-user-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .organization-member-toolbar button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .organization-structure-actions button {
    width: 100%;
  }

  .organization-manager-card .admin-user-actions,
  .organization-manager-card .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-manager-card .admin-user-actions button,
  .organization-manager-card .modal-actions button {
    width: 100%;
  }

  .organization-unit-card > header {
    display: grid;
  }

  .organization-unit-facts,
  .organization-readonly-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-unit-tabs {
    overflow-x: auto;
  }

  .organization-unit-tabs button {
    min-width: 105px;
  }

  .admin-position-toolbar,
  .admin-position-filterbar,
  .admin-position-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-position-toolbar .primary-action-button,
  .admin-position-toolbar .secondary-button {
    width: 100%;
  }

  .admin-position-status-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-position-status-filter button {
    min-width: 0;
    white-space: normal;
  }

  .admin-position-card dl > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Read-only audit filters remain usable on narrow screens. */
.audit-reader-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.audit-reader-filters label { display: flex; flex-direction: column; gap: 4px; }
.admin-audit-workspace .audit-event { overflow-wrap: anywhere; }