.app-shell {
  display: grid;
  /* rail | context | handle | main | handle | inspector. The handle tracks are
     drag targets inserted between the three semantic columns. The CSS
     custom properties hold the current widths so JS can update them
     without touching the rest of the grid string. */
  --nav-w: 58px;
  --context-w: 236px;
  --inspector-w: 360px;
  --handle-w: 10px;
  grid-template-areas: "nav context rh-l main rh-r inspector";
  grid-template-columns: var(--nav-w) var(--context-w) var(--handle-w) minmax(0, 1fr) var(--handle-w) var(--inspector-w);
  height: calc(100vh - 48px);
  max-width: 100%;
  overflow-x: hidden;
}

/* Resize handles. Grid-cell in their own track so they don't shift the
   layout when focused. role="separator" (set in HTML) gives screen
   readers the right semantics. */
.resize-handle {
  background: transparent;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.resize-handle-left { grid-area: rh-l; }
.resize-handle-right { grid-area: rh-r; }
.resize-handle:hover,
.resize-handle:focus-visible,
.resize-handle.dragging {
  background: var(--accent);
  outline: none;
}
.resize-handle:focus-visible {
  /* Keep the global focus ring as a fallback for systems that don't
     show :hover-style background contrast. */
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* While dragging anywhere on the page, suppress text-selection and
   keep the cursor consistent. */
body.is-resizing,
body.is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.nav-zone {
  grid-area: nav;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 58px;
  overflow: visible;
}

.context-zone {
  grid-area: context;
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  min-width: 0;
  overflow-y: auto;
  padding: 10px 0 14px;
}

.inspector-zone {
  grid-area: inspector;
  border-left: 1px solid var(--border);
  background: var(--panel);
  padding: 16px;
  min-width: 0;
  overflow-y: auto;
}

/* Top-bar — three-column grid: brand (left) | search (center) | privacy + scope controls (right). */
.topbar {
  position: relative;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.topbar-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}
.topbar-brand .brand-mark {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.topbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}
.topbar-brand .brand-word {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.topbar-brand .brand-tag {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.topbar-brand:hover { text-decoration: none; }

.topbar-search {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 640px;
}
.topbar-search input[type="search"] {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 13px;
}
.topbar-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-areas:
      "nav main"
      "nav inspector";
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .context-zone {
    display: none;
  }

  /* The shell drops the dedicated resize-handle columns below 1180px;
     the handles only make sense in the three-
     column desktop grid. Hide them so they cannot auto-place into an
     unintended row and steal space from the main content. */
  .app-shell .resize-handle {
    display: none;
  }

  .inspector-zone {
    border-left: 0;
    border-top: 1px solid var(--border);
    max-height: 34vh;
  }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-brand,
  .topbar-search,
  .topbar-right {
    justify-self: stretch;
  }

  .topbar-right {
    justify-content: flex-start;
  }

  .topbar-search {
    max-width: none;
  }

  .app-shell {
    grid-template-areas:
      "nav"
      "main"
      "inspector";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: auto;
    min-height: calc(100vh - 48px);
    max-width: 100%;
    overflow-x: hidden;
  }

  .nav-zone {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 4px;
  }

  .context-zone {
    display: none;
  }

  .nav-zone ul {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    width: auto;
  }

  .nav-foot {
    width: auto;
    flex-direction: row;
    border-top: 0;
    border-left: 1px solid var(--border);
    padding: 4px 8px;
  }

  .nav-zone li a {
    width: auto;
    height: auto;
    margin: 2px;
    padding: 6px 10px;
    border-radius: var(--r-md);
    flex-direction: row;
    gap: 6px;
  }

  /* Show labels inline at mobile */
  .nav-label {
    position: static;
    transform: none;
    background: transparent;
    color: inherit;
    padding: 0;
    opacity: 1;
    font-size: 12px;
    pointer-events: auto;
    border-radius: 0;
    transition: none;
  }

  .inspector-zone {
    max-height: none;
  }
}