/* brief: a long brief an agent wrote, in a collapsed file card, with its parts labelled (components/brief.js).
     <details class="file file-collapsed brief"><summary class="file-head">…</summary>
       <div class="file-body"><div class="brief-scroll">
         <div class="brief-part" data-part="read"><span class="brief-label">what to read first</span><pre>…</pre></div>
         …</div></div></details>
   A part with no data-part (the title) gets no label or colour. The colour comes from data-part:
   job, target (orange), read (blue), owns (purple), specifics (teal), steps, git (green), verify (red), report (grey).
   A label sits beside its part, over it on a phone. Presenting, the card opens (brief.js). */
.brief {
  --bp-orange: #b8661a; --bp-blue: #2f6fc4; --bp-purple: #7a4fc9; --bp-teal: #17827f;
  --bp-green: #2c8a55; --bp-red: #c23d33; --bp-grey: #6f6f6f;
}
@media (prefers-color-scheme: dark) {
  .brief { --bp-orange: #f0a35a; --bp-blue: #7fb0f2; --bp-purple: #b596f0; --bp-teal: #5cc9c4;
    --bp-green: #6fcf97; --bp-red: #f08a80; --bp-grey: #a8a8a8; }
}
.brief [data-part="job"], .brief [data-part="target"] { --c: var(--bp-orange); }
.brief [data-part="read"] { --c: var(--bp-blue); }
.brief [data-part="owns"] { --c: var(--bp-purple); }
.brief [data-part="specifics"] { --c: var(--bp-teal); }
.brief [data-part="steps"], .brief [data-part="git"] { --c: var(--bp-green); }
.brief [data-part="verify"] { --c: var(--bp-red); }
.brief [data-part="report"] { --c: var(--bp-grey); }

.brief .file-body { padding: 12px 16px 16px 12px; }
@media (min-width: 1024px) { .brief .file-body { padding-inline-start: 12px; } }
.brief-scroll { position: relative; max-height: 520px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.brief-part { display: grid; grid-template-columns: 84px 1fr; column-gap: 10px; }
.brief-part + .brief-part { margin-top: 2px; }
.brief-label { padding-top: 6px; text-align: right; font: 500 13px/1.2 'Shantell Sans', cursive; color: var(--c, var(--gray-1000)); text-wrap: balance; }
.brief .file-body .brief-part pre { margin: 0; padding: 6px 10px 6px 12px; font: 12.5px/20px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--gray-1200); background: color-mix(in oklab, var(--c, transparent) 9%, transparent);
  border: 0; border-left: 3px solid var(--c, transparent); border-radius: 0 6px 6px 0; }
.brief .file-body .brief-part:not([data-part]) pre { background: none; }
@media (max-width: 640px) {
  .brief-part { grid-template-columns: 1fr; }
  .brief-label { padding: 10px 0 4px; text-align: left; }
  .brief-label:empty { display: none; }
}

/* presenting: the brief is the whole panel, so it scrolls in the room there is */
.is-presenting .brief-scroll { max-height: calc(100vh - 250px); }