/* /data/iran-population/ — the province atlas: comparison form, meta line,
   share row, market-size estimator and the method list.
   Loaded only by livedata/templates/livedata/iran_population.html.
   kh.css already provides .kh-field/.kh-input/.kh-btn/.kh-chip/.kh-tag/
   .kh-dash__table/.kh-picker__*; nothing here restyles those globally. */

.kh-atlas__form { margin-bottom: var(--sp-4); }
.kh-atlas__form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-4);
}
.kh-atlas__field { margin-bottom: var(--sp-3); }
.kh-atlas__select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 16px;
  cursor: pointer;
}
[dir='ltr'] .kh-atlas__select { background-position: right 1rem center; }
.kh-atlas__select option { color: var(--text); background: var(--surface); }
.kh-atlas__provinces { margin-bottom: var(--sp-3); }
.kh-atlas__provinces .kh-picker__chips { gap: 0.3rem; }

/* the "what am I looking at" line — a definition list, not a boxed stat strip */
.kh-atlas__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  margin: 0 0 var(--sp-3);
  padding: 0.6rem 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-caption);
}
.kh-atlas__meta > div { display: flex; gap: 0.4rem; align-items: baseline; }
.kh-atlas__meta dt { color: var(--text-3); white-space: nowrap; }
.kh-atlas__meta dt::after { content: ':'; }
.kh-atlas__meta dd { margin: 0; color: var(--text-2); }

.kh-atlas__warn {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--text-2);
  line-height: 1.8;
}

.kh-atlas__table td { font-variant-numeric: tabular-nums; }
/* Symmetric, not padding-inline-end: the population cell carries dir="ltr"
   so that its digits and separators read correctly, and a logical padding
   resolves against the *cell's* direction, not the table's. With an
   end-only gap the LTR cell put its space on the side facing the province
   name and left the side facing the share column bare — while that column,
   being RTL, left its facing side bare too. The two numbers ended up two
   pixels apart and read as one value ("۱۶٫۵٪ ۱۳٬۳۲۳٬۰۰۰"). Half the gap on
   each side survives any direction the cell declares. */
.kh-atlas__table th,
.kh-atlas__table td { padding-inline: 0.45rem; }
.kh-atlas__table th:first-child,
.kh-atlas__table td:first-child,
.kh-atlas__table th:last-child,
.kh-atlas__table td:last-child { padding-inline: 0.45rem; }
.kh-atlas__table tfoot th {
  text-align: start;
  padding-top: 0.5rem;
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.kh-atlas__note { display: block; font-size: 0.72rem; }
.kh-atlas__nomatch { margin: var(--sp-2) 0 0; font-size: var(--fs-caption); }

/* share row: read-only link + copy + CSV */
.kh-atlas__share { margin-top: var(--sp-4); }
.kh-atlas__share-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-2);
}
.kh-atlas__share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.kh-atlas__share-input {
  flex: 1 1 18rem;
  min-width: 0;
  min-height: 38px;
  padding-block: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-2);
  text-overflow: ellipsis;
}
.kh-atlas__share-row [data-copy-link].is-copied {
  border-color: var(--pos);
  color: var(--pos);
}

.kh-atlas__limits {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-3);
  line-height: 1.9;
}
.kh-atlas__limits strong { color: var(--text-2); }

/* estimator */
.kh-atlas__estimator-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.9;
}
.kh-atlas__est-form { max-width: 48rem; }
.kh-atlas__field--invalid .kh-input { border-color: var(--neg); }
.kh-atlas__error {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--neg);
  line-height: 1.7;
}
.kh-atlas__est-result { margin-top: var(--sp-5); }
.kh-atlas__est-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--sp-2);
  font-size: 1.05rem;
}
.kh-atlas__est-assumptions {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--text-2);
  line-height: 1.9;
}

/* method list */
.kh-atlas__method-list { margin: 0; }
.kh-atlas__method-list > div { margin-bottom: var(--sp-3); }
.kh-atlas__method-list dt { font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.kh-atlas__method-list dd { margin: 0; font-size: var(--fs-small); color: var(--text-2); line-height: 1.9; }
.kh-atlas__method-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: var(--sp-3) 0 0; font-size: var(--fs-small); }

@media (max-width: 640px) {
  .kh-atlas__form-row { grid-template-columns: 1fr; }
  .kh-atlas__meta { flex-direction: column; gap: 0.3rem; }
}