/* ==========================================================================
   AE NYC Realty — rentals.css
   Styles the two listing pages: /rentals (browse) and /rentals/<slug> (detail).
   Loaded AFTER styles.css, so every token, .btn, .card, .chip, .field, .fld
   convention, .lead, .eyebrow, .fine and .link-arrow comes from there.
   Order: browse shell, filter panel + internals, sticky bar, results grid,
   listing cards, detail page (gallery, facts, blocks, sidebar form),
   similar listings, lightbox, MapLibre map, motion, staff preview bar.
   Mobile-first. Breakpoints: 560px (grid floor), 720px, 1100px (sidebar).
   ========================================================================== */

/* ---------- Browse: page shell ---------- */
.rl { display: block; }

.rl__hero {
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(44px, 6vw, 72px) clamp(28px, 3.5vw, 44px);
}
.rl__title { max-width: 24ch; }
.rl__lead { margin-top: 20px; max-width: 58ch; }

/* Search: icon field + submit, one row once there is room for it. */
.rl__search { display: grid; gap: 12px; margin-top: clamp(28px, 3.5vw, 40px); }
.rl__search-field { position: relative; display: flex; align-items: center; }
.rl__search-field svg {
  position: absolute; left: 16px; width: 20px; height: 20px;
  color: var(--stone); pointer-events: none;
}
.rl__search-field input {
  width: 100%; min-height: 54px; font: inherit; font-size: 17px; color: var(--ink);
  padding: 14px 16px 14px 48px;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rl__search-field input::placeholder { color: var(--stone); }
.rl__search-field input:hover { border-color: var(--ink-3); }
.rl__search-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-tint); }
.rl__search-field input::-webkit-search-cancel-button { cursor: pointer; }
.rl__search .btn { min-height: 54px; }
@media (min-width: 560px) {
  .rl__search { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
}

/* Neighborhood quick-pick rail: a horizontal scroller on phones. */
.rl__hoods { background: var(--mist); border-bottom: 1px solid var(--hairline); }
.rl__hoods-inner { display: grid; gap: 12px; padding-block: 20px; }
.rl__hoods-label {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone);
}
.rl__hoods-list {
  display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0 0 4px;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.rl__hoods-list::-webkit-scrollbar { height: 4px; }
.rl__hoods-list::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }
.rl__hoods-list > li { flex: none; }

.hood {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.hood:hover { border-color: var(--ink); }
.hood__n { font-size: 11px; color: var(--stone); transition: color .2s var(--ease); }
.hood[aria-pressed="true"], .hood.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hood[aria-pressed="true"] .hood__n, .hood.is-active .hood__n { color: var(--gold); }

/* ---------- Browse: layout ---------- */
.rl__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); padding-bottom: var(--section); }
/* The results column: min-width 0 keeps the grid from forcing the page wide. */
.rl__results { display: grid; gap: 0; align-content: start; min-width: 0; }

/* ---------- Browse: filter panel (off-canvas below 1100px) ---------- */
.rl__panel {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: min(360px, 100vw); max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--white); border-right: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgb(0 0 0 / .16);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s var(--ease);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* Scrim fallback. js/rentals.js builds a `.rl__backdrop` sibling and sets
   `body.rl-panel-open`; when that element exists we stay out of the way, so the
   two never double-darken. If it is absent this still gives the panel a backdrop.
   It hangs off .rl__body, not the panel: .rl__panel carries a transform (which
   makes it the containing block for fixed descendants) and scrolls with
   overflow-y, so a backdrop on the panel would be sized to the panel and clipped. */
.rl__body::before {
  content: ""; position: fixed; inset: 0; z-index: 55;
  background: rgb(35 37 43 / .48);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s var(--ease), visibility .32s var(--ease);
}
/* Open state: support the class on the panel and the body-level hook the JS uses. */
.rl__panel.is-open,
body.rl-panel-open .rl__panel { transform: none; visibility: visible; }
body:not(:has(.rl__backdrop)) .rl__body:has(.rl__panel.is-open)::before,
body.rl-panel-open:not(:has(.rl__backdrop)) .rl__body::before {
  opacity: 1; visibility: visible; pointer-events: auto;
}
body.rl-filters-open, body.rl-panel-open { overflow: hidden; }

