.dashboard-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 4px 0;
}

/* CRM and service desk operational runtime */
.runtime-tabs {
  display: flex;
  max-width: 100%;
  gap: 6px;
  margin: 0 0 16px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  scrollbar-width: thin;
}
.runtime-tabs a {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.runtime-tabs a[aria-current="page"] {
  background: var(--primary-700);
  color: #fff;
}
.runtime-form-card,
.runtime-table-card,
.runtime-disclosure,
.runtime-service-detail,
.runtime-conversation-grid,
.runtime-action-grid,
.runtime-detail-grid,
.runtime-relation-grid,
.runtime-contract-grid,
.runtime-report-grid,
.runtime-asset-grid,
.runtime-sla-list,
.runtime-termination-list {
  margin-bottom: 16px;
}
.runtime-form-grid,
.runtime-inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
.runtime-inline-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  padding: 16px 18px 18px;
}
.runtime-form-grid.compact {
  grid-template-columns: 1fr 1fr;
}
.runtime-form-grid label,
.runtime-inline-form label,
.runtime-stack-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.runtime-form-grid label > span,
.runtime-inline-form label > span,
.runtime-stack-form label > span,
.runtime-line-items legend,
.runtime-rating legend {
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.runtime-form-grid .wide,
.runtime-inline-form .wide {
  grid-column: 1 / -1;
}
.runtime-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.runtime-stack-form {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}
.runtime-check {
  display: flex !important;
  min-height: 44px;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 8px !important;
}
.runtime-check input {
  width: 18px;
  height: 18px;
}
.runtime-check > span {
  font-size: .75rem !important;
}
.runtime-disclosure > summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: var(--slate-900);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 800;
  list-style: none;
}
.runtime-disclosure > summary::after {
  content: "+";
  color: var(--primary-700);
  font-size: 1.2rem;
}
.runtime-disclosure[open] > summary::after { content: "−"; }
.runtime-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.runtime-table-card .data-table { min-width: 760px; }
.runtime-table-card tr.is-danger { background: var(--danger-50); }
.runtime-empty {
  display: grid;
  min-height: 120px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  color: var(--slate-500);
  text-align: center;
}
.runtime-detail-grid,
.runtime-service-detail,
.runtime-conversation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 14px;
}
.runtime-action-grid,
.runtime-relation-grid,
.runtime-contract-grid,
.runtime-report-grid,
.runtime-asset-grid,
.runtime-sla-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.runtime-contract-grid > *,
.runtime-report-grid > *,
.runtime-asset-grid > *,
.runtime-sla-list > * {
  min-width: 0;
}
.runtime-relation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.runtime-profile { padding: 20px; }
.runtime-profile-head,
.runtime-service-summary > header,
.runtime-contract-grid article > header,
.runtime-report-grid article > header,
.runtime-asset-grid article > header,
.runtime-sla-list article > header,
.runtime-termination-list article > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.runtime-profile-head {
  align-items: center;
  justify-content: flex-start;
}
.runtime-profile-head > div {
  min-width: 0;
  text-align: left;
}
.runtime-contract-grid article > header > div,
.runtime-report-grid article > header > div,
.runtime-asset-grid article > header > div,
.runtime-sla-list article > header > div {
  min-width: 0;
}
.runtime-profile-head h2,
.runtime-service-summary h2 { margin: 7px 0 2px; }
.runtime-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  flex: none;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg,var(--primary-700),var(--primary-500));
  color: #fff;
  font-weight: 800;
}
.runtime-description,
.runtime-contract-grid dl,
.runtime-report-grid dl,
.runtime-asset-grid dl,
.runtime-sla-list dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--slate-200);
}
.runtime-description > div,
.runtime-contract-grid dl > div,
.runtime-report-grid dl > div,
.runtime-asset-grid dl > div,
.runtime-sla-list dl > div {
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface-raised);
}
.runtime-description dt,
.runtime-contract-grid dt,
.runtime-report-grid dt,
.runtime-asset-grid dt,
.runtime-sla-list dt {
  text-align: left;
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 700;
}
.runtime-description dd,
.runtime-contract-grid dd,
.runtime-report-grid dd,
.runtime-asset-grid dd,
.runtime-sla-list dd {
  margin: 3px 0 0;
  text-align: left;
  overflow-wrap: anywhere;
  color: var(--slate-900);
  font-size: .76rem;
  font-weight: 700;
}
.runtime-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 16px 12px;
  list-style: none;
}
.runtime-list li {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--slate-150);
}
.runtime-list li > span:first-child {
  display: grid;
  min-width: 0;
  justify-items: start;
  text-align: left;
  overflow-wrap: anywhere;
}
.runtime-list small { color: var(--slate-500); }
.runtime-chip,
.runtime-priority {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--radius-round);
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 800;
}
.runtime-priority.is-urgent { background: var(--danger-50); color: var(--danger-700); }
.runtime-priority.is-high { background: var(--warning-50); color: var(--warning-700); }
.runtime-priority.is-normal { background: var(--primary-50); color: var(--primary-700); }
.runtime-priority.is-low { background: var(--slate-100); color: var(--slate-600); }
.runtime-board {
  display: grid;
  max-width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 12px;
  padding-bottom: 10px;
  overflow-x: auto;
}
.runtime-board > article {
  min-height: 440px;
  padding: 10px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-100);
}
.runtime-board > article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 3px 11px;
}
.runtime-board > article > header span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface-raised);
  font-size: 0.75rem;
  font-weight: 800;
}
.runtime-board > article > div { display: grid; gap: 8px; }
.runtime-board-card {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  color: var(--slate-800);
}
.runtime-board-card.is-danger { border-color: var(--danger-300); }
.runtime-board-card small,
.runtime-board-card time { color: var(--slate-500); font-size: 0.75rem; }
.runtime-board-card progress { width: 100%; height: 6px; accent-color: var(--primary-600); }
.runtime-row-form {
  display: flex;
  min-width: 300px;
  align-items: center;
  gap: 6px;
}
.runtime-row-form input,
.runtime-row-form select { min-width: 90px; }
.runtime-row-form .button { min-height: 44px; padding: 7px 10px; }
.runtime-line-items { display: grid; gap: 8px; }
.runtime-line-items > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 90px 130px 90px;
  gap: 7px;
}
.runtime-timeline {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 18px;
}
.runtime-timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  background: var(--slate-200);
  content: "";
}
.runtime-timeline article { position: relative; padding: 16px; }
.runtime-timeline-dot { position: absolute; left: -21px; top: 18px; color: var(--primary-600); background: var(--slate-50); }
.runtime-timeline-dot .ci-icon { width: 16px; height: 16px; fill: var(--primary-600); }
.runtime-timeline time { color: var(--slate-500); font-size: 0.75rem; }
.runtime-timeline h3 { margin: 3px 0; }
.runtime-contract-grid article,
.runtime-report-grid article,
.runtime-asset-grid article,
.runtime-sla-list article,
.runtime-termination-list article,
.runtime-service-summary,
.runtime-service-actions { padding: 16px; }
.runtime-contract-grid article h3,
.runtime-report-grid article h3,
.runtime-asset-grid article h3,
.runtime-sla-list article h3 {
  margin: 6px 0 2px;
  overflow-wrap: anywhere;
}
.runtime-contract-grid article p,
.runtime-report-grid article p,
.runtime-asset-grid article p,
.runtime-sla-list article p {
  overflow-wrap: anywhere;
}
.runtime-contract-grid article > header > strong,
.runtime-report-grid article > header > strong { white-space: nowrap; font-size: 1rem; }
.runtime-sla-list article.is-danger { border-color: var(--danger-300); background: var(--danger-50); }
.runtime-rich-text {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  color: var(--slate-700);
  overflow-wrap: anywhere;
}
.runtime-message-list {
  display: grid;
  max-height: 460px;
  gap: 9px;
  padding: 0 16px 12px;
  overflow-y: auto;
}
.runtime-message-list > div {
  padding: 11px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--slate-50);
}
.runtime-message-list header { display: flex; justify-content: space-between; gap: 8px; }
.runtime-message-list time { color: var(--slate-500); font-size: 0.75rem; }
.runtime-message-list p { margin: 5px 0 0; overflow-wrap: anywhere; font-size: .75rem; }
.runtime-message-form { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--slate-200); }
.runtime-internal-panel { border-color: var(--warning-300); }
.runtime-checklist-form {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr)) 130px minmax(160px,1fr) auto;
  gap: 8px;
  margin-top: 14px;
}
.runtime-checklist-form label { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; }
.runtime-rating { display: flex; gap: 8px; }
.runtime-rating legend { margin-bottom: 7px; }
.runtime-rating input { position: absolute; opacity: 0; }
.runtime-rating span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--slate-200); border-radius: var(--radius-round); cursor: pointer; font-weight: 800; }
.runtime-rating input:checked + span { border-color: var(--primary-600); background: var(--primary-600); color: var(--on-primary); }
@media (max-width: 1100px) {
  .runtime-action-grid,
  .runtime-contract-grid,
  .runtime-report-grid,
  .runtime-asset-grid,
  .runtime-sla-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .runtime-inline-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .runtime-checklist-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .runtime-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .runtime-detail-grid,
  .runtime-service-detail,
  .runtime-conversation-grid,
  .runtime-action-grid,
  .runtime-relation-grid,
  .runtime-contract-grid,
  .runtime-report-grid,
  .runtime-asset-grid,
  .runtime-sla-list,
  .runtime-form-grid,
  .runtime-form-grid.compact,
  .runtime-inline-form { grid-template-columns: minmax(0,1fr); }
  .runtime-form-grid .wide,
  .runtime-inline-form .wide { grid-column: auto; }
  .runtime-line-items > div { grid-template-columns: minmax(0,1fr) 72px 100px; }
  .runtime-line-items > div input:last-child { grid-column: 1/-1; }
  .runtime-checklist-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .runtime-checklist-form .button,
  .runtime-checklist-form > input:last-of-type { grid-column: 1/-1; width: 100%; }
  .runtime-profile-head,
  .runtime-service-summary > header,
  .runtime-termination-list article > header { align-items: flex-start; flex-direction: column; }
  .runtime-description { grid-template-columns: minmax(0,1fr); }
  .runtime-row-form { min-width: 620px; }
  .runtime-table-card .data-table {
    display: table;
    width: 760px;
    min-width: 760px;
  }
  .runtime-table-card .data-table thead { display: table-header-group; }
  .runtime-table-card .data-table tbody { display: table-row-group; }
  .runtime-table-card .data-table tr {
    display: table-row;
    padding: 0;
  }
  .runtime-table-card .data-table th,
  .runtime-table-card .data-table td {
    display: table-cell;
    width: auto;
    min-height: 0;
    padding: 11px 13px;
    text-align: left;
    white-space: nowrap;
  }
  .runtime-table-card .data-table td::before { display: none; }
}
.dashboard-welcome h1 {
  margin: 0;
  color: var(--slate-900);
}
.dashboard-welcome p {
  margin: 6px 0 0;
  font-size: 0.82rem;
}
.dashboard-welcome__actions {
  display: flex;
  gap: 8px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 14px;
}
.dashboard-grid > * {
  order: var(--dashboard-order, 0);
}
.dashboard-grid__main {
  grid-row: span 2;
}
.dashboard-grid__wide {
  grid-column: 1/-1;
}
.priority-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.priority-list li {
  display: grid;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--slate-150);
}
.priority-list li:last-child {
  border: 0;
}
.task-check,
.task-open {
  display: grid;
  width: 28px;
  height: 44px;
  place-items: center;
}
.task-open {
  color: var(--primary-700);
}
.priority-list a {
  color: var(--slate-900);
}
.priority-list strong {
  font-size: 0.77rem;
}
.priority-list p {
  margin: 1px 0 0;
  font-size: 0.75rem;
}
.priority-list time {
  color: var(--slate-500);
  font-size: 0.75rem;
  white-space: nowrap;
}
.mini-agenda {
  display: grid;
  gap: 3px;
}
.mini-agenda article {
  display: grid;
  min-height: 54px;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  border-bottom: 1px solid var(--slate-150);
}
.mini-agenda article:last-child {
  border: 0;
}
.mini-agenda time {
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.mini-agenda strong {
  font-size: 0.75rem;
}
.mini-agenda p {
  margin: 1px 0 0;
  font-size: 0.75rem;
}
.mini-agenda__empty {
  display: grid;
  min-height: 140px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--slate-400);
}
.mini-agenda__empty p {
  margin: 0;
  font-size: 0.75rem;
}
.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.quick-links a {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--slate-150);
  border-radius: 8px;
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.quick-links a:hover {
  border-color: var(--primary-200);
  background: var(--primary-50);
  color: var(--primary-800);
}
.quick-links .ci-icon {
  width: 18px;
  color: var(--primary-700);
}
.dashboard-briefing {
  display: grid;
  position: relative;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.2fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--primary-50), #fff 58%);
}
.dashboard-briefing h2 {
  margin: 3px 0 2px;
  color: var(--slate-900);
  font-size: 0.92rem;
}
.dashboard-briefing p {
  margin: 0;
  font-size: 0.75rem;
}
.dashboard-briefing > nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.dashboard-briefing > nav a {
  display: grid;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.78);
  color: var(--slate-600);
}
.dashboard-briefing > nav a:hover {
  border-color: var(--primary-300);
  color: var(--primary-700);
}
.dashboard-briefing > nav strong {
  color: var(--slate-900);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.dashboard-briefing > nav span {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-widget-settings {
  position: relative;
}
.dashboard-widget-settings > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.dashboard-widget-settings > summary .ci-icon {
  width: 15px;
}
.dashboard-widget-settings[open] > div {
  display: grid;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: min(420px, calc(100vw - 40px));
  max-height: 420px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.dashboard-widget-settings form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-bottom: 1px solid var(--slate-100);
}
.dashboard-widget-settings form:last-child {
  border-bottom: 0;
}
.dashboard-widget-settings form label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}
.dashboard-widget-settings form label:nth-of-type(2) {
  justify-content: space-between;
}
.dashboard-widget-settings input[type="number"] {
  width: 58px;
  min-height: 44px;
  padding: 4px 6px;
}
.dashboard-personal {
  min-width: 0;
}
.personal-quick-form {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 90px auto;
  gap: 7px;
  margin-bottom: 10px;
}
.personal-quick-form select,
.personal-quick-form input {
  min-height: 44px;
}
.personal-item-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.personal-item-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  border-top: 1px solid var(--slate-150);
}
.personal-item-list > li > form {
  padding-top: 8px;
}
.personal-item-list > li > details {
  min-width: 0;
}
.personal-item-list summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.personal-item-list summary > span {
  display: grid;
  min-width: 0;
}
.personal-item-list summary strong {
  overflow: hidden;
  color: var(--slate-800);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-item-list summary small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.personal-item-list summary > .ci-icon {
  width: 14px;
  color: var(--slate-400);
}
.personal-item-list li.is-completed summary strong {
  color: var(--slate-400);
  text-decoration: line-through;
}
.personal-check {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--slate-200);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--success-700);
}
.personal-check .ci-icon {
  width: 14px;
}
.personal-edit-form {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-sm);
  background: var(--slate-25);
}
.personal-edit-form > label {
  display: grid;
  gap: 4px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.personal-edit-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.personal-edit-form > div label {
  display: grid;
  gap: 4px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.personal-edit-form .button {
  justify-self: start;
}
.personal-rollover {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--slate-150);
}
.personal-rollover label {
  display: grid;
  gap: 3px;
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 700;
}
.personal-rollover input {
  min-height: 44px;
  padding: 4px 7px;
}
@media (max-width: 1050px) {
  .dashboard-briefing {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dashboard-briefing > nav {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .dashboard-widget-settings {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 720px) {
  .dashboard-briefing {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 14px;
  }
  .dashboard-briefing > nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .personal-quick-form {
    grid-template-columns: 1fr 1fr;
  }
  .personal-quick-form__title {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .personal-quick-form .button {
    width: 100%;
  }
  .personal-edit-form > div {
    grid-template-columns: 1fr;
  }
}

/* Human resources runtime (HR-02–HR-21) */
.hr-runtime {
  display: grid;
  min-width: 0;
  gap: 24px;
  padding-bottom: 48px;
}
.hr-runtime__header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 28px;
  border: 1px solid color-mix(in srgb, var(--primary-200) 60%, var(--slate-200));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--primary-100) 55%, transparent), transparent 33%),
    linear-gradient(135deg, var(--surface, #fff), color-mix(in srgb, var(--primary-50) 38%, #fff));
  box-shadow: 0 16px 40px rgb(15 23 42 / 5%);
}
.hr-runtime__header > div {
  min-width: 0;
}
.hr-runtime__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hr-runtime__header h1,
.hr-panel h2,
.hr-create summary,
.hr-work-card h3 {
  margin: 0;
  color: var(--ink-strong);
  letter-spacing: -0.03em;
}
.hr-runtime__header h1 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.18;
}
.hr-runtime__header p,
.hr-panel__heading p {
  margin: 7px 0 0;
  color: var(--slate-600);
  font-size: 0.78rem;
  line-height: 1.65;
}
.hr-runtime__tabs {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface, #fff);
  scrollbar-width: thin;
}
.hr-runtime__tabs a {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
}
.hr-runtime__tabs a:hover,
.hr-runtime__tabs a[aria-current="page"] {
  background: var(--primary-50);
  color: var(--primary-800);
}
.hr-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hr-metric {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 17px 18px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px rgb(15 23 42 / 4%);
}
.hr-metric::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--slate-300);
  content: "";
}
.hr-metric--primary::before { background: var(--primary-500); }
.hr-metric--success::before { background: var(--success-500, #22a06b); }
.hr-metric--warning::before { background: var(--warning-500, #e79009); }
.hr-metric--danger::before { background: var(--danger-500, #d92d20); }
.hr-metric span {
  display: block;
  overflow: hidden;
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-metric strong {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 1.28rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-panel,
.hr-create {
  min-width: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--surface, #fff);
  box-shadow: 0 10px 30px rgb(15 23 42 / 4%);
}
.hr-panel {
  overflow: hidden;
}
.hr-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px;
}
.hr-section-head h2 { margin: 3px 0 0; font-size: 1.35rem; }
.hr-filter-panel {
  padding: 18px 20px;
  overflow: visible;
}
.hr-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.hr-panel__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--slate-100);
}
.hr-panel__heading > div {
  min-width: 0;
}
.hr-panel h2 {
  font-size: 1rem;
}
.hr-search {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
}
.hr-search--employees { grid-template-columns: minmax(260px, 1.5fr) minmax(150px, 0.55fr) auto; }
.hr-search--single { grid-template-columns: minmax(260px, 1fr) auto; }
.hr-search input {
  min-width: 0;
  flex: 1;
}
.hr-search label {
  display: grid;
  min-width: 0;
  flex: 1 1 160px;
  gap: 5px;
}
.hr-search label > span {
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 760;
}
.hr-search select {
  min-height: 44px;
  min-width: 120px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
}
.hr-search .button { align-self: end; }
.hr-export-action { display: flex; align-items: end; }
.hr-issued-account {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
  gap: 22px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--primary-600) 42%, var(--border-subtle));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary-50) 70%, var(--surface-raised));
  box-shadow: var(--shadow-xs);
}
.hr-issued-account h2 { margin: 4px 0; font-size: 1.2rem; }
.hr-issued-account p { margin: 0; color: var(--ink-muted); font-size: 0.82rem; }
.hr-issued-account__credentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hr-issued-account__credentials > label,
.hr-employee-form > label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 760;
}
.hr-copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hr-copy-field input { min-width: 0; font-weight: 760; }
.hr-employee-dialog { width: min(760px, calc(100vw - 32px)); }
.hr-employee-dialog > form { display: grid; gap: 18px; padding: 20px; }
.hr-employee-dialog header,
.hr-employee-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hr-employee-dialog footer { justify-content: flex-end; }
.hr-employee-dialog h2 { margin: 3px 0 0; }
.hr-employee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hr-account-preview {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 0.82rem;
}
.hr-account-preview strong { color: var(--ink-strong); }
.hr-account-preview small { font-size: 0.75rem; line-height: 1.45; }
.hr-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.hr-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.hr-table th,
.hr-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--slate-100);
  text-align: left;
  vertical-align: middle;
}
.hr-table th {
  background: var(--slate-25, #fafbfc);
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 830;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hr-table tbody tr:last-child td { border-bottom: 0; }
.hr-table tbody tr:hover { background: var(--primary-25, #f8faff); }
.hr-table a {
  color: var(--primary-700);
  font-weight: 760;
  text-decoration: none;
}
.hr-table td strong,
.hr-table td small { display: block; }
.hr-table td small { margin-top: 4px; color: var(--ink-muted); line-height: 1.45; }
.hr-empty {
  padding: 42px 24px;
  color: var(--slate-500);
  text-align: center;
}
.hr-profile {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}
.hr-profile__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--slate-25, #fafbfc);
}
.hr-profile__avatar,
.hr-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 18px;
  background: var(--primary-100);
  color: var(--primary-800);
  font-size: 1.1rem;
  font-weight: 900;
}
.hr-profile__identity strong,
.hr-profile__identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-profile__identity strong { color: var(--ink-strong); }
.hr-profile__identity small { margin-top: 4px; color: var(--slate-500); }
.hr-profile__identity h2 {
  margin: 8px 0 0;
  color: var(--ink-strong);
  font-size: 1.05rem;
}
.hr-profile__identity p {
  margin: 5px 0 0;
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1.5;
}
.hr-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--border-subtle);
}
.hr-definition-grid div { min-width: 0; padding: 13px 15px; background: var(--surface-raised); }
.hr-definition-grid dt {
  margin-bottom: 4px;
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 760;
}
.hr-definition-grid dd {
  margin: 0;
  color: var(--slate-800);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.hr-columns,
.hr-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hr-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-create {
  overflow: clip;
}
.hr-create > summary {
  position: relative;
  padding: 17px 46px 17px 20px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 820;
  list-style: none;
}
.hr-create > summary::-webkit-details-marker { display: none; }
.hr-create > summary::after {
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--slate-400);
  content: "+";
  font-size: 1.2rem;
  transform: translateY(-52%);
}
.hr-create[open] > summary {
  border-bottom: 1px solid var(--slate-100);
  background: var(--slate-25, #fafbfc);
}
.hr-create[open] > summary::after { content: "−"; }
.hr-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.hr-form--single { grid-template-columns: 1fr; }
.hr-form label,
.hr-form fieldset {
  min-width: 0;
}
.hr-form label > span,
.hr-form legend {
  display: block;
  margin-bottom: 6px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 780;
}
.hr-form input:not([type="checkbox"]):not([type="radio"]),
.hr-form select,
.hr-form textarea,
.hr-search input,
.hr-inline-review input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
}
.hr-form input:not([type="checkbox"]):not([type="radio"]),
.hr-form select,
.hr-search input,
.hr-inline-review input {
  min-height: 44px;
  padding: 8px 10px;
}
.hr-form textarea { min-height: 82px; padding: 10px; resize: vertical; }
.hr-form input:focus,
.hr-form select:focus,
.hr-form textarea:focus,
.hr-search input:focus,
.hr-inline-review input:focus {
  border-color: var(--primary-500);
  outline: 3px solid color-mix(in srgb, var(--primary-200) 55%, transparent);
}
.hr-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
}
.hr-form fieldset legend { padding: 0 5px; }
.hr-form__wide,
.hr-form > fieldset,
.hr-form > .button {
  grid-column: 1/-1;
}
.hr-form > .button { justify-self: start; }
.hr-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.hr-check {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}
.hr-check > span { margin: 0 !important; }
.hr-check input { accent-color: var(--primary-600); }
.hr-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.hr-card-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-work-card,
.hr-day-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface, #fff);
}
.hr-work-card header,
.hr-day-card header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.hr-work-card h3 {
  margin-top: 13px;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.hr-work-card > p,
.hr-day-card > p {
  margin: 8px 0 0;
  color: var(--slate-600);
  font-size: 0.75rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.hr-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-round);
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.hr-status--active,
.hr-status--approved,
.hr-status--completed,
.hr-status--fulfilled,
.hr-status--verified,
.hr-status--hired,
.hr-status--acknowledged { background: #e9f8f0; color: #087443; }
.hr-status--submitted,
.hr-status--in_progress,
.hr-status--screening,
.hr-status--interview,
.hr-status--offer,
.hr-status--published { background: var(--primary-50); color: var(--primary-800); }
.hr-status--scheduled,
.hr-status--pending,
.hr-status--draft,
.hr-status--warning,
.hr-status--applied { background: #fff6df; color: #9a5b00; }
.hr-status--rejected,
.hr-status--cancelled,
.hr-status--revoked,
.hr-status--inactive { background: #fff0ef; color: #b42318; }
.hr-timeline,
.hr-record-list,
.hr-balance-list,
.hr-calendar-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hr-timeline li,
.hr-record-list li,
.hr-balance-list li,
.hr-calendar-list li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--slate-100);
}
.hr-timeline li:last-child,
.hr-record-list li:last-child,
.hr-balance-list li:last-child,
.hr-calendar-list li:last-child { border-bottom: 0; }
.hr-timeline li > div,
.hr-record-list li > div,
.hr-balance-list li > div,
.hr-calendar-list li > div {
  min-width: 0;
  flex: 1;
}
.hr-timeline strong,
.hr-record-list strong,
.hr-balance-list strong,
.hr-calendar-list strong,
.hr-timeline small,
.hr-record-list small,
.hr-balance-list small,
.hr-calendar-list small {
  display: block;
  overflow-wrap: anywhere;
}
.hr-timeline strong,
.hr-record-list strong,
.hr-balance-list strong,
.hr-calendar-list strong {
  color: var(--slate-800);
  font-size: 0.75rem;
}
.hr-timeline small,
.hr-record-list small,
.hr-balance-list small,
.hr-calendar-list small {
  margin-top: 4px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.hr-inline-actions,
.hr-inline-review,
.hr-clock-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.hr-inline-review { flex: 0 1 520px; }
.hr-inline-review input { flex: 1 1 100px; width: auto; }
.hr-clock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 24px;
}
.hr-clock__status strong,
.hr-clock__status span {
  display: block;
}
.hr-clock__status strong { color: var(--ink-strong); font-size: 1.1rem; }
.hr-clock__status span { margin-top: 6px; color: var(--slate-500); font-size: 0.75rem; }
.hr-clock__date {
  display: block;
  margin-bottom: 7px;
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 820;
}
.hr-clock h2 { margin: 0; color: var(--ink-strong); font-size: 1.15rem; }
.hr-clock p { margin: 7px 0 0; color: var(--slate-500); font-size: 0.75rem; }
.hr-clock__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.hr-clock__done {
  color: #087443;
  font-size: 0.75rem;
  font-weight: 790;
}
.hr-day-card time {
  display: block;
  margin-top: 10px;
  color: var(--ink-strong);
  font-size: 0.82rem;
  font-weight: 820;
}
.hr-day-card strong,
.hr-day-card small {
  display: block;
}
.hr-day-card strong {
  margin-top: 9px;
  color: var(--ink-strong);
  font-size: 0.84rem;
}
.hr-day-card small {
  margin-top: 5px;
  color: var(--slate-500);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.hr-balance-list--wide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.hr-balance-list--wide article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface, #fff);
}
.hr-balance-list--wide span,
.hr-balance-list--wide strong,
.hr-balance-list--wide small {
  display: block;
  overflow-wrap: anywhere;
}
.hr-balance-list--wide span { color: var(--slate-500); font-size: 0.75rem; font-weight: 760; }
.hr-balance-list--wide strong { margin-top: 8px; color: var(--ink-strong); font-size: 1.05rem; }
.hr-balance-list--wide small { margin-top: 7px; color: var(--slate-500); font-size: 0.75rem; line-height: 1.55; }
.hr-card-action {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-100);
}
.hr-card-action > summary {
  cursor: pointer;
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 790;
}
.hr-card-action .hr-form { padding: 14px 0 0; }
.hr-card-action .hr-inline-review { margin-top: 12px; justify-content: flex-start; }

@media (max-width: 1100px) {
  .hr-metrics,
  .hr-card-grid,
  .hr-card-grid--compact,
  .hr-balance-list--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-action-grid { grid-template-columns: 1fr; }
  .hr-action-grid .hr-create { max-width: none; }
}
@media (max-width: 760px) {
  .hr-runtime { gap: 16px; }
  .hr-runtime__header,
  .hr-panel__heading,
  .hr-profile,
  .hr-clock {
    grid-template-columns: 1fr;
  }
  .hr-runtime__header,
  .hr-panel__heading {
    display: grid;
    padding: 20px;
  }
  .hr-search { width: 100%; min-width: 0; }
  .hr-filter-bar,
  .hr-issued-account { grid-template-columns: 1fr; }
  .hr-export-action .button { width: 100%; }
  .hr-profile { padding: 18px; gap: 18px; }
  .hr-columns,
  .hr-form { grid-template-columns: 1fr; }
  .hr-form__wide,
  .hr-form > fieldset,
  .hr-form > .button { grid-column: auto; }
  .hr-clock { justify-items: start; }
  .hr-clock-actions,
  .hr-clock__actions { justify-content: flex-start; }
  .hr-record-list li,
  .hr-timeline li,
  .hr-balance-list li,
  .hr-calendar-list li {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .hr-record-list li > div,
  .hr-timeline li > div,
  .hr-balance-list li > div,
  .hr-calendar-list li > div { flex-basis: calc(100% - 100px); }
  .hr-inline-actions,
  .hr-inline-review {
    width: 100%;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 520px) {
  .hr-runtime__header { padding: 18px; }
  .hr-metrics,
  .hr-card-grid,
  .hr-card-grid--compact,
  .hr-balance-list--wide,
  .hr-definition-grid,
  .hr-field-pair { grid-template-columns: 1fr; }
  .hr-card-grid { padding: 14px; }
  .hr-profile__identity { align-items: flex-start; }
  .hr-search,
  .hr-search--employees,
  .hr-search--single,
  .hr-employee-form,
  .hr-issued-account__credentials { grid-template-columns: 1fr; }
  .hr-section-head { align-items: stretch; flex-direction: column; }
  .hr-section-head .button { width: 100%; }
  .hr-copy-field { grid-template-columns: 1fr; }
  .hr-account-preview { grid-template-columns: auto 1fr; }
  .hr-account-preview strong,
  .hr-account-preview small { grid-column: 2; }
  .hr-employee-dialog > form { padding: 18px; }
  .hr-form { padding: 16px; }
  .hr-record-list li,
  .hr-timeline li,
  .hr-balance-list li,
  .hr-calendar-list li { padding: 13px 15px; }
  .hr-record-list li > div,
  .hr-timeline li > div,
  .hr-balance-list li > div,
  .hr-calendar-list li > div { flex-basis: 100%; }
  .hr-table th,
  .hr-table td { padding: 11px 13px; }
}
.chart-placeholder {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  gap: 42px;
}
.donut-chart {
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--success-500) 0 var(--donut-value, 0%), var(--slate-150) var(--donut-value, 0%));
  box-shadow: inset 0 0 0 25px #fff;
}
.donut-chart > span {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.donut-chart strong {
  font-size: 1.5rem;
}
.donut-chart small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.chart-legend {
  display: grid;
  gap: 10px;
}
.chart-legend span {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--slate-600);
  font-size: 0.75rem;
}
.chart-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.legend-success {
  background: var(--success-500);
}
.legend-primary {
  background: var(--primary-500);
}
.legend-danger {
  background: var(--danger-500);
}
.legend-warning {
  background: var(--warning-500);
}
.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.segmented-tabs {
  width: max-content;
  margin-bottom: 12px;
}
.hero-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.hero-search > .ci-icon {
  position: absolute;
  left: 28px;
  color: var(--slate-400);
}
.hero-search input {
  height: 54px;
  padding-left: 43px;
  font-size: 1rem;
}
.search-type-tabs {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--slate-200);
}
.search-type-tabs button,
.search-type-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.search-type-tabs [aria-selected="true"],
.search-type-tabs [aria-current="page"] {
  border-color: var(--primary-600);
  color: var(--primary-700);
}
.search-insights {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  background: var(--primary-50);
}
.search-insights > header {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.search-insights > header > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--primary-700);
}
.search-insights > header .ci-icon {
  width: 16px;
}
.search-insights h2 {
  margin: 0;
  color: var(--slate-900);
  font-size: 0.8rem;
}
.search-insights header p {
  margin: 2px 0 0;
  font-size: 0.75rem;
}
.search-insights > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.search-insights > div > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--slate-700);
}
.search-insights > div > a:hover {
  border-color: var(--primary-300);
}
.search-insights > div > a > span {
  display: grid;
}
.search-insights > div strong {
  color: var(--primary-800);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.search-insights > div small {
  font-size: 0.75rem;
  white-space: nowrap;
}
.search-insights > div p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}
.search-insights > div .ci-icon {
  width: 15px;
}
@media (max-width: 720px) {
  .search-insights > div {
    grid-template-columns: 1fr;
  }
}
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 14px;
}
.detail-main {
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}
.object-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 21px;
  border-bottom: 1px solid var(--slate-200);
}
.object-header__title {
  display: flex;
  gap: 13px;
}
.object-header h2 {
  margin: 2px 0 7px;
  color: var(--slate-900);
  font-size: 1.25rem;
}
.object-meta {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.object-meta > span:not(.status-badge) {
  display: flex;
  align-items: center;
  gap: 4px;
}
.object-meta .ci-icon {
  width: 14px;
}
.object-actions {
  display: flex;
}
.detail-tabs {
  display: flex;
  gap: 4px;
  padding: 0 19px;
  border-bottom: 1px solid var(--slate-200);
}
.detail-tabs button {
  min-height: 48px;
  padding: 8px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.detail-tabs button[aria-selected="true"] {
  border-color: var(--primary-600);
  color: var(--primary-700);
}
.detail-tab-panel {
  padding: 22px;
}
.detail-tab-panel[hidden] {
  display: none;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.section-heading h3 {
  margin: 0;
}
.description-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--slate-150);
  border-left: 1px solid var(--slate-150);
}
.description-grid > div {
  display: grid;
  min-height: 58px;
  grid-template-columns: 115px minmax(0, 1fr);
  align-items: center;
  border-right: 1px solid var(--slate-150);
  border-bottom: 1px solid var(--slate-150);
}
.description-grid dt {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--slate-50);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.description-grid dd {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  color: var(--slate-800);
  font-size: 0.75rem;
}
.detail-description {
  margin-top: 22px;
}
.detail-description h3 {
  margin-bottom: 8px;
}
.detail-description p {
  margin: 0;
  padding: 15px;
  border-radius: 8px;
  background: var(--slate-50);
  font-size: 0.78rem;
  line-height: 1.75;
}
.detail-aside {
  display: grid;
  gap: 12px;
}
.detail-aside .panel {
  padding: 15px;
}
.assignee-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
.assignee-card div {
  display: flex;
  flex-direction: column;
}
.assignee-card strong {
  font-size: 0.76rem;
}
.assignee-card p {
  margin: 1px 0 0;
  font-size: 0.75rem;
}
.compact-description {
  display: grid;
  gap: 0;
  margin: 0;
}
.compact-description div {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--slate-150);
}
.compact-description div:last-child {
  border: 0;
}
.compact-description dt {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.compact-description dd {
  margin: 0;
  color: var(--slate-800);
  font-size: 0.75rem;
  font-weight: 700;
}
.comment-panel textarea {
  font-size: 0.75rem;
}
.comment-panel form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
}
.comment-panel .button {
  min-height: 44px;
  font-size: 0.75rem;
}
.activity-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-timeline li {
  position: relative;
  display: flex;
  gap: 11px;
  padding-bottom: 18px;
}
.activity-timeline li::before {
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 15px;
  width: 1px;
  background: var(--slate-200);
  content: "";
}
.activity-timeline li:last-child::before {
  display: none;
}
.timeline-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary-800);
  font-size: 0.75rem;
  font-weight: 800;
}
.activity-timeline p {
  margin: 3px 0;
  color: var(--slate-700);
  font-size: 0.75rem;
}
.activity-timeline time {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.board-toolbar,
.calendar-toolbar,
.timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.board-toolbar > div,
.calendar-toolbar > div,
.timeline-toolbar > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.board-filter,
.timeline-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 0.7fr)) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
}
.board-filter label,
.timeline-filter label {
  display: grid;
  gap: 5px;
}
.board-filter label > span,
.timeline-filter label > span {
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.board-filter > div {
  display: flex;
  gap: 6px;
}
.kanban {
  display: grid;
  grid-auto-columns: minmax(275px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.kanban-column {
  min-width: 275px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-100);
}
.kanban-column > header {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
}
.kanban-column > header > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.kanban-column h2 {
  margin: 0;
  font-size: 0.79rem;
}
.kanban-column .icon-button {
  width: 44px;
  height: 44px;
}
.kanban-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--slate-400);
}
.kanban-dot-progress {
  background: var(--primary-500);
}
.kanban-dot-review {
  background: var(--warning-500);
}
.kanban-dot-done {
  background: var(--success-500);
}
.kanban-count {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface-raised);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.kanban-list {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 350px;
  padding: 0 7px 7px;
}
.kanban-card {
  position: relative;
  padding: 11px;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  cursor: grab;
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card.is-dragging {
  opacity: 0.55;
}
.kanban-card__top,
.kanban-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kanban-card__top .icon-button {
  width: 44px;
  height: 44px;
}
.kanban-card h3 {
  margin: 6px 0 3px;
  color: var(--slate-900);
  font-size: 0.77rem;
}
.kanban-card > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--slate-500);
  font-size: 0.75rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.kanban-card__labels {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.kanban-card__labels span {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 0.75rem;
}
.kanban-card footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--slate-150);
  color: var(--slate-500);
  font-size: 0.75rem;
}
.kanban-card footer > span:not(.avatar) {
  display: flex;
  align-items: center;
  gap: 3px;
}
.kanban-card footer .ci-icon {
  width: 12px;
}
.kanban-card__keyboard {
  position: absolute;
  right: 5px;
  bottom: 4px;
  display: none;
  gap: 2px;
}
.kanban-card:focus-within .kanban-card__keyboard {
  display: flex;
}
.kanban-card__keyboard button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: var(--surface-raised);
}
.kanban-empty {
  display: grid;
  min-height: 100px;
  place-items: center;
  border: 1px dashed var(--slate-300);
  border-radius: 8px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.date-navigation {
  display: flex;
  align-items: center;
  gap: 5px;
}
.date-navigation h2,
.date-navigation strong {
  margin: 0 7px;
  font-size: 0.88rem;
}
.calendar-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.calendar-sidebar {
  padding: 16px;
  border-right: 1px solid var(--slate-200);
}
.calendar-sidebar section + section {
  margin-top: 24px;
}
.calendar-sidebar h3 {
  margin-bottom: 8px;
  color: var(--slate-600);
  font-size: 0.75rem;
  text-transform: uppercase;
}
.calendar-sidebar label,
.calendar-sidebar button,
.calendar-sidebar a {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--slate-700);
  font-size: 0.75rem;
  text-align: left;
}
.calendar-sidebar a:hover,
.calendar-sidebar a.is-active {
  border-radius: 6px;
  background: var(--primary-50);
  color: var(--primary-800);
}
.calendar-sidebar label input {
  width: 15px;
  height: 15px;
}
.calendar-color {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.color-primary {
  background: var(--primary-500);
}
.color-success {
  background: var(--success-500);
}
.color-warning {
  background: var(--warning-500);
}
.color-purple {
  background: var(--purple-500);
}
.calendar-weekdays {
  display: grid;
  height: 38px;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--slate-200);
  background: var(--slate-50);
}
.calendar-weekdays span {
  display: grid;
  place-items: center;
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 700;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  grid-template-rows: repeat(6, minmax(100px, 1fr));
}
.calendar-day {
  min-width: 0;
  padding: 6px;
  border-right: 1px solid var(--slate-150);
  border-bottom: 1px solid var(--slate-150);
  background: var(--surface-raised);
}
.calendar-day:nth-child(7n) {
  border-right: 0;
}
.calendar-day > time,
.calendar-date-link time {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 50%;
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.calendar-date-link {
  display: inline-flex;
  border-radius: 50%;
}
.calendar-day.is-outside {
  background: var(--slate-25);
}
.calendar-day.is-outside > time {
  color: var(--slate-300);
}
.calendar-day.is-today > time {
  background: var(--primary-600);
  color: var(--on-primary);
}
.calendar-events {
  display: grid;
  gap: 2px;
}
.calendar-events a {
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-left: 2px solid var(--primary-500);
  border-radius: 3px;
  background: var(--primary-50);
  color: var(--primary-900);
  font-size: 0.75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-events a span {
  font-weight: 400;
}
.calendar-events .event-success {
  border-color: var(--success-500);
  background: var(--success-50);
  color: var(--success-700);
}
.calendar-events .event-warning {
  border-color: var(--warning-500);
  background: var(--warning-50);
  color: var(--warning-700);
}
.calendar-events button {
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.calendar-period-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  overflow-x: auto;
}
.calendar-period-day {
  min-height: 480px;
  padding: 10px;
  border-right: 1px solid var(--slate-150);
  background: var(--surface-raised);
}
.calendar-period-day:last-child {
  border-right: 0;
}
.calendar-period-day > header a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--slate-150);
  color: var(--slate-700);
  font-size: 0.75rem;
}
.calendar-period-day.is-today > header a {
  color: var(--primary-700);
}
.calendar-agenda {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 520px;
  padding: 18px;
  background: var(--slate-25);
}
.calendar-agenda > article {
  padding: 14px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.calendar-agenda > article > header {
  margin-bottom: 8px;
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 800;
}
.calendar-agenda-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-800);
}
.calendar-period-day .calendar-agenda-item {
  grid-template-columns: 38px minmax(0, 1fr);
  margin-bottom: 5px;
  border: 1px solid var(--primary-100);
  border-radius: 6px;
  background: var(--primary-50);
}
.calendar-agenda-item > time {
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.calendar-agenda-item > span {
  display: grid;
  min-width: 0;
}
.calendar-agenda-item strong,
.calendar-agenda-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-agenda-item strong {
  font-size: 0.75rem;
}
.calendar-agenda-item small,
.calendar-empty {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.gantt {
  overflow: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.gantt-header,
.gantt-row {
  display: grid;
  min-width: 900px;
  grid-template-columns: 250px repeat(4, 1fr);
}
.gantt-header {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 44px;
  background: var(--slate-50);
}
.gantt-header span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.gantt-row {
  position: relative;
  min-height: 58px;
}
.gantt-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-150);
  background: var(--surface-raised);
}
.gantt-label strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gantt-label > span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.gantt-track {
  position: absolute;
  inset: 0 0 0 250px;
  border-bottom: 1px solid var(--slate-150);
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(25% - 1px),
    var(--slate-150) calc(25% - 1px),
    var(--slate-150) 25%
  );
}
.gantt-bar {
  position: absolute;
  top: 14px;
  left: var(--bar-left, 0);
  display: flex;
  width: var(--bar-width, 20%);
  height: 28px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--primary-600);
  color: var(--on-primary);
  font-size: 0.75rem;
  font-weight: 700;
}
.gantt-bar.status-success {
  background: var(--success-600);
}
.gantt-bar.status-warning {
  background: var(--warning-600);
}
.gantt-bar.status-danger {
  background: var(--danger-600);
}
.report-filter {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.report-filter label {
  display: grid;
  min-width: 150px;
  gap: 5px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.report-grid > * { min-width: 0; }
.report-chart-wide {
  grid-column: 1/-1;
}
.report-chart {
  min-height: 270px;
}
.bar-chart {
  display: flex;
  height: 210px;
  align-items: flex-end;
  justify-content: space-around;
  gap: 12px;
  padding: 18px 12px 0;
  border-bottom: 1px solid var(--slate-200);
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 41px,
    var(--slate-100) 42px
  );
}
.bar-chart > span {
  display: flex;
  width: 9%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}
.bar-chart i {
  width: 100%;
  height: var(--bar-height, 50%);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--primary-400), var(--primary-700));
}
.bar-chart small {
  margin-top: 7px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.donut-chart-mixed {
  background: conic-gradient(
    var(--success-500) 0 84%,
    var(--warning-500) 84% 95%,
    var(--danger-500) 95%
  );
}
.goal-meter {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 190px;
  padding: 10px;
}
.goal-meter > div {
  display: flex;
  align-items: end;
  gap: 8px;
}
.goal-meter > div strong {
  font-size: 2rem;
}
.goal-meter > div span {
  margin-bottom: 5px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.goal-meter progress {
  margin: 18px 0 8px;
}
.goal-meter p {
  font-size: 0.75rem;
}
.report-table {
  padding: 0;
}
.report-table > .panel-header {
  padding: 16px 18px;
  margin: 0;
}
.report-table .table-card {
  border: 0;
  border-top: 1px solid var(--slate-200);
  border-radius: 0;
  box-shadow: none;
}
.report-table .table-card__header {
  display: none;
}
.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.settings-nav {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
  display: grid;
  padding: 7px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.settings-nav a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 7px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 600;
}
.settings-nav a > .ci-icon:first-child {
  width: 17px;
}
.settings-nav a > .ci-icon:last-child {
  width: 14px;
  margin-left: auto;
  color: var(--slate-400);
}
.settings-nav a:hover,
.settings-nav a.is-active {
  background: var(--primary-50);
  color: var(--primary-800);
}
.settings-content,
.settings-form {
  display: grid;
  gap: 12px;
}
.toggle-list {
  display: grid;
  padding: 3px 20px 14px;
}
.switch-row {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--slate-150);
  cursor: pointer;
}
.switch-row:last-child {
  border: 0;
}
.switch-row > span:first-child {
  display: flex;
  flex-direction: column;
}
.switch-row strong {
  font-size: 0.76rem;
}
.switch-row small {
  margin-top: 2px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-round);
  background: var(--slate-300);
  transition: background var(--duration-fast);
}
.switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  content: "";
  transition: transform var(--duration-fast);
}
.switch-row input:checked + .switch {
  background: var(--primary-600);
}
.switch-row input:checked + .switch::after {
  transform: translateX(18px);
}
.switch-row input:focus-visible + .switch {
  box-shadow: var(--focus-ring);
}
.auth-shell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(420px, 0.95fr) minmax(480px, 1.05fr);
  background: var(--surface-raised);
}
.auth-visual {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  padding: 30px 7vw 28px;
  background: linear-gradient(145deg, var(--navy-950), var(--navy-800));
  color: #fff;
}
.auth-visual::before,
.auth-visual::after {
  position: absolute;
  border: 1px solid rgb(255 255 255/0.08);
  border-radius: 50%;
  content: "";
}
.auth-visual::before {
  right: -16vw;
  bottom: -16vw;
  width: 40vw;
  height: 40vw;
}
.auth-visual::after {
  right: 8vw;
  bottom: 6vw;
  width: 16vw;
  height: 16vw;
}
.auth-visual .brand {
  height: auto;
  padding: 0;
}
.auth-visual__copy {
  position: relative;
  z-index: 1;
  margin: auto 0;
}
.auth-visual__copy .eyebrow {
  color: var(--primary-300);
}
.auth-visual__headline {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(2.25rem, 4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.08;
}
.auth-visual__copy p:not(.auth-visual__headline) {
  max-width: 570px;
  margin: 0;
  color: rgb(255 255 255/0.67);
  font-size: 0.98rem;
  line-height: 1.8;
}
.auth-proof {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 30px;
}
.auth-proof > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-proof .ci-icon {
  color: var(--primary-300);
}
.auth-proof span {
  display: flex;
  flex-direction: column;
}
.auth-proof strong {
  font-size: 0.75rem;
}
.auth-proof small {
  color: rgb(255 255 255/0.5);
  font-size: 0.75rem;
}
.auth-copyright {
  position: absolute;
  right: 28px;
  bottom: 18px;
  margin: 0;
  color: rgb(255 255 255/0.3);
  font-size: 0.75rem;
}
.auth-main {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 40px;
}
.auth-card {
  width: min(420px, 100%);
}
.auth-card > header {
  margin-bottom: 25px;
}
.auth-card > header h1 {
  margin: 0;
  color: var(--slate-900);
  font-size: 1.75rem;
}
.auth-card > header p {
  margin: 7px 0 0;
  font-size: 0.8rem;
}
.auth-mobile-mark {
  display: none;
}
.auth-form {
  display: grid;
  gap: 15px;
}
.auth-form .button {
  min-height: 48px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--slate-400);
  font-size: 0.75rem;
}
.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--slate-200);
  content: "";
}
.auth-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}
.auth-link .ci-icon {
  width: 14px;
}
.auth-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--slate-150);
}
.auth-footer a,
.auth-footer button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.otp-inputs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}
.otp-inputs input {
  height: 56px;
  padding: 5px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
}
.invitation-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  background: var(--primary-50);
}
.invitation-summary > div {
  display: flex;
  flex-direction: column;
}
.invitation-summary small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.invitation-summary strong {
  font-size: 0.85rem;
}
.invitation-summary p {
  margin: 2px 0 0;
  font-size: 0.75rem;
}
.mailbox-layout,
.mail-thread-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.mail-folders {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px;
  border-right: 1px solid var(--slate-200);
  background: var(--slate-25);
}
.mail-folders > .button {
  margin-bottom: 8px;
}
.mail-folders > a:not(.button) {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 600;
}
.mail-folders > a:not(.button) .ci-icon {
  width: 17px;
}
.mail-folders > a:not(.button) strong {
  margin-left: auto;
  color: var(--primary-700);
  font-size: 0.75rem;
}
.mail-folders > a:hover,
.mail-folders > a.is-active {
  background: var(--primary-50);
  color: var(--primary-800);
}
.mail-list__toolbar {
  display: flex;
  height: 55px;
  align-items: center;
  gap: 3px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--slate-200);
}
.mail-list__toolbar > label {
  display: grid;
  width: 40px;
  place-items: center;
}
.mail-list__toolbar .filter-search {
  width: 230px;
  margin-left: auto;
}
.mail-list__toolbar .filter-search input {
  height: 44px;
  min-height: 44px;
}
.message-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.message-list li {
  display: grid;
  min-height: 48px;
  grid-template-columns: 38px 38px minmax(0, 1fr);
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--slate-150);
  background: var(--surface-raised);
}
.message-list li.is-unread {
  background: var(--primary-50);
}
.message-list li > label {
  display: grid;
  place-items: center;
}
.message-list li > .icon-button {
  width: 44px;
  height: 44px;
}
.message-list li > a {
  display: grid;
  min-width: 0;
  grid-template-columns: 150px minmax(0, 1fr) 78px;
  align-items: center;
  gap: 10px;
  color: var(--slate-700);
  font-size: 0.75rem;
}
.message-list li > a > strong,
.message-list li > a > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-list li > a > span b {
  color: var(--slate-900);
}
.message-list time {
  text-align: right;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.mail-thread {
  min-width: 0;
}
.mail-thread__toolbar {
  display: flex;
  height: 53px;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  border-bottom: 1px solid var(--slate-200);
}
.mail-subject {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--slate-150);
}
.mail-subject h2 {
  margin: 7px 0 0;
  font-size: 1.2rem;
}
.mail-label {
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 0.75rem;
}
.mail-message {
  padding: 18px 20px;
}
.mail-message > header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mail-message > header > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.mail-message > header strong {
  font-size: 0.75rem;
}
.mail-message > header time {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.mail-address {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.mail-address .ci-icon {
  width: 12px;
}
.mail-body {
  min-height: 180px;
  padding: 24px 47px;
  color: var(--slate-700);
  font-size: 0.78rem;
  line-height: 1.8;
}
.mail-reply {
  margin: 0 20px 20px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
}
.mail-reply > label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
}
.mail-reply > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
}
.mail-compose {
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}
.compose-header,
.compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--navy-850);
  color: #fff;
}
.compose-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compose-header h2 {
  margin: 0;
  font-size: 0.9rem;
}
.compose-header span {
  color: rgb(255 255 255/0.55);
  font-size: 0.75rem;
}
.compose-header .icon-button {
  color: #fff;
}
.compose-fields {
  display: grid;
}
.compose-fields > label,
.compose-fields details label {
  display: grid;
  min-height: 49px;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  padding: 4px 14px;
  border-bottom: 1px solid var(--slate-150);
}
.compose-fields label > span {
  margin: 0;
}
.compose-fields input,
.compose-fields select {
  border: 0;
  box-shadow: none;
}
.compose-fields details {
  border-bottom: 1px solid var(--slate-150);
}
.compose-fields details > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 5px 14px;
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.mail-compose > .editor-toolbar {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.compose-body {
  min-height: 340px;
  border: 0;
  border-radius: 0;
  padding: 24px;
}
.compose-footer {
  background: var(--slate-50);
  color: var(--slate-700);
}
.compose-footer > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-shell {
  display: grid;
  height: calc(100vh - var(--topbar-height) - 150px);
  height: calc(100dvh - var(--topbar-height) - 150px);
  min-height: 600px;
  grid-template-columns: 230px minmax(360px, 1fr) 230px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.chat-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--slate-200);
  background: var(--slate-25);
}
.chat-sidebar__header {
  padding: 12px;
  border-bottom: 1px solid var(--slate-200);
}
.chat-sidebar__header > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-sidebar h2 {
  margin: 0;
}
.chat-sidebar .filter-search {
  margin-top: 8px;
}
.chat-sidebar .filter-search input {
  height: 44px;
  min-height: 44px;
}
.chat-sidebar nav {
  overflow-y: auto;
  padding: 8px;
}
.chat-section-title {
  display: block;
  margin: 10px 6px 5px;
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}
.chat-sidebar nav a {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 7px;
  color: var(--slate-700);
}
.chat-sidebar nav a:hover,
.chat-sidebar nav a.is-active {
  background: var(--primary-50);
  color: var(--primary-900);
}
.channel-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  flex: none;
  border-radius: 8px;
  background: var(--slate-100);
  color: var(--slate-600);
  font-weight: 800;
}
.chat-sidebar nav a > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.chat-sidebar nav strong {
  font-size: 0.75rem;
}
.chat-sidebar nav small {
  overflow: hidden;
  color: var(--slate-500);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-sidebar nav a > b {
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--danger-600);
  color: #fff;
  font-size: 0.75rem;
}
.chat-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.chat-header {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  border-bottom: 1px solid var(--slate-200);
}
.chat-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-header h2 {
  margin: 0;
  font-size: 0.82rem;
}
.chat-header p {
  margin: 1px 0 0;
  font-size: 0.75rem;
}
.chat-messages {
  overflow-y: auto;
  flex: 1;
  padding: 14px;
}
.chat-welcome {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  text-align: center;
}
.chat-welcome .channel-icon {
  width: 52px;
  height: 52px;
  font-size: 1.4rem;
}
.chat-welcome h3 {
  margin: 10px 0 4px;
}
.chat-welcome p {
  font-size: 0.75rem;
}
.date-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.date-divider::before,
.date-divider::after {
  height: 1px;
  flex: 1;
  background: var(--slate-200);
  content: "";
}
.date-divider span {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.chat-message {
  display: flex;
  gap: 9px;
  padding: 8px 0;
}
.chat-message > div {
  min-width: 0;
  flex: 1;
}
.chat-message header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat-message header strong {
  font-size: 0.75rem;
}
.chat-message time {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.chat-message p {
  margin: 2px 0;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1.55;
}
.chat-attachment {
  display: flex;
  width: min(340px, 100%);
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  color: var(--slate-700);
}
.chat-attachment > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.chat-attachment strong {
  font-size: 0.75rem;
}
.chat-attachment small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.chat-composer {
  position: relative;
  margin: 0 13px 13px;
  border: 1px solid var(--slate-300);
  border-radius: 9px;
}
.composer-toolbar {
  display: flex;
  gap: 2px;
  padding: 3px 5px;
  border-bottom: 1px solid var(--slate-150);
}
.composer-toolbar button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
}
.composer-toolbar .ci-icon {
  width: 15px;
}
.chat-composer textarea {
  border: 0;
  box-shadow: none;
  padding-right: 48px;
}
.send-button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: var(--primary-600);
  color: var(--on-primary);
}
.chat-info {
  border-left: 1px solid var(--slate-200);
}
.chat-info > header {
  display: flex;
  height: 62px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--slate-200);
}
.chat-info h2 {
  margin: 0;
  font-size: 0.78rem;
}
.chat-info section {
  padding: 13px;
  border-bottom: 1px solid var(--slate-150);
}
.chat-info h3 {
  margin-bottom: 5px;
  font-size: 0.75rem;
}
.chat-info p {
  margin: 0;
  font-size: 0.75rem;
}
.chat-info section button,
.chat-info section a {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--slate-700);
  font-size: 0.75rem;
}
.chat-info section button .ci-icon:last-child,
.chat-info section a .ci-icon {
  margin-left: auto;
}
.profile-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  text-align: center;
}
.profile-card h2 {
  max-width: 100%;
  margin: 12px 0 2px;
  overflow-wrap: anywhere;
}
.profile-card p {
  max-width: 100%;
  margin: 0;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.verified-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  padding: 5px 8px;
  border-radius: var(--radius-round);
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.verified-badge .ci-icon {
  width: 13px;
}
.quick-create-page {
  max-width: 900px;
  margin: auto;
}
.quick-create-page .quick-create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}
.clock-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}
.clock-card {
  grid-row: span 2;
  display: flex;
  min-height: 420px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--navy-900), var(--navy-700));
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.clock-card .eyebrow {
  color: var(--primary-300);
}
.clock-time {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.clock-card > p {
  margin: 12px 0;
  color: rgb(255 255 255/0.6);
}
.clock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  padding: 7px 12px;
  border-radius: var(--radius-round);
  background: rgb(255 255 255/0.08);
  font-size: 0.75rem;
}
.clock-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.clock-actions .button-secondary {
  background: transparent;
  border-color: rgb(255 255 255/0.25);
  color: #fff;
}
.clock-location {
  display: flex;
  align-items: center;
  gap: 5px !important;
  margin-top: 22px !important;
  font-size: 0.75rem;
}
.clock-location .ci-icon {
  width: 14px;
}
.work-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}
.work-summary div {
  display: grid;
  place-items: center;
  min-height: 84px;
  border-right: 1px solid var(--slate-150);
  border-bottom: 1px solid var(--slate-150);
}
.work-summary div:nth-child(even) {
  border-right: 0;
}
.work-summary div:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.work-summary dt {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.work-summary dd {
  margin: 3px 0 0;
  font-size: 1rem;
  font-weight: 800;
}
.clock-week > strong {
  display: block;
  margin-top: 10px;
  font-size: 1.2rem;
}
.clock-week small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.org-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.org-toolbar > div {
  display: flex;
  gap: 7px;
}
.org-chart {
  overflow: auto;
  min-height: 600px;
  padding: 28px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: radial-gradient(circle, var(--slate-200) 1px, transparent 1px);
  background-size: 22px 22px;
}
.org-node {
  position: relative;
  display: flex;
  width: 260px;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}
.org-node > div {
  display: flex;
  flex-direction: column;
}
.org-node small {
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.org-node strong {
  font-size: 0.8rem;
}
.org-node span:last-child {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.org-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 60px;
}
.org-branches::before {
  position: absolute;
  top: -30px;
  right: 10%;
  left: 10%;
  height: 1px;
  background: var(--slate-300);
  content: "";
}
.org-department {
  position: relative;
  padding: 9px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.org-department::before {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 1px;
  height: 30px;
  background: var(--slate-300);
  content: "";
}
.org-department > header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 4px 10px;
}
.org-department > header > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.org-department > header strong {
  font-size: 0.75rem;
}
.org-department > header small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.org-department .icon-button {
  width: 44px;
  height: 44px;
}
.org-members {
  display: grid;
  gap: 3px;
}
.org-members a {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 7px;
  color: var(--slate-700);
}
.org-members a:hover {
  background: var(--slate-50);
}
.org-members a > span:last-child {
  display: flex;
  flex-direction: column;
}
.org-members strong {
  font-size: 0.75rem;
}
.org-members small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.org-chart.is-list-view {
  min-height: 0;
  padding: 18px;
  background: var(--surface-raised);
}
.org-chart.is-list-view .org-node {
  margin: 0;
}
.org-chart.is-list-view .org-branches {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 18px;
}
.org-chart.is-list-view .org-branches::before,
.org-chart.is-list-view .org-department::before {
  display: none;
}
.org-chart.is-list-view .org-members {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.document-editor {
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-100);
}
.document-editor > header {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  background: var(--surface-raised);
}
.document-editor > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.document-title {
  width: min(560px, 50vw);
  border: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.document-editor > header span {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.document-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 14px;
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  background: var(--surface-raised);
}
.document-editor__toolbar select {
  width: 120px;
  height: 44px;
  min-height: 44px;
}
.document-editor__toolbar button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.document-canvas {
  width: min(850px, calc(100% - 40px));
  min-height: 720px;
  margin: 28px auto;
  padding: 65px 70px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}
.document-canvas textarea {
  min-height: 590px;
  border: 0;
  box-shadow: none;
  font-size: 0.9rem;
  line-height: 1.9;
}
.document-editor > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--slate-200);
  background: var(--surface-raised);
  color: var(--slate-500);
  font-size: 0.75rem;
}
.document-editor > footer span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.document-editor > footer .ci-icon {
  width: 13px;
}
.preview-shell {
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-100);
}
.preview-shell > header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--navy-900);
  color: #fff;
}
.preview-shell > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.preview-shell > header h2 {
  margin: 0;
  font-size: 0.8rem;
}
.preview-shell > header p {
  margin: 1px 0 0;
  color: rgb(255 255 255/0.55);
  font-size: 0.75rem;
}
.preview-shell > header .object-icon {
  background: rgb(255 255 255/0.1);
  color: #fff;
}
.preview-shell > header .button-secondary {
  background: transparent;
  border-color: rgb(255 255 255/0.25);
  color: #fff;
}
.preview-shell > header .icon-button {
  color: #fff;
}
.preview-layout {
  display: grid;
  height: 720px;
  grid-template-columns: 120px minmax(400px, 1fr) 260px;
}
.preview-layout > aside {
  overflow-y: auto;
  padding: 10px;
  border-right: 1px solid var(--slate-200);
  background: var(--surface-raised);
}
.preview-layout > aside:first-child button {
  display: grid;
  width: 100%;
  place-items: center;
  gap: 4px;
  margin-bottom: 8px;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 7px;
  background: transparent;
}
.preview-layout > aside:first-child button.is-active {
  border-color: var(--primary-500);
  background: var(--primary-50);
}
.page-thumb {
  display: grid;
  width: 76px;
  height: 96px;
  place-items: center;
  border: 1px solid var(--slate-200);
  background: var(--surface-raised);
  color: var(--slate-400);
  box-shadow: var(--shadow-xs);
}
.preview-layout > aside small {
  font-size: 0.75rem;
}
.preview-canvas {
  overflow: auto;
  padding: 30px;
}
.preview-page {
  position: relative;
  width: min(760px, 100%);
  min-height: 980px;
  margin: auto;
  padding: 80px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}
