/* Lock and Lay: the Sales panel's look (#2031), "Tidy" (picked from three, 2026-10-13): the game's grey, the display face on
   headings, tabs and money, and colour only where it means something: gold for money in and what a buyer pays, green
   for what a sale earned, and a coloured rule on each kind of section (offers gold, wanted ads teal, offers out blue).
   Everything sits inside .slp, the panel's wrapper (ui.js renderSales; the phone's is in mobile.css). */
.slp { --sl-gold: #8a5a00; --sl-green: #2f7f48; --sl-teal: #1f7c86; --sl-blue: #3f78a3; --sl-font: var(--gmf, 'Lilita One'), 'Arial Rounded MT Bold', var(--sans); }
:root[data-theme="dark"] .slp { --sl-gold: #f1cd6a; --sl-green: #6fcf8a; --sl-teal: #6fd0d8; --sl-blue: #8cbfe3; }

/* tabs: the display face, an underline in gold on the open one */
.slp > .tabs { border: 0; border-bottom: 1px solid var(--rule-2); background: none; padding: 0; border-radius: 0; }
.slp > .tabs button { flex: none; font: 400 15px/1 var(--sl-font); letter-spacing: .01em; color: var(--ink-3); padding: 12px 16px; border-radius: 0; background: none; box-shadow: none; }
.slp > .tabs button:hover { color: var(--ink); }
.slp > .tabs button.on { color: var(--ink); background: none; box-shadow: inset 0 -3px 0 var(--sl-gold); }

/* section headings: the display face and a coloured rule for the kind of section */
.slp .section[data-ico] { font: 400 16px/1 var(--sl-font); letter-spacing: .02em; text-transform: none; color: var(--ink); margin-top: 22px; padding-left: 12px; border-left: 4px solid #e3a21f; }
.slp .section[data-ico]::after { display: none; }
.slp .section[data-ico="wanted"] { border-left-color: #2a95a0; }
.slp .section[data-ico="out"] { border-left-color: #4f8bb3; }

/* the numbers: ruled, big, money in colour */
.slp :is(.sl-stats, .nb-tiles) { border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.slp :is(.sl-stats > div, .nb-tile) b { font: 400 26px/1.05 var(--sl-font); letter-spacing: .01em; }
.slp :is([data-k="cash"], [data-k="profit"]) b { color: var(--sl-gold); }
.slp [data-k="avg"] b { color: var(--sl-green); }
.slp .nb-tile.neg b { color: var(--brick, #c0563f); }

/* offers, wanted ads and the ledger */
.slp :is(.sl-offer, .sl-ad) { border-radius: 12px; }
.slp .sl-name, .slp .sl-ad header b { font: 400 16px/1.15 var(--sl-font); letter-spacing: .01em; }
.slp .sl-price { font: 400 21px/1 var(--sl-font); color: var(--sl-gold); }
.slp .sl-row .sl-price { color: var(--sl-green); }
.slp .sl-out .sl-price { font-size: 17px; color: var(--sl-gold); }
.slp .sl-terms .sl-tp b, .slp .sl-pmoney b, .slp .sl-bud b { font: 400 20px/1 var(--sl-font); color: var(--sl-gold); }
.slp .sl-pmoney b { color: var(--sl-green); }
.slp .sl-month { font: 400 16px/1 var(--sl-font); letter-spacing: .01em; }
.slp .sl-month span { color: var(--sl-gold); }
.slp button.primary { font: 400 14.5px/1 var(--sl-font); letter-spacing: .02em; border-radius: 10px; }
.slp .sl-sub-h { font: 400 14px/1 var(--sl-font); letter-spacing: .02em; text-transform: none; color: var(--ink-2); }

/* Numbers: card headings and the big figures in the display face */
.slp .nb-head h4 { font: 400 16px/1.1 var(--sl-font); letter-spacing: .01em; }
.slp .nb-big { font: 400 30px/1 var(--sl-font); color: var(--sl-gold); }
.slp .nb-rt b { font: 400 16px/1 var(--sl-font); color: var(--sl-gold); }
.slp .nb-name { font-weight: 600; }

/* Finances: the same tiles, figures and headings */
.slp .fn-tiles { border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; }
.slp .fn-tile b { font: 400 25px/1.05 var(--sl-font); letter-spacing: .01em; }
.slp .fn-tile b small { font-family: var(--sans); }
.slp .fn-tile.in b { color: var(--sl-green); }
.slp .fn-seg button { font: 400 13.5px/1 var(--sl-font); letter-spacing: .02em; padding: 7px 14px; }
.slp .fn-seg button.on { background: var(--sl-gold); color: var(--paper); }
.slp :is(.fn-amt, .fn-eater b, .fn-feedline b) { font: 400 15px/1 var(--sl-font); letter-spacing: .01em; }

/* the phone (Market › Sales): its rows are row-cards; Sold rows earn (green), Bought rows spend (gold) */
.slp .section[data-ico="sold"] { border-left-color: #3d9456; }
.slp .section[data-ico="bought"] { border-left-color: #4f8bb3; }
.slp .row-card .t { font: 400 16px/1.2 var(--sl-font); letter-spacing: .01em; }
.slp .row-card .v { font: 400 18px/1 var(--sl-font); color: var(--sl-gold); }
.slp .section[data-ico="sold"] ~ .row-card .v { color: var(--sl-green); }
.slp .section[data-ico="bought"] ~ .row-card .v { color: var(--sl-gold); }
.slp .row-card .v button { font: 400 13.5px/1 var(--sl-font); }
.slp .fn-sub.seg button { font: 400 14px/1 var(--sl-font); letter-spacing: .02em; }

/* ---- Sales in three tabs (#2076): Buyers, History, Money, on both clients (client/js/salesview.js) ---- */
.slp { --sl-red: #c0563f; --sl-amber: #a8650a; --sl-card: var(--paper-2); --sl-line: var(--bl-line, var(--rule)); }
:root[data-theme="dark"] .slp { --sl-red: #e2775f; --sl-amber: #f0a03c; }
.slp :is(.sl-gt, .sl-histsum) .green { color: var(--sl-green); } .slp :is(.sl-gt, .sl-histsum) .gold { color: var(--sl-gold); } .slp .sl-gt .warn { color: var(--sl-amber); } .slp .sl-gt .neg { color: var(--sl-red); } /* only these figures: .warn is also the amber chip (.wurg.warn, .tag.warn) */

/* the tabs: Buyers carries a red count of who is waiting */
.slp .sl-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.slp .sl-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #d9432f; color: #fff; font: 700 11.5px/1 var(--sans); font-style: normal; letter-spacing: 0; }
.slp .section[data-ico] { display: flex; align-items: center; }
.slp .section[data-ico] small { margin-left: 8px; font: 500 13px/1 var(--sans); letter-spacing: 0; color: var(--ink-3); }
.slp .section[data-ico] .wi-q { margin-left: auto; }

/* at a glance: two or three tiles */
.slp .sl-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.slp .sl-glance.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slp .sl-glance.n1 { grid-template-columns: minmax(0, 1fr); }
.slp .sl-gt { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 11px 14px 12px; border: 1px solid var(--sl-line); border-radius: 12px; background: var(--sl-card); }
.slp .sl-gt b { font: 400 22px/1 var(--sl-font); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slp .sl-gf { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Accept good deals: the one big button over everything, and what it never sends */
.slp .sl-deals { display: flex; align-items: center; gap: 16px; margin: 14px 0 6px; padding: 13px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sl-green) 45%, transparent); background: color-mix(in srgb, var(--sl-green) 9%, var(--sl-card)); }
.slp .sl-deals-t { flex: 1; min-width: 0; }
.slp .sl-deals-t b { display: block; font: 400 18px/1.1 var(--sl-font); color: var(--ink); }
.slp .sl-deals-t span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slp .sl-deals .wfill { flex: none; font-size: 16px; padding: 12px 18px; white-space: nowrap; }
.slp .sl-deals-foot { display: flex; align-items: baseline; gap: 12px; margin: 0 2px 4px; font-size: 12px; color: var(--ink-3); }
.slp .sl-deals-foot span { flex: 1; min-width: 0; }
.slp .sl-passall { flex: none; font-size: 12.5px; color: var(--ink-3); }

/* one buyer, one card: picture, a sentence, then time left, Pass and the main button */
.slp .by-card { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--sl-line); border-radius: 14px; background: var(--sl-card); box-shadow: 0 3px 0 var(--bl-card-edge, transparent); }
.slp .by-card.out { grid-template-columns: minmax(0, 1fr) auto; }
.slp .by-pic { display: block; width: 92px; height: 60px; border-radius: 10px; object-fit: cover; background: var(--thumb-bg, var(--paper-3)); }
.slp .by-nopic { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 6%, transparent) 6px 7px), var(--paper-3); }
.slp .by-main { min-width: 0; }
.slp .by-line { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.slp .by-line b { font: 400 16.5px/1.2 var(--sl-font); letter-spacing: .01em; color: var(--ink); }
.slp .by-line .by-money { font-size: 18px; color: var(--sl-gold); }
.slp .by-line i { font-style: normal; font-size: 13px; color: var(--ink-3); }
/* a long name (an unnamed animal's ten-gene look) stays on one line; the whole label is in its title */
.slp :is(.by-who, .by-what, .by-bn) { display: inline-block; max-width: 100%; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slp .by-line .by-who { max-width: 14em; } .slp .by-line .by-what { max-width: 16em; } .slp .by-sub .by-what { max-width: 14em; }
.slp .by-sub { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--ink-3); overflow-wrap: anywhere; }
.slp .by-sub b { font-weight: 600; color: var(--ink-2); }
.slp .by-sub .sex { vertical-align: -2px; }
.slp .by-look { color: var(--ink-2); }
.slp .by-pct.good { color: var(--sl-green); font-weight: 600; } .slp .by-pct.low { color: var(--sl-red); font-weight: 600; }
.slp .by-good { color: var(--sl-green); font-weight: 600; }
.slp .by-warn { color: var(--sl-amber); }
.slp :is(.by-warn, .by-none, .by-quiet) .lock { vertical-align: -1px; }
.slp .by-none { color: var(--ink-2); font-weight: 600; }
.slp .by-quote { font-style: italic; }
.slp .by-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.slp .by-links .linkish { font-size: inherit; color: var(--sl-blue); }
.slp .by-act { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 0; }
.slp .by-act .wurg { margin: 0; }
.slp .by-btns { display: flex; align-items: center; gap: 8px; }
.slp .by-btns .primary { font-size: 15px; padding: 10px 15px; white-space: nowrap; max-width: 250px; }
.slp .by-btns .by-bn { max-width: 130px; }
.slp .by-pass { font: 600 13px/1 var(--sans); padding: 9px 13px; white-space: nowrap; color: var(--ink-2); }
.slp .by-rows { grid-column: 1 / -1; margin: 2px 0 0; }
.slp .by-card .wrows { border-top: 1px dashed var(--rule-2); }

/* the wanted ads' quiet options row, and the ads nothing fits */
.slp .by-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
.slp .by-scope { flex: 1 1 220px; min-width: 0; }
.slp .by-opts .sl-passall { margin-left: auto; }
.slp .sl-nofit-row .by-pass { padding: 6px 11px; }

/* the automatic answers, folded into one line at the foot */
.slp .sx-fold { margin: 22px 0 6px; padding: 11px 14px; border: 1px solid var(--sl-line); border-radius: 12px; background: color-mix(in srgb, var(--sl-card) 60%, transparent); }
.slp .sx-line { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ink-3); }
.slp .sx-sum { flex: 1; min-width: 0; line-height: 1.45; }
.slp .sx-sum b { font-weight: 600; color: var(--ink); } .slp .sx-sum b.on { color: var(--sl-green); } .slp .sx-sum b.warn { color: var(--sl-amber); }
.slp .sx-ico { font-size: 15px; }
.slp .sx-line .linkish { flex: none; font-size: 13px; color: var(--sl-blue); }
.slp .sx-fold.open .sx-wrap { margin: 10px 0 0; }
.slp .sx-fold .lb-line { margin: 8px 0 0; }

/* History: the Sold / Bought switch and its one summary line */
.slp .sl-hist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 10px; }
.slp .sl-histseg { display: inline-flex; margin: 0; }
.slp .sl-histseg button { flex: none; padding: 8px 14px; min-height: 34px; }
.slp .sl-histsum { flex: 1 1 240px; font-size: 13px; color: var(--ink-3); }
.slp .sl-histsum b { font: 400 15px/1 var(--sl-font); }
.slp .sl-shown { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); } .slp .sl-shown b { color: var(--ink-2); }

/* Money: the period, three figures, running costs in plain words, the months, then two lists */
.slp .mn { padding-bottom: 8px; }
.slp .mn-period { margin: 16px 2px 0; font-size: 12.5px; color: var(--ink-3); }
.slp .mn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.slp .mn-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; }
.slp .mn-tile + .mn-tile { border-left: 1px solid var(--rule); }
.slp .mn-tile b { font: 400 30px/1 var(--sl-font); letter-spacing: .01em; white-space: nowrap; }
.slp .mn-tile[data-k="earned"] b { color: var(--sl-green); } .slp .mn-tile[data-k="spent"] b { color: var(--sl-red); } .slp .mn-tile[data-k="profit"] b { color: var(--sl-gold); } .slp .mn-tile[data-k="loss"] b { color: var(--sl-red); }
.slp .mn-cost { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 13px 16px; border: 1px solid var(--sl-line); border-radius: 14px; background: var(--sl-card); }
.slp .mn-cost-t { flex: 1; min-width: 0; }
.slp .mn-cost-t .nb-lbl { display: block; margin-bottom: 6px; }
.slp .mn-cost-t b { font: 400 19px/1 var(--sl-font); letter-spacing: .01em; color: var(--ink); }
.slp .mn-cost-s { font-size: 13.5px; color: var(--ink-3); }
.slp .mn-cost .linkish { flex: none; font-size: 13px; color: var(--sl-blue); }
.slp .mn-costs { margin: -4px 0 14px; padding: 12px; border: 1px dashed var(--rule-2); border-radius: 14px; }
.slp .mn-costs .fn { display: flex; flex-direction: column; gap: 12px; }
.slp .mn .nb-card { border-radius: 14px; }
.slp .mn .nb-chart { margin-bottom: 12px; }
.slp .mn .nb-chart rect.s { fill: #c98b4a; opacity: .9; } .slp .mn .nb-key i.s { background: #c98b4a; }
.slp .mn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slp .mn-grid .nb-rt b { color: var(--sl-green); }
.slp .mn-grid .nb-bar > i { background: var(--sl-green); }
.slp .mn-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--sl-line); border-radius: 12px; background: transparent; box-shadow: none; color: var(--ink-2); font: 500 13.5px/1.3 var(--sans); text-align: left; }
.slp .mn-more:hover { background: var(--sl-card); }
.slp .mn-more .linkish { flex: none; color: var(--sl-blue); }
.slp .mn-more-body { margin-top: 12px; }
.slp .mn-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.slp .mn-counts > div { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; } .slp .mn-counts > div + div { border-left: 1px solid var(--rule); }
.slp .mn-counts b { font: 400 24px/1 var(--sl-font); }
.slp .mn .nb-empty { padding: 40px 20px; }

/* the phone: one column, the buttons under each sentence */
body.mobile .slp button.linkish { min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 500; }
body.mobile .slp .by-links { gap: 6px 16px; margin-top: 6px; font-size: 13px; }
body.mobile .slp .sl-deals-foot .sl-passall { align-self: flex-start; padding: 4px 0; }
body.mobile .slp .sl-tabs.fn-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.mobile .slp .sl-tabs.fn-sub button { justify-content: center; }
body.mobile .slp .sl-glance { margin-top: 4px; }
body.mobile .slp .sl-gt b { font-size: 20px; }
body.mobile .slp .sl-deals { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
body.mobile .slp .sl-deals-t span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
body.mobile .slp .sl-deals .wfill { width: 100%; }
body.mobile .slp .sl-deals-foot { flex-direction: column; gap: 4px; }
body.mobile .slp .by-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; padding: 11px 12px; align-items: start; }
body.mobile .slp .by-card.out { grid-template-columns: minmax(0, 1fr); }
body.mobile .slp .by-pic { width: 64px; height: 48px; border-radius: 8px; }
body.mobile .slp .by-line { font-size: 14.5px; } body.mobile .slp .by-line b { font-size: 15.5px; }
body.mobile .slp .by-line .by-who { max-width: 9em; } body.mobile .slp .by-line .by-what { max-width: 10em; } body.mobile .slp .by-sub .by-what { max-width: 9em; }
body.mobile .slp .by-act { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
body.mobile .slp .by-btns { flex: 1; } body.mobile .slp .by-btns .primary { flex: 1; justify-content: center; max-width: none; } body.mobile .slp .by-btns .by-bn { max-width: 110px; }
body.mobile .slp .by-pass { padding: 10px 14px; }
body.mobile .slp .sl-nofit-row { grid-template-columns: minmax(0, 1fr) auto; } body.mobile .slp .sl-nofit-row .sl-bud { display: none; }
body.mobile .slp .mn-tiles { margin-top: 6px; } body.mobile .slp .mn-tile { padding: 12px 8px; } body.mobile .slp .mn-tile b { font-size: 20px; }
body.mobile .slp .mn-cost { flex-direction: column; align-items: flex-start; gap: 8px; }
body.mobile .slp :is(.mn-grid, .mn-counts) { grid-template-columns: minmax(0, 1fr); }
body.mobile .slp .mn-counts > div + div { border-left: 0; border-top: 1px solid var(--rule); }
body.mobile .slp .sl-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 10px; }
body.mobile .slp .sl-row canvas { width: 64px; height: 37px; grid-row: 1 / span 2; }
body.mobile .slp .sl-row .sl-who { grid-column: 2; grid-row: 2; font-size: 12px; }
body.mobile .slp .sl-row .sl-money { grid-column: 3; grid-row: 1 / span 2; }
body.mobile .slp .sl-bar input { min-width: 0; flex-basis: 100%; margin: 4px 0 0; }