/* Right panel: a header, an empty state, a tablist and one persistent panel per tab. [hidden] is forced to
   display:none in base.css. Whether the pane shows at all belongs to app.css, which owns the slide-over: this
   file must not set `display`, or it would reopen the panel behind the overlay's back. */
.panel-pane { flex-direction: column; }
.panel-empty { flex: 1; align-content: center; }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-tabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.panel-tab { flex: 1; padding: var(--sp-3) var(--sp-2); border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; }
.panel-tab:hover { color: var(--text); }
.panel-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.panel-tab:focus-visible { outline-offset: -2px; }
.panel-tabpanel { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-4); }
.panel-tabpanel:focus-visible { outline: none; } /* focusable by script only (tabindex -1), so it needs no ring of its own */

.detail-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.detail-head { display: flex; align-items: center; gap: var(--sp-3); }
.detail-name { font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.detail-list { margin: 0; display: grid; gap: var(--sp-2); }
.detail-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.detail-row dt { color: var(--muted); flex-shrink: 0; }
.detail-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.detail-lock { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.detail-readonly { margin: 0; padding: var(--sp-2) var(--sp-3); background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--surface); color: var(--warn); font-size: var(--fs-sm); border-radius: var(--r-md); }
.detail-labels { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.detail-chip-x { min-width: 24px; min-height: 24px; line-height: 1; padding: 0 2px; border-radius: var(--r-pill); color: var(--text); }
.detail-chip-x:hover:not(:disabled) { background: var(--surface-2); }
.detail-chip-x:disabled { opacity: 0.4; cursor: not-allowed; }
.panel-tabpanel .btn[aria-disabled="true"], .panel-tabpanel .btn[aria-disabled="true"]:hover { opacity: 0.5; cursor: progress; background: var(--surface); }
.field select:disabled { opacity: 0.6; cursor: not-allowed; }

.activity-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.activity-item { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.activity-text { font-size: var(--fs-md); overflow-wrap: anywhere; }
.activity-meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }

.notes-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.notes-form .btn { align-self: flex-end; }
.notes-error { margin: 0; font-size: var(--fs-sm); color: var(--danger); }
.notes-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.note { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
.note-head { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.note-author { font-weight: 600; overflow-wrap: anywhere; }
.note-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }