/* ==========================================================================
   xldomein.com — Mijn account (klantenportaal)
   Bouwt op style.css (tokens, glas, knoppen, formulieren, badges). Opbouw:
   1 tokens en basis · 2 opbouw · 3 zijmenu · 4 mobiel menu · 5 kaarten, rasters, tegels · 6 lijsten en tabellen ·
   7 meldingen, banners, "nog niet zelf te doen", controlepaneel · 8 formulieren · 9 sleutel/waarde en kopiëren ·
   10 tijdlijn en berichten · 11 lege staten · 12 inloggen en beveiliging · 13–18 per onderdeel (alleen kleine
   aanpassingen) · 19 beweging · 20 minder beweging en print.
   Pagina's van alle onderdelen moeten werken met de secties 1–12 alleen.
   ========================================================================== */

/* == 1. Tokens en basis == */

:root {
    --pt-side: 264px;
    --pt-gap: clamp(1rem, 2vw, 1.35rem);
    --pt-card-bg: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .028));
    --pt-panel: linear-gradient(180deg, #161b28, #0d111a); /* dekkend: voor lagen boven de pagina */
}

.badge--bad { background: rgba(255, 107, 125, .12); color: var(--bad); }

.alert--ok { background: rgba(93, 242, 164, .07); box-shadow: inset 0 0 0 1px rgba(93, 242, 164, .32); }
.alert--ok .icon { color: var(--ok); }
.alert--warn { background: rgba(255, 207, 107, .07); box-shadow: inset 0 0 0 1px rgba(255, 207, 107, .35); }
.alert--warn .icon { color: var(--warn); }
.alert--info { background: rgba(118, 182, 255, .07); box-shadow: inset 0 0 0 1px rgba(118, 182, 255, .32); }
.alert--info .icon { color: var(--sky); }
.alert .icon { flex: none; margin-top: .1rem; }
.alert__body p { overflow-wrap: anywhere; }

.pt-note { font-size: .88rem; color: var(--text-2); }
.pt-muted { color: var(--text-2); }
.pt-mono { font-family: var(--f-mono); font-size: .86em; overflow-wrap: anywhere; }
.pt-link { color: var(--text); text-decoration-color: var(--volt); text-underline-offset: 3px; }
.pt-link:hover { color: #fff; }
.pt-main a:not([class]) { color: var(--text); text-decoration-color: rgba(216, 255, 69, .7); text-underline-offset: 3px; }

/* == 2. Opbouw (shell) == */

/* Groot scherm: zijmenu links over de volle hoogte, kop en inhoud rechts. Geen transform, filter of .reveal op .pt of
   een voorouder van het blad onderin (dat staat position: fixed). */
.pt {
    display: grid;
    grid-template-columns: var(--pt-side) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "side head" "side main";
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    min-height: 70vh;
    padding: calc(var(--nav-h) + 40px) 0 clamp(3rem, 6vw, 5rem);
}
.pt-head {
    grid-area: head;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: clamp(1.2rem, 2.4vw, 1.75rem);
    min-width: 0;
}
.pt-head__text { min-width: 0; max-width: 48rem; }
.pt-head .eyebrow { margin-bottom: .75rem; }
.pt-head h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; overflow-wrap: anywhere; }
.pt-lead { margin-top: .6rem; max-width: 46rem; color: var(--text-2); }
.pt-head__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.pt-main { grid-area: main; display: grid; gap: var(--pt-gap); align-content: start; min-width: 0; }
.pt-main > .alert, .pt-main .pt-card > .alert:last-child { margin-bottom: 0; }
.pt-section-title { margin: .6rem 0 -.2rem; font: 400 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }

/* == 3. Zijmenu == */

