/**
 * events.css -- MyBest24 Event System Styles
 *
 * Covers:
 *  - Create Event modal overlay & card
 *  - Repeat selector component
 *  - Events tab in box modal (phase 5)
 *  - Stack peek visual for multi-event hours (phase 6 foundation)
 *
 * Load after share.css in index.html:
 *   <link rel="stylesheet" href="events.css">
 *
 * ── MOBILE ARCHITECTURE — DO NOT REMOVE THESE RULES ─────────────────────────
 *
 * The event modal header (.create-event-header) is always visible on mobile.
 * On mobile, the form is taller than the screen. If the header were to scroll
 * away, users cannot reach the X (close) or ✓ (save) buttons and are trapped
 * in the modal with no way out except a full page reload.
 *
 * HOW THE HEADER STAYS VISIBLE:
 *   Structure: .create-event-sheet (flex column)
 *                .create-event-header   ← outside the scroll container
 *                .create-event-card     ← overflow-y:auto, the scroll container
 *                  .create-event-body   ← padding only, no overflow
 *
 *   The header is a flex sibling of the scrollable card, not inside it.
 *   It is physically impossible for the header to scroll away.
 *   DO NOT move the header inside .create-event-card.
 *   DO NOT add overflow-y:auto to .create-event-sheet.
 *   DO NOT add position:sticky — it is not needed and won't work here.
 *
 * iOS safe-area rules (env(safe-area-inset-bottom)) prevent the bottom of the sheet
 * from going behind the iOS home indicator bar. safe-area-inset-top is NOT used —
 * this is a bottom sheet capped at ~92vh, so the header never gets near the notch.
 *   - Both require: <meta name="viewport" content="..., viewport-fit=cover"> in index.html.
 *     Without viewport-fit=cover, env() values return 0 and the fix silently fails.
 */

/* ── CSS VARIABLES (Phase 6 reserve) ───────────────────────────────────────── */

:root {
    --bg-event-override-stack-peek: #1a1a1e;

    /* BG override palette — edit here only */
    --bg-event-override-palette-1: #1e2d3d;
    --bg-event-override-palette-2: #2d1e3d;
    --bg-event-override-palette-3: #1e3d2d;
    --bg-event-override-palette-4: #3d2d1e;
    --bg-event-override-palette-5: #3d1e1e;
    --bg-event-override-palette-6: #1e1e3d;
    --bg-event-override-palette-7: #2d3d1e;
    --bg-event-override-palette-8: #3d3d1e;
}

/* ── CREATE EVENT HEADER BUTTON ─────────────────────────────────────────────── */

.create-event-header-btn {
    font-weight: 700;
    font-size: 1rem;
}

.create-event-plus-icon {
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 300;
    color: var(--accent-color);
    display: block;
}

/* ── CREATE EVENT MODAL OVERLAY ─────────────────────────────────────────────── */

/* Matches the same pattern as #box-modal in styles.css:
   position:fixed inset:0, overflow-y:auto on the OVERLAY, align-items:flex-start.
   The overlay is its own scroll context — completely immune to page scrollY.
   No bottom-sheet transform animation — that was causing iOS to render the modal
   offset by the current page scroll position on inject. */
.create-event-overlay {
    position: fixed;
    inset: 0;
    z-index: 1700;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.create-event-overlay.open {
    background: rgba(0, 0, 0, 0.72);
    pointer-events: all;
    opacity: 1;
}

/* Sheet: the visible card. Sits at the top of the scrolling overlay.
   margin:auto is intentionally NOT used — it would push the sheet below
   the top of the overlay's scroll area on short viewports. */

/* CRITICAL: max-height is REQUIRED for internal card scrolling to work.
   Without it, the sheet grows unbounded, the overlay scrolls instead of the card,
   and the header scrolls away. Do NOT remove max-height. */
   
.create-event-sheet {
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 18px;
    width: min(480px, 92%);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    flex-shrink: 0;
    /* ← NEW: cap at 92% of the viewport so the card scrolls internally */
    max-height: 92dvh;
}
/* Desktop: same — already centered by margin:auto */
@media (min-width: 601px) {
    .create-event-sheet {
        max-width: 420px;
    }
}

/* ── CARD HEADER ─────────────────────────────────────────────────────────────── */

/* Header is a flex child of .create-event-sheet and a sibling of .create-event-card.
   It is OUTSIDE the scroll container — impossible to scroll away. No sticky needed. */
.create-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--box-border);
    flex-shrink: 0;
    background: var(--bg-panel);
    border-radius: 18px 18px 0 0;
}

