/* browse-datepicker.css — split from browse.css (lines 31-82), 2026-08-17.
   one-dropdown date-range picker (.dr-*, .date-field, drIn/drFade keyframes)
   LOAD ORDER IS LOAD-BEARING. Link in this exact sequence, after nothing and
   before the engine-*.css layer:
     browse-filterbar.css -> browse-datepicker.css -> browse-guests.css -> browse-map.css -> browse-cards.css -> browse-detail.css
   Slices are CONTIGUOUS: rule order is unchanged from browse.css, so the cascade is
   equivalent by construction. Some selectors are redefined in a later module on
   purpose — do not reorder, and do not "tidy" rules between files.
   browse.css itself is UNTOUCHED on disk and still serves the other 17 pages. */
.dr-wrap { position:relative; }
.date-field { min-width:220px; text-align:left; padding:0.55rem 0.9rem; background:var(--forest); border:1px solid var(--gold-line); border-radius:var(--radius-sm); color:var(--sage); font-family:var(--body); font-size:0.85rem; cursor:pointer; transition:border-color 0.18s, color 0.18s, box-shadow 0.18s; }
.date-field:hover, .date-field[aria-expanded="true"] { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,110,0.12); }
.date-field.has-dates { color:var(--parchment); }
.dr-veil { position:fixed; inset:0; z-index:58; background:rgba(5,29,64,0.45); -webkit-backdrop-filter:blur(2.5px); backdrop-filter:blur(2.5px); animation:drFade 0.25s ease; }
.dr-pop { position:absolute; top:calc(100% + 10px); left:0; z-index:60; background:linear-gradient(165deg, #0A2247 0%, var(--forest) 55%); border:1px solid var(--gold-border); border-radius:16px; padding:1.15rem 1.3rem 0.9rem; box-shadow:0 1px 0 rgba(201,169,110,0.18) inset, 0 18px 55px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4); animation:drIn 0.42s cubic-bezier(0.34,1.56,0.64,1); }
/* Back-out curve overshoots then settles — the "bounce / breathe" Elec asked for
   (review round 1, 2026-07-30). */
@keyframes drIn { from { opacity:0; transform:translateY(-12px) scale(0.94); } to { opacity:1; transform:none; } }
@keyframes drFade { from { opacity:0; } to { opacity:1; } }
.dr-cols { display:flex; gap:1.6rem; }
.dr-cal { width:238px; }
/* ⛑ 2026-08-23: a universal caps-months experiment lived here for one deploy
   and was REVERTED on Elec's look ("the all caps was a bad idea. the vertical
   line inbetween also look funny") — at hero size the grammar reads wrong.
   The caps/underline/divider treatment belongs to the POPOVER ONLY (his
   approved 08-21 five items, rules below). Base stays the serif italic. */
.dr-month { font-family:var(--display); font-style:italic; font-size:1.05rem; letter-spacing:0.03em; color:var(--parchment); text-align:center; margin-bottom:0.6rem; }
.dr-arrow { position:absolute; top:1.05rem; background:none; border:1px solid var(--gold-line); border-radius:50%; width:1.8rem; height:1.8rem; color:var(--sage); font-size:1.05rem; line-height:1; cursor:pointer; transition:all 0.18s; z-index:2; }
.dr-prev { left:1.1rem; }
.dr-next { right:1.1rem; }
.dr-arrow:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); transform:scale(1.08); }
.dr-arrow:disabled { opacity:0.3; cursor:default; }
/* TOUCH FLOOR on the month arrows - phone only (2026-08-30, measured not guessed).
   Design-Language section 5 RELEASES the 44px floor on secondary/decorative controls but
   KEEPS it on date-picking controls; the section 10 amendment lifted it for date
   CELLS specifically ("tap width keeps its lane"), not for the month navigation.
   Measured on the live book root at 390px with elementFromPoint probing: the
   arrows' REAL hit area was 32w x 43h - under the floor on both axes.
   (The same probe CLEARED the guest steppers at 81x54 / 56x54 and the pet
   checkbox at 71x46, so only these two arrows needed anything.)

   The VISIBLE circle is untouched at 1.8rem - only the hit area grows, via a
   transparent centred overlay. .dr-arrow is position:absolute, so this cannot
   push the calendar or disturb the one-viewport dates step. */
