
body { min-height: 100vh; }
.br-wrap { max-width: 62rem; margin: 0 auto; padding: 0 var(--gutter); }
main.br-wrap { padding-top: 1rem; padding-bottom: 3rem; display: grid; gap: 1rem; }
.br-beam {
  color: var(--beam-ink);
  background: repeating-linear-gradient(178.5deg, var(--oak-grain) 0 1px, transparent 1px 6px, var(--oak-grain) 6px 7px, transparent 7px 15px),
    linear-gradient(180deg, var(--oak-2), var(--oak));
  border-bottom: 3px solid color-mix(in oklab, var(--accent) 55%, var(--oak));
}
.br-beam .br-wrap { display: flex; align-items: center; gap: 0.75rem; min-height: 3.2rem; flex-wrap: wrap; }
.br-brand { color: var(--beam-ink); font: 600 1.15rem/1.2 var(--font-display); margin-right: auto; }
.br-brand span { font: 400 0.95rem var(--font-label); color: var(--beam-muted); }
.br-brand:hover { color: var(--beam-ink); }
.br-who { color: var(--beam-muted); font-size: var(--fs-sm); display: flex; gap: 0.75rem; align-items: center; }
.br-who a { color: var(--beam-ink); text-decoration: underline; text-decoration-color: var(--beam-line); }
.br-theme { background: none; border: 1px solid var(--beam-line); color: var(--beam-ink); border-radius: 999px; width: 2rem; height: 2rem; cursor: pointer; }
h2 { font-size: var(--fs-lg); margin-bottom: 0.6rem; }
h3 { font-size: var(--fs-md); margin: 0.9rem 0 0.35rem; }
h4 { font: 600 var(--fs-sm)/1.3 var(--font-label); letter-spacing: 0.03em; margin: 0 0 0.35rem; color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.br-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); min-width: 0; }
.br-card > p + p, .br-card > p + ul, .br-card > ul + p { margin-top: 0.5rem; }
.br-banner { border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--panel-2); border: 1px solid var(--line-2); }
.br-banner h1 { font-size: var(--fs-xl); margin-bottom: 0.3rem; }
.br-banner-due { background: var(--accent-soft); border-color: var(--accent-line); }
.br-banner-due h1 { color: var(--accent-strong); }
.br-two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.br-list { list-style: none; margin: 0; padding: 0; }
.br-list > li { padding: 0.6rem 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; align-items: baseline; }
.br-list > li:first-child { border-top: 0; padding-top: 0; }
.br-held, .br-decision, .br-run { flex-direction: column; align-items: stretch !important; }
.br-held-title { font: 600 var(--fs-lg)/1.25 var(--font-display); }
.br-reasons { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.br-chip { display: inline-block; font-size: var(--fs-xs); padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--ink-2); }
.br-chip-warn { color: var(--bad); border-color: currentColor; }
.br-note { font-size: var(--fs-sm); color: var(--brass); }
.br-warn { color: var(--bad); }
.br-dec { font-weight: 600; }
.br-dec-done { color: var(--good); }
.br-dec-refused, .br-dec-gone { color: var(--bad); }
.br-person { justify-content: space-between; }
.br-inline { display: inline-flex; gap: 0.4rem; margin: 0; }
.br-form { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.br-form label { display: grid; gap: 0.3rem; font-size: var(--fs-sm); color: var(--muted); }
.br-form input, .br-form textarea { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; width: 100%; }
.br-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.br-btn { font: 600 var(--fs-md) var(--font-body); padding: 0.55rem 1.1rem; min-height: 2.75rem; border-radius: var(--radius-sm); border: 1px solid var(--accent-strong); background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.br-btn:hover { background: var(--accent-strong); }
.br-after { margin-top: 0.75rem; }
.br-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.br-btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.br-btn-quiet:hover { background: var(--ghost-2); }
.br-btn-warn { background: transparent; color: var(--bad); border-color: var(--bad); }
.br-btn-warn:hover { background: var(--ghost-2); }
.br-inline .br-btn { min-height: 2.4rem; padding: 0.35rem 0.8rem; font-size: var(--fs-sm); }
.br-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.br-table th { text-align: left; font: 400 var(--fs-xs) var(--font-label); letter-spacing: 0.05em; color: var(--muted); padding: 0 0.5rem 0.3rem 0; }
.br-table td { border-top: 1px solid var(--line); padding: 0.45rem 0.5rem 0.45rem 0; vertical-align: top; }
.br-why { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.br-diff { display: grid; gap: 0.75rem; }
.br-drow { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.br-drow:first-child { border-top: 0; padding-top: 0; }
.br-drow h4 { grid-column: 1 / -1; }
.br-was, .br-will { padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); min-width: 0; overflow-wrap: anywhere; }
.br-was { background: color-mix(in oklab, var(--bad) 9%, transparent); border-left: 3px solid color-mix(in oklab, var(--bad) 55%, transparent); }
.br-will { background: color-mix(in oklab, var(--good) 11%, transparent); border-left: 3px solid color-mix(in oklab, var(--good) 60%, transparent); }
.br-tag { display: block; font: 400 var(--fs-xs) var(--font-label); letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.2rem; }
.br-text { white-space: pre-wrap; }
.br-card ul ul, .br-diff ul { padding-left: 1.1rem; margin: 0.2rem 0; }
.br-card dl { margin: 0.2rem 0; display: grid; grid-template-columns: minmax(5rem, max-content) 1fr; gap: 0.15rem 0.6rem; }
.br-card dt { font-size: var(--fs-sm); color: var(--muted); }
.br-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-xs); margin: 0; }
.br-log { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem; max-height: 32rem; overflow: auto; }
.br-quote { margin: 0.5rem 0; padding: 0.5rem 0.9rem; border-left: 3px solid var(--brass); background: var(--panel-2); font-style: italic; overflow-wrap: anywhere; }
.br-quote footer { font-style: normal; font-size: var(--fs-sm); margin-top: 0.35rem; }
.br-sources { padding-left: 1.1rem; overflow-wrap: anywhere; }
.br-crumb { font-size: var(--fs-sm); }
.br-banner-line { margin-top: 0.5rem; font-weight: 600; }
.br-gone-note { color: var(--bad); font-weight: 600; }
details summary { cursor: pointer; color: var(--muted); margin-top: 0.5rem; }
@media (max-width: 40rem) {
  .br-drow { grid-template-columns: 1fr; }
  .br-theme { order: 1; }
  .br-who { order: 2; width: 100%; justify-content: space-between; padding-bottom: 0.4rem; }
  .br-card dl { grid-template-columns: 1fr; }
}