.preview-page h1 {
  font-size: 1.8rem;
}
.preview-page p {
  line-height: 1.9;
}
.preview-watermark {
  position: absolute;
  right: 30px;
  bottom: 30px;
  color: var(--slate-200);
  font-size: 2rem;
  font-weight: 900;
  transform: rotate(-15deg);
}
.annotation-panel {
  border-right: 0 !important;
  border-left: 1px solid var(--slate-200);
}
.annotation-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.annotation-panel h3 {
  margin: 0;
}
.annotation-panel .state-panel {
  min-height: 300px;
  flex-direction: column;
  padding: 15px;
  text-align: center;
}
.annotation-panel .state-panel__icon {
  width: 42px;
  height: 42px;
}
.vault-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--warning-100);
  border-radius: var(--radius-md);
  background: var(--warning-50);
  color: var(--warning-700);
}
.vault-warning > .ci-icon {
  width: 28px;
  height: 28px;
}
.vault-warning strong {
  font-size: 0.8rem;
}
.vault-warning p {
  margin: 2px 0 0;
  color: var(--warning-700);
  font-size: 0.75rem;
}
.mobile-approval-card {
  max-width: 740px;
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}
.mobile-approval-card > header {
  padding: 22px;
  border-bottom: 1px solid var(--slate-200);
}
.mobile-approval-card > header h2 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}
.mobile-approval-card > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.mobile-approval-card > .description-grid {
  margin: 20px;
}
.mobile-approval-card > section {
  padding: 0 20px 20px;
}
.mobile-approval-card > section p {
  padding: 15px;
  border-radius: 8px;
  background: var(--slate-50);
  font-size: 0.75rem;
  line-height: 1.75;
}
.approval-actions {
  padding: 20px;
  border-top: 1px solid var(--slate-200);
  background: var(--slate-25);
}
.approval-actions > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}
.approval-actions > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.account-layout,.delegation-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:24px;align-items:start}.account-profile-card{position:sticky;top:calc(var(--topbar-height) + 20px)}.account-profile-card .compact-description{width:100%;margin-top:20px;text-align:left}.account-form{min-width:0}.security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.security-wide{grid-column:1/-1}.security-form{display:grid;gap:16px;margin-top:16px}.security-form>.button{justify-self:start}.security-state{display:grid;gap:16px;justify-items:start}.security-action{margin-top:16px;border-top:1px solid var(--slate-200);padding-top:12px}.security-action summary{cursor:pointer;font-weight:700;color:var(--navy-800)}.recovery-codes{padding:16px;margin-bottom:16px;border:1px solid var(--warning-100);border-radius:var(--radius-md);background:var(--warning-50)}.recovery-codes ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0;padding:0;list-style:none}.recovery-codes code,.mfa-setup code{display:block;padding:8px;border-radius:var(--radius-sm);background:var(--slate-50);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.mfa-setup{display:grid;gap:12px;padding:16px;border:1px solid var(--primary-200);border-radius:var(--radius-md);background:var(--primary-50)}.mfa-setup ol{margin:0;padding-left:1.25rem}.mfa-setup label{display:grid;gap:8px;font-weight:700}.session-global-actions{display:flex;gap:8px;flex-wrap:wrap}.session-list,.delegation-list{display:grid;gap:0;margin:0;padding:0;list-style:none}.session-list li,.delegation-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--slate-200)}.session-list li:first-child,.delegation-list li:first-child{border-top:0}.session-list p,.session-list small,.delegation-list p,.delegation-list small{margin:.25rem 0 0;color:var(--slate-500)}.scope-fieldset{display:flex;flex-wrap:wrap;gap:12px;padding:16px;border:1px solid var(--slate-200);border-radius:var(--radius-md)}.scope-fieldset legend{padding:0 8px;font-weight:700}.scope-fieldset label{display:flex;align-items:center;gap:8px;font-weight:500}.checkbox-field{padding:.7rem;border:1px solid var(--slate-200);border-radius:var(--radius-sm)}
@media(max-width:1000px){.account-layout,.delegation-layout,.security-grid{grid-template-columns:1fr}.account-profile-card{position:static}.security-wide{grid-column:auto}.session-list li,.delegation-list li{grid-template-columns:auto minmax(0,1fr);align-items:start}.session-list li>.status-badge,.delegation-list li>.status-badge,.session-list li>form,.delegation-list li>form{grid-column:2}}
@media(max-width:600px){.recovery-codes ul{grid-template-columns:1fr}.session-global-actions{display:grid}.session-global-actions form,.session-global-actions button{width:100%}}

