/* Look Mom! (lookmom.js). Win98 chrome comes from app.css; this is the inside of the window. */
.lmw{height:640px;max-height:calc(100% - 50px)}
.lm-main{flex:1;min-height:0;overflow-y:auto;padding:0}
.lm-wait,.lm-empty{padding:18px 12px;line-height:1.5}
.lm-empty .btn{margin-top:8px}

/* One entry per person: the picture, then the text version of it */
.lm-item{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;padding:14px;border-bottom:1px solid #c8c8c8}
.lm-item:last-child{border-bottom:0}
.lm-pic{display:block;padding:0;background:#111;cursor:zoom-in;line-height:0;align-self:start;max-height:400px;overflow:hidden}
.lm-pic img{width:100%;height:auto;display:block}
.lm-text{font-size:15px;line-height:1.45;min-width:0}
.lm-text p{margin:0 0 6px}
.lm-who{display:flex;gap:9px;align-items:center;margin-bottom:6px}
.lm-who img{width:36px;height:36px;border:1px solid var(--shadow);object-fit:cover}
.lm-who b{display:block;font-size:16px}
.lm-who small{font-size:13px}
.lm-lbl{font-size:13px;font-weight:700;color:#333;margin:10px 0 2px;text-transform:uppercase;letter-spacing:.03em}
.lm-said{font-style:italic}
.lm-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.lm-acts a.btn{display:inline-flex;align-items:center;text-decoration:none;color:#000}

/* Full-size viewer */
.lmv{height:620px;max-height:calc(100% - 40px)}
.lmv-pic{flex:1;min-height:0;overflow:auto;background:#111;padding:0;line-height:0}
.lmv-pic img{width:100%;height:auto;display:block;cursor:zoom-in}
.lmv-pic img.lmv-actual{width:auto;max-width:none;cursor:zoom-out}

@media (max-width:760px){
  .lmw{height:auto;max-height:none}
  .lm-main{overflow:visible}
  .lm-item{grid-template-columns:1fr;gap:10px;padding:12px 10px}
  .lm-pic{max-height:none}
  .lmw .status > div + div{display:none}
  .lmv{height:auto;max-height:none}
  .lmv-pic{max-height:75vh}
}