/* Payslip Decoder — platform tool chrome (not a culture surface, no oriental theme).
   Nothing here starts at opacity:0: the tool must be readable even if its own
   script never runs. Containers that JS fills carry a min-height so the fill
   cannot shift the page (docs/cls-conventions.md). */

#pd { color: #1a1814; }
#pd *, #pd *::before, #pd *::after { box-sizing: border-box; }

/* ── country tabs ────────────────────────────────────────────────────────── */
.pd-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.pd-tab {
    min-height: 44px; padding: .55rem 1.1rem; font: inherit; font-size: .92rem; font-weight: 600;
    color: #33302b; background: #fff; border: 1px solid #d9d4ca; border-radius: 999px; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.pd-tab:hover { border-color: #b9b2a5; }
.pd-tab.is-on { color: #fff; background: #e8622a; border-color: #e8622a; }
.pd-tab:focus-visible { outline: 2px solid #e8622a; outline-offset: 2px; }

/* ── panels ──────────────────────────────────────────────────────────────── */
.pd-panel { border: 1px solid #e7e3db; border-radius: 12px; background: #fff; padding: 1rem 1.1rem; margin: 0 0 1rem; }
.pd-panel-h { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; color: #1a1814; }
.pd-panel-sub { font-size: .85rem; color: #6b6760; margin: 0 0 .8rem; line-height: 1.55; }

.pd-f { display: block; margin-bottom: .7rem; }
.pd-f:last-child { margin-bottom: 0; }
.pd-f label { display: block; font-size: .82rem; font-weight: 600; color: #33302b; margin-bottom: .28rem; }
.pd-f input, .pd-f select, #pd-lookup {
    width: 100%; min-height: 44px; padding: .5rem .7rem; font: inherit; font-size: .95rem;
    color: #1a1814; background: #fff; border: 1px solid #d6d3cd; border-radius: 8px;
}
.pd-f input:focus, .pd-f select:focus, #pd-lookup:focus {
    outline: 2px solid #e8622a; outline-offset: 1px; border-color: #e8622a;
}
.pd-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .pd-grid { grid-template-columns: 1fr 1fr; } }

.pd-cur { font-size: .78rem; font-weight: 700; color: #8a857c; }

/* ── lookup result ───────────────────────────────────────────────────────── */
#pd-lookup-result { min-height: 0; }
.pd-result { margin-top: .85rem; padding: .85rem 1rem; border-radius: 10px; border: 1px solid #e7e3db; background: #fbfaf8; }
.pd-result.is-hit { background: #f3faf5; border-color: #d8ecdf; }
.pd-result.is-miss { background: #fdf9f3; border-color: #f0e2cf; }
.pd-hit-h, .pd-miss-h { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.pd-result p { font-size: .88rem; line-height: 1.6; color: #4a463f; margin: 0 0 .5rem; }
.pd-result p:last-child { margin-bottom: 0; }

/* ── the reconcile table ─────────────────────────────────────────────────── */
/* Reserved height: JS fills this after paint and must not push the page. */
#pd-reconcile { min-height: 96px; }
.pd-empty { font-size: .88rem; color: #8a857c; margin: 0; line-height: 1.6; }

.pd-rc { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 0 0 .75rem; }
.pd-rc th, .pd-rc td { padding: .45rem .2rem; text-align: left; border-bottom: 1px solid #f0ede7; }
.pd-rc td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-rc th[scope="row"] { font-weight: 500; color: #4a463f; }
.pd-rc-sep th {
    padding-top: .85rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #b45309; border-bottom: none;
}
.pd-rc tfoot th, .pd-rc tfoot td { font-weight: 700; color: #1a1814; border-top: 2px solid #e7e3db; border-bottom: none; padding-top: .6rem; }
.pd-rc-pct { font-size: .88rem; color: #33302b; margin: 0 0 .6rem; }
.pd-rc-note, .pd-rc-caveat { font-size: .82rem; line-height: 1.6; color: #6b6760; margin: 0 0 .5rem; }
.pd-rc-caveat { padding-top: .5rem; border-top: 1px solid #f0ede7; }

/* ── the line list ───────────────────────────────────────────────────────── */
#pd-lines { min-height: 320px; }
.pd-group { margin: 0 0 1.4rem; }
.pd-group-h {
    font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #b45309; margin: 0 0 .35rem;
}
.pd-group--employer-cost .pd-group-h { color: #1e6b43; }
.pd-group-note { font-size: .82rem; line-height: 1.6; color: #6b6760; margin: 0 0 .6rem; max-width: 62ch; }

.pd-line { border: 1px solid #e7e3db; border-radius: 10px; background: #fff; margin-bottom: .5rem; }
.pd-line[open] { border-color: #d6d3cd; }
.pd-line-sum {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .7rem .9rem; cursor: pointer; list-style: none; min-height: 44px;
}
.pd-line-sum::-webkit-details-marker { display: none; }
.pd-line-sum::after { content: '+'; margin-left: auto; font-size: 1.1rem; color: #8a857c; line-height: 1; }
.pd-line[open] .pd-line-sum::after { content: '\2212'; }
.pd-line-sum:focus-visible { outline: 2px solid #e8622a; outline-offset: -2px; border-radius: 10px; }
.pd-line-name { font-size: .94rem; font-weight: 600; color: #1a1814; }

.pd-chip {
    font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .14rem .5rem; border-radius: 999px; color: #5b5750; background: #e9e6e0; white-space: nowrap;
}
.pd-chip--statutory { color: #96341f; background: #f7ddd5; }
.pd-chip--statutory-optout { color: #8a6d1f; background: #f6ecd2; }
.pd-chip--contractual { color: #1e4f6b; background: #d9e8f0; }
.pd-chip--voluntary { color: #1e6b43; background: #d8ecdf; }
.pd-chip--deduction { color: #96341f; background: #f7ddd5; }
.pd-chip--employer-cost { color: #1e6b43; background: #d8ecdf; }
.pd-chip--earning { color: #1e4f6b; background: #d9e8f0; }
.pd-chip--information { color: #5b5750; background: #e9e6e0; }

.pd-line-grid { display: grid; gap: .55rem; padding: 0 .9rem .3rem; }
.pd-line-f { display: grid; gap: .12rem; }
.pd-line-k { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a857c; }
.pd-line-f > span:last-child { font-size: .88rem; line-height: 1.6; color: #4a463f; }
@media (min-width: 720px) {
    .pd-line-f { grid-template-columns: 150px 1fr; gap: .2rem .9rem; align-items: baseline; }
}

.pd-src { font-size: .76rem; color: #8a857c; margin: .5rem 0 0; padding: 0 .9rem .8rem; }
.pd-src a { color: #b45309; }
.pd-result .pd-src { padding: 0; }

/* ── deduction cap panel ─────────────────────────────────────────────────── */
#pd-cap { min-height: 200px; }
.pd-cap-h { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; }
.pd-quote {
    margin: 0 0 .5rem; padding-left: .8rem; border-left: 3px solid #b45309;
    font-size: .92rem; line-height: 1.6; color: #33302b; font-style: italic;
}
.pd-quote-en { font-size: .82rem; color: #6b6760; margin: 0 0 .6rem; }
.pd-cap-sub { font-size: .88rem; margin: .6rem 0 .3rem; }
.pd-cap-list { margin: 0 0 .6rem; padding-left: 1.2rem; font-size: .86rem; line-height: 1.65; color: #4a463f; }
.pd-cap-warn { font-size: .86rem; line-height: 1.6; color: #96341f; margin: 0 0 .5rem; }
.pd-cap-note { font-size: .82rem; line-height: 1.6; color: #6b6760; margin: 0 0 .3rem; }