.create-event-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
}

/* ── HEADER BUTTONS (X and ✓) ────────────────────────────────────────────────── */

/* Apple-style: icon sits inside a gray filled circle.
   The ✓ button's circle turns red when the user has made changes (is-dirty). */
.em-header-btn {
    background: color-mix(in srgb, var(--text-main) 12%, transparent);
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.em-header-btn:hover {
    background: color-mix(in srgb, var(--text-main) 20%, transparent);
}

.em-header-btn:active {
    background: color-mix(in srgb, var(--text-main) 28%, transparent);
}

.em-header-btn img {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    /* Invert so white pixel-art icons show on dark circle */
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 1;
}

/* ── DIRTY STATE — save button circle turns red when changes are made ─────────── */

/* The dot sits behind the icon (z-index:-1) as a colored circle.
   Starts transparent, fades to red when .is-dirty is added by markDirty(). */
.em-dirty-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #e03030;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 0;
}

.em-header-btn.is-dirty {
    background: transparent; /* let the dot color show cleanly */
}

.em-header-btn.is-dirty .em-dirty-dot {
    opacity: 1;
}

/* Ensure icon stays above the dot */
.em-header-btn.is-dirty img {
    filter: brightness(0) invert(1); /* keep white on colored bg */
}
/* end DIRTY state */

/* start events-button-premium-ux-animation */
.em-header-btn-premium-press-effect {
    --em-premium-interaction-scale: 1.2;
    transition: background 0.18s ease, transform 0.14s cubic-bezier(0.33, 1, 0.68, 1) !important;
    will-change: transform;
}

.em-header-btn-premium-press-effect:active {
    transform: scale(var(--em-premium-interaction-scale));
}
/* end events-button-premium-ux-animation */

/* ── SCROLLABLE CARD ─────────────────────────────────────────────────────────── */

/* Card is the scroll container. flex:1 fills remaining sheet height below header. */
.create-event-card {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.create-event-card::-webkit-scrollbar { display: none; }

/* ── CARD BODY ───────────────────────────────────────────────────────────────── */

.create-event-body {
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.form-section {
    margin-bottom: 14px;
}

.form-section-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
    margin-bottom: 6px;
}

/* Type strip inside create-event modal */
.create-type-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.create-type-strip .type-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 8px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 0.68rem;
    color: var(--text-muted);
    min-width: 52px;
}

.create-type-strip .type-tile.selected {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--text-main) 7%, transparent);
}

.create-type-strip .type-tile:hover {
    border-color: color-mix(in srgb, var(--text-main) 25%, transparent);
}

/* ── Animated icon display ─────────────────────────────────────────────────── */

.ce-icon-display {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    margin-bottom: 28px;
    width: 100%;
}

.ce-icon-display.has-slices {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    margin-bottom: 20px;
}

.ce-box-icon {
    image-rendering: pixelated;
    flex-shrink: 0;
    filter: var(--icon-accent-filter);
}

/* Light mode mono: CSS filter over-saturates vs TinyChunk pixel pipeline.
   saturate(60%) brings events modal icons closer to the 24-box view.
   Dark mode mono: smaller correction (half as much) — saturate(80%).
   Both rules scoped to :not(.mode-multicolor) — multicolor uses per-type filters below. */
body:not(.dark-mode):not(.mode-multicolor) .ce-box-icon {
    filter: var(--icon-accent-filter) saturate(60%);
    opacity: 0.85;
}
body.dark-mode:not(.mode-multicolor) .ce-box-icon {
    filter: var(--icon-accent-filter) saturate(80%);
}

