/* ==========================================================================
   COHORT 4 WORLD: additions on top of win98.css.
   win98.css is the cohort4 landing page stylesheet, unchanged. Everything in
   this file is new: the sign-on screen, the screen name wizard, the buddy
   list, and the tray name.
   ========================================================================== */

/* ---------------- sign on ---------------- */
#signon{
  position:fixed; inset:0; z-index:900;
  background:var(--desktop);
  display:none; align-items:center; justify-content:center; padding:20px;
}
body.state-signedout #signon{ display:flex; }
.so{ width:100%; max-width:392px; }
.so .body{ background:var(--face); border:none; box-shadow:none; padding:0; }
.so-art{
  background:linear-gradient(180deg,#FFE9A8,#FFC94D);
  border-bottom:2px solid var(--shadow);
  padding:16px 18px 14px; display:flex; gap:13px; align-items:center;
}
.so-art svg{ width:52px; height:52px; flex:0 0 auto; }
.so-art b{ font-size:17px; display:block; line-height:1.15; }
.so-art i{ font-style:normal; font-size:11.5px; color:#5a4a10; display:block; margin-top:4px; }
.so-form{ padding:16px 18px 6px; }
.so-form label{ display:block; font-size:12px; margin:0 0 4px; }
.so-form .fake{
  background:#fff; padding:5px 7px; font-family:var(--mono); font-size:12.5px; color:#888;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
  margin:0 0 12px;
}
.so-nav{ padding:4px 18px 18px; display:flex; gap:8px; }
.so-nav .btn{ padding:7px 16px; font-size:13px; }
.so-msg{ padding:0 18px 14px; font-size:12px; color:#9a1a1a; }
.so-msg:empty{ display:none; }
.so-foot{ padding:0 18px 16px; font-size:11.5px; color:#555; line-height:1.5; }

/* ---------------- screen name wizard ---------------- */
#naming{
  position:fixed; inset:0; z-index:890;
  background:var(--desktop);
  display:none; align-items:center; justify-content:center; padding:20px;
}
body.state-naming #naming{ display:flex; }
.nm{ width:100%; max-width:520px; }
.nm .body{ padding:0; background:var(--face); border:none; box-shadow:none; display:flex; flex-direction:column; }
.nm-top{ display:flex; }
.nm-side{
  width:132px; flex:0 0 auto; color:#fff; padding:16px 13px;
  background:linear-gradient(180deg,#000080,#1084D0);
}
.nm-side b{ font-size:15px; display:block; line-height:1.2; }
.nm-side i{ font-style:normal; font-size:11px; color:#CFE3FF; display:block; margin-top:7px; line-height:1.45; }
.nm-main{ flex:1; padding:16px 18px; min-width:0; }
.nm-main h3{ font-size:14px; margin:0 0 7px; }
.nm-main p{ font-size:12.5px; line-height:1.5; margin:0 0 12px; }
.nm-in{
  width:100%; font:700 15px/1.3 var(--mono); padding:7px 8px; background:#fff; color:#000;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
  outline:none;
}
.nm-in:focus{ outline:1px dotted #000; outline-offset:-5px; }
.nm-hint{ font-size:11.5px; margin:6px 0 0; min-height:17px; font-family:var(--mono); }
.nm-hint.ok{ color:#0a6a0a; }
.nm-hint.bad{ color:#9a1a1a; }
.nm-hint.wait{ color:#555; }
.nm-rules{ font-size:11.5px; color:#444; line-height:1.6; margin:13px 0 0; }
.nm-foot{
  border-top:1px solid var(--hilite); box-shadow:0 -1px 0 var(--shadow) inset;
  padding:11px 15px; display:flex; gap:7px; justify-content:flex-end; background:var(--face);
}
.nm-sugg{ display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 0; }
.nm-sugg button{
  font:400 11.5px/1 var(--mono); padding:5px 8px; cursor:pointer; background:var(--face); color:#000;
  border-top:2px solid var(--hilite); border-left:2px solid var(--hilite);
  border-right:2px solid var(--dark); border-bottom:2px solid var(--dark);
}
.nm-sugg button:active{
  border-top:2px solid var(--dark); border-left:2px solid var(--dark);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
}

/* ---------------- buddy list ---------------- */
#w-buddy .body{ padding:0; background:var(--face); border:none; box-shadow:none; display:flex; flex-direction:column; }
.bl-me{
  padding:9px 11px; border-bottom:2px solid var(--shadow);
  background:linear-gradient(180deg,#FFE9A8,#FFC94D); display:flex; gap:10px; align-items:center;
}
.bl-me svg{ width:30px; height:30px; flex:0 0 auto; }
.bl-me b{ font:700 14px/1.2 var(--mono); display:block; }
.bl-me i{ font-style:normal; font-size:11px; color:#5a4a10; display:block; margin-top:3px; }
.bl-list{ flex:1 1 auto; overflow:auto; background:#fff; padding:6px 0; }
.bl-grp{ font-weight:700; font-size:12px; padding:4px 9px; }
.bl-grp span{ font-weight:400; color:#666; }
.bl-row{ display:flex; gap:7px; align-items:center; padding:3px 9px 3px 22px; font-size:12.5px; cursor:default; }
.bl-row:hover{ background:#EFEFEF; }
.bl-row .dot{ width:8px; height:8px; flex:0 0 auto; background:#1CA81C; border:1px solid #0a5a0a; }
.bl-row.away .dot{ background:#E8B400; border-color:#8a6a00; }
.bl-row.away span{ color:#777; }
.bl-row .aw{ font-family:var(--mono); font-size:10.5px; color:#999; margin-left:auto; }
.bl-empty{ padding:16px 12px; font-size:12px; color:#666; line-height:1.55; }
.bl-foot .btn{ padding:4px 8px; font-size:12px; white-space:nowrap; }
.bl-foot{ padding:7px 6px; display:flex; gap:5px; justify-content:space-between; border-top:1px solid var(--hilite); background:var(--face); }

/* ---------------- tray name ---------------- */
#tray-name{
  font-family:var(--mono); font-size:11px; padding:0 8px 0 4px;
  border-right:1px solid var(--shadow); margin-right:6px;
}

/* ---------------- placeholder windows ---------------- */
.soon{ padding:14px 16px; font-size:12.5px; line-height:1.55; }
.soon b{ display:block; margin-bottom:7px; font-size:13px; }
.soon ul{ margin:9px 0 0; padding-left:19px; }
.soon li{ margin-bottom:5px; }

@media (max-width:820px){
  .so, .nm{ max-width:100%; }
  .nm-top{ flex-direction:column; }
  .nm-side{ width:auto; }
}

/* ---------------- which layer is showing ---------------- */
#desktop, #taskbar, #startmenu{ display:none; }
body.state-in #desktop{ display:block; }
body.state-in #taskbar{ display:flex; }
body.state-in #startmenu{ display:none; }
body.state-in #startmenu.open{ display:block; }
body.state-loading::after{
  content:'Connecting...'; position:fixed; inset:0; z-index:999;
  background:var(--desktop); color:#CDE9E9; font-family:var(--mono); font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:820px){
  body.state-in #desktop{ display:block; }
}

/* ---------------- AIM: an instant message window ---------------- */
.im .body{ padding:0; background:var(--face); border:none; box-shadow:none; display:flex; flex-direction:column; }
.im-log{
  flex:1 1 auto; overflow:auto; background:#fff; padding:8px 10px; font-size:13px; line-height:1.45;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
  margin:6px 6px 0;
}
.im-line{ margin:0 0 6px; word-wrap:break-word; }
.im-line b{ color:#C41B1B; font-weight:700; }
.im-line.me b{ color:#1B3FC4; }
.im-line .t{ font-family:var(--mono); font-size:10px; color:#999; margin-left:5px; }
.im-empty{ color:#777; font-size:12.5px; padding:4px 0; }
.im-compose{ flex:0 0 auto; display:flex; gap:6px; padding:6px; align-items:flex-end; }
.im-in{
  flex:1 1 auto; min-height:52px; max-height:120px; resize:none;
  font:13px/1.45 var(--ui); padding:5px 7px; background:#fff; color:#000;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
  outline:none;
}
.im-send{ flex:0 0 auto; align-self:stretch; padding:0 14px; }
.im .statusbar span:first-child{ font-family:var(--mono); font-size:10.5px; }
.bl-row{ cursor:pointer; }
.bl-row .unread{
  margin-left:auto; background:#C41B1B; color:#fff; font:700 10px/1 var(--mono);
  padding:3px 5px; border:1px solid #000;
}
.bl-hint{ padding:5px 9px 0; font-size:11px; color:#888; }

/* ---------------- this week's material, opened from the desktop ---------------- */
.wk-note{ padding:0; background:#fff; }
.wk-note pre{
  margin:0; padding:11px 13px; font:12.5px/1.5 var(--mono); white-space:pre-wrap;
  word-wrap:break-word; color:#000;
}
.wk-vid{ padding:0; background:var(--face); display:flex; flex-direction:column; }
.wk-screen{
  background:#000; aspect-ratio:4/3; position:relative; margin:8px 8px 0;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
}
.wk-screen span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#4a9c9c; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-align:center; padding:0 12px;
}
.wk-bar{ display:flex; align-items:center; gap:6px; padding:8px; }
.wk-track{
  flex:1; height:14px; background:#fff; position:relative;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
}
.wk-time{ font-family:var(--mono); font-size:11px; }
.wk-chap{ flex:1 1 auto; overflow:auto; border-top:1px solid var(--shadow); background:#fff; }
.wk-chap div{ display:flex; justify-content:space-between; gap:10px; padding:5px 9px; font-size:12px; border-bottom:1px solid #EAEAEA; }
.wk-chap span{ font-family:var(--mono); font-size:11px; color:#777; flex:0 0 auto; }
.wk-check{ padding:14px 16px; background:var(--face); overflow:auto; }
.wk-check .blurb{ font-size:12px; color:#555; margin:0 0 12px; }
.wk-li{ display:flex; gap:9px; align-items:flex-start; margin:0 0 10px; font-size:12.5px; line-height:1.45; cursor:pointer; }
.wk-li .bx{
  flex:0 0 auto; width:13px; height:13px; background:#fff; margin-top:2px; position:relative;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
}
.wk-li.on .bx::after{
  content:''; position:absolute; left:2px; top:-1px; width:5px; height:9px;
  border:solid #000; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.wk-li.on span:last-child{ color:#777; text-decoration:line-through; }
.wk-prog{
  height:16px; background:#fff; padding:2px; display:flex; gap:2px; margin:14px 0 6px;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
}
.wk-prog i{ flex:0 0 9px; background:var(--navy); }
.wk-prog i.off{ background:transparent; }
/* the six weeks, behind the Classroom icon */
.weeks{ padding:0; background:#fff; }
.weeks .wrow{ display:flex; gap:9px; align-items:center; padding:7px 10px; border-bottom:1px solid #EAEAEA; font-size:12.5px; }
.weeks .wrow svg{ width:19px; height:19px; flex:0 0 auto; }
.weeks .wrow:not(.live) svg{ opacity:.35; }
.weeks .wrow:not(.live) b{ color:#888; }
.weeks .wrow b{ font-weight:400; }
.weeks .wrow .soonlbl{ margin-left:auto; font-family:var(--mono); font-size:11px; color:#999; }
.weeks .wrow.live{ cursor:pointer; }
.weeks .wrow.live:hover{ background:#EFEFEF; }
.weeks .wrow.live b{ font-weight:700; }

/* ---------------- My Documents and Network Neighborhood ---------------- */
#w-docs .body, #w-net .body{ padding:0; background:#fff; display:flex; flex-direction:column; }
.fm-bar{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:4px; padding:5px 6px;
  background:var(--face); border-bottom:1px solid var(--shadow);
}
.fm-bar .btn{ padding:4px 9px; font-size:12px; }
.fm-shared{
  margin-left:7px; font:400 10px/1 var(--mono); color:#0a6a0a;
  background:#E4F4E4; border:1px solid #9CCB9C; padding:2px 4px; flex:0 0 auto;
}
.exp-row.sel .fm-shared{ color:#CFE3FF; background:transparent; border-color:#7FA8E0; }
#w-docs .exp-list, #w-net .exp-list{ overflow:auto; }

/* ---------------- Notepad ---------------- */
.np-body{ padding:0; background:var(--face); display:flex; flex-direction:column; border:none; box-shadow:none; }
.np-text{
  flex:1 1 auto; margin:6px 6px 0; padding:7px 8px; resize:none; outline:none;
  font:12.5px/1.5 var(--mono); background:#fff; color:#000; white-space:pre; overflow:auto;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
}
.np-text[readonly]{ background:#F4F4F4; color:#333; }
.np-bar{ flex:0 0 auto; display:flex; gap:6px; padding:6px; }
.np-bar .btn{ padding:5px 14px; }

/* ---------------- dialogs raised by the file manager ---------------- */
.modal.on{ display:flex; }
.modal .dlg-row label{ min-width:74px; font-size:12.5px; }

/* ---------------- Calendar ---------------- */
.cal-body{ padding:0; background:var(--face); display:flex; flex-direction:column; border:none; box-shadow:none; }
.cal-now{ flex:0 0 auto; background:#FFFFCC; border-bottom:1px solid var(--shadow); padding:5px 7px; }
.now-row{ display:flex; align-items:center; gap:7px; font-size:12px; padding:3px 0; }
.now-row .now-dot{ width:8px; height:8px; flex:0 0 auto; background:#1CA81C; border:1px solid #0a5a0a; }
.now-row span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.now-row u{ font-family:var(--mono); font-size:10.5px; color:#666; text-decoration:none; flex:0 0 auto; }
.now-row .btn{ padding:3px 9px; font-size:11.5px; flex:0 0 auto; }
.cal-head{ flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:6px 7px; }
.cal-head b{ flex:1 1 auto; text-align:center; font-size:13px; }
.cal-head .btn{ padding:3px 10px; font-size:12px; }
.cal-grid{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  padding:0 7px 7px; background:var(--face);
}
.cal-dow{ text-align:center; font-size:10.5px; color:#555; font-family:var(--mono); padding:2px 0; }
.cal-cell{
  /* A square cell made the grid so tall that the day list and the
     Start a work session button fell off the bottom of the window. */
  position:relative; height:30px; font:12px var(--ui); cursor:pointer;
  background:#fff; color:#000; display:flex; align-items:center; justify-content:center;
  border-top:2px solid var(--hilite); border-left:2px solid var(--hilite);
  border-right:2px solid var(--shadow); border-bottom:2px solid var(--shadow);
}
.cal-cell.today{ font-weight:700; background:#FFFFCC; }
.cal-cell.sel{ background:var(--navy); color:#fff; }
.cal-dots{ position:absolute; bottom:2px; left:0; right:0; display:flex; gap:2px; justify-content:center; }
.cal-dots u{ width:4px; height:4px; text-decoration:none; }
.dot-session{ background:#C41B1B; }
.dot-deadline{ background:#1B3FC4; }
.dot-cowork{ background:#1CA81C; }
.cal-cell.sel .cal-dots u{ outline:1px solid #fff; }
.cal-day{ flex:1 1 auto; min-height:90px; overflow:auto; background:#fff; border-top:1px solid var(--shadow); padding:0 0 4px; }
.cal-day-head{ position:sticky; top:0; background:var(--face); padding:4px 9px; font-size:11.5px; font-weight:700; border-bottom:1px solid var(--shadow); }
.cal-empty{ padding:12px 10px; font-size:12px; color:#777; margin:0; }
.cal-ev{ display:flex; gap:8px; align-items:flex-start; padding:7px 9px; border-bottom:1px solid #EEE; }
.cal-ev.live{ background:#F2FBF2; }
.cal-when{ font-family:var(--mono); font-size:10.5px; color:#666; flex:0 0 62px; padding-top:2px; }
.cal-mid{ flex:1 1 auto; min-width:0; }
.cal-mid b{ display:block; font-size:12.5px; }
.cal-mid i{ display:block; font-style:normal; font-size:11.5px; color:#666; margin-top:2px; }
.cal-ev.kind-session .cal-mid b{ color:#9a1414; }
.cal-ev.kind-deadline .cal-mid b{ color:#14309a; }
.cal-join{ flex:0 0 auto; padding:4px 11px; font-size:11.5px; }
.cal-foot{ flex:0 0 auto; padding:7px; border-top:1px solid var(--hilite); box-shadow:0 -1px 0 var(--shadow) inset; }
.cal-foot .btn{ width:100%; padding:7px; }
.bl-now{ background:#FFFFCC; border-bottom:2px solid var(--shadow); padding:4px 7px; }
.btn.on{
  background:var(--navy); color:#fff;
  border-top:2px solid var(--dark); border-left:2px solid var(--dark);
  border-right:2px solid var(--hilite); border-bottom:2px solid var(--hilite);
}