/* v7: calmer, more continuous motion across the whole interface. */
:root{
  --ease-out:cubic-bezier(.22,.72,.2,1);
  --ease-spring:cubic-bezier(.22,.8,.25,1);
  --d-fast:180ms;
  --d-med:420ms;
  --motion-surface:360ms;
}

html{scroll-behavior:smooth;scroll-padding-top:84px}
@media(max-width:700px){html{scroll-padding-top:112px}}

/* Use the same quiet easing for hover, focus, press, and active states. */
a,button,.btn,.chip,.pchip,.dl,.mini,.pill-btn,.signin,.hs-go,.saved-link,.kbtn,
.account-popover,.follow-dialog,.follow-step,.google-btn,.fld input,.fld select,.fld textarea{
  transition-timing-function:var(--ease-out);
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  scroll-margin-block:1rem;
  outline-offset:4px;
  transition:outline-offset 180ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color 220ms var(--ease-out);
}

/* Small, consistent lift keeps pointer feedback smooth without springy jumps. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card,.tile,.spot,.stat,.pn a,.admin-shortcuts>a,.saved-link,.signin,.google-btn,
  .hs-go,.pchip,.chip,.mini,.pill-btn,.dl,.follow-tiktok,.follow-continue{
    transition-property:transform,translate,box-shadow,border-color,background-color,color,filter;
    transition-duration:var(--motion-surface);
    transition-timing-function:var(--ease-out);
  }
  .card:hover,.tile:hover,.spot:hover,.stat:hover,.pn a:hover{translate:0 -3px}
  .saved-link:hover,.signin:hover,.google-btn:hover,.hs-go:hover,.pchip:hover,.chip:hover,
  .mini:hover,.pill-btn:hover,.dl:hover,.follow-tiktok:hover,.follow-continue:not(:disabled):hover{translate:0 -1px}
}
.card:active,.tile:active,.spot:active,.stat:active,.pn a:active{translate:0 0;transition-duration:120ms}

/* Let route content settle in gently; keep the original staggered composition. */
#view.view-enter>*:not(.hero){animation:f1-route-enter 720ms var(--ease-out) both}
#view.view-enter>*:nth-child(2){animation-delay:45ms}
#view.view-enter>*:nth-child(3){animation-delay:90ms}
#view.view-enter>*:nth-child(4){animation-delay:135ms}
#view.view-enter>*:nth-child(n+5){animation-delay:180ms}
@keyframes f1-route-enter{
  from{opacity:0;translate:0 12px}
  to{opacity:1;translate:0 0}
}

/* Dialogs move and fade as one surface instead of popping into place. */
.follow-dialog[open]{animation:follow-dialog-enter 460ms var(--ease-out) both}
@keyframes follow-dialog-enter{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.follow-dialog::backdrop{transition:background-color 400ms var(--ease-out),backdrop-filter 400ms var(--ease-out)}

/* Role editing: make the access level read as a deliberate admin control. */
.role-control{position:relative;width:min(250px,100%);min-width:190px}
.role-trigger{display:flex;width:100%;min-height:58px;align-items:center;gap:11px;padding:8px 12px;border:1px solid rgba(176,196,218,.17);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018));color:#f5f7fb;text-align:left;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.04);transition:background 260ms var(--ease-out),border-color 260ms var(--ease-out),box-shadow 260ms var(--ease-out),transform 260ms var(--ease-out)}
.role-trigger:hover,.role-trigger[aria-expanded=true]{border-color:rgba(99,159,255,.64);background:linear-gradient(145deg,rgba(65,138,255,.105),rgba(255,255,255,.025));box-shadow:0 8px 24px -20px var(--accent),inset 0 1px rgba(255,255,255,.06)}
.role-trigger:focus-visible{outline:2px solid #70a7ff;outline-offset:3px}
.role-trigger-icon,.role-option-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:color-mix(in srgb,var(--accent) 13%,#10151d);color:#70a7ff;font:800 .7rem var(--mono);transition:transform 280ms var(--ease-out),background 260ms var(--ease-out)}
.role-trigger[aria-expanded=true] .role-trigger-icon{transform:scale(1.06) rotate(-4deg);background:color-mix(in srgb,var(--accent) 22%,#10151d)}
.role-trigger-copy,.role-option-copy{display:grid;min-width:0;flex:1;gap:3px}
.role-current{font-size:.82rem;line-height:1.2}
.role-caption{overflow:hidden;color:#8e9bab;font-size:.64rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.role-trigger-chevron{margin-left:auto;color:#9aa9b8;font-size:.95rem;transition:transform 300ms var(--ease-out),color 220ms var(--ease-out)}
.role-trigger[aria-expanded=true] .role-trigger-chevron{transform:rotate(180deg);color:#70a7ff}
.role-native{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important}
.role-menu{position:fixed;z-index:9999;display:grid;gap:4px;padding:7px;border:1px solid rgba(190,211,235,.17);border-radius:16px;background:linear-gradient(155deg,#17202b,#0d1219 72%);box-shadow:0 24px 65px -23px #000,0 0 0 1px rgba(255,255,255,.025);backdrop-filter:blur(18px);transform-origin:top left}
.role-menu[hidden]{display:none}
.role-menu:not([hidden]){animation:role-menu-open 220ms var(--ease-out) both}
@keyframes role-menu-open{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.role-option{display:flex;min-height:54px;align-items:center;gap:11px;padding:7px 9px;border:1px solid transparent;border-radius:11px;background:transparent;color:#dfe6ee;text-align:left;cursor:pointer;transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),transform 200ms var(--ease-out),color 200ms var(--ease-out)}
.role-option:hover,.role-option:focus-visible{border-color:rgba(255,255,255,.09);outline:0;background:rgba(255,255,255,.065);color:#fff}
.role-option[aria-selected=true]{border-color:rgba(91,154,255,.2);background:linear-gradient(100deg,rgba(61,135,255,.16),rgba(61,135,255,.045));color:#fff}
.role-option[aria-selected=true] .role-option-icon{border-color:rgba(98,158,255,.28);background:color-mix(in srgb,var(--accent) 18%,transparent);color:#70a7ff}
.role-option-copy b{font-size:.78rem;line-height:1.2}
.role-option-copy small{color:#8e9bab;font-size:.64rem;line-height:1.2}
.role-option-check{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;color:#70a7ff;font-size:.8rem;font-weight:850}
.tbl td:has(.role-control){min-width:225px}
@media(max-width:760px){.role-control{min-width:182px}.tbl td:has(.role-control){min-width:198px}.role-trigger{min-height:54px;padding:7px 9px;gap:8px}.role-trigger-icon,.role-option-icon{width:30px;height:30px;flex-basis:30px}}

/* Avoid large hover transforms, continuous background drift, and scroll motion on touch. */
@media(max-width:700px){
  .card:hover,.tile:hover,.spot:hover,.stat:hover,.pn a:hover{translate:0 -1px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #view.view-enter>*:not(.hero),.follow-dialog[open]{animation:none!important}
  .card:hover,.tile:hover,.spot:hover,.stat:hover,.pn a:hover,
  .saved-link:hover,.signin:hover,.google-btn:hover,.hs-go:hover,.pchip:hover,.chip:hover,
  .mini:hover,.pill-btn:hover,.dl:hover,.follow-tiktok:hover,.follow-continue:not(:disabled):hover{
    translate:none!important
  }
  .role-menu:not([hidden]){animation:none}
}