/* web/add.css: the Add dialogs and the phone's Add sheet (module S3).
   Every class here begins with "add-" (design document 7.2). Everything else the dialogs use is a shared
   class of web/style.css: .dialog, .sheet, .field, .input, .textarea, .chips, .chip, .seg, .chip-owner,
   .dropzone, .btn-dashed, .hint, .check-row, .picker-row, .picker-new, .dashed-circle, .chip-link,
   .dialog-sentence (design-system.md 3.1 to 3.15). Sources: boards/Dashboard-Add-To-Contact.dc.html. */

/* Note: the textarea is 120px high (line 27). */
.add-note-text { height: 120px; }

/* Email: the text is 96px high (line 115); Received and Sent share the track equally (line 103). */
.add-email-text { height: 96px; }
.add-direction { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Photo: Card, Screenshot and People share the track equally (design-system.md 3.13, decision 33).
   "Everyone pictured agreed" is hidden unless People is pressed. */
.add-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.add-photo-agreed[hidden] { display: none; }

/* Photo and Document: the hint sits 14px under the choose button, the dialog's gap (lines 60-61, 90-91);
   the hidden file input between them is out of the flow, and the hint's paragraph margins are cleared. */
.add-file { gap: 14px; }
.add-file .hint { margin: 0; }

/* Document: the box for the chosen file is drawn only when a file is chosen. */
.add-document-chosen:empty { display: none; }

/* Person: the chosen contact beside "Choose contact" (line 124); the Relation chips in two columns (line 128);
   the sentence only once a contact is chosen. */
.add-person-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.add-person-pick .btn-secondary { flex: 1 1 auto; white-space: nowrap; }
.add-person-slot:empty { display: none; }
.add-relation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.add-person-sentence:empty { display: none; }

/* Event: a list with a rule above each row and no inner padding at the sides (lines 159 to 176).
   The chosen row has no tint: only its radio shows the choice (line 160). A long list scrolls inside the dialog. */
.add-event-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.add-event-list .picker-row { height: auto; min-height: 60px; gap: 10px; padding: 10px 0; }
.add-event-list .picker-row.is-chosen { background: transparent; }
.add-event-list .picker-new { height: auto; min-height: 60px; gap: 10px; padding: 10px 0; }
.add-event-list .dashed-circle { width: 20px; height: 20px; }