.flowchart-palette__item:has(.flowchart-palette-symbol--connector),
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--connector){display:none!important}

/* Keep the compact legend in the same didactic order as the insertion palette. */
.flowchart-palette__item:has(.flowchart-palette-symbol--declaration){order:10}
.flowchart-palette__item:has(.flowchart-palette-symbol--assignment){order:11}
.flowchart-palette__item:has(.flowchart-palette-symbol--input){order:20;margin-left:7px;padding-left:12px;border-left:1px solid #d8dee9}
.flowchart-palette__item:has(.flowchart-palette-symbol--output){order:21}
.flowchart-palette__item:has(.flowchart-palette-symbol--decision){order:30;margin-left:7px;padding-left:12px;border-left:1px solid #d8dee9}
.flowchart-palette__item:has(.flowchart-palette-symbol--for){order:40;margin-left:7px;padding-left:12px;border-left:1px solid #d8dee9}
.flowchart-palette__item:has(.flowchart-palette-symbol--while){order:41}
.flowchart-palette__item:has(.flowchart-palette-symbol--dowhile){order:42}

/*
 * The + menu follows the mental model used in lessons:
 * state/variables -> I/O -> selection -> loops.
 */
.flowchart-edge-insert__menu{
    grid-template-columns:repeat(4,minmax(150px,1fr));
    grid-template-rows:auto 22px auto auto auto;
    column-gap:14px;
    row-gap:6px;
    width:min(700px,calc(100vw - 32px));
    padding:12px 14px 14px;
}
.flowchart-edge-insert__menu>strong{grid-column:1/-1;grid-row:1;padding:4px 4px 7px}
.flowchart-edge-insert__menu button{
    position:relative;
    min-width:0;
    white-space:nowrap;
    overflow:visible;
}

.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--declaration){grid-column:1;grid-row:3}
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--assignment){grid-column:1;grid-row:4}
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--input){grid-column:2;grid-row:3}
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--output){grid-column:2;grid-row:4}
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--decision){grid-column:3;grid-row:3}
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--for){grid-column:4;grid-row:3}
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--while){grid-column:4;grid-row:4}
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--dowhile){grid-column:4;grid-row:5}

.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--declaration)::before,
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--input)::before,
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--decision)::before,
.flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--for)::before{
    position:absolute;
    top:-23px;
    left:3px;
    color:#667085;
    font-size:.67rem;
    font-weight:900;
    letter-spacing:.045em;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
    pointer-events:none;
}
html[lang^="it"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--declaration)::before{content:"Variabili"}
html[lang^="it"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--input)::before{content:"Input / Output"}
html[lang^="it"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--decision)::before{content:"Selezione"}
html[lang^="it"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--for)::before{content:"Cicli"}
html[lang^="en"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--declaration)::before{content:"Variables"}
html[lang^="en"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--input)::before{content:"Input / Output"}
html[lang^="en"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--decision)::before{content:"Selection"}
html[lang^="en"] .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--for)::before{content:"Loops"}

@media(max-width:760px){
    .flowchart-edge-insert__menu{
        grid-template-columns:repeat(2,minmax(160px,1fr));
        grid-template-rows:auto 22px auto auto 18px 22px auto auto auto;
        width:min(440px,calc(100vw - 24px));
        column-gap:14px;
    }
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--declaration){grid-column:1;grid-row:3}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--assignment){grid-column:1;grid-row:4}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--input){grid-column:2;grid-row:3}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--output){grid-column:2;grid-row:4}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--decision){grid-column:1;grid-row:7}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--for){grid-column:2;grid-row:7}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--while){grid-column:2;grid-row:8}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--dowhile){grid-column:2;grid-row:9}
}

@media(max-width:460px){
    .flowchart-edge-insert__menu{
        display:flex;
        flex-direction:column;
        width:min(260px,calc(100vw - 20px));
        gap:5px;
    }
    .flowchart-edge-insert__menu>strong{order:0}
    .flowchart-edge-insert__menu button{white-space:normal}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--declaration){order:10;margin-top:22px}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--assignment){order:11}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--input){order:20;margin-top:22px}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--output){order:21}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--decision){order:30;margin-top:22px}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--for){order:40;margin-top:22px}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--while){order:41}
    .flowchart-edge-insert__menu button:has(.flowchart-edge-menu__icon--dowhile){order:42}
}