/* QC Finder and QC result pages: the big paste box, then the result = a big photo, small thumbs ending in "+N more",
   the name, Buy / Switch agent, the "GL or RL?" share box, the welcome pack. PC: a bigger viewer, the listing's details
   beside it and every photo in a grid under it. Rails of finds and fresh look-ups below. Orange is only for money buttons. */
.q4 { --ink: #0a0a0b; --raised: #141417; --raised-2: #1b1b20; --line: #26262b; --bone: #fafafa; --dim: #a1a1aa; --mute: #8b8b99;
  --hazard: #22d3ee; --hazard-deep: #0e7490; --on-hazard: #06141c; --money: #ff6a1a; --money-deep: #b4420a; --on-money: #0a0a0b;
  --live: #22c55e; --ok: #22c55e;
  --display: 'Anton', 'Anton Fallback', 'Arial Narrow', Impact, sans-serif; --body: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --mono: 'Space Mono', 'Space Mono Fallback', ui-monospace, Consolas, monospace;
  display: grid; gap: 30px; min-width: 0; text-align: left; color: var(--bone); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
:where(.q4) *, :where(.q4) *::before, :where(.q4) *::after { box-sizing: border-box; }
:where(.q4) a { color: inherit; text-decoration: none; }
:where(.q4) :where(button, input) { font: inherit; color: inherit; }
.q4 a:focus-visible, .q4 button:focus-visible, .q4 input:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
:where(.q4) img { max-width: 100%; }
.q4 [hidden] { display: none !important; }
.q4 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q4 h2, .q4 h3 { margin: 0; }

/* the finder: title, the big paste box, the example */
.q4-hero { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.q4-hl { display: grid; gap: 0; min-width: 0; }
.q4-hl .tp-t { font: 400 42px/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0; color: var(--bone); }
.q4-hl .tp-t span { color: var(--hazard); }
.q4-hl .tp-sub { margin: 10px 0 0; color: var(--dim); font: 400 15px/1.45 var(--body); text-transform: none; letter-spacing: 0; max-width: 46ch; }
.q4-big { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 6px 6px 14px; background: var(--raised);
  border: 2px solid var(--line); cursor: text; }
.q4-big:focus-within { border-color: var(--hazard); }
/* the whole box is the field: its border lights up while the cursor is in it, so the field draws no ring of its own
   (brand.css rings every input with !important) */
.q4 .q4-big input:focus-visible { outline: 0 !important; }
@media (forced-colors: active) { .q4 .q4-big:focus-within { outline: 2px solid Highlight; outline-offset: 2px; } }
.q4-big svg { color: var(--mute); flex: 0 0 auto; }
.q4-big input { flex: 1 1 calc(100% - 40px); min-width: 0; height: 44px; border: 0; outline: 0; background: none; font-size: 16px; color: var(--bone); }
.q4-big input::placeholder { color: var(--mute); }
.q4-big .go { flex: 1 1 100%; height: 46px; padding: 0 16px; border: 0; cursor: pointer; background: var(--hazard); color: var(--on-hazard);
  font: 800 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--hazard-deep); white-space: nowrap; }
.q4-big .go:disabled, .q4-qbar button:disabled { opacity: .6; cursor: default; }
.q4-msg { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--hazard); background: var(--raised); font-size: 14px; color: var(--bone); }
.q4-cline { margin: 10px 0 0; font-size: 13.5px; color: var(--dim); }
.q4-cline a { color: var(--money); font-weight: 700; }
.q4-ex { display: grid; gap: 10px; align-content: start; padding: 12px; background: var(--raised); border: 1px solid var(--line); min-width: 0; }
.q4-ex:hover { border-color: var(--hazard); }
.q4-ex .k { font: 700 12.5px var(--body); color: var(--dim); }
.q4-ex .ph { display: grid; grid-template-columns: repeat(3, 72px); gap: 4px; }
.q4-ex .ph img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: #000; }
.q4-ex .t { display: grid; gap: 2px; min-width: 0; }
.q4-ex b { font: 400 22px/1.02 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.q4-ex .m { font: 12.5px var(--mono); color: var(--dim); }
.q4-ex .go { font: 700 13px var(--body); color: var(--hazard); }

/* the result's one-row link box */
.q4-qbar { display: flex; gap: 8px; min-width: 0; }
.q4-qbar input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 2px solid var(--line); background: var(--raised); color: var(--bone);
  font: 16px var(--body); outline: 0; }
