/* ============================================================
   THE ADS: the spammy spots down the side (the user, 2026-10-09: "more like
   the spammy style ads on website where its like 2x3 on the side"). People
   spend JuqBuqs to put a picture here; several at once take turns.

   One unit, three places, by the room there is:
     - wide screens, a rail in the empty space beside the page, stuck there
       while you scroll (a second rail on the left once two are running)
     - laptops, too narrow for a rail: a little pop-up in the bottom-left
       corner, closed with its X for the rest of the visit
     - phones: in the page, between the Lineup's two groups
   Every ad is 2:3 (a 600 x 900 picture).

   NAMED SO AN AD BLOCKER DOES NOT KNOW THEM (the user, 2026-10-09: "design
   them to not be detected by actual ad detectors"). The first names were
   .ad-unit, .ad-rail, .ad-frame and an aria-label of "Advertisement", and
   EasyList and AdGuard hide all of those on every site: the spots drew for a
   second and vanished. Every name here is jqp- ("JuqHub plug"), the files are
   plugs.css and plugs.js, and the words "ad", "ads", "advert", "sponsor",
   "promo" and "banner" appear in no class, id, attribute or file name.
   check-plugs.mjs keeps the names clean; the real lists were run against
   them on 2026-10-09 (see its header).
   ============================================================ */
/* the unit is a container, so the credit can drop "Paid for by" when it is narrow. ITS ONE COLUMN NEVER GROWS
   PAST IT (2026-10-12, the user: user ads "not scaling correctly"): an `auto` column takes its content's minimum,
   and a long buyer's name, cut short with an ellipsis or not, widened the column, the 2:3 frame with it, and
   the picture ran out of the card */
.jqp-unit { --jqp-w: 220px; --jqp-ms: 8000ms; position: relative; width: var(--jqp-w); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); font-family: var(--f-mono); container: jqp / inline-size; }
.jqp-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* the little "why this one" mark every ad network has; it opens the reason */
.jqp-why { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; height: 16px; font: inherit; letter-spacing: 0; color: var(--muted); background: transparent; border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; }
.jqp-why:hover, .jqp-why:focus-visible, .jqp-why[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); outline: none; }
.jqp-why svg { width: 8px; height: 8px; }
.jqp-whybox { position: absolute; top: 22px; left: 0; right: 0; z-index: 6; display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-size: var(--t-micro); line-height: 1.5; color: var(--ink); background: var(--surface); border: var(--bw) solid var(--accent); border-radius: var(--radius); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); }
.jqp-whybox[hidden] { display: none; }
.jqp-whybox p { margin: 0; }
.jqp-frame { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); transition: border-color 0.15s; }
.jqp-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; overflow: hidden; container-type: inline-size; transition: opacity 0.45s ease, visibility 0s linear 0.45s; text-decoration: none; color: inherit; }
.jqp-slide.on { opacity: 1; visibility: visible; transition: opacity 0.45s ease; z-index: 1; }
/* CLICKABLE LOOKS CLICKABLE (the user: "hovering doesnt do anything"): the
   frame lights and the call to action brightens. No strip saying where it goes
   (the user, the same day: "remove that"). */
