/* v34 · layered surfaces and short, optional motion. No remote assets. */
:root{
  --motion-ease:cubic-bezier(.2,.75,.25,1);
  --motion-spring:cubic-bezier(.2,.8,.3,1.12);
  --shadow-soft:0 2px 4px #18213303,0 8px 26px #18213306;
  --shadow-float:0 5px 12px #18213306,0 14px 32px #1821330b;
}
body.hub-page,body.roulette-page{
  min-height:100vh;
  background-color:hsl(var(--palette-hue) 28% 97%);
  background-image:radial-gradient(ellipse 80% 430px at 5% 0%,hsl(var(--palette-hue) 64% 92% / .65),transparent),radial-gradient(ellipse 65% 350px at 100% 0%,hsl(var(--support-hue) 46% 92% / .55),transparent);
  background-repeat:no-repeat;
  transition:background-color .3s ease,color .25s ease;
}
.hub-page>header{
  background:linear-gradient(120deg,#fffffff5,hsl(var(--palette-hue) 50% 99% / .96));
  box-shadow:inset 0 1px 0 #fff,0 6px 30px #18213306;
  border-color:hsl(var(--palette-hue) 32% 88% / .65);
  border-radius:17px;
}
.hub-page .avatar-button{box-shadow:0 4px 10px hsl(var(--palette-hue) 40% 35% / .08);border-radius:15px}
.hub-page .avatar-button img{transition:transform .32s var(--motion-ease)}
.hub-page #exam-countdown{background:hsl(var(--palette-hue) 65% 98%);box-shadow:inset 0 1px 0 #fff}
.hub-page .duty-card,.hub-page .feature-card,.hub-page .parcel,.hub-page .food-round,#ledger-view .card,.roulette-page .counts section{
  box-shadow:var(--shadow-soft);
  transition:border-color .2s ease,box-shadow .24s ease,background-color .25s ease,transform .25s var(--motion-ease);
}
.hub-page .duty-card{background:linear-gradient(110deg,#fff,hsl(var(--palette-hue) 45% 99%));border-color:hsl(var(--palette-hue) 30% 88% / .8)}
.hub-page .feature-card{position:relative;isolation:isolate;overflow:hidden;border-radius:13px;background:#ffffffed}
.hub-page .feature-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,hsl(var(--support-hue) 60% 96% / .7));opacity:0;transition:opacity .25s ease;
}
.hub-page .feature-symbol{box-shadow:inset 0 1px 0 #ffffffb0;transition:transform .3s var(--motion-spring),box-shadow .3s ease}
.hub-page .feature-link{transition:transform .25s var(--motion-ease),color .25s ease}
.hub-page .feature-card:focus-visible{outline:3px solid hsl(var(--palette-hue) 44% 75%);outline-offset:3px}
.hub-page .parcel{background:linear-gradient(120deg,#fff,#ffffffec)}
.hub-page .parcel.done{background:#ffffffb5}
#ledger-view .card[open]{border-color:hsl(var(--palette-hue) 30% 80%);box-shadow:0 4px 20px hsl(var(--palette-hue) 20% 30% / .06)}
#ledger-view .plan-summary{transition:background-color .2s ease}
#ledger-view .plan-summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:10px}
#ledger-view .my-quantity{box-shadow:inset 0 1px 0 #ffffffa0}
.hub-page form:not(.food-add):not(dialog form){box-shadow:var(--shadow-soft)}
.hub-page .photo-card{box-shadow:var(--shadow-soft)}
.hub-page .photo-card img{transition:transform .4s var(--motion-ease)}
.hub-page .photo-card>span{position:relative;background:#fff}
.hub-page .video-cover{background:linear-gradient(145deg,hsl(var(--palette-hue) 35% 94%),hsl(var(--support-hue) 30% 94%))}
.hub-page .video-cover>span{transition:transform .25s var(--motion-spring)}
/* The same formatting context is kept before, during and after a fold.
   Otherwise the final paragraph margin collapses only when overflow:hidden ends. */
.hub-page .duty-details,#avatar-history-details{display:flow-root}
/* Press states remain immediate, including on touch screens. */
.hub-page button,.roulette-page button,.hub-page .album-tabs a{
  position:relative;isolation:isolate;
  transition:transform .16s var(--motion-ease),box-shadow .2s ease,background-color .22s ease,color .22s ease,border-color .22s ease,opacity .16s ease;
}
.hub-page button:not(:disabled):active,.roulette-page button:not(:disabled):active,.hub-page .album-tabs a:active{transform:scale(.97)}
.hub-page .feature-card:active{transform:scale(.99);box-shadow:0 1px 3px #18213306}
/* Opening a viewer / changing status must not scale the originating image or text. */
.hub-page .photo-card:not(:disabled):active,.hub-page button[role="tab"]:not(:disabled):active{transform:none}
.hub-page .photo-card:not(:disabled):active{opacity:.96}

.hub-page .primary,#ledger-view .primary,.ledger-dialog .primary{
  background-image:linear-gradient(180deg,#ffffff14,#00000005);
  box-shadow:inset 0 1px 0 #ffffff29,0 3px 7px hsl(var(--palette-hue) 30% 30% / .13);
}
.hub-page .primary:not(:disabled):active{box-shadow:inset 0 1px 3px #00000018}
.hub-page button:disabled,.roulette-page button:disabled{transform:none;box-shadow:none}
.hub-page input:not([type="checkbox"]):focus,.hub-page textarea:focus,.hub-page select:focus{
  border-color:hsl(var(--palette-hue) 32% 62%);outline:2px solid hsl(var(--palette-hue) 45% 88%);outline-offset:1px;
  box-shadow:0 2px 10px hsl(var(--palette-hue) 35% 40% / .05);
}
.hub-page input,.hub-page textarea,.hub-page select{transition:border-color .2s,background-color .2s,box-shadow .2s}
.hub-page input[type="checkbox"]{accent-color:var(--accent)}
.motion-ripple-layer{position:absolute;display:block;box-sizing:border-box;inset:0;margin:0;padding:0;border:0;background:none;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:2;line-height:0}
.motion-ripple-dot{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:50%;background:currentColor;pointer-events:none;opacity:0;transform:scale(0)}
/* A real moving selection surface; ordinary selected buttons remain the fallback. */
.hub-page .motion-tabs{position:relative;isolation:isolate}
.motion-tab-indicator{position:absolute;pointer-events:none;border:1px solid #ffffffb0;border-radius:7px;background:#fff;box-shadow:0 2px 6px #1821330c;z-index:0;transition:transform .24s var(--motion-ease),width .24s var(--motion-ease),height .24s var(--motion-ease);left:0;top:0}
.hub-page .motion-tabs>button{z-index:1}
.hub-page .parcel-scopes.motion-tabs button[aria-pressed="true"],#ledger-view .switch.motion-tabs button.active{background:transparent;box-shadow:none}
/* Dialog dismissal stays native: focus and Escape behavior are unchanged. */
.hub-page dialog{
  border-radius:18px;border-color:hsl(var(--palette-hue) 30% 88%);
  box-shadow:0 12px 32px #17203518,0 32px 100px #17203520,inset 0 1px 0 white;
  background:linear-gradient(145deg,#fff,hsl(var(--palette-hue) 40% 99%));
}
.hub-page dialog::backdrop{background:hsl(var(--palette-hue) 20% 16% / .36)}
@supports (transition-behavior:allow-discrete){
  .hub-page dialog{opacity:0;transform:translateY(12px) scale(.98);transition:opacity .18s ease,transform .24s var(--motion-ease),display .24s allow-discrete,overlay .24s allow-discrete}
  .hub-page dialog[open]{opacity:1;transform:none}
  .hub-page dialog::backdrop{background:transparent;transition:background-color .2s ease,display .24s allow-discrete,overlay .24s allow-discrete}
  .hub-page dialog[open]::backdrop{background:hsl(var(--palette-hue) 20% 16% / .36)}
  @starting-style{
    .hub-page dialog[open]{opacity:0;transform:translateY(12px) scale(.98)}
    .hub-page dialog[open]::backdrop{background:transparent}
  }
}
.hub-page #toast{
  transform:translate(-50%,10px) scale(.98);transition:opacity .2s ease,transform .25s var(--motion-ease);
  border-radius:12px;background:hsl(var(--palette-hue) 22% 24% / .96);box-shadow:0 8px 28px #17203520;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
}
.hub-page #toast.show{transform:translate(-50%,0) scale(1)}
.hub-page .palette-choice{transition:background-color .22s,border-color .22s,transform .18s var(--motion-spring),box-shadow .22s}
.hub-page .palette-choice[aria-pressed="true"]{box-shadow:0 3px 12px hsl(var(--palette-hue) 30% 40% / .08)}
.hub-page .palette-dot{box-shadow:inset 0 1px 1px #ffffff70}
/* Only buttons known to be awaiting a request show a spinner. */
#login-submit:disabled::before,#submit-button:disabled::before,#title-form button[type="submit"]:disabled::before,#countdown-form button[type="submit"]:disabled::before,#change-avatar:disabled::before{
  content:"";display:inline-block;width:.85em;height:.85em;margin-right:.6em;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:motion-spin .75s linear infinite;
}
@keyframes motion-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){
  .hub-page .feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-float);border-color:hsl(var(--palette-hue) 35% 80%)}
  .hub-page .feature-card:hover::before{opacity:1}
  .hub-page .feature-card:hover .feature-symbol{transform:translateY(-1px) rotate(-3deg);box-shadow:0 4px 10px #18213307}
  .hub-page .feature-card:hover .feature-link{transform:translate(2px,-2px);color:var(--accent)}
  .hub-page .parcel:hover,.hub-page .food-round:hover{border-color:hsl(var(--palette-hue) 27% 82%);box-shadow:var(--shadow-float)}
  .hub-page button:not(:disabled):hover,.roulette-page button:not(:disabled):hover{filter:none;box-shadow:0 3px 9px #1821330c}
  .hub-page button.primary:not(:disabled):hover{box-shadow:inset 0 1px 0 #ffffff30,0 5px 14px hsl(var(--palette-hue) 30% 35% / .2)}
  #ledger-view .plan-summary:hover{background:hsl(var(--palette-hue) 40% 98%)}
  .hub-page .photo-card:hover img{transform:scale(1.035)}
  .hub-page .photo-card:hover .video-cover>span{transform:scale(1.1)}
  .hub-page .avatar-button:hover img{transform:scale(1.05)}
}
@media(max-width:720px){
  .hub-page>header{border-radius:15px}
  .hub-page dialog{max-height:88vh;max-height:88dvh}
  .hub-page .photo-card img{transition:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hub-page .feature-card:hover,.hub-page button:not(:disabled):active,.roulette-page button:not(:disabled):active,.hub-page .feature-card:active,.hub-page .feature-card:hover .feature-symbol,.hub-page .feature-card:hover .feature-link,.hub-page .photo-card:hover img,.hub-page .avatar-button:hover img{transform:none}
}