/* styles.css -- MyBest24 app */

:root {
    --bg-main:    #f5f0eb;    /* light mode default — warm cream */
    --bg-panel:   #ede8e3;    /* popup/modal bg — slightly deeper cream */
    --bg-input:   #e2dbd3;    /* input fields, inner tiles, count buttons */
    --bg-hover:   #d9d1c8;    /* hover state for --bg-input surfaces */
    --box-border: #c8c0b8;    /* muted warm gray border */
    --accent-color: #46a5ce;
    --accent-glow: rgba(70, 165, 206, 0.4);
    --text-main:  #1a1410;    /* near-black warm */
    --text-muted: #7a6f68;    /* muted warm brown */
    --icon-size: 64px;
    --icon-size-past-or-future: 58px;
    --icon-size-slices-grid-cols-1: 80px;
    --icon-size-slices-grid-cols-2: 64px;
    --icon-size-slices-grid-cols-3: 48px;
    --icon-slices-companion: 40px; 
    --icon-size-week: 32px;
    --focus-zoom-box-width: 400px;     /* final displayed width of the centered box in focus+zoom mode */
    --focus-zoom-box-height: 256px;    /* final displayed height of the centered box in focus+zoom mode */
    --icon-size-focus-zoom: 192px;     /* icon size inside the focus+zoom box */
    --icon-size-spotlight-desktop: 512px;
    --icon-size-spotlight-mobile: 256px;
    --icon-accent-filter: none; /* set dynamically on load in colorpicker.js */
    --color-report-neutral: #9a9088;                /* food bar: no goal set — observational, light mode */
    --color-report-warning: #d4a040;                /* food bar: just over goal — warm amber */
    --color-report-danger:  #e07060;                /* food bar: clearly over goal — muted coral */
    --bg-tint-opacity: 0;
    --frozen-header-h:    61px;  /* frozen header on week view */
    --frozen-infobar-h:   49px;
    --frozen-subheader-h: 41px;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto; /* vertical scroll container */
    height: 100%; /* new, nearest scroll container for sticky context */
}

/* safari start */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
}
/* safari end */

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
}

button, input, select {
  font-family: inherit;
}


/* --- PRIMARY ACTION BUTTONS --- */
.btn-primary {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    min-width: 160px;
    transition: transform 0.1s, filter 0.2s;
    white-space: nowrap;
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* -------- HEADER ------------*/

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid var(--box-border); /* Subtle separation */
    background-color: var(--bg-main);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Ensure the center section is truly centered */
.header-section {
    flex: 1;
    display: flex;
}

.header-section.center {
    justify-content: center;
}

.header-section.right {
    justify-content: flex-end;
}

/* Branding Styles */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    cursor: pointer; /* Shows it's clickable */
}

.logo-text {
    color: var(--text-main);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.text-accent {
    color: var(--accent-color); /* Updating branding blue */
}

/* Buttons */
/* header-section left button */
.action-button {
    background: var(--bg-input);
    color: var(--accent-color);
    border: 1px solid var(--box-border);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-button:hover {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
}


/* --- COUNTDOWN COLUMN 3 ----- */
.sleep-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

#sleep-text-display {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* START MINI-GRID HOURS UNTIL SLEEP LAYOUT (Desktop First: 6 across) */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 4px;
}

.mini-sleep-box {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
}
/* END MINI-GRID HOURS UNTIL SLEEP */

/* start INFO BAR area */
/* explicitly tells user to plan their best day */

.info-bar, #app-info-modal h2, #app-wizard-modal h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
    border-bottom: 1px solid var(--box-border);
    font-size: 1.1rem; /* Bold, readable desktop size */
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.info-bar .text-accent {
    color: var(--accent-color);
    font-weight: bold;
}

/* end INFO BAR area */

/* Main Grid Area */


.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;   /* ADD THIS */
    align-items: center;      /* keeps both centered */
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.allocation-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 16px;
    width: 100%;
    max-width: 1000px;
    margin: 40px auto; /* Centered with breathing room */
}

/* ── RITUAL LABEL (day view — above hour grid) ───────────────── */

.ritual-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 12px 4px;
    opacity: 0.8;
}

/* ── NAV CONTROLS (header left) ─────────────────────────────── */

.nav-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* ── TODAY BUTTON ────────────────────────────────────────────── */

.nav-today-button {
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.3px;
    height: 30px;
}

/* Filled when user is away from today */
.nav-today-button.active {
    background: var(--accent-color);
    color: #000;
    box-shadow: 0 0 8px var(--accent-glow);
}

.nav-today-button.active:hover {
    filter: brightness(1.15);
}

/* Light mode: force white text for readability */
body:not(.dark-mode) .nav-today-button.active {
    color: #ffffff;
}

.nav-today-button:not(.active):hover {
    background: var(--accent-color);
    color: #000;
}

/* ── SUBHEADER NAV (date range + back/forward arrows) ───────── */

.subheader-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--text-main) 2%, transparent);
    border-bottom: 1px solid var(--box-border);
}

/* The range label in the center */
.subheader-date {
    font-size: 0.85rem;
    color: var(--accent-color);
    letter-spacing: 0.4px;
    text-align: center;
    min-width: 180px;
    white-space: nowrap;
}

/* Shared container for all pixel-icon nav buttons (back, arrows, calendar, hamburger) */
.nav-icon-button {
    background: transparent;
    border: 1px solid var(--box-border);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, opacity 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.nav-icon-button:hover {
    border-color: var(--accent-color);
    opacity: 0.75;
}

/* ── NAV BUTTON PIXEL ICON — shared class for all 16×16 pixelated PNG nav icons ─
   Used by: calendar button, back button, back arrow, forward arrow. Renders at exactly 16×16
   (native PNG size) so no interpolation artifacts. Filter applies accent tint. */
.nav-btn-pixel-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
    display: block;
}

/* ── START DATE PICKER ───────────────────────────────────────── */

/* Hidden native input — positioned over the icon button so the
   browser's date picker opens at the right location */
.start-date-picker-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* ── SUBHEADER DATE — tappable to open view switcher ─────────── */

/* Overrides the base .subheader-date style to signal interactivity */
#subheader-date {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    outline: none;
}

#subheader-date:hover {
    color: var(--accent-color);
}

/* END NAV ABOVE WORKSPACE 24-BOX GRID */

