/* Formal Calendar UI: reference structure adapted to the existing couples app window. */
#page-couples-calendar {
  background: #d8d5cf !important;
  background-image: none !important;
  color: #282624;
}

#page-couples-calendar > .couples-sub-body {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #d8d5cf;
}

/* The legacy Calendar markup remains as a compatibility fallback, but the
   formal surface above owns this page whenever it is present. */
#page-couples-calendar > .couples-navbar,
#page-couples-calendar > .legacy-calendar-body {
  display: none !important;
}

#page-couples-calendar .formal-calendar-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #d8d5cf;
}

#page-couples-calendar .formal-calendar-app {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(20px + max(var(--phone-safe-top, 0px), env(safe-area-inset-top, 0px))) 16px 34px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#page-couples-calendar .formal-calendar-app::-webkit-scrollbar,
#page-couples-calendar .sheet::-webkit-scrollbar {
  display: none;
}

#page-couples-calendar .formal-calendar-top {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 52px;
  padding: 0;
  color: #2f2c29;
}

#page-couples-calendar .formal-calendar-back {
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border: 1px solid rgba(67, 61, 54, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  color: #3c3732;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
}

#page-couples-calendar .formal-calendar-top .title {
  margin: 0;
  color: #292724;
  font: 400 24px/1.1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.02em;
}

#page-couples-calendar .formal-calendar-top .kicker {
  margin-top: 5px;
  color: rgba(57, 52, 46, .54);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}

#page-couples-calendar .formal-calendar-top .top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

#page-couples-calendar .formal-calendar-top .range {
  color: rgba(57, 52, 46, .56);
  font-size: 10px;
  white-space: nowrap;
}

#page-couples-calendar .formal-calendar-top .add-entry {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #746b60;
  box-shadow: none;
  font: 600 18px/1 Georgia, 'Times New Roman', serif;
  letter-spacing: .08em;
  cursor: pointer;
}

#page-couples-calendar .formal-calendar-top .add-entry:hover {
  background: rgba(87, 74, 56, .05);
}

#page-couples-calendar .deck-wrap {
  position: relative;
  margin: 0 8px 46px;
}

#page-couples-calendar .deck {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  touch-action: pan-y;
  user-select: none;
}

#page-couples-calendar .deck-hint {
  position: absolute;
  right: 2px;
  bottom: 5px;
  color: rgba(57, 52, 46, .48);
  font-size: 9px;
  letter-spacing: .03em;
}

#page-couples-calendar .card {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .12);
  will-change: transform, opacity;
  transition: transform .34s cubic-bezier(.2, .72, .2, 1), opacity .34s ease;
  user-select: none;
}

#page-couples-calendar .card[data-depth="0"] { z-index: 7; transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
#page-couples-calendar .card[data-depth="1"] { z-index: 6; transform: translate(-7px, 12px) rotate(-2deg) scale(.982); opacity: .96; }
#page-couples-calendar .card[data-depth="2"] { z-index: 5; transform: translate(7px, 22px) rotate(1.4deg) scale(.965); opacity: .92; }
#page-couples-calendar .card[data-depth="3"] { z-index: 4; transform: translate(-2px, 28px) rotate(-.6deg) scale(.952); opacity: 0; }
#page-couples-calendar .card[data-depth="4"],
#page-couples-calendar .card[data-depth="5"],
#page-couples-calendar .card[data-depth="6"] {
  z-index: 1;
  transform: translate(0, 30px) scale(.95);
  opacity: 0;
  pointer-events: none;
}
#page-couples-calendar .card.is-exiting { z-index: 8; pointer-events: none; }
#page-couples-calendar .card.dragging { transition: none; }

#page-couples-calendar .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.2, .75, .2, 1);
}

#page-couples-calendar .card.flipped .card-inner { transform: rotateY(180deg); }

#page-couples-calendar .card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #aaa59e;
  box-shadow: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#page-couples-calendar .card-backface {
  padding: 22px 18px 18px;
  transform: rotateY(180deg);
  background: #f3eee5;
}

#page-couples-calendar .card-image,
#page-couples-calendar .card-image-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-couples-calendar .card-image-fallback {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.8), transparent 27%),
    linear-gradient(135deg, #bfc2b5 0%, #7d8c83 48%, #3d4b49 100%);
}

#page-couples-calendar .card-image-fallback::after {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(255,255,255,.06);
}

#page-couples-calendar .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 20px 14px;
  background: linear-gradient(180deg, rgba(24, 25, 22, .38), transparent 35%, rgba(20, 25, 22, .32));
  color: #fff;
}

#page-couples-calendar .weekday {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.18);
}

#page-couples-calendar .date-main {
  display: flex;
  align-items: end;
  gap: 9px;
  margin-top: auto;
  margin-bottom: 14px;
}