.jqp-click { cursor: pointer; }
.jqp-frame:has(.jqp-slide.on.jqp-click:hover), .jqp-frame:has(.jqp-slide.on.jqp-click:focus-visible), .jqp-frame:has(.jqp-slide.on .jqp-btnw:hover) { border-color: var(--accent); }
.jqp-slide.jqp-click:hover .jqph-cta, .jqp-slide.jqp-click:focus-visible .jqph-cta { filter: brightness(1.15); box-shadow: 0 0 0 0.8cqi #fff, 0 1.5cqi 4cqi rgba(0, 0, 0, 0.4); }
.jqp-slide.jqp-click:focus-visible { outline: none; }
/* how long until the next one */
.jqp-tick { position: absolute; left: 0; bottom: 0; z-index: 5; height: 3px; width: 0; background: var(--accent); }
.jqp-tick.run { animation: jqpTick var(--jqp-ms) linear forwards; }
.jqp-unit.held .jqp-tick.run { animation-play-state: paused; }
@keyframes jqpTick { to { width: 100%; } }
/* WHO PAID AND ADVERTISE HERE ON ONE ROW, ALWAYS (the user: long names
   pushed Advertise here onto a second row): the name gives way, with an
   ellipsis, and a narrow unit drops "Paid for by" for the face and name */
.jqp-foot { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 18px; font-size: var(--t-micro); color: var(--muted); }
.jqp-by { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.jqp-by-w { flex: none; }
.jqp-by.tight .jqp-by-paid { display: none; }
.jqp-by b { min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jqp-by .u-cr-face { width: 16px; height: 16px; font-size: var(--t-micro); }
@container jqp (max-width: 200px) { .jqp-by-w { display: none; } }
.jqp-buy { flex: none; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; background: transparent; border: 0; cursor: pointer; }
.jqp-buy:hover, .jqp-buy:focus-visible { color: var(--accent); outline: none; }

/* ---- a bought ad: the picture, a sticker, a button ---- */
.jqp-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.jqp-pic { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.jqp-empty { font-size: 5.5cqi; color: var(--muted); text-align: center; padding: 8cqi; background: repeating-linear-gradient(-45deg, var(--surface) 0 10px, var(--surface-2) 10px 20px); }
.jqp-stk { position: absolute; z-index: 2; transform: translate(-50%, -50%); line-height: 0; pointer-events: none; }
.jqp-stk img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2cqi 3cqi rgba(0, 0, 0, 0.45)); user-select: none; -webkit-user-drag: none; }
.jqp-ss-s { width: 22cqi; } .jqp-ss-m { width: 34cqi; } .jqp-ss-l { width: 50cqi; } .jqp-ss-xl { width: 72cqi; }
/* TEXT LAYERS (the user: "maybe we should add text"): as wide as the words, never
   wider than the picture, in the buyer's colour (--tc), a dark edge so it reads
   on anything unless they turn it off */
.jqp-txt { width: max-content; max-width: 92cqi; line-height: 1.02; text-align: center; color: var(--tc, #fff); }
.jqp-txt > span { display: block; overflow-wrap: anywhere; }
.jqp-tf-loud { font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; }
.jqp-tf-clean { font-family: Arial, Helvetica, sans-serif; font-weight: 800; }
.jqp-tf-mono { font-family: var(--f-mono); font-weight: 700; }
.jqp-tf-comic { font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', cursive; font-weight: 700; }
.jqp-tz-s { font-size: 6cqi; } .jqp-tz-m { font-size: 9cqi; } .jqp-tz-l { font-size: 13cqi; } .jqp-tz-xl { font-size: 18cqi; }
.jqp-tline > span { -webkit-text-stroke: 0.1em #000; paint-order: stroke fill; text-shadow: 0 0.06em 0.18em rgba(0, 0, 0, 0.5); }
/* never wider than the picture: as wide as its words, and long words at a big
   size wrap onto a second line instead of running off both edges */
.jqp-btnw { position: absolute; z-index: 20; width: max-content; max-width: 92cqi; transform: translate(-50%, -50%); text-decoration: none; }
.jqp-btn { display: block; text-align: center; overflow-wrap: anywhere; padding: 0.55em 1.1em; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 1; border-radius: 6px; transition: filter 0.15s, box-shadow 0.15s; }
.jqp-bz-s .jqp-btn { font-size: 6cqi; } .jqp-bz-m .jqp-btn { font-size: 8cqi; } .jqp-bz-l .jqp-btn { font-size: 10.5cqi; }
a.jqp-btnw { cursor: pointer; }
a.jqp-btnw:hover .jqp-btn, a.jqp-btnw:focus-visible .jqp-btn { filter: brightness(1.15); box-shadow: 0 0 0 0.8cqi #fff, 0 1.5cqi 4cqi rgba(0, 0, 0, 0.45); }
a.jqp-btnw:focus-visible { outline: none; }
/* the five looks: a button on somebody's picture, so they look the same in every skin */
/* three shapes in the buyer's colour (--b), the words black or white (--bt) */
.jqp-bs-solid { color: var(--bt, #111); background: var(--b, #ffd400); }
.jqp-bs-outline { color: var(--b, #fff); background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 0 0 0.22em var(--b, #fff); }
.jqp-bs-ring { color: var(--bt, #fff); background: var(--b, #e1001a); box-shadow: inset 0 0 0 0.16em var(--bt, #fff), 0 0 0 0.12em var(--b, #e1001a); }

/* ---- motion: the picture, the sticker, the button (the coin's float is the model) ---- */
.jqp-pm-zoom { animation: jqpZoom 9s ease-in-out infinite alternate; }
.jqp-pm-drift { animation: jqpDrift 12s ease-in-out infinite alternate; }
.jqp-pm-shake { animation: jqpShake 4s ease-in-out infinite; }
@keyframes jqpZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes jqpDrift { from { transform: scale(1.1) translate(-3%, -2%); } to { transform: scale(1.1) translate(3%, 2%); } }
@keyframes jqpShake { 0%, 84%, 100% { transform: translate(0, 0) rotate(0); } 86% { transform: translate(-2%, 1%) rotate(-1deg); } 88% { transform: translate(2%, -1%) rotate(1deg); } 90% { transform: translate(-2%, 0) rotate(-1deg); } 92% { transform: translate(2%, 1%) rotate(0.5deg); } 94% { transform: translate(-1%, -1%) rotate(0); } }
.jqp-sm-float { animation: jqpFloat 2.6s ease-in-out infinite; }
.jqp-sm-spin { animation: jqpSpin 4s linear infinite; }
.jqp-sm-pulse, .jqp-bm-pulse { animation: jqpPulse 1.1s ease-in-out infinite; }
.jqp-sm-wiggle, .jqp-bm-wiggle { animation: jqpWiggle 1.6s ease-in-out infinite; }
.jqp-sm-bounce, .jqp-bm-bounce { animation: jqpBounce 1.2s cubic-bezier(0.3, 0, 0.5, 1) infinite; }
.jqp-bm-glow { animation: jqpGlow 1.6s ease-in-out infinite; }
@keyframes jqpFloat { 50% { transform: translateY(-9%) rotate(-5deg); } }
@keyframes jqpSpin { to { transform: rotate(360deg); } }
@keyframes jqpPulse { 50% { transform: scale(1.08); } }
@keyframes jqpWiggle { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-6deg); } 20%, 40% { transform: rotate(6deg); } }
@keyframes jqpBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18%); } 55% { transform: translateY(0); } 65% { transform: translateY(-6%); } 75% { transform: translateY(0); } }
@keyframes jqpGlow { 50% { filter: drop-shadow(0 0 0.5em var(--b, #ffe678)) drop-shadow(0 0 0.2em var(--b, #ffe678)); } }

/* ---- wide screens: the rails ---- */
/* --g is the empty space beside the page; the rail sits in the middle of it */
.jqp-rail { --g: calc((100vw - var(--maxw, 1180px)) / 2); --rail-w: clamp(160px, calc(var(--g) - 64px), 240px); position: fixed; top: 150px; z-index: 30; display: none; }
.jqp-rail .jqp-unit { --jqp-w: var(--rail-w); }
.jqp-rail.r { right: calc((var(--g) - var(--rail-w)) / 2); }
.jqp-rail.l { left: calc((var(--g) - var(--rail-w)) / 2); }
@media (min-width: 1560px) { .jqp-rail { display: block; } }

/* ---- laptops: the corner pop-up ---- */
.jqp-corner { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: none; padding: var(--s-3); background: var(--surface); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); transform: translateY(calc(100% + 32px)); transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
.jqp-corner .jqp-unit { --jqp-w: 140px; }
.jqp-corner.in { transform: none; }
.jqp-corner[hidden] { display: none !important; }
.jqp-x { position: absolute; top: -11px; right: -11px; z-index: 7; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; font: 700 13px/1 var(--f-mono); color: var(--ink); background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqp-x:hover, .jqp-x:focus-visible { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); outline: none; }
@media (min-width: 761px) and (max-width: 1559px) { .jqp-corner { display: block; } }

/* ---- phones: in the page ---- */
.jqp-inline { display: none; justify-content: center; margin: var(--s-6) 0 var(--s-2); }
.jqp-inline .jqp-unit { --jqp-w: min(230px, 66vw); }
@media (max-width: 760px) { .jqp-inline { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .jqp-slide, .jqp-slide.on, .jqp-corner { transition: none; }
  .jqp-tick.run { animation: none; }
  .jqp-art, .jqp-stk img, .jqp-btn { animation: none !important; }
}

/* ============================================================ THE HOUSE ADS
   Ours, for when nobody has paid: one now, This spot for sale (the user took
   the other three out, 2026-10-09). A bought ad is its picture with its layers
   and button (above). */
.jqph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6%; padding: 9% 8% 10%; text-align: center; overflow: hidden; container-type: inline-size; }
.jqph-kick { font-family: var(--f-mono); font-size: 6.2cqi; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.jqph-big { font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 0.92; font-size: 15cqi; text-wrap: balance; }
.jqph-small { font-family: var(--f-display); font-size: 6.4cqi; line-height: 1.3; text-wrap: balance; }
.jqph-cta { display: inline-block; padding: 4.5cqi 8cqi; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 7.5cqi; text-transform: uppercase; border-radius: 6px; animation: jqphPulse 1.1s ease-in-out infinite; }
@keyframes jqphPulse { 50% { transform: scale(1.06); } }

/* this spot for sale (ours, in the site's own clothes) */
.jqph-sale { color: var(--ink); background: repeating-linear-gradient(-45deg, var(--surface) 0 14px, var(--surface-2) 14px 28px); }
.jqph-sale .jqph-big { color: var(--accent); }
.jqph-sale .jqph-frame { display: grid; place-items: center; width: 70%; aspect-ratio: 2 / 3; border: 2px dashed var(--line-strong); border-radius: var(--radius); font-family: var(--f-mono); font-size: 6cqi; color: var(--muted); background: var(--surface); }
.jqph-sale .jqph-cta { color: var(--accent-ink); background: var(--accent); animation: none; }
/* THE TENZINO (2026-10-11): drawn whole by tenzino-plug.js, in the casino's
   own pixels on its own night; its words are for screen readers */
.jqph-tz { padding: 0; background: #0f0f14; }
.jqph-tz-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.jqph-tz-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a stand-in for a bought picture: somebody's homemade one */
.jqph-stand { color: #2b1a00; background: linear-gradient(180deg, #fff6c9 0%, #ffe27a 100%); font-family: 'Comic Sans MS', 'Comic Sans', var(--f-display); }
.jqph-stand .jqph-big { font-family: inherit; font-style: normal; font-size: 13cqi; color: #d6336c; text-transform: none; transform: rotate(-4deg); }
.jqph-stand .jqph-glass { font-size: 30cqi; line-height: 1; }
.jqph-stand .jqph-small { font-family: inherit; font-size: 7cqi; }
.jqph-stand .jqph-price { font-family: inherit; font-weight: 700; font-size: 9cqi; color: #2b1a00; background: #fff; padding: 2cqi 5cqi; border: 0.8cqi solid #2b1a00; border-radius: 6px; transform: rotate(3deg); }

/* ============================================================ ADVERTISE HERE
   The builder (plugs.js): a pop-up with two tabs. Make an ad is five numbered
   steps on the left (a real order) and the ad as it will run on the right,
   where the picture is dragged to crop it and the sticker and the button to
   place them. Your ads lists what was bought, with cancel and take down. */
.jqp-shopwrap { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--s-6); background: rgba(0, 0, 0, 0.62); }
.jqp-shopwrap[hidden] { display: none; }
.jqp-shop { width: min(1080px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; color: var(--ink); background: var(--surface); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); outline: none; }
.jqp-shophead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding: var(--s-5) var(--s-6); border-bottom: var(--bw) solid var(--line); }
.jqp-shophead h2 { margin: 0; font-size: calc(var(--t-lg) * 2); line-height: 1; }
.jqp-shophead h2 em { color: var(--accent); }
.jqp-tabs { flex: 1; }
.jqp-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; font: 700 15px/1 var(--f-mono); color: var(--ink); background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqp-close:hover, .jqp-close:focus-visible { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); outline: none; }
.jqp-done { padding: var(--s-4) var(--s-6); font-size: var(--t-sm); background: var(--surface-2); border-bottom: var(--bw) solid var(--accent); }
.jqp-done b { color: var(--accent); }
.jqp-shopbody { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 0; }
.jqp-shopbody.jqp-one-col { grid-template-columns: minmax(0, 1fr); overflow: auto; }
.jqp-form { display: grid; align-content: start; gap: var(--s-7); padding: var(--s-6); overflow: auto; }
.jqp-side { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-6); overflow: auto; background: var(--surface-2); border-left: var(--bw) solid var(--line); }
.jqp-step { display: grid; gap: var(--s-4); }
.jqp-step h3 { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: var(--t-md); text-transform: uppercase; }
.jqp-step h3 span { display: grid; place-items: center; width: 24px; height: 24px; font: 700 var(--t-sm) / 1 var(--f-mono); font-style: normal; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius); }
.jqp-step h3 em { font-family: var(--f-mono); font-style: normal; font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--muted); }
.jqp-seg { display: inline-flex; flex-wrap: wrap; justify-self: start; overflow: hidden; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); }
.jqp-seg button { padding: var(--s-2) var(--s-4); font: 600 var(--t-sm) / 1.3 var(--f-mono); color: var(--muted); background: transparent; border: 0; border-left: var(--bw) solid var(--line-strong); cursor: pointer; }
.jqp-seg button:first-child { border-left: 0; }
.jqp-seg button:hover, .jqp-seg button:focus-visible { color: var(--ink); background: var(--surface-2); outline: none; }
.jqp-seg button.on { color: var(--accent-ink); background: var(--accent); }
.jqp-drop { display: grid; gap: var(--s-2); width: 100%; padding: var(--s-6); text-align: left; font: inherit; color: var(--ink); background: var(--surface-2); border: 2px dashed var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqp-drop:hover, .jqp-drop:focus-visible { border-color: var(--accent); outline: none; }
.jqp-drop b { font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: var(--t-md); }
.jqp-drop span, .jqp-studio p { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin: 0; }
.jqp-studio { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-5); background: var(--surface-2); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.jqp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.jqp-lbl { min-width: 64px; font: 700 var(--t-label) / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.jqp-file { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-sm) / 1.3 var(--f-mono); color: var(--muted); }
.jqp-steps { display: inline-flex; align-items: center; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.jqp-steps button { width: 32px; height: 30px; font: 700 16px/1 var(--f-mono); color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.jqp-steps button:hover, .jqp-steps button:focus-visible { color: var(--accent-ink); background: var(--accent); outline: none; }
.jqp-steps b { min-width: 52px; text-align: center; font: 700 var(--t-sm) / 1 var(--f-mono); }
.jqp-link { padding: 0; font: inherit; font-size: var(--t-sm); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; background: transparent; border: 0; cursor: pointer; }
.jqp-link:hover, .jqp-link:focus-visible { color: var(--accent); outline: none; }
.jqp-chip { display: inline-block; padding: 2px var(--s-3); font: 700 var(--t-micro) / 1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--muted); }
.jqp-chip.ok { color: var(--ink); border-color: var(--ok); box-shadow: inset 3px 0 0 var(--ok); }
.jqp-chip.no { color: var(--accent); border-color: var(--accent); }
.jqp-chip.wait { color: var(--muted); }
.jqp-in { width: 100%; padding: var(--s-3) var(--s-4); font: var(--t-sm) / 1.3 var(--f-mono); color: var(--ink); background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); }
.jqp-in:focus { outline: none; border-color: var(--accent); }
.jqp-urlrow .jqp-in { flex: 1; width: auto; min-width: 0; }
.jqp-short { max-width: 240px; }
.jqp-emotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: var(--s-2); max-height: 196px; overflow: auto; padding: var(--s-2); background: var(--surface-2); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.jqp-emotes button { display: grid; place-items: center; aspect-ratio: 1; padding: var(--s-1); background: transparent; border: var(--bw) solid transparent; border-radius: var(--radius); cursor: pointer; }
.jqp-emotes button:hover, .jqp-emotes button:focus-visible { border-color: var(--line-strong); outline: none; }
.jqp-emotes button.on { border-color: var(--accent); background: var(--surface); }
.jqp-emotes img { max-width: 100%; max-height: 36px; }
/* the looks sit on a neutral grey so each is judged as it will be, on a picture */
.jqp-looks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jqp-looks button { padding: var(--s-2); background: #3a3a3a; border: var(--bw) solid transparent; border-radius: var(--radius); cursor: pointer; }
.jqp-looks button.on { border-color: var(--accent); }
.jqp-looks .jqp-btn { font-size: var(--t-sm); }
/* the colours: little rounded squares, the chosen one ringed */
.jqp-colors { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jqp-colors button { width: 26px; height: 26px; padding: 0; background: var(--sw); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqp-colors button:hover, .jqp-colors button:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 2px; }
.jqp-colors button.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.jqp-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.jqp-days button { display: grid; gap: var(--s-1); padding: var(--s-4); text-align: left; font: inherit; color: var(--ink); background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqp-days button:hover, .jqp-days button:focus-visible { border-color: var(--ink); outline: none; }
.jqp-days button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.jqp-days b { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: var(--t-md); text-transform: uppercase; }
.jqp-days span { font: 700 var(--t-sm) / 1.2 var(--f-mono); }
.jqp-days button.on span { color: var(--accent); }
.jqp-days em { font: var(--t-micro) / 1.2 var(--f-mono); font-style: normal; color: var(--muted); }
.jqp-sure { display: flex; align-items: flex-start; gap: var(--s-3); padding: 0; text-align: left; font: var(--t-sm) / 1.45 var(--f-mono); color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.jqp-sure i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: var(--bw) solid var(--line-strong); border-radius: 4px; }
.jqp-sure.on i { background: var(--accent); border-color: var(--accent); }
.jqp-sure.on i::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid var(--accent-ink); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.jqp-sure:focus-visible i { outline: 2px solid var(--accent); outline-offset: 2px; }
.jqp-sum { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); margin: 0; font-size: var(--t-sm); max-width: 360px; }
.jqp-sum dt { color: var(--muted); }
.jqp-sum dd { margin: 0; text-align: right; font: 700 var(--t-sm) / 1.3 var(--f-mono); font-variant-numeric: tabular-nums; }
.jqp-sum dd.short { color: var(--accent); }
.jqp-pay { justify-self: start; }
.jqp-pay:disabled { opacity: 0.45; cursor: not-allowed; }
.jqp-hint, .jqp-fine, .jqp-need { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--muted); }
.jqp-need { color: var(--accent); }
.jqp-one { display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-6); font-size: var(--t-sm); line-height: 1.5; background: var(--surface-2); border: var(--bw) solid var(--line); border-radius: var(--radius); }
/* the preview */
.jqp-prevstage { display: grid; place-items: center; min-height: 440px; padding: var(--s-5); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.jqp-preview .jqp-buy { cursor: default; text-decoration: none; }
.jqp-edit .jqp-pic { cursor: grab; }
.jqp-edit .jqp-pic:active { cursor: grabbing; }
.jqp-edit .jqp-drag { pointer-events: auto; cursor: grab; touch-action: none; }
.jqp-edit .jqp-drag:hover { outline: 1px dashed rgba(255, 255, 255, 0.85); outline-offset: 3px; }
.jqp-edit .jqp-stk.sel { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the layers, top first, the picture always last */
.jqp-layers { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.jqp-layer { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-3); background: var(--surface-2); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.jqp-layer.sel { border-color: var(--accent); }
.jqp-layer-pick { display: contents; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.jqp-layer-pick img, .jqp-layer-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background: var(--surface); }
.jqp-layer-thumb { object-fit: cover; }
.jqp-layer-aa { display: grid; place-items: center; font: 900 italic 18px/1 var(--f-display); color: var(--tc, #fff); background: #3a3a3a; -webkit-text-stroke: 1px #000; paint-order: stroke fill; }
.jqp-layer-t { display: grid; gap: 2px; min-width: 0; font-size: var(--t-sm); }
.jqp-layer-t b { font-family: var(--f-mono); }
.jqp-layer-t span { color: var(--muted); font-size: var(--t-micro); font-family: var(--f-mono); }
.jqp-layer-acts { display: flex; gap: var(--s-1); }
.jqp-layer-acts button { width: 28px; height: 28px; padding: 0; font: 700 14px/1 var(--f-mono); color: var(--ink); background: transparent; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqp-layer-acts button:hover, .jqp-layer-acts button:focus-visible { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); outline: none; }
.jqp-layer-acts button:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--ink); border-color: var(--line-strong); }
.jqp-layer-sel { display: grid; gap: var(--s-3); padding: var(--s-4); border: var(--bw) solid var(--accent); border-radius: var(--radius); }
.jqp-layer-sel > b { font: 700 var(--t-label) / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.jqp-edit { touch-action: none; }
/* the middle, shown while something snaps to it */
.jqp-edit::before, .jqp-edit::after { content: ""; position: absolute; z-index: 30; display: none; background: var(--accent); pointer-events: none; }
.jqp-edit::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.jqp-edit::after { top: 50%; left: 0; right: 0; height: 1px; }
.jqp-edit.snap-x::before, .jqp-edit.snap-y::after { display: block; }
.jqp-aligns { display: inline-flex; flex-wrap: wrap; overflow: hidden; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); }
.jqp-aligns button { padding: var(--s-2) var(--s-4); font: 600 var(--t-sm) / 1.3 var(--f-mono); color: var(--ink); background: transparent; border: 0; border-left: var(--bw) solid var(--line-strong); cursor: pointer; }
.jqp-aligns button:first-child { border-left: 0; }
.jqp-aligns button:hover, .jqp-aligns button:focus-visible { color: var(--accent-ink); background: var(--accent); outline: none; }
.jqp-mock { margin: 0; padding: var(--s-3) var(--s-4); font: var(--t-sm) / 1.45 var(--f-mono); color: var(--ink); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.jqp-prevnote { text-align: center; }
/* your ads */
.jqp-minelist { display: grid; padding: var(--s-4) var(--s-6) var(--s-6); }
.jqp-empty-mine { padding: var(--s-6) 0; }
.jqp-mine { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-top: var(--bw) solid var(--line); }
.jqp-mine:first-child { border-top: 0; }
.jqp-mini { width: 112px; }
.jqp-mine-txt { display: grid; align-content: start; justify-items: start; gap: var(--s-2); font-size: var(--t-sm); }
.jqp-mine-txt > span:not(.jqp-chip) { color: var(--muted); }
.jqp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.jqp-down.sure { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.jqp-mockonly { font-size: var(--t-micro); }
@media (max-width: 860px) {
  .jqp-shopwrap { padding: var(--s-3); place-items: stretch; }
  .jqp-shophead { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .jqp-shophead h2 { font-size: calc(var(--t-lg) * 1.6); }
  .jqp-tabs { grid-column: 1 / -1; order: 3; }
  .jqp-tabs .jqp-seg { flex-wrap: nowrap; }
  .jqp-shop { max-height: none; height: 100%; }
  .jqp-shopbody { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .jqp-form { overflow: visible; }
  .jqp-side { order: -1; overflow: visible; border-left: 0; border-bottom: var(--bw) solid var(--line); }
  .jqp-prevstage { min-height: 0; }
  .jqp-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ THE ADMIN
   (plugs-admin.js, the mockup at /mockups/ads/admin/). Room between things
   (the user: the sections were "smooshed right onto each other"): the counts
   along the top, then the work on the left and the settings on the right,
   34 px apart, every card with a head over a hairline.
   jqa-, never the admin's .ad-card / .ad-row: EasyList hides those. */
.jqa { display: grid; gap: var(--s-9); padding-top: var(--s-9); padding-bottom: var(--s-11); }
.jqa-root { display: grid; gap: var(--s-9); }
.jqa-said { margin: 0; padding: var(--s-4) var(--s-6); font: 600 var(--t-sm) / 1.4 var(--f-mono); color: var(--ink); background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.jqa-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-6); }
.jqa-headacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
.jqa-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.jqa-tile { display: grid; gap: var(--s-2); padding: var(--s-6) var(--s-7); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.jqa-tile b { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc(var(--t-lg) * 1.9); line-height: 1; color: var(--ink); }
.jqa-tile span { font: 600 var(--t-sm) / 1.3 var(--f-mono); color: var(--muted); }
.jqa-tile.hot { border-color: var(--accent); }
.jqa-tile.hot b { color: var(--accent); }
.jqa-cols { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: var(--s-9); align-items: start; }
.jqa-main, .jqa-side { display: grid; gap: var(--s-9); align-content: start; }
.jqa-card { display: grid; gap: var(--s-6); padding: var(--s-7) var(--s-8) var(--s-8); background: var(--surface); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); }
.jqa-cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.jqa-cardhead h2 { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: var(--t-lg); text-transform: uppercase; }
.jqa-headx { margin-left: auto; }
.jqa-n { padding: 1px var(--s-3); font: 700 var(--t-micro) / 1.6 var(--f-mono); letter-spacing: 0.08em; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius); }
.jqa-intro, .jqa-empty { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--muted); }
.jqa-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-8); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.jqa-card > .jqa-item:first-of-type, .jqa-intro + .jqa-item { border-top: 0; padding-top: var(--s-2); }
.jqa-item:last-child { padding-bottom: 0; }
.jqa-body { display: grid; align-content: start; gap: var(--s-5); min-width: 0; }
.jqa-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.jqa-who { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-md); }
.jqa-who .u-cr-face { width: 22px; height: 22px; }
.jqa-meta { margin: 0; font: var(--t-sm) / 1.5 var(--f-mono); color: var(--muted); }
.jqa-meta a { color: var(--ink); }
.jqa-checks { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-6); margin: 0; align-items: center; padding: var(--s-5) var(--s-6); background: var(--surface-2); border-radius: var(--radius); }
.jqa-checks dt { font: 700 var(--t-label) / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.jqa-checks dd { margin: 0; min-width: 0; }
.jqa-checks .jqp-chip { text-transform: none; letter-spacing: 0; font-weight: 600; white-space: normal; }
/* approve big, not approved small: the reasons are a quiet row of choices */
.jqa-decide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); }
.jqa-no { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.jqa-no > span { margin-right: var(--s-2); font: 700 var(--t-label) / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.jqa-reason { padding: var(--s-1) var(--s-3); font: 600 var(--t-sm) / 1.4 var(--f-mono); color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqa-reason:hover, .jqa-reason:focus-visible { border-color: var(--accent); outline: none; }
.jqa-reason.sure, .btn.sure { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.jqa-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-6); padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.jqa-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-7); font: var(--t-sm) / 1.3 var(--f-mono); color: var(--muted); }
.jqa-stats b { color: var(--ink); font-size: var(--t-md); }
.jqa-mini .jqp-frame { width: 100%; }
.jqa-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.jqa-cardhead + .jqa-row { border-top: 0; padding-top: 0; }
.jqa-right { margin-left: auto; }
/* Bring back, free, for 1 to 14 days: its own line under an ended ad */
.jqa-back { flex: 1 1 100%; }
.jqa-note { padding-top: var(--s-2); }
/* the switches, one a line */
.jqa-switches { display: grid; gap: var(--s-3); }
.jqa-switch { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); text-align: left; font: 600 var(--t-sm) / 1.2 var(--f-mono); color: var(--muted); background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.jqa-switch i, .jqa-mini-switch i { position: relative; flex: none; width: 30px; height: 16px; background: var(--line-strong); border-radius: 4px; transition: background 0.15s; }
.jqa-switch i::after, .jqa-mini-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--surface); border-radius: 3px; transition: transform 0.15s; }
.jqa-switch.on { color: var(--ink); border-color: var(--accent); }
.jqa-switch.on i, .jqa-mini-switch.on i { background: var(--accent); }
.jqa-switch.on i::after, .jqa-mini-switch.on i::after { transform: translateX(14px); }
/* the house ads */
.jqa-hlist { display: grid; gap: var(--s-3); }
.jqa-hrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding: var(--s-3); background: var(--surface-2); border-radius: var(--radius); }
.jqa-hrow.off .jqa-mini, .jqa-hrow.off .jqa-htext { opacity: 0.45; }
.jqa-htext { display: grid; gap: 2px; min-width: 0; }
.jqa-htext b { font-size: var(--t-sm); }
.jqa-mini-switch { padding: var(--s-2); background: transparent; border: 0; cursor: pointer; }
.jqa-make2 { justify-self: start; }
.jqa-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.jqa-price { display: grid; gap: var(--s-2); }
.jqa-price em { font: var(--t-micro) / 1.2 var(--f-mono); font-style: normal; color: var(--muted); }
@media (max-width: 1100px) {
  .jqa-cols { grid-template-columns: minmax(0, 1fr); }
  .jqa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jqa-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .jqa-item { grid-template-columns: minmax(0, 1fr); }
  .jqa-card { padding: var(--s-6); }
}