/* Diagramas didáticos (docs/assets/javascripts/diagrams/). Paleta do GitHub,
   clara e escura, como os slides; o resto vem das variáveis do Material. */

.dgm {
    --dgm-fg: var(--md-default-fg-color);
    --dgm-muted: var(--md-default-fg-color--light);
    --dgm-line: var(--md-default-fg-color--lighter);
    --dgm-faint: var(--md-default-fg-color--lightest);
    --dgm-bg: var(--md-default-bg-color);
    --dgm-blue: #0969da;
    --dgm-orange: #bc4c00;
    --dgm-green: #1a7f37;
    --dgm-purple: #8250df;
    --dgm-red: #cf222e;
    --dgm-yellow: #9a6700;
    --dgm-gray: #6e7781;
    --tone: var(--dgm-gray);
    margin: 1.6em 0;
    font-size: .7rem;
    line-height: 1.35;
    color: var(--dgm-fg);
}

[data-md-color-scheme="slate"] .dgm {
    --dgm-blue: #58a6ff;
    --dgm-orange: #f0883e;
    --dgm-green: #3fb950;
    --dgm-purple: #bc8cff;
    --dgm-red: #ff7b72;
    --dgm-yellow: #d29922;
    --dgm-gray: #8b949e;
}

.dgm.dgm--ready {
    border: .05rem solid var(--dgm-faint);
    border-radius: .6rem;
    padding: .9rem 1rem .7rem;
}

.dgm-tone-blue { --tone: var(--dgm-blue); }
.dgm-tone-orange { --tone: var(--dgm-orange); }
.dgm-tone-green { --tone: var(--dgm-green); }
.dgm-tone-purple { --tone: var(--dgm-purple); }
.dgm-tone-red { --tone: var(--dgm-red); }
.dgm-tone-yellow { --tone: var(--dgm-yellow); }
.dgm-tone-gray { --tone: var(--dgm-gray); }

/* cabeçalho */
.dgm-head {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .8rem;
}

.dgm-kicker {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dgm-muted);
}

.dgm-title {
    font-size: .8rem;
    font-weight: 600;
}

.dgm-body {
    position: relative;
}

/* nó */
.dgm-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    padding: .55em .8em;
    border: .05rem solid color-mix(in srgb, var(--tone) 45%, transparent);
    border-radius: .45rem;
    background: color-mix(in srgb, var(--tone) 7%, var(--dgm-bg));
    color: var(--dgm-fg);
    transition: opacity .35s, background-color .35s, border-color .35s, box-shadow .35s, transform .35s;
}

a.dgm-node,
.md-typeset a.dgm-node {
    color: var(--dgm-fg);
    text-decoration: none;
}

a.dgm-node:hover {
    border-color: var(--tone);
    background: color-mix(in srgb, var(--tone) 14%, var(--dgm-bg));
}

.dgm-node-title {
    font-weight: 600;
}

.dgm-node-sub {
    font-size: .62rem;
    color: var(--dgm-muted);
}

.dgm-tag {
    align-self: flex-start;
    padding: 0 .4em;
    border-radius: .25rem;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 14%, transparent);
}

.dgm-node.is-active {
    border-color: var(--tone);
    background: color-mix(in srgb, var(--tone) 16%, var(--dgm-bg));
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tone) 18%, transparent);
}

.dgm-node.is-dim,
.dgm .is-dim {
    opacity: .35;
}

.dgm .is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* cadeia linear */
.dgm-flow {
    display: flex;
    align-items: stretch;
}

.dgm-flow > .dgm-node {
    flex: 1 1 0;
    justify-content: center;
}

.dgm-arrow {
    position: relative;
    flex: 0 0 1.6rem;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dgm-arrow--label {
    flex-basis: 3.6rem;
}

.dgm-arrow-line {
    position: relative;
    display: block;
    width: 100%;
    height: .05rem;
    background: var(--dgm-line);
}

.dgm-arrow-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: .32rem;
    height: .32rem;
    border-top: .05rem solid var(--dgm-line);
    border-right: .05rem solid var(--dgm-line);
    transform: translateY(-50%) rotate(45deg);
}

