.modal-overlay { background: var(--veil); }

.modal {
  position: relative;
  isolation: isolate;
  background: var(--sheet);
  border: 0;
  border-radius: 24px;
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), var(--sheet-shadow);
}

.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, color-mix(in srgb, var(--warm) 11%, transparent), transparent 70%);
}

:is(.modal.detail-modal, .search-modal, .pal) { --u: 1px; --zk: var(--syn-k, 1); }
.modal.detail-modal { --modal-pad-x: 22px; --modal-pad-top: calc(round(calc(20px * var(--zk, 1)), 1px) / var(--zk, 1)); border-radius: 28px; padding: var(--modal-pad-top) var(--modal-pad-x) 16px; }
.modal.detail-modal .detail-modal-body { margin-inline: calc(-1 * var(--modal-pad-x)); padding-inline: var(--modal-pad-x); }

.modal input:not([type="range"], [type="checkbox"], [type="radio"]),
.modal select {
  background: var(--well);
  border: 0;
  box-shadow: var(--well-shadow);
  border-radius: 12px;
}
.modal input:not([type="range"]):focus,
.modal select:focus {
  box-shadow: var(--well-shadow), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.detail-modal-close,
.ava-modal-close {
  --h: calc(round(calc(36px * var(--zk, 1)), 1px) / var(--zk, 1));
  flex: none;
  width: var(--h);
  height: var(--h);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-short), background var(--dur-short), transform var(--dur-long) var(--ease-spring);
}
.detail-modal-close {
  --band: calc(round(calc(40px * var(--zk, 1)), 1px) / var(--zk, 1));
  --gap-y: calc(round(down, calc((var(--band) - calc(round(calc(36px * var(--zk, 1)), 1px) / var(--zk, 1))) / 2 * var(--zk, 1)), 1px) / var(--zk, 1));
  --h: calc(var(--band) - 2 * var(--gap-y));
  top: calc(var(--modal-pad-top, 20px) + var(--gap-y));
  right: calc(round(calc(14px * var(--zk, 1)), 1px) / var(--zk, 1));
}
:is(.detail-modal-close, .ava-modal-close) svg { --s: calc(round(calc(16px * var(--zk, 1)), 1px) / var(--zk, 1)); width: var(--s); height: var(--s); }
.detail-modal-close:hover,
.ava-modal-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.detail-modal-close:active,
.ava-modal-close:active { transform: scale(.9); }
.ava-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.detail-modal-head { border-bottom: 0; padding-bottom: 12px; }
.detail-modal-head h2 { font-weight: 500; font-size: 23px; letter-spacing: -.01em; }
.detail-modal-kind {
  font: italic 500 13.5px/1.2 var(--display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--warm-text);
  margin-bottom: 3px;
}

.detail-modal-head-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-right: 44px;
}
.detail-modal-head-row > .detail-modal-titles { flex: 1; min-width: 0; }
.detail-modal-head-actions:empty { display: none; }
.detail-modal-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.detail-modal-bar:empty { display: none; }
.detail-modal-bar { flex: none; padding: 2px 0 12px; }
.detail-modal-bar > ava-seg { min-width: 220px; }

.modal-actions.detail-modal-actions { border-top: 0; padding-top: 10px; }

.detail-modal-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--glass), var(--glass-plate);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), var(--glass-drop-sm);
  font: 550 12.5px/1 var(--body);
  color: var(--accent-deep);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-long) var(--ease-spring), box-shadow var(--dur-short);
}
.detail-modal-link:hover { opacity: 1; color: var(--accent-deep); }
.detail-modal-link:active { transform: scale(.96); box-shadow: var(--press); }

.modal-actions { gap: 8px; }

.ava-modal-sheet {
  width: min(var(--ava-modal-w, 620px), 100%);
  max-width: none;
  max-height: min(86vh, 860px);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
}
ava-modal[size="sm"] { --ava-modal-w: 420px; }
ava-modal[size="lg"] { --ava-modal-w: 900px; }
ava-modal[size="full"] { --ava-modal-w: 1180px; }
ava-modal[size="full"] > .ava-modal-sheet { height: min(88vh, 900px); }

.ava-modal-head {
  --kick-lh: calc(round(calc(16px * var(--zk, 1)), 1px) / var(--zk, 1));
  --kick-gap: calc(round(calc(2px * var(--zk, 1)), 1px) / var(--zk, 1));
  --title-lh: calc(round(calc(28px * var(--zk, 1)), 1px) / var(--zk, 1));
  --head-h: calc(var(--kick-lh) + var(--kick-gap) + var(--title-lh));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: calc(round(calc(20px * var(--zk, 1)), 1px) / var(--zk, 1)) calc(round(calc(18px * var(--zk, 1)), 1px) / var(--zk, 1)) 0 24px;
}
.ava-modal-titles { flex: 1; min-width: 0; }
.ava-modal-kicker { font: italic 500 13.5px/var(--kick-lh) var(--display); color: var(--warm-text); margin-bottom: var(--kick-gap); }
.modal .ava-modal-title { font: 500 23px/var(--title-lh) var(--display); letter-spacing: -.01em; color: var(--ink); }
.ava-modal-head > .ava-modal-close {
  --gap-y: calc(round(down, calc((var(--head-h) - calc(round(calc(36px * var(--zk, 1)), 1px) / var(--zk, 1))) / 2 * var(--zk, 1)), 1px) / var(--zk, 1));
  --h: calc(var(--head-h) - 2 * var(--gap-y));
  margin-top: var(--gap-y);
}
.ava-modal-head:has(> .ava-modal-titles > .ava-modal-kicker[hidden]) { --head-h: var(--title-lh); }
.ava-modal-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ava-modal-actions:empty { display: none; }
.ava-modal-bar { display: flex; align-items: center; gap: 12px; padding: 14px 24px 4px; }
.ava-modal-bar:empty { display: none; }
.ava-modal-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px 24px 24px; scrollbar-width: thin; }
.ava-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 24px 18px; }
.ava-modal-foot:empty { display: none; }

@media (max-width: 680px) {
  .modal,
  .modal.detail-modal,
  .ava-modal-sheet { border-radius: 26px 26px 0 0; }
  .modal.detail-modal { --modal-pad-x: 16px; --modal-pad-top: calc(round(calc(16px * var(--zk, 1)), 1px) / var(--zk, 1)); padding: var(--modal-pad-top) 16px max(16px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 14px); }
  .ava-modal-sheet { width: 100%; max-height: calc(100dvh - 10px); }
  ava-modal[size="full"] > .ava-modal-sheet { height: calc(100dvh - 10px); }
  .ava-modal-head { --title-lh: calc(round(calc(26px * var(--zk, 1)), 1px) / var(--zk, 1)); padding: calc(round(calc(16px * var(--zk, 1)), 1px) / var(--zk, 1)) calc(round(calc(12px * var(--zk, 1)), 1px) / var(--zk, 1)) 0 16px; gap: 8px; }
  .modal .ava-modal-title, .detail-modal-head h2 { font-size: 21px; }
  .ava-modal-bar { padding: 12px 16px 2px; }
  .ava-modal-bar > ava-seg, .detail-modal-bar > ava-seg { width: 100%; display: grid; }
  .ava-modal-body { padding: 12px 16px max(20px, env(safe-area-inset-bottom)); }
  .detail-modal-head-row { padding-right: 40px; gap: 8px; }
  .detail-modal-close { right: calc(round(calc(10px * var(--zk, 1)), 1px) / var(--zk, 1)); }
}