/* The sale's contract (contract.js): a paper document over the map — its head, the routes on a piece of the map,
   the goods with their stamps and terms, the place for the card that pays, the signature and the seal; a sausage
   flying in from a meat plant; the paper rolling up once signed; the receipt over the map once the merchants have
   paid. The paper has its own colours: light paper with its own ink in the light theme, the map on it printed in
   the light map's colours; in the dark theme the same design on a dark paper a little lighter than the interface,
   in light ink, the map on it in the dark map's colours. Everything moves at the pace of the game's effects
   (--fx-pace, fx.js). */

/* ---- the backdrop: over the screen; the paper over the map's column on a wide screen ---- */
.ct-bg { position: fixed; inset: 0; z-index: 37; display: flex; align-items: center; justify-content: center;
  padding: 12px var(--ct-pr, 12px) 12px var(--ct-pl, 12px); background: rgba(28, 22, 12, .42); animation: ct-fade calc(.32s * var(--fx-pace, 1)) ease-out; }
/* the hand in reach under it (a wide screen): the paper stops above the hand, which stands over the backdrop */
.ct-bg.hand { padding-bottom: calc(var(--dock-h, 0px) + 8px); }
@media (min-width: 1101px) { body.ct-hand #screen.in-game .handdock { z-index: 38; } }
:root[data-theme="dark"] .ct-bg { background: rgba(0, 0, 0, .6); }
@keyframes ct-fade { from { opacity: 0; } }
body.ct-open .qconfirm { display: none !important; }
/* the hand under the contract: a card to drag into it, or to click; the one that lies in it has left its place */
body.ct-open #handdock .hcard.selectable { cursor: grab; }
body.ct-open #handdock .hcard.socketed, .ct-cards .hcard.socketed { opacity: .3; filter: grayscale(.7); box-shadow: none; }
body.ct-open #handdock .hcard.socketed:hover, .ct-cards .hcard.socketed:hover { transform: translateY(var(--drop, 0px)) rotate(var(--rot, 0deg)); }

/* ---- the paper (its own colours, whatever the theme) ---- */
.ct { position: relative; display: flex; width: min(1000px, 100%); max-height: 100%; outline: none;
  --ink: #2b2117; --muted: #6a5842; --line: #b9a37a; --line-soft: #dccbaa; --panel: #fcf5e4; --panel2: #f2e5c9;
  --accent-text: #7a5615; --accent-ink: #202825; --rim: rgba(32, 28, 22, .78); --c-vp: #b8892c; --good: #2b6a48; --bad: #a3352a;
  --focus: #345b72; --target: #2f7a55; --hl-now: #2f8a55; --res-detail: #f6ecd3;
  --ct-paper: #f6ebd2; --ct-rule: #a88c5e; --ct-ink2: #4a3a28; --ct-gold: #a87613; --ct-violet: #3f3796; --ct-red: #a32c3c; --ct-sign: #1d2b5e;
  color: var(--ink); color-scheme: light; animation: ct-in calc(.42s * var(--fx-pace, 1)) cubic-bezier(.2, .8, .3, 1); }
:root[data-theme="dark"] .ct {
  --ink: #ece3cf; --muted: #ada38c; --line: #6a6150; --line-soft: #4a4539; --panel: #383a33; --panel2: #2f312b;
  --accent-text: #e6c070; --accent-ink: #1a1f1c; --rim: rgba(0, 0, 0, .55); --c-vp: #e0b452; --good: #79c69c; --bad: #ee8a78;
  --focus: #8cb4cf; --target: #6cc394; --hl-now: #6cc394; --res-detail: #31342e;
  --ct-paper: #31342e; --ct-rule: #8e7d5a; --ct-ink2: #d8ccb2; --ct-gold: #e2b545; --ct-violet: #aea7f0; --ct-red: #ef8d95; --ct-sign: #a9c2f2;
  color-scheme: dark; }
@keyframes ct-in { from { transform: translateY(12px); opacity: 0; } }
.ct:focus { outline: none; }
/* (a card on the paper is drawn exactly as in the hand: the theme's own colours, not the paper's — card-variants.css) */
.ct-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ct-paper { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: 100%; border-radius: 3px;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255, 253, 244, .75), transparent 62%),
    radial-gradient(80% 60% at 100% 100%, rgba(150, 108, 48, .17), transparent 62%),
    radial-gradient(60% 40% at 0% 100%, rgba(150, 108, 48, .1), transparent 70%),
    repeating-linear-gradient(0deg, rgba(110, 80, 40, .03) 0 1px, transparent 1px 4px),
    var(--ct-paper);
  box-shadow: 0 0 0 1px rgba(100, 72, 30, .4), inset 0 0 60px rgba(150, 110, 50, .22), 0 24px 60px rgba(20, 14, 6, .48), 0 4px 12px rgba(0, 0, 0, .22); }
/* a double rule round the page */
.ct-paper::before { content: ''; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--ct-rule) 80%, transparent); border-radius: 2px;
  box-shadow: 0 0 0 3px var(--ct-paper), 0 0 0 4px color-mix(in srgb, var(--ct-rule) 45%, transparent); pointer-events: none; }
