/* NetMagen Affiliates back office — /blog-assets/affiliates.css?v=<filemtime>
   Loaded AFTER portal.css (it keeps the whole component vocabulary: shell, sidebar, topbar, cards,
   tables, filters, buttons, modal, toast, tiles); this file only adds what the affiliate lane has
   and the portal does not. Every colour and size is a portal token (var(--brand), --gap-3 ...).
   Logical properties only (he and ar are RTL; the build guard refuses physical left/right). */

/* ── brand ──────────────────────────────────────────────────────────── */

/* A greener mark than the customer portal's, so the two apps read as different places at a glance. */
.affapp .brand-mark { background: linear-gradient(135deg, var(--accent) 0%, var(--ok) 100%); }
.affapp .auth-aside .brand-mark { background: rgb(255 255 255 / 0.17); }

/* The nav is one flat list (no group headings). On the ≤900px panel the portal lays groups out as
   grid columns; a single group has to span them and flow its entries across the same columns. */
@media (max-width: 900px) {
  .affapp .nav-group {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .affapp .nav-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── status chips (topbar) ───────────────────────────────────────────── */

.affapp .chip-active { background: #E4F3EB; color: #105534; }
.affapp .chip-suspended { background: #FDF4E3; color: #6B4700; }
.affapp .chip-closing { background: var(--tint); color: var(--ink-2); }
.affapp .chip-closed { background: #FCEDED; color: #7A1F1F; }
.affapp .topbar-right .chip { flex: none; }

/* ── notice bar (read-only account, paused programme) ────────────────── */

.affapp .notice {
  inline-size: min(calc(100% - 2 * var(--gutter)), calc(var(--content-max) - 2 * var(--gutter)));
  margin: var(--gap-3) auto 0; padding: var(--gap-3) var(--gap-4);
  background: #FDF4E3; color: #6B4700; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--amber); border-inline-start-width: 4px; border-radius: var(--radius);
}

/* ── KPI tiles ───────────────────────────────────────────────────────── */

.affapp .tiles { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.tile-sub { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile-sub.is-up { color: var(--ok); font-weight: 600; }
.tile-sub.is-down { color: var(--alert); font-weight: 600; }

/* ── regions: loading, refetching, failing ───────────────────────────── */

/* A region that is refetching (a filter or page changed) keeps its last content, dimmed, until the
   answer lands: the page never collapses and re-grows under the pointer. */
.affapp .region.is-refreshing { opacity: 0.55; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }

.region-error {
  display: grid; gap: var(--gap-3); justify-items: center; text-align: center;
  padding: var(--gap-5); color: #7A1F1F; background: #FCEDED;
  border: 1px solid var(--alert); border-radius: var(--radius);
}
.region-error p { margin: 0; font-weight: 600; }

/* ── skeletons ───────────────────────────────────────────────────────── */

.skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--tint) 0%, #F7FBFA 50%, var(--tint) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-line { block-size: 10px; inline-size: 45%; }
.skel-value { block-size: 28px; inline-size: 62%; margin-block-start: 8px; }
.skel-cell { block-size: 12px; inline-size: 80%; }
.skel-cell:nth-child(odd) { inline-size: 60%; }
.skel-row td { padding-block: 14px; }
.skel-chart { block-size: 220px; margin-block-start: var(--gap-3); }
.skel-list { display: grid; gap: var(--gap-3); margin-block-start: var(--gap-3); }
@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .affapp .region.is-refreshing { transition: none; }
}

/* ── tables and pager ────────────────────────────────────────────────── */

.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pager-status { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── modal ───────────────────────────────────────────────────────────── */

/* A native <dialog>. Laid out as a grid only while open: a bare display rule would beat the
   user-agent's `dialog:not([open]) { display: none }` and leak the closed dialog into the page. */
.affapp .modal[open] { display: grid; gap: var(--gap-3); inline-size: min(560px, 92vw); }
.modal-title { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.modal-body { display: grid; gap: var(--gap-3); min-inline-size: 0; }
.modal-loading { display: grid; gap: var(--gap-2); }

/* ── copy button ─────────────────────────────────────────────────────── */

.copy-row { display: flex; gap: var(--gap-2); align-items: center; min-inline-size: 0; }
.copy-row input { font-family: var(--font-mono); font-size: 12.5px; direction: ltr; text-align: start; }
.copy-btn { flex: none; }
.copy-btn.is-copied { background: var(--tint-brand); border-color: var(--brand); color: var(--brand-strong); }

/* ── sign-up and join forms (affiliates/register, affiliates/join, profile-fields) ──────────────── */

/* The portal styles single-line inputs and <select>; the free-text box and the terms checkbox are the
   two controls these forms add. */
.affapp textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--field);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px;
  inline-size: 100%; min-inline-size: 0; resize: vertical;
}
.affapp textarea:hover { border-color: #C4D7D4; }
.affapp textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.affapp .stack [aria-invalid="true"] { border-color: var(--alert); }
.affapp input[data-promo-check][aria-invalid="true"] ~ [data-promo-status] { color: var(--alert); font-weight: 600; }

.check-row { display: flex; gap: var(--gap-2); align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.check-row input { flex: none; margin-block-start: 3px; accent-color: var(--brand); }
.check-row a { font-weight: 600; }

/* ── Links page (affiliates/links) ───────────────────────────────────── */

/* The page is one grid column that may shrink below the table's width: the table scrolls inside its own wrapper. */
.links-page { grid-template-columns: minmax(0, 1fr); }
.links-meta { display: flex; gap: var(--gap-1) var(--gap-4); flex-wrap: wrap; align-items: baseline; }
.links-meta .hint { margin: 0; font-variant-numeric: tabular-nums; }
.links-meta .hint:empty { display: none; }

.links-table td { vertical-align: middle; }
.link-name { display: flex; gap: var(--gap-2); align-items: center; flex-wrap: wrap; }
.link-name strong { overflow-wrap: anywhere; }
.link-url { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); direction: ltr; text-align: start; overflow-wrap: break-word; }
/* A destination path is always left-to-right text; isolate it so a right-to-left page keeps its punctuation in place. */
.link-dest {
  display: inline-block; max-inline-size: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom; direction: ltr; unicode-bidi: isolate;
}
.links-table .hint { margin: 2px 0 0; }
.links-when { white-space: nowrap; }
/* Column labels may wrap (they are long in some languages) so the table keeps to the page width. */
.links-table thead th { white-space: normal; vertical-align: bottom; }
.links-table th, .links-table td { padding-inline: 10px; }
/* The row actions stay in view when the table is wider than the page and scrolls inside its wrapper. */
.links-table .actions-col { position: sticky; inset-inline-end: 0; background: var(--card); border-inline-start: 1px solid var(--line-soft); }
.links-table thead .actions-col { background: #EEF6F5; z-index: 2; }
.links-table tbody tr:hover .actions-col { background: #F4FAF9; }
.links-table .row-actions { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; justify-content: end; }
.links-table .row-actions .is-copied { background: var(--tint-brand); border-color: var(--brand); color: var(--brand-strong); }
/* Eight columns need room: like Payouts, the table keeps a floor and scrolls inside its wrapper instead of squeezing words apart. */
.links-table { min-inline-size: 720px; }
/* On a phone the pinned actions column is ~140px of a ~360px wrapper: it sits over the destination (measured: 28-40px of the path hidden at
   rest, the figures never readable). Below 600px the column scrolls with the row like every other cell. It stays `relative`, not
   `static`: its header cell holds an absolutely positioned .visually-hidden label that must stay inside the table wrapper's clip
   (a static cell lets it escape and makes the page itself scroll sideways in right-to-left). */
@media (max-width: 600px) {
  .links-table .actions-col { position: relative; border-inline-start: 0; }
}

/* The sub-ID note: a small panel under its button. */
.help-pop { position: relative; }
.help-pop-panel {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 5;
  inline-size: min(360px, 86vw); display: grid; gap: var(--gap-2); font-size: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: var(--gap-3);
}
.help-pop-panel[hidden] { display: none; }
.help-pop-panel p { margin: 0; color: var(--ink-2); }
.help-pop-sample {
  font-family: var(--font-mono); font-size: 12px; background: var(--tint); border-radius: var(--radius-s);
  padding: 6px 8px; direction: ltr; text-align: start; overflow-wrap: anywhere;
}

/* The create/edit dialog. */
.code-row { display: flex; align-items: stretch; min-inline-size: 0; }
.code-prefix {
  display: flex; align-items: center; flex: none; padding-inline: 10px; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--ink-2); background: var(--tint); border: 1px solid var(--line); border-inline-end: 0;
  border-start-start-radius: var(--radius-s); border-end-start-radius: var(--radius-s);
}
.code-row input { border-start-start-radius: 0; border-end-start-radius: 0; font-family: var(--font-mono); font-size: 13px; }
.code-row code { display: flex; align-items: center; padding: 0 11px; border: 1px solid var(--line); border-start-end-radius: var(--radius-s); border-end-end-radius: var(--radius-s); background: var(--card); }
.region-state.is-ok { color: var(--ok); font-weight: 600; }
.region-state code { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.preview-note { display: block; margin-block-start: 2px; color: var(--ink-2); font-weight: 400; }

/* The QR dialog. */
.qr-box { display: grid; place-items: center; padding: var(--gap-3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); }
.qr-box svg { inline-size: min(240px, 100%); block-size: auto; display: block; }
.qr-box:empty { display: none; }

/* Off-screen holder for the clipboard fallback (select + copy needs a real, focusable-looking field). */
.copy-scratch { position: fixed; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

/* ── Dashboard ───────────────────────────────────────────────────────── */

/* The period chips sit with the date fields in the one filter bar. */
.affapp .filters .preset-chips { align-self: end; }

/* The chart: clicks are bars (portal's .chart-bar), sign-ups a line on the other axis. Time runs left to
   right in every language, so the host is pinned to ltr; the labels inside are the page's own text. */
.dash-chart { direction: ltr; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--gap-1) var(--gap-4); font-size: 12px; color: var(--ink-2); }
.chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend-swatch { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--brand); }
.legend-swatch.is-line { block-size: 3px; border-radius: 2px; background: var(--accent); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--card); stroke: var(--accent); stroke-width: 2; }

/* Top links: a small table with the link's code under its name, then the way on to the full list. */
.affapp .card-link { justify-self: start; }
[data-region="links-top"] .link-url { text-align: match-parent; } /* the code is ltr text but sits at the cell's start edge in a right-to-left page too */

/* Balance: pending, available and paid out side by side; the slot under them is for the payout request. */
.balance-grid { display: grid; gap: var(--gap-3); grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.balance-item { display: grid; gap: 2px; align-content: start; }
.balance-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.balance-actions:empty { display: none; }

/* Getting started: the open steps are links to where they are done, the finished ones are struck through. */
.check-progress { margin: 0; font-variant-numeric: tabular-nums; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-2); }
.checklist li { display: flex; gap: var(--gap-2); align-items: center; font-size: 14px; }
.checklist .check-mark { flex: none; color: var(--ink-2); }
.checklist li.is-done .check-mark { color: var(--ok); }
.checklist li.is-done .check-label { color: var(--ink-2); text-decoration: line-through; }
.checklist li.is-open a { font-weight: 600; }

/* Recent activity: one line per event, the date at the end. */
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed-item { display: flex; gap: var(--gap-2); align-items: baseline; padding-block: 9px; border-block-end: 1px solid var(--line-soft); font-size: 14px; }
.feed-item:last-child { border-block-end: 0; }
.feed-dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand); align-self: center; }
.feed-commission .feed-dot { background: var(--ok); }
.feed-reversal .feed-dot { background: var(--alert); }
.feed-text { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.feed-when { flex: none; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Reports ─────────────────────────────────────────────────────────── */

/* The group-by chips sit in a field of their own, under their label, level with the other controls. */
.reports-page .filters .field > .preset-chips { align-self: start; }

/* The table: the totals row closes it. A row with no link / sub-ID / country is muted; a sub-ID reads left to right. */
.report-table tfoot th, .report-table tfoot td, .commissions-table tfoot th, .commissions-table tfoot td { background: #EEF6F5; font-weight: 700; border-block-start: 1px solid var(--line); border-block-end: 0; }
.report-none { color: var(--ink-2); font-style: italic; }
.report-key { font-family: var(--font-mono); font-size: 12.5px; unicode-bidi: isolate; overflow-wrap: anywhere; }
.report-note { margin: 0; }

/* The ten busiest rows as horizontal bars. Bars grow from the left in every language (the host is pinned to ltr, like the
   dashboard chart); the labels inside are the page's own text. */
.report-bars { display: grid; gap: var(--gap-2); }
.report-bars-title { margin: 0; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.hbar-host { direction: ltr; }
.hbar-host svg { display: block; max-inline-size: 640px; }
.hbar-label { fill: var(--ink); font: 12px var(--font-sans); }
.hbar-value { fill: var(--ink-2); font: 11px var(--font-mono); }

/* ── Customers ───────────────────────────────────────────────────────── */

/* One grid column that may shrink below the table's width: the table scrolls inside its own wrapper (like Links). */
.customers-page { grid-template-columns: minmax(0, 1fr); }
.customers-table td { vertical-align: middle; }
/* Column labels may wrap (they are long in some languages); a number, a date and an amount stay on one line. */
.customers-table thead th { white-space: normal; vertical-align: bottom; }
.customers-table th, .customers-table td { padding-inline: 10px; }
.customers-no { font-weight: 700; font-variant-numeric: tabular-nums; }
.customers-when { white-space: nowrap; }
.customers-badges { display: flex; gap: var(--gap-1); flex-wrap: wrap; align-items: center; }

/* ── Commissions ─────────────────────────────────────────────────────── */

/* One grid column that may shrink below the table's width: the table scrolls inside its own wrapper (like Customers). */
.commissions-page { grid-template-columns: minmax(0, 1fr); }
/* The balance sits above the table with room to breathe; its figures are the dashboard's. */
.commissions-balance { margin-block-end: var(--gap-4); }
.commissions-table td { vertical-align: middle; }
/* Column labels may wrap (they are long in some languages); a date, a number and an amount stay on one line. */
.commissions-table thead th { white-space: normal; vertical-align: bottom; }
.commissions-table th, .commissions-table td { padding-inline: 10px; }
.commissions-when { white-space: nowrap; }
/* The one free text of a line (an adjustment's note) and the payout a line went out in: small, under the chip. */
.commissions-note { margin-block-start: 4px; font-size: 12px; overflow-wrap: anywhere; }
/* A reversal and a payout take money off: the amount reads in the alert colour. */
.commissions-table .amount-neg { color: var(--alert); }

/* ── Payouts ─────────────────────────────────────────────────────────── */

/* One grid column that may shrink below the table's width: the table scrolls inside its own wrapper (like Commissions). */
.payouts-page { grid-template-columns: minmax(0, 1fr); }
/* The sentence that says whether a payout can be requested now, and if not why: calm when open, plain when closed. */
.payout-gate { margin: var(--gap-3) 0 0; padding: var(--gap-3) var(--gap-4); background: var(--tint); border-radius: var(--radius-s); font-size: 14px; line-height: 1.5; }
.payout-gate.is-ok { background: #E4F3EB; color: #105534; font-weight: 600; }
.payout-method { display: grid; gap: 2px; margin-block-start: var(--gap-3); min-inline-size: 0; }
.payout-method-link { font-size: 13px; font-weight: 600; justify-self: start; }
.payout-details { margin: 4px 0 2px; display: grid; gap: 2px; font-size: 13px; }
.payout-details div { display: grid; grid-template-columns: minmax(10ch, 16ch) minmax(0, 1fr); gap: var(--gap-2); }
.payout-details dt { color: var(--ink-2); }
.payout-details dd { margin: 0; overflow-wrap: anywhere; }
.payout-actions { display: flex; gap: var(--gap-2); flex-wrap: wrap; margin-block-start: var(--gap-3); }
.payout-actions:empty { display: none; }

/* Six columns need room: on a phone the table scrolls inside its own wrapper instead of squeezing words apart. */
.payouts-table { min-inline-size: 720px; }
.payouts-table td { vertical-align: middle; }
/* Column labels may wrap (they are long in some languages); an amount, a number and the actions stay on one line. */
.payouts-table thead th { white-space: normal; vertical-align: bottom; }
.payouts-table th, .payouts-table td { padding-inline: 10px; }
.payout-no { font-variant-numeric: tabular-nums; }
.payout-note { margin: 2px 0 0; overflow-wrap: break-word; }
.payouts-table .row-actions { display: flex; gap: 4px; justify-content: end; }

/* The request dialog: the amount, where it goes, and the billing choice (self-billing OR one of her invoices). */
.payout-amount { display: grid; gap: 2px; }
.payout-billing { display: grid; gap: var(--gap-3); margin: 0; padding: var(--gap-3); min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-s); }
.payout-billing legend { padding-inline: 6px; font-size: 13px; font-weight: 600; }
.payout-billing .check-row strong { display: block; color: var(--ink); font-size: 14px; }
.payout-sub { margin: 0; font-size: 13px; font-weight: 600; }
.payout-invoices { display: grid; gap: var(--gap-2); }
.payout-invoice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-2); }
.payout-invoice { display: flex; gap: var(--gap-2); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.payout-invoice.is-picked { border-color: var(--brand); background: var(--tint-brand); }
.payout-invoice-pick { display: flex; gap: var(--gap-2); align-items: center; flex: 1 1 200px; min-inline-size: 0; cursor: pointer; }
.payout-invoice-pick input { flex: none; accent-color: var(--brand); }
.payout-invoice-name { overflow-wrap: anywhere; font-size: 13px; }
.payout-invoice-pick .hint { white-space: nowrap; }
.payout-invoice-actions { display: flex; gap: 4px; flex: none; }
.payout-upload { display: flex; gap: var(--gap-2); align-items: center; flex-wrap: wrap; }
/* The file input is visually hidden inside its label (the label is the button); its focus shows on the label. */
.file-pick { position: relative; cursor: pointer; }
.file-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Profile (affiliates/profile) and the terms interstitial (affiliates/accept-terms) ───────────── */

.profile-page { grid-template-columns: minmax(0, 1fr); }
/* Each card is one form; the portal caps a card's form at 520px, the pairs of short fields sit side by side inside it. */
.profile-page .card > form.stack { max-inline-size: 640px; }
/* Side-by-side fields keep their own height: a hint under one of them must not stretch its neighbour's input. */
.profile-page .field-pair { align-items: start; }
.profile-page .payout-gate { margin-block-start: 0; }
.profile-page .field-error { margin: 0; }
/* The Documents card: the upload form is static, the list under it is the data region. One row per paper: the file name (the download link) over a
   kind . size . date line, and the delete button (and, while a payout request holds the paper, a chip beside it) at the inline-end. */
.documents-card .documents-list { margin-block-start: var(--gap-4); }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-2); }
.doc-row { display: flex; gap: var(--gap-2); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.doc-main { display: grid; gap: 2px; flex: 1 1 220px; min-inline-size: 0; }
.doc-name { overflow-wrap: anywhere; font-size: 13px; font-weight: 600; justify-self: start; }
.doc-actions { display: flex; gap: var(--gap-2); align-items: center; flex: none; }
.promo-current { display: grid; gap: 2px; margin: 0; }
.promo-code { font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.06em; direction: ltr; unicode-bidi: isolate; justify-self: start; }
.terms-gate { max-inline-size: 640px; }
.terms-gate > form.stack { max-inline-size: none; }
.terms-actions { display: flex; gap: var(--gap-2); flex-wrap: wrap; }

/* ── Resources (affiliates/resources): static content, copy buttons reuse .copy-btn ───────────────── */

.resources-page { grid-template-columns: minmax(0, 1fr); }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; }
.res-row { display: flex; gap: var(--gap-3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: var(--gap-2); border-block-end: 1px solid var(--line); min-inline-size: 0; }
.res-list > .res-row:last-child { border-block-end: 0; }
.res-row-main { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 260px; }
.res-url { font-family: var(--font-mono); font-size: 12.5px; direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; color: var(--ink-2); }
.res-copy { display: grid; gap: var(--gap-2); padding: var(--gap-3); border: 1px solid var(--line); border-radius: var(--radius-s); min-inline-size: 0; }
.res-copy-head { display: flex; gap: var(--gap-2); align-items: center; justify-content: space-between; }
.res-copy-title { margin: 0; font-size: 13px; font-weight: 600; }
.res-copy-text { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.res-bullets { padding-inline-start: 1.25em; display: grid; gap: 4px; }
.res-copy .hint { margin: 0; }
.res-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--gap-3); }
.res-logo { display: flex; gap: var(--gap-3); align-items: center; margin: 0; min-inline-size: 0; }
.res-logo-tile { flex: none; display: grid; place-items: center; inline-size: 120px; block-size: 120px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); }
.res-logo figcaption { display: grid; gap: 4px; justify-items: start; min-inline-size: 0; }
.res-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--gap-3); }
.res-shot { margin: 0; display: grid; gap: var(--gap-2); align-content: start; min-inline-size: 0; }
.res-shot-frame { position: relative; display: block; aspect-ratio: 16 / 10; background: #0F1519; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.res-shot-frame img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.res-shot figcaption { display: flex; gap: var(--gap-2); align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px; }
/* The banners: art and mark only, shown at their own size (never larger than the card or 640 px) and wrapped side by side where they fit. */
.res-banners { display: flex; flex-wrap: wrap; gap: var(--gap-4); align-items: flex-start; }
.res-banner { margin: 0; display: grid; gap: var(--gap-2); align-content: start; inline-size: fit-content; max-inline-size: min(100%, 640px); min-inline-size: 0; }
.res-banner img { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: #0F1519; }
.res-banner figcaption { display: grid; gap: 4px; justify-items: start; font-size: 13px; }

/* ── Printable documents (affiliates/document + statement) ───────────── */

/* A sheet of paper on the portal's paper background: the bar above it (print, back) is for the screen only. */
.doc-page { display: grid; gap: var(--gap-3); max-inline-size: 900px; margin-inline: auto; padding: var(--gap-4) var(--gutter) var(--gap-6); }
.doc-bar { display: flex; gap: var(--gap-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.doc-sheet { display: block; padding: clamp(18px, 4vw, 44px); background: #fff; color: #000; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.doc-statement { display: grid; gap: var(--gap-4); font-size: 14px; line-height: 1.5; }
.doc-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--gap-4); }
.doc-label { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.doc-name { margin: 0; font-weight: 700; }
.doc-line { margin: 0; overflow-wrap: anywhere; }
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--gap-2) var(--gap-4); margin: 0; padding-block: var(--gap-3); border-block: 1px solid var(--line); }
.doc-meta dt { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.doc-meta dd { margin: 0; overflow-wrap: anywhere; }
.doc-detail { display: block; font-size: 13px; color: var(--ink-2); }
.doc-title { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.doc-table-wrap { overflow-x: auto; }
.doc-table, .doc-totals { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th, .doc-table td, .doc-totals th, .doc-totals td { padding: 7px 8px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: top; }
.doc-table thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); border-block-end: 2px solid var(--ink); }
.doc-table .num, .doc-totals .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-empty { text-align: center; color: var(--ink-2); font-style: italic; }
.doc-totals { max-inline-size: 420px; margin-inline-start: auto; }
.doc-totals th { font-weight: 400; }
.doc-totals .doc-total-main th, .doc-totals .doc-total-main td { font-weight: 700; border-block-start: 1px solid var(--ink); }
.doc-note { margin: 0; font-size: 12px; color: var(--ink-2); }

@media print {
  @page { margin: 14mm; }
  /* Black on white, no chrome: the sheet is the page. Table borders carry the structure the shading carried on screen. */
  body.affapp.doc { background: #fff; color: #000; font-size: 11pt; }
  .no-print, [data-print] { display: none !important; }
  .doc-page { max-inline-size: none; margin: 0; padding: 0; }
  .doc-sheet { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .doc-statement, .doc-statement * { color: #000 !important; background: transparent !important; }
  .doc-statement { gap: 12pt; font-size: 10.5pt; }
  .doc-meta { border-block-color: #000; }
  .doc-table th, .doc-table td, .doc-totals th, .doc-totals td { border: 1px solid #000; }
  .doc-table-wrap { overflow: visible; }
  .doc-table thead { display: table-header-group; }
  .doc-table tr, .doc-totals tr, .doc-party { break-inside: avoid; }
  .doc-statement a { text-decoration: none; }
}