.dgm-arrow-label {
    margin-bottom: .2rem;
    font-size: .55rem;
    text-align: center;
    color: var(--dgm-muted);
}

.dgm-arrow.is-active .dgm-arrow-line {
    background: var(--tone, var(--dgm-fg));
}

/* camada de curvas */
.dgm-overlay-host {
    position: relative;
}

.dgm-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.dgm-link path:not(.dgm-head) {
    fill: none;
    stroke: var(--dgm-line);
    stroke-width: 1.2;
    transition: stroke .35s, opacity .35s;
}

.dgm-link.dgm-dashed path:not(.dgm-head) {
    stroke-dasharray: 4 4;
}

.dgm-link.dgm-tone-blue path:not(.dgm-head),
.dgm-link.dgm-tone-orange path:not(.dgm-head),
.dgm-link.dgm-tone-green path:not(.dgm-head),
.dgm-link.dgm-tone-purple path:not(.dgm-head),
.dgm-link.dgm-tone-red path:not(.dgm-head) {
    stroke: var(--tone);
}

.dgm-link.is-flowing path:not(.dgm-head) {
    stroke: var(--tone);
    stroke-width: 1.8;
    stroke-dasharray: 6 5;
    animation: dgm-dash 1s linear infinite;
}

.dgm-head {
    fill: none;
    stroke: context-stroke;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dgm-link-label {
    font-size: .55rem;
    fill: var(--dgm-muted);
}

@keyframes dgm-dash {
    to { stroke-dashoffset: -11; }
}

/* controles */
.dgm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .8rem;
}

.dgm-bar:empty {
    display: none;
}

.dgm-btn {
    padding: .2em .75em;
    border: .05rem solid var(--dgm-line);
    border-radius: 1rem;
    background: transparent;
    color: var(--dgm-fg);
    font: inherit;
    font-size: .62rem;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.dgm-btn:hover:not(:disabled) {
    border-color: var(--dgm-blue);
    color: var(--dgm-blue);
}

.dgm-btn:disabled {
    opacity: .4;
    cursor: default;
}

.dgm-btn--primary {
    border-color: var(--dgm-blue);
    background: var(--dgm-blue);
    color: var(--dgm-bg);
}

.dgm-btn--primary:hover:not(:disabled) {
    background: transparent;
}

.dgm-btn.is-on {
    border-color: var(--tone, var(--dgm-blue));
    background: color-mix(in srgb, var(--tone, var(--dgm-blue)) 14%, transparent);
    color: var(--dgm-fg);
}

.dgm-dots {
    display: inline-flex;
    gap: .25rem;
    margin-left: .3rem;
}

.dgm-dot {
    width: .4rem;
    height: .4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dgm-faint);
    cursor: pointer;
}

.dgm-dot.is-on {
    background: var(--dgm-blue);
}

.dgm-note {
    min-height: 2.7em;
    margin-top: .55rem;
    font-size: .66rem;
    color: var(--dgm-muted);
}

.dgm-note:empty {
    display: none;
}

.dgm-note b,
.dgm-note strong {
    color: var(--dgm-fg);
}

.dgm-note code,
.dgm code {
    font-size: .92em;
}

