/* Demo mode (descol-fx). Token-based so it follows any DESCOL theme preset. */
.dc-demo-badge { display: inline-flex; align-items: center; margin-inline-start: 10px; padding: 3px 7px 2px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--wp--preset--font-family--ui, inherit); font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.dc-demo-notice__tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--wp--preset--color--contrast, #111); color: var(--wp--preset--color--base, #fff); font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.dc-demo-notice--bar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.dc-demo-notice--inline { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--wp--preset--color--border, #ddd); background: var(--wp--preset--color--surface, #f6f6f6); color: var(--wp--preset--color--contrast, #111); font-size: var(--wp--preset--font-size--small, 14px); line-height: 1.45; }
.dc-demo-notice--inline .dc-demo-notice__text { margin: 0; }
.dc-demo-notice--inline .dc-demo-notice__tag { flex: none; margin-top: 1px; }
.dc-demo-notice--footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: baseline; margin-top: clamp(40px, 5vw, 64px); padding: 20px 0 0; border-top: 1px solid var(--wp--preset--color--border, #ddd); }
.dc-demo-notice--footer .dc-demo-notice__title { margin: 0; font-family: var(--wp--preset--font-family--ui, inherit); font-size: var(--wp--preset--font-size--small, 14px); font-weight: 600; }
.dc-demo-notice--footer .dc-demo-notice__text { grid-column: 2; margin: 0; max-width: 72ch; color: var(--wp--preset--color--muted, #555); font-size: var(--wp--preset--font-size--small, 14px); }
.dc-demo-notice--footer .dc-demo-notice__tag { grid-row: span 2; }