.mfa-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
.mfa-copy-row textarea {
  width: 100%;
  resize: vertical;
}
.api-token-once {
  display: grid;
  gap: 8px;
  margin: 16px 20px;
  padding: 16px;
  border: 1px solid var(--warning-100);
  border-radius: var(--radius-md);
  background: var(--warning-50);
}
.api-token-once p,
.api-token-once small {
  margin: 0;
  color: var(--warning-700);
}
.api-token-once > div {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.api-token-once code {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--warning-100);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.api-token-issuer {
  margin: 16px 20px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}
.api-token-issuer > summary {
  padding: 14px 16px;
  color: var(--ink-strong);
  font-weight: 800;
  cursor: pointer;
}
.api-token-issuer[open] > summary {
  border-bottom: 1px solid var(--slate-200);
}
.api-token-issuer .security-form {
  padding: 0 16px 16px;
}
.api-permission-fieldset {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}
.api-permission-fieldset legend {
  padding: 0 7px;
  color: var(--ink-strong);
  font-weight: 800;
}
.api-permission-fieldset p {
  margin: 0;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.api-permission-fieldset > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}
.api-permission-fieldset label {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 7px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.api-token-list {
  padding: 0 20px 20px;
}
.api-token-list > h3 {
  margin: 0 0 10px;
}
.api-token-list > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.api-token-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--slate-150);
}
.api-token-list li p,
.api-token-list li small {
  margin: 3px 0 0;
  color: var(--slate-500);
  overflow-wrap: anywhere;
}
.attachment-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.attachment-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-sm);
}
.attachment-list p {
  margin: 4px 0 0;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.inline-upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) auto;
  align-items: end;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--primary-300);
  border-radius: var(--radius-md);
  background: var(--primary-50);
}
.transition-form {
  display: grid;
  gap: 10px;
}
.transition-form .button {
  justify-self: stretch;
}
.report-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.report-toolbar .report-filter {
  min-width: 0;
  flex: 1;
  margin: 0;
}
.report-export {
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.report-export label {
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.bulk-bar label {
  margin: 0;
}
.bulk-bar select,
.bulk-bar input {
  min-height: 44px;
}
.bulk-reason input {
  width: min(240px, 20vw);
}
.compose-fields > label > small,
.compose-fields details label > small {
  grid-column: 2;
  margin: -4px 12px 6px;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.mail-attachment-field input {
  padding: 8px 10px;
}
.sensitive-confirm {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--slate-150);
  background: var(--warning-50);
}
.mail-reply > .mail-reply-attachment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 8px 0;
}

@media (max-width: 1100px) {
  .api-permission-fieldset > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-toolbar {
    flex-direction: column;
  }
  .report-export {
    justify-content: flex-end;
  }
  .bulk-bar {
    flex-wrap: wrap;
  }
  .bulk-bar strong {
    width: 100%;
  }
}
@media (max-width: 720px) {
  .api-token-once > div,
  .report-export {
    align-items: stretch;
    flex-direction: column;
  }
  .api-permission-fieldset > div {
    grid-template-columns: 1fr;
  }
  .api-token-list li {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .api-token-list li > .status-badge,
  .api-token-list li > form {
    grid-column: 2;
  }
  .inline-upload-form {
    grid-template-columns: 1fr;
  }
  .attachment-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .attachment-list li .button {
    grid-column: 2;
    justify-self: start;
  }
  .bulk-reason,
  .bulk-reason input,
  .bulk-bar .button {
    width: 100%;
  }
}

/* Dedicated encrypted secret vault (CRM-14 / AST-07) */
.vault-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.vault-summary article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}
.vault-summary article > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-50);
  color: var(--primary-700);
}
.vault-summary article > span .ci-icon { width: 19px; height: 19px; }
.vault-summary article.is-danger > span { background: var(--danger-50); color: var(--danger-700); }
.vault-summary article div { display: grid; gap: 2px; }
.vault-summary small { color: var(--slate-500); font-size: 0.75rem; }
.vault-summary strong { color: var(--slate-900); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.vault-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
}
.vault-filter { display: flex; min-width: 0; align-items: center; gap: 8px; }
.vault-filter label:first-child { position: relative; min-width: min(360px, 38vw); }
.vault-filter label:first-child > .ci-icon { position: absolute; top: 50%; left: 12px; color: var(--slate-400); transform: translateY(-50%); }
.vault-filter input[type="search"] { padding-left: 38px; }
.vault-filter select { min-width: 120px; }
.vault-table-card { overflow: hidden; padding: 0; }
.vault-table-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--slate-200);
}
.vault-table-card > header h2 { margin: 0; color: var(--slate-900); font-size: 1rem; }
.vault-table-card > header p { margin: 3px 0 0; color: var(--slate-500); font-size: 0.75rem; }
.vault-table-card > header > span { color: var(--slate-500); font-size: 0.75rem; font-weight: 700; }
.vault-table { width: 100%; min-width: 1040px; border-collapse: collapse; }
.vault-table th,
.vault-table td { padding: 12px 14px; border-bottom: 1px solid var(--slate-150); text-align: left; vertical-align: middle; }
.vault-table th { background: var(--slate-50); color: var(--slate-600); font-size: 0.75rem; font-weight: 700; }
.vault-table td { color: var(--slate-700); font-size: 0.75rem; }
.vault-table tbody tr:last-child td { border-bottom: 0; }
.vault-table tbody tr:hover { background: var(--slate-25); }
.vault-item-name { display: flex; min-width: 210px; align-items: center; gap: 10px; }
.vault-item-name > span:last-child { display: grid; gap: 2px; }
.vault-item-name strong { color: var(--slate-900); font-size: 0.78rem; }
.vault-item-name small,
.table-subtext { display: block; margin-top: 3px; color: var(--slate-500); font-size: 0.75rem; font-weight: 400; }
.vault-mask { padding: 4px 7px; border-radius: 5px; background: var(--slate-100); color: var(--slate-700); font-size: 0.75rem; letter-spacing: 0.05em; }
.vault-state { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.vault-state-success { background: var(--success-50); color: var(--success-700); }
.vault-state-warning { background: var(--warning-50); color: var(--warning-700); }
.vault-state-danger { background: var(--danger-50); color: var(--danger-700); }
.vault-state-neutral { background: var(--slate-100); color: var(--slate-600); }
.vault-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.vault-row-actions .button-small { min-height: 44px; padding: 6px 10px; font-size: 0.75rem; }
.vault-row-actions .icon-button { width: 44px; height: 44px; }
.vault-row-actions .icon-button.danger { color: var(--danger-600); }
.vault-audit-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-800);
}
.vault-audit-note > .ci-icon { width: 19px; height: 19px; flex: none; }
.vault-audit-note strong { font-size: 0.75rem; }
.vault-audit-note p { margin: 3px 0 0; color: var(--slate-600); font-size: 0.75rem; }
.vault-dialog { overflow: auto; }
.vault-dialog > form > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--slate-200);
}
.vault-dialog > form > header h2 { margin: 2px 0 0; color: var(--slate-900); font-size: 1.05rem; }
.vault-dialog > form > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--slate-200); }
.vault-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; }
.vault-form-grid.one-column { grid-template-columns: 1fr; }
.vault-form-grid label,
.vault-step-up label { display: grid; gap: 6px; color: var(--slate-700); font-size: 0.75rem; font-weight: 700; }
.vault-form-grid label.wide { grid-column: 1/-1; }
.vault-form-grid label small { color: var(--danger-600); font-size: 0.75rem; font-weight: 500; }
.vault-step-up { display: grid; gap: 14px; padding: 20px; }
.vault-step-up > p:first-child { margin: 0; color: var(--slate-600); font-size: 0.75rem; line-height: 1.6; }
.vault-step-up .form-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-50); color: var(--danger-700); font-size: 0.75rem; }
.vault-secret-result { padding: 20px; }
.vault-countdown { display: inline-flex; margin-bottom: 10px; padding: 4px 8px; border-radius: 999px; background: var(--warning-50); color: var(--warning-700); font-size: 0.75rem; font-weight: 700; }
.vault-secret-result > div { display: flex; align-items: stretch; gap: 8px; }
.vault-secret-result code { display: block; min-width: 0; max-height: 240px; flex: 1; overflow: auto; padding: 14px; border: 1px solid var(--slate-300); border-radius: var(--radius-sm); background: var(--slate-900); color: #fff; font-size: 0.8rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.vault-secret-result > p { margin: 9px 0 0; color: var(--danger-600); font-size: 0.75rem; }
.vault-danger-copy { margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--danger-50); color: var(--danger-700); font-size: 0.75rem; line-height: 1.55; }
.danger-text { color: var(--danger-600); }

