/* The layout model from the measurement: shell inset 8 at the sides · gap 8 · top bar 36 ·
   status bar 28. The bars are pinned to the edges of the window and do NOT step back from them by
   the inset — their content is centred in the bar itself
   (re-measure S3.5, FRONTEND_PLAN.md §5.1). */

.shell {
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr var(--statusbar-height);
  height: 100%;
  background-color: var(--color-shell);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--bar-inset);
}

.side {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.side:last-child {
  justify-content: flex-end;
}

/* h1 for the sake of the document structure, not for the sake of the look: the type size and the
   weight are those of the interface. */
.title {
  overflow: hidden;
  max-width: 100%;
  color: var(--color-text);
  font-size: var(--font-size-ui);
  font-weight: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.body {
  min-height: 0;

  /* The inset of the shell belongs to the area of the PANELS, not to the whole window: in Fleet
     the bars are pinned to the edges of the window and count their own inset from them
     (measured: 12.5 on the left, 13.5 on the right). */
  padding-inline: var(--gap);
}

.slot {
  display: grid;
  min-height: 0;
}

/* The separator IS the gap between the panels: the measured 8px and the grab zone are one and the
   same place, which is why no extra inset appears next to it. It is itself ALWAYS TRANSPARENT —
   the black gap between the windows is painted over by nothing (the owner's word, remark 14). */
.separator {
  position: relative;
  width: var(--gap);
  background-color: transparent;
}

/* A pill centred in the gap. Rules copied verbatim from vojo (`components/page/style.css.ts`):
   rest invisible · hover and keyboard focus 0.25 · focus tinted at 0.45 · drag 0.55 and grows ·
   min stop squished and thickened · max stop stretched. 140ms throughout, as there. */
.handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--handle-width);
  height: var(--handle-length);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-bar);
  background-color: var(--color-text-secondary);
  opacity: 0;
  transition:
    opacity 140ms ease,
    height 140ms ease,
    width 140ms ease,
    background-color 140ms ease;
}

.separator[data-separator='hover'] .handle,
.separator:focus-visible .handle {
  opacity: 0.25;
}

/* ⚠ The accent is on the drag and on the KEYBOARD focus, but not on any `data-separator="focus"`.
   The library sets that state on an ordinary onFocus (dist: `z ? G = "focus"`), while a mouse
   pointerdown leaves the focus in place — which is why after releasing the drag the pill STUCK
   highlighted (remark 18a). :focus-visible does not do this: a mouse does not show a focus ring. */
.separator:focus-visible .handle {
  background-color: var(--color-accent);
  opacity: 0.45;
}

.separator[data-separator='active'] .handle {
  height: var(--handle-length-active);
  background-color: var(--color-accent);
  opacity: 0.55;
}

.separator:focus-visible {
  outline: none;
}

/* The stop is tactile: crushed at min, stretched at max. The state comes from the shell —
   the library does not report a clamp. */
.separator[data-separator='active'] .handle[data-limit='min'] {
  width: var(--handle-width-limit);
  height: var(--handle-length-min);
  opacity: 0.85;
}

.separator[data-separator='active'] .handle[data-limit='max'] {
  height: var(--handle-length-max);
  opacity: 0.9;
}

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--bar-inset);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}