/* ImageGen paper-and-foil action labels. Text, destinations and state remain in HTML. */
:root{--action-wide:url('./assets/neon/action-label-wide.png');--action-compact:url('./assets/neon/action-label-compact.png')}
/* Match the specificity of the older component styles without affecting tabs or artwork buttons. */
:root .art-action.art-action{
  --action-art:var(--action-wide);--action-width:220px;--action-height:74px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:var(--action-width);max-width:100%;height:var(--action-height);min-height:var(--action-height);
  flex:0 0 auto;align-self:center;position:relative;margin:0;padding:16px 30px 10px 24px;
  border:0;border-radius:0;box-shadow:none;background:var(--action-art) center/100% 100% no-repeat;
  color:#152c33;font:400 19px/1.25 TitleCN,BodyCN,'Segoe UI Symbol',sans-serif;
  letter-spacing:.01em;text-decoration:none;text-align:center;white-space:nowrap;
  cursor:pointer;transform:none;transition:transform .22s ease,filter .22s ease;
}
:root .art-action.art-action:hover{color:#542d49;background-color:transparent;transform:translateY(-3px) rotate(-.6deg);filter:brightness(1.07)}
:root .art-action.art-action:active{transform:translateY(0);filter:brightness(.97)}
:root .art-action.art-action:focus-visible{outline:2px solid #efa6d3;outline-offset:3px}
:root .art-action.art-action[hidden]{display:none}
:root .art-action.art-action:disabled{cursor:default;opacity:.55;filter:grayscale(.5)}
:root .art-action.art-action>span[aria-hidden],:root .art-action.art-action>span:last-child:not(:first-child){color:inherit;margin:0;font:22px/1 'Segoe UI Symbol',sans-serif;transform:none}
:root .art-action.art-action small{font:400 14px/1.3 MetaCN,BodyCN,sans-serif;color:inherit;white-space:nowrap}
:root .about-links{gap:10px 18px;align-items:center}
:root .about-links .art-action{--action-width:236px}
:root .credential-more .art-action,:root #credits-button.art-action,
:root .canvas-enlarge.art-action,:root .screen-transport>.art-action{
  --action-art:var(--action-compact);--action-width:166px;--action-height:66px;
}
:root .credential-more>div{gap:12px;flex-wrap:wrap}
:root .about .profile-proof>.snapshot-note.art-action{--action-width:192px;margin:6px 0 0 auto;justify-self:end}
:root .reference-link.art-action{--action-width:198px;margin-top:14px}
:root .library-project.art-action{
  --action-width:100%;--action-height:76px;max-width:300px;font-size:17px;white-space:normal;line-height:1.35;
}
:root .library-more.art-action{--action-width:236px;gap:9px}
:root .library-bottom{flex-wrap:wrap}
:root .ops-proof-link.art-action{--action-art:var(--action-compact);--action-width:112px;--action-height:56px;font-size:17px;justify-self:end;padding:14px 20px 10px 16px}
:root .ops-korea-profile .ops-proof-link.art-action{--action-art:var(--action-wide);--action-width:218px;--action-height:72px;font-size:19px;margin-left:auto}
:root .ops-ad-head,:root .ops-ad-row{grid-template-columns:minmax(150px,2.2fr) 1.3fr 1.6fr 1fr .8fr 112px}
:root .small-dialog>.art-action{margin:16px 8px 0 0;--action-width:216px}
:root .small-dialog>.solid-button.art-action{--action-width:184px}
:root .case-nav .art-action{--action-width:194px;--action-height:68px}
:root .screen-transport>.art-action{--action-width:148px;--action-height:60px;font-size:17px;margin-top:10px}
:root .screen-transport>.art-action[aria-pressed=true]{color:#753051;filter:sepia(.18)}
:root footer>.art-action{flex:0 0 auto}
@media(max-width:1100px) and (min-width:741px){
  :root .ops-ad-head,:root .ops-ad-row{gap:10px;grid-template-columns:minmax(126px,1.8fr) 1.2fr 1.6fr .8fr .7fr 104px}
  :root .ops-proof-link.art-action{--action-width:104px}
}
@media(max-width:740px){
  :root .art-action.art-action{--action-width:206px;--action-height:70px;font-size:18px}
  :root .about-links{gap:8px 14px;justify-content:flex-start}
  :root .about-links .art-action{--action-width:228px}
  :root .credential-more .art-action,:root #credits-button.art-action{--action-width:151px;--action-height:62px;font-size:17px}
  :root .credential-more>div{gap:10px}
  :root .about .profile-proof>.snapshot-note.art-action{--action-width:184px;margin-top:12px}
  :root .canvas-enlarge.art-action{--action-width:164px;--action-height:64px;margin-left:auto}
  :root .reference-link.art-action{--action-width:194px;margin-top:7px}
  :root .library-project.art-action{--action-width:100%;--action-height:76px;font-size:17px}
  :root .library-more.art-action{--action-width:222px;font-size:18px}
  :root .ops-ad-row{grid-template-columns:1fr 1fr;gap:20px}
  :root .ops-proof-link.art-action{--action-width:112px;--action-height:56px;font-size:17px}
  :root .ops-korea-profile .ops-proof-link.art-action{--action-width:214px;--action-height:70px;margin:0}
  :root .case-nav{flex-wrap:wrap;gap:6px;padding-left:4%;padding-right:4%}
  :root .case-nav .art-action{--action-width:166px;--action-height:60px;font-size:16px}
  :root .screen-transport>.art-action{--action-width:140px;--action-height:58px;font-size:16px}
  :root .small-dialog>.art-action{--action-width:214px;margin:12px 0 0}
}
@media(max-width:360px){
  :root .credential-more .art-action{--action-width:138px;font-size:16px}
  :root .case-nav .art-action{--action-width:148px;font-size:15px}
}