/* Het menu scrolt binnen het zijmenu als het scherm laag is; de voet (naam, Uitloggen) blijft altijd zichtbaar. */
.pt-side {
    grid-area: side;
    position: sticky; top: calc(var(--nav-h) + 28px);
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--nav-h) - 56px);
    overflow: hidden;
    padding: .7rem;
    border-radius: var(--r-xl);
}
.pt-side__group { margin: 1rem .75rem .4rem; font: 400 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pt-side__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pt-side__link {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    min-height: 42px; padding: .45rem .75rem;
    border-radius: 12px;
    color: var(--text-2); font-size: .93rem; text-decoration: none;
    transition: background .2s, color .2s;
}
.pt-side__link .icon { width: 18px; height: 18px; color: var(--muted); transition: color .2s, translate .35s var(--ease-spring); }
.pt-side__link:hover { background: var(--surface); color: var(--text); }
.pt-side__link:hover .icon { color: var(--text-2); translate: 1px 0; }
.pt-side__link.is-active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.pt-side__link.is-active .icon { color: var(--volt); }
/* Gedimd zolang tweestapsverificatie verplicht is en nog uit staat (portal_nav_link(): geen link, aria-disabled). */
.pt-side__link.is-locked, .pt-strip__link.is-locked, .pt-sheet__link.is-locked { opacity: .42; cursor: not-allowed; }
.pt-side__link.is-locked:hover, .pt-strip__link.is-locked:hover, .pt-sheet__link.is-locked:hover { background: none; color: var(--text-2); }
.pt-side__link.is-locked:hover .icon { color: var(--muted); translate: 0 0; }
.pt-side__link.is-active::before { content: ""; position: absolute; left: -.7rem; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--volt); }
.pt-count {
    margin-left: auto; min-width: 22px; padding: .12rem .45rem;
    border-radius: 999px;
    background: rgba(216, 255, 69, .14); color: var(--volt);
    font: 600 .7rem/1.35 var(--f-body); text-align: center;
}
.pt-side__foot {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem .7rem; flex: none;
    margin-top: auto; padding: 1rem .6rem .35rem;
    border-top: 1px solid var(--line);
}
/* Scrolgebied over de volle breedte (negatieve marge + gelijke opvulling), zodat het volt streepje van het actieve item niet wordt afgesneden. */
.pt-side__nav {
    flex: 0 1 auto; min-height: 0;
    margin: -.7rem -.7rem 0; padding: .7rem .7rem 1rem;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
}
@media (min-width: 1001px) and (max-height: 760px) {
    .pt-side__list { gap: 1px; }
    .pt-side__link { min-height: 40px; padding-block: .3rem; }
    .pt-side__group { margin: .5rem .75rem .3rem; }
    .pt-side__nav { padding-bottom: .3rem; }
    .pt-side__foot { gap: .3rem .7rem; padding: .6rem .6rem .15rem; }
}
.pt-side__who { display: grid; min-width: 0; }
.pt-side__who b, .pt-sheet__who b { overflow: hidden; font-weight: 500; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.pt-side__who small, .pt-sheet__who small { overflow: hidden; color: var(--text-2); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.pt-side__logout { grid-column: 1 / -1; }
.pt-side__logout button {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 40px; padding: 0 .15rem;
    border: 0; background: none; cursor: pointer;
    color: var(--text-2); font-size: .88rem;
    transition: color .2s;
}
.pt-side__logout button:hover { color: var(--text); }
.pt-side__logout .icon { width: 16px; height: 16px; }
.pt-avatar {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .45);
    color: var(--volt);
    font: 600 .74rem/1 var(--f-body); letter-spacing: .02em;
}

/* == 4. Mobiel menu (strip, Meer en blad) == */

.pt-nav-m, .pt-more { display: none; }
.pt-sheet { display: none; }
.pt-strip {
    display: flex; gap: 4px;
    padding: 4px;
    overflow-x: auto; overscroll-behavior-x: contain;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.pt-strip::-webkit-scrollbar { display: none; }
/* Tellers hebben een sr-only-tekst (position: absolute): die blijft binnen de scroller en de link. Anders ligt zijn bevattende
   blok buiten de strook en rekt hij op 375 px de hele pagina op (horizontaal scrollen zodra een item een teller heeft). */
.pt-strip, .pt-strip__link { position: relative; }
/* Past alles (portal.js zet .is-fit), dan geen vervaagde rand en geen extra ruimte aan het eind. */
.pt-strip.is-fit { -webkit-mask-image: none; mask-image: none; }
.pt-strip.is-fit .pt-strip__link:last-child { margin-right: 0; }
.pt-strip__link {
    flex: none;
    display: inline-flex; align-items: center; gap: .45rem;
    height: 40px; padding: 0 .95rem;
    border-radius: 999px;
    color: var(--text-2); font-size: .88rem; white-space: nowrap; text-decoration: none;
    scroll-snap-align: start;
    transition: background .2s, color .2s;
}
.pt-strip__link:last-child { margin-right: 24px; }
.pt-strip__link .icon { width: 16px; height: 16px; }
.pt-strip__link:hover { color: var(--text); background: var(--surface-2); }
.pt-strip__link.is-active { background: var(--volt); color: var(--volt-ink); font-weight: 600; }
.pt-strip__link.is-active .pt-count { background: rgba(13, 20, 0, .14); color: var(--volt-ink); }
.pt-strip__link .pt-count { margin-left: .1rem; }

.pt-more > summary {
    position: relative;
    display: inline-flex; align-items: center; gap: .35rem;
    height: 48px; padding: 0 .9rem 0 1.05rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2); font-size: .88rem; font-weight: 500;
    list-style: none; cursor: pointer; user-select: none;
    transition: background .2s, color .2s;
}
.pt-more > summary::-webkit-details-marker { display: none; }
.pt-more > summary:hover, .pt-more[open] > summary { color: var(--text); background: var(--surface-2); }
.pt-more.is-active > summary { color: var(--volt); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .45); }
.pt-more__chev { width: 16px; height: 16px; rotate: 180deg; transition: rotate .3s var(--ease); }
.pt-more[open] .pt-more__chev { rotate: 0deg; }

