/* ========================================================================
   HSB Workbench portal — Amiga Workbench aesthetic
   - Blue desktop, beveled grey windows, Topaz-ish monospace
   - Two 50/50 windows; click the URL title to maximise (no reload),
     "<" gadget restores the split.
   ======================================================================== */

:root {
  --wb-blue:   #0055aa;   /* desktop */
  --wb-blue-d: #003c78;
  --wb-grey:   #a0a0a0;   /* window furniture */
  --wb-grey-l: #d4d4d4;   /* bevel light */
  --wb-grey-d: #585858;   /* bevel dark */
  --wb-white:  #ffffff;
  --wb-black:  #000000;
  --wb-orange: #ee7711;   /* active accents */
  --wb-text:   #000000;
  --mono: 'Courier New', 'Lucida Console', 'DejaVu Sans Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--wb-blue);
  font-family: var(--mono);
  color: var(--wb-text);
  overflow: hidden;
}

/* --- Amiga screen title bar ------------------------------------------- */
.screenbar {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: var(--wb-grey);
  border-bottom: 2px solid var(--wb-black);
  /* classic 3D bevel: light top, dark bottom */
  box-shadow: inset 0 1px 0 var(--wb-grey-l), inset 0 -2px 0 var(--wb-grey-d);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}
.screenbar-title { color: var(--wb-black); }
.screenbar-mem {
  color: #303030;
  font-weight: 400;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 12px;
}

/* --- Desktop holding the windows -------------------------------------- */
.screen {
  position: relative;
  height: calc(100% - 26px);
  display: flex;
  gap: 8px;
  padding: 8px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--wb-blue) 0, var(--wb-blue) 6px,
      var(--wb-blue-d) 6px, var(--wb-blue-d) 7px);
}

/* --- Window ----------------------------------------------------------- */
.window {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--wb-white);
  border: 2px solid var(--wb-black);
  /* outer bevel */
  box-shadow:
    inset 1px 1px 0 var(--wb-grey-l),
    inset -2px -2px 0 var(--wb-grey-d);
}

/* Maximised: this window fills the screen, sibling hides. No reload, so
   iframe content (typed query / translation) is preserved. */
.screen.has-max .window:not(.maximized) { display: none; }
.window.maximized { flex-basis: 100%; }

/* --- Title bar -------------------------------------------------------- */
.titlebar {
  display: flex;
  align-items: stretch;
  height: 24px;
  background: var(--wb-grey);
  border-bottom: 2px solid var(--wb-black);
  box-shadow: inset 0 1px 0 var(--wb-grey-l), inset 0 -1px 0 var(--wb-grey-d);
  user-select: none;
  /* Whole titlebar is the toggle target — pointer cursor everywhere */
  cursor: pointer;
}
.titlebar:hover .urltitle { color: var(--wb-orange); }

/* Generic beveled gadget button */
.gadget {
  flex: 0 0 auto;
  width: 24px;
  background: var(--wb-grey);
  border: none;
  border-right: 2px solid var(--wb-black);
  box-shadow: inset 1px 1px 0 var(--wb-grey-l), inset -1px -1px 0 var(--wb-grey-d);
  display: grid;
  place-items: center;
  cursor: default;
  padding: 0;
}

/* Close gadget — decorative Amiga close box (small nested square).
   pointer-events:none so a click on the gadget passes through to the
   titlebar's toggle handler — the gadget stays visible for the look
   but doesn't capture interaction. */
.close-gadget { position: relative; pointer-events: none; }
.close-gadget::before {
  content: '';
  width: 9px; height: 9px;
  background: var(--wb-white);
  border: 2px solid var(--wb-black);
}

/* Depth gadget (right) — two overlapping rectangles. Same
   pointer-events:none treatment as the close gadget. */
.depth-gadget { border-right: none; border-left: 2px solid var(--wb-black); margin-left: auto; pointer-events: none; }
.depth-icon { position: relative; width: 14px; height: 12px; display: block; }
.depth-icon::before, .depth-icon::after {
  content: ''; position: absolute; width: 9px; height: 7px;
  background: var(--wb-white); border: 1.5px solid var(--wb-black);
}
.depth-icon::before { top: 0; left: 0; }
.depth-icon::after  { bottom: 0; right: 0; background: var(--wb-grey); }

/* URL title — the clickable drag bar */
.urltitle {
  flex: 0 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--wb-black);
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.urltitle:hover { color: var(--wb-orange); text-decoration: underline; }
.urltitle:focus-visible { outline: 2px solid var(--wb-orange); outline-offset: -2px; }

/* The striped drag-fill that occupies leftover title space (Amiga look) */
.drag-fill {
  flex: 1 1 auto;
  align-self: stretch;
  background: repeating-linear-gradient(
    to bottom,
    var(--wb-grey) 0, var(--wb-grey) 2px,
    var(--wb-grey-d) 2px, var(--wb-grey-d) 3px);
  opacity: 0.5;
}

/* --- Window body / iframe -------------------------------------------- */
.winbody {
  position: relative;
  flex: 1 1 auto;
  background: var(--wb-white);
  overflow: hidden;
}
.loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--wb-white);
  color: #444;
  font-size: 13px;
  z-index: 1;
}
.winbody.loaded .loading { display: none; }
.tool {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: var(--wb-white);
}

/* --- Mobile: stack vertically ---------------------------------------- */
@media (max-width: 760px) {
  .screen { flex-direction: column; }
  .screenbar-mem { display: none; }
}