/* Interactive Beginner/Architect toggle for the "Learn the architecture" page.
   Loaded site-wide via book.toml `additional-css`; only affects pages that
   contain a [data-mode-toggle] control, so every other chapter is untouched. */

.mode-toggle-bar {
  position: sticky;
  top: var(--menu-bar-height, 0);
  z-index: 5;
  padding: 0.5rem 0;
  margin: 0 0 0.25rem;
  background: var(--bg);
}

.mode-switch {
  display: inline-flex;
  border: 1px solid var(--table-border-color, #bbb);
  border-radius: 8px;
  overflow: hidden;
}

.mode-switch button {
  padding: 0.5rem 1rem;
  border: 0;
  border-right: 1px solid var(--table-border-color, #bbb);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}

.mode-switch button:last-child { border-right: 0; }

.mode-switch button.active {
  background: var(--links, #2b79a2);
  color: #fff;
  font-weight: 600;
}

.mode-switch button:hover:not(.active) {
  background: var(--quote-bg, rgba(0, 0, 0, 0.06));
}

.mode-content { display: none; }

.mode-content.active {
  display: block;
  animation: mode-fade 0.18s ease;
}

@keyframes mode-fade {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

.mode-hint {
  font-size: 0.9em;
  opacity: 0.8;
  margin: 0.25rem 0 1rem;
}