/* ==========================================================================
   mdb.css — оформление справочника веществ (base.html) и калькулятора
   пожарной нагрузки (load.html) на pzh-risk.ru.
   ========================================================================== */

.mdb{display:grid;gap:16px}

.mdb__bar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
}
.mdb__field{display:flex;flex-direction:column;gap:6px;min-width:180px;flex:1 1 220px}
.mdb__field--wide{flex:2 1 320px}
.mdb__label{font:600 11px/1.35 var(--d-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted)}
.mdb__in{
  width:100%;font:inherit;font-size:.95rem;color:var(--d-ink);background:var(--d-white);
  border:1.5px solid var(--d-line);border-radius:10px;padding:10px 12px;
}
.mdb__in:focus{outline:none;border-color:var(--d-blue);box-shadow:0 0 0 4px rgba(42,99,160,.14)}
.mdb__sel{
  width:100%;font:inherit;font-size:.9rem;color:var(--d-ink);background:var(--d-white);
  border:1.5px solid var(--d-line);border-radius:10px;padding:9px 10px;
}
.mdb__chips{display:flex;gap:8px;flex-wrap:wrap}
.mdb__chip{
  font:600 12.5px/1.3 var(--d-f);padding:6px 12px;border-radius:999px;
  border:1.5px solid var(--d-line);background:var(--d-white);color:var(--d-ink-2);cursor:pointer;
}
.mdb__chip[aria-pressed="true"]{background:var(--d-blue);border-color:var(--d-blue);color:#fff}
.mdb__chip:hover{border-color:var(--d-blue)}

.mdb__meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font:500 13px/1.4 var(--d-mono);color:var(--d-muted)}
.mdb__meta b{color:var(--d-ink);font-weight:700}

