/* The collapsible sections on the deal modal.
 *
 * Its own sheet rather than lines in dealdetails.css, which is about the
 * three detail sheets specifically. Four different files draw a `.deal-fold`
 * now - components.js for the sharing block, listing-checks.js,
 * page-workbench.js and mls-listing.js - so it is a shared idiom and belongs
 * somewhere none of them owns.
 *
 * A <details> rather than a div and a class, which is what dd-group in
 * dealdetails.css does. The element gets keyboard support, the right ARIA and
 * the browser's own find-in-page behaviour for free, and it can be opened
 * from script by setting `.open` - which the title-company warning relies on
 * to jump to a field inside a shut section.
 */

.deal-fold {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.deal-fold + .deal-fold { margin-top: 8px; }

.deal-fold > summary {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding: 11px 13px;
  cursor: pointer;
  font-size: 13.5px;
  /* The whole row is the toggle, so the hit area is the row rather than the
     little triangle. Same reasoning as .dd-head. */
  user-select: none;
}

.deal-fold > summary:hover { background: #f8fafc; }
.deal-fold[open] > summary { border-bottom: 1px solid var(--border); }
.deal-fold[open] { border-color: #bfdbfe; }

/* The summary's own marker is kept: it is the only thing on the row that says
   the section opens, and a chevron drawn by hand would have to be kept in
   step with the open state that the browser already tracks. */
.deal-fold > summary > .muted { margin-left: auto; text-align: right; }

.deal-fold-body { padding: 12px 13px; }

/* A section inside the fold should not draw its own top rule as well: the
   fold already separates it from what is above. */
.deal-fold-body > .df-sec:first-child,
.deal-fold-body > .dt-sec:first-child { border-top: none; padding-top: 0; }

/* The title-company warning. Amber rather than red: the deal is often moved
   to Under Contract minutes after the call, before anybody knows which title
   company the buyer picked, so this is a reminder and never a refusal. */
.dt-titlewarn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The button leads rather than being pushed to the right edge by a spacer.
   The My To Do dock is fixed in the bottom right corner above everything and
   has already swallowed two action-row buttons in this app. */
.dt-titlewarn .btn { flex: none; }

@media (max-width: 860px) {
  /* 860px is where phone.css turns the app over, not a number chosen here. */
  .deal-fold > summary { flex-direction: column; align-items: flex-start; gap: 3px; }
  .deal-fold > summary > .muted { margin-left: 0; text-align: left; }
  .dt-titlewarn .btn { width: 100%; }
}