/* James Greene's desktop for jamesgreene.com/pc: shared Win98 window chrome. */
.jg-win {
  --face: #c0c0c0; --hi: #fff; --lite: #dfdfdf; --shadow: #808080; --dark: #000;
  --navy: #000080; --blue: #1084d0; --ink: #111; --dim: #555; --paper: #fff; --accent: #0a246a;
  position: absolute; z-index: 5; left: 120px; top: 24px;
  width: min(860px, calc(100% - 200px)); height: min(640px, calc(100% - 64px));
  min-width: 320px; display: flex; flex-direction: column;
  background: var(--face); color: #000;
  border: 1px solid; border-color: var(--lite) var(--dark) var(--dark) var(--lite);
  box-shadow: inset 1px 1px var(--hi), inset -1px -1px var(--shadow), 3px 3px 0 rgba(0,0,0,.35);
  font: 12px/1.4 "MS Sans Serif", Tahoma, Arial, sans-serif;
}
.jg-win[hidden] { display: none; }
.jg-win.jg-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
body.app-running .jg-win, body.exclusive-fullscreen .jg-win,
body.page-fullscreen .jg-win { display: none !important; }

/* ---- chrome ---- */
.jg-titlebar {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  margin: 3px 3px 1px; padding: 2px 2px 2px 3px; height: 18px;
  background: linear-gradient(90deg, var(--navy), var(--blue)); color: #fff; font-weight: bold;
  user-select: none; touch-action: none; cursor: default;
}
.jg-win.jg-inactive .jg-titlebar { background: linear-gradient(90deg, #808080, #b5b5b5); color: #d4d0c8; }
.jg-titlebar .jg-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-caption-btns { display: flex; gap: 0; }
.jg-cap {
  width: 16px; height: 14px; padding: 0; margin-left: 0; display: grid; place-items: center;
  font: bold 9px/12px Tahoma, Arial, sans-serif; color: #000; background: var(--face);
  border: 1px solid; border-color: var(--hi) var(--dark) var(--dark) var(--hi); box-shadow: inset -1px -1px var(--shadow);
}
.jg-cap-close { margin-left: 2px; }
.jg-cap:active { border-color: var(--dark) var(--hi) var(--hi) var(--dark); box-shadow: inset 1px 1px var(--shadow); }
.jg-glyph-min { width: 6px; height: 2px; background: #000; margin-top: 6px; }
.jg-glyph-max { width: 8px; height: 7px; border: 1px solid #000; border-top-width: 2px; }
.jg-toolbar {
  display: flex; align-items: center; gap: 1px; flex-shrink: 0; flex-wrap: wrap;
  margin: 0 3px; padding: 2px; border-bottom: 1px solid var(--shadow); box-shadow: 0 1px var(--hi);
}
.jg-tool {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
  font: inherit; color: #000; text-decoration: none; background: transparent; border: 1px solid transparent; cursor: default;
}
.jg-tool img { image-rendering: auto; }
.jg-tool:hover, .jg-tool:focus-visible { border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); outline: none; }
.jg-tool:active { border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); }
.jg-tool-sep { width: 2px; height: 20px; margin: 0 4px; border-left: 1px solid var(--shadow); border-right: 1px solid var(--hi); }


.jg-statusbar { display: flex; gap: 2px; flex-shrink: 0; margin: 4px 3px 3px; }
.jg-statusbar span { padding: 1px 6px; border: 1px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-statusbar span:first-child { flex: 1; }

.jg-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 25px; padding: 0 12px;
  font: 12px "MS Sans Serif", Tahoma, Arial, sans-serif; color: #000 !important; text-decoration: none; background: var(--face);
  border: 1px solid; border-color: var(--hi) var(--dark) var(--dark) var(--hi); box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--lite);
}
.jg-btn-default { outline: 1px solid #000; outline-offset: 0; }
.jg-btn:active { border-color: var(--dark) var(--hi) var(--hi) var(--dark); box-shadow: inset 1px 1px var(--shadow); }
.jg-btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }

/* ---- small screens and phones: the window becomes the screen ---- */
@media (max-width: 760px) {
  .jg-win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; min-width: 0; }
  .jg-caption-btns [data-jg="min"], .jg-caption-btns [data-jg="max"] { display: none; }
  .jg-cap-close { width: 22px; height: 18px; font-size: 11px; }
  .jg-titlebar { height: 22px; }
  .jg-tool { padding: 0 6px; flex-shrink: 0; }
}
body.single-app .jg-win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; min-width: 0; }