/* ── Animated top icon — per-type color in multicolor mode ────────────────────
   .ce-box-icon sits above the type strip with no [data-type] ancestor.
   body-level :has() checks which type tile is selected anywhere in the document
   and applies the matching filter to any .ce-box-icon on the page.

   COLOR FORMULA — how these filters are derived:
   --icon-accent-filter is the KNOWN CORRECT mono filter (DEFAULT_HUE = -166, blue).
   It contains: url(#cpSVGfilter) hue-rotate(-166deg) saturate(S%) brightness(B)
   The SVG filter converts any pixel to a red seed (hue 0°), then hue-rotate shifts it.

   For any type with effectHue X, the target rotation from the red seed is X degrees.
   Starting from --icon-accent-filter (which already rotated by -166deg), we need an
   additional rotation of (effectHue - (-166)) = effectHue + 166 degrees.
   This chained hue-rotate produces the exact right hue and inherits the correct
   brightness/saturation from --icon-accent-filter, without touching cpBuildTypeFilterString.

   Palette effectHue values (finalized, shared across dark and light modes):
     SLEEP:     -150°  delta = +16°
     WORK:        0°   delta = +166°
     FITNESS:   -80°   delta = +86°
     SELF_CARE: +120°  delta = +286°
     FUN:        +40°  delta = +206°
     FAMILY:     -60°  delta = +106°
     FREE:      +180°  delta = +346°

   !important required: sprites.js RAF sets element.style.filter inline after this runs.
   ──────────────────────────────────────────────────────────────────────────── */
/* ── DARK MODE — animated top icon (ce-box-icon) ─────────────────────────────
   delta = effectHue - DARK_DEFAULT_HUE = effectHue - (-166) = effectHue + 166  */
body.dark-mode.mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="SLEEP"])     .ce-box-icon { filter: var(--filter-type-sleep, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="WORK"])      .ce-box-icon { filter: var(--filter-type-work, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FITNESS"])   .ce-box-icon { filter: var(--filter-type-fitness, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="SELF_CARE"]) .ce-box-icon { filter: var(--filter-type-self-care, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FAMILY"])    .ce-box-icon { filter: var(--filter-type-family, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FUN"])       .ce-box-icon { filter: var(--filter-type-fun, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FREE"])      .ce-box-icon { filter: var(--filter-type-free, var(--icon-accent-filter)) !important; }

/* ── LIGHT MODE — animated top icon (ce-box-icon) ────────────────────────────
   delta = effectHue - LIGHT_DEFAULT_HUE = effectHue - 30                       */
body:not(.dark-mode).mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="SLEEP"])     .ce-box-icon { filter: var(--filter-type-sleep, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="WORK"])      .ce-box-icon { filter: var(--filter-type-work, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FITNESS"])   .ce-box-icon { filter: var(--filter-type-fitness, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="SELF_CARE"]) .ce-box-icon { filter: var(--filter-type-self-care, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FAMILY"])    .ce-box-icon { filter: var(--filter-type-family, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FUN"])       .ce-box-icon { filter: var(--filter-type-fun, var(--icon-accent-filter)) !important; } /* light mdoe fun is weird I'm using +50 (human eyeball correct) instead of +10 (mathematically correct) */
body:not(.dark-mode).mode-multicolor:has(.create-type-strip .type-tile.selected[data-type="FREE"])      .ce-box-icon { filter: var(--filter-type-free, var(--icon-accent-filter)) !important; }

/* ── Multicolor mode — per-type icon filters ──────────────────────────────────
   Applied to event cards, share preview, variant grid tiles, and type-strip tiles.
   create-type-strip is split out so it can carry extra saturation independently.
   variant-tile gets base hue only — saturation is controlled by the higher-specificity
   dark/light variant-tile blocks below.
   ──────────────────────────────────────────────────────────────────────────── */

/* DARK MODE — event cards, share preview, variant tiles (base hue; sat overridden below) */
body.dark-mode.mode-multicolor [data-type="SLEEP"]     .event-card-type-icon,
body.dark-mode.mode-multicolor [data-type="SLEEP"]     .share-confirm-preview-icon,
body.dark-mode.mode-multicolor [data-type="SLEEP"]     .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(16deg); }
body.dark-mode.mode-multicolor .create-type-strip [data-type="SLEEP"] img              { filter: var(--icon-accent-filter) hue-rotate(16deg)   saturate(1.1); }

body.dark-mode.mode-multicolor [data-type="WORK"]      .event-card-type-icon,
body.dark-mode.mode-multicolor [data-type="WORK"]      .share-confirm-preview-icon,
body.dark-mode.mode-multicolor [data-type="WORK"]      .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(166deg); }
body.dark-mode.mode-multicolor .create-type-strip [data-type="WORK"] img               { filter: var(--icon-accent-filter) hue-rotate(166deg)  saturate(1.1); }