:root[data-theme="dark"] .ct-paper {
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255, 244, 214, .07), transparent 62%),
    radial-gradient(80% 60% at 100% 100%, rgba(0, 0, 0, .2), transparent 62%),
    radial-gradient(60% 40% at 0% 100%, rgba(0, 0, 0, .12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 240, 205, .022) 0 1px, transparent 1px 4px),
    var(--ct-paper);
  box-shadow: 0 0 0 1px rgba(170, 146, 98, .32), inset 0 0 60px rgba(0, 0, 0, .3), 0 24px 70px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .4); }

/* the head: the era's emblem, the number and date, the title, the parties */
.ct-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 56px 10px 26px; border-bottom: 1px solid color-mix(in srgb, var(--ct-rule) 55%, transparent); }
.ct-head .orn-emblem { flex: none; margin: 0; color: var(--ct-ink2); opacity: .85; }
.ct-head .orn-emblem svg.orn-cart { width: 46px; height: 46px; }
.ct-head .orn-emblem svg.orn-rail { width: 62px; height: 36px; }
.ct-ht { flex: 1; min-width: 0; }
.ct-kick { display: block; font: 500 11px/1.3 var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ct-ht h3 { margin: 2px 0 4px; font: 700 25px/1.12 var(--f-title); letter-spacing: .01em; }
.ct-parties { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; font-size: 13px; color: var(--muted); }
.ct-parties b { color: var(--ink); font-weight: 700; }
.ct-parties em { font-weight: 500; color: var(--muted); }
.ct-parties .dot { width: 9px; height: 9px; vertical-align: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ct-x { position: absolute; top: 13px; right: 15px; width: 34px; height: 34px; min-height: 0; padding: 0; border: none; background: none; font-size: 24px; line-height: 1; color: var(--muted); border-radius: 6px; }
.ct-x:hover:not(:disabled) { background: rgba(120, 90, 40, .13); color: var(--ink); }

/* the body: the map beside the goods on a wide paper (the map stays in sight while the goods scroll) */
.ct-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 26px 14px; overscroll-behavior: contain; container: ctbody / inline-size; }
.ct-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 22px; }
@container ctbody (min-width: 700px) {
  .ct-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .ct-routes-sec { position: sticky; top: 0; }
}
.ct-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; font: 700 14px/1.25 var(--f-title); }
.ct-par { font: 500 11px/1 var(--f-sign); letter-spacing: .12em; color: var(--accent-text); }
.ct-subn { font: 400 12px/1.3 var(--f-ui); color: var(--muted); }
.ct-note { margin: 9px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); font-style: italic; }

