styles.css

:root {
  --studio-lime: #d9ee50;
  --studio-lime-12: rgba(217, 238, 80, 0.12);
  --studio-lime-22: rgba(217, 238, 80, 0.22);
  --studio-lime-35: rgba(217, 238, 80, 0.35);
  --studio-ink: #161617;
  --studio-paper: #fcfcfc;
}

footer {
  position: relative;
  z-index: 10;
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  font-size: 0.85rem !important;
}

footer a[href="/"] img {
  height: auto !important;
  width: auto !important;
  max-height: 24px !important;
}

footer a {
  color: inherit !important;
  text-decoration: none !important;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
  transition: color 140ms ease, text-decoration-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

footer a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--studio-lime) !important;
}

footer a:focus-visible {
  outline: 2px solid var(--studio-lime) !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

footer a[href*="facebook"],
footer a[href*="linkedin"],
footer a[href*="youtube"],
footer a[href*="x.com"],
footer a[href*="twitter"],
footer a[href*="instagram"] {
  margin: 0 0.25rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.3rem !important;
  border-radius: 10px;
}

footer a[href*="facebook"]:hover,
footer a[href*="linkedin"]:hover,
footer a[href*="youtube"]:hover,
footer a[href*="x.com"]:hover,
footer a[href*="twitter"]:hover,
footer a[href*="instagram"]:hover {
  background: var(--studio-lime-12) !important;
  box-shadow: inset 0 0 0 1px var(--studio-lime-22);
  transform: translateY(-1px);
}

footer a[href*="facebook"] svg,
footer a[href*="linkedin"] svg,
footer a[href*="youtube"] svg,
footer a[href*="x.com"] svg,
footer a[href*="twitter"] svg,
footer a[href*="instagram"] svg {
  width: 18px !important;
  height: 18px !important;
  vertical-align: middle !important;
  transition: filter 140ms ease, transform 140ms ease;
}

footer a[href*="facebook"]:hover svg,
footer a[href*="linkedin"]:hover svg,
footer a[href*="youtube"]:hover svg,
footer a[href*="x.com"]:hover svg,
footer a[href*="twitter"]:hover svg,
footer a[href*="instagram"]:hover svg {
  filter: drop-shadow(0 0 6px var(--studio-lime-35));
  transform: scale(1.03);
}

footer a[href*="facebook"]:focus-visible,
footer a[href*="linkedin"]:focus-visible,
footer a[href*="youtube"]:focus-visible,
footer a[href*="x.com"]:focus-visible,
footer a[href*="twitter"]:focus-visible,
footer a[href*="instagram"]:focus-visible {
  background: var(--studio-lime-12) !important;
  box-shadow: inset 0 0 0 1px var(--studio-lime-22);
}

footer a[href="/"] {
  text-align: left !important;
}

footer a[href="/"]:hover img {
  filter: drop-shadow(0 0 10px var(--studio-lime-22));
}

footer a[href="/"]:focus-visible img {
  filter: drop-shadow(0 0 10px var(--studio-lime-22));
}

[data-mint-footer-bottom] {
  padding-top: 0 !important;
}

footer + div {
  padding-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  footer a,
  footer a svg,
  footer a img {
    transition: none !important;
    transform: none !important;
  }
}

/* ── Difficulty system ─────────────────────────────────────────────────────── */

/* Sidebar tag pills — color-coded by audience */
[data-tag="Code"] [data-testid="tag"],
nav [data-testid="tag"]:has-text("Code") {
  background-color: rgba(99, 102, 241, 0.1) !important;
  color: #5b5de7 !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

[data-tag="Advanced"] [data-testid="tag"],
nav [data-testid="tag"]:has-text("Advanced") {
  background-color: rgba(234, 88, 12, 0.09) !important;
  color: #c2410c !important;
  border: 1px solid rgba(234, 88, 12, 0.2) !important;
}

/* Audience callout blocks — used via snippets/audience-*.mdx */
.audience-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.audience-callout--ui {
  background: rgba(217, 238, 80, 0.08);
  border-color: var(--studio-lime);
  color: inherit;
}

.audience-callout--developer {
  background: rgba(99, 102, 241, 0.07);
  border-color: #6366f1;
  color: inherit;
}

.audience-callout--advanced {
  background: rgba(234, 88, 12, 0.07);
  border-color: #ea580c;
  color: inherit;
}

/* ── Simplify view toggle ──────────────────────────────────────────────────── */

/* Floating fixed-position pill injected into <body> by simplify-toggle.js.
   Theme-independent — doesn't rely on Mintlify navbar DOM (which has changed
   across theme versions and no longer exposes a stable injection target).
   Top-right placement keeps it visible on every page, in both modes.
   Sits just below the Mintlify navbar (h-16 = 4rem) to avoid overlapping
   the logo, search, and theme toggle. */
.simplify-toggle {
  position: fixed;
  top: 4.75rem;
  right: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--studio-paper);
  border: 1px solid var(--studio-lime-35);
  border-radius: 999px;
  padding: 0.55em 1.1em;
  color: var(--studio-ink);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  /* Draggable by pointer — prevent touch scroll from hijacking the gesture
     and select-on-drag from interfering with the drag handler. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* While actively being dragged, disable hover/transition noise and show a
   grabbing cursor for feedback. */
.simplify-toggle--dragging {
  cursor: grabbing !important;
  transition: none !important;
  transform: none !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.simplify-toggle .simplify-toggle__icon {
  font-size: 0.95em;
  line-height: 1;
}

.simplify-toggle:hover {
  background: var(--studio-lime-12);
  border-color: var(--studio-lime);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15), 0 0 0 3px var(--studio-lime-12);
  transform: translateY(-1px);
}

.simplify-toggle:focus-visible {
  outline: 2px solid var(--studio-lime);
  outline-offset: 2px;
}

/* Dark-mode friendly surface */
html.dark .simplify-toggle {
  background: var(--studio-ink);
  color: #f5f5f5;
}

/* Active/simplified state — solid lime so the exit control is unmissable */
.simplify-toggle--active {
  background: var(--studio-lime) !important;
  border-color: var(--studio-lime) !important;
  color: var(--studio-ink) !important;
  box-shadow: 0 6px 20px rgba(217, 238, 80, 0.45), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.simplify-toggle--active:hover {
  background: var(--studio-lime) !important;
  filter: brightness(0.96);
}

/* On small screens, shrink padding and keep it just below the mobile navbar */
@media (max-width: 640px) {
  .simplify-toggle {
    top: 4.25rem;
    right: 0.75rem;
    font-size: 0.75rem;
    padding: 0.45em 0.9em;
  }
}

/* ── Simplified-mode landing page CTAs ─────────────────────────────────────
   Used on /platform/simplified-mode for the primary Enter / Exit buttons. */
.simplified-mode-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--studio-lime);
  color: var(--studio-ink) !important;
  border: 1px solid var(--studio-lime);
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 2px 10px rgba(217, 238, 80, 0.35);
  max-width: 480px;
}

.simplified-mode-cta:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(217, 238, 80, 0.45);
}

