/* The QC Finder page (/qc-finder and its agent pages) around static/css/qc4.css: the way back to all tools and the
   row of the other tools, Search by a photo, the works-with line, the guide and questions under the tool, and the
   More free tools strip. The blocky look of the other tool pages; orange only for buttons that leave to KakoBuy. */
.qcf4 { --line: #26262b; --raised: #141417; --raised-2: #1b1b20; --dim: #a1a1aa; --mute: #8b8b99;
  max-width: 1200px; margin: 0 auto; padding: 24px 14px 56px; min-width: 0; color: var(--bone, #fafafa); }
.qcf4 *, .qcf4 *::before, .qcf4 *::after { box-sizing: border-box; }
@media (min-width: 641px) { .qcf4 { padding: 28px 24px 64px; } }
@media (min-width: 960px) { .qcf4 { padding: 32px 32px 72px; } }
.qcf-main { display: grid; gap: 40px; min-width: 0; }
.qcf-main > .q4 { min-width: 0; }

/* the way back, and the other tools in the hub's order (plain links; they scroll away with the page) */
.qcf-chrome { display: grid; gap: 14px; justify-items: start; margin: 0 0 22px; min-width: 0; }
.tp-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px;
  border: 1px solid var(--ink-line, #27272a); background: var(--ink-raised, #18181b); color: var(--bone, #fafafa); text-decoration: none;
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.tp-back svg { width: 20px; height: 20px; flex: none; }
.tp-back:hover { border-color: var(--hazard); color: var(--hazard); text-decoration: none; }
.tp-back:focus-visible, .tt-row .tab-btn:focus-visible, .mt-tool:focus-visible, .qcf-atile:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
.tt-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; width: 100%; min-width: 0; container-type: inline-size; }
.tt-row .tab-btn { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; min-width: 0; padding: .4rem .6rem;
  background: var(--ink-raised, #18181b); border: 2px solid var(--ink-line, #27272a); border-radius: 2px; color: var(--bone-dim, #a1a1aa);
  font: 800 .95rem/1.05 var(--font-display); letter-spacing: .05em; text-transform: uppercase; text-align: center; text-decoration: none;
  transition: color .15s, border-color .15s; }
.tt-row .tab-btn:hover { border-color: var(--hazard); color: var(--hazard); }
.tt-row .tt-ic { flex: none; }
.tt-row .tt-s { display: none; }
.tt-row .tab-beta { font: 700 .58rem/1.3 var(--font-mono); letter-spacing: .08em; border: 1px solid currentColor; border-radius: 2px; padding: .05rem .3rem; opacity: .85; }
@media (max-width: 900px) {
  .tt-row { gap: .4rem; }
  .tt-row .tab-btn { min-height: 46px; padding: .3rem .25rem; gap: .3rem; font-size: .72rem; letter-spacing: .03em; }
  .tt-row .tt-l, .tt-row .tab-beta { display: none; }
  .tt-row .tt-s { display: inline; }
}
/* on an answer the photo and Buy come first: the row moves under the money block (qc4.js puts a copy there) */
.q4-onres .qcf-chrome > .tt-row { display: none; }
.q4-info > .tt-row { margin: 6px 0 0; }
.q4-info .qcf-shop { justify-self: start; font: 700 13px var(--font-body); color: var(--hazard); }
.q4-info > .tt-row .tab-btn { min-height: 46px; padding: .3rem .25rem; gap: .3rem; font: 800 .72rem/1.05 var(--font-display); letter-spacing: .03em; }
.q4-info > .tt-row .tt-l, .q4-info > .tt-row .tab-beta { display: none; }
.q4-info > .tt-row .tt-s { display: inline; }
/* a row too narrow for each icon beside its word (phones; the copy beside the photo on a tablet): the icon goes above the
   word, and in the narrowest rows the word gets smaller with the row, so every word stays inside its tile */
@container (max-width: 371px) {
  .qcf4 .tt-row .tab-btn { flex-direction: column; gap: 2px; padding-left: 2px; padding-right: 2px; font-size: min(.72rem, 3.8cqw); }
}

/* the title, the H1 line under it and the sub-line */
.qcf4 .q4-hl .qcf-h1 { margin: 10px 0 0; max-width: 52ch; color: var(--bone, #fafafa); font: 700 16px/1.4 var(--font-body); text-transform: none; letter-spacing: 0; }
.qcf4 .q4-hl .qcf-sub { margin: 8px 0 0; max-width: 62ch; color: var(--dim); font: 400 14.5px/1.55 var(--font-body); }
.qcf4 .q4-hl .qcf-sub strong { color: var(--bone, #fafafa); font-weight: 700; }
@media (min-width: 960px) { .qcf4 .q4-hl .qcf-h1 { font-size: 18px; } }

/* Search by a photo */
.qcf-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; min-width: 0; }
.qcf-photo { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer;
  border: 2px dashed var(--line); background: var(--raised); color: var(--bone, #fafafa);
  font: 800 12.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transition: border-color .15s; }
.qcf-photo:hover, .qcf-photo:focus-within { border-color: var(--hazard); }
.qcf-photo:focus-within { outline: 2px solid var(--hazard); outline-offset: 2px; }
/* visually hidden but still focusable: `hidden` would drop it out of the tab order */
.qcf-photo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.qcf-photo-note { color: var(--mute); font-size: 13px; line-height: 1.45; min-width: 0; }
.qcf-pmsg { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--hazard); background: var(--raised); font-size: 14px; color: var(--bone, #fafafa); }
.qcf-pmsg[hidden], .qcf-matches[hidden] { display: none; }
.qcf-matches { margin: 14px 0 0; display: grid; gap: 10px; min-width: 0; }
.qcf-matches h3 { margin: 0; font: 400 19px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--bone, #fafafa); }
.qcf-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .qcf-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qcf-match { display: grid; align-content: start; min-width: 0; border: 1px solid var(--line); background: var(--raised); }
.qcf-match img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: #000; }
.qcf-mbody { display: grid; gap: 6px; padding: 8px 10px 10px; min-width: 0; }
.qcf-mname { font: 600 13px/1.3 var(--font-body); color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.qcf-mprice { font: 700 13px var(--font-mono); color: var(--hazard); }
.qcf-match button { min-height: 44px; border: 0; cursor: pointer; background: var(--hazard); color: var(--on-hazard, #06141c);
  font: 800 12.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--hazard-deep, #0e7490); }

/* what links work */
.qcf4 .qcf-agentsline { margin: 16px 0 0; max-width: 70ch; color: var(--mute); font-size: 13.5px; line-height: 1.6; }
.qcf4 .qcf-agentsline strong { color: var(--dim); }
.qcf4 .qcf-agentsline a, .qcf-content a, .qcf-cta a { color: var(--hazard); font-weight: 700; text-decoration: none; }
.qcf4 .qcf-agentsline a:hover, .qcf-content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.qcf-ag .q4-hero { grid-template-columns: minmax(0, 1fr); }
.qcf4 .q4-hero { align-items: start; }        /* the example stays at the top when the photo matches open below */
.qcf-ag .q4-hl { max-width: 820px; }

/* the other tools after the tool */
.mt { display: grid; gap: 12px; min-width: 0; }
/* while an answer is on its way (qc4.js hold()) the page under it is out of view: it comes back under the answer */
.q4-busy .qcf-main > .mt, .q4-busy .qcf-main > .qcf-content { display: none; }
.mt-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mt-h h3 { font: 400 19px/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin: 0; color: var(--bone, #fafafa); }
.mt-h a { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hazard); padding: 12px 0; margin: -12px 0; text-decoration: none; }
.mt-tools { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.mt-tool { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic nm go" "ic ln go" "ic st go"; column-gap: 12px; row-gap: 2px;
  align-items: center; padding: 14px; border: 1px solid var(--ink-line, #27272a); background: var(--ink-raised, #18181b); color: var(--bone, #fafafa); text-decoration: none; min-width: 0; }
.mt-tool:hover { border-color: var(--hazard); text-decoration: none; }
.mt-ic { grid-area: ic; font-size: 28px; line-height: 1; }
.mt-nm { grid-area: nm; font: 400 20px/1.05 var(--font-display); text-transform: uppercase; }
.mt-ln { grid-area: ln; color: var(--bone-dim, #a1a1aa); font-size: 13px; line-height: 1.35; }
.mt-st { grid-area: st; font: 700 11px/1.3 var(--font-mono); color: var(--hazard); letter-spacing: .06em; text-transform: uppercase; }
.mt-go { grid-area: go; font: 700 18px/1 var(--font-mono); color: var(--hazard); }
@media (min-width: 640px) { .mt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mt-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the guide and the questions under the tool */
.qcf-content { display: grid; gap: 0; min-width: 0; max-width: 900px; color: var(--dim); font: 15px/1.6 var(--font-body); }
.qcf-content h2 { margin: 2.1rem 0 .7rem; color: var(--bone, #fafafa); font: 400 26px/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.qcf-content h2:first-child { margin-top: 0; }
.qcf-content p { margin: 0 0 .85rem; max-width: 70ch; }
.qcf-content ol { margin: 0 0 .85rem; padding-left: 1.3rem; max-width: 70ch; }
.qcf-content ol li { margin: 0 0 .35rem; }
.qcf-content strong, .qcf-content b { color: var(--bone, #fafafa); }
.qcf-check { list-style: none; padding: 0; margin: .3rem 0 .9rem; max-width: 70ch; }
.qcf-check li { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; line-height: 1.55; }
.qcf-check .ic { flex: 0 0 auto; }
.qcf-agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: .6rem 0 .4rem; }
@media (min-width: 640px) { .qcf-agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .qcf-agrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qcf-content .qcf-atile { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px; border: 2px solid var(--ink-line, #27272a); background: var(--ink-raised, #18181b);
  color: var(--bone, #fafafa); font-weight: 400; text-decoration: none; transition: border-color .15s; }
.qcf-content .qcf-atile:hover { border-color: var(--hazard); text-decoration: none; }
.qcf-atile b { font: 400 18px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; color: var(--bone, #fafafa); }
.qcf-atile > span { font: 12px/1.35 var(--font-mono); color: var(--mute); }
.qcf-dead { display: inline-block; margin-left: 6px; padding: 2px 6px; vertical-align: 3px; border: 1px solid rgba(251,191,36,.45); color: #fbbf24;
  font: 700 9.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.qcf-faq h3 { margin: 1.3rem 0 .35rem; color: var(--bone, #fafafa); font: 700 16px/1.35 var(--font-body); text-transform: none; letter-spacing: 0; }
.qcf-faq h3:first-child { margin-top: .2rem; }
.qcf-cta { margin-top: 1.8rem; padding: 14px 16px; border: 1px solid var(--line); background: var(--raised); color: var(--dim); font-size: 14px; line-height: 1.55; }
@media (min-width: 960px) { .qcf-content h2 { font-size: 30px; } }