/*  daterange.css -- V1006. THE ONE DATE-RANGE PILL, ON WHATEVER PAGE WANTS IT.
 *
 *  WHY THIS FILE EXISTS. `bingo_daterange.js` has been generic since V1004 -- it
 *  ADOPTS two existing `<input type=date>` elements rather than replacing them,
 *  and everything in and out of it is `YYYY-MM-DD`, so nothing in it is about
 *  bingo. Its STYLES were not: fifty-odd lines sat in bingo.css behind `#bingo`,
 *  which meant the first other page to want the control had to copy them.
 *
 *  HIS ASK IS THAT PAGE: *"date calendar to be one box and when clicked anywhere-
 *  it opend from and to date optoin.. just like we did in bingo statement"* -- the
 *  Family Medicine day-wise report, wanting the control by name.
 *
 *  COPYING WAS THE OTHER OPTION AND IT IS THE ONE THIS RELEASE KEEPS REFUSING.
 *  V1005 deleted three duplicated controls for the reason a fourth would have
 *  earned: two copies of one thing drift, and the copy nobody is looking at is
 *  the one that goes wrong.
 *
 *  ================================================ HOW IT IS THEMED, AND WHY
 *
 *  THE SELECTORS ARE UNSCOPED, like `pickfilter.css` next to it, because the
 *  class names are distinctive enough to be safe on their own -- `.drpill`,
 *  `.drgrid`, `.drqb` are not words another sheet reaches for -- and scoping them
 *  to two ids would mean editing every rule the next time a third page wants it.
 *
 *  THE COLOURS COME FROM THE HOST PAGE'S OWN TOKENS. Every tool on this site
 *  declares its own palette on its own root -- bingo.css on `#bingo`,
 *  family_medicine.css on `#fm-root` -- so the names below (`--panel`, `--line2`,
 *  `--accent` and the rest) resolve to whatever the page around the pill is using
 *  and the control arrives already wearing the local colours. A page that wants
 *  this pill and does not already declare them maps them in one short block; see
 *  the one at the top of family_medicine.css, which is eight lines.
 *
 *  THIS IS WHY NOTHING HERE HARDCODES A COLOUR. A literal would be the one part
 *  of the control that could not follow the page, and V578's measured contrast
 *  test runs over every sheet in both themes -- a literal that passes on one
 *  ground is the kind that fails on the other.
 */
   /* V999: the Player branch of bingo_openmode.why() now returns "" -- the element stays (three suites assert it, and the other three branches still speak), so the margin has to go with the sentence. */

/* ===================================================== V1004 — THE DATE PILL
   ONE CONTROL WHERE TWO NATIVE DATE BOXES AND THE WORD "to" USED TO BE, his ask.
   The two inputs are not replaced: bingo_daterange.js REPARENTS them into the
   panel, so `#stFrom`/`#stTo` are the same elements every caller already reads
   and typing a date keeps working on the phone.

   NO `color-scheme` ANYWHERE IN HERE. test_v578_contrast asserts the string is
   absent from all 49 sheets and the chip-contrast measurement rests on it; a
   per-tool declaration goes inline in the template, which is where V1002 put
   Family Medicine's after V1001 reddened that guard for a release. */
.drwrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.drpill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg); color: var(--muted3);
  border: 1px solid var(--line2); border-radius: 9px; padding: 8px 11px;
  font: inherit; font-size: var(--fld-fs, 13.5px); cursor: pointer;
  white-space: nowrap;
}
.drpill.set { color: var(--text); }
.drpill .drtxt { font-weight: 600; }
.drpill .drcar:after { content: " \25BE"; color: var(--muted3); }
.drpan {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 41;
  width: 286px; max-width: 90vw; padding: 10px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--panel); box-shadow: 0 14px 32px rgba(0, 0, 0, .55);
}
/*  THE QUICK RANGES ARE THE POINT OF THE PANEL and are first for that reason:
    nine times in ten the answer is one of these four and the grid is never
    opened at all. */
.drq { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.drqb {
  background: var(--btn); color: var(--text); border: 1px solid var(--line2);
  border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.drqb:hover { border-color: var(--accent); }
.drhead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; margin-bottom: 4px;
}
.drnav {
  background: none; border: 0; color: var(--text); font: inherit;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 9px;
}
.drgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.drdow {
  text-align: center; font-size: 9.5px; letter-spacing: .05em;
  color: var(--muted3); padding: 3px 0;
}
.drpad { display: block; }
.drd {
  background: none; border: 0; color: var(--text); font: inherit;
  font-size: 12.5px; padding: 5px 0; border-radius: 5px; cursor: pointer;
  text-align: center;
}
.drd:hover { background: var(--btn); }
.drd.in { background: var(--btn); }
.drd.end { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
/*  The native inputs, kept and shown. The phone is where this tool is mostly
    used and its own picker is what he already knows. */
.drraw {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--line);
}
.drraw input { flex: 1 1 0; min-width: 0; }
.drto { color: var(--muted3); font-size: 12px; }