/* HOURS STYLING ON MAIN GRID BOXES */
/* handle PNGs */
/* THE 24 BOXES */
.hour-block {
    position: relative; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px; 
    padding: 20px 10px;
    filter: brightness(0.7); /* value of future brightness */
    overflow: hidden;
    /* Default to our manual blend variable */
    background-color: var(--hour-box-bg, #111111) !important;
    /* Rounded corners — change --hour-block-radius to e.g. 10px to enable.
       Set to 0px here to keep existing square look. Easily reversible. */
    border-radius: var(--hour-block-radius, 10px);
}

/* light mode future brightness — exclude current hour so it stays at 1.0 */
body:not(.dark-mode) .hour-block:not(.status-current):not(.status-past) { 
    filter: brightness(0.94); 
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--accent-color); /* progress bar fill color */
}

.time-label {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.75rem;
    opacity: 0.6;
    color: var(--accent-color);
}

.category-label {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;

    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-color);
}

/* 1. Set the default size for ALL icons (Past and Future) */
.box-icon {
    width: var(--icon-size-past-or-future);
    height: var(--icon-size-past-or-future);
    image-rendering: pixelated;
    object-fit: contain;
    transition: width 0.2s, height 0.2s; /* Smooth transition when hour changes */
    transform: translateY(-5px); /*move up a bit */
}

/* mute the animated icon color a bit in light mode */
body:not(.dark-mode) #box-icon { opacity: 0.85; }

/* ── Multicolor mode ────────────────────────────────────────────────────────
   Per-type bg and effect colors are computed and injected by colorpicker.js as
   CSS custom properties on :root. This block routes them to the right elements.
   JS sets: --color-TYPE-bg (box background) and --color-TYPE-effect (glow/accent).
   Keys use underscore (SELF_CARE) matching data-type attributes set by app.js.
   ─────────────────────────────────────────────────────────────────────────── */

/* Progress bar takes the type's bg color */
body.mode-multicolor [data-type="SLEEP"]     .progress-bar { background: var(--color-sleep-bg); }
body.mode-multicolor [data-type="WORK"]      .progress-bar { background: var(--color-work-bg); }
body.mode-multicolor [data-type="FITNESS"]   .progress-bar { background: var(--color-fitness-bg); }
body.mode-multicolor [data-type="SELF_CARE"] .progress-bar { background: var(--color-self-care-bg); }
body.mode-multicolor [data-type="FUN"]       .progress-bar { background: var(--color-fun-bg); }
body.mode-multicolor [data-type="FAMILY"]    .progress-bar { background: var(--color-family-bg); }
body.mode-multicolor [data-type="FREE"]      .progress-bar { background: var(--color-free-bg); }

/* Hour block background + stash effect color for current-hour glow */
body.mode-multicolor .hour-block[data-type="SLEEP"]     { background-color: var(--color-sleep-bg) !important;     --current-type-color: var(--color-sleep-effect); }
body.mode-multicolor .hour-block[data-type="WORK"]      { background-color: var(--color-work-bg) !important;      --current-type-color: var(--color-work-effect); }
body.mode-multicolor .hour-block[data-type="FITNESS"]   { background-color: var(--color-fitness-bg) !important;   --current-type-color: var(--color-fitness-effect); }
body.mode-multicolor .hour-block[data-type="SELF_CARE"] { background-color: var(--color-self-care-bg) !important; --current-type-color: var(--color-self-care-effect); }
body.mode-multicolor .hour-block[data-type="FUN"]       { background-color: var(--color-fun-bg) !important;       --current-type-color: var(--color-fun-effect); }
body.mode-multicolor .hour-block[data-type="FAMILY"]    { background-color: var(--color-family-bg) !important;    --current-type-color: var(--color-family-effect); }
body.mode-multicolor .hour-block[data-type="FREE"]      { background-color: var(--color-free-bg) !important;      --current-type-color: var(--color-free-effect); }

/* Current hour — border glow and badge use the type's effect color */
body.mode-multicolor .status-current                             { border-color: var(--current-type-color); box-shadow: 0 0 15px var(--current-type-color); }
body.mode-multicolor .status-current .slice-badge-thumbnail-cell { background: var(--current-type-color); }
body.mode-multicolor .status-current .progress-bar               { background: var(--current-type-color); }

/* Dark mode multicolor: 1px typed border on every hour block so the effect
   color is visible across the whole grid, not just the current hour.
   Current hour keeps its 2px border (from .status-current baseline) + glow,
   so it still reads clearly as "now" against the thinner non-current borders.
   Border is omitted in light mode — bg color variation is sufficient there. */
body.dark-mode.mode-multicolor .hour-block[data-type="SLEEP"]     { border: 1px solid var(--color-sleep-effect); }
body.dark-mode.mode-multicolor .hour-block[data-type="WORK"]      { border: 1px solid var(--color-work-effect); }
body.dark-mode.mode-multicolor .hour-block[data-type="FITNESS"]   { border: 1px solid var(--color-fitness-effect); }
body.dark-mode.mode-multicolor .hour-block[data-type="SELF_CARE"] { border: 1px solid var(--color-self-care-effect); }
body.dark-mode.mode-multicolor .hour-block[data-type="FUN"]       { border: 1px solid var(--color-fun-effect); }
body.dark-mode.mode-multicolor .hour-block[data-type="FAMILY"]    { border: 1px solid var(--color-family-effect); }
body.dark-mode.mode-multicolor .hour-block[data-type="FREE"]      { border: 1px solid var(--color-free-effect); }

/* Current hour in dark mode multicolor: upgrade to 2px + glow to stand out from the grid */
body.dark-mode.mode-multicolor .status-current { border-width: 2px; box-shadow: 0 0 18px var(--current-type-color); }

/* In multicolor mode, each typed .hour-block declares --icon-type-filter as a LOCAL
   custom property pointing to its own per-type filter var. The animated sprite on
   .status-current then inherits it via CSS cascade — no JS timing required.

   This replaces the previous approach of JS writing a single global --icon-type-filter
   on :root after reading .status-current[data-type]. That created a race condition:
   sprites.js RAF fires after colorpicker init, setting element.style.filter inline and
   overriding the var. By scoping --icon-type-filter to the block itself, inheritance
   resolves correctly on every render, refresh, and 60-second auto-update with zero JS. */
body.mode-multicolor .hour-block[data-type="SLEEP"]     { --icon-type-filter: var(--icon-filter-sleep); }
body.mode-multicolor .hour-block[data-type="WORK"]      { --icon-type-filter: var(--icon-filter-work); }
body.mode-multicolor .hour-block[data-type="FITNESS"]   { --icon-type-filter: var(--icon-filter-fitness); }
body.mode-multicolor .hour-block[data-type="SELF_CARE"] { --icon-type-filter: var(--icon-filter-self-care); }
body.mode-multicolor .hour-block[data-type="FUN"]       { --icon-type-filter: var(--icon-filter-fun); }
body.mode-multicolor .hour-block[data-type="FAMILY"]    { --icon-type-filter: var(--icon-filter-family); }
body.mode-multicolor .hour-block[data-type="FREE"]      { --icon-type-filter: var(--icon-filter-free); }

