/* Folio v0.7.6 — 左上段の再配置、目次のスワイプ閉じ、日付の拡大表示 */
:root {
  --day-paper: #f6efdc;
  --day-paper-deep: #e8dcc1;
  --day-ink: #2d352f;
  --day-moss: #526b5a;
  --day-russet: #985d43;
  --day-line: rgba(67, 73, 63, .2);
}

.calendar-day-dialog {
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  color: var(--day-ink);
}

.calendar-day-dialog::backdrop {
  background: rgba(38, 27, 18, .58);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.calendar-day-paper {
  position: relative;
  min-height: 430px;
  display: grid;
  grid-template-rows: auto auto minmax(120px, 1fr) auto;
  padding: 19px 22px 18px;
  overflow: hidden;
  border: 8px solid #674732;
  border-radius: 3px 13px 4px 8px;
  background:
    linear-gradient(100deg, rgba(255,255,255,.35), transparent 18%, transparent 82%, rgba(91,63,43,.06)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(83,75,59,.06) 31px 32px),
    var(--day-paper);
  box-shadow: 0 20px 50px rgba(22, 14, 9, .5), inset 0 0 25px rgba(107, 78, 44, .08);
}

.calendar-day-paper::before {
  content: "";
  position: absolute;
  width: 105px;
  height: 22px;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  background: rgba(205, 183, 128, .5);
}

.calendar-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--day-line);
}

.calendar-day-header .eyebrow { color: var(--day-russet); }
.calendar-day-header button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--day-ink);
}
.calendar-day-header svg { width: 22px; height: 22px; }

.calendar-day-date {
  min-height: 146px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--day-line);
}

.calendar-day-date > strong {
  color: var(--day-russet);
  font: 400 108px/.88 var(--display);
  letter-spacing: -.08em;
  text-align: center;
}

.calendar-day-date h2 { margin: 0; font: 500 28px/1.15 var(--display); }
.calendar-day-date p { margin: 8px 0 0; color: var(--day-moss); font: 13px var(--utility); letter-spacing: .14em; }

.calendar-day-agenda {
  min-height: 0;
  padding: 10px 0;
  overflow: auto;
}

.calendar-day-task {
  width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-columns: 66px 55px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 3px;
  color: var(--day-ink);
  border: 0;
  border-bottom: 1px dashed var(--day-line);
  background: transparent;
  text-align: left;
}
.calendar-day-task time { color: var(--day-moss); font: 10px var(--utility); }
.calendar-day-task b { overflow: hidden; font: 500 14px/1.35 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.calendar-day-task.is-done { opacity: .5; }

.calendar-day-empty {
  min-height: 116px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--day-moss);
}
.calendar-day-empty svg { width: 30px; height: 30px; stroke-width: 1.3; }
.calendar-day-empty p { margin: 0; font: 13px var(--body); }

.calendar-day-paper footer { padding-top: 8px; border-top: 1px solid var(--day-line); }
.calendar-day-paper footer button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(82, 107, 90, .3);
  border-radius: 2px;
  color: #fffaf0;
  background: var(--day-moss);
  font: 12px var(--utility);
}
.calendar-day-paper footer svg { width: 18px; height: 18px; }

@media (min-width: 840px) {
  .home-view .left-page { padding-top: 5px; }

  .home-view .left-page > .weather-card {
    position: relative;
    left: -9px;
    width: 66%;
    height: calc(100% + 2px);
  }

  .home-view .left-sticker-plant {
    top: 5px !important;
    right: 4px !important;
    width: 36% !important;
    height: 32.5% !important;
  }
}

@media (max-width: 520px) {
  .calendar-day-paper { min-height: min(470px, calc(100dvh - 28px)); padding: 16px 15px 14px; border-width: 6px; }
  .calendar-day-date { min-height: 120px; grid-template-columns: 98px minmax(0, 1fr); gap: 10px; }
  .calendar-day-date > strong { font-size: 84px; }
  .calendar-day-date h2 { font-size: 23px; }
  .calendar-day-task { grid-template-columns: 58px 48px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .calendar-day-dialog[open] .calendar-day-paper { animation: calendar-day-open .2s ease-out both; }
  @keyframes calendar-day-open { from { opacity: .55; transform: translateY(12px) rotate(.25deg); } to { opacity: 1; transform: none; } }
}