/* ═══════════════════════════════════════════════════════════════════════════
   Rec detail popup — shared by build-collection and view-collection
   ---------------------------------------------------------------------------
   This lived in build-collection.css, where four passes of work on the
   builder's popup could not reach the identical popup on view-collection.
   The two drifted: the builder got the photo as the top of the card, a pinned
   identity block and collapsed comments, and the viewer kept the old stripe-
   through-the-middle layout.

   Extracted so there is one popup and one place to change it. Most of the
   rules were already written against the .rec-detail-* classes both pages
   share; the ones the builder had scoped to #builderRecDetail carry a twin
   for #recDetailModal, which is the same panel under the viewer's id.

   Load AFTER the page's own stylesheet — these are overrides of the base
   .rec-detail-* rules that build-collection.css and view-collection.css
   each still declare.
   ═══════════════════════════════════════════════════════════════════════════ */

/* =====================================================================
   Place detail drawer
   ---------------------------------------------------------------------
   Measured before: a 118px header for one line of text. The <h2> was
   carrying the browser's default margin (~21px top and bottom) on top of
   the header's own 24px padding, so most of that height was nothing.
   ===================================================================== */

.rec-detail-panel {
  /* It met the viewport edge as a hard square with a black 0.3 shadow. */
  border-radius: 18px 0 0 18px;
  box-shadow: -18px 0 52px -14px rgba(17, 26, 77, 0.30);
}

.rec-detail-header {
  padding: 16px 20px;
  /* 2px of #f3f4f6 reads as a gap in the panel rather than a rule. */
  border-bottom: 1px solid #ecedf3;
  gap: 14px;
}

.rec-detail-header h2 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: #000e33;
}

.rec-detail-close {
  width: 34px;
  height: 34px;
  background: #f3f4f6;
}

.rec-detail-content { padding: 20px; }

.rec-detail-info {
  gap: 10px;
  padding: 14px 16px;
  background: #f7f8fb;
  border: 1px solid #ecedf3;
  border-radius: 14px;
  margin-bottom: 20px;
}

.rec-detail-row {
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: #46506d;
}

/* The icons were the only thing separating one fact from the next, so with
   them the rows read as a list and without them as a paragraph. A fixed
   gutter keeps the values aligned either way. */
.rec-detail-row > i {
  width: 16px;
  text-align: center;
  color: #8b93a7;
  flex: none;
}

/* ── Detail drawer, second pass: full-bleed hero, no boxes ─────────────────
   The first pass tightened the spacing but kept the shape — a framed image
   floating inside padding, then facts in a grey card, then two headings of
   the same weight. That reads as a form. This makes the photo the top of the
   panel and lets the facts sit on the page instead of inside a container.
   ───────────────────────────────────────────────────────────────────────── */

.rec-detail-panel {
  border-radius: 20px 0 0 20px;
  box-shadow: -20px 0 60px -18px rgba(17, 26, 77, 0.32);
}

.rec-detail-content { padding: 0 22px 22px; }

/* Cancel the content padding so the image spans the panel and meets its
   rounded corner, rather than sitting in a frame inside a frame. */
.rec-detail-image-wrap {
  margin: 0 -22px 18px;
  width: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0;
}

.rec-detail-header {
  padding: 14px 22px;
  border-bottom: none;
}
.rec-detail-header h2 {
  font-size: 1.18rem;
  font-weight: 700;
}

