/* ============================================================
   Shared faux-browser frame for skinned period pages.
   The era-specific look lives in each skin file (e.g. web2.css);
   this is just the window chrome + the "back to Burgle" bar.
   ============================================================ */
body.skinned { margin: 0; background: #8aa0b2; font-family: Arial, Helvetica, sans-serif; }

/* The bar that reminds you you've left the search engine */
.skin-exit {
  display: flex; align-items: center; gap: 14px;
  background: #1a1a1a; color: #bbb; font-size: 13px; padding: 7px 16px;
}
.skin-exit a { color: #fff; text-decoration: none; font-weight: bold; }
.skin-exit a:hover { text-decoration: underline; }
.skin-note { color: #8a8a8a; }

/* The browser window */
.winframe {
  max-width: 980px; margin: 22px auto 44px; background: #fff;
  border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.winbar {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: linear-gradient(#eef2f6, #ccd4dd); border-bottom: 1px solid #9aa6b2;
}
.dots { display: flex; gap: 7px; flex: 0 0 auto; }
.dots i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.dots .r { background: #ff5f57; } .dots .y { background: #febc2e; } .dots .g { background: #28c840; }
.addr {
  flex: 1; background: #fff; border: 1px solid #a9b3bd; border-radius: 12px;
  padding: 5px 12px; font-size: 13px; color: #3a3f44;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.addr .lock { color: #5b9a5b; margin-right: 5px; }
.reload { color: #5a6470; font-size: 17px; flex: 0 0 auto; }
.viewport { background: #fff; }

/* ============================================================
   Era-specific browser chrome. The default .winbar above is the
   modern Chrome/Safari look; these override it per era.
   ============================================================ */

/* ---- Aqua: mid-2000s Mac OS X (web2 / myspace) ---- */
.chrome-aqua .winbar { background: repeating-linear-gradient(#fafafa, #fafafa 1px, #e7e7e7 1px, #e7e7e7 2px); border-bottom: 1px solid #9aa6b2; }
.chrome-aqua .dots i { box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 1px rgba(0,0,0,.22); }
.chrome-aqua .addr { border-radius: 14px; background: linear-gradient(#fff, #ededed); }

/* ---- Windows-family chrome (Netscape / IE6 / Win95): title bar + location bar ---- */
.winbar.win { display: block; padding: 0; background: #c0c0c0; border-bottom: 2px solid #808080; }
.winbar.win .titlebar { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 6px; }
.winbar.win .wicon { width: 14px; height: 14px; flex: 0 0 auto; background: #fff; border: 1px solid #888; }
.winbar.win .wintitle { flex: 1; font: bold 12px Tahoma, "MS Sans Serif", sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winbar.win .winbtns { display: flex; gap: 2px; }
.winbar.win .winbtns i { width: 17px; height: 15px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; line-height: 1; background: #c0c0c0; border: 1px solid; border-color: #fff #404040 #404040 #fff; color: #000; }
.winbar.win .locbar { display: flex; align-items: center; gap: 7px; padding: 4px 7px; background: #c0c0c0; border-top: 1px solid #dfdfdf; }
.winbar.win .loclabel { font: 12px Tahoma, "MS Sans Serif", sans-serif; color: #000; flex: 0 0 auto; }
.winbar.win .locbar .addr { flex: 1; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; border-radius: 0; padding: 3px 7px; font: 12px Tahoma, sans-serif; color: #000; box-shadow: none; }
.winbar.win .throbber { font-size: 16px; color: #2a7de1; flex: 0 0 auto; }
.winbar.win .goebtn { font: italic bold 16px Georgia, serif; color: #1e6fc4; flex: 0 0 auto; }

.chrome-netscape .titlebar { background: linear-gradient(#3b3b6e, #23234a); }
.chrome-netscape .wicon { background: radial-gradient(circle at 50% 40%, #66ccff, #0a3b8f); border-color: #001; }

.chrome-ie6 .titlebar { background: linear-gradient(#2a8ae8, #0a4fb5); }
.chrome-ie6 .wicon { background: #fff; }

.chrome-win9x .titlebar { background: linear-gradient(90deg, #000080, #1084d0); }
.chrome-win9x .wicon { background: linear-gradient(135deg, #fff, #c0c0c0); }

@media (max-width: 700px) { .winframe { margin: 12px; border-radius: 6px; } }