body.mode-multicolor .status-current .animated,
body.mode-multicolor .status-current .sprite-animation {
    filter: var(--icon-type-filter, var(--icon-accent-filter)) !important;
}
/* ── CSS-path multicolor icon filter tokens ─────────────────────────────────
   Single source of truth for the CSS filter pipeline (events modal, report
   panel, type strip, box modal). Defined here so events.css, report-activity.css
   and any future file all share identical values — change once, update everywhere.
   These are separate from --icon-filter-TYPE (canvas pipeline / colorpicker.js).
   Fallback to var(--icon-accent-filter) keeps mono mode working when tokens
   are not defined (i.e. when mode-multicolor is off).             */

body.dark-mode.mode-multicolor {
    --filter-type-sleep:     var(--icon-accent-filter) hue-rotate(16deg)  saturate(1.1);
    --filter-type-work:      var(--icon-accent-filter) hue-rotate(166deg) saturate(1.1);
    --filter-type-fitness:   var(--icon-accent-filter) hue-rotate(86deg)  saturate(1.1);
    --filter-type-self-care: var(--icon-accent-filter) hue-rotate(286deg) saturate(1.1);
    --filter-type-family:    var(--icon-accent-filter) hue-rotate(106deg) saturate(1.1);
    --filter-type-fun:       var(--icon-accent-filter) hue-rotate(206deg) saturate(2.0) brightness(1.5);
    --filter-type-free:      var(--icon-accent-filter) hue-rotate(346deg) saturate(1.1);
}

body:not(.dark-mode).mode-multicolor {
    --filter-type-sleep:     var(--icon-accent-filter) hue-rotate(-180deg) saturate(1.3) brightness(1.8);
    --filter-type-work:      var(--icon-accent-filter) hue-rotate(-30deg)  saturate(1.1) brightness(1.2);
    --filter-type-fitness:   var(--icon-accent-filter) hue-rotate(-110deg) saturate(1.5) brightness(1.8);
    --filter-type-self-care: var(--icon-accent-filter) hue-rotate(90deg)   saturate(1.3) brightness(2.0);
    --filter-type-family:    var(--icon-accent-filter) hue-rotate(-90deg)  saturate(1.3) brightness(1.8);
    --filter-type-fun:       var(--icon-accent-filter) hue-rotate(50deg)   saturate(1.8) brightness(1.8);
    --filter-type-free:      var(--icon-accent-filter) hue-rotate(180deg)  saturate(1.3) brightness(1.4);
}


/* Dark mode multicolor — label text and brightness overrides to match TinyChunk look.
   Brightness lifted to 1.0 on all non-past blocks so per-type bg colors read at full
   strength, not dimmed by the base 0.7 filter. */
body.dark-mode.mode-multicolor .hour-block:not(.status-past) {
    filter: brightness(1.0);
}
/* Category label: near-white but not pure white — easier on the eye against dark bgs */
body.dark-mode.mode-multicolor .category-label {
    color: #ffffff;
    opacity: 1.0;
}
/* Time label: super light gray so it's readable but recedes behind the category label */
body.dark-mode.mode-multicolor .time-label {
    color: #cccccc;
    opacity: 1.0;
}

/* Light mode multicolor — category label black, time label dark gray */
body:not(.dark-mode).mode-multicolor .category-label {
    color: #000000;
    opacity: 1.0;
}
body:not(.dark-mode).mode-multicolor .time-label {
    color: #333333;
    opacity: 1.0;
}

/* 2. Override the size ONLY for the current hour icon */
.status-current .box-icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

/* Animated Class - No duplication of size! */
.animated, .sprite-animation {
    background-size: auto 100%; /* don't add important here, will break the animated spritesheet atlas */
    background-repeat: no-repeat;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter); /* mono mode fallback; overridden by per-type rules above */
    display: block;
    margin: 0 auto;
}

.sprite-animation {
    background-size: auto 100%;
    image-rendering: pixelated;
    display: block;
    margin: 0 auto;
    overflow: hidden;
}

@keyframes play-sprite {
    from { background-position: 0px; }
    /* Change percentage to a pixel-based variable calculation */
    to { background-position: var(--offset-end); }
    /*to { background-position: -100%; } /* This is adjusted dynamically via JS */
}

/* end Sprite Animation logic */


/* meal badge */
.secondary-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    filter: var(--icon-accent-filter); /* mono mode fallback */
}

/* Slice grid badge — sits just below the time label, top-left */
.slice-badge {
    position: absolute;
    top: 22px;
    left: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
}

/* workspace version */
.hour-block .slice-badge { width: 20px; }

/* modal version */
.modal-header .slice-badge { width: 32px; }

.slice-badge-thumbnail-cell {
    height: 3px;
    border-radius: 1px;
    background: var(--text-muted);
    opacity: 0.5;
}

.status-current .slice-badge-thumbnail-cell {
    background: var(--accent-color);
    opacity: 1;
}

.modal-header .slice-badge {
    position: static;
    margin-top: 3px;
}

/* end slice badge code */

/* Highlight the current hour professionally */
.status-current {
    filter: brightness(1.0);
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 15px var(--accent-glow);
    z-index: 5;
}

/* Make label brighter for the current hour */
.status-current .time-label {
    color: var(--accent-color);
    opacity: 0.8;
}

/* darken past more on dark mode */
body.dark-mode .status-past    { filter: brightness(0.3); }

/* darken past less on light mode */
body:not(.dark-mode) .status-past { filter: brightness(0.8); }
    

/* clear all button */
/* bottom of page */
.warning-link {
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--text-main) 30%, transparent);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.warning-link:hover {
    color: #ff4444;
}

.clear-link {
    position: fixed;
    bottom: 20px;
    left: 20px;
}

/* START MODAL POP-UP CSS */

.hidden, .modal-hidden { 
    display: none !important; 
}

/* Unified Modal Overlay */
.modal-overlay,
#anchor-modal,
#box-modal,
#app-info-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    z-index: 1000;
}


/* Remove the margin override, let it inherit from .modal-content-info */
#app-wizard-modal .modal-content {
    width: 500px; /* Match info modal width */
    max-width: 95vw;
    margin: auto 0; /* Vertical auto centering within flex */
}

/* Base Modal Container */
.modal-content,
.modal-content-info {
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    margin: auto;
}

/* box modal and anchor modal */
.modal-content-narrow {
    width: 90%; 
    max-width: 450px;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem 0 2rem;
}

.modal-header h3 {
    font-size: 1.5rem;
    margin: 0;
    color: var(--text-main);
}



.close-button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin-top: -4px;
}

.close-button:hover {
    color: var(--text-main);
}