/* --- таблица результатов --- */
.mdb__tablewrap{overflow-x:auto;border:1px solid var(--d-line);border-radius:var(--d-r);background:var(--d-white)}
.mdb__table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:820px}
.mdb__table th,.mdb__table td{padding:9px 12px;border-bottom:1px solid var(--d-line-2);text-align:left;vertical-align:top}
.mdb__table thead th{
  font:600 11px/1.35 var(--d-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted);
  background:var(--d-soft);border-bottom:2px solid var(--d-line);position:sticky;top:0;z-index:2;
}
.mdb__table tbody tr{cursor:pointer}
.mdb__table tbody tr:hover{background:var(--d-blue-4)}
.mdb__table tbody tr[aria-selected="true"]{background:var(--d-blue-3)}
.mdb__num{text-align:right;font-family:var(--d-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mdb__name{font-weight:600;color:var(--d-ink)}
.mdb__alias{color:var(--d-mute-2);font-size:.84rem}
.mdb__tag{
  display:inline-block;padding:2px 8px;border-radius:99px;background:var(--d-blue-3);
  color:var(--d-blue-ink);font:600 11.5px/1.4 var(--d-mono);white-space:nowrap;
}
.mdb__tag--solid{background:#eceff3;color:var(--d-ink-2)}
.mdb__tag--gas{background:#e6f0e9;color:var(--d-green)}
.mdb__tag--dust{background:var(--d-amber-soft);color:var(--d-amber)}
.mdb__tag--unknown{background:var(--d-line-2);color:var(--d-mute-2)}

.mdb__pager{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mdb__pager button{
  font:inherit;font-size:.9rem;font-weight:600;border-radius:999px;padding:9px 18px;cursor:pointer;
  border:1.5px solid var(--d-line);background:var(--d-white);color:var(--d-ink-2);
}
.mdb__pager button:disabled{opacity:.45;cursor:default}
.mdb__pager button:not(:disabled):hover{border-color:var(--d-blue);color:var(--d-blue-ink)}

/* --- карточка вещества --- */
.mdb__card{display:grid;gap:14px}
.mdb__cardhead{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.mdb__cardhead h3{margin:0;font-size:1.1rem;line-height:1.3;letter-spacing:-.015em}
.mdb__props{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mdb__prop{border:1px solid var(--d-line);border-radius:var(--d-r-sm);padding:10px 12px;background:var(--d-soft)}
.mdb__prop b{display:block;font:600 11px/1.4 var(--d-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--d-muted)}
.mdb__prop span{display:block;font:600 15px/1.35 var(--d-mono);color:var(--d-ink);margin-top:4px}
.mdb__prop em{display:block;font-style:normal;font-size:.78rem;color:var(--d-mute-2);margin-top:3px}

/* --- таблица наблюдений --- */
.mdb__obs{width:100%;border-collapse:collapse;font-size:.86rem;min-width:720px}
.mdb__obs th,.mdb__obs td{padding:8px 10px;border-bottom:1px solid var(--d-line-2);text-align:left;vertical-align:top}
.mdb__obs thead th{font:600 11px/1.35 var(--d-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--d-muted)}
.mdb__src{font-size:.8rem;color:var(--d-mute-2)}
.mdb__src a{color:var(--d-blue-ink)}

.mdb__legend{display:grid;gap:8px}
.mdb__legend div{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--d-ink-2)}
.mdb__legend b{flex:none;font:600 11.5px/1.5 var(--d-mono);letter-spacing:.04em}

.mdb__note{
  border-left:3px solid var(--d-amber);background:var(--d-amber-soft);
  padding:12px 16px;border-radius:0 var(--d-r-sm) var(--d-r-sm) 0;font-size:.9rem;color:var(--d-ink-2);
}
.mdb__note--info{border-left-color:var(--d-blue);background:var(--d-blue-4)}

.mdb__status{font:500 13px/1.4 var(--d-mono);color:var(--d-muted)}

/* --- калькулятор --- */
.load{display:grid;gap:12px}
.load__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.load__cell{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1.5px solid var(--d-line);border-radius:var(--d-r);background:var(--d-white)}
.load__cell--in{background:var(--d-blue-4);border-color:#c6d7e5}
.load__cell--res{align-items:center;justify-content:center;border-color:var(--d-blue)}
.load__cell--res.bad{border-color:var(--d-red);background:#fdf3f2}
.load__cell--res.good{border-color:var(--d-green);background:#f2f9f4}
.load__cell--wide{grid-column:1/-1}
.load__label{font:600 11px/1.35 var(--d-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted)}
.load__val{font:700 20px/1.2 var(--d-mono);color:var(--d-blue-ink);text-align:center;font-variant-numeric:tabular-nums}
.load__val--cat{font-size:28px}
.load__hint{font-size:.78rem;color:var(--d-mute-2)}
.load__items{width:100%;border-collapse:collapse;font:500 13px/1.45 var(--d-mono)}
.load__items th,.load__items td{padding:8px 10px;border-bottom:1px solid var(--d-line-2);text-align:left;vertical-align:top}
.load__items th{font:600 11px/1.35 var(--d-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--d-muted)}
.load__items input{width:100%;font:inherit;font-size:.88rem;padding:6px 8px;border:1px solid var(--d-line);border-radius:8px}
.load__items td.n{text-align:right;white-space:nowrap}
.load__scroll{overflow-x:auto}
.load__flags{display:grid;gap:6px}
.load__flags div{font-size:.88rem;color:var(--d-ink-2);padding-left:18px;position:relative}
.load__flags div::before{content:"•";position:absolute;left:4px;color:var(--d-amber)}

.picker{position:relative}
.picker__list{
  position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:320px;overflow:auto;
  background:var(--d-white);border:1.5px solid var(--d-line);border-radius:var(--d-r-sm);
  box-shadow:var(--d-shadow-2);
}
.picker__list[hidden]{display:none}
.picker__opt{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--d-line-2)}
.picker__opt:hover,.picker__opt[aria-selected="true"]{background:var(--d-blue-4)}
.picker__opt b{display:block;font-size:.9rem;font-weight:600}
.picker__opt span{display:block;font:500 12px/1.4 var(--d-mono);color:var(--d-mute-2)}

@media (max-width:820px){
  .load__grid{grid-template-columns:1fr}
  .mdb__field{flex:1 1 100%}
}