.pt-sheet__inner {
    display: grid; gap: .25rem;
    width: min(100%, 560px); max-height: min(75vh, 560px);
    margin: 0 auto; padding: .6rem;
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 22px;
    background: var(--pt-panel);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 -24px 60px -12px rgba(0, 0, 0, .85);
}
.pt-sheet__head { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem .8rem; border-bottom: 1px solid var(--line); }
.pt-sheet__who { display: grid; flex: 1; min-width: 0; }
.pt-sheet__close {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: var(--surface-2); color: var(--text-2);
    cursor: pointer;
}
.pt-sheet__close:hover { color: var(--text); }
.pt-sheet__list { display: grid; gap: 2px; margin: .3rem 0 0; padding: 0; list-style: none; }
.pt-sheet__link, .pt-sheet__logout button {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    min-height: 50px; padding: 0 .8rem;
    border: 0; border-radius: 14px;
    background: none; color: var(--text); font-size: 1rem; text-align: left; text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}
.pt-sheet__link .icon, .pt-sheet__logout .icon { width: 20px; height: 20px; color: var(--text-2); }
.pt-sheet__link:hover, .pt-sheet__logout button:hover { background: var(--surface-2); }
.pt-sheet__link.is-active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pt-sheet__link.is-active .icon { color: var(--volt); }
.pt-sheet__logout { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
    .pt {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "head head" "strip more" "main main";
        column-gap: .5rem;
        padding-top: calc(var(--nav-h) + 30px);
    }
    .pt-head { margin-bottom: 1rem; }
    .pt-side { display: none; }
    .pt-nav-m { display: block; grid-area: strip; min-width: 0; align-self: center; }
    .pt-more { display: block; grid-area: more; align-self: center; }
    .pt-main { margin-top: 1.1rem; }
    /* Het blad: vast onderin het scherm, boven een donkere laag; "Meer" blijft erboven bereikbaar om te sluiten. Alleen
       zolang het blad open is ligt "Meer" boven de pagina (z-index 96); dicht blijft hij gewoon in de pagina, onder het
       menu van de site (.menu, z-index 90). Staat dat menu open (body.menu-open), dan is het portaalmenu er even niet. */
    .pt-more[open] > summary { z-index: 96; }
    .pt-more[open]::before { content: ""; position: fixed; inset: 0; z-index: 94; background: rgba(5, 7, 12, .6); }
    body.menu-open .pt-nav-m, body.menu-open .pt-more, body.menu-open .pt-sheet { visibility: hidden; }
    .pt-more[open] ~ .pt-sheet {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
        padding: 0 8px calc(8px + env(safe-area-inset-bottom));
        animation: pt-sheet-in .38s var(--ease) both;
    }
}
@media (min-width: 700px) and (max-width: 1000px) {
    .pt-strip__link { gap: .35rem; padding: 0 .6rem; } /* tablet: de zes onderdelen passen zonder te scrollen */
}
@media (max-width: 420px) {
    .pt-strip__link { padding: 0 .8rem; }
    .pt-more > summary { padding: 0 .75rem 0 .9rem; }
}

/* == 5. Kaarten, rasters, tegels == */

.pt-card { position: relative; min-width: 0; padding: clamp(1.1rem, 2.5vw, 1.6rem); border-radius: var(--r-xl); }
.pt-card:not(.glass) { background: var(--pt-card-bg); box-shadow: inset 0 0 0 1px var(--line); }
.pt-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; }
.pt-card__head h2 { font-size: clamp(1.02rem, 1.6vw, 1.18rem); letter-spacing: -.02em; }
.pt-card__head h2 small { display: block; margin-top: .35rem; font: 400 .86rem var(--f-body); letter-spacing: 0; color: var(--text-2); }
.pt-card__head .pt-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pt-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.pt-card > p + p { margin-top: .6rem; }
.pt-card > p { color: var(--text-2); }

.pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--pt-gap); }
.pt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* tegels: 4 naast elkaar, smaller 2 × 2 */
@media (max-width: 1100px) { .pt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .pt-grid--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 340px) { .pt-grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* Tegels op het overzicht: op een smal scherm twee naast elkaar; een oneven laatste tegel over de hele breedte (anders staat
   hij alleen op de laatste rij). */
@media (max-width: 560px) {
    .pt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .pt-tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.pt-stat {
    position: relative;
    display: grid; align-content: start; gap: .4rem;
    min-width: 0; padding: 1.1rem 1.2rem 1.2rem;
    border-radius: var(--r-lg);
    background: var(--pt-card-bg);
    box-shadow: inset 0 0 0 1px var(--line);
    text-decoration: none; color: inherit;
    transition: box-shadow .3s var(--ease), background .3s;
}
.pt-stat small { font: 400 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pt-stat b { font: 500 clamp(1.3rem, 2.2vw, 1.6rem)/1.1 var(--f-display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.pt-stat span { font-size: .86rem; color: var(--text-2); }
.pt-stat > .icon { position: absolute; top: 1rem; right: 1rem; width: 18px; height: 18px; color: var(--muted); transition: color .25s; }
a.pt-stat:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
a.pt-stat:hover > .icon { color: var(--volt); }

/* == 6. Lijsten en tabellen == */

.pt-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pt-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem;
    min-height: 56px; padding: .8rem .6rem;
    border-bottom: 1px solid var(--line);
    border-radius: 12px;
    color: inherit; text-decoration: none;
    transition: background .2s;
}
.pt-list > li:last-child > .pt-row, .pt-list > .pt-row:last-child { border-bottom: 0; }
a.pt-row:hover { background: var(--surface); }
.pt-row__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.pt-row__icon .icon { width: 18px; height: 18px; }
a.pt-row:hover .pt-row__icon { color: var(--volt); }
.pt-row__main { display: grid; gap: .15rem; min-width: 0; }
.pt-row__main b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pt-row__meta { color: var(--text-2); font-size: .86rem; overflow-wrap: anywhere; }
/* Lijsten waarin de titel het herkenningspunt is (Support, Meldingen): twee regels in plaats van één met een beletselteken. */
.pt-list--wrap .pt-row__main b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pt-row__chev { width: 18px; height: 18px; color: var(--muted); rotate: -90deg; transition: translate .3s var(--ease); }
a.pt-row:hover .pt-row__chev { translate: 3px 0; color: var(--text-2); }
@media (max-width: 560px) {
    .pt-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .8rem; }
    .pt-row > .badge { grid-column: 2; grid-row: 2; justify-self: start; }
    .pt-row__chev { grid-column: 3; grid-row: 1 / span 2; }
}

.pt-table-wrap { overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.pt-table th {
    padding: 0 .75rem .65rem;
    border-bottom: 1px solid var(--line-2);
    font: 400 .62rem var(--f-mono); letter-spacing: .1em; text-align: left; text-transform: uppercase; color: var(--text-2);
    white-space: nowrap;
}
.pt-table td { padding: .8rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pt-table th:first-child, .pt-table td:first-child { padding-left: 0; }
.pt-table th:last-child, .pt-table td:last-child { padding-right: 0; }
.pt-table tbody tr:last-child td { border-bottom: 0; }
.pt-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-table td small { display: block; color: var(--text-2); font-size: .82rem; }
.pt-table .pt-table__actions { text-align: right; white-space: nowrap; }
.pt-table .pt-table__actions .btn + .btn { margin-left: .35rem; }
@media (max-width: 700px) {
    .pt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pt-table, .pt-table tbody, .pt-table tr, .pt-table td { display: block; width: 100%; }
    .pt-table tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
    .pt-table tbody tr:last-child { border-bottom: 0; }
    /* Label zwevend links; de inhoud loopt er rechts naast door als gewone tekst (tekst, link en vet blijven één regel),
       een subregel (small) komt eronder. Geen flex of grid: die maken van elk stuk tekst en elk element een eigen kolom. */
    .pt-table td { display: flow-root; padding: .28rem 0; border: 0; text-align: right; overflow-wrap: break-word; }
    .pt-table td::before {
        content: attr(data-label); float: left; max-width: 48%;
        margin-right: 1rem; padding-top: .12em;
        color: var(--text-2); font-size: .82rem; text-align: left; overflow-wrap: normal;
    }
    .pt-table td:not([data-label])::before { content: none; }
    .pt-table th:first-child, .pt-table td:first-child { padding-left: 0; }
    .pt-table .pt-table__actions { padding-top: .55rem; white-space: normal; }
}

/* == 7. Meldingen, banners, "nog niet zelf te doen", controlepaneel == */

.pt-flash { margin-bottom: 0; }
.pt-banner {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem 1rem;
    border-radius: 14px;
    font-size: .88rem; color: var(--text-2);
}
.pt-banner .icon { width: 18px; height: 18px; flex: none; }
.pt-banner--dev { border: 1px dashed var(--line-2); font-family: var(--f-mono); font-size: .74rem; }
.pt-banner--dev .icon { color: var(--sky); }
.pt-banner--warn { background: rgba(255, 207, 107, .07); box-shadow: inset 0 0 0 1px rgba(255, 207, 107, .35); color: var(--text); }
.pt-banner--warn .icon { color: var(--warn); }

.pt-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font: 400 .6rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
    white-space: nowrap;
}
.pt-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pt-pill--volt { background: rgba(216, 255, 69, .08); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .4); color: var(--volt); }
.pt-pill--volt::before { background: var(--volt); }

.pt-later {
    display: grid; gap: .75rem;
    padding: clamp(1rem, 2.2vw, 1.35rem);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .018);
    scroll-margin-top: calc(var(--nav-h) + 30px);
}
.pt-later--paneel { border: 1px solid rgba(216, 255, 69, .42); background: rgba(216, 255, 69, .03); }
.pt-later__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.pt-later__head h2, .pt-later__head h3, .pt-later__head h4 { font: 600 1rem/1.3 var(--f-body); letter-spacing: -.01em; }
.pt-later__text { max-width: 44rem; color: var(--text-2); font-size: .93rem; }
.pt-later__sub { margin-top: .3rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 500; color: var(--text); }
.pt-later__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Lange aanvraagknoppen en labels lopen over twee regels in plaats van buiten hun kaart. */
.pt-later__actions .btn, .pt-actions-row .btn { white-space: normal; height: auto; min-height: var(--h); padding-block: .55rem; line-height: 1.25; text-align: left; }
.pt-later__head .pt-pill { white-space: normal; }
.pt-later__note { font-size: .86rem; color: var(--text-2); }

.pt-callout {
    padding: .9rem 1.1rem;
    border-left: 2px solid var(--volt);
    border-radius: 0 12px 12px 0;
    background: var(--surface);
    color: var(--text-2); font-size: .93rem;
}
.pt-callout--warn { border-left-color: var(--warn); background: rgba(255, 207, 107, .05); }
.pt-callout b, .pt-callout strong { color: var(--text); font-weight: 500; }
.pt-callout code { font-family: var(--f-mono); font-size: .82em; color: var(--text); overflow-wrap: anywhere; }

/* Waarschuwing vlak voor het automatisch uitloggen (portal.js). */
.pt-dialog {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 210;
    display: grid; gap: .8rem;
    width: min(400px, calc(100vw - 32px));
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: 18px;
    background: var(--pt-panel);
    box-shadow: inset 0 0 0 1px rgba(255, 207, 107, .4), 0 24px 50px -18px rgba(0, 0, 0, .85);
    animation: pt-rise .35s var(--ease) both;
}
.pt-dialog p { color: var(--text-2); font-size: .93rem; }
.pt-dialog b { color: var(--text); font-weight: 600; }
.pt-dialog__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 520px) { .pt-dialog { left: 16px; right: 16px; width: auto; } }

/* == 8. Formulieren == */

.pt-form { display: grid; gap: 1rem; }
.pt-form .form-grid { gap: 1rem; }
/* Velden naast elkaar blijven bovenaan uitgelijnd, ook als één ervan een hint of foutmelding krijgt. */
.pt-main .form-grid { align-items: start; }
.pt-main .field { align-content: start; }
.field input[type="url"], .field input[type="date"], .field input[type="search"] {
    width: 100%; min-height: 50px; padding: .8rem 1rem;
    border: 0; border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 1rem; color: var(--text);
    outline: 0; color-scheme: dark;
    transition: box-shadow .25s var(--ease), background .25s;
    -webkit-appearance: none; appearance: none;
}
.field input[type="url"]:focus, .field input[type="date"]:focus { background-color: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .6), 0 0 0 4px rgba(216, 255, 69, .07); }
.field.has-error input[type="url"], .field.has-error input[type="date"] { box-shadow: inset 0 0 0 1px rgba(255, 107, 125, .7); }
.field .is-mono, .field textarea.is-mono { font-family: var(--f-mono); font-size: .84rem; }
.pt-hint { font-size: .84rem; color: var(--text-2); }
.pt-errors:focus { outline: 2px solid rgba(255, 107, 125, .7); outline-offset: 3px; }
.pt-errors ul { margin-top: .35rem; }
.pt-errors a { color: var(--text); }
.pt-confirm { padding: .9rem 1rem; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pt-confirm.has-error { box-shadow: inset 0 0 0 1px rgba(255, 107, 125, .55); }
.pt-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .3rem; }
.pt-actions-row .pt-link { font-size: .92rem; }
input[readonly] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }

