/* Stage 12 shared responsive UX layer. Opt-in linked only on existing interactive panels. */
:root{--hp12-teal:#087e79;--hp12-navy:#15304b;--hp12-line:#d5e5ee;--hp12-ice:#f0f8fc}
@media screen {
  body{overflow-wrap:break-word}
  :is(button,input,select,textarea){max-width:100%;font:inherit}
  :is(input,select,textarea){accent-color:var(--hp12-teal)}
  :is(button,a,input,select,textarea):focus-visible{outline:3px solid #00a69c;outline-offset:2px}
  :is(table){border-collapse:collapse}
  :is(.table-responsive,.table-wrap,.table-container){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  :is(img,video,svg){max-width:100%}
  :is(.card,.panel,.widget){min-width:0}
  :is(.btn,button,[role="button"]){touch-action:manipulation}
}
@media screen and (max-width:767px){
  :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){font-size:16px;min-height:42px}
  :is(button,.btn){min-height:42px}
  :is(.container,.container-fluid,main){min-width:0}
  :is(.row,.grid){min-width:0}
  :is(.table-responsive,.table-wrap,.table-container){-webkit-overflow-scrolling:touch}
}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.hp-mobile-more,.hp-admin-mobile-nav,.sidebar-toggle{display:none!important}}