/* =============================================================================
   AlphaFlux console shell
   -----------------------------------------------------------------------------
   Topbar, sidebar, content region. Tokens only: no raw colour, radius, shadow
   or duration appears in this file.

   Admin density and speed: the sidebar is tight, the durations are the short
   end of the scale, because an operator moving between sections all day pays
   every millisecond of that transition on every move.
   ========================================================================== */

.shell {
  min-block-size: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--background);
}

/* --- Topbar -------------------------------------------------------------- */

.shell__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  block-size: var(--control-h-lg);
  padding-inline: var(--space-5);
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
}

.shell__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--foreground);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  letter-spacing: var(--tracking-heading);
}

.shell__mark {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--primary);
}

.shell__spacer {
  flex: 1;
}

.shell__who {
  color: var(--muted-foreground);
  font-size: var(--text-label);
}

/* --- Body ---------------------------------------------------------------- */

.shell__body {
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-block-size: 0;
}

.shell__nav {
  padding: var(--space-5) var(--space-3);
  border-inline-end: 1px solid var(--border);
  background: var(--surface-secondary);
  overflow-y: auto;
}

.shell__nav-group {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.shell__nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
}

.shell__nav-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--foreground-secondary);
  font-size: var(--text-body-sm);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.shell__nav-link:hover {
  background: var(--surface-hover);
  color: var(--foreground);
}

/* The current section is marked three ways on purpose: colour, weight and a
   left edge. Colour alone fails for anyone who cannot see the difference. */
.shell__nav-link.is-active {
  background: var(--surface-selected);
  color: var(--foreground);
  font-weight: var(--weight-medium);
  box-shadow: inset 2px 0 0 var(--primary);
}

/* --- Content ------------------------------------------------------------- */

.shell__main {
  padding: var(--space-6) var(--space-7);
  min-inline-size: 0;
}

.shell__head {
  margin-block-end: var(--space-6);
}

.shell__title {
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
}

.shell__subtitle {
  color: var(--muted-foreground);
  font-size: var(--text-body-sm);
  margin-block-start: var(--space-1);
}

/* Below this width the sidebar costs more than it gives, so it moves under the
   content rather than squeezing the work area. */
@media (max-width: 56rem) {
  .shell__body {
    grid-template-columns: 1fr;
  }

  .shell__nav {
    border-inline-end: 0;
    border-block-end: 1px solid var(--border);
  }

  .shell__main {
    padding: var(--space-5);
  }
}