body.dark-mode.mode-multicolor [data-type="FITNESS"]   .event-card-type-icon,
body.dark-mode.mode-multicolor [data-type="FITNESS"]   .share-confirm-preview-icon,
body.dark-mode.mode-multicolor [data-type="FITNESS"]   .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(86deg); }
body.dark-mode.mode-multicolor .create-type-strip [data-type="FITNESS"] img            { filter: var(--icon-accent-filter) hue-rotate(86deg)   saturate(1.1); }

body.dark-mode.mode-multicolor [data-type="SELF_CARE"] .event-card-type-icon,
body.dark-mode.mode-multicolor [data-type="SELF_CARE"] .share-confirm-preview-icon,
body.dark-mode.mode-multicolor [data-type="SELF_CARE"] .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(286deg); }
body.dark-mode.mode-multicolor .create-type-strip [data-type="SELF_CARE"] img          { filter: var(--icon-accent-filter) hue-rotate(286deg)  saturate(1.1); }

body.dark-mode.mode-multicolor [data-type="FAMILY"]    .event-card-type-icon,
body.dark-mode.mode-multicolor [data-type="FAMILY"]    .share-confirm-preview-icon,
body.dark-mode.mode-multicolor [data-type="FAMILY"]    .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(106deg) ; }
body.dark-mode.mode-multicolor .create-type-strip [data-type="FAMILY"] img             { filter: var(--icon-accent-filter) hue-rotate(106deg)  saturate(1.1); }

body.dark-mode.mode-multicolor [data-type="FUN"]       .event-card-type-icon,
body.dark-mode.mode-multicolor [data-type="FUN"]       .share-confirm-preview-icon,
body.dark-mode.mode-multicolor [data-type="FUN"]       .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(206deg); }
body.dark-mode.mode-multicolor .create-type-strip [data-type="FUN"] img                { filter: var(--icon-accent-filter) hue-rotate(206deg)  saturate(2.0) brightness(1.5); }

body.dark-mode.mode-multicolor [data-type="FREE"]      .event-card-type-icon,
body.dark-mode.mode-multicolor [data-type="FREE"]      .share-confirm-preview-icon,
body.dark-mode.mode-multicolor [data-type="FREE"]      .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(346deg); }
body.dark-mode.mode-multicolor .create-type-strip [data-type="FREE"] img               { filter: var(--icon-accent-filter) hue-rotate(346deg)  saturate(1.1); }