.q4-qbar input:focus { border-color: var(--hazard); }
.q4-qbar button { flex: 0 0 auto; height: 48px; padding: 0 18px; border: 0; cursor: pointer; background: var(--hazard); color: var(--on-hazard);
  font: 800 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--hazard-deep); }
.q4-res { display: grid; gap: 16px; min-width: 0; }
#q4-out { display: grid; gap: 30px; min-width: 0; }

/* the result */
.q4-pd { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.q4-viewer { position: relative; overflow: hidden; background: #000; border: 1px solid var(--line); touch-action: pan-y; user-select: none; }
.q4-viewer > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; cursor: zoom-in; }
.q4-vnav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; cursor: pointer; background: rgba(10,10,11,.72);
  color: #fff; font: 700 20px/1 var(--body); display: grid; place-items: center; }
.q4-vprev { left: 8px; } .q4-vnext { right: 8px; }
.q4-vcap { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; pointer-events: none; }
.q4-vcap span { background: rgba(10,10,11,.75); padding: 5px 8px; font: 700 11.5px/1 var(--mono); }
.q4-vzoom { position: absolute; right: 8px; top: 8px; height: 36px; padding: 0 10px; border: 0; cursor: pointer; background: rgba(10,10,11,.75); color: #fff;
  font: 700 12px var(--body); display: inline-flex; align-items: center; gap: 6px; }
.q4-peek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.q4-peek button { position: relative; padding: 0; border: 0; cursor: pointer; background: #000; aspect-ratio: 1; overflow: hidden; }
.q4-peek button[aria-current="true"] { outline: 2px solid var(--hazard); outline-offset: -2px; }
.q4-peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q4-peek .more { display: grid; place-content: center; gap: 1px; background: var(--raised-2); border: 1px solid var(--line); text-align: center; font: 700 13px/1.05 var(--mono); color: var(--bone); }
.q4-peek .more small { font: 600 11px/1.1 var(--body); color: var(--dim); }
.q4-info { display: grid; gap: 12px; align-content: start; min-width: 0; }
.q4-head { display: grid; grid-template-columns: minmax(0, 1fr); }
.q4 .q4-title { margin: 0; font: 400 30px/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; color: var(--bone);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q4-meta { margin: 0; font: 13px var(--mono); color: var(--dim); }
/* a thin answer filled from the item's saved set says so in one quiet line (qc4.js savedLine): on a phone 8 px under
   the Buy row, so Buy sits where a live answer has it (above the first visit's cookie bar); from 720 px under the count */
.q4-saved { margin: -4px 0 0; font: 12px/1.45 var(--mono); color: var(--mute); }
.q4-det { display: none; }
.q4-buyrow { display: flex; gap: 8px; }
.q4-buyrow .q4-buy { flex: 1 1 0%; }
.q4-buy { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; min-width: 0;
  background: var(--money); color: var(--on-money) !important; font: 800 14px/1 var(--body); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 3px 3px 0 var(--money-deep); }
.q4-buy .bl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.q4-buy.alt { background: var(--hazard); color: var(--on-hazard) !important; box-shadow: 3px 3px 0 var(--hazard-deep); }
.q4-sw { flex: none; min-height: 52px; padding: 0 10px; border: 2px solid var(--line); background: none; cursor: pointer; font: 700 12px/1 var(--body); letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; color: var(--bone); }
.q4-sw:hover, .q4-sw[aria-expanded="true"] { border-color: var(--bone); }
.q4-sw .l2 { display: none; }
/* the share box: 8px under Buy (the column's gap is 12px) */
.q4-ask { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: -4px; padding: 10px 14px; border: 2px solid var(--hazard);
  background: rgba(34,211,238,.08); color: var(--bone); cursor: pointer; text-align: left; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.q4-ask svg { flex: none; }
.q4-ask .t { display: grid; gap: 2px; min-width: 0; }
.q4-ask b { font: 400 20px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--hazard); }
.q4-ask .s { font: 12px/1.4 var(--mono); color: var(--dim); }
.q4-ask .go { flex: none; margin-left: auto; display: grid; place-items: center; color: var(--hazard); transition: transform .15s; }
.q4-ask .go svg { width: 20px; height: 20px; }
@media (min-width: 960px) { .q4-ask .go svg { width: 22px; height: 22px; } }
.q4-ask:active .go { transform: scale(.9); }
.q4 .q4-ask:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.q4-ask:active { background: rgba(34,211,238,.16); }
.q4-ask:disabled { cursor: progress; opacity: .7; }
@media (hover: hover) { .q4-ask:hover { background: rgba(34,211,238,.16); } .q4-ask:hover .go { transform: translateY(-2px); } }
.q4-picker { display: grid; gap: 2px; max-height: 268px; overflow-y: auto; overscroll-behavior: contain; }
.q4-picker button { min-height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border: 0; background: var(--raised-2);
  cursor: pointer; font: 700 14px/1 var(--body); text-align: left; color: var(--bone); }
.q4-picker button:hover { background: #24242a; }
.q4-picker button span { font: 600 12px var(--body); color: var(--hazard); }
.q4-welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--money);
  background: rgba(255,106,26,.07); }
.q4-welcome > span { display: grid; gap: 3px; min-width: 0; }
.q4-welcome .wk { font: 700 11.5px var(--body); color: var(--money); }
.q4-welcome b { font: 400 17px/1.05 var(--display); text-transform: uppercase; color: var(--bone); }
.q4-welcome .wbtn { justify-self: end; min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--money); color: var(--on-money) !important;
  font: 800 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--money-deep); white-space: nowrap; }
