/* Ajustes do catálogo de componentes; não altera as páginas de trabalho. */
:root {
    --brand-blue: var(--blue);
    --brand-sky: var(--blue-bright);
    --brand-green: var(--green);
    --brand-lime: var(--lime)
}

[data-theme=dark] {
    --brand-blue: var(--blue);
    --brand-sky: var(--blue-bright);
    --brand-green: var(--green);
    --brand-lime: var(--lime)
}

.sg-toolbar {
    padding-block: 24px
}

.sg-toolbar .field {
    max-width: 760px
}

.sg-toolbar #search-status {
    margin-top: 12px;
    color: var(--muted)
}

.toc {
    top: calc(var(--shell-height) + 16px);
    max-height: calc(100dvh - var(--shell-height) - 32px)
}

.toc a {
    min-height: 36px;
    display: flex;
    align-items: center
}

.section {
    scroll-margin-top: calc(var(--shell-height) + 20px)
}

.section .btn {
    min-height: 48px;
    touch-action: manipulation
}

.section .input,
.sg-toolbar .input {
    font-size: 16px;
    min-height: 48px
}

.section .control-line {
    min-height: 44px;
    align-items: center
}

.section .control-line label {
    padding: 8px 0
}

.section .control-line input {
    width: 24px;
    height: 24px;
    margin: 0
}

.section .btn-primary {
    color: var(--surface);
    background: var(--blue)
}

.section .btn-primary:hover {
    color: var(--surface);
    background: var(--blue-bright)
}

.switch {
    height: 48px;
    min-width: 58px
}

.switch::after {
    height: 28px;
    width: 28px;
    margin-left: 5px
}

.switch[aria-checked=true]::after {
    transform: translateX(20px)
}

.dismiss {
    width: 44px;
    height: 44px;
    top: 2px;
    right: 2px
}

.alert {
    padding-right: 54px
}

.chart-bar {
    display: block;
    min-width: 0
}

.chart-track {
    display: block
}

.progress>span {
    width: 60%
}

.table-wrap th,
.table-wrap td {
    white-space: normal;
    overflow-wrap: anywhere
}

.table-wrap caption {
    padding: 12px;
    text-align: left
}

.table-wrap th button {
    min-height: 44px;
    text-align: left
}

.sg-contract {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(0, 4fr);
    gap: 18px 24px;
    margin: 24px 0
}

.sg-contract dt {
    font-weight: 700;
    color: var(--ink)
}

.sg-contract dd {
    margin: 0;
    overflow-wrap: anywhere
}

.section code {
    overflow-wrap: anywhere
}

.section pre code {
    overflow-wrap: normal
}

.section details {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-block: 16px
}

.section summary {
    font-weight: 650;
    cursor: pointer;
    padding-block: 6px;
    min-height: 44px
}

.section summary:focus-visible {
    outline: 3px solid var(--blue-bright)
}

.sg-inventory-row {
    border-bottom: 1px solid var(--line);
    padding: 16px 0
}

.sg-inventory-row h3 {
    font-size: 1rem
}

.sg-inventory-row p:last-child {
    margin-bottom: 0
}

.sg-inventory-row .small {
    line-height: 1.8
}

.sg-code-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px
}

.sg-copy-status {
    color: var(--muted);
    font-size: 12px
}

.sg-code-actions .btn {
    min-height: 44px
}

.sg-code-selected {
    outline: 2px solid var(--blue-bright)
}

#equation-result {
    display: block;
    margin-top: 16px;
    font-weight: 700
}

#equation-demo input[aria-invalid=true] {
    border-color: #b42318
}

#equation-demo {
    margin-top: 20px
}

#id-error {
    color: #b42318
}

[data-theme=dark] #id-error {
    color: #ffaaa2
}

.logo-wordmark span {
    color: var(--green)
}

.svg-definitions {
    display: none
}

.site-footer {
    margin-top: 0
}

img {
    height: auto
}

.shell-brand img {
    height: 48px
}

.technical-figure img {
    height: auto
}

.section[hidden],
.sg-inventory-row[hidden] {
    display: none !important
}

@media(max-width:900px) {
    .toc {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        white-space: normal;
        max-height: 330px;
        overflow: auto
    }

    .toc a {
        min-height: 44px
    }

    .toc-title {
        display: block;
        grid-column: 1/-1
    }
}

@media(max-width:620px) {
    .sg-contract {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px
    }

    .sg-contract dd {
        margin-bottom: 16px
    }

    .sg-toolbar .button-row>.btn {
        flex: 1 1 160px
    }

    .toc {
        grid-template-columns: minmax(0, 1fr);
        max-height: 250px
    }

    .technical-table {
        font-size: 14px
    }

    .chart-row {
        grid-template-columns: minmax(70px, 1fr) minmax(50px, 2fr) 34px
    }

    .section .grid {
        min-width: 0
    }

    .section h2 {
        overflow-wrap: anywhere
    }

    .shell-brand img {
        height: 40px
    }
}

@media print {
    html {
        scroll-padding: 0
    }

    body {
        min-width: 0;
        background: #fff;
        color: #111;
        font: 10pt/1.5 Arial, sans-serif
    }

    .toc,
    .sg-toolbar,
    .site-page-actions,
    .sg-code-actions,
    .site-top,
    .hero-tags,
    .section form,
    .section .button-row,
    .section .button-row+p[role=status] {
        display: none !important
    }

    .wrap {
        width: auto;
        max-width: none
    }

    .layout {
        display: block;
        padding: 0
    }

    .hero {
        background: #fff;
        padding: 0 0 20px
    }

    .hero h1 {
        font-size: 22pt
    }

    .section {
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 18px;
        margin: 0 0 22px;
        break-inside: auto
    }

    .section[hidden] {
        display: block !important
    }

    .section-head {
        break-after: avoid
    }

    .section-head h2 {
        font-size: 16pt
    }

    .section-head .section-number {
        color: #111;
        background: #eee
    }

    .section details {
        border: 0;
        padding: 0
    }

    .section pre {
        white-space: pre-wrap;
        overflow: visible;
        overflow-wrap: anywhere;
        font-size: 8pt
    }

    .section pre code {
        overflow-wrap: anywhere
    }

    .grid.two,
    .grid.three,
    .grid.four {
        grid-template-columns: 1fr
    }

    .table-wrap {
        overflow: visible
    }

    .table-wrap table {
        table-layout: fixed;
        font-size: 9pt
    }

    .table-wrap tr {
        break-inside: avoid
    }

    .table-wrap thead {
        display: table-header-group
    }

    .sg-contract {
        display: block
    }

    .sg-contract dt {
        margin-top: 12px
    }

    .sg-contract dd {
        margin: 6px 0
    }

    .badge {
        border: 1px solid #777;
        background: #fff !important;
        color: #111 !important
    }

    .chart {
        break-inside: avoid
    }

    .sg-inventory-row {
        break-inside: avoid
    }

    .technical-source {
        color: #333
    }

    @page {
        size: A4;
        margin: 16mm
    }
}