.rl__panel-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter); background: var(--white);
  border-bottom: 1px solid var(--hairline);
}
.rl__panel-title {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.rl__panel-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px; flex: none;
  padding: 0; background: none; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.rl__panel-close svg { width: 18px; height: 18px; }
.rl__panel-close:hover { background: var(--mist); border-color: var(--ink); }

.rl__filters { display: grid; gap: 24px; padding: 22px var(--gutter) 32px; }
.rl__panel-actions {
  display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--hairline);
}
.rl__panel-actions .btn { width: 100%; }

/* ---------- Browse: filter internals (.fset / .pill) ---------- */
.fset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fset + .fset { padding-top: 22px; border-top: 1px solid var(--hairline); }
.fset__legend {
  padding: 0; margin-bottom: 12px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
}
.fset__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.fset__dash { color: var(--stone); font-size: 15px; }

.pills { display: flex; gap: 8px; }
.pills--wrap { flex-wrap: wrap; }
.pills--tight { flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pills--tight .pill { padding: 9px 12px; font-size: 11px; letter-spacing: .08em; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"], .pill.is-active {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}

/* ---------- Browse: sticky results bar ---------- */
/* Sits 72px down so it clears the sticky site header (60px when compact),
   and stays under it in the stack. */
.rl__bar {
  position: sticky; top: 72px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin-bottom: 20px; padding: 12px 0;
  background: var(--white); border-bottom: 1px solid var(--hairline);
  transition: top .3s var(--ease);
}
.site-header.is-compact ~ main .rl__bar { top: 60px; }
.rl__count {
  font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: .02em;
  color: var(--stone); display: flex; align-items: baseline; gap: 6px;
}
.rl__count strong { font-weight: 500; font-size: 22px; color: var(--ink); }
.rl__bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.rl__filter-btn { display: inline-flex; align-items: center; gap: 8px; }
.rl__badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: 0; border-radius: 999px;
  background: var(--gold); color: var(--ink);
}
.rl__badge.is-hidden { display: none; }

.rl__sort { position: relative; display: inline-flex; align-items: center; }
.rl__sort select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; max-width: 60vw;
  padding: 11px 38px 11px 14px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background-color: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
  cursor: pointer; transition: border-color .2s var(--ease);
}
.rl__sort select:hover { border-color: var(--ink); }
.rl__sort select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-tint); }
.rl__sort::after {
  content: ""; position: absolute; right: 15px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
}

