/* Home: What's broken right now (v3/broken.js), the outcome guardrails in breach, above everything else. */
.brk { border: 1px solid var(--line2); border-left: 5px solid var(--line2); border-radius: var(--r); background: var(--panel); padding: 12px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.brk-broken { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
.brk-clear { border-left-color: var(--good); }
.brk-unreported { border-left-color: var(--warn); border-style: dashed; border-left-style: solid; }
.brk-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.brk-h > b { font: 600 17px/1.2 'Instrument Sans', sans-serif; }
.brk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mute); align-self: center; }
.brk-broken .brk-dot { background: var(--bad); } .brk-clear .brk-dot { background: var(--good); } .brk-unreported .brk-dot { background: var(--warn); }
.brk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.brk-i { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.brk-t { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.brk-t b { font-size: 14px; }
.brk-g { font: 700 11px/1 'Instrument Sans', sans-serif; padding: 3px 6px; border-radius: 4px; background: var(--badbg); color: var(--bad); }
.brk-owner { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink2); }
.brk-fl { font-weight: 700; color: var(--good); } .brk-fl.none { color: var(--warn); }
@media (max-width: 720px) { .brk-list { grid-template-columns: minmax(0, 1fr); } .brk-owner { margin-left: 0; flex-basis: 100%; } }