/* Clock faces: digital, analog, world and solar. Sizes are set by the surroundings
   (standby.css) through container units; these rules are the faces' own look. */

.digital-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  font-weight: var(--dc-weight, 600);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dc-time {
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}
.dc-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  font-size: 0.22em;
  margin-left: 0.18em;
  padding: 0.5em 0 0.45em;
  letter-spacing: 0;
  font-weight: 600;
}
.dc-side:empty,
.dc-side:has(span:empty + span:empty) {
  display: none;
}
.dc-secs {
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.dc-date {
  margin-top: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.85;
  font-family: system-ui, -apple-system, sans-serif;
}
.digital-clock.compact .dc-date {
  margin-top: 0.4em;
}
/* Numerals filled with a pride flag's stripes. */
.flag-text {
  background: var(--flag-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ---- Analog ---- */
.analog-wrap {
  aspect-ratio: 1;
}
.analog-clock {
  width: 100%;
  height: 100%;
}
.ac-num {
  font-family: ui-rounded, system-ui, sans-serif;
  font-weight: 600;
}
.ac-date {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.analog-wrap.light .ac-face {
  fill: #f4f4f4;
}
.analog-wrap.light .ac-tick,
.analog-wrap.light .ac-hand {
  stroke: #111;
}
.analog-wrap.light .ac-num {
  fill: #111;
}
.analog-wrap.light .ac-pin {
  fill: #111;
}
.analog-wrap.light .ac-pin-hole {
  fill: #f4f4f4;
}

/* ---- World clock ---- */
.world-clock {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 3cqmin;
  grid-template-columns: repeat(var(--wc-cols, 2), 1fr);
  align-content: center;
  container-type: size;
}
.world-clock.n1 {
  --wc-cols: 1;
}
.world-clock.n2,
.world-clock.n4 {
  --wc-cols: 2;
}
.world-clock.n3,
.world-clock.n5,
.world-clock.n6 {
  --wc-cols: 3;
}
@container (max-aspect-ratio: 1/1) {
  .world-clock.n3,
  .world-clock.n4,
  .world-clock.n5,
  .world-clock.n6 {
    --wc-cols: 2;
  }
  .world-clock.n2 {
    --wc-cols: 1;
  }
}
.wc-city {
  display: grid;
  justify-items: center;
  gap: 1.5cqmin;
  text-align: center;
  min-width: 0;
}
.wc-city .analog-wrap {
  width: min(24cqmin, 16cqw);
}
.world-clock.n1 .wc-city .analog-wrap,
.world-clock.n2 .wc-city .analog-wrap {
  width: min(42cqmin, 30cqw);
}
.wc-name {
  font-weight: 600;
  font-size: max(14px, 3.6cqmin);
}
.wc-time {
  font-size: max(13px, 3.2cqmin);
  font-variant-numeric: tabular-nums;
}
.wc-rel {
  font-size: max(11px, 2.4cqmin);
  color: rgba(255, 255, 255, 0.55);
}
.wc-empty {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* ---- Solar ---- */
.solar-face {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
}
.solar-sky {
  position: absolute;
  inset: 0;
  transition: background 2s;
}
.solar-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.solar-sun {
  position: absolute;
  width: 7cqmin;
  height: 7cqmin;
  margin: -3.5cqmin 0 0 -3.5cqmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0 35%, #ffd25a 60%, rgba(255, 190, 60, 0) 72%);
  box-shadow: 0 0 6cqmin rgba(255, 210, 90, 0.7);
}
.solar-sun.below {
  background: radial-gradient(circle, #e8ecff 0 45%, rgba(200, 210, 255, 0) 70%);
  box-shadow: 0 0 3cqmin rgba(200, 210, 255, 0.35);
  opacity: 0.55;
}
.solar-clock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.solar-clock .dc-time {
  font-size: min(22cqw, 46cqh);
}
.solar-clock .dc-date {
  font-size: min(4cqw, 7cqh);
}
.solar-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(3cqh + var(--safe-bottom));
  text-align: center;
  font-size: max(12px, 2.6cqmin);
  color: rgba(255, 255, 255, 0.75);
  padding: 0 16px;
}