/* ==========================================================================
   Vizzy 2 — managing people, connections and organizations.
   Used by the Team view in the chat app and by the admin console (/admin).
   Builds on style.css + app.css (same tokens; works in both themes).
   ========================================================================== */

/* ---------- sections ---------- */

.mg-section { margin-top: 30px; }
.mg-section:first-child { margin-top: 0; }

.mg-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.mg-section-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--heading);
}
.mg-section-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.mg-note { margin: 0 0 12px; font-size: 13.5px; color: var(--text-2); }
.mg-hint { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

.mg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.mg-back:hover { color: var(--heading); }

/* ---------- role / staff badges ---------- */

.badge.role-owner {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  color: var(--gold);
}
.badge.role-operator { background: color-mix(in srgb, var(--blue-deep) 13%, transparent); color: var(--blue); }
.badge.role-viewer { border-color: var(--hairline-strong); background: var(--surface-2); color: var(--text-2); }
.badge.staff { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }

.menu-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.menu-badges:empty { display: none; }

/* ---------- forms ---------- */

.mg-form {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.mg-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 14px;
}
.mg-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mg-field.wide { grid-column: 1 / -1; }
.mg-field label,
.mg-legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.mg-field .field { width: 100%; }
select.field { padding-right: 10px; cursor: pointer; }
.field:disabled { opacity: .55; cursor: not-allowed; }

.mg-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }

.mg-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--red) 42%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  font-size: 13.5px;
  color: var(--red);
  overflow-wrap: anywhere;
}
.mg-error .icon-btn { width: 24px; height: 24px; color: var(--red); }

.mg-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.mg-check input { width: 16px; height: 16px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--blue-deep); }
.policy-rules { display: grid; gap: 12px; margin-top: 10px; max-width: 640px; }
.mg-check small { display: block; margin-top: 1px; }

.mg-radios { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.mg-radios legend { padding: 0; margin-bottom: 6px; }
.mg-radios label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.mg-radios input { accent-color: var(--blue-deep); }

/* ---------- inline confirm ---------- */

.confirm-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  font-size: 13.5px;
  color: var(--text);
}
.confirm-box.caution {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.confirm-box > span:first-child { flex: 1 1 260px; }
.confirm-actions { display: inline-flex; gap: 6px; }

/* ---------- people table (on top of .audit-table) ---------- */

.people-table td { vertical-align: middle; }
.people-table .col-name { min-width: 150px; color: var(--heading); font-weight: 550; }
.people-table .col-name .badge,
.people-table .you-tag { margin-left: 7px; vertical-align: 1px; }
.you-tag {
  padding: 0 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
}
.cell-sub { display: none; font-size: 12px; font-weight: 400; color: var(--text-3); overflow-wrap: anywhere; }
.cell-note { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.people-table :is(.col-email, .col-title, .col-joined) { color: var(--text-2); }
.people-table .col-joined,
.people-table .col-state { white-space: nowrap; }
.people-table tr.is-inactive :is(.col-name, .col-email, .col-title, .col-joined) { opacity: .55; }
.people-table .col-actions { width: 1%; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.role-select { width: auto; min-width: 112px; padding: 5px 8px; border-radius: var(--r-sm); font-size: 13px; }

.people-sub > td { padding-top: 0; background: transparent; }
.people-sub .mg-error { margin: 0; }

.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.status-dot.on { color: var(--green); }
.status-dot.on::before { background: var(--green); }

.role-legend {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-2);
}
.role-legend > div { display: flex; gap: 8px; }
.role-legend dt { flex: 0 0 70px; font-weight: 650; color: var(--heading); }
.role-legend dd { margin: 0; }

/* ---------- connection cards ---------- */

/* Three kinds: three across on a wide screen, wrapping to two and then one as it narrows. */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; gap: 14px; }
.conn-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.conn-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.conn-card h4 { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 650; color: var(--heading); }
.conn-card p { margin: 0; }
.conn-url { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; color: var(--text); }
/* Splunk Cloud admin shows its stack name as the main line, with the long URL underneath. */
.conn-card .conn-url-full { margin-top: -6px; font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; color: var(--text-3); }
.conn-meta { font-size: 12.5px; color: var(--text-3); }
.conn-off { font-size: 13.5px; color: var(--text-3); }
.conn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.conn-test { margin: 2px 0 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.conn-test.ok strong { color: var(--green); }
.conn-test.bad strong { color: var(--red); }
.conn-card .mg-form { margin: 0; padding: 0; border: 0; background: transparent; }
.conn-card .mg-form-grid { grid-template-columns: 1fr; }
.conn-card .confirm-box > span:first-child { flex-basis: 100%; }
.conn-card .conn-alt { justify-self: start; margin: -6px 0 0 -8px; }
.mg-field-error { font-size: 12.5px; line-height: 1.45; color: var(--red); }
.field[aria-invalid="true"] { border-color: color-mix(in srgb, var(--red) 60%, transparent); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text); }
.switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.switch[aria-checked="true"] { border-color: transparent; background: var(--gold); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--gold-text); }
.switch:focus-visible { border-radius: var(--r-pill); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- notes: Vizzy's preferences and company memory (Memory view, admin org page) ---------- */

/* the count sits beside the heading: the cards are narrower than the page */
.note-head { justify-content: flex-start; align-items: baseline; }
.note-count { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); }
.note-list { display: flex; flex-direction: column; gap: 10px; max-width: 880px; }
.note-list:focus { outline: none; }
.note-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.note-card.is-editing { border-color: color-mix(in srgb, var(--blue-deep) 45%, transparent); }