.q4-haul { justify-self: start; font: 700 13px var(--body); color: var(--hazard) !important; }
.q4-extra { display: grid; gap: 6px; font-size: 12.5px; color: var(--dim); }
.q4-extra a { color: var(--hazard); font-weight: 700; }
.q4-extra .ref { font: 12px var(--mono); }
.q4-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--mute); }
.q4-empty { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); background: var(--raised); }
.q4-empty b { font: 400 22px/1.05 var(--display); text-transform: uppercase; }
.q4-empty p { margin: 0; color: var(--dim); font-size: 14px; max-width: 60ch; }
.q4-empty .warn { color: #fbbf24; }
.q4-empty .q4-buy { justify-self: start; }
.q4-loading { display: grid; justify-items: center; gap: 10px; padding: 28px 12px; color: var(--dim); font-size: 14px; }
/* until the loading animation is in: a small spinner, standing still for those who ask for less motion */
.q4-spin { display: block; width: 28px; height: 28px; border: 3px solid rgba(34,211,238,.2); border-top-color: var(--hazard); border-radius: 50%;
  animation: q4-spin .8s linear infinite; }
@keyframes q4-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .q4-spin { animation: none; } }
/* while an answer is on its way (qc4.js hold()) its space is kept and the rails are out of view: when it lands, nothing
   on the screen moves, and the rails come back under it */
.q4-busy .q4-loading { min-height: 100vh; align-content: start; }
.q4-busy #q4-rails { display: none; }
.q4-all { display: none; gap: 12px; min-width: 0; }
.q4-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.q4-qt { position: relative; padding: 0; border: 0; cursor: zoom-in; background: #000; aspect-ratio: 1; overflow: hidden; }
.q4-qt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q4-more { width: 100%; min-height: 44px; border: 1px solid var(--line); background: var(--raised); cursor: pointer; font: 700 13.5px/1 var(--body); color: var(--bone); }
.q4-more:hover { border-color: var(--bone); }
.q4-det .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.q4-det .price b { font: 400 36px/1 var(--display); }
.q4-det .price span { font: 700 14px var(--mono); color: var(--dim); }
.q4-det .vars { display: grid; gap: 8px; }
.q4-det .vk { font: 700 13px var(--body); color: var(--dim); }
.q4-det .vk b { color: var(--ok); }
.q4-det .vk b.out { color: #ff6b6b; }
.q4-det .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.q4-det .chips span { min-width: 48px; height: 40px; padding: 0 10px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--raised);
  font: 700 13.5px var(--mono); }
.q4-det .facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 13.5px; }
.q4-det .facts dt { color: var(--dim); }
.q4-det .facts dd { margin: 0; overflow-wrap: anywhere; }
.q4-det .facts a { color: var(--hazard); font-weight: 700; }

