/* stage-4-calendar-layer: Focus Warm Glass OS calendar surface */

.calendar-sheet {
  --stage4-calendar-terracotta: #c56a4b;
  --stage4-calendar-coral: #d96b5f;
  --stage4-calendar-glass: rgba(255, 255, 255, 0.105);
  --stage4-calendar-glass-strong: rgba(255, 255, 255, 0.18);
  --stage4-calendar-dark-glass: rgba(20, 18, 16, 0.10);
  --stage4-calendar-cell-border: rgba(255, 255, 255, 0.22);
  --stage4-calendar-cell-shadow: 0 12px 28px rgba(0, 0, 0, 0.11);
  --stage4-calendar-text: rgba(255, 255, 255, 0.94);
  --stage4-calendar-muted: rgba(255, 255, 255, 0.70);
  position: relative;
  min-height: clamp(520px, 52vw, 690px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: clamp(24px, 2.4vw, 32px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    var(--calendar-season-gradient);
  box-shadow:
    0 30px 80px rgba(36, 29, 22, 0.18),
    0 0 42px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 18%, transparent);
  isolation: isolate;
  overflow: hidden;
}

.calendar-sheet::before,
.calendar-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.calendar-sheet::before {
  z-index: 0;
  background-image:
    var(--calendar-month-image),
    var(--calendar-month-fallback-image),
    var(--calendar-season-image),
    var(--calendar-season-gradient);
  background-size: cover;
  background-position: center;
  filter: saturate(1.16) contrast(1.06) brightness(1.04);
  transform: scale(1.006);
  opacity: 0.98;
  transition:
    opacity var(--focus-motion-smooth, 320ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    filter var(--focus-motion-smooth, 320ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    transform var(--focus-motion-smooth, 320ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1));
}

.calendar-sheet::after {
  z-index: 1;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.18), transparent 27%),
    radial-gradient(circle at 74% 20%, color-mix(in srgb, var(--calendar-season-accent, #d89a3d) 24%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(15, 14, 13, 0.16), rgba(15, 14, 13, 0.30) 45%, rgba(15, 14, 13, 0.22)),
    var(--calendar-season-noise);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
  opacity: 0.92;
}

.calendar-sheet.is-season-changing::before {
  opacity: 0.70;
  filter: blur(2px) saturate(1.18) contrast(1.08);
  transform: scale(1.02);
}

.calendar-sheet > * {
  position: relative;
  z-index: 2;
}

.calendar-sheet .sheet-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(14px, 2vw, 22px);
  color: var(--stage4-calendar-text);
}

.calendar-sheet .sheet-head > div {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.calendar-sheet .sheet-head p {
  margin: 0;
  color: var(--stage4-calendar-muted);
  font-size: 0.84rem;
  font-weight: 650;
}

.calendar-sheet .sheet-head h2 {
  margin: 0;
  color: var(--stage4-calendar-text);
  font-size: clamp(1.65rem, 2.6vw, 2.38rem);
  font-weight: 650;
  letter-spacing: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.22);
}

.calendar-sheet .round-control {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.22);
  color: var(--stage4-calendar-text);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    border-color var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    background var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1));
}

.calendar-sheet .round-control:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 54%, rgba(255, 255, 255, 0.38));
  background: rgba(255, 255, 255, 0.32);
}

.calendar-sheet .weekdays,
.calendar-sheet .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, 1fr));
  gap: clamp(7px, 0.9vw, 10px);
}

.calendar-sheet .weekdays {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.78rem;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.20);
}

.calendar-sheet .weekdays span:nth-child(n + 6) {
  color: color-mix(in srgb, var(--stage4-calendar-terracotta) 82%, #fff);
}

.calendar-sheet .day-cell {
  display: grid;
  align-content: space-between;
  min-width: 0;
  min-height: clamp(66px, 6.1vw, 94px);
  padding: clamp(8px, 0.9vw, 12px);
  border: 1px solid var(--stage4-calendar-cell-border);
  border-radius: 18px;
  background: var(--stage4-calendar-glass);
  color: var(--stage4-calendar-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    background var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    border-color var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    box-shadow var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1));
}

.calendar-sheet .day-cell:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 48%, rgba(255, 255, 255, 0.30));
  background: var(--stage4-calendar-glass-strong);
  box-shadow:
    var(--stage4-calendar-cell-shadow),
    0 0 28px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 20%, transparent);
}

