/* Responsive content layout only. The site header is intentionally untouched. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.workspace,
.workspace *,
.detail-panel,
.help-dialog,
.warning-dock {
  min-width: 0;
}

.workspace img,
.workspace svg,
.workspace canvas {
  max-width: 100%;
}

@media (min-width: 861px) and (max-width: 1680px) {
  .workspace {
    padding: clamp(16px, 1.5vw, 22px);
  }

  body[data-view="events"] .workspace {
    padding: clamp(14px, 1.35vw, 20px);
    padding-bottom: 0;
  }

  .topbar {
    gap: 12px;
    margin-bottom: 12px;
  }

  .topbar h1 {
    font-size: clamp(24px, 2vw, 28px);
  }

  .status-strip,
  .kpi-grid,
  .dashboard-grid,
  .overview-extra-grid {
    gap: clamp(10px, 1vw, 13px);
    margin-bottom: clamp(10px, 1vw, 13px);
  }

  .status-strip div {
    padding: 10px 12px;
  }

  .kpi-card {
    padding: clamp(12px, 1.1vw, 15px);
  }

  .kpi-card strong {
    font-size: clamp(27px, 2.2vw, 32px);
  }

  .map-panel,
  .chart-panel,
  .hotword-panel,
  .trend-panel,
  .table-panel,
  .task-panel,
  .skill-panel,
  .security-panel,
  .preference-panel {
    padding: clamp(13px, 1.2vw, 17px);
  }

  .section-head {
    gap: 10px;
    margin-bottom: 11px;
  }

  .map-canvas {
    height: clamp(290px, 27vw, 360px);
  }

  .event-workbench {
    gap: 10px;
    padding: 10px;
  }

  body[data-view="events"] .table-head {
    gap: 8px;
    padding: 10px;
  }

  body[data-view="events"] .filters {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 7px;
  }

  .task-layout,
  .skill-layout,
  .skill-work-grid,
  .skill-document-layout,
  .security-layout,
  .profile-layout,
  .user-layout,
  .preference-layout,
  .fast-results,
  .help-layout {
    gap: clamp(10px, 1.1vw, 15px);
  }

  .skill-tree,
  .skill-workspace {
    min-height: clamp(500px, 48vw, 620px);
  }

  .task-report pre {
    min-height: clamp(210px, 22vw, 260px);
    max-height: min(460px, 55vh);
  }

  .skill-doc-preview pre {
    min-height: clamp(340px, 36vw, 440px);
    max-height: min(620px, 65vh);
  }

  .help-dialog {
    width: min(1120px, calc(100vw - 32px));
    height: min(760px, calc(100vh - 32px));
    margin: 16px auto;
  }

  .warning-dock {
    max-width: calc(100vw - 32px);
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .status-strip,
  .kpi-grid,
  .security-status-grid,
  .preference-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .overview-extra-grid,
  .task-layout,
  .skill-work-grid,
  .skill-document-layout,
  .security-layout,
  .profile-layout,
  .user-layout,
  .preference-layout,
  .fast-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .skill-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .map-canvas {
    height: clamp(280px, 40vw, 340px);
  }

  .permission-grid,
  .user-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-event-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-event-result {
    justify-self: start;
  }

  .skill-tree,
  .skill-workspace {
    min-height: auto;
  }
}

@media (min-width: 861px) and (max-width: 980px) {
  .skill-layout,
  .help-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .filters,
  .security-filters {
    gap: 7px;
  }
}

@media (min-width: 1921px) {
  .workspace {
    padding: 28px 32px;
  }

  body[data-view="events"] .workspace {
    padding: 28px 32px 0;
  }

  .status-strip,
  .kpi-grid,
  .dashboard-grid,
  .overview-extra-grid {
    gap: 16px;
    margin-bottom: 16px;
  }

  .map-panel,
  .chart-panel,
  .hotword-panel,
  .trend-panel,
  .table-panel,
  .task-panel,
  .skill-panel,
  .security-panel,
  .preference-panel {
    padding: 18px;
  }

  .map-canvas {
    height: clamp(380px, 22vw, 440px);
  }
}