/* rails */
.q4-rails { display: grid; gap: 30px; min-width: 0; }
.q4-row { display: grid; gap: 12px; min-width: 0; }
.q4-rowh { display: flex; align-items: center; gap: 12px; }
.q4 .q4-rowh h2 { margin: 0; font: 400 21px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; color: var(--bone); }
.q4-rowh h2 a:hover { color: var(--hazard); }
.q4-rowh .chev { color: var(--mute); font: 700 18px/1 var(--body); }
.q4-rowh .va { padding: 12px 0; margin: -12px 0; color: var(--hazard); font: 700 13px var(--body); white-space: nowrap; }
.q4-rowh .qsub { font: 13px var(--mono); color: var(--dim); }
.q4-live { font: 700 12.5px var(--body); color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
.q4-live::before { content: ""; width: 7px; height: 7px; background: var(--live); }
.q4-railw { position: relative; min-width: 0; }
.q4-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 3.3); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; scroll-behavior: smooth; }
.q4-rail::-webkit-scrollbar { display: none; }
.q4-rail > * { scroll-snap-align: start; }
.q4-rbtn { display: none; position: absolute; top: 34%; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--raised-2); color: var(--bone);
  cursor: pointer; place-items: center; font: 700 18px/1 var(--body); z-index: 2; }
.q4-rbtn.prev { left: -14px; } .q4-rbtn.next { right: -14px; }
.q4-card { display: grid; gap: 4px; align-content: start; min-width: 0; }
.q4-card .im { position: relative; overflow: hidden; background: var(--raised); aspect-ratio: 1; border: 1px solid var(--line); display: block; }
.q4-card .im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.q4-card.pr .im img { background: #fff; }
.q4-card:hover .im img { transform: scale(1.03); }
.q4-card .n { margin-top: 4px; font: 600 13.5px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bone); }
.q4-card .n.id { font: 700 12.5px/1.25 var(--mono); color: var(--dim); }
.q4-card .m { font: 13px/1.3 var(--body); color: var(--dim); display: flex; gap: 4px 6px; align-items: center; flex-wrap: wrap; }
.q4-card .p { font: 700 13.5px var(--mono); color: var(--hazard); }
.q4-card .ago { color: var(--hazard); }
.q4-faq details { border-top: 1px solid var(--line); }
.q4-faq details:last-child { border-bottom: 1px solid var(--line); }
.q4-faq summary { min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; font: 700 14.5px/1.3 var(--body); }
.q4-faq summary::-webkit-details-marker { display: none; }
.q4-faq summary::after { content: "+"; color: var(--hazard); font: 700 18px var(--mono); }
.q4-faq details[open] summary::after { content: "\2212"; }
.q4-faq p { margin: 0 0 14px; color: var(--dim); font-size: 14px; max-width: 70ch; }

/* screens: the finder vs a result (rails swap order: products first after an answer) */
.q4[data-screen="res"] .q4-hero { display: none; }
.q4[data-screen="res"] .q4-rails .q4-row[data-r="finds"] { order: -1; }

@media (max-width: 379px) {
  .q4-sw { width: 52px; padding: 0; }
  .q4-sw .l, .q4-buy .arr { display: none; }
}
/* a narrow info column (phones under 390px; tablets with the photo beside it): the box's first line stays one line,
   beside both icons */
