/* Small additions to the design system's stylesheet (design.css), shared by every page. */

[hidden] { display: none !important; }
html, body { min-height: 100%; }
a { color: var(--primary-text); }

/* End demo confirm: a native <dialog> shown as a bottom sheet. */
.dl-dialog { width: 100%; max-width: 560px; margin: auto auto 0; padding: 0; border: 0; background: transparent; color: var(--ink); }
.dl-dialog::backdrop { background: rgba(13, 26, 22, .5); }
@media (min-width: 600px) { .dl-dialog { margin: auto; } .dl-dialog .dl-sheet { border-radius: var(--radius-xl); } }

/* Agency monogram in the brand slot until a logo image is added. */
.dl-monogram { border-style: solid; border-color: transparent; background: var(--primary); color: var(--on-primary); font-size: 15px; line-height: 1; font-weight: 800; }
.dl-agency__logo.dl-monogram { font-size: 20px; }

/* Keep the agency bar in line with the panel on wide screens. */
@container app (min-width: 960px) { .dl-topbar { max-width: 1200px; margin: 0 auto; } }