/* celular: cadeias viram coluna */
@media screen and (max-width: 44.9375em) {
    .dgm.dgm--ready {
        padding: .8rem .7rem .6rem;
    }

    .dgm-flow {
        flex-direction: column;
    }

    .dgm-arrow {
        flex-basis: 1.3rem;
        width: 100%;
    }

    .dgm-arrow--label {
        flex-basis: 2rem;
        flex-direction: row;
        gap: .4rem;
    }

    .dgm-arrow-line {
        width: .05rem;
        height: 1.1rem;
    }

    .dgm-arrow-line::after {
        right: auto;
        top: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .dgm-arrow-label {
        order: 2;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dgm * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- legenda genérica ---- */
.dgm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    margin-top: .7rem;
    font-size: .6rem;
    color: var(--dgm-muted);
}

.dgm-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.dgm-legend i {
    display: inline-block;
    width: .9rem;
    height: .6rem;
}

/* ---- cv-folds ---- */
.dgm-cv {
    display: grid;
    grid-template-columns: 4.2rem repeat(5, minmax(0, 1fr)) minmax(0, 1fr) 3.4rem;
    gap: .3rem;
    align-items: center;
}

.dgm-cv-h {
    font-size: .56rem;
    text-align: center;
    color: var(--dgm-muted);
}

.dgm-cv-round {
    font-size: .62rem;
    color: var(--dgm-muted);
    transition: opacity .35s, color .35s;
}

.dgm-cv-cell {
    height: 1.25rem;
    border-radius: .25rem;
    background: var(--dgm-faint);
    transition: background-color .45s, box-shadow .45s;
}

.dgm-cv-cell.is-train {
    background: color-mix(in srgb, var(--dgm-blue) 32%, transparent);
}

.dgm-cv-cell.is-val {
    background: var(--dgm-orange);
}

.dgm-cv-test,
.dgm-legend i.dgm-cv-test {
    background: repeating-linear-gradient(135deg, var(--dgm-faint) 0 .2rem, transparent .2rem .4rem);
    border: .05rem dashed var(--dgm-line);
}

.dgm-cv-h--test {
    font-style: italic;
}

.dgm-cv-round.is-current {
    color: var(--dgm-fg);
    font-weight: 600;
}

.dgm-cv-cell.is-current.is-val {
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--dgm-orange) 30%, transparent);
}

.dgm-cv-score {
    justify-self: start;
    padding: .05rem .45rem;
    border-radius: 1rem;
    font-size: .62rem;
    background: color-mix(in srgb, var(--dgm-green) 14%, transparent);
    color: var(--dgm-fg);
    transition: opacity .4s, transform .4s;
}

.dgm-cv-score.is-hidden {
    transform: translateX(-.4rem);
}

.dgm-cv-summary {
    display: flex;
    justify-content: flex-end;
    margin-top: .6rem;
    transition: opacity .5s;
}

.dgm-cv-summary .dgm-node {
    max-width: 22rem;
}

@media screen and (max-width: 44.9375em) {
    .dgm-cv {
        grid-template-columns: 3rem repeat(5, minmax(0, 1fr)) minmax(0, 1fr) 2.8rem;
        gap: .2rem;
    }
}

/* ---- preprocessing-map ---- */
.dgm-pp-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
}

.dgm-pp-top > .dgm-node {
    align-items: center;
    text-align: center;
}

.dgm-pp-lanes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}

.dgm-pp-lane {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .6rem .65rem .7rem;
    border-radius: .5rem;
    border-top: .15rem solid var(--tone);
    background: color-mix(in srgb, var(--tone) 4%, transparent);
    transition: opacity .35s;
}

.dgm-pp-lane-title {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tone);
}

.dgm-pp-q {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    transition: opacity .35s;
}

.dgm-pp-ask {
    align-self: center;
    padding: .15rem .7rem;
    border: .05rem dashed var(--dgm-line);
    border-radius: 1rem;
    font-weight: 600;
    transition: border-color .3s, box-shadow .3s;
}

.dgm-pp-ask.is-next {
    border-style: solid;
    border-color: var(--dgm-orange);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--dgm-orange) 20%, transparent);
}

.dgm-pp-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.dgm-pp-top .dgm-pp-opts {
    width: min(26rem, 100%);
}

.dgm-pp-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .4em .6em;
    border: .05rem solid color-mix(in srgb, var(--tone) 40%, transparent);
    border-radius: .4rem;
    background: color-mix(in srgb, var(--tone) 6%, var(--dgm-bg));
    color: var(--dgm-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity .35s, background-color .3s, border-color .3s, box-shadow .3s;
}

.dgm-pp-opt:hover {
    border-color: var(--tone);
}

.dgm-pp-opt.is-active {
    border-color: var(--tone);
    background: color-mix(in srgb, var(--tone) 16%, var(--dgm-bg));
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--tone) 18%, transparent);
}

.dgm-pp-ans {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tone);
}

