/* Tool panels can be much narrower than the viewport while the sidebar is
   visible. Size their columns from the available panel width instead. */
.site-grid > .col-sm-9 > .right {
    min-width: 0;
    max-width: 100%;
}

.app-nav .nav-link,
.app-nav a.nav-link {
    overflow-wrap: anywhere;
}

.ip-calculator-container,
.time-container,
.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(20rem, calc((100% - 16px) / 2))), 1fr));
}

.tool-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(20rem, calc((100% - 14px) / 2))), 1fr));
}

.tool-grid-3,
.tool-grid-3.mode-input-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(18rem, calc((100% - 28px) / 3))), 1fr));
}

/* Route filter has two panels with a 1:2 width preference. Its inline
   grid-column:span 2 otherwise creates an implicit column in a one-column grid. */
body[data-tool-key="routeFilter"] .tool-grid-3 {
    display: flex;
    flex-wrap: wrap;
}

body[data-tool-key="routeFilter"] .tool-grid-3 > .tool-section {
    flex: 1 1 18rem;
}

body[data-tool-key="routeFilter"] .tool-grid-3 > .tool-section:nth-child(2) {
    flex: 2 1 30rem;
}

.ip-calculator-container > *,
.time-container > *,
.form-grid > *,
.tool-grid-2 > *,
.tool-grid-3 > *,
.right .notice-page,
.right .form-field,
.right .upload-panel,
.right .tool-card,
.right .tool-note,
.right .tool-section,
.right .tool-stack,
.right .tool-details,
.right .result-wrapper,
.right .output {
    min-width: 0;
    max-width: 100%;
}

/* These are single-column grids too: an implicit auto track still has a
   min-content floor even when its outer card is allowed to shrink. */
.notice-page,
.form-field,
.upload-panel,
.tool-stack,
.ip-calculator-section .input {
    grid-template-columns: minmax(0, 1fr);
}

.right input,
.right select,
.right textarea {
    min-width: 0;
    max-width: 100%;
}

.right .button-wrapper > button,
.right .result-toolbar > button,
.right .result-export-actions > button,
.right .output button {
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}

.right .toggle-row label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.right .form-field > label,
.right .tool-section > label,
.right .ip-calculator-section label {
    overflow-wrap: anywhere;
}

/* Keep wide result tables intact and scroll inside their result panel. This
   does not clip columns or change a table's display/semantic structure. */
.right .output {
    overflow-x: auto;
}

.right pre,
.right .code-surface,
.right .json-display {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.right .output p,
.right .output li,
.right .output summary,
body[data-tool-key="configDiff"] .output .tool-stack {
    overflow-wrap: anywhere;
}

/* Keep the host count and remove action together when a VLSM row stacks. */
.vlsm-rows {
    container-type: inline-size;
    container-name: vlsm-rows;
    min-width: 0;
}

.vlsm-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
}

.vlsm-row input[type="text"],
.vlsm-row input[type="number"] {
    width: 100%;
    min-width: 0;
}

@container vlsm-rows (max-width: 30rem) {
    .vlsm-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vlsm-row input[type="text"] {
        grid-column: 1 / -1;
    }
}