/* Time Zone Compare — scoped under .time-zone-compare-page.
   Keep the result column packed to the top so Copy keeps its natural size when
   only a couple of zones are listed (the control-first bench gotcha). */
.time-zone-compare-page .canvas-bench {
  align-content: start;
}

.time-zone-compare-page .canvas-bench .tool-actions {
  align-items: center;
}

.time-zone-compare-page .zone-list {
  display: grid;
  gap: var(--space-2);
  min-height: 4rem;
}

.time-zone-compare-page .zone-row {
  position: relative;
  display: grid;
  gap: .25rem;
  padding: .85rem 2.6rem .85rem .95rem;
  border: var(--control-border-width) solid var(--control-border);
  border-radius: var(--radius-lg);
  background: var(--inset-surface);
  box-shadow: var(--inset-control-shadow);
}

.time-zone-compare-page .zone-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.time-zone-compare-page .zone-row__name {
  color: var(--text-body);
  font-family: var(--font-plain);
  font-weight: var(--control-weight);
}

.time-zone-compare-page .zone-tag {
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--font-plain);
  font-size: .66rem;
  font-weight: var(--control-weight);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.time-zone-compare-page .zone-row__time {
  color: var(--text-body);
  font-family: var(--font-plain);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
}

.time-zone-compare-page .zone-row__meta {
  color: var(--text-soft);
  font-family: var(--font-plain);
  font-size: var(--step--1);
}

.time-zone-compare-page .zone-status {
  padding: .12rem .5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-plain);
  font-size: .7rem;
  font-weight: var(--control-weight);
}

.time-zone-compare-page .zone-status--good {
  color: #1f9d57;
  border-color: rgba(31, 157, 87, .4);
  background: rgba(31, 157, 87, .12);
}

.time-zone-compare-page .zone-status--ok {
  color: #c08a1e;
  border-color: rgba(192, 138, 30, .4);
  background: rgba(192, 138, 30, .12);
}

.time-zone-compare-page .zone-status--bad {
  color: var(--text-soft);
  border-color: var(--control-border);
  background: transparent;
}

.time-zone-compare-page .zone-row__remove {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.time-zone-compare-page .zone-row__remove:hover {
  color: var(--text-body);
  background: var(--tool-object-bg);
}