/*
 * ad-modal.css: detail pop-ups (native <dialog>), the same open/close pattern as the Bentley pages.
 * A card keeps the page short and states the point; the button opens the example, workflow or
 * detail. Markup: a button with data-ad-modal-open="<dialog id>" and a <dialog class="ad-dialog">.
 */
html.ad-dialog-lock { overflow: hidden; }
.ad-dialog-open {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem;
	border: 1px solid currentColor; border-radius: 8px; background: transparent; color: var(--wp--preset--color--primary);
	font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
}
.ad-dialog-open::after { content: "\00bb"; font-weight: 400; }
.ad-dialog-open:hover { background: rgba(35, 83, 212, .08); }
.ad-dialog-open:focus-visible, .ad-dialog__x:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }

dialog.ad-dialog {
	width: min(92vw, 880px); max-height: min(88vh, 900px); padding: 0; margin: auto; border: 0; border-radius: 14px;
	background: #fff; color: var(--wp--preset--color--slate); box-shadow: 0 24px 70px rgba(11, 18, 32, .45);
	overflow: hidden; font-family: var(--wp--preset--font-family--body); text-align: left;
}
dialog.ad-dialog[open] { display: flex; flex-direction: column; }
dialog.ad-dialog::backdrop { background: rgba(11, 18, 32, .62); }
.ad-dialog__bar {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line); flex: 0 0 auto; background: #fff;
}
.ad-dialog__type { font-family: var(--wp--preset--font-family--mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.ad-dialog__x {
	min-height: 44px; padding: .4rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 8px;
	background: #fff; color: var(--wp--preset--color--ink); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
}
.ad-dialog__x:hover { background: var(--wp--preset--color--surface); }
.ad-dialog__body { overflow: auto; flex: 1 1 auto; min-height: 0; padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) 2rem; overscroll-behavior: contain; }
dialog.ad-dialog .ad-dialog__body h2 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--wp--preset--color--ink); text-wrap: balance; }
.ad-dialog__lede { margin: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.55; color: var(--wp--preset--color--slate); }
dialog.ad-dialog .ad-dialog__body p { margin: 0 0 .85rem; line-height: 1.6; }
dialog.ad-dialog .ad-dialog__body h3 { margin: 1.25rem 0 .4rem; font-family: var(--wp--preset--font-family--mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
dialog.ad-dialog .ad-dialog__body ol { margin: 0; padding-left: 1.25rem; line-height: 1.6; }
dialog.ad-dialog .ad-dialog__body a { color: var(--wp--preset--color--primary); font-weight: 600; }

/* The five-part flow used for AI systems: one row per part, the person and the output marked. */
.ad-dialog__flow { list-style: none; margin: 1rem 0 0; padding: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; overflow: hidden; }
.ad-dialog__flow li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .8rem 1rem; border-top: 1px solid var(--wp--preset--color--line); line-height: 1.5; }
.ad-dialog__flow li:first-child { border-top: 0; }
.ad-dialog__flow b { font-family: var(--wp--preset--font-family--mono); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--muted); padding-top: .15rem; }
.ad-dialog__flow .is-human { background: #EEF3FD; }
.ad-dialog__flow .is-human b { color: var(--wp--preset--color--primary); }
.ad-dialog__flow .is-out { background: #E9F8F4; }
.ad-dialog__flow .is-out b { color: #0B6B5B; }
.ad-dialog__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }

@media (max-width: 640px) {
	dialog.ad-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
	.ad-dialog__flow li, .ad-dialog__cols { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}
@media (prefers-reduced-motion: no-preference) { dialog.ad-dialog[open] { animation: ad-dialog-in 160ms ease-out; } @keyframes ad-dialog-in { from { opacity: 0; transform: translateY(8px); } } }