/* browse-detail.css — split from browse.css (lines 236-345), 2026-08-17.
   the in-page property detail view (.browse-detail and children)
   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. */
.browse-detail { display:none; }
@media(min-width:1280px) {
  .browse-split { grid-template-columns:minmax(300px,25%) minmax(0,37%) minmax(0,38%); }
  .browse-section { position:sticky; top:118px; height:calc(100vh - 118px); overflow-y:auto; overscroll-behavior:contain; }
  .browse-detail { display:block; position:sticky; top:118px; height:calc(100vh - 118px); overflow-y:auto; overscroll-behavior:contain; padding:1.4rem 1.4rem 2rem; border-left:1px solid var(--gold-line); }
  .browse-grid { grid-template-columns:1fr; gap:1.1rem; }
}
.bd-modal { background:#232B36; border:2px solid var(--gold-border); border-radius:var(--radius); overflow:hidden; }
.date-field { border-color:var(--gold); color:var(--parchment); }
.date-field:not(.has-dates) { animation:datePulse 2.8s ease-in-out infinite; }
.date-field.has-dates { animation:none; border-color:var(--gold-line); }
@keyframes datePulse { 0%,100% { box-shadow:0 0 0 0 rgba(201,169,110,0); } 50% { box-shadow:0 0 0 7px rgba(201,169,110,0.13); } }

/* ── GROUP 2 (Elec 2026-08-15, book-sub rebuild): pin transparency + breathing,
   date-line + pop-open calendar overlay. Appended AFTER everything above so
   these rules WIN by cascade (the earlier .swell hover rules are superseded —
   the JS now applies .breathe, never .swell). ── */

/* Pins rest "fairly transparent"; any breathing state is enlarged, opaque,
   with a steady slow pulse of breath (scale + gold halo oscillation). */
.map-pill { opacity:0.55; transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease; }
.map-pill.breathe { opacity:1; animation:pillBreathe 2.6s ease-in-out infinite; }
@keyframes pillBreathe {
  0%, 100% { transform:rotate(-7deg) scale(1.14);
    box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 3px rgba(200,171,123,0.3), 0 0 12px 3px rgba(200,171,123,0.35); }
  50%      { transform:rotate(-9deg) scale(1.26);
    box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 5px rgba(200,171,123,0.5), 0 0 24px 8px rgba(200,171,123,0.6); }
}

/* Date LINE (calOverlay mode): the collapsed resting state of the calendar. */
.bk-dateline { display:flex; justify-content:space-between; align-items:center; gap:0.8rem; width:100%;
  padding:0.7rem 1rem; background:var(--forest); border:1px solid var(--gold); border-radius:var(--radius-sm);
  color:var(--parchment); font-family:var(--body); font-size:0.95rem; cursor:pointer; margin:0 0 0.7rem;
  transition:background 0.18s, box-shadow 0.18s; }
.bk-dateline:hover { background:rgba(201,169,110,0.08); box-shadow:0 0 0 3px rgba(201,169,110,0.12); }
.bk-dateline .bk-dl-dates { font-weight:600; }
.bk-dateline .bk-dl-dates.empty { color:var(--sage); font-weight:400; }
.bk-dateline .bk-dl-edit { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }

/* Pop-open calendar: overlays what's beneath until a full range is chosen.
   Positioning context = the panel (.browse-detail is position:relative on the
   rebuild page). */
.bk-calwrap { display:none; }
.bk-calwrap.open { display:block; position:absolute; left:0.6rem; right:0.6rem; top:0.5rem; z-index:30;
  background:#232B36; border:2px solid var(--gold-border); border-radius:var(--radius);
  padding:1rem 1rem 1.1rem; box-shadow:0 22px 70px rgba(0,0,0,0.7); }

/* Pin decluttering (2026-08-15): overlap-hidden pins. A breathing pin (hover
   from list, or selected) always re-surfaces itself. */
.map-pill.pill-hidden { visibility:hidden; pointer-events:none; }
.map-pill.breathe { visibility:visible; pointer-events:auto; }

/* Details-tab extras (2026-08-15): thumbnail gallery + guest reviews. */
.bd-thumbs { display:flex; gap:0.4rem; flex-wrap:wrap; margin:0.5rem 0 0.6rem; }
.bd-thumb { width:62px; height:46px; padding:0; border:2px solid var(--gold-line); border-radius:6px; overflow:hidden; cursor:pointer; background:var(--forest); transition:border-color 0.16s, transform 0.16s; }
.bd-thumb:hover { border-color:var(--gold); transform:scale(1.06); }
.bd-thumb.on { border-color:var(--gold); }
.bd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.bd-rev-h { font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--parchment); margin:1rem 0 0.5rem; }
.bd-rev { border-top:1px solid rgba(201,169,110,0.14); padding:0.6rem 0 0.2rem; }
.bd-rev-stars { font-size:0.8rem; }
.bd-rev-text { font-size:0.84rem; color:rgba(245,240,232,0.85); line-height:1.55; margin:0.25rem 0 0.3rem; }
.bd-rev-by { font-size:0.74rem; color:var(--sage); margin:0 0 0.3rem; }
.bd-rev-via { opacity:0.75; }