.rl__views { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.viewbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 44px; padding: 0;
  background: var(--white); color: var(--ink-3);
  border: 0; border-left: 1px solid var(--hairline); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.viewbtn:first-child { border-left: 0; }
.viewbtn svg { width: 18px; height: 18px; }
.viewbtn:hover { background: var(--mist); color: var(--ink); }
.viewbtn.is-active, .viewbtn[aria-pressed="true"] { background: var(--ink); color: var(--white); }

/* Active filter chips written by the client-side filter. */
.rl__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rl__chips:empty, .rl__chips[hidden] { display: none; }
.rl__chips > * {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: var(--gold-tint); border: 0; border-radius: var(--radius);
}
.rl__chips button { cursor: pointer; }
.rl__chips button:hover { background: var(--gold); }

/* ---------- Browse: results grid, empty state, map ---------- */
.rl__grid-wrap { position: relative; }
/* The screen switches panes by setting the `hidden` attribute. A bare class
   rule such as `.rl__grid { display: grid }` outranks the user-agent `[hidden]`
   rule, so the grid stayed visible underneath the map and the two panes
   rendered at once. This keeps `hidden` authoritative anywhere in the screen. */
.rl [hidden] { display: none; }
.rl__grid {
  display: grid; gap: clamp(18px, 2vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.rl__item { display: flex; min-width: 0; }
.rl__item > .lcard { flex: 1; min-width: 0; }
.rl__item[hidden] { display: none; }
@media (max-width: 560px) {
  .rl__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

.rl__empty {
  display: grid; justify-items: start; gap: 16px;
  max-width: 640px; margin: 8px 0 24px;
  padding: clamp(28px, 4vw, 40px);
  background: var(--mist); border-radius: var(--radius);
}
.rl__empty[hidden] { display: none; }
.rl__empty .eyebrow { margin-bottom: 0; }
.rl__empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.rl__map { display: flex; flex-direction: column; gap: 12px; }
.rl__map[hidden] { display: none; }
.rl__map-canvas {
  position: relative; z-index: 0;
  height: clamp(320px, 45vw, 520px); width: 100%;
  background: var(--mist); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden;
}
.rl__map-foot {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: baseline; justify-content: space-between;
}
.rl__map-note { max-width: 70ch; margin: 0; }
.rl__map-foot .btn { flex: none; }

/* ---------- Browse: closing CTA ---------- */
.rl__cta { background: var(--ink); color: var(--on-dark); }
.rl__cta .eyebrow { color: var(--gold); }
.rl__cta .lead { color: var(--on-dark-2); }
.rl__cta-inner { display: grid; gap: 28px; align-items: center; }
.rl__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .rl__cta-inner { grid-template-columns: minmax(0, 1.5fr) auto; gap: clamp(32px, 5vw, 72px); }
}

/* ---------- Browse: wide layout (sticky sidebar) ---------- */
@media (min-width: 1100px) {
  .rl__body {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 3.5vw, 56px);
    padding-top: 32px;
  }
  .rl__panel {
    /* inset first: it is a shorthand and would otherwise reset top below. */
    inset: auto; position: sticky; top: 72px; z-index: 10;
    width: auto; height: calc(100vh - 88px);
    display: block; overflow-y: auto;
    background: transparent; border-right: 0; box-shadow: none;
    transform: none; visibility: visible;
    transition: top .3s var(--ease);
  }
  .site-header.is-compact ~ main .rl__panel { top: 60px; height: calc(100vh - 76px); }
  .rl__body::before { display: none; }
  .rl__panel-head { position: static; padding: 0 0 16px; border-bottom: 0; }
  .rl__panel-head .rl__panel-title { font-size: 13px; letter-spacing: .2em; }
  .rl__panel-close { display: none; }
  .rl__filters { padding: 22px 0 0; }
  .rl__panel-actions { position: sticky; bottom: 0; padding-bottom: 8px; background: var(--white); }
  .rl__panel-actions .btn { width: auto; }
  .rl__filter-btn { display: none; }
}

/* ---------- Listing card ---------- */
.lcard {
  display: flex; flex-direction: column; height: 100%; min-width: 0;
  overflow: hidden; background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.lcard:hover {
  transform: translateY(-2px); border-color: var(--hairline);
  box-shadow: 0 14px 34px rgb(35 37 43 / .10);
}
.lcard:focus-within { border-color: var(--gold); }

.lcard__media {
  position: relative; display: block; overflow: hidden;
  background: var(--mist); text-decoration: none;
}
.lcard__img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  background-color: var(--mist); background-size: cover; background-position: center;
  transition: transform .5s var(--ease);
}
.lcard__media:hover .lcard__img, .lcard:hover .lcard__img { transform: scale(1.04); }
.lcard__img--empty {
  display: grid; place-items: center;
  background: var(--mist); color: var(--stone);
}
.lcard__img--empty svg { width: 44px; height: 44px; opacity: .55; }

.lcard__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  border-radius: var(--radius);
  background: rgb(255 255 255 / .94); color: var(--ink);
}
.badge--new { background: var(--gold); color: var(--ink); }
.badge--featured { background: var(--ink); color: var(--gold); }

.lcard__body { display: grid; gap: 8px; align-content: start; padding: 20px 20px 22px; }
.lcard__price {
  font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.1;
  letter-spacing: -.01em; color: var(--ink);
}
.lcard__title { font-weight: 400; font-size: 17px; line-height: 1.35; letter-spacing: 0; }
.lcard__title a { text-decoration: none; color: var(--ink); }
.lcard__title a:hover, .lcard__title a:focus-visible {
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.lcard__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-family: var(--font-display); font-weight: 400; font-size: 13px; color: var(--ink-3);
}
.lcard__facts span + span::before { content: "\00b7"; color: var(--stone); margin-right: 10px; }
.lcard__where { font-size: 15px; color: var(--stone); }
.lcard__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.lcard__tags li {
  padding: 4px 9px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep);
  background: var(--gold-tint);
}
.lcard__avail {
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hairline);
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- Mini card (similar-listings rail) ---------- */
.mcard {
  display: grid; grid-template-columns: 1fr; gap: 0;
  overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mcard:hover {
  transform: translateY(-2px); border-color: var(--hairline);
  box-shadow: 0 12px 28px rgb(35 37 43 / .10);
}
.mcard__media { display: block; overflow: hidden; background: var(--mist); }
.mcard__img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  background-size: cover; background-position: center;
  transition: transform .5s var(--ease);
}
.mcard:hover .mcard__img { transform: scale(1.04); }
.mcard__body { display: grid; gap: 4px; align-content: start; padding: 16px 18px 18px; }
.mcard__price { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink); }
.mcard__title { font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1.35; }
.mcard__where { font-size: 14px; color: var(--stone); }

