/* Additions to legal.css for the city and neighborhood pages written by pipeline/pages.ts.
   The level colors (--l0 … --l4) are set in each page from the app's palette. */
.crumbs {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-2);
}

.level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
}

.dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--level);
}

.l0 {
  --level: var(--l0);
}
.l1 {
  --level: var(--l1);
}
.l2 {
  --level: var(--l2);
}
.l3 {
  --level: var(--l3);
}
.l4 {
  --level: var(--l4);
}

.summary p {
  margin: 0;
}

.headline {
  font-size: 20px;
}

.meter {
  display: flex;
  gap: 3px;
  max-width: 320px;
  margin: 8px 0 10px;
}

.meter span {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background: var(--level);
  opacity: 0.3;
}

.meter span.on {
  height: 12px;
  margin-top: -2px;
  opacity: 1;
}

.button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.levels {
  width: 100%;
  border-collapse: collapse;
}

.levels th,
.levels td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.levels thead th {
  font-size: 14px;
  color: var(--ink-2);
}

.levels th[scope='row'] {
  font-weight: 600;
}

.levels th .muted {
  display: block;
  font-size: 13px;
  font-weight: 400;
}

.places,
.cities {
  margin: 0;
  padding: 0;
  list-style: none;
}

.places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 20px;
}

.places li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

.places .level {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

.cities li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
}

.cities .muted {
  font-size: 14px;
}

.fineprint {
  font-size: 14px;
  color: var(--ink-2);
}