@media (max-width: 920px) {
  .vault-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-toolbar { align-items: stretch; flex-direction: column; }
  .vault-filter { flex-wrap: wrap; }
  .vault-filter label:first-child { min-width: min(100%, 420px); flex: 1; }
}
@media (max-width: 600px) {
  .vault-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vault-summary article { gap: 8px; padding: 12px; }
  .vault-summary article > span { width: 32px; height: 32px; }
  .vault-summary strong { font-size: 1.05rem; }
  .vault-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .vault-filter label:first-child { grid-column: 1/-1; min-width: 0; }
  .vault-filter .button { min-width: 0; }
  .vault-toolbar > .button { width: 100%; }
  .vault-form-grid { grid-template-columns: 1fr; padding: 16px; }
  .vault-form-grid label.wide { grid-column: auto; }
  .vault-secret-result > div { flex-direction: column; }
  .vault-dialog > form > footer { position: sticky; bottom: 0; background: var(--surface-raised); }
}

/* Communication workspace */
.communication-screen [hidden],
.communication-dialog [hidden] {
  display: none !important;
}
.communication-screen .app-main__content {
  min-width: 0;
}
.communication-tabs {
  display: flex;
  gap: 4px;
  margin: -2px 0 16px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-50);
  scrollbar-width: thin;
}
.communication-tabs a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.communication-tabs a:hover,
.communication-tabs a.is-active {
  background: var(--surface-raised);
  color: var(--primary-700);
  box-shadow: var(--shadow-xs);
}
.communication-board-layout,
.communication-chat-layout,
.communication-survey-layout,
.directory-layout {
  display: grid;
  min-width: 0;
  gap: 14px;
}
.communication-board-layout {
  grid-template-columns: 230px minmax(0, 1fr);
}
.communication-sidebar,
.communication-content,
.communication-channel-list,
.communication-chat-main,
.communication-channel-info,
.communication-messages-page,
.communication-directory,
.communication-survey-list,
.communication-survey-detail {
  min-width: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}