/* update MODALS */
/* ========== BOX MODAL VIEW MODE ========== */

/* ========== BOX MODAL VIEW MODE ========== */

/* Shared Flex Row Layouts */
.box-modal-header-controls,
.box-modal-header-right,
.box-modal-header-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.box-modal-header-title-row { gap: 5px; }

/* Shared Flex Column Layouts */
.box-view-details,
.box-view-priority-list,
.box-priority-cards,
.box-view-row,
.box-priority-card-info,
.box-modal-header-left {
    display: flex;
    flex-direction: column;
}

.box-view-details, .box-view-priority-list { gap: 12px; }
.box-priority-cards { gap: 8px; }
.box-view-row, .box-modal-header-left { gap: 4px; }
.box-priority-card-info { gap: 2px; flex: 1; min-width: 0; }

/* Global Icon Rendering */
#box-icon,
.box-priority-card-icon,
.box-icon-small {
    image-rendering: pixelated;
}

/* Buttons */
.box-modal-action-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.box-modal-edit-btn {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.box-modal-create-btn,
.box-modal-edit-btn:hover {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--bg-main);
}

.box-modal-create-btn:hover {
    filter: brightness(1.1);
}

/* View content container */
.box-view-content {
    padding: 4px 0;
}

.box-view-empty-message {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 20px 0;
}

/* Free time modal: tighten vertical space so it doesn't look cavernous */
.box-view-free-time.box-view-content {
    padding: 4px 0 0 0;
}

.box-view-free-time .box-view-empty-message {
    padding: 6px 0 0 0;
}

#box-modal .modal-body:has(.box-view-free-time) {
    padding-bottom: 1rem;
}

/* Detail Elements */
.box-view-label,
.box-priority-badge {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.box-view-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.box-view-value {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.box-view-link {
    color: var(--accent-color);
    text-decoration: none;
    word-break: break-all;
}

.box-view-link:hover {
    text-decoration: underline;
}

.box-view-notes-text {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.5;
}

/* Priority list view */
.box-priority-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 8px 0;
}

.box-priority-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease;
    position: relative;
}

.box-priority-card:hover {
    border-color: var(--text-muted);
}

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

.box-priority-card-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 1.2rem;
    padding: 4px;
    touch-action: none;
    user-select: none;
}

.box-priority-card-handle:active {
    cursor: grabbing;
}

.box-priority-card-icon {
    width: 32px;
    height: 32px;
    filter: var(--icon-accent-filter);
    flex-shrink: 0;
}

.box-priority-card-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-priority-card-time {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.box-priority-badge {
    font-size: 0.65rem;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
}

.box-priority-card-placeholder {
    background: var(--box-border);
    border-radius: 8px;
    opacity: 0.5;
}

/* Delete button in event detail view */
.box-view-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--box-border);
}

.box-view-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 8px 0;
}

.box-view-delete-btn:hover {
    color: #e74c3c;
}

/* Box Modal - Icon Display */
.box-icon-display {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

#box-icon {
    --icon-size: 100px;
    width: var(--icon-size);
    height: var(--icon-size);
}

/* Companion Layout */
.box-icon-companion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 4px 0;
}

.box-icon-small {
    width: var(--icon-slices-companion);
    height: var(--icon-slices-companion);
    flex-shrink: 0;
    align-self: flex-start;
}

.box-slices-companion {
    flex: 1;
    min-width: 0;
}

.box-slices-companion .slices-grid {
    margin: 0;
}

/* end box-icon companion (with slices) modal styling */

/* end modal header */

/* Modal Body */
.modal-body {
    padding: 1rem 2rem 2rem 2rem;
}

/* Anchor Saved Notification */
.anchor-saved-notice {
    color: var(--accent-color);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    opacity: 0;
    transition: opacity 0.3s;
    display: block;
    text-align: center;
}

/* Anchor Rows */
.anchor-row {
    display: flex;
    align-items: center; /* vertically center elements like: 
    a) label (sleep, work, etc), 
    b) the word "to" between time selectors, 
    c) and the delete button on right side */
    gap: 12px;
    margin-bottom: 1rem; /* vertical gap between anchor rows */
    min-height: 0;
}

.anchor-label { /* label text like fitness or sleep or family */
    min-width: 70px;
    font-size: 0.95rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-main) 70%, transparent);
    display: flex;
    align-items: center;
    gap: 6px;
   /* margin-bottom:15px */ /* adjust "sleep" or "fun" label up a bit to align w/ input selectors */
}


/* Anchor icons inline with labels */
.anchor-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}
 /* time inputs -- 1 2 3 4 5 6 7 8 9 10 11 12 am pm */
.input-subgroup {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    flex: 1;
}

.input-subgroup select {
    height: 36px;
    font-size: 1.1rem;
    padding: 0;
    padding-left: 6px;
    display: flex;
    align-items: center;
    min-width: 50px;
    box-sizing: border-box;
}

.input-subgroup select:focus {
    border-color: var(--accent-color);
}

.input-subgroup span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Remove Anchor Button */
.remove-anchor {
    background: transparent;
    border: 1px solid #ff4444;
    color: #ff4444;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.6;
   /* margin-bottom: 15px; */ /* move up a bit from the bottom of the row */
}

.remove-anchor:hover {
    background: #ff4444;
    color: var(--bg-main);
}

/* Add Anchor Controls -- (+ Add More button, Save and Close button) */
.add-anchor-controls {
    margin-bottom: 1.25rem;
}

/* anchor type selector box content -- with options like sleep or work or fitness or meal */
#anchor-selector {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    color: var(--text-main);
    border-radius: 6px;
    /*padding: 8px;*/
    /*margin-bottom: 0.5rem;*/
    outline: none;
    /*max-height: 10rem;*/
}

#anchor-selector option {
    padding: 6px; /* padding on each line item inside the box to select which anchor to add */
}

#anchor-selector:focus {
    border-color: var(--accent-color);
}

#anchor-selector-container {
    margin-top: 0.5rem;
}

#show-anchor-selector {
    margin-bottom: 0;
}

/*
#additional-anchors .anchor-row {
    margin-top: 1rem;
}
*/

/* The ⠿ braille handle — first child inside every anchor row */
/* ── ANCHOR MODAL: DRAG & DROP ──────────────────────────────────────────────
   Replaces the old HTML5 drag-API classes (.drag-handle, .anchor-row.dragging,
   .anchor-row.drag-over) which are no longer used. Safe to delete those rules.
   ──────────────────────────────────────────────────────────────────────────── */

