/* Shrnutí, názorné příklady, přehledy a závěrečné odkazy poradny. */
:root {
    --vp-panel-green: #173f32;
    --vp-panel-line: #d4e1d8;
    --vp-panel-soft: #f1f5f2;
    --vp-panel-total: #e3efe7;
    --vp-panel-pad: clamp(16px, 2.2vw, 24px);
    --vp-panel-radius: 14px;
}

@media screen {
    .page-inner main :is(.vp-art-summary, .vp-answer, .vp-info-panel, .vp-callout--model) {
        min-width: 0;
        border: 1px solid var(--vp-panel-line);
        border-radius: var(--vp-panel-radius);
        background: #fff;
    }

    .page-inner main :is(.vp-art-summary, .vp-answer, .vp-callout--model, .vp-info-model) {
        padding: 0 var(--vp-panel-pad) var(--vp-panel-pad);
    }

    .page-inner main .vp-art-head:has(> .vp-art-summary) {
        margin-bottom: clamp(28px, 4vw, 44px);
    }

    .page-inner main :is(.vp-info-heading, .vp-art-summary-title, .vp-answer-title, .vp-callout--model > .vp-callout-title) {
        padding: 12px var(--vp-panel-pad);
        border-radius: calc(var(--vp-panel-radius) - 1px) calc(var(--vp-panel-radius) - 1px) 0 0;
        background: var(--vp-panel-green);
        color: #fff;
        font-size: clamp(1.0625rem, 1rem + .45vw, 1.375rem);
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -.015em;
        overflow-wrap: anywhere;
    }

    .page-inner main :is(.vp-art-summary-title, .vp-answer-title),
    .page-inner main .vp-info-model > .vp-info-heading {
        margin: 0 calc(-1 * var(--vp-panel-pad)) 16px;
    }

    .page-inner main .vp-callout--model > .vp-callout-title {
        margin: 0 calc(-1 * var(--vp-panel-pad)) 16px !important;
    }

    .page-inner main :is(.vp-art-summary-title, .vp-answer-title) {
        font-size: 1.0625rem;
    }

    .page-inner main .vp-info-panel .vp-info-heading > h3 {
        margin: 0;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .page-inner main .vp-info-panel .vp-info-heading > p {
        margin: 0 0 4px;
        color: inherit;
        font-size: .8125rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0;
        text-transform: none;
    }

    .page-inner main .vp-info-model > p:last-child {
        margin-bottom: 0;
    }

    .page-inner main .vp-info-panel > figcaption.vp-info-heading {
        margin: 0;
    }

    .page-inner main .vp-info-panel > .pd-sheet-top.vp-info-heading {
        border-bottom: 0;
    }

    .page-inner main .vp-info-heading .pd-sheet-title {
        color: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    .page-inner main :is(.vp-table-wrap, .sx-table-wrap, .ab-table-wrap, .v08-table-wrap, .v10-table-wrap, .v11-table-wrap) {
        border-color: var(--vp-panel-line);
        background: #fff;
    }

    .page-inner main .vp-table-wrap > .vp-table thead th,
    .page-inner main .vp-info-model .vp-table caption:not(.vr-sr-only),
    .page-inner main .vp-info-model .v11-compare thead th {
        background: var(--vp-panel-soft);
        color: #34473e;
        white-space: normal;
    }

    .page-inner main .vp-table-wrap > .vp-table:not(:where(.vp-info-model .vp-table)) caption:not(.vr-sr-only),
    .page-inner main .vp-table-wrap > .vp-table:not(:where(:has(caption:not(.vr-sr-only)), .vp-info-model .vp-table)) thead th,
    .page-inner main :is(.sx-table, .ab-table, .v08-table, .v10-table, .v11-table) thead th {
        background: var(--vp-panel-green);
        color: #fff;
        white-space: normal;
    }

    .page-inner main :is(.vp-table tr.total, .v11-compare tr.v11-compare-total, .d02-ledger .d02-ledger-total, .vp-info-model .pd-sheet-table tfoot tr) {
        background: var(--vp-panel-total);
    }

    .page-inner main .vp-info-model .vp-table-wrap {
        border-color: var(--vp-panel-line);
        background: #fff;
    }

    .page-inner main .vp-info-model .vp-table tr.total :is(th, td) {
        border-top: 0;
        color: var(--vp-panel-green);
    }

    .page-inner main .vp-next {
        padding: var(--vp-panel-pad);
        border-radius: var(--vp-panel-radius);
        background: var(--vp-panel-green);
        color: #fff;
        box-shadow: none;
    }

    .page-inner main .vp-next p {
        margin: 0 0 14px;
        color: inherit;
    }

    .page-inner main .vp-next .vp-next-title {
        margin-bottom: 6px;
        font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
        font-weight: 600;
        line-height: 1.35;
    }

    .page-inner main .vp-next p a,
    .page-inner main .vp-next p a:hover {
        color: #fff;
        text-decoration-color: currentColor;
    }

    .page-inner main .vp-next > .vr-link {
        justify-content: space-between;
        max-width: 100%;
        padding: 8px 14px;
        border-radius: 8px;
        background: #fff;
        color: var(--vp-panel-green);
        font-weight: 600;
        line-height: 1.35;
    }

    .page-inner main .vp-next > .vr-link:hover {
        background: var(--vp-panel-total);
        color: var(--vp-panel-green);
    }

    .page-inner main .vp-next :focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }
}

/* Čtecí stránky a poradna sdílejí rozměry sloupců, navigaci a bloky. */
@media screen {
    main .vp-layout-reading .vp-head-grid,
    main .vp-page :is(.vp-art, .vp-read-grid.has-toc) {
        max-width: 1120px;
    }

    main .vp-page :is(.vp-art, .vp-read-grid.has-toc) {
        grid-template-columns: minmax(0, 44rem) 18.5rem;
        justify-content: space-between;
        gap: 0 clamp(40px, 5vw, 72px);
    }

    main .vp-read-grid.has-toc .vp-read-main {
        max-width: 44rem;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-toc--aside {
        max-height: calc(100vh - var(--vp-header) - 48px);
        max-height: calc(100dvh - var(--vp-header) - 48px);
        overflow-y: auto;
        scrollbar-width: thin;
        padding: 18px 20px 14px;
        border: 1px solid var(--vr-line);
        border-radius: 16px;
        background: #fff;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-toc--aside .vp-toc-title {
        margin: 0 0 6px;
        color: #142431;
        font-size: 14px;
        font-weight: 600;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-toc--aside a {
        padding: 5px 8px;
        margin: 0 -8px;
        border-radius: 8px;
        font-size: 14.5px;
        line-height: 1.42;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-toc--aside a:hover {
        color: #004048;
        background: #ecf1f3;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-toc--aside a.is-active {
        color: #004048;
        font-weight: 600;
        background: #e7edee;
        box-shadow: none;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) :is(.vp-art-summary, .vp-answer) {
        padding: var(--vp-panel-pad);
        border: 0;
        border-left: 3px solid #3d5358;
        border-radius: 0 var(--vp-panel-radius) var(--vp-panel-radius) 0;
        background: #eef2f2;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) :is(.vp-art-summary-title, .vp-answer-title) {
        margin: 0 0 9px;
        padding: 0;
        background: transparent;
        color: #2e414a;
        font-size: 1.125rem;
        line-height: 1.35;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) :is(.vp-art-summary-text, .vp-answer-text) p {
        line-height: 1.7;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) :is(.vp-check-panel, .vp-checklist) {
        margin: 22px 0;
        border: 1px solid var(--vp-panel-line);
        border-radius: var(--vp-panel-radius);
        background: #fff;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-check-panel {
        padding: var(--vp-panel-pad) var(--vp-panel-pad) 4px;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-check-panel h3 {
        margin: 0 0 6px;
        color: var(--vp-panel-green);
        font-size: 1.125rem;
        font-weight: 600;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-checklist {
        padding: 4px var(--vp-panel-pad) !important;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-check-panel .vp-checklist {
        margin: 0;
        padding: 0 !important;
        border: 0;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-checklist > li {
        padding: 11px 0 11px 36px !important;
        border: 0;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-checklist > li + li {
        border-top: 1px solid var(--vp-panel-line);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-checklist > li::before {
        top: 12px;
        width: 23px;
        height: 23px;
        border-radius: 50%;
        background-color: var(--vp-panel-total);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-check-panel li > p {
        margin: 2px 0 0;
        color: var(--vr-text-muted);
        line-height: 1.55;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) :is(.vp-formula, .vp-calculation) {
        margin: 24px 0;
        border: 1px solid var(--vp-panel-line);
        border-radius: var(--vp-panel-radius);
        background: var(--vp-panel-soft);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-calculation {
        padding: var(--vp-panel-pad);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-calculation > :is(h3, .vp-callout-title) {
        color: var(--vp-panel-green);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-calculation > :last-child {
        margin-bottom: 0;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-terms {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.2fr) 26px minmax(0, 1.2fr);
        padding: var(--vp-panel-pad);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-term {
        display: grid;
        min-height: 50px;
        padding: 7px 9px;
        place-items: center;
        border: 1px solid var(--vp-panel-line);
        border-radius: 8px;
        background: #fff;
        font-size: 1rem;
        font-weight: 550;
        line-height: 1.4;
        text-align: center;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-operator {
        display: grid;
        place-items: center;
        color: var(--vp-panel-green);
        font-size: 1.25rem;
        font-weight: 600;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-result {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px var(--vp-panel-pad);
        border-top: 1px solid var(--vp-panel-line);
        border-radius: 0 0 calc(var(--vp-panel-radius) - 1px) calc(var(--vp-panel-radius) - 1px);
        background: var(--vp-panel-total);
        color: var(--vp-panel-green);
        line-height: 1.4;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-result .vp-formula-operator {
        flex: 0 0 20px;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) :is(.vp-info-model, .vp-callout--model) {
        margin-block: 24px;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-table-wrap {
        margin-block: 24px;
        border-radius: var(--vp-panel-radius);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-table-wrap .vp-table tbody tr:nth-child(even):not(.total) {
        background: var(--vp-panel-soft);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-dl > div {
        border-color: var(--vp-panel-line);
        border-style: solid;
        border-width: 1px 0 0;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-dl > div:last-child {
        border-bottom: 1px solid var(--vp-panel-line);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-conditions > div {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 6px 18px;
        padding: 11px 0;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-conditions dt {
        color: var(--vp-panel-green);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-conditions :is(dt, dd) {
        font-size: 1rem;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-article-link {
        display: inline-flex;
        align-items: center;
        gap: 13px;
        max-width: 100%;
        min-height: 44px;
        padding: 9px 14px;
        border-radius: 8px;
        background: var(--vp-panel-green);
        color: #fff;
        font-size: .9375rem;
        font-weight: 600;
        line-height: 1.35;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-article-link::after {
        content: "";
        flex: 0 0 16px;
        height: 16px;
        background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11m-4-4 4 4-4 4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-article-link:hover {
        background: #102e24;
        color: #fff;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-article-link:focus-visible {
        outline: 2px solid var(--vp-panel-green);
        outline-offset: 3px;
    }

    @media (min-width: 768px) {
        main :is(.vp-art, .vp-read-grid.has-toc) .vp-table-wrap .vp-table :is(th, td) {
            padding: 12px 16px;
        }
    }

    main .vp-art .a06-model .vp-table-wrap {
        margin: 17px calc(-1 * var(--vp-panel-pad)) 14px;
        max-width: none;
        border-width: 1px 0;
        border-radius: 0;
    }

    main .vp-art .a06-model .vp-table-wrap > .a06-numbers {
        font-variant-numeric: tabular-nums;
    }

    main .vp-art .a06-model .vp-table-wrap .a06-numbers :is(th, td) {
        padding: 11px var(--vp-panel-pad);
    }

    main .vp-art .a06-numbers th:first-child {
        width: 43%;
        min-width: 0;
    }

    main .vp-art .a06-numbers tr.total :is(th, td) {
        border-top: 1px solid var(--vp-panel-line);
    }

    main .vp-art .vp-mobile-offer {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    main .vp-layout-reading .vp-head-grid,
    main .vp-page :is(.vp-art, .vp-read-grid.has-toc) {
        max-width: 760px;
    }

    main .vp-page :is(.vp-art, .vp-read-grid.has-toc) {
        grid-template-columns: minmax(0, 1fr);
    }

    main .vp-read-grid.has-toc .vp-read-main {
        max-width: none;
    }
}

@media screen and (max-width: 767px) {
    main :is(.vp-art, .vp-read-grid.has-toc) .vp-table--stack tbody tr {
        padding: 14px var(--vp-panel-pad);
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-conditions > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    main .vp-art .vp-table-wrap .a06-numbers tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 12px;
        padding: 10px var(--vp-panel-pad);
        border-color: var(--vp-panel-line);
    }

    main .vp-art .a06-numbers tbody th:first-child {
        grid-column: 1 / -1;
        width: auto;
        margin: 0;
        font-size: .9375rem;
    }

    main .vp-art .vp-table-wrap .a06-numbers tbody :is(th, td) {
        margin: 0;
        padding: 0;
        border: 0;
        text-align: left;
    }

    main .vp-art .a06-numbers tr.total :is(th, td) {
        border: 0;
    }

    main .vp-art .vp-mobile-offer {
        display: block;
        color: var(--vr-text-muted);
        font-size: .75rem;
        font-weight: 550;
    }
}

@media screen and (max-width: 600px) {
    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-terms {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 6px 0;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-term:first-child {
        grid-column: 2;
    }

    main :is(.vp-art, .vp-read-grid.has-toc) .vp-formula-term {
        min-height: 40px;
        place-items: center start;
        text-align: left;
    }
}