/* Window chrome: our own late-90s take: one bevel system, square corners. */

.btn {
  min-height: 28px; padding: 4px 14px;
  background: var(--chrome); border: 0; box-shadow: var(--raised);
  font-size: var(--fs-s);
}
.btn:active, .btn[aria-pressed="true"] { box-shadow: var(--pressed); padding: 5px 13px 3px 15px; }
.btn:focus-visible { outline-offset: -5px; }

.field {
  width: 100%; padding: 5px 6px; border: 0; background: var(--paper);
  box-shadow: var(--field); font-size: var(--fs-m);
}
.field:focus-visible { outline: 1px dotted var(--ink); outline-offset: -5px; }

/* window frame */
.win {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 260px; max-width: 100%;
  padding: 3px;
  background: var(--chrome);
  box-shadow: var(--raised);
  animation: win-open 160ms var(--ease-out);
}
@keyframes win-open { from { transform: scale(.94); opacity: 0; } }
.win.is-max { inset: 0 !important; width: auto !important; height: auto !important; }

.win-title {
  display: flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 3px 0 5px; flex: none;
  background: linear-gradient(90deg, #8a8a8a, #b9b9b9);
  color: #dcdcdc;
  font-size: var(--fs-s); font-weight: 600;
  user-select: none; touch-action: none;
}
.win.is-active .win-title { background: linear-gradient(90deg, var(--sky-deep), var(--sky)); color: var(--light); }
.win-icon { width: 16px; height: 16px; flex: none; }
.win-title-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-btns { display: flex; gap: 2px; flex: none; }
.win-btn {
  width: 20px; height: 18px; padding: 0; border: 0;
  display: grid; place-items: center;
  background: var(--chrome); box-shadow: var(--raised); color: var(--ink);
}
.win-btn[data-act="close"] { margin-left: 2px; }
.win-btn:active { box-shadow: var(--pressed); }
.win-btn:active svg { transform: translate(1px, 1px); }
.win-btn:focus-visible { outline-offset: -4px; }

.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* menu bar, toolbar, address bar, status bar (shared by apps) */
.menubar { display: flex; gap: 2px; padding: 2px 0; font-size: var(--fs-s); }
.menubar span { padding: 1px 7px; }
.menubar span::first-letter { text-decoration: underline; }

.addressbar { display: flex; align-items: center; gap: 6px; padding: 3px 2px 5px; font-size: var(--fs-s); }
.addressbar .field { padding: 3px 6px; font-size: var(--fs-s); }

.statusbar { display: flex; gap: 2px; padding-top: 3px; flex: none; font-size: var(--fs-xs); }
.statusbar > span { padding: 2px 6px; box-shadow: var(--sunken); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar > span:first-child { flex: none; }
.statusbar > span:last-child { flex: 1; }

.inset-panel { background: var(--paper); box-shadow: var(--sunken); padding: 2px; }

/* 98-style scrollbars where supported */
.win ::-webkit-scrollbar { width: 16px; height: 16px; }
.win ::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--chrome) 0 25%, var(--light) 0 50%) 0 0 / 2px 2px; }
.win ::-webkit-scrollbar-thumb { background: var(--chrome); box-shadow: var(--raised); }
.win ::-webkit-scrollbar-button:single-button { background: var(--chrome); box-shadow: var(--raised); height: 16px; width: 16px; }
.win-back { display: none; margin-right: 2px; }
.win[data-mode="full"] .win-back { display: grid; }
.win { max-height: 100%; }
.win:focus { outline: none; }
.win-body { overflow: auto; }