/* The ⠿ braille handle — first child inside every anchor row */
.anchor-handle-container {
    cursor: grab;
    color: var(--text-muted);
    font-size: 1.1rem;
    user-select: none;
    padding: 0 4px;
    flex-shrink: 0;
    line-height: 1;
    touch-action: none;
    /* height constraints below */
    height: 36px;  /* constraint */
    display: flex; /* constraint */
    align-items: center; /* constraint */
}

.anchor-handle-container:active {
    cursor: grabbing;
}

/* Sleep row handle — dimmed, not draggable */
.static-row-dots {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.static-row-dots:active {
    cursor: default;
}

/* Dark panel background for anchor rows — matches the "Surgery Mode" look
   described in the notes. Applied to all rows including sleep. */
.primary-anchor-config {
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    border-radius: 8px;
}

/* ── END ANCHOR MODAL: DRAG & DROP ──────────────────────────────────────────*/


/* Form Groups --  like in box modal or slices modal */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.5rem;
}

/* Inline label + input on one row (Label:, URL:) */
.form-group-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.form-inline-label {
    font-size: 0.8rem;
    opacity: 0.6;
    white-space: nowrap;
    flex-shrink: 0;
    width: 36px;   /* aligns both labels to same width */
    text-align: right;
}

.form-group-inline .slice-text-input {
    flex: 1;
    margin-bottom: 0;
}

.form-group label {
    font-size: 0.95rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-main) 60%, transparent);
}

.form-group select {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1rem;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    color: var(--text-main);
    border-radius: 6px;
    outline: none;
}

.form-group select:focus {
    border-color: var(--accent-color);
}

/* Modal Actions (Buttons) */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 1rem;
}

/* anchor modal buttons */

.btn-primary { /* Save & Close button */
    background-color: var(--accent-color);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary { /* + Add More button */
    white-space: nowrap;
    width: 100%;
    background: transparent;
    border: 1px solid var(--box-border);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

.modal-body .button-row, 
.modal-body .centered-container {
    display: flex;
    justify-content: center;
    width: 100%;
    /*margin-top: 15px;*/
}

/* anchor modal -- two buttons in a row */
.button-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

/* Ensure hidden works on flex containers */
.button-row.hidden {
    display: none !important;
}



/* Never show the remove button for the Sleep row */
#anchor-row-sleep .remove-anchor { display: none !important; }

/* Keep the selector container hidden by default */
#anchor-selector-container.hidden { display: none; }


/* ========== ANCHOR PRIORITY LIST (box modal) ========== */

#box-anchor-priority-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.anchor-priority-row {
    background: var(--bg-main);
    border: 1px solid var(--box-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anchor-priority-row:first-child {
    border-color: var(--accent-color);
}

.anchor-priority-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.anchor-priority-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
    touch-action: none;
    padding: 2px 4px;
}

.anchor-priority-handle:active {
    cursor: grabbing;
}

.anchor-priority-label {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
}

.anchor-priority-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.anchor-priority-type-strip {
    display: flex;
    flex-wrap: nowrap; /* force single row */
    gap: 3px;
}

.anchor-priority-type-strip .picker-tile.type-tile {
    flex: 1 1 0;
    min-width: 0; /* allow shrinking below 44px so all 6 fit */
    padding: 4px 2px;
    font-size: 0.65rem;
}

.anchor-priority-type-strip .picker-tile.type-tile img {
    width: 20px;
    height: 20px;
}

.anchor-priority-time {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* -- END ANCHOR MODAL -- */


/* --- APP INFO MODAL & WIZARD MODAL (SHARED BRANDING) --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Nearly solid black for focus */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensure it sits on top of everything */
}

.modal-content-info {
    width: 500px;
    max-width: 95vw;
}

/* Center Branding in Header - SHARED by both info modal and wizard */
#app-info-modal .modal-header,
#app-wizard-modal .modal-header {
    position: relative;
    display: flex;
    justify-content: center; 
    padding: 2.5rem 2rem 0.5rem;
}

/* Correct class from your HTML - SHARED */
#app-info-modal .brand-logo-centered,
#app-wizard-modal .brand-logo-centered {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    justify-content: center;
    gap: 12px;
    cursor: default;
}

/* Wizard gets smaller logo */
#app-info-modal .logo-icon { 
    height: 48px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

#app-wizard-modal .logo-icon { 
    height: 32px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* Wizard gets smaller app name text */
#app-info-modal h1.logo-text { 
    font-size: 2.5rem; 
    margin: 0;
    line-height: 1;
    display: block; 
    white-space: nowrap;
}

#app-wizard-modal h1.logo-text { 
    font-size: 1.8rem; 
    margin: 0;
    line-height: 1;
    display: block; 
    white-space: nowrap;
}

/* Pin Close Button to Corner */
#app-info-modal .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
}


#app-info-modal h3 { 
    font-size: 1.5rem; 
    color: var(--accent-color); 
    margin: 1.5rem 0 0.8rem; /* Adjusted margin for better spacing */
    line-height: 1.0; 
    text-align: left; 
}

/* click the anchor text to open anchor modal */
.clickable-link { 
    color: var(--accent-color); 
    text-decoration: none; /* No underline */
}

/* Optional: Make the blue word slightly brighter when hovering anywhere on the line */
#trigger-anchor-modal:hover .clickable-link {
    filter: brightness(1.2);
}

/* List & Body Text */
#app-info-modal p, 
#app-info-modal ul { 
    color: color-mix(in srgb, var(--text-main) 85%, transparent); 
    line-height: 1.6; 
    text-align: left;
}

#app-info-modal ul li { 
    font-size: 1.1rem; 
    margin-bottom: 0.8rem; 
}

#app-info-modal strong { 
    color: var(--accent-color); 
}

/* Footer Distinction */
#app-info-modal .modal-footer-note {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--box-border);
    font-size: 1rem;
    opacity: 0.6;
}

#app-info-modal ul {
    margin-top: 0;        /* Remove top gap from list */
}

.info-modal-footer {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.5rem;
    margin-top: auto;
    border-top: 1px solid var(--box-border);
}

/* END MODAL POP-UP CSS */


/* ── SLICES FEATURE ──────────────────────────────────────────────────────────── */

.slices-featured-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Section container */

.slices-section {
    margin: 0 0 1.5rem 0;
    padding-top: 1rem;
    /*border-top: 1px solid var(--box-border);*/
}

/* Ghost */
.ghost-thumb {
    display: grid;
    gap: 3px;
    padding: 4px;
    width: 48px;
    height: 16px;
    border: 1px dashed var(--box-border);
    border-radius: 4px;
    opacity: 0.25;
    cursor: pointer;
    transition: opacity 0.15s, border-color 0.15s;
    box-sizing: border-box;
}
.ghost-thumb:hover { opacity: 0.6; }
.ghost-thumb.active {
    opacity: 1;
    border-color: var(--accent-color);
    border-style: solid;
}