.rec-detail-close {
  width: 32px;
  height: 32px;
  background: #f2f3f7;
  color: #6b7280;
}
.rec-detail-close:hover { background: #e8eaf0; }

/* Facts as a plain list with hairlines, not a grey panel. */
.rec-detail-info {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
  margin-bottom: 22px;
}
.rec-detail-row {
  padding: 11px 0;
  border-bottom: 1px solid #f1f2f6;
  font-size: 0.9rem;
  color: #46506d;
  gap: 12px;
}
.rec-detail-row:last-child { border-bottom: none; }
.rec-detail-row > i { width: 15px; color: #a6acbe; }

/* Both headings were the same size and weight as the body around them, so
   nothing marked where one block ended and the next began. */
/* #8b93a7 came to 3.08:1 on white — these labels are 12px, so AA wants 4.5.
   #6b7280 is 4.83:1 and reads the same at a glance. */
.rec-detail-content h3 {
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
}

/* ── Detail: centred popup instead of a side drawer ────────────────────────
   Matches the shape my-recs uses, so opening a rec's details means the same
   thing in both places. The panel keeps its markup; only the container and
   the panel box change, which is why this is CSS and not a DOM rewrite.
   ───────────────────────────────────────────────────────────────────────── */
.rec-detail-modal {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.rec-detail-overlay {
  background: rgba(10, 14, 40, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rec-detail-panel {
  width: min(560px, 92vw);
  height: auto;
  /* Not 100vh: as a centred card it has to fit the viewport with the page
     visible around it, and .rec-detail-content already scrolls inside. */
  max-height: min(86vh, 760px);
  border-radius: 22px;
  box-shadow: 0 40px 100px -30px rgba(17, 26, 77, 0.55);
  /* slideInRight was written for a drawer coming off the right edge. */
  animation: recDetailPop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes recDetailPop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* The hero still bleeds to the panel edge, now under a rounded top on both
   sides rather than only the left. Shorter than the drawer's 3:2: in a
   centred card that ratio came to 373px of a 760px panel, so the facts and
   the note field started below the fold. */
.rec-detail-image-wrap {
  border-radius: 0;
  aspect-ratio: 5 / 2;
}

@media (prefers-reduced-motion: reduce) {
  .rec-detail-panel { animation: none; }
}

@media (max-width: 600px) {
  .rec-detail-modal { padding: 0; align-items: flex-end; }
  .rec-detail-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    animation: recDetailSheet 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes recDetailSheet {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}

/* =====================================================================
   Detail popup, third pass: less of it
   ---------------------------------------------------------------------
   The shape was fine; the contents were not. Eleven blocks in a 560px card
   that scrolled: a hero, five facts as a bordered list (one of them the
   address the title already implies), About, a 100px empty note field with
   its own Save button, three visibility pills, Saved By, a 232px comments
   panel, then four footer buttons. Measured at 1041px of content in a card
   that can be 760 tall, so most of it was below the fold.

   Nothing is removed. The facts become one line instead of five, the note
   stops being the tallest thing in the card, and comments — which people
   open a rec to read, not to write — collapse behind a summary. What is
   left above the fold is the place: photo, name, address, facts, About.
   ===================================================================== */

/* Facts on one wrapping line. The address keeps a line of its own at the
   top of it, because it is the one fact that is a sentence. */
.rec-detail-info {
  display: flex;
  /* The base rule is a column; without this the chips stack. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 16px;
}

.rec-detail-row {
  padding: 0;
  border-bottom: none;
  gap: 7px;
  font-size: 0.88rem;
}

.rec-detail-row:has(#recDetailAddress) {
  flex-basis: 100%;
  margin-bottom: 2px;
}

/* 100px of empty box plus a detached gradient pill was the tallest thing in
   the card. Two lines, and a button that reads as a button and not a call
   to action. */
.rec-detail-notes {
  width: 100%;
  /* content-box read min-height as text and rendered it 26px taller. */
  box-sizing: border-box;
  min-height: 56px;
  padding: 9px 11px;
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.rec-detail-save-btn {
  padding: 7px 14px;
  font-size: 0.84rem;
}

.rec-detail-section { margin-bottom: 18px; }

.rec-vis-toggle { flex-wrap: wrap; }

.vis-pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font-size: 0.86rem;
}

/* Comments, collapsed. */
.rec-comments-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  border-top: 1px solid #f1f2f6;
  border-bottom: 1px solid #f1f2f6;
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
}
.rec-comments-details > summary::-webkit-details-marker { display: none; }

/* The disclosure triangle, drawn rather than inherited, so it sits after the
   label and turns with the state. */
.rec-comments-details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid #a6acbe;
  border-bottom: 2px solid #a6acbe;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.rec-comments-details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.rec-comments-details > summary:hover { color: #46506d; }
.rec-comments-details > summary:focus-visible {
  outline: 2px solid #4b5bd5;
  outline-offset: 2px;
}

.rec-comments-count {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #6b7280;
  background: #f1f2f6;
  border-radius: 999px;
  padding: 1px 7px;
}
.rec-comments-count:empty { display: none; }

.rec-comments-details .rec-comments-panel { margin-top: 12px; }

/* Four equal-width buttons at 560px is fine; at 92vw on a phone the last one
   ran past the edge, because a flex item will not shrink below its content. */
.rec-detail-actions {
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
}
.rec-detail-action-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
  .rec-comments-details > summary::after { transition: none; }
}

/* Trims to get the card under its own max-height on a laptop screen: the hero
   was 224px of a 700px content box, and every section carried 18px of air.
   Measured 813 of content before these, 700 available. */
.rec-detail-image-wrap { aspect-ratio: 3 / 1; }
.rec-detail-section { margin-bottom: 14px; }
.rec-detail-section:last-child { margin-bottom: 0; }
.saved-by-text { font-size: 0.85rem; }
.rec-detail-content h3 { margin-bottom: 6px; }

/* The Save button on the heading's line rather than under the field. It was
   37px of the card for a control that is only ever pressed after typing, and
   the grid does it without touching the markup, which three other callers
   populate by id. */
.rec-detail-content .rec-detail-section:has(#recDetailNotesInput) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
}
.rec-detail-content .rec-detail-section:has(#recDetailNotesInput) > h3 {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}
#recDetailSaveNoteButton {
  grid-column: 2;
  grid-row: 1;
}
#recDetailNotesInput {
  grid-column: 1 / span 2;
  grid-row: 2;
  margin: 6px 0 0;
}

.rec-detail-section { margin-bottom: 12px; }

/* Content came to 718px after the trims above (813 before). The cap was 760,
   which left the card scrolling by 18px for nothing. */
.rec-detail-panel { max-height: min(88vh, 800px); }

/* =====================================================================
   Detail popup, fourth pass: on brand
   ---------------------------------------------------------------------
   The card had the right contents in the site's default Helvetica Neue,
   with the photo as a full-bleed stripe through its middle — below the
   title, above the facts — which is why it read as a banner ad rather
   than a hero. The photo is now the top of the card and the panel clips
   it, so it carries the panel's own corners.

   Own --rdx-* namespace, kept deliberately distinct from the --rd-* that
   site-chrome.css declares for the newer modal markup.
   ===================================================================== */

#builderRecDetail .rec-detail-panel,
#recDetailModal .rec-detail-panel {
  --rdx-ink: #000e33;
  --rdx-body: #46506d;
  --rdx-muted: #6b7280;
  --rdx-line: rgba(0, 14, 51, 0.08);
  --rdx-grad: linear-gradient(103deg, #0066ff 0%, #6a5bff 48%, #c27aff 100%);
  font-family: "Plus Jakarta Sans", 'Helvetica Neue', Arial, sans-serif;
  color: var(--rdx-body);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
#builderRecDetail .rec-detail-image-wrap,
#recDetailModal .rec-detail-image-wrap {
  position: relative;
  flex: none;
  width: 100%;
  margin: 0;
  aspect-ratio: 5 / 2;
  border-radius: 0;
  overflow: hidden;
  background: var(--rdx-grad);
}

/* The placeholder carries an inline border-radius:14px for the old inset
   frame, which showed as rounded corners inside a square bleed. */
#builderRecDetail .rec-detail-image-wrap .image-placeholder-gradient,
#recDetailModal .rec-detail-image-wrap .image-placeholder-gradient {
  border-radius: 0 !important;
}

/* Over the photo, not beside the title. */
#builderRecDetail .rec-detail-close,
#recDetailModal .rec-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--rdx-ink);
  box-shadow: 0 2px 10px rgba(0, 14, 51, 0.22);
}
#builderRecDetail .rec-detail-close:hover,
#recDetailModal .rec-detail-close:hover {
  background: #ffffff;
}

/* ── Title ──────────────────────────────────────────────────────────── */
/* The base .rec-detail-header is display:flex, from when this held the title
   and the close button side by side. The close button is over the hero now
   and the name stacks above the address and facts, so it wants a block. */
#builderRecDetail .rec-detail-panel .rec-detail-header,
#recDetailModal .rec-detail-panel .rec-detail-header {
  display: block;
  padding: 18px 22px 0;
  border-bottom: none;
}

#builderRecDetail .rec-detail-header h2,
#recDetailModal .rec-detail-header h2 {
  font-family: "Outfit", 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--rdx-ink);
}

