/* 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%;opacity:0;transition:opacity .5s ease}
.mh-wx-canvas[data-active="true"]{opacity:calc(.55 + var(--mh-wx-intensity)*.45)}

.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}

/* ============================================================
   設定シート: 「外観・背景」
   既存の p2-sheet(バネ物理)と同じ視覚言語だが独自クラスで衝突を避ける
   ============================================================ */

.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-wx-sheet{position:fixed;inset:0;z-index:220;display:flex;align-items:flex-end;justify-content:center}
.mh-wx-scrim2{position:absolute;inset:0;background:rgb(6 18 15/.46);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mh-wx-panel{position:relative;width:min(560px,100%);max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  padding:10px 18px calc(28px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;
  background:color-mix(in srgb,var(--theme-surface,#0c201c) 90%,transparent);
  backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:0 -14px 44px rgb(0 0 0/.3),inset 0 1px 0 rgb(255 255 255/.08);will-change:transform}
.mh-wx-grab{width:38px;height:5px;border-radius:3px;background:rgb(255 255 255/.22);margin:2px auto 16px}
.mh-wx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.mh-wx-head h3{margin:2px 0 4px;font-size:19px;line-height:1.25;color:var(--theme-text)}
.mh-wx-head p{margin:0;font-size:12.5px;color:var(--theme-text-muted)}
.mh-wx-close{all:unset;box-sizing:border-box;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:rgb(255 255 255/.08);color:var(--theme-text);cursor:pointer;flex:0 0 auto}
.mh-wx-close svg{width:15px;height:15px}

.mh-wx-group{margin:18px 0}
.mh-wx-group__title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--theme-text-muted);margin:0 2px 10px;opacity:.75}

/* 天候カードグリッド: MintTailのpicker(縦list)より視認性の高いプレビュー付きカードに */
.mh-wx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:420px){.mh-wx-grid{grid-template-columns:repeat(3,1fr)}}
.mh-wx-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 4px 10px;border-radius:16px;cursor:pointer;text-align:center;
  background:rgb(255 255 255/.05);border:1.5px solid transparent;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.mh-wx-card svg{width:22px;height:22px;color:var(--theme-text)}
.mh-wx-card span{font-size:11px;font-weight:600;color:var(--theme-text-muted);line-height:1.2}
.mh-wx-card.is-selected{background:color-mix(in srgb,var(--color-accent) 18%,transparent);border-color:color-mix(in srgb,var(--color-accent) 55%,transparent)}
.mh-wx-card.is-selected svg,.mh-wx-card.is-selected span{color:var(--color-accent)}
.mh-wx-card:active{transform:scale(.95)}
.mh-wx-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.mh-wx-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 2px}
.mh-wx-row__label{display:flex;flex-direction:column;gap:2px;min-width:0}
.mh-wx-row__label strong{font-size:13.5px;font-weight:600;color:var(--theme-text)}
.mh-wx-row__label small{font-size:11.5px;color:var(--theme-text-muted)}

.mh-wx-range{-webkit-appearance:none;appearance:none;flex:1;max-width:170px;height:4px;border-radius:2px;
  background:rgb(255 255 255/.16);outline:none}
.mh-wx-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--color-accent);box-shadow:0 2px 6px rgb(0 0 0/.3);cursor:pointer}
.mh-wx-range::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--color-accent);cursor:pointer}
.mh-wx-range:disabled{opacity:.35}

.mh-wx-segment{display:flex;background:rgb(255 255 255/.06);border-radius:999px;padding:3px;gap:2px}
.mh-wx-segment button{all:unset;box-sizing:border-box;flex:1;text-align:center;padding:7px 6px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--theme-text-muted);cursor:pointer;white-space:nowrap}
.mh-wx-segment button.is-on{background:var(--color-accent);color:var(--color-on-accent,#06231a)}

.mh-wx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.mh-wx-btn{all:unset;box-sizing:border-box;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;
  cursor:pointer;background:color-mix(in srgb,var(--color-accent) 16%,transparent);color:var(--theme-text)}
.mh-wx-btn--danger{background:color-mix(in srgb,#e5484d 16%,transparent);color:#ff9a9d}
.mh-wx-file{position:relative;overflow:hidden}
.mh-wx-file input{position:absolute;inset:0;opacity:0;cursor:pointer}

.mh-wx-preview{position:relative;height:96px;border-radius:16px;overflow:hidden;margin-bottom:14px;
  background:linear-gradient(180deg,var(--mh-wx-sky-top),var(--mh-wx-sky-bottom));border:1px solid rgb(255 255 255/.1)}
.mh-wx-preview span{position:absolute;left:10px;bottom:8px;font-size:10.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgb(0 0 0/.5);letter-spacing:.03em;text-transform:uppercase;opacity:.85}

@media (prefers-reduced-motion:reduce){.mh-wx-panel{will-change:auto}.mh-wx-card{transition-duration:1ms}}
@media (prefers-color-scheme:light){
  .mh-wx-panel{background:color-mix(in srgb,#f6fffb 92%,transparent)}
  .mh-wx-grab,.mh-wx-close,.mh-wx-segment,.mh-wx-range{background-color:rgb(0 0 0/.07)}
  .mh-wx-card{background:rgb(0 0 0/.05)}
}