.note-body { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.note-body p { margin: 0 0 8px; }
.note-body :is(h1, h2, h3, h4, h5, h6) { margin: 14px 0 5px; font-size: 15.5px; }
.note-body code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); font-size: .88em; }
.note-body pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; }

.note-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.note-meta {
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  color: var(--text-3);
}
.note-foot .note-meta { flex: 1 1 260px; }
.note-meta .badge { margin-left: 5px; vertical-align: 1px; }
.note-meta a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.note-meta a:hover { color: var(--heading); }
.note-actions { display: inline-flex; gap: 6px; }
.note-card .mg-error { margin: 0; }

.note-edit { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.note-textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
  resize: vertical;
}
.note-edit .mg-form-actions { margin-top: 2px; }

.note-empty {
  max-width: 880px;
  margin: 0;
  padding: 22px 16px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 13.5px;
  color: var(--text-3);
}
.note-empty.is-error { color: var(--red); }
.note-after { margin: 10px 0 0; }
.note-footline { margin: 28px 0 0; font-size: 12.5px; color: var(--text-3); }

/* ---------- modal (temporary password) ---------- */

.modal {
  width: min(440px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.modal::backdrop { background: rgba(0, 0, 0, .55); }
.modal h3 { margin: 0 0 8px; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--heading); }
.modal p { margin: 0 0 10px; font-size: 14px; overflow-wrap: anywhere; }
.modal-note { color: var(--text-2); }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.temp-pass-row { display: flex; align-items: stretch; gap: 8px; margin: 0 0 12px; }
.temp-pass {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  user-select: all;
  color: var(--heading);
}

/* change password (account menu, both apps) */
.pw-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pw-form .mg-error { margin: 0; }
.pw-form .modal-actions { gap: 8px; margin-top: 4px; }

/* ---------- admin console ---------- */

.admin-tag {
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple);
}
.sb-spacer { flex: 1; min-height: 0; }
.sb-nav-sep { height: 1px; margin: 8px 8px; background: var(--hairline); }
.app.gated :is(.sidebar, .hamburger, .scrim) { display: none; }

.gate {
  max-width: 440px;
  margin: 12vh auto 0;
  padding: 0 16px;
  text-align: center;
}
.gate h2 { margin: 0 0 8px; font-family: var(--display); font-size: 24px; color: var(--heading); }
.gate p { margin: 0 0 18px; color: var(--text-2); }