/* LIGHT MODE — event cards, share preview, variant tiles, type-strip */
body:not(.dark-mode).mode-multicolor [data-type="SLEEP"]     .event-card-type-icon,
body:not(.dark-mode).mode-multicolor [data-type="SLEEP"]     .share-confirm-preview-icon,
body:not(.dark-mode).mode-multicolor [data-type="SLEEP"]     .variant-tile img               { filter: var(--filter-type-sleep, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor .create-type-strip [data-type="SLEEP"] img              { filter: var(--filter-type-sleep, var(--icon-accent-filter)); }

body:not(.dark-mode).mode-multicolor [data-type="WORK"]      .event-card-type-icon,
body:not(.dark-mode).mode-multicolor [data-type="WORK"]      .share-confirm-preview-icon,
body:not(.dark-mode).mode-multicolor [data-type="WORK"]      .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(-30deg) saturate(1.1) brightness(1.2); }
body:not(.dark-mode).mode-multicolor .create-type-strip [data-type="WORK"] img               { filter: var(--icon-accent-filter) hue-rotate(-30deg) saturate(1.1) brightness(1.2); }

body:not(.dark-mode).mode-multicolor [data-type="FITNESS"]   .event-card-type-icon,
body:not(.dark-mode).mode-multicolor [data-type="FITNESS"]   .share-confirm-preview-icon,
body:not(.dark-mode).mode-multicolor [data-type="FITNESS"]   .variant-tile img               { filter: var(--filter-type-fitness, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor .create-type-strip [data-type="FITNESS"] img            { filter: var(--filter-type-fitness, var(--icon-accent-filter)); }

body:not(.dark-mode).mode-multicolor [data-type="SELF_CARE"] .event-card-type-icon,
body:not(.dark-mode).mode-multicolor [data-type="SELF_CARE"] .share-confirm-preview-icon,
body:not(.dark-mode).mode-multicolor [data-type="SELF_CARE"] .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(90deg) saturate(1.3) brightness(2.0); }
body:not(.dark-mode).mode-multicolor .create-type-strip [data-type="SELF_CARE"] img          { filter: var(--icon-accent-filter) hue-rotate(90deg) saturate(1.3) brightness(2.0); }

body:not(.dark-mode).mode-multicolor [data-type="FAMILY"]    .event-card-type-icon,
body:not(.dark-mode).mode-multicolor [data-type="FAMILY"]    .share-confirm-preview-icon,
body:not(.dark-mode).mode-multicolor [data-type="FAMILY"]    .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(-90deg) saturate(1.3) brightness(1.8); }
body:not(.dark-mode).mode-multicolor .create-type-strip [data-type="FAMILY"] img             { filter: var(--icon-accent-filter) hue-rotate(-90deg) saturate(1.3) brightness(1.8); }

body:not(.dark-mode).mode-multicolor [data-type="FUN"]       .event-card-type-icon,
body:not(.dark-mode).mode-multicolor [data-type="FUN"]       .share-confirm-preview-icon,
body:not(.dark-mode).mode-multicolor [data-type="FUN"]       .variant-tile img               { filter: var(--filter-type-fun, var(--icon-accent-filter)) }
body:not(.dark-mode).mode-multicolor .create-type-strip [data-type="FUN"] img                { filter: var(--filter-type-fun, var(--icon-accent-filter)); }

body:not(.dark-mode).mode-multicolor [data-type="FREE"]      .event-card-type-icon,
body:not(.dark-mode).mode-multicolor [data-type="FREE"]      .share-confirm-preview-icon,
body:not(.dark-mode).mode-multicolor [data-type="FREE"]      .variant-tile img               { filter: var(--icon-accent-filter) hue-rotate(180deg) saturate(1.3) brightness(1.4); }
body:not(.dark-mode).mode-multicolor .create-type-strip [data-type="FREE"] img               { filter: var(--icon-accent-filter) hue-rotate(180deg) saturate(1.3) brightness(1.4); }

/* ── Box modal #box-icon per-type color ──────────────────────────────────────
   #box-icon has data-type stamped directly on it (no [data-type] ancestor).
   !important beats sprites.js RAF inline style.
   ──────────────────────────────────────────────────────────────────────────── */

/* DARK MODE */
body.dark-mode.mode-multicolor #box-icon[data-type="SLEEP"]     { filter: var(--filter-type-sleep, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor #box-icon[data-type="WORK"]      { filter: var(--filter-type-work, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor #box-icon[data-type="FITNESS"]   { filter: var(--filter-type-fitness, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor #box-icon[data-type="SELF_CARE"] { filter: var(--filter-type-self-care, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor #box-icon[data-type="FAMILY"]    { filter: var(--filter-type-family, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor #box-icon[data-type="FUN"]       { filter: var(--filter-type-fun, var(--icon-accent-filter)) !important; }
body.dark-mode.mode-multicolor #box-icon[data-type="FREE"]      { filter: var(--filter-type-free, var(--icon-accent-filter)) !important; }

/* LIGHT MODE */
body:not(.dark-mode).mode-multicolor #box-icon[data-type="SLEEP"]     { filter: var(--filter-type-sleep, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor #box-icon[data-type="WORK"]      { filter: var(--icon-accent-filter) hue-rotate(-30deg)  saturate(1.1) !important; }
body:not(.dark-mode).mode-multicolor #box-icon[data-type="FITNESS"]   { filter: var(--filter-type-fitness, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor #box-icon[data-type="SELF_CARE"] { filter: var(--filter-type-self-care, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor #box-icon[data-type="FAMILY"]    { filter: var(--filter-type-family, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor #box-icon[data-type="FUN"]       { filter: var(--filter-type-fun, var(--icon-accent-filter)) !important; }
body:not(.dark-mode).mode-multicolor #box-icon[data-type="FREE"]      { filter: var(--filter-type-free, var(--icon-accent-filter)) !important; }

/* ── Variant-tile saturation control (wins due to higher specificity) ──────────
   body.dark-mode / body:not(.dark-mode) with .mode-multicolor beats the base
   body.dark-mode / body:not(.dark-mode) block above for .variant-tile img.
   Keeps static grid tiles calmer than the animated top icon and type-strip.
   FUN gets a higher value so it still reads as energetic.
   ──────────────────────────────────────────────────────────────────────────── */

/* DARK MODE */
body.dark-mode.mode-multicolor [data-type="SLEEP"]     .variant-tile img { filter: var(--icon-accent-filter) hue-rotate(16deg)  saturate(0.85); }
body.dark-mode.mode-multicolor [data-type="WORK"]      .variant-tile img { filter: var(--icon-accent-filter) hue-rotate(166deg) saturate(0.85); }
body.dark-mode.mode-multicolor [data-type="FITNESS"]   .variant-tile img { filter: var(--icon-accent-filter) hue-rotate(86deg)  saturate(0.85); }
body.dark-mode.mode-multicolor [data-type="SELF_CARE"] .variant-tile img { filter: var(--icon-accent-filter) hue-rotate(286deg) saturate(0.85); }
body.dark-mode.mode-multicolor [data-type="FAMILY"]    .variant-tile img { filter: var(--icon-accent-filter) hue-rotate(106deg) saturate(0.85); }
body.dark-mode.mode-multicolor [data-type="FUN"]       .variant-tile img { filter: var(--icon-accent-filter) hue-rotate(206deg) saturate(2.00) brightness(1.5); }
body.dark-mode.mode-multicolor [data-type="FREE"]      .variant-tile img { filter: var(--icon-accent-filter) hue-rotate(346deg) saturate(0.85); }

/* LIGHT MODE */
body:not(.dark-mode).mode-multicolor [data-type="SLEEP"]     .variant-tile img { filter: var(--filter-type-sleep, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor [data-type="WORK"]      .variant-tile img { filter: var(--filter-type-work, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor [data-type="FITNESS"]   .variant-tile img { filter: var(--filter-type-fitness, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor [data-type="SELF_CARE"] .variant-tile img { filter: var(--filter-type-self-care, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor [data-type="FAMILY"]    .variant-tile img { filter: var(--filter-type-family, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor [data-type="FUN"]       .variant-tile img { filter: var(--filter-type-fun, var(--icon-accent-filter)); }
body:not(.dark-mode).mode-multicolor [data-type="FREE"]      .variant-tile img { filter: var(--filter-type-free, var(--icon-accent-filter)); }

/* ── Bug #2 belt-and-suspenders — current-hour animated sprite on refresh ─────
   Also fixed in styles.css with !important. Kept here as redundant safety net.
   ──────────────────────────────────────────────────────────────────────────── */
body.mode-multicolor .status-current .animated {
    filter: var(--icon-type-filter, var(--icon-accent-filter)) !important;
}

#ce-slices-companion .slices-grid {
    flex: 1;
}

#ce-slices-companion .slice-card {
    cursor: default;
}

#ce-slices-companion {
    max-width: 320px;
    width: 100%;
}

/* Icon wrapper — holds ce-box-icon + em-add-slice-btn (positioned relative so + can be absolute) */
.ce-icon-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* + Add Slice button — bottom-right of icon wrapper (no slices state),
   or appended into companion area (has-slices state, moved by JS) */
.em-add-slice-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-color);
    background: var(--bg-panel);
    color: var(--accent-color);
    font-size: 1rem;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.em-add-slice-btn:hover {
    opacity: 0.75;
}

/* When slices are present JS moves em-add-slice-btn into #ce-slices-companion.
   Override absolute positioning so it sits in flow at the bottom-right of the companion. */
#ce-slices-companion .em-add-slice-btn {
    position: static;
    align-self: flex-end;
    margin-top: 4px;
    margin-left: auto;
}

/* Trash icon — top-right of each slice card, event modal only */
.slice-card {
    position: relative;
}

.slice-trash-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    line-height: 0;
    z-index: 2;
}

.slice-trash-btn:hover {
    opacity: 1;
}

.slice-trash-btn img {
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    filter: brightness(0) invert(1);
}

/* Column selector inside event modal companion */
.ce-slices-column-selector {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

/* ── REPEAT SELECTOR COMPONENT ───────────────────────────────────────────────── */

.repeat-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.repeat-type-strip {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.repeat-type-pill {
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
    color: color-mix(in srgb, var(--text-main) 55%, transparent);
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.repeat-type-pill.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
}

.repeat-type-pill:hover:not(.active) {
    border-color: color-mix(in srgb, var(--text-main) 25%, transparent);
    color: color-mix(in srgb, var(--text-main) 80%, transparent);
}

.repeat-summary-line {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--text-main) 45%, transparent);
    font-style: italic;
    min-height: 1.2em;
}

.repeat-sub-panel {
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.repeat-sub-panel.hidden {
    display: none;
}

.repeat-day-picker {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.repeat-day-pill {
    padding: 4px 8px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
    color: color-mix(in srgb, var(--text-main) 45%, transparent);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.repeat-day-pill.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: color-mix(in srgb, var(--text-main) 5%, transparent);
}

.repeat-day-picker.hidden {
    display: none;
}

.repeat-radio-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--text-main) 60%, transparent);
    cursor: pointer;
    line-height: 1.5;
}

.repeat-radio-row input[type="radio"] {
    accent-color: var(--accent-color);
    flex-shrink: 0;
}

.repeat-custom-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--text-main) 60%, transparent);
    flex-wrap: wrap;
}

.repeat-number-input {
    width: 52px;
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    padding: 4px 6px;
    text-align: center;
}

.repeat-unit-select,
.repeat-date-input {
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-family: inherit;
    padding: 4px 6px;
}

.repeat-ends-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent);
}