.pt-choices { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.pt-choices legend { margin-bottom: .45rem; padding: 0; }
.pt-choice {
    display: flex; align-items: center; gap: .7rem;
    min-height: 48px; padding: .65rem .9rem;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    cursor: pointer;
    transition: box-shadow .2s, background .2s, color .2s;
}
.pt-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--volt); }
.pt-choice:hover { background: var(--surface-2); }
.pt-choice:has(input:checked) { color: var(--text); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .55); }

.pt-mailbox { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: .5rem; }
.pt-mailbox__at { font: 500 1rem var(--f-mono); color: var(--text-2); }
@media (max-width: 520px) { .pt-mailbox { grid-template-columns: minmax(0, 1fr) auto; } .pt-mailbox select { grid-column: 1 / -1; } }
.pt-prefixed { display: flex; align-items: stretch; }
.pt-prefixed__p {
    display: flex; align-items: center;
    padding: 0 .85rem;
    border-radius: 12px 0 0 12px;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font: 400 .84rem var(--f-mono); color: var(--text-2);
    white-space: nowrap;
}
.pt-prefixed .pt-prefixed__p + input { border-radius: 0 12px 12px 0; }

.pt-pw { position: relative; }
.pt-pw input { padding-right: 6rem !important; }
.pt-pw__toggle {
    position: absolute; top: 50%; right: 5px; translate: 0 -50%;
    display: inline-flex; align-items: center; gap: .4rem;
    height: 40px; padding: 0 .85rem;
    border: 0; border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2); font-size: .82rem;
    cursor: pointer;
    transition: color .2s, background .2s;
}
.pt-pw__toggle:hover, .pt-pw__toggle.is-on { color: var(--text); background: rgba(255, 255, 255, .11); }
.pt-pw__toggle .icon { width: 16px; height: 16px; }
.pt-pw-count { font: 400 .72rem var(--f-mono); color: var(--text-2); }

