/* Affiliate panel (study started 11 October 2026; in the shop the same day). Loaded by the shop and by compare/affiliate-panel-live.html.
   Start every rule from the study's own wrapper class so nothing here can reach the rest of the shop.
   Phone rules first (the designs are made at 390px wide); laptop rules go under one @media(min-width:601px) block.
   The look is the account pages': covers, 16px names, 14px grey second lines, hairlines, serif figures; forest and the
   shop's greens only. One surface a card, no box inside a card, no rule down the left of anything. */

/* The shop draws its home page for an address it does not know; while this page shows, the home page's parts are hidden. */
html.afp-on #main>:not(.afp-page){display:none!important}

.afp.page-shell{padding-top:23px;padding-bottom:48px;min-height:0}
.afp .page-heading{margin-bottom:16px}
.afp .page-heading h1{font-size:34px;line-height:1.15}
.afp .page-heading p{margin-top:6px;max-width:none;font-size:16px;line-height:1.45;text-wrap:pretty}
.afp h1:focus{outline:none}
.afp .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.afp button{-webkit-tap-highlight-color:transparent}
.afp .afp-h2{max-width:none;margin:28px 0 8px;font:600 22px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.afp-big{font:600 46px/1.05 var(--serif);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* The covers, as the Orders page draws them: a sheet is one page, a bundle a small stack. */
.afp-cover{display:block;flex:none;width:40px;border:1px solid var(--line-strong);border-radius:3px;background:#fff}
.afp-cover .pg{display:block;border-radius:2px}
.afp .pg-cover .cv-title{font-size:var(--cv,5em)}
.afp .pg-cover .pg-top>span,.afp .pg-cover .cv-line,.afp .pg-cover .pg-foot span{visibility:hidden}
.afp-cover.is-stack{width:37px;margin-top:3px;border-color:var(--forest);box-shadow:2px -2px 0 0 #fff,3px -3px 0 0 var(--forest)}
.afp-cover.is-deep{width:35px;margin-top:6px;box-shadow:2px -2px 0 0 #fff,3px -3px 0 0 var(--forest),5px -5px 0 0 #fff,6px -6px 0 0 var(--forest)}

/* A PDF that was sold: cover, name and what it is; how many sold over what that earned. Ruled lines, no boxes. */
.afp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.afp-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.afp-row[hidden]{display:none}
.afp-copy{display:grid;gap:1px;min-width:0}
.afp-copy b,.afp-rk-top b{font:600 16px/1.3 var(--sans);letter-spacing:-.005em;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.afp-copy small,.afp-rk>small{font-size:14px;line-height:1.4;color:var(--muted)}
.afp-nums{display:grid;gap:1px;justify-items:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.afp-nums b{font:600 16px/1.3 var(--sans);color:var(--ink)}
.afp-nums small{font-size:14px;line-height:1.4;font-weight:600;color:var(--green-hover)}
.afp .afp-more{margin-top:2px;font-size:16px}

/* The partner's code and the terms, one plain row. */
.afp-code{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:14px 0 13px;border-bottom:1px solid var(--line)}
.afp-code p{font-size:16px;line-height:1.4;color:var(--muted)}
.afp-code p b{margin-left:4px;font-weight:650;letter-spacing:.07em;color:var(--ink)}
.afp-code .button{grid-row:span 2;min-height:44px;min-width:92px;padding:8px 16px;margin:0}
.afp-code small{font-size:14px;line-height:1.4;color:var(--muted);text-wrap:pretty}

/* Nothing to show: a quiet dashed box, as the shop's empty screens are. */
.afp-none{margin-top:22px;padding:22px 20px;border:1.5px dashed var(--line-strong);border-radius:var(--radius);font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.afp-none b{display:block;margin-bottom:2px;font:600 20px/1.3 var(--serif);color:var(--ink)}

/* Adds up: the forest card, the rows, the same figure again as their total, then what was paid. */
.afp-owed{padding:20px 20px 19px;border-radius:var(--radius);background:var(--forest);color:#fff}
.afp-owed h2,.afp-sum h2,.afp-bal h2{max-width:none;font:600 16px/1.3 var(--sans);letter-spacing:0}
.afp-owed h2{color:var(--mint-deep)}
.afp-owed .afp-big{margin-top:5px;color:#fff}
.afp-from{margin-top:9px;font-size:16px;line-height:1.4}
.afp-owed .afp-from{color:#e3efe6}
.afp-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:15px;font-size:16px;color:var(--ink)}
.afp-total b{font:600 26px/1 var(--serif);letter-spacing:-.02em;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Adds up, month to month (round two). The total of a month carries its state, Owed or Paid, under the count. */
.afp-total>span{display:grid;gap:4px;justify-items:start;min-width:0}
/* All months: how much of the total is owed and how much is paid, each part kept whole on its line. */
.afp-split{font-size:14px;line-height:1.4;color:var(--muted)}
.afp-split span{white-space:nowrap}
.afp-total .afp-state .icon{width:15px;height:15px;stroke-width:2.4}
/* Month menu: the shop's own menu beside "What you sold"; under the heading where both do not fit on a line. */
.afp-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:24px 0 10px}
.afp .afp-pick .afp-h2{margin:0}
.afp-pick .dd-button{flex:0 1 auto;min-width:0;height:44px}
/* Month arrows: the month is the card's heading, with the two arrows at its right. Forest while owed, pale green once paid.
   The edge of the pale card is drawn inside it, so the card is the same size in both. */
.afp-step{display:flex;align-items:center;gap:2px;margin:-9px -11px -3px 0}
.afp-step h2{flex:1;min-width:0}
.afp-owed .afp-step h2{color:#fff}
.afp-step button{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.afp-step button:disabled{opacity:.32;cursor:default}
.afp-step button:focus-visible{outline:3px solid var(--mint-deep);outline-offset:-3px}
.afp-step .icon{width:22px;height:22px}
.afp-owed .afp-all{min-height:1.4em;margin-top:3px;font-size:16px;line-height:1.4;color:var(--mint-deep)}
.afp-owed.is-paid{background:var(--mint);box-shadow:inset 0 0 0 1px var(--mint-deep);color:var(--ink)}
.afp-owed.is-paid .afp-step h2,.afp-owed.is-paid .afp-big,.afp-owed.is-paid .afp-step button{color:var(--forest)}
.afp-owed.is-paid .afp-from{color:var(--ink)}
.afp-owed.is-paid .afp-all{color:var(--muted)}
.afp-owed.is-paid .afp-step button:focus-visible{outline-color:var(--green)}
/* Month menu, what has been paid (round four).
   Paid in the card: one more line on the forest surface, under a faint rule. */
.afp-sofar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid #ffffff2e;font-size:16px;line-height:1.35;color:#fff}
.afp-sofar small{display:block;font-size:14px;line-height:1.4;color:var(--mint-deep)}
.afp-sofar b{font:600 24px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Two cards: owed and paid side by side, the same size. */
.afp-owed.is-paid h2{color:var(--forest)}
.afp-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.afp-duo .afp-owed{min-width:0;padding:16px 14px 15px}
.afp-duo .afp-big{margin-top:6px;font-size:26px;letter-spacing:-.02em}
.afp-duo .afp-from{margin-top:7px;font-size:14px;text-wrap:balance}
@media(max-width:340px){
 .afp-duo{gap:8px}
 .afp-duo .afp-owed{padding:14px 11px 13px}
 .afp-duo .afp-big{font-size:21px}
 .afp-sofar b{font-size:22px}
}
/* Every sale (compare only). On the panel: one real button under what was sold, in the shop's outlined style, so it is not
   taken for a text link. Then the page of its own, laid out as Portus Records is: a link back, the title, its own two
   menus in a row that stays in view, a strip of sums, then the days: each day a header with its count and sum over a
   strong rule, each sale under it with its time. */
.afp .afp-every{display:flex;width:100%;margin-top:18px}
.afp-every .icon,.afp-back .icon{width:18px;height:18px}
.afp .afp-back{min-height:36px;margin:0 0 4px;padding:4px 0;gap:4px;font-size:16px}
.afp-is-sales .page-heading{margin-bottom:8px}
.afp-ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.afp-ctl .dd-button{display:flex;width:100%;min-width:0}
.afp-is-sales .afp-ctl{padding:8px 0 12px}
.afp-sums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.afp-sums>div{min-width:0;padding:12px 12px 14px 0}
.afp-sums>div+div{padding-left:14px;border-left:1px solid var(--line)}
.afp-sums dt{font-size:14px;line-height:1.4;color:var(--muted)}
.afp-sums dd{margin:1px 0 0;font:600 24px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.afp-sums .is-main dd{color:var(--green)}
.afp-sums dd.afp-sub{margin-top:2px;font:400 14px/1.4 var(--sans);letter-spacing:0;color:var(--muted);white-space:normal;text-wrap:balance}
.afp-day{border-top:1px solid var(--line-strong)}
/* A day's header is the one thing that stays in view while its sales scroll (one thin line under the shop's bar), so a
   long day never loses its name. The menus and the sums scroll away: kept in view they took too much reading room. */
.afp .afp-dayhead{position:sticky;top:var(--header,64px);z-index:4;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px;max-width:none;padding:11px 0 8px;background:#fff;box-shadow:0 1px 0 var(--line);font:600 16px/1.35 var(--sans);letter-spacing:0;color:var(--ink)}
.afp-dayhead small{font-size:14px;font-weight:400;color:var(--muted);white-space:nowrap}
.afp-sales{list-style:none;margin:0;padding:1px 0 5px}
.afp-sales li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:9px 0}
.afp-sales li+li{border-top:1px solid var(--line)}
.afp-sales time{font-size:15px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.afp-what{display:grid;gap:1px;min-width:0}
.afp-what b{font:500 16px/1.3 var(--sans);color:var(--ink)}
.afp-what small{font-size:14px;line-height:1.4;color:var(--muted)}
.afp-got{font:600 16px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.afp-days{border-bottom:1px solid var(--line)}
/* A refunded sale stays on its day, on one line like any other: its name greyed, what was paid struck through, and the
   word Refunded where the earning would be. The whole line is red (the owner, 11 October 2026: "make the full refund line red"). */
.afp-sales li.is-refund>:not(.afp-sumwrap):not(.afp-cover),.afp-sales li.is-refund>:not(.afp-sumwrap):not(.afp-cover) *{color:var(--danger)}
.afp-back-word{font-weight:600;color:var(--danger)}
/* With prices: what the buyer paid is a button with a chevron. It opens a sum that belongs to the whole sale (the width
   of its words on a phone, a row of the table on a laptop) and slides open. */
.afp-paidmore{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin:0 -8px -4px;padding:0 8px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums;cursor:pointer;justify-self:start;-webkit-tap-highlight-color:transparent}
.afp-paidmore[aria-expanded="true"]{color:var(--ink)}
@media(hover:hover){.afp-paidmore:hover{color:var(--ink)}}
.afp-paidmore:focus-visible{outline:2px solid var(--forest);outline-offset:1px}
/* The chevron is bare (a disc behind it was tried and dropped: "drop the circle, i just meant the icon itself needed
   improvement"): 18px, a heavier stroke than the shop's 1.8 so it holds beside the figures, forest. The button's own box
   stays small so the line keeps its height; the part that takes the press (::before) is 48px tall and wider than the words. */
.afp-paidmore{position:relative;gap:3px}
.afp-paidmore::before{content:"";position:absolute;inset:-8px -12px}
.afp-paidmore .icon{width:18px;height:18px;color:var(--forest);stroke-width:2.3;transition:transform .2s}
.afp-paidmore[aria-expanded="true"] .icon{transform:rotate(180deg)}
.afp-sumwrap{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .22s ease,visibility 0s .22s}
.afp-sumwrap.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .22s ease,visibility 0s}
.afp-sumin{min-height:0;overflow:hidden}
.afp-sales .afp-sumwrap{grid-column:2/-1}
@media(prefers-reduced-motion:reduce){.afp-sumwrap,.afp-paidmore .icon{transition:none}}
.afp-calc{margin:8px 0 4px;padding:8px 12px;border-radius:10px;background:var(--soft);font-size:14px;line-height:1.4;color:var(--muted)}
.afp-calc div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.afp-calc dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.afp-calc .is-total{margin-top:4px;padding-top:7px;border-top:1px solid var(--line-strong)}
.afp-calc .is-total dt,.afp-calc .is-total dd{font-weight:600;color:var(--ink)}
.afp-calc .is-back dt,.afp-calc .is-back dd{color:var(--danger)}
.afp-page s{color:var(--muted)}
/* Phone layouts for a sale (12 October 2026: "not the biggest fan of this layout ... a few better directions first").
   In all four the time moves to the line under the name. */
/* Statement: words at the left, what was earned over what was paid at the right. Day cards use the same rows. */
.afp-l-stmt .afp-sales li,.afp-l-cards .afp-sales li{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start;padding:11px 0 8px}
.afp-side{display:grid;justify-items:end}
.afp-side .afp-paidmore{margin-right:0;padding-right:0}
.afp-side .afp-paidmore::before{right:-8px}
.afp-l-stmt .afp-sales .afp-sumwrap,.afp-l-cards .afp-sales .afp-sumwrap,.afp-l-line .afp-sales .afp-sumwrap{grid-column:1/-1}
/* Name across: the name has the whole width; the two figures share a line of their own under it. */
.afp-l-line .afp-sales li{grid-template-columns:minmax(0,1fr);padding:11px 0 7px}
.afp-figs{display:flex;justify-content:space-between;align-items:center;gap:12px}
.afp-figs .afp-got{display:flex;align-items:baseline;gap:6px}
.afp-figs .afp-got small{font-size:14px;font-weight:400;color:var(--muted)}
/* What was earned is the one green figure of a sale, as in the laptop's table ("show the you earned in green, the number,
   so it draws the eye"). */
.afp-l-line .afp-sales li:not(.is-refund) .afp-figs .afp-got{color:var(--green-hover)}
/* Name across v2: every size a step up. The day 20px (18), the PDF's name 17px (16), the small lines and the sum 15px
   (14), what was earned 17px (16). */
.afp-l-big.afp.afp-page .afp-dayhead{font-size:20px}
.afp-l-big .afp-dayhead small,.afp-l-big .afp-what small,.afp-l-big .afp-paidmore,.afp-l-big .afp-figs .afp-got small,.afp-l-big .afp-rows{font-size:15px}
.afp-l-big .afp-what b,.afp-l-big .afp-figs .afp-got{font-size:17px}
.afp-l-big .afp-sales li{padding:12px 0 8px}
/* Day cards: each day one soft card, its name and sum at the top; no rule between the cards. */
.afp-l-cards .afp-days{display:grid;gap:10px;margin-top:14px;border-bottom:0}
.afp-l-cards .afp-day{padding:0 14px 4px;border-top:0;border-radius:14px;background:var(--soft)}
.afp-l-cards.afp.afp-page .afp-dayhead{margin:0 -14px;padding:13px 14px 5px;border-radius:14px 14px 0 0;background:var(--soft)}
/* Picture rows: the PDF's cover at the left, as on the panel. */
.afp-l-pics .afp-sales li{grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:11px 0 9px}
.afp-l-pics .afp-sales .afp-cover{margin-top:3px}
/* Fewer rules in the four layouts ("in the mobile versions I can see, too many lines", 12 October 2026): one thin line
   above each day and nothing else. No line under a day's name, none between the sales of a day, none around the sums. */
[class*="afp-l-"] .afp-sums{border-top:0}
[class*="afp-l-"] .afp-sums>div{padding-top:6px}
[class*="afp-l-"] .afp-sums>div+div{border-left:0}
[class*="afp-l-"] .afp-days{border-bottom:0}
[class*="afp-l-"] .afp-day{border-top-color:var(--line)}
/* The day's name is a size up from the names of the PDFs under it, so the two do not read as one list ("the date should
   be a bit bigger so it doesnt blend with book titles"). */
[class*="afp-l-"].afp .afp-dayhead{padding:14px 0 3px;box-shadow:none;font-size:18px;line-height:1.3}
[class*="afp-l-"] .afp-sales{padding-bottom:8px}
[class*="afp-l-"] .afp-sales li+li{border-top:0}
.afp-l-cards .afp-day{border-top:0}
/* Round three: how the opened part looks (the owner: "Try like 1 per row, outline green block. All ways we can solve
   this issue"). .afp-rows is one figure a line; each look below boxes it, or does not. */
.afp-rows{margin:8px 0 4px;font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums}
.afp-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0}
.afp-rows dt{color:var(--muted)}
.afp-rows dd{margin:0;white-space:nowrap;color:var(--ink)}
.afp-rows .is-total{margin-top:4px;padding-top:7px;border-top:1px solid var(--line)}
.afp-rows .is-total dt,.afp-rows .is-total dd{font-weight:600;color:var(--ink)}
.afp-rows .is-back dt,.afp-rows .is-back dd{color:var(--danger)}
/* A green outline: one figure a line (block), or the three figures side by side (band). */
.afp-p-block .afp-rows,.afp-p-band .afp-box{padding:8px 12px;border:1.5px solid var(--green);border-radius:10px;background:#fff}
/* Plain lines: no box. What the buyer paid is not said again: it is the line that was pressed. */
.afp-p-lines .afp-rows,.afp-p-tint .afp-rows{margin:2px 0 4px}
.afp-p-lines .afp-rows .is-total,.afp-p-tint .afp-rows .is-total{display:none}
/* Tinted: the sale and its lines become one pale green block while it is open. */
.afp-p-tint .afp-sales li:has(.afp-sumwrap.is-open){margin:0 -10px;padding-left:10px;padding-right:10px;border-top-color:transparent;border-radius:10px;background:var(--mint)}
.afp-p-tint .afp-sales li:has(.afp-sumwrap.is-open)+li{border-top-color:transparent}
/* Floating card: over the page, as the shop's menus open, so nothing below moves. */
.afp-p-float .afp-sumwrap{position:absolute;z-index:3;display:block;opacity:0;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility 0s .16s}
.afp-p-float .afp-sumwrap.is-open{opacity:1;transform:none;transition:opacity .16s,transform .16s,visibility 0s}
.afp-p-float .afp-sumin{overflow:visible}
.afp-p-float .afp-rows{margin:0;padding:10px 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;box-shadow:0 2px 6px #1e4c2b1f,0 12px 28px #1e4c2b24}
.afp-p-float .afp-sales li{position:relative}
.afp-p-float .afp-sales .afp-sumwrap{left:0;right:0;top:calc(100% - 5px)}
.afp-p-float .afp-day:has(.afp-sumwrap.is-open){position:relative;z-index:5}
/* Three more ways to show the price. Each is what the chevron opens, in the same soft box as the sum. */
.afp-note{display:flex;align-items:center;min-height:32px;margin-bottom:-4px;font-size:14px;line-height:1.4;font-weight:400;color:var(--muted)}
.afp-box{margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums}
.afp-box dt{color:var(--muted)}
.afp-box dd{margin:0;color:var(--ink)}
.afp-box .is-total dt,.afp-box .is-total dd{font-weight:600;color:var(--ink)}
.afp-box .is-back dt,.afp-box .is-back dd{color:var(--danger)}
/* Columns: three figures side by side, what was paid at the right. */
.afp-trio{display:grid;grid-template-columns:1fr 1fr auto;gap:6px 12px}
.afp-trio .is-total,.afp-trio .is-back{text-align:right}
.afp-trio .is-back{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:7px;border-top:1px solid var(--line-strong)}
/* Steps on a phone: one step a line, the arrow before what is left after it. */
.afp-walk>div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.afp-walk>.icon{display:none}
.afp-walk .is-total~.is-back{margin-top:4px;padding-top:7px;border-top:1px solid var(--line-strong)}
.afp-is-sales .afp-more{margin-top:6px}
.afp-is-sales .afp-none{margin-top:14px}
@media(max-width:340px){
 .afp-ctl{gap:8px}
 .afp-ctl .dd-button{padding:0 10px;gap:6px}
 .afp-sums dd{font-size:21px}
 .afp-sales li{grid-template-columns:44px minmax(0,1fr) auto;column-gap:8px}
}
.afp-paid{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.afp-paid li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.35;color:var(--ink)}
.afp-paid small{display:block;font-size:14px;color:var(--muted)}
.afp-paid b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Best sellers: what is owed on the shop's pale green, then ranked rows with a bar each. */
.afp-sum{padding:18px 20px 16px;border:1px solid var(--mint-deep);border-radius:var(--radius);background:var(--mint)}
.afp-sum h2{color:var(--forest)}
.afp-sum .afp-big{margin-top:5px;color:var(--forest)}
.afp-sum dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 0}
.afp-sum dt{font-size:14px;line-height:1.4;color:var(--muted)}
.afp-sum dd{margin:0;font:600 24px/1.2 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.afp-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 10px;padding:3px;border:1px solid var(--line-strong);border-radius:11px;background:#fff}
.afp-switch button{min-height:40px;border:0;border-radius:8px;background:transparent;font:600 16px/1.2 var(--sans);color:var(--muted);cursor:pointer}
.afp-switch button[aria-pressed="true"]{background:var(--forest);color:#fff}
.afp-rank{list-style:none;margin:0;padding:0;counter-reset:afp;border-top:1px solid var(--line-strong)}
.afp-rank li{counter-increment:afp;display:grid;grid-template-columns:18px 40px minmax(0,1fr);column-gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.afp-rank li[hidden]{display:none}
.afp-rank li::before{content:counter(afp);font:600 18px/1 var(--serif);color:var(--green);text-align:center;font-variant-numeric:tabular-nums}
.afp-rk{min-width:0}
.afp-rk-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline}
.afp-rk-top span{font-size:16px;font-weight:600;color:var(--green-hover);font-variant-numeric:tabular-nums;white-space:nowrap}
.afp-rk>small{display:block}
.afp-bar{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:10px;align-items:center;margin-top:6px}
.afp-track{height:8px;border-radius:4px;background:var(--mint)}
.afp-track i{display:block;height:100%;border-radius:4px;background:var(--green)}
.afp-bar span{font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Month by month: plain figures, then a card a month. A card is one white surface and opens in place. */
.afp-bal h2{color:var(--muted)}
.afp-bal .afp-big{margin-top:3px;color:var(--forest)}
.afp-bal .afp-from{color:var(--muted)}
.afp-k-months .afp-code{margin-top:8px;border-top:1px solid var(--line)}
.afp-months{display:grid;gap:10px;margin-top:20px}
.afp-month{border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff}
.afp-month-top{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;column-gap:10px;align-items:center;min-height:68px;padding:12px 14px 12px 16px;list-style:none;cursor:pointer}
.afp-month-top::-webkit-details-marker{display:none}
.afp-month.is-none .afp-month-top{cursor:default}
.afp-when,.afp-amt{display:grid;gap:2px;min-width:0}
.afp-amt{justify-items:end}
.afp-when b{font:600 18px/1.3 var(--sans);color:var(--ink)}
.afp-when small{font-size:14px;line-height:1.4;color:var(--muted)}
.afp-amt b{font:600 18px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.afp-state{display:inline-flex;align-items:center;gap:3px;font-size:14px;line-height:1.4;font-weight:600;white-space:nowrap}
.afp-state.is-owed{padding:0 9px;border-radius:999px;background:var(--forest);color:#fff}
.afp-state.is-paid{color:var(--green-hover)}
.afp-state .icon{width:15px;height:15px;stroke-width:2.4}
.afp-month-top>.icon{color:var(--muted);transition:transform .16s}
.afp-month[open]>.afp-month-top>.icon{transform:rotate(180deg)}
.afp-month .afp-list{margin:0 16px;border-top-color:var(--line)}
.afp-month .afp-row:last-child{border-bottom:0}
.afp-month .afp-more{margin:0 16px 6px}

@media(max-width:340px){
 .afp .page-heading h1{font-size:30px}
 .afp-big{font-size:38px}
 .afp-owed,.afp-sum{padding-left:16px;padding-right:16px}
 .afp-row{column-gap:10px}
 .afp-rank li{grid-template-columns:16px 36px minmax(0,1fr);column-gap:9px}
 .afp-rank .afp-cover{width:36px}
 .afp-rank .afp-cover.is-stack{width:33px}
 .afp-rank .afp-cover.is-deep{width:31px}
 .afp-month-top{padding-left:13px;padding-right:11px}
 .afp-month .afp-list{margin:0 13px}
 .afp-when b,.afp-amt b{font-size:17px}
}

/* Laptop (round two, 11 October 2026): the phone's pick arranged three ways. From 601 to 959px each is one column in the
   phone's order, kept to a readable width; the columns start at 960px. Measured at 1366 by 657.
   Round one (Sales first, Three columns, Table) was turned down: thin columns, 34px covers, wide gaps. Here the rows are
   the phone's own, nothing is thinner than half the page, and the forest card is as large as on the phone or larger. */
@media(min-width:601px){
 .afp.page-shell{padding-top:24px;padding-bottom:64px}
 .afp .page-heading{display:block;margin-bottom:16px}
 .afp .page-heading h1{font-size:38px}
 .afp .page-heading p{margin-top:4px;font-size:17px}
 .afp-pc.wrap{max-width:728px}
 .afp-pc .afp-cols{display:flex;flex-direction:column}
 .afp-pc .afp-pick{margin-top:26px}
 .afp-pc .afp-pay .afp-none,.afp-pc .afp-main .afp-none{margin-top:0}
 /* The total's state sits beside the count. */
 .afp-pc .afp-total>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
 /* The card across the page: until 960px it is the phone's card with the code under a faint rule. */
 .afp-wide .afp-code{margin-top:16px;padding:14px 0 0;border:0;border-top:1px solid #ffffff2e}
 .afp-wide .afp-code p{color:#e3efe6}
 .afp-wide .afp-code p b{color:#fff}
 .afp-wide .afp-code small{color:var(--mint-deep)}
 /* Shelf: a row of covers. The cover carries the name, so the written name is kept for screen readers only. */
 .afp-k-pc-shelf .afp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:22px 16px;padding-top:16px;border-top:1px solid var(--line-strong)}
 .afp-pc.afp-k-pc-shelf .afp-row{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:0;border:0}
 .afp-k-pc-shelf .afp-row[hidden]{display:none}
 .afp-pc.afp-k-pc-shelf .afp-row .afp-cover{width:100%;margin:0 0 10px}
 .afp-pc.afp-k-pc-shelf .afp-row .afp-cover.is-stack{width:calc(100% - 3px)}
 .afp-pc.afp-k-pc-shelf .afp-row .afp-cover.is-deep{width:calc(100% - 6px)}
 .afp-k-pc-shelf .afp-nums{order:1;justify-items:start;gap:0}
 .afp-k-pc-shelf .afp-copy{order:2;margin-top:3px}
 .afp-k-pc-shelf .afp-copy b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .afp-k-pc-shelf .afp-copy small span{display:none}
 .afp-k-pc-shelf .afp-total{padding-top:10px}
 .afp-k-pc-shelf .afp-pay{max-width:560px;margin-top:8px}
}
@media(min-width:960px){
 .afp-pc.wrap{max-width:1200px}
 .afp-pc .afp-cols{display:grid;align-items:start}
 .afp-pc .afp-pick{margin-top:0;flex-wrap:nowrap}
 .afp-pc .afp-pay>.afp-h2{margin-top:4px}
 .afp-pc .afp-row{grid-template-columns:36px minmax(0,1fr) auto;padding:5px 0}
 .afp-pc .afp-row .afp-cover{width:36px}
 .afp-pc .afp-row .afp-cover.is-stack{width:33px}
 .afp-pc .afp-row .afp-cover.is-deep{width:31px}

 /* Two halves: the money on the left, what was sold on the right, each half the page. */
 .afp-k-pc-halves .afp-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 72px}
 .afp-k-pc-halves .afp-side{grid-column:1}
 .afp-k-pc-halves .afp-pay{grid-column:1;grid-row:2}
 .afp-k-pc-halves .afp-pay>.afp-h2{margin-top:20px}
 .afp-k-pc-halves .afp-main{grid-column:2;grid-row:1/3;padding-top:5px}

 /* Card across: what is owed, the words beside the figure, the code at the right; one surface. */
 .afp-wide{display:grid;grid-template-columns:auto minmax(0,1fr) 348px;align-items:end;column-gap:26px;padding:17px 22px 19px 26px}
 .afp-wide .afp-from{margin:0 0 6px}
 .afp-wide .afp-code{align-self:center;margin:0;padding:0;border:0}
 .afp-k-pc-hero .afp-wide,.afp-k-pc-shelf .afp-wide{margin-bottom:16px}
 .afp-k-pc-hero .page-heading,.afp-k-pc-shelf .page-heading{margin-bottom:12px}
 .afp-k-pc-hero .afp-pick{margin-bottom:6px}
 .afp-pc.afp-k-pc-hero .afp-row{padding:4px 0}
 .afp-k-pc-hero [data-afp-list] .afp-total{padding-top:10px}
 .afp-k-pc-hero .afp-cols{grid-template-columns:minmax(0,1fr) 300px;gap:56px}
 .afp-k-pc-hero .afp-list{display:grid;grid-template-rows:repeat(var(--half,4),auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:44px}
}
@media(min-width:960px) and (max-width:1179px){
 .afp-k-pc-halves .afp-cols{column-gap:48px}
 .afp-wide{grid-template-columns:auto minmax(0,1fr) 300px;column-gap:20px}
 .afp-k-pc-hero .afp-cols{grid-template-columns:minmax(0,1fr) 270px;gap:36px}
 .afp-k-pc-hero .afp-list{column-gap:28px}
}

/* Laptop, round three: minimal ("there has to be more minimal options"). The same parts with fewer words: no line under
   the heading or under the figure, the code as one line with Copy as a link, a payment as one line, "Owed" as plain words.
   Forest only on the card; everything else is ink, grey and hairlines. */
@media(min-width:601px){
 .afp-min .page-heading{margin-bottom:14px}
 .afp-codeline{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:16px;line-height:1.4;color:var(--muted)}
 .afp-codeline b{font-weight:650;letter-spacing:.07em;color:var(--ink)}
 .afp .afp-codeline .text-button{min-height:32px;margin:0 0 0 8px;padding:2px 0;font-size:16px}
 .afp-paid-min li{padding:10px 0}
 .afp-min .afp-state.is-owed{padding:0;border-radius:0;background:none;color:var(--forest)}
 .afp-min .afp-owed{padding:20px 22px 22px}
 .afp-slim{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-bottom:22px}
 .afp-min .afp-slim{padding:13px 22px 14px 24px}
 .afp-slim .afp-big{margin:0;font-size:34px}
 .afp-slim .afp-codeline{margin:0 0 0 auto;color:#e3efe6}
 .afp-slim .afp-codeline b{color:#fff}
 .afp .afp-slim .afp-codeline .text-button{color:#fff;text-decoration-color:#ffffff80}
}
@media(min-width:960px){
 .afp-k-pc-min .afp-cols{grid-template-columns:400px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 104px}
 .afp-k-pc-min .afp-side{grid-column:1}
 .afp-k-pc-min .afp-pay{grid-column:1;grid-row:2}
 .afp-k-pc-min .afp-pay>.afp-h2{margin-top:34px}
 .afp-k-pc-min .afp-main{grid-column:2;grid-row:1/3;padding-top:5px}
 .afp-k-pc-slim .afp-cols{grid-template-columns:minmax(0,1fr) 280px;gap:72px}
 .afp-k-pc-slim .afp-list{display:grid;grid-template-rows:repeat(var(--half,4),auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:48px}
}
@media(min-width:960px) and (max-width:1179px){
 .afp-k-pc-min .afp-cols{grid-template-columns:340px minmax(0,1fr);column-gap:56px}
 .afp-k-pc-slim .afp-cols{grid-template-columns:minmax(0,1fr) 250px;gap:40px}
 .afp-k-pc-slim .afp-list{column-gap:28px}
}

/* Every sale on a laptop. The button on the panel keeps its own width. From 960px the page is a ledger across the page,
   as Portus Records is: the title with the two menus at its right, three sums, the column names, all kept in view under
   the shop's bar at first, now only the column names; under them a table in which the day is a header down the left of its sales. Text is set left in every
   column, each column at a fixed place. From 601 to 959px the page is the phone's list. */
@media(min-width:601px){
 .afp .afp-every{display:inline-flex;width:auto}
}
@media(min-width:960px){
 .afp-top{padding-top:6px}
 /* Only the row of column names stays in view. The title, menus and sums scroll away (the owner: kept there, they were
    "taking so much reading space"). */
 .afp-names{position:sticky;top:var(--header,76px);z-index:5;background:#fff}
 .afp-headbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:12px}
 .afp-is-sales .afp-headbar .page-heading{margin:0}
 .afp-is-sales .afp-headbar .afp-ctl{display:flex;gap:10px;padding:0}
 .afp-headbar .afp-ctl .dd-button{width:196px}
 .afp-headbar .afp-ctl .dd-button:last-of-type{width:300px}
 .afp-is-sales.afp-pc .afp-sums{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-bottom:1px solid var(--line)}
 .afp-is-sales.afp-pc .afp-sums>div{padding:11px 24px 13px 0}
 .afp-is-sales.afp-pc .afp-sums>div+div{padding-left:24px}
 .afp-is-sales.afp-pc .afp-sums dd{font-size:26px}
 .afp-is-sales.afp-pc .afp-sums dd.afp-sub{font-size:14px}
 .afp-ledger{width:100%;border-collapse:collapse;table-layout:fixed}
 .afp-ledger col.c-day{width:252px}
 .afp-ledger col.c-time{width:84px}
 .afp-ledger col.c-meta{width:var(--c-meta)}
 .afp-ledger col.c-paid{width:var(--c-paid)}
 .afp-ledger col.c-got{width:var(--c-got)}
 .afp-ledger th,.afp-ledger td{padding:12px 16px 12px 0;font-size:16px;line-height:1.4;text-align:left;vertical-align:top}
 .afp-ledger-head th{padding:10px 16px 9px 0;font-size:14px;font-weight:600;color:var(--muted)}
 /* The table's own column names are kept for screen readers; the ones in view are the row above it. */
 .afp-ledger-body thead th{height:0;padding:0;border:0;font-size:0;line-height:0;overflow:hidden}
 /* The rule under the column names stays with them; each later day starts on a rule of its own. */
 .afp-ledger-head{border-bottom:1px solid var(--line-strong)}
 .afp-ledger tbody{border-top:1px solid var(--line-strong)}
 .afp-ledger-body tbody:first-of-type{border-top:0}
 .afp-ledger tbody th{font-weight:400}
 .afp-ledger tbody th b{display:block;font-weight:600;color:var(--ink)}
 .afp-ledger tbody th small{display:block;font-size:14px;color:var(--muted)}
 /* The day's name stays in view down a long day, under the part that stays at the top. */
 .afp-daycell{position:sticky;top:calc(var(--header,76px) + var(--afp-top,40px) + 12px)}
 .afp-ledger tbody tr+tr td{border-top:1px solid var(--line)}
 .afp-ledger td.c-time{color:var(--muted);font-variant-numeric:tabular-nums}
 .afp-ledger td.c-pdf{font-weight:500;color:var(--ink)}
 .afp-ledger td.c-meta{color:var(--muted)}
 .afp-ledger td.c-paid{color:var(--ink);font-variant-numeric:tabular-nums}
 .afp-ledger td.c-got{padding-right:0;font-weight:600;color:var(--green-hover);font-variant-numeric:tabular-nums}
 .afp-ledger-body{border-bottom:1px solid var(--line)}
 .afp-ledger tbody tr.is-refund td,.afp-ledger tbody tr.is-refund td *{color:var(--danger)}
 .afp-ledger td.c-paid .afp-paidmore::before{inset:-8px -12px}
 /* The other two boxes on a laptop: figures side by side, run in from the right, what was paid under its column. */
 .afp-ledger .afp-box{display:flex;justify-content:flex-end;align-items:center;gap:0;margin:0 0 12px;padding:10px 0 10px 16px;font-size:14px}
 .afp-ledger .afp-box>div{display:block;padding:0 36px 0 0;border:0;text-align:left}
 .afp-ledger .afp-box dt{white-space:nowrap}
 .afp-ledger .afp-box dd{font-size:16px}
 .afp-ledger .afp-box>.is-total{flex:none;width:var(--c-paid);padding:0}
 .afp-ledger .afp-box>.is-total:last-child{margin-right:var(--c-got)}
 .afp-ledger .afp-box>.is-total~.is-back{flex:none;width:var(--c-got);margin:0;padding:0;border:0}
 .afp-ledger .afp-walk dt::first-letter{text-transform:uppercase}
 .afp-ledger .afp-walk>div{padding-right:12px}
 .afp-ledger .afp-walk>.icon{display:block;flex:none;width:18px;height:18px;margin-right:12px;color:var(--forest)}
 .afp-ledger td.c-paid .afp-paidmore{min-height:30px;margin:-4px -8px;font-size:16px;color:var(--ink)}
 /* With prices: the sum is a row of its own under the sale, from the PDF's name to the right edge, its figures side by
    side with the last one, what the buyer paid, at the right. Shut, the row has no height. */
 .afp-ledger tbody tr.afp-sumrow td{padding:0;border-top:0}
 .afp-ledger{--c-meta:228px;--c-paid:132px;--c-got:112px}
 /* What the buyer paid sits under its own column, a refund under "You earned"; the steps before them run in from the right. */
 .afp-ledger .afp-calc{display:flex;justify-content:flex-end;margin:0 0 12px;padding:10px 0 10px 16px}
 .afp-ledger .afp-calc div{display:block;padding:0 36px 0 0}
 .afp-ledger .afp-calc dd{font-size:16px}
 .afp-ledger .afp-calc dt{white-space:nowrap}
 .afp-ledger .afp-calc .is-total{flex:none;width:var(--c-paid);margin:0;padding:0;border-top:0}
 .afp-ledger .afp-calc .is-total:last-child{margin-right:var(--c-got)}
 .afp-ledger .afp-calc .is-back{flex:none;width:var(--c-got);padding:0}
 .afp-ledger .afp-tail{display:none}
 /* Round three on a laptop. Block: under the last two columns, its words starting where "Buyer paid" does. */
 .afp-ledger .afp-rows dd{font-size:16px}
 .afp-p-block .afp-ledger .afp-rows{box-sizing:border-box;width:calc(var(--c-paid) + var(--c-got) + 12px);margin:0 0 12px auto;padding-left:10.5px}
 .afp-p-band .afp-ledger .afp-box{padding:10px 0 10px 16px}
 .afp-p-band .afp-ledger .afp-box>.is-total:last-child{margin-right:calc(var(--c-got) - 1.5px)}
 .afp-p-band .afp-ledger .afp-box>.is-total~.is-back{width:calc(var(--c-got) - 1.5px)}
 /* Lines: each figure a line of the table, its name under "Grade and subject" and its amount under "Buyer paid". */
 .afp-p-lines .afp-ledger .afp-rows,.afp-p-tint .afp-ledger .afp-rows{margin:-6px 0 10px}
 .afp-p-lines .afp-ledger .afp-rows div,.afp-p-tint .afp-ledger .afp-rows div{display:grid;grid-template-columns:1fr var(--c-meta) var(--c-paid) var(--c-got);gap:0}
 .afp-p-lines .afp-ledger .afp-rows div.is-total,.afp-p-tint .afp-ledger .afp-rows div.is-total{display:none}
 .afp-p-lines .afp-ledger .afp-rows dt,.afp-p-tint .afp-ledger .afp-rows dt{grid-column:2}
 .afp-p-lines .afp-ledger .afp-rows dd,.afp-p-tint .afp-ledger .afp-rows dd{grid-column:3;font-size:14px}
 .afp-p-tint .afp-ledger tbody tr:has(.afp-paidmore[aria-expanded="true"])>td,.afp-p-tint .afp-ledger tbody tr.afp-sumrow:has(.afp-sumwrap.is-open)>td{background:var(--mint)}
 .afp-p-tint .afp-ledger tbody tr:has(.afp-paidmore[aria-expanded="true"])>td.c-time,.afp-p-tint .afp-ledger tbody tr.afp-sumrow:has(.afp-sumwrap.is-open)>td:first-child{box-shadow:-12px 0 0 var(--mint)}
 .afp-p-tint .afp-ledger tbody tr:has(.afp-paidmore[aria-expanded="true"])>td.c-got,.afp-p-tint .afp-ledger tbody tr.afp-sumrow:has(.afp-sumwrap.is-open)>td:last-child{box-shadow:12px 0 0 var(--mint)}
 /* Floating card: hangs from the right of the table, under what the buyer paid; the row under it keeps no height. */
 .afp-p-float .afp-ledger tbody tr.afp-sumrow td{position:relative}
 .afp-p-float .afp-ledger .afp-sumwrap{left:auto;right:0;top:-8px;width:calc(var(--c-paid) + var(--c-got) + 14px)}
}
@media(min-width:960px) and (max-width:1179px){
 .afp-headbar .afp-ctl .dd-button{width:172px}
 .afp-headbar .afp-ctl .dd-button:last-of-type{width:230px}
 .afp-ledger col.c-day{width:214px}
 .afp-ledger col.c-time{width:70px}
 .afp-ledger{--c-meta:196px;--c-paid:112px;--c-got:104px}
 .afp-ledger .afp-calc div{padding-right:24px}
}

/* The shop's short page for someone the panel is not for yet (signed out, not an affiliate), 21 October 2026. */
.afp-gate .afp-none .button{margin-top:16px}