/* Page: cities.html */

.city-controls{
  display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;
  padding:1.2rem 1.4rem;margin-top:1.5rem;
  background:var(--white);border:1px solid var(--ink);
  box-shadow:5px 5px 0 0 var(--ink);border-radius:2px;
}
.city-controls label{display:flex;flex-direction:column;gap:.3rem}
.city-controls__search{flex:1;min-width:240px}
.city-controls input,
.city-controls select{
  font-family:var(--display);font-size:1rem;padding:.55rem .9rem;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  border-radius:2px;min-width:170px;
}
.view-toggle{display:flex;border:1px solid var(--ink);border-radius:2px;overflow:hidden}
.vt{
  background:var(--paper);border:0;padding:.6rem 1rem;
  font-family:var(--mono);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  color:var(--ink);cursor:pointer;
}
.vt.is-on{background:var(--ink);color:var(--paper)}
.vt + .vt{border-left:1px solid var(--ink)}

.alpha-index{
  display:flex;flex-wrap:wrap;gap:.3rem;
  margin:1.2rem 0 0;
  font-family:var(--mono);font-size:.8rem;
  letter-spacing:.08em;
}
.alpha-index a{
  padding:.25rem .55rem;border:1px solid var(--rule);
  color:var(--ink);transition:background .15s, color .15s;
}
.alpha-index a:hover{background:var(--ink);color:var(--paper)}
.alpha-index a.is-empty{color:var(--slate);pointer-events:none;opacity:.4}

/* List view variant */
.view-list{display:block;border:0;border-top:1px solid var(--rule)}
.view-list .city-card{
  display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:1rem;
  padding:1rem 1.2rem;
  border:0;border-bottom:1px solid var(--rule);
}
.view-list .city-card__head{margin:0;flex:1}
.view-list .city-card__name{font-size:1.1rem}
.view-list .city-card__region{font-size:.62rem;margin:.05rem 0 0}
.view-list .city-card__temp{font-size:1.8rem;margin:0}
.view-list .city-card__temp small{font-size:.75rem}
.view-list .city-card__cond{margin:0;font-size:.85rem;min-width:140px;text-align:right}
.view-list .city-card__meta{border:0;padding:0;gap:.9rem}
.view-list .city-card__dot{display:none}

@media (max-width:720px){
  .city-controls{flex-direction:column;align-items:stretch}
  .city-controls input,.city-controls select{width:100%;min-width:0}
  .view-list .city-card{grid-template-columns:1fr auto;gap:.5rem}
  .view-list .city-card__cond,
  .view-list .city-card__meta{grid-column:1/-1;text-align:left}
}