.dgm-pp-out {
    font-size: .64rem;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 44.9375em) {
    .dgm-pp-lanes {
        grid-template-columns: 1fr;
    }
}

/* ---- bagging ---- */
.dgm-bag {
    display: grid;
    grid-template-columns: 5.4rem repeat(10, minmax(0, 1fr)) 3.2rem 3rem minmax(8.5rem, 1.8fr);
    gap: .3rem;
    align-items: center;
}

.dgm-bag-label {
    font-size: .62rem;
    color: var(--dgm-fg);
    grid-column: 1;
    transition: opacity .35s;
}

.dgm-bag-label--data {
    color: var(--dgm-muted);
}

.dgm-bag-chip {
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .05rem solid var(--dgm-line);
    border-radius: .25rem;
    font-size: .6rem;
    font-weight: 600;
    transition: background-color .2s, border-color .2s, transform .2s;
}

.dgm-bag-chip.is-drawn {
    border-color: var(--dgm-orange);
    background: color-mix(in srgb, var(--dgm-orange) 22%, transparent);
    transform: translateY(-.1rem);
}

.dgm-bag-h {
    font-size: .56rem;
    text-align: center;
    color: var(--dgm-muted);
}

.dgm-bag-gap {
    grid-column: 1;
    font-size: .7rem;
    line-height: .8;
    color: var(--dgm-muted);
    text-align: center;
}

.dgm-bag-cell {
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    border: .05rem solid var(--dgm-faint);
    font-size: .56rem;
    font-weight: 600;
    color: var(--dgm-fg);
    transition: background-color .3s, border-color .3s, transform .15s;
}

.dgm-bag-cell.is-in,
.dgm-legend i.dgm-bag-cell.is-in {
    border-color: transparent;
    background: color-mix(in srgb, var(--dgm-blue) 32%, transparent);
}

.dgm-bag-cell.is-oob,
.dgm-legend i.dgm-bag-cell.is-oob {
    border: .05rem dashed var(--dgm-line);
    background: repeating-linear-gradient(135deg, var(--dgm-faint) 0 .2rem, transparent .2rem .4rem);
}

.dgm-bag-cell.is-pop {
    transform: scale(1.15);
    background: color-mix(in srgb, var(--dgm-orange) 40%, transparent);
}

.dgm-bag-treebox {
    display: flex;
    justify-content: center;
    transition: opacity .5s, transform .5s;
}

.dgm-bag-treebox.is-hidden {
    transform: scale(.6);
}

.dgm-bag-tree {
    width: 2.8rem;
    height: 2rem;
}

.dgm-bag-branch {
    stroke: var(--dgm-green);
    stroke-width: 1.2;
    fill: none;
}

.dgm-bag-split {
    fill: var(--dgm-bg);
    stroke: var(--dgm-green);
    stroke-width: 1.2;
}

.dgm-bag-leaf {
    fill: var(--dgm-green);
}

.dgm-bag-out {
    justify-self: center;
    padding: .05rem .45rem;
    border-radius: 1rem;
    font-size: .62rem;
    background: color-mix(in srgb, var(--dgm-green) 14%, transparent);
    transition: opacity .4s;
}

.dgm-bag-vote {
    grid-column: -2;
    grid-row: 2 / span 4;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-left: .7rem;
    margin-left: .2rem;
    border-left: .1rem solid color-mix(in srgb, var(--dgm-green) 45%, transparent);
    transition: opacity .5s;
}

@media screen and (max-width: 44.9375em) {
    .dgm-bag {
        grid-template-columns: 3.6rem repeat(10, minmax(0, 1fr)) 2.2rem 1.8rem;
        gap: .18rem;
    }

    .dgm-bag-label {
        font-size: .54rem;
    }

    .dgm-bag-h--out {
        visibility: hidden;
    }

    .dgm-bag-cell,
    .dgm-bag-chip {
        font-size: .48rem;
    }

    .dgm-bag-tree {
        width: 2rem;
        height: 1.5rem;
    }

    .dgm-bag-vote {
        grid-column: 1 / -1;
        grid-row: auto;
        padding: .5rem 0 0;
        margin: .3rem 0 0;
        border-left: 0;
        border-top: .1rem solid color-mix(in srgb, var(--dgm-green) 45%, transparent);
    }
}

