/* The Brief tab (flow 2 build spec 3.11; information-flow 4.3, 4.4). It
   wears the board's look: the page loads app.css, flow/flow.css,
   flow/board/board.css and flow/document.css (the versions' document
   styles, shared with /a/) before this file, and its root carries the board's
   class, so the head, tabs, banners, small buttons, toast and modal dialogs
   are the board's own. This file adds only the brief's column, its panels
   and its plain-text boxes, with app.css's tokens. Nothing is fixed or
   sticky here, so no overlay covers a control (memory: a fixed overlay
   covers a control somewhere). */

.briefs { max-width: 46rem; margin: 0 auto; width: 100%; overflow-wrap: anywhere; }
/* The house target for a finger keeps 8 px between controls (walk_chrome
   PHONE_AUDIT), so the brief's rows and the tabs space at 8 px. */
.briefs .board-tabs, .briefs .form-row { gap: 8px; }

.brief-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--edge);
               border-radius: 8px; background: var(--page); }
.brief-panel > p, .brief-triage p { margin: 0; }
.brief-title { margin: 0; font-family: var(--font-title); font-size: 1.125rem; }
.brief-section { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--edge); padding-top: 8px; }
.brief-statements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.brief-statement { display: flex; flex-direction: column; gap: 8px; }
.brief-statement-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.brief-statement-foot .btn-small { margin-left: auto; }
.brief-section > .btn-small { align-self: flex-start; }
.briefs .field-input.brief-text { min-height: 4.5rem; resize: vertical; line-height: 1.5; font-size: 1rem;
                                  border-radius: 6px; }
.brief-actions { padding-top: 4px; }
.brief-triage { display: flex; flex-direction: column; gap: 8px; }
.brief-history .list-link { min-width: 44px; }

/* The dialogs are the board's .ask dialogs; their fields stack. */
.brief-dialog h2 { margin: 0; font-size: 1.125rem; }
.brief-dialog p { margin: 0; }
.brief-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.brief-fieldset legend { font-weight: 700; margin-bottom: 4px; }
.brief-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.brief-choice input { width: 20px; height: 20px; margin: 0; }
.brief-field { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.brief-dialog[open] { gap: 12px; }
.brief-field .field-input { font-weight: 400; font-size: 1rem; min-height: 44px; border-radius: 6px; }
.brief-dialog .doc { max-height: 40vh; overflow: auto; }
/* Walk round 6, N4: the changed dialog shows two versions, so each takes less. */
.brief-dialog [data-changed-mine] .doc, .brief-dialog [data-changed-theirs] .doc { max-height: 28vh; }
.brief-dialog [data-changed-mine] h2, .brief-dialog [data-changed-theirs] h2 { font-size: 1rem; margin: 0 0 4px; }

@media (max-width: 699px) {
  /* A finger's target on a phone, as the board's (PR F final review Minor 6). */
  .briefs .btn-small { min-height: 44px; min-width: 44px; }
  .brief-panel { padding: 12px 8px; }
}