/* MintHome BackgroundWeatherEngine — 見た目レイヤー
   本体の .mh-background-stage の中に .mh-wx-layer を差し込んで合成する。
   すべて data-* / CSS変数駆動。style属性は使わない(CSP方針に合わせる)。 */

:root{
  --mh-wx-sky-top:#3d8bd6;
  --mh-wx-sky-bottom:#bfe3ff;
  --mh-wx-ambient:1;
  --mh-wx-intensity:.6;
  --mh-wx-overlay-tint:.28;
  --mh-wx-sun-visible:1;
  --mh-wx-moon-visible:0;
  --mh-wx-stars-visible:0;
  --mh-wx-image-opacity:.55;
  --mh-wx-image-blur:0px;
  --mh-wx-image-brightness:1;
  --mh-wx-image-saturation:1;
}

/* .mh-background-stage 自体は本体(app-*.css)が完全に定義済み。ここでは上書きせず、
   その内側に重ねる自前レイヤーだけを追加する。overflow:hiddenは本体側で担保されている前提。 */
.mh-wx-layer{position:absolute;inset:0;overflow:hidden;isolation:isolate;pointer-events:none}

.mh-wx-sky{
  position:absolute;inset:-4% -4%;
  background:linear-gradient(180deg,var(--mh-wx-sky-top),var(--mh-wx-sky-bottom));
  opacity:calc(.22 + var(--mh-wx-ambient) * .3);
  filter:saturate(calc(.7 + var(--mh-wx-ambient)*.4));
  transition:background 2.4s ease,opacity 2.4s ease;
  will-change:opacity;
}
[data-theme="light"] .mh-wx-sky{opacity:calc(.10 + var(--mh-wx-ambient)*.16)}
[data-reduced-transparency="true"] .mh-wx-sky,
[data-reduced-motion="true"] .mh-wx-sky{transition-duration:1ms}

.mh-wx-sun{
  position:absolute;top:8%;right:12%;width:min(22vw,180px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#fff9e8,#ffd479 42%,transparent 72%);
  opacity:calc(var(--mh-wx-sun-visible) * .9);
  filter:blur(2px);
  transform:translate3d(0,calc((1 - var(--mh-wx-sun-visible)) * -10%),0);
  transition:opacity 2.4s ease,transform 2.4s ease;
}
.mh-wx-moon{
  position:absolute;top:10%;left:10%;width:min(11vw,92px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fdfdfb,#cdd6e6 55%,transparent 78%);
  box-shadow:0 0 40px rgba(205,214,230,.35);
  opacity:calc(var(--mh-wx-moon-visible) * .85);
  transform:translate3d(0,calc((1 - var(--mh-wx-moon-visible)) * -8%),0);
  transition:opacity 2.4s ease,transform 2.4s ease;
}
.mh-wx-stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 28% 9%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 44% 22%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 62% 12%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 77% 26%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 88% 15%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 20% 34%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 95% 33%,#fff,transparent);
  background-repeat:no-repeat;
  opacity:calc(var(--mh-wx-stars-visible) * .8);
  transition:opacity 2.4s ease;
}

.mh-wx-image{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;filter:blur(var(--mh-wx-image-blur)) brightness(var(--mh-wx-image-brightness)) saturate(var(--mh-wx-image-saturation));
  transition:opacity .5s ease,filter .35s ease;
}
.mh-wx-image[data-active="true"]{opacity:var(--mh-wx-image-opacity)}

.mh-wx-canvas{position:absolute;inset:0;width:100%;height:100%}

/* 雨天の「濡れた画面」レイヤー。UIより手前、設定シート(z=220)より後ろに置き、
   pointer-eventsは無効なので操作を邪魔しない。canvasは液滴の屈折ハイライトだけを描く。 */
.mh-wx-screen-layer{
  position:fixed;inset:0;z-index:11;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .55s ease;
}
.mh-wx-screen-layer[data-active="true"]{opacity:1}
.mh-wx-screen-layer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(196,223,241,.035),rgba(90,132,160,.015) 48%,rgba(224,242,252,.03));
  mix-blend-mode:screen;
}
.mh-wx-screen-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){
  .mh-wx-screen-layer{transition-duration:1ms}
}

