/* Shared polish layer, loaded last: motion, loading states, readability and
   small responsive fixes. Uses only theme tokens so every theme inherits it.
   The reduced-motion rule in style.css disables all of it for those users. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.4,.64,1)}
html{scroll-behavior:smooth}
body{line-height:1.55;text-rendering:optimizeLegibility}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#main-content:focus{outline:none}

/* Page entry: app.js adds .page-enter only when the route changes. */
@keyframes ui-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ui-item-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#main-content.page-enter>*{animation:ui-page-in .38s var(--ease-out) both}
#main-content.page-enter .hub-streams>*,#main-content.page-enter .hub-side>*,#main-content.page-enter .member-grid>*,#main-content.page-enter .policy-page>*,#main-content.page-enter .settings-card,#main-content.page-enter .topic-row{animation:ui-item-in .42s var(--ease-out) both}
#main-content.page-enter :is(.hub-streams,.hub-side,.member-grid,.policy-page)>*:nth-child(2),#main-content.page-enter .topic-row:nth-child(2){animation-delay:.05s}
#main-content.page-enter :is(.hub-streams,.hub-side,.member-grid,.policy-page)>*:nth-child(3),#main-content.page-enter .topic-row:nth-child(3){animation-delay:.1s}
#main-content.page-enter :is(.hub-streams,.hub-side,.member-grid,.policy-page)>*:nth-child(4),#main-content.page-enter .topic-row:nth-child(4){animation-delay:.15s}
#main-content.page-enter :is(.hub-streams,.hub-side,.member-grid,.policy-page)>*:nth-child(n+5),#main-content.page-enter .topic-row:nth-child(n+5){animation-delay:.2s}

/* Interactive surfaces lift slightly and sharpen their border on hover. */
.member-card,.rail-card,.hub-discover,.profile-panel,.settings-card,.about-audience-card,.landing-principle{transition:transform .25s var(--ease-out),border-color .2s,box-shadow .25s var(--ease-out),background .2s}
.member-card:hover,.hub-discover:hover,.about-audience-card:hover{border-color:var(--subtle);box-shadow:0 14px 34px #0000002e}
.member-card:hover{transform:translateY(-3px)}
.topic-row{transition:background .2s,transform .25s var(--ease-out)}
.topic-row:hover{transform:translateX(3px)}
.button{transition:transform .18s var(--ease-out),background .18s,border-color .18s,color .18s,box-shadow .2s}
.button:active,.icon-button:active,.nav-item:active,.text-button:active{transform:scale(.97)}
.icon-button{transition:background .15s,color .15s,transform .15s}
.nav-item{position:relative}
.nav-item.active:before{animation:ui-nav-mark .3s var(--ease-spring) both}
@keyframes ui-nav-mark{from{transform:scaleY(0)}to{transform:none}}
.nav-item>svg{transition:transform .2s var(--ease-out)}
.nav-item:hover>svg{transform:translateX(2px)}

/* Overlays */
.modal-backdrop{animation:ui-fade .2s ease both}
.notifications{animation:ui-pop .18s var(--ease-out) both;transform-origin:top right}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.notification-entry{border-radius:8px;transition:background .15s}
a.notification-entry{margin:6px -8px;padding:7px 8px}
a.notification-entry:hover{background:var(--panel-hover);color:var(--text)}
.toast{animation:toast-in .3s var(--ease-spring)}

/* Loading skeletons replace "Yükleniyor…" text while data arrives. */
.skeleton-list{display:grid;gap:14px;padding:20px 0 6px}
.skeleton-row{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:8px 12px;align-items:center}
.skeleton-row i,.skeleton-row b{display:block;border-radius:7px;background:linear-gradient(90deg,var(--panel-hover) 0%,color-mix(in srgb,var(--panel-hover) 55%,var(--line)) 45%,var(--panel-hover) 90%);background-size:220% 100%;animation:ui-shimmer 1.3s linear infinite}
.skeleton-row i{grid-row:span 2;width:34px;height:34px;border-radius:50%}
.skeleton-row b{height:11px;width:72%}
.skeleton-row b+b{width:46%;height:9px}
.skeleton-row:nth-child(3n) b:first-of-type{width:58%}
@keyframes ui-shimmer{to{background-position:-220% 0}}

/* Chat messages slide in as they arrive. */
.chat-message:last-child{animation:ui-item-in .3s var(--ease-out) both}

/* Readability: long text gets comfortable measure and line height. */
.article-body{font-size:16px;line-height:1.85}
.article-body .publication-code{font-size:13.5px}
.modal-subtitle,.hub-empty,.empty-state{line-height:1.7}

/* Scrollbars that match the dark surfaces. */
*{scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--subtle)}
::-webkit-scrollbar-track{background:transparent}

/* Phones: one member card per row so names and buttons are not clipped. */
@media (max-width:560px){
  .member-grid{grid-template-columns:minmax(0,1fr)}
  .article-body{font-size:15px;line-height:1.8}
  .button,.icon-button{min-height:40px}
  .icon-button{min-width:40px}
}

/* Lists and quotes inside articles match the paragraph size. */
.article-body :is(ul,ol,blockquote),.article-body li{font-size:inherit;line-height:1.8}
.article-body li+li{margin-top:6px}