/* =====================================================================
   RELÓGIO DE BRASÍLIA — aparência do relógio
   Todo valor ajustável é uma variável CSS que o clock.js escreve. Isso
   vale tanto pro overlay do OBS quanto pro preview do personalizador —
   os dois usam ESTE arquivo, então o que você vê é o que vai no ar.
   ===================================================================== */

.rl {
  /* padrões de segurança: se o JS não rodar, ainda dá pra ver alguma coisa */
  --rl-font: system-ui, sans-serif;
  --rl-size: 96px;
  --rl-weight: 700;
  --rl-style: normal;
  --rl-track: 0px;
  --rl-caps: none;
  --rl-numeric: tabular-nums;
  --rl-color: #fff;
  --rl-c2: #8fd07a;
  --rl-gangle: 180deg;
  --rl-sw: 0px;
  --rl-sc: #000;
  --rl-filter: none;
  --rl-bg: transparent;
  --rl-bgr: 14px;
  --rl-bgp: 18px 25px;
  --rl-bd: 0px;
  --rl-bdc: transparent;
  --rl-blur: none;
  --rl-dsize: 26px;
  --rl-dcolor: rgba(255, 255, 255, .85);
  --rl-dweight: 500;
  --rl-dtrack: 2px;
  --rl-dcaps: none;
  --rl-dgap: 6px;
  --rl-dorder: 1;
  --rl-justify: center;
  --rl-valign: center;
  --rl-items: center;
  --rl-text-align: center;
  --rl-mx: 0px;
  --rl-my: 0px;

  position: absolute;
  inset: 0;
  display: flex;
  justify-content: var(--rl-justify);
  align-items: var(--rl-valign);
  padding: var(--rl-my) var(--rl-mx);
  box-sizing: border-box;
  overflow: hidden;
  /* nada de seleção/cursor: isso vive dentro do OBS */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.rl__box {
  display: flex;
  flex-direction: column;
  align-items: var(--rl-items);
  gap: var(--rl-dgap);
  padding: 0;
  border-radius: var(--rl-bgr);
  line-height: 1.05;
}

.rl.has-bg .rl__box {
  padding: var(--rl-bgp);
  background: var(--rl-bg);
  border: var(--rl-bd) solid var(--rl-bdc);
  backdrop-filter: var(--rl-blur);
  -webkit-backdrop-filter: var(--rl-blur);
}

/* ---------------------------------------------------------------------
   As duas camadas empilhadas (traçado atrás, preenchimento na frente).
   O grid com as duas no MESMO slot garante alinhamento perfeito sem
   position:absolute e sem depender de paint-order (que o Chromium do
   OBS nem sempre respeita em texto HTML).
   --------------------------------------------------------------------- */
.rl__time,
.rl__date {
  display: grid;
  filter: var(--rl-filter);
  text-align: var(--rl-text-align);
}

.rl__layer {
  grid-area: 1 / 1;
  white-space: nowrap;
  /* o espaçamento entre letras sobra depois do último caractere e
     desalinha a centralização: desconto ele aqui */
  margin-inline-end: calc(var(--rl-track) * -1);
}

/* ------------------------------ hora ------------------------------ */

.rl__time .rl__layer {
  font-family: var(--rl-font);
  font-size: var(--rl-size);
  font-weight: var(--rl-weight);
  font-style: var(--rl-style);
  letter-spacing: var(--rl-track);
  text-transform: var(--rl-caps);
  font-variant-numeric: var(--rl-numeric);
  font-feature-settings: "tnum" 1;
}

.rl__time .rl__layer--fill { color: var(--rl-color); }

.rl.is-grad .rl__time .rl__layer--fill {
  background-image: linear-gradient(var(--rl-gangle), var(--rl-color), var(--rl-c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rl__time .rl__layer--stroke {
  -webkit-text-stroke: var(--rl-sw) var(--rl-sc);
  color: transparent;
}

/* "sem preenchimento" = só o contorno. Precisa vir depois do gradiente. */
.rl.is-nofill .rl__time .rl__layer--fill,
.rl.is-nofill .rl__date .rl__layer--fill {
  color: transparent;
  background-image: none;
}

/* ------------------------------ data ------------------------------ */

.rl__date {
  order: var(--rl-dorder);
}

.rl.is-date-off .rl__date { display: none; }

.rl__date .rl__layer {
  font-family: var(--rl-font);
  font-size: var(--rl-dsize);
  font-weight: var(--rl-dweight);
  font-style: var(--rl-style);
  letter-spacing: var(--rl-dtrack);
  text-transform: var(--rl-dcaps);
  margin-inline-end: calc(var(--rl-dtrack) * -1);
}

.rl__date .rl__layer--fill { color: var(--rl-dcolor); }

/* traçado da data proporcional ao da hora, pra não engrossar demais */
.rl__date .rl__layer--stroke {
  -webkit-text-stroke: calc(var(--rl-sw) * .6) var(--rl-sc);
  color: transparent;
}

/* --------------------------- separador --------------------------- */

.rl__sep { display: inline-block; }
.rl__ap {
  font-size: .42em;
  letter-spacing: .08em;
  margin-inline-start: .28em;
  vertical-align: baseline;
}

.rl.is-blink .rl__sep {
  animation: rl-blink 1s steps(1, end) infinite;
}

@keyframes rl-blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rl.is-blink .rl__sep { animation: none; }
}