/* ---- column-transformer ---- */
.dgm-ct {
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
}

.dgm-ct-stage {
    padding: .5rem .6rem .6rem;
    border: .05rem solid var(--dgm-faint);
    border-radius: .5rem;
    transition: opacity .45s;
}

.dgm-ct-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    margin-bottom: .4rem;
}

.dgm-ct-name {
    font-weight: 600;
}

.dgm-ct-sub {
    font-size: .6rem;
    color: var(--dgm-muted);
    transition: color .3s;
}

.dgm-ct-sub.is-active {
    color: var(--tone);
    font-weight: 600;
}

.dgm-ct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.md-typeset .dgm-ct-chip,
.dgm-ct-chip {
    padding: .1em .45em;
    border: .05rem solid color-mix(in srgb, var(--tone) 40%, transparent);
    border-radius: .3rem;
    background: color-mix(in srgb, var(--tone) 10%, var(--dgm-bg));
    color: var(--dgm-fg);
    font-size: .58rem;
    white-space: nowrap;
    transition: background-color .45s, border-color .45s, opacity .45s, transform .45s;
}

.dgm-ct-chip.is-done {
    border-color: var(--tone);
    background: color-mix(in srgb, var(--tone) 24%, var(--dgm-bg));
}

.dgm-ct-chip.dgm-ct-gone {
    display: none;
}

.dgm-ct-stage.is-hidden .dgm-ct-chip {
    transform: translateY(-.3rem);
}

.dgm-ct-ct {
    position: relative;
    padding: 1.3rem .6rem .6rem;
    border: .05rem dashed var(--dgm-line);
    border-radius: .6rem;
    transition: border-color .4s;
}

.dgm-ct-ct.is-on {
    border-color: var(--dgm-muted);
}

.dgm-ct-label {
    position: absolute;
    top: .3rem;
    left: .6rem;
    font-size: .6rem;
    color: var(--dgm-muted);
}

.dgm-ct-branches {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: .7rem;
}

.dgm-ct-branch {
    border-color: color-mix(in srgb, var(--tone) 40%, transparent);
    background: color-mix(in srgb, var(--tone) 4%, transparent);
}

.dgm-ct-model {
    display: flex;
    justify-content: center;
    transition: opacity .45s;
}

.dgm-ct-model .dgm-node {
    align-items: center;
    text-align: center;
}

@media screen and (max-width: 44.9375em) {
    .dgm-ct-branches {
        grid-template-columns: 1fr 1fr;
        gap: .4rem;
    }

    .dgm-ct-chip {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ---- ml-workflow / mlops-loop (laços de volta por baixo) ---- */
.dgm-wf,
.dgm-mlops {
    padding-bottom: 4.6rem;
}

.dgm-wf > .dgm-node,
.dgm-mlops > .dgm-node {
    text-align: center;
    align-items: center;
}

.dgm-wf .dgm-tag {
    align-self: center;
    border-radius: 50%;
    min-width: 1.1rem;
    text-align: center;
}

.dgm-mlops .dgm-arrow--label {
    flex-basis: 6.5rem;
}

.dgm-wf .dgm-arrow,
.dgm-mlops .dgm-arrow {
    transition: opacity .35s;
}

.dgm-link.is-dim {
    opacity: .25;
}

.dgm-note a {
    font-weight: 600;
}

@media screen and (max-width: 44.9375em) {
    .dgm-wf,
    .dgm-mlops {
        padding-bottom: 0;
        padding-right: 5rem;
    }

    .dgm-mlops .dgm-arrow--label {
        flex-basis: 2.2rem;
    }
}

/* ---- ml-paradigms ---- */
.dgm-par-root {
    display: flex;
    justify-content: center;
}

.dgm-par-root .dgm-node {
    padding: .5em 1.4em;
}

.dgm-par-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.2rem;
}

.dgm-par-col {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: opacity .35s;
}

.dgm-par-head {
    cursor: pointer;
    text-align: center;
    align-items: center;
}

.dgm-par-head:focus-visible {
    outline: .1rem solid var(--tone);
    outline-offset: .1rem;
}

.dgm-par-leaves {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-left: .8rem;
    padding-left: .8rem;
    border-left: .1rem solid color-mix(in srgb, var(--tone) 40%, transparent);
}

.dgm-par-leaf .dgm-tag {
    position: absolute;
    top: .5em;
    right: .55em;
}

.dgm-par-leaf .dgm-node-title {
    padding-right: 3.2em;
}

.dgm-par-empty {
    padding: .4em 0;
    font-size: .62rem;
    font-style: italic;
    color: var(--dgm-muted);
}

@media screen and (max-width: 44.9375em) {
    .dgm-par-cols {
        grid-template-columns: 1fr;
        margin-top: .8rem;
    }

    .dgm-par .dgm-overlay {
        display: none;
    }
}

/* ---- intro-vs-programming ---- */
.dgm-ivp {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dgm-ivp-panel {
    padding: .7rem .8rem .8rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--dgm-fg) 3%, transparent);
}

