/* WordPress integration and mobile refinements, layered over the supplied design. */
:root{--serif:"Noto Serif TC","Songti TC","PMingLiU",serif;--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",sans-serif}
html{scroll-padding-top:70px}body{overflow-wrap:anywhere}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{opacity:.65;cursor:default}.btn:disabled:hover{transform:none}.btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none}.skip-link{position:fixed;top:-100px;left:16px;z-index:999999;background:white;color:var(--ink);padding:12px}.skip-link:focus{top:12px}.demo-bar{gap:10px;justify-content:flex-start;padding:0 24px}.demo-bar p{font-size:11px}.demo-bar button{min-height:44px}.admin-bar .demo-bar{top:0}#app{min-height:calc(100svh - 48px);padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}.screen{min-height:calc(100svh - 48px)}#main-content:focus{outline:none}.theme-screen{min-height:auto}.theme-copy{padding-top:64px;padding-bottom:50px}.brand{margin-bottom:64px}.theme-actions{flex-wrap:wrap}.visual-panel{min-height:720px}.demo-note{font-size:12px;line-height:1.8;color:var(--muted);margin:20px 0 0}.page-note{text-align:center;margin:34px 0 0}.lead{font-size:18px}.field{font-size:16px}.input-action{display:flex;gap:8px}.input-action input{min-width:0}.input-action .btn{flex:none;font-size:12px;padding:0 12px}.check input{width:18px;height:18px;flex:none;accent-color:var(--ink)}.inline-link{padding:0;border:0;color:var(--ink);background:none;text-decoration:underline;cursor:pointer;line-height:1.8}.check{align-items:flex-start}.panel h2{font-family:var(--serif);color:var(--ink)}.dash-head .logo{padding:0;text-align:left;letter-spacing:.12em;font-size:22px}.avatar{border:0;cursor:pointer;flex-shrink:0}.large-avatar{width:58px;height:58px;font-size:22px}.welcome .eyebrow{color:#f0ce8b}.welcome p{line-height:1.8}.tile-head{gap:12px}.tile-head .linkbtn{flex-shrink:0;min-height:40px}.tile-head h2{line-height:1.5}.empty-state{padding:18px 8px;text-align:center;color:var(--muted)}.empty-state>span{color:var(--gold);font-size:28px}.empty-state p{font-size:14px;line-height:1.8;margin-bottom:4px}.prayer-text{font:500 18px/1.9 var(--serif);white-space:pre-wrap;color:#695654}.wish{gap:10px}.wish i{flex-shrink:0;font-style:normal}.wish-copy{flex:1;min-width:0}.wish p{font-size:14px;line-height:1.7}.wish .linkbtn{flex-shrink:0;min-height:44px;padding:4px}.icon-button{border:0;background:transparent;color:var(--muted);min-width:32px;min-height:44px;cursor:pointer;font-size:22px}.wish.is-complete .wish-copy p{text-decoration:line-through;color:var(--muted)}.collection-caption{color:var(--muted);line-height:1.8;margin:-12px 0 28px}.collection-footer{margin-top:24px}.collect-card{border:0;width:100%;font:inherit}.collect-card p{font:600 18px var(--serif)}.collect-card small{font-size:12px}.collect-card.locked{opacity:.64}.record-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;color:var(--muted)}.record-footer button{min-height:44px}.scan-button{margin-top:20px}.profile-settings{margin-top:18px}.muted{color:var(--muted)}.simple-modal{display:block;max-width:540px}.simple-modal .detail-copy{padding-top:56px}.modal-actions{display:flex;gap:12px;margin-top:24px}.modal-actions .btn{flex:1}.card-modal{padding:18px;z-index:1000}.card-modal-shell{max-height:calc(100dvh - 36px);overscroll-behavior:contain}.close-modal{min-height:44px;min-width:44px;background:#fff6e7;right:12px;top:12px}.modal-open{overflow:hidden}.detail-card-scene{position:relative}.detail-face h2{font:600 26px var(--serif);margin:0}.detail-face p{font-size:13px;line-height:1.8}.detail-face .seal{width:min(120px,100%);aspect-ratio:1;height:auto}.detail-face small{letter-spacing:.1em}.detail-copy h2{line-height:1.4}.setting-check{font-size:16px;align-items:center;padding:10px 0}#toast{z-index:1100;bottom:calc(102px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);width:max-content;text-align:center;line-height:1.7}.reveal-stage{z-index:1050}.reveal-card{width:min(280px,52vw,42svh)}.reveal-title{top:auto;bottom:7svh;padding:0 22px}.reveal-title p{font-size:14px}.reveal-stage .skip-reveal{top:calc(16px + env(safe-area-inset-top,0px));right:16px;min-height:44px}.reveal-stage .tap-note{bottom:18px}.site-header,.site-footer{position:relative;max-width:1120px;margin:auto;padding:28px 24px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.site-header a,.site-footer a,.document-page a{color:var(--ink)}.site-header .logo{font:700 24px var(--serif);text-decoration:none}.site-header ul{display:flex;gap:20px;padding:0;list-style:none;flex-wrap:wrap}.site-header img{max-height:64px;width:auto}.document-article{margin-bottom:24px}.entry-content{line-height:1.9}.entry-content img,.document-article img{max-width:100%;height:auto}.entry-content iframe,.entry-content video{max-width:100%}.entry-content pre{overflow:auto}.entry-content table{display:block;overflow:auto}.entry-content .alignwide{width:100%}.wp-caption{max-width:100%}.wp-caption-text,.gallery-caption{color:var(--muted);font-size:13px}.alignleft{float:left;margin:0 20px 20px 0}.alignright{float:right;margin:0 0 20px 20px}.aligncenter{display:block;margin-left:auto;margin-right:auto}.screen-reader-text{clip-path:inset(50%);position:absolute;width:1px;height:1px;overflow:hidden}.sticky{border-color:var(--gold)}.bypostauthor{font-weight:inherit}
@media(min-width:801px){.theme-screen{padding-bottom:0}#app:has(.theme-screen){padding-bottom:0}.theme-copy h1{font-size:clamp(48px,5.5vw,72px)}.theme-copy{padding-left:9%;padding-right:7%}.brand{font-size:19px;letter-spacing:.15em}.theme-actions .btn{padding:0 18px;font-size:14px}.stack{align-content:start}}
@media(max-width:800px){.admin-bar .demo-bar{top:0}.theme-screen{display:flex;flex-direction:column}.theme-copy{padding:32px 24px 36px}.brand{margin-bottom:36px;font-size:18px;letter-spacing:.18em}.theme-copy h1{font-size:clamp(40px,10vw,54px);margin-top:14px}.lead{font-size:16px;line-height:1.9}.flow-mini{margin:24px 0;gap:22px}.flow-mini div{font-size:12px}.theme-actions{width:100%}.theme-actions .btn{width:100%}.visual-panel{min-height:440px;border-radius:28px;margin:0 20px 24px}.card-hero{width:230px}.card-inner .seal{width:110px;height:110px;font-size:44px}.card-inner h2{font-size:26px}.card-inner p{font-size:11px}.card-inner{padding:22px 14px}.welcome{padding:26px}.welcome h1{font-size:clamp(26px,6.8vw,36px);line-height:1.55}.welcome p{font-size:14px}.welcome-nowrap{white-space:nowrap}.day-badge{margin-top:8px}.day-badge br{display:none}.day-badge b{font-size:22px;margin:0 6px}.dashboard,.page{padding:26px 20px}.dash-head .logo{font-size:19px}.collection{gap:14px}.panel h1{font-size:29px;line-height:1.5}.auth-wrap,.ritual-wrap,.claim-screen{padding-top:30px}.tile{padding:20px}.achievement-grid{gap:10px}.achievement-card{min-height:168px;padding:16px 7px 12px}.achievement-icon{width:50px;height:50px;border-radius:14px;font-size:22px;margin-bottom:9px}.achievement-card h3{font-size:14px}.achievement-card p{font-size:10px;min-height:32px}.achievement-card small{font-size:10px;padding-top:8px}.demo-bar{padding-left:16px;padding-right:96px}.demo-bar span{font-size:11px}.simple-modal .detail-copy{padding:56px 24px 28px}.detail-copy h2{font-size:28px}}
@media(max-width:600px){.admin-bar .demo-bar{top:0}.card-modal-shell{border-radius:22px}.detail-card-scene{padding:42px 30px 38px;min-height:340px}.detail-card{width:185px}.detail-face{padding:16px 10px}.detail-face h2{font-size:22px}.detail-face .seal{width:88px;font-size:36px}.detail-copy{padding:26px}.flip-hint{bottom:4px}.detail-copy .story{font-size:15px}.reveal-title h2{font-size:27px}.reveal-card .seal{width:90px;height:90px;font-size:36px}.reveal-card h2{font-size:22px}.reveal-card p,.reveal-card small{font-size:10px}.reveal-card .card-face>div{padding:20px 10px}.reveal-card .card-face{border-radius:20px}.reveal-title{bottom:9svh}.reveal-title p{font-size:12px}.reveal-stage .tap-note{display:none}}
@media(max-width:360px){.theme-copy{padding-left:20px;padding-right:20px}.brand{font-size:16px}.flow-mini{gap:16px}.flow-mini div{font-size:11px}.dash-head .logo{font-size:17px}.dashboard,.page{padding-left:16px;padding-right:16px}.tile{padding:16px}.achievement-grid{gap:7px}.achievement-card{min-height:158px;padding:13px 5px 10px}.achievement-icon{width:44px;height:44px;font-size:20px}.achievement-card h3{font-size:13px}.achievement-card p{font-size:9px;min-height:30px}.achievement-card small{font-size:9px}.wish{gap:6px}.wish i{width:28px;height:28px}.collect-card p{font-size:16px}.input-action .btn{padding:0 8px}.input-action input{padding-left:10px}}
@media(max-height:550px) and (orientation:landscape){.reveal-card{width:140px}.reveal-card .seal{width:60px;height:60px;font-size:28px}.reveal-card h2{font-size:16px}.reveal-card p{font-size:9px}.reveal-card .card-face>div{padding:12px 8px}.reveal-card-wrap{transform:translateX(-90px)}.reveal-title{left:65%;bottom:30%;width:45%;transform:none}.reveal-title h2{font-size:22px}.reveal-title p{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal-title{transform:translateX(-50%)}.reveal-stage{opacity:1}.reveal-card{transform:none;filter:none}.collect-card:after{display:none}}

/* 2026-09-16 v1.0.4: full-width shell + centered content.
   Do NOT use 100vw here: if WordPress/a plugin adds body padding, 100vw starts
   after that padding and overflows the right edge. Reset horizontal body spacing
   and let the app occupy the body's actual 100% content width instead. */
html,
body.wish365-experience{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.wish365-experience{
  padding-left:0 !important;
  padding-right:0 !important;
  overflow-x:hidden;
}
body.wish365-experience #wish365-root{
  position:relative;
  display:block;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}
body.wish365-experience #main-content,
body.wish365-experience #app{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.wish365-experience .demo-bar{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
}
/* Keep each app screen at its original design width.
   Do not force every .screen to 1180px: auth/ritual/claim are intentionally narrow. */
body.wish365-experience .screen.theme-screen{
  width:min(100%,1180px) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.wish365-experience .screen.auth-wrap,
body.wish365-experience .screen.ritual-wrap{
  width:min(100%,560px) !important;
  max-width:560px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.wish365-experience .screen.claim-screen{
  width:min(100%,760px) !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.wish365-experience .screen.dashboard{
  width:min(100%,1100px) !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.wish365-experience .screen.page{
  width:min(100%,1000px) !important;
  max-width:1000px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* 2026-09-17 v1.0.26: WordPress admin-bar positioning.
   Do not add body top padding on app pages: the sticky demo bar already uses
   top:32px / 46px to sit directly below the fixed WordPress admin bar.
   Adding the same offset to body created an extra blank strip above the demo bar. */
body.wish365-experience{
  margin-top:0 !important;
  padding-top:0 !important;
}
body.wish365-experience .demo-bar{
  position:sticky !important;
  top:0 !important;
}
body.admin-bar.wish365-experience{
  margin-top:0 !important;
  padding-top:0 !important;
}
body.admin-bar.wish365-experience #wpadminbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
}
body.admin-bar.wish365-experience .demo-bar{
  top:32px !important;
}
@media screen and (max-width:782px){
  body.admin-bar.wish365-experience{
    padding-top:0 !important;
  }
  body.admin-bar.wish365-experience .demo-bar{
    top:46px !important;
  }
}
/* 2026-09-16 v1.0.6: auth screen controls. */
body.wish365-experience .auth-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
body.wish365-experience .auth-actions .btn{
  width:100%;
}
@media(max-width:420px){
  body.wish365-experience .auth-actions{grid-template-columns:1fr;}
}


/* 2026-09-17 v1.0.27: narrow-desktop/admin-bar layout hardening. */
/*
 * The WordPress admin bar is fixed, while the red demo bar is sticky with a
 * top offset. A sticky element keeps its original place in document flow, so
 * its top offset alone does not reserve the 32/46px that it moves downward.
 * Reserve that offset on main content instead. This keeps every app screen
 * (home/cards/tasks/prayers/profile/auth/etc.) below both top bars.
 */
body.wish365-experience{
  --wish365-admin-offset:0px;
}
body.admin-bar.wish365-experience{
  --wish365-admin-offset:32px;
}
body.wish365-experience .demo-bar{
  top:var(--wish365-admin-offset)!important;
}
body.wish365-experience #main-content{
  box-sizing:border-box;
  padding-top:var(--wish365-admin-offset)!important;
}
@media screen and (max-width:782px){
  body.admin-bar.wish365-experience{
    --wish365-admin-offset:46px;
  }
}

/* Keep the shared dashboard title/avatar fully visible at narrow desktop widths. */
body.wish365-experience .dash-head{
  position:relative;
  z-index:2;
  min-width:0;
}
body.wish365-experience .dash-head .logo{
  min-width:0;
  max-width:calc(100% - 58px);
}

/* 431–767px previously used a +44px bleed on the task hero/tabs. Combined
 * with route-level overflow clipping, the left/right ornaments and rounded
 * edges were visibly cut off when a desktop browser window was narrowed.
 * Keep those blocks inside the task board at this intermediate width.
 */
@media (min-width:431px) and (max-width:767px){
  #wish365-root.is-task-route .task-board-v19{
    margin-top:0!important;
  }
  #wish365-root.is-task-route .task-board-v19 .task-hero-v19.task-hero-v22,
  #wish365-root.is-task-route .task-board-v19 .task-tabs-v19{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  #wish365-root.is-task-route .task-board-v19 .task-hero-v19.task-hero-v22{
    margin-bottom:10px!important;
  }
}

/* 2026-09-17 v1.0.28: remove the extra clipped task-page background layer on web/tablet.
   The task route already owns the full-page cream/pink background in task-v21.css.
   .task-screen also had two blurred pseudo-element glows; once the task screen is
   centered at a fixed/max width and overflow-x is clipped, those glows end at the
   screen edge and create a visible second vertical color panel. Keep the approved
   mobile appearance, but remove those inner glows from wider browser layouts. */
@media (min-width:431px){
  #wish365-root.is-task-route .task-screen{
    background:transparent!important;
  }
  #wish365-root.is-task-route .task-screen::before,
  #wish365-root.is-task-route .task-screen::after{
    content:none!important;
    display:none!important;
  }
}