/* ==========================================================================
   Peça · régua de retenção
   O elemento assinatura do produto. Doze blocos de seis horas.
   O COMPRIMENTO vem do relógio. A COR vem da situação da entrega.
   Nunca colorir pelo tempo: entregue com 2h restantes tem urgência zero,
   falha com 60h restantes é urgente.
   ========================================================================== */

.regua {
  --bloco: 6rem;
  --vao: 2rem;
  --altura: 9rem;
  position: relative;
  height: var(--altura);
  width: var(--largura, 94rem);
  flex: none;
}

/* Trilho: os doze blocos vazios, sempre visíveis, para o comprimento ser lido
   como fração e não como barra solta. */
.regua__trilho {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--panel-2) 0 var(--bloco),
    transparent var(--bloco) calc(var(--bloco) + var(--vao))
  );
}

/* Preenchimento: mesma trama, recortada pela máscara, para os blocos cheios
   caírem exatamente em cima dos vazios. */
.regua__cheio {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--altura);
  mask-image: repeating-linear-gradient(
    90deg,
    #000 0 var(--bloco),
    transparent var(--bloco) calc(var(--bloco) + var(--vao))
  );
  -webkit-mask-image: repeating-linear-gradient(
    90deg,
    #000 0 var(--bloco),
    transparent var(--bloco) calc(var(--bloco) + var(--vao))
  );
}

.regua--longa { --bloco: 8rem; }
.regua--curta { --bloco: 14rem; --vao: 3rem; }

.regua-caixa { display: flex; flex-direction: column; gap: 4rem; }
.regua-caixa__relogio {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10rem;
  font-variant-numeric: tabular-nums;
}
.regua-caixa--linha { flex-direction: row; align-items: center; gap: 14rem; }
.regua-caixa--linha .regua-caixa__relogio { font-size: 13rem; }

/* No detalhe da mensagem o relógio é o número mais alto da tela. */
.regua-detalhe { text-align: right; }
.regua-detalhe .num { font-size: 26rem; letter-spacing: -.02em; }
.regua-detalhe .regua { margin: 8rem 0 0 auto; }