/* == 9. Sleutel/waarde en kopiëren == */

.pt-kv { display: grid; margin: 0; }
.pt-kv__row {
    display: grid; grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr); align-items: center; gap: .3rem 1rem;
    min-height: 52px; padding: .55rem 0;
    border-bottom: 1px solid var(--line);
}
.pt-kv__row:last-child { border-bottom: 0; }
.pt-kv dt { font-size: .9rem; color: var(--text-2); }
.pt-kv dd { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; min-width: 0; }
.pt-kv__v { min-width: 0; font: 400 .86rem/1.5 var(--f-mono); overflow-wrap: anywhere; }
.pt-kv__v .badge, .pt-kv__v a { font-family: var(--f-body); }
@media (max-width: 520px) { .pt-kv__row { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

.pt-copy {
    position: relative;
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px;
    border: 0; border-radius: 11px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    cursor: pointer;
    transition: color .2s, background .2s, box-shadow .2s;
}
.pt-copy .icon { width: 17px; height: 17px; }
.pt-copy:hover { color: var(--text); background: var(--surface-2); }
.pt-copy.is-done { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(93, 242, 164, .45); }

/* == 10. Tijdlijn en berichten == */

.pt-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.pt-timeline > li { position: relative; padding: 0 0 1.25rem 1.7rem; }
.pt-timeline > li::before {
    content: ""; position: absolute; left: 0; top: .42rem;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--ink-2); box-shadow: inset 0 0 0 2px var(--muted);
}
.pt-timeline > li::after { content: ""; position: absolute; left: 5px; top: 1.15rem; bottom: .1rem; width: 1px; background: var(--line-2); }
.pt-timeline > li:last-child { padding-bottom: 0; }
.pt-timeline > li:last-child::after { display: none; }
.pt-timeline > li.is-volt::before { box-shadow: inset 0 0 0 2px var(--volt); }
.pt-timeline > li.is-ok::before { background: var(--ok); box-shadow: none; }
.pt-timeline > li.is-warn::before { box-shadow: inset 0 0 0 2px var(--warn); }
.pt-timeline > li.is-sky::before { box-shadow: inset 0 0 0 2px var(--sky); }
.pt-timeline > li.is-bad::before { box-shadow: inset 0 0 0 2px var(--bad); }
.pt-timeline__meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .84rem; color: var(--text-2); }
.pt-timeline__meta b { color: var(--text); font-weight: 500; }
.pt-timeline__note { margin-top: .35rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }

.pt-msgs { display: grid; gap: .8rem; }
.pt-msg { min-width: 0; padding: 1rem 1.15rem; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pt-msg--klant { margin-left: clamp(0px, 8%, 4rem); background: rgba(216, 255, 69, .045); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .22); }
.pt-msg--support { margin-right: clamp(0px, 8%, 4rem); }
.pt-msg--systeem { background: none; box-shadow: none; border: 1px dashed var(--line-2); }
.pt-msg__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .45rem; font-size: .84rem; color: var(--text-2); }
.pt-msg__head b { color: var(--text); font-weight: 500; }
.pt-msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-files { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.pt-files a {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 40px; padding: .35rem .8rem;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text); font-size: .86rem; text-decoration: none;
    overflow-wrap: anywhere;
}
.pt-files a .icon { width: 16px; height: 16px; color: var(--text-2); }
.pt-files small { color: var(--text-2); }

/* == 11. Lege staten == */

.pt-empty { display: grid; justify-items: center; gap: .65rem; padding: clamp(2rem, 5vw, 3.2rem) 1rem; text-align: center; }
.pt-empty__icon {
    display: grid; place-items: center;
    width: 64px; height: 64px; margin-bottom: .4rem;
    border-radius: 50%;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 8px rgba(255, 255, 255, .022);
    color: var(--volt);
}
.pt-empty__icon .icon { width: 26px; height: 26px; }
.pt-empty h2 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.pt-empty p { max-width: 34rem; color: var(--text-2); }
.pt-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .6rem; }