.ghost-1col { grid-template-columns: 1fr; }
.ghost-2col { grid-template-columns: 1fr 1fr; }
.ghost-3col { grid-template-columns: 1fr 1fr 1fr; }

.ghost-cell {
    background: var(--text-muted);
    border-radius: 1px;
}

.ghost-thumb.active .ghost-cell {
    background: var(--accent-color);
}

/* ---- + Slice button — muted, same weight as ADD MEAL ---- */
.slices-add-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.2s;
    white-space: nowrap;
}
.slices-add-btn:hover { color: var(--text-main); }

.slices-add-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 6px;
}

/* ---- Active slices control bar ---- */
.slices-control-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Count strip: 0 2 3 4 ... 12 */
.slices-count-strip {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.count-btn {
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.count-btn:hover { color: var(--text-main); border-color: var(--accent-color); }
.count-btn.active { color: var(--accent-color); border-color: var(--accent-color); }

/* ---- Slice cards grid ---- */
.slices-grid {
    display: grid;
    gap: 6px;
}
.slices-grid-cols-1 { grid-template-columns: 1fr; }
.slices-grid-cols-2 { grid-template-columns: 1fr 1fr; }
.slices-grid-cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.slice-card {
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 40px;
    min-width: 0;
    transition: border-color 0.15s, background 0.15s;
}
.slice-card:hover { border-color: var(--accent-color); background: var(--bg-hover); }

.slice-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.slice-name {
    font-size: 0.8rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Workspace grid — slice underline indicator ---- */

/* ---- Slice edit modal ---- */
.slice-edit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    z-index: 2000; /* above box-modal (1000) */
}

.slice-edit-modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.8);
    width: 90%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    margin: auto;
}

/* Reuse .form-group select styles for the slice start-time select */
.slice-edit-modal-content select {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1rem;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    color: var(--text-main);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
}
.slice-edit-modal-content select:focus { border-color: var(--accent-color); }

/* Top Save Button for Slices Modal */
/* Container for absolute positioning */
#slice-edit-modal .modal-header {
    position: relative;
    padding-bottom: 45px; /* Create space for the button below the title/X */
}

/* New Save Button positioned under the X */
.slice-save-btn-top {
    position: absolute;
    top: 50px;    /* Sit below the X button */
    right: 32px;  /* Align with the X button right edge */
    background: var(--accent-color, #4a90e2);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
}

/* Dark mode aesthetic adjustment for MyBest24 */
.slice-save-btn-top:hover {
    filter: brightness(1.2);
}

/* Reuse input styling for slice name field */
.slice-text-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    border-radius: 6px;
    color: var(--text-main);
    font-family: inherit;
    outline: none;
}
.slice-text-input:focus { border-color: var(--accent-color); }

/* ── END SLICES FEATURE ──────────────────────────────────────────────────────── */

/* ── BOX MODAL: TYPE STRIP & VARIANT GRID ────────────────────────────────────
   Extends existing .count-btn tile pattern — see those rules above.
   ──────────────────────────────────────────────────────────────────────────── */

/* Shared base for type and variant tiles — mirrors col-btn/count-btn pattern */
.picker-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--box-border);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.picker-tile:hover { background: var(--bg-hover); border-color: var(--accent-color); }
.picker-tile.active { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 12%, transparent); }

.picker-tile img {
    image-rendering: pixelated;
    object-fit: contain;
    filter: var(--icon-accent-filter);
}
.picker-tile.active img { filter: var(--icon-accent-filter) brightness(1.3); }

/* Reuses .time-label / .category-label conventions: tiny, uppercase, muted */
.picker-tile span {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}
.picker-tile.active span { color: var(--accent-color); }

/* Type strip — equal-width tiles across the modal */
.type-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.type-tile { flex: 1 1 0; min-width: 44px; padding: 6px 8px; }
.type-tile img { width: 28px; height: 28px; }

/* Variant grid — wrapping, scrollable if many (e.g. Fitness ~25 variants) */
.variant-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1.25rem;
    max-height: 220px; /* ~2.5 rows */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--box-border) transparent;
}
.variant-tile { width: 60px; padding: 6px 4px 5px; flex-shrink: 0; }
.variant-tile img { width: 48px; height: 48px; }
.variant-tile span { line-clamp: 2; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* ── END BOX MODAL: TYPE STRIP & VARIANT GRID ────────────────────────────────*/

/* ── BOX MODAL: GROUPED VARIANT GRID ────────────────────────────────────────
   Used when variants carry a 'group' field (e.g. FITNESS: Upper/Lower/Core/Cardio).
   The outer .variant-grid scroll container is reused; groups stack inside it.
   ──────────────────────────────────────────────────────────────────────────── */

   
.variant-grid-grouped {
    flex-direction: column; /* stack groups vertically inside the scroll window */
    gap: 0;
}

.variant-group {
    margin-bottom: 6px;
    margin-left: 24px;
    margin-right: 0px;
}

.variant-group-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 4px 0 4px;
    border-bottom: 1px solid var(--box-border);
    margin-bottom: 6px;
}

.variant-group-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── END BOX MODAL: GROUPED VARIANT GRID ────────────────────────────────────*/

/* ── BOX MODAL: MEAL TOGGLE ──────────────────────────────────────────────────
   Single button — reuses .picker-tile base. Wider, horizontal layout.
   ──────────────────────────────────────────────────────────────────────────── */

.meal-toggle {
    flex-direction: row;       /* icon + label side by side */
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    justify-content: center;
}

.meal-toggle img {
    width: 24px;
    height: 24px;
}

.meal-toggle.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── END BOX MODAL: MEAL TOGGLE ──────────────────────────────────────────────*/

/* FULL CALENDAR */

/* ── WEEK VIEW ─────────────────────────────────────── */

/*
 * The week grid sits inside #hour-grid (.allocation-grid).
 * We override the grid display for week view by wrapping everything
 * in .week-view-wrapper, which handles its own layout.
 */

.week-view-wrapper {
    display: flex;
    gap: 2px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--box-border) var(--bg-main);
}

.week-view-wrapper::-webkit-scrollbar {
    height: 6px;
}

.week-view-wrapper::-webkit-scrollbar-track {
    background: var(--bg-main);
}

.week-view-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--box-border);
    border-radius: 3px;
}

.week-view-outer {
    width: 100%;
    box-sizing: border-box;
}

/* Each day column — equal width, all 7 visible by default */
.week-col {
    flex: 1 1 0;
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left:10px; /* left side border visible on 1st column */
}


/* Today's column gets a subtle highlight */
.week-col-today {
    background: color-mix(in srgb, var(--accent-color) 4%, transparent);
    border-radius: 8px;
}

