/* Polish layer (28 Oct 2026). Loaded last so one set of tokens governs depth, corners, borders, focus and motion across every page.
   Earlier layers (style.css → full.css → ui.css) mixed hard "lip" shadows (0 4px 0) with soft blurs and ~20 corner radii; this replaces both
   with a single soft, ink-tinted elevation scale and a 5-step radius scale. Layout and artwork placement are untouched. */
:root{
 --ink-rgb:52 40 74;
 --hairline:1px solid rgb(var(--ink-rgb) / .09);
 --hairline-strong:1px solid rgb(var(--ink-rgb) / .16);
 --accent:#8c6bb1;--accent-soft:#efe7fa;--accent-line:#c3aedb;
 --r-xs:10px;--r-sm:14px;--r-md:18px;--r-lg:24px;--r-xl:32px;--r-pill:999px;
 /* Elevation: a tight contact shadow plus a wide ambient one, both tinted with the ink colour rather than grey/black. */
 --e0:0 0 0 0 transparent;
 --e1:0 1px 2px rgb(var(--ink-rgb) / .05),0 2px 8px -2px rgb(var(--ink-rgb) / .06);
 --e2:0 1px 2px rgb(var(--ink-rgb) / .05),0 8px 20px -6px rgb(var(--ink-rgb) / .12);
 --e3:0 2px 4px rgb(var(--ink-rgb) / .05),0 18px 40px -14px rgb(var(--ink-rgb) / .20);
 --e4:0 4px 10px rgb(var(--ink-rgb) / .06),0 32px 80px -20px rgb(var(--ink-rgb) / .32);
 --ring:0 0 0 2px #fff,0 0 0 4.5px var(--accent);
 --ease:cubic-bezier(.2,.7,.2,1);--t:180ms;
 --shadow:var(--e1);
}

/* Motion: one curve and duration for everything interactive. */
button,.path-card,.need-card,.home-choice,textarea,.option,.output-options button,.flower-choice,.discovery{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}

/* Focus: brand-coloured ring on keyboard focus only (replaces the old brown outline from the first prototype theme). */
:where(button,a,textarea,input,select,summary,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring)}
.quiet:focus-visible,.btn-inline:focus-visible,.back-button:focus-visible{border-radius:6px}