.communication-sidebar,
.communication-channel-list,
.communication-channel-info,
.communication-survey-list {
  padding: 14px;
}
.communication-content,
.communication-messages-page,
.communication-directory,
.communication-survey-detail {
  padding: 16px;
}
.communication-sidebar .section-heading,
.communication-channel-list .section-heading,
.communication-survey-list .section-heading {
  margin-bottom: 10px;
}
.communication-side-list {
  display: grid;
  gap: 3px;
}
.communication-side-list > a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--slate-700);
  font-size: 0.75rem;
}
.communication-side-list > a:hover,
.communication-side-list > a.is-active {
  background: var(--primary-50);
  color: var(--primary-800);
}
.communication-side-list > a > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.communication-side-list > a > span > span {
  display: grid;
  min-width: 0;
}
.communication-side-list > a strong,
.communication-side-list > a small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.communication-side-list > a b {
  flex: 0 0 auto;
  font-size: 0.75rem;
}
.communication-create-panel {
  margin-top: 14px;
  border-top: 1px solid var(--slate-150);
  padding-top: 10px;
}
.communication-create-panel summary {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-700);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  list-style: none;
}
.communication-create-panel summary::-webkit-details-marker {
  display: none;
}
.communication-create-panel form,
.channel-member-add {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}
.communication-create-panel label,
.channel-member-add label,
.communication-form-grid label,
.survey-question-editor label {
  display: grid;
  gap: 5px;
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.communication-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.communication-toolbar form,
.communication-local-search {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 7px;
}
.communication-toolbar form > .ci-icon,
.communication-local-search > .ci-icon {
  flex: 0 0 auto;
  color: var(--slate-400);
}
.communication-toolbar input,
.communication-local-search input {
  min-width: 80px;
  flex: 1;
}
.communication-toolbar select {
  width: auto;
}
.communication-post-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1.28fr);
  gap: 14px;
}
.communication-post-list {
  display: grid;
  align-content: start;
  gap: 6px;
}
.communication-post-row {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-md);
  background: var(--slate-25, #fcfdff);
  color: var(--slate-800);
}
.communication-post-row:hover,
.communication-post-row.is-active {
  border-color: var(--primary-300);
  background: var(--primary-50);
}
.communication-post-row > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.76rem;
  white-space: nowrap;
}
.communication-post-row > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--slate-600);
  font-size: 0.75rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.communication-post-row > span:last-child,