/* Headers row — outside overflow-x:auto so position:sticky works on page scroll.
   overflow:hidden hides its own scrollbar; JS syncs scrollLeft with the wrapper. */
.week-headers-row {
    display: flex;
    gap: 2px;
    width: 100%;
    overflow: hidden;
    position: sticky;
    top: 0;                    /* overridden by body.week-view-active to full stack offset */
    z-index: 10;
    background: var(--bg-main);
    border-bottom: 1px solid var(--box-border);
}

/* Column header cell — direct child of .week-headers-row */
.week-col-header {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 4px 8px 10px;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-col-header:hover {
    color: var(--accent-color);
}

/* Today's column header */
.week-col-header-today {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Individual hour cell in week view */
.week-hour-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 5px 3px;
    border: 1px solid var(--box-border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 52px;
    background: var(--hour-box-bg, var(--bg-panel));
    overflow: visible;
}

/* darken future on today's cells only on light mode */
body:not(.dark-mode) .week-col-today .week-hour-cell:not(.status-current):not(.status-past) { 
    filter: brightness(0.94); 
}

.week-hour-cell:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

/* darken past on dark mode */
.week-hour-cell.status-past {
    filter: brightness(0.4);
}

/* darken past less on light mode */
body:not(.dark-mode) .week-hour-cell.status-past { 
    filter: brightness(0.8); 
}

.week-hour-cell.status-current {
    border-color: var(--accent-color);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* Time label inside week cell — top left like day view */
.week-time-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    line-height: 1;
    align-self: flex-start;
    padding-left: 3px;
}

/* Icon inside week cell — width/height set via JS so --icon-size is correct for sprite animation */
.week-box-icon {
    object-fit: contain;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
    display: block;
    margin: 0;
    flex-shrink: 0;
}

/* Animated sprite in week cell must not inherit auto margins from background-position calc */
.week-box-icon.animated {
    margin: 0 !important;
}


/* ── WEEK VIEW RITUAL LABEL (per column) ─────────────────────── */

/* ── WEEK VIEW: FROZEN HEADER STACK ──────────────────────────── */
/*
 * body.week-view-active is added by renderWeekView(), removed by all other
 * view renderers. Activates the full sticky stack so nothing scrolls off screen.
 *
 * Stack (top → bottom):
 *   .app-header       top: 0                         (always sticky)
 *   .info-bar         top: --frozen-header-h
 *   .subheader-nav    top: header + infobar
 *   .week-headers-row top: all three combined
 *
 * .info-bar is display:none on mobile → its height is 0px there.
 */


body.week-view-active .info-bar {
    position: sticky;
    top: var(--frozen-header-h);
    z-index: 99;
    background: var(--bg-main);
}

body.week-view-active .subheader-nav {
    position: sticky;
    top: calc(var(--frozen-header-h) + var(--frozen-infobar-h));
    z-index: 98;
    background: var(--bg-main);
}

body.week-view-active .week-headers-row {
    top: calc(
        var(--frozen-header-h) +
        var(--frozen-infobar-h) +
        var(--frozen-subheader-h)
    );
    z-index: 97;
}

.week-ritual-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--accent-color);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-align: center;
    padding: 3px 4px 4px;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* ── MONTH VIEW ──────────────────────────────────────────────── */

.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    width: 100%;
}

/* Day-of-week header row */
.month-dow-header {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 2px;
    border-bottom: 1px solid var(--box-border);
}

/* Each day cell */
.month-day-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 8px;
    min-height: 90px;
    border: 1px solid var(--box-border);
    border-radius: 4px;
    background: var(--hour-box-bg, var(--bg-panel));
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

/* light mode reduce bg effect lower # */
body:not(.dark-mode) .month-day-cell  { background: color-mix(in srgb, var(--hour-box-bg) 30%, var(--bg-panel)); }

/* dark mode no bg color */
body.dark-mode .month-day-cell  { background: var(--bg-panel); }

.month-day-cell:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.month-day-blank {
    background: transparent;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* Today highlight */
.month-day-today {
    border-color: var(--accent-color);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* Selected day (non-today) */
.month-day-active {
    border-color: var(--accent-color);
    opacity: 0.8;
}

/* Date number */
.month-day-number {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1;
}

.month-day-today .month-day-number {
    color: var(--accent-color);
}

/* Ritual name inside day cell — accent color, consistent with week view */
.month-ritual-label {
    font-size: 0.62rem;
    color: var(--accent-color);
    opacity: 0.85;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.3;
    word-break: break-word;
}

/* ── YEAR VIEW ───────────────────────────────────────────────── */

.year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    padding: 4px;
}

.year-month-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 6px 8px;
    border: 1px solid var(--box-border);
    border-radius: 8px;
    background: var(--hour-box-bg, var(--bg-panel));
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

/* reduce bg color effect in light mode - adj # lower to reduce effect, higher # greater effect */
body:not(.dark-mode) .year-month-tile { background: color-mix(in srgb, var(--hour-box-bg) 30%, var(--bg-panel)); }

/* no bg color effect in dark mode */
body.dark-mode .year-month-tile { background: var(--bg-panel); }

.year-month-tile:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.year-month-today {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px var(--accent-glow);
}

.year-month-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.3px;
    line-height: 1;
}

.year-month-today .year-month-name {
    color: var(--accent-color);
}

.year-month-year {
    display: none; /* year is shown in the subheader already */
}

/* Mini calendar thumbnail inside each year tile */
.year-mini-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px 1px;
    width: 100%;
    margin-top: 6px;
}

.year-mini-dow {
    font-size: 0.45rem;
    color: var(--text-muted);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding-bottom: 2px;
    text-transform: uppercase;
}

.year-mini-day {
    font-size: 0.58rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1px 0;
    border-radius: 2px;
    line-height: 1.4;
}

.year-mini-day.is-today {
    background: var(--accent-color);
    color: #000;
    font-weight: 700;
    border-radius: 2px;
}

.year-mini-day.is-blank {
    color: transparent;
}


/* ========== EVENT MODAL (Create & Edit) ========== */

.event-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.event-modal-overlay.open {
    opacity: 1;
}

.event-modal-card {
    background: var(--bg-panel);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.28s ease;
}

.event-modal-overlay.open .event-modal-card {
    transform: translateY(0);
}

@media (min-width: 600px) {
    .event-modal-overlay {
        align-items: center;
    }
    .event-modal-card {
        border-radius: 16px;
        max-height: 85vh;
    }
}

.event-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--box-border);
}

.event-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.event-modal-body {
    padding: 20px;
}