#builderRecDetail .rec-detail-content,
#recDetailModal .rec-detail-content { padding: 10px 22px 22px; }

/* ── Facts ──────────────────────────────────────────────────────────── */
#builderRecDetail .rec-detail-info,
#recDetailModal .rec-detail-info { margin-bottom: 18px; }

#builderRecDetail .rec-detail-row,
#recDetailModal .rec-detail-row { color: var(--rdx-body); }
#builderRecDetail .rec-detail-row:has(#recDetailAddress),
#recDetailModal .rec-detail-row:has(#recDetailAddress) {
  color: var(--rdx-muted);
  font-size: 0.9rem;
}
#builderRecDetail .rec-detail-row > i,
#recDetailModal .rec-detail-row > i { color: #9aa2b8; }
#builderRecDetail #recDetailRatingRow > i,
#recDetailModal #recDetailRatingRow > i { color: #f5a623; }

#builderRecDetail #recDetailWebsite,
#recDetailModal #recDetailWebsite {
  color: #0066ff;
  font-weight: 600;
  text-decoration: none;
}
#builderRecDetail #recDetailWebsite:hover,
#recDetailModal #recDetailWebsite:hover { text-decoration: underline; }

/* ── Section labels ─────────────────────────────────────────────────── */
#builderRecDetail .rec-detail-content h3,
#builderRecDetail .rec-comments-details > summary,
#recDetailModal .rec-comments-details > summary {
  font-family: "Outfit", 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