/* == 12. Inloggen en beveiliging (QR, codes, OTP, Turnstile) == */

.pt-auth-hero { padding-bottom: clamp(1.8rem, 4vw, 3rem); }
.pt-auth { padding-top: 0; }
.pt-auth__card > h2 + p { margin-top: -.4rem; }
/* Meldingen in de kaart: onder het ronde icoon (zelfde plek als een fout bij inloggen) en over de volle breedte.
   In de HTML staan ze vooraan (eerst gelezen); alleen de weergave verschuift. */
.pt-auth__card > .account__mark { order: -2; }
.pt-auth__card > .pt-flash { order: -1; justify-self: stretch; }
.pt-auth__text { max-width: 36rem; color: var(--text-2); }
.pt-login { display: grid; gap: 1.05rem; width: 100%; }
.pt-login__error { margin-bottom: 0; }
.pt-login__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: .25rem; }
.pt-login__link { color: var(--text-2); font-size: .92rem; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .2s; }
.pt-login__link:hover { color: var(--text); text-decoration-color: var(--volt); }
.pt-login__alt { margin-top: .3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--text-2); font-size: .92rem; }
.pt-login__alt a { color: var(--text); text-decoration-color: var(--volt); text-underline-offset: 3px; }
.account__side .ccard b a { color: var(--text); text-decoration-color: var(--volt); text-underline-offset: 3px; }
.account__side .ccard span a { color: var(--text-2); text-decoration: none; }
.account__side .ccard span a:hover { color: var(--text); }
a.ccard { color: inherit; transition: box-shadow .3s; }
a.ccard:hover > .icon { color: var(--volt); }

