/* Kesinti's own parts. The shared look (tokens, type, header, sections,
   results, table, forms, prices, print) is kit/kit.css, loaded first. */

[hidden] { display: none !important; }

/* ---- the ten checks in the kit's six slots, by group ----
   payments (payout, unpaid) · commission (commission, rate) · returns and
   discounts (return, tydiscount) · service fee · cargo (cargo, desi) ·
   withholding. Inside a group the "review" check is hatched, and every
   legend, table and tooltip names the check, so color is never the only cue. */
[data-c="payout"], [data-c="unpaid"] { --c: var(--c1); }
[data-c="commission"], [data-c="rate"] { --c: var(--c2); }
[data-c="return"], [data-c="tydiscount"] { --c: var(--c3); }
[data-c="servicefee"] { --c: var(--c4); }
[data-c="cargo"], [data-c="desi"] { --c: var(--c5); }
[data-c="stoppage"] { --c: var(--c6); }
:is(.k-seg, .k-mseg, .k-sw, .k-vs-ex):is([data-c="unpaid"], [data-c="rate"], [data-c="tydiscount"], [data-c="desi"]),
:is([data-c="unpaid"], [data-c="rate"], [data-c="tydiscount"], [data-c="desi"]) > .k-sw,
.check:is([data-c="unpaid"], [data-c="rate"], [data-c="tydiscount"], [data-c="desi"]) .cn::before {
  background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 35%, var(--bg)) 3px 6px);
}
.check .cn { min-width: 2.6em; }
.check dd { margin-left: calc(2.6em + 12px); }
.check dt > span:last-child { display: inline; }
.check dt .k-sev { margin-left: 6px; white-space: nowrap; }

