/* SUNDUQ v254 — accessibility, mobile stability and interaction consistency. */

/* Hidden until focused: lets keyboard users jump over the large header. */
.su254SkipLink{
  position:fixed;
  left:14px;
  top:10px;
  z-index:10050;
  transform:translateY(-160%);
  padding:11px 15px;
  border-radius:12px;
  background:#f0184f;
  color:#fff!important;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  transition:transform .16s ease;
}
.su254SkipLink:focus{transform:translateY(0)}

/* One clear keyboard focus treatment across old and new page templates. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid rgba(105,190,255,.92)!important;
  outline-offset:3px!important;
}
:where(button,input,textarea,select):disabled,
:where(button,[role="button"])[aria-disabled="true"]{
  cursor:not-allowed!important;
  opacity:.58!important;
  filter:saturate(.7)!important;
}

/* Long URLs, names and imported text must never widen the whole page. */
:where(main,article,section,aside,.card,.topicCard,.postCard,.resultItem,.messageBubble) :where(p,h1,h2,h3,h4,small,span,a){
  overflow-wrap:anywhere;
}
pre,code{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* Turn old clickable blocks into real-looking controls without changing layout. */
button.newTopicsNotice,
button.pinItem{
  width:100%;
  margin:0;
  color:inherit;
  font:inherit;
  text-align:left;
  appearance:none;
}
button.newTopicsNotice{text-align:center}
a.pinItem{color:inherit;text-decoration:none}
.pinItem>.pinItemIcon{font-size:22px}
.pinItem>.pinItemText{font-size:inherit;min-width:0}
.pinItem:focus-visible,.newTopicsNotice:focus-visible{position:relative;z-index:2}

/* ML feed had nested click zones and English service labels. */
.ml254Card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  cursor:default!important;
}
.ml254CardLink{display:block;min-width:0;color:inherit;text-decoration:none}
.ml254CardLink h2{margin-top:0}
.ml254Score{display:inline-block;color:#9eb2c6;margin-bottom:8px}
.ml254Skip{align-self:center;white-space:nowrap;background:#10283b!important;color:#cfe4f5!important;border:1px solid rgba(255,255,255,.12)!important}

body.su254ModalOpen{overflow:hidden}

/* Prevent mobile browser zoom and keep controls easy to hit. */
@media(max-width:720px){
  :where(input,textarea,select){font-size:16px!important}
  :where(button,.suUnifiedIconBtn,.suUnifiedMenuBtn,.mobileNav a,[role="button"]){min-height:44px}
  :where(.suUnifiedIconBtn,.suUnifiedMenuBtn){min-width:44px}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .sunduqFooter{padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  .ml254Card{grid-template-columns:1fr!important}
  .ml254Skip{justify-self:start}
}

/* Avoid motion-triggered discomfort and reduce animation-related jank. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}