/**
* Confirm Dialog Styles
* ============================================
* Modern, visually rich confirmation dialogs
* With gradients, accents, and polished animations
*/
/* Modal Overlay */
.confirm-dialog-modal {
display: none;
position: fixed;
inset: 0;
z-index: var(--z-modal-elevated, 3500);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(30, 41, 59, 0.6) 100%);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
transition: opacity 0.25s ease;
}
.confirm-dialog-modal.active {
display: flex;
opacity: 1;
}
/* Dialog Content Box */
.confirm-dialog-content {
background: var(--surface-primary, #fff);
border-radius: 20px;
max-width: 420px;
width: 100%;
padding: 0;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.1),
0 48px 64px -12px rgba(0, 0, 0, 0.14);
animation: confirmDialogSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
position: relative;
}
/* Accent border on left */
.confirm-dialog-content::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: 20px 0 0 20px;
}
.confirm-dialog-warning .confirm-dialog-content::before {
background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
}
.confirm-dialog-danger .confirm-dialog-content::before {
background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}
.confirm-dialog-info .confirm-dialog-content::before {
background: linear-gradient(180deg, #2dd4bf 0%, #0d9488 100%);
}
@keyframes confirmDialogSlideIn {
0% {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
60% {
transform: scale(1.02) translateY(0);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Header with icon and title inline */
.confirm-dialog-header {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 32px 32px 0 36px;
}
.confirm-dialog-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
position: relative;
overflow: hidden;
}
/* (Removed 2026-07-27) The icon carried a perpetual `iconShimmer` sweep. On a
confirmation dialog — which by definition interrupts the user to ask a
question — a looping glint reads as decoration competing with the decision,
and it never stops because the animation is infinite. The icon keeps its
colour + tint treatment; only the moving highlight is gone. */
.confirm-dialog-header-content {
flex: 1;
min-width: 0;
padding-top: 4px;
}
.confirm-dialog-title {
font-size: 19px;
font-weight: 700;
color: var(--text-primary, #0f172a);
margin: 0 0 10px;
line-height: 1.3;
letter-spacing: -0.02em;
}
.confirm-dialog-message {
font-size: 14px;
color: var(--text-secondary, #64748b);
margin: 0;
line-height: 1.65;
white-space: pre-line;
}
/* Secondary context line inside a confirm message (e.g. who's free / fairness
on the slot being scheduled) — quieter than the main sentence so it informs
without competing with the decision. */
.confirm-dialog-context {
display: inline-block;
margin: 2px 0;
font-size: 13px;
color: var(--slate-500, #94a3b8);
}
/* Type-specific inner border (thin inset shadow) */
.confirm-dialog-danger .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(220, 38, 38, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.1),
0 48px 64px -12px rgba(0, 0, 0, 0.14);
}
.confirm-dialog-warning .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(217, 119, 6, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.1),
0 48px 64px -12px rgba(0, 0, 0, 0.14);
}
.confirm-dialog-info .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(13, 148, 136, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.1),
0 48px 64px -12px rgba(0, 0, 0, 0.14);
}
.confirm-dialog-privacy .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(139, 92, 246, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.1),
0 48px 64px -12px rgba(0, 0, 0, 0.14);
}
/* Type-specific icon colors with gradients */
.confirm-dialog-danger .confirm-dialog-icon {
background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
box-shadow:
0 4px 12px rgba(220, 38, 38, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.confirm-dialog-warning .confirm-dialog-icon {
background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
color: #d97706;
box-shadow:
0 4px 12px rgba(217, 119, 6, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.confirm-dialog-info .confirm-dialog-icon {
background: linear-gradient(145deg, #f0fdfa 0%, #ccfbf1 100%);
color: #0d9488;
box-shadow:
0 4px 12px rgba(13, 148, 136, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Divider line */
.confirm-dialog-divider {
height: 1px;
margin: 24px 28px 0 32px;
background: linear-gradient(90deg, var(--border-color, #e2e8f0) 0%, transparent 100%);
}
/* Action Buttons */
.confirm-dialog-actions {
display: flex;
gap: 12px;
padding: 24px 32px 32px 36px;
justify-content: flex-end;
}
.confirm-dialog-btn {
padding: 12px 28px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
overflow: hidden;
letter-spacing: 0.01em;
}
.confirm-dialog-btn:focus-visible {
outline: 2px solid var(--primary, #14b8a6);
outline-offset: 2px;
}
/* Cancel Button */
.confirm-dialog-cancel {
background: var(--surface-secondary, #f1f5f9);
/* Resting text was var(--text-secondary, #475569) on the pale #f1f5f9 fill —
~3.8:1, below WCAG AA (4.5:1). On the post-sign-in "Save your demo team?"
prompt this made the "Discard demo" button read as too faint until hovered
(user 2026-07-06). Darken the resting colour to --text-primary so it clears
AA at rest; hover still lifts it to #1e293b below. */
color: var(--text-primary, #1e293b);
}
.confirm-dialog-cancel:hover {
background: var(--surface-hover, #e2e8f0);
color: var(--text-primary, #1e293b);
transform: translateY(-1px);
}
.confirm-dialog-cancel:active {
}
/* Confirm Button - Type specific with gradients */
.confirm-dialog-confirm {
color: #fff;
min-width: 120px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.confirm-dialog-confirm::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
.confirm-dialog-confirm:active {
}
/* Danger confirm button */
.confirm-dialog-danger .confirm-dialog-confirm {
background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.confirm-dialog-danger .confirm-dialog-confirm:hover {
background: linear-gradient(145deg, #f87171 0%, #ef4444 100%);
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
transform: translateY(-2px);
}
/* Warning confirm button */
.confirm-dialog-warning .confirm-dialog-confirm {
background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}
.confirm-dialog-warning .confirm-dialog-confirm:hover {
background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 100%);
box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
transform: translateY(-2px);
}
/* Info confirm button */
.confirm-dialog-info .confirm-dialog-confirm {
background: linear-gradient(145deg, #14b8a6 0%, #0d9488 100%);
box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}
.confirm-dialog-info .confirm-dialog-confirm:hover {
background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 100%);
box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
transform: translateY(-2px);
}
/* Privacy = purple (for "Private" / hidden level) */
.confirm-dialog-privacy .confirm-dialog-content::before {
background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}
.confirm-dialog-privacy .confirm-dialog-icon {
background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%);
color: #7c3aed;
box-shadow:
0 4px 12px rgba(124, 58, 237, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.confirm-dialog-privacy .confirm-dialog-confirm {
background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}
.confirm-dialog-privacy .confirm-dialog-confirm:hover {
background: linear-gradient(145deg, #a78bfa 0%, #8b5cf6 100%);
box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
transform: translateY(-2px);
}
/* Share = green (for "Shared" / full visibility level) */
.confirm-dialog-share .confirm-dialog-content::before {
background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
}
.confirm-dialog-share .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(22, 163, 74, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.1),
0 48px 64px -12px rgba(0, 0, 0, 0.14);
}
.confirm-dialog-share .confirm-dialog-icon {
background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
color: #16a34a;
box-shadow:
0 4px 12px rgba(22, 163, 74, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.confirm-dialog-share .confirm-dialog-confirm {
background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}
.confirm-dialog-share .confirm-dialog-confirm:hover {
background: linear-gradient(145deg, #4ade80 0%, #22c55e 100%);
box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
transform: translateY(-2px);
}
/* ============================================
DARK MODE
============================================ */
body.dark-mode .confirm-dialog-modal {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
}
body.dark-mode .confirm-dialog-content {
background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%);
}
body.dark-mode .confirm-dialog-danger .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(239, 68, 68, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 4px 6px rgba(0, 0, 0, 0.2),
0 20px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .confirm-dialog-warning .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(245, 158, 11, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 4px 6px rgba(0, 0, 0, 0.2),
0 20px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .confirm-dialog-info .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(20, 184, 166, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 4px 6px rgba(0, 0, 0, 0.2),
0 20px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .confirm-dialog-privacy .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(139, 92, 246, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 4px 6px rgba(0, 0, 0, 0.2),
0 20px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .confirm-dialog-title {
color: #f8fafc;
}
body.dark-mode .confirm-dialog-message {
color: #94a3b8;
}
body.dark-mode .confirm-dialog-divider {
background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 100%);
}
body.dark-mode .confirm-dialog-cancel {
background: rgba(255, 255, 255, 0.05);
color: #94a3b8;
}
body.dark-mode .confirm-dialog-cancel:hover {
background: rgba(255, 255, 255, 0.1);
color: #f1f5f9;
}
/* Dark mode icon backgrounds */
body.dark-mode .confirm-dialog-danger .confirm-dialog-icon {
background: linear-gradient(145deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.15) 100%);
color: #f87171;
box-shadow:
0 4px 12px rgba(239, 68, 68, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.dark-mode .confirm-dialog-warning .confirm-dialog-icon {
background: linear-gradient(145deg, rgba(245, 158, 11, 0.2) 0%, rgba(180, 83, 9, 0.15) 100%);
color: #fbbf24;
box-shadow:
0 4px 12px rgba(245, 158, 11, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.dark-mode .confirm-dialog-info .confirm-dialog-icon {
background: linear-gradient(145deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%);
color: #2dd4bf;
box-shadow:
0 4px 12px rgba(20, 184, 166, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.dark-mode .confirm-dialog-privacy .confirm-dialog-icon {
background: linear-gradient(145deg, rgba(139, 92, 246, 0.2) 0%, rgba(109, 40, 217, 0.15) 100%);
color: #a78bfa;
box-shadow:
0 4px 12px rgba(139, 92, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.dark-mode .confirm-dialog-share .confirm-dialog-content {
box-shadow:
inset 0 0 0 1px rgba(34, 197, 94, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 4px 6px rgba(0, 0, 0, 0.2),
0 20px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .confirm-dialog-share .confirm-dialog-icon {
background: linear-gradient(145deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
color: #4ade80;
box-shadow:
0 4px 12px rgba(34, 197, 94, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ============================================
RESPONSIVE - Mobile
============================================ */
@media (max-width: 480px) {
.confirm-dialog-modal {
padding: 0;
align-items: flex-end;
}
.confirm-dialog-content {
max-width: 100%;
border-radius: 24px 24px 0 0;
animation: confirmDialogSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confirm-dialog-content::before {
display: none;
}
/* Top accent bar for mobile */
.confirm-dialog-content::after {
content: '';
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--border-color, #cbd5e1);
}
@keyframes confirmDialogSlideUp {
0% {
opacity: 0;
transform: translateY(100%);
}
60% {
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.confirm-dialog-header {
padding: 32px 24px 0;
flex-direction: column;
align-items: center;
text-align: center;
}
.confirm-dialog-header-content {
padding-top: 16px;
}
.confirm-dialog-icon {
width: 64px;
height: 64px;
font-size: 28px;
border-radius: 18px;
}
.confirm-dialog-title {
font-size: 20px;
}
.confirm-dialog-message {
font-size: 15px;
}
.confirm-dialog-divider {
margin: 24px 24px 0;
background: var(--border-color, #e2e8f0);
}
.confirm-dialog-actions {
flex-direction: column-reverse;
gap: 10px;
padding: 24px 24px calc(28px + env(safe-area-inset-bottom, 0px));
}
.confirm-dialog-btn {
width: 100%;
padding: 16px 24px;
font-size: 16px;
border-radius: 12px;
}
}
/* ============================================
PROPOSAL PREVIEW (inside confirm dialog)
Mirrors the review-inbox card layout (rc-*)
============================================ */
/* Use event-modal size for proposal preview confirm dialog */
.confirm-dialog-info .confirm-dialog-content:has(.proposal-preview) {
max-width: 680px;
/* The event/proposal preview card can be tall. .confirm-dialog-content has
`overflow:hidden` with no height cap, so when the card is taller than the
viewport the bottom of the box — the actions footer and its bottom padding —
was being CLIPPED, reading as "Back to edit has no space at the bottom"
(user 2026-06-26). Cap the height and let the whole box scroll instead of
clipping, so the Back-to-edit / Schedule footer is always reachable with its
padding intact. (The preview card lives inside the header's message element,
so we scroll the content box as a whole rather than an inner region.) */
max-height: calc(100vh - 40px);
overflow-y: auto;
}
/* Remove default header when showing proposal preview */
.confirm-dialog-info .confirm-dialog-content:has(.proposal-preview) .confirm-dialog-header {
padding: 24px 28px 0;
/* Tighter icon→title gap on the event/proposal confirm so the type icon sits
close to the "Confirm event" heading (user 2026-06-26: "reduce the space
between [icon] and Confirm"). */
gap: 10px;
}
.proposal-preview {
text-align: left;
font-size: 13px;
line-height: 1.5;
padding: 0 4px;
}
/* When the dialog hosts a proposal/event preview, size its action buttons
to Review Center's .rc-actions-bar scale (--rc-radius-btn / --rc-font-secondary)
so the confirm card's actions read like RC buttons rather than the larger
generic confirm buttons. The teal .confirm-dialog-info .confirm-dialog-confirm
gradient is kept as-is. Degrades gracefully where :has() is unsupported. */
.confirm-dialog-info .confirm-dialog-content:has(.proposal-preview) .confirm-dialog-btn {
border-radius: var(--rc-radius-btn, 6px);
font-size: var(--rc-font-secondary, 12px);
padding: 8px 16px;
}
/* ---- CARD: full-width structured card ----
Adopts the Find Times hero chrome (.vm-results-hero-card,
column-settings.css) so the confirm card reads as part of the same
decision surface: teal-washed gradient, --primary-200 border, soft
teal shadow, 16px radius. */
.proposal-preview-card {
background: linear-gradient(180deg, rgba(20, 184, 166, 0.05) 0%, var(--card-bg-primary, #fff) 70%);
border: 1.5px solid var(--primary-200, #99f6e4);
border-radius: 16px;
box-shadow: 0 4px 16px rgba(20, 184, 166, 0.08);
padding: 0;
overflow: hidden;
}
/* ---- CARD HEADER: gradient banner with name & badges ----
Mirrors the Find Times verdict gradient (.vm-results-verdict) for a
calmer, on-brand banner instead of the old 3-stop teal block. */
.proposal-preview-card-header {
background: linear-gradient(180deg, rgba(20, 184, 166, 0.10) 0%, rgba(20, 184, 166, 0.03) 100%);
border-bottom: 1px solid var(--primary-200, #99f6e4);
padding: 16px 20px;
}
/* ---- VERDICT HEADER (optional, additive) ----
Cloned from Find Times' .vm-results-verdict (column-settings.css) so a
proposal/event confirm card can lead with the same decision read. Rendered
as a sibling immediately inside .proposal-preview-card, before the card
header. The card is unchanged if the JS never emits this element. Sized a
touch smaller than Find Times (1.2rem vs 1.35rem, 14px vs 18px) so it fits
the confirm dialog without pushing actions below the fold. */
.proposal-preview-verdict {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 18px;
margin: 0;
border-bottom: 1px solid var(--primary-200, #99f6e4);
background: linear-gradient(180deg, rgba(20, 184, 166, 0.10) 0%, rgba(20, 184, 166, 0.03) 100%);
}
.proposal-preview-verdict-decision {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.proposal-preview-verdict-verb {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--primary-700, #0f766e);
}
.proposal-preview-verdict-slot {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text-primary, #1f2937);
}
.proposal-preview-verdict-confidence {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--primary-700, #0f766e);
}
.proposal-preview-verdict-confidence i { font-size: 0.8rem; }
/* Tier accents, copied from .vm-results-verdict[data-confidence] */
.proposal-preview-verdict[data-confidence="close"] {
border-color: #bfdbfe;
background: linear-gradient(180deg, rgba(59, 130, 246, 0.10) 0%, rgba(59, 130, 246, 0.03) 100%);
}
.proposal-preview-verdict[data-confidence="close"] .proposal-preview-verdict-verb,
.proposal-preview-verdict[data-confidence="close"] .proposal-preview-verdict-confidence { color: #1d4ed8; }
.proposal-preview-verdict[data-confidence="tied"] {
border-color: #fde68a;
background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.03) 100%);
}
.proposal-preview-verdict[data-confidence="tied"] .proposal-preview-verdict-verb,
.proposal-preview-verdict[data-confidence="tied"] .proposal-preview-verdict-confidence { color: #b45309; }
.proposal-preview-verdict[data-confidence="none"] {
border-color: var(--slate-300, #cbd5e1);
background: linear-gradient(180deg, rgba(100, 116, 139, 0.10) 0%, rgba(100, 116, 139, 0.03) 100%);
}
.proposal-preview-verdict[data-confidence="none"] .proposal-preview-verdict-verb,
.proposal-preview-verdict[data-confidence="none"] .proposal-preview-verdict-confidence { color: var(--slate-600, #475569); }
.proposal-preview-title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.proposal-preview-type-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 9999px;
white-space: nowrap;
letter-spacing: 0.2px;
}
.proposal-preview-type-badge.type-work {
background: rgba(20, 184, 166, 0.12);
color: #0d9488;
border: 1px solid rgba(20, 184, 166, 0.25);
}
.proposal-preview-type-badge.type-work i { color: #0d9488; }
.proposal-preview-type-badge.type-personal {
background: rgba(139, 92, 246, 0.1);
color: #7c3aed;
border: 1px solid rgba(139, 92, 246, 0.25);
}
.proposal-preview-type-badge.type-personal i { color: #7c3aed; }
.proposal-preview-name {
font-size: 17px;
font-weight: 700;
color: var(--text-primary, #0f172a);
margin: 0;
letter-spacing: -0.01em;
}
.proposal-preview-title-right {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
}
.proposal-preview-mode-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.8);
color: var(--slate-500, #64748b);
border: 1px solid var(--slate-200, #e2e8f0);
backdrop-filter: blur(4px);
}
.proposal-preview-mode-badge i {
font-size: 10px;
}
/* ---- META ROW: icon items inline ---- */
.proposal-preview-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
font-size: 12px;
color: var(--slate-600, #475569);
}
.proposal-preview-meta > span {
white-space: nowrap;
}
.proposal-preview-meta > span:not(:last-child)::after {
content: "\00B7";
margin: 0 6px;
color: var(--slate-300, #cbd5e1);
}
/* ---- CARD BODY: two-column grid ---- */
.proposal-preview-card-body {
padding: 16px 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* ---- SECTION blocks inside body ---- */
.proposal-preview-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.proposal-preview-section.full-width {
grid-column: 1 / -1;
}
.proposal-preview-section-label {
font-size: 10px;
font-weight: 700;
color: var(--slate-400, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: 6px;
}
.proposal-preview-section-label i {
font-size: 10px;
color: var(--slate-400, #94a3b8);
}
/* ---- LOCATION LINE ---- */
.proposal-preview-location {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--slate-500, #64748b);
}
.proposal-preview-location i {
font-size: 10px;
color: var(--slate-400, #94a3b8);
flex-shrink: 0;
}
.proposal-preview-location a {
color: #0d9488;
text-decoration: none;
word-break: break-all;
}
.proposal-preview-location a:hover {
text-decoration: underline;
}
/* ---- PARTICIPANTS: inline chips ---- */
.proposal-preview-participants {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.proposal-preview-participant {
display: inline-flex;
align-items: center;
gap: 5px;
background: #fff;
border: 1px solid var(--slate-200, #e2e8f0);
border-radius: 9999px;
padding: 3px 10px 3px 3px;
font-size: 11px;
color: var(--slate-600, #475569);
font-weight: 500;
}
.proposal-preview-participant .participant-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #99f6e4 0%, #5eead4 100%);
color: #0f766e;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-transform: uppercase;
}
.proposal-preview-participant.all-members {
background: rgba(20, 184, 166, 0.06);
border-color: rgba(20, 184, 166, 0.2);
color: #0d9488;
font-weight: 600;
padding: 4px 12px;
}
.proposal-preview-participant.all-members .participant-avatar {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
color: #fff;
}
.proposal-preview-participant.overflow-chip {
background: transparent;
border: 1px dashed var(--slate-300, #cbd5e1);
color: var(--slate-400, #94a3b8);
font-weight: 500;
padding: 4px 8px;
}
/* ---- TIME SLOTS: structured list ---- */
.proposal-preview-slots-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.proposal-preview-slots-label {
font-size: 10px;
font-weight: 700;
color: var(--slate-400, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: 6px;
}
.proposal-preview-slots-label i {
font-size: 10px;
}
.proposal-preview-slots {
display: flex;
flex-direction: column;
gap: 4px;
}
.proposal-preview-slot {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--slate-200, #e2e8f0);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
color: var(--slate-600, #475569);
white-space: nowrap;
transition: border-color 0.15s ease;
}
.proposal-preview-slot:hover {
border-color: rgba(20, 184, 166, 0.3);
}
.proposal-preview-slot .slot-date {
font-weight: 600;
color: var(--text-primary, #0f172a);
}
.proposal-preview-slot .slot-time {
color: #0d9488;
font-weight: 600;
}
.proposal-preview-slot .slot-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--slate-300, #cbd5e1);
flex-shrink: 0;
}
/* ---- CARD FOOTER: fairness, notify, deadline ---- */
.proposal-preview-card-footer {
padding: 12px 20px;
border-top: 1px solid var(--slate-200, #e2e8f0);
background: var(--slate-50, #f8fafc);
display: flex;
flex-direction: column;
gap: 6px;
}
.proposal-preview-deadline,
.proposal-preview-fairness,
.proposal-preview-notify {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--slate-500, #64748b);
}
.proposal-preview-deadline i {
font-size: 11px;
color: var(--rc-status-tentative, #f59e0b);
}
.proposal-preview-fairness i {
font-size: 11px;
color: var(--primary-600, #0d9488);
}
/* Tone-aware fairness line, mirrors RC's .rc-fairness-consequence.
.is-attention (off-hours impact) shifts to the amber attention tone;
the neutral default ("No new hotspots.") keeps the calm --slate-500 text. */
.proposal-preview-fairness.is-attention {
color: #b45309;
}
.proposal-preview-fairness.is-attention i {
color: var(--rc-status-tentative, #f59e0b);
}
.proposal-preview-notify i {
font-size: 11px;
color: var(--slate-500, #64748b);
}
/* ---- META MODE INDICATOR (replaces old mode badge) ---- */
.proposal-preview-meta-mode {
color: var(--slate-500, #64748b);
font-weight: 500;
}
/* ---- SLOT CONFLICT / CLEAR CHIPS ---- */
.proposal-preview-slot .slot-conflict {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #b91c1c;
background: rgba(239, 68, 68, 0.08);
border-radius: 6px;
padding: 2px 6px;
}
.proposal-preview-slot .slot-conflict i {
font-size: 10px;
}
.proposal-preview-slot .slot-clear {
margin-left: auto;
display: inline-flex;
align-items: center;
font-size: 11px;
color: #16a34a;
}
.proposal-preview-slot .slot-clear i {
font-size: 11px;
}
body.dark-mode .proposal-preview-fairness,
body.dark-mode .proposal-preview-notify {
color: var(--slate-400, #94a3b8);
}
body.dark-mode .proposal-preview-fairness i {
color: #2dd4bf;
}
body.dark-mode .proposal-preview-meta-mode {
color: var(--slate-400, #94a3b8);
}
body.dark-mode .proposal-preview-slot .slot-conflict {
color: #fca5a5;
background: rgba(239, 68, 68, 0.12);
}
body.dark-mode .proposal-preview-slot .slot-clear {
color: #4ade80;
}
/* ---- RESPONSIVE: Stack on small screens ---- */
@media (max-width: 580px) {
.confirm-dialog-info .confirm-dialog-content:has(.proposal-preview) {
max-width: 100%;
}
.proposal-preview-card-body {
grid-template-columns: 1fr;
gap: 12px;
}
.proposal-preview-name {
font-size: 15px;
}
}
/* ============================================
PROPOSAL PREVIEW - Dark Mode
============================================ */
body.dark-mode .proposal-preview-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(20, 184, 166, 0.35);
box-shadow: 0 4px 16px rgba(20, 184, 166, 0.18);
}
body.dark-mode .proposal-preview-card-header {
background: linear-gradient(180deg, rgba(20, 184, 166, 0.16) 0%, rgba(20, 184, 166, 0.05) 100%);
border-bottom-color: rgba(20, 184, 166, 0.35);
}
/* Dark verdict header, mirrors Find Times' dark .vm-results-verdict. */
body.dark-mode .proposal-preview-verdict {
border-bottom-color: rgba(20, 184, 166, 0.35);
background: linear-gradient(180deg, rgba(20, 184, 166, 0.16) 0%, rgba(20, 184, 166, 0.05) 100%);
}
body.dark-mode .proposal-preview-verdict-slot {
color: var(--text-primary, #f1f5f9);
}
body.dark-mode .proposal-preview-verdict-verb,
body.dark-mode .proposal-preview-verdict-confidence {
color: #5eead4;
}
body.dark-mode .proposal-preview-verdict[data-confidence="close"] .proposal-preview-verdict-verb,
body.dark-mode .proposal-preview-verdict[data-confidence="close"] .proposal-preview-verdict-confidence { color: #93c5fd; }
body.dark-mode .proposal-preview-verdict[data-confidence="tied"] .proposal-preview-verdict-verb,
body.dark-mode .proposal-preview-verdict[data-confidence="tied"] .proposal-preview-verdict-confidence { color: #fcd34d; }
body.dark-mode .proposal-preview-name {
color: #f1f5f9;
}
body.dark-mode .proposal-preview-type-badge.type-work {
background: rgba(45, 212, 191, 0.12);
color: #2dd4bf;
border-color: rgba(45, 212, 191, 0.2);
}
body.dark-mode .proposal-preview-type-badge.type-personal {
background: rgba(167, 139, 250, 0.1);
color: #a78bfa;
border-color: rgba(167, 139, 250, 0.2);
}
body.dark-mode .proposal-preview-mode-badge {
background: rgba(255, 255, 255, 0.06);
color: var(--slate-400, #94a3b8);
border-color: rgba(255, 255, 255, 0.08);
backdrop-filter: none;
}
body.dark-mode .proposal-preview-meta {
color: var(--slate-400, #94a3b8);
}
body.dark-mode .proposal-preview-meta > span:not(:last-child)::after {
color: var(--slate-600, #475569);
}
body.dark-mode .proposal-preview-section-label {
color: #64748b;
}
body.dark-mode .proposal-preview-section-label i {
color: #64748b;
}
body.dark-mode .proposal-preview-location {
color: var(--slate-400, #94a3b8);
}
body.dark-mode .proposal-preview-location i {
color: var(--slate-500, #64748b);
}
body.dark-mode .proposal-preview-location a {
color: #2dd4bf;
}
body.dark-mode .proposal-preview-participant {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
}
body.dark-mode .proposal-preview-participant .participant-avatar {
background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
color: #ccfbf1;
}
body.dark-mode .proposal-preview-participant.all-members {
background: rgba(20, 184, 166, 0.08);
border-color: rgba(20, 184, 166, 0.15);
color: #2dd4bf;
}
body.dark-mode .proposal-preview-participant.all-members .participant-avatar {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
color: #fff;
}
body.dark-mode .proposal-preview-participant.overflow-chip {
background: transparent;
border-color: rgba(255, 255, 255, 0.1);
color: #64748b;
}
body.dark-mode .proposal-preview-slots-label {
color: #64748b;
}
body.dark-mode .proposal-preview-slot {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
color: #cbd5e1;
}
body.dark-mode .proposal-preview-slot:hover {
border-color: rgba(45, 212, 191, 0.2);
}
body.dark-mode .proposal-preview-slot .slot-date {
color: #f1f5f9;
}
body.dark-mode .proposal-preview-slot .slot-time {
color: #2dd4bf;
}
body.dark-mode .proposal-preview-slot .slot-dot {
background: #64748b;
}
body.dark-mode .proposal-preview-card-footer {
background: rgba(255, 255, 255, 0.02);
border-top-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .proposal-preview-deadline {
color: #64748b;
}
body.dark-mode .proposal-preview-deadline i {
color: #fbbf24;
}
body.dark-mode .proposal-preview-fairness.is-attention {
color: #fbbf24;
}
body.dark-mode .proposal-preview-fairness.is-attention i {
color: #fbbf24;
}
/* ============================================
SEND PROPOSAL / POLL CONFIRM (.propose-confirm-*)
============================================
The last screen before a proposal reaches real people. It shipped as raw
markup with NO styling of its own (2026-07-30), so it rendered at browser
defaults: a bare summary, an unstyled
of slots, and impact verdicts
as plain red text — visibly out of family with every other decision surface.
This adopts the .proposal-preview-* language already defined above (teal-
washed card, --primary-200 border, uppercase section labels, slot rows,
slate footer) so the two confirm surfaces read as one system. No new tokens
and no new colour vocabulary: impact tones reuse the exact status colours
the board, avg-bar and Review Center already use for the same meanings. */
.confirm-dialog-info .confirm-dialog-content:has(.propose-confirm-summary) {
max-width: 560px;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
/* ONE logical card (user 2026-08-06: the confirm area read as two separate
segments). The wrapper carries the card chrome; essentials, options and
next-steps are sections of the same card, separated by hairlines. */
.propose-confirm-summary {
/* FLEX, NOT BLOCK (2026-08-17). The card's markup is a template literal, so
the newlines between its sections are real whitespace text nodes. As a
block container those became 16px inline line boxes, leaving a ~20px empty
strip between the header and the options even after the duplicate
essentials rule in style.css was removed. A flex container drops
whitespace-only children, so the sections sit flush and the border-top on
.propose-confirm-options is the only separator. */
display: flex;
flex-direction: column;
text-align: left;
font-size: 13px;
line-height: 1.5;
background: linear-gradient(180deg, rgba(20, 184, 166, 0.05) 0%, var(--card-bg-primary, #fff) 70%);
border: 1.5px solid var(--primary-200, #99f6e4);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(20, 184, 166, 0.08);
overflow: hidden;
}
/* ---- ESSENTIALS: the WHO / WHERE / WHAT header section ---- */
/* Three short facts (type+title, who, mode) were costing 121px because each sat
on its own full-width row with an 8px gutter. WHO and MODE are both short
metadata, so they share a wrapping row — the header shrinks to what it
actually says. (2026-08-06) */
.propose-confirm-essentials {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 5px;
}
.propose-confirm-essentials .propose-confirm-detail {
display: inline-flex;
}
/* WHO / WHERE / MODE flow together and wrap only when they must. */
.propose-confirm-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 14px;
}
/* ---- OPTIONS: scope line + slot list, the card body ---- */
.propose-confirm-options {
padding: 12px 16px 14px;
border-top: 1px solid var(--slate-200, #e2e8f0);
display: flex;
flex-direction: column;
gap: 8px;
}
.propose-confirm-title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.propose-confirm-type-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 9999px;
white-space: nowrap;
letter-spacing: 0.2px;
background: rgba(20, 184, 166, 0.12);
color: #0d9488;
border: 1px solid rgba(20, 184, 166, 0.25);
}
.propose-confirm-type-badge i { font-size: 10px; }
.propose-confirm-name {
font-size: 16px;
font-weight: 700;
color: var(--text-primary, #0f172a);
letter-spacing: -0.01em;
min-width: 0;
overflow-wrap: anywhere;
}
.propose-confirm-detail {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 12px;
color: var(--slate-600, #475569);
}
.propose-confirm-detail i {
font-size: 11px;
color: var(--slate-400, #94a3b8);
flex-shrink: 0;
width: 13px;
text-align: center;
}
.propose-confirm-detail a {
color: #0d9488;
text-decoration: none;
word-break: break-all;
}
.propose-confirm-detail a:hover { text-decoration: underline; }
.propose-confirm-more {
color: var(--slate-400, #94a3b8);
font-weight: 500;
}
/* ---- SCOPE LINE: "You're sharing 1 option across 1 day for 3 attendees" ----
Reads as a section label, not body copy — it introduces the slot list. */
.propose-confirm-scope {
margin: 0;
font-size: 12px;
color: var(--slate-500, #64748b);
}
.propose-confirm-scope strong {
color: var(--text-primary, #0f172a);
font-weight: 700;
}
/* ---- SLOT LIST: one row per proposed option ---- */
.propose-confirm-slot-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.propose-confirm-slot-list li {
background: var(--card-bg-primary, #fff);
border: 1px solid var(--slate-200, #e2e8f0);
border-left: 3px solid var(--slate-200, #e2e8f0);
border-radius: 10px;
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--slate-600, #475569);
}
.propose-confirm-slot-list li strong {
color: var(--text-primary, #0f172a);
font-weight: 700;
}
/* Date + time range on one line. The - is a column flex container so the
verdict and spread stack below; without this wrapper the inline date and
range become separate flex items and break across two lines. */
.propose-confirm-when {
display: block;
color: var(--slate-600, #475569);
}
/* Impact verdict — the sentence that says what this slot ASKS of people.
Left border carries the same tone so the row is scannable at a glance. */
.propose-confirm-impact {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 12px;
font-weight: 600;
}
.propose-confirm-impact::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 10px;
flex-shrink: 0;
}
/* Asleep — reuses the danger tone (never raw #f00 browser red). */
.propose-confirm-impact.impact-high { color: #b91c1c; }
.propose-confirm-impact.impact-high::before { content: '\f186'; }
.propose-confirm-slot-list li[data-impact="high"] {
border-left-color: #ef4444;
background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, var(--card-bg-primary, #fff) 60%);
}
/* Outside working hours — the amber attention tone used by
.proposal-preview-fairness.is-attention and RC's tentative status. */
.propose-confirm-impact.impact-notable { color: #b45309; }
.propose-confirm-impact.impact-notable::before { content: '\f017'; }
.propose-confirm-slot-list li[data-impact="notable"] {
border-left-color: var(--rc-status-tentative, #f59e0b);
background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, var(--card-bg-primary, #fff) 60%);
}
/* Works for everyone — brand teal, matching .slot-clear's confirmed read. */
.propose-confirm-impact.impact-ok { color: #0f766e; }
.propose-confirm-impact.impact-ok::before { content: '\f00c'; }
.propose-confirm-slot-list li[data-impact="ok"] {
border-left-color: var(--primary-400, #2dd4bf);
background: linear-gradient(90deg, rgba(20, 184, 166, 0.05) 0%, var(--card-bg-primary, #fff) 60%);
}
/* ---- HOW MANY CONFLICTS THIS OPTION WOULD CREATE ----
2026-08-15 (owner: "should I not know how many conflicts each event may
have when creating a proposal ... perhaps the confirmation screen").
Rendered by event-modal-manager's _conflictNoteHtml, and ONLY when the
count is nonzero, so a clean option stays a clean row.
RED, and red only here: in this product red means conflict/danger and
nothing else. It must not read as the amber "outside hours" impact tone
next to it, because those say different things: amber is what the time
COSTS people, red is what it COLLIDES with.
Anchored on --shading-busy, the canonical red the owner restored on
2026-08-15 when busy split into two tokens. Do NOT use var(--danger): it
is aliased to --status-busy, which is now SLATE, so the warning would
paint grey. */
.propose-confirm-conflicts {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--shading-busy, #dc2626);
}
.propose-confirm-conflicts i {
font-size: 10px;
flex-shrink: 0;
}
/* A colliding option earns the red rail regardless of its impact tone: the
collision is the more actionable fact. Wins on specificity over the
[data-impact] rails above because it is a two-attribute selector. */
.propose-confirm-slot-list li[data-conflicts][data-impact],
.propose-confirm-slot-list li[data-conflicts] {
border-left-color: var(--shading-busy, #dc2626);
background: linear-gradient(90deg, rgba(220, 38, 38, 0.07) 0%, var(--card-bg-primary, #fff) 60%);
}
body.dark-mode .propose-confirm-conflicts {
color: #fca5a5;
}
body.dark-mode .propose-confirm-slot-list li[data-conflicts][data-impact],
body.dark-mode .propose-confirm-slot-list li[data-conflicts] {
border-left-color: #f87171;
background: linear-gradient(90deg, rgba(220, 38, 38, 0.16) 0%, transparent 60%);
}
/* Per-attendee local-hour spread — quiet supporting detail. */
/* ---- WHO IS IN, AND WHAT TIME IT IS FOR THEM ----
The attendee roster per option. Chips rather than a run-on line so the group
is countable at a glance, and so the people the time actually costs can be
marked without a second explanatory sentence. */
.propose-confirm-spread {
display: flex;
flex-wrap: wrap;
gap: 4px;
line-height: 1.4;
}
.propose-confirm-person {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 2px 7px;
border-radius: 10px;
background: var(--slate-100, #f1f5f9);
color: var(--slate-600, #475569);
font-size: 11px;
white-space: nowrap;
}
.propose-confirm-person-time {
font-weight: 600;
color: var(--slate-700, #334155);
font-variant-numeric: tabular-nums;
}
/* Asleep is the one state worth interrupting for — it is the difference
between "inconvenient" and "do not send this". Stretched is a softer amber.
Both borrow the canonical status hues rather than inventing a third scale. */
.propose-confirm-person.is-asleep {
background: color-mix(in srgb, var(--status-sleep, #7c3aed) 14%, transparent);
color: var(--status-sleep, #7c3aed);
}
.propose-confirm-person.is-asleep .propose-confirm-person-time { color: inherit; }
.propose-confirm-person.is-stretched {
background: color-mix(in srgb, var(--status-tentative, #f59e0b) 16%, transparent);
color: #b45309;
}
.propose-confirm-person.is-stretched .propose-confirm-person-time { color: inherit; }
body.dark-mode .propose-confirm-person {
background: rgba(148, 163, 184, 0.16);
color: var(--slate-300, #cbd5e1);
}
body.dark-mode .propose-confirm-person-time { color: var(--slate-100, #f1f5f9); }
/* ---- WHAT HAPPENS NEXT ---- */
/* Was a full-width tinted footer band with its own border and icon, restating
the attendee count the scope line above had already given. It is now a quiet
continuation of that same sentence (2026-08-06, user: "approval etc can be
more minimal and in the above row space"), so the card ends on ONE statement
rather than two competing ones. */
.propose-confirm-next {
/* Explicitly inline: an earlier revision made this a flex FOOTER BAND, and a
stale `display:flex` here turns a mid-sentence continuation into its own
block, reintroducing the extra row this change removed. */
display: inline;
color: var(--slate-500, #64748b);
}
.propose-confirm-next strong {
color: var(--slate-700, #334155);
font-weight: 600;
}
body.dark-mode .propose-confirm-next { color: var(--slate-400, #94a3b8); }
body.dark-mode .propose-confirm-next strong { color: var(--slate-200, #e2e8f0); }
/* ---- DARK MODE ---- */
body.dark-mode .propose-confirm-summary {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(20, 184, 166, 0.35);
box-shadow: 0 4px 16px rgba(20, 184, 166, 0.18);
}
body.dark-mode .propose-confirm-options {
border-top-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .propose-confirm-name { color: #f1f5f9; }
body.dark-mode .propose-confirm-type-badge {
background: rgba(45, 212, 191, 0.12);
color: #2dd4bf;
border-color: rgba(45, 212, 191, 0.2);
}
body.dark-mode .propose-confirm-detail { color: var(--slate-400, #94a3b8); }
body.dark-mode .propose-confirm-detail i { color: var(--slate-500, #64748b); }
body.dark-mode .propose-confirm-detail a { color: #2dd4bf; }
body.dark-mode .propose-confirm-more { color: #64748b; }
body.dark-mode .propose-confirm-scope { color: var(--slate-400, #94a3b8); }
body.dark-mode .propose-confirm-scope strong { color: #f1f5f9; }
body.dark-mode .propose-confirm-slot-list li {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
border-left-color: rgba(255, 255, 255, 0.12);
color: #cbd5e1;
}
body.dark-mode .propose-confirm-slot-list li strong { color: #f1f5f9; }
body.dark-mode .propose-confirm-when { color: #cbd5e1; }
body.dark-mode .propose-confirm-impact.impact-high { color: #fca5a5; }
body.dark-mode .propose-confirm-slot-list li[data-impact="high"] {
background: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0%, rgba(255, 255, 255, 0.04) 60%);
}
body.dark-mode .propose-confirm-impact.impact-notable { color: #fcd34d; }
body.dark-mode .propose-confirm-slot-list li[data-impact="notable"] {
background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(255, 255, 255, 0.04) 60%);
}
body.dark-mode .propose-confirm-impact.impact-ok { color: #5eead4; }
body.dark-mode .propose-confirm-slot-list li[data-impact="ok"] {
background: linear-gradient(90deg, rgba(20, 184, 166, 0.12) 0%, rgba(255, 255, 255, 0.04) 60%);
}
body.dark-mode .propose-confirm-spread { color: var(--slate-400, #94a3b8); }
/* (The dark-mode band styling for .propose-confirm-next was removed with the
band itself — it is now an inline clause, coloured by the rule above.) */
/* ---- RESPONSIVE ---- */
@media (max-width: 580px) {
.confirm-dialog-info .confirm-dialog-content:has(.propose-confirm-summary) {
max-width: 100%;
}
.propose-confirm-name { font-size: 15px; }
}
/* ---- HIGH CONTRAST ----
The tinted row washes carry meaning, so restore an explicit border and
drop the gradient where the user has asked for maximum contrast. */
@media (prefers-contrast: high) {
.propose-confirm-slot-list li {
background: var(--card-bg-primary, #fff);
border-width: 2px;
border-left-width: 4px;
}
}
/* ============================================
REDUCED MOTION
============================================ */
@media (prefers-reduced-motion: reduce) {
.confirm-dialog-content {
animation: none;
}
.confirm-dialog-btn {
transition: none;
}
.confirm-dialog-modal {
transition: none;
}
.confirm-dialog-icon::after {
animation: none;
}
}
/* ============================================
HIGH CONTRAST MODE
============================================ */
@media (prefers-contrast: high) {
.confirm-dialog-content {
border: 3px solid currentColor;
}
.confirm-dialog-content::before {
width: 6px;
}
.confirm-dialog-btn {
border: 2px solid transparent;
}
.confirm-dialog-cancel {
border-color: currentColor;
}
}