.obs-shell {
  isolation: isolate;
  display: grid;
  /* Phase 1 (2026-05-18) removed the navigation rail. The shell is now a
   * topbar / main / status stack — main spans the full width. The legacy
   * `--obs-rail-width` token is still defined in tokens.css but unused;
   * left there in case a future iteration brings back a left rail. */
  grid-template-columns: 1fr;
  grid-template-rows: var(--obs-topbar-height) 1fr var(--obs-statusstrip-height);
  grid-template-areas:
    "topbar"
    "main"
    "status";
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: transparent; /* let body atmospheric wash show through */
}

.obs-shell .obs-topbar {
  position: relative;
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--obs-space-5);
  background: var(--obs-bg-2);
  border-bottom: 1px solid transparent; /* replaced by gradient mask */
}
/* Hairline that fades at left/right edges — feels less "boxed-in" */
.obs-shell .obs-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--obs-hairline) 12%,
    var(--obs-hairline-strong) 50%,
    var(--obs-hairline) 88%,
    transparent 100%);
  pointer-events: none;
}

.obs-shell .obs-topbar-left {
  display: inline-flex;
  align-items: center;
  gap: var(--obs-space-3);
}

/* "More" dropdown — Studies / Pricing live here after Phase 1 dropped
 * them from primary navigation. Trigger sits in obs-topbar-right
 * alongside help + theme; dropdown anchors to its bottom-right corner. */
.obs-shell .obs-more-menu {
  position: relative;
  display: inline-flex;
}
.obs-shell .obs-more-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--obs-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--obs-text-tertiary);
  font-family: var(--obs-font-mono);
  font-size: var(--obs-font-size-sm);
  cursor: pointer;
  transition: color var(--obs-dur) var(--obs-ease),
              background var(--obs-dur) var(--obs-ease),
              border-color var(--obs-dur) var(--obs-ease);
}
.obs-shell .obs-more-btn:hover {
  color: var(--obs-text-primary);
  background: var(--obs-bg-3);
  border-color: var(--obs-hairline);
}
.obs-shell .obs-more-menu.is-open .obs-more-btn {
  color: var(--obs-text-primary);
  background: var(--obs-bg-3);
  border-color: var(--obs-hairline-strong);
}
.obs-shell .obs-more-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 4px;
  background: var(--obs-bg-2);
  border: 1px solid var(--obs-hairline);
  border-radius: var(--obs-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 60;
}
.obs-shell .obs-more-menu.is-open .obs-more-dropdown { display: block; }
.obs-shell .obs-more-item {
  display: block;
  padding: 8px 10px;
  color: var(--obs-text-secondary);
  text-decoration: none;
  font-family: var(--obs-font-sans, system-ui);
  font-size: var(--obs-font-size-sm);
  border-radius: 3px;
}
.obs-shell .obs-more-item:hover {
  background: var(--obs-bg-3);
  color: var(--obs-text-primary);
  text-decoration: none;
}

/* Wordmark composition: glyph + text */
.obs-shell .obs-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--obs-space-3);
  color: var(--obs-text-primary);
}
.obs-shell .obs-wordmark:hover {
  text-decoration: none;
}

.obs-shell .obs-wordmark .obs-glyph {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--obs-accent-warm);
  filter: drop-shadow(0 0 6px rgba(199, 154, 82, 0.32));
  transition: filter var(--obs-dur) var(--obs-ease);
}
.obs-shell .obs-wordmark:hover .obs-glyph {
  filter: drop-shadow(0 0 10px rgba(199, 154, 82, 0.55));
}

.obs-shell .obs-wordmark-text {
  font-family: var(--obs-font-mono);
  font-weight: var(--obs-font-weight-bold);
  font-size: var(--obs-font-size-base);
  letter-spacing: var(--obs-track-wordmark);
  text-transform: uppercase;
  line-height: 1;
}

.obs-shell .obs-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--obs-space-4);
}

.obs-shell #obs-main {
  grid-area: main;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;       /* prevent horizontal scroll from rings overflow */
  padding: var(--obs-space-5);
  min-width: 0;
}
@media (max-width: 720px) {
  .obs-shell #obs-main { padding: var(--obs-space-3); }
}
@media (max-width: 480px) {
  .obs-shell #obs-main { padding: var(--obs-space-2); }
}

.obs-shell .obs-statusstrip {
  position: relative;
  grid-area: status;
  display: flex;
  align-items: center;
  padding: 0 var(--obs-space-5);
  background: var(--obs-bg-2);
  font-family: var(--obs-font-mono);
  font-size: var(--obs-font-size-xs);
  color: var(--obs-text-tertiary);
  letter-spacing: var(--obs-track-wide);
  text-transform: lowercase;
}
.obs-shell .obs-statusstrip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--obs-hairline) 12%,
    var(--obs-hairline) 88%,
    transparent 100%);
  pointer-events: none;
}

@media (max-width: 720px) {
  /* The Phase-1 shell already uses `1fr` for the grid; this media query
     only needs to tighten topbar padding + wordmark size for small phones.
     `minmax(0, 1fr)` here is the safety knob that lets long content inside
     `#obs-main` (anchor preset chips, master-chart pills, geometry grid)
     reflow instead of expanding the track past the viewport. */
  .obs-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .obs-shell .obs-topbar {
    padding: 0 var(--obs-space-3);
  }
  .obs-shell .obs-topbar-left { gap: var(--obs-space-2); }
  .obs-shell .obs-topbar-right { gap: var(--obs-space-2); }
  .obs-shell .obs-wordmark-text {
    font-size: var(--obs-font-size-sm);
    letter-spacing: 0.08em;
  }
}

/* Sub-iPhone-13 widths: drop the wordmark text entirely so the glyph
   alone holds the brand. Topbar can't fit CARDINAL + theme + trial pill +
   sign-in button below 480px without this. */
@media (max-width: 480px) {
  .obs-shell .obs-wordmark-text {
    display: none;
  }
}