hyperhive/frontend/packages/swarm-ui/src/shell/Shell.css

/* <Shell> — header bar + nav row + the content column every route
   renders into. Colour vars come from ../theme.css (same base16 slots
   the per-hive dashboard uses, so this reads as recognizably
   hyperhive) — the layout itself is this package's own, not
   @hive/shared's chrome.css.

   `flex-wrap` on the header and nav rather than a hamburger/collapse
   menu: a narrow viewport (phone or a tiled desktop window) wraps onto
   a second line instead of overflowing — "don't break, don't
   over-invest" is the explicit scope here, not full mobile navigation
   redesign.

   Page-switch animation (see Shell.tsx's file-top comment for the JS
   half): both the nav indicator's slide and the page-body pop follow
   the same three-rule motion-guard shape `@hive/shared/motion-apply.js`'s
   own doc comment specifies — a base rule,
   `@media (prefers-reduced-motion: reduce)` to respect the OS default,
   `:root[data-motion='reduce']` as the explicit override (same
   specificity as the media rule, so source order after it wins), then
   `:root[data-motion='allow']` last to re-enable despite an OS-level
   reduce preference. */
.shell-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5em;
  padding: 0.75em 1.25em;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.shell-brand {
  font-weight: 600;
  /* Base colour only — Shell.tsx overrides it inline to the same
     currently-active-tab accent `.shell-nav-indicator` uses (falling
     back to this `--purple` before the first measurement lands, which
     is also the "hives" default route's own accent, so there's no
     visible mismatch at first paint). Transition lives here, same
     140ms hop cadence + the same three-rule motion guard as the
     indicator, so this and the indicator read as one thing changing,
     not two independently-synced ones. */
  color: var(--purple);
  letter-spacing: 0.02em;
  transition: color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .shell-brand {
    transition: none;
  }
}
:root[data-motion="reduce"] .shell-brand {
  transition: none;
}
:root[data-motion="allow"] .shell-brand {
  transition: color 140ms ease;
}
.shell-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  position: relative; /* anchor for .shell-nav-indicator */
}
/* Holds `SettingsMenu` + `LinksMenu` — one `margin-left: auto` on the
   wrapper, not one on each child (see Shell.tsx's comment for why two
   adjacent auto margins don't sit flush together). */
.shell-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin-left: auto;
}
/* Touch target and active-state underline are deliberately on two
   different elements. An earlier version put both `min-height: 2.75em`
   and `border-bottom` on the same box: centering the text within a
   2.75em box pushes a bottom-edge border ~0.7em away from the text,
   which argus caught by actually rendering it — a real visual
   regression, not just a touch-target win. So: `.shell-nav-link` (the
   `<a>`) owns the full-height tappable box (same 2.75em / ~44px WCAG
   2.5.5 floor as the rest of the shared kit — this is the primary nav,
   the single most-clicked/tapped element in the whole shell), and
   `.shell-nav-link-text` (an inner span hugging just the text) owns
   the underline, so the indicator stays directly under the label
   regardless of how tall the tappable box around it is. */
.shell-nav-link {
  display: flex;
  align-items: center;
  min-height: 2.75em;
  color: var(--muted);
  text-decoration: none;
}
.shell-nav-link:hover {
  color: var(--fg);
}
.shell-nav-link-text {
  padding-bottom: 0.25em; /* gap between the text and .shell-nav-indicator below it */
}
.shell-nav-link-active {
  color: var(--fg);
}
/* Shared underline, one element instead of one border-bottom per link
   — see Shell.tsx's file-top comment. `left`/`top`/`width` are set
   inline per-render from a real measurement; only the *transition*
   between those values lives here. 140ms matches Shell.tsx's `HOP_MS`
   exactly, so one hop's CSS transition finishes right as the next
   hop's JS-driven style update lands, instead of the two blending into
   an averaged easing curve. */
.shell-nav-indicator {
  position: absolute;
  height: 2px;
  border-radius: 1px;
  transition:
    left 140ms ease,
    top 140ms ease,
    width 140ms ease,
    background-color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .shell-nav-indicator {
    transition: none;
  }
}
:root[data-motion="reduce"] .shell-nav-indicator {
  transition: none;
}
:root[data-motion="allow"] .shell-nav-indicator {
  transition:
    left 140ms ease,
    top 140ms ease,
    width 140ms ease,
    background-color 140ms ease;
}
/* Suppresses the transition for exactly one render — the indicator's
   very first real position, so it snaps into place instead of visibly
   growing from the unmounted `left:0/width:0/transparent` fallback (see
   Shell.tsx's `indicatorSettledOnce`). Two-class selector so it wins
   over the plain `.shell-nav-indicator` rule above without `!important`,
   same reasoning `:root[data-motion='reduce']`'s extra attribute
   selector already relies on. */
.shell-nav-indicator.shell-nav-indicator-instant {
  transition: none;
}
.shell-body {
  max-width: 60em;
  margin: 0 auto;
  padding: 1.5em 1.25em;
  /* Plain fade, deliberately — mara's call on review: a scale+overshoot
     "pop" (this rule's first cut) read as too much for a first pass.
     Keeping it simple leaves room to make this fancier later without
     having shipped something to walk back first. */
  animation: shell-page-enter 160ms ease;
}
/* Opt-in widening for a route that genuinely needs more than a
   readable-line-length column (see Shell.tsx's `WIDE_BODY_ROUTES`).
   Only overrides `max-width` — margin/padding/animation stay
   `.shell-body`'s, so this reads as "the same body, just wider" rather
   than a parallel layout to keep in sync. 90em still centers with
   visible margins on a typical desktop viewport; it isn't full-bleed. */
.shell-body-wide {
  max-width: 90em;
}
@keyframes shell-page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-body {
    animation: none;
  }
}
:root[data-motion="reduce"] .shell-body {
  animation: none;
}
:root[data-motion="allow"] .shell-body {
  animation: shell-page-enter 160ms ease;
}