/* Courier statement checker (/tools/courier-statement-checker/). Linked on this page only; builds on the
   calculator's classes in styles.css (calc-page, calc__label, calc__pdf, calc-report, calc-guide). */
.cs-page .cs-page__title { font-size: clamp(32px, 8.4vw, 96px); } /* styles.css loads after this file */
/* reading text on this page: no lone last words (FAQ answers and steps are short enough to balance) */
.cs-page .tools-page__lead, .cs-page .calc-guide li, .cs-page .calc-guide dd, .cs-page .partner-page__faq p, .cs__try, .cs__dh, .cs-page .calc-page__privacy, .cs-page .tool-links__carry { text-wrap: balance; }
.cs-page__kicker { display: block; margin-top: 14px; font-family: var(--font); font-stretch: 100%; font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; text-wrap: balance; }

.cs { --pos: #4ade80; --neg: #ff7a66; --line-d: rgba(241, 240, 236, 0.14); display: grid; gap: clamp(20px, 2.6vw, 32px); margin-top: 16px; min-width: 0; }
.cs__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 16px; border: 1px dashed var(--rule-strong); border-radius: 12px; }
.cs__intro { flex: 1 1 320px; min-width: 0; }
.cs__try { color: var(--ink-2); font-size: 15px; }
.cs__dl { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.cs__dl a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.cs__actions { display: flex; align-items: center; gap: 4px; }
.cs__actions .pill { cursor: pointer; font: inherit; font-weight: 600; border: 0; }
.cs__actions .pill[disabled] { opacity: .5; cursor: progress; }

/* the three inputs: stacked on phones, three columns on wide screens */
.cs__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) { .cs__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.cs__step { display: grid; gap: 14px; align-content: start; min-width: 0; margin: 0; padding: clamp(16px, 2vw, 22px); border: 0; border-radius: 16px; background: var(--stage); }
.cs__step:nth-child(1) { --stage: #ebe8e1; --chip: var(--ink); --chip-ink: var(--paper); }
.cs__step:nth-child(2) { --stage: #e7eaf4; --chip: var(--blue); --chip-ink: #fff; }
.cs__step:nth-child(3) { --stage: #f4e9df; --chip: var(--orange); --chip-ink: var(--ink); }
.cs__legend { float: inline-start; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 0 12px; border-bottom: 2px solid var(--ink); font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; }
.cs__legend + * { clear: both; }
.cs__gn { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--chip); color: var(--chip-ink); font-size: 11px; }

/* selects: native arrow hidden, one 16px chevron */
.cs select { width: 100%; min-height: 48px; padding: 10px 40px 10px 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23111113' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px; border: 1px solid var(--rule-strong); border-radius: 10px; appearance: none; -webkit-appearance: none; cursor: pointer; }
[dir="rtl"] .cs select { padding: 10px 14px 10px 40px; background-position: left 14px center; }
.cs select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--ink); }

/* file drop zone: the whole box is the label of the file input */
.cs__drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 16px; text-align: center; border: 1.5px dashed var(--ink-2); border-radius: 12px; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: background .2s, border-color .2s; }
.cs__drop:hover, .cs__drop.is-over { background: #fff; border-color: var(--ink); }
.cs__drop:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.cs__drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cs__fi { width: 26px; height: 26px; color: var(--ink); }
.cs__dt { font-weight: 600; }
.cs__dh { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.cs__file { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.cs__file[data-err], .cs__warn { color: #a14a12; font-weight: 500; }
.cs__warn[hidden] { display: none; }
.cs__map { border-top: 1px solid var(--rule-strong); }
.cs__map[hidden] { display: none; }
.cs__map summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500; list-style: none; }
.cs__map summary::-webkit-details-marker { display: none; }
.cs__map summary::after { content: "+"; color: var(--blue); font-weight: 800; }
.cs__map[open] summary::after { content: "\2212"; }
.cs__map summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.cs__mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; padding-bottom: 6px; }
.cs__mf .field__l { font-size: 13px; }
.cs__req { font-style: normal; font-size: 11px; color: #a14a12; }
.cs__feegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 480px) { .cs__feegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.cs__feegrid .calc__box.has-unit input { padding-inline: 12px 40px; }
[dir="rtl"] .cs__feegrid .calc__box.has-unit input { padding-inline: 12px 40px; }
.cs__feegrid .calc__unit { inset-inline-end: 12px; }
.cs__fees .calc__f { grid-template-rows: auto auto; }

/* result: dark panel, full width under the inputs */
.cs__out { display: grid; gap: 0; padding: clamp(20px, 2.6vw, 36px); border-radius: 16px; background: var(--dark); color: var(--on-dark); box-shadow: 6px 6px 0 var(--orange); min-width: 0; }
[dir="rtl"] .cs__out { box-shadow: -6px 6px 0 var(--orange); }
.cs__out [hidden] { display: none !important; }
.cs__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 20px; }
.cs__claim { display: grid; gap: 6px; align-content: start; }
.cs__n { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(48px, 5.4vw, 84px); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
[dir="rtl"] .cs__n { letter-spacing: 0; font-weight: 900; line-height: 1.3; }
.cs__n[data-unit]::after { content: attr(data-unit); margin-inline-start: 0.3em; font-family: var(--font); font-stretch: 100%; font-size: 0.36em; font-weight: 500; letter-spacing: 0; color: var(--on-dark-muted); }
.cs__n[data-sign="neg"] { color: var(--orange); }
.cs__n[data-sign="zero"] { color: var(--pos); }

/* five cards, equal part by part (subgrid rows: name, amount, count) */
/* rows fill evenly: 2 + 2 + the wide "missing" card on phones and tablets, 5 across on desktops */
.cs__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto auto auto; gap: 10px; }
.cs__card--missing { grid-column: 1 / -1; }
@media (max-width: 400px) { .cs__card { padding: 12px; } .cs__ck { font-size: 13px; } }
@media (min-width: 1100px) { .cs__cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cs__card--missing { grid-column: auto; } }
.cs__card { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 6px; align-content: start; padding: 14px; text-align: start; font: inherit; color: var(--on-dark); background: var(--dark-2); border: 1px solid var(--line-d); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.cs__card:hover { border-color: rgba(241, 240, 236, 0.4); }
.cs__card:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.cs__card.is-on { border-color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); }
.cs__card[data-zero] { opacity: .55; }
.cs__ck { font-size: 14px; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.cs__cn { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
[dir="rtl"] .cs__cn { letter-spacing: 0; font-weight: 900; line-height: 1.35; }
.cs__cn small { font-family: var(--font); font-stretch: 100%; font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--on-dark-muted); }
.cs__cc { font-size: 13px; color: var(--on-dark-muted); }
.cs__card--missing { background: transparent; border-style: dashed; }

.cs__notes { display: grid; gap: 6px; margin: 0; padding: 14px 0; list-style: none; border-top: 1px solid var(--line-d); font-size: 13.5px; line-height: 1.5; color: var(--on-dark-muted); }
.cs__notes li { position: relative; padding-inline-start: 16px; text-wrap: pretty; }
.cs__notes li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 6px; height: 6px; background: var(--orange); }
.cs__notes:empty { display: none; }

/* flagged orders: a table on wide screens, one card per row on phones */
.cs__list { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-d); min-width: 0; }
.cs__lh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.cs__lh .calc__vh { font-size: 15px; }
.cs__link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--on-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(241, 240, 236, 0.4); justify-self: start; }
.cs__link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
[dir="rtl"] .cs__link { letter-spacing: 0; font-size: 13px; }
.cs__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cs__table th { padding: 8px 10px 8px 0; text-align: start; font-weight: 500; font-size: 12.5px; color: var(--on-dark-muted); border-bottom: 1px solid var(--line-d); }
[dir="rtl"] .cs__table th { padding: 8px 0 8px 10px; }
.cs__table td { padding: 12px 10px 12px 0; vertical-align: top; border-bottom: 1px dashed var(--line-d); line-height: 1.45; }
[dir="rtl"] .cs__table td { padding: 12px 0 12px 10px; }
.cs__table td:nth-child(2) bdi { white-space: nowrap; }
.cs__table td:nth-child(2) small { display: block; color: var(--on-dark-muted); font-size: 12px; }
.cs__table td:nth-child(3) { color: var(--on-dark-muted); text-wrap: pretty; }
.cs__amt { text-align: end !important; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs__amt small { font-weight: 500; color: var(--on-dark-muted); font-size: 0.8em; }
.cs__none { color: var(--on-dark-muted); }
.cs__tag { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; background: rgba(241, 240, 236, 0.1); }
.cs__tag--unpaid { background: var(--orange); color: var(--ink); }
.cs__tag--short { background: #ffb38a; color: var(--ink); }
.cs__tag--fee { background: var(--blue); color: #fff; }
.cs__tag--rto { background: var(--violet); color: var(--ink); }
.cs__tag--missing { background: transparent; box-shadow: inset 0 0 0 1px rgba(241, 240, 236, 0.5); }
@media (max-width: 700px) {
  .cs__table thead { display: none; }
  .cs__table, .cs__table tbody, .cs__table tr, .cs__table td { display: block; }
  .cs__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-d); }
  .cs__table td, [dir="rtl"] .cs__table td { padding: 0; border: 0; }
  .cs__table td:nth-child(1) { grid-column: 1 / -1; }
  .cs__table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .cs__table td.cs__none { grid-column: 1 / -1; }
}

.cs__export { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--line-d); }
.cs__export .calc__pdfhint { flex: 1 1 100%; }

/* call to action: light card on the dark panel */
.cs__cta { display: grid; gap: 8px; margin-top: 18px; padding: clamp(16px, 2vw, 22px); border-radius: 14px; background: var(--paper); color: var(--ink); }
.cs__kick { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.cs__kick::before { content: ""; width: 8px; height: 8px; background: var(--orange); }
[dir="rtl"] .cs__kick { letter-spacing: 0; font-size: 13px; }
.cs__ch { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
[dir="rtl"] .cs__ch { letter-spacing: 0; font-weight: 900; line-height: 1.45; }
.cs__cb { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.cs__ca { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cs__ca .pill { gap: 8px; }
.cs__ca .ico--wa { width: 18px; height: 18px; fill: currentColor; }
[dir="rtl"] .cs__audit .ico { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) { .cs__drop, .cs__card { transition: none; } }
/* newsletter under the tool: room for its heading on one line (Arabic is ~20px wider than the default box) */
.cs-page .nl--tool { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 899px) { .cs-page .nl--tool { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cs-page .nl--tool { padding-inline: 12px; } }

/* PDF report (print only; the page around it is hidden by the print rules in styles.css) */
@media print {
  .cs-report__results { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0 20px; align-items: start; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 10px; }
  .cs-report__results .calc__k { font-size: 9.5pt; font-weight: 500; }
  .cs-report__n { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 30pt; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
  [dir="rtl"] .cs-report__n { font-weight: 900; }
  .cs-report__n small { font-family: var(--font); font-stretch: 100%; font-size: 0.4em; font-weight: 500; color: var(--muted); }
  .cs-report__results .calc__note { font-size: 8.5pt; color: #3a3a3f; }
  /* file names are long: one row each; the three fees share one row */
  /* courier.css loads before styles.css, so these beat .calc-report__table by specificity */
  .calc-report .cs-report__files { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .calc-report .cs-report__files div:nth-child(-n + 2) { grid-column: 1 / -1; }
  .calc-report .cs-report__files div { padding: 2px 0; }
  .cs-report__table td { padding-block: 2px; }
  .cs-report__notes { margin: 8px 0 0; padding-inline-start: 1.2em; font-size: 8pt; color: #3a3a3f; }
  .cs-report__notes:empty { display: none; }
  .cs-report__table { width: 100%; border-collapse: collapse; font-size: 8pt; }
  .cs-report__table th { text-align: start; font-weight: 600; color: var(--muted); padding: 3px 6px 3px 0; border-bottom: 1.5px solid var(--ink); }
  .cs-report__table td { padding: 3px 6px 3px 0; border-bottom: 1px solid var(--line-d); vertical-align: top; }
  [dir="rtl"] .cs-report__table th, [dir="rtl"] .cs-report__table td { padding: 3px 0 3px 6px; }
  .cs-report__table tr { break-inside: avoid; }
  .cs-report__table small { color: var(--muted); font-size: 0.9em; }
  .cs-report .calc__pdfhint { display: none; }
}