/*
 * geo_form.css — форма «Посчитать» у инструмента геоанализа (#1154, Ф3).
 *
 * Тёмная тема в тон общему CSS раздела (api/geo_showcase_layout.CSS). Форма
 * стоит и в карточке группы (узкая колонка сетки), и на странице инструмента
 * (широкая колонка), поэтому вся раскладка — на auto-fit сетке: на телефоне
 * поля встают в один столбец, горизонтальной прокрутки не появляется.
 *
 * Ассет отдаётся nginx как immutable на год — при правке поднимать ?v= в
 * api/geo_showcase_layout.GEO_FORM_CSS_URL (сторож test_asset_version_tag_parity).
 */
.geo-form {
  min-width: 0;
  margin: 16px 0 0;
  padding: 16px;
  background: #0b1220;
  border: 1px solid #1e3a5f;
  border-radius: 12px;
  overflow-x: hidden;
}
.gf-title {
  font-size: 1rem;
  color: #e2e8f0;
  margin: 0 0 12px;
}
.gf-map {
  height: 320px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #64748b;
  font-size: .85rem;
  padding: 10px;
  z-index: 0;
}
.gf-label {
  display: block;
  font-size: .82rem;
  color: #94a3b8;
  margin-bottom: 4px;
}
.gf-req {
  color: #fbbf24;
  font-size: .74rem;
}
.gf-hint {
  display: block;
  font-size: .74rem;
  color: #64748b;
  margin-top: 3px;
}
.gf-frame {
  margin-top: 14px;
}
/*
 * min() в минимуме дорожки — не украшение: голый `minmax(110px, 1fr)` даёт
 * колонке НЕСЖИМАЕМЫЙ минимум и поднимает min-content всей карточки группы,
 * то есть форма могла бы сама принести горизонтальную прокрутку на телефоне.
 * С min(110px, 100%) дорожка честно схлопывается по месту.
 */
.gf-corners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  gap: 8px;
  min-width: 0;
}
.gf-corner span {
  display: block;
  font-size: .74rem;
  color: #64748b;
}
.gf-area {
  font-size: .82rem;
  color: #7dd3fc;
  margin-top: 8px;
}
.gf-geo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  min-width: 0;
}
.gf-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
  min-width: 0;
}
.gf-noparams {
  font-size: .85rem;
  color: #64748b;
  margin-top: 12px;
}
.gf-field input,
.gf-field select,
.gf-field textarea,
.gf-corner input {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .9rem;
  font-family: inherit;
}
.gf-field input:focus,
.gf-field select:focus,
.gf-field textarea:focus,
.gf-corner input:focus {
  outline: none;
  border-color: #60a5fa;
}
.gf-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gf-check input {
  width: auto;
}
.gf-bbox-b {
  grid-column: 1 / -1;
}
.gf-point-note {
  font-size: .8rem;
  color: #64748b;
  margin-top: 8px;
}
.gf-btn {
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  font-family: inherit;
}
.gf-btn-run {
  margin-top: 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}
.gf-btn-ghost {
  background: #0f172a;
  border-color: #334155;
  color: #93c5fd;
}
.gf-btn-ghost:hover {
  background: #1e3a5f;
}
.gf-status {
  font-size: .85rem;
  color: #94a3b8;
  margin-top: 10px;
  min-height: 1em;
}
.gf-error {
  font-size: .88rem;
  color: #fca5a5;
  background: #1f1417;
  border: 1px solid #7f1d1d;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
}
.gf-error[hidden] {
  display: none;
}
.gf-error ul {
  margin: 6px 0 0 18px;
}
.gf-login {
  color: #93c5fd;
  font-weight: 700;
  cursor: pointer;
}
.gf-result {
  margin-top: 12px;
}
.gf-result[hidden] {
  display: none;
}
.gf-notice {
  font-size: .85rem;
  color: #fde68a;
  background: #241d10;
  border: 1px solid #78350f;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.gf-notice[hidden] {
  display: none;
}
.gf-metrics[hidden],
.gf-meta[hidden] {
  display: none;
}
.gf-metrics td,
.gf-meta td {
  font-size: .84rem;
  word-break: break-word;
}
.gf-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.gf-quota {
  font-size: .82rem;
  color: #4ade80;
  margin-top: 10px;
  min-height: 1em;
}
@media (max-width: 640px) {
  .geo-form {
    padding: 12px;
  }
  .gf-map {
    height: 260px;
  }
  .gf-params,
  .gf-geo {
    grid-template-columns: 1fr;
  }
}