/* ---------- Detail: shell, breadcrumbs, gallery ---------- */
.ld { display: block; }

.ld__crumbs { padding-top: clamp(20px, 2.5vw, 28px); }
.ld__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.ld__crumbs li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--stone); }
.ld__crumbs li + li::before { content: "/"; color: var(--hairline); }
.ld__crumbs li:last-child { color: var(--ink); }
.ld__crumbs a { text-decoration: none; }
.ld__crumbs a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

.ld__gallery-wrap { padding-top: clamp(20px, 2.5vw, 28px); }
.ld__gallery { display: grid; gap: 10px; }
.ld__gallery--empty {
  padding: clamp(28px, 4vw, 40px);
  background: var(--mist); border-radius: var(--radius);
}
.ld__hero {
  position: relative; display: block; width: 100%; padding: 0;
  background: var(--mist); border: 0; border-radius: var(--radius);
  overflow: hidden; cursor: zoom-in;
}
.ld__hero-img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  background-color: var(--mist); background-size: cover; background-position: center;
  transition: transform .6s var(--ease);
}
.ld__hero:hover .ld__hero-img { transform: scale(1.02); }
.ld__hero-count {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgb(35 37 43 / .82); color: var(--on-dark);
}
.ld__hero-count svg { width: 15px; height: 15px; }

.ld__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px;
  padding-bottom: 4px; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.ld__thumbs::-webkit-scrollbar { height: 4px; }
.ld__thumbs::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }
.ld__thumb {
  display: block; width: 100%; height: 70px; padding: 0;
  background: var(--mist); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
}
.ld__thumb-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  background-size: cover; background-position: center;
}
.ld__thumb:hover { border-color: var(--ink); }
.ld__thumb.is-active { border-color: var(--gold); opacity: 1; }
.ld__thumb:not(.is-active) { opacity: .72; }

@media (min-width: 880px) {
  .ld__gallery { grid-template-columns: minmax(0, 1fr) 108px; grid-template-rows: auto; gap: 12px; }
  .ld__hero { grid-column: 1; grid-row: 1; }
  .ld__hero-img { aspect-ratio: 16 / 10; }
  .ld__thumbs {
    grid-column: 2; grid-row: 1;
    grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: 74px;
    align-content: start; gap: 10px;
    padding: 0 4px 0 0; overflow-x: hidden; overflow-y: auto;
  }
  .ld__thumb { height: 74px; }
}

/* ---------- Detail: content column ---------- */
.ld__main {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  padding-top: clamp(28px, 3.5vw, 44px);
}
.ld__content { display: grid; gap: clamp(32px, 4vw, 48px); min-width: 0; }

.ld__head { display: grid; gap: 20px; padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--hairline); }
.ld__head-top { display: grid; gap: 16px; }
.ld__head-actions { display: flex; align-items: center; gap: 10px; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ld__price {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 24px);
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px;
}
.ld__title { font-size: clamp(30px, 3.6vw, 46px); max-width: 26ch; }
.ld__where {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 16px; color: var(--stone);
}
.ld__where svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.ld__dot { color: var(--hairline); }

