/* Folio v0.5.4 — Fold8の開閉を別レイアウトとして再設計 */
:root {
  --folio-copper: #9f5238;
  --folio-moss: #596b4b;
  --folio-blue: #557b8d;
  --folio-gold: #b88b3d;
  --folio-espresso: #3c2417;
}

.book { position: relative; }
.cover-hand-note,
.index-tabs,
.bottom-nav { display: none !important; }

.weather-visual {
  background: url("media/weather-washi-v054.png") center / cover no-repeat !important;
}
.weather-visual .sun,
.weather-visual .cloud { display: none !important; }
.weather-card { background: #d8e2d6; }

.folio-menu-trigger {
  position: fixed;
  z-index: 72;
  right: 0;
  top: 43%;
  width: 38px;
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px 4px;
  border: 1px solid rgba(38,20,12,.42);
  border-right: 0;
  border-radius: 9px 0 0 9px;
  color: #fff8e9;
  background: linear-gradient(135deg, #76523a, #452a1d);
  box-shadow: -3px 5px 10px rgba(39,22,12,.28);
}
.folio-menu-trigger svg { width: 17px; height: 17px; }
.folio-menu-trigger span { font: 10px var(--display); writing-mode: vertical-rl; letter-spacing: .12em; }

.more-sheet[hidden] { display: none !important; }
.more-sheet {
  z-index: 80;
  left: 50%;
  right: auto;
  bottom: max(13px, env(safe-area-inset-bottom));
  width: min(660px, calc(100vw - 22px));
  transform: translateX(-50%);
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 5px;
  padding: 12px;
  border: 9px solid var(--leather);
  border-radius: 4px;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(96,75,44,.08) .7px, transparent .8px);
  background-size: 8px 8px;
  box-shadow: 0 20px 44px rgba(24,12,7,.48);
}
.more-sheet button {
  min-height: 55px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 7px 3px;
  border-bottom: 1px solid rgba(83,61,36,.18);
}
.more-sheet svg { width: 21px; height: 21px; margin: 0; }
.more-sheet span { font: 11px var(--display); }

.page-fold-actions {
  z-index: 65;
  right: 13px;
  bottom: 10px;
  width: auto !important;
  height: auto !important;
  gap: 7px;
  padding: 0 !important;
  background: none !important;
}
.page-fold-actions button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(70,49,29,.28);
  background: rgba(255,249,232,.94);
  box-shadow: 0 4px 9px rgba(60,40,22,.2);
}
.page-fold-actions svg { width: 18px; height: 18px; }