/* Book-pane trust band (2026-08-15): legit/backed/safe + mini contact. */
.bk-trust { margin-top:0.75rem; border-top:1px solid rgba(201,169,110,0.14); padding-top:0.55rem; }
.bk-t-line { font-size:0.78rem; color:#CDD4DA; margin:0 0 0.32rem; line-height:1.45; }
.bk-t-check { color:var(--gold); margin-right:0.25rem; }
.bk-trust-mini { display:none; font-size:0.73rem; color:#CDD4DA; margin:0 0 0.25rem; line-height:1.4; }
.bk-t-co { font-size:0.7rem; color:#B6BEC5; margin:0.35rem 0 0; letter-spacing:0.04em; }
.bk-t-co a { color:var(--gold); text-decoration:none; }
.modal-body:has(#bkQuote:not(:empty)) .bk-trust-full { display:none; }
.modal-body:has(#bkQuote:not(:empty)) .bk-trust-mini { display:block; }

/* Pin tooltip (2026-08-16) — replaces the browser's native `title` box, which
   renders black-on-white and cannot be styled. Navy ground, gold text, gold
   border; shown only on PIN hover (selection holds .breathe indefinitely, so
   it can't drive this). */
.map-pill .pill-tip {
  position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%) translateY(4px);   /* no counter-rotate: inherit the tag's tilt (Elec 2026-08-16) */
  background:rgba(5,29,64,0.97); color:var(--gold);
  border:1px solid var(--gold); border-radius:var(--radius-sm);
  padding:0.3rem 0.62rem; font-family:var(--body); font-size:0.72rem; font-weight:600;
  letter-spacing:0.02em; white-space:nowrap; text-transform:none;
  opacity:0; pointer-events:none; z-index:6;
  transition:opacity 0.16s ease, transform 0.16s ease;
}
.map-pill.tip-on .pill-tip { opacity:0.72; transform:translateX(-50%) translateY(0); }  /* Elec 2026-08-16: softer on hover */

/* PIN SHAPE (Elec 2026-08-16): rounded pill, NO tail, tilt kept — with a
   speech-bubble trail of two much smaller dots descending from the bottom
   corner. They overlap the pill and each other and paint above it (they are
   the pill's own pseudo-elements, so they inherit its tilt). */
.map-pill { border-radius:999px; padding:0.3rem 0.7rem; }
.map-pill::after {
  content:""; position:absolute; left:7px; bottom:-7px;
  width:10px; height:10px; box-sizing:border-box;
  border-radius:50%; border:2px solid #0A2247;
  background:var(--gold); z-index:3;
}
.map-pill::before {
  /* Elec 2026-08-16: trail pulled in closer to the tag. */
  content:""; position:absolute; left:4px; bottom:-13px;
  width:6px; height:6px; box-sizing:border-box;
  border-radius:50%; border:2px solid #0A2247;
  background:var(--gold); z-index:2;
}