.ld__headline {
  font-size: clamp(18px, 1.3vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 62ch;
}
.ld__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; list-style: none; margin: 0; padding: 0;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
}
.ld__facts li { display: grid; gap: 4px; padding: 14px 16px; background: var(--white); }
.ld__fact-label {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
}
.ld__fact-value { font-size: 16px; color: var(--ink); }
.ld__programs { display: grid; gap: 14px; }
.ld__programs .eyebrow { margin-bottom: 0; }
.ld__programs .eyebrow::after { display: none; }

@media (min-width: 560px) { .ld__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) {
  .ld__head-top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; }
}
@media (min-width: 1100px) { .ld__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Detail: prose blocks ---------- */
.ld__block { display: grid; gap: 16px; min-width: 0; }
.ld__block + .ld__block { padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--hairline); }
.ld__h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: 0; }
.ld__prose { display: grid; gap: 14px; color: var(--ink-2); max-width: 68ch; }
.ld__prose p { margin: 0; }
.ld__amenities {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 24px; list-style: none; margin: 0; padding: 0;
}
.ld__amenities li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: 16px; color: var(--ink-2);
}
.ld__amenities svg { width: 18px; height: 18px; margin-top: 4px; color: var(--gold); }
.ld__map {
  position: relative; z-index: 0;
  height: clamp(320px, 45vw, 520px); width: 100%;
  background: var(--mist); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden;
}
.ld__map-note { max-width: 70ch; }
/* MapLibre failed to load, or the visitor has no coordinates to show. */
.ld__map-note--error { color: var(--stone); }
.ld__map-note--error a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--gold); text-underline-offset: 3px;
}
.ld__map-note--error a:hover { color: var(--gold-deep); }
.ld__block--legal {
  padding: clamp(24px, 3vw, 32px);
  background: var(--mist); border-top: 0; border-radius: var(--radius);
}
.ld__block--legal .fine { max-width: 78ch; }

/* ---------- Detail: sidebar ---------- */
.ld__side { display: grid; gap: 20px; align-content: start; min-width: 0; }

/* The zero-height marker js/listing.js watches to know the enquiry card has
   come unstuck. It sits above the two-column grid, not inside the sticky
   aside where nothing could ever move it. */
.ld__sentinel { display: block; height: 1px; margin: 0; padding: 0; pointer-events: none; }
.ld__card {
  display: grid; gap: 16px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.ld__card .eyebrow { margin-bottom: 0; }
.ld__card-title { font-size: clamp(22px, 1.8vw, 26px); font-weight: 400; letter-spacing: 0; }
.ld__card-sub { font-size: 15px; color: var(--stone); }

/* .fld mirrors the /#contact .field pattern. css/admin.css owns the same
   pattern for the admin app; keep the two in step if you change one. */
.ld__form { display: grid; gap: 16px; }
.fld { display: block; min-width: 0; }
.fld--block { display: block; }
.fld__label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--stone);
}
.fld input, .fld textarea, .fld select {
  width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fld textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--stone); }
.fld input:hover, .fld textarea:hover { border-color: var(--ink-3); }
.fld input:focus, .fld textarea:focus, .fld select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-tint);
}
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--error); }

.ld__error { display: none; margin-top: 6px; font-size: 14px; color: var(--error); }
.ld__error:not(:empty) { display: block; }
.ld__optional {
  font-family: var(--font-body); font-weight: 400; font-size: 12px;
  letter-spacing: 0; text-transform: none; color: var(--stone);
}
/* Honeypot: present for bots, invisible and out of the tab order for people.
   Two classes outrank the `.fld input` rule above, so no !important is needed. */
.ld__form .ld__hp {
  position: absolute; left: -9999px; width: 1px; max-width: 1px; min-height: 0;
  height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none;
}
.ld__submit { justify-self: stretch; width: 100%; }
.ld__status { font-size: 15px; color: var(--stone); }
.ld__status:empty { display: none; }
.ld__success {
  display: grid; gap: 10px; padding: 24px;
  background: var(--gold-tint); border-radius: var(--radius);
}
.ld__success[hidden] { display: none; }
.ld__success h3 { font-weight: 400; font-size: 20px; letter-spacing: 0; }
.ld__success p { font-size: 15px; color: var(--ink-2); }
.ld__card-foot {
  display: grid; gap: 12px; justify-items: center;
  padding-top: 20px; border-top: 1px solid var(--hairline); text-align: center;
}
.ld__card-or {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--stone);
}
.ld__card-foot .btn { width: 100%; }