@media (max-width: 767.98px) {
  .dr-arrow::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
}
.dr-dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); opacity:0.75; margin-bottom:0.3rem; }
.dr-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.dr-cell { position:relative; aspect-ratio:1; border:none; background:transparent; color:var(--parchment); font-family:var(--body); font-size:0.78rem; cursor:pointer; transition:background 0.13s, color 0.13s, transform 0.24s cubic-bezier(0.34,1.56,0.64,1); border-radius:50%; }
/* Press a date: quick soft deflate; release: the springy transition above
   reinflates with a slight overshoot — breath out / breath in (review round 2). */
.dr-cell:active:not(:disabled) { transform:scale(0.88); transition-duration:0.08s; transition-timing-function:ease; }
.dr-cell:hover:not(:disabled):not(.sel) { background:rgba(201,169,110,0.16); }
.dr-cell:disabled { color:rgba(146,154,160,0.3); cursor:default; }
/* Endpoints: translucent gold circle (Elec: "more see through"), drawn as a
   radial gradient so the range band can pass UNDERNEATH on the inner half —
   no hard band ends butting against the circles (review round 1). */
.dr-cell.sel { background:rgba(201,169,110,0.72); color:var(--forest); font-weight:700; }
.dr-cell.sel-start { border-radius:0; background:radial-gradient(circle closest-side, rgba(201,169,110,0.72) 0 99%, transparent 100%), linear-gradient(90deg, transparent 50%, rgba(201,169,110,0.13) 50%); }
.dr-cell.sel-end { border-radius:0; background:radial-gradient(circle closest-side, rgba(201,169,110,0.72) 0 99%, transparent 100%), linear-gradient(90deg, rgba(201,169,110,0.13) 50%, transparent 50%); }
.dr-cell.mid, .dr-cell.pre { background:rgba(201,169,110,0.13); border-radius:0; }
.dr-cell.pre { background:rgba(201,169,110,0.08); }
.dr-cell.tdy::after { content:""; position:absolute; left:50%; bottom:4px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--gold); }
.dr-cell.sel.tdy::after { background:var(--forest); }
.dr-hint { margin-top:0.65rem; padding-top:0.55rem; border-top:1px solid rgba(201,169,110,0.18); font-size:0.68rem; letter-spacing:0.06em; color:var(--sage); text-align:center; min-height:1em; }
.date-clear { background:none; border:none; color:var(--gold); font-size:0.76rem; cursor:pointer; font-family:var(--body); text-decoration:underline; white-space:nowrap; }
.date-msg { font-size:0.76rem; color:var(--sage); }
.date-msg.err { color:#e8b9ad; }
@media (max-width:700px){
  .date-field { min-width:170px; font-size:16px; }
  .dr-pop { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(330px, 94vw); animation:drInM 0.42s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes drInM { from { opacity:0; transform:translate(-50%,-44%) scale(0.92); } to { opacity:1; transform:translate(-50%,-50%); } }
  .dr-cols { display:block; }
  .dr-cal { width:100%; }
}

/* GUESTS + PETS control (search-redesign P-C, 2026-08-13) — same visual grammar
   as the date field/popover: forest ground, gold-line borders, the drIn
   bounce-in. Lives inside .fb-datecell beside .dr-wrap. */


/* ══ POP-OUT CALENDAR - Elec's five called items, 2026-08-21 night (header now
   locked; this is the next component). Scoped to .dr-pop ONLY - the hero
   calendar (.cd-wrap) keeps its reviewed look.
   1. DOW/date misalignment, measured: date cells are 38px touch-floor squares
      (aspect-ratio walks them out of their 34px tracks in a 238px month) while
      the dow row honestly stays in its tracks - 24px of drift by Saturday.
      With the month sized to its cells (item 5), both rows share the same
      1fr tracks and align BY CONSTRUCTION.
   2. Month+year in the header's all-caps grammar (var(--body), tracked,
      uppercase) instead of the serif italic.
   3. A faint partial vertical line between the two months - gold, fading at
      both ends per the line-work grammar.
   4. A faint underline beneath each month+year, same fade grammar.
   5. Wider pop with uniform padding so the components breathe evenly. */
.dr-pop .dr-month { font-family:var(--body); font-style:normal; font-weight:600;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--parchment);
  padding-bottom:0.4rem; margin-bottom:0.55rem;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent) no-repeat bottom center / 72% 1px; }
@media (min-width:768px){
  .dr-pop .dr-cols { position:relative; }
  .dr-pop .dr-cols::before { content:""; position:absolute; left:50%; top:12%; bottom:12%;
    width:1px; pointer-events:none;
    background:linear-gradient(180deg, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent); }
}
@media (min-width:768px) and (max-width:1024.98px){
  .dr-pop { padding:1.3rem; }
  .dr-pop .dr-cal { width:266px; }  /* 7 x 38px touch squares, exactly */
}