/* ---- § 1: the routes on a piece of the map, framed like a plate on the page ---- */
.ct-plan { position: relative; margin: 4px; border-radius: 2px; overflow: hidden; background: #ede1c9;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ct-rule) 85%, transparent), 0 0 0 4px var(--ct-paper), 0 0 0 5px color-mix(in srgb, var(--ct-rule) 45%, transparent), 0 4px 12px rgba(80, 56, 20, .2); }
.ct-plan::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 26px rgba(120, 86, 36, .3); }
/* the map as printed on the paper: the light map's colours in both themes */
.ct-map { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none;
  --ink: #202825; --muted: #615b4f; --line: #c7b89e; --panel: #fbf5e8; --panel2: #efe4ce; --accent: #d8ae5c; --accent-deep: #ac843a;
  --town: #fbf5e8; --town-line: #93836b; --merchant: #ead4a4; --merchant-line: #8f7444; --m-any: #fbf5e8; --m-blank: #d9cfbb; --slot-empty: #f6eedd;
  --map: #ede1c9; --grid: #b7a586; --grid-op: .29; --water: #b3c4c3; --water-line: #73939a; --water-text: #30546b; --area-text: #7a6f5d;
  --road: #f6ecd5; --road-edge: #a8916b; --rail: #6d6352; --rail-tie: #a3957d; --link-off: #b6a78b;
  --terr-op: .13; --terr-line: #8f8068; --vp-line: #6b4c12; --vp-bg: #fbf5e8; --vp-ink: #202825; --case: transparent; --rim: rgba(32, 28, 22, .78); }
.ct-map .pc-dim { opacity: .36; }
.ct-map .pc-dim .b-town .box, .ct-map .pc-dim .b-merchant .box { fill-opacity: .7; }
/* (the dark theme: the dark map's colours, its ground a shade lighter, for the dark paper) */
:root[data-theme="dark"] .ct-map {
  --ink: #ece3cf; --muted: #a39a86; --line: #3e4641; --panel: #1f2522; --panel2: #262d29; --accent: #d8ae5c; --accent-deep: #b48a3c;
  --town: #262d29; --town-line: #6f6b5c; --merchant: #3a3426; --merchant-line: #8a7445; --m-any: #2b322e; --m-blank: #3a3f3a; --slot-empty: #1f2522;
  --map: #222824; --grid: #d8ae5c; --grid-op: .07; --water: #2b4147; --water-line: #557a85; --water-text: #8fb0bd; --area-text: #8d846f;
  --road: #4b4232; --road-edge: #7c6a4c; --rail: #cfc5b2; --rail-tie: #6e6656; --link-off: #4b4b40;
  --terr-op: .17; --terr-line: #8d846f; --vp-line: #e2b545; --vp-bg: #1f2522; --vp-ink: #ece3cf; --case: rgba(236, 230, 218, .55); --rim: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .ct-plan { background: #222824; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ct-rule) 85%, transparent), 0 0 0 4px var(--ct-paper), 0 0 0 5px color-mix(in srgb, var(--ct-rule) 45%, transparent), 0 4px 12px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .ct-plan::after { box-shadow: inset 0 0 26px rgba(0, 0, 0, .4); }
/* the routes: the chosen ones glow under the roads and run along them in the seller's colour; the good being routed
   has its possible ones glowing softly, dotted in ink; the one pointed at (its line in § 2, its merchant tile) in gold */
.ct-map { --k: 1; }
.ct-rg, .ct-rl, .ct-rc { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-rg, .ct-rl { display: none; }
.ct-rg { stroke-width: calc(15px + 8px * var(--k)); }
.ct-rg.cand { display: inline; stroke: #dcae4a; opacity: .34; }
.ct-rg.chosen { display: inline; stroke: var(--seller); opacity: .3; }
.ct-rg.hot { display: inline; stroke: #e0a83a; opacity: .5; }
.ct-rl.cand { display: inline; stroke: var(--ct-ink2); stroke-width: calc(1.5px + 3px * var(--k)); stroke-dasharray: .1 calc(4px + 5.5px * var(--k)); opacity: .9; }
.ct-rl.hot { display: inline; stroke: var(--ct-gold); stroke-width: calc(1.5px + 3.2px * var(--k)); stroke-dasharray: none; opacity: 1; }
.ct-rc { stroke: var(--seller); stroke-width: calc(1.4px + 3.2px * var(--k)); filter: drop-shadow(0 0 1.5px rgba(255, 250, 235, .9)); }
/* the names over a piece too wide for the map's own (the goods' towns, the merchants) */
.ct-lbl { display: none; font: 700 calc(12.5px * var(--k)) var(--f-name); fill: #2b2117; paint-order: stroke; stroke: rgba(251, 245, 232, .92); stroke-width: calc(3.4px * var(--k)); stroke-linejoin: round; pointer-events: none; }
.ct-lbl.mer { font-family: var(--f-sign); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: #5e3f12; }
.ct-map.far .ct-lbl { display: inline; }
.ct-map.far .pc-dim { opacity: .26; }
.ct-rc.fresh { stroke-dasharray: 1 1; animation: ct-route calc(1s * var(--fx-pace, 1)) cubic-bezier(.45, .05, .35, 1) both; }
.ct-rg.fresh { animation: ct-glow calc(1s * var(--fx-pace, 1)) ease-out both; }
@keyframes ct-route { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ct-glow { from { opacity: 0; } }
/* the goods (the one being routed in gold, the routed ones in the seller's colour with a tick), the merchant tiles it
   can go to (green: a click sends it there), the ones chosen, the meat plants the sausage may come from (red) */
.ct-map .b-slot.ct-good { cursor: pointer; }
.ct-map .b-slot.ct-good rect.ring { fill: none; stroke: var(--ct-ink2); stroke-width: 2.2; stroke-dasharray: 4 3; }
.ct-map .b-slot.ct-sold rect.ring { stroke: var(--seller); stroke-width: 3.6; stroke-dasharray: none; }
.ct-map .b-slot.ct-act rect.ring { stroke: var(--ct-gold); stroke-width: 4.2; stroke-dasharray: none; animation: ct-act calc(2.4s * var(--fx-pace, 1)) ease-in-out infinite; }
.ct-map .b-slot.ct-off { cursor: help; }
.ct-map .b-slot.ct-good:hover rect.ring { stroke-width: 4.6; }
@keyframes ct-act { 50% { stroke-opacity: .45; } }
.ct-map .b-slot.ct-plant rect.ring { fill: none; stroke: var(--ct-red); stroke-width: 2; stroke-dasharray: 3 3; }
.ct-map .b-slot.ct-plant.used rect.ring { stroke-width: 3.4; stroke-dasharray: none; }
.ct-map .b-mtile.ct-can { cursor: pointer; }
.ct-map .b-mtile.ct-can rect.ring { fill: none; stroke: var(--target); stroke-width: 3.2; }
.ct-map .b-mtile.ct-taken rect.ring { fill: none; stroke: var(--seller); stroke-width: 4; }
.ct-map .b-mtile:is(.ct-can:hover, .hot) rect.ring { fill: none; stroke: var(--ct-gold); stroke-width: 4.4; }
.ct-tick { transform-box: fill-box; transform-origin: center; transform: scale(max(1, calc(var(--k) * .7))); }
.ct-tick circle { fill: var(--seller); stroke: #fbf5e8; stroke-width: 1.8; }
.ct-tick path { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---- § 2: the goods (in a narrow column the stamps come down under the routes) ---- */
.ct-goods-sec { container: ctgoods / inline-size; }
.ct-goods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-good { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "line line" "routes stamps" "terms terms";
  column-gap: 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--ct-rule) 45%, transparent); border-radius: 4px; background: rgba(255, 251, 240, .38);
  transition: border-color calc(.25s * var(--fx-pace, 1)), background-color calc(.25s * var(--fx-pace, 1)); }
.ct-good.act { border-color: var(--ct-gold); box-shadow: inset 0 0 0 1px var(--ct-gold); }
.ct-good.on { background: color-mix(in srgb, var(--seller) 5%, rgba(255, 251, 240, .5)); border-color: color-mix(in srgb, var(--seller) 42%, var(--ct-rule)); }
.ct-good.on.act { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seller) 42%, var(--ct-rule)); }
.ct-good.blocked { opacity: .62; }
.ct-gl { grid-area: line; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.ct-gn { flex: none; font: 600 13px var(--f-title); color: var(--muted); }
.ct-gface { --mp: 30px; position: relative; flex: none; width: var(--mp); height: var(--mp); }
.ct-gface .mp-top { box-shadow: 0 0 0 2px var(--seller); }
.ct-gface .mp-lv { left: 3px; top: 0; font-size: 9px; }
.ct-gt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ct-gt > b { font: 700 14.5px/1.2 var(--f-title); }
.ct-gw { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; color: var(--muted); }
.ct-need { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; color: var(--ct-red); }
.ct-need .ico { width: 15px; height: 15px; }
.ct-need.none { font-weight: 500; font-style: italic; color: var(--muted); }
.ct-gives { flex: none; display: inline-flex; gap: 8px; font-size: 13px; }
.ct-gv { display: inline-flex; align-items: center; gap: 2px; }
.ct-gv .ico { width: 15px; height: 15px; }
.ct-gv .ico-income { color: var(--good); }
.ct-out { flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; font-size: 12px; line-height: 1; color: var(--muted); background: transparent; }
.ct-out:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.ct-gr { grid-area: routes; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; min-width: 0; margin-top: 7px; }
.ct-ask { font: 700 12px var(--f-ui); color: var(--accent-text); }
.ct-routes { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.ct-route { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px 3px 8px; border: 1px solid var(--ct-rule); border-radius: 15px;
  background: rgba(255, 251, 240, .75); font: 600 12.5px/1.2 var(--f-ui); color: var(--ink); white-space: nowrap; }
.ct-route::before { content: '→'; font-weight: 700; color: var(--muted); }
.ct-route:hover:not(:disabled) { border-color: var(--ct-gold); background: #fff8e6; }
.ct-route.sel, .ct-route.sel:hover:not(:disabled) { border-color: var(--seller); background: color-mix(in srgb, var(--seller) 14%, #fffaf0); box-shadow: inset 0 0 0 1px var(--seller); }
.ct-route.sel::before { content: '✓'; color: var(--seller); }
.ct-route.no { opacity: .5; cursor: help; }
.ct-route.no .ct-rto { text-decoration: line-through; }
.ct-buys { display: inline-flex; align-items: center; }
.ct-buys .ico { width: 15px; height: 15px; }
.ct-buys.any .ico { width: 11px; height: 11px; margin-left: -1px; }
.ct-rb { display: inline-flex; align-items: center; gap: 2px; padding-left: 6px; border-left: 1px solid var(--line-soft); font-size: 12px; font-weight: 700; color: #6d4a10; }
.ct-rb .ico { width: 14px; height: 14px; }
.ct-why { flex-basis: 100%; margin: 1px 0 0; font-size: 12px; color: var(--bad); }
.ct-none { font-size: 12px; font-style: italic; color: var(--muted); }

/* the stamps: violet ink for the merchant's city, red for the sausage; never quite straight */
.ct-stamps { grid-area: stamps; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding-left: 4px; }
.ct-stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; color: var(--ct-violet); text-transform: uppercase;
  transform: rotate(var(--rot, -6deg)); opacity: .88; mix-blend-mode: multiply; }
.ct-sg { min-width: 84px; max-width: 140px; padding: 8px 10px 7px; border: 2.5px solid currentColor; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ct-paper), inset 0 0 0 2.7px currentColor; }
.ct-sg b { font: 600 15px/1 var(--f-sign); letter-spacing: .09em; white-space: nowrap; }
.ct-sg.long b { font-size: 12.5px; letter-spacing: .04em; }
/* a round stamp: the words along its ring, the sausage in the middle */
.ct-ss { width: 64px; height: 64px; color: var(--ct-red); }
.ct-ss svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ct-ss-o { fill: none; stroke: currentColor; stroke-width: 2.2; }
.ct-ss-i { fill: none; stroke: currentColor; stroke-width: 1.1; }
.ct-ss-t { fill: currentColor; font: 600 7.4px var(--f-sign); letter-spacing: .1em; text-transform: uppercase; }
.ct-ss .bi { color: currentColor; --ico-line: none; --ico-lw: 0; --res-outline: currentColor; --res-detail: var(--ct-paper); }
.ct-ss.own .ct-ss-o { stroke-width: 1.1; }
.ct-ss.own .ct-ss-o2 { fill: none; stroke: currentColor; stroke-width: 1.1; }
.ct-ss.wait { visibility: hidden; } /* (its sausage is still on the way) */
/* coming down: pressed, not thrown */
.ct-stamp.fresh { animation: ct-stamp calc(.52s * var(--fx-pace, 1)) cubic-bezier(.25, .85, .35, 1) both; }
@keyframes ct-stamp {
  0% { transform: rotate(calc(var(--rot, -6deg) - 7deg)) scale(1.55); opacity: 0; }
  62% { transform: rotate(var(--rot, -6deg)) scale(.98); opacity: .95; }
  100% { transform: rotate(var(--rot, -6deg)) scale(1); opacity: .88; }
}
@container ctgoods (max-width: 450px) {
  .ct-good { grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "routes" "stamps" "terms"; }
  .ct-stamps { margin-top: 6px; padding-right: 6px; }
}
/* before a route is chosen: the places the stamps will come down on */
.ct-spot { display: inline-grid; place-items: center; flex: none; border: 1.5px dashed color-mix(in srgb, var(--ct-rule) 75%, transparent); text-align: center;
  font: 500 8.5px/1.15 var(--f-sign); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.ct-sg-spot { width: 92px; height: 40px; padding: 2px 6px; border-radius: 5px; }
.ct-ss-spot { width: 52px; height: 52px; border-radius: 50%; }
.ct-ss-spot .ico { width: 20px; height: 20px; opacity: .35; filter: grayscale(1); }

/* the terms: where the sausage comes from, the merchant's bonus */
.ct-terms { grid-area: terms; display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px dotted color-mix(in srgb, var(--ct-rule) 75%, transparent); font-size: 12.5px; }
.ct-srcrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ct-srcl { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--muted); }
.ct-srcl .ico { width: 15px; height: 15px; }
.ct-sb { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 251, 240, .75); font: 600 11.5px var(--f-ui); }
.ct-sb.sel, .ct-sb.sel:hover:not(:disabled) { border-color: var(--ct-red); color: var(--ct-red); box-shadow: inset 0 0 0 1px var(--ct-red); background: #fff6ea; }
.ct-sb.no { opacity: .5; cursor: help; }
.ct-sbm { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ct-bonus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; }
.ct-bonus .ct-bi { width: 17px; height: 17px; }
.ct-bonus .ico-income, .ct-bonus .ico-money { color: var(--good); --ico-line: var(--rim); --ico-lw: 1; }
.ct-bonus .ico-money { color: var(--c-vp); }
.ct-bonus .ico-develop { color: var(--focus); }
.ct-bh { font-weight: 700; }
.ct-bonus > b { color: #6d4a10; font-size: 13px; }
.ct-devbtn { min-height: 28px; padding: 2px 9px; font-size: 12px; }
.ct-devbtn:not(.set):not(:disabled) { border-color: var(--ct-gold); box-shadow: 0 0 0 2px color-mix(in srgb, #d8ae5c 55%, transparent); }

/* ---- § 3: the payment — a place the size of a card, a little askew; the card lies in it as in the hand ---- */
.ct-body > .ct-pay { margin-top: 16px; }
.ct-payrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.ct-socket { --tilt: -4deg; position: relative; flex: none; display: grid; margin: 8px 12px 10px 10px; }
.ct-socket > .ct-ssize { visibility: hidden; margin: 0; transform: none; transition: none; }
.ct-sbed { position: absolute; inset: -6px; display: grid; place-items: center; padding: 12px; border: 2px dashed color-mix(in srgb, var(--ct-rule) 90%, transparent); border-radius: 9px;
  background: rgba(120, 90, 40, .06); box-shadow: inset 0 1px 6px rgba(90, 64, 26, .14); transform: rotate(var(--tilt));
  transition: border-color calc(.2s * var(--fx-pace, 1)), background-color calc(.2s * var(--fx-pace, 1)), box-shadow calc(.2s * var(--fx-pace, 1)); }
.ct-slabel { max-width: 100%; font: italic 600 13px/1.3 var(--f-title); text-align: center; color: var(--muted); }
.ct-socket:focus { outline: none; }
.ct-socket:focus-visible .ct-sbed { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent), inset 0 1px 6px rgba(90, 64, 26, .14); }
.ct-socket.drop-hot .ct-sbed { border-color: var(--target); border-style: solid; background: color-mix(in srgb, var(--target) 11%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--target) 24%, transparent), inset 0 1px 6px rgba(90, 64, 26, .14); }
.ct-socket .hcard.ct-scard { position: absolute; left: 0; top: 0; margin: 0; transform: rotate(var(--tilt)); transition: transform .2s ease, box-shadow .2s ease; }
.ct-socket .hcard.ct-scard:hover { z-index: 1; transform: rotate(var(--tilt)) translateY(-3px); }
.ct-socket.drop-hot .hcard.ct-scard { opacity: .55; }
/* the contract's own row of the hand's cards (when the hand is out of reach) */
.ct-cards { flex: 1 1 280px; min-width: 0; display: flex; align-items: flex-end; gap: 8px; overflow-x: auto; padding: 18px 6px 6px; scrollbar-width: thin; }
.ct-cards .hcard { flex: none; margin: 0; }
/* (the card in the hand's size, play.css); on a low screen the place by the hand is drawn a little smaller, so the map
   and the goods keep their room */
@media (min-width: 1101px) and (max-height: 900px) { .ct-foot .ct-socket { zoom: .82; } }
@media (min-width: 1101px) and (max-height: 780px) { .ct-foot .ct-socket { zoom: .7; } }

/* ---- the foot: the total, the signature, the seal's place, the buttons (by the hand: the payment first) ---- */
.ct-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 26px 18px; border-top: 1px solid color-mix(in srgb, var(--ct-rule) 55%, transparent);
  background: linear-gradient(to bottom, rgba(120, 90, 40, .06), transparent 45%); border-radius: 0 0 3px 3px; }
.ct-paper.by-hand .ct-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "pay total" "pay sign"; column-gap: 26px; row-gap: 10px; padding-top: 8px; }
.ct-foot > .ct-pay { grid-area: pay; align-self: end; }
.ct-foot > .ct-pay .ct-sub { margin-bottom: 2px; }
.ct-foot > .ct-pay .ct-subn { display: none; }
.ct-paper.by-hand .ct-total { grid-area: total; align-self: end; }
.ct-paper.by-hand .ct-signrow { grid-area: sign; }
.ct-total { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 22px; font-size: 13px; }
.ct-tt { font: 700 13.5px var(--f-title); }
.ct-tv { display: inline-flex; align-items: center; gap: 4px; }
.ct-tv .ico { width: 16px; height: 16px; }
.ct-tv .ico-income { color: var(--good); }
.ct-tv .ico-money { color: var(--c-vp); }
.ct-lead { font-style: italic; color: var(--muted); }
.ct-err { font-weight: 700; color: var(--bad); }
.ct-signrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.ct-sig { display: flex; flex-direction: column; gap: 3px; flex: 0 1 240px; min-width: 150px; }
.ct-sigline { position: relative; display: block; height: 36px; border-bottom: 1.5px solid var(--ink); }
.ct-signame { position: absolute; left: 10px; bottom: 3px; max-width: calc(100% - 16px); overflow: hidden; white-space: nowrap; text-overflow: clip;
  font: italic 600 24px/1.1 var(--f-title); color: var(--ct-sign); transform: rotate(-3deg) skewX(-10deg); transform-origin: 0 100%; clip-path: inset(0 100% 0 0); }
.ct-flourish { position: absolute; left: 6px; bottom: -8px; width: calc(100% - 26px); height: 16px; overflow: visible; pointer-events: none; }
.ct-flourish path { fill: none; stroke: var(--ct-sign); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 300; stroke-dashoffset: 300; }
.ct-sigcap { font: 500 10px var(--f-sign); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* signing: the name written, the flourish under it, then the seal pressed — at the pace of the effects */
.ct-paper.signing .ct-signame { animation: ct-write calc(.66s * var(--fx-pace, 1)) cubic-bezier(.45, .1, .6, 1) forwards; }
.ct-paper.signing .ct-flourish path { animation: ct-flourish calc(.44s * var(--fx-pace, 1)) calc(.46s * var(--fx-pace, 1)) ease-out forwards; }
@keyframes ct-write { to { clip-path: inset(0 0 0 0); } }
@keyframes ct-flourish { to { stroke-dashoffset: 0; } }
.ct-sealspot { position: relative; flex: none; display: grid; place-items: center; width: 76px; height: 76px; border: 1.5px dashed color-mix(in srgb, var(--ct-rule) 85%, transparent); border-radius: 50%; }
.ct-ls { font: 500 12px var(--f-sign); letter-spacing: .1em; color: color-mix(in srgb, var(--muted) 85%, transparent); }
.ct-seal { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); opacity: 0; transform: scale(1.5) rotate(-18deg); pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(40, 20, 10, .45)); }
.ct-paper.sealed .ct-seal { animation: ct-seal calc(.56s * var(--fx-pace, 1)) cubic-bezier(.25, .85, .35, 1) forwards; }
@keyframes ct-seal {
  0% { opacity: 0; transform: scale(1.5) rotate(-18deg); }
  65% { opacity: 1; transform: scale(.97) rotate(-9deg); }
  100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}
.ct-wax { stroke: rgba(0, 0, 0, .3); stroke-width: 1.2; }
.ct-wax-in { fill: rgba(0, 0, 0, .14); }
.ct-wax-ring { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.6; }
.ct-wax-t { font: 700 19px var(--f-title); fill: rgba(255, 255, 255, .66); paint-order: stroke; stroke: rgba(0, 0, 0, .28); stroke-width: 1px; }
.ct-btns { flex: 1 1 270px; display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: 6px 8px; }
.ct-hintl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 14px; margin: 0; }
.ct-btns > button { min-height: 42px; padding: 6px 18px; }
.ct-signbtn { min-width: 170px; font-family: var(--f-title); font-size: 16px; letter-spacing: .03em; }
.ct-okn { display: none; }
.ct-keys { font-size: 11.5px; color: var(--muted); }
.ct-needs { font-size: 12.5px; font-weight: 700; color: var(--accent-text); }

/* ---- signed: the paper rolls up into a scroll ---- */
.ct-roll { position: fixed; z-index: 2; height: 32px; margin-top: -2px; border-radius: 16px; pointer-events: none;
  background: linear-gradient(to bottom, #8f7144 0%, #d6bf93 17%, #fbf2dc 42%, #f2e1bd 60%, #c6aa79 84%, #84663a 100%);
  box-shadow: 0 8px 16px rgba(30, 20, 8, .38), inset 0 0 0 1px rgba(90, 64, 26, .35); }
.ct-roll::before, .ct-roll::after { content: ''; position: absolute; top: 3px; bottom: 3px; width: 15px; border-radius: 50%;
  background: radial-gradient(circle, #6f552e 0 26%, #b89c6c 30% 58%, #846639 62%); }
.ct-roll::before { left: -3px; }
.ct-roll::after { right: -3px; }

/* ---- a meat plant's sausage on its way to its stamp ---- */
.ct-fly { position: fixed; left: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; will-change: transform;
  background: #fcf6e7; box-shadow: 0 0 0 1.5px rgba(163, 44, 60, .5), 0 7px 12px rgba(0, 0, 0, .32); --rim: rgba(32, 28, 22, .78); --res-detail: #f4eddb; }
.ct-fly .ico { width: 25px; height: 25px; }

/* ---- the receipt over the map: the contract carried out ---- */
.ct-receipt { position: fixed; z-index: 33; display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 16px)); padding: 10px 20px 10px 12px; transform: translateX(-50%);
  color: #2b2117; background: radial-gradient(120% 90% at 10% 0%, rgba(255, 253, 244, .8), transparent 65%), #f6ebd2; border-radius: 4px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(100, 72, 30, .42), inset 0 0 26px rgba(150, 110, 50, .2), 0 14px 32px rgba(20, 14, 6, .38);
  --rim: rgba(32, 28, 22, .78); --c-vp: #b8892c; --res-detail: #f6ebd2; animation: ct-unroll calc(.55s * var(--fx-pace, 1)) cubic-bezier(.25, .8, .35, 1) both; }
.ct-receipt::before, .ct-receipt::after { content: ''; position: absolute; top: -3px; bottom: -3px; width: 9px; border-radius: 5px;
  background: linear-gradient(to right, #8f7144, #f3e3c1 45%, #c6aa79 80%, #84663a); }
.ct-receipt::before { left: -5px; }
.ct-receipt::after { right: -5px; }
.ct-receipt.out { animation: ct-rollaway calc(.42s * var(--fx-pace, 1)) ease-in forwards; }
@keyframes ct-unroll { from { clip-path: inset(-10px 50% -10px 50%); } to { clip-path: inset(-10px -10px -10px -10px); } }
@keyframes ct-rollaway { from { clip-path: inset(-10px -10px -10px -10px); opacity: 1; } to { clip-path: inset(-10px 50% -10px 50%); opacity: 0; } }
.ct-rseal { flex: none; width: 48px; height: 48px; }
.ct-rseal .ct-seal { position: static; inset: auto; width: 100%; height: 100%; opacity: 1; transform: rotate(-9deg); }
.ct-rbody { min-width: 0; }
.ct-rt { font: 700 15.5px/1.2 var(--f-title); }
.ct-receipt ul { list-style: none; margin: 3px 0 0; padding: 0; font-size: 12.5px; line-height: 1.45; }
.ct-receipt li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.ct-receipt li .ico { width: 15px; height: 15px; flex: none; }
.ct-receipt li > span { white-space: nowrap; }
.ct-paid { margin-left: auto; padding-left: 12px; color: #6d4a10; }

/* ---- the dark theme: the same paper in the dark (its tokens with .ct above) — what is drawn in light colours
   here gets its dark ones: the washes of the goods and the routes, the labels on the map, the stamps' ink (light
   ink shows on dark paper: screen, not multiply), the rolled-up scroll, the sausage on its way, the receipt ---- */
:root[data-theme="dark"] .ct-rc { filter: drop-shadow(0 0 1.5px rgba(10, 12, 11, .9)); }
:root[data-theme="dark"] .ct-lbl { fill: #efe6d3; stroke: rgba(26, 32, 29, .92); }
:root[data-theme="dark"] .ct-lbl.mer { fill: #e9c57e; }
:root[data-theme="dark"] .ct-tick circle { stroke: #222824; }
:root[data-theme="dark"] .ct-good { background: rgba(255, 246, 222, .035); }
:root[data-theme="dark"] .ct-good.on { background: color-mix(in srgb, var(--seller) 10%, rgba(255, 246, 222, .04)); }
:root[data-theme="dark"] :is(.ct-route, .ct-sb) { background: rgba(255, 246, 222, .06); }
:root[data-theme="dark"] .ct-route:hover:not(:disabled) { background: rgba(255, 228, 170, .12); }
:root[data-theme="dark"] .ct-route.sel, :root[data-theme="dark"] .ct-route.sel:hover:not(:disabled) { background: color-mix(in srgb, var(--seller) 28%, var(--ct-paper)); }
:root[data-theme="dark"] .ct-sb.sel, :root[data-theme="dark"] .ct-sb.sel:hover:not(:disabled) { background: color-mix(in srgb, var(--ct-red) 14%, var(--ct-paper)); }
:root[data-theme="dark"] :is(.ct-rb, .ct-bonus > b, .ct-paid) { color: var(--accent-text); }
:root[data-theme="dark"] .ct-stamp { mix-blend-mode: screen; opacity: .9; }
:root[data-theme="dark"] .ct-sbed { background: rgba(0, 0, 0, .16); box-shadow: inset 0 1px 6px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .ct-foot { background: linear-gradient(to bottom, rgba(0, 0, 0, .12), transparent 45%); }
:root[data-theme="dark"] .ct-roll { background: linear-gradient(to bottom, #1b1d19 0%, #3e413a 17%, #5a5d54 42%, #464940 60%, #2e3029 84%, #171915 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(170, 146, 98, .3); }
:root[data-theme="dark"] .ct-roll::before, :root[data-theme="dark"] .ct-roll::after { background: radial-gradient(circle, #15170f 0 26%, #4d5047 30% 58%, #23251f 62%); }
:root[data-theme="dark"] .ct-fly { background: #31342e; --rim: rgba(0, 0, 0, .55); --res-detail: #31342e; }
:root[data-theme="dark"] .ct-receipt { color: #ece3cf; background: radial-gradient(120% 90% at 10% 0%, rgba(255, 244, 214, .08), transparent 65%), #31342e;
  box-shadow: 0 0 0 1px rgba(170, 146, 98, .36), inset 0 0 26px rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .55); --rim: rgba(0, 0, 0, .55); --c-vp: #e0b452; --res-detail: #31342e; }
:root[data-theme="dark"] .ct-receipt::before, :root[data-theme="dark"] .ct-receipt::after { background: linear-gradient(to right, #1b1d19, #5a5d54 45%, #2e3029 80%, #171915); }

/* ---- a low screen: a tighter head and foot ---- */
@media (min-width: 761px) and (max-height: 860px) {
  .ct-head { gap: 12px; padding: 12px 52px 8px 22px; }
  .ct-head .orn-emblem svg.orn-cart { width: 38px; height: 38px; }
  .ct-head .orn-emblem svg.orn-rail { width: 52px; height: 30px; }
  .ct-ht h3 { margin-bottom: 2px; font-size: 21px; }
  .ct-body { padding-top: 8px; }
  .ct-foot { padding-bottom: 12px; }
}

/* ---- a phone: the paper fills the screen; one column ---- */
@media (max-width: 760px) {
  .ct-bg { padding: 6px; align-items: stretch; }
  .ct { width: 100%; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); }
  .ct-paper::before { inset: 4px; box-shadow: none; }
  .ct-head { gap: 10px; padding: 12px 44px 8px 14px; }
  .ct-head .orn-emblem { display: none; }
  .ct-x { top: 7px; right: 8px; }
  .ct-ht h3 { font-size: 19px; }
  .ct-kick { font-size: 10px; }
  .ct-parties { gap: 0 12px; font-size: 12px; }
  .ct-body { padding: 8px 12px 10px; }
  .ct-good { padding: 8px; }
  .ct-gives { gap: 5px; font-size: 12px; }
  .ct-gt > b { font-size: 13.5px; }
  .ct-route { min-height: 32px; }
  .ct-socket { margin: 6px 10px 8px 8px; }
  .ct-cards { flex-basis: 100%; padding-top: 14px; }
  .ct-foot { gap: 6px; padding: 8px 12px 12px; }
  .ct-signrow { gap: 8px 12px; }
  .ct-sig { flex: 1 1 140px; min-width: 0; }
  .ct-signame { font-size: 20px; }
  .ct-sealspot { width: 56px; height: 56px; }
  .ct-ls { font-size: 10px; }
  .ct-btns { flex-basis: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; }
  .ct-hintl { display: none; }
  .ct-btns > button { min-width: 0; padding: 6px 10px; }
  .ct-signbtn:disabled .ct-okl { display: none; }
  .ct-signbtn:disabled .ct-okn { display: inline; font: 700 12.5px var(--f-ui); letter-spacing: 0; }
  .ct-receipt { padding: 8px 14px 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-bg, .ct, .ct-stamp.fresh, .ct-receipt, .ct-receipt.out, .ct-rc.fresh, .ct-rg.fresh, .ct-map .b-slot.ct-act rect.ring { animation: none; }
  .ct-rc.fresh { stroke-dasharray: none; }
}