/* HF21-S10: browser viewport, touch-target and responsive containment layer.
   Presentation only; no API, algorithm, database, permission or export-policy changes. */
:root{
  --hf21-s10-touch:44px;
  --hf21-s10-safe-inline:clamp(12px,2.2vw,28px);
}
html[data-hbv-hf21-browser="s10"]{
  max-width:100%;
  overflow-x:clip;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
html[data-hbv-hf21-browser="s10"] body{
  max-width:100%;
  min-width:0;
}
html[data-hbv-hf21-browser="s10"] img,
html[data-hbv-hf21-browser="s10"] svg,
html[data-hbv-hf21-browser="s10"] video,
html[data-hbv-hf21-browser="s10"] canvas{
  max-width:100%;
}
html[data-hbv-hf21-browser="s10"] :where(.table-wrap,.table-scroll,.responsive-table,.wish-slot-map,.compare-grid,.matrix-wrap){
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
html[data-hbv-hf21-browser="s10"] :where(.admin-main,.admin-content,.panel,.panel-body,.page-head,.page-actions,.toolbar,.topbar,.main-content,.content,.workspace,.shell-main){
  min-width:0;
}
html[data-hbv-hf21-browser="s10"] :where(button,[role="button"],input,select,textarea,a){
  -webkit-tap-highlight-color:transparent;
}
html[data-hbv-hf21-browser="s10"] :where(button,[role="button"],a,input,select,textarea):focus-visible{
  outline:3px solid color-mix(in srgb,#2563eb 74%,white);
  outline-offset:2px;
}
html[data-hbv-hf21-browser="s10"] .formal-export-card,
html[data-hbv-hf21-browser="s10"] [role="dialog"]{
  max-width:min(760px,calc(100vw - 24px));
  max-height:min(88vh,calc(100dvh - 24px));
}
html[data-hbv-hf21-browser="s10"] .admin-topbar-right,
html[data-hbv-hf21-browser="s10"] .admin-quick-links,
html[data-hbv-hf21-browser="s10"] .page-actions,
html[data-hbv-hf21-browser="s10"] .toolbar{
  min-width:0;
  flex-wrap:wrap;
}
html[data-hbv-hf21-browser="s10"] .skip-link,
html[data-hbv-hf21-browser="s10"] [data-hf21-skip]{
  z-index:2147483647;
}

@media (max-width: 760px){
  html[data-hbv-hf21-browser="s10"] body{
    overflow-x:hidden;
  }
  html[data-hbv-hf21-browser="s10"] :where(button,[role="button"],input:not([type="checkbox"]):not([type="radio"]),select,textarea,.btn){
    min-height:var(--hf21-s10-touch)!important;
  }
  html[data-hbv-hf21-browser="s10"] :where(button,[role="button"],.btn){
    min-width:var(--hf21-s10-touch)!important;
  }
  html[data-hbv-hf21-browser="s10"] :where(input[type="checkbox"],input[type="radio"]){
    min-width:20px;
    min-height:20px;
  }
  html[data-hbv-hf21-browser="s10"] :where(.admin-content,.page-shell,.main-content,.content-shell,.workspace-shell){
    padding-left:var(--hf21-s10-safe-inline);
    padding-right:var(--hf21-s10-safe-inline);
  }
  html[data-hbv-hf21-browser="s10"] .admin-topbar{
    align-items:flex-start;
    gap:10px;
    padding-inline:var(--hf21-s10-safe-inline);
  }
  html[data-hbv-hf21-browser="s10"] .admin-topbar-left,
  html[data-hbv-hf21-browser="s10"] .admin-topbar-right{
    max-width:100%;
  }
  html[data-hbv-hf21-browser="s10"] .admin-topbar-right{
    justify-content:flex-start;
  }
  html[data-hbv-hf21-browser="s10"] .admin-quick-links{
    display:none;
  }
  html[data-hbv-hf21-browser="s10"] :where(.page-head,.panel-head){
    align-items:flex-start;
    gap:12px;
  }
  html[data-hbv-hf21-browser="s10"] :where(.page-head,.panel-head,.page-actions,.toolbar){
    max-width:100%;
  }
  html[data-hbv-hf21-browser="s10"] .page-actions > *,
  html[data-hbv-hf21-browser="s10"] .toolbar > :where(button,input,select){
    max-width:100%;
  }
  html[data-hbv-hf21-browser="s10"] :where(.metric-grid,.admin-grid,.decision-grid,.card-grid,.compare-grid,.wish-risk-items){
    grid-template-columns:minmax(0,1fr)!important;
  }
  html[data-hbv-hf21-browser="s10"] :where(.span-2,.span-3,.span-full){
    grid-column:1 / -1!important;
  }
  html[data-hbv-hf21-browser="s10"] :where(table){
    min-width:max-content;
  }
  html[data-hbv-hf21-browser="s10"] .formal-export-modal{
    padding:12px;
    align-items:flex-end;
  }
  html[data-hbv-hf21-browser="s10"] .formal-export-card,
  html[data-hbv-hf21-browser="s10"] [role="dialog"]{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:18px 18px 12px 12px;
  }
  html[data-hbv-hf21-browser="s10"] :where(.formal-export-actions,.dialog-actions,.modal-actions){
    position:sticky;
    bottom:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
}

@media (prefers-reduced-motion: reduce){
  html[data-hbv-hf21-browser="s10"] *,
  html[data-hbv-hf21-browser="s10"] *::before,
  html[data-hbv-hf21-browser="s10"] *::after{
    scroll-behavior:auto!important;
  }
}