.ld__agent {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 20px; background: var(--mist); border-radius: var(--radius);
}
.ld__agent-photo { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); }
.ld__agent-name { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.3; }
.ld__agent-role {
  margin-top: 4px; font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
}
.ld__apply { width: 100%; }

@media (min-width: 1100px) {
  .ld__main { grid-template-columns: minmax(0, 1fr) 380px; }
  .ld__side { position: sticky; top: 88px; }
  /* Only here does the card actually stick, so the lift is gated on the same
     breakpoint rather than on a media query in JavaScript. */
  .ld__card.is-stuck { box-shadow: 0 18px 44px rgb(35 37 43 / .13); }
}

/* ---------- Detail: toast ---------- */
/* js/listing.js builds this for short confirmations ("Link copied"). Mirrors
   .atoast in css/admin.css so the two surfaces behave the same; the base state
   is hidden, so a missing is-visible can never leave a stray box on the page. */
.ld__toast {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  width: max-content; max-width: calc(100% - 32px); margin-inline: auto;
  padding: 12px 18px; margin-block: 0;
  background: var(--ink); color: var(--white);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .18);
  font-family: var(--font-display); font-size: 13px; letter-spacing: .02em;
  opacity: 0; transform: translateY(12px);
  visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s linear;
}
.ld__toast.is-visible { opacity: 1; transform: none; visibility: visible; }
/* The visitor asked for less motion; the message still appears and still goes. */
.ld__toast--no-motion { transition: visibility .01s linear; transform: none; }
@media (min-width: 720px) {
  .ld__toast { left: auto; right: 20px; bottom: 20px; margin: 0; max-width: min(420px, calc(100% - 40px)); }
}