.communication-post-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.communication-post-row > span:last-child {
  justify-content: space-between;
  color: var(--slate-500);
}
.mini-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--radius-round);
  background: var(--primary-100);
  color: var(--primary-800);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.mini-label-warning {
  background: var(--amber-100, #fff3cd);
  color: var(--amber-800, #854d0e);
}
.communication-post-detail {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-md);
}
.communication-post-detail > header,
.communication-chat-header,
.communication-survey-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--slate-150);
}
.communication-post-detail h2,
.communication-chat-header h2,
.communication-survey-detail h2 {
  margin: 6px 0 3px;
  color: var(--slate-900);
  font-size: 1rem;
}
.communication-post-detail header p,
.communication-chat-header p,
.communication-survey-detail header p {
  margin: 0;
  color: var(--slate-500);
  font-size: 0.75rem;
}
.communication-post-body,
.survey-description {
  min-height: 110px;
  padding: 20px 2px;
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.acknowledgement-box,
.survey-complete,
.communication-join {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  background: var(--primary-50);
}
.acknowledgement-box > div,
.survey-complete {
  display: flex;
  align-items: center;
  gap: 9px;
}
.acknowledgement-box span,
.survey-complete > div {
  display: grid;
  gap: 2px;
}
.acknowledgement-box small,
.survey-complete p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.75rem;
}
.acknowledgement-list {
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-150);
  font-size: 0.75rem;
}
.acknowledgement-list summary {
  cursor: pointer;
  font-weight: 700;
}
.acknowledgement-list ul,
.channel-member-list,
.directory-layout aside ul,
.survey-text-results {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.acknowledgement-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.communication-comments {
  padding-top: 16px;
}
.comment-thread {
  display: grid;
  gap: 10px;
}
.comment-thread article,
.communication-message-log article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
}
.comment-thread article > div,
.communication-message-log article > div {
  min-width: 0;
}
.comment-thread header,
.communication-message-log article header {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.comment-thread time,
.communication-message-log time {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.comment-thread p,
.communication-message-log article p {
  margin: 3px 0 0;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.comment-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 13px;
}
.comment-composer textarea {
  flex: 1;
}
.communication-empty {
  display: grid;
  place-content: center;
  gap: 4px;
  min-height: 90px;
  padding: 16px;
  color: var(--slate-500);
  text-align: center;
}
.communication-empty strong {
  color: var(--slate-700);
  font-size: 0.75rem;
}
.communication-empty p {
  margin: 0;
  font-size: 0.75rem;
}
.communication-empty-fill {
  min-height: 430px;
}
.communication-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: auto;
}
.communication-dialog > form > header,
.communication-dialog > form > footer {
  position: sticky;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 18px;
  background: var(--surface-raised);
}
.communication-dialog > form > header {
  top: 0;
  border-bottom: 1px solid var(--slate-150);
}
.communication-dialog > form > footer {
  bottom: 0;
  justify-content: flex-end;
  border-top: 1px solid var(--slate-150);
}
.communication-dialog h2 {
  margin: 0;
  font-size: 0.92rem;
}
.communication-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}
.communication-form-grid .wide,
.survey-question-editor .wide {
  grid-column: 1 / -1;
}
.communication-screen .checkbox-row,
.communication-dialog .checkbox-row {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 7px !important;
}
.communication-screen .checkbox-row input,
.communication-dialog .checkbox-row input {
  width: auto;
}
.communication-chat-layout {
  grid-template-columns: 235px minmax(340px, 1fr) 260px;
  min-height: 610px;
}
.communication-channel-list,
.communication-channel-info {
  align-self: stretch;
}
.communication-local-search {
  margin-bottom: 10px;
}
.communication-channel-list .communication-side-list > a {
  align-items: flex-start;
  padding: 10px 8px;
}
.communication-channel-list .communication-side-list > a > span {
  align-items: flex-start;
}
.communication-channel-list .communication-side-list time {
  max-width: 72px;
  overflow: hidden;
  color: var(--slate-400);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-100);
  color: var(--primary-800);
  font-size: 0.75rem;
}
.communication-chat-main {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(300px, 1fr) auto;
  overflow: hidden;
}
.communication-chat-header {
  padding: 14px 16px;
}
.communication-chat-header > div,
.communication-chat-header nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.communication-message-log {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  max-height: 540px;
  padding: 18px;
  overflow-y: auto;
}
.communication-message-log article form {
  margin-top: 5px;
}
.communication-message-log article form button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--slate-500);
  cursor: pointer;
  font-size: 0.75rem;
}
.communication-message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--slate-150);
}
.communication-message-composer textarea {
  resize: none;
}
.communication-message-composer .send-button {
  background: var(--primary-600);
  color: var(--on-primary);
}
.communication-join {
  margin: 12px;
}
.communication-channel-info section + section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-150);
}
.communication-channel-info h2,
.communication-channel-info h3 {
  margin: 0;
  font-size: 0.8rem;
}
.communication-channel-info dl,
.directory-user-grid dl {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
}
.communication-channel-info dl div,
.directory-user-grid dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
}
.communication-channel-info dt,
.directory-user-grid dt {
  color: var(--slate-500);
}
.channel-member-list {
  display: grid;
  gap: 8px;
}
.channel-member-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.channel-member-list li > span:nth-child(2) {
  display: grid;
  min-width: 0;
}
.channel-member-list strong,
.channel-member-list small {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-member-list small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.saved-message-list {
  display: grid;
  gap: 9px;
}
.saved-message-list > article {
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-md);
}
.saved-message-list article > div {
  min-width: 0;
}
.saved-message-list header,
.saved-message-list header > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.saved-message-list header a,
.saved-message-list time,
.saved-note {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.saved-message-list p {
  margin: 7px 0;
  font-size: 0.75rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.directory-layout {
  grid-template-columns: 215px minmax(0, 1fr);
}
.directory-layout > aside {
  padding: 14px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-md);
  background: var(--slate-50);
}
.directory-layout aside h2 {
  margin: 0 0 10px;
  font-size: 0.8rem;
}
.directory-layout aside li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--slate-150);
  font-size: 0.75rem;
}
.directory-layout aside li > span {
  display: grid;
}
.directory-layout aside small {
  color: var(--slate-500);
}
.directory-user-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.directory-user-grid > article {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-md);
}
.directory-user-grid article > div {
  min-width: 0;
}
.directory-user-grid h3,
.directory-user-grid p {
  margin: 0;
}
.directory-user-grid h3 {
  font-size: 0.76rem;
}
.directory-user-grid p {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.directory-user-grid dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.directory-user-grid > article > form,
.directory-user-grid > article > .mini-label {
  grid-column: 1 / -1;
  justify-self: end;
}
.communication-survey-layout {
  grid-template-columns: 300px minmax(0, 1fr);
}
.communication-survey-list nav {
  display: grid;
  gap: 5px;
}
.communication-survey-list nav a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--slate-800);
}
.communication-survey-list nav a:hover,
.communication-survey-list nav a.is-active {
  border-color: var(--primary-200);
  background: var(--primary-50);
}
.communication-survey-list nav a > span {
  display: grid;
  min-width: 0;
}
.communication-survey-list nav strong,
.communication-survey-list nav small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.communication-survey-list nav strong {
  font-size: 0.75rem;
}
.communication-survey-list nav small {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.communication-survey-list nav b {
  flex: 0 0 auto;
  font-size: 0.75rem;
}
.communication-survey-detail > header dl {
  display: grid;
  gap: 3px;
  margin: 0;
}
.communication-survey-detail > header dl div {
  display: flex;
  gap: 7px;
  font-size: 0.75rem;
}
.communication-survey-detail > header dt {
  color: var(--slate-500);
}
.communication-survey-detail > header dd {
  margin: 0;
}
.survey-response-form,
.survey-results {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.survey-response-form h3,
.survey-results h3 {
  margin: 0;
  font-size: 0.8rem;
}
.survey-response-form fieldset,
.survey-results > article,
.survey-question-editor {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-md);
  background: var(--slate-25, #fcfdff);
}
.survey-response-form legend {
  padding: 0 5px;
  color: var(--slate-800);
  font-size: 0.75rem;
  font-weight: 700;
}
.required-mark {
  margin-left: 3px;
  color: var(--red-600, #dc2626);
}
.survey-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--slate-700);
  font-size: 0.75rem;
}
.survey-option input {
  width: auto;
}
.survey-rating {
  display: flex;
  gap: 7px;
}
.survey-rating input {
  position: absolute;
  opacity: 0;
}
.survey-rating span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  font-weight: 700;
}
.survey-rating input:checked + span {
  border-color: var(--primary-600);
  background: var(--primary-600);
  color: var(--on-primary);
}
.survey-closed {
  border-color: var(--slate-200);
  background: var(--slate-50);
}
.survey-results > article h4,
.survey-results > article p {
  margin: 0;
}
.survey-results > article h4 {
  font-size: 0.75rem;
}
.survey-results > article p {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.survey-bars {
  display: grid;
  gap: 9px;
}
.survey-bars > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
}
.survey-bars span {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  font-size: 0.75rem;
}
.survey-bars progress {
  width: 100%;
}
.survey-text-results li {
  padding: 8px 0;
  border-bottom: 1px solid var(--slate-150);
  font-size: 0.75rem;
  line-height: 1.55;
}
.survey-builder {
  padding: 0 18px 18px;
}
.survey-builder .section-heading {
  margin-bottom: 10px;
}
[data-survey-questions] {
  display: grid;
  gap: 10px;
}
.survey-question-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.survey-question-editor > header {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 1280px) {
  .communication-chat-layout {
    grid-template-columns: 220px minmax(340px, 1fr);
  }
  .communication-channel-info {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .communication-channel-info section + section {
    margin: 0;
    padding: 0 0 0 18px;
    border-top: 0;
    border-left: 1px solid var(--slate-150);
  }
  .directory-user-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .communication-board-layout,
  .communication-survey-layout,
  .directory-layout {
    grid-template-columns: 1fr;
  }
  .communication-post-grid {
    grid-template-columns: 1fr;
  }
  .communication-chat-layout {
    grid-template-columns: 1fr;
  }
  .communication-channel-list .communication-side-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .communication-channel-info {
    grid-column: auto;
  }
  .communication-message-log {
    max-height: 500px;
  }
}
@media (max-width: 640px) {
  .communication-tabs {
    margin-inline: -4px;
  }
  .communication-sidebar,
  .communication-content,
  .communication-channel-list,
  .communication-channel-info,
  .communication-messages-page,
  .communication-directory,
  .communication-survey-list,
  .communication-survey-detail {
    padding: 11px;
    border-radius: var(--radius-md);
  }
  .communication-toolbar,
  .communication-post-detail > header,
  .communication-survey-detail > header,
  .acknowledgement-box,
  .communication-join {
    align-items: stretch;
    flex-direction: column;
  }
  .communication-toolbar form {
    flex-wrap: wrap;
  }
  .communication-toolbar form input {
    flex-basis: calc(100% - 34px);
  }
  .communication-toolbar form select,
  .communication-toolbar form .button {
    flex: 1;
  }
  .communication-post-detail {
    padding: 13px;
  }
  .comment-composer {
    align-items: stretch;
    flex-direction: column;
  }
  .communication-form-grid,
  .survey-question-editor {
    grid-template-columns: 1fr;
  }
  .communication-form-grid .wide,
  .survey-question-editor .wide,
  .survey-question-editor > header {
    grid-column: auto;
  }
  .communication-channel-list .communication-side-list,
  .directory-user-grid,
  .communication-channel-info {
    grid-template-columns: 1fr;
  }
  .communication-channel-info section + section {
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--slate-150);
    border-left: 0;
  }
  .communication-chat-header nav {
    flex: 0 0 auto;
  }
  .saved-message-list > article {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .saved-message-list > article > form {
    grid-column: 2;
  }
  .survey-bars > div {
    grid-template-columns: 1fr;
  }
  .survey-rating {
    flex-wrap: wrap;
  }
}

/* Document, approval and calendar runtime surfaces */
.runtime-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 6px 0 16px;
  scrollbar-width: thin;
}
.runtime-tabs a {
  flex: none;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle, var(--slate-200));
  border-radius: 999px;
  background: var(--surface-raised, var(--slate-0));
  color: var(--ink-muted, var(--slate-500));
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.runtime-tabs a:hover,
.runtime-tabs a.is-active {
  border-color: var(--primary, var(--primary-600));
  background: var(--primary, var(--primary-600));
  color: var(--on-primary);
}
.runtime-drive { grid-template-columns: minmax(220px, 0.65fr) minmax(0, 2.35fr); }
.runtime-calendar-layout { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 2.2fr); }
.calendar-color { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--event-color); }
.runtime-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 16px; }
.runtime-card { padding: 18px; border: 1px solid var(--border-subtle, var(--slate-200)); border-radius: 14px; background: var(--surface-raised, var(--slate-0)); }
.runtime-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.runtime-card footer form { display: flex; }
.runtime-list { margin: 0; padding: 0; list-style: none; }
.runtime-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle, var(--slate-200)); }
.runtime-list li > div { width: 100%; min-width: 0; }
.runtime-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.runtime-filter-pills a { padding: 8px 12px; border-radius: 8px; background: var(--surface-muted, var(--slate-50)); color: var(--ink-muted, var(--slate-500)); font-weight: 700; }
.runtime-filter-pills a:hover,
.runtime-filter-pills a.is-active { background: var(--primary, var(--primary-600)); color: var(--on-primary); }
.document-preview { min-height: 260px; padding: clamp(16px, 4vw, 48px); border: 1px solid var(--border-subtle, var(--slate-200)); border-radius: 12px; background: var(--surface-raised, var(--slate-0)); color: var(--ink, var(--slate-800)); overflow-wrap: anywhere; white-space: pre-wrap; }
.approval-line { margin: 0; padding: 0; list-style: none; }
.approval-line li { display: flex; gap: 16px; margin: 8px 0; padding: 16px; border-left: 4px solid var(--slate-300); border-radius: 8px; background: var(--surface-muted, var(--slate-50)); }
.approval-line li > span { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 50%; background: var(--slate-150); font-weight: 800; }
.approval-line .status-approved { border-left-color: var(--success-600); }
.approval-line .status-rejected,
.approval-line .status-revision_requested { border-left-color: var(--danger-600); }
.runtime-calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 13px; }
.runtime-calendar-grid article { padding: 14px 16px; border-left: 5px solid var(--event-color); border-radius: 8px; background: var(--surface-muted, var(--slate-50)); }
.runtime-calendar-grid h3 { margin: 4px 0; }
.runtime-bars > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 10px 0; }
.stacked-form { display: grid; gap: 10px; }
.stacked-form textarea { width: 100%; box-sizing: border-box; }
.callout { padding: 16px; border-radius: 10px; background: var(--primary-soft, var(--primary-50)); color: var(--ink, var(--slate-800)); }

