/* 2.44.0: Company (Modern Calm): soft cards, room to breathe, the section's deep teal for what matters */
.cmp { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; margin-inline: auto; min-width: 0; }
.cmp.cmp-wide { max-width: none; }
.cmp .page-head { margin-bottom: 0; }
.cmp-grow { flex: 1; min-width: 0; }
.cmp-block { display: block; }
.cmp-card { background: var(--panel); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .04); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cmp-card-title { margin: 0; font-size: 15px; font-weight: 600; }
.cmp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.cmp-grid2 > .field { max-width: none; }
.cmp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 48px 20px; color: var(--muted); background: var(--panel); border-radius: 18px; border: 1px dashed var(--line); }
.cmp-empty p { margin: 0; max-width: 46ch; }
.cmp-empty-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--sec-soft); color: var(--sec); }
.cmp-doc-body { display: flex; flex-direction: column; gap: 14px; }
.cmp-note { max-width: none; width: 100%; box-sizing: border-box; display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sec-soft); color: var(--ink); font-size: 14px; }
.cmp-note svg { color: var(--sec); flex: none; }
.cmp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.cmp-chip.accent { background: var(--sec-soft); color: var(--sec); font-weight: 600; }
.cmp-chip.ok { background: color-mix(in srgb, var(--ok) 14%, var(--panel)); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
.cmp-chip.warn { background: color-mix(in srgb, #F59E0B 16%, var(--panel)); color: #B45309; }
.cmp-link { border: 0; background: none; color: var(--accent); padding: 2px 4px; cursor: pointer; font: inherit; font-size: 14px; }
.cmp-link:hover { text-decoration: underline; }
.cmp-due { color: #B45309; }
.cmp-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.cmp-crumbs a { color: var(--muted); text-decoration: none; }
.cmp-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.cmp-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--sec-soft); color: var(--sec); }
.cmp-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.cmp-avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-row-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.cmp-row-link:hover { background: var(--sunk); }
.cmp-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cmp-people li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.cmp-people li:last-child { border-bottom: 0; }
.cmp-bar { display: block; height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.cmp-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--sec); }
.cmp-bar.big { height: 10px; flex: 1; }
.cmp-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cmp-tabs::-webkit-scrollbar { display: none; }
.cmp-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--panel); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); white-space: nowrap; font-size: 14px; }
.cmp-tabs a.on { background: var(--sec); color: var(--panel); }

/* documents */
.cmp-toread { border: 1px solid color-mix(in srgb, var(--sec) 25%, transparent); }
.cmp-toread-head { display: flex; gap: 12px; align-items: flex-start; }
.cmp-toread-head p { margin: 2px 0 0; }
.cmp-toread-ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--sec-soft); color: var(--sec); }
.cmp-docs { display: flex; flex-direction: column; gap: 8px; }
.cmp-doc { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--panel); border-radius: 16px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: box-shadow .15s; }
.cmp-doc:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .07); }
.cmp-doc:focus-visible { outline: none; box-shadow: var(--focus); }
.cmp-doc-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sec-soft); color: var(--sec); }
.cmp-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cmp-doc-title { font-weight: 600; overflow-wrap: anywhere; }
.cmp-doc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.cmp-doc-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.cmp-sig { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-doc-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; color: var(--muted); }
.cmp-doc-facts > span { display: inline-flex; align-items: center; gap: 5px; }
.cmp-article { max-width: 76ch; }
.cmp-whatchanged { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sec-soft); font-size: 14px; }
.cmp-confirm { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 18px; background: var(--panel); border: 1.5px solid var(--sec); position: sticky; bottom: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.cmp-confirm p { margin: 2px 0 0; }
.cmp-confirm.done { position: static; justify-content: flex-start; border-color: transparent; background: color-mix(in srgb, var(--ok) 10%, var(--panel)); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); box-shadow: none; padding: 12px 16px; }
.cmp-edit { display: flex; flex-direction: column; gap: 14px; }
.cmp-edit .field, .cmp-edit .ed-field { max-width: none; }
.cmp-aud { border: 0; padding: 0; margin: 0; }
.cmp-aud legend { font-weight: 500; font-size: .92rem; margin-bottom: 4px; }
.cmp-teams { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-inline-start: 26px; }
.cmp-teams.cmp-scroll { max-height: 220px; overflow: auto; padding-inline-start: 0; flex-direction: column; flex-wrap: nowrap; }
.cmp-savebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; bottom: 8px; padding: 10px 14px; background: var(--panel); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08); }
.cmp-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.cmp-timeline li { display: flex; gap: 14px; padding-bottom: 16px; position: relative; }
.cmp-timeline li::before { content: ''; position: absolute; inset-inline-start: 6px; top: 16px; bottom: 0; border-inline-start: 2px solid var(--line); }
.cmp-timeline li:last-child::before { display: none; }
.cmp-tl-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sec); margin-top: 4px; box-shadow: 0 0 0 4px var(--sec-soft); }
.cmp-tl-body p { margin: 4px 0; }