.orgs-table .col-name a { font-weight: 600; }
.orgs-table tbody tr { cursor: pointer; }
.orgs-table tbody tr:hover td { background: var(--surface-2); }
.orgs-table :is(.col-people, .col-calls, .col-tokens) { text-align: right; font-variant-numeric: tabular-nums; }
.orgs-table :is(.col-last, .col-created) { white-space: nowrap; color: var(--text-2); }
.orgs-table .conn-pills { margin-left: 0; }
.orgs-table .none { color: var(--text-3); }

.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.inline-form .mg-field { flex: 1 1 240px; }

.audit-tools select.field { width: auto; max-width: 220px; padding: 7px 12px; border-radius: var(--r-pill); font-size: 13px; }

.events-table .col-action code { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.events-table .col-who .badge { margin-left: 6px; }
.events-table .col-target { overflow-wrap: anywhere; color: var(--text-2); }

/* staff access (#/staff) rides on .people-table */
.staff-table .col-org { color: var(--text-2); }
.staff-table .col-org a:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 2px; }
.staff-table .col-level { white-space: nowrap; }

/* ---------- knowledge base (admin: #/kb list, editor, revisions) ---------- */

.badge.kb-published { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.badge.kb-draft { border-color: var(--hairline-strong); background: var(--surface-2); color: var(--text-2); }
.badge.kb-archived {
  border-color: var(--hairline);
  background: transparent;
  color: var(--text-3);
  text-decoration: line-through;
}

.kb-table tbody tr { cursor: pointer; }
.kb-table tbody tr:hover td { background: var(--surface-2); }
.kb-table .col-code code { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; color: var(--text-2); }
.kb-table .col-title { min-width: 240px; }
.kb-table .col-title a { font-weight: 600; overflow-wrap: anywhere; }
.kb-sum {
  display: -webkit-box;
  max-width: 560px;
  margin-top: 2px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
  color: var(--text-3);
}
.kb-by { display: block; font-size: 12px; color: var(--text-3); }
.kb-table :is(.col-cat, .col-layer, .col-scope) { color: var(--text-2); }
.kb-table :is(.col-layer, .col-updated) { white-space: nowrap; }
.kb-table .col-updated { color: var(--text-2); }
.kb-table tr.is-archived :is(.col-code, .col-title, .col-tech, .col-cat, .col-layer, .col-scope, .col-updated) { opacity: .6; }

.kb-code {
  margin-right: 10px;
  padding: 2px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: .58em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--text-2);
}
.audit-head p .badge { margin-right: 4px; vertical-align: 1px; }

.kb-form { padding-bottom: 0; }
.kb-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.kb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kb-grid .span-2 { grid-column: span 2; }
.kb-grid .span-3 { grid-column: span 3; }
.kb-hint-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kb-counter { flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-3); }
.kb-counter.over { font-weight: 600; color: var(--red); }
.field[aria-invalid="true"] { border-color: color-mix(in srgb, var(--red) 65%, transparent); }

/* body: editor and live preview side by side; Write / Preview tabs take over on narrow screens */
.kb-tabs { display: none; }
.kb-tab {
  padding: 6px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.kb-tab[aria-selected="true"] { background: var(--surface-3); color: var(--heading); }
.kb-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0;
}
.kb-pane { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kb-pane-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.kb-pane-label small { margin-left: 4px; font-weight: 400; }
.kb-textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 460px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
  resize: vertical;
}
.kb-preview {
  flex: 1 1 0;               /* follows the editor's height and scrolls inside it */
  min-height: 460px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  overflow: auto;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  scrollbar-width: thin;
}
.kb-preview:focus-visible { outline: none; box-shadow: var(--ring); }
.kb-preview-empty { margin: 0; color: var(--text-3); }