.settings-choice,
.picker-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-choice { min-height: 57px; padding: 7px 12px; border-bottom: 1px solid rgba(23,59,84,.09); }
.settings-choice b,
.settings-choice small { display: block; }
.settings-choice b { font: 15px var(--body); }
.settings-choice small { margin-top: 3px; color: var(--ink-soft); font: 9px var(--utility); }
.picker-size-row { margin: 2px 0 10px; padding: 7px 0; border-bottom: 1px solid rgba(81,60,35,.2); }
.picker-size-row > span { font: 12px var(--body); }
.size-buttons { display: flex; gap: 4px; }
.size-buttons button {
  min-width: 43px;
  min-height: 31px;
  padding: 4px 7px;
  border: 1px solid rgba(77,57,34,.28);
  color: var(--ink);
  background: rgba(255,251,239,.66);
  font: 10px var(--utility);
}
.size-buttons button.is-active { color: #fff9eb; border-color: var(--folio-moss); background: var(--folio-moss); }
.app-picker-item .app-tile { width: 42px !important; height: 42px !important; }

.favorites {
  display: grid;
  align-items: start;
  overflow: visible;
  scroll-snap-type: none;
}
.favorites button { justify-self: center; }
.favorites small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (min-width: 840px) {
  .book { padding: 5px 7px 6px; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr); }
  .paper-page { padding: 14px 17px 15px; }
  .page-rule { inset: 7px; }

  .left-sticker-plant {
    width: 145px;
    height: 147px;
    top: 20px;
    right: 18px;
  }
  .weather-card {
    width: calc(100% - 160px);
    height: 111px;
    grid-template-columns: minmax(128px, 1.28fr) minmax(112px,.82fr) minmax(105px,.76fr);
  }
  .weather-main { padding: 9px 10px; }
  .weather-main strong { font-size: 42px; }
  .weather-main .eyebrow { font-size: 9px; }
  .weather-main > span:last-child { font-size: 13px; }
  .weather-stats { grid-template-columns: 1fr; align-content: center; gap: 3px; padding: 8px 9px; font-size: 11px; }
  .weather-stats small { font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .news-card,
  .today-card { width: calc(100% - 2px); margin-top: 10px; padding: 7px 10px 8px; }
  .news-card { min-height: 112px; }
  .section-heading { min-height: 29px; }
  .section-heading > span { font-size: 19px; }
  .text-button { font-size: 10px; }
  .news-item { min-height: 23px; grid-template-columns: 55px 1fr; }
  .news-item b { font-size: 12px; }
  .news-item small { font-size: 9px; }
  .today-card { min-height: 185px; }
  .task-row { min-height: 34px; grid-template-columns: 24px 48px minmax(0,1fr) auto; gap: 7px; }
  .task-check { width: 17px; height: 17px; }
  .task-time { font-size: 10px; }
  .task-open { font-size: 14px; }
  .category-tag { font-size: 9px; }
  .cover-upcoming .agenda-row { min-height: 22px; }
  .cover-upcoming .agenda-row time,
  .cover-upcoming .agenda-row button { font-size: 10px; }

  .favorites {
    width: calc(100% - 170px);
    justify-content: initial;
    gap: 8px 5px;
    margin-top: 11px;
    padding: 21px 4px 0;
  }
  body[data-app-size="standard"] .favorites { grid-template-columns: repeat(7, minmax(0,1fr)); }
  body[data-app-size="large"] .favorites { grid-template-columns: repeat(6, minmax(0,1fr)); }
  body[data-app-size="xlarge"] .favorites { grid-template-columns: repeat(5, minmax(0,1fr)); }
  body[data-app-size="standard"] .app-tile { width: 37px; height: 37px; }
  body[data-app-size="large"] .app-tile { width: 47px; height: 47px; }
  body[data-app-size="xlarge"] .app-tile { width: 57px; height: 57px; }
  .favorites button { width: 100%; }
  .favorites small { margin-top: 5px; font-size: 8px; }

  .cover-scraps {
    right: 22px;
    bottom: 24px;
    width: 158px;
    height: 177px;
  }
  .cover-polaroid.cover-dog { width: 146px; height: 154px; }

  .right-header { min-height: 91px; padding-right: 143px; }
  .right-header h1 { font-size: 33px; }
  .top-photo { width: 116px; height: 100px; top: 12px; right: 18px; border-width: 7px; }
  .category-filters { margin: 5px 0 9px; }
  .category-filters button { min-height: 29px; padding: 4px 12px; font-size: 10px; }
  .calendar-card { padding: 8px 10px 9px; }
  .calendar-controls { height: 34px; font-size: 17px; }
  .week-row { height: 25px; font-size: 9px; }
  .calendar-day { height: 37px; font-size: 11px; }
  .day-agenda { margin-top: 9px; }
  .day-agenda .agenda-row { min-height: 33px; grid-template-columns: 9px 48px 1fr; }
  .agenda-row time { font-size: 10px; }
  .agenda-row button { font-size: 14px; }
  .right-bottom-row { min-height: 107px; padding-right: 135px; }
  .quick-memo { min-height: 76px; }
  .quick-memo b { font-size: 18px; }
  .quick-memo small { font-size: 10px; }
  .bottom-photo { width: 119px; height: 105px; right: 3px; border-width: 7px; }

  .folio-menu-trigger { width: 34px; min-height: 57px; top: 45%; }
  .page-fold-actions { right: 18px; bottom: 15px; }
}

@media (max-width: 839px) {
  html,
  body { background: var(--leather-dark); }
  body::after { box-shadow: none; }
  .home-view { min-height: 100dvh; }
  .book {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 4px;
    border-radius: 0;
    box-shadow: inset 0 0 18px rgba(0,0,0,.42);
  }
  .paper-page {
    min-height: calc(100dvh - 8px);
    padding: 8px 8px 15px;
    border-radius: 4px;
  }
  .page-rule { inset: 5px; }
  .cover-masthead { display: none !important; }

  .weather-card {
    width: 100%;
    height: 118px;
    margin-top: 0;
    grid-template-columns: 43% 27% 30%;
  }
  .weather-main { padding: 8px 8px; }
  .weather-main strong { font-size: 42px; line-height: .94; }
  .weather-main .eyebrow { font-size: 8px; }
  .weather-main > span:last-child { font-size: 12px; }
  .weather-stats { grid-template-columns: 1fr; align-content: center; gap: 3px; padding: 8px; font-size: 10px; }
  .weather-stats small { font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .news-card,
  .today-card { width: 100%; margin-top: 7px; padding: 6px 8px 7px; }
  .news-card { min-height: 94px; }
  .section-heading { min-height: 27px; }
  .section-heading > span { font-size: 18px; }
  .text-button { font-size: 9px; }
  .news-item { min-height: 20px; grid-template-columns: 49px 1fr; }
  .news-item b { font-size: 10px; }
  .news-item small { font-size: 8px; }
  .today-card { min-height: 166px; }
  .task-row { min-height: 31px; grid-template-columns: 23px 42px minmax(0,1fr) auto; gap: 5px; }
  .task-check { width: 17px; height: 17px; }
  .task-time { font-size: 9px; }
  .task-open { font-size: 13px; }
  .category-tag { font-size: 8px; }

  .favorites {
    width: 100%;
    gap: 9px 3px;
    margin: 8px 0 0;
    padding: 22px 2px 0;
  }
  body[data-app-size="standard"] .favorites { grid-template-columns: repeat(6, minmax(0,1fr)); }
  body[data-app-size="large"] .favorites { grid-template-columns: repeat(5, minmax(0,1fr)); }
  body[data-app-size="xlarge"] .favorites { grid-template-columns: repeat(4, minmax(0,1fr)); }
  body[data-app-size="standard"] .app-tile { width: 35px; height: 35px; }
  body[data-app-size="large"] .app-tile { width: 46px; height: 46px; }
  body[data-app-size="xlarge"] .app-tile { width: 58px; height: 58px; }
  .favorites button { width: 100%; }
  .favorites small { display: block; margin-top: 5px; font-size: 8px; }

  .cover-scraps {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 154px;
    margin-top: 10px;
  }
  .cover-polaroid { width: 132px; height: 124px; }
  .cover-dog { left: 15px; top: 14px; }
  .cover-plant { display: block; left: 148px; top: 4px; }

  .folio-menu-trigger { top: auto; bottom: 82px; width: 34px; min-height: 58px; }
  .folio-menu-trigger span { font-size: 9px; }
  .page-fold-actions { right: 12px; bottom: 12px; }
  .page-fold-actions button { width: 41px; height: 41px; }
  .more-sheet { grid-template-columns: repeat(4, minmax(0,1fr)); }

  .app-picker-paper { padding-left: 14px; padding-right: 14px; }
  .picker-size-row { align-items: flex-start; flex-direction: column; }
  .settings-choice { align-items: flex-start; flex-direction: column; }
}

@media (max-height: 760px) and (max-width: 839px) {
  .news-card .section-heading { display: flex; }
  .weather-card { height: 105px; }
  .news-card { min-height: 84px; }
  .today-card { min-height: 148px; }
  .cover-scraps { height: 132px; }
  .cover-polaroid { width: 112px; height: 105px; }
  .cover-plant { left: 128px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .weather-card { width: 56%; height: 76px; }
  .news-card { left: 57.5%; right: 8px; top: 8px; min-height: 76px; }
  .today-card { width: 56%; min-height: 135px; }
  .favorites { width: 56%; }
  .cover-scraps { left: 58%; right: 8px; top: 95px; width: auto; height: 135px; }
}

@media (prefers-reduced-motion: no-preference) {
  .weather-visual { animation: folio-weather-reveal .7s ease-out both; }
  @keyframes folio-weather-reveal { from { filter: saturate(.65); transform: scale(1.03); } to { filter: saturate(1); transform: scale(1); } }
}