/* World Clock — a controls card (the add-zone search and the reference-time
   slider as stacked rows, then the share link, Copy link and Options in the
   actions tray) over a zones card of one row per zone (layout from
   styles/components/form.css). The combobox, the slider scale, the zone
   row's parts and the day / night states are the page's own.

   Selectors below that style a form field are written input.<class> or by
   id: the shared form rule input[type="…"] in common.css is (0,1,1) and
   silently beats a bare class. */

/* ── Add-zone combobox ───────────────────────────────────────────────────── */
.wc-add { position: relative; }

.wc-add__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

#wc-search {
  width: 100%;
  padding-inline-start: calc(var(--space-3) + 17px + var(--space-2));
}

.wc-results {
  /* fixed (not absolute) so no scrolling ancestor can clip it;
     left/top/width/max-height are set in JS, anchored to the input. */
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
.wc-results.hidden { display: none; }

.wc-result {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.wc-result.is-active,
.wc-result:hover { background: var(--accent-soft); }
.wc-result.is-added { opacity: 0.55; cursor: default; }
.wc-result__city { font-size: 14px; font-weight: 600; color: var(--text); }
.wc-result__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Reference-time slider ───────────────────────────────────────────────── */
.wc-livebtn { margin-inline-start: auto; }
.wc-livebtn.hidden { display: none; }

/* Endpoint scale under the track — gives the bare slider a readable span
   (window start → end in your local time) so its range isn't a mystery. */
.wc-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.wc-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.wc-reflabel {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.wc-reflabel--pinned { color: var(--accent-strong); font-weight: 600; }

/* ── Share tray ──────────────────────────────────────────────────────────── */
input.wc-link {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}
input.wc-link:focus { color: var(--text); }

/* ── Zone rows ───────────────────────────────────────────────────────────── */
/* The row fill (night, flash) keeps the card's corners on the first and
   last zone. */
.wc-row:first-of-type { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.wc-row:last-of-type { border-end-start-radius: inherit; border-end-end-radius: inherit; }

.wc-row--night { background: var(--bg); }
.wc-row--night .wc-row__clock { color: var(--text-muted); }
/* In dark mode --bg ≈ the page background, so a night row would read as a
   hole in the card. Keep a faintly cool-tinted card surface instead — dimmer
   and cooler than the day rows, still inside the card. */
@media (prefers-color-scheme: dark) {
  .wc-row--night { background: color-mix(in srgb, var(--card-bg) 88%, var(--accent) 12%); }
}

@keyframes wcFlash { from { background: var(--accent-soft); } }
.wc-row--flash { animation: wcFlash 0.8s var(--ease-standard); }

.wc-row__dn { font-size: 20px; line-height: 1; }

.wc-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
/* The label is an inline rename field. Scope these rules to .wc-row so they
   out-rank the global input[type=text] styling — otherwise the field renders as
   a filled, hard-bordered box that masquerades as a button. At rest it reads as
   plain bold text; the border only appears on hover/focus as the edit cue. */
.wc-row .wc-row__label {
  width: 100%;
  max-width: 240px;
  margin: -3px -7px;
  padding: 3px 7px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: text;
}
.wc-row .wc-row__label::placeholder { color: var(--text); opacity: 1; }
.wc-row .wc-row__label:hover { border-color: var(--border); }
.wc-row .wc-row__label:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.wc-row__zone {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wc-row__time { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); text-align: right; }
.wc-row__clock {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wc-row__date {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 12px;
  color: var(--text-muted);
}

.wc-row__remove {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--duration-snap) var(--ease-standard), background var(--duration-snap) var(--ease-standard), color var(--duration-snap) var(--ease-standard);
}
.wc-row__remove:hover { opacity: 1; color: var(--danger, #e5484d); background: var(--sep); }

@media (max-width: 560px) {
  .wc-row__clock { font-size: 19px; }
  .wc-row .wc-row__label { font-size: 14.5px; max-width: 150px; }
}