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 {
  margin: 0 !important;
  padding: 0.25rem 0.75rem !important;
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  font-size: 0.85rem !important;
  text-align: center !important;
}

footer > div {
  margin: 0 !important;
  padding: 0 !important;
}

footer > div[class*="container"] {
  margin: 0 !important;
  padding: 0 !important;
}

footer a[href="/"] img {
  height: auto !important;
  width: auto !important;
  max-height: 24px !important;
  transform: scale(0.85);
  transform-origin: left center;
}

footer * {
  margin: 0.15rem !important;
  padding: 0 !important;
  line-height: 1.3 !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] {
  margin-top: -16px !important;
  padding-top: 0 !important;
}

footer + div {
  margin-top: -16px !important;
  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 — colour-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 ──────────────────────────────────────────────────── */

/* Button injected into top nav by simplify-view.js */
.simplify-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.28em 0.8em;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
  margin-left: 0.6rem;
}

.simplify-toggle:hover {
  background: rgba(217, 238, 80, 0.12);
  border-color: var(--studio-lime-35);
}

/* 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 developer/advanced sidebar items in simplified mode.
   JS marks them with data-simplified-hide="true" — covers section headers,
   collapsed sub-groups, and individual expanded page items. */
[data-simplified="true"] [data-simplified-hide="true"] {
  display: none !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(99, 102, 241, 0.2);
  border-radius: 8px;
  margin: 1.5rem 0;
  overflow: hidden;
}

.dev-accordion-summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.dev-accordion-summary::before {
  content: '▸';
  font-size: 0.75em;
  transition: transform 140ms ease;
}

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

.dev-accordion > .developer-only {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(99, 102, 241, 0.1);
}

@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;
}