@media (max-width: 389px) { .q4-ask { padding: 10px 12px; } }
@media (max-width: 374px) { .q4-ask { gap: 8px; padding: 10px; } }
@media (max-width: 359px), (min-width: 720px) and (max-width: 779px) {
  .q4-ask { gap: 8px; padding: 10px; }
  .q4-ask b { font-size: 17px; letter-spacing: .02em; }
  .q4-ask .s { font-size: 11px; }
  .q4-ask svg, .q4-ask .go svg { width: 18px; height: 18px; }
  .q4-saved { font-size: 10.5px; }
}
@media (min-width: 640px) {
  .q4-rail { grid-auto-columns: calc((100% - 30px) / 4); }
  .q4-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .q4-ex .ph { grid-template-columns: repeat(3, minmax(0, 120px)); }
  .q4-hl .tp-t { font-size: 52px; }
  .q4-big { flex-wrap: nowrap; padding: 0 6px 0 16px; height: 58px; }
  .q4-big input { flex: 1; height: auto; }
  .q4-big .go { flex: 0 0 auto; height: 44px; }
}
@media (min-width: 720px) {
  .q4-pd { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; }
  /* beside the photo, Buy is far from the fold: the saved line goes back under the count, 4 px under it */
  .q4-info > .q4-head, .q4-info > .q4-meta { order: -2; }
  .q4-info > .q4-saved { order: -1; margin-top: -8px; }
}
@media (min-width: 960px) {
  .q4 { gap: 40px; }
  #q4-out { gap: 40px; }
  .q4-hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; }
  .q4-hl .tp-t { font-size: 64px; }
  .q4-big { margin-top: 22px; height: 78px; padding: 0 9px 0 22px; gap: 14px; border-color: #3a3a42; }
  .q4-big:focus-within { border-color: var(--hazard); }
  .q4-big svg { width: 26px; height: 26px; color: var(--dim); }
  .q4-big input { font-size: 19px; }
  .q4-big .go { height: 60px; padding: 0 28px; font-size: 16px; box-shadow: 4px 4px 0 var(--hazard-deep); }
  .q4-cline { margin-top: 14px; font-size: 14px; }
  .q4-qbar { max-width: 760px; }
  .q4-pd { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
  .q4-peek { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .q4 .q4-title { font-size: 40px; -webkit-line-clamp: 3; }
  .q4-det { display: grid; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .q4-buy { font-size: 15px; letter-spacing: .05em; }
  .q4-sw { min-height: 52px; padding: 0 18px; font-size: 13px; }
  .q4-sw .l2 { display: inline; }
  .q4-all { display: grid; }
  .q4-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
  .q4-more { max-width: 360px; justify-self: center; }
  .q4-rail { grid-auto-columns: calc((100% - 84px) / 8); gap: 12px; }
  .q4-rbtn { display: grid; }
  .q4-card .n { font-size: 12.5px; }
  .q4-card .m { font-size: 12px; display: grid; gap: 1px; }
  .q4-card .m .dot { display: none; }
  .q4-card .p { font-size: 12.5px; }
  .q4 .q4-rowh h2 { font-size: 24px; }
  .q4-welcome b { font-size: 17px; }
}

/* every QC photo full screen (from "+N more"), and the big photo */
.q4-gal { position: fixed; inset: 0; z-index: 1250; background: #0a0a0b; display: grid; grid-template-rows: auto minmax(0, 1fr); color: #fafafa;
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; }
.q4-gal[hidden], .q4-lb[hidden] { display: none; }
.q4-galtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #26262b; }
.q4-galtop b { font: 400 22px/1 'Anton', 'Anton Fallback', 'Arial Narrow', sans-serif; text-transform: uppercase; }
.q4-galgrid { overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 4px; padding: 4px; align-content: start; }
.q4-galgrid button { position: relative; padding: 0; border: 0; cursor: zoom-in; background: #000; aspect-ratio: 1; overflow: hidden; }
.q4-galgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 640px) { .q4-galgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 10px; } }
@media (min-width: 1100px) { .q4-galgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 1180px; width: 100%; margin: 0 auto; } }
.q4-lb { position: fixed; inset: 0; z-index: 1260; background: rgba(0,0,0,.94); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fafafa;
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; }
.q4-lbtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
.q4-lbtop > span { font: 700 12.5px 'Space Mono', 'Space Mono Fallback', monospace; color: #a1a1aa; }
.q4-lbtools { display: flex; gap: 8px; align-items: center; }
.q4-lbtool { height: 42px; padding: 0 12px; border: 1px solid #333; background: #111; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font: 700 12.5px 'Archivo', system-ui, sans-serif; text-decoration: none; }
.q4-x { width: 42px; height: 42px; border: 1px solid #333; background: #111; cursor: pointer; color: #fff; font: 400 22px/1 system-ui, sans-serif; }
/* one row and one column the size of the stage: the photo's max-height: 100% then fits the screen (an implicit row grew
   to the photo and pushed its bottom below the screen) */
.q4-lbmid { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center;
  min-height: 0; padding: 0 56px; touch-action: pan-y pinch-zoom; }
.q4-lbmid img { max-width: 100%; max-height: 100%; object-fit: contain; }
.q4-lbnav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid #333; background: #111; color: #fff; cursor: pointer;
  font: 700 22px/1 system-ui, sans-serif; }
.q4-lbprev { left: 8px; } .q4-lbnext { right: 8px; }
.q4-lbthumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; padding: 10px 14px 16px; }
.q4-lbthumbs::-webkit-scrollbar { display: none; }
.q4-lbthumbs button { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 0; cursor: pointer; background: #000; overflow: hidden; opacity: .55; }
.q4-lbthumbs button[aria-current="true"] { opacity: 1; outline: 2px solid #22d3ee; outline-offset: -2px; }
.q4-lbthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 639px) { .q4-lbmid { padding: 0; } .q4-lbnav { background: rgba(10,10,11,.72); } .q4-lbtool .t { display: none; } }
.q4-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1300; padding: 10px 14px; background: #fafafa; color: #0a0a0b;
  font: 700 13px 'Archivo', system-ui, sans-serif; max-width: calc(100% - 32px); overflow-wrap: anywhere; }
.q4-toast:empty { padding: 0; }
/* when a link cannot be copied for the visitor: it stays on screen, selected, until closed */
.q4-copybox { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1310; max-width: 560px; margin: 0 auto;
  display: grid; gap: 8px; padding: 10px 12px 12px; background: #141417; border: 2px solid #22d3ee; color: #fafafa; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font: 14px/1.4 'Archivo', 'Archivo Fallback', system-ui, sans-serif; }
.q4-cbtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.q4-cbtop b { font: 700 13px/1.2 'Space Mono', 'Space Mono Fallback', monospace; letter-spacing: .06em; text-transform: uppercase; color: #22d3ee; }
.q4-copybox .q4-x { width: 44px; height: 44px; flex: none; }
.q4-cbin { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid #3a3a42; border-radius: 0; background: #0a0a0b; color: #fafafa; resize: none; field-sizing: content;
  font: 16px/1.35 'Space Mono', 'Space Mono Fallback', ui-monospace, monospace; word-break: break-all; -webkit-user-select: text; user-select: text; }
.q4-cbin:focus { outline: 2px solid #22d3ee; outline-offset: 0; }
.q4-cbgo { min-height: 44px; padding: 8px 14px; border: 0; cursor: pointer; background: #22d3ee; color: #06141c; box-shadow: 3px 3px 0 #0e7490;
  font: 800 13px/1.25 'Archivo', 'Archivo Fallback', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; touch-action: manipulation; }
.q4-cbgo:focus-visible { outline: 2px solid #fafafa; outline-offset: 3px; }
.q4-cpy { position: fixed; top: 0; left: -9999px; width: 2em; height: 2em; padding: 0; border: 0; opacity: 0; font-size: 16px; }
body.q4-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .q4 *, .q4-gal *, .q4-lb * { transition: none !important; scroll-behavior: auto !important; } }

/* the page's own input styles must not reach the QC boxes */
.q4 .q4-big input, .q4 .q4-qbar input { font-family: var(--body); letter-spacing: 0; text-transform: none; box-shadow: none; }
.q4 .q4-big input { background: none; border: 0; padding: 0; }
.q4 .q4-big input::placeholder, .q4 .q4-qbar input::placeholder { font-family: var(--body); letter-spacing: 0; color: var(--mute); }
.q4 .q4-big input, .q4 .q4-big input:focus { width: auto; box-shadow: none; border: 0; }
.q4 .q4-qbar input:focus { box-shadow: none; }