/* Picture helper - the pop-up over any page (script.js phOpenModal) and the /picture-helper page */
.ph_modal { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 16px; box-sizing: border-box; }
.ph_modal[hidden] { display: none; }
.ph_modal_box { background: #fff; border-radius: 12px; width: 100%; max-width: 1140px; max-height: 94vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.ph_modal_head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 20px; background: #2e6a96; color: #fff; }
.ph_modal_title { font-weight: 700; font-size: 1.1em; }
.ph_modal_x { font: inherit; font-size: 28px; line-height: 1; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.ph_modal_x:hover, .ph_modal_x:focus-visible { background: rgba(255,255,255,.18); }
.ph_modal_body { padding: 16px 8px 4px; }
.ph_modal_body .ph { padding-bottom: 16px; }
.ph_loading { text-align: center; padding: 50px 10px; color: #666; font-size: 1.05em; }
html.ph_modal_open, html.ph_modal_open body { overflow: hidden; }   /* the page behind stays still */
@media (max-width: 767px) {
	.ph_modal { padding: 0; }
	.ph_modal_box { max-width: none; max-height: none; height: 100%; border-radius: 0; }
}

.ph { max-width: 1100px; margin: 0 auto; padding: 0 12px 30px; }
.ph_signin { max-width: 640px; margin: 10px auto; font-size: 1.05em; line-height: 1.55; text-align: center; }
.ph_how { font-size: 1.05em; margin: 4px 0 12px; }
.ph_prog { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ph_track { flex: 0 1 380px; min-width: 160px; height: 14px; background: #e3e8ec; border-radius: 7px; overflow: hidden; }
.ph_fill { height: 100%; background: #53b4db; transition: width .3s; }
.ph_status { margin: 4px 0 12px; color: #444; min-height: 1.2em; }
.ph_note { margin: -6px 0 12px; font-size: .88em; color: #666; }
.ph_msg { margin: 0 0 12px; padding: 9px 14px; border-radius: 8px; background: #fff4e5; color: #6b3d00; }
.ph_msg.good { background: #e8f5e9; color: #1b5e20; }
.ph_cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }   /* four larger pictures (Robert, 2026-10-19) */
.ph_cards .ph_word { font-size: 1.2em; }
.ph_cards .ph_def { font-size: .95em; }
.ph_card { cursor: pointer; position: relative; border: 4px solid transparent; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); user-select: none; -webkit-tap-highlight-color: transparent; }
.ph_pic { aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; }
.ph_pic img { max-width: 100%; max-height: 100%; display: block; -webkit-touch-callout: none; }
.ph_info { padding: 6px 9px; background: #f5f5f5; border-top: 1px solid #ddd; }
.ph_word { font-weight: bold; font-size: 1.05em; }
.ph_def { font-size: .85em; color: #555; line-height: 1.3; }
.ph_card.ph_no { border-color: #e53935; }
.ph_card.ph_no::after { content: "DOESN'T FIT"; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: rgba(229,57,53,.42); color: #fff; font-weight: 800; font-size: 1.15em; text-shadow: 0 0 8px rgba(0,0,0,.5); }
.ph_card.ph_broken { cursor: default; opacity: .5; }
.ph_card.ph_broken .ph_pic { background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #fff 10px, #fff 20px); }
.ph_bar { text-align: center; margin-top: 16px; }
.ph_btn { display: inline-block; font: inherit; font-size: 1.05em; font-weight: 700; padding: 9px 24px; border-radius: 8px; border: 2px solid #2e7d32; background: #2e7d32; color: #fff; cursor: pointer; text-decoration: none; }
.ph_go { background: #2e6a96; border-color: #2e6a96; }
.ph_done { text-align: center; padding: 30px 10px; color: #555; font-size: 1.1em; }
/* "What to look for" - step 1: welcome with three fanned example pictures and a magnifying glass gliding over them */
.ph_intro h2 { margin: 4px 0 6px; font-size: 1.35em; }
.ph_intro p { margin: 0 0 14px; font-size: 1.05em; }
.ph_step1 { text-align: center; padding: 6px 0 4px; }
.ph_anim { position: relative; width: 300px; height: 170px; margin: 6px auto 14px; }
.ph_fan { position: absolute; top: 18px; left: 50%; width: 120px; height: 120px; object-fit: contain; background: #fff; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: ph_bob 3s ease-in-out infinite; }
.ph_fan1 { --r: -12deg; --x: -150px; animation-delay: -1s; }
.ph_fan2 { --r: 0deg; --x: -60px; z-index: 1; top: 8px; }
.ph_fan3 { --r: 12deg; --x: 30px; animation-delay: -2s; }
.ph_glass { position: absolute; width: 74px; height: 74px; top: 40px; left: 0; z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); animation: ph_sweep 4s ease-in-out infinite; }
@keyframes ph_bob { 0%, 100% { transform: translateX(var(--x)) rotate(var(--r)) translateY(0); } 50% { transform: translateX(var(--x)) rotate(var(--r)) translateY(-6px); } }
@keyframes ph_sweep { 0% { transform: translate(20px, 30px) rotate(-8deg); } 30% { transform: translate(110px, -6px) rotate(4deg); } 55% { transform: translate(200px, 34px) rotate(10deg); } 80% { transform: translate(120px, 50px) rotate(0); } 100% { transform: translate(20px, 30px) rotate(-8deg); } }
/* step 2: the five rejected pictures slide in one after another */
.ph_ex { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ph_excard { border: 4px solid #e53935; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.ph_in .ph_excard { animation: ph_rise .45s ease-out both; animation-delay: calc(var(--i) * .18s); }
@keyframes ph_rise { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.ph_excard img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; display: block; }
.ph_why { padding: 8px 10px; font-size: .9em; line-height: 1.35; background: #fdecea; color: #6d1b1b; flex: 1; }
.ph_tip { margin: 14px 0 0 !important; padding: 9px 14px; border-radius: 8px; background: #e8f5e9; color: #1b4d1e; }
.ph_howlink { font-size: .9em; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .ph_fan, .ph_glass, .ph_in .ph_excard { animation: none; } .ph_fan { transform: translateX(var(--x)) rotate(var(--r)); } .ph_glass { transform: translate(110px, 10px); } }
@media (max-width: 1000px) { .ph_ex { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.ph_ex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ph_why { font-size: .85em; }
	.ph_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ph_card.ph_no::after { font-size: 1em; }
}