.dgm-ivp-title {
    margin-bottom: .6rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dgm-muted);
}

.dgm-ivp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
}

.dgm-ivp-ins {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.dgm-ivp-box {
    text-align: center;
    align-items: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

.dgm-pulse {
    fill: var(--tone);
}

@media screen and (max-width: 44.9375em) {
    .dgm-ivp {
        grid-template-columns: 1fr;
    }

    .dgm-ivp-row {
        gap: 1.2rem;
    }
}

/* ---- imbalance-ladder ---- */
.dgm-lad {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.md-typeset .dgm-lad > li {
    margin: 0;
}

.dgm-lad-rung {
    padding-bottom: calc(var(--k) * 1.1rem);
    transition: opacity .35s;
}

.dgm-lad-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    width: 100%;
    min-height: 6.2rem;
    padding: .5em .6em .55em;
    border: .05rem solid color-mix(in srgb, var(--tone) 40%, transparent);
    border-bottom: .2rem solid var(--tone);
    border-radius: .45rem .45rem .2rem .2rem;
    background: color-mix(in srgb, var(--tone) 6%, var(--dgm-bg));
    color: var(--dgm-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .3s, border-color .3s, box-shadow .3s, transform .3s;
}

.dgm-lad-step:hover {
    border-color: var(--tone);
}

.dgm-lad-step.is-active {
    background: color-mix(in srgb, var(--tone) 17%, var(--dgm-bg));
    border-color: var(--tone);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tone) 18%, transparent);
    transform: translateY(-.15rem);
}

.dgm-lad-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--tone);
    color: var(--dgm-bg);
    font-size: .58rem;
    font-weight: 700;
}

.dgm-lad-title {
    font-weight: 600;
    line-height: 1.3;
}

.dgm-lad-touch {
    margin-top: auto;
    font-size: .58rem;
    color: var(--dgm-muted);
}

.dgm-lad-touch b {
    color: var(--tone);
    font-weight: 600;
}

.dgm-lad-axis {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    font-size: .56rem;
    color: var(--dgm-muted);
}

.dgm-lad-axis-line {
    position: relative;
    flex: 1;
    height: .05rem;
    background: var(--dgm-line);
}

.dgm-lad-axis-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: .3rem;
    height: .3rem;
    border-top: .05rem solid var(--dgm-line);
    border-right: .05rem solid var(--dgm-line);
    transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 44.9375em) {
    .dgm-lad {
        grid-template-columns: 1fr;
    }

    .dgm-lad-rung {
        padding-bottom: 0;
        padding-left: calc(var(--k) * .5rem);
    }

    .dgm-lad-step {
        min-height: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: .5rem;
        align-items: center;
    }

    .dgm-lad-step br {
        display: none;
    }

    .dgm-lad-num {
        grid-row: span 2;
    }

    .dgm-lad-axis {
        display: none;
    }
}

