/* View mode layout rules — driven by body[data-calendar-view].
   Scoped to body:not(.calendar-hidden) so modes only apply when calendar is visible.
   Loaded after calendar.css via <link> in AppLayout.astro. */

/* ===== GLOBAL: hide mode-specific DOM when calendar toggled off ===== */
body.calendar-hidden #monthModeGrid,
body.calendar-hidden #monthModeSidebar,
body.calendar-hidden #yearModeGrid {
  display: none !important;
}

/* ===== WEEK (default — no overrides needed) ===== */

/* ===== DAY — active day timeline in right sidebar ===== */
@media (min-width: 1280px) {
  /* Sidebar extends to bottom (no week strip gap) */
  body:not(.calendar-hidden)[data-calendar-view="day"] .right {
    bottom: 0 !important;
  }

  /* Page content area: extend to footer, no week strip gap */
  body:not(.calendar-hidden)[data-calendar-view="day"] #page-content-container {
    bottom: var(--footer-height, 32px) !important;
  }

  /* ssm-wrap: extend to bottom */
  body:not(.calendar-hidden)[data-calendar-view="day"] .ssm-wrap {
    bottom: 0 !important;
  }

  /* Hide weekOuter (weekCard reparented to .right by JS) */
  body:not(.calendar-hidden)[data-calendar-view="day"] #weekOuter {
    display: none !important;
  }

  /* Collapse ssm-wrap so it doesn't cover content area */
  body:not(.calendar-hidden)[data-calendar-view="day"] .ssm-wrap {
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Month card: ensure full height (override desktop constraints) */
  body:not(.calendar-hidden)[data-calendar-view="day"] #monthCard {
    height: auto !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  /* The reparented weekCard inside .right: fills remaining space */
  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    padding: 0 4px !important;
    border: none;
    border-radius: 0;
    z-index: auto;
  }

  /* Hide legacy mainPanel (will be replaced by mode/filter system) */
  body:not(.calendar-hidden)[data-calendar-view="day"] #mainPanel {
    display: none !important;
  }

  /* Hide weekbar + nav in day mode */
  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekbar,
  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard #weekTitle,
  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .btn.week-nav {
    display: none !important;
  }

  /* Single column grid — only active day */
  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekgrid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekcol {
    display: none !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekcol.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Show hour labels on active day */
  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekcol.active .wday {
    flex: 1 !important;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: repeat(15, minmax(0, 1fr));
    column-gap: 2px;
    row-gap: 0;
    min-height: 0 !important;
    overflow: hidden;
    width: 100% !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekcol.active .wday.is-mini {
    grid-template-columns: max-content 1fr !important;
    gap: 2px !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekcol.active .wday.is-mini .w-hours {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekcol.active .w-hours {
    grid-column: 1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    width: max-content;
  }

  body:not(.calendar-hidden)[data-calendar-view="day"] .right > #weekCard .weekcol.active .hrow {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 0.625rem;
    color: var(--theme-text-secondary, #6b7280);
    line-height: 1;
    white-space: nowrap;
    padding-right: 3px;
    height: 100% !important;
  }
}

/* ===== WEEK DETAIL — full viewport 7-column 24-hour takeover ===== */

/* Nav: full width + compact logo in week-detail (sidebar hidden) */
@media (min-width: 480px) {
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #main-site-nav,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #sub-tab-bar,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #mobile-hamburger-overlay {
    right: 0 !important;
    transition: none !important;
  }
}

@media (min-width: 1280px) {
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .right {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #mainPanel {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #page-content-container {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #continue {
    display: none !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .ssm-wrap {
    top: var(--nav-height, 48px) !important;
    bottom: 0 !important;
    width: 100vw !important;
    align-items: stretch !important;
    z-index: 1 !important;
    transition: none !important;
  }

  /* Kill all transitions on mode switch — instant layout change */
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .ssm-wrap,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .grid,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #weekOuter,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #weekCard,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .weekgrid,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .right,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #mainPanel,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #page-content-container {
    transition: none !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .grid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #weekOuter {
    flex: 1 1 auto !important;
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Hide weekbar + eliminate gap between nav and columns */
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .weekbar {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #weekCard {
    padding-top: 0 !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #weekCard {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: auto !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Week nav arrows: keep at bottom corners but below nav z-index */
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #prevWeek,
  body:not(.calendar-hidden)[data-calendar-view="week-detail"] #nextWeek {
    z-index: 8999 !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .weekgrid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-top: 1.5em !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="week-detail"] .weekcol {
    min-height: 0 !important;
  }
}

/* ===== MONTH — continuously scrollable weeks + mini-month sidebar ===== */

/* Nav: full width (sidebar hidden, month mode uses its own sidebar) */
@media (min-width: 480px) {
  body:not(.calendar-hidden)[data-calendar-view="month"] #main-site-nav,
  body:not(.calendar-hidden)[data-calendar-view="month"] #sub-tab-bar,
  body:not(.calendar-hidden)[data-calendar-view="month"] #mobile-hamburger-overlay {
    right: 0 !important;
    transition: none !important;
  }
}

@media (min-width: 1280px) {
  body:not(.calendar-hidden)[data-calendar-view="month"] .right {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="month"] #mainPanel {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="month"] #page-content-container {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="month"] #continue {
    display: none !important;
  }

  /* Calendar extends to viewport bottom; footer overlays on top (z-index 100001) */
  body:not(.calendar-hidden)[data-calendar-view="month"] .ssm-wrap {
    top: var(--nav-height, 48px) !important;
    bottom: 0 !important;
    width: 100vw !important;
    align-items: stretch !important;
    z-index: 1 !important;
    transition: none !important;
  }

  /* Kill all transitions */
  body:not(.calendar-hidden)[data-calendar-view="month"] .ssm-wrap,
  body:not(.calendar-hidden)[data-calendar-view="month"] .grid,
  body:not(.calendar-hidden)[data-calendar-view="month"] #weekOuter,
  body:not(.calendar-hidden)[data-calendar-view="month"] #weekCard,
  body:not(.calendar-hidden)[data-calendar-view="month"] .weekgrid,
  body:not(.calendar-hidden)[data-calendar-view="month"] .right,
  body:not(.calendar-hidden)[data-calendar-view="month"] #mainPanel,
  body:not(.calendar-hidden)[data-calendar-view="month"] #page-content-container {
    transition: none !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="month"] .grid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="month"] #weekOuter {
    flex: 1 1 auto !important;
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* weekCard stays visible — month columns in #monthModeGrid sibling of #weekBar */
  body:not(.calendar-hidden)[data-calendar-view="month"] #weekCard {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
    box-shadow: none !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Hide weekbar title, week nav arrows, and original weekBar grid */
  body:not(.calendar-hidden)[data-calendar-view="month"] .weekbar {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="month"] #weekBar {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="month"] #prevWeek,
  body:not(.calendar-hidden)[data-calendar-view="month"] #nextWeek {
    display: none !important;
  }

  /* weekOuter: side-by-side weekCard + sidebar */
  body:not(.calendar-hidden)[data-calendar-view="month"] #weekOuter {
    flex-direction: row !important;
  }

  /* Month mode grid: scrollable container for week rows */
  #monthModeGrid.month-mode-weeks {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Issue 3: sticky DOW header */
  .month-dow-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--theme-surface, var(--bg, #fff));
    border-bottom: 1px solid var(--theme-border, #e5e7eb);
    flex-shrink: 0;
  }

  .month-dow-cell {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #6b7280);
    padding: 0.25rem 0;
  }

  /* Each week row: 7 equal columns, exact 1/6 height, no gaps */
  .month-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    height: var(--month-week-height, 120px);
    min-height: 0;
  }

  /* No rounded corners, no borders, no spacing on main grid day cells.
     Override base calendar.css .weekcol (border-radius:10px, overflow:visible, transition) */
  .month-week-row .weekcol {
    min-height: 0 !important;
    height: 100%;
    overflow: hidden !important;
    background: var(--bg, #fff);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    aspect-ratio: unset !important;
    transition: none !important;
  }

  /* Issue 6: alternating month shading via background, not desaturating color-mix */
  .month-week-row .weekcol.month-alt {
    background: color-mix(in srgb, var(--bg, #fff) 93%, black);
  }
  .month-week-row .weekcol.month-alt .w-timeline {
    background: color-mix(in srgb, var(--bg, #fff) 93%, black);
  }

  /* Date label: top-right corner, above busy blocks.
     Override base calendar.css .weekcol .weekday (padding + bg + active offsets) */
  .month-week-row .weekday {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 2rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--theme-text, #111) 30%, transparent);
    z-index: 5;
    pointer-events: none;
    line-height: 1;
    text-shadow: 0 0 3px var(--bg, #fff), 0 0 6px var(--bg, #fff);
    padding: 0 !important;
    background: transparent !important;
    text-align: right !important;
    white-space: nowrap;
    transition: none !important;
  }

  /* Active day highlight */
  .month-week-row .weekcol.active {
    outline: 2px solid var(--theme-primary, #667eea);
    outline-offset: -2px;
    z-index: 1;
  }

  .month-week-row .weekcol.active .weekday {
    color: var(--theme-primary, #667eea);
    text-shadow: 0 0 3px var(--bg, #fff), 0 0 6px var(--bg, #fff);
  }

  /* Unavailable days — no visual distinction in month mode;
     busy blocks already communicate the state */
  .month-week-row .weekcol.na {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
  }

  /* Timeline wrapper: fill entire column height */
  .month-week-row .wday {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  /* Hide hour labels in month mode (too compact) */
  .month-week-row .w-hours {
    display: none !important;
  }

  /* Timeline: override base calendar.css .weekcol .w-timeline border/radius but keep grid lines */
  .month-week-row .w-timeline {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    border: none !important;
    border-radius: 0 !important;
  }

  /* .wday.is-mini wrapper: kill base 10px radius */
  .month-week-row .wday.is-mini {
    border-radius: 0 !important;
  }

  /* Kill rounded corners on busy blocks in month mode */
  #monthModeGrid .tl-busy.at-timeline-top,
  #monthModeGrid .tl-busy.at-timeline-bottom {
    border-radius: 0 !important;
  }

  /* Stripes + rainbow: JS sets inline background-size + background-position per block
     so all share the grid's (0,0) origin. Matches applyWeekGradients pattern. */

  /* Selection block: centered, hide selectors, clip overflow */
  #monthModeGrid .tl-block {
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #monthModeGrid .tl-block .block-selectors-container {
    display: none !important;
  }

  /* Issue 11: show resize handle (minimal) instead of hiding */
  #monthModeGrid .tl-block .tl-handle {
    height: 4px;
    cursor: ns-resize;
  }

  #monthModeGrid .tl-block .tl-block-service-label {
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #monthModeGrid .tl-busy {
    overflow: hidden !important;
  }

  /* Holiday label: right-aligned, row below date number, white text */
  .month-holiday-label {
    position: absolute;
    right: 0.3125rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 10px);
    line-height: 1;
    text-align: right;
  }

  /* ---- Right sidebar: scrolling mini month grids ---- */

  .month-mode-sidebar {
    width: var(--month-card-width, 280px);
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid var(--theme-border, #e5e7eb);
    background: var(--bg, #fff);
    padding: 8px;
  }

  /* Mini months: no container chrome, compact sizing */
  .month-mode-mini-card {
    margin-bottom: 8px;
  }

  .month-mode-mini-title {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text, #111);
    padding: 0.25rem 0;
  }

  .month-mode-mini-grid.cal {
    gap: 4px;
  }

  .month-mode-mini-card .day {
    aspect-ratio: 1;
    padding: 4px;
    font-size: 0.6875rem;
  }

  .month-mode-mini-card .day.muted {
    visibility: hidden;
  }

  /* Stripe + rainbow on off/na cells — mirrors #monthCard rules from theme-application.css:533-562 */
  .month-mode-mini-card .cal .day.off,
  .month-mode-mini-card .cal .day.na {
    background-image: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-text, #000) 15%, var(--theme-surface, #D1D5DB) 85%) 0px,
      color-mix(in srgb, var(--theme-text, #000) 15%, var(--theme-surface, #D1D5DB) 85%) 6px,
      var(--theme-surface, #D1D5DB) 6px,
      var(--theme-surface, #D1D5DB) 12px
    ) !important;
    opacity: 1 !important;
    position: relative;
    overflow: hidden;
    border: none !important;
    border-radius: 0 !important;
  }
  .month-mode-mini-card .cal .day.off::after,
  .month-mode-mini-card .cal .day.na::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(124deg, var(--theme-primary, #667eea), var(--theme-secondary, #f093fb), var(--theme-accent, #43e97b));
    background-size: var(--month-rb-w, 100%) var(--month-rb-h, 100%);
    background-position: var(--month-rb-x, 0) var(--month-rb-y, 0);
    mix-blend-mode: color;
    opacity: 0.55;
    pointer-events: none;
    border-radius: inherit;
  }
  .month-mode-mini-card .cal .day.corner-tl.off,
  .month-mode-mini-card .cal .day.corner-tl.na { border-top-left-radius: 10px !important; }
  .month-mode-mini-card .cal .day.corner-tr.off,
  .month-mode-mini-card .cal .day.corner-tr.na { border-top-right-radius: 10px !important; }
  .month-mode-mini-card .cal .day.corner-bl.off,
  .month-mode-mini-card .cal .day.corner-bl.na { border-bottom-left-radius: 10px !important; }
  .month-mode-mini-card .cal .day.corner-br.off,
  .month-mode-mini-card .cal .day.corner-br.na { border-bottom-right-radius: 10px !important; }

  /* ===== YEAR — 3×4 (portrait) / 4×3 (landscape) grid of 13 mini months ===== */

  body:not(.calendar-hidden)[data-calendar-view="year"] .right {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="year"] #mainPanel {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="year"] #page-content-container {
    display: none !important;
  }
  body:not(.calendar-hidden)[data-calendar-view="year"] #continue {
    display: none !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="year"] .ssm-wrap {
    top: var(--nav-height, 48px) !important;
    bottom: 0 !important;
    width: 100vw !important;
    align-items: stretch !important;
    z-index: 1 !important;
    transition: none !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="year"] .ssm-wrap,
  body:not(.calendar-hidden)[data-calendar-view="year"] .grid,
  body:not(.calendar-hidden)[data-calendar-view="year"] #weekOuter,
  body:not(.calendar-hidden)[data-calendar-view="year"] #weekCard,
  body:not(.calendar-hidden)[data-calendar-view="year"] .weekgrid,
  body:not(.calendar-hidden)[data-calendar-view="year"] .right,
  body:not(.calendar-hidden)[data-calendar-view="year"] #mainPanel,
  body:not(.calendar-hidden)[data-calendar-view="year"] #page-content-container {
    transition: none !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="year"] .grid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="year"] #weekOuter {
    flex: 1 1 auto !important;
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="year"] #weekCard {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
    box-shadow: none !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
  }

  body:not(.calendar-hidden)[data-calendar-view="year"] .weekbar,
  body:not(.calendar-hidden)[data-calendar-view="year"] #weekBar,
  body:not(.calendar-hidden)[data-calendar-view="year"] #prevWeek,
  body:not(.calendar-hidden)[data-calendar-view="year"] #nextWeek {
    display: none !important;
  }

  /* Nav: full width */
  body:not(.calendar-hidden)[data-calendar-view="year"] #main-site-nav,
  body:not(.calendar-hidden)[data-calendar-view="year"] #sub-tab-bar,
  body:not(.calendar-hidden)[data-calendar-view="year"] #mobile-hamburger-overlay {
    right: 0 !important;
    transition: none !important;
  }

  /* Year grid container — fills viewport, no scroll */
  #yearModeGrid.year-mode-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.5rem;
  }

  /* Navigation bar */
  .year-mode-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0;
    flex-shrink: 0;
  }

  .year-nav-btn {
    background: var(--theme-surface, #f0f0f0);
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    color: var(--theme-text, #111);
    font-size: 1rem;
    font-weight: 600;
  }
  .year-nav-btn:hover {
    background: var(--theme-primary, #667eea);
    color: #fff;
  }

  .year-nav-label {
    font-size: 3rem;
    font-weight: 700;
    color: var(--theme-text, #111);
    line-height: 1;
  }

  /* 12 months — JS sets --year-cols based on available space */
  .year-mode-months {
    display: grid;
    grid-template-columns: repeat(var(--year-cols, 4), 1fr);
    gap: 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
  }

  /* Individual mini month in year view — fills grid cell */
  .year-mode-mini-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
  }

  .year-mode-mini-title {
    font-size: clamp(0.75rem, calc(80vh / 6 / var(--year-rows, 3)), 3rem);
    font-weight: 700;
    color: var(--theme-text, #111);
    cursor: pointer;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% / 6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: auto;
  }
  .year-mode-mini-title:hover {
    color: var(--theme-primary, #667eea);
    text-decoration: underline;
  }

  .year-mode-mini-grid.cal {
    gap: 1px;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(6, 1fr) !important;
  }

  .year-mode-mini-card .day {
    aspect-ratio: unset !important;
    padding: 0 !important;
    font-size: 0.5rem;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }

  .year-mode-mini-card .day.year-day-cell {
    position: relative;
    overflow: hidden;
  }

  /* Date number floats top-right over the timeline */
  .year-day-num {
    position: absolute;
    top: 0;
    right: 1px;
    font-size: 1rem;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
    line-height: 1;
    color: var(--theme-text, #111);
    opacity: 0.5;
  }

  /* Timeline: absolute fill the cell, no border/bg-image from base CSS */
  .year-day-timeline {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background-image: none !important;
    background: transparent !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Busy blocks: themed stripe + rainbow. JS sets background-size/position for alignment. */
  .year-day-timeline .tl-busy {
    border-radius: 0 !important;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-text, #000) 15%, var(--theme-surface, #D1D5DB) 85%) 0px,
      color-mix(in srgb, var(--theme-text, #000) 15%, var(--theme-surface, #D1D5DB) 85%) 6px,
      var(--theme-surface, #D1D5DB) 6px,
      var(--theme-surface, #D1D5DB) 12px
    ) !important;
    opacity: 1 !important;
  }
  .year-day-timeline .tl-busy::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(124deg, var(--theme-primary, #667eea), var(--theme-secondary, #f093fb), var(--theme-accent, #43e97b));
    background-size: var(--rb-w, 100vw) var(--rb-h, 100vh);
    background-position: var(--rb-x, 0) var(--rb-y, 0);
    mix-blend-mode: color;
    opacity: 0.55;
    pointer-events: none;
    border-radius: inherit;
  }

  .year-mode-mini-card .day.muted {
    visibility: hidden;
  }

  /* Stripe + rainbow on off/na cells — mirrors month mode mini month pattern */
  .year-mode-mini-card .cal .day.off,
  .year-mode-mini-card .cal .day.na {
    background-image: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-text, #000) 15%, var(--theme-surface, #D1D5DB) 85%) 0px,
      color-mix(in srgb, var(--theme-text, #000) 15%, var(--theme-surface, #D1D5DB) 85%) 6px,
      var(--theme-surface, #D1D5DB) 6px,
      var(--theme-surface, #D1D5DB) 12px
    ) !important;
    opacity: 1 !important;
    position: relative;
    overflow: hidden;
    border: none !important;
    border-radius: 0 !important;
  }
  .year-mode-mini-card .cal .day.off::after,
  .year-mode-mini-card .cal .day.na::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(124deg, var(--theme-primary, #667eea), var(--theme-secondary, #f093fb), var(--theme-accent, #43e97b));
    background-size: var(--rb-w, 100vw) var(--rb-h, 100vh);
    background-position: var(--rb-x, 0) var(--rb-y, 0);
    mix-blend-mode: color;
    opacity: 0.55;
    pointer-events: none;
    border-radius: inherit;
  }
  .year-mode-mini-card .cal .day.corner-tl.off,
  .year-mode-mini-card .cal .day.corner-tl.na { border-top-left-radius: 10px !important; }
  .year-mode-mini-card .cal .day.corner-tr.off,
  .year-mode-mini-card .cal .day.corner-tr.na { border-top-right-radius: 10px !important; }
  .year-mode-mini-card .cal .day.corner-bl.off,
  .year-mode-mini-card .cal .day.corner-bl.na { border-bottom-left-radius: 10px !important; }
  .year-mode-mini-card .cal .day.corner-br.off,
  .year-mode-mini-card .cal .day.corner-br.na { border-bottom-right-radius: 10px !important; }
}