/* Вид не важен, важна читаемость и то, чтобы всё было видно сразу. */
* { box-sizing: border-box }
body { font: 14px/1.45 system-ui, sans-serif; margin: 0; color: #1a1a1a }
:root { --hdr: 58px }
main { padding: 16px 20px 60px; max-width: 1500px }

header { position: sticky; top: 0; background: #fff; z-index: 10;
         border-bottom: 1px solid #ccc; padding: 8px 20px 0 }
.nums { display: flex; gap: 26px; align-items: baseline; padding-bottom: 6px;
         flex-wrap: wrap }
/* Домен стоит слева от трёх чисел и отделён чертой: это не четвёртая
   метрика, а ответ на вопрос «чего именно эти три числа». */
.num.domain { display: flex; align-items: center; gap: 4px;
              padding-right: 18px; border-right: 1px solid #ddd }
.num.domain select { font-size: 13px; font-weight: 600; padding: 2px 4px;
                     border: 1px solid #ccc; max-width: 220px }
button.tiny { font-size: 12px; line-height: 1; padding: 3px 7px }
.num { color: #555; font-size: 13px }
.num b { font-size: 17px; color: #111; margin-left: 4px }
.num em { color: #888; font-style: normal; font-size: 12px }
.num i { font-style: normal; font-weight: 600; margin-left: 5px; font-size: 12px }
.num i.up { color: #176b28 } .num i.down { color: #a11 }

nav { display: flex; gap: 2px }
nav a { padding: 7px 13px; text-decoration: none; color: #25c; font-size: 13px;
        border: 1px solid transparent; border-bottom: none }
nav a.on { background: #f3f3f3; border-color: #ccc; color: #111; font-weight: 600 }

h1 { font-size: 17px; margin: 0 0 4px }
.sub { color: #666; font-size: 12px; margin-bottom: 14px }

/* separate, а не collapse: при collapse position:sticky на th не
   работает и шапка таблицы уезжает вместе с прокруткой. Границы и так
   заданы на ячейках снизу, так что вид не меняется. */
table { border-collapse: separate; border-spacing: 0; width: 100%;
        font-size: 13px }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #e6e6e6;
         vertical-align: top }
/* Шапка таблицы липнет под шапкой страницы. Смещение должно совпадать
   с её высотой: больше — и первые строки проезжают в щель над ним. */
th { background: #f5f5f5; font-weight: 600; font-size: 12px;
     position: sticky; top: var(--hdr); z-index: 1;
     box-shadow: inset 0 -1px 0 #ccc }
tbody tr:hover { background: #fafafa }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
/* Каталог шире экрана и длиннее его. Прокрутка своя, а не страничная:
   sticky в th считается от ближайшего прокручиваемого предка, и при
   странице-скроллере шапка таблицы уезжает вместе с содержимым. */
.scroll { overflow: auto; border: 1px solid #ddd;
          max-height: calc(100vh - 170px) }
.scroll th { top: 0 }

button, .btn { font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
       border: 1px solid #999; background: #fff; border-radius: 3px }
button:hover { background: #f0f0f0 }
button.go { border-color: #176b28; color: #176b28 }
button.no { border-color: #a11; color: #a11 }
button.big { font-size: 13px; padding: 6px 14px }
select, input[type=text], input[type=number], input[type=search] {
  font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid #aaa }
input[type=search] { width: 260px }

.box { border: 1px solid #ddd; padding: 12px 14px; margin-bottom: 14px }
.box h2 { font-size: 14px; margin: 0 0 8px }
.bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
       margin-bottom: 12px }

.gap-group { margin-bottom: 16px }
.gap-group > h3 { font-size: 13px; margin: 0 0 6px; font-weight: 600 }
.gap-row { display: flex; align-items: center; gap: 10px; padding: 3px 0 3px 14px }
.gap-row .k { flex: 0 0 300px }
.gap-row .n { flex: 0 0 50px; text-align: right; font-variant-numeric: tabular-nums }
.gap-items { padding: 6px 0 8px 28px; font-size: 12px; color: #555 }

.rule { border: 1px solid #ddd; padding: 10px 12px; margin-bottom: 10px }
.rule.gone { opacity: .35 }
.rule h3 { font-size: 13px; margin: 0 0 5px; font-weight: 600 }
.rule .cond { font-size: 13px; margin: 2px 0 }
.rule .meta { color: #666; font-size: 12px; margin: 5px 0 }
.rule .ex { font-size: 12px; color: #444; padding-left: 14px }
.rule .ex.bad { color: #a11 }
.tag { font-size: 11px; padding: 1px 6px; border: 1px solid #bbb;
       border-radius: 9px; color: #555; margin-left: 6px }
.tag.data { border-color: #176b28; color: #176b28 }

.hole { color: #a11 }
.warnbox { background: #fdf0e6; border-left: 3px solid #d70; padding: 8px 10px;
           font-size: 13px; margin-bottom: 12px }
.okbox { background: #eef7ee; border-left: 3px solid #176b28; padding: 8px 10px;
         font-size: 13px; margin-bottom: 12px }
.nonebox { background: #f3f3f3; padding: 12px; font-size: 13px; margin-bottom: 12px }

#toast { position: fixed; right: 18px; bottom: 18px; display: flex;
         flex-direction: column; gap: 6px; z-index: 50 }
#toast div { background: #1a1a1a; color: #fff; padding: 8px 14px;
             font-size: 13px; border-radius: 3px }

dialog { border: 1px solid #888; padding: 0; max-width: 860px; width: 90% }
dialog .head { padding: 10px 14px; border-bottom: 1px solid #ddd;
               font-weight: 600; font-size: 14px }
dialog .body { padding: 12px 14px; max-height: 70vh; overflow: auto }
dialog .foot { padding: 8px 14px; border-top: 1px solid #ddd; text-align: right }
dl { margin: 0; display: grid; grid-template-columns: 190px 1fr; gap: 2px 10px;
     font-size: 13px }
dt { color: #666 } dd { margin: 0 }
/* Разбор запроса стоит в узкой колонке: там на две колонки места нет,
   и значение сжимается в столбик по одному слову. */
dl.stack { display: block }
dl.stack dt { font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
              margin-top: 8px }
dl.stack dt:first-child { margin-top: 0 }
dl.stack dd { margin: 0 0 2px }