/* ---- text-map ---- */
.dgm-tm {
    display: grid;
    grid-template-columns: minmax(0, .6fr) minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr);
    grid-template-areas:
        "text tok sl sl vec"
        "text tok bow tfidf vec"
        "text tok dl dl vec"
        "text tok word sent vec";
    column-gap: 1.6rem;
    row-gap: .3rem;
}

.dgm-tm > .dgm-node {
    justify-content: center;
}

.dgm-tm > .dgm-node:not([href]) {
    align-self: center;
}

.dgm-tm-lane {
    align-self: end;
    padding-top: .5rem;
    font-size: .6rem;
    color: var(--dgm-muted);
    cursor: pointer;
    transition: opacity .35s;
}

.dgm-tm-lane b {
    color: var(--tone);
}

.dgm-tm-lane.is-on b {
    text-decoration: underline;
}

.dgm-link.is-dim {
    opacity: .25;
}

@media screen and (max-width: 44.9375em) {
    .dgm-tm {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "text text"
            "tok tok"
            "sl dl"
            "bow word"
            "tfidf sent"
            "vec vec";
        column-gap: .6rem;
        row-gap: 1.3rem;
    }

    .dgm-tm > .dgm-node:not([href]) {
        justify-self: center;
        min-width: 8rem;
        text-align: center;
        align-items: center;
    }

    .dgm-tm-lane {
        padding-top: 0;
        margin-bottom: -.8rem;
    }
}

/* ---- bertopic-stages ---- */
.dgm-bt-flow .dgm-node-sub a {
    color: var(--md-typeset-a-color);
}

.dgm-bt-pic {
    display: block;
    width: 100%;
    height: auto;
    margin-top: .8rem;
    border-radius: .45rem;
    background: color-mix(in srgb, var(--dgm-faint) 35%, transparent);
    overflow: visible;
}

.dgm-bt-schematic {
    font-size: 9px;
    font-style: italic;
    fill: var(--dgm-muted);
}

.dgm-bt-unit {
    transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}

.dgm-bt-unit > g,
.dgm-bt-unit > circle,
.dgm-bt-unit > text {
    opacity: 0;
    transition: opacity .5s, fill .5s;
}

.dgm-bt-pic.is-docs .dgm-bt-card,
.dgm-bt-pic.is-strips .dgm-bt-strip,
.dgm-bt-pic:not(.is-docs):not(.is-strips) .dgm-bt-dot {
    opacity: 1;
}

.dgm-bt-card rect {
    fill: var(--dgm-bg);
    stroke: var(--dgm-line);
}

.dgm-bt-card line {
    stroke: var(--dgm-line);
    stroke-width: 2;
    stroke-linecap: round;
}

.dgm-bt-strip rect {
    fill: var(--dgm-blue);
}

.dgm-bt-dot {
    fill: var(--dgm-gray);
    stroke: var(--dgm-bg);
    stroke-width: 1.2;
}

.dgm-bt-pic.is-colored .dgm-bt-unit:not(.dgm-bt-outlier) .dgm-bt-dot {
    fill: var(--tone);
}

.dgm-bt-pic.is-colored .dgm-bt-outlier .dgm-bt-dot {
    fill: none;
    stroke: var(--dgm-gray);
    stroke-dasharray: 2 2;
}

.dgm-bt-pic.is-colored .dgm-bt-minus {
    opacity: 1;
}

.dgm-bt-minus {
    font-size: 9px;
    fill: var(--dgm-muted);
}

.dgm-bt-hull {
    fill: color-mix(in srgb, var(--tone) 9%, transparent);
    stroke: color-mix(in srgb, var(--tone) 40%, transparent);
    stroke-dasharray: 3 3;
    transition: opacity .6s;
}

.dgm-bt-words {
    transition: opacity .6s;
}

.dgm-bt-words rect {
    fill: color-mix(in srgb, var(--tone) 16%, var(--dgm-bg));
    stroke: var(--tone);
    stroke-width: .8;
}

.dgm-bt-words text {
    font-size: 10px;
    font-weight: 600;
    fill: var(--dgm-fg);
}

