/* Plan My Park Day — shared styles.
   Layout: night-sky hero, floating planner card, then calendar.
   Desktop = month grid + day detail panel. Mobile (<760px) = heat-map month + week day cards. */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/fredoka-latin.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/nunito-sans-latin.woff2) format("woff2")}

:root{
  --bg:#F7F3FF; --surface:#FFFFFF; --surface-2:#F1EAFE; --line:#E3D8F7;
  --ink:#24163F; --muted:#6C6189; --purple:#6A3FD6; --pink:#E2468F; --pink-soft:#FFB3D7;
  --sky-1:#2A1561; --sky-2:#5B2A9E; --sky-3:#C2408C;
  --notice-bg:#FFF1F8; --notice-ink:#8A1F55;
  --c1:#DDF2C9; --c1t:#285214; --c2:#ECF4C4; --c2t:#4A5A0A; --c3:#FCEFC4; --c3t:#6B3D06; --c4:#FCDCC2; --c4t:#7A2E12; --c5:#F9CACA; --c5t:#7E1F1F;
  --s1:#43A047; --s2:#9CC23A; --s3:#F2B230; --s4:#EB6C3A; --s5:#DA3448; --s1t:#fff; --s2t:#24300A; --s3t:#3E2604; --s4t:#fff; --s5t:#fff;
  --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC";
  --display:"Fredoka","Trebuchet MS",var(--cjk),system-ui,sans-serif;
  --body:"Nunito Sans","Segoe UI",var(--cjk),system-ui,sans-serif;
  --r-card:20px; --r-cell:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#130C24; --surface:#1E1536; --surface-2:#2A1E4A; --line:#3A2C60;
  --ink:#F3EDFF; --muted:#B2A6D3; --purple:#A585FF; --pink:#FF77B3;
  --sky-1:#160A38; --sky-2:#3D1C75; --sky-3:#8E2C69;
  --notice-bg:#3A1631; --notice-ink:#FFC2DD;
  --c1:#1E3A17; --c1t:#BFE6A0; --c2:#33391A; --c2t:#DDE99D; --c3:#45341A; --c3t:#F6D58E; --c4:#4B2B1D; --c4t:#F8BE9A; --c5:#4C1E27; --c5t:#F7A7B0;
  color-scheme:dark}}
:lang(zh){--display:var(--cjk),"Fredoka",system-ui,sans-serif;--body:var(--cjk),"Nunito Sans",system-ui,sans-serif}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance}
a{color:var(--purple)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,.day:focus-visible,.hm:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* preview notice */
.notice{background:var(--notice-bg);color:var(--notice-ink);font-size:13px;font-weight:600;text-align:center;padding-block:8px}

/* header + hero */
.hero{background:linear-gradient(160deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--sky-3) 100%);color:#fff;position:relative;overflow:hidden;padding-block:0 96px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:radial-gradient(1.5px 1.5px at 8% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 18% 64%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 31% 30%,#FFD6EC 50%,transparent 51%),radial-gradient(1px 1px at 46% 12%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 58%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 69% 24%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 81% 46%,#E9DDFF 50%,transparent 51%),radial-gradient(1px 1px at 92% 16%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 88% 78%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 38% 82%,#fff 50%,transparent 51%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:21px;color:#fff;text-decoration:none}
.brand svg{width:32px;height:32px;flex:none}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{color:#fff;font-size:14px;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 12px}
.btn-pill{display:inline-block;border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;background:#fff;color:var(--sky-1);text-decoration:none}
.hero-copy{position:relative;text-align:center;padding-top:36px;max-width:720px;margin:0 auto}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 12px;margin-bottom:16px}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.12;margin-bottom:14px}
.hero h1 em{font-style:normal;color:var(--pink-soft)}
.hero p{font-size:17px;color:#E8DEFF;margin:0}

/* planner card */
.planner{position:relative;margin-top:-64px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 18px 48px -24px rgba(58,31,122,.45);padding:22px 24px}
.planner-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:4px}
.seg button{border:0;background:transparent;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff}
.month{display:flex;align-items:center;gap:10px}
.month h2{font-size:24px;min-width:190px;text-align:center}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.icon-btn svg{width:18px;height:18px}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend .chip{border-radius:999px;padding:3px 9px;font-weight:700}
.best{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-size:14px}
.best b{font-family:var(--display);font-weight:500;font-size:15px;margin-right:4px}
.best button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px}
.best button span{color:var(--muted);font-weight:400}

