/* app-confirm.css Styling for the shared .c-confirm rendered by app-confirm.js. Consumes semantic tokens only — host brand layers theme it for free. Layout: icon on the left, title + message stacked on the right, then a right-aligned action row below. Centered on the viewport (native ::showModal handles centering; we just set sizing). Animates in with a fade + slight rise. Token strategy: every var() carries a fallback so the dialog still looks correct on hosts that haven't bound the full design-token set yet. As tokens get adopted the fallbacks become inert. */ @layer components { .c-confirm { /* Reset native defaults so we can style cleanly. */ padding: 0; border: none; background: transparent; color: inherit; max-width: min(32rem, calc(100vw - 2rem)); width: 100%; /* Native [open] is auto-centered via margin:auto + the top-layer; nothing extra needed for centering. */ } .c-confirm::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Open animation: fade + 8px rise. Browsers that don't support @starting-style just snap in — graceful degradation. */ .c-confirm[open] { animation: c-confirm-rise 160ms ease-out both; } .c-confirm[open]::backdrop { animation: c-confirm-fade 160ms ease-out both; } @keyframes c-confirm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes c-confirm-fade { from { opacity: 0; } to { opacity: 1; } } /* The actual panel — gets the background, border, shadow. The outer stays transparent so the backdrop animation doesn't compete with the panel's box-shadow. */ .c-confirm__panel, .c-confirm > .c-confirm__actions { background: var(--color-surface, #ffffff); color: var(--color-ink, #0f172a); } .c-confirm > .c-confirm__panel { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4, 1rem); padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem) var(--space-4, 1rem); border-top-left-radius: var(--radius-lg, 0.75rem); border-top-right-radius: var(--radius-lg, 0.75rem); box-shadow: 0 -1px 0 0 var(--color-surface, #ffffff); align-items: start; } .c-confirm > .c-confirm__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3, 0.75rem); padding: var(--space-4, 1rem) var(--space-6, 1.5rem) var(--space-5, 1.25rem); border-bottom-left-radius: var(--radius-lg, 0.75rem); border-bottom-right-radius: var(--radius-lg, 0.75rem); box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.35), 0 4px 10px rgba(15, 23, 42, 0.08); } /* Icon block — circular tinted background sized to align with the title baseline. Colour comes from the type variant. */ .c-confirm__icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 12%, transparent); } .c-confirm__icon svg { width: 1.5rem; height: 1.5rem; display: block; } .c-confirm__content { min-width: 0; /* allow long messages to wrap */ } .c-confirm__title { margin: 0 0 var(--space-2, 0.5rem) 0; font-family: var(--font-family-heading, var(--font-family-base, system-ui, sans-serif)); font-size: var(--font-size-lg, 1.125rem); font-weight: var(--font-weight-bold, 600); line-height: 1.3; color: var(--color-ink, #0f172a); } .c-confirm__message { margin: 0; font-family: var(--font-family-base, system-ui, sans-serif); font-size: var(--font-size-md, 0.9375rem); line-height: 1.5; color: var(--color-ink-soft, #475569); } .c-confirm__message[hidden] { display: none; } /* Type variants — only the icon block picks up the tint; the rest of the dialog stays neutral so destructive doesn't scream. */ .c-confirm--info .c-confirm__icon { color: var(--color-info, #2563eb); } .c-confirm--warning .c-confirm__icon { color: var(--color-warning, #b45309); } .c-confirm--danger .c-confirm__icon { color: var(--color-danger, #b91c1c); } /* Destructive primary button. Consumed by app-confirm.js via the c-button--danger class on the OK button when type=danger. Lives here (not in app-buttons.css) because it's specifically a confirm-flow affordance; promote upstream when a second consumer appears. */ .c-button.c-button--danger { background: var(--color-danger, #b91c1c); border-color: var(--color-danger, #b91c1c); color: var(--color-on-danger, #ffffff); } .c-button.c-button--danger:hover, .c-button.c-button--danger:focus-visible { background: var(--color-danger-strong, #991b1b); border-color: var(--color-danger-strong, #991b1b); } /* Prompt input field — rendered by appPrompt() inside the same .c-confirm shell, below the (optional) message. Sits in the right column of the .c-confirm__panel grid (under .c-confirm__content). Consumes the same semantic tokens with safe fallbacks. */ .c-prompt__field { margin-top: var(--space-3, 0.75rem); } .c-prompt__label { display: block; margin-bottom: var(--space-1, 0.25rem); font-family: var(--font-family-base, system-ui, sans-serif); font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-medium, 500); color: var(--color-ink-soft, #475569); } .c-prompt__label[hidden] { display: none; } .c-prompt__input { width: 100%; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border: 1px solid var(--color-line, #e2e8f0); border-radius: var(--radius-sm, 0.375rem); font-family: inherit; font-size: var(--font-size-md, 0.9375rem); line-height: 1.4; color: var(--color-ink, #0f172a); background: var(--color-surface, #ffffff); box-sizing: border-box; } .c-prompt__input:focus-visible { outline: 2px solid var(--color-info, #2563eb); outline-offset: 1px; border-color: var(--color-info, #2563eb); } /* Small viewports: stack the actions full width so neither button gets squashed off the edge. */ @media (max-width: 480px) { .c-confirm > .c-confirm__actions { flex-direction: column-reverse; align-items: stretch; } .c-confirm > .c-confirm__actions .c-button { width: 100%; } } /* Reduced-motion users get the dialog without the rise / fade. */ @media (prefers-reduced-motion: reduce) { .c-confirm[open], .c-confirm[open]::backdrop { animation: none; } } }