/* UI v3 B3 (impl-plan §11 B3), after styles.css, tokens only. Tooltip rules: ui/tooltip.js. */

/* Side panel: #modal.is-panel (openPanel), one level. The slide moves `right`, never transform:
   the toast stack inside the dialog stays fixed to the window. */
.modal.is-panel { inset: 0 0 0 auto; width: clamp(420px, 36vw, 560px); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border: 0; border-left: 1px solid var(--border-hairline); border-radius: 0; box-shadow: var(--shadow-3); scroll-padding-bottom: 72px; }
.modal.is-panel[open] { display: flex; flex-direction: column; animation: panel-in 120ms cubic-bezier(.2, 0, 0, 1); }
.modal.is-panel::backdrop { background: color-mix(in srgb, var(--stone-12) 16%, transparent); }
.modal.is-panel .modal-head { flex: 0 0 auto; }
.modal.is-panel .modal-body { flex: 1 0 auto; display: flex; flex-direction: column; padding: 20px 20px 0; }
.modal.is-panel .modal-body > form { flex: 1 0 auto; display: flex; flex-direction: column; }
.modal.is-panel .modal-body > form > .form-actions:last-child, .modal.is-panel .modal-body > .form-actions:last-child { position: sticky; bottom: 0; z-index: 1; margin: auto -20px 0; padding: 12px 20px; border-top: 1px solid var(--border-hairline); background: var(--bg-surface); }
body:has(> #modal.is-panel[open]) .toast-stack { right: calc(clamp(420px, 36vw, 560px) + 24px); }
.modal-ref { min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-sm); white-space: nowrap; text-overflow: ellipsis; }
@keyframes panel-in { from { right: -24px; } }

.form-actions.is-confirming > :not(.panel-confirm) { display: none; }
.panel-confirm { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.panel-confirm > span { margin-right: auto; color: var(--text-primary); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-medium); }

/* Callouts: the icon needs 36 px; module rules (.op-control, .ab-pad) must not take it away. */
#app .notice:not(:empty), #modal .notice:not(:empty) { padding-left: 36px; }
.ab-root .notice.ab-pad::before { top: 15px; }
.notice.op-alert::before { background: currentColor; }
.notice.is-clamped { display: flex; align-items: baseline; gap: 12px; }
.notice.is-clamped > .callout-text { flex: 1 1 auto; min-width: 0; }
.notice.is-clamped:not(.is-expanded) > .callout-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.callout-more { flex: 0 0 auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.callout-more:focus-visible { outline-offset: 1px; }

.report-nav, .contact-tabs { border-bottom-color: var(--border-hairline); }
.report-nav button, .contact-tabs a { border-radius: 0; font-weight: var(--weight-medium); transition: color var(--motion), box-shadow var(--motion); }
.report-nav button:hover, .contact-tabs a:hover { background: transparent; box-shadow: inset 0 -2px 0 var(--border-default); }
.report-nav button.active:hover, .contact-tabs a.active:hover { box-shadow: inset 0 -2px 0 var(--primary); }

.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--stone-3); color: var(--text-secondary); font-size: var(--text-xs); line-height: 1; font-weight: var(--weight-medium); white-space: nowrap; }

.page:has(> .page-head .btn-primary) .empty-inline .btn-primary { background: transparent; color: var(--accent-text); border-color: transparent; box-shadow: none; }
.page:has(> .page-head .btn-primary) .empty-inline .btn-primary:hover { background: transparent; text-decoration: underline; text-underline-offset: 2px; }

@media (forced-colors: active) {
  .toast, .tag { border: 1px solid CanvasText; }
  .notice::before { background: CanvasText; }
}

@media print {
  .toast-stack, .callout-more, .panel-confirm, .modal.is-panel { display: none !important; }
  .notice.is-clamped > .callout-text { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
}