/* ============================================================================
   ATLAS REDESIGN — RDDateFilter component styles  ·  Wave 1 (2026-07-04)
   Pairs with js/redesign/components/date-filter.js (window.RDDateFilter).
   Tokens only. Calm V6 chip row: quiet until active; evergreen active state.
   ========================================================================== */

.rd-dfil {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 4px;
}

/* ---- chip row ---- */
.rd-dfil-chips {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--r-well);
  border: 1px solid var(--r-hairline);
  border-radius: var(--r-radius-pill);
}
.rd-dfil-chip {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--r-muted);
  font: 600 var(--r-fs-meta) / 1 var(--r-font-body);
  letter-spacing: .01em;
  padding: 7px 12px;
  border-radius: var(--r-radius-pill);
  cursor: pointer;
  transition: color var(--r-dur) var(--r-ease), background var(--r-dur) var(--r-ease),
              box-shadow var(--r-dur) var(--r-ease);
}
.rd-dfil-chip:hover { color: var(--r-ink); }
.rd-dfil-chip.is-active {
  background: var(--r-surface);
  color: var(--r-primary);
  border-color: var(--r-border);
  box-shadow: 0 1px 2px rgba(33, 31, 26, .08);
}
.rd-dfil-chip:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* ---- period stepper + label ---- */
.rd-dfil-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rd-dfil-step {
  appearance: none;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--r-border);
  border-radius: 50%;
  background: var(--r-surface);
  color: var(--r-muted);
  font: 600 14px / 1 var(--r-font-body);
  cursor: pointer;
  transition: color var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease);
}
.rd-dfil-step:hover { color: var(--r-primary); border-color: var(--r-primary); }
.rd-dfil-step:focus-visible { outline: var(--r-focus); outline-offset: 2px; }
.rd-dfil-lab {
  font: 600 var(--r-fs-meta) / 1.2 var(--r-font-mono);
  letter-spacing: .02em;
  color: var(--r-body);
  min-width: 92px;
  text-align: center;
}

/* ---- custom range popover (inline row, not floating) ---- */
.rd-dfil-pop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-control);
}
.rd-dfil-pop[hidden] { display: none; }
.rd-dfil-pop-lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 var(--r-fs-meta) / 1 var(--r-font-body);
  color: var(--r-muted);
}
.rd-dfil-pop input[type="date"] {
  border: 1px solid var(--r-hairline);
  border-radius: var(--r-radius-chip);
  background: var(--r-canvas);
  color: var(--r-ink);
  font: 500 var(--r-fs-meta) / 1.2 var(--r-font-body);
  padding: 4px 6px;
}
.rd-dfil-pop input[type="date"]:focus-visible { outline: var(--r-focus); outline-offset: 1px; }
.rd-dfil-apply {
  appearance: none;
  border: 1px solid var(--r-primary);
  background: var(--r-primary);
  color: #fff;
  font: 600 var(--r-fs-meta) / 1 var(--r-font-body);
  padding: 6px 12px;
  border-radius: var(--r-radius-chip);
  cursor: pointer;
  transition: filter var(--r-dur) var(--r-ease);
}
.rd-dfil-apply:hover { filter: brightness(1.08); }
.rd-dfil-apply:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* ---- mobile (390px) ---- */
@media (max-width: 480px) {
  .rd-dfil { gap: 8px; }
  .rd-dfil-chip { padding: 7px 9px; }
  .rd-dfil-pop { flex-wrap: wrap; }
}