.kb-errors { margin: 0 0 14px; }
.kb-errors ul { margin: 0; padding-left: 18px; }
.kb-errors li + li { margin-top: 2px; }
.kb-notice {
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--blue-deep) 40%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--blue-deep) 9%, transparent);
  font-size: 13.5px;
  color: var(--text);
}

/* someone else saved first (409): sits with the save bar so it can't be missed */
.kb-conflict {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
  font-size: 14px;
  color: var(--text);
}
.kb-conflict-text { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 600; overflow-wrap: anywhere; color: var(--heading); }
.kb-conflict-text .ico { flex-shrink: 0; margin-top: 2px; color: var(--red); }
.kb-conflict-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-conflict-actions .confirm-box { flex: 1 1 100%; }

/* Save stays in reach however long the body is; the unsaved / leave / conflict notices live with it. */
.kb-savebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px -16px 0;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface);
}
.kb-savebar .mg-form-actions { margin-top: 0; }
.kb-unsaved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gold); }
.kb-unsaved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.kb-rev-table tbody tr { cursor: pointer; }
.kb-rev-table tbody tr:hover td,
.kb-rev-row.open td { background: var(--surface-2); }
.kb-rev-open {
  padding: 2px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
}
.kb-rev-open:hover { background: var(--surface-3); }
.kb-rev-table .col-version { white-space: nowrap; }
.kb-rev-table .col-version .you-tag { margin-left: 7px; }
.kb-rev-table :is(.col-when, .col-who) { white-space: nowrap; color: var(--text-2); }
.kb-rev-table .col-note { min-width: 180px; overflow-wrap: anywhere; }
.kb-rev-table .none { color: var(--text-3); }

.kb-rev-view {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  scroll-margin: 16px;
}
.kb-rev-view .audit-empty { padding: 20px 16px; }
.kb-rev-inner { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kb-rev-inner .mg-section-head,
.kb-rev-inner .audit-meta { margin: 0; }
.kb-rev-inner .mg-form-actions { margin-top: 0; }
.kb-rev-body { flex: none; min-height: 0; max-height: 420px; }
.kb-source {
  max-height: 340px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--code-bg);
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  scrollbar-width: thin;
}

/* ---------- escalations (admin: #/escalations inbox, one escalation) ---------- */

/* count of open + claimed escalations on the sidebar entry */
.sb-nav a { position: relative; }
.nav-count {
  min-width: 20px;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--gold);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--gold-text);
}
/* collapsed rail: the count rides on the icon's corner */
.app.collapsed .nav-count { position: absolute; top: 2px; right: 4px; min-width: 16px; padding: 0 4px; font-size: 10px; }

.esc-table tbody tr { cursor: pointer; }
.esc-table tbody tr:hover td { background: var(--surface-2); }
.esc-table tr.is-urgent td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.esc-table .col-conv { min-width: 200px; }
.esc-table .col-conv a { font-weight: 600; overflow-wrap: anywhere; }
.esc-table :is(.col-org, .col-raised, .col-claimed) { color: var(--text-2); }
.esc-table :is(.col-age, .col-status, .col-urgency) { white-space: nowrap; }
.esc-table .col-age { color: var(--text-2); font-variant-numeric: tabular-nums; }
.esc-table .you-tag { white-space: nowrap; }

.esc-head { align-items: flex-start; margin-bottom: 12px; }
.esc-head h2 { overflow-wrap: anywhere; }
.esc-head p.badge-group { display: flex; margin-top: 6px; }
.esc-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.esc-facts { margin: 0 0 16px; }
.esc-facts a { text-decoration: underline; text-underline-offset: 2px; }

