/* ============================================================================
   Layout — the panel shell: the top bar, the screen frame and the scroll body.
   ----------------------------------------------------------------------------
   Structure only. What sits inside these regions is a component.
   ========================================================================= */

/* Lockup on the left, everything that navigates on the right. The cluster is
   pushed over as one group so the switch and the settings action stay together
   rather than drifting apart as the panel widens. */
.pomy-topbar {
  align-items: center;
  background: var(--pomy-canvas);
  border-bottom: 1px solid var(--pomy-line);
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  height: var(--pomy-topbar-h);
  padding: 0 10px 0 12px;
}
.pomy-topbar-nav {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
}

.pomy-lockup { display: block; flex: 0 0 auto; height: 25.5px; width: auto; }

.pomy-icon-btn {
  align-items: center;
  border-radius: var(--pomy-r-control);
  color: var(--pomy-muted);
  display: grid;
  flex: 0 0 auto;
  height: 30px;
  place-items: center;
  width: 30px;
}
.pomy-icon-btn:hover { background: var(--pomy-surface); color: var(--pomy-ink); }
/* Settings is a destination like the three in the switch beside it, so being on
   it has to look like being on it. The ring is what separates this from hover:
   a shape, not a second shade of the same surface. */
.pomy-icon-btn[aria-pressed="true"] {
  background: var(--pomy-surface);
  box-shadow: inset 0 0 0 1px var(--pomy-line-strong);
  color: var(--pomy-ink);
}
.pomy-icon-btn svg { height: 16px; width: 16px; }
/* A refresh in flight says so on the control that started it, in the one way
   this system already says "working": the same slow pulse a busy notice uses.
   It also stops accepting presses, because the request being asked for is
   already running. */
.pomy-icon-btn[data-busy="true"] { color: var(--pomy-ink); }
.pomy-icon-btn[data-busy="true"] svg { animation: pomy-pulse 1.4s ease-in-out infinite; }
.pomy-icon-btn:disabled { cursor: default; }

.pomy-screen { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pomy-screen[hidden] { display: none; }

.pomy-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}