.simplified-mode-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: rgba(22, 22, 23, 0.12);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.simplified-mode-cta__label {
  font-weight: 700;
  flex: 1 1 auto;
}

.simplified-mode-cta__sub {
  flex: 1 0 100%;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.75;
  padding-left: 2.5rem;
}

.simplified-mode-cta--exit {
  background: transparent;
  color: inherit !important;
  border: 1px solid var(--studio-lime-35);
  box-shadow: none;
}

.simplified-mode-cta--exit:hover {
  background: var(--studio-lime-12);
  border-color: var(--studio-lime);
  box-shadow: none;
}

.simplified-mode-cta--disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

.simplified-mode-status {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--studio-lime-35);
  border-left: 4px solid var(--studio-lime);
  border-radius: 10px;
  background: var(--studio-lime-12);
}

.simplified-mode-status p {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
}

/* When simplified mode is active, hide Code/Advanced tagged content blocks */
[data-simplified="true"] .audience-callout--developer,
[data-simplified="true"] .audience-callout--advanced {
  display: none !important;
}

/* Hide top-nav tabs (Developer, API reference, Advanced) in Open platform mode.
   Greying a nav tab looks broken — these stay hidden. */
[data-simplified="true"] [data-simplified-hide="true"] {
  display: none !important;
}