#builderRecDetail #recDetailDescription,
#recDetailModal #recDetailDescription {
  color: var(--rdx-body);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* ── Controls ───────────────────────────────────────────────────────── */
#builderRecDetail .rec-detail-notes,
#recDetailModal .rec-detail-notes {
  border-color: #e7e9f2;
  border-radius: 12px;
  background: #fbfcfe;
  color: var(--rdx-body);
  font-family: inherit;
}
#builderRecDetail .rec-detail-notes:focus,
#recDetailModal .rec-detail-notes:focus {
  border-color: #6a5bff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(106, 91, 255, 0.14);
}

#builderRecDetail .rec-detail-save-btn,
#recDetailModal .rec-detail-save-btn {
  background: var(--rdx-grad);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
}

#builderRecDetail .vis-pill,
#recDetailModal .vis-pill {
  border-radius: 999px;
  border-color: #e7e9f2;
  font-family: inherit;
  font-weight: 600;
  color: var(--rdx-muted);
}
#builderRecDetail .vis-pill.active,
#recDetailModal .vis-pill.active {
  background: var(--rdx-grad);
  border-color: transparent;
  color: #fff;
}

#builderRecDetail .rec-detail-action-btn,
#recDetailModal .rec-detail-action-btn {
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
}
#builderRecDetail .rec-detail-action-btn.secondary,
#recDetailModal .rec-detail-action-btn.secondary {
  border: 1px solid #e7e9f2;
  background: #fff;
  color: var(--rdx-body);
}
#builderRecDetail .rec-detail-action-btn.secondary:hover,
#recDetailModal .rec-detail-action-btn.secondary:hover {
  border-color: #cdd4e8;
  background: #fafbff;
}
#builderRecDetail .rec-detail-action-btn.primary,
#recDetailModal .rec-detail-action-btn.primary {
  background: var(--rdx-grad);
  border: none;
  color: #fff;
}

/* ── Rules ──────────────────────────────────────────────────────────── */
/* One hairline above Comments, not one above AND one below AND a third
   above the footer 12px later. The summary keeps the top rule because it
   is what separates the place from the conversation about it; the panel
   below it is already a bordered card when open. */
#builderRecDetail .rec-comments-details > summary,
#recDetailModal .rec-comments-details > summary {
  border-top: 1px solid var(--rdx-line);
  border-bottom: none;
  padding: 12px 2px;
}
#builderRecDetail .rec-detail-actions,
#recDetailModal .rec-detail-actions {
  border-top: 1px solid var(--rdx-line);
  padding-top: 14px;
  margin-top: 4px;
}

#builderRecDetail .rec-comments-count,
#recDetailModal .rec-comments-count {
  font-family: inherit;
  background: #eef1fe;
  color: #3a46a8;
}

/* rgba(20,20,30,.55) composites to #7b7b83 on the comments panel's #f9f9ff,
   which is 4.0:1 against 14.7px text. #6b7280 is 4.61:1 there. */
.rec-comments-loading,
.rec-comments-empty,
.rec-comments-error {
  color: #6b7280;
}

/* =====================================================================
   Detail popup: the pinned identity block, and a round monogram
   ===================================================================== */

/* The panel is a flex column and only .rec-detail-content scrolls, so the
   header is already fixed — it just had nothing to say so. Transparent, with
   no rule, the facts slid up behind it with no edge to stop against.
   flex:none because a flex child's default is 0 1 auto: on a short viewport
   the header was a candidate to shrink before the scroller did. */
#builderRecDetail .rec-detail-panel .rec-detail-header,
#recDetailModal .rec-detail-panel .rec-detail-header {
  /* Deliberately NOT position:relative — that would make this the close
     button's offset parent and land it on the white, 14px below the photo it
     is supposed to sit on. A flex item takes z-index without being
     positioned, which is all this needs. */
  z-index: 1;
  flex: none;
  padding: 16px 22px 12px;
  background: #ffffff;
  border-bottom: 1px solid var(--rdx-line);
}

/* The facts sit with the name now, so they no longer need to clear anything
   below them; the header's own padding is the gap. */
#builderRecDetail .rec-detail-header .rec-detail-info,
#recDetailModal .rec-detail-header .rec-detail-info {
  margin-bottom: 0;
  margin-top: 8px;
}

#builderRecDetail .rec-detail-content,
#recDetailModal .rec-detail-content { padding: 16px 22px 22px; }

/* The saved-by row was taking its 13px and its grey from site-chrome.css,
   which reached it only because this panel used to share that modal's id. */
#builderRecDetail .saved-by-row,
#recDetailModal .saved-by-row {
  font-size: 0.85rem;
  color: var(--rdx-muted);
}