#page-couples-calendar .date-main .num {
  font: 400 92px/.78 Georgia, 'Times New Roman', serif;
  letter-spacing: -.08em;
  text-shadow: 0 2px 13px rgba(0,0,0,.15);
}

#page-couples-calendar .date-main .my {
  padding-bottom: 3px;
  font: 400 12px/1.1 Georgia, 'Times New Roman', serif;
  opacity: .9;
}

#page-couples-calendar .weather {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#page-couples-calendar .weather .w {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#page-couples-calendar .weather .w > span {
  font-size: 14px;
  opacity: .9;
}

#page-couples-calendar .weather b {
  display: block;
  min-height: 12px;
  color: rgba(255,255,255,.94);
  font-size: 10px;
  font-weight: 700;
}

#page-couples-calendar .flip-btn {
  position: absolute;
  z-index: 4;
  top: 13px;
  right: 13px;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 50%;
  background: rgba(20,20,20,.16);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
}

#page-couples-calendar .paper-sheet {
  position: relative;
  min-height: 0;
  margin-top: 2px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(92, 77, 56, .055);
  border-radius: 3px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.7), transparent 32%),
    radial-gradient(circle at 90% 80%, rgba(140,118,88,.05), transparent 42%),
    linear-gradient(180deg, #fbf8f0, #f6f1e7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(75,65,53,.08);
}

#page-couples-calendar .paper-sheet::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: -8px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(92,77,56,.04);
}

#page-couples-calendar .agendaHead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
  min-height: 14px;
}

#page-couples-calendar .agendaHead span {
  color: #8f867a;
  font: 10px Georgia, 'Times New Roman', serif;
  letter-spacing: .02em;
}

#page-couples-calendar .list {
  display: flex;
  flex-direction: column;
}

#page-couples-calendar .item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  min-height: 46px;
  padding: 5px 6px 5px 10px;
  border-bottom: 1px solid rgba(92, 77, 56, .10);
}

#page-couples-calendar .item:last-child { border-bottom: 0; }

#page-couples-calendar .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  opacity: .62;
  background: #9eb2c4;
}

#page-couples-calendar .item.character::before { background: #98aa8e; }
#page-couples-calendar .item.together::before { background: #c9a6a1; }

#page-couples-calendar .item .time {
  color: #756b5f;
  font: 12px Georgia, 'Times New Roman', serif;
}

#page-couples-calendar .item .name {
  color: #403a34;
  font-size: 13px;
  letter-spacing: .01em;
}

#page-couples-calendar .item .meta {
  display: none;
}

#page-couples-calendar .empty {
  padding: 28px 0;
  color: #a49b8e;
  font-size: 11px;
  text-align: center;
}

#page-couples-calendar .special-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 7px 7px 13px;
  color: #6a5648;
  font-size: 10px;
}

#page-couples-calendar .special-note .mark { color: #a9787a; }

#page-couples-calendar .month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #5c5045;
}

#page-couples-calendar .month-title {
  font: 400 25px/1 Georgia, 'Times New Roman', serif;
}

#page-couples-calendar .month-year {
  color: rgba(92, 80, 69, .56);
  font: 700 11px/1 Arial, sans-serif;
}

#page-couples-calendar .month-week,
#page-couples-calendar .month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

#page-couples-calendar .month-week {
  margin: 25px 0 7px;
  color: rgba(92, 80, 69, .46);
  font-size: 9px;
  text-align: center;
}

#page-couples-calendar .month-cell {
  position: relative;
  min-height: 27px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #554a40;
  font: 600 10px/27px Arial, sans-serif;
  cursor: pointer;
}

#page-couples-calendar .month-cell:hover { background: rgba(171, 130, 111, .12); }
#page-couples-calendar .month-cell.active { background: #826c5e; color: #fff; }
#page-couples-calendar .month-cell.period::after,
#page-couples-calendar .month-cell.anniv::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b57979;
  transform: translateX(-50%);
}
#page-couples-calendar .month-cell.anniv::after { background: #c09a4b; }
#page-couples-calendar .anniv-mark { display: none; }

#page-couples-calendar .sheet-mask {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  background: rgba(34, 31, 28, .0);
  transition: background .25s ease;
}

#page-couples-calendar .sheet-mask.open {
  pointer-events: auto;
  background: rgba(34, 31, 28, .32);
}

#page-couples-calendar .sheet {
  width: 100%;
  max-height: 88%;
  overflow-y: auto;
  padding: 17px 17px calc(17px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #f7f4ee;
  box-shadow: 0 -12px 28px rgba(55, 47, 39, .18);
  transform: translateY(105%);
  transition: transform .28s ease;
}

#page-couples-calendar .sheet-mask.open .sheet { transform: translateY(0); }

