/* Gate unico e avvisi del cruscotto (S05): blocco sfumato, dialog con la frase di valore, toast.
   Colori solo dai token --brand-*, testo a 16 px o più. */
.gate-block {
  position: relative;
  display: grid;
  gap: 12px;
  border: 1px dashed var(--brand-line);
  border-radius: 0;
  padding: 16px;
}
.gate-shade {
  filter: blur(5px);
  opacity: 0.55;
  max-height: 160px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.gate-block.with-rows .gate-call {
  position: absolute;
  inset: auto 16px 16px 16px;
}
.gate-call {
  display: grid;
  gap: 10px;
  justify-items: start;
  background: color-mix(in srgb, var(--brand-bg) 82%, transparent);
  padding: 14px;
  border-radius: 0;
}
dialog {
  max-width: min(560px, calc(100vw - 32px));
  color: var(--brand-text);
  background: var(--brand-paper);
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 28px;
  font-size: var(--s18);
}
dialog::backdrop {
  background: color-mix(in srgb, var(--brand-bg) 75%, transparent);
  backdrop-filter: blur(3px);
}
dialog .value {
  font-size: var(--s22);
  margin: 12px 0;
}
dialog ul {
  padding-left: 22px;
  margin: 0 0 20px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  max-width: calc(100vw - 32px);
  background: var(--brand-text);
  color: var(--brand-bg);
  font-size: var(--s16);
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 0;
  transition: transform 0.26s var(--ease-volo);
  z-index: 20;
}
.toast:empty {
  display: none;
}
.toast.show {
  transform: translate(-50%, 0);
}
/* Senza righe sfumate il gate è una riga: la frase e il pulsante accanto. */
.gate-block:not(.with-rows) {
  padding: 10px 14px;
}
.gate-block:not(.with-rows) .gate-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 0;
  background: none;
}
.gate-block:not(.with-rows) .gate-call p {
  margin: 0;
  flex: 1 1 320px;
}