/* ── BOX MODAL: EVENTS TAB ───────────────────────────────────────────────────── */

.events-tab-empty {
    text-align: center;
    padding: 20px 0 10px;
    color: color-mix(in srgb, var(--text-main) 35%, transparent);
    font-size: 0.82rem;
}

.events-tab-empty .events-tab-create-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 20px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 600;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

.events-tab-empty .events-tab-create-btn:hover {
    opacity: 0.75;
}

.event-priority-card {
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.event-priority-card.event-top-card {
    border-color: var(--accent-color);
}

.event-priority-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.event-card-badge {
    font-size: 0.6rem;
    opacity: 0.5;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.event-card-handle {
    cursor: grab;
    opacity: 0.4;
    flex-shrink: 0;
    font-size: 1.1rem;
    padding: 0 2px;
    touch-action: none;
}

.event-card-type-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
    flex-shrink: 0;
}

body:not(.dark-mode):not(.mode-multicolor) .event-card-type-icon {
    filter: var(--icon-accent-filter) saturate(60%);
    opacity: 0.85;
}
body.dark-mode:not(.mode-multicolor) .event-card-type-icon {
    filter: var(--icon-accent-filter) saturate(80%);
}

.event-card-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-card-time {
    font-size: 0.7rem;
    opacity: 0.45;
    flex-shrink: 0;
}

.event-card-repeat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid color-mix(in srgb, var(--text-main) 6%, transparent);
    margin-top: 6px;
}

