/* Pods and Pals (groups.js). Win98 chrome comes from app.css; this is the inside of the window. */
.grw{height:600px;max-height:calc(100% - 50px)}
.gr-main{flex:1;min-height:0;overflow-y:auto;padding:0}
.gr-wait,.gr-empty{padding:18px 12px;line-height:1.5}
.gr-intro{margin:0;padding:12px 14px;font-size:15px;line-height:1.45;border-bottom:1px solid #c8c8c8;background:#ffffe1}
.gr-alert{margin:10px 14px 0;padding:8px 10px;border:1px solid #b00;background:#fff4f4;font-size:14.5px;line-height:1.4}
.gr-top{padding:10px 14px 0}

.gr-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:12px 14px;border-bottom:1px solid #c8c8c8}
.gr-item:last-child{border-bottom:0}
.gr-item.in{background:#f2f8f2}
.gr-item.hid{background:#f4f4f4}
.gr-ck{width:18px;height:18px;margin:2px 0 0;cursor:pointer}
.gr-tick{font-size:18px;line-height:22px;color:#1d6b2a;font-weight:700;text-align:center}
.gr-text{min-width:0;font-size:15px;line-height:1.45}
.gr-text p{margin:2px 0 4px}
.gr-name{cursor:pointer;display:block}
.gr-name b{font-size:16px}
.gr-meta{font-size:13.5px}
.gr-mine{color:#1d4d24}
.gr-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.gr-staff{margin-top:6px;padding-top:6px;border-top:1px dotted #aaa}
.gr-ppl{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.6}
.gr-ppl .btn{vertical-align:middle;margin-left:4px}

.gr-ed{grid-template-columns:minmax(0,1fr);background:#f6f6f6}
.gr-ed .hint{display:block;margin:8px 0 2px}
.gr-ed .hint:first-child{margin-top:0}
.gr-hid{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:14.5px}
.gr-err{margin:6px 0 0;min-height:1em;color:#900}

.gr-foot{display:flex;gap:10px;align-items:center;padding:8px 4px 4px}
.gr-foot .btn{min-width:110px}

@media (max-width:760px){
  .grw{height:auto;max-height:none}
  .gr-main{max-height:none}
}

/* The big introduction: the arrival pop-up, and anyone not in a pod yet */
.gr-hero{display:flex;gap:16px;align-items:center;padding:18px 18px 16px;color:#fff;background:linear-gradient(90deg,#000080,#1084d0)}
.gr-hero-ico{width:84px;height:84px;flex:none;background:#fff;border:2px solid #000;padding:6px;box-shadow:3px 3px 0 #000}
.gr-hero-txt{min-width:0}
.gr-hero h2{margin:2px 0 4px;font-size:28px;line-height:1.1;font-weight:700;letter-spacing:.01em}
.gr-hero p{margin:0;font-size:16px;line-height:1.4}
.gr-new{display:inline-block;background:#ffef00;color:#c00000;font-weight:700;font-size:13px;padding:2px 8px;border:2px solid #000;transform:rotate(-3deg);margin-bottom:4px}
.gr-how{padding:12px 18px 10px;border-bottom:1px solid #c8c8c8;background:#ffffe1;font-size:15px;line-height:1.45}
.gr-how p{margin:0 0 8px}
.gr-how .hint{margin:8px 0 0}
.gr-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.gr-steps li{display:flex;gap:7px;align-items:center;padding:4px 10px 4px 4px;background:#fff;border:1px solid #808080;font-weight:700}
.gr-steps b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#000080;color:#fff;border-radius:50%;font-size:13px}
@media (max-width:760px){
  .gr-hero{padding:14px 12px;gap:12px}
  .gr-hero-ico{width:56px;height:56px}
  .gr-hero h2{font-size:22px}
  .gr-hero p{font-size:15px}
  .gr-how{padding:10px 12px}
}