.calendar-sheet .day-cell > span:last-child {
  justify-self: end;
  align-self: end;
  color: currentColor;
  font-size: clamp(1rem, 1.6vw, 1.34rem);
  font-weight: 650;
  line-height: 1;
}

.calendar-sheet .day-cell.outside {
  color: rgba(255, 255, 255, 0.44);
  background: rgba(18, 17, 15, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
}

.calendar-sheet .day-cell.today {
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 30%, transparent), transparent 54%),
    rgba(255, 255, 255, 0.16);
  border-color: color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 64%, rgba(255, 255, 255, 0.42));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 36%, transparent),
    0 0 34px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.calendar-sheet .day-cell.selected {
  color: #fff;
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.26), transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 38%, transparent), rgba(255, 255, 255, 0.16));
  border-color: color-mix(in srgb, var(--primary) 82%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 54%, transparent),
    0 18px 42px color-mix(in srgb, var(--primary) 28%, transparent);
}

.calendar-sheet .day-cell.holiday {
  border-color: color-mix(in srgb, var(--stage4-calendar-terracotta) 58%, rgba(255, 255, 255, 0.22));
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--stage4-calendar-coral) 18%, transparent), transparent 50%),
    var(--stage4-calendar-glass);
}

.calendar-sheet .day-cell.holiday > span:last-child {
  color: color-mix(in srgb, var(--stage4-calendar-coral) 84%, #fff);
}

.calendar-sheet .day-cell.holiday.selected {
  border-color: color-mix(in srgb, var(--stage4-calendar-terracotta) 76%, #fff);
}

.calendar-sheet .marker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  min-height: 11px;
  max-width: 100%;
}

.calendar-sheet .dot,
#markerLegend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--primary);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 0 12px currentColor;
}

.calendar-sheet .dot.blue,
#markerLegend .dot.blue {
  background: var(--label-reminder, #5678f5);
}

.calendar-sheet .dot.red,
#markerLegend .dot.red {
  background: var(--label-birthday, #d96b5f);
}

.calendar-sheet .dot.green,
#markerLegend .dot.green {
  background: var(--label-study, #5f9073);
}

/* stage-16-calendar-cells-layer: refined Warm Glass OS date cells, markers, states */
.calendar-sheet {
  --calendar-cell-hover-glow: 0 18px 42px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 24%, transparent);
  --calendar-cell-current-glow:
    0 0 0 1px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 34%, transparent),
    0 0 30px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 28%, transparent);
  --calendar-weekend-outline: color-mix(in srgb, var(--stage4-calendar-terracotta) 58%, rgba(255, 255, 255, 0.24));
}

.calendar-sheet .focus-calendar-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-content: stretch;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.14), transparent 38%),
    color-mix(in srgb, var(--stage4-calendar-glass) 76%, transparent);
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.28) 70%, var(--calendar-season-accent, var(--primary)) 30%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 26px rgba(0, 0, 0, 0.075);
}

.calendar-sheet .focus-calendar-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 16%, color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 24%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%);
  opacity: 0;
  transition:
    opacity var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1)),
    transform var(--focus-motion-standard, 220ms) var(--focus-ease, cubic-bezier(.2,.8,.2,1));
}

.calendar-sheet .focus-calendar-cell > * {
  position: relative;
  z-index: 1;
}

.calendar-sheet .focus-calendar-cell:is(:hover, :focus-visible) {
  box-shadow:
    var(--calendar-cell-hover-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.calendar-sheet .focus-calendar-cell:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: scale(1.015);
}

.calendar-sheet .focus-calendar-cell > .focus-calendar-day-number {
  place-self: center;
  padding: 0;
  margin-top: -2px;
  letter-spacing: 0;
}

.calendar-sheet .focus-calendar-marker-row {
  position: absolute;
  left: clamp(8px, 0.85vw, 12px);
  right: clamp(8px, 0.85vw, 12px);
  bottom: clamp(8px, 0.85vw, 11px);
  align-items: center;
  min-height: 10px;
  max-height: 22px;
  overflow: hidden;
}

.calendar-sheet .focus-calendar-marker {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.10),
    0 0 10px color-mix(in srgb, currentColor 52%, transparent);
}