.event-card-repeat-summary {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--text-main) 40%, transparent);
    font-style: italic;
    flex: 1;
}

.event-card-repeat-toggle {
    font-size: 0.68rem;
    color: var(--accent-color);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 0;
}

.event-card-repeat-editor {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--text-main) 6%, transparent);
}

.event-card-delete-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 5px;
    background: none;
    border: none;
    color: rgba(255, 90, 90, 0.55);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    border-top: 1px solid color-mix(in srgb, var(--text-main) 5%, transparent);
    padding-top: 7px;
    transition: color 0.15s;
}

.event-card-delete-btn:hover {
    color: rgba(255, 90, 90, 0.9);
}

.tab-count-badge {
    display: inline-block;
    background: var(--accent-color);
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    margin-left: 3px;
    vertical-align: middle;
}

.shared-event-warning {
    background: rgba(255, 200, 50, 0.08);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: rgba(255, 200, 50, 0.8);
    line-height: 1.4;
}

/* ── PHASE 6 FOUNDATION: STACK PEEK ─────────────────────────────────────────── */

.stack-peek-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--text-main) 5%, transparent);
    background: var(--bg-event-override-stack-peek);
    pointer-events: none;
    z-index: -1;
    transition: transform 0.15s ease;
}

.stack-peek-layer:nth-child(1) {
    transform: translate(4px, 4px);
    opacity: 0.7;
}

.stack-peek-layer:nth-child(2) {
    transform: translate(7px, 7px);
    opacity: 0.4;
}

.stack-count-badge {
    position: absolute;
    top: 3px;
    right: 5px;
    background: var(--accent-color);
    color: #000;
    font-size: 0.55rem;
    font-weight: 800;
    border-radius: 8px;
    padding: 1px 4px;
    line-height: 1.4;
    z-index: 2;
    pointer-events: none;
}

.bg-override-swatch-row {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid color-mix(in srgb, var(--text-main) 6%, transparent);
    flex-wrap: wrap;
}

