/* Shared interaction language; materials and layout remain in their own layers. */
:root{--jj-feedback-hover:#f4f5f7;--jj-feedback-press:#eceef2;--jj-feedback-edge:#1254ff38;--jj-feedback-time:140ms}
:where(a[href],button,summary,input[type=submit]){touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color var(--jj-feedback-time),background-color var(--jj-feedback-time),border-color var(--jj-feedback-time),box-shadow var(--jj-feedback-time),transform var(--jj-feedback-time)}
:where(a[href],button:not(:disabled),summary,input[type=submit]:not(:disabled)){cursor:pointer}
/* Readable affordances before interaction. Metadata spans remain plain text. */
.jj-prose a[href],.jj-section-heading>a,.jj-resource-info a[href],.jj-auth #nav a,.jj-auth #backtoblog a{color:var(--jj-blue);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
.jj-open h2,.jj-featured h2 a,.jj-topics h2{transition:color var(--jj-feedback-time);text-underline-offset:5px;text-decoration-thickness:1px}
:where(a[href],button,summary,input,select,textarea):focus-visible{outline:2px solid var(--jj-blue);outline-offset:4px}
.jj-search input:focus-visible{outline:none} /* The complete search field has its own focus ring. */
/* Hover is an input capability, not a mobile/desktop width breakpoint. */
@media(any-hover:hover) and (any-pointer:fine){
  :where(:root:not([data-jj-pointer=touch])) :is(.jj-pill,.jj-pagination a,.jj-nav-item,.jj-filters a,.jj-filter-panel a,.jj-mobile-account,.jj-mobile-back,.jj-mobile-filter summary,.jj-search button,.jj-auth-tabs a,.jj-auth .wp-hide-pw):where(:not(:disabled):not([aria-disabled=true])):hover{
    background-color:var(--jj-feedback-hover);color:var(--jj-blue);border-color:var(--jj-feedback-edge);box-shadow:inset 0 0 0 1px #1254ff12;
  }
  :where(:root:not([data-jj-pointer=touch])) :is(.jj-primary,.wp-block-button__link,.wp-block-search__button,.jj-nav-item.is-active,.jj-filters a.is-active,.jj-filter-panel a.is-active,.jj-auth .button-primary,.jj-auth-tabs a[aria-current]):where(:not(:disabled)):hover{
    background:linear-gradient(180deg,#ffffff1f,transparent),#0845df;color:#fff;border-color:#ffffff66;box-shadow:inset 0 1px 0 #ffffff70,0 3px 9px #1254ff33;
  }
  :where(:root:not([data-jj-pointer=touch])) :is(.jj-open,.jj-topics>a):hover h2,
  :where(:root:not([data-jj-pointer=touch])) .jj-featured h2 a:hover{color:var(--jj-blue);text-decoration:none}
  :where(:root:not([data-jj-pointer=touch])) .jj-open:hover .jj-card-foot{color:var(--jj-blue)}
  :where(:root:not([data-jj-pointer=touch])) .is-tools .jj-tool-card:has(.jj-open:hover){border-color:var(--jj-feedback-edge)}
  :where(:root:not([data-jj-pointer=touch])) .is-tools .jj-tool-card .jj-open:hover,
  :where(:root:not([data-jj-pointer=touch])) .jj-topics>a:hover{background-color:var(--jj-subtle);border-color:var(--jj-feedback-edge)}
  :where(:root:not([data-jj-pointer=touch])) :is(.jj-quick-tools>a,.jj-recent>a,.jj-section-heading>a,.jj-about,.jj-login,.jj-footer a,.jj-prose a[href],.jj-resource-info a[href],.jj-auth #nav a,.jj-auth #backtoblog a):hover{color:var(--jj-blue);text-decoration:none;text-underline-offset:4px;text-decoration-thickness:2px}
  @media(min-width:701px){:where(:root:not([data-jj-pointer=touch])) .jj-feature-grid .jj-open:hover{background-color:var(--jj-feedback-hover)}}
}
/* Press feedback on mouse, pen and touch; no blanket opacity on article contents. */
:is(.jj-pill,.jj-pagination a,.jj-nav-item,.jj-filters a,.jj-filter-panel a,.jj-mobile-account,.jj-mobile-back,.jj-mobile-filter summary,.jj-search button,.jj-auth-tabs a,.jj-auth .wp-hide-pw):where(:not(:disabled):not([aria-disabled=true])):is(:active,.is-pressed){
  background-color:var(--jj-feedback-press);color:var(--jj-blue);border-color:var(--jj-feedback-edge);box-shadow:inset 0 2px 4px #17171724;transform:scale(.985);opacity:1;transition-duration:0ms;
}
:is(.jj-primary,.wp-block-button__link,.wp-block-search__button,.jj-nav-item.is-active,.jj-filters a.is-active,.jj-filter-panel a.is-active,.jj-auth .button-primary,.jj-auth-tabs a[aria-current]):where(:not(:disabled)):is(:active,.is-pressed){
  background:#063ac2;color:#fff;border-color:#063ac2;box-shadow:inset 0 2px 5px #00000035;transform:scale(.985);opacity:1;transition-duration:0ms;
}
:is(.jj-open,.jj-topics>a):is(:active,.is-pressed) h2,.jj-featured h2 a:is(:active,.is-pressed){color:var(--jj-blue);text-decoration:none;text-decoration-thickness:2px}
.jj-open:is(:active,.is-pressed) .jj-card-foot{color:var(--jj-blue)}
.is-tools .jj-tool-card:has(.jj-open:is(:active,.is-pressed)){border-color:var(--jj-blue)}
.is-tools .jj-tool-card .jj-open:is(:active,.is-pressed),.jj-topics>a:is(:active,.is-pressed){background-color:var(--jj-feedback-press);transition-duration:0ms}
@media(min-width:701px){.jj-feature-grid .jj-open:is(:active,.is-pressed){background-color:var(--jj-feedback-press);transition-duration:0ms}}
:is(.jj-quick-tools>a,.jj-recent>a,.jj-section-heading>a,.jj-about,.jj-login,.jj-footer a,.jj-prose a[href],.jj-resource-info a[href],.jj-auth #nav a,.jj-auth #backtoblog a):is(:active,.is-pressed){color:#063ac2;text-decoration:none;text-decoration-thickness:2px;text-underline-offset:4px}
/* Coarse pointers need comfortable targets even on wide touch screens. */
@media(any-pointer:coarse){
  .jj-filters a,.jj-filter-panel a,.jj-search button,.jj-auth-tabs a,.jj-auth #nav a,.jj-auth #backtoblog a{min-height:44px}
  .jj-search button{min-width:44px}
  .jj-search{min-height:52px}
  .jj-auth #nav a,.jj-auth #backtoblog a{display:inline-flex;align-items:center}
}
:is(button,input):disabled,[aria-disabled=true]{cursor:not-allowed;opacity:.55;transform:none!important;filter:none!important}
@media(prefers-reduced-motion:reduce){
  :where(a[href],button,summary,input[type=submit]){transition:none!important}
  :is(a,button,summary,input):is(:active,.is-pressed){transform:none!important}
}
@media(forced-colors:active){:where(a[href],button,summary):focus-visible{outline:2px solid Highlight}}

.jj-featured-image img{transition:filter var(--jj-feedback-time)}
@media(any-hover:hover) and (any-pointer:fine){
 :where(:root:not([data-jj-pointer=touch])) .jj-featured-image:hover img{filter:brightness(.94)}
 :where(:root:not([data-jj-pointer=touch])) :is(.jj-brand,.jj-auth-wechat-link):hover{color:var(--jj-blue)}
}
.jj-featured-image:is(:active,.is-pressed) img{filter:brightness(.84);transition-duration:0ms}
:is(.jj-brand,.jj-auth-wechat-link):is(:active,.is-pressed){color:#063ac2}
@media(prefers-reduced-motion:reduce){.jj-featured-image img{transition:none}}

/* Inline prose links keep a quiet, constant underline; hover never adds a new line. */
.jj-prose a[href]{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#1254ff50}
.jj-prose a[href]:is(:hover,:active,.is-pressed){text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#1254ff50}