/* Dedicated Open platform sidebar group — present in docs.json (so search
   and direct links keep working) but hidden from the enterprise view.
   Revealed only when the user enters Open platform mode. */
[data-open-platform-only="true"] {
  display: none !important;
}

[data-simplified="true"] [data-open-platform-only="true"] {
  display: block !important;
}

/* Inverse: in Open platform mode, hide every other sidebar group plus the
   global top-bar anchors (Home / Community / Blog from
   navigation.global.anchors). The self-serve sidebar collapses down to the
   dedicated Open platform group, so the experience reads as a focused
   single-product surface rather than a stripped-down enterprise IA. */
[data-simplified="true"] [data-open-platform-hidden="true"] {
  display: none !important;
}

/* Visual hint on enterprise/developer sidebar entries in Open platform mode.
   JS marks the section header, the section's sibling list, and any
   individual page item with data-simplified-enterprise="true". The opacity
   cascade dims every descendant — so a marked group header dims all its
   sub-pages too. Items stay fully clickable; the dim is just a "this
   isn't on your Open platform" signal. The gating itself is enforced on the
   destination page (see the [data-on-enterprise-page] rule below). */
[data-simplified="true"] [data-simplified-enterprise="true"] {
  opacity: 0.55;
  filter: saturate(0.7);
}

/* Hover behavior: do not lift the opacity or animate. Grayed entries should
   read as inert — they stay clickable but visually do not invite interaction. */
[data-simplified="true"] [data-simplified-enterprise="true"]:hover {
  opacity: 0.55;
  filter: saturate(0.7);
  cursor: default;
}

/* Page content grayout + lock when the user lands on an enterprise page
   in Open platform mode. We target everything that follows the banner inside
   its container, so this works regardless of whether Mintlify wraps
   content in <main>, #content-area, or something else. The sidebar,
   navbar, and free-trial pill (none of which are siblings of the banner)
   are unaffected. */
[data-simplified="true"][data-on-enterprise-page="true"] .free-trial-enterprise-banner ~ * {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.55) blur(0.3px);
}

/* Belt-and-braces: any focusable descendant inside the grayed area should
   not steal tab focus or respond to clicks. */
[data-simplified="true"][data-on-enterprise-page="true"] .free-trial-enterprise-banner ~ * :is(a, button, input, select, textarea, [tabindex]) {
  pointer-events: none;
}

/* Lock cursor — make it obvious the content isn't interactive. */
[data-simplified="true"][data-on-enterprise-page="true"] .free-trial-enterprise-banner ~ *,
[data-simplified="true"][data-on-enterprise-page="true"] .free-trial-enterprise-banner ~ * * {
  cursor: not-allowed !important;
}

/* Banner stays sharp/saturated on top of the locked content. */
[data-simplified="true"][data-on-enterprise-page="true"] .free-trial-enterprise-banner,
[data-simplified="true"][data-on-enterprise-page="true"] .free-trial-enterprise-banner * {
  cursor: auto !important;
}
[data-simplified="true"][data-on-enterprise-page="true"] .free-trial-enterprise-banner :is(a, button) {
  cursor: pointer !important;
}

/* Inverse of the enterprise lockout: when NOT in Open platform mode (the
   enterprise default), and the path is in the OPEN_PLATFORM_ONLY_PATHS list
   (e.g. Studio Assistant), gray the page body and pin the OP-only banner.
   Reuses .free-trial-enterprise-banner's layout/typography. */
html[data-on-open-platform-only="true"]:not([data-simplified="true"]) .open-platform-only-banner ~ * {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.55) blur(0.3px);
}

