/* =================================================================== EVENT MODAL — Step 1: tokens, overlay, shell, typography, close ------------------------------------------------------------------- All selectors are namespaced `.evm-*` so nothing collides with the existing modal CSS in styles.css. Theming note: dark mode is applied to BOTH and in this app (index.html boot script hits documentElement before exists, main-settings.js keeps the two in sync), so every dark override below is written against `html.dark-mode, body.dark-mode`. =================================================================== */ /* ------------------------------------------------------------------- 1. TOKENS — LIGHT Modal-scoped aliases. Where a global token already says the right thing we point at it, so the modal follows the app design system. ------------------------------------------------------------------- */ :root { /* -- Scrim ------------------------------------------------------ */ --evm-overlay-bg: rgba(17, 17, 20, 0.34); --evm-overlay-blur: 8px; /* -- Surfaces --------------------------------------------------- */ --evm-surface: var(--bg-surface); /* modal body */ --evm-surface-bar: var(--bg-surface); /* header + footer bars */ --evm-surface-sunken: #F5F5F7; /* inactive chips, rows */ --evm-surface-hover: rgba(0, 0, 0, 0.045); /* -- Text ------------------------------------------------------- */ --evm-text: var(--text-main); /* title, field values */ --evm-text-secondary: var(--text-muted); /* field labels */ --evm-text-tertiary: var(--text-light); /* placeholders, meta */ /* -- Borders ---------------------------------------------------- */ --evm-border: rgba(0, 0, 0, 0.09); /* input + chip outline */ --evm-border-strong: rgba(0, 0, 0, 0.14); /* hover outline */ --evm-divider: var(--border-subtle); /* section rules */ /* -- Inputs ----------------------------------------------------- */ --evm-input-bg: #FFFFFF; --evm-input-bg-hover: #FCFCFD; --evm-input-border: var(--evm-border); --evm-input-placeholder: var(--text-light); /* -- Brand accent ---------------------------------------------- Defaults to the app accent (#0070F3) so the modal stays on-system. To match the indigo in the reference comp, override just this block: --evm-accent: #1D1DE8; --evm-accent-hover: #1616BE; */ --evm-accent: var(--accent); --evm-accent-hover: var(--accent-hover); --evm-accent-soft: var(--accent-soft); /* selected chip fill */ --evm-accent-ring: rgba(0, 112, 243, 0.22); /* focus ring */ --evm-accent-contrast: #FFFFFF; /* text on accent */ /* -- Priority badges ------------------------------------------- Idle = neutral. The colour only appears on the selected badge. */ --evm-prio-idle-bg: var(--evm-surface-sunken); --evm-prio-idle-fg: var(--evm-text-secondary); --evm-prio-idle-border: transparent; --evm-prio-high-bg: rgba(255, 59, 48, 0.10); --evm-prio-high-fg: #D8352A; --evm-prio-high-border: rgba(255, 59, 48, 0.24); --evm-prio-medium-bg: rgba(255, 149, 0, 0.13); --evm-prio-medium-fg: #C8730A; --evm-prio-medium-border: rgba(255, 149, 0, 0.30); --evm-prio-low-bg: rgba(52, 199, 89, 0.12); --evm-prio-low-fg: #1E8F3E; --evm-prio-low-border: rgba(52, 199, 89, 0.26); /* -- Shape, depth, motion --------------------------------------- */ --evm-radius: 20px; /* modal corner */ --evm-radius-field: 12px; /* inputs, chips */ --evm-radius-pill: 999px; --evm-shadow: 0 32px 80px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06); --evm-ease: cubic-bezier(0.32, 0.72, 0, 1); --evm-duration: 260ms; /* -- Metrics ---------------------------------------------------- */ --evm-width: 480px; --evm-pad-x: 28px; --evm-pad-y: 24px; --evm-gap: 20px; /* between field groups */ --evm-z: 10040; } /* ------------------------------------------------------------------- 2. TOKENS — DARK ------------------------------------------------------------------- */ html.dark-mode, body.dark-mode { --evm-overlay-bg: rgba(0, 0, 0, 0.62); --evm-overlay-blur: 10px; /* Literals, not var(--text-main) aliases. styles.css declares its dark palette on `body.dark-mode` only, so on those globals still hold their LIGHT values — and section 1 declares the --evm-* aliases on :root, which is . Aliasing here would resolve to light. */ --evm-text: #F5F5F7; --evm-text-secondary: #98989D; --evm-text-tertiary: #8E8E93; --evm-input-placeholder: #8E8E93; --evm-accent: #0A84FF; --evm-accent-hover: #3395FF; --evm-accent-soft: rgba(10, 132, 255, 0.18); --evm-divider: rgba(255, 255, 255, 0.1); /* Lift the modal off the pure-black body so it reads as a sheet. */ --evm-surface: #1C1C1E; --evm-surface-bar: #1C1C1E; --evm-surface-sunken: #2C2C2E; --evm-surface-hover: rgba(255, 255, 255, 0.07); --evm-border: rgba(255, 255, 255, 0.11); --evm-border-strong: rgba(255, 255, 255, 0.20); --evm-input-bg: #2C2C2E; --evm-input-bg-hover: #333336; --evm-accent-ring: rgba(10, 132, 255, 0.34); --evm-accent-contrast: #FFFFFF; --evm-prio-high-bg: rgba(255, 69, 58, 0.18); --evm-prio-high-fg: #FF6961; --evm-prio-high-border: rgba(255, 69, 58, 0.34); --evm-prio-medium-bg: rgba(255, 159, 10, 0.18); --evm-prio-medium-fg: #FFB340; --evm-prio-medium-border: rgba(255, 159, 10, 0.34); --evm-prio-low-bg: rgba(50, 215, 75, 0.18); --evm-prio-low-fg: #4CD964; --evm-prio-low-border: rgba(50, 215, 75, 0.32); --evm-shadow: 0 32px 80px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* ------------------------------------------------------------------- 3. OVERLAY ------------------------------------------------------------------- */ .evm-overlay { position: fixed; inset: 0; z-index: var(--evm-z); display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--evm-overlay-bg); -webkit-backdrop-filter: blur(var(--evm-overlay-blur)); backdrop-filter: blur(var(--evm-overlay-blur)); opacity: 0; transition: opacity var(--evm-duration) var(--evm-ease); overscroll-behavior: contain; } /* Deliberately NOT `visibility: hidden` here. Transitioning visibility leaves it computed as hidden on the frame the modal opens, which makes every descendant unfocusable — .focus() on the title input silently no-ops. The [hidden] attribute below is the hidden state instead; JS clears it before opening and re-applies it after the fade completes. */ .evm-overlay.is-open { opacity: 1; } /* Author `display:flex` above beats the UA rule for [hidden] regardless of specificity, so restate it — otherwise the overlay stays in the layout. */ .evm-overlay[hidden] { display: none; } /* ------------------------------------------------------------------- 4. MODAL SHELL Header and footer are pinned; only the body scrolls. ------------------------------------------------------------------- */ .evm-modal { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--evm-width); max-height: min(88vh, 860px); background: var(--evm-surface); border-radius: var(--evm-radius); box-shadow: var(--evm-shadow); overflow: hidden; transform: translateY(12px) scale(0.98); opacity: 0; transition: transform var(--evm-duration) var(--evm-ease), opacity var(--evm-duration) var(--evm-ease); } .evm-overlay.is-open .evm-modal { transform: translateY(0) scale(1); opacity: 1; } .evm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: var(--evm-pad-y) var(--evm-pad-x); background: var(--evm-surface-bar); border-bottom: 1px solid var(--evm-divider); } /* The

wraps body + footer, so it has to carry the column layout through — otherwise .evm-body's flex sizing has no flex parent and the pinned footer gets clipped by the modal's overflow:hidden. */ .evm-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .evm-body { flex: 1 1 auto; min-height: 0; padding: var(--evm-pad-y) var(--evm-pad-x); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ } .evm-body::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .evm-footer { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 18px var(--evm-pad-x); padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); background: var(--evm-surface-bar); border-top: 1px solid var(--evm-divider); } /* ------------------------------------------------------------------- 5. TYPOGRAPHY ------------------------------------------------------------------- */ .evm-modal { font-family: inherit; color: var(--evm-text); -webkit-font-smoothing: antialiased; } .evm-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--evm-text); } .evm-subtitle { margin: 4px 0 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--evm-text-secondary); } /* Section heading inside the body, e.g. "Iteration" */ .evm-section-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--evm-text); } /* Small grey label above each field */ .evm-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; color: var(--evm-text-secondary); } .evm-meta { font-size: 12px; line-height: 1.4; color: var(--evm-text-tertiary); } /* ------------------------------------------------------------------- 6. CLOSE BUTTON ------------------------------------------------------------------- */ .evm-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -2px -4px 0 0; /* optically align to the title cap-height */ padding: 0; border: 0; border-radius: var(--evm-radius-pill); background: var(--evm-surface-sunken); color: var(--evm-text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .evm-close:hover { background: var(--evm-surface-hover); color: var(--evm-text); } .evm-close:active { transform: scale(0.94); } .evm-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--evm-accent-ring); } .evm-close svg, .evm-close i { width: 16px; height: 16px; font-size: 15px; stroke-width: 2; pointer-events: none; } /* ------------------------------------------------------------------- 7. RESPONSIVE — bottom sheet on small screens ------------------------------------------------------------------- */ @media (max-width: 560px) { .evm-overlay { padding: 0; align-items: flex-end; } .evm-modal { max-width: none; max-height: 92vh; border-radius: var(--evm-radius) var(--evm-radius) 0 0; transform: translateY(100%); } .evm-overlay.is-open .evm-modal { transform: translateY(0); } :root { --evm-pad-x: 20px; --evm-pad-y: 20px; } } /* ------------------------------------------------------------------- 8. UTILITIES ------------------------------------------------------------------- */ /* Native input kept in the a11y tree but visually replaced by its label. NOT display:none — that would remove it from tab order and form data. */ .evm-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------------- 9. FORM PRIMITIVES ------------------------------------------------------------------- */ .evm-field { margin-bottom: var(--evm-gap); } .evm-field:last-child { margin-bottom: 0; } .evm-fieldset { min-width: 0; /* fieldsets refuse to shrink in flex/grid otherwise */ margin-inline: 0; padding: 0; border: 0; } .evm-fieldset > .evm-label { padding: 0; /* carries UA padding */ } .evm-required { color: var(--danger); } .evm-optional { font-weight: 400; color: var(--evm-text-tertiary); } .evm-section-title { padding-bottom: 12px; border-bottom: 1px solid var(--evm-divider); margin-bottom: var(--evm-gap); } /* -- Inputs -------------------------------------------------------- */ .evm-input { width: 100%; min-height: 46px; padding: 12px 14px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--evm-text); background: var(--evm-input-bg); border: 1px solid var(--evm-input-border); border-radius: var(--evm-radius-field); transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .evm-input::placeholder { color: var(--evm-input-placeholder); font-weight: 400; } .evm-input:hover:not(:focus) { border-color: var(--evm-border-strong); background: var(--evm-input-bg-hover); } .evm-input:focus, .evm-input:focus-visible { outline: none; border-color: var(--evm-accent); box-shadow: 0 0 0 3px var(--evm-accent-ring); } /* Only flag invalid fields the user has actually left */ .evm-input:user-invalid { border-color: var(--danger); } .evm-input--title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .evm-textarea { min-height: 88px; resize: vertical; line-height: 1.5; font-weight: 400; } /* -- Icon-prefixed input ------------------------------------------- */ .evm-input-wrap { position: relative; display: flex; flex: 1 1 0; min-width: 0; } .evm-input-wrap .evm-input { padding-left: 42px; } .evm-input-icon { position: absolute; top: 50%; left: 15px; /* date/time inputs are position:relative (below), and a later-in-DOM positioned sibling paints on top — so the icon needs to be lifted. */ z-index: 1; translate: 0 -50%; font-size: 15px; color: var(--evm-text-tertiary); pointer-events: none; transition: color var(--transition-fast); } .evm-input-wrap:focus-within .evm-input-icon { color: var(--evm-accent); } /* Participant search — leave room on the right for the clear button below */ #evmParticipantInput { padding-right: 34px; } /* Closes the suggestions dropdown; sits at the field's right edge */ .evm-input-clear { position: absolute; top: 50%; right: 6px; translate: 0 -50%; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--evm-radius-pill); background: var(--evm-surface-sunken); color: var(--evm-text-secondary); font-size: 11px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .evm-input-clear:hover { background: var(--evm-surface-hover); color: var(--evm-text); } .evm-input-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--evm-accent-ring); } /* Author `display:flex` above beats the UA rule for [hidden] regardless of specificity, so restate it — otherwise the clear button stays visible even when JS marks it hidden between interactions. */ .evm-input-clear[hidden] { display: none; } /* Date trigger — a button styled as an .evm-input, opens the shared custom calendar popover (window.dpOpen) instead of the native picker. */ .evm-date-trigger { appearance: none; -webkit-appearance: none; display: block; text-align: left; cursor: pointer; } .evm-date-trigger span { color: var(--evm-input-placeholder); } .evm-date-trigger.has-value span { color: var(--evm-text); } /* Time trigger — same idea as .evm-date-trigger, opens the shared hour/minute popover (window.tpOpen) instead of the native picker. */ .evm-time-trigger { appearance: none; -webkit-appearance: none; display: block; text-align: left; cursor: pointer; } .evm-time-trigger span { color: var(--evm-input-placeholder); } .evm-time-trigger.has-value span { color: var(--evm-text); } /* Side-by-side start/end time */ .evm-field-row { display: flex; gap: 12px; margin-top: 12px; } /* Date/time: drop the native indicator glyph but keep its hit area, stretched over the whole field so a click anywhere opens the picker. */ .evm-input[type="date"], .evm-input[type="time"] { position: relative; } .evm-input[type="date"]::-webkit-calendar-picker-indicator, .evm-input[type="time"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; } /* iOS refuses to centre date/time text without this */ .evm-input[type="date"]::-webkit-date-and-time-value, .evm-input[type="time"]::-webkit-date-and-time-value { text-align: left; } /* ------------------------------------------------------------------- 11. PRIORITY BADGES The native radio is nested INSIDE its label, so the selected state is `:has(input:checked)` rather than `:checked + label`. `:checked` is the SINGLE source of truth — deliberately no `.is-selected` class hook, since a static class in the markup stays lit after JS changes the checked radio, leaving two chips highlighted at once. ------------------------------------------------------------------- */ .evm-priority-group { display: flex; flex-wrap: wrap; gap: 8px; } .evm-priority { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--evm-prio-idle-fg); background: var(--evm-prio-idle-bg); border: 1px solid var(--evm-prio-idle-border); border-radius: var(--evm-radius-field); cursor: pointer; user-select: none; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } .evm-priority i { font-size: 12px; } .evm-priority:hover { background: var(--evm-surface-hover); } /* Keyboard focus lands on the hidden radio — surface it on the label */ .evm-priority:focus-within { box-shadow: 0 0 0 3px var(--evm-accent-ring); } .evm-priority--high:has(input:checked) { color: var(--evm-prio-high-fg); background: var(--evm-prio-high-bg); border-color: var(--evm-prio-high-border); } .evm-priority--medium:has(input:checked) { color: var(--evm-prio-medium-fg); background: var(--evm-prio-medium-bg); border-color: var(--evm-prio-medium-border); } .evm-priority--low:has(input:checked) { color: var(--evm-prio-low-fg); background: var(--evm-prio-low-bg); border-color: var(--evm-prio-low-border); } /* ------------------------------------------------------------------- 12. PARTICIPANTS ------------------------------------------------------------------- */ .evm-participant-list, .evm-participant-results { list-style: none; margin: 4px 0 0; padding: 0; } /* Teammate picker — anchored under the input, not a floating popover, so it can't be clipped by the body's overflow. */ .evm-participant-results { margin-top: 6px; padding: 4px; background: var(--evm-input-bg); border: 1px solid var(--evm-border); border-radius: var(--evm-radius-field); box-shadow: var(--evm-shadow); } .evm-suggestion { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--evm-text); border-radius: 8px; cursor: pointer; } .evm-suggestion:hover, .evm-suggestion:focus-visible { outline: none; background: var(--evm-accent-soft); color: var(--evm-accent); } .evm-avatar--sm { width: 26px; height: 26px; } .evm-avatar--sm .evm-avatar-initials { font-size: 10px; } .evm-participant { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 0; border-radius: var(--evm-radius-field); transition: background var(--transition-fast); } .evm-participant:hover { background: var(--evm-surface-hover); padding-left: 8px; margin-inline: -8px; padding-right: 16px; } .evm-participant-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 500; color: var(--evm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .evm-participant-menu { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 14px; color: var(--evm-text-tertiary); background: none; border: 0; border-radius: var(--evm-radius-pill); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } .evm-participant-menu:hover { color: var(--evm-text); background: var(--evm-surface-sunken); } .evm-participant-menu:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--evm-accent-ring); } /* -- Avatar with initials fallback --------------------------------- */ .evm-avatar { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; overflow: hidden; border-radius: var(--evm-radius-pill); background: var(--evm-accent-soft); } .evm-avatar-initials { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--evm-accent); user-select: none; } .evm-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* No src at all → fall through to the initials underneath */ .evm-avatar-img:not([src]), .evm-avatar-img[src=""] { display: none; } /* ------------------------------------------------------------------- 13. COLOUR SWATCHES ------------------------------------------------------------------- */ .evm-swatch-group { display: flex; flex-wrap: wrap; gap: 10px; } .evm-swatch { position: relative; display: inline-block; width: 26px; height: 26px; border-radius: var(--evm-radius-pill); background: var(--evm-swatch, var(--evm-accent)); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .evm-swatch:hover { transform: scale(1.1); } /* Selected ring is drawn in the surface colour so it reads on any hue */ .evm-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--evm-surface), 0 0 0 4px var(--evm-swatch, var(--evm-accent)); } .evm-swatch:focus-within { box-shadow: 0 0 0 2px var(--evm-surface), 0 0 0 4px var(--evm-accent); } /* ------------------------------------------------------------------- 14. iOS-STYLE TOGGLE ------------------------------------------------------------------- */ .evm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; } .evm-toggle-label { font-size: 15px; font-weight: 600; color: var(--evm-text); cursor: pointer; } .evm-switch { flex: 0 0 auto; display: inline-flex; cursor: pointer; } .evm-switch-track { display: block; width: 51px; height: 31px; padding: 2px; background: var(--evm-surface-sunken); border-radius: var(--evm-radius-pill); box-shadow: inset 0 0 0 1px var(--evm-border); transition: background var(--transition-medium) var(--evm-ease), box-shadow var(--transition-medium) var(--evm-ease); } .evm-switch-thumb { display: block; width: 27px; height: 27px; background: #FFFFFF; border-radius: var(--evm-radius-pill); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.1); transition: translate var(--evm-duration) var(--evm-ease); } .evm-switch:has(input:checked) .evm-switch-track, .evm-switch.is-on .evm-switch-track { background: var(--evm-accent); box-shadow: inset 0 0 0 1px var(--evm-accent); } .evm-switch:has(input:checked) .evm-switch-thumb, .evm-switch.is-on .evm-switch-thumb { translate: 20px 0; } .evm-switch:has(input:focus-visible) .evm-switch-track { box-shadow: inset 0 0 0 1px var(--evm-accent), 0 0 0 3px var(--evm-accent-ring); } /* ------------------------------------------------------------------- 15. DAY PILLS & FREQUENCY SEGMENTS ------------------------------------------------------------------- */ .evm-recurrence { padding-top: 4px; } .evm-day-group, .evm-segment-group { display: flex; gap: 8px; } .evm-day-group { /* 7 pills must fit any width — let them shrink together */ gap: 6px; } .evm-day, .evm-segment { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: 13px 4px; font-size: 13px; font-weight: 500; line-height: 1; text-align: center; color: var(--evm-text-tertiary); background: var(--evm-input-bg); border: 1px solid var(--evm-border); border-radius: var(--evm-radius-field); cursor: pointer; user-select: none; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } .evm-day:hover, .evm-segment:hover { color: var(--evm-text-secondary); border-color: var(--evm-border-strong); } .evm-day:focus-within, .evm-segment:focus-within { box-shadow: 0 0 0 3px var(--evm-accent-ring); } .evm-day:has(input:checked), .evm-segment:has(input:checked) { color: var(--evm-accent); font-weight: 600; background: var(--evm-accent-soft); border-color: var(--evm-accent); } /* ------------------------------------------------------------------- 16. FOOTER BUTTONS ------------------------------------------------------------------- */ .evm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 14px 24px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--evm-radius-field); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .evm-btn:active { transform: scale(0.985); } .evm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--evm-accent-ring); } .evm-btn--secondary { flex: 0 0 auto; min-width: 120px; color: var(--evm-text); background: var(--evm-input-bg); border-color: var(--evm-border); } .evm-btn--secondary:hover { background: var(--evm-surface-hover); border-color: var(--evm-border-strong); } .evm-btn--primary { flex: 1 1 auto; color: var(--evm-accent-contrast); background: var(--evm-accent); } .evm-btn--primary:hover { background: var(--evm-accent-hover); } .evm-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ------------------------------------------------------------------- 17. DARK MODE — contrast corrections Colour tokens already flip in section 2; these are the cases where a token swap alone isn't enough. ------------------------------------------------------------------- */ /* styles.css carries broad `body.dark-mode input`-style rules that outrank a bare `.evm-input`. Restate ours at (0,2,0) so the modal owns its own field colours regardless of what the global sheet does. */ html.dark-mode .evm-input, body.dark-mode .evm-input { color: var(--evm-text); background: var(--evm-input-bg); border-color: var(--evm-input-border); } html.dark-mode .evm-input:focus, body.dark-mode .evm-input:focus { border-color: var(--evm-accent); } html.dark-mode .evm-priority:hover, body.dark-mode .evm-priority:hover { background: var(--evm-surface-hover); } /* Idle track needs to read as "off" against a #1C1C1E sheet */ html.dark-mode .evm-switch-track, body.dark-mode .evm-switch-track { background: #39393D; box-shadow: inset 0 0 0 1px transparent; } html.dark-mode .evm-switch-thumb, body.dark-mode .evm-switch-thumb { background: #FFFFFF; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } /* Selected-swatch ring punches through using the modal surface */ html.dark-mode .evm-swatch:has(input:checked), body.dark-mode .evm-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--evm-surface), 0 0 0 4px var(--evm-swatch, var(--evm-accent)); } /* Native date/time glyphs render black-on-dark without this */ html.dark-mode .evm-input[type="date"], html.dark-mode .evm-input[type="time"], body.dark-mode .evm-input[type="date"], body.dark-mode .evm-input[type="time"] { color-scheme: dark; } /* Secondary button sits on the footer bar, so lift it off the sunken tone */ html.dark-mode .evm-btn--secondary, body.dark-mode .evm-btn--secondary { background: transparent; border-color: var(--evm-border-strong); } html.dark-mode .evm-btn--secondary:hover, body.dark-mode .evm-btn--secondary:hover { background: var(--evm-surface-hover); } /* ------------------------------------------------------------------- 18. REDUCED MOTION ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .evm-overlay, .evm-modal, .evm-close, .evm-switch-track, .evm-switch-thumb, .evm-swatch, .evm-btn { transition-duration: 1ms; } .evm-modal, .evm-overlay.is-open .evm-modal { transform: none; } .evm-swatch:hover, .evm-btn:active { transform: none; } } /* ------------------------------------------------------------------- 19. RESPONSIVE — components Kept after the component rules so these win; the shell-level breakpoint lives in section 7. ------------------------------------------------------------------- */ @media (max-width: 560px) { /* 7 pills at 320px: drop the label to 2 letters' worth of padding */ .evm-day { padding: 12px 2px; font-size: 12px; } .evm-day-group { gap: 4px; } .evm-field-row { gap: 10px; } .evm-btn--secondary { min-width: 0; flex: 1 1 0; } } /* =================================================================== 20. TASK MODAL — visual parity with the event modal ------------------------------------------------------------------- #taskModal keeps its own markup, IDs, classes and all main-tasks.js logic (unified-modal / task-modal-compact / unified-dropdown-*) — only re-themed here to reuse the --evm-* tokens above. Every rule is scoped under #taskModal so nothing leaks into the other modals that share .unified-modal / .unified-dropdown-menu / .unified-btn (leadModal, customerModal, collaborator menus, etc.). ------------------------------------------------------------------- */ /* -- Overlay + shell ------------------------------------------------ */ #taskModal { background: var(--evm-overlay-bg); -webkit-backdrop-filter: blur(var(--evm-overlay-blur)); backdrop-filter: blur(var(--evm-overlay-blur)); } #taskModal .task-modal-compact { border-radius: var(--evm-radius); box-shadow: var(--evm-shadow); } /* Narrower than the 600px stock width — gated to min-width so it doesn't fight the two existing mobile breakpoints (540px/600px) that force the container to 100% width on small screens. */ @media (min-width: 601px) { #taskModal .task-modal-compact { max-width: 500px; } } /* Calendar / Repeat / List: was a 3-column grid spanning the row. Stacked vertically instead, each row hugging its own content width on the left rather than stretching to fill a shared column — which also sidesteps the cramped-column problem entirely since nothing competes for width anymore. */ #taskModal .task-options-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } #taskModal .task-modal-compact .unified-modal-header { border-radius: var(--evm-radius) var(--evm-radius) 0 0; background: var(--evm-surface-bar); } #taskModal .task-modal-compact .unified-modal-footer { border-radius: 0 0 var(--evm-radius) var(--evm-radius); background: var(--evm-surface-bar); } @media (max-width: 600px) { #taskModal .task-modal-compact { border-radius: var(--evm-radius) !important; } #taskModal .task-modal-compact .unified-modal-footer { border-radius: 0 0 var(--evm-radius) var(--evm-radius) !important; padding: 16px var(--evm-pad-x) max(16px, env(safe-area-inset-bottom, 0px)) !important; } } /* -- Header ----------------------------------------------------------- */ #taskModal .unified-modal-header { padding: var(--evm-pad-y) var(--evm-pad-x) !important; border-bottom-color: var(--evm-divider); } #taskModal .unified-modal-title h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--evm-text); } #taskModal .unified-modal-close { width: 32px; height: 32px; background: var(--evm-surface-sunken); color: var(--evm-text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } #taskModal .unified-modal-close:hover { opacity: 1; background: var(--evm-surface-hover); color: var(--evm-text); } /* -- Body -------------------------------------------------------------- */ #taskModal .task-modal-body { gap: var(--evm-gap); padding: var(--evm-pad-y) var(--evm-pad-x) !important; background: var(--evm-surface); } #taskModal .task-modal-compact .task-title-input { border-bottom-color: var(--evm-divider) !important; letter-spacing: -0.01em; } #taskModal .task-modal-compact .task-title-input:focus { border-bottom-color: var(--evm-accent) !important; } #taskModal .task-modal-compact .task-desc-input { background: var(--evm-input-bg) !important; border: 1px solid var(--evm-border) !important; border-radius: var(--evm-radius-field) !important; } #taskModal .task-modal-compact .task-desc-input:hover { border-color: var(--evm-border-strong) !important; } #taskModal .task-modal-compact .task-desc-input:focus { border-color: var(--evm-accent) !important; box-shadow: 0 0 0 3px var(--evm-accent-ring) !important; } #taskModal .task-options-row { border-top-color: var(--evm-divider); } /* -- Chip / field buttons (assignee, date, priority, status) ---------- */ #taskModal .task-field-btn, #taskModal .task-chip { background: var(--evm-prio-idle-bg); border-color: var(--evm-prio-idle-border); border-radius: var(--evm-radius-field); color: var(--evm-text-secondary); } #taskModal .task-field-btn:hover, #taskModal .task-chip:hover { background: var(--evm-surface-hover); border-color: var(--evm-border-strong); color: var(--evm-text); } #taskModal .task-field-btn.has-value, #taskModal .task-chip.has-value { background: var(--evm-accent-soft); border-color: var(--evm-accent); color: var(--evm-text); } #taskModal .task-field-btn i, #taskModal .task-chip-arrow { color: var(--evm-text-tertiary); } #taskModal .task-field-btn:hover i, #taskModal .task-field-btn:hover .task-chip-arrow, #taskModal .task-chip:hover .task-chip-arrow { color: var(--evm-accent); } /* Priority chip picks up the same colour language as the event modal's priority badges once a level has actually been chosen (has-value) — idle stays neutral, same "colour only on selection" rule as .evm-priority. */ #taskModal #taskPriorityTrigger.has-value:has(.unified-priority-dot.low) { background: var(--evm-prio-low-bg); border-color: var(--evm-prio-low-border); color: var(--evm-prio-low-fg); } #taskModal #taskPriorityTrigger.has-value:has(.unified-priority-dot.medium) { background: var(--evm-prio-medium-bg); border-color: var(--evm-prio-medium-border); color: var(--evm-prio-medium-fg); } #taskModal #taskPriorityTrigger.has-value:has(.unified-priority-dot.high) { background: var(--evm-prio-high-bg); border-color: var(--evm-prio-high-border); color: var(--evm-prio-high-fg); } /* Difficulty chip follows the same "colour only on selection" rule, but on its own green→purple ramp so it never reads as a second priority control. */ #taskModal #taskDifficultyTrigger.has-value:has(.unified-difficulty-dot.easy) { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.32); color: #15803D; } #taskModal #taskDifficultyTrigger.has-value:has(.unified-difficulty-dot.medium) { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.32); color: #A16207; } #taskModal #taskDifficultyTrigger.has-value:has(.unified-difficulty-dot.hard) { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.32); color: #C2410C; } #taskModal #taskDifficultyTrigger.has-value:has(.unified-difficulty-dot.complex) { background: rgba(175, 82, 222, 0.14); border-color: rgba(175, 82, 222, 0.34); color: #7E22CE; } /* -- Options row (calendar toggle, repeat, list) ----------------------- */ #taskModal .task-option-btn, #taskModal .task-option-toggle { border-radius: var(--evm-radius-field); color: var(--evm-text-secondary); } #taskModal .task-option-btn:hover, #taskModal .task-option-toggle:hover { background: var(--evm-surface-hover); color: var(--evm-text); } #taskModal .task-goto-sheet-btn:hover { background: var(--evm-surface-hover); border-color: var(--evm-border); color: var(--evm-accent); } /* -- Dropdown menus (assignee / date / priority / status / repeat / list) */ #taskModal .unified-dropdown-menu { background: var(--evm-input-bg); border: 1px solid var(--evm-border); border-radius: var(--evm-radius-field); box-shadow: var(--evm-shadow); } #taskModal .unified-dropdown-option { color: var(--evm-text); border-radius: 8px; } #taskModal .unified-dropdown-option:hover { background: var(--evm-accent-soft); color: var(--evm-accent); } #taskModal .unified-dropdown-option.selected { background: var(--evm-accent-soft); } #taskModal .unified-dropdown-option .check-icon { color: var(--evm-accent); } /* -- iOS-style toggle (Show on calendar) ------------------------------- */ #taskModal .mini-toggle-track { background: var(--evm-surface-sunken); box-shadow: inset 0 0 0 1px var(--evm-border); } #taskModal .mini-toggle input:checked + .mini-toggle-track { background: var(--evm-accent); box-shadow: inset 0 0 0 1px var(--evm-accent); } /* -- Footer ------------------------------------------------------------- */ #taskModal .unified-modal-footer { padding: 18px var(--evm-pad-x); padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); border-top-color: var(--evm-divider); } #taskModal .task-word-count { color: var(--evm-text-tertiary); font-size: 12px; } /* -- Type scale — bumped up from the original compact sizing ---------- */ #taskModal .task-modal-compact .task-title-input { font-size: 19px !important; } #taskModal .task-modal-compact .task-desc-input { font-size: 14.5px !important; } #taskModal .task-field-label { font-size: 12px; } #taskModal .task-field-btn, #taskModal .task-chip { font-size: 14px; } #taskModal .task-field-btn i { font-size: 13px; } #taskModal .task-chip-arrow { font-size: 10px; } #taskModal .task-option-btn, #taskModal .task-option-toggle, #taskModal .task-toggle-text { font-size: 13px; } #taskModal .task-option-btn i:first-child { font-size: 12px; } #taskModal .task-option-arrow { font-size: 9px !important; } #taskModal .task-modal-body .recurrence-hint { font-size: 12.5px; } #taskModal .unified-dropdown-option { font-size: 16px; } #taskModal .unified-btn { min-height: 48px; padding: 13px 22px; font-size: 16px; font-weight: 600; border-radius: var(--evm-radius-field); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } #taskModal .unified-btn:active:not(:disabled) { transform: scale(0.985); } #taskModal .unified-btn-secondary { color: var(--evm-text); background: var(--evm-input-bg); border: 1px solid var(--evm-border); } #taskModal .unified-btn-secondary:hover:not(:disabled) { opacity: 1; background: var(--evm-surface-hover); border-color: var(--evm-border-strong); } #taskModal .unified-btn-primary { background: var(--evm-accent); color: var(--evm-accent-contrast); } #taskModal .unified-btn-primary:hover:not(:disabled) { opacity: 1; background: var(--evm-accent-hover); } /* -- Dark mode — same fights event-modal.css already has to win against styles.css's !important form-field defaults ------------------------- */ html.dark-mode #taskModal .task-modal-compact .task-desc-input, body.dark-mode #taskModal .task-modal-compact .task-desc-input { background: var(--evm-input-bg) !important; border-color: var(--evm-border) !important; } html.dark-mode #taskModal .unified-btn-secondary, body.dark-mode #taskModal .unified-btn-secondary { background: transparent; border-color: var(--evm-border-strong); }