/* ---- the hero: one payout as a waterfall ---- */
.wf { margin: 0; }
.wf svg { display: block; width: 100%; height: auto; }
.wf figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.wf .w-lab { fill: var(--text-2); font: 400 17px var(--sans); }
.wf .w-lab-u { fill: var(--text); font-weight: 600; }
.wf .w-val { fill: var(--text-2); font: 400 15px var(--mono); }
.wf .w-val-u { fill: var(--accent-ink); font: 500 16px var(--mono); }
.wf .w-val-t { fill: var(--text); font-weight: 500; }
.wf .w-head { fill: var(--muted); font: 400 14px var(--mono); }
.wf .w-tot { fill: var(--text); }
.wf .w-step { fill: var(--text-2); opacity: .45; }
.wf .w-u { fill: var(--accent); }
.wf .w-join { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.wf .w-axis { stroke: var(--line-2); stroke-width: 1; }

/* ---- the tool ---- */
.ks-drop { margin-top: 26px; }
.ks-merged::before { content: "＋"; }
@media (max-width: 600px) {
  #ks-files .k-file-k { grid-column: 2 / -1; text-align: left; }
}
.ks-choose { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ks-skip { background: none; border-color: transparent; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.ks-set h4 { margin-bottom: 10px; }
.ks-set .k-note { font-size: 14px; margin-top: 8px; }
#ks-cal { display: grid; gap: 6px; }
#ks-cal p { margin: 0; }
#ks-cal .ks-base { font-weight: 500; color: var(--text); }
.ks-pairs { max-width: 520px; }
.ks-pairs th { font: 500 12px/1.3 var(--sans); color: var(--muted); }
.ks-pairs td { padding: 4px 6px 4px 0; }
.ks-pairs .ks-x { width: 44px; text-align: center; }
.ks-del { width: 36px; height: 36px; border: 1px solid var(--line-2); background: none; color: var(--text-2); font: 400 18px/1 var(--mono); cursor: pointer; }
.ks-del:hover { border-color: var(--text); color: var(--text); }
.ks-add { margin-top: 8px; }
.ks-text { font-family: var(--mono); font-size: 13px; min-height: 76px; resize: vertical; }
.ks-vat { max-width: 120px; }
.ks-files-dl { margin-top: 18px; font-size: 14px; color: var(--text-2); }
.ks-files-dl a { text-underline-offset: 3px; }

/* results */
.ks-none { margin-bottom: 16px; }
.ks-bycheck { min-width: 560px; margin-top: 14px; }
.ks-bycheck th[scope="row"] { font-weight: 400; }
.ks-bycheck td, .ks-bycheck th { vertical-align: middle; }
.ks-bycheck .k-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-bycheck .ks-cov { color: var(--muted); font-size: 13px; text-align: right; }
.ks-bycheck + .k-comp { margin-top: 26px; }
.ks-heat { min-width: 920px; }
.ks-heat thead th { overflow-wrap: break-word; padding-left: 4px; padding-right: 4px; }
.ks-heat tbody th { white-space: normal; line-height: 1.25; }
.ks-heat thead th:first-child { width: 170px; }
@media (max-width: 600px) {
  .ks-bycheck { min-width: 0; width: 100%; }
  .ks-bycheck thead { display: none; }
  .ks-bycheck tbody, .ks-bycheck tr { display: block; }
  .ks-bycheck tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ks-bycheck th[scope="row"] { grid-column: 1 / -1; }
  .ks-bycheck th, .ks-bycheck td { display: block; padding: 0; border: 0; }
  .ks-bycheck .ks-cov { grid-column: 2 / -1; }
}
.ks-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.k-lock { margin-top: 22px; }
.ks-profit { min-width: 860px; margin-top: 14px; }
.ks-profit .k-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.ks-profit th[scope="row"] { font-weight: 400; }
.ks-profit .ks-profit-v { font-weight: 500; }
.ks-profit .is-neg { color: var(--c3); }
.ks-profit .ks-tot th, .ks-profit .ks-tot td { border-top: 1px solid var(--line-2); font-weight: 500; }

/* prices */
.k-price .k-price-v { color: var(--text); font: 500 26px/1.15 var(--mono); }
.k-price .btn-line { margin-top: auto; align-self: flex-start; }

/* footer: the disclaimer on its own line */
.ks-disc { flex-basis: 100%; margin: 0; }

/* ---- the guide ---- */
.guide { padding: 64px 0 88px; }
.guide .wrap { max-width: 760px; }
.guide h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.01em; }
.guide .g-sub { margin-top: 18px; font-size: 19px; color: var(--text-2); }
.guide h2 { font-size: clamp(24px, 3vw, 30px); margin: 44px 0 12px; }
.guide h3 { font-size: 20px; margin: 26px 0 8px; }
.guide p, .guide li { color: var(--text-2); }
.guide p + p { margin-top: 14px; }
.guide ul, .guide ol { padding-left: 22px; }
.guide li + li { margin-top: 6px; }
.guide .k-mini { margin-top: 14px; }
.guide .k-mini .k-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide .g-cta { margin-top: 40px; padding: 24px; background: var(--panel); }
.guide .g-cta p { margin-bottom: 16px; }
.guide .g-draft { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; }
.guide code { font: 400 14px var(--mono); }

/* ---- the printed report (kit/export.js print) ---- */
.ks-report { display: none; }
@media print {
  body.k-printing .ks-report.k-print-this { display: block; }
  .ks-report h1 { font-size: 24pt; margin-bottom: 6px; }
  .ks-report h2 { font-size: 16pt; margin: 22px 0 10px; }
  .ks-report .ks-rep-meta { font-size: 9pt; color: var(--muted); }
  .ks-report .k-totals { margin-top: 14px; }
  .ks-report .k-total { font-size: 20pt; }
  .ks-report .k-mini { width: 100%; font-size: 9pt; }
  .ks-report .ks-bycheck, .ks-report .ks-profit { min-width: 0; }
  .ks-rep-list { padding-left: 18px; font-size: 9.5pt; }
  .ks-rep-list li { break-inside: avoid; margin-bottom: 8px; }
  .ks-rep-h { font-weight: 500; }
  .ks-rep-c { font-family: var(--mono); font-size: 8.5pt; color: var(--text-2); }
}