/* Interactive figures shared by the adaptive cut and balancedness posts. */
.ac-fig {
    margin: 22px 0 0 0;
    font-family: 'Cascade Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    color: #1a2828;
}
.ac-fig canvas {
    display: block;
}
.ac-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0 0 14px 0;
}
.ac-label {
    color: #888;
    margin-right: 8px;
}

/* segmented toggle: a soft pill with the selected option raised */
.ac-seg {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
}
.ac-seg-track {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: #ececea;
}
.ac-seg-track .ac-btn {
    border: none;
    background: transparent;
    color: #5b6666;
    padding: 4px 12px;
}
.ac-seg-track .ac-btn:hover {
    color: #1a2828;
    background: rgba(255, 255, 255, 0.55);
}
.ac-seg-track .ac-btn[aria-pressed="true"] {
    background: #fff;
    color: #1a2828;
    box-shadow: 0 1px 2px rgba(26, 40, 40, 0.16), 0 0 0 1px rgba(26, 40, 40, 0.04);
}

.ac-btn {
    font: inherit;
    background: #fff;
    color: #1a2828;
    border: 1px solid #d9d9d6;
    border-radius: 999px;
    padding: 4px 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ac-btn:hover {
    border-color: #9aa3a3;
}
.ac-btn.ac-primary {
    background: #1a2828;
    border-color: #1a2828;
    color: #fafafa;
}
.ac-btn.ac-primary:hover {
    background: #2e4242;
}
.ac-btn:focus-visible,
.ac-fig canvas:focus-visible,
.ac-slider input:focus-visible {
    outline: 2px solid #0066dd;
    outline-offset: 2px;
}
.ac-play {
    min-width: 84px;
}

/* sliders: thin rounded track, round thumb */
.ac-slider {
    display: inline-flex;
    align-items: center;
}
.ac-slider input {
    -webkit-appearance: none;
    appearance: none;
    width: 96px;
    height: 16px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.ac-slider input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: #dcdcd8;
}
.ac-slider input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: #dcdcd8;
}
.ac-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background: #1a2828;
    border: 2px solid #fafafa;
    box-shadow: 0 0 0 1px #1a2828;
}
.ac-slider input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a2828;
    border: 2px solid #fafafa;
    box-shadow: 0 0 0 1px #1a2828;
}

.ac-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ac-row.stacked {
    flex-direction: column;
}
.ac-pair {
    display: flex;
    gap: 4px;
}
.ac-matrix {
    box-shadow: 0 0 0 1px #e3e3e0;
}
.ac-drag {
    cursor: ns-resize;
    touch-action: none;
}
.ac-click {
    cursor: pointer;
}
/* a figure that may spill past the text column on wide screens */
.ac-fig.ac-wide {
    width: max(100%, min(1080px, calc(100vw - 72px)));
}
.ac-fig.ac-wider {
    width: max(100%, min(1400px, calc(100vw - 72px)));
}
.ac-mobile-only {
    display: none;
}
@media (max-width: 768px) {
    .ac-desktop-only {
        display: none;
    }
    .ac-mobile-only {
        display: block;
    }
}
.ac-network {
    margin-top: 12px;
}
.ac-trace {
    margin: 14px 0 12px 0;
}
.ac-readout {
    margin-top: 10px;
    line-height: 1.5;
    min-height: 1.5em;
}
/* links in the text that set a figure: a dotted underline, and they wrap like any word */
.fig-link {
    color: #0044aa;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
    cursor: pointer;
}
.fig-link:hover {
    color: #0066dd;
    border-bottom-style: solid;
    text-decoration: none;
}
.fig-link:focus-visible {
    outline: 2px solid #0066dd;
    outline-offset: 2px;
}
.ac-muted {
    color: #888;
}
.ac-big {
    font-size: 14px;
}