/* Icon display */
.em-icon-display {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.em-icon-display.has-slices {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.em-box-icon {
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
}

/* Type strip */
.event-type-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* EM -- Events Modal Time Row */
/* Time row */
.em-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.em-time-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.em-time-sep {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Shared base for all time selects to ensure DRY code */
.em-time-select-base {
    width: 64px !important;
    min-width: 64px !important;
    text-align: center;
    padding: 2px 5px;
    background-color: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--box-border);
    border-radius: 4px;
}

/* Maintain specific class hooks for logic while keeping layout consistent */
.em-start-hour-dark, .em-start-min-sel, .em-start-period,
.em-end-hour-dark, .em-end-min-sel, .em-end-period {
    display: inline-block;
}

/* end EM Events Modal Time Row */

/* Actions */
.event-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--box-border);
}

/* end event modal */


/* ---- MOBILE ------ */

/* This handles the switch from 6 columns to 4 columns */
@media (max-width: 800px) {

    :root {
        --icon-size: 48px;
        --icon-size-past-or-future: 44px;
        --icon-size-week: 28px;
    }

     .logo-icon {
        display: none;
        /* width: 22px;
        height: 22px; */
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .subheader-date {
        font-size: 0.78rem;
        min-width: 120px;
    }

    .nav-today-button {
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    /* 1. Shrink the info bar */
    .info-bar {
        display: none;
    }

    #ritual {
        display: none;
    }
    .workspace {
        padding-top: 0px;
    }

    .hour-block {
        min-height: 50px;
    }

    /* 2. SWITCH TO 4 COLUMNS (6 rows of 4 = 24) */
    .allocation-grid {
        grid-template-columns: repeat(4, 1fr); 
        gap: 8px;
        margin: 8px auto;
        aspect-ratio: auto; /* Remove fixed ratio so it can grow vertically */
    }

    /* 3. Adjust mini-grid */
    .mini-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
    }

    .mini-sleep-box {
        width: 4px;
        height: 4px;
    }

    /* meal icon */
    .secondary-badge {
        width: 16px;
        height: 16px;
    }

    .slice-badge {
        gap: 1px;
        width: 18px;
        padding: 1px;
    }

    /* 4. Header adjustments for tight spaces */
    .app-header {
        padding: 15px 20px;
    }

    #sleep-text-display {
        /* Use !important to override Safari user-agent styles */
        display: none !important;
        
        /* Forces Safari to treat the element as non-existent in the accessibility tree */
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* anchor modal */
    .input-subgroup select { appearance: none; } /* remove the arrows on selectors */
    .input-subgroup {
        /* max-height: 2.5rem;*/ /* reduce what looks like "padding" height between anchor rows */
        gap: 0; /* no horizontal space between inputs */
    }
    /* #anchor-selector { max-height: 5rem; }*/  /* reduce height on "add more" selector */
}

@media (max-width: 600px) {

    /* Mobile: week view -- freeze header */
    :root {
        --frozen-header-h:    55px;
        --frozen-infobar-h:   0px;
        --frozen-subheader-h: 41px;
       /* --focus-zoom-box-width: 386px;   /* final displayed width on mobile */
       /* --focus-zoom-box-height: 256px;  /* final displayed height on mobile */
       /* --icon-size-focus-zoom: 192px;   /* icon size inside the focus+zoom box on mobile */
    }

    /* Mobile: week view -- use smaller cells */
    .week-hour-cell {
        min-height: 48px;
        padding: 4px 2px;
    }

    .week-time-label {
        font-size: 0.6rem;
    }

    /* Mobile: week view -- narrow columns so user can swipe through days */
    .week-col {
        flex: 0 0 calc(100% / 3.2);
        min-width: 70px;
    }
    .week-col-header {
        flex: 0 0 calc(100% / 3.2);
        min-width: 70px;
    }

    /* Mobile: month view -- displays smaller cells */
    .month-day-cell {
        min-height: 48px;
        padding: 4px;
    }

    .month-day-number {
        font-size: 0.72rem;
    }

    .month-ritual-label {
        font-size: 0.55rem;
    }

    /* Mobile: Year view -- months displayed in 3 columns view */
    .year-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .year-month-tile {
        padding: 8px 4px 6px;
    }

    .year-month-name {
        font-size: 0.7rem;
    }

    .year-mini-dow,
    .year-mini-day {
        font-size: 0.42rem;
    }
}

/* ── HAMBURGER GLOBAL ACTION MENU ───────────────────────────────────────────── */

#hamburger-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#global-action-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 10px;
    padding: 6px 0;
    width: 185px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.12s ease, opacity 0.12s ease;
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
}

#global-action-menu:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.gam-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    color: var(--text-main);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.1s;
    user-select: none;
}

.gam-item:hover {
    background: var(--bg-hover);
}

.gam-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex-shrink: 0;
    filter: var(--icon-accent-filter);
    opacity: 0.8;
}

.gam-item-danger {
    color: #ff5555;
    border-top: 1px solid var(--box-border);
    margin-top: 4px;
}

.gam-item-danger .gam-icon {
    filter: none;
    opacity: 1;
}

/* ── END HAMBURGER GLOBAL ACTION MENU ───────────────────────────────────────── */

/* ── DARK MODE OVERRIDE ──────────────────────────────────────────────────────
   Applied by colorpicker.js when the user toggles "Dark mode" on.
   Restores all dark values that the light-mode :root defaults replaced.
   All components automatically inherit these via CSS vars — no per-component
   dark overrides needed.
   ──────────────────────────────────────────────────────────────────────────── */

body.dark-mode {
    --bg-main:    #0a0a0a;
    --bg-panel:   #121212;
    --bg-input:   #1a1a1a;
    --bg-hover:   #222222;
    --box-border: #333333;
    --text-main:  #ffffff;
    --text-muted: #999999;
    --color-report-neutral: rgba(255,255,255,0.38); /* overrides :root value — visible on dark panel */
}

/* ── END DARK MODE OVERRIDE ──────────────────────────────────────────────────── */

/* ── DELETE RECURRENCE DIALOG ────────────────────────────────────────────────
   Two-option panel: "This day only" vs "All occurrences".
   Sits above the box modal (z-index 1100).
   ─────────────────────────────────────────────────────────────────────────── */

#delete-recurrence-dialog {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.del-rec-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.del-rec-panel {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    padding: 24px 24px 18px;
    width: 90%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: cp-fade-in 0.12s ease;
}

.del-rec-title {
    font-size: 0.95rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.4;
}

.del-rec-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 6px;
    line-height: 1.5;
}

.del-rec-actions {
    display: flex;
    gap: 10px;
}

.del-rec-btn {
    flex: 1;
}

.del-rec-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 6px 0 2px;
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.1s;
}

.del-rec-cancel:hover { opacity: 1; }

/* ── END DELETE RECURRENCE DIALOG ─────────────────────────────────────────── */