/* ---------- Detail: similar listings ---------- */
.ld__similar { border-top: 1px solid var(--hairline); background: var(--mist); }
.ld__similar-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.ld__similar-head h2 { font-size: clamp(26px, 3vw, 38px); }
.ld__similar-grid {
  display: grid; gap: clamp(18px, 2vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (max-width: 560px) { .ld__similar-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Lightbox (built by js/listing.js) ---------- */
.lbox {
  position: fixed; inset: 0; z-index: 80;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-rows: 64px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head head head"
    "prev stage next"
    "meta meta meta"
    "foot foot foot";
  background: rgb(24 25 29 / .97); color: var(--on-dark);
  overscroll-behavior: contain;
}
.lbox[hidden] { display: none; }
/* js/listing.js adds this when the visitor prefers reduced motion, so the
   overlay appears and disappears without the fade. */
.lbox--no-motion { transition: none; }

.lbox__close {
  grid-area: head; justify-self: end; align-self: center;
  width: 48px; height: 48px; margin-right: 12px; padding: 0;
  background: none; border: 1px solid rgb(244 243 240 / .3); border-radius: var(--radius);
  color: var(--on-dark); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lbox__close:hover { background: rgb(244 243 240 / .12); border-color: var(--on-dark); }
.lbox__close::before, .lbox__close::after {
  content: ""; display: block; width: 20px; height: 1px; margin: 0 auto;
  background: currentColor;
}
.lbox__close::before { transform: translateY(1px) rotate(45deg); }
.lbox__close::after { transform: translateY(-1px) rotate(-45deg); }

.lbox__img-wrap { grid-area: stage; display: grid; place-items: center; min-height: 0; min-width: 0; padding: 8px; }
.lbox__img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius);
}

.lbox__prev, .lbox__next {
  align-self: center; justify-self: center;
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  background: rgb(35 37 43 / .7); color: var(--on-dark);
  border: 1px solid rgb(244 243 240 / .28); border-radius: 50%; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lbox__prev { grid-area: prev; }
.lbox__next { grid-area: next; }
.lbox__prev:hover, .lbox__next:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lbox__prev svg, .lbox__next svg { width: 22px; height: 22px; }
/* Text arrows are acceptable if the markup uses a literal character. */
.lbox__prev:not(:has(svg)), .lbox__next:not(:has(svg)) { font-size: 24px; line-height: 1; }

.lbox__caption {
  grid-area: foot;
  margin: 0; padding: 6px clamp(20px, 4vw, 48px) clamp(20px, 4vw, 36px);
  font-size: 15px; line-height: 1.5; color: var(--on-dark);
  text-align: center; max-width: 78ch; margin-inline: auto;
}
.lbox__caption:empty { display: none; }
.lbox__count {
  grid-area: meta; justify-self: center;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-2);
}
.lbox__count:empty { display: none; }

@media (max-width: 719px) {
  .lbox {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    grid-template-rows: 58px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "head head head"
      "stage stage stage"
      "meta meta meta"
      "foot foot foot";
  }
  .lbox__close { margin-right: 8px; }
  /* Arrows float over the image edges so the picture keeps the full width and a
     multi-line caption can never run underneath them at 360px. */
  .lbox__prev, .lbox__next {
    position: fixed; top: 50%; bottom: auto; z-index: 2;
    transform: translateY(-50%);
  }
  .lbox__prev { left: 10px; }
  .lbox__next { right: 10px; }
}

/* ---------- Map: MapLibre container, markers, controls ---------- */
.rlmap { background: transparent; border: 0; }

/* The marker root. Deliberately no `position` here: MapLibre positions marker
   elements itself, and overriding it would break the markers. The chip is the
   inner .rlmap__price span, which sizes itself from CSS. */
.rlmap__pin { display: grid; place-items: center; }

.rlmap__price {
  position: relative; /* anchors the tail below, whatever wraps the bubble */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; padding: 7px 11px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .04em; line-height: 1;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 2px 8px rgb(35 37 43 / .22);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.rlmap__price::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 8px; height: 8px; margin-left: -4px;
  background: inherit; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
}
.rlmap__pin:hover .rlmap__price { background: var(--ink); color: var(--white); }
.rlmap__pin.is-active .rlmap__price {
  background: var(--gold); border-color: var(--gold); color: var(--ink); transform: scale(1.06);
}

.maplibregl-map {
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--mist);
}
.maplibregl-map a { color: var(--gold-deep); }
.maplibregl-map .maplibregl-ctrl-attrib {
  font-family: var(--font-display); font-size: 10px; letter-spacing: .04em;
  background: rgb(255 255 255 / .86); color: var(--stone);
}
.maplibregl-map .maplibregl-ctrl-attrib a { color: var(--gold-deep); }
.maplibregl-map .maplibregl-ctrl-group button {
  font-family: var(--font-display);
  color: var(--ink); background-color: var(--white);
}
.maplibregl-map .maplibregl-ctrl-group button + button { border-top-color: var(--hairline); }
.maplibregl-map .maplibregl-ctrl-group button:hover { background-color: var(--mist); color: var(--ink); }
/* Keep MapLibre's own stacking under the sticky header and the off-canvas panel. */
.maplibregl-canvas-container { z-index: auto; }
.maplibregl-ctrl,
.maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right,
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { z-index: 4; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rl__panel, .rl__body::before, .rl__bar, .lcard, .mcard, .lcard__img, .mcard__img,
  .ld__hero-img, .ld__thumb, .iconbtn, .rl__panel-close, .viewbtn, .rl__sort select,
  .lbox__close, .lbox__prev, .lbox__next {
    transition: none;
  }
  .lcard:hover, .mcard:hover, .rlmap__pin.is-active .rlmap__price { transform: none; }
  .lcard__media:hover .lcard__img, .lcard:hover .lcard__img,
  .mcard:hover .mcard__img, .ld__hero:hover .ld__hero-img { transform: none; }
}
/* ---------- Home page: available rentals rail ----------
   Rendered into index.html by functions/index.js at the `rentals:featured`
   marker. Shares .lcard with the browse page, so a card looks the same in both
   places. The section is absent entirely when there are no published listings. */
.hrl { background: var(--mist); border-block: 1px solid var(--hairline); }
.hrl__head { display: grid; gap: 20px; align-items: end; }
.hrl__head .section-head { margin-bottom: 0; }
.hrl__all { justify-self: start; }
.hrl__grid { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: clamp(20px, 2.4vw, 28px); grid-template-columns: 1fr; }
.hrl__note { margin-top: clamp(24px, 3vw, 32px); }
.hrl__note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

@media (min-width: 700px) {
  .hrl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hrl__head { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
  .hrl__all { justify-self: end; }
  /* Two cards below the fold on a wide screen is a rail, not a grid; keep three. */
}
@media (max-width: 699px) {
  /* A single column of three tall cards pushes the rest of the page down, so on
     phones the rail scrolls sideways instead. */
  .hrl__grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 82vw);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    scrollbar-width: thin;
  }
  .hrl__grid > * { scroll-snap-align: start; }
}

