@import url("../ui-kit/core/km-ui.css");

/* Здесь остаются только правила runtime-областей Viewer, отсутствующих в UI Kit. */
body {
  height: 100dvh;
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr) 6px var(--viewer-bottom, 112px);
  overflow: hidden;
}
.brand { white-space: nowrap; }
.brand strong { font-size: 18px; }
.km-viewer-header { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; }
.km-viewer-header .km-toolbar { border: 0; padding: 0; }
.mobile-panels { border: 0; }
.panel { border-block: 0; overflow: hidden; }
.explorer { border-left: 0; }
.properties { border-right: 0; }
.km-panel__header h1, .km-panel__header h2 { margin: 0; font: inherit; }
.search { display: grid; width: 100%; gap: var(--km-space-1); }
.filters { justify-content: flex-start; flex-wrap: wrap; }
.viewport canvas { width: 100%; height: 100%; display: block; }
.view-tools { position: absolute; top: var(--km-space-3); left: var(--km-space-3); }
#viewport-hint { position: absolute; bottom: var(--km-space-2); left: var(--km-space-4); color: var(--km-color-muted); }
.technical-panel { background: var(--km-color-paper); overflow: hidden; }
.technical-panel__header { display: flex; gap: var(--km-space-2); padding: var(--km-space-1) var(--km-space-3); border-bottom: var(--km-border-default); }
.technical-panel__content { height: calc(100% - 39px); overflow: auto; padding: var(--km-space-2) var(--km-space-4); }
.technical-panel dl { display: grid; grid-template-columns: repeat(8, minmax(90px, auto)); gap: 2px var(--km-space-3); margin: 0; }
.technical-panel dt { color: var(--km-color-muted); }
.technical-panel dd { margin: 0; font-variant-numeric: tabular-nums; }
.technical-panel ol { margin: var(--km-space-2) 0; padding-left: var(--km-space-5); }
.technical-panel .error { color: var(--km-color-error); }
.technical-panel .warning { color: #755600; }
.splitter { z-index: 5; background: var(--km-color-soft); touch-action: none; }
.splitter:hover, .splitter:focus-visible { background: var(--km-color-focus); }
.splitter--column { cursor: col-resize; }
.splitter--row { cursor: row-resize; }
#properties-form fieldset { border: 0; margin: 0 0 var(--km-space-4); padding: 0; }
#properties-form legend { width: 100%; padding: var(--km-space-2) 0; border-bottom: var(--km-border-default); font: 700 11px var(--km-font-mono); text-transform: uppercase; }
#properties-form label { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: var(--km-space-3); padding: var(--km-space-2) 0; border-bottom: 1px solid #aaa69d; color: var(--km-color-muted); }
#properties-form output { color: var(--km-color-ink); overflow-wrap: anywhere; font-family: var(--km-font-mono); }
dialog form, dialog label { display: grid; gap: var(--km-space-3); }
@media (max-width: 1023px) { .km-viewer-header { grid-template-columns: auto minmax(0, 1fr); } #status { display: none; } }
@media (max-width: 767px) {
  body { grid-template-rows: auto minmax(0, 1fr) 112px; }
  .km-viewer-header { display: flex; min-height: 60px; overflow-x: auto; }
  .brand { display: none; }
  .km-viewer-header > .toolbar { flex-wrap: nowrap; }
  .km-viewer-header > .toolbar #close, .km-viewer-header > .toolbar #save { display: none; }
  .view-tools { inset: auto var(--km-space-2) var(--km-space-2); flex-wrap: nowrap; overflow-x: auto; }
  .splitter { display: none; }
  .technical-panel { grid-row: 3; }
  .technical-panel__content { padding: var(--km-space-1) var(--km-space-2); }
}
@media (min-width: 768px) and (max-width: 1023px) { .splitter--column { display: none; } }