/* ---- briefs: a closed row that opens ------------------------------------- */
.bf-wrap{margin:0 0 22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden}
.bf+.bf{border-top:1px solid var(--line)}

.bf-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 18px;background:transparent;border:0;color:inherit;cursor:pointer;
  transition:background .14s}
.bf-row:hover{background:var(--surface-2)}
.bf-row:focus-visible{outline:2px solid var(--h4);outline-offset:-2px}
.bf-lbl{flex:none;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
/* The teaser is the row's reason to exist: enough to decide without opening.
   It truncates rather than wraps — a row that grows to two lines stops being
   a row. */
.bf-teaser{flex:1;min-width:0;font:400 13.5px var(--sans);color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-when{flex:none;font:400 11.5px var(--mono);color:var(--faint)}
.bf-chev{flex:none;font-size:10px;color:var(--faint);transition:transform .18s ease}
.bf.open .bf-chev{transform:rotate(180deg)}
.bf.open .bf-lbl{color:var(--text)}
.bf.open .bf-teaser{visibility:hidden}

.bf-body:empty{display:none}
.bf-body{padding:2px 18px 18px;font:400 15px/1.68 var(--sans);color:var(--muted)}
.bf-body p{margin:0 0 11px}
.bf-body p:last-child{margin-bottom:0}
.bf-body strong,.bf-body b{color:var(--text);font-weight:600}
.bf-body ul{margin:0 0 11px;padding-left:18px}
.bf-body li{margin-bottom:4px}

.bf-more{display:block;width:100%;padding:12px 18px;border-top:1px solid var(--line);
  background:transparent;color:var(--faint);font:400 13px var(--sans);cursor:pointer;
  text-align:left;transition:color .14s,background .14s}
.bf-more:hover{color:var(--text);background:var(--surface-2)}
.bf-none{padding:12px 18px;border-top:1px solid var(--line);font:400 12.5px var(--sans);color:var(--faint)}
.bf-writing{display:flex;align-items:center;gap:11px;padding:15px 18px;
  font:400 13.5px var(--sans);color:var(--faint)}
