/* Floating sheets use the existing white, graphite and blue palette. */
html { scrollbar-gutter: stable; }
body.dialog-open { overflow: hidden; }

dialog.modal {
  border: 1px solid color-mix(in srgb, var(--surface) 80%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: 0 32px 80px color-mix(in srgb, var(--text) 15%, transparent),
              0 8px 24px color-mix(in srgb, var(--text) 7%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  overscroll-behavior: contain;
}
dialog.modal[open] { animation: sheet-arrive 500ms var(--ease) both; }
dialog.modal::backdrop {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: veil-arrive 300ms var(--ease) both;
}
dialog.modal.is-closing { animation: sheet-leave 200ms var(--ease) both; pointer-events: none; }
dialog.modal.is-closing::backdrop { animation: veil-leave 200ms var(--ease) both; }
.modal-head {
  align-items: center;
  padding: 24px 32px 16px;
  border-bottom: 0;
  background: transparent;
}
.modal-head h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.modal-head .icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  transition: background-color 250ms var(--ease), transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.modal-head .icon-btn .icon { width: 16px; height: 16px; flex-basis: 16px; opacity: .8; }
.modal-head .icon-btn:hover { background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 6%, transparent); }
.modal-head .icon-btn:active { transform: scale(.94); transition-duration: 90ms; }
.modal-body { padding: 16px 32px 32px; }
.modal-body > .co-footnote:first-child { margin-top: 0; margin-bottom: 16px; }
.modal-body .form-field label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); }
.modal-body :is(.form-summary, .co-modal-summary, .readonly-value, .banner-note, .co-form-error) { border-radius: 12px; }
.modal-body .co-modal-summary { padding: 16px; background: var(--surface-muted); border: 1px solid color-mix(in srgb, var(--text) 4%, transparent); }
.modal-body .co-modal-summary h3 { font-weight: 600; }
.modal-body :is(.co-phase-change, .form-summary, .readonly-value) { background: var(--surface-muted); border-color: color-mix(in srgb, var(--text) 5%, transparent); }
.modal-body .co-status-actions { padding: 16px; margin-top: 24px; background: var(--surface-muted); border-radius: 12px; }
.modal-body .co-status-actions .btn { flex: 1; }
.modal-body .co-actor-options { gap: 8px; }
.modal-body .co-actor-option {
  border: 1px solid var(--ref-line);
  background: var(--surface-muted);
  border-radius: 12px;
}
.modal-body .co-actor-option.active { border-color: var(--ref-blue-line); background: var(--brand-wash); }
.modal-body .co-actor-option strong { font-weight: 600; }
.modal-body .co-actor-option:hover { background: var(--surface); border-color: var(--ref-blue-line); box-shadow: var(--ref-shadow); }
.modal-body .co-actor-option:focus-visible { outline: 3px solid var(--ref-focus); outline-offset: 3px; }
.modal :is(.btn, .co-actor-option) {
  transition: transform 500ms var(--ease), background-color 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
.modal .btn { font-size: 14px; line-height: 20px; font-weight: 600; }
.modal .btn-secondary { border-color: var(--ref-line-strong); box-shadow: var(--ref-control-shadow); }
.modal .btn-secondary:hover { background: var(--surface-muted); }
.modal .btn-primary { box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 16%, transparent); }
.modal :is(button, summary):active:not(:disabled) { transform: scale(.98); transition-duration: 90ms; }
.modal button:disabled { transform: none; box-shadow: none; }
.modal .badge { border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.modal :is(input, select, textarea) { border-color: var(--ref-line-strong); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 2%, transparent); }
.modal :is(input, select, textarea):focus-visible { outline: 3px solid var(--ref-focus); outline-offset: 2px; }
.modal-body .banner-note { border-color: color-mix(in srgb, var(--brand) 10%, transparent); }
.modal-actions {
  padding: 16px 32px 24px;
  gap: 12px;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
}
.modal-actions > .btn { min-height: 40px; }
.toast {
  border: 1px solid color-mix(in srgb, var(--surface) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--text) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 4%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
@keyframes sheet-arrive { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheet-leave { to { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes veil-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-leave { to { opacity: 0; } }
@media (max-width: 899px) {
  .mobile-overlay {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--text) 12%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity 300ms var(--ease), visibility 300ms;
  }
  .nav-open .mobile-overlay { visibility: visible; opacity: 1; pointer-events: auto; }
}
@media (max-width: 559px) {
  dialog.modal, dialog.modal.modal-wide { width: calc(100% - 32px); max-height: calc(100dvh - 32px); }
  .modal-head { padding: 24px 24px 16px; }
  .modal-head .icon-btn { width: 44px; height: 44px; }
  .modal-body { padding: 8px 24px 24px; }
  .modal-actions { padding: 16px 24px 24px; }
  .modal-actions > .btn { min-height: 44px; flex: 1 1 auto; }
  .modal :is(.btn, input, select) { min-height: 44px; }
  .modal :is(input, select, textarea) { font-size: 16px; line-height: 24px; }
  .modal-body .co-status-actions { padding: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.modal[open], dialog.modal.is-closing, dialog.modal::backdrop { animation: none; transform: none; }
  .modal :is(button, summary):active { transform: none; }
}