/* the org chart */
.cmp-org-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cmp-seg { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 3px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.cmp-seg button { border: 0; background: none; border-radius: 999px; padding: 6px 14px; min-width: 36px; }
.cmp-seg button[aria-pressed="true"] { background: var(--sec); color: var(--panel); }
.cmp-org { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cmp-org-side { position: sticky; top: 12px; }
.cmp-org-stage { min-width: 0; }
.cmp-org-viewport { background: var(--panel); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); height: 68vh; min-height: 420px; overflow: hidden; cursor: grab; touch-action: none; position: relative;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px); background-size: 20px 20px; }
.cmp-org-viewport.dragging { cursor: grabbing; }
.cmp-org-viewport:focus-visible { outline: none; box-shadow: var(--focus); }
.cmp-org-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: 28px; width: max-content; --cmp-line: color-mix(in srgb, var(--sec) 45%, var(--line)); }
.cmp-br { display: flex; justify-content: center; list-style: none; margin: 0; padding: 22px 0 0; position: relative; }
.cmp-tree > .cmp-br { padding-top: 0; }
.cmp-bi { display: flex; flex-direction: column; align-items: center; position: relative; padding: 22px 8px 0; }
.cmp-tree > .cmp-br > .cmp-bi { padding-top: 0; }
.cmp-bi::before, .cmp-bi::after { content: ''; position: absolute; top: 0; inset-inline-end: 50%; width: 50%; height: 22px; border-top: 1.5px solid var(--cmp-line); }
.cmp-bi::after { inset-inline-end: auto; inset-inline-start: 50%; border-inline-start: 1.5px solid var(--cmp-line); }
.cmp-bi:only-child::before, .cmp-bi:only-child::after { display: none; }
.cmp-bi:first-child::before, .cmp-bi:last-child::after { border: 0; }
.cmp-bi:last-child::before { border-inline-end: 1.5px solid var(--cmp-line); border-start-end-radius: 8px; }
.cmp-bi:first-child::after { border-start-start-radius: 8px; }
.cmp-bi > .cmp-br::before { content: ''; position: absolute; top: 0; inset-inline-start: 50%; height: 22px; border-inline-start: 1.5px solid var(--cmp-line); }
.cmp-bi:only-child > .cmp-node::before { content: ''; position: absolute; top: -22px; inset-inline-start: 50%; height: 22px; border-inline-start: 1.5px solid var(--cmp-line); }
.cmp-tree > .cmp-br > .cmp-bi:only-child > .cmp-node::before { display: none; }
.cmp-node { position: relative; width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05); text-align: start; cursor: default; }
.cmp-node.on { border-color: var(--sec); box-shadow: 0 0 0 3px var(--sec-soft); }
.cmp-node.vacant { border-style: dashed; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.cmp-node.vacant .cmp-avatar { background: var(--sunk); color: var(--muted); }
.cmp-node-main { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 12px 8px; border: 0; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; border-radius: 16px; }
.cmp-node-main:focus-visible { outline: none; box-shadow: var(--focus); }
.cmp-node-text { display: flex; flex-direction: column; min-width: 0; }
.cmp-node-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-node-role { font-size: 12.5px; color: var(--muted); }
.cmp-node-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--sec); margin-top: 2px; }
.cmp-node-meta span { display: inline-flex; align-items: center; gap: 3px; }
.cmp-node-acc { list-style: disc; margin: 0; padding: 0 12px 14px; padding-inline-start: 28px; border-top: 1px solid var(--line); padding-top: 8px; margin-inline: 0; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.cmp-fold { position: absolute; bottom: -12px; inset-inline-start: calc(50% - 12px); width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: 12px; line-height: 1; z-index: 1; display: grid; place-items: center; }
.cmp-org-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-org-list li { padding-inline-start: calc(var(--depth) * 22px); position: relative; }
.cmp-org-list li .cmp-node { width: 100%; }
.cmp-org-list li .cmp-fold { bottom: auto; top: 14px; inset-inline-start: auto; inset-inline-end: 12px; }
.cmp-side-who { display: flex; gap: 12px; align-items: center; }
.cmp-side-h { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.cmp-acc { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
.cmp-acc-in { display: flex; flex-direction: column; gap: 6px; }
.cmp-org-side .field { max-width: none; margin-bottom: 10px; }
.cmp-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.cmp-dl dt { color: var(--muted); }
.cmp-dl dd { margin: 0; }
.cmp-dl.cmp-dl-sm { font-size: 13px; gap: 4px 12px; }

/* onboarding */
.cmp-onbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cmp-onb { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--sunk); color: var(--ink); text-decoration: none; }
.cmp-onb:hover { background: color-mix(in srgb, var(--sec-soft) 60%, var(--sunk)); }
.cmp-onb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-onb-n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.cmp-onb-progress { display: flex; gap: 12px; align-items: center; }
.cmp-checks { list-style: none; margin: 0; padding: 0; }
.cmp-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.cmp-check:last-child { border-bottom: 0; }
.cmp-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--sec); }
.cmp-check.done .cmp-grow > span:first-child { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.cmp-check-ico { color: var(--sec); margin-top: 2px; }
.cmp-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cmp-item-row { display: grid; grid-template-columns: 170px 1fr 110px auto; gap: 6px; align-items: center; }
.cmp-item-row > [hidden] { display: none; }
.cmp-item-row > select:nth-child(2), .cmp-item-row > input { grid-column: 2; }
.cmp-dialog-wide { width: min(760px, 96vw); }
.cmp-wide-field { max-width: none; }

/* training */
.cmp-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cmp-course { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--sunk); color: var(--ink); text-decoration: none; }
.cmp-course:hover { background: color-mix(in srgb, var(--sec-soft) 60%, var(--sunk)); }
.cmp-course-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sec-soft); color: var(--sec); }
.cmp-td-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cmp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-step { background: var(--panel); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.cmp-step-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cmp-step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--sunk); color: var(--muted); }
.cmp-step-n.done { background: var(--sec); color: var(--panel); }
.cmp-quiz { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.cmp-quiz-form { display: flex; flex-direction: column; gap: 12px; }
.cmp-q { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-q legend { font-weight: 500; padding: 0 4px; }
.cmp-q.wrong { border-color: #F59E0B; background: color-mix(in srgb, #F59E0B 6%, var(--panel)); }
.cmp-opt { display: flex; gap: 8px; align-items: center; padding: 4px 2px; cursor: pointer; }
.cmp-pass { color: color-mix(in srgb, var(--ok) 80%, var(--ink)); font-weight: 600; margin: 0; }
.cmp-fail { color: #B45309; margin: 0; }
.cmp-course-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cmp-ci-head { display: flex; gap: 6px; align-items: center; }
.cmp-ci-extra { display: flex; flex-direction: column; gap: 8px; }
.cmp-ci-extra .field { margin-bottom: 0; }
.cmp-q-edit { border-inline-start: 3px solid var(--sec-soft); padding-inline-start: 10px; display: flex; flex-direction: column; gap: 6px; }
.cmp-q-opts { display: flex; flex-direction: column; gap: 4px; }
.cmp-opt-edit { display: flex; gap: 6px; align-items: center; }
.cmp-opt-edit input[type="text"] { flex: 1; }
.cmp-num { width: 90px; }

/* AI and automation docs */
.cmp-ad-group { display: flex; flex-direction: column; gap: 10px; }
.cmp-ad-gh { margin: 6px 0 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.cmp-ad-gi { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--sec-soft); color: var(--sec); }
.cmp-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.cmp-ad { background: var(--panel); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); min-width: 0; }
.cmp-ad-head { display: flex; gap: 8px; align-items: center; }
.cmp-ad-what { margin: 0; line-height: 1.55; }
.cmp-ad-note { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cmp-ad-note p { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 14px; }
.cmp-ad-note textarea { width: 100%; }

@media (max-width: 980px) {
  .cmp-org { grid-template-columns: 1fr; }
  .cmp-org-side { position: static; }
}
@media (max-width: 640px) {
  .cmp-doc { flex-wrap: wrap; padding: 12px 14px; }
  .cmp-doc-side { justify-content: flex-start; width: 100%; padding-inline-start: 52px; }
  .cmp-ads { grid-template-columns: 1fr; }
  .cmp-item-row { grid-template-columns: 1fr 1fr auto; }
  .cmp-item-row > select:nth-child(2), .cmp-item-row > input { grid-column: 1 / -1; grid-row: 2; }
  .cmp-org-viewport { height: 60vh; }
  .cmp-confirm { bottom: 8px; padding: 12px 14px; }
}