/* Collab 1D: Start and the ask composer. Markup and class names are the kit's (collab_common.py: big_card, person_strip, ask_form, chips_row,
   rights_card, note, how_strip), scoped under .collab-start so they cannot touch another page. Colours and spacing are the v3 tokens.
   Targets are 44px or more; the composer stays under about 1,300px tall at 390px wide. */
.collab-start .pad { padding: 0 var(--dc-gutter); }
.collab-start .cs-gap-l { margin-top: 24px; }
.collab-start .cs-gap-s { margin-top: 16px; }
.collab-start .cs-grow { flex: 1; min-width: 0; }
.collab-start .cs-steps { list-style: none; padding: 0; margin: 8px 0 0; }
.collab-start .big { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 16px; margin-top: 12px; background: var(--dc-card); border: 1px solid var(--dc-edge); border-radius: 4px; color: inherit; text-decoration: none; }
.collab-start .big b { font: 700 17px/24px var(--dc-sans); display: block; }
.collab-start .big span { font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); display: block; }
.collab-start .big .go { margin-left: auto; flex: none; }
.collab-start .big:focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
.collab-start .cs-person { min-height: 72px; }
.collab-start .av { width: 44px; height: 44px; border-radius: 50%; background: var(--dc-ink); color: var(--dc-canvas); font: 700 16px var(--dc-sans); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.collab-start .av--lg { width: 48px; height: 48px; }
.collab-start .howc { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.collab-start .howc .n { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--dc-ink); display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--dc-sans); flex: none; }
.collab-start .howc b { font: 700 16px/22px var(--dc-sans); display: block; }
.collab-start .howc span:not(.n) { font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); display: block; }

/* composer */
.collab-ask { padding-bottom: 8px; } /* the layout reserves the space under the sticky Send (dc-has-bar) */
.collab-ask .cs-top { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 var(--dc-gutter) 0 4px; }
.collab-ask .cs-top__t { font: 700 16px/24px var(--dc-sans); }
.collab-ask .pstrip { margin: 4px var(--dc-gutter) 0; padding: 12px 16px; background: var(--dc-card); border: 1px solid var(--dc-rule); border-radius: 4px; display: flex; gap: 12px; align-items: center; }
.collab-ask .pstrip .nm { font: 400 18px/24px var(--dc-serif); overflow-wrap: anywhere; }
.collab-ask .pstrip .meta { font: 500 14px/18px var(--dc-sans); color: var(--dc-ink-2); margin-top: 2px; }
.collab-ask .dc-field { margin-top: 12px; }
.collab-ask .dc-field small { margin-top: 4px; }
.collab-ask .dc-alert { margin-top: 16px; }
.collab-ask .cs-group { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.collab-ask .cs-group legend { padding: 0; font: 600 16px/24px var(--dc-sans); margin-bottom: 8px; }
.collab-ask .cs-group small, .collab-ask .cs-help { display: block; margin-top: 8px; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }
.collab-ask .cs-err { color: var(--dc-ink); display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.collab-ask .cwrap { display: flex; flex-wrap: wrap; gap: 8px; }
.collab-ask .cs-chip { display: inline-flex; margin: 0; }
.collab-ask .cs-chip .chip, .collab-ask .cs-qchips .chip { cursor: pointer; padding: 0 14px; }
.collab-ask .cs-chip .dc-i { display: none; }
.collab-ask .cs-chip input:checked + .chip { background: var(--dc-card); border-color: var(--dc-ink); box-shadow: inset 0 0 0 1px var(--dc-ink); }
.collab-ask .cs-chip input:checked + .chip .dc-i { display: inline-block; }
.collab-ask .cs-chip input:focus-visible + .chip { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
.collab-ask .cs-qchips { margin-top: 8px; }
.collab-ask .cs-more { margin-top: 12px; border-top: 1px solid var(--dc-rule); }
.collab-ask .cs-more > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font: 600 16px/24px var(--dc-sans); list-style: none; }
.collab-ask .cs-more > summary::-webkit-details-marker { display: none; }
.collab-ask .cs-more > summary::before { content: "+"; width: 24px; font: 700 20px/24px var(--dc-sans); }
.collab-ask .cs-more[open] > summary::before { content: "\2212"; }
.collab-ask .cs-more .dc-field { margin-top: 0; }
.collab-ask .cs-more[open] { padding-bottom: 4px; }
.collab-ask .cs-more textarea { min-height: 88px; }
.collab-ask .dc-opt { min-height: 52px; margin-top: 8px; }
.collab-ask .cs-biz[hidden], .collab-ask [data-cs-show][hidden] { display: none; }
.collab-ask .cs-photo__pick { position: relative; }
.collab-ask .cs-photo__pick:focus-within { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
.collab-ask .fileline { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--dc-edge); border-radius: 4px; background: var(--dc-field); font: 500 15px/21px var(--dc-sans); }
.collab-ask .fileline[hidden] { display: none; }
.collab-ask .fileline small { display: block; margin: 0; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }
.collab-ask .fileline .dc-link { min-height: 44px; min-width: 44px; background: none; border: 0; cursor: pointer; }
.collab-ask .rcard { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--dc-edge); border-radius: 4px; background: var(--dc-card); margin-top: 16px; }
.collab-ask .rcard > summary { display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 44px; cursor: pointer; list-style: none; }
.collab-ask .rcard > summary::-webkit-details-marker { display: none; }
.collab-ask details.rcard { display: block; }
.collab-ask .rcard b { font: 700 15px/22px var(--dc-sans); display: block; }
.collab-ask .rcard p { font: 500 15px/22px var(--dc-sans); margin: 4px 0 0; }
.collab-ask .rcard svg { flex: none; margin-top: 2px; }
.collab-ask .rcard .dc-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.collab-ask .cs-rights__opts { margin-top: 8px; }
.collab-ask .cnote { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--dc-rule); border-radius: 4px; background: var(--dc-card); font: 500 15px/22px var(--dc-sans); }
.collab-ask .cnote b { display: block; font-weight: 700; }
.collab-ask .cnote svg { flex: none; margin-top: 1px; }
.collab-ask .dc-tog-row { margin-top: 0; }
@media (min-width: 900px) { .collab-start { max-width: 640px; margin: 0 auto; } }
.collab-start .cs-back { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }   /* tap target (walk C1) */
/* walk C1 D8: an example in a box must not look like what the person typed */
.collab-start ::placeholder { color: var(--dc-ink-3, #8b8b8b); font-style: italic; opacity: 1; }