/*  date-counter.css — minimal styling for the date-counter widget.
 *  Inherits font + colour from the surrounding page; override with CSS
 *  custom properties if needed.
 */

.dc {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
  font-size: 0.92em;
  line-height: 1.3;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(26, 24, 22, 0.06);
  color: var(--dc-ink, #1a1816);
  white-space: nowrap;
}

.dc .dc-label {
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-weight: 600;
  color: var(--dc-label-ink, #5a544d);
  font-size: 0.95em;
}
.dc .dc-rel {
  font-weight: 700;
}
.dc .dc-sep {
  opacity: 0.4;
}
.dc .dc-abs {
  color: var(--dc-abs-ink, #5a544d);
  font-weight: 500;
}

/* Urgency bands — overlay tinted backgrounds, accentuate the relative reading. */
.dc.dc-horizon  { background: rgba(44, 74, 58, 0.08); }
.dc.dc-soon     { background: rgba(184, 134, 42, 0.15); color: #8a5e16; }
.dc.dc-soon     .dc-rel  { color: #8a5e16; }
.dc.dc-soon     .dc-abs  { color: #8a5e16; opacity: 0.8; }
.dc.dc-imminent { background: rgba(184, 38, 46, 0.16); color: #8a2a30; }
.dc.dc-imminent .dc-rel  { color: #8a2a30; }
.dc.dc-imminent .dc-abs  { color: #8a2a30; opacity: 0.8; }
.dc.dc-today    { background: #b8262e; color: #fff; }
.dc.dc-today    .dc-abs  { color: #fff; opacity: 0.85; }
.dc.dc-today    .dc-sep  { color: #fff; opacity: 0.5; }
.dc.dc-today    .dc-label { color: #fff; opacity: 0.85; }

.dc.dc-past     { background: rgba(26, 24, 22, 0.04); color: #8a8278; }
.dc.dc-past     .dc-rel  { color: #8a8278; font-weight: 500; }
.dc.dc-past     .dc-abs  { color: #8a8278; opacity: 0.7; }

/* Print: strip tinted backgrounds for paper. */
@media print {
  .dc { background: transparent !important; color: #1a1816 !important; padding: 0; }
  .dc .dc-rel, .dc .dc-abs, .dc .dc-label { color: #1a1816 !important; }
  .dc.dc-imminent .dc-rel, .dc.dc-today .dc-rel { color: #b8262e !important; font-weight: 700; }
}