/* Close & Distribute — the third tab of the Upload Tool (#558).
   Deliberately reuses the page's tokens (--surface/--line/--muted/--accent) so
   the pane reads as part of the same tool rather than a bolted-on screen. */
/* #649: this pane NEVER SCROLLED. `.app-content` is `overflow: hidden` (see
   upload.css), so a pane that is not itself a scroll container has everything
   past the fold simply clipped — with 49 undistributed submittals on a real
   project, row 6 onward could not be reached at all. The Upload and Samples
   panes are both `flex: 1; overflow: auto`; this one was missing it, so it now
   scrolls the same way, with the centring moved onto the inner wrapper so the
   scrollbar sits at the edge of the viewport rather than 980px in. */
.sd-page { flex: 1; overflow: auto; padding: 18px 18px 72px; background: var(--bg); }
.sd-wrap { max-width: 980px; margin: 0 auto; }
.sd-lede { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.sd-empty { color: var(--muted); font-size: 14px; padding: 40px 0; text-align: center; }
.sd-muted { color: var(--muted); }

.sd-row { border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  margin-bottom: 10px; padding: 12px 14px; }
.sd-row.sd-open { border-color: var(--accent); }
.sd-head { display: flex; }
.sd-toggle { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; color: inherit; padding: 0; font: inherit; }
.sd-num { font-weight: 700; color: var(--heading); }
.sd-title { flex: 1 1 auto; }
.sd-status { font-size: 12px; color: var(--muted); }

.sd-approvers { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.sd-approvers li { padding: 2px 0; }

/* The three outcomes are three colours AND three words — colour alone would be
   the whole distinction for nobody who cannot see it. */
.sd-note { font-size: 13px; line-height: 1.45; border-radius: 8px; padding: 8px 10px;
  margin-top: 8px; border: 1px solid var(--line); }
.sd-ok   { border-color: #2e7d32; color: #2e7d32; }
.sd-warn { border-color: #b26a00; color: #b26a00; }
.sd-err  { border-color: #c62828; color: #c62828; }

.sd-composer { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .sd-grid { grid-template-columns: 1fr; } }
.sd-grid h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 6px; }
.sd-picks { max-height: 220px; overflow: auto; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; font-size: 13px; }
.sd-pick { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; cursor: pointer; }

.sd-fields { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.sd-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--muted); flex: 1 1 220px; }
.sd-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.sd-link { font-size: 13px; color: var(--accent); }

/* The Submittal Manager slicer (#649). Sticky so it stays reachable now that the
   pane scrolls — a filter you have to scroll back up to reach is a filter that
   gets used once. */
.sd-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-end; padding: 10px 0 12px; margin-bottom: 4px;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.sd-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--muted); flex: 1 1 260px; max-width: 360px; }

/* The project a row belongs to — only painted when the scope holds more than
   one, because on a single project it would be the same word on every row. */
.sd-proj { font-size: 12px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* Distribution-group picks, at the top of the recipient list (#649). */
.sd-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sd-rc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sd-chip { font-size: 12px; font-family: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; }
.sd-chip:hover:not([disabled]) { border-color: var(--accent); }
/* Pressed is a BORDER AND A FILL, not colour alone — and the control is a real
   aria-pressed toggle, so a screen reader says which groups are on. */
.sd-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.sd-chip[disabled] { opacity: .55; cursor: not-allowed; }

/* The recipient finder (#715): a search box over the distribution list and one
   checkbox that ticks exactly what it returned.

   Styled from the app-wide tokens rather than with `.v-input`, on purpose.
   `.v-input`/`.v-select` live in upload.css, which HOME DOES NOT LOAD — Home's
   close & distribute box pulls in this sheet and home-distribute.css only, so a
   control that leaned on upload.css would arrive unstyled on the very surface
   the ask came from. Everything here uses tokens from styles.css, which both
   pages have. */
.sd-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 6px; }
.sd-search { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 13px;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; }
.sd-search::placeholder { color: var(--muted); }
.sd-search:focus { outline: none; border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); }
/* The one checkbox the ask is about. A pill, so it reads as a control over the
   list rather than as the first row of it — and with a hit area that survives a
   thumb on a phone, where the two composer columns stack into one. */
.sd-all { flex: none; display: flex; gap: 8px; align-items: center; cursor: pointer;
  min-height: 36px; padding: 4px 12px; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
  white-space: nowrap; }
.sd-all input { margin: 0; }
.sd-all:has(input:checked), .sd-all:has(input:indeterminate) {
  border-color: var(--accent); color: var(--ink); }
.sd-all:has(input:disabled) { opacity: .55; cursor: not-allowed; }
/* How much of the directory is on screen, and how much of the SELECTION is not.
   Never hidden: it is what keeps a narrowed list from reading as the whole one. */
.sd-findnote { font-size: 12px; line-height: 1.45; color: var(--muted);
  margin-bottom: 6px; }

/* The recipient list grouped by company (#682 item 5): one collapsed
   disclosure per firm. The summary is a row of its own with a 36px touch
   target for the firm's checkbox, and the name wraps rather than pushing the
   count off a 390px screen. The native marker is replaced because a flex
   <summary> drops it in Chrome. */
.sd-co { border-bottom: 1px solid var(--line); }
.sd-co:last-child { border-bottom: 0; }
.sd-co > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  min-height: 36px; padding: 2px 0; cursor: pointer; list-style: none; }
.sd-co > summary::-webkit-details-marker { display: none; }
.sd-co > summary::after { content: "\25B8"; order: -1; flex: none; width: 10px;
  color: var(--muted); }
.sd-co[open] > summary::after { content: "\25BE"; }
.sd-co-tick { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: -2px 0; cursor: pointer; }
.sd-co-tick input { margin: 0; width: 16px; height: 16px; }
.sd-co-name { flex: 1 1 120px; min-width: 0; font-weight: 600; color: var(--ink);
  overflow-wrap: anywhere; }
.sd-co-count { flex: 0 1 auto; font-size: 12px; color: var(--muted); }
.sd-co-rows { padding: 0 0 4px 46px; }
@media (max-width: 480px) { .sd-co-rows { padding-left: 20px; } }

/* ------------------------------------------------------------------
   The For-Record pre-push dialog (#714). It hosts the SAME picker the
   composer draws (.sd-groups / .sd-picks above), so there is nothing here
   about how a recipient is drawn — only the box around it. Loaded by
   pages/upload.html, which is the only page that pushes For Record Only.
   ------------------------------------------------------------------ */
.frd-box { width: 620px; }
.frd-lede { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.frd-rows { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--ink); }
.frd-rows li { margin: 2px 0; }
.frd-h { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
/* The buttons sit OUTSIDE the scrolling body, so a long directory can never
   push the thing you have to press off the bottom of the dialog. */
.frd-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); }
.frd-count { margin-right: auto; font-size: 12px; color: var(--muted); }
@media (max-width: 480px) {
  .frd-foot .v-btn { flex: 1 1 auto; }
  .frd-count { flex: 1 0 100%; margin: 0 0 4px; }
}