/* the handoff: what the engineer reads first */
.esc-summary {
  max-width: 880px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--purple) 40%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--purple) 9%, var(--surface));
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.esc-summary.is-resolved {
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}
.esc-summary h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--purple);
}
.esc-summary.is-resolved h3 { color: var(--green); }
.esc-summary .mg-hint { margin: 0; }
.esc-resolution { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* read-only transcript: the chat thread's bubbles and turns inside a panel */
.esc-transcript {
  max-width: 880px;
  padding: 22px 20px 1px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.esc-transcript .msg { animation: none; }
.esc-transcript .audit-empty { padding: 20px 16px 40px; }

.esc-reply { max-width: 880px; }
.esc-textarea { width: 100%; min-height: 96px; line-height: 1.55; resize: vertical; }
.esc-reply .esc-textarea { min-height: 132px; }
.esc-reply .confirm-box { margin-top: 12px; }
.esc-reply .kb-counter { margin-left: auto; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .people-table :is(.col-title, .col-joined) { display: none; }
  .app.collapsed .nav-count { position: static; min-width: 20px; padding: 1px 6px; font-size: 11px; } /* slide-over: full rows again */
  .esc-table :is(.col-claimed, .col-org) { display: none; }
  .esc-table .cell-sub { display: block; margin-top: 2px; }
  .esc-actions { justify-content: flex-start; }
  .esc-actions .visit-action { align-items: flex-start; }
  .esc-textarea { font-size: 16px; }              /* 16px stops iOS zooming on focus */
  .orgs-table :is(.col-created, .col-calls) { display: none; }
  .events-table .col-org { display: none; }
  .audit-tools select.field { flex: 1; max-width: none; font-size: 16px; }
  .role-select { font-size: 16px; }
  .note-textarea { font-size: 16px; }             /* 16px stops iOS zooming on focus */

  .kb-table :is(.col-cat, .col-layer) { display: none; }
  .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-grid .span-3 { grid-column: 1 / -1; }
  .kb-tabs {
    display: inline-flex;
    gap: 4px;
    margin-top: 14px;
    padding: 3px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
  }
  .kb-body { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .kb-body[data-tab="write"] .kb-pane-preview,
  .kb-body[data-tab="preview"] .kb-pane-write { display: none; }
  .kb-pane-label { display: none; }               /* the tabs name the panes here */
  .kb-textarea { min-height: 52vh; font-size: 16px; } /* 16px stops iOS zooming on focus */
  .kb-preview { flex: 1 1 auto; min-height: 52vh; }
  .kb-rev-body { min-height: 0; }
}

@media (max-width: 560px) {
  .people-table .col-email { display: none; }
  .esc-table .col-raised { display: none; }
  .esc-table .col-conv { min-width: 150px; }
  .esc-transcript { padding: 16px 12px 1px; }
  .esc-summary { padding: 12px 13px; }
  .esc-reply .btn { flex: 1; }
  .people-table .cell-sub { display: block; }
  .staff-table .col-org { display: none; }        /* the organization joins the email under the name */
  .pw-form .modal-actions .btn { flex: 1; }
  .row-actions { flex-direction: column; align-items: stretch; }
  .role-legend > div { flex-direction: column; gap: 0; }
  .role-legend dt { flex-basis: auto; }
  .orgs-table .col-tokens { display: none; }
  .conn-grid { grid-template-columns: 1fr; }
  .modal { padding: 18px 16px 14px; }
  .note-card { padding: 12px 13px; }
  .note-edit .btn { flex: 1; }

  .kb-table :is(.col-code, .col-scope, .col-updated) { display: none; }
  .kb-table .col-title { min-width: 140px; }
  .kb-table .cell-sub { display: block; margin-top: 2px; }
  .kb-grid { grid-template-columns: minmax(0, 1fr); }
  .kb-grid :is(.span-2, .span-3) { grid-column: 1 / -1; }
  .kb-hint-row { flex-direction: column; gap: 2px; }
  .kb-savebar .btn { flex: 1; }
  .kb-rev-table .col-state { display: none; }     /* shown in the opened version */
  .kb-rev-table .col-when { white-space: normal; }
  .kb-rev-table .col-note { min-width: 120px; }
  .kb-rev-view { padding: 14px 12px; }
}