/* Primary: keep the brand lime, swap the hard lip for soft depth plus a top highlight. */
.primary,.card-body .primary{background:linear-gradient(180deg,#d0f2a3,#bfe685);color:#2c3e1f;border:1px solid #a9d36f;border-radius:var(--r-md);box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 1px 2px rgb(64 92 28 / .16),0 8px 18px -8px rgb(92 132 40 / .45)}
.primary:hover:not(:disabled){transform:translateY(-1px);background:linear-gradient(180deg,#d6f5ac,#c4ea8b);box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),0 2px 4px rgb(64 92 28 / .16),0 12px 24px -10px rgb(92 132 40 / .5)}
.primary:active:not(:disabled){transform:translateY(0);box-shadow:inset 0 1px 2px rgb(64 92 28 / .18),0 1px 2px rgb(64 92 28 / .12)}
.primary:focus-visible{box-shadow:var(--ring),0 8px 18px -8px rgb(92 132 40 / .45)}
dialog .primary{box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 1px 2px rgb(64 92 28 / .14)}

/* Secondary and chips: hairline border, white surface, quiet lift on hover. */
.secondary{background:#fff;border:var(--hairline-strong);border-radius:var(--r-pill);box-shadow:var(--e1);color:#4f3f63}
.secondary:hover:not(:disabled){border-color:var(--accent-line);box-shadow:var(--e2);transform:translateY(-1px)}
.secondary:active:not(:disabled){transform:none;box-shadow:var(--e0)}
.option{background:#fff;border:var(--hairline-strong);border-radius:var(--r-pill);color:#5a4d6b;font-size:13px}
.option:hover{border-color:var(--accent-line);background:#fcfaff}
.option[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line);color:#4f3a68;box-shadow:inset 0 0 0 1px var(--accent-line)}
.quiet{color:#6c5f7c}
.quiet:hover:not(:disabled){color:#4f3a68}

/* Segmented choices (format / text toggle). */
.output-options button{background:#fff;border:var(--hairline-strong);border-radius:var(--r-sm);color:#6a5a79;box-shadow:var(--e0)}
.output-options button:hover{border-color:var(--accent-line);box-shadow:var(--e1)}
.output-options button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line);color:#4f3a68;box-shadow:inset 0 0 0 1px var(--accent-line)}
.output-options small{font-size:11px}

/* Fields. */
textarea{background:#fff;border:var(--hairline-strong);border-radius:var(--r-md);box-shadow:inset 0 1px 2px rgb(var(--ink-rgb) / .04)}
textarea:hover{border-color:rgb(var(--ink-rgb) / .24)}
textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 4px rgb(140 107 177 / .18)}

/* Cards: one surface recipe — white, hairline, e1 at rest, e2 + small lift on hover. */
.path-card,.need-card,.discovery{background:#fff;border:var(--hairline);border-radius:var(--r-xl);box-shadow:var(--e1)}
.path-card:hover,.need-card:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.discovery{border-radius:var(--r-lg)}
.home-choice{background:#fff;border:var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e1)}
.home-choice:hover{border-color:var(--accent-line);box-shadow:var(--e2);transform:translateY(-2px)}
.home-choice:active{transform:translateY(0);box-shadow:var(--e1)}
.home-choice-icon,.need-icon{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6)}

/* Art frames and previews. */
.path-scene{box-shadow:var(--e2);border-radius:var(--r-xl)}
.ritual-v2 .path-scene{box-shadow:none}
.result-card{box-shadow:var(--e3);border-radius:var(--r-xl)}
.output-preview img{border-radius:var(--r-sm);box-shadow:var(--e3)}
#composition-board,.composition-display{border-radius:var(--r-lg);box-shadow:var(--e2)}
.home-emblem{box-shadow:var(--e2)}
.scene-label span,.art-caption,.float-note,.sticker{box-shadow:var(--e1)}

/* Offering picker: selected item reads as a soft pill instead of a heavy outline. */
.flower-choice{border:1px solid transparent;border-radius:var(--r-md)}
.flower-choice:hover{background:rgb(255 255 255 / .7)}
.flower-choice[aria-pressed=true]{background:#fff;border-color:var(--accent-line);box-shadow:var(--e1)}

/* Navigation. */
.app-sidebar nav button{border-radius:var(--r-sm)}
.app-sidebar nav button:hover:not([aria-current=page]){background:rgb(255 255 255 / .55)}
.app-sidebar nav button[aria-current=page]{background:#fff;box-shadow:var(--e1);color:#4f3a68}
dialog{border:var(--hairline);border-radius:var(--r-xl);box-shadow:var(--e4)}
dialog::backdrop{background:rgb(var(--ink-rgb) / .28);backdrop-filter:blur(3px)}

/* Small text floor: nothing interactive or informational below 11px. */
.progress{font-size:12px}
.progress b{font-size:11px}
.progress [aria-current=step] b{background:var(--accent-soft);color:#4f3a68;box-shadow:inset 0 0 0 1px var(--accent-line)}
.pill{font-size:12px}

@media (max-width:760px){
 .app-sidebar nav{border:var(--hairline);box-shadow:var(--e3);background:rgb(255 255 255 / .88);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
 .app-sidebar nav button{border-radius:var(--r-lg)}
 .app-sidebar nav button[aria-current=page]{background:var(--accent-soft);box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
 button,.path-card,.need-card,.home-choice,.secondary,.option,.output-options button{transition:none}
 .primary:hover,.secondary:hover,.path-card:hover,.need-card:hover,.home-choice:hover{transform:none}
}

/* Deity stages: a framed scene gets soft depth; inside the ritual panel the stage sits one level lower than the panel itself. */
.prepare-v2 .deity-stage,.focus-v2 .deity-stage{box-shadow:var(--e2);border-radius:var(--r-xl)}
@media (min-width:761px){.ritual-v2>.visual{border:var(--hairline);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),var(--e1)}}
.ritual-v2 .shrine-deity .deity-stage{box-shadow:var(--e1);border-radius:var(--r-lg)}
.shrine-label{letter-spacing:.02em}
.output-preview{border:var(--hairline);border-radius:var(--r-xl)}

/* ── Depth pass (28 Oct 2026) ──────────────────────────────────────────────────────────────
   More dimension without new artwork: an ambient lit background, surfaces lit from the top (gradient + bright top edge),
   raised icon tiles, floating isometric art with a ground shadow, and a stronger lift on hover. */
:root{
 --e1:0 1px 1px rgb(var(--ink-rgb) / .04),0 2px 4px rgb(var(--ink-rgb) / .04),0 6px 14px -6px rgb(var(--ink-rgb) / .10);
 --e2:0 1px 2px rgb(var(--ink-rgb) / .05),0 4px 8px -2px rgb(var(--ink-rgb) / .06),0 14px 28px -10px rgb(var(--ink-rgb) / .18);
 --e3:0 2px 4px rgb(var(--ink-rgb) / .05),0 10px 20px -8px rgb(var(--ink-rgb) / .12),0 28px 56px -18px rgb(var(--ink-rgb) / .26);
 --lit:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 -1px 0 rgb(var(--ink-rgb) / .04);
 --surface-lit:linear-gradient(180deg,#fff 0%,#fefcff 55%,#fbf8fe 100%);
}
/* Ambient light: two soft colour pools fixed behind the page so content sits in a space rather than on flat paper. */
body{background:radial-gradient(1100px 700px at 12% -10%,#efe6fb 0%,transparent 60%),radial-gradient(900px 640px at 100% 105%,#fdeee6 0%,transparent 60%),radial-gradient(700px 500px at 85% 10%,#eaf3fb 0%,transparent 65%),#faf9fd;background-attachment:fixed}

/* Lit surfaces. */
.home-choice,.path-card,.need-card,.discovery{background:var(--surface-lit);box-shadow:var(--lit),var(--e1)}
.home-choice:hover,.path-card:hover,.need-card:hover{transform:translateY(-3px);box-shadow:var(--lit),var(--e3)}
.home-choice:active,.path-card:active{transform:translateY(-1px);box-shadow:var(--lit),var(--e1)}
.secondary,.option,.output-options button{background:linear-gradient(180deg,#fff,#fbf9fd);box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .05)}
.option[aria-pressed=true],.output-options button[aria-pressed=true]{background:linear-gradient(180deg,#f4eefc,#ebe1f8);box-shadow:inset 0 1px 2px rgb(var(--ink-rgb) / .08),inset 0 0 0 1px var(--accent-line)}
textarea{background:linear-gradient(180deg,#fbf9fd,#fff 40%);box-shadow:inset 0 2px 4px rgb(var(--ink-rgb) / .05)}

/* Raised icon tiles and arrow buttons. */
.home-choice-icon,.need-icon{background:linear-gradient(160deg,rgb(255 255 255 / .55),transparent 60%),var(--tone);box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -2px 0 rgb(var(--ink-rgb) / .06),0 4px 10px -4px rgb(var(--ink-rgb) / .25)}
.home-choice-icon img{filter:drop-shadow(0 2px 2px rgb(var(--ink-rgb) / .18))}
.choice-arrow{background:linear-gradient(180deg,#fff,#f1eaf8);box-shadow:var(--lit),0 2px 5px -1px rgb(var(--ink-rgb) / .18);transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.home-choice:hover .choice-arrow{transform:translateX(3px);background:linear-gradient(180deg,#f6f0fd,#e6dbf5);color:#5a4372}

/* Floating isometric art: a drop shadow that follows the artwork's own silhouette. */
.home-garden img,.home-garden svg{filter:drop-shadow(0 18px 18px rgb(var(--ink-rgb) / .16)) drop-shadow(0 4px 4px rgb(var(--ink-rgb) / .08))}
.path-art{box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),inset 0 -24px 40px -28px rgb(var(--ink-rgb) / .18)}
.path-art svg,.mini-art svg{filter:drop-shadow(0 10px 10px rgb(var(--ink-rgb) / .14))}
.mini-art{box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),0 4px 10px -4px rgb(var(--ink-rgb) / .2)}

/* Deity scenes sit in a lit frame with a white rim, like a mounted print. */
.prepare-v2 .deity-stage,.focus-v2 .deity-stage{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7),var(--e3)}
@media (min-width:761px){
 .ritual-v2>.visual{background:linear-gradient(180deg,#f5f0fb,#ede5f7);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(var(--ink-rgb) / .05),var(--e2)}
 .ritual-v2 .shrine-deity .deity-stage{box-shadow:0 0 0 1px rgb(255 255 255 / .9),var(--e2)}
 .app-sidebar{background:linear-gradient(180deg,#f3edfa 0%,#ece4f6 100%);border-right:1px solid rgb(255 255 255 / .8);box-shadow:inset -1px 0 0 rgb(var(--ink-rgb) / .06),8px 0 30px -18px rgb(var(--ink-rgb) / .25)}
 .sidebar-note{background:linear-gradient(170deg,#efe7f8,#e5dbf1);box-shadow:var(--lit),0 2px 6px -2px rgb(var(--ink-rgb) / .12)}
 .app-sidebar nav button[aria-current=page]{background:var(--surface-lit);box-shadow:var(--lit),var(--e2)}
}
.output-preview{background:linear-gradient(180deg,#f6f1fc,#eee6f8);box-shadow:inset 0 1px 0 #fff,inset 0 10px 30px -20px rgb(var(--ink-rgb) / .2)}
.output-preview img{box-shadow:0 0 0 1px rgb(255 255 255 / .6),var(--e3)}
.progress b{background:linear-gradient(180deg,#fff,#f0eaf6);box-shadow:var(--lit),0 1px 3px rgb(var(--ink-rgb) / .12)}
.progress [aria-current=step] b{background:linear-gradient(180deg,#f3ecfc,#e3d6f3)}
.pill{box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 1px 2px rgb(var(--ink-rgb) / .06)}
@media (prefers-reduced-motion:reduce){.home-choice:hover .choice-arrow{transform:none}}
.flower-choice .motif{filter:drop-shadow(0 4px 4px rgb(var(--ink-rgb) / .16));transition:transform var(--t) var(--ease),filter var(--t) var(--ease)}
.flower-choice:hover .motif{filter:drop-shadow(0 8px 8px rgb(var(--ink-rgb) / .2))}
.offering-table .tray-art{filter:drop-shadow(0 16px 14px rgb(var(--ink-rgb) / .14))}

/* No outlines on buttons (user request, 28 Oct 2026): edges come from light and shadow only. Borders are made transparent rather than
   removed so no button changes size; selected states read through fill and a soft pressed-in shadow instead of an accent line. */
button,button:hover,.primary,.secondary,.option,.output-options button,.flower-choice,.home-choice,.choice-arrow{border-color:transparent!important}
.option[aria-pressed=true],.output-options button[aria-pressed=true]{box-shadow:inset 0 1px 3px rgb(var(--ink-rgb) / .12),inset 0 -1px 0 rgb(255 255 255 / .6)}
.flower-choice[aria-pressed=true]{box-shadow:var(--lit),var(--e2)}
.home-choice:hover{box-shadow:var(--lit),var(--e3)}
.secondary,.option,.output-options button{box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .07),0 3px 8px -3px rgb(var(--ink-rgb) / .12)}

/* No borders anywhere (user request, 28 Oct 2026). Borders become transparent (sizes unchanged); depth, fills and shadows carry every edge.
   The only exception is the dashed drop marker, which appears only while dragging an offering to show where it will land. */
*,*::before,*::after{border-color:transparent!important}
.drop-marker{border-color:#b29ac6!important}
textarea{background:#f6f2fb;box-shadow:inset 0 2px 5px rgb(var(--ink-rgb) / .08),inset 0 0 0 1px rgb(var(--ink-rgb) / .03)}
textarea:hover{background:#f3eefa}
textarea:focus-visible{background:#fff;box-shadow:inset 0 1px 3px rgb(var(--ink-rgb) / .06),0 0 0 4px rgb(140 107 177 / .2)}
.optional{box-shadow:0 -1px 0 rgb(var(--ink-rgb) / .0)}

/* Where a border used to separate or outline something, a shadow now does the job (user request, 28 Oct 2026). */
footer{box-shadow:0 -1px 0 rgb(255 255 255 / .8),0 -14px 28px -24px rgb(var(--ink-rgb) / .35)}
.optional{background:var(--surface-lit);border-radius:var(--r-lg);padding:4px 18px 6px;box-shadow:var(--lit),var(--e1)}
.optional[open]{box-shadow:var(--lit),var(--e2)}
.optional p{box-shadow:inset 0 1px 3px rgb(var(--ink-rgb) / .06)}
.notices{background:var(--surface-lit);border-radius:var(--r-lg);box-shadow:var(--lit),var(--e1)}
.experience-entry button{background:var(--surface-lit);box-shadow:var(--lit),var(--e1);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.experience-entry button:hover{transform:translateY(-3px);box-shadow:var(--lit),var(--e3)}
.flower-choice,.flower-tray button{background:var(--surface-lit);box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .06),0 4px 10px -4px rgb(var(--ink-rgb) / .14)}
.flower-choice:hover,.flower-tray button:hover{box-shadow:var(--lit),var(--e2)}
.flower-tray button[aria-pressed=true]{background:linear-gradient(180deg,#f4eefc,#ebe1f8);box-shadow:inset 0 1px 3px rgb(var(--ink-rgb) / .12)}
.shrine-picker .flower-choice[aria-pressed=true]{background:#fff;box-shadow:var(--lit),var(--e2)}
select{background-color:#fff;box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .07),0 3px 8px -3px rgb(var(--ink-rgb) / .12);border-radius:var(--r-sm)}
.app-sidebar nav button:not([aria-current=page]):hover{box-shadow:var(--lit),var(--e1)}
textarea{box-shadow:inset 0 2px 5px rgb(var(--ink-rgb) / .08),0 1px 0 rgb(255 255 255 / .9)}
.optional{padding:2px 20px}
.optional summary{min-height:0;padding:12px 0}
.optional+.optional{margin-top:12px}
/* The preview frame hugs the card so the gap around it is the same on all four sides (it used to stretch to the column width). */
.output-preview{width:fit-content;min-width:min(100%,320px);max-width:100%;margin-inline:auto;padding:18px;box-sizing:border-box}
.output-preview[data-format=wallet]{width:100%}

/* Optical vertical balance (28 Oct 2026). Measured in the browser against the Thai consonant body (IBM Plex Sans Thai: baseline to 0.56em),
   so the visible gap above and below text matches. The line box adds ~0.4em of leading under the last line, which is what made bottoms look
   heavier; each value below removes that surplus where it showed. */
@media (min-width:761px){
 .ritual-v2>.visual{padding-bottom:13.5px}          /* panel: 23.3 / 26.8 → 23.3 / 23.3 */
 .ritual-v2 .visual>.tray-note{margin-top:16px}             /* stage → hint gap 21.3 → 23.3, matching the panel edges */
}
.shrine-picker .flower-choice{padding:8px 6px 0}                   /* icon top 5 / label bottom 12.6 → 8.8 / 8.8 */
.experience-controls .flower-tray button{padding:12px 8px 4px}           /* charm & krathong decorations 10 / 17.6 → 13.8 / 13.8 */
.path-card .card-body{padding-bottom:0}             /* card: last link sat 39.6 from the bottom; now ≈24, the same as the text's side inset */
.path-card .card-body .quiet{padding-bottom:0}
.path-card{padding-bottom:4.4px}                      /* last link ink now 13 from the bottom, the same as the artwork inset at the top */
.sidebar-note{padding-top:13px}                     /* 37.6 / 30.6 → 30.6 / 30.6 */
.discovery{padding-top:13px}                        /* heading ink 33.3 vs button edge 23 → 23 / 23 */
.notices{padding:15px 22px 14.5px}                  /* 22.1 / 7.6 → 22.1 / 22.1, with side inset to match */

/* Line icons (icons.js): sized to the text and sat on its optical centre, replacing text glyphs that varied per font. */
.i{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button>.i,a>.i,span>.i{margin-inline:.1em}
.primary .i{width:1.2em;height:1.2em;stroke-width:2}
.primary:hover:not(:disabled) .i,.quiet:hover:not(:disabled) .i{transition:transform var(--t) var(--ease)}
.primary:hover:not(:disabled) .i,.home-choice:hover .choice-arrow .i{transform:translateX(2px)}
.back-button:hover .i{transform:translateX(-2px);transition:transform var(--t) var(--ease)}
.choice-arrow .i{width:16px;height:16px;vertical-align:0}
.nav-icon{display:grid;place-items:center}
.nav-icon .i{width:20px;height:20px;vertical-align:0;stroke-width:1.7}
.sidebar-note .i{width:20px;height:20px;stroke-width:1.7}
.brand .brand-spark{width:1em;height:1em;stroke-width:2.4;vertical-align:top;margin:0}
.experience-entry b .i{width:18px;height:18px;vertical-align:0}
@media (prefers-reduced-motion:reduce){.i{transition:none!important;transform:none!important}}
.primary,.card-body .primary,.secondary,.quiet{gap:.45em}
.need-icon .i{width:55%;height:55%;vertical-align:0;stroke-width:1.7;color:#6d5583}
.hero-label .i{vertical-align:-.25em}

/* MU dropdown (select.js): the trigger matches the other choice controls; the list is a lit floating card. */
.mu-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%)}
.mu-select{position:relative;margin-top:8px}
.mu-select-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 14px 10px 18px;text-align:left;font:inherit;font-size:14px;color:#3f3350;background:var(--surface-lit);border-radius:var(--r-md);box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .07),0 3px 8px -3px rgb(var(--ink-rgb) / .14);cursor:pointer}
.mu-select-button:hover{box-shadow:var(--lit),var(--e2)}
.mu-select-button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A long option (a verse gist or Dhamma saying) must not widen the controls column and shrink the card. */
.experience-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:760px){.experience-workspace{grid-template-columns:minmax(0,1fr)}}
.mu-select-caret{width:18px!important;height:18px!important;color:#8a76a0;transition:transform var(--t) var(--ease)}
.mu-select.is-open .mu-select-button{background:#fff;box-shadow:var(--lit),0 0 0 4px rgb(140 107 177 / .16),var(--e2)}
.mu-select.is-open .mu-select-caret{transform:rotate(180deg)}
.mu-select-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;max-height:min(380px,60vh);;overflow:auto;background:#fff;border-radius:var(--r-md);box-shadow:var(--lit),var(--e3);outline:none;transform-origin:top center;animation:mu-select-in 140ms var(--ease)}
.mu-select.opens-up .mu-select-list{top:auto;bottom:calc(100% + 8px);transform-origin:bottom center}
.mu-select-list [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;color:#4a3d5c;cursor:pointer;user-select:none}
.mu-select-list [role=option].is-active{background:#f4eefb}
.mu-select-list [role=option][aria-selected=true]{color:#4f3a68;font-weight:600;background:var(--accent-soft)}
.mu-select-list [role=option] .i{width:16px;height:16px;color:var(--accent);opacity:0;flex:none}
.mu-select-list [role=option][aria-selected=true] .i{opacity:1}
@keyframes mu-select-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mu-select-list{animation:none}.mu-select-caret{transition:none}}

/* Charm / krathong decoration tray: replace the old hard lavender lip (0 8px 0) with the lit-card depth, and give each decoration the
   same silhouette shadow as the offerings in the ritual picker. */
.flower-tray,.experience-controls .flower-tray{background:var(--surface-lit);box-shadow:var(--lit),var(--e2)}
.shrine-picker .flower-tray{background:none;box-shadow:none}
.flower-tray button .motif{filter:drop-shadow(0 5px 5px rgb(var(--ink-rgb) / .2)) drop-shadow(0 1px 1px rgb(var(--ink-rgb) / .1));transition:transform var(--t) var(--ease),filter var(--t) var(--ease)}
.flower-tray button:hover .motif{transform:translateY(-2px);filter:drop-shadow(0 9px 8px rgb(var(--ink-rgb) / .22)) drop-shadow(0 1px 1px rgb(var(--ink-rgb) / .1))}
.experience-controls .flower-tray button:not([aria-pressed=true]){box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .07),0 5px 12px -5px rgb(var(--ink-rgb) / .2)}
@media (prefers-reduced-motion:reduce){.flower-tray button:hover .motif{transform:none}}
/* Activity thumbnails: the artwork PNGs carry a square tinted backdrop, so clip them to the same rounded corners as the icon tiles. */
.experience-entry button>span:has(img){border-radius:var(--r-md);overflow:hidden;box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),0 4px 10px -4px rgb(var(--ink-rgb) / .22)}
.experience-entry button>span img{border-radius:inherit}

/* Language switch (i18n.js): a small lit pill beside the brand. */
.sidebar-brand{position:relative}
.lang-toggle{position:absolute;top:2px;right:0;min-width:44px;height:32px;padding:0 12px;border-radius:var(--r-pill);font:600 12px/1 "IBM Plex Sans Thai",Tahoma,sans-serif;letter-spacing:.04em;color:#5a4372;background:var(--surface-lit);box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .08),0 4px 10px -4px rgb(var(--ink-rgb) / .2);cursor:pointer}
.lang-toggle:hover{box-shadow:var(--lit),var(--e2);transform:translateY(-1px)}
@media (max-width:760px){.sidebar-brand{flex:1}.lang-toggle{top:50%;transform:translateY(-50%)}.lang-toggle:hover{transform:translateY(calc(-50% - 1px))}}

/* Touch dragging: tray items and placed pieces must not start a page scroll, or the browser cancels the drag on phones.
   (The ritual picker already had this from style.css; the charm and krathong tray buttons did not.) */
[data-decor],[data-motif],.movable-flower{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.placing-flower{overscroll-behavior:none}

/* Charm/krathong tray now lives under the board (.experience-tray); same look as when it sat in .experience-controls. */
.experience-tray .flower-tray button{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;background:transparent;border:2px solid transparent;border-radius:16px;padding:8px;cursor:grab;font-size:11px;color:#80648c}
.experience-tray .flower-tray button[aria-pressed=true]{border-color:#b59bcd;background:#f1e9f9}
.experience-tray .flower-tray .motif{width:51px;height:51px}
.experience-tray .flower-tray{margin-bottom:18px}
.experience-tray .tray-heading{font-size:15px}
.experience-tray .flower-tray .motif{width:65px;height:65px}
/* icon top 5 / label bottom 12.6 → 8.8 / 8.8 */
.experience-tray .flower-tray button{padding:12px 8px 4px}
/* Charm / krathong decoration tray: replace the old hard lavender lip (0 8px 0) with the lit-card depth, and give each decoration the
   same silhouette shadow as the offerings in the ritual picker. */
.flower-tray,.experience-tray .flower-tray{background:var(--surface-lit);box-shadow:var(--lit),var(--e2)}
.experience-tray .flower-tray button:not([aria-pressed=true]){box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .07),0 5px 12px -5px rgb(var(--ink-rgb) / .2)}
.experience-tray{margin-top:16px;text-align:left}.experience-tray .tray-heading{margin-top:0}.experience-tray>.small{text-align:left;margin:10px 0 0}

/* Brand logo (assets/brand/mu-logo.png, supplied 29 Oct 2026) replaces the Arial "mu" wordmark, so it looks the same on every device. */
.brand{letter-spacing:0;line-height:0;padding:0}
.brand-logo{display:block;width:112px;height:auto}
.brand:hover .brand-logo{filter:drop-shadow(0 4px 8px rgb(var(--ink-rgb) / .12))}
@media (max-width:760px){.brand-logo{width:76px}}
/* Keep the language pill clear of the logo's pink sun (top-right of the mark): sit it beside the lower part of "mu". */
@media (min-width:761px){.lang-toggle{top:40px}}
/* Language pill moved to the page's top-right corner (outside the sidebar). It scrolls with the page rather than floating over content. */
.lang-toggle{position:absolute;top:22px;right:28px;z-index:30;transform:none}
.lang-toggle:hover{transform:translateY(-1px)}
@media (min-width:761px){.lang-toggle{top:22px}}
@media (max-width:760px){.lang-toggle{top:20px;right:7%;transform:none}.lang-toggle:hover{transform:translateY(-1px)}}
@media (min-width:761px){.result-v2>.visual{padding-top:28px}} /* clear the top-right language pill */

/* MU scrollbars: thin lilac thumb on a clear track, rounded, no arrow buttons; slightly darker on hover. Firefox uses the standard properties. */
@supports not selector(::-webkit-scrollbar){html,dialog,.mu-select-list{scrollbar-width:thin;scrollbar-color:#cdbde0 transparent}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d6c9e6;border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#b9a4d3;background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
dialog::-webkit-scrollbar-track{margin:18px 0}

/* Dialog close: a round × pinned to the top-right (stays put while the dialog scrolls); the dimmed backdrop also closes it (app.js). */
dialog::backdrop{cursor:pointer}
.dialog-close{position:sticky;top:0;float:right;z-index:3;display:grid;place-items:center;width:40px;height:40px;margin:-10px -10px 0 12px;padding:0;border-radius:50%;color:#5a4372;background:var(--surface-lit);box-shadow:var(--lit),0 1px 2px rgb(var(--ink-rgb) / .08),0 4px 12px -4px rgb(var(--ink-rgb) / .22);cursor:pointer}
.dialog-close .i{width:20px;height:20px;stroke-width:2;vertical-align:0}
.dialog-close:hover{background:#fff;box-shadow:var(--lit),var(--e2);transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.dialog-close:hover{transform:none}}
.dialog-close{top:-9px;margin:-9px -9px 0 12px} /* sticky offsets count from inside the dialog padding (29px), so -9px gives the same 21px gap to the top and right edges, at rest and while scrolled */

/* Caption on the scene: deity name and a short line on the bottom of the image, over a warm fade so it reads on any floor colour. */
.stage-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;padding:48px 20px 18px;text-align:center;pointer-events:none;background:linear-gradient(180deg,rgb(255 250 243 / 0) 0%,rgb(255 250 243 / .72) 45%,rgb(255 250 243 / .92) 100%)}
.stage-caption strong{font-size:16px;font-weight:600;color:#4f3a68;text-shadow:0 1px 0 rgb(255 255 255 / .8)}
.stage-caption span{font-size:12px;color:#7a6787;text-shadow:0 1px 0 rgb(255 255 255 / .7)}
@media (max-width:760px){.stage-caption{padding:36px 14px 12px}.stage-caption strong{font-size:14px}}
/* Wide screens: the tray heads the side column (placeTray in experiences.js). */
@media (min-width:761px){.experience-controls>.experience-tray{margin:0 0 22px}}
/* A quiet text action right under a full-width primary button is centred under it (e.g. "ขอนึกในใจแทน"). */
.primary.full+.quiet{display:flex;align-items:center;justify-content:center;gap:.35em;width:fit-content;margin:6px auto 0;align-self:center}
.path-card .card-body .quiet{padding-bottom:11px} /* 'ที่มาและบริบท' sat 13px from the card's bottom and looked cramped; now 24px, the same as its gap to the button above */
/* Phones: the tagline sits under the logo, as on wide screens. */
@media (max-width:760px){.sidebar-brand{flex-direction:column;align-items:flex-start;gap:6px}.brand-caption{margin:0}}
@media (max-width:760px){.app-sidebar{height:auto;padding-top:16px;padding-bottom:10px}} /* header grows to fit logo + tagline */
/* Latin letters and digits sit high in IBM Plex Sans Thai's line box (its ascent is sized for Thai marks), so short Latin/number labels in
   fixed-height pills get a small top offset to centre the visible glyphs. Measured: EN 11/13 → 12/12, step numbers 5.1/8.9 → 7/7 (ไทย on the pill: 13/12). */
.lang-toggle{padding-top:2px}
.progress b{box-sizing:border-box;padding-top:3px;line-height:1}
/* Thai labels in pills read top-heavy (vowel and tone marks rise above the consonants), so they are nudged down to the optical centre:
   halfway between centring the consonant body and centring the full ink. Measured shift: pill 1.6px, hero label 1px, tradition chip 0.5px. */
.pill{padding-top:8.6px;padding-bottom:5.4px}
.hero-label{padding-top:7px;padding-bottom:5px}
.tradition{padding-top:3.5px;padding-bottom:2.5px}
/* Icon + Thai label pills: a real gap (the space between them collapses in flex) and the icon lowered onto the text's optical centre
   (measured 3.8px above the consonant body; the optical centre sits ~2.9px lower than the box centre at 12px). */
.hero-label{gap:6px}
.hero-label>.i{width:15px;height:15px;margin:0;vertical-align:0;flex:none;translate:0 .24em}

/* Context chips (e.g. "สมัครงาน / สัมภาษณ์"): same optical correction as the label pills; measured 15.9 / 18.9 → ~17.4 / 17.4. */
.option{padding-top:calc(8px + 1.5px);padding-bottom:calc(8px - 1.5px)}


/* Readability (WCAG AA, 4.5:1 for small text): muted labels measured 3.3–4.48:1 on the page background are darkened to the same
   two muted tones, and the 9–10px notes are raised to 11px. Measured in the browser across all pages, 29 Oct 2026. */
:root{--muted-strong:#665777;--muted-soft:#6f6181}
.progress,.progress b,.experience-steps span,footer span,.home-footnote,.output-options small,.download-preview,.sidebar-note small,.breadcrumbs button,.breadcrumbs span,.home-explore,.experience-tray .flower-tray button span,.experience-controls .flower-tray button span,.flower-choice span,.section-label,.experience-entry small,.source-caption,.content-note,.notices,.eyebrow,.home-choice small,.choice-caption,.home-reassurance{color:var(--muted-soft)!important}
.sidebar-note p,.progress [aria-current=step]{color:var(--muted-strong)!important}
.hero-label{color:#5f4826}
.sidebar-note small,footer span,.home-footnote,.download-preview,.source-caption,.output-options small{font-size:11px!important}
.experience-preview>p{color:var(--muted-soft)!important}.tradition{font-size:11px} /* last two from the re-check: preview notes 4.13:1, tradition chips at 10px */

/* Footer: © line on the left, Privacy / Terms / Contact on the right; wraps and centres on phones. */
body>footer{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.footer-links{display:flex;gap:4px 18px;flex-wrap:wrap}
.footer-links button,.footer-links a{border:0;background:none;padding:6px 0;font:inherit;font-size:12px;color:var(--muted-soft);text-decoration:none;cursor:pointer}
.footer-links button:hover,.footer-links a:hover{color:#4f3a68;text-decoration:underline}
body>footer>span{font-size:12px!important}
@media (max-width:760px){body>footer{justify-content:center;text-align:center}.footer-links{justify-content:center}}
.legal-page h2{margin-top:26px}

/* Footer links hover like the sidebar nav: a soft lit pill, no underline (the old .quiet/button hover added both an underline and a flat fill). */
.footer-links button,.footer-links a{padding:6px 12px;border-radius:var(--r-pill);text-decoration:none!important;transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease),color var(--t) var(--ease)}
.footer-links button:hover,.footer-links a:hover{color:#4f3a68;text-decoration:none!important;background:var(--surface-lit);box-shadow:var(--lit),var(--e1)}
.footer-links{gap:4px 6px;margin-right:-12px}
/* Wide screens: the sidebar's right edge is rounded top and bottom. */
@media (min-width:761px){.app-sidebar{border-radius:0 var(--r-xl) var(--r-xl) 0;overflow:hidden}}

/* No blinking text caret on ordinary text (it appears when the browser's caret browsing, F7, is on, or after focusing the page);
   fields that take typing keep their caret. */
body{caret-color:transparent}
input,textarea,select,[contenteditable]:not([contenteditable=false]){caret-color:auto}

/* God path: subtitle on the path card, verse references, and the candle step (B-2 candle art; the flame fades in when lit). */
.path-subtitle{margin:-4px 0 8px;font-size:13px;color:var(--muted-soft)}
.verse-ref{margin-top:-6px;font-size:13px!important;letter-spacing:.02em;color:var(--muted-strong)!important}
.verse-gist{display:block;margin-top:4px;font-size:14px;letter-spacing:0;line-height:1.55;color:var(--muted-strong)}
/* The candle page uses the two-column frame of the get-ready and prayer pages (copy left, square stage right), and the stage is its own
   card with the same radius and depth as the deity stages there, so there is no outer panel with uneven padding. */
.candle-stage{position:relative;display:block;width:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7),var(--e3);cursor:pointer;overflow:hidden}
.candle-v2 .visual{min-width:0}
.candle-v2 h1{margin-bottom:18px}
.candle-v2 .intro{margin-bottom:0}
/* Phones: one column with the candle right after the intro, so it is tapped before the buttons below it. */
@media (max-width:760px){.candle-v2 .copy{display:contents}.candle-v2 .copy>*{margin-top:0;margin-bottom:0;align-self:stretch;text-align:left}.candle-v2 .copy>.back-button{align-self:flex-start}.candle-v2 .visual{order:1}.candle-v2 .ritual-actions{order:2}}
/* B-7.1 meadow scene behind the candle. The stage is square, so % of width and height agree: the body (B-2 frame, foot at 90%, wick at 14%)
   stands its foot on the scene's candle anchor (b7-layout.json: 50.5%, 78.5%), and the flame (contact at 86% of its frame) meets the wick. */
.candle-stage{padding:0;background:url(assets/artworks/b4-scene-god-v2.webp) center/cover,#f6f1e8}
.candle-stage .candle-body{position:absolute;z-index:1;left:50.5%;top:78.5%;width:22%;height:auto;translate:-50% -90%;filter:drop-shadow(0 8px 8px rgb(var(--ink-rgb) / .16))}
/* The candle's cast shadow on the meadow falls behind it and to the left (the B-4 shadow direction), narrowing as it recedes toward the
   horizon (6.1% wide at the base, 4.5% where it ends at 66%; skewed 52deg so it clears the candle), fading with
   distance, in the B-4 floor lavender. The candle covers its near part; the rest shows above and beside it. */
.candle-stage .candle-shadow{position:absolute;z-index:0;left:50.5%;top:66%;width:6.1%;height:11.3%;translate:-50% 0;transform-origin:50% 100%;transform:skewX(52deg);clip-path:polygon(13% 0,87% 0,100% 100%,0 100%);background:linear-gradient(to top,rgb(142 121 163 / .58),rgb(142 121 163 / .3) 50%,rgb(142 121 163 / 0));filter:blur(1.5px);pointer-events:none}
/* Contact shadow where the base meets the grass: a flattened ellipse a little wider than the candle (B-4 floor lavender). */
.candle-stage .candle-contact{position:absolute;z-index:0;left:50.5%;top:77.3%;width:9%;height:2.6%;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgb(142 121 163 / .55),rgb(142 121 163 / 0));pointer-events:none}
.candle-stage .candle-flame{position:absolute;z-index:2;left:50.5%;top:61.78%;width:6.6%;translate:-50% -86%;opacity:0;transform:scale(.6);transform-origin:50% 86%;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.candle-glow{position:absolute;inset:0;background:radial-gradient(18% 16% at 50.5% 60%,rgb(255 214 140 / .6),transparent 70%);opacity:0;transition:opacity .9s var(--ease)}
.candle-stage.is-lit .candle-flame{opacity:1;transform:scale(1);animation:candle-flicker 2.4s ease-in-out .6s infinite}
.candle-stage.is-lit .candle-glow{opacity:1}
@keyframes candle-flicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.04,.97) rotate(-1.5deg)}60%{transform:scale(.97,1.03) rotate(1.2deg)}}
@media (prefers-reduced-motion:reduce){.candle-stage .candle-flame,.candle-glow{transition:none}.candle-stage.is-lit .candle-flame{animation:none}}
/* Buddha path: the pay-respect page lists three short steps (bow, sit quietly, share kindness); the Pali lines read a touch larger. */
.dharma-steps{list-style:none;margin:6px 0 26px;padding:0;display:grid;gap:12px}
.dharma-steps li{padding:16px 18px;border-radius:var(--r-lg);background:var(--surface-lit,#fff);box-shadow:var(--e1)}
.dharma-steps h2{margin:0 0 4px;font-size:16px;font-weight:600}
.dharma-steps p{margin:0;line-height:1.75}
.dharma-steps #bow{margin:12px 0 6px;min-width:120px}
.dharma-steps #bow.is-bowing{animation:dharma-bow .7s var(--ease)}
@keyframes dharma-bow{40%{transform:translateY(3px) scale(.97)}}
.dharma-pali{font-size:18px!important;font-weight:500;letter-spacing:.01em;color:var(--ink,#4a3c57)}
.dharma-proverb{margin:-4px 0 18px;padding:14px 18px;border-radius:var(--r-lg);background:var(--surface-lit,#fff);box-shadow:var(--e1)}
.dharma-proverb p{margin:0;line-height:1.7}
.dharma-proverb .small{margin-top:4px}
@media (prefers-reduced-motion:reduce){.dharma-steps #bow.is-bowing{animation:none}}
/* Feedback page: same frame as the legal pages; fields match the prepare page's textarea. The honeypot field is never shown. */
.feedback-page form{display:grid;gap:10px;max-width:640px}
.feedback-page fieldset{border:0;margin:0 0 8px;padding:0}
.feedback-page legend{padding:0;margin-bottom:10px}
.feedback-page .field-label{margin-top:10px}
.feedback-page textarea,.feedback-page input[type=text],.feedback-page input[type=email]{width:100%;box-sizing:border-box;border:1px solid #dcd1e6;background:#fff;border-radius:22px;color:#4a3c57;padding:14px 18px;font:inherit;line-height:1.8;caret-color:auto}
.feedback-page textarea{min-height:130px;resize:vertical}
.feedback-page textarea:focus,.feedback-page input:focus{border-color:#a789c2;outline:none;box-shadow:0 0 0 3px rgb(167 137 194 / .18)}
.feedback-page ::placeholder{color:#96899f}
.feedback-page .option[aria-checked=true]{background:#eadef8;color:#4a3c57;box-shadow:inset 0 0 0 1px #cbb6e3}
.feedback-page .primary{margin-top:12px}
.fb-website{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.feedback-thanks{max-width:560px;padding:24px;border-radius:var(--r-lg);background:var(--surface-lit,#fff);box-shadow:var(--e1)}
.feedback-thanks h2{margin-top:0}
.feedback-invite{margin:0 auto 22px;max-width:420px;padding:14px 18px;border-radius:var(--r-lg);background:var(--surface-lit,#fff);box-shadow:var(--e1)}
.feedback-invite p{margin:0 0 4px}
/* Statistics consent: a small strip at the bottom until answered (above the floating nav on phones). */
.consent-bar{position:fixed;z-index:60;left:50%;bottom:18px;translate:-50% 0;width:min(620px,calc(100% - 32px));box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-lg);background:var(--surface-lit,#fff);box-shadow:var(--e3)}
.consent-bar p{margin:0;font-size:14px;line-height:1.65;flex:1}
.consent-actions{display:flex;gap:6px;flex-shrink:0}
.consent-actions button{white-space:nowrap;padding:9px 16px}
.consent-setting{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:4px 0 18px}
.consent-setting p{margin:0}
@media (max-width:760px){.consent-bar{bottom:96px;flex-direction:column;align-items:stretch}.consent-actions{justify-content:flex-end}}
.feedback-page .fb-consent{display:flex;gap:10px;align-items:flex-start;margin-top:6px;font-size:14px;line-height:1.7;color:var(--muted-strong);cursor:pointer}
.feedback-page .fb-consent input{width:18px;height:18px;margin:4px 0 0;flex-shrink:0;accent-color:#9b7cc0}
.feedback-page .fb-consent[hidden]{display:none}