.pt-turnstile { min-height: 65px; }
.pt-turnstile--dev, .pt-turnstile--mock { min-height: 0; }
.pt-turnstile--dev .pt-note { padding: .7rem .9rem; border: 1px dashed var(--line-2); border-radius: 12px; font: 400 .74rem/1.5 var(--f-mono); }
.pt-turnstile__dev {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem;
    padding: .6rem .7rem .6rem .9rem;
    border: 1px dashed var(--line-2); border-radius: 12px;
    font: 400 .72rem var(--f-mono); color: var(--text-2);
}
.pt-turnstile__dev select {
    min-height: 40px; padding: 0 2rem 0 .7rem;
    border: 0; border-radius: 9px;
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bdca' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center / 14px;
    font: 400 .78rem var(--f-body); color: var(--text);
    -webkit-appearance: none; appearance: none;
}
.pt-turnstile__dev select option { background: #0d121c; }

.pt-qr { display: inline-grid; place-items: center; width: 232px; padding: 16px; border-radius: 16px; background: #fff; }
.pt-qr svg { width: 200px; height: 200px; }
.pt-codes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.4rem;
    margin: 0; padding: 1rem 1.25rem;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 500 .95rem var(--f-mono); letter-spacing: .06em;
    list-style: none;
}
@media (max-width: 420px) { .pt-codes { grid-template-columns: minmax(0, 1fr); } }
.pt-otp input, input.pt-otp {
    max-width: 15rem;
    font: 500 1.55rem/1 var(--f-mono) !important; letter-spacing: .4em; text-align: center;
}

/* == 13. Overzicht == */

.pt-actions { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pt-action {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
    padding: .8rem .9rem .8rem 1rem;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}
.pt-action > .icon { width: 20px; height: 20px; color: var(--volt); }
.pt-action__text { min-width: 0; overflow-wrap: anywhere; }
.pt-action__text small { display: block; color: var(--text-2); font-size: .84rem; }
.pt-action--warn > .icon { color: var(--warn); }
.pt-action--bad > .icon { color: var(--bad); }
.pt-action--info > .icon { color: var(--sky); }
.pt-action--warn { box-shadow: inset 0 0 0 1px rgba(255, 207, 107, .3); }
.pt-action--bad { box-shadow: inset 0 0 0 1px rgba(255, 107, 125, .32); }
@media (max-width: 600px) { .pt-action { grid-template-columns: auto minmax(0, 1fr); } .pt-action > .btn, .pt-action > form { grid-column: 2; justify-self: start; } }

/* == 14. Diensten en tabs == */

.pt-tabs {
    position: relative; /* tellers met sr-only-tekst binnen de tabstrook houden */
    display: flex; gap: .2rem;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--line);
}
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tabs a {
    position: relative; flex: none;
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 46px; padding: 0 .95rem;
    color: var(--text-2); font-size: .93rem; text-decoration: none; white-space: nowrap;
    transition: color .2s;
}
.pt-tabs a .icon { width: 16px; height: 16px; }
.pt-tabs a::after {
    content: ""; position: absolute; left: .95rem; right: .95rem; bottom: -1px;
    height: 2px; border-radius: 2px;
    background: var(--volt);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .4s var(--ease);
}
.pt-tabs a:hover { color: var(--text); }
.pt-tabs a:hover::after { transform: scaleX(.3); }
.pt-tabs a[aria-current="page"] { color: var(--text); }
.pt-tabs a[aria-current="page"]::after { transform: scaleX(1); }
/* Springlinks binnen één pagina (Facturen, data-tabs-spy): portal.js markeert de sectie die in beeld is. */
.pt-tabs a[aria-current="true"] { color: var(--text); }
.pt-tabs a[aria-current="true"]::after { transform: scaleX(1); }

/* == 15. Domeinen == */

.pt-domain-name { font-family: var(--f-mono); font-size: .95em; overflow-wrap: anywhere; }

/* == 16. Facturen en bestellingen == */

.pt-amount { font: 500 1.05rem var(--f-display); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-nowrap { white-space: nowrap; } /* bijv. een bestelnummer in een kop: niet afbreken bij het streepje */

/* == 17. Support == */

.pt-draft-note { font: 400 .72rem var(--f-mono); color: var(--text-2); }
.field input[type="file"] { width: 100%; min-width: 0; padding: .6rem .7rem; font-size: .9rem; color: var(--text-2); cursor: pointer; }
.field input[type="file"]::file-selector-button {
    margin-right: .8rem; padding: .45rem .9rem; border: 0; border-radius: 999px;
    background: var(--surface-2); color: var(--text); font: 500 .85rem var(--f-body); cursor: pointer;
}
.field input[type="file"]:hover::file-selector-button { background: rgba(255, 255, 255, .12); }
.pt-files--pick { margin-top: .3rem; }
.pt-files--pick:empty { display: none; } /* zonder keuze geen lege ruimte tussen veld en uitleg */
.pt-files--pick li > span { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; }
/* Meldingencentrum: ongelezen (portal.js §8 haalt .is-unread weg na het markeren). */
.pt-list > li.is-unread .pt-row__icon { color: var(--volt); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .45); }
.pt-list > li.is-unread .pt-row__main b { font-weight: 600; }

/* == 18. Profiel en beveiliging == */

.pt-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.pt-switch-row:last-child { border-bottom: 0; }
.pt-switch-row .check { flex: none; white-space: nowrap; }
.check:has(input:disabled) { opacity: .6; cursor: default; } /* verplichte soorten meldingen: aan en niet te wijzigen */
.pt-enroll { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: flex-start; margin-top: .9rem; } /* QR naast de sleutel */
.pt-auth__card > .pt-kv { justify-self: stretch; }
.phero__title { overflow-wrap: anywhere; hyphens: auto; } /* lange woorden in een titel (lang="nl") */

/* == 19. Beweging == */

/* Rustig binnenkomen van kop en inhoud (8 px). Nooit op .pt of een voorouder van het blad. */
@keyframes pt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pt-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pt-head { animation: pt-rise .55s var(--ease) both; }
.pt-main > * { animation: pt-rise .6s var(--ease) both; }
.pt-main > *:nth-child(2) { animation-delay: .05s; }
.pt-main > *:nth-child(3) { animation-delay: .1s; }
.pt-main > *:nth-child(4) { animation-delay: .15s; }
.pt-main > *:nth-child(n+5) { animation-delay: .2s; }
/* Het zijmenu blijft staan bij het wisselen van pagina (geen animatie); alleen de inhoud komt op. */
/* De ring op de inlogpagina's loopt drie keer en stopt dan (WCAG 2.2.2). */
.portal .account__ring { animation-iteration-count: 3; }
.pt-copy.is-done .icon { animation: pop .4s var(--ease-spring); }

/* == 20. Minder beweging en print == */

/* style.css zet bij prefers-reduced-motion alle animaties en overgangen al uit; hier alleen wat het portaal extra doet. */
@media (prefers-reduced-motion: reduce) {
    .pt-head, .pt-main > *, .pt-side, .pt-more[open] ~ .pt-sheet, .pt-dialog { animation: none !important; }
}
@media print {
    .nav, .menu, .scene, .footer, .skip, .pt-side, .pt-nav-m, .pt-more, .pt-sheet, .pt-banner, .pt-dialog, .pt-copy, .toast { display: none !important; }
    body { color: #000; background: #fff; }
    .pt { display: block; padding: 0; }
    .pt-card, .pt-stat, .glass { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .glass::before { display: none; }
    .pt-head h1, .pt-card__head h2 { color: #000; }
    .pt-main > * { animation: none !important; }
    /* [data-print-section]: alleen dat deel afdrukken */
    body.pt-printing .pt-main > :not(.is-print-target):not(:has(.is-print-target)), body.pt-printing .pt-head { display: none !important; }
}