:root {
  --ui-touch-target:44px;
  --ui-fluid-space:clamp(8px, 1.05cqi, 16px);
  --ui-fluid-panel-padding:clamp(12px, 1.35cqi, 20px);
}

[data-ui-responsive-root] {
  container-name:gateward-screen;
  container-type:inline-size;
  min-width:0;
  isolation:isolate;
}

[data-ui-responsive-root].is-responsive-preview {
  min-width:0;
  box-shadow:0 0 0 1px rgba(101,214,246,.75), 0 18px 48px rgba(0,0,0,.7);
}

[data-ui-responsive-root] [data-ui-component] {
  min-width:0;
}

[data-ui-responsive-root] button,
[data-ui-responsive-root] a[href],
[data-ui-responsive-root] [role="button"],
[data-ui-responsive-root] [role="tab"] {
  min-width:var(--ui-touch-target) !important;
  min-height:var(--ui-touch-target) !important;
}

[data-ui-responsive-root] input,
[data-ui-responsive-root] select,
[data-ui-responsive-root] textarea {
  min-height:var(--ui-touch-target) !important;
}

[data-ui-responsive-root] label:has(input[type="checkbox"]),
[data-ui-responsive-root] label:has(input[type="radio"]) {
  min-width:var(--ui-touch-target);
  min-height:var(--ui-touch-target);
}

html.layout-editing [data-ui-responsive-root].is-responsive-preview::before {
  content:"Anteprima " attr(data-ui-responsive-preview) " · stesso modello";
  position:sticky;
  z-index:80;
  top:0;
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto -28px;
  padding:4px 10px;
  border:1px solid rgba(101,214,246,.65);
  background:rgba(2,12,20,.94);
  color:#9cecff;
  font:11px/18px "Segoe UI",sans-serif;
  letter-spacing:.05em;
  pointer-events:none;
}