/* DRAWN PHONE SCREENS FOR THE SET-UP STEPS (lib/functions-mockups.php - p.php). WHAT TO TAP IS RINGED IN RED (.mk-hit). */
.mk-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 16px 0 4px; scrollbar-width: none; } .mk-strip::-webkit-scrollbar { display: none; } /* (SLIDES WITH A FINGER - NO SCROLL BAR) */
.mk { flex: 0 0 150px; margin: 0; scroll-snap-align: start; }
.mk-phone { position: relative; height: 270px; border-radius: 22px; border: 6px solid #1d1f27; background: #fff; overflow: hidden; font: 11px/1.3 -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #202124; }
.mk-notch { width: 46px; height: 10px; border-radius: 0 0 8px 8px; background: #1d1f27; margin: 0 auto 6px; }
.mk figcaption { font-size: 13px; line-height: 1.35; margin-top: 8px; color: #333; }
.mk figcaption > b:first-child { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #13213a; color: #fff; font-size: 11px; margin-right: 3px; }
.mk-head { display: flex; align-items: center; gap: 6px; padding: 6px 9px 8px; font-size: 12px; }
.mk-head.mk-big b { font-size: 17px; }
.mk-back { font-size: 20px; line-height: 1; color: #1a73e8; }
.mk-search { margin: 0 8px 6px; padding: 6px 8px; border-radius: 16px; background: #eef1f8; color: #5f6368; }
.mk-search > span:nth-child(2) { flex: 1; }
.mk-burger { font-size: 13px; padding: 0 3px; border-radius: 4px; }
.mk-av { width: 16px; height: 16px; border-radius: 50%; background: #c58af9; flex: none; }
.mk-ol .mk-av { width: 20px; height: 20px; background: #0f6cbd; }
.mk-rows { padding: 0 8px; }
.mk-drawer { margin-right: 26px; border-right: 1px solid #e3e3e8; height: 220px; display: flex; flex-direction: column; }
.mk-drawer .mk-row { border-bottom: 0; }
.mk-drawer .mk-gear {  width: 30px; justify-content: center; font-size: 15px; }
.mk-row { display: flex; align-items: center; gap: 6px; padding: 8px 6px; border-bottom: 1px solid #ececf0; border-radius: 6px; }
.mk-row > span:first-child { flex: 1; min-width: 0; }
.mk-row small { display: block; color: #80868b; font-size: 9px; margin-top: 1px; }
.mk-row em { font-style: normal; color: #80868b; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; }
.mk-chev { color: #b0b3ba; }
.mk-tog { width: 26px; height: 15px; border-radius: 8px; background: #c7c7cc; position: relative; flex: none; }
.mk-tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.mk-tog.on { background: #34c759; }
.mk-tog.on::after { left: 13px; }
.mk-note { color: #5f6368; font-size: 10px; padding: 6px; }
.mk-mail { display: flex; gap: 6px; padding: 8px 4px; border-bottom: 1px solid #f0f0f3; }
.mk-dot { width: 18px; height: 18px; border-radius: 50%; background: #e3e6ee; flex: none; }
.mk-lines { flex: 1; } .mk-lines i { display: block; height: 5px; border-radius: 3px; background: #e3e6ee; margin: 3px 0 4px; } .mk-lines i + i { width: 70%; }
.mk-box { position: relative; margin: 6px 4px; min-height: 70px; padding: 8px; border: 1px solid #d5d7de; border-radius: 6px; color: #80868b; }
.mk-paste { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); background: #1d1f27; color: #fff; font-size: 10px; padding: 4px 9px; border-radius: 7px; }
.mk-hit { box-shadow: 0 0 0 2px #ff2d60; background: #fff1f4; }
.mk-search .mk-hit { background: #fff1f4; }
/* COMPUTER WINDOWS (.mk-desk) */
.mk.mk-desk { flex: 0 0 240px; }
@media (max-width: 640px) { .mk.mk-desk { flex-basis: 76%; } } /* PHONES: ABOUT 1.3 WINDOWS SHOW - THE NEXT ONE PEEKS IN, SO IT'S CLEAR THERE ARE MORE */
.mk-win { height: 170px; border-radius: 9px; border: 1px solid #c9ccd6; background: #fff; overflow: hidden; display: flex; flex-direction: column; font: 10.5px/1.3 -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #202124; box-shadow: 0 4px 14px rgba(19,33,58,.08); }
.mk-titlebar { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: #eef0f5; border-bottom: 1px solid #dfe2ea; color: #5f6368; font-size: 10px; flex: none; }
.mk-titlebar i { width: 7px; height: 7px; border-radius: 50%; background: #d0d3db; }
.mk-titlebar span { margin-left: 6px; font-weight: 600; }
.mk-tabs { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-bottom: 1px solid #ececf0; flex: none; }
.mk-tabs span { padding: 2px 6px; border-radius: 4px; color: #3c4043; white-space: nowrap; }
.mk-gearbtn { margin-left: auto; font-size: 12px; }
.mk-winbody { position: relative; display: flex; flex: 1; min-height: 0; }
.mk-side { flex: 0 0 86px; padding: 6px 4px; background: #f6f7fa; border-right: 1px solid #ececf0; display: flex; flex-direction: column; gap: 2px; }
.mk-side span { padding: 3px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-main { flex: 1; min-width: 0; padding: 4px 8px; overflow: hidden; }
.mk-wtitle { display: block; font-size: 11.5px; margin: 2px 0 4px; }
.mk-drop { position: absolute; top: 0; left: 6px; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 110px; background: #fff; border: 1px solid #d5d7de; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.mk-drop span { padding: 3px 6px; border-radius: 4px; }
.mk-win .mk-row { padding: 5px 4px; }
.mk-win .mk-mail { padding: 5px 2px; }
.mk-win .mk-box { min-height: 44px; margin: 8px 2px 4px; }
.mk-btnrow { padding: 4px 2px; }
.mk-btn { display: inline-block; padding: 3px 9px; border: 1px solid #c9ccd6; border-radius: 5px; background: #f6f7fa; font-weight: 600; }
.mk-select { padding: 1px 6px; border: 1px solid #c9ccd6; border-radius: 4px; color: #3c4043; font-size: 9.5px; white-space: nowrap; }
.mk-checkrow { gap: 6px; }
.mk-check { width: 11px; height: 11px; border: 1px solid #9aa0a6; border-radius: 3px; flex: none; }
.mk-check.on { background: #1a73e8; border-color: #1a73e8; }
.mk-tools { display: flex; gap: 4px; align-items: center; margin: -4px -4px 6px; padding: 3px 4px; border-bottom: 1px solid #ececf0; }
.mk-tools i { width: 10px; height: 8px; border-radius: 2px; background: #e3e6ee; }
.mk-tools b { margin-left: auto; font-size: 9px; padding: 1px 4px; border-radius: 3px; color: #3c4043; }
.mk-row.mk-checkrow > span.mk-check { flex: 0 0 11px; } .mk-checkrow > span + span { flex: 1; min-width: 0; } /* (THE BOX KEEPS ITS SIZE; THE WORDS TAKE THE REST) */
.mk-drawer .mk-gear:last-child { margin-top: auto; } /* (OUTLOOK: AT THE BOTTOM; SAMSUNG: AT THE TOP) */
.mk-strip { cursor: grab; } .mk-strip.mk-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; } /* (DRAGGED WITH THE MOUSE - lib/functions-mockups.php ucMockDrag) */