html[data-on-open-platform-only="true"]:not([data-simplified="true"]) .open-platform-only-banner ~ * :is(a, button, input, select, textarea, [tabindex]) {
  pointer-events: none;
}

html[data-on-open-platform-only="true"]:not([data-simplified="true"]) .open-platform-only-banner ~ *,
html[data-on-open-platform-only="true"]:not([data-simplified="true"]) .open-platform-only-banner ~ * * {
  cursor: not-allowed !important;
}

html[data-on-open-platform-only="true"]:not([data-simplified="true"]) .open-platform-only-banner,
html[data-on-open-platform-only="true"]:not([data-simplified="true"]) .open-platform-only-banner * {
  cursor: auto !important;
}

html[data-on-open-platform-only="true"]:not([data-simplified="true"]) .open-platform-only-banner :is(a, button) {
  cursor: pointer !important;
}

/* ── Lock banners ─────────────────────────────────────────────────────────────
   Two flavours of floating lock card, both built on the same shell:
     - .free-trial-enterprise-banner — shown on enterprise pages when in OP mode
     - .open-platform-only-banner    — shown on OP pages when in enterprise mode
   Studio palette throughout. Floats top-center over the page, draggable
   via the ⋮⋮ handle on the left edge. Position persists in localStorage
   (handled in scripts/simplify-toggle.js). */
.free-trial-enterprise-banner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(380px, calc(100vw - 2rem));
  padding: 0.85rem 1rem 0.85rem 0.5rem;
  border: 1px solid rgba(22, 22, 23, 0.1);
  border-radius: 14px;
  background: var(--studio-paper);
  color: var(--studio-ink);
  font-size: 0.85rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  user-select: none;
}