.mh-wx-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,calc(var(--mh-wx-overlay-tint)*.55)) 100%);
  mix-blend-mode:multiply;
}
[data-theme="light"] .mh-wx-scrim{mix-blend-mode:normal;opacity:calc(var(--mh-wx-overlay-tint)*.3)}

/* イルミネーション(lighting): 暖色の点光源をゆっくり明滅させる、控えめなアンビエント演出 */
[data-wx-weather="lighting"] .mh-wx-layer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(3px 3px at 15% 70%,#ffd98a,transparent 60%),
    radial-gradient(3px 3px at 32% 55%,#ffb4d0,transparent 60%),
    radial-gradient(3px 3px at 50% 78%,#9adfff,transparent 60%),
    radial-gradient(3px 3px at 68% 60%,#ffd98a,transparent 60%),
    radial-gradient(3px 3px at 84% 74%,#b6ffcf,transparent 60%),
    radial-gradient(3px 3px at 22% 40%,#ffb4d0,transparent 60%),
    radial-gradient(3px 3px at 76% 38%,#9adfff,transparent 60%);
  opacity:calc(.35 + var(--mh-wx-intensity)*.5);
  animation:mh-wx-twinkle 3.6s ease-in-out infinite;
  filter:blur(.2px) drop-shadow(0 0 6px rgba(255,217,138,.5));
}
@keyframes mh-wx-twinkle{0%,100%{opacity:calc(.28 + var(--mh-wx-intensity)*.4)}50%{opacity:calc(.5 + var(--mh-wx-intensity)*.5)}}

@media (prefers-reduced-motion:reduce){
  .mh-wx-sky,.mh-wx-sun,.mh-wx-moon,.mh-wx-stars{transition-duration:1ms}
  [data-wx-weather="lighting"] .mh-wx-layer::before{animation:none}
}
[data-reduced-motion="true"] [data-wx-weather="lighting"] .mh-wx-layer::before{animation:none}
[data-perf="lite"] .mh-wx-sun,[data-perf="lite"] .mh-wx-moon,[data-perf="lite"] .mh-wx-stars{display:none}

/* ============================================================
   設定 (iPhone「設定」風の階層ナビゲーション / iOS 26 ガラスの丸い戻るボタン)
   ============================================================ */
.mh-more-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;margin-bottom:8px}
.mh-more-row__icon{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--color-accent,#34D399) 16%,transparent);color:var(--color-accent,#34D399)}
.mh-more-row__icon svg{width:18px;height:18px}
.mh-more-row__body{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:2px}
.mh-more-row__body strong{font-size:14px;font-weight:600;color:var(--theme-text,#0c2a22)}
.mh-more-row__body small{font-size:12px;color:var(--theme-text-muted,#5b7a70)}
.mh-more-row__chevron{flex:0 0 auto;opacity:.4}
.mh-more-row__chevron svg{width:16px;height:16px}

.mh-st{position:fixed;inset:0;z-index:220;overflow:hidden;contain:layout paint;
  --st-fill:color-mix(in srgb,var(--theme-text,#fff) 8%,var(--theme-bg,#04100D));
  --st-sep:color-mix(in srgb,var(--theme-text,#fff) 12%,transparent);
  --st-ink:var(--theme-text,#eafff6);--st-mute:var(--theme-text-muted,#8fb1a5);--st-acc:var(--color-accent,#34D399)}
.mh-st[hidden],.mh-st [hidden]{display:none!important}
.mh-st__page{position:absolute;inset:0;background:var(--theme-bg,#04100D);color:var(--st-ink);will-change:transform;
  box-shadow:-10px 0 34px rgb(0 0 0/.28);transition:opacity .25s ease;--t:0}
.mh-st.is-peek .mh-st__page{opacity:0}
.mh-st__dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:6}
.mh-st__scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 68px) 16px calc(40px + env(safe-area-inset-bottom))}
.mh-st__large{margin:6px 6px 18px;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  opacity:calc(1 - var(--t)*1.4);transform:translateY(calc(var(--t) * -6px)) scale(calc(1 - var(--t)*.04));transform-origin:left center}

/* ナビバー: 背景なし。スクロールすると上端がぼけてフェードする(iOS 26 scroll edge effect) */
.mh-st__nav{position:absolute;left:0;right:0;top:0;z-index:5;height:calc(env(safe-area-inset-top) + 64px);
  display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 8px;pointer-events:none}
.mh-st__nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--t);
  background:linear-gradient(var(--theme-bg,#04100D) 30%,color-mix(in srgb,var(--theme-bg,#04100D) 0%,transparent));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.mh-st__ntitle{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:16px;font-weight:700;
  opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 6px));pointer-events:none}
.mh-st__slot{width:44px;height:44px;pointer-events:auto}

/* 丸いガラスの戻るボタン(iOS 26 Liquid Glass): 44pt円 / ラベルなし / chevron のみ */
.mh-st__glass{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--st-ink);position:relative;pointer-events:auto;-webkit-tap-highlight-color:transparent;
  background:color-mix(in srgb,var(--theme-text,#fff) 13%,transparent);
  backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);-webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.34),inset 0 -1px 0 rgb(255 255 255/.06),inset 0 0 0 1px rgb(255 255 255/.10),0 6px 18px rgb(0 0 0/.22);
  transition:transform .32s cubic-bezier(.32,1.6,.5,1),background .2s ease}
.mh-st__glass::after{content:"";position:absolute;inset:1px;border-radius:50%;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 0%,rgb(255 255 255/.28),transparent 55%)}
.mh-st__glass:active,.mh-st__glass.is-held{transform:scale(.9);background:color-mix(in srgb,var(--theme-text,#fff) 22%,transparent);transition-duration:.12s}
.mh-st__glass svg{width:20px;height:20px;stroke-width:2.4;position:relative;z-index:1}
.mh-st__glass:focus-visible{outline:2px solid var(--st-acc);outline-offset:3px}

/* グループ(inset grouped list) */
.mh-st__group{margin:0 0 26px}
.mh-st__gtitle{margin:0 16px 7px;font-size:12.5px;font-weight:600;color:var(--st-mute);letter-spacing:.02em}
.mh-st__gfoot{margin:8px 16px 0;font-size:12px;line-height:1.5;color:var(--st-mute)}
.mh-st__list{border-radius:22px;background:var(--st-fill);overflow:hidden}
.mh-st__row{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
  padding:9px 16px 9px 14px;cursor:default;-webkit-tap-highlight-color:transparent}
.mh-st__row+.mh-st__row::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--st-sep)}
.mh-st__row--plain+.mh-st__row::before,.mh-st__row+.mh-st__row--plain::before{left:16px}
button.mh-st__row{cursor:pointer;transition:background .15s ease}
button.mh-st__row:active{background:color-mix(in srgb,var(--theme-text,#fff) 10%,transparent)}
.mh-st__ico{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;
  background:var(--c,#0A84FF);box-shadow:inset 0 1px 0 rgb(255 255 255/.28),inset 0 -1px 0 rgb(0 0 0/.12)}
.mh-st__ico svg{width:17px;height:17px;stroke-width:1.9}
.mh-st__rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mh-st__rt strong{font-size:16px;font-weight:500}
.mh-st__rt small{font-size:12px;color:var(--st-mute);line-height:1.35}
.mh-st__val{flex:0 0 auto;font-size:15px;color:var(--st-mute);max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-st__chev{flex:0 0 auto;width:14px;height:14px;color:var(--st-mute);opacity:.6}
.mh-st__check{flex:0 0 auto;width:20px;height:20px;color:var(--st-acc);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .3s cubic-bezier(.32,1.6,.5,1)}
.mh-st__row.is-on .mh-st__check{opacity:1;transform:none}
.mh-st__row--col{flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px}
.mh-st__rowtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mh-st__rowtop strong{font-size:16px;font-weight:500}
.mh-st__rowtop span{font-size:14px;color:var(--st-mute);font-variant-numeric:tabular-nums}

/* iOSスイッチ */
.mh-st__sw{all:unset;flex:0 0 auto;position:relative;width:51px;height:31px;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb,var(--theme-text,#fff) 22%,transparent);transition:background .28s ease}
.mh-st__sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgb(0 0 0/.3);transition:transform .32s cubic-bezier(.32,1.5,.5,1)}
.mh-st__sw[aria-checked="true"]{background:var(--st-acc)}
.mh-st__sw[aria-checked="true"]::after{transform:translateX(20px)}
.mh-st__sw:active::after{width:32px}
.mh-st__sw[aria-checked="true"]:active::after{transform:translateX(15px)}

.mh-st__range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;outline:none;margin:0}
.mh-st__range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--st-acc) var(--p,50%),color-mix(in srgb,var(--theme-text,#fff) 18%,transparent) var(--p,50%))}
.mh-st__range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgb(0 0 0/.35);cursor:pointer}
.mh-st__range::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in srgb,var(--theme-text,#fff) 18%,transparent)}
.mh-st__range::-moz-range-progress{height:4px;border-radius:2px;background:var(--st-acc)}
.mh-st__range::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgb(0 0 0/.35)}
.mh-st__range:disabled{opacity:.35}

/* 天候カード/プレビュー */
.mh-st__preview{position:relative;height:120px;border-radius:22px;overflow:hidden;margin:0 0 22px;
  background:linear-gradient(180deg,var(--mh-wx-sky-top),var(--mh-wx-sky-bottom));box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.mh-st__preview b{position:absolute;left:14px;bottom:26px;font-size:20px;font-weight:800;color:#fff;text-shadow:0 1px 6px rgb(0 0 0/.45)}
.mh-st__preview i{position:absolute;left:14px;bottom:10px;font-style:normal;font-size:12px;font-weight:600;color:#fff;opacity:.85;text-shadow:0 1px 4px rgb(0 0 0/.5)}
.mh-st__snowbar{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cover,0) * 46%);background:linear-gradient(#fff,#d5e4ef);
  border-radius:60% 60% 0 0/22px 22px 0 0;transition:height .6s linear;opacity:calc(min(1,var(--cover,0)*8))}
.mh-st__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mh-st__card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px 11px;border-radius:18px;
  background:var(--st-fill);border:2px solid transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .25s ease,border-color .25s ease,transform .3s cubic-bezier(.32,1.5,.5,1)}
.mh-st__card svg{width:26px;height:26px;color:var(--st-ink);transition:color .25s ease}
.mh-st__card span{font-size:12px;font-weight:600;color:var(--st-mute);transition:color .25s ease}
.mh-st__card:active{transform:scale(.94)}
.mh-st__card.is-on{border-color:var(--st-acc);background:color-mix(in srgb,var(--st-acc) 16%,var(--st-fill))}
.mh-st__card.is-on svg,.mh-st__card.is-on span{color:var(--st-acc)}
.mh-st__btnrow{color:var(--st-acc)}
.mh-st__btnrow.is-danger{color:#ff6b6f}
.mh-st__file{position:relative}
.mh-st__file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* 画面切替の中身をふわっと出す */
.mh-st__page.is-enter .mh-st__scroll>*{animation:mh-st-rise .55s cubic-bezier(.32,.72,0,1) both}
.mh-st__page.is-enter .mh-st__scroll>*:nth-child(2){animation-delay:.04s}
.mh-st__page.is-enter .mh-st__scroll>*:nth-child(3){animation-delay:.08s}
.mh-st__page.is-enter .mh-st__scroll>*:nth-child(4){animation-delay:.12s}
.mh-st__page.is-enter .mh-st__scroll>*:nth-child(n+5){animation-delay:.16s}
@keyframes mh-st-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mh-st__page.is-enter .mh-st__scroll>*{animation:none}
  .mh-st__glass,.mh-st__sw::after,.mh-st__card{transition-duration:1ms}
}
[data-theme="light"] .mh-st__glass{background:rgb(255 255 255/.62);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(0 0 0/.05),0 6px 18px rgb(0 0 0/.12)}