#page-couples-calendar .sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
}

#page-couples-calendar .sheet-title {
  color: #453c34;
  font: 400 20px/1 Georgia, 'Times New Roman', serif;
}

#page-couples-calendar .sheet-close,
#page-couples-calendar .sheet-back {
  border: 0;
  background: transparent;
  color: #6e5e50;
  cursor: pointer;
}

#page-couples-calendar .sheet-close { font-size: 21px; }
#page-couples-calendar .sheet-back { padding: 0 0 10px; font-size: 10px; }

#page-couples-calendar .sheet-pane { display: none; }
#page-couples-calendar .sheet-pane.active { display: block; }

#page-couples-calendar .sheet-menu,
#page-couples-calendar .sheet-row,
#page-couples-calendar .sheet-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(91, 78, 64, .11);
  background: transparent;
  color: #4b4239;
  text-align: left;
}

#page-couples-calendar button.sheet-menu,
#page-couples-calendar button.sheet-action { border-left: 0; border-right: 0; border-top: 0; cursor: pointer; }
#page-couples-calendar .sheet-menu small { color: rgba(75, 66, 57, .5); font-size: 9px; }
#page-couples-calendar .sheet-menu strong { font-size: 11px; font-weight: 700; }

#page-couples-calendar .formal-field {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  color: #65584c;
  font-size: 10px;
  font-weight: 700;
}

#page-couples-calendar .formal-field input,
#page-couples-calendar .formal-field select,
#page-couples-calendar .schedule-row-edit input,
#page-couples-calendar .formal-select {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(100, 83, 66, .18);
  border-radius: 9px;
  background: rgba(255,255,255,.72);
  color: #4b4239;
  font-size: 11px;
}

#page-couples-calendar .formal-primary,
#page-couples-calendar .formal-secondary {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

#page-couples-calendar .formal-primary { border: 0; background: #796759; color: #fff; }
#page-couples-calendar .formal-secondary { border: 1px solid rgba(100,83,66,.18); background: transparent; color: #67584b; }
#page-couples-calendar .form-msg { min-height: 16px; margin-top: 8px; color: #9b6d6b; font-size: 10px; }

#page-couples-calendar .filter-stack { display: grid; gap: 12px; }
#page-couples-calendar .ai-note { margin: 0 0 12px; color: rgba(75,66,57,.58); font-size: 10px; line-height: 1.5; }

#page-couples-calendar .image-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#page-couples-calendar .image-slot { position: relative; min-height: 132px; padding: 8px; border: 1px solid rgba(100,83,66,.16); border-radius: 12px; background: #eee8dc; }
#page-couples-calendar .image-slot > img,
#page-couples-calendar .image-slot-fallback { width: 100%; height: 76px; object-fit: cover; border-radius: 8px; }
#page-couples-calendar .image-slot-fallback { background: linear-gradient(135deg, #d2d0c6, #8c9389); }
#page-couples-calendar .slot-num { margin-top: 6px; color: rgba(75,66,57,.56); font-size: 9px; }
#page-couples-calendar .slot-actions { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
#page-couples-calendar .slot-actions label,
#page-couples-calendar .slot-actions button { padding: 3px 5px; border: 1px solid rgba(100,83,66,.16); border-radius: 5px; background: rgba(255,255,255,.65); color: #67584b; font-size: 8px; cursor: pointer; }
#page-couples-calendar .slot-actions input { display: none; }

#page-couples-calendar .schedule-editor { display: grid; gap: 7px; }
#page-couples-calendar .schedule-row-edit { display: grid; grid-template-columns: 74px minmax(0,1fr) 28px; gap: 6px; align-items: center; }
#page-couples-calendar .schedule-row-edit .icon-btn { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(155,109,107,.1); color: #9b6d6b; cursor: pointer; }
#page-couples-calendar .schedule-row-edit input:disabled { opacity: .62; }
#page-couples-calendar .schedule-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 13px; }

#page-couples-calendar .anniv-styles { display: flex; gap: 7px; }
#page-couples-calendar .anniv-chip { flex: 1; padding: 8px 4px; border: 1px solid rgba(100,83,66,.16); border-radius: 8px; background: transparent; color: #67584b; font-size: 9px; cursor: pointer; }
#page-couples-calendar .anniv-chip.active { border-color: #9b7b68; background: rgba(155,123,104,.12); }

@media (max-width: 340px) {
  #page-couples-calendar .formal-calendar-app { padding-left: 12px; padding-right: 12px; }
  #page-couples-calendar .date-main .num { font-size: 78px; }
  #page-couples-calendar .date-main .my { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #page-couples-calendar .card-inner,
  #page-couples-calendar .card,
  #page-couples-calendar .sheet,
  #page-couples-calendar .sheet-mask { transition-duration: .01ms; }
}