/* Frontend-only date/time styling (does not affect editor font behavior). */

:where(.post-date, .post-time, time){
  font-variant-numeric: tabular-nums;
}

/* Common theme patterns: spans inside meta rows */
:where(.post-date, .post-time){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  line-height: 1.6;
  font-size: 12px;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* Use theme accent variables when available */
:where(.post-date, .post-time){
  border-color: color-mix(in srgb, var(--accent, #0ea5e9) 20%, rgba(0,0,0,.10));
  background: color-mix(in srgb, var(--accent, #0ea5e9) 10%, rgba(0,0,0,.04));
  color: color-mix(in srgb, var(--accent, #0ea5e9) 42%, currentColor);
}

/* Meta wrappers: keep spacing clean without affecting other metadata */
:where(.rng-meta, .entry-meta, .comment-metadata, .post-meta, .meta) :where(.post-date, .post-time){
  margin-inline: 4px;
}

/* Make <time> tags inside content/meta look consistent without forcing pill UI */
:where(time){
  direction: ltr;
  unicode-bidi: plaintext;
}

@media (max-width: 600px){
  :where(.post-date, .post-time){
    padding: 2px 8px;
    font-size: 11px;
  }
}