/* Excalium News LOCKED v1 — the SHARED application shell.
 *
 * This is the one stylesheet here that is intentionally app-wide: the top bar
 * and the 196px sidebar wrap every view. It styles chrome only. View bodies
 * (Portfolio, Agent, Settings, Pricing) keep their existing styles, so this
 * file must never set type or color on generic elements. */

.xn-shell {
  overflow-x: hidden;
  font-family: var(--xn-font);
  background: var(--xn-bg);
  color: var(--xn-text);
}

/* ---------- top bar ---------- */

.xn-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 16px 24px;
  background: var(--xn-bg);
  border-bottom: 1px solid var(--xn-rule);
}

.xn-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--xn-text);
  font: 600 20px/1 var(--xn-font);
  letter-spacing: -0.01em;
}

.xn-brand svg { width: 22px; height: 22px; flex: none; }

.xn-top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.xn-top-nav { display: flex; align-items: center; gap: 22px; }

.xn-top-link {
  font: 400 12.5px/1 var(--xn-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xn-text-body-2);
  text-decoration: none;
  white-space: nowrap;
}

.xn-top-link:hover { color: var(--xn-text); }

.xn-cta {
  padding: 10px 18px;
  border: 0;
  border-radius: 7px;
  background: var(--xn-brand);
  color: #fff;
  font: 600 12.5px/1 var(--xn-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.xn-cta:hover { background: #24688f; }

.xn-sync {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 12px/1 var(--xn-font);
  color: var(--xn-text-body-2);
  white-space: nowrap;
}

.xn-sync--bad {
  padding: 6px 10px;
  border: 1px solid var(--xn-down-border);
  border-radius: 999px;
  color: var(--xn-down);
}

/* ---------- scope segmented control ---------- */

.xn-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--xn-bg-muted);
  border-radius: 7px;
}

.xn-seg-chip {
  padding: 7px 15px;
  border-radius: 5px;
  font: 500 12.5px/1 var(--xn-font);
  color: var(--xn-text-muted-2);
  text-decoration: none;
  white-space: nowrap;
}

.xn-seg-chip:hover { color: var(--xn-text); }

/* The only shadow in the whole system, per the handoff. */
.xn-seg-chip.on {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  color: var(--xn-text);
}

/* ---------- sidebar + body grid ---------- */

.xn-body {
  display: grid;
  grid-template-columns: var(--xn-nav-w) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 64px);
}

.xn-nav {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 12px;
  min-height: calc(100vh - 64px);
  border-right: 1px solid var(--xn-rule);
}

.xn-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 8px;
  text-decoration: none;
  font: 500 13px/1 var(--xn-font);
  color: var(--xn-text-body-2);
}

.xn-nav a svg { width: 17px; height: 17px; flex: none; color: var(--xn-text-muted); }
.xn-nav a:hover { background: var(--xn-bg-subtle); }
.xn-nav a.on { background: var(--xn-bg-muted); color: var(--xn-text); font-weight: 600; }
.xn-nav a.on svg { color: var(--xn-text); }

.xn-nav-foot {
  margin-top: auto;
  padding: 12px 11px 0;
  border-top: 1px solid var(--xn-rule-soft);
  font: 400 11px/1.5 var(--xn-font);
  color: var(--xn-text-faint);
  text-wrap: pretty;
}

.xn-view { min-width: 0; }

/* ---------- shared primitives ---------- */

.xn-shell :focus-visible,
.xn :focus-visible {
  outline: 2px solid var(--xn-link);
  outline-offset: 2px;
  border-radius: 4px;
}

.xn-live {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--xn-up);
  animation: xn-pulse 1.8s ease-in-out infinite;
}

/* Off-hours: the dot stays, but it stops claiming to be live. */
.xn-closed .xn-live { animation: none; opacity: 0.45; }

@keyframes xn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .xn-live { animation: none; }
}

.xn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .xn-top { flex-wrap: wrap; gap: 12px 20px; padding: 12px 16px; }
  /* PRICING / HOW IT WORKS / the session button are nowrap, so the group must
     be allowed to wrap or it forces the page wider than the viewport. */
  .xn-top-right { flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; min-width: 0; }
  .xn-top-nav { flex-wrap: wrap; gap: 10px 16px; }
  .xn-scope-slot { order: 3; width: 100%; }
  .xn-seg { width: 100%; }
  .xn-seg-chip { flex: 1; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  .xn-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .xn-nav {
    position: sticky;
    top: 0;
    flex-direction: row;
    gap: 6px;
    min-height: 0;
    padding: 8px 12px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--xn-rule);
    background: var(--xn-bg);
    z-index: 30;
  }
  .xn-nav a { min-height: 44px; white-space: nowrap; }
  .xn-nav-foot { display: none; }
}

/* Content area for the views that have NOT migrated yet (Portfolio, Agent,
   Settings, Pricing). They keep their own internals; the shell only gives them
   the page gutter the old `main` rule used to provide. News opts out because
   its own layout owns its padding. */
.xn-view { padding: 24px 28px 64px; }
.xn-view--news { padding: 0; }

@media (max-width: 760px) {
  .xn-view { padding: 18px 16px 48px; }
}