.bg-override-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    transition: transform 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.bg-override-swatch:hover {
    transform: scale(1.2);
}

.bg-override-swatch.selected {
    border-color: var(--accent-color);
    transform: scale(1.15);
}

.bg-override-swatch-none {
    background: transparent;
    position: relative;
}

.bg-override-swatch-none::after {
    content: '×';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: color-mix(in srgb, var(--text-main) 30%, transparent);
}

/* ── SHARE CONFIRMATION SCREEN ─────────────────────────────────────────────── */

.share-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: shareConfirmBgIn 0.2s ease;
}

.share-confirm-overlay.hidden {
    display: none;
}

@keyframes shareConfirmBgIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.share-confirm-card {
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 16px;
    padding: 22px 20px 18px;
    width: min(360px, 94vw);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
    animation: shareConfirmCardIn 0.22s ease;
}

@keyframes shareConfirmCardIn {
    from { transform: translateY(14px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.share-confirm-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 14px;
}

.share-confirm-preview {
    background: color-mix(in srgb, var(--text-main) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.share-confirm-preview-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
}

.share-confirm-preview-info {
    flex: 1;
    min-width: 0;
}

.share-confirm-preview-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-confirm-preview-time {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--text-main) 45%, transparent);
}

.share-confirm-preview-slices {
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--text-main) 35%, transparent);
    margin-top: 4px;
    line-height: 1.4;
}

.share-confirm-message-label {
    font-size: 0.72rem;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.share-confirm-message-input {
    width: 100%;
    background: color-mix(in srgb, var(--text-main) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: inherit;
    padding: 8px 10px;
    resize: none;
    box-sizing: border-box;
    line-height: 1.4;
}

.share-confirm-message-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--text-main) 20%, transparent);
}

.share-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.share-confirm-edit-btn {
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    background: none;
    color: color-mix(in srgb, var(--text-main) 50%, transparent);
    font-size: 0.84rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.share-confirm-edit-btn:hover {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--text-main) 25%, transparent);
}

.share-confirm-send-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 9px;
    border: none;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.share-confirm-send-btn:hover {
    opacity: 0.85;
}

.share-confirm-send-btn:active {
    opacity: 0.7;
}

.share-confirm-send-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── DATE & TIME PICKER DRAWER SYSTEM ───────────────────────────────────────── */

/* Section container */
.em-datetime-section {
    margin-top: 16px;
}

.em-datetime-row.selected-red .em-datetime-value {
    color: #ff4d4d !important; /* Vivid red for dark mode visibility */
}

/* Section header: "Starts" / "Ends" */
.em-section-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--text-main) 50%, transparent);
    margin-bottom: 8px;
}

/* Clickable row for date or time */
.em-datetime-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    margin-left: 12px;
    background: color-mix(in srgb, var(--text-main) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: border-color 0.15s, background 0.15s;
}

.em-datetime-row:hover {
    border-color: color-mix(in srgb, var(--text-main) 25%, transparent);
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
}

/* Left label: "Date" or "Time" */
.em-datetime-label {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--text-main) 60%, transparent);
}

/* Right value: "Mar 15, 2026" or "3pm" */
.em-datetime-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
}

.em-drawer {
    max-height: 0;
    overflow: hidden;
    margin-left: 12px;
    margin-bottom: 0;
    padding: 0 14px;
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: max-height 0.25s ease-out, 
                padding 0.25s ease-out, 
                margin-bottom 0.25s ease-out, 
                border-color 0.25s ease-out;
}

.em-drawer.open {
    max-height: 70px;
    padding: 12px 14px;
    margin-bottom: 4px;
    border-color: color-mix(in srgb, var(--text-main) 8%, transparent);
}

/* ── Date Input ────────────────────────────────────────────────────────────── */

.em-date-input {
    width: 100%;
    max-width: 180px;
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--box-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-family: inherit;
}

.em-date-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.em-date-input::-webkit-calendar-picker-indicator {
    filter: var(--icon-accent-filter);
    cursor: pointer;
}

/* END DATE AND TIME */

/* CSS change: date/time rows narrower than label/URL/notes fields (~40% width).
   min-width: 140px guards against tiny viewports (320px) truncating the date text.
   .em-drawer below each row is NOT constrained — it expands full-width as before. */
.em-datetime-section .em-datetime-row {
    max-width: 40%;
    min-width: 140px;
}