/* Dev Technology brand shell chrome for the DevHome portal. */

/* Brand fonts (Inter body, Playfair Display headings) — matches DEvents. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --dev-red: #c41230;
  --dev-red-dark: #a30f28;
  --dev-ink: #1c1917;
  --dev-bg: #faf7f2;
  --dev-border: #e8e3dc;
  --dev-muted: #78716c;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--dev-bg);
  color: var(--dev-ink);
  -webkit-font-smoothing: antialiased;
}

.shell-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 56px;
  padding: 0 1.25rem;
  background: var(--dev-ink);
  color: #fff;
  border-bottom: 3px solid var(--dev-red);
}

.shell-header__brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Red brand square before the wordmark, echoing the Dev mark. */
.shell-header__brand::before {
  content: '';
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.5rem;
  vertical-align: -1px;
  background: var(--dev-red);
  border-radius: 3px;
}

.shell-header__divider {
  width: 1px;
  height: 20px;
  background: rgb(255 255 255 / 25%);
}

.shell-header__env {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
}

.shell-body {
  display: flex;
  min-height: calc(100vh - 56px);
}

.shell-nav {
  width: 230px;
  flex-shrink: 0;
  background: var(--dev-ink);
  padding: 1rem 0.75rem;
}

.shell-nav__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  color: rgb(255 255 255 / 72%);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.shell-nav__item:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

.shell-nav__item.is-active {
  background: var(--dev-red);
  color: #fff;
}

.shell-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dev-red);
}

/* On the active (red) item the dot would vanish — make it light. */
.shell-nav__item.is-active .shell-nav__dot {
  background: #fff;
}

.shell-main {
  flex: 1;
  min-width: 0;
}