.calendar-sheet .focus-calendar-cell-muted {
  background: rgba(18, 17, 15, 0.05);
}

.calendar-sheet .focus-calendar-cell-muted .focus-calendar-day-number,
.calendar-sheet .focus-calendar-cell-muted .focus-calendar-marker-row {
  opacity: 0.58;
}

.calendar-sheet .focus-calendar-cell-weekend {
  border-color: var(--calendar-weekend-outline);
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--stage4-calendar-coral) 16%, transparent), transparent 48%),
    color-mix(in srgb, var(--stage4-calendar-glass) 72%, transparent);
}

.calendar-sheet .focus-calendar-cell-weekend .focus-calendar-day-number {
  color: color-mix(in srgb, var(--stage4-calendar-coral) 78%, #fff);
}

.calendar-sheet .focus-calendar-cell-current {
  border-color: color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 68%, rgba(255, 255, 255, 0.38));
  box-shadow:
    var(--calendar-cell-current-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.calendar-sheet .focus-calendar-cell-current::before {
  opacity: 0.78;
}

.calendar-sheet .focus-calendar-cell-current .focus-calendar-day-number {
  color: #fff;
}

.calendar-sheet .focus-calendar-cell-selected {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 74%, #fff);
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.30), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, transparent), rgba(255, 255, 255, 0.17));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 44%, transparent),
    0 18px 44px color-mix(in srgb, var(--primary) 27%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.calendar-sheet .focus-calendar-cell-selected .focus-calendar-day-number {
  color: #fff;
}

#markerLegend {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 16px 38px rgba(45, 34, 24, 0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 10px 12px;
}

#markerLegend p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

#markerLegendItems {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}

#markerLegendItems span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 650;
  padding: 4px 9px;
}

:root[data-theme="dark"] .calendar-sheet {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.30),
    0 0 42px color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 18%, transparent);
}

:root[data-theme="dark"] #markerLegend {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 1180px) {
  .calendar-sheet {
    min-height: clamp(500px, 62vw, 660px);
  }
}

@media (max-width: 900px) {
  .calendar-sheet {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .main-surface {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .calendar-sheet {
    border-radius: 24px;
    padding: clamp(12px, 3.2vw, 16px);
    margin-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  .calendar-sheet::after {
    background:
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.16), transparent 26%),
      linear-gradient(180deg, rgba(15, 14, 13, 0.18), rgba(15, 14, 13, 0.34) 52%, rgba(15, 14, 13, 0.26)),
      var(--calendar-season-noise);
  }

  .calendar-sheet .sheet-head {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
    margin-bottom: 12px;
  }

  .calendar-sheet .round-control {
    width: 42px;
    height: 42px;
  }

  .calendar-sheet .weekdays,
  .calendar-sheet .calendar-grid {
    grid-template-columns: repeat(7, minmax(32px, 1fr));
    gap: clamp(4px, 1.35vw, 6px);
  }

  .calendar-sheet .weekdays {
    font-size: 0.68rem;
  }

  .calendar-sheet .day-cell {
    min-height: clamp(44px, 12vw, 58px);
    padding: 6px 5px;
    border-radius: 13px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .calendar-sheet .day-cell > span:last-child {
    font-size: clamp(0.82rem, 3.3vw, 0.96rem);
  }

  .calendar-sheet .marker-row {
    min-height: 9px;
    gap: 3px;
  }

  .calendar-sheet .focus-calendar-cell {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 6px 16px rgba(0, 0, 0, 0.065);
  }

  .calendar-sheet .focus-calendar-marker-row {
    left: 5px;
    right: 5px;
    bottom: 5px;
    max-height: 15px;
  }

  .calendar-sheet .focus-calendar-marker {
    width: 5px;
    height: 5px;
  }

  .calendar-sheet .dot,
  #markerLegend .dot {
    width: 6px;
    height: 6px;
  }

  #markerLegend {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    border-radius: 16px;
  }

  #markerLegendItems {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-sheet,
  .calendar-sheet::before,
  .calendar-sheet .focus-calendar-cell::before,
  .calendar-sheet .day-cell,
  .calendar-sheet .round-control {
    transition: none;
  }

  .calendar-sheet .day-cell:hover,
  .calendar-sheet .round-control:hover {
    transform: none;
  }
}