/* The picture library (js/pictures.js): the picker, and lesson words shown with their picture. */

/* ---------- picker: big tiles for fingers on an iPad and for the class TV ---------- */
.pk-ov{position:fixed;inset:0;z-index:2000;background:rgba(8,12,18,.6);display:grid;place-items:center;padding:16px;font-family:var(--f-body,system-ui);color-scheme:light}
.pk-box{background:#fff;color:#17202B;border-radius:20px;width:min(880px,100%);height:min(720px,calc(var(--vvh,100dvh) - 32px));display:flex;flex-direction:column;gap:10px;padding:16px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);box-sizing:border-box}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pk-head h2{margin:0;font-size:1.25rem;line-height:1.3;overflow-wrap:anywhere}
.pk-x{flex:none;width:48px;height:48px;border:0;border-radius:12px;background:#EEF0F3;color:#17202B;font-size:1.2rem;cursor:pointer}
.pk-q{font:inherit;font-size:1.15rem;min-height:52px;padding:0 16px;border:2px solid #D9DED7;border-radius:14px;background:#fff;color:#17202B;width:100%;box-sizing:border-box}
.pk-q:focus{outline:none;border-color:#16955C}
.pk-grid{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;align-content:start;padding:2px}
.pk-tile{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:132px;padding:10px 6px 8px;border:2px solid transparent;border-radius:16px;background:#F4F6F3;color:#17202B;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;touch-action:manipulation}
.pk-tile img{width:84px;height:84px;object-fit:contain;pointer-events:none}
.pk-tile span{line-height:1.2;text-align:center;overflow-wrap:anywhere}
.pk-tile:hover,.pk-tile:focus-visible{border-color:#16955C;background:#DDF3E7;outline:none}
.pk-tile[aria-pressed="true"]{border-color:#16955C;background:#DDF3E7}
.pk-none{grid-column:1/-1;margin:24px 8px;color:#5A6572;font-size:1.05rem;text-align:center}
.pk-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pk-btn{font:inherit;font-weight:700;min-height:48px;padding:0 18px;border:2px solid #16955C;border-radius:14px;background:#fff;color:#16955C;cursor:pointer}
.pk-btn[aria-pressed="true"]{background:#DDF3E7}
.pk-btn.ghost{border-color:#D9DED7;color:#17202B}
.pk-credit{margin-left:auto;font-size:.78rem;color:#5A6572}
@media (max-width:560px){ .pk-ov{padding:0} .pk-box{width:100%;height:100%;border-radius:0;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))} .pk-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))} .pk-credit{margin-left:0} }
/* the class TV: bigger again */
@media (min-width:1600px){ .pk-box{width:min(1200px,100%);height:min(900px,calc(100vh - 48px))} .pk-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .pk-tile img{width:120px;height:120px} .pk-tile{font-size:1.1rem} }

/* ---------- Syllabus: each word with its picture; a tap changes it ---------- */
.pwords{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0}
.pword{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:76px;min-height:76px;padding:6px 8px;border:1px solid var(--line,#D9DED7);border-radius:14px;background:var(--surface,#fff);color:var(--ink,#17202B);font:inherit;font-weight:600;font-size:.9rem;line-height:1.2}
.pword img{width:48px;height:48px;object-fit:contain}
.pword.no-pic{min-height:76px;justify-content:center;border-style:dashed}
button.pword{cursor:pointer;touch-action:manipulation}
button.pword:hover,button.pword:focus-visible{border-color:var(--brand,#16955C);outline:none;box-shadow:0 0 0 2px var(--brand-soft,#DDF3E7)}
.pwords-h{font-size:.8rem;color:var(--muted,#5A6572);margin:8px 0 4px}

/* ---------- Games: a library picture where a question shows a picture ---------- */
.q-pic .fl.lib{object-fit:contain}