html.dark .free-trial-enterprise-banner {
  background: var(--studio-ink);
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.free-trial-enterprise-banner--dragging {
  cursor: grabbing !important;
  transition: none !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Drag handle on the left edge — small ⋮⋮ icon, only the handle initiates
   drag so the banner body and buttons remain clickable. */
.free-trial-enterprise-banner__handle {
  flex: 0 0 auto;
  width: 0.9rem;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(22, 22, 23, 0.35);
  font-size: 0.7rem;
  letter-spacing: -0.1em;
  cursor: grab;
  touch-action: none;
  transition: color 140ms ease;
}

.free-trial-enterprise-banner__handle:hover {
  color: var(--studio-ink);
}

.free-trial-enterprise-banner--dragging .free-trial-enterprise-banner__handle {
  cursor: grabbing;
}

html.dark .free-trial-enterprise-banner__handle {
  color: rgba(255, 255, 255, 0.35);
}

html.dark .free-trial-enterprise-banner__handle:hover {
  color: #f5f5f5;
}

.free-trial-enterprise-banner__icon {
  font-size: 0.9rem;
  line-height: 1;
  color: var(--studio-ink);
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: var(--studio-lime-22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
}

html.dark .free-trial-enterprise-banner__icon {
  color: var(--studio-lime);
  background: var(--studio-lime-12);
}

.free-trial-enterprise-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}

.free-trial-enterprise-banner__title {
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.free-trial-enterprise-banner__title strong {
  font-weight: 600;
}

.free-trial-enterprise-banner__text {
  margin: 0 0 0.7rem 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(22, 22, 23, 0.78);
}

html.dark .free-trial-enterprise-banner__text {
  color: rgba(245, 245, 245, 0.78);
}

.free-trial-enterprise-banner__actions {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.free-trial-enterprise-banner__cta,
.free-trial-enterprise-banner__exit {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.free-trial-enterprise-banner__cta {
  background: var(--studio-ink);
  color: var(--studio-paper) !important;
  border: 1px solid var(--studio-ink);
}

.free-trial-enterprise-banner__cta:hover {
  background: rgba(22, 22, 23, 0.85);
  border-color: rgba(22, 22, 23, 0.85);
}

html.dark .free-trial-enterprise-banner__cta {
  background: var(--studio-lime);
  color: var(--studio-ink) !important;
  border-color: var(--studio-lime);
}

html.dark .free-trial-enterprise-banner__cta:hover {
  background: rgba(217, 238, 80, 0.85);
  border-color: rgba(217, 238, 80, 0.85);
}

.free-trial-enterprise-banner__exit {
  color: var(--studio-ink);
  background: transparent;
  border: 1px solid rgba(22, 22, 23, 0.2);
}

.free-trial-enterprise-banner__exit:hover {
  background: var(--studio-lime-12);
  border-color: var(--studio-lime-35);
}

html.dark .free-trial-enterprise-banner__exit {
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.2);
}

html.dark .free-trial-enterprise-banner__exit:hover {
  background: var(--studio-lime-12);
  border-color: var(--studio-lime-35);
}

/* The Open-platform-only variant gets the lime-on-ink CTA flipped: it's
   the affirmative action (Enter Open platform mode), so it gets the lime
   pill. Talk-to-sales is the secondary action. */
.open-platform-only-banner .free-trial-enterprise-banner__cta {
  background: var(--studio-lime);
  color: var(--studio-ink) !important;
  border-color: var(--studio-lime);
}

.open-platform-only-banner .free-trial-enterprise-banner__cta:hover {
  background: rgba(217, 238, 80, 0.85);
  border-color: rgba(217, 238, 80, 0.85);
}

html.dark .open-platform-only-banner .free-trial-enterprise-banner__cta {
  background: var(--studio-lime);
  color: var(--studio-ink) !important;
}

/* ── Content mode switching ──────────────────────────────────────────────────
   .developer-only sections are always visible in full-docs mode.
   In simplified mode, JS wraps them in a <details> accordion (.dev-accordion).
   .simplified-only is a legacy hint pattern — always hidden since the
   accordion replaces it. */

/* .simplified-only: shown only in simplified mode, hidden otherwise */
.simplified-only { display: none !important; }
[data-simplified="true"] .simplified-only { display: block !important; }

/* .full-only: shown in full-docs mode, hidden in simplified mode */
[data-simplified="true"] .full-only { display: none !important; }

/* Hide .developer-only before JS wraps it in an accordion, preventing a flash */
[data-simplified="true"] .developer-only:not([data-accordion-wrapped]) {
  display: none;
}

/* ── Developer content accordion (simplified mode only) ──────────────────── */

.dev-accordion {
  border: 1px solid rgba(22, 22, 23, 0.1);
  border-radius: 12px;
  margin: 1.25rem 0;
  overflow: hidden;
  background: var(--studio-paper);
}

html.dark .dev-accordion {
  background: rgba(22, 22, 23, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

.dev-accordion-summary {
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--studio-ink);
  background: var(--studio-lime-12);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: background 140ms ease;
}

html.dark .dev-accordion-summary {
  color: #f5f5f5;
  background: rgba(217, 238, 80, 0.06);
}

.dev-accordion-summary:hover {
  background: var(--studio-lime-22);
}

html.dark .dev-accordion-summary:hover {
  background: var(--studio-lime-12);
}

.dev-accordion-summary::-webkit-details-marker { display: none; }

.dev-accordion-summary::before {
  content: '▸';
  font-size: 0.7em;
  color: var(--studio-ink);
  opacity: 0.6;
  transition: transform 140ms ease;
}

html.dark .dev-accordion-summary::before {
  color: var(--studio-lime);
  opacity: 0.9;
}

.dev-accordion[open] > .dev-accordion-summary::before {
  transform: rotate(90deg);
}

.dev-accordion > .developer-only {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgba(22, 22, 23, 0.06);
}

html.dark .dev-accordion > .developer-only {
  border-top-color: rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .dev-accordion-summary::before { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .simplify-toggle {
    transition: none !important;
  }
}

/* ── Hide the "Log in" button from the topbar ────────────────────────────── */

#navbar a[href="/login"],
#navbar button[data-testid="login-button"],
nav a[href="/login"] {
  display: none !important;
}