.oi-heading-row, .oi-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.oi-person-focus { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.oi-person-photo-slot, .oi-person-photo { width: 4rem; height: 4rem; border-radius: 50%; }
.oi-person-photo-slot { display: grid; place-items: center; overflow: hidden; background: var(--br-soft); border: 1px solid var(--br-line); }
.oi-person-photo { display: block; object-fit: cover; }
.oi-person-photo-fallback { display: grid; place-items: center; color: var(--br-ink); font-weight: 800; }
.oi-person-copy p, .oi-person-copy h2, .oi-person-copy small { margin: 0; }
.oi-person-copy p, .oi-person-copy small { color: var(--br-muted); }
.oi-person-copy h2 { overflow-wrap: anywhere; }
.oi-detail-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }
.oi-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .8rem; }
.oi-filter-grid label, .oi-workflow-form label { display: grid; gap: .3rem; color: var(--br-ink); font-weight: 700; }
.oi-filter-grid :is(input, select), .oi-workflow-form :is(input, select, textarea) { width: 100%; min-height: 2.75rem; padding: .55rem .65rem; color: var(--br-ink); background: var(--br-field); border: 1px solid var(--br-line); border-radius: .55rem; font: inherit; }
.oi-workflow-form textarea { resize: vertical; }
.oi-filter-actions { display: flex; align-items: end; gap: .5rem; flex-wrap: wrap; }
.oi-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .65rem; margin: 1rem 0; }
.oi-metric { min-width: 0; padding: .75rem; color: var(--br-ink); background: var(--br-soft); border: 1px solid var(--br-line); border-radius: .75rem; }
.oi-metric span { display: block; color: var(--br-muted); font-size: .8rem; font-weight: 700; }
.oi-metric strong { display: block; margin-top: .2rem; overflow-wrap: anywhere; font-size: 1.15rem; }
.oi-table-wrap { overflow-x: auto; }
.oi-table td { vertical-align: middle; }
.oi-code { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.oi-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.oi-badge { display: inline-flex; padding: .2rem .45rem; border: 1px solid var(--br-line); border-radius: 999px; background: var(--br-soft); font-size: .76rem; font-weight: 800; }
.oi-badge[data-tone="alert"] { border-color: #b65337; color: #8d2f18; background: #fff2ed; }
.oi-review { margin: 1rem 0; padding: .85rem 1rem; border-left: .3rem solid var(--br-line); border-radius: .55rem; background: var(--br-soft); }
.oi-review h3 { margin: 0 0 .4rem; }
.oi-review[hidden], .oi-review [hidden] { display: none !important; }
.oi-review p { margin: .35rem 0; overflow-wrap: anywhere; }
.oi-review-done { font-weight: 800; color: var(--ui-success); }
.oi-review-confirm { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--br-line); }
.oi-review-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.oi-review .br-button { min-height: 2.75rem; }
.oi-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.oi-history { display: grid; gap: .5rem; padding: 0; list-style: none; }
.oi-history li { padding: .65rem; border-left: .25rem solid var(--br-line); background: var(--br-soft); }
.oi-history strong, .oi-history span { display: block; }
.oi-history small { color: var(--br-muted); }
.oi-workflow-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--br-line); }
.oi-workflow-form h3, .oi-workflow-form .br-hint, .oi-workflow-form .br-feedback { grid-column: 1 / -1; }
.oi-workflow-form button { justify-self: start; }
.br-feedback { min-height: 1.5rem; margin: .65rem 0; font-weight: 700; }
.br-feedback:empty { display: none; }
.br-feedback[data-tone="error"] { color: var(--ui-danger); }
.br-feedback[data-tone="ok"] { color: var(--ui-success); }
.br-feedback-link { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .18em; }
.br-feedback:focus { outline: 3px solid var(--ui-focus); outline-offset: 3px; }

@media (max-width: 48rem) { .oi-detail-grid, .oi-workflow-form { grid-template-columns: 1fr; } }
@media (max-width: 40rem) {
  .oi-person-focus { grid-template-columns: auto minmax(0, 1fr); }
  .oi-person-focus .br-button { grid-column: 1 / -1; width: 100%; }
  .oi-heading-row, .oi-section-heading { align-items: stretch; flex-direction: column; }
  .oi-heading-row .br-button, .oi-section-heading .br-button, .oi-detail-actions { width: 100%; }
  .oi-detail-actions { display: grid; }
  .oi-review .br-button, .oi-review-actions { width: 100%; }
  .oi-review-actions { display: grid; }
  .oi-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .oi-table, .oi-table tbody, .oi-table tr, .oi-table td { display: block; width: 100%; }
  .oi-table tr { margin-bottom: .75rem; padding: .5rem; border: 1px solid var(--br-line); border-radius: .7rem; }
  .oi-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem; border: 0; padding: .35rem; }
  .oi-table td::before { content: attr(data-label); color: var(--br-muted); font-size: .78rem; font-weight: 800; }
  .oi-table td:last-child { grid-template-columns: 1fr; }
}