/* THE ONE DATE RANGE — every range selector in the system, one design.
 *
 * Owner, 2026-09-09: "all data ranges and selectors across the system should be the same one,
 * same design as this one" — this one being the Media Buying pill + popover. It now lives here,
 * injected at the render seam like the mail dock, and any page mounts it with one element:
 *   <div data-daterange data-since="…" data-until="…" data-since-input="sinceD" …></div>
 *
 * Two defects of the original are fixed IN the component so no page can regrow them:
 *   · the popover is position:FIXED and sized to the viewport (max-height + scroll, Apply pinned)
 *     — it can never be amputated by a sticky header or a short window again;
 *   · outside-click closes on POINTERDOWN, before the calendar re-renders — the old click
 *     handler ran after the clicked day had been replaced, saw a detached node, and closed. */
.sdr{position:relative;display:inline-block;font-family:var(--body,Inter,system-ui,sans-serif)}
.sdr-pill{display:inline-flex;align-items:center;gap:7px;background:var(--raised,#fff);color:var(--text,#26221e);
  border:1px solid var(--line,rgba(40,34,28,.12));border-radius:12px;font:inherit;font-size:13px;font-weight:500;
  padding:9px 11px 9px 13px;cursor:pointer;white-space:nowrap;line-height:1.2}
.sdr-pill:hover{border-color:var(--accent-line,rgba(194,91,56,.32))}
.sdr-pill .sdr-cal{color:var(--accent,#C25B38);width:15px;height:15px;flex:0 0 15px}
.sdr-pill .sdr-chev{color:var(--muted,#7b7367);transition:transform .2s ease;font-size:10px}
.sdr.open .sdr-pill{border-color:var(--accent-line,rgba(194,91,56,.32));background:var(--accent-soft,rgba(194,91,56,.12))}
.sdr.open .sdr-chev{transform:rotate(180deg);color:var(--accent,#C25B38)}
/* fixed, viewport-bounded, scrolling — never clipped */
.sdr-pop{position:fixed;z-index:2147483100;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);
  overflow:auto;background:var(--card,#faf6ef);color:var(--text,#26221e);border:1px solid var(--line,rgba(40,34,28,.12));
  border-radius:16px;box-shadow:0 30px 70px -22px rgba(40,26,14,.45);padding:14px;display:none;flex-direction:column;gap:0}
.sdr-pop.open{display:flex}
/* one layered popover: presets on the inline-start side, calendar beside them (flips by itself in RTL) */
[data-hdz-body]{display:flex;flex-direction:row;gap:14px;align-items:flex-start}
[data-hdz-body] .sdr-presets{flex:0 0 140px;flex-direction:column;flex-wrap:nowrap;
  padding-inline-end:14px;border-inline-end:1px dashed var(--line-strong,rgba(40,34,28,.17))}
[data-hdz-body] .sdr-presets:empty{display:none}
[data-hdz-body] .sdr-chip{text-align:start;border-radius:10px}
[data-hdz-body] .sdr-custom{flex:1 1 auto;min-width:0;margin-top:0;padding-top:0;border-top:0}
/* phone: a bottom sheet, presets as a wrapping row above the calendar */
.sdr-pop[data-hdz-sheet]{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:0}
.sdr-pop[data-hdz-sheet] [data-hdz-body]{flex-direction:column;align-items:stretch;gap:0}
.sdr-pop[data-hdz-sheet] [data-hdz-body] .sdr-presets{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;padding-inline-end:0;border-inline-end:0;
  padding-bottom:13px;border-bottom:1px dashed var(--line-strong,rgba(40,34,28,.17));margin-bottom:13px}
.sdr-pop[data-hdz-sheet] [data-hdz-body] .sdr-chip{border-radius:99px}
.sdr-presets{display:flex;flex-wrap:wrap;gap:6px}
.sdr-chip{background:var(--inset,#e9e1d4);color:var(--text,#26221e);border:1px solid transparent;border-radius:99px;
  font:inherit;font-size:12.5px;font-weight:500;padding:7px 12px;cursor:pointer;white-space:nowrap}
.sdr-chip:hover{background:var(--raised,#fff);border-color:var(--line,rgba(40,34,28,.12))}
.sdr-chip.on{background:var(--accent,#C25B38);color:var(--accent-ink,#fdf6f1)}
.sdr-custom{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line-strong,rgba(40,34,28,.17))}
.sdr-presets:empty + .sdr-custom{margin-top:0;padding-top:0;border-top:0}
.sdr-label{font-family:var(--display,'Space Grotesk',sans-serif);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted,#7b7367);margin-bottom:8px}
.sdr-sel{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:12.5px}
.sdr-sel-d{background:var(--inset,#e9e1d4);border:1px solid transparent;border-radius:8px;padding:5px 10px;
  font-variant-numeric:tabular-nums;min-width:96px;text-align:center;direction:ltr}
.sdr-sel-d.armed{border-color:var(--accent-line,rgba(194,91,56,.32));color:var(--accent,#C25B38)}
.sdr-arrow{color:var(--faint,#a89e90);font-size:12px}
.sdr-grid-wrap{margin-top:9px;user-select:none}
.sdr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sdr-title{font-weight:700;font-size:13px;font-family:var(--display,'Space Grotesk',sans-serif)}
.sdr-nav{border:1px solid var(--line,rgba(40,34,28,.12));background:var(--raised,#fff);border-radius:8px;width:26px;height:26px;
  line-height:1;cursor:pointer;padding:0;font-size:13px;color:var(--text,#26221e)}
.sdr-nav:hover{border-color:var(--accent-line,rgba(194,91,56,.32));color:var(--accent,#C25B38)}
.sdr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;direction:ltr}
.sdr-wd{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint,#a89e90);text-align:center;padding:3px 0}
.sdr-day{border:0;background:transparent;border-radius:8px;font:inherit;font-size:12px;padding:6px 0;cursor:pointer;
  color:var(--text,#26221e);font-variant-numeric:tabular-nums}
.sdr-day:hover{background:var(--inset,#e9e1d4)}
.sdr-day.other{color:var(--faint,#a89e90)}
.sdr-day.dis{color:var(--faint,#a89e90);opacity:.35;cursor:default;background:none}
.sdr-day.today{box-shadow:inset 0 0 0 1px var(--accent-line,rgba(194,91,56,.32))}
.sdr-day.in{background:var(--accent-soft,rgba(194,91,56,.12));border-radius:0}
.sdr-day.start,.sdr-day.end{background:var(--accent,#C25B38);color:var(--accent-ink,#fdf6f1)}
.sdr-day.start{border-radius:8px 0 0 8px}.sdr-day.end{border-radius:0 8px 8px 0}.sdr-day.start.end{border-radius:8px}
/* pinned, so the bottom of the popover is always the way out */
.sdr-foot{position:sticky;bottom:-14px;margin:10px -14px -14px;padding:10px 14px 14px;background:var(--card,#faf6ef);
  border-top:1px solid var(--line-soft,rgba(40,34,28,.06));display:flex;gap:8px}
/* phone bottom sheet: the pinned row sits on the screen's edge (after the base rule; higher specificity either way) */
.sdr-pop[data-hdz-sheet] .sdr-foot{bottom:0;padding-bottom:max(14px,env(safe-area-inset-bottom))}
.sdr-apply{flex:1;border:0;border-radius:10px;background:var(--accent,#C25B38);color:var(--accent-ink,#fdf6f1);
  font:inherit;font-size:12.5px;font-weight:600;padding:9px;cursor:pointer}
.sdr-apply:hover{background:var(--accent-bright,#a8472a)}
.sdr-apply[disabled]{opacity:.5;cursor:default}
.sdr-cancel{border:1px solid var(--line,rgba(40,34,28,.12));background:transparent;border-radius:10px;font:inherit;
  font-size:12.5px;padding:9px 12px;cursor:pointer;color:var(--muted,#7b7367)}
/* the native inputs a page keeps for its own logic stay in the DOM, out of sight */
.sdr-native{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}