/* ---------- Browse: pieces built by js/rentals.js ----------
   The panel backdrop, the "N shown" line above the chips, and the message shown
   when the map library cannot load. */
.rl__backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgb(35 37 43 / .45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
body.rl-panel-open .rl__backdrop { opacity: 1; pointer-events: auto; }
body.rl-panel-open { overflow: hidden; }

.rl__chips-count {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 12px;
}

.rl__map-error {
  display: grid; place-content: center; gap: 10px; text-align: center;
  min-height: clamp(320px, 45vw, 520px); padding: 32px;
  background: var(--mist); border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--stone);
}
.rl__map-error a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

@media (min-width: 1100px) {
  /* The sidebar replaces the off-canvas panel, so the backdrop is never used. */
  .rl__backdrop { display: none; }
  body.rl-panel-open { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .rl__backdrop { transition: none; }
}

/* ---------- Nearest transit stamps ----------
   The route bullets a renter scans first. A subway line is a circle and a bus
   route is a pill, because that is how the MTA draws them and how they read at
   a glance; the rest of the site keeps its square corners. `--stamp` carries
   the line colour and is only ever a hex value (see transitStamp in
   functions/_lib/views.js), so a stored value can never inject CSS. */

.lcard__transit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stamps { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.stamps__near {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .06em; color: var(--stone); white-space: nowrap;
}

.stamp {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--stamp, var(--ink)); color: var(--white);
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  line-height: 1; letter-spacing: .01em;
}
.stamp--bus { padding: 0 8px; font-size: 11px; letter-spacing: .03em; }

/* The row beside the facts at the top of a listing. */
.ld__transit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ld__transit-near { font-family: var(--font-display); font-weight: 500; font-size: 12px; color: var(--stone); }

/* "Getting around": every line with its own measured distance. */
.transit {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden;
}
.transit__row {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 4px 12px; padding: 12px 14px; background: var(--white);
}
.transit__stop { color: var(--ink-2); font-size: 15px; }
.transit__miles {
  grid-column: 2; color: var(--stone);
  font-family: var(--font-display); font-size: 12px; white-space: nowrap;
}

@media (min-width: 560px) {
  .transit__row { grid-template-columns: auto 1fr auto; }
  .transit__miles { grid-column: auto; }
}

/* ---------- Staff preview bar ----------
   Sits at the very top of /admin/listing/<id>/preview, which is the public
   detail page rendered for a signed-in broker. It reads as staff tooling on
   purpose: dark, full-bleed, with the ways out (back to the editor, publish)
   where the eye lands first. The page underneath it is the real one. */
.ld__preview {
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 3px solid var(--gold);
  padding-block: 14px 16px;
}
.ld__preview-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.ld__preview-pill {
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 5px 10px; border-radius: 999px;
}
.ld__preview-text {
  flex: 1 1 240px; margin: 0; max-width: 62ch;
  color: var(--on-dark); font-size: 15px; line-height: 1.5;
}
.ld__preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* An empty note must not hold a line open. */
.ld__preview-note:empty { display: none; }
.ld__preview-note {
  flex: 1 1 100%; margin: 0;
  color: var(--on-dark-2); font-size: 13px;
}

@media (min-width: 720px) {
  .ld__preview-inner { flex-wrap: nowrap; }
  .ld__preview-note { flex-basis: auto; margin-left: auto; text-align: right; }
}