/* desktop calendar */
.main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding-block:28px 40px;align-items:start}
.dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-cell);padding:10px;min-height:128px;display:flex;flex-direction:column;gap:5px;text-align:left;font-size:12.5px;font-variant-numeric:tabular-nums;transition:transform .15s,border-color .15s}
.day:hover{transform:translateY(-2px);border-color:var(--purple)}
.day.sel{border:2px solid var(--purple);padding:9px;box-shadow:0 8px 24px -14px var(--purple)}
.day.past{opacity:.45}
.day .top{display:flex;justify-content:space-between;align-items:center}
.day .num{font-family:var(--display);font-weight:500;font-size:18px}
.today{font-size:10px;font-weight:700;color:#fff;background:var(--pink);border-radius:999px;padding:1px 7px}
.wx{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-weight:600}
.wx svg{width:16px;height:16px}
.lvl{border-radius:8px;padding:3px 7px;font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv{display:flex;align-items:center;gap:5px;color:var(--muted)}
.kv svg{width:13px;height:13px;flex:none}
.kv strong{color:var(--ink);font-weight:700}
.blank{min-height:128px}

/* detail panel */
.detail{position:sticky;top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.detail-head{padding:20px 22px;background:linear-gradient(135deg,var(--surface-2),var(--surface))}
.d-date{font-size:13px;font-weight:700;color:var(--pink);letter-spacing:.6px;text-transform:uppercase}
.detail-head h3{font-size:24px;margin-top:2px}
.ring{display:flex;align-items:center;gap:14px;margin-top:14px}
.ring .big{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:30px;font-weight:600;flex:none}
.ring .lbl{font-weight:700}
.ring small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.d-body{padding:4px 22px 20px}
.d-sec{padding-block:14px;border-bottom:1px solid var(--line)}
.d-sec:last-child{border-bottom:0}
.d-sec h4{margin:0 0 8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.park-rows{display:grid;gap:8px}
.park-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px}
.why{margin:0;padding-left:18px;font-size:14px}
.why li+li{margin-top:4px}
.price{font-family:var(--display);font-size:28px;font-weight:500}
.price small{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:400}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;border-radius:999px;padding:2px 8px;background:var(--surface-2);color:var(--purple)}
.wx-big{display:flex;align-items:center;gap:10px;font-size:15px}
.wx-big svg{width:30px;height:30px;color:var(--pink);flex:none}

/* mobile (heat map + day cards) */
.mobile{display:none}
.hm-grid,.hm-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.hm-dow{font-size:11px;font-weight:700;color:var(--muted);text-align:center;margin-bottom:5px}
.hm{border:0;border-radius:10px;aspect-ratio:1;max-width:100%;font-weight:700;font-size:13px;display:grid;place-items:center;position:relative}
.hm.past{opacity:.35}
.hm.inweek{outline:2px solid var(--ink);outline-offset:1px}
.hm.sel::after{content:"";position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:currentColor}
.week-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:22px 0 10px}
.week-h h3{font-size:19px}
.week-h span{font-size:13px;color:var(--muted)}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;margin-bottom:10px;text-align:left;width:100%}
.mcard.sel{border:2px solid var(--purple);padding:13px}
.mcard.past{opacity:.5}
.mbig{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;align-content:center;font-family:var(--display);font-size:26px;font-weight:600;line-height:1}
.mbig small{display:block;font-family:var(--body);font-size:10px;font-weight:700;margin-top:3px}
.mtop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mtop b{font-family:var(--display);font-weight:500;font-size:17px}
.mmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.mmeta strong{color:var(--ink)}
.mparks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mpark{background:var(--surface-2);border-radius:10px;padding:7px 9px;font-size:12px;font-variant-numeric:tabular-nums}
.mpark span{display:block;color:var(--muted);font-weight:600}

/* email signup */
.signup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px;align-items:center;margin-bottom:32px}
.signup h2{font-size:22px;margin-bottom:4px}
.signup p{margin:0;color:var(--muted)}
.signup form{display:flex;gap:8px;flex-wrap:wrap}
.signup input{flex:1 1 200px;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:11px 16px}
.signup button{border:0;border-radius:999px;padding:11px 20px;font-weight:700;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff}
.signup .msg{flex-basis:100%;font-size:13px;color:var(--muted);margin:0}
.soon{font-weight:700;color:var(--purple)}

/* footer + simple pages */
.foot{border-top:1px solid var(--line);padding-block:20px 32px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}
.foot a{color:var(--muted)}
.hero.slim{padding-block:0 40px}
.doc{max-width:720px;margin:0 auto;padding-block:36px 48px}
.doc h1{font-size:32px;margin-bottom:6px}
.doc h2{font-size:20px;margin:28px 0 8px}
.doc p,.doc li{max-width:65ch}
.doc .meta{color:var(--muted);font-size:14px}

@media (max-width:980px){.main{grid-template-columns:minmax(0,1fr)}.detail{position:static}.signup{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .hero{padding-block:0 84px}
  .nav-right{gap:10px}
  .btn-pill{padding:8px 14px}
  .brand span{font-size:18px}
  .hero-copy{padding-top:16px;text-align:left}
  .hero p{font-size:15px}
  .planner{padding:16px}
  .month{width:100%}
  .month h2{font-size:20px;min-width:0;flex:1}
  .seg{width:100%}
  .seg button{flex:1;padding:9px 8px}
  .legend{width:100%}
  .desktop{display:none}
  .mobile{display:block;padding-block:20px 8px}
  .main{padding-block:8px 32px}
}
@media (max-width:400px){.btn-pill{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}