/* Generated paper and illustrations frame the existing rituals. All copy and
   controls remain live HTML, with their own contrast and scrolling surface. */
#ritual-dialog.ritual-dialog{
  --ritual-ink:#344b3c;--ritual-muted:#65715e;--ritual-gold:#b59a5e;
  width:min(560px,calc(100% - 28px));max-width:none;
  max-height:calc(100dvh - 32px);margin:auto;padding:58px 0 0;box-sizing:border-box;
  overflow:hidden;border:28px solid transparent;border-radius:24px;
  border-image-source:url('./art-ui/ui-paper-frame-v1.webp');
  /* 280px contains the full lotus, cloud and curling gold stem in each corner. */
  border-image-slice:280 fill;border-image-width:1;border-image-repeat:stretch;
  background:#f7f1df;color:var(--ritual-ink);
  box-shadow:0 28px 100px #10251d66,0 2px 12px #152d2426;
  isolation:isolate;
}
#ritual-dialog::backdrop{background:#1028209c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#ritual-dialog #dialog-content{
  /* The close button has its own fixed header above this scrolling surface. */
  box-sizing:border-box;max-height:calc(100dvh - 146px);min-width:0;
  padding:10px 22px max(26px,env(safe-area-inset-bottom));border:0;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#ad9b6e80 transparent;
  scroll-padding:26px;
}
#ritual-dialog .ritual-sheet{min-width:0;position:relative;overflow-wrap:anywhere}
#ritual-dialog .close-button{
  position:absolute;z-index:5;right:8px;top:8px;width:44px;height:44px;
  border:1px solid #c6b58080;background:#faf6e9ee;color:#61735d;
  box-shadow:0 2px 8px #4a4d2420;border-radius:50%;
}
#ritual-dialog .close-button:hover{background:#fffdf4;color:#304e3b}
#ritual-dialog .close-button svg{width:18px;height:18px}
#ritual-dialog button:focus-visible,#ritual-dialog textarea:focus-visible,#ritual-dialog input:focus-visible{
  outline:2px solid #62846b;outline-offset:3px;
}
#ritual-dialog .modal-title{font-size:34px;line-height:1.3;letter-spacing:-.5px;color:#344c3c;margin:0 0 17px;text-wrap:balance}
#ritual-dialog .modal-eyebrow{font-size:11px;line-height:1.8;letter-spacing:1.35px;color:#7c6940;margin:8px 0 15px}
#ritual-dialog .modal-copy{font-size:14px;line-height:1.85;color:var(--ritual-muted);margin:0 0 18px}
#ritual-dialog .modal-icon{color:#9c8652;margin:2px auto 17px}
#ritual-dialog .modal-icon svg{width:35px;height:35px}
#ritual-dialog .dialog-footnote{font-size:13px;line-height:1.75;color:#69705a;margin:18px 0 0}
#ritual-dialog .dialog-footnote br{display:none}
#ritual-dialog .primary-button,#ritual-dialog .secondary-button{
  min-height:48px;font-size:14px;line-height:1.5;border-radius:12px;
  padding:12px 16px;gap:10px;white-space:normal;overflow-wrap:anywhere;
}
#ritual-dialog .primary-button{background:#355c48;border-color:#355c48;color:#fffbed;box-shadow:0 5px 14px #2d4b3320}
#ritual-dialog .primary-button:hover{background:#294b38}
#ritual-dialog .secondary-button{background:#fffdf333;border-color:#b7bba08c;color:#536a52}
#ritual-dialog .secondary-button:hover{background:#e9eddf99}
#ritual-dialog .primary-button svg,#ritual-dialog .secondary-button svg{width:18px;height:18px;flex-shrink:0}
#ritual-dialog .theme-grid{gap:8px;margin:22px 0 25px}
#ritual-dialog .theme-button{min-height:44px;padding:10px 15px;border-radius:24px;font-size:13px;line-height:1.5;color:#69735c;background:#efeedfbb;border-color:#cdd2b9}
#ritual-dialog .theme-button.selected{color:#355440;background:#dfe8d9;border-color:#86a17d;box-shadow:inset 0 0 0 1px #86a17d44}
.ritual-hero{position:relative;display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none;-webkit-user-select:none}
.ritual-hero img{display:block;max-width:100%;object-fit:contain}
#ritual-dialog .ritual-hero--cup{height:166px;margin:0 auto 14px}
#ritual-dialog .ritual-hero--cup .fortune-cup-image{width:144px;height:174px;filter:drop-shadow(0 8px 8px #6d582b18)}
#ritual-dialog .ritual-hero--lotus{height:138px;margin:0 auto 12px}
#ritual-dialog .ritual-hero--lotus img{width:150px;height:150px;filter:drop-shadow(0 8px 10px #80602f15)}
#ritual-dialog .ritual-hero--garden{margin:0 -8px 24px;overflow:hidden;border-radius:13px;background:#dce6d4}
#ritual-dialog .ritual-hero--garden img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
#ritual-dialog[data-kind='fortune-intro'] .modal-icon,
#ritual-dialog[data-kind='wish'] .modal-icon,
#ritual-dialog[data-kind='saved'] .modal-icon,
#ritual-dialog[data-kind='guide'] .modal-icon{display:none}
#ritual-dialog .fortune-number{font-size:13px;letter-spacing:1px;line-height:1.8;color:#7d683b;margin:0 0 15px}
#ritual-dialog .fortune-verse{
  font-size:23px;line-height:1.9;letter-spacing:.1px;margin:23px 0;
  padding:21px 8px;color:#3f614a;border-color:#b7bc984d;
}
#ritual-dialog .fortune-meaning{font-size:14px;line-height:1.95;color:#5d6d58;margin-bottom:24px}
#ritual-dialog .daily-action{font-size:14px;line-height:1.85;padding:17px 18px;background:#e6ebd8bb;color:#526c4b;border:1px solid #ccd7bb9c;border-radius:13px}
#ritual-dialog .daily-action strong{font-size:11px;line-height:1.7;color:#536947;letter-spacing:1px;margin-bottom:7px}
#ritual-dialog .dialog-actions{gap:10px;align-items:stretch}
#ritual-dialog .dialog-actions>*{min-width:0;flex:1}
#ritual-dialog .field-label{font-size:14px;line-height:1.6;color:#55694d;margin-top:24px}
#ritual-dialog .wish-text{font-size:16px;line-height:1.8;min-height:150px;height:150px;max-height:45dvh;background:#fffdf3b3;border-color:#bbc7a6;border-radius:12px;padding:13px 14px;color:#344d3a;box-sizing:border-box}
#ritual-dialog .wish-text::placeholder{color:#657450;opacity:1}
#ritual-dialog .wish-counter{font-size:13px;color:#647350;margin:7px 0 20px}
#ritual-dialog .empty-state{font-size:14px;line-height:1.9;color:#748068;padding:24px 6px}
#ritual-dialog .saved-section-title{font-size:13px;line-height:1.7;letter-spacing:1px;color:#6c7d5a;margin-top:27px}
#ritual-dialog .saved-entry{min-width:0;padding:17px;border-radius:13px;border-color:#c8cfb8;background:#fffdf24d;margin:13px 0;overflow-wrap:anywhere}
#ritual-dialog .saved-entry>small{font-size:13px;line-height:1.6;letter-spacing:.3px;color:#63724f}
#ritual-dialog .saved-entry h3{font-size:23px;line-height:1.4;color:#3f5c41;margin:7px 0 12px}
#ritual-dialog .saved-entry p{font-size:14px;line-height:1.9;color:#637458;overflow-wrap:anywhere}
#ritual-dialog .entry-actions{gap:8px;flex-wrap:wrap}
#ritual-dialog .entry-actions button{min-height:44px;font-size:13px;line-height:1.5;padding:10px 12px;border-radius:9px;color:#4a6849;background:#dfe8d3b3;white-space:normal}
#ritual-dialog .entry-actions button:last-child{color:#8a7756;background:#ede7d45c}
#ritual-dialog .guide-steps{gap:23px;margin:28px 0}
#ritual-dialog .guide-step{font-size:14px;line-height:1.75;gap:12px;color:#425e45;min-width:0}
#ritual-dialog .guide-step>div{min-width:0}
#ritual-dialog .guide-step>span:first-child{width:30px;height:30px;font-size:13px;border-color:#bdc8a9;color:#77936b;background:#f7f9ec66}
#ritual-dialog .guide-step p{font-size:14px;line-height:1.85;color:#617252;margin-top:5px}
#ritual-dialog .settings-row{font-size:14px;line-height:1.6;gap:16px;flex-wrap:wrap;margin:25px 0 22px;color:#5c7155}
#ritual-dialog .settings-row input{min-height:44px;width:160px;max-width:100%;flex:1;min-width:100px;accent-color:#557a52}
#ritual-dialog .drawing-cup{height:228px;width:200px;max-width:100%;margin:17px auto 19px;display:grid;place-items:center}
#ritual-dialog .drawing-cup .bamboo-art{position:relative;height:220px;width:180px;margin:0;transform:none;opacity:1;display:grid;place-items:center}
#ritual-dialog .drawing-cup .fortune-cup-image{display:block;width:178px;height:218px;max-width:100%;object-fit:contain;transform-origin:50% 78%;filter:drop-shadow(0 9px 8px #6a4d2926);animation:ritualCupSway .52s ease-in-out infinite alternate}
#ritual-dialog .drawing-progress{width:160px;max-width:70%;height:3px;margin:23px auto 6px;background:#d5dcbf;border-radius:3px}
#ritual-dialog .drawing-progress::after{background:#92a475;animation-duration:2.6s}
#ritual-dialog .breath-orbit{width:166px;height:166px;margin:40px auto;background:#e6edd8;border:1px solid #cedabd;box-shadow:inset 0 0 30px #faffed99,0 0 0 12px #dce7ca36}
#ritual-dialog .breath-orbit::before{border-color:#afc399}
#ritual-dialog .breath-orbit::after{background:radial-gradient(circle,#ecf3dd,#ccdebb8c)}
#ritual-dialog .breath-text{font-size:25px;color:#4f7345}
#ritual-dialog .breath-timer{font-size:14px;line-height:1.8;color:#5d734e;margin:23px 0 26px}
@keyframes ritualCupSway{from{transform:rotate(-6deg) translateX(-2px)}to{transform:rotate(5deg) translateX(2px)}}
@media(max-width:480px){
  #ritual-dialog.ritual-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-width:18px;border-radius:19px}
  #ritual-dialog #dialog-content{max-height:calc(100dvh - 118px);padding:10px 15px max(22px,env(safe-area-inset-bottom));scroll-padding:20px}
  #ritual-dialog .modal-title{font-size:29px;letter-spacing:-.4px}
  #ritual-dialog .modal-eyebrow{font-size:11px;letter-spacing:1px}
  #ritual-dialog .modal-copy,#ritual-dialog .fortune-meaning,#ritual-dialog .daily-action,#ritual-dialog .saved-entry p,#ritual-dialog .guide-step,#ritual-dialog .guide-step p{font-size:14px}
  #ritual-dialog .modal-copy br{display:none}
  #ritual-dialog .ritual-hero--cup{height:138px;margin:0 auto 13px}
  #ritual-dialog .ritual-hero--cup .fortune-cup-image{width:125px;height:150px}
  #ritual-dialog .ritual-hero--lotus{height:120px;margin:0 auto 13px}
  #ritual-dialog .ritual-hero--lotus img{width:132px;height:132px}
  #ritual-dialog .ritual-hero--garden{margin:0 -3px 22px;border-radius:10px}
  #ritual-dialog .fortune-verse{font-size:21px;padding:19px 0;line-height:1.9}
  #ritual-dialog .dialog-actions{flex-direction:column}
  #ritual-dialog .theme-grid{gap:7px;margin:20px 0}
  #ritual-dialog .theme-button{font-size:13px;padding:10px 12px}
  #ritual-dialog .saved-entry{padding:14px}
  #ritual-dialog .guide-step{gap:10px}
  #ritual-dialog .guide-step>span:first-child{width:28px;height:28px}
  #ritual-dialog .settings-row{gap:9px}
  #ritual-dialog .drawing-cup{height:204px;margin:10px auto 15px}
  #ritual-dialog .drawing-cup .bamboo-art{height:202px;width:166px}
  #ritual-dialog .drawing-cup .fortune-cup-image{height:200px;width:164px}
}
@media(max-width:350px){
  #ritual-dialog.ritual-dialog{border-width:14px}
  #ritual-dialog #dialog-content{max-height:calc(100dvh - 110px);padding-inline:13px}
  #ritual-dialog .modal-title{font-size:26px}
  #ritual-dialog .modal-eyebrow{letter-spacing:.65px}
  #ritual-dialog .primary-button,#ritual-dialog .secondary-button{padding-inline:12px;font-size:13px}
  #ritual-dialog .daily-action{padding:14px}
  #ritual-dialog .saved-entry{padding:13px}
  #ritual-dialog .settings-row input{flex-basis:100%}
}
@media(max-height:560px){
  #ritual-dialog[data-kind='breath'] .ritual-hero--garden,
  #ritual-dialog[data-kind='breath'] .modal-eyebrow,
  #ritual-dialog[data-kind='drawing'] .modal-eyebrow{display:none}
  #ritual-dialog[data-kind='breath'] .modal-title,
  #ritual-dialog[data-kind='drawing'] .modal-title{font-size:26px;line-height:1.25;margin-bottom:10px}
  #ritual-dialog[data-kind='breath'] .modal-copy,
  #ritual-dialog[data-kind='drawing'] .modal-copy{font-size:13px;line-height:1.65;margin-bottom:12px}
  #ritual-dialog[data-kind='breath'] .breath-orbit{width:120px;height:120px;margin:14px auto 12px}
  #ritual-dialog[data-kind='breath'] .breath-text{font-size:21px}
  #ritual-dialog[data-kind='breath'] .breath-timer{font-size:13px;line-height:1.6;margin:10px 0 14px}
  #ritual-dialog[data-kind='breath'] .secondary-button{min-height:44px;padding-block:9px}
  #ritual-dialog[data-kind='drawing'] .drawing-cup{width:126px;height:148px;margin:10px auto 12px}
  #ritual-dialog[data-kind='drawing'] .drawing-cup .bamboo-art{width:116px;height:148px}
  #ritual-dialog[data-kind='drawing'] .drawing-cup .fortune-cup-image{width:111px;height:148px}
  #ritual-dialog[data-kind='drawing'] .drawing-progress{width:130px;margin:12px auto 4px}
}
@media(max-height:560px) and (min-width:500px){
  #ritual-dialog[data-kind='breath'] .ritual-sheet,
  #ritual-dialog[data-kind='drawing'] .ritual-sheet{display:grid;grid-template-columns:minmax(0,1fr)124px;column-gap:16px;align-items:center}
  #ritual-dialog[data-kind='breath'] .modal-title,
  #ritual-dialog[data-kind='drawing'] .modal-title{grid-column:1;grid-row:1;text-align:left;margin-bottom:7px}
  #ritual-dialog[data-kind='breath'] .modal-copy,
  #ritual-dialog[data-kind='drawing'] .modal-copy{grid-column:1;grid-row:2;text-align:left;margin-bottom:0}
  #ritual-dialog[data-kind='breath'] .breath-orbit{grid-column:2;grid-row:1 / 3;width:112px;height:112px;margin:2px auto}
  #ritual-dialog[data-kind='breath'] .breath-timer{grid-column:1 / -1;grid-row:3;margin:12px 0 10px}
  #ritual-dialog[data-kind='breath'] .secondary-button{grid-column:1 / -1;grid-row:4}
  #ritual-dialog[data-kind='drawing'] .drawing-cup{grid-column:2;grid-row:1 / 3;margin:0 auto}
  #ritual-dialog[data-kind='drawing'] .drawing-progress{grid-column:1 / -1;grid-row:3}
}
@media(prefers-reduced-motion:reduce){
  #ritual-dialog .drawing-cup .fortune-cup-image,#ritual-dialog .fade-in,
  #ritual-dialog .drawing-progress::after,#ritual-dialog .breath-orbit::before,
  #ritual-dialog .breath-orbit::after{animation:none!important;transition:none!important}
  #ritual-dialog .drawing-progress::after{width:100%}
}