/* ============================================================
   George Brothers — css/demos/brief.css
   TRY IT panel for /work/brief. A six-message stand-in inbox on
   one side and the three cards Brief would return on the other,
   with the fact/guess split visible on every card because that
   split is the product. Motion is a plain transition — the
   sitewide reduced-motion clamp in css/site.css already forces it
   to land on its final frame, so no extra media query is needed.
   ============================================================ */

.bfd{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;align-items:start}

.bfd-label{font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:rgba(243,234,217,.55);margin-bottom:10px}

/* ---- inbox ---- */
.bfd-inbox{display:flex;flex-direction:column}
.bfd-msg{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid rgba(243,234,217,.1);
  border-radius:9px;background:rgba(243,234,217,.02);margin-bottom:7px}
.bfd-msg-from{font:500 11.5px 'Space Grotesk',sans-serif;color:rgba(243,234,217,.82)}
.bfd-msg-subj{font:400 12.5px 'Space Grotesk',sans-serif;color:rgba(243,234,217,.5)}

/* ---- controls ---- */
.bfd-controls{grid-column:1 / -1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:2px;border-top:1px solid rgba(243,234,217,.1);margin-top:2px}
.bfd-modes{display:inline-flex;border:1px solid rgba(243,234,217,.22);border-radius:999px;overflow:hidden;margin-top:12px}
.bfd-mode{padding:8px 16px;font:400 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;
  color:rgba(243,234,217,.62);cursor:pointer;transition:background .25s,color .25s}
.bfd-mode:hover{color:#f3ead9}
.bfd-mode[aria-pressed="true"]{background:#f3ead9;color:#171009}
.bfd-mode:focus-visible{outline:2px solid #efa85c;outline-offset:-2px}
.bfd-note{margin-top:12px;font:400 12px 'Space Grotesk',sans-serif;color:rgba(243,234,217,.58)}

/* ---- output ---- */
.bfd-out{min-width:0}
.bfd-cards{display:flex;flex-direction:column}

.bfd-card{border:1px solid rgba(243,234,217,.14);border-left:3px solid #b48fd9;border-radius:10px;
  padding:12px 15px;background:rgba(243,234,217,.03);margin-bottom:9px}
.bfd-card.is-attn{border-left-color:#efa85c}
.bfd-card-h{font:500 13.5px 'Space Grotesk',sans-serif;color:#f3ead9}

.bfd-fact,.bfd-inf{margin:6px 0 0;font:400 12.5px/1.6 'Space Grotesk',sans-serif;color:rgba(243,234,217,.7)}
.bfd-inf{color:rgba(243,234,217,.55)}

.bfd-tag{display:inline-block;font:500 8.5px 'IBM Plex Mono',monospace;letter-spacing:.12em;
  color:#171009;background:#efa85c;border-radius:3px;padding:2px 5px;vertical-align:1px}
.bfd-tag-inf{background:#b48fd9}

.bfd-meta{margin-top:8px;font:400 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:rgba(243,234,217,.42)}

.bfd-drop{margin:8px 0 0;font:400 11.5px/1.6 'Space Grotesk',sans-serif;color:rgba(243,234,217,.42)}
.bfd-allclear{margin:0;font:400 13.5px 'Space Grotesk',sans-serif;color:rgba(243,234,217,.6)}

@media (max-width:640px){
  .bfd{grid-template-columns:1fr}
}