html[data-contrast="high"] .runtime-tabs a,
html[data-contrast="high"] .runtime-card,
html[data-contrast="high"] .document-preview { border-color: var(--text, currentColor); }

@media (max-width: 800px) {
  .runtime-drive,
  .runtime-calendar-layout,
  .split-layout,
  .detail-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .runtime-tabs { margin-inline: -16px; padding-inline: 16px; }
  .table-wrap { overflow-x: auto; }
  .runtime-card-grid { grid-template-columns: minmax(0, 1fr); }
  .runtime-bars > div { grid-template-columns: 90px minmax(0, 1fr) 32px; }
}

.admin-workspace {
  display: grid;
  gap: 18px;
}
.admin-workflow-intro {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.78rem;
}
.admin-workflow-group__summary {
  min-height: 76px;
  border-bottom: 0;
  cursor: pointer;
  list-style: none;
}
.admin-workflow-group__summary::-webkit-details-marker {
  display: none;
}
.admin-workflow-group__summary > span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 800;
}
.admin-workflow-group__summary > span .ci-icon {
  width: 17px;
  transition: transform var(--duration-fast) var(--ease);
}
.admin-workflow-group[open] > .admin-workflow-group__summary {
  border-bottom: 1px solid var(--slate-200);
}
.admin-workflow-group[open] > .admin-workflow-group__summary > span .ci-icon {
  transform: rotate(180deg);
}
.admin-workflow-group__body > form > .button {
  margin: 0 20px 20px;
}
.admin-company-form .form-actions {
  margin: 0;
  padding: 14px 20px 20px;
}
.admin-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.admin-workspace .form-card {
  min-width: 0;
  overflow: hidden;
}
.admin-workspace .table-scroll {
  border: 0;
  border-radius: 0;
}
.admin-empty {
  margin: 0;
  padding: 28px 20px;
  color: var(--slate-500);
  text-align: center;
}
.compact-admin-form {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1.2fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--slate-150);
  background: var(--slate-25);
}
.compact-admin-form > input,
.compact-admin-form > select,
.compact-admin-form > .button {
  width: 100%;
}
.admin-invite-form {
  padding-bottom: 20px;
}
.admin-invite-form > .button {
  margin: 0 20px;
}
.admin-invite-form fieldset,
.admin-user-list fieldset {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}
.admin-invite-form legend,
.admin-user-list legend {
  padding: 0 7px;
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 800;
}
.permission-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.permission-checks label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--slate-150);
  border-radius: var(--radius-sm);
  background: var(--slate-25);
  color: var(--slate-700);
  font-size: 0.75rem;
}
.permission-checks label:has(input:checked) {
  border-color: var(--primary-300);
  background: var(--primary-50);
  color: var(--primary-800);
}
.admin-invitation-list {
  margin: 0;
  padding: 0 20px 20px;
  list-style: none;
}
.admin-invitation-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--slate-150);
}
.admin-invitation-list li > div {
  display: grid;
  gap: 4px;
}
.admin-invitation-list small {
  color: var(--slate-500);
}
.admin-user-list,
.admin-role-list {
  display: grid;
}
.admin-user-list details,
.admin-role-list details {
  border-bottom: 1px solid var(--slate-150);
}
.admin-user-list details:last-child,
.admin-role-list details:last-child {
  border-bottom: 0;
}
.admin-user-list summary,
.admin-role-list summary {
  position: relative;
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  list-style: none;
}
.admin-user-list summary::-webkit-details-marker,
.admin-role-list summary::-webkit-details-marker {
  display: none;
}
.admin-user-list summary::after,
.admin-role-list summary::after {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--slate-400);
  border-bottom: 2px solid var(--slate-400);
  content: "";
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease);
}
.admin-user-list details[open] summary::after,
.admin-role-list details[open] summary::after {
  transform: rotate(225deg);
}
.admin-user-list summary > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}
.admin-user-list summary small {
  overflow: hidden;
  color: var(--slate-500);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-list details > form {
  padding: 0 20px 20px;
  background: var(--slate-25);
}
.admin-user-list details > form > .button {
  margin-top: 14px;
}
.admin-permission-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 20px 20px;
}
.admin-permission-matrix fieldset {
  display: grid;
  max-height: 320px;
  align-content: start;
  gap: 7px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}