/* imbalance-ladder: vence o display/margem que o Material dá a todo <ol> */
.md-typeset ol.dgm-lad {
    display: grid;
    margin: 0;
}

@media screen and (max-width: 44.9375em) {
    .md-typeset ol.dgm-lad {
        grid-template-columns: 1fr;
    }
}

.dgm-bt-pic {
    max-height: 15rem;
}

/* ---- nested-cv (usa as células de cv-folds) ---- */
.dgm-ncv {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.dgm-ncv-outer {
    display: grid;
    grid-template-columns: 3.6rem repeat(5, minmax(0, 1fr)) 6.6rem 3rem;
    gap: .3rem;
    align-items: center;
}

.dgm-ncv-corner {
    text-align: left;
}

.dgm-ncv-win {
    font-size: .56rem !important;
    color: var(--dgm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .4s;
}

.dgm-ncv-panel {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .65rem .75rem;
    border: .05rem solid var(--dgm-faint);
    border-radius: .45rem;
    background: color-mix(in srgb, var(--dgm-faint) 30%, transparent);
    transition: opacity .4s;
}

.dgm-ncv-panel.is-idle {
    opacity: .55;
}

.dgm-ncv-ptitle {
    font-size: .64rem;
    font-weight: 600;
}

.dgm-ncv-phase {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    transition: opacity .45s, transform .45s;
}

.dgm-ncv-phase.is-hidden {
    transform: translateY(.3rem);
}

.dgm-ncv-plabel {
    font-size: .58rem;
    color: var(--dgm-muted);
}

.dgm-ncv-mini {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .15rem;
    max-width: 9rem;
}

.dgm-ncv-mini .dgm-cv-cell {
    height: .45rem;
    border-radius: .12rem;
}

.dgm-ncv-fam {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .15rem .45rem;
    border: .05rem solid transparent;
    border-radius: .3rem;
    font-size: .6rem;
    transition: border-color .4s, background-color .4s;
}

.dgm-ncv-fam code {
    font-size: .58rem !important;
}

.dgm-ncv-n {
    color: var(--dgm-muted);
}

.dgm-ncv-best {
    margin-left: auto;
    font-size: .55rem;
    font-weight: 700;
    color: var(--dgm-blue);
    opacity: 0;
    transition: opacity .4s;
}

.dgm-ncv-fam.is-winner {
    border-color: var(--dgm-blue);
    background: color-mix(in srgb, var(--dgm-blue) 10%, transparent);
}

.dgm-ncv-fam.is-winner .dgm-ncv-best {
    opacity: 1;
}

.dgm-ncv-end {
    flex-direction: row;
    align-items: stretch;
}

.dgm-ncv-end > .dgm-node {
    flex: 1 1 0;
    justify-content: center;
    font-size: .6rem;
}

@media screen and (max-width: 44.9375em) {
    .dgm-ncv {
        grid-template-columns: minmax(0, 1fr);
    }

    .dgm-ncv-outer {
        grid-template-columns: 2.6rem repeat(5, minmax(0, 1fr)) 5.4rem 2.6rem;
        gap: .2rem;
    }

    /* a seta da linha refit → avaliação continua horizontal */
    .dgm-ncv-end .dgm-arrow {
        flex: 0 0 1.2rem;
        width: auto;
    }

    .dgm-ncv-end .dgm-arrow-line {
        width: 100%;
        height: .05rem;
    }

    .dgm-ncv-end .dgm-arrow-line::after {
        right: 0;
        left: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%) rotate(45deg);
    }
}

/* text-map: o rótulo da trilha fica por cima das curvas */
.dgm-tm-lane span {
    position: relative;
    z-index: 1;
    padding: 0 .2rem;
    background: var(--dgm-bg);
}

/* ---- quebra de palavras: hifeniza (pela língua da página) antes de cortar ---- */
.dgm-node,
.dgm-node-title,
.dgm-node-sub {
    hyphens: auto;
}

.dgm-bt-flow > .dgm-node:first-child {
    flex: 0 0 auto;
}

.dgm-bt-flow > .dgm-node {
    padding: .5em .6em;
}