/* Plants: the photo first, whole, the answer under it. Big targets, gloves or not. */
/* minmax(0,1fr) and min-width:0, 2026-11-04, job plants-fix-photo: a grid
   track sizes to its widest child, and the look-alike row is three cards
   wide, so without them Don't know pushed the page to twice the phone's
   width. The row scrolls inside itself instead. */
.pq-app{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:640px;margin:0 auto}
.pq-app>*,.pq-two>*,.pq-reveal>*,.pq-intro>*,.pq-like,.pq-views>*{min-width:0}
.pq-score{margin:0;color:var(--dim,#9a9a9a);font-size:.95rem}
.pq-score b{color:var(--gold,#d4a94a);font-size:1.3rem;margin-right:4px}
.pq-weak{display:block;font-size:.85rem;margin-top:2px}
.pq-where{margin:0;font-size:.85rem;color:var(--dim,#9a9a9a)}
.pq-photo{margin:0;position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);min-height:160px;max-height:62vh;display:grid;place-items:center}
.pq-photo img{max-width:100%;max-height:62vh;display:block;object-fit:contain;cursor:zoom-in}
.pq-photo.pq-gone img{visibility:hidden}
.pq-loading{position:absolute;inset:auto 8px 8px 8px;margin:0;text-align:center;color:var(--dim,#9a9a9a);font-size:.9rem;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.pq-loading .btn-s{min-height:36px}
.pq-part{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:.8rem;padding:3px 9px;border-radius:999px}
.pq-ask,.pq-reveal,.pq-intro,.pq-end{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
/* On the phone the photo leaves room for the answer box on the same screen,
   and shrinks again once answered. */
@media (max-width:880px){
  .pq-two{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .pq-views>.pq-photo,.pq-views>.pq-photo img{max-height:30vh}
  .pq-app .pq-views .pq-thumbs .pq-photo,.pq-app .pq-views .pq-thumbs .pq-photo img{max-height:80px;min-height:60px}
  .pq-two.pq-shown .pq-views>.pq-photo,.pq-two.pq-shown .pq-views>.pq-photo img{max-height:24vh}
  .pq-app .pq-two.pq-shown .pq-thumbs .pq-photo,.pq-app .pq-two.pq-shown .pq-thumbs .pq-photo img{max-height:64px;min-height:56px}
  .pq-strip>*{flex-basis:min(58vw,200px)}
  .pq-strip .pq-photo,.pq-strip .pq-photo img{max-height:150px}
  .pq-strip .pq-photo{min-height:100px}
}
.pq-ask input{min-height:48px;font-size:1.05rem;background:rgba(255,255,255,.06);color:inherit;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:0 12px}
.pq-list{display:grid;gap:6px}
.pq-opt{min-height:48px;text-align:left;font-style:italic;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:inherit}
.pq-row{display:flex;gap:8px;flex-wrap:wrap}
.pq-row .btn-s{min-height:44px}
.pq-verdict{margin:0;font-weight:600}
.pq-v1{color:#7bc47f}.pq-v05{color:var(--gold,#d4a94a)}.pq-v0{color:#e07a6a}
.pq-name{margin:0;font-size:1.25rem}
.pq-said{display:block;font-size:.85rem;color:var(--dim,#9a9a9a);font-style:normal}
.pq-how h3,.pq-like h3{margin:4px 0;font-size:.95rem}
.pq-how p,.pq-why{margin:0 0 6px;line-height:1.45}
.pq-split{color:var(--dim,#9a9a9a)}
.pq-credit{margin:0;font-size:.75rem}
.pq-src,.pq-credit a{color:var(--dim,#9a9a9a)}
.pq-modes{display:flex;flex-wrap:wrap;gap:8px}
.pq-modes .btn-s{min-height:44px;flex:1 1 30%}
.pq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pq-grid .pq-photo{min-height:110px;max-height:220px}
.pq-grid .pq-photo img{max-height:220px}
.pq-like-card{display:grid;gap:4px;align-content:start}
.pq-like-name{margin:0;font-size:1rem}
.pq-why{font-size:.9rem}
.pq-mixed{margin:0;padding-left:20px}
.pq-scrim{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:60;display:grid;place-items:center;grid-template-rows:1fr auto;gap:8px;padding:12px}
.pq-scrim img{max-width:100%;max-height:85vh;object-fit:contain}
.pq-scrim .btn-s{min-height:44px}
/* 2026-11-05, job plants-two-views: the big photo, the other views small
   under it, each tapped to swap. Sized here and not by .pq-photo, so the
   computer's 78vh for the big one does not reach the small ones. */
.pq-views{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pq-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pq-views .pq-thumbs .pq-photo{min-height:70px;max-height:96px;border-radius:10px}
.pq-views .pq-thumbs .pq-photo img{max-height:96px;cursor:pointer}
.pq-thumbs .pq-part{font-size:.7rem;padding:2px 7px;left:4px;top:4px}
.pq-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.pq-strip .pq-pair .pq-photo{min-height:80px;max-height:130px}
.pq-strip .pq-pair .pq-photo img{max-height:130px}
/* 2026-11-03: the reveal as one screen on the phone, side by side on the computer. */
.pq-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.pq-strip>*{flex:0 0 min(72vw,240px);scroll-snap-align:start}
.pq-strip .pq-photo{min-height:120px;max-height:220px}
.pq-strip .pq-photo img{max-height:220px}
.pq-how{border-top:1px solid rgba(255,255,255,.1);padding-top:6px}
.pq-how summary{cursor:pointer;font-weight:600;font-size:.95rem;min-height:36px;display:flex;align-items:center}
.pq-pick-cell{display:grid;gap:4px;align-content:start;border-radius:12px;padding:3px;border:2px solid transparent}
.pq-pick-cell .pq-photo{cursor:pointer}
.pq-pick-cell.pq-it{border-color:#7bc47f}.pq-pick-cell.pq-not{border-color:#e07a6a}
.pq-key{display:grid;gap:10px}
.pq-key-group h3{margin:0 0 4px;font-size:.9rem;color:var(--dim,#9a9a9a)}
.pq-chips{display:flex;flex-wrap:wrap;gap:6px}
.pq-chip{min-height:40px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:inherit}
.pq-chip.go{background:var(--gold,#d4a94a);color:#1a1a1a;border-color:var(--gold,#d4a94a)}
.pq-key-list{display:grid;gap:6px}
.pq-key-row{display:flex;gap:10px;align-items:center;min-height:56px;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:4px 10px 4px 4px;color:inherit}
.pq-key-row img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.pq-key-name{display:grid}
@media (min-width:881px){
  .pq-app{max-width:1100px}
  .pq-two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
  .pq-views>.pq-photo{max-height:52vh}
  .pq-views>.pq-photo img{max-height:52vh}
  .pq-views .pq-thumbs .pq-photo{max-height:150px}
  .pq-views .pq-thumbs .pq-photo img{max-height:150px}
  .pq-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
/* 2026-11-05, job hobbies-build: the start screen. One photo, one gold
   button, the rest quiet, so it fits 390x844 without a scroll. */
.pq-start{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;justify-items:stretch}
.pq-start>.pq-photo,.pq-start>.pq-photo img{max-height:38vh}
.pq-start>.pq-photo{min-height:200px}
.pq-gobtn.btn-s.go{min-height:56px;font-size:1.1rem;font-weight:600;border-radius:999px;margin-top:4px;background:var(--gold,#d4a94a);border-color:var(--gold,#d4a94a);color:#1a1a1a}
.pq-sub{margin:0;text-align:center;color:var(--dim,#9a9a9a);font-size:.92rem;line-height:1.4}
.pq-start>#pqWays{min-height:44px;justify-self:center;min-width:160px}
.pq-prog{margin-top:2px}
.pq-prog summary{min-height:44px}
.pq-bar{display:flex;align-items:center;gap:10px}
.pq-bar .btn-s{min-height:44px}