.admin-permission-matrix legend {
  padding: 0 7px;
  color: var(--ink-strong);
  font-weight: 800;
}
.admin-permission-matrix label {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 7px;
  padding: 7px;
  border-radius: var(--radius-xs);
  color: var(--slate-700);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.admin-permission-matrix label:hover {
  background: var(--slate-50);
}
.admin-permission-matrix + .button {
  margin: 0 20px 20px;
}
.admin-role-list summary strong {
  min-width: 180px;
  color: var(--ink-strong);
}
.admin-role-list summary code {
  min-width: 180px;
  color: var(--primary-700);
  overflow-wrap: anywhere;
}
.admin-role-list summary > span {
  color: var(--slate-500);
  font-size: 0.75rem;
}
.admin-role-list summary > small {
  padding: 3px 7px;
  border-radius: var(--radius-round);
  background: var(--slate-100);
  color: var(--slate-600);
}
.admin-role-list details > p,
.admin-role-list .permission-chips {
  margin: 0;
  padding: 0 20px 14px;
}
.admin-role-list details > p {
  color: var(--slate-600);
}
.permission-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.permission-chips code {
  padding: 5px 7px;
  border-radius: var(--radius-xs);
  background: var(--primary-50);
  color: var(--primary-800);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* Finance and asset lifecycle runtime */
.runtime-three-column,
.runtime-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.runtime-three-column > .panel,
.runtime-card-grid > .panel {
  min-width: 0;
  overflow: hidden;
}
.runtime-card-grid > article {
  padding: 16px;
}
.runtime-card-grid article > header,
.runtime-card-summary {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.runtime-card-grid article > header > div,
.runtime-card-summary > * {
  min-width: 0;
}
.runtime-card-grid article h3,
.runtime-card-summary h3 {
  margin: 6px 0 2px;
  overflow-wrap: anywhere;
}
.runtime-card-grid article > header > strong,
.runtime-card-summary > strong {
  flex: none;
  white-space: nowrap;
}
.runtime-card-grid progress {
  width: 100%;
  height: 8px;
  margin-top: 14px;
  accent-color: var(--primary-600);
}
.runtime-card-summary {
  display: grid;
  justify-content: stretch;
}
.runtime-card-summary > strong {
  margin-top: 8px;
  color: var(--ink-strong);
  font-size: 1.28rem;
}
.runtime-card-summary > small {
  color: var(--slate-500);
}
.runtime-list li > span:last-child:not(:first-child) {
  display: grid;
  min-width: 0;
  justify-items: end;
  text-align: right;
}
.runtime-list.compact {
  margin-top: 12px;
  padding: 0;
}
.runtime-list.compact li {
  align-items: flex-start;
  flex-wrap: wrap;
}
.runtime-timeline {
  margin: 0;
  padding: 0 18px 18px 34px;
  list-style: none;
}
.runtime-timeline::before {
  top: 8px;
  bottom: 22px;
  left: 21px;
}
.runtime-timeline > li {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 8px 0 14px;
}
.runtime-timeline > li::before {
  position: absolute;
  top: 12px;
  left: -18px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--primary-600);
  box-shadow: 0 0 0 1px var(--primary-300);
  content: "";
}
.runtime-timeline > li p {
  margin: 3px 0;
  overflow-wrap: anywhere;
}
.runtime-timeline > li small {
  color: var(--slate-500);
}
.runtime-negative {
  color: var(--danger-700) !important;
  font-weight: 800;
}
.finance-runtime-screen .runtime-line-items > div {
  grid-template-columns: minmax(180px, 1fr) 90px 130px 90px 150px;
}
.finance-runtime-screen .runtime-line-items > div > :last-child:nth-child(4) {
  grid-column: auto;
}
.finance-runtime-screen .runtime-card-grid .runtime-row-form,
.service-runtime-screen .runtime-contract-grid .runtime-row-form,
.runtime-asset-grid .runtime-row-form,
.asset-runtime-screen .runtime-card-grid .runtime-row-form,
.asset-runtime-screen .runtime-detail-grid .runtime-row-form {
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  margin-top: 12px;
}
.service-runtime-screen .runtime-contract-grid .runtime-row-form > input {
  min-width: 0;
  flex: 1 1 96px;
}
.runtime-asset-grid .runtime-row-form > input,
.runtime-asset-grid .runtime-row-form > select {
  min-width: 0;
  flex: 1 1 120px;
}
.service-runtime-screen .runtime-contract-grid .runtime-row-form > .button,
.runtime-asset-grid .runtime-row-form > .button {
  width: 100%;
  flex: 1 1 100%;
}
.finance-runtime-screen .runtime-card-grid .runtime-stack-form,
.asset-runtime-screen .runtime-card-grid .runtime-stack-form {
  padding: 14px 0 0;
}

@media (max-width: 1180px) {
  .runtime-three-column,
  .runtime-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .runtime-three-column,
  .runtime-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .finance-runtime-screen .runtime-line-items > div,
  .asset-runtime-screen .runtime-line-items > div {
    grid-template-columns: minmax(0, 1fr) 74px;
  }
  .finance-runtime-screen .runtime-line-items > div > :nth-child(n+3),
  .asset-runtime-screen .runtime-line-items > div > :nth-child(n+3) {
    grid-column: 1 / -1;
  }
  .runtime-card-grid article > header {
    flex-direction: column;
  }
  .finance-runtime-screen .runtime-row-form:not(.runtime-table-scroll .runtime-row-form),
  .asset-runtime-screen .runtime-row-form:not(.runtime-table-scroll .runtime-row-form) {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .finance-runtime-screen .runtime-row-form:not(.runtime-table-scroll .runtime-row-form) > *,
  .asset-runtime-screen .runtime-row-form:not(.runtime-table-scroll .runtime-row-form) > * {
    width: 100%;
  }
}

/* Mail operations and browser-native video meetings */
.mail-runtime-toolbar,
.video-provider-banner,
.video-meeting-hero,
.video-room-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px 20px;
}
.mail-runtime-toolbar > div,
.video-provider-banner > div,
.video-meeting-hero > div,
.video-room-header > div { min-width: 0; }
.mail-runtime-toolbar h2,
.video-meeting-hero h2,
.video-room-header h1 { margin: 4px 0; overflow-wrap: anywhere; }
.mail-runtime-toolbar p,
.video-provider-banner p,
.video-meeting-hero p,
.video-room-header p { margin: 0; color: var(--slate-500); }
.mail-runtime-toolbar form { min-width: min(100%, 320px); }
.mail-runtime-toolbar label { display: grid; gap: 5px; }
.mail-runtime-toolbar label > span { color: var(--slate-500); font-size: 0.75rem; font-weight: 800; }
.runtime-user-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
}
.runtime-user-checks legend { padding: 0 5px; color: var(--slate-600); font-size: 0.75rem; font-weight: 800; }
.runtime-table-card td > small { display: block; margin-top: 5px; color: var(--slate-500); line-height: 1.5; }
.mail-label-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--label-color, var(--primary-600)); }
.mail-audit-search .runtime-inline-form { grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(160px, 1fr) auto; }
.mail-runtime-screen .runtime-three-column > .panel,
.video-meeting-screen .runtime-three-column > .panel { min-width: 0; overflow: hidden; }
.mail-runtime-screen .runtime-list .runtime-row-form { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.mail-runtime-message-detail { display: grid; gap: 18px; margin-top: 16px; }
.mail-runtime-message-detail .panel-header { align-items: flex-start; }
.mail-runtime-message-detail .panel-header h2 { margin: 4px 0; overflow-wrap: anywhere; }
.mail-runtime-message-detail .panel-header p { margin: 0; color: var(--slate-500); overflow-wrap: anywhere; }
.mail-runtime-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--slate-600); font-size: 0.75rem; font-weight: 700; }
.mail-runtime-label { padding: 4px 8px; border-radius: 999px; background: var(--primary-50); color: var(--primary-700); }
.mail-runtime-message-body { min-height: 140px; padding: 20px; border: 1px solid var(--slate-150); border-radius: var(--radius-sm); background: var(--slate-50); color: var(--slate-800); line-height: 1.75; overflow-wrap: anywhere; white-space: normal; }
.mail-runtime-message-detail h3 { margin: 0 0 10px; font-size: .82rem; }

.video-provider-banner { border-left: 4px solid var(--success-500); }
.video-provider-banner.is-blocked { border-left-color: var(--danger-500); }
.video-provider-banner > div { display: flex; align-items: center; gap: 12px; }
.video-provider-banner > div > .ci-icon { width: 34px; height: 34px; flex: none; color: var(--primary-700); }
.video-provider-banner > div span { display: grid; gap: 3px; }
.video-provider-banner small { color: var(--slate-500); }
.video-meeting-layout { display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
.video-meeting-sidebar { min-width: 0; overflow: hidden; }
.video-meeting-list { display: grid; max-height: 540px; overflow-y: auto; border-top: 1px solid var(--slate-150); }
.video-meeting-list > a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--slate-150); color: var(--slate-800); }
.video-meeting-list > a:hover,
.video-meeting-list > a.is-active { background: var(--primary-50); }
.video-meeting-list > a > span:first-child { display: grid; min-width: 0; gap: 3px; }
.video-meeting-list strong,
.video-meeting-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-meeting-list small { color: var(--slate-500); font-size: 0.75rem; }
.video-meeting-main { min-width: 0; }
.video-meeting-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.video-meeting-actions form { margin: 0; }
.video-meeting-summary { margin-top: 16px; overflow: hidden; }
.video-meeting-summary h3 { padding: 0 16px; }
.video-summary-body { margin: 0 18px 18px; padding: 16px; border-radius: var(--radius-sm); background: var(--slate-50); color: var(--slate-700); line-height: 1.7; }

.video-room { min-height: calc(100vh - 150px); min-height: calc(100dvh - 150px); padding-bottom: 92px; }
.video-room-header { margin: 0 0 14px; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.video-room-header > div:last-child { display: flex; align-items: center; gap: 8px; }
.video-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.video-tile { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #24324a; border-radius: 16px; background: #111827; color: #fff; box-shadow: var(--shadow-md); }
.video-tile video { width: 100%; height: 100%; object-fit: cover; background: #111827; }
.video-tile:not(.has-media) video { visibility: hidden; }
.video-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; background: radial-gradient(circle at 50% 25%, #334155, #111827 70%); }
.video-placeholder[hidden],
.video-tile.has-media .video-placeholder { display: none; }
.video-placeholder .ci-icon { width: 46px; height: 46px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,.12); }
.video-placeholder small { color: #cbd5e1; }
.video-tile > footer { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 12px 10px; background: linear-gradient(transparent,rgba(0,0,0,.72)); font-size: 0.75rem; font-weight: 800; }
.video-room-controls { position: fixed; z-index: 24; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); left: calc(var(--sidebar-width, 248px) + 18px); display: flex; width: fit-content; max-width: calc(100vw - var(--sidebar-width, 248px) - 36px); margin: auto; padding: 8px; overflow-x: auto; border: 1px solid var(--slate-700); border-radius: 18px; background: rgba(15,23,42,.94); box-shadow: 0 18px 50px rgba(15,23,42,.28); backdrop-filter: blur(14px); }
.video-room-controls form { display: contents; }
.video-control { display: grid; min-width: 72px; place-items: center; gap: 4px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: #cbd5e1; font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.video-control .ci-icon { width: 20px; height: 20px; }
.video-control:hover,
.video-control.is-active { background: rgba(255,255,255,.12); color: #fff; }
.video-control.is-danger { color: #fecaca; }
.video-control.is-danger:hover { background: var(--danger-700); color: #fff; }

@media (max-width: 1180px) {
  .runtime-user-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-meeting-layout { grid-template-columns: minmax(245px, 290px) minmax(0, 1fr); }
  .video-stage { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .video-room-controls { left: 18px; max-width: calc(100vw - 36px); }
}

@media (max-width: 720px) {
  .mail-runtime-toolbar,
  .video-provider-banner,
  .video-meeting-hero,
  .video-room-header { align-items: stretch; flex-direction: column; }
  .mail-runtime-toolbar form { min-width: 0; width: 100%; }
  .runtime-user-checks,
  .video-meeting-layout { grid-template-columns: minmax(0, 1fr); }
  .mail-audit-search .runtime-inline-form { grid-template-columns: minmax(0, 1fr); }
  .mail-audit-search .runtime-inline-form .wide { grid-column: auto; }
  .mail-runtime-screen .runtime-list li { align-items: flex-start; flex-direction: column; }
  .mail-runtime-screen .runtime-list li > form { width: 100%; }
  .mail-runtime-screen .runtime-list .runtime-row-form { justify-content: stretch; }
  .mail-runtime-screen .runtime-list .runtime-row-form > * { width: 100%; }
  .mail-runtime-message-detail .panel-header { align-items: stretch; flex-direction: column; }
  .mail-runtime-message-detail .panel-header .button { width: 100%; }
  .video-meeting-sidebar { order: 2; }
  .video-meeting-main { order: 1; }
  .video-meeting-actions { justify-content: flex-start; }
  .video-meeting-actions form,
  .video-meeting-actions .button { width: 100%; }
  .video-room { min-height: calc(100vh - 110px); min-height: calc(100dvh - 110px); padding-bottom: calc(var(--mobile-nav-height) + 58px + env(safe-area-inset-bottom)); }
  .video-room-header > div:last-child { align-items: stretch; flex-direction: column; }
  .video-stage { gap: 8px; }
  .video-tile { aspect-ratio: 4 / 3; border-radius: 12px; }
  .video-room-controls { right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); left: 8px; width: auto; max-width: none; justify-content: flex-start; border-radius: 14px; }
  .video-control { min-width: 62px; padding: 7px; }
}

@media (max-width: 1180px) {
  .compact-admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compact-admin-form > .button {
    grid-column: 1/-1;
  }
  .permission-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-permission-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-two-column,
  .compact-admin-form,
  .permission-checks,
  .admin-permission-matrix {
    grid-template-columns: 1fr;
  }
  .compact-admin-form > .button {
    grid-column: auto;
  }
  .admin-invitation-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .admin-invitation-list li > form {
    grid-column: 1/-1;
  }
  .admin-user-list summary,
  .admin-role-list summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .admin-user-list summary small {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .admin-user-list summary > .status-badge {
    margin-left: 48px;
  }
  .admin-role-list summary strong,
  .admin-role-list summary code {
    min-width: 0;
    width: calc(100% - 24px);
  }
  .admin-role-list summary::after {
    position: absolute;
    right: 20px;
  }
}